@bsol-oss/react-datatable5 13.0.1-beta.7 → 13.0.1-beta.8

package/dist/index.mjs

@@ -1,12 +1,12 @@
 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, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, 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, Clipboard, Badge, Link, Tag as Tag$1, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, Skeleton, NumberInput, Show, RadioCard, CheckboxGroup, InputGroup as InputGroup$1, Center, Heading, Stack } 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, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, 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, Clipboard, Badge, Link, Tag as Tag$1, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, useCombobox, Show, Skeleton, NumberInput, RadioCard, CheckboxGroup, InputGroup as InputGroup$1, Center, Heading, Stack } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef, forwardRef } from 'react';
 import { LuX, LuCheck, LuChevronRight, LuCopy, LuExternalLink, 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';
-import { BiDownArrow, BiUpArrow, BiError } from 'react-icons/bi';
+import { BiDownArrow, BiUpArrow, BiX, BiError } from 'react-icons/bi';
 import { CgClose, CgTrash } from 'react-icons/cg';
 import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
 import { IoMdEye, IoMdCheckbox, IoMdClock } from 'react-icons/io';
@@ -5069,7 +5069,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
     const dataList = schema.enum ?? [];
-    // Helper function to render enum value
+    // Helper function to render enum value (returns ReactNode)
     // If renderDisplay is provided, use it; otherwise show the enum string value directly
     const renderEnumValue = (value) => {
         if (renderDisplay) {
@@ -5078,6 +5078,35 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
         // If no renderDisplay provided, show the enum string value directly
         return value;
     };
+    // Helper function to get string representation for input display
+    // Converts ReactNode to string for combobox input display
+    const getDisplayString = (value) => {
+        if (renderDisplay) {
+            const rendered = renderDisplay(value);
+            // If renderDisplay returns a string, use it directly
+            if (typeof rendered === 'string') {
+                return rendered;
+            }
+            // If it's a React element, try to extract text content
+            // For now, fallback to the raw value if we can't extract text
+            // In most cases, renderDisplay should return a string or simple element
+            if (typeof rendered === 'object' &&
+                rendered !== null &&
+                'props' in rendered) {
+                const props = rendered.props;
+                // Try to extract text from React element props
+                if (props?.children) {
+                    const children = props.children;
+                    if (typeof children === 'string') {
+                        return children;
+                    }
+                }
+            }
+            // Fallback: use raw value if we can't extract string
+            return value;
+        }
+        return value;
+    };
     // Debug log when renderDisplay is missing
     if (!renderDisplay) {
         console.debug(`[EnumPicker] Missing renderDisplay for field '${colLabel}'. Add renderDisplay function to schema for field '${colLabel}' to provide custom UI rendering. Currently showing enum string values directly.`, {
@@ -5093,19 +5122,29 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
         : watchEnum
             ? [watchEnum]
             : [];
+    // Track input focus state for single selection
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    // Get the selected value for single selection display
+    const selectedSingleValue = !isMultiple && watchEnum ? watchEnum : null;
+    const selectedSingleRendered = selectedSingleValue
+        ? renderEnumValue(selectedSingleValue)
+        : null;
+    const isSelectedSingleValueString = typeof selectedSingleRendered === 'string';
     const comboboxItems = useMemo(() => {
         return dataList.map((item) => ({
             label: item, // Internal: used for search/filtering only
             value: item,
             raw: item, // Passed to renderEnumValue for UI rendering
+            displayLabel: getDisplayString(item), // Used for input display when selected
         }));
-    }, [dataList]);
+    }, [dataList, renderDisplay]);
     // Use filter hook for combobox
     const { contains } = useFilter({ sensitivity: 'base' });
     // Create collection for combobox
+    // itemToString uses displayLabel to show rendered display in input when selected
     const { collection, filter } = useListCollection({
         initialItems: comboboxItems,
-        itemToString: (item) => item.label,
+        itemToString: (item) => item.displayLabel, // Use displayLabel for selected value display
         itemToValue: (item) => item.value,
         filter: contains,
     });
@@ -5143,7 +5182,26 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                         }, children: renderEnumValue(enumValue) }, enumValue));
                 }) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
                     ? { strategy: 'fixed', hideWhenDetached: true }
