@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist-cjs/packages/lab/src/toggle-button/ToggleButton.js

@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var React = require('react');
-var ToggleButtonGroupContext = require('./internal/ToggleButtonGroupContext.js');
-require('./ToggleButton.css.js');
-
-const withBaseName = core.makePrefixer("saltToggleButton");
-const ToggleButton = React.forwardRef(
-  (props, ref) => {
-    const {
-      "aria-label": ariaLabel,
-      className,
-      onToggle,
-      toggled = false,
-      tooltipText = ariaLabel,
-      variant: variantProp = "primary",
-      disabled: disabledProp,
-      disableTooltip: disableTooltipProp,
-      focusableWhenDisabled: focusableWhenDisabledProp,
-      "data-button-index": index,
-      ...restProps
-    } = props;
-    const [iconOnly, setIconOnly] = React.useState(false);
-    const buttonRef = React.useRef(null);
-    const groupContext = React.useContext(ToggleButtonGroupContext.ToggleButtonGroupContext);
-    const handleIconOnlyButton = React.useCallback(
-      (button) => {
-        setIconOnly(
-          (button == null ? void 0 : button.querySelector(".saltIcon")) != null && (button == null ? void 0 : button.childElementCount) === 1
-        );
-      },
-      [setIconOnly]
-    );
-    const {
-      register,
-      unregister,
-      disabled = disabledProp,
-      disableTooltip = disableTooltipProp,
-      focusableWhenDisabled = focusableWhenDisabledProp,
-      orientation = "horizontal",
-      variant = variantProp
-    } = groupContext || {};
-    React.useEffect(() => {
-      if (index !== void 0 && register && unregister && (!disabled || focusableWhenDisabled)) {
-        register(buttonRef.current, index);
-        return function cleanup() {
-          unregister(index);
-        };
-      }
-    }, [index, disabled, focusableWhenDisabled, register, unregister]);
-    const handleToggle = (event) => {
-      if (!disabled) {
-        onToggle == null ? void 0 : onToggle(event, !toggled);
-      }
-    };
-    const tabIndex = toggled && !disabled ? 0 : -1;
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
-      content: tooltipText,
-      disabled: disableTooltip,
-      placement: orientation === "horizontal" ? "bottom" : "right",
-      children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-        ref: handleIconOnlyButton,
-        "aria-checked": toggled,
-        "aria-label": ariaLabel,
-        "aria-posinset": index !== void 0 ? index + 1 : void 0,
-        className: clsx.clsx(
-          withBaseName(),
-          withBaseName(orientation),
-          {
-            [withBaseName("primary")]: variant === "primary",
-            [withBaseName("cta")]: variant === "cta",
-            [withBaseName("secondary")]: variant === "secondary",
-            [withBaseName("toggled")]: toggled,
-            [withBaseName("disabled")]: disabled,
-            [withBaseName("iconOnly")]: iconOnly
-          },
-          className
-        ),
-        onClick: handleToggle,
-        disabled,
-        focusableWhenDisabled,
-        role: groupContext ? "radio" : "checkbox",
-        tabIndex: groupContext ? tabIndex : void 0,
-        variant,
-        ...restProps
-      })
-    });
-  }
-);
-
-exports.ToggleButton = ToggleButton;
-//# sourceMappingURL=ToggleButton.js.map

