@tidbcloud/uikit 2.4.4 → 2.4.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.4.6
+
+### Patch Changes
+
+- fix(uikit): add custom styles for Code component in theme ([#553](https://github.com/tidbcloud/tidbcloud-uikit/pull/553))
+
+## 2.4.5
+
+### Patch Changes
+
+- fix(biz): enhance DateTimePicker with formatter prop and update storybook demo ([#551](https://github.com/tidbcloud/tidbcloud-uikit/pull/551))
+
 ## 2.4.4
 
 ### Patch Changes

package/dist/biz/DateTimePicker/index.cjs

@@ -28,6 +28,7 @@ const Flex = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
 const DateTimePicker = ({
   placeholder = "Select time",
   format = helpers.DEFAULT_TIME_FORMAT,
+  formatter,
   defaultValue,
   value,
   startDate = dayjs.dayjs().subtract(10, "year").toDate(),
@@ -68,7 +69,7 @@ const DateTimePicker = ({
       setCurrentValueChangedBy(null);
     }, 20);
   });
-  const inputStr = currentValue.format(format);
+  const inputStr = formatter ? formatter(currentValue.utcOffset(utcOffset).toDate()) : currentValue.utcOffset(utcOffset).format(format);
   const utcStr = React.useMemo(() => {
     const h = Math.floor(utcOffset / 60);
     const m = utcOffset % 60;

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

@@ -1,7 +1,24 @@
-import { MantineSize, TextInputProps, TimeInputProps, PopoverProps } from '../../primitive/index.cjs';
+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;
+    /**
+     * The UTC offset in minutes.
+     * See https://day.js.org/docs/en/manipulate/utc-offset
+     */
     utcOffset?: number;
     defaultValue?: Date;
     value?: Date;
@@ -13,7 +30,7 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
     loading?: boolean;
     size?: MantineSize;
 }
-export declare const DateTimePicker: ({ placeholder, format, 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, utcOffset, 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

@@ -1,7 +1,24 @@
-import { MantineSize, TextInputProps, TimeInputProps, PopoverProps } from '../../primitive/index.mjs';
+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;
+    /**
+     * The UTC offset in minutes.
+     * See https://day.js.org/docs/en/manipulate/utc-offset
+     */
     utcOffset?: number;
     defaultValue?: Date;
     value?: Date;
@@ -13,7 +30,7 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
     loading?: boolean;
     size?: MantineSize;
 }
-export declare const DateTimePicker: ({ placeholder, format, 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, utcOffset, 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

@@ -26,6 +26,7 @@ import { Flex } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
 const DateTimePicker = ({
   placeholder = "Select time",
   format = DEFAULT_TIME_FORMAT,
+  formatter,
   defaultValue,
   value,
   startDate = dayjs().subtract(10, "year").toDate(),
@@ -66,7 +67,7 @@ const DateTimePicker = ({
       setCurrentValueChangedBy(null);
     }, 20);
   });
-  const inputStr = currentValue.format(format);
+  const inputStr = formatter ? formatter(currentValue.utcOffset(utcOffset).toDate()) : currentValue.utcOffset(utcOffset).format(format);
   const utcStr = useMemo(() => {
     const h = Math.floor(utcOffset / 60);
     const m = utcOffset % 60;

package/dist/theme/theme.cjs

@@ -1245,6 +1245,16 @@ const theme = createTheme.createTheme({
         }
         return {};
       }
+    },
+    Code: {
+      styles: (theme2) => {
+        return {
+          root: {
+            backgroundColor: themeColor(theme2, "carbon", 3),
+            color: themeColor(theme2, "carbon", 8)
+          }
+        };
+      }
     }
   }
 });

package/dist/theme/theme.mjs

@@ -1243,6 +1243,16 @@ const theme = createTheme({
         }
         return {};
       }
+    },
+    Code: {
+      styles: (theme2) => {
+        return {
+          root: {
+            backgroundColor: themeColor(theme2, "carbon", 3),
+            color: themeColor(theme2, "carbon", 8)
+          }
+        };
+      }
     }
   }
 });

package/package.json

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