npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.74 → 1.0.0-alpha.75 - Mend

@salt-ds/lab 1.0.0-alpha.74 → 1.0.0-alpha.75

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 (347) hide show

package/dist-es/responsive/useOverflowLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n type ResizeHandler,\n useResizeObserver,\n} from \"../responsive/useResizeObserver\";\nimport type {\n ElementRef,\n ManagedListRef,\n OverflowItem,\n OverflowLayoutHookProps,\n} from \"./overflowTypes\";\nimport { getIsOverflowed, measureContainerOverflow } from \"./overflowUtils\";\nimport { useDynamicCollapse } from \"./useDynamicCollapse\";\nimport { useInstantCollapse } from \"./useInstantCollapse\";\nimport { useOverflow } from \"./useOverflow\";\nimport { useReclaimSpace } from \"./useReclaimSpace\";\n\nconst MONITORED_DIMENSIONS: { [key: string]: string[] } = {\n horizontal: [\"width\", \"scrollHeight\"],\n vertical: [\"height\", \"scrollWidth\"],\n none: [],\n};\n\ntype overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;\n\n// we need id, just to be able to assign id to overflowIndicator in useOverflow\nexport const useOverflowLayout = ({\n collectionHook,\n id,\n orientation,\n label = \"Toolbar\",\n disableOverflow = false,\n}: OverflowLayoutHookProps): [ElementRef, overflowUpdate] => {\n const overflowContainerRef: ElementRef = useRef(null);\n const overflowItemsRef: ManagedListRef = useRef([]);\n const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });\n const { innerContainerSize } = measurement.current;\n\n const { dispatch, version: collectionVersion } = collectionHook;\n overflowItemsRef.current = collectionHook.data;\n\n const {\n onResize: onOverflowResize,\n resetMeasurements: resetOverflowMeasurements,\n } = useOverflow({\n collectionHook,\n id,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const hasOverflowedItems = getIsOverflowed(collectionHook.data);\n // const hasOverflowedItems = getIsOverflowed(managedItems);\n\n const {\n onResize: onDynamicResize,\n resetMeasurements: resetDynamicMeasurements,\n } = useDynamicCollapse({\n collectionHook,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const {\n onResize: onInstantResize,\n resetMeasurements: resetInstantMeasurements,\n } = useInstantCollapse({\n collectionHook,\n hasOverflowedItems,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const { onResize: onReclaimResize } = useReclaimSpace({\n collectionHook,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const resizeHandler: ResizeHandler = useCallback(\n ({\n scrollHeight,\n height = scrollHeight,\n scrollWidth,\n width = scrollWidth,\n }) => {\n const size = orientation === \"horizontal\" ? width : height;\n if (typeof size === \"number\") {\n const { innerContainerSize } = measurement.current;\n const sizeDiff = size - innerContainerSize;\n // Tiny size diffs seem to be down to the relative sub-pixel innaccuracy of\n // ResizeObserver vs getBoundingClientRect\n if (Math.abs(sizeDiff) > 0.5) {\n measurement.current.innerContainerSize = size;\n const containerHasGrown = size > innerContainerSize;\n // Note: any one of these hooks may trigger a render which\n // may affect the overflow state that the next hook sees.\n // Hence, they all test for overflow internally and independently.\n onDynamicResize(size, containerHasGrown);\n onInstantResize(size, containerHasGrown);\n onOverflowResize(size, containerHasGrown);\n onReclaimResize(size, containerHasGrown);\n }\n }\n },\n [\n onDynamicResize,\n onInstantResize,\n onOverflowResize,\n onReclaimResize,\n orientation,\n ],\n );\n\n const measureAndInitialize = useCallback(() => {\n const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(\n overflowContainerRef,\n orientation,\n );\n\n measurement.current = contentWidthAndDepth;\n const { innerContainerSize } = contentWidthAndDepth;\n // TODO check this with complex combinations\n let handled = resetInstantMeasurements(isOverflowing);\n if (!handled) {\n handled = resetDynamicMeasurements();\n if (!handled) {\n resetOverflowMeasurements?.(isOverflowing, innerContainerSize);\n }\n }\n }, [\n orientation,\n resetInstantMeasurements,\n resetDynamicMeasurements,\n resetOverflowMeasurements,\n ]);\n\n const switchPriorities = useCallback(\n (item1: OverflowItem, item2: OverflowItem) => {\n const { priority: priority1 } = item1;\n const { priority: priority2 } = item2;\n if (priority1 !== priority2) {\n dispatch({\n type: \"update-items\",\n overflowItems: [\n { id: item1.id, priority: priority2 },\n { id: item2.id, priority: priority1 },\n ],\n });\n // Why do we need a timeout here when we don't inside resizeHandler ?\n setTimeout(measureAndInitialize, 0);\n }\n },\n [dispatch, measureAndInitialize],\n );\n\n // Important that we register our resize handler before we measure and\n // initialize. The initialization may trigger changes which we want the\n // resize observer to detect (when we have nested overflowables).\n useResizeObserver(\n overflowContainerRef,\n MONITORED_DIMENSIONS[disableOverflow ? \"none\" : orientation],\n resizeHandler,\n );\n\n // This hook runs after a measurememnt cycle, not after every single change to\n // collection data. The version attribute has been introduced specifically for this.\n useEffect(() => {\n if (!disableOverflow) {\n measureAndInitialize();\n }\n }, [collectionVersion, disableOverflow, measureAndInitialize]);\n\n return [overflowContainerRef, switchPriorities];\n};\n"],"names":["innerContainerSize"],"mappings":"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~~IAAI,~~CAAC,~~eAAiB~~,EAAA;~~AACpB~~,MAAqB,oBAAA,EAAA;AAAA;AACvB,GACC,EAAA,CAAC,iBAAmB,EAAA,eAAA,EAAiB,oBAAoB,CAAC,CAAA;AAE7D,EAAO,OAAA,CAAC,sBAAsB,gBAAgB,CAAA;AAChD;;;;"}
1	+ {"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n type ResizeHandler,\n useResizeObserver,\n} from \"../responsive/useResizeObserver\";\nimport type {\n ElementRef,\n ManagedListRef,\n OverflowItem,\n OverflowLayoutHookProps,\n} from \"./overflowTypes\";\nimport { getIsOverflowed, measureContainerOverflow } from \"./overflowUtils\";\nimport { useDynamicCollapse } from \"./useDynamicCollapse\";\nimport { useInstantCollapse } from \"./useInstantCollapse\";\nimport { useOverflow } from \"./useOverflow\";\nimport { useReclaimSpace } from \"./useReclaimSpace\";\n\nconst MONITORED_DIMENSIONS: { [key: string]: string[] } = {\n horizontal: [\"width\", \"scrollHeight\"],\n vertical: [\"height\", \"scrollWidth\"],\n none: [],\n};\n\ntype overflowUpdate = (item1: OverflowItem, item2: OverflowItem) => void;\n\n// we need id, just to be able to assign id to overflowIndicator in useOverflow\nexport const useOverflowLayout = ({\n collectionHook,\n id,\n orientation,\n label = \"Toolbar\",\n disableOverflow = false,\n}: OverflowLayoutHookProps): [ElementRef, overflowUpdate] => {\n const overflowContainerRef: ElementRef = useRef(null);\n const overflowItemsRef: ManagedListRef = useRef([]);\n const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });\n const { innerContainerSize } = measurement.current;\n\n const { dispatch, version: collectionVersion } = collectionHook;\n overflowItemsRef.current = collectionHook.data;\n\n const {\n onResize: onOverflowResize,\n resetMeasurements: resetOverflowMeasurements,\n } = useOverflow({\n collectionHook,\n id,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const hasOverflowedItems = getIsOverflowed(collectionHook.data);\n // const hasOverflowedItems = getIsOverflowed(managedItems);\n\n const {\n onResize: onDynamicResize,\n resetMeasurements: resetDynamicMeasurements,\n } = useDynamicCollapse({\n collectionHook,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const {\n onResize: onInstantResize,\n resetMeasurements: resetInstantMeasurements,\n } = useInstantCollapse({\n collectionHook,\n hasOverflowedItems,\n innerContainerSize,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const { onResize: onReclaimResize } = useReclaimSpace({\n collectionHook,\n label,\n overflowItemsRef,\n orientation,\n overflowContainerRef,\n });\n\n const resizeHandler: ResizeHandler = useCallback(\n ({\n scrollHeight,\n height = scrollHeight,\n scrollWidth,\n width = scrollWidth,\n }) => {\n const size = orientation === \"horizontal\" ? width : height;\n if (typeof size === \"number\") {\n const { innerContainerSize } = measurement.current;\n const sizeDiff = size - innerContainerSize;\n // Tiny size diffs seem to be down to the relative sub-pixel innaccuracy of\n // ResizeObserver vs getBoundingClientRect\n if (Math.abs(sizeDiff) > 0.5) {\n measurement.current.innerContainerSize = size;\n const containerHasGrown = size > innerContainerSize;\n // Note: any one of these hooks may trigger a render which\n // may affect the overflow state that the next hook sees.\n // Hence, they all test for overflow internally and independently.\n onDynamicResize(size, containerHasGrown);\n onInstantResize(size, containerHasGrown);\n onOverflowResize(size, containerHasGrown);\n onReclaimResize(size, containerHasGrown);\n }\n }\n },\n [\n onDynamicResize,\n onInstantResize,\n onOverflowResize,\n onReclaimResize,\n orientation,\n ],\n );\n\n const measureAndInitialize = useCallback(() => {\n const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(\n overflowContainerRef,\n orientation,\n );\n\n measurement.current = contentWidthAndDepth;\n const { innerContainerSize } = contentWidthAndDepth;\n // TODO check this with complex combinations\n let handled = resetInstantMeasurements(isOverflowing);\n if (!handled) {\n handled = resetDynamicMeasurements();\n if (!handled) {\n resetOverflowMeasurements?.(isOverflowing, innerContainerSize);\n }\n }\n }, [\n orientation,\n resetInstantMeasurements,\n resetDynamicMeasurements,\n resetOverflowMeasurements,\n ]);\n\n const switchPriorities = useCallback(\n (item1: OverflowItem, item2: OverflowItem) => {\n const { priority: priority1 } = item1;\n const { priority: priority2 } = item2;\n if (priority1 !== priority2) {\n dispatch({\n type: \"update-items\",\n overflowItems: [\n { id: item1.id, priority: priority2 },\n { id: item2.id, priority: priority1 },\n ],\n });\n // Why do we need a timeout here when we don't inside resizeHandler ?\n setTimeout(measureAndInitialize, 0);\n }\n },\n [dispatch, measureAndInitialize],\n );\n\n // Important that we register our resize handler before we measure and\n // initialize. The initialization may trigger changes which we want the\n // resize observer to detect (when we have nested overflowables).\n useResizeObserver(\n overflowContainerRef,\n MONITORED_DIMENSIONS[disableOverflow ? \"none\" : orientation],\n resizeHandler,\n );\n\n // This hook runs after a measurememnt cycle, not after every single change to\n // collection data. The version attribute has been introduced specifically for this.\n useEffect(() => {\n if (!disableOverflow && collectionVersion != null) {\n measureAndInitialize();\n }\n }, [collectionVersion, disableOverflow, measureAndInitialize]);\n\n return [overflowContainerRef, switchPriorities];\n};\n"],"names":["innerContainerSize"],"mappings":"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"}

package/dist-es/responsive/useReclaimSpace.js CHANGED Viewed

@@ -34,7 +34,7 @@ const canReleaseReclaimedSpace = (size, items) => {
 const mightBeAbleToReclaimSpace = (items) => items.some(canReclaimSpace);
 const useReclaimSpace = ({
   collectionHook,
-  label = "Toolbar",
+  label: _label = "Toolbar",
   overflowItemsRef: managedItemsRef,
   overflowContainerRef: ref,
   orientation

package/dist-es/responsive/useReclaimSpace.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useReclaimSpace.js","sources":["../src/responsive/useReclaimSpace.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport type {\n OverflowHookProps,\n OverflowHookResult,\n OverflowItem,\n} from \"./overflowTypes\";\n\nimport {\n getOverflowIndicator,\n measureContainerOverflow,\n} from \"./overflowUtils\";\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst canReclaimSpace = (item: OverflowItem) =>\n item.collapsed && item.reclaimSpace;\n\nconst hasReclaimedSpace = (item: OverflowItem) => item.reclaimedSpace;\nconst getReclaimableSpace = ({ size, minSize = 0 }: OverflowItem) =>\n size - minSize;\n\nconst findNextOverflowedItem = (items: OverflowItem[]) => {\n const overflowedItems = items.filter((item) => item.overflowed);\n const minPriority = Math.min(...overflowedItems.map(getPriority));\n for (let i = 0; i < overflowedItems.length; i++) {\n if (overflowedItems[i].priority === minPriority) {\n return overflowedItems[i];\n }\n }\n return null;\n};\n\nexport const addAllVisible = (sum: number, m: OverflowItem) =>\n sum + (m.overflowed ? 0 : m.size);\n\nconst canReleaseReclaimedSpace = (size: number, items: OverflowItem[]) => {\n const claimant = items.find(hasReclaimedSpace);\n const overflowedItem = findNextOverflowedItem(items);\n if (claimant && overflowedItem) {\n const renderedSize = items.reduce(addAllVisible, 0);\n const { size: indicatorSize } = getOverflowIndicator(items) ?? { size: 0 };\n const { size: overflowedSize } = overflowedItem;\n // TODO we can discount the indicator size ONLY IF overflowed item is only overflowed item\n const reclaimableSpace = getReclaimableSpace(claimant);\n const renderedSizeAfterReclaim =\n renderedSize - reclaimableSpace - indicatorSize;\n const maxAvailableSpace = size - renderedSizeAfterReclaim;\n if (maxAvailableSpace >= overflowedSize) {\n return true;\n }\n }\n};\n\nconst mightBeAbleToReclaimSpace = (items: OverflowItem[]) =>\n items.some(canReclaimSpace);\n\n// We need to release the reclaimed space (i.e take it back from the collapsed item and re-assign it\n// as available space) when container grows and space now allows overflowed item to be 'un-wrapped'\n\nexport const useReclaimSpace = ({\n collectionHook,\n label = \"Toolbar\",\n overflowItemsRef: managedItemsRef,\n overflowContainerRef: ref,\n orientation,\n}: OverflowHookProps): OverflowHookResult => {\n const releaseReclaimedSpace = useCallback(() => {\n const { current: managedItems } = managedItemsRef;\n\n const claimant = managedItems.find(hasReclaimedSpace);\n if (claimant) {\n // Might not always need to collapse, if there is enough available space for it to still be collapsing then\n // collapse the claimant and turn off reclaimed\n collectionHook.dispatch({\n type: \"replace-item\",\n overflowItem: {\n ...claimant,\n collapsed: true,\n collapsing: false,\n reclaimedSpace: undefined,\n size: claimant.minSize as number,\n fullSize: claimant.size,\n },\n });\n }\n }, [managedItemsRef, collectionHook.dispatch]);\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { isOverflowing: willOverflow } = measureContainerOverflow(\n ref,\n orientation,\n );\n const { current: managedItems } = managedItemsRef;\n\n if (containerHasGrown && canReleaseReclaimedSpace(size, managedItems)) {\n releaseReclaimedSpace();\n } else if (\n !containerHasGrown &&\n willOverflow &&\n mightBeAbleToReclaimSpace(managedItems)\n ) {\n const collapsedChild = managedItems.find(canReclaimSpace);\n if (collapsedChild) {\n collectionHook.dispatch({\n type: \"replace-item\",\n overflowItem: {\n ...collapsedChild,\n collapsed: false,\n collapsing: true,\n reclaimedSpace: true,\n size: collapsedChild.fullSize as number,\n fullSize: null,\n },\n });\n }\n }\n },\n [\n ref,\n managedItemsRef,\n releaseReclaimedSpace,\n collectionHook.dispatch,\n orientation,\n ],\n );\n\n return {\n onResize: handleResize,\n };\n};\n"],"names":[],"mappings":";;;AAYA,MAAM,WAAA,GAAc,CAAC,IAAA,KAAuB,IAAK,CAAA,QAAA;AAEjD,MAAM,eAAkB,GAAA,CAAC,IACvB,KAAA,IAAA,CAAK,aAAa,IAAK,CAAA,YAAA;AAEzB,MAAM,iBAAA,GAAoB,CAAC,IAAA,KAAuB,IAAK,CAAA,cAAA;AACvD,MAAM,sBAAsB,CAAC,EAAE,MAAM,OAAU,GAAA,CAAA,OAC7C,IAAO,GAAA,OAAA;AAET,MAAM,sBAAA,GAAyB,CAAC,KAA0B,KAAA;AACxD,EAAA,MAAM,kBAAkB,KAAM,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,KAAK,UAAU,CAAA;AAC9D,EAAA,MAAM,cAAc,IAAK,CAAA,GAAA,CAAI,GAAG,eAAgB,CAAA,GAAA,CAAI,WAAW,CAAC,CAAA;AAChE,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,eAAA,CAAgB,QAAQ,CAAK,EAAA,EAAA;AAC/C,IAAA,IAAI,eAAgB,CAAA,CAAC,CAAE,CAAA,QAAA,KAAa,WAAa,EAAA;AAC/C,MAAA,OAAO,gBAAgB,CAAC,CAAA;AAAA;AAC1B;AAEF,EAAO,OAAA,IAAA;AACT,CAAA;AAEa,MAAA,aAAA,GAAgB,CAAC,GAAa,EAAA,CAAA,KACzC,OAAO,CAAE,CAAA,UAAA,GAAa,IAAI,CAAE,CAAA,IAAA;AAE9B,MAAM,wBAAA,GAA2B,CAAC,IAAA,EAAc,KAA0B,KAAA;AACxE,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,IAAA,CAAK,iBAAiB,CAAA;AAC7C,EAAM,MAAA,cAAA,GAAiB,uBAAuB,KAAK,CAAA;AACnD,EAAA,IAAI,YAAY,cAAgB,EAAA;AAC9B,IAAA,MAAM,YAAe,GAAA,KAAA,CAAM,MAAO,CAAA,aAAA,EAAe,CAAC,CAAA;AAClD,IAAM,MAAA,EAAE,MAAM,aAAc,EAAA,GAAI,qBAAqB,KAAK,CAAA,IAAK,EAAE,IAAA,EAAM,CAAE,EAAA;AACzE,IAAM,MAAA,EAAE,IAAM,EAAA,cAAA,EAAmB,GAAA,cAAA;AAEjC,IAAM,MAAA,gBAAA,GAAmB,oBAAoB,QAAQ,CAAA;AACrD,IAAM,MAAA,wBAAA,GACJ,eAAe,gBAAmB,GAAA,aAAA;AACpC,IAAA,MAAM,oBAAoB,IAAO,GAAA,wBAAA;AACjC,IAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,MAAO,OAAA,IAAA;AAAA;AACT;AAEJ,CAAA;AAEA,MAAM,yBAA4B,GAAA,CAAC,KACjC,KAAA,KAAA,CAAM,KAAK,eAAe,CAAA;AAKrB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAA;AAAA,EACA,~~KAAQ~~,GAAA,SAAA;AAAA,~~EACR~~,gBAAkB,EAAA,eAAA;AAAA,EAClB,oBAAsB,EAAA,GAAA;AAAA,EACtB;AACF,CAA6C,KAAA;AAC3C,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA;AAElC,IAAM,MAAA,QAAA,GAAW,YAAa,CAAA,IAAA,CAAK,iBAAiB,CAAA;AACpD,IAAA,IAAI,QAAU,EAAA;AAGZ,MAAA,cAAA,CAAe,QAAS,CAAA;AAAA,QACtB,IAAM,EAAA,cAAA;AAAA,QACN,YAAc,EAAA;AAAA,UACZ,GAAG,QAAA;AAAA,UACH,SAAW,EAAA,IAAA;AAAA,UACX,UAAY,EAAA,KAAA;AAAA,UACZ,cAAgB,EAAA,MAAA;AAAA,UAChB,MAAM,QAAS,CAAA,OAAA;AAAA,UACf,UAAU,QAAS,CAAA;AAAA;AACrB,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,eAAiB,EAAA,cAAA,CAAe,QAAQ,CAAC,CAAA;AAE7C,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAc,iBAAgC,KAAA;AAC7C,MAAM,MAAA,EAAE,aAAe,EAAA,YAAA,EAAiB,GAAA,wBAAA;AAAA,QACtC,GAAA;AAAA,QACA;AAAA,OACF;AACA,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA;AAElC,MAAA,IAAI,iBAAqB,IAAA,wBAAA,CAAyB,IAAM,EAAA,YAAY,CAAG,EAAA;AACrE,QAAsB,qBAAA,EAAA;AAAA,iBAEtB,CAAC,iBAAA,IACD,YACA,IAAA,yBAAA,CAA0B,YAAY,CACtC,EAAA;AACA,QAAM,MAAA,cAAA,GAAiB,YAAa,CAAA,IAAA,CAAK,eAAe,CAAA;AACxD,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAA,cAAA,CAAe,QAAS,CAAA;AAAA,YACtB,IAAM,EAAA,cAAA;AAAA,YACN,YAAc,EAAA;AAAA,cACZ,GAAG,cAAA;AAAA,cACH,SAAW,EAAA,KAAA;AAAA,cACX,UAAY,EAAA,IAAA;AAAA,cACZ,cAAgB,EAAA,IAAA;AAAA,cAChB,MAAM,cAAe,CAAA,QAAA;AAAA,cACrB,QAAU,EAAA;AAAA;AACZ,WACD,CAAA;AAAA;AACH;AACF,KACF;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,eAAA;AAAA,MACA,qBAAA;AAAA,MACA,cAAe,CAAA,QAAA;AAAA,MACf;AAAA;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA;AAAA,GACZ;AACF;;;;"}
1	+ {"version":3,"file":"useReclaimSpace.js","sources":["../src/responsive/useReclaimSpace.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport type {\n OverflowHookProps,\n OverflowHookResult,\n OverflowItem,\n} from \"./overflowTypes\";\n\nimport {\n getOverflowIndicator,\n measureContainerOverflow,\n} from \"./overflowUtils\";\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst canReclaimSpace = (item: OverflowItem) =>\n item.collapsed && item.reclaimSpace;\n\nconst hasReclaimedSpace = (item: OverflowItem) => item.reclaimedSpace;\nconst getReclaimableSpace = ({ size, minSize = 0 }: OverflowItem) =>\n size - minSize;\n\nconst findNextOverflowedItem = (items: OverflowItem[]) => {\n const overflowedItems = items.filter((item) => item.overflowed);\n const minPriority = Math.min(...overflowedItems.map(getPriority));\n for (let i = 0; i < overflowedItems.length; i++) {\n if (overflowedItems[i].priority === minPriority) {\n return overflowedItems[i];\n }\n }\n return null;\n};\n\nexport const addAllVisible = (sum: number, m: OverflowItem) =>\n sum + (m.overflowed ? 0 : m.size);\n\nconst canReleaseReclaimedSpace = (size: number, items: OverflowItem[]) => {\n const claimant = items.find(hasReclaimedSpace);\n const overflowedItem = findNextOverflowedItem(items);\n if (claimant && overflowedItem) {\n const renderedSize = items.reduce(addAllVisible, 0);\n const { size: indicatorSize } = getOverflowIndicator(items) ?? { size: 0 };\n const { size: overflowedSize } = overflowedItem;\n // TODO we can discount the indicator size ONLY IF overflowed item is only overflowed item\n const reclaimableSpace = getReclaimableSpace(claimant);\n const renderedSizeAfterReclaim =\n renderedSize - reclaimableSpace - indicatorSize;\n const maxAvailableSpace = size - renderedSizeAfterReclaim;\n if (maxAvailableSpace >= overflowedSize) {\n return true;\n }\n }\n};\n\nconst mightBeAbleToReclaimSpace = (items: OverflowItem[]) =>\n items.some(canReclaimSpace);\n\n// We need to release the reclaimed space (i.e take it back from the collapsed item and re-assign it\n// as available space) when container grows and space now allows overflowed item to be 'un-wrapped'\n\nexport const useReclaimSpace = ({\n collectionHook,\n label: _label = \"Toolbar\",\n overflowItemsRef: managedItemsRef,\n overflowContainerRef: ref,\n orientation,\n}: OverflowHookProps): OverflowHookResult => {\n const releaseReclaimedSpace = useCallback(() => {\n const { current: managedItems } = managedItemsRef;\n\n const claimant = managedItems.find(hasReclaimedSpace);\n if (claimant) {\n // Might not always need to collapse, if there is enough available space for it to still be collapsing then\n // collapse the claimant and turn off reclaimed\n collectionHook.dispatch({\n type: \"replace-item\",\n overflowItem: {\n ...claimant,\n collapsed: true,\n collapsing: false,\n reclaimedSpace: undefined,\n size: claimant.minSize as number,\n fullSize: claimant.size,\n },\n });\n }\n }, [managedItemsRef, collectionHook.dispatch]);\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { isOverflowing: willOverflow } = measureContainerOverflow(\n ref,\n orientation,\n );\n const { current: managedItems } = managedItemsRef;\n\n if (containerHasGrown && canReleaseReclaimedSpace(size, managedItems)) {\n releaseReclaimedSpace();\n } else if (\n !containerHasGrown &&\n willOverflow &&\n mightBeAbleToReclaimSpace(managedItems)\n ) {\n const collapsedChild = managedItems.find(canReclaimSpace);\n if (collapsedChild) {\n collectionHook.dispatch({\n type: \"replace-item\",\n overflowItem: {\n ...collapsedChild,\n collapsed: false,\n collapsing: true,\n reclaimedSpace: true,\n size: collapsedChild.fullSize as number,\n fullSize: null,\n },\n });\n }\n }\n },\n [\n ref,\n managedItemsRef,\n releaseReclaimedSpace,\n collectionHook.dispatch,\n orientation,\n ],\n );\n\n return {\n onResize: handleResize,\n };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/responsive/useResizeObserver.js CHANGED Viewed

@@ -55,6 +55,10 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       {}
     );
   }, []);
