@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.28

package/dist-es/option/OptionGroup.css.js.map

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

package/dist-es/option/OptionGroup.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './OptionGroup.css.js';
+
+const withBaseName = makePrefixer("saltOptionGroup");
+const OptionGroup = forwardRef(
+  function OptionGroup2(props, ref) {
+    const { className, children, label, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-option-group",
+      css: css_248z,
+      window: targetWindow
+    });
+    const labelId = useId();
+    return /* @__PURE__ */ jsxs("div", {
+      "aria-labelledby": labelId,
+      className: clsx(withBaseName(), className),
+      role: "group",
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          "aria-hidden": true,
+          className: withBaseName("label"),
+          id: labelId,
+          children: label
+        }),
+        children
+      ]
+    });
+  }
+);
+
+export { OptionGroup };
+//# sourceMappingURL=OptionGroup.js.map

package/dist-es/option/OptionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGroup.js","sources":["../src/option/OptionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionGroupCss from \"./OptionGroup.css\";\n\nexport interface OptionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The label of the option group.\n   */\n  label?: string;\n  /**\n   * Options to be rendered inside the option group.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOptionGroup\");\nexport const OptionGroup = forwardRef<HTMLDivElement, OptionGroupProps>(\n  function OptionGroup(props, ref) {\n    const { className, children, label, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-option-group\",\n      css: optionGroupCss,\n      window: targetWindow,\n    });\n\n    const labelId = useId();\n\n    return (\n      <div\n        aria-labelledby={labelId}\n        className={clsx(withBaseName(), className)}\n        role=\"group\"\n        ref={ref}\n        {...rest}\n      >\n        <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n          {label}\n        </div>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["OptionGroup","optionGroupCss"],"mappings":";;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAC5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,EAAA,GAAU,MAAS,GAAA,KAAA,CAAA;AAEhD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AAEtB,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,iBAAiB,EAAA,OAAA;AAAA,MACjB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,OAAA;AAAA,MACL,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAG,EAAI,EAAA,OAAA;AAAA,UACpD,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,QAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/option/OptionList.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-popout);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OptionList.css.js.map

package/dist-es/option/OptionList.css.js.map

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

package/dist-es/option/OptionList.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './OptionList.css.js';
+
+const withBaseName = makePrefixer("saltOptionList");
+const OptionList = forwardRef(
+  function OptionList2(props, ref) {
+    const { children, className, collapsed, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-option-list",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      role: "listbox",
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("collapsed")]: collapsed
+        },
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { OptionList };
+//# sourceMappingURL=OptionList.js.map

package/dist-es/option/OptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionList.js","sources":["../src/option/OptionList.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionListCss from \"./OptionList.css\";\n\nexport interface OptionListProps extends ComponentPropsWithoutRef<\"div\"> {\n  collapsed?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltOptionList\");\n\nexport const OptionList = forwardRef<HTMLDivElement, OptionListProps>(\n  function OptionList(props, ref) {\n    const { children, className, collapsed, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-option-list\",\n      css: optionListCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        role=\"listbox\"\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"collapsed\")]: collapsed,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["OptionList","optionListCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,SAAA,EAAA,GAAc,MAAS,GAAA,KAAA,CAAA;AAEpD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,IAAK,EAAA,SAAA;AAAA,MACL,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,SAC/B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1,11 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
-import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { makePrefixer, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
 import { getWidth } from './useWidth.js';
-import { Pill } from '../../pill/Pill.js';
-import '../../pill/ClosablePill.js';
-import '../../pill/SelectablePill.js';
+import { CloseIcon } from '@salt-ds/icons';
 
 const withBaseName = makePrefixer("saltInputPill");
 const InputPill = memo(function InputPill2(props) {
@@ -16,10 +14,10 @@ const InputPill = memo(function InputPill2(props) {
     hidden,
     highlighted,
     index,
+    label,
     lastVisible,
     onDelete,
     pillsRef,
-    tabIndex: tabIndexProp,
     ...restProps
   } = props;
   const ref = useRef(null);
@@ -38,7 +36,7 @@ const InputPill = memo(function InputPill2(props) {
   const handleDelete = () => {
     onDelete == null ? void 0 : onDelete(index);
   };
-  return /* @__PURE__ */ jsx(Pill, {
+  return /* @__PURE__ */ jsxs(Pill, {
     className: clsx(
       withBaseName(),
       {
@@ -49,12 +47,18 @@ const InputPill = memo(function InputPill2(props) {
       className
     ),
     disabled,
-    onDelete: isRemovable ? handleDelete : void 0,
+    tabIndex: -1,
+    onClick: isRemovable ? handleDelete : void 0,
     ref,
     role: "option",
-    tabIndex: void 0,
-    variant: isRemovable ? "closable" : "basic",
-    ...restProps
+    ...restProps,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: withBaseName("label"),
+        children: label
+      }),
+      isRemovable && /* @__PURE__ */ jsx(CloseIcon, {})
+    ]
   });
 });
 

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 { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { Pill, PillProps } from \"../../pill\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = Omit<\n  PillProps<\"basic\" | \"closable\">,\n  \"variant\" | \"onDelete\" | \"clickable\"\n> & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<{ [index: number]: number | undefined }>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\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    lastVisible,\n    onDelete,\n    pillsRef,\n    tabIndex: tabIndexProp,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLDivElement | 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      onDelete={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      tabIndex={undefined}\n      variant={isRemovable ? \"closable\" : \"basic\"}\n      {...restProps}\n    />\n  );\n});\n"],"names":["InputPill"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAgC1C,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,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACP,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,GAAA,GAAM,OAA8B,IAAI,CAAA,CAAA;AAC9C,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,GAAA,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,QAAA,EAAU,cAAc,YAAe,GAAA,KAAA,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IAEL,QAAU,EAAA,KAAA,CAAA;AAAA,IACV,OAAA,EAAS,cAAc,UAAa,GAAA,OAAA;AAAA,IACnC,GAAG,SAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"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;;;;"}

package/dist-es/tokenized-input-next/TokenizedInputNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Style applied to the root element */\n.saltTokenizedInputNext-container {\n  width: 100%;\n}\n.saltTokenizedInputNext {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);\n  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);\n  --tokenizedInput-border: none;\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--tokenizedInput-background);\n  border: var(--tokenizedInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: 100%;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Style applied on hover */\n.saltTokenizedInputNext:hover {\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--tokenizedInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltTokenizedInputNext:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--tokenizedInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltTokenizedInputNext-primary {\n  --tokenizedInput-background: var(--salt-editable-primary-background);\n  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);\n  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltTokenizedInputNext-secondary {\n  --tokenizedInput-background: var(--salt-editable-secondary-background);\n  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltTokenizedInputNext-error,\n.saltTokenizedInputNext-error:hover {\n  --tokenizedInput-background: var(--salt-status-error-background);\n  --tokenizedInput-background-active: var(--salt-status-error-background);\n  --tokenizedInput-background-hover: var(--salt-status-error-background);\n  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltTokenizedInputNext-warning,\n.saltTokenizedInputNext-warning:hover {\n  --tokenizedInput-background: var(--salt-status-warning-background);\n  --tokenizedInput-background-active: var(--salt-status-warning-background);\n  --tokenizedInput-background-hover: var(--salt-status-warning-background);\n  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltTokenizedInputNext-success,\n.saltTokenizedInputNext-success:hover {\n  --tokenizedInput-background: var(--salt-status-success-background);\n  --tokenizedInput-background-active: var(--salt-status-success-background);\n  --tokenizedInput-background-hover: var(--salt-status-success-background);\n  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltTokenizedInputNext-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  flex-basis: 0;\n  height: var(--salt-text-lineHeight);\n  font: inherit;\n  letter-spacing: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n  min-width: 1px; /* requires a min width to be visible */\n}\n.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {\n  flex-grow: 1;\n  min-width: 4em; /* on expanded, use the same min-width as input*/\n}\n\n/* Style applied to placeholder */\n.saltTokenizedInputNext-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltTokenizedInputNext-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltTokenizedInputNext-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltTokenizedInputNext-focused {\n  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltTokenizedInputNext-readOnly,\n.saltTokenizedInputNext-readOnly:active,\n.saltTokenizedInputNext-readOnly:hover {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltTokenizedInputNext-disabled,\n.saltTokenizedInputNext-disabled:hover,\n.saltTokenizedInputNext-disabled:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltTokenizedInputNext-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltTokenizedInputNext.saltTokenizedInputNext-bordered {\n  --tokenizedInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltTokenizedInputNext-bordered:active,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n.saltTokenizedInputNext-statusAdornment {\n  margin-left: auto;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: auto;\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: 0;\n}\n\n.saltTokenizedInputNext .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {\n  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;\n}\n.saltTokenizedInputNext-hidden {\n  display: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TokenizedInputNext.css.js.map

package/dist-es/tokenized-input-next/TokenizedInputNext.css.js.map

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

package/dist-es/tokenized-input-next/TokenizedInputNext.js

@@ -0,0 +1,240 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useForkRef, StatusAdornment, Button } from '@salt-ds/core';
+import { forwardRef, useRef } from 'react';
+import { useTokenizedInputNext } from './useTokenizedInputNext.js';
+import { clsx } from 'clsx';
+import { InputPill } from './internal/InputPill.js';
+import { CloseIcon, OverflowMenuIcon } from '@salt-ds/icons';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './TokenizedInputNext.css.js';
+
+const withBaseName = makePrefixer("saltTokenizedInputNext");
+const getItemsAriaLabel = (itemCount) => itemCount === 0 ? "no item selected" : `${itemCount} ${itemCount > 1 ? "items" : "item"}`;
+const TokenizedInputNext = forwardRef(function TokenizedInputNext2({
+  textAreaRef: textAreaRefProp,
+  textAreaProps = {},
+  variant = "primary",
+  ...rest
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tokenized-input-next",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    "aria-describedby": textAreaDescribedBy,
+    "aria-labelledby": textAreaLabelledBy,
+    required: textAreaRequired,
+    ...restTextAreaProps
+  } = textAreaProps;
+  const { refs, helpers, inputProps, firstHiddenIndex } = useTokenizedInputNext(rest);
+  const {
+    textAreaRef: textAreaHookRef,
+    pillsRef,
+    clearButtonRef,
+    expandButtonRef,
+    statusAdornmentRef,
+    containerRef: containerHookRef
+  } = refs;
+  const {
+    ExpandButtonProps = {
+      "aria-label": "expand edit"
+    },
+    className,
+    activeIndices = [],
+    selectedItems = [],
+    highlightedIndex,
+    value,
+    expanded,
+    disabled,
+    onBlur,
+    onKeyDown,
+    onRemoveItem,
+    onInputChange,
+    focused,
+    validationStatus,
+    readOnly,
+    onInputFocus,
+    onInputBlur,
+    onClear,
+    onClick,
+    onKeyUp,
+    id: idProp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...restProps
+  } = inputProps;
+  const id = useId(idProp);
+  const inputId = `${id}-input`;
+  const expandButtonId = `${id}-expand-button`;
+  const clearButtonId = `${id}-clear-button`;
+  const keydownExpandButton = useRef(false);
+  const containerRef = useForkRef(ref, containerHookRef);
+  const textAreaRef = useForkRef(textAreaHookRef, textAreaRefProp);
+  const showExpandButton = !expanded && firstHiddenIndex != null;
+  const hasHelpers = (helpers2) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (helpers2 == null) {
+        console.warn(
+          'TokenizedInputNext is used without helpers. You should pass in "helpers" from "useTokenizedInputNext".'
+        );
+      }
+    }
+    return helpers2 != null;
+  };
+  const handleExpandButtonKeyDown = (event) => {
+    const singleChar = event.key.length === 1;
+    const triggerExpand = [
+      "CONTROL",
+      "META",
+      "ENTER",
+      "BACKSPACE",
+      "ARROWDOWN",
+      "ARROWLEFT",
+      "ARROWRIGHT"
+    ].indexOf(event.key.toUpperCase()) !== -1;
+    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      helpers.updateExpanded(event, true);
+      keydownExpandButton.current = true;
+    }
+  };
+  const handleInputKeyUp = (event) => {
+    if (keydownExpandButton.current && "Enter" !== event.key) {
+      keydownExpandButton.current = false;
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    }
+    onKeyUp == null ? void 0 : onKeyUp(event);
+  };
+  const handleExpand = (event) => {
+    event.stopPropagation();
+    if (hasHelpers(helpers)) {
+      helpers.updateExpanded(event, true);
+    }
+  };
+  const handleClearButtonFocus = (event) => {
+    event.stopPropagation();
+  };
+  const selectedItemIds = selectedItems.map(
+    (_, index) => `${id}-pill-${index}`
+  );
+  const inputAriaLabelledBy = disabled ? [ariaLabelledBy, inputId, ...selectedItemIds] : [ariaLabelledBy, inputId];
+  const expandedWithItems = expanded && !showExpandButton && selectedItems.length > 0;
+  const { "aria-label": expandButtonAccessibleText, ...restExpandButtonProps } = ExpandButtonProps;
+  return /* @__PURE__ */ jsxs("div", {
+    className: withBaseName("container"),
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        "aria-owns": selectedItemIds.join(" "),
+        className: withBaseName("hidden"),
+        role: "listbox"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: clsx(
+          withBaseName(),
+          withBaseName(variant),
+          {
+            [withBaseName("expanded")]: expanded,
+            [withBaseName("focused")]: !disabled && focused,
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly,
+            [withBaseName(validationStatus)]: validationStatus
+          },
+          className
+        ),
+        ref: containerRef,
+        onClick,
+        tabIndex: -1,
+        ...restProps,
+        children: [
+          selectedItems.length > 0 && selectedItems.map((item, index) => {
+            const label = String(item);
+            return /* @__PURE__ */ jsx(InputPill, {
+              disabled,
+              hidden: showExpandButton && index >= firstHiddenIndex,
+              highlighted: index === highlightedIndex || activeIndices.indexOf(index) !== -1,
+              id: `${id}-pill-${index}`,
+              index,
+              label,
+              onClose: expanded && !readOnly ? (event) => onRemoveItem == null ? void 0 : onRemoveItem(event, index) : void 0,
+              pillsRef
+            }, `${index}-${label}`);
+          }),
+          /* @__PURE__ */ jsx("textarea", {
+            "aria-labelledby": clsx(inputAriaLabelledBy, textAreaLabelledBy),
+            "aria-describedby": clsx(ariaDescribedBy, textAreaDescribedBy),
+            "aria-label": clsx(ariaLabel, getItemsAriaLabel(selectedItems.length)),
+            "aria-activedescendant": highlightedIndex && highlightedIndex >= 0 ? `${id}-pill-${highlightedIndex}` : void 0,
+            disabled,
+            id: inputId,
+            readOnly,
+            ref: textAreaRef,
+            required: textAreaRequired,
+            rows: 1,
+            tabIndex: disabled ? -1 : 0,
+            value,
+            className: clsx(withBaseName("textarea"), textAreaProps == null ? void 0 : textAreaProps.className),
+            onChange: onInputChange,
+            onBlur: onInputBlur,
+            onFocus: !disabled ? onInputFocus : void 0,
+            onKeyDown,
+            ...restTextAreaProps
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: withBaseName("endAdornmentContainer"),
+            children: [
+              !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
+                className: withBaseName("statusAdornment"),
+                ref: statusAdornmentRef,
+                status: validationStatus
+              }),
+              expandedWithItems && !readOnly && /* @__PURE__ */ jsx(Button, {
+                className: withBaseName("endAdornment"),
+                disabled,
+                id: clearButtonId,
+                onBlur,
+                onClick: onClear,
+                onFocus: handleClearButtonFocus,
+                ref: clearButtonRef,
+                variant: "secondary",
+                "data-testid": "clear-button",
+                "aria-label": "clear input",
+                children: /* @__PURE__ */ jsx(CloseIcon, {
+                  "aria-hidden": true
+                })
+              }),
+              showExpandButton && /* @__PURE__ */ jsx(Button, {
+                className: withBaseName("endAdornment"),
+                "aria-label": expandButtonAccessibleText,
+                "aria-labelledby": clsx(ariaLabelledBy, inputId, expandButtonId),
+                disabled,
+                id: expandButtonId,
+                onBlur,
+                onClick: handleExpand,
+                onKeyDown: handleExpandButtonKeyDown,
+                onKeyUp: handleInputKeyUp,
+                ref: expandButtonRef,
+                variant: "secondary",
+                "data-testid": "expand-button",
+                ...restExpandButtonProps,
+                children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: withBaseName("activationIndicator")
+          })
+        ]
+      })
+    ]
+  });
+});
+
+export { TokenizedInputNext };
+//# sourceMappingURL=TokenizedInputNext.js.map

package/dist-es/tokenized-input-next/TokenizedInputNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedInputNext.js","sources":["../src/tokenized-input-next/TokenizedInputNext.tsx"],"sourcesContent":["import {\n  AdornmentValidationStatus,\n  Button,\n  ButtonProps,\n  makePrefixer,\n  NecessityType,\n  StatusAdornment,\n  useForkRef,\n  useId,\n  ValidationStatus,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  KeyboardEventHandler,\n  ReactEventHandler,\n  Ref,\n  SyntheticEvent,\n  TextareaHTMLAttributes,\n  useRef,\n} from \"react\";\nimport {\n  TokenizedInputNextHelpers,\n  TokenizedInputNextState,\n  useTokenizedInputNext,\n} from \"./useTokenizedInputNext\";\nimport { clsx } from \"clsx\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport tokenizedInputCss from \"./TokenizedInputNext.css\";\n\ntype ChangeHandler<Item> = (\n  event: SyntheticEvent,\n  selectedItems: Item[] | undefined\n) => void;\n\ntype ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { \"aria-label\"?: string };\n\nexport interface TokenizedInputNextProps<Item>\n  extends Partial<TokenizedInputNextState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  disabled?: boolean;\n  focused?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  onRemoveItem?: (event: SyntheticEvent, index: number) => void;\n  onInputBlur?: FocusEventHandler<HTMLTextAreaElement>;\n  onInputFocus?: FocusEventHandler<HTMLTextAreaElement>;\n  onInputChange?: ChangeEventHandler<HTMLTextAreaElement>;\n  onClick?: ReactEventHandler;\n  onClear?: ReactEventHandler;\n  delimiters?: string[];\n  disableAddOnBlur?: boolean;\n  defaultSelected?: Item[];\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: ReactEventHandler;\n  onExpand?: ReactEventHandler;\n\n  /// from input\n  /**\n   * Validation status.\n   */\n  validationStatus?: Omit<ValidationStatus, \"info\">;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  necessity?: NecessityType;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltTokenizedInputNext\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nexport const TokenizedInputNext = forwardRef(function TokenizedInputNext<Item>(\n  {\n    textAreaRef: textAreaRefProp,\n    textAreaProps = {},\n    variant = \"primary\",\n    ...rest\n  }: TokenizedInputNextProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input-next\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n  const {\n    \"aria-describedby\": textAreaDescribedBy,\n    \"aria-labelledby\": textAreaLabelledBy,\n    required: textAreaRequired,\n    ...restTextAreaProps\n  } = textAreaProps;\n\n  const { refs, helpers, inputProps, firstHiddenIndex } =\n    useTokenizedInputNext(rest);\n\n  const {\n    textAreaRef: textAreaHookRef,\n    pillsRef,\n    clearButtonRef,\n    expandButtonRef,\n    statusAdornmentRef,\n    containerRef: containerHookRef,\n  } = refs;\n\n  const {\n    ExpandButtonProps = {\n      \"aria-label\": \"expand edit\",\n    },\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    expanded,\n    disabled,\n    onBlur,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    focused,\n    validationStatus,\n    readOnly,\n    onInputFocus,\n    onInputBlur,\n    onClear,\n    onClick,\n    onKeyUp,\n    id: idProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  } = inputProps;\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  const keydownExpandButton = useRef(false);\n  const containerRef = useForkRef(ref, containerHookRef);\n  const textAreaRef = useForkRef(textAreaHookRef, textAreaRefProp);\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const hasHelpers = (helpers: TokenizedInputNextHelpers<Item>) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (helpers == null) {\n        console.warn(\n          'TokenizedInputNext is used without helpers. You should pass in \"helpers\" from \"useTokenizedInputNext\".'\n        );\n      }\n    }\n    return helpers != null;\n  };\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(event, true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (\n    event: KeyboardEvent<HTMLButtonElement | HTMLTextAreaElement>\n  ) => {\n    // Call keydown again if the initial event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n      onKeyDown?.(event);\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(event, true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\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 expandedWithItems =\n    expanded && !showExpandButton && selectedItems.length > 0;\n  const { \"aria-label\": expandButtonAccessibleText, ...restExpandButtonProps } =\n    ExpandButtonProps;\n\n  return (\n    <div className={withBaseName(\"container\")}>\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"expanded\")]: expanded,\n            [withBaseName(\"focused\")]: !disabled && focused,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(validationStatus as string)]: validationStatus,\n          },\n          className\n        )}\n        ref={containerRef}\n        onClick={onClick}\n        // Tab index allows the div to be found as related target and prevents it closing when a click in happens\n        tabIndex={-1}\n        {...restProps}\n      >\n        {selectedItems.length > 0 &&\n          selectedItems.map((item, index) => {\n            const label = String(item);\n            return (\n              <InputPill\n                disabled={disabled}\n                hidden={showExpandButton && index >= firstHiddenIndex}\n                highlighted={\n                  index === highlightedIndex ||\n                  activeIndices.indexOf(index) !== -1\n                }\n                id={`${id}-pill-${index}`}\n                index={index}\n                key={`${index}-${label}`}\n                label={label}\n                onClose={\n                  expanded && !readOnly\n                    ? (event) => onRemoveItem?.(event, index)\n                    : undefined\n                }\n                pillsRef={pillsRef}\n              />\n            );\n          })}\n        <textarea\n          aria-labelledby={clsx(inputAriaLabelledBy, textAreaLabelledBy)}\n          aria-describedby={clsx(ariaDescribedBy, textAreaDescribedBy)}\n          aria-label={clsx(ariaLabel, getItemsAriaLabel(selectedItems.length))}\n          aria-activedescendant={\n            highlightedIndex && highlightedIndex >= 0\n              ? `${id}-pill-${highlightedIndex}`\n              : undefined\n          }\n          disabled={disabled}\n          id={inputId}\n          readOnly={readOnly}\n          ref={textAreaRef}\n          required={textAreaRequired}\n          rows={1}\n          tabIndex={disabled ? -1 : 0}\n          value={value}\n          className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n          onChange={onInputChange}\n          onBlur={onInputBlur}\n          onFocus={!disabled ? onInputFocus : undefined}\n          onKeyDown={onKeyDown}\n          {...restTextAreaProps}\n        />\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {!disabled && !readOnly && validationStatus && (\n            <StatusAdornment\n              className={withBaseName(\"statusAdornment\")}\n              ref={statusAdornmentRef}\n              status={validationStatus as AdornmentValidationStatus}\n            />\n          )}\n          {expandedWithItems && !readOnly && (\n            <Button\n              className={withBaseName(\"endAdornment\")}\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              aria-label=\"clear input\"\n            >\n              <CloseIcon aria-hidden />\n            </Button>\n          )}\n          {showExpandButton && (\n            <Button\n              className={withBaseName(\"endAdornment\")}\n              aria-label={expandButtonAccessibleText}\n              aria-labelledby={clsx(ariaLabelledBy, inputId, expandButtonId)}\n              disabled={disabled}\n              id={expandButtonId}\n              onBlur={onBlur}\n              onClick={handleExpand}\n              onKeyDown={handleExpandButtonKeyDown}\n              onKeyUp={handleInputKeyUp}\n              ref={expandButtonRef}\n              variant=\"secondary\"\n              data-testid=\"expand-button\"\n              {...restExpandButtonProps}\n            >\n              <OverflowMenuIcon />\n            </Button>\n          )}\n        </div>\n\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    </div>\n  );\n});\n"],"names":["TokenizedInputNext","tokenizedInputCss","helpers"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltInputPill {\n  max-width: 100%;\n  margin: var(--salt-spacing-25) var(--salt-spacing-50);\n  margin-left: 0;\n}\n.saltInputPill-expanded {\n  max-width: calc(100% - (var(--salt-size-base) - var(--salt-spacing-100)));\n}\n.saltInputPill-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n.saltInputPill.saltInputPill:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltInputPill.saltInputPill-pillHighlighted {\n  --saltPill-background: var(--salt-selectable-background-hover);\n}\n\n.saltInputPill.saltInputPill:active {\n  background: var(--salt-actionable-primary-background-active);\n  --saltPill-color: var(--salt-actionable-primary-foreground-active);\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=InputPill.css.js.map

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

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

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

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { memo, useRef, useState } from 'react';
+import { makePrefixer, useIsomorphicLayoutEffect, Tooltip, Pill } from '@salt-ds/core';
+import { getWidth } from './useWidth.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './InputPill.css.js';
+import { CloseIcon } from '@salt-ds/icons';
+
+const withBaseName = makePrefixer("saltInputPill");
+const InputPill = memo(function InputPill2(props) {
+  const {
+    className,
+    hidden,
+    highlighted,
+    index,
+    label,
+    onClose,
+    pillsRef,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-input-pill",
+    css: css_248z,
+    window: targetWindow
+  });
+  const ref = useRef(null);
+  const [isEllipsisActive, setEllipsisActive] = useState(false);
+  const isRemovable = Boolean(onClose);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    const text = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.firstElementChild;
+    if (!isRemovable && pillsRef.current) {
+      pillsRef.current[index] = getWidth(ref.current);
+    }
+    setEllipsisActive((text == null ? void 0 : text.offsetWidth) < (text == null ? void 0 : text.scrollWidth));
+  }, [pillsRef, index, isRemovable]);
+  useIsomorphicLayoutEffect(
+    () => () => {
+      pillsRef.current[index] = void 0;
+    },
+    [pillsRef, index]
+  );
+  const handleClose = (event) => {
+    onClose == null ? void 0 : onClose(event, index);
+  };
+  return /* @__PURE__ */ jsx(Tooltip, {
+    content: label,
+    disabled: !isEllipsisActive,
+    children: /* @__PURE__ */ jsxs(Pill, {
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("pillHighlighted")]: highlighted,
+          [withBaseName("expanded")]: isRemovable,
+          [withBaseName("hidden")]: hidden
+        },
+        className
+      ),
+      tabIndex: -1,
+      onClick: isRemovable ? handleClose : void 0,
+      ref,
+      role: "option",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: withBaseName("label"),
+          children: label
+        }),
+        isRemovable && /* @__PURE__ */ jsx(CloseIcon, {})
+      ]
+    })
+  });
+});
+
+export { InputPill };
+//# sourceMappingURL=InputPill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input-next/internal/InputPill.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  memo,\n  MutableRefObject,\n  SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  Tooltip,\n  useIsomorphicLayoutEffect,\n  Pill,\n  PillProps,\n} from \"@salt-ds/core\";\nimport { getWidth } from \"./useWidth\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport inputPillCss from \"./InputPill.css\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n  /**\n   * A 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   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Pill label.\n   */\n  label?: string;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n\n  /**\n   * Callback when pill is deleted.\n   */\n  onClose?: (event: SyntheticEvent, index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    className,\n    hidden,\n    highlighted,\n    index,\n    label,\n    onClose,\n    pillsRef,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input-pill\",\n    css: inputPillCss,\n    window: targetWindow,\n  });\n\n  const ref = useRef<HTMLButtonElement | null>(null);\n  const [isEllipsisActive, setEllipsisActive] = useState(false);\n  const isRemovable = Boolean(onClose);\n\n  // useIsomorphicLayoutEffect to match the calcFirstHiddenIndex\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    const text = ref?.current?.firstElementChild as HTMLElement;\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n    setEllipsisActive(text?.offsetWidth < text?.scrollWidth);\n  }, [pillsRef, index, isRemovable]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index]\n  );\n\n  const handleClose = (event: SyntheticEvent) => {\n    onClose?.(event, index);\n  };\n  return (\n    <Tooltip content={label} disabled={!isEllipsisActive}>\n      <Pill\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"pillHighlighted\")]: highlighted,\n            [withBaseName(\"expanded\")]: isRemovable,\n            [withBaseName(\"hidden\")]: hidden,\n          },\n          className\n        )}\n        tabIndex={-1}\n        onClick={isRemovable ? handleClose : undefined}\n        ref={ref}\n        role=\"option\"\n        {...rest}\n      >\n        <span className={withBaseName(\"label\")}>{label}</span>\n        {isRemovable && <CloseIcon />}\n      </Pill>\n    </Tooltip>\n  );\n});\n"],"names":["InputPill","inputPillCss"],"mappings":"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"}

package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js

@@ -0,0 +1,18 @@
+function calcFirstHiddenIndex({
+  containerWidth = 0,
+  pillWidths = []
+} = {}) {
+  let totalWidth = 0;
+  let firstHiddenIndex = null;
+  for (let i = 0; i < pillWidths.length; i++) {
+    totalWidth += pillWidths[i];
+    if (totalWidth > containerWidth) {
+      firstHiddenIndex = i;
+      break;
+    }
+  }
+  return firstHiddenIndex;
+}
+
+export { calcFirstHiddenIndex };
+//# sourceMappingURL=calcFirstHiddenIndex.js.map

package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calcFirstHiddenIndex.js","sources":["../src/tokenized-input-next/internal/calcFirstHiddenIndex.ts"],"sourcesContent":["export function calcFirstHiddenIndex({\n  containerWidth = 0,\n  pillWidths = [],\n}: { containerWidth?: number; pillWidths?: number[] } = {}) {\n  let totalWidth = 0;\n  let firstHiddenIndex: null | number = null;\n\n  for (let i = 0; i < pillWidths.length; i++) {\n    totalWidth += pillWidths[i];\n\n    if (totalWidth > containerWidth) {\n      firstHiddenIndex = i;\n      break;\n    }\n  }\n\n  return firstHiddenIndex;\n}\n"],"names":[],"mappings":"AAAO,SAAS,oBAAqB,CAAA;AAAA,EACnC,cAAiB,GAAA,CAAA;AAAA,EACjB,aAAa,EAAC;AAChB,CAAA,GAAwD,EAAI,EAAA;AAC1D,EAAA,IAAI,UAAa,GAAA,CAAA,CAAA;AACjB,EAAA,IAAI,gBAAkC,GAAA,IAAA,CAAA;AAEtC,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAK,EAAA,EAAA;AAC1C,IAAA,UAAA,IAAc,UAAW,CAAA,CAAA,CAAA,CAAA;AAEzB,IAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,MAAmB,gBAAA,GAAA,CAAA,CAAA;AACnB,MAAA,MAAA;AAAA,KACF;AAAA,GACF;AAEA,EAAO,OAAA,gBAAA,CAAA;AACT;;;;"}