@oceanbase/design 0.2.24 → 0.2.26

package/lib/select/style/index.js

@@ -0,0 +1,46 @@
+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/select/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genSelectStyle: () => genSelectStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genSelectStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}-multiple`]: {
+      [`${componentCls}-selection-item`]: {
+        border: `1px solid ${token.colorBorder}66`
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Select", (token) => {
+    return [genSelectStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genSelectStyle
+});

package/lib/tag/index.d.ts

@@ -1 +1,12 @@
+import type { TagProps as AntTagProps } from 'antd/es/tag';
+import React from 'react';
 export * from 'antd/es/tag';
+export interface TagProps extends AntTagProps {
+    ellipsis?: boolean;
+}
+declare const Tag: {
+    ({ prefixCls: customizePrefixCls, className, ellipsis, ...restProps }: TagProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    displayName: string;
+    CheckableTag: React.ForwardRefExoticComponent<import("antd/es/tag").CheckableTagProps & React.RefAttributes<HTMLSpanElement>>;
+};
+export default Tag;

package/lib/tag/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,60 @@ 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/tag/index.ts
+// src/tag/index.tsx
 var tag_exports = {};
+__export(tag_exports, {
+  default: () => tag_default
+});
 module.exports = __toCommonJS(tag_exports);
+var import_antd = require("antd");
+var import_design = require("../index");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_style = __toESM(require("./style"));
 __reExport(tag_exports, require("antd/es/tag"), module.exports);
+var { CheckableTag } = import_antd.Tag;
+var Tag = ({
+  prefixCls: customizePrefixCls,
+  className,
+  ellipsis = true,
+  ...restProps
+}) => {
+  var _a, _b;
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("tag", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const tagCls = (0, import_classnames.default)(
+    {
+      [`${prefixCls}-ellipsis`]: ellipsis
+    },
+    className
+  );
+  const childrenType = (_a = restProps.children) == null ? void 0 : _a.type;
+  const { ellipsis: defalutEllipsis, children: defaultChildren } = ((_b = restProps.children) == null ? void 0 : _b.props) || {};
+  const ellipsisConfig = typeof defalutEllipsis === "object" ? defalutEllipsis : {
+    tooltip: (childrenType == null ? void 0 : childrenType.__ANT_TOOLTIP) ? false : defaultChildren || restProps.children
+  };
+  return ellipsis ? wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement(import_design.Typography.Text, { ellipsis: { ...ellipsisConfig } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { prefixCls: customizePrefixCls, className: tagCls, ...restProps }))
+  ) : /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { prefixCls: customizePrefixCls, className: tagCls, ...restProps });
+};
+if (process.env.NODE_ENV !== "production") {
+  Tag.displayName = import_antd.Tag.displayName;
+}
+Tag.CheckableTag = CheckableTag;
+var tag_default = Tag;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("antd/es/tag")

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type FullToken, type GenerateStyle } from 'antd/es/theme/internal';
+export type TagToken = FullToken<'Tag'>;
+export declare const genTagStyle: GenerateStyle<TagToken>;
+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/tag/style/index.js

@@ -0,0 +1,92 @@
+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/tag/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genTagStyle: () => genTagStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var import_internal = require("antd/lib/theme/internal");
+var import_tinycolor = require("@ctrl/tinycolor");
+var getTagBorderColor = (color) => {
+  return new import_tinycolor.TinyColor(color).setAlpha(0.4).toHex8String();
+};
+var genTagPresetStatusStyle = (token, status) => {
+  const borderColorMap = {
+    success: token.colorSuccessBorder,
+    processing: token.colorInfoBorder,
+    error: token.colorErrorBorder,
+    warning: token.colorWarningBorder
+  };
+  return {
+    [`${token.componentCls}${token.componentCls}-${status}`]: {
+      borderColor: getTagBorderColor(borderColorMap[status])
+    }
+  };
+};
+var genPresetStyle = (token) => (0, import_internal.genPresetColor)(token, (colorKey, { textColor, lightBorderColor }) => {
+  return {
+    [`${token.componentCls}${token.componentCls}-${colorKey}`]: {
+      color: textColor,
+      borderColor: getTagBorderColor(lightBorderColor)
+    }
+  };
+});
+var genTagStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      borderColor: getTagBorderColor(token.colorBorder),
+      [`&-ellipsis`]: {
+        maxWidth: "100%",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        verticalAlign: "bottom"
+      },
+      [`&-checkable`]: {
+        borderColor: "transparent"
+      },
+      [`&-hidden`]: {
+        display: "none"
+      },
+      [`&-borderless`]: {
+        border: "transparent"
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Tag", (token) => {
+    return [
+      genTagStyle(token),
+      genPresetStyle(token),
+      genTagPresetStatusStyle(token, "success"),
+      genTagPresetStatusStyle(token, "error"),
+      genTagPresetStatusStyle(token, "processing"),
+      genTagPresetStatusStyle(token, "warning")
+    ];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genTagStyle
+});

package/lib/tooltip/MouseTooltip.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(MouseTooltip_exports);
 var import_ahooks = require("ahooks");
 var import_react = __toESM(require("react"));
 var import_react_sticky_mouse_tooltip = __toESM(require("react-sticky-mouse-tooltip"));
-var import_static_function = require("../static-function");
+var import_theme = __toESM(require("../theme"));
 var MouseTooltip = ({
   children,
   title,
@@ -49,6 +49,7 @@ var MouseTooltip = ({
   mouseLeaveDelay = 0.1,
   ...restProps
 }) => {
+  const { token } = import_theme.default.useToken();
   const [visible, setVisible] = (0, import_react.useState)(false);
   const { color: textColor, ...restOverlayInnerStyle } = overlayInnerStyle || {};
   const handleVisibleChange = (value) => {
@@ -91,10 +92,10 @@ var MouseTooltip = ({
         // 需要大于 Popover 的 1030 zIndex 值，否则会被遮挡
         zIndex: 1100,
         padding: "6px 8px",
-        boxShadow: import_static_function.token.boxShadowSecondary,
-        borderRadius: import_static_function.token.borderRadius,
-        color: textColor || import_static_function.token.colorTextLightSolid,
-        backgroundColor: backgroundColor || import_static_function.token.colorBgSpotlight,
+        boxShadow: token.boxShadowSecondary,
+        borderRadius: token.borderRadius,
+        color: textColor || token.colorTextLightSolid,
+        backgroundColor: backgroundColor || token.colorBgSpotlight,
         left: isOverWidth ? mouse.clientX - tooltipWidth - offset : mouse.clientX + offset,
         top: isOverHeight ? mouse.clientY - tooltipHeight - offset : mouse.clientY + offset,
         ...restOverlayInnerStyle

package/lib/tooltip/hooks/useTooltipTypeList.d.ts

@@ -0,0 +1,5 @@
+export declare const useTooltipTypeList: () => {
+    type: string;
+    color: string;
+    backgroundColor: string;
+}[];

package/lib/tooltip/hooks/useTooltipTypeList.js

@@ -0,0 +1,69 @@
+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/tooltip/hooks/useTooltipTypeList.ts
+var useTooltipTypeList_exports = {};
+__export(useTooltipTypeList_exports, {
+  useTooltipTypeList: () => useTooltipTypeList
+});
+module.exports = __toCommonJS(useTooltipTypeList_exports);
+var import_theme = __toESM(require("../../theme"));
+var useTooltipTypeList = () => {
+  const { token } = import_theme.default.useToken();
+  return [
+    {
+      type: "light",
+      color: token.colorText,
+      backgroundColor: token.colorBgElevated
+    },
+    {
+      type: "success",
+      color: token.colorSuccess,
+      backgroundColor: token.colorSuccessBg
+    },
+    {
+      type: "info",
+      color: token.colorInfo,
+      backgroundColor: token.colorInfoBg
+    },
+    {
+      type: "warning",
+      color: token.colorWarning,
+      backgroundColor: token.colorWarningBg
+    },
+    {
+      type: "error",
+      color: token.colorError,
+      backgroundColor: token.colorErrorBg
+    }
+  ];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTooltipTypeList
+});

package/lib/tooltip/index.d.ts

@@ -8,11 +8,6 @@ export interface TooltipProps extends AntTooltipPropsWithTitle {
     closeIcon?: boolean | React.ReactNode;
     onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 }
-export declare const getTooltipTypeList: () => {
-    type: string;
-    color: string;
-    backgroundColor: string;
-}[];
 type CompoundedComponent = React.FC<TooltipProps> & {
     /** @internal */
     __ANT_TOOLTIP: boolean;

package/lib/tooltip/index.js

@@ -30,58 +30,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tooltip/index.tsx
 var tooltip_exports = {};
 __export(tooltip_exports, {
-  default: () => tooltip_default,
-  getTooltipTypeList: () => getTooltipTypeList
+  default: () => tooltip_default
 });
 module.exports = __toCommonJS(tooltip_exports);
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_icons = require("@oceanbase/icons");
+var import_classnames = __toESM(require("classnames"));
 var import_lodash = require("lodash");
-var import_static_function = require("../static-function");
 var import_MouseTooltip = __toESM(require("./MouseTooltip"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_style = __toESM(require("./style"));
-var import_classnames = __toESM(require("classnames"));
+var import_useTooltipTypeList = require("./hooks/useTooltipTypeList");
 __reExport(tooltip_exports, require("antd/es/tooltip"), module.exports);
-var getTooltipTypeList = () => [
-  {
-    type: "light",
-    color: import_static_function.token.colorText,
-    backgroundColor: import_static_function.token.colorBgElevated
-  },
-  {
-    type: "success",
-    color: import_static_function.token.colorSuccess,
-    backgroundColor: import_static_function.token.colorSuccessBg
-  },
-  {
-    type: "info",
-    color: import_static_function.token.colorInfo,
-    backgroundColor: import_static_function.token.colorInfoBg
-  },
-  {
-    type: "warning",
-    color: import_static_function.token.colorWarning,
-    backgroundColor: import_static_function.token.colorWarningBg
-  },
-  {
-    type: "error",
-    color: import_static_function.token.colorError,
-    backgroundColor: import_static_function.token.colorErrorBg
-  }
-];
 var Tooltip = ({
   children,
+  title,
   type = "default",
   color,
-  overlayInnerStyle,
   mouseFollow,
   closeIcon = false,
   onClose,
-  title,
+  open,
+  defaultOpen,
+  onOpenChange,
+  visible,
+  defaultVisible,
+  onVisibleChange,
+  overlayInnerStyle,
   className,
-  open: propOpen,
   ...restProps
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
@@ -89,8 +66,15 @@ var Tooltip = ({
   const prefixCls = getPrefixCls("tooltip", customizePrefixCls);
   const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
   const tooltipCls = (0, import_classnames.default)(className, hashId);
-  const [innerOpen, setInnerOpen] = (0, import_react.useState)(void 0);
-  const open = (0, import_lodash.isNil)(propOpen) ? innerOpen : propOpen;
+  const [innerOpen, setInnerOpen] = (0, import_react.useState)(open ?? visible ?? defaultOpen ?? defaultVisible);
+  const newOpen = open ?? visible ?? innerOpen;
+  (0, import_react.useEffect)(() => {
+    if (!(0, import_lodash.isNil)(open)) {
+      setInnerOpen(open);
+    } else if (!(0, import_lodash.isNil)(visible)) {
+      setInnerOpen(visible);
+    }
+  }, [open, visible]);
   const handleCloseClick = (e) => {
     e.stopPropagation();
     onClose == null ? void 0 : onClose(e);
@@ -99,16 +83,10 @@ var Tooltip = ({
     }
     setInnerOpen(false);
   };
-  const hasCloseIcon = !!closeIcon;
-  const CloseIconNode = (0, import_react.useMemo)(() => {
-    if (!hasCloseIcon) {
-      return null;
-    }
-    return closeIcon === true ? /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, { className: `${prefixCls}-close-icon`, onClick: handleCloseClick }) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-close-icon`, onClick: handleCloseClick }, closeIcon);
-  }, [closeIcon]);
+  const closeIconNode = closeIcon ? closeIcon === true ? /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, { className: `${prefixCls}-close-icon`, onClick: handleCloseClick }) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-close-icon`, onClick: handleCloseClick }, closeIcon) : null;
   const titleNode = typeof title === "function" ? title() : title;
-  const titleWithCloseIcon = /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: `${prefixCls}-close-icon-wrap` }, titleNode, CloseIconNode);
-  const typeList = getTooltipTypeList();
+  const newTitle = closeIcon ? /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: `${prefixCls}-close-icon-wrap` }, titleNode, closeIconNode) : titleNode;
+  const typeList = (0, import_useTooltipTypeList.useTooltipTypeList)();
   const typeItem = typeList.find((item) => item.type === type);
   return wrapSSR(
     mouseFollow ? /* @__PURE__ */ import_react.default.createElement(
@@ -127,11 +105,14 @@ var Tooltip = ({
     ) : /* @__PURE__ */ import_react.default.createElement(
       import_antd.Tooltip,
       {
-        title: hasCloseIcon ? titleWithCloseIcon : title,
+        title: newTitle,
         color: color || (typeItem == null ? void 0 : typeItem.backgroundColor),
-        open,
-        onOpenChange: (newOpen) => {
-          setInnerOpen(newOpen);
+        open: newOpen,
+        defaultOpen,
+        onOpenChange: (value) => {
+          setInnerOpen(value);
+          onVisibleChange == null ? void 0 : onVisibleChange(value);
+          onOpenChange == null ? void 0 : onOpenChange(value);
         },
         overlayInnerStyle: {
           color: typeItem == null ? void 0 : typeItem.color,
@@ -151,6 +132,5 @@ Tooltip.__ANT_TOOLTIP = true;
 var tooltip_default = Tooltip;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getTooltipTypeList,
   ...require("antd/es/tooltip")
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -39,7 +39,7 @@
     "@oceanbase/icons": "^0.2.9",
     "@oceanbase/util": "^0.2.11",
     "ahooks": "^2.10.14",
-    "antd": "^5.10.2",
+    "antd": "^5.10.3",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -56,5 +56,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "641619d79cb7980279179b21905141950c604c54"
+  "gitHead": "c9a4257a5c6357396e72c6a7acccd24613c4ceaf"
 }