@oceanbase/ui 0.2.22 → 0.2.24

package/es/BasicLayout/index.js

@@ -38,7 +38,7 @@ var SubMenu = Menu.SubMenu,
   Item = Menu.Item;
 var prefix = getPrefix('layout');
 var BasicLayout = function BasicLayout(_ref) {
-  var _classNames2;
+  var _classNames, _classNames2;
   var children = _ref.children,
     _ref$location = _ref.location,
     _ref$location2 = _ref$location === void 0 ? {} : _ref$location,
@@ -64,10 +64,10 @@ var BasicLayout = function BasicLayout(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('basic-layout', customizePrefixCls);
+  var prefixCls = getPrefixCls('pro-basic-layout', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
-  var basicLayoutCls = classNames(className);
+  var basicLayoutCls = classNames(prefixCls, className);
   var navigate = useNavigate();
   // 侧边栏导航是否收起
   var _useState = useState(defaultCollapsed),
@@ -254,7 +254,7 @@ var BasicLayout = function BasicLayout(_ref) {
   var siderWidth = 0;
   // 根据菜单项的配置计算侧边栏的宽度
   if (subSideMenus && menus) {
-    siderWidth = collapsed ? 104 : 192;
+    siderWidth = collapsed ? 52 * 2 : 208;
   } else if (subSideMenus && !menus) {
     siderWidth = 52;
   } else if (!subSideMenus && menus) {
@@ -267,7 +267,7 @@ var BasicLayout = function BasicLayout(_ref) {
       className: "".concat(prefix, "-banner-wrapper"),
       children: banner
     }), /*#__PURE__*/_jsx(Layout, _objectSpread(_objectSpread({
-      className: classNames(prefix, className, basicLayoutCls, _defineProperty({}, "".concat(prefix, "-with-banner"), banner))
+      className: classNames(prefix, className, basicLayoutCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "-with-banner"), banner), _defineProperty(_classNames, "".concat(prefixCls, "-sider-").concat(siderWidth), true), _classNames))
     }, restProps), {}, {
       children: /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(Header, _objectSpread({

package/es/BasicLayout/style/index.js

@@ -1,17 +1,27 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 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 genBasicLayoutStyle = function genBasicLayoutStyle(token) {
-  var _ref;
-  var proComponentsCls = token.proComponentsCls;
-  return _ref = {}, _defineProperty(_ref, "".concat(proComponentsCls, "-page-container"), {
+  var componentCls = token.componentCls,
+    proComponentsCls = token.proComponentsCls,
+    motionDurationSlow = token.motionDurationSlow;
+  var siderWidthList = [0, 52, 52 * 2, 192, 208];
+  var footerBarStyle = {};
+  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)"),
+      transition: "width ".concat(motionDurationSlow)
+    });
+  });
+  return _objectSpread(_defineProperty({}, "".concat(componentCls), _defineProperty({}, "".concat(proComponentsCls, "-page-container"), {
     // 48px is the height of BasicLayout header
     minHeight: 'calc(100vh - 48px)'
-  }), _defineProperty(_ref, "".concat(proComponentsCls, "-footer-bar"), {
-    width: "calc(100% - 192px - 24px)"
-  }), _ref;
+  })), footerBarStyle);
 };
 export default (function (prefixCls) {
   var useStyle = genComponentStyleHook('BasicLayout', function (token) {

package/es/ContentWithQuestion/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+export interface ContentWithQuestionProps {
+    content?: React.ReactNode;
+    tooltip?: any;
+    prefixIcon?: React.ReactNode | boolean;
+    suffixIcon?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.SyntheticEvent) => void;
+}
+declare const ContentWithQuestion: React.FC<ContentWithQuestionProps>;
+export default ContentWithQuestion;

package/es/ContentWithQuestion/index.js

@@ -0,0 +1,56 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["content", "tooltip", "prefixIcon", "suffixIcon", "className", "children"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+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); }
+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 { QuestionCircleOutlined } from '@oceanbase/icons';
+import { Space, Tooltip } from '@oceanbase/design';
+import classNames from 'classnames';
+import React, { isValidElement } from 'react';
+import { getPrefix } from "../_util";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var prefix = getPrefix('content-with-question');
+var ContentWithQuestion = function ContentWithQuestion(_ref) {
+  var _classNames;
+  var content = _ref.content,
+    tooltip = _ref.tooltip,
+    _ref$prefixIcon = _ref.prefixIcon,
+    prefixIcon = _ref$prefixIcon === void 0 ? null : _ref$prefixIcon,
+    _ref$suffixIcon = _ref.suffixIcon,
+    suffixIcon = _ref$suffixIcon === void 0 ? /*#__PURE__*/_jsx(QuestionCircleOutlined, {
+      className: "".concat(prefix, "-help")
+    }) : _ref$suffixIcon,
+    className = _ref.className,
+    children = _ref.children,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // FIXME: antd 已经废弃 icon type 的用法，该组件也需要做相应处理，后面将会是传入 Icon 的形式而非 type
+  var getIcon = function getIcon(iconConfig) {
+    return iconConfig ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltip), {}, {
+      children: /*#__PURE__*/isValidElement(iconConfig) ? iconConfig : /*#__PURE__*/_jsx(QuestionCircleOutlined, {
+        className: "".concat(prefix, "-help")
+      })
+    })) : null;
+  };
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "-item"), true), _defineProperty(_classNames, className, !!className), _classNames))
+  }, restProps), {}, {
+    children: /*#__PURE__*/_jsxs(Space, {
+      children: [getIcon(prefixIcon === true ? /*#__PURE__*/_jsx(QuestionCircleOutlined, {
+        className: "".concat(prefix, "-help"),
+        style: {
+          marginRight: 4
+        }
+      }) : prefixIcon), /*#__PURE__*/_jsx("span", {
+        "data-testid": "content",
+        children: content !== null && content !== void 0 ? content : children
+      }), getIcon(suffixIcon)]
+    })
+  }));
+};
+export default ContentWithQuestion;

package/es/ContentWithQuestion/index.less

@@ -0,0 +1,19 @@
+@prefix: ob-content-with-question;
+
+.@{prefix}-item {
+  display: inline-flex;
+  align-items: center;
+  .@{prefix}-prefix {
+    margin-right: 8px;
+  }
+  .@{prefix}-suffix {
+    margin-left: 8px;
+  }
+  .@{prefix}-help {
+    cursor: help;
+  }
+  .@{prefix}-color {
+    color: red;
+
+  }
+}

package/es/Highlight/index.d.ts

@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "css" | "go" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "bash" | "json" | "java" | "go" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity" | "tsx" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/es/PageContainer/index.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["prefixCls", "className", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "locale"];
+var _excluded = ["prefixCls", "className", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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; }
@@ -27,6 +27,7 @@ var PageContainer = function PageContainer(_ref) {
     extraContent = _ref.extraContent,
     tabList = _ref.tabList,
     tabBarExtraContent = _ref.tabBarExtraContent,
+    footerToolBarProps = _ref.footerToolBarProps,
     locale = _ref.locale,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(ConfigProvider.ConfigContext),
@@ -41,7 +42,7 @@ var PageContainer = function PageContainer(_ref) {
     breadcrumb = _ref2.breadcrumb;
   var reloadProps = isObject(reload) && ! /*#__PURE__*/React.isValidElement(reload) ? reload : {};
   var reloadCls = classNames("".concat(rootPrefixCls, "-page-header-heading-reload"), reloadProps.className);
-  var newSubTitle = subTitle && /*#__PURE__*/_jsxs(Space, {
+  var newSubTitle = (reload || subTitle) && /*#__PURE__*/_jsxs(Space, {
     size: 12,
     children: [reload && /*#__PURE__*/_jsx(Tooltip, {
       title: locale.reload,
@@ -63,7 +64,7 @@ var PageContainer = function PageContainer(_ref) {
       }
     }, breadcrumb)
   });
-  var noHasHeader = ['title', 'subTitle', 'extra', 'tags', 'footer', 'avatar', 'backIcon', 'breadcrumb'].every(function (item) {
+  var noHasHeader = ['title', 'subTitle', 'extra', 'tags', 'avatar', 'backIcon', 'breadcrumb'].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);
@@ -74,7 +75,11 @@ var PageContainer = function PageContainer(_ref) {
     content: content,
     extraContent: extraContent,
     tabList: tabList,
-    tabBarExtraContent: tabBarExtraContent
+    tabBarExtraContent: tabBarExtraContent,
+    footerToolBarProps: _objectSpread(_objectSpread({}, footerToolBarProps), {}, {
+      // render footer as same level with PageContainer instead of under body
+      portalDom: false
+    })
   }, restProps)));
 };
 export default LocaleWrapper({

package/es/PageContainer/style/index.js

@@ -24,7 +24,8 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
   }, _defineProperty(_$concat3, "".concat(proComponentsCls, "-grid-content"), {
     minHeight: 'auto'
   }), _defineProperty(_$concat3, "".concat(antCls, "-page-header"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(antCls, "-page-header-breadcrumb"), {
-    marginBottom: 6
+    // overwritten pro-components style
+    paddingBlockStart: 0
   }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-title"), {
     fontSize: fontSizeHeading3
   }), _defineProperty(_$concat2, "".concat(antCls, "-page-header-heading-reload"), {
@@ -44,8 +45,10 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
   }), _$concat)), _defineProperty(_$concat2, "".concat(antCls, "-page-header-footer"), {
     marginBlockStart: 0
   }), _$concat2)), _defineProperty(_$concat3, "".concat(componentCls, "-warp-page-header"), {
-    paddingInline: "".concat(paddingLG, "px !important"),
-    paddingBlock: "".concat(padding, "px !important")
+    paddingInlineStart: paddingLG,
+    paddingInlineEnd: paddingLG,
+    paddingBlockStart: padding,
+    paddingBlockEnd: padding
   }), _defineProperty(_$concat3, "".concat(componentCls, "-children-container"), {
     paddingInline: paddingLG,
     paddingBlockStart: 0,

package/es/Ranger/QuickPicker.d.ts

@@ -2,7 +2,7 @@ import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 import type { RangeValue } from './Ranger';
 import type { RangeOption } from './typing';
 export type QuickType = 'select' | 'dropdown';
-interface IProps extends LocaleWrapperProps {
+interface QuickPickerProps extends LocaleWrapperProps {
     selects: RangeOption[];
     type?: QuickType;
     onChange: (range: RangeValue) => void;
@@ -13,5 +13,5 @@ interface IProps extends LocaleWrapperProps {
     isMoment?: boolean;
     size?: 'small' | 'large' | 'middle';
 }
-declare const _default: (props: IProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const _default: (props: QuickPickerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default _default;

package/es/Ranger/index.d.ts

@@ -1,2 +1,4 @@
+export * from './QuickPicker';
+export * from './Ranger';
 declare const Ranger: any;
 export default Ranger;

package/es/Ranger/index.js

@@ -1,6 +1,8 @@
 import { LAST_MONTH, LAST_QUARTER, LAST_WEEK, LAST_YEAR, NEAR_10_MINUTES, NEAR_1_HOURS, NEAR_1_MINUTES, NEAR_20_MINUTES, NEAR_2_HOURS, NEAR_30_MINUTES, NEAR_3_HOURS, NEAR_5_MINUTES, NEAR_6_HOURS, NEXT_MONTH, NEXT_QUARTER, NEXT_WEEK, NEXT_YEAR, THIS_MONTH, THIS_QUARTER, THIS_WEEK, THIS_YEAR, TODAY, TOMORROW, YESTERDAY } from "./constant";
 import QuickPicker from "./QuickPicker";
 import InternalRanger from "./Ranger";
+export * from "./QuickPicker";
+export * from "./Ranger";
 var Ranger = InternalRanger;
 
 // 内置 ranges

package/es/TreeSearch/index.d.ts

@@ -17,7 +17,7 @@ export interface TreeSearchRef {
     checkAll: () => void;
     invertSelect: () => void;
 }
-interface IProps {
+interface TreeSearchProps {
     treeData: Node[];
     titleRender?: (nodeData: DataNode) => React.ReactNode;
     checkable?: boolean;
@@ -34,5 +34,5 @@ interface IProps {
     loadData?: (data: unknown) => Promise<void>;
     searchStyle?: {};
 }
-declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<TreeSearchRef>>;
+declare const _default: React.ForwardRefExoticComponent<TreeSearchProps & React.RefAttributes<TreeSearchRef>>;
 export default _default;

package/es/_util/useNavigate.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => import("packages/design/es/config-provider").NavigateFunction;
+declare const _default: () => import("../../../design/src/config-provider").NavigateFunction;
 export default _default;

package/es/index.d.ts

@@ -8,6 +8,7 @@ export { default as BasicLayout } from './BasicLayout';
 export { default as BatchOperationBar } from './BatchOperationBar';
 export { default as Boundary } from './Boundary';
 export * from './constant';
+export { default as ContentWithQuestion } from './ContentWithQuestion';
 export { default as ContentWithIcon } from './ContentWithIcon';
 export { default as Dialog } from './Dialog';
 export { default as DocDialog } from './DocDialog';

package/es/index.js

@@ -7,6 +7,7 @@ export { default as BasicLayout } from "./BasicLayout";
 export { default as BatchOperationBar } from "./BatchOperationBar";
 export { default as Boundary } from "./Boundary";
 export * from "./constant";
+export { default as ContentWithQuestion } from "./ContentWithQuestion";
 export { default as ContentWithIcon } from "./ContentWithIcon";
 export { default as Dialog } from "./Dialog";
 export { default as DocDialog } from "./DocDialog";

package/lib/BasicLayout/index.js

@@ -71,9 +71,9 @@ var BasicLayout = ({
   ...restProps
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_design2.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("basic-layout", customizePrefixCls);
+  const prefixCls = getPrefixCls("pro-basic-layout", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const basicLayoutCls = (0, import_classnames.default)(className);
+  const basicLayoutCls = (0, import_classnames.default)(prefixCls, className);
   const navigate = (0, import_useNavigate.default)();
   const [collapsed, setCollapsed] = (0, import_react.useState)(defaultCollapsed);
   const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(defaultSelectedKeys);
@@ -233,7 +233,7 @@ var BasicLayout = ({
   };
   let siderWidth = 0;
   if (subSideMenus && menus) {
-    siderWidth = collapsed ? 104 : 192;
+    siderWidth = collapsed ? 52 * 2 : 208;
   } else if (subSideMenus && !menus) {
     siderWidth = 52;
   } else if (!subSideMenus && menus) {
@@ -246,7 +246,8 @@ var BasicLayout = ({
       import_design2.Layout,
       {
         className: (0, import_classnames.default)(prefix, className, basicLayoutCls, {
-          [`${prefix}-with-banner`]: banner
+          [`${prefix}-with-banner`]: banner,
+          [`${prefixCls}-sider-${siderWidth}`]: true
         }),
         ...restProps
       },

package/lib/BasicLayout/style/index.js

@@ -25,16 +25,27 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genBasicLayoutStyle = (token) => {
-  const { proComponentsCls } = token;
+  const { componentCls, proComponentsCls, motionDurationSlow } = token;
+  const siderWidthList = [0, 52, 52 * 2, 192, 208];
+  const footerBarStyle = {};
+  siderWidthList.forEach((width) => {
+    footerBarStyle[`${componentCls}${componentCls}-sider-${width}`] = {
+      [`${proComponentsCls}-footer-bar`]: {
+        // footer bar width adapt to sider width of BasicLayout
+        width: width === 0 ? "100%" : `calc(100% - ${width}px - 24px)`,
+        transition: `width ${motionDurationSlow}`
+      }
+    };
+  });
   return {
-    // Set style of PageContainer in BasicLayout
-    [`${proComponentsCls}-page-container`]: {
-      // 48px is the height of BasicLayout header
-      minHeight: "calc(100vh - 48px)"
+    [`${componentCls}`]: {
+      // Set style of PageContainer in BasicLayout
+      [`${proComponentsCls}-page-container`]: {
+        // 48px is the height of BasicLayout header
+        minHeight: "calc(100vh - 48px)"
+      }
     },
-    [`${proComponentsCls}-footer-bar`]: {
-      width: `calc(100% - 192px - 24px)`
-    }
+    ...footerBarStyle
   };
 };
 var style_default = (prefixCls) => {

package/lib/ContentWithQuestion/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+export interface ContentWithQuestionProps {
+    content?: React.ReactNode;
+    tooltip?: any;
+    prefixIcon?: React.ReactNode | boolean;
+    suffixIcon?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.SyntheticEvent) => void;
+}
+declare const ContentWithQuestion: React.FC<ContentWithQuestionProps>;
+export default ContentWithQuestion;

package/lib/ContentWithQuestion/index.js

@@ -0,0 +1,76 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/ContentWithQuestion/index.tsx
+var ContentWithQuestion_exports = {};
+__export(ContentWithQuestion_exports, {
+  default: () => ContentWithQuestion_default
+});
+module.exports = __toCommonJS(ContentWithQuestion_exports);
+var import_icons = require("@oceanbase/icons");
+var import_design = require("@oceanbase/design");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_util = require("../_util");
+var import_index = require("./index.less");
+var prefix = (0, import_util.getPrefix)("content-with-question");
+var ContentWithQuestion = ({
+  content,
+  tooltip,
+  prefixIcon = null,
+  suffixIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefix}-help` }),
+  className,
+  children,
+  ...restProps
+}) => {
+  const getIcon = (iconConfig) => {
+    return iconConfig ? /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { ...tooltip }, (0, import_react.isValidElement)(iconConfig) ? iconConfig : /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { className: `${prefix}-help` })) : null;
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)({
+        [`${prefix}-item`]: true,
+        [className]: !!className
+      }),
+      ...restProps
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_design.Space, null, getIcon(
+      prefixIcon === true ? /* @__PURE__ */ import_react.default.createElement(
+        import_icons.QuestionCircleOutlined,
+        {
+          className: `${prefix}-help`,
+          style: {
+            marginRight: 4
+          }
+        }
+      ) : prefixIcon
+    ), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "content" }, content ?? children), getIcon(suffixIcon))
+  );
+};
+var ContentWithQuestion_default = ContentWithQuestion;

package/lib/ContentWithQuestion/index.less

@@ -0,0 +1,19 @@
+@prefix: ob-content-with-question;
+
+.@{prefix}-item {
+  display: inline-flex;
+  align-items: center;
+  .@{prefix}-prefix {
+    margin-right: 8px;
+  }
+  .@{prefix}-suffix {
+    margin-left: 8px;
+  }
+  .@{prefix}-help {
+    cursor: help;
+  }
+  .@{prefix}-color {
+    color: red;
+
+  }
+}

package/lib/Highlight/index.d.ts

@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "css" | "go" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "java" | "json" | "bash" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/lib/PageContainer/index.js

@@ -50,6 +50,7 @@ var PageContainer = ({
   extraContent,
   tabList,
   tabBarExtraContent,
+  footerToolBarProps,
   locale,
   ...restProps
 }) => {
@@ -63,7 +64,7 @@ var PageContainer = ({
     `${rootPrefixCls}-page-header-heading-reload`,
     reloadProps.className
   );
-  const newSubTitle = subTitle && /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 12 }, reload && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
+  const newSubTitle = (reload || subTitle) && /* @__PURE__ */ import_react.default.createElement(import_design.Space, { size: 12 }, reload && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.reload }, (0, import_lodash.isObject)(reload) && import_react.default.isValidElement(reload) ? reload : /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, { ...reloadProps, className: reloadCls })), subTitle);
   const newHeader = header && {
     ...header,
     subTitle: newSubTitle,
@@ -72,7 +73,7 @@ var PageContainer = ({
       ...breadcrumb
     }
   };
-  const noHasHeader = ["title", "subTitle", "extra", "tags", "footer", "avatar", "backIcon", "breadcrumb"].every(
+  const noHasHeader = ["title", "subTitle", "extra", "tags", "avatar", "backIcon", "breadcrumb"].every(
     (item) => !(newHeader == null ? void 0 : newHeader[item])
   ) && !content && !extraContent && !tabList && !tabBarExtraContent;
   const pageContainerCls = (0, import_classnames.default)(
@@ -92,6 +93,11 @@ var PageContainer = ({
         extraContent,
         tabList,
         tabBarExtraContent,
+        footerToolBarProps: {
+          ...footerToolBarProps,
+          // render footer as same level with PageContainer instead of under body
+          portalDom: false
+        },
         ...restProps
       }
     )

package/lib/PageContainer/style/index.js

@@ -49,7 +49,8 @@ var genPageContainerStyle = (token) => {
       },
       [`${antCls}-page-header`]: {
         [`${antCls}-page-header-breadcrumb`]: {
-          marginBottom: 6
+          // overwritten pro-components style
+          paddingBlockStart: 0
         },
         [`${antCls}-page-header-heading-title`]: {
           fontSize: fontSizeHeading3
@@ -80,8 +81,10 @@ var genPageContainerStyle = (token) => {
       },
       // 减小内容区左右两侧间距
       [`${componentCls}-warp-page-header`]: {
-        paddingInline: `${paddingLG}px !important`,
-        paddingBlock: `${padding}px !important`
+        paddingInlineStart: paddingLG,
+        paddingInlineEnd: paddingLG,
+        paddingBlockStart: padding,
+        paddingBlockEnd: padding
       },
       [`${componentCls}-children-container`]: {
         paddingInline: paddingLG,

package/lib/Ranger/QuickPicker.d.ts

@@ -2,7 +2,7 @@ import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
 import type { RangeValue } from './Ranger';
 import type { RangeOption } from './typing';
 export type QuickType = 'select' | 'dropdown';
-interface IProps extends LocaleWrapperProps {
+interface QuickPickerProps extends LocaleWrapperProps {
     selects: RangeOption[];
     type?: QuickType;
     onChange: (range: RangeValue) => void;
@@ -13,5 +13,5 @@ interface IProps extends LocaleWrapperProps {
     isMoment?: boolean;
     size?: 'small' | 'large' | 'middle';
 }
-declare const _default: (props: IProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const _default: (props: QuickPickerProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default _default;

package/lib/Ranger/index.d.ts

@@ -1,2 +1,4 @@
+export * from './QuickPicker';
+export * from './Ranger';
 declare const Ranger: any;
 export default Ranger;

package/lib/Ranger/index.js

@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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-
@@ -35,6 +36,8 @@ module.exports = __toCommonJS(Ranger_exports);
 var import_constant = require("./constant");
 var import_QuickPicker = __toESM(require("./QuickPicker"));
 var import_Ranger = __toESM(require("./Ranger"));
+__reExport(Ranger_exports, require("./QuickPicker"), module.exports);
+__reExport(Ranger_exports, require("./Ranger"), module.exports);
 var Ranger = import_Ranger.default;
 Ranger.NEAR_1_MINUTES = import_constant.NEAR_1_MINUTES;
 Ranger.NEAR_5_MINUTES = import_constant.NEAR_5_MINUTES;
@@ -62,3 +65,8 @@ Ranger.LAST_YEAR = import_constant.LAST_YEAR;
 Ranger.NEXT_YEAR = import_constant.NEXT_YEAR;
 Ranger.QuickPicker = import_QuickPicker.default;
 var Ranger_default = Ranger;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./QuickPicker"),
+  ...require("./Ranger")
+});