elseware-ui 3.0.9 → 3.0.10

package/dist/index.mjs

@@ -9043,6 +9043,24 @@ function StarRatingInput({
   );
 }
 var StarRatingInput_default = StarRatingInput;
+function useClickOutside(ref, fun) {
+  useEffect(() => {
+    const listener = (e) => {
+      if (!ref.current || ref.current.contains(e.target)) {
+        return;
+      }
+      if (fun) {
+        fun();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, fun]);
+}
 function useResolvedSelectConfig({
   label,
   placeholder,
@@ -9062,25 +9080,65 @@ function useSelectFieldState(props) {
     meta
   };
 }
+
+// src/components/data-entry/select/web/Select.web.styles.ts
+var webSelectTriggerClassName = "flex items-center justify-between gap-3 text-left outline-none transition-all duration-200 ease-out";
+var webSelectValueClassName = "block min-w-0 flex-1 truncate text-base font-normal text-gray-950 dark:text-gray-300";
+var webSelectPlaceholderClassName = "text-gray-500 dark:text-gray-400";
+var webSelectChevronClassName = "pointer-events-none shrink-0 text-base text-gray-500 transition-transform duration-150 ease-out dark:text-gray-400";
+var webSelectChevronOpenClassName = "rotate-180";
+var webSelectDropdownClassName = "absolute left-0 right-0 top-full z-30 mt-2 overflow-hidden rounded-md border border-gray-200 bg-white shadow-xl shadow-black/10 ring-1 ring-black/5 dark:border-eui-dark-300 dark:bg-eui-dark-500 dark:shadow-black/30 dark:ring-white/10";
+var webSelectListClassName = "max-h-[228px] overflow-y-auto py-1";
+var webSelectOptionClassName = "flex min-h-11 w-full items-center px-3 py-2 text-left text-sm font-medium text-gray-800 outline-none transition-colors duration-120 ease-out dark:text-gray-100";
+var webSelectOptionHoverClassName = "hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-eui-dark-400 dark:focus:bg-eui-dark-400";
+var webSelectOptionSelectedClassName = "bg-eui-secondary-500/10 text-eui-secondary-700 dark:bg-eui-secondary-500/15 dark:text-eui-secondary-300";
+var webSelectOptionActiveClassName = "bg-gray-100 dark:bg-eui-dark-400";
+var webSelectOptionDisabledClassName = "cursor-not-allowed opacity-45 hover:bg-transparent focus:bg-transparent dark:hover:bg-transparent dark:focus:bg-transparent";
+var webSelectOptionContentClassName = "min-w-0 flex-1 truncate";
+var webSelectEmptyClassName = "px-3 py-3 text-sm font-medium text-gray-500 dark:text-gray-400";
+function getEnabledOptionIndex(options, startIndex = 0, direction = 1) {
+  if (!options.length) return -1;
+  for (let offset = 0; offset < options.length; offset += 1) {
+    const index3 = (startIndex + offset * direction + options.length) % options.length;
+    if (!options[index3]?.disabled) {
+      return index3;
+    }
+  }
+  return -1;
+}
 function Select(selectProps) {
   const {
+    activeOptionClassName,
+    chevronClassName,
     disabled = false,
+    disabledOptionClassName,
+    dropdownClassName,
+    emptyClassName,
+    emptyMessage = "No options available",
     id: id2,
     inputClassName,
     label,
     labelClassName,
+    optionClassName,
+    optionContentClassName,
     options,
     placeholder,
     responseClassName,
+    selectedOptionClassName,
     shape,
     styles,
     className,
     onBlur,
     onFocus,
-    ...props
+    ..._props
   } = selectProps;
-  const { field, meta } = useSelectFieldState(selectProps);
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const reactId = useId();
+  const { field, helpers, meta } = useSelectFieldState(selectProps);
   const [focused, setFocused] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const { label: resolvedLabel, shape: resolvedShape } = useResolvedSelectConfig({
     label,
     placeholder,
@@ -9088,48 +9146,237 @@ function Select(selectProps) {
   });
   const hasError = Boolean(meta.touched && meta.error);
   const inputId = id2 ?? field.name;
-  const handleBlur = (event) => {
-    setFocused(false);
-    field.onBlur(event);
+  const listboxId = `${reactId}-${field.name}-listbox`;
+  const selectedIndex = options.findIndex(
+    (option) => option.value === field.value
+  );
+  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : null;
+  const selectedOptionDisabled = Boolean(selectedOption?.disabled);
+  const selectedLabel = selectedOption?.label ?? "";
+  const hasValue = Boolean(selectedOption);
+  const resolvedActiveIndex = activeIndex >= 0 ? activeIndex : getEnabledOptionIndex(options);
+  const openOptions = useCallback(() => {
+    if (disabled) return;
+    const initialIndex = selectedIndex >= 0 && !selectedOptionDisabled ? selectedIndex : getEnabledOptionIndex(options);
+    setFocused(true);
+    setOpen(true);
+    setActiveIndex(initialIndex);
+  }, [disabled, options, selectedIndex, selectedOptionDisabled]);
+  const closeOptions = useCallback(
+    (markTouched = true, keepFocused = false) => {
+      setOpen(false);
+      setActiveIndex(-1);
+      setFocused(keepFocused);
+      if (markTouched) {
+        void helpers.setTouched(true);
+      }
+    },
+    [helpers]
+  );
+  useClickOutside(rootRef, () => {
+    if (open) {
+      closeOptions();
+    }
+  });
+  const handleButtonFocus = (event) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+  const handleRootBlur = (event) => {
+    if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    closeOptions();
     onBlur?.(event);
   };
-  const handleFocus = (event) => {
+  const handleToggle = () => {
+    if (disabled) return;
+    if (open) {
+      closeOptions(true, true);
+      return;
+    }
+    openOptions();
+  };
+  const handleSelect = (option) => {
+    if (disabled || option.disabled) return;
+    void helpers.setValue(option.value);
+    void helpers.setTouched(true);
+    setOpen(false);
+    setActiveIndex(-1);
     setFocused(true);
-    onFocus?.(event);
+    window.setTimeout(() => triggerRef.current?.focus(), 0);
   };
-  return /* @__PURE__ */ jsxs("div", { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsx(
-      Field,
+  const setNextActiveIndex = (direction) => {
+    const nextIndex = getEnabledOptionIndex(
+      options,
+      resolvedActiveIndex + direction,
+      direction
+    );
+    setActiveIndex(nextIndex);
+  };
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open) {
+          openOptions();
+          return;
+        }
+        setNextActiveIndex(1);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openOptions();
+          return;
+        }
+        setNextActiveIndex(-1);
+        return;
+      case "Home":
+        if (open) {
+          event.preventDefault();
+          setActiveIndex(getEnabledOptionIndex(options));
+        }
+        return;
+      case "End":
+        if (open) {
+          event.preventDefault();
+          setActiveIndex(
+            getEnabledOptionIndex(options, options.length - 1, -1)
+          );
+        }
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (!open) {
+          openOptions();
+          return;
+        }
+        if (resolvedActiveIndex >= 0) {
+          handleSelect(options[resolvedActiveIndex]);
+        }
+        return;
+      case "Escape":
+        if (open) {
+          event.preventDefault();
+          closeOptions(true, true);
+        }
+        return;
+      case "Tab":
+        closeOptions();
+        return;
+      default:
+        return;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: inputRootClassName, onBlur: handleRootBlur, children: [
+    /* @__PURE__ */ jsx("input", { name: field.name, type: "hidden", value: field.value ?? "" }),
+    /* @__PURE__ */ jsxs(
+      "button",
       {
-        ...props,
-        ...field,
-        as: "select",
-        disabled,
-        id: inputId,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
+        "aria-activedescendant": open && resolvedActiveIndex >= 0 ? `${listboxId}-option-${resolvedActiveIndex}` : void 0,
+        "aria-controls": listboxId,
+        "aria-disabled": disabled || void 0,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-invalid": hasError || void 0,
         className: cn(
           inputFrameClassName,
           inputControlClassName,
-          webInputControlClassName,
-          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
+          webSelectTriggerClassName,
+          hasError ? inputFrameErrorClassName : focused || open ? inputFrameActiveClassName : inputFrameIdleClassName,
           inputShapes[resolvedShape],
           disabled && inputFrameDisabledClassName,
           className,
-          styles,
-          inputClassName
+          styles
         ),
-        children: options.map((option) => /* @__PURE__ */ jsx(
-          "option",
-          {
-            value: option.value,
-            disabled: option.disabled,
-            children: option.label
-          },
-          option.value
-        ))
+        disabled,
+        id: inputId,
+        onClick: handleToggle,
+        onFocus: handleButtonFocus,
+        onKeyDown: handleKeyDown,
+        ref: triggerRef,
+        role: "combobox",
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                webSelectValueClassName,
+                !hasValue && webSelectPlaceholderClassName,
+                inputClassName
+              ),
+              children: hasValue ? selectedLabel : ""
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BsChevronDown,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                webSelectChevronClassName,
+                open && webSelectChevronOpenClassName,
+                chevronClassName
+              )
+            }
+          )
+        ]
       }
     ),
+    /* @__PURE__ */ jsx(TransitionDropdown_default, { visibility: open, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabel,
+        className: cn(webSelectDropdownClassName, dropdownClassName),
+        id: listboxId,
+        role: "listbox",
+        children: /* @__PURE__ */ jsx("div", { className: webSelectListClassName, children: options.length > 0 ? options.map((option, index3) => {
+          const selected = option.value === field.value;
+          const active = index3 === resolvedActiveIndex;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-disabled": option.disabled || void 0,
+              "aria-selected": selected,
+              className: cn(
+                webSelectOptionClassName,
+                !option.disabled && webSelectOptionHoverClassName,
+                selected && webSelectOptionSelectedClassName,
+                active && webSelectOptionActiveClassName,
+                option.disabled && webSelectOptionDisabledClassName,
+                selected && selectedOptionClassName,
+                active && activeOptionClassName,
+                option.disabled && disabledOptionClassName,
+                optionClassName
+              ),
+              disabled: option.disabled,
+              id: `${listboxId}-option-${index3}`,
+              onClick: () => handleSelect(option),
+              onMouseEnter: () => {
+                if (!option.disabled) {
+                  setActiveIndex(index3);
+                }
+              },
+              role: "option",
+              type: "button",
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    webSelectOptionContentClassName,
+                    optionContentClassName
+                  ),
+                  children: option.label
+                }
+              )
+            },
+            option.value
+          );
+        }) : /* @__PURE__ */ jsx("div", { className: cn(webSelectEmptyClassName, emptyClassName), children: emptyMessage }) })
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       InputLabel,
       {
@@ -9979,24 +10226,6 @@ function HeaderNav({ data = [], styles }) {
   );
 }
 var HeaderNav_default = HeaderNav;
-function useClickOutside(ref, fun) {
-  useEffect(() => {
-    const listener = (e) => {
-      if (!ref.current || ref.current.contains(e.target)) {
-        return;
-      }
-      if (fun) {
-        fun();
-      }
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, fun]);
-}
 var HeaderNavItemContext = ({
   icon,
   name: name2,