@bsol-oss/react-datatable5 13.0.1-beta.6 → 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';
@@ -4373,39 +4373,31 @@ const FormRoot = ({ schema, idMap, setIdMap, form, translate, children, order =
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
 
-function removeIndex(str) {
-    return str.replace(/\.\d+\./g, ".");
-}
-
 /**
- * Custom hook for form field labels and fallback text.
- * Automatically handles colLabel construction and removeIndex logic.
- * Uses schema.title when available, otherwise falls back to translate function.
+ * Custom hook for form field labels.
+ * Automatically handles colLabel construction.
+ * Uses schema.title for labels and schema.errorMessages for error messages.
  *
  * @param column - The column name
  * @param prefix - The prefix for the field (usually empty string or parent path)
- * @param schema - Required schema object with title property
+ * @param schema - Required schema object with title and errorMessages properties
  * @returns Object with label helper functions
  *
  * @example
  * ```tsx
  * const formI18n = useFormI18n(column, prefix, schema);
  *
- * // Get field label (prefers schema.title)
+ * // Get field label (from schema.title)
  * <Field label={formI18n.label()} />
  *
- * // Get required error message
+ * // Get required error message (from schema.errorMessages?.required)
  * <Text>{formI18n.required()}</Text>
  *
- * // Get custom text
- * <Text>{formI18n.t('add_more')}</Text>
- *
  * // Access the raw colLabel
  * const colLabel = formI18n.colLabel;
  * ```
  */
 const useFormI18n = (column, prefix = '', schema) => {
-    const { translate } = useSchemaContext();
     const colLabel = `${prefix}${column}`;
     return {
         /**
@@ -4413,10 +4405,10 @@ const useFormI18n = (column, prefix = '', schema) => {
          */
         colLabel,
         /**
-         * Get the field label from schema title prop, or fall back to translate function
-         * Uses schema.title if available, otherwise: translate.t(removeIndex(`${colLabel}.field_label`))
+         * Get the field label from schema title property.
+         * Logs a debug message if title is missing.
          */
-        label: (options) => {
+        label: () => {
             if (schema.title) {
                 return schema.title;
             }
@@ -4432,29 +4424,36 @@ const useFormI18n = (column, prefix = '', schema) => {
                         : undefined,
                 },
             });
-            return translate.t(removeIndex(`${colLabel}.field_label`), options);
+            // Return column name as fallback
+            return column;
         },
         /**
-         * Get the required error message
-         * Equivalent to: translate.t(removeIndex(`${colLabel}.field_required`))
+         * Get the required error message from schema.errorMessages?.required.
+         * Returns a helpful fallback message if not provided.
          */
-        required: (options) => {
-            return translate.t(removeIndex(`${colLabel}.field_required`), options);
-        },
-        /**
-         * Get text for any custom key relative to the field
-         * Equivalent to: translate.t(removeIndex(`${colLabel}.${key}`))
-         *
-         * @param key - The key suffix (e.g., 'add_more', 'total', etc.)
-         * @param options - Optional options (e.g., defaultValue, interpolation variables)
-         */
-        t: (key, options) => {
-            return translate.t(removeIndex(`${colLabel}.${key}`), options);
+        required: () => {
+            const errorMessage = schema.errorMessages?.required;
+            if (errorMessage) {
+                return errorMessage;
+            }
+            // Debug log when error message is missing
+            console.debug(`[Form Field Required] Missing error message for required field '${colLabel}'. Add errorMessages.required to schema for field '${colLabel}'.`, {
+                fieldName: column,
+                colLabel,
+                prefix,
+                schema: {
+                    type: schema.type,
+                    title: schema.title,
+                    required: schema.required,
+                    hasErrorMessages: !!schema.errorMessages,
+                    errorMessageKeys: schema.errorMessages
+                        ? Object.keys(schema.errorMessages)
+                        : undefined,
+                },
+            });
+            // Return helpful fallback message
+            return `Missing error message for required. Add errorMessages.required to schema for field '${colLabel}'`;
         },
-        /**
-         * Access to the original translate object for edge cases
-         */
-        translate,
     };
 };
 
@@ -5070,27 +5069,82 @@ 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 (returns ReactNode)
+    // If renderDisplay is provided, use it; otherwise show the enum string value directly
+    const renderEnumValue = (value) => {
+        if (renderDisplay) {
+            return renderDisplay(value);
+        }
+        // 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.`, {
+            fieldName: column,
+            colLabel,
+            prefix,
+            enumValues: dataList,
+        });
+    }
     // Current value for combobox (array format)
     const currentValue = isMultiple
         ? watchEnums.filter((val) => val != null && val !== '')
         : watchEnum
             ? [watchEnum]
             : [];
