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

package/lib/BasicLayout/index.js

@@ -28,7 +28,8 @@ const {
 } = _design.Layout;
 const {
   SubMenu,
-  Item
+  Item,
+  ItemGroup
 } = _design.Menu;
 const BasicLayout = ({
   children,
@@ -49,6 +50,7 @@ const BasicLayout = ({
   subSideMenus,
   className,
   prefixCls: customizePrefixCls,
+  locale,
   ...restProps
 }) => {
   const {
@@ -103,11 +105,15 @@ const BasicLayout = ({
     let keys = [];
     (menuList || []).forEach(item => {
       const itemChildren = item.children || [];
-      const childrenKeys = itemChildren.map(child => child.link);
-      if (childrenKeys.includes(selectedKey)) {
-        keys = [...keys, item.link];
+      if (item.type === 'group') {
+        keys = [...keys, ...getParentKeys(itemChildren, selectedKey)];
       } else {
-        keys = [...keys, getParentKeys(itemChildren, selectedKey)];
+        const childrenKeys = itemChildren.map(child => child.link).filter(Boolean);
+        if (childrenKeys.includes(selectedKey)) {
+          keys = [...keys, item.link];
+        } else {
+          keys = [...keys, ...getParentKeys(itemChildren, selectedKey)];
+        }
       }
     });
     return keys;
@@ -115,13 +121,18 @@ const BasicLayout = ({
   const getFlatMenuKeys = menuList => {
     let keys = [];
     (menuList || []).forEach(item => {
-      if (item.children) {
-        keys = keys.concat(getFlatMenuKeys(item.children));
+      if (item.type === 'group') {
+        keys = keys.concat(getFlatMenuKeys(item.children || []));
+      } else {
+        if (item.children) {
+          keys = keys.concat(getFlatMenuKeys(item.children));
+        }
+        keys.push(item.link || '');
       }
-      keys.push(item.link || '');
     });
     return keys;
   };
+  const isCurrentMenuPage = link => !!link && selectedKeys[0] === link;
 
   // 渲染菜单中的图标
   const renderIcon = (item, isSubSider = false) => {
@@ -132,11 +143,16 @@ const BasicLayout = ({
 
   // 渲染菜单
   const renderMenu = data => {
-    return data.reduce((pre, item) => {
+    return data.reduce((pre, item, index) => {
       const {
         accessible = true
       } = item;
-      if (item.children && ((0, _util.isNullValue)(item.accessible) ?
+      if (item.type === 'group' && item.children?.length && accessible) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemGroup, {
+          title: item.title,
+          children: renderMenu(item.children)
+        }, item.title ?? `group-${index}`));
+      } else if (item.children && ((0, _util.isNullValue)(item.accessible) ?
       // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
       item.children?.some(({
         accessible: childAccessible = true
@@ -159,9 +175,10 @@ const BasicLayout = ({
           }),
           children: renderMenu(item.children)
         }, item.link));
-      } else if (!item.children && accessible) {
+      } else if (!item.children && accessible && item.link) {
         pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
           "data-testid": "menu.item",
+          "aria-current": isCurrentMenuPage(item.link) ? 'page' : undefined,
           onClick: () => {
             if (pathname !== item.link) {
               navigate?.(item.link);
@@ -197,11 +214,16 @@ const BasicLayout = ({
 
   // 渲染收起菜单
   const renderCollapsedMenu = (data, isSubSider = false) => {
-    return data.reduce((pre, item) => {
+    return data.reduce((pre, item, index) => {
       const {
         accessible = true
       } = item;
-      if (item.children && ((0, _util.isNullValue)(item.accessible) ?
+      if (item.type === 'group' && item.children?.length && accessible) {
+        pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemGroup, {
+          title: item.title,
+          children: renderMenu(item.children)
+        }, item.title ?? `group-${index}`));
+      } else if (item.children && ((0, _util.isNullValue)(item.accessible) ?
       // 如果子菜单本身没有设置 accessible，但只要其 children 之一可访问，则子菜单仍然展示
       item.children?.some(({
         accessible: childAccessible = true
@@ -210,9 +232,10 @@ const BasicLayout = ({
           title: renderIcon(item, isSubSider),
           children: renderMenu(item.children)
         }, item.link));
-      } else if (!item.children && accessible) {
+      } else if (!item.children && accessible && item.link) {
         pre.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
           "data-testid": "menu.item",
+          "aria-current": isCurrentMenuPage(item.link) ? 'page' : undefined,
           onClick: () => {
             if (pathname !== item.link) {
               navigate?.(item.link);
@@ -276,6 +299,8 @@ const BasicLayout = ({
                 [`${prefixCls}-sider-collapsed`]: collapsed,
                 [`${prefixCls}-sider-has-sub-sider`]: subSideMenus
               }),
+              role: "navigation",
+              "aria-label": locale?.sideNavigation,
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: `${prefixCls}-sider-wrapper`,
                 children: [subSideMenus && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -325,14 +350,20 @@ const BasicLayout = ({
                     })]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                     className: `${prefixCls}-sider-border`,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                      type: "button",
                       className: `${prefixCls}-sider-collapse`,
+                      "aria-expanded": !collapsed,
+                      "aria-label": collapsed ? locale?.expandSider : locale?.collapseSider,
                       onClick: () => {
                         setCollapsed(!collapsed);
                         // 导航展开/收起时，重置 openKeys
                         setOpenKeys([]);
                       },
-                      children: collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeftOutlined, {})
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        "aria-hidden": true,
+                        children: collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeftOutlined, {})
+                      })
                     })
                   })]
                 })]
@@ -342,7 +373,10 @@ const BasicLayout = ({
               style: {
                 marginLeft: siderWidth
               },
-              children: children
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("main", {
+                className: `${prefixCls}-content-main`,
+                children: children
+              })
             })]
           })
         })]

package/lib/BasicLayout/locale/en-US.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/lib/BasicLayout/locale/en-US.js

@@ -14,5 +14,8 @@ var _default = exports.default = {
   version: 'Version',
   releaseTime: 'Release date',
   company: 'Beijing OceanBase Technology Co., Ltd.',
-  right: 'All Rights Reserved'
+  right: 'All Rights Reserved',
+  expandSider: 'Expand main navigation',
+  collapseSider: 'Collapse main navigation',
+  sideNavigation: 'Main navigation'
 };

package/lib/BasicLayout/locale/ja-JP.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/lib/BasicLayout/locale/ja-JP.js

@@ -14,5 +14,8 @@ var _default = exports.default = {
   version: 'バージョン',
   releaseTime: 'リリース日',
   company: 'Beijing OceanBase Technology Co., Ltd.',
-  right: 'All Rights Reserved'
+  right: 'All Rights Reserved',
+  expandSider: 'メインナビを展開',
+  collapseSider: 'メインナビを折りたたむ',
+  sideNavigation: 'メインナビゲーション'
 };

package/lib/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/lib/BasicLayout/locale/zh-CN.js

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

package/lib/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/lib/BasicLayout/locale/zh-TW.js

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

package/lib/BasicLayout/style/index.js

@@ -125,6 +125,11 @@ const genBasicLayoutStyle = token => {
               borderRadius: '10px',
               cursor: 'pointer',
               opacity: 0,
+              font: 'inherit',
+              padding: 0,
+              margin: 0,
+              appearance: 'none',
+              WebkitAppearance: 'none',
               // 设置展开/收起按钮中的图标大小
               [iconCls]: {
                 fontSize: 'px',
@@ -351,6 +356,10 @@ const genBasicLayoutStyle = token => {
         [`${componentCls}-content`]: {
           backgroundColor: colorBgLayout,
           transition: 'all 0.3s'
+        },
+        [`${componentCls}-content-main`]: {
+          display: 'block',
+          minHeight: '100%'
         }
       }
     },

package/lib/BatchOperationBar/index.js

@@ -73,19 +73,25 @@ const BatchOperationBar = props => {
   };
   const disPlayBtnRender = () => {
     if (!showOpenBtn) return null;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      type: "button",
       className: (0, _classnames.default)({
         [`${prefixCls}-open-btn`]: isOpen,
         [`${prefixCls}-close-btn`]: !isOpen,
         [`${prefixCls}-display-btn`]: true
       }),
+      "aria-expanded": isOpen,
+      "aria-label": isOpen ? String(hiddenText) : String(openText),
       onClick: () => setIsOpen(!isOpen),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _classnames.default)({
           [`${prefixCls}-display-text`]: true
         }),
         children: isOpen ? hiddenText : openText
-      }), isOpen ? hiddenIcon : openIcon]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": true,
+        children: isOpen ? hiddenIcon : openIcon
+      })]
     });
   };
   (0, _react.useEffect)(() => {
@@ -97,6 +103,8 @@ const BatchOperationBar = props => {
       [prefixCls]: true
     }),
     style: style,
+    role: "toolbar",
+    "aria-label": typeof locale?.toolbarLabel === 'string' ? locale.toolbarLabel : undefined,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: `${prefixCls}-header`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Space, {
@@ -105,9 +113,12 @@ const BatchOperationBar = props => {
             className: `${prefixCls}-title`,
             children: title
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: locale?.alertText?.replace?.(/\$\{\}/, selectedData?.length || 0)
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: locale?.alertText?.replace?.(/\$\{\}/, String(selectedData?.length || 0))
           })]
-        }), !!showCancelBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        }), !!showCancelBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
           className: (0, _classnames.default)({
             [`${prefixCls}-cancel`]: true
           }),

package/lib/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/lib/BatchOperationBar/locale/en-US.js

@@ -8,5 +8,6 @@ var _default = exports.default = {
   cancelText: 'Deselect',
   openText: 'Expand Selected',
   hiddenText: 'Collapse Selected',
-  alertText: '${} items selected'
+  alertText: '${} items selected',
+  toolbarLabel: 'Batch actions'
 };

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

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

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

@@ -8,5 +8,6 @@ var _default = exports.default = {
   cancelText: '選択解除',
   openText: '選択済みを展開',
   hiddenText: '選択済みを折りたたむ',
-  alertText: '${} 件を選択しました'
+  alertText: '${} 件を選択しました',
+  toolbarLabel: '一括操作'
 };

package/lib/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/lib/BatchOperationBar/locale/zh-CN.js

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

package/lib/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/lib/BatchOperationBar/locale/zh-TW.js

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

package/lib/BatchOperationBar/style/index.js

@@ -33,7 +33,12 @@ const genBatchOperationBarStyle = token => {
         },
         [`${componentCls}-cancel, ${componentCls}-display-btn`]: {
           color: token.colorPrimary,
-          cursor: 'pointer'
+          cursor: 'pointer',
+          border: 'none',
+          background: 'transparent',
+          padding: 0,
+          font: 'inherit',
+          textAlign: 'inherit'
         },
         [`${componentCls}-display-text`]: {
           marginRight: 4

package/lib/DateRanger/Ranger.js

@@ -493,7 +493,7 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             ...(0, _lodash.omit)(rest, 'value', 'onChange', 'style', 'className', 'onClick', 'disabled', 'format')
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Radio.Group, {
+      }), (hasRewind || hasForward) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Radio.Group, {
         value: isPlay ? 'play' : '',
         className: `${prefix}-playback-control`,
         buttonStyle: "solid",
@@ -502,6 +502,7 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
           getPopupContainer: trigger => trigger.parentNode,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Radio.Button, {
             value: "stepBack",
+            "aria-label": locale.jumpBack,
             style: {
               paddingInline: 8,
               borderInlineStart: 0,
@@ -520,13 +521,16 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                 rangeChange([newStartTime, newEndTime]);
               }
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeftOutlined, {})
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeftOutlined, {
+              "aria-hidden": true
+            })
           })
         }), hasForward && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
           title: locale.jumpForward,
           getPopupContainer: trigger => trigger.parentNode,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Radio.Button, {
             value: "stepForward",
+            "aria-label": locale.jumpForward,
             style: {
               paddingInline: 8,
               borderTopLeftRadius: 0,
@@ -546,11 +550,14 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                 }
               }
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {})
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.RightOutlined, {
+              "aria-hidden": true
+            })
           })
         })]
       })]
     }), hasSync && rangeName !== _constant.CUSTOMIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+      "aria-label": locale.syncToCurrent,
       style: {
         paddingInline: 8,
         color: token.colorTextSecondary
@@ -558,8 +565,11 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       onClick: () => {
         setNow();
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SyncOutlined, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SyncOutlined, {
+        "aria-hidden": true
+      })
     }), hasZoomOut && /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Button, {
+      "aria-label": locale.zoomOutRange,
       disabled: !nextRangeItem,
       style: {
         color: token.colorTextSecondary
@@ -572,7 +582,9 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
           return;
         }
       },
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ZoomOutOutlined, {})
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ZoomOutOutlined, {
+        "aria-hidden": true
+      })
     })]
   }));
 });

