@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-cjs/tabs-next/hooks/useCollection.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var react = require('react');
+
+function sortBasedOnDOMPosition(items) {
+  const indexedItems = items.map((item, index) => [index, item]);
+  let orderChanged = false;
+  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {
+    const itemAElement = itemA.element;
+    const itemBElement = itemB.element;
+    if (itemAElement === itemBElement) return 0;
+    if (!itemAElement || !itemBElement) return 0;
+    if (itemAElement.compareDocumentPosition(itemBElement) & Node.DOCUMENT_POSITION_FOLLOWING) {
+      if (itemAIndex > itemBIndex) {
+        orderChanged = true;
+      }
+      return -1;
+    }
+    if (itemAIndex < itemBIndex) {
+      orderChanged = true;
+    }
+    return 1;
+  });
+  if (orderChanged) {
+    return indexedItems.map(([_, item]) => item);
+  }
+  return items;
+}
+function useCollection({ wrap }) {
+  const [items, setItems] = react.useState([]);
+  const itemsRef = react.useRef([]);
+  const itemMap = react.useRef(/* @__PURE__ */ new Map());
+  const registerItem = react.useCallback((item) => {
+    setItems((old) => {
+      const newItems = old.slice();
+      const index = newItems.findIndex(({ id }) => id === item.id);
+      if (index !== -1) {
+        const newItem = { ...newItems[index], ...item };
+        newItems[index] = newItem;
+        itemMap.current.set(item.id, newItem);
+      } else {
+        newItems.push(item);
+        itemMap.current.set(item.id, item);
+      }
+      const value = sortBasedOnDOMPosition(newItems);
+      itemsRef.current = value;
+      return value;
+    });
+    return () => {
+      setItems((old) => {
+        itemMap.current.delete(item.id);
+        return old.filter(({ id }) => id !== item.id);
+      });
+      return itemsRef;
+    };
+  }, []);
+  return {
+    registerItem,
+    item: (id) => {
+      if (!id) return null;
+      let item = itemMap.current.get(id);
+      if (!item) {
+        item = items.find((item2) => item2.id === id);
+        if (item) {
+          itemMap.current.set(item.id, item);
+        }
+      }
+      return item ?? null;
+    },
+    getNext: (current) => {
+      const index = items.findIndex(({ id }) => id === current);
+      const newIndex = (index + 1) % items.length ;
+      return items[newIndex] ?? null;
+    },
+    getPrevious: (current) => {
+      const index = items.findIndex(({ id }) => id === current);
+      const newIndex = (index - 1 + items.length) % items.length ;
+      return items[newIndex] ?? null;
+    },
+    getFirst: () => {
+      return items[0] ?? null;
+    },
+    getLast: () => {
+      return items[items.length - 1] ?? null;
+    },
+    items
+  };
+}
+
+exports.useCollection = useCollection;
+//# sourceMappingURL=useCollection.js.map

package/dist-cjs/tabs-next/hooks/useCollection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollection.js","sources":["../src/tabs-next/hooks/useCollection.ts"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nexport interface Item {\n  id: string;\n  element?: HTMLElement | null;\n  value: string;\n}\n\nfunction sortBasedOnDOMPosition(items: Item[]): Item[] {\n  const indexedItems = items.map((item, index) => [index, item] as const);\n  let orderChanged = false;\n  indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {\n    const itemAElement = itemA.element;\n    const itemBElement = itemB.element;\n    if (itemAElement === itemBElement) return 0;\n    if (!itemAElement || !itemBElement) return 0;\n\n    if (\n      itemAElement.compareDocumentPosition(itemBElement) &\n      Node.DOCUMENT_POSITION_FOLLOWING\n    ) {\n      if (itemAIndex > itemBIndex) {\n        orderChanged = true;\n      }\n      return -1;\n    }\n\n    if (itemAIndex < itemBIndex) {\n      orderChanged = true;\n    }\n    return 1;\n  });\n\n  if (orderChanged) {\n    return indexedItems.map(([_, item]) => item);\n  }\n  return items;\n}\n\ninterface UseCollectionProps {\n  wrap: boolean;\n}\n\nexport function useCollection({ wrap }: UseCollectionProps) {\n  const [items, setItems] = useState<Item[]>([]);\n  const itemsRef = useRef<Item[]>([]);\n  const itemMap = useRef<Map<string, Item>>(new Map());\n\n  const registerItem = useCallback((item: Item) => {\n    setItems((old) => {\n      const newItems = old.slice();\n      const index = newItems.findIndex(({ id }) => id === item.id);\n      if (index !== -1) {\n        const newItem = { ...newItems[index], ...item };\n        newItems[index] = newItem;\n        itemMap.current.set(item.id, newItem);\n      } else {\n        newItems.push(item);\n        itemMap.current.set(item.id, item);\n      }\n      const value = sortBasedOnDOMPosition(newItems);\n      itemsRef.current = value;\n      return value;\n    });\n\n    return () => {\n      setItems((old) => {\n        itemMap.current.delete(item.id);\n        return old.filter(({ id }) => id !== item.id);\n      });\n      return itemsRef;\n    };\n  }, []);\n\n  return {\n    registerItem,\n    item: (id?: string | null): Item | null => {\n      if (!id) return null;\n      let item = itemMap.current.get(id);\n      if (!item) {\n        item = items.find((item) => item.id === id);\n        if (item) {\n          itemMap.current.set(item.id, item);\n        }\n      }\n      return item ?? null;\n    },\n    getNext: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index + 1) % items.length\n        : Math.min(index + 1, items.length - 1);\n\n      return items[newIndex] ?? null;\n    },\n    getPrevious: (current: string): Item | null => {\n      const index = items.findIndex(({ id }) => id === current);\n\n      const newIndex = wrap\n        ? (index - 1 + items.length) % items.length\n        : Math.max(index - 1, 0);\n\n      return items[newIndex] ?? null;\n    },\n    getFirst: (): Item | null => {\n      return items[0] ?? null;\n    },\n    getLast: (): Item | null => {\n      return items[items.length - 1] ?? null;\n    },\n    items,\n  };\n}\n"],"names":["useState","useRef","useCallback","item"],"mappings":"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"}

