@godxjp/ui 20.0.0 → 20.2.0

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

@@ -5,50 +5,67 @@ import { ChevronsUpDown, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useFieldIdentity, useFieldNameFallback } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
-import { controlTriggerClass } from "../../lib/control-styles.js";
+import { controlSurfaceTriggerClass } from "../../lib/control-styles.js";
+import {
+  applyMaxTagCount,
+  controlSurfaceAttrs,
+  resolveAllowClear,
+  resolveAriaInvalid
+} from "./control-surface.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Command, CommandGroup } from "./command.js";
 import { Input } from "./input.js";
 const DEBOUNCE_MS = 250;
-function SearchSelect({
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  options: staticOptions,
-  loadOptions,
-  renderOption,
-  labelRender,
-  selectedLabel,
-  selectedIcon,
-  placeholder,
-  searchPlaceholder,
-  emptyMessage,
-  loadingMessage,
-  errorMessage,
-  clearLabel,
-  clearable = true,
-  disabled = false,
-  readOnly = false,
-  size,
-  open: openProp,
-  onOpenChange,
-  search: searchProp,
-  onSearchChange,
-  filterOption,
-  renderError,
-  renderLoadMore,
-  name,
-  id,
-  className,
-  "data-testid": dataTestId,
-  "data-field": dataField,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  "aria-describedby": ariaDescribedby,
-  "aria-errormessage": ariaErrorMessage,
-  "aria-invalid": ariaInvalid,
-  "aria-required": ariaRequired
-}) {
+function SearchSelect(props) {
+  const {
+    options: staticOptions,
+    loadOptions,
+    renderOption,
+    labelRender,
+    selectedLabel,
+    selectedIcon,
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    loadingMessage,
+    errorMessage,
+    clearLabel,
+    clearable = true,
+    disabled = false,
+    readOnly = false,
+    size,
+    status,
+    variant,
+    loading: loadingProp = false,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    search: searchProp,
+    onSearchChange,
+    filterOption,
+    filterSort,
+    autoClearSearchValue = true,
+    optionRender,
+    menuItemSelectedIcon,
+    notFoundContent,
+    popupMatchSelectWidth = true,
+    allowClear,
+    onClear,
+    renderError,
+    renderLoadMore,
+    name,
+    id,
+    className,
+    "data-testid": dataTestId,
+    "data-field": dataField,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-errormessage": ariaErrorMessage,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired
+  } = props;
+  const multiple = props.mode === "multiple";
   const { t } = useTranslation();
   const nameFallback = useFieldNameFallback({
     "aria-label": ariaLabel,
@@ -62,7 +79,7 @@ function SearchSelect({
   const reactId = React.useId();
   const listId = `${reactId}-listbox`;
   const optionDomId = (optionValue) => `${reactId}-opt-${optionValue}`;
-  const [internalOpen, setInternalOpen] = React.useState(false);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
   const isOpenControlled = openProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const setOpen = React.useCallback(
@@ -89,22 +106,34 @@ function SearchSelect({
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState(false);
   const [activeIndex, setActiveIndex] = React.useState(0);
-  const [picked, setPicked] = React.useState(null);
-  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
-  const isControlled = valueProp !== void 0;
-  const value = isControlled ? valueProp : internalValue;
+  const [pickedOptions, setPickedOptions] = React.useState(
+    {}
+  );
+  const [internalValue, setInternalValue] = React.useState(
+    props.defaultValue ?? (props.mode === "multiple" ? [] : "")
+  );
+  const isControlled = props.value !== void 0;
+  const rawValue = isControlled ? props.value : internalValue;
+  const values = React.useMemo(() => {
+    if (!multiple) return [];
+    return Array.isArray(rawValue) ? rawValue : rawValue ? [rawValue] : [];
+  }, [multiple, rawValue]);
+  const value = multiple ? "" : Array.isArray(rawValue) ? rawValue[0] ?? "" : rawValue;
+  const isSelected = (optionValue) => multiple ? values.includes(optionValue) : value === optionValue;
+  const hasSelection = multiple ? values.length > 0 : Boolean(value);
   const reqId = React.useRef(0);
   const resolvedLoad = React.useMemo(
     () => loadOptions ?? (async ({ query: search }) => {
       const needle = search.trim();
       const list = staticOptions ?? [];
       const matches = (option) => filterOption ? filterOption(option, needle) : option.label.toLowerCase().includes(needle.toLowerCase()) || option.value.toLowerCase().includes(needle.toLowerCase());
+      const kept = needle ? list.filter(matches) : list;
       return {
-        options: needle ? list.filter(matches) : list,
+        options: filterSort ? [...kept].sort((a, b) => filterSort(a, b, { searchValue: needle })) : kept,
         hasMore: false
       };
     }),
-    [loadOptions, staticOptions, filterOption]
+    [loadOptions, staticOptions, filterOption, filterSort]
   );
   React.useEffect(() => {
     const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
@@ -163,20 +192,59 @@ function SearchSelect({
     [grouped]
   );
   const resolvedPlaceholder = placeholder ?? t("dataEntry.searchSelect.placeholder");
-  const selectedOption = value ? [picked, ...staticOptions ?? [], ...loaded].find((option) => option?.value === value) ?? null : null;
+  const optionFor = (optionValue) => pickedOptions[optionValue] ?? (staticOptions ?? []).find((option) => option.value === optionValue) ?? loaded.find((option) => option.value === optionValue) ?? null;
+  const selectedOption = value ? optionFor(value) : null;
   const currentLabel = value ? selectedOption?.label ?? selectedLabel ?? value : resolvedPlaceholder;
   const currentIcon = value ? selectedOption?.icon ?? selectedIcon : null;
+  const selectedChips = multiple ? values.map((entry) => ({
+    value: entry,
+    label: optionFor(entry)?.label ?? entry
+  })) : [];
+  const {
+    visible: visibleChips,
+    omitted: omittedChips,
+    overflow: chipOverflow
+  } = applyMaxTagCount(
+    selectedChips,
+    props.mode === "multiple" ? props.maxTagCount : void 0,
+    props.mode === "multiple" ? props.maxTagPlaceholder : void 0
+  );
+  const maxCount = props.mode === "multiple" ? props.maxCount : void 0;
+  const atMaxCount = maxCount !== void 0 && values.length >= maxCount;
+  const remember = (option) => setPickedOptions((prev) => ({ ...prev, [option.value]: option }));
   const select = (option) => {
     if (option.disabled) return;
-    setPicked(option);
+    if (props.mode === "multiple") {
+      const already = values.includes(option.value);
+      if (!already && atMaxCount) return;
+      const next = already ? values.filter((entry) => entry !== option.value) : [...values, option.value];
+      remember(option);
+      if (!isControlled) setInternalValue(next);
+      props.onValueChange?.(
+        next,
+        next.map((entry) => entry === option.value ? option : optionFor(entry)).filter((entry) => entry !== null)
+      );
+      if (already) props.onDeselect?.(option.value, option);
+      else props.onSelect?.(option.value, option);
+      if (autoClearSearchValue) setQuery("");
+      return;
+    }
+    remember(option);
     if (!isControlled) setInternalValue(option.value);
-    onValueChange?.(option.value, option);
+    props.onValueChange?.(option.value, option);
+    props.onSelect?.(option.value, option);
+    if (autoClearSearchValue) setQuery("");
     setOpen(false);
   };
   const clear = () => {
-    setPicked(null);
-    if (!isControlled) setInternalValue("");
-    onValueChange?.("", void 0);
+    if (props.mode === "multiple") {
+      if (!isControlled) setInternalValue([]);
+      props.onValueChange?.([], []);
+    } else {
+      if (!isControlled) setInternalValue("");
+      props.onValueChange?.("", void 0);
+    }
+    onClear?.();
     setOpen(false);
   };
   const onScroll = (event) => {
@@ -226,7 +294,13 @@ function SearchSelect({
   const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
   const activeOption = flatOrdered[activeIndex];
   const activeOptionId = activeOption ? optionDomId(activeOption.value) : void 0;
-  const showClear = clearable && Boolean(value) && !disabled && !readOnly;
+  const clearControl = resolveAllowClear(
+    allowClear,
+    clearable,
+    clearLabel ?? t("dataEntry.searchSelect.clear")
+  );
+  const showClear = clearControl.enabled && hasSelection && !disabled && !readOnly && !loadingProp;
+  const surface = controlSurfaceAttrs({ variant, status, size });
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs(
       Popover,
@@ -235,7 +309,7 @@ function SearchSelect({
         onOpenChange: (next) => {
           if (readOnly && next) return;
           setOpen(next);
-          if (!next) setQuery("");
+          if (!next && autoClearSearchValue) setQuery("");
         },
         children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -244,22 +318,24 @@ function SearchSelect({
               id,
               type: "button",
               role: "combobox",
-              "data-size": size === "md" ? void 0 : size,
+              ...surface,
               "aria-expanded": open,
               "aria-controls": open ? listId : void 0,
               "aria-label": triggerAriaLabel,
               "aria-labelledby": triggerAriaLabelledby,
               "aria-describedby": ariaDescribedby,
               "aria-errormessage": ariaErrorMessage,
-              "aria-invalid": ariaInvalid,
+              "aria-invalid": resolveAriaInvalid(ariaInvalid, status),
               "aria-required": ariaRequired,
               "aria-readonly": readOnly || void 0,
+              "aria-busy": loadingProp || void 0,
               disabled,
               "data-testid": dataTestId,
               "data-field": resolvedField,
-              "data-value": value || void 0,
+              "data-value": (multiple ? values.join(",") : value) || void 0,
+              "data-mode": multiple ? "multiple" : void 0,
               className: cn(
-                controlTriggerClass,
+                controlSurfaceTriggerClass,
                 "w-full justify-start",
                 // Reserve trailing room for the single clear-or-chevron overlay rendered below.
                 "ui-control-trigger-affixed"
@@ -269,9 +345,36 @@ function SearchSelect({
                 {
                   className: cn(
                     "ui-search-select-option-body text-start",
-                    !value && "text-muted-foreground"
+                    !hasSelection && "text-muted-foreground"
                   ),
-                  children: value && labelRender ? labelRender({ value, label: currentLabel, option: selectedOption ?? void 0 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  children: multiple ? hasSelection ? (
+                    // Labels, not removable chips: the trigger IS a <button>, and a per-label remove
+                    // button inside it would be a button nested in a button (invalid HTML →
+                    // hydration error). Removal is a second click on the row, or the clear ✕.
+                    /* @__PURE__ */ jsxs("span", { className: "ui-search-select-values", "data-slot": "search-select-values", children: [
+                      visibleChips.map((chip) => /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "ui-search-select-value",
+                          "data-slot": "search-select-value",
+                          children: labelRender ? labelRender({
+                            value: chip.value,
+                            label: chip.label,
+                            option: optionFor(chip.value) ?? void 0
+                          }) : chip.label
+                        },
+                        chip.value
+                      )),
+                      omittedChips.length > 0 ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "ui-search-select-value",
+                          "data-slot": "search-select-value-overflow",
+                          children: chipOverflow ?? t("dataEntry.selection.overflow", { count: omittedChips.length })
+                        }
+                      ) : null
+                    ] })
+                  ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: resolvedPlaceholder }) : value && labelRender ? labelRender({ value, label: currentLabel, option: selectedOption ?? void 0 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     currentIcon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: currentIcon }) : null,
                     /* @__PURE__ */ jsx("span", { className: "truncate", children: currentLabel })
                   ] })
@@ -279,7 +382,7 @@ function SearchSelect({
               )
             }
           ) }),
-          resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null,
+          resolvedName ? multiple ? values.map((entry) => /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: entry, readOnly: true }, entry)) : /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null,
           /* @__PURE__ */ jsx(
             PopoverContent,
             {
@@ -289,6 +392,10 @@ function SearchSelect({
               sideOffset: 4,
               collisionPadding: 12,
               className: "ui-search-select-panel",
+              "data-popup-match": popupMatchSelectWidth === true ? void 0 : popupMatchSelectWidth === false ? "content" : "fixed",
+              style: typeof popupMatchSelectWidth === "number" ? {
+                "--search-select-panel-inline-size": `${popupMatchSelectWidth}px`
+              } : void 0,
               children: /* @__PURE__ */ jsxs(Command, { value, shouldFilter: false, className: "ui-search-select-command", children: [
                 /* @__PURE__ */ jsx("div", { className: "ui-search-select-search", children: /* @__PURE__ */ jsx(
                   Input,
@@ -310,38 +417,50 @@ function SearchSelect({
                   {
                     id: listId,
                     role: "listbox",
+                    "aria-multiselectable": multiple || void 0,
                     "aria-busy": loading,
                     className: "ui-search-select-list",
                     onScroll,
                     children: [
                       grouped.map((group) => {
-                        const rows = group.items.map(({ option, index }) => /* @__PURE__ */ jsx(
+                        const rows = group.items.map(({ option, index }) => /* @__PURE__ */ jsxs(
                           "div",
                           {
                             id: optionDomId(option.value),
                             role: "option",
                             "data-testid": optionTestId(option.value),
-                            "aria-selected": value === option.value,
-                            "aria-disabled": option.disabled || void 0,
-                            "data-disabled": option.disabled || void 0,
+                            "aria-selected": isSelected(option.value),
+                            "aria-disabled": option.disabled || atMaxCount && !isSelected(option.value) || void 0,
+                            "data-disabled": option.disabled || atMaxCount && !isSelected(option.value) || void 0,
                             className: cn(
                               "ui-command-item",
                               // Selected = persistent bg-accent + medium weight (NO check icon — saves width),
                               // matching the plain SelectItem's `data-[state=checked]` convention; active =
                               // hover/keyboard accent. Same bg so selection stays coherent across both Selects.
-                              value === option.value && "bg-accent text-foreground font-medium",
+                              isSelected(option.value) && "bg-accent text-foreground font-medium",
                               activeIndex === index && "bg-accent text-accent-foreground"
                             ),
                             onMouseEnter: () => !option.disabled && setActiveIndex(index),
                             onMouseDown: (event) => event.preventDefault(),
                             onClick: () => select(option),
-                            children: renderOption ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-body", children: [
-                              option.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: option.icon }) : null,
-                              /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-text", children: [
-                                /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-label", children: option.label }),
-                                option.sublabel ? /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-sublabel", children: option.sublabel }) : null
-                              ] })
-                            ] })
+                            children: [
+                              optionRender ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: optionRender(option, { index }) }) : renderOption ? /* @__PURE__ */ jsx("div", { className: "ui-search-select-option-slot", children: renderOption(option) }) : /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-body", children: [
+                                option.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: option.icon }) : null,
+                                /* @__PURE__ */ jsxs("div", { className: "ui-search-select-option-text", children: [
+                                  /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-label", children: option.label }),
+                                  option.sublabel ? /* @__PURE__ */ jsx("span", { className: "ui-search-select-option-sublabel", children: option.sublabel }) : null
+                                ] })
+                              ] }),
+                              menuItemSelectedIcon && isSelected(option.value) ? /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  "data-slot": "search-select-selected-icon",
+                                  className: "ui-search-select-selected-icon",
+                                  "aria-hidden": "true",
+                                  children: menuItemSelectedIcon
+                                }
+                              ) : null
+                            ]
                           },
                           option.value
                         ));
@@ -372,7 +491,7 @@ function SearchSelect({
                           "aria-disabled": "true",
                           "aria-selected": false,
                           className: "ui-search-select-placeholder",
-                          children: emptyMessage ?? t("dataEntry.searchSelect.empty")
+                          children: notFoundContent ?? emptyMessage ?? t("dataEntry.searchSelect.empty")
                         }
                       ) : null
                     ]
@@ -398,15 +517,27 @@ function SearchSelect({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: showClear ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "ui-control-affix", children: loadingProp ? (
+      // antd `loading` — the FIELD is in flight (the form is still resolving this value), which
+      // is a different claim from the list-level spinner inside the panel. It takes the affix
+      // seat so the two can never both animate in the same place.
+      /* @__PURE__ */ jsx(
+        Loader2,
+        {
+          "data-slot": "search-select-loading",
+          className: "ui-control-affix-icon ui-control-affix-indicator animate-spin",
+          "aria-hidden": "true"
+        }
+      )
+    ) : showClear ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        "aria-label": clearLabel ?? t("dataEntry.searchSelect.clear"),
+        "aria-label": clearControl.label,
         "data-testid": optionTestId("clear"),
         className: "ui-control-affix-action",
         onClick: clear,
-        children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
+        children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
       }
     ) : /* @__PURE__ */ jsx(
       ChevronsUpDown,

package/dist/components/data-entry/select.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlWidthProp } from "../../props/vocabulary/shared.prop.js";
+import type { ControlStatusProp, ControlVariantProp, ControlWidthProp, SizeProp } from "../../props/vocabulary/index.js";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
 import type { SelectDataProp } from "../../props/components/data-entry.prop.js";
@@ -20,7 +20,12 @@ export declare function Select(props: SelectProp): React.JSX.Element;
 export declare function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
 export declare function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
 export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    size?: "sm" | "md";
+    /** Control height tier — the shared `--control-height` ladder (antd `size`). */
+    size?: SizeProp;
+    /** Control surface (antd `variant`). Default `outlined`. */
+    variant?: ControlVariantProp;
+    /** Validation status (antd `status`). `error` also sets `aria-invalid`. */
+    status?: ControlStatusProp;
     /**
      * `full` (default) fills the field column — right inside a FormField. `auto` sizes to the
      * selected label — right in a PageContainer `extra` slot, a toolbar or a footer row, where a
@@ -45,7 +50,20 @@ export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectP
 } & React.RefAttributes<HTMLButtonElement>>;
 export declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * How the popup sizes against its trigger — the DOM half of antd `popupMatchSelectWidth`.
+     * Absent = the trigger's width is the floor (antd's `true`); `content` releases that floor;
+     * `fixed` pins both edges to `--select-content-inline-size`.
+     */
+    "data-popup-match"?: "content" | "fixed";
+} & React.RefAttributes<HTMLDivElement>>;
 export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * antd `menuItemSelectedIcon` — a decorative mark on the picked row. Off by default: this
+     * library marks the picked row with fill + weight, which costs no width.
+     */
+    selectedIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;