@umodeapporg/ui 0.12.0 → 0.13.0

package/dist/components/Form/ControlledSelect.js

@@ -8,29 +8,13 @@ import { ControlledMenuItem, ControlledMenuRoot, ControlledMenuHandler, Controll
 import ControlledTooltip from "../UI/ControlledTooltip.js";
 import { capitalizeAllLetters, formatFilter } from "../../helpers/stringHelpers.js";
 import { uiLogger } from "../../helpers/uiLogger.js";
-import "./ControlledButton.js";
+import UnifiedSearchBar from "../Search/UnifiedSearchBar.js";
 import OutlinedChip from "../UI/Chips/OutlinedChip.js";
+import LoadingSpinner from "../UI/LoadingSpinner.js";
 import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
-import "date-fns";
-import "date-fns/locale";
-import "react-day-picker";
-import "tailwind-merge";
-import "../UI/ControlledPopover.js";
-import ControlledInput from "./ControlledInput.js";
-import "react-day-picker/style.css";
-import "../DateTime/DateRangePicker.js";
-import ControlledCheckbox from "./ControlledCheckbox.js";
 import NoDataFound from "../UI/NoDataFound/index.js";
-import "../Search/filters/FiltersButton.js";
-import "../../helpers/utilityHelpers.js";
-import "./ControlledDialog.js";
-import "motion/react";
-import "react-dom";
-import "../../motion/motionPresets.js";
-import "../../motion/motionTokens.js";
-import "../Navigation/UiNavigationContext.js";
-import UnifiedSearchBar from "../Search/UnifiedSearchBar.js";
-import LoadingSpinner from "../UI/LoadingSpinner.js";
+import ControlledCheckbox from "./ControlledCheckbox.js";
+import ControlledInput from "./ControlledInput.js";
 /* empty css                                 */
 const ITEM_HEIGHT = 40;
 const MAX_LIST_HEIGHT = 300;
@@ -38,6 +22,9 @@ const OVERSCAN_COUNT = 10;
 const SEARCH_DEBOUNCE_MS = 300;
 const MAX_IN_FIELD_CHIPS = 2;
 const SEARCH_INPUT_MARKER_CLASS = "controlled-select-search-input";
+const TYPEAHEAD_RESET_MS = 500;
+const FOCUS_RETRY_FRAMES = 6;
+const isPrintableKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
 const SelectSearchSlot = ({ children }) => /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5", onClick: (event) => event.stopPropagation(), children });
 function ControlledSelect({
   label,
@@ -67,7 +54,14 @@ function ControlledSelect({
   ariaRequired,
   inputClassName,
   matchTriggerWidth = false,
-  compact = false
+  compact = false,
+  id,
+  name,
+  required,
+  onBlur,
+  onFocus,
+  autoFocus,
+  ...triggerAttributes
 }) {
   const { t } = useTranslation("ui");
   const options = useMemo(() => Array.isArray(optionsProp) ? optionsProp : [], [optionsProp]);
@@ -102,6 +96,12 @@ function ControlledSelect({
   const [isOpen, setIsOpen] = useState(false);
   const menuListRef = useRef(null);
   const triggerRef = useRef(null);
+  const triggerInputRef = useRef(null);
+  const virtualListRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [focusRequest, setFocusRequest] = useState(0);
+  const pendingFocusIndexRef = useRef(null);
+  const typeaheadRef = useRef({ buffer: "", timer: 0 });
   const [currentSearchText, setCurrentSearchText] = useState("");
   const scrollableContainerId = useId();
   const scrollableContainerRef = useRef(null);
@@ -210,8 +210,216 @@ function ControlledSelect({
       return formatLabel(foundOption?.label || selected || label);
     }
   }, [multiple, selected, options, label, formatLabel]);
+  const getOptionId = useCallback(
+    (index) => `${scrollableContainerId}-option-${index}`,
+    [scrollableContainerId]
+  );
+  const isOptionEnabled = useCallback(
+    (index) => {
+      const option = filteredOptions[index];
+      return Boolean(option) && !option.disabled;
+    },
+    [filteredOptions]
+  );
+  const findEnabledIndex = useCallback(
+    (start, step) => {
+      for (let index = start; index >= 0 && index < filteredOptions.length; index += step) {
+        if (isOptionEnabled(index)) return index;
+      }
+      return -1;
+    },
+    [filteredOptions.length, isOptionEnabled]
+  );
+  const getSelectedIndex = useCallback(() => {
+    const firstSelected = multiple ? selected[0] : selected;
+    const index = filteredOptions.findIndex((option) => option.value === firstSelected);
+    return index >= 0 && isOptionEnabled(index) ? index : -1;
+  }, [multiple, selected, filteredOptions, isOptionEnabled]);
+  const focusOptionAt = useCallback((index) => {
+    if (index < 0) return;
+    setActiveIndex(index);
+    pendingFocusIndexRef.current = index;
+    setFocusRequest((request) => request + 1);
+  }, []);
+  const focusSearchInput = useCallback(() => {
+    const searchInput = menuListRef.current?.querySelector(`.${SEARCH_INPUT_MARKER_CLASS}`);
+    if (!searchInput) return false;
+    searchInput.focus();
+    return true;
+  }, []);
+  const findTypeaheadMatch = useCallback(
+    (key, fromIndex) => {
+      const state = typeaheadRef.current;
+      window.clearTimeout(state.timer);
+      state.buffer += key.toLowerCase();
+      state.timer = window.setTimeout(() => {
+        state.buffer = "";
+      }, TYPEAHEAD_RESET_MS);
+      const isCycling = state.buffer.split("").every((char) => char === state.buffer[0]);
+      const term = isCycling ? state.buffer[0] : state.buffer;
+      const start = isCycling ? fromIndex + 1 : Math.max(fromIndex, 0);
+      const total = filteredOptions.length;
+      for (let offset = 0; offset < total; offset += 1) {
+        const index = (start + offset) % total;
+        const label2 = formatLabel(filteredOptions[index]?.label).toLowerCase();
+        if (isOptionEnabled(index) && label2.startsWith(term)) return index;
+      }
+      return -1;
+    },
+    [filteredOptions, formatLabel, isOptionEnabled]
+  );
+  const openAndFocus = useCallback(
+    (target) => {
+      if (disabled) return;
+      if (!isOpen) {
+        setIsOpen(true);
+        onOpen?.();
+      }
+      if (searchable && target === "selected") {
+        pendingFocusIndexRef.current = -1;
+        setFocusRequest((request) => request + 1);
+        return;
+      }
+      let index;
+      if (typeof target === "number") index = target;
+      else if (target === "first") index = findEnabledIndex(0, 1);
+      else if (target === "last") index = findEnabledIndex(filteredOptions.length - 1, -1);
+      else index = getSelectedIndex() >= 0 ? getSelectedIndex() : findEnabledIndex(0, 1);
+      focusOptionAt(index);
+    },
+    [disabled, isOpen, onOpen, searchable, findEnabledIndex, filteredOptions.length, getSelectedIndex, focusOptionAt]
+  );
+  useEffect(() => {
+    const index = pendingFocusIndexRef.current;
+    if (!isOpen || index === null) return void 0;
+    if (index >= 0) virtualListRef.current?.scrollToItem(index);
+    let attempts = 0;
+    let frame = 0;
+    const tryFocus = () => {
+      if (index < 0) {
+        if (focusSearchInput()) {
+          pendingFocusIndexRef.current = null;
+          return;
+        }
+      } else {
+        const node = document.getElementById(getOptionId(index));
+        if (node) {
+          pendingFocusIndexRef.current = null;
+          node.focus({ preventScroll: Boolean(virtualListRef.current) });
+          if (!virtualListRef.current) node.scrollIntoView?.({ block: "nearest" });
+          return;
+        }
+      }
+      attempts += 1;
+      if (attempts < FOCUS_RETRY_FRAMES) frame = window.requestAnimationFrame(tryFocus);
+    };
+    tryFocus();
+    return () => window.cancelAnimationFrame(frame);
+  }, [isOpen, focusRequest]);
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    if (isOpen) {
+      wasOpenRef.current = true;
+      return;
+    }
+    if (!wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    setActiveIndex(-1);
+    pendingFocusIndexRef.current = null;
+    const active = document.activeElement;
+    const focusWasInList = Boolean(active && menuListRef.current?.contains(active));
+    if (focusWasInList || active === document.body || active === null) {
+      triggerInputRef.current?.focus({ preventScroll: true });
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    setActiveIndex(-1);
+  }, [filteredOptions]);
+  useEffect(() => {
+    if (!isOpen || activeIndex < 0) return;
+    const active = document.activeElement;
+    if (active === null || active === document.body) focusOptionAt(activeIndex);
+  }, [selected]);
+  useEffect(() => () => window.clearTimeout(typeaheadRef.current.timer), []);
+  const listboxLabel = triggerAttributes["aria-label"] ?? ariaLabel ?? label ?? (isOpen ? triggerInputRef.current?.labels?.[0]?.textContent?.trim() || void 0 : void 0);
+  const handleTriggerKeyDown = (event) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "Enter":
+      case " ":
+      case "ArrowDown":
+        event.preventDefault();
+        openAndFocus(isOpen && event.key === "ArrowDown" && activeIndex >= 0 ? activeIndex : "selected");
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        openAndFocus(getSelectedIndex() >= 0 ? getSelectedIndex() : "last");
+        return;
+      case "Home":
+        event.preventDefault();
+        openAndFocus("first");
+        return;
+      case "End":
+        event.preventDefault();
+        openAndFocus("last");
+        return;
+      case "Escape":
+        if (!isOpen) return;
+        event.preventDefault();
+        setIsOpen(false);
+        return;
+      case "Tab":
+        if (isOpen) setIsOpen(false);
+        return;
+      default:
+        if (!isPrintableKey(event) || searchable) return;
+        event.preventDefault();
+        openAndFocus(findTypeaheadMatch(event.key, getSelectedIndex()));
+    }
+  };
+  const handleListKeyDown = (event) => {
+    const target = event.target;
+    const isOnSearch = target.classList.contains(SEARCH_INPUT_MARKER_CLASS);
+    const optionNode = target.closest('[role="option"]');
+    const currentIndex = optionNode ? Number(optionNode.dataset.optionIndex ?? -1) : activeIndex;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = isOnSearch ? findEnabledIndex(0, 1) : findEnabledIndex(currentIndex + 1, 1);
+        focusOptionAt(next);
+        return;
+      }
+      case "ArrowUp": {
+        if (isOnSearch) return;
+        event.preventDefault();
+        const previous = findEnabledIndex(currentIndex - 1, -1);
+        if (previous >= 0) focusOptionAt(previous);
+        else if (searchable) focusSearchInput();
+        return;
+      }
+      case "Home":
+      case "End":
+        if (isOnSearch) return;
+        event.preventDefault();
+        focusOptionAt(event.key === "Home" ? findEnabledIndex(0, 1) : findEnabledIndex(filteredOptions.length - 1, -1));
+        return;
+      case "Escape":
+        event.preventDefault();
+        setIsOpen(false);
+        return;
+      case "Tab":
+        event.preventDefault();
+        setIsOpen(false);
+        triggerInputRef.current?.focus({ preventScroll: true });
+        return;
+      default:
+        if (isOnSearch || !isPrintableKey(event) || event.key === " ") return;
+        event.preventDefault();
+        focusOptionAt(findTypeaheadMatch(event.key, currentIndex));
+    }
+  };
   const renderOptionItem = useCallback(
-    (option, style) => {
+    (option, index, style) => {
       const isSelected = multiple ? Array.isArray(selected) && selected.includes(option.value) : option.value === selected;
       const isDisabledWithReason = Boolean(option.disabled && option.tooltip);
       const menuItem = /* @__PURE__ */ jsxs(
@@ -219,20 +427,32 @@ function ControlledSelect({
         {
           disabled: option.disabled,
           onClick: (event) => handleSelect(option.value, event),
-          className: classNames("relative flex items-center p-2 pl-3 text-foreground", {
-            // The hover variant has to live inside the selected branch: the menu item's own
-            // default hover would otherwise wipe the selected tint.
-            "bg-brand-soft font-medium text-brand-emphasis hover:!bg-brand-soft focus:!bg-brand-soft": isSelected,
-            "hover:!bg-muted": !isSelected
-          }),
+          role: "option",
+          id: getOptionId(index),
+          tabIndex: -1,
+          "aria-selected": isSelected,
+          "aria-setsize": filteredOptions.length,
+          "aria-posinset": index + 1,
+          "data-option-index": index,
+          className: classNames(
+            "relative flex items-center p-2 pl-3 text-foreground",
+            "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            {
+              // The hover variant has to live inside the selected branch: the menu item's own
+              // default hover would otherwise wipe the selected tint.
+              "bg-brand-soft font-medium text-brand-emphasis hover:!bg-brand-soft focus:!bg-brand-soft": isSelected,
+              "hover:!bg-muted": !isSelected
+            }
+          ),
           style: {
             ...isDisabledWithReason ? {} : style,
             height: ITEM_HEIGHT - 1
           },
           children: [
             isSelected && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-1 left-0 w-0.5 rounded-full bg-brand" }),
-            multiple && /* @__PURE__ */ jsx(ControlledCheckbox, { checked: isSelected, onChange: () => {
-            } }),
+            multiple && // The option itself carries aria-selected; the checkbox is only its picture.
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none", children: /* @__PURE__ */ jsx(ControlledCheckbox, { checked: isSelected, onChange: () => {
+            } }) }),
             option.tooltip && !isDisabledWithReason && /* @__PURE__ */ jsx(ControlledTooltip, { content: option.tooltip, className: "w-full max-w-72", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "info", size: 15, color: "rgb(var(--color-foreground-subtle))", className: "mr-1" }) }),
             option.swatch && /* @__PURE__ */ jsx(
               "span",
@@ -252,13 +472,13 @@ function ControlledSelect({
       );
       return isDisabledWithReason ? /* @__PURE__ */ jsx(ControlledTooltip, { content: option.tooltip, className: "z-[9999] max-w-72", children: /* @__PURE__ */ jsx("div", { style, children: menuItem }) }, option.value) : menuItem;
     },
-    [multiple, selected, handleSelect, formatLabel]
+    [multiple, selected, handleSelect, formatLabel, getOptionId, filteredOptions.length]
   );
   const ItemRenderer = useCallback(
     ({ index, style }) => {
       const option = filteredOptions[index];
       if (!option) return null;
-      return renderOptionItem(option, style);
+      return renderOptionItem(option, index, style);
     },
     [filteredOptions, renderOptionItem]
   );
@@ -376,7 +596,7 @@ function ControlledSelect({
       },
       dismiss: { itemPress: !multiple },
       children: [
-        /* @__PURE__ */ jsx(ControlledMenuHandler, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(ControlledMenuHandler, { skipTriggerAria: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: classNames("flex", {
@@ -430,21 +650,18 @@ function ControlledSelect({
                 /* @__PURE__ */ jsx(
                   ControlledInput,
                   {
+                    ...triggerAttributes,
+                    id,
+                    inputRef: triggerInputRef,
+                    onBlur,
+                    onFocus,
+                    autoFocus,
                     readOnly: true,
                     role: "combobox",
                     "aria-haspopup": "listbox",
                     "aria-expanded": isOpen,
-                    "aria-controls": scrollableContainerId,
-                    onKeyDown: (event) => {
-                      if (disabled) return;
-                      if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
-                        event.preventDefault();
-                        setIsOpen(true);
-                        onOpen?.();
-                      } else if (event.key === "Escape" && isOpen) {
-                        setIsOpen(false);
-                      }
-                    },
+                    "aria-controls": isOpen ? scrollableContainerId : void 0,
+                    onKeyDown: handleTriggerKeyDown,
                     className: classNames(
                       "controlled-select-input flex w-full min-w-0 justify-between truncate text-left",
                       !compact && "tablet:min-w-52",
@@ -458,8 +675,8 @@ function ControlledSelect({
                     autoComplete: "off",
                     rightSlot: /* @__PURE__ */ jsx(MaterialSymbol, { className: cursorClassName, icon: "keyboard_arrow_down", size: 15 }),
                     label: selectedHasValue && !persistentLabel ? void 0 : label,
-                    "aria-label": ariaLabel ?? label,
-                    "aria-required": ariaRequired ? "true" : void 0,
+                    "aria-label": triggerAttributes["aria-label"] ?? ariaLabel ?? label,
+                    "aria-required": ariaRequired || required ? true : triggerAttributes["aria-required"],
                     value: showInFieldChips ? " " : selectedHasValue || hasEmptyValueOption ? getDisplayLabel() : "",
                     disabled
                   }
@@ -473,6 +690,7 @@ function ControlledSelect({
                   }
                 ) })
               ] }),
+              name && (multiple ? selected.map((value) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value, disabled }, value)) : selected !== "" && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected, disabled })),
               (selectedItemsPosition === "bottom" || selectedItemsPosition === "right") && selectedItemsChips
             ]
           }
@@ -481,6 +699,8 @@ function ControlledSelect({
           ControlledMenuList,
           {
             ref: menuListRef,
+            role: "presentation",
+            onKeyDown: handleListKeyDown,
             className: classNames("zIndexMax w-80 max-w-[calc(100vw-1.5rem)] overflow-hidden", listClassName),
             children: [
               searchable && /* @__PURE__ */ jsx(SelectSearchSlot, { children: /* @__PURE__ */ jsx(
@@ -507,6 +727,10 @@ function ControlledSelect({
                     "overflow-hidden": !infiniteScroll
                   }),
                   id: scrollableContainerId,
+                  role: "listbox",
+                  "aria-multiselectable": multiple || void 0,
+                  "aria-labelledby": triggerAttributes["aria-labelledby"],
+                  "aria-label": triggerAttributes["aria-labelledby"] ? void 0 : listboxLabel,
                   children: infiniteScroll ? /* @__PURE__ */ jsx(
                     InfiniteScroll,
                     {
@@ -516,11 +740,12 @@ function ControlledSelect({
                       loader: /* @__PURE__ */ jsx("div", { className: "flex size-full items-center justify-center py-1", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, label: t("controlledSelect.loadingOptions") }) }),
                       scrollableTarget: scrollableContainerId,
                       className: "!overflow-hidden",
-                      children: filteredOptions.length > 0 ? filteredOptions.map((option) => renderOptionItem(option)) : loading ? /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, label: t("controlledSelect.loadingOptions") }) }) : /* @__PURE__ */ jsx(ControlledMenuItem, { disabled: true, children: /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: t("controlledSelect.noDataToShow") }) })
+                      children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => renderOptionItem(option, index)) : loading ? /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, label: t("controlledSelect.loadingOptions") }) }) : /* @__PURE__ */ jsx(ControlledMenuItem, { disabled: true, role: "presentation", children: /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: t("controlledSelect.noDataToShow") }) })
                     }
                   ) : filteredOptions.length > 0 ? /* @__PURE__ */ jsx(
                     FixedSizeList,
                     {
+                      ref: virtualListRef,
                       className: "virtualized-select-list",
                       height: listHeight,
                       width: "100%",
@@ -529,7 +754,7 @@ function ControlledSelect({
                       overscanCount: OVERSCAN_COUNT,
                       children: ItemRenderer
                     }
-                  ) : loading ? /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, label: t("controlledSelect.loadingOptions") }) }) : /* @__PURE__ */ jsx(ControlledMenuItem, { disabled: true, children: /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: t("controlledSelect.noDataToShow") }) })
+                  ) : loading ? /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center py-4", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, label: t("controlledSelect.loadingOptions") }) }) : /* @__PURE__ */ jsx(ControlledMenuItem, { disabled: true, role: "presentation", children: /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: t("controlledSelect.noDataToShow") }) })
                 }
               )
             ]