@cloudtower/eagle 0.35.1 → 0.35.2

package/dist/esm/core/LocalUpload/LocalUpload.widget.js

@@ -0,0 +1,365 @@
+import { Uploading16GradientGrayIcon, Uploading16GradientBlueIcon, Upload24GradientGrayIcon, Upload24GradientBlueIcon, Upload48GradientBlueIcon, XmarkRemove16SecondaryIcon, ExclamationErrorCircleFill16RedIcon, File16GradientBlueIcon, Loading16GradientBlueIcon, XmarkRemove24SecondaryIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import Button from '../Button/index.js';
+import Byte from '../Byte/index.js';
+import Icon from '../Icon/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { Typo } from '../Typo/index.js';
+import OverflowTooltip from '../../coreX/OverflowTooltip/index.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import cs from 'classnames';
+import _ from 'lodash';
+import React__default, { useState } from 'react';
+import { useFileValidation, useFileCountErrorClear } from './LocalUpload.hooks.js';
+import { FileInfoWrapperStyle } from './LocalUpload.style.js';
+import { Upload } from 'antd';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const STATUS_ICON_MAP = {
+  error: ExclamationErrorCircleFill16RedIcon,
+  success: File16GradientBlueIcon,
+  validating: Loading16GradientBlueIcon,
+  "need-validate": Loading16GradientBlueIcon
+};
+const createBeforeUploadHandler = ({
+  fileList,
+  setFileList,
+  validate,
+  maxCount,
+  isSingleSelect,
+  setError,
+  t,
+  checkSingleSelectCount = false
+}) => {
+  return (file, _fileList) => {
+    if (isSingleSelect) {
+      if (checkSingleSelectCount && _fileList.length > 1) {
+        setError(t("components.exceed_max_count", { count: 1 }) || "");
+        return false;
+      } else {
+        setError("");
+      }
+      const _file2 = file;
+      _file2.fileStatus = validate ? "need-validate" : "success";
+      setFileList([_file2]);
+      return false;
+    }
+    if (fileList.length + _fileList.length > maxCount) {
+      setError(t("components.exceed_max_count", { count: maxCount }) || "");
+    } else {
+      setError("");
+    }
+    const _file = file;
+    _file.fileStatus = validate ? "need-validate" : "success";
+    const index = _fileList.findIndex((f) => f.uid === _file.uid);
+    if (index !== -1) {
+      const newList = _.uniqBy(
+        [...fileList, ..._fileList.slice(0, index + 1)],
+        "uid"
+      );
+      setFileList(newList);
+    }
+    return false;
+  };
+};
+const UploadLabel = ({ className, children }) => {
+  return /* @__PURE__ */ React__default.createElement("label", { className: cx("upload-label", Typo.Label.l2_regular, className) }, children);
+};
+const UploadDescription = ({ className, children }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: cx("upload-description", Typo.Label.l4_regular, className) }, children);
+};
+const UploadButton = ({
+  children,
+  hideIcon = false,
+  className,
+  fileList,
+  setFileList,
+  validate,
+  maxCount,
+  multiple = false,
+  disabled,
+  accept
+}) => {
+  const { t } = useParrotTranslation();
+  const [error, setError] = useState("");
+  const _maxCount = multiple ? maxCount || Infinity : 1;
+  const isSingleSelect = _maxCount === 1;
+  useFileValidation({
+    fileList,
+    setFileList,
+    validate,
+    createNewFile: false
+  });
+  useFileCountErrorClear({
+    fileList,
+    maxCount: _maxCount,
+    setError
+  });
+  const props = {
+    accept,
+    fileList,
+    showUploadList: false,
+    beforeUpload: createBeforeUploadHandler({
+      fileList,
+      setFileList,
+      validate,
+      maxCount: _maxCount,
+      isSingleSelect,
+      setError,
+      t,
+      checkSingleSelectCount: false
+    }),
+    multiple
+  };
+  return /* @__PURE__ */ React__default.createElement(Upload, __spreadProps(__spreadValues({}, props), { className: cs("upload-button", className) }), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      disabled,
+      prefixIcon: !hideIcon ? /* @__PURE__ */ React__default.createElement(Icon, { src: Uploading16GradientGrayIcon }) : void 0,
+      hoverPrefixIcon: !hideIcon ? /* @__PURE__ */ React__default.createElement(Icon, { src: Uploading16GradientBlueIcon }) : void 0
+    },
+    children
+  ), error ? /* @__PURE__ */ React__default.createElement("div", { className: cx("upload-error", Typo.Label.l4_regular) }, error) : null);
+};
+const UploadDragger = ({
+  children,
+  className,
+  fileList,
+  setFileList,
+  validate,
+  maxCount,
+  multiple = false,
+  disabled,
+  accept
+}) => {
+  var _a;
+  const { t } = useParrotTranslation();
+  const [error, setError] = useState("");
+  const _maxCount = multiple ? maxCount || Infinity : 1;
+  const isSingleSelect = _maxCount === 1;
+  const reachMaxCount = !!maxCount && !isSingleSelect && fileList.length >= maxCount;
+  useFileValidation({
+    fileList,
+    setFileList,
+    validate,
+    createNewFile: true
+  });
+  useFileCountErrorClear({
+    fileList,
+    maxCount: _maxCount,
+    setError
+  });
+  const props = {
+    accept,
+    fileList,
+    showUploadList: false,
+    beforeUpload: createBeforeUploadHandler({
+      fileList,
+      setFileList,
+      validate,
+      maxCount: _maxCount,
+      isSingleSelect,
+      setError,
+      t,
+      checkSingleSelectCount: true
+    }),
+    disabled,
+    multiple
+  };
+  const DefaultChildren = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Icon,
+    {
+      src: (fileList == null ? void 0 : fileList.length) ? reachMaxCount ? Upload24GradientGrayIcon : Upload24GradientBlueIcon : Upload48GradientBlueIcon,
+      iconHeight: (fileList == null ? void 0 : fileList.length) ? 24 : 48,
+      iconWidth: (fileList == null ? void 0 : fileList.length) ? 24 : 48
+    }
+  ), /* @__PURE__ */ React__default.createElement("div", { className: cx("upload-drag-text", Typo.Label.l2_regular) }, t("components.upload_file_desc")));
+  const fileStatus = isSingleSelect ? ((_a = fileList[0]) == null ? void 0 : _a.fileStatus) || "success" : void 0;
+  const FileInfo = ({ file }) => {
+    const fileStatus2 = file.fileStatus || "success";
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "file-info", onClick: (e) => e.preventDefault() }, /* @__PURE__ */ React__default.createElement(
+      Icon,
+      {
+        src: STATUS_ICON_MAP[fileStatus2],
+        isRotate: fileStatus2 === "validating" || fileStatus2 === "need-validate"
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: cx("file-name", Typo.Label.l4_regular) }, file.name || file.fileName)), /* @__PURE__ */ React__default.createElement(Button, { className: Typo.Label.l2_regular, type: "link" }, t("components.reselect_file")));
+  };
+  const Error2 = () => {
+    if (error) {
+      return /* @__PURE__ */ React__default.createElement("div", { className: cx("upload-error", Typo.Label.l4_regular) }, error);
+    }
+    const file = fileList[0];
+    if (isSingleSelect && (file == null ? void 0 : file.fileStatus) === "error" && file.error) {
+      return /* @__PURE__ */ React__default.createElement("div", { className: cx("upload-error", Typo.Label.l4_regular) }, file.error);
+    }
+    return null;
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: cs("upload-drag", className) }, /* @__PURE__ */ React__default.createElement(
+    Upload.Dragger,
+    __spreadProps(__spreadValues({}, props), {
+      disabled: disabled || fileStatus === "validating",
+      className: cs(
+        "upload-drag-area",
+        fileList.length ? "has-file" : "",
+        reachMaxCount && "reach-max-count",
+        isSingleSelect && "single",
+        fileStatus === "error" && "file-error",
+        fileStatus === "validating" && "file-validating"
+      )
+    }),
+    isSingleSelect && fileList.length ? /* @__PURE__ */ React__default.createElement(FileInfo, { file: fileList[0] }) : children || DefaultChildren
+  ), /* @__PURE__ */ React__default.createElement(Error2, null));
+};
+const UploadFileInfo = ({
+  file,
+  removeFile,
+  disabled,
+  onRemove
+}) => {
+  const fileStatus = file.fileStatus || "success";
+  const handleRemove = () => {
+    var _a;
+    removeFile((_a = file.uid) != null ? _a : "");
+    if (onRemove && "fileStatus" in file) {
+      onRemove(file);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cs(FileInfoWrapperStyle, {
+        "file-error-wrapper": fileStatus === "error",
+        disabled
+      })
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Icon,
+      {
+        src: STATUS_ICON_MAP[fileStatus],
+        isRotate: fileStatus === "validating" || fileStatus === "need-validate"
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement("div", { className: cx("file-info", Typo.Label.l4_regular) }, /* @__PURE__ */ React__default.createElement(
+      OverflowTooltip,
+      {
+        className: "file-name",
+        content: file.name || file.fileName,
+        tooltip: file.name || file.fileName
+      }
+    ), file.size ? /* @__PURE__ */ React__default.createElement("div", { className: "file-info" }, /* @__PURE__ */ React__default.createElement(
+      Byte,
+      {
+        rawValue: file.size,
+        valueClassName: "file-size",
+        unitClassName: "file-size-unit"
+      }
+    )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), file.fileStatus === "error" && !!file.error && /* @__PURE__ */ React__default.createElement("div", { className: cx("upload-file-error", Typo.Footnote.f2_regular) }, file.error)),
+    /* @__PURE__ */ React__default.createElement(
+      Icon,
+      {
+        src: XmarkRemove16SecondaryIcon,
+        onClick: disabled ? void 0 : handleRemove
+      }
+    )
+  );
+};
+const FileListItem = ({ file, removeFile, onRemove }) => {
+  const fileStatus = file.fileStatus || "success";
+  const { t } = useParrotTranslation();
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    removeFile(file.uid);
+    onRemove == null ? void 0 : onRemove(file);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cx("upload-file-item", Typo.Label.l4_regular),
+      key: file.uid
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "upload-file-info" }, /* @__PURE__ */ React__default.createElement("div", { className: "file-info" }, /* @__PURE__ */ React__default.createElement(
+      Icon,
+      {
+        src: STATUS_ICON_MAP[fileStatus],
+        isRotate: fileStatus === "validating" || fileStatus === "need-validate"
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: fileStatus === "validating" || fileStatus === "need-validate" ? "validating" : ""
+      },
+      file.name || file.fileName
+    )), /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("common.remove") }, /* @__PURE__ */ React__default.createElement(
+      Icon,
+      {
+        className: "remove-button",
+        src: XmarkRemove24SecondaryIcon,
+        onClick: handleRemove
+      }
+    ))),
+    file.fileStatus === "error" && !!file.error && /* @__PURE__ */ React__default.createElement("div", { className: cx("upload-file-error", Typo.Footnote.f2_regular) }, file.error)
+  );
+};
+const UploadFileList = ({
+  className,
+  fileList,
+  removeFile,
+  type = "list",
+  disableRemove = false,
+  onRemove
+}) => {
+  if (!fileList.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cs(
+        "upload-file-list",
+        type === "list" ? "" : "upload-file-info-list",
+        className
+      )
+    },
+    fileList.map(
+      (file) => type === "list" ? /* @__PURE__ */ React__default.createElement(
+        FileListItem,
+        {
+          key: file.uid,
+          file,
+          removeFile,
+          onRemove
+        }
+      ) : /* @__PURE__ */ React__default.createElement(
+        UploadFileInfo,
+        {
+          key: file.uid,
+          file,
+          removeFile,
+          disabled: disableRemove,
+          onRemove
+        }
+      )
+    )
+  );
+};
+
+export { FileListItem, UploadButton, UploadDescription, UploadDragger, UploadFileInfo, UploadFileList, UploadLabel };

