@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/lib/Password/Content.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/Password/Content.tsx
@@ -34,14 +24,14 @@ __export(Content_exports, {
 module.exports = __toCommonJS(Content_exports);
 var import_icons = require("@oceanbase/icons");
 var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
 var import_design2 = require("@oceanbase/design");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
   const { token } = import_design2.theme.useToken();
   const statusIconMap = {
-    error: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseCircleFilled, { style: { color: token.colorError } }),
-    success: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckCircleFilled, { style: { color: token.colorSuccess } }),
-    wait: /* @__PURE__ */ import_react.default.createElement(
+    error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleFilled, { style: { color: token.colorError } }),
+    success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleFilled, { style: { color: token.colorSuccess } }),
+    wait: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         style: {
@@ -49,19 +39,19 @@ var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
           alignItems: "center",
           justifyContent: "center",
           height: token.fontSize * token.lineHeight
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            width: 8,
-            height: 8,
-            backgroundColor: token.colorFillSecondary,
-            borderRadius: "50%"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              backgroundColor: token.colorFillSecondary,
+              borderRadius: "50%"
+            }
           }
-        }
-      )
+        )
+      }
     )
   };
   const isRequireFail = rules.filter((rule) => !rule.optional).filter((rule) => fieldError.includes(rule.message)).length > 0;
@@ -78,21 +68,27 @@ var Content = ({ rules, fieldError, isValidating, value, isTouched }) => {
   } else {
     strokeColor = token.colorSuccess;
   }
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_design.Progress, { percent: value ? percent : 0, strokeColor, showInfo: false }), /* @__PURE__ */ import_react.default.createElement("ul", { style: { margin: 0, marginTop: "10px", listStyle: "none", padding: "0" } }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 4, direction: "vertical" }, rules == null ? void 0 : rules.map((rule) => {
-    const isError = fieldError.includes(rule.message);
-    let status = "wait";
-    if (isError) {
-      status = rule.optional ? "wait" : "error";
-    } else {
-      status = "success";
-    }
-    if (!value) {
-      status = "error";
-    }
-    if (!isTouched) {
-      status = "wait";
-    }
-    return /* @__PURE__ */ import_react.default.createElement("li", { key: `${rule.message}` }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: status === "wait" ? 14 : 8, align: "start" }, isValidating ? /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, null) : statusIconMap[status], /* @__PURE__ */ import_react.default.createElement("span", null, rule.message)));
-  }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Progress, { percent: value ? percent : 0, strokeColor, showInfo: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { margin: 0, marginTop: "10px", listStyle: "none", padding: "0" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Space, { size: 4, direction: "vertical", children: rules == null ? void 0 : rules.map((rule) => {
+      const isError = fieldError.includes(rule.message);
+      let status = "wait";
+      if (isError) {
+        status = rule.optional ? "wait" : "error";
+      } else {
+        status = "success";
+      }
+      if (!value) {
+        status = "error";
+      }
+      if (!isTouched) {
+        status = "wait";
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: status === "wait" ? 14 : 8, align: "start", children: [
+        isValidating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, {}) : statusIconMap[status],
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: rule.message })
+      ] }) }, `${rule.message}`);
+    }) }) })
+  ] });
 };
 var Content_default = Content;

package/lib/Password/index.js

