@oceanbase/design 1.0.0-alpha.1 → 1.0.0-alpha.11

package/lib/date-picker/index.js

@@ -1,23 +1,17 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/date-picker/index.ts
-var date_picker_exports = {};
-module.exports = __toCommonJS(date_picker_exports);
-__reExport(date_picker_exports, require("antd/es/date-picker"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/date-picker")
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _datePicker = require("antd/es/date-picker");
+Object.keys(_datePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _datePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _datePicker[key];
+    }
+  });
+});
+"use client";

package/lib/descriptions/Item.js

@@ -1,26 +1,8 @@
-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);
+"use strict";
 
-// src/descriptions/Item.ts
-var Item_exports = {};
-__export(Item_exports, {
-  default: () => Item_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Item_exports);
-var import_antd = require("antd");
-var Item_default = import_antd.Descriptions.Item;
+exports.default = void 0;
+var _antd = require("antd");
+var _default = exports.default = _antd.Descriptions.Item;

package/lib/descriptions/hooks/useItems.d.ts

@@ -3,7 +3,11 @@ import type { DescriptionsItemType } from '..';
 export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
     children: string | number | boolean | Iterable<React.ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element;
     key?: React.Key;
+    style?: React.CSSProperties;
     label?: React.ReactNode;
+    className?: string;
+    classNames?: Partial<Record<"content" | "label", string>>;
+    styles?: Partial<Record<"content" | "label", React.CSSProperties>>;
     span?: number | "filled" | {
         xxl?: number;
         xl?: number;
@@ -12,10 +16,6 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
         sm?: number;
         xs?: number;
     };
-    style?: React.CSSProperties;
-    className?: string;
-    classNames?: Partial<Record<"label" | "content", string>>;
-    styles?: Partial<Record<"label" | "content", React.CSSProperties>>;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];

package/lib/descriptions/hooks/useItems.js

@@ -1,95 +1,73 @@
-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);
+"use strict";
 
