@salt-ds/lab 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist-es/packages/lab/src/tokenized-input/TokenizedInputBase.js.map

@@ -1 +0,0 @@
-{"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 { Input, InputProps } from \"../input\";\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 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"],"mappings":"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"}

package/dist-es/packages/lab/src/tokenized-input/internal/InputPill.js

@@ -1,62 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-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) {
-  const {
-    active,
-    className,
-    disabled,
-    hidden,
-    highlighted,
-    index,
-    lastVisible,
-    onDelete,
-    pillsRef,
-    tabIndex: tabIndexProp,
-    ...restProps
-  } = props;
-  const ref = useRef(null);
-  const isRemovable = Boolean(onDelete);
-  useIsomorphicLayoutEffect(() => {
-    if (!isRemovable && pillsRef.current) {
-      pillsRef.current[index] = getWidth(ref.current);
-    }
-  }, [pillsRef, index, isRemovable, lastVisible]);
-  useIsomorphicLayoutEffect(
-    () => () => {
-      pillsRef.current[index] = void 0;
-    },
-    [pillsRef, index]
-  );
-  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
-  });
-});
-
-export { InputPill };
-//# sourceMappingURL=InputPill.js.map

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

@@ -1 +0,0 @@
-{"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;;;;"}

package/dist-es/packages/lab/src/tokenized-input/internal/InputRuler.css.js

@@ -1,7 +0,0 @@
-import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".saltInputRuler {\n  position: absolute;\n  left: 0;\n  white-space: nowrap;\n  visibility: hidden;\n  overflow: hidden;\n  max-width: 100%;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };
-//# sourceMappingURL=InputRuler.css.js.map

package/dist-es/packages/lab/src/tokenized-input/internal/InputRuler.css.js.map

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

package/dist-es/packages/lab/src/tokenized-input/internal/InputRuler.js

@@ -1,17 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { makePrefixer } from '@salt-ds/core';
-import './InputRuler.css.js';
-
-const withBaseName = makePrefixer("saltInputRuler");
-const InputRuler = forwardRef(function InputRuler2(props, ref) {
-  const { value } = props;
-  return /* @__PURE__ */ jsx("span", {
-    className: withBaseName(),
-    ref,
-    children: value
-  });
-});
-
-export { InputRuler };
-//# sourceMappingURL=InputRuler.js.map

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

@@ -1 +0,0 @@
-{"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.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  return (\n    <span className={withBaseName()} ref={ref}>\n      {value}\n    </span>\n  );\n});\n"],"names":["InputRuler"],"mappings":";;;;;AAIA,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,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,YAAa,EAAA;AAAA,IAAG,GAAA;AAAA,IAC9B,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/tokenized-input/useTokenizedInput.js

