@oceanbase/design 0.4.8 → 0.4.10

package/lib/dropdown/index.js

@@ -1,7 +1,13 @@
+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))
@@ -11,12 +17,32 @@ 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-
+  // 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/dropdown/index.ts
+// src/dropdown/index.tsx
 var dropdown_exports = {};
+__export(dropdown_exports, {
+  default: () => dropdown_default
+});
 module.exports = __toCommonJS(dropdown_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_dropdown_button = __toESM(require("./dropdown-button"));
 __reExport(dropdown_exports, require("antd/es/dropdown"), module.exports);
+var Dropdown = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { ...props });
+};
+Dropdown._InternalPanelDoNotUseOrYouWillBeFired = import_antd.Dropdown._InternalPanelDoNotUseOrYouWillBeFired;
+Dropdown.Button = import_dropdown_button.default;
+var dropdown_default = Dropdown;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("antd/es/dropdown")

package/lib/form/FormItem.d.ts

@@ -1,19 +1,24 @@
-import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactNode } from 'react';
+import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
+declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    useStatus: () => {
+        status?: "" | "success" | "error" | "warning" | "validating";
+        errors: React.ReactNode[];
+        warnings: React.ReactNode[];
+    };
+};
 export type WrapperTooltipProps = Omit<TooltipProps, 'mouseFollow'> & {
     icon?: React.ReactElement;
 };
 export type LabelTooltipType = WrapperTooltipProps | React.ReactNode;
 export interface FormItemProps extends AntFormItemProps {
     tooltip?: WrapperTooltipProps | ReactNode;
+    action?: ReactNode;
 }
-declare const FormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
-    useStatus: () => {
-        status?: "" | "success" | "error" | "warning" | "validating";
-        errors: ReactNode[];
-        warnings: ReactNode[];
-    };
+type CompoundedComponent = React.FC<FormItemProps> & {
+    useStatus: typeof AntFormItem.useStatus;
 };
+declare const FormItem: CompoundedComponent;
 export default FormItem;

package/lib/form/FormItem.js

@@ -32,13 +32,31 @@ __export(FormItem_exports, {
   default: () => FormItem_default
 });
 module.exports = __toCommonJS(FormItem_exports);
-var import_antd = require("antd");
 var import_react = __toESM(require("react"));
-var import_useTooltipTypeList = require("../tooltip/hooks/useTooltipTypeList");
+var import_antd = require("antd");
+var import_context = require("antd/es/form/context");
 var import_lodash = require("lodash");
