@firecms/ui 3.2.0 → 3.3.0-canary.451aa49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.2.0",
+  "version": "3.3.0-canary.451aa49",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -114,7 +114,7 @@
     "index.css",
     "tailwind.config.js"
   ],
-  "gitHead": "4c3b8f2c16265fcdd6bf443cf5b420a7a7332d9d",
+  "gitHead": "772b4a7f64893038f0cc13669d6bc66ec858fc49",
   "publishConfig": {
     "access": "public"
   }

package/src/components/BooleanSwitchWithLabel.tsx

@@ -18,6 +18,7 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     fullWidth?: boolean,
     className?: string,
     inputClassName?: string,
+    switchAdornment?: React.ReactNode,
 };
 
 /**
@@ -37,6 +38,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                                                                           className,
                                                                           fullWidth = true,
                                                                           inputClassName,
+                                                                          switchAdornment,
                                                                           ...props
                                                                       }: BooleanSwitchWithLabelProps) {
 
@@ -100,6 +102,8 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 {...props}
             />
 
+            {switchAdornment}
+
             <div className={cls(
                 "flex-grow",
                 position === "end" ? "mr-4" : "ml-4",

package/src/components/Button.tsx

@@ -28,6 +28,7 @@ const ButtonInner = React.memo(React.forwardRef<
        fullWidth = false,
        component: Component,
        color = "neutral",
+       loading,
        ...props
    }: ButtonProps<any>, ref) => {
 
@@ -63,7 +64,7 @@ const ButtonInner = React.memo(React.forwardRef<
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": variant === "text" && disabled,
         "border border-surface-500 opacity-50": variant === "outlined" && disabled,
-        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": variant === "filled" && disabled,
+        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-70 bg-surface-300/70 dark:bg-surface-500/70": variant === "filled" && disabled,
     });
 
     const sizeClasses = cls(

package/src/components/Chip.tsx

@@ -29,7 +29,7 @@ const sizeClassNames = {
 /**
  * @group Preview components
  */
-export function Chip({
+export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function Chip({
                          children,
                          colorScheme,
                          error,
@@ -39,11 +39,12 @@ export function Chip({
                          size = "large",
                          className,
                          style
-                     }: ChipProps) {
+                     }: ChipProps, ref) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
+            ref={ref}
             className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 "items-center",
@@ -67,4 +68,4 @@ export function Chip({
             {icon}
         </div>
     );
-}
+});

package/src/components/MultiSelect.tsx

@@ -90,6 +90,7 @@ export const MultiSelect = React.forwardRef<
             open,
             onOpenChange,
             portalContainer,
+            endAdornment,
         },
         ref
     ) => {
@@ -269,7 +270,7 @@ export const MultiSelect = React.forwardRef<
                                         })}
                                     </div>
                                     <div className="flex items-center justify-between">
-                                        {includeClear && <CloseIcon
+                                        {includeClear && !endAdornment && <CloseIcon
                                             className={"ml-4"}
                                             size={"small"}
                                             onClick={(event) => {
@@ -277,6 +278,14 @@ export const MultiSelect = React.forwardRef<
                                                 handleClear();
                                             }}
                                         />}
+                                        {endAdornment && (
+                                            <div className="ml-4 flex items-center" onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }}>
+                                                {endAdornment}
+                                            </div>
+                                        )}
                                         <div className={cls("px-2 h-full flex items-center")}>
                                             <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
                                                 className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
@@ -288,9 +297,19 @@ export const MultiSelect = React.forwardRef<
                                     <span className="text-sm">
                                         {placeholder}
                                     </span>
-                                    <div className={cls("px-2 h-full flex items-center")}>
-                                        <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                            className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
+                                    <div className="flex items-center justify-between">
+                                        {endAdornment && (
+                                            <div className="ml-4 flex items-center" onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }}>
+                                                {endAdornment}
+                                            </div>
+                                        )}
+                                        <div className={cls("px-2 h-full flex items-center")}>
+                                            <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
+                                                className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
+                                        </div>
                                     </div>
                                 </div>
                             )}