-    // Transform enum data for combobox collection
+    // 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: !!renderDisplay === true
-                ? String(renderDisplay(item))
-                : formI18n.t(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, renderDisplay, formI18n]);
+    }, [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,
     });
@@ -5114,9 +5168,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                         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(RadioGroup$1.Item, { value: item, children: [jsx(RadioGroup$1.ItemHiddenInput, {}), jsx(RadioGroup$1.ItemIndicator, {}), jsx(RadioGroup$1.ItemText, { children: renderEnumValue(item) })] }, `${colLabel}-${item}`));
                     }) }) }) }));
     }
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
@@ -5127,16 +5179,31 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                     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));
+                        }, 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 ?? formI18n.t('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 ?? 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, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), 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 ?? 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, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) }) }))] })] }));
+                                        } })), 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}`))) }))] }) }) }))] })] }));
 };
 
 function isEnteringWindow(_ref) {
@@ -5751,7 +5818,7 @@ const FilePicker = ({ column, schema, prefix }) => {
                             const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
                             setValue(colLabel, [...currentFiles, ...newFiles]);
                         }
-                    }, placeholder: filePickerLabels?.fileDropzone ?? formI18n.t('fileDropzone') }) }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
+                    }, placeholder: filePickerLabels?.fileDropzone ?? 'Drop files here' }) }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
                     const fileIdentifier = getFileIdentifier(file, index);
                     const fileName = getFileName(file);
                     const fileSize = getFileSize(file);
@@ -5862,9 +5929,7 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
         }
     };
     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(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ?? formI18n.label() ?? 'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
+        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 ?? 'Browse from Library' }) }), jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ?? formI18n.label() ?? 'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
                     const file = fileMap.get(fileId);
                     const isImage = file
                         ? /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name)
@@ -5880,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) {
@@ -6021,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,
             };
         });
@@ -6040,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,
     });
@@ -6113,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,
@@ -6123,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,
@@ -6190,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];
@@ -6215,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) {
@@ -7361,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,
@@ -7380,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,
@@ -7396,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(),
@@ -7406,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,
@@ -7427,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,
     });
@@ -7508,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') {
@@ -7537,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') {
@@ -7557,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);
@@ -7570,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,
@@ -7578,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);
@@ -7591,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(),
@@ -7617,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);
@@ -7644,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);
@@ -7672,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,
@@ -7690,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) {
@@ -7703,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);
@@ -7712,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()) {
@@ -7731,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('');
@@ -7755,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);
@@ -7800,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,
@@ -7818,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,
@@ -7831,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,
@@ -7849,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,
@@ -7857,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,
                 });
@@ -7866,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,
@@ -7906,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,
@@ -8166,7 +8307,7 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
     const value = watch(colLabel);
     const formI18n = useFormI18n(column, prefix, schema);
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, children: [jsx(Text, { children: value ? formI18n.t('true') : formI18n.t('false') }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
+        gridRow, children: [jsx(Text, { children: value ? 'True' : 'False' }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const CustomViewer = ({ column, schema, prefix }) => {
@@ -8205,16 +8346,15 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
+    const renderDisplayFunction = renderDisplay || defaultRenderDisplay;
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: 'wrap', gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
                         return jsx(Fragment, { children: "undefined" });
                     }
-                    return (jsx(Tag, { size: "lg", children: !!renderDisplay === true
-                            ? renderDisplay(item)
-                            : formI18n.t(item) }, item));
-                }) })), !isMultiple && jsx(Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
+                    return (jsx(Tag, { size: "lg", children: renderDisplayFunction(item) }, item));
+                }) })), !isMultiple && jsx(Text, { children: renderDisplayFunction(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {