npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.48 → 1.0.0-alpha.49 - Mend

@salt-ds/lab 1.0.0-alpha.48 → 1.0.0-alpha.49

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 (1219) 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 ElementRef,\n ManagedListRef,\n OverflowItem,\n OverflowLayoutHookProps,\n} from \"./overflowTypes\";\n\nimport { ~~getIsOverflowed~~, ~~measureContainerOverflow~~ } from \"~~./overflowUtils~~\";\nimport { ~~useDynamicCollapse~~ } from \"./~~useDynamicCollapse~~\";\nimport { ~~useInstantCollapse~~ } from \"./~~useInstantCollapse~~\";\nimport { ~~useOverflow~~ } from \"./~~useOverflow~~\";\nimport { ~~useReclaimSpace~~ } from \"./~~useReclaimSpace~~\";\nimport { ~~ResizeHandler,~~ ~~useResizeObserver~~ } from \"~~../responsive~~\";\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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"}
1	+ {"version":3,"file":"useOverflowLayout.js","sources":["../src/responsive/useOverflowLayout.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport type {\n ElementRef,\n ManagedListRef,\n OverflowItem,\n OverflowLayoutHookProps,\n} from \"./overflowTypes\";\n\nimport { type ResizeHandler, useResizeObserver } from \"../responsive\";\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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"}

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

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { popNextItemByPriority, measureContainerOverflow, getOverflowIndicator } from './overflowUtils.js';
+import { measureContainerOverflow, getOverflowIndicator } from './overflowUtils.js';
 const getPriority = (item) => item.priority;
 const canReclaimSpace = (item) => item.collapsed && item.reclaimSpace;
@@ -17,11 +17,12 @@ const findNextOverflowedItem = (items) => {
 };
 const addAllVisible = (sum, m) => sum + (m.overflowed ? 0 : m.size);
 const canReleaseReclaimedSpace = (size, items) => {
+  var _a;
   const claimant = items.find(hasReclaimedSpace);
   const overflowedItem = findNextOverflowedItem(items);
   if (claimant && overflowedItem) {
     const renderedSize = items.reduce(addAllVisible, 0);
-    const { size: indicatorSize } = getOverflowIndicator(items);
+    const { size: indicatorSize } = (_a = getOverflowIndicator(items)) != null ? _a : { size: 0 };
     const { size: overflowedSize } = overflowedItem;
     const reclaimableSpace = getReclaimableSpace(claimant);
     const renderedSizeAfterReclaim = renderedSize - reclaimableSpace - indicatorSize;
@@ -39,23 +40,6 @@ const useReclaimSpace = ({
   overflowContainerRef: ref,
   orientation
 }) => {
-  useCallback(
-    (visibleContentSize, containerSize) => {
-      let newlyOverflowedItems = [];
-      const { current: managedItems } = managedItemsRef;
-      const visibleItems = managedItems.slice();
-      while (visibleContentSize > containerSize) {
-        const overflowedItem = popNextItemByPriority(visibleItems);
-        if (overflowedItem === null) {
-          break;
-        }
-        visibleContentSize -= overflowedItem.size;
-        newlyOverflowedItems.push(overflowedItem);
-      }
-      return newlyOverflowedItems;
-    },
-    []
-  );
   const releaseReclaimedSpace = useCallback(() => {
     const { current: managedItems } = managedItemsRef;
     const claimant = managedItems.find(hasReclaimedSpace);
@@ -72,7 +56,7 @@ const useReclaimSpace = ({
         }
       });
     }
-  }, []);
+  }, [managedItemsRef, collectionHook.dispatch]);
   const handleResize = useCallback(
     (size, containerHasGrown) => {
       const { isOverflowing: willOverflow } = measureContainerOverflow(
@@ -99,7 +83,13 @@ const useReclaimSpace = ({
         }
       }
     },
-    []
+    [
+      ref,
+      managedItemsRef,
+      releaseReclaimedSpace,
+      collectionHook.dispatch,
+      orientation
+    ]
   );
   return {
     onResize: handleResize

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 {\n ~~OverflowItem~~,\n ~~OverflowHookProps~~,\n ~~OverflowHookResult~~,\n} from \"./overflowTypes\";\n\nimport {\n getOverflowIndicator,\n measureContainerOverflow,\n ~~popNextItemByPriority,\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)~~!;\~~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 getAllOverflowedItems = useCallback(\n (visibleContentSize: number, containerSize: number) => {\n let newlyOverflowedItems = [];\n const { current: managedItems } = managedItemsRef;\n const visibleItems = managedItems.slice();\n while (visibleContentSize > containerSize) {\n const overflowedItem = popNextItemByPriority(visibleItems);\n if (overflowedItem === null) {\n break;\n }\n // eslint-disable-next-line no-param-reassign\n visibleContentSize -= overflowedItem.size;\n newlyOverflowedItems.push(overflowedItem);\n }\n return newlyOverflowedItems;\n },\n []\n );\n\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\n // collapse the claimant and turn off ~~recvlaimed~~\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 }, []);\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 );\n\n return {\n onResize: handleResize,\n };\n};\n"],"names":[],"mappings":";;;~~AAaA~~,MAAM,WAAA,GAAc,CAAC,IAAA,KAAuB,IAAK,CAAA,QAAA,CAAA;AAEjD,MAAM,eAAkB,GAAA,CAAC,IACvB,KAAA,IAAA,CAAK,aAAa,IAAK,CAAA,YAAA,CAAA;AAEzB,MAAM,iBAAA,GAAoB,CAAC,IAAA,KAAuB,IAAK,CAAA,cAAA,CAAA;AACvD,MAAM,sBAAsB,CAAC,EAAE,MAAM,OAAU,GAAA,CAAA,OAC7C,IAAO,GAAA,OAAA,CAAA;AAET,MAAM,sBAAA,GAAyB,CAAC,KAA0B,KAAA;AACxD,EAAA,MAAM,kBAAkB,KAAM,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,KAAK,UAAU,CAAA,CAAA;AAC9D,EAAA,MAAM,cAAc,IAAK,CAAA,GAAA,CAAI,GAAG,eAAgB,CAAA,GAAA,CAAI,WAAW,CAAC,CAAA,CAAA;AAChE,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,eAAA,CAAgB,QAAQ,CAAK,EAAA,EAAA;AAC/C,IAAI,IAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,QAAA,KAAa,WAAa,EAAA;AAC/C,MAAA,OAAO,eAAgB,CAAA,CAAA,CAAA,CAAA;AAAA,KACzB;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,aAAA,GAAgB,CAAC,GAAa,EAAA,CAAA,KACzC,OAAO,CAAE,CAAA,UAAA,GAAa,IAAI,CAAE,CAAA,IAAA,EAAA;AAE9B,MAAM,wBAAA,GAA2B,CAAC,IAAA,EAAc,KAA0B,KAAA;~~AACxE~~,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,IAAA,CAAK,iBAAiB,CAAA,CAAA;AAC7C,EAAM,MAAA,cAAA,GAAiB,uBAAuB,KAAK,CAAA,CAAA;AACnD,EAAA,IAAI,YAAY,cAAgB,EAAA;AAC9B,IAAA,MAAM,YAAe,GAAA,KAAA,CAAM,MAAO,CAAA,aAAA,EAAe,CAAC,CAAA,CAAA;AAClD,~~IAAA~~,~~MAAM~~,EAAE,~~IAAA~~,~~EAAM~~,~~aAAc~~,EAAA,~~GAAI~~,~~qBAAqB~~,KAAK,~~CAAA~~,CAAA;~~AAC1D~~,IAAM,MAAA,EAAE,IAAM,EAAA,cAAA,EAAmB,GAAA,cAAA,CAAA;AAEjC,IAAM,MAAA,gBAAA,GAAmB,oBAAoB,QAAQ,CAAA,CAAA;AACrD,IAAM,MAAA,wBAAA,GACJ,eAAe,gBAAmB,GAAA,aAAA,CAAA;AACpC,IAAA,MAAM,oBAAoB,IAAO,GAAA,wBAAA,CAAA;AACjC,IAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACF;AACF,CAAA,CAAA;AAEA,MAAM,yBAA4B,GAAA,CAAC,KACjC,KAAA,KAAA,CAAM,KAAK,eAAe,CAAA,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,WAAA;AACF,CAA6C,KAAA;AAC3C,EAA8B,WAAA;AAAA,IAC5B,CAAC,oBAA4B,aAA0B,KAAA;AACrD,MAAA,IAAI,uBAAuB,EAAC,CAAA;AAC5B,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA,CAAA;AAClC,MAAM,MAAA,YAAA,GAAe,aAAa,KAAM,EAAA,CAAA;AACxC,MAAA,OAAO,qBAAqB,aAAe,EAAA;AACzC,QAAM,MAAA,cAAA,GAAiB,sBAAsB,YAAY,CAAA,CAAA;AACzD,QAAA,IAAI,mBAAmB,IAAM,EAAA;AAC3B,UAAA,MAAA;AAAA,SACF;AAEA,QAAA,kBAAA,IAAsB,cAAe,CAAA,IAAA,CAAA;AACrC,QAAA,oBAAA,CAAqB,KAAK,cAAc,CAAA,CAAA;AAAA,OAC1C;AACA,MAAO,OAAA,oBAAA,CAAA;AAAA,KACT;AAAA,IACA,EAAC;AAAA,IACH;AAEA,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAW,YAAa,CAAA,IAAA,CAAK,iBAAiB,CAAA,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,KAAA,CAAA;AAAA,UAChB,MAAM,QAAS,CAAA,OAAA;AAAA,UACf,UAAU,QAAS,CAAA,IAAA;AAAA,SACrB;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,~~GACF~~,~~EAAG~~,~~EAAE~~,CAAA,CAAA;~~AACL~~,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,WAAA;AAAA,OACF,CAAA;AACA,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,eAAA,CAAA;AAElC,MAAA,IAAI,iBAAqB,IAAA,wBAAA,CAAyB,IAAM,EAAA,YAAY,CAAG,EAAA;AACrE,QAAsB,qBAAA,EAAA,CAAA;AAAA,iBAEtB,CAAC,iBAAA,IACD,YACA,IAAA,yBAAA,CAA0B,YAAY,CACtC,EAAA;AACA,QAAM,MAAA,cAAA,GAAiB,YAAa,CAAA,IAAA,CAAK,eAAe,CAAA,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,IAAA;AAAA,aACZ;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AAAA,OACF;AAAA,KACF;AAAA,IACA,~~EAAC~~;AAAA,~~GACH~~,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,GACZ,CAAA;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 = \"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

@@ -38,7 +38,7 @@ const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserve
         }
       }
       if (sizeChanged) {
-        onResize && onResize(measurements);
+        onResize == null ? void 0 : onResize(measurements);
       }
     }
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useResizeObserver.js","sources":["../src/responsive/useResizeObserver.ts"],"sourcesContent":["/* ~~eslint-disable no-restricted-syntax */\nimport~~ { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useRef, ~~RefObject~~ } 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 ~~&& 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 ~~// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment~~\n const { fonts } = document ~~as any~~;\n if (fonts) {\n ~~// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\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":";;;~~AAGa~~,MAAA,WAAA,GAAc,CAAC,QAAA,EAAU,OAAO,EAAA;AAChC,MAAA,UAAA,GAAa,CAAC,QAAQ,EAAA;AACtB,MAAA,SAAA,GAAY,CAAC,OAAO,EAAA;AAgBjC,MAAM,WAAA,uBAAkB,OAAsC,EAAA,CAAA;AAE9D,MAAM,aAAgB,GAAA,CACpB,OACA,EAAA,WAAA,EACA,SACW,KAAA;AACX,EAAQ,QAAA,SAAA;AAAA,IACD,KAAA,QAAA;AACH,MAAA,OAAO,WAAY,CAAA,MAAA,CAAA;AAAA,IAChB,KAAA,cAAA;AACH,MAAA,OAAO,OAAQ,CAAA,YAAA,CAAA;AAAA,IACZ,KAAA,aAAA;AACH,MAAA,OAAO,OAAQ,CAAA,WAAA,CAAA;AAAA,IACZ,KAAA,OAAA;AACH,MAAA,OAAO,WAAY,CAAA,KAAA,CAAA;AAAA,IAAA;AAEnB,MAAO,OAAA,CAAA,CAAA;AAAA,GAAA;AAEb,CAAA,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,CAAA;AAChC,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,GAAA,CAAI,MAAqB,CAAA,CAAA;AAC5D,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAM,MAAA,EAAE,QAAU,EAAA,YAAA,EAAiB,GAAA,cAAA,CAAA;AACnC,MAAA,IAAI,WAAc,GAAA,KAAA,CAAA;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,SAAA;AAAA,SACF,CAAA;AACA,QAAA,IAAI,YAAY,IAAM,EAAA;AACpB,UAAc,WAAA,GAAA,IAAA,CAAA;AACd,UAAA,YAAA,CAAa,SAAkC,CAAA,GAAA,OAAA,CAAA;AAAA,SACjD;AAAA,OACF;AACA,MAAA,IAAI,WAAa,EAAA;AACf,~~QAAA~~,QAAA,~~IAAY~~,~~SAAS~~,~~YAAY~~,CAAA,CAAA;AAAA,~~OACnC~~;AAAA,KACF;AAAA,GACF;AACF,CAAC,CACD,GAAA,IAAA,CAAA;AAMC,SAAS,iBACd,CAAA,GAAA,EACA,UACA,EAAA,QAAA,EACA,oBAAoB,KACd,EAAA;AACN,EAAM,MAAA,aAAA,GAAgB,OAAO,UAAU,CAAA,CAAA;AACvC,EAAM,MAAA,OAAA,GAAU,WAAY,CAAA,CAAC,MAA8C,KAAA;AACzE,IAAM,MAAA,IAAA,GAAO,OAAO,qBAAsB,EAAA,CAAA;AAC1C,IAAA,OAAO,cAAc,OAAQ,CAAA,MAAA;AAAA,MAC3B,CAAC,KAAgC,GAAQ,KAAA;AACvC,QAAA,GAAA,CAAI,GAAO,CAAA,GAAA,aAAA,CAAc,MAAQ,EAAA,IAAA,EAAM,GAAwB,CAAA,CAAA;AAC/D,QAAO,OAAA,GAAA,CAAA;AAAA,OACT;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAUL,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,SAAS,GAAI,CAAA,OAAA,CAAA;AACnB,IAAA,IAAI,SAAY,GAAA,KAAA,CAAA;AAEhB,IAAA,eAAe,gBAAmB,GAAA;AAGhC,MAAA,WAAA,CAAY,IAAI,MAAQ,EAAA,EAAE,YAAc,EAAA,IAA4B,CAAA,CAAA;AACpE,MAAY,SAAA,GAAA,KAAA,CAAA;AAEZ,MAAM,MAAA,EAAE,OAAU,GAAA,QAAA,CAAA;AAClB,MAAA,IAAI,KAAO,EAAA;~~AAET~~,QAAA,MAAM,KAAM,CAAA,KAAA,CAAA;AAAA,OACd;AACA,MAAI,IAAA,CAAC,aAAa,cAAgB,EAAA;AAChC,QAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AAC7C,QAAA,IAAI,cAAgB,EAAA;AAClB,UAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,CAAA,CAAA;AACnC,UAAA,cAAA,CAAe,YAAe,GAAA,YAAA,CAAA;AAC9B,UAAA,cAAA,CAAe,QAAQ,MAAM,CAAA,CAAA;AAC7B,UAAA,IAAI,iBAAmB,EAAA;AACrB,YAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEA,IAAA,IAAI,MAAQ,EAAA;AAEV,MAAI,IAAA,WAAA,CAAY,GAAI,CAAA,MAAM,CAAG,EAAA;AAC3B,QAAM,MAAA,KAAA;AAAA,UACJ,2DAAA;AAAA,SACF,CAAA;AAAA,OACF;AACA,MAAA,KAAK,gBAAiB,EAAA,CAAA;AAAA,KACxB;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,MAAU,IAAA,WAAA,CAAY,GAAI,CAAA,MAAM,CAAG,EAAA;AACrC,QAAA,cAAA,CAAe,UAAU,MAAM,CAAA,CAAA;AAC/B,QAAA,WAAA,CAAY,OAAO,MAAM,CAAA,CAAA;AACzB,QAAY,SAAA,GAAA,IAAA,CAAA;AAAA,OACd;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,OAAO,CAAC,CAAA,CAAA;AAEjB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,SAAS,GAAI,CAAA,OAAA,CAAA;AACnB,IAAM,MAAA,MAAA,GAAS,WAAY,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACrC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAI,IAAA,aAAA,CAAc,YAAY,UAAY,EAAA;AACxC,QAAA,aAAA,CAAc,OAAU,GAAA,UAAA,CAAA;AACxB,QAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,CAAA,CAAA;AACnC,QAAA,MAAA,CAAO,YAAe,GAAA,YAAA,CAAA;AAAA,OACxB;AAEA,MAAA,MAAA,CAAO,QAAW,GAAA,QAAA,CAAA;AAAA,KACpB;AAAA,KACC,CAAC,UAAA,EAAY,OAAS,EAAA,GAAA,EAAK,QAAQ,CAAC,CAAA,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 // 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":"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"}

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

@@ -1,5 +1,5 @@
-import { useState, useRef, useCallback } from 'react';
 import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useState, useRef, useCallback } from 'react';
 import { useResizeObserver, WidthOnly } from './useResizeObserver.js';
 const NONE = [];
@@ -16,7 +16,7 @@ function useWidth(responsive) {
       return void 0;
     }
     handleResize(ref.current.getBoundingClientRect());
-  }, [handleResize, responsive]);
+  }, [handleResize]);
   return [ref, width];
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { ~~RefObject,~~ ~~useCallback, useRef, useState~~ } from \"~~react~~\";\nimport { ~~useIsomorphicLayoutEffect~~ } from \"~~@salt-ds/core~~\";\nimport {\n ResizeHandler,\n ~~useResizeObserver~~,\n ~~WidthOnly~~,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n responsive: boolean\n): [RefObject<Element>, number] {\n const [width, setWidth] = useState<number>();\n const ref = useRef<HTMLElement>(null);\n\n const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n setWidth(newWidth);\n }, []);\n\n const measurementsToObserve = responsive ? WidthOnly : NONE;\n useResizeObserver(ref, measurementsToObserve, handleResize);\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return undefined;\n }\n handleResize(ref.current.getBoundingClientRect());\n }, [handleResize~~, responsive~~]);\n\n return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,OAAiB,EAAC,CAAA;AAEjB,SAAS,SACd,UAC8B,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAiB,EAAA,CAAA;AAC3C,EAAM,MAAA,GAAA,GAAM,OAAoB,IAAI,CAAA,CAAA;AAEpC,EAAA,MAAM,eAA8B,WAAY,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwB,aAAa,SAAY,GAAA,IAAA,CAAA;AACvD,EAAkB,iBAAA,CAAA,GAAA,EAAK,uBAAuB,YAAY,CAAA,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AACA,IAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA,CAAA;AAAA,~~GAC/C~~,~~EAAA~~,CAAC,~~YAAc~~,~~EAAA,UAAU,~~CAAC,CAAA,CAAA;~~AAE7B~~,EAAO,OAAA,CAAC,KAAK,KAAK,CAAA,CAAA;AACpB;;;;"}
1	+ {"version":3,"file":"useWidth.js","sources":["../src/responsive/useWidth.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type RefObject, useCallback, useRef, useState } from \"react\";\nimport {\n type ResizeHandler,\n WidthOnly,\n useResizeObserver,\n} from \"./useResizeObserver\";\n\nconst NONE: string[] = [];\n\nexport function useWidth<Element extends HTMLElement>(\n responsive: boolean,\n): [RefObject<Element>, number] {\n const [width, setWidth] = useState<number>();\n const ref = useRef<HTMLElement>(null);\n\n const handleResize: ResizeHandler = useCallback(({ width: newWidth }) => {\n setWidth(newWidth);\n }, []);\n\n const measurementsToObserve = responsive ? WidthOnly : NONE;\n useResizeObserver(ref, measurementsToObserve, handleResize);\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return undefined;\n }\n handleResize(ref.current.getBoundingClientRect());\n }, [handleResize]);\n\n return [ref, width] as [RefObject<Element>, number];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,OAAiB,EAAC,CAAA;AAEjB,SAAS,SACd,UAC8B,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAiB,EAAA,CAAA;AAC3C,EAAM,MAAA,GAAA,GAAM,OAAoB,IAAI,CAAA,CAAA;AAEpC,EAAA,MAAM,eAA8B,WAAY,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwB,aAAa,SAAY,GAAA,IAAA,CAAA;AACvD,EAAkB,iBAAA,CAAA,GAAA,EAAK,uBAAuB,YAAY,CAAA,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AACA,IAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA,CAAA;AAAA,GAClD,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAO,OAAA,CAAC,KAAK,KAAK,CAAA,CAAA;AACpB;;;;"}

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

@@ -34,9 +34,8 @@ const liftResponsivePropsToFormField = (props) => {
       },
       [{}, {}]
     );
-  } else {
-    return [{}, props];
   }
+  return [{}, props];
 };
 export { isResponsiveAttribute, liftResponsivePropsToFormField };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = \"data-collapsible\";\n\nexport type dataPadDirection = \"data-pad-start\" \| \"data-pad-end\";\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n [COLLAPSIBLE]: true,\n \"data-pad-start\": true,\n \"data-pad-end\": true,\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n dynamic: \"dynamic\",\n instant: \"instant\",\n true: \"instant\",\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? \"none\";\n\ntype AnyProps = Record<string, unknown>;\ntype ResponsivePropsTuple = [AnyProps, AnyProps];\n/*\n data- attributes can be used to manage item overflow behaviour. Users may\n * speficy these attributes directly on a Toolbar component, which ultimately\n * gets wrapped by a FormField. We need to 'lift' these attributes to the form\n * field and remove them from the props of the nested component.\n * @param props\n * @returns\n */\nexport const liftResponsivePropsToFormField = (\n props: AnyProps\n): ResponsivePropsTuple => {\n const propNames = Object.keys(props);\n if (propNames.some(isResponsiveAttribute)) {\n return propNames.reduce<ResponsivePropsTuple>(\n (tuple, propName): ResponsivePropsTuple => {\n const [toolbarProps, rest] = tuple;\n const propValue = props[propName];\n if (isResponsiveAttribute(propName)) {\n const value = isCollapsible(propName)\n ? collapsibleValue(propValue as string)\n : propValue;\n\n toolbarProps[propName] = value;\n rest[propName] = undefined;\n }\n return tuple;\n },\n [{}, {}]\n );\n } ~~else {~~\n return [{}, props];\n }~~\n}~~;\n"],"names":[],"mappings":"AAAA,MAAM,WAAc,GAAA,kBAAA,CAAA;AAIpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAc,GAAA,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA,IAAA;AAClB,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,QAA2B,KAAA;AAVjE,EAAA,IAAA,EAAA,CAAA;AAWE,EAAA,OAAA,CAAA,EAAA,GAAA,oBAAA,CAAqB,cAArB,IAAkC,GAAA,EAAA,GAAA,KAAA,CAAA;AAAA,EAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA,CAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,SAAA;AACR,CAAA,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAe,KAAA;AArBzC,EAAA,IAAA,EAAA,CAAA;AAqB4C,EAAA,OAAA,CAAA,EAAA,GAAA,iBAAA,CAAkB,WAAlB,IAA4B,GAAA,EAAA,GAAA,MAAA,CAAA;AAAA,CAAA,CAAA;AAY3D,MAAA,8BAAA,GAAiC,CAC5C,KACyB,KAAA;AACzB,EAAM,MAAA,SAAA,GAAY,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AACnC,EAAI,IAAA,SAAA,CAAU,IAAK,CAAA,qBAAqB,CAAG,EAAA;AACzC,IAAA,OAAO,SAAU,CAAA,MAAA;AAAA,MACf,CAAC,OAAO,QAAmC,KAAA;AACzC,QAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,KAAA,CAAA;AAC7B,QAAA,MAAM,YAAY,KAAM,CAAA,QAAA,CAAA,CAAA;AACxB,QAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,UAAA,MAAM,QAAQ,aAAc,CAAA,QAAQ,CAChC,GAAA,gBAAA,CAAiB,SAAmB,CACpC,GAAA,SAAA,CAAA;AAEJ,UAAA,YAAA,CAAa,QAAY,CAAA,GAAA,KAAA,CAAA;AACzB,UAAA,IAAA,CAAK,QAAY,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,SACnB;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,EAAI,EAAA,EAAE,CAAA;AAAA,KACT,CAAA;AAAA,~~GACK,MAAA~~;~~AACL~~,~~IAAO~~,OAAA,CAAC,EAAC,EAAG,KAAK,CAAA,CAAA;~~AAAA,GACnB;AACF~~;;;;"}
1	+ {"version":3,"file":"utils.js","sources":["../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = \"data-collapsible\";\n\nexport type dataPadDirection = \"data-pad-start\" \| \"data-pad-end\";\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n [COLLAPSIBLE]: true,\n \"data-pad-start\": true,\n \"data-pad-end\": true,\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n dynamic: \"dynamic\",\n instant: \"instant\",\n true: \"instant\",\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? \"none\";\n\ntype AnyProps = Record<string, unknown>;\ntype ResponsivePropsTuple = [AnyProps, AnyProps];\n/*\n data- attributes can be used to manage item overflow behaviour. Users may\n * speficy these attributes directly on a Toolbar component, which ultimately\n * gets wrapped by a FormField. We need to 'lift' these attributes to the form\n * field and remove them from the props of the nested component.\n * @param props\n * @returns\n */\nexport const liftResponsivePropsToFormField = (\n props: AnyProps,\n): ResponsivePropsTuple => {\n const propNames = Object.keys(props);\n if (propNames.some(isResponsiveAttribute)) {\n return propNames.reduce<ResponsivePropsTuple>(\n (tuple, propName): ResponsivePropsTuple => {\n const [toolbarProps, rest] = tuple;\n const propValue = props[propName];\n if (isResponsiveAttribute(propName)) {\n const value = isCollapsible(propName)\n ? collapsibleValue(propValue as string)\n : propValue;\n\n toolbarProps[propName] = value;\n rest[propName] = undefined;\n }\n return tuple;\n },\n [{}, {}],\n );\n }\n return [{}, props];\n};\n"],"names":[],"mappings":"AAAA,MAAM,WAAc,GAAA,kBAAA,CAAA;AAIpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAc,GAAA,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA,IAAA;AAClB,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,QAA2B,KAAA;AAVjE,EAAA,IAAA,EAAA,CAAA;AAWE,EAAA,OAAA,CAAA,EAAA,GAAA,oBAAA,CAAqB,cAArB,IAAkC,GAAA,EAAA,GAAA,KAAA,CAAA;AAAA,EAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA,CAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,SAAA;AACR,CAAA,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAe,KAAA;AArBzC,EAAA,IAAA,EAAA,CAAA;AAqB4C,EAAA,OAAA,CAAA,EAAA,GAAA,iBAAA,CAAkB,WAAlB,IAA4B,GAAA,EAAA,GAAA,MAAA,CAAA;AAAA,CAAA,CAAA;AAY3D,MAAA,8BAAA,GAAiC,CAC5C,KACyB,KAAA;AACzB,EAAM,MAAA,SAAA,GAAY,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AACnC,EAAI,IAAA,SAAA,CAAU,IAAK,CAAA,qBAAqB,CAAG,EAAA;AACzC,IAAA,OAAO,SAAU,CAAA,MAAA;AAAA,MACf,CAAC,OAAO,QAAmC,KAAA;AACzC,QAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,KAAA,CAAA;AAC7B,QAAA,MAAM,YAAY,KAAM,CAAA,QAAA,CAAA,CAAA;AACxB,QAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,UAAA,MAAM,QAAQ,aAAc,CAAA,QAAQ,CAChC,GAAA,gBAAA,CAAiB,SAAmB,CACpC,GAAA,SAAA,CAAA;AAEJ,UAAA,YAAA,CAAa,QAAY,CAAA,GAAA,KAAA,CAAA;AACzB,UAAA,IAAA,CAAK,QAAY,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,SACnB;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,EAAI,EAAA,EAAE,CAAA;AAAA,KACT,CAAA;AAAA,GACF;AACA,EAAO,OAAA,CAAC,EAAC,EAAG,KAAK,CAAA,CAAA;AACnB;;;;"}

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

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { clsx } from 'clsx';
 import { useForkRef, useControlled, Button } from '@salt-ds/core';