package/dist/esm/core/MediumDialog/MediumDialog.js

@@ -1,5 +1,5 @@
-import React__default from 'react';
 import { cx } from '@linaria/core';
+import React__default from 'react';
 import { Typo } from '../Typo/index.js';
 import { SmallDialog } from '../SmallDialog/SmallDialog.js';
 

package/dist/esm/core/SmallDialog/SmallDialog.js

@@ -1,14 +1,14 @@
 import { ExclamationErrorCircleFill16RedIcon, XmarkCloseBold24TertiaryIcon, XmarkCloseBold24SecondaryIcon } from '@cloudtower/icons-react';
 import { cx } from '@linaria/core';
 import { usePopModal } from '../KitStoreProvider/index.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
 import { Modal } from 'antd';
-import React__default from 'react';
 import cs from 'classnames';
+import React__default from 'react';
 import OverflowTooltip from '../../coreX/OverflowTooltip/index.js';
 import { Show } from '../../coreX/Show/index.js';
 import { FooterStyle, ErrorTextStyle, DialogStyle, CloseIconStyle } from './SmallDialog.style.js';
 import { ModelTitleSkeleton, ModelContentSkeleton, ModelInitializingError } from './SmallDialog.widget.js';
-import useParrotTranslation from '../../hooks/useParrotTranslation.js';
 import Icon from '../Icon/index.js';
 import Button from '../Button/index.js';
 import { Flex } from 'antd5';