package/dist-cjs/tabs-next/hooks/useFocusOutside.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var window = require('@salt-ds/window');
+var react = require('react');
+
+function useFocusOutside(elementRef, onFocusOutside, enabled, ignore) {
+  const targetWindow = window.useWindow();
+  react.useEffect(() => {
+    if (!enabled) return;
+    const handleFocus = (event) => {
+      var _a, _b, _c;
+      const ignoreElement = (_b = (_a = elementRef.current) == null ? void 0 : _a.ownerDocument) == null ? void 0 : _b.querySelector(ignore) ;
+      if (event.target instanceof HTMLElement && !((_c = elementRef.current) == null ? void 0 : _c.contains(event.target)) && !(ignoreElement == null ? void 0 : ignoreElement.contains(event.target))) {
+        onFocusOutside();
+      }
+    };
+    targetWindow == null ? void 0 : targetWindow.addEventListener("focusin", handleFocus);
+    return () => {
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("focusin", handleFocus);
+    };
+  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);
+}
+
+exports.useFocusOutside = useFocusOutside;
+//# sourceMappingURL=useFocusOutside.js.map

package/dist-cjs/tabs-next/hooks/useFocusOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusOutside.js","sources":["../src/tabs-next/hooks/useFocusOutside.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type RefObject, useEffect } from \"react\";\n\nexport function useFocusOutside(\n  elementRef: RefObject<HTMLElement>,\n  onFocusOutside: () => void,\n  enabled: boolean,\n  ignore?: string,\n) {\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const handleFocus = (event: FocusEvent) => {\n      const ignoreElement = ignore\n        ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)\n        : undefined;\n\n      // If focus is outside the tabstrip (including the list) then close the list.\n      if (\n        event.target instanceof HTMLElement &&\n        !elementRef.current?.contains(event.target) &&\n        !ignoreElement?.contains(event.target)\n      ) {\n        onFocusOutside();\n      }\n    };\n\n    targetWindow?.addEventListener(\"focusin\", handleFocus);\n\n    return () => {\n      targetWindow?.removeEventListener(\"focusin\", handleFocus);\n    };\n  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);\n}\n"],"names":["useWindow","useEffect"],"mappings":";;;;;AAGO,SAAS,eAAA,CACd,UAAA,EACA,cAAA,EACA,OAAA,EACA,MAAA,EACA;AACA,EAAA,MAAM,eAAeA,gBAAA,EAAU;AAE/B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAsB;AAd/C,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAeM,MAAA,MAAM,aAAA,IACF,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAW,OAAA,KAAX,mBAAoB,aAAA,KAApB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmC,cAA2B,MAAA,CAAA,CAC9D;AAGJ,MAAA,IACE,KAAA,CAAM,MAAA,YAAkB,WAAA,IACxB,EAAA,CAAC,gBAAW,OAAA,KAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoB,QAAA,CAAS,KAAA,CAAM,MAAA,CAAA,CAAA,IACpC,EAAC,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,QAAA,CAAS,MAAM,MAAA,CAAA,CAAA,EAC/B;AACA,QAAA,cAAA,EAAe;AAAA,MACjB;AAAA,IACF,CAAA;AAEA,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,SAAA,EAAW,WAAA,CAAA;AAE1C,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,SAAA,EAAW,WAAA,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,gBAAgB,UAAA,EAAY,OAAA,EAAS,MAAM,CAAC,CAAA;AAChE;;;;"}

package/dist-cjs/tabs-next/hooks/useOverflow.js

