reshaped 3.8.0-canary.2 → 3.8.0-canary.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.css +1 -1
 - package/dist/bundle.d.ts +2 -1
 - package/dist/bundle.js +11 -11
 - package/dist/components/Accordion/AccordionControlled.js +1 -0
 - package/dist/components/Actionable/Actionable.js +17 -3
 - package/dist/components/Actionable/Actionable.module.css +1 -1
 - package/dist/components/Actionable/Actionable.types.d.ts +15 -3
 - package/dist/components/Actionable/tests/Actionable.stories.d.ts +13 -1
 - package/dist/components/Actionable/tests/Actionable.stories.js +127 -7
 - package/dist/components/Alert/tests/Alert.stories.d.ts +6 -5
 - package/dist/components/Alert/tests/Alert.stories.js +15 -2
 - package/dist/components/Autocomplete/Autocomplete.js +2 -2
 - package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -1
 - package/dist/components/Badge/Badge.module.css +1 -1
 - package/dist/components/Badge/tests/Badge.stories.d.ts +5 -0
 - package/dist/components/Badge/tests/Badge.stories.js +34 -0
 - package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -0
 - package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +8 -4
 - package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +57 -1
 - package/dist/components/Button/Button.js +2 -2
 - package/dist/components/Button/Button.module.css +1 -1
 - package/dist/components/Button/Button.types.d.ts +1 -1
 - package/dist/components/Button/tests/Button.stories.d.ts +54 -12
 - package/dist/components/Button/tests/Button.stories.js +725 -588
 - package/dist/components/Calendar/CalendarMonth.js +1 -0
 - package/dist/components/Card/Card.d.ts +1 -1
 - package/dist/components/Card/Card.module.css +1 -1
 - package/dist/components/Card/tests/Card.stories.d.ts +29 -7
 - package/dist/components/Card/tests/Card.stories.js +110 -65
 - package/dist/components/Carousel/Carousel.js +1 -0
 - package/dist/components/Carousel/Carousel.module.css +1 -1
 - package/dist/components/Checkbox/Checkbox.module.css +1 -1
 - package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +20 -4
 - package/dist/components/Checkbox/tests/Checkbox.stories.js +150 -79
 - package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +9 -2
 - package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +67 -35
 - package/dist/components/Container/tests/Container.stories.d.ts +2 -0
 - package/dist/components/Container/tests/Container.stories.js +14 -0
 - package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +10 -1
 - package/dist/components/ContextMenu/tests/ContextMenu.stories.js +57 -13
 - package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +5 -0
 - package/dist/components/Dismissible/tests/Dismissible.stories.js +30 -1
 - package/dist/components/Divider/tests/Divider.stories.d.ts +8 -3
 - package/dist/components/Divider/tests/Divider.stories.js +71 -41
 - package/dist/components/DropdownMenu/DropdownMenu.js +4 -4
 - package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +2 -2
 - package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +35 -6
 - package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +222 -115
 - package/dist/components/FileUpload/FileUpload.module.css +1 -1
 - package/dist/components/Flyout/Flyout.module.css +1 -1
 - package/dist/components/Flyout/Flyout.types.d.ts +7 -7
 - package/dist/components/Flyout/FlyoutContent.js +4 -1
 - package/dist/components/Flyout/FlyoutControlled.js +10 -3
 - package/dist/components/Flyout/index.d.ts +1 -1
 - package/dist/components/Flyout/tests/Flyout.stories.d.ts +8 -0
 - package/dist/components/Flyout/tests/Flyout.stories.js +81 -33
 - package/dist/components/Flyout/useFlyout.d.ts +1 -7
 - package/dist/components/Flyout/useFlyout.js +5 -1
 - package/dist/components/Flyout/utilities/calculatePosition.d.ts +3 -2
 - package/dist/components/Flyout/utilities/calculatePosition.js +47 -22
 - package/dist/components/Flyout/utilities/flyout.js +3 -2
 - package/dist/components/Flyout/utilities/getPositionFallbacks.js +3 -3
 - package/dist/components/Flyout/utilities/isFullyVisible.d.ts +0 -2
 - package/dist/components/Flyout/utilities/isFullyVisible.js +5 -7
 - package/dist/components/FormControl/FormControl.context.d.ts +1 -1
 - package/dist/components/FormControl/tests/FormControl.stories.d.ts +2 -0
 - package/dist/components/FormControl/tests/FormControl.stories.js +35 -0
 - package/dist/components/Hidden/tests/Hidden.stories.d.ts +2 -0
 - package/dist/components/Hidden/tests/Hidden.stories.js +9 -0
 - package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +2 -0
 - package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +9 -0
 - package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +2 -0
 - package/dist/components/Hotkey/tests/Hotkey.stories.js +15 -0
 - package/dist/components/Icon/Icon.js +2 -2
 - package/dist/components/Icon/Icon.types.d.ts +1 -1
 - package/dist/components/Icon/tests/Icon.stories.d.ts +3 -0
 - package/dist/components/Icon/tests/Icon.stories.js +29 -1
 - package/dist/components/Link/Link.d.ts +1 -1
 - package/dist/components/Link/Link.js +2 -2
 - package/dist/components/Link/Link.types.d.ts +1 -1
 - package/dist/components/Link/tests/Link.stories.d.ts +29 -6
 - package/dist/components/Link/tests/Link.stories.js +141 -58
 - package/dist/components/Loader/tests/Loader.stories.d.ts +11 -2
 - package/dist/components/Loader/tests/Loader.stories.js +52 -25
 - package/dist/components/MenuItem/MenuItem.js +2 -2
 - package/dist/components/MenuItem/MenuItem.module.css +1 -1
 - package/dist/components/MenuItem/MenuItem.types.d.ts +1 -1
 - package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +37 -7
 - package/dist/components/MenuItem/tests/MenuItem.stories.js +218 -112
 - package/dist/components/Modal/Modal.js +1 -1
 - package/dist/components/Modal/Modal.module.css +1 -1
 - package/dist/components/Modal/tests/Modal.stories.d.ts +49 -10
 - package/dist/components/Modal/tests/Modal.stories.js +350 -210
 - package/dist/components/Overlay/Overlay.js +2 -1
 - package/dist/components/Overlay/tests/Overlay.stories.d.ts +15 -1
 - package/dist/components/Overlay/tests/Overlay.stories.js +135 -1
 - package/dist/components/Pagination/tests/Pagination.stories.d.ts +14 -1
 - package/dist/components/Pagination/tests/Pagination.stories.js +93 -15
 - package/dist/components/PinField/tests/PinField.stories.d.ts +1 -1
 - package/dist/components/PinField/tests/PinField.stories.js +1 -1
 - package/dist/components/Popover/Popover.js +2 -2
 - package/dist/components/Popover/Popover.module.css +1 -1
 - package/dist/components/Popover/Popover.types.d.ts +3 -1
 - package/dist/components/Progress/tests/Progress.stories.d.ts +19 -4
 - package/dist/components/Progress/tests/Progress.stories.js +85 -49
 - package/dist/components/Radio/Radio.module.css +1 -1
 - package/dist/components/Radio/tests/Radio.stories.d.ts +25 -4
 - package/dist/components/Radio/tests/Radio.stories.js +147 -65
 - package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +9 -2
 - package/dist/components/RadioGroup/tests/RadioGroup.stories.js +64 -38
 - package/dist/components/Reshaped/Reshaped.css +1 -1
 - package/dist/components/Scrim/tests/Scrim.stories.d.ts +10 -2
 - package/dist/components/Scrim/tests/Scrim.stories.js +51 -31
 - package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
 - package/dist/components/Select/Select.d.ts +8 -1
 - package/dist/components/Select/Select.js +22 -48
 - package/dist/components/Select/Select.module.css +1 -1
 - package/dist/components/Select/Select.types.d.ts +83 -38
 - package/dist/components/Select/SelectCustom.d.ts +3 -0
 - package/dist/components/Select/SelectCustom.js +12 -0
 - package/dist/components/Select/SelectCustomControlled.d.ts +4 -0
 - package/dist/components/Select/SelectCustomControlled.js +105 -0
 - package/dist/components/Select/SelectCustomUncontrolled.d.ts +4 -0
 - package/dist/components/Select/SelectCustomUncontrolled.js +18 -0
 - package/dist/components/Select/SelectEndContent.d.ts +3 -0
 - package/dist/components/Select/SelectEndContent.js +12 -0
 - package/dist/components/Select/SelectNative.d.ts +4 -0
 - package/dist/components/Select/SelectNative.js +29 -0
 - package/dist/components/Select/SelectOption.d.ts +4 -0
 - package/dist/components/Select/SelectOption.js +13 -0
 - package/dist/components/Select/SelectOptionGroup.d.ts +4 -0
 - package/dist/components/Select/SelectOptionGroup.js +9 -0
 - package/dist/components/Select/SelectRoot.d.ts +4 -0
 - package/dist/components/Select/SelectRoot.js +21 -0
 - package/dist/components/Select/SelectStartContent.d.ts +3 -0
 - package/dist/components/Select/SelectStartContent.js +20 -0
 - package/dist/components/Select/SelectTrigger.d.ts +4 -0
 - package/dist/components/Select/SelectTrigger.js +16 -0
 - package/dist/components/Select/tests/Select.stories.d.ts +38 -10
 - package/dist/components/Select/tests/Select.stories.js +504 -175
 - package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +10 -2
 - package/dist/components/Skeleton/tests/Skeleton.stories.js +46 -28
 - package/dist/components/Slider/Slider.module.css +1 -1
 - package/dist/components/Stepper/Stepper.js +2 -2
 - package/dist/components/Stepper/Stepper.types.d.ts +2 -0
 - package/dist/components/Stepper/tests/Stepper.stories.d.ts +18 -3
 - package/dist/components/Stepper/tests/Stepper.stories.js +99 -47
 - package/dist/components/Switch/Switch.module.css +1 -1
 - package/dist/components/Switch/tests/Switch.stories.d.ts +10 -2
 - package/dist/components/Switch/tests/Switch.stories.js +77 -23
 - package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -10
 - package/dist/components/Switch/tests/Switch.test.stories.js +0 -68
 - package/dist/components/Table/Table.js +5 -3
 - package/dist/components/Table/Table.module.css +1 -1
 - package/dist/components/Table/tests/Table.stories.d.ts +25 -5
 - package/dist/components/Table/tests/Table.stories.js +274 -177
 - package/dist/components/Tabs/Tabs.module.css +1 -1
 - package/dist/components/Tabs/TabsControlled.js +1 -0
 - package/dist/components/Tabs/TabsList.js +3 -20
 - package/dist/components/Text/Text.module.css +1 -1
 - package/dist/components/TextArea/TextArea.module.css +1 -1
 - package/dist/components/TextArea/tests/TextArea.stories.d.ts +41 -9
 - package/dist/components/TextArea/tests/TextArea.stories.js +179 -93
 - package/dist/components/TextField/TextField.js +11 -3
 - package/dist/components/TextField/TextField.module.css +1 -1
 - package/dist/components/TextField/TextField.types.d.ts +5 -1
 - package/dist/components/TextField/tests/TextField.stories.d.ts +41 -11
 - package/dist/components/TextField/tests/TextField.stories.js +209 -129
 - package/dist/components/Theme/Theme.module.css +1 -1
 - package/dist/components/Timeline/Timeline.js +2 -2
 - package/dist/components/Timeline/tests/Timeline.stories.d.ts +10 -2
 - package/dist/components/Timeline/tests/Timeline.stories.js +69 -45
 - package/dist/components/Toast/ToastContainer.js +1 -0
 - package/dist/components/Toast/ToastRegion.js +1 -0
 - package/dist/components/Toast/tests/Toast.stories.d.ts +32 -8
 - package/dist/components/Toast/tests/Toast.stories.js +111 -37
 - package/dist/components/ToggleButton/ToggleButton.types.d.ts +5 -1
 - package/dist/components/ToggleButton/ToggleButtonControlled.js +9 -2
 - package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts +4 -0
 - package/dist/components/ToggleButton/tests/ToggleButton.stories.js +10 -0
 - package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.d.ts +10 -0
 - package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +6 -41
 - package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +1 -0
 - package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +17 -0
 - package/dist/components/Tooltip/Tooltip.js +1 -1
 - package/dist/components/Tooltip/Tooltip.types.d.ts +2 -2
 - package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +18 -4
 - package/dist/components/Tooltip/tests/Tooltip.stories.js +139 -107
 - package/dist/components/View/View.js +11 -4
 - package/dist/components/View/View.types.d.ts +1 -1
 - package/dist/components/View/tests/View.stories.d.ts +4 -0
 - package/dist/components/View/tests/View.stories.js +39 -0
 - package/dist/components/_private/Expandable/Expandable.js +3 -1
 - package/dist/components/_private/Portal/Portal.js +4 -1
 - package/dist/hooks/_private/useIsDismissible.d.ts +1 -0
 - package/dist/hooks/_private/useIsDismissible.js +6 -6
 - package/dist/hooks/_private/usePrevious.js +1 -0
 - package/dist/hooks/tests/useDrag.stories.js +1 -1
 - package/dist/{components/Toast/tests/Toast.test.stories.d.ts → hooks/tests/useKeyboardArrowNavigation.stories.d.ts} +4 -5
 - package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js +128 -0
 - package/dist/hooks/useKeyboardArrowNavigation.d.ts +9 -0
 - package/dist/hooks/useKeyboardArrowNavigation.js +62 -0
 - package/dist/hooks/useOnClickOutside.js +0 -2
 - package/dist/hooks/useScrollLock.js +5 -3
 - package/dist/index.d.ts +2 -1
 - package/dist/index.js +1 -0
 - package/dist/styles/resolvers/align/align.css +1 -1
 - package/dist/styles/resolvers/aspectRatio/aspectRatio.css +1 -1
 - package/dist/styles/resolvers/bleed/bleed.module.css +1 -1
 - package/dist/styles/resolvers/justify/justify.css +1 -1
 - package/dist/styles/resolvers/maxHeight/maxHeight.module.css +1 -1
 - package/dist/styles/resolvers/maxWidth/maxWidth.module.css +1 -1
 - package/dist/styles/resolvers/minHeight/minHeight.module.css +1 -1
 - package/dist/styles/resolvers/minWidth/minWidth.module.css +1 -1
 - package/dist/styles/resolvers/position/position.css +1 -1
 - package/dist/styles/resolvers/textAlign/textAlign.css +1 -1
 - package/dist/styles/resolvers/width/width.module.css +1 -1
 - package/dist/utilities/a11y/focus.d.ts +21 -4
 - package/dist/utilities/a11y/focus.js +4 -3
 - package/dist/utilities/scroll/disable.js +2 -2
 - package/dist/utilities/scroll/index.d.ts +1 -1
 - package/dist/utilities/scroll/index.js +1 -1
 - package/dist/utilities/scroll/lock.d.ts +1 -2
 - package/dist/utilities/scroll/lock.js +16 -15
 - package/dist/utilities/scroll/lockSafari.js +1 -0
 - package/package.json +195 -201
 - package/CHANGELOG-extra.md +0 -3
 - package/CHANGELOG.md +0 -57
 - package/dist/components/Actionable/tests/Actionable.test.stories.d.ts +0 -32
 - package/dist/components/Actionable/tests/Actionable.test.stories.js +0 -130
 - package/dist/components/Alert/tests/Alert.test.stories.d.ts +0 -15
 - package/dist/components/Alert/tests/Alert.test.stories.js +0 -26
 - package/dist/components/Badge/tests/Badge.test.stories.d.ts +0 -20
 - package/dist/components/Badge/tests/Badge.test.stories.js +0 -46
 - package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts +0 -23
 - package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js +0 -76
 - package/dist/components/Button/tests/Button.test.stories.d.ts +0 -27
 - package/dist/components/Button/tests/Button.test.stories.js +0 -112
 - package/dist/components/Card/tests/Card.test.stories.d.ts +0 -35
 - package/dist/components/Card/tests/Card.test.stories.js +0 -54
 - package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts +0 -25
 - package/dist/components/Checkbox/tests/Checkbox.test.stories.js +0 -104
 - package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts +0 -22
 - package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js +0 -78
 - package/dist/components/Container/tests/Container.test.stories.d.ts +0 -15
 - package/dist/components/Container/tests/Container.test.stories.js +0 -26
 - package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts +0 -25
 - package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js +0 -53
 - package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts +0 -19
 - package/dist/components/Dismissible/tests/Dismissible.test.stories.js +0 -42
 - package/dist/components/Divider/tests/Divider.test.stories.d.ts +0 -18
 - package/dist/components/Divider/tests/Divider.test.stories.js +0 -47
 - package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +0 -36
 - package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +0 -117
 - package/dist/components/FormControl/tests/FormControl.test.stories.d.ts +0 -20
 - package/dist/components/FormControl/tests/FormControl.test.stories.js +0 -49
 - package/dist/components/Hidden/tests/Hidden.test.stories.d.ts +0 -15
 - package/dist/components/Hidden/tests/Hidden.test.stories.js +0 -20
 - package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts +0 -15
 - package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.js +0 -20
 - package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts +0 -15
 - package/dist/components/Hotkey/tests/Hotkey.test.stories.js +0 -26
 - package/dist/components/Icon/tests/Icon.test.stories.d.ts +0 -16
 - package/dist/components/Icon/tests/Icon.test.stories.js +0 -35
 - package/dist/components/Link/tests/Link.test.stories.d.ts +0 -29
 - package/dist/components/Link/tests/Link.test.stories.js +0 -87
 - package/dist/components/Loader/tests/Loader.test.stories.d.ts +0 -16
 - package/dist/components/Loader/tests/Loader.test.stories.js +0 -32
 - package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts +0 -26
 - package/dist/components/MenuItem/tests/MenuItem.test.stories.js +0 -100
 - package/dist/components/Modal/tests/Modal.test.stories.d.ts +0 -31
 - package/dist/components/Modal/tests/Modal.test.stories.js +0 -149
 - package/dist/components/Overlay/tests/Overlay.test.stories.d.ts +0 -28
 - package/dist/components/Overlay/tests/Overlay.test.stories.js +0 -148
 - package/dist/components/Pagination/tests/Pagination.test.stories.d.ts +0 -23
 - package/dist/components/Pagination/tests/Pagination.test.stories.js +0 -86
 - package/dist/components/Progress/tests/Progress.test.stories.d.ts +0 -16
 - package/dist/components/Progress/tests/Progress.test.stories.js +0 -35
 - package/dist/components/Radio/tests/Radio.test.stories.d.ts +0 -30
 - package/dist/components/Radio/tests/Radio.test.stories.js +0 -118
 - package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts +0 -22
 - package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js +0 -78
 - package/dist/components/Scrim/tests/Scrim.test.stories.d.ts +0 -15
 - package/dist/components/Scrim/tests/Scrim.test.stories.js +0 -25
 - package/dist/components/Select/tests/Select.test.stories.d.ts +0 -27
 - package/dist/components/Select/tests/Select.test.stories.js +0 -132
 - package/dist/components/Skeleton/tests/Skeleton.test.stories.d.ts +0 -15
 - package/dist/components/Skeleton/tests/Skeleton.test.stories.js +0 -23
 - package/dist/components/Stepper/tests/Stepper.test.stories.d.ts +0 -20
 - package/dist/components/Stepper/tests/Stepper.test.stories.js +0 -28
 - package/dist/components/Table/tests/Table.test.stories.d.ts +0 -24
 - package/dist/components/Table/tests/Table.test.stories.js +0 -93
 - package/dist/components/TextArea/tests/TextArea.test.stories.d.ts +0 -28
 - package/dist/components/TextArea/tests/TextArea.test.stories.js +0 -99
 - package/dist/components/TextField/tests/TextField.test.stories.d.ts +0 -28
 - package/dist/components/TextField/tests/TextField.test.stories.js +0 -99
 - package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +0 -17
 - package/dist/components/Timeline/tests/Timeline.test.stories.js +0 -32
 - package/dist/components/Toast/tests/Toast.test.stories.js +0 -101
 - package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +0 -19
 - package/dist/components/Tooltip/tests/Tooltip.test.stories.js +0 -40
 - package/dist/components/View/tests/View.test.stories.d.ts +0 -24
 - package/dist/components/View/tests/View.test.stories.js +0 -50
 