package/dist-cjs/packages/lab/src/toggle-button/ToggleButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ToggleButtonGroupContext } from \"./internal/ToggleButtonGroupContext\";\n\nimport \"./ToggleButton.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport type ToggleButtonToggleEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonProps extends ButtonProps {\n  \"aria-label\"?: string;\n  \"data-button-index\"?: number;\n  toggled?: boolean;\n  tooltipText?: string;\n  disableTooltip?: boolean;\n  onToggle?: ToggleButtonToggleEventHandler;\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  (props, ref) => {\n    const {\n      \"aria-label\": ariaLabel,\n      className,\n      onToggle,\n      toggled = false,\n      tooltipText = ariaLabel,\n      variant: variantProp = \"primary\",\n      disabled: disabledProp,\n      disableTooltip: disableTooltipProp,\n      focusableWhenDisabled: focusableWhenDisabledProp,\n      \"data-button-index\": index,\n      ...restProps\n    } = props;\n\n    const [iconOnly, setIconOnly] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const groupContext = useContext(ToggleButtonGroupContext);\n\n    const handleIconOnlyButton = useCallback(\n      (button: HTMLButtonElement | null) => {\n        setIconOnly(\n          button?.querySelector(\".saltIcon\") != null &&\n            button?.childElementCount === 1\n        );\n      },\n      [setIconOnly]\n    );\n\n    const {\n      register,\n      unregister,\n      disabled = disabledProp,\n      disableTooltip = disableTooltipProp,\n      focusableWhenDisabled = focusableWhenDisabledProp,\n      orientation = \"horizontal\",\n      variant = variantProp,\n    } = groupContext || {};\n\n    useEffect(() => {\n      if (\n        index !== undefined &&\n        register &&\n        unregister &&\n        (!disabled || focusableWhenDisabled)\n      ) {\n        register(buttonRef.current, index);\n\n        return function cleanup() {\n          unregister(index);\n        };\n      }\n    }, [index, disabled, focusableWhenDisabled, register, unregister]);\n\n    const handleToggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      if (!disabled) {\n        onToggle?.(event, !toggled);\n      }\n    };\n\n    const tabIndex = toggled && !disabled ? 0 : -1;\n\n    return (\n      <Tooltip\n        content={tooltipText}\n        disabled={disableTooltip}\n        placement={orientation === \"horizontal\" ? \"bottom\" : \"right\"}\n      >\n        <Button\n          ref={handleIconOnlyButton}\n          aria-checked={toggled}\n          aria-label={ariaLabel}\n          aria-posinset={index !== undefined ? index + 1 : undefined}\n          className={clsx(\n            withBaseName(),\n            withBaseName(orientation),\n            {\n              [withBaseName(\"primary\")]: variant === \"primary\",\n              [withBaseName(\"cta\")]: variant === \"cta\",\n              [withBaseName(\"secondary\")]: variant === \"secondary\",\n              [withBaseName(\"toggled\")]: toggled,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"iconOnly\")]: iconOnly,\n            },\n            className\n          )}\n          onClick={handleToggle}\n          disabled={disabled}\n          focusableWhenDisabled={focusableWhenDisabled}\n          role={groupContext ? \"radio\" : \"checkbox\"}\n          tabIndex={groupContext ? tabIndex : undefined}\n          variant={variant}\n          {...restProps}\n        />\n      </Tooltip>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useState","useRef","useContext","ToggleButtonGroupContext","useCallback","useEffect","jsx","Tooltip","Button","clsx"],"mappings":"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"}

package/dist-cjs/packages/lab/src/toggle-button/ToggleButtonGroup.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".salt-density-high {\n  --toggleButton-group-height: calc(var(--salt-size-base) - var(--salt-size-unit) + 2px);\n}\n.salt-density-medium {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n.salt-density-low {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 2 / 3) + 2px);\n}\n.salt-density-touch {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-cta {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-cta-borderColor, var(--salt-container-secondary-borderColor));\n}\n.saltToggleButtonGroup.saltToggleButtonGroup-primary {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-primary-borderColor, var(--salt-container-primary-borderColor));\n}\n\n.saltToggleButtonGroup {\n  --toggleButton-group-borderWidth: var(--saltToggleButton-group-borderWidth, var(--salt-size-border));\n  --toggleButton-group-borderStyle: var(--saltToggleButton-group-borderWidth, var(--salt-container-borderStyle));\n\n  display: inline-flex;\n  overflow: hidden;\n  padding: 2px;\n  border: var(--toggleButton-group-borderWidth) var(--toggleButton-group-borderStyle) var(--toggleButton-group-borderColor);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-secondary {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-secondary-borderColor, var(--salt-container-tertiary-borderColor));\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: var(--toggleButton-group-height);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton:not(:first-child) {\n  margin-left: 2px;\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton:not(:first-child) {\n  margin-top: 2px;\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-cjs/packages/lab/src/toggle-button/ToggleButtonGroup.css.js.map

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

package/dist-cjs/packages/lab/src/toggle-button/ToggleButtonGroup.js