+  const resizeCallback = useRef(onResize);
+  useIsomorphicLayoutEffect(() => {
+    resizeCallback.current = onResize;
+  }, [onResize]);
   useIsomorphicLayoutEffect(() => {
     if (!resizeObserver) {
       return void 0;
@@ -62,6 +66,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
     const target = ref.current;
     let cleanedUp = false;
     async function registerObserver() {
+      var _a;
       observedMap.set(target, { measurements: {} });
       cleanedUp = false;
       const { fonts } = document;
@@ -75,7 +80,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
           observedTarget.measurements = measurements;
           resizeObserver.observe(target);
           if (reportInitialSize) {
-            onResize(measurements);
+            (_a = resizeCallback.current) == null ? void 0 : _a.call(resizeCallback, measurements);
           }
         }
       }
@@ -95,7 +100,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
         cleanedUp = true;
       }
     };
-  }, [ref, measure]);
+  }, [ref, measure, reportInitialSize]);
   useIsomorphicLayoutEffect(() => {
     const target = ref.current;
     const record = observedMap.get(target);

package/dist-es/responsive/useResizeObserver.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useResizeObserver.js","sources":["../src/responsive/useResizeObserver.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string \| number> = {\n height?: T;\n scrollHeight?: T;\n scrollWidth?: T;\n width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n onResize?: ResizeHandler;\n measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n element: HTMLElement,\n contentRect: DOMRectReadOnly,\n dimension: measuredDimension,\n): number => {\n switch (dimension) {\n case \"height\":\n return contentRect.height;\n case \"scrollHeight\":\n return element.scrollHeight;\n case \"scrollWidth\":\n return element.scrollWidth;\n case \"width\":\n return contentRect.width;\n default:\n return 0;\n }\n};\n\nconst resizeObserver =\n typeof ResizeObserver !== \"undefined\"\n ? new ResizeObserver((entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const { target, contentRect } = entry;\n const observedTarget = observedMap.get(target as HTMLElement);\n if (observedTarget) {\n const { onResize, measurements } = observedTarget;\n let sizeChanged = false;\n for (const [dimension, size] of Object.entries(measurements)) {\n const newSize = getTargetSize(\n target as HTMLElement,\n contentRect,\n dimension as measuredDimension,\n );\n if (newSize !== size) {\n sizeChanged = true;\n measurements[dimension as measuredDimension] = newSize;\n }\n }\n if (sizeChanged) {\n onResize?.(measurements);\n }\n }\n }\n })\n : null;\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n ref: RefObject<Element \| HTMLElement \| null>,\n dimensions: string[],\n onResize: ResizeHandler,\n reportInitialSize = false,\n): void {\n const dimensionsRef = useRef(dimensions);\n const measure = useCallback((target: HTMLElement): measurements<number> => {\n const rect = target.getBoundingClientRect();\n return dimensionsRef.current.reduce(\n (map: { [key: string]: number }, dim) => {\n map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n return map;\n },\n {},\n );\n }, []);\n\n // TODO use ref to store resizeHandler here\n // resize handler registered with REsizeObserver will never change\n // use ref to store user onResize callback here\n // resizeHandler will call user callback.current\n\n // Keep this effect separate in case user inadvertently passes different\n // dimensions or callback instance each time - we only ever want to\n // initiate new observation when ref changes.\n useIsomorphicLayoutEffect(() => {\n if (!resizeObserver) {\n return undefined;\n }\n\n const target = ref.current as HTMLElement;\n let cleanedUp = false;\n\n async function registerObserver() {\n // Create the map entry immediately. useEffect may fire below\n // before fonts are ready and attempt to update entry\n observedMap.set(target, { measurements: {} as measurements<number> });\n cleanedUp = false;\n\n const { fonts } = document;\n if (fonts) {\n await fonts.ready;\n }\n if (!cleanedUp && resizeObserver) {\n const observedTarget = observedMap.get(target);\n if (observedTarget) {\n const measurements = measure(target);\n observedTarget.measurements = measurements;\n resizeObserver.observe(target);\n if (reportInitialSize) {\n ~~onResize~~(measurements);\n }\n }\n }\n }\n\n if (target) {\n // TODO might we want multiple callers to attach a listener to the same element ?\n if (observedMap.has(target)) {\n throw Error(\n \"useResizeObserver attemping to observe same element twice\",\n );\n }\n void registerObserver();\n }\n return () => {\n if (target && observedMap.has(target)) {\n resizeObserver.unobserve(target);\n observedMap.delete(target);\n cleanedUp = true;\n }\n };\n }, [ref, measure]);\n\n useIsomorphicLayoutEffect(() => {\n const target = ref.current as HTMLElement;\n const record = observedMap.get(target);\n if (record) {\n if (dimensionsRef.current !== dimensions) {\n dimensionsRef.current = dimensions;\n const measurements = measure(target);\n record.measurements = measurements;\n }\n // Might not have changed, but no harm ...\n record.onResize = onResize;\n }\n }, [dimensions, measure, ref, onResize]);\n\n // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":";;;AAEa,MAAA,WAAA,GAAc,CAAC,QAAA,EAAU,OAAO;AAChC,MAAA,UAAA,GAAa,CAAC,QAAQ;AACtB,MAAA,SAAA,GAAY,CAAC,OAAO;AAgBjC,MAAM,WAAA,uBAAkB,OAAsC,EAAA;AAE9D,MAAM,aAAgB,GAAA,CACpB,OACA,EAAA,WAAA,EACA,SACW,KAAA;AACX,EAAA,QAAQ,SAAW;AAAA,IACjB,KAAK,QAAA;AACH,MAAA,OAAO,WAAY,CAAA,MAAA;AAAA,IACrB,KAAK,cAAA;AACH,MAAA,OAAO,OAAQ,CAAA,YAAA;AAAA,IACjB,KAAK,aAAA;AACH,MAAA,OAAO,OAAQ,CAAA,WAAA;AAAA,IACjB,KAAK,OAAA;AACH,MAAA,OAAO,WAAY,CAAA,KAAA;AAAA,IACrB;AACE,MAAO,OAAA,CAAA;AAAA;AAEb,CAAA;AAEA,MAAM,iBACJ,OAAO,cAAA,KAAmB,cACtB,IAAI,cAAA,CAAe,CAAC,OAAmC,KAAA;AACrD,EAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,IAAM,MAAA,EAAE,MAAQ,EAAA,WAAA,EAAgB,GAAA,KAAA;AAChC,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,GAAA,CAAI,MAAqB,CAAA;AAC5D,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAM,MAAA,EAAE,QAAU,EAAA,YAAA,EAAiB,GAAA,cAAA;AACnC,MAAA,IAAI,WAAc,GAAA,KAAA;AAClB,MAAA,KAAA,MAAW,CAAC,SAAW,EAAA,IAAI,KAAK,MAAO,CAAA,OAAA,CAAQ,YAAY,CAAG,EAAA;AAC5D,QAAA,MAAM,OAAU,GAAA,aAAA;AAAA,UACd,MAAA;AAAA,UACA,WAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,IAAI,YAAY,IAAM,EAAA;AACpB,UAAc,WAAA,GAAA,IAAA;AACd,UAAA,YAAA,CAAa,SAA8B,CAAI,GAAA,OAAA;AAAA;AACjD;AAEF,MAAA,IAAI,WAAa,EAAA;AACf,QAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,YAAA,CAAA;AAAA;AACb;AACF;AAEJ,CAAC,CACD,GAAA,IAAA;AAMC,SAAS,iBACd,CAAA,GAAA,EACA,UACA,EAAA,QAAA,EACA,oBAAoB,KACd,EAAA;AACN,EAAM,MAAA,aAAA,GAAgB,OAAO,UAAU,CAAA;AACvC,EAAM,MAAA,OAAA,GAAU,WAAY,CAAA,CAAC,MAA8C,KAAA;AACzE,IAAM,MAAA,IAAA,GAAO,OAAO,qBAAsB,EAAA;AAC1C,IAAA,OAAO,cAAc,OAAQ,CAAA,MAAA;AAAA,MAC3B,CAAC,KAAgC,GAAQ,KAAA;AACvC,QAAA,GAAA,CAAI,GAAG,CAAA,GAAI,aAAc,CAAA,MAAA,EAAQ,MAAM,GAAwB,CAAA;AAC/D,QAAO,OAAA,GAAA;AAAA,OACT;AAAA,MACA;AAAC,KACH;AAAA,GACF,EAAG,EAAE,CAAA;~~AAUL~~,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,MAAO,OAAA,MAAA;AAAA;AAGT,IAAA,MAAM,SAAS,GAAI,CAAA,OAAA;AACnB,IAAA,IAAI,SAAY,GAAA,KAAA;AAEhB,IAAA,eAAe,gBAAmB,GAAA;~~AAGhC~~,MAAA,WAAA,CAAY,IAAI,MAAQ,EAAA,EAAE,YAAc,EAAA,IAA4B,CAAA;AACpE,MAAY,SAAA,GAAA,KAAA;AAEZ,MAAM,MAAA,EAAE,OAAU,GAAA,QAAA;AAClB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,MAAM,KAAM,CAAA,KAAA;AAAA;AAEd,MAAI,IAAA,CAAC,aAAa,cAAgB,EAAA;AAChC,QAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,GAAA,CAAI,MAAM,CAAA;AAC7C,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,CAAA;AACnC,UAAA,cAAA,CAAe,YAAe,GAAA,YAAA;AAC9B,UAAA,cAAA,CAAe,QAAQ,MAAM,CAAA;AAC7B,UAAA,IAAI,iBAAmB,EAAA;AACrB,YAAA,~~QAAA~~,~~CAAS~~,~~YAAY~~,CAAA;AAAA;~~AACvB~~;AACF;AACF;AAGF,IAAA,IAAI,MAAQ,EAAA;AAEV,MAAI,IAAA,WAAA,CAAY,GAAI,CAAA,MAAM,CAAG,EAAA;AAC3B,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA;AAEF,MAAA,KAAK,gBAAiB,EAAA;AAAA;AAExB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,MAAU,IAAA,WAAA,CAAY,GAAI,CAAA,MAAM,CAAG,EAAA;AACrC,QAAA,cAAA,CAAe,UAAU,MAAM,CAAA;AAC/B,QAAA,WAAA,CAAY,OAAO,MAAM,CAAA;AACzB,QAAY,SAAA,GAAA,IAAA;AAAA;AACd,KACF;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,~~OAAO~~,CAAC,CAAA;~~AAEjB~~,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,SAAS,GAAI,CAAA,OAAA;AACnB,IAAM,MAAA,MAAA,GAAS,WAAY,CAAA,GAAA,CAAI,MAAM,CAAA;AACrC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAI,IAAA,aAAA,CAAc,YAAY,UAAY,EAAA;AACxC,QAAA,aAAA,CAAc,OAAU,GAAA,UAAA;AACxB,QAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,CAAA;AACnC,QAAA,MAAA,CAAO,YAAe,GAAA,YAAA;AAAA;AAGxB,MAAA,MAAA,CAAO,QAAW,GAAA,QAAA;AAAA;AACpB,KACC,CAAC,UAAA,EAAY,OAAS,EAAA,GAAA,EAAK,QAAQ,CAAC,CAAA;AAIzC;;;;"}
1	+ {"version":3,"file":"useResizeObserver.js","sources":["../src/responsive/useResizeObserver.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string \| number> = {\n height?: T;\n scrollHeight?: T;\n scrollWidth?: T;\n width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n onResize?: ResizeHandler;\n measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n element: HTMLElement,\n contentRect: DOMRectReadOnly,\n dimension: measuredDimension,\n): number => {\n switch (dimension) {\n case \"height\":\n return contentRect.height;\n case \"scrollHeight\":\n return element.scrollHeight;\n case \"scrollWidth\":\n return element.scrollWidth;\n case \"width\":\n return contentRect.width;\n default:\n return 0;\n }\n};\n\nconst resizeObserver =\n typeof ResizeObserver !== \"undefined\"\n ? new ResizeObserver((entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n const { target, contentRect } = entry;\n const observedTarget = observedMap.get(target as HTMLElement);\n if (observedTarget) {\n const { onResize, measurements } = observedTarget;\n let sizeChanged = false;\n for (const [dimension, size] of Object.entries(measurements)) {\n const newSize = getTargetSize(\n target as HTMLElement,\n contentRect,\n dimension as measuredDimension,\n );\n if (newSize !== size) {\n sizeChanged = true;\n measurements[dimension as measuredDimension] = newSize;\n }\n }\n if (sizeChanged) {\n onResize?.(measurements);\n }\n }\n }\n })\n : null;\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n ref: RefObject<Element \| HTMLElement \| null>,\n dimensions: string[],\n onResize: ResizeHandler,\n reportInitialSize = false,\n): void {\n const dimensionsRef = useRef(dimensions);\n const measure = useCallback((target: HTMLElement): measurements<number> => {\n const rect = target.getBoundingClientRect();\n return dimensionsRef.current.reduce(\n (map: { [key: string]: number }, dim) => {\n map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n return map;\n },\n {},\n );\n }, []);\n\n const resizeCallback = useRef(onResize);\n\n useIsomorphicLayoutEffect(() => {\n resizeCallback.current = onResize;\n }, [onResize]);\n\n // TODO use ref to store resizeHandler here\n // resize handler registered with REsizeObserver will never change\n // use ref to store user onResize callback here\n // resizeHandler will call user callback.current\n\n // Keep this effect separate in case user inadvertently passes different\n // dimensions or callback instance each time - we only ever want to\n // initiate new observation when ref changes.\n useIsomorphicLayoutEffect(() => {\n if (!resizeObserver) {\n return undefined;\n }\n\n const target = ref.current as HTMLElement;\n let cleanedUp = false;\n\n async function registerObserver() {\n // Create the map entry immediately. useEffect may fire below\n // before fonts are ready and attempt to update entry\n observedMap.set(target, { measurements: {} as measurements<number> });\n cleanedUp = false;\n\n const { fonts } = document;\n if (fonts) {\n await fonts.ready;\n }\n if (!cleanedUp && resizeObserver) {\n const observedTarget = observedMap.get(target);\n if (observedTarget) {\n const measurements = measure(target);\n observedTarget.measurements = measurements;\n resizeObserver.observe(target);\n if (reportInitialSize) {\n resizeCallback.current?.(measurements);\n }\n }\n }\n }\n\n if (target) {\n // TODO might we want multiple callers to attach a listener to the same element ?\n if (observedMap.has(target)) {\n throw Error(\n \"useResizeObserver attemping to observe same element twice\",\n );\n }\n void registerObserver();\n }\n return () => {\n if (target && observedMap.has(target)) {\n resizeObserver.unobserve(target);\n observedMap.delete(target);\n cleanedUp = true;\n }\n };\n }, [ref, measure, reportInitialSize]);\n\n useIsomorphicLayoutEffect(() => {\n const target = ref.current as HTMLElement;\n const record = observedMap.get(target);\n if (record) {\n if (dimensionsRef.current !== dimensions) {\n dimensionsRef.current = dimensions;\n const measurements = measure(target);\n record.measurements = measurements;\n }\n // Might not have changed, but no harm ...\n record.onResize = onResize;\n }\n }, [dimensions, measure, ref, onResize]);\n\n // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":"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"}

package/dist-es/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentType,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n /*\n Override \"search\" icon.\n * Set to `null` to hide.\n /\n IconComponent?: ComponentType~~<any>~~ \| null;\n /\n Callback for when clear button is clicked.\n /\n onClear?: () => void;\n /\n Callback for change event.\n * Event is either an Input change event or a Button click event.\n /\n onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n /\n Callback to trigger search.\n */\n onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n function SearchInput(\n {\n IconComponent = SearchIcon,\n className,\n onChange,\n onClear,\n onKeyUp,\n onSubmit,\n value: valueProp,\n defaultValue,\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-search-input\",\n css: searchInputCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(inputRef, ref);\n\n const [value, setValue, isControlled] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"SearchInput\",\n state: \"value\",\n });\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement>,\n newValue: string,\n ) => {\n setValue(newValue);\n onChange?.(event, newValue);\n };\n\n const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n setValue(\"\");\n if (!isControlled) {\n onChange?.(event, \"\");\n }\n onClear?.();\n inputRef.current?.focus();\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && onSubmit && value) {\n onSubmit?.(value);\n }\n\n onKeyUp?.(event);\n };\n\n return (\n <Input\n className={clsx(baseName, className)}\n ref={handleRef}\n endAdornment={\n !!value && (\n <Button\n className={clsx(`${baseName}-clearButton`)}\n onClick={handleClear}\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"clear input\"\n className={`${baseName}-clearIcon`}\n />\n </Button>\n )\n }\n onChange={handleChange}\n onKeyUp={handleKeyUp}\n startAdornment={\n IconComponent && (\n <StaticInputAdornment>\n <IconComponent className={`${baseName}-icon`} />\n </StaticInputAdornment>\n )\n }\n value={value \|\| \"\"}\n {...other}\n />\n );\n },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":"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"}
1	+ {"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentType,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport searchInputCss from \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n /*\n Override \"search\" icon.\n * Set to `null` to hide.\n /\n IconComponent?: ComponentType \| null;\n /\n Callback for when clear button is clicked.\n /\n onClear?: () => void;\n /\n Callback for change event.\n * Event is either an Input change event or a Button click event.\n /\n onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n /\n Callback to trigger search.\n */\n onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n function SearchInput(\n {\n IconComponent = SearchIcon,\n className,\n onChange,\n onClear,\n onKeyUp,\n onSubmit,\n value: valueProp,\n defaultValue,\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-search-input\",\n css: searchInputCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(inputRef, ref);\n\n const [value, setValue, isControlled] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"SearchInput\",\n state: \"value\",\n });\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement>,\n newValue: string,\n ) => {\n setValue(newValue);\n onChange?.(event, newValue);\n };\n\n const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n setValue(\"\");\n if (!isControlled) {\n onChange?.(event, \"\");\n }\n onClear?.();\n inputRef.current?.focus();\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && onSubmit && value) {\n onSubmit?.(value);\n }\n\n onKeyUp?.(event);\n };\n\n return (\n <Input\n className={clsx(baseName, className)}\n ref={handleRef}\n endAdornment={\n !!value && (\n <Button\n className={clsx(`${baseName}-clearButton`)}\n onClick={handleClear}\n variant=\"secondary\"\n >\n <CloseIcon\n aria-label=\"clear input\"\n className={`${baseName}-clearIcon`}\n />\n </Button>\n )\n }\n onChange={handleChange}\n onKeyUp={handleKeyUp}\n startAdornment={\n IconComponent && (\n <StaticInputAdornment>\n <IconComponent className={`${baseName}-icon`} />\n </StaticInputAdornment>\n )\n }\n value={value \|\| \"\"}\n {...other}\n />\n );\n },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":"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"}

package/dist-es/table/TH.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { withTableBaseName } from './Table.js';
 import css_248z from './Table.css.js';

package/dist-es/table/TH.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TH.js","sources":["../src/table/TH.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface THProps extends ComponentPropsWithoutRef<\"th\"> {}\n\nexport const TH = forwardRef<HTMLTableCellElement, THProps>(function TH(\n { children, className, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-th\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <th\n ref={ref}\n className={clsx(withTableBaseName(\"th\"), className)}\n {...rest}\n >\n {children}\n </th>\n );\n});\n"],"names":["TH","tableCss"],"mappings":";;;;;;;;AAUa,MAAA,EAAA,GAAK,UAA0C,CAAA,SAASA,GACnE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,iBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"TH.js","sources":["../src/table/TH.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface THProps extends ComponentPropsWithoutRef<\"th\"> {}\n\nexport const TH = forwardRef<HTMLTableCellElement, THProps>(function TH(\n { children, className, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-th\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <th\n ref={ref}\n className={clsx(withTableBaseName(\"th\"), className)}\n {...rest}\n >\n {children}\n </th>\n );\n});\n"],"names":["TH","tableCss"],"mappings":";;;;;;;;AAUa,MAAA,EAAA,GAAK,UAA0C,CAAA,SAASA,GACnE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,iBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/table/TR.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { withTableBaseName } from './Table.js';
 import css_248z from './Table.css.js';

package/dist-es/table/TR.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TR.js","sources":["../src/table/TR.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TRProps extends ComponentPropsWithoutRef<\"tr\"> {}\n\nexport const TR = forwardRef<HTMLTableRowElement, TRProps>(function TR(\n { children, className, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-tr\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <tr\n ref={ref}\n className={clsx(withTableBaseName(\"tr\"), className)}\n {...rest}\n >\n {children}\n </tr>\n );\n});\n"],"names":["TR","tableCss"],"mappings":";;;;;;;;AAUa,MAAA,EAAA,GAAK,UAAyC,CAAA,SAASA,GAClE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,iBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"TR.js","sources":["../src/table/TR.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TRProps extends ComponentPropsWithoutRef<\"tr\"> {}\n\nexport const TR = forwardRef<HTMLTableRowElement, TRProps>(function TR(\n { children, className, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-table-tr\",\n css: tableCss,\n window: targetWindow,\n });\n\n return (\n <tr\n ref={ref}\n className={clsx(withTableBaseName(\"tr\"), className)}\n {...rest}\n >\n {children}\n </tr>\n );\n});\n"],"names":["TR","tableCss"],"mappings":";;;;;;;;AAUa,MAAA,EAAA,GAAK,UAAyC,CAAA,SAASA,GAClE,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,iBAAkB,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/tabs/TabActivationIndicator.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".saltTabActivationIndicator-no-background {\n  --tabs-activationIndicator-background: transparent !important;\n}\n\n.saltTabActivationIndicator {\n  --tabs-activationIndicator-background: var(--salt-container-primary-borderColor);\n\n  background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background));\n  height: var(--saltTabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--saltTabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-accent-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
+var css_248z = ".saltTabActivationIndicator {\n  background: var(--saltTabs-activationIndicator-background, var(--salt-container-primary-borderColor));\n  height: var(--saltTabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--saltTabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-accent-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=TabActivationIndicator.css.js.map

package/dist-es/tabs/Tabs.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { makePrefixer } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import css_248z from './Tabs.css.js';
 import { Tabstrip } from './Tabstrip.js';
 import { useTabs } from './useTabs.js';
@@ -69,14 +69,6 @@ const Tabs = forwardRef(function Tabs2({
     onMoveTab,
     overflowMenu
   };
-  useCallback(
-    (tabIndex) => {
-      if (tabIndex === activeTabIndex) {
-        return `${id}-${tabIndex}-panel`;
-      }
-    },
-    [id, activeTabIndex]
-  );
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/dist-es/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.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 {\n type ForwardedRef,\n forwardRef,\n ~~useCallback,\n~~ useImperativeHandle,\n useRef,\n} from \"react\";\nimport tabsCss from \"./Tabs.css\";\nimport type { FocusAPI, TabstripProps } from \"./TabsTypes\";\nimport { Tabstrip } from \"./Tabstrip\";\nimport { useTabs } from \"./useTabs\";\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nexport type TabsProps = Omit<TabstripProps, \"defaultSource\">;\n\nexport const Tabs = forwardRef(function Tabs(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n centered,\n children,\n className,\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onActiveChange: onActiveChangeProp,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n variant,\n ...htmlAttributes\n }: TabsProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs\",\n css: tabsCss,\n window: targetWindow,\n });\n\n const tabstripRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => tabstripRef.current?.focus(),\n }) as FocusAPI,\n [],\n );\n\n const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({\n activeTabIndex: activeTabIndexProp,\n children,\n defaultActiveTabIndex,\n onActiveChange: onActiveChangeProp,\n });\n\n const tabstripProps = {\n activeTabIndex,\n allowDragDrop,\n centered,\n editing,\n variant,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n };\n ~~const getTabPanelId = useCallback(~~\n ~~(tabIndex: number) => {\n if (tabIndex === activeTabIndex) {\n return `${id}-${tabIndex}-panel`;\n }\n },\n [id, activeTabIndex],\n~~ ~~);\n\n~~ // TODO need to inject aria-controls\n return (\n <div\n {...htmlAttributes}\n className={clsx(withBaseName(), className)}\n id={`${id}-tabs`}\n >\n <Tabstrip\n {...tabstripProps}\n id={id}\n onActiveChange={onActiveChange}\n ref={tabstripRef}\n source={tabs}\n />\n {tabPanel}\n </div>\n );\n});\n"],"names":["Tabs","tabsCss"],"mappings":";;;;;;;;;;~~AAgBA~~,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,KACtC,CAAA;AAAA,EACE,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,OACG;AAAA,MACC,OAAO,MAAG;~~AAxDlB~~,QAAA,IAAA,EAAA;~~AAwDqB~~,QAAA,OAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAqB,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AAAA,KACpC,CAAA;AAAA,IACF;AAAC,GACH;AAEA,EAAA,MAAM,EAAE,EAAI,EAAA,cAAA,EAAgB,gBAAgB,QAAU,EAAA,IAAA,KAAS,OAAQ,CAAA;AAAA,IACrE,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAgB,EAAA;AAAA,GACjB,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;~~AACA~~,~~EAAsB,WAAA;AAAA,IACpB,CAAC,QAAqB,KAAA;AACpB,MAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,QAAO,OAAA,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,QAAQ,CAAA,MAAA,CAAA;AAAA;AAC1B,KACF;AAAA,IACA,CAAC,IAAI,cAAc;AAAA;AAIrB,~~EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,aAAA;AAAA,YACJ,EAAA;AAAA,YACA,cAAA;AAAA,YACA,GAAK,EAAA,WAAA;AAAA,YACL,MAAQ,EAAA;AAAA;AAAA,SACV;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.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 {\n type ForwardedRef,\n forwardRef,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport tabsCss from \"./Tabs.css\";\nimport type { FocusAPI, TabstripProps } from \"./TabsTypes\";\nimport { Tabstrip } from \"./Tabstrip\";\nimport { useTabs } from \"./useTabs\";\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nexport type TabsProps = Omit<TabstripProps, \"defaultSource\">;\n\nexport const Tabs = forwardRef(function Tabs(\n {\n activeTabIndex: activeTabIndexProp,\n allowDragDrop,\n centered,\n children,\n className,\n defaultActiveTabIndex,\n editing,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onActiveChange: onActiveChangeProp,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n variant,\n ...htmlAttributes\n }: TabsProps,\n forwardedRef: ForwardedRef<FocusAPI>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs\",\n css: tabsCss,\n window: targetWindow,\n });\n\n const tabstripRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(\n forwardedRef,\n () =>\n ({\n focus: () => tabstripRef.current?.focus(),\n }) as FocusAPI,\n [],\n );\n\n const { id, onActiveChange, activeTabIndex, tabPanel, tabs } = useTabs({\n activeTabIndex: activeTabIndexProp,\n children,\n defaultActiveTabIndex,\n onActiveChange: onActiveChangeProp,\n });\n\n const tabstripProps = {\n activeTabIndex,\n allowDragDrop,\n centered,\n editing,\n variant,\n enableAddTab,\n enableCloseTab,\n enableRenameTab,\n onAddTab,\n onCloseTab,\n onEnterEditMode,\n onExitEditMode,\n onMoveTab,\n overflowMenu,\n };\n\n // TODO need to inject aria-controls\n return (\n <div\n {...htmlAttributes}\n className={clsx(withBaseName(), className)}\n id={`${id}-tabs`}\n >\n <Tabstrip\n {...tabstripProps}\n id={id}\n onActiveChange={onActiveChange}\n ref={tabstripRef}\n source={tabs}\n />\n {tabPanel}\n </div>\n );\n});\n"],"names":["Tabs","tabsCss"],"mappings":";;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,KACtC,CAAA;AAAA,EACE,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,EAAA,mBAAA;AAAA,IACE,YAAA;AAAA,IACA,OACG;AAAA,MACC,OAAO,MAAG;AAvDlB,QAAA,IAAA,EAAA;AAuDqB,QAAA,OAAA,CAAA,EAAA,GAAA,WAAA,CAAY,YAAZ,IAAqB,GAAA,MAAA,GAAA,EAAA,CAAA,KAAA,EAAA;AAAA;AAAA,KACpC,CAAA;AAAA,IACF;AAAC,GACH;AAEA,EAAA,MAAM,EAAE,EAAI,EAAA,cAAA,EAAgB,gBAAgB,QAAU,EAAA,IAAA,KAAS,OAAQ,CAAA;AAAA,IACrE,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,cAAgB,EAAA;AAAA,GACjB,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AAGA,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA,EAAI,GAAG,EAAE,CAAA,KAAA,CAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,aAAA;AAAA,YACJ,EAAA;AAAA,YACA,cAAA;AAAA,YACA,GAAK,EAAA,WAAA;AAAA,YACL,MAAQ,EAAA;AAAA;AAAA,SACV;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/tabs/drag-drop/useDragSpacers.js CHANGED Viewed

@@ -9,13 +9,12 @@ const useDragSpacers = () => {
     () => [createDragSpacer(transitioning), createDragSpacer()],
     []
   );
-  const clearSpacers = useCallback(
-    () => spacers.forEach((spacer) => {
-      var _a;
-      return (_a = spacer.parentElement) == null ? void 0 : _a.removeChild(spacer);
-    }),
-    [spacers]
-  );
+  const clearSpacers = useCallback(() => {
+    var _a;
+    for (const spacer of spacers) {
+      (_a = spacer.parentElement) == null ? void 0 : _a.removeChild(spacer);
+    }
+  }, [spacers]);
   const animateTransition = useCallback(
     (size) => {
       const [spacer1, spacer2] = spacers;

package/dist-es/tabs/drag-drop/useDragSpacers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDragSpacers.js","sources":["../src/tabs/drag-drop/useDragSpacers.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport { createDragSpacer } from \"./Draggable\";\nimport type { MeasuredDropTarget } from \"./drag-utils\";\nimport type { Direction } from \"./dragDropTypes\";\n\nexport const useDragSpacers = () => {\n const animationFrame = useRef(0);\n const transitioning = useRef(false);\n\n const spacers = useMemo(\n // We only need to listen for transition end on one of the spacers\n () => [createDragSpacer(transitioning), createDragSpacer()],\n [],\n );\n\n const clearSpacers = useCallback(\n () ~~=>\~~n ~~spacers.forEach((~~spacer~~) => spacer~~.parentElement?.removeChild(spacer)~~),\~~n [spacers]~~,\n~~ );\n\n const animateTransition = useCallback(\n (size: number) => {\n const [spacer1, spacer2] = spacers;\n animationFrame.current = requestAnimationFrame(() => {\n transitioning.current = true;\n spacer1.style.cssText = \"width: 0px\";\n spacer2.style.cssText = `width: ${size}px`;\n spacers[0] = spacer2;\n spacers[1] = spacer1;\n });\n },\n [spacers],\n );\n\n const cancelAnyPendingAnimation = useCallback(() => {\n if (animationFrame.current) {\n cancelAnimationFrame(animationFrame.current);\n animationFrame.current = 0;\n }\n }, []);\n\n const displaceItem = useCallback(\n (\n item: MeasuredDropTarget \| null,\n size: number,\n useTransition = false,\n direction?: Direction,\n ) => {\n if (item) {\n const [spacer1, spacer2] = spacers;\n cancelAnyPendingAnimation();\n if (useTransition) {\n if (transitioning.current) {\n clearSpacers();\n\n spacer1.style.cssText = `width: ${size}px`;\n spacer2.style.cssText = \"width: 0px\";\n\n const target =\n direction === \"fwd\"\n ? item.element.previousElementSibling\n : item.element.nextElementSibling;\n\n item.element.parentElement?.insertBefore(spacer1, target);\n item.element.parentElement?.insertBefore(spacer2, item.element);\n } else {\n item.element.parentElement?.insertBefore(spacer2, item.element);\n }\n animateTransition(size);\n } else {\n spacer1.style.cssText = `width: ${size}px`;\n item.element.parentElement?.insertBefore(spacer1, item.element);\n }\n }\n },\n [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n );\n const displaceLastItem = useCallback(\n (item: MeasuredDropTarget, size: number, useTransition = false) => {\n const [spacer1, spacer2] = spacers;\n cancelAnyPendingAnimation();\n if (useTransition) {\n if (transitioning.current) {\n clearSpacers();\n\n spacer1.style.cssText = `width: ${size}px`;\n spacer2.style.cssText = \"width: 0px\";\n\n item.element.parentElement?.insertBefore(\n spacer1,\n item.element.previousElementSibling,\n );\n item.element.parentElement?.insertBefore(\n spacer2,\n item.element.nextElementSibling,\n );\n } else {\n item.element.parentElement?.insertBefore(\n spacer2,\n item.element.nextElementSibling,\n );\n }\n animateTransition(size);\n } else {\n spacer1.style.cssText = `width: ${size}px`;\n item.element.parentElement?.insertBefore(\n spacer1,\n item.element.nextElementSibling,\n );\n }\n },\n [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n );\n\n return {\n displaceItem,\n displaceLastItem,\n clearSpacers,\n };\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,iBAAiB,MAAM;AAClC,EAAM,MAAA,cAAA,GAAiB,OAAO,CAAC,CAAA;AAC/B,EAAM,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA;AAElC,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA;AAAA,IAEd,MAAM,CAAC,gBAAA,CAAiB,aAAa,CAAA,EAAG,kBAAkB,CAAA;AAAA,IAC1D;AAAC,GACH;AAEA,~~EAAA~~,~~MAAM~~,~~YAAe~~,~~GAAA~~,~~WAAA~~;~~AAAA~~,~~IACnB~~,~~MACE~~,~~OAAA~~,~~CAAQ~~,~~OAAQ~~,~~CAAA~~,~~CAAC~~,~~MAAQ~~,~~KAAA;AAjB/B,MAAA,IAAA,~~EAAA;~~AAiBkC~~,MAAO,~~OAAA,~~CAAA,EAAA,GAAA,MAAA,CAAA,aAAA,KAAP,mBAAsB,WAAY,CAAA,MAAA,CAAA;AAAA,~~KAAO~~,~~CAAA;AAAA~~,~~IACvE,~~CAAC,OAAO~~;AAAA~~,~~GACV~~;~~AAEA~~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"}
1	+ {"version":3,"file":"useDragSpacers.js","sources":["../src/tabs/drag-drop/useDragSpacers.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport { createDragSpacer } from \"./Draggable\";\nimport type { MeasuredDropTarget } from \"./drag-utils\";\nimport type { Direction } from \"./dragDropTypes\";\n\nexport const useDragSpacers = () => {\n const animationFrame = useRef(0);\n const transitioning = useRef(false);\n\n const spacers = useMemo(\n // We only need to listen for transition end on one of the spacers\n () => [createDragSpacer(transitioning), createDragSpacer()],\n [],\n );\n\n const clearSpacers = useCallback(() => {\n for (const spacer of spacers) {\n spacer.parentElement?.removeChild(spacer);\n }\n }, [spacers]);\n\n const animateTransition = useCallback(\n (size: number) => {\n const [spacer1, spacer2] = spacers;\n animationFrame.current = requestAnimationFrame(() => {\n transitioning.current = true;\n spacer1.style.cssText = \"width: 0px\";\n spacer2.style.cssText = `width: ${size}px`;\n spacers[0] = spacer2;\n spacers[1] = spacer1;\n });\n },\n [spacers],\n );\n\n const cancelAnyPendingAnimation = useCallback(() => {\n if (animationFrame.current) {\n cancelAnimationFrame(animationFrame.current);\n animationFrame.current = 0;\n }\n }, []);\n\n const displaceItem = useCallback(\n (\n item: MeasuredDropTarget \| null,\n size: number,\n useTransition = false,\n direction?: Direction,\n ) => {\n if (item) {\n const [spacer1, spacer2] = spacers;\n cancelAnyPendingAnimation();\n if (useTransition) {\n if (transitioning.current) {\n clearSpacers();\n\n spacer1.style.cssText = `width: ${size}px`;\n spacer2.style.cssText = \"width: 0px\";\n\n const target =\n direction === \"fwd\"\n ? item.element.previousElementSibling\n : item.element.nextElementSibling;\n\n item.element.parentElement?.insertBefore(spacer1, target);\n item.element.parentElement?.insertBefore(spacer2, item.element);\n } else {\n item.element.parentElement?.insertBefore(spacer2, item.element);\n }\n animateTransition(size);\n } else {\n spacer1.style.cssText = `width: ${size}px`;\n item.element.parentElement?.insertBefore(spacer1, item.element);\n }\n }\n },\n [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n );\n const displaceLastItem = useCallback(\n (item: MeasuredDropTarget, size: number, useTransition = false) => {\n const [spacer1, spacer2] = spacers;\n cancelAnyPendingAnimation();\n if (useTransition) {\n if (transitioning.current) {\n clearSpacers();\n\n spacer1.style.cssText = `width: ${size}px`;\n spacer2.style.cssText = \"width: 0px\";\n\n item.element.parentElement?.insertBefore(\n spacer1,\n item.element.previousElementSibling,\n );\n item.element.parentElement?.insertBefore(\n spacer2,\n item.element.nextElementSibling,\n );\n } else {\n item.element.parentElement?.insertBefore(\n spacer2,\n item.element.nextElementSibling,\n );\n }\n animateTransition(size);\n } else {\n spacer1.style.cssText = `width: ${size}px`;\n item.element.parentElement?.insertBefore(\n spacer1,\n item.element.nextElementSibling,\n );\n }\n },\n [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n );\n\n return {\n displaceItem,\n displaceLastItem,\n clearSpacers,\n };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/tabs/useActivationIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import {\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type orientationType,\n useResizeObserver,\n WidthOnly,\n} from \"../responsive\";\n\ntype activationIndicatorStyles = {\n height?: number;\n left?: number;\n top?: number;\n width?: number;\n hasChanged?: boolean;\n};\n\nconst MEASUREMENTS = {\n horizontal: {\n pos: \"left\" ~~as keyof activationIndicatorStyles~~,\n size: \"width\" ~~as keyof activationIndicatorStyles~~,\n },\n vertical: {\n pos: \"top\" ~~as keyof activationIndicatorStyles~~,\n size: \"height\" ~~as keyof activationIndicatorStyles~~,\n },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n rootRef,\n tabId,\n orientation,\n}: {\n rootRef: RefObject<HTMLDivElement \| null>;\n tabId?: string \| null;\n orientation: orientationType;\n}): activationIndicatorStyles {\n const [style, setStyle] = useState<activationIndicatorStyles>({\n left: 0,\n width: 0,\n });\n // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n // means our useEffect below will re-run only when the tab changes, not after every style change\n // as well.\n\n const styleRef = useRef(style);\n\n const getTabPos = useCallback(() => {\n const { pos, size } = MEASUREMENTS[orientation];\n return [pos, size];\n }, [orientation]);\n\n const createIndicatorStyle = useCallback(\n (tabElement: HTMLElement \| null): activationIndicatorStyles => {\n if (tabElement) {\n const tabRect = tabElement.getBoundingClientRect() ~~as any~~;\n if (rootRef.current && tabRect) {\n const rootRect = rootRef.current.getBoundingClientRect() ~~as any~~;\n const [pos, size] = getTabPos();\n const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n const newPos = tabRect[pos] - rootRect[pos];\n const newSize = tabRect[size];\n\n return {\n [pos]: newPos,\n [size]: newSize,\n hasChanged: newPos !== existingPos \|\| newSize !== existingSize,\n };\n }\n }\n return {};\n },\n [rootRef, getTabPos],\n );\n\n const onResize = useCallback(() => {\n requestAnimationFrame(() => {\n if (tabId) {\n const tabEl = document.getElementById(tabId);\n const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n if (hasChanged) {\n setStyle(newStyle);\n }\n }\n });\n }, [createIndicatorStyle, tabId]);\n\n useEffect(() => {\n if (tabId) {\n // The timeout is employed in case selectedTab has been selected from\n // overflow menu. In this case, the tab is only restored to visibility\n // in the render cycle after selection.\n setTimeout(() => {\n const tabEl = document.getElementById(tabId);\n const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n if (hasChanged) {\n styleRef.current = newStyle;\n setStyle(newStyle);\n }\n }, 50);\n }\n }, [createIndicatorStyle, tabId]);\n\n useResizeObserver(rootRef, WidthOnly, onResize);\n\n return style;\n}\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,~~YAAe~~,GAAA;AAAA,~~EACnB~~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"}
1	+ {"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import {\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type orientationType,\n useResizeObserver,\n WidthOnly,\n} from \"../responsive\";\n\ntype activationIndicatorStyles = {\n height?: number;\n left?: number;\n top?: number;\n width?: number;\n hasChanged?: boolean;\n};\n\nconst MEASUREMENTS: Record<\n orientationType,\n { pos: \"left\" \| \"top\"; size: \"width\" \| \"height\" }\n> = {\n horizontal: {\n pos: \"left\",\n size: \"width\",\n },\n vertical: {\n pos: \"top\",\n size: \"height\",\n },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n rootRef,\n tabId,\n orientation,\n}: {\n rootRef: RefObject<HTMLDivElement \| null>;\n tabId?: string \| null;\n orientation: orientationType;\n}): activationIndicatorStyles {\n const [style, setStyle] = useState<activationIndicatorStyles>({\n left: 0,\n width: 0,\n });\n // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n // means our useEffect below will re-run only when the tab changes, not after every style change\n // as well.\n\n const styleRef = useRef(style);\n\n const getTabPos = useCallback(() => {\n const { pos, size } = MEASUREMENTS[orientation];\n return [pos, size];\n }, [orientation]);\n\n const createIndicatorStyle = useCallback(\n (tabElement: HTMLElement \| null): activationIndicatorStyles => {\n if (tabElement) {\n const tabRect = tabElement.getBoundingClientRect();\n if (rootRef.current && tabRect) {\n const rootRect = rootRef.current.getBoundingClientRect();\n const [pos, size] = getTabPos();\n const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n const newPos = tabRect[pos] - rootRect[pos];\n const newSize = tabRect[size];\n\n return {\n [pos]: newPos,\n [size]: newSize,\n hasChanged: newPos !== existingPos \|\| newSize !== existingSize,\n };\n }\n }\n return {};\n },\n [rootRef, getTabPos],\n );\n\n const onResize = useCallback(() => {\n requestAnimationFrame(() => {\n if (tabId) {\n const tabEl = document.getElementById(tabId);\n const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n if (hasChanged) {\n setStyle(newStyle);\n }\n }\n });\n }, [createIndicatorStyle, tabId]);\n\n useEffect(() => {\n if (tabId) {\n // The timeout is employed in case selectedTab has been selected from\n // overflow menu. In this case, the tab is only restored to visibility\n // in the render cycle after selection.\n setTimeout(() => {\n const tabEl = document.getElementById(tabId);\n const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n if (hasChanged) {\n styleRef.current = newStyle;\n setStyle(newStyle);\n }\n }, 50);\n }\n }, [createIndicatorStyle, tabId]);\n\n useResizeObserver(rootRef, WidthOnly, onResize);\n\n return style;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/tabs-next/TabNextTrigger.js CHANGED Viewed

@@ -18,6 +18,7 @@ function getAriaDescription(count) {
   }
   return `${count} actions available`;
 }
+const ariaActionSupported = typeof HTMLElement !== "undefined" && "ariaActions" in HTMLElement.prototype;
 const TabNextTrigger = forwardRef(function TabNextTrigger2(props, ref) {
   const { children, id: idProp, onClick, onKeyDown, ...rest } = props;
   const targetWindow = useWindow();
@@ -54,7 +55,7 @@ const TabNextTrigger = forwardRef(function TabNextTrigger2(props, ref) {
         "aria-selected": selected,
         "aria-disabled": disabled,
         "aria-controls": panelId,
-        "aria-actions": clsx(actions) || void 0,
+        "aria-actions": ariaActionSupported ? clsx(actions) || void 0 : void 0,
         "aria-description": getAriaDescription(actions.length),
         tabIndex: focused || selected ? void 0 : -1,
         role: "tab",

package/dist-es/tabs-next/TabNextTrigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabNextTrigger.js","sources":["../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n makePrefixer,\n useForkRef,\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 forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n extends ComponentPropsWithoutRef<\"button\"> {}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n if (count < 1) {\n return undefined;\n }\n\n if (count === 1) {\n return \"1 action available\";\n }\n\n return `${count} actions available`;\n}\n\nexport const TabNextTrigger = forwardRef<\n HTMLButtonElement,\n TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n const { children, id: idProp, onClick, onKeyDown, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next-trigger\",\n css: tabTriggerCss,\n window: targetWindow,\n });\n\n const { setSelected, registerTab, getPanelId } = useTabsNext();\n const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n const tabRef = useRef<HTMLButtonElement>(null);\n\n const id = tabId;\n\n useIsomorphicLayoutEffect(() => {\n if (value && id && tabRef.current) {\n return registerTab({ id, value, element: tabRef.current });\n }\n }, [value, id, registerTab]);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n setSelected(event, value);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n setSelected(event, value);\n }\n };\n\n const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n const panelId = getPanelId(value);\n\n return (\n // biome-ignore lint/a11y/useValidAriaProps: aria-actions is a draft spec https://pr-preview.s3.amazonaws.com/w3c/aria/pull/1805.html#aria-actions\n <button\n aria-selected={selected}\n aria-disabled={disabled}\n aria-controls={panelId}\n aria-actions={clsx(actions) \|\| undefined}\n aria-description={getAriaDescription(actions.length)}\n tabIndex={focused \|\| selected ? undefined : -1}\n role=\"tab\"\n type=\"button\"\n onClick={!disabled ? handleClick : undefined}\n onKeyDown={!disabled ? handleKeyDown : undefined}\n className={withBaseName()}\n id={id}\n ref={handleRef}\n {...rest}\n >\n {children}\n </button>\n );\n});\n"],"names":["TabNextTrigger","tabTriggerCss"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEtD,SAAS,mBAAmB,KAAe,EAAA;AACzC,EAAA,IAAI,QAAQ,CAAG,EAAA;AACb,IAAO,OAAA,MAAA;AAAA;AAGT,EAAA,IAAI,UAAU,CAAG,EAAA;AACf,IAAO,OAAA,oBAAA;AAAA;AAGT,EAAA,OAAO,GAAG,KAAK,CAAA,kBAAA,CAAA;AACjB;~~AAEO~~,MAAM,cAAiB,GAAA,UAAA,CAG5B,SAASA,eAAAA,CAAe,OAAO,GAAK,EAAA;AACpC,EAAM,MAAA,EAAE,UAAU,EAAI,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,WAAa,EAAA,UAAA,KAAe,WAAY,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAU,KAAO,EAAA,OAAA,EAAS,UAAU,KAAO,EAAA,OAAA,KAAY,UAAW,EAAA;AAE1E,EAAM,MAAA,MAAA,GAAS,OAA0B,IAAI,CAAA;AAE7C,EAAA,MAAM,EAAK,GAAA,KAAA;AAEX,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,KAAA,IAAS,EAAM,IAAA,MAAA,CAAO,OAAS,EAAA;AACjC,MAAA,OAAO,YAAY,EAAE,EAAA,EAAI,OAAO,OAAS,EAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAC3D,GACC,EAAA,CAAC,KAAO,EAAA,EAAA,EAAI,WAAW,CAAC,CAAA;AAE3B,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4C,KAAA;AACjE,IAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAEZ,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAA,WAAA,CAAY,OAAO,KAAK,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,SAAA,GAAY,UAA8B,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3D,EAAM,MAAA,OAAA,GAAU,WAAW,KAAK,CAAA;AAEhC,EAAA;AAAA;AAAA,oBAEE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,eAAe,EAAA,QAAA;AAAA,QACf,eAAe,EAAA,QAAA;AAAA,QACf,eAAe,EAAA,OAAA;AAAA,QACf,~~cAAA~~,~~EAAc~~,IAAK,CAAA,OAAO,~~CAAK~~,~~IAAA~~,MAAA;AAAA,~~QAC/B~~,kBAAA,EAAkB,kBAAmB,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,QACnD,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,MAAY,GAAA,EAAA;AAAA,QAC5C,IAAK,EAAA,KAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACL,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,MAAA;AAAA,QACnC,SAAA,EAAW,CAAC,QAAA,GAAW,aAAgB,GAAA,MAAA;AAAA,QACvC,WAAW,YAAa,EAAA;AAAA,QACxB,EAAA;AAAA,QACA,GAAK,EAAA,SAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA;AACH;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"TabNextTrigger.js","sources":["../src/tabs-next/TabNextTrigger.tsx"],"sourcesContent":["import {\n makePrefixer,\n useForkRef,\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 forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useRef,\n} from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\nimport tabTriggerCss from \"./TabNextTrigger.css\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nexport interface TabNextTriggerProps\n extends ComponentPropsWithoutRef<\"button\"> {}\n\nconst withBaseName = makePrefixer(\"saltTabNextTrigger\");\n\nfunction getAriaDescription(count: number) {\n if (count < 1) {\n return undefined;\n }\n\n if (count === 1) {\n return \"1 action available\";\n }\n\n return `${count} actions available`;\n}\n\nconst ariaActionSupported =\n typeof HTMLElement !== \"undefined\" && \"ariaActions\" in HTMLElement.prototype;\n\nexport const TabNextTrigger = forwardRef<\n HTMLButtonElement,\n TabNextTriggerProps\n>(function TabNextTrigger(props, ref) {\n const { children, id: idProp, onClick, onKeyDown, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tab-next-trigger\",\n css: tabTriggerCss,\n window: targetWindow,\n });\n\n const { setSelected, registerTab, getPanelId } = useTabsNext();\n const { selected, value, focused, disabled, tabId, actions } = useTabNext();\n\n const tabRef = useRef<HTMLButtonElement>(null);\n\n const id = tabId;\n\n useIsomorphicLayoutEffect(() => {\n if (value && id && tabRef.current) {\n return registerTab({ id, value, element: tabRef.current });\n }\n }, [value, id, registerTab]);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n setSelected(event, value);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n setSelected(event, value);\n }\n };\n\n const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);\n const panelId = getPanelId(value);\n\n return (\n // biome-ignore lint/a11y/useValidAriaProps: aria-actions is a draft spec https://pr-preview.s3.amazonaws.com/w3c/aria/pull/1805.html#aria-actions\n <button\n aria-selected={selected}\n aria-disabled={disabled}\n aria-controls={panelId}\n aria-actions={\n ariaActionSupported ? clsx(actions) \|\| undefined : undefined\n }\n aria-description={getAriaDescription(actions.length)}\n tabIndex={focused \|\| selected ? undefined : -1}\n role=\"tab\"\n type=\"button\"\n onClick={!disabled ? handleClick : undefined}\n onKeyDown={!disabled ? handleKeyDown : undefined}\n className={withBaseName()}\n id={id}\n ref={handleRef}\n {...rest}\n >\n {children}\n </button>\n );\n});\n"],"names":["TabNextTrigger","tabTriggerCss"],"mappings":"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"}

package/dist-es/tabs-next/hooks/useOverflow.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useValueEffect, useEventCallback, useIsomorphicLayoutEffect, ownerWindow } from '@salt-ds/core';
 import { useWindow } from '@salt-ds/window';
-import { useRef, useEffect, useMemo, Children } from 'react';
+import { useRef, useEffect, useMemo, Children, isValidElement } from 'react';
 function getTabWidth(element) {
   const { width } = element.getBoundingClientRect();
@@ -35,7 +35,7 @@ function useOverflow({
         const containerStyles = targetWindow.getComputedStyle(
           container.current
         );
-        const gap = Number.parseInt(containerStyles.gap || "0");
+        const gap = Number.parseInt(containerStyles.gap || "0", 10);
         let currentWidth = 0;
         let newVisibleCount = 0;
         const visible2 = [];
@@ -151,19 +151,17 @@ function useOverflow({
     [childArray, visibleCount]
   );
   const hiddenSelectedIndex = hidden.findIndex(
-    // @ts-ignore
     (child) => {
       var _a;
-      return ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) === selected;
+      return isValidElement(child) && ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) === selected;
     }
   );
   useIsomorphicLayoutEffect(() => {
     if (visibleCount === childArray.length) {
       realSelectedIndex.current = childArray.findIndex(
-        // @ts-ignore
         (child) => {
           var _a;
-          return ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) === selected;
+          return isValidElement(child) && ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) === selected;
         }
       );
     }

package/dist-es/tabs-next/hooks/useOverflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverflow.js","sources":["../src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n ownerWindow,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n Children,\n type ReactNode,\n type RefObject,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n container: RefObject<HTMLElement>;\n selected?: string;\n children: ReactNode;\n tabs: Item[];\n overflowButton: RefObject<HTMLButtonElement>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n const { width } = element.getBoundingClientRect();\n return Math.ceil(width);\n}\n\nexport function useOverflow({\n tabs,\n container,\n overflowButton,\n children,\n selected,\n}: UseOverflowProps) {\n /*\n `visibleCount` doesn't include newly selected tab from overflow menu, which is removed in `computeVisible`\n /\n const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n visibleCount: tabs.length,\n isMeasuring: false,\n });\n const targetWindow = useWindow();\n const realSelectedIndex = useRef<number>(-1);\n\n const updateOverflow = useEventCallback(() => {\n const computeVisible = (visibleCount: number) => {\n if (container.current && targetWindow) {\n const items = Array.from(\n container.current.querySelectorAll<HTMLElement>(\n \"[data-overflowitem]\",\n ),\n );\n const selectedTab = container.current.querySelector<HTMLElement>(\n \"[role=tab][aria-selected=true]\",\n )?.parentElement;\n\n let maxWidth = container.current.clientWidth ?? 0;\n\n const containerStyles = targetWindow.getComputedStyle(\n container.current,\n );\n const gap = Number.parseInt(containerStyles.gap \|\| \"0\");\n\n let currentWidth = 0;\n let newVisibleCount = 0;\n\n const visible = [];\n\n while (newVisibleCount < items.length) {\n const element = items[newVisibleCount];\n if (element) {\n if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n break;\n }\n currentWidth += getTabWidth(element) + gap;\n visible.push(element);\n }\n newVisibleCount++;\n }\n\n if (newVisibleCount >= items.length) {\n return newVisibleCount;\n }\n\n const overflowButtonWidth = overflowButton.current\n ? overflowButton.current.offsetWidth + gap\n : 0;\n maxWidth -= overflowButtonWidth;\n\n while (currentWidth > maxWidth) {\n const removed = visible.pop();\n if (!removed) break;\n currentWidth -= getTabWidth(removed) + gap;\n newVisibleCount--;\n }\n\n if (selectedTab && !visible.includes(selectedTab)) {\n const selectedTabWidth = getTabWidth(selectedTab) + gap;\n while (currentWidth + selectedTabWidth > maxWidth) {\n const removed = visible.pop();\n if (!removed) break;\n currentWidth -= getTabWidth(selectedTab) + gap;\n newVisibleCount--;\n }\n }\n\n // minimal count should be 0, if there is no space for any tab apart from selected tab from the overflow menu\n return Math.max(0, newVisibleCount);\n }\n return visibleCount;\n };\n\n setVisibleItems(function () {\n // Show all\n yield {\n visibleCount: tabs.length,\n isMeasuring: true,\n };\n\n // Measure the visible count\n const newVisibleCount = computeVisible(tabs.length);\n const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n yield {\n visibleCount: newVisibleCount,\n isMeasuring,\n };\n\n // ensure the visible count is correct\n if (isMeasuring) {\n yield {\n visibleCount: computeVisible(newVisibleCount),\n isMeasuring: false,\n };\n }\n });\n });\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n useIsomorphicLayoutEffect(() => {\n updateOverflow();\n }, [selected]);\n\n useEffect(() => {\n const handleWindowResize = () => {\n updateOverflow();\n };\n\n targetWindow?.addEventListener(\"resize\", handleWindowResize);\n\n return () => {\n targetWindow?.removeEventListener(\"resize\", handleWindowResize);\n };\n }, [updateOverflow, targetWindow]);\n\n useEffect(() => {\n const element = container?.current;\n if (!element) return;\n\n const win = ownerWindow(element);\n\n const resizeObserver = new win.ResizeObserver((entries) => {\n requestAnimationFrame(() => {\n if (entries.length === 0) return;\n\n updateOverflow();\n });\n });\n resizeObserver.observe(element);\n if (element.parentElement) {\n resizeObserver.observe(element.parentElement);\n }\n\n return () => {\n if (element) {\n resizeObserver.unobserve(element);\n }\n };\n }, [container, updateOverflow]);\n\n useEffect(() => {\n const element = container?.current;\n if (!element \|\| isMeasuring) return;\n\n const win = ownerWindow(element);\n\n const mutationObserver = new win.MutationObserver(() => {\n requestAnimationFrame(() => {\n updateOverflow();\n });\n });\n\n mutationObserver.observe(element, {\n childList: true,\n });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, [container, updateOverflow, isMeasuring]);\n\n const childArray = useMemo(() => Children.toArray(children), [children]);\n const visible = useMemo(\n () => childArray.slice(0, visibleCount),\n [visibleCount, childArray],\n );\n const hidden = useMemo(\n () => childArray.slice(visibleCount),\n [childArray, visibleCount],\n );\n\n const hiddenSelectedIndex = hidden.findIndex(\n // @ts-ignore\n (child) => child?.props?.value === selected,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (visibleCount === childArray.length) {\n realSelectedIndex.current = childArray.findIndex(\n // @ts-ignore\n (child) => child?.props?.value === selected,\n );\n }\n }, [visibleCount, childArray, selected]);\n\n if (selected && hiddenSelectedIndex !== -1) {\n const removed = hidden.splice(hiddenSelectedIndex, 1);\n visible.push(removed[0]);\n }\n\n if (isMeasuring) {\n return [childArray, [], isMeasuring, realSelectedIndex] as const;\n }\n\n return [visible, hidden, isMeasuring, realSelectedIndex] as const;\n}\n"],"names":["visibleCount","visible","isMeasuring"],"mappings":"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"}
1	+ {"version":3,"file":"useOverflow.js","sources":["../src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n ownerWindow,\n useEventCallback,\n useIsomorphicLayoutEffect,\n useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n Children,\n isValidElement,\n type ReactNode,\n type RefObject,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport type { TabNextProps } from \"../TabNext\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n container: RefObject<HTMLElement>;\n selected?: string;\n children: ReactNode;\n tabs: Item[];\n overflowButton: RefObject<HTMLButtonElement>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n const { width } = element.getBoundingClientRect();\n return Math.ceil(width);\n}\n\nexport function useOverflow({\n tabs,\n container,\n overflowButton,\n children,\n selected,\n}: UseOverflowProps) {\n /*\n `visibleCount` doesn't include newly selected tab from overflow menu, which is removed in `computeVisible`\n /\n const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n visibleCount: tabs.length,\n isMeasuring: false,\n });\n const targetWindow = useWindow();\n const realSelectedIndex = useRef<number>(-1);\n\n const updateOverflow = useEventCallback(() => {\n const computeVisible = (visibleCount: number) => {\n if (container.current && targetWindow) {\n const items = Array.from(\n container.current.querySelectorAll<HTMLElement>(\n \"[data-overflowitem]\",\n ),\n );\n const selectedTab = container.current.querySelector<HTMLElement>(\n \"[role=tab][aria-selected=true]\",\n )?.parentElement;\n\n let maxWidth = container.current.clientWidth ?? 0;\n\n const containerStyles = targetWindow.getComputedStyle(\n container.current,\n );\n const gap = Number.parseInt(containerStyles.gap \|\| \"0\", 10);\n\n let currentWidth = 0;\n let newVisibleCount = 0;\n\n const visible = [];\n\n while (newVisibleCount < items.length) {\n const element = items[newVisibleCount];\n if (element) {\n if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n break;\n }\n currentWidth += getTabWidth(element) + gap;\n visible.push(element);\n }\n newVisibleCount++;\n }\n\n if (newVisibleCount >= items.length) {\n return newVisibleCount;\n }\n\n const overflowButtonWidth = overflowButton.current\n ? overflowButton.current.offsetWidth + gap\n : 0;\n maxWidth -= overflowButtonWidth;\n\n while (currentWidth > maxWidth) {\n const removed = visible.pop();\n if (!removed) break;\n currentWidth -= getTabWidth(removed) + gap;\n newVisibleCount--;\n }\n\n if (selectedTab && !visible.includes(selectedTab)) {\n const selectedTabWidth = getTabWidth(selectedTab) + gap;\n while (currentWidth + selectedTabWidth > maxWidth) {\n const removed = visible.pop();\n if (!removed) break;\n currentWidth -= getTabWidth(selectedTab) + gap;\n newVisibleCount--;\n }\n }\n\n // minimal count should be 0, if there is no space for any tab apart from selected tab from the overflow menu\n return Math.max(0, newVisibleCount);\n }\n return visibleCount;\n };\n\n setVisibleItems(function () {\n // Show all\n yield {\n visibleCount: tabs.length,\n isMeasuring: true,\n };\n\n // Measure the visible count\n const newVisibleCount = computeVisible(tabs.length);\n const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n yield {\n visibleCount: newVisibleCount,\n isMeasuring,\n };\n\n // ensure the visible count is correct\n if (isMeasuring) {\n yield {\n visibleCount: computeVisible(newVisibleCount),\n isMeasuring: false,\n };\n }\n });\n });\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n useIsomorphicLayoutEffect(() => {\n updateOverflow();\n }, [selected]);\n\n useEffect(() => {\n const handleWindowResize = () => {\n updateOverflow();\n };\n\n targetWindow?.addEventListener(\"resize\", handleWindowResize);\n\n return () => {\n targetWindow?.removeEventListener(\"resize\", handleWindowResize);\n };\n }, [updateOverflow, targetWindow]);\n\n useEffect(() => {\n const element = container?.current;\n if (!element) return;\n\n const win = ownerWindow(element);\n\n const resizeObserver = new win.ResizeObserver((entries) => {\n requestAnimationFrame(() => {\n if (entries.length === 0) return;\n\n updateOverflow();\n });\n });\n resizeObserver.observe(element);\n if (element.parentElement) {\n resizeObserver.observe(element.parentElement);\n }\n\n return () => {\n if (element) {\n resizeObserver.unobserve(element);\n }\n };\n }, [container, updateOverflow]);\n\n useEffect(() => {\n const element = container?.current;\n if (!element \|\| isMeasuring) return;\n\n const win = ownerWindow(element);\n\n const mutationObserver = new win.MutationObserver(() => {\n requestAnimationFrame(() => {\n updateOverflow();\n });\n });\n\n mutationObserver.observe(element, {\n childList: true,\n });\n\n return () => {\n mutationObserver.disconnect();\n };\n }, [container, updateOverflow, isMeasuring]);\n\n const childArray = useMemo(() => Children.toArray(children), [children]);\n const visible = useMemo(\n () => childArray.slice(0, visibleCount),\n [visibleCount, childArray],\n );\n const hidden = useMemo(\n () => childArray.slice(visibleCount),\n [childArray, visibleCount],\n );\n\n const hiddenSelectedIndex = hidden.findIndex(\n (child) =>\n isValidElement<TabNextProps>(child) && child?.props?.value === selected,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (visibleCount === childArray.length) {\n realSelectedIndex.current = childArray.findIndex(\n (child) =>\n isValidElement<TabNextProps>(child) &&\n child?.props?.value === selected,\n );\n }\n }, [visibleCount, childArray, selected]);\n\n if (selected && hiddenSelectedIndex !== -1) {\n const removed = hidden.splice(hiddenSelectedIndex, 1);\n visible.push(removed[0]);\n }\n\n if (isMeasuring) {\n return [childArray, [], isMeasuring, realSelectedIndex] as const;\n }\n\n return [visible, hidden, isMeasuring, realSelectedIndex] as const;\n}\n"],"names":["visibleCount","visible","isMeasuring"],"mappings":"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"}

package/dist-es/tokenized-input/useTokenizedInput.js CHANGED Viewed

@@ -22,15 +22,15 @@ function useTokenizedInput(props) {
   validateProps(props);
   const {
     inFormField,
-    // @ts-ignore
+    // @ts-expect-error
     popoutMode,
-    // @ts-ignore
+    // @ts-expect-error
     popoutActions,
-    // @ts-ignore
+    // @ts-expect-error
     setIsPoppedOut,
-    // @ts-ignore
+    // @ts-expect-error
     setManagedPopout,
-    // @ts-ignore
+    // @ts-expect-error
     setIntendedHeight,
     a11yProps: {
       "aria-labelledby": ariaLabelledBy,