@salt-ds/core 1.41.0 → 1.43.0

package/dist-es/combo-box/ComboBox.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { offset, size, flip, useInteractions, useDismiss, useFocus, useClick } from '@floating-ui/react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
@@ -28,7 +28,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
     children,
     className,
     disabled: disabledProp,
-    endAdornment,
+    endAdornment: endAdornmentProp,
     readOnly: readOnlyProp,
     multiselect,
     selectOnTab = !multiselect,
@@ -297,6 +297,26 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
   const buttonId = useId();
   const listId = useId();
   const handleListRef = useForkRef(listRef, floating);
+  const showOptionsButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-labelledby": clsx(buttonId, formFieldLabelledBy),
+      "aria-label": "Show options",
+      "aria-expanded": openState,
+      "aria-controls": openState ? listId : void 0,
+      "aria-haspopup": "listbox",
+      disabled,
+      appearance: "transparent",
+      onClick: handleButtonClick,
+      onFocus: handleButtonFocus,
+      tabIndex: -1,
+      children: openState ? /* @__PURE__ */ jsx(CollapseIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ExpandIcon, { "aria-hidden": true })
+    }
+  );
+  const endAdornment = !readOnly && hasValidChildren ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    endAdornmentProp,
+    showOptionsButton
+  ] }) : endAdornmentProp;
   return /* @__PURE__ */ jsxs(ListControlContext.Provider, { value: listControl, children: [
     /* @__PURE__ */ jsx(
       PillInput,
@@ -310,25 +330,7 @@ const ComboBox = forwardRef(function ComboBox2(props, ref) {
           },
           className
         ),
-        endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-          endAdornment,
-          !readOnly && hasValidChildren ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-labelledby": clsx(buttonId, formFieldLabelledBy),
-              "aria-label": "Show options",
-              "aria-expanded": openState,
-              "aria-controls": openState ? listId : void 0,
-              "aria-haspopup": "listbox",
-              disabled,
-              appearance: "transparent",
-              onClick: handleButtonClick,
-              onFocus: handleButtonFocus,
-              tabIndex: -1,
-              children: openState ? /* @__PURE__ */ jsx(CollapseIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ExpandIcon, { "aria-hidden": true })
-            }
-          ) : void 0
-        ] }),
+        endAdornment,
         onChange: handleChange,
         role: readOnly ? "textbox" : "combobox",
         disabled,

package/dist-es/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type FocusEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n  type UseFloatingUIProps,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport type ComboBoxProps<Item = string> = {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected on tab key press.\n   */\n  selectOnTab?: boolean;\n} & UseComboBoxProps<Item> &\n  PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    endAdornment,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputRef: inputRefProp,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box\",\n    css: comboBoxCss,\n    window: targetWindow,\n  });\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const hasValidChildren =\n    Children.toArray(children).filter(Boolean).length > 0;\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && hasValidChildren,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n      null;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Wait for the filter to happen\n    queueMicrotask(() => {\n      if (value !== \"\") {\n        const newOption = getFirstOption();\n        if (newOption) {\n          setActive(newOption.data);\n        }\n      } else {\n        setActive(undefined);\n      }\n    });\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > -1) {\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={\n          <>\n            {endAdornment}\n            {!readOnly && hasValidChildren ? (\n              <Button\n                aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n                aria-label=\"Show options\"\n                aria-expanded={openState}\n                aria-controls={openState ? listId : undefined}\n                aria-haspopup=\"listbox\"\n                disabled={disabled}\n                appearance=\"transparent\"\n                onClick={handleButtonClick}\n                onFocus={handleButtonFocus}\n                tabIndex={-1}\n              >\n                {openState ? (\n                  <CollapseIcon aria-hidden />\n                ) : (\n                  <ExpandIcon aria-hidden />\n                )}\n              </Button>\n            ) : undefined}\n          </>\n        }\n        onChange={handleChange}\n        // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n        role={readOnly ? \"textbox\" : \"combobox\"}\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          \"aria-readonly\": readOnly ? \"true\" : undefined,\n          \"aria-expanded\": !readOnly ? openState : undefined,\n          \"aria-controls\": openState && !readOnly ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={handleInputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={(openState || focusedState) && !readOnly && hasValidChildren}\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ComboBox","comboBoxCss","_a","elements","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA,CAAW,SAASA,SAAAA,CAC1C,OACA,GACA,EAAA;AA/DF,EAAA,IAAA,EAAA,EAAA,EAAA;AAgEE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,YAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,IACA,cAAc,CAAC,WAAA;AAAA,IACf,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAgB,GAAA,oBAAA;AAAA,IAChB,QAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAI,OAAQ,EAAA;AAC7C,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA,EAAE,iBAAmB,EAAA,mBAAA,KAAwB,EAAC;AAAA,IACzD,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA;AAAA,MACR,iBAAkB,EAAA;AAEtB,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,YAAY,CAAK,IAAA,iBAAA;AAC1C,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,YAAY,CAAK,IAAA,iBAAA;AAC1C,EAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAM,MAAA,cAAA,GAAiB,UAAW,CAAA,QAAA,EAAU,YAAY,CAAA;AAExD,EAAA,MAAM,cAAc,WAAkB,CAAA;AAAA,IACpC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,iBAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACE,GAAA,WAAA;AAEJ,EAAA,MAAM,gBAAuD,GAAA,CAC3D,OACA,EAAA,MAAA,EACA,MACG,KAAA;AA7JP,IAAAC,IAAAA,GAAAA;AA8JI,IAAM,MAAA,YAAA,GAAe,WAAW,OAAW,IAAA,OAAA;AAC3C,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,eAAA,CAAgB,OAAO,CAAA;AAAA;AAGzB,IAAI,IAAA,MAAA,KAAW,OAAW,IAAA,CAAC,OAAS,EAAA;AAClC,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA;AAG5B,IAAA,IAAI,YAAY,YAAc,EAAA;AAC9B,IAAA,OAAA,CAAQ,OAAO,CAAA;AAEf,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,CAAAA,GAAA,GAAA,QAAA,CAAS,OAAT,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAkB,CAAA,KAAA,EAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,gBAAA,GACJ,SAAS,OAAQ,CAAA,QAAQ,EAAE,MAAO,CAAA,OAAO,EAAE,MAAS,GAAA,CAAA;AAEtD,EAAM,MAAA,EAAE,GAAG,CAAG,EAAA,QAAA,EAAU,UAAU,QAAU,EAAA,SAAA,EAAW,OAAQ,EAAA,GAC7D,aAAc,CAAA;AAAA,IACZ,IAAA,EAAM,SAAa,IAAA,CAAC,QAAY,IAAA,gBAAA;AAAA,IAChC,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,cAAA;AAAA,IACX,QAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACV,OAAO,CAAC,CAAA;AAAA,MACR,IAAK,CAAA;AAAA,QACH,MAAM,EAAE,KAAA,EAAO,QAAAC,EAAAA,SAAAA,EAAU,iBAAmB,EAAA;AAC1C,UAAO,MAAA,CAAA,MAAA,CAAOA,SAAS,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,YACrC,QAAU,EAAA,CAAA,EAAG,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA,EAAA,CAAA;AAAA,YAClC,SAAA,EAAW,YAAY,eAAe,CAAA,2FAAA;AAAA,WACvC,CAAA;AAAA;AACH,OACD,CAAA;AAAA,MACD,IAAK,CAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB;AAAA;AAC/C,GACD,CAAA;AAEH,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,WAAW,OAAO,CAAA;AAAA,IAClB,SAAS,OAAO,CAAA;AAAA,IAChB,SAAS,OAAS,EAAA,EAAE,kBAAkB,KAAO,EAAA,MAAA,EAAQ,OAAO;AAAA,GAC7D,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,SAAA,EAAW,GAAG,CAAA;AAE3D,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAAyC,KAAA;AAClE,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,MAAQ,OAAA,CAAA,CAAC,WAAW,QAAQ,CAAA;AAAA;AAC9B,GACF;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAtNlC,IAAAD,IAAAA,GAAAA;AAuNI,IAAA,CAAAA,GAAA,GAAA,QAAA,CAAS,OAAT,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAkB,CAAA,KAAA,EAAA;AAAA,GACpB;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA2C,KAAA;AA1NpE,IAAAA,IAAAA,GAAAA;AA2NI,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAEZ,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA;AAAA;AAGF,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,WAAe,IAAA,KAAA,CAAM,QAAQ,SAAW,EAAA;AACxD,QAAQ,OAAA,CAAA,IAAA,EAAM,KAAW,CAAA,EAAA,KAAA,CAAM,GAAG,CAAA;AAClC,QAAA;AAAA;AACF;AAGF,IAAA,MAAM,eAAe,WAAeA,KAAAA,CAAAA,GAAAA,GAAA,cAAe,EAAA,KAAf,gBAAAA,GAAkB,CAAA,IAAA,CAAA;AAEtD,IAAA,IAAI,SACF,GAAA,IAAA;AACF,IAAA,QAAQ,MAAM,GAAK;AAAA,MACjB,KAAK,WAAA;AACH,QAAY,SAAA,GAAA,cAAA,CAAe,YAAY,CAAA,IAAK,aAAc,EAAA;AAC1D,QAAA;AAAA,MACF,KAAK,SAAA;AACH,QAAY,SAAA,GAAA,eAAA,CAAgB,YAAY,CAAA,IAAK,cAAe,EAAA;AAC5D,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,SAAA,GAAY,cAAe,EAAA;AAC3B,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,SAAA,GAAY,aAAc,EAAA;AAC1B,QAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA;AAC3C,QAAA;AAAA,MACF,KAAK,UAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA;AAC3C,QAAA;AAAA,MACF,KAAK,OAAA;AACH,QAAI,IAAA,SAAA,KAAa,2CAAa,QAAU,CAAA,EAAA;AACtC,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAA;AAAA;AAGF,QAAI,IAAA,CAAC,SAAa,IAAA,CAAC,WAAa,EAAA;AAC9B,UAAA;AAAA;AAGF,QAAA,MAAA,CAAO,OAAO,WAAW,CAAA;AAEzB,QAAA,IAAI,CAAC,WAAa,EAAA;AAChB,UAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QACE,IAAA,SAAA,IACA,WACA,IAAA,WAAA,IACA,EAAC,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,QACd,CAAA,IAAA,CAAC,aAAc,CAAA,QAAA,CAAS,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAK,CAC1C,EAAA;AACA,UAAA,MAAA,CAAO,OAAO,WAAW,CAAA;AAAA;AAE3B,QAAA;AAAA;AAGJ,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,oBAAA,CAAqB,IAAI,CAAA;AAAA;AAG3B,IAAA,IAAI,SAAa,IAAA,SAAA,CAAU,IAAK,CAAA,EAAA,MAAO,2CAAa,EAAI,CAAA,EAAA;AACtD,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,SAAA,CAAU,UAAU,IAAI,CAAA;AAAA;AAC1B,GACF;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAwC,KAAA;AAC1D,IAAA,KAAA,CAAM,OAAQ,EAAA;AACd,IAAI,IAAA,CAAC,QAAQ,OAAW,IAAA,CAAC,QAAQ,OAAQ,CAAA,QAAA,CAAS,KAAM,CAAA,aAAa,CAAG,EAAA;AACtE,MAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA;AACX,GACF;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAME,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA;AAE3B,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,OAAO,CAAA;AAAA;AAGvB,IAAIA,IAAAA,MAAAA,KAAU,EAAM,IAAA,CAAC,WAAa,EAAA;AAChC,MAAA,KAAA,CAAM,KAAK,CAAA;AAAA;AAGb,IAAA,aAAA,CAAcA,MAAK,CAAA;AAGnB,IAAA,cAAA,CAAe,MAAM;AACnB,MAAA,IAAIA,WAAU,EAAI,EAAA;AAChB,QAAA,MAAM,YAAY,cAAe,EAAA;AACjC,QAAA,IAAI,SAAW,EAAA;AACb,UAAA,SAAA,CAAU,UAAU,IAAI,CAAA;AAAA;AAC1B,OACK,MAAA;AACL,QAAA,SAAA,CAAU,KAAS,CAAA,CAAA;AAAA;AACrB,KACD,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,GACb;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAAA,EAAuB,KAAkB,KAAA;AACjE,IAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,IAAM,MAAA,OAAA,GAAU,cAAc,KAAK,CAAA;AACnC,IAAA,UAAA,CAAW,OAAO,OAAO,CAAA;AAAA,GAC3B;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,GAC5B;AAEA,EAAA,MAAM,uBAAuB,MAAM;AACjC,IAAA,SAAA,CAAU,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EAAA,MAAM,mBAAmB,MAAM;AA7VjC,IAAAF,IAAAA,GAAAA;AA8VI,IAAA,CAAAA,GAAA,GAAA,QAAA,CAAS,OAAT,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAkB,CAAA,KAAA,EAAA;AAAA,GACpB;AAGA,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,SAAA,CAAU,KAAS,CAAA,CAAA;AACnB,MAAA;AAAA;AAIF,IAAA,MAAM,WAAc,GAAA,WAAA,GAAc,gBAAiB,CAAA,WAAW,CAAI,GAAA,CAAA,CAAA;AAClE,IAAA,IAAI,SAAY,GAAA,KAAA,CAAA;AAGhB,IAAA,IAAI,cAAc,CAAI,CAAA,EAAA;AACpB,MAAA;AAAA;AAIF,IAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,MAAY,SAAA,GAAA,kBAAA;AAAA,QACV,CAAC,MAAA,KAAW,MAAO,CAAA,KAAA,KAAU,cAAc,CAAC;AAAA,QAC5C,GAAI,EAAA;AAAA;AAIR,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAI,IAAA,OAAA,CAAQ,YAAY,WAAa,EAAA;AACnC,QAAA,SAAA,GAAY,cAAe,EAAA;AAC3B,QAAA,oBAAA,CAAqB,IAAI,CAAA;AAAA,OAC3B,MAAA,IAAW,OAAQ,CAAA,OAAA,KAAY,SAAW,EAAA;AACxC,QAAA,SAAA,GAAY,aAAc,EAAA;AAC1B,QAAA,oBAAA,CAAqB,IAAI,CAAA;AAAA;AAC3B;AAIF,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,SAAA,GAAY,cAAe,EAAA;AAAA;AAG7B,IAAA,SAAA,CAAU,uCAAW,IAAI,CAAA;AAAA,GACxB,EAAA,CAAC,SAAW,EAAA,QAAQ,CAAC,CAAA;AAExB,EAAA,MAAM,WAAW,KAAM,EAAA;AACvB,EAAA,MAAM,SAAS,KAAM,EAAA;AAErB,EAAM,MAAA,aAAA,GAAgB,UAA2B,CAAA,OAAA,EAAS,QAAQ,CAAA;AAElE,EAAA,uBACG,IAAA,CAAA,kBAAA,CAAmB,QAAnB,EAAA,EAA4B,OAAO,WAClC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QAEC,QAAA,EAAU,CAAC,QAAA,GAAW,CAAK,CAAA,GAAA,KAAA,CAAA;AAAA,QAC3B,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,YAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,8BAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,YAAA;AAAA,UACA,CAAC,YAAY,gBACZ,mBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,iBAAA,EAAiB,IAAK,CAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,cACnD,YAAW,EAAA,cAAA;AAAA,cACX,eAAe,EAAA,SAAA;AAAA,cACf,eAAA,EAAe,YAAY,MAAS,GAAA,KAAA,CAAA;AAAA,cACpC,eAAc,EAAA,SAAA;AAAA,cACd,QAAA;AAAA,cACA,UAAW,EAAA,aAAA;AAAA,cACX,OAAS,EAAA,iBAAA;AAAA,cACT,OAAS,EAAA,iBAAA;AAAA,cACT,QAAU,EAAA,CAAA,CAAA;AAAA,cAET,QAAA,EAAA,SAAA,uBACE,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,CAE1B,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,WAG1B,GAAA,KAAA;AAAA,SACN,EAAA,CAAA;AAAA,QAEF,QAAU,EAAA,YAAA;AAAA,QAEV,IAAA,EAAM,WAAW,SAAY,GAAA,UAAA;AAAA,QAC7B,QAAA;AAAA,QACA,QAAA;AAAA,QACA,UAAY,EAAA;AAAA,UACV,eAAA,EAAiB,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,UACrC,eAAA,EAAiB,CAAC,QAAA,GAAW,SAAY,GAAA,KAAA,CAAA;AAAA,UACzC,eAAiB,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,UACnD,SAAW,EAAA,aAAA;AAAA,UACX,GAAG;AAAA,SACL;AAAA,QACA,yBAAuB,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,EAAA;AAAA,QACpC,OAAA;AAAA,QACA,QAAU,EAAA,cAAA;AAAA,QACV,KAAO,EAAA,UAAA;AAAA,QACP,GAAK,EAAA,SAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG,iBAAkB,CAAA;AAAA,UACpB,MAAQ,EAAA,UAAA;AAAA,UACR,OAAS,EAAA,WAAA;AAAA,UACT,GAAG;AAAA,SACJ,CAAA;AAAA,QACD,KAAA,EACE,WAAc,GAAA,aAAA,CAAc,GAAI,CAAA,CAAC,SAAS,aAAc,CAAA,IAAI,CAAC,CAAA,GAAI,EAAC;AAAA,QAEpE,QAAU,EAAA,QAAA,IAAY,CAAC,YAAA,IAAgB,CAAC,SAAA;AAAA,QACxC,YAAc,EAAA,gBAAA;AAAA,QACd,aAAA,EAAe,CAAC,YAAgB,IAAA,QAAA;AAAA,QAChC,mBACE,EAAA,QAAA,IAAY,aAAc,CAAA,MAAA,GAAS,IAAI,EAAK,GAAA,KAAA;AAAA;AAAA,KAEhD;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,sBAAsB,EAAA,WAAA;AAAA,QACtB,IAAO,EAAA,CAAA,SAAA,IAAa,YAAiB,KAAA,CAAC,QAAY,IAAA,gBAAA;AAAA,QAClD,WAAW,CAAC,SAAA;AAAA,QACZ,GAAK,EAAA,aAAA;AAAA,QACL,EAAI,EAAA,MAAA;AAAA,QACJ,QAAU,EAAA,CAAA,CAAA;AAAA,QACT,GAAG,gBAAiB,CAAA;AAAA,UACnB,WAAa,EAAA,mBAAA;AAAA,UACb,OAAS,EAAA,gBAAA;AAAA,UACT,OAAS,EAAA,gBAAA;AAAA,UACT,YAAc,EAAA;AAAA,SACf,CAAA;AAAA,QACD,MAAM,CAAK,IAAA,CAAA;AAAA,QACX,KAAK,CAAK,IAAA,CAAA;AAAA,QACV,QAAU,EAAA,QAAA;AAAA,QACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,QAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,QAE1B;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type FocusEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n  type UseFloatingUIProps,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport type ComboBoxProps<Item = string> = {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected on tab key press.\n   */\n  selectOnTab?: boolean;\n} & UseComboBoxProps<Item> &\n  PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    endAdornment: endAdornmentProp,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputRef: inputRefProp,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box\",\n    css: comboBoxCss,\n    window: targetWindow,\n  });\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const hasValidChildren =\n    Children.toArray(children).filter(Boolean).length > 0;\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && hasValidChildren,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n      null;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Wait for the filter to happen\n    queueMicrotask(() => {\n      if (value !== \"\") {\n        const newOption = getFirstOption();\n        if (newOption) {\n          setActive(newOption.data);\n        }\n      } else {\n        setActive(undefined);\n      }\n    });\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > -1) {\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n  const showOptionsButton = (\n    <Button\n      aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n      aria-label=\"Show options\"\n      aria-expanded={openState}\n      aria-controls={openState ? listId : undefined}\n      aria-haspopup=\"listbox\"\n      disabled={disabled}\n      appearance=\"transparent\"\n      onClick={handleButtonClick}\n      onFocus={handleButtonFocus}\n      tabIndex={-1}\n    >\n      {openState ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n\n  // avoid render empty fragment, or empty div appear in PillInput\n  const endAdornment =\n    !readOnly && hasValidChildren ? (\n      <>\n        {endAdornmentProp}\n        {showOptionsButton}\n      </>\n    ) : (\n      endAdornmentProp\n    );\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={endAdornment}\n        onChange={handleChange}\n        // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n        role={readOnly ? \"textbox\" : \"combobox\"}\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          \"aria-readonly\": readOnly ? \"true\" : undefined,\n          \"aria-expanded\": !readOnly ? openState : undefined,\n          \"aria-controls\": openState && !readOnly ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={handleInputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={(openState || focusedState) && !readOnly && hasValidChildren}\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ComboBox","comboBoxCss","_a","elements","value"],"mappings":"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"}

package/dist-es/dialog/Dialog.js

@@ -80,6 +80,7 @@ const Dialog = forwardRef(
         ref: floatingRef,
         width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
         height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+        lockScroll: true,
         focusManagerProps: {
           context,
           initialFocus

package/dist-es/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent, setShowComponent]);\n\n    const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={id}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["Dialog","dialogCss"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent, setShowComponent]);\n\n    const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={id}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            lockScroll\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["Dialog","dialogCss"],"mappings":"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"}

package/dist-es/dialog/DialogContent.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\n  /* auto is needed for support on Safari, due to webkit bugs with flex */\n  flex: 1 1 auto;\n}\n.saltDialogContent-overflow {\n  padding-right: var(--salt-spacing-100);\n}\n\n.saltDialogContent-scroll {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
+var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  /* auto is needed for support on Safari, due to webkit bugs with flex */\n  flex: 1 1 auto;\n}\n.saltDialogContent-overflow {\n  padding-right: var(--salt-spacing-100);\n}\n\n.saltDialogContent-scroll {\n  margin-left: var(--salt-spacing-300);\n  margin-right: var(--salt-spacing-300);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DialogContent.css.js.map

package/dist-es/dialog/DialogContent.js

@@ -17,14 +17,19 @@ const withBaseName = makePrefixer("saltDialogContent");
 const DialogContent = forwardRef(
   function DialogContent2(props, ref) {
     const { children, className, ...rest } = props;
-    const [scrolled, setScrolled] = useState(false);
+    const [scrolledTop, setScrolledTop] = useState(false);
+    const [scrolledBottom, setScrolledBottom] = useState(true);
     const [isOverflowing, setIsOverflowing] = useState(false);
     const divRef = useRef(null);
     const containerRef = useForkRef(divRef, ref);
     const handleScroll = () => {
       targetWindow == null ? void 0 : targetWindow.requestAnimationFrame(() => {
-        if (!divRef.current) return;
-        setScrolled(divRef.current.scrollTop > 0);
+        const container = divRef.current;
+        if (!container) return;
+        setScrolledTop(container.scrollTop > 0);
+        setScrolledBottom(
+          container.scrollHeight - container.scrollTop - container.clientHeight !== 0
+        );
       });
     };
     const targetWindow = useWindow();
@@ -44,7 +49,14 @@ const DialogContent = forwardRef(
       checkOverflow();
     }, [checkOverflow]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: clsx({ [withBaseName("scroll")]: scrolled }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx({
+            [withBaseName("scroll")]: isOverflowing && scrolledTop
+          })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -60,6 +72,14 @@ const DialogContent = forwardRef(
           ref: containerRef,
           children
         }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx({
+            [withBaseName("scroll")]: isOverflowing && scrolledBottom
+          })
+        }
       )
     ] });
   }

