@salt-ds/core 1.72.0 → 1.74.0

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 { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  getComboBoxNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\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 type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n  extends UseComboBoxProps<Item>,\n    Omit<PillInputProps, \"onPillRemove\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected when the tab key is pressed.\n   */\n  selectOnTab?: boolean;\n  /**\n   * Props to pass to ComboBox's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltComboBox\",\n    props,\n  );\n  const {\n    children,\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    OverlayProps,\n    ...rest\n  } = finalProps;\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  const shouldAutoSelectRef = useRef(false);\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    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    setListRef,\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            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\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 (!event.repeat) {\n      shouldAutoSelectRef.current = false;\n    }\n\n    if (readOnly || isModifiedListControlNavigationKey(event)) {\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    // With no list shown, leave these keys to move the caret or scroll the page.\n    if (\n      (!openState || !hasValidChildren) &&\n      isListControlNavigationKey(event.key)\n    ) {\n      return;\n    }\n\n    const activeOption = activeState;\n\n    // Unlike arrow keys, PageUp/PageDown scroll the nearest scroll container.\n    if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined =\n      getComboBoxNavigationTarget(event.key, activeOption, {\n        getFirstOption,\n        getLastOption,\n        getOptionAfter,\n        getOptionBefore,\n        getOptionPageAbove,\n        getOptionPageBelow,\n      });\n\n    switch (event.key) {\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    if (event.currentTarget === inputRef.current) {\n      setFocusedState(true);\n    } else {\n      setActive(undefined);\n    }\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      shouldAutoSelectRef.current = false;\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    // Clean active item if no text is present.\n    if (value === \"\") {\n      setActive(undefined);\n    } else {\n      shouldAutoSelectRef.current = true;\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  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      shouldAutoSelectRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (openState && value) {\n      queueMicrotask(() => {\n        const newOption = getFirstOption();\n        if (newOption && shouldAutoSelectRef.current) {\n          setActive(newOption.data);\n        }\n      });\n    }\n  }, [value, setActive, openState, getFirstOption]);\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    let newActive: ReturnType<typeof getFirstOption>;\n\n    if (!openState) {\n      setActive(undefined);\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 (newActive) {\n      setActive(newActive?.data);\n    }\n  }, [openState]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, 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    <ListControlProvider 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          ...OverlayProps,\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    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ComboBox","_a","elements","value"],"mappings":"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"}
+{"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 { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  getComboBoxNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\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 type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n  extends UseComboBoxProps<Item>,\n    Omit<PillInputProps, \"onPillRemove\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected when the tab key is pressed.\n   */\n  selectOnTab?: boolean;\n  /**\n   * Props to pass to ComboBox's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltComboBox\",\n    props,\n  );\n  const {\n    children,\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    OverlayProps,\n    ...rest\n  } = finalProps;\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  const shouldAutoSelectRef = useRef(false);\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    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    setListRef,\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            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\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 (!event.repeat) {\n      shouldAutoSelectRef.current = false;\n    }\n\n    if (readOnly || isModifiedListControlNavigationKey(event)) {\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    // With no list shown, leave these keys to move the caret or scroll the page.\n    if (\n      (!openState || !hasValidChildren) &&\n      isListControlNavigationKey(event.key)\n    ) {\n      return;\n    }\n\n    const activeOption = activeState;\n\n    // Unlike arrow keys, PageUp/PageDown scroll the nearest scroll container.\n    if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined =\n      getComboBoxNavigationTarget(event.key, activeOption, {\n        getFirstOption,\n        getLastOption,\n        getOptionAfter,\n        getOptionBefore,\n        getOptionPageAbove,\n        getOptionPageBelow,\n      });\n\n    switch (event.key) {\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    if (event.currentTarget === inputRef.current) {\n      setFocusedState(true);\n    } else {\n      setActive(undefined);\n    }\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      shouldAutoSelectRef.current = false;\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    // Clean active item if no text is present.\n    if (value === \"\") {\n      setActive(undefined);\n    } else {\n      shouldAutoSelectRef.current = true;\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  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      shouldAutoSelectRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (openState && value) {\n      queueMicrotask(() => {\n        const newOption = getFirstOption();\n        if (newOption && shouldAutoSelectRef.current) {\n          setActive(newOption.data);\n        }\n      });\n    }\n  }, [value, setActive, openState, getFirstOption]);\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    let newActive: ReturnType<typeof getFirstOption>;\n\n    if (!openState) {\n      setActive(undefined);\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 (newActive) {\n      setActive(newActive?.data);\n    }\n  }, [openState]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, 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    <ListControlProvider 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          ...OverlayProps,\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    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["ComboBox","_a","elements","value"],"mappings":"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"}

package/dist-es/dialog/DialogHeader.js

@@ -6,6 +6,8 @@ import { forwardRef, useEffect } from 'react';
 import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import { H2 } from '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';

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  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } 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   * 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 {\n      status: statusContext,\n      setId: setHeaderId,\n      id: contextHeaderId,\n    } = 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    const headerId = useId(contextHeaderId);\n\n    useEffect(() => {\n      if (headerId) {\n        setHeaderId?.(headerId);\n      }\n    }, [headerId, setHeaderId]);\n\n    return (\n      <div\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 id={headerId} 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":";;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACF,gBAAA,EAAiB;AAErB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAW,MAAM,eAAe,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,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,UAAA,MAAA,oBAAU,GAAA,CAAC,mBAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,wBACE,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}
+{"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  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } 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   * 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 {\n      status: statusContext,\n      setId: setHeaderId,\n      id: contextHeaderId,\n    } = 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    const headerId = useId(contextHeaderId);\n\n    useEffect(() => {\n      if (headerId) {\n        setHeaderId?.(headerId);\n      }\n    }, [headerId, setHeaderId]);\n\n    return (\n      <div\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 id={headerId} 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":";;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACF,gBAAA,EAAiB;AAErB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAW,MAAM,eAAe,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,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,UAAA,MAAA,oBAAU,GAAA,CAAC,mBAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAa,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,wBACE,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}

package/dist-es/drawer/Drawer.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  /* Legacy padding for unsectioned drawers only. */\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawer.saltDrawer-sectioned {\n  padding: 0;\n}\n\n@supports selector(:has(*)) {\n  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {\n    padding: 0;\n  }\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n  --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  --drawer-padding: var(--salt-spacing-300);\n\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  /* Legacy padding for unsectioned drawers only. */\n  padding: var(--drawer-padding);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawer.saltDrawer-sectioned {\n  --drawer-padding: 0px;\n}\n\n.saltDrawer-resizing {\n  user-select: none;\n}\n\n@supports selector(:has(*)) {\n  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter),\n  .saltDrawer-inner:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {\n    --drawer-padding: 0px;\n  }\n}\n\n.saltDrawer-resizable {\n  --drawer-resizeHandleSize: var(--salt-size-fixed-600);\n  --drawer-resizeHandleOutset: var(--salt-spacing-150);\n  --drawer-resizeHandleGutter: calc(var(--drawer-resizeHandleSize) + var(--drawer-resizeHandleOutset));\n  /* With the gutter, approximates spacing-300 beside the handle */\n  --drawer-resizeHandlePadding: var(--salt-spacing-100);\n  overflow: visible;\n  padding: 0;\n}\n\n/* Styles applied to the scrolling inner element of a resizable drawer */\n.saltDrawer-inner {\n  /* min() keeps sectioned drawers at 0, as their sections own the padding */\n  --drawer-innerResizeHandlePadding: min(var(--drawer-padding), var(--drawer-resizeHandlePadding));\n\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n  overflow: auto;\n  padding: var(--drawer-padding);\n  box-sizing: border-box;\n}\n\n/* Reserve the handle's inner hit target */\n.saltDrawer-resizable.saltDrawer-left {\n  padding-right: var(--drawer-resizeHandleGutter);\n}\n\n.saltDrawer-resizable.saltDrawer-right {\n  padding-left: var(--drawer-resizeHandleGutter);\n}\n\n.saltDrawer-resizable.saltDrawer-top {\n  padding-bottom: var(--drawer-resizeHandleGutter);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom {\n  padding-top: var(--drawer-resizeHandleGutter);\n}\n\n/* Reduce the padding beside the handle */\n.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner {\n  padding-right: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner {\n  padding-left: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner {\n  padding-bottom: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner {\n  padding-top: var(--drawer-innerResizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-left > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {\n  padding-right: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-right > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter) {\n  padding-left: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):last-child {\n  padding-bottom: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > :is(.saltDrawerHeader, .saltDrawerContent, .saltDrawerFooter):first-child {\n  padding-top: var(--drawer-resizeHandlePadding);\n}\n\n/* Keeps the header accent bar level with the header's content */\n.saltDrawer-resizable.saltDrawer-top > .saltDrawer-inner > .saltDrawerHeader-withAccent:last-child::before {\n  bottom: var(--drawer-resizeHandlePadding);\n}\n\n.saltDrawer-resizable.saltDrawer-bottom > .saltDrawer-inner > .saltDrawerHeader-withAccent:first-child::before {\n  top: var(--drawer-resizeHandlePadding);\n}\n\n/* Keeps the deprecated close button in the corner, clear of the handle */\n.saltDrawer-resizable.saltDrawer-left .saltButton-secondary.saltDrawerCloseButton {\n  margin-right: calc(-1 * var(--drawer-innerResizeHandlePadding));\n}\n\n.saltDrawer-resizable.saltDrawer-bottom .saltButton-secondary.saltDrawerCloseButton {\n  margin-top: calc(-1 * var(--drawer-innerResizeHandlePadding));\n}\n\n/* Resize limits stay at least --salt-size-base and leave room on screen for the handle's outside target */\n.saltDrawer-resizable {\n  --drawer-resizeLimit: calc(100% - var(--drawer-resizeHandleOutset));\n  --drawer-minResize: min(max(var(--saltDrawer-minResize, 0px), var(--salt-size-base)), var(--drawer-resizeLimit));\n  --drawer-maxResize: min(var(--saltDrawer-maxResize, 100%), var(--drawer-resizeLimit));\n}\n\n.saltDrawer-resizable.saltDrawer-left,\n.saltDrawer-resizable.saltDrawer-right {\n  min-width: var(--drawer-minResize);\n  max-width: var(--drawer-maxResize);\n}\n\n.saltDrawer-resizable.saltDrawer-top,\n.saltDrawer-resizable.saltDrawer-bottom {\n  min-height: var(--drawer-minResize);\n  max-height: var(--drawer-maxResize);\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n  --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Drawer.css.js.map

package/dist-es/drawer/Drawer.js

@@ -14,6 +14,9 @@ import '../viewport/ViewportProvider.js';
 import css_248z from './Drawer.css.js';
 import { DrawerContext } from './DrawerContext.js';
 import { hasDrawerSection } from './hasDrawerSection.js';
+import { DrawerResizeGuide } from './internal/DrawerResizeGuide.js';
+import { DrawerResizeHandle } from './internal/DrawerResizeHandle.js';
+import { useDrawerResize } from './internal/useDrawerResize.js';
 
 const ConditionalScrimWrapper = ({
   condition,
@@ -41,8 +44,10 @@ const Drawer = forwardRef(
       variant = "primary",
       disableDismiss,
       disableScrim,
+      resizable = false,
       initialFocus,
       id,
+      style,
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy,
       ...rest
@@ -63,11 +68,29 @@ const Drawer = forwardRef(
     const { Component: FloatingComponent } = useFloatingComponent();
     const { context, floating, elements } = useFloatingUI({
       open: showComponent,
-      onOpenChange
+      onOpenChange: (newOpen, event) => {
+        if (!newOpen && isCancelResizeEvent(event)) return;
+        onOpenChange == null ? void 0 : onOpenChange(newOpen);
+      }
+    });
+    const {
+      sizeStyle,
+      isResizing,
+      isHovered,
+      isPlacing,
+      isCancelResizeEvent,
+      separatorProps,
+      guideProps
+    } = useDrawerResize({
+      enabled: resizable,
+      position,
+      element: elements.floating
     });
     const { getFloatingProps } = useInteractions([
       useClick(context),
-      useDismiss(context, { outsidePress: !disableDismiss })
+      useDismiss(context, {
+        outsidePress: disableDismiss ? false : () => !isPlacing
+      })
     ]);
     const handleRef = useForkRef(floating, ref);
     useEffect(() => {
@@ -84,14 +107,16 @@ const Drawer = forwardRef(
     const contextValue = useMemo(
       () => ({
         drawerId,
+        position,
+        resizable,
         headerId,
         setHeaderId,
         descriptionId,
         setDescriptionId
       }),
-      [drawerId, headerId, descriptionId]
+      [drawerId, position, resizable, headerId, descriptionId]
     );
-    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsxs(
       FloatingComponent,
       {
         id: drawerId,
@@ -115,13 +140,36 @@ const Drawer = forwardRef(
             [withBaseName("enterAnimation")]: open,
             [withBaseName("exitAnimation")]: !open,
             [withBaseName(variant)]: variant,
-            [withBaseName("sectioned")]: sectioned
+            [withBaseName("sectioned")]: sectioned,
+            [withBaseName("resizable")]: resizable,
+            [withBaseName("resizing")]: isResizing
           },
           className
         ),
         ...getFloatingProps(),
         ...rest,
-        children
+        style: {
+          ...style,
+          ...sizeStyle
+        },
+        children: [
+          resizable ? (
+            // Keeps the content's scrollbar clear of the resize handle.
+            /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children })
+          ) : children,
+          resizable && /* @__PURE__ */ jsx(
+            DrawerResizeHandle,
+            {
+              position,
+              resizing: isResizing,
+              hovered: isHovered,
+              "aria-label": "Resize drawer",
+              "aria-controls": drawerId,
+              ...separatorProps
+            }
+          ),
+          isPlacing && /* @__PURE__ */ jsx(DrawerResizeGuide, { position, ...guideProps })
+        ]
       }
     ) }) });
   }

package/dist-es/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.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 ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { hasDrawerSection } from \"./hasDrawerSection\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Prevent the drawer closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\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?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      initialFocus,\n      id,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer\",\n      css: drawerCss,\n      window: targetWindow,\n    });\n\n    const drawerId = useId(id);\n\n    const sectioned = hasDrawerSection(children);\n\n    const [showComponent, setShowComponent] = useState(false);\n    const [headerId, setHeaderId] = useState<string | undefined>(undefined);\n    const [descriptionId, setDescriptionId] = useState<string | undefined>(\n      undefined,\n    );\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { outsidePress: !disableDismiss }),\n    ]);\n\n    const handleRef = 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]);\n\n    const contextValue = useMemo(\n      () => ({\n        drawerId,\n        headerId,\n        setHeaderId,\n        descriptionId,\n        setDescriptionId,\n      }),\n      [drawerId, headerId, descriptionId],\n    );\n\n    return (\n      <DrawerContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            id={drawerId}\n            open={showComponent}\n            ref={handleRef}\n            role={\"dialog\"}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            aria-modal=\"true\"\n            aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n            aria-describedby={clsx(ariaDescribedBy, descriptionId) || undefined}\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n              outsideElementsInert: true,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(position),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(variant)]: variant,\n                [withBaseName(\"sectioned\")]: sectioned,\n              },\n              className,\n            )}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DrawerContext.Provider>\n    );\n  },\n);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.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 ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { hasDrawerSection } from \"./hasDrawerSection\";\nimport {\n  DrawerResizeGuide,\n  DrawerResizeHandle,\n  useDrawerResize,\n} from \"./internal\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Prevent the drawer closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Allow the user to resize the drawer. Set size limits with the `--saltDrawer-minResize`/`--saltDrawer-maxResize`\n   * variables, which apply to the width of `left` and `right` drawers and the height of `top` and `bottom` drawers.\n   * The drawer never shrinks below `--salt-size-base`, unless `min-width`/`min-height` is set directly.\n   * */\n  resizable?: boolean;\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?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      resizable = false,\n      initialFocus,\n      id,\n      style,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer\",\n      css: drawerCss,\n      window: targetWindow,\n    });\n\n    const drawerId = useId(id);\n\n    const sectioned = hasDrawerSection(children);\n\n    const [showComponent, setShowComponent] = useState(false);\n    const [headerId, setHeaderId] = useState<string | undefined>(undefined);\n    const [descriptionId, setDescriptionId] = useState<string | undefined>(\n      undefined,\n    );\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange: (newOpen, event) => {\n        if (!newOpen && isCancelResizeEvent(event)) return;\n        onOpenChange?.(newOpen);\n      },\n    });\n\n    const {\n      sizeStyle,\n      isResizing,\n      isHovered,\n      isPlacing,\n      isCancelResizeEvent,\n      separatorProps,\n      guideProps,\n    } = useDrawerResize({\n      enabled: resizable,\n      position,\n      element: elements.floating,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, {\n        outsidePress: disableDismiss ? false : () => !isPlacing,\n      }),\n    ]);\n\n    const handleRef = 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]);\n\n    const contextValue = useMemo(\n      () => ({\n        drawerId,\n        position,\n        resizable,\n        headerId,\n        setHeaderId,\n        descriptionId,\n        setDescriptionId,\n      }),\n      [drawerId, position, resizable, headerId, descriptionId],\n    );\n\n    return (\n      <DrawerContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            id={drawerId}\n            open={showComponent}\n            ref={handleRef}\n            role={\"dialog\"}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            aria-modal=\"true\"\n            aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n            aria-describedby={clsx(ariaDescribedBy, descriptionId) || undefined}\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n              outsideElementsInert: true,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(position),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(variant)]: variant,\n                [withBaseName(\"sectioned\")]: sectioned,\n                [withBaseName(\"resizable\")]: resizable,\n                [withBaseName(\"resizing\")]: isResizing,\n              },\n              className,\n            )}\n            {...getFloatingProps()}\n            {...rest}\n            style={{\n              ...style,\n              ...sizeStyle,\n            }}\n          >\n            {resizable ? (\n              // Keeps the content's scrollbar clear of the resize handle.\n              <div className={withBaseName(\"inner\")}>{children}</div>\n            ) : (\n              children\n            )}\n            {resizable && (\n              <DrawerResizeHandle\n                position={position}\n                resizing={isResizing}\n                hovered={isHovered}\n                aria-label=\"Resize drawer\"\n                aria-controls={drawerId}\n                {...separatorProps}\n              />\n            )}\n            {isPlacing && (\n              <DrawerResizeGuide position={position} {...guideProps} />\n            )}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DrawerContext.Provider>\n    );\n  },\n);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}

package/dist-es/drawer/DrawerContext.js

@@ -11,6 +11,8 @@ const DrawerContext = createContext(
   "DrawerContext",
   {
     drawerId: void 0,
+    position: void 0,
+    resizable: false,
     headerId: void 0,
     setHeaderId: () => {
     },

package/dist-es/drawer/DrawerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContext.js","sources":["../src/drawer/DrawerContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface DrawerContextValue {\n  drawerId?: string;\n  headerId?: string;\n  setHeaderId?: (id: string | undefined) => void;\n  descriptionId?: string;\n  setDescriptionId?: (id: string | undefined) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextValue>(\n  \"DrawerContext\",\n  {\n    drawerId: undefined,\n    headerId: undefined,\n    setHeaderId: () => {},\n    descriptionId: undefined,\n    setDescriptionId: () => {},\n  },\n);\n\nexport const useDrawerContext = () => {\n  return useContext(DrawerContext);\n};\n"],"names":[],"mappings":";;;;;;;;;AAWO,MAAM,aAAA,GAAgB,aAAA;AAAA,EAC3B,eAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU,MAAA;AAAA,IACV,QAAA,EAAU,MAAA;AAAA,IACV,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,aAAA,EAAe,MAAA;AAAA,IACf,kBAAkB,MAAM;AAAA,IAAC;AAAA;AAE7B;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA;AACjC;;;;"}
+{"version":3,"file":"DrawerContext.js","sources":["../src/drawer/DrawerContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { DrawerProps } from \"./Drawer\";\n\nexport interface DrawerContextValue {\n  drawerId?: string;\n  position?: DrawerProps[\"position\"];\n  resizable?: boolean;\n  headerId?: string;\n  setHeaderId?: (id: string | undefined) => void;\n  descriptionId?: string;\n  setDescriptionId?: (id: string | undefined) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextValue>(\n  \"DrawerContext\",\n  {\n    drawerId: undefined,\n    position: undefined,\n    resizable: false,\n    headerId: undefined,\n    setHeaderId: () => {},\n    descriptionId: undefined,\n    setDescriptionId: () => {},\n  },\n);\n\nexport const useDrawerContext = () => {\n  return useContext(DrawerContext);\n};\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,aAAA,GAAgB,aAAA;AAAA,EAC3B,eAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU,MAAA;AAAA,IACV,QAAA,EAAU,MAAA;AAAA,IACV,SAAA,EAAW,KAAA;AAAA,IACX,QAAA,EAAU,MAAA;AAAA,IACV,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,aAAA,EAAe,MAAA;AAAA,IACf,kBAAkB,MAAM;AAAA,IAAC;AAAA;AAE7B;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA;AACjC;;;;"}

package/dist-es/drawer/DrawerFooter.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDrawerFooter {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n";
+var css_248z = ".saltDrawerFooter {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  flex-wrap: wrap;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DrawerFooter.css.js.map

package/dist-es/drawer/DrawerHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDrawerHeader {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawerHeader-header {\n  margin: 0;\n}\n\n.saltDrawerHeader-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  min-width: 0;\n  word-break: break-word;\n}\n\n.saltDrawerHeader-header > .saltText {\n  display: block;\n  margin: 0;\n}\n\n.saltDrawerHeader-actionsContainer {\n  align-self: flex-start;\n  display: flex;\n}\n\n.saltDrawerHeader-withAccent {\n  position: relative;\n}\n\n.saltDrawerHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-300);\n  bottom: var(--salt-spacing-300);\n  left: 0;\n  width: var(--salt-size-bar);\n  background: var(--salt-sentiment-accent-background);\n}\n";
+var css_248z = ".saltDrawerHeader {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawerHeader-header {\n  margin: 0;\n}\n\n.saltDrawerHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  align-items: flex-start;\n  min-width: 0;\n  word-break: break-word;\n}\n\n/* Centres the title's first line on the actions */\n.saltDrawerHeader-withCenteredTitle .saltDrawerHeader-container {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n.saltDrawerHeader-header > .saltText {\n  display: block;\n  margin: 0;\n}\n\n.saltDrawerHeader-actionsContainer {\n  align-self: flex-start;\n  display: flex;\n}\n\n.saltDrawerHeader-withAccent {\n  position: relative;\n}\n\n.saltDrawerHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-300);\n  bottom: var(--salt-spacing-300);\n  left: 0;\n  width: var(--salt-size-bar);\n  background: var(--salt-sentiment-accent-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DrawerHeader.css.js.map

package/dist-es/drawer/DrawerHeader.js

@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import { H2 } from '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';
@@ -26,7 +28,7 @@ const DrawerHeader = forwardRef(
       actions,
       className,
       description,
-      disableAccent,
+      disableAccent: disableAccentProp,
       header,
       preheader,
       ...rest
@@ -37,11 +39,13 @@ const DrawerHeader = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const { setHeaderId, setDescriptionId } = useDrawerContext();
+    const { position, resizable, setHeaderId, setDescriptionId } = useDrawerContext();
+    const disableAccent = disableAccentProp ?? (Boolean(resizable) && position === "right");
     const headingId = useId();
     const descriptionId = useId();
     const hasHeading = Boolean(header || preheader);
     const hasDescription = Boolean(description);
+    const centeredTitle = Boolean(actions) && !preheader;
     useIsomorphicLayoutEffect(() => {
       setHeaderId == null ? void 0 : setHeaderId(hasHeading ? headingId : void 0);
       return () => {
@@ -60,7 +64,8 @@ const DrawerHeader = forwardRef(
         className: clsx(
           withBaseName(),
           {
-            [withBaseName("withAccent")]: !disableAccent
+            [withBaseName("withAccent")]: !disableAccent,
+            [withBaseName("withCenteredTitle")]: centeredTitle
           },
           className
         ),

package/dist-es/drawer/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\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 DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { setHeaderId, setDescriptionId } = useDrawerContext();\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DrawerHeader","drawerHeaderCss"],"mappings":"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"}
+{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `true` when the Drawer is resizable and positioned `right`, otherwise `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\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 DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent: disableAccentProp,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { position, resizable, setHeaderId, setDescriptionId } =\n      useDrawerContext();\n    const disableAccent =\n      disableAccentProp ?? (Boolean(resizable) && position === \"right\");\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n    const centeredTitle = Boolean(actions) && !preheader;\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n            [withBaseName(\"withCenteredTitle\")]: centeredTitle,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DrawerHeader","drawerHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAyB7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA,EAAe,iBAAA;AAAA,MACf,MAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAA,EAAa,gBAAA,KACxC,gBAAA,EAAiB;AACnB,IAAA,MAAM,aAAA,GACJ,iBAAA,KAAsB,OAAA,CAAQ,SAAS,KAAK,QAAA,KAAa,OAAA,CAAA;AAC3D,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,gBAAgB,KAAA,EAAM;AAC5B,IAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,MAAA,IAAU,SAAS,CAAA;AAC9C,IAAA,MAAM,cAAA,GAAiB,QAAQ,WAAW,CAAA;AAC1C,IAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,OAAO,CAAA,IAAK,CAAC,SAAA;AAE3C,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,aAAa,SAAA,GAAY,MAAA,CAAA;AAEvC,MAAA,OAAO,MAAM;AACX,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,MAAA,CAAA;AAAA,MAChB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,UAAA,EAAY,SAAA,EAAW,WAAW,CAAC,CAAA;AAEvC,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAmB,iBAAiB,aAAA,GAAgB,MAAA,CAAA;AAEpD,MAAA,OAAO,MAAM;AACX,QAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAmB,MAAA,CAAA;AAAA,MACrB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,cAAA,EAAgB,aAAA,EAAe,gBAAgB,CAAC,CAAA;AAEpD,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,aAAA;AAAA,YAC/B,CAAC,YAAA,CAAa,mBAAmB,CAAC,GAAG;AAAA,WACvC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACrC,QAAA,EAAA;AAAA,YAAA,UAAA,yBACE,EAAA,EAAA,EAAG,EAAA,EAAI,WAAW,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAChD,QAAA,EAAA;AAAA,cAAA,SAAA,wBACE,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,KAAA,EAAM,WACnB,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,cAED;AAAA,aAAA,EACH,CAAA;AAAA,YAED,WAAA,oBACC,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAI,aAAA;AAAA,gBACJ,KAAA,EAAM,WAAA;AAAA,gBACN,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,gBAEpC,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EAEJ,CAAA;AAAA,UACC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}

package/dist-es/drawer/internal/DrawerResizeGuide.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root element */\n.saltDrawerResizeGuide {\n  --drawerResizeGuide-borderColor: var(--salt-content-secondary-foreground);\n  --drawerResizeGuide-borderWidth: var(--salt-size-fixed-200);\n\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--salt-zIndex-drawer) + 1);\n  touch-action: none;\n  user-select: none;\n}\n\n/* Styles applied to the guide line */\n.saltDrawerResizeGuide::before {\n  content: \"\";\n  position: absolute;\n  box-sizing: border-box;\n  pointer-events: none;\n}\n\n/* Styles applied for left and right drawers */\n.saltDrawerResizeGuide-vertical {\n  cursor: var(--salt-cursor-drag-ew);\n}\n\n.saltDrawerResizeGuide-vertical::before {\n  top: 0;\n  bottom: 0;\n  left: var(--drawerResizeGuide-offset, 0px);\n  width: 0;\n  border-left: var(--drawerResizeGuide-borderWidth) var(--salt-borderStyle-dashed) var(--drawerResizeGuide-borderColor);\n  transform: translateX(-50%);\n}\n\n/* Styles applied for top and bottom drawers */\n.saltDrawerResizeGuide-horizontal {\n  cursor: var(--salt-cursor-drag-ns);\n}\n\n.saltDrawerResizeGuide-horizontal::before {\n  left: 0;\n  right: 0;\n  top: var(--drawerResizeGuide-offset, 0px);\n  height: 0;\n  border-top: var(--drawerResizeGuide-borderWidth) var(--salt-borderStyle-dashed) var(--drawerResizeGuide-borderColor);\n  transform: translateY(-50%);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DrawerResizeGuide.css.js.map

package/dist-es/drawer/internal/DrawerResizeGuide.css.js.map

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

package/dist-es/drawer/internal/DrawerResizeGuide.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { FloatingPortal } from '@floating-ui/react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useTheme, SaltProviderNext, SaltProvider } from '../../salt-provider/SaltProvider.js';
+import { makePrefixer } from '../../utils/makePrefixer.js';
+import '../../utils/useFloatingUI/useFloatingUI.js';
+import '../../utils/useId.js';
+import '../../viewport/ViewportProvider.js';
+import css_248z from './DrawerResizeGuide.css.js';
+
+const withBaseName = makePrefixer("saltDrawerResizeGuide");
+const DrawerResizeGuide = forwardRef(function DrawerResizeGuide2(props, ref) {
+  const { position, className, ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-drawer-resize-guide",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { themeNext } = useTheme();
+  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;
+  const vertical = position === "left" || position === "right";
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(ChosenSaltProvider, { applyClassesTo: "scope", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": true,
+      className: clsx(
+        withBaseName(),
+        withBaseName(vertical ? "vertical" : "horizontal"),
+        className
+      ),
+      ...rest
+    }
+  ) }) });
+});
+
+export { DrawerResizeGuide };
+//# sourceMappingURL=DrawerResizeGuide.js.map

package/dist-es/drawer/internal/DrawerResizeGuide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerResizeGuide.js","sources":["../src/drawer/internal/DrawerResizeGuide.tsx"],"sourcesContent":["import { FloatingPortal } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { makePrefixer } from \"../../utils\";\nimport type { DrawerProps } from \"../Drawer\";\nimport drawerResizeGuideCss from \"./DrawerResizeGuide.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerResizeGuide\");\n\nexport interface DrawerResizeGuideProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  position: NonNullable<DrawerProps[\"position\"]>;\n}\n\n/** Covers the viewport while placing the edge by click, so the click doesn't reach the content. */\nexport const DrawerResizeGuide = forwardRef<\n  HTMLDivElement,\n  DrawerResizeGuideProps\n>(function DrawerResizeGuide(props, ref) {\n  const { position, className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer-resize-guide\",\n    css: drawerResizeGuideCss,\n    window: targetWindow,\n  });\n\n  const { themeNext } = useTheme();\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  const vertical = position === \"left\" || position === \"right\";\n\n  return (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div\n          ref={ref}\n          aria-hidden\n          className={clsx(\n            withBaseName(),\n            withBaseName(vertical ? \"vertical\" : \"horizontal\"),\n            className,\n          )}\n          {...rest}\n        />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  );\n});\n"],"names":["DrawerResizeGuide","drawerResizeGuideCss"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAQlD,MAAM,iBAAA,GAAoB,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,OAAO,GAAA,EAAK;AACvC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,QAAA,EAAS;AAC/B,EAAA,MAAM,kBAAA,GAAqB,YAAY,gBAAA,GAAmB,YAAA;AAE1D,EAAA,MAAM,QAAA,GAAW,QAAA,KAAa,MAAA,IAAU,QAAA,KAAa,OAAA;AAErD,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,gBAAe,OAAA,EACjC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,QAAA,GAAW,UAAA,GAAa,YAAY,CAAA;AAAA,QACjD;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,KAER,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/drawer/internal/DrawerResizeHandle.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root element */\n.saltDrawerResizeHandle {\n  --drawerResizeHandle-thumbSize: max(var(--salt-size-icon, 12px), 12px);\n  --drawerResizeHandle-thumbImage: url(\"data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M5%2011V9H7V11H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%207L5%205H7L7%207H5Z%22%20%2F%3E%3Cpath%20d%3D%22M5%201V3H7V1L5%201Z%22%20%2F%3E%3C%2Fsvg%3E\");\n  --drawerResizeHandle-background: transparent;\n  --drawerResizeHandle-background-hover: var(--salt-separable-background-hover);\n  --drawerResizeHandle-background-active: var(--salt-separable-background-active);\n  --drawerResizeHandle-dot-background: var(--salt-separable-foreground);\n  --drawerResizeHandle-dot-background-hover: var(--salt-separable-foreground-hover);\n  --drawerResizeHandle-dot-background-active: var(--salt-separable-foreground-active);\n  /* The outset is equal on both sides, strip sits centred in the hit target. */\n  --drawerResizeHandle-targetSize: calc(var(--drawer-resizeHandleSize) + 2 * var(--drawer-resizeHandleOutset));\n\n  position: absolute;\n  z-index: 1;\n  touch-action: none;\n}\n\n/* Styles applied to the visible strip (::before) and its thumb (::after) */\n.saltDrawerResizeHandle::before,\n.saltDrawerResizeHandle::after {\n  content: \"\";\n  position: absolute;\n  inset: var(--drawerResizeHandle-stripInset);\n}\n\n.saltDrawerResizeHandle::before {\n  background: var(--drawerResizeHandle-background);\n}\n\n.saltDrawerResizeHandle::after {\n  background: var(--drawerResizeHandle-dot-background);\n  mask-image: var(--drawerResizeHandle-thumbImage);\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: var(--drawerResizeHandle-thumbSize);\n  -webkit-mask-image: var(--drawerResizeHandle-thumbImage);\n  -webkit-mask-position: center;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-size: var(--drawerResizeHandle-thumbSize);\n}\n\n.saltDrawerResizeHandle-left,\n.saltDrawerResizeHandle-right {\n  --drawerResizeHandle-stripInset: 0 var(--drawer-resizeHandleOutset);\n  top: 0;\n  bottom: 0;\n  width: var(--drawerResizeHandle-targetSize);\n}\n\n.saltDrawerResizeHandle-left {\n  right: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-right {\n  left: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-top,\n.saltDrawerResizeHandle-bottom {\n  --drawerResizeHandle-thumbImage: url(\"data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%3Cpath%20d%3D%22M1%205H3V7H1Z%22%20%2F%3E%3Cpath%20d%3D%22M5%205H7V7H5Z%22%20%2F%3E%3Cpath%20d%3D%22M9%205H11V7H9Z%22%20%2F%3E%3C%2Fsvg%3E\");\n  --drawerResizeHandle-stripInset: var(--drawer-resizeHandleOutset) 0;\n  left: 0;\n  right: 0;\n  height: var(--drawerResizeHandle-targetSize);\n}\n\n.saltDrawerResizeHandle-top {\n  bottom: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-bottom {\n  top: calc(-1 * var(--drawer-resizeHandleOutset));\n}\n\n.saltDrawerResizeHandle-hovered {\n  --drawerResizeHandle-background: var(--drawerResizeHandle-background-hover);\n  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-hover);\n}\n\n.saltDrawerResizeHandle.saltDrawerResizeHandle-resizing {\n  --drawerResizeHandle-background: var(--drawerResizeHandle-background-active);\n  --drawerResizeHandle-dot-background: var(--drawerResizeHandle-dot-background-active);\n}\n\n.saltDrawerResizeHandle:focus-visible {\n  outline: none;\n}\n\n.saltDrawerResizeHandle:focus-visible::before {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DrawerResizeHandle.css.js.map

package/dist-es/drawer/internal/DrawerResizeHandle.css.js.map

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

package/dist-es/drawer/internal/DrawerResizeHandle.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+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 css_248z from './DrawerResizeHandle.css.js';
+
+const withBaseName = makePrefixer("saltDrawerResizeHandle");
+const DrawerResizeHandle = forwardRef(function DrawerResizeHandle2(props, ref) {
+  const { position, resizing, hovered, className, ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-drawer-resize-handle",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        withBaseName(),
+        withBaseName(position),
+        {
+          [withBaseName("resizing")]: resizing,
+          [withBaseName("hovered")]: hovered
+        },
+        className
+      ),
+      ...rest
+    }
+  );
+});
+
+export { DrawerResizeHandle };
+//# sourceMappingURL=DrawerResizeHandle.js.map

package/dist-es/drawer/internal/DrawerResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerResizeHandle.js","sources":["../src/drawer/internal/DrawerResizeHandle.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../../utils\";\nimport type { DrawerProps } from \"../Drawer\";\nimport drawerResizeHandleCss from \"./DrawerResizeHandle.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerResizeHandle\");\n\nexport interface DrawerResizeHandleProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  position: NonNullable<DrawerProps[\"position\"]>;\n  resizing?: boolean;\n  hovered?: boolean;\n}\n\nexport const DrawerResizeHandle = forwardRef<\n  HTMLDivElement,\n  DrawerResizeHandleProps\n>(function DrawerResizeHandle(props, ref) {\n  const { position, resizing, hovered, className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer-resize-handle\",\n    css: drawerResizeHandleCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(position),\n        {\n          [withBaseName(\"resizing\")]: resizing,\n          [withBaseName(\"hovered\")]: hovered,\n        },\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n"],"names":["DrawerResizeHandle","drawerResizeHandleCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA;AASnD,MAAM,kBAAA,GAAqB,UAAA,CAGhC,SAASA,mBAAAA,CAAmB,OAAO,GAAA,EAAK;AACxC,EAAA,MAAM,EAAE,QAAA,EAAU,QAAA,EAAU,SAAS,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAE5D,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,2BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,QAAQ,CAAA;AAAA,QACrB;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,SAC7B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}