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

package/dist-cjs/tabs-next/TabNext.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabNext.css.js.map

package/dist-cjs/tabs-next/TabstripNext.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabstripNext.css.js.map

package/dist-es/app-header/AppHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
+var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-separable-borderStyle) var(--salt-size-border) var(--salt-separable-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=AppHeader.css.js.map

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

@@ -3,314 +3,309 @@ import { forwardRef, useRef, useEffect } from 'react';
 import { makePrefixer, useFormFieldProps, useFloatingComponent, useFloatingUI, useForkRef, useId, Input, Button } from '@salt-ds/core';
 import { ListControlContext } from '../list-control/ListControlContext.js';
 import { clsx } from 'clsx';
-import { size, flip } from '@floating-ui/react';
+import { size, flip, useInteractions, useDismiss, useFocus, useClick } from '@floating-ui/react';
 import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
 import { useComboBoxNext } from './useComboBoxNext.js';
 import { OptionList } from '../option/OptionList.js';
 
 const withBaseName = makePrefixer("saltComboBoxNext");
-const ComboBoxNext = forwardRef(
-  function ComboBox(props, ref) {
-    var _a, _b;
-    const {
-      children,
-      className,
-      disabled: disabledProp,
-      endAdornment,
-      readOnly: readOnlyProp,
-      multiselect,
-      onSelectionChange,
-      selected,
-      defaultSelected,
-      defaultOpen,
-      onOpenChange,
-      onChange,
-      open,
-      inputProps: inputPropsProp,
-      variant = "primary",
-      onClick,
-      onKeyDown,
-      onFocus,
-      onBlur,
-      value,
-      defaultValue,
-      ...rest
-    } = props;
-    const {
-      a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
-      disabled: formFieldDisabled,
-      readOnly: formFieldReadOnly
-    } = useFormFieldProps();
-    const disabled = Boolean(disabledProp) || formFieldDisabled;
-    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
-    const listControl = useComboBoxNext({
-      open,
-      defaultOpen,
-      onOpenChange,
-      multiselect,
-      defaultSelected,
-      selected,
-      onSelectionChange,
-      value,
-      defaultValue
-    });
-    const {
-      activeState,
-      setActive,
-      openState,
-      setOpen,
-      openKey,
-      getOptionAtIndex,
-      getIndexOfOption,
-      getOptionsMatching,
-      options,
-      selectedState,
-      select,
-      clear,
-      setFocusVisibleState,
-      focusedState,
-      setFocusedState,
-      listRef,
-      valueState,
-      setValueState
-    } = 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(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
-            });
-          }
-        }),
-        flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    const handleRef = useForkRef(reference, ref);
-    const inputRef = useRef(null);
-    const handleButtonClick = (event) => {
-      if (!readOnly) {
-        event.stopPropagation();
-        setFocusVisibleState(false);
-        setOpen(event, !openState);
-      }
-    };
-    const handleButtonFocus = () => {
-      var _a2;
-      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-    };
-    const handleKeyDown = (event) => {
-      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
-      const count = options.length - 1;
-      if (readOnly) {
+const ComboBoxNext = forwardRef(function ComboBox(props, ref) {
+  var _a, _b;
+  const {
+    children,
+    className,
+    disabled: disabledProp,
+    endAdornment,
+    readOnly: readOnlyProp,
+    multiselect,
+    onSelectionChange,
+    selected,
+    defaultSelected,
+    defaultOpen,
+    onOpenChange,
+    onChange,
+    open,
+    inputProps: inputPropsProp,
+    variant = "primary",
+    onClick,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    value,
+    defaultValue,
+    ...rest
+  } = props;
+  const {
+    a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+    disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly
+  } = useFormFieldProps();
+  const disabled = Boolean(disabledProp) || formFieldDisabled;
+  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
+  const inputRef = useRef(null);
+  const listControl = useComboBoxNext({
+    open,
+    defaultOpen,
+    onOpenChange,
+    multiselect,
+    defaultSelected,
+    selected,
+    onSelectionChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly
+  });
+  const {
+    activeState,
+    setActive,
+    openState,
+    setOpen,
+    openKey,
+    getOptionAtIndex,
+    getIndexOfOption,
+    getOptionsMatching,
+    options,
+    selectedState,
+    select,
+    clear,
+    setFocusVisibleState,
+    focusedState,
+    setFocusedState,
+    listRef,
+    valueState,
+    setValueState
+  } = listControl;
+  const { Component: FloatingComponent } = useFloatingComponent();
+  const handleOpenChange = (newOpen, _event, reason) => {
+    const focusNotBlur = reason === "focus" && newOpen;
+    if (readOnly || focusNotBlur)
+      return;
+    setOpen(newOpen);
+  };
+  const { x, y, strategy, elements, floating, reference, context } = useFloatingUI({
+    open: openState && !readOnly && children != void 0,
+    onOpenChange: handleOpenChange,
+    placement: "bottom-start",
+    middleware: [
+      size({
+        apply({ rects, elements: elements2, availableHeight }) {
+          Object.assign(elements2.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
+          });
+        }
+      }),
+      flip({ fallbackStrategy: "initialPlacement" })
+    ]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useDismiss(context),
+    useFocus(context),
+    useClick(context, { keyboardHandlers: false })
+  ]);
+  const handleRef = useForkRef(reference, ref);
+  const handleButtonClick = (event) => {
+    if (!readOnly) {
+      event.stopPropagation();
+      setFocusVisibleState(false);
+      setOpen(!openState, "manual");
+    }
+  };
+  const handleButtonFocus = () => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  };
+  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(true, void 0, event.key);
         return;
       }
-      if (!openState) {
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-          setOpen(event, true);
+    }
+    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":
+        if (openState && (activeState == null ? void 0 : activeState.disabled)) {
+          event.preventDefault();
           return;
         }
-      }
-      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":
-          if (openState && (activeState == null ? void 0 : activeState.disabled)) {
-            event.preventDefault();
-            return;
-          }
-          if (!openState || !activeState) {
-            return;
-          }
-          select(event, activeState);
-          if (!multiselect) {
-            event.preventDefault();
-            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 handleClick = (event) => {
-      if (!readOnly) {
-        setOpen(event, true);
-      }
-      onClick == null ? void 0 : onClick(event);
-    };
-    const handleChange = (event) => {
-      if (!openState) {
-        setOpen(event, true);
-      }
-      if (event.target.value === "" && !multiselect) {
-        clear(event);
-      }
-      setValueState(event.target.value);
-      queueMicrotask(() => {
-        const newOption = getOptionAtIndex(0);
-        if (newOption) {
-          setActive(newOption);
+        if (!openState || !activeState) {
+          return;
         }
-      });
-      onChange == null ? void 0 : onChange(event);
-    };
-    const handleListMouseOver = () => {
-      setFocusVisibleState(false);
-    };
-    const handleListMouseDown = () => {
-      ignoreBlur.current = true;
-    };
-    const handleListFocus = () => {
-      var _a2;
-      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-    };
-    const handleListClick = () => {
-      var _a2;
-      (_a2 = inputRef.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));
-          }
+        select(event, activeState);
+        if (!multiselect) {
+          event.preventDefault();
         }
-      } else if (!openState) {
-        setActive(void 0);
+        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 handleBlur = (event) => {
+    setFocusedState(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleChange = (event) => {
+    if (!openState) {
+      setOpen(true, "input");
+    }
+    if (event.target.value === "" && !multiselect) {
+      clear(event);
+    }
+    setValueState(event.target.value);
+    queueMicrotask(() => {
+      const newOption = getOptionAtIndex(0);
+      if (newOption) {
+        setActive(newOption);
+      }
+    });
+    onChange == null ? void 0 : onChange(event);
+  };
+  const handleListMouseOver = () => {
+    setFocusVisibleState(false);
+  };
+  const handleFocusInput = () => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  };
+  useEffect(() => {
+    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
+    let newActive = void 0;
+    if (activeIndex > 0) {
+      return;
+    }
+    if (!openState) {
+      setActive(void 0);
+      return;
+    }
+    if (selectedState.length > 0) {
+      newActive = getOptionsMatching(
+        (option) => option.value === selectedState[0]
+      ).pop();
+    }
+    if (!newActive) {
+      if (openKey.current === "ArrowDown") {
+        newActive = getOptionAtIndex(0);
+      } else if (openKey.current === "ArrowUp") {
+        newActive = getOptionAtIndex(options.length - 1);
       }
-    }, [openState, children]);
-    const buttonId = useId();
-    const listId = useId();
-    return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
-      value: listControl,
-      children: [
-        /* @__PURE__ */ jsx(Input, {
-          className: clsx(withBaseName(), className),
-          endAdornment: /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              endAdornment,
-              !readOnly ? /* @__PURE__ */ jsx(Button, {
-                "aria-labelledby": clsx(buttonId, formFieldLabelledBy),
-                "aria-label": "Show options",
-                "aria-expanded": openState,
-                "aria-controls": openState ? listId : void 0,
-                "aria-haspopup": "listbox",
-                disabled,
-                variant: "secondary",
-                onClick: handleButtonClick,
-                onFocus: handleButtonFocus,
-                tabIndex: -1,
-                children: openState ? /* @__PURE__ */ jsx(ChevronUpIcon, {
-                  "aria-hidden": true
-                }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
-                  "aria-hidden": true
-                })
-              }) : void 0
-            ]
-          }),
-          onClick: handleClick,
+    }
+    if (!newActive) {
+      newActive = getOptionAtIndex(0);
+    }
+    setActive(newActive);
+  }, [openState, children]);
+  const buttonId = useId();
+  const listId = useId();
+  return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
+    value: listControl,
+    children: [
+      /* @__PURE__ */ jsx(Input, {
+        className: clsx(withBaseName(), className),
+        endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            endAdornment,
+            !readOnly ? /* @__PURE__ */ jsx(Button, {
+              "aria-labelledby": clsx(buttonId, formFieldLabelledBy),
+              "aria-label": "Show options",
+              "aria-expanded": openState,
+              "aria-controls": openState ? listId : void 0,
+              "aria-haspopup": "listbox",
+              disabled,
+              variant: "secondary",
+              onClick: handleButtonClick,
+              onFocus: handleButtonFocus,
+              tabIndex: -1,
+              children: openState ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+                "aria-hidden": true
+              }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+                "aria-hidden": true
+              })
+            }) : void 0
+          ]
+        }),
+        onChange: handleChange,
+        role: "combobox",
+        disabled,
+        readOnly,
+        inputProps: {
+          role: "combobox",
+          "aria-expanded": openState,
+          "aria-multiselectable": multiselect,
+          "aria-controls": openState ? listId : void 0,
+          ...inputPropsProp
+        },
+        "aria-activedescendant": activeState == null ? void 0 : activeState.id,
+        variant,
+        inputRef,
+        value: valueState,
+        ref: handleRef,
+        ...getReferenceProps({
           onBlur: handleBlur,
           onFocus: handleFocus,
           onKeyDown: handleKeyDown,
-          onChange: handleChange,
-          role: "combobox",
-          disabled,
-          readOnly,
-          inputProps: {
-            role: "combobox",
-            "aria-expanded": openState,
-            "aria-multiselectable": multiselect,
-            "aria-controls": openState ? listId : void 0,
-            ...inputPropsProp
-          },
-          "aria-activedescendant": activeState == null ? void 0 : activeState.id,
-          variant,
-          inputRef,
-          value: valueState,
-          ...rest,
-          ref: handleRef
-        }),
-        /* @__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, {
-            collapsed: !openState,
-            ref: listRef,
-            id: listId,
-            onMouseOver: handleListMouseOver,
-            onMouseDown: handleListMouseDown,
-            onFocus: handleListFocus,
-            onClick: handleListClick,
-            children
-          })
+          ...rest
         })
-      ]
-    });
-  }
-);
+      }),
+      /* @__PURE__ */ jsx(FloatingComponent, {
+        open: (openState || focusedState) && !readOnly && children != void 0,
+        ...getFloatingProps(),
+        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, {
+          collapsed: !openState,
+          ref: listRef,
+          id: listId,
+          onMouseOver: handleListMouseOver,
+          onFocus: handleFocusInput,
+          onClick: handleFocusInput,
+          children
+        })
+      })
+    ]
+  });
+});
 
 export { ComboBoxNext };
 //# sourceMappingURL=ComboBoxNext.js.map