@@ -1,139 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var React = require('react');
-var ToggleButtonGroupContext = require('./internal/ToggleButtonGroupContext.js');
-require('./ToggleButtonGroup.css.js');
-
-const withBaseName = core.makePrefixer("saltToggleButtonGroup");
-const getNextIndex = (nodes, index, increment) => (index + nodes.length + increment) % nodes.length;
-const getNextActive = (nodes, index, increment) => {
-  let nextIndex = getNextIndex(nodes, index, increment);
-  while (nextIndex !== index && !nodes[nextIndex]) {
-    nextIndex = getNextIndex(nodes, nextIndex, increment);
-  }
-  return nodes[nextIndex];
-};
-const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2({
-  "aria-label": ariaLabel = "Toggle options",
-  children,
-  className,
-  disabled,
-  disableTooltip,
-  defaultSelectedIndex = 0,
-  focusableWhenDisabled,
-  selectedIndex: selectedIndexProp,
-  orientation = "horizontal",
-  variant = "primary",
-  width,
-  onChange,
-  onFocus,
-  onBlur,
-  ...restProps
-}, ref) {
-  const buttonRefs = React.useRef([]);
-  const [disableFocus, setDisableFocus] = React.useState(false);
-  const [selectedIndex, setSelectedIndex] = core.useControlled({
-    controlled: selectedIndexProp,
-    default: defaultSelectedIndex,
-    name: "ToggleButtonGroup",
-    state: "selectedIndex"
-  });
-  const register = React.useCallback(
-    (node, index) => {
-      buttonRefs.current[index] = node || void 0;
-    },
-    []
-  );
-  const unregister = React.useCallback((index) => {
-    buttonRefs.current[index] = void 0;
-  }, []);
-  const handleFocus = (event) => {
-    setDisableFocus(true);
-    onFocus == null ? void 0 : onFocus(event);
-  };
-  const handleBlur = (event) => {
-    setDisableFocus(false);
-    onBlur == null ? void 0 : onBlur(event);
-  };
-  const handleToggle = (event, index, newValue) => {
-    if (!newValue) {
-      return;
-    }
-    setSelectedIndex(index);
-    onChange == null ? void 0 : onChange(event, index, newValue);
-  };
-  const handleKeyDown = (event, index) => {
-    var _a, _b;
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-      (_a = getNextActive(buttonRefs.current, index, 1)) == null ? void 0 : _a.focus();
-    }
-    if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-      (_b = getNextActive(buttonRefs.current, index, -1)) == null ? void 0 : _b.focus();
-    }
-  };
-  const groupContext = React.useMemo(
-    () => ({
-      disabled,
-      disableFocus,
-      disableTooltip,
-      focusableWhenDisabled,
-      orientation,
-      register,
-      unregister,
-      variant
-    }),
-    [
-      disabled,
-      disableFocus,
-      disableTooltip,
-      focusableWhenDisabled,
-      orientation,
-      register,
-      unregister,
-      variant
-    ]
-  );
-  const childrenCount = React.Children.count(children);
-  const getToggleButtonItem = (child, index) => {
-    return React.cloneElement(child, {
-      ...child.props,
-      "data-button-index": index,
-      "aria-setsize": childrenCount + 1,
-      key: `button-${index}`,
-      toggled: selectedIndex === index,
-      onKeyDown: (event) => handleKeyDown(event, index),
-      onToggle: (event, newValue) => handleToggle(event, index, newValue)
-    });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ...restProps,
-    "aria-label": ariaLabel,
-    className: clsx.clsx(
-      withBaseName(),
-      withBaseName(orientation),
-      {
-        [withBaseName("cta")]: variant === "cta",
-        [withBaseName("secondary")]: variant === "secondary",
-        [withBaseName("primary")]: variant === "primary"
-      },
-      className
-    ),
-    ref,
-    role: "radiogroup",
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    style: { width },
-    children: /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext.ToggleButtonGroupContext.Provider, {
-      value: groupContext,
-      children: children && children.map(getToggleButtonItem)
-    })
-  });
-});
-
-exports.ToggleButtonGroup = ToggleButtonGroup;
-//# sourceMappingURL=ToggleButtonGroup.js.map

package/dist-cjs/packages/lab/src/toggle-button/ToggleButtonGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button/ToggleButtonGroup.tsx"],"sourcesContent":["import { ButtonVariant, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Orientation,\n  ToggleButtonGroupContext,\n} from \"./internal/ToggleButtonGroupContext\";\n\nimport \"./ToggleButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport type ToggleButtonGroupChangeEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  index: number,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  disableTooltip?: boolean;\n  defaultSelectedIndex?: number;\n  focusableWhenDisabled?: boolean;\n  selectedIndex?: number;\n  orientation?: Orientation;\n  variant?: ButtonVariant;\n  width?: number;\n  children: Array<ReactElement>;\n  onChange?: ToggleButtonGroupChangeEventHandler;\n}\n\nconst getNextIndex = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => (index + nodes.length + increment) % nodes.length;\n\nconst getNextActive = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => {\n  let nextIndex = getNextIndex(nodes, index, increment);\n\n  while (nextIndex !== index && !nodes[nextIndex]) {\n    nextIndex = getNextIndex(nodes, nextIndex, increment);\n  }\n\n  return nodes[nextIndex];\n};\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(\n  {\n    \"aria-label\": ariaLabel = \"Toggle options\",\n    children,\n    className,\n    disabled,\n    disableTooltip,\n    defaultSelectedIndex = 0,\n    focusableWhenDisabled,\n    selectedIndex: selectedIndexProp,\n    orientation = \"horizontal\",\n    variant = \"primary\",\n    width,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  },\n  ref\n) {\n  const buttonRefs = useRef<Array<HTMLButtonElement | undefined>>([]);\n\n  const [disableFocus, setDisableFocus] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useControlled({\n    controlled: selectedIndexProp,\n    default: defaultSelectedIndex,\n    name: \"ToggleButtonGroup\",\n    state: \"selectedIndex\",\n  });\n\n  const register = useCallback(\n    (node: HTMLButtonElement | null, index: number) => {\n      buttonRefs.current[index] = node || undefined;\n    },\n    []\n  );\n\n  const unregister = useCallback((index: number) => {\n    buttonRefs.current[index] = undefined;\n  }, []);\n\n  // When focus is not on the active button and when you tab out\n  // It should leave the toggle button group\n  // It should not go to active button\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(true);\n    onFocus?.(event);\n  };\n\n  // When you tab out from toggle button group, it should restore tab index of active button\n  // When you tab back in, focus should go to active button\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(false);\n    onBlur?.(event);\n  };\n\n  const handleToggle: ToggleButtonGroupChangeEventHandler = (\n    event,\n    index,\n    newValue\n  ) => {\n    if (!newValue) {\n      return;\n    }\n    setSelectedIndex(index);\n    onChange?.(event, index, newValue);\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    index: number\n  ) => {\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n      getNextActive(buttonRefs.current, index, 1)?.focus();\n    }\n\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n      getNextActive(buttonRefs.current, index, -1)?.focus();\n    }\n  };\n\n  const groupContext = useMemo(\n    () => ({\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    }),\n    [\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    ]\n  );\n\n  const childrenCount = Children.count(children);\n\n  const getToggleButtonItem = (child: ReactElement, index: number) => {\n    return cloneElement(child, {\n      ...child.props,\n      \"data-button-index\": index,\n      \"aria-setsize\": childrenCount + 1,\n      key: `button-${index}`,\n      toggled: selectedIndex === index,\n      onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n        handleKeyDown(event, index),\n      onToggle: (event: SyntheticEvent<HTMLButtonElement>, newValue: boolean) =>\n        handleToggle(event, index, newValue),\n    });\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-label={ariaLabel}\n      className={clsx(\n        withBaseName(),\n        withBaseName(orientation),\n        {\n          [withBaseName(\"cta\")]: variant === \"cta\",\n          [withBaseName(\"secondary\")]: variant === \"secondary\",\n          [withBaseName(\"primary\")]: variant === \"primary\",\n        },\n        className\n      )}\n      ref={ref}\n      role=\"radiogroup\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      // TODO: Make this responsive?\n      style={{ width }}\n    >\n      <ToggleButtonGroupContext.Provider value={groupContext}>\n        {children && children.map(getToggleButtonItem)}\n      </ToggleButtonGroupContext.Provider>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useRef","useState","useControlled","useCallback","useMemo","Children","cloneElement","jsx","clsx","ToggleButtonGroupContext"],"mappings":"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"}

package/dist-cjs/packages/lab/src/toggle-button/internal/ToggleButtonGroupContext.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-const ToggleButtonGroupContext = React.createContext(void 0);
-
-exports.ToggleButtonGroupContext = ToggleButtonGroupContext;
-//# sourceMappingURL=ToggleButtonGroupContext.js.map

