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

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

@@ -9,308 +9,306 @@ 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 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) {
+      return;
+    }
+    if (!openState) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        setOpen(event, true);
         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":
+        if (!openState || !activeState) {
+          return;
+        }
+        select(event, activeState);
+        if (!multiselect) {
+          event.preventDefault();
           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) {
+        }
+        break;
+      case "Escape":
         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);
+        break;
+      case "Tab":
+        if (!multiselect && activeState) {
+          select(event, activeState);
         }
-      });
-      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));
+        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);
+      }
+    });
+    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));
         }
-      } else if (!openState) {
-        setActive(void 0);
       }
-    }, [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,
-          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
+    } else if (!openState) {
+      setActive(void 0);
+    }
+  }, [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
+          ]
         }),
-        /* @__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
-          })
+        onClick: handleClick,
+        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 && children != void 0,
+        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
         })
-      ]
-    });
-  }
-);
+      })
+    ]
+  });
+});
 
 export { ComboBoxNext };
 //# sourceMappingURL=ComboBoxNext.js.map