@bsol-oss/react-datatable5 12.0.0-beta.64 → 12.0.0-beta.66

package/dist/index.js

@@ -4114,7 +4114,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                     setOpenSearchResult(true);
                 }, justifyContent: "start", children: !!watchEnum === false
                     ? ""
-                    : translate.t(removeIndex(`${colLabel}.${watchEnum ?? "null"}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
+                    : translate.t(removeIndex(`${colLabel}.${watchEnum ?? "null"}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { portalled: false, children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
                                     }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), showTotalAndLimit && (jsxRuntime.jsx(react.Text, { children: `${translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxRuntime.jsxs(react.Grid, { overflow: "auto", maxHeight: "20rem", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList
@@ -4701,7 +4701,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                             setOpenSearchResult(true);
                         }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, justifyContent: "start", children: queryDefault.isLoading ? jsxRuntime.jsx(react.Spinner, { size: "sm" }) : getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", children: [jsxRuntime.jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxRuntime.jsxs(react.Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxRuntime.jsxs(react.Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
+                }, justifyContent: "start", children: queryDefault.isLoading ? jsxRuntime.jsx(react.Spinner, { size: "sm" }) : getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { portalled: false, children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", children: [jsxRuntime.jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxRuntime.jsxs(react.Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxRuntime.jsxs(react.Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
                                                             padding: "4px 8px",
                                                             borderRadius: "4px",
                                                             border: "1px solid #ccc",
@@ -5031,99 +5031,130 @@ const TextAreaInput = ({ column, schema, prefix, }) => {
 function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
     am: "am",
     pm: "pm",
-}, onChange = (_newValue) => { }, }) {
-    // Refs for focus management
-    const hourInputRef = React.useRef(null);
-    const minuteInputRef = React.useRef(null);
-    React.useRef(null);
-    // Centralized handler for key events, value changes, and focus management
-    const handleKeyDown = (e, field) => {
-        const input = e.target;
-        const value = input.value;
-        // Handle navigation between fields
-        if (e.key === "Tab") {
-            // Tab is handled by the browser, no need to override
+}, onChange = (_newValue) => { }, timezone = "Asia/Hong_Kong", }) {
+    const handleClear = () => {
+        setHour(null);
+        setMinute(null);
+        setMeridiem(null);
+        setInputValue("");
+        setShowInput(false);
+        onChange({ hour: null, minute: null, meridiem: null });
+    };
+    const getTimeString = (hour, minute, meridiem) => {
+        if (hour === null || minute === null || meridiem === null) {
+            return "";
+        }
+        // if the hour is 24, set the hour to 0
+        if (hour === 24) {
+            return dayjs().tz(timezone).hour(0).minute(minute).format("HH:mmZ");
+        }
+        // use dayjs to format the time at current timezone
+        // if meridiem is pm, add 12 hours
+        let newHour = hour;
+        if (meridiem === "pm" && hour !== 12) {
+            newHour = hour + 12;
+        }
+        // if the hour is 12, set the meridiem to am, and set the hour to 0
+        else if (meridiem === "am" && hour === 12) {
+            newHour = 0;
+        }
+        return dayjs().tz(timezone).hour(newHour).minute(minute).format("HH:mmZ");
+    };
+    const stringTime = getTimeString(hour, minute, meridiem);
+    const [inputValue, setInputValue] = React.useState("");
+    const [showInput, setShowInput] = React.useState(false);
+    const handleBlur = (text) => {
+        // ignore all non-numeric characters
+        if (!text) {
             return;
         }
-        if (e.key === ":" && field === "hour") {
-            e.preventDefault();
-            minuteInputRef.current?.focus();
+        const value = text.replace(/[^0-9apm]/g, "");
+        if (value === "") {
+            handleClear();
             return;
         }
-        if (e.key === "Backspace" && value === "") {
-            e.preventDefault();
-            if (field === "minute") {
-                hourInputRef.current?.focus();
-            }
-            else if (field === "meridiem") {
-                minuteInputRef.current?.focus();
-            }
+        // if the value is a valid time, parse it and set the hour, minute, and meridiem
+        // if the value is not a valid time, set the stringTime to the value
+        // first two characters are the hour
+        // next two characters are the minute
+        // final two characters are the meridiem
+        const hour = parseInt(value.slice(0, 2));
+        const minute = parseInt(value.slice(2, 4));
+        const meridiem = value.slice(4, 6);
+        // validate the hour and minute
+        if (isNaN(hour) || isNaN(minute)) {
+            setInputValue("");
             return;
         }
-        // Handle number inputs
-        if (field === "hour") {
-            if (e.key.match(/^[0-9]$/)) {
-                const newValue = value + e.key;
-                const numValue = parseInt(newValue, 10);
-                console.log("newValue", newValue, numValue);
-                if (numValue > 12) {
-                    const digitValue = parseInt(e.key, 10);
-                    setHour(digitValue);
-                    onChange({ hour: digitValue, minute, meridiem });
-                    return;
-                }
-                // Auto-advance to minutes if we have a valid hour (1-12)
-                if (numValue >= 1 && numValue <= 12) {
-                    // Set the hour value
-                    setHour(numValue);
-                    onChange({ hour: numValue, minute, meridiem });
-                    // Move to minute input
-                    e.preventDefault();
-                    minuteInputRef.current?.focus();
-                }
-            }
+        // if the hour is larger than 24, set the hour to 24
+        if (hour > 24) {
+            setInputValue("");
+            return;
         }
-        else if (field === "minute") {
-            if (e.key.match(/^[0-9]$/)) {
-                const newValue = value + e.key;
-                const numValue = parseInt(newValue, 10);
-                console.log("newValue minute", newValue, numValue, numValue > 60, numValue >= 0 && numValue <= 59, e.key);
-                if (numValue > 60) {
-                    const digitValue = parseInt(e.key, 10);
-                    setMinute(digitValue);
-                    onChange({ hour, minute: digitValue, meridiem });
-                    return;
-                }
-                // Auto-advance to meridiem if we have a valid minute (0-59)
-                if (numValue >= 0 && numValue <= 59) {
-                    // Set the minute value
-                    setMinute(numValue);
-                    onChange({ hour, minute: numValue, meridiem });
-                }
-            }
+        let newHour = hour;
+        let newMinute = minute;
+        let newMeridiem = meridiem;
+        // if the hour is 24, set the meridiem to am, and set the hour to 0
+        if (hour === 24) {
+            newMeridiem = "am";
+            newHour = 0;
         }
+        // if the hour is greater than 12, set the meridiem to pm, and subtract 12 from the hour
+        else if (hour > 12) {
+            newMeridiem = "pm";
+            newHour = hour - 12;
+        }
+        // if the hour is 12, set the meridiem to pm, and set the hour to 12
+        else if (hour === 12) {
+            newMeridiem = "pm";
+            newHour = 12;
+        }
+        // if the hour is 0, set the meridiem to am, and set the hour to 12
+        else if (hour === 0) {
+            newMeridiem = "am";
+            newHour = 12;
+        }
+        else {
+            newMeridiem = meridiem ?? "am";
+            newHour = hour;
+        }
+        if (minute > 59) {
+            newMinute = 0;
+        }
+        else {
+            newMinute = minute;
+        }
+        onChange({
+            hour: newHour,
+            minute: newMinute,
+            meridiem: newMeridiem,
+        });
+        setShowInput(false);
     };
-    // Handle meridiem button click
-    const handleMeridiemClick = (newMeridiem) => {
-        setMeridiem(newMeridiem);
-        onChange({ hour, minute, meridiem: newMeridiem });
-    };
-    const handleClear = () => {
-        setHour(null);
-        setMinute(null);
-        setMeridiem(null);
-        onChange({ hour: null, minute: null, meridiem: null });
-        // Focus the hour field after clearing
-        hourInputRef.current?.focus();
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            handleBlur(e.currentTarget.value);
+        }
     };
-    return (jsxRuntime.jsx(react.Flex, { direction: "column", gap: 3, children: jsxRuntime.jsxs(react.Grid, { justifyContent: "center", alignItems: "center", templateColumns: "60px 10px 60px 90px auto", gap: "2", width: "auto", minWidth: "250px", children: [jsxRuntime.jsx(react.Input, { ref: hourInputRef, type: "text", value: hour === null ? "" : hour.toString().padStart(2, "0"), onKeyDown: (e) => handleKeyDown(e, "hour"), placeholder: "HH", maxLength: 2, textAlign: "center" }), jsxRuntime.jsx(react.Text, { children: ":" }), jsxRuntime.jsx(react.Input, { ref: minuteInputRef, type: "text", value: minute === null ? "" : minute.toString().padStart(2, "0"), onKeyDown: (e) => handleKeyDown(e, "minute"), placeholder: "MM", maxLength: 2, textAlign: "center" }), jsxRuntime.jsxs(react.Flex, { gap: "1", children: [jsxRuntime.jsx(react.Button, { size: "sm", colorScheme: meridiem === "am" ? "blue" : "gray", variant: meridiem === "am" ? "solid" : "outline", onClick: () => handleMeridiemClick("am"), width: "40px", children: meridiemLabel.am }), jsxRuntime.jsx(react.Button, { size: "sm", colorScheme: meridiem === "pm" ? "blue" : "gray", variant: meridiem === "pm" ? "solid" : "outline", onClick: () => handleMeridiemClick("pm"), width: "40px", children: meridiemLabel.pm })] }), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(md.MdCancel, {}) })] }) }));
+    const inputRef = React.useRef(null);
+    return (jsxRuntime.jsxs(react.Grid, { justifyContent: "center", alignItems: "center", templateColumns: "200px auto", gap: "2", width: "auto", minWidth: "250px", children: [jsxRuntime.jsx(react.Input, { onKeyDown: handleKeyDown, onChange: (e) => {
+                    setInputValue(e.currentTarget.value);
+                }, onBlur: (e) => {
+                    handleBlur(e.currentTarget.value);
+                }, value: inputValue, display: showInput ? undefined : "none", ref: inputRef }), jsxRuntime.jsxs(react.Button, { onClick: () => {
+                    setShowInput(true);
+                    setInputValue(dayjs(`1970-01-01T${getTimeString(hour, minute, meridiem)}`, "hh:mmZ").format("hh:mm a"));
+                    inputRef.current?.focus();
+                }, display: showInput ? "none" : "flex", alignItems: "center", justifyContent: "start", variant: "outline", gap: 2, children: [jsxRuntime.jsx(react.Icon, { size: "sm", children: jsxRuntime.jsx(bs.BsClock, {}) }), jsxRuntime.jsx(react.Text, { fontSize: "sm", children: stringTime
+                            ? dayjs(`1970-01-01T${stringTime}`, "hh:mmZ").format("hh:mm a")
+                            : "" })] }), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(md.MdCancel, {}) })] }));
 }
 
 dayjs.extend(timezone);
 const TimePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", timeFormat = "HH:mm:ssZ", displayTimeFormat = "hh:mm A", } = schema;
+    const { required, gridColumn = "span 4", gridRow = "span 1", timeFormat = "HH:mmZ", displayTimeFormat = "hh:mm A", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = React.useState(false);
@@ -5131,13 +5162,14 @@ const TimePicker = ({ column, schema, prefix }) => {
     const displayedTime = dayjs(`1970-01-01T${value}`).tz(timezone).isValid()
         ? dayjs(`1970-01-01T${value}`).tz(timezone).format(displayTimeFormat)
         : "";
-    // Parse the initial time parts from the ISO time string (HH:mm:ss)
-    const parseTime = (isoTime) => {
-        if (!isoTime)
+    // Parse the initial time parts from the  time string (HH:mm:ssZ)
+    const parseTime = (time) => {
+        if (!time)
             return { hour: 12, minute: 0, meridiem: "am" };
-        const parsed = dayjs(`1970-01-01T${isoTime}`).tz(timezone);
-        if (!parsed.isValid())
+        const parsed = dayjs(`1970-01-01T${time}`).tz(timezone);
+        if (!parsed.isValid()) {
             return { hour: 12, minute: 0, meridiem: "am" };
+        }
         let hour = parsed.hour();
         const minute = parsed.minute();
         const meridiem = hour >= 12 ? "pm" : "am";
@@ -5157,35 +5189,30 @@ const TimePicker = ({ column, schema, prefix }) => {
         setMinute(minute);
         setMeridiem(meridiem);
     }, [value]);
-    // Convert hour, minute, meridiem to 24-hour ISO time string
-    const toIsoTime = (hour, minute, meridiem) => {
+    const getTimeString = (hour, minute, meridiem) => {
         if (hour === null || minute === null || meridiem === null)
             return null;
-        let h = hour;
-        if (meridiem === "am" && hour === 12)
-            h = 0;
-        else if (meridiem === "pm" && hour < 12)
-            h = hour + 12;
-        return dayjs(`1970-01-01T${h.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}:00`)
-            .tz(timezone)
-            .format(timeFormat);
+        let newHour = hour;
+        if (meridiem === "pm" && hour !== 12) {
+            newHour = hour + 12;
+        }
+        return dayjs().tz(timezone).hour(newHour).minute(minute).format(timeFormat);
     };
     // Handle changes to time parts
     const handleTimeChange = ({ hour: newHour, minute: newMinute, meridiem: newMeridiem, }) => {
         setHour(newHour);
         setMinute(newMinute);
         setMeridiem(newMeridiem);
-        const isoTime = toIsoTime(newHour, newMinute, newMeridiem);
-        setValue(colLabel, isoTime, { shouldValidate: true, shouldDirty: true });
+        const timeString = getTimeString(newHour, newMinute, newMeridiem);
+        setValue(colLabel, timeString, { shouldValidate: true, shouldDirty: true });
     };
-    const containerRef = React.useRef(null);
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, 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(io.IoMdClock, {}), !!value ? `${displayedTime}` : ""] }) }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { ref: containerRef, 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, meridiemLabel: {
-                                            am: translate.t(`common.am`, { defaultValue: "AM" }),
-                                            pm: translate.t(`common.pm`, { defaultValue: "PM" }),
-                                        } }) }) }) }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                            }, justifyContent: "start", children: [jsxRuntime.jsx(io.IoMdClock, {}), !!value ? `${displayedTime}` : ""] }) }), 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, meridiemLabel: {
+                                        am: translate.t(`common.am`, { defaultValue: "AM" }),
+                                        pm: translate.t(`common.pm`, { defaultValue: "PM" }),
+                                    } }) }) }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, onChange = (_newValue) => { }, }) {

package/dist/index.mjs

@@ -20,7 +20,7 @@ import invariant from 'tiny-invariant';
 import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
 import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
-import { BsExclamationCircleFill } from 'react-icons/bs';
+import { BsExclamationCircleFill, BsClock } from 'react-icons/bs';
 import { useDebounce } from '@uidotdev/usehooks';
 import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { IoReload } from 'react-icons/io5';
@@ -4094,7 +4094,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                     setOpenSearchResult(true);
                 }, justifyContent: "start", children: !!watchEnum === false
                     ? ""
-                    : translate.t(removeIndex(`${colLabel}.${watchEnum ?? "null"}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
+                    : translate.t(removeIndex(`${colLabel}.${watchEnum ?? "null"}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
                                     }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxs(Grid, { overflow: "auto", maxHeight: "20rem", children: [jsx(Flex, { flexFlow: "column wrap", children: dataList
@@ -4681,7 +4681,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                             setOpenSearchResult(true);
                         }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
+                }, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/ ", count > 0 ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}` : '0'] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
                                                             padding: "4px 8px",
                                                             borderRadius: "4px",
                                                             border: "1px solid #ccc",
@@ -5011,99 +5011,130 @@ const TextAreaInput = ({ column, schema, prefix, }) => {
 function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
     am: "am",
     pm: "pm",
-}, onChange = (_newValue) => { }, }) {
-    // Refs for focus management
-    const hourInputRef = useRef(null);
-    const minuteInputRef = useRef(null);
-    useRef(null);
-    // Centralized handler for key events, value changes, and focus management
-    const handleKeyDown = (e, field) => {
-        const input = e.target;
-        const value = input.value;
-        // Handle navigation between fields
-        if (e.key === "Tab") {
-            // Tab is handled by the browser, no need to override
+}, onChange = (_newValue) => { }, timezone = "Asia/Hong_Kong", }) {
+    const handleClear = () => {
+        setHour(null);
+        setMinute(null);
+        setMeridiem(null);
+        setInputValue("");
+        setShowInput(false);
+        onChange({ hour: null, minute: null, meridiem: null });
+    };
+    const getTimeString = (hour, minute, meridiem) => {
+        if (hour === null || minute === null || meridiem === null) {
+            return "";
+        }
+        // if the hour is 24, set the hour to 0
+        if (hour === 24) {
+            return dayjs().tz(timezone).hour(0).minute(minute).format("HH:mmZ");
+        }
+        // use dayjs to format the time at current timezone
+        // if meridiem is pm, add 12 hours
+        let newHour = hour;
+        if (meridiem === "pm" && hour !== 12) {
+            newHour = hour + 12;
+        }
+        // if the hour is 12, set the meridiem to am, and set the hour to 0
+        else if (meridiem === "am" && hour === 12) {
+            newHour = 0;
+        }
+        return dayjs().tz(timezone).hour(newHour).minute(minute).format("HH:mmZ");
+    };
+    const stringTime = getTimeString(hour, minute, meridiem);
+    const [inputValue, setInputValue] = useState("");
+    const [showInput, setShowInput] = useState(false);
+    const handleBlur = (text) => {
+        // ignore all non-numeric characters
+        if (!text) {
             return;
         }
-        if (e.key === ":" && field === "hour") {
-            e.preventDefault();
-            minuteInputRef.current?.focus();
+        const value = text.replace(/[^0-9apm]/g, "");
+        if (value === "") {
+            handleClear();
             return;
         }
-        if (e.key === "Backspace" && value === "") {
-            e.preventDefault();
-            if (field === "minute") {
-                hourInputRef.current?.focus();
-            }
-            else if (field === "meridiem") {
-                minuteInputRef.current?.focus();
-            }
+        // if the value is a valid time, parse it and set the hour, minute, and meridiem
+        // if the value is not a valid time, set the stringTime to the value
+        // first two characters are the hour
+        // next two characters are the minute
+        // final two characters are the meridiem
+        const hour = parseInt(value.slice(0, 2));
+        const minute = parseInt(value.slice(2, 4));
+        const meridiem = value.slice(4, 6);
+        // validate the hour and minute
+        if (isNaN(hour) || isNaN(minute)) {
+            setInputValue("");
             return;
         }
-        // Handle number inputs
-        if (field === "hour") {
-            if (e.key.match(/^[0-9]$/)) {
-                const newValue = value + e.key;
-                const numValue = parseInt(newValue, 10);
-                console.log("newValue", newValue, numValue);
-                if (numValue > 12) {
-                    const digitValue = parseInt(e.key, 10);
-                    setHour(digitValue);
-                    onChange({ hour: digitValue, minute, meridiem });
-                    return;
-                }
-                // Auto-advance to minutes if we have a valid hour (1-12)
-                if (numValue >= 1 && numValue <= 12) {
-                    // Set the hour value
-                    setHour(numValue);
-                    onChange({ hour: numValue, minute, meridiem });
-                    // Move to minute input
-                    e.preventDefault();
-                    minuteInputRef.current?.focus();
-                }
-            }
+        // if the hour is larger than 24, set the hour to 24
+        if (hour > 24) {
+            setInputValue("");
+            return;
         }
-        else if (field === "minute") {
-            if (e.key.match(/^[0-9]$/)) {
-                const newValue = value + e.key;
-                const numValue = parseInt(newValue, 10);
-                console.log("newValue minute", newValue, numValue, numValue > 60, numValue >= 0 && numValue <= 59, e.key);
-                if (numValue > 60) {
-                    const digitValue = parseInt(e.key, 10);
-                    setMinute(digitValue);
-                    onChange({ hour, minute: digitValue, meridiem });
-                    return;
-                }
-                // Auto-advance to meridiem if we have a valid minute (0-59)
-                if (numValue >= 0 && numValue <= 59) {
-                    // Set the minute value
-                    setMinute(numValue);
-                    onChange({ hour, minute: numValue, meridiem });
-                }
-            }
+        let newHour = hour;
+        let newMinute = minute;
+        let newMeridiem = meridiem;
+        // if the hour is 24, set the meridiem to am, and set the hour to 0
+        if (hour === 24) {
+            newMeridiem = "am";
+            newHour = 0;
         }
+        // if the hour is greater than 12, set the meridiem to pm, and subtract 12 from the hour
+        else if (hour > 12) {
+            newMeridiem = "pm";
+            newHour = hour - 12;
+        }
+        // if the hour is 12, set the meridiem to pm, and set the hour to 12
+        else if (hour === 12) {
+            newMeridiem = "pm";
+            newHour = 12;
+        }
+        // if the hour is 0, set the meridiem to am, and set the hour to 12
+        else if (hour === 0) {
+            newMeridiem = "am";
+            newHour = 12;
+        }
+        else {
+            newMeridiem = meridiem ?? "am";
+            newHour = hour;
+        }
+        if (minute > 59) {
+            newMinute = 0;
+        }
+        else {
+            newMinute = minute;
+        }
+        onChange({
+            hour: newHour,
+            minute: newMinute,
+            meridiem: newMeridiem,
+        });
+        setShowInput(false);
     };
-    // Handle meridiem button click
-    const handleMeridiemClick = (newMeridiem) => {
-        setMeridiem(newMeridiem);
-        onChange({ hour, minute, meridiem: newMeridiem });
-    };
-    const handleClear = () => {
-        setHour(null);
-        setMinute(null);
-        setMeridiem(null);
-        onChange({ hour: null, minute: null, meridiem: null });
-        // Focus the hour field after clearing
-        hourInputRef.current?.focus();
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            handleBlur(e.currentTarget.value);
+        }
     };
-    return (jsx(Flex, { direction: "column", gap: 3, children: jsxs(Grid, { justifyContent: "center", alignItems: "center", templateColumns: "60px 10px 60px 90px auto", gap: "2", width: "auto", minWidth: "250px", children: [jsx(Input, { ref: hourInputRef, type: "text", value: hour === null ? "" : hour.toString().padStart(2, "0"), onKeyDown: (e) => handleKeyDown(e, "hour"), placeholder: "HH", maxLength: 2, textAlign: "center" }), jsx(Text, { children: ":" }), jsx(Input, { ref: minuteInputRef, type: "text", value: minute === null ? "" : minute.toString().padStart(2, "0"), onKeyDown: (e) => handleKeyDown(e, "minute"), placeholder: "MM", maxLength: 2, textAlign: "center" }), jsxs(Flex, { gap: "1", children: [jsx(Button$1, { size: "sm", colorScheme: meridiem === "am" ? "blue" : "gray", variant: meridiem === "am" ? "solid" : "outline", onClick: () => handleMeridiemClick("am"), width: "40px", children: meridiemLabel.am }), jsx(Button$1, { size: "sm", colorScheme: meridiem === "pm" ? "blue" : "gray", variant: meridiem === "pm" ? "solid" : "outline", onClick: () => handleMeridiemClick("pm"), width: "40px", children: meridiemLabel.pm })] }), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(MdCancel, {}) })] }) }));
+    const inputRef = useRef(null);
+    return (jsxs(Grid, { justifyContent: "center", alignItems: "center", templateColumns: "200px auto", gap: "2", width: "auto", minWidth: "250px", children: [jsx(Input, { onKeyDown: handleKeyDown, onChange: (e) => {
+                    setInputValue(e.currentTarget.value);
+                }, onBlur: (e) => {
+                    handleBlur(e.currentTarget.value);
+                }, value: inputValue, display: showInput ? undefined : "none", ref: inputRef }), jsxs(Button$1, { onClick: () => {
+                    setShowInput(true);
+                    setInputValue(dayjs(`1970-01-01T${getTimeString(hour, minute, meridiem)}`, "hh:mmZ").format("hh:mm a"));
+                    inputRef.current?.focus();
+                }, display: showInput ? "none" : "flex", alignItems: "center", justifyContent: "start", variant: "outline", gap: 2, children: [jsx(Icon, { size: "sm", children: jsx(BsClock, {}) }), jsx(Text, { fontSize: "sm", children: stringTime
+                            ? dayjs(`1970-01-01T${stringTime}`, "hh:mmZ").format("hh:mm a")
+                            : "" })] }), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(MdCancel, {}) })] }));
 }
 
 dayjs.extend(timezone);
 const TimePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", timeFormat = "HH:mm:ssZ", displayTimeFormat = "hh:mm A", } = schema;
+    const { required, gridColumn = "span 4", gridRow = "span 1", timeFormat = "HH:mmZ", displayTimeFormat = "hh:mm A", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = useState(false);
@@ -5111,13 +5142,14 @@ const TimePicker = ({ column, schema, prefix }) => {
     const displayedTime = dayjs(`1970-01-01T${value}`).tz(timezone).isValid()
         ? dayjs(`1970-01-01T${value}`).tz(timezone).format(displayTimeFormat)
         : "";
-    // Parse the initial time parts from the ISO time string (HH:mm:ss)
-    const parseTime = (isoTime) => {
-        if (!isoTime)
+    // Parse the initial time parts from the  time string (HH:mm:ssZ)
+    const parseTime = (time) => {
+        if (!time)
             return { hour: 12, minute: 0, meridiem: "am" };
-        const parsed = dayjs(`1970-01-01T${isoTime}`).tz(timezone);
-        if (!parsed.isValid())
+        const parsed = dayjs(`1970-01-01T${time}`).tz(timezone);
+        if (!parsed.isValid()) {
             return { hour: 12, minute: 0, meridiem: "am" };
+        }
         let hour = parsed.hour();
         const minute = parsed.minute();
         const meridiem = hour >= 12 ? "pm" : "am";
@@ -5137,35 +5169,30 @@ const TimePicker = ({ column, schema, prefix }) => {
         setMinute(minute);
         setMeridiem(meridiem);
     }, [value]);
-    // Convert hour, minute, meridiem to 24-hour ISO time string
-    const toIsoTime = (hour, minute, meridiem) => {
+    const getTimeString = (hour, minute, meridiem) => {
         if (hour === null || minute === null || meridiem === null)
             return null;
-        let h = hour;
-        if (meridiem === "am" && hour === 12)
-            h = 0;
-        else if (meridiem === "pm" && hour < 12)
-            h = hour + 12;
-        return dayjs(`1970-01-01T${h.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}:00`)
-            .tz(timezone)
-            .format(timeFormat);
+        let newHour = hour;
+        if (meridiem === "pm" && hour !== 12) {
+            newHour = hour + 12;
+        }
+        return dayjs().tz(timezone).hour(newHour).minute(minute).format(timeFormat);
     };
     // Handle changes to time parts
     const handleTimeChange = ({ hour: newHour, minute: newMinute, meridiem: newMeridiem, }) => {
         setHour(newHour);
         setMinute(newMinute);
         setMeridiem(newMeridiem);
-        const isoTime = toIsoTime(newHour, newMinute, newMeridiem);
-        setValue(colLabel, isoTime, { shouldValidate: true, shouldDirty: true });
+        const timeString = getTimeString(newHour, newMinute, newMeridiem);
+        setValue(colLabel, timeString, { shouldValidate: true, shouldDirty: true });
     };
-    const containerRef = useRef(null);
     return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, 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: () => {
                                 setOpen(true);
-                            }, justifyContent: "start", children: [jsx(IoMdClock, {}), !!value ? `${displayedTime}` : ""] }) }), jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { ref: containerRef, children: jsx(Popover.Body, { children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, meridiemLabel: {
-                                            am: translate.t(`common.am`, { defaultValue: "AM" }),
-                                            pm: translate.t(`common.pm`, { defaultValue: "PM" }),
-                                        } }) }) }) }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                            }, justifyContent: "start", children: [jsx(IoMdClock, {}), !!value ? `${displayedTime}` : ""] }) }), jsx(Popover.Positioner, { children: jsx(Popover.Content, { children: jsx(Popover.Body, { children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, meridiemLabel: {
+                                        am: translate.t(`common.am`, { defaultValue: "AM" }),
+                                        pm: translate.t(`common.pm`, { defaultValue: "PM" }),
+                                    } }) }) }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, onChange = (_newValue) => { }, }) {

package/dist/types/components/TimePicker/TimePicker.d.ts

@@ -15,6 +15,7 @@ interface TimePickerProps {
         am: string;
         pm: string;
     };
+    timezone?: string;
 }
-export declare function TimePicker({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel, onChange, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimePicker({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel, onChange, timezone, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.64",
+  "version": "12.0.0-beta.66",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",