@salt-ds/lab 1.0.0-alpha.54 → 1.0.0-alpha.55

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
@@ -131,15 +129,18 @@ const TokenizedInputNext = react.forwardRef(function TokenizedInputNext2({
   const inputAriaLabelledBy = disabled ? [ariaLabelledBy, inputId, ...selectedItemIds] : [ariaLabelledBy, inputId];
   const expandedWithItems = expanded && !showExpandButton && selectedItems.length > 0;
   const { "aria-label": expandButtonAccessibleText, ...restExpandButtonProps } = ExpandButtonProps;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: withBaseName("container"),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("container"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
         "aria-owns": selectedItemIds.join(" "),
         className: withBaseName("hidden"),
         role: "listbox"
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
         className: clsx.clsx(
           withBaseName(),
           withBaseName(variant),
@@ -159,46 +160,56 @@ const TokenizedInputNext = react.forwardRef(function TokenizedInputNext2({
         children: [
           selectedItems.length > 0 && selectedItems.map((item, index) => {
             const label = String(item);
-            return /* @__PURE__ */ jsxRuntime.jsx(InputPill.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__ */ jsxRuntime.jsx("textarea", {
-            "aria-labelledby": clsx.clsx(inputAriaLabelledBy, textAreaLabelledBy),
-            "aria-describedby": clsx.clsx(ariaDescribedBy, textAreaDescribedBy),
-            "aria-label": clsx.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.clsx(withBaseName("textarea"), textAreaProps == null ? void 0 : textAreaProps.className),
-            onChange: onInputChange,
-            onBlur: onInputBlur,
-            onFocus: !disabled ? onInputFocus : void 0,
-            onKeyDown,
-            ...restTextAreaProps
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              InputPill.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__ */ jsxRuntime.jsxs("div", {
-            className: withBaseName("endAdornmentContainer"),
-            children: [
-              !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, {
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              "aria-labelledby": clsx.clsx(inputAriaLabelledBy, textAreaLabelledBy),
+              "aria-describedby": clsx.clsx(ariaDescribedBy, textAreaDescribedBy),
+              "aria-label": clsx.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.clsx(withBaseName("textarea"), textAreaProps == null ? void 0 : textAreaProps.className),
+              onChange: onInputChange,
+              onBlur: onInputBlur,
+              onFocus: !disabled ? onInputFocus : void 0,
+              onKeyDown,
+              ...restTextAreaProps
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("endAdornmentContainer"), children: [
+            !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(
+              core.StatusAdornment,
+              {
                 className: withBaseName("statusAdornment"),
                 ref: statusAdornmentRef,
                 status: validationStatus
-              }),
-              expandedWithItems && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+              }
+            ),
+            expandedWithItems && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+              core.Button,
+              {
                 className: withBaseName("endAdornment"),
                 disabled,
                 id: clearButtonId,
@@ -209,11 +220,12 @@ const TokenizedInputNext = react.forwardRef(function TokenizedInputNext2({
                 variant: "secondary",
                 "data-testid": "clear-button",
                 "aria-label": "clear input",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {
-                  "aria-hidden": true
-                })
-              }),
-              showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "aria-hidden": true })
+              }
+            ),
+            showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
+              core.Button,
+              {
                 className: withBaseName("endAdornment"),
                 "aria-label": expandButtonAccessibleText,
                 "aria-labelledby": clsx.clsx(ariaLabelledBy, inputId, expandButtonId),
@@ -228,16 +240,14 @@ const TokenizedInputNext = react.forwardRef(function TokenizedInputNext2({
                 "data-testid": "expand-button",
                 ...restExpandButtonProps,
                 children: /* @__PURE__ */ jsxRuntime.jsx(OverflowIcon, {})
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: withBaseName("activationIndicator")
-          })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("activationIndicator") })
         ]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 });
 
 exports.TokenizedInputNext = TokenizedInputNext;

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

@@ -1 +1 @@
-{"version":3,"file":"TokenizedInputNext.js","sources":["../src/tokenized-input-next/TokenizedInputNext.tsx"],"sourcesContent":["import {\n  type AdornmentValidationStatus,\n  Button,\n  type ButtonProps,\n  type NecessityType,\n  StatusAdornment,\n  type ValidationStatus,\n  makePrefixer,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  type TextareaHTMLAttributes,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport tokenizedInputCss from \"./TokenizedInputNext.css\";\nimport { InputPill } from \"./internal/InputPill\";\nimport {\n  type TokenizedInputNextHelpers,\n  type TokenizedInputNextState,\n  useTokenizedInputNext,\n} from \"./useTokenizedInputNext\";\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  const { OverflowIcon, CloseIcon } = useIcon();\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              <OverflowIcon />\n            </Button>\n          )}\n        </div>\n\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TokenizedInputNext","useWindow","useComponentCssInjection","tokenizedInputCss","useTokenizedInputNext","useIcon","useId","useRef","useForkRef","helpers","jsxs","jsx","clsx","InputPill","StatusAdornment","Button"],"mappings":"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"}
+{"version":3,"file":"TokenizedInputNext.js","sources":["../src/tokenized-input-next/TokenizedInputNext.tsx"],"sourcesContent":["import {\n  type AdornmentValidationStatus,\n  Button,\n  type ButtonProps,\n  type NecessityType,\n  StatusAdornment,\n  type ValidationStatus,\n  makePrefixer,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  type TextareaHTMLAttributes,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport tokenizedInputCss from \"./TokenizedInputNext.css\";\nimport { InputPill } from \"./internal/InputPill\";\nimport {\n  type TokenizedInputNextHelpers,\n  type TokenizedInputNextState,\n  useTokenizedInputNext,\n} from \"./useTokenizedInputNext\";\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  const { OverflowIcon, CloseIcon } = useIcon();\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              <OverflowIcon />\n            </Button>\n          )}\n        </div>\n\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","TokenizedInputNext","useWindow","useComponentCssInjection","tokenizedInputCss","useTokenizedInputNext","useIcon","useId","useRef","useForkRef","helpers","jsxs","jsx","clsx","InputPill","StatusAdornment","Button"],"mappings":"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"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
@@ -50,10 +48,9 @@ const InputPill = react.memo(function InputPill2(props) {
   const handleClose = (event) => {
     onClose == null ? void 0 : onClose(event, index);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
-    content: label,
-    disabled: !isEllipsisActive,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(core.Pill, {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { content: label, disabled: !isEllipsisActive, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Pill,
+    {
       className: clsx.clsx(
         withBaseName(),
         {
@@ -69,14 +66,11 @@ const InputPill = react.memo(function InputPill2(props) {
       role: "option",
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: withBaseName("label"),
-          children: label
-        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("label"), children: label }),
         isRemovable && /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
       ]
-    })
-  });
+    }
+  ) });
 });
 
 exports.InputPill = InputPill;

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

@@ -1 +1 @@
-{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input-next/internal/InputPill.tsx"],"sourcesContent":["import {\n  Pill,\n  type PillProps,\n  Tooltip,\n  makePrefixer,\n  useIcon,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type MutableRefObject,\n  type SyntheticEvent,\n  memo,\n  useRef,\n  useState,\n} from \"react\";\nimport inputPillCss from \"./InputPill.css\";\nimport { getWidth } from \"./useWidth\";\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 { CloseIcon } = useIcon();\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":["makePrefixer","memo","InputPill","useWindow","useComponentCssInjection","inputPillCss","useIcon","useRef","useState","useIsomorphicLayoutEffect","getWidth","jsx","Tooltip","jsxs","Pill","clsx"],"mappings":"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"}
+{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input-next/internal/InputPill.tsx"],"sourcesContent":["import {\n  Pill,\n  type PillProps,\n  Tooltip,\n  makePrefixer,\n  useIcon,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type MutableRefObject,\n  type SyntheticEvent,\n  memo,\n  useRef,\n  useState,\n} from \"react\";\nimport inputPillCss from \"./InputPill.css\";\nimport { getWidth } from \"./useWidth\";\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 { CloseIcon } = useIcon();\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":["makePrefixer","memo","InputPill","useWindow","useComponentCssInjection","inputPillCss","useIcon","useRef","useState","useIsomorphicLayoutEffect","getWidth","Tooltip","jsxs","Pill","clsx","jsx"],"mappings":"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"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function calcFirstHiddenIndex({
   containerWidth = 0,
   pillWidths = []

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

@@ -1 +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;;;;"}
+{"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;AACf,CAAA,GAAwD,EAAI,EAAA;AAC1D,EAAA,IAAI,UAAa,GAAA,CAAA;AACjB,EAAA,IAAI,gBAAkC,GAAA,IAAA;AAEtC,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAK,EAAA,EAAA;AAC1C,IAAA,UAAA,IAAc,WAAW,CAAC,CAAA;AAE1B,IAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,MAAmB,gBAAA,GAAA,CAAA;AACnB,MAAA;AAAA;AACF;AAGF,EAAO,OAAA,gBAAA;AACT;;;;"}

package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
 var react = require('react');
 

package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../src/tokenized-input-next/internal/useResizeObserver.ts"],"sourcesContent":["// TODO: Use resize observer from Tabstrip / Toolbar\n\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type Ref, useEffect, useRef } from \"react\";\n\n/**\n * This monitors the size of a component and calls `onSizeChange` callback\n * every time when size changes.\n */\nexport function useResizeObserver<Element extends HTMLElement>(\n  onSizeChange: (\n    entries: ResizeObserverEntry[],\n    observer?: ResizeObserver,\n  ) => void,\n): Ref<Element> {\n  const ref = useRef<Element>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(onSizeChange);\n    observer.observe(ref.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onSizeChange]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      onSizeChange([\n        {\n          target: ref.current,\n          contentRect: ref.current.getBoundingClientRect(),\n          borderBoxSize: [],\n          contentBoxSize: [],\n          devicePixelContentBoxSize: [],\n        },\n      ]);\n    }\n  }, [onSizeChange]);\n\n  return ref;\n}\n"],"names":["useRef","useEffect","useIsomorphicLayoutEffect"],"mappings":";;;;;;;AASO,SAAS,kBACd,YAIc,EAAA;AACd,EAAM,MAAA,GAAA,GAAMA,aAAgB,IAAI,CAAA,CAAA;AAEhC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,YAAY,CAAA,CAAA;AAChD,IAAS,QAAA,CAAA,OAAA,CAAQ,IAAI,OAAO,CAAA,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,KACtB,CAAA;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAa,YAAA,CAAA;AAAA,QACX;AAAA,UACE,QAAQ,GAAI,CAAA,OAAA;AAAA,UACZ,WAAA,EAAa,GAAI,CAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,UAC/C,eAAe,EAAC;AAAA,UAChB,gBAAgB,EAAC;AAAA,UACjB,2BAA2B,EAAC;AAAA,SAC9B;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAO,OAAA,GAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useResizeObserver.js","sources":["../src/tokenized-input-next/internal/useResizeObserver.ts"],"sourcesContent":["// TODO: Use resize observer from Tabstrip / Toolbar\n\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type Ref, useEffect, useRef } from \"react\";\n\n/**\n * This monitors the size of a component and calls `onSizeChange` callback\n * every time when size changes.\n */\nexport function useResizeObserver<Element extends HTMLElement>(\n  onSizeChange: (\n    entries: ResizeObserverEntry[],\n    observer?: ResizeObserver,\n  ) => void,\n): Ref<Element> {\n  const ref = useRef<Element>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(onSizeChange);\n    observer.observe(ref.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onSizeChange]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      onSizeChange([\n        {\n          target: ref.current,\n          contentRect: ref.current.getBoundingClientRect(),\n          borderBoxSize: [],\n          contentBoxSize: [],\n          devicePixelContentBoxSize: [],\n        },\n      ]);\n    }\n  }, [onSizeChange]);\n\n  return ref;\n}\n"],"names":["useRef","useEffect","useIsomorphicLayoutEffect"],"mappings":";;;;;AASO,SAAS,kBACd,YAIc,EAAA;AACd,EAAM,MAAA,GAAA,GAAMA,aAAgB,IAAI,CAAA;AAEhC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,KAAA,CAAA;AAAA;AAGT,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,YAAY,CAAA;AAChD,IAAS,QAAA,CAAA,OAAA,CAAQ,IAAI,OAAO,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAW,EAAA;AAAA,KACtB;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAa,YAAA,CAAA;AAAA,QACX;AAAA,UACE,QAAQ,GAAI,CAAA,OAAA;AAAA,UACZ,WAAA,EAAa,GAAI,CAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,UAC/C,eAAe,EAAC;AAAA,UAChB,gBAAgB,EAAC;AAAA,UACjB,2BAA2B;AAAC;AAC9B,OACD,CAAA;AAAA;AACH,GACF,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAO,OAAA,GAAA;AACT;;;;"}

package/dist-cjs/tokenized-input-next/internal/useWidth.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
 var react = require('react');
 
-const safeParseFloat = (target) => Number.parseFloat(target != null ? target : "0");
+const safeParseFloat = (target) => Number.parseFloat(target ?? "0");
 const getPadding = (node) => {
   if (node == null) {
     return 0;

package/dist-cjs/tokenized-input-next/internal/useWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWidth.js","sources":["../src/tokenized-input-next/internal/useWidth.ts"],"sourcesContent":["import { type Density, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useState } from \"react\";\n\nconst safeParseFloat = (target?: string) => Number.parseFloat(target ?? \"0\");\n\nexport const getPadding = (node: HTMLElement | null) => {\n  if (node == null) {\n    return 0;\n  }\n  const style = window.getComputedStyle(node);\n  const padding =\n    safeParseFloat(style.paddingLeft) + safeParseFloat(style.paddingRight);\n  return padding;\n};\n\nexport const getWidth = (node: HTMLElement | null) => {\n  if (node == null) {\n    return 0;\n  }\n\n  const style = window.getComputedStyle(node);\n  const margin =\n    safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);\n\n  let dimension: DOMRect;\n\n  if (style.display === \"none\") {\n    const nodeDisplay = node.style.display;\n\n    node.style.display = \"inline-block\";\n    dimension = node.getBoundingClientRect();\n    node.style.display = nodeDisplay;\n  } else {\n    dimension = node.getBoundingClientRect();\n  }\n\n  return dimension.width + margin;\n};\n\n/**\n * This records the width of a component when it's rendered\n */\nexport const useWidth = (\n  density: Density,\n  // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n): [(newNode: any) => void, number] => {\n  const [node, setNode] = useState<HTMLElement | null>(null);\n  const [width, setWidth] = useState<number>(0);\n\n  useIsomorphicLayoutEffect(() => {\n    if (node !== null && density) {\n      setWidth(getWidth(node));\n    }\n  }, [node, density]);\n\n  return [setNode, width];\n};\n"],"names":["useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;;AAGA,MAAM,iBAAiB,CAAC,MAAA,KAAoB,MAAO,CAAA,UAAA,CAAW,0BAAU,GAAG,CAAA,CAAA;AAE9D,MAAA,UAAA,GAAa,CAAC,IAA6B,KAAA;AACtD,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACA,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAC1C,EAAA,MAAM,UACJ,cAAe,CAAA,KAAA,CAAM,WAAW,CAAI,GAAA,cAAA,CAAe,MAAM,YAAY,CAAA,CAAA;AACvE,EAAO,OAAA,OAAA,CAAA;AACT,EAAA;AAEa,MAAA,QAAA,GAAW,CAAC,IAA6B,KAAA;AACpD,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AAEA,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAC1C,EAAA,MAAM,SACJ,cAAe,CAAA,KAAA,CAAM,UAAU,CAAI,GAAA,cAAA,CAAe,MAAM,WAAW,CAAA,CAAA;AAErE,EAAI,IAAA,SAAA,CAAA;AAEJ,EAAI,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC5B,IAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,OAAA,CAAA;AAE/B,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,cAAA,CAAA;AACrB,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA,CAAA;AACvC,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,WAAA,CAAA;AAAA,GAChB,MAAA;AACL,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA,CAAA;AAAA,GACzC;AAEA,EAAA,OAAO,UAAU,KAAQ,GAAA,MAAA,CAAA;AAC3B,EAAA;AAKa,MAAA,QAAA,GAAW,CACtB,OAEqC,KAAA;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAA6B,IAAI,CAAA,CAAA;AACzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAiB,CAAC,CAAA,CAAA;AAE5C,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,IAAA,KAAS,QAAQ,OAAS,EAAA;AAC5B,MAAS,QAAA,CAAA,QAAA,CAAS,IAAI,CAAC,CAAA,CAAA;AAAA,KACzB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,OAAO,CAAC,CAAA,CAAA;AAElB,EAAO,OAAA,CAAC,SAAS,KAAK,CAAA,CAAA;AACxB;;;;;;"}
+{"version":3,"file":"useWidth.js","sources":["../src/tokenized-input-next/internal/useWidth.ts"],"sourcesContent":["import { type Density, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useState } from \"react\";\n\nconst safeParseFloat = (target?: string) => Number.parseFloat(target ?? \"0\");\n\nexport const getPadding = (node: HTMLElement | null) => {\n  if (node == null) {\n    return 0;\n  }\n  const style = window.getComputedStyle(node);\n  const padding =\n    safeParseFloat(style.paddingLeft) + safeParseFloat(style.paddingRight);\n  return padding;\n};\n\nexport const getWidth = (node: HTMLElement | null) => {\n  if (node == null) {\n    return 0;\n  }\n\n  const style = window.getComputedStyle(node);\n  const margin =\n    safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);\n\n  let dimension: DOMRect;\n\n  if (style.display === \"none\") {\n    const nodeDisplay = node.style.display;\n\n    node.style.display = \"inline-block\";\n    dimension = node.getBoundingClientRect();\n    node.style.display = nodeDisplay;\n  } else {\n    dimension = node.getBoundingClientRect();\n  }\n\n  return dimension.width + margin;\n};\n\n/**\n * This records the width of a component when it's rendered\n */\nexport const useWidth = (\n  density: Density,\n  // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n): [(newNode: any) => void, number] => {\n  const [node, setNode] = useState<HTMLElement | null>(null);\n  const [width, setWidth] = useState<number>(0);\n\n  useIsomorphicLayoutEffect(() => {\n    if (node !== null && density) {\n      setWidth(getWidth(node));\n    }\n  }, [node, density]);\n\n  return [setNode, width];\n};\n"],"names":["useState","useIsomorphicLayoutEffect"],"mappings":";;;;;AAGA,MAAM,iBAAiB,CAAC,MAAA,KAAoB,MAAO,CAAA,UAAA,CAAW,UAAU,GAAG,CAAA;AAE9D,MAAA,UAAA,GAAa,CAAC,IAA6B,KAAA;AACtD,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,CAAA;AAAA;AAET,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,IAAI,CAAA;AAC1C,EAAA,MAAM,UACJ,cAAe,CAAA,KAAA,CAAM,WAAW,CAAI,GAAA,cAAA,CAAe,MAAM,YAAY,CAAA;AACvE,EAAO,OAAA,OAAA;AACT;AAEa,MAAA,QAAA,GAAW,CAAC,IAA6B,KAAA;AACpD,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,CAAA;AAAA;AAGT,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,IAAI,CAAA;AAC1C,EAAA,MAAM,SACJ,cAAe,CAAA,KAAA,CAAM,UAAU,CAAI,GAAA,cAAA,CAAe,MAAM,WAAW,CAAA;AAErE,EAAI,IAAA,SAAA;AAEJ,EAAI,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC5B,IAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,OAAA;AAE/B,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,cAAA;AACrB,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA;AACvC,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,WAAA;AAAA,GAChB,MAAA;AACL,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA;AAAA;AAGzC,EAAA,OAAO,UAAU,KAAQ,GAAA,MAAA;AAC3B;AAKa,MAAA,QAAA,GAAW,CACtB,OAEqC,KAAA;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAA6B,IAAI,CAAA;AACzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAiB,CAAC,CAAA;AAE5C,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,IAAA,KAAS,QAAQ,OAAS,EAAA;AAC5B,MAAS,QAAA,CAAA,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA;AACzB,GACC,EAAA,CAAC,IAAM,EAAA,OAAO,CAAC,CAAA;AAElB,EAAO,OAAA,CAAC,SAAS,KAAK,CAAA;AACxB;;;;;;"}

package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
 var copy = require('clipboard-copy');
 var react = require('react');
@@ -10,10 +8,6 @@ var calcFirstHiddenIndex = require('./internal/calcFirstHiddenIndex.js');
 var useResizeObserver = require('./internal/useResizeObserver.js');
 var useWidth = require('./internal/useWidth.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
-
 const getCursorPosition = (inputRef) => {
   if (inputRef.current) {
     const { selectionStart, selectionEnd } = inputRef.current;
@@ -139,6 +133,7 @@ function useTokenizedInputNext(props) {
         );
       }
     },
+    // Additional dependency on selectedItems is for the controlled version
     [expanded, pillGroupWidth, selectedItems]
   );
   const focusInput = react.useCallback(() => {
@@ -363,7 +358,7 @@ function useTokenizedInputNext(props) {
         break;
       case "C": {
         const textToCopy = activeIndices.length > 0 ? activeIndices.map((index) => String(selectedItems[index])).concat(value != null ? String(value).trim() : "").filter(Boolean).join(primaryDelimiter) : highlightedIndex !== void 0 ? String(`${selectedItems[highlightedIndex]},`) : "";
-        copy__default["default"](textToCopy).then((result) => {
+        copy(textToCopy).then((result) => {
           preventBlurOnCopy.current = !supportClipboard;
           return result;
         }).catch((error) => {
@@ -430,6 +425,10 @@ function useTokenizedInputNext(props) {
     expanded
   };
   const eventHandlers = {
+    // onFocus is a focus on the expand button
+    // It can also be triggered by a focus on the input
+    // onBlur is a blur from the expand button when it's collapsed
+    // It can also be triggered by the clear button
     onBlur: expanded ? handleBlur : onBlur,
     onClick: handleClick,
     onInputChange: handleInputChange,
@@ -459,13 +458,13 @@ function useTokenizedInputNext(props) {
     inputProps: {
       id,
       disabled,
-      validationStatus: validationStatus != null ? validationStatus : validationStatusProp,
-      readOnly: readOnly != null ? readOnly : readOnlyProp,
+      validationStatus: validationStatus ?? validationStatusProp,
+      readOnly: readOnly ?? readOnlyProp,
       necessity,
       focused,
       "aria-labelledby": ariaLabelledBy,
       "aria-label": ariaLabel,
-      "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : ariaDescribedByProp,
+      "aria-describedby": ariaDescribedBy ?? ariaDescribedByProp,
       ...state,
       ...restProps,
       ...disabled ? {} : eventHandlers