-                    : undefined, children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: enumPickerLabels?.typeToSearch ?? 'Type to search' }), jsxs(Combobox.IndicatorGroup, { children: [!isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
+                    : undefined, children: [jsxs(Combobox.Control, { position: "relative", children: [!isMultiple &&
+                                selectedSingleValue &&
+                                !isInputFocused &&
+                                !isSelectedSingleValueString &&
+                                selectedSingleRendered && (jsx(Box, { position: "absolute", left: 3, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1, maxWidth: "calc(100% - 60px)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: selectedSingleRendered })), jsx(Combobox.Input, { placeholder: !isMultiple && selectedSingleValue && !isInputFocused
+                                    ? undefined
+                                    : enumPickerLabels?.typeToSearch ?? 'Type to search', onFocus: () => setIsInputFocused(true), onBlur: () => setIsInputFocused(false), style: {
+                                    color: !isMultiple &&
+                                        selectedSingleValue &&
+                                        !isInputFocused &&
+                                        !isSelectedSingleValueString
+                                        ? 'transparent'
+                                        : undefined,
+                                    caretColor: !isMultiple &&
+                                        selectedSingleValue &&
+                                        !isInputFocused &&
+                                        !isSelectedSingleValueString
+                                        ? 'transparent'
+                                        : undefined,
+                                } }), jsxs(Combobox.IndicatorGroup, { children: [!isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
                                             setValue(colLabel, '');
                                         } })), jsx(Combobox.Trigger, {})] })] }), insideDialog ? (jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? 'Total'}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ?? 'No results found' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: renderEnumValue(item.raw) }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? 'Total'}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ?? 'No results found' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: renderEnumValue(item.raw) }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) }) }))] })] }));
 };
@@ -5887,15 +5945,46 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                 }) })] }));
 };
 
-// Default renderDisplay function that stringifies JSON
+// Default renderDisplay function that intelligently displays items
+// If item is an object, tries to find common display fields (name, title, label, etc.)
+// Otherwise falls back to JSON.stringify
 const defaultRenderDisplay = (item) => {
+    // Check if item is an object (not null, not array, not primitive)
+    if (item !== null &&
+        typeof item === 'object' &&
+        !Array.isArray(item) &&
+        !(item instanceof Date)) {
+        const obj = item;
+        // Try common display fields in order of preference
+        const displayFields = [
+            'name',
+            'title',
+            'label',
+            'displayName',
+            'display_name',
+            'text',
+            'value',
+        ];
+        for (const field of displayFields) {
+            if (obj[field] !== undefined && obj[field] !== null) {
+                const value = obj[field];
+                // Return the value if it's a string or number, otherwise stringify it
+                if (typeof value === 'string' || typeof value === 'number') {
+                    return String(value);
+                }
+            }
+        }
+        // If no display field found, fall back to JSON.stringify
+        return JSON.stringify(item);
+    }
+    // For non-objects (primitives, arrays, dates), use JSON.stringify
     return JSON.stringify(item);
 };
 
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = useFormContext();
     const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, loadInitialValues, foreign_key, variant } = schema;