package/lib/DateRanger/locale/en-US.d.ts

@@ -52,5 +52,7 @@ declare const _default: {
     current: string;
     jumpBack: string;
     jumpForward: string;
+    syncToCurrent: string;
+    zoomOutRange: string;
 };
 export default _default;

package/lib/DateRanger/locale/en-US.js

@@ -18,5 +18,7 @@ var _default = exports.default = {
   current: 'Current',
   jumpBack: 'Previous Interval',
   jumpForward: 'Next Interval',
+  syncToCurrent: 'Sync to current time',
+  zoomOutRange: 'Expand time range',
   ..._en_US.default
 };

package/lib/DateRanger/locale/ja-JP.d.ts

@@ -52,5 +52,7 @@ declare const _default: {
     current: string;
     jumpBack: string;
     jumpForward: string;
+    syncToCurrent: string;
+    zoomOutRange: string;
 };
 export default _default;

package/lib/DateRanger/locale/ja-JP.js

@@ -18,5 +18,7 @@ var _default = exports.default = {
   current: '現在',
   jumpBack: '前の期間へ',
   jumpForward: '次の期間へ',
+  syncToCurrent: '現在時刻に同期',
+  zoomOutRange: '時間範囲を拡大',
   ..._ja_JP.default
 };

package/lib/DateRanger/locale/zh-CN.d.ts

