@tidbcloud/uikit 2.4.15 → 2.4.16

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @tidbcloud/uikit
 
+## 2.4.16
+
+### Patch Changes
+
+- feat(DateTimePicker): implement useDateTimePicker ([#577](https://github.com/tidbcloud/tidbcloud-uikit/pull/577))
+- refine(AppShell): add data attribute support to NavItemBase component ([#575](https://github.com/tidbcloud/tidbcloud-uikit/pull/575))
+- feat(DateTimePicker): add footer prop for custom content in DateTimePicker component ([#574](https://github.com/tidbcloud/tidbcloud-uikit/pull/574))
+- feat(DateTimePicker): implement useDateTimePicker ([#577](https://github.com/tidbcloud/tidbcloud-uikit/pull/577))
+- refine(AppShell): add data attribute support to NavItemBase component ([#575](https://github.com/tidbcloud/tidbcloud-uikit/pull/575))
+- feat(DateTimePicker): add footer prop for custom content in DateTimePicker component ([#574](https://github.com/tidbcloud/tidbcloud-uikit/pull/574))
+
 ## 2.4.15
 
 ### Patch Changes

package/dist/biz/AppShell/navbar/NavItemBase.d.cts

@@ -4,6 +4,7 @@ export interface NavItemBaseProps extends Pick<NavLinkProps, 'label' | 'leftSect
      * Tooltip content
      */
     tooltip?: React.ReactNode;
+    [p: `data-${string}`]: string;
 }
 /**
  * NavItemBase is a pure UI component for navigation items

package/dist/biz/AppShell/navbar/NavItemBase.d.mts

@@ -4,6 +4,7 @@ export interface NavItemBaseProps extends Pick<NavLinkProps, 'label' | 'leftSect
      * Tooltip content
      */
     tooltip?: React.ReactNode;
+    [p: `data-${string}`]: string;
 }
 /**
  * NavItemBase is a pure UI component for navigation items

package/dist/biz/DateTimePicker/helpers.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ahooks = require("ahooks");
+const React = require("react");
+const dayjs = require("../../utils/dayjs.cjs");
+const useDateTimePicker = ({
+  value,
+  onChange,
+  startDate = dayjs.dayjs().subtract(10, "year").toDate(),
+  endDate = dayjs.dayjs().add(10, "year").toDate(),
+  utcOffset = dayjs.dayjs().utcOffset(),
+  format,
+  formatter
+}) => {
+  const convertToLocal = ahooks.useMemoizedFn((date) => {
+    const targetTime = dayjs.dayjs(date).utcOffset(utcOffset);
+    const converted = targetTime.utcOffset(dayjs.dayjs().utcOffset(), true);
+    return new Date(converted.format());
+  });
+  const convertFromLocal = ahooks.useMemoizedFn((date) => {
+    const targetTime = dayjs.dayjs(date).utcOffset(utcOffset, true);
+    return new Date(targetTime.format());
+  });
+  const displayValue = React.useMemo(() => {
+    if (!value) return void 0;
+    return convertToLocal(value);
+  }, [value, convertToLocal]);
+  const displayStartDate = React.useMemo(() => {
+    return convertToLocal(startDate);
+  }, [startDate, convertToLocal]);
+  const displayEndDate = React.useMemo(() => {
+    return convertToLocal(endDate);
+  }, [endDate, convertToLocal]);
+  const handleChange = ahooks.useMemoizedFn((localTime) => {
+    const targetTime = convertFromLocal(localTime);
+    onChange == null ? void 0 : onChange(targetTime);
+  });
+  return {
+    value: displayValue,
+    onChange: handleChange,
+    startDate: displayStartDate,
+    endDate: displayEndDate,
+    formatter: (val) => {
+      const targetTime = dayjs.dayjs(val).utcOffset(utcOffset, true);
+      return formatter ? formatter(new Date(targetTime.format())) : targetTime.format(format);
+    }
+  };
+};
+exports.useDateTimePicker = useDateTimePicker;

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

@@ -0,0 +1,37 @@
+import { DateTimePickerProps } from './types.cjs';
+export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
+    /**
+     * the UTC offset in minutes.
+     * User selected time will be treated as time in that timezone
+     * If the input is less than 16 and greater than -16, it will interpret your input as hours instead.
+     * It also can be a string like '+09:00' or '-01:00'
+     * @see https://day.js.org/docs/en/manipulate/utc-offset
+     */
+    utcOffset?: number | string;
+}
+/**
+ * Hook for timezone-aware DateTimePicker
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *   const [value, setValue] = useState<Date>()
+ *
+ *   // UTC+8 timezone (480 minutes)
+ *   const utcOffset = 480
+ *
+ *   // Use hook to convert timezone
+ *   const dateTimePickerProps = useDateTimePicker({
+ *     value,
+ *     onChange: setValue,
+ *     startDate: dayjs().subtract(1, 'day').toDate(),
+ *     endDate: dayjs().add(1, 'day').toDate(),
+ *     utcOffset
+ *   })
+ *
+ *   // Use spread operator to pass converted props
+ *   return <DateTimePicker {...dateTimePickerProps} />
+ * }
+ * ```
+ */
+export declare const useDateTimePicker: ({ value, onChange, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "startDate" | "endDate" | "formatter">;

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

@@ -0,0 +1,37 @@
+import { DateTimePickerProps } from './types.mjs';
+export interface UseDateTimePickerProps extends Pick<DateTimePickerProps, 'value' | 'onChange' | 'startDate' | 'endDate' | 'format' | 'formatter'> {
+    /**
+     * the UTC offset in minutes.
+     * User selected time will be treated as time in that timezone
+     * If the input is less than 16 and greater than -16, it will interpret your input as hours instead.
+     * It also can be a string like '+09:00' or '-01:00'
+     * @see https://day.js.org/docs/en/manipulate/utc-offset
+     */
+    utcOffset?: number | string;
+}
+/**
+ * Hook for timezone-aware DateTimePicker
+ *
+ * @example
+ * ```tsx
+ * const Component = () => {
+ *   const [value, setValue] = useState<Date>()
+ *
+ *   // UTC+8 timezone (480 minutes)
+ *   const utcOffset = 480
+ *
+ *   // Use hook to convert timezone
+ *   const dateTimePickerProps = useDateTimePicker({
+ *     value,
+ *     onChange: setValue,
+ *     startDate: dayjs().subtract(1, 'day').toDate(),
+ *     endDate: dayjs().add(1, 'day').toDate(),
+ *     utcOffset
+ *   })
+ *
+ *   // Use spread operator to pass converted props
+ *   return <DateTimePicker {...dateTimePickerProps} />
+ * }
+ * ```
+ */
+export declare const useDateTimePicker: ({ value, onChange, startDate, endDate, utcOffset, format, formatter }: UseDateTimePickerProps) => Pick<DateTimePickerProps, "value" | "onChange" | "startDate" | "endDate" | "formatter">;

package/dist/biz/DateTimePicker/helpers.mjs

@@ -0,0 +1,49 @@
+import { useMemoizedFn } from "ahooks";
+import { useMemo } from "react";
+import { dayjs } from "../../utils/dayjs.mjs";
+const useDateTimePicker = ({
+  value,
+  onChange,
+  startDate = dayjs().subtract(10, "year").toDate(),
+  endDate = dayjs().add(10, "year").toDate(),
+  utcOffset = dayjs().utcOffset(),
+  format,
+  formatter
+}) => {
+  const convertToLocal = useMemoizedFn((date) => {
+    const targetTime = dayjs(date).utcOffset(utcOffset);
+    const converted = targetTime.utcOffset(dayjs().utcOffset(), true);
+    return new Date(converted.format());
+  });
+  const convertFromLocal = useMemoizedFn((date) => {
+    const targetTime = dayjs(date).utcOffset(utcOffset, true);
+    return new Date(targetTime.format());
+  });
+  const displayValue = useMemo(() => {
+    if (!value) return void 0;
+    return convertToLocal(value);
+  }, [value, convertToLocal]);
+  const displayStartDate = useMemo(() => {
+    return convertToLocal(startDate);
+  }, [startDate, convertToLocal]);
+  const displayEndDate = useMemo(() => {
+    return convertToLocal(endDate);
+  }, [endDate, convertToLocal]);
+  const handleChange = useMemoizedFn((localTime) => {
+    const targetTime = convertFromLocal(localTime);
+    onChange == null ? void 0 : onChange(targetTime);
+  });
+  return {
+    value: displayValue,
+    onChange: handleChange,
+    startDate: displayStartDate,
+    endDate: displayEndDate,
+    formatter: (val) => {
+      const targetTime = dayjs(val).utcOffset(utcOffset, true);
+      return formatter ? formatter(new Date(targetTime.format())) : targetTime.format(format);
+    }
+  };
+};
+export {
+  useDateTimePicker
+};

package/dist/biz/DateTimePicker/index.cjs

@@ -9,9 +9,8 @@ const index = require("../../icons/index.cjs");
 ;/* empty css                                                                                                                                                                                                 */
 ;/* empty css                                                                                                                                                                                            */
 ;/* empty css                                                                                                                                                                                            */
-const index$1 = require("../../primitive/Typography/index.cjs");
 const dayjs = require("../../utils/dayjs.cjs");
-const helpers = require("../TimeRangePicker/helpers.cjs");
+const helpers$1 = require("../TimeRangePicker/helpers.cjs");
 const TimeScollerPicker = require("./TimeScollerPicker.cjs");
 const useDisclosure = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.cjs");
 const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
@@ -27,7 +26,7 @@ const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@7.15.2_@manti
 const Flex = 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/Flex/Flex.cjs");
 const DateTimePicker = ({
   placeholder = "Select time",
-  format = helpers.DEFAULT_TIME_FORMAT,
+  format = helpers$1.DEFAULT_TIME_FORMAT,
   formatter,
   defaultValue,
   value,
@@ -38,7 +37,8 @@ const DateTimePicker = ({
   withinPortal = true,
   sx,
   loading = false,
-  size
+  size,
+  footer
 }) => {
   const [opened, { close, open }] = useDisclosure.useDisclosure(false);
   const [currentValue, setCurrentValue] = useUncontrolled.useUncontrolled({
@@ -69,7 +69,7 @@ const DateTimePicker = ({
     }, 20);
   });
   const inputStr = formatter ? formatter(currentValue.toDate()) : currentValue.format(format);
-  const utcStr = React.useMemo(() => {
+  React.useMemo(() => {
     const utcOffset = currentValue.utcOffset();
     const h = Math.floor(utcOffset / 60);
     const m = utcOffset % 60;
@@ -214,12 +214,10 @@ const DateTimePicker = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { mx: -16 }),
-          /* @__PURE__ */ jsxRuntime.jsx(Group.Group, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Typography, { size: "sm", children: [
-            "Time selection in local time zone:",
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr })
-          ] }) })
+          footer && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { mx: -16 }),
+            footer
+          ] })
         ] }) })
       ]
     }

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

@@ -1,36 +1,8 @@
-import { MantineSize, PopoverProps, TextInputProps, TimeInputProps } from '../../primitive/index.cjs';
-export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
-    /**
-     * The placeholder of the input.
-     * @default 'Select time'
-     */
-    placeholder?: string;
-    /**
-     * The format of the date string.
-     * @default 'YYYY-MM-DD HH:mm:ss'
-     */
-    format?: string;
-    /**
-     * A function to format the date in the input
-     * If provided, `format` prop will be ignored.
-     */
-    formatter?: (val: Date) => string;
-    /**
-     * This props is deprecated, use `formatter` instead to display the time in any timezone.
-     * @deprecated
-     */
-    utcOffset?: number;
-    defaultValue?: Date;
-    value?: Date;
-    startDate?: Date;
-    endDate?: Date;
-    onChange?: (val: Date) => void;
-    disable?: boolean;
-    withinPortal?: boolean;
-    loading?: boolean;
-    size?: MantineSize;
-}
-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;
+import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index.cjs';
+import { DateTimePickerProps } from './types.cjs';
+export type { DateTimePickerProps } from './types.cjs';
+export { useDateTimePicker } from './helpers.cjs';
+export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: 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

@@ -1,36 +1,8 @@
-import { MantineSize, PopoverProps, TextInputProps, TimeInputProps } from '../../primitive/index.mjs';
-export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
-    /**
-     * The placeholder of the input.
-     * @default 'Select time'
-     */
-    placeholder?: string;
-    /**
-     * The format of the date string.
-     * @default 'YYYY-MM-DD HH:mm:ss'
-     */
-    format?: string;
-    /**
-     * A function to format the date in the input
-     * If provided, `format` prop will be ignored.
-     */
-    formatter?: (val: Date) => string;
-    /**
-     * This props is deprecated, use `formatter` instead to display the time in any timezone.
-     * @deprecated
-     */
-    utcOffset?: number;
-    defaultValue?: Date;
-    value?: Date;
-    startDate?: Date;
-    endDate?: Date;
-    onChange?: (val: Date) => void;
-    disable?: boolean;
-    withinPortal?: boolean;
-    loading?: boolean;
-    size?: MantineSize;
-}
-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;
+import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index.mjs';
+import { DateTimePickerProps } from './types.mjs';
+export type { DateTimePickerProps } from './types.mjs';
+export { useDateTimePicker } from './helpers.mjs';
+export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: 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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useMemoizedFn } from "ahooks";
 import { useState, useMemo } from "react";
 import { IconClock } from "../../icons/index.mjs";