package/dist-cjs/packages/lab/src/toggle-button/internal/ToggleButtonGroupContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button/internal/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ButtonVariant } from \"@salt-ds/core\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ToggleButtonGroupContextProps {\n  disabled?: boolean;\n  disableFocus?: boolean;\n  disableTooltip?: boolean;\n  focusableWhenDisabled?: boolean;\n  register: (node: HTMLButtonElement | null, index: number) => void;\n  unregister: (index: number) => void;\n  orientation?: Orientation;\n  variant?: ButtonVariant;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextProps | undefined\n>(undefined);\n"],"names":["createContext"],"mappings":";;;;;;AAgBa,MAAA,wBAAA,GAA2BA,oBAEtC,KAAS,CAAA;;;;"}

package/dist-cjs/packages/lab/src/tokenized-input/TokenizedInput.css.js

@@ -1,9 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-foreground));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltTokenizedInput-expandButton,\n.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
-styleInject_es(css_248z);
-
-module.exports = css_248z;
-//# sourceMappingURL=TokenizedInput.css.js.map

package/dist-cjs/packages/lab/src/tokenized-input/TokenizedInput.css.js.map

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

package/dist-cjs/packages/lab/src/tokenized-input/TokenizedInput.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var React = require('react');
-var TokenizedInputBase = require('./TokenizedInputBase.js');
-var useTokenizedInput = require('./useTokenizedInput.js');
-require('./TokenizedInput.css.js');
-
-const TokenizedInput = React.forwardRef(function TokenizedInput2(props, ref) {
-  const { inputRef: inputRefProp, ...restProps } = props;
-  const { inputRef, helpers, inputProps } = useTokenizedInput.useTokenizedInput(restProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(TokenizedInputBase.TokenizedInputBase, {
-    helpers,
-    inputRef: core.useForkRef(inputRef, inputRefProp),
-    ref,
-    ...inputProps
-  });
-});
-
-exports.TokenizedInput = TokenizedInput;
-//# sourceMappingURL=TokenizedInput.js.map

package/dist-cjs/packages/lab/src/tokenized-input/TokenizedInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TokenizedInput.js","sources":["../src/tokenized-input/TokenizedInput.tsx"],"sourcesContent":["import { useForkRef, UseTooltipProps } from \"@salt-ds/core\";\nimport { ComponentType, ForwardedRef, forwardRef } from \"react\";\nimport {\n  TokenizedInputBase,\n  TokenizedInputBaseProps,\n} from \"./TokenizedInputBase\";\nimport { useTokenizedInput } from \"./useTokenizedInput\";\n\nimport \"./TokenizedInput.css\";\n\nexport type StringToItem<Item> = (\n  selectedItems: Array<Item>,\n  value: string\n) => Item | null | undefined;\n\nexport type ChangeHandler<Item> = (selectedItems: Item[] | undefined) => void;\n\nexport interface TokenizedInputProps<Item>\n  extends Omit<\n    TokenizedInputBaseProps<Item>,\n    | \"activeIndices\"\n    | \"focused\"\n    | \"highlightedIndex\"\n    | \"helpers\"\n    | \"onRemoveItem\"\n  > {\n  Tooltip?: ComponentType;\n  delimiter?: string | Array<string>;\n  disableAddOnBlur?: boolean;\n  initialSelectedItems?: Array<Item>;\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  stringToItem?: StringToItem<Item>;\n  tooltipEnterDelay?: UseTooltipProps[\"enterDelay\"];\n  tooltipLeaveDelay?: UseTooltipProps[\"leaveDelay\"];\n  tooltipPlacement?: UseTooltipProps[\"placement\"];\n}\n\nexport const TokenizedInput = forwardRef(function TokenizedInput<Item>(\n  props: TokenizedInputProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const { inputRef: inputRefProp, ...restProps } = props;\n\n  const { inputRef, helpers, inputProps } = useTokenizedInput(restProps);\n\n  return (\n    <TokenizedInputBase\n      helpers={helpers}\n      inputRef={useForkRef(inputRef, inputRefProp)}\n      ref={ref}\n      {...inputProps}\n    />\n  );\n});\n"],"names":["forwardRef","TokenizedInput","useTokenizedInput","jsx","TokenizedInputBase","useForkRef"],"mappings":";;;;;;;;;;;AAuCO,MAAM,cAAiB,GAAAA,gBAAA,CAAW,SAASC,eAAAA,CAChD,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,YAAiB,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,UAAW,EAAA,GAAIC,oCAAkB,SAAS,CAAA,CAAA;AAErE,EAAA,uBACGC,cAAA,CAAAC,qCAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA,EAAUC,eAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,IAC3C,GAAA;AAAA,IACC,GAAG,UAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,287 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
-var deepmerge = require('deepmerge');
-var React = require('react');
-var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
-var calcFirstHiddenIndex = require('./internal/calcFirstHiddenIndex.js');
-var defaultItemToString = require('./internal/defaultItemToString.js');
-var InputPill = require('./internal/InputPill.js');
-var InputRuler = require('./internal/InputRuler.js');
-var useResizeObserver = require('./internal/useResizeObserver.js');
-var useWidth = require('./internal/useWidth.js');
-var Input = require('../input/Input.js');
-require('../input/StaticInputAdornment.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var deepmerge__default = /*#__PURE__*/_interopDefaultLegacy(deepmerge);
-
-const INITIAL_INPUT_WIDTH = 5;
-const withBaseName = core.makePrefixer("saltTokenizedInput");
-const getItemsAriaLabel = (itemCount) => itemCount === 0 ? "no item selected" : `${itemCount} ${itemCount > 1 ? "items" : "item"}`;
-const hasHelpers = (helpers) => {
-  if (process.env.NODE_ENV !== "production") {
-    if (helpers == null) {
-      console.warn(
-        'TokenizedInputBase is used without helpers. You should pass in "helpers" from "useTokenizedInput".'
-      );
-    }
-  }
-  return helpers != null;
-};
-const TokenizedInputBase = React.forwardRef(function TokenizedInputBase2(props, ref) {
-  const {
-    InputProps: InputProps2 = {},
-    ExpandButtonProps = {},
-    className,
-    activeIndices = [],
-    selectedItems = [],
-    highlightedIndex,
-    value,
-    focused,
-    expanded,
-    disabled,
-    helpers,
-    onFocus,
-    onBlur,
-    onKeyUp,
-    onKeyDown,
-    onRemoveItem,
-    onInputChange,
-    onInputFocus,
-    onInputBlur,
-    onInputSelect,
-    onClear,
-    onClick,
-    inputRef,
-    itemToString = defaultItemToString.defaultItemToString,
-    id: idProp,
-    expandButtonRef: expandButtonRefProp,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    ...restProps
-  } = props;
-  const density = core.useDensity();
-  const id = core.useId(idProp);
-  const inputId = `${id}-input`;
-  const expandButtonId = `${id}-expand-button`;
-  const clearButtonId = `${id}-clear-button`;
-  const pillGroupPadding = 16;
-  const pillsRef = React.useRef({});
-  const inputRulerRef = React.useRef(null);
-  const keydownExpandButton = React.useRef(false);
-  const [expandButtonRef, expandButtonWidth] = useWidth.useWidth(density);
-  const [clearButtonRef, clearButtonWidth] = useWidth.useWidth(density);
-  const [inputWidth, setInputWidth] = React.useState(INITIAL_INPUT_WIDTH);
-  const [pillGroupWidth, setPillGroupWidth] = React.useState(null);
-  const [firstHiddenIndex, setFirstHiddenIndex] = React.useState(null);
-  const showExpandButton = !expanded && firstHiddenIndex != null;
-  const widthOffset = pillGroupPadding + INITIAL_INPUT_WIDTH + (expanded ? clearButtonWidth : expandButtonWidth);
-  const containerRef = useResizeObserver.useResizeObserver(
-    React.useCallback(
-      ([{ contentRect }]) => {
-        setPillGroupWidth(contentRect.width - 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
-            )
-          })
-        );
-      }
-    },
-    [expanded, pillGroupWidth, selectedItems]
-  );
-  core.useIsomorphicLayoutEffect(() => {
-    if (expanded && inputRulerRef.current) {
-      const newInputWidth = inputRulerRef.current.scrollWidth;
-      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));
-    }
-  }, [expanded, pillGroupWidth, value]);
-  const handleExpandButtonKeyDown = (event) => {
-    const singleChar = event.key.length === 1;
-    const triggerExpand = [
-      "CONTROL",
-      "META",
-      "ENTER",
-      "BACKSPACE",
-      "ARROWDOWN",
-      "ARROWLEFT",
-      "ARROWRIGHT"
-    ].indexOf(event.key.toUpperCase()) !== -1;
-    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      helpers.updateExpanded(true);
-      keydownExpandButton.current = true;
-    }
-  };
-  const handleInputKeyUp = (event) => {
-    if (keydownExpandButton.current && "Enter" !== event.key) {
-      keydownExpandButton.current = false;
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
-    }
-    if (onKeyUp) {
-      onKeyUp(event);
-    }
-  };
-  const handleExpand = (event) => {
-    event.stopPropagation();
-    if (hasHelpers(helpers)) {
-      helpers.updateExpanded(true);
-    }
-  };
-  const handleClearButtonFocus = (event) => {
-    event.stopPropagation();
-    if (hasHelpers(helpers)) {
-      helpers.setFocused(false);
-      helpers.cancelBlur();
-    }
-  };
-  const selectedItemIds = selectedItems.map(
-    (_, index) => `${id}-pill-${index}`
-  );
-  const inputAriaLabelledBy = disabled ? [ariaLabelledBy, inputId, ...selectedItemIds] : [ariaLabelledBy, inputId];
-  const mergedInputProps = deepmerge__default["default"](
-    {
-      inputProps: {
-        style: {
-          width: inputWidth,
-          minWidth: inputWidth
-        },
-        "aria-label": [ariaLabel, getItemsAriaLabel(selectedItems.length)].filter(Boolean).join(" "),
-        "aria-labelledby": inputAriaLabelledBy.filter(Boolean).join(" "),
-        "aria-activedescendant": highlightedIndex && highlightedIndex >= 0 ? `${id}-pill-${highlightedIndex}` : void 0
-      }
-    },
-    InputProps2
-  );
-  const {
-    accessibleText: expandButtonAccessibleText,
-    ...restExpandButtonProps
-  } = ExpandButtonProps;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ...restProps,
-    className: clsx.clsx(
-      withBaseName(),
-      {
-        [withBaseName("focused")]: focused,
-        [withBaseName("expanded")]: expanded,
-        [withBaseName("disabled")]: disabled
-      },
-      className
-    ),
-    id,
-    onClick,
-    ref: core.useForkRef(ref, containerRef),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        "aria-owns": selectedItemIds.join(" "),
-        className: withBaseName("hidden"),
-        role: "listbox"
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: withBaseName("pillGroup"),
-        children: [
-          selectedItems.map((item, index) => {
-            const label = itemToString(item);
-            return /* @__PURE__ */ jsxRuntime.jsx(InputPill.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__ */ jsxRuntime.jsx(core.Button, {
-            "aria-labelledby": [ariaLabelledBy, inputId, expandButtonId].filter(Boolean).join(" "),
-            className: clsx.clsx(withBaseName("expandButton"), {
-              [withBaseName("hidden")]: !showExpandButton
-            }),
-            disabled,
-            id: expandButtonId,
-            onBlur,
-            onClick: handleExpand,
-            onFocus,
-            onKeyDown: handleExpandButtonKeyDown,
-            ref: core.useForkRef(expandButtonRef, expandButtonRefProp),
-            variant: "secondary",
-            ...restExpandButtonProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.OverflowMenuIcon, {
-              "aria-label": expandButtonAccessibleText === void 0 ? "expand edit" : expandButtonAccessibleText
-            })
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(Input.Input, {
-            ...mergedInputProps,
-            className: clsx.clsx(withBaseName("input"), withBaseName("inputField"), {
-              [withBaseName("hidden")]: showExpandButton
-            }),
-            disabled,
-            id: inputId,
-            onBlur: onInputBlur,
-            onChange: onInputChange,
-            onFocus: onInputFocus,
-            onKeyDown,
-            onKeyUp: handleInputKeyUp,
-            onSelect: onInputSelect,
-            renderSuffix: () => /* @__PURE__ */ jsxRuntime.jsx(InputRuler.InputRuler, {
-              ref: inputRulerRef,
-              value
-            }),
-            value,
-            ref: inputRef
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-        className: clsx.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__ */ jsxRuntime.jsx(icons.CloseIcon, {
-          "aria-label": "clear input"
-        })
-      })
-    ]
-  });
-});
-
-exports.TokenizedInputBase = TokenizedInputBase;
-//# sourceMappingURL=TokenizedInputBase.js.map