@@ -34,12 +34,13 @@ __export(Password_exports, {
 module.exports = __toCommonJS(Password_exports);
 var import_design = require("@oceanbase/design");
 var import_randexp = __toESM(require("randexp"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_design2 = require("@oceanbase/design");
 var import_icons = require("@oceanbase/icons");
 var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
 var import_Content = __toESM(require("./Content"));
 var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var Password = ({
   value,
   locale,
@@ -95,81 +96,95 @@ var Password = ({
     }
     return getRandomPassword();
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react.default.createElement(
-    import_design.Popover,
-    {
-      trigger: "click",
-      placement: "right",
-      popupAlign: {
-        offset: [48, 0]
-      },
-      content: /* @__PURE__ */ import_react.default.createElement(
-        import_Content.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Popover,
         {
-          isTouched,
-          value,
-          isValidating,
-          rules: newRules,
-          fieldError
+          trigger: "click",
+          placement: "right",
+          popupAlign: {
+            offset: [48, 0]
+          },
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Content.default,
+            {
+              isTouched,
+              value,
+              isValidating,
+              rules: newRules,
+              fieldError
+            }
+          ),
+          overlayStyle: { maxWidth: 400 },
+          overlayInnerStyle: {
+            padding: `${token.padding / 2}px ${token.padding}px ${token.padding}px ${token.padding}px`
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.Input.Password,
+            {
+              value,
+              autoComplete: "new-password",
+              onChange: (e) => {
+                var _a;
+                handleChange((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
+              },
+              placeholder: generatePasswordRegex ? locale.generatePlaceholder : locale.placeholder,
+              ...restProps
+            }
+          )
         }
       ),
-      overlayStyle: { maxWidth: 400 },
-      overlayInnerStyle: {
-        padding: `${token.padding / 2}px ${token.padding}px ${token.padding}px ${token.padding}px`
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_design.Input.Password,
-      {
-        value,
-        autoComplete: "new-password",
-        onChange: (e) => {
-          var _a;
-          handleChange((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
-        },
-        placeholder: generatePasswordRegex ? locale.generatePlaceholder : locale.placeholder,
-        ...restProps
-      }
-    )
-  ), generatePasswordRegex && /* @__PURE__ */ import_react.default.createElement(
-    import_design.Button,
-    {
-      onClick: () => {
-        if (generatePassword instanceof Function) {
-          handleChange(generatePassword());
-        } else {
-          handleChange(getRandomPassword());
+      generatePasswordRegex && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_design.Button,
+        {
+          onClick: () => {
+            if (generatePassword instanceof Function) {
+              handleChange(generatePassword());
+            } else {
+              handleChange(getRandomPassword());
+            }
+          },
+          style: { marginLeft: 8 },
+          children: locale.randomlyGenerate
         }
-      },
-      style: { marginLeft: 8 }
-    },
-    locale.randomlyGenerate
-  )), value && (fieldError == null ? void 0 : fieldError.length) === 0 && /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      style: {
-        fontSize: 14,
-        color: token.colorTextTertiary,
-        lineHeight: "22px",
-        marginTop: token.marginXXS
-      }
-    },
-    locale.pleaseRememberYourPassword,
-    /* @__PURE__ */ import_react.default.createElement(
-      import_design.Typography.Text,
+      )
+    ] }),
+    value && (fieldError == null ? void 0 : fieldError.length) === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
       {
-        copyable: {
-          text: value,
-          icon: [
-            /* @__PURE__ */ import_react.default.createElement(import_design.Space, { key: "copy", size: token.marginXXS }, /* @__PURE__ */ import_react.default.createElement(import_icons.CopyOutlined, null), /* @__PURE__ */ import_react.default.createElement("a", null, locale.copyPassword)),
-            /* @__PURE__ */ import_react.default.createElement(import_design.Space, { key: "copy-success", size: token.marginXXS }, /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null), /* @__PURE__ */ import_react.default.createElement("a", null, locale.copyPassword))
-          ],
-          tooltips: ["", locale.copySuccessfully]
+        style: {
+          fontSize: 14,
+          color: token.colorTextTertiary,
+          lineHeight: "22px",
+          marginTop: token.marginXXS
         },
-        style: { marginLeft: token.marginXS }
+        children: [
+          locale.pleaseRememberYourPassword,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_design.Typography.Text,
+            {
+              copyable: {
+                text: value,
+                icon: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: token.marginXXS, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CopyOutlined, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { children: locale.copyPassword })
+                  ] }, "copy"),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: token.marginXXS, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckOutlined, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { children: locale.copyPassword })
+                  ] }, "copy-success")
+                ],
+                tooltips: ["", locale.copySuccessfully]
+              },
+              style: { marginLeft: token.marginXS }
+            }
+          )
+        ]
       }
     )
-  ));
+  ] });
 };
 var Password_default = (0, import_LocaleWrapper.default)({
   componentName: "Password",

package/lib/ProCard/index.js

@@ -32,14 +32,16 @@ __export(ProCard_exports, {
   default: () => ProCard_default
 });
 module.exports = __toCommonJS(ProCard_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_pro_components = require("@ant-design/pro-components");
 var import_design = require("@oceanbase/design");
 var import_util = require("@oceanbase/design/es/_util");
 var import_icons = require("@oceanbase/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_style = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
 var ProCard = ({
+  loading,
   bordered,
   ghost,
   title,
@@ -71,9 +73,10 @@ var ProCard = ({
     className
   );
   return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_pro_components.ProCard,
       {
+        loading: loading === true ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Skeleton, { active: true, title: false, paragraph: { rows: 4 } }) : loading,
         prefixCls: customizePrefixCls,
         bordered: bordered ?? ((contextCard == null ? void 0 : contextCard.variant) ? (contextCard == null ? void 0 : contextCard.variant) === "outlined" : void 0),
         ghost,
@@ -90,7 +93,7 @@ var ProCard = ({
           ...style
         },
         collapsibleIconRender: ({ collapsed }) => {
-          return /* @__PURE__ */ import_react.default.createElement(
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_icons.CaretRightFilled,
             {
               className: `${iconPrefixCls} ${iconPrefixCls}-right ${prefixCls}-collapsible-icon`,

package/lib/ProCard/style/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { CSSObject } from '@ant-design/cssinjs';
 import type { OBToken } from '../../_util/genComponentStyleHook';
-export declare const genProCardStyle: GenerateStyle<OBToken>;
+export declare const genProCardStyle: (token: OBToken, outerComponentCls?: string) => CSSObject;
 declare const _default: (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
     hashId: string;

package/lib/ProCard/style/index.js

@@ -25,8 +25,9 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_design = require("@oceanbase/design");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var genProCardStyle = (token) => {
-  const { componentCls, antCls, prefixCls } = token;
+var genProCardStyle = (token, outerComponentCls) => {
+  const { componentCls: innerComponentCls, antCls, prefixCls } = token;
+  const componentCls = outerComponentCls || innerComponentCls;
   const tableComponentCls = `${antCls}-table`;
   const tabsComponentCls = `${antCls}-tabs`;
   const tabsPrefixCls = `${prefixCls}-tabs`;
@@ -36,6 +37,9 @@ var genProCardStyle = (token) => {
     [`div${componentCls}`]: {
       borderRadius: token.borderRadiusLG
     },
+    [`${componentCls}${componentCls}-border`]: {
+      border: `${token.lineWidth}px solid ${token.colorBorderSecondary}`
+    },
     [`${componentCls}:not(${componentCls}-border):not(${componentCls}-ghost)`]: {
       boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)"
     },

package/lib/ProTable/index.d.ts

@@ -3,7 +3,7 @@ import type { ProTableProps as AntProTableProps } from '@ant-design/pro-componen
 export interface ProTableProps<T, U, ValueType> extends AntProTableProps<T, U, ValueType> {
     innerBordered?: boolean;
 }
-declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function ProTable<T, U, ValueType>({ form, headerTitle, options, optionsRender, toolbar, toolBarRender, size, bordered, innerBordered, cardBordered, expandable, rowSelection, pagination: customPagination, footer, locale, cardProps: outerCardProps, prefixCls: customizePrefixCls, tableClassName, className, ...restProps }: ProTableProps<T, U, ValueType>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace ProTable {
     var Summary;
 }

package/lib/ProTable/index.js

@@ -32,13 +32,14 @@ __export(ProTable_exports, {
   default: () => ProTable_default
 });
 module.exports = __toCommonJS(ProTable_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_pro_components = require("@ant-design/pro-components");
 var import_design = require("@oceanbase/design");
 var import_classnames = __toESM(require("classnames"));
 var import_lodash = require("lodash");
 var import_style = __toESM(require("../LightFilter/style"));
 var import_style2 = __toESM(require("./style"));
+var import_jsx_runtime = require("react/jsx-runtime");
 function ProTable({
   form,
   headerTitle,
@@ -49,6 +50,7 @@ function ProTable({
   size,
   bordered,
   innerBordered,
+  cardBordered,
   expandable,
   rowSelection,
   pagination: customPagination,
@@ -60,7 +62,7 @@ function ProTable({
   className,
   ...restProps
 }) {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const { getPrefixCls, card: contextCard } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
   const tablePrefixCls = getPrefixCls("table", customizePrefixCls);
   const { wrapSSR: tableWrapSSR } = import_design.Table.useStyle(tablePrefixCls);
   const pagination = import_design.Table.useDefaultPagination(customPagination);
@@ -78,18 +80,23 @@ function ProTable({
   const prefixCls = getPrefixCls("pro-table", customizePrefixCls);
   const { wrapSSR } = (0, import_style2.default)(prefixCls);
   const proTableCls = (0, import_classnames.default)(className);
-  const { emptyText = /* @__PURE__ */ import_react.default.createElement(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE }), ...restLocale } = locale || {};
-  const cardProps = typeof outerCardProps === "boolean" ? {} : outerCardProps;
+  const { emptyText = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE }), ...restLocale } = locale || {};
+  const cardProps = (0, import_lodash.merge)(
+    {},
+    contextCard,
+    typeof outerCardProps === "boolean" ? {} : outerCardProps
+  );
   const proCardCls = getPrefixCls("pro-card", customizePrefixCls);
   return tableWrapSSR(
     lightFilterWrapSSR(
       wrapSSR(
-        /* @__PURE__ */ import_react.default.createElement(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_pro_components.ProTable,
           {
             defaultSize: "large",
             size,
             bordered: bordered || innerBordered,
+            cardBordered: cardBordered ?? ((contextCard == null ? void 0 : contextCard.variant) ? (contextCard == null ? void 0 : contextCard.variant) === "outlined" : void 0),
             form: {
               // query form should remove required mark
               requiredMark: false,
@@ -105,12 +112,16 @@ function ProTable({
               className: (0, import_classnames.default)(
                 {
                   [`${proCardCls}-has-title`]: !!headerTitle || options || options === void 0 || optionsRender || toolbar || toolBarRender,
-                  [`${proCardCls}-no-divider`]: !(cardProps == null ? void 0 : cardProps.headerBordered),
+                  [`${proCardCls}-no-divider`]: !(cardProps == null ? void 0 : cardProps.headerBordered) && !(cardProps == null ? void 0 : cardProps.divided),
                   [`${proCardCls}-no-padding`]: true,
                   [`${proCardCls}-contain-tabs`]: !!(cardProps == null ? void 0 : cardProps.tabs)
                 },
                 cardProps == null ? void 0 : cardProps.className
-              )
+              ),
+              bodyStyle: {
+                paddingBlock: 0,
+                ...cardProps == null ? void 0 : cardProps.bodyStyle
+              }
             },
             expandable: expandable ? {
               columnWidth: !size || size === "large" ? 40 : 32,
@@ -121,7 +132,7 @@ function ProTable({
             footer,
             locale: {
               ...restLocale,
-              emptyText: /* @__PURE__ */ import_react.default.createElement("div", { className: `${tablePrefixCls}-empty-wrapper` }, typeof emptyText === "function" ? emptyText() : emptyText)
+              emptyText: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${tablePrefixCls}-empty-wrapper`, children: typeof emptyText === "function" ? emptyText() : emptyText })
             },
             prefixCls: customizePrefixCls,
             tableClassName: tableCls,

package/lib/ProTable/style/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { CSSObject } from '@ant-design/cssinjs';
 import type { OBToken } from '../../_util/genComponentStyleHook';
-export declare const genProTableStyle: GenerateStyle<OBToken>;
+export declare const genProTableStyle: (token: OBToken) => CSSObject;
 declare const _default: (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
     hashId: string;

package/lib/ProTable/style/index.js

@@ -25,6 +25,7 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_design = require("@oceanbase/design");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var import_style = require("../../ProCard/style");
 var genProTableStyle = (token) => {
   const { antCls, componentCls, proComponentsCls } = token;
   const proCardComponentCls = `${proComponentsCls}-card`;
@@ -36,6 +37,10 @@ var genProTableStyle = (token) => {
           flexDirection: "row-reverse"
         }
       },
+      // Remove nested ProCard box-shadow
+      [`& > ${proCardComponentCls}, ${proCardComponentCls}${componentCls}-search-light-filter`]: {
+        boxShadow: "none !important"
+      },
       [`${proCardComponentCls}${proCardComponentCls}-no-padding`]: {
         [`${proCardComponentCls}-body`]: {
           paddingInline: 0,
@@ -48,7 +53,8 @@ var genProTableStyle = (token) => {
           componentCls: proCardComponentCls
         })
       }
-    }
+    },
+    ...(0, import_style.genProCardStyle)(token, proCardComponentCls)
   };
 };
 var style_default = (prefixCls) => {

package/lib/Ranger/QuickPicker.js

@@ -38,9 +38,10 @@ var import_classnames = __toESM(require("classnames"));
 var import_dayjs = __toESM(require("dayjs"));
 var import_lodash = require("lodash");
 var import_moment = __toESM(require("moment"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_util = require("../_util");
 var import_constant = require("./constant");
+var import_jsx_runtime = require("react/jsx-runtime");
 var prefix = (0, import_util.getPrefix)("ranger-quick-picker");
 var RangeDropdown = ({
   selects,
@@ -50,19 +51,25 @@ var RangeDropdown = ({
   locale = {},
   ...rest
 }) => {
-  const menu = /* @__PURE__ */ import_react.default.createElement(
+  const menu = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_design.Menu,
     {
       onClick: (e) => {
         onChange(e.key);
       },
-      style: { minWidth: 120 }
-    },
-    selects.map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: item.name }, locale[item.name] || item.name)),
-    customable && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: import_constant.CUSTOMIZE }, locale.customize)
+      style: { minWidth: 120 },
+      children: [
+        selects.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale[item.name] || item.name }, item.name)),
+        customable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Menu.Item, { children: locale.customize }, import_constant.CUSTOMIZE)
+      ]
+    }
   );
   const match = selects.find((item) => item.name === value);
-  return /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: menu, ...rest }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { style: { cursor: "pointer" }, className: (0, import_classnames.default)(prefix, `${prefix}-dropdown`) }, /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, null), locale[match == null ? void 0 : match.name] || (match == null ? void 0 : match.name), /* @__PURE__ */ import_react.default.createElement(import_icons.DownOutlined, null)));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Dropdown, { overlay: menu, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { style: { cursor: "pointer" }, className: (0, import_classnames.default)(prefix, `${prefix}-dropdown`), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ClockCircleOutlined, {}),
+    locale[match == null ? void 0 : match.name] || (match == null ? void 0 : match.name),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DownOutlined, {})
+  ] }) });
 };
 var RangeSelect = ({
   selects,
@@ -76,7 +83,7 @@ var RangeSelect = ({
   const handleChange = (nextValue) => {
     onChange(nextValue);
   };
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_design.Select,
     {
       className: (0, import_classnames.default)(prefix, `${prefix}-select`),
@@ -84,12 +91,14 @@ var RangeSelect = ({
       onSelect: handleChange,
       value,
       size,
-      ...rest
-    },
-    selects.map((item) => {
-      return /* @__PURE__ */ import_react.default.createElement(import_design.Select.Option, { key: item.name, value: item.name }, locale[item.name] || item.name);
-    }),
-    customable && /* @__PURE__ */ import_react.default.createElement(import_design.Select.Option, { key: import_constant.CUSTOMIZE, value: import_constant.CUSTOMIZE }, locale.customize)
+      ...rest,
+      children: [
+        selects.map((item) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Select.Option, { value: item.name, children: locale[item.name] || item.name }, item.name);
+        }),
+        customable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Select.Option, { value: import_constant.CUSTOMIZE, children: locale.customize }, import_constant.CUSTOMIZE)
+      ]
+    }
   );
 };
 var QuickPicker_default = (props) => {
@@ -118,5 +127,5 @@ var QuickPicker_default = (props) => {
     }
     onNameChange(value);
   };
-  return type === "select" ? /* @__PURE__ */ import_react.default.createElement(RangeSelect, { value: innerName, selects, onChange: handleChange, ...rest }) : /* @__PURE__ */ import_react.default.createElement(RangeDropdown, { value: innerName, selects, onChange: handleChange, ...rest });
+  return type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RangeSelect, { value: innerName, selects, onChange: handleChange, ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RangeDropdown, { value: innerName, selects, onChange: handleChange, ...rest });
 };