package/dist-es/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const [scrolled, setScrolled] = useState(false);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const divRef = useRef<HTMLDivElement>(null);\n    const containerRef = useForkRef(divRef, ref);\n\n    const handleScroll = () => {\n      targetWindow?.requestAnimationFrame(() => {\n        if (!divRef.current) return;\n        setScrolled(divRef.current.scrollTop > 0);\n      });\n    };\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    const checkOverflow = useCallback(() => {\n      if (!divRef.current) return;\n      setIsOverflowing(\n        divRef.current.scrollHeight > divRef.current.offsetHeight,\n      );\n    }, []);\n\n    useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n    useIsomorphicLayoutEffect(() => {\n      checkOverflow();\n    }, [checkOverflow]);\n\n    return (\n      <>\n        <div className={clsx({ [withBaseName(\"scroll\")]: scrolled })} />\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"overflow\")]: isOverflowing,\n            },\n            className,\n          )}\n          onScrollCapture={handleScroll}\n          {...rest}\n          ref={containerRef}\n        >\n          {children}\n        </div>\n      </>\n    );\n  },\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAExD,IAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,IAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAE3C,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,sBAAsB,MAAM;AACxC,QAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,QAAY,WAAA,CAAA,MAAA,CAAO,OAAQ,CAAA,SAAA,GAAY,CAAC,CAAA;AAAA,OAC1C,CAAA;AAAA,KACF;AAEA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,MAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,MAAA,gBAAA;AAAA,QACE,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,OAAQ,CAAA;AAAA,OAC/C;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAc,aAAA,EAAA;AAAA,KAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,IAAA,CAAK,EAAE,CAAC,YAAa,CAAA,QAAQ,CAAC,GAAG,QAAS,EAAC,CAAG,EAAA,CAAA;AAAA,sBAC9D,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,IAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb;AAAA,cACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,aAC9B;AAAA,YACA;AAAA,WACF;AAAA,UACA,eAAiB,EAAA,YAAA;AAAA,UAChB,GAAG,IAAA;AAAA,UACJ,GAAK,EAAA,YAAA;AAAA,UAEJ;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const [scrolledTop, setScrolledTop] = useState(false);\n    const [scrolledBottom, setScrolledBottom] = useState(true);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const divRef = useRef<HTMLDivElement>(null);\n    const containerRef = useForkRef(divRef, ref);\n\n    const handleScroll = () => {\n      targetWindow?.requestAnimationFrame(() => {\n        const container = divRef.current;\n        if (!container) return;\n        setScrolledTop(container.scrollTop > 0);\n        setScrolledBottom(\n          container.scrollHeight -\n            container.scrollTop -\n            container.clientHeight !==\n            0,\n        );\n      });\n    };\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    const checkOverflow = useCallback(() => {\n      if (!divRef.current) return;\n      setIsOverflowing(\n        divRef.current.scrollHeight > divRef.current.offsetHeight,\n      );\n    }, []);\n\n    useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n    useIsomorphicLayoutEffect(() => {\n      checkOverflow();\n    }, [checkOverflow]);\n\n    return (\n      <>\n        <div\n          className={clsx({\n            [withBaseName(\"scroll\")]: isOverflowing && scrolledTop,\n          })}\n        />\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"overflow\")]: isOverflowing,\n            },\n            className,\n          )}\n          onScrollCapture={handleScroll}\n          {...rest}\n          ref={containerRef}\n        >\n          {children}\n        </div>\n        <div\n          className={clsx({\n            [withBaseName(\"scroll\")]: isOverflowing && scrolledBottom,\n          })}\n        />\n      </>\n    );\n  },\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,IAAI,CAAA;AACzD,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAExD,IAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,IAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAE3C,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,sBAAsB,MAAM;AACxC,QAAA,MAAM,YAAY,MAAO,CAAA,OAAA;AACzB,QAAA,IAAI,CAAC,SAAW,EAAA;AAChB,QAAe,cAAA,CAAA,SAAA,CAAU,YAAY,CAAC,CAAA;AACtC,QAAA,iBAAA;AAAA,UACE,SAAU,CAAA,YAAA,GACR,SAAU,CAAA,SAAA,GACV,UAAU,YACV,KAAA;AAAA,SACJ;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,MAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,MAAA,gBAAA;AAAA,QACE,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,OAAQ,CAAA;AAAA,OAC/C;AAAA,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAc,aAAA,EAAA;AAAA,KAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAK,CAAA;AAAA,YACd,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,aAAiB,IAAA;AAAA,WAC5C;AAAA;AAAA,OACH;AAAA,sBACA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,IAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb;AAAA,cACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,aAC9B;AAAA,YACA;AAAA,WACF;AAAA,UACA,eAAiB,EAAA,YAAA;AAAA,UAChB,GAAG,IAAA;AAAA,UACJ,GAAK,EAAA,YAAA;AAAA,UAEJ;AAAA;AAAA,OACH;AAAA,sBACA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAK,CAAA;AAAA,YACd,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,aAAiB,IAAA;AAAA,WAC5C;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/dialog/DialogHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-100);\n  width: var(--salt-size-bar);\n  background: var(--salt-accent-background);\n}\n\n.saltDialogHeader-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogHeader-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogHeader-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogHeader-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n.saltDialogHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n  align-items: flex-start;\n}\n\n.saltDialogHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-300);\n  width: var(--salt-size-bar);\n  background: var(--salt-accent-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DialogHeader.css.js.map

package/dist-es/dialog/DialogHeader.js

@@ -1,22 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { StatusIndicator, H2, Text } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
-import { Text } from '../text/Text.js';
-import '../text/Code.js';
-import '../text/Display.js';
-import { H2 } from '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextAction.js';
-import '../text/TextNotation.js';
+import { useDialogContext } from './DialogContext.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import { useDialogContext } from './DialogContext.js';
 import css_248z from './DialogHeader.css.js';
 
 const withBaseName = makePrefixer("saltDialogHeader");
@@ -24,9 +17,11 @@ const DialogHeader = forwardRef(
   function DialogHeader2(props, ref) {
     const {
       className,
+      description,
+      disableAccent,
+      actions,
       header,
       preheader,
-      disableAccent,
       status: statusProp,
       ...rest
     } = props;
@@ -54,10 +49,14 @@ const DialogHeader = forwardRef(
         ...rest,
         children: [
           status && /* @__PURE__ */ jsx(StatusIndicator, { status }),
-          /* @__PURE__ */ jsxs(H2, { className: withBaseName("header"), children: [
-            preheader && /* @__PURE__ */ jsx(Text, { variant: "secondary", className: withBaseName("preheader"), children: preheader }),
-            /* @__PURE__ */ jsx("div", { children: header })
-          ] })
+          /* @__PURE__ */ jsxs("div", { className: withBaseName("container"), children: [
+            /* @__PURE__ */ jsxs(H2, { className: withBaseName("header"), children: [
+              preheader && /* @__PURE__ */ jsx(Text, { color: "primary", children: preheader }),
+              header
+            ] }),
+            description && /* @__PURE__ */ jsx(Text, { color: "secondary", className: withBaseName("description"), children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: withBaseName("actionsContainer"), children: actions })
         ]
       }
     );

package/dist-es/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      header,\n      preheader,\n      disableAccent,\n      status: statusProp,\n      ...rest\n    } = props;\n    const { status: statusContext, id } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n\n    return (\n      <div\n        id={id}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <H2 className={withBaseName(\"header\")}>\n          {preheader && (\n            <Text variant=\"secondary\" className={withBaseName(\"preheader\")}>\n              {preheader}\n            </Text>\n          )}\n          <div>{header}</div>\n        </H2>\n      </div>\n    );\n  },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAoB7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAO,gBAAiB,EAAA;AAEvD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAc,IAAA,aAAA;AAE7B,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAa,CAAA,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAU,MAAA,oBAAA,GAAA,CAAC,mBAAgB,MAAgB,EAAA,CAAA;AAAA,0BAC3C,IAAA,CAAA,EAAA,EAAA,EAAG,SAAW,EAAA,YAAA,CAAa,QAAQ,CACjC,EAAA,QAAA,EAAA;AAAA,YACC,SAAA,oBAAA,GAAA,CAAC,QAAK,OAAQ,EAAA,WAAA,EAAY,WAAW,YAAa,CAAA,WAAW,GAC1D,QACH,EAAA,SAAA,EAAA,CAAA;AAAA,4BAEF,GAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA;AAAA,WACf,EAAA;AAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import {\n  H2,\n  StatusIndicator,\n  Text,\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 ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useDialogContext } from \"./DialogContext\";\n\nimport { makePrefixer } from \"../utils\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      description,\n      disableAccent,\n      actions,\n      header,\n      preheader,\n      status: statusProp,\n      ...rest\n    } = props;\n    const { status: statusContext, id } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n\n    return (\n      <div\n        id={id}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <div className={withBaseName(\"container\")}>\n          <H2 className={withBaseName(\"header\")}>\n            {preheader && <Text color=\"primary\">{preheader}</Text>}\n            {header}\n          </H2>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAO,gBAAiB,EAAA;AAEvD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAc,IAAA,aAAA;AAE7B,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAa,CAAA,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAU,MAAA,oBAAA,GAAA,CAAC,mBAAgB,MAAgB,EAAA,CAAA;AAAA,0BAC3C,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,WAAW,CACtC,EAAA,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,EAAG,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,CACjC,EAAA,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAc,GAAA,CAAA,IAAA,EAAA,EAAK,KAAM,EAAA,SAAA,EAAW,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,cAC9C;AAAA,aACH,EAAA,CAAA;AAAA,YACC,WAAA,wBACE,IAAK,EAAA,EAAA,KAAA,EAAM,aAAY,SAAW,EAAA,YAAA,CAAa,aAAa,CAAA,EAC1D,QACH,EAAA,WAAA,EAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,UACC,2BACE,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,kBAAkB,GAAI,QAAQ,EAAA,OAAA,EAAA;AAAA;AAAA;AAAA,KAE/D;AAAA;AAGN;;;;"}

package/dist-es/dropdown/Dropdown.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDropdown {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdown-background);\n  cursor: var(--dropdown-cursor);\n  min-height: var(--salt-size-base);\n  border: var(--dropdown-border);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  gap: var(--salt-spacing-100);\n  color: var(--dropdown-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  position: relative;\n  overflow: hidden;\n}\n\n.saltDropdown:hover {\n  background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdown-bordered.saltDropdown {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered.saltDropdown:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--dropdown-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered.saltDropdown:focus:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--dropdown-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"],\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"]:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-bordered.saltDropdown-disabled,\n.saltDropdown-bordered.saltDropdown-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);\n}\n\n.saltDropdown:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--dropdown-borderColor-hover);\n}\n\n.saltDropdown:focus .saltDropdown-activationIndicator,\n.saltDropdown:focus:hover .saltDropdown-activationIndicator {\n  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);\n}\n\n.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown[aria-readonly=\"true\"]:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-disabled .saltDropdown-activationIndicator,\n.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-bordered .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));\n}\n\n.saltDropdown-primary {\n  --dropdown-background: var(--salt-editable-primary-background);\n  --dropdown-background-active: var(--salt-editable-primary-background-active);\n  --dropdown-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-secondary {\n  --dropdown-background: var(--salt-editable-secondary-background);\n  --dropdown-background-active: var(--salt-editable-secondary-background-active);\n  --dropdown-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-error {\n  --dropdown-background: var(--salt-status-error-background);\n  --dropdown-background-active: var(--salt-status-error-background);\n  --dropdown-background-hover: var(--salt-status-error-background);\n  --dropdown-background-readonly: var(--salt-status-error-background);\n  --dropdown-borderColor: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-error-borderColor);\n  --dropdown-outlineColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning {\n  --dropdown-background: var(--salt-status-warning-background);\n  --dropdown-background-active: var(--salt-status-warning-background);\n  --dropdown-background-hover: var(--salt-status-warning-background);\n  --dropdown-background-readonly: var(--salt-status-warning-background);\n  --dropdown-borderColor: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);\n  --dropdown-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success {\n  --dropdown-background: var(--salt-status-success-background);\n  --dropdown-background-active: var(--salt-status-success-background);\n  --dropdown-background-hover: var(--salt-status-success-background);\n  --dropdown-background-readonly: var(--salt-status-success-background);\n  --dropdown-borderColor: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-success-borderColor);\n  --dropdown-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown:focus,\n.saltDropdown:focus:hover {\n  background: var(--dropdown-background-active);\n  cursor: var(--salt-selectable-cursor-hover);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);\n}\n\n.saltDropdown.saltDropdown[aria-readonly=\"true\"] {\n  background: var(--dropdown-background-readonly);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltDropdown.saltDropdown:disabled,\n.saltDropdown.saltDropdown:disabled:hover {\n  background: var(--dropdown-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltDropdown-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = ".saltDropdown {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdown-background);\n  cursor: var(--dropdown-cursor);\n  min-height: var(--salt-size-base);\n  border: var(--dropdown-border);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  color: var(--dropdown-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  position: relative;\n  overflow: hidden;\n}\n\n.saltDropdown:hover {\n  background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdown-bordered.saltDropdown {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered.saltDropdown:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--dropdown-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered.saltDropdown:focus:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--dropdown-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"],\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"]:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-bordered.saltDropdown-disabled,\n.saltDropdown-bordered.saltDropdown-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);\n}\n\n.saltDropdown:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--dropdown-borderColor-hover);\n}\n\n.saltDropdown:focus .saltDropdown-activationIndicator,\n.saltDropdown:focus:hover .saltDropdown-activationIndicator {\n  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);\n}\n\n.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown[aria-readonly=\"true\"]:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-disabled .saltDropdown-activationIndicator,\n.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-bordered .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));\n}\n\n.saltDropdown-primary {\n  --dropdown-background: var(--salt-editable-primary-background);\n  --dropdown-background-active: var(--salt-editable-primary-background-active);\n  --dropdown-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-secondary {\n  --dropdown-background: var(--salt-editable-secondary-background);\n  --dropdown-background-active: var(--salt-editable-secondary-background-active);\n  --dropdown-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-error {\n  --dropdown-background: var(--salt-status-error-background);\n  --dropdown-background-active: var(--salt-status-error-background);\n  --dropdown-background-hover: var(--salt-status-error-background);\n  --dropdown-background-readonly: var(--salt-status-error-background);\n  --dropdown-borderColor: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-error-borderColor);\n  --dropdown-outlineColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning {\n  --dropdown-background: var(--salt-status-warning-background);\n  --dropdown-background-active: var(--salt-status-warning-background);\n  --dropdown-background-hover: var(--salt-status-warning-background);\n  --dropdown-background-readonly: var(--salt-status-warning-background);\n  --dropdown-borderColor: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);\n  --dropdown-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success {\n  --dropdown-background: var(--salt-status-success-background);\n  --dropdown-background-active: var(--salt-status-success-background);\n  --dropdown-background-hover: var(--salt-status-success-background);\n  --dropdown-background-readonly: var(--salt-status-success-background);\n  --dropdown-borderColor: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-success-borderColor);\n  --dropdown-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown:focus,\n.saltDropdown:focus:hover {\n  background: var(--dropdown-background-active);\n  cursor: var(--salt-selectable-cursor-hover);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);\n}\n\n.saltDropdown.saltDropdown[aria-readonly=\"true\"] {\n  background: var(--dropdown-background-readonly);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltDropdown.saltDropdown:disabled,\n.saltDropdown.saltDropdown:disabled:hover {\n  background: var(--dropdown-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltDropdown-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdown-startAdornmentContainer {\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltDropdown .saltDropdown-toggle {\n  margin-left: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Dropdown.css.js.map

package/dist-es/dropdown/Dropdown.js

@@ -19,11 +19,11 @@ import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import css_248z from './Dropdown.css.js';
 
+const withBaseName = makePrefixer("saltDropdown");
 function ExpandIcon({ open }) {
   const { CollapseIcon, ExpandIcon: ExpandIcon2 } = useIcon();
-  return open ? /* @__PURE__ */ jsx(CollapseIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ExpandIcon2, { "aria-hidden": true });
+  return open ? /* @__PURE__ */ jsx(CollapseIcon, { className: withBaseName("toggle"), "aria-hidden": true }) : /* @__PURE__ */ jsx(ExpandIcon2, { className: withBaseName("toggle"), "aria-hidden": true });
 }
-const withBaseName = makePrefixer("saltDropdown");
 const Dropdown = forwardRef(function Dropdown2(props, ref) {
   var _a, _b;
   const {
@@ -300,7 +300,7 @@ const Dropdown = forwardRef(function Dropdown2(props, ref) {
           ...rest
         }),
         children: [
-          startAdornment,
+          startAdornment && /* @__PURE__ */ jsx("div", { className: withBaseName("startAdornmentContainer"), children: startAdornment }),
           /* @__PURE__ */ jsx(
             "span",
             {