@godxjp/ui 21.0.0 → 23.0.0

package/dist/components/data-entry/select.js

@@ -1,71 +1,230 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown, ChevronUp, Loader2, X } from "lucide-react";
+import {
+  Button as AriaButton,
+  ButtonContext,
+  Header as AriaHeader,
+  ListBox,
+  ListBoxItem,
+  ListBoxSection,
+  Popover as AriaPopover,
+  Select as AriaSelect,
+  SelectStateContext,
+  SelectValue as AriaSelectValue,
+  Separator as AriaSeparator
+} from "react-aria-components";
+import { ChevronDown, Loader2, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { controlSurfaceTriggerClass } from "../../lib/control-styles.js";
 import { controlSurfaceAttrs, resolveAllowClear, resolveAriaInvalid } from "./control-surface.js";
-import { useInertHiddenBackground } from "../general/inert-background.js";
 import {
   mergeAriaIds,
   useFieldIdentity,
-  omitFieldA11y,
   pickFieldA11y,
   useFieldNameFallback
 } from "../../lib/field-a11y.js";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
+import { radixSurfaceState, toPlacement } from "../navigation/dropdown-menu.js";
 import { SearchSelect } from "./search-select.js";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { normalizeSelectOptions } from "../../lib/select-options.js";
 function isDataSelect(props) {
   return "options" in props || "loadOptions" in props;
 }
 const SelectFieldA11yContext = React.createContext(null);
+function toKey(value) {
+  if (value === void 0) return void 0;
+  return value === "" ? null : value;
+}
+function splitDomProps(props) {
+  const events = {};
+  const attributes = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (/^on[A-Z]/.test(key)) events[key] = value;
+    else attributes[key] = value;
+  }
+  return { events, attributes };
+}
+function itemTextValue(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(itemTextValue).join("");
+  if (React.isValidElement(node)) {
+    return itemTextValue(node.props.children);
+  }
+  return "";
+}
+function SelectRoot({
+  id,
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  dir,
+  name,
+  autoComplete,
+  disabled,
+  isDisabled,
+  required,
+  form,
+  allowsEmptyCollection,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  children
+}) {
+  void dir;
+  return /* @__PURE__ */ jsx(
+    AriaSelect,
+    {
+      "data-slot": "select",
+      className: "ui-select-root",
+      id,
+      value: toKey(value),
+      defaultValue: toKey(defaultValue) ?? void 0,
+      onChange: (key) => {
+        if (key != null) onValueChange?.(String(key));
+      },
+      isOpen: open,
+      defaultOpen,
+      onOpenChange,
+      isDisabled: disabled || isDisabled,
+      isRequired: required,
+      name,
+      form,
+      autoComplete,
+      allowsEmptyCollection,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      children
+    }
+  );
+}
 function Select(props) {
   if (isDataSelect(props)) {
+    if (props.labelInValue) return /* @__PURE__ */ jsx(LabelInValueSelect, { ...props });
     return /* @__PURE__ */ jsx(DataSelect, { ...props });
   }
   return /* @__PURE__ */ jsx(CompoundSelect, { ...props });
 }
