@salt-ds/lab 1.0.0-alpha.87 → 1.0.0-alpha.89

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.
Files changed (177) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/css/salt-lab.css +64 -45
  3. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  4. package/dist-cjs/contact-details/ContactDetails.css.js +1 -1
  5. package/dist-cjs/list-deprecated/ListStateContext.js +1 -1
  6. package/dist-cjs/list-deprecated/ListStateContext.js.map +1 -1
  7. package/dist-cjs/tabs-next/TabBar.css.js +1 -1
  8. package/dist-cjs/tabs-next/TabBar.js +1 -1
  9. package/dist-cjs/tabs-next/TabBar.js.map +1 -1
  10. package/dist-cjs/tabs-next/TabListLayoutContext.js +13 -0
  11. package/dist-cjs/tabs-next/TabListLayoutContext.js.map +1 -0
  12. package/dist-cjs/tabs-next/TabListNext.css.js +1 -1
  13. package/dist-cjs/tabs-next/TabListNext.js +179 -33
  14. package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
  15. package/dist-cjs/tabs-next/TabNext.js +111 -7
  16. package/dist-cjs/tabs-next/TabNext.js.map +1 -1
  17. package/dist-cjs/tabs-next/TabNextAction.js +25 -2
  18. package/dist-cjs/tabs-next/TabNextAction.js.map +1 -1
  19. package/dist-cjs/tabs-next/TabNextPanel.js +31 -16
  20. package/dist-cjs/tabs-next/TabNextPanel.js.map +1 -1
  21. package/dist-cjs/tabs-next/TabNextTrigger.js +110 -9
  22. package/dist-cjs/tabs-next/TabNextTrigger.js.map +1 -1
  23. package/dist-cjs/tabs-next/TabOverflowList.css.js +1 -1
  24. package/dist-cjs/tabs-next/TabOverflowList.js +168 -64
  25. package/dist-cjs/tabs-next/TabOverflowList.js.map +1 -1
  26. package/dist-cjs/tabs-next/TabSlot.js +30 -0
  27. package/dist-cjs/tabs-next/TabSlot.js.map +1 -0
  28. package/dist-cjs/tabs-next/TabSlotRegistryContext.js +16 -0
  29. package/dist-cjs/tabs-next/TabSlotRegistryContext.js.map +1 -0
  30. package/dist-cjs/tabs-next/TabsNext.css.js +6 -0
  31. package/dist-cjs/tabs-next/TabsNext.css.js.map +1 -0
  32. package/dist-cjs/tabs-next/TabsNext.js +113 -47
  33. package/dist-cjs/tabs-next/TabsNext.js.map +1 -1
  34. package/dist-cjs/tabs-next/TabsNextContext.js +17 -3
  35. package/dist-cjs/tabs-next/TabsNextContext.js.map +1 -1
  36. package/dist-cjs/tabs-next/domUtils.js +13 -0
  37. package/dist-cjs/tabs-next/domUtils.js.map +1 -0
  38. package/dist-cjs/tabs-next/hooks/overflowMath.js +86 -0
  39. package/dist-cjs/tabs-next/hooks/overflowMath.js.map +1 -0
  40. package/dist-cjs/tabs-next/hooks/useCollection.js +147 -41
  41. package/dist-cjs/tabs-next/hooks/useCollection.js.map +1 -1
  42. package/dist-cjs/tabs-next/hooks/useFocusWithRetry.js +64 -0
  43. package/dist-cjs/tabs-next/hooks/useFocusWithRetry.js.map +1 -0
  44. package/dist-cjs/tabs-next/hooks/useOverflow.js +240 -156
  45. package/dist-cjs/tabs-next/hooks/useOverflow.js.map +1 -1
  46. package/dist-cjs/tabs-next/hooks/useOverflowLayoutState.js +99 -0
  47. package/dist-cjs/tabs-next/hooks/useOverflowLayoutState.js.map +1 -0
  48. package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js +60 -0
  49. package/dist-cjs/tabs-next/hooks/useOverflowSelectionState.js.map +1 -0
  50. package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js +92 -0
  51. package/dist-cjs/tabs-next/hooks/useRenderedTabWidth.js.map +1 -0
  52. package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js +200 -0
  53. package/dist-cjs/tabs-next/hooks/useRenderedTabsRegistry.js.map +1 -0
  54. package/dist-cjs/tabs-next/hooks/useTabListRecovery.js +76 -0
  55. package/dist-cjs/tabs-next/hooks/useTabListRecovery.js.map +1 -0
  56. package/dist-cjs/tabs-next/hooks/useTabRemovalHandler.js +165 -0
  57. package/dist-cjs/tabs-next/hooks/useTabRemovalHandler.js.map +1 -0
  58. package/dist-cjs/tabs-next/hooks/useTabSelectionFocus.js +80 -0
  59. package/dist-cjs/tabs-next/hooks/useTabSelectionFocus.js.map +1 -0
  60. package/dist-cjs/tabs-next/widthMeasurement.js +42 -0
  61. package/dist-cjs/tabs-next/widthMeasurement.js.map +1 -0
  62. package/dist-cjs/tree/Tree.css.js +1 -1
  63. package/dist-cjs/tree/TreeNode.css.js +1 -1
  64. package/dist-cjs/tree/TreeNode.js +1 -1
  65. package/dist-cjs/tree/TreeNode.js.map +1 -1
  66. package/dist-cjs/tree/TreeNodeExpansionIcon.css.js +1 -1
  67. package/dist-cjs/tree/TreeNodeTrigger.css.js +1 -1
  68. package/dist-cjs/tree/TreeNodeTrigger.js +2 -2
  69. package/dist-cjs/tree/TreeNodeTrigger.js.map +1 -1
  70. package/dist-cjs/utils/useEventCallback.js +5 -5
  71. package/dist-cjs/utils/useEventCallback.js.map +1 -1
  72. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  73. package/dist-es/contact-details/ContactDetails.css.js +1 -1
  74. package/dist-es/list-deprecated/ListStateContext.js +1 -1
  75. package/dist-es/list-deprecated/ListStateContext.js.map +1 -1
  76. package/dist-es/tabs-next/TabBar.css.js +1 -1
  77. package/dist-es/tabs-next/TabBar.js +1 -1
  78. package/dist-es/tabs-next/TabBar.js.map +1 -1
  79. package/dist-es/tabs-next/TabListLayoutContext.js +10 -0
  80. package/dist-es/tabs-next/TabListLayoutContext.js.map +1 -0
  81. package/dist-es/tabs-next/TabListNext.css.js +1 -1
  82. package/dist-es/tabs-next/TabListNext.js +182 -36
  83. package/dist-es/tabs-next/TabListNext.js.map +1 -1
  84. package/dist-es/tabs-next/TabNext.js +113 -9
  85. package/dist-es/tabs-next/TabNext.js.map +1 -1
  86. package/dist-es/tabs-next/TabNextAction.js +25 -2
  87. package/dist-es/tabs-next/TabNextAction.js.map +1 -1
  88. package/dist-es/tabs-next/TabNextPanel.js +31 -16
  89. package/dist-es/tabs-next/TabNextPanel.js.map +1 -1
  90. package/dist-es/tabs-next/TabNextTrigger.js +110 -9
  91. package/dist-es/tabs-next/TabNextTrigger.js.map +1 -1
  92. package/dist-es/tabs-next/TabOverflowList.css.js +1 -1
  93. package/dist-es/tabs-next/TabOverflowList.js +172 -68
  94. package/dist-es/tabs-next/TabOverflowList.js.map +1 -1
  95. package/dist-es/tabs-next/TabSlot.js +28 -0
  96. package/dist-es/tabs-next/TabSlot.js.map +1 -0
  97. package/dist-es/tabs-next/TabSlotRegistryContext.js +13 -0
  98. package/dist-es/tabs-next/TabSlotRegistryContext.js.map +1 -0
  99. package/dist-es/tabs-next/TabsNext.css.js +4 -0
  100. package/dist-es/tabs-next/TabsNext.css.js.map +1 -0
  101. package/dist-es/tabs-next/TabsNext.js +114 -48
  102. package/dist-es/tabs-next/TabsNext.js.map +1 -1
  103. package/dist-es/tabs-next/TabsNextContext.js +17 -3
  104. package/dist-es/tabs-next/TabsNextContext.js.map +1 -1
  105. package/dist-es/tabs-next/domUtils.js +11 -0
  106. package/dist-es/tabs-next/domUtils.js.map +1 -0
  107. package/dist-es/tabs-next/hooks/overflowMath.js +82 -0
  108. package/dist-es/tabs-next/hooks/overflowMath.js.map +1 -0
  109. package/dist-es/tabs-next/hooks/useCollection.js +148 -42
  110. package/dist-es/tabs-next/hooks/useCollection.js.map +1 -1
  111. package/dist-es/tabs-next/hooks/useFocusWithRetry.js +62 -0
  112. package/dist-es/tabs-next/hooks/useFocusWithRetry.js.map +1 -0
  113. package/dist-es/tabs-next/hooks/useOverflow.js +242 -158
  114. package/dist-es/tabs-next/hooks/useOverflow.js.map +1 -1
  115. package/dist-es/tabs-next/hooks/useOverflowLayoutState.js +97 -0
  116. package/dist-es/tabs-next/hooks/useOverflowLayoutState.js.map +1 -0
  117. package/dist-es/tabs-next/hooks/useOverflowSelectionState.js +58 -0
  118. package/dist-es/tabs-next/hooks/useOverflowSelectionState.js.map +1 -0
  119. package/dist-es/tabs-next/hooks/useRenderedTabWidth.js +90 -0
  120. package/dist-es/tabs-next/hooks/useRenderedTabWidth.js.map +1 -0
  121. package/dist-es/tabs-next/hooks/useRenderedTabsRegistry.js +198 -0
  122. package/dist-es/tabs-next/hooks/useRenderedTabsRegistry.js.map +1 -0
  123. package/dist-es/tabs-next/hooks/useTabListRecovery.js +74 -0
  124. package/dist-es/tabs-next/hooks/useTabListRecovery.js.map +1 -0
  125. package/dist-es/tabs-next/hooks/useTabRemovalHandler.js +163 -0
  126. package/dist-es/tabs-next/hooks/useTabRemovalHandler.js.map +1 -0
  127. package/dist-es/tabs-next/hooks/useTabSelectionFocus.js +78 -0
  128. package/dist-es/tabs-next/hooks/useTabSelectionFocus.js.map +1 -0
  129. package/dist-es/tabs-next/widthMeasurement.js +36 -0
  130. package/dist-es/tabs-next/widthMeasurement.js.map +1 -0
  131. package/dist-es/tree/Tree.css.js +1 -1
  132. package/dist-es/tree/TreeNode.css.js +1 -1
  133. package/dist-es/tree/TreeNode.js +1 -1
  134. package/dist-es/tree/TreeNode.js.map +1 -1
  135. package/dist-es/tree/TreeNodeExpansionIcon.css.js +1 -1
  136. package/dist-es/tree/TreeNodeTrigger.css.js +1 -1
  137. package/dist-es/tree/TreeNodeTrigger.js +2 -2
  138. package/dist-es/tree/TreeNodeTrigger.js.map +1 -1
  139. package/dist-es/utils/useEventCallback.js +5 -5
  140. package/dist-es/utils/useEventCallback.js.map +1 -1
  141. package/dist-types/cascading-menu/internal/useMenuTriggerHandlers.d.ts +1 -1
  142. package/dist-types/list-deprecated/ListStateContext.d.ts +7 -2
  143. package/dist-types/tabs-next/TabListLayoutContext.d.ts +9 -0
  144. package/dist-types/tabs-next/TabNext.d.ts +1 -1
  145. package/dist-types/tabs-next/TabNextPanel.d.ts +2 -1
  146. package/dist-types/tabs-next/TabOverflowList.d.ts +3 -4
  147. package/dist-types/tabs-next/TabSlot.d.ts +6 -0
  148. package/dist-types/tabs-next/TabSlotRegistryContext.d.ts +5 -0
  149. package/dist-types/tabs-next/TabsNext.d.ts +2 -1
  150. package/dist-types/tabs-next/TabsNextContext.d.ts +26 -4
  151. package/dist-types/tabs-next/domUtils.d.ts +1 -0
  152. package/dist-types/tabs-next/hooks/overflowMath.d.ts +18 -0
  153. package/dist-types/tabs-next/hooks/useCollection.d.ts +15 -3
  154. package/dist-types/tabs-next/hooks/useFocusWithRetry.d.ts +9 -0
  155. package/dist-types/tabs-next/hooks/useOverflow.d.ts +5 -5
  156. package/dist-types/tabs-next/hooks/useOverflowLayoutState.d.ts +13 -0
  157. package/dist-types/tabs-next/hooks/useOverflowSelectionState.d.ts +13 -0
  158. package/dist-types/tabs-next/hooks/useRenderedTabWidth.d.ts +12 -0
  159. package/dist-types/tabs-next/hooks/useRenderedTabsRegistry.d.ts +12 -0
  160. package/dist-types/tabs-next/hooks/useTabListRecovery.d.ts +12 -0
  161. package/dist-types/tabs-next/hooks/useTabRemovalHandler.d.ts +32 -0
  162. package/dist-types/tabs-next/hooks/useTabSelectionFocus.d.ts +15 -0
  163. package/dist-types/tabs-next/widthMeasurement.d.ts +5 -0
  164. package/dist-types/tokenized-input/internal/InputPill.d.ts +1 -1
  165. package/dist-types/tokenized-input-next/internal/InputPill.d.ts +1 -1
  166. package/dist-types/utils/useEventCallback.d.ts +1 -1
  167. package/package.json +3 -3
  168. package/dist-cjs/tabs-next/hooks/useFocusOutside.js +0 -25
  169. package/dist-cjs/tabs-next/hooks/useFocusOutside.js.map +0 -1
  170. package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js +0 -93
  171. package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js.map +0 -1
  172. package/dist-es/tabs-next/hooks/useFocusOutside.js +0 -23
  173. package/dist-es/tabs-next/hooks/useFocusOutside.js.map +0 -1
  174. package/dist-es/tabs-next/hooks/useRestoreActiveTab.js +0 -91
  175. package/dist-es/tabs-next/hooks/useRestoreActiveTab.js.map +0 -1
  176. package/dist-types/tabs-next/hooks/useFocusOutside.d.ts +0 -2
  177. package/dist-types/tabs-next/hooks/useRestoreActiveTab.d.ts +0 -10
