You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
chore: Update import paths and dependencies for @react-aria-nutrient
* Refactored import statements in various components and tests to use @react-aria-nutrient/overlays instead of @react-aria/overlays.
* Removed references to @react-aria/overlays from package.json and yarn.lock.
* Updated documentation links to reflect the new package structure.
Copy file name to clipboardExpand all lines: packages/dev/docs/pages/blog/building-a-combobox.mdx
+2-2
Original file line number
Diff line number
Diff line change
@@ -72,7 +72,7 @@ to see how the ComboBox tray worked before and after we switched to the VisualVi
72
72
Another issue we encountered had to do with iOS Safari page scrolling behavior. When the onscreen keyboard is visible, iOS Safari makes the page scrollable so that users can still access content that is hidden behind the keyboard. However,
73
73
now that our ComboBox tray sizes itself to fit in the visual viewport, users could now scroll the entire tray itself off screen. To stop this from happening, we prevent default on `touchmove` events that happen on the document body
74
74
or root element of the document. This preserves the user's ability to scroll through the options in the tray but blocks any attempt to scroll the page itself until the tray is closed. The video below
75
-
illustrates the difference in scrolling behavior before and after our fix. If you are building your own overlays and would like to prevent this kind of document scrolling behavior, check out the [usePreventScroll](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/usePreventScroll.ts) hook in the `react-aria/overlays` package.
75
+
illustrates the difference in scrolling behavior before and after our fix. If you are building your own overlays and would like to prevent this kind of document scrolling behavior, check out the [usePreventScroll](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria-nutrient/overlays/src/usePreventScroll.ts) hook in the `react-aria/overlays` package.
@@ -94,7 +94,7 @@ set. Therefore, we had to figure out a way to make the input and listbox the onl
94
94
The solution that we came up with was to crawl the DOM and apply `aria-hidden` to every element that wasn't the input or listbox. To crawl the DOM we used a [TreeWalker](https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker),
95
95
setting up a node filter to determine if a node should be left visible, hidden, or skipped in the case where its parent was already hidden. In addition, we watch for any changes in the DOM while the listbox is open
96
96
via a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), hiding those new elements if need be. When the popover closes, every node that we modified is reverted back to its previous state.
97
-
Check out our [ariaHideOutside](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/overlays/src/ariaHideOutside.ts) function in `@react-aria-nutrient/overlays` if you'd like to learn more.
97
+
Check out our [ariaHideOutside](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria-nutrient/overlays/src/ariaHideOutside.ts) function in `@react-aria-nutrient/overlays` if you'd like to learn more.
0 commit comments