@@ -51,6 +51,7 @@ const SmallDialog = ({
   okButtonProps,
   cancelButtonProps,
   children,
+  hideFooter = false,
   showFooterErrorIcon = true,
   error,
   confirmLoading,
@@ -84,7 +85,7 @@ const SmallDialog = ({
       visible: true,
       width,
       title: initializing ? /* @__PURE__ */ React__default.createElement(ModelTitleSkeleton, null) : /* @__PURE__ */ React__default.createElement(CustomTitleRender, { title: title || defaultTitle }),
-      footer: initializing ? null : /* @__PURE__ */ React__default.createElement(
+      footer: initializing ? null : hideFooter ? /* @__PURE__ */ React__default.createElement("div", null) : /* @__PURE__ */ React__default.createElement(
         "div",
         {
           className: cs(FooterStyle, footerClassName, {
@@ -137,7 +138,8 @@ const SmallDialog = ({
       closable,
       maskClosable,
       className: cs(DialogStyle, className, {
-        "initializing-error": initializingError
+        "initializing-error": initializingError,
+        "no-footer": hideFooter
       }),
       closeIcon: /* @__PURE__ */ React__default.createElement(
         Icon,

package/dist/esm/core/Tab/Tab.js

@@ -0,0 +1,107 @@
+import { MoreMenu16BlueIcon, MoreMenu16GrayIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import { Dropdown, Menu } from 'antd';
+import React__default, { useRef, useState, useMemo, useLayoutEffect } from 'react';
+import Icon from '../Icon/index.js';
+import { Typo } from '../Typo/index.js';
+import { TabMenuWrapper, MoreThanTooltipStyle, TabTitleElStyle, IconStyle } from './Tab.style.js';
+import { ActiveTabType } from './Tab.type.js';
+import { useTabAdaptiveLayout } from './useTabAdaptiveLayout.js';
+
+const getSelectedStyle = (key, type, selectedKey, activeTabType) => {
+  return key === selectedKey && activeTabType === type ? ["__selected", Typo.Label.l1_bold_title] : [Typo.Label.l1_regular];
+};
+const Tab = props => {
+  const {
+    className,
+    contentClassName,
+    tabs,
+    onChange,
+    selectedKey,
+    extraSlot,
+    size = "medium"
+  } = props;
+  const tabsRef = useRef(null);
+  const extraSlotRef = useRef(null);
+  const [isClickedMoreTabItem, setIsClickedMoreTabItem] = useState(false);
+  const allTabs = useMemo(() => {
+    return tabs.reduce((map, tab) => {
+      map.set(tab.key, tab);
+      return map;
+    }, /* @__PURE__ */new Map([]));
+  }, [tabs]);
+  const selectedTab = useMemo(() => allTabs.get(selectedKey), [allTabs, selectedKey]);
+  const moreTabs = useTabAdaptiveLayout(tabs, tabsRef, extraSlotRef, selectedKey);
+  const activeTabType = useMemo(() => {
+    if (moreTabs == null ? void 0 : moreTabs.find(tab => tab.key === (selectedTab == null ? void 0 : selectedTab.key))) {
+      return ActiveTabType.More;
+    }
+    if ((selectedTab == null ? void 0 : selectedTab.key) && allTabs.get(selectedTab.key)) {
+      return ActiveTabType.Common;
+    }
+  }, [moreTabs, allTabs, selectedTab == null ? void 0 : selectedTab.key]);
+  useLayoutEffect(() => {
+    var _a;
+    if (!allTabs.get(selectedKey) && ((_a = tabs == null ? void 0 : tabs[0]) == null ? void 0 : _a.key)) {
+      onChange == null ? void 0 : onChange(tabs[0].key);
+    }
+  }, [allTabs, onChange, selectedKey, tabs]);
+  return /* @__PURE__ */React__default.createElement(TabMenuWrapper, {
+    className: cx(className, size)
+  }, /* @__PURE__ */React__default.createElement("div", {
+    className: "tab-bar"
+  }, /* @__PURE__ */React__default.createElement("div", {
+    ref: tabsRef,
+    className: "common-tab-bar"
+  }, /* tab items */
+  tabs.map(tab => /* @__PURE__ */React__default.createElement("span", {
+    className: cx("tab-item-title", "common", ...getSelectedStyle(tab.key, ActiveTabType.Common, selectedKey, activeTabType)),
+    key: tab.key,
+    onClick: () => onChange == null ? void 0 : onChange(tab.key)
+  }, typeof tab.title === "function" ? tab.title({
+    isActive: tab.key === selectedKey
+  }) : tab.title)), /* more tab items */
+  moreTabs.length > 0 && /* @__PURE__ */React__default.createElement(React__default.Fragment, null, /* @__PURE__ */React__default.createElement(Dropdown, {
+    trigger: ["click"],
+    overlayClassName: MoreThanTooltipStyle,
+    onVisibleChange: visible => setIsClickedMoreTabItem(visible),
+    getPopupContainer: triggerNode => document.querySelector(".tab-bar") || triggerNode,
+    overlay: /* @__PURE__ */React__default.createElement(Menu, {
+      className: "menu-wrapper",
+      onClick: params => {
+        setIsClickedMoreTabItem(false);
+        onChange == null ? void 0 : onChange(params.key);
+      }
+    }, moreTabs.map(tab => {
+      return /* @__PURE__ */React__default.createElement(Menu.Item, {
+        className: cx("tab-menu-item", ...getSelectedStyle(tab.key, ActiveTabType.More, selectedKey, activeTabType)),
+        key: tab.key
+      }, typeof tab.title === "function" ? tab.title({
+        isActive: tab.key === selectedKey
+      }) : tab.title);
+    }))
+  }, /* @__PURE__ */React__default.createElement("span", {
+    className: cx("tab-item-title", "more", TabTitleElStyle, activeTabType === ActiveTabType.More && "__selected", activeTabType === ActiveTabType.More ? Typo.Label.l1_bold_title : Typo.Label.l1_regular)
+  }, /* @__PURE__ */React__default.createElement(Icon, {
+    className: IconStyle,
+    hoverSrc: MoreMenu16BlueIcon,
+    src: MoreMenu16GrayIcon,
+    active: isClickedMoreTabItem
+  }), activeTabType === ActiveTabType.More && /* @__PURE__ */React__default.createElement("span", {
+    className: "tab-title-text"
+  }, typeof (selectedTab == null ? void 0 : selectedTab.title) === "function" ? selectedTab == null ? void 0 : selectedTab.title({
+    isActive: true
+  }) : selectedTab == null ? void 0 : selectedTab.title))), extraSlot && /* @__PURE__ */React__default.createElement("span", {
+    className: "E_ckaaqep"
+  }))), extraSlot && /* @__PURE__ */React__default.createElement("div", {
+    ref: extraSlotRef
+  }, extraSlot)), tabs.map(tab => /* @__PURE__ */React__default.createElement("div", {
+    style: {
+      display: tab.key === selectedKey ? "block" : "none"
+    },
+    key: tab.key,
+    className: contentClassName
+  }, tab == null ? void 0 : tab.children)));
+};
+
+export { Tab };

package/dist/esm/core/Tab/Tab.style.js

@@ -0,0 +1,12 @@
+import { styled } from '@linaria/react';
+
+const TabMenuWrapper = /*#__PURE__*/styled('div')({
+  name: "TabMenuWrapper",
+  class: "E_t1tbywr9",
+  propsAsIs: false
+});
+const TabTitleElStyle = "E_ti12z2";
+const MoreThanTooltipStyle = "E_m19lu3v";
+const IconStyle = "E_i1bmwe2m";
+
+export { IconStyle, MoreThanTooltipStyle, TabMenuWrapper, TabTitleElStyle };

package/dist/esm/core/Tab/Tab.type.js

@@ -0,0 +1,7 @@
+var ActiveTabType = /* @__PURE__ */ ((ActiveTabType2) => {
+  ActiveTabType2[ActiveTabType2["Common"] = 0] = "Common";
+  ActiveTabType2[ActiveTabType2["More"] = 1] = "More";
+  return ActiveTabType2;
+})(ActiveTabType || {});
+
+export { ActiveTabType };

package/dist/esm/core/Tab/useTabAdaptiveLayout.js

@@ -0,0 +1,71 @@
+import { isEqual } from 'lodash';
+import { useState, useCallback, useEffect } from 'react';
+
+const getPlacementWidth = (el) => {
+  if (!el) {
+    return 0;
+  }
+  const computedStyle = window.getComputedStyle(el);
+  const width = el.offsetWidth;
+  const marginLeft = parseInt(computedStyle.marginLeft || "0");
+  const marginRight = parseInt(computedStyle.marginRight || "0");
+  return width + marginLeft + marginRight;
+};
+const useTabAdaptiveLayout = (tabs, tabsRef, extraSlotRef, selectedKey) => {
+  const [moreTabs, setMoreTabs] = useState([]);
+  const doAdapt = useCallback(() => {
+    if (!tabsRef.current)
+      return;
+    const tabBarEl = tabsRef.current;
+    const tabNodeList = tabBarEl.querySelectorAll(".tab-item-title.common");
+    const moreTabNode = tabBarEl.querySelector(
+      ".tab-item-title.more"
+    );
+    const moreTabPlacementWidth = getPlacementWidth(moreTabNode);
+    tabNodeList.forEach((tab) => tab.classList.remove("__hidden"));
+    const maxContentWidth = getPlacementWidth(tabBarEl.parentElement) - getPlacementWidth(extraSlotRef.current) - moreTabPlacementWidth;
+    let tabsTotalWidth = 24;
+    const hiddenItems = [];
+    let endIndex = Infinity;
+    for (let i = 0; i < tabNodeList.length; i++) {
+      const tab = tabNodeList[i];
+      const tabWidth = getPlacementWidth(tab);
+      if (maxContentWidth >= tabsTotalWidth + tabWidth) {
+        tabsTotalWidth += tabWidth;
+      } else {
+        endIndex = i;
+        break;
+      }
+    }
+    while (endIndex <= tabNodeList.length - 1) {
+      tabNodeList[endIndex].classList.add("__hidden");
+      hiddenItems.push(tabs[endIndex]);
+      endIndex++;
+    }
+    setMoreTabs((prevMoreTabs) => {
+      if (!isEqual(hiddenItems, prevMoreTabs)) {
+        return hiddenItems;
+      }
+      return prevMoreTabs;
+    });
+  }, [tabs, tabsRef, extraSlotRef]);
+  useEffect(() => {
+    doAdapt();
+  }, [doAdapt, selectedKey]);
+  useEffect(() => {
+    var _a;
+    const parentElement = (_a = tabsRef.current) == null ? void 0 : _a.parentElement;
+    if (!parentElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      doAdapt();
+    });
+    resizeObserver.observe(parentElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [doAdapt, tabsRef]);
+  return moreTabs;
+};
+
+export { useTabAdaptiveLayout };

package/dist/esm/core/message/message.js

@@ -6,6 +6,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import RCNotification from '@cloudtower/rc-notification';
 import cs from 'classnames';
 import * as React from 'react';
+import { ConfigProvider } from '../ConfigProvider/index.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -26,7 +27,23 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const DEFAULT_DURATION = 3;
+const ConfigProviderWrapper = (props) => {
+  const _a = props, { children } = _a, configProps = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ React.createElement(ConfigProvider, __spreadValues({}, configProps), children);
+};
 let messageInstance;
 let defaultDuration = DEFAULT_DURATION;
 let defaultTop;
@@ -36,6 +53,7 @@ let transitionName = "move-up";
 let getContainer;
 let maxCount;
 let rtl = false;
+let globalConfigProviderProps = null;
 function getKeyThenIncreaseKey() {
   return key++;
 }
@@ -64,6 +82,10 @@ function setMessageConfig(options) {
   if (options.rtl !== void 0) {
     rtl = options.rtl;
   }
+  if (options.configProviderProps !== void 0) {
+    globalConfigProviderProps = options.configProviderProps;
+    messageInstance = null;
+  }
 }
 function getRCNotificationInstance(args, callback) {
   const prefixCls = args.prefixCls || localPrefixCls;
@@ -113,12 +135,13 @@ function getRCNoticeProps(args, prefixCls) {
     [`${prefixCls}-${args.type}`]: args.type,
     [`${prefixCls}-rtl`]: rtl === true
   });
+  const wrappedContent = globalConfigProviderProps ? /* @__PURE__ */ React.createElement(ConfigProviderWrapper, __spreadValues({}, globalConfigProviderProps), /* @__PURE__ */ React.createElement("div", { className: messageClass }, args.icon || IconComponent && /* @__PURE__ */ React.createElement(IconComponent, null), /* @__PURE__ */ React.createElement("span", null, args.content))) : /* @__PURE__ */ React.createElement("div", { className: messageClass }, args.icon || IconComponent && /* @__PURE__ */ React.createElement(IconComponent, null), /* @__PURE__ */ React.createElement("span", null, args.content));
   return {
     key: args.key,
     duration,
     style: args.style || {},
     className: args.className,
-    content: /* @__PURE__ */ React.createElement("div", { className: messageClass }, args.icon || IconComponent && /* @__PURE__ */ React.createElement(IconComponent, null), /* @__PURE__ */ React.createElement("span", null, args.content)),
+    content: wrappedContent,
     onClose: args.onClose
   };
 }