-// src/descriptions/hooks/useItems.tsx
-var useItems_exports = {};
-__export(useItems_exports, {
-  default: () => useItems
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(useItems_exports);
-var import_react = __toESM(require("react"));
-var import_warning = __toESM(require("antd/es/_util/warning"));
-var import_toArray = __toESM(require("rc-util/lib/Children/toArray"));
-var import_typography = __toESM(require("../../typography"));
-var import_getEllipsisConfig = require("../../_util/getEllipsisConfig");
-var children2Items = (children) => {
-  const childrenItems = (0, import_toArray.default)(children).map((node) => {
-    if (import_react.default.isValidElement(node)) {
-      const { key, props } = node;
-      return {
+exports.default = useItems;
+var _react = _interopRequireDefault(require("react"));
+var _warning = _interopRequireDefault(require("antd/es/_util/warning"));
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+var _typography = _interopRequireDefault(require("../../typography"));
+var _getEllipsisConfig = require("../../_util/getEllipsisConfig");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client"; // Convert children into items
+const children2Items = children => {
+  const childrenItems = (0, _toArray.default)(children).map(node => {
+    if ( /*#__PURE__*/_react.default.isValidElement(node)) {
+      const {
         key,
+        props
+      } = node;
+      return {
+        key: key,
         ...props
       };
     }
     return null;
-  }).filter((node) => !!node);
+  }).filter(node => !!node);
   return childrenItems;
 };
 function convertItem(props, bordered) {
-  const { children: itemChildren, contentProps, ...restItemProps } = props;
-  const itemChildrenType = itemChildren == null ? void 0 : itemChildren.type;
+  const {
+    children: itemChildren,
+    contentProps,
+    ...restItemProps
+  } = props;
+  const itemChildrenType = itemChildren?.type;
   const defaultEllipsis = {
     tooltip: {
-      placement: "topLeft",
+      placement: 'topLeft',
       title: itemChildren
     }
   };
-  const { ellipsis = defaultEllipsis, editable, ...restContentProps } = contentProps || {};
+  const {
+    ellipsis = defaultEllipsis,
+    editable,
+    ...restContentProps
+  } = contentProps || {};
   return {
     ...restItemProps,
     // 无边框并且子元素非 Typography 时外面包一层 Typography.Text，以实现自动省略
-    children: bordered || (itemChildrenType == null ? void 0 : itemChildrenType.__ANT_TYPOGRAPHY) ? itemChildren : /* @__PURE__ */ import_react.default.createElement(
-      import_typography.default.Text,
-      {
-        ...restContentProps,
-        ellipsis: (0, import_getEllipsisConfig.getEllipsisConfig)(ellipsis, itemChildren),
-        editable: (
-          // disable autoSize by default to avoid over height
-          typeof editable === "object" ? {
-            autoSize: false,
-            ...editable
-          } : editable === true ? {
-            autoSize: false
-          } : editable
-        )
-      },
-      itemChildren
-    )
+    children: bordered || itemChildrenType?.__ANT_TYPOGRAPHY ? itemChildren : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.default.Text, {
+      ...restContentProps,
+      ellipsis: (0, _getEllipsisConfig.getEllipsisConfig)(ellipsis, itemChildren),
+      editable:
+      // disable autoSize by default to avoid over height
+      typeof editable === 'object' ? {
+        autoSize: false,
+        ...editable
+      } : editable === true ? {
+        autoSize: false
+      } : editable,
+      children: itemChildren
+    })
   };
 }
 function useItems(items, children, bordered) {
   if (items) {
-    return items.map((item) => convertItem(item, bordered));
+    return items.map(item => convertItem(item, bordered));
   }
-  (0, import_warning.default)(
-    !children,
-    "Descriptions",
-    "Descriptions.Item is deprecated. Please use `items` directly."
-  );
-  return children2Items(children).map((item) => convertItem(item, bordered));
-}
+  (0, _warning.default)(!children, 'Descriptions', 'Descriptions.Item is deprecated. Please use `items` directly.');
+  return children2Items(children).map(item => convertItem(item, bordered));
+}

package/lib/descriptions/index.d.ts

@@ -9,6 +9,16 @@ export interface DescriptionsItemType extends AntDescriptionsItemType {
 }
 export interface DescriptionsProps extends AntDescriptionsProps {
     items?: DescriptionsItemType[];
+    /** Whether the descriptions is collapsible */
+    collapsible?: boolean;
+    /** Whether the descriptions is collapsed (controlled mode) */
+    collapsed?: boolean;
+    /** Default collapsed state (uncontrolled mode) */
+    defaultCollapsed?: boolean;
+    /** Callback when collapsed state changes */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Content alignment, when set to 'left', all content values will be aligned to the left based on the longest label width */
+    contentAlign?: 'left';
 }
 type CompoundedComponent = React.FC<DescriptionsProps> & {
     Item: typeof DescriptionsItem;

package/lib/descriptions/index.js

@@ -1,86 +1,116 @@
-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 __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);
+"use strict";
 
-// src/descriptions/index.tsx
-var descriptions_exports = {};
-__export(descriptions_exports, {
-  default: () => descriptions_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(descriptions_exports);
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_config_provider = __toESM(require("../config-provider"));
-var import_Item = __toESM(require("./Item"));
-var import_useItems = __toESM(require("./hooks/useItems"));
-var import_style = __toESM(require("./style"));
-__reExport(descriptions_exports, require("antd/es/descriptions"), module.exports);
-var Descriptions = ({
+var _exportNames = {};
+exports.default = void 0;
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@oceanbase/icons");
+var _configProvider = _interopRequireDefault(require("../config-provider"));
+var _theme = _interopRequireDefault(require("../theme"));
+var _Item = _interopRequireDefault(require("./Item"));
+var _useItems = _interopRequireDefault(require("./hooks/useItems"));
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _descriptions = require("antd/es/descriptions");
+Object.keys(_descriptions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _descriptions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _descriptions[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client";
+const Descriptions = ({
   children,
   bordered,
-  layout = "horizontal",
-  colon = layout === "vertical" ? false : void 0,
+  layout = 'horizontal',
+  colon = layout === 'vertical' ? false : undefined,
   items,
+  title,
   prefixCls: customizePrefixCls,
   className,
+  column = 3,
+  collapsible,
+  collapsed: outerCollapsed,
+  defaultCollapsed,
+  onCollapse,
+  contentAlign,
   ...restProps
 }) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const prefixCls = getPrefixCls("descriptions", customizePrefixCls);
-  const typographyPrefixCls = getPrefixCls("typography", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls, typographyPrefixCls);
-  const descriptionsCls = (0, import_classnames.default)(className, {
-    [`${prefixCls}-vertical`]: layout === "vertical",
-    [`${prefixCls}-horizontal`]: layout === "horizontal"
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const {
+    token
+  } = _theme.default.useToken();
+  const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
+  const typographyPrefixCls = getPrefixCls('typography', customizePrefixCls);
+  const [wrapCSSVar] = (0, _style.default)(prefixCls, typographyPrefixCls);
+  const [internalCollapsed, setInternalCollapsed] = (0, _react.useState)(defaultCollapsed ?? false);
+  const collapsed = outerCollapsed !== undefined ? outerCollapsed : internalCollapsed;
+  const handleCollapse = (0, _react.useCallback)(() => {
+    const newCollapsed = !collapsed;
+    if (outerCollapsed === undefined) {
+      setInternalCollapsed(newCollapsed);
+    }
+    onCollapse?.(newCollapsed);
+  }, [collapsed, outerCollapsed, onCollapse]);
+  const newItems = (0, _useItems.default)(items, children, bordered);
+  const descriptionsTitle = (0, _react.useMemo)(() => {
+    if (!collapsible) {
+      return title;
+    }
+    if (!title) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${prefixCls}-title-wrapper`,
+      onClick: handleCollapse,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CaretRightFilled, {
+        className: `${prefixCls}-collapsible-icon`,
+        style: {
+          transition: `transform ${token.motionDurationMid}`,
+          transform: collapsed ? undefined : 'rotate(90deg)',
+          color: token.colorIcon,
+          marginRight: token.marginXS
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: title
+      })]
+    });
+  }, [collapsible, title, collapsed, prefixCls, token, handleCollapse]);
+  const descriptionsCls = (0, _classnames.default)(className, {
+    [`${prefixCls}-vertical`]: layout === 'vertical',
+    [`${prefixCls}-horizontal`]: layout === 'horizontal',
+    [`${prefixCls}-collapsible`]: collapsible,
+    [`${prefixCls}-collapsed`]: collapsible && collapsed,
+    [`${prefixCls}-content-align-left`]: contentAlign === 'left'
   });
-  const newItems = (0, import_useItems.default)(items, children, bordered);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Descriptions,
-      {
-        layout,
-        colon,
-        bordered,
-        items: newItems,
-        prefixCls: customizePrefixCls,
-        className: descriptionsCls,
-        ...restProps
-      }
-    )
-  );
+  return wrapCSSVar( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions, {
+    layout: layout,
+    colon: colon,
+    bordered: bordered,
+    column: column,
+    items: newItems,
+    title: descriptionsTitle,
+    prefixCls: customizePrefixCls,
+    className: descriptionsCls,
+    ...restProps
+  }));
 };
-if (process.env.NODE_ENV !== "production") {
-  Descriptions.displayName = import_antd.Descriptions.displayName;
+if (process.env.NODE_ENV !== 'production') {
+  Descriptions.displayName = _antd.Descriptions.displayName;
 }
-Descriptions.Item = import_Item.default;
-var descriptions_default = Descriptions;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/descriptions")
-});
+Descriptions.Item = _Item.default;
+var _default = exports.default = Descriptions;

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

@@ -1,15 +1,12 @@
 /// <reference types="react" />
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 import type { DescriptionsProps } from '..';
-export type DescriptionsToken = FullToken<'Alert'> & {
+export type DescriptionsToken = FullToken<'Descriptions'> & {
     typographyPrefixCls: string;
     typographyComponentCls: string;
 };
 export declare const genVerticalStyle: (size: DescriptionsProps['size'], token: Partial<DescriptionsToken>) => CSSObject;
 export declare const genDescriptionsStyle: GenerateStyle<DescriptionsToken>;
-declare const _default: (prefixCls: string, typographyPrefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, typographyPrefixCls: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;