@bsol-oss/react-datatable5 13.0.1-beta.3 → 13.0.1-beta.5

package/dist/index.js

@@ -31,8 +31,8 @@ var addFormats = require('ajv-formats');
 var dayjs = require('dayjs');
 var utc = require('dayjs/plugin/utc');
 var timezone = require('dayjs/plugin/timezone');
-var ti = require('react-icons/ti');
 var customParseFormat = require('dayjs/plugin/customParseFormat');
+var ti = require('react-icons/ti');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 
 function _interopNamespaceDefault(e) {
@@ -4146,6 +4146,22 @@ const convertAjvErrorsToFieldErrors = (errors, schema) => {
             // Get the schema node for this field to check for custom error messages
             const fieldSchema = getSchemaNodeForField(schema, fieldName);
             const customMessage = fieldSchema?.errorMessages?.[error.keyword];
+            // Debug log when error message is missing
+            if (!customMessage) {
+                console.debug(`[Form Validation] Missing error message for field '${fieldName}' with keyword '${error.keyword}'. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`, {
+                    fieldName,
+                    keyword: error.keyword,
+                    instancePath: error.instancePath,
+                    schemaPath: error.schemaPath,
+                    params: error.params,
+                    fieldSchema: fieldSchema
+                        ? {
+                            type: fieldSchema.type,
+                            errorMessages: fieldSchema.errorMessages,
+                        }
+                        : undefined,
+                });
+            }
             // Provide helpful fallback message if no custom message is provided
             const fallbackMessage = customMessage ||
                 `Missing error message for ${error.keyword}. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`;
@@ -4388,7 +4404,7 @@ function removeIndex(str) {
  *
  * @param column - The column name
  * @param prefix - The prefix for the field (usually empty string or parent path)
- * @param schema - Optional schema object with title property
+ * @param schema - Required schema object with title property
  * @returns Object with label helper functions
  *
  * @example
@@ -4421,9 +4437,21 @@ const useFormI18n = (column, prefix = '', schema) => {
          * Uses schema.title if available, otherwise: translate.t(removeIndex(`${colLabel}.field_label`))
          */
         label: (options) => {
-            if (schema?.title) {
+            if (schema.title) {
                 return schema.title;
             }
+            // Debug log when field title is missing
+            console.debug(`[Form Field Label] Missing title for field '${colLabel}'. Add title property to schema for field '${colLabel}'.`, {
+                fieldName: column,
+                colLabel,
+                prefix,
+                schema: {
+                    type: schema.type,
+                    errorMessages: schema.errorMessages
+                        ? Object.keys(schema.errorMessages)
+                        : undefined,
+                },
+            });
             return translate.t(removeIndex(`${colLabel}.field_label`), options);
         },
         /**
@@ -4517,6 +4545,9 @@ const CustomInput = ({ column, schema, prefix }) => {
         }));
 };
 
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
 const Calendar = ({ calendars, getBackProps, getForwardProps, getDateProps, firstDayOfWeek = 0, }) => {
     const { labels } = React.useContext(DatePickerContext);
     const { monthNamesShort, weekdayNamesShort, backButtonLabel, forwardButtonLabel, } = labels;
@@ -4586,6 +4617,9 @@ const DatePickerContext = React.createContext({
         weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
         backButtonLabel: 'Back',
         forwardButtonLabel: 'Next',
+        todayLabel: 'Today',
+        yesterdayLabel: 'Yesterday',
+        tomorrowLabel: 'Tomorrow',
     },
 });
 const DatePicker$1 = ({ labels = {
@@ -4606,6 +4640,9 @@ const DatePicker$1 = ({ labels = {
     weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     backButtonLabel: 'Back',
     forwardButtonLabel: 'Next',
+    todayLabel: 'Today',
+    yesterdayLabel: 'Yesterday',
+    tomorrowLabel: 'Tomorrow',
 }, onDateSelected, selected, firstDayOfWeek, showOutsideDays, date, minDate, maxDate, monthsToDisplay, render, }) => {
     const calendarData = useCalendar({
         onDateSelected,
@@ -4620,9 +4657,164 @@ const DatePicker$1 = ({ labels = {
     return (jsxRuntime.jsx(DatePickerContext.Provider, { value: { labels }, children: render ? (render(calendarData)) : (jsxRuntime.jsx(Calendar, { ...calendarData,
             firstDayOfWeek })) }));
 };
+function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateFormat = 'YYYY-MM-DD', displayFormat = 'YYYY-MM-DD', labels = {
+    monthNamesShort: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ],
+    weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    backButtonLabel: 'Back',
+    forwardButtonLabel: 'Next',
+    todayLabel: 'Today',
+    yesterdayLabel: 'Yesterday',
+    tomorrowLabel: 'Tomorrow',
+}, timezone = 'Asia/Hong_Kong', minDate, maxDate, firstDayOfWeek, showOutsideDays, monthsToDisplay = 1, insideDialog = false, readOnly = false, showHelperButtons = true, }) {
+    const [open, setOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState('');
+    // Update input value when prop value changes
+    React.useEffect(() => {
+        if (value) {
+            const formatted = typeof value === 'string'
+                ? dayjs(value).tz(timezone).isValid()
+                    ? dayjs(value).tz(timezone).format(displayFormat)
+                    : ''
+                : dayjs(value).tz(timezone).format(displayFormat);
+            setInputValue(formatted);
+        }
+        else {
+            setInputValue('');
+        }
+    }, [value, displayFormat, timezone]);
+    // Convert value to Date object for DatePicker
+    const selectedDate = value
+        ? typeof value === 'string'
+            ? dayjs(value).tz(timezone).isValid()
+                ? dayjs(value).tz(timezone).toDate()
+                : new Date()
+            : value
+        : new Date();
+    // Shared function to parse and validate input value
+    const parseAndValidateInput = (inputVal) => {
+        // If empty, clear the value
+        if (!inputVal.trim()) {
+            onChange?.(undefined);
+            setInputValue('');
+            return;
+        }
+        // Try parsing with displayFormat first
+        let parsedDate = dayjs(inputVal, displayFormat, true);
+        // If that fails, try common date formats
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal);
+        }
+        // If still invalid, try parsing with dateFormat
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal, dateFormat, true);
+        }
+        // If valid, check constraints and update
+        if (parsedDate.isValid()) {
+            const dateObj = parsedDate.tz(timezone).toDate();
+            // Check min/max constraints
+            if (minDate && dateObj < minDate) {
+                // Invalid: before minDate, reset to prop value
+                resetToPropValue();
+                return;
+            }
+            if (maxDate && dateObj > maxDate) {
+                // Invalid: after maxDate, reset to prop value
+                resetToPropValue();
+                return;
+            }
+            // Valid date - format and update
+            const formattedDate = parsedDate.tz(timezone).format(dateFormat);
+            const formattedDisplay = parsedDate.tz(timezone).format(displayFormat);
+            onChange?.(formattedDate);
+            setInputValue(formattedDisplay);
+        }
+        else {
+            // Invalid date - reset to prop value
+            resetToPropValue();
+        }
+    };
+    // Helper function to reset input to prop value
+    const resetToPropValue = () => {
+        if (value) {
+            const formatted = typeof value === 'string'
+                ? dayjs(value).tz(timezone).isValid()
+                    ? dayjs(value).tz(timezone).format(displayFormat)
+                    : ''
+                : dayjs(value).tz(timezone).format(displayFormat);
+            setInputValue(formatted);
+        }
+        else {
+            setInputValue('');
+        }
+    };
+    const handleInputChange = (e) => {
+        // Only update the input value, don't parse yet
+        setInputValue(e.target.value);
+    };
+    const handleInputBlur = () => {
+        // Parse and validate when input loses focus
+        parseAndValidateInput(inputValue);
+    };
+    const handleKeyDown = (e) => {
+        // Parse and validate when Enter is pressed
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            parseAndValidateInput(inputValue);
+        }
+    };
+    const handleDateSelected = ({ date }) => {
+        const formattedDate = dayjs(date).tz(timezone).format(dateFormat);
+        onChange?.(formattedDate);
+        setOpen(false);
+    };
+    // Helper function to get dates in the correct timezone
+    const getToday = () => dayjs().tz(timezone).startOf('day').toDate();
+    const getYesterday = () => dayjs().tz(timezone).subtract(1, 'day').startOf('day').toDate();
+    const getTomorrow = () => dayjs().tz(timezone).add(1, 'day').startOf('day').toDate();
+    // Check if a date is within min/max constraints
+    const isDateValid = (date) => {
+        if (minDate) {
+            const minDateStart = dayjs(minDate).tz(timezone).startOf('day').toDate();
+            const dateStart = dayjs(date).tz(timezone).startOf('day').toDate();
+            if (dateStart < minDateStart)
+                return false;
+        }
+        if (maxDate) {
+            const maxDateStart = dayjs(maxDate).tz(timezone).startOf('day').toDate();
+            const dateStart = dayjs(date).tz(timezone).startOf('day').toDate();
+            if (dateStart > maxDateStart)
+                return false;
+        }
+        return true;
+    };
+    const handleHelperButtonClick = (date) => {
+        if (isDateValid(date)) {
+            handleDateSelected({ date });
+        }
+    };
+    const today = getToday();
+    const yesterday = getYesterday();
+    const tomorrow = getTomorrow();
+    const datePickerContent = (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [showHelperButtons && (jsxRuntime.jsxs(react.Grid, { templateColumns: "repeat(3, 1fr)", gap: 2, children: [jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(yesterday), disabled: !isDateValid(yesterday), children: labels.yesterdayLabel ?? 'Yesterday' }), jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(today), disabled: !isDateValid(today), children: labels.todayLabel ?? 'Today' }), jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(tomorrow), disabled: !isDateValid(tomorrow), children: labels.tomorrowLabel ?? 'Tomorrow' })] })), jsxRuntime.jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay })] }));
+    return (jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(InputGroup, { endElement: jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdDateRange, {}) }) }) }), children: jsxRuntime.jsx(react.Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) }) }))] }));
+}
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { timezone, dateTimePickerLabels, insideDialog } = useSchemaContext();
@@ -4631,15 +4823,29 @@ const DatePicker = ({ column, schema, prefix }) => {
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = formI18n.colLabel;
     const [open, setOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState('');
     const selectedDate = watch(colLabel);
-    const displayDate = dayjs(selectedDate)
-        .tz(timezone)
-        .format(displayDateFormat);
+    // Update input value when form value changes
+    React.useEffect(() => {
+        if (selectedDate) {
+            const parsedDate = dayjs(selectedDate).tz(timezone);
+            if (parsedDate.isValid()) {
+                const formatted = parsedDate.format(displayDateFormat);
+                setInputValue(formatted);
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        else {
+            setInputValue('');
+        }
+    }, [selectedDate, displayDateFormat, timezone]);
+    // Format and validate existing value
     React.useEffect(() => {
         try {
             if (selectedDate) {
                 // Parse the selectedDate as UTC or in a specific timezone to avoid +8 hour shift
-                // For example, parse as UTC:
                 const parsedDate = dayjs(selectedDate).tz(timezone);
                 if (!parsedDate.isValid())
                     return;
@@ -4657,7 +4863,7 @@ const DatePicker = ({ column, schema, prefix }) => {
         catch (e) {
             console.error(e);
         }
-    }, [selectedDate, dateFormat, colLabel, setValue]);
+    }, [selectedDate, dateFormat, colLabel, setValue, timezone]);
     const datePickerLabels = {
         monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
             'January',
@@ -4685,14 +4891,92 @@ const DatePicker = ({ column, schema, prefix }) => {
         backButtonLabel: dateTimePickerLabels?.backButtonLabel ?? 'Back',
         forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ?? 'Forward',
     };
-    const datePickerContent = (jsxRuntime.jsx(DatePicker$1, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
-            setValue(colLabel, dayjs(date).format(dateFormat));
-            setOpen(false);
-        }, labels: datePickerLabels }));
+    // Convert value to Date object for DatePicker
+    const selectedDateObj = selectedDate
+        ? dayjs(selectedDate).tz(timezone).isValid()
+            ? dayjs(selectedDate).tz(timezone).toDate()
+            : new Date()
+        : new Date();
+    // Shared function to parse and validate input value
+    const parseAndValidateInput = (inputVal) => {
+        // If empty, clear the value
+        if (!inputVal.trim()) {
+            setValue(colLabel, undefined, {
+                shouldValidate: true,
+                shouldDirty: true,
+            });
+            setInputValue('');
+            return;
+        }
+        // Try parsing with displayDateFormat first
+        let parsedDate = dayjs(inputVal, displayDateFormat, true);
+        // If that fails, try common date formats
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal);
+        }
+        // If still invalid, try parsing with dateFormat
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal, dateFormat, true);
+        }
+        // If valid, format and update
+        if (parsedDate.isValid()) {
+            const formattedDate = parsedDate.tz(timezone).format(dateFormat);
+            const formattedDisplay = parsedDate
+                .tz(timezone)
+                .format(displayDateFormat);
+            setValue(colLabel, formattedDate, {
+                shouldValidate: true,
+                shouldDirty: true,
+            });
+            setInputValue(formattedDisplay);
+        }
+        else {
+            // Invalid date - reset to prop value
+            resetToPropValue();
+        }
+    };
+    // Helper function to reset input to prop value
+    const resetToPropValue = () => {
+        if (selectedDate) {
+            const parsedDate = dayjs(selectedDate).tz(timezone);
+            if (parsedDate.isValid()) {
+                const formatted = parsedDate.format(displayDateFormat);
+                setInputValue(formatted);
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        else {
+            setInputValue('');
+        }
+    };
+    const handleInputChange = (e) => {
+        // Only update the input value, don't parse yet
+        setInputValue(e.target.value);
+    };
+    const handleInputBlur = () => {
+        // Parse and validate when input loses focus
+        parseAndValidateInput(inputValue);
+    };
+    const handleKeyDown = (e) => {
+        // Parse and validate when Enter is pressed
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            parseAndValidateInput(inputValue);
+        }
+    };
+    const handleDateSelected = ({ date }) => {
+        const formattedDate = dayjs(date).tz(timezone).format(dateFormat);
+        setValue(colLabel, formattedDate, {
+            shouldValidate: true,
+            shouldDirty: true,
+        });
+        setOpen(false);
+    };
+    const datePickerContent = (jsxRuntime.jsx(DatePicker$1, { selected: selectedDateObj, onDateSelected: handleDateSelected, labels: datePickerLabels }));
     return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
-                            setOpen(true);
-                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) }) }))] }) }));
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(InputGroup, { endElement: jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdDateRange, {}) }) }) }), children: jsxRuntime.jsx(react.Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: formI18n.label(), size: "sm" }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) }) }))] }) }));
 };
 
 dayjs.extend(utc);
@@ -4700,7 +4984,7 @@ dayjs.extend(timezone);
 const DateRangePicker = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { timezone, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = formI18n.colLabel;
@@ -5345,7 +5629,7 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
                     }) })) }))] }));
 };
 
-function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, colLabel, }) {
+function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, }) {
     const [selectedFile, setSelectedFile] = React.useState(undefined);
     const [activeTab, setActiveTab] = React.useState('browse');
     const [uploadingFiles, setUploadingFiles] = React.useState(new Set());
@@ -5429,7 +5713,7 @@ function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly =
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5505,7 +5789,7 @@ const FilePicker = ({ column, schema, prefix }) => {
 const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5600,9 +5884,7 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsxRuntime.jsx(react.VStack, { align: "stretch", gap: 2, children: jsxRuntime.jsx(react.Button, { 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' }) }), jsxRuntime.jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
-                    filePickerLabels?.dialogTitle ??
-                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
+                        'Browse from Library' }) }), jsxRuntime.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 }), jsxRuntime.jsx(react.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)
@@ -5693,7 +5975,8 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             }
             // Use schema's loadInitialValues (required for id-picker)
             if (!loadInitialValues) {
-                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
+                console.warn(`loadInitialValues is required in schema for IdPicker field '${column}'. Returning empty idMap.`);
+                return { data: [], count: 0 };
             }
             const result = await loadInitialValues({
                 ids: missingIds,
@@ -6425,14 +6708,74 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
                 }
             }
         }
-        return options;
+        // Sort options by time (convert to 24-hour for proper chronological sorting)
+        return options.sort((a, b) => {
+            // Convert 12-hour to 24-hour for comparison
+            let hour24A = a.hour;
+            if (a.meridiem === 'am' && a.hour === 12)
+                hour24A = 0;
+            else if (a.meridiem === 'pm' && a.hour < 12)
+                hour24A = a.hour + 12;
+            let hour24B = b.hour;
+            if (b.meridiem === 'am' && b.hour === 12)
+                hour24B = 0;
+            else if (b.meridiem === 'pm' && b.hour < 12)
+                hour24B = b.hour + 12;
+            // Compare by hour first, then minute
+            if (hour24A !== hour24B) {
+                return hour24A - hour24B;
+            }
+            return a.minute - b.minute;
+        });
     }, [startTime, selectedDate, timezone]);
-    const { contains } = react.useFilter({ sensitivity: 'base' });
+    // itemToString returns only the clean display text (no metadata)
+    const itemToString = React.useMemo(() => {
+        return (item) => {
+            return item.searchText; // Clean display text only
+        };
+    }, []);
+    // Custom filter function that filters by time and supports 24-hour format input
+    const customTimeFilter = React.useMemo(() => {
+        return (itemText, filterText) => {
+            if (!filterText) {
+                return true; // Show all items when no filter
+            }
+            const lowerItemText = itemText.toLowerCase();
+            const lowerFilterText = filterText.toLowerCase();
+            // First, try matching against the display text (12-hour format)
+            if (lowerItemText.includes(lowerFilterText)) {
+                return true;
+            }
+            // Find the corresponding item to check 24-hour format matches
+            const item = timeOptions.find((opt) => opt.searchText.toLowerCase() === lowerItemText);
+            if (!item) {
+                return false;
+            }
+            // Convert item to 24-hour format for matching
+            let hour24 = item.hour;
+            if (item.meridiem === 'am' && item.hour === 12)
+                hour24 = 0;
+            else if (item.meridiem === 'pm' && item.hour < 12)
+                hour24 = item.hour + 12;
+            const hour24Str = hour24.toString().padStart(2, '0');
+            const minuteStr = item.minute.toString().padStart(2, '0');
+            // Check if filterText matches 24-hour format variations
+            const formats = [
+                `${hour24Str}:${minuteStr}`, // "13:30"
+                `${hour24Str}${minuteStr}`, // "1330"
+                hour24Str, // "13"
+                `${hour24}:${minuteStr}`, // "13:30" (without padding)
+                hour24.toString(), // "13" (without padding)
+            ];
+            return formats.some((format) => format.toLowerCase().includes(lowerFilterText) ||
+                lowerFilterText.includes(format.toLowerCase()));
+        };
+    }, [timeOptions]);
     const { collection, filter } = react.useListCollection({
         initialItems: timeOptions,
-        itemToString: (item) => item.searchText, // Use searchText (without duration) for filtering
+        itemToString: itemToString,
         itemToValue: (item) => item.value,
-        filter: contains,
+        filter: customTimeFilter,
     });
     // Get current value string for combobox
     const currentValue = React.useMemo(() => {
@@ -6522,6 +6865,47 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
         if (!trimmedValue) {
             return;
         }
+        // Parse 24-hour format first (e.g., "13:30", "14:00", "1330", "1400", "9:05", "905")
+        const timePattern24Hour = /^(\d{1,2}):?(\d{2})$/;
+        const match24Hour = trimmedValue.match(timePattern24Hour);
+        if (match24Hour) {
+            const parsedHour24 = parseInt(match24Hour[1], 10);
+            const parsedMinute = parseInt(match24Hour[2], 10);
+            // Validate 24-hour format ranges
+            if (parsedHour24 >= 0 &&
+                parsedHour24 <= 23 &&
+                parsedMinute >= 0 &&
+                parsedMinute <= 59) {
+                // Convert 24-hour to 12-hour format
+                let hour12;
+                let meridiem;
+                if (parsedHour24 === 0) {
+                    hour12 = 12;
+                    meridiem = 'am';
+                }
+                else if (parsedHour24 === 12) {
+                    hour12 = 12;
+                    meridiem = 'pm';
+                }
+                else if (parsedHour24 > 12) {
+                    hour12 = parsedHour24 - 12;
+                    meridiem = 'pm';
+                }
+                else {
+                    hour12 = parsedHour24;
+                    meridiem = 'am';
+                }
+                setHour(hour12);
+                setMinute(parsedMinute);
+                setMeridiem(meridiem);
+                onChange({
+                    hour: hour12,
+                    minute: parsedMinute,
+                    meridiem: meridiem,
+                });
+                return;
+            }
+        }
         // Parse formats like "1:30 PM", "1:30PM", "1:30 pm", "1:30pm"
         const timePattern12Hour = /^(\d{1,2}):(\d{1,2})\s*(am|pm|AM|PM)$/i;
         const match12Hour = trimmedValue.match(timePattern12Hour);
@@ -6687,133 +7071,6 @@ const TimePicker = ({ column, schema, prefix }) => {
                         }, justifyContent: 'start', children: [jsxRuntime.jsx(io.IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsxRuntime.jsx(react.Popover.Body, { overflow: "visible", children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, labels: timePickerLabels }) }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { children: jsxRuntime.jsx(react.Popover.Body, { children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, labels: timePickerLabels }) }) }) }) }))] }) }));
 };
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(customParseFormat);
-function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateFormat = 'YYYY-MM-DD', displayFormat = 'YYYY-MM-DD', labels = {
-    monthNamesShort: [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ],
-    weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    backButtonLabel: 'Back',
-    forwardButtonLabel: 'Next',
-}, timezone = 'Asia/Hong_Kong', minDate, maxDate, firstDayOfWeek, showOutsideDays, monthsToDisplay = 1, insideDialog = false, readOnly = false, }) {
-    const [open, setOpen] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState('');
-    // Update input value when prop value changes
-    React.useEffect(() => {
-        if (value) {
-            const formatted = typeof value === 'string'
-                ? dayjs(value).tz(timezone).isValid()
-                    ? dayjs(value).tz(timezone).format(displayFormat)
-                    : ''
-                : dayjs(value).tz(timezone).format(displayFormat);
-            setInputValue(formatted);
-        }
-        else {
-            setInputValue('');
-        }
-    }, [value, displayFormat, timezone]);
-    // Convert value to Date object for DatePicker
-    const selectedDate = value
-        ? typeof value === 'string'
-            ? dayjs(value).tz(timezone).isValid()
-                ? dayjs(value).tz(timezone).toDate()
-                : new Date()
-            : value
-        : new Date();
-    // Shared function to parse and validate input value
-    const parseAndValidateInput = (inputVal) => {
-        // If empty, clear the value
-        if (!inputVal.trim()) {
-            onChange?.(undefined);
-            setInputValue('');
-            return;
-        }
-        // Try parsing with displayFormat first
-        let parsedDate = dayjs(inputVal, displayFormat, true);
-        // If that fails, try common date formats
-        if (!parsedDate.isValid()) {
-            parsedDate = dayjs(inputVal);
-        }
-        // If still invalid, try parsing with dateFormat
-        if (!parsedDate.isValid()) {
-            parsedDate = dayjs(inputVal, dateFormat, true);
-        }
-        // If valid, check constraints and update
-        if (parsedDate.isValid()) {
-            const dateObj = parsedDate.tz(timezone).toDate();
-            // Check min/max constraints
-            if (minDate && dateObj < minDate) {
-                // Invalid: before minDate, reset to prop value
-                resetToPropValue();
-                return;
-            }
-            if (maxDate && dateObj > maxDate) {
-                // Invalid: after maxDate, reset to prop value
-                resetToPropValue();
-                return;
-            }
-            // Valid date - format and update
-            const formattedDate = parsedDate.tz(timezone).format(dateFormat);
-            const formattedDisplay = parsedDate.tz(timezone).format(displayFormat);
-            onChange?.(formattedDate);
-            setInputValue(formattedDisplay);
-        }
-        else {
-            // Invalid date - reset to prop value
-            resetToPropValue();
-        }
-    };
-    // Helper function to reset input to prop value
-    const resetToPropValue = () => {
-        if (value) {
-            const formatted = typeof value === 'string'
-                ? dayjs(value).tz(timezone).isValid()
-                    ? dayjs(value).tz(timezone).format(displayFormat)
-                    : ''
-                : dayjs(value).tz(timezone).format(displayFormat);
-            setInputValue(formatted);
-        }
-        else {
-            setInputValue('');
-        }
-    };
-    const handleInputChange = (e) => {
-        // Only update the input value, don't parse yet
-        setInputValue(e.target.value);
-    };
-    const handleInputBlur = () => {
-        // Parse and validate when input loses focus
-        parseAndValidateInput(inputValue);
-    };
-    const handleKeyDown = (e) => {
-        // Parse and validate when Enter is pressed
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            parseAndValidateInput(inputValue);
-        }
-    };
-    const handleDateSelected = ({ date }) => {
-        const formattedDate = dayjs(date).tz(timezone).format(dateFormat);
-        onChange?.(formattedDate);
-        setOpen(false);
-    };
-    const datePickerContent = (jsxRuntime.jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay }));
-    return (jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(InputGroup, { endElement: jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdDateRange, {}) }) }) }), children: jsxRuntime.jsx(react.Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) }) }))] }));
-}
-
 dayjs.extend(utc);
 dayjs.extend(timezone);
 function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, 
@@ -7057,7 +7314,20 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
             });
         }
     };
+    const [inputValue, setInputValue] = React.useState('');
+    // Sync inputValue with currentValue when time changes externally
+    React.useEffect(() => {
+        if (hour !== null && minute !== null && second !== null) {
+            const formattedValue = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
+            setInputValue(formattedValue);
+        }
+        else {
+            setInputValue('');
+        }
+    }, [hour, minute, second]);
     const handleInputValueChange = (details) => {
+        // Update local input value state
+        setInputValue(details.inputValue);
         // Filter the collection based on input, but don't parse yet
         filter(details.inputValue);
     };
@@ -7067,24 +7337,26 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
     };
     const handleBlur = (e) => {
         // Parse and commit the input value when losing focus
-        const inputValue = e.target.value;
-        if (inputValue) {
-            parseAndCommitInput(inputValue);
+        const inputVal = e.target.value;
+        setInputValue(inputVal);
+        if (inputVal) {
+            parseAndCommitInput(inputVal);
         }
     };
     const handleKeyDown = (e) => {
         // Commit input on Enter key
         if (e.key === 'Enter') {
             e.preventDefault();
-            const inputValue = e.currentTarget.value;
-            if (inputValue) {
-                parseAndCommitInput(inputValue);
+            const inputVal = e.currentTarget.value;
+            setInputValue(inputVal);
+            if (inputVal) {
+                parseAndCommitInput(inputVal);
             }
             // Blur the input
             e.currentTarget?.blur();
         }
     };
-    return (jsxRuntime.jsx(react.Flex, { direction: "column", gap: 3, children: jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.InputGroup, { startElement: jsxRuntime.jsx(bs.BsClock, {}), children: jsxRuntime.jsx(react.Combobox.Input, { placeholder: labels.placeholder, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: jsxRuntime.jsx(react.Combobox.Trigger, {}) })] }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [jsxRuntime.jsx(react.Combobox.Empty, { children: labels.emptyMessage }), collection.items.map((item) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsxRuntime.jsx(react.Text, { flex: 1, children: item.label }), item.durationText && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", children: jsxRuntime.jsx(react.Tag.Label, { children: item.durationText }) }))] }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", children: jsxRuntime.jsx(react.Tag.Label, { children: durationDiff }) })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdCancel, {}) }) })] }) }));
+    return (jsxRuntime.jsx(react.Flex, { direction: "column", gap: 3, children: jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.InputGroup, { startElement: jsxRuntime.jsx(bs.BsClock, {}), children: jsxRuntime.jsx(react.Combobox.Input, { value: inputValue, placeholder: labels.placeholder, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: jsxRuntime.jsx(react.Combobox.Trigger, {}) })] }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [jsxRuntime.jsx(react.Combobox.Empty, { children: labels.emptyMessage }), collection.items.map((item) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsxRuntime.jsx(react.Text, { flex: 1, children: item.label }), item.durationText && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", children: jsxRuntime.jsx(react.Tag.Label, { children: item.durationText }) }))] }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", children: jsxRuntime.jsx(react.Tag.Label, { children: durationDiff }) })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdCancel, {}) }) })] }) }));
 }
 
 dayjs.extend(utc);
@@ -7107,7 +7379,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     backButtonLabel: 'Back',
     forwardButtonLabel: 'Next',
-}, timePickerLabels, timezone = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, }) {
+}, timePickerLabels, timezone = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, defaultDate, defaultTime, }) {
     console.log('[DateTimePicker] Component initialized with props:', {
         value,
         format,
@@ -7182,13 +7454,77 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         value,
         initialTime,
     });
+    // Normalize startTime to ignore milliseconds (needed for effectiveDefaultDate calculation)
+    const normalizedStartTime = startTime
+        ? dayjs(startTime).tz(timezone).millisecond(0).toISOString()
+        : undefined;
+    // Calculate effective defaultDate: use prop if provided, otherwise use startTime date, otherwise use today
+    const effectiveDefaultDate = React.useMemo(() => {
+        if (defaultDate) {
+            return defaultDate;
+        }
+        if (normalizedStartTime &&
+            dayjs(normalizedStartTime).tz(timezone).isValid()) {
+            return dayjs(normalizedStartTime).tz(timezone).format('YYYY-MM-DD');
+        }
+        return dayjs().tz(timezone).format('YYYY-MM-DD');
+    }, [defaultDate, normalizedStartTime, timezone]);
+    // Initialize time with default values if no value is provided
+    const getInitialTimeValues = () => {
+        if (value && initialTime.hour12 !== null) {
+            return initialTime;
+        }
+        // If no value or no time in value, use defaultTime or 00:00
+        if (defaultTime) {
+            if (format === 'iso-date-time') {
+                const defaultTime24 = defaultTime;
+                return {
+                    hour12: null,
+                    minute: defaultTime24.minute ?? 0,
+                    meridiem: null,
+                    hour24: defaultTime24.hour ?? 0,
+                    second: showSeconds ? defaultTime24.second ?? 0 : null,
+                };
+            }
+            else {
+                const defaultTime12 = defaultTime;
+                return {
+                    hour12: defaultTime12.hour ?? 12,
+                    minute: defaultTime12.minute ?? 0,
+                    meridiem: defaultTime12.meridiem ?? 'am',
+                    hour24: null,
+                    second: null,
+                };
+            }
+        }
+        // Default to 00:00
+        if (format === 'iso-date-time') {
+            return {
+                hour12: null,
+                minute: 0,
+                meridiem: null,
+                hour24: 0,
+                second: showSeconds ? 0 : null,
+            };
+        }
+        else {
+            return {
+                hour12: 12,
+                minute: 0,
+                meridiem: 'am',
+                hour24: null,
+                second: null,
+            };
+        }
+    };
+    const initialTimeValues = getInitialTimeValues();
     // Time state for 12-hour format
-    const [hour12, setHour12] = React.useState(initialTime.hour12);
-    const [minute, setMinute] = React.useState(initialTime.minute);
-    const [meridiem, setMeridiem] = React.useState(initialTime.meridiem);
+    const [hour12, setHour12] = React.useState(initialTimeValues.hour12);
+    const [minute, setMinute] = React.useState(initialTimeValues.minute);
+    const [meridiem, setMeridiem] = React.useState(initialTimeValues.meridiem);
     // Time state for 24-hour format
-    const [hour24, setHour24] = React.useState(initialTime.hour24);
-    const [second, setSecond] = React.useState(initialTime.second);
+    const [hour24, setHour24] = React.useState(initialTimeValues.hour24);
+    const [second, setSecond] = React.useState(initialTimeValues.second);
     // Sync selectedDate and time states when value prop changes
     React.useEffect(() => {
         console.log('[DateTimePicker] useEffect triggered - value changed:', {
@@ -7196,27 +7532,47 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             timezone,
             format,
         });
-        // If value is null, undefined, or invalid, clear all fields
+        // 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 all fields');
+            console.log('[DateTimePicker] Value is null/undefined, clearing date but keeping default time');
             setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
+            // Keep default time values instead of clearing them
+            if (format === 'iso-date-time') {
+                setHour24(defaultTime ? defaultTime.hour ?? 0 : 0);
+                setMinute(defaultTime ? defaultTime.minute ?? 0 : 0);
+                setSecond(showSeconds
+                    ? defaultTime
+                        ? defaultTime.second ?? 0
+                        : 0
+                    : null);
+            }
+            else {
+                setHour12(defaultTime ? defaultTime.hour ?? 12 : 12);
+                setMinute(defaultTime ? defaultTime.minute ?? 0 : 0);
+                setMeridiem(defaultTime ? defaultTime.meridiem ?? 'am' : 'am');
+            }
             return;
         }
         // Check if value is valid
         const dateObj = dayjs(value).tz(timezone);
         if (!dateObj.isValid()) {
-            console.log('[DateTimePicker] Invalid value, clearing all fields');
+            console.log('[DateTimePicker] Invalid value, clearing date but keeping default time');
             setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
+            // Keep default time values instead of clearing them
+            if (format === 'iso-date-time') {
+                setHour24(defaultTime ? defaultTime.hour ?? 0 : 0);
+                setMinute(defaultTime ? defaultTime.minute ?? 0 : 0);
+                setSecond(showSeconds
+                    ? defaultTime
+                        ? defaultTime.second ?? 0
+                        : 0
+                    : null);
+            }
+            else {
+                setHour12(defaultTime ? defaultTime.hour ?? 12 : 12);
+                setMinute(defaultTime ? defaultTime.minute ?? 0 : 0);
+                setMeridiem(defaultTime ? defaultTime.meridiem ?? 'am' : 'am');
+            }
             return;
         }
         const dateString = getDateString(value);
@@ -7272,16 +7628,76 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             onChange?.(undefined);
             return;
         }
+        // Check if time values are null - if so, use defaultTime or set to 00:00
+        const hasTimeValues = format === 'iso-date-time'
+            ? hour24 !== null || minute !== null
+            : hour12 !== null || minute !== null || meridiem !== null;
+        let timeDataToUse = undefined;
+        if (!hasTimeValues) {
+            // Use defaultTime if provided, otherwise default to 00:00
+            if (defaultTime) {
+                console.log('[DateTimePicker] No time values set, using defaultTime');
+                if (format === 'iso-date-time') {
+                    const defaultTime24 = defaultTime;
+                    setHour24(defaultTime24.hour ?? 0);
+                    setMinute(defaultTime24.minute ?? 0);
+                    if (showSeconds) {
+                        setSecond(defaultTime24.second ?? 0);
+                    }
+                    timeDataToUse = {
+                        hour: defaultTime24.hour ?? 0,
+                        minute: defaultTime24.minute ?? 0,
+                        second: showSeconds ? defaultTime24.second ?? 0 : undefined,
+                    };
+                }
+                else {
+                    const defaultTime12 = defaultTime;
+                    setHour12(defaultTime12.hour ?? 12);
+                    setMinute(defaultTime12.minute ?? 0);
+                    setMeridiem(defaultTime12.meridiem ?? 'am');
+                    timeDataToUse = {
+                        hour: defaultTime12.hour ?? 12,
+                        minute: defaultTime12.minute ?? 0,
+                        meridiem: defaultTime12.meridiem ?? 'am',
+                    };
+                }
+            }
+            else {
+                console.log('[DateTimePicker] No time values set, defaulting to 00:00');
+                if (format === 'iso-date-time') {
+                    setHour24(0);
+                    setMinute(0);
+                    if (showSeconds) {
+                        setSecond(0);
+                    }
+                    timeDataToUse = {
+                        hour: 0,
+                        minute: 0,
+                        second: showSeconds ? 0 : undefined,
+                    };
+                }
+                else {
+                    setHour12(12);
+                    setMinute(0);
+                    setMeridiem('am');
+                    timeDataToUse = {
+                        hour: 12,
+                        minute: 0,
+                        meridiem: 'am',
+                    };
+                }
+            }
+        }
         // 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);
-            updateDateTime(dateWithoutSeconds);
+            updateDateTime(dateWithoutSeconds, timeDataToUse);
         }
         else {
             const dateWithSeconds = dateObj.toISOString();
             console.log('[DateTimePicker] Updating date with seconds:', dateWithSeconds);
-            updateDateTime(dateWithSeconds);
+            updateDateTime(dateWithSeconds, timeDataToUse);
         }
     };
     const handleTimeChange = (timeData) => {
@@ -7311,17 +7727,36 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
             setMinute(data.minute);
             setMeridiem(data.meridiem);
         }
-        // Use selectedDate if valid, otherwise clear all fields
+        // Use selectedDate if valid, otherwise use effectiveDefaultDate or clear all fields
         if (!selectedDate || !dayjs(selectedDate).isValid()) {
-            console.log('[DateTimePicker] No valid selectedDate, clearing all fields');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            onChange?.(undefined);
-            return;
+            // If effectiveDefaultDate is available, use it instead of clearing
+            if (effectiveDefaultDate && dayjs(effectiveDefaultDate).isValid()) {
+                console.log('[DateTimePicker] No valid selectedDate, using effectiveDefaultDate:', effectiveDefaultDate);
+                setSelectedDate(effectiveDefaultDate);
+                const dateObj = dayjs(effectiveDefaultDate).tz(timezone);
+                if (dateObj.isValid()) {
+                    updateDateTime(dateObj.toISOString(), timeData);
+                }
+                else {
+                    console.warn('[DateTimePicker] Invalid effectiveDefaultDate, clearing fields');
+                    setSelectedDate('');
+                    setHour12(null);
+                    setMinute(null);
+                    setMeridiem(null);
+                    setHour24(null);
+                    setSecond(null);
+                    onChange?.(undefined);
+                }
+                return;
+            }
+            else {
+                console.log('[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('');
+                onChange?.(undefined);
+                return;
+            }
         }
         const dateObj = dayjs(selectedDate).tz(timezone);
         if (dateObj.isValid()) {
@@ -7464,18 +7899,24 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     };
     const handleClear = () => {
         setSelectedDate('');
-        setHour12(null);
-        setHour24(null);
-        setMinute(null);
-        setSecond(null);
-        setMeridiem(null);
+        // Reset to default time values instead of clearing them
+        if (format === 'iso-date-time') {
+            setHour24(defaultTime ? defaultTime.hour ?? 0 : 0);
+            setMinute(defaultTime ? defaultTime.minute ?? 0 : 0);
+            setSecond(showSeconds
+                ? defaultTime
+                    ? defaultTime.second ?? 0
+                    : 0
+                : null);
+        }
+        else {
+            setHour12(defaultTime ? defaultTime.hour ?? 12 : 12);
+            setMinute(defaultTime ? defaultTime.minute ?? 0 : 0);
+            setMeridiem(defaultTime ? defaultTime.meridiem ?? 'am' : 'am');
+        }
         onChange?.(undefined);
     };
     const isISO = format === 'iso-date-time';
-    // Normalize startTime to ignore milliseconds
-    const normalizedStartTime = startTime
-        ? dayjs(startTime).tz(timezone).millisecond(0).toISOString()
-        : undefined;
     // Determine minDate: prioritize explicit minDate prop, then fall back to startTime
     const effectiveMinDate = minDate
         ? minDate
@@ -7553,7 +7994,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         const dateObj = dayjs.tz(selectedDate, timezone);
         return dateObj.isValid() ? dateObj.format('Z') : null;
     }, [selectedDate, timezone]);
-    return (jsxRuntime.jsxs(react.Flex, { direction: "column", gap: 4, children: [jsxRuntime.jsx(DatePickerInput, { value: selectedDate || undefined, onChange: (date) => {
+    return (jsxRuntime.jsxs(react.Flex, { direction: "column", gap: 2, children: [jsxRuntime.jsx(DatePickerInput, { value: selectedDate || undefined, onChange: (date) => {
                     if (date) {
                         handleDateChange(date);
                     }
@@ -7561,7 +8002,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
                         setSelectedDate('');
                         onChange?.(undefined);
                     }
-                }, placeholder: "Select a date", dateFormat: "YYYY-MM-DD", displayFormat: "YYYY-MM-DD", labels: labels, timezone: timezone, minDate: effectiveMinDate, maxDate: maxDate, monthsToDisplay: 1, readOnly: true }), jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr auto", alignItems: "center", gap: 4, children: [isISO ? (jsxRuntime.jsx(IsoTimePicker, { hour: hour24, setHour: setHour24, minute: minute, setMinute: setMinute, second: showSeconds ? second : null, setSecond: showSeconds ? setSecond : () => { }, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled, labels: timePickerLabels })) : (jsxRuntime.jsx(TimePicker$1, { hour: hour12, setHour: setHour12, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled, labels: timePickerLabels })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "outline", colorScheme: "red", children: jsxRuntime.jsx(react.Icon, { as: fa6.FaTrash }) })] }), displayText && (jsxRuntime.jsxs(react.Flex, { gap: 2, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: displayText }), timezoneOffset && (jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezoneOffset })), jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezone })] }))] }));
+                }, placeholder: "Select a date", dateFormat: "YYYY-MM-DD", displayFormat: "YYYY-MM-DD", labels: labels, timezone: timezone, minDate: effectiveMinDate, maxDate: maxDate, monthsToDisplay: 1, readOnly: false }), jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr auto", alignItems: "center", gap: 2, children: [isISO ? (jsxRuntime.jsx(IsoTimePicker, { hour: hour24, setHour: setHour24, minute: minute, setMinute: setMinute, second: showSeconds ? second : null, setSecond: showSeconds ? setSecond : () => { }, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled, labels: timePickerLabels })) : (jsxRuntime.jsx(TimePicker$1, { hour: hour12, setHour: setHour12, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled, labels: timePickerLabels })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "outline", colorScheme: "red", children: jsxRuntime.jsx(react.Icon, { as: fa6.FaTrash }) })] }), displayText && (jsxRuntime.jsxs(react.Flex, { gap: 2, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: displayText }), timezoneOffset && (jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezoneOffset })), jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezone })] }))] }));
 }
 
 dayjs.extend(utc);
@@ -7623,7 +8064,7 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
     return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                             setOpen(true);
-                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), displayDate || ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) }) }))] }) }));
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), displayDate || ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "350px", minH: "10rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "350px", minH: "10rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) }) }))] }) }));
 };
 
 const SchemaRenderer = ({ schema, prefix, column, }) => {
@@ -7776,15 +8217,15 @@ const DateViewer = ({ column, schema, prefix }) => {
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { gridColumn = "span 12", gridRow = "span 1", renderDisplay } = schema;
+    const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
     const colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
-    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
                         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
@@ -7792,7 +8233,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
                     return (jsxRuntime.jsx(Tag, { size: "lg", children: !!renderDisplay === true
                             ? renderDisplay(item)
                             : formI18n.t(item) }, item));
-                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: formI18n.required() }))] }));
+                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
@@ -8205,6 +8646,17 @@ const FormBody = () => {
 
 const FormTitle = () => {
     const { schema } = useSchemaContext();
+    // Debug log when form title is missing
+    if (!schema.title) {
+        console.debug('[Form Title] Missing title in root schema. Add title property to schema.', {
+            schema: {
+                type: schema.type,
+                properties: schema.properties
+                    ? Object.keys(schema.properties)
+                    : undefined,
+            },
+        });
+    }
     return jsxRuntime.jsx(react.Heading, { children: schema.title ?? 'Form' });
 };