package/src/components/ResizablePanels.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cls } from "../util";
+
+export type ResizablePanelsProps = {
+    firstPanel: React.ReactNode;
+    secondPanel: React.ReactNode;
+    /** Whether the first panel is visible (e.g. Sidebar) */
+    showFirstPanel?: boolean;
+    /** Whether the second panel is visible (e.g. Results) */
+    showSecondPanel?: boolean;
+    /** 0-100 representing the width/height of the first panel */
+    panelSizePercent: number;
+    onPanelSizeChange: (sizePercent: number) => void;
+    minPanelSizePx?: number;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+};
+
+export function ResizablePanels({
+    firstPanel,
+    secondPanel,
+    showFirstPanel = true,
+    showSecondPanel = true,
+    panelSizePercent,
+    onPanelSizeChange,
+    minPanelSizePx = 200,
+    orientation = 'horizontal',
+    className
+}: ResizablePanelsProps) {
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const isResizingRef = useRef(false);
+
+    // For local layout tracking without triggering React rerenders during drag
+    const firstPanelRef = useRef<HTMLDivElement>(null);
+    const startPosRef = useRef(0);
+    const startSizeRef = useRef(0);
+
+    const [isResizing, setIsResizing] = useState(false);
+    const isHorizontal = orientation === 'horizontal';
+
+    const handleResizeStart = useCallback((e: React.MouseEvent) => {
+        if (!showFirstPanel || !showSecondPanel) return;
+
+        e.preventDefault();
+        isResizingRef.current = true;
+        setIsResizing(true);
+
+        startPosRef.current = isHorizontal ? e.clientX : e.clientY;
+
+        if (firstPanelRef.current) {
+            const rect = firstPanelRef.current.getBoundingClientRect();
+            startSizeRef.current = isHorizontal ? rect.width : rect.height;
+        }
+
+        document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+    }, [isHorizontal, showFirstPanel, showSecondPanel]);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isResizingRef.current || !containerRef.current) return;
+
+            const currentPos = isHorizontal ? e.clientX : e.clientY;
+            const delta = currentPos - startPosRef.current; // Dragging right/down increases first panel size
+
+            let newSize = startSizeRef.current + delta;
+
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const containerTotal = isHorizontal ? containerRect.width : containerRect.height;
+
+            // Limit the maximum size to prevent pushing the second panel offscreen
+            const maxSize = containerTotal - minPanelSizePx;
+
+            newSize = Math.max(minPanelSizePx, Math.min(newSize, maxSize));
+
+            // Directly update the DOM for performance while dragging
+            if (firstPanelRef.current) {
+                if (isHorizontal) {
+                    firstPanelRef.current.style.width = `${newSize}px`;
+                } else {
+                    firstPanelRef.current.style.height = `${newSize}px`;
+                }
+            }
+        };
+
+        const handleMouseUp = () => {
+            if (isResizingRef.current && containerRef.current && firstPanelRef.current) {
+                isResizingRef.current = false;
+                setIsResizing(false);
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+
+                // Calculate the final percentage and notify parent
+                const containerRect = containerRef.current.getBoundingClientRect();
+                const firstPanelRect = firstPanelRef.current.getBoundingClientRect();
+
+                const containerSize = isHorizontal ? containerRect.width : containerRect.height;
+                const finalSize = isHorizontal ? firstPanelRect.width : firstPanelRect.height;
+
+                if (containerSize > 0) {
+                    const newPercent = (finalSize / containerSize) * 100;
+                    onPanelSizeChange(Math.max(0, Math.min(100, newPercent)));
+                }
+            }
+        };
+
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [onPanelSizeChange, isHorizontal, minPanelSizePx]);
+
+    // Calculate applied size
+    const appliedBasis = !showFirstPanel ? "0%" : (showSecondPanel ? `${panelSizePercent}%` : "100%");
+
+    return (
+        <div
+            ref={containerRef}
+            className={cls(
+                "relative w-full h-full flex overflow-hidden",
+                isHorizontal ? "flex-row" : "flex-col",
+                className
+            )}
+        >
+            {/* First Panel */}
+            <div
+                ref={firstPanelRef}
+                className={cls(
+                    "relative flex-shrink-0 flex flex-col overflow-hidden",
+                    !showFirstPanel && "hidden"
+                )}
+                style={{
+                    width: isHorizontal ? appliedBasis : "100%",
+                    height: !isHorizontal ? appliedBasis : "100%",
+                    minWidth: isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
+                    minHeight: !isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
+                    maxWidth: showSecondPanel ? undefined : "100%",
+                    maxHeight: showSecondPanel ? undefined : "100%",
+                }}
+            >
+                {firstPanel}
+            </div>
+
+            {/* Divider */}
+            {showFirstPanel && showSecondPanel && (
+                <div
+                    className={cls(
+                        "relative z-10 flex flex-shrink-0 items-center justify-center",
+                        isHorizontal ? "w-px h-full cursor-col-resize" : "h-px w-full cursor-row-resize"
+                    )}
+                    onMouseDown={handleResizeStart}
+                >
+                    {/* Transparent Hit Area with Pill inside */}
+                    <div className={cls(
+                        "absolute flex items-center justify-center group",
+                        isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"
+                    )}>
+                        <div className={cls(
+                            "bg-primary/60 dark:bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200",
+                            isHorizontal ? "w-1 h-8" : "h-1 w-8"
+                        )} />
+                    </div>
+                </div>
+            )}
+
+            {/* Second Panel */}
+            <div
+                className={cls(
+                    "flex-grow relative flex flex-col overflow-hidden min-w-0 min-h-0",
+                    !showSecondPanel && "hidden"
+                )}
+            >
+                {secondPanel}
+            </div>
+        </div>
+    );
+}