@@ -1 +1 @@
1
- {"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n FloatingTree,\n flip,\n offset,\n size,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n Button,\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIcon,\n useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type Dispatch,\n forwardRef,\n type ReactNode,\n type Ref,\n type RefObject,\n type SetStateAction,\n useCallback,\n useRef,\n} from \"react\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n buttonRef?: Ref<HTMLButtonElement>;\n tabstripRef: RefObject<HTMLDivElement>;\n children?: ReactNode;\n isMeasuring?: boolean;\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n function TabOverflowList(props, ref) {\n const {\n buttonRef,\n tabstripRef,\n children,\n isMeasuring,\n open,\n setOpen,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs-next-overflow-list\",\n css: tabOverflowListCss,\n window: targetWindow,\n });\n\n const { OverflowIcon } = useIcon();\n\n const { refs, x, y, strategy, context } = useFloatingUI({\n open: open,\n onOpenChange(open, _, reason) {\n if (reason === \"escape-key\") {\n queueMicrotask(() => {\n const allTabs =\n tabstripRef.current?.querySelectorAll<HTMLElement>(\n '[role=\"tab\"]:not([aria-hidden])',\n ) ?? [];\n const numberOfTabsInOverflow =\n listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n .length ?? 0;\n\n allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n preventScroll: true,\n });\n });\n }\n\n setOpen(open);\n },\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip(),\n ],\n });\n\n const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const handleRootRef = useForkRef(rootRef, ref);\n const listRef = useRef<HTMLDivElement>(null);\n const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n const handleFocusOutside = useCallback(() => {\n setOpen(false);\n }, [setOpen]);\n\n useFocusOutside(\n rootRef,\n handleFocusOutside,\n open,\n \"[data-floating-ui-portal]\",\n );\n\n const handleClick = () => {\n if (!open) {\n listRef.current\n ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n ?.focus({ preventScroll: true });\n } else {\n setOpen(false);\n }\n };\n\n const handleFocus = () => {\n setOpen(true);\n };\n\n const handleButtonRef = useForkRef<HTMLButtonElement>(\n buttonRef,\n refs.setReference,\n );\n\n const listId = useId();\n\n const childCount = Children.count(children);\n if (childCount === 0 && !isMeasuring) return null;\n\n return (\n <div className={withBaseName()} ref={handleRootRef} data-overflow>\n <Button\n data-overflowbutton\n tabIndex={-1}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n onClick={handleClick}\n ref={handleButtonRef}\n aria-label={`Overflow menu. ${childCount} tabs hidden`}\n aria-expanded={open}\n aria-controls={listId}\n aria-hidden=\"true\"\n role=\"tab\"\n aria-haspopup\n {...rest}\n >\n <OverflowIcon aria-hidden />\n </Button>\n <FloatingTree>\n <div\n ref={handleListRef}\n {...getFloatingProps({\n onFocus: handleFocus,\n role: \"presentation\",\n })}\n className={withBaseName(\"list\")}\n data-hidden={!open}\n style={\n open\n ? { left: x ?? 0, top: y ?? 0, position: strategy }\n : undefined\n }\n id={listId}\n >\n <div className={withBaseName(\"listContainer\")}>{children}</div>\n </div>\n </FloatingTree>\n </div>\n );\n },\n);\n"],"names":["TabOverflowList","tabOverflowListCss","open"],"mappings":"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"}
1
+ {"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n flip,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n Button,\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useIcon,\n useId,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type Dispatch,\n forwardRef,\n type KeyboardEvent,\n type Ref,\n type SetStateAction,\n useEffect,\n useRef,\n} from \"react\";\nimport { isHTMLElement } from \"./domUtils\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { TabSlot } from \"./TabSlot\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport {\n getMeasuredWidth,\n seedWidthMap,\n updateWidthMap,\n} from \"./widthMeasurement\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n buttonRef?: Ref<HTMLButtonElement>;\n hiddenValues: string[];\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n order: number;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n function TabOverflowList(props, ref) {\n const {\n buttonRef,\n className,\n hiddenValues,\n order,\n open,\n setOpen,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs-next-overflow-list\",\n css: tabOverflowListCss,\n window: targetWindow,\n });\n\n const overflowRef = useRef<HTMLButtonElement>(null);\n const hadOverflowItemsRef = useRef(false);\n\n const { OverflowIcon } = useIcon();\n const { registerTab, updateTab, activeTab } = useTabsNext();\n\n const { refs, x, y, strategy, context, elements } = useFloatingUI({\n open: open,\n onOpenChange(open, _, reason) {\n setOpen(open);\n\n if (reason === \"escape-key\") {\n overflowRef.current?.focus();\n }\n },\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip(),\n shift({\n padding: 8,\n }),\n ],\n });\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useClick(context),\n useDismiss(context),\n ]);\n\n const handleListRef = useForkRef<HTMLDivElement>(ref, refs.setFloating);\n\n const handleButtonRef = useForkRef<HTMLButtonElement>(\n buttonRef,\n refs.setReference,\n );\n const handleRef = useForkRef(handleButtonRef, overflowRef);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const overflowId = useId();\n const overlayId = useId();\n\n const handleFocus = () => {\n if (overflowId) {\n activeTab.current = { value: overflowId, id: overflowId };\n }\n };\n\n const handleFloatingKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.key !== \"Tab\") {\n return;\n }\n\n if (event.shiftKey) {\n event.preventDefault();\n setOpen(false);\n const scheduleFocus = targetWindow?.requestAnimationFrame;\n if (scheduleFocus) {\n scheduleFocus(() =>\n overflowRef.current?.focus({ preventScroll: true }),\n );\n return;\n }\n\n queueMicrotask(() =>\n overflowRef.current?.focus({ preventScroll: true }),\n );\n return;\n }\n };\n\n const overflowItemCount = hiddenValues.length;\n const hasOverflowItems = overflowItemCount > 0;\n const initialOrderRef = useRef(order);\n\n useEffect(() => {\n const tabList = overflowRef.current?.parentElement;\n const resizeObserverCtor = (\n targetWindow as\n | (Window & { ResizeObserver?: typeof ResizeObserver })\n | undefined\n )?.ResizeObserver;\n if (!open || !tabList || !resizeObserverCtor) {\n return;\n }\n\n const observedElements = [tabList, tabList.parentElement].filter(\n (element): element is HTMLElement => element != null,\n );\n const widths = seedWidthMap(observedElements);\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 =\n entry.contentRect.width || getMeasuredWidth(entry.target);\n if (updateWidthMap(widths, entry.target, nextWidth)) {\n setOpen(false);\n return;\n }\n }\n },\n );\n\n for (const element of observedElements) {\n resizeObserver.observe(element);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [open, setOpen, targetWindow]);\n\n useIsomorphicLayoutEffect(() => {\n if (open && !hasOverflowItems) {\n setOpen(false);\n }\n }, [hasOverflowItems, open, setOpen]);\n\n useIsomorphicLayoutEffect(() => {\n if (hasOverflowItems && !hadOverflowItemsRef.current) {\n setOpen(false);\n }\n\n hadOverflowItemsRef.current = hasOverflowItems;\n }, [hasOverflowItems, setOpen]);\n\n useIsomorphicLayoutEffect(() => {\n if (overflowId && overflowRef.current && hasOverflowItems) {\n const item = {\n id: overflowId,\n value: overflowId,\n element: overflowRef.current,\n location: \"main\" as const,\n order: initialOrderRef.current,\n };\n\n return registerTab(item);\n }\n }, [hasOverflowItems, overflowId, registerTab]);\n\n useIsomorphicLayoutEffect(() => {\n if (!overflowId || !hasOverflowItems) {\n return;\n }\n\n updateTab(overflowId, {\n element: overflowRef.current,\n location: \"main\",\n order,\n });\n }, [hasOverflowItems, order, overflowId, updateTab]);\n\n if (!hasOverflowItems) return null;\n\n return (\n <>\n <Button\n className={clsx(withBaseName(), className)}\n data-overflowbutton\n appearance=\"transparent\"\n sentiment=\"neutral\"\n {...getReferenceProps({\n onFocus: handleFocus,\n })}\n ref={handleRef}\n aria-label=\"Overflow\"\n aria-expanded={open}\n aria-controls={overlayId}\n role=\"tab\"\n tabIndex={-1}\n {...rest}\n >\n <OverflowIcon aria-hidden />\n </Button>\n <FloatingComponent\n ref={handleListRef}\n {...getFloatingProps({\n id: overlayId,\n onKeyDown: handleFloatingKeyDown,\n })}\n focusManagerProps={\n context\n ? {\n context,\n initialFocus: 0,\n returnFocus: false,\n modal: false,\n closeOnFocusOut: true,\n }\n : undefined\n }\n className={withBaseName(\"list\")}\n open={open}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n <div\n role=\"tablist\"\n aria-orientation=\"vertical\"\n className={withBaseName(\"listContainer\")}\n aria-label=\"Overflow tab options\"\n >\n {hiddenValues.map((value) => (\n <TabSlot key={value} slotId={`overflow:${value}`} value={value} />\n ))}\n </div>\n </FloatingComponent>\n </>\n );\n },\n);\n"],"names":["TabOverflowList","tabOverflowListCss","open","_a","elements"],"mappings":"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"}
@@ -0,0 +1,28 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useCallback } from 'react';
3
+ import { useTabSlotRegistry } from './TabSlotRegistryContext.js';
4
+
5
+ function TabSlot({ slotId, value, ...rest }) {
6
+ const slotRegistry = useTabSlotRegistry();
7
+ const handleRef = useCallback(
8
+ (element) => {
9
+ slotRegistry == null ? void 0 : slotRegistry.registerSlot(slotId, element);
10
+ },
11
+ [slotId, slotRegistry]
12
+ );
13
+ return /* @__PURE__ */ jsx(
14
+ "div",
15
+ {
16
+ role: "presentation",
17
+ "data-tabslot": "",
18
+ "data-slotid": slotId,
19
+ "data-value": value,
20
+ ref: handleRef,
21
+ style: { display: "contents" },
22
+ ...rest
23
+ }
24
+ );
25
+ }
26
+
27
+ export { TabSlot };
28
+ //# sourceMappingURL=TabSlot.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TabSlot.js","sources":["../src/tabs-next/TabSlot.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, useCallback } from \"react\";\nimport { useTabSlotRegistry } from \"./TabSlotRegistryContext\";\n\nexport interface TabSlotProps extends ComponentPropsWithoutRef<\"div\"> {\n slotId: string;\n value: string;\n}\n\nexport function TabSlot({ slotId, value, ...rest }: TabSlotProps) {\n const slotRegistry = useTabSlotRegistry();\n const handleRef = useCallback(\n (element: HTMLDivElement | null) => {\n slotRegistry?.registerSlot(slotId, element);\n },\n [slotId, slotRegistry],\n );\n\n return (\n <div\n role=\"presentation\"\n data-tabslot=\"\"\n data-slotid={slotId}\n data-value={value}\n ref={handleRef}\n style={{ display: \"contents\" }}\n {...rest}\n />\n );\n}\n"],"names":[],"mappings":";;;;AAQO,SAAS,QAAQ,EAAE,MAAA,EAAQ,KAAA,EAAO,GAAG,MAAK,EAAiB;AAChE,EAAA,MAAM,eAAe,kBAAA,EAAmB;AACxC,EAAA,MAAM,SAAA,GAAY,WAAA;AAAA,IAChB,CAAC,OAAA,KAAmC;AAClC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,aAAa,MAAA,EAAQ,OAAA,CAAA;AAAA,IACrC,CAAA;AAAA,IACA,CAAC,QAAQ,YAAY;AAAA,GACvB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,cAAA;AAAA,MACL,cAAA,EAAa,EAAA;AAAA,MACb,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MACZ,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,EAAE,OAAA,EAAS,UAAA,EAAW;AAAA,MAC5B,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
@@ -0,0 +1,13 @@
1
+ import { createContext } from '@salt-ds/core';
2
+ import { useContext } from 'react';
3
+
4
+ const TabSlotRegistryContext = createContext(
5
+ "TabSlotRegistryContext",
6
+ null
7
+ );
8
+ function useTabSlotRegistry() {
9
+ return useContext(TabSlotRegistryContext);
10
+ }
11
+
12
+ export { TabSlotRegistryContext, useTabSlotRegistry };
13
+ //# sourceMappingURL=TabSlotRegistryContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TabSlotRegistryContext.js","sources":["../src/tabs-next/TabSlotRegistryContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport interface TabSlotRegistryContextValue {\n registerSlot: (slotId: string, element: HTMLDivElement | null) => void;\n}\n\nexport const TabSlotRegistryContext =\n createContext<TabSlotRegistryContextValue | null>(\n \"TabSlotRegistryContext\",\n null,\n );\n\nexport function useTabSlotRegistry() {\n return useContext(TabSlotRegistryContext);\n}\n"],"names":[],"mappings":";;;AAOO,MAAM,sBAAA,GACX,aAAA;AAAA,EACE,wBAAA;AAAA,EACA;AACF;AAEK,SAAS,kBAAA,GAAqB;AACnC,EAAA,OAAO,WAAW,sBAAsB,CAAA;AAC1C;;;;"}
@@ -0,0 +1,4 @@
1
+ var css_248z = ".saltTabsNext {\n min-width: 0;\n}\n";
2
+
3
+ export { css_248z as default };
4
+ //# sourceMappingURL=TabsNext.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TabsNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,92 +1,139 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { makePrefixer, useControlled, useEventCallback } from '@salt-ds/core';
2
+ import { makePrefixer, useControlled } from '@salt-ds/core';
3
+ import { useComponentCssInjection } from '@salt-ds/styles';
4
+ import { useWindow } from '@salt-ds/window';
3
5
  import { clsx } from 'clsx';
4
6
  import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
5
7
  import { useCollection } from './hooks/useCollection.js';
8
+ import { useOverflowSelectionState } from './hooks/useOverflowSelectionState.js';
9
+ import { useRenderedTabsRegistry } from './hooks/useRenderedTabsRegistry.js';
10
+ import css_248z from './TabsNext.css.js';
6
11
  import { TabsNextContext } from './TabsNextContext.js';
7
12
 
8
13
  const withBaseName = makePrefixer("saltTabsNext");
14
+ function setValueIdMapEntry(map, value, id) {
15
+ if (map.get(value) === id) {
16
+ return map;
17
+ }
18
+ const next = new Map(map);
19
+ next.set(value, id);
20
+ return next;
21
+ }
22
+ function removeValueIdMapEntry(map, value, id) {
23
+ if (map.get(value) !== id) {
24
+ return map;
25
+ }
26
+ const next = new Map(map);
27
+ next.delete(value);
28
+ return next;
29
+ }
9
30
  const TabsNext = forwardRef(
10
31
  function TabsNext2(props, ref) {
11
32
  const { className, children, value, defaultValue, onChange, ...rest } = props;
12
- const [valueToTabIdMap, setValueToIdMap] = useState({
13
- map: /* @__PURE__ */ new Map()
14
- });
15
- const [valueToPanelIdMap, setValueToPanelIdMap] = useState({
16
- map: /* @__PURE__ */ new Map()
33
+ const targetWindow = useWindow();
34
+ useComponentCssInjection({
35
+ testId: "salt-tabs-next",
36
+ css: css_248z,
37
+ window: targetWindow
17
38
  });
39
+ const [valueToTabIdMap, setValueToIdMap] = useState(
40
+ () => /* @__PURE__ */ new Map()
41
+ );
42
+ const [valueToPanelIdMap, setValueToPanelIdMap] = useState(
43
+ () => /* @__PURE__ */ new Map()
44
+ );
45
+ const {
46
+ renderMode,
47
+ registerBootstrapTab,
48
+ setBootstrapTabReady,
49
+ setBootstrapOverflowReady,
50
+ registerRenderedTab,
51
+ updateRenderedTab,
52
+ getRenderedTab,
53
+ getRenderedTabOrder,
54
+ renderedTabs
55
+ } = useRenderedTabsRegistry();
18
56
  const {
19
57
  registerItem,
58
+ updateItem,
20
59
  item,
21
60
  getNext,
22
61
  getPrevious,
23
62
  getFirst,
24
63
  getLast,
25
- items
26
- } = useCollection({ wrap: true });
64
+ itemAt,
65
+ getIndex,
66
+ sortItems,
67
+ removalVersion,
68
+ getRemovedItems
69
+ } = useCollection({ targetWindow, wrap: true });
27
70
  const activeTab = useRef();
28
- const removedActiveTabRef = useRef(void 0);
29
71
  const [menuOpen, setMenuOpen] = useState(false);
30
72
  const [selected, setSelectedState] = useControlled({
31
73
  controlled: value,
32
74
  default: defaultValue,
33
- name: "TabListNext",
75
+ name: "TabsNext",
34
76
  state: "selected"
35
77
  });
36
- const setSelected = useCallback(
37
- (event, value2) => {
38
- setMenuOpen(false);
39
- setSelectedState(value2);
40
- onChange == null ? void 0 : onChange(event, value2);
78
+ const commitSelection = useCallback(
79
+ (event, newValue) => {
80
+ setSelectedState(newValue);
81
+ if (selected !== newValue) {
82
+ onChange == null ? void 0 : onChange(event, newValue);
83
+ }
41
84
  },
42
- [onChange]
85
+ [onChange, selected]
43
86
  );
44
- const registerTab = useEventCallback((item2) => {
45
- const cleanup = registerItem(item2);
46
- setValueToIdMap(({ map }) => {
47
- map.set(item2.value, item2.id);
48
- return { map };
49
- });
50
- return () => {
51
- var _a;
52
- cleanup();
53
- setValueToIdMap(({ map }) => {
54
- map.delete(item2.value);
55
- return { map };
56
- });
57
- if (((_a = activeTab.current) == null ? void 0 : _a.value) !== item2.value) {
58
- return;
59
- }
60
- removedActiveTabRef.current = item2.value;
61
- };
87
+ const { selectionFromOverflowValueRef, setSelected } = useOverflowSelectionState({
88
+ commitSelection,
89
+ menuOpen,
90
+ selected,
91
+ setMenuOpen
62
92
  });
93
+ const registerTab = useCallback(
94
+ (tab) => {
95
+ const cleanup = registerItem(tab);
96
+ setValueToIdMap((map) => setValueIdMapEntry(map, tab.value, tab.id));
97
+ return () => {
98
+ cleanup();
99
+ setValueToIdMap(
100
+ (map) => removeValueIdMapEntry(map, tab.value, tab.id)
101
+ );
102
+ };
103
+ },
104
+ [registerItem]
105
+ );
63
106
  const registerPanel = useCallback((id, value2) => {
64
- setValueToPanelIdMap(({ map }) => {
65
- map.set(value2, id);
66
- return { map };
67
- });
107
+ setValueToPanelIdMap((map) => setValueIdMapEntry(map, value2, id));
68
108
  return () => {
69
- setValueToIdMap(({ map }) => {
70
- map.delete(value2);
71
- return { map };
72
- });
109
+ setValueToPanelIdMap((map) => removeValueIdMapEntry(map, value2, id));
73
110
  };
74
111
  }, []);
75
112
  const getPanelId = useCallback(
76
113
  (value2) => {
77
- return valueToPanelIdMap.map.get(value2);
114
+ return valueToPanelIdMap.get(value2);
78
115
  },
79
116
  [valueToPanelIdMap]
80
117
  );
81
118
  const getTabId = useCallback(
82
119
  (value2) => {
83
- return valueToTabIdMap.map.get(value2);
120
+ return valueToTabIdMap.get(value2);
84
121
  },
85
122
  [valueToTabIdMap]
86
123
  );
87
124
  const context = useMemo(
88
125
  () => ({
126
+ renderMode,
127
+ registerBootstrapTab,
128
+ setBootstrapTabReady,
129
+ setBootstrapOverflowReady,
89
130
  registerTab,
131
+ updateTab: updateItem,
132
+ registerRenderedTab,
133
+ updateRenderedTab,
134
+ getRenderedTab,
135
+ getRenderedTabOrder,
136
+ renderedTabs,
90
137
  registerPanel,
91
138
  getPanelId,
92
139
  getTabId,
@@ -97,15 +144,29 @@ const TabsNext = forwardRef(
97
144
  getPrevious,
98
145
  getFirst,
99
146
  getLast,
100
- items,
101
147
  activeTab,
148
+ selectionFromOverflowValueRef,
102
149
  menuOpen,
103
150
  setMenuOpen,
104
- removedActiveTabRef
151
+ itemAt,
152
+ getIndex,
153
+ sortItems,
154
+ removalVersion,
155
+ getRemovedItems
105
156
  }),
106
157
  [
158
+ renderMode,
159
+ registerBootstrapTab,
160
+ setBootstrapTabReady,
161
+ setBootstrapOverflowReady,
107
162
  registerPanel,
108
163
  registerTab,
164
+ updateItem,
165
+ registerRenderedTab,
166
+ updateRenderedTab,
167
+ getRenderedTab,
168
+ getRenderedTabOrder,
169
+ renderedTabs,
109
170
  getPanelId,
110
171
  getTabId,
111
172
  selected,
@@ -115,8 +176,13 @@ const TabsNext = forwardRef(
115
176
  getPrevious,
116
177
  getFirst,
117
178
  getLast,
118
- items,
119
- menuOpen
179
+ menuOpen,
180
+ itemAt,
181
+ getIndex,
182
+ sortItems,
183
+ removalVersion,
184
+ getRemovedItems,
185
+ selectionFromOverflowValueRef
120
186
  ]
121
187
  );
122
188
  return /* @__PURE__ */ jsx(TabsNextContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest, children }) });
@@ -1 +1 @@
1
- {"version":3,"file":"TabsNext.js","sources":["../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useEventCallback } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useCollection } from \"./hooks/useCollection\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\n\nexport interface TabsNextProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n children?: ReactNode;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: string;\n /**\n * The value. Use when the component is controlled.\n */\n value?: string;\n /**\n * Callback fired when the selection changes. The event will be null when selection is moved automatically.\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n function TabsNext(props, ref) {\n const { className, children, value, defaultValue, onChange, ...rest } =\n props;\n\n const [valueToTabIdMap, setValueToIdMap] = useState({\n map: new Map<string, string>(),\n });\n const [valueToPanelIdMap, setValueToPanelIdMap] = useState({\n map: new Map<string, string>(),\n });\n\n const {\n registerItem,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n } = useCollection({ wrap: true });\n\n const activeTab = useRef<Pick<Item, \"id\" | \"value\">>();\n const removedActiveTabRef = useRef<string | undefined>(undefined);\n\n const [menuOpen, setMenuOpen] = useState(false);\n\n const [selected, setSelectedState] = useControlled({\n controlled: value,\n default: defaultValue,\n name: \"TabListNext\",\n state: \"selected\",\n });\n\n const setSelected = useCallback(\n (event: SyntheticEvent | null, value: string) => {\n setMenuOpen(false);\n setSelectedState(value);\n onChange?.(event, value);\n },\n [onChange],\n );\n\n const registerTab = useEventCallback((item: Item) => {\n const cleanup = registerItem(item);\n setValueToIdMap(({ map }) => {\n map.set(item.value, item.id);\n return { map };\n });\n\n return () => {\n cleanup();\n setValueToIdMap(({ map }) => {\n map.delete(item.value);\n return { map };\n });\n\n if (activeTab.current?.value !== item.value) {\n return;\n }\n\n removedActiveTabRef.current = item.value;\n };\n });\n\n const registerPanel = useCallback((id: string, value: string) => {\n setValueToPanelIdMap(({ map }) => {\n map.set(value, id);\n return { map };\n });\n return () => {\n setValueToIdMap(({ map }) => {\n map.delete(value);\n return { map };\n });\n };\n }, []);\n\n const getPanelId = useCallback(\n (value: string) => {\n return valueToPanelIdMap.map.get(value);\n },\n [valueToPanelIdMap],\n );\n\n const getTabId = useCallback(\n (value: string) => {\n return valueToTabIdMap.map.get(value);\n },\n [valueToTabIdMap],\n );\n\n const context = useMemo(\n () => ({\n registerTab,\n registerPanel,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n activeTab,\n menuOpen,\n setMenuOpen,\n removedActiveTabRef,\n }),\n [\n registerPanel,\n registerTab,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n items,\n menuOpen,\n ],\n );\n\n return (\n <TabsNextContext.Provider value={context}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n </TabsNextContext.Provider>\n );\n },\n);\n"],"names":["TabsNext","value","item"],"mappings":"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"}
1
+ {"version":3,"file":"TabsNext.js","sources":["../src/tabs-next/TabsNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useCollection } from \"./hooks/useCollection\";\nimport { useOverflowSelectionState } from \"./hooks/useOverflowSelectionState\";\nimport { useRenderedTabsRegistry } from \"./hooks/useRenderedTabsRegistry\";\nimport tabsNextCss from \"./TabsNext.css\";\nimport { type Item, TabsNextContext } from \"./TabsNextContext\";\n\nexport interface TabsNextProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n children?: ReactNode;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: string;\n /**\n * The value. Use when the component is controlled.\n */\n value?: string;\n /**\n * Callback fired when the selection changes. The event will be null when\n * selection is moved automatically.\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabsNext\");\n\nfunction setValueIdMapEntry(\n map: Map<string, string>,\n value: string,\n id: string,\n) {\n if (map.get(value) === id) {\n return map;\n }\n\n const next = new Map(map);\n next.set(value, id);\n return next;\n}\n\nfunction removeValueIdMapEntry(\n map: Map<string, string>,\n value: string,\n id: string,\n) {\n if (map.get(value) !== id) {\n return map;\n }\n\n const next = new Map(map);\n next.delete(value);\n return next;\n}\n\nexport const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(\n function TabsNext(props, ref) {\n const { className, children, value, defaultValue, onChange, ...rest } =\n props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs-next\",\n css: tabsNextCss,\n window: targetWindow,\n });\n\n const [valueToTabIdMap, setValueToIdMap] = useState(\n () => new Map<string, string>(),\n );\n const [valueToPanelIdMap, setValueToPanelIdMap] = useState(\n () => new Map<string, string>(),\n );\n const {\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n } = useRenderedTabsRegistry();\n\n const {\n registerItem,\n updateItem,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n } = useCollection({ targetWindow, wrap: true });\n\n const activeTab = useRef<Pick<Item, \"id\" | \"value\">>();\n\n const [menuOpen, setMenuOpen] = useState(false);\n\n const [selected, setSelectedState] = useControlled({\n controlled: value,\n default: defaultValue,\n name: \"TabsNext\",\n state: \"selected\",\n });\n\n const commitSelection = useCallback(\n (event: SyntheticEvent | null, newValue: string) => {\n setSelectedState(newValue);\n if (selected !== newValue) {\n onChange?.(event, newValue);\n }\n },\n [onChange, selected],\n );\n const { selectionFromOverflowValueRef, setSelected } =\n useOverflowSelectionState({\n commitSelection,\n menuOpen,\n selected,\n setMenuOpen,\n });\n\n const registerTab = useCallback(\n (tab: Item) => {\n const cleanup = registerItem(tab);\n setValueToIdMap((map) => setValueIdMapEntry(map, tab.value, tab.id));\n\n return () => {\n cleanup();\n setValueToIdMap((map) =>\n removeValueIdMapEntry(map, tab.value, tab.id),\n );\n };\n },\n [registerItem],\n );\n\n const registerPanel = useCallback((id: string, value: string) => {\n setValueToPanelIdMap((map) => setValueIdMapEntry(map, value, id));\n return () => {\n setValueToPanelIdMap((map) => removeValueIdMapEntry(map, value, id));\n };\n }, []);\n\n const getPanelId = useCallback(\n (value: string) => {\n return valueToPanelIdMap.get(value);\n },\n [valueToPanelIdMap],\n );\n\n const getTabId = useCallback(\n (value: string) => {\n return valueToTabIdMap.get(value);\n },\n [valueToTabIdMap],\n );\n\n const context = useMemo(\n () => ({\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerTab,\n updateTab: updateItem,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n registerPanel,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n activeTab,\n selectionFromOverflowValueRef,\n menuOpen,\n setMenuOpen,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n }),\n [\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerPanel,\n registerTab,\n updateItem,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n menuOpen,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n selectionFromOverflowValueRef,\n ],\n );\n\n return (\n <TabsNextContext.Provider value={context}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n </TabsNextContext.Provider>\n );\n },\n);\n"],"names":["TabsNext","tabsNextCss","value"],"mappings":";;;;;;;;;;;;AAsCA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEhD,SAAS,kBAAA,CACP,GAAA,EACA,KAAA,EACA,EAAA,EACA;AACA,EAAA,IAAI,GAAA,CAAI,GAAA,CAAI,KAAK,CAAA,KAAM,EAAA,EAAI;AACzB,IAAA,OAAO,GAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,GAAG,CAAA;AACxB,EAAA,IAAA,CAAK,GAAA,CAAI,OAAO,EAAE,CAAA;AAClB,EAAA,OAAO,IAAA;AACT;AAEA,SAAS,qBAAA,CACP,GAAA,EACA,KAAA,EACA,EAAA,EACA;AACA,EAAA,IAAI,GAAA,CAAI,GAAA,CAAI,KAAK,CAAA,KAAM,EAAA,EAAI;AACzB,IAAA,OAAO,GAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,GAAG,CAAA;AACxB,EAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AACjB,EAAA,OAAO,IAAA;AACT;AAEO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,SAASA,SAAAA,CAAS,KAAA,EAAO,GAAA,EAAK;AAC5B,IAAA,MAAM,EAAE,WAAW,QAAA,EAAU,KAAA,EAAO,cAAc,QAAA,EAAU,GAAG,MAAK,GAClE,KAAA;AACF,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,eAAA,EAAiB,eAAe,CAAA,GAAI,QAAA;AAAA,MACzC,0BAAU,GAAA;AAAoB,KAChC;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA;AAAA,MAChD,0BAAU,GAAA;AAAoB,KAChC;AACA,IAAA,MAAM;AAAA,MACJ,UAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,yBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,cAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA,QACE,uBAAA,EAAwB;AAE5B,IAAA,MAAM;AAAA,MACJ,YAAA;AAAA,MACA,UAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,aAAA,CAAc,EAAE,YAAA,EAAc,IAAA,EAAM,MAAM,CAAA;AAE9C,IAAA,MAAM,YAAY,MAAA,EAAmC;AAErD,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,IAAA,MAAM,CAAC,QAAA,EAAU,gBAAgB,CAAA,GAAI,aAAA,CAAc;AAAA,MACjD,UAAA,EAAY,KAAA;AAAA,MACZ,OAAA,EAAS,YAAA;AAAA,MACT,IAAA,EAAM,UAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,MACtB,CAAC,OAA8B,QAAA,KAAqB;AAClD,QAAA,gBAAA,CAAiB,QAAQ,CAAA;AACzB,QAAA,IAAI,aAAa,QAAA,EAAU;AACzB,UAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,QAAA,CAAA;AAAA,QACpB;AAAA,MACF,CAAA;AAAA,MACA,CAAC,UAAU,QAAQ;AAAA,KACrB;AACA,IAAA,MAAM,EAAE,6BAAA,EAA+B,WAAA,EAAY,GACjD,yBAAA,CAA0B;AAAA,MACxB,eAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,MAAM,WAAA,GAAc,WAAA;AAAA,MAClB,CAAC,GAAA,KAAc;AACb,QAAA,MAAM,OAAA,GAAU,aAAa,GAAG,CAAA;AAChC,QAAA,eAAA,CAAgB,CAAC,QAAQ,kBAAA,CAAmB,GAAA,EAAK,IAAI,KAAA,EAAO,GAAA,CAAI,EAAE,CAAC,CAAA;AAEnE,QAAA,OAAO,MAAM;AACX,UAAA,OAAA,EAAQ;AACR,UAAA,eAAA;AAAA,YAAgB,CAAC,GAAA,KACf,qBAAA,CAAsB,KAAK,GAAA,CAAI,KAAA,EAAO,IAAI,EAAE;AAAA,WAC9C;AAAA,QACF,CAAA;AAAA,MACF,CAAA;AAAA,MACA,CAAC,YAAY;AAAA,KACf;AAEA,IAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,EAAA,EAAYC,MAAAA,KAAkB;AAC/D,MAAA,oBAAA,CAAqB,CAAC,GAAA,KAAQ,kBAAA,CAAmB,GAAA,EAAKA,MAAAA,EAAO,EAAE,CAAC,CAAA;AAChE,MAAA,OAAO,MAAM;AACX,QAAA,oBAAA,CAAqB,CAAC,GAAA,KAAQ,qBAAA,CAAsB,GAAA,EAAKA,MAAAA,EAAO,EAAE,CAAC,CAAA;AAAA,MACrE,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,UAAA,GAAa,WAAA;AAAA,MACjB,CAACA,MAAAA,KAAkB;AACjB,QAAA,OAAO,iBAAA,CAAkB,IAAIA,MAAK,CAAA;AAAA,MACpC,CAAA;AAAA,MACA,CAAC,iBAAiB;AAAA,KACpB;AAEA,IAAA,MAAM,QAAA,GAAW,WAAA;AAAA,MACf,CAACA,MAAAA,KAAkB;AACjB,QAAA,OAAO,eAAA,CAAgB,IAAIA,MAAK,CAAA;AAAA,MAClC,CAAA;AAAA,MACA,CAAC,eAAe;AAAA,KAClB;AAEA,IAAA,MAAM,OAAA,GAAU,OAAA;AAAA,MACd,OAAO;AAAA,QACL,UAAA;AAAA,QACA,oBAAA;AAAA,QACA,oBAAA;AAAA,QACA,yBAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA,EAAW,UAAA;AAAA,QACX,mBAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,mBAAA;AAAA,QACA,YAAA;AAAA,QACA,aAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,6BAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA;AAAA,QACE,UAAA;AAAA,QACA,oBAAA;AAAA,QACA,oBAAA;AAAA,QACA,yBAAA;AAAA,QACA,aAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAA;AAAA,QACA,mBAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,mBAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,cAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,2BACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,OAAA,EAC/B,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,KAAW,GAAG,IAAA,EAC5D,UACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
@@ -9,17 +9,31 @@ const TabsNextContext = createContext(
9
9
  getNext: () => null,
10
10
  getPrevious: () => null,
11
11
  item: () => null,
12
- items: [],
12
+ getIndex: () => -1,
13
+ itemAt: () => null,
14
+ sortItems: () => void 0,
15
+ renderMode: "inline",
16
+ registerBootstrapTab: () => () => void 0,
17
+ setBootstrapTabReady: () => void 0,
18
+ setBootstrapOverflowReady: () => void 0,
13
19
  selected: void 0,
14
20
  registerTab: () => () => void 0,
21
+ updateTab: () => void 0,
22
+ registerRenderedTab: () => () => void 0,
23
+ updateRenderedTab: () => void 0,
24
+ getRenderedTab: () => void 0,
25
+ getRenderedTabOrder: () => -1,
26
+ renderedTabs: [],
15
27
  registerPanel: () => () => void 0,
16
28
  getPanelId: () => void 0,
17
29
  getTabId: () => void 0,
18
30
  setSelected: () => void 0,
19
31
  activeTab: { current: void 0 },
20
- removedActiveTabRef: { current: void 0 },
32
+ selectionFromOverflowValueRef: { current: null },
21
33
  menuOpen: false,
22
- setMenuOpen: () => void 0
34
+ setMenuOpen: () => void 0,
35
+ removalVersion: 0,
36
+ getRemovedItems: () => /* @__PURE__ */ new Map()
23
37
  }
24
38
  );
25
39
  function useTabsNext() {
@@ -1 +1 @@
1
- {"version":3,"file":"TabsNextContext.js","sources":["../src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n type SyntheticEvent,\n useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n id: string;\n value: string;\n element: HTMLElement;\n}\n\nexport interface TabsNextContextValue\n extends Omit<ReturnType<typeof useCollection>, \"registerItem\"> {\n registerTab: (item: Item) => () => void;\n registerPanel: (id: string, value: string) => () => void;\n getPanelId: (value: string) => string | undefined;\n getTabId: (value: string) => string | undefined;\n selected?: string;\n setSelected: (event: SyntheticEvent, value: string) => void;\n activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n removedActiveTabRef: MutableRefObject<string | undefined>;\n menuOpen: boolean;\n setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n \"TabsNextContext\",\n {\n getFirst: () => null,\n getLast: () => null,\n getNext: () => null,\n getPrevious: () => null,\n item: () => null,\n items: [],\n selected: undefined,\n registerTab: () => () => undefined,\n registerPanel: () => () => undefined,\n getPanelId: () => undefined,\n getTabId: () => undefined,\n setSelected: () => undefined,\n activeTab: { current: undefined },\n removedActiveTabRef: { current: undefined },\n menuOpen: false,\n setMenuOpen: () => undefined,\n },\n);\n\nexport function useTabsNext() {\n return useContext(TabsNextContext);\n}\n"],"names":[],"mappings":";;;AA8BO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAA,EAAU,MAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,MAAA;AAAA,IACzB,aAAA,EAAe,MAAM,MAAM,MAAA;AAAA,IAC3B,YAAY,MAAM,MAAA;AAAA,IAClB,UAAU,MAAM,MAAA;AAAA,IAChB,aAAa,MAAM,MAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAChC,mBAAA,EAAqB,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAC1C,QAAA,EAAU,KAAA;AAAA,IACV,aAAa,MAAM;AAAA;AAEvB;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}
1
+ {"version":3,"file":"TabsNextContext.js","sources":["../src/tabs-next/TabsNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n type SyntheticEvent,\n useContext,\n} from \"react\";\nimport type { useCollection } from \"./hooks/useCollection\";\n\nexport interface Item {\n id: string;\n value: string;\n element: HTMLElement | null;\n location?: \"hidden\" | \"main\" | \"overflow\";\n order?: number;\n}\n\nexport interface RenderedTab {\n host: HTMLDivElement;\n id: string;\n marker: HTMLElement | null;\n root: HTMLElement | null;\n trigger: HTMLButtonElement | null;\n value: string;\n width: number;\n}\n\nexport type TabsNextRenderMode = \"inline\" | \"portal\";\n\nexport interface TabsNextContextValue\n extends Omit<\n ReturnType<typeof useCollection>,\n \"registerItem\" | \"updateItem\"\n > {\n renderMode: TabsNextRenderMode;\n registerBootstrapTab: (value: string) => () => void;\n setBootstrapTabReady: (value: string, ready: boolean) => void;\n setBootstrapOverflowReady: (ready: boolean) => void;\n registerTab: (item: Item) => () => void;\n updateTab: (id: string, updates: Partial<Omit<Item, \"id\" | \"value\">>) => void;\n registerRenderedTab: (tab: RenderedTab) => () => void;\n updateRenderedTab: (\n value: string,\n updates: Partial<Omit<RenderedTab, \"value\">>,\n ) => void;\n getRenderedTab: (value: string) => RenderedTab | undefined;\n getRenderedTabOrder: (value: string) => number;\n renderedTabs: RenderedTab[];\n registerPanel: (id: string, value: string) => () => void;\n getPanelId: (value: string) => string | undefined;\n getTabId: (value: string) => string | undefined;\n selected?: string;\n setSelected: (\n event: SyntheticEvent | null,\n value: string,\n source?: \"main\" | \"overflow\",\n ) => void;\n activeTab: MutableRefObject<Pick<Item, \"id\" | \"value\"> | undefined>;\n selectionFromOverflowValueRef: MutableRefObject<string | null>;\n menuOpen: boolean;\n setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport const TabsNextContext = createContext<TabsNextContextValue>(\n \"TabsNextContext\",\n {\n getFirst: () => null,\n getLast: () => null,\n getNext: () => null,\n getPrevious: () => null,\n item: () => null,\n getIndex: () => -1,\n itemAt: () => null,\n sortItems: () => undefined,\n renderMode: \"inline\",\n registerBootstrapTab: () => () => undefined,\n setBootstrapTabReady: () => undefined,\n setBootstrapOverflowReady: () => undefined,\n selected: undefined,\n registerTab: () => () => undefined,\n updateTab: () => undefined,\n registerRenderedTab: () => () => undefined,\n updateRenderedTab: () => undefined,\n getRenderedTab: () => undefined,\n getRenderedTabOrder: () => -1,\n renderedTabs: [],\n registerPanel: () => () => undefined,\n getPanelId: () => undefined,\n getTabId: () => undefined,\n setSelected: () => undefined,\n activeTab: { current: undefined },\n selectionFromOverflowValueRef: { current: null },\n menuOpen: false,\n setMenuOpen: () => undefined,\n removalVersion: 0,\n getRemovedItems: () => new Map(),\n },\n);\n\nexport function useTabsNext() {\n return useContext(TabsNextContext);\n}\n"],"names":[],"mappings":";;;AAgEO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AAAA,IACE,UAAU,MAAM,IAAA;AAAA,IAChB,SAAS,MAAM,IAAA;AAAA,IACf,SAAS,MAAM,IAAA;AAAA,IACf,aAAa,MAAM,IAAA;AAAA,IACnB,MAAM,MAAM,IAAA;AAAA,IACZ,UAAU,MAAM,EAAA;AAAA,IAChB,QAAQ,MAAM,IAAA;AAAA,IACd,WAAW,MAAM,MAAA;AAAA,IACjB,UAAA,EAAY,QAAA;AAAA,IACZ,oBAAA,EAAsB,MAAM,MAAM,MAAA;AAAA,IAClC,sBAAsB,MAAM,MAAA;AAAA,IAC5B,2BAA2B,MAAM,MAAA;AAAA,IACjC,QAAA,EAAU,MAAA;AAAA,IACV,WAAA,EAAa,MAAM,MAAM,MAAA;AAAA,IACzB,WAAW,MAAM,MAAA;AAAA,IACjB,mBAAA,EAAqB,MAAM,MAAM,MAAA;AAAA,IACjC,mBAAmB,MAAM,MAAA;AAAA,IACzB,gBAAgB,MAAM,MAAA;AAAA,IACtB,qBAAqB,MAAM,EAAA;AAAA,IAC3B,cAAc,EAAC;AAAA,IACf,aAAA,EAAe,MAAM,MAAM,MAAA;AAAA,IAC3B,YAAY,MAAM,MAAA;AAAA,IAClB,UAAU,MAAM,MAAA;AAAA,IAChB,aAAa,MAAM,MAAA;AAAA,IACnB,SAAA,EAAW,EAAE,OAAA,EAAS,MAAA,EAAU;AAAA,IAChC,6BAAA,EAA+B,EAAE,OAAA,EAAS,IAAA,EAAK;AAAA,IAC/C,QAAA,EAAU,KAAA;AAAA,IACV,aAAa,MAAM,MAAA;AAAA,IACnB,cAAA,EAAgB,CAAA;AAAA,IAChB,eAAA,EAAiB,sBAAM,IAAI,GAAA;AAAI;AAEnC;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,OAAO,WAAW,eAAe,CAAA;AACnC;;;;"}
@@ -0,0 +1,11 @@
1
+ function isHTMLElement(node) {
2
+ if (!node || typeof node !== "object") {
3
+ return false;
4
+ }
5
+ const ownerDocument = node.ownerDocument;
6
+ const defaultView = ownerDocument == null ? void 0 : ownerDocument.defaultView;
7
+ return !!defaultView && node instanceof defaultView.HTMLElement;
8
+ }
9
+
10
+ export { isHTMLElement };
11
+ //# sourceMappingURL=domUtils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"domUtils.js","sources":["../src/tabs-next/domUtils.ts"],"sourcesContent":["export function isHTMLElement(node: unknown): node is HTMLElement {\n if (!node || typeof node !== \"object\") {\n return false;\n }\n\n const ownerDocument = (node as { ownerDocument?: Document | null })\n .ownerDocument;\n const defaultView = ownerDocument?.defaultView;\n\n return !!defaultView && node instanceof defaultView.HTMLElement;\n}\n"],"names":[],"mappings":"AAAO,SAAS,cAAc,IAAA,EAAoC;AAChE,EAAA,IAAI,CAAC,IAAA,IAAQ,OAAO,IAAA,KAAS,QAAA,EAAU;AACrC,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,gBAAiB,IAAA,CACpB,aAAA;AACH,EAAA,MAAM,cAAc,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,WAAA;AAEnC,EAAA,OAAO,CAAC,CAAC,WAAA,IAAe,IAAA,YAAgB,WAAA,CAAY,WAAA;AACtD;;;;"}
@@ -0,0 +1,82 @@
1
+ const MIN_TRUSTED_TAB_WIDTH = 0.5;
2
+ function calculateVisibleCount({
3
+ gap,
4
+ maxWidth: initialMaxWidth,
5
+ overflowWidth,
6
+ pinnedValue,
7
+ tabs
8
+ }) {
9
+ let maxWidth = initialMaxWidth;
10
+ let currentWidth = 0;
11
+ let nextVisibleCount = 0;
12
+ const visibleItems = [];
13
+ while (nextVisibleCount < tabs.length) {
14
+ const item = tabs[nextVisibleCount];
15
+ if (!item) {
16
+ break;
17
+ }
18
+ if (item.width == null) {
19
+ return null;
20
+ }
21
+ const itemWidth = item.width + gap;
22
+ if (currentWidth + itemWidth > maxWidth) {
23
+ break;
24
+ }
25
+ currentWidth += itemWidth;
26
+ visibleItems.push(item);
27
+ nextVisibleCount += 1;
28
+ }
29
+ const allTabsFit = nextVisibleCount >= tabs.length;
30
+ if (allTabsFit) {
31
+ return nextVisibleCount;
32
+ }
33
+ maxWidth -= overflowWidth;
34
+ while (currentWidth > maxWidth) {
35
+ const removed = visibleItems.pop();
36
+ if (!removed) {
37
+ break;
38
+ }
39
+ if (removed.width == null) {
40
+ return null;
41
+ }
42
+ currentWidth -= removed.width + gap;
43
+ nextVisibleCount -= 1;
44
+ }
45
+ const pinnedItem = pinnedValue == null ? null : tabs.find((item) => item.value === pinnedValue) ?? null;
46
+ if (pinnedItem && !visibleItems.includes(pinnedItem)) {
47
+ if (pinnedItem.width == null) {
48
+ return null;
49
+ }
50
+ const pinnedWidth = pinnedItem.width + gap;
51
+ while (currentWidth + pinnedWidth > maxWidth) {
52
+ const removed = visibleItems.pop();
53
+ if (!removed) {
54
+ break;
55
+ }
56
+ if (removed.width == null) {
57
+ return null;
58
+ }
59
+ currentWidth -= removed.width + gap;
60
+ nextVisibleCount -= 1;
61
+ }
62
+ }
63
+ return Math.max(0, nextVisibleCount);
64
+ }
65
+ function partitionVisibleValues(orderedValues, visibleCount, pinnedValue) {
66
+ let visibleValues = orderedValues.slice(0, visibleCount);
67
+ let hiddenValues = orderedValues.slice(visibleCount);
68
+ const hiddenPinnedIndex = pinnedValue != null ? hiddenValues.indexOf(pinnedValue) : -1;
69
+ if (hiddenPinnedIndex !== -1) {
70
+ const pinnedHiddenValue = hiddenValues[hiddenPinnedIndex];
71
+ hiddenValues = hiddenValues.filter(
72
+ (_, index) => index !== hiddenPinnedIndex
73
+ );
74
+ if (pinnedHiddenValue !== void 0) {
75
+ visibleValues = [...visibleValues, pinnedHiddenValue];
76
+ }
77
+ }
78
+ return { visibleValues, hiddenValues };
79
+ }
80
+
81
+ export { MIN_TRUSTED_TAB_WIDTH, calculateVisibleCount, partitionVisibleValues };
82
+ //# sourceMappingURL=overflowMath.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"overflowMath.js","sources":["../src/tabs-next/hooks/overflowMath.ts"],"sourcesContent":["export const MIN_TRUSTED_TAB_WIDTH = 0.5;\n\nexport interface MeasuredOverflowTab {\n value: string;\n width: number | null;\n}\n\ninterface CalculateVisibleCountProps {\n gap: number;\n maxWidth: number;\n overflowWidth: number;\n pinnedValue?: string;\n tabs: MeasuredOverflowTab[];\n}\n\nexport function calculateVisibleCount({\n gap,\n maxWidth: initialMaxWidth,\n overflowWidth,\n pinnedValue,\n tabs,\n}: CalculateVisibleCountProps) {\n let maxWidth = initialMaxWidth;\n let currentWidth = 0;\n let nextVisibleCount = 0;\n const visibleItems: MeasuredOverflowTab[] = [];\n\n while (nextVisibleCount < tabs.length) {\n const item = tabs[nextVisibleCount];\n if (!item) {\n break;\n }\n\n if (item.width == null) {\n return null;\n }\n\n const itemWidth = item.width + gap;\n if (currentWidth + itemWidth > maxWidth) {\n break;\n }\n\n currentWidth += itemWidth;\n visibleItems.push(item);\n nextVisibleCount += 1;\n }\n\n const allTabsFit = nextVisibleCount >= tabs.length;\n if (allTabsFit) {\n return nextVisibleCount;\n }\n\n maxWidth -= overflowWidth;\n\n while (currentWidth > maxWidth) {\n const removed = visibleItems.pop();\n if (!removed) {\n break;\n }\n if (removed.width == null) {\n return null;\n }\n currentWidth -= removed.width + gap;\n nextVisibleCount -= 1;\n }\n\n const pinnedItem =\n pinnedValue == null\n ? null\n : (tabs.find((item) => item.value === pinnedValue) ?? null);\n\n if (pinnedItem && !visibleItems.includes(pinnedItem)) {\n if (pinnedItem.width == null) {\n return null;\n }\n\n const pinnedWidth = pinnedItem.width + gap;\n while (currentWidth + pinnedWidth > maxWidth) {\n const removed = visibleItems.pop();\n if (!removed) {\n break;\n }\n if (removed.width == null) {\n return null;\n }\n currentWidth -= removed.width + gap;\n nextVisibleCount -= 1;\n }\n }\n\n return Math.max(0, nextVisibleCount);\n}\n\nexport function partitionVisibleValues(\n orderedValues: string[],\n visibleCount: number,\n pinnedValue?: string,\n) {\n let visibleValues = orderedValues.slice(0, visibleCount);\n let hiddenValues = orderedValues.slice(visibleCount);\n\n const hiddenPinnedIndex =\n pinnedValue != null ? hiddenValues.indexOf(pinnedValue) : -1;\n\n if (hiddenPinnedIndex !== -1) {\n const pinnedHiddenValue = hiddenValues[hiddenPinnedIndex];\n hiddenValues = hiddenValues.filter(\n (_, index) => index !== hiddenPinnedIndex,\n );\n if (pinnedHiddenValue !== undefined) {\n visibleValues = [...visibleValues, pinnedHiddenValue];\n }\n }\n\n return { visibleValues, hiddenValues };\n}\n"],"names":[],"mappings":"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"}