@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.53

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

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useForkRef, Button } from '@salt-ds/core';
-import { OverflowMenuIcon } from '@salt-ds/icons';
+import { useIcon, useForkRef, Button } from '@salt-ds/core';
 import { forwardRef } from 'react';
 import { useOverflowMenu, useOverflowContext } from '@fluentui/react-overflow';
 import '../dropdown/DropdownBase.js';
@@ -13,6 +12,7 @@ const OverflowMenu = forwardRef(
   function OverflowMenu2(props, forwardedRef) {
     const { tabs, ...rest } = props;
     const { ref, overflowCount, isOverflowing } = useOverflowMenu();
+    const { OverflowIcon } = useIcon();
     const handleRef = useForkRef(ref, forwardedRef);
     const itemVisibility = useOverflowContext(
       (context) => context.itemVisibility
@@ -26,7 +26,7 @@ const OverflowMenu = forwardRef(
         "aria-label": "More tabs",
         variant: "secondary",
         role: "combobox",
-        children: /* @__PURE__ */ jsx(OverflowMenuIcon, {
+        children: /* @__PURE__ */ jsx(OverflowIcon, {
           "aria-hidden": true,
           style: { margin: 0 }
         })

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

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

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useDensity, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
-import { OverflowMenuIcon, CloseIcon } from '@salt-ds/icons';
+import { makePrefixer, useDensity, useIcon, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -68,6 +67,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
     window: targetWindow
   });
   const density = useDensity();
+  const { OverflowIcon, CloseIcon } = useIcon();
   const id = useId(idProp);
   const inputId = `${id}-input`;
   const expandButtonId = `${id}-expand-button`;
@@ -238,7 +238,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
             ref: useForkRef(expandButtonRef, expandButtonRefProp),
             variant: "secondary",
             ...restExpandButtonProps,
-            children: /* @__PURE__ */ jsx(OverflowMenuIcon, {
+            children: /* @__PURE__ */ jsx(OverflowIcon, {
               "aria-label": expandButtonAccessibleText === void 0 ? "expand edit" : expandButtonAccessibleText
             })
           }),

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

@@ -1 +1 @@
-{"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  useDensity,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactElement,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport type {\n  TokenizedInputHelpers,\n  TokenizedInputState,\n} from \"./useTokenizedInput\";\n\nimport tokenizedInputCss from \"./TokenizedInput.css\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n  extends Partial<TokenizedInputState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  InputProps?: Pick<InputProps, \"aria-describedby\" | \"inputProps\">;\n  disabled?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  helpers: TokenizedInputHelpers<Item>;\n  inputRef?: Ref<HTMLInputElement>;\n  itemToString?: ItemToString<Item>;\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onRemoveItem?: RemoveItemHandler;\n  onInputBlur?: FocusEventHandler<HTMLInputElement>;\n  onInputFocus?: FocusEventHandler<HTMLInputElement>;\n  onInputChange?: ChangeEventHandler<HTMLInputElement>;\n  onInputSelect?: ReactEventHandler<HTMLInputElement>;\n  onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nfunction hasHelpers<Item>(helpers: TokenizedInputHelpers<Item>) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (helpers == null) {\n      console.warn(\n        'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".',\n      );\n    }\n  }\n  return helpers != null;\n}\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n  props: TokenizedInputBaseProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    InputProps = {},\n    ExpandButtonProps = {},\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    focused,\n    expanded,\n    disabled,\n    helpers,\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    onClear,\n    onClick,\n    inputRef,\n    itemToString = defaultItemToString,\n    id: idProp,\n    expandButtonRef: expandButtonRefProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n\n  const density = useDensity();\n\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  // TODO: Use proper machanism to get variable values from theme in React. Something like below\n  // getComputedStyle(document.documentElement)\n  // .getPropertyValue('--my-variable-name'); // #999999\n  const pillGroupPadding = 16;\n  const lastVisiblePillMargin = 4;\n\n  const pillsRef = useRef<{ [index: number]: number | undefined }>({});\n  const inputRulerRef = useRef<HTMLSpanElement | null>(null);\n  const keydownExpandButton = useRef(false);\n\n  const [expandButtonRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const widthOffset =\n    pillGroupPadding +\n    INITIAL_INPUT_WIDTH +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        setPillGroupWidth(contentRect.width - widthOffset);\n      },\n      [widthOffset],\n    ),\n  );\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      // When density changes, set hidden index to null so that pills are in their\n      // readonly state before they are measured.\n      setFirstHiddenIndex(null);\n    },\n    [density],\n  );\n\n  // useLayoutEffect because of potential layout change\n  // We want to do that before paint to avoid layout jumps\n  useIsomorphicLayoutEffect(\n    () => {\n      if (expanded) {\n        setFirstHiddenIndex(null);\n      } else if (pillGroupWidth != null) {\n        setFirstHiddenIndex(\n          calcFirstHiddenIndex({\n            containerWidth: pillGroupWidth,\n            pillWidths: Object.values(pillsRef.current).filter(\n              Boolean,\n            ) as number[],\n          }),\n        );\n      }\n    },\n    // Additional dependency on selectedItems is for the controlled version\n    [expanded, pillGroupWidth, selectedItems],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (expanded && inputRulerRef.current) {\n      const newInputWidth = inputRulerRef.current.scrollWidth;\n      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));\n    }\n  }, [expanded, pillGroupWidth, value]);\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n    // Call keydown again if the initail event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n    }\n\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.setFocused(false);\n      helpers.cancelBlur();\n    }\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`,\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const mergedInputProps = deepmerge(\n    {\n      inputProps: {\n        style: {\n          width: inputWidth,\n          minWidth: inputWidth,\n        },\n        \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n        \"aria-activedescendant\":\n          highlightedIndex && highlightedIndex >= 0\n            ? `${id}-pill-${highlightedIndex}`\n            : undefined,\n      },\n    },\n    InputProps,\n  );\n\n  const {\n    accessibleText: expandButtonAccessibleText,\n    ...restExpandButtonProps\n  } = ExpandButtonProps;\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: focused,\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className,\n      )}\n      id={id}\n      onClick={onClick}\n      ref={useForkRef(ref, containerRef)}\n    >\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div className={withBaseName(\"pillGroup\")}>\n        {selectedItems.map((item, index) => {\n          const label = itemToString(item);\n\n          return (\n            <InputPill\n              active={activeIndices.indexOf(index) !== -1}\n              disabled={disabled}\n              hidden={showExpandButton && index >= firstHiddenIndex}\n              highlighted={index === highlightedIndex}\n              id={`${id}-pill-${index}`}\n              index={index}\n              key={`${index}-${label}`}\n              label={label}\n              lastVisible={\n                !showExpandButton && index === selectedItems.length - 1\n              }\n              onDelete={expanded ? onRemoveItem : undefined}\n              pillsRef={pillsRef}\n            />\n          );\n        })}\n        <Button\n          aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n            .filter(Boolean)\n            .join(\" \")}\n          className={clsx(withBaseName(\"expandButton\"), {\n            [withBaseName(\"hidden\")]: !showExpandButton,\n          })}\n          disabled={disabled}\n          id={expandButtonId}\n          onBlur={onBlur}\n          onClick={handleExpand}\n          onFocus={onFocus}\n          onKeyDown={handleExpandButtonKeyDown}\n          ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n          variant=\"secondary\"\n          {...restExpandButtonProps}\n        >\n          <OverflowMenuIcon\n            aria-label={\n              expandButtonAccessibleText === undefined\n                ? \"expand edit\"\n                : expandButtonAccessibleText\n            }\n          />\n        </Button>\n        <Input\n          {...mergedInputProps}\n          className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n            [withBaseName(\"hidden\")]: showExpandButton,\n          })}\n          disabled={disabled}\n          id={inputId}\n          // TODO: Use multi line input when available\n          // multiline\n          onBlur={onInputBlur}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onKeyDown={onKeyDown}\n          onKeyUp={handleInputKeyUp}\n          onSelect={onInputSelect}\n          renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n          value={value}\n          ref={inputRef}\n        />\n      </div>\n      <Button\n        className={clsx(withBaseName(\"clearButton\"), {\n          [withBaseName(\"hidden\")]: !expanded || selectedItems.length === 0,\n        })}\n        disabled={disabled}\n        id={clearButtonId}\n        onBlur={onBlur}\n        onClick={onClear}\n        onFocus={handleClearButtonFocus}\n        ref={clearButtonRef}\n        variant=\"secondary\"\n        data-testid=\"clear-button\"\n      >\n        <CloseIcon aria-label=\"clear input\" />\n      </Button>\n    </div>\n  );\n}) as <Item>(\n  p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","tokenizedInputCss","Input"],"mappings":"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"}
+{"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  useDensity,\n  useForkRef,\n  useIcon,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactElement,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport type {\n  TokenizedInputHelpers,\n  TokenizedInputState,\n} from \"./useTokenizedInput\";\n\nimport tokenizedInputCss from \"./TokenizedInput.css\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n  extends Partial<TokenizedInputState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  InputProps?: Pick<InputProps, \"aria-describedby\" | \"inputProps\">;\n  disabled?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  helpers: TokenizedInputHelpers<Item>;\n  inputRef?: Ref<HTMLInputElement>;\n  itemToString?: ItemToString<Item>;\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onRemoveItem?: RemoveItemHandler;\n  onInputBlur?: FocusEventHandler<HTMLInputElement>;\n  onInputFocus?: FocusEventHandler<HTMLInputElement>;\n  onInputChange?: ChangeEventHandler<HTMLInputElement>;\n  onInputSelect?: ReactEventHandler<HTMLInputElement>;\n  onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nfunction hasHelpers<Item>(helpers: TokenizedInputHelpers<Item>) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (helpers == null) {\n      console.warn(\n        'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".',\n      );\n    }\n  }\n  return helpers != null;\n}\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n  props: TokenizedInputBaseProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    InputProps = {},\n    ExpandButtonProps = {},\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    focused,\n    expanded,\n    disabled,\n    helpers,\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    onClear,\n    onClick,\n    inputRef,\n    itemToString = defaultItemToString,\n    id: idProp,\n    expandButtonRef: expandButtonRefProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n\n  const density = useDensity();\n  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  // TODO: Use proper machanism to get variable values from theme in React. Something like below\n  // getComputedStyle(document.documentElement)\n  // .getPropertyValue('--my-variable-name'); // #999999\n  const pillGroupPadding = 16;\n  const lastVisiblePillMargin = 4;\n\n  const pillsRef = useRef<{ [index: number]: number | undefined }>({});\n  const inputRulerRef = useRef<HTMLSpanElement | null>(null);\n  const keydownExpandButton = useRef(false);\n\n  const [expandButtonRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const widthOffset =\n    pillGroupPadding +\n    INITIAL_INPUT_WIDTH +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        setPillGroupWidth(contentRect.width - widthOffset);\n      },\n      [widthOffset],\n    ),\n  );\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      // When density changes, set hidden index to null so that pills are in their\n      // readonly state before they are measured.\n      setFirstHiddenIndex(null);\n    },\n    [density],\n  );\n\n  // useLayoutEffect because of potential layout change\n  // We want to do that before paint to avoid layout jumps\n  useIsomorphicLayoutEffect(\n    () => {\n      if (expanded) {\n        setFirstHiddenIndex(null);\n      } else if (pillGroupWidth != null) {\n        setFirstHiddenIndex(\n          calcFirstHiddenIndex({\n            containerWidth: pillGroupWidth,\n            pillWidths: Object.values(pillsRef.current).filter(\n              Boolean,\n            ) as number[],\n          }),\n        );\n      }\n    },\n    // Additional dependency on selectedItems is for the controlled version\n    [expanded, pillGroupWidth, selectedItems],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (expanded && inputRulerRef.current) {\n      const newInputWidth = inputRulerRef.current.scrollWidth;\n      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));\n    }\n  }, [expanded, pillGroupWidth, value]);\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n    // Call keydown again if the initail event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n    }\n\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.setFocused(false);\n      helpers.cancelBlur();\n    }\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`,\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const mergedInputProps = deepmerge(\n    {\n      inputProps: {\n        style: {\n          width: inputWidth,\n          minWidth: inputWidth,\n        },\n        \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n        \"aria-activedescendant\":\n          highlightedIndex && highlightedIndex >= 0\n            ? `${id}-pill-${highlightedIndex}`\n            : undefined,\n      },\n    },\n    InputProps,\n  );\n\n  const {\n    accessibleText: expandButtonAccessibleText,\n    ...restExpandButtonProps\n  } = ExpandButtonProps;\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: focused,\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className,\n      )}\n      id={id}\n      onClick={onClick}\n      ref={useForkRef(ref, containerRef)}\n    >\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div className={withBaseName(\"pillGroup\")}>\n        {selectedItems.map((item, index) => {\n          const label = itemToString(item);\n\n          return (\n            <InputPill\n              active={activeIndices.indexOf(index) !== -1}\n              disabled={disabled}\n              hidden={showExpandButton && index >= firstHiddenIndex}\n              highlighted={index === highlightedIndex}\n              id={`${id}-pill-${index}`}\n              index={index}\n              key={`${index}-${label}`}\n              label={label}\n              lastVisible={\n                !showExpandButton && index === selectedItems.length - 1\n              }\n              onDelete={expanded ? onRemoveItem : undefined}\n              pillsRef={pillsRef}\n            />\n          );\n        })}\n        <Button\n          aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n            .filter(Boolean)\n            .join(\" \")}\n          className={clsx(withBaseName(\"expandButton\"), {\n            [withBaseName(\"hidden\")]: !showExpandButton,\n          })}\n          disabled={disabled}\n          id={expandButtonId}\n          onBlur={onBlur}\n          onClick={handleExpand}\n          onFocus={onFocus}\n          onKeyDown={handleExpandButtonKeyDown}\n          ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n          variant=\"secondary\"\n          {...restExpandButtonProps}\n        >\n          <OverflowIcon\n            aria-label={\n              expandButtonAccessibleText === undefined\n                ? \"expand edit\"\n                : expandButtonAccessibleText\n            }\n          />\n        </Button>\n        <Input\n          {...mergedInputProps}\n          className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n            [withBaseName(\"hidden\")]: showExpandButton,\n          })}\n          disabled={disabled}\n          id={inputId}\n          // TODO: Use multi line input when available\n          // multiline\n          onBlur={onInputBlur}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onKeyDown={onKeyDown}\n          onKeyUp={handleInputKeyUp}\n          onSelect={onInputSelect}\n          renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n          value={value}\n          ref={inputRef}\n        />\n      </div>\n      <Button\n        className={clsx(withBaseName(\"clearButton\"), {\n          [withBaseName(\"hidden\")]: !expanded || selectedItems.length === 0,\n        })}\n        disabled={disabled}\n        id={clearButtonId}\n        onBlur={onBlur}\n        onClick={onClear}\n        onFocus={handleClearButtonFocus}\n        ref={clearButtonRef}\n        variant=\"secondary\"\n        data-testid=\"clear-button\"\n      >\n        <CloseIcon aria-label=\"clear input\" />\n      </Button>\n    </div>\n  );\n}) as <Item>(\n  p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["TokenizedInputBase","tokenizedInputCss","Input"],"mappings":";;;;;;;;;;;;;;;;;AAkFA,MAAM,mBAAsB,GAAA,CAAA,CAAA;AAC5B,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAEtD,MAAM,iBAAA,GAAoB,CAAC,SAAA,KACzB,SAAc,KAAA,CAAA,GACV,qBACA,CAAG,EAAA,SAAA,CAAA,CAAA,EAAa,SAAY,GAAA,CAAA,GAAI,OAAU,GAAA,MAAA,CAAA,CAAA,CAAA;AAEhD,SAAS,WAAiB,OAAsC,EAAA;AAC9D,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,WAAW,IAAM,EAAA;AACnB,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN,oGAAA;AAAA,OACF,CAAA;AAAA,KACF;AAAA,GACF;AACA,EAAA,OAAO,OAAW,IAAA,IAAA,CAAA;AACpB,CAAA;AAEO,MAAM,kBAAqB,GAAA,UAAA,CAAW,SAASA,mBAAAA,CACpD,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,aAAa,EAAC;AAAA,IACd,oBAAoB,EAAC;AAAA,IACrB,SAAA;AAAA,IACA,gBAAgB,EAAC;AAAA,IACjB,gBAAgB,EAAC;AAAA,IACjB,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,mBAAA;AAAA,IACf,EAAI,EAAA,MAAA;AAAA,IACJ,eAAiB,EAAA,mBAAA;AAAA,IACjB,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA,cAAA;AAAA,IAChB,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,OAAQ,EAAA,CAAA;AAC5C,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,UAAU,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA,CAAA;AACnB,EAAA,MAAM,iBAAiB,CAAG,EAAA,EAAA,CAAA,cAAA,CAAA,CAAA;AAC1B,EAAA,MAAM,gBAAgB,CAAG,EAAA,EAAA,CAAA,aAAA,CAAA,CAAA;AAKzB,EAAA,MAAM,gBAAmB,GAAA,EAAA,CAAA;AAGzB,EAAM,MAAA,QAAA,GAAW,MAAgD,CAAA,EAAE,CAAA,CAAA;AACnE,EAAM,MAAA,aAAA,GAAgB,OAA+B,IAAI,CAAA,CAAA;AACzD,EAAM,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA,CAAA;AAExC,EAAA,MAAM,CAAC,eAAA,EAAiB,iBAAiB,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,cAAA,EAAgB,gBAAgB,CAAA,GAAI,SAAS,OAAO,CAAA,CAAA;AAC3D,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,mBAAmB,CAAA,CAAA;AAChE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAwB,IAAI,CAAA,CAAA;AACxE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAwB,IAAI,CAAA,CAAA;AAE5E,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAA,IAAY,gBAAoB,IAAA,IAAA,CAAA;AAE1D,EAAA,MAAM,WACJ,GAAA,gBAAA,GACA,mBACC,IAAA,QAAA,GAAW,gBAAmB,GAAA,iBAAA,CAAA,CAAA;AAEjC,EAAA,MAAM,YAAe,GAAA,iBAAA;AAAA,IACnB,WAAA;AAAA,MACE,CAAC,CAAC,EAAE,WAAA,EAAa,CAAM,KAAA;AACrB,QAAkB,iBAAA,CAAA,WAAA,CAAY,QAAQ,WAAW,CAAA,CAAA;AAAA,OACnD;AAAA,MACA,CAAC,WAAW,CAAA;AAAA,KACd;AAAA,GACF,CAAA;AAEA,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AAGV,MAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAIA,EAAA,yBAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAAA,OAC1B,MAAA,IAAW,kBAAkB,IAAM,EAAA;AACjC,QAAA,mBAAA;AAAA,UACE,oBAAqB,CAAA;AAAA,YACnB,cAAgB,EAAA,cAAA;AAAA,YAChB,UAAY,EAAA,MAAA,CAAO,MAAO,CAAA,QAAA,CAAS,OAAO,CAAE,CAAA,MAAA;AAAA,cAC1C,OAAA;AAAA,aACF;AAAA,WACD,CAAA;AAAA,SACH,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IAEA,CAAC,QAAU,EAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,QAAA,IAAY,cAAc,OAAS,EAAA;AACrC,MAAM,MAAA,aAAA,GAAgB,cAAc,OAAQ,CAAA,WAAA,CAAA;AAC5C,MAAA,aAAA,CAAc,IAAK,CAAA,GAAA,CAAI,aAAe,EAAA,cAAA,IAAkB,CAAC,CAAC,CAAA,CAAA;AAAA,KAC5D;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,cAAA,EAAgB,KAAK,CAAC,CAAA,CAAA;AAEpC,EAAM,MAAA,yBAAA,GAA4B,CAChC,KACG,KAAA;AACH,IAAM,MAAA,UAAA,GAAa,KAAM,CAAA,GAAA,CAAI,MAAW,KAAA,CAAA,CAAA;AACxC,IAAA,MAAM,aACJ,GAAA;AAAA,MACE,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAQ,CAAA,KAAA,CAAM,GAAI,CAAA,WAAA,EAAa,CAAM,KAAA,CAAA,CAAA,CAAA;AAEzC,IAAA,IAAA,CAAK,UAAc,IAAA,aAAA,KAAkB,UAAW,CAAA,OAAO,CAAG,EAAA;AACxD,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,OACxB;AACA,MAAA,OAAA,CAAQ,eAAe,IAAI,CAAA,CAAA;AAC3B,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA,CAAA;AAAA,KAChC;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAEnE,IAAA,IAAI,mBAAoB,CAAA,OAAA,IAAW,OAAY,KAAA,KAAA,CAAM,GAAK,EAAA;AACxD,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA,CAAA;AAE9B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA6C,KAAA;AACjE,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,IAAI,IAAA,UAAA,CAAW,OAAO,CAAG,EAAA;AACvB,MAAA,OAAA,CAAQ,eAAe,IAAI,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,sBAAA,GAAyB,CAAC,KAAyC,KAAA;AACvE,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,IAAI,IAAA,UAAA,CAAW,OAAO,CAAG,EAAA;AACvB,MAAA,OAAA,CAAQ,WAAW,KAAK,CAAA,CAAA;AACxB,MAAA,OAAA,CAAQ,UAAW,EAAA,CAAA;AAAA,KACrB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,aAAc,CAAA,GAAA;AAAA,IACpC,CAAC,CAAA,EAAG,KAAU,KAAA,CAAA,EAAG,EAAW,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsB,QACxB,GAAA,CAAC,cAAgB,EAAA,OAAA,EAAS,GAAG,eAAe,CAAA,GAC5C,CAAC,cAAA,EAAgB,OAAO,CAAA,CAAA;AAE5B,EAAA,MAAM,gBAAmB,GAAA,SAAA;AAAA,IACvB;AAAA,MACE,UAAY,EAAA;AAAA,QACV,KAAO,EAAA;AAAA,UACL,KAAO,EAAA,UAAA;AAAA,UACP,QAAU,EAAA,UAAA;AAAA,SACZ;AAAA,QACA,YAAc,EAAA,CAAC,SAAW,EAAA,iBAAA,CAAkB,aAAc,CAAA,MAAM,CAAC,CAAA,CAC9D,MAAO,CAAA,OAAO,CACd,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,QACX,mBAAmB,mBAAoB,CAAA,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA,QAC/D,yBACE,gBAAoB,IAAA,gBAAA,IAAoB,CACpC,GAAA,CAAA,EAAG,WAAW,gBACd,CAAA,CAAA,GAAA,KAAA,CAAA;AAAA,OACR;AAAA,KACF;AAAA,IACA,UAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,cAAgB,EAAA,0BAAA;AAAA,IACb,GAAA,qBAAA;AAAA,GACD,GAAA,iBAAA,CAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,YAAY,CAAA;AAAA,IAEjC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,WAAA,EAAW,eAAgB,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,QACnC,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAChC,IAAK,EAAA,SAAA;AAAA,OACP,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAc,aAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAClC,YAAM,MAAA,KAAA,GAAQ,aAAa,IAAI,CAAA,CAAA;AAE/B,YAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,cACC,MAAQ,EAAA,aAAA,CAAc,OAAQ,CAAA,KAAK,CAAM,KAAA,CAAA,CAAA;AAAA,cACzC,QAAA;AAAA,cACA,MAAA,EAAQ,oBAAoB,KAAS,IAAA,gBAAA;AAAA,cACrC,aAAa,KAAU,KAAA,gBAAA;AAAA,cACvB,EAAA,EAAI,GAAG,EAAW,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AAAA,cAClB,KAAA;AAAA,cAEA,KAAA;AAAA,cACA,WACE,EAAA,CAAC,gBAAoB,IAAA,KAAA,KAAU,cAAc,MAAS,GAAA,CAAA;AAAA,cAExD,QAAA,EAAU,WAAW,YAAe,GAAA,KAAA,CAAA;AAAA,cACpC,QAAA;AAAA,aANK,EAAA,CAAA,EAAG,SAAS,KAOnB,CAAA,CAAA,CAAA,CAAA;AAAA,WAEH,CAAA;AAAA,0BACA,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,iBAAA,EAAiB,CAAC,cAAA,EAAgB,OAAS,EAAA,cAAc,EACtD,MAAO,CAAA,OAAO,CACd,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,YACX,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,cAAc,CAAG,EAAA;AAAA,cAC5C,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,gBAAA;AAAA,aAC5B,CAAA;AAAA,YACD,QAAA;AAAA,YACA,EAAI,EAAA,cAAA;AAAA,YACJ,MAAA;AAAA,YACA,OAAS,EAAA,YAAA;AAAA,YACT,OAAA;AAAA,YACA,SAAW,EAAA,yBAAA;AAAA,YACX,GAAA,EAAK,UAAW,CAAA,eAAA,EAAiB,mBAAmB,CAAA;AAAA,YACpD,OAAQ,EAAA,WAAA;AAAA,YACP,GAAG,qBAAA;AAAA,YAEJ,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,cACC,YAAA,EACE,0BAA+B,KAAA,KAAA,CAAA,GAC3B,aACA,GAAA,0BAAA;AAAA,aAER,CAAA;AAAA,WACF,CAAA;AAAA,0BACC,GAAA,CAAAC,WAAA,EAAA;AAAA,YACE,GAAG,gBAAA;AAAA,YACJ,WAAW,IAAK,CAAA,YAAA,CAAa,OAAO,CAAG,EAAA,YAAA,CAAa,YAAY,CAAG,EAAA;AAAA,cACjE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,gBAAA;AAAA,aAC3B,CAAA;AAAA,YACD,QAAA;AAAA,YACA,EAAI,EAAA,OAAA;AAAA,YAGJ,MAAQ,EAAA,WAAA;AAAA,YACR,QAAU,EAAA,aAAA;AAAA,YACV,OAAS,EAAA,YAAA;AAAA,YACT,SAAA;AAAA,YACA,OAAS,EAAA,gBAAA;AAAA,YACT,QAAU,EAAA,aAAA;AAAA,YACV,YAAA,EAAc,sBAAO,GAAA,CAAA,UAAA,EAAA;AAAA,cAAW,GAAK,EAAA,aAAA;AAAA,cAAe,KAAA;AAAA,aAAc,CAAA;AAAA,YAClE,KAAA;AAAA,YACA,GAAK,EAAA,QAAA;AAAA,WACP,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,aAAa,CAAG,EAAA;AAAA,UAC3C,CAAC,YAAa,CAAA,QAAQ,IAAI,CAAC,QAAA,IAAY,cAAc,MAAW,KAAA,CAAA;AAAA,SACjE,CAAA;AAAA,QACD,QAAA;AAAA,QACA,EAAI,EAAA,aAAA;AAAA,QACJ,MAAA;AAAA,QACA,OAAS,EAAA,OAAA;AAAA,QACT,OAAS,EAAA,sBAAA;AAAA,QACT,GAAK,EAAA,cAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QACR,aAAY,EAAA,cAAA;AAAA,QAEZ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,UAAU,YAAW,EAAA,aAAA;AAAA,SAAc,CAAA;AAAA,OACtC,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
-import { CloseIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
 import { getWidth } from './useWidth.js';
@@ -22,6 +21,7 @@ const InputPill = memo(function InputPill2(props) {
   } = props;
   const ref = useRef(null);
   const isRemovable = Boolean(onDelete);
+  const { CloseIcon } = useIcon();
   useIsomorphicLayoutEffect(() => {
     if (!isRemovable && pillsRef.current) {
       pillsRef.current[index] = getWidth(ref.current);

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId, useForkRef, StatusAdornment, Button } from '@salt-ds/core';
-import { CloseIcon, OverflowMenuIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useId, useForkRef, StatusAdornment, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -67,6 +66,7 @@ const TokenizedInputNext = forwardRef(function TokenizedInputNext2({
     "aria-describedby": ariaDescribedBy,
     ...restProps
   } = inputProps;
+  const { OverflowIcon, CloseIcon } = useIcon();
   const id = useId(idProp);
   const inputId = `${id}-input`;
   const expandButtonId = `${id}-expand-button`;
@@ -223,7 +223,7 @@ const TokenizedInputNext = forwardRef(function TokenizedInputNext2({
                 variant: "secondary",
                 "data-testid": "expand-button",
                 ...restExpandButtonProps,
-                children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
+                children: /* @__PURE__ */ jsx(OverflowIcon, {})
               })
             ]
           }),

package/dist-es/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  useId,\n} from \"@salt-ds/core\";\nimport { CloseIcon, OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\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\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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"}
+{"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":["TokenizedInputNext","tokenizedInputCss","helpers"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer, useIsomorphicLayoutEffect, Tooltip, Pill } from '@salt-ds/core';
-import { CloseIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useIsomorphicLayoutEffect, Tooltip, Pill } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -26,6 +25,7 @@ const InputPill = memo(function InputPill2(props) {
     css: css_248z,
     window: targetWindow
   });
+  const { CloseIcon } = useIcon();
   const ref = useRef(null);
   const [isEllipsisActive, setEllipsisActive] = useState(false);
   const isRemovable = Boolean(onClose);

package/dist-es/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  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\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 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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"}
+{"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":["InputPill","inputPillCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AA8B1C,MAAM,SAAY,GAAA,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,OAAQ,EAAA,CAAA;AAC9B,EAAM,MAAA,GAAA,GAAM,OAAiC,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,gBAAA,EAAkB,iBAAiB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5D,EAAM,MAAA,WAAA,GAAc,QAAQ,OAAO,CAAA,CAAA;AAInC,EAAA,yBAAA,CAA0B,MAAM;AA5ElC,IAAA,IAAA,EAAA,CAAA;AA6EI,IAAM,MAAA,IAAA,GAAA,CAAO,EAAK,GAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,OAAA,KAAL,IAAc,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,iBAAA,CAAA;AAC3B,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;AACA,IAAkB,iBAAA,CAAA,CAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,WAAc,KAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,WAAW,CAAA,CAAA,CAAA;AAAA,GACtD,EAAA,CAAC,QAAU,EAAA,KAAA,EAAO,WAAW,CAAC,CAAA,CAAA;AAEjC,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,EAAM,MAAA,WAAA,GAAc,CAAC,KAA0B,KAAA;AAC7C,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAU,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACnB,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,KAAA;AAAA,IAAO,UAAU,CAAC,gBAAA;AAAA,IAClC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,iBAAiB,CAAI,GAAA,WAAA;AAAA,UACnC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,WAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,QAAU,EAAA,CAAA,CAAA;AAAA,MACV,OAAA,EAAS,cAAc,WAAc,GAAA,KAAA,CAAA;AAAA,MACrC,GAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,QAC9C,WAAA,wBAAgB,SAAU,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAC7B,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/toolbar/overflow-panel/OverflowPanel.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useCallback, cloneElement, createElement } from 'react';
-import { makePrefixer, useIdMemo, useControlled, Button } from '@salt-ds/core';
-import { OverflowMenuIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useIdMemo, useControlled, Button } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { ToolbarField } from '../toolbar-field/ToolbarField.js';
 import { OverflowSeparator } from './OverflowSeparator.js';
@@ -35,6 +34,7 @@ const OverflowPanel = forwardRef(function DropdownPanel({
     css: css_248z,
     window: targetWindow
   });
+  const { OverflowIcon } = useIcon();
   const id = useIdMemo();
   const collectionHook = useCollectionItems({
     id,
@@ -66,7 +66,7 @@ const OverflowPanel = forwardRef(function DropdownPanel({
     setIsOpen(open);
     onOpenChange == null ? void 0 : onOpenChange(open);
   };
-  const getTriggerButtonIcon = () => (triggerButtonIcon != null ? triggerButtonIcon : triggerButtonLabel === void 0) ? /* @__PURE__ */ jsx(OverflowMenuIcon, {}) : void 0;
+  const getTriggerButtonIcon = () => (triggerButtonIcon != null ? triggerButtonIcon : triggerButtonLabel === void 0) ? /* @__PURE__ */ jsx(OverflowIcon, {}) : void 0;
   return /* @__PURE__ */ jsxs(DropdownBase, {
     ...props,
     className: clsx(withBaseName(), className),

package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n  /**\n   * Trigger button icon\n   */\n  triggerButtonIcon?: JSX.Element;\n  /**\n   * Trigger button text\n   */\n  triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n  {\n    children,\n    className,\n    defaultIsOpen,\n    isOpen: isOpenProp,\n    onOpenChange,\n    triggerButtonIcon,\n    triggerButtonLabel,\n    ...props\n  }: DropdownPanelProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-panel\",\n    css: overflowPanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId();\n  const collectionHook = useCollectionItems<ReactElement>({\n    id,\n    children,\n  });\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen || false,\n    name: \"DropdownPanel\",\n  });\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigationPanel({\n      cycleFocus: true,\n      defaultHighlightedIndex: 0,\n      focusOnHighlight: true,\n      indexPositions: collectionHook.data,\n    });\n\n  const focusTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, []);\n\n  const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n  const handleItemClick = (evt: MouseEvent) => {\n    // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n    setIsOpen(false);\n    focusTrigger();\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const getTriggerButtonIcon = () =>\n    triggerButtonIcon ?? triggerButtonLabel === undefined ? (\n      <OverflowMenuIcon />\n    ) : undefined;\n\n  return (\n    <DropdownBase\n      {...props}\n      className={clsx(withBaseName(), className)}\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      placement=\"bottom-end\"\n      ref={forwardedRef}\n    >\n      <Button variant=\"secondary\" ref={triggerRef}>\n        {getTriggerButtonIcon()}\n        {triggerButtonLabel}\n      </Button>\n      <div\n        className={withBaseName(\"content\")}\n        ref={setPanelRef}\n        tabIndex={-1}\n        {...keyboardHook.listProps}\n      >\n        {collectionHook.data.map((item) => {\n          const { type } = item.value as ReactElement;\n          if (type === OverflowSeparator) {\n            return item.value;\n          }\n          const formFieldProps = {\n            id: item.id,\n            inOverflowPanel: true,\n            key: item.id,\n            onClick: handleItemClick,\n          } as ToolbarFieldProps;\n\n          if (type === ToolbarField) {\n            return cloneElement(item.value as ReactElement, formFieldProps);\n          }\n          return (\n            <ToolbarField {...formFieldProps} key={item.id}>\n              {item.value}\n            </ToolbarField>\n          );\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}
+{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useIcon,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n  /**\n   * Trigger button icon\n   */\n  triggerButtonIcon?: JSX.Element;\n  /**\n   * Trigger button text\n   */\n  triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n  {\n    children,\n    className,\n    defaultIsOpen,\n    isOpen: isOpenProp,\n    onOpenChange,\n    triggerButtonIcon,\n    triggerButtonLabel,\n    ...props\n  }: DropdownPanelProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-panel\",\n    css: overflowPanelCss,\n    window: targetWindow,\n  });\n  const { OverflowIcon } = useIcon();\n  const id = useId();\n  const collectionHook = useCollectionItems<ReactElement>({\n    id,\n    children,\n  });\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen || false,\n    name: \"DropdownPanel\",\n  });\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigationPanel({\n      cycleFocus: true,\n      defaultHighlightedIndex: 0,\n      focusOnHighlight: true,\n      indexPositions: collectionHook.data,\n    });\n\n  const focusTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, []);\n\n  const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n  const handleItemClick = (evt: MouseEvent) => {\n    // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n    setIsOpen(false);\n    focusTrigger();\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const getTriggerButtonIcon = () =>\n    (triggerButtonIcon ?? triggerButtonLabel === undefined) ? (\n      <OverflowIcon />\n    ) : undefined;\n\n  return (\n    <DropdownBase\n      {...props}\n      className={clsx(withBaseName(), className)}\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      placement=\"bottom-end\"\n      ref={forwardedRef}\n    >\n      <Button variant=\"secondary\" ref={triggerRef}>\n        {getTriggerButtonIcon()}\n        {triggerButtonLabel}\n      </Button>\n      <div\n        className={withBaseName(\"content\")}\n        ref={setPanelRef}\n        tabIndex={-1}\n        {...keyboardHook.listProps}\n      >\n        {collectionHook.data.map((item) => {\n          const { type } = item.value as ReactElement;\n          if (type === OverflowSeparator) {\n            return item.value;\n          }\n          const formFieldProps = {\n            id: item.id,\n            inOverflowPanel: true,\n            key: item.id,\n            onClick: handleItemClick,\n          } as ToolbarFieldProps;\n\n          if (type === ToolbarField) {\n            return cloneElement(item.value as ReactElement, formFieldProps);\n          }\n          return (\n            <ToolbarField {...formFieldProps} key={item.id}>\n              {item.value}\n            </ToolbarField>\n          );\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}

package/dist-types/calendar/Calendar.d.ts

@@ -1,12 +1,56 @@
-import { type CalendarCarouselProps } from "./internal/CalendarCarousel";
-import { type CalendarNavigationProps } from "./internal/CalendarNavigation";
-import { type useCalendarProps } from "./useCalendar";
-export declare type CalendarProps = useCalendarProps & {
-    className?: string;
-    renderDayContents?: CalendarCarouselProps["renderDayContents"];
-    hideYearDropdown?: CalendarNavigationProps["hideYearDropdown"];
-    borderedDropdown?: CalendarNavigationProps["borderedDropdown"];
-    TooltipProps?: CalendarCarouselProps["TooltipProps"];
-    hideOutOfRangeDates?: CalendarCarouselProps["hideOutOfRangeDates"];
-};
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type UseCalendarMultiSelectProps, type UseCalendarOffsetProps, type UseCalendarRangeProps, type UseCalendarSingleProps } from "./useCalendar";
+/**
+ * Base props for the Calendar component.
+ */
+export interface CalendarBaseProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content to be rendered inside the Calendar.
+     */
+    children: ReactNode;
+    /**
+     * If `true`, hides dates that are out of the selectable range.
+     */
+    hideOutOfRangeDates?: boolean;
+}
+/**
+ * Props for the Calendar component with single date selection.
+ */
+export interface CalendarSingleProps extends CalendarBaseProps, UseCalendarSingleProps {
+    /**
+     * The selection variant, set to "single".
+     */
+    selectionVariant: "single";
+}
+/**
+ * Props for the Calendar component with date range selection.
+ */
+export interface CalendarRangeProps extends CalendarBaseProps, UseCalendarRangeProps {
+    /**
+     * The selection variant, set to "range".
+     */
+    selectionVariant: "range";
+}
+/**
+ * Props for the Calendar component with multi-select date selection.
+ */
+export interface CalendarMultiSelectProps extends CalendarBaseProps, UseCalendarMultiSelectProps {
+    /**
+     * The selection variant, set to "multiselect".
+     */
+    selectionVariant: "multiselect";
+}
+/**
+ * Props for the Calendar component with offset date selection.
+ */
+export interface CalendarOffsetProps extends CalendarBaseProps, UseCalendarOffsetProps {
+    /**
+     * The selection variant, set to "offset".
+     */
+    selectionVariant: "offset";
+}
+/**
+ * Type representing the props for the Calendar component with various selection variants.
+ */
+export declare type CalendarProps = CalendarSingleProps | CalendarRangeProps | CalendarMultiSelectProps | CalendarOffsetProps;
 export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/CalendarDateGrid.d.ts

@@ -0,0 +1,10 @@
+import { type DateValue } from "@internationalized/date";
+import { type ComponentPropsWithoutRef } from "react";
+import { type CalendarMonthProps } from "./internal/CalendarMonth";
+export interface CalendarDateGridProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Props getter to pass to each CalendarMonth element
+     */
+    getCalendarMonthProps?: (date: DateValue) => Omit<CalendarMonthProps, "date">;
+}
+export declare const CalendarDateGrid: import("react").ForwardRefExoticComponent<CalendarDateGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/CalendarNavigation.d.ts

@@ -0,0 +1,57 @@
+import { type ButtonProps, type DropdownProps } from "@salt-ds/core";
+import { type ComponentPropsWithRef } from "react";
+import { type DateValue } from "@internationalized/date";
+declare type DateDropdownProps = DropdownProps<DateValue>;
+/**
+ * Props for the CalendarNavigation component.
+ */
+export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Props for the month dropdown component.
+     */
+    MonthDropdownProps?: DateDropdownProps;
+    /**
+     * Props for the year dropdown component.
+     */
+    YearDropdownProps?: DateDropdownProps;
+    /**
+     * Callback fired when a month is selected.
+     * @param event - The change event.
+     */
+    onMonthSelect?: DateDropdownProps["onChange"];
+    /**
+     * Callback fired when a year is selected.
+     * @param event - The change event.
+     */
+    onYearSelect?: DateDropdownProps["onChange"];
+    /**
+     * Callback fired when navigating to the next month.
+     * @param event - The click event.
+     */
+    onNavigateNext?: ButtonProps["onClick"];
+    /**
+     * Callback fired when navigating to the previous month.
+     * @param event - The click event.
+     */
+    onNavigatePrevious?: ButtonProps["onClick"];
+    /**
+     * If `true`, hides the year dropdown.
+     */
+    hideYearDropdown?: boolean;
+    /**
+     * The step value for navigation. Defaults to 1.
+     */
+    step?: number;
+    /**
+     * Format the month dropdown values
+     * @param date
+     */
+    formatMonth?: (date: DateValue) => string;
+    /**
+     * Format the year dropdown values
+     * @param date
+     */
+    formatYear?: (date: DateValue) => string;
+}
+export declare const CalendarNavigation: import("react").ForwardRefExoticComponent<Omit<CalendarNavigationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/calendar/CalendarWeekHeader.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentPropsWithRef } from "react";
+export declare type CalendarWeekHeaderProps = ComponentPropsWithRef<"div"> & {
+    locale?: string;
+};
+export declare const CalendarWeekHeader: import("react").ForwardRefExoticComponent<Omit<CalendarWeekHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/formatDate.d.ts

@@ -0,0 +1,14 @@
+import { type DateValue } from "@internationalized/date";
+/**
+ * Gets the current locale from the browser.
+ * @returns The current locale as a string.
+ */
+export declare function getCurrentLocale(): string;
+/**
+ * Formats a date value according to the specified locale and options.
+ * @param date - The date value to format.
+ * @param locale - The locale to use for formatting. Defaults to the current locale.
+ * @param options - Additional options for date formatting.
+ * @returns The formatted date as a string.
+ */
+export declare function formatDate(date: DateValue | null, locale?: string, options?: Intl.DateTimeFormatOptions): string;