| 
         @@ -0,0 +1,9 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            import React from "react";
         
     | 
| 
      
 2 
     | 
    
         
            +
            type Props = {
         
     | 
| 
      
 3 
     | 
    
         
            +
                ref: React.RefObject<HTMLElement | null>;
         
     | 
| 
      
 4 
     | 
    
         
            +
                disabled?: boolean;
         
     | 
| 
      
 5 
     | 
    
         
            +
                orientation?: "vertical" | "horizontal";
         
     | 
| 
      
 6 
     | 
    
         
            +
                circular?: boolean;
         
     | 
| 
      
 7 
     | 
    
         
            +
            };
         
     | 
| 
      
 8 
     | 
    
         
            +
            declare const useKeyboardArrowNavigation: (props: Props) => void;
         
     | 
| 
      
 9 
     | 
    
         
            +
            export default useKeyboardArrowNavigation;
         
     | 
| 
         @@ -0,0 +1,62 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            import React, { useEffect } from "react";
         
     | 
| 
      
 2 
     | 
    
         
            +
            import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "../utilities/a11y/index.js";
         
     | 
| 
      
 3 
     | 
    
         
            +
            import useHotkeys from "./useHotkeys.js";
         
     | 
| 
      
 4 
     | 
    
         
            +
            const useKeyboardArrowNavigation = (props) => {
         
     | 
| 
      
 5 
     | 
    
         
            +
                const { ref, disabled, orientation, circular } = props;
         
     | 
| 
      
 6 
     | 
    
         
            +
                const backHotkeys = [];
         
     | 
| 
      
 7 
     | 
    
         
            +
                const forwardHotkeys = [];
         
     | 
| 
      
 8 
     | 
    
         
            +
                if (!orientation || orientation === "vertical") {
         
     | 
| 
      
 9 
     | 
    
         
            +
                    backHotkeys.push("ArrowUp");
         
     | 
| 
      
 10 
     | 
    
         
            +
                    forwardHotkeys.push("ArrowDown");
         
     | 
| 
      
 11 
     | 
    
         
            +
                }
         
     | 
| 
      
 12 
     | 
    
         
            +
                if (!orientation || orientation === "horizontal") {
         
     | 
| 
      
 13 
     | 
    
         
            +
                    backHotkeys.push("ArrowLeft");
         
     | 
| 
      
 14 
     | 
    
         
            +
                    forwardHotkeys.push("ArrowRight");
         
     | 
| 
      
 15 
     | 
    
         
            +
                }
         
     | 
| 
      
 16 
     | 
    
         
            +
                const updateTabIndex = React.useCallback((options) => {
         
     | 
| 
      
 17 
     | 
    
         
            +
                    const { el, focusableElements } = options;
         
     | 
| 
      
 18 
     | 
    
         
            +
                    const initialEl = focusableElements.find((el) => el.getAttribute("tabindex") !== "-1");
         
     | 
| 
      
 19 
     | 
    
         
            +
                    const activeEl = el ?? initialEl ?? focusableElements[0];
         
     | 
| 
      
 20 
     | 
    
         
            +
                    focusableElements.forEach((el) => el.setAttribute("tabindex", "-1"));
         
     | 
| 
      
 21 
     | 
    
         
            +
                    activeEl?.setAttribute("tabindex", "0");
         
     | 
| 
      
 22 
     | 
    
         
            +
                }, []);
         
     | 
| 
      
 23 
     | 
    
         
            +
                useEffect(() => {
         
     | 
| 
      
 24 
     | 
    
         
            +
                    if (!ref.current)
         
     | 
| 
      
 25 
     | 
    
         
            +
                        return;
         
     | 
| 
      
 26 
     | 
    
         
            +
                    if (disabled)
         
     | 
| 
      
 27 
     | 
    
         
            +
                        return;
         
     | 
| 
      
 28 
     | 
    
         
            +
                    const focusableElements = getFocusableElements(ref.current);
         
     | 
| 
      
 29 
     | 
    
         
            +
                    updateTabIndex({ focusableElements });
         
     | 
| 
      
 30 
     | 
    
         
            +
                }, [ref, updateTabIndex, disabled]);
         
     | 
| 
      
 31 
     | 
    
         
            +
                useHotkeys({
         
     | 
| 
      
 32 
     | 
    
         
            +
                    [backHotkeys.join(", ")]: () => {
         
     | 
| 
      
 33 
     | 
    
         
            +
                        if (!ref.current)
         
     | 
| 
      
 34 
     | 
    
         
            +
                            return;
         
     | 
| 
      
 35 
     | 
    
         
            +
                        const data = focusPreviousElement(ref.current, { circular });
         
     | 
| 
      
 36 
     | 
    
         
            +
                        updateTabIndex(data);
         
     | 
| 
      
 37 
     | 
    
         
            +
                    },
         
     | 
| 
      
 38 
     | 
    
         
            +
                    [forwardHotkeys.join(", ")]: () => {
         
     | 
| 
      
 39 
     | 
    
         
            +
                        if (!ref.current)
         
     | 
| 
      
 40 
     | 
    
         
            +
                            return;
         
     | 
| 
      
 41 
     | 
    
         
            +
                        const data = focusNextElement(ref.current, { circular });
         
     | 
| 
      
 42 
     | 
    
         
            +
                        updateTabIndex(data);
         
     | 
| 
      
 43 
     | 
    
         
            +
                    },
         
     | 
| 
      
 44 
     | 
    
         
            +
                    Home: () => {
         
     | 
| 
      
 45 
     | 
    
         
            +
                        if (!ref.current)
         
     | 
| 
      
 46 
     | 
    
         
            +
                            return;
         
     | 
| 
      
 47 
     | 
    
         
            +
                        const data = focusFirstElement(ref.current);
         
     | 
| 
      
 48 
     | 
    
         
            +
                        updateTabIndex(data);
         
     | 
| 
      
 49 
     | 
    
         
            +
                    },
         
     | 
| 
      
 50 
     | 
    
         
            +
                    End: () => {
         
     | 
| 
      
 51 
     | 
    
         
            +
                        if (!ref.current)
         
     | 
| 
      
 52 
     | 
    
         
            +
                            return;
         
     | 
| 
      
 53 
     | 
    
         
            +
                        const data = focusLastElement(ref.current);
         
     | 
| 
      
 54 
     | 
    
         
            +
                        updateTabIndex(data);
         
     | 
| 
      
 55 
     | 
    
         
            +
                    },
         
     | 
| 
      
 56 
     | 
    
         
            +
                }, [updateTabIndex, circular], {
         
     | 
| 
      
 57 
     | 
    
         
            +
                    ref,
         
     | 
| 
      
 58 
     | 
    
         
            +
                    preventDefault: true,
         
     | 
| 
      
 59 
     | 
    
         
            +
                    disabled,
         
     | 
| 
      
 60 
     | 
    
         
            +
                });
         
     | 
| 
      
 61 
     | 
    
         
            +
            };
         
     | 
| 
      
 62 
     | 
    
         
            +
            export default useKeyboardArrowNavigation;
         
     | 
| 
         @@ -1,18 +1,20 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            "use client";
         
     | 
| 
       2 
2 
     | 
    
         
             
            import React from "react";
         
     | 
| 
       3 
     | 
    
         
            -
            import { lockScroll 
     | 
| 
      
 3 
     | 
    
         
            +
            import { lockScroll } from "../utilities/scroll/index.js";
         
     | 
| 
       4 
4 
     | 
    
         
             
            const useScrollLock = (options) => {
         
     | 
| 
       5 
5 
     | 
    
         
             
                const { containerRef, originRef } = options || {};
         
     | 
| 
       6 
6 
     | 
    
         
             
                const [locked, setLocked] = React.useState(false);
         
     | 
| 
      
 7 
     | 
    
         
            +
                const unlockScrollRef = React.useRef(null);
         
     | 
| 
       7 
8 
     | 
    
         
             
                const handleLockScroll = React.useCallback(() => {
         
     | 
| 
       8 
     | 
    
         
            -
                    lockScroll({
         
     | 
| 
      
 9 
     | 
    
         
            +
                    unlockScrollRef.current = lockScroll({
         
     | 
| 
       9 
10 
     | 
    
         
             
                        containerEl: containerRef?.current,
         
     | 
| 
       10 
11 
     | 
    
         
             
                        originEl: originRef?.current,
         
     | 
| 
       11 
12 
     | 
    
         
             
                        cb: () => setLocked(true),
         
     | 
| 
       12 
13 
     | 
    
         
             
                    });
         
     | 
| 
       13 
14 
     | 
    
         
             
                }, [containerRef, originRef]);
         
     | 
| 
       14 
15 
     | 
    
         
             
                const handleUnlockScroll = React.useCallback(() => {
         
     | 
| 
       15 
     | 
    
         
            -
                     
     | 
| 
      
 16 
     | 
    
         
            +
                    unlockScrollRef.current?.(() => setLocked(false));
         
     | 
| 
      
 17 
     | 
    
         
            +
                    unlockScrollRef.current = null;
         
     | 
| 
       16 
18 
     | 
    
         
             
                }, []);
         
     | 
| 
       17 
19 
     | 
    
         
             
                return React.useMemo(() => ({
         
     | 
| 
       18 
20 
     | 
    
         
             
                    scrollLocked: locked,
         
     | 
    
        package/dist/index.d.ts
    CHANGED
    
    | 
         @@ -103,7 +103,7 @@ export type { ContainerProps } from "./components/Container"; 
     | 
|
| 
       103 
103 
     | 
    
         
             
            export { default as Dismissible } from "./components/Dismissible";
         
     | 
| 
       104 
104 
     | 
    
         
             
            export type { DismissibleProps } from "./components/Dismissible";
         
     | 
| 
       105 
105 
     | 
    
         
             
            export { default as Flyout } from "./components/Flyout";
         
     | 
| 
       106 
     | 
    
         
            -
            export type { FlyoutProps, FlyoutInstance } from "./components/Flyout";
         
     | 
| 
      
 106 
     | 
    
         
            +
            export type { FlyoutProps, FlyoutInstance, FlyoutTriggerAttributes } from "./components/Flyout";
         
     | 
| 
       107 
107 
     | 
    
         
             
            export { default as FormControl } from "./components/FormControl";
         
     | 
| 
       108 
108 
     | 
    
         
             
            export type { FormControlProps } from "./components/FormControl";
         
     | 
| 
       109 
109 
     | 
    
         
             
            export { default as Grid } from "./components/Grid";
         
     | 
| 
         @@ -135,6 +135,7 @@ export { default as useHandlerRef } from "./hooks/useHandlerRef"; 
     | 
|
| 
       135 
135 
     | 
    
         
             
            export { default as useHotkeys } from "./hooks/useHotkeys";
         
     | 
| 
       136 
136 
     | 
    
         
             
            export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
         
     | 
| 
       137 
137 
     | 
    
         
             
            export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
         
     | 
| 
      
 138 
     | 
    
         
            +
            export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation";
         
     | 
| 
       138 
139 
     | 
    
         
             
            export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
         
     | 
| 
       139 
140 
     | 
    
         
             
            export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
         
     | 
| 
       140 
141 
     | 
    
         
             
            export { default as useRTL } from "./hooks/useRTL";
         
     | 
    
        package/dist/index.js
    CHANGED
    
    | 
         @@ -74,6 +74,7 @@ export { default as useHandlerRef } from "./hooks/useHandlerRef.js"; 
     | 
|
| 
       74 
74 
     | 
    
         
             
            export { default as useHotkeys } from "./hooks/useHotkeys.js";
         
     | 
| 
       75 
75 
     | 
    
         
             
            export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
         
     | 
| 
       76 
76 
     | 
    
         
             
            export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
         
     | 
| 
      
 77 
     | 
    
         
            +
            export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation.js";
         
     | 
| 
       77 
78 
     | 
    
         
             
            export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
         
     | 
| 
       78 
79 
     | 
    
         
             
            export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
         
     | 
| 
       79 
80 
     | 
    
         
             
            export { default as useRTL } from "./hooks/useRTL.js";
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            [style*="--rs-align- 
     | 
| 
      
 1 
     | 
    
         
            +
            [style*="--rs-align-"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-"]{--rs-align:var(--rs-align-xl)}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            [style*="--rs-ratio- 
     | 
| 
      
 1 
     | 
    
         
            +
            [style*="--rs-ratio-"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-s:"]:empty,[style*="--rs-ratio-s:"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-s:"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-xl)}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            .root[style*="--rs-bleed- 
     | 
| 
      
 1 
     | 
    
         
            +
            .root[style*="--rs-bleed-"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            [style*="--rs-justify- 
     | 
| 
      
 1 
     | 
    
         
            +
            [style*="--rs-justify-"]{justify-content:var(--rs-justify)!important;--rs-justify-s: ;--rs-justify-m:var(--rs-justify-s);--rs-justify-l:var(--rs-justify-m);--rs-justify-xl:var(--rs-justify-l);--rs-justify:var(--rs-justify-s)}@media (--rs-viewport-m ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-m)}}@media (--rs-viewport-l ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-l)}}@media (--rs-viewport-xl ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-xl)}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            .root[style*="--rs-max-h- 
     | 
| 
      
 1 
     | 
    
         
            +
            .root[style*="--rs-max-h-"]{--rs-max-h-s:none;--rs-max-h-m:var(--rs-max-h-s);--rs-max-h-l:var(--rs-max-h-m);--rs-max-h-xl:var(--rs-max-h-l);--rs-max-h:var(--rs-max-h-s)}.--type-literal{max-height:var(--rs-max-h)!important}.--type-unit{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-m)}.--type-literal--m{max-height:var(--rs-max-h)!important}.--type-unit--m{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-l)}.--type-literal--l{max-height:var(--rs-max-h)!important}.--type-unit--l{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-xl)}.--type-literal--xl{max-height:var(--rs-max-h)!important}.--type-unit--xl{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            .root[style*="--rs-max-w- 
     | 
| 
      
 1 
     | 
    
         
            +
            .root[style*="--rs-max-w-"]{--rs-max-w-s:none;--rs-max-w-m:var(--rs-max-w-s);--rs-max-w-l:var(--rs-max-w-m);--rs-max-w-xl:var(--rs-max-w-l);--rs-max-w:var(--rs-max-w-s)}.--type-literal{max-width:var(--rs-max-w)!important}.--type-unit{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-m)}.--type-literal--m{max-width:var(--rs-max-w)!important}.--type-unit--m{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-l)}.--type-literal--l{max-width:var(--rs-max-w)!important}.--type-unit--l{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-xl)}.--type-literal--xl{max-width:var(--rs-max-w)!important}.--type-unit--xl{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            .root[style*="--rs-min-h- 
     | 
| 
      
 1 
     | 
    
         
            +
            .root[style*="--rs-min-h-"]{--rs-min-h-s:none;--rs-min-h-m:var(--rs-min-h-s);--rs-min-h-l:var(--rs-min-h-m);--rs-min-h-xl:var(--rs-min-h-l);--rs-min-h:var(--rs-min-h-s)}.--type-literal{min-height:var(--rs-min-h)!important}.--type-unit{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-m)}.--type-literal--m{min-height:var(--rs-min-h)!important}.--type-unit--m{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-l)}.--type-literal--l{min-height:var(--rs-min-h)!important}.--type-unit--l{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-xl)}.--type-literal--xl{min-height:var(--rs-min-h)!important}.--type-unit--xl{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            .root[style*="--rs-min-w- 
     | 
| 
      
 1 
     | 
    
         
            +
            .root[style*="--rs-min-w-"]{--rs-min-w-s:none;--rs-min-w-m:var(--rs-min-w-s);--rs-min-w-l:var(--rs-min-w-m);--rs-min-w-xl:var(--rs-min-w-l);--rs-min-w:var(--rs-min-w-s)}.--type-literal{min-width:var(--rs-min-w)!important}.--type-unit{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-m)}.--type-literal--m{min-width:var(--rs-min-w)!important}.--type-unit--m{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-l)}.--type-literal--l{min-width:var(--rs-min-w)!important}.--type-unit--l{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-xl)}.--type-literal--xl{min-width:var(--rs-min-w)!important}.--type-unit--xl{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            [style*="--rs-position- 
     | 
| 
      
 1 
     | 
    
         
            +
            [style*="--rs-position-"]{position:var(--rs-position)!important;--rs-position-s: ;--rs-position-m:var(--rs-position-s);--rs-position-l:var(--rs-position-m);--rs-position-xl:var(--rs-position-l);--rs-position:var(--rs-position-s)}@media (--rs-viewport-m ){[style*="--rs-position-"]{--rs-position:var(--rs-position-m)}}@media (--rs-viewport-l ){[style*="--rs-position-"]{--rs-position:var(--rs-position-l)}}@media (--rs-viewport-xl ){[style*="--rs-position-"]{--rs-position:var(--rs-position-xl)}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            [style*="--rs-text-align- 
     | 
| 
      
 1 
     | 
    
         
            +
            [style*="--rs-text-align-"]{text-align:var(--rs-text-align)!important;--rs-text-align-s: ;--rs-text-align-m:var(--rs-text-align-s);--rs-text-align-l:var(--rs-text-align-m);--rs-text-align-xl:var(--rs-text-align-l);--rs-text-align:var(--rs-text-align-s)}@media (--rs-viewport-m ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-m)}}@media (--rs-viewport-l ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-xl)}}
         
     | 
| 
         @@ -1 +1 @@ 
     | 
|
| 
       1 
     | 
    
         
            -
            .root[style*="--rs-w- 
     | 
| 
      
 1 
     | 
    
         
            +
            .root[style*="--rs-w-"]{--rs-w-s:auto;--rs-w-m:var(--rs-w-s);--rs-w-l:var(--rs-w-m);--rs-w-xl:var(--rs-w-l);--rs-w:var(--rs-w-s)}.--type-literal{width:var(--rs-w)!important}.--type-unit{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-m)}.--type-literal--m{width:var(--rs-w)!important}.--type-unit--m{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-l)}.--type-literal--l{width:var(--rs-w)!important}.--type-unit--l{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-xl)}.--type-literal--xl{width:var(--rs-w)!important}.--type-unit--xl{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}
         
     | 
| 
         @@ -14,8 +14,25 @@ export declare const getFocusData: (args: { 
     | 
|
| 
       14 
14 
     | 
    
         
             
            }) => {
         
     | 
| 
       15 
15 
     | 
    
         
             
                overflow: boolean;
         
     | 
| 
       16 
16 
     | 
    
         
             
                el: FocusableElement;
         
     | 
| 
      
 17 
     | 
    
         
            +
                focusableElements: FocusableElement[];
         
     | 
| 
      
 18 
     | 
    
         
            +
            };
         
     | 
| 
      
 19 
     | 
    
         
            +
            export declare const focusNextElement: (root: HTMLElement, options?: {
         
     | 
| 
      
 20 
     | 
    
         
            +
                circular?: boolean;
         
     | 
| 
      
 21 
     | 
    
         
            +
            }) => {
         
     | 
| 
      
 22 
     | 
    
         
            +
                el: FocusableElement;
         
     | 
| 
      
 23 
     | 
    
         
            +
                focusableElements: FocusableElement[];
         
     | 
| 
      
 24 
     | 
    
         
            +
            };
         
     | 
| 
      
 25 
     | 
    
         
            +
            export declare const focusPreviousElement: (root: HTMLElement, options?: {
         
     | 
| 
      
 26 
     | 
    
         
            +
                circular?: boolean;
         
     | 
| 
      
 27 
     | 
    
         
            +
            }) => {
         
     | 
| 
      
 28 
     | 
    
         
            +
                el: FocusableElement;
         
     | 
| 
      
 29 
     | 
    
         
            +
                focusableElements: FocusableElement[];
         
     | 
| 
      
 30 
     | 
    
         
            +
            };
         
     | 
