@salt-ds/lab 1.0.0-alpha.30 → 1.0.0-alpha.32

package/dist-es/combo-box-next/ComboBoxNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useRef,\n} from \"react\";\nimport {\n  Button,\n  Input,\n  InputProps,\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport { ListControlProps } from \"../list-control/ListControlState\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { clsx } from \"clsx\";\nimport { flip, size } from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComboBoxNext } from \"./useComboBoxNext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface ComboBoxNextProps\n  extends InputProps,\n    Omit<ListControlProps, \"value\" | \"defaultValue\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport const ComboBoxNext = forwardRef<HTMLDivElement, ComboBoxNextProps>(\n  function ComboBox(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      endAdornment,\n      readOnly: readOnlyProp,\n      multiselect,\n      onSelectionChange,\n      selected,\n      defaultSelected,\n      defaultOpen,\n      onOpenChange,\n      onChange,\n      open,\n      inputProps: inputPropsProp,\n      variant = \"primary\",\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      value,\n      defaultValue,\n      ...rest\n    } = props;\n\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\n    const listControl = useComboBoxNext({\n      open,\n      defaultOpen,\n      onOpenChange,\n      multiselect,\n      defaultSelected,\n      selected,\n      onSelectionChange,\n      value,\n      defaultValue,\n    });\n\n    const {\n      activeState,\n      setActive,\n      openState,\n      setOpen,\n      openKey,\n      getOptionAtIndex,\n      getIndexOfOption,\n      getOptionsMatching,\n      options,\n      selectedState,\n      select,\n      clear,\n      setFocusVisibleState,\n      focusedState,\n      setFocusedState,\n      listRef,\n      valueState,\n      setValueState,\n    } = listControl;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { x, y, strategy, elements, floating, reference } = useFloatingUI({\n      open,\n      placement: \"bottom-start\",\n      middleware: [\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n    const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (!readOnly) {\n        event.stopPropagation();\n        setFocusVisibleState(false);\n        setOpen(event, !openState);\n      }\n    };\n\n    const handleButtonFocus = () => {\n      inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n      const count = options.length - 1;\n\n      if (readOnly) {\n        return;\n      }\n\n      if (!openState) {\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          setOpen(event, true);\n          return;\n        }\n      }\n\n      let newActive;\n      switch (event.key) {\n        case \"ArrowDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n          break;\n        case \"ArrowUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n          break;\n        case \"Home\":\n          newActive = getOptionAtIndex(0);\n          break;\n        case \"End\":\n          newActive = getOptionAtIndex(count);\n          break;\n        case \"PageUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n          break;\n        case \"PageDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n          break;\n        case \"Enter\":\n          if (openState && activeState?.disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (!openState || !activeState) {\n            return;\n          }\n\n          select(event, activeState);\n\n          if (!multiselect) {\n            event.preventDefault();\n            setOpen(event, false);\n          }\n\n          break;\n        case \"Escape\":\n          setOpen(event, false);\n          break;\n        case \"Tab\":\n          if (!multiselect && activeState) {\n            select(event, activeState);\n          }\n          break;\n      }\n\n      if (newActive && newActive?.id != activeState?.id) {\n        event.preventDefault();\n        setActive(newActive);\n        setFocusVisibleState(true);\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setFocusedState(true);\n\n      onFocus?.(event);\n    };\n\n    const ignoreBlur = useRef(false);\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      if (!ignoreBlur.current) {\n        setOpen(event, false);\n      }\n      ignoreBlur.current = false;\n\n      setFocusedState(false);\n      onBlur?.(event);\n    };\n\n    const handleClick = (event: MouseEvent<HTMLInputElement>) => {\n      if (!readOnly) {\n        setOpen(event, true);\n      }\n\n      onClick?.(event);\n    };\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (!openState) {\n        setOpen(event, true);\n      }\n\n      if (event.target.value === \"\" && !multiselect) {\n        clear(event);\n      }\n\n      setValueState(event.target.value);\n\n      // Wait for the filter to happen\n      queueMicrotask(() => {\n        const newOption = getOptionAtIndex(0);\n        if (newOption) {\n          setActive(newOption);\n        }\n      });\n      onChange?.(event);\n    };\n\n    const handleListMouseOver = () => {\n      setFocusVisibleState(false);\n    };\n\n    const handleListMouseDown = () => {\n      ignoreBlur.current = true;\n    };\n\n    const handleListFocus = () => {\n      inputRef.current?.focus();\n    };\n\n    const handleListClick = () => {\n      inputRef.current?.focus();\n    };\n\n    useEffect(() => {\n      // We check the active index because the active item may have been removed\n      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n      if (openState && activeIndex < 0) {\n        if (openKey.current.key === \"ArrowDown\") {\n          setActive(getOptionAtIndex(0));\n        } else if (openKey.current.key === \"ArrowUp\") {\n          setActive(getOptionAtIndex(options.length - 1));\n        } else {\n          if (selectedState.length > 0) {\n            const selected = getOptionsMatching(\n              (option) => option.value === selectedState[0]\n            ).pop();\n            if (selected) {\n              setActive(selected);\n            }\n          } else {\n            setActive(getOptionAtIndex(0));\n          }\n        }\n      } else if (!openState) {\n        setActive(undefined);\n      }\n    }, [openState, children]);\n\n    const buttonId = useId();\n    const listId = useId();\n\n    return (\n      <ListControlContext.Provider value={listControl}>\n        <Input\n          className={clsx(withBaseName(), className)}\n          endAdornment={\n            <>\n              {endAdornment}\n              {!readOnly ? (\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                  variant=\"secondary\"\n                  onClick={handleButtonClick}\n                  onFocus={handleButtonFocus}\n                  tabIndex={-1}\n                >\n                  {openState ? (\n                    <ChevronUpIcon aria-hidden />\n                  ) : (\n                    <ChevronDownIcon aria-hidden />\n                  )}\n                </Button>\n              ) : undefined}\n            </>\n          }\n          onClick={handleClick}\n          onBlur={handleBlur}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          role=\"combobox\"\n          disabled={disabled}\n          readOnly={readOnly}\n          inputProps={{\n            role: \"combobox\",\n            \"aria-expanded\": openState,\n            \"aria-multiselectable\": multiselect,\n            \"aria-controls\": openState ? listId : undefined,\n            ...inputPropsProp,\n          }}\n          aria-activedescendant={activeState?.id}\n          variant={variant}\n          inputRef={inputRef}\n          value={valueState}\n          {...rest}\n          ref={handleRef}\n        />\n        <FloatingComponent\n          open={(openState || focusedState) && !readOnly}\n          left={x ?? 0}\n          top={y ?? 0}\n          position={strategy}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          ref={floating}\n        >\n          <OptionList\n            collapsed={!openState}\n            ref={listRef}\n            id={listId}\n            onMouseOver={handleListMouseOver}\n            onMouseDown={handleListMouseDown}\n            onFocus={handleListFocus}\n            onClick={handleListClick}\n          >\n            {children}\n          </OptionList>\n        </FloatingComponent>\n      </ListControlContext.Provider>\n    );\n  }\n);\n"],"names":["elements","_a","selected"],"mappings":"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"}
+{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  Ref,\n  useEffect,\n  useRef,\n} from \"react\";\nimport {\n  Button,\n  Input,\n  InputProps,\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  UseFloatingUIProps,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport { ListControlProps } from \"../list-control/ListControlState\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { clsx } from \"clsx\";\nimport {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComboBoxNext } from \"./useComboBoxNext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface ComboBoxNextProps<Item = string>\n  extends InputProps,\n    Omit<ListControlProps<Item>, \"value\" | \"defaultValue\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * The default value of the input.\n   */\n  defaultValue?: string | readonly string[] | number | undefined;\n  /**\n   * The value of the input. The component will be controlled if this prop is provided.\n   */\n  value?: string | readonly string[] | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport const ComboBoxNext = forwardRef(function ComboBox<Item>(\n  props: ComboBoxNextProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    endAdornment,\n    readOnly: readOnlyProp,\n    multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onClick,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\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\n  const listControl = useComboBoxNext<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    options,\n    selectedState,\n    select,\n    clear,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    valueState,\n    setValueState,\n  } = listControl;\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n  };\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && children != undefined,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      middleware: [\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false }),\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    const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n    const count = options.length - 1;\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    let newActive;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n        break;\n      case \"Home\":\n        newActive = getOptionAtIndex(0);\n        break;\n      case \"End\":\n        newActive = getOptionAtIndex(count);\n        break;\n      case \"PageUp\":\n        newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n        break;\n      case \"PageDown\":\n        newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n        break;\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (!multiselect && activeState) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive && newActive?.id != activeState?.id) {\n      event.preventDefault();\n      setActive(newActive);\n      setFocusVisibleState(true);\n    }\n\n    onKeyDown?.(event);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    setFocusedState(false);\n    onBlur?.(event);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (event.target.value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(event.target.value);\n\n    // Wait for the filter to happen\n    queueMicrotask(() => {\n      const newOption = getOptionAtIndex(0);\n      if (newOption) {\n        setActive(newOption);\n      }\n    });\n    onChange?.(event);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  useEffect(() => {\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\n      return;\n    }\n\n    // If the list is closed we should clear the active item\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 = getOptionAtIndex(0);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getOptionAtIndex(options.length - 1);\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getOptionAtIndex(0);\n    }\n\n    setActive(newActive);\n  }, [openState, children]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <Input\n        className={clsx(withBaseName(), className)}\n        endAdornment={\n          <>\n            {endAdornment}\n            {!readOnly ? (\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                variant=\"secondary\"\n                onClick={handleButtonClick}\n                onFocus={handleButtonFocus}\n                tabIndex={-1}\n              >\n                {openState ? (\n                  <ChevronUpIcon aria-hidden />\n                ) : (\n                  <ChevronDownIcon aria-hidden />\n                )}\n              </Button>\n            ) : undefined}\n          </>\n        }\n        onChange={handleChange}\n        role=\"combobox\"\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          role: \"combobox\",\n          \"aria-expanded\": openState,\n          \"aria-multiselectable\": multiselect,\n          \"aria-controls\": openState ? listId : undefined,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={inputRef}\n        value={valueState}\n        ref={handleRef}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          onKeyDown: handleKeyDown,\n          ...rest,\n        })}\n      />\n      <FloatingComponent\n        open={(openState || focusedState) && !readOnly && children != undefined}\n        {...getFloatingProps()}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        ref={floating}\n      >\n        <OptionList\n          collapsed={!openState}\n          ref={listRef}\n          id={listId}\n          onMouseOver={handleListMouseOver}\n          onFocus={handleFocusInput}\n          onClick={handleFocusInput}\n        >\n          {children}\n        </OptionList>\n      </FloatingComponent>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ComboBoxNextProps<Item> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"],"names":["elements","_a"],"mappings":"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"}

package/dist-es/combo-box-next/useComboBoxNext.js

@@ -10,7 +10,9 @@ function useComboBoxNext(props) {
     selected,
     onSelectionChange,
     defaultValue,
-    value
+    value,
+    disabled,
+    readOnly
   } = props;
   const listControl = useListControl({
     open,
@@ -21,20 +23,27 @@ function useComboBoxNext(props) {
     selected,
     onSelectionChange,
     defaultValue,
-    value
+    value,
+    disabled,
+    readOnly
   });
-  const { selectedState, getOptionsMatching, setValueState, setSelectedState } = listControl;
+  const {
+    selectedState,
+    getOptionsMatching,
+    setValueState,
+    setSelectedState,
+    setOpen
+  } = listControl;
   const select = (event, option) => {
-    const { disabled, value: value2 } = option;
-    if (disabled) {
+    if (option.disabled || disabled || readOnly) {
       return;
     }
-    let newSelected = [value2];
+    let newSelected = [option.value];
     if (multiselect) {
-      if (selectedState.includes(value2)) {
-        newSelected = selectedState.filter((item) => item !== value2);
+      if (selectedState.includes(option.value)) {
+        newSelected = selectedState.filter((item) => item !== option.value);
       } else {
-        newSelected = selectedState.concat([value2]);
+        newSelected = selectedState.concat([option.value]);
       }
     }
     setSelectedState(newSelected);
@@ -43,6 +52,9 @@ function useComboBoxNext(props) {
     ).map((option2) => option2.text);
     setValueState(multiselect ? "" : newValue[0]);
     onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+    if (!multiselect) {
+      setOpen(false);
+    }
   };
   return { ...listControl, select };
 }

package/dist-es/combo-box-next/useComboBoxNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComboBoxNext.js","sources":["../src/combo-box-next/useComboBoxNext.tsx"],"sourcesContent":["import {\n  useListControl,\n  ListControlProps,\n} from \"../list-control/ListControlState\";\n\nimport { SyntheticEvent } from \"react\";\nimport { OptionValue } from \"../list-control/ListControlContext\";\n\nexport function useComboBoxNext(props: ListControlProps) {\n  const {\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n  } = props;\n\n  const listControl = useListControl({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n  });\n\n  const { selectedState, getOptionsMatching, setValueState, setSelectedState } =\n    listControl;\n\n  const select = (event: SyntheticEvent, option: OptionValue) => {\n    const { disabled, value } = option;\n\n    if (disabled) {\n      return;\n    }\n\n    let newSelected = [value];\n\n    if (multiselect) {\n      if (selectedState.includes(value)) {\n        newSelected = selectedState.filter((item) => item !== value);\n      } else {\n        newSelected = selectedState.concat([value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    const newValue = getOptionsMatching((option) =>\n      newSelected.includes(option.value)\n    ).map((option) => option.text);\n    setValueState(multiselect ? \"\" : newValue[0]);\n    onSelectionChange?.(event, newSelected);\n  };\n\n  return { ...listControl, select };\n}\n"],"names":["value","option"],"mappings":";;AAQO,SAAS,gBAAgB,KAAyB,EAAA;AACvD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,cAAc,cAAe,CAAA;AAAA,IACjC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,aAAA,EAAe,kBACxD,GAAA,WAAA,CAAA;AAEF,EAAM,MAAA,MAAA,GAAS,CAAC,KAAA,EAAuB,MAAwB,KAAA;AAC7D,IAAA,MAAM,EAAE,QAAA,EAAU,KAAAA,EAAAA,MAAAA,EAAU,GAAA,MAAA,CAAA;AAE5B,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,WAAA,GAAc,CAACA,MAAK,CAAA,CAAA;AAExB,IAAA,IAAI,WAAa,EAAA;AACf,MAAI,IAAA,aAAA,CAAc,QAASA,CAAAA,MAAK,CAAG,EAAA;AACjC,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,SAASA,MAAK,CAAA,CAAA;AAAA,OACtD,MAAA;AACL,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAACA,MAAK,CAAC,CAAA,CAAA;AAAA,OAC5C;AAAA,KACF;AAEA,IAAA,gBAAA,CAAiB,WAAW,CAAA,CAAA;AAC5B,IAAA,MAAM,QAAW,GAAA,kBAAA;AAAA,MAAmB,CAACC,OAAAA,KACnC,WAAY,CAAA,QAAA,CAASA,QAAO,KAAK,CAAA;AAAA,KACjC,CAAA,GAAA,CAAI,CAACA,OAAAA,KAAWA,QAAO,IAAI,CAAA,CAAA;AAC7B,IAAc,aAAA,CAAA,WAAA,GAAc,EAAK,GAAA,QAAA,CAAS,CAAE,CAAA,CAAA,CAAA;AAC5C,IAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,WAAA,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAO,OAAA,EAAE,GAAG,WAAA,EAAa,MAAO,EAAA,CAAA;AAClC;;;;"}
+{"version":3,"file":"useComboBoxNext.js","sources":["../src/combo-box-next/useComboBoxNext.tsx"],"sourcesContent":["import {\n  useListControl,\n  ListControlProps,\n} from \"../list-control/ListControlState\";\n\nimport { SyntheticEvent } from \"react\";\nimport { OptionValue } from \"../list-control/ListControlContext\";\n\nexport function useComboBoxNext<Item>(props: ListControlProps<Item>) {\n  const {\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n    disabled,\n    readOnly,\n  } = props;\n\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n    disabled,\n    readOnly,\n  });\n\n  const {\n    selectedState,\n    getOptionsMatching,\n    setValueState,\n    setSelectedState,\n    setOpen,\n  } = listControl;\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || disabled || readOnly) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    const newValue = getOptionsMatching((option) =>\n      newSelected.includes(option.value)\n    ).map((option) => option.text);\n    setValueState(multiselect ? \"\" : newValue[0]);\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  return { ...listControl, select };\n}\n"],"names":["option"],"mappings":";;AAQO,SAAS,gBAAsB,KAA+B,EAAA;AACnE,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,cAAc,cAAqB,CAAA;AAAA,IACvC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,GACE,GAAA,WAAA,CAAA;AAEJ,EAAM,MAAA,MAAA,GAAS,CAAC,KAAA,EAAuB,MAA8B,KAAA;AACnE,IAAI,IAAA,MAAA,CAAO,QAAY,IAAA,QAAA,IAAY,QAAU,EAAA;AAC3C,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,WAAA,GAAc,CAAC,MAAA,CAAO,KAAK,CAAA,CAAA;AAE/B,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,IAAI,aAAc,CAAA,QAAA,CAAS,MAAO,CAAA,KAAK,CAAG,EAAA;AACxC,QAAA,WAAA,GAAc,cAAc,MAAO,CAAA,CAAC,IAAS,KAAA,IAAA,KAAS,OAAO,KAAK,CAAA,CAAA;AAAA,OAC7D,MAAA;AACL,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAAC,MAAA,CAAO,KAAK,CAAC,CAAA,CAAA;AAAA,OACnD;AAAA,KACF;AAEA,IAAA,gBAAA,CAAiB,WAAW,CAAA,CAAA;AAC5B,IAAA,MAAM,QAAW,GAAA,kBAAA;AAAA,MAAmB,CAACA,OAAAA,KACnC,WAAY,CAAA,QAAA,CAASA,QAAO,KAAK,CAAA;AAAA,KACjC,CAAA,GAAA,CAAI,CAACA,OAAAA,KAAWA,QAAO,IAAI,CAAA,CAAA;AAC7B,IAAc,aAAA,CAAA,WAAA,GAAc,EAAK,GAAA,QAAA,CAAS,CAAE,CAAA,CAAA,CAAA;AAC5C,IAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,WAAA,CAAA,CAAA;AAE3B,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAO,OAAA,EAAE,GAAG,WAAA,EAAa,MAAO,EAAA,CAAA;AAClC;;;;"}

package/dist-es/content-status/internal/StatusIndicator.js

@@ -1,8 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, Spinner, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
+import { makePrefixer, CircularProgress, Spinner, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { CircularProgress } from '../../progress/CircularProgress/CircularProgress.js';
-import '../../progress/LinearProgress/LinearProgress.js';
 
 const withBaseName = makePrefixer("saltContentStatus");
 function StatusIndicator({

package/dist-es/content-status/internal/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"../../progress\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["BaseStatusIndicator"],"mappings":";;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,GAAA,CAAAA,iBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"@salt-ds/core\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["BaseStatusIndicator"],"mappings":";;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,GAAA,CAAAA,iBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  max-height: 100%;\n  max-width: 100%;\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  overflow-y: auto;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.salt-density-high {\n  --saltDialog-minWidth: 240px;\n}\n\n.salt-density-medium {\n  --saltDialog-minWidth: 320px;\n}\n\n.salt-density-low {\n  --saltDialog-minWidth: 400px;\n}\n\n.salt-density-touch {\n  --saltDialog-minWidth: 480px;\n}\n\n/* Styles applied to Dialog background overlay */\n.saltDialog-overlay {\n  background: var(--salt-overlayable-background);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--salt-spacing-100);\n  z-index: var(--salt-zIndex-modal);\n}\n\n/* Styles applied to Dialog when any status prop is applied */\n.saltDialog-withStatus {\n  border-width: var(--salt-size-border);\n  border-style: var(--salt-container-borderStyle);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n@media screen and (min-width: 480px) {\n  .saltDialog {\n    min-width: var(--saltDialog-minWidth);\n  }\n\n  .saltDialog-overlay {\n    padding: var(--salt-spacing-400);\n  }\n}\n";
+var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  overflow-y: auto;\n  z-index: var(--salt-zIndex-drawer);\n  height: min-content;\n  border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);\n}\n\n/* Styles applied to Dialog background overlay */\n.saltDialog-overlay {\n  background: var(--salt-overlayable-background);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--salt-spacing-100);\n  z-index: var(--salt-zIndex-modal);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths  */\n.saltDialog-small-xs {\n  width: 100%;\n  max-height: 48%;\n}\n\n.saltDialog-small-sm {\n  width: 56%;\n  max-height: 48%;\n}\n\n.saltDialog-small-md {\n  width: 36%;\n  max-height: 48%;\n}\n\n.saltDialog-small-lg {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-small-xl {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n  width: 100%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n  width: 84%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-md {\n  width: 68%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-large-xs {\n  width: 100%;\n  max-height: 84%;\n}\n\n.saltDialog-large-sm {\n  width: 96%;\n  max-height: 84%;\n}\n\n.saltDialog-large-md {\n  width: 84%;\n  max-height: 84%;\n}\n\n.saltDialog-large-lg {\n  width: 72%;\n  max-height: 84%;\n}\n\n.saltDialog-large-xl {\n  width: 72%;\n  max-height: 84%;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Dialog.css.js.map

package/dist-es/dialog/Dialog.js

@@ -1,89 +1,110 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect, useMemo } from 'react';
 import { clsx } from 'clsx';
-import { FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
-import { makePrefixer, useId, useForkRef, SaltProvider } from '@salt-ds/core';
+import { useInteractions, useClick, useDismiss } from '@floating-ui/react';
+import { makePrefixer, useId, useCurrentBreakpoint, useFloatingUI, useFloatingComponent, useForkRef, Scrim } from '@salt-ds/core';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
-import { useDialog } from './useDialog.js';
 import css_248z from './Dialog.css.js';
 import { DialogContext } from './DialogContext.js';
 
+const ConditionalScrimWrapper = ({
+  condition,
+  children
+}) => {
+  return condition ? /* @__PURE__ */ jsx(Scrim, {
+    fixed: true,
+    children
+  }) : /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      children,
+      " "
+    ]
+  });
+};
 const withBaseName = makePrefixer("saltDialog");
 const Dialog = forwardRef(function Dialog2(props, ref) {
+  var _a, _b;
   const {
     children,
     className,
-    open = true,
+    open = false,
     onOpenChange,
     status,
-    initialFocus,
+    disableDismiss,
+    size = "medium",
+    disableScrim,
+    idProp,
     ...rest
   } = props;
-  const dialogId = useId() || "dialog";
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-dialog",
     css: css_248z,
     window: targetWindow
   });
+  const id = useId(idProp);
+  const currentbreakpoint = useCurrentBreakpoint();
   const [showComponent, setShowComponent] = useState(false);
-  const { floating, context, getFloatingProps } = useDialog({
+  const { context, floating, elements } = useFloatingUI({
     open,
     onOpenChange
   });
+  const { getFloatingProps } = useInteractions([
+    useClick(context),
+    useDismiss(context, { enabled: !disableDismiss })
+  ]);
+  const { Component: FloatingComponent } = useFloatingComponent();
   const floatingRef = useForkRef(floating, ref);
   useEffect(() => {
     if (open && !showComponent) {
       setShowComponent(true);
     }
-  }, [open, showComponent]);
-  const contextValue = useMemo(
-    () => ({ dialogId, status }),
-    [dialogId, status]
-  );
-  return /* @__PURE__ */ jsx(FloatingPortal, {
-    children: /* @__PURE__ */ jsx(SaltProvider, {
-      children: showComponent && /* @__PURE__ */ jsx(FloatingOverlay, {
-        className: withBaseName("overlay"),
-        lockScroll: true,
-        children: /* @__PURE__ */ jsx(FloatingFocusManager, {
-          context,
-          modal: true,
-          initialFocus,
-          children: /* @__PURE__ */ jsx(DialogContext.Provider, {
-            value: contextValue,
-            children: /* @__PURE__ */ jsx("div", {
-              id: dialogId,
-              className: clsx(
-                withBaseName(),
-                {
-                  [withBaseName("enterAnimation")]: open,
-                  [withBaseName("exitAnimation")]: !open,
-                  [withBaseName("withStatus")]: status,
-                  [withBaseName(status)]: status
-                },
-                className
-              ),
-              onAnimationEnd: () => {
-                if (!open && showComponent) {
-                  setShowComponent(false);
-                }
-              },
-              ref: floatingRef,
-              "aria-labelledby": `${dialogId}-heading`,
-              "aria-describedby": `${dialogId}-description`,
-              "aria-modal": "true",
-              ...getFloatingProps(),
-              ...rest,
-              children
-            })
-          })
-        })
+    if (!open && showComponent) {
+      const animate = setTimeout(() => {
+        setShowComponent(false);
+      }, 300);
+      return () => clearTimeout(animate);
+    }
+  }, [open, showComponent, setShowComponent]);
+  const contextValue = useMemo(() => ({ status, id }), [status, id]);
+  return /* @__PURE__ */ jsx(DialogContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx(ConditionalScrimWrapper, {
+      condition: open && !disableScrim,
+      children: /* @__PURE__ */ jsx(FloatingComponent, {
+        open: showComponent,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": id,
+        ref: floatingRef,
+        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+        focusManagerProps: {
+          context
+        },
+        className: clsx(
+          withBaseName(),
+          withBaseName(size, currentbreakpoint),
+          {
+            [withBaseName("enterAnimation")]: open,
+            [withBaseName("exitAnimation")]: !open,
+            [withBaseName(status)]: status
+          },
+          className
+        ),
+        onAnimationEnd: () => {
+          if (!open && showComponent) {
+            setShowComponent(false);
+          }
+        },
+        ...getFloatingProps(),
+        ...rest,
+        children
       })
     })
   });
 });
 
-export { Dialog };
+export { ConditionalScrimWrapper, Dialog };
 //# sourceMappingURL=Dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useEffect,\n  useMemo,\n  useState,\n  ComponentProps,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  SaltProvider,\n  useForkRef,\n  useId,\n  ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useDialog } from \"./useDialog\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Status indicator\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    open = true,\n    onOpenChange,\n    status,\n    initialFocus,\n    ...rest\n  } = props;\n  const dialogId = useId() || \"dialog\";\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog\",\n    css: dialogCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const { floating, context, getFloatingProps } = useDialog({\n    open,\n    onOpenChange,\n  });\n\n  const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n  }, [open, showComponent]);\n\n  const contextValue = useMemo(\n    () => ({ dialogId, status }),\n    [dialogId, status]\n  );\n\n  return (\n    <FloatingPortal>\n      {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n      <SaltProvider>\n        {showComponent && (\n          <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n            <FloatingFocusManager\n              context={context}\n              modal\n              initialFocus={initialFocus}\n            >\n              <DialogContext.Provider value={contextValue}>\n                <div\n                  id={dialogId}\n                  className={clsx(\n                    withBaseName(),\n                    {\n                      [withBaseName(\"enterAnimation\")]: open,\n                      [withBaseName(\"exitAnimation\")]: !open,\n                      [withBaseName(\"withStatus\")]: status,\n                      [withBaseName(status as string)]: status,\n                    },\n                    className\n                  )}\n                  onAnimationEnd={() => {\n                    if (!open && showComponent) {\n                      setShowComponent(false);\n                    }\n                  }}\n                  ref={floatingRef}\n                  aria-labelledby={`${dialogId}-heading`}\n                  aria-describedby={`${dialogId}-description`}\n                  aria-modal=\"true\"\n                  {...getFloatingProps()}\n                  {...rest}\n                >\n                  {children}\n                </div>\n              </DialogContext.Provider>\n            </FloatingFocusManager>\n          </FloatingOverlay>\n        )}\n      </SaltProvider>\n    </FloatingPortal>\n  );\n});\n"],"names":["Dialog","dialogCss"],"mappings":";;;;;;;;;;;AAgDA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA,CAAwC,SAASA,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,QAAA,GAAW,OAAW,IAAA,QAAA,CAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,gBAAA,KAAqB,SAAU,CAAA;AAAA,IACxD,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,YAAe,GAAA,OAAA;AAAA,IACnB,OAAO,EAAE,QAAA,EAAU,MAAO,EAAA,CAAA;AAAA,IAC1B,CAAC,UAAU,MAAM,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,cAAA,EAAA;AAAA,IAEC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,MACE,2CACE,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAG,UAAU,EAAA,IAAA;AAAA,QAC7D,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,KAAK,EAAA,IAAA;AAAA,UACL,YAAA;AAAA,UAEA,QAAA,kBAAA,GAAA,CAAC,cAAc,QAAd,EAAA;AAAA,YAAuB,KAAO,EAAA,YAAA;AAAA,YAC7B,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,cACC,EAAI,EAAA,QAAA;AAAA,cACJ,SAAW,EAAA,IAAA;AAAA,gBACT,YAAa,EAAA;AAAA,gBACb;AAAA,kBACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,kBAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,kBAClC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,MAAA;AAAA,kBAC9B,CAAC,YAAa,CAAA,MAAgB,CAAI,GAAA,MAAA;AAAA,iBACpC;AAAA,gBACA,SAAA;AAAA,eACF;AAAA,cACA,gBAAgB,MAAM;AACpB,gBAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,kBAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,iBACxB;AAAA,eACF;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,mBAAiB,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,cACpB,oBAAkB,CAAG,EAAA,QAAA,CAAA,YAAA,CAAA;AAAA,cACrB,YAAW,EAAA,MAAA;AAAA,cACV,GAAG,gBAAiB,EAAA;AAAA,cACpB,GAAG,IAAA;AAAA,cAEH,QAAA;AAAA,aACH,CAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useEffect,\n  useMemo,\n  useState,\n  ComponentProps,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useCurrentBreakpoint,\n  useForkRef,\n  ValidationStatus,\n  Scrim,\n  useId,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    open = false,\n    onOpenChange,\n    status,\n    disableDismiss,\n    size = \"medium\",\n    disableScrim,\n    idProp,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog\",\n    css: dialogCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  const currentbreakpoint = useCurrentBreakpoint();\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const { context, floating, elements } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const { getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { enabled: !disableDismiss }),\n  ]);\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n\n    if (!open && showComponent) {\n      const animate = setTimeout(() => {\n        setShowComponent(false);\n      }, 300); // var(--salt-duration-perceptible)\n      return () => clearTimeout(animate);\n    }\n  }, [open, showComponent, setShowComponent]);\n\n  const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n  return (\n    <DialogContext.Provider value={contextValue}>\n      <ConditionalScrimWrapper condition={open && !disableScrim}>\n        <FloatingComponent\n          open={showComponent}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={id}\n          ref={floatingRef}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          focusManagerProps={{\n            context: context,\n          }}\n          className={clsx(\n            withBaseName(),\n            withBaseName(size, currentbreakpoint),\n            {\n              [withBaseName(\"enterAnimation\")]: open,\n              [withBaseName(\"exitAnimation\")]: !open,\n              [withBaseName(status as string)]: status,\n            },\n            className\n          )}\n          onAnimationEnd={() => {\n            if (!open && showComponent) {\n              setShowComponent(false);\n            }\n          }}\n          {...getFloatingProps()}\n          {...rest}\n        >\n          {children}\n        </FloatingComponent>\n      </ConditionalScrimWrapper>\n    </DialogContext.Provider>\n  );\n});\n"],"names":["Dialog","dialogCss"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Actions\n   */\n  children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const { children, className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-actions\",\n      css: dialogActionsCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogActions","dialogActionsCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Actions\n   */\n  children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const { children, className, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-actions\",\n      css: dialogActionsCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogActions","dialogActionsCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  flex: 1 1 auto;\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
+var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n  padding-bottom: var(--salt-spacing-50);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\n}\n\n.saltDialogContent-scroll {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DialogContent.css.js.map

package/dist-es/dialog/DialogContent.js

@@ -1,29 +1,38 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
 import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './DialogContent.css.js';
-import { useDialogContext } from './DialogContext.js';
 
 const withBaseName = makePrefixer("saltDialogContent");
 const DialogContent = forwardRef(
   function DialogContent2(props, ref) {
     const { children, className, ...rest } = props;
-    const { dialogId } = useDialogContext();
+    const [scrollTop, setScrollTop] = useState(0);
+    const handleScroll = (event) => {
+      setScrollTop(event.currentTarget.scrollTop);
+    };
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-dialog-content",
       css: css_248z,
       window: targetWindow
     });
-    return /* @__PURE__ */ jsx("div", {
-      id: `${dialogId}-description`,
-      className: clsx(withBaseName(), className),
-      ...rest,
-      ref,
-      children
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: clsx({ [withBaseName("scroll")]: scrollTop > 0 })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: clsx(withBaseName(), className),
+          onScroll: handleScroll,
+          ...rest,
+          ref,
+          children
+        })
+      ]
     });
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\nimport { useDialogContext } from \"./DialogContext\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const { dialogId } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        id={`${dialogId!}-description`}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEtC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,IAAI,CAAG,EAAA,QAAA,CAAA,YAAA,CAAA;AAAA,MACP,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const [scrollTop, setScrollTop] = useState(0);\n\n    const handleScroll = (event: React.UIEvent<HTMLElement>) => {\n      setScrollTop(event.currentTarget.scrollTop);\n    };\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <>\n        <div className={clsx({ [withBaseName(\"scroll\")]: scrollTop > 0 })} />\n        <div\n          className={clsx(withBaseName(), className)}\n          onScroll={handleScroll}\n          {...rest}\n          ref={ref}\n        >\n          {children}\n        </div>\n      </>\n    );\n  }\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AAC1D,MAAa,YAAA,CAAA,KAAA,CAAM,cAAc,SAAS,CAAA,CAAA;AAAA,KAC5C,CAAA;AAEA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,KAAK,EAAE,CAAC,aAAa,QAAQ,CAAA,GAAI,SAAY,GAAA,CAAA,EAAG,CAAA;AAAA,SAAG,CAAA;AAAA,wBAClE,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,QAAU,EAAA,YAAA;AAAA,UACT,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/dialog/DialogContext.js

@@ -1,6 +1,9 @@
 import { createContext, useContext } from 'react';
 
-const DialogContext = createContext({});
+const DialogContext = createContext({
+  status: void 0,
+  id: ""
+});
 const useDialogContext = () => {
   return useContext(DialogContext);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n  dialogId?: string;\n  status?: ValidationStatus;\n}>({});\n\nexport const useDialogContext = () => {\n  return useContext(DialogContext);\n};\n"],"names":[],"mappings":";;AAGa,MAAA,aAAA,GAAgB,aAG1B,CAAA,EAAE,EAAA;AAEE,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA,CAAA;AACjC;;;;"}
+{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n  status?: ValidationStatus;\n  id: string | undefined;\n}>({\n  status: undefined,\n  id: \"\",\n});\n\nexport const useDialogContext = () => {\n  return useContext(DialogContext);\n};\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,aAG1B,CAAA;AAAA,EACD,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,EAAI,EAAA,EAAA;AACN,CAAC,EAAA;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA,CAAA;AACjC;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogTitle .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogTitle-withAccent {\n  position: relative;\n}\n\n.saltDialogTitle-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-100);\n  width: var(--salt-size-accent);\n  background: var(--salt-accent-background);\n}\n\n.saltDialogTitle-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogTitle-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogTitle-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogTitle-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n}\n\n.saltDialogTitle-title {\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogTitle .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogTitle-withAccent {\n  position: relative;\n}\n\n.saltDialogTitle-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-100);\n  width: var(--salt-size-accent);\n  background: var(--salt-accent-background);\n}\n\n.saltDialogTitle-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogTitle-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogTitle-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogTitle-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DialogTitle.css.js.map

package/dist-es/dialog/DialogTitle.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { makePrefixer, H2, StatusIndicator } from '@salt-ds/core';
+import { makePrefixer, StatusIndicator, Text, H2 } from '@salt-ds/core';
 import { useDialogContext } from './DialogContext.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -8,26 +8,27 @@ import css_248z from './DialogTitle.css.js';
 
 const withBaseName = makePrefixer("saltDialogTitle");
 const DialogTitle = ({
-  children,
   className,
-  accent,
+  title,
+  subtitle,
+  disableAccent,
   status: statusProp,
   ...rest
 }) => {
-  const { dialogId, status: statusContext } = useDialogContext();
+  const { status: statusContext, id } = useDialogContext();
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-dialog-title",
     css: css_248z,
     window: targetWindow
   });
-  const status = statusProp || statusContext;
-  return /* @__PURE__ */ jsxs(H2, {
-    id: `${dialogId}-heading`,
+  const status = statusProp != null ? statusProp : statusContext;
+  return /* @__PURE__ */ jsxs("div", {
+    id,
     className: clsx(
       withBaseName(),
       {
-        [withBaseName("withAccent")]: accent && !status,
+        [withBaseName("withAccent")]: !disableAccent && !status,
         [withBaseName(status)]: !!status
       },
       className
@@ -37,7 +38,19 @@ const DialogTitle = ({
       status && /* @__PURE__ */ jsx(StatusIndicator, {
         status
       }),
-      children
+      /* @__PURE__ */ jsxs("div", {
+        children: [
+          subtitle && /* @__PURE__ */ jsx(Text, {
+            as: "label",
+            variant: "secondary",
+            children: subtitle
+          }),
+          /* @__PURE__ */ jsx(H2, {
+            className: clsx(withBaseName("title")),
+            children: title
+          })
+        ]
+      })
     ]
   });
 };