@oceanbase/design 1.0.0-alpha.8 → 1.0.0

package/lib/alert/index.js

@@ -1,97 +1,79 @@
-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);
-
-// src/alert/index.tsx
-var alert_exports = {};
-__export(alert_exports, {
-  default: () => alert_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(alert_exports);
-var import_react = require("react");
-var import_antd = require("antd");
-var import_icons = require("@oceanbase/icons");
-var import_classnames = __toESM(require("classnames"));
-var import_config_provider = __toESM(require("../config-provider"));
-var import_style = __toESM(require("./style"));
-__reExport(alert_exports, require("antd/es/alert"), module.exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var iconMapOutlined = {
-  success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleOutlined, {}),
-  info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoCircleOutlined, {}),
-  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseCircleOutlined, {}),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExclamationCircleOutlined, {})
+var _exportNames = {};
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _icons = require("@oceanbase/icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _configProvider = _interopRequireDefault(require("../config-provider"));
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _alert = require("antd/es/alert");
+Object.keys(_alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _alert[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+const iconMapOutlined = {
+  success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckCircleOutlined, {}),
+  info: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.InfoCircleOutlined, {}),
+  error: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseCircleOutlined, {}),
+  warning: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ExclamationCircleOutlined, {})
 };
-var Alert = ({
+const Alert = ({
   type: typeProp,
   showIcon = true,
   closable,
+  closeIcon,
   ghost,
   mini,
   banner,
+  action,
   prefixCls: customizePrefixCls,
   className,
   ...restProps
 }) => {
-  const type = (banner && !typeProp ? "warning" : typeProp) || "info";
-  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const prefixCls = getPrefixCls("alert", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const alertCls = (0, import_classnames.default)(
-    {
-      [`${prefixCls}-closable`]: closable,
-      [`${prefixCls}-ghost`]: ghost,
-      [`${prefixCls}-mini`]: mini
-    },
-    className
-  );
-  return wrapSSR(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_antd.Alert,
-      {
-        type,
-        showIcon,
-        closable,
-        banner,
-        icon: iconMapOutlined[type],
-        prefixCls: customizePrefixCls,
-        className: alertCls,
-        ...restProps
-      }
-    )
-  );
+  // banner exists and type is empty, use warning type by default for correct icon
+  const type = (banner && !typeProp ? 'warning' : typeProp) || 'info';
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const prefixCls = getPrefixCls('alert', customizePrefixCls);
+  const [wrapCSSVar] = (0, _style.default)(prefixCls);
+  const alertCls = (0, _classnames.default)({
+    [`${prefixCls}-closable`]: closable || closeIcon,
+    [`${prefixCls}-ghost`]: ghost,
+    [`${prefixCls}-mini`]: mini,
+    [`${prefixCls}-with-action`]: !!action
+  }, className);
+  return wrapCSSVar( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Alert, {
+    type: type,
+    showIcon: showIcon,
+    closable: closable,
+    closeIcon: closeIcon,
+    banner: banner,
+    icon: iconMapOutlined[type],
+    action: action,
+    prefixCls: customizePrefixCls,
+    className: alertCls,
+    ...restProps
+  }));
 };
-Alert.ErrorBoundary = import_antd.Alert.ErrorBoundary;
-if (process.env.NODE_ENV !== "production") {
-  Alert.displayName = import_antd.Alert.displayName;
+Alert.ErrorBoundary = _antd.Alert.ErrorBoundary;
+if (process.env.NODE_ENV !== 'production') {
+  Alert.displayName = _antd.Alert.displayName;
 }
-var alert_default = Alert;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/alert")
-});
+var _default = exports.default = Alert;

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

@@ -2,8 +2,5 @@
 import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type AlertToken = FullToken<'Alert'>;
 export declare const genAlertStyle: GenerateStyle<AlertToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: 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;

package/lib/alert/style/index.js

@@ -1,43 +1,26 @@
-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/alert/style/index.ts
-var style_exports = {};
-__export(style_exports, {
-  default: () => style_default,
-  genAlertStyle: () => genAlertStyle
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(style_exports);
-var import_cssinjs = require("@ant-design/cssinjs");
-var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var import_lodash = require("lodash");
-var genAlertTypeStyle = (type, token) => {
-  const { componentCls } = token;
-  const textColor = token[`color${(0, import_lodash.upperFirst)(type)}Text`];
-  const hoverColor = token[`color${(0, import_lodash.upperFirst)(type)}TextHover`];
-  const activeColor = token[`color${(0, import_lodash.upperFirst)(type)}TextActive`];
+exports.genAlertStyle = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var _lodash = require("lodash");
+const genAlertTypeStyle = (type, token) => {
+  const {
+    componentCls
+  } = token;
+  const textColor = token[`color${(0, _lodash.upperFirst)(type)}Text`];
+  const hoverColor = token[`color${(0, _lodash.upperFirst)(type)}TextHover`];
+  const activeColor = token[`color${(0, _lodash.upperFirst)(type)}TextActive`];
   const linkStyle = {
     color: textColor,
-    textDecoration: "underline",
-    "&:hover": {
+    textDecoration: 'underline',
+    '&:hover': {
       color: hoverColor
     },
-    "&:active": {
+    '&:active': {
       color: activeColor
     }
   };
@@ -54,85 +37,103 @@ var genAlertTypeStyle = (type, token) => {
     }
   };
 };
-var genAlertStyle = (token) => {
-  const { componentCls, colorIcon, colorIconHover, motionDurationMid, calc } = token;
+const genAlertStyle = token => {
+  const {
+    componentCls,
+    colorIcon,
+    colorIconHover,
+    motionDurationMid,
+    calc
+  } = token;
+  // height = fontSize * lineHeight
   const height = calc(token.fontSize).mul(token.lineHeight).equal();
-  const iconWidth = token.fontSizeLG;
+  // icon width = fontSize + 1px (icon size)
+  const iconWidth = calc(token.fontSize).add(1).equal();
+  // content and action start position = icon width + icon margin
   const contentStartOffset = calc(iconWidth).add(token.marginXS).equal();
+  // close icon width (approximate)
   const closeIconWidth = height;
-  const contentWidth = (0, import_cssinjs.unit)(
-    calc(contentStartOffset).add(closeIconWidth).add(token.padding).equal()
-  );
-  const actionWidth = (0, import_cssinjs.unit)(calc(contentStartOffset).add(token.padding).equal());
+  // Common calculated values
+  const contentWidth = (0, _cssinjs.unit)(calc(contentStartOffset).equal());
+  const closableContentWidth = (0, _cssinjs.unit)(calc(contentStartOffset).add(closeIconWidth).equal());
   return {
     [`${componentCls}`]: {
       // vertical align to flex-start
-      alignItems: "flex-start !important",
+      alignItems: 'flex-start !important',
       paddingInline: token.padding,
-      position: "relative",
+      position: 'relative',
       [`${componentCls}-content`]: {
         flex: `1 1 calc(100% - ${contentWidth})`,
         minWidth: 0,
         maxWidth: `calc(100% - ${contentWidth})`,
-        wordBreak: "break-word"
+        wordBreak: 'break-word'
       },
       [`${componentCls}-action`]: {
-        width: `calc(100% - ${actionWidth})`,
+        width: `calc(100% - ${contentWidth})`,
         marginInlineStart: contentStartOffset
       },
       [`${componentCls}-icon`]: {
         height,
-        fontSize: token.fontSizeLG,
+        fontSize: iconWidth,
         marginInlineEnd: token.marginXS,
         flexShrink: 0
       },
       [`${componentCls}-close-icon`]: {
-        position: "absolute",
+        position: 'absolute',
         top: token.paddingXS,
         insetInlineEnd: token.padding,
         height,
         color: colorIcon,
         transition: `color ${motionDurationMid}`,
         flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        "&:hover": {
+        display: 'flex',
+        alignItems: 'center',
+        '&:hover': {
           color: colorIconHover
         }
       },
       // Default link styles (will be overridden by type-specific styles)
       [`${componentCls}-message`]: {
         a: {
-          textDecoration: "underline"
+          textDecoration: 'underline'
         }
       },
       [`${componentCls}-description`]: {
         a: {
-          textDecoration: "underline"
+          textDecoration: 'underline'
         }
       },
-      [`&${componentCls}-success`]: genAlertTypeStyle("success", token),
-      [`&${componentCls}-info`]: genAlertTypeStyle("info", token),
-      [`&${componentCls}-warning`]: genAlertTypeStyle("warning", token),
-      [`&${componentCls}-error`]: genAlertTypeStyle("error", token)
+      [`&${componentCls}-success`]: genAlertTypeStyle('success', token),
+      [`&${componentCls}-info`]: genAlertTypeStyle('info', token),
+      [`&${componentCls}-warning`]: genAlertTypeStyle('warning', token),
+      [`&${componentCls}-error`]: genAlertTypeStyle('error', token)
+    },
+    [`${componentCls}${componentCls}-closable`]: {
+      [`${componentCls}-content`]: {
+        flex: `1 1 calc(100% - ${closableContentWidth})`,
+        maxWidth: `calc(100% - ${closableContentWidth})`
+      },
+      [`${componentCls}-action`]: {
+        width: `calc(100% - ${closableContentWidth})`
+      }
     },
     [`${componentCls}:not(${componentCls}-with-description)`]: {
-      flexWrap: "wrap",
+      flexWrap: 'wrap',
       [`${componentCls}-action`]: {
         marginTop: token.marginXS
       }
     },
     [`${componentCls}${componentCls}-with-description`]: {
       paddingBlock: token.paddingSM,
-      flexWrap: "wrap",
+      flexWrap: 'wrap',
       [`${componentCls}-message`]: {
         fontSize: token.fontSize,
         fontWeight: token.fontWeightStrong,
         marginBottom: token.marginXXS,
-        wordBreak: "break-word"
+        wordBreak: 'break-word'
       },
       [`${componentCls}-description`]: {
-        wordBreak: "break-word"
+        wordBreak: 'break-word'
       },
       [`${componentCls}-action`]: {
         marginTop: token.marginSM
@@ -141,49 +142,50 @@ var genAlertStyle = (token) => {
         top: token.paddingSM
       }
     },
+    [`${componentCls}${componentCls}-with-action`]: {
+      paddingBlock: token.paddingSM
+    },
     [`${componentCls}${componentCls}-ghost`]: {
-      backgroundColor: "transparent",
-      border: "none",
-      padding: "0px !important",
+      backgroundColor: 'transparent',
+      border: 'none',
+      padding: '0px !important',
       borderRadius: 0
     },
     [`${componentCls}${componentCls}-mini`]: {
       paddingBlock: token.paddingXXS,
       paddingInline: token.paddingXS,
-      border: "none",
-      width: "fit-content",
-      display: "inline-flex",
-      alignItems: "center",
-      flexWrap: "nowrap",
+      width: 'fit-content',
+      display: 'inline-flex',
+      alignItems: 'center',
+      flexWrap: 'nowrap',
       [`${componentCls}-icon`]: {
         marginInlineEnd: token.paddingXS,
         flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        lineHeight: 1
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       },
       [`${componentCls}-message`]: {
-        whiteSpace: "nowrap",
-        wordBreak: "normal",
-        overflow: "visible",
+        whiteSpace: 'nowrap',
+        wordBreak: 'normal',
+        overflow: 'visible',
         lineHeight: token.lineHeight,
-        display: "flex",
-        alignItems: "center"
+        display: 'flex',
+        alignItems: 'center'
       },
       [`${componentCls}-content`]: {
-        display: "flex",
-        alignItems: "center",
-        flex: "0 1 auto",
-        whiteSpace: "nowrap",
+        display: 'flex',
+        alignItems: 'center',
+        flex: '0 1 auto',
+        whiteSpace: 'nowrap',
         minWidth: 0,
         lineHeight: token.lineHeight
       },
       [`${componentCls}-close-icon`]: {
-        position: "relative",
+        position: 'relative',
         top: token.paddingXXS,
-        insetInlineEnd: "auto",
-        height: "auto",
+        insetInlineEnd: 'auto',
+        height: 'auto',
         flexShrink: 0,
         marginInlineStart: 0
       },
@@ -193,43 +195,43 @@ var genAlertStyle = (token) => {
         }
       },
       [`&:not(${componentCls}-with-description)`]: {
-        flexWrap: "nowrap",
+        flexWrap: 'nowrap',
         [`${componentCls}-content`]: {
-          flex: "0 1 auto",
+          flex: '0 1 auto',
           minWidth: 0,
-          maxWidth: "none",
-          wordBreak: "normal"
+          maxWidth: 'none',
+          wordBreak: 'normal'
         }
       },
       [`&${componentCls}-with-description`]: {
         paddingBlock: token.paddingXXS,
-        flexDirection: "row",
-        alignItems: "flex-start",
-        position: "relative",
-        flexWrap: "nowrap",
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        position: 'relative',
+        flexWrap: 'nowrap',
         [`${componentCls}-icon`]: {
-          alignSelf: "flex-start",
+          alignSelf: 'flex-start',
           marginTop: 0
         },
         [`${componentCls}-content`]: {
-          flexDirection: "column",
-          alignItems: "flex-start",
-          flex: "0 1 auto",
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          flex: '0 1 auto',
           minWidth: 0,
-          maxWidth: "none",
-          wordBreak: "normal"
+          maxWidth: 'none',
+          wordBreak: 'normal'
         },
         [`${componentCls}-message`]: {
           marginBottom: token.marginXXS,
-          whiteSpace: "nowrap",
-          wordBreak: "normal"
+          whiteSpace: 'nowrap',
+          wordBreak: 'normal'
         },
         [`${componentCls}-description`]: {
-          whiteSpace: "nowrap",
-          wordBreak: "normal"
+          whiteSpace: 'nowrap',
+          wordBreak: 'normal'
         },
         [`${componentCls}-close-icon`]: {
-          position: "absolute",
+          position: 'absolute',
           top: token.paddingXXS,
           insetInlineEnd: token.paddingXS
         }
@@ -237,13 +239,7 @@ var genAlertStyle = (token) => {
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Alert", (token) => {
-    return [genAlertStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  genAlertStyle
-});
+exports.genAlertStyle = genAlertStyle;
+var _default = exports.default = (0, _genComponentStyleHook.genStyleHooks)('Alert', token => {
+  return [genAlertStyle(token)];
+});

package/lib/anchor/index.js

@@ -1,25 +1,27 @@
-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);
-
-// src/anchor/index.ts
-var anchor_exports = {};
-module.exports = __toCommonJS(anchor_exports);
-__reExport(anchor_exports, require("antd/es/anchor/Anchor"), module.exports);
-__reExport(anchor_exports, require("antd/es/anchor"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/anchor/Anchor"),
-  ...require("antd/es/anchor")
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _Anchor = require("antd/es/anchor/Anchor");
+Object.keys(_Anchor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Anchor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Anchor[key];
+    }
+  });
+});
+var _anchor = require("antd/es/anchor");
+Object.keys(_anchor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _anchor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _anchor[key];
+    }
+  });
+});