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

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

@@ -0,0 +1,51 @@
+import { useListControl } from '../list-control/ListControlState.js';
+
+function useComboBoxNext(props) {
+  const {
+    open,
+    defaultOpen,
+    onOpenChange,
+    multiselect,
+    defaultSelected,
+    selected,
+    onSelectionChange,
+    defaultValue,
+    value
+  } = props;
+  const listControl = useListControl({
+    open,
+    defaultOpen,
+    onOpenChange,
+    multiselect,
+    defaultSelected,
+    selected,
+    onSelectionChange,
+    defaultValue,
+    value
+  });
+  const { selectedState, getOptionsMatching, setValueState, setSelectedState } = listControl;
+  const select = (event, option) => {
+    const { disabled, value: value2 } = option;
+    if (disabled) {
+      return;
+    }
+    let newSelected = [value2];
+    if (multiselect) {
+      if (selectedState.includes(value2)) {
+        newSelected = selectedState.filter((item) => item !== value2);
+      } else {
+        newSelected = selectedState.concat([value2]);
+      }
+    }
+    setSelectedState(newSelected);
+    const newValue = getOptionsMatching(
+      (option2) => newSelected.includes(option2.value)
+    ).map((option2) => option2.text);
+    setValueState(multiselect ? "" : newValue[0]);
+    onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+  };
+  return { ...listControl, select };
+}
+
+export { useComboBoxNext };
+//# sourceMappingURL=useComboBoxNext.js.map

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

@@ -0,0 +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;;;;"}

package/dist-es/dropdown/DropdownBase.js

@@ -144,7 +144,7 @@ const DropdownBase = forwardRef(
               top: y != null ? y : 0,
               left: x != null ? x : 0,
               position: strategy,
-              maxHeight: maxPopupHeight != null ? maxPopupHeight : void 0
+              maxHeight: maxPopupHeight
             },
             ref: handleFloatingRef,
             children: getPopupComponent()

package/dist-es/dropdown/DropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\nimport { Portal } from \"../portal\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dropdown\",\n      css: dropdownCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = clsx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = usePortalWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      }\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: clsx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={clsx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? 0,\n                left: x ?? 0,\n                position: strategy,\n                maxHeight: maxPopupHeight ?? undefined,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["dropdownCss","useId","usePortalWindow","id","width","className"],"mappings":"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"}
+{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\nimport { Portal } from \"../portal\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dropdown\",\n      css: dropdownCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = clsx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = usePortalWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      }\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: clsx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={clsx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? 0,\n                left: x ?? 0,\n                position: strategy,\n                maxHeight: maxPopupHeight,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["dropdownCss","useId","usePortalWindow","id","width","className"],"mappings":"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"}

package/dist-es/dropdown-next/DropdownNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDropdownNext-button {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n  color: var(--saltDropdownNext-color, var(--salt-content-primary-foreground));\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDropdownNext-height, var(--salt-size-base));\n  line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltDropdownNext-minWidth, 160px);\n  padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  border: none;\n  border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n  justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n  --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: var(--salt-spacing-100);\n  user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n  z-index: calc(var(--salt-zIndex-modal) + 1);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-selectable-cursor-disabled);\n  background: var(--dropdownNext-background-disabled);\n  color: var(--saltDropdownNext-color-disabled, var(--salt-content-primary-foreground-disabled));\n  outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-editable-cursor-readonly);\n  background: var(--dropdownNext-background-readonly);\n  /* no padding-right when there's no dropdown button icon */\n  padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n  --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n  --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
+var css_248z = ".saltDropdownNext {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-color: var(--salt-content-primary-foreground);\n  --dropdownNext-cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdownNext-background);\n  cursor: var(--dropdownNext-cursor);\n  min-height: var(--salt-size-base);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdownNext-borderColor);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  gap: var(--salt-spacing-100);\n  color: var(--dropdownNext-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltDropdownNext:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext:focus-visible {\n  outline: var(--salt-focused-outline);\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdownNext-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n}\n\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n}\n\n.saltDropdownNext:disabled {\n  --dropdownNext-background: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-color: var(--salt-content-primary-foreground-disabled);\n  --dropdownNext-cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltDropdownNext[aria-readonly=\"true\"] {\n  --dropdownNext-background: var(--salt-editable-primary-background-readonly);\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-color: var(--salt-content-primary-foreground);\n  --dropdownNext-cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltDropdownNext-error {\n  --dropdownNext-background: var(--salt-status-error-background);\n  --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-error .saltDropdownNext:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n  --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-warning {\n  --dropdownNext-background: var(--salt-status-warning-background);\n  --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-warning .saltDropdownNext:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n  --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-success {\n  --dropdownNext-background: var(--salt-status-success-background);\n  --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdownNext-success .saltDropdownNext:focus-visible {\n  outline-color: var(--salt-status-success-borderColor);\n  --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DropdownNext.css.js.map

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

