@salt-ds/lab 1.0.0-alpha.90 → 1.0.0-alpha.91
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/CHANGELOG.md +45 -0
- package/css/salt-lab.css +125 -366
- package/dist-cjs/index.js +20 -16
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/mega-menu/MegaMenu.js +82 -0
- package/dist-cjs/mega-menu/MegaMenu.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuContent.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuContent.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuContent.js +33 -0
- package/dist-cjs/mega-menu/MegaMenuContent.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuContext.js +11 -0
- package/dist-cjs/mega-menu/MegaMenuContext.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuGroup.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuGroup.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuGroup.js +58 -0
- package/dist-cjs/mega-menu/MegaMenuGroup.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuHeader.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuHeader.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuHeader.js +26 -0
- package/dist-cjs/mega-menu/MegaMenuHeader.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuItem.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuItem.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuItem.js +52 -0
- package/dist-cjs/mega-menu/MegaMenuItem.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuItemContent.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuItemContent.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuItemContent.js +23 -0
- package/dist-cjs/mega-menu/MegaMenuItemContent.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuPanel.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuPanel.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuPanel.js +108 -0
- package/dist-cjs/mega-menu/MegaMenuPanel.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuSection.css.js +6 -0
- package/dist-cjs/mega-menu/MegaMenuSection.css.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuSection.js +25 -0
- package/dist-cjs/mega-menu/MegaMenuSection.js.map +1 -0
- package/dist-cjs/mega-menu/MegaMenuTrigger.js +92 -0
- package/dist-cjs/mega-menu/MegaMenuTrigger.js.map +1 -0
- package/dist-cjs/mega-menu/useMegaMenu.js +15 -0
- package/dist-cjs/mega-menu/useMegaMenu.js.map +1 -0
- package/dist-cjs/mega-menu/useMegaMenuKeyboard.js +209 -0
- package/dist-cjs/mega-menu/useMegaMenuKeyboard.js.map +1 -0
- package/dist-cjs/side-panel/SidePanel.css.js +1 -1
- package/dist-cjs/side-panel/SidePanel.js +25 -30
- package/dist-cjs/side-panel/SidePanel.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelCloseButton.js +38 -0
- package/dist-cjs/side-panel/SidePanelCloseButton.js.map +1 -0
- package/dist-cjs/side-panel/SidePanelContent.css.js +1 -1
- package/dist-cjs/side-panel/SidePanelContent.js +3 -23
- package/dist-cjs/side-panel/SidePanelContent.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelHeader.css.js +1 -1
- package/dist-cjs/side-panel/SidePanelProvider.js +20 -2
- package/dist-cjs/side-panel/SidePanelProvider.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelTitle.css.js +1 -1
- package/dist-cjs/side-panel/SidePanelTitle.js +1 -0
- package/dist-cjs/side-panel/SidePanelTitle.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelTrigger.js +4 -4
- package/dist-cjs/side-panel/SidePanelTrigger.js.map +1 -1
- package/dist-cjs/side-panel/internal/SidePanelContext.js +3 -0
- package/dist-cjs/side-panel/internal/SidePanelContext.js.map +1 -1
- package/dist-cjs/side-panel/internal/useIsScrollable.js +50 -0
- package/dist-cjs/side-panel/internal/useIsScrollable.js.map +1 -0
- package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js +121 -0
- package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js.map +1 -0
- package/dist-cjs/side-panel/useSidePanel.js +3 -1
- package/dist-cjs/side-panel/useSidePanel.js.map +1 -1
- package/dist-cjs/tree/Tree.js +8 -5
- package/dist-cjs/tree/Tree.js.map +1 -1
- package/dist-cjs/tree/TreeContext.js.map +1 -1
- package/dist-cjs/tree/TreeNode.js +18 -14
- package/dist-cjs/tree/TreeNode.js.map +1 -1
- package/dist-cjs/tree/TreeNodeTrigger.js +4 -3
- package/dist-cjs/tree/TreeNodeTrigger.js.map +1 -1
- package/dist-cjs/tree/treeModel.js +61 -0
- package/dist-cjs/tree/treeModel.js.map +1 -0
- package/dist-cjs/tree/useTree.js +71 -65
- package/dist-cjs/tree/useTree.js.map +1 -1
- package/dist-es/index.js +10 -8
- package/dist-es/index.js.map +1 -1
- package/dist-es/mega-menu/MegaMenu.js +80 -0
- package/dist-es/mega-menu/MegaMenu.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuContent.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuContent.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuContent.js +31 -0
- package/dist-es/mega-menu/MegaMenuContent.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuContext.js +9 -0
- package/dist-es/mega-menu/MegaMenuContext.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuGroup.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuGroup.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuGroup.js +56 -0
- package/dist-es/mega-menu/MegaMenuGroup.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuHeader.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuHeader.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuHeader.js +24 -0
- package/dist-es/mega-menu/MegaMenuHeader.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuItem.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuItem.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuItem.js +50 -0
- package/dist-es/mega-menu/MegaMenuItem.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuItemContent.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuItemContent.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuItemContent.js +21 -0
- package/dist-es/mega-menu/MegaMenuItemContent.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuPanel.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuPanel.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuPanel.js +106 -0
- package/dist-es/mega-menu/MegaMenuPanel.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuSection.css.js +4 -0
- package/dist-es/mega-menu/MegaMenuSection.css.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuSection.js +23 -0
- package/dist-es/mega-menu/MegaMenuSection.js.map +1 -0
- package/dist-es/mega-menu/MegaMenuTrigger.js +90 -0
- package/dist-es/mega-menu/MegaMenuTrigger.js.map +1 -0
- package/dist-es/mega-menu/useMegaMenu.js +13 -0
- package/dist-es/mega-menu/useMegaMenu.js.map +1 -0
- package/dist-es/mega-menu/useMegaMenuKeyboard.js +205 -0
- package/dist-es/mega-menu/useMegaMenuKeyboard.js.map +1 -0
- package/dist-es/side-panel/SidePanel.css.js +1 -1
- package/dist-es/side-panel/SidePanel.js +28 -33
- package/dist-es/side-panel/SidePanel.js.map +1 -1
- package/dist-es/side-panel/SidePanelCloseButton.js +36 -0
- package/dist-es/side-panel/SidePanelCloseButton.js.map +1 -0
- package/dist-es/side-panel/SidePanelContent.css.js +1 -1
- package/dist-es/side-panel/SidePanelContent.js +4 -24
- package/dist-es/side-panel/SidePanelContent.js.map +1 -1
- package/dist-es/side-panel/SidePanelHeader.css.js +1 -1
- package/dist-es/side-panel/SidePanelProvider.js +20 -2
- package/dist-es/side-panel/SidePanelProvider.js.map +1 -1
- package/dist-es/side-panel/SidePanelTitle.css.js +1 -1
- package/dist-es/side-panel/SidePanelTitle.js +1 -0
- package/dist-es/side-panel/SidePanelTitle.js.map +1 -1
- package/dist-es/side-panel/SidePanelTrigger.js +5 -5
- package/dist-es/side-panel/SidePanelTrigger.js.map +1 -1
- package/dist-es/side-panel/internal/SidePanelContext.js +3 -0
- package/dist-es/side-panel/internal/SidePanelContext.js.map +1 -1
- package/dist-es/side-panel/internal/useIsScrollable.js +48 -0
- package/dist-es/side-panel/internal/useIsScrollable.js.map +1 -0
- package/dist-es/side-panel/internal/useSidePanelTabOrder.js +119 -0
- package/dist-es/side-panel/internal/useSidePanelTabOrder.js.map +1 -0
- package/dist-es/side-panel/useSidePanel.js +3 -1
- package/dist-es/side-panel/useSidePanel.js.map +1 -1
- package/dist-es/tree/Tree.js +8 -5
- package/dist-es/tree/Tree.js.map +1 -1
- package/dist-es/tree/TreeContext.js.map +1 -1
- package/dist-es/tree/TreeNode.js +20 -16
- package/dist-es/tree/TreeNode.js.map +1 -1
- package/dist-es/tree/TreeNodeTrigger.js +4 -3
- package/dist-es/tree/TreeNodeTrigger.js.map +1 -1
- package/dist-es/tree/treeModel.js +57 -0
- package/dist-es/tree/treeModel.js.map +1 -0
- package/dist-es/tree/useTree.js +49 -43
- package/dist-es/tree/useTree.js.map +1 -1
- package/dist-types/index.d.ts +1 -2
- package/dist-types/mega-menu/MegaMenu.d.ts +27 -0
- package/dist-types/mega-menu/MegaMenuContent.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuContext.d.ts +29 -0
- package/dist-types/mega-menu/MegaMenuGroup.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuHeader.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuItem.d.ts +12 -0
- package/dist-types/mega-menu/MegaMenuItemContent.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuPanel.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuSection.d.ts +8 -0
- package/dist-types/mega-menu/MegaMenuTrigger.d.ts +8 -0
- package/dist-types/mega-menu/index.d.ts +9 -0
- package/dist-types/mega-menu/useMegaMenu.d.ts +6 -0
- package/dist-types/mega-menu/useMegaMenuKeyboard.d.ts +30 -0
- package/dist-types/side-panel/SidePanelCloseButton.d.ts +2 -0
- package/dist-types/side-panel/SidePanelTrigger.d.ts +1 -2
- package/dist-types/side-panel/index.d.ts +1 -0
- package/dist-types/side-panel/internal/SidePanelContext.d.ts +8 -0
- package/dist-types/side-panel/internal/index.d.ts +2 -0
- package/dist-types/side-panel/internal/useIsScrollable.d.ts +2 -0
- package/dist-types/side-panel/internal/useSidePanelTabOrder.d.ts +7 -0
- package/dist-types/side-panel/useSidePanel.d.ts +11 -4
- package/dist-types/tree/TreeContext.d.ts +7 -1
- package/dist-types/tree/treeModel.d.ts +24 -0
- package/dist-types/tree/useTree.d.ts +3 -14
- package/package.json +2 -4
- package/dist-cjs/rating/Rating.css.js +0 -6
- package/dist-cjs/rating/Rating.css.js.map +0 -1
- package/dist-cjs/rating/Rating.js +0 -132
- package/dist-cjs/rating/Rating.js.map +0 -1
- package/dist-cjs/rating/RatingItem.css.js +0 -6
- package/dist-cjs/rating/RatingItem.css.js.map +0 -1
- package/dist-cjs/rating/RatingItem.js +0 -70
- package/dist-cjs/rating/RatingItem.js.map +0 -1
- package/dist-cjs/tabs-next/TabBar.css.js +0 -6
- package/dist-cjs/tabs-next/TabBar.css.js.map +0 -1
- package/dist-cjs/tabs-next/TabBar.js +0 -41
- package/dist-cjs/tabs-next/TabBar.js.map +0 -1
- package/dist-cjs/tabs-next/TabListLayoutContext.js +0 -13
- package/dist-cjs/tabs-next/TabListLayoutContext.js.map +0 -1
- package/dist-cjs/tabs-next/TabListNext.css.js +0 -6
- package/dist-cjs/tabs-next/TabListNext.css.js.map +0 -1
- package/dist-cjs/tabs-next/TabListNext.js +0 -271
- package/dist-cjs/tabs-next/TabListNext.js.map +0 -1
- package/dist-cjs/tabs-next/TabNext.css.js +0 -6
- package/dist-cjs/tabs-next/TabNext.css.js.map +0 -1
- package/dist-cjs/tabs-next/TabNext.js +0 -213
- package/dist-cjs/tabs-next/TabNext.js.map +0 -1
- package/dist-cjs/tabs-next/TabNextAction.js +0 -58
- package/dist-cjs/tabs-next/TabNextAction.js.map +0 -1
- package/dist-cjs/tabs-next/TabNextContext.js +0 -23
- package/dist-cjs/tabs-next/TabNextContext.js.map +0 -1
- package/dist-cjs/tabs-next/TabNextPanel.css.js +0 -6
- package/dist-cjs/tabs-next/TabNextPanel.css.js.map +0 -1
- package/dist-cjs/tabs-next/TabNextPanel.js +0 -92
- package/dist-cjs/tabs-next/TabNextPanel.js.map +0 -1
- package/dist-cjs/tabs-next/TabNextTrigger.css.js +0 -6
- package/dist-cjs/tabs-next/TabNextTrigger.css.js.map +0 -1
- package/dist-cjs/tabs-next/TabNextTrigger.js +0 -180
- package/dist-cjs/tabs-next/TabNextTrigger.js.map +0 -1
- package/dist-cjs/tabs-next/TabOverflowList.css.js +0 -6
- package/dist-cjs/tabs-next/TabOverflowList.css.js.map +0 -1
- package/dist-cjs/tabs-next/TabOverflowList.js +0 -237
- package/dist-cjs/tabs-next/TabOverflowList.js.map +0 -1
- package/dist-cjs/tabs-next/TabSlot.js +0 -30
- package/dist-cjs/tabs-next/TabSlot.js.map +0 -1
- package/dist-cjs/tabs-next/TabSlotRegistryContext.js +0 -16
- package/dist-cjs/tabs-next/TabSlotRegistryContext.js.map +0 -1
- package/dist-cjs/tabs-next/TabsNext.css.js +0 -6
- package/dist-cjs/tabs-next/TabsNext.css.js.map +0 -1
- package/dist-cjs/tabs-next/TabsNext.js +0 -195
- package/dist-cjs/tabs-next/TabsNext.js.map +0 -1
- package/dist-cjs/tabs-next/TabsNextContext.js +0 -47
- package/dist-cjs/tabs-next/TabsNextContext.js.map +0 -1
- package/dist-cjs/tabs-next/domUtils.js +0 -13
- package/dist-cjs/tabs-next/domUtils.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/overflowMath.js +0 -86
- package/dist-cjs/tabs-next/hooks/overflowMath.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useCollection.js +0 -197
- package/dist-cjs/tabs-next/hooks/useCollection.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useFocusWithRetry.js +0 -64
- package/dist-cjs/tabs-next/hooks/useFocusWithRetry.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useOverflow.js +0 -266
- package/dist-cjs/tabs-next/hooks/useOverflow.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useOverflowLayoutState.js +0 -99
- package/dist-cjs/tabs-next/hooks/useOverflowLayoutState.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js +0 -60
- package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js +0 -92
- package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js +0 -200
- package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useTabListRecovery.js +0 -76
- package/dist-cjs/tabs-next/hooks/useTabListRecovery.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useTabRemovalHandler.js +0 -165
- package/dist-cjs/tabs-next/hooks/useTabRemovalHandler.js.map +0 -1
- package/dist-cjs/tabs-next/hooks/useTabSelectionFocus.js +0 -80
- package/dist-cjs/tabs-next/hooks/useTabSelectionFocus.js.map +0 -1
- package/dist-cjs/tabs-next/widthMeasurement.js +0 -42
- package/dist-cjs/tabs-next/widthMeasurement.js.map +0 -1
- package/dist-es/rating/Rating.css.js +0 -4
- package/dist-es/rating/Rating.css.js.map +0 -1
- package/dist-es/rating/Rating.js +0 -130
- package/dist-es/rating/Rating.js.map +0 -1
- package/dist-es/rating/RatingItem.css.js +0 -4
- package/dist-es/rating/RatingItem.css.js.map +0 -1
- package/dist-es/rating/RatingItem.js +0 -68
- package/dist-es/rating/RatingItem.js.map +0 -1
- package/dist-es/tabs-next/TabBar.css.js +0 -4
- package/dist-es/tabs-next/TabBar.css.js.map +0 -1
- package/dist-es/tabs-next/TabBar.js +0 -39
- package/dist-es/tabs-next/TabBar.js.map +0 -1
- package/dist-es/tabs-next/TabListLayoutContext.js +0 -10
- package/dist-es/tabs-next/TabListLayoutContext.js.map +0 -1
- package/dist-es/tabs-next/TabListNext.css.js +0 -4
- package/dist-es/tabs-next/TabListNext.css.js.map +0 -1
- package/dist-es/tabs-next/TabListNext.js +0 -269
- package/dist-es/tabs-next/TabListNext.js.map +0 -1
- package/dist-es/tabs-next/TabNext.css.js +0 -4
- package/dist-es/tabs-next/TabNext.css.js.map +0 -1
- package/dist-es/tabs-next/TabNext.js +0 -211
- package/dist-es/tabs-next/TabNext.js.map +0 -1
- package/dist-es/tabs-next/TabNextAction.js +0 -56
- package/dist-es/tabs-next/TabNextAction.js.map +0 -1
- package/dist-es/tabs-next/TabNextContext.js +0 -20
- package/dist-es/tabs-next/TabNextContext.js.map +0 -1
- package/dist-es/tabs-next/TabNextPanel.css.js +0 -4
- package/dist-es/tabs-next/TabNextPanel.css.js.map +0 -1
- package/dist-es/tabs-next/TabNextPanel.js +0 -90
- package/dist-es/tabs-next/TabNextPanel.js.map +0 -1
- package/dist-es/tabs-next/TabNextTrigger.css.js +0 -4
- package/dist-es/tabs-next/TabNextTrigger.css.js.map +0 -1
- package/dist-es/tabs-next/TabNextTrigger.js +0 -178
- package/dist-es/tabs-next/TabNextTrigger.js.map +0 -1
- package/dist-es/tabs-next/TabOverflowList.css.js +0 -4
- package/dist-es/tabs-next/TabOverflowList.css.js.map +0 -1
- package/dist-es/tabs-next/TabOverflowList.js +0 -235
- package/dist-es/tabs-next/TabOverflowList.js.map +0 -1
- package/dist-es/tabs-next/TabSlot.js +0 -28
- package/dist-es/tabs-next/TabSlot.js.map +0 -1
- package/dist-es/tabs-next/TabSlotRegistryContext.js +0 -13
- package/dist-es/tabs-next/TabSlotRegistryContext.js.map +0 -1
- package/dist-es/tabs-next/TabsNext.css.js +0 -4
- package/dist-es/tabs-next/TabsNext.css.js.map +0 -1
- package/dist-es/tabs-next/TabsNext.js +0 -193
- package/dist-es/tabs-next/TabsNext.js.map +0 -1
- package/dist-es/tabs-next/TabsNextContext.js +0 -44
- package/dist-es/tabs-next/TabsNextContext.js.map +0 -1
- package/dist-es/tabs-next/domUtils.js +0 -11
- package/dist-es/tabs-next/domUtils.js.map +0 -1
- package/dist-es/tabs-next/hooks/overflowMath.js +0 -82
- package/dist-es/tabs-next/hooks/overflowMath.js.map +0 -1
- package/dist-es/tabs-next/hooks/useCollection.js +0 -195
- package/dist-es/tabs-next/hooks/useCollection.js.map +0 -1
- package/dist-es/tabs-next/hooks/useFocusWithRetry.js +0 -62
- package/dist-es/tabs-next/hooks/useFocusWithRetry.js.map +0 -1
- package/dist-es/tabs-next/hooks/useOverflow.js +0 -264
- package/dist-es/tabs-next/hooks/useOverflow.js.map +0 -1
- package/dist-es/tabs-next/hooks/useOverflowLayoutState.js +0 -97
- package/dist-es/tabs-next/hooks/useOverflowLayoutState.js.map +0 -1
- package/dist-es/tabs-next/hooks/useOverflowSelectionState.js +0 -58
- package/dist-es/tabs-next/hooks/useOverflowSelectionState.js.map +0 -1
- package/dist-es/tabs-next/hooks/useRenderedTabWidth.js +0 -90
- package/dist-es/tabs-next/hooks/useRenderedTabWidth.js.map +0 -1
- package/dist-es/tabs-next/hooks/useRenderedTabsRegistry.js +0 -198
- package/dist-es/tabs-next/hooks/useRenderedTabsRegistry.js.map +0 -1
- package/dist-es/tabs-next/hooks/useTabListRecovery.js +0 -74
- package/dist-es/tabs-next/hooks/useTabListRecovery.js.map +0 -1
- package/dist-es/tabs-next/hooks/useTabRemovalHandler.js +0 -163
- package/dist-es/tabs-next/hooks/useTabRemovalHandler.js.map +0 -1
- package/dist-es/tabs-next/hooks/useTabSelectionFocus.js +0 -78
- package/dist-es/tabs-next/hooks/useTabSelectionFocus.js.map +0 -1
- package/dist-es/tabs-next/widthMeasurement.js +0 -36
- package/dist-es/tabs-next/widthMeasurement.js.map +0 -1
- package/dist-types/rating/Rating.d.ts +0 -48
- package/dist-types/rating/RatingItem.d.ts +0 -47
- package/dist-types/rating/index.d.ts +0 -1
- package/dist-types/tabs-next/TabBar.d.ts +0 -12
- package/dist-types/tabs-next/TabListLayoutContext.d.ts +0 -9
- package/dist-types/tabs-next/TabListNext.d.ts +0 -12
- package/dist-types/tabs-next/TabNext.d.ts +0 -12
- package/dist-types/tabs-next/TabNextAction.d.ts +0 -4
- package/dist-types/tabs-next/TabNextContext.d.ts +0 -12
- package/dist-types/tabs-next/TabNextPanel.d.ts +0 -9
- package/dist-types/tabs-next/TabNextTrigger.d.ts +0 -4
- package/dist-types/tabs-next/TabOverflowList.d.ts +0 -10
- package/dist-types/tabs-next/TabSlot.d.ts +0 -6
- package/dist-types/tabs-next/TabSlotRegistryContext.d.ts +0 -5
- package/dist-types/tabs-next/TabsNext.d.ts +0 -18
- package/dist-types/tabs-next/TabsNextContext.d.ts +0 -43
- package/dist-types/tabs-next/domUtils.d.ts +0 -1
- package/dist-types/tabs-next/hooks/overflowMath.d.ts +0 -18
- package/dist-types/tabs-next/hooks/useCollection.d.ts +0 -30
- package/dist-types/tabs-next/hooks/useFocusWithRetry.d.ts +0 -9
- package/dist-types/tabs-next/hooks/useOverflow.d.ts +0 -11
- package/dist-types/tabs-next/hooks/useOverflowLayoutState.d.ts +0 -13
- package/dist-types/tabs-next/hooks/useOverflowSelectionState.d.ts +0 -13
- package/dist-types/tabs-next/hooks/useRenderedTabWidth.d.ts +0 -12
- package/dist-types/tabs-next/hooks/useRenderedTabsRegistry.d.ts +0 -12
- package/dist-types/tabs-next/hooks/useTabListRecovery.d.ts +0 -12
- package/dist-types/tabs-next/hooks/useTabRemovalHandler.d.ts +0 -32
- package/dist-types/tabs-next/hooks/useTabSelectionFocus.d.ts +0 -15
- package/dist-types/tabs-next/index.d.ts +0 -7
- package/dist-types/tabs-next/widthMeasurement.d.ts +0 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelProvider.js","sources":["../src/side-panel/SidePanelProvider.tsx"],"sourcesContent":["import { useFloatingRootContext } from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { SidePanelContext } from \"./internal\";\n\nexport interface SidePanelProviderProps {\n /**\n * Whether the panel is open.\n */\n open?: boolean;\n /**\n * Default open state when initially rendered.\n */\n defaultOpen?: boolean;\n /**\n * Callback when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * SidePanelProvider children, should include SidePanel and SidePanelTrigger.\n */\n children: ReactNode;\n}\n\nexport function SidePanelProvider(props: SidePanelProviderProps) {\n const { children, open: openProp, defaultOpen, onOpenChange } = props;\n\n const [openState, setOpenState] = useControlled({\n default: Boolean(defaultOpen),\n controlled: openProp,\n name: \"SidePanelProvider\",\n state: \"open\",\n });\n\n const handleOpenChange = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const [reference, setReference] = useState<HTMLElement | null>(null);\n const [floating, setFloating] = useState<HTMLDivElement | null>(null);\n const [panelId, setPanelId] = useState<string | undefined>(undefined);\n const [titleId, setTitleId] = useState<string | undefined>(undefined);\n\n const floatingRootContext = useFloatingRootContext({\n open: openState,\n onOpenChange: handleOpenChange,\n elements: {\n reference,\n floating,\n },\n });\n\n useEffect(() => {\n if (!openState || !floating) {\n return;\n }\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Escape\") {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n handleOpenChange(false);\n };\n\n floating.addEventListener(\"keydown\", onKeyDown);\n return () => {\n floating.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [floating, openState, handleOpenChange]);\n\n const context = useMemo(\n () => ({\n openState,\n floatingRootContext,\n setFloating,\n setReference,\n setOpen: handleOpenChange,\n panelId,\n setPanelId,\n titleId,\n setTitleId,\n }),\n [openState
|
|
1
|
+
{"version":3,"file":"SidePanelProvider.js","sources":["../src/side-panel/SidePanelProvider.tsx"],"sourcesContent":["import { useFloatingRootContext } from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { SidePanelContext, useSidePanelTabOrder } from \"./internal\";\n\nexport interface SidePanelProviderProps {\n /**\n * Whether the panel is open.\n */\n open?: boolean;\n /**\n * Default open state when initially rendered.\n */\n defaultOpen?: boolean;\n /**\n * Callback when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * SidePanelProvider children, should include SidePanel and SidePanelTrigger.\n */\n children: ReactNode;\n}\n\nexport function SidePanelProvider(props: SidePanelProviderProps) {\n const { children, open: openProp, defaultOpen, onOpenChange } = props;\n\n const [openState, setOpenState] = useControlled({\n default: Boolean(defaultOpen),\n controlled: openProp,\n name: \"SidePanelProvider\",\n state: \"open\",\n });\n\n const handleOpenChange = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const [reference, setReference] = useState<HTMLElement | null>(null);\n const [floating, setFloating] = useState<HTMLDivElement | null>(null);\n const [panelId, setPanelId] = useState<string | undefined>(undefined);\n const [titleId, setTitleId] = useState<string | undefined>(undefined);\n const [position, setPosition] = useState<\"right\" | \"left\" | undefined>(\n undefined,\n );\n\n const floatingRootContext = useFloatingRootContext({\n open: openState,\n onOpenChange: handleOpenChange,\n elements: {\n reference,\n floating,\n },\n });\n\n useEffect(() => {\n if (!openState || !floating) {\n return;\n }\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== \"Escape\") {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n handleOpenChange(false);\n };\n\n floating.addEventListener(\"keydown\", onKeyDown);\n return () => {\n floating.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [floating, openState, handleOpenChange]);\n\n useSidePanelTabOrder({\n floating,\n open: openState,\n reference,\n });\n\n const context = useMemo(\n () => ({\n openState,\n floatingRootContext,\n setFloating,\n setReference,\n setOpen: handleOpenChange,\n panelId,\n setPanelId,\n titleId,\n setTitleId,\n position,\n setPosition,\n }),\n [\n openState,\n floatingRootContext,\n handleOpenChange,\n panelId,\n titleId,\n position,\n ],\n );\n\n return (\n <SidePanelContext.Provider value={context}>\n {children}\n </SidePanelContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;;;;AA8BO,SAAS,kBAAkB,KAAA,EAA+B;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,IAAA,EAAM,QAAA,EAAU,WAAA,EAAa,cAAa,GAAI,KAAA;AAEhE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAA,CAAc;AAAA,IAC9C,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,IAC5B,UAAA,EAAY,QAAA;AAAA,IACZ,IAAA,EAAM,mBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmB,WAAA;AAAA,IACvB,CAAC,OAAA,KAAqB;AACpB,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAgC,IAAI,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA6B,MAAS,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAA6B,MAAS,CAAA;AACpE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,gBAAA;AAAA,IACd,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA;AAAA;AACF,GACD,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,QAAA,EAAU;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA;AAAA,MACF;AAEA,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,SAAA,EAAW,gBAAgB,CAAC,CAAA;AAE1C,EAAA,oBAAA,CAAqB;AAAA,IACnB,QAAA;AAAA,IACA,IAAA,EAAM,SAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,OAAA,GAAU,OAAA;AAAA,IACd,OAAO;AAAA,MACL,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA,EAAS,gBAAA;AAAA,MACT,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,2BACG,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,SAC/B,QAAA,EACH,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltSidePanelTitle {\n flex: 1;\n min-width: 0;\n}\n";
|
|
1
|
+
var css_248z = ".saltSidePanelTitle {\n flex: 1;\n min-width: 0;\n min-height: var(--salt-size-base);\n display: flex;\n align-items: center;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=SidePanelTitle.css.js.map
|
|
@@ -5,6 +5,7 @@ import { useWindow } from '@salt-ds/window';
|
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
7
|
import { useSidePanelContext } from './internal/SidePanelContext.js';
|
|
8
|
+
import 'tabbable';
|
|
8
9
|
import css_248z from './SidePanelTitle.css.js';
|
|
9
10
|
|
|
10
11
|
const withBaseName = makePrefixer("saltSidePanelTitle");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelTitle.js","sources":["../src/side-panel/SidePanelTitle.tsx"],"sourcesContent":["import {\n makePrefixer,\n Text,\n type TextProps,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelTitleCss from \"./SidePanelTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelTitle\");\n\nexport interface SidePanelTitleProps extends TextProps<\"div\"> {}\n\nexport const SidePanelTitle = forwardRef<HTMLDivElement, SidePanelTitleProps>(\n function SidePanelTitle(props, ref) {\n const { children, className, id, styleAs = \"h2\", ...rest } = props;\n\n const { setTitleId } = useSidePanelContext();\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-side-panel-title\",\n css: sidePanelTitleCss,\n window: targetWindow,\n });\n\n const titleId = useId(id);\n\n useIsomorphicLayoutEffect(() => {\n if (titleId) {\n setTitleId(titleId);\n }\n\n return () => {\n setTitleId(undefined);\n };\n }, [titleId, setTitleId]);\n\n return (\n <Text\n ref={ref}\n id={titleId}\n styleAs={styleAs}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n {children}\n </Text>\n );\n },\n);\n"],"names":["SidePanelTitle","sidePanelTitleCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SidePanelTitle.js","sources":["../src/side-panel/SidePanelTitle.tsx"],"sourcesContent":["import {\n makePrefixer,\n Text,\n type TextProps,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelTitleCss from \"./SidePanelTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelTitle\");\n\nexport interface SidePanelTitleProps extends TextProps<\"div\"> {}\n\nexport const SidePanelTitle = forwardRef<HTMLDivElement, SidePanelTitleProps>(\n function SidePanelTitle(props, ref) {\n const { children, className, id, styleAs = \"h2\", ...rest } = props;\n\n const { setTitleId } = useSidePanelContext();\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-side-panel-title\",\n css: sidePanelTitleCss,\n window: targetWindow,\n });\n\n const titleId = useId(id);\n\n useIsomorphicLayoutEffect(() => {\n if (titleId) {\n setTitleId(titleId);\n }\n\n return () => {\n setTitleId(undefined);\n };\n }, [titleId, setTitleId]);\n\n return (\n <Text\n ref={ref}\n id={titleId}\n styleAs={styleAs}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n {children}\n </Text>\n );\n },\n);\n"],"names":["SidePanelTitle","sidePanelTitleCss"],"mappings":";;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,KAAA;AAE7D,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,mBAAA,EAAoB;AAC3C,IAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAU,MAAM,EAAE,CAAA;AAExB,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,UAAA,CAAW,OAAO,CAAA;AAAA,MACpB;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,MAAS,CAAA;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { useForkRef, mergeProps } from '@salt-ds/core';
|
|
2
|
+
import { useForkRef, getRefFromChildren, mergeProps } from '@salt-ds/core';
|
|
3
3
|
import { forwardRef, isValidElement, cloneElement } from 'react';
|
|
4
4
|
import { useSidePanelContext } from './internal/SidePanelContext.js';
|
|
5
|
+
import 'tabbable';
|
|
5
6
|
|
|
6
7
|
const SidePanelTrigger = forwardRef(function SidePanelTrigger2(props, ref) {
|
|
7
8
|
const { children, onClick, ...rest } = props;
|
|
8
9
|
const { setReference, openState, setOpen, panelId } = useSidePanelContext();
|
|
9
|
-
const childRef = children == null ? void 0 : children.ref;
|
|
10
10
|
const combinedRef = useForkRef(setReference, ref);
|
|
11
|
-
const handleRef = useForkRef(combinedRef,
|
|
11
|
+
const handleRef = useForkRef(combinedRef, getRefFromChildren(children));
|
|
12
12
|
const handleClick = (event) => {
|
|
13
13
|
onClick == null ? void 0 : onClick(event);
|
|
14
14
|
setOpen(!openState);
|
|
@@ -20,8 +20,8 @@ const SidePanelTrigger = forwardRef(function SidePanelTrigger2(props, ref) {
|
|
|
20
20
|
{
|
|
21
21
|
"aria-expanded": openState,
|
|
22
22
|
"aria-controls": openState ? panelId : void 0,
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
onClick: handleClick,
|
|
24
|
+
...rest
|
|
25
25
|
},
|
|
26
26
|
children.props
|
|
27
27
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelTrigger.js","sources":["../src/side-panel/SidePanelTrigger.tsx"],"sourcesContent":["import { mergeProps, useForkRef } from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n cloneElement,\n forwardRef,\n isValidElement,\n type MouseEvent,\n
|
|
1
|
+
{"version":3,"file":"SidePanelTrigger.js","sources":["../src/side-panel/SidePanelTrigger.tsx"],"sourcesContent":["import { getRefFromChildren, mergeProps, useForkRef } from \"@salt-ds/core\";\nimport {\n type ComponentPropsWithoutRef,\n cloneElement,\n forwardRef,\n isValidElement,\n type MouseEvent,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerProps\n extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const SidePanelTrigger = forwardRef<\n HTMLButtonElement,\n SidePanelTriggerProps\n>(function SidePanelTrigger(props, ref) {\n const { children, onClick, ...rest } = props;\n const { setReference, openState, setOpen, panelId } = useSidePanelContext();\n\n const combinedRef = useForkRef(setReference, ref);\n const handleRef = useForkRef(combinedRef, getRefFromChildren(children));\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event);\n setOpen(!openState);\n };\n\n if (!children || !isValidElement(children)) {\n return <>{children}</>;\n }\n\n const mergedProps = mergeProps(\n {\n \"aria-expanded\": openState,\n \"aria-controls\": openState ? panelId : undefined,\n onClick: handleClick,\n ...rest,\n },\n children.props,\n );\n\n return cloneElement(children, {\n ...mergedProps,\n ref: handleRef,\n });\n});\n"],"names":["SidePanelTrigger"],"mappings":";;;;;;AAaO,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AACvC,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAW,OAAA,EAAS,OAAA,KAAY,mBAAA,EAAoB;AAE1E,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,YAAA,EAAc,GAAG,CAAA;AAChD,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,WAAA,EAAa,kBAAA,CAAmB,QAAQ,CAAC,CAAA;AAEtE,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAA,EAAG;AAC1C,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,WAAA,GAAc,UAAA;AAAA,IAClB;AAAA,MACE,eAAA,EAAiB,SAAA;AAAA,MACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,MACvC,OAAA,EAAS,WAAA;AAAA,MACT,GAAG;AAAA,KACL;AAAA,IACA,QAAA,CAAS;AAAA,GACX;AAEA,EAAA,OAAO,aAAa,QAAA,EAAU;AAAA,IAC5B,GAAG,WAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContext.js","sources":["../src/side-panel/internal/SidePanelContext.ts"],"sourcesContent":["import type { FloatingRootContext } from \"@floating-ui/react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { type Dispatch, type SetStateAction, useContext } from \"react\";\n\nexport interface SidePanelContextValue {\n /**\n * Whether the side panel is currently open.\n */\n openState: boolean;\n /**\n * The floating-ui root context shared between the trigger and the panel.\n * Coordinates interactions (click, dismiss, role) across both elements.\n */\n floatingRootContext: FloatingRootContext;\n /**\n * Ref setter for the panel element.\n * Registers the panel DOM node with floating-ui.\n */\n setFloating: Dispatch<SetStateAction<HTMLDivElement | null>>;\n /**\n * Ref setter for the reference (trigger) element.\n * Registers the trigger DOM node with floating-ui for focus return.\n */\n setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n /**\n * Sets the open state of the panel.\n * Called by the close button in SidePanelHeader, or any consumer that needs to close the panel.\n */\n setOpen: (open: boolean) => void;\n /**\n * Side panel id used for aria-controls on the trigger.\n */\n panelId?: string;\n /**\n * Registers or clears the side panel id used for aria-controls/id linkage.\n */\n setPanelId: Dispatch<SetStateAction<string | undefined>>;\n /**\n * The auto-generated id placed on SidePanelTitle.\n * Used for aria-labelledby on the panel region and the scrollable body.\n */\n titleId?: string;\n /**\n * Registers the title id from SidePanelTitle back to the context\n * so that SidePanel and SidePanelContent can use it for aria-labelledby.\n */\n setTitleId: Dispatch<SetStateAction<string | undefined>>;\n}\n\nexport const SidePanelContext = createContext<SidePanelContextValue>(\n \"SidePanelContext\",\n {\n openState: false,\n floatingRootContext: {} as FloatingRootContext,\n setFloating: () => {},\n setReference: () => {},\n setOpen: () => {},\n panelId: undefined,\n setPanelId: () => {},\n titleId: undefined,\n setTitleId: () => {},\n },\n);\n\nexport function useSidePanelContext() {\n return useContext(SidePanelContext);\n}\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"SidePanelContext.js","sources":["../src/side-panel/internal/SidePanelContext.ts"],"sourcesContent":["import type { FloatingRootContext } from \"@floating-ui/react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { type Dispatch, type SetStateAction, useContext } from \"react\";\n\nexport interface SidePanelContextValue {\n /**\n * Whether the side panel is currently open.\n */\n openState: boolean;\n /**\n * The floating-ui root context shared between the trigger and the panel.\n * Coordinates interactions (click, dismiss, role) across both elements.\n */\n floatingRootContext: FloatingRootContext;\n /**\n * Ref setter for the panel element.\n * Registers the panel DOM node with floating-ui.\n */\n setFloating: Dispatch<SetStateAction<HTMLDivElement | null>>;\n /**\n * Ref setter for the reference (trigger) element.\n * Registers the trigger DOM node with floating-ui for focus return.\n */\n setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n /**\n * Sets the open state of the panel.\n * Called by the close button in SidePanelHeader, or any consumer that needs to close the panel.\n */\n setOpen: (open: boolean) => void;\n /**\n * Side panel id used for aria-controls on the trigger.\n */\n panelId?: string;\n /**\n * Registers or clears the side panel id used for aria-controls/id linkage.\n */\n setPanelId: Dispatch<SetStateAction<string | undefined>>;\n /**\n * The auto-generated id placed on SidePanelTitle.\n * Used for aria-labelledby on the panel region and the scrollable body.\n */\n titleId?: string;\n /**\n * Registers the title id from SidePanelTitle back to the context\n * so that SidePanel and SidePanelContent can use it for aria-labelledby.\n */\n setTitleId: Dispatch<SetStateAction<string | undefined>>;\n /**\n * Edge the panel is anchored to.\n */\n position?: \"right\" | \"left\";\n /**\n * Registers the position from SidePanel back to the context.\n */\n setPosition: Dispatch<SetStateAction<\"right\" | \"left\" | undefined>>;\n}\n\nexport const SidePanelContext = createContext<SidePanelContextValue>(\n \"SidePanelContext\",\n {\n openState: false,\n floatingRootContext: {} as FloatingRootContext,\n setFloating: () => {},\n setReference: () => {},\n setOpen: () => {},\n panelId: undefined,\n setPanelId: () => {},\n titleId: undefined,\n setTitleId: () => {},\n position: undefined,\n setPosition: () => {},\n },\n);\n\nexport function useSidePanelContext() {\n return useContext(SidePanelContext);\n}\n"],"names":[],"mappings":";;;AAyDO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,qBAAqB,EAAC;AAAA,IACtB,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,cAAc,MAAM;AAAA,IAAC,CAAA;AAAA,IACrB,SAAS,MAAM;AAAA,IAAC,CAAA;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,QAAA,EAAU,MAAA;AAAA,IACV,aAAa,MAAM;AAAA,IAAC;AAAA;AAExB;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
const observedAttributes = ["class", "hidden", "style"];
|
|
4
|
+
function useIsScrollable(ref) {
|
|
5
|
+
const [isScrollable, setIsScrollable] = useState(false);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const element = ref.current;
|
|
8
|
+
const win = element == null ? void 0 : element.ownerDocument.defaultView;
|
|
9
|
+
if (!element || !win) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
let animationFrame;
|
|
13
|
+
const checkScrollable = () => {
|
|
14
|
+
animationFrame = void 0;
|
|
15
|
+
const nextIsScrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
|
|
16
|
+
setIsScrollable(
|
|
17
|
+
(currentIsScrollable) => currentIsScrollable === nextIsScrollable ? currentIsScrollable : nextIsScrollable
|
|
18
|
+
);
|
|
19
|
+
};
|
|
20
|
+
const scheduleCheck = () => {
|
|
21
|
+
if (animationFrame === void 0) {
|
|
22
|
+
animationFrame = win.requestAnimationFrame(checkScrollable);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
scheduleCheck();
|
|
26
|
+
const resizeObserver = win.ResizeObserver ? new win.ResizeObserver(scheduleCheck) : void 0;
|
|
27
|
+
resizeObserver == null ? void 0 : resizeObserver.observe(element);
|
|
28
|
+
const mutationObserver = win.MutationObserver ? new win.MutationObserver(scheduleCheck) : void 0;
|
|
29
|
+
mutationObserver == null ? void 0 : mutationObserver.observe(element, {
|
|
30
|
+
attributeFilter: observedAttributes,
|
|
31
|
+
attributes: true,
|
|
32
|
+
characterData: true,
|
|
33
|
+
childList: true,
|
|
34
|
+
subtree: true
|
|
35
|
+
});
|
|
36
|
+
return () => {
|
|
37
|
+
if (animationFrame !== void 0) {
|
|
38
|
+
win.cancelAnimationFrame(animationFrame);
|
|
39
|
+
}
|
|
40
|
+
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
41
|
+
mutationObserver == null ? void 0 : mutationObserver.disconnect();
|
|
42
|
+
};
|
|
43
|
+
}, [ref]);
|
|
44
|
+
return isScrollable;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export { useIsScrollable };
|
|
48
|
+
//# sourceMappingURL=useIsScrollable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsScrollable.js","sources":["../src/side-panel/internal/useIsScrollable.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nconst observedAttributes = [\"class\", \"hidden\", \"style\"];\n\nexport function useIsScrollable(ref: RefObject<HTMLElement>) {\n const [isScrollable, setIsScrollable] = useState(false);\n\n useEffect(() => {\n const element = ref.current;\n const win = element?.ownerDocument.defaultView;\n if (!element || !win) {\n return;\n }\n\n let animationFrame: number | undefined;\n\n const checkScrollable = () => {\n animationFrame = undefined;\n const nextIsScrollable =\n element.scrollHeight > element.clientHeight ||\n element.scrollWidth > element.clientWidth;\n\n setIsScrollable((currentIsScrollable) =>\n currentIsScrollable === nextIsScrollable\n ? currentIsScrollable\n : nextIsScrollable,\n );\n };\n\n const scheduleCheck = () => {\n if (animationFrame === undefined) {\n animationFrame = win.requestAnimationFrame(checkScrollable);\n }\n };\n\n scheduleCheck();\n\n const resizeObserver = win.ResizeObserver\n ? new win.ResizeObserver(scheduleCheck)\n : undefined;\n resizeObserver?.observe(element);\n\n const mutationObserver = win.MutationObserver\n ? new win.MutationObserver(scheduleCheck)\n : undefined;\n mutationObserver?.observe(element, {\n attributeFilter: observedAttributes,\n attributes: true,\n characterData: true,\n childList: true,\n subtree: true,\n });\n\n return () => {\n if (animationFrame !== undefined) {\n win.cancelAnimationFrame(animationFrame);\n }\n resizeObserver?.disconnect();\n mutationObserver?.disconnect();\n };\n }, [ref]);\n\n return isScrollable;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAA,GAAqB,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAE/C,SAAS,gBAAgB,GAAA,EAA6B;AAC3D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,MAAM,GAAA,GAAM,mCAAS,aAAA,CAAc,WAAA;AACnC,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,GAAA,EAAK;AACpB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,cAAA;AAEJ,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,cAAA,GAAiB,MAAA;AACjB,MAAA,MAAM,mBACJ,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAA,IAC/B,OAAA,CAAQ,cAAc,OAAA,CAAQ,WAAA;AAEhC,MAAA,eAAA;AAAA,QAAgB,CAAC,mBAAA,KACf,mBAAA,KAAwB,gBAAA,GACpB,mBAAA,GACA;AAAA,OACN;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,cAAA,GAAiB,GAAA,CAAI,sBAAsB,eAAe,CAAA;AAAA,MAC5D;AAAA,IACF,CAAA;AAEA,IAAA,aAAA,EAAc;AAEd,IAAA,MAAM,iBAAiB,GAAA,CAAI,cAAA,GACvB,IAAI,GAAA,CAAI,cAAA,CAAe,aAAa,CAAA,GACpC,MAAA;AACJ,IAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,OAAA,CAAQ,OAAA,CAAA;AAExB,IAAA,MAAM,mBAAmB,GAAA,CAAI,gBAAA,GACzB,IAAI,GAAA,CAAI,gBAAA,CAAiB,aAAa,CAAA,GACtC,MAAA;AACJ,IAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,QAAQ,OAAA,EAAS;AAAA,MACjC,eAAA,EAAiB,kBAAA;AAAA,MACjB,UAAA,EAAY,IAAA;AAAA,MACZ,aAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,IAAA;AAAA,MACX,OAAA,EAAS;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,GAAA,CAAI,qBAAqB,cAAc,CAAA;AAAA,MACzC;AACA,MAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,UAAA,EAAA;AAChB,MAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,UAAA,EAAA;AAAA,IACpB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,OAAO,YAAA;AACT;;;;"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { useRef, useEffect } from 'react';
|
|
2
|
+
import { tabbable } from 'tabbable';
|
|
3
|
+
|
|
4
|
+
function isPlainTabKey(event) {
|
|
5
|
+
return event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
|
|
6
|
+
}
|
|
7
|
+
function getPanelTabbableElements(panel) {
|
|
8
|
+
return tabbable(panel);
|
|
9
|
+
}
|
|
10
|
+
function focusFirstPanelElement(panel) {
|
|
11
|
+
const [firstTabbableElement] = getPanelTabbableElements(panel);
|
|
12
|
+
(firstTabbableElement ?? panel).focus();
|
|
13
|
+
}
|
|
14
|
+
function focusLastPanelElement(panel) {
|
|
15
|
+
const tabbableElements = getPanelTabbableElements(panel);
|
|
16
|
+
(tabbableElements[tabbableElements.length - 1] ?? panel).focus();
|
|
17
|
+
}
|
|
18
|
+
function containsTarget(container, target) {
|
|
19
|
+
const targetWindow = container.ownerDocument.defaultView;
|
|
20
|
+
return Boolean(
|
|
21
|
+
(targetWindow == null ? void 0 : targetWindow.Node) && target instanceof targetWindow.Node && container.contains(target)
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
function getNextTabbableAfterReference(reference, panel) {
|
|
25
|
+
const { body } = reference.ownerDocument;
|
|
26
|
+
const tabbableElements = tabbable(body).filter(
|
|
27
|
+
(element) => !panel.contains(element)
|
|
28
|
+
);
|
|
29
|
+
const referenceIndex = tabbableElements.findIndex(
|
|
30
|
+
(element) => element === reference || reference.contains(element)
|
|
31
|
+
);
|
|
32
|
+
if (referenceIndex === -1) {
|
|
33
|
+
return void 0;
|
|
34
|
+
}
|
|
35
|
+
return tabbableElements[referenceIndex + 1];
|
|
36
|
+
}
|
|
37
|
+
function useSidePanelTabOrder(props) {
|
|
38
|
+
const { floating, open, reference } = props;
|
|
39
|
+
const followsReferenceOrder = useRef(false);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (!open || !reference || !floating) {
|
|
42
|
+
followsReferenceOrder.current = false;
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const { ownerDocument } = reference;
|
|
46
|
+
const onReferenceKeyDown = (event) => {
|
|
47
|
+
if (event.defaultPrevented || !isPlainTabKey(event) || event.shiftKey) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
followsReferenceOrder.current = true;
|
|
52
|
+
focusFirstPanelElement(floating);
|
|
53
|
+
};
|
|
54
|
+
const onFloatingKeyDown = (event) => {
|
|
55
|
+
if (event.defaultPrevented || !isPlainTabKey(event)) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
const panelTabbableElements = getPanelTabbableElements(floating);
|
|
59
|
+
const activeElement = floating.ownerDocument.activeElement;
|
|
60
|
+
if (event.shiftKey) {
|
|
61
|
+
const firstPanelElement = panelTabbableElements[0] ?? floating;
|
|
62
|
+
if (activeElement === firstPanelElement && followsReferenceOrder.current) {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
followsReferenceOrder.current = false;
|
|
65
|
+
reference.focus();
|
|
66
|
+
}
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
const lastPanelElement = panelTabbableElements[panelTabbableElements.length - 1] ?? floating;
|
|
70
|
+
if (activeElement === lastPanelElement && followsReferenceOrder.current) {
|
|
71
|
+
const nextElement = getNextTabbableAfterReference(reference, floating);
|
|
72
|
+
if (nextElement) {
|
|
73
|
+
event.preventDefault();
|
|
74
|
+
followsReferenceOrder.current = false;
|
|
75
|
+
nextElement.focus();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const onDocumentKeyDown = (event) => {
|
|
80
|
+
if (event.defaultPrevented || !isPlainTabKey(event) || !event.shiftKey) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
const nextElement = getNextTabbableAfterReference(reference, floating);
|
|
84
|
+
if (!nextElement || !containsTarget(nextElement, event.target)) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
followsReferenceOrder.current = true;
|
|
89
|
+
focusLastPanelElement(floating);
|
|
90
|
+
};
|
|
91
|
+
const onFloatingFocusIn = (event) => {
|
|
92
|
+
if (containsTarget(reference, event.relatedTarget)) {
|
|
93
|
+
followsReferenceOrder.current = true;
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const nextElement = getNextTabbableAfterReference(reference, floating);
|
|
97
|
+
if (nextElement && containsTarget(nextElement, event.relatedTarget)) {
|
|
98
|
+
followsReferenceOrder.current = true;
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
if (!containsTarget(floating, event.relatedTarget)) {
|
|
102
|
+
followsReferenceOrder.current = false;
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
reference.addEventListener("keydown", onReferenceKeyDown);
|
|
106
|
+
floating.addEventListener("keydown", onFloatingKeyDown);
|
|
107
|
+
floating.addEventListener("focusin", onFloatingFocusIn);
|
|
108
|
+
ownerDocument.addEventListener("keydown", onDocumentKeyDown);
|
|
109
|
+
return () => {
|
|
110
|
+
reference.removeEventListener("keydown", onReferenceKeyDown);
|
|
111
|
+
floating.removeEventListener("keydown", onFloatingKeyDown);
|
|
112
|
+
floating.removeEventListener("focusin", onFloatingFocusIn);
|
|
113
|
+
ownerDocument.removeEventListener("keydown", onDocumentKeyDown);
|
|
114
|
+
};
|
|
115
|
+
}, [floating, open, reference]);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export { useSidePanelTabOrder };
|
|
119
|
+
//# sourceMappingURL=useSidePanelTabOrder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSidePanelTabOrder.js","sources":["../src/side-panel/internal/useSidePanelTabOrder.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { tabbable } from \"tabbable\";\n\ninterface UseSidePanelTabOrderProps {\n floating: HTMLElement | null;\n open: boolean;\n reference: HTMLElement | null;\n}\n\nfunction isPlainTabKey(event: KeyboardEvent) {\n return (\n event.key === \"Tab\" && !event.altKey && !event.ctrlKey && !event.metaKey\n );\n}\n\nfunction getPanelTabbableElements(panel: HTMLElement) {\n return tabbable(panel);\n}\n\nfunction focusFirstPanelElement(panel: HTMLElement) {\n const [firstTabbableElement] = getPanelTabbableElements(panel);\n (firstTabbableElement ?? panel).focus();\n}\n\nfunction focusLastPanelElement(panel: HTMLElement) {\n const tabbableElements = getPanelTabbableElements(panel);\n (tabbableElements[tabbableElements.length - 1] ?? panel).focus();\n}\n\nfunction containsTarget(container: Element, target: EventTarget | null) {\n const targetWindow = container.ownerDocument.defaultView;\n\n return Boolean(\n targetWindow?.Node &&\n target instanceof targetWindow.Node &&\n container.contains(target),\n );\n}\n\nfunction getNextTabbableAfterReference(\n reference: HTMLElement,\n panel: HTMLElement,\n) {\n const { body } = reference.ownerDocument;\n const tabbableElements = tabbable(body).filter(\n (element) => !panel.contains(element),\n );\n const referenceIndex = tabbableElements.findIndex(\n (element) => element === reference || reference.contains(element),\n );\n\n if (referenceIndex === -1) {\n return undefined;\n }\n\n return tabbableElements[referenceIndex + 1];\n}\n\nexport function useSidePanelTabOrder(props: UseSidePanelTabOrderProps) {\n const { floating, open, reference } = props;\n const followsReferenceOrder = useRef(false);\n\n useEffect(() => {\n if (!open || !reference || !floating) {\n followsReferenceOrder.current = false;\n return;\n }\n\n const { ownerDocument } = reference;\n\n const onReferenceKeyDown = (event: KeyboardEvent) => {\n if (event.defaultPrevented || !isPlainTabKey(event) || event.shiftKey) {\n return;\n }\n\n event.preventDefault();\n followsReferenceOrder.current = true;\n focusFirstPanelElement(floating);\n };\n\n const onFloatingKeyDown = (event: KeyboardEvent) => {\n if (event.defaultPrevented || !isPlainTabKey(event)) {\n return;\n }\n\n const panelTabbableElements = getPanelTabbableElements(floating);\n const activeElement = floating.ownerDocument.activeElement;\n\n if (event.shiftKey) {\n const firstPanelElement = panelTabbableElements[0] ?? floating;\n\n if (\n activeElement === firstPanelElement &&\n followsReferenceOrder.current\n ) {\n event.preventDefault();\n followsReferenceOrder.current = false;\n reference.focus();\n }\n return;\n }\n\n const lastPanelElement =\n panelTabbableElements[panelTabbableElements.length - 1] ?? floating;\n\n if (activeElement === lastPanelElement && followsReferenceOrder.current) {\n const nextElement = getNextTabbableAfterReference(reference, floating);\n\n if (nextElement) {\n event.preventDefault();\n followsReferenceOrder.current = false;\n nextElement.focus();\n }\n }\n };\n\n const onDocumentKeyDown = (event: KeyboardEvent) => {\n if (event.defaultPrevented || !isPlainTabKey(event) || !event.shiftKey) {\n return;\n }\n\n const nextElement = getNextTabbableAfterReference(reference, floating);\n if (!nextElement || !containsTarget(nextElement, event.target)) {\n return;\n }\n\n event.preventDefault();\n followsReferenceOrder.current = true;\n focusLastPanelElement(floating);\n };\n\n const onFloatingFocusIn = (event: FocusEvent) => {\n if (containsTarget(reference, event.relatedTarget)) {\n followsReferenceOrder.current = true;\n return;\n }\n\n const nextElement = getNextTabbableAfterReference(reference, floating);\n if (nextElement && containsTarget(nextElement, event.relatedTarget)) {\n followsReferenceOrder.current = true;\n return;\n }\n\n if (!containsTarget(floating, event.relatedTarget)) {\n followsReferenceOrder.current = false;\n }\n };\n\n reference.addEventListener(\"keydown\", onReferenceKeyDown);\n floating.addEventListener(\"keydown\", onFloatingKeyDown);\n floating.addEventListener(\"focusin\", onFloatingFocusIn);\n ownerDocument.addEventListener(\"keydown\", onDocumentKeyDown);\n\n return () => {\n reference.removeEventListener(\"keydown\", onReferenceKeyDown);\n floating.removeEventListener(\"keydown\", onFloatingKeyDown);\n floating.removeEventListener(\"focusin\", onFloatingFocusIn);\n ownerDocument.removeEventListener(\"keydown\", onDocumentKeyDown);\n };\n }, [floating, open, reference]);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
import { useSidePanelContext } from './internal/SidePanelContext.js';
|
|
3
|
+
import 'tabbable';
|
|
3
4
|
|
|
4
5
|
function useSidePanel() {
|
|
5
6
|
const { openState, setOpen, setReference, panelId } = useSidePanelContext();
|
|
@@ -12,6 +13,7 @@ function useSidePanel() {
|
|
|
12
13
|
...userProps,
|
|
13
14
|
onClick: (e) => {
|
|
14
15
|
userOnClick == null ? void 0 : userOnClick(e);
|
|
16
|
+
setOpen(!openState);
|
|
15
17
|
},
|
|
16
18
|
ref: (node) => {
|
|
17
19
|
setReference(node);
|
|
@@ -24,7 +26,7 @@ function useSidePanel() {
|
|
|
24
26
|
}
|
|
25
27
|
};
|
|
26
28
|
},
|
|
27
|
-
[openState, panelId, setReference]
|
|
29
|
+
[openState, panelId, setReference, setOpen]
|
|
28
30
|
);
|
|
29
31
|
return {
|
|
30
32
|
openState,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import { useCallback
|
|
1
|
+
{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import {\n type MouseEvent,\n type MutableRefObject,\n type RefCallback,\n useCallback,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelValue {\n /**\n * Whether the side panel is currently open.\n */\n openState: boolean;\n /**\n * Sets the open state of the panel.\n */\n setOpen: (open: boolean) => void;\n /**\n * Props getter for a trigger element outside of `SidePanelTrigger`.\n * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),\n * and an `onClick` that toggles the panel.\n *\n * Spread the result onto a Button to get full trigger behavior:\n * ```tsx\n * <Button {...getTriggerProps()}>Toggle panel</Button>\n * ```\n *\n * You can pass additional props which are merged in. If you provide your\n * own `onClick`, it runs before the built-in toggle.\n *\n * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n * manage ARIA attributes yourself instead.\n */\n getTriggerProps: (\n userProps?: Record<string, unknown>,\n ) => Record<string, unknown>;\n /**\n * Registers the element that should receive focus when the panel closes.\n * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n * needs explicit control over which element is the reference.\n */\n setTriggerRef: (element: HTMLElement | null) => void;\n /**\n * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n * scenarios where you manage ARIA attributes yourself.\n */\n panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n const getTriggerProps = useCallback(\n (userProps?: Record<string, unknown>) => {\n const userOnClick = userProps?.onClick as\n | ((e: MouseEvent<HTMLElement>) => void)\n | undefined;\n\n return {\n \"aria-expanded\": openState,\n \"aria-controls\": openState ? panelId : undefined,\n ...userProps,\n onClick: (e: MouseEvent<HTMLElement>) => {\n userOnClick?.(e);\n setOpen(!openState);\n },\n ref: (node: HTMLElement | null) => {\n // Register this element as the trigger for focus return\n setReference(node);\n // Forward the consumer's ref if provided\n const userRef = userProps?.ref as\n | RefCallback<HTMLElement | null>\n | MutableRefObject<HTMLElement | null>;\n if (typeof userRef === \"function\") {\n userRef(node);\n } else if (\n userRef &&\n typeof userRef === \"object\" &&\n \"current\" in userRef\n ) {\n userRef.current = node;\n }\n },\n };\n },\n [openState, panelId, setReference, setOpen],\n );\n\n return {\n openState,\n setOpen,\n getTriggerProps,\n setTriggerRef: setReference,\n panelId,\n };\n}\n"],"names":[],"mappings":";;;;AAiDO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAY,mBAAA,EAAoB;AAE1E,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,SAAA,KAAwC;AACvC,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAI/B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,CAAA,KAA+B;AACvC,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,CAAA,CAAA;AACd,UAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,QACpB,CAAA;AAAA,QACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AAEjC,UAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,UAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA;AAG3B,UAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,YAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,UACd,WACE,OAAA,IACA,OAAO,OAAA,KAAY,QAAA,IACnB,aAAa,OAAA,EACb;AACA,YAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,UACpB;AAAA,QACF;AAAA,OACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAO;AAAA,GAC5C;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}
|
package/dist-es/tree/Tree.js
CHANGED
|
@@ -52,7 +52,7 @@ const Tree = forwardRef(
|
|
|
52
52
|
toggleExpanded,
|
|
53
53
|
select,
|
|
54
54
|
selectedSet,
|
|
55
|
-
|
|
55
|
+
setVisibleSelectionState,
|
|
56
56
|
visibleNodes,
|
|
57
57
|
getNodeMeta,
|
|
58
58
|
getElement,
|
|
@@ -124,8 +124,10 @@ const Tree = forwardRef(
|
|
|
124
124
|
if (activeNode) {
|
|
125
125
|
const nodeMeta = getNodeMeta(activeNode);
|
|
126
126
|
const isDisabled = disabledIdsSet.has(activeNode);
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
const hasChildren = Boolean(nodeMeta == null ? void 0 : nodeMeta.hasChildren);
|
|
128
|
+
const isExpanded = expandedState.has(activeNode);
|
|
129
|
+
if (!isDisabled && hasChildren) {
|
|
130
|
+
if (!isExpanded) {
|
|
129
131
|
toggleExpanded(event, activeNode);
|
|
130
132
|
} else {
|
|
131
133
|
const firstChild = visibleNodes.find(
|
|
@@ -144,7 +146,8 @@ const Tree = forwardRef(
|
|
|
144
146
|
if (activeNode) {
|
|
145
147
|
const isDisabled = disabledIdsSet.has(activeNode);
|
|
146
148
|
if (!isDisabled) {
|
|
147
|
-
|
|
149
|
+
const isExpanded = expandedState.has(activeNode);
|
|
150
|
+
if (isExpanded) {
|
|
148
151
|
toggleExpanded(event, activeNode);
|
|
149
152
|
} else {
|
|
150
153
|
const parent = getParent(activeNode);
|
|
@@ -241,7 +244,7 @@ const Tree = forwardRef(
|
|
|
241
244
|
(visible) => selectedSet.has(visible)
|
|
242
245
|
);
|
|
243
246
|
const newSelected = allSelected ? [] : allVisibleValues;
|
|
244
|
-
|
|
247
|
+
setVisibleSelectionState(newSelected);
|
|
245
248
|
onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
|
|
246
249
|
return;
|
|
247
250
|
}
|
package/dist-es/tree/Tree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport treeCss from \"./Tree.css\";\nimport { TreeProvider } from \"./TreeContext\";\nimport { useTree } from \"./useTree\";\n\nexport interface TreeProps extends ComponentPropsWithoutRef<\"ul\"> {\n /**\n * Default expanded nodes (uncontrolled)\n */\n defaultExpanded?: string[];\n /**\n * Expanded nodes (controlled)\n */\n expanded?: string[];\n /**\n * Callback on expanded nodes change\n */\n onExpandedChange?: (event: SyntheticEvent, expanded: string[]) => void;\n /**\n * Default selected nodes (uncontrolled)\n */\n defaultSelected?: string[];\n /**\n * Selected nodes\n */\n selected?: string[];\n /**\n * Callback on selected nodes change\n */\n onSelectionChange?: (event: SyntheticEvent, selected: string[]) => void;\n /**\n * Sets multiselect mode with checkboxes and allows for multiple node selection\n */\n multiselect?: boolean;\n /**\n * Sets tree to disabled state, preventing all interaction\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nexport const Tree = forwardRef<HTMLUListElement, TreeProps>(\n function Tree(props, ref) {\n const {\n children,\n className,\n defaultExpanded,\n expanded,\n onExpandedChange,\n defaultSelected,\n selected,\n onSelectionChange,\n multiselect = false,\n disabled = false,\n onKeyDown,\n onBlur,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tree\",\n css: treeCss,\n window: targetWindow,\n });\n\n const treeState = useTree({\n defaultExpanded,\n expanded,\n onExpandedChange,\n defaultSelected,\n selected,\n onSelectionChange,\n multiselect,\n disabled,\n children,\n });\n\n const {\n activeNode,\n setActiveNode,\n expandedArray,\n setExpandedArray,\n expandedState,\n toggleExpanded,\n select,\n selectedSet,\n setSelectedState,\n visibleNodes,\n getNodeMeta,\n getElement,\n getParent,\n getChildren,\n treeModel,\n disabledIdsSet,\n } = treeState;\n\n const lastKeypressRef = useRef<string>(\"\");\n const keypressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const treeRef = useRef<HTMLUListElement>(null);\n\n useEffect(() => {\n return () => {\n if (keypressTimeoutRef.current) {\n clearTimeout(keypressTimeoutRef.current);\n }\n };\n }, []);\n\n const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n onBlur?.(event);\n const relatedTarget = event.relatedTarget as Node | null;\n if (!treeRef.current?.contains(relatedTarget)) {\n setActiveNode(undefined);\n }\n };\n\n const focusNode = (\n value: string,\n ): \"focused\" | \"already-focused\" | \"missing\" => {\n const element = getElement(value);\n if (!element) {\n return \"missing\";\n }\n\n const activeEl = targetWindow?.document.activeElement;\n if (activeEl === element) {\n return \"already-focused\";\n }\n\n element.focus();\n element.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n return \"focused\";\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n onKeyDown?.(event);\n\n if (disabled) return;\n\n if (visibleNodes.length === 0) return;\n\n const currentIndex = activeNode ? visibleNodes.indexOf(activeNode) : -1;\n\n let newActiveNode: string | undefined;\n let handled = false;\n\n switch (event.key) {\n case \"ArrowDown\": {\n handled = true;\n const nextIndex = currentIndex + 1;\n if (nextIndex < visibleNodes.length) {\n newActiveNode = visibleNodes[nextIndex];\n }\n break;\n }\n case \"ArrowUp\": {\n handled = true;\n const prevIndex = currentIndex - 1;\n if (prevIndex >= 0) {\n newActiveNode = visibleNodes[prevIndex];\n }\n break;\n }\n case \"ArrowRight\": {\n handled = true;\n if (activeNode) {\n const nodeMeta = getNodeMeta(activeNode);\n const isDisabled = disabledIdsSet.has(activeNode);\n if (!isDisabled && nodeMeta?.hasChildren) {\n if (!expandedState.has(activeNode)) {\n toggleExpanded(event, activeNode);\n } else {\n const firstChild = visibleNodes.find(\n (visibleNode) => getParent(visibleNode) === activeNode,\n );\n if (firstChild) {\n newActiveNode = firstChild;\n }\n }\n }\n }\n break;\n }\n case \"ArrowLeft\": {\n handled = true;\n if (activeNode) {\n const isDisabled = disabledIdsSet.has(activeNode);\n if (!isDisabled) {\n if (expandedState.has(activeNode)) {\n toggleExpanded(event, activeNode);\n } else {\n const parent = getParent(activeNode);\n if (parent) {\n newActiveNode = parent;\n }\n }\n }\n }\n break;\n }\n case \"Home\": {\n handled = true;\n newActiveNode = visibleNodes[0];\n break;\n }\n case \"End\": {\n handled = true;\n newActiveNode = visibleNodes[visibleNodes.length - 1];\n break;\n }\n case \"Enter\": {\n handled = true;\n if (activeNode) {\n select(event, activeNode);\n }\n break;\n }\n case \" \": {\n handled = true;\n if (activeNode) {\n select(event, activeNode);\n }\n break;\n }\n case \"*\": {\n handled = true;\n if (activeNode) {\n const parent = getParent(activeNode);\n // Get siblings: either children of parent, or root nodes if no parent\n const siblings = parent\n ? getChildren(parent)\n : treeModel.rootValues;\n\n const toExpand = siblings.filter((sibling) => {\n const siblingMeta = getNodeMeta(sibling);\n return (\n siblingMeta?.hasChildren &&\n !expandedState.has(sibling) &&\n !disabledIdsSet.has(sibling)\n );\n });\n\n if (toExpand.length > 0) {\n const newExpanded = [...expandedArray, ...toExpand];\n setExpandedArray(newExpanded);\n onExpandedChange?.(event, newExpanded);\n }\n }\n break;\n }\n default: {\n // Type-ahead\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n handled = true;\n\n if (keypressTimeoutRef.current) {\n clearTimeout(keypressTimeoutRef.current);\n }\n\n lastKeypressRef.current += event.key.toLowerCase();\n const searchString = lastKeypressRef.current;\n\n keypressTimeoutRef.current = setTimeout(() => {\n lastKeypressRef.current = \"\";\n }, 500);\n\n const currentIndex = activeNode\n ? visibleNodes.indexOf(activeNode)\n : -1;\n let found = false;\n\n for (let i = currentIndex + 1; i < visibleNodes.length; i++) {\n const element = getElement(visibleNodes[i]);\n if (\n element?.textContent?.toLowerCase().startsWith(searchString)\n ) {\n newActiveNode = visibleNodes[i];\n found = true;\n break;\n }\n }\n\n if (!found) {\n for (let i = 0; i <= currentIndex; i++) {\n const element = getElement(visibleNodes[i]);\n if (\n element?.textContent?.toLowerCase().startsWith(searchString)\n ) {\n newActiveNode = visibleNodes[i];\n break;\n }\n }\n }\n }\n break;\n }\n }\n\n if (\n (event.ctrlKey || event.metaKey) &&\n event.key === \"a\" &&\n multiselect\n ) {\n handled = true;\n event.preventDefault();\n\n const allVisibleValues = visibleNodes.filter(\n (visibleNode) => !disabledIdsSet.has(visibleNode),\n );\n const allSelected = allVisibleValues.every((visible) =>\n selectedSet.has(visible),\n );\n\n const newSelected = allSelected ? [] : allVisibleValues;\n\n setSelectedState(newSelected);\n onSelectionChange?.(event, newSelected);\n return;\n }\n\n if (\n event.shiftKey &&\n (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") &&\n multiselect\n ) {\n handled = true;\n const isDown = event.key === \"ArrowDown\";\n const currentIndex = activeNode ? visibleNodes.indexOf(activeNode) : -1;\n const nextIndex = isDown ? currentIndex + 1 : currentIndex - 1;\n\n if (nextIndex >= 0 && nextIndex < visibleNodes.length) {\n const nextValue = visibleNodes[nextIndex];\n\n if (!disabledIdsSet.has(nextValue)) {\n select(event, nextValue);\n newActiveNode = nextValue;\n }\n }\n }\n\n if (handled) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (newActiveNode !== undefined) {\n const focusResult = focusNode(newActiveNode);\n if (focusResult !== \"focused\") {\n setActiveNode(newActiveNode);\n }\n }\n };\n\n const handleRef = useForkRef(treeRef, ref);\n\n return (\n <TreeProvider value={treeState}>\n <ul\n ref={handleRef}\n role=\"tree\"\n aria-multiselectable={multiselect ? true : undefined}\n aria-disabled={disabled || undefined}\n className={clsx(\n withBaseName(),\n { [withBaseName(\"disabled\")]: disabled },\n className,\n )}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n {...rest}\n >\n {children}\n </ul>\n </TreeProvider>\n );\n },\n);\n"],"names":["Tree","treeCss","currentIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useEffect,\n useRef,\n} from \"react\";\nimport treeCss from \"./Tree.css\";\nimport { TreeProvider } from \"./TreeContext\";\nimport { useTree } from \"./useTree\";\n\nexport interface TreeProps extends ComponentPropsWithoutRef<\"ul\"> {\n /**\n * Default expanded nodes (uncontrolled)\n */\n defaultExpanded?: string[];\n /**\n * Expanded nodes (controlled)\n */\n expanded?: string[];\n /**\n * Callback on expanded nodes change\n */\n onExpandedChange?: (event: SyntheticEvent, expanded: string[]) => void;\n /**\n * Default selected nodes (uncontrolled)\n */\n defaultSelected?: string[];\n /**\n * Selected nodes\n */\n selected?: string[];\n /**\n * Callback on selected nodes change\n */\n onSelectionChange?: (event: SyntheticEvent, selected: string[]) => void;\n /**\n * Sets multiselect mode with checkboxes and allows for multiple node selection\n */\n multiselect?: boolean;\n /**\n * Sets tree to disabled state, preventing all interaction\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nexport const Tree = forwardRef<HTMLUListElement, TreeProps>(\n function Tree(props, ref) {\n const {\n children,\n className,\n defaultExpanded,\n expanded,\n onExpandedChange,\n defaultSelected,\n selected,\n onSelectionChange,\n multiselect = false,\n disabled = false,\n onKeyDown,\n onBlur,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tree\",\n css: treeCss,\n window: targetWindow,\n });\n\n const treeState = useTree({\n defaultExpanded,\n expanded,\n onExpandedChange,\n defaultSelected,\n selected,\n onSelectionChange,\n multiselect,\n disabled,\n children,\n });\n\n const {\n activeNode,\n setActiveNode,\n expandedArray,\n setExpandedArray,\n expandedState,\n toggleExpanded,\n select,\n selectedSet,\n setVisibleSelectionState,\n visibleNodes,\n getNodeMeta,\n getElement,\n getParent,\n getChildren,\n treeModel,\n disabledIdsSet,\n } = treeState;\n\n const lastKeypressRef = useRef<string>(\"\");\n const keypressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n null,\n );\n const treeRef = useRef<HTMLUListElement>(null);\n\n useEffect(() => {\n return () => {\n if (keypressTimeoutRef.current) {\n clearTimeout(keypressTimeoutRef.current);\n }\n };\n }, []);\n\n const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n onBlur?.(event);\n const relatedTarget = event.relatedTarget as Node | null;\n if (!treeRef.current?.contains(relatedTarget)) {\n setActiveNode(undefined);\n }\n };\n\n const focusNode = (\n value: string,\n ): \"focused\" | \"already-focused\" | \"missing\" => {\n const element = getElement(value);\n if (!element) {\n return \"missing\";\n }\n\n const activeEl = targetWindow?.document.activeElement;\n if (activeEl === element) {\n return \"already-focused\";\n }\n\n element.focus();\n element.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n return \"focused\";\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n onKeyDown?.(event);\n\n if (disabled) return;\n\n if (visibleNodes.length === 0) return;\n\n const currentIndex = activeNode ? visibleNodes.indexOf(activeNode) : -1;\n\n let newActiveNode: string | undefined;\n let handled = false;\n\n switch (event.key) {\n case \"ArrowDown\": {\n handled = true;\n const nextIndex = currentIndex + 1;\n if (nextIndex < visibleNodes.length) {\n newActiveNode = visibleNodes[nextIndex];\n }\n break;\n }\n case \"ArrowUp\": {\n handled = true;\n const prevIndex = currentIndex - 1;\n if (prevIndex >= 0) {\n newActiveNode = visibleNodes[prevIndex];\n }\n break;\n }\n case \"ArrowRight\": {\n handled = true;\n if (activeNode) {\n const nodeMeta = getNodeMeta(activeNode);\n const isDisabled = disabledIdsSet.has(activeNode);\n const hasChildren = Boolean(nodeMeta?.hasChildren);\n const isExpanded = expandedState.has(activeNode);\n if (!isDisabled && hasChildren) {\n if (!isExpanded) {\n toggleExpanded(event, activeNode);\n } else {\n const firstChild = visibleNodes.find(\n (visibleNode) => getParent(visibleNode) === activeNode,\n );\n if (firstChild) {\n newActiveNode = firstChild;\n }\n }\n }\n }\n break;\n }\n case \"ArrowLeft\": {\n handled = true;\n if (activeNode) {\n const isDisabled = disabledIdsSet.has(activeNode);\n if (!isDisabled) {\n const isExpanded = expandedState.has(activeNode);\n if (isExpanded) {\n toggleExpanded(event, activeNode);\n } else {\n const parent = getParent(activeNode);\n if (parent) {\n newActiveNode = parent;\n }\n }\n }\n }\n break;\n }\n case \"Home\": {\n handled = true;\n newActiveNode = visibleNodes[0];\n break;\n }\n case \"End\": {\n handled = true;\n newActiveNode = visibleNodes[visibleNodes.length - 1];\n break;\n }\n case \"Enter\": {\n handled = true;\n if (activeNode) {\n select(event, activeNode);\n }\n break;\n }\n case \" \": {\n handled = true;\n if (activeNode) {\n select(event, activeNode);\n }\n break;\n }\n case \"*\": {\n handled = true;\n if (activeNode) {\n const parent = getParent(activeNode);\n // Get siblings: either children of parent, or root nodes if no parent\n const siblings = parent\n ? getChildren(parent)\n : treeModel.rootValues;\n\n const toExpand = siblings.filter((sibling) => {\n const siblingMeta = getNodeMeta(sibling);\n return (\n siblingMeta?.hasChildren &&\n !expandedState.has(sibling) &&\n !disabledIdsSet.has(sibling)\n );\n });\n\n if (toExpand.length > 0) {\n const newExpanded = [...expandedArray, ...toExpand];\n setExpandedArray(newExpanded);\n onExpandedChange?.(event, newExpanded);\n }\n }\n break;\n }\n default: {\n // Type-ahead\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n handled = true;\n\n if (keypressTimeoutRef.current) {\n clearTimeout(keypressTimeoutRef.current);\n }\n\n lastKeypressRef.current += event.key.toLowerCase();\n const searchString = lastKeypressRef.current;\n\n keypressTimeoutRef.current = setTimeout(() => {\n lastKeypressRef.current = \"\";\n }, 500);\n\n const currentIndex = activeNode\n ? visibleNodes.indexOf(activeNode)\n : -1;\n let found = false;\n\n for (let i = currentIndex + 1; i < visibleNodes.length; i++) {\n const element = getElement(visibleNodes[i]);\n if (\n element?.textContent?.toLowerCase().startsWith(searchString)\n ) {\n newActiveNode = visibleNodes[i];\n found = true;\n break;\n }\n }\n\n if (!found) {\n for (let i = 0; i <= currentIndex; i++) {\n const element = getElement(visibleNodes[i]);\n if (\n element?.textContent?.toLowerCase().startsWith(searchString)\n ) {\n newActiveNode = visibleNodes[i];\n break;\n }\n }\n }\n }\n break;\n }\n }\n\n if (\n (event.ctrlKey || event.metaKey) &&\n event.key === \"a\" &&\n multiselect\n ) {\n handled = true;\n event.preventDefault();\n\n const allVisibleValues = visibleNodes.filter(\n (visibleNode) => !disabledIdsSet.has(visibleNode),\n );\n const allSelected = allVisibleValues.every((visible) =>\n selectedSet.has(visible),\n );\n\n const newSelected = allSelected ? [] : allVisibleValues;\n\n setVisibleSelectionState(newSelected);\n onSelectionChange?.(event, newSelected);\n return;\n }\n\n if (\n event.shiftKey &&\n (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") &&\n multiselect\n ) {\n handled = true;\n const isDown = event.key === \"ArrowDown\";\n const currentIndex = activeNode ? visibleNodes.indexOf(activeNode) : -1;\n const nextIndex = isDown ? currentIndex + 1 : currentIndex - 1;\n\n if (nextIndex >= 0 && nextIndex < visibleNodes.length) {\n const nextValue = visibleNodes[nextIndex];\n\n if (!disabledIdsSet.has(nextValue)) {\n select(event, nextValue);\n newActiveNode = nextValue;\n }\n }\n }\n\n if (handled) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (newActiveNode !== undefined) {\n const focusResult = focusNode(newActiveNode);\n if (focusResult !== \"focused\") {\n setActiveNode(newActiveNode);\n }\n }\n };\n\n const handleRef = useForkRef(treeRef, ref);\n\n return (\n <TreeProvider value={treeState}>\n <ul\n ref={handleRef}\n role=\"tree\"\n aria-multiselectable={multiselect ? true : undefined}\n aria-disabled={disabled || undefined}\n className={clsx(\n withBaseName(),\n { [withBaseName(\"disabled\")]: disabled },\n className,\n )}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n {...rest}\n >\n {children}\n </ul>\n </TreeProvider>\n );\n },\n);\n"],"names":["Tree","treeCss","currentIndex"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeContext.js","sources":["../src/tree/TreeContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n type Dispatch,\n type ReactNode,\n type SetStateAction,\n type SyntheticEvent,\n useContext,\n} from \"react\";\nimport type { TreeModel, TreeNodeMeta } from \"./useTree\";\n\nexport interface TreeContextValue {\n expandedState: Set<string>;\n /** Toggle a node expansion state */\n toggleExpanded: (event: SyntheticEvent, value: string) => void;\n\n /** Selected node values */\n selectedState: string[];\n /** Selected node values as Set for O(1) lookups */\n selectedSet: Set<string>;\n /** Set selected state directly */\n setSelectedState: Dispatch<SetStateAction<string[]>>;\n /** Select node */\n select: (event: SyntheticEvent, value: string) => void;\n\n /** Whether multiselect mode with checkboxes is enabled */\n multiselect: boolean;\n /** Disabled state of the tree */\n disabled: boolean;\n /** Set of disabled node IDs */\n disabledIdsSet: Set<string>;\n\n /** Tree model for traversal */\n treeModel: TreeModel;\n /** Get node metadata from tree model */\n getNodeMeta: (value: string) => TreeNodeMeta | undefined;\n /** Get parent of a node */\n getParent: (value: string) => string | undefined;\n /** Get children of a node */\n getChildren: (value: string) => string[];\n /** Get all descendants of a node */\n getDescendants: (value: string) => string[];\n /** Get all ancestors of a node */\n getAncestors: (value: string) => string[];\n /** Memoized visible (navigable) nodes in tree order */\n visibleNodes: string[];\n /** Memoized tabbable node ID for roving tabindex (computed once at tree level) */\n tabbableNodeId: string | undefined;\n /** Register a DOM element for focus management */\n registerElement: (value: string, element: HTMLElement) => () => void;\n /** Get DOM element for a node (if mounted) */\n getElement: (value: string) => HTMLElement | undefined;\n /** Active node value */\n activeNode: string | undefined;\n /** Set the active node */\n setActiveNode: Dispatch<SetStateAction<string | undefined>>;\n\n /** Set of indeterminate (partially selected) node IDs */\n indeterminateState: Set<string>;\n}\n\nconst TreeContext = createContext<TreeContextValue | undefined>(\n \"Tree Context\",\n undefined,\n);\n\nexport const TreeProvider = TreeContext.Provider;\n\nexport function useTreeContext(): TreeContextValue {\n const context = useContext(TreeContext);\n if (!context) {\n throw new Error(\"useTreeContext must be used within a TreeProvider\");\n }\n return context;\n}\n\nexport interface TreeNodeContextValue {\n /** Current node value */\n value: string;\n /** Current depth level */\n level: number;\n /** Whether node has children */\n hasChildren: boolean;\n /** Whether node is expanded */\n expanded: boolean;\n /** Whether node is disabled */\n disabled: boolean;\n /** Node id for the li element */\n id: string;\n /** Whether node is selected */\n selected: boolean;\n /** Whether node is in indeterminate state (partially selected children) */\n indeterminate: boolean;\n /** Child TreeNode elements to be rendered inside the group */\n nodeChildren: ReactNode;\n}\n\nconst TreeNodeContext = createContext<TreeNodeContextValue | undefined>(\n \"TreeNodeContext\",\n undefined,\n);\n\nexport const TreeNodeProvider = TreeNodeContext.Provider;\n\nexport function useTreeNodeContext(): TreeNodeContextValue | undefined {\n return useContext(TreeNodeContext);\n}\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"TreeContext.js","sources":["../src/tree/TreeContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n type Dispatch,\n type ReactNode,\n type Ref,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n useContext,\n} from \"react\";\nimport type { TreeModel, TreeNodeMeta } from \"./useTree\";\n\nexport interface TreeContextValue {\n expandedState: Set<string>;\n /** Toggle a node expansion state */\n toggleExpanded: (event: SyntheticEvent, value: string) => void;\n\n /** Selected node values */\n selectedState: string[];\n /** Selected node values as Set for O(1) lookups */\n selectedSet: Set<string>;\n /** Set selected state directly */\n setSelectedState: Dispatch<SetStateAction<string[]>>;\n /** Set selected state without expanding selection through hidden descendants */\n setVisibleSelectionState: (selected: string[]) => void;\n /** Select node */\n select: (event: SyntheticEvent, value: string) => void;\n\n /** Whether multiselect mode with checkboxes is enabled */\n multiselect: boolean;\n /** Disabled state of the tree */\n disabled: boolean;\n /** Set of disabled node IDs */\n disabledIdsSet: Set<string>;\n\n /** Tree model for traversal */\n treeModel: TreeModel;\n /** Get node metadata from tree model */\n getNodeMeta: (value: string) => TreeNodeMeta | undefined;\n /** Get parent of a node */\n getParent: (value: string) => string | undefined;\n /** Get children of a node */\n getChildren: (value: string) => string[];\n /** Get all descendants of a node */\n getDescendants: (value: string) => string[];\n /** Get all ancestors of a node */\n getAncestors: (value: string) => string[];\n /** Memoized visible (navigable) nodes in tree order */\n visibleNodes: string[];\n /** Memoized tabbable node ID for roving tabindex (computed once at tree level) */\n tabbableNodeId: string | undefined;\n /** Register a DOM element for focus management */\n registerElement: (value: string, element: HTMLElement) => () => void;\n /** Get DOM element for a node (if mounted) */\n getElement: (value: string) => HTMLElement | undefined;\n /** Active node value */\n activeNode: string | undefined;\n /** Set the active node */\n setActiveNode: Dispatch<SetStateAction<string | undefined>>;\n\n /** Set of indeterminate (partially selected) node IDs */\n indeterminateState: Set<string>;\n}\n\nconst TreeContext = createContext<TreeContextValue | undefined>(\n \"Tree Context\",\n undefined,\n);\n\nexport const TreeProvider = TreeContext.Provider;\n\nexport function useTreeContext(): TreeContextValue {\n const context = useContext(TreeContext);\n if (!context) {\n throw new Error(\"useTreeContext must be used within a TreeProvider\");\n }\n return context;\n}\n\nexport interface TreeNodeContextValue {\n /** Current node value */\n value: string;\n /** Current depth level */\n level: number;\n /** Whether node has children */\n hasChildren: boolean;\n /** Whether node is expanded */\n expanded: boolean;\n /** Whether node is disabled */\n disabled: boolean;\n /** Node id for the li element */\n id: string;\n /** Ref for the li element rendered by TreeNodeTrigger */\n nodeRef: RefObject<HTMLLIElement>;\n /** Callback ref that connects TreeNode's forwarded ref to the li element */\n setNodeRef: Ref<HTMLLIElement> | null;\n /** Whether node is selected */\n selected: boolean;\n /** Whether node is in indeterminate state (partially selected children) */\n indeterminate: boolean;\n /** Child TreeNode elements to be rendered inside the group */\n nodeChildren: ReactNode;\n}\n\nconst TreeNodeContext = createContext<TreeNodeContextValue | undefined>(\n \"TreeNodeContext\",\n undefined,\n);\n\nexport const TreeNodeProvider = TreeNodeContext.Provider;\n\nexport function useTreeNodeContext(): TreeNodeContextValue | undefined {\n return useContext(TreeNodeContext);\n}\n"],"names":[],"mappings":";;;AAgEA,MAAM,WAAA,GAAc,aAAA;AAAA,EAClB,cAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,eAAe,WAAA,CAAY;AAEjC,SAAS,cAAA,GAAmC;AACjD,EAAA,MAAM,OAAA,GAAU,WAAW,WAAW,CAAA;AACtC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,mDAAmD,CAAA;AAAA,EACrE;AACA,EAAA,OAAO,OAAA;AACT;AA2BA,MAAM,eAAA,GAAkB,aAAA;AAAA,EACtB,iBAAA;AAAA,EACA;AACF,CAAA;AAEO,MAAM,mBAAmB,eAAA,CAAgB;AAEzC,SAAS,kBAAA,GAAuD;AACrE,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}
|