@salt-ds/lab 1.0.0-alpha.24 → 1.0.0-alpha.26

package/css/salt-lab.css

@@ -1252,82 +1252,39 @@
 
 /* src/file-drop-zone/FileDropZone.css */
 .saltFileDropZone {
-  --fileDropZone-background: var(--salt-container-secondary-background);
-  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);
-  --fileDropZone-borderWidth: var(--salt-size-border);
-  --fileDropZone-borderStyle: var(--salt-target-borderStyle);
-  --fileDropZone-text-color: var(--salt-content-primary-foreground);
-  --fileDropZone-icon-color: var(--salt-content-primary-foreground);
-  --fileDropZone-padding: var(--salt-size-container-spacing);
-  --fileDropZone-title-fontSize: var(--salt-text-fontSize);
-  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);
-}
-.saltFileDropZone {
-  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));
+  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
   display: inline-flex;
-  background: var(--saltFileDropZone-background, var(--fileDropZone-background));
+  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));
   text-align: center;
-  align-items: stretch;
+  align-items: center;
   justify-content: center;
-  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));
-  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));
-  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));
+  border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
   flex-direction: column;
-  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));
-}
-.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {
-  pointer-events: none;
-}
-.saltFileDropZone-icon {
-  fill: var(--fileDropZone-icon-color);
-  margin-bottom: var(--salt-size-unit);
-}
-.saltFileDropZone .saltFileDropZone-title:not(:last-child),
-.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {
-  margin-bottom: calc(var(--salt-size-unit) * 2);
-}
-.saltFileDropZone-active:not(.saltFileDropZone-disabled) {
-  --fileDropZone-background: var(--salt-target-background-hover);
+  padding: var(--salt-spacing-200);
+  gap: var(--salt-spacing-200);
+  width: 100%;
+  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));
+  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));
+  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));
 }
-.saltFileDropZone-error .saltFileDropZone-description {
-  margin-bottom: calc(var(--salt-size-unit) * 2);
+.saltFileDropZone-active {
+  background: var(--salt-target-background-hover);
+  border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);
 }
 .saltFileDropZone-error {
-  --fileDropZone-background: var(--salt-status-error-background);
-  --fileDropZone-borderColor: var(--salt-status-error-borderColor);
-  --fileDropZone-icon-color: var(--salt-status-error-foreground);
+  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);
 }
-.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {
-  --fileDropZone-background: var(--salt-target-background-hover);
-  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);
+.saltFileDropZone-success {
+  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);
 }
-.saltFileDropZone-title,
-.saltFileDropZone-description {
-  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));
-  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));
-}
-.saltFileDropZone-title {
-  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));
-}
-.saltFileDropZone-inputButton {
-  display: inline-flex;
-}
-.saltFileDropZone-inputRoot {
-  line-height: 1;
-}
-.saltFileDropZone-inputRoot .input-hidden {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  visibility: hidden;
+.saltFileDropZone .input-hidden {
+  display: none;
 }
 .saltFileDropZone-disabled {
-  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);
+  background: var(--salt-container-primary-background-disabled);
+  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);
   cursor: var(--salt-target-cursor-disabled);
-}
-.saltFileDropZone-disabled .saltFileDropZone-icon,
-.saltFileDropZone-disabled .saltFileDropZone-title {
-  --fileDropZone-text-color: var(--salt-content-primary-foreground-disabled);
-  --fileDropZone-icon-color: var(--salt-content-primary-foreground-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
 }
 
 /* src/form-field-legacy/FormActivationIndicator.css */
@@ -2622,99 +2579,100 @@
   z-index: var(--salt-zIndex-default);
 }
 
-/* src/pagination/Pagination.css */
-.salt-density-medium {
-  --pagination-button-size: 28px;
-  --pagination-fontSize: 12px;
+/* src/pagination/CompactInput.css */
+.saltCompactInput {
+  --saltInput-paddingLeft: 0;
+  --saltInput-paddingRight: 0;
 }
-.salt-density-high {
-  --pagination-button-size: 20px;
-  --pagination-fontSize: 11px;
+.saltCompactInput-defaultSize.saltInput {
+  --saltInput-minWidth: var(--salt-size-base);
+  width: var(--salt-size-base);
 }
-.salt-density-low {
-  --pagination-button-size: 36px;
-  --pagination-fontSize: 14px;
+
+/* src/pagination/CompactPaginator.css */
+.saltCompactPaginator {
+  flex-wrap: nowrap;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  align-items: center;
 }
-.salt-density-touch {
-  --pagination-button-size: 44px;
-  --pagination-fontSize: 16px;
+.saltCompactPaginator-arrowButton {
+  --saltButton-width: var(--salt-size-base);
+  --saltButton-height: var(--salt-size-base);
+  --saltButton-padding: var(--salt-spacing-100);
 }
-.saltPagination {
+
+/* src/pagination/GoToInput.css */
+.saltGoToInput.saltFormField {
   display: flex;
   flex-direction: row;
+  gap: var(--salt-spacing-100);
+  align-items: baseline;
+  text-wrap: nowrap;
 }
-.saltPagination-arrowButton {
-  width: var(--pagination-button-size);
-  height: var(--pagination-button-size);
-}
-.saltPagination-previousButton {
-  margin-right: var(--salt-size-unit);
+.saltGoToInput-input {
+  height: var(--salt-size-base);
+  --saltInput-minWidth: unset;
 }
-.saltPagination-nextButton {
-  margin-left: var(--salt-size-unit);
+.saltGoToInput-inputDefaultSize {
+  --saltInput-minWidth: var(--salt-size-base);
+  max-width: var(--salt-size-base);
+  width: var(--salt-size-base);
 }
-.saltPagination-pageButton {
-  min-width: var(--pagination-button-size);
-  height: var(--pagination-button-size);
+
+/* src/pagination/PageButton.css */
+.saltPageButton {
+  --saltButton-minWidth: var(--salt-size-base);
   --saltButton-fontWeight: var(--salt-text-fontWeight);
+  --saltButton-height: var(--salt-size-base);
+  --saltButton-text-color: var(--salt-content-primary-foreground);
+  --saltButton-background-active: var(--salt-selectable-background-selected);
+  --saltButton-text-color-active: var(--salt-content-primary-foreground);
 }
-.saltPagination-pageButtonSelected {
-  background: var(--salt-selectable-background-selected);
-  color: var(--salt-palette-interact-cta-foreground-active);
-}
-.saltPagination-pageButtonFixed {
-  padding: 0;
+.saltPageButton:hover,
+.saltPageButton:focus-visible {
+  --saltButton-background-hover: var(--salt-selectable-background-hover);
 }
-.saltPagination-ellipsis {
-  width: var(--pagination-button-size);
-  height: var(--pagination-button-size);
-  text-align: center;
+.saltPageButton:disabled {
+  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);
+  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);
 }
-.saltPagination-accessibleText {
-  display: block;
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  opacity: 0;
+.saltPageButton-selected {
+  --saltButton-background: var(--salt-selectable-background-selected);
 }
-.saltPagination-compactInputField {
+.saltPageButton-selected:focus-visible {
+  --saltButton-background-hover: var(--salt-selectable-background-selected);
 }
-.saltPagination-compactInput {
-  height: var(--pagination-button-size);
-  min-width: unset;
+.saltPageButton-fixed {
+  --saltButton-padding: 0;
 }
-.saltPagination-compactInputFixed {
-  min-width: var(--pagination-button-size);
-  width: var(--pagination-button-size);
-}
-.saltPagination-compactSeparator {
-  height: var(--pagination-button-size);
-  width: var(--pagination-button-size);
-  text-align: center;
-  font-size: var(--pagination-fontSize);
-  line-height: var(--pagination-button-size);
-}
-.saltPagination-goToInputWrapper {
-}
-.saltPagination-leftGoToInput {
-  margin-right: var(--salt-size-unit);
+
+/* src/pagination/PageRanges.css */
+.saltPageRanges-ellipsis {
+  display: inline-flex;
+  width: var(--salt-size-base);
+  height: var(--salt-size-base);
+  line-height: var(--salt-size-base);
+  justify-content: center;
 }
-.saltPagination-rightGoToInput {
-  margin-left: var(--salt-size-unit);
-  min-width: unset;
+
+/* src/pagination/Pagination.css */
+.saltPagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.saltPagination-goToInputField {
+
+/* src/pagination/Paginator.css */
+.saltPaginator {
+  display: flex;
+  flex-wrap: nowrap;
 }
-.saltPagination-goToInput {
-  height: var(--pagination-button-size);
-  min-width: unset;
+.saltPaginator-arrowButton-previous {
+  --saltButton-margin: 0 var(--salt-spacing-100) 0 0;
 }
-.saltPagination-goToInputFixed {
-  min-width: var(--pagination-button-size);
-  width: var(--pagination-button-size);
+.saltPaginator-arrowButton-next {
+  --saltButton-margin: 0 0 0 var(--salt-spacing-100);
 }
 
 /* src/parent-child-item/ParentChildItem.css */
@@ -2926,25 +2884,10 @@
 
 /* src/pill-next/PillNext.css */
 .saltPillNext {
-  display: flex;
-  max-width: 100%;
-}
-.saltPillNext-action {
-  --pillNext-background: var(--salt-actionable-primary-background);
-  --pillNext-background-active: var(--salt-actionable-primary-background-active);
-  --pillNext-background-disabled: var(--salt-actionable-primary-background-disabled);
-  --pillNext-background-hover: var(--salt-actionable-primary-background-hover);
-  --pillNext-text-color: var(--salt-actionable-primary-foreground);
-  --pillNext-text-color-active: var(--salt-actionable-primary-foreground-active);
-  --pillNext-text-color-hover: var(--salt-actionable-primary-foreground-hover);
-  --pillNext-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);
-}
-.saltPillNext-action {
   appearance: none;
-  -webkit-appearance: none;
   display: inline-flex;
   align-items: center;
-  background: var(--pillNext-background);
+  background: var(--saltPillNext-background, var(--salt-actionable-primary-background));
   border-radius: 0;
   border: 0;
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
@@ -2954,55 +2897,34 @@
   gap: var(--salt-spacing-50);
   padding-left: var(--salt-spacing-50);
   padding-right: var(--salt-spacing-50);
-  color: var(--pillNext-text-color);
+  color: var(--saltPillNext-color, var(--salt-actionable-primary-foreground));
   font-family: var(--salt-text-fontFamily);
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
-}
-.saltPillNext-label {
-  min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
-.saltPillNext-close-button {
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-  --saltButton-padding: var(--salt-spacing-50);
-}
-.saltPillNext-action .saltIcon {
-  --saltIcon-color: currentColor;
-}
 .saltPillNext-clickable {
   cursor: var(--salt-selectable-cursor-hover);
 }
 .saltPillNext-clickable:hover,
 .saltPillNext-clickable:focus-visible {
-  color: var(--pillNext-text-color-hover);
-  background: var(--pillNext-background-hover);
-}
-.saltPillNext-clickable.saltPillNext-disabled:hover {
-  color: var(--pillNext-text-color);
-  background: var(--pillNext-background);
+  color: var(--salt-actionable-primary-foreground-hover);
+  background: var(--salt-actionable-primary-background-hover);
 }
 .saltPillNext-clickable.saltPillNext-active,
 .saltPillNext-clickable:active {
-  background: var(--pillNext-background-active);
-  color: var(--pillNext-text-color-active);
+  background: var(--salt-actionable-primary-background-active);
+  color: var(--salt-actionable-primary-foreground-active);
 }
-.saltPillNext-clickable.saltPillNext-disabled.saltPillNext-active,
-.saltPillNext-clickable.saltPillNext-disabled:active {
-  background: var(--pillNext-background);
-  color: var(--pillNext-text-color);
-}
-.saltPillNext-action:focus-visible {
+.saltPillNext:focus-visible {
   outline: var(--salt-focused-outline);
-  z-index: var(--salt-zIndex-default);
 }
-.saltPillNext-action.saltPillNext-disabled,
-.saltPillNext-action.saltPillNext-disabled:hover {
-  color: var(--pillNext-text-color-disabled);
-  background: var(--pillNext-background-disabled);
+.saltPillNext:disabled,
+.saltPillNext:disabled:hover {
+  color: var(--salt-actionable-primary-foreground-disabled);
+  background: var(--salt-actionable-primary-background-disabled);
   cursor: var(--salt-selectable-cursor-disabled);
 }
 
@@ -4842,4 +4764,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/54bcdacf-3525-4b80-99dd-6c38ba20e381.css */
+/* src/9bca76ec-eb3b-42a1-96c2-e524fd8f78b1.css */

package/dist-cjs/combo-box-next/ComboBoxNext.js

@@ -149,9 +149,9 @@ const ComboBoxNext = React.forwardRef(function ComboBoxNext2({
       }),
       /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
         open: Boolean(open && !disabled && filteredSource),
-        ref: floating,
         ...getPortalProps(),
         ...getPosition(),
+        ref: floating,
         children: /* @__PURE__ */ jsxRuntime.jsx(ListNext.ListNext, {
           className: clsx.clsx(withBaseName("list"), listClassName),
           disableFocus: true,

package/dist-cjs/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  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport {\n  Input,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n  /**\n   * Additional props for the list component.\n   */\n  ListProps?: ListNextProps;\n  /**\n   * Additional props for the portal.\n   */\n  PortalProps?: UseComboBoxPortalProps;\n  /**\n   * Controlled prop. Controls the Input value in the Combo Box Input.\n   */\n  inputValue?: string;\n  /**\n   * Controlled prop. Controls the Highlighted item in the Combo Box list.\n   */\n  highlightedItem?: string;\n  /**\n   * Controlled prop. Controls the Selected value in the Combo Box list.\n   */\n  selected?: string;\n  /**\n   * Initial input value for when the list is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /**\n   * Initial selected value for when the list is uncontrolled.\n   */\n  defaultSelected?: string;\n  /**\n   * If `true`, the component will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n  /**\n   * The source of combobox items.\n   */\n  source: T[];\n  /**\n   * Optional ref for the list component\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * The component used for item instead of the default.\n   */\n  ListItem?: (\n    props: ComboBoxItemProps<T>\n  ) => ReactElement<ComboBoxItemProps<T>>;\n  /**\n   * Function to be used as filter.\n   */\n  itemFilter?: (source: T[], filterValue?: string) => T[];\n  /**\n   * Callback for mouse over event\n   */\n  onMouseOver?: (event: SyntheticEvent) => void;\n  /**\n   * Callback for list selection event\n   */\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /**\n  /**\n   * Callback for list change event\n   */\n  onListChange?: (\n    event: SyntheticEvent,\n    data: { value: string | undefined }\n  ) => void;\n  /**\n   * Callback for input change event\n   */\n  onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n  {\n    ListProps = {},\n    PortalProps = {},\n    inputValue: inputValueProp,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultInputValue,\n    defaultSelected,\n    disabled,\n    variant = \"primary\",\n    source,\n    listRef: listRefProp,\n    ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n    itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n    onMouseOver,\n    onFocus,\n    onKeyDown,\n    onSelect,\n    onListChange,\n    onChange: onInputChange,\n    ...rest\n  }: ComboBoxNextProps<T>,\n  ref?: ForwardedRef<HTMLInputElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box-next\",\n    css: comboBoxNextCss,\n    window: targetWindow,\n  });\n  const listId = useId(ListProps?.id);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    disabled,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultSelected,\n    onChange: onListChange,\n    onSelect: onSelect,\n    id: listId,\n    ref: listRef,\n  };\n\n  const {\n    inputValue,\n    setInputValue,\n    portalProps,\n    selectedItem,\n    highlightedItem,\n    activeDescendant,\n    focusVisibleRef,\n    keyDownHandler,\n    focusHandler,\n    setSelectedItem,\n    setHighlightedItem,\n    mouseOverHandler,\n    mouseDownHandler,\n    listSelectHandler,\n  } = useComboBox({\n    defaultInputValue,\n    inputValue: inputValueProp,\n    onFocus,\n    onMouseOver,\n    onKeyDown,\n    listProps,\n    PortalProps,\n  });\n\n  const {\n    open,\n    setOpen,\n    floating,\n    reference,\n    getTriggerProps,\n    getPortalProps,\n    getPosition,\n  } = portalProps;\n\n  // floating references\n  const triggerRef = useForkRef(ref, reference);\n  const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const getFilteredSource = () => {\n    if (!source) return null;\n    if (selectedItem && inputValue === selectedItem) return source;\n    return itemFilter?.(source, inputValue);\n  };\n  const filteredSource = getFilteredSource();\n\n  const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setInputValue(value);\n    if (value === \"\") {\n      setHighlightedItem(undefined);\n      setSelectedItem(value);\n    } else {\n      if (!open) {\n        setOpen(true);\n      }\n      if (filteredSource) {\n        setHighlightedItem(filteredSource[0] as unknown as string);\n      }\n    }\n    onInputChange?.(event, { value: value ?? \"\" });\n  };\n\n  const adornment = open ? (\n    <ChevronUpIcon className={withBaseName(\"chevron\")} />\n  ) : (\n    <ChevronDownIcon className={withBaseName(\"chevron\")} />\n  );\n\n  const { className: listClassName, ...restListProps } = ListProps;\n  const { className: inputClassName, ...restInputProps } = rest;\n\n  return (\n    <>\n      <Input\n        aria-controls={listId}\n        aria-activedescendant={disabled ? undefined : activeDescendant}\n        className={clsx(withBaseName(\"input\"), inputClassName)}\n        disabled={disabled}\n        endAdornment={adornment}\n        onChange={onChange}\n        onMouseDown={mouseDownHandler}\n        inputRef={inputRef as Ref<HTMLInputElement>}\n        inputProps={{\n          \"aria-expanded\": open,\n          tabIndex: disabled ? -1 : 0,\n          onFocus: focusHandler,\n          onKeyDown: keyDownHandler,\n        }}\n        role=\"combobox\"\n        variant={variant}\n        value={inputValue}\n        {...getTriggerProps()}\n        {...restInputProps}\n      />\n\n      <FloatingComponent\n        open={Boolean(open && !disabled && filteredSource)}\n        ref={floating}\n        {...getPortalProps()}\n        {...getPosition()}\n      >\n        <ListNext\n          className={clsx(withBaseName(\"list\"), listClassName)}\n          disableFocus\n          highlightedItem={highlightedItem}\n          onMouseOver={mouseOverHandler}\n          onSelect={listSelectHandler}\n          selected={selectedItem}\n          {...restListProps}\n          ref={setListRef}\n        >\n          {filteredSource?.map((value, index) => {\n            const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n              setSelectedItem(event.currentTarget?.dataset.value);\n              setInputValue(event.currentTarget?.dataset.value);\n            };\n            return (\n              ListItem && (\n                <ListItem\n                  key={index}\n                  value={value}\n                  matchPattern={inputValue}\n                  onMouseDown={onMouseDown}\n                />\n              )\n            );\n          })}\n        </ListNext>\n      </FloatingComponent>\n    </>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ComboBoxNext","DefaultListItem","defaultFilter","useWindow","useComponentCssInjection","comboBoxNextCss","useId","useRef","useForkRef","useComboBox","useFloatingComponent","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","Fragment","Input","clsx","ListNext"],"mappings":"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"}
+{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport {\n  Input,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" | \"onSelect\"> {\n  /**\n   * Additional props for the list component.\n   */\n  ListProps?: ListNextProps;\n  /**\n   * Additional props for the portal.\n   */\n  PortalProps?: UseComboBoxPortalProps;\n  /**\n   * Controlled prop. Controls the Input value in the Combo Box Input.\n   */\n  inputValue?: string;\n  /**\n   * Controlled prop. Controls the Highlighted item in the Combo Box list.\n   */\n  highlightedItem?: string;\n  /**\n   * Controlled prop. Controls the Selected value in the Combo Box list.\n   */\n  selected?: string;\n  /**\n   * Initial input value for when the list is uncontrolled.\n   */\n  defaultInputValue?: string;\n  /**\n   * Initial selected value for when the list is uncontrolled.\n   */\n  defaultSelected?: string;\n  /**\n   * If `true`, the component will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n  /**\n   * The source of combobox items.\n   */\n  source: T[];\n  /**\n   * Optional ref for the list component\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * The component used for item instead of the default.\n   */\n  ListItem?: (\n    props: ComboBoxItemProps<T>\n  ) => ReactElement<ComboBoxItemProps<T>>;\n  /**\n   * Function to be used as filter.\n   */\n  itemFilter?: (source: T[], filterValue?: string) => T[];\n  /**\n   * Callback for mouse over event\n   */\n  onMouseOver?: (event: SyntheticEvent) => void;\n  /**\n   * Callback for list selection event\n   */\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /**\n  /**\n   * Callback for list change event\n   */\n  onListChange?: (\n    event: SyntheticEvent,\n    data: { value: string | undefined }\n  ) => void;\n  /**\n   * Callback for input change event\n   */\n  onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n  {\n    ListProps = {},\n    PortalProps = {},\n    inputValue: inputValueProp,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultInputValue,\n    defaultSelected,\n    disabled,\n    variant = \"primary\",\n    source,\n    listRef: listRefProp,\n    ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n    itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n    onMouseOver,\n    onFocus,\n    onKeyDown,\n    onSelect,\n    onListChange,\n    onChange: onInputChange,\n    ...rest\n  }: ComboBoxNextProps<T>,\n  ref?: ForwardedRef<HTMLInputElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box-next\",\n    css: comboBoxNextCss,\n    window: targetWindow,\n  });\n  const listId = useId(ListProps?.id);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    disabled,\n    highlightedItem: highlightedItemProp,\n    selected: selectedProp,\n    defaultSelected,\n    onChange: onListChange,\n    onSelect: onSelect,\n    id: listId,\n    ref: listRef,\n  };\n\n  const {\n    inputValue,\n    setInputValue,\n    portalProps,\n    selectedItem,\n    highlightedItem,\n    activeDescendant,\n    focusVisibleRef,\n    keyDownHandler,\n    focusHandler,\n    setSelectedItem,\n    setHighlightedItem,\n    mouseOverHandler,\n    mouseDownHandler,\n    listSelectHandler,\n  } = useComboBox({\n    defaultInputValue,\n    inputValue: inputValueProp,\n    onFocus,\n    onMouseOver,\n    onKeyDown,\n    listProps,\n    PortalProps,\n  });\n\n  const {\n    open,\n    setOpen,\n    floating,\n    reference,\n    getTriggerProps,\n    getPortalProps,\n    getPosition,\n  } = portalProps;\n\n  // floating references\n  const triggerRef = useForkRef(ref, reference);\n  const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const getFilteredSource = () => {\n    if (!source) return null;\n    if (selectedItem && inputValue === selectedItem) return source;\n    return itemFilter?.(source, inputValue);\n  };\n  const filteredSource = getFilteredSource();\n\n  const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setInputValue(value);\n    if (value === \"\") {\n      setHighlightedItem(undefined);\n      setSelectedItem(value);\n    } else {\n      if (!open) {\n        setOpen(true);\n      }\n      if (filteredSource) {\n        setHighlightedItem(filteredSource[0] as unknown as string);\n      }\n    }\n    onInputChange?.(event, { value: value ?? \"\" });\n  };\n\n  const adornment = open ? (\n    <ChevronUpIcon className={withBaseName(\"chevron\")} />\n  ) : (\n    <ChevronDownIcon className={withBaseName(\"chevron\")} />\n  );\n\n  const { className: listClassName, ...restListProps } = ListProps;\n  const { className: inputClassName, ...restInputProps } = rest;\n\n  return (\n    <>\n      <Input\n        aria-controls={listId}\n        aria-activedescendant={disabled ? undefined : activeDescendant}\n        className={clsx(withBaseName(\"input\"), inputClassName)}\n        disabled={disabled}\n        endAdornment={adornment}\n        onChange={onChange}\n        onMouseDown={mouseDownHandler}\n        inputRef={inputRef as Ref<HTMLInputElement>}\n        inputProps={{\n          \"aria-expanded\": open,\n          tabIndex: disabled ? -1 : 0,\n          onFocus: focusHandler,\n          onKeyDown: keyDownHandler,\n        }}\n        role=\"combobox\"\n        variant={variant}\n        value={inputValue}\n        {...getTriggerProps()}\n        {...restInputProps}\n      />\n\n      <FloatingComponent\n        open={Boolean(open && !disabled && filteredSource)}\n        {...getPortalProps()}\n        {...getPosition()}\n        ref={floating}\n      >\n        <ListNext\n          className={clsx(withBaseName(\"list\"), listClassName)}\n          disableFocus\n          highlightedItem={highlightedItem}\n          onMouseOver={mouseOverHandler}\n          onSelect={listSelectHandler}\n          selected={selectedItem}\n          {...restListProps}\n          ref={setListRef}\n        >\n          {filteredSource?.map((value, index) => {\n            const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n              setSelectedItem(event.currentTarget?.dataset.value);\n              setInputValue(event.currentTarget?.dataset.value);\n            };\n            return (\n              ListItem && (\n                <ListItem\n                  key={index}\n                  value={value}\n                  matchPattern={inputValue}\n                  onMouseDown={onMouseDown}\n                />\n              )\n            );\n          })}\n        </ListNext>\n      </FloatingComponent>\n    </>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ComboBoxNext","DefaultListItem","defaultFilter","useWindow","useComponentCssInjection","comboBoxNextCss","useId","useRef","useForkRef","useComboBox","useFloatingComponent","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","Fragment","Input","clsx","ListNext"],"mappings":"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"}

package/dist-cjs/dropdown-next/DropdownNext.js

@@ -80,7 +80,6 @@ const DropdownNext = React.forwardRef(function DropdownNext2(props, ref) {
     listSelectHandler
   } = handlers;
   const triggerRef = core.useForkRef(ref, reference);
-  const portalRef = core.useForkRef(ref, floating);
   const getIcon = () => {
     if (readOnly)
       return;
@@ -162,9 +161,9 @@ const DropdownNext = React.forwardRef(function DropdownNext2(props, ref) {
       }),
       /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
         open: open && !disabled,
-        ref: portalRef,
         ...getDropdownNextProps(),
         ...getPosition(),
+        ref: floating,
         children: /* @__PURE__ */ jsxRuntime.jsx(ListNext.ListNext, {
           "data-test-id": "list-container",
           id: listId,

package/dist-cjs/dropdown-next/DropdownNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport {\n  makePrefixer,\n  useId,\n  useForkRef,\n  useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  useRef,\n  forwardRef,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  Ref,\n  ForwardedRef,\n  SyntheticEvent,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport dropdownNextCss from \"./DropdownNext.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Placement } from \"@floating-ui/react\";\nimport { useDropdownNext } from \"./useDropdownNext\";\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport interface DropdownNextProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"onSelect\"> {\n  /**\n   * If `true`, dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Initially selected value for the dropdown, for use only in uncontrolled component.\n   */\n  defaultSelected?: string;\n  /**\n   * List of options when using a dropdown.\n   */\n  source: string[];\n  /**\n   * If `true`, dropdown is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Background styling variant. Defaults to `primary` .\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Placement of dropdown list. Defaults to `bottom` .\n   */\n  placement?: Placement;\n  /**\n   * Optional ref for the list component.\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * Additional props for dropdown list.\n   */\n  ListProps?: ListNextProps;\n  /* Status open or close for use in controlled component.  */\n  open?: boolean;\n  /**\n   * Callback for list selection event\n   */\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /**\n  /* Selected prop for use in controlled component. */\n  selected?: string;\n  /* Highlighted item prop for use in controlled component. */\n  highlightedItem?: string;\n}\n\nexport const DropdownNext = forwardRef(function DropdownNext(\n  props: DropdownNextProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const {\n    className,\n    disabled,\n    variant = \"primary\",\n    id: dropdownIdProp,\n    defaultSelected,\n    readOnly,\n    source,\n    placement = \"bottom\",\n    open: openControlProp,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n    onFocus,\n    onKeyDown,\n    onMouseOver,\n    onMouseDown,\n    onSelect,\n    listRef: listRefProp,\n    ListProps,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-next\",\n    css: dropdownNextCss,\n    window: targetWindow,\n  });\n\n  const listId = useId(ListProps?.id);\n  const dropdownId = useId(dropdownIdProp);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    defaultSelected,\n    disabled,\n    ref: listRef,\n    id: listId,\n    onSelect: onSelect,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n  };\n\n  const {\n    handlers,\n    activeDescendant,\n    selectedItem,\n    highlightedItem,\n    getListItems,\n    portalProps,\n    getReferenceProps,\n    refs,\n  } = useDropdownNext({\n    listProps,\n    placement,\n    openControlProp,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const { open, floating, reference, getDropdownNextProps, getPosition } =\n    portalProps;\n  const {\n    focusHandler,\n    keyDownHandler,\n    mouseOverHandler,\n    mouseDownHandler,\n    listSelectHandler,\n  } = handlers;\n\n  const triggerRef = useForkRef<HTMLButtonElement>(ref, reference);\n  const portalRef = useForkRef<HTMLButtonElement>(ref, floating);\n\n  const getIcon = () => {\n    if (readOnly) return;\n\n    const iconClassName = clsx(withBaseName(\"icon\"), {\n      [withBaseName(\"disabled\")]: disabled,\n    });\n\n    return open ? (\n      <ChevronUpIcon className={iconClassName} />\n    ) : (\n      <ChevronDownIcon className={iconClassName} />\n    );\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    focusHandler(event);\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    keyDownHandler(event);\n    onKeyDown?.(event);\n  };\n\n  const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {\n    mouseOverHandler();\n    onMouseOver?.(event);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    mouseDownHandler();\n    onMouseDown?.(event);\n  };\n\n  const handleListSelect = () => {\n    listSelectHandler();\n    (refs.domReference.current as HTMLButtonElement)?.focus();\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <button\n        id={dropdownId}\n        disabled={disabled}\n        {...getReferenceProps({\n          onFocus: handleFocus,\n          onMouseOver: handleMouseOver,\n          onMouseDown: handleMouseDown,\n          onKeyDown: handleKeyDown,\n        })}\n        value={selectedItem}\n        className={clsx(\n          withBaseName(\"button\"),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n          },\n          className\n        )}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-activedescendant={activeDescendant}\n        tabIndex={disabled ? -1 : 0}\n        aria-owns={listId}\n        aria-controls={listId}\n        aria-disabled={disabled}\n        {...restProps}\n        ref={triggerRef}\n      >\n        <span className={clsx(withBaseName(\"buttonText\"))}>{selectedItem}</span>\n        {getIcon()}\n      </button>\n      <FloatingComponent\n        open={open && !disabled}\n        ref={portalRef}\n        {...getDropdownNextProps()}\n        {...getPosition()}\n      >\n        <ListNext\n          data-test-id={\"list-container\"}\n          id={listId}\n          className={clsx(withBaseName(\"list\"), ListProps?.className)}\n          disableFocus\n          disabled={disabled || ListProps?.disabled}\n          selected={selectedItem}\n          highlightedItem={highlightedItem}\n          {...ListProps}\n          ref={setListRef}\n          onSelect={handleListSelect}\n        >\n          {getListItems(source)}\n        </ListNext>\n      </FloatingComponent>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownNextCss","useId","useRef","useForkRef","useDropdownNext","useFloatingComponent","clsx","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","ListNext"],"mappings":"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"}
+{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport {\n  makePrefixer,\n  useId,\n  useForkRef,\n  useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  useRef,\n  forwardRef,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  Ref,\n  ForwardedRef,\n  SyntheticEvent,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport dropdownNextCss from \"./DropdownNext.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Placement } from \"@floating-ui/react\";\nimport { useDropdownNext } from \"./useDropdownNext\";\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport interface DropdownNextProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"onSelect\"> {\n  /**\n   * If `true`, dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Initially selected value for the dropdown, for use only in uncontrolled component.\n   */\n  defaultSelected?: string;\n  /**\n   * List of options when using a dropdown.\n   */\n  source: string[];\n  /**\n   * If `true`, dropdown is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Background styling variant. Defaults to `primary` .\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Placement of dropdown list. Defaults to `bottom` .\n   */\n  placement?: Placement;\n  /**\n   * Optional ref for the list component.\n   */\n  listRef?: Ref<HTMLUListElement>;\n  /**\n   * Additional props for dropdown list.\n   */\n  ListProps?: ListNextProps;\n  /* Status open or close for use in controlled component.  */\n  open?: boolean;\n  /**\n   * Callback for list selection event\n   */\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /**\n  /* Selected prop for use in controlled component. */\n  selected?: string;\n  /* Highlighted item prop for use in controlled component. */\n  highlightedItem?: string;\n}\n\nexport const DropdownNext = forwardRef(function DropdownNext(\n  props: DropdownNextProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const {\n    className,\n    disabled,\n    variant = \"primary\",\n    id: dropdownIdProp,\n    defaultSelected,\n    readOnly,\n    source,\n    placement = \"bottom\",\n    open: openControlProp,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n    onFocus,\n    onKeyDown,\n    onMouseOver,\n    onMouseDown,\n    onSelect,\n    listRef: listRefProp,\n    ListProps,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-next\",\n    css: dropdownNextCss,\n    window: targetWindow,\n  });\n\n  const listId = useId(ListProps?.id);\n  const dropdownId = useId(dropdownIdProp);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const setListRef = useForkRef(listRefProp, listRef);\n  const listProps = {\n    defaultSelected,\n    disabled,\n    ref: listRef,\n    id: listId,\n    onSelect: onSelect,\n    selected: selectedControlProp,\n    highlightedItem: highlightedItemControlProp,\n  };\n\n  const {\n    handlers,\n    activeDescendant,\n    selectedItem,\n    highlightedItem,\n    getListItems,\n    portalProps,\n    getReferenceProps,\n    refs,\n  } = useDropdownNext({\n    listProps,\n    placement,\n    openControlProp,\n  });\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const { open, floating, reference, getDropdownNextProps, getPosition } =\n    portalProps;\n  const {\n    focusHandler,\n    keyDownHandler,\n    mouseOverHandler,\n    mouseDownHandler,\n    listSelectHandler,\n  } = handlers;\n\n  const triggerRef = useForkRef<HTMLButtonElement>(ref, reference);\n\n  const getIcon = () => {\n    if (readOnly) return;\n\n    const iconClassName = clsx(withBaseName(\"icon\"), {\n      [withBaseName(\"disabled\")]: disabled,\n    });\n\n    return open ? (\n      <ChevronUpIcon className={iconClassName} />\n    ) : (\n      <ChevronDownIcon className={iconClassName} />\n    );\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    focusHandler(event);\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    keyDownHandler(event);\n    onKeyDown?.(event);\n  };\n\n  const handleMouseOver = (event: MouseEvent<HTMLButtonElement>) => {\n    mouseOverHandler();\n    onMouseOver?.(event);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n    if (disabled || readOnly) return;\n    mouseDownHandler();\n    onMouseDown?.(event);\n  };\n\n  const handleListSelect = () => {\n    listSelectHandler();\n    (refs.domReference.current as HTMLButtonElement)?.focus();\n  };\n\n  return (\n    <div className={clsx(withBaseName())}>\n      <button\n        id={dropdownId}\n        disabled={disabled}\n        {...getReferenceProps({\n          onFocus: handleFocus,\n          onMouseOver: handleMouseOver,\n          onMouseDown: handleMouseDown,\n          onKeyDown: handleKeyDown,\n        })}\n        value={selectedItem}\n        className={clsx(\n          withBaseName(\"button\"),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n          },\n          className\n        )}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-activedescendant={activeDescendant}\n        tabIndex={disabled ? -1 : 0}\n        aria-owns={listId}\n        aria-controls={listId}\n        aria-disabled={disabled}\n        {...restProps}\n        ref={triggerRef}\n      >\n        <span className={clsx(withBaseName(\"buttonText\"))}>{selectedItem}</span>\n        {getIcon()}\n      </button>\n      <FloatingComponent\n        open={open && !disabled}\n        {...getDropdownNextProps()}\n        {...getPosition()}\n        ref={floating}\n      >\n        <ListNext\n          data-test-id={\"list-container\"}\n          id={listId}\n          className={clsx(withBaseName(\"list\"), ListProps?.className)}\n          disableFocus\n          disabled={disabled || ListProps?.disabled}\n          selected={selectedItem}\n          highlightedItem={highlightedItem}\n          {...ListProps}\n          ref={setListRef}\n          onSelect={handleListSelect}\n        >\n          {getListItems(source)}\n        </ListNext>\n      </FloatingComponent>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownNextCss","useId","useRef","useForkRef","useDropdownNext","useFloatingComponent","clsx","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","ListNext"],"mappings":"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"}

package/dist-cjs/file-drop-zone/FileDropZone.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-content-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-content-primary-foreground);\n  --fileDropZone-padding: var(--salt-size-container-spacing);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-content-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-content-primary-foreground-disabled);\n}\n";
+var css_248z = ".saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n  flex-direction: column;\n  padding: var(--salt-spacing-200);\n  gap: var(--salt-spacing-200);\n  width: 100%;\n  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n  background: var(--salt-target-background-hover);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n  display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-target-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FileDropZone.css.js.map