-function CompoundSelect({ id, ...props }) {
-  const fieldA11y = pickFieldA11y(props);
-  const rootProps = omitFieldA11y(props);
-  const [uncontrolled, setUncontrolled] = React.useState(props.defaultValue);
-  const value = props.value ?? uncontrolled;
-  const identity = useFieldIdentity({
-    id,
-    name: props.name,
-    "data-field": fieldA11y["data-field"]
+function LabelInValueSelect({
+  labelInValue,
+  value,
+  defaultValue,
+  onValueChange,
+  onSelect,
+  ...rest
+}) {
+  void labelInValue;
+  const multiple = rest.mode === "multiple" || rest.mode === "tags";
+  const onDeselect = rest.onDeselect;
+  const entries = React.useMemo(() => {
+    const current = value ?? defaultValue;
+    if (current == null) return [];
+    return Array.isArray(current) ? current : [current];
+  }, [value, defaultValue]);
+  const options = React.useMemo(() => {
+    const base = normalizeSelectOptions(rest.options, rest.fieldNames);
+    const known = new Set(base.map((option) => option.value));
+    const carried = entries.filter((entry) => entry && !known.has(entry.value)).map((entry) => ({ value: entry.value, label: itemTextValue(entry.label) || entry.value }));
+    return carried.length ? [...base, ...carried] : base;
+  }, [rest.options, rest.fieldNames, entries]);
+  const toLabeled = (picked, option) => ({
+    value: picked,
+    // The OPTION's label wins when the row is known; the label that rode in on the value is the
+    // fallback for the row that has not loaded.
+    label: option?.label ?? entries.find((entry) => entry.value === picked)?.label ?? picked
   });
+  const shared = {
+    ...rest,
+    options,
+    fieldNames: void 0,
+    onSelect: onSelect ? (picked, option) => onSelect(
+      toLabeled(picked, option),
+      option
+    ) : void 0
+  };
+  if (multiple) {
+    const labeledValues = value;
+    const labeledDefaults = defaultValue;
+    const adapted2 = {
+      ...shared,
+      value: labeledValues?.map((entry) => entry.value),
+      defaultValue: labeledDefaults?.map((entry) => entry.value),
+      onValueChange: (picked, pickedOptions) => onValueChange?.(
+        picked.map(
+          (entry) => toLabeled(
+            entry,
+            pickedOptions?.find((option) => option.value === entry)
+          )
+        ),
+        pickedOptions
+      ),
+      onDeselect: onDeselect ? (picked, option) => onDeselect(toLabeled(picked, option), option) : void 0
+    };
+    return /* @__PURE__ */ jsx(DataSelect, { ...adapted2 });
+  }
+  const labeledValue = value;
+  const labeledDefault = defaultValue;
+  const adapted = {
+    ...shared,
+    value: value === void 0 ? void 0 : labeledValue?.value ?? "",
+    defaultValue: labeledDefault?.value,
+    onValueChange: (picked, option) => onValueChange?.(picked ? toLabeled(picked, option) : void 0, option)
+  };
+  return /* @__PURE__ */ jsx(DataSelect, { ...adapted });
+}
+function CompoundSelect({ id, name, ...props }) {
+  const fieldA11y = pickFieldA11y(props);
+  const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
   return /* @__PURE__ */ jsx(
     SelectFieldA11yContext.Provider,
     {
       value: {
         ...fieldA11y,
         "data-field": identity["data-field"] ?? fieldA11y["data-field"],
-        id,
-        value
+        id
       },
       children: /* @__PURE__ */ jsx(
-        SelectPrimitive.Root,
+        SelectRoot,
         {
-          "data-slot": "select",
-          ...rootProps,
-          name: props.name ?? identity.name,
-          onValueChange: (next) => {
-            setUncontrolled(next);
-            props.onValueChange?.(next);
-          }
+          ...props,
+          id,
+          name: name ?? identity.name,
+          "aria-label": fieldA11y["aria-label"],
+          "aria-labelledby": fieldA11y["aria-labelledby"]
         }
       )
     }
   );
 }
-function SelectGroup(props) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
-}
-function SelectValue(props) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+function SelectGroup({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ListBoxSection,
+    {
+      "data-slot": "select-group",
+      className,
+      ...splitDomProps(props).attributes,
+      children
+    }
+  );
 }
+const SelectValue = React.forwardRef(function SelectValue2({ placeholder, children, asChild, className, style, ...props }, ref) {
+  void asChild;
+  return /* @__PURE__ */ jsx(
+    AriaSelectValue,
+    {
+      ref,
+      "data-slot": "select-value",
+      className: className ?? "",
+      style,
+      ...props,
+      children: ({ isPlaceholder, defaultChildren }) => isPlaceholder ? placeholder ?? null : children ?? defaultChildren
+    }
+  );
+});
 const SelectTrigger = React.forwardRef(
   ({
     className,
@@ -75,25 +234,28 @@ const SelectTrigger = React.forwardRef(
     status,
     width = "full",
     showIndicator = true,
+    disabled,
+    asChild,
+    style,
     ...props
   }, ref) => {
+    void asChild;
     const field = React.useContext(SelectFieldA11yContext);
+    const state = React.useContext(SelectStateContext);
+    const ariaTrigger = React.useContext(ButtonContext);
     const ownsName = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
     const fieldOwnsName = field?.["aria-label"] !== void 0 || field?.["aria-labelledby"] !== void 0;
     const nameFallback = useFieldNameFallback({
       "aria-label": ownsName ? props["aria-label"] : field?.["aria-label"],
       "aria-labelledby": ownsName ? props["aria-labelledby"] : field?.["aria-labelledby"]
     });
-    const fieldA11y = field || nameFallback["aria-labelledby"] !== void 0 ? {
-      id: props.id ?? field?.id,
+    const hasField = Boolean(field) || nameFallback["aria-labelledby"] !== void 0;
+    const fieldA11y = hasField ? {
       ...ownsName ? {} : fieldOwnsName ? {
         "aria-label": field?.["aria-label"],
         "aria-labelledby": field?.["aria-labelledby"]
       } : nameFallback,
-      "aria-describedby": mergeAriaIds(
-        props["aria-describedby"],
-        field?.["aria-describedby"]
-      ),
+      "aria-describedby": mergeAriaIds(props["aria-describedby"], field?.["aria-describedby"]),
       "aria-errormessage": mergeAriaIds(
         props["aria-errormessage"],
         field?.["aria-errormessage"]
@@ -105,147 +267,277 @@ const SelectTrigger = React.forwardRef(
       ),
       "data-field": props["data-field"] ?? field?.["data-field"]
     } : { "aria-invalid": resolveAriaInvalid(props["aria-invalid"], status) };
-    const dataValue = (props["data-value"] ?? field?.value) || void 0;
-    return /* @__PURE__ */ jsxs(
-      SelectPrimitive.Trigger,
+    const id = props.id ?? (hasField ? field?.id : void 0);
+    const isOpen = state?.isOpen ?? false;
+    const buttonRef = React.useRef(null);
+    const composedRef = React.useCallback(
+      (node) => {
+        buttonRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const wasOpen = React.useRef(false);
+    React.useEffect(() => {
+      if (!wasOpen.current || isOpen) {
+        wasOpen.current = isOpen;
+        return;
+      }
+      wasOpen.current = isOpen;
+      const button = buttonRef.current;
+      if (!button) return;
+      const restore = button.ownerDocument.defaultView?.setTimeout(() => {
+        const owner = button.ownerDocument;
+        if (!button.isConnected) return;
+        if (owner.activeElement === null || owner.activeElement === owner.body) button.focus();
+      }, 0);
+      return () => {
+        if (restore !== void 0) button.ownerDocument.defaultView?.clearTimeout(restore);
+      };
+    }, [isOpen]);
+    const selected = state ? state.value : null;
+    const hasValue = selected != null && selected !== "";
+    const dataValue = (props["data-value"] ?? (hasValue ? String(selected) : void 0)) || void 0;
+    const { events, attributes } = splitDomProps(props);
+    delete attributes.id;
+    const triggerContext = React.useMemo(() => {
+      if (!ariaTrigger || "slots" in ariaTrigger) return ariaTrigger;
+      const next = { ...ariaTrigger };
+      delete next["aria-labelledby"];
+      return next;
+    }, [ariaTrigger]);
+    return /* @__PURE__ */ jsx(ButtonContext.Provider, { value: triggerContext, children: /* @__PURE__ */ jsxs(
+      AriaButton,
       {
-        ref,
-        "data-slot": "select-trigger",
-        "data-size": size,
-        "data-variant": controlSurfaceAttrs({ variant })["data-variant"],
-        "data-status": status,
-        "data-width": width,
+        ref: composedRef,
+        id,
+        onPointerDown: (event) => {
+          event.currentTarget.focus();
+        },
+        ...events,
+        isDisabled: disabled || void 0,
+        style,
         className: cn(
           controlSurfaceTriggerClass,
           // `bounded` deliberately emits NO width utility: its width is owned by the
           // `[data-width="bounded"]` rule in control.css. A utility here would win the layer order
           // and make that rule — and therefore the token — dead, the way `w-full` did to
-          // `.ui-app-setting-picker-icon` (gh#366, gh#371).
+          // `.ui-app-setting-picker-icon`'s `inline-size` (gh#366, gh#371).
           width === "auto" && "w-auto",
           width === "full" && "w-full",
           "aria-invalid:border-destructive data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground whitespace-nowrap transition-[color,box-shadow] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
           className
         ),
-        ...props,
-        ...fieldA11y,
-        "data-value": dataValue,
+        render: (domProps) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...domProps,
+            ...attributes,
+            ...fieldA11y,
+            role: "combobox",
+            "aria-autocomplete": "none",
+            "data-slot": "select-trigger",
+            "data-size": size,
+            "data-variant": controlSurfaceAttrs({ variant })["data-variant"],
+            "data-status": status,
+            "data-width": width,
+            "data-state": isOpen ? "open" : "closed",
+            "data-placeholder": hasValue ? void 0 : "",
+            "data-value": dataValue
+          }
+        ),
         children: [
           children,
-          showIndicator ? /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+          showIndicator ? /* @__PURE__ */ jsx(
             ChevronDown,
             {
               "data-slot": "select-chevron",
               className: "ui-select-chevron",
               "aria-hidden": "true"
             }
-          ) }) : null
+          ) : null
         ]
       }
-    );
+    ) });
   }
 );
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref,
-    "data-slot": "select-scroll-up-button",
-    className: cn("ui-select-scroll-button", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "ui-select-scroll-icon", "aria-hidden": "true" })
+SelectTrigger.displayName = "SelectTrigger";
+const SelectScrollUpButton = React.forwardRef(
+  function SelectScrollUpButton2(props, ref) {
+    void props;
+    void ref;
+    return null;
   }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref,
-    "data-slot": "select-scroll-down-button",
-    className: cn("ui-select-scroll-button", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "ui-select-scroll-icon", "aria-hidden": "true" })
+);
+const SelectScrollDownButton = React.forwardRef(
+  function SelectScrollDownButton2(props, ref) {
+    void props;
+    void ref;
+    return null;
   }
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
-  const contentRef = useInertHiddenBackground(ref);
-  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-    SelectPrimitive.Content,
+);
+const SELECT_PLACEMENT = {
+  bottomStart: { side: "bottom", align: "start" },
+  bottomEnd: { side: "bottom", align: "end" },
+  topStart: { side: "top", align: "start" },
+  topEnd: { side: "top", align: "end" }
+};
+const SelectPopup = React.forwardRef(function SelectPopup2({
+  className,
+  children,
+  style,
+  side,
+  sideOffset = 4,
+  align = "start",
+  alignOffset,
+  avoidCollisions,
+  collisionPadding,
+  position,
+  sticky,
+  hideWhenDetached,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  forceMount,
+  renderEmpty,
+  placement,
+  popupRender,
+  listHeight,
+  onPopupScroll,
+  "data-popup-match": popupMatch,
+  ...props
+}, ref) {
+  void position;
+  void sticky;
+  void hideWhenDetached;
+  void onCloseAutoFocus;
+  void onEscapeKeyDown;
+  void onPointerDownOutside;
+  void forceMount;
+  const portalContainer = useOverlayPortalContainer();
+  const { events, attributes } = splitDomProps(props);
+  const anchor = placement ? SELECT_PLACEMENT[placement] : void 0;
+  const list = /* @__PURE__ */ jsx(
+    ListBox,
     {
-      ref: contentRef,
-      "data-slot": "select-content",
+      "data-slot": "select-viewport",
+      className: "ui-select-viewport",
+      ...events,
+      onScroll: onPopupScroll,
+      renderEmptyState: renderEmpty === void 0 ? void 0 : () => /* @__PURE__ */ jsx("div", { "data-slot": "select-empty", className: "ui-select-empty", children: renderEmpty }),
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    AriaPopover,
+    {
+      ref,
+      UNSTABLE_portalContainer: portalContainer,
+      placement: toPlacement(side ?? anchor?.side, align ?? anchor?.align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: collisionPadding,
+      style: listHeight === void 0 ? style : { ...style, "--select-content-max-height": `${listHeight}px` },
       className: cn(
         "ui-select-content data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" && "translate-y-1",
         className
       ),
-      position,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      render: (popoverProps, popoverState) => (
+        // `role={undefined}`: a listbox is not a dialog — see the file note (3).
         /* @__PURE__ */ jsx(
-          SelectPrimitive.Viewport,
+          "div",
           {
-            "data-slot": "select-viewport",
-            className: cn(
-              "ui-select-viewport",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full",
-              // The trigger-width floor is a UTILITY, so no `[data-popup-match]` rule in control.css
-              // could ever lift it (gh#366). It is therefore WITHHELD whenever the consumer stated a
-              // width of their own — which is exactly what antd's `popupMatchSelectWidth` is for.
-              position === "popper" && !props["data-popup-match"] && "min-w-[var(--radix-select-trigger-width)]"
-            ),
-            children
+            ...popoverProps,
+            ...attributes,
+            role: void 0,
+            ...radixSurfaceState(popoverState),
+            "data-slot": "select-content",
+            "data-popup-match": popupMatch
           }
-        ),
-        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-      ]
+        )
+      ),
+      children: popupRender ? popupRender(list) : list
     }
-  ) });
+  );
 });
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Label,
-  {
-    ref,
-    "data-slot": "select-label",
-    className: cn("ui-select-label", className),
-    ...props
+const SelectContent = React.forwardRef(
+  function SelectContent2(props, ref) {
+    return /* @__PURE__ */ jsx(SelectPopup, { ref, ...props });
   }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, selectedIcon, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref,
-    "data-slot": "select-item",
-    className: cn("ui-select-item [&_svg:not([class*='text-'])]:text-muted-foreground", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
-      selectedIcon ? /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          "data-slot": "select-item-selected-icon",
-          className: "ui-search-select-selected-icon",
-          "aria-hidden": "true",
-          children: selectedIcon
-        }
-      ) }) : null
-    ]
+);
+const SelectLabel = React.forwardRef(
+  function SelectLabel2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      AriaHeader,
+      {
+        ref,
+        "data-slot": "select-label",
+        className: cn("ui-select-label", className),
+        ...props
+      }
+    );
   }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    "data-slot": "select-separator",
