@tidbcloud/uikit 2.0.0-beta.82 → 2.0.0-beta.83

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.83
+
+### Patch Changes
+
+- fix DateTimePicker with refactored scroll picker
+
 ## 2.0.0-beta.82
 
 ### Patch Changes

package/dist/biz/DateTimePicker/{usePickerScroll.cjs → TimeScollerPicker.cjs}

@@ -14,6 +14,8 @@ const dayjs = require("dayjs");
 require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.cjs");
 require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.cjs");
 const constant = require("./constant.cjs");
+const Flex = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
+const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
 const ScrollArea = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.cjs");
 const Box = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.cjs");
 const createStyles = require("../../node_modules/.pnpm/@mantine_emotion@7.13.2_@emotion_cache@11.13.1_@emotion_react@11.13.3_@types_react@18.3.11_re_v5yho7ri2fgh4vhey6nnpomqsu/node_modules/@mantine/emotion/esm/create-styles.cjs");
@@ -129,18 +131,41 @@ const getTimeRange = ({
   }
   return { min, max };
 };
-const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
-  const { classes, cx } = useStyles();
+const default2DigitRender = (val) => lodashEs.padStart(String(val), 2, "0");
+function TimePickerScrollerColumn({
+  min,
+  max,
+  curr,
+  render = default2DigitRender,
+  onChange,
+  name,
+  currentValueChangedBy
+}) {
+  const { classes, cx: clsx } = useStyles();
   const ref = React.useRef(null);
+  const numbers = React.useMemo(() => lodashEs.range(min, max + 1), [min, max]);
   const timeoutRef = React.useRef();
-  const [val, setVal] = React.useState(curr);
-  const handleClickCell = ahooks.useMemoizedFn((e, i) => {
-    var _a;
-    e.stopPropagation();
-    e.preventDefault();
-    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * constant.CellHeight, behavior: "smooth" });
+  const isArtificialScroll = React.useRef(false);
+  const [val, setVal] = useUncontrolled.useUncontrolled({
+    value: curr,
+    onChange
+  });
+  const adjustScrollTop = ahooks.useMemoizedFn((value) => {
+    if (currentValueChangedBy === "timeScroller") return;
+    const i = numbers.findIndex((i2) => i2 === value);
+    if (i !== -1 && ref.current) {
+      isArtificialScroll.current = true;
+      ref.current.scrollTop = i * constant.CellHeight;
+      window.requestAnimationFrame(() => {
+        setTimeout(() => {
+          isArtificialScroll.current = false;
+        }, 100);
+      });
+    }
   });
   const onScroll = ahooks.useMemoizedFn((position) => {
+    if (isArtificialScroll.current) return;
+    if (currentValueChangedBy) return;
     clearTimeout(timeoutRef.current);
     const i = position.y / constant.CellHeight;
     if (i === Math.floor(i)) {
@@ -158,62 +183,51 @@ const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
       }, 300);
     }
   });
