feat: CloseWatchers for overlays

[snowystinger]

Closes #5531

An alternative to #9818

Open questions:

• Should every overlay be closed by close watchers? should some just be Esc? "Tooltip" for example?
• How do we test and verify behaviour of "grouped" watchers? See closeWatcher file for more info
• If multiple are closed synchronously (probably via that grouping) should we also close all of our corresponding overlays synchronously?
• Should we expose any of the CloseWatchers to users so they can call preventDefault in the cancel event? How would this work for the pool?

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Go to overlays and close them via the Esc key, or Android "<" button, or gestures on supported devices. Only supported in FF and Chrome.
Nested Modals, Toasts, with things that also use the Esc key are great for finding edge cases. For example, Selection in a List can be cleared via Esc.

I've written a number of browser tests including for the fall backs in Safari.

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[snowystinger]

Not sure why the browser test is failing here. It's passing locally.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Agent Skills Changes

Removed (90)

• react-aria/skills/react-aria/references/components/Breadcrumbs/useBreadcrumbs.md
• react-aria/skills/react-aria/references/components/Button/useButton.md
• react-aria/skills/react-aria/references/components/Calendar/useCalendar.md
• react-aria/skills/react-aria/references/components/Checkbox/useCheckbox.md
• react-aria/skills/react-aria/references/components/CheckboxGroup/useCheckboxGroup.md
• react-aria/skills/react-aria/references/components/ColorArea/useColorArea.md
• react-aria/skills/react-aria/references/components/ColorField/useColorField.md
• react-aria/skills/react-aria/references/components/ColorSlider/useColorSlider.md
• react-aria/skills/react-aria/references/components/ColorSwatch/useColorSwatch.md
• react-aria/skills/react-aria/references/components/ColorWheel/useColorWheel.md
• react-aria/skills/react-aria/references/components/ComboBox/useComboBox.md
• react-aria/skills/react-aria/references/components/DateField/useDateField.md
• react-aria/skills/react-aria/references/components/DatePicker/useDatePicker.md
• react-aria/skills/react-aria/references/components/DateRangePicker/useDateRangePicker.md
• react-aria/skills/react-aria/references/components/Disclosure/useDisclosure.md
• react-aria/skills/react-aria/references/components/GridList/useGridList.md
• react-aria/skills/react-aria/references/components/Link/useLink.md
• react-aria/skills/react-aria/references/components/ListBox/useListBox.md
• react-aria/skills/react-aria/references/components/Menu/useMenu.md
• react-aria/skills/react-aria/references/components/Meter/useMeter.md
• react-aria/skills/react-aria/references/components/Modal/useModalOverlay.md
• react-aria/skills/react-aria/references/components/NumberField/useNumberField.md
• react-aria/skills/react-aria/references/components/Popover/usePopover.md
• react-aria/skills/react-aria/references/components/ProgressBar/useProgressBar.md
• react-aria/skills/react-aria/references/components/RadioGroup/useRadioGroup.md
• react-aria/skills/react-aria/references/components/RangeCalendar/useRangeCalendar.md
• react-aria/skills/react-aria/references/components/SearchField/useSearchField.md
• react-aria/skills/react-aria/references/components/Select/useSelect.md
• react-aria/skills/react-aria/references/components/Separator/useSeparator.md
• react-aria/skills/react-aria/references/components/Slider/useSlider.md
• react-aria/skills/react-aria/references/components/Switch/useSwitch.md
• react-aria/skills/react-aria/references/components/Table/useTable.md
• react-aria/skills/react-aria/references/components/Tabs/useTabList.md
• react-aria/skills/react-aria/references/components/TagGroup/useTagGroup.md
• react-aria/skills/react-aria/references/components/TextField/useTextField.md
• react-aria/skills/react-aria/references/components/TimeField/useTimeField.md
• react-aria/skills/react-aria/references/components/Toast/useToast.md
• react-aria/skills/react-aria/references/components/ToggleButton/useToggleButton.md
• react-aria/skills/react-aria/references/components/ToggleButtonGroup/useToggleButtonGroup.md
• react-aria/skills/react-aria/references/components/Toolbar/useToolbar.md
• react-aria/skills/react-aria/references/components/Tooltip/useTooltipTrigger.md
• react-aria/skills/react-aria/references/guides/hooks.md
• react-aria/skills/react-aria/references/interactions/useDraggableCollection.md
• react-aria/skills/react-aria/references/interactions/useDroppableCollection.md
• react-aria/skills/react-aria/references/utilities/useListFormatter.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Breadcrumbs/useBreadcrumbs.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Button/useButton.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Calendar/useCalendar.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Checkbox/useCheckbox.md
• s2/skills/react-spectrum-s2/references/react-aria/components/CheckboxGroup/useCheckboxGroup.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorArea/useColorArea.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorField/useColorField.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorSlider/useColorSlider.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorSwatch/useColorSwatch.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorWheel/useColorWheel.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ComboBox/useComboBox.md
• s2/skills/react-spectrum-s2/references/react-aria/components/DateField/useDateField.md
• s2/skills/react-spectrum-s2/references/react-aria/components/DatePicker/useDatePicker.md
• s2/skills/react-spectrum-s2/references/react-aria/components/DateRangePicker/useDateRangePicker.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Disclosure/useDisclosure.md
• s2/skills/react-spectrum-s2/references/react-aria/components/GridList/useGridList.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Link/useLink.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ListBox/useListBox.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Menu/useMenu.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Meter/useMeter.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Modal/useModalOverlay.md
• s2/skills/react-spectrum-s2/references/react-aria/components/NumberField/useNumberField.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Popover/usePopover.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ProgressBar/useProgressBar.md
• s2/skills/react-spectrum-s2/references/react-aria/components/RadioGroup/useRadioGroup.md
• s2/skills/react-spectrum-s2/references/react-aria/components/RangeCalendar/useRangeCalendar.md
• s2/skills/react-spectrum-s2/references/react-aria/components/SearchField/useSearchField.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Select/useSelect.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Slider/useSlider.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Switch/useSwitch.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Table/useTable.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Tabs/useTabList.md
• s2/skills/react-spectrum-s2/references/react-aria/components/TagGroup/useTagGroup.md
• s2/skills/react-spectrum-s2/references/react-aria/components/TextField/useTextField.md
• s2/skills/react-spectrum-s2/references/react-aria/components/TimeField/useTimeField.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Toast/useToast.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ToggleButton/useToggleButton.md
• s2/skills/react-spectrum-s2/references/react-aria/components/ToggleButtonGroup/useToggleButtonGroup.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Toolbar/useToolbar.md
• s2/skills/react-spectrum-s2/references/react-aria/components/Tooltip/useTooltipTrigger.md
• s2/skills/react-spectrum-s2/references/react-aria/guides/hooks.md
• s2/skills/react-spectrum-s2/references/react-aria/interactions/useDraggableCollection.md
• s2/skills/react-spectrum-s2/references/react-aria/interactions/useDroppableCollection.md
• s2/skills/react-spectrum-s2/references/react-aria/utilities/useListFormatter.md

