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

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

@@ -0,0 +1,3 @@
+export default {
+  navigationLabel: '页面导航'
+};

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    navigationLabel: string;
+};
+export default _default;

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

@@ -0,0 +1,3 @@
+export default {
+  navigationLabel: '頁面導航'
+};

package/es/NavMenu/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 NavMenuToken = OBToken;
+export declare const genNavMenuStyle: GenerateStyle<NavMenuToken>;
+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/NavMenu/style/index.js

@@ -0,0 +1,47 @@
+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 genNavMenuStyle = function genNavMenuStyle(token) {
+  var componentCls = token.componentCls,
+    antCls = token.antCls;
+  return _defineProperty({}, "".concat(componentCls, "-container"), {
+    marginTop: 21,
+    backgroundColor: 'transparent',
+    userSelect: 'none',
+    ul: _defineProperty(_defineProperty({
+      backgroundColor: 'transparent',
+      li: _defineProperty({
+        paddingRight: '0 !important'
+      }, "".concat(antCls, "-menu-title-content"), {
+        padding: '0 20px',
+        borderRadius: 10,
+        transition: '0.6s',
+        '&:hover': {
+          backgroundColor: '#e4e8f5'
+        }
+      })
+    }, "".concat(antCls, "-menu-item:not(").concat(antCls, "-menu-item-selected):hover"), {
+      backgroundColor: 'transparent !important'
+    }), "".concat(antCls, "-menu-item-selected"), _defineProperty(_defineProperty({
+      backgroundColor: 'transparent !important'
+    }, "".concat(antCls, "-menu-title-content"), {
+      backgroundColor: '#d7e2fc',
+      a: {
+        color: 'transparent',
+        fontFamily: 'SourceSansPro-Semibold, SourceSansPro-Regular',
+        background: 'linear-gradient(-45deg, #002bff 0%, #0080ff 100%)',
+        backgroundClip: 'text'
+      }
+    }), '&::after', {
+      display: 'none'
+    }))
+  });
+};
+export default (function (prefixCls) {
+  var useStyle = genComponentStyleHook('NavMenu', function (token) {
+    return [genNavMenuStyle(token)];
+  });
+  return useStyle(prefixCls);
+});

package/es/PageContainer/ItemRender.js

@@ -1,3 +1,4 @@
+"use client";
 import React from 'react';
 import useNavigate from "../_util/useNavigate";
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/PageContainer/index.d.ts

@@ -4,9 +4,11 @@ import React from 'react';
 export type ReloadType = boolean | IconComponentProps | React.ReactNode;
 export interface PageContainerLocale {
     reload?: string;
+    viewDocument?: string;
 }
 export type PageHeaderProps = AntPageHeaderProps & {
     reload?: ReloadType;
+    document?: string | React.MouseEventHandler<HTMLAnchorElement> | React.ReactNode;
 };
 export interface PageContainerProps extends AntPageContainerProps {
     header?: PageHeaderProps;

package/es/PageContainer/index.js

@@ -1,38 +1,83 @@
+"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 = ["prefixCls", "className", "title", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale", "loading"];
+var _excluded = ["prefixCls", "className", "title", "subTitle", "onBack", "backIcon", "breadcrumb", "extra", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale", "loading"];
 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; }
 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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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; }
 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 { useUniqueInlineId } from '@inline-svg-unique-id/react';
 import { ArrowLeftOutlined, SyncOutlined } from '@oceanbase/icons';
 import { PageContainer as AntPageContainer } from '@ant-design/pro-components';
 import classNames from 'classnames';
 import { isObject } from 'lodash';
-import React, { useContext } from 'react';
-import { Button, ConfigProvider, Space, Tooltip, theme } from '@oceanbase/design';
+import React, { useContext, useEffect, useState } from 'react';
+import { Button, ConfigProvider, Divider, Space, Tooltip, theme } from '@oceanbase/design';
+import { useSize } from 'ahooks';
 import LocaleWrapper from "../locale/LocaleWrapper";
+import zhCN from "./locale/zh-CN";
 import ItemRender from "./ItemRender";
 import PageLoading from "../PageLoading";
