@bigbinary/neeto-atoms 1.0.133-beta1 → 1.0.133-beta2

package/dist/Select-CD5chrpw.js

@@ -0,0 +1,1355 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect, useCallback, useMemo, useId, forwardRef } from 'react';
+import { b as buildTestIdPrefix, a as buildAriaDescribedBy } from './fieldIds-VpluAAMl.js';
+import { o as useComboboxFilter, i as ComboboxItem, k as ComboboxList, f as ComboboxEmpty, d as ComboboxCollection, g as ComboboxGroup, j as ComboboxLabel, p as ComboboxTrigger, C as Combobox, b as ComboboxChips, c as ComboboxChipsInput, m as ComboboxTrigger$1, e as ComboboxContent, h as ComboboxInput, a as ComboboxChip } from './Combobox-CUcCC9-A.js';
+import { S as SelectFieldWrapper } from './SelectFieldWrapper-D370CD4o.js';
+import { c as cn } from './utils-BJnb9o5c.js';
+import { Spinner } from './primitives/Spinner.js';
+import { X } from './x-_o2T3n6D.js';
+import { C as ChevronDown } from './chevron-down-BNi0ntys.js';
+
+function useAsyncOptions({
+  loadOptions,
+  defaultOptions = false,
+  cacheOptions = false
+}) {
+  const [asyncOptions, setAsyncOptions] = useState(
+    () => Array.isArray(defaultOptions) ? defaultOptions : []
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const cacheRef = useRef({});
+  const debounceRef = useRef(null);
+  const latestRequestRef = useRef(0);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    if (!loadOptions || defaultOptions !== true) return;
+    let cancelled = false;
+    setIsLoading(true);
+    loadOptions("").then((results) => {
+      if (cancelled) return;
+      setAsyncOptions(results);
+      if (cacheOptions) cacheRef.current[""] = results;
+      setIsLoading(false);
+    }).catch(() => {
+      if (!cancelled) setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const handleAsyncInputChange = useCallback(
+    (value) => {
+      if (!loadOptions) return;
+      const query = value.trim();
+      if (cacheOptions && query in cacheRef.current) {
+        setAsyncOptions(cacheRef.current[query]);
+        return;
+      }
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        const requestId = ++latestRequestRef.current;
+        setIsLoading(true);
+        loadOptions(query).then((results) => {
+          if (requestId !== latestRequestRef.current || !mountedRef.current)
+            return;
+          setAsyncOptions(results);
+          if (cacheOptions) cacheRef.current[query] = results;
+          setIsLoading(false);
+        }).catch(() => {
+          if (requestId === latestRequestRef.current && mountedRef.current) {
+            setIsLoading(false);
+          }
+        });
+      }, 300);
+    },
+    [loadOptions, cacheOptions]
+  );
+  return { asyncOptions, isLoading, handleAsyncInputChange };
+}
+
+function useLazyLoadSentinel({
+  fetchMore,
+  isEnabled
+}) {
+  const observerRef = useRef(null);
+  const fetchMoreRef = useRef(fetchMore);
+  fetchMoreRef.current = fetchMore;
+  const sentinelRef = useCallback(
+    (node) => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+      if (!node || !isEnabled) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) fetchMoreRef.current?.();
+        },
+        { root: null, rootMargin: "0px", threshold: 0.1 }
+      );
+      observer.observe(node);
+      observerRef.current = observer;
+    },
+    [isEnabled]
+  );
+  useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+  return sentinelRef;
+}
+
+const INPUT_CHANGE_REASON = "input-change";
+const SIZE_CONFIG = {
+  small: {
+    chips: "min-h-8 md:min-h-7 text-base md:text-xs gap-0.5 px-1 py-0.5",
+    input: "text-base md:text-xs",
+    chip: "h-4.5 text-[0.6875rem] px-1",
+    icon: "size-3.5",
+    clearIcon: "size-3"
+  },
+  medium: {
+    chips: "min-h-8 text-base md:text-sm gap-1 px-2.5 py-1",
+    input: "text-base md:text-sm",
+    chip: "h-5.25 text-xs px-1.5",
+    icon: "size-4",
+    clearIcon: "size-3.5"
+  },
+  large: {
+    chips: "min-h-10 text-base md:text-sm gap-1 px-2.5 py-1.5",
+    input: "text-base md:text-sm",
+    chip: "h-6 text-xs px-2",
+    icon: "size-5",
+    clearIcon: "size-4"
+  }
+};
+
+const CREATE_PREFIX = "__create__:";
+const isCreateValue = (val) => typeof val === "string" && val.startsWith(CREATE_PREFIX);
+function useCreatableItems({
+  isCreatable,
+  isGrouped,
+  flatOptions,
+  selectedValues,
+  baseUiItems,
+  onCreateOption,
+  onChange,
+  onAsyncInputChange,
+  children
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const handleInputValueChange = useCallback(
+    (value, details) => {
+      const isTyping = details?.reason === INPUT_CHANGE_REASON;
+      const nextValue = isTyping ? value : "";
+      setInputValue(nextValue);
+      if (isTyping) onAsyncInputChange?.(nextValue);
+    },
+    [onAsyncInputChange]
+  );
+  const trimmedInput = inputValue.trim();
+  const showCreateOption = useMemo(() => {
+    if (!isCreatable || trimmedInput.length === 0) return false;
+    const lower = trimmedInput.toLowerCase();
+    return !flatOptions.some(
+      (o) => String(o.label).toLowerCase() === lower || String(o.value).toLowerCase() === lower
+    ) && !selectedValues.includes(trimmedInput);
+  }, [isCreatable, trimmedInput, flatOptions, selectedValues]);
+  const effectiveItems = React__default.useMemo(
+    () => computeEffectiveItems(
+      children,
+      baseUiItems,
+      showCreateOption,
+      isGrouped,
+      trimmedInput
+    ),
+    [baseUiItems, children, isGrouped, showCreateOption, trimmedInput]
+  );
+  const baseFilter = useComboboxFilter({ multiple: true });
+  const optionFilter = useCallback(
+    (itemValue, _query, itemToString) => isCreateValue(itemValue) || baseFilter.contains(itemValue, trimmedInput, itemToString),
+    [baseFilter, trimmedInput]
+  );
+  const handleValueChange = useCallback(
+    (next) => {
+      const raw = next ?? [];
+      const createEntry = raw.find((v) => isCreateValue(v));
+      if (createEntry) {
+        const newValue = createEntry.slice(CREATE_PREFIX.length);
+        const withNewValue = raw.map((v) => v === createEntry ? newValue : v);
+        onCreateOption?.(newValue);
+        onChange?.(withNewValue);
+        return;
+      }
+      onChange?.(raw);
+    },
+    [onChange, onCreateOption]
+  );
+  return {
+    inputValue,
+    showCreateOption,
+    effectiveItems,
+    optionFilter,
+    handleInputValueChange,
+    handleValueChange
+  };
+}
+
+function isOptionGroup(opt) {
+  return "options" in opt && Array.isArray(opt.options);
+}
+
+function assignRef(ref, element) {
+  if (typeof ref === "function") {
+    ref(element);
+  } else if (ref) {
+    ref.current = element;
+  }
+}
+function normalizeOption(option, getValue, getLabel) {
+  if (!getValue && !getLabel) return option;
+  return {
+    ...option,
+    value: getValue ? getValue(option) : option?.value,
+    label: getLabel ? getLabel(option) : option?.label
+  };
+}
+function normalizeOptions(options, getValue, getLabel) {
+  if (!options) return options;
+  if (!getValue && !getLabel) return options;
+  return options.map(
+    (opt) => opt && Array.isArray(opt.options) ? {
+      ...opt,
+      options: opt.options.map(
+        (o) => normalizeOption(o, getValue, getLabel)
+      )
+    } : normalizeOption(opt, getValue, getLabel)
+  );
+}
+function flattenOptions(options) {
+  return options.flatMap((opt) => isOptionGroup(opt) ? opt.options : [opt]);
+}
+function hasGroups(options) {
+  return options.some(isOptionGroup);
+}
+function toBaseUiItems(options) {
+  if (hasGroups(options)) {
+    return options.filter(isOptionGroup).map((g) => ({
+      label: g.label,
+      items: g.options.map((o) => o.value)
+    }));
+  }
+  return options.map((o) => o.value);
+}
+function resolveIsSearchable({
+  isSearchable,
+  searchThreshold,
+  optionCount,
+  isCountKnown
+}) {
+  if (!isSearchable) return false;
+  if (searchThreshold === void 0 || !isCountKnown) return true;
+  return optionCount >= searchThreshold;
+}
+function computeEffectiveItems(children, baseUiItems, showCreateOption, isGrouped, trimmedInput) {
+  if (children) return void 0;
+  const createValue = showCreateOption ? `${CREATE_PREFIX}${trimmedInput}` : null;
+  if (!baseUiItems && !createValue) return void 0;
+  const base = baseUiItems ?? [];
+  if (!createValue) return base;
+  if (!isGrouped) {
+    return [...base, createValue];
+  }
+  return [
+    ...base,
+    { label: "", items: [createValue] }
+  ];
+}
+
+function useMultiSelectOptions(props) {
+  const isAsync = !!props.loadOptions;
+  const { asyncOptions, isLoading, handleAsyncInputChange } = useAsyncOptions({
+    loadOptions: props.loadOptions,
+    defaultOptions: props.defaultOptions ?? false,
+    cacheOptions: props.cacheOptions ?? false
+  });
+  const resolvedOptions = isAsync ? asyncOptions : props.options ?? [];
+  const flatOptions = flattenOptions(resolvedOptions);
+  const isGrouped = hasGroups(resolvedOptions);
+  const baseUiItems = React__default.useMemo(
+    () => resolvedOptions.length > 0 ? toBaseUiItems(resolvedOptions) : void 0,
+    [resolvedOptions]
+  );
+  const hasMoreLazy = (props.isAsyncLoadOptionEnabled ?? false) && typeof props.totalOptionsCount === "number" && flatOptions.length < props.totalOptionsCount;
+  const loaderCallbackRef = useLazyLoadSentinel({
+    fetchMore: props.fetchMore,
+    isEnabled: props.isAsyncLoadOptionEnabled ?? false
+  });
+  return {
+    isAsync,
+    resolvedOptions,
+    flatOptions,
+    isGrouped,
+    isLoading,
+    handleAsyncInputChange,
+    baseUiItems,
+    hasMoreLazy,
+    loaderCallbackRef
+  };
+}
+
+const defaultFormatCreateLabel$1 = (v) => `Create "${v}"`;
+function useSelectState(props) {
+  const {
+    id: idProp,
+    size = "medium",
+    label = "",
+    error = "",
+    helpText = "",
+    value: valueProp,
+    defaultValue,
+    onChange,
+    dataTestId,
+    isCreatable = false,
+    onCreateOption,
+    formatCreateLabel = defaultFormatCreateLabel$1,
+    formatOptionLabel,
+    formatTriggerLabel,
+    isClearable = false,
+    isDisabled = false,
+    required = false,
+    isSearchable: isSearchableProp = true,
+    searchPosition = "trigger",
+    searchPlaceholder = "Search...",
+    searchThreshold,
+    isAsyncLoadOptionEnabled = false,
+    autoHighlight = true,
+    onOpenChange,
+    children
+  } = props;
+  const opt = useMultiSelectOptions(props);
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const errorId = `error_${id}`;
+  const helpTextId = `helpText_${id}`;
+  const labelId = `label_${id}`;
+  const sizeConfig = SIZE_CONFIG[size];
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? ""
+  );
+  const currentValue = isControlled ? valueProp ?? "" : internalValue;
+  const applyValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const handleValueChange = useCallback(
+    (next) => {
+      const raw = next ?? "";
+      if (isCreateValue(raw)) {
+        const newValue = raw.slice(CREATE_PREFIX.length);
+        onCreateOption?.(newValue);
+        applyValue(newValue);
+        return;
+      }
+      applyValue(raw);
+    },
+    [applyValue, onCreateOption]
+  );
+  const [inputValue, setInputValueState] = useState("");
+  const trimmedInput = inputValue.trim();
+  const combinedHandleInputValueChange = useCallback(
+    (value, details) => {
+      const isTyping = details?.reason === INPUT_CHANGE_REASON;
+      const nextValue = isTyping ? value : "";
+      setInputValueState(nextValue);
+      if (isTyping && opt.isAsync) opt.handleAsyncInputChange(nextValue);
+    },
+    [opt.isAsync, opt.handleAsyncInputChange]
+  );
+  const handleClear = useCallback(() => {
+    applyValue("");
+  }, [applyValue]);
+  const showCreateOption = useMemo(() => {
+    if (!isCreatable || trimmedInput.length === 0 || currentValue === trimmedInput)
+      return false;
+    const lower = trimmedInput.toLowerCase();
+    return !opt.flatOptions.some(
+      (o) => String(o.label).toLowerCase() === lower || String(o.value).toLowerCase() === lower
+    );
+  }, [isCreatable, trimmedInput, currentValue, opt.flatOptions]);
+  const effectiveItems = useMemo(() => {
+    if (children) return void 0;
+    const base = opt.baseUiItems;
+    if (!showCreateOption) return base;
+    const createValue = `${CREATE_PREFIX}${trimmedInput}`;
+    if (!opt.isGrouped) {
+      return [...base ?? [], createValue];
+    }
+    return [
+      ...base ?? [],
+      { label: "", items: [createValue] }
+    ];
+  }, [
+    children,
+    opt.baseUiItems,
+    opt.isGrouped,
+    showCreateOption,
+    trimmedInput
+  ]);
+  const baseFilter = useComboboxFilter({ multiple: true });
+  const optionFilter = useCallback(
+    (itemValue, _query, itemToString) => isCreateValue(itemValue) || baseFilter.contains(itemValue, trimmedInput, itemToString),
+    [baseFilter, trimmedInput]
+  );
+  const ariaDescribedBy = buildAriaDescribedBy(
+    error,
+    errorId,
+    helpText,
+    helpTextId
+  );
+  const testIdPrefix = buildTestIdPrefix(dataTestId, label);
+  const showClearButton = isClearable && currentValue !== "" && currentValue !== null && !isDisabled;
+  const isSearchable = resolveIsSearchable({
+    isSearchable: isSearchableProp,
+    searchThreshold,
+    optionCount: opt.flatOptions.length,
+    isCountKnown: !opt.isAsync && !isCreatable && !isAsyncLoadOptionEnabled
+  });
+  const flatOptionsMap = useMemo(
+    () => new Map(opt.flatOptions.map((o) => [o.value, o])),
+    [opt.flatOptions]
+  );
+  const labelForValue = useCallback(
+    (val) => {
+      if (isCreateValue(val)) {
+        return formatCreateLabel(val.slice(CREATE_PREFIX.length));
+      }
+      return String(flatOptionsMap.get(val)?.label ?? val ?? "");
+    },
+    [flatOptionsMap, formatCreateLabel]
+  );
+  const renderOption = useCallback(
+    (val) => {
+      if (formatOptionLabel && !isCreateValue(val)) {
+        const option = flatOptionsMap.get(val);
+        if (option) return formatOptionLabel(option);
+      }
+      return labelForValue(val);
+    },
+    [formatOptionLabel, flatOptionsMap, labelForValue]
+  );
+  const renderTrigger = useCallback(
+    (val) => {
+      if (formatTriggerLabel && !isCreateValue(val)) {
+        const option = flatOptionsMap.get(val);
+        if (option) return formatTriggerLabel(option);
+      }
+      return renderOption(val);
+    },
+    [formatTriggerLabel, flatOptionsMap, renderOption]
+  );
+  return {
+    ...opt,
+    id,
+    errorId,
+    helpTextId,
+    labelId,
+    sizeConfig,
+    isControlled,
+    currentValue,
+    effectiveItems,
+    optionFilter,
+    handleValueChange,
+    handleInputValueChange: combinedHandleInputValueChange,
+    handleClear,
+    showCreateOption,
+    showClearButton,
+    ariaDescribedBy,
+    testIdPrefix,
+    labelForValue,
+    renderOption,
+    renderTrigger,
+    flatOptionsMap,
+    label,
+    error,
+    helpText,
+    isDisabled,
+    required,
+    isSearchable,
+    searchPosition,
+    searchPlaceholder,
+    inputValue,
+    autoHighlight,
+    onOpenChange,
+    isClearable
+  };
+}
+
+const defaultFormatCreateLabel = (v) => `Create "${v}"`;
+function useMultiSelectState(props) {
+  const {
+    id: idProp,
+    size = "medium",
+    label = "",
+    error = "",
+    helpText = "",
+    value: valueProp,
+    defaultValue,
+    onChange,
+    dataTestId,
+    isCreatable = false,
+    onCreateOption,
+    formatCreateLabel = defaultFormatCreateLabel,
+    formatOptionLabel,
+    isSearchable: isSearchableProp = true,
+    searchPosition = "trigger",
+    searchPlaceholder = "Search...",
+    searchThreshold,
+    isAsyncLoadOptionEnabled = false,
+    children
+  } = props;
+  const opt = useMultiSelectOptions(props);
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const errorId = `error_${id}`;
+  const helpTextId = `helpText_${id}`;
+  const labelId = `label_${id}`;
+  const sizeConfig = SIZE_CONFIG[size];
+  const isSearchable = resolveIsSearchable({
+    isSearchable: isSearchableProp,
+    searchThreshold,
+    optionCount: opt.flatOptions.length,
+    isCountKnown: !opt.isAsync && !isCreatable && !isAsyncLoadOptionEnabled
+  });
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? []
+  );
+  const selectedValues = isControlled ? valueProp : internalValue;
+  const handleChange = useCallback(
+    (values) => {
+      setInternalValue(values);
+      onChange?.(values);
+    },
+    [onChange]
+  );
+  const {
+    showCreateOption,
+    effectiveItems,
+    optionFilter,
+    handleInputValueChange,
+    handleValueChange
+  } = useCreatableItems({
+    isCreatable,
+    isGrouped: opt.isGrouped,
+    flatOptions: opt.flatOptions,
+    selectedValues,
+    baseUiItems: opt.baseUiItems,
+    onCreateOption,
+    onChange: handleChange,
+    onAsyncInputChange: opt.isAsync ? opt.handleAsyncInputChange : void 0,
+    children
+  });
+  const ariaDescribedBy = buildAriaDescribedBy(
+    error,
+    errorId,
+    helpText,
+    helpTextId
+  );
+  const testIdPrefix = buildTestIdPrefix(dataTestId, label);
+  const flatOptionsMap = useMemo(
+    () => new Map(opt.flatOptions.map((o) => [o.value, o])),
+    [opt.flatOptions]
+  );
+  const labelForValue = useCallback(
+    (val) => {
+      if (isCreateValue(val)) {
+        return formatCreateLabel(val.slice(CREATE_PREFIX.length));
+      }
+      return String(flatOptionsMap.get(val)?.label ?? val ?? "");
+    },
+    [flatOptionsMap, formatCreateLabel]
+  );
+  const renderOption = useCallback(
+    (val) => {
+      if (formatOptionLabel && !isCreateValue(val)) {
+        const option = flatOptionsMap.get(val);
+        if (option) return formatOptionLabel(option);
+      }
+      return labelForValue(val);
+    },
+    [formatOptionLabel, flatOptionsMap, labelForValue]
+  );
+  return {
+    ...opt,
+    id,
+    errorId,
+    helpTextId,
+    labelId,
+    sizeConfig,
+    isControlled,
+    selectedValues,
+    isSearchable,
+    searchPosition,
+    searchPlaceholder,
+    effectiveItems,
+    optionFilter,
+    handleInputValueChange,
+    handleValueChange,
+    showCreateOption,
+    ariaDescribedBy,
+    testIdPrefix,
+    labelForValue,
+    renderOption,
+    flatOptionsMap,
+    label,
+    error,
+    helpText
+  };
+}
+
+function OptionItem({
+  val,
+  flatOptionsMap,
+  renderOption,
+  testIdPrefix
+}) {
+  const isCreateItem = isCreateValue(val);
+  return /* @__PURE__ */ jsx(
+    ComboboxItem,
+    {
+      value: val,
+      disabled: !isCreateItem && flatOptionsMap.get(val)?.disabled,
+      className: isCreateItem ? "text-primary" : void 0,
+      ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-option` } : {},
+      children: renderOption(val)
+    },
+    val
+  );
+}
+
+function MultiSelectDropdown({
+  resolvedOptions,
+  flatOptionsMap,
+  isGrouped,
+  isLoading,
+  loadingMessage,
+  emptyMessage,
+  showCreateOption,
+  renderOption,
+  testIdPrefix,
+  hasMoreLazy,
+  loaderCallbackRef,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxList,
+    {
+      ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-menu` } : {},
+      children: [
+        isLoading && /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center py-2 text-center text-sm text-muted-foreground", children: loadingMessage }),
+        !isLoading && !showCreateOption && /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyMessage }),
+        children ?? (resolvedOptions.length > 0 || showCreateOption ? isGrouped ? /* @__PURE__ */ jsx(ComboboxCollection, { children: (group) => /* @__PURE__ */ jsxs(
+          ComboboxGroup,
+          {
+            items: group.items,
+            children: [
+              group.label && /* @__PURE__ */ jsx(ComboboxLabel, { children: group.label }),
+              /* @__PURE__ */ jsx(ComboboxCollection, { children: (val) => /* @__PURE__ */ jsx(
+                OptionItem,
+                {
+                  val,
+                  flatOptionsMap,
+                  renderOption,
+                  testIdPrefix
+                },
+                val
+              ) })
+            ]
+          },
+          group.label || "__create__"
+        ) }) : /* @__PURE__ */ jsx(ComboboxCollection, { children: (val) => /* @__PURE__ */ jsx(
+          OptionItem,
+          {
+            val,
+            flatOptionsMap,
+            renderOption,
+            testIdPrefix
+          },
+          val
+        ) }) : null),
+        hasMoreLazy && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: loaderCallbackRef,
+            className: "flex w-full items-center justify-center py-3",
+            "data-testid": `${testIdPrefix}-lazy-loader`,
+            children: /* @__PURE__ */ jsx(Spinner, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+const omitUndefined = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+const SelectAnchor = forwardRef(
+  ({ renderAsTrigger, className, dataTestId, triggerFieldProps, children }, ref) => {
+    if (!renderAsTrigger) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className,
+          ...dataTestId ? { "data-testid": dataTestId } : {},
+          children
+        }
+      );
+    }
+    const { id, ...ariaProps } = triggerFieldProps ?? {};
+    return /* @__PURE__ */ jsx(
+      ComboboxTrigger,
+      {
+        nativeButton: false,
+        ...id ? { id } : {},
+        render: ({ ref: baseUiRef, ...props }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...omitUndefined(ariaProps),
+            ref: (element) => {
+              assignRef(baseUiRef, element);
+              assignRef(ref, element);
+            },
+            className,
+            ...dataTestId ? { "data-testid": dataTestId } : {}
+          }
+        ),
+        children
+      }
+    );
+  }
+);
+SelectAnchor.displayName = "SelectAnchor";
+
+const SelectCombobox = forwardRef(
+  ({
+    name,
+    id,
+    labelId,
+    effectiveItems,
+    labelForValue,
+    renderOption,
+    renderTrigger,
+    isSearchable,
+    searchPosition,
+    searchPlaceholder,
+    inputValue,
+    isAsync,
+    optionFilter,
+    currentValue,
+    handleValueChange,
+    handleInputValueChange,
+    handleClear,
+    onOpenChange,
+    isDisabled,
+    autoHighlight,
+    required,
+    showClearButton,
+    sizeConfig,
+    error,
+    placeholder,
+    ariaDescribedBy,
+    testIdPrefix,
+    inputClassName,
+    contentProps,
+    dropdownProps,
+    children
+  }, ref) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isContentSearch = isSearchable && searchPosition === "content";
+    const renderTriggerInput = searchPosition !== "content";
+    const isTriggerSearch = isSearchable && renderTriggerInput;
+    const useTriggerAnchor = !isTriggerSearch;
+    const hasValue = currentValue !== "" && currentValue !== null;
+    const showValue = hasValue && (!isTriggerSearch || inputValue === "");
+    const showPlaceholder = !hasValue && !isTriggerSearch;
+    const setTriggerEl = useCallback(
+      (element) => {
+        setAnchorEl(element);
+        if (renderTriggerInput) return;
+        assignRef(ref, element);
+      },
+      [ref, renderTriggerInput]
+    );
+    const handleClearClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        handleClear();
+      },
+      [handleClear]
+    );
+    return (
+      // @ts-expect-error — conditional spread creates a union that TS cannot narrow to the Combobox discriminated-union props
+      /* @__PURE__ */ jsxs(
+        Combobox,
+        {
+          name,
+          ...effectiveItems && !children ? {
+            items: effectiveItems,
+            itemToStringLabel: labelForValue,
+            ...!isSearchable || isAsync ? { filter: null } : { filter: optionFilter }
+          } : {},
+          value: currentValue,
+          onValueChange: handleValueChange,
+          inputValue,
+          onInputValueChange: handleInputValueChange,
+          onOpenChange,
+          disabled: isDisabled,
+          autoHighlight,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectAnchor,
+              {
+                ref: setTriggerEl,
+                dataTestId: testIdPrefix,
+                renderAsTrigger: useTriggerAnchor,
+                className: useTriggerAnchor ? "cursor-pointer" : void 0,
+                triggerFieldProps: renderTriggerInput ? void 0 : {
+                  id,
+                  "aria-labelledby": labelId,
+                  "aria-describedby": ariaDescribedBy,
+                  "aria-required": required || void 0,
+                  "aria-invalid": !!error || void 0
+                },
+                children: /* @__PURE__ */ jsxs(
+                  ComboboxChips,
+                  {
+                    className: cn(
+                      sizeConfig.chips,
+                      !!error && "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40",
+                      inputClassName
+                    ),
+                    ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 flex-1 items-center [&>*]:col-start-1 [&>*]:row-start-1", children: [
+                        showValue && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: renderTrigger(currentValue) }),
+                        showPlaceholder && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-placeholder", children: placeholder }),
+                        renderTriggerInput && /* @__PURE__ */ jsx(
+                          ComboboxChipsInput,
+                          {
+                            ref,
+                            id,
+                            placeholder: isTriggerSearch && !hasValue ? placeholder : void 0,
+                            "aria-invalid": !!error || void 0,
+                            "aria-describedby": ariaDescribedBy,
+                            "aria-required": required || void 0,
+                            className: cn(
+                              sizeConfig.input,
+                              "w-full min-w-0",
+                              !isSearchable && "w-0 overflow-hidden p-0 opacity-0"
+                            ),
+                            disabled: isDisabled,
+                            ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                          }
+                        )
+                      ] }),
+                      showClearButton && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: -1,
+                          "aria-label": "Clear selection",
+                          className: "shrink-0 text-muted-foreground hover:text-foreground",
+                          onClick: handleClearClick,
+                          children: /* @__PURE__ */ jsx(X, { className: sizeConfig.clearIcon })
+                        }
+                      ),
+                      isTriggerSearch ? /* @__PURE__ */ jsx(
+                        ComboboxTrigger$1,
+                        {
+                          className: cn(
+                            "shrink-0 bg-transparent p-0 text-muted-foreground hover:bg-transparent",
+                            sizeConfig.icon
+                          )
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        ChevronDown,
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "pointer-events-none shrink-0 text-muted-foreground",
+                            sizeConfig.icon
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(ComboboxContent, { anchor: anchorEl, ...contentProps, children: [
+              isContentSearch && /* @__PURE__ */ jsx(
+                ComboboxInput,
+                {
+                  showTrigger: false,
+                  placeholder: searchPlaceholder,
+                  ...labelId ? { "aria-labelledby": labelId } : { "aria-label": searchPlaceholder },
+                  ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MultiSelectDropdown,
+                {
+                  ...dropdownProps,
+                  renderOption,
+                  testIdPrefix,
+                  children
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    );
+  }
+);
+SelectCombobox.displayName = "SelectCombobox";
+
+const MultiSelectCombobox = forwardRef(
+  ({
+    name,
+    id,
+    labelId,
+    effectiveItems,
+    labelForValue,
+    renderOption,
+    isSearchable,
+    searchPosition,
+    searchPlaceholder,
+    isAsync,
+    optionFilter,
+    isControlled,
+    valueProp,
+    defaultValue,
+    selectedValues,
+    handleValueChange,
+    handleInputValueChange,
+    onOpenChange,
+    isDisabled,
+    autoHighlight,
+    required,
+    sizeConfig,
+    error,
+    chipsClassName,
+    inputClassName,
+    placeholder,
+    hideChipRemove,
+    ariaDescribedBy,
+    testIdPrefix,
+    contentProps,
+    dropdownProps,
+    children
+  }, ref) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isContentSearch = isSearchable && searchPosition === "content";
+    const renderTriggerInput = searchPosition !== "content";
+    const isTriggerSearch = isSearchable && renderTriggerInput;
+    const useTriggerAnchor = !isTriggerSearch;
+    const setTriggerEl = useCallback(
+      (element) => {
+        setAnchorEl(element);
+        if (renderTriggerInput) return;
+        assignRef(ref, element);
+      },
+      [ref, renderTriggerInput]
+    );
+    return (
+      // @ts-expect-error — conditional spread creates a union that TS cannot narrow to the Combobox discriminated-union props
+      /* @__PURE__ */ jsxs(
+        Combobox,
+        {
+          multiple: true,
+          name,
+          ...effectiveItems && !children ? {
+            items: effectiveItems,
+            itemToStringLabel: labelForValue,
+            ...!isSearchable || isAsync ? { filter: null } : { filter: optionFilter }
+          } : {},
+          ...isControlled ? { value: valueProp } : { defaultValue },
+          onValueChange: handleValueChange,
+          onInputValueChange: handleInputValueChange,
+          onOpenChange,
+          disabled: isDisabled,
+          autoHighlight,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectAnchor,
+              {
+                ref: setTriggerEl,
+                renderAsTrigger: useTriggerAnchor,
+                className: useTriggerAnchor ? "cursor-pointer" : void 0,
+                triggerFieldProps: renderTriggerInput ? void 0 : {
+                  id,
+                  "aria-labelledby": labelId,
+                  "aria-describedby": ariaDescribedBy,
+                  "aria-required": required || void 0,
+                  "aria-invalid": !!error || void 0
+                },
+                children: /* @__PURE__ */ jsxs(
+                  ComboboxChips,
+                  {
+                    className: cn(
+                      sizeConfig.chips,
+                      !!error && "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40",
+                      chipsClassName,
+                      inputClassName
+                    ),
+                    ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
+                    children: [
+                      selectedValues.map((val, index) => /* @__PURE__ */ jsx(
+                        ComboboxChip,
+                        {
+                          className: sizeConfig.chip,
+                          showRemove: !hideChipRemove,
+                          ...renderTriggerInput || isDisabled ? {} : { tabIndex: index === 0 ? 0 : -1 },
+                          ...testIdPrefix ? { "data-testid": `${testIdPrefix}-chip` } : {},
+                          children: renderOption(val)
+                        },
+                        val
+                      )),
+                      renderTriggerInput ? /* @__PURE__ */ jsx(
+                        ComboboxChipsInput,
+                        {
+                          ref,
+                          id,
+                          placeholder: isTriggerSearch && selectedValues.length === 0 ? placeholder : void 0,
+                          "aria-invalid": !!error || void 0,
+                          "aria-describedby": ariaDescribedBy,
+                          "aria-required": required || void 0,
+                          className: cn(
+                            sizeConfig.input,
+                            !isSearchable && "w-0 min-w-0 overflow-hidden p-0 opacity-0"
+                          ),
+                          disabled: isDisabled,
+                          ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                        }
+                      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        selectedValues.length === 0 && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-placeholder", children: placeholder }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            "aria-hidden": true,
+                            className: cn(
+                              "pointer-events-none ms-auto shrink-0 text-muted-foreground",
+                              sizeConfig.icon
+                            )
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(ComboboxContent, { anchor: anchorEl, ...contentProps, children: [
+              isContentSearch && /* @__PURE__ */ jsx(
+                ComboboxInput,
+                {
+                  showTrigger: false,
+                  placeholder: searchPlaceholder,
+                  ...labelId ? { "aria-labelledby": labelId } : { "aria-label": searchPlaceholder },
+                  ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MultiSelectDropdown,
+                {
+                  ...dropdownProps,
+                  renderOption,
+                  testIdPrefix,
+                  children
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    );
+  }
+);
+MultiSelectCombobox.displayName = "MultiSelectCombobox";
+
+const SingleSelectInner = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      label,
+      error,
+      helpText,
+      errorId,
+      helpTextId,
+      labelId,
+      isDisabled,
+      required,
+      testIdPrefix,
+      effectiveItems,
+      labelForValue,
+      renderOption,
+      renderTrigger,
+      isSearchable,
+      searchPosition,
+      searchPlaceholder,
+      inputValue,
+      isAsync,
+      optionFilter,
+      isControlled,
+      currentValue,
+      handleValueChange,
+      handleInputValueChange,
+      handleClear,
+      autoHighlight,
+      showClearButton,
+      sizeConfig,
+      ariaDescribedBy,
+      resolvedOptions,
+      flatOptionsMap,
+      isGrouped,
+      isLoading,
+      showCreateOption,
+      hasMoreLazy,
+      loaderCallbackRef
+    } = useSelectState(props);
+    return /* @__PURE__ */ jsx(
+      SelectFieldWrapper,
+      {
+        id,
+        label,
+        error,
+        helpText,
+        errorId,
+        helpTextId,
+        isDisabled,
+        required,
+        testIdPrefix,
+        labelProps: props.labelProps,
+        className: props.className,
+        labelId,
+        focusTargetOnLabelClick: searchPosition === "content",
+        children: /* @__PURE__ */ jsx(
+          SelectCombobox,
+          {
+            ref,
+            name: props.name,
+            id,
+            labelId: label ? labelId : void 0,
+            effectiveItems,
+            labelForValue,
+            renderOption,
+            renderTrigger,
+            isSearchable,
+            searchPosition,
+            searchPlaceholder,
+            inputValue,
+            isAsync,
+            optionFilter,
+            isControlled,
+            valueProp: props.value,
+            defaultValue: props.defaultValue,
+            currentValue,
+            handleValueChange,
+            handleInputValueChange,
+            handleClear,
+            onOpenChange: props.onOpenChange,
+            isDisabled,
+            autoHighlight,
+            required,
+            isClearable: props.isClearable ?? false,
+            showClearButton,
+            sizeConfig,
+            error,
+            placeholder: props.placeholder ?? "",
+            ariaDescribedBy,
+            testIdPrefix,
+            inputClassName: props.inputClassName,
+            contentProps: props.contentProps,
+            dropdownProps: {
+              resolvedOptions,
+              flatOptionsMap,
+              isGrouped,
+              isLoading,
+              loadingMessage: props.loadingMessage ?? "Loading\u2026",
+              emptyMessage: props.emptyMessage ?? "No results found.",
+              showCreateOption,
+              hasMoreLazy,
+              loaderCallbackRef
+            },
+            children: props.children
+          }
+        )
+      }
+    );
+  }
+);
+SingleSelectInner.displayName = "SingleSelectInner";
+const MultiSelectInner = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      label,
+      error,
+      helpText,
+      errorId,
+      helpTextId,
+      labelId,
+      testIdPrefix,
+      effectiveItems,
+      labelForValue,
+      renderOption,
+      isSearchable,
+      searchPosition,
+      searchPlaceholder,
+      isAsync,
+      optionFilter,
+      isControlled,
+      selectedValues,
+      handleValueChange,
+      handleInputValueChange,
+      sizeConfig,
+      ariaDescribedBy,
+      resolvedOptions,
+      flatOptionsMap,
+      isGrouped,
+      isLoading,
+      showCreateOption,
+      hasMoreLazy,
+      loaderCallbackRef
+    } = useMultiSelectState(props);
+    const { isDisabled = false, required = false } = props;
+    return /* @__PURE__ */ jsx(
+      SelectFieldWrapper,
+      {
+        id,
+        label,
+        error,
+        helpText,
+        errorId,
+        helpTextId,
+        isDisabled,
+        required,
+        testIdPrefix,
+        labelProps: props.labelProps,
+        className: props.className,
+        labelId,
+        focusTargetOnLabelClick: searchPosition === "content",
+        children: /* @__PURE__ */ jsx(
+          MultiSelectCombobox,
+          {
+            ref,
+            name: props.name,
+            id,
+            labelId: label ? labelId : void 0,
+            effectiveItems,
+            labelForValue,
+            renderOption,
+            isSearchable,
+            searchPosition,
+            searchPlaceholder,
+            isAsync,
+            optionFilter,
+            isControlled,
+            valueProp: props.value,
+            defaultValue: props.defaultValue,
+            selectedValues,
+            handleValueChange,
+            handleInputValueChange,
+            onOpenChange: props.onOpenChange,
+            isDisabled,
+            autoHighlight: props.autoHighlight ?? true,
+            sizeConfig,
+            error,
+            chipsClassName: props.chipsClassName,
+            inputClassName: props.inputClassName,
+            placeholder: props.placeholder ?? "",
+            hideChipRemove: props.hideChipRemove ?? false,
+            ariaDescribedBy,
+            required,
+            testIdPrefix,
+            contentProps: props.contentProps,
+            dropdownProps: {
+              resolvedOptions,
+              flatOptionsMap,
+              isGrouped,
+              isLoading,
+              loadingMessage: props.loadingMessage ?? "Loading\u2026",
+              emptyMessage: props.emptyMessage ?? "No results found.",
+              showCreateOption,
+              hasMoreLazy,
+              loaderCallbackRef
+            },
+            children: props.children
+          }
+        )
+      }
+    );
+  }
+);
+MultiSelectInner.displayName = "MultiSelectInner";
+const Select = forwardRef((props, ref) => {
+  const {
+    getOptionValue,
+    getOptionLabel,
+    options,
+    defaultOptions,
+    loadOptions,
+    ...rest
+  } = props;
+  const hasAccessors = Boolean(getOptionValue || getOptionLabel);
+  const normalizedOptions = useMemo(
+    () => hasAccessors ? normalizeOptions(options, getOptionValue, getOptionLabel) : options,
+    [hasAccessors, options, getOptionValue, getOptionLabel]
+  );
+  const normalizedDefaultOptions = useMemo(() => {
+    if (!hasAccessors || !Array.isArray(defaultOptions)) {
+      return defaultOptions;
+    }
+    return defaultOptions.map(
+      (o) => normalizeOption(o, getOptionValue, getOptionLabel)
+    );
+  }, [hasAccessors, defaultOptions, getOptionValue, getOptionLabel]);
+  const normalizedLoadOptions = useMemo(() => {
+    if (!hasAccessors || !loadOptions) return loadOptions;
+    return async (input) => {
+      const result = await loadOptions(input);
+      return result.map(
+        (o) => normalizeOption(o, getOptionValue, getOptionLabel)
+      );
+    };
+  }, [hasAccessors, loadOptions, getOptionValue, getOptionLabel]);
+  const nextProps = {
+    ...rest,
+    options: normalizedOptions,
+    defaultOptions: normalizedDefaultOptions,
+    loadOptions: normalizedLoadOptions
+  };
+  if (nextProps.isMulti === true) {
+    return /* @__PURE__ */ jsx(MultiSelectInner, { ...nextProps, ref });
+  }
+  return /* @__PURE__ */ jsx(SingleSelectInner, { ...nextProps, ref });
+});
+Select.displayName = "Select";
+
+export { Select as S };
+//# sourceMappingURL=Select-CD5chrpw.js.map