Modified (33)

• react-aria/skills/index.json $\color{red}{-45}$
• react-aria/skills/react-aria/SKILL.md $\color{green}{+1}$ $\color{red}{-5}$
• react-aria/skills/react-aria/references/components/Calendar.md $\color{green}{+3}$ $\color{red}{-10}$
• react-aria/skills/react-aria/references/components/CheckboxGroup.md $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/ColorArea.md $\color{red}{-2}$
• react-aria/skills/react-aria/references/components/ColorSlider.md $\color{red}{-2}$
• react-aria/skills/react-aria/references/components/ColorWheel.md $\color{red}{-2}$
• react-aria/skills/react-aria/references/components/DatePicker.md $\color{red}{-6}$
• react-aria/skills/react-aria/references/components/Menu.md $\color{red}{-3}$
• react-aria/skills/react-aria/references/components/RadioGroup.md $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/RangeCalendar.md $\color{green}{+2}$ $\color{red}{-2}$
• react-aria/skills/react-aria/references/components/TagGroup.md $\color{red}{-7}$
• react-aria/skills/react-aria/references/components/Toast.md $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/TokenField.md $\color{green}{+8}$ $\color{red}{-8}$
• react-aria/skills/react-aria/references/guides/customization.md $\color{green}{+113}$ $\color{red}{-27}$
• react-aria/skills/react-aria/references/interactions/FocusScope.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/skills/react-aria/references/llms.txt $\color{red}{-45}$
• s2/skills/index.json $\color{red}{-45}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Calendar.md $\color{green}{+3}$ $\color{red}{-10}$
• s2/skills/react-spectrum-s2/references/react-aria/components/CheckboxGroup.md $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorArea.md $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorSlider.md $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/react-aria/components/ColorWheel.md $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/react-aria/components/DatePicker.md $\color{red}{-6}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Menu.md $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/react-aria/components/RadioGroup.md $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/RangeCalendar.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/react-aria/components/TagGroup.md $\color{red}{-7}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Toast.md $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/TokenField.md $\color{green}{+8}$ $\color{red}{-8}$
• s2/skills/react-spectrum-s2/references/react-aria/guides/customization.md $\color{green}{+113}$ $\color{red}{-27}$
• s2/skills/react-spectrum-s2/references/react-aria/interactions/FocusScope.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/llms.txt $\color{red}{-45}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/68c44daf8d5a432cd17b8b4c8812f4185c9f6f5f/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/68c44daf8d5a432cd17b8b4c8812f4185c9f6f5f/