@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Form/ControlledSelect.js

@@ -0,0 +1,797 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useCallback, useState, useEffect, useRef, useId, useLayoutEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { FixedSizeList } from "react-window";
+import { ControlledMenuItem, ControlledMenuRoot, ControlledMenuHandler, ControlledMenuList } from "../UI/ControlledMenu.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { capitalizeAllLetters, formatFilter } from "../../helpers/stringHelpers.js";
+import { uiLogger } from "../../helpers/uiLogger.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 NoDataFound from "../UI/NoDataFound/index.js";
+import ControlledCheckbox from "./ControlledCheckbox.js";
+import ControlledInput from "./ControlledInput.js";
+/* empty css                                 */
+const FALLBACK_LIST_WIDTH_CLASS = "w-80 max-w-[calc(100vw-1.5rem)]";
+const MIN_LIST_WIDTH_CLASS = "min-w-56";
+const ITEM_HEIGHT = 40;
+const MAX_LIST_HEIGHT = 300;
+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 isCoarsePointer = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+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,
+  persistentLabel = false,
+  options: optionsProp,
+  selectedValue,
+  error = false,
+  multiple = false,
+  disabled = false,
+  searchable = true,
+  clearable = true,
+  className,
+  listClassName,
+  onChangeHook,
+  onClearSearch,
+  infiniteScroll = false,
+  fetchMoreOptions,
+  hasMoreOptions = false,
+  loading = false,
+  onOpen,
+  selectedItemsPosition = "bottom",
+  showSelectedItems = true,
+  inFieldChips = false,
+  preserveLabelCase = false,
+  swatchShape = "dot",
+  ariaLabel,
+  ariaRequired,
+  inputClassName,
+  matchTriggerWidth = true,
+  compact = false,
+  id,
+  name,
+  required,
+  onBlur,
+  onFocus,
+  autoFocus,
+  ...triggerAttributes
+}) {
+  const { t } = useTranslation("ui");
+  const options = useMemo(() => Array.isArray(optionsProp) ? optionsProp : [], [optionsProp]);
+  const formatLabel = useCallback(
+    (value) => preserveLabelCase ? value ?? "" : capitalizeAllLetters(value),
+    [preserveLabelCase]
+  );
+  const normalizeSelected = useCallback(
+    (value) => {
+      if (multiple) {
+        if (typeof value === "string") {
+          return value === "" ? [] : [value];
+        }
+        if (Array.isArray(value)) {
+          if (value.length === 1 && value[0].includes(",") && !options.some((option) => option.value === value[0])) {
+            return value[0].split(",").map((item) => item.trim()).filter((item) => item !== "");
+          }
+          return value;
+        }
+        return [];
+      } else {
+        return typeof value === "string" ? value : "";
+      }
+    },
+    [multiple, options]
+  );
+  const [selected, setSelected] = useState(() => normalizeSelected(selectedValue));
+  useEffect(() => {
+    setSelected(normalizeSelected(selectedValue));
+  }, [selectedValue, normalizeSelected]);
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  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);
+  const isLoadingMoreRef = useRef(false);
+  useEffect(() => {
+    if (!infiniteScroll && currentSearchText) {
+      setFilteredOptions(
+        options.filter(
+          (option) => [option.label, option.secondaryLabel].some((field) => formatFilter(String(field ?? ""), currentSearchText))
+        )
+      );
+      return;
+    }
+    setFilteredOptions(options);
+  }, [options]);
+  const requestPagedOptions = useCallback(
+    async (params) => {
+      if (!fetchMoreOptions) return;
+      try {
+        await fetchMoreOptions(params);
+      } catch (fetchError) {
+        uiLogger.error("Failed to fetch select options", fetchError);
+      }
+    },
+    [fetchMoreOptions]
+  );
+  const handleLoadMoreFromScroll = useCallback(async () => {
+    if (!infiniteScroll || !hasMoreOptions || isLoadingMoreRef.current) return;
+    isLoadingMoreRef.current = true;
+    try {
+      await requestPagedOptions({ search: currentSearchText, reset: false });
+    } finally {
+      isLoadingMoreRef.current = false;
+    }
+  }, [infiniteScroll, hasMoreOptions, requestPagedOptions, currentSearchText]);
+  const handleServerSearch = useCallback(
+    (searchText) => {
+      setCurrentSearchText(searchText);
+      if (!infiniteScroll) return;
+      if (scrollableContainerRef.current) scrollableContainerRef.current.scrollTop = 0;
+      void requestPagedOptions({ search: searchText, reset: true });
+    },
+    [infiniteScroll, requestPagedOptions]
+  );
+  useEffect(() => {
+    if (isOpen || !infiniteScroll || currentSearchText === "") return;
+    setCurrentSearchText("");
+    void requestPagedOptions({ search: "", reset: true });
+  }, [isOpen]);
+  const handleSelect = useCallback(
+    (option, event) => {
+      if (disabled) return;
+      if (multiple) {
+        event.stopPropagation();
+        event.preventDefault();
+        const currentSelection = selected;
+        if (currentSelection.includes(option)) {
+          const newSelection = currentSelection.filter((item) => item !== option);
+          setSelected(newSelection);
+          onChangeHook(newSelection);
+        } else {
+          const newSelection = [...currentSelection, option];
+          setSelected(newSelection);
+          onChangeHook(newSelection);
+        }
+      } else {
+        setSelected(option);
+        onChangeHook(option);
+        if (!infiniteScroll) {
+          setCurrentSearchText("");
+          setFilteredOptions(options);
+        }
+        setIsOpen(false);
+      }
+    },
+    [disabled, multiple, selected, onChangeHook, options, infiniteScroll]
+  );
+  const handleClearSelection = useCallback(() => {
+    if (disabled) return;
+    if (multiple) {
+      setSelected([]);
+      onChangeHook([]);
+    } else {
+      setSelected("");
+      onChangeHook("");
+    }
+    if (!infiniteScroll) {
+      setCurrentSearchText("");
+      setFilteredOptions(options);
+    }
+    if (onClearSearch) {
+      onClearSearch();
+    }
+  }, [disabled, multiple, onChangeHook, onClearSearch, options, infiniteScroll]);
+  const getDisplayLabel = useCallback(() => {
+    if (multiple) {
+      const selectedArray = selected;
+      if (selectedArray.length === 0) {
+        return "";
+      } else if (selectedArray.length === 1) {
+        const foundOption = options.find((item) => item.value === selectedArray[0]);
+        return formatLabel(foundOption?.label || selectedArray[0]);
+      } else {
+        return `${selectedArray.length} itens selecionados`;
+      }
+    } else {
+      const foundOption = options.find((item) => item.value === selected);
+      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, 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(
+        ControlledMenuItem,
+        {
+          disabled: option.disabled,
+          onClick: (event) => handleSelect(option.value, event),
+          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 && // 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: () => {
+            }, tabIndex: -1 }) }),
+            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",
+              {
+                className: classNames(
+                  "mr-2 size-3.5 shrink-0 border border-border",
+                  swatchShape === "square" ? "rounded" : "rounded-full"
+                ),
+                style: { backgroundColor: option.swatch }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: formatLabel(option.label) }),
+            option.secondaryLabel && option.emphasizeSecondaryLabel && /* @__PURE__ */ jsx(
+              OutlinedChip,
+              {
+                label: option.secondaryLabel,
+                tone: "purple",
+                variant: "soft",
+                size: "xs",
+                preserveLabelCase: true,
+                truncate: true,
+                className: "ml-auto max-w-[45%] shrink-0"
+              }
+            ),
+            option.secondaryLabel && !option.emphasizeSecondaryLabel && /* @__PURE__ */ jsx("span", { className: "ml-auto max-w-[45%] shrink-0 truncate pl-3 text-xs text-foreground-faint", children: option.secondaryLabel })
+          ]
+        },
+        isDisabledWithReason ? void 0 : option.value
+      );
+      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, getOptionId, filteredOptions.length]
+  );
+  const ItemRenderer = useCallback(
+    ({ index, style }) => {
+      const option = filteredOptions[index];
+      if (!option) return null;
+      return renderOptionItem(option, index, style);
+    },
+    [filteredOptions, renderOptionItem]
+  );
+  const listHeight = useMemo(
+    () => Math.min(filteredOptions.length * ITEM_HEIGHT, MAX_LIST_HEIGHT),
+    [filteredOptions.length]
+  );
+  const selectedSwatch = useMemo(
+    () => multiple ? void 0 : options.find((option) => option.value === selected)?.swatch,
+    [multiple, options, selected]
+  );
+  const selectedHasValue = multiple ? selected.length > 0 : selected !== "";
+  const hasEmptyValueOption = useMemo(
+    () => !multiple && options.some((option) => option.value === ""),
+    [multiple, options]
+  );
+  useLayoutEffect(() => {
+    const menuList = menuListRef.current;
+    const trigger = triggerRef.current;
+    if (!matchTriggerWidth || !isOpen || !menuList || !trigger) return void 0;
+    const applyTriggerWidth = () => {
+      menuList.style.width = `${trigger.getBoundingClientRect().width}px`;
+    };
+    applyTriggerWidth();
+    const resizeObserver = new ResizeObserver(applyTriggerWidth);
+    resizeObserver.observe(trigger);
+    return () => resizeObserver.disconnect();
+  }, [matchTriggerWidth, isOpen]);
+  useEffect(() => {
+    const menuList = menuListRef.current;
+    if (!isOpen || !searchable || !menuList) return void 0;
+    let isKeyboardInteraction = false;
+    let restoreFrame = 0;
+    const markKeyboardInteraction = () => {
+      isKeyboardInteraction = true;
+    };
+    const markPointerInteraction = () => {
+      isKeyboardInteraction = false;
+    };
+    const restoreSearchFocus = (event) => {
+      const searchInput = menuList.querySelector(`.${SEARCH_INPUT_MARKER_CLASS}`);
+      if (!searchInput || event.target !== searchInput || isKeyboardInteraction) return;
+      const nextFocused = event.relatedTarget;
+      if (nextFocused && !menuList.contains(nextFocused)) return;
+      restoreFrame = window.requestAnimationFrame(() => searchInput.focus({ preventScroll: true }));
+    };
+    menuList.addEventListener("keydown", markKeyboardInteraction, true);
+    menuList.addEventListener("pointermove", markPointerInteraction, true);
+    menuList.addEventListener("focusout", restoreSearchFocus);
+    return () => {
+      window.cancelAnimationFrame(restoreFrame);
+      menuList.removeEventListener("keydown", markKeyboardInteraction, true);
+      menuList.removeEventListener("pointermove", markPointerInteraction, true);
+      menuList.removeEventListener("focusout", restoreSearchFocus);
+    };
+  }, [isOpen, searchable]);
+  const handleClearSearch = useCallback(() => {
+    setCurrentSearchText("");
+    if (infiniteScroll) {
+      if (scrollableContainerRef.current) scrollableContainerRef.current.scrollTop = 0;
+      void requestPagedOptions({ search: "", reset: true });
+    } else {
+      setFilteredOptions(options);
+    }
+    if (onClearSearch) {
+      onClearSearch();
+    }
+  }, [infiniteScroll, requestPagedOptions, onClearSearch, options]);
+  const getSelectedOptionsLabels = useCallback(() => {
+    if (!multiple || !selected || selected.length === 0) {
+      return [];
+    }
+    const selectedArray = selected;
+    return selectedArray.map((value) => {
+      const trimmedValue = value.trim();
+      const foundOption = options.find((option) => option.value === trimmedValue);
+      return {
+        value: trimmedValue,
+        label: foundOption?.label || trimmedValue,
+        swatch: foundOption?.swatch
+      };
+    });
+  }, [multiple, selected, options]);
+  const isLateralPosition = selectedItemsPosition === "left" || selectedItemsPosition === "right";
+  const inFieldChipItems = inFieldChips ? getSelectedOptionsLabels() : [];
+  const showInFieldChips = inFieldChips && multiple && inFieldChipItems.length > 0;
+  const visibleInFieldChips = inFieldChipItems.slice(0, MAX_IN_FIELD_CHIPS);
+  const inFieldOverflow = inFieldChipItems.length - visibleInFieldChips.length;
+  const inFieldChipsTooltip = inFieldChipItems.map((option) => formatLabel(option.label)).join(", ");
+  const selectedItemsChips = showSelectedItems && multiple && getSelectedOptionsLabels().length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: getSelectedOptionsLabels().map((option) => /* @__PURE__ */ jsx(
+    OutlinedChip,
+    {
+      label: option.label,
+      preserveLabelCase,
+      dot: Boolean(option.swatch),
+      dotColor: option.swatch,
+      className: classNames("bg-muted-active text-lg", { "px-4 py-1": isLateralPosition }),
+      labelClassName: isLateralPosition ? "text-sm" : void 0,
+      onClose: (event) => handleSelect(option.value, event),
+      canClose: !disabled
+    },
+    option.value
+  )) });
+  const showClear = clearable && !disabled && Boolean(selected) && (multiple ? selected.length > 0 : selected !== "");
+  const cursorClassName = disabled ? "cursor-not-allowed" : "cursor-pointer";
+  return /* @__PURE__ */ jsxs(
+    ControlledMenuRoot,
+    {
+      placement: "bottom-start",
+      open: isOpen && !disabled,
+      handler: (next) => {
+        if (disabled) return;
+        setIsOpen(next);
+        if (!next) return;
+        onOpen?.();
+        if (searchable && !isCoarsePointer()) {
+          pendingFocusIndexRef.current = -1;
+          setFocusRequest((request) => request + 1);
+        }
+      },
+      dismiss: { itemPress: !multiple },
+      children: [
+        /* @__PURE__ */ jsx(ControlledMenuHandler, { skipTriggerAria: true, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames("flex", {
+              "flex-col gap-y-2": selectedItemsPosition === "bottom" || selectedItemsPosition === "top",
+              "flex-row items-start gap-x-2": selectedItemsPosition === "left" || selectedItemsPosition === "right"
+            }),
+            children: [
+              (selectedItemsPosition === "top" || selectedItemsPosition === "left") && selectedItemsChips,
+              /* @__PURE__ */ jsxs("div", { ref: triggerRef, className: classNames("relative", cursorClassName, className), children: [
+                selectedSwatch && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classNames(
+                      "pointer-events-none absolute left-3 top-1/2 z-10 size-3.5 -translate-y-1/2 border border-border",
+                      swatchShape === "square" ? "rounded" : "rounded-full"
+                    ),
+                    style: { backgroundColor: selectedSwatch }
+                  }
+                ),
+                showInFieldChips && /* @__PURE__ */ jsx(ControlledTooltip, { content: inFieldChipsTooltip, className: "max-w-72", children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: classNames(
+                      "absolute inset-y-0 left-2.5 right-14 z-10 flex items-center gap-1 overflow-hidden",
+                      cursorClassName
+                    ),
+                    children: [
+                      visibleInFieldChips.map((option) => /* @__PURE__ */ jsx(
+                        OutlinedChip,
+                        {
+                          label: option.label,
+                          preserveLabelCase,
+                          dot: Boolean(option.swatch),
+                          dotColor: option.swatch,
+                          className: "min-w-0 shrink-0 bg-muted-active",
+                          labelClassName: "text-xxs"
+                        },
+                        option.value
+                      )),
+                      inFieldOverflow > 0 && /* @__PURE__ */ jsx(
+                        OutlinedChip,
+                        {
+                          label: t("controlledSelect.moreItems", { count: inFieldOverflow }),
+                          className: "min-w-0 shrink-0 bg-muted-active",
+                          labelClassName: "text-xxs"
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  ControlledInput,
+                  {
+                    ...triggerAttributes,
+                    id,
+                    inputRef: triggerInputRef,
+                    onBlur,
+                    onFocus,
+                    autoFocus,
+                    readOnly: true,
+                    role: "combobox",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": isOpen,
+                    "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",
+                      cursorClassName,
+                      selectedSwatch && "!pl-9",
+                      // O "x" é absoluto SOBRE o input: sem esta reserva o rótulo passa por baixo dele.
+                      showClear && "!pr-14",
+                      inputClassName
+                    ),
+                    error,
+                    autoComplete: "off",
+                    rightSlot: /* @__PURE__ */ jsx(MaterialSymbol, { className: cursorClassName, icon: "keyboard_arrow_down", size: 15 }),
+                    label: selectedHasValue && !persistentLabel ? void 0 : label,
+                    "aria-label": triggerAttributes["aria-label"] ?? ariaLabel ?? label,
+                    "aria-required": ariaRequired || required ? true : triggerAttributes["aria-required"],
+                    value: showInFieldChips ? " " : selectedHasValue || hasEmptyValueOption ? getDisplayLabel() : "",
+                    disabled
+                  }
+                ),
+                showClear && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dates.clearSelection"), children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onClick: handleClearSelection,
+                    className: "absolute inset-y-0 right-8 top-0.5 flex cursor-pointer items-center",
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close_small", size: 20, color: "rgb(var(--color-foreground-subtle))" })
+                  }
+                ) })
+              ] }),
+              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
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          ControlledMenuList,
+          {
+            ref: menuListRef,
+            role: "presentation",
+            onKeyDown: handleListKeyDown,
+            className: classNames(
+              "zIndexMax overflow-hidden",
+              FALLBACK_LIST_WIDTH_CLASS,
+              MIN_LIST_WIDTH_CLASS,
+              listClassName
+            ),
+            children: [
+              searchable && /* @__PURE__ */ jsx(SelectSearchSlot, { children: /* @__PURE__ */ jsx(
+                UnifiedSearchBar,
+                {
+                  mode: "default",
+                  label: t("actions.search"),
+                  debounceTime: SEARCH_DEBOUNCE_MS,
+                  searchableItems: infiniteScroll ? null : options,
+                  searchKeys: ["label", "secondaryLabel"],
+                  setFilteredItems: setFilteredOptions,
+                  onSearchTermChange: handleServerSearch,
+                  className: classNames("w-full", SEARCH_INPUT_MARKER_CLASS),
+                  onClearFilter: handleClearSearch,
+                  initialValue: currentSearchText
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: scrollableContainerRef,
+                  className: classNames({
+                    "max-h-[250px] overflow-y-auto overscroll-contain": infiniteScroll,
+                    "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,
+                    {
+                      dataLength: filteredOptions.length,
+                      hasMore: hasMoreOptions && filteredOptions.length > 0,
+                      next: handleLoadMoreFromScroll,
+                      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, 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%",
+                      itemCount: filteredOptions.length,
+                      itemSize: ITEM_HEIGHT,
+                      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, role: "presentation", children: /* @__PURE__ */ jsx(NoDataFound, { compact: true, message: t("controlledSelect.noDataToShow") }) })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ControlledSelect
+};
+//# sourceMappingURL=ControlledSelect.js.map