@tidbcloud/uikit 2.4.3 → 2.4.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 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
+
+- fix(uikit): enhance Tabs component with variant themes support and update storybook controls ([#549](https://github.com/tidbcloud/tidbcloud-uikit/pull/549))
+
 ## 2.4.3
 
 ### 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

@@ -342,25 +342,40 @@ const theme = createTheme.createTheme({
     },
     Tabs: {
       styles(theme2, props) {
-        return {
-          list: {
-            gap: props.orientation === "vertical" ? 8 : 32,
-            border: 0
-          },
-          tab: {
-            color: themeColor(theme2, "carbon", 7),
-            fontWeight: 600,
-            paddingLeft: 0,
-            paddingRight: props.orientation === "vertical" ? 8 : 0,
-            "&[data-active]": {
-              color: themeColor(theme2, "carbon", 9)
+        const variant = props.variant || "default";
+        if (variant === "default") {
+          return {
+            list: {
+              "--tab-border-color": "transparent",
+              gap: props.orientation === "vertical" ? 8 : 32,
+              border: 0
             },
-            "&:hover": {
-              color: themeColor(theme2, "carbon", 9),
-              backgroundColor: "transparent"
+            tab: {
+              color: themeColor(theme2, "carbon", 7),
+              fontWeight: 600,
+              paddingLeft: 0,
+              paddingRight: props.orientation === "vertical" ? 8 : 0,
+              "&[data-active]": {
+                color: themeColor(theme2, "carbon", 9)
+              },
+              "&:hover": {
+                color: themeColor(theme2, "carbon", 9),
+                backgroundColor: "transparent"
+              }
             }
-          }
-        };
+          };
+        }
+        if (variant === "outline") {
+          return {
+            list: {
+              "--tab-border-color": themeColor(theme2, "carbon", 4)
+            }
+          };
+        }
+        if (variant === "pills") {
+          return {};
+        }
+        return {};
       }
     },
     Notification: {

package/dist/theme/theme.mjs

@@ -340,25 +340,40 @@ const theme = createTheme({
     },
     Tabs: {
       styles(theme2, props) {
-        return {
-          list: {
-            gap: props.orientation === "vertical" ? 8 : 32,
-            border: 0
-          },
-          tab: {
-            color: themeColor(theme2, "carbon", 7),
-            fontWeight: 600,
-            paddingLeft: 0,
-            paddingRight: props.orientation === "vertical" ? 8 : 0,
-            "&[data-active]": {
-              color: themeColor(theme2, "carbon", 9)
+        const variant = props.variant || "default";
+        if (variant === "default") {
+          return {
+            list: {
+              "--tab-border-color": "transparent",
+              gap: props.orientation === "vertical" ? 8 : 32,
+              border: 0
             },
-            "&:hover": {
-              color: themeColor(theme2, "carbon", 9),
-              backgroundColor: "transparent"
+            tab: {
+              color: themeColor(theme2, "carbon", 7),
+              fontWeight: 600,
+              paddingLeft: 0,
+              paddingRight: props.orientation === "vertical" ? 8 : 0,
+              "&[data-active]": {
+                color: themeColor(theme2, "carbon", 9)
+              },
+              "&:hover": {
+                color: themeColor(theme2, "carbon", 9),
+                backgroundColor: "transparent"
+              }
             }
-          }
-        };
+          };
+        }
+        if (variant === "outline") {
+          return {
+            list: {
+              "--tab-border-color": themeColor(theme2, "carbon", 4)
+            }
+          };
+        }
+        if (variant === "pills") {
+          return {};
+        }
+        return {};
       }
     },
     Notification: {

package/package.json

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