@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.60

package/dist-es/responsive/useOverflowCollectionItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowCollectionItems.js","sources":["../src/responsive/useOverflowCollectionItems.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  useCallback,\n  useReducer,\n  useRef,\n} from \"react\";\n\nimport {\n  type OverflowAction,\n  type OverflowReducer,\n  type OverflowReducerInitialisationProps,\n  overflowReducer,\n  reducerInitialiser,\n} from \"./OverflowReducer\";\nimport type {\n  OverflowCollectionHookProps,\n  OverflowCollectionHookResult,\n  OverflowCollectionOptions,\n  OverflowItem,\n  OverflowSource,\n} from \"./overflowTypes\";\nimport { measureOverflowItems } from \"./overflowUtils\";\n\nconst defaultOptions: OverflowCollectionOptions = {};\n\ntype WithLabel = { label?: string };\n\nconst defaultChildIdentity = (children: ReactNode) => {\n  const childLabels: string[] = [];\n  Children.forEach(children, (child) => {\n    if (isValidElement(child)) {\n      childLabels.push((child as ReactElement<WithLabel>).props.label ?? \"\");\n    }\n  });\n  return `${childLabels.length}:${childLabels.join(\":\")}`;\n};\n\nconst defaultSourceIdentity = (source: WithLabel[]): string => {\n  const labels = source.map(({ label }) => label).join(\":\");\n  return `${source.length}:${labels}`;\n};\n// We need to track structural changes to controlled source or child elements.\n// Simple identity won't work as child elements will be different on every render.\n// structural changes are addition or removal of items, reordering items.\n// Question, what if user changes prop in declarative TabPanel ?\nconst getItemsIdentity = (\n  defaultSource?: OverflowSource[],\n  source?: OverflowSource[],\n  children?: ReactNode,\n): string => {\n  let identity: string;\n  if (Array.isArray(defaultSource)) {\n    identity = defaultSourceIdentity(defaultSource);\n  } else if (Array.isArray(source)) {\n    identity = defaultSourceIdentity(source);\n  } else {\n    identity = defaultChildIdentity(children);\n  }\n  return identity;\n};\n\ntype OverflowCollectionHook = (\n  props: OverflowCollectionHookProps,\n) => OverflowCollectionHookResult;\n\nexport const useOverflowCollectionItems: OverflowCollectionHook = ({\n  children,\n  defaultSource,\n  id: idRoot,\n  injectedItems = [],\n  options = defaultOptions,\n  orientation,\n  label = \"\",\n  source,\n}) => {\n  const dataRef = useRef<OverflowItem[]>([]);\n  const versionRef = useRef(0);\n  const measureTimeout = useRef<number | null>(null);\n  const previousIdentityRef = useRef(\"\");\n  const fontsLoaded = useRef(false);\n  const identity = getItemsIdentity(defaultSource, source, children);\n  const isControlled = Array.isArray(source) || Children.count(children) > 0;\n  if (isControlled && defaultSource !== undefined) {\n    throw Error(\n      \"useOverflowCollectionItems: defaultSource prop should not be used in combination with either source prop or children \",\n    );\n  }\n\n  const [data, dispatch] = useReducer<\n    OverflowReducer,\n    OverflowReducerInitialisationProps\n  >(\n    overflowReducer,\n    {\n      children,\n      source: source || defaultSource,\n      injectedItems,\n      idRoot,\n      options,\n    },\n    reducerInitialiser,\n  );\n\n  dataRef.current = data;\n\n  const measureManagedItems = useCallback(\n    (defer = false) => {\n      if (measureTimeout.current) {\n        window.clearTimeout(measureTimeout.current);\n        measureTimeout.current = null;\n      }\n      if (defer) {\n        measureTimeout.current = window.setTimeout(measureManagedItems, 30);\n      } else {\n        // If fonts have not yet loaded, measurements WILL be incorrect\n        if (fontsLoaded.current) {\n          const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n          const overflowItems = measureOverflowItems(\n            dataRef.current,\n            dimension,\n          );\n          // TODO if measurements have not changed, do nothing\n          // Track the generation of measured items. This can be used to trigger\n          // side effects when measurement takes place.\n          versionRef.current += 1;\n          dispatch({\n            type: \"init\",\n            overflowItems,\n          });\n        }\n      }\n    },\n    [orientation],\n  );\n\n  // Take the initial measurements of overflow items. All subsequent re-measurement will be\n  // triggered by either manipulation of the items or item state or updated source.\n  useIsomorphicLayoutEffect(() => {\n    async function measure(): Promise<void> {\n      const { fonts } = document;\n      if (fonts) {\n        await fonts.ready;\n        fontsLoaded.current = true;\n      } else {\n        fontsLoaded.current = true;\n      }\n      measureManagedItems();\n    }\n\n    measure().catch((err) => {\n      console.warn(\"error occurred measuring Overflow Items\", err);\n    });\n  }, [measureManagedItems]);\n\n  const dispatchOverflowAction = useCallback(\n    (action: OverflowAction | { type: \"reset\" }) => {\n      if (action.type === \"reset\") {\n        measureManagedItems();\n      } else {\n        dispatch(action);\n\n        if (action.type.endsWith(\"overflow-indicator\")) {\n          measureManagedItems(true);\n        }\n      }\n    },\n    [measureManagedItems],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (previousIdentityRef.current !== \"\") {\n      const overflowItems = reducerInitialiser({\n        children,\n        source: source || defaultSource,\n        injectedItems,\n        idRoot,\n        options,\n      });\n\n      dispatch({ type: \"init\", overflowItems });\n      measureManagedItems(true);\n    }\n    previousIdentityRef.current = identity;\n  }, [identity]);\n\n  return {\n    data,\n    dispatch: dispatchOverflowAction,\n    isControlled,\n    version: versionRef.current,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/responsive/useOverflowLayout.js

@@ -0,0 +1,149 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { useResizeObserver } from './useResizeObserver.js';
+import { getIsOverflowed, measureContainerOverflow } from './overflowUtils.js';
+import { useDynamicCollapse } from './useDynamicCollapse.js';
+import { useInstantCollapse } from './useInstantCollapse.js';
+import { useOverflow } from './useOverflow.js';
+import { useReclaimSpace } from './useReclaimSpace.js';
+
+const MONITORED_DIMENSIONS = {
+  horizontal: ["width", "scrollHeight"],
+  vertical: ["height", "scrollWidth"],
+  none: []
+};
+const useOverflowLayout = ({
+  collectionHook,
+  id,
+  orientation,
+  label = "Toolbar",
+  disableOverflow = false
+}) => {
+  const overflowContainerRef = useRef(null);
+  const overflowItemsRef = useRef([]);
+  const measurement = useRef({ innerContainerSize: 0, rootContainerDepth: 0 });
+  const { innerContainerSize } = measurement.current;
+  const { dispatch, version: collectionVersion } = collectionHook;
+  overflowItemsRef.current = collectionHook.data;
+  const {
+    onResize: onOverflowResize,
+    resetMeasurements: resetOverflowMeasurements
+  } = useOverflow({
+    collectionHook,
+    id,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const hasOverflowedItems = getIsOverflowed(collectionHook.data);
+  const {
+    onResize: onDynamicResize,
+    resetMeasurements: resetDynamicMeasurements
+  } = useDynamicCollapse({
+    collectionHook,
+    innerContainerSize,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const {
+    onResize: onInstantResize,
+    resetMeasurements: resetInstantMeasurements
+  } = useInstantCollapse({
+    collectionHook,
+    hasOverflowedItems,
+    innerContainerSize,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const { onResize: onReclaimResize } = useReclaimSpace({
+    collectionHook,
+    label,
+    overflowItemsRef,
+    orientation,
+    overflowContainerRef
+  });
+  const resizeHandler = useCallback(
+    ({
+      scrollHeight,
+      height = scrollHeight,
+      scrollWidth,
+      width = scrollWidth
+    }) => {
+      const size = orientation === "horizontal" ? width : height;
+      if (typeof size === "number") {
+        const { innerContainerSize: innerContainerSize2 } = measurement.current;
+        const sizeDiff = size - innerContainerSize2;
+        if (Math.abs(sizeDiff) > 0.5) {
+          measurement.current.innerContainerSize = size;
+          const containerHasGrown = size > innerContainerSize2;
+          onDynamicResize(size, containerHasGrown);
+          onInstantResize(size, containerHasGrown);
+          onOverflowResize(size, containerHasGrown);
+          onReclaimResize(size, containerHasGrown);
+        }
+      }
+    },
+    [
+      onDynamicResize,
+      onInstantResize,
+      onOverflowResize,
+      onReclaimResize,
+      orientation
+    ]
+  );
+  const measureAndInitialize = useCallback(() => {
+    const { isOverflowing, ...contentWidthAndDepth } = measureContainerOverflow(
+      overflowContainerRef,
+      orientation
+    );
+    measurement.current = contentWidthAndDepth;
+    const { innerContainerSize: innerContainerSize2 } = contentWidthAndDepth;
+    let handled = resetInstantMeasurements(isOverflowing);
+    if (!handled) {
+      handled = resetDynamicMeasurements();
+      if (!handled) {
+        resetOverflowMeasurements == null ? void 0 : resetOverflowMeasurements(isOverflowing, innerContainerSize2);
+      }
+    }
+  }, [
+    orientation,
+    resetInstantMeasurements,
+    resetDynamicMeasurements,
+    resetOverflowMeasurements
+  ]);
+  const switchPriorities = useCallback(
+    (item1, item2) => {
+      const { priority: priority1 } = item1;
+      const { priority: priority2 } = item2;
+      if (priority1 !== priority2) {
+        dispatch({
+          type: "update-items",
+          overflowItems: [
+            { id: item1.id, priority: priority2 },
+            { id: item2.id, priority: priority1 }
+          ]
+        });
+        setTimeout(measureAndInitialize, 0);
+      }
+    },
+    [dispatch, measureAndInitialize]
+  );
+  useResizeObserver(
+    overflowContainerRef,
+    MONITORED_DIMENSIONS[disableOverflow ? "none" : orientation],
+    resizeHandler
+  );
+  useEffect(() => {
+    if (!disableOverflow) {
+      measureAndInitialize();
+    }
+  }, [collectionVersion, disableOverflow, measureAndInitialize]);
+  return [overflowContainerRef, switchPriorities];
+};
+
+export { useOverflowLayout };
+//# sourceMappingURL=useOverflowLayout.js.map

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

@@ -0,0 +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 {\n  type ResizeHandler,\n  useResizeObserver,\n} from \"../responsive/useResizeObserver\";\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

@@ -0,0 +1,99 @@
+import { useCallback } from 'react';
+import { measureContainerOverflow, getOverflowIndicator } from './overflowUtils.js';
+
+const getPriority = (item) => item.priority;
+const canReclaimSpace = (item) => item.collapsed && item.reclaimSpace;
+const hasReclaimedSpace = (item) => item.reclaimedSpace;
+const getReclaimableSpace = ({ size, minSize = 0 }) => size - minSize;
+const findNextOverflowedItem = (items) => {
+  const overflowedItems = items.filter((item) => item.overflowed);
+  const minPriority = Math.min(...overflowedItems.map(getPriority));
+  for (let i = 0; i < overflowedItems.length; i++) {
+    if (overflowedItems[i].priority === minPriority) {
+      return overflowedItems[i];
+    }
+  }
+  return null;
+};
+const addAllVisible = (sum, m) => sum + (m.overflowed ? 0 : m.size);
+const canReleaseReclaimedSpace = (size, items) => {
+  const claimant = items.find(hasReclaimedSpace);
+  const overflowedItem = findNextOverflowedItem(items);
+  if (claimant && overflowedItem) {
+    const renderedSize = items.reduce(addAllVisible, 0);
+    const { size: indicatorSize } = getOverflowIndicator(items) ?? { size: 0 };
+    const { size: overflowedSize } = overflowedItem;
+    const reclaimableSpace = getReclaimableSpace(claimant);
+    const renderedSizeAfterReclaim = renderedSize - reclaimableSpace - indicatorSize;
+    const maxAvailableSpace = size - renderedSizeAfterReclaim;
+    if (maxAvailableSpace >= overflowedSize) {
+      return true;
+    }
+  }
+};
+const mightBeAbleToReclaimSpace = (items) => items.some(canReclaimSpace);
+const useReclaimSpace = ({
+  collectionHook,
+  label = "Toolbar",
+  overflowItemsRef: managedItemsRef,
+  overflowContainerRef: ref,
+  orientation
+}) => {
+  const releaseReclaimedSpace = useCallback(() => {
+    const { current: managedItems } = managedItemsRef;
+    const claimant = managedItems.find(hasReclaimedSpace);
+    if (claimant) {
+      collectionHook.dispatch({
+        type: "replace-item",
+        overflowItem: {
+          ...claimant,
+          collapsed: true,
+          collapsing: false,
+          reclaimedSpace: void 0,
+          size: claimant.minSize,
+          fullSize: claimant.size
+        }
+      });
+    }
+  }, [managedItemsRef, collectionHook.dispatch]);
+  const handleResize = useCallback(
+    (size, containerHasGrown) => {
+      const { isOverflowing: willOverflow } = measureContainerOverflow(
+        ref,
+        orientation
+      );
+      const { current: managedItems } = managedItemsRef;
+      if (containerHasGrown && canReleaseReclaimedSpace(size, managedItems)) {
+        releaseReclaimedSpace();
+      } else if (!containerHasGrown && willOverflow && mightBeAbleToReclaimSpace(managedItems)) {
+        const collapsedChild = managedItems.find(canReclaimSpace);
+        if (collapsedChild) {
+          collectionHook.dispatch({
+            type: "replace-item",
+            overflowItem: {
+              ...collapsedChild,
+              collapsed: false,
+              collapsing: true,
+              reclaimedSpace: true,
+              size: collapsedChild.fullSize,
+              fullSize: null
+            }
+          });
+        }
+      }
+    },
+    [
+      ref,
+      managedItemsRef,
+      releaseReclaimedSpace,
+      collectionHook.dispatch,
+      orientation
+    ]
+  );
+  return {
+    onResize: handleResize
+  };
+};
+
+export { addAllVisible, useReclaimSpace };
+//# sourceMappingURL=useReclaimSpace.js.map

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

@@ -0,0 +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

@@ -0,0 +1,114 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useRef, useCallback } from 'react';
+
+const WidthHeight = ["height", "width"];
+const HeightOnly = ["height"];
+const WidthOnly = ["width"];
+const observedMap = /* @__PURE__ */ new WeakMap();
+const getTargetSize = (element, contentRect, dimension) => {
+  switch (dimension) {
+    case "height":
+      return contentRect.height;
+    case "scrollHeight":
+      return element.scrollHeight;
+    case "scrollWidth":
+      return element.scrollWidth;
+    case "width":
+      return contentRect.width;
+    default:
+      return 0;
+  }
+};
+const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const { target, contentRect } = entry;
+    const observedTarget = observedMap.get(target);
+    if (observedTarget) {
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target,
+          contentRect,
+          dimension
+        );
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension] = newSize;
+        }
+      }
+      if (sizeChanged) {
+        onResize == null ? void 0 : onResize(measurements);
+      }
+    }
+  }
+}) : null;
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+  const dimensionsRef = useRef(dimensions);
+  const measure = useCallback((target) => {
+    const rect = target.getBoundingClientRect();
+    return dimensionsRef.current.reduce(
+      (map, dim) => {
+        map[dim] = getTargetSize(target, rect, dim);
+        return map;
+      },
+      {}
+    );
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!resizeObserver) {
+      return void 0;
+    }
+    const target = ref.current;
+    let cleanedUp = false;
+    async function registerObserver() {
+      observedMap.set(target, { measurements: {} });
+      cleanedUp = false;
+      const { fonts } = document;
+      if (fonts) {
+        await fonts.ready;
+      }
+      if (!cleanedUp && resizeObserver) {
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+          const measurements = measure(target);
+          observedTarget.measurements = measurements;
+          resizeObserver.observe(target);
+          if (reportInitialSize) {
+            onResize(measurements);
+          }
+        }
+      }
+    }
+    if (target) {
+      if (observedMap.has(target)) {
+        throw Error(
+          "useResizeObserver attemping to observe same element twice"
+        );
+      }
+      void registerObserver();
+    }
+    return () => {
+      if (target && observedMap.has(target)) {
+        resizeObserver.unobserve(target);
+        observedMap.delete(target);
+        cleanedUp = true;
+      }
+    };
+  }, [ref, measure]);
+  useIsomorphicLayoutEffect(() => {
+    const target = ref.current;
+    const record = observedMap.get(target);
+    if (record) {
+      if (dimensionsRef.current !== dimensions) {
+        dimensionsRef.current = dimensions;
+        const measurements = measure(target);
+        record.measurements = measurements;
+      }
+      record.onResize = onResize;
+    }
+  }, [dimensions, measure, ref, onResize]);
+}
+
+export { HeightOnly, WidthHeight, WidthOnly, useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

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

@@ -0,0 +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

@@ -0,0 +1,24 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useState, useRef, useCallback } from 'react';
+import { useResizeObserver, WidthOnly } from './useResizeObserver.js';
+
+const NONE = [];
+function useWidth(responsive) {
+  const [width, setWidth] = useState();
+  const ref = useRef(null);
+  const handleResize = useCallback(({ width: newWidth }) => {
+    setWidth(newWidth);
+  }, []);
+  const measurementsToObserve = responsive ? WidthOnly : NONE;
+  useResizeObserver(ref, measurementsToObserve, handleResize);
+  useIsomorphicLayoutEffect(() => {
+    if (!ref.current) {
+      return void 0;
+    }
+    handleResize(ref.current.getBoundingClientRect());
+  }, [handleResize]);
+  return [ref, width];
+}
+
+export { useWidth };
+//# sourceMappingURL=useWidth.js.map

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

@@ -0,0 +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;AAEjB,SAAS,SACd,UAC8B,EAAA;AAC9B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAiB,EAAA;AAC3C,EAAM,MAAA,GAAA,GAAM,OAAoB,IAAI,CAAA;AAEpC,EAAA,MAAM,eAA8B,WAAY,CAAA,CAAC,EAAE,KAAA,EAAO,UAAe,KAAA;AACvE,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,qBAAA,GAAwB,aAAa,SAAY,GAAA,IAAA;AACvD,EAAkB,iBAAA,CAAA,GAAA,EAAK,uBAAuB,YAAY,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA;AAAA;AAET,IAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA;AAAA,GAClD,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAO,OAAA,CAAC,KAAK,KAAK,CAAA;AACpB;;;;"}

package/dist-es/responsive/utils.js

@@ -0,0 +1,36 @@
+const COLLAPSIBLE = "data-collapsible";
+const RESPONSIVE_ATTRIBUTE = {
+  [COLLAPSIBLE]: true,
+  "data-pad-start": true,
+  "data-pad-end": true
+};
+const isResponsiveAttribute = (propName) => RESPONSIVE_ATTRIBUTE[propName] ?? false;
+const isCollapsible = (propName) => propName === COLLAPSIBLE;
+const COLLAPSIBLE_VALUE = {
+  dynamic: "dynamic",
+  instant: "instant",
+  true: "instant"
+};
+const collapsibleValue = (value) => COLLAPSIBLE_VALUE[value] ?? "none";
+const liftResponsivePropsToFormField = (props) => {
+  const propNames = Object.keys(props);
+  if (propNames.some(isResponsiveAttribute)) {
+    return propNames.reduce(
+      (tuple, propName) => {
+        const [toolbarProps, rest] = tuple;
+        const propValue = props[propName];
+        if (isResponsiveAttribute(propName)) {
+          const value = isCollapsible(propName) ? collapsibleValue(propValue) : propValue;
+          toolbarProps[propName] = value;
+          rest[propName] = void 0;
+        }
+        return tuple;
+      },
+      [{}, {}]
+    );
+  }
+  return [{}, props];
+};
+
+export { isResponsiveAttribute, liftResponsivePropsToFormField };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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;AAIpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAW,GAAG,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA;AAClB,CAAA;AAEO,MAAM,qBAAwB,GAAA,CAAC,QACpC,KAAA,oBAAA,CAAqB,QAAQ,CAAK,IAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA;AACR,CAAA;AAEA,MAAM,gBAAmB,GAAA,CAAC,KAAkB,KAAA,iBAAA,CAAkB,KAAK,CAAK,IAAA,MAAA;AAY3D,MAAA,8BAAA,GAAiC,CAC5C,KACyB,KAAA;AACzB,EAAM,MAAA,SAAA,GAAY,MAAO,CAAA,IAAA,CAAK,KAAK,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;AAC7B,QAAM,MAAA,SAAA,GAAY,MAAM,QAAQ,CAAA;AAChC,QAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,UAAA,MAAM,QAAQ,aAAc,CAAA,QAAQ,CAChC,GAAA,gBAAA,CAAiB,SAAmB,CACpC,GAAA,SAAA;AAEJ,UAAA,YAAA,CAAa,QAAQ,CAAI,GAAA,KAAA;AACzB,UAAA,IAAA,CAAK,QAAQ,CAAI,GAAA,KAAA,CAAA;AAAA;AAEnB,QAAO,OAAA,KAAA;AAAA,OACT;AAAA,MACA,CAAC,EAAI,EAAA,EAAE;AAAA,KACT;AAAA;AAEF,EAAO,OAAA,CAAC,EAAC,EAAG,KAAK,CAAA;AACnB;;;;"}

package/dist-es/search-input/SearchInput.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button {\n  display: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=SearchInput.css.js.map

package/dist-es/search-input/SearchInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,90 @@
+import { jsx } from 'react/jsx-runtime';
+import { useIcon, useForkRef, useControlled, Button } from '@salt-ds/core';
+import { 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 { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './SearchInput.css.js';
+
+const baseName = "saltSearchInput";
+const SearchInput = forwardRef(
+  function SearchInput2({
+    IconComponent = SearchIcon,
+    className,
+    onChange,
+    onClear,
+    onKeyUp,
+    onSubmit,
+    value: valueProp,
+    defaultValue,
+    ...other
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-search-input",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { CloseIcon } = useIcon();
+    const inputRef = useRef(null);
+    const handleRef = useForkRef(inputRef, ref);
+    const [value, setValue, isControlled] = useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "SearchInput",
+      state: "value"
+    });
+    const handleChange = (event, newValue) => {
+      setValue(newValue);
+      onChange == null ? void 0 : onChange(event, newValue);
+    };
+    const handleClear = (event) => {
+      var _a;
+      setValue("");
+      if (!isControlled) {
+        onChange == null ? void 0 : onChange(event, "");
+      }
+      onClear == null ? void 0 : onClear();
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const handleKeyUp = (event) => {
+      if (event.key === "Enter" && onSubmit && value) {
+        onSubmit == null ? void 0 : onSubmit(value);
+      }
+      onKeyUp == null ? void 0 : onKeyUp(event);
+    };
+    return /* @__PURE__ */ jsx(
+      InputLegacy,
+      {
+        className: clsx(baseName, className),
+        ref: handleRef,
+        endAdornment: !!value && /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: clsx(`${baseName}-clearButton`),
+            onClick: handleClear,
+            variant: "secondary",
+            children: /* @__PURE__ */ jsx(
+              CloseIcon,
+              {
+                "aria-label": "clear input",
+                className: `${baseName}-clearIcon`
+              }
+            )
+          }
+        ),
+        onChange: handleChange,
+        onKeyUp: handleKeyUp,
+        startAdornment: IconComponent && /* @__PURE__ */ jsx(StaticInputAdornment, { children: /* @__PURE__ */ jsx(IconComponent, { className: `${baseName}-icon` }) }),
+        value: value || "",
+        ...other
+      }
+    );
+  }
+);
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import { Button, useControlled, useForkRef, useIcon } from \"@salt-ds/core\";\nimport { SearchIcon } from \"@salt-ds/icons\";\nimport { 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    const { CloseIcon } = useIcon();\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string,\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  },\n);\n"],"names":["SearchInput","searchInputCss","Input"],"mappings":"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"}

package/dist-es/slider/Slider.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltSlider {\n  display: grid;\n  gap: var(--salt-spacing-100);\n  grid-template-columns: auto 1fr auto;\n  user-select: none;\n}\n\n.saltSlider-label {\n  height: var(--salt-size-base);\n  display: flex;\n  align-items: center;\n}\n\n.saltSlider-bottomLabel {\n  grid-template-columns: 1fr;\n  gap: 0;\n}\n.saltSlider-bottomLabel .saltSlider-label {\n  height: auto;\n}\n\n.saltSlider-labelMinBottom {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: start;\n  width: min-content;\n}\n\n.saltSlider-labelMaxBottom {\n  grid-row: 2;\n  grid-column: 1;\n  justify-self: end;\n  width: min-content;\n}\n\n.saltSliderTrack {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltSliderTrack-rail {\n  height: var(--salt-size-bar);\n  background: var(--salt-track-borderColor);\n  width: 100%;\n  position: absolute;\n}\n\n.saltSliderTrack:active {\n  cursor: grabbing;\n}\n\n.saltSliderThumb-container {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: translate(-50%, 0%);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n}\n\n.saltSliderThumb-tooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-status-info-borderColor);\n  border-style: var(--salt-container-borderStyle);\n  border-width: var(--salt-size-border);\n  line-height: var(--salt-text-lineHeight);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  color: var(--salt-content-primary-foreground);\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  transform: translate(0, -100%);\n  display: none;\n}\n\n.saltSliderThumb-tooltip-arrow {\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  left: 50%;\n  transform: translate(-50%, 0);\n  stroke: none;\n  fill: var(--salt-container-primary-background);\n  stroke: var(--salt-status-info-borderColor);\n  stroke-width: var(--salt-size-border);\n  width: var(--salt-size-icon);\n  height: var(--salt-size-icon);\n}\n\n.saltSliderThumb-tooltip-visible {\n  display: block;\n}\n\n.saltSliderThumb-container:hover .saltSliderThumb-tooltip {\n  display: block;\n}\n\n.saltSliderThumb {\n  position: relative;\n  width: var(--salt-size-indicator);\n  height: var(--salt-size-selectable);\n  background: var(--salt-accent-borderColor);\n}\n\n.saltSliderThumb:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderSelection {\n  height: var(--salt-size-bar);\n  background: var(--salt-accent-borderColor);\n  align-items: start;\n  position: absolute;\n}\n\n.saltSliderSelection-range {\n  align-items: center;\n}\n\n.saltSliderMarks {\n  position: relative;\n}\n\n.saltSliderMarks-mark {\n  position: absolute;\n  transform: translate(-50%);\n  line-height: var(--salt-text-lineHeight);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Slider.css.js.map

package/dist-es/slider/Slider.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}