@@ -52,5 +52,7 @@ declare const _default: {
     current: string;
     jumpBack: string;
     jumpForward: string;
+    syncToCurrent: string;
+    zoomOutRange: string;
 };
 export default _default;

package/lib/DateRanger/locale/zh-CN.js

@@ -18,5 +18,7 @@ var _default = exports.default = {
   current: '当前',
   jumpBack: '向前跳转一个时间区间',
   jumpForward: '向后跳转一个时间区间',
+  syncToCurrent: '同步到当前时间',
+  zoomOutRange: '放大时间范围',
   ..._zh_CN.default
 };

package/lib/DateRanger/locale/zh-TW.d.ts

@@ -52,5 +52,7 @@ declare const _default: {
     current: string;
     jumpBack: string;
     jumpForward: string;
+    syncToCurrent: string;
+    zoomOutRange: string;
 };
 export default _default;

package/lib/DateRanger/locale/zh-TW.js

@@ -18,5 +18,7 @@ var _default = exports.default = {
   current: '當前',
   jumpBack: '向前跳轉一個時間區間',
   jumpForward: '向後跳轉一個時間區間',
+  syncToCurrent: '同步到當前時間',
+  zoomOutRange: '放大時間範圍',
   ..._zh_TW.default
 };

package/lib/Dialog/index.d.ts

@@ -3,6 +3,11 @@ import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 export interface DialogLocale {
     helpDocument: string;
     openHelpCenter: string;
+    closeDialog: string;
+    minimize: string;
+    restoreWindow: string;
+    maximize: string;
+    exitFullscreen: string;
 }
 export interface DialogExtLink {
     text?: string;