+import { CloseIcon, SearchIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
 import { InputLegacy } from '../input-legacy/InputLegacy.js';
 import { StaticInputAdornment } from '../input-legacy/StaticInputAdornment.js';
-import { CloseIcon, SearchIcon } from '@salt-ds/icons';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from './SearchInput.css.js';
 const baseName = "saltSearchInput";

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 {\~~n ChangeEvent,\n ComponentType,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useRef,\n~~} from \"~~react~~\";\nimport { clsx } from \"clsx\";\nimport { ~~Button,~~ ~~useControlled,~~ ~~useForkRef~~ } from \"~~@salt-ds/core~~\";\nimport {\n InputLegacy as Input,\n InputLegacyProps as InputProps,\n StaticInputAdornment,\n} from \"../input-legacy\";\nimport { ~~CloseIcon,~~ ~~SearchIcon~~ } from \"@salt-ds/~~icons~~\";\n\nimport { useWindow } from \"@salt-ds/window\";\~~nimport { useComponentCssInjection } from \"@salt-ds/styles\";\~~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\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 } from \"@salt-ds/core\";\nimport { CloseIcon, SearchIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentType,\n type KeyboardEvent,\n type SyntheticEvent,\n forwardRef,\n useRef,\n} from \"react\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n StaticInputAdornment,\n} from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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\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/skip-link/SkipLink.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { makePrefixer, Link } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import { useManageFocusOnTarget } from './internal/useManageFocusOnTarget.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './SkipLink.css.js';
 const withBaseName = makePrefixer("saltSkipLink");

package/dist-es/skip-link/SkipLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { ~~forwardRef~~, ~~RefObject~~ } from \"~~react~~\";\nimport { ~~Link,~~ ~~LinkProps, makePrefixer~~ } from \"@salt-ds/~~core~~\";\nimport { ~~clsx~~ } from \"~~clsx~~\";\nimport { ~~useManageFocusOnTarget~~ } from \"~~./internal/useManageFocusOnTarget~~\";\nimport { ~~useWindow~~ } from \"~~@salt-ds/window~~\";\nimport { ~~useComponentCssInjection~~ } from \"~~@salt-ds~~/~~styles~~\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends LinkProps {\n /*\n This is a ref that has access to the target element.\n \n This will be used to apply focus to that element\n \n Refs are referentially stable so if this changes it won't be picked up\n * will need to find a better way of passing in the target element to apply the attributes\n */\n targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n function SkipLink({ className, targetRef, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-link\",\n css: skipLinkCss,\n window: targetWindow,\n });\n\n const targetClass = clsx(withBaseName(\"target\"), className);\n\n const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n return (\n <li>\n <Link\n {...eventHandlers}\n {...rest}\n className={clsx(withBaseName(), className)}\n ref={ref}\n />\n </li>\n );\n }\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,EAAE,WAAW,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA,CAAA;AAE1D,IAAA,MAAM,aAAgB,GAAA,sBAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA,CAAA;AAEvE,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { Link, type LinkProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type RefObject, forwardRef } from \"react\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends LinkProps {\n /*\n This is a ref that has access to the target element.\n \n This will be used to apply focus to that element\n \n Refs are referentially stable so if this changes it won't be picked up\n * will need to find a better way of passing in the target element to apply the attributes\n */\n targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n function SkipLink({ className, targetRef, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-link\",\n css: skipLinkCss,\n window: targetWindow,\n });\n\n const targetClass = clsx(withBaseName(\"target\"), className);\n\n const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n return (\n <li>\n <Link\n {...eventHandlers}\n {...rest}\n className={clsx(withBaseName(), className)}\n ref={ref}\n />\n </li>\n );\n },\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,EAAE,WAAW,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA,CAAA;AAE1D,IAAA,MAAM,aAAgB,GAAA,sBAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA,CAAA;AAEvE,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/skip-link/SkipLinks.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
-import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from './SkipLinks.css.js';
 const withBaseName = makePrefixer("saltSkipLinks");

package/dist-es/skip-link/SkipLinks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { ~~forwardRef,~~ ~~HTMLAttributes~~ } from \"~~react~~\";\nimport { clsx } from \"clsx\";\nimport { ~~makePrefixer~~ } from \"~~@salt-ds/core~~\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nimport skipLinksCss from \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n HTMLUListElement,\n HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n const { className, children, ...restProps } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-links\",\n css: skipLinksCss,\n window: targetWindow,\n });\n\n return (\n <ul {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n {children}\n </ul>\n );\n});\n"],"names":["SkipLinks","skipLinksCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA,CAGvB,SAASA,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC9C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAC5D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport skipLinksCss from \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n HTMLUListElement,\n HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n const { className, children, ...restProps } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-links\",\n css: skipLinksCss,\n window: targetWindow,\n });\n\n return (\n <ul {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n {children}\n </ul>\n );\n});\n"],"names":["SkipLinks","skipLinksCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA,CAGvB,SAASA,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC9C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAC5D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import { RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\nexport const useManageFocusOnTarget = ({\n targetRef,\n targetClass,\n}: {\n targetRef: RefObject<HTMLElement> \| undefined;\n targetClass: string;\n}):\n \| { onBlur: () => NodeJS.Timeout; onClick: () => void }\n \| Record<string, undefined> => {\n const [target, setTarget] = useState<HTMLElement>();\n\n const hasTabIndex = useRef<boolean \| string>();\n const shouldRemoveTabIndex = useRef<boolean>();\n\n useEffect(() => {\n if (targetRef?.current) {\n setTarget(targetRef.current);\n }\n }, [targetRef]);\n\n return useMemo(() => {\n if (!target) {\n return {};\n }\n\n const addTabIndex = () => {\n const tabIndex = target.getAttribute(\"tabIndex\");\n hasTabIndex.current = tabIndex \|\| tabIndex === \"0\";\n\n if (!hasTabIndex.current) {\n shouldRemoveTabIndex.current = true;\n target.setAttribute(\"tabIndex\", \"-1\");\n }\n };\n\n const removeTabIndex = () => {\n if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n target.removeAttribute(\"tabIndex\");\n }\n };\n\n const handleFocusOnTarget = () => {\n shouldRemoveTabIndex.current = false;\n target.classList.add(targetClass);\n };\n\n const handleBlurFromTarget = () => {\n shouldRemoveTabIndex.current = true;\n removeTabIndex();\n target.classList.remove(targetClass);\n };\n\n return {\n onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),\n onClick: () => {\n addTabIndex();\n setTimeout(() => {\n target.focus();\n }, FOCUS_TIMEOUT);\n\n target.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n target.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n },\n };\n }, [target, targetClass]);\n};\n"],"names":[],"mappings":";;AAEA,MAAM,aAAgB,GAAA,EAAA,CAAA;AAEf,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,WAAA;AACF,CAKiC,KAAA;AAC/B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAsB,EAAA,CAAA;AAElD,EAAA,MAAM,cAAc,MAAyB,EAAA,CAAA;AAC7C,EAAA,MAAM,uBAAuB,MAAgB,EAAA,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,OAAS,EAAA;AACtB,MAAA,SAAA,CAAU,UAAU,OAAO,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAEA,IAAA,MAAM,cAAc,MAAM;AACxB,MAAM,MAAA,QAAA,GAAW,MAAO,CAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAC/C,MAAY,WAAA,CAAA,OAAA,GAAU,YAAY,QAAa,KAAA,GAAA,CAAA;AAE/C,MAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA,CAAA;AAC/B,QAAO,MAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA,CAAA;AAAA,OACtC;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,CAAC,WAAA,CAAY,OAAW,IAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAA,MAAA,CAAO,gBAAgB,UAAU,CAAA,CAAA;AAAA,OACnC;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,sBAAsB,MAAM;AAChC,MAAA,oBAAA,CAAqB,OAAU,GAAA,KAAA,CAAA;AAC/B,MAAO,MAAA,CAAA,SAAA,CAAU,IAAI,WAAW,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA,CAAA;AAC/B,MAAe,cAAA,EAAA,CAAA;AACf,MAAO,MAAA,CAAA,SAAA,CAAU,OAAO,WAAW,CAAA,CAAA;AAAA,KACrC,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA,MAAM,UAAW,CAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAY,WAAA,EAAA,CAAA;AACZ,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,WACZ,aAAa,CAAA,CAAA;AAEhB,QAAA,MAAA,CAAO,iBAAiB,OAAS,EAAA,mBAAA,EAAqB,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACpE,QAAA,MAAA,CAAO,iBAAiB,MAAQ,EAAA,oBAAA,EAAsB,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAAA,OACtE;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,WAAW,CAAC,CAAA,CAAA;AAC1B;;;;"}
1	+ {"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import { type RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\nexport const useManageFocusOnTarget = ({\n targetRef,\n targetClass,\n}: {\n targetRef: RefObject<HTMLElement> \| undefined;\n targetClass: string;\n}):\n \| { onBlur: () => NodeJS.Timeout; onClick: () => void }\n \| Record<string, undefined> => {\n const [target, setTarget] = useState<HTMLElement>();\n\n const hasTabIndex = useRef<boolean \| string>();\n const shouldRemoveTabIndex = useRef<boolean>();\n\n useEffect(() => {\n if (targetRef?.current) {\n setTarget(targetRef.current);\n }\n }, [targetRef]);\n\n return useMemo(() => {\n if (!target) {\n return {};\n }\n\n const addTabIndex = () => {\n const tabIndex = target.getAttribute(\"tabIndex\");\n hasTabIndex.current = tabIndex \|\| tabIndex === \"0\";\n\n if (!hasTabIndex.current) {\n shouldRemoveTabIndex.current = true;\n target.setAttribute(\"tabIndex\", \"-1\");\n }\n };\n\n const removeTabIndex = () => {\n if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n target.removeAttribute(\"tabIndex\");\n }\n };\n\n const handleFocusOnTarget = () => {\n shouldRemoveTabIndex.current = false;\n target.classList.add(targetClass);\n };\n\n const handleBlurFromTarget = () => {\n shouldRemoveTabIndex.current = true;\n removeTabIndex();\n target.classList.remove(targetClass);\n };\n\n return {\n onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),\n onClick: () => {\n addTabIndex();\n setTimeout(() => {\n target.focus();\n }, FOCUS_TIMEOUT);\n\n target.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n target.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n },\n };\n }, [target, targetClass]);\n};\n"],"names":[],"mappings":";;AAEA,MAAM,aAAgB,GAAA,EAAA,CAAA;AAEf,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,WAAA;AACF,CAKiC,KAAA;AAC/B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAsB,EAAA,CAAA;AAElD,EAAA,MAAM,cAAc,MAAyB,EAAA,CAAA;AAC7C,EAAA,MAAM,uBAAuB,MAAgB,EAAA,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,OAAS,EAAA;AACtB,MAAA,SAAA,CAAU,UAAU,OAAO,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAEA,IAAA,MAAM,cAAc,MAAM;AACxB,MAAM,MAAA,QAAA,GAAW,MAAO,CAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAC/C,MAAY,WAAA,CAAA,OAAA,GAAU,YAAY,QAAa,KAAA,GAAA,CAAA;AAE/C,MAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA,CAAA;AAC/B,QAAO,MAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA,CAAA;AAAA,OACtC;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,CAAC,WAAA,CAAY,OAAW,IAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAA,MAAA,CAAO,gBAAgB,UAAU,CAAA,CAAA;AAAA,OACnC;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,sBAAsB,MAAM;AAChC,MAAA,oBAAA,CAAqB,OAAU,GAAA,KAAA,CAAA;AAC/B,MAAO,MAAA,CAAA,SAAA,CAAU,IAAI,WAAW,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA,CAAA;AAC/B,MAAe,cAAA,EAAA,CAAA;AACf,MAAO,MAAA,CAAA,SAAA,CAAU,OAAO,WAAW,CAAA,CAAA;AAAA,KACrC,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA,MAAM,UAAW,CAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAY,WAAA,EAAA,CAAA;AACZ,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,WACZ,aAAa,CAAA,CAAA;AAEhB,QAAA,MAAA,CAAO,iBAAiB,OAAS,EAAA,mBAAA,EAAqB,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACpE,QAAA,MAAA,CAAO,iBAAiB,MAAQ,EAAA,oBAAA,EAAsB,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAAA,OACtE;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,WAAW,CAAC,CAAA,CAAA;AAC1B;;;;"}

package/dist-es/slider/Slider.js CHANGED Viewed

@@ -11,8 +11,8 @@ import { createTrackStyle, createHandleStyles } from './internal/styles.js';
 import { useSliderKeyDown } from './internal/useSliderKeyDown.js';
 import { useSliderMouseDown } from './internal/useSliderMouseDown.js';
 import { useValueUpdater } from './internal/utils.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from './Slider.css.js';
 const withBaseName = makePrefixer("saltSlider");

package/dist-es/slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n CSSProperties,\n ~~forwardRef~~,\n ~~HTMLAttributes~~,\n useMemo,\n useRef,\n} from \"react\";\nimport { SliderHandle } from \"./internal/SliderHandle\";\nimport { SliderMarkLabels } from \"./internal/SliderMarkLabels\";\nimport { SliderRail } from \"./internal/SliderRail\";\nimport { SliderMark, SliderRailMarks } from \"./internal/SliderRailMarks\";\nimport { SliderSelection } from \"./internal/SliderSelection\";\nimport { createHandleStyles, createTrackStyle } from \"./internal/styles\";\nimport { useSliderKeyDown } from \"./internal/useSliderKeyDown\";\nimport { useSliderMouseDown } from \"./internal/useSliderMouseDown\";\nimport { useValueUpdater } from \"./internal/utils\";\nimport { SliderChangeHandler, SliderValue } from \"./types\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nimport sliderCss from \"./Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 100;\nconst defaultStep = 1;\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" \| \"defaultValue\"> {\n label?: string;\n min?: number;\n max?: number;\n step?: number;\n pageStep?: number;\n value?: SliderValue;\n defaultValue?: SliderValue;\n pushable?: boolean;\n pushDistance?: number;\n disabled?: boolean;\n onChange?: SliderChangeHandler;\n marks?: SliderMark[];\n hideMarks?: boolean;\n hideMarkLabels?: boolean;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n min = defaultMin,\n max = defaultMax,\n step = defaultStep,\n pageStep = step,\n value: valueProp,\n defaultValue = defaultMin,\n onChange,\n label,\n className,\n pushable,\n pushDistance = 0,\n disabled,\n marks,\n hideMarks,\n hideMarkLabels,\n ...restProps\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const trackRef = useRef<HTMLDivElement>(null);\n\n const [value, setValue] = useControlled<SliderValue>({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"Value\",\n });\n\n const updateValueItem = useValueUpdater(pushable, pushDistance, min, max);\n\n const trackStyle = useMemo(\n () => createTrackStyle(min, max, value),\n [min, max, value]\n );\n\n const valueLength = Array.isArray(value) ? value.length : 1;\n\n const handleStyles: CSSProperties[] = useMemo(\n () => createHandleStyles(valueLength),\n [valueLength]\n );\n\n const onMouseDown = useSliderMouseDown(\n trackRef,\n value,\n min,\n max,\n step,\n updateValueItem,\n setValue,\n onChange\n );\n\n const onKeyDown = useSliderKeyDown(\n value,\n min,\n max,\n pageStep,\n step,\n updateValueItem,\n setValue,\n onChange\n );\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ref={ref}\n onKeyDown={disabled ? undefined : onKeyDown}\n aria-label={`${label} slider from ${min} to ${max}`}\n role=\"group\"\n >\n {label !== undefined ? (\n <div className={withBaseName(\"label\")}>{label}</div>\n ) : null}\n <div\n className={withBaseName(\"clickable\")}\n onMouseDown={disabled ? undefined : onMouseDown}\n >\n <div\n className={withBaseName(\"track\")}\n style={trackStyle}\n ref={trackRef}\n >\n <SliderRail />\n {marks && !hideMarks ? (\n <SliderRailMarks min={min} max={max} marks={marks} />\n ) : null}\n {marks && !hideMarkLabels ? (\n <SliderMarkLabels min={min} max={max} marks={marks} />\n ) : null}\n <SliderSelection valueLength={valueLength} />\n {(Array.isArray(value) ? value : [value]).map((v, i) => (\n <SliderHandle\n key={i}\n min={min}\n max={max}\n value={v}\n index={i}\n disabled={!!disabled}\n valueLength={valueLength}\n style={handleStyles[i]}\n />\n ))}\n </div>\n </div>\n </div>\n );\n});\n"],"names":["Slider","sliderCss"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n useRef,\n} from \"react\";\nimport { SliderHandle } from \"./internal/SliderHandle\";\nimport { SliderMarkLabels } from \"./internal/SliderMarkLabels\";\nimport { SliderRail } from \"./internal/SliderRail\";\nimport { type SliderMark, SliderRailMarks } from \"./internal/SliderRailMarks\";\nimport { SliderSelection } from \"./internal/SliderSelection\";\nimport { createHandleStyles, createTrackStyle } from \"./internal/styles\";\nimport { useSliderKeyDown } from \"./internal/useSliderKeyDown\";\nimport { useSliderMouseDown } from \"./internal/useSliderMouseDown\";\nimport { useValueUpdater } from \"./internal/utils\";\nimport type { SliderChangeHandler, SliderValue } from \"./types\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport sliderCss from \"./Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 100;\nconst defaultStep = 1;\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" \| \"defaultValue\"> {\n label?: string;\n min?: number;\n max?: number;\n step?: number;\n pageStep?: number;\n value?: SliderValue;\n defaultValue?: SliderValue;\n pushable?: boolean;\n pushDistance?: number;\n disabled?: boolean;\n onChange?: SliderChangeHandler;\n marks?: SliderMark[];\n hideMarks?: boolean;\n hideMarkLabels?: boolean;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n min = defaultMin,\n max = defaultMax,\n step = defaultStep,\n pageStep = step,\n value: valueProp,\n defaultValue = defaultMin,\n onChange,\n label,\n className,\n pushable,\n pushDistance = 0,\n disabled,\n marks,\n hideMarks,\n hideMarkLabels,\n ...restProps\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const trackRef = useRef<HTMLDivElement>(null);\n\n const [value, setValue] = useControlled<SliderValue>({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"Value\",\n });\n\n const updateValueItem = useValueUpdater(pushable, pushDistance, min, max);\n\n const trackStyle = useMemo(\n () => createTrackStyle(min, max, value),\n [min, max, value],\n );\n\n const valueLength = Array.isArray(value) ? value.length : 1;\n\n const handleStyles: CSSProperties[] = useMemo(\n () => createHandleStyles(valueLength),\n [valueLength],\n );\n\n const onMouseDown = useSliderMouseDown(\n trackRef,\n value,\n min,\n max,\n step,\n updateValueItem,\n setValue,\n onChange,\n );\n\n const onKeyDown = useSliderKeyDown(\n value,\n min,\n max,\n pageStep,\n step,\n updateValueItem,\n setValue,\n onChange,\n );\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n ref={ref}\n onKeyDown={disabled ? undefined : onKeyDown}\n aria-label={`${label} slider from ${min} to ${max}`}\n role=\"group\"\n >\n {label !== undefined ? (\n <div className={withBaseName(\"label\")}>{label}</div>\n ) : null}\n <div\n className={withBaseName(\"clickable\")}\n onMouseDown={disabled ? undefined : onMouseDown}\n >\n <div\n className={withBaseName(\"track\")}\n style={trackStyle}\n ref={trackRef}\n >\n <SliderRail />\n {marks && !hideMarks ? (\n <SliderRailMarks min={min} max={max} marks={marks} />\n ) : null}\n {marks && !hideMarkLabels ? (\n <SliderMarkLabels min={min} max={max} marks={marks} />\n ) : null}\n <SliderSelection valueLength={valueLength} />\n {(Array.isArray(value) ? value : [value]).map((v, i) => (\n <SliderHandle\n key={i}\n min={min}\n max={max}\n value={v}\n index={i}\n disabled={!!disabled}\n valueLength={valueLength}\n style={handleStyles[i]}\n />\n ))}\n </div>\n </div>\n </div>\n );\n});\n"],"names":["Slider","sliderCss"],"mappings":"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"}

package/dist-es/slider/internal/SliderHandle.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, Tooltip } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { getSliderAriaLabel } from './utils.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from '../Slider.css.js';
 const withBaseName = makePrefixer("saltSliderHandle");

package/dist-es/slider/internal/SliderHandle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { ~~makePrefixer~~, ~~Tooltip~~ } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n min: number;\n max: number;\n value: number;\n index: number;\n disabled: boolean;\n valueLength: number;\n style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n const { min, max, value, disabled, valueLength, index, style } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n return (\n <Tooltip content={value} placement=\"top\">\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"min\")]: value === min,\n [withBaseName(\"max\")]: value === max,\n })}\n style={style}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n aria-label={getSliderAriaLabel(valueLength, index)}\n tabIndex={0}\n data-handle-index={index}\n />\n </Tooltip>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,KAAA;AAAA,IAAO,SAAU,EAAA,KAAA;AAAA,IACjC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,QACjC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,OAClC,CAAA;AAAA,MACD,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,KAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,YAAA,EAAY,kBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,MACjD,QAAU,EAAA,CAAA;AAAA,MACV,mBAAmB,EAAA,KAAA;AAAA,KACrB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { Tooltip, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n min: number;\n max: number;\n value: number;\n index: number;\n disabled: boolean;\n valueLength: number;\n style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n const { min, max, value, disabled, valueLength, index, style } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n return (\n <Tooltip content={value} placement=\"top\">\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"min\")]: value === min,\n [withBaseName(\"max\")]: value === max,\n })}\n style={style}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n aria-label={getSliderAriaLabel(valueLength, index)}\n tabIndex={0}\n data-handle-index={index}\n />\n </Tooltip>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,KAAA;AAAA,IAAO,SAAU,EAAA,KAAA;AAAA,IACjC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,QACjC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,OAClC,CAAA;AAAA,MACD,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,KAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,YAAA,EAAY,kBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,MACjD,QAAU,EAAA,CAAA;AAAA,MACV,mBAAmB,EAAA,KAAA;AAAA,KACrB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/slider/internal/SliderMarkLabels.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
+import { useMemo } from 'react';
 import { createSliderMarkLabelsStyle, createSliderMarkLabelStyles } from './styles.js';
 import { isLabeledMark } from './utils.js';
-import { useMemo } from 'react';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from '../Slider.css.js';
 const withBaseName = makePrefixer("saltSliderMarkLabels");
@@ -32,7 +32,7 @@ function SliderMarkLabels(props) {
         className: withBaseName("label"),
         style: labelStyles[i],
         children: isLabeledMark(mark) ? mark.label : `${mark}`
-      }, i);
+      }, isLabeledMark(mark) ? mark.value : mark);
     })
   });
 }

package/dist-es/slider/internal/SliderMarkLabels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderMarkLabels.js","sources":["../src/slider/internal/SliderMarkLabels.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {~~\n createSliderMarkLabelsStyle,\n createSliderMarkLabelStyles,\n~~} from \"~~./styles~~\";\nimport { ~~isLabeledMark~~ } from \"./~~utils~~\";\nimport { ~~SliderMark~~ } from \"./~~SliderRailMarks~~\";\nimport { ~~useMemo~~ } from \"~~react~~\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderMarkLabels\");\n\nexport interface SliderMarkLabelsProps {\n min: number;\n max: number;\n marks: SliderMark[];\n}\n\nexport function SliderMarkLabels(props: SliderMarkLabelsProps) {\n const { min, max, marks } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const style = useMemo(\n () => createSliderMarkLabelsStyle(min, max, marks),\n [min, max, marks]\n );\n const labelStyles = useMemo(\n () => createSliderMarkLabelStyles(marks),\n [marks]\n );\n return (\n <div className={withBaseName()} style={style}>\n {marks.map((mark, i) => {\n return (\n <div key={i} className={withBaseName(\"label\")} style={labelStyles[i]}>\n {isLabeledMark(mark) ? mark.label : `${mark}`}\n </div>\n );\n })}\n </div>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAQjD,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,2BAAA,CAA4B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IACjD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,WAAc,GAAA,OAAA;AAAA,IAClB,MAAM,4BAA4B,KAAK,CAAA;AAAA,IACvC,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,~~QAAY~~,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,~~QAAG~~,OAAO,WAAY,CAAA,CAAA,CAAA;AAAA,~~QAC/D~~,QAAc,EAAA,aAAA,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,OAAA,~~EAD/B~~,~~CAEV~~,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SliderMarkLabels.js","sources":["../src/slider/internal/SliderMarkLabels.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useMemo } from \"react\";\nimport type { SliderMark } from \"./SliderRailMarks\";\nimport {\n createSliderMarkLabelStyles,\n createSliderMarkLabelsStyle,\n} from \"./styles\";\nimport { isLabeledMark } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderMarkLabels\");\n\nexport interface SliderMarkLabelsProps {\n min: number;\n max: number;\n marks: SliderMark[];\n}\n\nexport function SliderMarkLabels(props: SliderMarkLabelsProps) {\n const { min, max, marks } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const style = useMemo(\n () => createSliderMarkLabelsStyle(min, max, marks),\n [min, max, marks],\n );\n const labelStyles = useMemo(\n () => createSliderMarkLabelStyles(marks),\n [marks],\n );\n return (\n <div className={withBaseName()} style={style}>\n {marks.map((mark, i) => {\n return (\n <div\n key={isLabeledMark(mark) ? mark.value : mark}\n className={withBaseName(\"label\")}\n style={labelStyles[i]}\n >\n {isLabeledMark(mark) ? mark.label : `${mark}`}\n </div>\n );\n })}\n </div>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAQjD,SAAS,iBAAiB,KAA8B,EAAA;AAC7D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,2BAAA,CAA4B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IACjD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,WAAc,GAAA,OAAA;AAAA,IAClB,MAAM,4BAA4B,KAAK,CAAA;AAAA,IACvC,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,OAAO,WAAY,CAAA,CAAA,CAAA;AAAA,QAElB,QAAc,EAAA,aAAA,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,OAAA,EAJlC,aAAc,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,IAK1C,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/slider/internal/SliderRail.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from '../Slider.css.js';
 const withBaseName = makePrefixer("saltSliderRail");
-function SliderRail(props) {
+function SliderRail() {
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-slider",

package/dist-es/slider/internal/SliderRail.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRail.js","sources":["../src/slider/internal/SliderRail.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\nimport sliderCss from \"../Slider.css\";\n\~~nexport interface SliderRailProps {}\n\~~nconst withBaseName = makePrefixer(\"saltSliderRail\");\n\nexport function SliderRail(~~props: SliderRailProps~~) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n return <div className={withBaseName()} />;\n}\n"],"names":["sliderCss"],"mappings":";;;;;;~~AAQA~~,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,SAAS,~~WAAW~~,~~KAAwB,EAAA~~;~~AACjD~~,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AACzC;;;;"}
1	+ {"version":3,"file":"SliderRail.js","sources":["../src/slider/internal/SliderRail.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRail\");\n\nexport function SliderRail() {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n return <div className={withBaseName()} />;\n}\n"],"names":["sliderCss"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,SAAS,UAAa,GAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,GAAG,CAAA,CAAA;AACzC;;;;"}

package/dist-es/slider/internal/SliderRailMarks.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
 import { makePrefixer } from '@salt-ds/core';
 import { clsx } from 'clsx';
+import { useMemo } from 'react';
 import { createSliderRailMarksStyle, createHandleStyles } from './styles.js';
-import { isMarkAtMax } from './utils.js';
-import { useWindow } from '@salt-ds/window';
+import { isMarkAtMax, isLabeledMark } from './utils.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from '../Slider.css.js';
 const withBaseName = makePrefixer("saltSliderRailMarks");
@@ -35,7 +35,7 @@ function SliderRailMarks(props) {
           [withBaseName("max")]: isMarkAtMax(max, mark)
         }),
         style: markStyles[i]
-      }, `Mark${i}`);
+      }, isLabeledMark(mark) ? mark.value : mark);
     })
   });
 }

package/dist-es/slider/internal/SliderRailMarks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderRailMarks.js","sources":["../src/slider/internal/SliderRailMarks.tsx"],"sourcesContent":["import { ~~ReactNode,~~ ~~useMemo~~ } from \"~~react~~\";\nimport { ~~makePrefixer~~ } from \"~~@salt-ds/core~~\";\nimport { ~~clsx~~ } from \"~~clsx~~\";\nimport { createHandleStyles, createSliderRailMarksStyle } from \"./styles\";\nimport { isMarkAtMax } from \"./utils\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRailMarks\");\n\nexport interface LabeledMark {\n value: number;\n label: ReactNode;\n}\n\nexport type SliderMark = number \| LabeledMark;\n\nexport interface SliderRailMarksProps {\n min: number;\n max: number;\n marks: SliderMark[];\n}\n\nexport function SliderRailMarks(props: SliderRailMarksProps) {\n const { min, max, marks } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const style = useMemo(\n () => createSliderRailMarksStyle(min, max, marks),\n [min, max, marks]\n );\n const marksLength = marks.length;\n const markStyles = useMemo(\n () => createHandleStyles(marksLength),\n [marksLength]\n );\n\n return (\n <div className={withBaseName()} style={style}>\n {marks.map((mark, i) => {\n return (\n <div\n key={~~`Mark${i~~}`}\n className={clsx(withBaseName(\"mark\"), {\n [withBaseName(\"max\")]: isMarkAtMax(max, mark),\n })}\n style={markStyles[i]}\n />\n );\n })}\n </div>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAehD,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,0BAAA,CAA2B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IAChD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,cAAc,KAAM,CAAA,MAAA,CAAA;AAC1B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,mBAAmB,WAAW,CAAA;AAAA,IACpC,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,UACpC,CAAC,YAAa,CAAA,KAAK,CAAI,GAAA,WAAA,CAAY,KAAK,IAAI,CAAA;AAAA,SAC7C,CAAA;AAAA,QACD,OAAO,UAAW,CAAA,CAAA,CAAA;AAAA,OAAA,EAJb,~~OAAO~~,~~CAKd,~~CAAA,~~CAAA~~,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SliderRailMarks.js","sources":["../src/slider/internal/SliderRailMarks.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, useMemo } from \"react\";\nimport { createHandleStyles, createSliderRailMarksStyle } from \"./styles\";\nimport { isLabeledMark, isMarkAtMax } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRailMarks\");\n\nexport interface LabeledMark {\n value: number;\n label: ReactNode;\n}\n\nexport type SliderMark = number \| LabeledMark;\n\nexport interface SliderRailMarksProps {\n min: number;\n max: number;\n marks: SliderMark[];\n}\n\nexport function SliderRailMarks(props: SliderRailMarksProps) {\n const { min, max, marks } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider\",\n css: sliderCss,\n window: targetWindow,\n });\n\n const style = useMemo(\n () => createSliderRailMarksStyle(min, max, marks),\n [min, max, marks],\n );\n const marksLength = marks.length;\n const markStyles = useMemo(\n () => createHandleStyles(marksLength),\n [marksLength],\n );\n\n return (\n <div className={withBaseName()} style={style}>\n {marks.map((mark, i) => {\n return (\n <div\n key={isLabeledMark(mark) ? mark.value : mark}\n className={clsx(withBaseName(\"mark\"), {\n [withBaseName(\"max\")]: isMarkAtMax(max, mark),\n })}\n style={markStyles[i]}\n />\n );\n })}\n </div>\n );\n}\n"],"names":["sliderCss"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAehD,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MAAM,0BAAA,CAA2B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IAChD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,cAAc,KAAM,CAAA,MAAA,CAAA;AAC1B,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,mBAAmB,WAAW,CAAA;AAAA,IACpC,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,UACpC,CAAC,YAAa,CAAA,KAAK,CAAI,GAAA,WAAA,CAAY,KAAK,IAAI,CAAA;AAAA,SAC7C,CAAA;AAAA,QACD,OAAO,UAAW,CAAA,CAAA,CAAA;AAAA,OAAA,EAJb,aAAc,CAAA,IAAI,CAAI,GAAA,IAAA,CAAK,QAAQ,IAK1C,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}