@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,62 +0,0 @@
|
|
|
1
|
-
import { useRef, useCallback, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
function useFocusWithRetry({
|
|
4
|
-
maxAttempts = 120,
|
|
5
|
-
targetWindow
|
|
6
|
-
}) {
|
|
7
|
-
const focusRafRef = useRef(null);
|
|
8
|
-
const cancelScheduledFocus = useCallback(() => {
|
|
9
|
-
if (focusRafRef.current != null && targetWindow) {
|
|
10
|
-
targetWindow.cancelAnimationFrame(focusRafRef.current);
|
|
11
|
-
focusRafRef.current = null;
|
|
12
|
-
}
|
|
13
|
-
}, [targetWindow]);
|
|
14
|
-
const focusElementWithRetry = useCallback(
|
|
15
|
-
(getElement) => {
|
|
16
|
-
var _a;
|
|
17
|
-
const doc = targetWindow == null ? void 0 : targetWindow.document;
|
|
18
|
-
if (!doc) {
|
|
19
|
-
(_a = getElement()) == null ? void 0 : _a.focus({ preventScroll: true });
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
cancelScheduledFocus();
|
|
23
|
-
let attempts = 0;
|
|
24
|
-
const focusElement = () => {
|
|
25
|
-
const element = getElement();
|
|
26
|
-
if (!(element == null ? void 0 : element.isConnected)) {
|
|
27
|
-
if (attempts >= maxAttempts || !(targetWindow == null ? void 0 : targetWindow.requestAnimationFrame)) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
attempts += 1;
|
|
31
|
-
focusRafRef.current = targetWindow.requestAnimationFrame(focusElement);
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
element.focus({ preventScroll: true });
|
|
35
|
-
if (doc.activeElement === element || attempts >= maxAttempts) {
|
|
36
|
-
focusRafRef.current = null;
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
attempts += 1;
|
|
40
|
-
if (targetWindow == null ? void 0 : targetWindow.requestAnimationFrame) {
|
|
41
|
-
focusRafRef.current = targetWindow.requestAnimationFrame(focusElement);
|
|
42
|
-
} else {
|
|
43
|
-
queueMicrotask(focusElement);
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
focusElement();
|
|
47
|
-
},
|
|
48
|
-
[cancelScheduledFocus, maxAttempts, targetWindow]
|
|
49
|
-
);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
return () => {
|
|
52
|
-
cancelScheduledFocus();
|
|
53
|
-
};
|
|
54
|
-
}, [cancelScheduledFocus]);
|
|
55
|
-
return {
|
|
56
|
-
cancelScheduledFocus,
|
|
57
|
-
focusElementWithRetry
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export { useFocusWithRetry };
|
|
62
|
-
//# sourceMappingURL=useFocusWithRetry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusWithRetry.js","sources":["../src/tabs-next/hooks/useFocusWithRetry.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\n\ninterface UseFocusWithRetryArgs {\n maxAttempts?: number;\n targetWindow: Window | null | undefined;\n}\n\nexport function useFocusWithRetry({\n maxAttempts = 120,\n targetWindow,\n}: UseFocusWithRetryArgs) {\n const focusRafRef = useRef<number | null>(null);\n\n const cancelScheduledFocus = useCallback(() => {\n if (focusRafRef.current != null && targetWindow) {\n targetWindow.cancelAnimationFrame(focusRafRef.current);\n focusRafRef.current = null;\n }\n }, [targetWindow]);\n\n const focusElementWithRetry = useCallback(\n (getElement: () => HTMLElement | null | undefined) => {\n const doc = targetWindow?.document;\n if (!doc) {\n getElement()?.focus({ preventScroll: true });\n return;\n }\n\n cancelScheduledFocus();\n\n let attempts = 0;\n\n const focusElement = () => {\n const element = getElement();\n if (!element?.isConnected) {\n if (attempts >= maxAttempts || !targetWindow?.requestAnimationFrame) {\n return;\n }\n\n attempts += 1;\n focusRafRef.current =\n targetWindow.requestAnimationFrame(focusElement);\n return;\n }\n\n element.focus({ preventScroll: true });\n\n if (doc.activeElement === element || attempts >= maxAttempts) {\n focusRafRef.current = null;\n return;\n }\n\n attempts += 1;\n if (targetWindow?.requestAnimationFrame) {\n focusRafRef.current =\n targetWindow.requestAnimationFrame(focusElement);\n } else {\n queueMicrotask(focusElement);\n }\n };\n\n focusElement();\n },\n [cancelScheduledFocus, maxAttempts, targetWindow],\n );\n\n useEffect(() => {\n return () => {\n cancelScheduledFocus();\n };\n }, [cancelScheduledFocus]);\n\n return {\n cancelScheduledFocus,\n focusElementWithRetry,\n };\n}\n"],"names":[],"mappings":";;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,WAAA,GAAc,GAAA;AAAA,EACd;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAsB,IAAI,CAAA;AAE9C,EAAA,MAAM,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,IAAI,WAAA,CAAY,OAAA,IAAW,IAAA,IAAQ,YAAA,EAAc;AAC/C,MAAA,YAAA,CAAa,oBAAA,CAAqB,YAAY,OAAO,CAAA;AACrD,MAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,IACxB;AAAA,EACF,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,qBAAA,GAAwB,WAAA;AAAA,IAC5B,CAAC,UAAA,KAAqD;AArB1D,MAAA,IAAA,EAAA;AAsBM,MAAA,MAAM,MAAM,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,QAAA;AAC1B,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,CAAA,EAAA,GAAA,UAAA,EAAW,KAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAc,KAAA,CAAM,EAAE,eAAe,IAAA,EAAK,CAAA;AAC1C,QAAA;AAAA,MACF;AAEA,MAAA,oBAAA,EAAqB;AAErB,MAAA,IAAI,QAAA,GAAW,CAAA;AAEf,MAAA,MAAM,eAAe,MAAM;AACzB,QAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,QAAA,IAAI,EAAC,mCAAS,WAAA,CAAA,EAAa;AACzB,UAAA,IAAI,QAAA,IAAY,WAAA,IAAe,EAAC,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,qBAAA,CAAA,EAAuB;AACnE,YAAA;AAAA,UACF;AAEA,UAAA,QAAA,IAAY,CAAA;AACZ,UAAA,WAAA,CAAY,OAAA,GACV,YAAA,CAAa,qBAAA,CAAsB,YAAY,CAAA;AACjD,UAAA;AAAA,QACF;AAEA,QAAA,OAAA,CAAQ,KAAA,CAAM,EAAE,aAAA,EAAe,IAAA,EAAM,CAAA;AAErC,QAAA,IAAI,GAAA,CAAI,aAAA,KAAkB,OAAA,IAAW,QAAA,IAAY,WAAA,EAAa;AAC5D,UAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AACtB,UAAA;AAAA,QACF;AAEA,QAAA,QAAA,IAAY,CAAA;AACZ,QAAA,IAAI,6CAAc,qBAAA,EAAuB;AACvC,UAAA,WAAA,CAAY,OAAA,GACV,YAAA,CAAa,qBAAA,CAAsB,YAAY,CAAA;AAAA,QACnD,CAAA,MAAO;AACL,UAAA,cAAA,CAAe,YAAY,CAAA;AAAA,QAC7B;AAAA,MACF,CAAA;AAEA,MAAA,YAAA,EAAa;AAAA,IACf,CAAA;AAAA,IACA,CAAC,oBAAA,EAAsB,WAAA,EAAa,YAAY;AAAA,GAClD;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,oBAAA,EAAqB;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,OAAO;AAAA,IACL,oBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1,264 +0,0 @@
|
|
|
1
|
-
import { ownerWindow, useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
2
|
-
import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
|
|
3
|
-
import { isHTMLElement } from '../domUtils.js';
|
|
4
|
-
import { seedWidthMap, updateWidthMap, getMeasuredWidth, getGapValue } from '../widthMeasurement.js';
|
|
5
|
-
import { calculateVisibleCount, MIN_TRUSTED_TAB_WIDTH, partitionVisibleValues } from './overflowMath.js';
|
|
6
|
-
|
|
7
|
-
function getTabWidth(tab) {
|
|
8
|
-
const width = tab.width || getMeasuredWidth(tab.root);
|
|
9
|
-
return width > MIN_TRUSTED_TAB_WIDTH ? width : null;
|
|
10
|
-
}
|
|
11
|
-
function getAvailableWidth(element) {
|
|
12
|
-
const parent = element.parentElement;
|
|
13
|
-
if (!parent) {
|
|
14
|
-
return getMeasuredWidth(element);
|
|
15
|
-
}
|
|
16
|
-
const parentWidth = getMeasuredWidth(parent);
|
|
17
|
-
const parentStyles = ownerWindow(parent).getComputedStyle(parent);
|
|
18
|
-
const parentGap = getGapValue(parentStyles);
|
|
19
|
-
const siblings = Array.from(parent.children).filter(
|
|
20
|
-
(child) => {
|
|
21
|
-
if (!isHTMLElement(child) || child === element) {
|
|
22
|
-
return false;
|
|
23
|
-
}
|
|
24
|
-
return ownerWindow(child).getComputedStyle(child).display !== "none";
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
const siblingWidth = siblings.reduce((width, sibling) => {
|
|
28
|
-
return width + getMeasuredWidth(sibling);
|
|
29
|
-
}, 0);
|
|
30
|
-
const gapCount = siblings.length > 0 ? siblings.length : 0;
|
|
31
|
-
const availableWidth = Math.max(
|
|
32
|
-
0,
|
|
33
|
-
parentWidth - siblingWidth - gapCount * parentGap
|
|
34
|
-
);
|
|
35
|
-
return availableWidth;
|
|
36
|
-
}
|
|
37
|
-
function isSelectedValueHidden(selected, hiddenValues) {
|
|
38
|
-
return selected !== void 0 && hiddenValues.includes(selected);
|
|
39
|
-
}
|
|
40
|
-
function getPinnedSelectionValue(selected, selectedIsHidden, pinnedSelectionRef) {
|
|
41
|
-
return selectedIsHidden ? selected : pinnedSelectionRef.current;
|
|
42
|
-
}
|
|
43
|
-
function useOverflow({
|
|
44
|
-
container,
|
|
45
|
-
overflowButton,
|
|
46
|
-
tabs,
|
|
47
|
-
selected,
|
|
48
|
-
menuOpen
|
|
49
|
-
}) {
|
|
50
|
-
const orderedValues = useMemo(() => tabs.map((tab) => tab.value), [tabs]);
|
|
51
|
-
const measurementInputKey = useMemo(() => {
|
|
52
|
-
return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join("\0");
|
|
53
|
-
}, [tabs]);
|
|
54
|
-
const [visibleCount, setVisibleCount] = useState(0);
|
|
55
|
-
const [isMeasuring, setIsMeasuring] = useState(true);
|
|
56
|
-
const [measureRetryVersion, setMeasureRetryVersion] = useState(0);
|
|
57
|
-
const pinnedSelectionRef = useRef(selected);
|
|
58
|
-
const previousOverflowButtonWidthRef = useRef(0);
|
|
59
|
-
const previousMeasurementInputKeyRef = useRef(measurementInputKey);
|
|
60
|
-
const previousMenuOpenRef = useRef(menuOpen);
|
|
61
|
-
const measureRetryFrameRef = useRef(null);
|
|
62
|
-
const measureRetryCountRef = useRef(0);
|
|
63
|
-
const baseHiddenValues = orderedValues.slice(visibleCount);
|
|
64
|
-
const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);
|
|
65
|
-
const pinnedValue = getPinnedSelectionValue(
|
|
66
|
-
selected,
|
|
67
|
-
selectedIsHidden,
|
|
68
|
-
pinnedSelectionRef
|
|
69
|
-
);
|
|
70
|
-
const getCurrentPinnedValue = useCallback(() => {
|
|
71
|
-
return getPinnedSelectionValue(
|
|
72
|
-
selected,
|
|
73
|
-
selectedIsHidden,
|
|
74
|
-
pinnedSelectionRef
|
|
75
|
-
);
|
|
76
|
-
}, [selected, selectedIsHidden]);
|
|
77
|
-
const markMeasurementStale = useCallback(() => {
|
|
78
|
-
setIsMeasuring(true);
|
|
79
|
-
}, []);
|
|
80
|
-
const measureVisibleCount = useCallback(
|
|
81
|
-
(pinnedValue2) => {
|
|
82
|
-
const element = container.current;
|
|
83
|
-
if (!element) {
|
|
84
|
-
return null;
|
|
85
|
-
}
|
|
86
|
-
const maxWidth = getAvailableWidth(element);
|
|
87
|
-
const styles = ownerWindow(element).getComputedStyle(element);
|
|
88
|
-
const gap = getGapValue(styles);
|
|
89
|
-
const overflowWidth = overflowButton.current ? overflowButton.current.offsetWidth + gap : 0;
|
|
90
|
-
const measuredTabs = tabs.map((tab) => ({
|
|
91
|
-
value: tab.value,
|
|
92
|
-
width: getTabWidth(tab)
|
|
93
|
-
}));
|
|
94
|
-
return calculateVisibleCount({
|
|
95
|
-
gap,
|
|
96
|
-
maxWidth,
|
|
97
|
-
overflowWidth,
|
|
98
|
-
pinnedValue: pinnedValue2,
|
|
99
|
-
tabs: measuredTabs
|
|
100
|
-
});
|
|
101
|
-
},
|
|
102
|
-
[container, overflowButton, tabs]
|
|
103
|
-
);
|
|
104
|
-
const clearMeasureRetry = useCallback(() => {
|
|
105
|
-
const element = container.current;
|
|
106
|
-
const frame = measureRetryFrameRef.current;
|
|
107
|
-
if (element && frame != null) {
|
|
108
|
-
ownerWindow(element).cancelAnimationFrame(frame);
|
|
109
|
-
}
|
|
110
|
-
measureRetryFrameRef.current = null;
|
|
111
|
-
measureRetryCountRef.current = 0;
|
|
112
|
-
}, [container]);
|
|
113
|
-
useEffect(() => {
|
|
114
|
-
return clearMeasureRetry;
|
|
115
|
-
}, [clearMeasureRetry]);
|
|
116
|
-
useIsomorphicLayoutEffect(() => {
|
|
117
|
-
if (selected !== void 0 && selectedIsHidden) {
|
|
118
|
-
pinnedSelectionRef.current = selected;
|
|
119
|
-
const nextVisibleCount = measureVisibleCount(selected);
|
|
120
|
-
if (nextVisibleCount == null) {
|
|
121
|
-
markMeasurementStale();
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
if (nextVisibleCount !== visibleCount) {
|
|
125
|
-
setVisibleCount(nextVisibleCount);
|
|
126
|
-
}
|
|
127
|
-
if (isMeasuring) {
|
|
128
|
-
setIsMeasuring(false);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}, [
|
|
132
|
-
isMeasuring,
|
|
133
|
-
markMeasurementStale,
|
|
134
|
-
measureVisibleCount,
|
|
135
|
-
selected,
|
|
136
|
-
selectedIsHidden,
|
|
137
|
-
visibleCount
|
|
138
|
-
]);
|
|
139
|
-
useEffect(() => {
|
|
140
|
-
const element = container.current;
|
|
141
|
-
if (!element || menuOpen || isMeasuring) {
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
144
|
-
const observedElements = [element];
|
|
145
|
-
const parent = element.parentElement;
|
|
146
|
-
if (parent) {
|
|
147
|
-
observedElements.push(parent);
|
|
148
|
-
for (const child of Array.from(parent.children)) {
|
|
149
|
-
if (isHTMLElement(child) && child !== element) {
|
|
150
|
-
observedElements.push(child);
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
const widths = seedWidthMap(observedElements);
|
|
155
|
-
const resizeObserverCtor = ownerWindow(element).ResizeObserver;
|
|
156
|
-
if (!resizeObserverCtor) {
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
const resizeObserver = new resizeObserverCtor(
|
|
160
|
-
(entries) => {
|
|
161
|
-
for (const entry of entries) {
|
|
162
|
-
if (!isHTMLElement(entry.target)) {
|
|
163
|
-
continue;
|
|
164
|
-
}
|
|
165
|
-
const nextWidth = entry.contentRect.width;
|
|
166
|
-
if (updateWidthMap(widths, entry.target, nextWidth)) {
|
|
167
|
-
const nextVisibleCount = measureVisibleCount(
|
|
168
|
-
getCurrentPinnedValue()
|
|
169
|
-
);
|
|
170
|
-
if (nextVisibleCount != null && nextVisibleCount === visibleCount) {
|
|
171
|
-
continue;
|
|
172
|
-
}
|
|
173
|
-
markMeasurementStale();
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
);
|
|
179
|
-
for (const observedElement of observedElements) {
|
|
180
|
-
resizeObserver.observe(observedElement);
|
|
181
|
-
}
|
|
182
|
-
return () => {
|
|
183
|
-
resizeObserver.disconnect();
|
|
184
|
-
};
|
|
185
|
-
}, [
|
|
186
|
-
container,
|
|
187
|
-
getCurrentPinnedValue,
|
|
188
|
-
isMeasuring,
|
|
189
|
-
markMeasurementStale,
|
|
190
|
-
measureVisibleCount,
|
|
191
|
-
menuOpen,
|
|
192
|
-
visibleCount
|
|
193
|
-
]);
|
|
194
|
-
useIsomorphicLayoutEffect(() => {
|
|
195
|
-
if (previousMenuOpenRef.current && !menuOpen) {
|
|
196
|
-
markMeasurementStale();
|
|
197
|
-
}
|
|
198
|
-
previousMenuOpenRef.current = menuOpen;
|
|
199
|
-
}, [markMeasurementStale, menuOpen]);
|
|
200
|
-
useIsomorphicLayoutEffect(() => {
|
|
201
|
-
var _a;
|
|
202
|
-
const nextOverflowButtonWidth = ((_a = overflowButton.current) == null ? void 0 : _a.offsetWidth) ?? 0;
|
|
203
|
-
if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;
|
|
207
|
-
if (visibleCount < tabs.length) {
|
|
208
|
-
markMeasurementStale();
|
|
209
|
-
}
|
|
210
|
-
});
|
|
211
|
-
useIsomorphicLayoutEffect(() => {
|
|
212
|
-
if (previousMeasurementInputKeyRef.current !== measurementInputKey) {
|
|
213
|
-
previousMeasurementInputKeyRef.current = measurementInputKey;
|
|
214
|
-
markMeasurementStale();
|
|
215
|
-
}
|
|
216
|
-
}, [markMeasurementStale, measurementInputKey]);
|
|
217
|
-
useIsomorphicLayoutEffect(() => {
|
|
218
|
-
if (!isMeasuring || menuOpen) {
|
|
219
|
-
return;
|
|
220
|
-
}
|
|
221
|
-
const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());
|
|
222
|
-
if (nextVisibleCount == null) {
|
|
223
|
-
if (measureRetryFrameRef.current != null) {
|
|
224
|
-
return;
|
|
225
|
-
}
|
|
226
|
-
const element = container.current;
|
|
227
|
-
if (!element || getMeasuredWidth(element) <= MIN_TRUSTED_TAB_WIDTH) {
|
|
228
|
-
measureRetryCountRef.current = 0;
|
|
229
|
-
return;
|
|
230
|
-
}
|
|
231
|
-
if (measureRetryCountRef.current >= 5) {
|
|
232
|
-
return;
|
|
233
|
-
}
|
|
234
|
-
measureRetryCountRef.current += 1;
|
|
235
|
-
measureRetryFrameRef.current = ownerWindow(element).requestAnimationFrame(
|
|
236
|
-
() => {
|
|
237
|
-
measureRetryFrameRef.current = null;
|
|
238
|
-
setMeasureRetryVersion((currentVersion) => currentVersion + 1);
|
|
239
|
-
}
|
|
240
|
-
);
|
|
241
|
-
return;
|
|
242
|
-
}
|
|
243
|
-
clearMeasureRetry();
|
|
244
|
-
setVisibleCount(nextVisibleCount);
|
|
245
|
-
setIsMeasuring(false);
|
|
246
|
-
}, [
|
|
247
|
-
clearMeasureRetry,
|
|
248
|
-
container.current,
|
|
249
|
-
getCurrentPinnedValue,
|
|
250
|
-
isMeasuring,
|
|
251
|
-
measureRetryVersion,
|
|
252
|
-
measureVisibleCount,
|
|
253
|
-
menuOpen
|
|
254
|
-
]);
|
|
255
|
-
const { visibleValues, hiddenValues } = partitionVisibleValues(
|
|
256
|
-
orderedValues,
|
|
257
|
-
visibleCount,
|
|
258
|
-
pinnedValue
|
|
259
|
-
);
|
|
260
|
-
return [visibleValues, hiddenValues, isMeasuring];
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
export { useOverflow };
|
|
264
|
-
//# sourceMappingURL=useOverflow.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflow.js","sources":["../src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import { ownerWindow, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n type MutableRefObject,\n type RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { isHTMLElement } from \"../domUtils\";\nimport type { RenderedTab } from \"../TabsNextContext\";\nimport {\n getGapValue,\n getMeasuredWidth,\n seedWidthMap,\n updateWidthMap,\n} from \"../widthMeasurement\";\nimport {\n calculateVisibleCount,\n MIN_TRUSTED_TAB_WIDTH,\n partitionVisibleValues,\n} from \"./overflowMath\";\n\ninterface UseOverflowProps {\n container: RefObject<HTMLElement>;\n selected?: string;\n tabs: RenderedTab[];\n overflowButton: RefObject<HTMLButtonElement>;\n menuOpen: boolean;\n}\n\nfunction getTabWidth(tab: RenderedTab) {\n const width = tab.width || getMeasuredWidth(tab.root);\n return width > MIN_TRUSTED_TAB_WIDTH ? width : null;\n}\n\nfunction getAvailableWidth(element: HTMLElement) {\n const parent = element.parentElement;\n if (!parent) {\n return getMeasuredWidth(element);\n }\n\n const parentWidth = getMeasuredWidth(parent);\n const parentStyles = ownerWindow(parent).getComputedStyle(parent);\n const parentGap = getGapValue(parentStyles);\n const siblings = Array.from(parent.children).filter(\n (child): child is HTMLElement => {\n if (!isHTMLElement(child) || child === element) {\n return false;\n }\n\n return ownerWindow(child).getComputedStyle(child).display !== \"none\";\n },\n );\n\n const siblingWidth = siblings.reduce((width, sibling) => {\n return width + getMeasuredWidth(sibling);\n }, 0);\n const gapCount = siblings.length > 0 ? siblings.length : 0;\n const availableWidth = Math.max(\n 0,\n parentWidth - siblingWidth - gapCount * parentGap,\n );\n return availableWidth;\n}\n\nfunction isSelectedValueHidden(\n selected: string | undefined,\n hiddenValues: string[],\n) {\n return selected !== undefined && hiddenValues.includes(selected);\n}\n\nfunction getPinnedSelectionValue(\n selected: string | undefined,\n selectedIsHidden: boolean,\n pinnedSelectionRef: MutableRefObject<string | undefined>,\n) {\n return selectedIsHidden ? selected : pinnedSelectionRef.current;\n}\n\nexport function useOverflow({\n container,\n overflowButton,\n tabs,\n selected,\n menuOpen,\n}: UseOverflowProps) {\n const orderedValues = useMemo(() => tabs.map((tab) => tab.value), [tabs]);\n const measurementInputKey = useMemo(() => {\n return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join(\"\\0\");\n }, [tabs]);\n const [visibleCount, setVisibleCount] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [measureRetryVersion, setMeasureRetryVersion] = useState(0);\n const pinnedSelectionRef = useRef(selected);\n const previousOverflowButtonWidthRef = useRef(0);\n const previousMeasurementInputKeyRef = useRef(measurementInputKey);\n const previousMenuOpenRef = useRef(menuOpen);\n const measureRetryFrameRef = useRef<number | null>(null);\n const measureRetryCountRef = useRef(0);\n const baseHiddenValues = orderedValues.slice(visibleCount);\n const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);\n const pinnedValue = getPinnedSelectionValue(\n selected,\n selectedIsHidden,\n pinnedSelectionRef,\n );\n const getCurrentPinnedValue = useCallback(() => {\n return getPinnedSelectionValue(\n selected,\n selectedIsHidden,\n pinnedSelectionRef,\n );\n }, [selected, selectedIsHidden]);\n const markMeasurementStale = useCallback(() => {\n setIsMeasuring(true);\n }, []);\n\n const measureVisibleCount = useCallback(\n (pinnedValue?: string) => {\n const element = container.current;\n if (!element) {\n return null;\n }\n\n const maxWidth = getAvailableWidth(element);\n const styles = ownerWindow(element).getComputedStyle(element);\n const gap = getGapValue(styles);\n const overflowWidth = overflowButton.current\n ? overflowButton.current.offsetWidth + gap\n : 0;\n const measuredTabs = tabs.map((tab) => ({\n value: tab.value,\n width: getTabWidth(tab),\n }));\n\n return calculateVisibleCount({\n gap,\n maxWidth,\n overflowWidth,\n pinnedValue,\n tabs: measuredTabs,\n });\n },\n [container, overflowButton, tabs],\n );\n const clearMeasureRetry = useCallback(() => {\n const element = container.current;\n const frame = measureRetryFrameRef.current;\n\n if (element && frame != null) {\n ownerWindow(element).cancelAnimationFrame(frame);\n }\n\n measureRetryFrameRef.current = null;\n measureRetryCountRef.current = 0;\n }, [container]);\n\n useEffect(() => {\n return clearMeasureRetry;\n }, [clearMeasureRetry]);\n\n useIsomorphicLayoutEffect(() => {\n if (selected !== undefined && selectedIsHidden) {\n pinnedSelectionRef.current = selected;\n const nextVisibleCount = measureVisibleCount(selected);\n if (nextVisibleCount == null) {\n markMeasurementStale();\n return;\n }\n if (nextVisibleCount !== visibleCount) {\n setVisibleCount(nextVisibleCount);\n }\n if (isMeasuring) {\n setIsMeasuring(false);\n }\n }\n }, [\n isMeasuring,\n markMeasurementStale,\n measureVisibleCount,\n selected,\n selectedIsHidden,\n visibleCount,\n ]);\n\n useEffect(() => {\n const element = container.current;\n if (!element || menuOpen || isMeasuring) {\n return;\n }\n\n const observedElements = [element];\n const parent = element.parentElement;\n if (parent) {\n observedElements.push(parent);\n for (const child of Array.from(parent.children)) {\n if (isHTMLElement(child) && child !== element) {\n observedElements.push(child);\n }\n }\n }\n\n const widths = seedWidthMap(observedElements);\n const resizeObserverCtor = ownerWindow(element).ResizeObserver;\n if (!resizeObserverCtor) {\n return;\n }\n\n const resizeObserver = new resizeObserverCtor(\n (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n if (!isHTMLElement(entry.target)) {\n continue;\n }\n\n const nextWidth = entry.contentRect.width;\n if (updateWidthMap(widths, entry.target, nextWidth)) {\n const nextVisibleCount = measureVisibleCount(\n getCurrentPinnedValue(),\n );\n\n if (nextVisibleCount != null && nextVisibleCount === visibleCount) {\n continue;\n }\n\n markMeasurementStale();\n return;\n }\n }\n },\n );\n\n for (const observedElement of observedElements) {\n resizeObserver.observe(observedElement);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n container,\n getCurrentPinnedValue,\n isMeasuring,\n markMeasurementStale,\n measureVisibleCount,\n menuOpen,\n visibleCount,\n ]);\n\n useIsomorphicLayoutEffect(() => {\n if (previousMenuOpenRef.current && !menuOpen) {\n markMeasurementStale();\n }\n\n previousMenuOpenRef.current = menuOpen;\n }, [markMeasurementStale, menuOpen]);\n\n useIsomorphicLayoutEffect(() => {\n const nextOverflowButtonWidth = overflowButton.current?.offsetWidth ?? 0;\n if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {\n return;\n }\n\n previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;\n if (visibleCount < tabs.length) {\n markMeasurementStale();\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n if (previousMeasurementInputKeyRef.current !== measurementInputKey) {\n previousMeasurementInputKeyRef.current = measurementInputKey;\n markMeasurementStale();\n }\n }, [markMeasurementStale, measurementInputKey]);\n\n useIsomorphicLayoutEffect(() => {\n // A content-only tab width update can briefly leave a tab without a\n // trustworthy measured width after it moves through the portal slots.\n // Retry on the next frame instead of leaving overflow stuck measuring.\n void measureRetryVersion;\n\n if (!isMeasuring || menuOpen) {\n return;\n }\n\n const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());\n\n if (nextVisibleCount == null) {\n if (measureRetryFrameRef.current != null) {\n return;\n }\n\n const element = container.current;\n if (!element || getMeasuredWidth(element) <= MIN_TRUSTED_TAB_WIDTH) {\n measureRetryCountRef.current = 0;\n return;\n }\n\n if (measureRetryCountRef.current >= 5) {\n return;\n }\n\n measureRetryCountRef.current += 1;\n measureRetryFrameRef.current = ownerWindow(element).requestAnimationFrame(\n () => {\n measureRetryFrameRef.current = null;\n setMeasureRetryVersion((currentVersion) => currentVersion + 1);\n },\n );\n return;\n }\n\n clearMeasureRetry();\n\n setVisibleCount(nextVisibleCount);\n setIsMeasuring(false);\n }, [\n clearMeasureRetry,\n container.current,\n getCurrentPinnedValue,\n isMeasuring,\n measureRetryVersion,\n measureVisibleCount,\n menuOpen,\n ]);\n\n const { visibleValues, hiddenValues } = partitionVisibleValues(\n orderedValues,\n visibleCount,\n pinnedValue,\n );\n\n return [visibleValues, hiddenValues, isMeasuring] as const;\n}\n"],"names":["pinnedValue"],"mappings":"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"}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect, useMemo, useCallback } from 'react';
|
|
2
|
-
|
|
3
|
-
function getOverflowStartIndex(hiddenValues, currentValue, fallbackValue) {
|
|
4
|
-
const currentIndex = hiddenValues.indexOf(currentValue);
|
|
5
|
-
const fallbackIndex = fallbackValue != null ? hiddenValues.indexOf(fallbackValue) : 0;
|
|
6
|
-
return currentIndex >= 0 ? currentIndex : Math.max(0, fallbackIndex);
|
|
7
|
-
}
|
|
8
|
-
function useOverflowLayoutState({
|
|
9
|
-
hiddenValues,
|
|
10
|
-
menuOpen,
|
|
11
|
-
overflowMenuOpen,
|
|
12
|
-
visibleValues
|
|
13
|
-
}) {
|
|
14
|
-
const [requestedOverflowActiveValue, setRequestedOverflowActiveValue] = useState(null);
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
if (!overflowMenuOpen) {
|
|
17
|
-
setRequestedOverflowActiveValue(null);
|
|
18
|
-
}
|
|
19
|
-
}, [overflowMenuOpen]);
|
|
20
|
-
const resolvedOverflowActiveValue = useMemo(() => {
|
|
21
|
-
if (!overflowMenuOpen) {
|
|
22
|
-
return null;
|
|
23
|
-
}
|
|
24
|
-
if (requestedOverflowActiveValue && hiddenValues.includes(requestedOverflowActiveValue)) {
|
|
25
|
-
return requestedOverflowActiveValue;
|
|
26
|
-
}
|
|
27
|
-
return hiddenValues[0] ?? null;
|
|
28
|
-
}, [hiddenValues, overflowMenuOpen, requestedOverflowActiveValue]);
|
|
29
|
-
const hiddenValueSet = useMemo(() => new Set(hiddenValues), [hiddenValues]);
|
|
30
|
-
const visibleValueSet = useMemo(
|
|
31
|
-
() => new Set(visibleValues),
|
|
32
|
-
[visibleValues]
|
|
33
|
-
);
|
|
34
|
-
const getLocation = useCallback(
|
|
35
|
-
(value) => {
|
|
36
|
-
if (visibleValueSet.has(value)) {
|
|
37
|
-
return "main";
|
|
38
|
-
}
|
|
39
|
-
if (menuOpen && hiddenValueSet.has(value)) {
|
|
40
|
-
return "overflow";
|
|
41
|
-
}
|
|
42
|
-
return "hidden";
|
|
43
|
-
},
|
|
44
|
-
[hiddenValueSet, menuOpen, visibleValueSet]
|
|
45
|
-
);
|
|
46
|
-
const moveOverflowFocus = useCallback(
|
|
47
|
-
(key, value) => {
|
|
48
|
-
if (hiddenValues.length < 1) {
|
|
49
|
-
return false;
|
|
50
|
-
}
|
|
51
|
-
const startIndex = getOverflowStartIndex(
|
|
52
|
-
hiddenValues,
|
|
53
|
-
value,
|
|
54
|
-
resolvedOverflowActiveValue
|
|
55
|
-
);
|
|
56
|
-
const lastIndex = hiddenValues.length - 1;
|
|
57
|
-
let nextIndex = startIndex;
|
|
58
|
-
switch (key) {
|
|
59
|
-
case "ArrowDown":
|
|
60
|
-
nextIndex = startIndex >= lastIndex ? 0 : startIndex + 1;
|
|
61
|
-
break;
|
|
62
|
-
case "ArrowUp":
|
|
63
|
-
nextIndex = startIndex <= 0 ? lastIndex : startIndex - 1;
|
|
64
|
-
break;
|
|
65
|
-
case "Home":
|
|
66
|
-
nextIndex = 0;
|
|
67
|
-
break;
|
|
68
|
-
case "End":
|
|
69
|
-
nextIndex = lastIndex;
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
const nextValue = hiddenValues[nextIndex];
|
|
73
|
-
if (!nextValue) {
|
|
74
|
-
return false;
|
|
75
|
-
}
|
|
76
|
-
setRequestedOverflowActiveValue(nextValue);
|
|
77
|
-
return true;
|
|
78
|
-
},
|
|
79
|
-
[hiddenValues, resolvedOverflowActiveValue]
|
|
80
|
-
);
|
|
81
|
-
const tabListLayoutContext = useMemo(
|
|
82
|
-
() => ({
|
|
83
|
-
getLocation,
|
|
84
|
-
overflowActiveValue: resolvedOverflowActiveValue,
|
|
85
|
-
setOverflowActiveValue: setRequestedOverflowActiveValue,
|
|
86
|
-
moveOverflowFocus
|
|
87
|
-
}),
|
|
88
|
-
[getLocation, moveOverflowFocus, resolvedOverflowActiveValue]
|
|
89
|
-
);
|
|
90
|
-
return {
|
|
91
|
-
resolvedOverflowActiveValue,
|
|
92
|
-
tabListLayoutContext
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
export { useOverflowLayoutState };
|
|
97
|
-
//# sourceMappingURL=useOverflowLayoutState.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflowLayoutState.js","sources":["../src/tabs-next/hooks/useOverflowLayoutState.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type {\n TabListLayoutContextValue,\n TabSlotLocation,\n} from \"../TabListLayoutContext\";\n\nfunction getOverflowStartIndex(\n hiddenValues: string[],\n currentValue: string,\n fallbackValue: string | null,\n) {\n const currentIndex = hiddenValues.indexOf(currentValue);\n const fallbackIndex =\n fallbackValue != null ? hiddenValues.indexOf(fallbackValue) : 0;\n\n return currentIndex >= 0 ? currentIndex : Math.max(0, fallbackIndex);\n}\n\ninterface UseOverflowLayoutStateArgs {\n hiddenValues: string[];\n menuOpen: boolean;\n overflowMenuOpen: boolean;\n visibleValues: string[];\n}\n\ninterface UseOverflowLayoutStateResult {\n resolvedOverflowActiveValue: string | null;\n tabListLayoutContext: TabListLayoutContextValue;\n}\n\nexport function useOverflowLayoutState({\n hiddenValues,\n menuOpen,\n overflowMenuOpen,\n visibleValues,\n}: UseOverflowLayoutStateArgs): UseOverflowLayoutStateResult {\n const [requestedOverflowActiveValue, setRequestedOverflowActiveValue] =\n useState<string | null>(null);\n\n useEffect(() => {\n if (!overflowMenuOpen) {\n setRequestedOverflowActiveValue(null);\n }\n }, [overflowMenuOpen]);\n\n const resolvedOverflowActiveValue = useMemo(() => {\n if (!overflowMenuOpen) {\n return null;\n }\n\n if (\n requestedOverflowActiveValue &&\n hiddenValues.includes(requestedOverflowActiveValue)\n ) {\n return requestedOverflowActiveValue;\n }\n\n return hiddenValues[0] ?? null;\n }, [hiddenValues, overflowMenuOpen, requestedOverflowActiveValue]);\n\n const hiddenValueSet = useMemo(() => new Set(hiddenValues), [hiddenValues]);\n const visibleValueSet = useMemo(\n () => new Set(visibleValues),\n [visibleValues],\n );\n\n const getLocation = useCallback(\n (value: string): TabSlotLocation => {\n if (visibleValueSet.has(value)) {\n return \"main\";\n }\n\n if (menuOpen && hiddenValueSet.has(value)) {\n return \"overflow\";\n }\n\n return \"hidden\";\n },\n [hiddenValueSet, menuOpen, visibleValueSet],\n );\n\n const moveOverflowFocus = useCallback(\n (key: \"ArrowDown\" | \"ArrowUp\" | \"Home\" | \"End\", value: string) => {\n if (hiddenValues.length < 1) {\n return false;\n }\n\n const startIndex = getOverflowStartIndex(\n hiddenValues,\n value,\n resolvedOverflowActiveValue,\n );\n const lastIndex = hiddenValues.length - 1;\n let nextIndex = startIndex;\n\n switch (key) {\n case \"ArrowDown\":\n nextIndex = startIndex >= lastIndex ? 0 : startIndex + 1;\n break;\n case \"ArrowUp\":\n nextIndex = startIndex <= 0 ? lastIndex : startIndex - 1;\n break;\n case \"Home\":\n nextIndex = 0;\n break;\n case \"End\":\n nextIndex = lastIndex;\n break;\n }\n\n const nextValue = hiddenValues[nextIndex];\n if (!nextValue) {\n return false;\n }\n\n setRequestedOverflowActiveValue(nextValue);\n return true;\n },\n [hiddenValues, resolvedOverflowActiveValue],\n );\n\n const tabListLayoutContext = useMemo(\n () => ({\n getLocation,\n overflowActiveValue: resolvedOverflowActiveValue,\n setOverflowActiveValue: setRequestedOverflowActiveValue,\n moveOverflowFocus,\n }),\n [getLocation, moveOverflowFocus, resolvedOverflowActiveValue],\n );\n\n return {\n resolvedOverflowActiveValue,\n tabListLayoutContext,\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { usePrevious, useIsomorphicLayoutEffect } from '@salt-ds/core';
|
|
2
|
-
import { useRef, useCallback, useEffect } from 'react';
|
|
3
|
-
|
|
4
|
-
function useOverflowSelectionState({
|
|
5
|
-
commitSelection,
|
|
6
|
-
menuOpen,
|
|
7
|
-
selected,
|
|
8
|
-
setMenuOpen
|
|
9
|
-
}) {
|
|
10
|
-
const previousSelected = usePrevious(selected, [selected]);
|
|
11
|
-
const selectionFromOverflowValueRef = useRef(null);
|
|
12
|
-
const pendingOverflowSelectionRef = useRef(
|
|
13
|
-
null
|
|
14
|
-
);
|
|
15
|
-
const setSelected = useCallback(
|
|
16
|
-
(event, value, source = "main") => {
|
|
17
|
-
const selectedFromOverflow = source === "overflow";
|
|
18
|
-
selectionFromOverflowValueRef.current = selectedFromOverflow ? value : null;
|
|
19
|
-
if (selectedFromOverflow) {
|
|
20
|
-
pendingOverflowSelectionRef.current = { event, value };
|
|
21
|
-
setMenuOpen(false);
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
pendingOverflowSelectionRef.current = null;
|
|
25
|
-
setMenuOpen(false);
|
|
26
|
-
commitSelection(event, value);
|
|
27
|
-
},
|
|
28
|
-
[commitSelection, setMenuOpen]
|
|
29
|
-
);
|
|
30
|
-
useIsomorphicLayoutEffect(() => {
|
|
31
|
-
if (menuOpen) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
const pendingSelection = pendingOverflowSelectionRef.current;
|
|
35
|
-
if (!pendingSelection) {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
pendingOverflowSelectionRef.current = null;
|
|
39
|
-
commitSelection(pendingSelection.event, pendingSelection.value);
|
|
40
|
-
}, [commitSelection, menuOpen]);
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
const selectedFromOverflow = selectionFromOverflowValueRef.current;
|
|
43
|
-
if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
if (selected === selectedFromOverflow && selected !== previousSelected) {
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
selectionFromOverflowValueRef.current = null;
|
|
50
|
-
}, [previousSelected, selected]);
|
|
51
|
-
return {
|
|
52
|
-
selectionFromOverflowValueRef,
|
|
53
|
-
setSelected
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export { useOverflowSelectionState };
|
|
58
|
-
//# sourceMappingURL=useOverflowSelectionState.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflowSelectionState.js","sources":["../src/tabs-next/hooks/useOverflowSelectionState.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect, usePrevious } from \"@salt-ds/core\";\nimport {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\n\ninterface PendingOverflowSelection {\n event: SyntheticEvent | null;\n value: string;\n}\n\ninterface UseOverflowSelectionStateArgs {\n commitSelection: (event: SyntheticEvent | null, value: string) => void;\n menuOpen: boolean;\n selected?: string;\n setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\ninterface UseOverflowSelectionStateResult {\n selectionFromOverflowValueRef: MutableRefObject<string | null>;\n setSelected: (\n event: SyntheticEvent | null,\n value: string,\n source?: \"main\" | \"overflow\",\n ) => void;\n}\n\nexport function useOverflowSelectionState({\n commitSelection,\n menuOpen,\n selected,\n setMenuOpen,\n}: UseOverflowSelectionStateArgs): UseOverflowSelectionStateResult {\n const previousSelected = usePrevious(selected, [selected]);\n const selectionFromOverflowValueRef = useRef<string | null>(null);\n const pendingOverflowSelectionRef = useRef<PendingOverflowSelection | null>(\n null,\n );\n\n const setSelected = useCallback(\n (\n event: SyntheticEvent | null,\n value: string,\n source: \"main\" | \"overflow\" = \"main\",\n ) => {\n const selectedFromOverflow = source === \"overflow\";\n selectionFromOverflowValueRef.current = selectedFromOverflow\n ? value\n : null;\n\n if (selectedFromOverflow) {\n pendingOverflowSelectionRef.current = { event, value };\n setMenuOpen(false);\n return;\n }\n\n pendingOverflowSelectionRef.current = null;\n setMenuOpen(false);\n commitSelection(event, value);\n },\n [commitSelection, setMenuOpen],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (menuOpen) {\n return;\n }\n\n const pendingSelection = pendingOverflowSelectionRef.current;\n if (!pendingSelection) {\n return;\n }\n\n pendingOverflowSelectionRef.current = null;\n commitSelection(pendingSelection.event, pendingSelection.value);\n }, [commitSelection, menuOpen]);\n\n useEffect(() => {\n const selectedFromOverflow = selectionFromOverflowValueRef.current;\n if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {\n return;\n }\n\n if (selected === selectedFromOverflow && selected !== previousSelected) {\n return;\n }\n\n selectionFromOverflowValueRef.current = null;\n }, [previousSelected, selected]);\n\n return {\n selectionFromOverflowValueRef,\n setSelected,\n };\n}\n"],"names":[],"mappings":";;;AAgCO,SAAS,yBAAA,CAA0B;AAAA,EACxC,eAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAmE;AACjE,EAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,QAAA,EAAU,CAAC,QAAQ,CAAC,CAAA;AACzD,EAAA,MAAM,6BAAA,GAAgC,OAAsB,IAAI,CAAA;AAChE,EAAA,MAAM,2BAAA,GAA8B,MAAA;AAAA,IAClC;AAAA,GACF;AAEA,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CACE,KAAA,EACA,KAAA,EACA,MAAA,GAA8B,MAAA,KAC3B;AACH,MAAA,MAAM,uBAAuB,MAAA,KAAW,UAAA;AACxC,MAAA,6BAAA,CAA8B,OAAA,GAAU,uBACpC,KAAA,GACA,IAAA;AAEJ,MAAA,IAAI,oBAAA,EAAsB;AACxB,QAAA,2BAAA,CAA4B,OAAA,GAAU,EAAE,KAAA,EAAO,KAAA,EAAM;AACrD,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA;AAAA,MACF;AAEA,MAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,2BAAA,CAA4B,OAAA;AACrD,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,MAAA;AAAA,IACF;AAEA,IAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,IAAA,eAAA,CAAgB,gBAAA,CAAiB,KAAA,EAAO,gBAAA,CAAiB,KAAK,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,eAAA,EAAiB,QAAQ,CAAC,CAAA;AAE9B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,uBAAuB,6BAAA,CAA8B,OAAA;AAC3D,IAAA,IAAI,oBAAA,IAAwB,IAAA,IAAQ,2BAAA,CAA4B,OAAA,EAAS;AACvE,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,QAAA,KAAa,oBAAA,IAAwB,QAAA,KAAa,gBAAA,EAAkB;AACtE,MAAA;AAAA,IACF;AAEA,IAAA,6BAAA,CAA8B,OAAA,GAAU,IAAA;AAAA,EAC1C,CAAA,EAAG,CAAC,gBAAA,EAAkB,QAAQ,CAAC,CAAA;AAE/B,EAAA,OAAO;AAAA,IACL,6BAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { getIntrinsicMeasuredWidth } from '../widthMeasurement.js';
|
|
3
|
-
|
|
4
|
-
const MIN_TRUSTED_RENDERED_TAB_WIDTH = 0.5;
|
|
5
|
-
function isSecondaryMeasurementContext(element) {
|
|
6
|
-
return element.closest(".saltTabOverflow-list") || element.closest(".saltTabListNext-measureContainer");
|
|
7
|
-
}
|
|
8
|
-
function useRenderedTabWidth({
|
|
9
|
-
hostElement,
|
|
10
|
-
renderMode,
|
|
11
|
-
tabRootRef,
|
|
12
|
-
targetWindow,
|
|
13
|
-
updateRenderedTab,
|
|
14
|
-
value
|
|
15
|
-
}) {
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
if (!hostElement) {
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
|
-
const element = tabRootRef.current;
|
|
21
|
-
const resizeObserverCtor = targetWindow == null ? void 0 : targetWindow.ResizeObserver;
|
|
22
|
-
const mutationObserverCtor = targetWindow == null ? void 0 : targetWindow.MutationObserver;
|
|
23
|
-
if (!element || !resizeObserverCtor) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
const updateWidth = (allowSecondaryMeasurementContext = false) => {
|
|
27
|
-
if (!element.isConnected) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
if (!allowSecondaryMeasurementContext && isSecondaryMeasurementContext(element)) {
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
const width = getIntrinsicMeasuredWidth(element);
|
|
34
|
-
if (width <= MIN_TRUSTED_RENDERED_TAB_WIDTH) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
updateRenderedTab(value, {
|
|
38
|
-
width
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
let animationFrameId = null;
|
|
42
|
-
const scheduleWidthUpdate = (allowSecondaryMeasurementContext = false) => {
|
|
43
|
-
if (!(targetWindow == null ? void 0 : targetWindow.requestAnimationFrame)) {
|
|
44
|
-
updateWidth(allowSecondaryMeasurementContext);
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
if (animationFrameId != null) {
|
|
48
|
-
targetWindow.cancelAnimationFrame(animationFrameId);
|
|
49
|
-
}
|
|
50
|
-
animationFrameId = targetWindow.requestAnimationFrame(() => {
|
|
51
|
-
animationFrameId = null;
|
|
52
|
-
updateWidth(allowSecondaryMeasurementContext);
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
if (renderMode === "portal") {
|
|
56
|
-
scheduleWidthUpdate(true);
|
|
57
|
-
} else {
|
|
58
|
-
updateWidth(true);
|
|
59
|
-
}
|
|
60
|
-
const resizeObserver = new resizeObserverCtor(() => {
|
|
61
|
-
updateWidth();
|
|
62
|
-
});
|
|
63
|
-
resizeObserver.observe(element);
|
|
64
|
-
const mutationObserver = mutationObserverCtor ? new mutationObserverCtor(() => {
|
|
65
|
-
scheduleWidthUpdate();
|
|
66
|
-
}) : null;
|
|
67
|
-
mutationObserver == null ? void 0 : mutationObserver.observe(element, {
|
|
68
|
-
childList: true,
|
|
69
|
-
characterData: true,
|
|
70
|
-
subtree: true
|
|
71
|
-
});
|
|
72
|
-
return () => {
|
|
73
|
-
if (animationFrameId != null && targetWindow) {
|
|
74
|
-
targetWindow.cancelAnimationFrame(animationFrameId);
|
|
75
|
-
}
|
|
76
|
-
mutationObserver == null ? void 0 : mutationObserver.disconnect();
|
|
77
|
-
resizeObserver.disconnect();
|
|
78
|
-
};
|
|
79
|
-
}, [
|
|
80
|
-
hostElement,
|
|
81
|
-
renderMode,
|
|
82
|
-
tabRootRef,
|
|
83
|
-
targetWindow,
|
|
84
|
-
updateRenderedTab,
|
|
85
|
-
value
|
|
86
|
-
]);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
export { useRenderedTabWidth };
|
|
90
|
-
//# sourceMappingURL=useRenderedTabWidth.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useRenderedTabWidth.js","sources":["../src/tabs-next/hooks/useRenderedTabWidth.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport type {\n TabsNextContextValue,\n TabsNextRenderMode,\n} from \"../TabsNextContext\";\nimport { getIntrinsicMeasuredWidth } from \"../widthMeasurement\";\n\nconst MIN_TRUSTED_RENDERED_TAB_WIDTH = 0.5;\n\ninterface UseRenderedTabWidthProps {\n hostElement: HTMLDivElement | null;\n renderMode: TabsNextRenderMode;\n tabRootRef: RefObject<HTMLDivElement>;\n targetWindow: Window | null | undefined;\n updateRenderedTab: TabsNextContextValue[\"updateRenderedTab\"];\n value: string;\n}\n\nfunction isSecondaryMeasurementContext(element: HTMLElement) {\n return (\n element.closest(\".saltTabOverflow-list\") ||\n element.closest(\".saltTabListNext-measureContainer\")\n );\n}\n\nexport function useRenderedTabWidth({\n hostElement,\n renderMode,\n tabRootRef,\n targetWindow,\n updateRenderedTab,\n value,\n}: UseRenderedTabWidthProps) {\n useEffect(() => {\n if (!hostElement) {\n return;\n }\n\n const element = tabRootRef.current;\n const resizeObserverCtor = (\n targetWindow as\n | (Window & { ResizeObserver?: typeof ResizeObserver })\n | undefined\n )?.ResizeObserver;\n const mutationObserverCtor = (\n targetWindow as\n | (Window & { MutationObserver?: typeof MutationObserver })\n | undefined\n )?.MutationObserver;\n if (!element || !resizeObserverCtor) {\n return;\n }\n\n const updateWidth = (allowSecondaryMeasurementContext = false) => {\n if (!element.isConnected) {\n return;\n }\n\n // Preserve the strip width while a tab is rendered in the overflow menu.\n // Overflow items stretch to the menu width, and hidden measurement tabs\n // can collapse to a different intrinsic size. Neither width is suitable\n // for deciding whether the tab fits back in the main strip once the tab\n // is already established. A one-time seeded width is still useful for\n // newly mounted tabs before they have ever appeared in the main strip.\n if (\n !allowSecondaryMeasurementContext &&\n isSecondaryMeasurementContext(element)\n ) {\n return;\n }\n\n const width = getIntrinsicMeasuredWidth(element);\n if (width <= MIN_TRUSTED_RENDERED_TAB_WIDTH) {\n return;\n }\n\n updateRenderedTab(value, {\n width,\n });\n };\n\n let animationFrameId: number | null = null;\n const scheduleWidthUpdate = (allowSecondaryMeasurementContext = false) => {\n if (!targetWindow?.requestAnimationFrame) {\n updateWidth(allowSecondaryMeasurementContext);\n return;\n }\n\n if (animationFrameId != null) {\n targetWindow.cancelAnimationFrame(animationFrameId);\n }\n\n animationFrameId = targetWindow.requestAnimationFrame(() => {\n animationFrameId = null;\n updateWidth(allowSecondaryMeasurementContext);\n });\n };\n\n if (renderMode === \"portal\") {\n scheduleWidthUpdate(true);\n } else {\n updateWidth(true);\n }\n\n const resizeObserver = new resizeObserverCtor(() => {\n updateWidth();\n });\n\n resizeObserver.observe(element);\n const mutationObserver = mutationObserverCtor\n ? new mutationObserverCtor(() => {\n scheduleWidthUpdate();\n })\n : null;\n\n mutationObserver?.observe(element, {\n childList: true,\n characterData: true,\n subtree: true,\n });\n\n return () => {\n if (animationFrameId != null && targetWindow) {\n targetWindow.cancelAnimationFrame(animationFrameId);\n }\n mutationObserver?.disconnect();\n resizeObserver.disconnect();\n };\n }, [\n hostElement,\n renderMode,\n tabRootRef,\n targetWindow,\n updateRenderedTab,\n value,\n ]);\n}\n"],"names":[],"mappings":"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"}
|