-import zhCN from "./locale/zh-CN";
 import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var PageContainer = function PageContainer(_ref) {
-  var customizePrefixCls = _ref.prefixCls,
-    className = _ref.className,
-    title = _ref.title,
-    header = _ref.header,
-    content = _ref.content,
-    extraContent = _ref.extraContent,
-    tabList = _ref.tabList,
-    tabBarExtraContent = _ref.tabBarExtraContent,
-    footerToolBarProps = _ref.footerToolBarProps,
-    locale = _ref.locale,
-    loading = _ref.loading,
-    restProps = _objectWithoutProperties(_ref, _excluded);
+var DocumentIcon = function DocumentIcon(_ref) {
+  var className = _ref.className;
+  var _id = useUniqueInlineId();
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className,
+    children: [/*#__PURE__*/_jsx("g", {
+      clipPath: "url(#".concat(_id, ")"),
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M7.99992 4.66667C7.99992 3.95942 7.71897 3.28115 7.21887 2.78105C6.71877 2.28095 6.0405 2 5.33325 2H1.33325V12H5.99992C6.53035 12 7.03906 12.2107 7.41413 12.5858C7.78921 12.9609 7.99992 13.4696 7.99992 14M7.99992 4.66667V14M7.99992 4.66667C7.99992 3.95942 8.28087 3.28115 8.78097 2.78105C9.28106 2.28095 9.95934 2 10.6666 2H14.6666V12H9.99992C9.46949 12 8.96078 12.2107 8.5857 12.5858C8.21063 12.9609 7.99992 13.4696 7.99992 14",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    }), /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
+        id: _id,
+        children: /*#__PURE__*/_jsx("rect", {
+          width: "16",
+          height: "16",
+          fill: "white"
+        })
+      })
+    })]
+  });
+};
+var PageContainer = function PageContainer(_ref2) {
+  var _restProps$style;
+  var customizePrefixCls = _ref2.prefixCls,
+    className = _ref2.className,
+    titleProp = _ref2.title,
+    subTitleProp = _ref2.subTitle,
+    onBackProp = _ref2.onBack,
+    backIconProp = _ref2.backIcon,
+    breadcrumbProp = _ref2.breadcrumb,
+    extraProp = _ref2.extra,
+    header = _ref2.header,
+    content = _ref2.content,
+    extraContent = _ref2.extraContent,
+    tabList = _ref2.tabList,
+    tabBarExtraContent = _ref2.tabBarExtraContent,
+    footerToolBarProps = _ref2.footerToolBarProps,
+    locale = _ref2.locale,
+    loading = _ref2.loading,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
   var rootPrefixCls = getPrefixCls();
@@ -41,29 +86,78 @@ var PageContainer = function PageContainer(_ref) {
     wrapSSR = _useStyle.wrapSSR;
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
-  var _ref2 = header || {},
-    reload = _ref2.reload,
-    subTitle = _ref2.subTitle,
-    breadcrumb = _ref2.breadcrumb,
-    _ref2$backIcon = _ref2.backIcon,
-    backIcon = _ref2$backIcon === void 0 ? /*#__PURE__*/_jsx(Button, {
+
+  // Avoid SSR issue: only get container element on client (e.g. Next.js)
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerEl = _useState2[0],
+    setContainerEl = _useState2[1];
+  useEffect(function () {
+    if (typeof window !== 'undefined' && window.document) {
+      setContainerEl(window.document.querySelector(".".concat(prefixCls)));
+    }
+  }, [prefixCls]);
+
+  // TODO: PageContainer should support ref to get the width of the container
+  var size = useSize(containerEl);
+  var width = size === null || size === void 0 ? void 0 : size.width;
+  var maxWidthValue = (_restProps$style = restProps.style) === null || _restProps$style === void 0 ? void 0 : _restProps$style.maxWidth;
+  var maxWidth = typeof maxWidthValue === 'number' ? maxWidthValue : maxWidthValue !== null && maxWidthValue !== void 0 && maxWidthValue.includes('px') ? parseInt(maxWidthValue) : undefined;
+  var isOverflow = width && width >= maxWidth;
+  var _ref3 = header || {},
+    reload = _ref3.reload,
+    _ref3$title = _ref3.title,
+    title = _ref3$title === void 0 ? titleProp : _ref3$title,
+    _ref3$subTitle = _ref3.subTitle,
+    subTitle = _ref3$subTitle === void 0 ? subTitleProp : _ref3$subTitle,
+    _ref3$onBack = _ref3.onBack,
+    onBack = _ref3$onBack === void 0 ? onBackProp : _ref3$onBack,
+    _ref3$backIcon = _ref3.backIcon,
+    backIcon = _ref3$backIcon === void 0 ? backIconProp || /*#__PURE__*/_jsx(Button, {
       style: {
         fontSize: token.fontSizeLG
       },
       icon: /*#__PURE__*/_jsx(ArrowLeftOutlined, {})
-    }) : _ref2$backIcon;
+    }) : _ref3$backIcon,
+    document = _ref3.document,
+    _ref3$breadcrumb = _ref3.breadcrumb,
+    breadcrumb = _ref3$breadcrumb === void 0 ? breadcrumbProp : _ref3$breadcrumb,
+    _ref3$extra = _ref3.extra,
+    extra = _ref3$extra === void 0 ? extraProp : _ref3$extra;
   var reloadProps = isObject(reload) && ! /*#__PURE__*/React.isValidElement(reload) ? reload : {};
   var reloadCls = classNames("".concat(rootPrefixCls, "-page-header-heading-reload"), reloadProps.className);
-  var newSubTitle = (reload || subTitle) && /*#__PURE__*/_jsxs(Space, {
+  var documentLink = typeof document === 'string' ? document : undefined;
+  var documentClick = typeof document === 'function' ? document : undefined;
+  var newSubTitle = (reload || subTitle || document) && /*#__PURE__*/_jsxs(Space, {
     children: [reload && /*#__PURE__*/_jsx(Tooltip, {
       title: locale.reload,
       children: isObject(reload) && /*#__PURE__*/React.isValidElement(reload) ? reload : /*#__PURE__*/_jsx(SyncOutlined, _objectSpread(_objectSpread({}, reloadProps), {}, {
         className: reloadCls
       }))
-    }), subTitle]
+    }), subTitle, document && /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx(Divider, {
+        type: "vertical",
+        className: "".concat(rootPrefixCls, "-page-header-heading-document-divider")
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: locale.viewDocument,
+        children: /*#__PURE__*/_jsx("a", {
+          href: documentLink,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: documentClick,
+          className: "".concat(rootPrefixCls, "-page-header-heading-document-icon"),
+          children: documentLink || documentClick ? /*#__PURE__*/_jsx(DocumentIcon, {
+            className: "".concat(rootPrefixCls, "-page-header-heading-document-default-icon")
+          }) : document
+        })
+      })]
+    })]
   });