-  const numbers = React.useMemo(() => lodashEs.range(min, max + 1), [min, max]);
-  const content = React.useMemo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
-      ScrollArea.ScrollArea,
-      {
-        viewportRef: ref,
-        type: "never",
-        styles: {
-          viewport: {
-            scrollSnapPointsY: `repeat(${constant.CellHeight}px)`,
-            scrollSnapType: "y mandatory"
-          }
-        },
-        onScrollPositionChange: onScroll,
-        children: [
-          numbers.map((i, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: cx(classes.cell, i === curr && classes.bold),
-              onClick: (e) => handleClickCell(e, index),
-              style: constant.CellStyle,
-              children: render ? render(i) : i
-            },
-            i
-          )),
-          lodashEs.range(6).map((i) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { className: cx(classes.cell, classes.cellPlaceholder), style: constant.CellStyle }, i))
-        ]
-      }
-    );
-  }, [numbers, handleClickCell, onScroll, curr, render, classes]);
-  const adjustScrollTop = ahooks.useMemoizedFn(() => {
+  const handleClickCell = ahooks.useMemoizedFn((e, i) => {
     var _a;
-    const i = numbers.findIndex((i2) => i2 === val);
-    if (i !== -1 && open) {
-      const s = i * constant.CellHeight;
-      (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: s, behavior: "auto" });
-    }
+    e.stopPropagation();
+    e.preventDefault();
+    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * constant.CellHeight, behavior: "smooth" });
   });
   React.useEffect(() => {
-    const rIC = window.requestIdleCallback ?? window.setTimeout;
-    rIC(() => {
-      adjustScrollTop();
-    });
-  }, [open, val, adjustScrollTop]);
-  React.useEffect(() => {
-    if (numbers.findIndex((i) => i === curr) > -1) {
-      setVal(curr);
+    adjustScrollTop(val);
+  }, [val]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    ScrollArea.ScrollArea,
+    {
+      viewportRef: ref,
+      type: "never",
+      styles: {
+        viewport: {
+          scrollSnapPointsY: `repeat(${constant.CellHeight}px)`,
+          scrollSnapType: "y mandatory"
+        }
+      },
+      onScrollPositionChange: onScroll,
+      children: [
+        numbers.map((i, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: clsx(classes.cell, i === curr && classes.bold),
+            onClick: (e) => handleClickCell(e, index),
+            style: constant.CellStyle,
+            children: render ? render(i) : i
+          },
+          i
+        )),
+        lodashEs.range(6).map((i) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { className: clsx(classes.cell, classes.cellPlaceholder), style: constant.CellStyle }, i))
+      ]
     }
-  }, [curr, numbers]);
-  return {
-    value: val,
-    content
-  };
-};
-const default2DigitRender = (val) => lodashEs.padStart(String(val), 2, "0");
-const useTimePickerScroll = (currentValue, open, start, end, utcOffset) => {
+  );
+}
+function TimeScollerPicker({
+  currentValue,
+  currentValueChangedBy,
+  start,
+  end,
+  utcOffset,
+  onChange
+}) {
   const options = React.useMemo(
     () => ({
       hour: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "hour" }),
@@ -222,43 +236,58 @@ const useTimePickerScroll = (currentValue, open, start, end, utcOffset) => {
     }),
     [currentValue, start, end, utcOffset]
   );
-  const hour = usePickerScrollColumn({
-    ...options.hour,
-    curr: typeof utcOffset !== "undefined" ? currentValue.utcOffset(utcOffset ?? currentValue.utcOffset()).hour() : currentValue.hour(),
-    open,
-    render: default2DigitRender,
-    title: "hour"
+  const hourValue = React.useMemo(() => {
+    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).hour() : currentValue.hour();
+  }, [currentValue, utcOffset]);
+  const minuteValue = React.useMemo(() => {
+    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).minute() : currentValue.minute();
+  }, [currentValue, utcOffset]);
+  const secondValue = React.useMemo(() => {
+    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).second() : currentValue.second();
+  }, [currentValue, utcOffset]);
+  const onHourChange = ahooks.useMemoizedFn((v) => {
+    onChange == null ? void 0 : onChange([v, minuteValue, secondValue]);
   });
-  const minute = usePickerScrollColumn({
-    ...options.minute,
-    curr: currentValue.minute(),
-    open,
-    render: default2DigitRender,
-    title: "minute"
+  const onMinuteChange = ahooks.useMemoizedFn((v) => {
+    onChange == null ? void 0 : onChange([hourValue, v, secondValue]);
   });
-  const second = usePickerScrollColumn({
-    ...options.second,
-    curr: currentValue.second(),
-    open,
-    render: default2DigitRender,
-    title: "second"
+  const onSecondChange = ahooks.useMemoizedFn((v) => {
+    onChange == null ? void 0 : onChange([hourValue, minuteValue, v]);
   });
-  const content = React.useMemo(
-    () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
-      hour.content,
-      minute.content,
-      second.content
-    ] }),
-    [hour.content, minute.content, second.content]
-  );
-  const value = React.useMemo(
-    () => [hour.value, minute.value, second.value],
-    [hour.value, minute.value, second.value]
-  );
-  return {
-    content,
-    value
-  };
-};
-exports.getTimeRange = getTimeRange;
-exports.useTimePickerScroll = useTimePickerScroll;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { mah: "100%", gap: 8, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      TimePickerScrollerColumn,
+      {
+        name: "hour",
+        min: options.hour.min,
+        max: options.hour.max,
+        curr: hourValue,
+        onChange: onHourChange,
+        currentValueChangedBy
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      TimePickerScrollerColumn,
+      {
+        name: "minute",
+        min: options.minute.min,
+        max: options.minute.max,
+        curr: minuteValue,
+        onChange: onMinuteChange,
+        currentValueChangedBy
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      TimePickerScrollerColumn,
+      {
+        name: "second",
+        min: options.second.min,
+        max: options.second.max,
+        curr: secondValue,
+        onChange: onSecondChange,
+        currentValueChangedBy
+      }
+    )
+  ] });
+}
+exports.TimeScollerPicker = TimeScollerPicker;

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