@@ -0,0 +1,182 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var react = require('react');
+
+function getTabWidth(element) {
+  const { width } = element.getBoundingClientRect();
+  return Math.ceil(width);
+}
+function useOverflow({
+  tabs,
+  container,
+  overflowButton,
+  children,
+  selected
+}) {
+  const [{ visibleCount, isMeasuring }, setVisibleItems] = core.useValueEffect({
+    visibleCount: tabs.length,
+    isMeasuring: false
+  });
+  const targetWindow = window.useWindow();
+  const realSelectedIndex = react.useRef(-1);
+  const updateOverflow = core.useEventCallback(() => {
+    const computeVisible = (visibleCount2) => {
+      var _a;
+      if (container.current && targetWindow) {
+        const items = Array.from(
+          container.current.querySelectorAll(
+            "[data-overflowitem]"
+          )
+        );
+        const selectedTab = (_a = container.current.querySelector(
+          "[role=tab][aria-selected=true]"
+        )) == null ? void 0 : _a.parentElement;
+        let maxWidth = container.current.clientWidth ?? 0;
+        const containerStyles = targetWindow.getComputedStyle(
+          container.current
+        );
+        const gap = Number.parseInt(containerStyles.gap || "0", 10);
+        let currentWidth = 0;
+        let newVisibleCount = 0;
+        const visible2 = [];
+        while (newVisibleCount < items.length) {
+          const element = items[newVisibleCount];
+          if (element) {
+            if (currentWidth + getTabWidth(element) + gap > maxWidth) {
+              break;
+            }
+            currentWidth += getTabWidth(element) + gap;
+            visible2.push(element);
+          }
+          newVisibleCount++;
+        }
+        if (newVisibleCount >= items.length) {
+          return newVisibleCount;
+        }
+        const overflowButtonWidth = overflowButton.current ? overflowButton.current.offsetWidth + gap : 0;
+        maxWidth -= overflowButtonWidth;
+        while (currentWidth > maxWidth) {
+          const removed = visible2.pop();
+          if (!removed) break;
+          currentWidth -= getTabWidth(removed) + gap;
+          newVisibleCount--;
+        }
+        if (selectedTab && !visible2.includes(selectedTab)) {
+          const selectedTabWidth = getTabWidth(selectedTab) + gap;
+          while (currentWidth + selectedTabWidth > maxWidth) {
+            const removed = visible2.pop();
+            if (!removed) break;
+            currentWidth -= getTabWidth(removed) + gap;
+            newVisibleCount--;
+          }
+        }
+        return Math.max(0, newVisibleCount);
+      }
+      return visibleCount2;
+    };
+    setVisibleItems(function* () {
+      yield {
+        visibleCount: tabs.length,
+        isMeasuring: true
+      };
+      const newVisibleCount = computeVisible(tabs.length);
+      const isMeasuring2 = newVisibleCount < tabs.length && newVisibleCount > 0;
+      yield {
+        visibleCount: newVisibleCount,
+        isMeasuring: isMeasuring2
+      };
+      if (isMeasuring2) {
+        yield {
+          visibleCount: computeVisible(newVisibleCount),
+          isMeasuring: false
+        };
+      }
+    });
+  });
+  core.useIsomorphicLayoutEffect(() => {
+    updateOverflow();
+  }, [selected]);
+  react.useEffect(() => {
+    const handleWindowResize = () => {
+      updateOverflow();
+    };
+    targetWindow == null ? void 0 : targetWindow.addEventListener("resize", handleWindowResize);
+    return () => {
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("resize", handleWindowResize);
+    };
+  }, [updateOverflow, targetWindow]);
+  react.useEffect(() => {
+    const element = container == null ? void 0 : container.current;
+    if (!element) return;
+    const win = core.ownerWindow(element);
+    const resizeObserver = new win.ResizeObserver((entries) => {
+      requestAnimationFrame(() => {
+        if (entries.length === 0) return;
+        updateOverflow();
+      });
+    });
+    resizeObserver.observe(element);
+    if (element.parentElement) {
+      resizeObserver.observe(element.parentElement);
+    }
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+    };
+  }, [container, updateOverflow]);
+  react.useEffect(() => {
+    const element = container == null ? void 0 : container.current;
+    if (!element || isMeasuring) return;
+    const win = core.ownerWindow(element);
+    const mutationObserver = new win.MutationObserver(() => {
+      requestAnimationFrame(() => {
+        updateOverflow();
+      });
+    });
+    mutationObserver.observe(element, {
+      childList: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [container, updateOverflow, isMeasuring]);
+  const childArray = react.useMemo(() => react.Children.toArray(children), [children]);
+  const visible = react.useMemo(
+    () => childArray.slice(0, visibleCount),
+    [visibleCount, childArray]
+  );
+  const hidden = react.useMemo(
+    () => childArray.slice(visibleCount),
+    [childArray, visibleCount]
+  );
+  const hiddenSelectedIndex = hidden.findIndex(
+    (child) => {
+      var _a;
+      return react.isValidElement(child) && ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) === selected;
+    }
+  );
+  core.useIsomorphicLayoutEffect(() => {
+    if (visibleCount === childArray.length) {
+      realSelectedIndex.current = childArray.findIndex(
+        (child) => {
+          var _a;
+          return react.isValidElement(child) && ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.value) === selected;
+        }
+      );
+    }
+  }, [visibleCount, childArray, selected]);
+  if (selected && hiddenSelectedIndex !== -1) {
+    const removed = hidden.splice(hiddenSelectedIndex, 1);
+    visible.push(removed[0]);
+  }
+  if (isMeasuring) {
+    return [childArray, [], isMeasuring, realSelectedIndex];
+  }
+  return [visible, hidden, isMeasuring, realSelectedIndex];
+}
+
+exports.useOverflow = useOverflow;
+//# sourceMappingURL=useOverflow.js.map