@@ -1,509 +0,0 @@
-import { useDensity, useId, useControlled, ownerWindow } from '@salt-ds/core';
-import copy from 'clipboard-copy';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { escapeRegExp } from '../utils/escapeRegExp.js';
-import { useEventCallback } from '../utils/useEventCallback.js';
-import '../utils/useFloatingUI.js';
-import { defaultItemToString } from './internal/defaultItemToString.js';
-import { getCursorPosition } from './internal/getCursorPosition.js';
-import '../form-field-context/FormFieldContext.js';
-import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
-
-const BLUR_TIMEOUT = 200;
-const SINGLE_LINE_HEIGHT_MAP = {
-  touch: 45,
-  low: 36,
-  medium: 28,
-  high: 23
-};
-function isValidItem(data) {
-  return typeof data === "string" && Boolean(data.length) || typeof data !== "string" && data != null;
-}
-function useTokenizedInput(props) {
-  validateProps(props);
-  const {
-    inFormField,
-    popoutMode,
-    popoutActions,
-    setIsPoppedOut,
-    setManagedPopout,
-    setIntendedHeight,
-    a11yProps: {
-      "aria-labelledby": ariaLabelledBy,
-      disabled: formFieldDisabled
-    } = {}
-  } = useFormFieldProps();
-  const density = useDensity();
-  const {
-    delimiter = ",",
-    initialSelectedItems = [],
-    itemToString = defaultItemToString,
-    stringToItem = (_, value2) => value2.trim(),
-    disabled = formFieldDisabled,
-    disableAddOnBlur,
-    onFocus,
-    onBlur,
-    onClick,
-    onExpand,
-    onCollapse,
-    onKeyUp,
-    onKeyDown,
-    onInputSelect,
-    onInputChange,
-    onInputFocus,
-    onInputBlur,
-    onClear,
-    id: idProp,
-    value: valueProp,
-    expanded: expandedProp,
-    selectedItems: selectedItemsProp,
-    onChange: onChangeProp,
-    "aria-label": ariaLabel,
-    ...restProps
-  } = props;
-  const id = useId(idProp);
-  const [value, setValue, isInputControlled] = useControlled({
-    controlled: valueProp,
-    default: "",
-    name: "TokenizedInput",
-    state: "value"
-  });
-  const [
-    selectedItems = [],
-    setSelectedItems,
-    isSelectionControlled
-  ] = useControlled({
-    controlled: selectedItemsProp,
-    default: initialSelectedItems,
-    name: "TokenizedInput",
-    state: "selectedItems"
-  });
-  const [expanded, setExpanded, isExpandedControlled] = useControlled({
-    controlled: expandedProp,
-    default: false,
-    name: "TokenizedInput",
-    state: "expanded"
-  });
-  const [activeIndices, setActiveIndices] = useState([]);
-  const [highlightedIndex, setHighlightedIndex] = useState(
-    void 0
-  );
-  const [focused, setFocusedState] = useState(false);
-  const inputRef = useRef(null);
-  const blurTimeout = useRef(null);
-  const preventBlurOnCopy = useRef(false);
-  const hasActiveItems = Boolean(activeIndices.length);
-  const delimiters = [].concat(delimiter);
-  const primaryDelimiter = delimiters[0];
-  const delimiterRegex = new RegExp(
-    delimiters.map(escapeRegExp).join("|"),
-    "gi"
-  );
-  const onChange = useEventCallback((selectedItems2) => {
-    if (onChangeProp) {
-      onChangeProp(selectedItems2);
-    }
-  });
-  const cancelBlur = useCallback(() => {
-    if (blurTimeout.current) {
-      clearTimeout(blurTimeout.current);
-    }
-    blurTimeout.current = null;
-  }, []);
-  const focusInput = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      if (popoutMode && setIsPoppedOut) {
-        setIsPoppedOut(true);
-      }
-    }
-  }, [popoutMode, setIsPoppedOut]);
-  useEffect(
-    () => () => {
-      cancelBlur();
-    },
-    [cancelBlur]
-  );
-  useEffect(() => {
-    if (expanded) {
-      focusInput();
-    }
-  }, [expanded, focusInput]);
-  useEffect(() => {
-    if (popoutMode && setManagedPopout) {
-      setManagedPopout(true);
-      setIntendedHeight(SINGLE_LINE_HEIGHT_MAP[density]);
-    }
-  }, [density, popoutMode, setIntendedHeight, setManagedPopout]);
-  const updateInputValue = (newValue) => {
-    if (!isInputControlled) {
-      setValue(newValue);
-    }
-  };
-  const updateSelectedItems = useCallback(
-    (action) => {
-      if (!isSelectionControlled) {
-        setSelectedItems((prevSelectedItems) => {
-          const newItems = typeof action === "function" ? action(prevSelectedItems) : action;
-          if (newItems !== prevSelectedItems) {
-            onChange(newItems);
-          }
-          return newItems;
-        });
-      } else {
-        onChange(typeof action === "function" ? action(selectedItems) : action);
-      }
-    },
-    [isSelectionControlled, setSelectedItems, onChange, selectedItems]
-  );
-  const updateExpanded = (newExpanded) => {
-    if (!isExpandedControlled) {
-      setExpanded(newExpanded);
-    }
-    if (newExpanded) {
-      onExpand && onExpand();
-    } else {
-      onCollapse && onCollapse();
-    }
-    if (popoutMode && popoutActions) {
-      popoutActions.refresh();
-    }
-  };
-  const setFocused = (newState) => {
-    setFocusedState(newState);
-  };
-  const resetInput = () => {
-    updateInputValue("");
-    setHighlightedIndex(void 0);
-    setActiveIndices([]);
-  };
-  const removeItems = useCallback(
-    (itemIndices) => {
-      updateSelectedItems(
-        (prevSelectedItems) => prevSelectedItems && (prevSelectedItems.length === 0 ? prevSelectedItems : prevSelectedItems.filter(
-          (_, index) => itemIndices.indexOf(index) === -1
-        ))
-      );
-    },
-    [updateSelectedItems]
-  );
-  const handleInputFocus = (event) => {
-    event.stopPropagation();
-    if (preventBlurOnCopy.current) {
-      preventBlurOnCopy.current = false;
-      setActiveIndices(
-        Array.from(
-          { length: selectedItems ? selectedItems.length : 0 },
-          (_, index) => index
-        )
-      );
-      return;
-    }
-    setFocused(true);
-    if (onInputFocus) {
-      onInputFocus(event);
-    }
-    if (blurTimeout.current !== null) {
-      cancelBlur();
-    } else {
-      updateExpanded(true);
-      if (onFocus) {
-        onFocus(event);
-      }
-    }
-  };
-  const handleInputBlur = (event) => {
-    event.stopPropagation();
-    setFocused(false);
-    setHighlightedIndex(void 0);
-    setActiveIndices([]);
-    if (onInputBlur) {
-      onInputBlur(event);
-    }
-    handleBlur(event);
-  };
-  const handleBlur = (event) => {
-    if (preventBlurOnCopy.current) {
-      return focusInput();
-    }
-    event.persist();
-    blurTimeout.current = setTimeout(() => {
-      blurTimeout.current = null;
-      updateExpanded(false);
-      if (!disableAddOnBlur) {
-        handleAddItems(value, true);
-      }
-      if (onBlur) {
-        onBlur(event);
-      }
-      if (popoutMode && setIsPoppedOut) {
-        setIsPoppedOut(false);
-      }
-    }, BLUR_TIMEOUT);
-  };
-  const handleClick = (event) => {
-    updateExpanded(true);
-    setActiveIndices([]);
-    focusInput();
-    if (onClick) {
-      onClick(event);
-    }
-  };
-  const handleInputChange = (event) => {
-    setHighlightedIndex(void 0);
-    if (onInputChange) {
-      onInputChange(event);
-    }
-    const newValue = event.target.value;
-    if (delimiterRegex.test(newValue)) {
-      handleAddItems(newValue);
-    } else {
-      updateInputValue(newValue);
-    }
-  };
-  const handleAddItems = (newValue, appendOnly) => {
-    if (!newValue || newValue.length === 0) {
-      return;
-    }
-    resetInput();
-    const newItems = newValue.split(delimiterRegex).reduce((values, part) => {
-      const newItem = stringToItem(
-        hasActiveItems ? values : selectedItems.concat(values),
-        part
-      );
-      return isValidItem(newItem) ? values.concat(newItem) : values;
-    }, []);
-    if (newItems.length) {
-      updateSelectedItems(
-        (prevSelectedItems = []) => hasActiveItems && !appendOnly ? newItems : prevSelectedItems.concat(newItems)
-      );
-    }
-  };
-  const handleRemoveItem = useCallback(
-    (itemIndex) => {
-      focusInput();
-      if (itemIndex) {
-        removeItems([itemIndex]);
-      }
-    },
-    [focusInput, removeItems]
-  );
-  const handleClear = (event) => {
-    updateSelectedItems([]);
-    resetInput();
-    focusInput();
-    if (onClear) {
-      onClear(event);
-    }
-    if (popoutMode && popoutActions) {
-      popoutActions.refresh();
-    }
-  };
-  const cursorAtInputStart = () => getCursorPosition(inputRef) === 0 && Boolean(selectedItems.length);
-  const highlightAtPillGroupEnd = () => highlightedIndex === selectedItems.length - 1;
-  const pillGroupKeyDownHandlers = {
-    ArrowLeft: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(
-        (prevHighlightedIndex) => prevHighlightedIndex == null ? selectedItems.length - 1 : Math.max(0, prevHighlightedIndex - 1)
-      );
-    },
-    ArrowRight: (event) => {
-      if (highlightAtPillGroupEnd()) {
-        return setHighlightedIndex(void 0);
-      }
-      event.preventDefault();
-      setHighlightedIndex(
-        (prevHighlightedIndex) => prevHighlightedIndex == null ? prevHighlightedIndex : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1)
-      );
-    },
-    Backspace: (event) => {
-      event.preventDefault();
-      handleRemoveItem(highlightedIndex);
-      setHighlightedIndex(
-        (prevHighlightedIndex) => prevHighlightedIndex == null ? prevHighlightedIndex : Math.max(0, prevHighlightedIndex - 1)
-      );
-    },
-    Home: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(0);
-    },
-    End: (event) => {
-      event.preventDefault();
-      setHighlightedIndex(selectedItems.length - 1);
-    },
-    Enter: (event) => {
-      event.preventDefault();
-      handleRemoveItem(highlightedIndex);
-    },
-    Delete: (event) => {
-      event.preventDefault();
-      handleRemoveItem(highlightedIndex);
-    },
-    " ": (event) => {
-      event.preventDefault();
-      handleRemoveItem(highlightedIndex);
-    }
-  };
-  const inputKeyDownHandlers = {
-    ArrowLeft: (event) => {
-      if (cursorAtInputStart()) {
-        event.preventDefault();
-        setHighlightedIndex(selectedItems.length - 1);
-      }
-    },
-    Backspace: () => {
-      if (hasActiveItems) {
-        removeItems(activeIndices);
-      } else if (cursorAtInputStart()) {
-        setHighlightedIndex(selectedItems.length - 1);
-      }
-    },
-    Delete: () => {
-      if (hasActiveItems) {
-        removeItems(activeIndices);
-      }
-    },
-    Enter: (event) => {
-      event.preventDefault();
-      if (hasActiveItems) {
-        removeItems(activeIndices);
-      } else {
-        handleAddItems(value);
-      }
-    }
-  };
-  const handleCtrlModifierKeyDown = (event) => {
-    const win = ownerWindow(event.target);
-    const supportClipboard = win.navigator && win.navigator.clipboard;
-    switch (event.key.toUpperCase()) {
-      case "A":
-        setHighlightedIndex(void 0);
-        setActiveIndices(
-          Array.from({ length: selectedItems.length }, (_, index) => index)
-        );
-        break;
-      case "C":
-        copy(
-          activeIndices.map((index) => itemToString(selectedItems[index])).concat(value != null ? String(value).trim() : "").filter(Boolean).join(primaryDelimiter)
-        ).then((result) => {
-          preventBlurOnCopy.current = !supportClipboard;
-          return result;
-        }).catch((error) => {
-          console.error(error);
-        });
-        break;
-      case "V":
-        break;
-      case "ARROWLEFT":
-        pillGroupKeyDownHandlers.ArrowLeft(event);
-        break;
-      case "ARROWRIGHT":
-        pillGroupKeyDownHandlers.ArrowRight(event);
-        break;
-      case "BACKSPACE":
-        if (cursorAtInputStart()) {
-          handleRemoveItem(selectedItems.length - 1);
-        }
-        break;
-      case "CONTROL":
-      case "META":
-        break;
-      default:
-        setActiveIndices([]);
-    }
-  };
-  const handleCommonKeyDown = (event) => {
-    const eventKey = event.key.toUpperCase();
-    if (eventKey === "ESCAPE") {
-      event.preventDefault();
-      resetInput();
-    } else if (eventKey === "TAB" && !disableAddOnBlur) {
-      handleAddItems(value);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (event.defaultPrevented) {
-      return;
-    }
-    if (event.ctrlKey || event.metaKey || ["CONTROL", "META"].indexOf(event.key.toUpperCase()) !== -1) {
-      handleCtrlModifierKeyDown(event);
-    } else {
-      let handler;
-      if (highlightedIndex == null) {
-        handler = inputKeyDownHandlers[event.key];
-        setActiveIndices([]);
-      } else {
-        handler = pillGroupKeyDownHandlers[event.key];
-      }
-      if (handler != null) {
-        handler(event);
-      } else {
-        handleCommonKeyDown(event);
-      }
-    }
-    if (popoutMode && popoutActions) {
-      popoutActions.refresh();
-    }
-  };
-  const state = {
-    value,
-    selectedItems,
-    activeIndices,
-    highlightedIndex,
-    expanded,
-    focused: !inFormField && focused
-  };
-  const eventHandlers = {
-    onFocus,
-    onBlur: expanded ? handleBlur : onBlur,
-    onClick: handleClick,
-    onInputSelect,
-    onInputChange: handleInputChange,
-    onInputFocus: handleInputFocus,
-    onInputBlur: handleInputBlur,
-    onKeyDown: handleKeyDown,
-    onRemoveItem: handleRemoveItem,
-    onClear: handleClear
-  };
-  return {
-    inputRef,
-    state,
-    helpers: {
-      cancelBlur,
-      setValue,
-      setSelectedItems,
-      setHighlightedIndex,
-      setFocused,
-      updateExpanded
-    },
-    inputProps: {
-      id,
-      itemToString,
-      disabled,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel,
-      ...state,
-      ...restProps,
-      ...disabled ? {} : eventHandlers
-    }
-  };
-}
-const validateProps = function validateProps2(props) {
-  if (process.env.NODE_ENV !== "production") {
-    const { delimiter } = props;
-    const invalidDelimiter = Array.isArray(delimiter) ? delimiter.every(isChar) : isChar(delimiter);
-    useEffect(() => {
-      console.warn(
-        "TokenizedInput delimiter should be a single character or an array of single characters"
-      );
-    }, [invalidDelimiter]);
-  }
-};
-const isChar = (value) => typeof value === "string" && value.length === 1;
-
-export { useTokenizedInput };
-//# sourceMappingURL=useTokenizedInput.js.map