@@ -0,0 +1,10 @@
+import { Dayjs } from 'dayjs';
+export type CurrentValueChangedBy = 'calendar' | 'timeInput' | 'timeScroller';
+export declare function TimeScollerPicker({ currentValue, currentValueChangedBy, start, end, utcOffset, 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.ts

@@ -0,0 +1,10 @@
+import { Dayjs } from 'dayjs';
+export type CurrentValueChangedBy = 'calendar' | 'timeInput' | 'timeScroller';
+export declare function TimeScollerPicker({ currentValue, currentValueChangedBy, start, end, utcOffset, 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/{usePickerScroll.js → TimeScollerPicker.js}

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
 import { useMemoizedFn } from "ahooks";
 import { range, padStart } from "lodash-es";
-import { useMemo, useRef, useState, useEffect } from "react";
+import { useMemo, useRef, useEffect } from "react";
 /* empty css                                                                                                                                                                                      */
 /* empty css                                                                                                                                                                                       */
 /* empty css                                                                                                                                                                                                */
@@ -12,6 +12,8 @@ import dayjs from "dayjs";
 import "../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.js";
 import "../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.js";
 import { CellHeight, CellStyle } from "./constant.js";
+import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Flex/Flex.js";
+import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.js";
 import { ScrollArea } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.js";
 import { Box } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.js";
 import { createStyles } from "../../node_modules/.pnpm/@mantine_emotion@7.13.2_@emotion_cache@11.13.1_@emotion_react@11.13.3_@types_react@18.3.11_re_v5yho7ri2fgh4vhey6nnpomqsu/node_modules/@mantine/emotion/esm/create-styles.js";
@@ -127,18 +129,41 @@ const getTimeRange = ({
   }
   return { min, max };
 };
-const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
-  const { classes, cx } = useStyles();
+const default2DigitRender = (val) => padStart(String(val), 2, "0");
+function TimePickerScrollerColumn({
+  min,
+  max,
+  curr,
+  render = default2DigitRender,
+  onChange,
+  name,
+  currentValueChangedBy
+}) {
+  const { classes, cx: clsx } = useStyles();
   const ref = useRef(null);
+  const numbers = useMemo(() => range(min, max + 1), [min, max]);
   const timeoutRef = useRef();
-  const [val, setVal] = useState(curr);
-  const handleClickCell = useMemoizedFn((e, i) => {
-    var _a;
-    e.stopPropagation();
-    e.preventDefault();
-    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * CellHeight, behavior: "smooth" });
+  const isArtificialScroll = useRef(false);
+  const [val, setVal] = useUncontrolled({
+    value: curr,
+    onChange
+  });
+  const adjustScrollTop = useMemoizedFn((value) => {
+    if (currentValueChangedBy === "timeScroller") return;
+    const i = numbers.findIndex((i2) => i2 === value);
+    if (i !== -1 && ref.current) {
+      isArtificialScroll.current = true;
+      ref.current.scrollTop = i * CellHeight;
+      window.requestAnimationFrame(() => {
+        setTimeout(() => {
+          isArtificialScroll.current = false;
+        }, 100);
+      });
+    }
   });
   const onScroll = useMemoizedFn((position) => {
+    if (isArtificialScroll.current) return;
+    if (currentValueChangedBy) return;
     clearTimeout(timeoutRef.current);
     const i = position.y / CellHeight;
     if (i === Math.floor(i)) {
@@ -156,62 +181,51 @@ const usePickerScrollColumn = ({ min, max, curr, open, render }) => {
       }, 300);
     }
   });
-  const numbers = useMemo(() => range(min, max + 1), [min, max]);
-  const content = useMemo(() => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ScrollArea,
-      {
-        viewportRef: ref,
-        type: "never",
-        styles: {
-          viewport: {
-            scrollSnapPointsY: `repeat(${CellHeight}px)`,
-            scrollSnapType: "y mandatory"
-          }
-        },
-        onScrollPositionChange: onScroll,
-        children: [
-          numbers.map((i, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: cx(classes.cell, i === curr && classes.bold),
-              onClick: (e) => handleClickCell(e, index),
-              style: CellStyle,
-              children: render ? render(i) : i
-            },
-            i
-          )),
-          range(6).map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: cx(classes.cell, classes.cellPlaceholder), style: CellStyle }, i))
-        ]
-      }
-    );
-  }, [numbers, handleClickCell, onScroll, curr, render, classes]);
-  const adjustScrollTop = useMemoizedFn(() => {
+  const handleClickCell = useMemoizedFn((e, i) => {
     var _a;
-    const i = numbers.findIndex((i2) => i2 === val);
-    if (i !== -1 && open) {
-      const s = i * CellHeight;
-      (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: s, behavior: "auto" });
-    }
+    e.stopPropagation();
+    e.preventDefault();
+    (_a = ref.current) == null ? void 0 : _a.scrollTo({ top: i * CellHeight, behavior: "smooth" });
   });
   useEffect(() => {
-    const rIC = window.requestIdleCallback ?? window.setTimeout;
-    rIC(() => {
-      adjustScrollTop();
-    });
-  }, [open, val, adjustScrollTop]);
-  useEffect(() => {
-    if (numbers.findIndex((i) => i === curr) > -1) {
-      setVal(curr);
+    adjustScrollTop(val);
+  }, [val]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ScrollArea,
+    {
+      viewportRef: ref,
+      type: "never",
+      styles: {
+        viewport: {
+          scrollSnapPointsY: `repeat(${CellHeight}px)`,
+          scrollSnapType: "y mandatory"
+        }
+      },
+      onScrollPositionChange: onScroll,
+      children: [
+        numbers.map((i, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: clsx(classes.cell, i === curr && classes.bold),
+            onClick: (e) => handleClickCell(e, index),
+            style: CellStyle,
+            children: render ? render(i) : i
+          },
+          i
+        )),
+        range(6).map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: clsx(classes.cell, classes.cellPlaceholder), style: CellStyle }, i))
+      ]
     }