-    className: cn("ui-select-separator", className),
-    ...props
+);
+const SelectItem = React.forwardRef(function SelectItem2({ className, children, selectedIcon, value, disabled, textValue, asChild, ...props }, ref) {
+  void asChild;
+  const { events, attributes } = splitDomProps(props);
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      ref,
+      id: value,
+      textValue: textValue ?? (itemTextValue(children) || value),
+      isDisabled: disabled,
+      ...events,
+      className: cn(
+        "ui-select-item [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      render: (itemProps, itemState) => (
+        // The Radix `data-*` vocabulary control.css reads (`[data-state="checked"]`,
+        // `[data-highlighted]`), translated from react-aria's state.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...itemProps,
+            ...attributes,
+            "data-slot": "select-item",
+            "data-state": itemState.isSelected ? "checked" : "unchecked",
+            "data-highlighted": itemState.isFocused ? "" : void 0,
+            "data-disabled": itemState.isDisabled ? "" : void 0
+          }
+        )
+      ),
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        selectedIcon && isSelected ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "select-item-selected-icon",
+            className: "ui-search-select-selected-icon",
+            "aria-hidden": "true",
+            children: selectedIcon
+          }
+        ) : null
+      ] })
+    }
+  );
+});
+const SelectSeparator = React.forwardRef(
+  function SelectSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      AriaSeparator,
+      {
+        ref,
+        "data-slot": "select-separator",
+        className: cn("ui-select-separator", className),
+        ...splitDomProps(props).attributes
+      }
+    );
   }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+);
 function groupDataOptions(options) {
   const order = [];
   const buckets = /* @__PURE__ */ new Map();
@@ -259,11 +551,19 @@ function groupDataOptions(options) {
   }
   return order.map((key) => ({ heading: key || void 0, items: buckets.get(key) ?? [] }));
 }