package/src/components/SearchableSelect.tsx

@@ -0,0 +1,335 @@
+"use client";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cls } from "../util";
+import { CheckIcon, KeyboardArrowDownIcon } from "../icons";
+import { Separator } from "./Separator";
+import {
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled
+} from "../styles";
+import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export interface SearchableSelectProps {
+    /** Currently selected value. Can be one of the items or a custom string. */
+    value?: string;
+    /** Callback when the value changes (from selection or custom input). */
+    onValueChange?: (value: string) => void;
+    /** Placeholder shown when no value is selected. */
+    placeholder?: string;
+    /** Label above the field. */
+    label?: React.ReactNode | string;
+    /** Size variant. */
+    size?: "smallest" | "small" | "medium" | "large";
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Whether to show an error state. */
+    error?: boolean;
+    /** Whether to use the invisible (borderless) style. */
+    invisible?: boolean;
+    /** CSS class for the trigger button. */
+    className?: string;
+    /** CSS class for the trigger input area. */
+    inputClassName?: string;
+    /** Render the selected value in a custom way in the trigger. */
+    renderValue?: (value: string) => React.ReactNode;
+    /** Whether the popover should trap focus. */
+    modalPopover?: boolean;
+    /** If true, allow accepting the typed text as the value even if it doesn't match an item. */
+    allowCustomValues?: boolean;
+    /** Portal container element. */
+    portalContainer?: HTMLElement | null;
+    /** If true, auto-open the popover on mount so the user can start typing immediately. */
+    autoFocus?: boolean;
+    /** The option items — use SearchableSelectItem. */
+    children: React.ReactNode;
+}
+
+export interface SearchableSelectItemProps {
+    value: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export const SearchableSelect = React.forwardRef<
+    HTMLButtonElement,
+    SearchableSelectProps
+>(
+    (
+        {
+            value,
+            onValueChange,
+            placeholder = "Select...",
+            label,
+            size = "large",
+            disabled,
+            error,
+            invisible,
+            className,
+            inputClassName,
+            renderValue,
+            modalPopover = false,
+            allowCustomValues = true,
+            portalContainer,
+            autoFocus,
+            children,
+        },
+        ref
+    ) => {
+        const [isMounted, setIsMounted] = useState(false);
+        const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+        const [search, setSearch] = useState("");
+        const inputRef = useRef<HTMLInputElement>(null);
+
+        const contextContainer = usePortalContainer();
+        const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
+        useEffect(() => {
+            setIsMounted(true);
+        }, []);
+
+        // Auto-open popover on mount when autoFocus is true
+        useEffect(() => {
+            if (autoFocus && isMounted) {
+                onPopoverOpenChange(true);
+            }
+        }, [autoFocus, isMounted]);
+
+        // Collect all item values + labels from children
+        const itemsMap = React.useMemo(() => {
+            const map = new Map<string, React.ReactNode>();
+            React.Children.forEach(children, (child) => {
+                if (React.isValidElement<SearchableSelectItemProps>(child) && child.props.value != null) {
+                    map.set(String(child.props.value), child.props.children ?? child.props.value);
+                }
+            });
+            return map;
+        }, [children]);
+
+        const onPopoverOpenChange = (open: boolean) => {
+            setIsPopoverOpen(open);
+            if (open) {
+                // Pre-fill search with current value for easy editing
+                setSearch(value ?? "");
+                // Focus the input after popover opens
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }
+        };
+
+        const handleSelect = (selectedValue: string) => {
+            onValueChange?.(selectedValue);
+            setIsPopoverOpen(false);
+            setSearch("");
+        };
+
+        const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter" && allowCustomValues) {
+                const trimmed = search.trim();
+                if (trimmed) {
+                    // If cmdk found no match, accept custom value
+                    // If there are matches, cmdk will handle selecting the highlighted one
+                    // We check if the current search is NOT one of the items
+                    const isExistingItem = itemsMap.has(trimmed);
+                    if (!isExistingItem) {
+                        e.preventDefault();
+                        handleSelect(trimmed);
+                    }
+                }
+            } else if (e.key === "Escape") {
+                setIsPopoverOpen(false);
+            }
+        };
+
+        // Resolve display label for the trigger
+        const displayLabel = React.useMemo(() => {
+            if (!value) return null;
+            if (renderValue) return renderValue(value);
+            const itemLabel = itemsMap.get(value);
+            if (itemLabel) return itemLabel;
+            return <span className="text-sm">{value}</span>;
+        }, [value, renderValue, itemsMap]);
+
+        useInjectStyles("SearchableSelect", `
+[cmdk-group] {
+  max-height: 45vh;
+  overflow-y: auto;
+}`);
+
+        return (
+            <div>
+                {label && (
+                    typeof label === "string"
+                        ? <div className={cls("text-sm font-medium ml-3.5 mb-1",
+                            error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300",
+                        )}>{label}</div>
+                        : label
+                )}
+
+                <PopoverPrimitive.Root
+                    open={isMounted && isPopoverOpen}
+                    onOpenChange={onPopoverOpenChange}
+                    modal={modalPopover}
+                >
+                    <PopoverPrimitive.Trigger asChild>
+                        <button
+                            ref={ref}
+                            disabled={disabled}
+                            onClick={() => !disabled && onPopoverOpenChange(!isPopoverOpen)}
+                            className={cls(
+                                {
+                                    "min-h-[28px]": size === "smallest",
+                                    "min-h-[32px]": size === "small",
+                                    "min-h-[44px]": size === "medium",
+                                    "min-h-[64px]": size === "large",
+                                },
+                                {
+                                    "py-0.5": size === "smallest",
+                                    "py-1": size === "small",
+                                    "py-2": size === "medium" || size === "large",
+                                },
+                                {
+                                    "px-2": size === "small" || size === "smallest",
+                                    "px-4": size === "medium" || size === "large",
+                                },
+                                "select-none rounded-md text-sm w-full text-start",
+                                "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none",
+                                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                                "relative flex items-center",
+                                className,
+                                inputClassName
+                            )}
+                        >
+                            <div className="flex items-center justify-between w-full gap-1">
+                                <div className="flex-grow min-w-0 truncate">
+                                    {displayLabel ?? (
+                                        <span className="text-sm text-surface-accent-500 dark:text-surface-accent-400">
+                                            {placeholder}
+                                        </span>
+                                    )}
+                                </div>
+                                <div className={cls("flex-shrink-0 flex items-center")}>
+                                    <KeyboardArrowDownIcon
+                                        size={size === "large" ? "medium" : "small"}
+                                        className={cls("transition", isPopoverOpen ? "rotate-180" : "")}
+                                    />
+                                </div>
+                            </div>
+                        </button>
+                    </PopoverPrimitive.Trigger>
+                    <PopoverPrimitive.Portal container={finalContainer}>
+                        <PopoverPrimitive.Content
+                            className={cls(
+                                "z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg",
+                                defaultBorderMixin
+                            )}
+                            align="start"
+                            sideOffset={4}
+                            style={{ width: "var(--radix-popover-trigger-width)", minWidth: 180 }}
+                            onEscapeKeyDown={() => onPopoverOpenChange(false)}
+                        >
+                            <CommandPrimitive shouldFilter={true}>
+                                <div className="flex flex-row items-center">
+                                    <CommandPrimitive.Input
+                                        ref={inputRef}
+                                        value={search}
+                                        onValueChange={setSearch}
+                                        className={cls(
+                                            focusedDisabled,
+                                            "bg-transparent outline-none flex-1 h-full w-full text-surface-accent-900 dark:text-white",
+                                            {
+                                                "m-2 text-xs": size === "smallest" || size === "small",
+                                                "m-3 text-sm": size === "medium" || size === "large",
+                                            },
+                                        )}
+                                        placeholder="Search..."
+                                        onKeyDown={handleInputKeyDown}
+                                    />
+                                </div>
+                                <Separator orientation="horizontal" className="my-0" />
+                                <CommandPrimitive.List>
+                                    {allowCustomValues && search.trim() && !itemsMap.has(search.trim()) ? (
+                                        <CommandPrimitive.Empty
+                                            className="px-3 py-2 text-xs cursor-pointer text-primary hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800"
+                                            onClick={() => handleSelect(search.trim())}
+                                        >
+                                            Use &ldquo;{search.trim()}&rdquo;
+                                        </CommandPrimitive.Empty>
+                                    ) : (
+                                        <CommandPrimitive.Empty className="px-3 py-2 text-xs text-text-secondary dark:text-text-secondary-dark">
+                                            No results found.
+                                        </CommandPrimitive.Empty>
+                                    )}
+                                    <CommandPrimitive.Group>
+                                        {React.Children.map(children, (child) => {
+                                            if (!React.isValidElement<SearchableSelectItemProps>(child)) return child;
+                                            const itemValue = child.props.value;
+                                            const isSelected = String(value) === String(itemValue);
+                                            return (
+                                                <CommandPrimitive.Item
+                                                    key={String(itemValue)}
+                                                    value={String(itemValue)}
+                                                    onMouseDown={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                    }}
+                                                    onSelect={() => handleSelect(String(itemValue))}
+                                                    className={cls(
+                                                        "flex flex-row items-center gap-1.5",
+                                                        isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "",
+                                                        "cursor-pointer",
+                                                        "m-0.5",
+                                                        "ring-offset-transparent",
+                                                        "p-1.5 rounded",
+                                                        "aria-[selected=true]:outline-none",
+                                                        "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+                                                        "text-surface-accent-700 dark:text-surface-accent-300",
+                                                        child.props.className
+                                                    )}
+                                                >
+                                                    <div className={cls(
+                                                        "w-4 h-4 flex items-center justify-center flex-shrink-0",
+                                                        isSelected ? "text-primary" : "text-transparent",
+                                                    )}>
+                                                        {isSelected && <CheckIcon size={14} />}
+                                                    </div>
+                                                    {child.props.children ?? child.props.value}
+                                                </CommandPrimitive.Item>
+                                            );
+                                        })}
+                                    </CommandPrimitive.Group>
+                                </CommandPrimitive.List>
+                            </CommandPrimitive>
+                        </PopoverPrimitive.Content>
+                    </PopoverPrimitive.Portal>
+                </PopoverPrimitive.Root>
+            </div>
+        );
+    }
+);
+
+SearchableSelect.displayName = "SearchableSelect";
+
+// ─── Item ───────────────────────────────────────────────────────────────────
+
+/**
+ * A single option inside a SearchableSelect.
+ * The `value` prop is the string value that gets selected.
+ * The `children` is what's displayed in the dropdown.
+ * This component is not rendered directly — SearchableSelect reads its props.
+ */
+export function SearchableSelectItem(_props: SearchableSelectItemProps) {
+    // Rendered by SearchableSelect, not by React
+    return null;
+}