-  }, [curr, numbers]);
-  return {
-    value: val,
-    content
-  };
-};
-const default2DigitRender = (val) => padStart(String(val), 2, "0");
-const useTimePickerScroll = (currentValue, open, start, end, utcOffset) => {
+  );
+}
+function TimeScollerPicker({
+  currentValue,
+  currentValueChangedBy,
+  start,
+  end,
+  utcOffset,
+  onChange
+}) {
   const options = useMemo(
     () => ({
       hour: getTimeRange({ curr: currentValue, start, end, utcOffset, type: "hour" }),
@@ -220,45 +234,60 @@ const useTimePickerScroll = (currentValue, open, start, end, utcOffset) => {
     }),
     [currentValue, start, end, utcOffset]
   );
-  const hour = usePickerScrollColumn({
-    ...options.hour,
-    curr: typeof utcOffset !== "undefined" ? currentValue.utcOffset(utcOffset ?? currentValue.utcOffset()).hour() : currentValue.hour(),
-    open,
-    render: default2DigitRender,
-    title: "hour"
+  const hourValue = useMemo(() => {
+    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).hour() : currentValue.hour();
+  }, [currentValue, utcOffset]);
+  const minuteValue = useMemo(() => {
+    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).minute() : currentValue.minute();
+  }, [currentValue, utcOffset]);
+  const secondValue = useMemo(() => {
+    return typeof utcOffset === "number" ? currentValue.utcOffset(utcOffset).second() : currentValue.second();
+  }, [currentValue, utcOffset]);
+  const onHourChange = useMemoizedFn((v) => {
+    onChange == null ? void 0 : onChange([v, minuteValue, secondValue]);
   });
-  const minute = usePickerScrollColumn({
-    ...options.minute,
-    curr: currentValue.minute(),
-    open,
-    render: default2DigitRender,
-    title: "minute"
+  const onMinuteChange = useMemoizedFn((v) => {
+    onChange == null ? void 0 : onChange([hourValue, v, secondValue]);
   });
-  const second = usePickerScrollColumn({
-    ...options.second,
-    curr: currentValue.second(),
-    open,
-    render: default2DigitRender,
-    title: "second"
+  const onSecondChange = useMemoizedFn((v) => {
+    onChange == null ? void 0 : onChange([hourValue, minuteValue, v]);
   });
-  const content = useMemo(
-    () => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      hour.content,
-      minute.content,
-      second.content
-    ] }),
-    [hour.content, minute.content, second.content]
-  );
-  const value = useMemo(
-    () => [hour.value, minute.value, second.value],
-    [hour.value, minute.value, second.value]
-  );
-  return {
-    content,
-    value
-  };
-};
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { mah: "100%", gap: 8, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TimePickerScrollerColumn,
+      {
+        name: "hour",
+        min: options.hour.min,
+        max: options.hour.max,
+        curr: hourValue,
+        onChange: onHourChange,
+        currentValueChangedBy
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TimePickerScrollerColumn,
+      {
+        name: "minute",
+        min: options.minute.min,
+        max: options.minute.max,
+        curr: minuteValue,
+        onChange: onMinuteChange,
+        currentValueChangedBy
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TimePickerScrollerColumn,
+      {
+        name: "second",
+        min: options.second.min,
+        max: options.second.max,
+        curr: secondValue,
+        onChange: onSecondChange,
+        currentValueChangedBy
+      }
+    )
+  ] });
+}
 export {
-  getTimeRange,
-  useTimePickerScroll
+  TimeScollerPicker
 };

package/dist/biz/DateTimePicker/index.cjs

@@ -15,8 +15,9 @@ const dayjs = require("dayjs");
 require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.cjs");
 require("../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.cjs");
 const helpers = require("../TimeRangePicker/helpers.cjs");
-const usePickerScroll = require("./usePickerScroll.cjs");
+const TimeScollerPicker = require("./TimeScollerPicker.cjs");
 const useDisclosure = require("../../node_modules/.pnpm/@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.cjs");
+const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
 const Popover = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Popover/Popover.cjs");
 const TextInput = require("../../primitive/TextInput/TextInput.cjs");
 const Loader = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Loader/Loader.cjs");
@@ -43,12 +44,29 @@ const DateTimePicker = ({
   size
 }) => {
   const [opened, { close, open }] = useDisclosure.useDisclosure(false);
-  const [currentValue, setCurrentValue] = React.useState(
-    defaultValue ? dayjs(defaultValue) : value ? dayjs(value) : dayjs()
-  );
-  const updateCurrentValue = ahooks.useMemoizedFn((val) => {
-    setCurrentValue(val);
-    onChange == null ? void 0 : onChange(val.toDate());
+  const [currentValue, setCurrentValue] = useUncontrolled.useUncontrolled({
+    value: value ? dayjs(value) : void 0,
+    defaultValue: defaultValue ? dayjs(defaultValue) : dayjs(),
+    onChange: (v) => {
+      onChange == null ? void 0 : onChange(v.toDate());
+    }
+  });
+  const [currentValueChangedBy, setCurrentValueChangedBy] = React.useState(null);
+  const updateCurrentValue = ahooks.useMemoizedFn((val, from) => {
+    let next = val;
+    if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
+      return;
+    }
+    if (startDate && next.valueOf() < startDate.valueOf()) {
+      next = dayjs(startDate);
+    } else if (endDate && next.valueOf() > endDate.valueOf()) {
+      next = dayjs(endDate);
+    }
+    setCurrentValue(next);
+    setCurrentValueChangedBy(from);
+    setTimeout(() => {
+      setCurrentValueChangedBy(null);
+    }, 20);
   });
   const inputStr = currentValue.format(format);
   const utcStr = React.useMemo(() => {
@@ -56,40 +74,24 @@ const DateTimePicker = ({
     const m = utcOffset % 60;
     return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
   }, [utcOffset]);
-  const scroll = usePickerScroll.useTimePickerScroll(currentValue, opened, startDate, endDate, utcOffset);
   const calendarChange = ahooks.useMemoizedFn((v) => {
     let next = currentValue;
     next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
-    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
-      updateCurrentValue(next);
-    }
+    updateCurrentValue(next, "calendar");
   });
   const timeInputChange = ahooks.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());
-    if (startDate && next.valueOf() < startDate.valueOf()) {
-      updateCurrentValue(dayjs(startDate));
-    } else if (endDate && next.valueOf() > endDate.valueOf()) {
-      updateCurrentValue(dayjs(endDate));
-    } else if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
-      updateCurrentValue(next);
-    }
+    updateCurrentValue(next, "timeInput");
   });
-  ahooks.useUpdateEffect(() => {
+  const timeScrollPickerChange = ahooks.useMemoizedFn((v) => {
+    const [h, m, s] = v;
     let next = currentValue;
-    const [h, m, s] = scroll.value;
     next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
-    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
-      updateCurrentValue(next);
-    }
-  }, [scroll.value]);
-  ahooks.useUpdateEffect(() => {
-    if (value && dayjs(value).unix() !== currentValue.unix()) {
-      updateCurrentValue(dayjs(value));
-    }
-  }, [value]);
+    updateCurrentValue(next, "timeScroller");
+  });
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
       TextInput.TextInput,
@@ -207,7 +209,17 @@ const DateTimePicker = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { mah: "100%", gap: 8, children: scroll.content })
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  TimeScollerPicker.TimeScollerPicker,
+                  {
+                    currentValue,
+                    currentValueChangedBy,
+                    onChange: timeScrollPickerChange,
+                    start: startDate,
+                    end: endDate,
+                    utcOffset
+                  }
+                )
               ]
             }
           )

package/dist/biz/DateTimePicker/index.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
-import { useMemoizedFn, useUpdateEffect } from "ahooks";
+import { useMemoizedFn } from "ahooks";
 import { useState, useMemo } from "react";
 import { IconClock } from "../../icons/index.js";
 /* empty css                                                                                                                                                                                      */
@@ -13,8 +13,9 @@ import dayjs from "dayjs";
 import "../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/timezone.js";
 import "../../node_modules/.pnpm/dayjs@1.11.13/node_modules/dayjs/plugin/utc.js";
 import { DEFAULT_TIME_FORMAT } from "../TimeRangePicker/helpers.js";
-import { useTimePickerScroll } from "./usePickerScroll.js";
+import { TimeScollerPicker } from "./TimeScollerPicker.js";
 import { useDisclosure } from "../../node_modules/.pnpm/@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.js";
+import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.13.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.js";
 import { Popover } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Popover/Popover.js";
 import { TextInput } from "../../primitive/TextInput/TextInput.js";
 import { Loader } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Loader/Loader.js";
@@ -41,12 +42,29 @@ const DateTimePicker = ({
   size
 }) => {
   const [opened, { close, open }] = useDisclosure(false);
-  const [currentValue, setCurrentValue] = useState(
-    defaultValue ? dayjs(defaultValue) : value ? dayjs(value) : dayjs()
-  );
-  const updateCurrentValue = useMemoizedFn((val) => {
-    setCurrentValue(val);
-    onChange == null ? void 0 : onChange(val.toDate());
+  const [currentValue, setCurrentValue] = useUncontrolled({
+    value: value ? dayjs(value) : void 0,
+    defaultValue: defaultValue ? dayjs(defaultValue) : dayjs(),
+    onChange: (v) => {
+      onChange == null ? void 0 : onChange(v.toDate());
+    }
+  });
+  const [currentValueChangedBy, setCurrentValueChangedBy] = useState(null);
+  const updateCurrentValue = useMemoizedFn((val, from) => {
+    let next = val;
+    if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
+      return;
+    }
+    if (startDate && next.valueOf() < startDate.valueOf()) {
+      next = dayjs(startDate);
+    } else if (endDate && next.valueOf() > endDate.valueOf()) {
+      next = dayjs(endDate);
+    }
+    setCurrentValue(next);
+    setCurrentValueChangedBy(from);
+    setTimeout(() => {
+      setCurrentValueChangedBy(null);
+    }, 20);
   });
   const inputStr = currentValue.format(format);
   const utcStr = useMemo(() => {
@@ -54,40 +72,24 @@ const DateTimePicker = ({
     const m = utcOffset % 60;
     return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
   }, [utcOffset]);
-  const scroll = useTimePickerScroll(currentValue, opened, startDate, endDate, utcOffset);
   const calendarChange = useMemoizedFn((v) => {
     let next = currentValue;
     next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
-    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
-      updateCurrentValue(next);
-    }
+    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());
-    if (startDate && next.valueOf() < startDate.valueOf()) {
-      updateCurrentValue(dayjs(startDate));
-    } else if (endDate && next.valueOf() > endDate.valueOf()) {
-      updateCurrentValue(dayjs(endDate));
-    } else if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
-      updateCurrentValue(next);
-    }
+    updateCurrentValue(next, "timeInput");
   });
-  useUpdateEffect(() => {
+  const timeScrollPickerChange = useMemoizedFn((v) => {
+    const [h, m, s] = v;
     let next = currentValue;
-    const [h, m, s] = scroll.value;
     next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
-    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
-      updateCurrentValue(next);
-    }
-  }, [scroll.value]);
-  useUpdateEffect(() => {
-    if (value && dayjs(value).unix() !== currentValue.unix()) {
-      updateCurrentValue(dayjs(value));
-    }
-  }, [value]);
+    updateCurrentValue(next, "timeScroller");
+  });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       TextInput,
@@ -205,7 +207,17 @@ const DateTimePicker = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { mah: "100%", gap: 8, children: scroll.content })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  TimeScollerPicker,
+                  {
+                    currentValue,
+                    currentValueChangedBy,
+                    onChange: timeScrollPickerChange,
+                    start: startDate,
+                    end: endDate,
+                    utcOffset
+                  }
+                )
               ]
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.82",
+  "version": "2.0.0-beta.83",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",

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

@@ -1,29 +0,0 @@
-import { Dayjs } from 'dayjs';
-export declare const getTimeRange: ({ curr, type, start, end, utcOffset }: {
-    curr: Dayjs;
-    type: "year" | "month" | "day" | "hour" | "minute" | "second";
-    start?: Date;
-    end?: Date;
-    utcOffset?: number;
-}) => Range;
-interface Options {
-    max: number;
-    min: number;
-    /**
-     * always use real value, not 0-indexed value
-     */
-    curr: number;
-    open: boolean;
-    render?: (val: number) => any;
-    title?: string;
-}
-type Range = Pick<Options, 'max' | 'min'>;
-export declare const useDatePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
-    content: import("react/jsx-runtime.js").JSX.Element;
-    value: readonly [number, number, number];
-};
-export declare const useTimePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
-    content: import("react/jsx-runtime.js").JSX.Element;
-    value: readonly [number, number, number];
-};
-export {};

package/dist/biz/DateTimePicker/usePickerScroll.d.ts

@@ -1,29 +0,0 @@
-import { Dayjs } from 'dayjs';
-export declare const getTimeRange: ({ curr, type, start, end, utcOffset }: {
-    curr: Dayjs;
-    type: "year" | "month" | "day" | "hour" | "minute" | "second";
-    start?: Date;
-    end?: Date;
-    utcOffset?: number;
-}) => Range;
-interface Options {
-    max: number;
-    min: number;
-    /**
-     * always use real value, not 0-indexed value
-     */
-    curr: number;
-    open: boolean;
-    render?: (val: number) => any;
-    title?: string;
-}
-type Range = Pick<Options, 'max' | 'min'>;
-export declare const useDatePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
-    content: import("react/jsx-runtime.js").JSX.Element;
-    value: readonly [number, number, number];
-};
-export declare const useTimePickerScroll: (currentValue: Dayjs, open: boolean, start?: Date, end?: Date, utcOffset?: number) => {
-    content: import("react/jsx-runtime.js").JSX.Element;
-    value: readonly [number, number, number];
-};
-export {};