+var import_classnames = __toESM(require("classnames"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_useTooltipTypeList = require("../tooltip/hooks/useTooltipTypeList");
+var import_style = __toESM(require("./style"));
 var AntFormItem = import_antd.Form.Item;
-var Item = ({ children, tooltip, ...restProps }) => {
+var FormItem = ({
+  children,
+  label,
+  tooltip,
+  action,
+  layout,
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
   var _a;
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("form", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const formItemCls = (0, import_classnames.default)(className);
+  const { vertical } = (0, import_react.useContext)(import_context.FormContext);
   const typeList = (0, import_useTooltipTypeList.useTooltipTypeList)();
   if (typeof tooltip === "object" && !import_react.default.isValidElement(tooltip)) {
     const { icon, type, overlayInnerStyle, ...restTooltipProps } = tooltip;
@@ -52,16 +70,20 @@ var Item = ({ children, tooltip, ...restProps }) => {
       ...restTooltipProps
     };
   }
-  return /* @__PURE__ */ import_react.default.createElement(
-    AntFormItem,
-    {
-      tooltip,
-      required: (0, import_lodash.isPlainObject)(children) && ((_a = children.type) == null ? void 0 : _a.__ANT_SWITCH) ? true : void 0,
-      ...restProps
-    },
-    children
+  return wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement(
+      AntFormItem,
+      {
+        label: action && (vertical || layout === "vertical") ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label, action && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-action` }, action)) : label,
+        tooltip,
+        required: (0, import_lodash.isPlainObject)(children) && ((_a = children.type) == null ? void 0 : _a.__ANT_SWITCH) ? true : void 0,
+        prefixCls: customizePrefixCls,
+        className: formItemCls,
+        ...restProps
+      },
+      children
+    )
   );
 };
-var FormItem = Item;
 FormItem.useStatus = AntFormItem.useStatus;
 var FormItem_default = FormItem;

package/lib/form/index.js

@@ -35,12 +35,22 @@ __export(form_exports, {
 module.exports = __toCommonJS(form_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_FormItem = __toESM(require("./FormItem"));
+var import_style = __toESM(require("./style"));
 __reExport(form_exports, require("antd/es/form"), module.exports);
-var Form = ({ hideRequiredMark, ...restProps }) => {
-  const { form: contextForm } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  return (
+var Form = ({
+  hideRequiredMark,
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
+  const { getPrefixCls, form: contextForm } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("form", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const formCls = (0, import_classnames.default)(className);
+  return wrapSSR(
     // @ts-ignore to ignore children type error
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Form,
@@ -51,6 +61,8 @@ var Form = ({ hideRequiredMark, ...restProps }) => {
         ),
         hideRequiredMark,
         preserve: false,
+        prefixCls: customizePrefixCls,
+        className: formCls,
         ...restProps
       }
     )

package/lib/form/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export type FormToken = FullToken<'Form'>;
+export declare const genFormStyle: GenerateStyle<FormToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    hashId: string;
+};
+export default _default;

package/lib/form/style/index.js

@@ -0,0 +1,52 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/form/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genFormStyle: () => genFormStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genFormStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}${componentCls}-vertical`]: {
+      [`${componentCls}-item:not(${componentCls}-item-horizontal)`]: {
+        [`${componentCls}-item-label > label`]: {
+          width: "100%",
+          [`${componentCls}-item-action`]: {
+            position: "absolute",
+            right: 0
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Form", (token) => {
+    return [genFormStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genFormStyle
+});

package/lib/index.d.ts

@@ -56,6 +56,8 @@ export { default as Segmented } from './segmented';
 export type { SegmentedProps } from './segmented';
 export { default as Breadcrumb } from './breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItemProps } from './breadcrumb';
+export { default as Dropdown } from './dropdown';
+export type { DropdownProps, DropdownButtonProps, DropdownButtonType } from './dropdown';
 export { default as Result } from './result';
 export type { ResultProps, ResultType, ResultStatusType } from './result';
 export { default as Spin } from './spin';

package/lib/index.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   ConfigProvider: () => import_config_provider.default,
   Descriptions: () => import_descriptions.default,
   Drawer: () => import_drawer.default,
+  Dropdown: () => import_dropdown.default,
   Empty: () => import_empty.default,
   Form: () => import_form.default,
   Input: () => import_input.default,
@@ -102,6 +103,7 @@ var import_slider = __toESM(require("./slider"));
 var import_tooltip = __toESM(require("./tooltip"));
 var import_segmented = __toESM(require("./segmented"));
 var import_breadcrumb = __toESM(require("./breadcrumb"));
+var import_dropdown = __toESM(require("./dropdown"));
 var import_result = __toESM(require("./result"));
 var import_spin = __toESM(require("./spin"));
 var import_badge = __toESM(require("./badge"));
@@ -122,6 +124,7 @@ var { useToken } = import_theme2.default;
   ConfigProvider,
   Descriptions,
   Drawer,
+  Dropdown,
   Empty,
   Form,
   Input,

package/lib/list/index.d.ts

@@ -1,7 +1,7 @@
 import type { ListProps } from 'antd/es/list';
 export * from 'antd/es/list';
 export * from 'antd/es/list/Item';
-declare function List<T>({ pagination, ...restProps }: ListProps<T>): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare function List<T>({ pagination, ...restProps }: ListProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 declare namespace List {
     var Item: import("antd/es/list/Item").ListItemTypeProps;
     var displayName: string;

package/lib/modal/Progress.d.ts

@@ -6,5 +6,5 @@ export interface ModalProgressProps extends ModalProps {
     progress?: ProgressProps;
     description?: React.ReactNode;
 }
-declare const Progress: ({ prefixCls: customizePrefixCls, className, width, maskClosable, loading, progress, description, footer, ...restProps }: ModalProgressProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const Progress: ({ prefixCls: customizePrefixCls, className, width, maskClosable, loading, progress, description, footer, ...restProps }: ModalProgressProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Progress;

package/lib/table/index.d.ts

@@ -17,6 +17,7 @@ export interface TableLocale extends AntTableLocale {
     };
 }
 export interface TableProps<T> extends AntTableProps<T> {
+    innerBordered?: boolean;
     columns?: ColumnsType<T>;
     cancelText?: string;
     collapseText?: string;
@@ -37,8 +38,8 @@ declare const _default: (<RecordType extends AnyObject = AnyObject>(props: Table
     SELECTION_ALL: "SELECT_ALL";
     SELECTION_INVERT: "SELECT_INVERT";
     SELECTION_NONE: "SELECT_NONE";
-    Column: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType_1>) => null;
-    ColumnGroup: <RecordType_2 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_2>) => null;
+    Column: <RecordType extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType>) => null;
+    ColumnGroup: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_1>) => null;
     Summary: typeof Summary;
     useStyle: (prefixCls: string) => {
         wrapSSR: (node: ReactNode) => ReactElement<any, string | React.JSXElementConstructor<any>>;

package/lib/table/index.js

@@ -49,6 +49,9 @@ function Table(props, ref) {
   var _a, _b;
   const {
     locale: customLocale,
+    size,
+    bordered,
+    innerBordered,
     columns,
     footer,
     pagination: customPagination,
@@ -86,7 +89,8 @@ function Table(props, ref) {
     {
       [`${prefixCls}-expandable`]: !(0, import_lodash.isEmpty)(expandable),
       [`${prefixCls}-selectable`]: !!rowSelection,
-      [`${prefixCls}-has-footer`]: !!footer
+      [`${prefixCls}-has-footer`]: !!footer,
+      [`${prefixCls}-inner-bordered`]: innerBordered
     },
     className
   );
@@ -183,6 +187,8 @@ function Table(props, ref) {
           ...restLocale,
           emptyText: /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty-wrapper` }, typeof emptyText === "function" ? emptyText() : emptyText)
         },
+        size,
+        bordered: bordered || innerBordered,
         columns: newColumns,
         rowClassName: (...args) => {
           return (0, import_classnames.default)(
@@ -193,7 +199,7 @@ function Table(props, ref) {
           );
         },
         expandable: expandable ? {
-          columnWidth: 32,
+          columnWidth: !size || size === "large" ? 40 : 32,
           ...expandable
         } : void 0,
         rowSelection: rowSelection ? {

package/lib/table/style/index.js

@@ -165,10 +165,27 @@ var genTableStyle = (token) => {
     },
     // 带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
+      [`${componentCls}-thead > tr`]: {
+        ["th"]: {
+          backgroundColor: colorFillQuaternary
+        }
+      },
       [`${componentCls}-footer`]: {
         borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
       }
     },
+    // 带边框的表格样式
+    [`${componentCls}-wrapper${componentCls}-inner-bordered ${componentCls}-bordered`]: {
+      [`${componentCls}-container`]: {
+        borderInlineStart: "none",
+        borderTop: "none",
+        [`${componentCls}-thead > tr > th, ${componentCls}-tbody > tr > td`]: {
+          ["&:last-child"]: {
+            borderInlineEnd: "none"
+          }
+        }
+      }
+    },
     // 不带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}:not(${componentCls}-bordered)`]: {
       // 单元格通用样式
@@ -227,7 +244,7 @@ var genTableStyle = (token) => {
       [`${componentCls}`]: {
         [`${componentCls}-tbody`]: {
           // 去掉斑马纹
-          [`tr:nth-child(2n):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${componentCls}-expanded-row)`]: {
+          [`tr:nth-child(n):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${componentCls}-expanded-row)`]: {
             ["& > td"]: {
               backgroundColor: colorBgBase
             },
@@ -239,8 +256,11 @@ var genTableStyle = (token) => {
           },
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
-            [`& > *:not(${componentCls}-wrapper)`]: {
+            [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {
               marginLeft: token.marginXL + token.lineWidth * 2
+            },
+            [`& > *${componentCls}-expanded-row-fixed`]: {
+              paddingLeft: token.marginXL + token.lineWidth * 2 + token.padding
             }
           },
           // 嵌套子表格和父表格第一列对齐
@@ -264,8 +284,11 @@ var genTableStyle = (token) => {
         [`${componentCls}-tbody`]: {
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
-            [`& > *:not(${componentCls}-wrapper)`]: {
+            [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {
               marginLeft: token.marginXL + token.marginXL + token.lineWidth * 2
+            },
+            [`& > *${componentCls}-expanded-row-fixed`]: {
+              paddingLeft: token.marginXL + token.marginXL + token.lineWidth * 2 + token.padding
             }
           },
           // 嵌套子表格和父表格第一列对齐

package/lib/tooltip/ReactStickyMouseTooltip.d.ts

@@ -35,6 +35,6 @@ declare class ReactStickyMouseTooltip extends React.PureComponent<ReactStickyMou
     addListener: () => void;
     removeListener: () => void;
     updateListener: () => void;
-    render(): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export default ReactStickyMouseTooltip;

package/lib/tree-select/index.d.ts

@@ -1,6 +1,6 @@
 import { TreeSelect as AntTreeSelect } from 'antd';
 import type { TreeSelectProps as AntTreeSelectProps } from 'antd/es/tree-select';
-import { TreeNode as AntTreeNode } from 'rc-tree-select';
+import type { TreeNode as AntTreeNode } from 'rc-tree-select';
 import type { BaseSelectRef } from 'rc-select';
 import React from 'react';
 export * from 'antd/es/tree-select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -41,11 +41,12 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.23.0",
     "@ctrl/tinycolor": "^4.1.0",
+    "@inline-svg-unique-id/react": "^1.2.3",
     "@oceanbase/aliyun-theme": "^0.1.6",
-    "@oceanbase/icons": "^0.4.5",
+    "@oceanbase/icons": "^0.4.6",
     "@oceanbase/util": "^0.4.2",
     "ahooks": "^2.10.14",
-    "antd": "^5.24.0",
+    "antd": "^5.24.7",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -53,17 +54,17 @@
     "rc-util": "^5.44.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/cli": "^7.27.0",
+    "@babel/preset-env": "^7.26.9",
     "antd-token-previewer": "^2.0.8",
     "rc-select": "^14.16.6",
     "rc-slider": "^11.1.8",
-    "rc-table": "^7.50.2",
+    "rc-table": "^7.50.4",
     "rc-tree-select": "^5.27.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "617efa9eb09833f74f0ab0065467b556b5b6843e"
+  "gitHead": "db83d4b1d50b50813d9751f4e8c1189badf67820"
 }