-  var newHeader = header && _objectSpread(_objectSpread({}, header), {}, {
+  var newHeader = (header || title || newSubTitle || onBack || breadcrumb || extra) && _objectSpread(_objectSpread({}, header), {}, {
+    title: title,
     subTitle: newSubTitle,
+    onBack: onBack,
+    backIcon: backIcon,
     breadcrumb: breadcrumb && _objectSpread({
       itemRender: function itemRender(route, params, routes, paths) {
         return /*#__PURE__*/_jsx(ItemRender, {
@@ -74,12 +168,12 @@ var PageContainer = function PageContainer(_ref) {
         });
       }
     }, breadcrumb),
-    backIcon: backIcon
+    extra: extra
   });
-  var noHasHeader = !title && ['title', 'subTitle', 'extra', 'tags', 'avatar', 'backIcon', 'breadcrumb'].every(function (item) {
+  var noHasHeader = ['title', 'subTitle', 'onBack', 'breadcrumb', 'extra', 'tags', 'avatar'].every(function (item) {
     return !(newHeader !== null && newHeader !== void 0 && newHeader[item]);
   }) && !content && !extraContent && !tabList && !tabBarExtraContent;
-  var pageContainerCls = classNames(_defineProperty({}, "".concat(prefixCls, "-no-page-header"), noHasHeader), className);
+  var pageContainerCls = classNames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-no-page-header"), noHasHeader), "".concat(prefixCls, "-max-width"), isOverflow), className);
   return wrapSSR( /*#__PURE__*/_jsx(AntPageContainer, _objectSpread({
     prefixCls: customizePrefixCls,
     className: pageContainerCls,

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

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
 export default {
-  reload: 'Reload'
+  reload: 'Reload',
+  viewDocument: 'View Document'
 };

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    reload: string;
+    viewDocument: string;
+};
+export default _default;

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

@@ -0,0 +1,4 @@
+export default {
+  reload: '再読み込み',
+  viewDocument: 'ドキュメントを見る'
+};

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

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
 export default {
-  reload: '刷新'
+  reload: '刷新',
+  viewDocument: '查看文档'
 };

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

@@ -1,4 +1,5 @@
 declare const _default: {
     reload: string;
+    viewDocument: string;
 };
 export default _default;

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

@@ -1,3 +1,4 @@
 export default {
-  reload: '重新加載'
+  reload: '重新加載',
+  viewDocument: '查看文檔'
 };

package/es/PageContainer/style/index.js

@@ -7,55 +7,84 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 import { genFooterToolbarStyle } from "../../FooterToolbar/style";
 export var genPageContainerStyle = function genPageContainerStyle(token) {
+  var _$concat$concat$conca;
   var antCls = token.antCls,
     proComponentsCls = token.proComponentsCls,
     componentCls = token.componentCls,
     colorBgLayout = token.colorBgLayout,
     fontSizeHeading2 = token.fontSizeHeading2,
-    controlHeightLG = token.controlHeightLG,
     padding = token.padding,
     paddingLG = token.paddingLG;
-  return _objectSpread(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
+  return _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
     minHeight: '100vh',
     backgroundColor: colorBgLayout
   }, "".concat(proComponentsCls, "-grid-content"), {
     minHeight: 'auto'
-  }), "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  }), "".concat(antCls, "-page-header").concat(componentCls, "-warp-page-header, ").concat(antCls, "-page-header").concat(componentCls, "-wrap-page-header"), (_$concat$concat$conca = {
     // 减小内容区左右两侧间距
-    paddingInlineStart: "".concat(paddingLG, "px !important"),
-    paddingInlineEnd: "".concat(paddingLG, "px !important"),
-    paddingBlockStart: "".concat(padding, "px !important"),
-    paddingBlockEnd: "".concat(padding, "px !important")
-  }, "".concat(antCls, "-page-header-breadcrumb"), {
+    paddingInlineStart: "".concat(token.paddingXL, "px"),
+    paddingInlineEnd: "".concat(token.paddingXL, "px"),
+    paddingBlockStart: "".concat(paddingLG, "px"),
+    paddingBlockEnd: "".concat(padding, "px")
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat$concat$conca, "".concat(antCls, "-page-header-breadcrumb"), {
     // overwritten pro-components style
     paddingBlockStart: 0
   }), "".concat(antCls, "-page-header-heading"), {
     paddingBlockStart: 0
   }), "".concat(antCls, "-page-header-heading-title"), {
     fontSize: fontSizeHeading2,
+    fontWeight: token.fontWeightStrong,
     marginInlineEnd: token.marginXS
+  }), "".concat(antCls, "-page-header-heading-sub-title"), {
+    fontSize: token.fontSize
   }), "".concat(antCls, "-page-header-heading-reload"), {
     cursor: 'pointer',
     fontSize: token.fontSizeLG,
     marginTop: token.marginXXS
+  }), "".concat(antCls, "-page-header-heading-document-divider"), {
+    marginInline: 0,
+    height: token.size
+  }), "".concat(antCls, "-page-header-heading-document-icon"), {
+    display: 'inline-block',
+    color: token.colorIcon,
+    fontSize: token.fontSizeLG,
+    cursor: 'pointer',
+    '&:hover': {
+      color: token.colorLinkHover
+    },
+    '&:active': {
+      color: token.colorLinkActive
+    }
+  }), "".concat(antCls, "-page-header-heading-document-default-icon"), {
+    marginBottom: -3
   }), "".concat(antCls, "-page-header-heading-left"), {
     marginBlock: 0
   }), "".concat(antCls, "-page-header-heading-extra"), {
     marginBlock: 0
-  }), "".concat(antCls, "-page-header-footer"), {
+  }), _defineProperty(_$concat$concat$conca, "".concat(antCls, "-page-header-footer"), _defineProperty({
     marginBlockStart: 0
-  })), "".concat(componentCls, "-children-container"), _defineProperty({
-    paddingInline: paddingLG,
+  }, "".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary)
+  })))), "".concat(componentCls, "-children-container"), _defineProperty(_defineProperty({
+    paddingInline: token.paddingXL,
     paddingBlockStart: 0,
-    paddingBlockEnd: paddingLG
+    paddingBlockEnd: padding
   }, "& > ".concat(antCls, "-tabs-top:not(").concat(antCls, "-tabs-card):first-child"), {
     // equal to page header paddingBlockEnd
     marginTop: -padding
+  }), "& > ".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary)
   }))), "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
     paddingBlockStart: paddingLG
   })), "".concat(componentCls, "-with-footer "), {
     paddingBottom: 64
-  }), genFooterToolbarStyle(_objectSpread(_objectSpread({}, token), {}, {
+  }), "".concat(componentCls, ":not(").concat(componentCls, "-max-width)"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), _defineProperty({}, "".concat(antCls, "-page-header-footer"), _defineProperty({}, "".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    left: -token.paddingXL,
+    right: -token.paddingXL
+  }))), "".concat(componentCls, "-children-container"), _defineProperty({}, "& > ".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    left: -token.paddingXL,
+    right: -token.paddingXL
+  }))), genFooterToolbarStyle(_objectSpread(_objectSpread({}, token), {}, {
     componentCls: "".concat(proComponentsCls, "-footer-bar")
   })));
 };

package/es/PageLoading/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); }
 var _excluded = ["prefixCls", "style", "matchWrapperHeight"];
 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; }

package/es/Password/Content.d.ts

@@ -10,5 +10,7 @@ declare const Content: React.FC<{
     isValidating: boolean;
     value?: string;
     isTouched: boolean;
+    rulesRegionId?: string;
+    rulesAriaLabel?: string;
 }>;
 export default Content;

package/es/Password/Content.js

@@ -1,3 +1,4 @@
+"use client";
 import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined } from '@oceanbase/icons';
 import { Progress, Space } from '@oceanbase/design';
 import React from 'react';
@@ -9,7 +10,9 @@ var Content = function Content(_ref) {
     fieldError = _ref.fieldError,
     isValidating = _ref.isValidating,
     value = _ref.value,
-    isTouched = _ref.isTouched;
+    isTouched = _ref.isTouched,
+    rulesRegionId = _ref.rulesRegionId,
+    rulesAriaLabel = _ref.rulesAriaLabel;
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
   var statusIconMap = {
@@ -57,10 +60,14 @@ var Content = function Content(_ref) {
     strokeColor = token.colorSuccess;
   }
   return /*#__PURE__*/_jsxs("div", {
+    id: rulesRegionId,
+    role: "region",
+    "aria-label": rulesAriaLabel,
     children: [/*#__PURE__*/_jsx(Progress, {
       percent: value ? percent : 0,
       strokeColor: strokeColor,
-      showInfo: false
+      showInfo: false,
+      "aria-hidden": true
     }), /*#__PURE__*/_jsx("ul", {
       style: {
         margin: 0,
@@ -89,7 +96,9 @@ var Content = function Content(_ref) {
             children: /*#__PURE__*/_jsxs(Space, {
               size: status === 'wait' ? 14 : 8,
               align: "start",
-              children: [isValidating ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : statusIconMap[status], /*#__PURE__*/_jsx("span", {
+              children: [isValidating ? /*#__PURE__*/_jsx(LoadingOutlined, {
+                "aria-hidden": true
+              }) : statusIconMap[status], /*#__PURE__*/_jsx("span", {
                 children: rule.message
               })]
             })

package/es/Password/index.d.ts

@@ -11,6 +11,7 @@ export interface PasswordLocale {
     pleaseRememberYourPassword: string;
     copySuccessfully: string;
     copyPassword: string;
+    passwordStrengthRules: string;
 }
 export interface PasswordProps extends LocaleWrapperProps, Omit<InputPasswordProps, 'onChange'> {
     value?: string;

package/es/Password/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); }
 var _excluded = ["value", "locale", "rules", "onChange", "generatePassword", "onValidate", "generatePasswordRegex"];
 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; }
@@ -15,7 +16,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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, Input, Popover, Space, Typography } from '@oceanbase/design';
 import RandExp from 'randexp';
-import React, { useState } from 'react';
+import React, { useId, useState } from 'react';
 import { theme } from '@oceanbase/design';
 import { CheckOutlined, CopyOutlined } from '@oceanbase/icons';
 import LocaleWrapper from "../locale/LocaleWrapper";
@@ -47,10 +48,7 @@ var Password = function Password(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isTouched = _useState6[0],
     setIsTouched = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    copyHover = _useState8[0],
-    setCopyHover = _useState8[1];
+  var strengthRulesId = useId();
   var defaultRules = [{
     validate: function validate(val) {
       return (val === null || val === void 0 ? void 0 : val.length) >= 8 && (val === null || val === void 0 ? void 0 : val.length) <= 32;
@@ -110,14 +108,16 @@ var Password = function Password(_ref) {
         // @ts-ignore
         ,
         popupAlign: {
-          offset: [48, 0]
+          offset: [16, 0]
         },
         content: /*#__PURE__*/_jsx(Content, {
           isTouched: isTouched,
           value: value,
           isValidating: isValidating,
           rules: newRules,
-          fieldError: fieldError
+          fieldError: fieldError,
+          rulesRegionId: strengthRulesId,
+          rulesAriaLabel: locale.passwordStrengthRules
         }),
         overlayStyle: {
           maxWidth: 400
@@ -128,6 +128,8 @@ var Password = function Password(_ref) {
         children: /*#__PURE__*/_jsx(Input.Password, _objectSpread({
           value: value,
           autoComplete: "new-password",
+          "aria-haspopup": "dialog",
+          "aria-describedby": strengthRulesId,
           onChange: function onChange(e) {
             var _e$target;
             handleChange(e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
@@ -149,9 +151,8 @@ var Password = function Password(_ref) {
       })]
     }), value && (fieldError === null || fieldError === void 0 ? void 0 : fieldError.length) === 0 && /*#__PURE__*/_jsxs("div", {
       style: {
-        fontSize: 14,
-        color: token.colorTextTertiary,
-        lineHeight: '22px',
+        fontSize: token.fontSizeSM,
+        color: token.colorTextDescription,
         marginTop: token.marginXXS
       },
       children: [locale.pleaseRememberYourPassword, /*#__PURE__*/_jsx(Typography.Text, {
@@ -159,19 +160,23 @@ var Password = function Password(_ref) {
           text: value,
           icon: [/*#__PURE__*/_jsxs(Space, {
             size: token.marginXXS,
-            children: [/*#__PURE__*/_jsx(CopyOutlined, {}), /*#__PURE__*/_jsx("a", {
+            children: [/*#__PURE__*/_jsx(CopyOutlined, {
+              "aria-hidden": true
+            }), /*#__PURE__*/_jsx("a", {
               children: locale.copyPassword
             })]
           }, "copy"), /*#__PURE__*/_jsxs(Space, {
             size: token.marginXXS,
-            children: [/*#__PURE__*/_jsx(CheckOutlined, {}), /*#__PURE__*/_jsx("a", {
+            children: [/*#__PURE__*/_jsx(CheckOutlined, {
+              "aria-hidden": true
+            }), /*#__PURE__*/_jsx("a", {
               children: locale.copyPassword
             })]
           }, "copy-success")],
-          tooltips: ['', locale.copySuccessfully]
+          tooltips: [locale.copyPassword, locale.copySuccessfully]
         },
         style: {
-          marginLeft: token.marginXS
+          marginLeft: token.marginXXS
         }
       })]
     })]

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

@@ -8,5 +8,6 @@ declare const _default: {
     pleaseRememberYourPassword: string;
     copySuccessfully: string;
     copyPassword: string;
+    passwordStrengthRules: string;
 };
 export default _default;

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

@@ -7,5 +7,6 @@ export default {
   randomlyGenerate: 'Randomly generate',
   pleaseRememberYourPassword: 'Please remember and keep your password.',
   copySuccessfully: 'Copied',
-  copyPassword: 'Copy Password'
+  copyPassword: 'Copy Password',
+  passwordStrengthRules: 'Password strength rules'
 };