| 
      
 31 
     | 
    
         
            +
            export declare const focusFirstElement: (root: HTMLElement) => {
         
     | 
| 
      
 32 
     | 
    
         
            +
                el: FocusableElement;
         
     | 
| 
      
 33 
     | 
    
         
            +
                focusableElements: FocusableElement[];
         
     | 
| 
      
 34 
     | 
    
         
            +
            };
         
     | 
| 
      
 35 
     | 
    
         
            +
            export declare const focusLastElement: (root: HTMLElement) => {
         
     | 
| 
      
 36 
     | 
    
         
            +
                el: FocusableElement;
         
     | 
| 
      
 37 
     | 
    
         
            +
                focusableElements: FocusableElement[];
         
     | 
| 
       17 
38 
     | 
    
         
             
            };
         
     | 
| 
       18 
     | 
    
         
            -
            export declare const focusNextElement: (root: HTMLElement) => void;
         
     | 
| 
       19 
     | 
    
         
            -
            export declare const focusPreviousElement: (root: HTMLElement) => void;
         
     | 
| 
       20 
     | 
    
         
            -
            export declare const focusFirstElement: (root: HTMLElement) => void;
         
     | 
| 
       21 
     | 
    
         
            -
            export declare const focusLastElement: (root: HTMLElement) => void;
         
     | 
| 
         @@ -88,13 +88,14 @@ export const getFocusData = (args) => { 
     | 
|
| 
       88 
88 
     | 
    
         
             
                        nextIndex = target === "prev" ? positions.first : positions.last;
         
     | 
| 
       89 
89 
     | 
    
         
             
                    }
         
     | 
| 
       90 
90 
     | 
    
         
             
                }
         
     | 
| 
       91 
     | 
    
         
            -
                return { overflow: isOverflow, el: focusable[nextIndex] };
         
     | 
| 
      
 91 
     | 
    
         
            +
                return { overflow: isOverflow, el: focusable[nextIndex], focusableElements: focusable };
         
     | 
| 
       92 
92 
     | 
    
         
             
            };
         
     | 
| 
       93 
93 
     | 
    
         
             
            const focusTargetElement = (root, target, options) => {
         
     | 
| 
       94 
94 
     | 
    
         
             
                const data = getFocusData({ root, target, options });
         
     | 
| 
       95 
95 
     | 
    
         
             
                focusElement(data.el);
         
     | 
| 
      
 96 
     | 
    
         
            +
                return { el: data.el, focusableElements: data.focusableElements };
         
     | 
| 
       96 
97 
     | 
    
         
             
            };
         
     | 
| 
       97 
     | 
    
         
            -
            export const focusNextElement = (root) => focusTargetElement(root, "next", { includeNegativeTabIndex: true });
         
     | 
| 
       98 
     | 
    
         
            -
            export const focusPreviousElement = (root) => focusTargetElement(root, "prev", { includeNegativeTabIndex: true });
         
     | 
| 
      
 98 
     | 
    
         
            +
            export const focusNextElement = (root, options) => focusTargetElement(root, "next", { ...options, includeNegativeTabIndex: true });
         
     | 
| 
      
 99 
     | 
    
         
            +
            export const focusPreviousElement = (root, options) => focusTargetElement(root, "prev", { ...options, includeNegativeTabIndex: true });
         
     | 
| 
       99 
100 
     | 
    
         
             
            export const focusFirstElement = (root) => focusTargetElement(root, "first", { includeNegativeTabIndex: true });
         
     | 
| 
       100 
101 
     | 
    
         
             
            export const focusLastElement = (root) => focusTargetElement(root, "last", { includeNegativeTabIndex: true });
         
     | 
| 
         @@ -4,8 +4,8 @@ export const preventDefault = (e) => e.preventDefault(); 
     | 
|
| 
       4 
4 
     | 
    
         
             
             * without locking the page with overflow
         
     | 
| 
       5 
5 
     | 
    
         
             
             */
         
     | 
| 
       6 
6 
     | 
    
         
             
            export const disableScroll = () => {
         
     | 
| 
       7 
     | 
    
         
            -
                window.addEventListener("wheel", preventDefault 
     | 
| 
       8 
     | 
    
         
            -
                window.addEventListener("touchmove", preventDefault 
     | 
| 
      
 7 
     | 
    
         
            +
                window.addEventListener("wheel", preventDefault);
         
     | 
| 
      
 8 
     | 
    
         
            +
                window.addEventListener("touchmove", preventDefault);
         
     | 
| 
       9 
9 
     | 
    
         
             
            };
         
     | 
| 
       10 
10 
     | 
    
         
             
            export const enableScroll = () => {
         
     | 
| 
       11 
11 
     | 
    
         
             
                window.removeEventListener("wheel", preventDefault);
         
     | 
| 
         @@ -1,2 +1,2 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            export { disableScroll, enableScroll } from "./disable";
         
     | 
| 
       2 
     | 
    
         
            -
            export { lockScroll 
     | 
| 
      
 2 
     | 
    
         
            +
            export { lockScroll } from "./lock";
         
     | 
| 
         @@ -1,2 +1,2 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            export { disableScroll, enableScroll } from "./disable.js";
         
     | 
| 
       2 
     | 
    
         
            -
            export { lockScroll 
     | 
| 
      
 2 
     | 
    
         
            +
            export { lockScroll } from "./lock.js";
         
     | 
| 
         @@ -3,31 +3,32 @@ import { findClosestScrollableContainer } from "../dom/index.js"; 
     | 
|
| 
       3 
3 
     | 
    
         
             
            import lockSafariScroll from "./lockSafari.js";
         
     | 
| 
       4 
4 
     | 
    
         
             
            import lockStandardScroll from "./lockStandard.js";
         
     | 
| 
       5 
5 
     | 
    
         
             
            let bodyLockedCount = 0;
         
     | 
| 
       6 
     | 
    
         
            -
            let reset = () => { };
         
     | 
| 
       7 
6 
     | 
    
         
             
            export const lockScroll = (args) => {
         
     | 
| 
       8 
     | 
    
         
            -
                const isIOSLock = isIOS() 
     | 
| 
      
 7 
     | 
    
         
            +
                const isIOSLock = isIOS();
         
     | 
| 
      
 8 
     | 
    
         
            +
                let reset = () => { };
         
     | 
| 
       9 
9 
     | 
    
         
             
                let container = document.body;
         
     | 
| 
       10 
     | 
    
         
            -
                if (args.originEl 
     | 
| 
      
 10 
     | 
    
         
            +
                if (args.originEl)
         
     | 
| 
       11 
11 
     | 
    
         
             
                    container = findClosestScrollableContainer({ el: args.originEl });
         
     | 
| 
       12 
     | 
    
         
            -
                 
     | 
| 
       13 
     | 
    
         
            -
                if (args.containerEl && !isIOSLock)
         
     | 
| 
      
 12 
     | 
    
         
            +
                if (args.containerEl)
         
     | 
| 
       14 
13 
     | 
    
         
             
                    container = args.containerEl;
         
     | 
| 
       15 
     | 
    
         
            -
                 
     | 
| 
      
 14 
     | 
    
         
            +
                const lockedBodyScroll = container === document.body;
         
     | 
| 
      
 15 
     | 
    
         
            +
                if (lockedBodyScroll)
         
     | 
| 
       16 
16 
     | 
    
         
             
                    bodyLockedCount += 1;
         
     | 
| 
       17 
     | 
    
         
            -
                 
     | 
| 
      
 17 
     | 
    
         
            +
                console.log("bodyLockedCount", { bodyLockedCount, lockedBodyScroll, isIOSLock });
         
     | 
| 
      
 18 
     | 
    
         
            +
                if (lockedBodyScroll && bodyLockedCount > 1)
         
     | 
| 
       18 
19 
     | 
    
         
             
                    return;
         
     | 
| 
       19 
     | 
    
         
            -
                if (isIOSLock) {
         
     | 
| 
      
 20 
     | 
    
         
            +
                if (isIOSLock && lockedBodyScroll) {
         
     | 
| 
       20 
21 
     | 
    
         
             
                    reset = lockSafariScroll();
         
     | 
| 
       21 
22 
     | 
    
         
             
                }
         
     | 
| 
       22 
23 
     | 
    
         
             
                else {
         
     | 
| 
       23 
24 
     | 
    
         
             
                    reset = lockStandardScroll({ container });
         
     | 
| 
       24 
25 
     | 
    
         
             
                }
         
     | 
| 
       25 
26 
     | 
    
         
             
                args.cb?.();
         
     | 
| 
       26 
     | 
    
         
            -
             
     | 
| 
       27 
     | 
    
         
            -
             
     | 
| 
       28 
     | 
    
         
            -
             
     | 
| 
       29 
     | 
    
         
            -
             
     | 
| 
       30 
     | 
    
         
            -
                     
     | 
| 
       31 
     | 
    
         
            -
             
     | 
| 
       32 
     | 
    
         
            -
                 
     | 
| 
      
 27 
     | 
    
         
            +
                return (cb) => {
         
     | 
| 
      
 28 
     | 
    
         
            +
                    if (lockedBodyScroll)
         
     | 
| 
      
 29 
     | 
    
         
            +
                        bodyLockedCount -= 1;
         
     | 
| 
      
 30 
     | 
    
         
            +
                    console.log("bodyLockedCount remove", bodyLockedCount, lockedBodyScroll);
         
     | 
| 
      
 31 
     | 
    
         
            +
                    reset();
         
     | 
| 
      
 32 
     | 
    
         
            +
                    cb?.();
         
     | 
| 
      
 33 
     | 
    
         
            +
                };
         
     | 
| 
       33 
34 
     | 
    
         
             
            };
         
     |