@tidbcloud/uikit 2.2.10 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @tidbcloud/uikit
 
+## 2.3.0
+
+### Minor Changes
+
+- feat(TimePicker): add TimePicker componnet ([#527](https://github.com/tidbcloud/tidbcloud-uikit/pull/527))
+- feat(theme): add default props for HoverCard/Popover ([#526](https://github.com/tidbcloud/tidbcloud-uikit/pull/526))
+- chore: update snapshot release workflow to push all tags ([#524](https://github.com/tidbcloud/tidbcloud-uikit/pull/524))
+- docs: enhance snapshot release section with GitHub Actions workflow details ([#523](https://github.com/tidbcloud/tidbcloud-uikit/pull/523))
+- chore: add npm setup step for publishing snapshots ([#522](https://github.com/tidbcloud/tidbcloud-uikit/pull/522))
+
+## 2.2.11
+
+### Patch Changes
+
+- fix(theme): update Card and Paper components' shadow and border styles ([#520](https://github.com/tidbcloud/tidbcloud-uikit/pull/520))
+
 ## 2.2.10
 
 ### Patch Changes

package/dist/biz/DateTimePicker/index.cjs

@@ -227,4 +227,138 @@ const DateTimePicker = ({
     }
   );
 };
+const TimePicker = ({
+  value,
+  onChange,
+  defaultValue,
+  disable = false,
+  sx,
+  size,
+  minTime,
+  maxTime,
+  withinPortal,
+  withArrow,
+  position,
+  shadow,
+  ...rest
+}) => {
+  const [currentValue, setCurrentValue] = useUncontrolled.useUncontrolled({
+    value: value ? dayjs.dayjs(value) : void 0,
+    defaultValue: defaultValue ? dayjs.dayjs(defaultValue) : dayjs.dayjs(),
+    onChange: (v) => {
+      onChange == null ? void 0 : onChange(v.toDate());
+    }
+  });
+  const [currentValueChangedBy, setCurrentValueChangedBy] = React.useState(null);
+  const startDate = React.useMemo(() => dayjs.dayjs(minTime, "HH:mm:ss"), [minTime]);
+  const endDate = React.useMemo(() => dayjs.dayjs(maxTime, "HH:mm:ss"), [maxTime]);
+  const updateCurrentValue = ahooks.useMemoizedFn((val, from) => {
+    let next = val;
+    if (!next.isValid()) {
+      return;
+    }
+    if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
+      return;
+    }
+    if (startDate && next.isBefore(startDate)) {
+      next = dayjs.dayjs(startDate);
+    } else if (endDate && next.isAfter(endDate)) {
+      next = dayjs.dayjs(endDate);
+    }
+    setCurrentValue(next);
+    setCurrentValueChangedBy(from);
+    setTimeout(() => {
+      setCurrentValueChangedBy(null);
+    }, 20);
+  });
+  const timeInputChange = ahooks.useMemoizedFn((e) => {
+    const originVal = e.currentTarget.value;
+    const v = dayjs.dayjs(originVal, "HH:mm:ss").toDate();
+    let next = currentValue;
+    next = next.hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    updateCurrentValue(next, "timeInput");
+  });
+  const timeScrollPickerChange = ahooks.useMemoizedFn((v) => {
+    const [h, m, s] = v;
+    let next = currentValue;
+    next = next.hour(h).minute(m).second(s);
+    updateCurrentValue(next, "timeScroller");
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { withinPortal, withArrow, position, shadow, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      TimeInput.TimeInput,
+      {
+        ...rest,
+        disabled: disable,
+        withSeconds: true,
+        value: currentValue.format("HH:mm:ss"),
+        onChange: timeInputChange,
+        size,
+        sx,
+        rightSection: /* @__PURE__ */ jsxRuntime.jsx(index.IconClock, { size: 16, c: "carbon.7" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Box.Box,
+      {
+        pos: "relative",
+        fz: 14,
+        fw: 400,
+        h: 224,
+        sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { mah: "100%", gap: 8, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Box.Box,
+              {
+                bg: "carbon.3",
+                pos: "absolute",
+                top: 0,
+                left: 0,
+                h: 32,
+                w: 32,
+                sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Box.Box,
+              {
+                bg: "carbon.3",
+                pos: "absolute",
+                top: 0,
+                left: 40,
+                h: 32,
+                w: 32,
+                sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Box.Box,
+              {
+                bg: "carbon.3",
+                pos: "absolute",
+                top: 0,
+                left: 80,
+                h: 32,
+                w: 32,
+                sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeScollerPicker.TimeScollerPicker,
+            {
+              currentValue,
+              currentValueChangedBy,
+              onChange: timeScrollPickerChange,
+              start: startDate.toDate(),
+              end: endDate.toDate()
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
 exports.DateTimePicker = DateTimePicker;
+exports.TimePicker = TimePicker;

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

@@ -1,4 +1,4 @@
-import { MantineSize, TextInputProps } from '../../primitive/index.cjs';
+import { MantineSize, TextInputProps, TimeInputProps, PopoverProps } from '../../primitive/index.cjs';
 export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
     placeholder?: string;
     format?: string;
@@ -14,3 +14,11 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
     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 interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
+    defaultValue?: Date;
+    value?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    size?: MantineSize;
+}
+export declare const TimePicker: ({ value, onChange, defaultValue, disable, sx, size, minTime, maxTime, withinPortal, withArrow, position, shadow, ...rest }: TimePickerProps) => import("react/jsx-runtime.js").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { MantineSize, TextInputProps } from '../../primitive/index.mjs';
+import { MantineSize, TextInputProps, TimeInputProps, PopoverProps } from '../../primitive/index.mjs';
 export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onChange' | 'defaultValue'> {
     placeholder?: string;
     format?: string;
@@ -14,3 +14,11 @@ export interface DateTimePickerProps extends Omit<TextInputProps, 'value' | 'onC
     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 interface TimePickerProps extends Omit<TimeInputProps, 'value' | 'onChange' | 'defaultValue'>, Pick<PopoverProps, 'withinPortal' | 'withArrow' | 'position' | 'shadow'> {
+    defaultValue?: Date;
+    value?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    size?: MantineSize;
+}
+export declare const TimePicker: ({ value, onChange, defaultValue, disable, sx, size, minTime, maxTime, withinPortal, withArrow, position, shadow, ...rest }: TimePickerProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/biz/DateTimePicker/index.mjs

@@ -225,6 +225,140 @@ const DateTimePicker = ({
     }
   );
 };
+const TimePicker = ({
+  value,
+  onChange,
+  defaultValue,
+  disable = false,
+  sx,
+  size,
+  minTime,
+  maxTime,
+  withinPortal,
+  withArrow,
+  position,
+  shadow,
+  ...rest
+}) => {
+  const [currentValue, setCurrentValue] = useUncontrolled({
+    value: value ? dayjs(value) : void 0,
+    defaultValue: defaultValue ? dayjs(defaultValue) : dayjs(),
+    onChange: (v) => {
+      onChange == null ? void 0 : onChange(v.toDate());
+    }
+  });
+  const [currentValueChangedBy, setCurrentValueChangedBy] = useState(null);
+  const startDate = useMemo(() => dayjs(minTime, "HH:mm:ss"), [minTime]);
+  const endDate = useMemo(() => dayjs(maxTime, "HH:mm:ss"), [maxTime]);
+  const updateCurrentValue = useMemoizedFn((val, from) => {
+    let next = val;
+    if (!next.isValid()) {
+      return;
+    }
+    if ((currentValue == null ? void 0 : currentValue.unix()) === next.unix()) {
+      return;
+    }
+    if (startDate && next.isBefore(startDate)) {
+      next = dayjs(startDate);
+    } else if (endDate && next.isAfter(endDate)) {
+      next = dayjs(endDate);
+    }
+    setCurrentValue(next);
+    setCurrentValueChangedBy(from);
+    setTimeout(() => {
+      setCurrentValueChangedBy(null);
+    }, 20);
+  });
+  const timeInputChange = useMemoizedFn((e) => {
+    const originVal = e.currentTarget.value;
+    const v = dayjs(originVal, "HH:mm:ss").toDate();
+    let next = currentValue;
+    next = next.hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    updateCurrentValue(next, "timeInput");
+  });
+  const timeScrollPickerChange = useMemoizedFn((v) => {
+    const [h, m, s] = v;
+    let next = currentValue;
+    next = next.hour(h).minute(m).second(s);
+    updateCurrentValue(next, "timeScroller");
+  });
+  return /* @__PURE__ */ jsxs(Popover, { withinPortal, withArrow, position, shadow, children: [
+    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
+      TimeInput,
+      {
+        ...rest,
+        disabled: disable,
+        withSeconds: true,
+        value: currentValue.format("HH:mm:ss"),
+        onChange: timeInputChange,
+        size,
+        sx,
+        rightSection: /* @__PURE__ */ jsx(IconClock, { size: 16, c: "carbon.7" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        pos: "relative",
+        fz: 14,
+        fw: 400,
+        h: 224,
+        sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { mah: "100%", gap: 8, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                bg: "carbon.3",
+                pos: "absolute",
+                top: 0,
+                left: 0,
+                h: 32,
+                w: 32,
+                sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                bg: "carbon.3",
+                pos: "absolute",
+                top: 0,
+                left: 40,
+                h: 32,
+                w: 32,
+                sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                bg: "carbon.3",
+                pos: "absolute",
+                top: 0,
+                left: 80,
+                h: 32,
+                w: 32,
+                sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            TimeScollerPicker,
+            {
+              currentValue,
+              currentValueChangedBy,
+              onChange: timeScrollPickerChange,
+              start: startDate.toDate(),
+              end: endDate.toDate()
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
 export {
-  DateTimePicker
+  DateTimePicker,
+  TimePicker
 };

package/dist/biz/index.cjs

@@ -52,6 +52,7 @@ exports.PropertyCard = index$9.PropertyCard;
 exports.PageShell = index$a.PageShell;
 exports.TimeRangePicker = index$b.TimeRangePicker;
 exports.DateTimePicker = index$c.DateTimePicker;
+exports.TimePicker = index$c.TimePicker;
 exports.ProMultiSelect = index$d.ProMultiSelect;
 exports.validPhoneNumber = helper.validPhoneNumber;
 exports.MRT_AggregationFns = index_esm.MRT_AggregationFns;

package/dist/biz/index.mjs

@@ -9,7 +9,7 @@ import { TransferTree } from "./TransferTree/index.mjs";
 import { PropertyCard } from "./PropertyCard/index.mjs";
 import { PageShell } from "./PageShell/index.mjs";
 import { TimeRangePicker } from "./TimeRangePicker/index.mjs";
-import { DateTimePicker } from "./DateTimePicker/index.mjs";
+import { DateTimePicker, TimePicker } from "./DateTimePicker/index.mjs";
 import { ProMultiSelect } from "./ProMultiSelect/index.mjs";
 import { validPhoneNumber } from "./PhoneInput/helper.mjs";
 import { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextInput, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextInput, MRT_GlobalFilterTextInput, MRT_GrabHandleButton, MRT_ProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MantineReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, dataVariable, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getPrimaryColor, getPrimaryShade, getTrailingDisplayColumnIds, localizedFilterOption, mrtFilterOptions, parseCSSVarId, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMantineReactTable } from "../node_modules/.pnpm/mantine-react-table@2.0.0-beta.7_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@_6pmziqsvipqgt5gv2plqw5hct4/node_modules/mantine-react-table/dist/index.esm.mjs";
@@ -139,6 +139,7 @@ export {
   ProTable,
   PropertyCard,
   SearchArea,
+  TimePicker,
   TimeRangePicker,
   TransferTree,
   Tree,

package/dist/theme/theme.cjs

@@ -741,23 +741,30 @@ const theme = createTheme.createTheme({
     },
     Card: {
       defaultProps: {
-        shadow: "xs",
+        shadow: "none",
         withBorder: true
       },
       styles: (theme2) => {
         return {
           root: {
-            backgroundColor: theme2.colors.carbon[0]
+            borderColor: theme2.colors.carbon[4]
+          },
+          section: {
+            borderColor: theme2.colors.carbon[4]
           }
         };
       }
     },
     Paper: {
+      defaultProps: {
+        shadow: "none",
+        withBorder: false
+      },
       styles: (theme2, props) => {
         return {
           root: {
             backgroundColor: themeColor(theme2, "carbon", 0),
-            borderColor: props.withBorder ? themeColor(theme2, "carbon", 3) : "transparent"
+            borderColor: props.withBorder ? themeColor(theme2, "carbon", 4) : "transparent"
           }
         };
       }
@@ -1171,6 +1178,18 @@ const theme = createTheme.createTheme({
           }
         };
       }
+    },
+    HoverCard: {
+      defaultProps: {
+        withArrow: true,
+        shadow: "md"
+      }
+    },
+    Popover: {
+      defaultProps: {
+        withArrow: true,
+        shadow: "md"
+      }
     }
   }
 });

package/dist/theme/theme.mjs

@@ -739,23 +739,30 @@ const theme = createTheme({
     },
     Card: {
       defaultProps: {
-        shadow: "xs",
+        shadow: "none",
         withBorder: true
       },
       styles: (theme2) => {
         return {
           root: {
-            backgroundColor: theme2.colors.carbon[0]
+            borderColor: theme2.colors.carbon[4]
+          },
+          section: {
+            borderColor: theme2.colors.carbon[4]
           }
         };
       }
     },
     Paper: {
+      defaultProps: {
+        shadow: "none",
+        withBorder: false
+      },
       styles: (theme2, props) => {
         return {
           root: {
             backgroundColor: themeColor(theme2, "carbon", 0),
-            borderColor: props.withBorder ? themeColor(theme2, "carbon", 3) : "transparent"
+            borderColor: props.withBorder ? themeColor(theme2, "carbon", 4) : "transparent"
           }
         };
       }
@@ -1169,6 +1176,18 @@ const theme = createTheme({
           }
         };
       }
+    },
+    HoverCard: {
+      defaultProps: {
+        withArrow: true,
+        shadow: "md"
+      }
+    },
+    Popover: {
+      defaultProps: {
+        withArrow: true,
+        shadow: "md"
+      }
     }
   }
 });

package/package.json

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