@tidbcloud/uikit 2.4.8 → 2.4.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tidbcloud/uikit
 
+## 2.4.9
+
+### Patch Changes
+
+- refactor(DateTimePicker): remove utcOffset prop and simplify timezone handling ([#559](https://github.com/tidbcloud/tidbcloud-uikit/pull/559))
+
 ## 2.4.8
 
 ### Patch Changes

package/dist/biz/DateTimePicker/TimeScollerPicker.cjs

@@ -16,7 +16,7 @@ const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_
 const ScrollArea = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.cjs");
 const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
 const createStyles = require("../../node_modules/.pnpm/@mantine_emotion@7.15.2_@emotion_cache@11.14.0_@emotion_react@11.14.0_@types_react@18.3.18_re_vflj3eioazr6wkrxpatinf66nq/node_modules/@mantine/emotion/esm/create-styles.cjs");
-const useStyles = createStyles.createStyles(() => ({
+const useStyles = createStyles.createStyles((theme) => ({
   bold: {
     fontWeight: 600
   },
@@ -26,6 +26,14 @@ const useStyles = createStyles.createStyles(() => ({
     scrollSnapAlign: "start",
     userSelect: "none"
   },
+  cellDisabled: {
+    textAlign: "center",
+    scrollSnapAlign: "start",
+    userSelect: "none",
+    cursor: "not-allowed",
+    color: theme.colors.carbon[6],
+    opacity: 0.5
+  },
   cellPlaceholder: {
     visibility: "hidden"
   }
@@ -34,8 +42,7 @@ const getTimeRange = ({
   curr,
   type,
   start,
-  end,
-  utcOffset = dayjs.dayjs().utcOffset()
+  end
 }) => {
   const map = {
     year: {
@@ -64,8 +71,8 @@ const getTimeRange = ({
     }
   };
   let { min, max } = map[type];
-  const s1 = start ? dayjs.dayjs(start).utcOffset(utcOffset) : null;
-  const s2 = end ? dayjs.dayjs(end).utcOffset(utcOffset) : null;
+  const s1 = start ? dayjs.dayjs(start) : null;
+  const s2 = end ? dayjs.dayjs(end) : null;
   switch (type) {
     case "year": {
       if (s1) {
@@ -140,9 +147,21 @@ function TimePickerScrollerColumn({
 }) {
   const { classes, cx: clsx } = useStyles();
   const ref = React.useRef(null);
-  const numbers = React.useMemo(() => lodashEs.range(min, max + 1), [min, max]);
+  const fullRange = React.useMemo(() => {
+    switch (name) {
+      case "hour":
+        return lodashEs.range(0, 24);
+      case "minute":
+      case "second":
+        return lodashEs.range(0, 60);
+      default:
+        return lodashEs.range(min, max + 1);
+    }
+  }, [name, min, max]);
+  const numbers = fullRange;
   const timeoutRef = React.useRef();
   const isArtificialScroll = React.useRef(false);
+  const isDisabled = React.useMemo(() => (val2) => val2 < min || val2 > max, [min, max]);
   const [val, setVal] = useUncontrolled.useUncontrolled({
     value: curr,
     onChange
@@ -160,6 +179,27 @@ function TimePickerScrollerColumn({
       });
     }
   });
+  const findNearestValidValue = ahooks.useMemoizedFn((targetIndex) => {
+    let upIndex = targetIndex;
+    let downIndex = targetIndex;
+    while (upIndex >= 0 || downIndex < numbers.length) {
+      if (upIndex >= 0 && upIndex < numbers.length) {
+        const upVal = numbers[upIndex];
+        if (!isDisabled(upVal)) {
+          return { value: upVal, index: upIndex };
+        }
+      }
+      if (downIndex >= 0 && downIndex < numbers.length) {
+        const downVal = numbers[downIndex];
+        if (!isDisabled(downVal)) {
+          return { value: downVal, index: downIndex };
+        }
+      }
+      upIndex++;
+      downIndex--;
+    }
+    return null;
+  });
   const onScroll = ahooks.useMemoizedFn((position) => {
     if (isArtificialScroll.current) return;
     if (currentValueChangedBy) return;
@@ -167,24 +207,44 @@ function TimePickerScrollerColumn({
     const i = position.y / constant.CellHeight;
     if (i === Math.floor(i)) {
       const val2 = i >= numbers.length ? numbers.at(-1) : numbers[i];
-      if (typeof val2 !== "undefined") {
+      if (typeof val2 !== "undefined" && !isDisabled(val2)) {
         setVal(val2);
+      } else if (typeof val2 !== "undefined" && isDisabled(val2)) {
+        const nearest = findNearestValidValue(i);
+        if (nearest) {
+          setVal(nearest.value);
+          setTimeout(() => {
+            var _a;
+            (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: nearest.index * constant.CellHeight, behavior: "smooth" });
+          }, 100);
+        }
       }
     } else {
       timeoutRef.current = window.setTimeout(() => {
         const k = Math.round(i);
         const val2 = k >= numbers.length ? numbers.at(-1) : numbers[k];
-        if (typeof val2 !== "undefined") {
+        if (typeof val2 !== "undefined" && !isDisabled(val2)) {
           setVal(val2);
+        } else if (typeof val2 !== "undefined" && isDisabled(val2)) {
+          const nearest = findNearestValidValue(k);
+          if (nearest) {
+            setVal(nearest.value);
+            setTimeout(() => {
+              var _a;
+              (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: nearest.index * constant.CellHeight, behavior: "smooth" });
+            }, 100);
+          }
         }
       }, 300);
     }
   });
-  const handleClickCell = ahooks.useMemoizedFn((e, i) => {
+  const handleClickCell = ahooks.useMemoizedFn((e, i, val2) => {
     var _a;
     e.stopPropagation();
     e.preventDefault();
-    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * constant.CellHeight, behavior: "smooth" });
+    if (!isDisabled(val2)) {
+      (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * constant.CellHeight, behavior: "smooth" });
+    }
   });
   React.useEffect(() => {
     adjustScrollTop(val);
@@ -202,16 +262,19 @@ function TimePickerScrollerColumn({
       },
       onScrollPositionChange: onScroll,
       children: [
-        numbers.map((i, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: clsx(classes.cell, i === curr && classes.bold),
-            onClick: (e) => handleClickCell(e, index),
-            style: constant.CellStyle,
-            children: render ? render(i) : i
-          },
-          i
-        )),
+        numbers.map((i, index) => {
+          const disabled = isDisabled(i);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: clsx(disabled ? classes.cellDisabled : classes.cell, i === curr && !disabled && classes.bold),
+              onClick: (e) => handleClickCell(e, index, i),
+              style: constant.CellStyle,
+              children: render ? render(i) : i
+            },
+            i
+          );
+        }),
         lodashEs.range(6).map((i) => /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { className: clsx(classes.cell, classes.cellPlaceholder), style: constant.CellStyle }, i))
       ]
     }
@@ -222,26 +285,25 @@ function TimeScollerPicker({
   currentValueChangedBy,
   start,
   end,
-  utcOffset,
   onChange
 }) {
   const options = React.useMemo(
     () => ({
-      hour: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "hour" }),
-      minute: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "minute" }),
-      second: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "second" })
+      hour: getTimeRange({ curr: currentValue, start, end, type: "hour" }),
+      minute: getTimeRange({ curr: currentValue, start, end, type: "minute" }),
+      second: getTimeRange({ curr: currentValue, start, end, type: "second" })
     }),
-    [currentValue, start, end, utcOffset]
+    [currentValue, start, end]
   );
   const hourValue = React.useMemo(() => {
-    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).hour() : currentValue.hour();
-  }, [currentValue, utcOffset]);
+    return currentValue.hour();
+  }, [currentValue]);
   const minuteValue = React.useMemo(() => {
-    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).minute() : currentValue.minute();
-  }, [currentValue, utcOffset]);
+    return currentValue.minute();
+  }, [currentValue]);
   const secondValue = React.useMemo(() => {
-    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).second() : currentValue.second();
-  }, [currentValue, utcOffset]);
+    return currentValue.second();
+  }, [currentValue]);
   const onHourChange = ahooks.useMemoizedFn((v) => {
     onChange == null ? void 0 : onChange([v, minuteValue, secondValue]);
   });

package/dist/biz/DateTimePicker/TimeScollerPicker.d.cts

@@ -1,10 +1,9 @@
 import { Dayjs } from 'dayjs';
 export type CurrentValueChangedBy = 'calendar' | 'timeInput' | 'timeScroller';
-export declare function TimeScollerPicker({ currentValue, currentValueChangedBy, start, end, utcOffset, onChange }: {
+export declare function TimeScollerPicker({ currentValue, currentValueChangedBy, start, end, onChange }: {
     currentValue: Dayjs;
     currentValueChangedBy: CurrentValueChangedBy | null;
     start?: Date;
     end?: Date;
-    utcOffset?: number;
     onChange?: (v: [number, number, number]) => void;
 }): import("react/jsx-runtime.js").JSX.Element;

package/dist/biz/DateTimePicker/TimeScollerPicker.d.mts

@@ -1,10 +1,9 @@
 import { Dayjs } from 'dayjs';
 export type CurrentValueChangedBy = 'calendar' | 'timeInput' | 'timeScroller';
-export declare function TimeScollerPicker({ currentValue, currentValueChangedBy, start, end, utcOffset, onChange }: {
+export declare function TimeScollerPicker({ currentValue, currentValueChangedBy, start, end, onChange }: {
     currentValue: Dayjs;
     currentValueChangedBy: CurrentValueChangedBy | null;
     start?: Date;
     end?: Date;
-    utcOffset?: number;
     onChange?: (v: [number, number, number]) => void;
 }): import("react/jsx-runtime.js").JSX.Element;

package/dist/biz/DateTimePicker/TimeScollerPicker.mjs

@@ -14,7 +14,7 @@ import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_
 import { ScrollArea } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.mjs";
 import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
 import { createStyles } from "../../node_modules/.pnpm/@mantine_emotion@7.15.2_@emotion_cache@11.14.0_@emotion_react@11.14.0_@types_react@18.3.18_re_vflj3eioazr6wkrxpatinf66nq/node_modules/@mantine/emotion/esm/create-styles.mjs";
-const useStyles = createStyles(() => ({
+const useStyles = createStyles((theme) => ({
   bold: {
     fontWeight: 600
   },
@@ -24,6 +24,14 @@ const useStyles = createStyles(() => ({
     scrollSnapAlign: "start",
     userSelect: "none"
   },
+  cellDisabled: {
+    textAlign: "center",
+    scrollSnapAlign: "start",
+    userSelect: "none",
+    cursor: "not-allowed",
+    color: theme.colors.carbon[6],
+    opacity: 0.5
+  },
   cellPlaceholder: {
     visibility: "hidden"
   }
@@ -32,8 +40,7 @@ const getTimeRange = ({
   curr,
   type,
   start,
-  end,
-  utcOffset = dayjs().utcOffset()
+  end
 }) => {
   const map = {
     year: {
@@ -62,8 +69,8 @@ const getTimeRange = ({
     }
   };
   let { min, max } = map[type];
-  const s1 = start ? dayjs(start).utcOffset(utcOffset) : null;
-  const s2 = end ? dayjs(end).utcOffset(utcOffset) : null;
+  const s1 = start ? dayjs(start) : null;
+  const s2 = end ? dayjs(end) : null;
   switch (type) {
     case "year": {
       if (s1) {
@@ -138,9 +145,21 @@ function TimePickerScrollerColumn({
 }) {
   const { classes, cx: clsx } = useStyles();
   const ref = useRef(null);
-  const numbers = useMemo(() => range(min, max + 1), [min, max]);
+  const fullRange = useMemo(() => {
+    switch (name) {
+      case "hour":
+        return range(0, 24);
+      case "minute":
+      case "second":
+        return range(0, 60);
+      default:
+        return range(min, max + 1);
+    }
+  }, [name, min, max]);
+  const numbers = fullRange;
   const timeoutRef = useRef();
   const isArtificialScroll = useRef(false);
+  const isDisabled = useMemo(() => (val2) => val2 < min || val2 > max, [min, max]);
   const [val, setVal] = useUncontrolled({
     value: curr,
     onChange
@@ -158,6 +177,27 @@ function TimePickerScrollerColumn({
       });
     }
   });
+  const findNearestValidValue = useMemoizedFn((targetIndex) => {
+    let upIndex = targetIndex;
+    let downIndex = targetIndex;
+    while (upIndex >= 0 || downIndex < numbers.length) {
+      if (upIndex >= 0 && upIndex < numbers.length) {
+        const upVal = numbers[upIndex];
+        if (!isDisabled(upVal)) {
+          return { value: upVal, index: upIndex };
+        }
+      }
+      if (downIndex >= 0 && downIndex < numbers.length) {
+        const downVal = numbers[downIndex];
+        if (!isDisabled(downVal)) {
+          return { value: downVal, index: downIndex };
+        }
+      }
+      upIndex++;
+      downIndex--;
+    }
+    return null;
+  });
   const onScroll = useMemoizedFn((position) => {
     if (isArtificialScroll.current) return;
     if (currentValueChangedBy) return;
@@ -165,24 +205,44 @@ function TimePickerScrollerColumn({
     const i = position.y / CellHeight;
     if (i === Math.floor(i)) {
       const val2 = i >= numbers.length ? numbers.at(-1) : numbers[i];
-      if (typeof val2 !== "undefined") {
+      if (typeof val2 !== "undefined" && !isDisabled(val2)) {
         setVal(val2);
+      } else if (typeof val2 !== "undefined" && isDisabled(val2)) {
+        const nearest = findNearestValidValue(i);
+        if (nearest) {
+          setVal(nearest.value);
+          setTimeout(() => {
+            var _a;
+            (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: nearest.index * CellHeight, behavior: "smooth" });
+          }, 100);
+        }
       }
     } else {
       timeoutRef.current = window.setTimeout(() => {
         const k = Math.round(i);
         const val2 = k >= numbers.length ? numbers.at(-1) : numbers[k];
-        if (typeof val2 !== "undefined") {
+        if (typeof val2 !== "undefined" && !isDisabled(val2)) {
           setVal(val2);
+        } else if (typeof val2 !== "undefined" && isDisabled(val2)) {
+          const nearest = findNearestValidValue(k);
+          if (nearest) {
+            setVal(nearest.value);
+            setTimeout(() => {
+              var _a;
+              (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: nearest.index * CellHeight, behavior: "smooth" });
+            }, 100);
+          }
         }
       }, 300);
     }
   });
-  const handleClickCell = useMemoizedFn((e, i) => {
+  const handleClickCell = useMemoizedFn((e, i, val2) => {
     var _a;
     e.stopPropagation();
     e.preventDefault();
-    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * CellHeight, behavior: "smooth" });
+    if (!isDisabled(val2)) {
+      (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * CellHeight, behavior: "smooth" });
+    }
   });
   useEffect(() => {
     adjustScrollTop(val);
@@ -200,16 +260,19 @@ function TimePickerScrollerColumn({
       },
       onScrollPositionChange: onScroll,
       children: [
-        numbers.map((i, index) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(classes.cell, i === curr && classes.bold),
-            onClick: (e) => handleClickCell(e, index),
-            style: CellStyle,
-            children: render ? render(i) : i
-          },
-          i
-        )),
+        numbers.map((i, index) => {
+          const disabled = isDisabled(i);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(disabled ? classes.cellDisabled : classes.cell, i === curr && !disabled && classes.bold),
+              onClick: (e) => handleClickCell(e, index, i),
+              style: CellStyle,
+              children: render ? render(i) : i
+            },
+            i
+          );
+        }),
         range(6).map((i) => /* @__PURE__ */ jsx(Box, { className: clsx(classes.cell, classes.cellPlaceholder), style: CellStyle }, i))
       ]
     }
@@ -220,26 +283,25 @@ function TimeScollerPicker({
   currentValueChangedBy,
   start,
   end,
-  utcOffset,
   onChange
 }) {
   const options = useMemo(
     () => ({
-      hour: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "hour" }),
-      minute: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "minute" }),
-      second: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "second" })
+      hour: getTimeRange({ curr: currentValue, start, end, type: "hour" }),
+      minute: getTimeRange({ curr: currentValue, start, end, type: "minute" }),
+      second: getTimeRange({ curr: currentValue, start, end, type: "second" })
     }),
-    [currentValue, start, end, utcOffset]
+    [currentValue, start, end]
   );
   const hourValue = useMemo(() => {
-    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).hour() : currentValue.hour();
-  }, [currentValue, utcOffset]);
+    return currentValue.hour();
+  }, [currentValue]);
   const minuteValue = useMemo(() => {
-    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).minute() : currentValue.minute();
-  }, [currentValue, utcOffset]);
+    return currentValue.minute();
+  }, [currentValue]);
   const secondValue = useMemo(() => {
-    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).second() : currentValue.second();
-  }, [currentValue, utcOffset]);
+    return currentValue.second();
+  }, [currentValue]);
   const onHourChange = useMemoizedFn((v) => {
     onChange == null ? void 0 : onChange([v, minuteValue, secondValue]);
   });

package/dist/biz/DateTimePicker/index.cjs

@@ -35,7 +35,6 @@ const DateTimePicker = ({
   endDate = dayjs.dayjs().add(10, "year").toDate(),
   onChange,
   disable = false,
-  utcOffset = dayjs.dayjs().utcOffset(),
   withinPortal = true,
   sx,
   loading = false,
@@ -69,28 +68,29 @@ const DateTimePicker = ({
       setCurrentValueChangedBy(null);
     }, 20);
   });
-  const inputStr = formatter ? formatter(currentValue.utcOffset(utcOffset).toDate()) : currentValue.utcOffset(utcOffset).format(format);
+  const inputStr = formatter ? formatter(currentValue.toDate()) : currentValue.format(format);
   const utcStr = React.useMemo(() => {
+    const utcOffset = currentValue.utcOffset();
     const h = Math.floor(utcOffset / 60);
     const m = utcOffset % 60;
     return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
-  }, [utcOffset]);
+  }, []);
   const calendarChange = ahooks.useMemoizedFn((v) => {
     let next = currentValue;
-    next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
+    next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
     updateCurrentValue(next, "calendar");
   });
   const timeInputChange = ahooks.useMemoizedFn((e) => {
     const originVal = e.currentTarget.value;
     const v = dayjs.dayjs(originVal, "HH:mm:ss").toDate();
     let next = currentValue;
-    next = next.utcOffset(utcOffset).hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    next = next.hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
     updateCurrentValue(next, "timeInput");
   });
   const timeScrollPickerChange = ahooks.useMemoizedFn((v) => {
     const [h, m, s] = v;
     let next = currentValue;
-    next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
+    next = next.hour(h).minute(m).second(s);
     updateCurrentValue(next, "timeScroller");
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -206,8 +206,7 @@ const DateTimePicker = ({
                         currentValueChangedBy,
                         onChange: timeScrollPickerChange,
                         start: startDate,
-                        end: endDate,
-                        utcOffset
+                        end: endDate
                       }
                     )
                   ]
@@ -217,11 +216,9 @@ const DateTimePicker = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { mx: -16 }),
           /* @__PURE__ */ jsxRuntime.jsx(Group.Group, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Typography, { size: "sm", children: [
-            "Use",
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr }),
+            "Time selection in local time zone:",
             " ",
-            "from your local time zone"
+            /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr })
           ] }) })
         ] }) })
       ]
@@ -261,10 +258,18 @@ const TimePicker = ({
     if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
       return;
     }
-    if (startDate && next.isBefore(startDate)) {
-      next = dayjs.dayjs(startDate);
-    } else if (endDate && next.isAfter(endDate)) {
-      next = dayjs.dayjs(endDate);
+    const baseDate = next.format("YYYY-MM-DD");
+    if (startDate && startDate.isValid()) {
+      const startOnSameDate = dayjs.dayjs(`${baseDate} ${startDate.format("HH:mm:ss")}`);
+      if (next.isBefore(startOnSameDate)) {
+        next = next.hour(startDate.hour()).minute(startDate.minute()).second(startDate.second());
+      }
+    }
+    if (endDate && endDate.isValid()) {
+      const endOnSameDate = dayjs.dayjs(`${baseDate} ${endDate.format("HH:mm:ss")}`);
+      if (next.isAfter(endOnSameDate)) {
+        next = next.hour(endDate.hour()).minute(endDate.minute()).second(endDate.second());
+      }
     }
     setCurrentValue(next);
     setCurrentValueChangedBy(from);

package/dist/biz/DateTimePicker/index.d.cts

@@ -16,8 +16,8 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
      */
     formatter?: (val: Date) => string;
     /**
-     * The UTC offset in minutes.
-     * See https://day.js.org/docs/en/manipulate/utc-offset
+     * This props is deprecated, use `formatter` instead to display the time in any timezone.
+     * @deprecated
      */
     utcOffset?: number;
     defaultValue?: Date;
@@ -30,7 +30,7 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
     loading?: boolean;
     size?: MantineSize;
 }
-export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, utcOffset, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
 export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
     defaultValue?: string;
     /**

package/dist/biz/DateTimePicker/index.d.mts

@@ -16,8 +16,8 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
      */
     formatter?: (val: Date) => string;
     /**
-     * The UTC offset in minutes.
-     * See https://day.js.org/docs/en/manipulate/utc-offset
+     * This props is deprecated, use `formatter` instead to display the time in any timezone.
+     * @deprecated
      */
     utcOffset?: number;
     defaultValue?: Date;
@@ -30,7 +30,7 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
     loading?: boolean;
     size?: MantineSize;
 }
-export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, utcOffset, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
 export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
     defaultValue?: string;
     /**

package/dist/biz/DateTimePicker/index.mjs

@@ -33,7 +33,6 @@ const DateTimePicker = ({
   endDate = dayjs().add(10, "year").toDate(),
   onChange,
   disable = false,
-  utcOffset = dayjs().utcOffset(),
   withinPortal = true,
   sx,
   loading = false,
@@ -67,28 +66,29 @@ const DateTimePicker = ({
       setCurrentValueChangedBy(null);
     }, 20);
   });
-  const inputStr = formatter ? formatter(currentValue.utcOffset(utcOffset).toDate()) : currentValue.utcOffset(utcOffset).format(format);
+  const inputStr = formatter ? formatter(currentValue.toDate()) : currentValue.format(format);
   const utcStr = useMemo(() => {
+    const utcOffset = currentValue.utcOffset();
     const h = Math.floor(utcOffset / 60);
     const m = utcOffset % 60;
     return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
-  }, [utcOffset]);
+  }, []);
   const calendarChange = useMemoizedFn((v) => {
     let next = currentValue;
-    next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
+    next = next.year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
     updateCurrentValue(next, "calendar");
   });
   const timeInputChange = useMemoizedFn((e) => {
     const originVal = e.currentTarget.value;
     const v = dayjs(originVal, "HH:mm:ss").toDate();
     let next = currentValue;
-    next = next.utcOffset(utcOffset).hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    next = next.hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
     updateCurrentValue(next, "timeInput");
   });
   const timeScrollPickerChange = useMemoizedFn((v) => {
     const [h, m, s] = v;
     let next = currentValue;
-    next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
+    next = next.hour(h).minute(m).second(s);
     updateCurrentValue(next, "timeScroller");
   });
   return /* @__PURE__ */ jsxs(
@@ -204,8 +204,7 @@ const DateTimePicker = ({
                         currentValueChangedBy,
                         onChange: timeScrollPickerChange,
                         start: startDate,
-                        end: endDate,
-                        utcOffset
+                        end: endDate
                       }
                     )
                   ]
@@ -215,11 +214,9 @@ const DateTimePicker = ({
           ] }),
           /* @__PURE__ */ jsx(Divider, { mx: -16 }),
           /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsxs(Typography, { size: "sm", children: [
-            "Use",
-            " ",
-            /* @__PURE__ */ jsx(Typography, { fw: 600, component: "span", children: utcStr }),
+            "Time selection in local time zone:",
             " ",
-            "from your local time zone"
+            /* @__PURE__ */ jsx(Typography, { fw: 600, component: "span", children: utcStr })
           ] }) })
         ] }) })
       ]
@@ -259,10 +256,18 @@ const TimePicker = ({
     if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
       return;
     }
-    if (startDate && next.isBefore(startDate)) {
-      next = dayjs(startDate);
-    } else if (endDate && next.isAfter(endDate)) {
-      next = dayjs(endDate);
+    const baseDate = next.format("YYYY-MM-DD");
+    if (startDate && startDate.isValid()) {
+      const startOnSameDate = dayjs(`${baseDate} ${startDate.format("HH:mm:ss")}`);
+      if (next.isBefore(startOnSameDate)) {
+        next = next.hour(startDate.hour()).minute(startDate.minute()).second(startDate.second());
+      }
+    }
+    if (endDate && endDate.isValid()) {
+      const endOnSameDate = dayjs(`${baseDate} ${endDate.format("HH:mm:ss")}`);
+      if (next.isAfter(endOnSameDate)) {
+        next = next.hour(endDate.hour()).minute(endDate.minute()).second(endDate.second());
+      }
     }
     setCurrentValue(next);
     setCurrentValueChangedBy(from);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.4.8",
+  "version": "2.4.9",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",