@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/es/BasicLayout/locale/ja-JP.js

@@ -0,0 +1,15 @@
+export default {
+  help: 'ヘルプ',
+  welcome: 'ウェルカムページ',
+  versionNotice: '更新情報',
+  viewDocs: 'マニュアルを見る',
+  downloadDocs: 'マニュアルをダウンロード',
+  about: '製品について',
+  version: 'バージョン',
+  releaseTime: 'リリース日',
+  company: 'Beijing OceanBase Technology Co., Ltd.',
+  right: 'All Rights Reserved',
+  expandSider: 'メインナビを展開',
+  collapseSider: 'メインナビを折りたたむ',
+  sideNavigation: 'メインナビゲーション'
+};

package/es/BasicLayout/locale/zh-CN.d.ts

@@ -9,5 +9,8 @@ declare const _default: {
     releaseTime: string;
     company: string;
     right: string;
+    expandSider: string;
+    collapseSider: string;
+    sideNavigation: string;
 };
 export default _default;

package/es/BasicLayout/locale/zh-CN.js

@@ -8,5 +8,8 @@ export default {
   version: '版本号',
   releaseTime: '发布日期',
   company: '北京奥星贝斯科技有限公司',
-  right: '版权所有'
+  right: '版权所有',
+  expandSider: '展开主导航',
+  collapseSider: '收起主导航',
+  sideNavigation: '主导航'
 };

package/es/BasicLayout/locale/zh-TW.d.ts

@@ -9,5 +9,8 @@ declare const _default: {
     releaseTime: string;
     company: string;
     right: string;
+    expandSider: string;
+    collapseSider: string;
+    sideNavigation: string;
 };
 export default _default;

package/es/BasicLayout/locale/zh-TW.js

@@ -8,5 +8,8 @@ export default {
   version: '版本號',
   releaseTime: '發佈日期',
   company: '北京奧星貝斯科技有限公司',
-  right: '版權所有'
+  right: '版權所有',
+  expandSider: '展開主導航',
+  collapseSider: '收起主導航',
+  sideNavigation: '主導航'
 };

package/es/BasicLayout/style/index.js

@@ -22,11 +22,34 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
   siderWidthList.forEach(function (width) {
     footerBarStyle["".concat(componentCls).concat(componentCls, "-sider-").concat(width)] = _defineProperty({}, "".concat(proComponentsCls, "-footer-bar"), {
       // footer bar width adapt to sider width of BasicLayout
-      width: width === 0 ? '100%' : "calc(100% - ".concat(width, "px - 24px)"),
+      width: width === 0 ? '100%' : "calc(100% - ".concat(width, "px - 32px)"),
       transition: "width ".concat(motionDurationSlow)
     });
   });
-  return _objectSpread(_objectSpread(_defineProperty(_defineProperty({}, "".concat(componentCls, "-banner-wrapper"), {
+  return _objectSpread(_objectSpread(_defineProperty(_defineProperty({
+    '@keyframes activeGradientAnimation': {
+      '0%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '0% 100%'
+      },
+      '100%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 100%'
+      }
+    },
+    '@keyframes selectedGradientAnimation': {
+      '0%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '0% 100%',
+        borderRadius: 0
+      },
+      '100%': {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 100%',
+        borderRadius: token.borderRadiusLG
+      }
+    }
+  }, "".concat(componentCls, "-banner-wrapper"), {
     position: 'fixed',
     top: 0,
     zIndex: 20,
@@ -40,7 +63,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
   }, "".concat(proComponentsCls, "-page-container"), {
     // 48px is the height of BasicLayout header
     minHeight: 'calc(100vh - 48px)'
-  }), "".concat(componentCls, "-content-layout"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  }), "".concat(componentCls, "-content-layout"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     maxWidth: maxWidth,
     // 居中对齐
     margin: '0 auto'
@@ -86,7 +109,12 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     border: "1px solid ".concat(colorBorder),
     borderRadius: '10px',
     cursor: 'pointer',
-    opacity: 0
+    opacity: 0,
+    font: 'inherit',
+    padding: 0,
+    margin: 0,
+    appearance: 'none',
+    WebkitAppearance: 'none'
   }, iconCls, {
     fontSize: 'px',
     display: 'block',
@@ -94,33 +122,22 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
   }))), "".concat(componentCls, "-sider-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     height: 'calc(100vh - 48px)'
-  }, "".concat(antCls, "-menu"), _defineProperty(_defineProperty(_defineProperty({
+  }, "".concat(antCls, "-menu"), _defineProperty(_defineProperty({
     backgroundColor: 'transparent',
     borderRight: 'none'
-  }, "".concat(antCls, "-menu-item"), _defineProperty({
+  }, "".concat(antCls, "-menu-submenu, ").concat(antCls, "-menu-item"), _defineProperty({
     width: '100%',
     marginTop: 0,
     marginRight: 'auto',
     marginLeft: 'auto',
     color: colorText,
     backgroundColor: 'transparent'
-  }, iconCls, {
+  }, "".concat(antCls, "-menu-title-content ").concat(iconCls), {
     // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
     width: '18px',
     height: '18px',
-    fontSize: '18px'
-  })), "".concat(antCls, "-menu-submenu"), _defineProperty({
-    width: '100%',
-    marginTop: 0,
-    marginRight: 'auto',
-    marginLeft: 'auto',
-    color: colorText,
-    backgroundColor: 'transparent'
-  }, iconCls, {
-    // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
-    width: '18px',
-    height: '18px',
-    fontSize: '18px'
+    fontSize: '18px',
+    marginBottom: 10
   })), "".concat(antCls, "-menu-submenu > ").concat(antCls, "-menu-submenu-title"), {
     width: '100%',
     marginBottom: '4px !important',
@@ -148,7 +165,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     paddingLeft: '28px !important'
   })), "".concat(antCls, "-menu-item-active, ").concat(antCls, "-menu-submenu-active > ").concat(antCls, "-menu-submenu-title"), {
     color: "".concat(colorText, " !important"),
-    fontWeight: 600,
+    fontWeight: token.fontWeightStrong,
     animation: 'activeGradientAnimation 0.1s',
     // .border-gradient(linear-gradient(to right, #E9EDF6, @colorBgLayout), linear-gradient(90deg, #C6CDD9, @colorBgLayout), 0.5px, solid, 8px 0 0 8px),
     backgroundImage: "linear-gradient(to right,#E9EDF6, ".concat(colorBgLayout, "),linear-gradient(90deg,#C6CDD9,").concat(colorBgLayout, ")"),
@@ -159,7 +176,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     transition: 'border-width .3s'
   }), "".concat(antCls, "-menu-item-selected"), {
     color: "".concat(colorPrimary, " !important"),
-    fontWeight: 600,
+    fontWeight: token.fontWeightStrong,
     animation: 'selectedGradientAnimation 0.5s',
     // .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, @colorBgLayout), 0.5px, solid, 8px 0 0 8px),
     backgroundImage: "linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,".concat(colorPrimaryBorder, ",").concat(colorBgLayout, ")"),
@@ -260,6 +277,9 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
   })), "".concat(componentCls, "-content"), {
     backgroundColor: colorBgLayout,
     transition: 'all 0.3s'
+  }), "".concat(componentCls, "-content-main"), {
+    display: 'block',
+    minHeight: '100%'
   }))), "@media (min-width: ".concat(maxWidth, ")"), _defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-content-layout"), _defineProperty({}, "".concat(componentCls, "-sider"), {
     paddingLeft: 0
   }))), "".concat(proComponentsCls, "-footer-bar"), {
@@ -287,7 +307,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     }
   }), "".concat(antCls, "-menu-item-active"), {
     color: 'colorText !important',
-    fontWeight: 600,
+    fontWeight: token.fontWeightStrong,
     animation: 'activeGradientAnimation 0.1s',
     // .border-gradient(linear-gradient(to right, #E9EDF6, colorBgLayout), linear-gradient(90deg, #C6CDD9, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
     backgroundImage: "linear-gradient(to right, #E9EDF6, ".concat(colorBgLayout, "), linear-gradient(90deg, #C6CDD9, ").concat(colorBgLayout, ")"),
@@ -298,7 +318,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     transition: 'border-width .3s'
   }), "".concat(antCls, "-menu-submenu-active > & ").concat(antCls, "-menu-submenu-title"), {
     color: 'colorText !important',
-    fontWeight: 600,
+    fontWeight: token.fontWeightStrong,
     animation: 'activeGradientAnimation 0.1s',
     // .border-gradient(linear-gradient(to right, #E9EDF6, colorBgLayout), linear-gradient(90deg, #C6CDD9, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
     backgroundImage: "linear-gradient(to right, #E9EDF6, ".concat(colorBgLayout, "), linear-gradient(90deg, #C6CDD9, ").concat(colorBgLayout, ")"),
@@ -309,7 +329,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
     transition: 'border-width .3s'
   }), "".concat(antCls, "-menu-item-selected"), {
     color: "".concat(colorPrimary, " !important"),
-    fontWeight: 600,
+    fontWeight: token.fontWeightStrong,
     animation: 'selectedGradientAnimation 0.1s',
     // .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, colorBgLayout), 0.5px, solid, 8px 0 0 8px),
     backgroundImage: "linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,".concat(colorPrimaryBorder, ",").concat(colorBgLayout, ")"),

package/es/BatchOperationBar/index.d.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './index.less';
 export interface AlertRenderParams {
     selectedRows: any[];
     setSelectedRows: (selectedRows: any[]) => void;

package/es/BatchOperationBar/index.js

@@ -1,3 +1,4 @@
+"use client";
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -11,18 +12,22 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { DownOutlined, UpOutlined } from '@oceanbase/icons';
-import { Space } from '@oceanbase/design';
+import { ConfigProvider, Space } from '@oceanbase/design';
 import classnames from 'classnames';
 import { cloneDeep, isEmpty, isEqual, pullAllWith } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import "./index.less";
+import useStyle from "./style";
 import zhCN from "./locale/zh-CN";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var prefix = 'ob-batch-operation-bar';
 var BatchOperationBar = function BatchOperationBar(props) {
   var _locale$alertText, _locale$alertText$rep;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('batch-operation-bar');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var locale = props === null || props === void 0 ? void 0 : props.locale;
   var title = props.title,
     _props$open = props.open,
@@ -85,35 +90,46 @@ var BatchOperationBar = function BatchOperationBar(props) {
   };
   var disPlayBtnRender = function disPlayBtnRender() {
     if (!showOpenBtn) return null;
-    return /*#__PURE__*/_jsxs("div", {
-      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-open-btn"), isOpen), "".concat(prefix, "-close-btn"), !isOpen), "".concat(prefix, "-display-btn"), true)),
+    return /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-open-btn"), isOpen), "".concat(prefixCls, "-close-btn"), !isOpen), "".concat(prefixCls, "-display-btn"), true)),
+      "aria-expanded": isOpen,
+      "aria-label": isOpen ? String(hiddenText) : String(openText),
       onClick: function onClick() {
         return setIsOpen(!isOpen);
       },
       children: [/*#__PURE__*/_jsx("span", {
-        className: classnames(_defineProperty({}, "".concat(prefix, "-display-text"), true)),
+        className: classnames(_defineProperty({}, "".concat(prefixCls, "-display-text"), true)),
         children: isOpen ? hiddenText : openText
-      }), isOpen ? hiddenIcon : openIcon]
+      }), /*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: isOpen ? hiddenIcon : openIcon
+      })]
     });
   };
   useEffect(function () {
     if (isEmpty(selectedRows) || !selectedRows) setSelectedData([]);else setSelectedData(selectedRows);
   }, [selectedRows]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classnames(_defineProperty(_defineProperty({}, className, !!className), prefix, true)),
+  return wrapSSR( /*#__PURE__*/_jsxs("div", {
+    className: classnames(_defineProperty(_defineProperty({}, className, !!className), prefixCls, true)),
     style: style,
+    role: "toolbar",
+    "aria-label": typeof (locale === null || locale === void 0 ? void 0 : locale.toolbarLabel) === 'string' ? locale.toolbarLabel : undefined,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "".concat(prefix, "-header"),
+      className: "".concat(prefixCls, "-header"),
       children: [/*#__PURE__*/_jsxs(Space, {
         children: [!!alertRender ? alertRender === null || alertRender === void 0 ? void 0 : alertRender(selectedData) : /*#__PURE__*/_jsxs(Space, {
           children: [title && /*#__PURE__*/_jsx("span", {
-            className: "".concat(prefix, "-title"),
+            className: "".concat(prefixCls, "-title"),
             children: title
           }), /*#__PURE__*/_jsx("span", {
-            children: locale === null || locale === void 0 || (_locale$alertText = locale.alertText) === null || _locale$alertText === void 0 || (_locale$alertText$rep = _locale$alertText.replace) === null || _locale$alertText$rep === void 0 ? void 0 : _locale$alertText$rep.call(_locale$alertText, /\$\{\}/, (selectedData === null || selectedData === void 0 ? void 0 : selectedData.length) || 0)
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: locale === null || locale === void 0 || (_locale$alertText = locale.alertText) === null || _locale$alertText === void 0 || (_locale$alertText$rep = _locale$alertText.replace) === null || _locale$alertText$rep === void 0 ? void 0 : _locale$alertText$rep.call(_locale$alertText, /\$\{\}/, String((selectedData === null || selectedData === void 0 ? void 0 : selectedData.length) || 0))
           })]
-        }), !!showCancelBtn && /*#__PURE__*/_jsx("span", {
-          className: classnames(_defineProperty({}, "".concat(prefix, "-cancel"), true)),
+        }), !!showCancelBtn && /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: classnames(_defineProperty({}, "".concat(prefixCls, "-cancel"), true)),
           onClick: function onClick() {
             return cleanSelectedRows();
           },
@@ -127,14 +143,14 @@ var BatchOperationBar = function BatchOperationBar(props) {
         })
       })]
     }), /*#__PURE__*/_jsx("div", {
-      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "-content"), true), "".concat(prefix, "-content-active"), !!isOpen), "".concat(prefix, "-content-hidden"), !isOpen)),
+      className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-content"), true), "".concat(prefixCls, "-content-active"), !!isOpen), "".concat(prefixCls, "-content-hidden"), !isOpen)),
       children: typeof content === 'function' ? content === null || content === void 0 ? void 0 : content({
         selectedRows: selectedData,
         setSelectedRows: setSelectedRows,
         cleanSelectedRows: cleanSelectedRows
       }) : content
     })]
-  });
+  }));
 };
 export default LocaleWrapper({
   componentName: 'BatchOperationBar',

package/es/BatchOperationBar/locale/en-US.d.ts

@@ -3,5 +3,6 @@ declare const _default: {
     openText: string;
     hiddenText: string;
     alertText: string;
+    toolbarLabel: string;
 };
 export default _default;

package/es/BatchOperationBar/locale/en-US.js

@@ -2,5 +2,6 @@ export default {
   cancelText: 'Deselect',
   openText: 'Expand Selected',
   hiddenText: 'Collapse Selected',
-  alertText: '${} items selected'
+  alertText: '${} items selected',
+  toolbarLabel: 'Batch actions'
 };

package/es/BatchOperationBar/locale/ja-JP.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    cancelText: string;
+    openText: string;
+    hiddenText: string;
+    alertText: string;
+    toolbarLabel: string;
+};
+export default _default;

package/es/BatchOperationBar/locale/ja-JP.js

@@ -0,0 +1,7 @@
+export default {
+  cancelText: '選択解除',
+  openText: '選択済みを展開',
+  hiddenText: '選択済みを折りたたむ',
+  alertText: '${} 件を選択しました',
+  toolbarLabel: '一括操作'
+};

package/es/BatchOperationBar/locale/zh-CN.d.ts

@@ -3,5 +3,6 @@ declare const _default: {
     openText: string;
     hiddenText: string;
     alertText: string;
+    toolbarLabel: string;
 };
 export default _default;

package/es/BatchOperationBar/locale/zh-CN.js

@@ -2,5 +2,6 @@ export default {
   cancelText: '取消选择',
   openText: '展开已选',
   hiddenText: '收起已选',
-  alertText: '已选择 ${} 项'
+  alertText: '已选择 ${} 项',
+  toolbarLabel: '批量操作'
 };

package/es/BatchOperationBar/locale/zh-TW.d.ts

@@ -3,5 +3,6 @@ declare const _default: {
     openText: string;
     hiddenText: string;
     alertText: string;
+    toolbarLabel: string;
 };
 export default _default;

package/es/BatchOperationBar/locale/zh-TW.js

@@ -2,5 +2,6 @@ export default {
   cancelText: '取消選擇',
   openText: '展開選擇',
   hiddenText: '收起已選',
-  alertText: '已選擇 ${} 項'
+  alertText: '已選擇 ${} 項',
+  toolbarLabel: '批次操作'
 };

package/es/BatchOperationBar/style/index.d.ts

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

package/es/BatchOperationBar/style/index.js

@@ -0,0 +1,56 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
+export var genBatchOperationBarStyle = function genBatchOperationBarStyle(token) {
+  var componentCls = token.componentCls,
+    colorBgBase = token.colorBgBase,
+    boxShadowSecondary = token.boxShadowSecondary,
+    fontWeightStrong = token.fontWeightStrong;
+  return _defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'fixed',
+    zIndex: 99999,
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    color: 'rgba(0, 0, 0, 1)',
+    backgroundColor: colorBgBase,
+    boxShadow: boxShadowSecondary
+  }, "".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 64,
+    margin: '0 24px'
+  }, "".concat(componentCls, "-title"), {
+    fontWeight: fontWeightStrong
+  }), "".concat(componentCls, "-cancel, ").concat(componentCls, "-display-btn"), {
+    color: token.colorPrimary,
+    cursor: 'pointer',
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
+    font: 'inherit',
+    textAlign: 'inherit'
+  }), "".concat(componentCls, "-display-text"), {
+    marginRight: 4
+  })), "".concat(componentCls, "-content"), {
+    maxHeight: 328,
+    padding: '0 24px 24px',
+    overflow: 'auto'
+  }), "".concat(componentCls, "-content-active"), {
+    maxHeight: 328,
+    transition: 'max-height 0.25s'
+  }), "".concat(componentCls, "-content-hidden"), {
+    maxHeight: 0,
+    padding: 0,
+    transition: 'max-height 0.25s'
+  }));
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('BatchOperationBar', function (token) {
+    return [genBatchOperationBarStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/Boundary/Components/Code.js

@@ -1,3 +1,4 @@
+"use client";
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children", "onClick", "code", "imageUrl", "title", "buttonText", "locale", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -7,12 +8,13 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Button } from '@oceanbase/design';
-import React, { useMemo } from 'react';
+import { Button, ConfigProvider } from '@oceanbase/design';
+import React, { useContext, useMemo } from 'react';
 import LocaleWrapper from "../../locale/LocaleWrapper";
 import { CODE_PRESET } from "../constant";
 import zhCN from "../locale/zh-CN";
 import classNames from 'classnames';
+import useStyle from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var BoundaryCode = function BoundaryCode(props) {
@@ -25,15 +27,20 @@ var BoundaryCode = function BoundaryCode(props) {
     locale = props.locale,
     className = props.className,
     restProps = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('boundary');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
   var info = useMemo(function () {
     var data = CODE_PRESET(locale);
     return data[code];
   }, [code, locale]);
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: classNames('boundary-container', 'boundary-code', "ob-boundary-".concat(code), className)
+  return wrapSSR( /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: classNames('boundary-container', 'boundary-code', "".concat(prefixCls, "-").concat(code), className)
   }, restProps), {}, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: "empty",
+      className: "boundary-empty",
       children: [/*#__PURE__*/_jsx("img", {
         src: imageUrl || info.imageUrl
       }), /*#__PURE__*/_jsx("h4", {
@@ -44,7 +51,7 @@ var BoundaryCode = function BoundaryCode(props) {
         children: buttonText || info.buttonText
       })]
     })
-  }));
+  })));
 };
 export var Code = LocaleWrapper({
   componentName: 'Boundary',