+    const { renderDisplay, itemToValue: schemaItemToValue, loadInitialValues, foreign_key, variant, } = schema;
     // loadInitialValues should be provided in schema for id-picker fields
     // It's used to load the record of the id so the display is human-readable
     if (variant === 'id-picker' && !loadInitialValues) {
@@ -6028,17 +6117,51 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         // Depend on idMapKey which only changes when items we care about change
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentValueKey, idMapKey]);
+    // Default itemToValue function: extract value from item using column_ref
+    const defaultItemToValue = (item) => String(item[column_ref]);
+    // Use schema's itemToValue if provided, otherwise use default
+    const itemToValueFn = schemaItemToValue
+        ? (item) => schemaItemToValue(item)
+        : defaultItemToValue;
+    // itemToString function: convert item to readable string using renderDisplay
+    // This ensures items can always be displayed as readable strings in the combobox
+    const renderFn = renderDisplay || defaultRenderDisplay;
+    const itemToStringFn = (item) => {
+        const rendered = renderFn(item);
+        // If already a string or number, return it
+        if (typeof rendered === 'string')
+            return rendered;
+        if (typeof rendered === 'number')
+            return String(rendered);
+        // For ReactNode, fall back to defaultRenderDisplay which converts to string
+        return String(defaultRenderDisplay(item));
+    };
     // Transform data for combobox collection
     // label is used for filtering/searching (must be a string)
+    // displayLabel is used for input display when selected (string representation of rendered display)
     // raw item is stored for custom rendering
     // Also include items from idMap that match currentValue (for initial values display)
     const comboboxItems = useMemo(() => {
         const renderFn = renderDisplay || defaultRenderDisplay;
+        // Helper to convert rendered display to string for displayLabel
+        // For ReactNodes (non-string/number), we can't safely stringify due to circular refs
+        // So we use the label (which is already a string) as fallback
+        const getDisplayString = (rendered, fallbackLabel) => {
+            if (typeof rendered === 'string')
+                return rendered;
+            if (typeof rendered === 'number')
+                return String(rendered);
+            // For ReactNode, use the fallback label (which is already a string representation)
+            // The actual ReactNode will be rendered in the overlay, not in the input
+            return fallbackLabel;
+        };
         const itemsFromDataList = dataList.map((item) => {
             const rendered = renderFn(item);
+            const label = typeof rendered === 'string' ? rendered : JSON.stringify(item); // Use string for filtering
             return {
-                label: typeof rendered === 'string' ? rendered : JSON.stringify(item), // Use string for filtering
-                value: String(item[column_ref]),
+                label, // Use string for filtering
+                displayLabel: getDisplayString(rendered, label), // String representation for input display
+                value: itemToValueFn(item),
                 raw: item,
             };
         });
@@ -6047,25 +6170,28 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         const itemsFromIdMap = idMapItems
             .map((item) => {
             // Check if this item is already in itemsFromDataList
-            const alreadyIncluded = itemsFromDataList.some((i) => i.value === String(item[column_ref]));
+            const alreadyIncluded = itemsFromDataList.some((i) => i.value === itemToValueFn(item));
             if (alreadyIncluded)
                 return null;
             const rendered = renderFn(item);
+            const label = typeof rendered === 'string' ? rendered : JSON.stringify(item);
             return {
-                label: typeof rendered === 'string' ? rendered : JSON.stringify(item),
-                value: String(item[column_ref]),
+                label,
+                displayLabel: getDisplayString(rendered, label), // String representation for input display
+                value: itemToValueFn(item),
                 raw: item,
             };
         })
             .filter((item) => item !== null);
         return [...itemsFromIdMap, ...itemsFromDataList];
-    }, [dataList, column_ref, renderDisplay, idMapItems]);
+    }, [dataList, column_ref, renderDisplay, idMapItems, itemToValueFn]);
     // Use filter hook for combobox
     const { contains } = useFilter({ sensitivity: 'base' });
     // Create collection for combobox
+    // itemToString uses displayLabel to show rendered display in input when selected
     const { collection, filter, set } = useListCollection({
         initialItems: comboboxItems,
-        itemToString: (item) => item.label,
+        itemToString: (item) => item.displayLabel, // Use displayLabel for selected value display
         itemToValue: (item) => item.value,
         filter: contains,
     });
@@ -6120,6 +6246,8 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        itemToValue: itemToValueFn,
+        itemToString: itemToStringFn,
         loadInitialValues: loadInitialValues ??
             (async () => ({ data: { data: [], count: 0 }, idMap: {} })), // Fallback if not provided
         column_ref,