@@ -7,7 +7,6 @@ import { IconClock } from "../../icons/index.mjs";
 /* empty css                                                                                                                                                                                                */
 /* empty css                                                                                                                                                                                           */
 /* empty css                                                                                                                                                                                           */
-import { Typography } from "../../primitive/Typography/index.mjs";
 import { dayjs } from "../../utils/dayjs.mjs";
 import { DEFAULT_TIME_FORMAT } from "../TimeRangePicker/helpers.mjs";
 import { TimeScollerPicker } from "./TimeScollerPicker.mjs";
@@ -36,7 +35,8 @@ const DateTimePicker = ({
   withinPortal = true,
   sx,
   loading = false,
-  size
+  size,
+  footer
 }) => {
   const [opened, { close, open }] = useDisclosure(false);
   const [currentValue, setCurrentValue] = useUncontrolled({
@@ -67,7 +67,7 @@ const DateTimePicker = ({
     }, 20);
   });
   const inputStr = formatter ? formatter(currentValue.toDate()) : currentValue.format(format);
-  const utcStr = useMemo(() => {
+  useMemo(() => {
     const utcOffset = currentValue.utcOffset();
     const h = Math.floor(utcOffset / 60);
     const m = utcOffset % 60;
@@ -212,12 +212,10 @@ const DateTimePicker = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx(Divider, { mx: -16 }),
-          /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsxs(Typography, { size: "sm", children: [
-            "Time selection in local time zone:",
-            " ",
-            /* @__PURE__ */ jsx(Typography, { fw: 600, component: "span", children: utcStr })
-          ] }) })
+          footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, { mx: -16 }),
+            footer
+          ] })
         ] }) })
       ]
     }

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

