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

package/dist-es/tabs-next/OverflowMenu.js

@@ -1,13 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { useForkRef, Button } from '@salt-ds/core';
 import { OverflowMenuIcon } from '@salt-ds/icons';
+import { forwardRef } from 'react';
 import { useOverflowMenu, useOverflowContext } from '@fluentui/react-overflow';
 import '../dropdown/DropdownBase.js';
 import '../dropdown/DropdownButton.js';
 import { Dropdown } from '../dropdown/Dropdown.js';
-import '../responsive/useResizeObserver.js';
 import '../form-field-context-legacy/FormFieldLegacyContext.js';
+import '../responsive/useResizeObserver.js';
 
 const OverflowMenu = forwardRef(
   function OverflowMenu2(props, forwardedRef) {

package/dist-es/tabs-next/OverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from \"react\";\nimport { Button, useForkRef } from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, DropdownProps } from \"../dropdown\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface OverflowMenuProps extends DropdownProps<TabValue> {\n  tabs: TabValue[];\n}\n\nexport const OverflowMenu = forwardRef<HTMLDivElement, OverflowMenuProps>(\n  function OverflowMenu(props, forwardedRef) {\n    const { tabs, ...rest } = props;\n    const { ref, overflowCount, isOverflowing } =\n      useOverflowMenu<HTMLDivElement>();\n    const handleRef = useForkRef(ref, forwardedRef);\n    const itemVisibility = useOverflowContext(\n      (context) => context.itemVisibility\n    );\n\n    const tabList = tabs.filter(({ value }) => !itemVisibility[value]);\n\n    if (!isOverflowing) return null;\n\n    return (\n      <Dropdown<TabValue>\n        aria-label={`${overflowCount} more tabs`}\n        triggerComponent={\n          <Button aria-label=\"More tabs\" variant=\"secondary\" role=\"combobox\">\n            <OverflowMenuIcon aria-hidden style={{ margin: 0 }} />\n          </Button>\n        }\n        width=\"auto\"\n        ref={handleRef}\n        source={tabList}\n        selected={null}\n        {...rest}\n      />\n    );\n  }\n);\n"],"names":["OverflowMenu"],"mappings":";;;;;;;;;;;AAgBO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,YAAc,EAAA;AACzC,IAAM,MAAA,EAAE,IAAS,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,EAAE,GAAA,EAAK,aAAe,EAAA,aAAA,KAC1B,eAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAA,kBAAA;AAAA,MACrB,CAAC,YAAY,OAAQ,CAAA,cAAA;AAAA,KACvB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,KAAK,MAAO,CAAA,CAAC,EAAE,KAAM,EAAA,KAAM,CAAC,cAAA,CAAe,KAAM,CAAA,CAAA,CAAA;AAEjE,IAAA,IAAI,CAAC,aAAA;AAAe,MAAO,OAAA,IAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OACtD,CAAA;AAAA,MAEF,KAAM,EAAA,MAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA,OAAA;AAAA,MACR,QAAU,EAAA,IAAA;AAAA,MACT,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"OverflowMenu.js","sources":["../src/tabs-next/OverflowMenu.tsx"],"sourcesContent":["import { Button, useForkRef } from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useOverflowContext, useOverflowMenu } from \"@fluentui/react-overflow\";\nimport { Dropdown, type DropdownProps } from \"../dropdown\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface OverflowMenuProps extends DropdownProps<TabValue> {\n  tabs: TabValue[];\n}\n\nexport const OverflowMenu = forwardRef<HTMLDivElement, OverflowMenuProps>(\n  function OverflowMenu(props, forwardedRef) {\n    const { tabs, ...rest } = props;\n    const { ref, overflowCount, isOverflowing } =\n      useOverflowMenu<HTMLDivElement>();\n    const handleRef = useForkRef(ref, forwardedRef);\n    const itemVisibility = useOverflowContext(\n      (context) => context.itemVisibility,\n    );\n\n    const tabList = tabs.filter(({ value }) => !itemVisibility[value]);\n\n    if (!isOverflowing) return null;\n\n    return (\n      <Dropdown<TabValue>\n        aria-label={`${overflowCount} more tabs`}\n        triggerComponent={\n          <Button aria-label=\"More tabs\" variant=\"secondary\" role=\"combobox\">\n            <OverflowMenuIcon aria-hidden style={{ margin: 0 }} />\n          </Button>\n        }\n        width=\"auto\"\n        ref={handleRef}\n        source={tabList}\n        selected={null}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["OverflowMenu"],"mappings":";;;;;;;;;;;AAgBO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,YAAc,EAAA;AACzC,IAAM,MAAA,EAAE,IAAS,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1B,IAAA,MAAM,EAAE,GAAA,EAAK,aAAe,EAAA,aAAA,KAC1B,eAAgC,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA,CAAA;AAC9C,IAAA,MAAM,cAAiB,GAAA,kBAAA;AAAA,MACrB,CAAC,YAAY,OAAQ,CAAA,cAAA;AAAA,KACvB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,KAAK,MAAO,CAAA,CAAC,EAAE,KAAM,EAAA,KAAM,CAAC,cAAA,CAAe,KAAM,CAAA,CAAA,CAAA;AAEjE,IAAA,IAAI,CAAC,aAAA;AAAe,MAAO,OAAA,IAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,cAAY,CAAG,EAAA,aAAA,CAAA,UAAA,CAAA;AAAA,MACf,kCACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,YAAW,EAAA,WAAA;AAAA,QAAY,OAAQ,EAAA,WAAA;AAAA,QAAY,IAAK,EAAA,UAAA;AAAA,QACtD,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,UAAC,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAE,EAAA;AAAA,SAAG,CAAA;AAAA,OACtD,CAAA;AAAA,MAEF,KAAM,EAAA,MAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,MAAQ,EAAA,OAAA;AAAA,MACR,QAAU,EAAA,IAAA;AAAA,MACT,GAAG,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/tabs-next/TabNext.js