@@ -6130,60 +6258,69 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
 
 const IdPickerSingle = ({ column, schema, prefix, }) => {
     const formI18n = useFormI18n(column, prefix, schema);
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { colLabel, currentValue, searchText, setSearchText, isLoading, isFetching, isPending, isError, isSearching, isLoadingInitialValues, isFetchingInitialValues, missingIds, collection, idMap, idPickerLabels, insideDialog, renderDisplay: renderDisplayFn, errors, setValue, } = useIdPickerData({
+    const { colLabel, currentValue, searchText, setSearchText, isLoading, isFetching, isPending, isError, isSearching, collection, filter, idMap, idPickerLabels, insideDialog, renderDisplay: renderDisplayFn, itemToValue, itemToString, errors, setValue, } = useIdPickerData({
         column,
         schema,
         prefix,
         isMultiple: false,
     });
-    const handleInputValueChange = (details) => {
-        setSearchText(details.inputValue);
-    };
-    const handleValueChange = (details) => {
-        setValue(colLabel, details.value[0] || '');
-    };
-    const renderDisplayFunction = renderDisplayFn || renderDisplay || defaultRenderDisplay;
-    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [currentValue.length > 0 && (jsx(Flex, { mb: 2, children: (() => {
-                    const id = currentValue[0];
-                    const item = idMap[id];
-                    // Show loading skeleton while fetching initial values
-                    if (item === undefined &&
-                        (isLoadingInitialValues || isFetchingInitialValues) &&
-                        missingIds.includes(id)) {
-                        return jsx(Skeleton, { height: "24px", width: "100px", borderRadius: "md" });
-                    }
-                    // Only show "not found" if we're not loading and item is still missing
-                    if (item === undefined) {
-                        return (jsx(Text, { fontSize: "sm", children: idPickerLabels?.undefined ?? 'Undefined' }));
-                    }
-                    return jsx(Text, { fontSize: "sm", children: renderDisplayFunction(item) });
-                })() })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: false, closeOnSelect: true, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
-                    ? { strategy: 'fixed', hideWhenDetached: true }
-                    : undefined, children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? 'Type to search' }), jsxs(Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, { size: "xs" }), isError && (jsx(Icon, { color: "fg.error", children: jsx(BiError, {}) })), currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
-                                            setValue(colLabel, '');
-                                        } })), jsx(Combobox.Trigger, {})] })] }), insideDialog ? (jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
+    // Get the selected value for single selection display
+    const selectedId = currentValue.length > 0 ? currentValue[0] : null;
+    const selectedItem = selectedId
+        ? idMap[selectedId]
+        : undefined;
+    // Use itemToValue to get the combobox value from the selected item, or use the ID directly
+    const comboboxValue = selectedItem
+        ? itemToString(selectedItem)
+        : selectedId || '';
+    // itemToString is available from the hook and can be used to get a readable string
+    // representation of any item. The collection's itemToString is automatically used
+    // by the combobox to display selected values.
+    // Use useCombobox hook to control input value
+    const combobox = useCombobox({
+        collection,
+        value: [comboboxValue],
+        onInputValueChange(e) {
+            setSearchText(e.inputValue);
+            filter(e.inputValue);
+        },
+        onValueChange(e) {
+            setValue(colLabel, e.value[0] || '');
+            // Clear the input value after selection
+            setSearchText('');
+        },
+        multiple: false,
+        closeOnSelect: true,
+        openOnClick: true,
+        invalid: !!errors[colLabel],
+    });
+    // Use renderDisplay from hook (which comes from schema) or fallback to default
+    const renderDisplayFunction = renderDisplayFn || defaultRenderDisplay;
+    // Get the selected value for single selection display (already computed above)
+    const selectedRendered = selectedItem
+        ? renderDisplayFunction(selectedItem)
+        : null;
+    return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(Combobox.RootProvider, { value: combobox, width: "100%", children: [jsx(Show, { when: selectedId && selectedRendered, children: jsxs(HStack, { justifyContent: 'space-between', children: [jsx(Box, { children: selectedRendered }), currentValue.length > 0 && (jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => {
+                                    setValue(colLabel, '');
+                                }, children: jsx(Icon, { children: jsx(BiX, {}) }) }))] }) }), jsx(Show, { when: !selectedId || !selectedRendered, children: jsxs(Combobox.Control, { position: "relative", children: [jsx(Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? 'Type to search' }), jsxs(Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, { size: "xs" }), isError && (jsx(Icon, { color: "fg.error", children: jsx(BiError, {}) })), jsx(Combobox.Trigger, {})] })] }) }), insideDialog ? (jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
+                        // Show skeleton items to prevent UI shift
+                        jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
+                                ? idPickerLabels?.emptySearchResult ?? 'No results found'
+                                : idPickerLabels?.initialResults ??
+                                    'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [renderDisplayFunction(item.raw), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
                             // Show skeleton items to prevent UI shift
                             jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
                                     ? idPickerLabels?.emptySearchResult ?? 'No results found'
                                     : idPickerLabels?.initialResults ??
-                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                ? renderDisplayFunction(item.raw)
-                                                : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
-                                // Show skeleton items to prevent UI shift
-                                jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
-                                        ? idPickerLabels?.emptySearchResult ?? 'No results found'
-                                        : idPickerLabels?.initialResults ??
-                                            'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                    ? renderDisplayFunction(item.raw)
-                                                    : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
+                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsx(Combobox.Item, { item: item, children: renderDisplayFunction(item.raw) }, item.value ?? `item-${index}`))) })) }) }) }))] }) }));
 };
 
 const IdPickerMultiple = ({ column, schema, prefix, }) => {
     const formI18n = useFormI18n(column, prefix, schema);
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { colLabel, currentValue, searchText, setSearchText, isLoading, isFetching, isPending, isError, isSearching, isLoadingInitialValues, isFetchingInitialValues, missingIds, collection, idMap, idPickerLabels, insideDialog, renderDisplay: renderDisplayFn, errors, setValue, } = useIdPickerData({
         column,
@@ -6197,7 +6334,8 @@ const IdPickerMultiple = ({ column, schema, prefix, }) => {
     const handleValueChange = (details) => {
         setValue(colLabel, details.value);
     };
-    const renderDisplayFunction = renderDisplayFn || renderDisplay || defaultRenderDisplay;
+    // Use renderDisplay from hook (which comes from schema) or fallback to default
+    const renderDisplayFunction = renderDisplayFn || defaultRenderDisplay;
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [currentValue.length > 0 && (jsx(Flex, { flexFlow: 'wrap', gap: 1, mb: 2, children: currentValue.map((id) => {
                     const item = idMap[id];
@@ -6222,16 +6360,12 @@ const IdPickerMultiple = ({ column, schema, prefix, }) => {
                             jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
                                     ? idPickerLabels?.emptySearchResult ?? 'No results found'
                                     : idPickerLabels?.initialResults ??
-                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                ? renderDisplayFunction(item.raw)
-                                                : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
+                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [renderDisplayFunction(item.raw), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
                                 // Show skeleton items to prevent UI shift
                                 jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
                                         ? idPickerLabels?.emptySearchResult ?? 'No results found'
                                         : idPickerLabels?.initialResults ??
-                                            'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                    ? renderDisplayFunction(item.raw)
-                                                    : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
+                                            'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [renderDisplayFunction(item.raw), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
 };
 
 const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
@@ -7368,7 +7502,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     backButtonLabel: 'Back',
     forwardButtonLabel: 'Next',
 }, timePickerLabels, timezone = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, defaultDate, defaultTime, }) {
-    console.log('[DateTimePicker] Component initialized with props:', {
+    console.debug('[DateTimePicker] Component initialized with props:', {
         value,
         format,
         showSeconds,
@@ -7387,13 +7521,13 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     const [selectedDate, setSelectedDate] = useState(getDateString(value));
     // Helper to get time values from value prop with timezone
     const getTimeFromValue = useCallback((val) => {
-        console.log('[DateTimePicker] getTimeFromValue called:', {
+        console.debug('[DateTimePicker] getTimeFromValue called:', {
             val,
             timezone,
             showSeconds,
         });
         if (!val) {
-            console.log('[DateTimePicker] No value provided, returning nulls');
+            console.debug('[DateTimePicker] No value provided, returning nulls');
             return {
                 hour12: null,
                 minute: null,
@@ -7403,7 +7537,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             };
         }
         const dateObj = dayjs(val).tz(timezone);
-        console.log('[DateTimePicker] Parsed date object:', {
+        console.debug('[DateTimePicker] Parsed date object:', {
             original: val,
             timezone,
             isValid: dateObj.isValid(),
@@ -7413,7 +7547,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             second: dateObj.second(),
         });
         if (!dateObj.isValid()) {
-            console.log('[DateTimePicker] Invalid date object, returning nulls');
+            console.debug('[DateTimePicker] Invalid date object, returning nulls');
             return {
                 hour12: null,
                 minute: null,
@@ -7434,11 +7568,11 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             hour24: hour24Value,
             second: secondValue,
         };
-        console.log('[DateTimePicker] Extracted time values:', result);
+        console.debug('[DateTimePicker] Extracted time values:', result);
         return result;
     }, [timezone, showSeconds]);
     const initialTime = getTimeFromValue(value);
-    console.log('[DateTimePicker] Initial time from value:', {
+    console.debug('[DateTimePicker] Initial time from value:', {
         value,
         initialTime,
     });
@@ -7515,14 +7649,14 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     const [second, setSecond] = useState(initialTimeValues.second);
     // Sync selectedDate and time states when value prop changes
     useEffect(() => {
-        console.log('[DateTimePicker] useEffect triggered - value changed:', {
+        console.debug('[DateTimePicker] useEffect triggered - value changed:', {
             value,
             timezone,
             format,
         });
         // If value is null, undefined, or invalid, clear date but keep default time values
         if (!value || value === null || value === undefined) {
-            console.log('[DateTimePicker] Value is null/undefined, clearing date but keeping default time');
+            console.debug('[DateTimePicker] Value is null/undefined, clearing date but keeping default time');
             setSelectedDate('');
             // Keep default time values instead of clearing them
             if (format === 'iso-date-time') {
@@ -7544,7 +7678,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         // Check if value is valid
         const dateObj = dayjs(value).tz(timezone);
         if (!dateObj.isValid()) {
-            console.log('[DateTimePicker] Invalid value, clearing date but keeping default time');
+            console.debug('[DateTimePicker] Invalid value, clearing date but keeping default time');
             setSelectedDate('');
             // Keep default time values instead of clearing them
             if (format === 'iso-date-time') {
@@ -7564,10 +7698,10 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             return;
         }
         const dateString = getDateString(value);
-        console.log('[DateTimePicker] Setting selectedDate:', dateString);
+        console.debug('[DateTimePicker] Setting selectedDate:', dateString);
         setSelectedDate(dateString);
         const timeData = getTimeFromValue(value);
-        console.log('[DateTimePicker] Updating time states:', {
+        console.debug('[DateTimePicker] Updating time states:', {
             timeData,
         });
         setHour12(timeData.hour12);
@@ -7577,7 +7711,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         setSecond(timeData.second);
     }, [value, getTimeFromValue, getDateString, timezone]);
     const handleDateChange = (date) => {
-        console.log('[DateTimePicker] handleDateChange called:', {
+        console.debug('[DateTimePicker] handleDateChange called:', {
             date,
             timezone,
             showSeconds,
@@ -7585,7 +7719,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         });
         // If date is empty or invalid, clear all fields
         if (!date || date === '') {
-            console.log('[DateTimePicker] Empty date, clearing all fields');
+            console.debug('[DateTimePicker] Empty date, clearing all fields');
             setSelectedDate('');
             setHour12(null);
             setMinute(null);
@@ -7598,7 +7732,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         setSelectedDate(date);
         // Parse the date string (YYYY-MM-DD) in the specified timezone
         const dateObj = dayjs.tz(date, timezone);
-        console.log('[DateTimePicker] Parsed date object:', {
+        console.debug('[DateTimePicker] Parsed date object:', {
             date,
             timezone,
             isValid: dateObj.isValid(),
@@ -7624,7 +7758,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         if (!hasTimeValues) {
             // Use defaultTime if provided, otherwise default to 00:00
             if (defaultTime) {
-                console.log('[DateTimePicker] No time values set, using defaultTime');
+                console.debug('[DateTimePicker] No time values set, using defaultTime');
                 if (format === 'iso-date-time') {
                     const defaultTime24 = defaultTime;
                     setHour24(defaultTime24.hour ?? 0);
@@ -7651,7 +7785,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
                 }
             }
             else {
-                console.log('[DateTimePicker] No time values set, defaulting to 00:00');
+                console.debug('[DateTimePicker] No time values set, defaulting to 00:00');
                 if (format === 'iso-date-time') {
                     setHour24(0);
                     setMinute(0);
@@ -7679,17 +7813,17 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         // When showSeconds is false, ignore seconds from the date
         if (!showSeconds) {
             const dateWithoutSeconds = dateObj.second(0).millisecond(0).toISOString();
-            console.log('[DateTimePicker] Updating date without seconds:', dateWithoutSeconds);
+            console.debug('[DateTimePicker] Updating date without seconds:', dateWithoutSeconds);
             updateDateTime(dateWithoutSeconds, timeDataToUse);
         }
         else {
             const dateWithSeconds = dateObj.toISOString();
-            console.log('[DateTimePicker] Updating date with seconds:', dateWithSeconds);
+            console.debug('[DateTimePicker] Updating date with seconds:', dateWithSeconds);
             updateDateTime(dateWithSeconds, timeDataToUse);
         }
     };
     const handleTimeChange = (timeData) => {
-        console.log('[DateTimePicker] handleTimeChange called:', {
+        console.debug('[DateTimePicker] handleTimeChange called:', {
             timeData,
             format,
             selectedDate,
@@ -7697,7 +7831,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         });
         if (format === 'iso-date-time') {
             const data = timeData;
-            console.log('[DateTimePicker] ISO format - setting 24-hour time:', data);
+            console.debug('[DateTimePicker] ISO format - setting 24-hour time:', data);
             setHour24(data.hour);
             setMinute(data.minute);
             if (showSeconds) {
@@ -7710,7 +7844,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         }
         else {
             const data = timeData;
-            console.log('[DateTimePicker] 12-hour format - setting time:', data);
+            console.debug('[DateTimePicker] 12-hour format - setting time:', data);
             setHour12(data.hour);
             setMinute(data.minute);
             setMeridiem(data.meridiem);
@@ -7719,7 +7853,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         if (!selectedDate || !dayjs(selectedDate).isValid()) {
             // If effectiveDefaultDate is available, use it instead of clearing
             if (effectiveDefaultDate && dayjs(effectiveDefaultDate).isValid()) {
-                console.log('[DateTimePicker] No valid selectedDate, using effectiveDefaultDate:', effectiveDefaultDate);
+                console.debug('[DateTimePicker] No valid selectedDate, using effectiveDefaultDate:', effectiveDefaultDate);
                 setSelectedDate(effectiveDefaultDate);
                 const dateObj = dayjs(effectiveDefaultDate).tz(timezone);
                 if (dateObj.isValid()) {
@@ -7738,7 +7872,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
                 return;
             }
             else {
-                console.log('[DateTimePicker] No valid selectedDate and no effectiveDefaultDate, keeping time values but no date');
+                console.debug('[DateTimePicker] No valid selectedDate and no effectiveDefaultDate, keeping time values but no date');
                 // Keep the time values that were just set, but don't set a date
                 // This should rarely happen as effectiveDefaultDate always defaults to today
                 setSelectedDate('');
@@ -7762,14 +7896,14 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         }
     };
     const updateDateTime = (date, timeData) => {
-        console.log('[DateTimePicker] updateDateTime called:', {
+        console.debug('[DateTimePicker] updateDateTime called:', {
             date,
             timeData,
             format,
             currentStates: { hour12, minute, meridiem, hour24, second },
         });
         if (!date || date === null || date === undefined) {
-            console.log('[DateTimePicker] No date provided, clearing all fields and calling onChange(undefined)');
+            console.debug('[DateTimePicker] No date provided, clearing all fields and calling onChange(undefined)');
             setSelectedDate('');
             setHour12(null);
             setMinute(null);
@@ -7807,11 +7941,11 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
                 : 0;
             // If all time values are null, clear the value
             if (h === null && m === null && (showSeconds ? s === null : true)) {
-                console.log('[DateTimePicker] All time values are null, clearing value');
+                console.debug('[DateTimePicker] All time values are null, clearing value');
                 onChange?.(undefined);
                 return;
             }
-            console.log('[DateTimePicker] ISO format - setting time on date:', {
+            console.debug('[DateTimePicker] ISO format - setting time on date:', {
                 h,
                 m,
                 s,
@@ -7825,7 +7959,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         }
         else {
             const data = timeData;
-            console.log('[DateTimePicker] Processing 12-hour format:', {
+            console.debug('[DateTimePicker] Processing 12-hour format:', {
                 'data !== undefined': data !== undefined,
                 'data?.hour': data?.hour,
                 'data?.minute': data?.minute,
@@ -7838,14 +7972,14 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             const h = data !== undefined ? data.hour : hour12;
             const m = data !== undefined ? data.minute : minute;
             const mer = data !== undefined ? data.meridiem : meridiem;
-            console.log('[DateTimePicker] Resolved time values:', { h, m, mer });
+            console.debug('[DateTimePicker] Resolved time values:', { h, m, mer });
             // If all time values are null, clear the value
             if (h === null && m === null && mer === null) {
-                console.log('[DateTimePicker] All time values are null, clearing value');
+                console.debug('[DateTimePicker] All time values are null, clearing value');
                 onChange?.(undefined);
                 return;
             }
-            console.log('[DateTimePicker] 12-hour format - converting time:', {
+            console.debug('[DateTimePicker] 12-hour format - converting time:', {
                 h,
                 m,
                 mer,
@@ -7856,7 +7990,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
                     hour24 = 0;
                 else if (mer === 'pm' && h < 12)
                     hour24 = h + 12;
-                console.log('[DateTimePicker] Converted to 24-hour:', {
+                console.debug('[DateTimePicker] Converted to 24-hour:', {
                     h,
                     mer,
                     hour24,
@@ -7864,7 +7998,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
                 newDate.setHours(hour24);
             }
             else {
-                console.log('[DateTimePicker] Skipping hour update - h or mer is null:', {
+                console.debug('[DateTimePicker] Skipping hour update - h or mer is null:', {
                     h,
                     mer,
                 });
@@ -7873,12 +8007,12 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
                 newDate.setMinutes(m);
             }
             else {
-                console.log('[DateTimePicker] Skipping minute update - m is null');
+                console.debug('[DateTimePicker] Skipping minute update - m is null');
             }
             newDate.setSeconds(0);
         }
         const finalISO = dayjs(newDate).tz(timezone).toISOString();
-        console.log('[DateTimePicker] Final ISO string to emit:', {
+        console.debug('[DateTimePicker] Final ISO string to emit:', {
             newDate: newDate.toISOString(),
             timezone,
             finalISO,
@@ -7913,7 +8047,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             : undefined;
     // Log current state before render
     useEffect(() => {
-        console.log('[DateTimePicker] Current state before render:', {
+        console.debug('[DateTimePicker] Current state before render:', {
             isISO,
             hour12,
             minute,