@salt-ds/lab 1.0.0-alpha.86 → 1.0.0-alpha.88

package/dist-es/rating/Rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.js","sources":["../src/rating/Rating.tsx"],"sourcesContent":["import {\n  capitalize,\n  type FlexLayoutProps,\n  makePrefixer,\n  useControlled,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport ratingCss from \"./Rating.css\";\nimport { RatingItem } from \"./RatingItem\";\n\nconst withBaseName = makePrefixer(\"saltRating\");\n\nexport interface RatingProps extends Omit<FlexLayoutProps<\"div\">, \"onChange\"> {\n  /**\n   * When provided, the component is controlled.\n   */\n  value?: number;\n  /**\n   * Default rating value for uncontrolled mode.\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Callback function for rating change.\n   * The first parameter is the event, and the second is the selected rating value.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: number) => void;\n  /**\n   * If true, the rating component will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating component will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Total number of icons displayed.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Function used to provider a user-friendly name for the current value of the rating. Primarily used by screen readers.\n   */\n  getLabel?: (value: number) => string;\n  /**\n   * Function used to provider a visible label for the rating.\n   */\n  getVisibleLabel?: (value: number, max: number) => string;\n  /**\n   * Position of the label relative to the rating component.\n   * Can be \"top\", \"right\", \"bottom\", or \"left\".\n   * @default \"right\"\n   */\n  labelPlacement?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n   */\n  name?: string;\n}\n\nconst defaultGetLabel = (value: number) =>\n  `${value} Star${value > 1 ? \"s\" : \"\"}`;\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n  {\n    value: valueProp,\n    defaultValue = 0,\n    name: nameProp,\n    onChange,\n    className,\n    readOnly,\n    disabled,\n    max = 5,\n    getLabel = defaultGetLabel,\n    getVisibleLabel,\n    labelPlacement = \"right\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rating\",\n    css: ratingCss,\n    window: targetWindow,\n  });\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n  } = useFormFieldProps();\n\n  const [hoveredValue, setHoveredValue] = useState(0);\n  const [selected, setSelected] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Rating\",\n    state: \"value\",\n  });\n  const radioGroupRef = useRef<HTMLDivElement>(null);\n  const name = useId(nameProp);\n\n  const updateRating = (\n    newValue: number,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => {\n    setSelected(newValue);\n    onChange?.(event, newValue);\n  };\n\n  const handleMouseEnter = (event: MouseEvent<HTMLInputElement>) => {\n    if (readOnly || disabled) return;\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setHoveredValue(itemValue);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    updateRating(itemValue, event);\n  };\n\n  const isTopLeft = labelPlacement === \"top\" || labelPlacement === \"left\";\n\n  const displayLabel = getVisibleLabel && (\n    <div\n      className={clsx(\n        withBaseName(\"label\"),\n        withBaseName(`label-${labelPlacement}`),\n      )}\n      aria-hidden\n    >\n      {getVisibleLabel(hoveredValue || selected, max)}\n    </div>\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`label${capitalize(labelPlacement)}`),\n        className,\n      )}\n      {...restProps}\n    >\n      {isTopLeft && displayLabel}\n      <div\n        role=\"radiogroup\"\n        className={withBaseName(\"container\")}\n        ref={radioGroupRef}\n        aria-readonly={readOnly || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        onMouseLeave={() => setHoveredValue(0)}\n      >\n        {Array.from({ length: max }, (_, index) => {\n          const itemValue = index + 1;\n          const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;\n          const isSelected = hoveredValue === 0 && itemValue <= selected;\n          const isUnselecting =\n            hoveredValue > 0 &&\n            itemValue > hoveredValue &&\n            itemValue <= selected;\n          return (\n            <RatingItem\n              key={itemValue}\n              currentRating={selected}\n              isHovered={isHovered}\n              isSelected={isSelected}\n              isUnselecting={isUnselecting}\n              onMouseEnter={handleMouseEnter}\n              onChange={handleChange}\n              value={itemValue}\n              readOnly={readOnly}\n              disabled={disabled}\n              name={name}\n              aria-label={getLabel?.(itemValue)}\n            />\n          );\n        })}\n      </div>\n      {!isTopLeft && displayLabel}\n    </div>\n  );\n});\n"],"names":["Rating","ratingCss"],"mappings":"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"}
+{"version":3,"file":"Rating.js","sources":["../src/rating/Rating.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport ratingCss from \"./Rating.css\";\nimport { RatingItem } from \"./RatingItem\";\n\nconst withBaseName = makePrefixer(\"saltRating\");\n\nexport interface RatingProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * When provided, the component is controlled.\n   */\n  value?: number;\n  /**\n   * Default rating value for uncontrolled mode.\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Callback function for rating change.\n   * The first parameter is the event, and the second is the selected rating value.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: number) => void;\n  /**\n   * If true, the rating component will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating component will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Total number of icons displayed.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Function used to provide a user-friendly name for the current value of the rating. Primarily used by screen readers.\n   */\n  getLabel?: (value: number) => string;\n  /**\n   * Function used to provide a visible label for the rating.\n   */\n  getVisibleLabel?: (value: number, max: number) => string;\n  /**\n   * Position of the label relative to the rating component.\n   * Can be \"top\", \"right\", \"bottom\", or \"left\".\n   * @default \"right\"\n   */\n  labelPlacement?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n   */\n  name?: string;\n}\n\nconst defaultGetLabel = (value: number) =>\n  `${value} Star${value > 1 ? \"s\" : \"\"}`;\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n  {\n    value: valueProp,\n    defaultValue = 0,\n    name: nameProp,\n    onChange,\n    className,\n    readOnly: readOnlyProp,\n    disabled: disabledProp,\n    max = 5,\n    getLabel = defaultGetLabel,\n    getVisibleLabel,\n    labelPlacement = \"right\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rating\",\n    css: ratingCss,\n    window: targetWindow,\n  });\n  const {\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const readOnly = formFieldReadOnly || readOnlyProp;\n\n  const [hoveredValue, setHoveredValue] = useState(0);\n  const [selected, setSelected] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Rating\",\n    state: \"value\",\n  });\n  const radioGroupRef = useRef<HTMLDivElement>(null);\n  const name = useId(nameProp);\n\n  const handleMouseEnter = (event: MouseEvent<HTMLInputElement>) => {\n    if (readOnly || disabled) return;\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setHoveredValue(itemValue);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setSelected(itemValue);\n    onChange?.(event, itemValue);\n  };\n\n  const isTopLeft = labelPlacement === \"top\" || labelPlacement === \"left\";\n\n  const displayLabel = getVisibleLabel && (\n    <div\n      className={clsx(\n        withBaseName(\"label\"),\n        withBaseName(`label-${labelPlacement}`),\n      )}\n      aria-hidden\n    >\n      {getVisibleLabel(hoveredValue || selected, max)}\n    </div>\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`label${capitalize(labelPlacement)}`),\n        className,\n      )}\n      {...restProps}\n    >\n      {isTopLeft && displayLabel}\n      <div\n        role=\"radiogroup\"\n        className={withBaseName(\"container\")}\n        ref={radioGroupRef}\n        aria-readonly={readOnly || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        onMouseLeave={() => setHoveredValue(0)}\n      >\n        {Array.from({ length: max }, (_, index) => {\n          const itemValue = index + 1;\n          const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;\n          const isSelected = hoveredValue === 0 && itemValue <= selected;\n          const isUnselecting =\n            hoveredValue > 0 &&\n            itemValue > hoveredValue &&\n            itemValue <= selected;\n          return (\n            <RatingItem\n              key={itemValue}\n              currentRating={selected}\n              isHovered={isHovered}\n              isSelected={isSelected}\n              isUnselecting={isUnselecting}\n              onMouseEnter={handleMouseEnter}\n              onChange={handleChange}\n              value={itemValue}\n              readOnly={readOnly}\n              disabled={disabled}\n              name={name}\n              aria-label={getLabel?.(itemValue)}\n            />\n          );\n        })}\n      </div>\n      {!isTopLeft && displayLabel}\n    </div>\n  );\n});\n"],"names":["Rating","ratingCss"],"mappings":"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"}

package/dist-es/tabs/drag-drop/useDragDropNaturalMovement.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
 import { Draggable } from './Draggable.js';
-import { getDraggedItem, getNextDropTarget, moveDragItem, measureDropTargets, isDraggedElement, dimensions } from './drag-utils.js';
+import { getDraggedItem, moveDragItem, measureDropTargets, getNextDropTarget, isDraggedElement, dimensions } from './drag-utils.js';
 import { useDragSpacers } from './useDragSpacers.js';
 
 const dragThreshold = 3;

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

@@ -97,7 +97,7 @@ const TabListNext = forwardRef(
         "data-ismeasuring": isMeasuring ? true : void 0,
         ref: handleRef,
         onKeyDown: handleKeyDown,
-        "aria-describedby": clsx(ariaDescribedBy, warningId),
+        "aria-describedby": clsx(ariaDescribedBy, warningId) || void 0,
         ...rest,
         children: [
           !isMeasuring && hidden.length > 0 && /* @__PURE__ */ jsx("span", { id: warningId, className: withBaseName("overflowWarning"), children: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected" }),

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

@@ -1 +1 @@
-{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import { capitalize, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  useRef,\n} from \"react\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useRestoreActiveTab } from \"./hooks/useRestoreActiveTab\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      removedActiveTabRef,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring, realSelectedIndexRef] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    useRestoreActiveTab({\n      container: tabstripRef,\n      tabs: items,\n      realSelectedIndex: realSelectedIndexRef,\n      removedActiveTabRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.parentElement?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId)}\n        {...rest}\n      >\n        {!isMeasuring && hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["tablistNextCss"],"mappings":"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"}
+{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import { capitalize, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  useRef,\n} from \"react\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useRestoreActiveTab } from \"./hooks/useRestoreActiveTab\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      removedActiveTabRef,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring, realSelectedIndexRef] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    useRestoreActiveTab({\n      container: tabstripRef,\n      tabs: items,\n      realSelectedIndex: realSelectedIndexRef,\n      removedActiveTabRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.parentElement?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId) || undefined}\n        {...rest}\n      >\n        {!isMeasuring && hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["tablistNextCss"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useDensity, useIcon, useId, useIsomorphicLayoutEffect, useForkRef, Button } from '@salt-ds/core';
+import { makePrefixer, useDensity, useIcon, useId, useIsomorphicLayoutEffect, Button, useForkRef } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';

package/dist-es/tokenized-input-next/TokenizedInputNext.js

@@ -176,8 +176,8 @@ const TokenizedInputNext = forwardRef(function TokenizedInputNext2({
           /* @__PURE__ */ jsx(
             "textarea",
             {
-              "aria-labelledby": clsx(inputAriaLabelledBy, textAreaLabelledBy),
-              "aria-describedby": clsx(ariaDescribedBy, textAreaDescribedBy),
+              "aria-labelledby": clsx(inputAriaLabelledBy, textAreaLabelledBy) || void 0,
+              "aria-describedby": clsx(ariaDescribedBy, textAreaDescribedBy) || void 0,
               "aria-label": clsx(ariaLabel, getItemsAriaLabel(selectedItems.length)),
               "aria-activedescendant": highlightedIndex && highlightedIndex >= 0 ? `${id}-pill-${highlightedIndex}` : void 0,
               disabled,

package/dist-es/tokenized-input-next/TokenizedInputNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenizedInputNext.js","sources":["../src/tokenized-input-next/TokenizedInputNext.tsx"],"sourcesContent":["import {\n  type AdornmentValidationStatus,\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  type NecessityType,\n  StatusAdornment,\n  useForkRef,\n  useIcon,\n  useId,\n  type ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  type TextareaHTMLAttributes,\n  useRef,\n} from \"react\";\nimport { InputPill } from \"./internal/InputPill\";\nimport tokenizedInputCss from \"./TokenizedInputNext.css\";\nimport {\n  type TokenizedInputNextHelpers,\n  type TokenizedInputNextState,\n  useTokenizedInputNext,\n} from \"./useTokenizedInputNext\";\n\ntype ChangeHandler<Item> = (\n  event: SyntheticEvent,\n  selectedItems: Item[] | undefined,\n) => void;\n\ntype ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { \"aria-label\"?: string };\n\nexport interface TokenizedInputNextProps<Item>\n  extends Partial<TokenizedInputNextState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  disabled?: boolean;\n  focused?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  onRemoveItem?: (event: SyntheticEvent, index: number) => void;\n  onInputBlur?: FocusEventHandler<HTMLTextAreaElement>;\n  onInputFocus?: FocusEventHandler<HTMLTextAreaElement>;\n  onInputChange?: ChangeEventHandler<HTMLTextAreaElement>;\n  onClick?: ReactEventHandler;\n  onClear?: ReactEventHandler;\n  delimiters?: string[];\n  disableAddOnBlur?: boolean;\n  defaultSelected?: Item[];\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: ReactEventHandler;\n  onExpand?: ReactEventHandler;\n\n  /// from input\n  /**\n   * Validation status.\n   */\n  validationStatus?: Omit<ValidationStatus, \"info\">;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  necessity?: NecessityType;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltTokenizedInputNext\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nexport const TokenizedInputNext = forwardRef(function TokenizedInputNext<Item>(\n  {\n    textAreaRef: textAreaRefProp,\n    textAreaProps = {},\n    variant = \"primary\",\n    ...rest\n  }: TokenizedInputNextProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input-next\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n  const {\n    \"aria-describedby\": textAreaDescribedBy,\n    \"aria-labelledby\": textAreaLabelledBy,\n    required: textAreaRequired,\n    ...restTextAreaProps\n  } = textAreaProps;\n\n  const { refs, helpers, inputProps, firstHiddenIndex } =\n    useTokenizedInputNext(rest);\n\n  const {\n    textAreaRef: textAreaHookRef,\n    pillsRef,\n    clearButtonRef,\n    expandButtonRef,\n    statusAdornmentRef,\n    containerRef: containerHookRef,\n  } = refs;\n\n  const {\n    ExpandButtonProps = {\n      \"aria-label\": \"expand edit\",\n    },\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    expanded,\n    disabled,\n    onBlur,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    focused,\n    validationStatus,\n    readOnly,\n    onInputFocus,\n    onInputBlur,\n    onClear,\n    onClick,\n    onKeyUp,\n    id: idProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  } = inputProps;\n  const { OverflowIcon, CloseIcon } = useIcon();\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  const keydownExpandButton = useRef(false);\n  const containerRef = useForkRef(ref, containerHookRef);\n  const textAreaRef = useForkRef(textAreaHookRef, textAreaRefProp);\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const hasHelpers = (helpers: TokenizedInputNextHelpers<Item>) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (helpers == null) {\n        console.warn(\n          'TokenizedInputNext is used without helpers. You should pass in \"helpers\" from \"useTokenizedInputNext\".',\n        );\n      }\n    }\n    return helpers != null;\n  };\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(event, true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (\n    event: KeyboardEvent<HTMLButtonElement | HTMLTextAreaElement>,\n  ) => {\n    // Call keydown again if the initial event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n      onKeyDown?.(event);\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(event, true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`,\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const expandedWithItems =\n    expanded && !showExpandButton && selectedItems.length > 0;\n  const { \"aria-label\": expandButtonAccessibleText, ...restExpandButtonProps } =\n    ExpandButtonProps;\n\n  return (\n    <div className={withBaseName(\"container\")}>\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"expanded\")]: expanded,\n            [withBaseName(\"focused\")]: !disabled && focused,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(validationStatus as string)]: validationStatus,\n          },\n          className,\n        )}\n        ref={containerRef}\n        onClick={onClick}\n        // Tab index allows the div to be found as related target and prevents it closing when a click in happens\n        tabIndex={-1}\n        {...restProps}\n      >\n        {selectedItems.length > 0 &&\n          selectedItems.map((item, index) => {\n            const label = String(item);\n            return (\n              <InputPill\n                disabled={disabled}\n                hidden={showExpandButton && index >= firstHiddenIndex}\n                highlighted={\n                  index === highlightedIndex ||\n                  activeIndices.indexOf(index) !== -1\n                }\n                id={`${id}-pill-${index}`}\n                index={index}\n                key={`${index}-${label}`}\n                label={label}\n                onClose={\n                  expanded && !readOnly\n                    ? (event) => onRemoveItem?.(event, index)\n                    : undefined\n                }\n                pillsRef={pillsRef}\n              />\n            );\n          })}\n        <textarea\n          aria-labelledby={clsx(inputAriaLabelledBy, textAreaLabelledBy)}\n          aria-describedby={clsx(ariaDescribedBy, textAreaDescribedBy)}\n          aria-label={clsx(ariaLabel, getItemsAriaLabel(selectedItems.length))}\n          aria-activedescendant={\n            highlightedIndex && highlightedIndex >= 0\n              ? `${id}-pill-${highlightedIndex}`\n              : undefined\n          }\n          disabled={disabled}\n          id={inputId}\n          readOnly={readOnly}\n          ref={textAreaRef}\n          required={textAreaRequired}\n          rows={1}\n          tabIndex={disabled ? -1 : 0}\n          value={value}\n          className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n          onChange={onInputChange}\n          onBlur={onInputBlur}\n          onFocus={!disabled ? onInputFocus : undefined}\n          onKeyDown={onKeyDown}\n          {...restTextAreaProps}\n        />\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {!disabled && !readOnly && validationStatus && (\n            <StatusAdornment\n              className={withBaseName(\"statusAdornment\")}\n              ref={statusAdornmentRef}\n              status={validationStatus as AdornmentValidationStatus}\n            />\n          )}\n          {expandedWithItems && !readOnly && (\n            <Button\n              className={withBaseName(\"endAdornment\")}\n              disabled={disabled}\n              id={clearButtonId}\n              onBlur={onBlur}\n              onClick={onClear}\n              onFocus={handleClearButtonFocus}\n              ref={clearButtonRef}\n              variant=\"secondary\"\n              data-testid=\"clear-button\"\n              aria-label=\"clear input\"\n            >\n              <CloseIcon aria-hidden />\n            </Button>\n          )}\n          {showExpandButton && (\n            <Button\n              className={withBaseName(\"endAdornment\")}\n              aria-label={expandButtonAccessibleText}\n              aria-labelledby={clsx(ariaLabelledBy, inputId, expandButtonId)}\n              disabled={disabled}\n              id={expandButtonId}\n              onBlur={onBlur}\n              onClick={handleExpand}\n              onKeyDown={handleExpandButtonKeyDown}\n              onKeyUp={handleInputKeyUp}\n              ref={expandButtonRef}\n              variant=\"secondary\"\n              data-testid=\"expand-button\"\n              {...restExpandButtonProps}\n            >\n              <OverflowIcon />\n            </Button>\n          )}\n        </div>\n\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    </div>\n  );\n});\n"],"names":["TokenizedInputNext","tokenizedInputCss","helpers"],"mappings":"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"}
+{"version":3,"file":"TokenizedInputNext.js","sources":["../src/tokenized-input-next/TokenizedInputNext.tsx"],"sourcesContent":["import {\n  type AdornmentValidationStatus,\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  type NecessityType,\n  StatusAdornment,\n  useForkRef,\n  useIcon,\n  useId,\n  type ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  type TextareaHTMLAttributes,\n  useRef,\n} from \"react\";\nimport { InputPill } from \"./internal/InputPill\";\nimport tokenizedInputCss from \"./TokenizedInputNext.css\";\nimport {\n  type TokenizedInputNextHelpers,\n  type TokenizedInputNextState,\n  useTokenizedInputNext,\n} from \"./useTokenizedInputNext\";\n\ntype ChangeHandler<Item> = (\n  event: SyntheticEvent,\n  selectedItems: Item[] | undefined,\n) => void;\n\ntype ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { \"aria-label\"?: string };\n\nexport interface TokenizedInputNextProps<Item>\n  extends Partial<TokenizedInputNextState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  disabled?: boolean;\n  focused?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;\n  onRemoveItem?: (event: SyntheticEvent, index: number) => void;\n  onInputBlur?: FocusEventHandler<HTMLTextAreaElement>;\n  onInputFocus?: FocusEventHandler<HTMLTextAreaElement>;\n  onInputChange?: ChangeEventHandler<HTMLTextAreaElement>;\n  onClick?: ReactEventHandler;\n  onClear?: ReactEventHandler;\n  delimiters?: string[];\n  disableAddOnBlur?: boolean;\n  defaultSelected?: Item[];\n  onChange?: ChangeHandler<Item>;\n  onCollapse?: ReactEventHandler;\n  onExpand?: ReactEventHandler;\n\n  /// from input\n  /**\n   * Validation status.\n   */\n  validationStatus?: Omit<ValidationStatus, \"info\">;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  necessity?: NecessityType;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltTokenizedInputNext\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nexport const TokenizedInputNext = forwardRef(function TokenizedInputNext<Item>(\n  {\n    textAreaRef: textAreaRefProp,\n    textAreaProps = {},\n    variant = \"primary\",\n    ...rest\n  }: TokenizedInputNextProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input-next\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n  const {\n    \"aria-describedby\": textAreaDescribedBy,\n    \"aria-labelledby\": textAreaLabelledBy,\n    required: textAreaRequired,\n    ...restTextAreaProps\n  } = textAreaProps;\n\n  const { refs, helpers, inputProps, firstHiddenIndex } =\n    useTokenizedInputNext(rest);\n\n  const {\n    textAreaRef: textAreaHookRef,\n    pillsRef,\n    clearButtonRef,\n    expandButtonRef,\n    statusAdornmentRef,\n    containerRef: containerHookRef,\n  } = refs;\n\n  const {\n    ExpandButtonProps = {\n      \"aria-label\": \"expand edit\",\n    },\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    expanded,\n    disabled,\n    onBlur,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    focused,\n    validationStatus,\n    readOnly,\n    onInputFocus,\n    onInputBlur,\n    onClear,\n    onClick,\n    onKeyUp,\n    id: idProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  } = inputProps;\n  const { OverflowIcon, CloseIcon } = useIcon();\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  const keydownExpandButton = useRef(false);\n  const containerRef = useForkRef(ref, containerHookRef);\n  const textAreaRef = useForkRef(textAreaHookRef, textAreaRefProp);\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const hasHelpers = (helpers: TokenizedInputNextHelpers<Item>) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (helpers == null) {\n        console.warn(\n          'TokenizedInputNext is used without helpers. You should pass in \"helpers\" from \"useTokenizedInputNext\".',\n        );\n      }\n    }\n    return helpers != null;\n  };\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(event, true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (\n    event: KeyboardEvent<HTMLButtonElement | HTMLTextAreaElement>,\n  ) => {\n    // Call keydown again if the initial event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n      onKeyDown?.(event);\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(event, true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`,\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const expandedWithItems =\n    expanded && !showExpandButton && selectedItems.length > 0;\n  const { \"aria-label\": expandButtonAccessibleText, ...restExpandButtonProps } =\n    ExpandButtonProps;\n\n  return (\n    <div className={withBaseName(\"container\")}>\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"expanded\")]: expanded,\n            [withBaseName(\"focused\")]: !disabled && focused,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(validationStatus as string)]: validationStatus,\n          },\n          className,\n        )}\n        ref={containerRef}\n        onClick={onClick}\n        // Tab index allows the div to be found as related target and prevents it closing when a click in happens\n        tabIndex={-1}\n        {...restProps}\n      >\n        {selectedItems.length > 0 &&\n          selectedItems.map((item, index) => {\n            const label = String(item);\n            return (\n              <InputPill\n                disabled={disabled}\n                hidden={showExpandButton && index >= firstHiddenIndex}\n                highlighted={\n                  index === highlightedIndex ||\n                  activeIndices.indexOf(index) !== -1\n                }\n                id={`${id}-pill-${index}`}\n                index={index}\n                key={`${index}-${label}`}\n                label={label}\n                onClose={\n                  expanded && !readOnly\n                    ? (event) => onRemoveItem?.(event, index)\n                    : undefined\n                }\n                pillsRef={pillsRef}\n              />\n            );\n          })}\n        <textarea\n          aria-labelledby={\n            clsx(inputAriaLabelledBy, textAreaLabelledBy) || undefined\n          }\n          aria-describedby={\n            clsx(ariaDescribedBy, textAreaDescribedBy) || undefined\n          }\n          aria-label={clsx(ariaLabel, getItemsAriaLabel(selectedItems.length))}\n          aria-activedescendant={\n            highlightedIndex && highlightedIndex >= 0\n              ? `${id}-pill-${highlightedIndex}`\n              : undefined\n          }\n          disabled={disabled}\n          id={inputId}\n          readOnly={readOnly}\n          ref={textAreaRef}\n          required={textAreaRequired}\n          rows={1}\n          tabIndex={disabled ? -1 : 0}\n          value={value}\n          className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n          onChange={onInputChange}\n          onBlur={onInputBlur}\n          onFocus={!disabled ? onInputFocus : undefined}\n          onKeyDown={onKeyDown}\n          {...restTextAreaProps}\n        />\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {!disabled && !readOnly && validationStatus && (\n            <StatusAdornment\n              className={withBaseName(\"statusAdornment\")}\n              ref={statusAdornmentRef}\n              status={validationStatus as AdornmentValidationStatus}\n            />\n          )}\n          {expandedWithItems && !readOnly && (\n            <Button\n              className={withBaseName(\"endAdornment\")}\n              disabled={disabled}\n              id={clearButtonId}\n              onBlur={onBlur}\n              onClick={onClear}\n              onFocus={handleClearButtonFocus}\n              ref={clearButtonRef}\n              variant=\"secondary\"\n              data-testid=\"clear-button\"\n              aria-label=\"clear input\"\n            >\n              <CloseIcon aria-hidden />\n            </Button>\n          )}\n          {showExpandButton && (\n            <Button\n              className={withBaseName(\"endAdornment\")}\n              aria-label={expandButtonAccessibleText}\n              aria-labelledby={clsx(ariaLabelledBy, inputId, expandButtonId)}\n              disabled={disabled}\n              id={expandButtonId}\n              onBlur={onBlur}\n              onClick={handleExpand}\n              onKeyDown={handleExpandButtonKeyDown}\n              onKeyUp={handleInputKeyUp}\n              ref={expandButtonRef}\n              variant=\"secondary\"\n              data-testid=\"expand-button\"\n              {...restExpandButtonProps}\n            >\n              <OverflowIcon />\n            </Button>\n          )}\n        </div>\n\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    </div>\n  );\n});\n"],"names":["TokenizedInputNext","tokenizedInputCss","helpers"],"mappings":"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"}

package/dist-es/tree/Tree.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTree {\n  --tree-node-collapse: var(--saltTree-node-collapse, var(--list-svg-tree-node-collapse));\n  --tree-node-expand: var(--saltTree-node-expand, var(--list-svg-tree-node-expand));\n  --tree-node-expanded-transform: var(--saltTree-node-expanded-transform, none);\n  --tree-node-indent: 0px;\n  --tree-toggle-width: 12px;\n\n  /* TODO: Use appropriate characteristics */\n  --list-background-highlighted: rgba(1, 1, 1, 0.1);\n  --list-item-height: 30px;\n  --list-item-padding: 0 6px;\n  --list-item-header-background: black;\n  --list-item-header-color: white;\n  --list-item-header-fontWeight: bold;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-content: \"\";\n  --list-item-header-twisty-top: 50%;\n  --list-item-header-twisty-left: -18px;\n  --list-item-header-twisty-right: auto;\n  --list-item-selected-color: white;\n\n  margin: 0;\n  padding: 0 1px;\n  font-size: var(--saltTree-fontSize, 14px);\n  max-height: inherit;\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n}\n\n.saltTree-child-nodes {\n  width: 100%;\n}\n\n.saltTree-scrollingContentContainer {\n  box-sizing: inherit;\n  list-style: none;\n  margin: 0;\n  position: relative;\n}\n";
+var css_248z = ".saltTree {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  outline: none;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltTree-disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Tree.css.js.map