@@ -1,84 +1,86 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import { forwardRef, useEffect } from 'react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import css_248z from './TabNext.css.js';
-import clsx from 'clsx';
+import { forwardRef, useEffect } from 'react';
 import { OverflowItem } from '@fluentui/react-overflow';
+import clsx from 'clsx';
+import css_248z from './TabNext.css.js';
 import { useTabs } from './TabNextContext.js';
 
 const withBaseName = makePrefixer("saltTabNext");
-const TabNext = forwardRef(function Tab(props, ref) {
-  const {
-    children,
-    className,
-    disabled: disabledProp,
-    onClick,
-    onFocus,
-    value,
-    ...rest
-  } = props;
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-tab-next",
-    css: css_248z,
-    window: targetWindow
-  });
-  const {
-    activeColor,
-    isActive,
-    activate,
-    isFocusable,
-    setFocusable,
-    disabled: tabstripDisabled,
-    unregisterTab,
-    registerTab,
-    variant
-  } = useTabs();
-  const active = isActive(value);
-  const focusable = isFocusable(value);
-  const disabled = tabstripDisabled || disabledProp;
-  const handleClick = (event) => {
-    activate(event);
-    onClick == null ? void 0 : onClick(event);
-  };
-  const handleFocus = (event) => {
-    setFocusable(value);
-    onFocus == null ? void 0 : onFocus(event);
-  };
-  useEffect(() => {
-    registerTab({ value, label: children });
-    return () => unregisterTab(value);
-  }, [children, registerTab, unregisterTab, value]);
-  return /* @__PURE__ */ jsx(OverflowItem, {
-    id: value,
-    priority: active ? 2 : 1,
-    children: /* @__PURE__ */ jsx("div", {
-      className: withBaseName("wrapper"),
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(
-          withBaseName(),
-          withBaseName(variant),
-          withBaseName(activeColor),
-          className
-        ),
-        "data-value": value,
-        "aria-selected": active,
-        disabled,
-        value,
-        ref,
-        role: "tab",
-        onClick: handleClick,
-        onFocus: handleFocus,
-        tabIndex: focusable && !disabled ? 0 : -1,
-        type: "button",
-        ...rest,
-        children
+const TabNext = forwardRef(
+  function Tab(props, ref) {
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      onClick,
+      onFocus,
+      value,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      activeColor,
+      isActive,
+      activate,
+      isFocusable,
+      setFocusable,
+      disabled: tabstripDisabled,
+      unregisterTab,
+      registerTab,
+      variant
+    } = useTabs();
+    const active = isActive(value);
+    const focusable = isFocusable(value);
+    const disabled = tabstripDisabled || disabledProp;
+    const handleClick = (event) => {
+      activate(event);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleFocus = (event) => {
+      setFocusable(value);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    useEffect(() => {
+      registerTab({ value, label: children });
+      return () => unregisterTab(value);
+    }, [children, registerTab, unregisterTab, value]);
+    return /* @__PURE__ */ jsx(OverflowItem, {
+      id: value,
+      priority: active ? 2 : 1,
+      children: /* @__PURE__ */ jsx("div", {
+        className: withBaseName("wrapper"),
+        children: /* @__PURE__ */ jsx("button", {
+          className: clsx(
+            withBaseName(),
+            withBaseName(variant),
+            withBaseName(activeColor),
+            className
+          ),
+          "data-value": value,
+          "aria-selected": active,
+          disabled,
+          value,
+          ref,
+          role: "tab",
+          onClick: handleClick,
+          onFocus: handleFocus,
+          tabIndex: focusable && !disabled ? 0 : -1,
+          type: "button",
+          ...rest,
+          children
+        })
       })
-    })
-  });
-});
+    });
+  }
+);
 
 export { TabNext };
 //# sourceMappingURL=TabNext.js.map

package/dist-es/tabs-next/TabNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  forwardRef,\n  ReactElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  FocusEvent,\n  useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* Value prop is mandatory and must be unique in order for overflow to work. */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n  props,\n  ref\n): ReactElement<TabNextProps> {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    onClick,\n    onFocus,\n    value,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next\",\n    css: tabCss,\n    window: targetWindow,\n  });\n  const {\n    activeColor,\n    isActive,\n    activate,\n    isFocusable,\n    setFocusable,\n    disabled: tabstripDisabled,\n    unregisterTab,\n    registerTab,\n    variant,\n  } = useTabs();\n  const active = isActive(value);\n  const focusable = isFocusable(value);\n  const disabled = tabstripDisabled || disabledProp;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    activate(event);\n    onClick?.(event);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusable(value);\n    onFocus?.(event);\n  };\n\n  useEffect(() => {\n    registerTab({ value, label: children });\n    return () => unregisterTab(value);\n  }, [children, registerTab, unregisterTab, value]);\n\n  return (\n    <OverflowItem id={value} priority={active ? 2 : 1}>\n      <div className={withBaseName(\"wrapper\")}>\n        <button\n          className={clsx(\n            withBaseName(),\n            withBaseName(variant),\n            withBaseName(activeColor),\n            className\n          )}\n          data-value={value}\n          aria-selected={active}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          role=\"tab\"\n          onClick={handleClick}\n          onFocus={handleFocus}\n          tabIndex={focusable && !disabled ? 0 : -1}\n          type=\"button\"\n          {...rest}\n        >\n          {children}\n        </button>\n      </div>\n    </OverflowItem>\n  );\n});\n"],"names":["tabCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAA,UAAA,CAA4C,SAAS,GAAA,CAC1E,OACA,GAC4B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,MACE,OAAQ,EAAA,CAAA;AACZ,EAAM,MAAA,MAAA,GAAS,SAAS,KAAK,CAAA,CAAA;AAC7B,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,IAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,KAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,EAAI,EAAA,KAAA;AAAA,IAAO,QAAA,EAAU,SAAS,CAAI,GAAA,CAAA;AAAA,IAC9C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,WAAW,CAAA;AAAA,UACxB,SAAA;AAAA,SACF;AAAA,QACA,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,MAAA;AAAA,QACf,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,WAAA;AAAA,QACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,QACvC,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactElement,\n  forwardRef,\n  useEffect,\n} from \"react\";\n\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport clsx from \"clsx\";\nimport tabCss from \"./TabNext.css\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* Value prop is mandatory and must be unique in order for overflow to work. */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      onClick,\n      onFocus,\n      value,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next\",\n      css: tabCss,\n      window: targetWindow,\n    });\n    const {\n      activeColor,\n      isActive,\n      activate,\n      isFocusable,\n      setFocusable,\n      disabled: tabstripDisabled,\n      unregisterTab,\n      registerTab,\n      variant,\n    } = useTabs();\n    const active = isActive(value);\n    const focusable = isFocusable(value);\n    const disabled = tabstripDisabled || disabledProp;\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      activate(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      setFocusable(value);\n      onFocus?.(event);\n    };\n\n    useEffect(() => {\n      registerTab({ value, label: children });\n      return () => unregisterTab(value);\n    }, [children, registerTab, unregisterTab, value]);\n\n    return (\n      <OverflowItem id={value} priority={active ? 2 : 1}>\n        <div className={withBaseName(\"wrapper\")}>\n          <button\n            className={clsx(\n              withBaseName(),\n              withBaseName(variant),\n              withBaseName(activeColor),\n              className,\n            )}\n            data-value={value}\n            aria-selected={active}\n            disabled={disabled}\n            value={value}\n            ref={ref}\n            role=\"tab\"\n            onClick={handleClick}\n            onFocus={handleFocus}\n            tabIndex={focusable && !disabled ? 0 : -1}\n            type=\"button\"\n            {...rest}\n          >\n            {children}\n          </button>\n        </div>\n      </OverflowItem>\n    );\n  },\n);\n"],"names":["tabCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAAS,GAAI,CAAA,KAAA,EAAO,GAAiC,EAAA;AACnD,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,OAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AACJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAU,EAAA,gBAAA;AAAA,MACV,aAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,QACE,OAAQ,EAAA,CAAA;AACZ,IAAM,MAAA,MAAA,GAAS,SAAS,KAAK,CAAA,CAAA;AAC7B,IAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,IAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AACd,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,MAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,OAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,IAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,MAAa,EAAI,EAAA,KAAA;AAAA,MAAO,QAAA,EAAU,SAAS,CAAI,GAAA,CAAA;AAAA,MAC9C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACpC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,aAAa,OAAO,CAAA;AAAA,YACpB,aAAa,WAAW,CAAA;AAAA,YACxB,SAAA;AAAA,WACF;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,eAAe,EAAA,MAAA;AAAA,UACf,QAAA;AAAA,UACA,KAAA;AAAA,UACA,GAAA;AAAA,UACA,IAAK,EAAA,KAAA;AAAA,UACL,OAAS,EAAA,WAAA;AAAA,UACT,OAAS,EAAA,WAAA;AAAA,UACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,UACvC,IAAK,EAAA,QAAA;AAAA,UACJ,GAAG,IAAA;AAAA,UAEH,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/tabs-next/TabNextContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport interface TabsContextValue {\n  activeColor: \"primary\" | \"secondary\";\n  disabled?: boolean;\n  activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isActive: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n  variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  activeColor: \"primary\",\n  disabled: false,\n  activate: () => undefined,\n  isActive: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n  variant: \"main\",\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":[],"mappings":";;;AAoBa,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}
+{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { type ReactNode, type SyntheticEvent, useContext } from \"react\";\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport interface TabsContextValue {\n  activeColor: \"primary\" | \"secondary\";\n  disabled?: boolean;\n  activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isActive: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n  variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  activeColor: \"primary\",\n  disabled: false,\n  activate: () => undefined,\n  isActive: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n  variant: \"main\",\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":[],"mappings":";;;AAoBa,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}

package/dist-es/tabs-next/TabstripNext.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Overflow } from '@fluentui/react-overflow';
 import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
-import clsx from 'clsx';
-import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { Overflow } from '@fluentui/react-overflow';
+import clsx from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
 import { OverflowMenu } from './OverflowMenu.js';
-import css_248z from './TabstripNext.css.js';
 import { TabsContext } from './TabNextContext.js';
+import css_248z from './TabstripNext.css.js';
 
 const withBaseName = makePrefixer("saltTabstripNext");
 const TabstripNext = forwardRef(
@@ -49,7 +49,7 @@ const TabstripNext = forwardRef(
           onChange == null ? void 0 : onChange(event, { value: newValue });
         }
       },
-      [onChange, value, setValue]
+      [onChange, value]
     );
     const isActive = useCallback(
       (id) => {

package/dist-es/tabs-next/TabstripNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  SyntheticEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /* Styling active color variant. Defaults to \"primary\". */\n  activeColor?: \"primary\" | \"secondary\";\n  /* Tabs alignment. Defaults to \"left\" */\n  align?: \"left\" | \"center\" | \"right\";\n  /* Value for the uncontrolled version. */\n  value?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultValue?: string;\n  /* The Tabs variant */\n  variant?: \"main\" | \"inline\";\n}\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      activeColor = \"primary\",\n      align = \"left\",\n      children,\n      className,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      onKeyDown,\n      style,\n      variant = \"main\",\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(value);\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const activate = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, value, setValue]\n    );\n\n    const isActive = useCallback(\n      (id: string | undefined) => {\n        return value === id;\n      },\n      [value]\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable]\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n        ) ?? []\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item\n    ) => {\n      if (item) {\n        setValue(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (value !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const contextValue = useMemo(\n      () => ({\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      }),\n      [\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      ]\n    );\n\n    const tabstripStyle = {\n      \"--tabstripNext-justifyContent\": align,\n      ...style,\n    };\n\n    return (\n      <TabsContext.Provider value={contextValue}>\n        <div className={clsx(withBaseName(\"container\"), withBaseName(variant))}>\n          <Overflow ref={handleRef}>\n            <div\n              role=\"tablist\"\n              className={clsx(\n                withBaseName(),\n                withBaseName(\"horizontal\"),\n                className\n              )}\n              onKeyDown={handleKeyDown}\n              style={tabstripStyle}\n              {...rest}\n            >\n              {children}\n              <OverflowMenu\n                tabs={tabList}\n                onOpenChange={handleOverflowOpenChange}\n                onSelectionChange={handleOverflowItemClick}\n              />\n            </div>\n          </Overflow>\n        </div>\n      </TabsContext.Provider>\n    );\n  }\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}
+{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { Overflow } from \"@fluentui/react-overflow\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SelectionChangeHandler } from \"../common-hooks\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport { TabsContext } from \"./TabNextContext\";\nimport tabstripCss from \"./TabstripNext.css\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /* Styling active color variant. Defaults to \"primary\". */\n  activeColor?: \"primary\" | \"secondary\";\n  /* Tabs alignment. Defaults to \"left\" */\n  align?: \"left\" | \"center\" | \"right\";\n  /* Value for the uncontrolled version. */\n  value?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultValue?: string;\n  /* The Tabs variant */\n  variant?: \"main\" | \"inline\";\n}\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      activeColor = \"primary\",\n      align = \"left\",\n      children,\n      className,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      onKeyDown,\n      style,\n      variant = \"main\",\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(value);\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const activate = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, value],\n    );\n\n    const isActive = useCallback(\n      (id: string | undefined) => {\n        return value === id;\n      },\n      [value],\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable],\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`,\n        ) ?? [],\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement,\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item,\n    ) => {\n      if (item) {\n        setValue(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`,\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (value !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const contextValue = useMemo(\n      () => ({\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      }),\n      [\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      ],\n    );\n\n    const tabstripStyle = {\n      \"--tabstripNext-justifyContent\": align,\n      ...style,\n    };\n\n    return (\n      <TabsContext.Provider value={contextValue}>\n        <div className={clsx(withBaseName(\"container\"), withBaseName(variant))}>\n          <Overflow ref={handleRef}>\n            <div\n              role=\"tablist\"\n              className={clsx(\n                withBaseName(),\n                withBaseName(\"horizontal\"),\n                className,\n              )}\n              onKeyDown={handleKeyDown}\n              style={tabstripStyle}\n              {...rest}\n            >\n              {children}\n              <OverflowMenu\n                tabs={tabList}\n                onOpenChange={handleOverflowOpenChange}\n                onSelectionChange={handleOverflowItemClick}\n              />\n            </div>\n          </Overflow>\n        </div>\n      </TabsContext.Provider>\n    );\n  },\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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":["ToastGroup","toastGroupCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAY,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAErE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,YAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,SAAS,GAAG,SAAS,CAAA;AAAA,MACjE,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"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":["ToastGroup","toastGroupCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAY,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAErE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,YAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,SAAS,GAAG,SAAS,CAAA;AAAA,MACjE,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"TokenizedInput.js","sources":["../src/tokenized-input/TokenizedInput.tsx"],"sourcesContent":["import { useForkRef, UseTooltipProps } from \"@salt-ds/core\";\nimport { ComponentType, ForwardedRef, forwardRef } from \"react\";\nimport {\n  TokenizedInputBase,\n  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":["TokenizedInput"],"mappings":";;;;;;AAqCO,MAAM,cAAiB,GAAA,UAAA,CAAW,SAASA,eAAAA,CAChD,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAiB,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,UAAW,EAAA,GAAI,kBAAkB,SAAS,CAAA,CAAA;AAErE,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA,EAAU,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,IAC3C,GAAA;AAAA,IACC,GAAG,UAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"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":["TokenizedInput"],"mappings":";;;;;;AAqCO,MAAM,cAAiB,GAAA,UAAA,CAAW,SAASA,eAAAA,CAChD,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAiB,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,UAAW,EAAA,GAAI,kBAAkB,SAAS,CAAA,CAAA;AAErE,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA,EAAU,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,IAC3C,GAAA;AAAA,IACC,GAAG,UAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tokenized-input/TokenizedInputBase.js

@@ -1,25 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useDensity, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
+import { OverflowMenuIcon, CloseIcon } from '@salt-ds/icons';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import deepmerge from 'deepmerge';
 import { forwardRef, useRef, useState, useCallback } from 'react';
-import { makePrefixer, useDensity, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
-import { OverflowMenuIcon, CloseIcon } from '@salt-ds/icons';
-import { calcFirstHiddenIndex } from './internal/calcFirstHiddenIndex.js';
-import { defaultItemToString } from './internal/defaultItemToString.js';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
 import { InputPill } from './internal/InputPill.js';
 import { InputRuler } from './internal/InputRuler.js';
+import { calcFirstHiddenIndex } from './internal/calcFirstHiddenIndex.js';
+import { defaultItemToString } from './internal/defaultItemToString.js';
 import { useResizeObserver } from './internal/useResizeObserver.js';
 import { useWidth } from './internal/useWidth.js';
-import { InputLegacy } from '../input-legacy/InputLegacy.js';
-import '../input-legacy/StaticInputAdornment.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './TokenizedInput.css.js';
 
 const INITIAL_INPUT_WIDTH = 5;
 const withBaseName = makePrefixer("saltTokenizedInput");
 const getItemsAriaLabel = (itemCount) => itemCount === 0 ? "no item selected" : `${itemCount} ${itemCount > 1 ? "items" : "item"}`;
-const hasHelpers = (helpers) => {
+function hasHelpers(helpers) {
   if (process.env.NODE_ENV !== "production") {
     if (helpers == null) {
       console.warn(
@@ -28,10 +28,10 @@ const hasHelpers = (helpers) => {
     }
   }
   return helpers != null;
-};
+}
 const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
   const {
-    InputProps: InputProps2 = {},
+    InputProps = {},
     ExpandButtonProps = {},
     className,
     activeIndices = [],
@@ -180,7 +180,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
         "aria-activedescendant": highlightedIndex && highlightedIndex >= 0 ? `${id}-pill-${highlightedIndex}` : void 0
       }
     },
-    InputProps2
+    InputProps
   );
   const {
     accessibleText: expandButtonAccessibleText,

package/dist-es/tokenized-input/TokenizedInputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  KeyboardEventHandler,\n  ReactElement,\n  ReactEventHandler,\n  Ref,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  makePrefixer,\n  useDensity,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport {\n  TokenizedInputHelpers,\n  TokenizedInputState,\n} from \"./useTokenizedInput\";\nimport {\n  InputLegacy as Input,\n  InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tokenizedInputCss from \"./TokenizedInput.css\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n  extends Partial<TokenizedInputState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  InputProps?: Pick<InputProps, \"aria-describedby\" | \"inputProps\">;\n  disabled?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  helpers: TokenizedInputHelpers<Item>;\n  inputRef?: Ref<HTMLInputElement>;\n  itemToString?: ItemToString<Item>;\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onRemoveItem?: RemoveItemHandler;\n  onInputBlur?: FocusEventHandler<HTMLInputElement>;\n  onInputFocus?: FocusEventHandler<HTMLInputElement>;\n  onInputChange?: ChangeEventHandler<HTMLInputElement>;\n  onInputSelect?: ReactEventHandler<HTMLInputElement>;\n  onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nconst hasHelpers = (helpers: any) => {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (helpers == null) {\n      console.warn(\n        'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".'\n      );\n    }\n  }\n  return helpers != null;\n};\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n  props: TokenizedInputBaseProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    InputProps = {},\n    ExpandButtonProps = {},\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    focused,\n    expanded,\n    disabled,\n    helpers,\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    onClear,\n    onClick,\n    inputRef,\n    itemToString = defaultItemToString,\n    id: idProp,\n    expandButtonRef: expandButtonRefProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n\n  const density = useDensity();\n\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  // TODO: Use proper machanism to get variable values from theme in React. Something like below\n  // getComputedStyle(document.documentElement)\n  // .getPropertyValue('--my-variable-name'); // #999999\n  const pillGroupPadding = 16;\n  const lastVisiblePillMargin = 4;\n\n  const pillsRef = useRef<{ [index: number]: number | undefined }>({});\n  const inputRulerRef = useRef<HTMLSpanElement | null>(null);\n  const keydownExpandButton = useRef(false);\n\n  const [expandButtonRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const widthOffset =\n    pillGroupPadding +\n    INITIAL_INPUT_WIDTH +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        setPillGroupWidth(contentRect.width - widthOffset);\n      },\n      [widthOffset]\n    )\n  );\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      // When density changes, set hidden index to null so that pills are in their\n      // readonly state before they are measured.\n      setFirstHiddenIndex(null);\n    },\n    [density]\n  );\n\n  // useLayoutEffect because of potential layout change\n  // We want to do that before paint to avoid layout jumps\n  useIsomorphicLayoutEffect(\n    () => {\n      if (expanded) {\n        setFirstHiddenIndex(null);\n      } else if (pillGroupWidth != null) {\n        setFirstHiddenIndex(\n          calcFirstHiddenIndex({\n            containerWidth: pillGroupWidth,\n            pillWidths: Object.values(pillsRef.current).filter(\n              Boolean\n            ) as number[],\n          })\n        );\n      }\n    },\n    // Additional dependency on selectedItems is for the controlled version\n    [expanded, pillGroupWidth, selectedItems]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (expanded && inputRulerRef.current) {\n      const newInputWidth = inputRulerRef.current.scrollWidth;\n      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));\n    }\n  }, [expanded, pillGroupWidth, value]);\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n    // Call keydown again if the initail event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n    }\n\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.setFocused(false);\n      helpers.cancelBlur();\n    }\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const mergedInputProps = deepmerge(\n    {\n      inputProps: {\n        style: {\n          width: inputWidth,\n          minWidth: inputWidth,\n        },\n        \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n        \"aria-activedescendant\":\n          highlightedIndex && highlightedIndex >= 0\n            ? `${id}-pill-${highlightedIndex}`\n            : undefined,\n      },\n    },\n    InputProps\n  );\n\n  const {\n    accessibleText: expandButtonAccessibleText,\n    ...restExpandButtonProps\n  } = ExpandButtonProps;\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: focused,\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      id={id}\n      onClick={onClick}\n      ref={useForkRef(ref, containerRef)}\n    >\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div className={withBaseName(\"pillGroup\")}>\n        {selectedItems.map((item, index) => {\n          const label = itemToString(item);\n\n          return (\n            <InputPill\n              active={activeIndices.indexOf(index) !== -1}\n              disabled={disabled}\n              hidden={showExpandButton && index >= firstHiddenIndex}\n              highlighted={index === highlightedIndex}\n              id={`${id}-pill-${index}`}\n              index={index}\n              key={`${index}-${label}`}\n              label={label}\n              lastVisible={\n                !showExpandButton && index === selectedItems.length - 1\n              }\n              onDelete={expanded ? onRemoveItem : undefined}\n              pillsRef={pillsRef}\n            />\n          );\n        })}\n        <Button\n          aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n            .filter(Boolean)\n            .join(\" \")}\n          className={clsx(withBaseName(\"expandButton\"), {\n            [withBaseName(\"hidden\")]: !showExpandButton,\n          })}\n          disabled={disabled}\n          id={expandButtonId}\n          onBlur={onBlur}\n          onClick={handleExpand}\n          onFocus={onFocus}\n          onKeyDown={handleExpandButtonKeyDown}\n          ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n          variant=\"secondary\"\n          {...restExpandButtonProps}\n        >\n          <OverflowMenuIcon\n            aria-label={\n              expandButtonAccessibleText === undefined\n                ? \"expand edit\"\n                : expandButtonAccessibleText\n            }\n          />\n        </Button>\n        <Input\n          {...mergedInputProps}\n          className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n            [withBaseName(\"hidden\")]: showExpandButton,\n          })}\n          disabled={disabled}\n          id={inputId}\n          // TODO: Use multi line input when available\n          // multiline\n          onBlur={onInputBlur}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onKeyDown={onKeyDown}\n          onKeyUp={handleInputKeyUp}\n          onSelect={onInputSelect}\n          renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n          value={value}\n          ref={inputRef}\n        />\n      </div>\n      <Button\n        className={clsx(withBaseName(\"clearButton\"), {\n          [withBaseName(\"hidden\")]: !expanded || selectedItems.length === 0,\n        })}\n        disabled={disabled}\n        id={clearButtonId}\n        onBlur={onBlur}\n        onClick={onClear}\n        onFocus={handleClearButtonFocus}\n        ref={clearButtonRef}\n        variant=\"secondary\"\n        data-testid=\"clear-button\"\n      >\n        <CloseIcon aria-label=\"clear input\" />\n      </Button>\n    </div>\n  );\n}) as <Item>(\n  p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","InputProps","tokenizedInputCss","Input"],"mappings":"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"}
+{"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  useDensity,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactElement,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport type {\n  TokenizedInputHelpers,\n  TokenizedInputState,\n} from \"./useTokenizedInput\";\n\nimport tokenizedInputCss from \"./TokenizedInput.css\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n  extends Partial<TokenizedInputState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  InputProps?: Pick<InputProps, \"aria-describedby\" | \"inputProps\">;\n  disabled?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  helpers: TokenizedInputHelpers<Item>;\n  inputRef?: Ref<HTMLInputElement>;\n  itemToString?: ItemToString<Item>;\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onRemoveItem?: RemoveItemHandler;\n  onInputBlur?: FocusEventHandler<HTMLInputElement>;\n  onInputFocus?: FocusEventHandler<HTMLInputElement>;\n  onInputChange?: ChangeEventHandler<HTMLInputElement>;\n  onInputSelect?: ReactEventHandler<HTMLInputElement>;\n  onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nfunction hasHelpers<Item>(helpers: TokenizedInputHelpers<Item>) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (helpers == null) {\n      console.warn(\n        'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".',\n      );\n    }\n  }\n  return helpers != null;\n}\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n  props: TokenizedInputBaseProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    InputProps = {},\n    ExpandButtonProps = {},\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    focused,\n    expanded,\n    disabled,\n    helpers,\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    onClear,\n    onClick,\n    inputRef,\n    itemToString = defaultItemToString,\n    id: idProp,\n    expandButtonRef: expandButtonRefProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n\n  const density = useDensity();\n\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  // TODO: Use proper machanism to get variable values from theme in React. Something like below\n  // getComputedStyle(document.documentElement)\n  // .getPropertyValue('--my-variable-name'); // #999999\n  const pillGroupPadding = 16;\n  const lastVisiblePillMargin = 4;\n\n  const pillsRef = useRef<{ [index: number]: number | undefined }>({});\n  const inputRulerRef = useRef<HTMLSpanElement | null>(null);\n  const keydownExpandButton = useRef(false);\n\n  const [expandButtonRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const widthOffset =\n    pillGroupPadding +\n    INITIAL_INPUT_WIDTH +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        setPillGroupWidth(contentRect.width - widthOffset);\n      },\n      [widthOffset],\n    ),\n  );\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      // When density changes, set hidden index to null so that pills are in their\n      // readonly state before they are measured.\n      setFirstHiddenIndex(null);\n    },\n    [density],\n  );\n\n  // useLayoutEffect because of potential layout change\n  // We want to do that before paint to avoid layout jumps\n  useIsomorphicLayoutEffect(\n    () => {\n      if (expanded) {\n        setFirstHiddenIndex(null);\n      } else if (pillGroupWidth != null) {\n        setFirstHiddenIndex(\n          calcFirstHiddenIndex({\n            containerWidth: pillGroupWidth,\n            pillWidths: Object.values(pillsRef.current).filter(\n              Boolean,\n            ) as number[],\n          }),\n        );\n      }\n    },\n    // Additional dependency on selectedItems is for the controlled version\n    [expanded, pillGroupWidth, selectedItems],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (expanded && inputRulerRef.current) {\n      const newInputWidth = inputRulerRef.current.scrollWidth;\n      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));\n    }\n  }, [expanded, pillGroupWidth, value]);\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n    // Call keydown again if the initail event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n    }\n\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.setFocused(false);\n      helpers.cancelBlur();\n    }\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`,\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const mergedInputProps = deepmerge(\n    {\n      inputProps: {\n        style: {\n          width: inputWidth,\n          minWidth: inputWidth,\n        },\n        \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n        \"aria-activedescendant\":\n          highlightedIndex && highlightedIndex >= 0\n            ? `${id}-pill-${highlightedIndex}`\n            : undefined,\n      },\n    },\n    InputProps,\n  );\n\n  const {\n    accessibleText: expandButtonAccessibleText,\n    ...restExpandButtonProps\n  } = ExpandButtonProps;\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: focused,\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className,\n      )}\n      id={id}\n      onClick={onClick}\n      ref={useForkRef(ref, containerRef)}\n    >\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div className={withBaseName(\"pillGroup\")}>\n        {selectedItems.map((item, index) => {\n          const label = itemToString(item);\n\n          return (\n            <InputPill\n              active={activeIndices.indexOf(index) !== -1}\n              disabled={disabled}\n              hidden={showExpandButton && index >= firstHiddenIndex}\n              highlighted={index === highlightedIndex}\n              id={`${id}-pill-${index}`}\n              index={index}\n              key={`${index}-${label}`}\n              label={label}\n              lastVisible={\n                !showExpandButton && index === selectedItems.length - 1\n              }\n              onDelete={expanded ? onRemoveItem : undefined}\n              pillsRef={pillsRef}\n            />\n          );\n        })}\n        <Button\n          aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n            .filter(Boolean)\n            .join(\" \")}\n          className={clsx(withBaseName(\"expandButton\"), {\n            [withBaseName(\"hidden\")]: !showExpandButton,\n          })}\n          disabled={disabled}\n          id={expandButtonId}\n          onBlur={onBlur}\n          onClick={handleExpand}\n          onFocus={onFocus}\n          onKeyDown={handleExpandButtonKeyDown}\n          ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n          variant=\"secondary\"\n          {...restExpandButtonProps}\n        >\n          <OverflowMenuIcon\n            aria-label={\n              expandButtonAccessibleText === undefined\n                ? \"expand edit\"\n                : expandButtonAccessibleText\n            }\n          />\n        </Button>\n        <Input\n          {...mergedInputProps}\n          className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n            [withBaseName(\"hidden\")]: showExpandButton,\n          })}\n          disabled={disabled}\n          id={inputId}\n          // TODO: Use multi line input when available\n          // multiline\n          onBlur={onInputBlur}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onKeyDown={onKeyDown}\n          onKeyUp={handleInputKeyUp}\n          onSelect={onInputSelect}\n          renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n          value={value}\n          ref={inputRef}\n        />\n      </div>\n      <Button\n        className={clsx(withBaseName(\"clearButton\"), {\n          [withBaseName(\"hidden\")]: !expanded || selectedItems.length === 0,\n        })}\n        disabled={disabled}\n        id={clearButtonId}\n        onBlur={onBlur}\n        onClick={onClear}\n        onFocus={handleClearButtonFocus}\n        ref={clearButtonRef}\n        variant=\"secondary\"\n        data-testid=\"clear-button\"\n      >\n        <CloseIcon aria-label=\"clear input\" />\n      </Button>\n    </div>\n  );\n}) as <Item>(\n  p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","tokenizedInputCss","Input"],"mappings":"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"}

package/dist-es/tokenized-input/internal/InputPill.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
+import { CloseIcon } from '@salt-ds/icons';
 import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
-import { makePrefixer, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
 import { getWidth } from './useWidth.js';
-import { CloseIcon } from '@salt-ds/icons';
 
 const withBaseName = makePrefixer("saltInputPill");
 const InputPill = memo(function InputPill2(props) {

package/dist-es/tokenized-input/internal/InputPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { memo, MutableRefObject, useRef } from \"react\";\nimport {\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n  Pill,\n  PillProps,\n} from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<Record<number, number | undefined>>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Pill label.\n   */\n  label?: string;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    label,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLButtonElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className\n      )}\n      disabled={disabled}\n      tabIndex={-1}\n      onClick={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      {...restProps}\n    >\n      <span className={withBaseName(\"label\")}>{label}</span>\n      {isRemovable && <CloseIcon />}\n    </Pill>\n  );\n});\n"],"names":["InputPill"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAiC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACtC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEJ,GAAG,SAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAI,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7B,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import {\n  Pill,\n  type PillProps,\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type MutableRefObject, memo, useRef } from \"react\";\nimport { getWidth } from \"./useWidth\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<Record<number, number | undefined>>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Pill label.\n   */\n  label?: string;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    label,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLButtonElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index],\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className,\n      )}\n      disabled={disabled}\n      tabIndex={-1}\n      onClick={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      {...restProps}\n    >\n      <span className={withBaseName(\"label\")}>{label}</span>\n      {isRemovable && <CloseIcon />}\n    </Pill>\n  );\n});\n"],"names":["InputPill"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAiC1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA,CAAA;AAIpC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,CAAA,GAAS,QAAS,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAAA,KAChD;AAAA,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,QAAQ,KAAS,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAU,IAAA,WAAA;AAAA,QACxC,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,QACnC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,CAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACtC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEJ,GAAG,SAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAI,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC7B,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tokenized-input/internal/InputRuler.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { makePrefixer } from '@salt-ds/core';
-import css_248z from './InputRuler.css.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import css_248z from './InputRuler.css.js';
 
 const withBaseName = makePrefixer("saltInputRuler");
 const InputRuler = forwardRef(function InputRuler2(props, ref) {

package/dist-es/tokenized-input/internal/InputRuler.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputRuler.js","sources":["../src/tokenized-input/internal/InputRuler.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, InputHTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport inputRuler from \"./InputRuler.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltInputRuler\");\n\n/**\n * This hidden component is used to wrap a copy of an input value\n * so that we can use it to determine the input width dynamically\n */\nexport const InputRuler = forwardRef(function InputRuler(\n  props: { value: InputHTMLAttributes<HTMLInputElement>[\"value\"] },\n  ref: ForwardedRef<HTMLSpanElement>\n) {\n  const { value } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input-ruler\",\n    css: inputRuler,\n    window: targetWindow,\n  });\n\n  return (\n    <span className={withBaseName()} ref={ref}>\n      {value}\n    </span>\n  );\n});\n"],"names":["InputRuler","inputRuler"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA,CAAW,SAASA,WAAAA,CAC5C,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,YAAa,EAAA;AAAA,IAAG,GAAA;AAAA,IAC9B,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"InputRuler.js","sources":["../src/tokenized-input/internal/InputRuler.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ForwardedRef, type InputHTMLAttributes, forwardRef } from \"react\";\nimport inputRuler from \"./InputRuler.css\";\n\nconst withBaseName = makePrefixer(\"saltInputRuler\");\n\n/**\n * This hidden component is used to wrap a copy of an input value\n * so that we can use it to determine the input width dynamically\n */\nexport const InputRuler = forwardRef(function InputRuler(\n  props: { value: InputHTMLAttributes<HTMLInputElement>[\"value\"] },\n  ref: ForwardedRef<HTMLSpanElement>,\n) {\n  const { value } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input-ruler\",\n    css: inputRuler,\n    window: targetWindow,\n  });\n\n  return (\n    <span className={withBaseName()} ref={ref}>\n      {value}\n    </span>\n  );\n});\n"],"names":["InputRuler","inputRuler"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAa,GAAA,UAAA,CAAW,SAASA,WAAAA,CAC5C,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAElB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,YAAa,EAAA;AAAA,IAAG,GAAA;AAAA,IAC9B,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/tokenized-input/internal/defaultItemToString.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultItemToString.js","sources":["../src/tokenized-input/internal/defaultItemToString.ts"],"sourcesContent":["import { isPlainObject } from \"./isPlainObject\";\n\nexport const defaultItemToString = (item: any) => {\n  if (!isPlainObject(item)) {\n    return String(item);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(item, \"label\")) {\n    return String(item.label);\n  }\n\n  if (process.env.NODE_ENV !== \"production\") {\n    console.warn(\n      [\n        \"itemToString: you've likely forgotten to set the label prop on the item object.\",\n        \"You can also provide your own `itemToString` implementation.\",\n      ].join(\"\\n\")\n    );\n  }\n\n  return \"\";\n};\n"],"names":[],"mappings":";;AAEa,MAAA,mBAAA,GAAsB,CAAC,IAAc,KAAA;AAChD,EAAI,IAAA,CAAC,aAAc,CAAA,IAAI,CAAG,EAAA;AACxB,IAAA,OAAO,OAAO,IAAI,CAAA,CAAA;AAAA,GACpB;AAEA,EAAA,IAAI,OAAO,SAAU,CAAA,cAAA,CAAe,IAAK,CAAA,IAAA,EAAM,OAAO,CAAG,EAAA;AACvD,IAAO,OAAA,MAAA,CAAO,KAAK,KAAK,CAAA,CAAA;AAAA,GAC1B;AAEA,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,QACE,iFAAA;AAAA,QACA,8DAAA;AAAA,OACF,CAAE,KAAK,IAAI,CAAA;AAAA,KACb,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,EAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"defaultItemToString.js","sources":["../src/tokenized-input/internal/defaultItemToString.ts"],"sourcesContent":["import { isPlainObject } from \"./isPlainObject\";\n\nexport const defaultItemToString = (item: any) => {\n  if (!isPlainObject(item)) {\n    return String(item);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(item, \"label\")) {\n    return String(item.label);\n  }\n\n  if (process.env.NODE_ENV !== \"production\") {\n    console.warn(\n      [\n        \"itemToString: you've likely forgotten to set the label prop on the item object.\",\n        \"You can also provide your own `itemToString` implementation.\",\n      ].join(\"\\n\"),\n    );\n  }\n\n  return \"\";\n};\n"],"names":[],"mappings":";;AAEa,MAAA,mBAAA,GAAsB,CAAC,IAAc,KAAA;AAChD,EAAI,IAAA,CAAC,aAAc,CAAA,IAAI,CAAG,EAAA;AACxB,IAAA,OAAO,OAAO,IAAI,CAAA,CAAA;AAAA,GACpB;AAEA,EAAA,IAAI,OAAO,SAAU,CAAA,cAAA,CAAe,IAAK,CAAA,IAAA,EAAM,OAAO,CAAG,EAAA;AACvD,IAAO,OAAA,MAAA,CAAO,KAAK,KAAK,CAAA,CAAA;AAAA,GAC1B;AAEA,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,QACE,iFAAA;AAAA,QACA,8DAAA;AAAA,OACF,CAAE,KAAK,IAAI,CAAA;AAAA,KACb,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,EAAA,CAAA;AACT;;;;"}