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

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

@@ -0,0 +1,476 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var copy = require('clipboard-copy');
+var react = require('react');
+var escapeRegExp = require('../utils/escapeRegExp.js');
+var calcFirstHiddenIndex = require('./internal/calcFirstHiddenIndex.js');
+var useResizeObserver = require('./internal/useResizeObserver.js');
+var useWidth = require('./internal/useWidth.js');
+
+const getCursorPosition = (inputRef) => {
+  if (inputRef.current) {
+    const { selectionStart, selectionEnd } = inputRef.current;
+    if (selectionStart != null && selectionStart === selectionEnd) {
+      return selectionStart;
+    }
+  }
+  return -1;
+};
+const isCtrlModifier = (event) => {
+  return event.ctrlKey || event.metaKey || ["CONTROL", "META"].indexOf(event.key.toUpperCase()) !== -1;
+};
+function isValidItem(data) {
+  return typeof data === "string" && Boolean(data.length) || typeof data !== "string" && data != null;
+}
+function useTokenizedInputNext(props) {
+  const {
+    disabled: formFieldDisabled,
+    readOnly,
+    necessity,
+    validationStatus,
+    a11yProps: {
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy
+    } = {}
+  } = core.useFormFieldProps();
+  const {
+    delimiters = [","],
+    defaultSelected = [],
+    disabled = formFieldDisabled,
+    readOnly: readOnlyProp,
+    validationStatus: validationStatusProp,
+    disableAddOnBlur,
+    onBlur,
+    onClick,
+    onExpand,
+    onCollapse,
+    onKeyDown,
+    onInputChange,
+    onInputFocus,
+    onInputBlur,
+    onClear,
+    onChange,
+    id: idProp,
+    value: valueProp,
+    expanded: expandedProp,
+    selectedItems: selectedItemsProp,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedByProp,
+    expandButtonRef: expandButtonRefProp,
+    ...restProps
+  } = props;
+  const density = core.useDensity();
+  const id = core.useId(idProp);
+  const [focused, setFocused] = react.useState(false);
+  const [pillGroupWidth, setPillGroupWidth] = react.useState(null);
+  const [firstHiddenIndex, setFirstHiddenIndex] = react.useState(null);
+  const [activeIndices, setActiveIndices] = react.useState([]);
+  const [highlightedIndex, setHighlightedIndex] = react.useState(
+    void 0
+  );
+  const [expandButtonHookRef, expandButtonWidth] = useWidth.useWidth(density);
+  const [clearButtonRef, clearButtonWidth] = useWidth.useWidth(density);
+  const [statusAdornmentRef, statusAdornmentWidth] = useWidth.useWidth(density);
+  const [inputRef, inputWidth] = useWidth.useWidth(density);
+  const containerRef = react.useRef(null);
+  const pillsRef = react.useRef({});
+  const textAreaRef = react.useRef(null);
+  const preventBlurOnCopy = react.useRef(false);
+  const expandButtonRef = core.useForkRef(expandButtonHookRef, expandButtonRefProp);
+  const hasActiveItems = Boolean(activeIndices.length);
+  const primaryDelimiter = delimiters[0];
+  const delimiterRegex = react.useMemo(
+    () => new RegExp(delimiters.map(escapeRegExp.escapeRegExp).join("|"), "gi"),
+    [delimiters]
+  );
+  const [value, setValue, isInputControlled] = core.useControlled({
+    controlled: valueProp,
+    default: "",
+    name: "TokenizedInputNext",
+    state: "value"
+  });
+  const [selectedItems = [], setSelectedItems, isSelectionControlled] = core.useControlled({
+    controlled: selectedItemsProp,
+    default: defaultSelected,
+    name: "TokenizedInputNext",
+    state: "selectedItems"
+  });
+  const [expanded, setExpanded, isExpandedControlled] = core.useControlled({
+    controlled: expandedProp,
+    default: false,
+    name: "TokenizedInputNext",
+    state: "expanded"
+  });
+  const widthOffset = inputWidth + statusAdornmentWidth + (expanded ? clearButtonWidth : expandButtonWidth);
+  const containerObserverRef = useResizeObserver.useResizeObserver(
+    react.useCallback(
+      ([{ contentRect }]) => {
+        const padding = useWidth.getPadding(containerRef.current);
+        setPillGroupWidth(contentRect.width - padding - widthOffset);
+      },
+      [widthOffset]
+    )
+  );
+  core.useIsomorphicLayoutEffect(
+    () => () => {
+      setFirstHiddenIndex(null);
+    },
+    [density]
+  );
+  core.useIsomorphicLayoutEffect(
+    () => {
+      if (expanded) {
+        setFirstHiddenIndex(null);
+      } else if (pillGroupWidth != null) {
+        setFirstHiddenIndex(
+          calcFirstHiddenIndex.calcFirstHiddenIndex({
+            containerWidth: pillGroupWidth,
+            pillWidths: Object.values(pillsRef.current).filter(
+              Boolean
+            )
+          })
+        );
+      }
+    },
+    // Additional dependency on selectedItems is for the controlled version
+    [expanded, pillGroupWidth, selectedItems]
+  );
+  const focusInput = react.useCallback(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.focus();
+    }
+  }, []);
+  const updateInputValue = (newValue) => {
+    if (!isInputControlled) {
+      setValue(newValue);
+    }
+  };
+  const updateSelectedItems = react.useCallback(
+    (event, action) => {
+      if (!isSelectionControlled) {
+        setSelectedItems((prevSelectedItems) => {
+          const newItems = typeof action === "function" ? action(prevSelectedItems) : action;
+          if (newItems !== prevSelectedItems) {
+            onChange == null ? void 0 : onChange(event, newItems);
+          }
+          return newItems;
+        });
+      } else {
+        onChange == null ? void 0 : onChange(
+          event,
+          typeof action === "function" ? action(selectedItems) : action
+        );
+      }
+    },
+    [isSelectionControlled, onChange, selectedItems]
+  );
+  const updateExpanded = (event, newExpanded) => {
+    if (!isExpandedControlled) {
+      setExpanded(newExpanded);
+    }
+    if (newExpanded) {
+      focusInput();
+      onExpand == null ? void 0 : onExpand(event);
+    } else {
+      onCollapse == null ? void 0 : onCollapse(event);
+    }
+  };
+  const resetInput = () => {
+    updateInputValue("");
+    setHighlightedIndex(void 0);
+    setActiveIndices([]);
+  };
+  const removeItems = react.useCallback(
+    (event, itemIndices) => {
+      updateSelectedItems(
+        event,
+        (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;
+    }
+    onInputFocus == null ? void 0 : onInputFocus(event);
+    updateExpanded(event, true);
+    setFocused(true);
+  };
+  const handleBlur = (event) => {
+    onBlur == null ? void 0 : onBlur(event);
+    setFocused(false);
+    updateExpanded(event, false);
+  };
+  const handleInputBlur = (event) => {
+    const container = containerRef == null ? void 0 : containerRef.current;
+    const eventTarget = event.relatedTarget;
+    event.preventDefault();
+    event.stopPropagation();
+    setHighlightedIndex(void 0);
+    setActiveIndices([]);
+    if (!disableAddOnBlur) {
+      handleAddItems(event, value);
+    }
+    onInputBlur == null ? void 0 : onInputBlur(event);
+    if (eventTarget !== container && !(container == null ? void 0 : container.contains(eventTarget))) {
+      handleBlur(event);
+    }
+  };
+  const handleClick = (event) => {
+    updateExpanded(event, true);
+    setActiveIndices([]);
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleInputChange = (event) => {
+    setHighlightedIndex(void 0);
+    onInputChange == null ? void 0 : onInputChange(event);
+    const newValue = event.target.value;
+    if (delimiterRegex.test(newValue)) {
+      handleAddItems(event, newValue);
+    } else {
+      updateInputValue(newValue);
+    }
+  };
+  const handleAddItems = (event, newValue, appendOnly) => {
+    if (!newValue || newValue.length === 0) {
+      return;
+    }
+    resetInput();
+    const newItems = newValue.split(delimiterRegex).reduce((values, item) => {
+      const newItem = item.trim();
+      return isValidItem(newItem) ? values.concat(newItem) : values;
+    }, []);
+    if (newItems.length) {
+      updateSelectedItems(
+        event,
+        (prevSelectedItems = []) => hasActiveItems && true ? newItems : prevSelectedItems.concat(newItems)
+      );
+    }
+  };
+  const handleRemoveItem = (event, itemIndex) => {
+    focusInput();
+    if (itemIndex !== void 0 && !readOnly && !readOnlyProp) {
+      removeItems(event, [itemIndex]);
+    }
+  };
+  const handleClear = (event) => {
+    updateSelectedItems(event, []);
+    resetInput();
+    focusInput();
+    onClear == null ? void 0 : onClear(event);
+  };
+  const cursorAtInputStart = () => getCursorPosition(textAreaRef) === 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(event, 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(event, highlightedIndex);
+    },
+    Delete: (event) => {
+      event.preventDefault();
+      handleRemoveItem(event, highlightedIndex);
+    },
+    " ": (event) => {
+      event.preventDefault();
+      handleRemoveItem(event, highlightedIndex);
+    }
+  };
+  const inputKeyDownHandlers = {
+    ArrowLeft: (event) => {
+      if (cursorAtInputStart()) {
+        event.preventDefault();
+        setHighlightedIndex(selectedItems.length - 1);
+      }
+    },
+    Backspace: (event) => {
+      if (hasActiveItems) {
+        removeItems(event, activeIndices);
+      } else if (cursorAtInputStart()) {
+        setHighlightedIndex(selectedItems.length - 1);
+      }
+    },
+    Delete: (event) => {
+      if (hasActiveItems) {
+        removeItems(event, activeIndices);
+      }
+    },
+    Enter: (event) => {
+      event.preventDefault();
+      if (hasActiveItems) {
+        removeItems(event, activeIndices);
+      } else {
+        handleAddItems(event, value);
+      }
+    }
+  };
+  const handleCtrlModifierKeyDown = (event) => {
+    var _a;
+    const win = core.ownerWindow(event.target);
+    const supportClipboard = (_a = win.navigator) == null ? void 0 : _a.clipboard;
+    switch (event.key.toUpperCase()) {
+      case "A":
+        setHighlightedIndex(void 0);
+        setActiveIndices(
+          Array.from({ length: selectedItems.length }, (_, index) => index)
+        );
+        break;
+      case "C": {
+        const textToCopy = activeIndices.length > 0 ? activeIndices.map((index) => String(selectedItems[index])).concat(value != null ? String(value).trim() : "").filter(Boolean).join(primaryDelimiter) : highlightedIndex !== void 0 ? String(`${selectedItems[highlightedIndex]},`) : "";
+        copy(textToCopy).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(event, 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(event, value);
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (isCtrlModifier(event)) {
+      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);
+      }
+    }
+  };
+  const state = {
+    value,
+    selectedItems,
+    activeIndices,
+    highlightedIndex,
+    expanded
+  };
+  const eventHandlers = {
+    // onFocus is a focus on the expand button
+    // It can also be triggered by a focus on the input
+    // onBlur is a blur from the expand button when it's collapsed
+    // It can also be triggered by the clear button
+    onBlur: expanded ? handleBlur : onBlur,
+    onClick: handleClick,
+    onInputChange: handleInputChange,
+    onInputFocus: handleInputFocus,
+    onInputBlur: handleInputBlur,
+    onKeyDown: handleKeyDown,
+    onRemoveItem: handleRemoveItem,
+    onClear: handleClear
+  };
+  return {
+    state,
+    firstHiddenIndex,
+    refs: {
+      textAreaRef: core.useForkRef(textAreaRef, inputRef),
+      pillsRef,
+      clearButtonRef,
+      expandButtonRef,
+      statusAdornmentRef,
+      containerRef: core.useForkRef(containerRef, containerObserverRef)
+    },
+    helpers: {
+      setValue,
+      setSelectedItems,
+      setHighlightedIndex,
+      updateExpanded
+    },
+    inputProps: {
+      id,
+      disabled,
+      validationStatus: validationStatus ?? validationStatusProp,
+      readOnly: readOnly ?? readOnlyProp,
+      necessity,
+      focused,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy ?? ariaDescribedByProp,
+      ...state,
+      ...restProps,
+      ...disabled ? {} : eventHandlers
+    }
+  };
+}
+
+exports.useTokenizedInputNext = useTokenizedInputNext;
+//# sourceMappingURL=useTokenizedInputNext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTokenizedInputNext.js","sources":["../src/tokenized-input-next/useTokenizedInputNext.tsx"],"sourcesContent":["import {\n  ownerWindow,\n  useControlled,\n  useDensity,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport copy from \"clipboard-copy\";\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type MutableRefObject,\n  type Ref,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { escapeRegExp } from \"../utils\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { getPadding, useWidth } from \"./internal/useWidth\";\nimport type { TokenizedInputNextProps } from \"./TokenizedInputNext\";\n\nexport interface TokenizedInputNextState<Item> {\n  activeIndices: number[];\n  expanded: boolean | undefined;\n  highlightedIndex: number | undefined;\n  selectedItems: Item[];\n  value: string | undefined;\n}\n\nexport interface TokenizedInputNextHelpers<Item> {\n  setHighlightedIndex: (value?: number) => void;\n  setValue: (value: string) => void;\n  setSelectedItems: (selectedItems: Item[]) => void;\n  updateExpanded: (event: SyntheticEvent, expanded: boolean) => void;\n}\n\nexport interface TokenizedInputNextRefs {\n  textAreaRef: Ref<HTMLTextAreaElement>;\n  pillsRef: MutableRefObject<Record<number, number | undefined>>;\n  clearButtonRef: (newNode: HTMLButtonElement) => void;\n  expandButtonRef: Ref<HTMLButtonElement>;\n  statusAdornmentRef: Ref<SVGSVGElement>;\n  containerRef: Ref<HTMLDivElement>;\n}\n\nconst getCursorPosition = (\n  inputRef: MutableRefObject<HTMLTextAreaElement | 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\nconst isCtrlModifier = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n  return (\n    event.ctrlKey ||\n    event.metaKey ||\n    [\"CONTROL\", \"META\"].indexOf(event.key.toUpperCase()) !== -1\n  );\n};\n\nfunction isValidItem<Item>(data: unknown): data is Item {\n  return (\n    (typeof data === \"string\" && Boolean(data.length)) ||\n    (typeof data !== \"string\" && data != null)\n  );\n}\n\ninterface useTokenizedInputNextResult<Item> {\n  /**\n   * The tokenized input state\n   */\n  state: TokenizedInputNextState<Item>;\n  /**\n   * First hidden element when collapsed\n   */\n  firstHiddenIndex: number | null;\n  /**\n   * Utility functions for modifying tokenized input state\n   */\n  helpers: TokenizedInputNextHelpers<Item>;\n  /**\n   * Refs for tokenized input items.\n   */\n  refs: TokenizedInputNextRefs;\n  /**\n   * Properties applied to a basic tokenized input component\n   */\n  inputProps: Omit<TokenizedInputNextProps<Item>, \"helpers\" | \"onChange\">;\n}\n\nexport function useTokenizedInputNext<Item>(\n  props: TokenizedInputNextProps<Item>,\n): useTokenizedInputNextResult<Item> {\n  const {\n    disabled: formFieldDisabled,\n    readOnly,\n    necessity,\n    validationStatus,\n    a11yProps: {\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-labelledby\": ariaLabelledBy,\n    } = {},\n  } = useFormFieldProps();\n\n  const {\n    delimiters = [\",\"],\n    defaultSelected = [],\n    disabled = formFieldDisabled,\n    readOnly: readOnlyProp,\n    validationStatus: validationStatusProp,\n    disableAddOnBlur,\n    onBlur,\n    onClick,\n    onExpand,\n    onCollapse,\n    onKeyDown,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onClear,\n    onChange,\n    id: idProp,\n    value: valueProp,\n    expanded: expandedProp,\n    selectedItems: selectedItemsProp,\n    \"aria-label\": ariaLabel,\n    \"aria-describedby\": ariaDescribedByProp,\n    expandButtonRef: expandButtonRefProp,\n    ...restProps\n  } = props;\n\n  const density = useDensity();\n  const id = useId(idProp);\n\n  const [focused, setFocused] = useState(false);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n  const [activeIndices, setActiveIndices] = useState<number[]>([]);\n  const [highlightedIndex, setHighlightedIndex] = useState<number | undefined>(\n    undefined,\n  );\n\n  const [expandButtonHookRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [statusAdornmentRef, statusAdornmentWidth] = useWidth(density);\n  const [inputRef, inputWidth] = useWidth(density);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const pillsRef = useRef<Record<number, number | undefined>>({});\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const preventBlurOnCopy = useRef(false);\n  const expandButtonRef = useForkRef(expandButtonHookRef, expandButtonRefProp);\n\n  const hasActiveItems = Boolean(activeIndices.length);\n  const primaryDelimiter = delimiters[0];\n  const delimiterRegex = useMemo(\n    () => new RegExp(delimiters.map(escapeRegExp).join(\"|\"), \"gi\"),\n    [delimiters],\n  );\n\n  const [value, setValue, isInputControlled] = useControlled<\n    string | undefined\n  >({\n    controlled: valueProp,\n    default: \"\",\n    name: \"TokenizedInputNext\",\n    state: \"value\",\n  });\n\n  const [selectedItems = [], setSelectedItems, isSelectionControlled] =\n    useControlled<Item[] | undefined>({\n      controlled: selectedItemsProp,\n      default: defaultSelected,\n      name: \"TokenizedInputNext\",\n      state: \"selectedItems\",\n    });\n\n  const [expanded, setExpanded, isExpandedControlled] = useControlled<boolean>({\n    controlled: expandedProp,\n    default: false,\n    name: \"TokenizedInputNext\",\n    state: \"expanded\",\n  });\n\n  const widthOffset =\n    inputWidth +\n    statusAdornmentWidth +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerObserverRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        const padding = getPadding(containerRef.current);\n        setPillGroupWidth(contentRect.width - padding - 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  // useIsomorphicLayoutEffect 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  const focusInput = useCallback(() => {\n    if (textAreaRef.current) {\n      textAreaRef.current.focus();\n    }\n  }, []);\n\n  const updateInputValue = (newValue: string | undefined) => {\n    if (!isInputControlled) {\n      setValue(newValue);\n    }\n  };\n\n  const updateSelectedItems = useCallback(\n    (event: SyntheticEvent, action: SetStateAction<Item[] | undefined>) => {\n      if (!isSelectionControlled) {\n        setSelectedItems((prevSelectedItems?: Item[]) => {\n          const newItems =\n            typeof action === \"function\" ? action(prevSelectedItems) : action;\n\n          if (newItems !== prevSelectedItems) {\n            onChange?.(event, newItems);\n          }\n          return newItems;\n        });\n      } else {\n        onChange?.(\n          event,\n          typeof action === \"function\" ? action(selectedItems) : action,\n        );\n      }\n    },\n    [isSelectionControlled, onChange, selectedItems],\n  );\n\n  const updateExpanded = (event: SyntheticEvent, newExpanded: boolean) => {\n    if (!isExpandedControlled) {\n      setExpanded(newExpanded);\n    }\n\n    if (newExpanded) {\n      focusInput();\n      onExpand?.(event);\n    } else {\n      onCollapse?.(event);\n    }\n  };\n\n  const resetInput = () => {\n    updateInputValue(\"\");\n    setHighlightedIndex(undefined);\n    setActiveIndices([]);\n  };\n\n  const removeItems = useCallback(\n    (event: SyntheticEvent, itemIndices: number[]) => {\n      updateSelectedItems(\n        event,\n        (prevSelectedItems) =>\n          prevSelectedItems &&\n          (prevSelectedItems.length === 0\n            ? prevSelectedItems\n            : prevSelectedItems.filter(\n                (_, index) => itemIndices.indexOf(index) === -1,\n              )),\n      );\n    },\n    [updateSelectedItems],\n  );\n\n  const handleInputFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n    event.stopPropagation();\n\n    // The input will lose focus when building the text to copy in a temporary\n    // DOM node. This is particularly visible in a slower browser, i.e. IE 11.\n    // This is to prevent a blur in that scenario.\n    if (preventBlurOnCopy.current) {\n      preventBlurOnCopy.current = false;\n      setActiveIndices(\n        Array.from(\n          { length: selectedItems ? selectedItems.length : 0 },\n          (_, index) => index,\n        ),\n      );\n      return;\n    }\n\n    onInputFocus?.(event);\n    updateExpanded(event, true);\n    setFocused(true);\n  };\n\n  const handleBlur = (\n    event: FocusEvent<HTMLTextAreaElement | HTMLButtonElement>,\n  ) => {\n    onBlur?.(event);\n    setFocused(false);\n    updateExpanded(event, false);\n  };\n\n  const handleInputBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n    // Check if the related target inside TokenizedInput\n    const container = containerRef?.current;\n    const eventTarget = event.relatedTarget;\n    event.preventDefault();\n    event.stopPropagation();\n    setHighlightedIndex(undefined);\n    setActiveIndices([]);\n    if (!disableAddOnBlur) {\n      handleAddItems(event, value);\n    }\n    onInputBlur?.(event);\n    if (\n      eventTarget !== container &&\n      !container?.contains(eventTarget as Node)\n    ) {\n      handleBlur(event);\n    }\n  };\n\n  const handleClick = (event: SyntheticEvent<HTMLElement>) => {\n    updateExpanded(event, true);\n    setActiveIndices([]);\n    onClick?.(event);\n  };\n\n  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n    setHighlightedIndex(undefined);\n\n    onInputChange?.(event);\n\n    const newValue = event.target.value;\n\n    if (delimiterRegex.test(newValue)) {\n      // Process value with delimiters\n      handleAddItems(event, newValue);\n    } else {\n      // Just update input value if there is no delimiter\n      updateInputValue(newValue);\n    }\n  };\n\n  const handleAddItems = (\n    event: SyntheticEvent,\n    newValue: string | undefined,\n    appendOnly?: boolean,\n  ) => {\n    if (!newValue || newValue.length === 0) {\n      return;\n    }\n\n    resetInput();\n\n    const newItems = newValue\n      .split(delimiterRegex)\n      .reduce<Item[]>((values, item) => {\n        const newItem = item.trim();\n        return isValidItem<Item>(newItem) ? values.concat(newItem) : values;\n      }, []);\n\n    if (newItems.length) {\n      updateSelectedItems(event, (prevSelectedItems = []) =>\n        hasActiveItems && !appendOnly\n          ? newItems\n          : prevSelectedItems.concat(newItems),\n      );\n    }\n  };\n\n  const handleRemoveItem = (event: SyntheticEvent, itemIndex?: number) => {\n    focusInput();\n    if (itemIndex !== undefined && !readOnly && !readOnlyProp) {\n      removeItems(event, [itemIndex]);\n    }\n  };\n\n  const handleClear = (event: ChangeEvent<HTMLTextAreaElement>) => {\n    updateSelectedItems(event, []);\n    resetInput();\n    focusInput();\n    onClear?.(event);\n  };\n\n  const cursorAtInputStart = () =>\n    getCursorPosition(textAreaRef) === 0 && Boolean(selectedItems.length);\n\n  const highlightAtPillGroupEnd = () =>\n    highlightedIndex === selectedItems.length - 1;\n\n  const pillGroupKeyDownHandlers: Record<\n    string,\n    KeyboardEventHandler<HTMLTextAreaElement>\n  > = {\n    ArrowLeft: (event) => {\n      event.preventDefault();\n      setHighlightedIndex((prevHighlightedIndex) =>\n        prevHighlightedIndex == null\n          ? selectedItems.length - 1\n          : Math.max(0, prevHighlightedIndex - 1),\n      );\n    },\n    ArrowRight: (event) => {\n      if (highlightAtPillGroupEnd()) {\n        return setHighlightedIndex(undefined);\n      }\n\n      event.preventDefault();\n      setHighlightedIndex((prevHighlightedIndex) =>\n        prevHighlightedIndex == null\n          ? prevHighlightedIndex\n          : Math.min(selectedItems.length - 1, prevHighlightedIndex + 1),\n      );\n    },\n    Backspace: (event) => {\n      event.preventDefault();\n      handleRemoveItem(event, highlightedIndex);\n      setHighlightedIndex((prevHighlightedIndex) =>\n        prevHighlightedIndex == null\n          ? prevHighlightedIndex\n          : Math.max(0, prevHighlightedIndex - 1),\n      );\n    },\n    Home: (event) => {\n      event.preventDefault();\n      setHighlightedIndex(0);\n    },\n    End: (event) => {\n      event.preventDefault();\n      setHighlightedIndex(selectedItems.length - 1);\n    },\n    Enter: (event) => {\n      event.preventDefault();\n      handleRemoveItem(event, highlightedIndex);\n    },\n    Delete: (event) => {\n      event.preventDefault();\n      handleRemoveItem(event, highlightedIndex);\n    },\n    \" \": (event) => {\n      event.preventDefault();\n      handleRemoveItem(event, highlightedIndex);\n    },\n  };\n\n  const inputKeyDownHandlers: Record<\n    string,\n    KeyboardEventHandler<HTMLTextAreaElement>\n  > = {\n    ArrowLeft: (event) => {\n      if (cursorAtInputStart()) {\n        event.preventDefault();\n        setHighlightedIndex(selectedItems.length - 1);\n      }\n    },\n    Backspace: (event) => {\n      if (hasActiveItems) {\n        removeItems(event, activeIndices);\n      } else if (cursorAtInputStart()) {\n        setHighlightedIndex(selectedItems.length - 1);\n      }\n    },\n    Delete: (event) => {\n      if (hasActiveItems) {\n        removeItems(event, activeIndices);\n      }\n    },\n    Enter: (event) => {\n      event.preventDefault();\n\n      if (hasActiveItems) {\n        removeItems(event, activeIndices);\n      } else {\n        handleAddItems(event, value);\n      }\n    },\n  };\n\n  const handleCtrlModifierKeyDown: InputHTMLAttributes<HTMLTextAreaElement>[\"onKeyDown\"] =\n    (event) => {\n      const win = ownerWindow(event.target as HTMLElement);\n      const supportClipboard = win.navigator?.clipboard;\n\n      switch (event.key.toUpperCase()) {\n        case \"A\":\n          // Select all\n          setHighlightedIndex(undefined);\n          setActiveIndices(\n            Array.from({ length: selectedItems.length }, (_, index) => index),\n          );\n          break;\n        case \"C\": {\n          // Copy\n          const textToCopy =\n            activeIndices.length > 0\n              ? activeIndices\n                  .map((index) => String(selectedItems[index]))\n                  .concat(value != null ? String(value).trim() : \"\")\n                  .filter(Boolean)\n                  .join(primaryDelimiter)\n              : highlightedIndex !== undefined\n                ? String(`${selectedItems[highlightedIndex]},`)\n                : \"\";\n          copy(textToCopy)\n            .then((result) => {\n              preventBlurOnCopy.current = !supportClipboard;\n              return result;\n            })\n            .catch((error) => {\n              console.error(error);\n            });\n          break;\n        }\n        case \"V\":\n          // Paste - do nothing and let handleChange deal with it\n          break;\n        case \"ARROWLEFT\":\n          pillGroupKeyDownHandlers.ArrowLeft(event);\n          break;\n        case \"ARROWRIGHT\":\n          pillGroupKeyDownHandlers.ArrowRight(event);\n          break;\n        case \"BACKSPACE\":\n          if (cursorAtInputStart()) {\n            handleRemoveItem(event, selectedItems.length - 1);\n          }\n          break;\n        case \"CONTROL\":\n        case \"META\":\n          // Do nothing\n          break;\n        default:\n          // Otherwise, reset active items\n          setActiveIndices([]);\n      }\n    };\n\n  const handleCommonKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n    const eventKey = event.key.toUpperCase();\n    if (eventKey === \"ESCAPE\") {\n      event.preventDefault();\n      resetInput();\n    } else if (eventKey === \"TAB\" && !disableAddOnBlur) {\n      // Pressing Tab adds a new value\n      handleAddItems(event, value);\n    }\n  };\n\n  const handleKeyDown: InputHTMLAttributes<HTMLTextAreaElement>[\"onKeyDown\"] = (\n    event,\n  ) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) {\n      return;\n    }\n    if (isCtrlModifier(event)) {\n      handleCtrlModifierKeyDown(event);\n    } else {\n      let handler: KeyboardEventHandler<HTMLTextAreaElement> | undefined;\n      if (highlightedIndex == null) {\n        handler = inputKeyDownHandlers[event.key];\n        setActiveIndices([]);\n      } else {\n        handler = pillGroupKeyDownHandlers[event.key];\n      }\n\n      if (handler != null) {\n        handler(event);\n      } else {\n        handleCommonKeyDown(event);\n      }\n    }\n  };\n\n  const state: TokenizedInputNextState<Item> = {\n    value,\n    selectedItems,\n    activeIndices,\n    highlightedIndex,\n    expanded,\n  };\n\n  const eventHandlers = {\n    // onFocus is a focus on the expand button\n    // It can also be triggered by a focus on the input\n    // onBlur is a blur from the expand button when it's collapsed\n    // It can also be triggered by the clear button\n    onBlur: expanded ? handleBlur : onBlur,\n    onClick: handleClick,\n    onInputChange: handleInputChange,\n    onInputFocus: handleInputFocus,\n    onInputBlur: handleInputBlur,\n    onKeyDown: handleKeyDown,\n    onRemoveItem: handleRemoveItem,\n    onClear: handleClear,\n  };\n\n  return {\n    state,\n    firstHiddenIndex,\n    refs: {\n      textAreaRef: useForkRef(textAreaRef, inputRef),\n      pillsRef,\n      clearButtonRef,\n      expandButtonRef,\n      statusAdornmentRef,\n      containerRef: useForkRef(containerRef, containerObserverRef),\n    },\n    helpers: {\n      setValue,\n      setSelectedItems,\n      setHighlightedIndex,\n      updateExpanded,\n    },\n    inputProps: {\n      id,\n      disabled,\n      validationStatus: validationStatus ?? validationStatusProp,\n      readOnly: readOnly ?? readOnlyProp,\n      necessity: necessity,\n      focused,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel,\n      \"aria-describedby\": ariaDescribedBy ?? ariaDescribedByProp,\n      ...state,\n      ...restProps,\n      ...(disabled ? {} : eventHandlers),\n    },\n  };\n}\n"],"names":["useFormFieldProps","useDensity","useId","useState","useWidth","useRef","useForkRef","useMemo","escapeRegExp","useControlled","useResizeObserver","useCallback","getPadding","useIsomorphicLayoutEffect","calcFirstHiddenIndex","ownerWindow"],"mappings":"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"}

package/dist-cjs/toolbar/Toolbar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToolbar {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-fontSize: var(--salt-text-fontSize);\n  /* --saltFormFieldLegacy-activationIndicator-size: 0; */\n}\n\n.saltToolbar {\n  --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);\n\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  font-size: var(--toolbar-fontSize);\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n}\n\n/* .saltToolbarField:not([data-overflow-indicator]) > .saltButton {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n} */\n\n.saltToolbar > .Responsive-inner {\n  align-items: center;\n  flex: 1;\n  flex-wrap: wrap;\n  justify-content: inherit;\n  margin: 0 !important;\n  overflow: hidden;\n  padding: 0 !important;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] {\n  display: flex;\n  height: var(--saltToolbar-height, var(--toolbar-size));\n  line-height: normal;\n  min-width: 0;\n  white-space: nowrap;\n  width: var(--saltToolbar-width, 100%);\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > :not(.saltTooltray) {\n  margin-right: var(--salt-size-unit);\n  align-self: center;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  /* margin-right: var(--salt-size-unit); */\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray {\n  margin-top: 0;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-right: auto;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-bottom: auto;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > *:first-child {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] {\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner {\n  display: inline-flex;\n  flex-direction: column;\n  max-height: 100%;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] > *[data-overflowed=\"true\"] {\n  min-width: 0;\n  flex-shrink: 1;\n  flex-basis: 0;\n  padding: 0;\n  margin: 0;\n  visibility: visible;\n}\n\n.saltToolbar > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltToolbarField-start {\n  margin-left: 0 !important;\n  order: -1;\n}\n\n.saltToolbar > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n.saltToolbarField.saltFormFieldLegacy-labelLeft > .saltFormLabel {\n  padding-left: var(--salt-size-unit);\n}\n\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton {\n  background: var(--toolbar-background);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltButton-active,\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:active {\n  background: var(--salt-actionable-secondary-background-active) !important;\n}\n\n/* copied over from Tabstrip.css */\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n/* .Responsive-inner > [data-collapsed='true'] {\n  background: brown;\n}\n.Responsive-inner > [data-collapsing='true'] {\n  background: pink;\n} */\n\n/* .saltToolbar > .Responsive-inner > .saltOverflowPanel {\n  background: pink;;\n}\n\n.saltTooltray > .Responsive-inner > .saltOverflowPanel {\n  background: yellow;\n} */\n";
+var css_248z = ".saltToolbar {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-fontSize: var(--salt-text-fontSize);\n  /* --saltFormFieldLegacy-activationIndicator-size: 0; */\n}\n\n.saltToolbar {\n  --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);\n\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  font-size: var(--toolbar-fontSize);\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* .saltToolbarField:not([data-overflow-indicator]) > .saltButton {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n} */\n\n.saltToolbar > .Responsive-inner {\n  align-items: center;\n  flex: 1;\n  flex-wrap: wrap;\n  justify-content: inherit;\n  margin: 0 !important;\n  overflow: hidden;\n  padding: 0 !important;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] {\n  display: flex;\n  height: var(--saltToolbar-height, var(--toolbar-size));\n  line-height: normal;\n  min-width: 0;\n  white-space: nowrap;\n  width: var(--saltToolbar-width, 100%);\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > :not(.saltTooltray) {\n  margin-right: var(--salt-size-unit);\n  align-self: center;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  /* margin-right: var(--salt-size-unit); */\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > .saltTooltray {\n  margin-top: 0;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-right: auto;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner > [data-pad-end=\"true\"] {\n  margin-bottom: auto;\n}\n\n.saltToolbar[aria-orientation=\"horizontal\"] > .Responsive-inner > *:first-child {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] {\n  display: inline-flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.saltToolbar[aria-orientation=\"vertical\"] > .Responsive-inner {\n  display: inline-flex;\n  flex-direction: column;\n  max-height: 100%;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltToolbar > .Responsive-inner[data-collapsing=\"true\"] > *[data-overflowed=\"true\"] {\n  min-width: 0;\n  flex-shrink: 1;\n  flex-basis: 0;\n  padding: 0;\n  margin: 0;\n  visibility: visible;\n}\n\n.saltToolbar > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltToolbarField-start {\n  margin-left: 0 !important;\n  order: -1;\n}\n\n.saltToolbar > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n.saltToolbarField.saltFormFieldLegacy-labelLeft > .saltFormLabel {\n  padding-left: var(--salt-size-unit);\n}\n\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton {\n  background: var(--toolbar-background);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n}\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltButton-active,\n.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:active {\n  background: var(--salt-actionable-secondary-background-active) !important;\n}\n\n/* copied over from Tabstrip.css */\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n/* .Responsive-inner > [data-collapsed='true'] {\n  background: brown;\n}\n.Responsive-inner > [data-collapsing='true'] {\n  background: pink;\n} */\n\n/* .saltToolbar > .Responsive-inner > .saltOverflowPanel {\n  background: pink;;\n}\n\n.saltTooltray > .Responsive-inner > .saltOverflowPanel {\n  background: yellow;\n} */\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toolbar.css.js.map