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

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

@@ -3,7 +3,7 @@ import { forwardRef, useRef, useEffect } from 'react';
 import { useListControl } from '../list-control/ListControlState.js';
 import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
 import { makePrefixer, useFormFieldProps, useFloatingComponent, useFloatingUI, useForkRef, useId, StatusAdornment } from '@salt-ds/core';
-import { size, flip } from '@floating-ui/react';
+import { size, flip, useInteractions, useDismiss, useFocus, useClick } from '@floating-ui/react';
 import { clsx } from 'clsx';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -19,328 +19,314 @@ function ExpandIcon({ open }) {
   });
 }
 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
-    });
-    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 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) {
+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,
+    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
+  });
+  const {
+    activeState,
+    setActive,
+    openState,
+    setOpen,
+    openKey,
+    getOptionAtIndex,
+    getIndexOfOption,
+    getOptionsMatching,
+    getOptionFromSearch,
+    options,
+    selectedState,
+    select,
+    valueState,
+    setFocusVisibleState,
+    focusedState,
+    setFocusedState,
+    listRef
+  } = 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((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
+          });
+        }
+      }),
+      flip({ fallbackStrategy: "initialPlacement" })
+    ]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useDismiss(context),
+    useFocus(context),
+    useClick(context)
+  ]);
+  const buttonRef = useRef(null);
+  const handleTriggerRef = useForkRef(reference, buttonRef);
+  const handleButtonRef = useForkRef(handleTriggerRef, ref);
+  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(true, "input");
+    }
+    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(true, void 0, event.key);
         return;
       }
-      if (!openState) {
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-          setOpen(event, true);
+    }
+    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;
         }
-      }
-      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);
+        break;
+      case "Tab":
+        if (!multiselect && activeState) {
           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);
+        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 handleListMouseOver = () => {
+    setFocusVisibleState(false);
+  };
+  const handleFocusButton = () => {
+    var _a2;
+    (_a2 = buttonRef.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 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,
+    }
+    if (!newActive) {
+      newActive = getOptionAtIndex(0);
+    }
+    setActive(newActive);
+  }, [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,
+        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,
+        ...getReferenceProps({
           onKeyDown: handleKeyDown,
           onFocus: handleFocus,
           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
-            })
-          ]
+          ...rest
         }),
-        /* @__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
+        children: [
+          startAdornment,
+          /* @__PURE__ */ jsx("span", {
+            className: clsx(withBaseName("content"), {
+              [withBaseName("placeholder")]: !valueState
+            }),
+            children: !valueState ? placeholder : valueState
+          }),
+          validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
+            status: validationStatus
+          }),
+          !readOnly && /* @__PURE__ */ jsx(ExpandIcon, {
+            open: openState
           })
+        ]
+      }),
+      /* @__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, {
+          id: listId,
+          collapsed: !openState,
+          onMouseOver: handleListMouseOver,
+          onFocus: handleFocusButton,
+          onClick: handleFocusButton,
+          ref: listRef,
+          children
         })
-      ]
-    });
-  }
-);
+      })
+    ]
+  });
+});
 
 export { DropdownNext };
 //# sourceMappingURL=DropdownNext.js.map