@bsol-oss/react-datatable5 12.0.0-beta.83 → 12.0.0-beta.85

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Tooltip as Tooltip$1, Group, InputElement, Icon, EmptyState as EmptyState$2, VStack, List, Table as Table$1, Checkbox as Checkbox$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Image, Alert, Field as Field$1, Popover, Tabs, NumberInput, Show, RadioCard, CheckboxGroup, Center, Heading, Skeleton } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Tooltip as Tooltip$1, Group, InputElement, Icon, EmptyState as EmptyState$2, VStack, List, Table as Table$1, Checkbox as Checkbox$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, NumberInput, Show, RadioCard, CheckboxGroup, Center, Heading, Skeleton } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, useEffect, useRef, forwardRef } from 'react';
+import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo, forwardRef } from 'react';
 import { LuX, LuCheck, LuChevronRight, LuSearch, LuImage, LuFile } from 'react-icons/lu';
 import { MdOutlineSort, MdFilterAlt, MdSearch, MdOutlineChecklist, MdClear, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdDateRange } from 'react-icons/md';
 import { FaUpDown, FaGripLinesVertical, FaTrash } from 'react-icons/fa6';
@@ -21,7 +21,7 @@ import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { IoReload } from 'react-icons/io5';
 import { useDebounce } from '@uidotdev/usehooks';
 import { BsExclamationCircleFill, BsClock } from 'react-icons/bs';
-import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
+import { HiColorSwatch } from 'react-icons/hi';
 import { flexRender, createColumnHelper, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel } from '@tanstack/react-table';
 import { GrAscend, GrDescend } from 'react-icons/gr';
 import { useTranslation } from 'react-i18next';
@@ -555,7 +555,7 @@ const PaginationItems = (props) => {
             return page.type === "ellipsis" ? (jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
         }) }));
 };
-const PaginationPageText = React.forwardRef(function PaginationPageText(props, ref) {
+React.forwardRef(function PaginationPageText(props, ref) {
     const { format = "compact", ...rest } = props;
     const { page, totalPages, pageRange, count } = usePaginationContext();
     const content = React.useMemo(() => {
@@ -4156,16 +4156,6 @@ const DateRangePicker = ({ column, schema, prefix, }) => {
                                 }, monthsToDisplay: 2 })] }) })] }) }));
 };
 
-function filterArray(array, searchTerm) {
-    // Convert the search term to lower case for case-insensitive comparison
-    const lowerCaseSearchTerm = searchTerm.toLowerCase();
-    // Use the filter method to return an array of matching items
-    return array.filter((item) => {
-        // Convert each item to a string and check if it includes the search term
-        return item.toString().toLowerCase().includes(lowerCaseSearchTerm);
-    });
-}
-
 const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { enumPickerLabels } = useSchemaContext();
@@ -4173,89 +4163,74 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
     const { required, variant } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
-    const [searchText, setSearchText] = useState();
-    const [limit, setLimit] = useState(10);
-    const [openSearchResult, setOpenSearchResult] = useState();
-    const ref = useRef(null);
     const colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
     const dataList = schema.enum ?? [];
-    const count = schema.enum?.length ?? 0;
-    const isDirty = (searchText?.length ?? 0) > 0;
-    const onSearchChange = async (event) => {
-        setSearchText(event.target.value);
-        setLimit(10);
+    // Current value for combobox (array format)
+    const currentValue = isMultiple
+        ? watchEnums.filter((val) => val != null && val !== '')
+        : watchEnum
+            ? [watchEnum]
+            : [];
+    // Transform enum data for combobox collection
+    const comboboxItems = useMemo(() => {
+        return dataList.map((item) => ({
+            label: !!renderDisplay === true
+                ? String(renderDisplay(item))
+                : formI18n.t(item),
+            value: item,
+        }));
+    }, [dataList, renderDisplay, formI18n]);
+    // Use filter hook for combobox
+    const { contains } = useFilter({ sensitivity: 'base' });
+    // Create collection for combobox
+    const { collection, filter } = useListCollection({
+        initialItems: comboboxItems,
+        itemToString: (item) => item.label,
+        itemToValue: (item) => item.value,
+        filter: contains,
+    });
+    // Handle input value change (search)
+    const handleInputValueChange = (details) => {
+        filter(details.inputValue);
+    };
+    // Handle value change
+    const handleValueChange = (details) => {
+        if (isMultiple) {
+            setValue(colLabel, details.value);
+        }
+        else {
+            setValue(colLabel, details.value[0] || '');
+        }
     };
     if (variant === 'radio') {
         return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-            gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsx(RadioGroup$1.Root, { defaultValue: "1", children: jsx(HStack, { gap: "6", children: filterArray(dataList, searchText ?? '').map((item) => {
-                        return (jsxs(RadioGroup$1.Item, { onClick: () => {
-                                if (!isMultiple) {
-                                    setOpenSearchResult(false);
-                                    setValue(colLabel, item);
-                                    return;
-                                }
-                                const newSet = new Set([...(watchEnums ?? []), item]);
-                                setValue(colLabel, [...newSet]);
-                            }, value: item, children: [jsx(RadioGroup$1.ItemHiddenInput, {}), jsx(RadioGroup$1.ItemIndicator, {}), jsx(RadioGroup$1.ItemText, { children: !!renderDisplay === true
+            gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsx(RadioGroup$1.Root, { value: !isMultiple ? watchEnum : undefined, onValueChange: (details) => {
+                    if (!isMultiple) {
+                        setValue(colLabel, details.value);
+                    }
+                }, children: jsx(HStack, { gap: "6", children: dataList.map((item) => {
+                        return (jsxs(RadioGroup$1.Item, { value: item, children: [jsx(RadioGroup$1.ItemHiddenInput, {}), jsx(RadioGroup$1.ItemIndicator, {}), jsx(RadioGroup$1.ItemText, { children: !!renderDisplay === true
                                         ? renderDisplay(item)
                                         : formI18n.t(item) })] }, `${colLabel}-${item}`));
                     }) }) }) }));
     }
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [isMultiple && (jsxs(Flex, { flexFlow: 'wrap', gap: 1, children: [watchEnums.map((enumValue) => {
-                        const item = enumValue;
-                        if (!!item === false) {
-                            return jsx(Fragment, {});
-                        }
-                        return (jsx(Tag, { size: "lg", closable: true, onClick: () => {
-                                setValue(column, watchEnums.filter((id) => id != item));
-                            }, children: !!renderDisplay === true
-                                ? renderDisplay(item)
-                                : formI18n.t(item) }, item));
-                    }), jsx(Tag, { size: "lg", cursor: 'pointer', onClick: () => {
-                            setOpenSearchResult(true);
-                        }, children: enumPickerLabels?.addMore ?? formI18n.t('add_more') }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsx(Button, { variant: 'outline', onClick: () => {
-                    setOpenSearchResult(true);
-                }, justifyContent: 'start', children: !!watchEnum === false ? '' : formI18n.t(watchEnum ?? 'null') })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start' }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsx(Input, { placeholder: enumPickerLabels?.typeToSearch ?? formI18n.t('type_to_search'), onChange: (event) => {
-                                        onSearchChange(event);
-                                        setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${count}, ${enumPickerLabels?.showing ?? formI18n.t('showing')} ${limit}` })), jsxs(Grid, { overflow: 'auto', maxHeight: '20rem', children: [jsx(Flex, { flexFlow: 'column wrap', children: dataList
-                                                .filter((item) => {
-                                                const searchTerm = (searchText || '').toLowerCase();
-                                                if (!searchTerm)
-                                                    return true;
-                                                // Check if the original enum value contains the search text
-                                                const enumValueMatch = item
-                                                    .toLowerCase()
-                                                    .includes(searchTerm);
-                                                // Check if the display value (translation) contains the search text
-                                                const displayValue = !!renderDisplay === true
-                                                    ? renderDisplay(item)
-                                                    : formI18n.t(item);
-                                                // Convert to string and check if it includes the search term
-                                                const displayValueString = String(displayValue).toLowerCase();
-                                                const displayValueMatch = displayValueString.includes(searchTerm);
-                                                return enumValueMatch || displayValueMatch;
-                                            })
-                                                .map((item) => {
-                                                const selected = isMultiple
-                                                    ? watchEnums.some((enumValue) => item === enumValue)
-                                                    : watchEnum == item;
-                                                return (jsx(Box, { cursor: 'pointer', onClick: () => {
-                                                        if (!isMultiple) {
-                                                            setOpenSearchResult(false);
-                                                            setValue(colLabel, item);
-                                                            return;
-                                                        }
-                                                        const newSet = new Set([...(watchEnums ?? []), item]);
-                                                        setValue(colLabel, [...newSet]);
-                                                    }, ...(selected ? { color: 'colorPalette.400/50' } : {}), children: !!renderDisplay === true
-                                                        ? renderDisplay(item)
-                                                        : formI18n.t(item) }, `${colLabel}-${item}`));
-                                            }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: enumPickerLabels?.emptySearchResult ??
-                                                    formI18n.t('empty_search_result') })) }))] })] }) })] })] }));
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [isMultiple && currentValue.length > 0 && (jsx(Flex, { flexFlow: 'wrap', gap: 1, mb: 2, children: currentValue.map((enumValue) => {
+                    if (!enumValue) {
+                        return null;
+                    }
+                    return (jsx(Tag, { size: "lg", closable: true, onClick: () => {
+                            const newValue = currentValue.filter((val) => val !== enumValue);
+                            setValue(colLabel, newValue);
+                        }, children: !!renderDisplay === true
+                            ? renderDisplay(enumValue)
+                            : formI18n.t(enumValue) }, enumValue));
+                }) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: enumPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxs(Combobox.IndicatorGroup, { children: [!isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
+                                            setValue(colLabel, '');
+                                        } })), jsx(Combobox.Trigger, {})] })] }), jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ??
+                                            formI18n.t('empty_search_result') })) : (jsx(Fragment, { children: collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value))) }))] }) }) })] })] }));
 };
 
 function isEnteringWindow(_ref) {
@@ -4624,13 +4599,13 @@ function formatBytes(bytes) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 }
 
-const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, enabled = true, multiple = false, onFileSelect, selectedFileId: controlledSelectedFileId, onSelectedFileIdChange, }) => {
+const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, enabled = true, multiple = false, onFileSelect, selectedFile: controlledSelectedFile, onSelectedFileChange, }) => {
     const [searchTerm, setSearchTerm] = useState('');
-    const [internalSelectedFileId, setInternalSelectedFileId] = useState(multiple ? [] : '');
+    const [internalSelectedFile, setInternalSelectedFile] = useState(multiple ? [] : undefined);
     const [failedImageIds, setFailedImageIds] = useState(new Set());
-    // Use controlled or internal state for selectedFileId
-    const selectedFileId = controlledSelectedFileId ?? internalSelectedFileId;
-    const setSelectedFileId = onSelectedFileIdChange ?? setInternalSelectedFileId;
+    // Use controlled or internal state for selectedFile
+    const selectedFile = controlledSelectedFile ?? internalSelectedFile;
+    const setSelectedFile = onSelectedFileChange ?? setInternalSelectedFile;
     const { data: filesData, isLoading, isError, } = useQuery({
         queryKey: ['file-picker-library', searchTerm],
         queryFn: async () => {
@@ -4645,23 +4620,23 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
     const filteredFiles = filterImageOnly
         ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
         : files;
-    const handleFileClick = (fileId) => {
+    const handleFileClick = (file) => {
         if (multiple) {
-            const currentSelection = Array.isArray(selectedFileId)
-                ? selectedFileId
-                : [];
-            const newSelection = currentSelection.includes(fileId)
-                ? currentSelection.filter((id) => id !== fileId)
-                : [...currentSelection, fileId];
-            setSelectedFileId(newSelection);
+            const currentSelection = Array.isArray(selectedFile) ? selectedFile : [];
+            const isAlreadySelected = currentSelection.some((f) => f.id === file.id);
+            const newSelection = isAlreadySelected
+                ? currentSelection.filter((f) => f.id !== file.id)
+                : [...currentSelection, file];
+            setSelectedFile(newSelection);
             if (onFileSelect) {
                 onFileSelect(newSelection);
             }
         }
         else {
-            setSelectedFileId(fileId);
-            if (onFileSelect) {
-                onFileSelect(fileId);
+            const newFile = selectedFile === file ? undefined : file;
+            setSelectedFile(newFile);
+            if (onFileSelect && newFile) {
+                onFileSelect(newFile);
             }
         }
     };
@@ -4688,9 +4663,10 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
                     }, children: labels?.loadingFailed ?? 'Failed to load files' }) })), !isLoading && !isError && (jsx(Box, { maxHeight: "400px", overflowY: "auto", children: filteredFiles.length === 0 ? (jsx(Box, { textAlign: "center", py: 8, children: jsx(Text, { color: "fg.muted", children: labels?.noFilesFound ?? 'No files found' }) })) : (jsx(VStack, { align: "stretch", gap: 2, children: filteredFiles.map((file) => {
                         const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name);
                         const isSelected = multiple
-                            ? Array.isArray(selectedFileId) &&
-                                selectedFileId.includes(file.id)
-                            : selectedFileId === file.id;
+                            ? Array.isArray(selectedFile) &&
+                                selectedFile.some((f) => f.id === file.id)
+                            : selectedFile?.id ===
+                                file.id;
                         const imageFailed = failedImageIds.has(file.id);
                         return (jsx(Box, { p: 3, border: "2px solid", borderColor: isSelected
                                 ? {
@@ -4702,7 +4678,7 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
                                     base: 'colorPalette.50',
                                     _dark: 'colorPalette.900/20',
                                 }
-                                : 'bg.panel', colorPalette: "blue", cursor: "pointer", onClick: () => handleFileClick(file.id), _hover: {
+                                : 'bg.panel', colorPalette: "blue", cursor: "pointer", onClick: () => handleFileClick(file), _hover: {
                                 borderColor: isSelected
                                     ? {
                                         base: 'colorPalette.600',
@@ -4727,22 +4703,22 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
                     }) })) }))] }));
 };
 
-function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, translate, colLabel, }) {
-    const [selectedFileId, setSelectedFileId] = useState('');
+function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, translate, colLabel, }) {
+    const [selectedFile, setSelectedFile] = useState(undefined);
     const [activeTab, setActiveTab] = useState('browse');
     const [uploadingFiles, setUploadingFiles] = useState(new Set());
     const [uploadErrors, setUploadErrors] = useState(new Map());
     const handleSelect = () => {
-        if (selectedFileId) {
-            onSelect(selectedFileId);
+        if (selectedFile) {
+            onSelect(selectedFile);
             onClose();
-            setSelectedFileId('');
+            setSelectedFile(undefined);
             setActiveTab('browse');
         }
     };
     const handleClose = () => {
         onClose();
-        setSelectedFileId('');
+        setSelectedFile(undefined);
         setActiveTab('browse');
         setUploadingFiles(new Set());
         setUploadErrors(new Map());
@@ -4760,16 +4736,23 @@ function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = fa
             });
             try {
                 const fileId = await onUploadFile(file);
-                setSelectedFileId(fileId);
+                // Create a minimal FilePickerMediaFile object from the uploaded file
+                const uploadedFile = {
+                    id: fileId,
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                };
+                setSelectedFile(uploadedFile);
                 setUploadingFiles((prev) => {
                     const newSet = new Set(prev);
                     newSet.delete(fileKey);
                     return newSet;
                 });
                 // Auto-select and close in single-select mode
-                onSelect(fileId);
+                onSelect(uploadedFile);
                 onClose();
-                setSelectedFileId('');
+                setSelectedFile(undefined);
                 setActiveTab('browse');
             }
             catch (error) {
@@ -4793,7 +4776,7 @@ function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = fa
                                             translate(removeIndex(`${colLabel}.browse_tab`)) ??
                                             'Browse Library' }), jsx(Tabs.Trigger, { value: "upload", children: labels?.uploadTab ??
                                             translate(removeIndex(`${colLabel}.upload_tab`)) ??
-                                            'Upload Files' })] }), jsx(Tabs.Content, { value: "browse", children: onFetchFiles && (jsx(MediaLibraryBrowser, { onFetchFiles: onFetchFiles, filterImageOnly: filterImageOnly, labels: labels, enabled: open && activeTab === 'browse', selectedFileId: selectedFileId, onSelectedFileIdChange: setSelectedFileId })) }), jsx(Tabs.Content, { value: "upload", children: jsxs(VStack, { align: "stretch", gap: 4, children: [jsx(FileDropzone, { onDrop: ({ files }) => handleFileUpload(files), placeholder: labels?.fileDropzone ??
+                                            'Upload Files' })] }), jsx(Tabs.Content, { value: "browse", children: onFetchFiles && (jsx(MediaLibraryBrowser, { onFetchFiles: onFetchFiles, filterImageOnly: filterImageOnly, labels: labels, enabled: open && activeTab === 'browse', selectedFile: selectedFile, onFileSelect: setSelectedFile })) }), jsx(Tabs.Content, { value: "upload", children: jsxs(VStack, { align: "stretch", gap: 4, children: [jsx(FileDropzone, { onDrop: ({ files }) => handleFileUpload(files), placeholder: labels?.fileDropzone ??
                                                 translate(removeIndex(`${colLabel}.fileDropzone`)) ??
                                                 'Drop files here or click to upload' }), uploadingFiles.size > 0 && (jsx(Box, { children: Array.from(uploadingFiles).map((fileKey) => (jsx(Box, { py: 2, children: jsxs(HStack, { gap: 2, children: [jsx(Spinner, { size: "sm", colorPalette: "blue" }), jsxs(Text, { fontSize: "sm", color: "fg.muted", children: [labels?.uploading ??
                                                                     translate(removeIndex(`${colLabel}.uploading`)) ??
@@ -4808,9 +4791,9 @@ function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = fa
                                                         _dark: 'colorPalette.300',
                                                     }, children: [fileKey.split('-')[0], ":", ' ', labels?.uploadFailed ??
                                                             translate(removeIndex(`${colLabel}.upload_failed`)) ??
-                                                            'Upload failed', error && ` - ${error}`] }) }, fileKey))) }))] }) })] })) : onFetchFiles ? (jsx(MediaLibraryBrowser, { onFetchFiles: onFetchFiles, filterImageOnly: filterImageOnly, labels: labels, enabled: open, selectedFileId: selectedFileId, onSelectedFileIdChange: setSelectedFileId })) : null }), jsx(DialogFooter, { children: jsxs(HStack, { gap: 3, justify: "end", children: [jsx(Button$1, { variant: "outline", onClick: handleClose, borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: labels?.cancel ??
+                                                            'Upload failed', error && ` - ${error}`] }) }, fileKey))) }))] }) })] })) : onFetchFiles ? (jsx(MediaLibraryBrowser, { onFetchFiles: onFetchFiles, filterImageOnly: filterImageOnly, labels: labels, enabled: open, selectedFile: selectedFile, onFileSelect: setSelectedFile })) : null }), jsx(DialogFooter, { children: jsxs(HStack, { gap: 3, justify: "end", children: [jsx(Button$1, { variant: "outline", onClick: handleClose, borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: labels?.cancel ??
                                     translate(removeIndex(`${colLabel}.cancel`)) ??
-                                    'Cancel' }), jsx(Button$1, { colorPalette: "blue", onClick: handleSelect, disabled: !selectedFileId, children: labels?.select ??
+                                    'Cancel' }), jsx(Button$1, { colorPalette: "blue", onClick: handleSelect, disabled: !selectedFile, children: labels?.select ??
                                     translate(removeIndex(`${colLabel}.select`)) ??
                                     'Select' })] }) })] }) }));
 }
@@ -4909,17 +4892,70 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const colLabel = formI18n.colLabel;
     const [dialogOpen, setDialogOpen] = useState(false);
     const [failedImageIds, setFailedImageIds] = useState(new Set());
+    // Map of file ID to FilePickerMediaFile for display
+    const [fileMap, setFileMap] = useState(new Map());
     const { onFetchFiles, filterImageOnly = false, enableUpload = false, onUploadFile, } = filePicker || {};
+    // Fetch file details for existing file IDs
+    useEffect(() => {
+        if (!onFetchFiles || currentFileIds.length === 0)
+            return;
+        const fetchFileDetails = async () => {
+            setFileMap((prevMap) => {
+                const filesToFetch = currentFileIds.filter((id) => !prevMap.has(id));
+                if (filesToFetch.length === 0)
+                    return prevMap;
+                // Fetch all files and filter for the ones we need
+                onFetchFiles('')
+                    .then((allFiles) => {
+                    setFileMap((currentMap) => {
+                        const newFileMap = new Map(currentMap);
+                        filesToFetch.forEach((id) => {
+                            const file = allFiles.find((f) => f.id === id);
+                            if (file) {
+                                newFileMap.set(id, file);
+                            }
+                        });
+                        return newFileMap;
+                    });
+                })
+                    .catch((error) => {
+                    console.error('Failed to fetch file details:', error);
+                });
+                return prevMap;
+            });
+        };
+        fetchFileDetails();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentFileIds.join(','), onFetchFiles]);
+    // Clean up fileMap when files are removed
+    useEffect(() => {
+        setFileMap((prevMap) => {
+            const currentIds = new Set(currentFileIds);
+            const newFileMap = new Map();
+            prevMap.forEach((file, id) => {
+                if (currentIds.has(id)) {
+                    newFileMap.set(id, file);
+                }
+            });
+            return newFileMap.size !== prevMap.size ? newFileMap : prevMap;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentFileIds.join(',')]);
     if (!onFetchFiles) {
         return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
             gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsx(Text, { color: "fg.muted", children: "Media library browser requires onFetchFiles" }) }));
     }
-    const handleMediaLibrarySelect = (fileId) => {
+    const handleImageError = (fileIdentifier) => {
+        setFailedImageIds((prev) => new Set(prev).add(fileIdentifier));
+    };
+    const handleMediaLibrarySelect = (file) => {
+        // Store the file in the map for display
+        setFileMap((prev) => new Map(prev).set(file.id, file));
         if (isSingleSelect) {
-            setValue(colLabel, fileId);
+            setValue(colLabel, file.id);
         }
         else {
-            const newFileIds = [...currentFileIds, fileId];
+            const newFileIds = [...currentFileIds, file.id];
             setValue(colLabel, newFileIds);
         }
     };
@@ -4932,33 +4968,27 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
             setValue(colLabel, newFileIds);
         }
     };
-    const isImageId = (fileId) => {
-        return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(fileId);
-    };
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsx(VStack, { align: "stretch", gap: 2, children: jsx(Button$1, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
                         formI18n.t('browse_library') ??
-                        'Browse from Library' }) }), jsx(FilePickerDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
+                        'Browse from Library' }) }), jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
                     formI18n.t('dialog_title') ??
                     'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, translate: formI18n.t, colLabel: colLabel }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
-                    const isImage = isImageId(fileId);
+                    const file = fileMap.get(fileId);
+                    const isImage = file
+                        ? /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name)
+                        : /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(fileId);
                     const imageFailed = failedImageIds.has(fileId);
+                    const displayName = file?.name ?? fileId;
                     return (jsx(Card.Root, { variant: 'subtle', colorPalette: "blue", children: jsxs(Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
                                 borderColor: 'colorPalette.300',
                                 bg: 'bg.muted',
-                            }, transition: "all 0.2s", children: [jsx(Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, marginRight: "2", children: isImage && !imageFailed ? (jsx(Icon, { as: LuImage, boxSize: 6, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 6, color: "fg.muted" })) }), jsx(VStack, { align: "start", flex: 1, gap: 1, children: jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileId }) }), jsx(Icon, { as: TiDeleteOutline, boxSize: 5, color: "fg.muted" })] }) }, `${fileId}-${index}`));
+                            }, transition: "all 0.2s", children: [jsx(Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, marginRight: "2", overflow: "hidden", children: isImage && file?.url && !imageFailed ? (jsx(Image, { src: file.url, alt: displayName, boxSize: "60px", objectFit: "cover", onError: () => handleImageError(fileId) })) : isImage && !imageFailed ? (jsx(Icon, { as: LuImage, boxSize: 6, color: "fg.muted" })) : (jsx(Icon, { as: LuFile, boxSize: 6, color: "fg.muted" })) }), jsxs(VStack, { align: "start", flex: 1, gap: 1, children: [jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: displayName }), file?.size && (jsx(Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
+                                                ? `${(file.size / 1024).toFixed(1)} KB`
+                                                : file.size }))] }), jsx(Icon, { as: TiDeleteOutline, boxSize: 5, color: "fg.muted" })] }) }, `${fileId}-${index}`));
                 }) })] }));
 };
 
-const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
-    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
-    return (jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsx(Popover.Trigger, { asChild: true, children: children }), jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsx(Popover.Arrow, { children: jsx(Popover.ArrowTip, {}) })), content] }) }) })] }));
-});
-const InfoTip = React.forwardRef(function InfoTip(props, ref) {
-    const { children, ...rest } = props;
-    return (jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsx(IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "colorPalette", children: jsx(HiOutlineInformationCircle, {}) }) }));
-});
-
 const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
     if (serverUrl === undefined || serverUrl.length == 0) {
         throw new Error("The serverUrl is missing");
@@ -4995,10 +5025,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     const isRequired = required?.some((columnId) => columnId === column);
     const { table, column: column_ref, display_column, customQueryFn, } = foreign_key;
     const [searchText, setSearchText] = useState('');
-    const [limit, setLimit] = useState(10);
-    const [openSearchResult, setOpenSearchResult] = useState();
-    const [page, setPage] = useState(0);
-    const ref = useRef(null);
+    const [limit] = useState(50); // Increased limit for combobox
     const colLabel = formI18n.colLabel;
     const watchedValue = watch(colLabel);
     const watchId = !isMultiple ? watchedValue : undefined;
@@ -5013,22 +5040,25 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
         : [];
     // Use watched values if they exist (including empty string for single select),
     // otherwise fall back to initial values from getValues()
-    // This ensures the query can trigger on mount with initial values
-    // For single: use watchId if it's not undefined/null, otherwise use initialId
-    // For multiple: use watchIds if watchedValue is defined, otherwise use initialIds
     const currentId = watchId !== undefined && watchId !== null ? watchId : initialId;
     const currentIds = watchedValue !== undefined && watchedValue !== null && isMultiple
         ? watchIds
         : initialIds;
-    // Query for search results
+    // Current value for combobox (array format)
+    const currentValue = isMultiple
+        ? currentIds.filter((id) => id != null && id !== '')
+        : currentId
+            ? [currentId]
+            : [];
+    // Query for search results (async loading)
     const query = useQuery({
-        queryKey: [`idpicker`, { column, searchText, limit, page }],
+        queryKey: [`idpicker`, { column, searchText, limit }],
         queryFn: async () => {
             if (customQueryFn) {
                 const { data, idMap } = await customQueryFn({
                     searching: searchText ?? '',
                     limit: limit,
-                    offset: page * limit,
+                    offset: 0,
                 });
                 setIdMap((state) => {
                     return { ...state, ...idMap };
@@ -5040,7 +5070,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                 searching: searchText ?? '',
                 in_table: table,
                 limit: limit,
-                offset: page * limit,
+                offset: 0,
             });
             const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
                 return [
@@ -5055,12 +5085,11 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             });
             return data;
         },
-        enabled: openSearchResult === true,
+        enabled: true, // Always enabled for combobox
         staleTime: 300000,
     });
     // Query for currently selected items (to display them properly)
-    // Use currentId/currentIds in queryKey so it includes initial values and updates when watched values change
-    const queryDefault = useQuery({
+    useQuery({
         queryKey: [
             `idpicker-default`,
             {
@@ -5070,11 +5099,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             },
         ],
         queryFn: async () => {
-            // Use current values (which include initial) for the query
             const queryId = currentId;
             const queryIds = currentIds;
             if (customQueryFn) {
-                // For customQueryFn, pass where clause to fetch specific IDs
                 const { data, idMap } = await customQueryFn({
                     searching: '',
                     limit: isMultiple ? queryIds.length : 1,
@@ -5089,10 +5116,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             if (!queryId && (!queryIds || queryIds.length === 0)) {
                 return { data: [] };
             }
-            const searchValue = isMultiple ? queryIds.join(',') : queryId;
             const data = await getTableData({
                 serverUrl,
-                searching: searchValue,
+                searching: '',
                 in_table: table,
                 where: [{ id: column_ref, value: isMultiple ? queryIds : queryId }],
                 limit: isMultiple ? queryIds.length : 1,
@@ -5115,101 +5141,80 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             ? Array.isArray(currentIds) && currentIds.length > 0
             : !!currentId,
     });
-    // Effect to trigger initial data fetch when popover opens
-    useEffect(() => {
-        if (openSearchResult) {
-            // Reset search text when opening the popover
-            setSearchText('');
-            // Reset page to first page
-            setPage(0);
-            // Fetch initial data
-            query.refetch();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [openSearchResult]);
-    const onSearchChange = async (event) => {
-        setSearchText(event.target.value);
-        setPage(0);
-        query.refetch();
-    };
-    const handleLimitChange = (event) => {
-        const newLimit = Number(event.target.value);
-        setLimit(newLimit);
-        // Reset to first page when changing limit
-        setPage(0);
-        // Trigger a new search with the updated limit
-        query.refetch();
-    };
     const { isLoading, isFetching, data, isPending, isError } = query;
     const dataList = data?.data ?? [];
-    const count = data?.count ?? 0;
-    const getPickedValue = () => {
-        if (Object.keys(idMap).length <= 0) {
-            return '';
-        }
-        // Use currentId which includes initial values
-        const record = idMap[currentId];
-        if (record === undefined) {
-            return '';
+    // Transform data for combobox collection
+    const comboboxItems = useMemo(() => {
+        return dataList.map((item) => ({
+            label: !!renderDisplay === true
+                ? String(renderDisplay(item))
+                : String(item[display_column] ?? ''),
+            value: String(item[column_ref]),
+            raw: item,
+        }));
+    }, [dataList, display_column, column_ref, renderDisplay]);
+    // Use filter hook for combobox
+    const { contains } = useFilter({ sensitivity: 'base' });
+    // Create collection for combobox
+    const { collection, filter, set } = useListCollection({
+        initialItems: comboboxItems,
+        itemToString: (item) => item.label,
+        itemToValue: (item) => item.value,
+        filter: contains,
+    });
+    // Handle input value change (search)
+    const handleInputValueChange = (details) => {
+        setSearchText(details.inputValue);
+        // Filter will be applied after data is fetched
+    };
+    // Handle value change
+    const handleValueChange = (details) => {
+        if (isMultiple) {
+            setValue(colLabel, details.value);
         }
-        if (!!renderDisplay === true) {
-            return renderDisplay(record);
+        else {
+            setValue(colLabel, details.value[0] || '');
         }
-        return record[display_column];
     };
+    // Debounce search to avoid too many API calls and update collection after data loads
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (searchText !== undefined) {
+                query.refetch();
+            }
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchText, query]);
+    // Update collection and filter when data changes
+    useEffect(() => {
+        if (dataList.length > 0) {
+            set(comboboxItems);
+            // Apply filter to the collection
+            if (searchText) {
+                filter(searchText);
+            }
+        }
+    }, [dataList, comboboxItems, set, filter, searchText]);
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [isMultiple && (jsxs(Flex, { flexFlow: 'wrap', gap: 1, children: [watchIds.map((id) => {
-                        const item = idMap[id];
-                        if (item === undefined) {
-                            return (jsx(Text, { children: idPickerLabels?.undefined ?? formI18n.t('undefined') }, id));
-                        }
-                        return (jsx(Tag, { closable: true, onClick: () => {
-                                setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
-                            }, children: !!renderDisplay === true
-                                ? renderDisplay(item)
-                                : item[display_column] }, id));
-                    }), jsx(Tag, { cursor: 'pointer', onClick: () => {
-                            setOpenSearchResult(true);
-                        }, children: idPickerLabels?.addMore ?? formI18n.t('add_more') })] })), !isMultiple && (jsx(Button, { variant: 'outline', onClick: () => {
-                    setOpenSearchResult(true);
-                }, justifyContent: 'start', children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start', strategy: 'fixed' }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsx(Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search'), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: 'red.400', children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${idPickerLabels?.total ?? formI18n.t('total')} ${count}, ${idPickerLabels?.showing ?? formI18n.t('showing')} ${limit} ${idPickerLabels?.perPage ?? formI18n.t('per_page', { defaultValue: 'per page' })}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/", ' ', count > 0
-                                                                            ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}`
-                                                                            : '0'] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
-                                                            padding: '4px 8px',
-                                                            borderRadius: '4px',
-                                                            border: '1px solid #ccc',
-                                                            fontSize: '14px',
-                                                        }, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "30", children: "30" })] }) })] }), jsx(Grid, { overflowY: 'auto', children: dataList.length > 0 ? (jsx(Flex, { flexFlow: 'column wrap', gap: 1, children: dataList.map((item) => {
-                                                    const selected = isMultiple
-                                                        ? watchIds.some((id) => item[column_ref] === id)
-                                                        : watchId === item[column_ref];
-                                                    return (jsx(Box, { cursor: 'pointer', onClick: () => {
-                                                            if (!isMultiple) {
-                                                                setOpenSearchResult(false);
-                                                                setValue(colLabel, item[column_ref]);
-                                                                return;
-                                                            }
-                                                            // For multiple selection, don't add if already selected
-                                                            if (selected)
-                                                                return;
-                                                            const newSet = new Set([
-                                                                ...(watchIds ?? []),
-                                                                item[column_ref],
-                                                            ]);
-                                                            setValue(colLabel, [...newSet]);
-                                                        }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
-                                                            ? {
-                                                                color: 'colorPalette.400/50',
-                                                                fontWeight: 'bold',
-                                                            }
-                                                            : {}), children: !!renderDisplay === true
-                                                            ? renderDisplay(item)
-                                                            : item[display_column] }, item[column_ref]));
-                                                }) })) : (jsx(Text, { children: searchText
-                                                    ? idPickerLabels?.emptySearchResult ??
-                                                        formI18n.t('empty_search_result')
-                                                    : idPickerLabels?.initialResults ??
-                                                        formI18n.t('initial_results') })) }), jsx(PaginationRoot, { justifySelf: 'center', count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] })] }));
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [isMultiple && currentValue.length > 0 && (jsx(Flex, { flexFlow: 'wrap', gap: 1, mb: 2, children: currentValue.map((id) => {
+                    const item = idMap[id];
+                    if (item === undefined) {
+                        return (jsx(Text, { fontSize: "sm", children: idPickerLabels?.undefined ?? formI18n.t('undefined') }, id));
+                    }
+                    return (jsx(Tag, { closable: true, onClick: () => {
+                            const newValue = currentValue.filter((itemId) => itemId !== id);
+                            setValue(colLabel, newValue);
+                        }, children: !!renderDisplay === true
+                            ? renderDisplay(item)
+                            : item[display_column] }, id));
+                }) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxs(Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && (jsx(Spinner, { size: "xs" })), isError && (jsx(Icon, { color: "fg.error", children: jsx(BiError, {}) })), !isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
+                                            setValue(colLabel, '');
+                                        } })), jsx(Combobox.Trigger, {})] })] }), jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isFetching || isLoading || isPending ? (jsxs(HStack, { p: 2, justify: "center", children: [jsx(Spinner, { size: "xs" }), jsx(Text, { fontSize: "sm", children: idPickerLabels?.loading ?? formI18n.t('loading') })] })) : isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.loadingFailed ??
+                                        formI18n.t('loading_failed') })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
+                                        ? idPickerLabels?.emptySearchResult ??
+                                            formI18n.t('empty_search_result')
+                                        : idPickerLabels?.initialResults ??
+                                            formI18n.t('initial_results') })) : (jsx(Fragment, { children: collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value))) })) }) }) })] })] }));
 };
 
 const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {