@bsol-oss/react-datatable5 12.0.0-beta.90 → 12.0.0-beta.91

package/dist/index.mjs

@@ -1,9 +1,9 @@
 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, 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 } 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, Skeleton, NumberInput, Show, RadioCard, CheckboxGroup, InputGroup as InputGroup$1, Center, Heading } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
-import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo, forwardRef } from 'react';
-import { LuX, LuCheck, LuChevronRight, LuSearch, LuImage, LuFile } from 'react-icons/lu';
+import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo, forwardRef, useCallback } 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';
@@ -33,6 +33,7 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import { TiDeleteOutline } from 'react-icons/ti';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { rankItem } from '@tanstack/match-sorter-utils';
 
 const DataTableContext = createContext({
@@ -3315,11 +3316,136 @@ const TableLoadingComponent = ({ render, }) => {
     return jsx(Fragment, { children: render(query.isLoading) });
 };
 
-const TextCell = ({ label, containerProps = {}, textProps = {}, children, }) => {
-    if (label) {
-        return (jsx(Flex, { alignItems: "center", height: "100%", ...containerProps, children: jsx(Tooltip, { content: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", children: label }), children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", ...textProps, children: children }) }) }));
+// Helper function to highlight matching text
+const highlightText$1 = (text, searchTerm) => {
+    if (!searchTerm || searchTerm.trim() === '') {
+        return String(text);
+    }
+    const textStr = String(text);
+    const searchLower = searchTerm.toLowerCase();
+    const textLower = textStr.toLowerCase();
+    const parts = [];
+    let lastIndex = 0;
+    let index = textLower.indexOf(searchLower, lastIndex);
+    while (index !== -1) {
+        // Add text before match
+        if (index > lastIndex) {
+            parts.push(textStr.substring(lastIndex, index));
+        }
+        // Add highlighted match
+        parts.push(jsx(Text, { as: "mark", bg: {
+                base: 'yellow.200',
+                _dark: 'yellow.800',
+            }, color: {
+                base: 'gray.900',
+                _dark: 'gray.100',
+            }, px: 0.5, borderRadius: "sm", children: textStr.substring(index, index + searchTerm.length) }, index));
+        lastIndex = index + searchTerm.length;
+        index = textLower.indexOf(searchLower, lastIndex);
+    }
+    // Add remaining text
+    if (lastIndex < textStr.length) {
+        parts.push(textStr.substring(lastIndex));
+    }
+    return parts.length > 0 ? jsx(Fragment, { children: parts }) : textStr;
+};
+const TextWithCopy = ({ text, globalFilter, highlightedText, }) => {
+    const textValue = String(text ?? '');
+    const displayText = highlightedText !== undefined
+        ? highlightedText
+        : highlightText$1(textValue, globalFilter);
+    return (jsxs(HStack, { gap: 2, alignItems: "center", children: [jsx(Text, { as: "span", children: displayText }), jsx(Clipboard.Root, { value: textValue, children: jsx(Clipboard.Trigger, { asChild: true, children: jsx(IconButton, { size: "xs", variant: "ghost", "aria-label": "Copy", children: jsx(Clipboard.Indicator, { copied: jsx(LuCheck, {}), children: jsx(LuCopy, {}) }) }) }) })] }));
+};
+
+// Helper function to highlight matching text
+const highlightText = (text, searchTerm) => {
+    if (!searchTerm || searchTerm.trim() === '') {
+        return String(text);
+    }
+    const textStr = String(text);
+    const searchLower = searchTerm.toLowerCase();
+    const textLower = textStr.toLowerCase();
+    const parts = [];
+    let lastIndex = 0;
+    let index = textLower.indexOf(searchLower, lastIndex);
+    while (index !== -1) {
+        // Add text before match
+        if (index > lastIndex) {
+            parts.push(textStr.substring(lastIndex, index));
+        }
+        // Add highlighted match
+        parts.push(jsx(Text, { as: "mark", bg: {
+                base: 'yellow.200',
+                _dark: 'yellow.800',
+            }, color: {
+                base: 'gray.900',
+                _dark: 'gray.100',
+            }, px: 0.5, borderRadius: "sm", children: textStr.substring(index, index + searchTerm.length) }, index));
+        lastIndex = index + searchTerm.length;
+        index = textLower.indexOf(searchLower, lastIndex);
+    }
+    // Add remaining text
+    if (lastIndex < textStr.length) {
+        parts.push(textStr.substring(lastIndex));
+    }
+    return parts.length > 0 ? jsx(Fragment, { children: parts }) : textStr;
+};
+const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, globalFilter, }) => {
+    const highlightedText = useMemo(() => highlightText(text ?? '', globalFilter), [text, globalFilter]);
+    if (isBadge) {
+        return (jsx(Badge, { colorPalette: colorPalette || badgeColor, children: highlightedText }));
+    }
+    // onClick takes precedence over href
+    if (onClick) {
+        return (jsx(Box, { as: "button", onClick: onClick, cursor: "pointer", textAlign: "left", _hover: {
+                textDecoration: 'underline',
+                color: {
+                    base: 'blue.500',
+                    _dark: 'blue.400',
+                },
+            }, transition: "all 0.2s", children: highlightedText }));
     }
-    return (jsx(Flex, { alignItems: "center", height: "100%", ...containerProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", ...textProps, children: children }) }));
+    if (href) {
+        return (jsxs(Link, { href: href, target: "_blank", rel: "noopener noreferrer", _hover: {
+                textDecoration: 'underline',
+            }, children: [highlightedText, " ", jsx(Icon, { as: LuExternalLink })] }));
+    }
+    if (isCopyable) {
+        return (jsx(TextWithCopy, { text: text, globalFilter: globalFilter, highlightedText: highlightedText }));
+    }
+    return jsx(Fragment, { children: highlightedText });
+};
+const TextCell = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, 
+// Legacy props
+label, containerProps = {}, textProps = {}, children, }) => {
+    // Get globalFilter from context
+    // If not in DataTable context, will use default empty string from context
+    const { globalFilter } = useDataTableContext();
+    // Legacy API: if children is provided, use old behavior
+    if (children !== undefined) {
+        const displayText = typeof children === 'string' || typeof children === 'number'
+            ? String(children)
+            : children;
+        const highlightedDisplayText = typeof displayText === 'string' || typeof displayText === 'number'
+            ? highlightText(displayText, globalFilter)
+            : displayText;
+        if (label) {
+            return (jsx(Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsx(Tooltip, { content: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', children: label }), children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }) }));
+        }
+        return (jsx(Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }));
+    }
+    // New API: use text prop
+    const displayValue = text ?? children;
+    if (Array.isArray(displayValue)) {
+        return (jsx(Flex, { gap: 2, flexWrap: "wrap", children: displayValue.map((item, index) => {
+                const highlightedItem = highlightText(item, globalFilter);
+                return (jsx(Badge, { colorPalette: colorPalette || badgeColor, children: highlightedItem }, index));
+            }) }));
+    }
+    if (!!displayValue === false) {
+        return (jsx(Text, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", wordBreak: "break-all", display: "flex", alignItems: "center", height: "100%", children: "-" }));
+    }
+    return (jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", height: "100%", children: jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter }) }));
 };
 
 const Tag = React.forwardRef(function Tag(props, ref) {
@@ -5295,15 +5421,15 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     // Check if we're currently searching (user typed but debounce hasn't fired yet)
     const isSearching = searchText !== debouncedSearchText;
     // Transform data for combobox collection
+    // label is used for filtering/searching (must be a string)
+    // raw item is stored for custom rendering
     const comboboxItems = useMemo(() => {
         return dataList.map((item) => ({
-            label: !!renderDisplay === true
-                ? String(renderDisplay(item))
-                : String(item[display_column] ?? ''),
+            label: String(item[display_column] ?? ''), // Always use display_column for filtering
             value: String(item[column_ref]),
             raw: item,
         }));
-    }, [dataList, display_column, column_ref, renderDisplay]);
+    }, [dataList, display_column, column_ref]);
     // Use filter hook for combobox
     const { contains } = useFilter({ sensitivity: 'base' });
     // Create collection for combobox
@@ -5362,13 +5488,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                                     ? idPickerLabels?.emptySearchResult ??
                                         formI18n.t('empty_search_result')
                                     : idPickerLabels?.initialResults ??
-                                        formI18n.t('initial_results') })) : (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: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: formI18n.t('loading_failed') })) : isFetching || isLoading || isPending || isSearching ? (
+                                        formI18n.t('initial_results') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplay === true
+                                                ? renderDisplay(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: formI18n.t('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 ??
                                             formI18n.t('empty_search_result')
                                         : idPickerLabels?.initialResults ??
-                                            formI18n.t('initial_results') })) : (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}`))) })) }) }) }))] })] }));
+                                            formI18n.t('initial_results') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplay === true
+                                                    ? renderDisplay(item.raw)
+                                                    : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
 };
 
 const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
@@ -5747,7 +5877,7 @@ meridiemLabel: _meridiemLabel = {
     pm: 'pm',
 }, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedDate, }) {
+onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedDate, portalled = true, }) {
     // Generate time options (every 15 minutes)
     const timeOptions = useMemo(() => {
         const options = [];
@@ -5770,12 +5900,10 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             for (let h = 1; h <= 12; h++) {
                 for (let m = 0; m < 60; m += 15) {
                     const hour24 = mer === 'am' ? (h === 12 ? 0 : h) : h === 12 ? 12 : h + 12;
-                    const timeStr = dayjs()
-                        .tz(timezone)
-                        .hour(hour24)
-                        .minute(m)
-                        .format('HH:mmZ');
-                    const displayTime = dayjs(`1970-01-01T${timeStr}`, 'HH:mmZ').format('hh:mm a');
+                    // Format time directly without using dayjs with dummy dates
+                    const formattedHour = h.toString().padStart(2, '0');
+                    const formattedMinute = m.toString().padStart(2, '0');
+                    const displayTime = `${formattedHour}:${formattedMinute} ${mer}`;
                     // Filter out times that would result in negative duration (only when dates are the same)
                     if (startDateTime && selectedDate && shouldFilterByDate) {
                         const selectedDateObj = dayjs(selectedDate).tz(timezone);
@@ -5788,8 +5916,8 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
                             continue; // Skip this option as it would result in negative duration
                         }
                     }
-                    // Calculate and append duration if startTime is provided
-                    let label = displayTime;
+                    // Calculate duration if startTime is provided
+                    let durationText;
                     if (startDateTime && selectedDate) {
                         const selectedDateObj = dayjs(selectedDate).tz(timezone);
                         const optionDateTime = selectedDateObj
@@ -5802,21 +5930,30 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
                             const diffMs = optionDateTime.diff(startDateTime);
                             const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
                             const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-                            if (diffHours > 0 || diffMinutes > 0) {
-                                const diffText = diffHours > 0
-                                    ? `${diffHours}h ${diffMinutes}m`
-                                    : `${diffMinutes}m`;
-                                label = `${displayTime} (+${diffText})`;
+                            const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+                            if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+                                let diffText = '';
+                                if (diffHours > 0) {
+                                    diffText = `${diffHours}h ${diffMinutes}m`;
+                                }
+                                else if (diffMinutes > 0) {
+                                    diffText = `${diffMinutes}m ${diffSeconds}s`;
+                                }
+                                else {
+                                    diffText = `${diffSeconds}s`;
+                                }
+                                durationText = `+${diffText}`;
                             }
                         }
                     }
                     options.push({
-                        label,
+                        label: displayTime,
                         value: `${h}:${m.toString().padStart(2, '0')}:${mer}`,
                         hour: h,
                         minute: m,
                         meridiem: mer,
                         searchText: displayTime, // Use base time without duration for searching
+                        durationText,
                     });
                 }
             }
@@ -5830,22 +5967,6 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
         itemToValue: (item) => item.value,
         filter: contains,
     });
-    // Track input mode vs display mode
-    const [isInputMode, setIsInputMode] = useState(false);
-    const [inputValue, setInputValue] = useState('');
-    const inputRef = useRef(null);
-    // Switch to display mode when value is selected
-    useEffect(() => {
-        if (hour !== null && minute !== null && meridiem !== null) {
-            setIsInputMode(false);
-        }
-    }, [hour, minute, meridiem]);
-    // Focus input when switching to input mode
-    useEffect(() => {
-        if (isInputMode && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isInputMode]);
     // Get current value string for combobox
     const currentValue = useMemo(() => {
         if (hour === null || minute === null || meridiem === null) {
@@ -5853,14 +5974,14 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
         }
         return `${hour}:${minute.toString().padStart(2, '0')}:${meridiem}`;
     }, [hour, minute, meridiem]);
-    // INPUT MODE: Show raw input text (no duration)
-    const inputModeText = useMemo(() => {
-        return inputValue;
-    }, [inputValue]);
-    // DISPLAY MODE: Show selected value with duration
-    const displayModeText = useMemo(() => {
-        if (hour === null || minute === null || meridiem === null) {
-            return '';
+    // Calculate duration difference
+    const durationDiff = useMemo(() => {
+        if (!startTime ||
+            !selectedDate ||
+            hour === null ||
+            minute === null ||
+            meridiem === null) {
+            return null;
         }
         const hour24 = meridiem === 'am'
             ? hour === 12
@@ -5869,45 +5990,42 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             : hour === 12
                 ? 12
                 : hour + 12;
-        const timeStr = dayjs()
-            .tz(timezone)
+        const startDateObj = dayjs(startTime).tz(timezone);
+        const selectedDateObj = dayjs(selectedDate).tz(timezone);
+        const currentDateTime = selectedDateObj
             .hour(hour24)
             .minute(minute)
-            .format('HH:mmZ');
-        const timeDisplay = dayjs(`1970-01-01T${timeStr}`, 'HH:mmZ').format('hh:mm a');
-        // Add duration if startTime is provided
-        if (startTime && selectedDate) {
-            const startDateObj = dayjs(startTime).tz(timezone);
-            const selectedDateObj = dayjs(selectedDate).tz(timezone);
-            const currentDateTime = selectedDateObj
-                .hour(hour24)
-                .minute(minute)
-                .second(0)
-                .millisecond(0);
-            if (startDateObj.isValid() && currentDateTime.isValid()) {
-                const diffMs = currentDateTime.diff(startDateObj);
-                if (diffMs >= 0) {
-                    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-                    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-                    if (diffHours > 0 || diffMinutes > 0) {
-                        const diffText = diffHours > 0
-                            ? `${diffHours}h ${diffMinutes}m`
-                            : `${diffMinutes}m`;
-                        return `${timeDisplay} (+${diffText})`;
-                    }
-                }
+            .second(0)
+            .millisecond(0);
+        if (!startDateObj.isValid() || !currentDateTime.isValid()) {
+            return null;
+        }
+        const diffMs = currentDateTime.diff(startDateObj);
+        if (diffMs < 0) {
+            return null;
+        }
+        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+        const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+        if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+            let diffText = '';
+            if (diffHours > 0) {
+                diffText = `${diffHours}h ${diffMinutes}m`;
+            }
+            else if (diffMinutes > 0) {
+                diffText = `${diffMinutes}m ${diffSeconds}s`;
+            }
+            else {
+                diffText = `${diffSeconds}s`;
             }
+            return `+${diffText}`;
         }
-        return timeDisplay;
-    }, [hour, minute, meridiem, timezone, startTime, selectedDate]);
-    // Choose text based on mode
-    const displayText = isInputMode ? inputModeText : displayModeText;
+        return null;
+    }, [hour, minute, meridiem, startTime, selectedDate, timezone]);
     const handleClear = () => {
         setHour(null);
         setMinute(null);
         setMeridiem(null);
-        setIsInputMode(false);
-        setInputValue('');
         filter(''); // Reset filter to show all options
         onChange({ hour: null, minute: null, meridiem: null });
     };
@@ -5922,8 +6040,6 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             setHour(selectedOption.hour);
             setMinute(selectedOption.minute);
             setMeridiem(selectedOption.meridiem);
-            setIsInputMode(false); // Switch to display mode
-            setInputValue('');
             filter(''); // Reset filter after selection
             onChange({
                 hour: selectedOption.hour,
@@ -5932,41 +6048,16 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             });
         }
     };
-    // Handle Enter key to select first filtered option
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter' && collection.items.length > 0) {
-            e.preventDefault();
-            const firstOption = collection.items[0];
-            if (firstOption) {
-                const selectedOption = timeOptions.find((opt) => opt.value === firstOption.value);
-                if (selectedOption) {
-                    setHour(selectedOption.hour);
-                    setMinute(selectedOption.minute);
-                    setMeridiem(selectedOption.meridiem);
-                    setIsInputMode(false); // Switch to display mode
-                    setInputValue('');
-                    filter('');
-                    onChange({
-                        hour: selectedOption.hour,
-                        minute: selectedOption.minute,
-                        meridiem: selectedOption.meridiem,
-                    });
-                }
-            }
-        }
-    };
-    const handleInputValueChange = (details) => {
-        const inputValue = details.inputValue.trim();
-        setInputValue(inputValue);
-        setIsInputMode(true); // Switch to input mode
+    // Parse input value and update state
+    const parseAndCommitInput = (value) => {
+        const trimmedValue = value.trim();
         // Filter the collection based on input
-        filter(inputValue);
-        if (!inputValue) {
-            setIsInputMode(false);
+        filter(trimmedValue);
+        if (!trimmedValue) {
             return;
         }
         // Try to parse custom input using explicit regex patterns
-        const normalized = inputValue.toLowerCase().replace(/\s+/g, '');
+        const normalized = trimmedValue.toLowerCase().replace(/\s+/g, '');
         // Pattern 1: 12-hour format with meridiem (e.g., "930pm", "1230am", "9:30pm", "12:30am")
         // Matches: 1-2 digits hour, optional colon, 2 digits minute, am/pm
         const pattern12HourWithMeridiem = /^(\d{1,2}):?(\d{2})(am|pm)$/;
@@ -5977,29 +6068,43 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             const parsedMeridiem = match12Hour[3];
             // Validate hour (1-12)
             if (parsedHour < 1 || parsedHour > 12) {
+                // Parse failed, select first result
+                selectFirstResult();
                 return;
             }
             // Validate minute (0-59)
-            const validMinute = parsedMinute > 59 ? 0 : parsedMinute;
+            if (parsedMinute < 0 || parsedMinute > 59) {
+                // Parse failed, select first result
+                selectFirstResult();
+                return;
+            }
             setHour(parsedHour);
-            setMinute(validMinute);
+            setMinute(parsedMinute);
             setMeridiem(parsedMeridiem);
             onChange({
                 hour: parsedHour,
-                minute: validMinute,
+                minute: parsedMinute,
                 meridiem: parsedMeridiem,
             });
             return;
         }
         // Pattern 2: 24-hour format (e.g., "2130", "09:30", "21:30")
         // Matches: 1-2 digits hour, optional colon, 2 digits minute
-        const pattern24Hour = /^(\d{2}):?(\d{2})$/;
+        const pattern24Hour = /^(\d{1,2}):?(\d{2})$/;
         const match24Hour = normalized.match(pattern24Hour);
         if (match24Hour) {
             let parsedHour = parseInt(match24Hour[1], 10);
             const parsedMinute = parseInt(match24Hour[2], 10);
             // Validate hour (0-23)
-            if (parsedHour > 23) {
+            if (parsedHour < 0 || parsedHour > 23) {
+                // Parse failed, select first result
+                selectFirstResult();
+                return;
+            }
+            // Validate minute (0-59)
+            if (parsedMinute < 0 || parsedMinute > 59) {
+                // Parse failed, select first result
+                selectFirstResult();
                 return;
             }
             // Convert 24-hour to 12-hour format
@@ -6019,23 +6124,62 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             else {
                 parsedMeridiem = 'am';
             }
-            // Validate minute (0-59)
-            const validMinute = parsedMinute > 59 ? 0 : parsedMinute;
             setHour(parsedHour);
-            setMinute(validMinute);
+            setMinute(parsedMinute);
             setMeridiem(parsedMeridiem);
             onChange({
                 hour: parsedHour,
-                minute: validMinute,
+                minute: parsedMinute,
                 meridiem: parsedMeridiem,
             });
             return;
         }
+        // Parse failed, select first result
+        selectFirstResult();
     };
-    return (jsxs(Grid, { justifyContent: 'center', alignItems: 'center', templateColumns: '200px auto', gap: "2", width: "auto", minWidth: "250px", children: [jsxs(Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, width: "100%", children: [jsxs(Combobox.Control, { children: [isInputMode ? (jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { ref: inputRef, placeholder: "Select time", value: displayText, onKeyDown: handleKeyDown }) })) : (jsxs(Grid, { templateColumns: "auto 1fr auto", alignItems: "center", gap: 2, width: "100%", minHeight: "40px", px: 3, border: "1px solid", borderColor: "gray.200", borderRadius: "md", cursor: "pointer", onClick: () => setIsInputMode(true), children: [jsx(Icon, { children: jsx(BsClock, {}) }), jsx(Text, { fontSize: "sm", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: displayText || 'Select time' }), jsx(Combobox.Trigger, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            setIsInputMode(true);
-                                        } })] })), isInputMode && (jsxs(Combobox.IndicatorGroup, { children: [jsx(Combobox.ClearTrigger, {}), jsx(Combobox.Trigger, {})] }))] }), jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [item.label, jsx(Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(Icon, { children: jsx(MdCancel, {}) }) })] }));
+    // Select first result from filtered collection
+    const selectFirstResult = () => {
+        if (collection.items.length > 0) {
+            const firstItem = collection.items[0];
+            setHour(firstItem.hour);
+            setMinute(firstItem.minute);
+            setMeridiem(firstItem.meridiem);
+            filter(''); // Reset filter after selection
+            onChange({
+                hour: firstItem.hour,
+                minute: firstItem.minute,
+                meridiem: firstItem.meridiem,
+            });
+        }
+    };
+    const handleInputValueChange = (details) => {
+        // Filter the collection based on input, but don't parse yet
+        filter(details.inputValue);
+    };
+    const handleFocus = (e) => {
+        // Select all text when focusing
+        e.target.select();
+    };
+    const handleBlur = (e) => {
+        // Parse and commit the input value when losing focus
+        const inputValue = e.target.value;
+        if (inputValue) {
+            parseAndCommitInput(inputValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        // Commit input on Enter key
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const inputValue = e.currentTarget.value;
+            if (inputValue) {
+                parseAndCommitInput(inputValue);
+            }
+            // Blur the input
+            e.currentTarget?.blur();
+        }
+    };
+    return (jsx(Flex, { direction: "column", gap: 3, children: jsxs(Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxs(Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { placeholder: "hh:mm a", onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: !portalled, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsx(Text, { flex: 1, children: item.label }), item.durationText && (jsx(Tag$1.Root, { size: "sm", colorPalette: "blue", children: jsx(Tag$1.Label, { children: item.durationText }) }))] }), jsx(Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: durationDiff }) })), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(Icon, { children: jsx(MdCancel, {}) }) })] }) }));
 }
 
 dayjs.extend(timezone);
@@ -6113,11 +6257,138 @@ const TimePicker = ({ column, schema, prefix }) => {
                                     } }) }) }) }) }))] }) }));
 };
 
+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] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    // Update input value when prop value changes
+    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 = (jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay }));
+    return (jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(InputGroup, { endElement: jsx(Popover.Trigger, { asChild: true, children: jsx(IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsx(Icon, { children: jsx(MdDateRange, {}) }) }) }), children: jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) }) }))] }));
+}
+
 dayjs.extend(utc);
 dayjs.extend(timezone);
 function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Kong', }) {
+onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Kong', portalled = true, }) {
     // Generate time options (every 15 minutes, seconds always 0)
     const timeOptions = useMemo(() => {
         const options = [];
@@ -6152,8 +6423,8 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                         continue; // Skip this option as it would result in negative duration
                     }
                 }
-                // Calculate and append duration if startTime is provided
-                let label = timeDisplay;
+                // Calculate duration if startTime is provided
+                let durationText;
                 if (startDateTime && selectedDate) {
                     const selectedDateObj = dayjs(selectedDate).tz(timezone);
                     const optionDateTime = selectedDateObj
@@ -6178,17 +6449,18 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                             else {
                                 diffText = `${diffSeconds}s`;
                             }
-                            label = `${timeDisplay} (+${diffText})`;
+                            durationText = `+${diffText}`;
                         }
                     }
                 }
                 options.push({
-                    label,
+                    label: timeDisplay,
                     value: `${h}:${m}:0`,
                     hour: h,
                     minute: m,
                     second: 0,
                     searchText: timeDisplay, // Use base time without duration for searching
+                    durationText,
                 });
             }
         }
@@ -6208,46 +6480,46 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
         }
         return `${hour}:${minute}:${second}`;
     }, [hour, minute, second]);
-    // Get display text for combobox
-    const displayText = useMemo(() => {
-        if (hour === null || minute === null || second === null) {
-            return '';
+    // Calculate duration difference
+    const durationDiff = useMemo(() => {
+        if (!startTime ||
+            !selectedDate ||
+            hour === null ||
+            minute === null ||
+            second === null) {
+            return null;
         }
-        const timeDisplay = `${hour.toString().padStart(2, '0')}:${minute
-            .toString()
-            .padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
-        // Show duration difference if startTime is provided
-        if (startTime && selectedDate) {
-            const startDateObj = dayjs(startTime).tz(timezone);
-            const selectedDateObj = dayjs(selectedDate).tz(timezone);
-            const currentDateTime = selectedDateObj
-                .hour(hour)
-                .minute(minute)
-                .second(second ?? 0)
-                .millisecond(0);
-            if (startDateObj.isValid() && currentDateTime.isValid()) {
-                const diffMs = currentDateTime.diff(startDateObj);
-                if (diffMs >= 0) {
-                    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-                    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-                    const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
-                    if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
-                        let diffText = '';
-                        if (diffHours > 0) {
-                            diffText = `${diffHours}h ${diffMinutes}m`;
-                        }
-                        else if (diffMinutes > 0) {
-                            diffText = `${diffMinutes}m ${diffSeconds}s`;
-                        }
-                        else {
-                            diffText = `${diffSeconds}s`;
-                        }
-                        return `${timeDisplay} (+${diffText})`;
-                    }
-                }
+        const startDateObj = dayjs(startTime).tz(timezone);
+        const selectedDateObj = dayjs(selectedDate).tz(timezone);
+        const currentDateTime = selectedDateObj
+            .hour(hour)
+            .minute(minute)
+            .second(second ?? 0)
+            .millisecond(0);
+        if (!startDateObj.isValid() || !currentDateTime.isValid()) {
+            return null;
+        }
+        const diffMs = currentDateTime.diff(startDateObj);
+        if (diffMs < 0) {
+            return null;
+        }
+        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+        const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+        if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+            let diffText = '';
+            if (diffHours > 0) {
+                diffText = `${diffHours}h ${diffMinutes}m`;
+            }
+            else if (diffMinutes > 0) {
+                diffText = `${diffMinutes}m ${diffSeconds}s`;
             }
+            else {
+                diffText = `${diffSeconds}s`;
+            }
+            return `+${diffText}`;
         }
-        return timeDisplay;
+        return null;
     }, [hour, minute, second, startTime, selectedDate, timezone]);
     const handleClear = () => {
         setHour(null);
@@ -6275,16 +6547,17 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
             });
         }
     };
-    const handleInputValueChange = (details) => {
-        const inputValue = details.inputValue.trim();
+    // Parse input value and update state
+    const parseAndCommitInput = (value) => {
+        const trimmedValue = value.trim();
         // Filter the collection based on input
-        filter(inputValue);
-        if (!inputValue) {
+        filter(trimmedValue);
+        if (!trimmedValue) {
             return;
         }
         // Parse HH:mm:ss or HH:mm format
         const timePattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
-        const match = inputValue.match(timePattern);
+        const match = trimmedValue.match(timePattern);
         if (match) {
             const parsedHour = parseInt(match[1], 10);
             const parsedMinute = parseInt(match[2], 10);
@@ -6304,11 +6577,12 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                     minute: parsedMinute,
                     second: parsedSecond,
                 });
+                return;
             }
         }
         else {
             // Try to parse formats like "123045" (HHmmss) or "1230" (HHmm)
-            const numbersOnly = inputValue.replace(/[^0-9]/g, '');
+            const numbersOnly = trimmedValue.replace(/[^0-9]/g, '');
             if (numbersOnly.length >= 4) {
                 const parsedHour = parseInt(numbersOnly.slice(0, 2), 10);
                 const parsedMinute = parseInt(numbersOnly.slice(2, 4), 10);
@@ -6328,11 +6602,56 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                         minute: parsedMinute,
                         second: parsedSecond,
                     });
