npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.10 → 1.0.0-alpha.100 - Mend

@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2035) hide show

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

@@ -1,25 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useDensity, useIcon, useId, useIsomorphicLayoutEffect, Button, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import deepmerge from 'deepmerge';
 import { forwardRef, useRef, useState, useCallback } from 'react';
-import { makePrefixer, useDensity, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
-import { OverflowMenuIcon, CloseIcon } from '@salt-ds/icons';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
 import { calcFirstHiddenIndex } from './internal/calcFirstHiddenIndex.js';
 import { defaultItemToString } from './internal/defaultItemToString.js';
 import { InputPill } from './internal/InputPill.js';
 import { InputRuler } from './internal/InputRuler.js';
 import { useResizeObserver } from './internal/useResizeObserver.js';
 import { useWidth } from './internal/useWidth.js';
-import { InputLegacy } from '../input-legacy/InputLegacy.js';
-import '../input-legacy/StaticInputAdornment.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './TokenizedInput.css.js';
 const INITIAL_INPUT_WIDTH = 5;
 const withBaseName = makePrefixer("saltTokenizedInput");
 const getItemsAriaLabel = (itemCount) => itemCount === 0 ? "no item selected" : `${itemCount} ${itemCount > 1 ? "items" : "item"}`;
-const hasHelpers = (helpers) => {
+function hasHelpers(helpers) {
   if (process.env.NODE_ENV !== "production") {
     if (helpers == null) {
       console.warn(
@@ -28,10 +27,10 @@ const hasHelpers = (helpers) => {
     }
   }
   return helpers != null;
-};
+}
 const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
   const {
-    InputProps: InputProps2 = {},
+    InputProps = {},
     ExpandButtonProps = {},
     className,
     activeIndices = [],
@@ -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`;
@@ -112,6 +112,7 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
         );
       }
     },
+    // Additional dependency on selectedItems is for the controlled version
     [expanded, pillGroupWidth, selectedItems]
   );
   useIsomorphicLayoutEffect(() => {
@@ -180,108 +181,122 @@ const TokenizedInputBase = forwardRef(function TokenizedInputBase2(props, ref) {
         "aria-activedescendant": highlightedIndex && highlightedIndex >= 0 ? `${id}-pill-${highlightedIndex}` : void 0
       }
     },
-    InputProps2
+    InputProps
   );
   const {
     accessibleText: expandButtonAccessibleText,
     ...restExpandButtonProps
   } = ExpandButtonProps;
-  return /* @__PURE__ */ jsxs("div", {
-    ...restProps,
-    className: clsx(
-      withBaseName(),
-      {
-        [withBaseName("focused")]: focused,
-        [withBaseName("expanded")]: expanded,
-        [withBaseName("disabled")]: disabled
-      },
-      className
-    ),
-    id,
-    onClick,
-    ref: useForkRef(ref, containerRef),
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        "aria-owns": selectedItemIds.join(" "),
-        className: withBaseName("hidden"),
-        role: "listbox"
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: withBaseName("pillGroup"),
-        children: [
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...restProps,
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("focused")]: focused,
+          [withBaseName("expanded")]: expanded,
+          [withBaseName("disabled")]: disabled
+        },
+        className
+      ),
+      id,
+      onClick,
+      ref: useForkRef(ref, containerRef),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-owns": selectedItemIds.join(" "),
+            className: withBaseName("hidden"),
+            role: "listbox"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: withBaseName("pillGroup"), children: [
           selectedItems.map((item, index) => {
             const label = itemToString(item);
-            return /* @__PURE__ */ jsx(InputPill, {
-              active: activeIndices.indexOf(index) !== -1,
-              disabled,
-              hidden: showExpandButton && index >= firstHiddenIndex,
-              highlighted: index === highlightedIndex,
-              id: `${id}-pill-${index}`,
-              index,
-              label,
-              lastVisible: !showExpandButton && index === selectedItems.length - 1,
-              onDelete: expanded ? onRemoveItem : void 0,
-              pillsRef
-            }, `${index}-${label}`);
+            return /* @__PURE__ */ jsx(
+              InputPill,
+              {
+                active: activeIndices.indexOf(index) !== -1,
+                disabled,
+                hidden: showExpandButton && index >= firstHiddenIndex,
+                highlighted: index === highlightedIndex,
+                id: `${id}-pill-${index}`,
+                index,
+                label,
+                lastVisible: !showExpandButton && index === selectedItems.length - 1,
+                onDelete: expanded ? onRemoveItem : void 0,
+                pillsRef
+              },
+              `${index}-${label}`
+            );
           }),
-          /* @__PURE__ */ jsx(Button, {
-            "aria-labelledby": [ariaLabelledBy, inputId, expandButtonId].filter(Boolean).join(" "),
-            className: clsx(withBaseName("expandButton"), {
-              [withBaseName("hidden")]: !showExpandButton
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-labelledby": [ariaLabelledBy, inputId, expandButtonId].filter(Boolean).join(" "),
+              className: clsx(withBaseName("expandButton"), {
+                [withBaseName("hidden")]: !showExpandButton
+              }),
+              disabled,
+              id: expandButtonId,
+              onBlur,
+              onClick: handleExpand,
+              onFocus,
+              onKeyDown: handleExpandButtonKeyDown,
+              ref: useForkRef(expandButtonRef, expandButtonRefProp),
+              variant: "secondary",
+              ...restExpandButtonProps,
+              children: /* @__PURE__ */ jsx(
+                OverflowIcon,
+                {
+                  "aria-label": expandButtonAccessibleText === void 0 ? "expand edit" : expandButtonAccessibleText
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputLegacy,
+            {
+              ...mergedInputProps,
+              className: clsx(withBaseName("input"), withBaseName("inputField"), {
+                [withBaseName("hidden")]: showExpandButton
+              }),
+              disabled,
+              id: inputId,
+              onBlur: onInputBlur,
+              onChange: onInputChange,
+              onFocus: onInputFocus,
+              onKeyDown,
+              onKeyUp: handleInputKeyUp,
+              onSelect: onInputSelect,
+              renderSuffix: () => /* @__PURE__ */ jsx(InputRuler, { ref: inputRulerRef, value }),
+              value,
+              ref: inputRef
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: clsx(withBaseName("clearButton"), {
+              [withBaseName("hidden")]: !expanded || selectedItems.length === 0
             }),
             disabled,
-            id: expandButtonId,
+            id: clearButtonId,
             onBlur,
-            onClick: handleExpand,
-            onFocus,
-            onKeyDown: handleExpandButtonKeyDown,
-            ref: useForkRef(expandButtonRef, expandButtonRefProp),
+            onClick: onClear,
+            onFocus: handleClearButtonFocus,
+            ref: clearButtonRef,
             variant: "secondary",
-            ...restExpandButtonProps,
-            children: /* @__PURE__ */ jsx(OverflowMenuIcon, {
-              "aria-label": expandButtonAccessibleText === void 0 ? "expand edit" : expandButtonAccessibleText
-            })
-          }),
-          /* @__PURE__ */ jsx(InputLegacy, {
-            ...mergedInputProps,
-            className: clsx(withBaseName("input"), withBaseName("inputField"), {
-              [withBaseName("hidden")]: showExpandButton
-            }),
-            disabled,
-            id: inputId,
-            onBlur: onInputBlur,
-            onChange: onInputChange,
-            onFocus: onInputFocus,
-            onKeyDown,
-            onKeyUp: handleInputKeyUp,
-            onSelect: onInputSelect,
-            renderSuffix: () => /* @__PURE__ */ jsx(InputRuler, {
-              ref: inputRulerRef,
-              value
-            }),
-            value,
-            ref: inputRef
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx(Button, {
-        className: clsx(withBaseName("clearButton"), {
-          [withBaseName("hidden")]: !expanded || selectedItems.length === 0
-        }),
-        disabled,
-        id: clearButtonId,
-        onBlur,
-        onClick: onClear,
-        onFocus: handleClearButtonFocus,
-        ref: clearButtonRef,
-        variant: "secondary",
-        "data-testid": "clear-button",
-        children: /* @__PURE__ */ jsx(CloseIcon, {
-          "aria-label": "clear input"
-        })
-      })
-    ]
-  });
+            "data-testid": "clear-button",
+            children: /* @__PURE__ */ jsx(CloseIcon, { "aria-label": "clear input" })
+          }
+        )
+      ]
+    }
+  );
 });
 export { TokenizedInputBase };

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

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

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

@@ -1,11 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIcon, useIsomorphicLayoutEffect, Pill } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { memo, useRef } from 'react';
-import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { getWidth } from './useWidth.js';
-import { Pill } from '../../pill/Pill.js';
-import '../../pill/ClosablePill.js';
-import '../../pill/SelectablePill.js';
 const withBaseName = makePrefixer("saltInputPill");
 const InputPill = memo(function InputPill2(props) {
@@ -16,14 +13,15 @@ const InputPill = memo(function InputPill2(props) {
     hidden,
     highlighted,
     index,
+    label,
     lastVisible,
     onDelete,
     pillsRef,
-    tabIndex: tabIndexProp,
     ...restProps
   } = props;
   const ref = useRef(null);
   const isRemovable = Boolean(onDelete);
+  const { CloseIcon } = useIcon();
   useIsomorphicLayoutEffect(() => {
     if (!isRemovable && pillsRef.current) {
       pillsRef.current[index] = getWidth(ref.current);
@@ -38,24 +36,30 @@ const InputPill = memo(function InputPill2(props) {
   const handleDelete = () => {
     onDelete == null ? void 0 : onDelete(index);
   };
-  return /* @__PURE__ */ jsx(Pill, {
-    className: clsx(
-      withBaseName(),
-      {
-        [withBaseName("pillActive")]: active || highlighted,
-        [withBaseName("pillLastVisible")]: lastVisible,
-        [withBaseName("hidden")]: hidden
-      },
-      className
-    ),
-    disabled,
-    onDelete: isRemovable ? handleDelete : void 0,
-    ref,
-    role: "option",
-    tabIndex: void 0,
-    variant: isRemovable ? "closable" : "basic",
-    ...restProps
-  });
+  return /* @__PURE__ */ jsxs(
+    Pill,
+    {
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("pillActive")]: active || highlighted,
+          [withBaseName("pillLastVisible")]: lastVisible,
+          [withBaseName("hidden")]: hidden
+        },
+        className
+      ),
+      disabled,
+      tabIndex: -1,
+      onClick: isRemovable ? handleDelete : void 0,
+      ref,
+      role: "option",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: withBaseName("label"), children: label }),
+        isRemovable && /* @__PURE__ */ jsx(CloseIcon, {})
+      ]
+    }
+  );
 });
 export { InputPill };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import { ~~clsx~~ } from \"~~clsx~~\";\nimport { ~~memo,~~ ~~MutableRefObject, useRef~~ } from \"~~react~~\";\nimport { ~~makePrefixer~~, ~~useIsomorphicLayoutEffect~~ } from \"~~@salt-ds/core~~\";\nimport { getWidth } from \"./useWidth\";\~~nimport { Pill, PillProps } from \"../../pill\";\~~n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = ~~Omit<\n~~ PillProps~~<\"basic\"~~ ~~\| \"closable\">,\n \"variant\" \| \"onDelete\" \| \"clickable\"\n>~~ & {\n /*\n An ref object holds pills index map to width.\n /\n pillsRef: MutableRefObject<~~{ [index:~~ number]: number \| undefined ~~}>;\~~n /\n Index of the pill within Input.\n /\n index: number;\n /\n Whether the pill is the last visible one within Input.\n /\n lastVisible?: boolean;\n /\n Whether the pill is highlighted.\n /\n highlighted?: boolean;\n /\n Whether the pill is active.\n /\n active?: boolean;\n /\n Callback when pill is deleted.\n */\n onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n const {\n active,\n className,\n disabled,\n hidden,\n highlighted,\n index,\n lastVisible,\n onDelete,\n pillsRef,\n ~~tabIndex: tabIndexProp,\n~~ ...restProps\n } = props;\n\n const ref = useRef<~~HTMLDivElement~~ \| null>(null);\n const isRemovable = Boolean(onDelete);\n\n // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n // We need to collect widths before the calculation\n useIsomorphicLayoutEffect(() => {\n if (!isRemovable && pillsRef.current) {\n pillsRef.current[index] = getWidth(ref.current);\n }\n }, [pillsRef, index, isRemovable, lastVisible]);\n\n useIsomorphicLayoutEffect(\n () => () => {\n pillsRef.current[index] = undefined;\n },\n [pillsRef, index]\n );\n\n const handleDelete = () => {\n onDelete?.(index);\n };\n\n return (\n <Pill\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"pillActive\")]: active \|\| highlighted,\n [withBaseName(\"pillLastVisible\")]: lastVisible,\n [withBaseName(\"hidden\")]: hidden,\n },\n className\n )}\n disabled={disabled}\n ~~onDelete~~={isRemovable ? handleDelete : undefined}\n ref={ref}\n role=\"option\"\n // style={useMemo(() => ({ maxWidth }), [maxWidth])}\n ~~tabIndex=~~{~~undefined~~}\n ~~variant~~={~~isRemovable ?~~ \"~~closable~~\" ~~: \"basic\"~~}\n {~~...restProps~~}\n ~~/>\~~n );\n});\n"],"names":["InputPill"],"mappings":"~~;;;;;;;;;AAMA~~,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA~~,CAAA~~;~~AAgC1C~~,MAAM,~~SAAY~~,~~GAAA~~,IAAA,CAAK,SAASA,UAAAA,CAAU,~~KAAuB~~,~~EAAA~~;AACtE,~~EAAM~~,~~MAAA~~;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,~~WAAA~~;AAAA,IACA,~~QAAA~~;AAAA,IACA,QAAA;AAAA,IACA,~~QAAU,EAAA,YAAA~~;AAAA,~~IACP~~,~~GAAA,SAAA~~;AAAA,~~GACD~~,~~GAAA~~,KAAA~~,CAAA~~;AAEJ,~~EAAM~~,~~MAAA~~,GAAA,GAAM,~~OAA8B~~,IAAI,CAAA~~,CAAA~~;~~AAC9C~~,~~EAAM~~,~~MAAA~~,WAAA,GAAc,QAAQ,QAAQ,CAAA,~~CAAA~~;~~AAIpC~~,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,~~IAAA,~~CAAC,~~WAAe~~,~~IAAA~~,QAAA,CAAS,~~OAAS~~,~~EAAA~~;AACpC,MAAA,QAAA,CAAS,~~OAAQ~~,~~CAAA~~,~~KAAA~~,CAAA,~~GAAS~~,~~QAAS~~,~~CAAA~~,~~GAAA~~,~~CAAI,~~OAAO,CAAA~~,CAAA~~;AAAA,~~KAChD~~;AAAA,~~KACC~~,CAAC,QAAA,EAAU,~~KAAO~~,~~EAAA~~,WAAA,EAAa,WAAW,CAAC,CAAA~~,CAAA~~;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,~~QAAQ~~,~~KAAS~~,CAAA,~~GAAA~~,~~KAAA~~,~~CAAA~~,CAAA;AAAA,~~KAC5B;AAAA,~~IACA,CAAC,UAAU,KAAK~~,CAAA~~;AAAA,GAClB~~,CAAA~~;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,~~IAAW~~,QAAA,IAAA,IAAA,GAAA,~~KAAA~~,~~CAAA,~~GAAA,QAAA,~~CAAA~~,KAAA,CAAA~~,CAAA~~;AAAA,~~GACb~~,CAAA;AAEA,EAAA,~~uBACG~~,~~GAAA~~,~~CAAA~~,IAAA,~~EAAA~~;AAAA,~~IACC~~,~~SAAW~~,~~EAAA~~,IAAA;AAAA,~~MACT~~,~~YAAa~~,~~EAAA~~;AAAA,~~MACb~~;AAAA,~~QACE~~,CAAC,YAAA,CAAa,YAAY,~~CAAA~~,~~GAAI~~,~~MAAU~~,~~IAAA~~,WAAA;AAAA,~~QACxC~~,CAAC,~~YAAa~~,~~CAAA~~,iBAAiB,~~CAAI~~,~~GAAA~~,WAAA;AAAA,~~QACnC~~,CAAC,~~YAAa~~,~~CAAA~~,QAAQ,~~CAAI~~,~~GAAA,MAAA~~;AAAA,~~OAC5B~~;AAAA,~~MACA,SAAA~~;AAAA,~~KACF~~;AAAA,~~IACA~~,QAAA;AAAA,~~IACA~~,QAAA,EAAU,cAAc,~~YAAe~~,~~GAAA~~,~~KAAA,CAAA~~;AAAA,~~IACvC~~,GAAA;AAAA,~~IACA~~,~~IAAK~~,~~EAAA~~,QAAA;AAAA,~~IAEL~~,~~QAAU~~,~~EAAA~~,~~KAAA~~,~~CAAA~~;AAAA,~~IACV~~,~~OAAA~~,~~EAAS~~,~~cAAc~~,~~UAAa~~,~~GAAA~~,~~OAAA~~;AAAA,~~IACnC~~,~~GAAG~~,SAAA;AAAA,~~GACN,CAAA,CAAA~~;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import {\n makePrefixer,\n Pill,\n type PillProps,\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;AAiC1C,MAAM,SAAA,GAAY,IAAA,CAAK,SAASA,UAAAA,CAAU,KAAA,EAAuB;AACtE,EAAA,MAAM;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,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,GAAA,GAAM,OAAiC,IAAI,CAAA;AACjD,EAAA,MAAM,WAAA,GAAc,QAAQ,QAAQ,CAAA;AACpC,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,EAAQ;AAG9B,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,WAAA,IAAe,QAAA,CAAS,OAAA,EAAS;AACpC,MAAA,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAA,GAAI,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,WAAW,CAAC,CAAA;AAE9C,EAAA,yBAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAA,GAAI,MAAA;AAAA,IAC5B,CAAA;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,GAClB;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,MAAA,IAAU,WAAA;AAAA,UACxC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,WAAA;AAAA,UACnC,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAU,EAAA;AAAA,MACV,OAAA,EAAS,cAAc,YAAA,GAAe,MAAA;AAAA,MACtC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MAEJ,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC9C,WAAA,wBAAgB,SAAA,EAAA,EAAU;AAAA;AAAA;AAAA,GAC7B;AAEJ,CAAC;;;;"}

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

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { makePrefixer } from '@salt-ds/core';
-import css_248z from './InputRuler.css.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import css_248z from './InputRuler.css.js';
 const withBaseName = makePrefixer("saltInputRuler");
 const InputRuler = forwardRef(function InputRuler2(props, ref) {
@@ -14,11 +14,7 @@ const InputRuler = forwardRef(function InputRuler2(props, ref) {
     css: css_248z,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsx("span", {
-    className: withBaseName(),
-    ref,
-    children: value
-  });
+  return /* @__PURE__ */ jsx("span", { className: withBaseName(), ref, children: value });
 });
 export { InputRuler };

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

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

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

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

package/dist-es/tokenized-input/internal/defaultItemToString.js CHANGED Viewed

@@ -4,7 +4,7 @@ const defaultItemToString = (item) => {
   if (!isPlainObject(item)) {
     return String(item);
   }
-  if (Object.prototype.hasOwnProperty.call(item, "label")) {
+  if (Object.hasOwn(item, "label")) {
     return String(item.label);
   }
   if (process.env.NODE_ENV !== "production") {

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

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

package/dist-es/tokenized-input/internal/getCursorPosition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getCursorPosition.js","sources":["../src/tokenized-input/internal/getCursorPosition.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nexport const getCursorPosition = (\n inputRef: MutableRefObject<HTMLInputElement \| null>\n) => {\n if (inputRef.current) {\n const { selectionStart, selectionEnd } = inputRef.current;\n\n // if there is no selection range\n if (selectionStart != null && selectionStart === selectionEnd) {\n return selectionStart;\n }\n }\n\n return -1;\n};\n"],"names":[],"mappings":"~~AACa~~,~~MAAA~~,iBAAA,GAAoB,CAC/B,~~QACG~~,~~KAAA~~;AACH,EAAA,IAAI,SAAS,~~OAAS~~,~~EAAA~~;AACpB,IAAA,MAAM,EAAE,cAAA,EAAgB,~~YAAa~~,~~EAAA~~,GAAI,~~QAAS~~,~~CAAA~~,OAAA~~,CAAA~~;AAGlD,IAAI,~~IAAA,~~cAAA,IAAkB,IAAQ,~~IAAA,~~cAAA,KAAmB,~~YAAc~~,~~EAAA~~;AAC7D,~~MAAO~~,~~OAAA~~,cAAA~~,CAAA~~;AAAA,~~KACT~~;AAAA,~~GACF~~;AAEA,~~EAAO~~,~~OAAA~~,~~CAAA,CAAA,CAAA~~;AACT;;;;"}
1	+ {"version":3,"file":"getCursorPosition.js","sources":["../src/tokenized-input/internal/getCursorPosition.ts"],"sourcesContent":["import type { MutableRefObject } from \"react\";\nexport const getCursorPosition = (\n inputRef: MutableRefObject<HTMLInputElement \| null>,\n) => {\n if (inputRef.current) {\n const { selectionStart, selectionEnd } = inputRef.current;\n\n // if there is no selection range\n if (selectionStart != null && selectionStart === selectionEnd) {\n return selectionStart;\n }\n }\n\n return -1;\n};\n"],"names":[],"mappings":"AACO,MAAM,iBAAA,GAAoB,CAC/B,QAAA,KACG;AACH,EAAA,IAAI,SAAS,OAAA,EAAS;AACpB,IAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAa,GAAI,QAAA,CAAS,OAAA;AAGlD,IAAA,IAAI,cAAA,IAAkB,IAAA,IAAQ,cAAA,KAAmB,YAAA,EAAc;AAC7D,MAAA,OAAO,cAAA;AAAA,IACT;AAAA,EACF;AAEA,EAAA,OAAO,EAAA;AACT;;;;"}

package/dist-es/tokenized-input/internal/isPlainObject.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"isPlainObject.js","sources":["../src/tokenized-input/internal/isPlainObject.ts"],"sourcesContent":["~~export~~ type PlainObject = { [name: string]: any };\n\nexport const isPlainObject = (obj: any): obj is PlainObject =>\n Object.prototype.toString.call(obj) === \"[object Object]\";\n"],"names":[],"mappings":"~~AAEa~~,~~MAAA~~,aAAA,GAAgB,CAAC,~~GAC5B~~,~~KAAA~~,MAAA,CAAO,UAAU,~~QAAS~~,~~CAAA~~,IAAA,CAAK,GAAG,~~CAAM~~,~~KAAA~~;;;;"}
1	+ {"version":3,"file":"isPlainObject.js","sources":["../src/tokenized-input/internal/isPlainObject.ts"],"sourcesContent":["// biome-ignore lint/suspicious/noExplicitAny: this is a valid use case for `any`\nexport type PlainObject = { [name: string]: any };\n\n// biome-ignore lint/suspicious/noExplicitAny: this is a valid use case for `any`\nexport const isPlainObject = (obj: any): obj is PlainObject =>\n Object.prototype.toString.call(obj) === \"[object Object]\";\n"],"names":[],"mappings":"AAIO,MAAM,aAAA,GAAgB,CAAC,GAAA,KAC5B,MAAA,CAAO,UAAU,QAAA,CAAS,IAAA,CAAK,GAAG,CAAA,KAAM;;;;"}

package/dist-es/tokenized-input/internal/useResizeObserver.js.map CHANGED Viewed

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

package/dist-es/tokenized-input/internal/useWidth.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { useState } from 'react';
 import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useState } from 'react';
-const safeParseFloat = (target) => parseFloat(target || "0");
+const safeParseFloat = (target) => Number.parseFloat(target || "0");
 const getWidth = (node) => {
   if (node == null) {
     return 0;
@@ -23,7 +23,7 @@ const useWidth = (density) => {
   const [node, setNode] = useState(null);
   const [width, setWidth] = useState(0);
   useIsomorphicLayoutEffect(() => {
-    if (node !== null) {
+    if (node !== null && density) {
       setWidth(getWidth(node));
     }
   }, [node, density]);

package/dist-es/tokenized-input/internal/useWidth.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useWidth.js","sources":["../src/tokenized-input/internal/useWidth.ts"],"sourcesContent":["import { ~~useState~~ } from \"~~react~~\";\nimport { ~~Density,~~ ~~useIsomorphicLayoutEffect~~ } from \"~~@salt-ds/core~~\";\n\nconst safeParseFloat = (target?: string) => parseFloat(target \|\| \"0\");\n\nexport const getWidth = (node: HTMLElement \| null) => {\n if (node == null) {\n return 0;\n }\n\n const style = window.getComputedStyle(node);\n const margin =\n safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);\n\n let dimension;\n\n if (style.display === \"none\") {\n const nodeDisplay = node.style.display;\n\n node.style.display = \"inline-block\";\n dimension = node.getBoundingClientRect();\n node.style.display = nodeDisplay;\n } else {\n dimension = node.getBoundingClientRect();\n }\n\n return dimension.width + margin;\n};\n\n/*\n This records the width of a component when it's rendered\n */\nexport const useWidth = (\n density: Density\n): [(newNode: any) => void, number] => {\n const [node, setNode] = useState<HTMLElement \| null>(null);\n const [width, setWidth] = useState<number>(0);\n\n useIsomorphicLayoutEffect(() => {\n if (node !== null) {\n setWidth(getWidth(node));\n }\n }, [node, density]);\n\n return [setNode, width];\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,~~cAAiB~~,~~GAAA,~~CAAC,~~MAAoB~~,~~KAAA~~,UAAA,CAAW,UAAU,GAAG,CAAA~~,CAAA~~;~~AAEvD~~,~~MAAA~~,QAAA,GAAW,CAAC,~~IAA6B~~,~~KAAA~~;AACpD,EAAA,IAAI,QAAQ,~~IAAM~~,~~EAAA~~;AAChB,~~IAAO~~,~~OAAA~~,CAAA~~,CAAA~~;AAAA,~~GACT~~;AAEA,~~EAAM~~,~~MAAA~~,KAAA,GAAQ,~~MAAO~~,~~CAAA~~,gBAAA,CAAiB,IAAI,CAAA~~,CAAA~~;AAC1C,EAAA,MAAM,SACJ,~~cAAe~~,~~CAAA~~,KAAA,CAAM,UAAU,~~CAAI~~,~~GAAA~~,cAAA,CAAe,MAAM,WAAW,CAAA~~,CAAA~~;AAErE,~~EAAI~~,~~IAAA~~,SAAA~~,CAAA~~;AAEJ,~~EAAI~~,~~IAAA~~,KAAA,CAAM,YAAY,~~MAAQ~~,~~EAAA~~;AAC5B,~~IAAM~~,~~MAAA~~,WAAA,GAAc,KAAK,~~KAAM~~,~~CAAA~~,OAAA~~,CAAA~~;AAE/B,IAAA,IAAA,CAAK,MAAM,~~OAAU~~,~~GAAA~~,cAAA~~,CAAA~~;AACrB,IAAA,SAAA,GAAY,KAAK,~~qBAAsB~~,~~EAAA,CAAA~~;AACvC,IAAA,IAAA,CAAK,MAAM,~~OAAU~~,~~GAAA~~,WAAA~~,CAAA~~;AAAA,~~GAChB~~,~~MAAA~~;AACL,IAAA,SAAA,GAAY,KAAK,~~qBAAsB~~,~~EAAA,CAAA~~;AAAA,~~GACzC~~;AAEA,EAAA,OAAO,UAAU,~~KAAQ~~,~~GAAA~~,MAAA~~,CAAA~~;AAC3B~~,EAAA~~;~~AAKa~~,~~MAAA~~,QAAA,GAAW,CACtB,~~OACqC~~,~~KAAA~~;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,IAAI,CAAA~~,CAAA~~;AACzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAiB,CAAC,CAAA~~,CAAA~~;AAE5C,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,~~SAAS~~,~~IAAM~~,~~EAAA~~;~~AACjB~~,~~MAAS~~,QAAA,~~CAAA~~,QAAA,CAAS,IAAI,CAAC,CAAA~~,CAAA~~;AAAA,~~KACzB~~;AAAA,~~GACC~~,~~EAAA~~,CAAC,~~IAAM~~,~~EAAA~~,OAAO,CAAC,CAAA~~,CAAA~~;AAElB,~~EAAO~~,~~OAAA~~,CAAC,SAAS,KAAK,CAAA~~,CAAA~~;AACxB;;;;"}
1	+ {"version":3,"file":"useWidth.js","sources":["../src/tokenized-input/internal/useWidth.ts"],"sourcesContent":["import { type Density, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useState } from \"react\";\n\nconst safeParseFloat = (target?: string) => Number.parseFloat(target \|\| \"0\");\n\nexport const getWidth = (node: HTMLElement \| null) => {\n if (node == null) {\n return 0;\n }\n\n const style = window.getComputedStyle(node);\n const margin =\n safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);\n\n let dimension: DOMRect;\n\n if (style.display === \"none\") {\n const nodeDisplay = node.style.display;\n\n node.style.display = \"inline-block\";\n dimension = node.getBoundingClientRect();\n node.style.display = nodeDisplay;\n } else {\n dimension = node.getBoundingClientRect();\n }\n\n return dimension.width + margin;\n};\n\n/*\n This records the width of a component when it's rendered\n */\nexport const useWidth = (\n density: Density,\n // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n): [(newNode: any) => void, number] => {\n const [node, setNode] = useState<HTMLElement \| null>(null);\n const [width, setWidth] = useState<number>(0);\n\n useIsomorphicLayoutEffect(() => {\n if (node !== null && density) {\n setWidth(getWidth(node));\n }\n }, [node, density]);\n\n return [setNode, width];\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,iBAAiB,CAAC,MAAA,KAAoB,MAAA,CAAO,UAAA,CAAW,UAAU,GAAG,CAAA;AAEpE,MAAM,QAAA,GAAW,CAAC,IAAA,KAA6B;AACpD,EAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,IAAA,OAAO,CAAA;AAAA,EACT;AAEA,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,gBAAA,CAAiB,IAAI,CAAA;AAC1C,EAAA,MAAM,SACJ,cAAA,CAAe,KAAA,CAAM,UAAU,CAAA,GAAI,cAAA,CAAe,MAAM,WAAW,CAAA;AAErE,EAAA,IAAI,SAAA;AAEJ,EAAA,IAAI,KAAA,CAAM,YAAY,MAAA,EAAQ;AAC5B,IAAA,MAAM,WAAA,GAAc,KAAK,KAAA,CAAM,OAAA;AAE/B,IAAA,IAAA,CAAK,MAAM,OAAA,GAAU,cAAA;AACrB,IAAA,SAAA,GAAY,KAAK,qBAAA,EAAsB;AACvC,IAAA,IAAA,CAAK,MAAM,OAAA,GAAU,WAAA;AAAA,EACvB,CAAA,MAAO;AACL,IAAA,SAAA,GAAY,KAAK,qBAAA,EAAsB;AAAA,EACzC;AAEA,EAAA,OAAO,UAAU,KAAA,GAAQ,MAAA;AAC3B;AAKO,MAAM,QAAA,GAAW,CACtB,OAAA,KAEqC;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,IAAI,CAAA;AACzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAiB,CAAC,CAAA;AAE5C,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,IAAA,KAAS,QAAQ,OAAA,EAAS;AAC5B,MAAA,QAAA,CAAS,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA,IACzB;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,OAAO,CAAC,CAAA;AAElB,EAAA,OAAO,CAAC,SAAS,KAAK,CAAA;AACxB;;;;"}