@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
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef, type ReactNode } from "react";
|
|
2
|
+
export interface MegaMenuHeaderProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
+
/**
|
|
4
|
+
* The content of the mega menu header.
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const MegaMenuHeader: import("react").ForwardRefExoticComponent<MegaMenuHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type AnchorHTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
export interface MegaMenuItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
3
|
+
/**
|
|
4
|
+
* The content of the mega menu item.
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Href to be passed to the Link element.
|
|
9
|
+
*/
|
|
10
|
+
href?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const MegaMenuItem: import("react").ForwardRefExoticComponent<MegaMenuItemProps & import("react").RefAttributes<HTMLLIElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef, type ReactNode } from "react";
|
|
2
|
+
export interface MegaMenuItemContentProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
+
/**
|
|
4
|
+
* The content of Mega Menu Item.
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const MegaMenuItemContent: import("react").ForwardRefExoticComponent<MegaMenuItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
export interface MegaMenuPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/**
|
|
4
|
+
* The content of the mega menu panel.
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const MegaMenuPanel: import("react").ForwardRefExoticComponent<MegaMenuPanelProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
export interface MegaMenuSectionProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/**
|
|
4
|
+
* The content of the mega menu section.
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const MegaMenuSection: import("react").ForwardRefExoticComponent<MegaMenuSectionProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
export interface MegaMenuTriggerProps {
|
|
3
|
+
/**
|
|
4
|
+
* The trigger element for the mega menu, typically a `NavigationItem` or `Button`.
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare const MegaMenuTrigger: import("react").ForwardRefExoticComponent<MegaMenuTriggerProps & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export * from "./MegaMenu";
|
|
2
|
+
export * from "./MegaMenuContent";
|
|
3
|
+
export * from "./MegaMenuGroup";
|
|
4
|
+
export * from "./MegaMenuHeader";
|
|
5
|
+
export * from "./MegaMenuItem";
|
|
6
|
+
export * from "./MegaMenuItemContent";
|
|
7
|
+
export * from "./MegaMenuPanel";
|
|
8
|
+
export * from "./MegaMenuSection";
|
|
9
|
+
export * from "./MegaMenuTrigger";
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ElementProps, FloatingRootContext } from "@floating-ui/react";
|
|
2
|
+
export declare const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
|
|
3
|
+
export interface UseMegaMenuKeyboardProps {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the interaction is enabled.
|
|
6
|
+
* @default true
|
|
7
|
+
*/
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Floating-ui custom interaction hook for mega menu grid keyboard navigation.
|
|
12
|
+
*
|
|
13
|
+
* Returns `ElementProps` that get merged via `useInteractions`, handling
|
|
14
|
+
* keyboard events on both the reference (trigger) and floating (panel) elements.
|
|
15
|
+
*
|
|
16
|
+
* - **↑ / ↓** move within the current column.
|
|
17
|
+
* - **← / →** jump to the top of the previous / next column.
|
|
18
|
+
* - **Tab / Shift+Tab** move linearly through every item.
|
|
19
|
+
* - **Home / End** jump to the first / last item in the column.
|
|
20
|
+
* - **↑ from the first item** or **← from the first column** returns
|
|
21
|
+
* focus to the trigger.
|
|
22
|
+
* - **→ from the last column** closes the panel and moves focus to the
|
|
23
|
+
* next sibling trigger.
|
|
24
|
+
*/
|
|
25
|
+
export declare function useMegaMenuKeyboard(context: FloatingRootContext, props?: UseMegaMenuKeyboardProps): ElementProps;
|
|
26
|
+
/**
|
|
27
|
+
* Focus the first navigable item inside a mega menu panel.
|
|
28
|
+
* Retries with `requestAnimationFrame` if content has not yet rendered.
|
|
29
|
+
*/
|
|
30
|
+
export declare function focusFirstItem(panel: HTMLElement, attempt?: number): void;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { type ComponentPropsWithoutRef
|
|
1
|
+
import { type ComponentPropsWithoutRef } from "react";
|
|
2
2
|
export interface SidePanelTriggerProps extends ComponentPropsWithoutRef<"button"> {
|
|
3
|
-
children?: ReactNode;
|
|
4
3
|
}
|
|
5
4
|
export declare const SidePanelTrigger: import("react").ForwardRefExoticComponent<SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -43,6 +43,14 @@ export interface SidePanelContextValue {
|
|
|
43
43
|
* so that SidePanel and SidePanelContent can use it for aria-labelledby.
|
|
44
44
|
*/
|
|
45
45
|
setTitleId: Dispatch<SetStateAction<string | undefined>>;
|
|
46
|
+
/**
|
|
47
|
+
* Edge the panel is anchored to.
|
|
48
|
+
*/
|
|
49
|
+
position?: "right" | "left";
|
|
50
|
+
/**
|
|
51
|
+
* Registers the position from SidePanel back to the context.
|
|
52
|
+
*/
|
|
53
|
+
setPosition: Dispatch<SetStateAction<"right" | "left" | undefined>>;
|
|
46
54
|
}
|
|
47
55
|
export declare const SidePanelContext: import("react").Context<SidePanelContextValue>;
|
|
48
56
|
export declare function useSidePanelContext(): SidePanelContextValue;
|
|
@@ -8,10 +8,17 @@ export interface SidePanelValue {
|
|
|
8
8
|
*/
|
|
9
9
|
setOpen: (open: boolean) => void;
|
|
10
10
|
/**
|
|
11
|
-
* Props getter for a
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
11
|
+
* Props getter for a trigger element outside of `SidePanelTrigger`.
|
|
12
|
+
* Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),
|
|
13
|
+
* and an `onClick` that toggles the panel.
|
|
14
|
+
*
|
|
15
|
+
* Spread the result onto a Button to get full trigger behavior:
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Button {...getTriggerProps()}>Toggle panel</Button>
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* You can pass additional props which are merged in. If you provide your
|
|
21
|
+
* own `onClick`, it runs before the built-in toggle.
|
|
15
22
|
*
|
|
16
23
|
* For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and
|
|
17
24
|
* manage ARIA attributes yourself instead.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type Dispatch, type ReactNode, type SetStateAction, type SyntheticEvent } from "react";
|
|
1
|
+
import { type Dispatch, type ReactNode, type Ref, type RefObject, type SetStateAction, type SyntheticEvent } from "react";
|
|
2
2
|
import type { TreeModel, TreeNodeMeta } from "./useTree";
|
|
3
3
|
export interface TreeContextValue {
|
|
4
4
|
expandedState: Set<string>;
|
|
@@ -10,6 +10,8 @@ export interface TreeContextValue {
|
|
|
10
10
|
selectedSet: Set<string>;
|
|
11
11
|
/** Set selected state directly */
|
|
12
12
|
setSelectedState: Dispatch<SetStateAction<string[]>>;
|
|
13
|
+
/** Set selected state without expanding selection through hidden descendants */
|
|
14
|
+
setVisibleSelectionState: (selected: string[]) => void;
|
|
13
15
|
/** Select node */
|
|
14
16
|
select: (event: SyntheticEvent, value: string) => void;
|
|
15
17
|
/** Whether multiselect mode with checkboxes is enabled */
|
|
@@ -60,6 +62,10 @@ export interface TreeNodeContextValue {
|
|
|
60
62
|
disabled: boolean;
|
|
61
63
|
/** Node id for the li element */
|
|
62
64
|
id: string;
|
|
65
|
+
/** Ref for the li element rendered by TreeNodeTrigger */
|
|
66
|
+
nodeRef: RefObject<HTMLLIElement>;
|
|
67
|
+
/** Callback ref that connects TreeNode's forwarded ref to the li element */
|
|
68
|
+
setNodeRef: Ref<HTMLLIElement> | null;
|
|
63
69
|
/** Whether node is selected */
|
|
64
70
|
selected: boolean;
|
|
65
71
|
/** Whether node is in indeterminate state (partially selected children) */
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type ReactElement, type ReactNode } from "react";
|
|
2
|
+
export interface TreeNodeMeta {
|
|
3
|
+
value: string;
|
|
4
|
+
parentValue: string | undefined;
|
|
5
|
+
hasChildren: boolean;
|
|
6
|
+
disabled: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface TreeModel {
|
|
9
|
+
/** All nodes indexed by value */
|
|
10
|
+
nodes: Map<string, TreeNodeMeta>;
|
|
11
|
+
/** Ordered list of root node values */
|
|
12
|
+
rootValues: string[];
|
|
13
|
+
/** Maps parent value to ordered list of child values */
|
|
14
|
+
childrenOf: Map<string, string[]>;
|
|
15
|
+
}
|
|
16
|
+
interface TreeNodeElementProps {
|
|
17
|
+
value: string;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
children?: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export declare function isTreeNodeElement(child: ReactNode): child is ReactElement<TreeNodeElementProps>;
|
|
22
|
+
export declare function flattenTreeNodeChildren(children: ReactNode): ReactNode[];
|
|
23
|
+
export declare function buildTreeModel(children: ReactNode): TreeModel;
|
|
24
|
+
export {};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { type ReactNode, type SyntheticEvent } from "react";
|
|
2
|
+
import { type TreeModel, type TreeNodeMeta } from "./treeModel";
|
|
3
|
+
export type { TreeModel, TreeNodeMeta } from "./treeModel";
|
|
2
4
|
export interface UseTreeProps {
|
|
3
5
|
/**
|
|
4
6
|
* Default expanded nodes (uncontrolled)
|
|
@@ -37,20 +39,6 @@ export interface UseTreeProps {
|
|
|
37
39
|
*/
|
|
38
40
|
children?: ReactNode;
|
|
39
41
|
}
|
|
40
|
-
export interface TreeNodeMeta {
|
|
41
|
-
value: string;
|
|
42
|
-
parentValue: string | undefined;
|
|
43
|
-
hasChildren: boolean;
|
|
44
|
-
disabled: boolean;
|
|
45
|
-
}
|
|
46
|
-
export interface TreeModel {
|
|
47
|
-
/** All nodes indexed by value */
|
|
48
|
-
nodes: Map<string, TreeNodeMeta>;
|
|
49
|
-
/** Ordered list of root node values */
|
|
50
|
-
rootValues: string[];
|
|
51
|
-
/** Maps parent value to ordered list of child values */
|
|
52
|
-
childrenOf: Map<string, string[]>;
|
|
53
|
-
}
|
|
54
42
|
export declare function useTree(props: UseTreeProps): {
|
|
55
43
|
expandedArray: string[];
|
|
56
44
|
setExpandedArray: import("react").Dispatch<import("react").SetStateAction<string[]>>;
|
|
@@ -59,6 +47,7 @@ export declare function useTree(props: UseTreeProps): {
|
|
|
59
47
|
selectedState: string[];
|
|
60
48
|
selectedSet: Set<string>;
|
|
61
49
|
setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
|
|
50
|
+
setVisibleSelectionState: (selection: string[]) => void;
|
|
62
51
|
select: (event: SyntheticEvent, value: string) => void;
|
|
63
52
|
multiselect: boolean;
|
|
64
53
|
disabled: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.91",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@floating-ui/react": "^0.26.28",
|
|
24
|
-
"@salt-ds/core": "^1.
|
|
24
|
+
"@salt-ds/core": "^1.61.0",
|
|
25
25
|
"@salt-ds/date-components": "0.1.0",
|
|
26
26
|
"@salt-ds/icons": "^1.18.0",
|
|
27
27
|
"@salt-ds/styles": "0.3.0",
|
|
@@ -31,11 +31,9 @@
|
|
|
31
31
|
"clsx": "^2.0.0",
|
|
32
32
|
"compute-scroll-into-view": "^3.0.0",
|
|
33
33
|
"deepmerge": "^4.2.2",
|
|
34
|
-
"dom-accessibility-api": "^0.7.1",
|
|
35
34
|
"react-color": "^2.19.3",
|
|
36
35
|
"react-window": "^1.8.6",
|
|
37
36
|
"rifm": "^0.12.0",
|
|
38
|
-
"tabbable": "^6.0.0",
|
|
39
37
|
"tinycolor2": "^1.4.2"
|
|
40
38
|
},
|
|
41
39
|
"peerDependencies": {
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltRating {\n display: inline-flex;\n box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n height: var(--salt-size-base);\n padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n min-height: var(--salt-size-base);\n padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelBottom {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--salt-spacing-75);\n}\n\n.saltRating-labelRight {\n flex-direction: row;\n gap: var(--salt-spacing-150);\n}\n\n.saltRating-container {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-150);\n flex-wrap: nowrap;\n justify-content: flex-start;\n padding-top: var(--salt-spacing-fixed-100);\n padding-bottom: var(--salt-spacing-fixed-100);\n box-sizing: border-box;\n}\n\n.saltRating-label {\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n box-sizing: border-box;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=Rating.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Rating.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var Rating$1 = require('./Rating.css.js');
|
|
10
|
-
var RatingItem = require('./RatingItem.js');
|
|
11
|
-
|
|
12
|
-
const withBaseName = core.makePrefixer("saltRating");
|
|
13
|
-
const defaultGetLabel = (value) => `${value} Star${value > 1 ? "s" : ""}`;
|
|
14
|
-
const Rating = react.forwardRef(function Rating2({
|
|
15
|
-
value: valueProp,
|
|
16
|
-
defaultValue = 0,
|
|
17
|
-
name: nameProp,
|
|
18
|
-
onChange,
|
|
19
|
-
className,
|
|
20
|
-
readOnly: readOnlyProp,
|
|
21
|
-
disabled: disabledProp,
|
|
22
|
-
max = 5,
|
|
23
|
-
getLabel = defaultGetLabel,
|
|
24
|
-
getVisibleLabel,
|
|
25
|
-
labelPlacement = "right",
|
|
26
|
-
"aria-label": ariaLabel,
|
|
27
|
-
"aria-labelledby": ariaLabelledBy,
|
|
28
|
-
"aria-describedby": ariaDescribedBy,
|
|
29
|
-
...restProps
|
|
30
|
-
}, ref) {
|
|
31
|
-
const targetWindow = window.useWindow();
|
|
32
|
-
styles.useComponentCssInjection({
|
|
33
|
-
testId: "salt-rating",
|
|
34
|
-
css: Rating$1,
|
|
35
|
-
window: targetWindow
|
|
36
|
-
});
|
|
37
|
-
const {
|
|
38
|
-
disabled: formFieldDisabled,
|
|
39
|
-
readOnly: formFieldReadOnly,
|
|
40
|
-
a11yProps: {
|
|
41
|
-
"aria-describedby": formFieldDescribedBy,
|
|
42
|
-
"aria-labelledby": formFieldLabelledBy
|
|
43
|
-
} = {}
|
|
44
|
-
} = core.useFormFieldProps();
|
|
45
|
-
const disabled = formFieldDisabled || disabledProp;
|
|
46
|
-
const readOnly = formFieldReadOnly || readOnlyProp;
|
|
47
|
-
const [hoveredValue, setHoveredValue] = react.useState(0);
|
|
48
|
-
const [selected, setSelected] = core.useControlled({
|
|
49
|
-
controlled: valueProp,
|
|
50
|
-
default: defaultValue,
|
|
51
|
-
name: "Rating",
|
|
52
|
-
state: "value"
|
|
53
|
-
});
|
|
54
|
-
const name = core.useId(nameProp);
|
|
55
|
-
const handleMouseEnter = (event) => {
|
|
56
|
-
if (readOnly || disabled) return;
|
|
57
|
-
const itemValue = Number.parseInt(event.currentTarget.value, 10);
|
|
58
|
-
setHoveredValue(itemValue);
|
|
59
|
-
};
|
|
60
|
-
const handleChange = (event) => {
|
|
61
|
-
if (readOnly) {
|
|
62
|
-
event.preventDefault();
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
const itemValue = Number.parseInt(event.currentTarget.value, 10);
|
|
66
|
-
setSelected(itemValue);
|
|
67
|
-
onChange == null ? void 0 : onChange(event, itemValue);
|
|
68
|
-
};
|
|
69
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
70
|
-
"div",
|
|
71
|
-
{
|
|
72
|
-
ref,
|
|
73
|
-
className: clsx.clsx(
|
|
74
|
-
withBaseName(),
|
|
75
|
-
withBaseName(`label${core.capitalize(labelPlacement)}`),
|
|
76
|
-
className
|
|
77
|
-
),
|
|
78
|
-
...restProps,
|
|
79
|
-
children: [
|
|
80
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
-
"div",
|
|
82
|
-
{
|
|
83
|
-
role: "radiogroup",
|
|
84
|
-
className: withBaseName("container"),
|
|
85
|
-
"aria-readonly": readOnly || void 0,
|
|
86
|
-
"aria-label": ariaLabel,
|
|
87
|
-
"aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
|
|
88
|
-
"aria-describedby": clsx.clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
|
|
89
|
-
onMouseLeave: () => setHoveredValue(0),
|
|
90
|
-
children: Array.from({ length: max }, (_, index) => {
|
|
91
|
-
const itemValue = index + 1;
|
|
92
|
-
const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;
|
|
93
|
-
const isSelected = hoveredValue === 0 && itemValue <= selected;
|
|
94
|
-
const isUnselecting = hoveredValue > 0 && itemValue > hoveredValue && itemValue <= selected;
|
|
95
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
96
|
-
RatingItem.RatingItem,
|
|
97
|
-
{
|
|
98
|
-
currentRating: selected,
|
|
99
|
-
isHovered,
|
|
100
|
-
isSelected,
|
|
101
|
-
isUnselecting,
|
|
102
|
-
onMouseEnter: handleMouseEnter,
|
|
103
|
-
onChange: handleChange,
|
|
104
|
-
value: itemValue,
|
|
105
|
-
readOnly,
|
|
106
|
-
disabled,
|
|
107
|
-
name,
|
|
108
|
-
"aria-label": getLabel == null ? void 0 : getLabel(itemValue)
|
|
109
|
-
},
|
|
110
|
-
itemValue
|
|
111
|
-
);
|
|
112
|
-
})
|
|
113
|
-
}
|
|
114
|
-
),
|
|
115
|
-
getVisibleLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
116
|
-
"div",
|
|
117
|
-
{
|
|
118
|
-
className: clsx.clsx(
|
|
119
|
-
withBaseName("label"),
|
|
120
|
-
withBaseName(`label-${labelPlacement}`)
|
|
121
|
-
),
|
|
122
|
-
"aria-hidden": true,
|
|
123
|
-
children: getVisibleLabel(hoveredValue || selected, max)
|
|
124
|
-
}
|
|
125
|
-
)
|
|
126
|
-
]
|
|
127
|
-
}
|
|
128
|
-
);
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
exports.Rating = Rating;
|
|
132
|
-
//# sourceMappingURL=Rating.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Rating.js","sources":["../src/rating/Rating.tsx"],"sourcesContent":["import {\n capitalize,\n makePrefixer,\n useControlled,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n useState,\n} from \"react\";\nimport ratingCss from \"./Rating.css\";\nimport { RatingItem } from \"./RatingItem\";\n\nconst withBaseName = makePrefixer(\"saltRating\");\n\nexport interface RatingProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * When provided, the component is controlled.\n */\n value?: number;\n /**\n * Default rating value for uncontrolled mode.\n * @default 0\n */\n defaultValue?: number;\n /**\n * Callback function for rating change.\n * The first parameter is the event, and the second is the selected rating value.\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: number) => void;\n /**\n * If true, the rating component will be in a read-only state.\n */\n readOnly?: boolean;\n /**\n * If true, the rating component will be in a disabled state.\n */\n disabled?: boolean;\n /**\n * Total number of icons displayed.\n * @default 5\n */\n max?: number;\n /**\n * Function used to provide a user-friendly name for the current value of the rating. Primarily used by screen readers.\n */\n getLabel?: (value: number) => string;\n /**\n * Function used to provide a visible label for the rating.\n */\n getVisibleLabel?: (value: number, max: number) => string;\n /**\n * Position of the label relative to the rating component.\n * @default \"right\"\n */\n labelPlacement?: \"right\" | \"bottom\";\n /**\n * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n */\n name?: string;\n}\n\nconst defaultGetLabel = (value: number) =>\n `${value} Star${value > 1 ? \"s\" : \"\"}`;\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n {\n value: valueProp,\n defaultValue = 0,\n name: nameProp,\n onChange,\n className,\n readOnly: readOnlyProp,\n disabled: disabledProp,\n max = 5,\n getLabel = defaultGetLabel,\n getVisibleLabel,\n labelPlacement = \"right\",\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...restProps\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rating\",\n css: ratingCss,\n window: targetWindow,\n });\n const {\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n\n const [hoveredValue, setHoveredValue] = useState(0);\n const [selected, setSelected] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Rating\",\n state: \"value\",\n });\n const name = useId(nameProp);\n\n const handleMouseEnter = (event: MouseEvent<HTMLInputElement>) => {\n if (readOnly || disabled) return;\n const itemValue = Number.parseInt(event.currentTarget.value, 10);\n setHoveredValue(itemValue);\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n event.preventDefault();\n return;\n }\n\n const itemValue = Number.parseInt(event.currentTarget.value, 10);\n setSelected(itemValue);\n onChange?.(event, itemValue);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n withBaseName(`label${capitalize(labelPlacement)}`),\n className,\n )}\n {...restProps}\n >\n <div\n role=\"radiogroup\"\n className={withBaseName(\"container\")}\n aria-readonly={readOnly || undefined}\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n onMouseLeave={() => setHoveredValue(0)}\n >\n {Array.from({ length: max }, (_, index) => {\n const itemValue = index + 1;\n const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;\n const isSelected = hoveredValue === 0 && itemValue <= selected;\n const isUnselecting =\n hoveredValue > 0 &&\n itemValue > hoveredValue &&\n itemValue <= selected;\n return (\n <RatingItem\n key={itemValue}\n currentRating={selected}\n isHovered={isHovered}\n isSelected={isSelected}\n isUnselecting={isUnselecting}\n onMouseEnter={handleMouseEnter}\n onChange={handleChange}\n value={itemValue}\n readOnly={readOnly}\n disabled={disabled}\n name={name}\n aria-label={getLabel?.(itemValue)}\n />\n );\n })}\n </div>\n {getVisibleLabel && (\n <div\n className={clsx(\n withBaseName(\"label\"),\n withBaseName(`label-${labelPlacement}`),\n )}\n aria-hidden\n >\n {getVisibleLabel(hoveredValue || selected, max)}\n </div>\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Rating","useWindow","useComponentCssInjection","ratingCss","useFormFieldProps","useState","useControlled","useId","jsxs","clsx","capitalize","jsx","RatingItem"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltRatingItem {\n height: var(--salt-size-icon);\n width: var(--salt-size-icon);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n cursor: var(--salt-cursor-hover);\n}\n\n.saltRatingItem-disabled,\n.saltRatingItem-readOnly {\n cursor: default;\n}\n\n.saltRatingItem-input {\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n cursor: inherit;\n z-index: 1;\n}\n\n.saltRatingItem-input::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n padding: var(--salt-spacing-fixed-600);\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n box-sizing: content-box;\n}\n\n.saltRatingItem-icon {\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--salt-sentiment-neutral-dataviz);\n}\n\n.saltRatingItem-icon .saltIcon {\n --saltIcon-size: var(--salt-size-icon);\n}\n\n.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n padding: var(--salt-spacing-fixed-600);\n transform: translate(-50%, -50%);\n top: 50%;\n left: 50%;\n box-sizing: content-box;\n\n border-radius: var(--salt-palette-corner-strongest);\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-spacing-fixed-200));\n}\n\n.saltRatingItem-disabled {\n cursor: var(--salt-cursor-disabled);\n opacity: var(--salt-palette-opacity-disabled);\n}\n\n.saltRatingItem-disabled .saltRatingItem-input {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltRatingItem-selected .saltRatingItem-icon,\n.saltRatingItem-hovered .saltRatingItem-icon,\n.saltRatingItem-unselecting .saltRatingItem-icon {\n color: var(--salt-sentiment-accent-dataviz);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=RatingItem.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RatingItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var RatingItem$1 = require('./RatingItem.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltRatingItem");
|
|
12
|
-
const RatingItem = react.forwardRef(
|
|
13
|
-
function RatingItem2(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
"aria-label": ariaLabel,
|
|
16
|
-
value,
|
|
17
|
-
currentRating,
|
|
18
|
-
isHovered,
|
|
19
|
-
isSelected,
|
|
20
|
-
isUnselecting,
|
|
21
|
-
onMouseEnter,
|
|
22
|
-
onChange,
|
|
23
|
-
readOnly = false,
|
|
24
|
-
disabled = false,
|
|
25
|
-
name
|
|
26
|
-
} = props;
|
|
27
|
-
const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = core.useIcon();
|
|
28
|
-
const targetWindow = window.useWindow();
|
|
29
|
-
styles.useComponentCssInjection({
|
|
30
|
-
testId: "salt-rating-item",
|
|
31
|
-
css: RatingItem$1,
|
|
32
|
-
window: targetWindow
|
|
33
|
-
});
|
|
34
|
-
const icon = isHovered || isSelected ? /* @__PURE__ */ jsxRuntime.jsx(RatingSelectedIcon, { "aria-hidden": true }) : isUnselecting ? /* @__PURE__ */ jsxRuntime.jsx(RatingUnselectingIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(RatingIcon, { "aria-hidden": true });
|
|
35
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
36
|
-
"div",
|
|
37
|
-
{
|
|
38
|
-
className: clsx.clsx(withBaseName(), {
|
|
39
|
-
[withBaseName("hovered")]: isHovered,
|
|
40
|
-
[withBaseName("selected")]: isSelected,
|
|
41
|
-
[withBaseName("unselecting")]: isUnselecting,
|
|
42
|
-
[withBaseName("disabled")]: disabled,
|
|
43
|
-
[withBaseName("readOnly")]: readOnly
|
|
44
|
-
}),
|
|
45
|
-
children: [
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
"input",
|
|
48
|
-
{
|
|
49
|
-
ref,
|
|
50
|
-
type: "radio",
|
|
51
|
-
name,
|
|
52
|
-
value,
|
|
53
|
-
checked: currentRating === value,
|
|
54
|
-
onChange,
|
|
55
|
-
onMouseEnter,
|
|
56
|
-
disabled,
|
|
57
|
-
readOnly,
|
|
58
|
-
className: withBaseName("input"),
|
|
59
|
-
"aria-label": ariaLabel
|
|
60
|
-
}
|
|
61
|
-
),
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("icon"), "aria-hidden": true, children: icon })
|
|
63
|
-
]
|
|
64
|
-
}
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
exports.RatingItem = RatingItem;
|
|
70
|
-
//# sourceMappingURL=RatingItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RatingItem.js","sources":["../src/rating/RatingItem.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n} from \"react\";\nimport ratingItemCss from \"./RatingItem.css\";\n\nconst withBaseName = makePrefixer(\"saltRatingItem\");\n\nexport interface RatingItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * specifies the value of the feedback item.\n */\n value: number;\n /**\n * To define if the current star is being hovered.\n */\n isHovered?: boolean;\n /**\n * To specify if the item is selected.\n */\n isSelected?: boolean;\n /**\n * defines the current selected rating.\n */\n currentRating?: number;\n /**\n * callback function when feedback item is hovered.\n */\n onMouseEnter: (event: MouseEvent<HTMLInputElement>) => void;\n /**\n * callback function when feedback item is clicked.\n */\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n /**\n * If true, the rating item will be in a read-only state.\n */\n readOnly?: boolean;\n /**\n * If true, the rating item will be in a disabled state.\n */\n disabled?: boolean;\n /**\n * Indicates whether the current rating item is in an active state.\n * An active state typically means that the item is visually highlighted\n * or styled differently to indicate that it is part of the current selection\n * or interaction (e.g., hover or focus).\n */\n isUnselecting?: boolean;\n /**\n * Name of the radio group\n */\n name?: string;\n}\n\nexport const RatingItem = forwardRef<HTMLInputElement, RatingItemProps>(\n function RatingItem(props, ref) {\n const {\n \"aria-label\": ariaLabel,\n value,\n currentRating,\n isHovered,\n isSelected,\n isUnselecting,\n onMouseEnter,\n onChange,\n readOnly = false,\n disabled = false,\n name,\n } = props;\n\n const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = useIcon();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-rating-item\",\n css: ratingItemCss,\n window: targetWindow,\n });\n\n const icon =\n isHovered || isSelected ? (\n <RatingSelectedIcon aria-hidden />\n ) : isUnselecting ? (\n <RatingUnselectingIcon aria-hidden />\n ) : (\n <RatingIcon aria-hidden />\n );\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"hovered\")]: isHovered,\n [withBaseName(\"selected\")]: isSelected,\n [withBaseName(\"unselecting\")]: isUnselecting,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n })}\n >\n <input\n ref={ref}\n type=\"radio\"\n name={name}\n value={value}\n checked={currentRating === value}\n onChange={onChange}\n onMouseEnter={onMouseEnter}\n disabled={disabled}\n readOnly={readOnly}\n className={withBaseName(\"input\")}\n aria-label={ariaLabel}\n />\n <span className={withBaseName(\"icon\")} aria-hidden>\n {icon}\n </span>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","RatingItem","useIcon","useWindow","useComponentCssInjection","ratingItemCss","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAgD3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,YAAA,EAAc,SAAA;AAAA,MACd,KAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,QAAA,GAAW,KAAA;AAAA,MACX;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,EAAoB,qBAAA,KAA0BC,YAAA,EAAQ;AAE1E,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OACJ,SAAA,IAAa,UAAA,mBACXC,cAAA,CAAC,kBAAA,EAAA,EAAmB,eAAW,IAAA,EAAC,CAAA,GAC9B,aAAA,mBACFA,cAAA,CAAC,yBAAsB,aAAA,EAAW,IAAA,EAAC,oBAEnCA,cAAA,CAAC,UAAA,EAAA,EAAW,eAAW,IAAA,EAAC,CAAA;AAG5B,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,UAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,SAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,aAAA;AAAA,UAC/B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAED,QAAA,EAAA;AAAA,0BAAAF,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,IAAA,EAAK,OAAA;AAAA,cACL,IAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAS,aAAA,KAAkB,KAAA;AAAA,cAC3B,QAAA;AAAA,cACA,YAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,YAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACAA,cAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,aAAA,EAAW,MAC/C,QAAA,EAAA,IAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltTabBar {\n display: flex;\n align-items: center;\n flex-direction: row;\n position: relative;\n box-sizing: border-box;\n min-width: 0;\n max-width: 100%;\n}\n\n.saltTabBar-strip {\n display: flex;\n align-items: center;\n flex-direction: row;\n flex: 1 1 auto;\n gap: var(--salt-spacing-100);\n box-sizing: border-box;\n min-width: 0;\n max-width: 100%;\n}\n\n.saltTabBar-divider::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-fixed-100);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabBar-inset {\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=TabBar.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var react = require('react');
|
|
9
|
-
var TabBar$1 = require('./TabBar.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltTabBar");
|
|
12
|
-
const TabBar = react.forwardRef(
|
|
13
|
-
function TabBar2(props, ref) {
|
|
14
|
-
const { className, children, divider, inset, ...rest } = props;
|
|
15
|
-
const targetWindow = window.useWindow();
|
|
16
|
-
styles.useComponentCssInjection({
|
|
17
|
-
testId: "salt-tab-bar",
|
|
18
|
-
css: TabBar$1,
|
|
19
|
-
window: targetWindow
|
|
20
|
-
});
|
|
21
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
22
|
-
"div",
|
|
23
|
-
{
|
|
24
|
-
className: clsx.clsx(
|
|
25
|
-
withBaseName(),
|
|
26
|
-
{
|
|
27
|
-
[withBaseName("divider")]: divider,
|
|
28
|
-
[withBaseName("inset")]: inset
|
|
29
|
-
},
|
|
30
|
-
className
|
|
31
|
-
),
|
|
32
|
-
...rest,
|
|
33
|
-
ref,
|
|
34
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("strip"), children })
|
|
35
|
-
}
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
exports.TabBar = TabBar;
|
|
41
|
-
//# sourceMappingURL=TabBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n /**\n * Styling variant with a bottom separator. Defaults to false\n */\n divider?: boolean;\n /**\n * Styling variant with left and right padding. Defaults to false\n */\n inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n function TabBar(props, ref) {\n const { className, children, divider, inset, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-bar\",\n css: tabBarCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"divider\")]: divider,\n [withBaseName(\"inset\")]: inset,\n },\n className,\n )}\n {...rest}\n ref={ref}\n >\n <div className={withBaseName(\"strip\")}>{children}</div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA;AAAA,EACpB,SAASC,OAAAA,CAAO,KAAA,EAAO,GAAA,EAAK;AAC1B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,KACnD;AAAA,EAEJ;AACF;;;;"}
|