@tidbcloud/uikit 2.8.5 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/biz/DateTimePicker/helpers.cjs +4 -4
  3. package/dist/biz/DateTimePicker/helpers.mjs +4 -4
  4. package/dist/biz/DateTimePicker/index.cjs +20 -9
  5. package/dist/biz/DateTimePicker/index.d.cts +1 -1
  6. package/dist/biz/DateTimePicker/index.d.mts +1 -1
  7. package/dist/biz/DateTimePicker/index.mjs +21 -10
  8. package/dist/biz/Form/DateTimePicker.cjs +57 -0
  9. package/dist/biz/Form/DateTimePicker.d.cts +38 -0
  10. package/dist/biz/Form/DateTimePicker.d.mts +38 -0
  11. package/dist/biz/Form/DateTimePicker.mjs +57 -0
  12. package/dist/biz/Form/FormErrorMessage.cjs +14 -1
  13. package/dist/biz/Form/FormErrorMessage.mjs +14 -1
  14. package/dist/biz/Form/index.d.cts +1 -0
  15. package/dist/biz/Form/index.d.mts +1 -0
  16. package/dist/biz/index.cjs +2 -0
  17. package/dist/biz/index.mjs +2 -0
  18. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - feat(Form): add timezone-aware date time picker ([#662](https://github.com/tidbcloud/tidbcloud-uikit/pull/662))
8
+
9
+ ## 2.8.6
10
+
11
+ ### Patch Changes
12
+
13
+ - fix(Form): restrict error message HTML ([#659](https://github.com/tidbcloud/tidbcloud-uikit/pull/659))
14
+ - fix(ci): authorize and isolate snapshot publishing ([#660](https://github.com/tidbcloud/tidbcloud-uikit/pull/660))
15
+
3
16
  ## 2.8.5
4
17
 
5
18
  ### Patch Changes
package/dist/biz/DateTimePicker/helpers.cjs CHANGED
@@ -26,16 +26,16 @@ const useDateTimePicker = ({
26
26
  const displayValue = React.useMemo(() => {
27
27
  if (!value) return void 0;
28
28
  return convertToLocal(value);
29
- }, [value, convertToLocal]);
29
+ }, [value, utcOffset, convertToLocal]);
30
30
  const displayStartDate = React.useMemo(() => {
31
31
  return convertToLocal(startDate);
32
- }, [startDate, convertToLocal]);
32
+ }, [startDate, utcOffset, convertToLocal]);
33
33
  const displayToday = React.useMemo(() => {
34
34
  return convertToLocal(today);
35
- }, [today, convertToLocal]);
35
+ }, [today, utcOffset, convertToLocal]);
36
36
  const displayEndDate = React.useMemo(() => {
37
37
  return convertToLocal(endDate);
38
- }, [endDate, convertToLocal]);
38
+ }, [endDate, utcOffset, convertToLocal]);
39
39
  const handleChange = ahooks.useMemoizedFn((localTime) => {
40
40
  const targetTime = convertFromLocal(localTime);
41
41
  onChange == null ? void 0 : onChange(targetTime);
package/dist/biz/DateTimePicker/helpers.mjs CHANGED
@@ -24,16 +24,16 @@ const useDateTimePicker = ({
24
24
  const displayValue = useMemo(() => {
25
25
  if (!value) return void 0;
26
26
  return convertToLocal(value);
27
- }, [value, convertToLocal]);
27
+ }, [value, utcOffset, convertToLocal]);
28
28
  const displayStartDate = useMemo(() => {
29
29
  return convertToLocal(startDate);
30
- }, [startDate, convertToLocal]);
30
+ }, [startDate, utcOffset, convertToLocal]);
31
31
  const displayToday = useMemo(() => {
32
32
  return convertToLocal(today);
33
- }, [today, convertToLocal]);
33
+ }, [today, utcOffset, convertToLocal]);
34
34
  const displayEndDate = useMemo(() => {
35
35
  return convertToLocal(endDate);
36
- }, [endDate, convertToLocal]);
36
+ }, [endDate, utcOffset, convertToLocal]);
37
37
  const handleChange = useMemoizedFn((localTime) => {
38
38
  const targetTime = convertFromLocal(localTime);
39
39
  onChange == null ? void 0 : onChange(targetTime);
package/dist/biz/DateTimePicker/index.cjs CHANGED
@@ -12,23 +12,23 @@ const index = require("../../icons/index.cjs");
12
12
  const dayjs = require("../../utils/dayjs.cjs");
13
13
  const helpers$1 = require("../TimeRangePicker/helpers.cjs");
14
14
  const TimeScollerPicker = require("./TimeScollerPicker.cjs");
15
- const useDisclosure = require("../../node_modules/.pnpm/@mantine_hooks@7.17.8_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.cjs");
16
15
  const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.17.8_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
17
16
  const Popover = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Popover/Popover.cjs");
17
+ const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
18
+ const Box = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/core/Box/Box.cjs");
19
+ const Flex = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
20
+ const useDisclosure = require("../../node_modules/.pnpm/@mantine_hooks@7.17.8_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.cjs");
18
21
  const TextInput = require("../../primitive/TextInput/TextInput.cjs");
19
22
  const Loader = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Loader/Loader.cjs");
20
- const Box = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/core/Box/Box.cjs");
21
23
  const Stack = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Stack/Stack.cjs");
22
24
  const Group = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Group/Group.cjs");
23
25
  const DatePicker = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/DatePicker/DatePicker.cjs");
24
26
  const Divider = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
25
- const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
26
- const Flex = require("../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.cjs");
27
27
  const getValidDate = (value) => {
28
28
  const date = value ? dayjs.dayjs(value) : void 0;
29
29
  return (date == null ? void 0 : date.isValid()) ? date : void 0;
30
30
  };
31
- const DateTimePicker = ({
31
+ const DateTimePickerInput = ({
32
32
  placeholder = "Select time",
33
33
  format = helpers$1.DEFAULT_TIME_FORMAT,
34
34
  formatter,
@@ -44,8 +44,12 @@ const DateTimePicker = ({
44
44
  sx,
45
45
  loading = false,
46
46
  size,
47
- footer
48
- }) => {
47
+ footer,
48
+ disabled,
49
+ onClick,
50
+ utcOffset: _utcOffset,
51
+ ...rest
52
+ }, ref) => {
49
53
  const [opened, { close, open }] = useDisclosure.useDisclosure(false);
50
54
  const currentDay = dayjs.dayjs(today).startOf("day");
51
55
  const minimumDate = dayjs.dayjs(startDate);
@@ -122,14 +126,19 @@ const DateTimePicker = ({
122
126
  /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
123
127
  TextInput.TextInput,
124
128
  {
129
+ ...rest,
130
+ ref,
125
131
  readOnly: true,
126
- disabled: disable,
132
+ disabled: disable || disabled,
127
133
  placeholder,
128
134
  value: inputStr,
129
135
  rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
130
136
  sx,
131
137
  size,
132
- onClick: open
138
+ onClick: (event) => {
139
+ onClick == null ? void 0 : onClick(event);
140
+ if (!event.defaultPrevented) open();
141
+ }
133
142
  }
134
143
  ) }),
135
144
  /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { children: [
@@ -269,6 +278,8 @@ const DateTimePicker = ({
269
278
  }
270
279
  );
271
280
  };
281
+ const DateTimePicker = React.forwardRef(DateTimePickerInput);
282
+ DateTimePicker.displayName = "DateTimePicker";
272
283
  const TimePicker = ({
273
284
  value,
274
285
  onChange,
package/dist/biz/DateTimePicker/index.d.cts CHANGED
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
32
32
  import { DateTimePickerProps } from './types.cjs';
33
33
  export type { DateTimePickerProps } from './types.cjs';
34
34
  export { useDateTimePicker } from './helpers.cjs';
35
- export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, highlightToday, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
35
+ export declare const DateTimePicker: import('react').ForwardRefExoticComponent<DateTimePickerProps & import('react').RefAttributes<HTMLInputElement>>;
36
36
  export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
37
37
  defaultValue?: string;
38
38
  /**
package/dist/biz/DateTimePicker/index.d.mts CHANGED
@@ -32,7 +32,7 @@ import { MantineSize, PopoverProps, TimeInputProps } from '../../primitive/index
32
32
  import { DateTimePickerProps } from './types.mjs';
33
33
  export type { DateTimePickerProps } from './types.mjs';
34
34
  export { useDateTimePicker } from './helpers.mjs';
35
- export declare const DateTimePicker: ({ placeholder, format, formatter, defaultValue, value, today, highlightToday, startDate, endDate, onChange, disable, withinPortal, sx, loading, size, footer }: DateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
35
+ export declare const DateTimePicker: import('react').ForwardRefExoticComponent<DateTimePickerProps & import('react').RefAttributes<HTMLInputElement>>;
36
36
  export interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
37
37
  defaultValue?: string;
38
38
  /**
package/dist/biz/DateTimePicker/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { useMemoizedFn } from "ahooks";
3
- import { useState, useMemo } from "react";
3
+ import { forwardRef, useState, useMemo } from "react";
4
4
  import { IconClock } from "../../icons/index.mjs";
5
5
  /* empty css */
6
6
  /* empty css */
@@ -10,23 +10,23 @@ import { IconClock } from "../../icons/index.mjs";
10
10
  import { dayjs } from "../../utils/dayjs.mjs";
11
11
  import { DEFAULT_TIME_FORMAT } from "../TimeRangePicker/helpers.mjs";
12
12
  import { TimeScollerPicker } from "./TimeScollerPicker.mjs";
13
- import { useDisclosure } from "../../node_modules/.pnpm/@mantine_hooks@7.17.8_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.mjs";
14
13
  import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.17.8_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs";
15
14
  import { Popover } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Popover/Popover.mjs";
15
+ import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.mjs";
16
+ import { Box } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/core/Box/Box.mjs";
17
+ import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.mjs";
18
+ import { useDisclosure } from "../../node_modules/.pnpm/@mantine_hooks@7.17.8_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.mjs";
16
19
  import { TextInput } from "../../primitive/TextInput/TextInput.mjs";
17
20
  import { Loader } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Loader/Loader.mjs";
18
- import { Box } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/core/Box/Box.mjs";
19
21
  import { Stack } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Stack/Stack.mjs";
20
22
  import { Group } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Group/Group.mjs";
21
23
  import { DatePicker } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/DatePicker/DatePicker.mjs";
22
24
  import { Divider } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
23
- import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@7.17.8_@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hoo_itsuscsie4edrhi6ero4lpb3hq/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.mjs";
24
- import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/esm/components/Flex/Flex.mjs";
25
25
  const getValidDate = (value) => {
26
26
  const date = value ? dayjs(value) : void 0;
27
27
  return (date == null ? void 0 : date.isValid()) ? date : void 0;
28
28
  };
29
- const DateTimePicker = ({
29
+ const DateTimePickerInput = ({
30
30
  placeholder = "Select time",
31
31
  format = DEFAULT_TIME_FORMAT,
32
32
  formatter,
@@ -42,8 +42,12 @@ const DateTimePicker = ({
42
42
  sx,
43
43
  loading = false,
44
44
  size,
45
- footer
46
- }) => {
45
+ footer,
46
+ disabled,
47
+ onClick,
48
+ utcOffset: _utcOffset,
49
+ ...rest
50
+ }, ref) => {
47
51
  const [opened, { close, open }] = useDisclosure(false);
48
52
  const currentDay = dayjs(today).startOf("day");
49
53
  const minimumDate = dayjs(startDate);
@@ -120,14 +124,19 @@ const DateTimePicker = ({
120
124
  /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
121
125
  TextInput,
122
126
  {
127
+ ...rest,
128
+ ref,
123
129
  readOnly: true,
124
- disabled: disable,
130
+ disabled: disable || disabled,
125
131
  placeholder,
126
132
  value: inputStr,
127
133
  rightSection: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : /* @__PURE__ */ jsx(Box, { component: IconClock, size: 18, c: "carbon.6" }),
128
134
  sx,
129
135
  size,
130
- onClick: open
136
+ onClick: (event) => {
137
+ onClick == null ? void 0 : onClick(event);
138
+ if (!event.defaultPrevented) open();
139
+ }
131
140
  }
132
141
  ) }),
133
142
  /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxs(Stack, { children: [
@@ -267,6 +276,8 @@ const DateTimePicker = ({
267
276
  }
268
277
  );
269
278
  };
279
+ const DateTimePicker = forwardRef(DateTimePickerInput);
280
+ DateTimePicker.displayName = "DateTimePicker";
270
281
  const TimePicker = ({
271
282
  value,
272
283
  onChange,
package/dist/biz/Form/DateTimePicker.cjs ADDED
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const reactHookForm = require("react-hook-form");
5
+ const index = require("../DateTimePicker/index.cjs");
6
+ const helpers$1 = require("../TimeRangePicker/helpers.cjs");
7
+ const helpers = require("../DateTimePicker/helpers.cjs");
8
+ const FormDateTimePicker = ({
9
+ name,
10
+ rules,
11
+ utcOffset,
12
+ startDate,
13
+ endDate,
14
+ today,
15
+ highlightToday,
16
+ format = helpers$1.DEFAULT_TIME_FORMAT,
17
+ formatter,
18
+ onChange,
19
+ onBlur,
20
+ error,
21
+ disabled,
22
+ ...rest
23
+ }) => {
24
+ var _a;
25
+ const { control } = reactHookForm.useFormContext();
26
+ const { field, fieldState } = reactHookForm.useController({ name, rules, control });
27
+ const pickerProps = helpers.useDateTimePicker({
28
+ value: field.value ? new Date(field.value) : void 0,
29
+ utcOffset,
30
+ startDate,
31
+ endDate,
32
+ today,
33
+ highlightToday,
34
+ format,
35
+ formatter,
36
+ onChange: (value) => {
37
+ field.onChange(value.toISOString());
38
+ onChange == null ? void 0 : onChange(value);
39
+ }
40
+ });
41
+ return /* @__PURE__ */ jsxRuntime.jsx(
42
+ index.DateTimePicker,
43
+ {
44
+ ...rest,
45
+ ...pickerProps,
46
+ name: field.name,
47
+ ref: field.ref,
48
+ disabled: field.disabled || disabled,
49
+ onBlur: (event) => {
50
+ field.onBlur();
51
+ onBlur == null ? void 0 : onBlur(event);
52
+ },
53
+ error: error ?? (fieldState.invalid ? ((_a = fieldState.error) == null ? void 0 : _a.message) || true : void 0)
54
+ }
55
+ );
56
+ };
57
+ exports.FormDateTimePicker = FormDateTimePicker;
package/dist/biz/Form/DateTimePicker.d.cts ADDED
@@ -0,0 +1,38 @@
1
+ import type { FactoryPayload } from '../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/lib'
2
+ import type { EmotionSx } from '@mantine/emotion'
3
+
4
+ import type { EmotionStyles } from '../emotion/index.cjs'
5
+ import type { ShadingColor } from '../theme/colors.cjs'
6
+ import type { Color } from '../theme/theme.cjs'
7
+
8
+ declare module '../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/lib' {
9
+ interface MantineThemeColorsOverride {
10
+ colors: Record<Color | (string & {}), ShadingColor>
11
+ }
12
+ interface StylesApiPropsOverride<Payload extends FactoryPayload> {
13
+ styles?: EmotionStyles<Payload>
14
+ }
15
+ interface BoxProps {
16
+ sx?: EmotionSx
17
+ }
18
+ }
19
+
20
+ declare module '@mantine/core' {
21
+ interface MantineThemeColorsOverride {
22
+ colors: Record<Color | (string & {}), ShadingColor>
23
+ }
24
+ interface StylesApiPropsOverride<Payload extends FactoryPayload> {
25
+ styles?: EmotionStyles<Payload>
26
+ }
27
+ interface BoxProps {
28
+ sx?: EmotionSx
29
+ }
30
+ }
31
+ import { RegisterOptions } from 'react-hook-form';
32
+ import { UseDateTimePickerProps } from '../DateTimePicker/helpers.cjs';
33
+ import { DateTimePickerProps } from '../DateTimePicker/index.cjs';
34
+ export interface FormDateTimePickerProps extends Omit<DateTimePickerProps, 'value' | 'defaultValue' | 'utcOffset'>, Pick<UseDateTimePickerProps, 'utcOffset'> {
35
+ name: string;
36
+ rules?: RegisterOptions;
37
+ }
38
+ export declare const FormDateTimePicker: ({ name, rules, utcOffset, startDate, endDate, today, highlightToday, format, formatter, onChange, onBlur, error, disabled, ...rest }: FormDateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
package/dist/biz/Form/DateTimePicker.d.mts ADDED
@@ -0,0 +1,38 @@
1
+ import type { FactoryPayload } from '../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/lib'
2
+ import type { EmotionSx } from '@mantine/emotion'
3
+
4
+ import type { EmotionStyles } from '../emotion/index.mjs'
5
+ import type { ShadingColor } from '../theme/colors.mjs'
6
+ import type { Color } from '../theme/theme.mjs'
7
+
8
+ declare module '../../node_modules/.pnpm/@mantine_core@7.17.8_patch_hash_3qirwkgu3wxhvd6hnr2gb24yzq_@mantine_hooks@7.17.8_react@18.3.1_e5yvlgwhmeykc75dkphi7jou6q/node_modules/@mantine/core/lib' {
9
+ interface MantineThemeColorsOverride {
10
+ colors: Record<Color | (string & {}), ShadingColor>
11
+ }
12
+ interface StylesApiPropsOverride<Payload extends FactoryPayload> {
13
+ styles?: EmotionStyles<Payload>
14
+ }
15
+ interface BoxProps {
16
+ sx?: EmotionSx
17
+ }
18
+ }
19
+
20
+ declare module '@mantine/core' {
21
+ interface MantineThemeColorsOverride {
22
+ colors: Record<Color | (string & {}), ShadingColor>
23
+ }
24
+ interface StylesApiPropsOverride<Payload extends FactoryPayload> {
25
+ styles?: EmotionStyles<Payload>
26
+ }
27
+ interface BoxProps {
28
+ sx?: EmotionSx
29
+ }
30
+ }
31
+ import { RegisterOptions } from 'react-hook-form';
32
+ import { UseDateTimePickerProps } from '../DateTimePicker/helpers.mjs';
33
+ import { DateTimePickerProps } from '../DateTimePicker/index.mjs';
34
+ export interface FormDateTimePickerProps extends Omit<DateTimePickerProps, 'value' | 'defaultValue' | 'utcOffset'>, Pick<UseDateTimePickerProps, 'utcOffset'> {
35
+ name: string;
36
+ rules?: RegisterOptions;
37
+ }
38
+ export declare const FormDateTimePicker: ({ name, rules, utcOffset, startDate, endDate, today, highlightToday, format, formatter, onChange, onBlur, error, disabled, ...rest }: FormDateTimePickerProps) => import("react/jsx-runtime.js").JSX.Element;
package/dist/biz/Form/DateTimePicker.mjs ADDED
@@ -0,0 +1,57 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { useFormContext, useController } from "react-hook-form";
3
+ import { DateTimePicker } from "../DateTimePicker/index.mjs";
4
+ import { DEFAULT_TIME_FORMAT } from "../TimeRangePicker/helpers.mjs";
5
+ import { useDateTimePicker } from "../DateTimePicker/helpers.mjs";
6
+ const FormDateTimePicker = ({
7
+ name,
8
+ rules,
9
+ utcOffset,
10
+ startDate,
11
+ endDate,
12
+ today,
13
+ highlightToday,
14
+ format = DEFAULT_TIME_FORMAT,
15
+ formatter,
16
+ onChange,
17
+ onBlur,
18
+ error,
19
+ disabled,
20
+ ...rest
21
+ }) => {
22
+ var _a;
23
+ const { control } = useFormContext();
24
+ const { field, fieldState } = useController({ name, rules, control });
25
+ const pickerProps = useDateTimePicker({
26
+ value: field.value ? new Date(field.value) : void 0,
27
+ utcOffset,
28
+ startDate,
29
+ endDate,
30
+ today,
31
+ highlightToday,
32
+ format,
33
+ formatter,
34
+ onChange: (value) => {
35
+ field.onChange(value.toISOString());
36
+ onChange == null ? void 0 : onChange(value);
37
+ }
38
+ });
39
+ return /* @__PURE__ */ jsx(
40
+ DateTimePicker,
41
+ {
42
+ ...rest,
43
+ ...pickerProps,
44
+ name: field.name,
45
+ ref: field.ref,
46
+ disabled: field.disabled || disabled,
47
+ onBlur: (event) => {
48
+ field.onBlur();
49
+ onBlur == null ? void 0 : onBlur(event);
50
+ },
51
+ error: error ?? (fieldState.invalid ? ((_a = fieldState.error) == null ? void 0 : _a.message) || true : void 0)
52
+ }
53
+ );
54
+ };
55
+ export {
56
+ FormDateTimePicker
57
+ };
package/dist/biz/Form/FormErrorMessage.cjs CHANGED
@@ -42,7 +42,20 @@ const FormErrorMessage = ({
42
42
  },
43
43
  ...rest,
44
44
  children: [
45
- /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(message) } }),
45
+ /* @__PURE__ */ jsxRuntime.jsx(
46
+ "div",
47
+ {
48
+ dangerouslySetInnerHTML: {
49
+ __html: DOMPurify.sanitize(message, {
50
+ ALLOWED_TAGS: ["a", "b", "br", "code", "em", "i", "li", "ol", "p", "span", "strong", "ul"],
51
+ ALLOWED_ATTR: ["href", "title"],
52
+ ALLOW_ARIA_ATTR: false,
53
+ ALLOW_DATA_ATTR: false,
54
+ ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
55
+ })
56
+ }
57
+ }
58
+ ),
46
59
  /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottomRef })
47
60
  ]
48
61
  }
package/dist/biz/Form/FormErrorMessage.mjs CHANGED
@@ -40,7 +40,20 @@ const FormErrorMessage = ({
40
40
  },
41
41
  ...rest,
42
42
  children: [
43
- /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(message) } }),
43
+ /* @__PURE__ */ jsx(
44
+ "div",
45
+ {
46
+ dangerouslySetInnerHTML: {
47
+ __html: DOMPurify.sanitize(message, {
48
+ ALLOWED_TAGS: ["a", "b", "br", "code", "em", "i", "li", "ol", "p", "span", "strong", "ul"],
49
+ ALLOWED_ATTR: ["href", "title"],
50
+ ALLOW_ARIA_ATTR: false,
51
+ ALLOW_DATA_ATTR: false,
52
+ ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
53
+ })
54
+ }
55
+ }
56
+ ),
44
57
  /* @__PURE__ */ jsx("div", { ref: bottomRef })
45
58
  ]
46
59
  }
package/dist/biz/Form/index.d.cts CHANGED
@@ -35,6 +35,7 @@ export * from './FormLayout.cjs';
35
35
  export * from './Select.cjs';
36
36
  export * from './MultiSelect.cjs';
37
37
  export * from './TextInput.cjs';
38
+ export * from './DateTimePicker.cjs';
38
39
  export * from './PhoneInput/index.cjs';
39
40
  export * from './Switch.cjs';
40
41
  export * from './NumberInput.cjs';
package/dist/biz/Form/index.d.mts CHANGED
@@ -35,6 +35,7 @@ export * from './FormLayout.mjs';
35
35
  export * from './Select.mjs';
36
36
  export * from './MultiSelect.mjs';
37
37
  export * from './TextInput.mjs';
38
+ export * from './DateTimePicker.mjs';
38
39
  export * from './PhoneInput/index.mjs';
39
40
  export * from './Switch.mjs';
40
41
  export * from './NumberInput.mjs';
package/dist/biz/index.cjs CHANGED
@@ -26,6 +26,7 @@ const FormLayout = require("./Form/FormLayout.cjs");
26
26
  const Select = require("./Form/Select.cjs");
27
27
  const MultiSelect = require("./Form/MultiSelect.cjs");
28
28
  const TextInput = require("./Form/TextInput.cjs");
29
+ const DateTimePicker = require("./Form/DateTimePicker.cjs");
29
30
  const index$6 = require("./Form/PhoneInput/index.cjs");
30
31
  const Switch = require("./Form/Switch.cjs");
31
32
  const NumberInput = require("./Form/NumberInput.cjs");
@@ -185,6 +186,7 @@ exports.FormLayout = FormLayout.FormLayout;
185
186
  exports.FormSelect = Select.FormSelect;
186
187
  exports.FormMultiSelect = MultiSelect.FormMultiSelect;
187
188
  exports.FormTextInput = TextInput.FormTextInput;
189
+ exports.FormDateTimePicker = DateTimePicker.FormDateTimePicker;
188
190
  exports.FormPhoneInput = index$6.FormPhoneInput;
189
191
  exports.FormPhoneInputV2 = index$6.FormPhoneInputV2;
190
192
  exports.FormSwitch = Switch.FormSwitch;
package/dist/biz/index.mjs CHANGED
@@ -24,6 +24,7 @@ import { FormLayout } from "./Form/FormLayout.mjs";
24
24
  import { FormSelect } from "./Form/Select.mjs";
25
25
  import { FormMultiSelect } from "./Form/MultiSelect.mjs";
26
26
  import { FormTextInput } from "./Form/TextInput.mjs";
27
+ import { FormDateTimePicker } from "./Form/DateTimePicker.mjs";
27
28
  import { FormPhoneInput, FormPhoneInputV2 } from "./Form/PhoneInput/index.mjs";
28
29
  import { FormSwitch } from "./Form/Switch.mjs";
29
30
  import { FormNumberInput } from "./Form/NumberInput.mjs";
@@ -72,6 +73,7 @@ export {
72
73
  FormCheckbox,
73
74
  FormCheckboxGroup,
74
75
  FormCopyText,
76
+ FormDateTimePicker,
75
77
  FormErrorMessage,
76
78
  FormLayout,
77
79
  FormMultiSelect,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.8.5",
3
+ "version": "2.9.0",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",
@@ -70,7 +70,7 @@
70
70
  "ahooks": "^3.7.8",
71
71
  "clsx": "^2.1.1",
72
72
  "dayjs": "^1.11.5",
73
- "dompurify": "^3.0.3",
73
+ "dompurify": "^3.4.17",
74
74
  "embla-carousel-react": "^7.0.5",
75
75
  "google-libphonenumber": "^3.2.30",
76
76
  "html-react-parser": "5.1.18",