@oceanbase/design 0.2.21 → 0.2.23

package/es/_util/genComponentStyleHook.js

@@ -5,15 +5,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { genComponentStyleHook as antGenComponentStyleHook } from 'antd/es/theme/internal';
+import theme from "../theme";
 export function genComponentStyleHook(componentName, styleFn, getDefaultToken) {
   return function (prefixCls) {
     var useStyle = antGenComponentStyleHook("OB-".concat(componentName), function (token) {
       return [styleFn(token)];
     }, getDefaultToken);
     var _useStyle = useStyle(prefixCls),
-      _useStyle2 = _slicedToArray(_useStyle, 2),
-      wrapSSR = _useStyle2[0],
-      hashId = _useStyle2[1];
+      _useStyle2 = _slicedToArray(_useStyle, 1),
+      wrapSSR = _useStyle2[0];
+    // use hashId from useToken, as hashId is '' when hashed is false
+    // ref: https://github.com/ant-design/ant-design/blob/master/components/theme/useToken.ts#L80
+    var _theme$useToken = theme.useToken(),
+      hashId = _theme$useToken.hashId;
     return {
       wrapSSR: wrapSSR,
       hashId: hashId

package/es/alert/style/index.js

@@ -58,7 +58,7 @@ export var genAlertStyle = function genAlertStyle(token) {
   var height = token.fontSize * token.lineHeight;
   return _ref2 = {}, _defineProperty(_ref2, "".concat(componentCls), (_$concat2 = {
     // vertical align to flex-start
-    alignItems: 'flex-start'
+    alignItems: 'flex-start !important'
   }, _defineProperty(_$concat2, "".concat(componentCls, "-icon"), {
     height: height
   }), _defineProperty(_$concat2, "".concat(componentCls, "-close-icon"), {

package/es/index.js

@@ -1,5 +1,3 @@
-import { theme } from 'antd';
-
 // 引入 antd/dist/reset.css，以重置基本样式，保证原生元素遵从 antd 规范样式
 // ref: https://ant.design/docs/react/migration-v5-cn#%E6%8A%80%E6%9C%AF%E8%B0%83%E6%95%B4
 import 'antd/dist/reset.css';
@@ -20,7 +18,6 @@ export { default as Tooltip } from "./tooltip";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as Spin } from "./spin";
 export { default as Badge } from "./badge";
+import theme from "./theme";
 var useToken = theme.useToken;
-
-// 直接导出 useToken，方便上层使用
 export { useToken };

package/es/menu/index.d.ts

@@ -1 +1,2 @@
+export * from 'antd/es/menu/hooks/useItems';
 export * from 'antd/es/menu';

package/es/menu/index.js

@@ -1 +1,2 @@
+export * from 'antd/es/menu/hooks/useItems';
 export * from 'antd/es/menu';

package/es/table/style/index.js

@@ -4,7 +4,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genTableStyle = function genTableStyle(token) {
-  var _$concat, _trTd$concat$co, _$concat4, _$concat$concat, _$concat7, _trNthChild2nNot, _$concat$concat4, _$concat14, _ref;
+  var _$concat, _trTd$concat$co, _$concat4, _$concat$concat, _$concat5, _$concat8, _trNthChild2nNot, _$concat$concat4, _$concat15, _ref;
   var antCls = token.antCls,
     componentCls = token.componentCls,
     colorTextBase = token.colorTextBase,
@@ -65,11 +65,15 @@ export var genTableStyle = function genTableStyle(token) {
     backgroundColor: "".concat(colorFillQuaternary, " !important")
   }), _defineProperty(_trTd$concat$co, "".concat(componentCls, "-tbody > tr:last-child"), _defineProperty({}, 'td:first-child, td:last-child', {
     borderRadius: borderRadiusLG
-  })), _trTd$concat$co)), _$concat4)), _$concat$concat)), _defineProperty(_ref, "".concat(componentCls, "-wrapper"), (_$concat7 = {}, _defineProperty(_$concat7, "".concat(componentCls, ":not(").concat(componentCls, "-middle):not(").concat(componentCls, "-small)"), _defineProperty({}, "".concat(componentCls, "-thead > tr"), _defineProperty({}, 'td, th', {
+  })), _trTd$concat$co)), _$concat4)), _$concat$concat)), _defineProperty(_ref, "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-scroll-horizontal, ").concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-fixed-header"), _defineProperty({}, "".concat(componentCls, "-tbody"), (_$concat5 = {}, _defineProperty(_$concat5, "tr:nth-child(2n + 1):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(antCls, "-descriptions-row) > td"), {
+    backgroundColor: colorFillQuaternary
+  }), _defineProperty(_$concat5, "tr:nth-child(2n):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(componentCls, "-expanded-row):not(").concat(antCls, "-descriptions-row) > td"), {
+    backgroundColor: colorBgBase
+  }), _$concat5))), _defineProperty(_ref, "".concat(componentCls, "-wrapper"), (_$concat8 = {}, _defineProperty(_$concat8, "".concat(componentCls, ":not(").concat(componentCls, "-middle):not(").concat(componentCls, "-small)"), _defineProperty({}, "".concat(componentCls, "-thead > tr"), _defineProperty({}, 'td, th', {
     padding: largeCellPadding
-  }))), _defineProperty(_$concat7, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr:not(".concat(componentCls, "-measure-row) > td"), {
+  }))), _defineProperty(_$concat8, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr:not(".concat(componentCls, "-measure-row) > td"), {
     padding: largeCellPadding
-  })), _$concat7)), _defineProperty(_ref, "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-expandable)"), _defineProperty({}, "".concat(componentCls, ":not(").concat(componentCls, "-bordered)"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr:not(".concat(componentCls, "-measure-row) > td"), {
+  })), _$concat8)), _defineProperty(_ref, "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-expandable)"), _defineProperty({}, "".concat(componentCls, ":not(").concat(componentCls, "-bordered)"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr:not(".concat(componentCls, "-measure-row) > td"), {
     border: 'none'
   })))), _defineProperty(_ref, "".concat(componentCls, "-wrapper").concat(componentCls, "-expandable"), (_$concat$concat4 = {}, _defineProperty(_$concat$concat4, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr:nth-child(2n):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(componentCls, "-expanded-row)"), (_trNthChild2nNot = {}, _defineProperty(_trNthChild2nNot, '& > td', {
     backgroundColor: colorBgBase
@@ -79,11 +83,11 @@ export var genTableStyle = function genTableStyle(token) {
     }
   }), _trNthChild2nNot)))), _defineProperty(_$concat$concat4, "".concat(componentCls, "-pagination"), _defineProperty({}, "&".concat(antCls, "-pagination"), {
     borderTop: 'none'
-  })), _$concat$concat4)), _defineProperty(_ref, "".concat(componentCls, "-wrapper"), _defineProperty({}, "".concat(componentCls, "-pagination"), (_$concat14 = {}, _defineProperty(_$concat14, "&".concat(antCls, "-pagination"), {
+  })), _$concat$concat4)), _defineProperty(_ref, "".concat(componentCls, "-wrapper"), _defineProperty({}, "".concat(componentCls, "-pagination"), (_$concat15 = {}, _defineProperty(_$concat15, "&".concat(antCls, "-pagination"), {
     padding: "".concat(padding, "px 0"),
     margin: '0 !important',
     borderTop: "1px solid ".concat(colorBorderSecondary)
-  }), _defineProperty(_$concat14, "".concat(componentCls, "-batch-operation-bar"), _defineProperty({
+  }), _defineProperty(_$concat15, "".concat(componentCls, "-batch-operation-bar"), _defineProperty({
     position: 'absolute',
     left: 0,
     display: 'inline-block',
@@ -94,7 +98,7 @@ export var genTableStyle = function genTableStyle(token) {
   }, "".concat(componentCls, "-batch-operation-selection-count"), {
     margin: "0 ".concat(marginXS, "px"),
     color: colorLink
-  }))), _$concat14))), _defineProperty(_ref, "".concat(antCls, "-popover").concat(componentCls, "-batch-operation-selection-popover"), _defineProperty({}, "".concat(antCls, "-popover-inner"), {
+  }))), _$concat15))), _defineProperty(_ref, "".concat(antCls, "-popover").concat(componentCls, "-batch-operation-selection-popover"), _defineProperty({}, "".concat(antCls, "-popover-inner"), {
     padding: 0
   })), _ref;
 };

package/es/theme/default.d.ts

@@ -64,7 +64,6 @@ declare const _default: {
     colorFillTertiary: string;
     colorFillSecondary: string;
     colorFill: string;
-    colorIcon: string;
     boxShadowSecondary: string;
     boxShadow: string;
     borderRadius: number;

package/es/theme/default.js

@@ -4,7 +4,7 @@ export default {
   colorPrimaryBgHover: '#EAF1FF',
   colorPrimaryBorder: '#B3CCFF',
   colorPrimaryBorderHover: '#5189FB',
-  colorPrimaryHover: '#004CE6',
+  colorPrimaryHover: '#5189FB',
   colorPrimaryTextHover: '#5189FB',
   colorPrimaryText: '#006AFF',
   colorPrimaryTextActive: '#004CE6',
@@ -60,11 +60,10 @@ export default {
   colorBgMask: 'rgba(19, 32, 57,  0.65)',
   colorBorder: '#CDD5E4',
   colorBorderSecondary: '#E2E8F3',
-  colorFillQuaternary: 'rgb(245, 248, 254, 0.45)',
-  colorFillTertiary: 'rgb(245, 248, 254, 0.65)',
-  colorFillSecondary: 'rgb(245, 248, 254, 0.85)',
+  colorFillQuaternary: '#F8FAFE',
+  colorFillTertiary: '#F5F8FE',
+  colorFillSecondary: '#F5F8FE',
   colorFill: '#F5F8FE',
-  colorIcon: '#8592AD',
   boxShadowSecondary: '0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05)',
   boxShadow: '0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02)',
   borderRadius: 6,

package/es/theme/index.d.ts

@@ -51,6 +51,9 @@ declare const _default: {
     };
     defaultConfig: {
         token: import("antd/es/theme/internal").SeedToken;
+        override: {
+            override: import("antd/es/theme/internal").SeedToken;
+        };
         hashed: boolean;
     };
     components: {

package/lib/_util/genComponentStyleHook.js

@@ -1,6 +1,8 @@
+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)
@@ -14,6 +16,14 @@ 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/_util/genComponentStyleHook.ts
@@ -23,6 +33,7 @@ __export(genComponentStyleHook_exports, {
 });
 module.exports = __toCommonJS(genComponentStyleHook_exports);
 var import_internal = require("antd/es/theme/internal");
+var import_theme = __toESM(require("../theme"));
 function genComponentStyleHook(componentName, styleFn, getDefaultToken) {
   return (prefixCls) => {
     const useStyle = (0, import_internal.genComponentStyleHook)(
@@ -32,7 +43,8 @@ function genComponentStyleHook(componentName, styleFn, getDefaultToken) {
       },
       getDefaultToken
     );
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const [wrapSSR] = useStyle(prefixCls);
+    const { hashId } = import_theme.default.useToken();
     return {
       wrapSSR,
       hashId

package/lib/alert/style/index.js

@@ -84,7 +84,7 @@ var genAlertStyle = (token) => {
   return {
     [`${componentCls}`]: {
       // vertical align to flex-start
-      alignItems: "flex-start",
+      alignItems: "flex-start !important",
       [`${componentCls}-icon`]: {
         height
       },

package/lib/index.js

@@ -51,7 +51,6 @@ __export(src_exports, {
   version: () => import_package.version
 });
 module.exports = __toCommonJS(src_exports);
-var import_antd = require("antd");
 var import_reset = require("antd/dist/reset.css");
 __reExport(src_exports, require("antd"), module.exports);
 var import_package = require("../package.json");
@@ -70,7 +69,8 @@ var import_tooltip = __toESM(require("./tooltip"));
 var import_breadcrumb = __toESM(require("./breadcrumb"));
 var import_spin = __toESM(require("./spin"));
 var import_badge = __toESM(require("./badge"));
-var { useToken } = import_antd.theme;
+var import_theme2 = __toESM(require("./theme"));
+var { useToken } = import_theme2.default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,

package/lib/menu/index.d.ts

@@ -1 +1,2 @@
+export * from 'antd/es/menu/hooks/useItems';
 export * from 'antd/es/menu';

package/lib/menu/index.js

@@ -16,8 +16,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/menu/index.ts
 var menu_exports = {};
 module.exports = __toCommonJS(menu_exports);
+__reExport(menu_exports, require("antd/es/menu/hooks/useItems"), module.exports);
 __reExport(menu_exports, require("antd/es/menu"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ...require("antd/es/menu/hooks/useItems"),
   ...require("antd/es/menu")
 });

package/lib/table/style/index.js

@@ -121,6 +121,21 @@ var genTableStyle = (token) => {
         }
       }
     },
+    // 滚动表格样式
+    // 由于滚动表格会在 tbody 下最前面多一个 tr 元素，因此需要设置相反的斑马条样式
+    // .ant-table-scroll-horizontal: 水平滚动
+    // .ant-table-fixed-header: 垂直滚动
+    [`${componentCls}-wrapper ${componentCls}${componentCls}-scroll-horizontal, ${componentCls}-wrapper ${componentCls}${componentCls}-fixed-header`]: {
+      [`${componentCls}-tbody`]: {
+        // 斑马纹样式
+        [`tr:nth-child(2n + 1):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${antCls}-descriptions-row) > td`]: {
+          backgroundColor: colorFillQuaternary
+        },
+        [`tr:nth-child(2n):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${componentCls}-expanded-row):not(${antCls}-descriptions-row) > td`]: {
+          backgroundColor: colorBgBase
+        }
+      }
+    },
     // large 表格样式
     [`${componentCls}-wrapper`]: {
       [`${componentCls}:not(${componentCls}-middle):not(${componentCls}-small)`]: {

package/lib/theme/default.d.ts

@@ -64,7 +64,6 @@ declare const _default: {
     colorFillTertiary: string;
     colorFillSecondary: string;
     colorFill: string;
-    colorIcon: string;
     boxShadowSecondary: string;
     boxShadow: string;
     borderRadius: number;

package/lib/theme/default.js

@@ -28,7 +28,7 @@ var default_default = {
   colorPrimaryBgHover: "#EAF1FF",
   colorPrimaryBorder: "#B3CCFF",
   colorPrimaryBorderHover: "#5189FB",
-  colorPrimaryHover: "#004CE6",
+  colorPrimaryHover: "#5189FB",
   colorPrimaryTextHover: "#5189FB",
   colorPrimaryText: "#006AFF",
   colorPrimaryTextActive: "#004CE6",
@@ -84,11 +84,10 @@ var default_default = {
   colorBgMask: "rgba(19, 32, 57,  0.65)",
   colorBorder: "#CDD5E4",
   colorBorderSecondary: "#E2E8F3",
-  colorFillQuaternary: "rgb(245, 248, 254, 0.45)",
-  colorFillTertiary: "rgb(245, 248, 254, 0.65)",
-  colorFillSecondary: "rgb(245, 248, 254, 0.85)",
+  colorFillQuaternary: "#F8FAFE",
+  colorFillTertiary: "#F5F8FE",
+  colorFillSecondary: "#F5F8FE",
   colorFill: "#F5F8FE",
-  colorIcon: "#8592AD",
   boxShadowSecondary: "0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05)",
   boxShadow: "0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02)",
   borderRadius: 6,

package/lib/theme/index.d.ts

@@ -51,6 +51,9 @@ declare const _default: {
     };
     defaultConfig: {
         token: import("antd/es/theme/internal").SeedToken;
+        override: {
+            override: import("antd/es/theme/internal").SeedToken;
+        };
         hashed: boolean;
     };
     components: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -35,26 +35,26 @@
     "postbuild": "cp src/style/reset.css dist/"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.17.0",
-    "@oceanbase/icons": "^0.2.7",
-    "@oceanbase/util": "^0.2.9",
+    "@ant-design/cssinjs": "^1.17.2",
+    "@oceanbase/icons": "^0.2.8",
+    "@oceanbase/util": "^0.2.10",
     "ahooks": "^2.10.14",
-    "antd": "^5.9.0",
+    "antd": "^5.10.1",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
     "prop-types": "^15.8.1",
-    "rc-util": "^5.37.0",
+    "rc-util": "^5.38.0",
     "react-sticky-mouse-tooltip": "^0.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-env": "^7.23.2",
     "antd-token-previewer": "^1.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "38becd333620011d0d084df62b1131135a396abb"
+  "gitHead": "1138341df7a35d3d4939ccea79225ddf220de2cc"
 }