+function DataSelectLabel({
+  labelRender,
+  options
+}) {
+  const state = React.useContext(SelectStateContext);
+  const selected = state ? state.value : null;
+  if (selected == null || selected === "") return null;
+  const value = String(selected);
+  const option = options.find((entry) => entry.value === value);
+  return /* @__PURE__ */ jsx(Fragment, { children: labelRender({ value, label: option?.label ?? value, option }) });
+}
 function DataSelect(props) {
   const { t } = useTranslation();
-  const [uncontrolledValue, setUncontrolledValue] = React.useState(
-    typeof props.defaultValue === "string" ? props.defaultValue : void 0
-  );
   const identity = useFieldIdentity({
     id: props.id,
     name: props.name,
@@ -271,15 +571,33 @@ function DataSelect(props) {
   });
   const resolvedName = props.name ?? identity.name;
   const resolvedField = props["data-field"] ?? identity["data-field"];
-  const options = props.options ?? [];
+  const options = React.useMemo(
+    () => normalizeSelectOptions(props.options, props.fieldNames),
+    [props.options, props.fieldNames]
+  );
   const hasOptions = options.length > 0;
-  const searchable = props.showSearch ?? (Boolean(props.loadOptions) || props.mode === "multiple");
-  if (props.mode === "multiple" || searchable) {
+  const showSearchConfig = typeof props.showSearch === "object" && props.showSearch !== null ? props.showSearch : void 0;
+  const showSearch = showSearchConfig ? true : props.showSearch;
+  const searchable = showSearch ?? (Boolean(props.loadOptions) || props.mode !== void 0);
+  if (props.mode !== void 0 || searchable) {
+    const antdFilter = showSearchConfig?.filterOption;
+    const filterOption = antdFilter === void 0 ? props.filterOption : antdFilter === false ? () => true : antdFilter === true ? void 0 : (option, query) => antdFilter(query, option);
+    const onSearch = showSearchConfig?.onSearch;
     return /* @__PURE__ */ jsx(
       SearchSelect,
       {
         ...props,
         options,
+        fieldNames: void 0,
+        filterOption,
+        filterSort: showSearchConfig?.filterSort ?? props.filterSort,
+        optionFilterProp: showSearchConfig?.optionFilterProp ?? props.optionFilterProp,
+        search: showSearchConfig?.searchValue ?? props.search,
+        onSearchChange: onSearch || props.onSearchChange ? (query) => {
+          onSearch?.(query);
+          props.onSearchChange?.(query);
+        } : void 0,
+        autoClearSearchValue: showSearchConfig?.autoClearSearchValue ?? props.autoClearSearchValue,
         disabled: props.disabled || !props.loadOptions && !hasOptions,
         name: resolvedName,
         "data-field": resolvedField
@@ -298,6 +616,7 @@ function DataSelect(props) {
     size,
     status,
     variant,
+    width,
     loading,
     open,
     defaultOpen,
@@ -309,12 +628,18 @@ function DataSelect(props) {
     value,
     defaultValue,
     onValueChange,
+    labelRender,
+    prefix,
+    suffixIcon,
+    placement,
+    popupRender,
+    listHeight,
+    onPopupScroll,
     id,
     className,
     "data-testid": dataTestId,
     ...rest
   } = props;
-  const currentValue = value ?? uncontrolledValue;
   const ariaProps = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
@@ -326,6 +651,7 @@ function DataSelect(props) {
       SelectItem,
       {
         value: option.value,
+        textValue: option.label,
         disabled: option.disabled,
         "data-testid": optionTestId(option.value),
         selectedIcon: menuItemSelectedIcon,
@@ -344,60 +670,68 @@ function DataSelect(props) {
   const showClear = canClear && Boolean(value);
   const showEmptyPopup = !hasOptions && notFoundContent !== void 0;
   const select = /* @__PURE__ */ jsxs(
-    SelectPrimitive.Root,
+    SelectRoot,
     {
-      "data-slot": "select",
       value: isControlled ? value : void 0,
       defaultValue: isControlled ? void 0 : defaultValue || void 0,
       onValueChange: (next) => {
-        setUncontrolledValue(next);
         onValueChange?.(
           next,
           options.find((option) => option.value === next)
         );
       },
       disabled: disabled || !hasOptions && !showEmptyPopup,
+      allowsEmptyCollection: showEmptyPopup,
+      "aria-label": ariaProps["aria-label"],
+      "aria-labelledby": ariaProps["aria-labelledby"],
       name: resolvedName,
       open,
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           SelectTrigger,
           {
             id,
             "data-testid": dataTestId,
             "data-field": resolvedField,
-            "data-value": currentValue || void 0,
             size,
             variant,
             status,
+            width,
             "aria-busy": loading || void 0,
             className: cn(
+              prefix === void 0 || prefix === null ? void 0 : "ui-select-trigger-prefixed",
               (showClear || loading) && "ui-control-trigger-affixed",
               canClear || loading ? void 0 : className
             ),
-            showIndicator: !showClear && !loading,
+            showIndicator: suffixIcon === void 0 && !showClear && !loading,
             ...ariaProps,
-            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+            children: [
+              prefix === void 0 || prefix === null ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-prefix", className: "ui-select-prefix", children: prefix }),
+              /* @__PURE__ */ jsx(SelectValue, { placeholder, children: labelRender ? /* @__PURE__ */ jsx(DataSelectLabel, { labelRender, options }) : void 0 }),
+              suffixIcon === void 0 || suffixIcon === null || showClear || loading ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-suffix", className: "ui-select-suffix", "aria-hidden": "true", children: suffixIcon })
+            ]
           }
         ),
-        /* @__PURE__ */ jsxs(
-          SelectContent,
+        /* @__PURE__ */ jsx(
+          SelectPopup,
           {
+            renderEmpty: showEmptyPopup ? notFoundContent : void 0,
+            placement,
+            popupRender,
+            listHeight,
+            onPopupScroll,
             "data-popup-match": popupMatchSelectWidth === void 0 || popupMatchSelectWidth === true ? void 0 : popupMatchSelectWidth === false ? "content" : "fixed",
             style: typeof popupMatchSelectWidth === "number" ? {
               "--select-content-inline-size": `${popupMatchSelectWidth}px`
             } : void 0,
-            children: [
-              showEmptyPopup ? /* @__PURE__ */ jsx("div", { "data-slot": "select-empty", className: "ui-select-empty", children: notFoundContent }) : null,
-              groupDataOptions(options).map(
-                (group) => group.heading ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
-                  /* @__PURE__ */ jsx(SelectLabel, { children: group.heading }),
-                  group.items.map(renderItem)
-                ] }, group.heading) : /* @__PURE__ */ jsx(React.Fragment, { children: group.items.map(renderItem) }, "__ungrouped")
-              )
-            ]
+            children: groupDataOptions(options).map(
+              (group) => group.heading ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
+                /* @__PURE__ */ jsx(SelectLabel, { children: group.heading }),
+                group.items.map(renderItem)
+              ] }, group.heading) : /* @__PURE__ */ jsx(React.Fragment, { children: group.items.map(renderItem) }, "__ungrouped")
+            )
           }
         )
       ]