@@ -0,0 +1,33 @@
+import { MantineSize, TextInputProps } from '../../primitive/index.cjs';
+export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
+    /**
+     * The placeholder of the input.
+     * @default 'Select time'
+     */
+    placeholder?: string;
+    /**
+     * The format of the date string.
+     * @default 'YYYY-MM-DD HH:mm:ss'
+     */
+    format?: string;
+    /**
+     * A function to format the date in the input
+     * If provided, `format` prop will be ignored.
+     */
+    formatter?: (val: Date) => string;
+    /**
+     * This props is deprecated, use `formatter` instead to display the time in any timezone.
+     * @deprecated
+     */
+    utcOffset?: number;
+    defaultValue?: Date;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    withinPortal?: boolean;
+    loading?: boolean;
+    size?: MantineSize;
+    footer?: React.ReactNode;
+}

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

@@ -0,0 +1,33 @@
+import { MantineSize, TextInputProps } from '../../primitive/index.mjs';
+export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
+    /**
+     * The placeholder of the input.
+     * @default 'Select time'
+     */
+    placeholder?: string;
+    /**
+     * The format of the date string.
+     * @default 'YYYY-MM-DD HH:mm:ss'
+     */
+    format?: string;
+    /**
+     * A function to format the date in the input
+     * If provided, `format` prop will be ignored.
+     */
+    formatter?: (val: Date) => string;
+    /**
+     * This props is deprecated, use `formatter` instead to display the time in any timezone.
+     * @deprecated
+     */
+    utcOffset?: number;
+    defaultValue?: Date;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    withinPortal?: boolean;
+    loading?: boolean;
+    size?: MantineSize;
+    footer?: React.ReactNode;
+}