@@ -1,182 +1,346 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
-import { ListNext } from '../list-next/ListNext.js';
-import '../list-next/ListItemNext.js';
-import { makePrefixer, useId, useForkRef, useFloatingComponent } from '@salt-ds/core';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useListControl } from '../list-control/ListControlState.js';
 import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
-import { forwardRef, useRef } from 'react';
+import { makePrefixer, useFormFieldProps, useFloatingComponent, useFloatingUI, useForkRef, useId, StatusAdornment } from '@salt-ds/core';
+import { size, flip } from '@floating-ui/react';
+import { clsx } from 'clsx';
 import { useWindow } from '@salt-ds/window';
-import css_248z from './DropdownNext.css.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
-import { useDropdownNext } from './useDropdownNext.js';
+import css_248z from './DropdownNext.css.js';
+import { ListControlContext } from '../list-control/ListControlContext.js';
+import { OptionList } from '../option/OptionList.js';
 
-const withBaseName = makePrefixer("saltDropdownNext");
-const DropdownNext = forwardRef(function DropdownNext2(props, ref) {
-  const {
-    className,
-    disabled,
-    variant = "primary",
-    id: dropdownIdProp,
-    defaultSelected,
-    readOnly,
-    source,
-    placement = "bottom",
-    open: openControlProp,
-    selected: selectedControlProp,
-    highlightedItem: highlightedItemControlProp,
-    onFocus,
-    onKeyDown,
-    onMouseOver,
-    onMouseDown,
-    onSelect,
-    listRef: listRefProp,
-    ListProps,
-    ...restProps
-  } = props;
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-dropdown-next",
-    css: css_248z,
-    window: targetWindow
-  });
-  const listId = useId(ListProps == null ? void 0 : ListProps.id);
-  const dropdownId = useId(dropdownIdProp);
-  const listRef = useRef(null);
-  const setListRef = useForkRef(listRefProp, listRef);
-  const listProps = {
-    defaultSelected,
-    disabled,
-    ref: listRef,
-    id: listId,
-    onSelect,
-    selected: selectedControlProp,
-    highlightedItem: highlightedItemControlProp
-  };
-  const {
-    handlers,
-    activeDescendant,
-    selectedItem,
-    highlightedItem,
-    getListItems,
-    portalProps,
-    getReferenceProps,
-    refs
-  } = useDropdownNext({
-    listProps,
-    placement,
-    openControlProp
+function ExpandIcon({ open }) {
+  return open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+    "aria-hidden": true
+  }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+    "aria-hidden": true
   });
-  const { Component: FloatingComponent } = useFloatingComponent();
-  const { open, floating, reference, getDropdownNextProps, getPosition } = portalProps;
-  const {
-    focusHandler,
-    keyDownHandler,
-    mouseOverHandler,
-    mouseDownHandler,
-    listSelectHandler
-  } = handlers;
-  const triggerRef = useForkRef(ref, reference);
-  const getIcon = () => {
-    if (readOnly)
-      return;
-    const iconClassName = clsx(withBaseName("icon"), {
-      [withBaseName("disabled")]: disabled
+}
+const withBaseName = makePrefixer("saltDropdownNext");
+const DropdownNext = forwardRef(
+  function DropdownNext2(props, ref) {
+    var _a, _b;
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      children,
+      className,
+      disabled: disabledProp,
+      emptyReadOnlyMarker = "\u2014",
+      readOnly: readOnlyProp,
+      multiselect,
+      onSelectionChange,
+      selected,
+      defaultSelected,
+      defaultOpen,
+      defaultValue: defaultValueProp,
+      value,
+      onOpenChange,
+      open,
+      placeholder,
+      startAdornment,
+      required: requiredProp,
+      variant = "primary",
+      validationStatus: validationStatusProp,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-DropdownNext",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      a11yProps: {
+        "aria-describedby": formFieldDescribedBy,
+        "aria-labelledby": formFieldLabelledBy
+      } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      necessity: formFieldRequired,
+      validationStatus: formFieldValidationStatus
+    } = useFormFieldProps();
+    const disabled = Boolean(disabledProp) || formFieldDisabled;
+    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
+    const validationStatus = validationStatusProp != null ? validationStatusProp : formFieldValidationStatus;
+    const required = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : requiredProp;
+    const isEmptyReadOnly = readOnly && !defaultValueProp && !value;
+    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+    const listControl = useListControl({
+      open,
+      defaultOpen,
+      onOpenChange,
+      multiselect,
+      defaultSelected,
+      selected,
+      onSelectionChange,
+      defaultValue,
+      value
     });
-    return open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
-      className: iconClassName
-    }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
-      className: iconClassName
+    const {
+      activeState,
+      setActive,
+      openState,
+      setOpen,
+      openKey,
+      getOptionAtIndex,
+      getIndexOfOption,
+      getOptionsMatching,
+      getOptionFromSearch,
+      options,
+      selectedState,
+      select,
+      valueState,
+      setFocusVisibleState,
+      focusedState,
+      setFocusedState,
+      listRef
+    } = listControl;
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const { x, y, strategy, elements, floating, reference } = useFloatingUI({
+      open,
+      placement: "bottom-start",
+      middleware: [
+        size({
+          apply({ rects, elements: elements2, availableHeight }) {
+            Object.assign(elements2.floating.style, {
+              minWidth: `${rects.reference.width}px`,
+              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
+            });
+          }
+        }),
+        flip({ fallbackStrategy: "initialPlacement" })
+      ]
     });
-  };
-  const handleFocus = (event) => {
-    if (disabled)
-      return;
-    focusHandler(event);
-    onFocus == null ? void 0 : onFocus(event);
-  };
-  const handleKeyDown = (event) => {
-    if (disabled || readOnly)
-      return;
-    keyDownHandler(event);
-    onKeyDown == null ? void 0 : onKeyDown(event);
-  };
-  const handleMouseOver = (event) => {
-    mouseOverHandler();
-    onMouseOver == null ? void 0 : onMouseOver(event);
-  };
-  const handleMouseDown = (event) => {
-    if (disabled || readOnly)
-      return;
-    mouseDownHandler();
-    onMouseDown == null ? void 0 : onMouseDown(event);
-  };
-  const handleListSelect = () => {
-    var _a;
-    listSelectHandler();
-    (_a = refs.domReference.current) == null ? void 0 : _a.focus();
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(withBaseName()),
-    children: [
-      /* @__PURE__ */ jsxs("button", {
-        id: dropdownId,
-        disabled,
-        ...getReferenceProps({
+    const buttonRef = useRef(null);
+    const handleTriggerRef = useForkRef(
+      reference,
+      buttonRef
+    );
+    const handleButtonRef = useForkRef(handleTriggerRef, ref);
+    const handleClick = (event) => {
+      if (!readOnly) {
+        setFocusVisibleState(false);
+        setOpen(event, !openState);
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    const typeaheadString = useRef("");
+    const typeaheadTimeout = useRef();
+    const handleTypeahead = (event) => {
+      if (typeaheadTimeout.current) {
+        clearTimeout(typeaheadTimeout.current);
+      }
+      typeaheadString.current += event.key;
+      typeaheadTimeout.current = window.setTimeout(() => {
+        typeaheadString.current = "";
+      }, 500);
+      if (!openState) {
+        setOpen(event, true);
+      }
+      let newOption = getOptionFromSearch(typeaheadString.current, activeState);
+      if (!newOption) {
+        newOption = getOptionFromSearch(typeaheadString.current);
+      }
+      if (newOption) {
+        setActive(newOption);
+        setFocusVisibleState(true);
+      }
+    };
+    const handleKeyDown = (event) => {
+      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
+      const count = options.length - 1;
+      if (readOnly) {
+        return;
+      }
+      if (!openState) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          setOpen(event, true);
+          return;
+        }
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleTypeahead(event);
+      }
+      let newActive;
+      switch (event.key) {
+        case "ArrowDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
+          break;
+        case "ArrowUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
+          break;
+        case "Home":
+          newActive = getOptionAtIndex(0);
+          break;
+        case "End":
+          newActive = getOptionAtIndex(count);
+          break;
+        case "PageUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
+          break;
+        case "PageDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
+          break;
+        case "Enter":
+        case " ":
+          if (openState && Boolean(activeState == null ? void 0 : activeState.disabled) || typeaheadString.current.trim().length > 0 && event.key === " ") {
+            event.preventDefault();
+            return;
+          }
+          if (!openState || !activeState) {
+            return;
+          }
+          event.preventDefault();
+          select(event, activeState);
+          if (!multiselect) {
+            setOpen(event, false);
+          }
+          break;
+        case "Escape":
+          setOpen(event, false);
+          break;
+        case "Tab":
+          if (!multiselect && activeState) {
+            select(event, activeState);
+          }
+          break;
+      }
+      if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
+        event.preventDefault();
+        setActive(newActive);
+        setFocusVisibleState(true);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleFocus = (event) => {
+      setFocusedState(true);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const ignoreBlur = useRef(false);
+    const handleBlur = (event) => {
+      if (!ignoreBlur.current) {
+        setOpen(event, false);
+      }
+      ignoreBlur.current = false;
+      setFocusedState(false);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleListMouseOver = () => {
+      setFocusVisibleState(false);
+    };
+    const handleListMouseDown = () => {
+      ignoreBlur.current = true;
+    };
+    const handleListFocus = () => {
+      var _a2;
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+    };
+    const handleListClick = () => {
+      var _a2;
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+    };
+    useEffect(() => {
+      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
+      if (openState && activeIndex < 0) {
+        if (openKey.current.key === "ArrowDown") {
+          setActive(getOptionAtIndex(0));
+        } else if (openKey.current.key === "ArrowUp") {
+          setActive(getOptionAtIndex(options.length - 1));
+        } else {
+          if (selectedState.length > 0) {
+            const selected2 = getOptionsMatching(
+              (option) => option.value === selectedState[0]
+            ).pop();
+            if (selected2) {
+              setActive(selected2);
+            }
+          } else {
+            setActive(getOptionAtIndex(0));
+          }
+        }
+      } else if (!openState) {
+        setActive(void 0);
+      }
+    }, [openState, children]);
+    const listId = useId();
+    return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
+      value: listControl,
+      children: [
+        /* @__PURE__ */ jsxs("button", {
+          className: clsx(
+            withBaseName(),
+            withBaseName(variant),
+            {
+              [withBaseName("disabled")]: disabled,
+              [withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus
+            },
+            className
+          ),
+          ref: handleButtonRef,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
           onFocus: handleFocus,
-          onMouseOver: handleMouseOver,
-          onMouseDown: handleMouseDown,
-          onKeyDown: handleKeyDown
+          onBlur: handleBlur,
+          role: "combobox",
+          type: "button",
+          disabled,
+          "aria-readonly": readOnly ? "true" : void 0,
+          "aria-required": required ? "true" : void 0,
+          "aria-expanded": openState,
+          "aria-activedescendant": activeState == null ? void 0 : activeState.id,
+          "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+          "aria-describedby": clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
+          "aria-multiselectable": multiselect,
+          "aria-controls": openState ? listId : void 0,
+          ...rest,
+          children: [
+            startAdornment,
+            /* @__PURE__ */ jsx("span", {
+              className: clsx(withBaseName("content"), {
+                [withBaseName("placeholder")]: !valueState
+              }),
+              children: valueState != null ? valueState : placeholder
+            }),
+            validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
+              status: validationStatus
+            }),
+            !readOnly && /* @__PURE__ */ jsx(ExpandIcon, {
+              open: openState
+            })
+          ]
         }),
-        value: selectedItem,
-        className: clsx(
-          withBaseName("button"),
-          withBaseName(variant),
-          {
-            [withBaseName("disabled")]: disabled,
-            [withBaseName("readOnly")]: readOnly
-          },
-          className
-        ),
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-activedescendant": activeDescendant,
-        tabIndex: disabled ? -1 : 0,
-        "aria-owns": listId,
-        "aria-controls": listId,
-        "aria-disabled": disabled,
-        ...restProps,
-        ref: triggerRef,
-        children: [
-          /* @__PURE__ */ jsx("span", {
-            className: clsx(withBaseName("buttonText")),
-            children: selectedItem
-          }),
-          getIcon()
-        ]
-      }),
-      /* @__PURE__ */ jsx(FloatingComponent, {
-        open: open && !disabled,
-        ...getDropdownNextProps(),
-        ...getPosition(),
-        ref: floating,
-        children: /* @__PURE__ */ jsx(ListNext, {
-          "data-test-id": "list-container",
-          id: listId,
-          className: clsx(withBaseName("list"), ListProps == null ? void 0 : ListProps.className),
-          disableFocus: true,
-          disabled: disabled || (ListProps == null ? void 0 : ListProps.disabled),
-          selected: selectedItem,
-          highlightedItem,
-          ...ListProps,
-          ref: setListRef,
-          onSelect: handleListSelect,
-          children: getListItems(source)
+        /* @__PURE__ */ jsx(FloatingComponent, {
+          open: (openState || focusedState) && !readOnly,
+          left: x != null ? x : 0,
+          top: y != null ? y : 0,
+          position: strategy,
+          width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+          height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+          ref: floating,
+          children: /* @__PURE__ */ jsx(OptionList, {
+            id: listId,
+            collapsed: !openState,
+            onMouseOver: handleListMouseOver,
+            onMouseDown: handleListMouseDown,
+            onFocus: handleListFocus,
+            onClick: handleListClick,
+            ref: listRef,
+            children
+          })
         })
-      })
-    ]
-  });
-});
+      ]
+    });
+  }
+);
 
 export { DropdownNext };
 //# sourceMappingURL=DropdownNext.js.map