+                    return;
                 }
             }
         }
+        // Parse failed, select first result
+        selectFirstResult();
+    };
+    // Select first result from filtered collection
+    const selectFirstResult = () => {
+        if (collection.items.length > 0) {
+            const firstItem = collection.items[0];
+            setHour(firstItem.hour);
+            setMinute(firstItem.minute);
+            setSecond(firstItem.second);
+            filter(''); // Reset filter after selection
+            onChange({
+                hour: firstItem.hour,
+                minute: firstItem.minute,
+                second: firstItem.second,
+            });
+        }
+    };
+    const handleInputValueChange = (details) => {
+        // Filter the collection based on input, but don't parse yet
+        filter(details.inputValue);
+    };
+    const handleFocus = (e) => {
+        // Select all text when focusing
+        e.target.select();
+    };
+    const handleBlur = (e) => {
+        // Parse and commit the input value when losing focus
+        const inputValue = e.target.value;
+        if (inputValue) {
+            parseAndCommitInput(inputValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        // Commit input on Enter key
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const inputValue = e.currentTarget.value;
+            if (inputValue) {
+                parseAndCommitInput(inputValue);
+            }
+            // Blur the input
+            e.currentTarget?.blur();
+        }
     };
-    return (jsx(Flex, { direction: "column", gap: 3, children: jsxs(Grid, { justifyContent: 'center', alignItems: 'center', templateColumns: '1fr auto', gap: "2", width: "auto", minWidth: "300px", children: [jsxs(Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, width: "100%", children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { placeholder: "HH:mm:ss", value: displayText }) }), jsxs(Combobox.IndicatorGroup, { children: [jsx(Combobox.ClearTrigger, {}), jsx(Combobox.Trigger, {})] })] }), jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [item.label, jsx(Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(Icon, { children: jsx(MdCancel, {}) }) })] }) }));
+    return (jsx(Flex, { direction: "column", gap: 3, children: jsxs(Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxs(Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { placeholder: "HH:mm:ss", onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: !portalled, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsx(Text, { flex: 1, children: item.label }), item.durationText && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: item.durationText }) }))] }), jsx(Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: durationDiff }) })), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(Icon, { children: jsx(MdCancel, {}) }) })] }) }));
 }
 
 dayjs.extend(utc);
@@ -6355,30 +6674,193 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     backButtonLabel: 'Back',
     forwardButtonLabel: 'Next',
-}, timezone = 'Asia/Hong_Kong', startTime, }) {
-    const [selectedDate, setSelectedDate] = useState(value || '');
+}, timezone = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, }) {
+    console.log('[DateTimePicker] Component initialized with props:', {
+        value,
+        format,
+        showSeconds,
+        timezone,
+        startTime,
+        minDate,
+        maxDate,
+    });
+    // Initialize selectedDate from value prop, converting ISO to YYYY-MM-DD format
+    const getDateString = useCallback((val) => {
+        if (!val)
+            return '';
+        const dateObj = dayjs(val).tz(timezone);
+        return dateObj.isValid() ? dateObj.format('YYYY-MM-DD') : '';
+    }, [timezone]);
+    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:', {
+            val,
+            timezone,
+            showSeconds,
+        });
+        if (!val) {
+            console.log('[DateTimePicker] No value provided, returning nulls');
+            return {
+                hour12: null,
+                minute: null,
+                meridiem: null,
+                hour24: null,
+                second: null,
+            };
+        }
+        const dateObj = dayjs(val).tz(timezone);
+        console.log('[DateTimePicker] Parsed date object:', {
+            original: val,
+            timezone,
+            isValid: dateObj.isValid(),
+            formatted: dateObj.format('YYYY-MM-DD HH:mm:ss Z'),
+            hour24: dateObj.hour(),
+            minute: dateObj.minute(),
+            second: dateObj.second(),
+        });
+        if (!dateObj.isValid()) {
+            console.log('[DateTimePicker] Invalid date object, returning nulls');
+            return {
+                hour12: null,
+                minute: null,
+                meridiem: null,
+                hour24: null,
+                second: null,
+            };
+        }
+        const hour24Value = dateObj.hour();
+        const hour12Value = hour24Value % 12 || 12;
+        const minuteValue = dateObj.minute();
+        const meridiemValue = hour24Value >= 12 ? 'pm' : 'am';
+        const secondValue = showSeconds ? dateObj.second() : null;
+        const result = {
+            hour12: hour12Value,
+            minute: minuteValue,
+            meridiem: meridiemValue,
+            hour24: hour24Value,
+            second: secondValue,
+        };
+        console.log('[DateTimePicker] Extracted time values:', result);
+        return result;
+    }, [timezone, showSeconds]);
+    const initialTime = getTimeFromValue(value);
+    console.log('[DateTimePicker] Initial time from value:', {
+        value,
+        initialTime,
+    });
     // Time state for 12-hour format
-    const [hour12, setHour12] = useState(value ? dayjs(value).hour() % 12 || 12 : null);
-    const [minute, setMinute] = useState(value ? dayjs(value).minute() : null);
-    const [meridiem, setMeridiem] = useState(value ? (dayjs(value).hour() >= 12 ? 'pm' : 'am') : null);
+    const [hour12, setHour12] = useState(initialTime.hour12);
+    const [minute, setMinute] = useState(initialTime.minute);
+    const [meridiem, setMeridiem] = useState(initialTime.meridiem);
     // Time state for 24-hour format
-    const [hour24, setHour24] = useState(value ? dayjs(value).hour() : null);
-    const [second, setSecond] = useState(showSeconds && value ? dayjs(value).second() : null);
+    const [hour24, setHour24] = useState(initialTime.hour24);
+    const [second, setSecond] = useState(initialTime.second);
+    // Sync selectedDate and time states when value prop changes
+    useEffect(() => {
+        console.log('[DateTimePicker] useEffect triggered - value changed:', {
+            value,
+            timezone,
+            format,
+        });
+        // If value is null, undefined, or invalid, clear all fields
+        if (!value || value === null || value === undefined) {
+            console.log('[DateTimePicker] Value is null/undefined, clearing all fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            return;
+        }
+        // Check if value is valid
+        const dateObj = dayjs(value).tz(timezone);
+        if (!dateObj.isValid()) {
+            console.log('[DateTimePicker] Invalid value, clearing all fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            return;
+        }
+        const dateString = getDateString(value);
+        console.log('[DateTimePicker] Setting selectedDate:', dateString);
+        setSelectedDate(dateString);
+        const timeData = getTimeFromValue(value);
+        console.log('[DateTimePicker] Updating time states:', {
+            timeData,
+        });
+        setHour12(timeData.hour12);
+        setMinute(timeData.minute);
+        setMeridiem(timeData.meridiem);
+        setHour24(timeData.hour24);
+        setSecond(timeData.second);
+    }, [value, getTimeFromValue, getDateString, timezone]);
     const handleDateChange = (date) => {
+        console.log('[DateTimePicker] handleDateChange called:', {
+            date,
+            timezone,
+            showSeconds,
+            currentTimeStates: { hour12, minute, meridiem, hour24, second },
+        });
+        // If date is empty or invalid, clear all fields
+        if (!date || date === '') {
+            console.log('[DateTimePicker] Empty date, clearing all fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
+            return;
+        }
         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:', {
+            date,
+            timezone,
+            isValid: dateObj.isValid(),
+            isoString: dateObj.toISOString(),
+            formatted: dateObj.format('YYYY-MM-DD HH:mm:ss Z'),
+        });
+        if (!dateObj.isValid()) {
+            console.warn('[DateTimePicker] Invalid date object in handleDateChange, clearing fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
+            return;
+        }
         // When showSeconds is false, ignore seconds from the date
-        const dateObj = dayjs(date).tz(timezone);
-        if (!showSeconds && dateObj.isValid()) {
+        if (!showSeconds) {
             const dateWithoutSeconds = dateObj.second(0).millisecond(0).toISOString();
+            console.log('[DateTimePicker] Updating date without seconds:', dateWithoutSeconds);
             updateDateTime(dateWithoutSeconds);
         }
         else {
-            updateDateTime(dateObj.toISOString());
+            const dateWithSeconds = dateObj.toISOString();
+            console.log('[DateTimePicker] Updating date with seconds:', dateWithSeconds);
+            updateDateTime(dateWithSeconds);
         }
     };
     const handleTimeChange = (timeData) => {
+        console.log('[DateTimePicker] handleTimeChange called:', {
+            timeData,
+            format,
+            selectedDate,
+            timezone,
+        });
         if (format === 'iso-date-time') {
             const data = timeData;
+            console.log('[DateTimePicker] ISO format - setting 24-hour time:', data);
             setHour24(data.hour);
             setMinute(data.minute);
             if (showSeconds) {
@@ -6391,60 +6873,161 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         }
         else {
             const data = timeData;
+            console.log('[DateTimePicker] 12-hour format - setting time:', data);
             setHour12(data.hour);
             setMinute(data.minute);
             setMeridiem(data.meridiem);
         }
-        // Use selectedDate if valid, otherwise use today's date as fallback
-        const dateToUse = selectedDate && dayjs(selectedDate).isValid()
-            ? selectedDate
-            : dayjs().tz(timezone).toISOString();
-        const dateObj = dayjs(dateToUse).tz(timezone);
+        // Use selectedDate if valid, otherwise 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;
+        }
+        const dateObj = dayjs(selectedDate).tz(timezone);
         if (dateObj.isValid()) {
             updateDateTime(dateObj.toISOString(), timeData);
         }
+        else {
+            console.warn('[DateTimePicker] Invalid date object in handleTimeChange, clearing fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
+        }
     };
     const updateDateTime = (date, timeData) => {
-        if (!date) {
+        console.log('[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)');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
             onChange?.(undefined);
             return;
         }
         // use dayjs to convert the date to the timezone
         const dateObj = dayjs(date).tz(timezone);
         if (!dateObj.isValid()) {
+            console.warn('[DateTimePicker] Invalid date object in updateDateTime, clearing fields:', date);
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
             return;
         }
         const newDate = dateObj.toDate();
         if (format === 'iso-date-time') {
             const data = timeData;
-            const h = data?.hour ?? hour24;
-            const m = data?.minute ?? minute;
+            // Use timeData values if provided, otherwise fall back to current state
+            // But if timeData is explicitly provided with nulls, we need to check if all are null
+            const h = data !== undefined ? data.hour : hour24;
+            const m = data !== undefined ? data.minute : minute;
             // Always ignore seconds when showSeconds is false - set to 0
-            const s = showSeconds ? data?.second ?? second ?? 0 : 0;
+            const s = showSeconds
+                ? data !== undefined
+                    ? data.second ?? null
+                    : second ?? 0
+                : 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');
+                onChange?.(undefined);
+                return;
+            }
+            console.log('[DateTimePicker] ISO format - setting time on date:', {
+                h,
+                m,
+                s,
+                showSeconds,
+            });
             if (h !== null)
                 newDate.setHours(h);
             if (m !== null)
                 newDate.setMinutes(m);
-            newDate.setSeconds(s);
+            newDate.setSeconds(s ?? 0);
         }
         else {
             const data = timeData;
-            const h = data?.hour ?? hour12;
-            const m = data?.minute ?? minute;
-            const mer = data?.meridiem ?? meridiem;
+            console.log('[DateTimePicker] Processing 12-hour format:', {
+                'data !== undefined': data !== undefined,
+                'data?.hour': data?.hour,
+                'data?.minute': data?.minute,
+                'data?.meridiem': data?.meridiem,
+                'current hour12': hour12,
+                'current minute': minute,
+                'current meridiem': meridiem,
+            });
+            // Use timeData values if provided, otherwise fall back to current state
+            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 });
+            // 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');
+                onChange?.(undefined);
+                return;
+            }
+            console.log('[DateTimePicker] 12-hour format - converting time:', {
+                h,
+                m,
+                mer,
+            });
             if (h !== null && mer !== null) {
                 let hour24 = h;
                 if (mer === 'am' && h === 12)
                     hour24 = 0;
                 else if (mer === 'pm' && h < 12)
                     hour24 = h + 12;
+                console.log('[DateTimePicker] Converted to 24-hour:', {
+                    h,
+                    mer,
+                    hour24,
+                });
                 newDate.setHours(hour24);
             }
-            if (m !== null)
+            else {
+                console.log('[DateTimePicker] Skipping hour update - h or mer is null:', {
+                    h,
+                    mer,
+                });
+            }
+            if (m !== null) {
                 newDate.setMinutes(m);
+            }
+            else {
+                console.log('[DateTimePicker] Skipping minute update - m is null');
+            }
             newDate.setSeconds(0);
         }
-        onChange?.(dayjs(newDate).tz(timezone).toISOString());
+        const finalISO = dayjs(newDate).tz(timezone).toISOString();
+        console.log('[DateTimePicker] Final ISO string to emit:', {
+            newDate: newDate.toISOString(),
+            timezone,
+            finalISO,
+        });
+        onChange?.(finalISO);
     };
     const handleClear = () => {
         setSelectedDate('');
@@ -6460,14 +7043,92 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     const normalizedStartTime = startTime
         ? dayjs(startTime).tz(timezone).millisecond(0).toISOString()
         : undefined;
-    return (jsxs(Flex, { direction: "column", gap: 4, p: 4, border: "1px solid", borderColor: "gray.200", borderRadius: "md", children: [jsx(DatePicker$1, { selected: selectedDate ? dayjs(selectedDate).tz(timezone).toDate() : new Date(), onDateSelected: ({ date }) => handleDateChange(dayjs(date).tz(timezone).toISOString()), monthsToDisplay: 1, labels: labels, minDate: normalizedStartTime &&
-                    dayjs(normalizedStartTime).tz(timezone).isValid()
-                    ? dayjs(normalizedStartTime).tz(timezone).startOf('day').toDate()
-                    : undefined }), jsxs(Grid, { templateColumns: "1fr auto", alignItems: "center", gap: 4, children: [isISO ? (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 })) : (jsx(TimePicker$1, { hour: hour12, setHour: setHour12, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone })), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "outline", colorScheme: "red", children: jsx(Icon, { as: FaTrash }) })] }), selectedDate && (jsxs(Flex, { gap: 2, children: [jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: dayjs(value).format(isISO
-                            ? showSeconds
-                                ? 'YYYY-MM-DD HH:mm:ss'
-                                : 'YYYY-MM-DD HH:mm'
-                            : 'YYYY-MM-DD hh:mm A ') }), jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: dayjs(value).tz(timezone).format('Z') }), jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezone })] }))] }));
+    // Determine minDate: prioritize explicit minDate prop, then fall back to startTime
+    const effectiveMinDate = minDate
+        ? minDate
+        : normalizedStartTime && dayjs(normalizedStartTime).tz(timezone).isValid()
+            ? dayjs(normalizedStartTime).tz(timezone).startOf('day').toDate()
+            : undefined;
+    // Log current state before render
+    useEffect(() => {
+        console.log('[DateTimePicker] Current state before render:', {
+            isISO,
+            hour12,
+            minute,
+            meridiem,
+            hour24,
+            second,
+            selectedDate,
+            normalizedStartTime,
+            timezone,
+        });
+    }, [
+        isISO,
+        hour12,
+        minute,
+        meridiem,
+        hour24,
+        second,
+        selectedDate,
+        normalizedStartTime,
+        timezone,
+    ]);
+    // Compute display text from current state
+    const displayText = useMemo(() => {
+        if (!selectedDate)
+            return null;
+        const dateObj = dayjs.tz(selectedDate, timezone);
+        if (!dateObj.isValid())
+            return null;
+        if (isISO) {
+            // For ISO format, use hour24, minute, second
+            if (hour24 === null || minute === null)
+                return null;
+            const dateTimeObj = dateObj
+                .hour(hour24)
+                .minute(minute)
+                .second(second ?? 0);
+            return dateTimeObj.format(showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm');
+        }
+        else {
+            // For 12-hour format, use hour12, minute, meridiem
+            if (hour12 === null || minute === null || meridiem === null)
+                return null;
+            // Convert to 24-hour format for dayjs
+            let hour24Value = hour12;
+            if (meridiem === 'am' && hour12 === 12)
+                hour24Value = 0;
+            else if (meridiem === 'pm' && hour12 < 12)
+                hour24Value = hour12 + 12;
+            const dateTimeObj = dateObj.hour(hour24Value).minute(minute).second(0);
+            return dateTimeObj.format('YYYY-MM-DD hh:mm A');
+        }
+    }, [
+        selectedDate,
+        isISO,
+        hour12,
+        minute,
+        meridiem,
+        hour24,
+        second,
+        showSeconds,
+        timezone,
+    ]);
+    const timezoneOffset = useMemo(() => {
+        if (!selectedDate)
+            return null;
+        const dateObj = dayjs.tz(selectedDate, timezone);
+        return dateObj.isValid() ? dateObj.format('Z') : null;
+    }, [selectedDate, timezone]);
+    return (jsxs(Flex, { direction: "column", gap: 4, p: 4, border: "1px solid", borderColor: "gray.200", borderRadius: "md", children: [jsx(DatePickerInput, { value: selectedDate || undefined, onChange: (date) => {
+                    if (date) {
+                        handleDateChange(date);
+                    }
+                    else {
+                        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 }), jsxs(Grid, { templateColumns: "1fr auto", alignItems: "center", gap: 4, children: [isISO ? (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 })) : (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 })), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "outline", colorScheme: "red", children: jsx(Icon, { as: FaTrash }) })] }), displayText && (jsxs(Flex, { gap: 2, children: [jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: displayText }), timezoneOffset && (jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezoneOffset })), jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezone })] }))] }));
 }
 
 dayjs.extend(utc);
@@ -6483,32 +7144,9 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
     const colLabel = formI18n.colLabel;
     const [open, setOpen] = useState(false);
     const selectedDate = watch(colLabel);
-    const displayDate = dayjs(selectedDate)
-        .tz(timezone)
-        .format(displayDateFormat);
-    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;
-                // Format according to dateFormat from schema
-                const formatted = parsedDate.format(dateFormat);
-                // Update the form value only if different to avoid loops
-                if (formatted !== selectedDate) {
-                    setValue(colLabel, formatted, {
-                        shouldValidate: true,
-                        shouldDirty: true,
-                    });
-                }
-            }
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }, [selectedDate, dateFormat, colLabel, setValue]);
+    const displayDate = selectedDate && dayjs(selectedDate).tz(timezone).isValid()
+        ? dayjs(selectedDate).tz(timezone).format(displayDateFormat)
+        : '';
     const dateTimePickerLabelsConfig = {
         monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
             formI18n.translate.t(`common.month_1`, {
@@ -6581,12 +7219,22 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
             }),
     };
     const dateTimePickerContent = (jsx(DateTimePicker$1, { value: selectedDate, onChange: (date) => {
-            setValue(colLabel, dayjs(date).tz(timezone).format(dateFormat));
+            if (!date || date === null || date === undefined) {
+                setValue(colLabel, undefined);
+                return;
+            }
+            const dateObj = dayjs(date).tz(timezone);
+            if (dateObj.isValid()) {
+                setValue(colLabel, dateObj.format(dateFormat));
+            }
+            else {
+                setValue(colLabel, undefined);
+            }
         }, timezone: timezone, labels: dateTimePickerLabelsConfig }));
     return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                             setOpen(true);
-                        }, justifyContent: 'start', children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsx(Popover.Body, { children: dateTimePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsx(Popover.Body, { children: dateTimePickerContent }) }) }) }))] }) }));
+                        }, justifyContent: 'start', children: [jsx(MdDateRange, {}), displayDate || ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsx(Popover.Body, { children: dateTimePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsx(Popover.Body, { children: dateTimePickerContent }) }) }) }))] }) }));
 };
 
 const SchemaRenderer = ({ schema, prefix, column, }) => {
@@ -8017,4 +8665,4 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
         }, children: jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DatePickerInput, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };