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

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

@@ -13,308 +13,303 @@ var useComboBoxNext = require('./useComboBoxNext.js');
 var OptionList = require('../option/OptionList.js');
 
 const withBaseName = core.makePrefixer("saltComboBoxNext");
-const ComboBoxNext = React.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
-    } = core.useFormFieldProps();
-    const disabled = Boolean(disabledProp) || formFieldDisabled;
-    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
-    const listControl = useComboBoxNext.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 } = core.useFloatingComponent();
-    const { x, y, strategy, elements, floating, reference } = core.useFloatingUI({
-      open,
-      placement: "bottom-start",
-      middleware: [
-        react.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))`
-            });
-          }
-        }),
-        react.flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    const handleRef = core.useForkRef(reference, ref);
-    const inputRef = React.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 = React.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
+  } = core.useFormFieldProps();
+  const disabled = Boolean(disabledProp) || formFieldDisabled;
+  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
+  const inputRef = React.useRef(null);
+  const listControl = useComboBoxNext.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 } = core.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 } = core.useFloatingUI({
+    open: openState && !readOnly && children != void 0,
+    onOpenChange: handleOpenChange,
+    placement: "bottom-start",
+    middleware: [
+      react.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))`
+          });
+        }
+      }),
+      react.flip({ fallbackStrategy: "initialPlacement" })
+    ]
+  });
+  const { getReferenceProps, getFloatingProps } = react.useInteractions([
+    react.useDismiss(context),
+    react.useFocus(context),
+    react.useClick(context, { keyboardHandlers: false })
+  ]);
+  const handleRef = core.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 = React.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();
-    };
-    React.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();
+  };
+  React.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 = core.useId();
-    const listId = core.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(ListControlContext.ListControlContext.Provider, {
-      value: listControl,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Input, {
-          className: clsx.clsx(withBaseName(), className),
-          endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-              endAdornment,
-              !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-                "aria-labelledby": clsx.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__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
-                  "aria-hidden": true
-                }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {
-                  "aria-hidden": true
-                })
-              }) : void 0
-            ]
-          }),
-          onClick: handleClick,
+    }
+    if (!newActive) {
+      newActive = getOptionAtIndex(0);
+    }
+    setActive(newActive);
+  }, [openState, children]);
+  const buttonId = core.useId();
+  const listId = core.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListControlContext.ListControlContext.Provider, {
+    value: listControl,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Input, {
+        className: clsx.clsx(withBaseName(), className),
+        endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [
+            endAdornment,
+            !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+              "aria-labelledby": clsx.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__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
+                "aria-hidden": true
+              }) : /* @__PURE__ */ jsxRuntime.jsx(icons.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(OptionList.OptionList, {
-            collapsed: !openState,
-            ref: listRef,
-            id: listId,
-            onMouseOver: handleListMouseOver,
-            onMouseDown: handleListMouseDown,
-            onFocus: handleListFocus,
-            onClick: handleListClick,
-            children
-          })
+          ...rest
         })
-      ]
-    });
-  }
-);
+      }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(OptionList.OptionList, {
+          collapsed: !openState,
+          ref: listRef,
+          id: listId,
+          onMouseOver: handleListMouseOver,
+          onFocus: handleFocusInput,
+          onClick: handleFocusInput,
+          children
+        })
+      })
+    ]
+  });
+});
 
 exports.ComboBoxNext = ComboBoxNext;
 //# sourceMappingURL=ComboBoxNext.js.map