package/dist/biz/index.cjs

@@ -39,6 +39,7 @@ const SegmentControl = require("./Form/SegmentControl.cjs");
 const ProMultiSelect = require("./Form/ProMultiSelect.cjs");
 const LegacyPageShell = require("./PageShell/LegacyPageShell.cjs");
 const helpers$1 = require("./TimeRangePicker/helpers.cjs");
+const helpers$2 = require("./DateTimePicker/helpers.cjs");
 const AppShell = require("./AppShell/AppShell.cjs");
 const AppPageShell = require("./AppShell/AppPageShell.cjs");
 const NavMenuPortal = require("./AppShell/navbar/context/NavMenuPortal.cjs");
@@ -212,6 +213,7 @@ exports.toTimeRangeValue = helpers$1.toTimeRangeValue;
 exports.toURLTimeRange = helpers$1.toURLTimeRange;
 exports.urlToTimeRange = helpers$1.urlToTimeRange;
 exports.urlToTimeRangeValue = helpers$1.urlToTimeRangeValue;
+exports.useDateTimePicker = helpers$2.useDateTimePicker;
 exports.AppShell = AppShell.AppShell;
 exports.AppPageShell = AppPageShell.AppPageShell;
 exports.NavMenuPortal = NavMenuPortal.NavMenuPortal;

package/dist/biz/index.mjs

@@ -37,6 +37,7 @@ import { FormSegmentedControl } from "./Form/SegmentControl.mjs";
 import { FormProMultiSelect } from "./Form/ProMultiSelect.mjs";
 import { PageShell } from "./PageShell/LegacyPageShell.mjs";
 import { DEFAULT_QUICK_RANGES, DEFAULT_TIME_FORMAT, DEFAULT_TIME_FORMAT_WITH_TIMEZONE, DEFAULT_TIME_RANGE, addOffsetUTC, formatDuration, fromTimeRangeValue, getUTCString, timeFormatter, toTimeRangeValue, toURLTimeRange, urlToTimeRange, urlToTimeRangeValue } from "./TimeRangePicker/helpers.mjs";
+import { useDateTimePicker } from "./DateTimePicker/helpers.mjs";
 import { AppShell } from "./AppShell/AppShell.mjs";
 import { AppPageShell } from "./AppShell/AppPageShell.mjs";
 import { NavMenuPortal } from "./AppShell/navbar/context/NavMenuPortal.mjs";
@@ -213,6 +214,7 @@ export {
   toURLTimeRange,
   urlToTimeRange,
   urlToTimeRangeValue,
+  useDateTimePicker,
   useHookFormContext,
   useMRT_ColumnVirtualizer,
   useMRT_Effects,

package/package.json

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