package/dist-cjs/tabs-next/hooks/useOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflow.js","sources":["../src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n  ownerWindow,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  isValidElement,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { TabNextProps } from \"../TabNext\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement>;\n  selected?: string;\n  children: ReactNode;\n  tabs: Item[];\n  overflowButton: RefObject<HTMLButtonElement>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n  const { width } = element.getBoundingClientRect();\n  return Math.ceil(width);\n}\n\nexport function useOverflow({\n  tabs,\n  container,\n  overflowButton,\n  children,\n  selected,\n}: UseOverflowProps) {\n  /**\n   * `visibleCount` doesn't include newly selected tab from overflow menu, which is removed in `computeVisible`\n   */\n  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n    visibleCount: tabs.length,\n    isMeasuring: false,\n  });\n  const targetWindow = useWindow();\n  const realSelectedIndex = useRef<number>(-1);\n\n  const updateOverflow = useEventCallback(() => {\n    const computeVisible = (visibleCount: number) => {\n      if (container.current && targetWindow) {\n        const items = Array.from(\n          container.current.querySelectorAll<HTMLElement>(\n            \"[data-overflowitem]\",\n          ),\n        );\n        const selectedTab = container.current.querySelector<HTMLElement>(\n          \"[role=tab][aria-selected=true]\",\n        )?.parentElement;\n\n        let maxWidth = container.current.clientWidth ?? 0;\n\n        const containerStyles = targetWindow.getComputedStyle(\n          container.current,\n        );\n        const gap = Number.parseInt(containerStyles.gap || \"0\", 10);\n\n        let currentWidth = 0;\n        let newVisibleCount = 0;\n\n        const visible = [];\n\n        while (newVisibleCount < items.length) {\n          const element = items[newVisibleCount];\n          if (element) {\n            if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n              break;\n            }\n            currentWidth += getTabWidth(element) + gap;\n            visible.push(element);\n          }\n          newVisibleCount++;\n        }\n\n        if (newVisibleCount >= items.length) {\n          return newVisibleCount;\n        }\n\n        const overflowButtonWidth = overflowButton.current\n          ? overflowButton.current.offsetWidth + gap\n          : 0;\n        maxWidth -= overflowButtonWidth;\n\n        while (currentWidth > maxWidth) {\n          const removed = visible.pop();\n          if (!removed) break;\n          currentWidth -= getTabWidth(removed) + gap;\n          newVisibleCount--;\n        }\n\n        if (selectedTab && !visible.includes(selectedTab)) {\n          const selectedTabWidth = getTabWidth(selectedTab) + gap;\n          while (currentWidth + selectedTabWidth > maxWidth) {\n            const removed = visible.pop();\n            if (!removed) break;\n            currentWidth -= getTabWidth(removed) + gap;\n            newVisibleCount--;\n          }\n        }\n\n        // minimal count should be 0, if there is no space for any tab apart from selected tab from the overflow menu\n        return Math.max(0, newVisibleCount);\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield {\n        visibleCount: tabs.length,\n        isMeasuring: true,\n      };\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(tabs.length);\n      const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n      yield {\n        visibleCount: newVisibleCount,\n        isMeasuring,\n      };\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield {\n          visibleCount: computeVisible(newVisibleCount),\n          isMeasuring: false,\n        };\n      }\n    });\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [selected]);\n\n  useEffect(() => {\n    const handleWindowResize = () => {\n      updateOverflow();\n    };\n\n    targetWindow?.addEventListener(\"resize\", handleWindowResize);\n\n    return () => {\n      targetWindow?.removeEventListener(\"resize\", handleWindowResize);\n    };\n  }, [updateOverflow, targetWindow]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        updateOverflow();\n      });\n    });\n    resizeObserver.observe(element);\n    if (element.parentElement) {\n      resizeObserver.observe(element.parentElement);\n    }\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [container, updateOverflow]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element || isMeasuring) return;\n\n    const win = ownerWindow(element);\n\n    const mutationObserver = new win.MutationObserver(() => {\n      requestAnimationFrame(() => {\n        updateOverflow();\n      });\n    });\n\n    mutationObserver.observe(element, {\n      childList: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [container, updateOverflow, isMeasuring]);\n\n  const childArray = useMemo(() => Children.toArray(children), [children]);\n  const visible = useMemo(\n    () => childArray.slice(0, visibleCount),\n    [visibleCount, childArray],\n  );\n  const hidden = useMemo(\n    () => childArray.slice(visibleCount),\n    [childArray, visibleCount],\n  );\n\n  const hiddenSelectedIndex = hidden.findIndex(\n    (child) =>\n      isValidElement<TabNextProps>(child) && child?.props?.value === selected,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (visibleCount === childArray.length) {\n      realSelectedIndex.current = childArray.findIndex(\n        (child) =>\n          isValidElement<TabNextProps>(child) &&\n          child?.props?.value === selected,\n      );\n    }\n  }, [visibleCount, childArray, selected]);\n\n  if (selected && hiddenSelectedIndex !== -1) {\n    const removed = hidden.splice(hiddenSelectedIndex, 1);\n    visible.push(removed[0]);\n  }\n\n  if (isMeasuring) {\n    return [childArray, [], isMeasuring, realSelectedIndex] as const;\n  }\n\n  return [visible, hidden, isMeasuring, realSelectedIndex] as const;\n}\n"],"names":["useValueEffect","useWindow","useRef","useEventCallback","visibleCount","visible","isMeasuring","useIsomorphicLayoutEffect","useEffect","ownerWindow","useMemo","Children","isValidElement"],"mappings":";;;;;;AA2BA,SAAS,YAAY,OAAA,EAAsB;AACzC,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,OAAA,CAAQ,qBAAA,EAAsB;AAChD,EAAA,OAAO,IAAA,CAAK,KAAK,KAAK,CAAA;AACxB;AAEO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAqB;AAInB,EAAA,MAAM,CAAC,EAAE,YAAA,EAAc,aAAY,EAAG,eAAe,IAAIA,mBAAA,CAAe;AAAA,IACtE,cAAc,IAAA,CAAK,MAAA;AAAA,IACnB,WAAA,EAAa;AAAA,GACd,CAAA;AACD,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,iBAAA,GAAoBC,aAAe,EAAE,CAAA;AAE3C,EAAA,MAAM,cAAA,GAAiBC,sBAAiB,MAAM;AAC5C,IAAA,MAAM,cAAA,GAAiB,CAACC,aAAAA,KAAyB;AAlDrD,MAAA,IAAA,EAAA;AAmDM,MAAA,IAAI,SAAA,CAAU,WAAW,YAAA,EAAc;AACrC,QAAA,MAAM,QAAQ,KAAA,CAAM,IAAA;AAAA,UAClB,UAAU,OAAA,CAAQ,gBAAA;AAAA,YAChB;AAAA;AACF,SACF;AACA,QAAA,MAAM,WAAA,GAAA,CAAc,eAAU,OAAA,CAAQ,aAAA;AAAA,UACpC;AAAA,cADkB,IAAA,GAAA,MAAA,GAAA,EAAA,CAEjB,aAAA;AAEH,QAAA,IAAI,QAAA,GAAW,SAAA,CAAU,OAAA,CAAQ,WAAA,IAAe,CAAA;AAEhD,QAAA,MAAM,kBAAkB,YAAA,CAAa,gBAAA;AAAA,UACnC,SAAA,CAAU;AAAA,SACZ;AACA,QAAA,MAAM,MAAM,MAAA,CAAO,QAAA,CAAS,eAAA,CAAgB,GAAA,IAAO,KAAK,EAAE,CAAA;AAE1D,QAAA,IAAI,YAAA,GAAe,CAAA;AACnB,QAAA,IAAI,eAAA,GAAkB,CAAA;AAEtB,QAAA,MAAMC,WAAU,EAAC;AAEjB,QAAA,OAAO,eAAA,GAAkB,MAAM,MAAA,EAAQ;AACrC,UAAA,MAAM,OAAA,GAAU,MAAM,eAAe,CAAA;AACrC,UAAA,IAAI,OAAA,EAAS;AACX,YAAA,IAAI,YAAA,GAAe,WAAA,CAAY,OAAO,CAAA,GAAI,MAAM,QAAA,EAAU;AACxD,cAAA;AAAA,YACF;AACA,YAAA,YAAA,IAAgB,WAAA,CAAY,OAAO,CAAA,GAAI,GAAA;AACvC,YAAAA,QAAAA,CAAQ,KAAK,OAAO,CAAA;AAAA,UACtB;AACA,UAAA,eAAA,EAAA;AAAA,QACF;AAEA,QAAA,IAAI,eAAA,IAAmB,MAAM,MAAA,EAAQ;AACnC,UAAA,OAAO,eAAA;AAAA,QACT;AAEA,QAAA,MAAM,sBAAsB,cAAA,CAAe,OAAA,GACvC,cAAA,CAAe,OAAA,CAAQ,cAAc,GAAA,GACrC,CAAA;AACJ,QAAA,QAAA,IAAY,mBAAA;AAEZ,QAAA,OAAO,eAAe,QAAA,EAAU;AAC9B,UAAA,MAAM,OAAA,GAAUA,SAAQ,GAAA,EAAI;AAC5B,UAAA,IAAI,CAAC,OAAA,EAAS;AACd,UAAA,YAAA,IAAgB,WAAA,CAAY,OAAO,CAAA,GAAI,GAAA;AACvC,UAAA,eAAA,EAAA;AAAA,QACF;AAEA,QAAA,IAAI,WAAA,IAAe,CAACA,QAAAA,CAAQ,QAAA,CAAS,WAAW,CAAA,EAAG;AACjD,UAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,WAAW,CAAA,GAAI,GAAA;AACpD,UAAA,OAAO,YAAA,GAAe,mBAAmB,QAAA,EAAU;AACjD,YAAA,MAAM,OAAA,GAAUA,SAAQ,GAAA,EAAI;AAC5B,YAAA,IAAI,CAAC,OAAA,EAAS;AACd,YAAA,YAAA,IAAgB,WAAA,CAAY,OAAO,CAAA,GAAI,GAAA;AACvC,YAAA,eAAA,EAAA;AAAA,UACF;AAAA,QACF;AAGA,QAAA,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,eAAe,CAAA;AAAA,MACpC;AACA,MAAA,OAAOD,aAAAA;AAAA,IACT,CAAA;AAEA,IAAA,eAAA,CAAgB,aAAa;AAE3B,MAAA,MAAM;AAAA,QACJ,cAAc,IAAA,CAAK,MAAA;AAAA,QACnB,WAAA,EAAa;AAAA,OACf;AAGA,MAAA,MAAM,eAAA,GAAkB,cAAA,CAAe,IAAA,CAAK,MAAM,CAAA;AAClD,MAAA,MAAME,YAAAA,GAAc,eAAA,GAAkB,IAAA,CAAK,MAAA,IAAU,eAAA,GAAkB,CAAA;AACvE,MAAA,MAAM;AAAA,QACJ,YAAA,EAAc,eAAA;AAAA,QACd,WAAA,EAAAA;AAAA,OACF;AAGA,MAAA,IAAIA,YAAAA,EAAa;AACf,QAAA,MAAM;AAAA,UACJ,YAAA,EAAc,eAAe,eAAe,CAAA;AAAA,UAC5C,WAAA,EAAa;AAAA,SACf;AAAA,MACF;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAC,CAAA;AAGD,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,cAAA,EAAe;AAAA,EACjB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,cAAA,EAAe;AAAA,IACjB,CAAA;AAEA,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,QAAA,EAAU,kBAAA,CAAA;AAEzC,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,QAAA,EAAU,kBAAA,CAAA;AAAA,IAC9C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,cAAA,EAAgB,YAAY,CAAC,CAAA;AAEjC,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAC3B,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,GAAA,GAAMC,iBAAY,OAAO,CAAA;AAE/B,IAAA,MAAM,cAAA,GAAiB,IAAI,GAAA,CAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AACzD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AAE1B,QAAA,cAAA,EAAe;AAAA,MACjB,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AACD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAC9B,IAAA,IAAI,QAAQ,aAAA,EAAe;AACzB,MAAA,cAAA,CAAe,OAAA,CAAQ,QAAQ,aAAa,CAAA;AAAA,IAC9C;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAAA,MAClC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,cAAc,CAAC,CAAA;AAE9B,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAC3B,IAAA,IAAI,CAAC,WAAW,WAAA,EAAa;AAE7B,IAAA,MAAM,GAAA,GAAMC,iBAAY,OAAO,CAAA;AAE/B,IAAA,MAAM,gBAAA,GAAmB,IAAI,GAAA,CAAI,gBAAA,CAAiB,MAAM;AACtD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,cAAA,EAAe;AAAA,MACjB,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AAED,IAAA,gBAAA,CAAiB,QAAQ,OAAA,EAAS;AAAA,MAChC,SAAA,EAAW;AAAA,KACZ,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAA,gBAAA,CAAiB,UAAA,EAAW;AAAA,IAC9B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,cAAA,EAAgB,WAAW,CAAC,CAAA;AAE3C,EAAA,MAAM,UAAA,GAAaC,cAAQ,MAAMC,cAAA,CAAS,QAAQ,QAAQ,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AACvE,EAAA,MAAM,OAAA,GAAUD,aAAA;AAAA,IACd,MAAM,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,YAAY,CAAA;AAAA,IACtC,CAAC,cAAc,UAAU;AAAA,GAC3B;AACA,EAAA,MAAM,MAAA,GAASA,aAAA;AAAA,IACb,MAAM,UAAA,CAAW,KAAA,CAAM,YAAY,CAAA;AAAA,IACnC,CAAC,YAAY,YAAY;AAAA,GAC3B;AAEA,EAAA,MAAM,sBAAsB,MAAA,CAAO,SAAA;AAAA,IACjC,CAAC,KAAA,KAAO;AAxNZ,MAAA,IAAA,EAAA;AAyNM,MAAA,OAAAE,oBAAA,CAA6B,KAAK,CAAA,IAAA,CAAA,CAAK,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,KAAA,KAAP,mBAAc,KAAA,MAAU,QAAA;AAAA,IAAA;AAAA,GACnE;AAEA,EAAAL,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,YAAA,KAAiB,WAAW,MAAA,EAAQ;AACtC,MAAA,iBAAA,CAAkB,UAAU,UAAA,CAAW,SAAA;AAAA,QACrC,CAAC,KAAA,KAAO;AA/NhB,UAAA,IAAA,EAAA;AAgOU,UAAA,OAAAK,oBAAA,CAA6B,KAAK,CAAA,IAAA,CAAA,CAClC,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,KAAA,KAAP,mBAAc,KAAA,MAAU,QAAA;AAAA,QAAA;AAAA,OAC5B;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,UAAA,EAAY,QAAQ,CAAC,CAAA;AAEvC,EAAA,IAAI,QAAA,IAAY,wBAAwB,EAAA,EAAI;AAC1C,IAAA,MAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,mBAAA,EAAqB,CAAC,CAAA;AACpD,IAAA,OAAA,CAAQ,IAAA,CAAK,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,EACzB;AAEA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,OAAO,CAAC,UAAA,EAAY,EAAC,EAAG,aAAa,iBAAiB,CAAA;AAAA,EACxD;AAEA,EAAA,OAAO,CAAC,OAAA,EAAS,MAAA,EAAQ,WAAA,EAAa,iBAAiB,CAAA;AACzD;;;;"}

package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+function useRestoreActiveTab({
+  container,
+  tabs,
+  realSelectedIndex,
+  removedActiveTabRef
+}) {
+  const tabsRef = react.useRef(tabs);
+  const previousTabsRef = react.useRef(tabs);
+  core.useIsomorphicLayoutEffect(() => {
+    tabsRef.current = tabs;
+    return () => {
+      previousTabsRef.current = tabs;
+    };
+  }, [tabs]);
+  react.useEffect(() => {
+    if (!container.current) return;
+    const win = core.ownerWindow(container.current);
+    const mutationObserver = new win.MutationObserver((mutations) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      for (const mutation of mutations) {
+        const removedItem = mutation.removedNodes[0] instanceof HTMLElement ? mutation.removedNodes[0] : null;
+        const removedItemWasTab = removedActiveTabRef.current && ((_a = removedItem == null ? void 0 : removedItem.dataset) == null ? void 0 : _a.overflowitem);
+        const activeTabWasRemoved = !tabsRef.current.find(
+          ({ value }) => value === removedActiveTabRef.current
+        );
+        if (removedItemWasTab && activeTabWasRemoved) {
+          const removedTab = removedItem == null ? void 0 : removedItem.querySelector('[role="tab"]');
+          let nextTab = null;
+          if ((removedTab == null ? void 0 : removedTab.ariaSelected) === "true" && realSelectedIndex.current != null && realSelectedIndex.current >= 0) {
+            nextTab = (_b = tabsRef.current[Math.min(realSelectedIndex.current, tabsRef.current.length - 1)]) == null ? void 0 : _b.element;
+          }
+          if (!nextTab) {
+            const previousTab = mutation.previousSibling instanceof HTMLElement ? mutation.previousSibling.querySelector(
+              '[role="tab"]'
+            ) : null;
+            if (!previousTab) {
+              nextTab = mutation.nextSibling instanceof HTMLElement ? (_c = mutation.nextSibling) == null ? void 0 : _c.querySelector(
+                '[role="tab"]'
+              ) : null;
+            } else {
+              const nextTabIndex = previousTab ? tabsRef.current.findIndex(
+                ({ element }) => element === previousTab
+              ) + 1 : -1;
+              nextTab = (_d = tabsRef.current[Math.min(nextTabIndex, tabsRef.current.length - 1)]) == null ? void 0 : _d.element;
+            }
+          }
+          if (!((_e = container.current) == null ? void 0 : _e.querySelector(
+            '[role="tab"][aria-selected="true"]'
+          ))) {
+            nextTab == null ? void 0 : nextTab.click();
+          }
+          if (!((_f = container.current) == null ? void 0 : _f.contains(win.document.activeElement))) {
+            if (nextTab == null ? void 0 : nextTab.isConnected) {
+              nextTab == null ? void 0 : nextTab.focus({ preventScroll: true });
+            } else {
+              (_h = (_g = container.current) == null ? void 0 : _g.querySelector(
+                '[role="tab"][aria-selected="true"]'
+              )) == null ? void 0 : _h.focus({ preventScroll: true });
+            }
+          }
+          removedActiveTabRef.current = void 0;
+        }
+        if (removedActiveTabRef.current) {
+          if (removedItemWasTab) {
+            const tabElement = (_i = tabsRef.current.find(
+              ({ value }) => value === removedActiveTabRef.current
+            )) == null ? void 0 : _i.element;
+            if (win.document.activeElement === win.document.body) {
+              tabElement == null ? void 0 : tabElement.focus();
+            }
+          } else if (activeTabWasRemoved && (removedItem == null ? void 0 : removedItem.dataset.overflow)) {
+            (_k = (_j = tabsRef.current[tabsRef.current.length - 1]) == null ? void 0 : _j.element) == null ? void 0 : _k.focus();
+          }
+        }
+      }
+    });
+    mutationObserver.observe(container.current, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [container, realSelectedIndex, removedActiveTabRef]);
+}
+
+exports.useRestoreActiveTab = useRestoreActiveTab;
+//# sourceMappingURL=useRestoreActiveTab.js.map

package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRestoreActiveTab.js","sources":["../src/tabs-next/hooks/useRestoreActiveTab.ts"],"sourcesContent":["import { ownerWindow, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type MutableRefObject,\n  type RefObject,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseHandleRemovalProps {\n  container: RefObject<HTMLElement>;\n  tabs: Item[];\n  realSelectedIndex: RefObject<number>;\n  removedActiveTabRef: MutableRefObject<string | undefined>;\n}\n\nexport function useRestoreActiveTab({\n  container,\n  tabs,\n  realSelectedIndex,\n  removedActiveTabRef,\n}: UseHandleRemovalProps) {\n  const tabsRef = useRef(tabs);\n  const previousTabsRef = useRef(tabs);\n\n  useIsomorphicLayoutEffect(() => {\n    tabsRef.current = tabs;\n\n    return () => {\n      previousTabsRef.current = tabs;\n    };\n  }, [tabs]);\n\n  useEffect(() => {\n    if (!container.current) return;\n\n    const win = ownerWindow(container.current);\n\n    const mutationObserver = new win.MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        const removedItem =\n          mutation.removedNodes[0] instanceof HTMLElement\n            ? mutation.removedNodes[0]\n            : null;\n\n        const removedItemWasTab =\n          removedActiveTabRef.current && removedItem?.dataset?.overflowitem;\n\n        const activeTabWasRemoved = !tabsRef.current.find(\n          ({ value }) => value === removedActiveTabRef.current,\n        );\n\n        if (removedItemWasTab && activeTabWasRemoved) {\n          const removedTab =\n            removedItem?.querySelector<HTMLElement>('[role=\"tab\"]');\n\n          let nextTab: HTMLElement | null | undefined = null;\n\n          if (\n            removedTab?.ariaSelected === \"true\" &&\n            realSelectedIndex.current != null &&\n            realSelectedIndex.current >= 0\n          ) {\n            nextTab =\n              tabsRef.current[\n                Math.min(realSelectedIndex.current, tabsRef.current.length - 1)\n              ]?.element;\n          }\n\n          if (!nextTab) {\n            const previousTab =\n              mutation.previousSibling instanceof HTMLElement\n                ? mutation.previousSibling.querySelector<HTMLElement>(\n                    '[role=\"tab\"]',\n                  )\n                : null;\n\n            if (!previousTab) {\n              nextTab =\n                mutation.nextSibling instanceof HTMLElement\n                  ? mutation.nextSibling?.querySelector<HTMLElement>(\n                      '[role=\"tab\"]',\n                    )\n                  : null;\n            } else {\n              const nextTabIndex = previousTab\n                ? tabsRef.current.findIndex(\n                    ({ element }) => element === previousTab,\n                  ) + 1\n                : -1;\n\n              nextTab =\n                tabsRef.current[\n                  Math.min(nextTabIndex, tabsRef.current.length - 1)\n                ]?.element;\n            }\n          }\n\n          if (\n            !container.current?.querySelector<HTMLElement>(\n              '[role=\"tab\"][aria-selected=\"true\"]',\n            )\n          ) {\n            nextTab?.click();\n          }\n\n          if (!container.current?.contains(win.document.activeElement)) {\n            if (nextTab?.isConnected) {\n              nextTab?.focus({ preventScroll: true });\n            } else {\n              container.current\n                ?.querySelector<HTMLElement>(\n                  '[role=\"tab\"][aria-selected=\"true\"]',\n                )\n                ?.focus({ preventScroll: true });\n            }\n          }\n\n          removedActiveTabRef.current = undefined;\n        }\n\n        // Focus the tab if it was moved from the overflow menu into the visible tabs\n        if (removedActiveTabRef.current) {\n          if (removedItemWasTab) {\n            const tabElement = tabsRef.current.find(\n              ({ value }) => value === removedActiveTabRef.current,\n            )?.element;\n\n            if (win.document.activeElement === win.document.body) {\n              tabElement?.focus();\n            }\n            // If the active tab was removed and the overflow menu has been removed focus the last visible tab.\n          } else if (activeTabWasRemoved && removedItem?.dataset.overflow) {\n            tabsRef.current[tabsRef.current.length - 1]?.element?.focus();\n          }\n        }\n      }\n    });\n\n    mutationObserver.observe(container.current, {\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [container, realSelectedIndex, removedActiveTabRef]);\n}\n"],"names":["useRef","useIsomorphicLayoutEffect","useEffect","ownerWindow"],"mappings":"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"}

package/dist-cjs/toast-group/ToastGroup.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltToastGroup {\n  width: var(--toastGroup-width);\n  max-height: calc(100% - var(--salt-spacing-300) * 2);\n  margin: var(--salt-spacing-300) var(--salt-spacing-200) var(--salt-spacing-100) var(--salt-spacing-200);\n  overflow: auto;\n  display: flex-inline;\n  flex-direction: column;\n  position: fixed;\n  z-index: var(--salt-zIndex-flyover);\n}\n\n.saltToastGroup-bottom-right {\n  bottom: 0;\n  right: 0;\n  justify-content: flex-end;\n}\n\n.saltToastGroup-top-right {\n  top: 0;\n  right: 0;\n  justify-content: flex-start;\n}\n\n.salt-density-high {\n  --toastGroup-width: 210px;\n}\n\n.salt-density-medium {\n  --toastGroup-width: 260px;\n}\n\n.salt-density-low {\n  --toastGroup-width: 310px;\n}\n\n.salt-density-touch {\n  --toastGroup-width: 360px;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ToastGroup.css.js.map

package/dist-cjs/toast-group/ToastGroup.css.js.map

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

package/dist-cjs/toast-group/ToastGroup.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var ToastGroup$1 = require('./ToastGroup.css.js');
+
+const withBaseName = core.makePrefixer("saltToastGroup");
+const ToastGroup = react.forwardRef(
+  function ToastGroup2(props, ref) {
+    const { children, className, placement = "bottom-right", ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-toast",
+      css: ToastGroup$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), withBaseName(placement), className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.ToastGroup = ToastGroup;
+//# sourceMappingURL=ToastGroup.js.map

package/dist-cjs/toast-group/ToastGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport toastGroupCss from \"./ToastGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToastGroup\");\n\nexport interface ToastGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  placement?: \"top-right\" | \"bottom-right\";\n}\n\nexport const ToastGroup = forwardRef<HTMLDivElement, ToastGroupProps>(\n  function ToastGroup(props, ref) {\n    const { children, className, placement = \"bottom-right\", ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toast\",\n      css: toastGroupCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), withBaseName(placement), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ToastGroup","useWindow","useComponentCssInjection","toastGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,YAAY,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAErE,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,YAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,SAAS,GAAG,SAAS,CAAA;AAAA,QACjE,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/tokenized-input/TokenizedInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n  box-sizing: border-box;\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: var(--salt-cursor-text);\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton.saltButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n  --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n  --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=TokenizedInput.css.js.map

package/dist-cjs/tokenized-input/TokenizedInput.css.js.map

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

package/dist-cjs/tokenized-input/TokenizedInput.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var TokenizedInputBase = require('./TokenizedInputBase.js');
+var useTokenizedInput = require('./useTokenizedInput.js');
+
+const TokenizedInput = react.forwardRef(function TokenizedInput2(props, ref) {
+  const { inputRef: inputRefProp, ...restProps } = props;
+  const { inputRef, helpers, inputProps } = useTokenizedInput.useTokenizedInput(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TokenizedInputBase.TokenizedInputBase,
+    {
+      helpers,
+      inputRef: core.useForkRef(inputRef, inputRefProp),
+      ref,
+      ...inputProps
+    }
+  );
+});
+
+exports.TokenizedInput = TokenizedInput;
+//# sourceMappingURL=TokenizedInput.js.map

package/dist-cjs/tokenized-input/TokenizedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedInput.js","sources":["../src/tokenized-input/TokenizedInput.tsx"],"sourcesContent":["import { type UseTooltipProps, useForkRef } from \"@salt-ds/core\";\nimport { type ComponentType, type ForwardedRef, forwardRef } from \"react\";\nimport {\n  TokenizedInputBase,\n  type TokenizedInputBaseProps,\n} from \"./TokenizedInputBase\";\nimport { useTokenizedInput } from \"./useTokenizedInput\";\n\nexport type StringToItem<Item> = (\n  selectedItems: Array<Item>,\n  value: string,\n) => Item | null | undefined;\n\nexport type ChangeHandler<Item> = (selectedItems: Item[] | undefined) => void;\n\nexport interface TokenizedInputProps<Item>\n  extends Omit<\n    TokenizedInputBaseProps<Item>,\n    | \"activeIndices\"\n    | \"focused\"\n    | \"highlightedIndex\"\n    | \"helpers\"\n    | \"onRemoveItem\"\n  > {\n  Tooltip?: ComponentType;\n  delimiter?: string | Array<string>;\n  disableAddOnBlur?: boolean;\n  initialSelectedItems?: Array<Item>;\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  stringToItem?: StringToItem<Item>;\n  tooltipEnterDelay?: UseTooltipProps[\"enterDelay\"];\n  tooltipLeaveDelay?: UseTooltipProps[\"leaveDelay\"];\n  tooltipPlacement?: UseTooltipProps[\"placement\"];\n}\n\nexport const TokenizedInput = forwardRef(function TokenizedInput<Item>(\n  props: TokenizedInputProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { inputRef: inputRefProp, ...restProps } = props;\n\n  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);\n\n  return (\n    <TokenizedInputBase\n      helpers={helpers}\n      inputRef={useForkRef(inputRef, inputRefProp)}\n      ref={ref}\n      {...inputProps}\n    />\n  );\n});\n"],"names":["forwardRef","TokenizedInput","useTokenizedInput","jsx","TokenizedInputBase","useForkRef"],"mappings":";;;;;;;;AAqCO,MAAM,cAAA,GAAiBA,gBAAA,CAAW,SAASC,eAAAA,CAChD,OACA,GAAA,EACA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAc,GAAG,WAAU,GAAI,KAAA;AAEjD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,UAAA,EAAW,GAAIC,oCAAkB,SAAS,CAAA;AAErE,EAAA,uBACEC,cAAA;AAAA,IAACC,qCAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,QAAA,EAAUC,eAAA,CAAW,QAAA,EAAU,YAAY,CAAA;AAAA,MAC3C,GAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}