@tidbcloud/uikit 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @tidbcloud/uikit
 
+## 2.0.2
+
+### Patch Changes
+
+- tweak(TimeRangePicker): support empty value & clearable ([#442](https://github.com/tidbcloud/tidbcloud-uikit/pull/442))
+
+## 2.0.1
+
+### Patch Changes
+
+- feat(uikit): bug fix of SearchArea component
+- feat: fix input reset bug ([#440](https://github.com/tidbcloud/tidbcloud-uikit/pull/440))
+
 ## 2.0.0
 
 ### Major Changes

package/dist/biz/SearchArea/index.cjs

@@ -49,7 +49,9 @@ function FormItemRender(props) {
         {
           name,
           value: keyword,
-          onChange: (e) => setKeyword(e.target.value),
+          onChange: (e) => {
+            setKeyword(e.target.value);
+          },
           placeholder: placeholder ?? "",
           onKeyDown: onKeyDownHandler,
           rightSection: !!keyword && /* @__PURE__ */ jsxRuntime.jsx(
@@ -59,6 +61,8 @@ function FormItemRender(props) {
               size: 14,
               onClick: () => {
                 setKeyword("");
+                props.form.setValue(name, "");
+                triggerSubmit();
               }
             }
           ),
@@ -131,7 +135,7 @@ function FormItemRender(props) {
       return null;
   }
 }
-const DEFAULT_FORM_STATE_KEY = "__fs__";
+const DEFAULT_FORM_STATE_KEY = "__fs";
 function SearchArea(props) {
   const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
   const [resetSeed, setResetSeed] = React.useState(0);
@@ -158,6 +162,7 @@ function SearchArea(props) {
       data.map((x) => /* @__PURE__ */ jsxRuntime.jsx(
         FormItemRender,
         {
+          form,
           data: x,
           onSubmit: handleSubmit,
           defaultValue: state[x.name],

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

@@ -46,6 +46,6 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
 /**
  * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
  */
-export declare const DEFAULT_FORM_STATE_KEY = "__fs__";
+export declare const DEFAULT_FORM_STATE_KEY = "__fs";
 export declare function SearchArea<T extends object>(props: SearchAreaProps<T>): import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/biz/SearchArea/index.d.mts

@@ -46,6 +46,6 @@ export interface SearchAreaProps<T extends FieldValues> extends FormProps<T> {
 /**
  * Please use `formStateQueryKey` instead if you have multiple <SearchArea /> components in the same page
  */
-export declare const DEFAULT_FORM_STATE_KEY = "__fs__";
+export declare const DEFAULT_FORM_STATE_KEY = "__fs";
 export declare function SearchArea<T extends object>(props: SearchAreaProps<T>): import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/biz/SearchArea/index.mjs

@@ -47,7 +47,9 @@ function FormItemRender(props) {
         {
           name,
           value: keyword,
-          onChange: (e) => setKeyword(e.target.value),
+          onChange: (e) => {
+            setKeyword(e.target.value);
+          },
           placeholder: placeholder ?? "",
           onKeyDown: onKeyDownHandler,
           rightSection: !!keyword && /* @__PURE__ */ jsx(
@@ -57,6 +59,8 @@ function FormItemRender(props) {
               size: 14,
               onClick: () => {
                 setKeyword("");
+                props.form.setValue(name, "");
+                triggerSubmit();
               }
             }
           ),
@@ -129,7 +133,7 @@ function FormItemRender(props) {
       return null;
   }
 }
-const DEFAULT_FORM_STATE_KEY = "__fs__";
+const DEFAULT_FORM_STATE_KEY = "__fs";
 function SearchArea(props) {
   const { data, onSubmit, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
   const [resetSeed, setResetSeed] = useState(0);
@@ -156,6 +160,7 @@ function SearchArea(props) {
       data.map((x) => /* @__PURE__ */ jsx(
         FormItemRender,
         {
+          form,
           data: x,
           onSubmit: handleSubmit,
           defaultValue: state[x.name],

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.cjs

@@ -31,40 +31,36 @@ const AbsoluteTimeRangePicker = ({
   onCancel,
   onReturnClick
 }) => {
-  const [start, setStart] = React.useState(() => new Date(value[0] * 1e3));
-  const [end, setEnd] = React.useState(() => new Date(value[1] * 1e3));
-  const startTime = dayjs(start).format("HH:mm:ss");
-  const endTime = dayjs(end).format("HH:mm:ss");
-  const startAfterEnd = React.useMemo(() => {
-    return start.valueOf() > end.valueOf();
-  }, [start, end]);
-  const beyondMin = React.useMemo(() => {
-    return minDateTime && start.valueOf() < minDateTime.valueOf();
-  }, [minDateTime, start]);
-  const beyondMax = React.useMemo(() => {
-    return maxDateTime && end.valueOf() > maxDateTime.valueOf();
-  }, [maxDateTime, end]);
-  const beyondDuration = React.useMemo(() => {
-    if (maxDuration !== void 0) {
-      return end.valueOf() - start.valueOf() > maxDuration * 1e3;
-    }
-    return false;
-  }, [maxDuration, start, end]);
+  const [start, setStart] = React.useState(() => value ? new Date(value[0] * 1e3) : null);
+  const [end, setEnd] = React.useState(() => value ? new Date(value[1] * 1e3) : null);
+  const startDate = start ? dayjs(start).format("MMM D, YYYY") : "-";
+  const endDate = end ? dayjs(end).format("MMM D, YYYY") : "-";
+  const startTime = start ? dayjs(start).format("HH:mm:ss") : "-";
+  const endTime = end ? dayjs(end).format("HH:mm:ss") : "-";
+  const isRangeComplete = !!start && !!end;
+  const startAfterEnd = isRangeComplete && start.valueOf() > end.valueOf();
+  const beyondMin = isRangeComplete && minDateTime && start.valueOf() < minDateTime.valueOf();
+  const beyondMax = isRangeComplete && maxDateTime && end.valueOf() > maxDateTime.valueOf();
+  const beyondDuration = isRangeComplete && !!maxDuration && end.valueOf() - start.valueOf() > maxDuration * 1e3;
   const [displayRangeDate, setDisplayRangeDate] = React.useState([start, end]);
   const updateRangeDate = (dates) => {
     setDisplayRangeDate(dates);
     const newStart = new Date(dates[0]);
-    newStart.setHours(start.getHours());
-    newStart.setMinutes(start.getMinutes());
-    newStart.setSeconds(start.getSeconds());
+    if (start) {
+      newStart.setHours(start.getHours());
+      newStart.setMinutes(start.getMinutes());
+      newStart.setSeconds(start.getSeconds());
+    }
     setStart(newStart);
     let newEnd = new Date(dates[0]);
     if (dates[1]) {
       newEnd = new Date(dates[1]);
     }
-    newEnd.setHours(end.getHours());
-    newEnd.setMinutes(end.getMinutes());
-    newEnd.setSeconds(end.getSeconds());
+    if (end) {
+      newEnd.setHours(end.getHours());
+      newEnd.setMinutes(end.getMinutes());
+      newEnd.setSeconds(end.getSeconds());
+    }
     setEnd(newEnd);
   };
   const updateTime = (v, setter) => {
@@ -78,22 +74,15 @@ const AbsoluteTimeRangePicker = ({
     });
   };
   const apply = () => onChange == null ? void 0 : onChange({ type: "absolute", value: [dayjs(start).unix(), dayjs(end).unix()] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { p: 16, w: 280, m: -4, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { p: "md", w: 280, m: -4, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { pb: "xs", mt: -4, onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(index.IconChevronLeft, { size: 16 }),
       /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "body-lg", children: "Back" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 0, pt: 8, justify: "space-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "label-sm", children: "Start" }),
       /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 8, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input.Input,
-          {
-            w: 116,
-            value: dayjs(start).format("MMM D, YYYY"),
-            error: beyondMin || startAfterEnd || beyondDuration
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Input.Input, { w: 116, value: startDate, error: beyondMin || startAfterEnd || beyondDuration }),
         /* @__PURE__ */ jsxRuntime.jsx(
           TimeInput.TimeInput,
           {
@@ -109,14 +98,7 @@ const AbsoluteTimeRangePicker = ({
     /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 0, pt: 8, justify: "space-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx(index$1.Typography, { variant: "label-sm", children: "End" }),
       /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 8, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input.Input,
-          {
-            w: 116,
-            value: dayjs(end).format("MMM D, YYYY"),
-            error: beyondMax || startAfterEnd || beyondDuration
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Input.Input, { w: 116, value: endDate, error: beyondMax || startAfterEnd || beyondDuration }),
         /* @__PURE__ */ jsxRuntime.jsx(
           TimeInput.TimeInput,
           {
@@ -157,7 +139,15 @@ const AbsoluteTimeRangePicker = ({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { pt: 8, gap: "xs", justify: "flex-end", align: "flex-start", direction: "row", wrap: "wrap", children: [
       /* @__PURE__ */ jsxRuntime.jsx(index$2.Button, { size: "xs", variant: "default", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntime.jsx(index$2.Button, { size: "xs", onClick: apply, disabled: startAfterEnd || beyondMin || beyondMax || beyondDuration, children: "Apply" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index$2.Button,
+        {
+          size: "xs",
+          onClick: apply,
+          disabled: !start || !end || startAfterEnd || beyondMin || beyondMax || beyondDuration,
+          children: "Apply"
+        }
+      )
     ] })
   ] });
 };

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.cts

@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
 import { AbsoluteTimeRange, TimeRangeValue } from './helpers.cjs';
 interface AbsoluteTimeRangePickerProps {
-    value: TimeRangeValue;
+    value?: TimeRangeValue;
     minDateTime?: Date;
     maxDateTime?: Date;
     maxDuration?: number;

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.d.mts

@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
 import { AbsoluteTimeRange, TimeRangeValue } from './helpers.mjs';
 interface AbsoluteTimeRangePickerProps {
-    value: TimeRangeValue;
+    value?: TimeRangeValue;
     minDateTime?: Date;
     maxDateTime?: Date;
     maxDuration?: number;

package/dist/biz/TimeRangePicker/AbsoluteTimeRangePicker.mjs

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { IconChevronLeft, IconAlertCircle } from "../../icons/index.mjs";
 /* empty css                                                                                                                                                                                       */
 /* empty css                                                                                                                                                                                        */
@@ -29,40 +29,36 @@ const AbsoluteTimeRangePicker = ({
   onCancel,
   onReturnClick
 }) => {
-  const [start, setStart] = useState(() => new Date(value[0] * 1e3));
-  const [end, setEnd] = useState(() => new Date(value[1] * 1e3));
-  const startTime = dayjs(start).format("HH:mm:ss");
-  const endTime = dayjs(end).format("HH:mm:ss");
-  const startAfterEnd = useMemo(() => {
-    return start.valueOf() > end.valueOf();
-  }, [start, end]);
-  const beyondMin = useMemo(() => {
-    return minDateTime && start.valueOf() < minDateTime.valueOf();
-  }, [minDateTime, start]);
-  const beyondMax = useMemo(() => {
-    return maxDateTime && end.valueOf() > maxDateTime.valueOf();
-  }, [maxDateTime, end]);
-  const beyondDuration = useMemo(() => {
-    if (maxDuration !== void 0) {
-      return end.valueOf() - start.valueOf() > maxDuration * 1e3;
-    }
-    return false;
-  }, [maxDuration, start, end]);
+  const [start, setStart] = useState(() => value ? new Date(value[0] * 1e3) : null);
+  const [end, setEnd] = useState(() => value ? new Date(value[1] * 1e3) : null);
+  const startDate = start ? dayjs(start).format("MMM D, YYYY") : "-";
+  const endDate = end ? dayjs(end).format("MMM D, YYYY") : "-";
+  const startTime = start ? dayjs(start).format("HH:mm:ss") : "-";
+  const endTime = end ? dayjs(end).format("HH:mm:ss") : "-";
+  const isRangeComplete = !!start && !!end;
+  const startAfterEnd = isRangeComplete && start.valueOf() > end.valueOf();
+  const beyondMin = isRangeComplete && minDateTime && start.valueOf() < minDateTime.valueOf();
+  const beyondMax = isRangeComplete && maxDateTime && end.valueOf() > maxDateTime.valueOf();
+  const beyondDuration = isRangeComplete && !!maxDuration && end.valueOf() - start.valueOf() > maxDuration * 1e3;
   const [displayRangeDate, setDisplayRangeDate] = useState([start, end]);
   const updateRangeDate = (dates) => {
     setDisplayRangeDate(dates);
     const newStart = new Date(dates[0]);
-    newStart.setHours(start.getHours());
-    newStart.setMinutes(start.getMinutes());
-    newStart.setSeconds(start.getSeconds());
+    if (start) {
+      newStart.setHours(start.getHours());
+      newStart.setMinutes(start.getMinutes());
+      newStart.setSeconds(start.getSeconds());
+    }
     setStart(newStart);
     let newEnd = new Date(dates[0]);
     if (dates[1]) {
       newEnd = new Date(dates[1]);
     }
-    newEnd.setHours(end.getHours());
-    newEnd.setMinutes(end.getMinutes());
-    newEnd.setSeconds(end.getSeconds());
+    if (end) {
+      newEnd.setHours(end.getHours());
+      newEnd.setMinutes(end.getMinutes());
+      newEnd.setSeconds(end.getSeconds());
+    }
     setEnd(newEnd);
   };
   const updateTime = (v, setter) => {
@@ -76,22 +72,15 @@ const AbsoluteTimeRangePicker = ({
     });
   };
   const apply = () => onChange == null ? void 0 : onChange({ type: "absolute", value: [dayjs(start).unix(), dayjs(end).unix()] });
-  return /* @__PURE__ */ jsxs(Box, { p: 16, w: 280, m: -4, children: [
-    /* @__PURE__ */ jsxs(Group, { onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
+  return /* @__PURE__ */ jsxs(Box, { p: "md", w: 280, m: -4, children: [
+    /* @__PURE__ */ jsxs(Group, { pb: "xs", mt: -4, onClick: onReturnClick, sx: { cursor: "pointer" }, children: [
       /* @__PURE__ */ jsx(IconChevronLeft, { size: 16 }),
       /* @__PURE__ */ jsx(Typography, { variant: "body-lg", children: "Back" })
     ] }),
     /* @__PURE__ */ jsxs(Group, { gap: 0, pt: 8, justify: "space-between", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: "Start" }),
       /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            w: 116,
-            value: dayjs(start).format("MMM D, YYYY"),
-            error: beyondMin || startAfterEnd || beyondDuration
-          }
-        ),
+        /* @__PURE__ */ jsx(Input, { w: 116, value: startDate, error: beyondMin || startAfterEnd || beyondDuration }),
         /* @__PURE__ */ jsx(
           TimeInput,
           {
@@ -107,14 +96,7 @@ const AbsoluteTimeRangePicker = ({
     /* @__PURE__ */ jsxs(Group, { gap: 0, pt: 8, justify: "space-between", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "label-sm", children: "End" }),
       /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            w: 116,
-            value: dayjs(end).format("MMM D, YYYY"),
-            error: beyondMax || startAfterEnd || beyondDuration
-          }
-        ),
+        /* @__PURE__ */ jsx(Input, { w: 116, value: endDate, error: beyondMax || startAfterEnd || beyondDuration }),
         /* @__PURE__ */ jsx(
           TimeInput,
           {
@@ -155,7 +137,15 @@ const AbsoluteTimeRangePicker = ({
     ] }),
     /* @__PURE__ */ jsxs(Flex, { pt: 8, gap: "xs", justify: "flex-end", align: "flex-start", direction: "row", wrap: "wrap", children: [
       /* @__PURE__ */ jsx(Button, { size: "xs", variant: "default", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx(Button, { size: "xs", onClick: apply, disabled: startAfterEnd || beyondMin || beyondMax || beyondDuration, children: "Apply" })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "xs",
+          onClick: apply,
+          disabled: !start || !end || startAfterEnd || beyondMin || beyondMax || beyondDuration,
+          children: "Apply"
+        }
+      )
     ] })
   ] });
 };

package/dist/biz/TimeRangePicker/index.cjs

@@ -12,8 +12,10 @@ const index$2 = require("../../primitive/Typography/index.cjs");
 const index = require("../../primitive/Button/index.cjs");
 const AbsoluteTimeRangePicker = require("./AbsoluteTimeRangePicker.cjs");
 const helpers = require("./helpers.cjs");
+const useHover = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-hover/use-hover.cjs");
 const Menu = 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/Menu/Menu.cjs");
 const Tooltip = 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/Tooltip/Tooltip.cjs");
+const ActionIcon = 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/ActionIcon/ActionIcon.cjs");
 const Group = 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/Group/Group.cjs");
 const Box = 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/core/Box/Box.cjs");
 const Text = 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/Text/Text.cjs");
@@ -26,14 +28,18 @@ const TimeRangePicker = ({
   onChange,
   quickRanges = helpers.DEFAULT_QUICK_RANGES,
   loading,
+  placeholder,
+  clearable,
   timezone,
   sx
 }) => {
   const [opened, setOpened] = React.useState(false);
   const [customMode, setCustomMode] = React.useState(false);
-  const isRelativeRange = (value == null ? void 0 : value.type) === "relative" || !value;
-  const timeRangeValue = helpers.toTimeRangeValue(value ?? { type: "relative", value: 86400 });
-  const duration = timeRangeValue[1] - timeRangeValue[0];
+  const isEmptyValue = !value;
+  const isRelativeRange = (value == null ? void 0 : value.type) === "relative";
+  const { hovered, ref: targetRef } = useHover.useHover();
+  const timeRangeValue = isEmptyValue ? void 0 : helpers.toTimeRangeValue(value);
+  const duration = isEmptyValue ? void 0 : timeRangeValue[1] - timeRangeValue[0];
   const selectedRelativeItem = React.useMemo(() => {
     if (!value || value.type === "absolute") {
       return;
@@ -41,6 +47,9 @@ const TimeRangePicker = ({
     return quickRanges.find((it) => it === value.value);
   }, [quickRanges, value]);
   const formattedAbsDateTime = React.useMemo(() => {
+    if (!timeRangeValue) {
+      return "";
+    }
     return `${helpers.timeFormatter(timeRangeValue[0], timezone ?? null, "MMM D, YYYY HH:mm")} - ${helpers.timeFormatter(
       timeRangeValue[1],
       timezone ?? null,
@@ -60,9 +69,10 @@ const TimeRangePicker = ({
       },
       onClose: () => setOpened(false),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: formattedAbsDateTime, disabled: isRelativeRange, withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: formattedAbsDateTime, disabled: isRelativeRange || isEmptyValue, withArrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           index.Button,
           {
+            ref: targetRef,
             variant: "default",
             bg: "carbon.0",
             styles: (theme) => ({
@@ -89,8 +99,19 @@ const TimeRangePicker = ({
             w: disableAbsoluteRanges ? 200 : 280,
             sx,
             loading,
+            rightSection: clearable && !!value && hovered ? /* @__PURE__ */ jsxRuntime.jsx(
+              ActionIcon.ActionIcon,
+              {
+                size: "xs",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onChange == null ? void 0 : onChange();
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconX, { size: 16, color: "var(--mantine-color-carbon-7)!important" })
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(index$1.IconChevronSelectorVertical, { size: 16, color: "var(--mantine-color-carbon-7)!important" }),
             children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { w: "100%", gap: 0, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(DurationBadge, { children: helpers.formatDuration(duration, true) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(DurationBadge, { children: isEmptyValue ? "All" : helpers.formatDuration(duration, true) }) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 Text.Text,
                 {
@@ -102,7 +123,8 @@ const TimeRangePicker = ({
                     textOverflow: "ellipsis",
                     textAlign: "left"
                   },
-                  children: isRelativeRange ? `Past ${helpers.formatDuration(duration)}` : formattedAbsDateTime
+                  c: isEmptyValue ? "dimmed" : "carbon.8",
+                  children: isEmptyValue ? placeholder || "Time Range" : isRelativeRange ? `Past ${helpers.formatDuration(duration)}` : formattedAbsDateTime
                 }
               )
             ] })

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

@@ -1,9 +1,11 @@
 import { ButtonProps } from '../../primitive/index.cjs';
 import { TimeRange } from './helpers.cjs';
 export interface TimeRangePickerProps extends ButtonProps {
-    value: TimeRange;
-    onChange?: (value: TimeRange) => void;
+    value?: TimeRange;
+    onChange?: (value?: TimeRange) => void;
     loading?: boolean;
+    placeholder?: string;
+    clearable?: boolean;
     minDateTime?: () => Date;
     maxDateTime?: () => Date;
     maxDuration?: number;
@@ -11,5 +13,5 @@ export interface TimeRangePickerProps extends ButtonProps {
     disableAbsoluteRanges?: boolean;
     timezone?: number;
 }
-export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, timezone, sx }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
+export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, placeholder, clearable, timezone, sx }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
 export * from './helpers.cjs';

package/dist/biz/TimeRangePicker/index.d.mts

@@ -1,9 +1,11 @@
 import { ButtonProps } from '../../primitive/index.mjs';
 import { TimeRange } from './helpers.mjs';
 export interface TimeRangePickerProps extends ButtonProps {
-    value: TimeRange;
-    onChange?: (value: TimeRange) => void;
+    value?: TimeRange;
+    onChange?: (value?: TimeRange) => void;
     loading?: boolean;
+    placeholder?: string;
+    clearable?: boolean;
     minDateTime?: () => Date;
     maxDateTime?: () => Date;
     maxDuration?: number;
@@ -11,5 +13,5 @@ export interface TimeRangePickerProps extends ButtonProps {
     disableAbsoluteRanges?: boolean;
     timezone?: number;
 }
-export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, timezone, sx }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
+export declare const TimeRangePicker: ({ value, minDateTime, maxDateTime, maxDuration, disableAbsoluteRanges, onChange, quickRanges, loading, placeholder, clearable, timezone, sx }: React.PropsWithChildren<TimeRangePickerProps>) => import("react/jsx-runtime.js").JSX.Element;
 export * from './helpers.mjs';

package/dist/biz/TimeRangePicker/index.mjs

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
-import { IconChevronRight } from "../../icons/index.mjs";
+import { IconX, IconChevronSelectorVertical, IconChevronRight } from "../../icons/index.mjs";
 /* empty css                                                                                                                                                                                       */
 /* empty css                                                                                                                                                                                        */
 /* empty css                                                                                                                                                                                                */
@@ -11,8 +11,10 @@ import { Button } from "../../primitive/Button/index.mjs";
 import AbsoluteTimeRangePicker from "./AbsoluteTimeRangePicker.mjs";
 import { toTimeRangeValue, timeFormatter, formatDuration, DEFAULT_QUICK_RANGES } from "./helpers.mjs";
 import { DEFAULT_TIME_FORMAT, DEFAULT_TIME_FORMAT_WITH_TIMEZONE, DEFAULT_TIME_RANGE, addOffsetUTC, fromTimeRangeValue, getUTCString, toURLTimeRange, urlToTimeRange, urlToTimeRangeValue } from "./helpers.mjs";
+import { useHover } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-hover/use-hover.mjs";
 import { Menu } from "../../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/Menu/Menu.mjs";
 import { Tooltip } from "../../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/Tooltip/Tooltip.mjs";
+import { ActionIcon } from "../../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/ActionIcon/ActionIcon.mjs";
 import { Group } from "../../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/Group/Group.mjs";
 import { Box } from "../../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/core/Box/Box.mjs";
 import { Text } from "../../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/Text/Text.mjs";
@@ -25,14 +27,18 @@ const TimeRangePicker = ({
   onChange,
   quickRanges = DEFAULT_QUICK_RANGES,
   loading,
+  placeholder,
+  clearable,
   timezone,
   sx
 }) => {
   const [opened, setOpened] = useState(false);
   const [customMode, setCustomMode] = useState(false);
-  const isRelativeRange = (value == null ? void 0 : value.type) === "relative" || !value;
-  const timeRangeValue = toTimeRangeValue(value ?? { type: "relative", value: 86400 });
-  const duration = timeRangeValue[1] - timeRangeValue[0];
+  const isEmptyValue = !value;
+  const isRelativeRange = (value == null ? void 0 : value.type) === "relative";
+  const { hovered, ref: targetRef } = useHover();
+  const timeRangeValue = isEmptyValue ? void 0 : toTimeRangeValue(value);
+  const duration = isEmptyValue ? void 0 : timeRangeValue[1] - timeRangeValue[0];
   const selectedRelativeItem = useMemo(() => {
     if (!value || value.type === "absolute") {
       return;
@@ -40,6 +46,9 @@ const TimeRangePicker = ({
     return quickRanges.find((it) => it === value.value);
   }, [quickRanges, value]);
   const formattedAbsDateTime = useMemo(() => {
+    if (!timeRangeValue) {
+      return "";
+    }
     return `${timeFormatter(timeRangeValue[0], timezone ?? null, "MMM D, YYYY HH:mm")} - ${timeFormatter(
       timeRangeValue[1],
       timezone ?? null,
@@ -59,9 +68,10 @@ const TimeRangePicker = ({
       },
       onClose: () => setOpened(false),
       children: [
-        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Tooltip, { label: formattedAbsDateTime, disabled: isRelativeRange, withArrow: true, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Tooltip, { label: formattedAbsDateTime, disabled: isRelativeRange || isEmptyValue, withArrow: true, children: /* @__PURE__ */ jsx(
           Button,
           {
+            ref: targetRef,
             variant: "default",
             bg: "carbon.0",
             styles: (theme) => ({
@@ -88,8 +98,19 @@ const TimeRangePicker = ({
             w: disableAbsoluteRanges ? 200 : 280,
             sx,
             loading,
+            rightSection: clearable && !!value && hovered ? /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                size: "xs",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onChange == null ? void 0 : onChange();
+                },
+                children: /* @__PURE__ */ jsx(IconX, { size: 16, color: "var(--mantine-color-carbon-7)!important" })
+              }
+            ) : /* @__PURE__ */ jsx(IconChevronSelectorVertical, { size: 16, color: "var(--mantine-color-carbon-7)!important" }),
             children: /* @__PURE__ */ jsxs(Group, { w: "100%", gap: 0, children: [
-              /* @__PURE__ */ jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsx(DurationBadge, { children: formatDuration(duration, true) }) }),
+              /* @__PURE__ */ jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsx(DurationBadge, { children: isEmptyValue ? "All" : formatDuration(duration, true) }) }),
               /* @__PURE__ */ jsx(
                 Text,
                 {
@@ -101,7 +122,8 @@ const TimeRangePicker = ({
                     textOverflow: "ellipsis",
                     textAlign: "left"
                   },
-                  children: isRelativeRange ? `Past ${formatDuration(duration)}` : formattedAbsDateTime
+                  c: isEmptyValue ? "dimmed" : "carbon.8",
+                  children: isEmptyValue ? placeholder || "Time Range" : isRelativeRange ? `Past ${formatDuration(duration)}` : formattedAbsDateTime
                 }
               )
             ] })

package/package.json

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