assui 2.3.4 → 2.3.6

package/lib/button-drawer/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { DrawerProps } from 'antd/lib/drawer';
+export declare type DrawerAction = {
+    close: () => void;
+    open: () => void;
+};
+export interface ButtonDrawerProps extends Omit<DrawerProps, 'children'> {
+    onClose?: () => void;
+    onOpen?: () => void;
+    trigger: React.ReactElement;
+    children: ((v: DrawerAction) => React.ReactElement) | React.ReactElement;
+}
+declare const ForwardRefButtonDrawer: React.ForwardRefExoticComponent<ButtonDrawerProps & React.RefAttributes<unknown>>;
+export default ForwardRefButtonDrawer;

package/lib/button-drawer/index.js

@@ -162,7 +162,7 @@ var ButtonDrawer = function ButtonDrawer(props, ref) {
     className: (0, classnames_1["default"])('button-drawer', className),
     title: title,
     onClose: closeDrawer,
-    open: drawerVisible
+    visible: drawerVisible
   }, restProps), (0, isFunction_1["default"])(children) ? children(actionRef.current) : react_1["default"].cloneElement(children, {
     drawerAction: actionRef.current
   })));

package/lib/button-drawer/style/index.d.ts

@@ -0,0 +1 @@
+import 'antd/lib/drawer/style';

package/lib/button-modal/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ModalProps } from 'antd/lib/modal';
+export interface ModalAction {
+    open: () => void;
+    close: () => void;
+}
+export interface ButtonModalProps extends Omit<ModalProps, 'children'> {
+    onClose?: () => void;
+    onOpen?: () => void;
+    trigger?: React.ReactElement;
+    children: ((v: ModalAction) => React.ReactElement) | React.ReactElement;
+}
+declare const ForwardRefButtonModal: React.ForwardRefExoticComponent<ButtonModalProps & React.RefAttributes<unknown>>;
+export default ForwardRefButtonModal;

package/lib/button-modal/index.js

@@ -164,7 +164,7 @@ var ButtonModal = function ButtonModal(props, ref) {
     onClick: openModal
   });
   return React.createElement(React.Fragment, null, buttonNode, React.createElement(modal_1["default"], __assign({
-    open: visible,
+    visible: visible,
     onOk: handleModalOk,
     onCancel: handleModalCancel,
     centered: true,

package/lib/button-modal/style/index.d.ts

@@ -0,0 +1 @@
+import 'antd/lib/modal/style';

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

@@ -0,0 +1,23 @@
+import type { SketchPickerProps } from 'react-color';
+import React from 'react';
+import type { TriggerProps } from 'rc-trigger';
+export declare type ColorSelectProps = {
+    value?: {
+        hex?: string;
+        rgb?: string;
+    };
+    /** 自定义总容器 class */
+    classNameWrap?: string;
+    /** 自定义其余描述展示 */
+    renderExtra?: (value: ColorSelectProps['value']) => React.ReactElement;
+    /** 自定义value class */
+    className?: string;
+    /** 组件react-color的props */
+    reactColorProps?: Omit<SketchPickerProps, 'onChange'>;
+    /** 组件rc-trigger */
+    RcTriggerProps?: Omit<TriggerProps, 'popup'>;
+    /** 自定义value的展示 */
+    renderValueNode?: (value: ColorSelectProps['value']) => React.ReactElement;
+};
+declare const ColorSelect: React.FC<ColorSelectProps>;
+export default ColorSelect;

package/lib/color-select/style/index.d.ts

@@ -0,0 +1,2 @@
+import 'rc-trigger/assets/index.css';
+import './index.less';

package/lib/condition-input/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { InputProps } from 'antd/lib/input';
+export interface ConditionInputProps extends Omit<InputProps, 'onChange'> {
+    /** 过滤的正则条件 */
+    regexp?: RegExp | (RegExp | string | {
+        pattern: RegExp;
+        replacement?: string;
+    })[];
+    /** 指定输入框展示值的格式 */
+    formatter?: (value: string) => string;
+    /** 变化回调 */
+    onChange?: (value: string) => void;
+    /** 输入框内容 */
+    value?: string;
+}
+declare const ConditionInput: React.ForwardRefExoticComponent<ConditionInputProps & React.RefAttributes<unknown>>;
+export default ConditionInput;

package/lib/condition-input/parse2RegexOption.d.ts

@@ -0,0 +1,13 @@
+export interface RegexOptionType {
+    isValid: boolean;
+    replacement: string;
+}
+declare type regexParamsType = RegExp | string | {
+    pattern: RegExp;
+    replacement?: string;
+};
+export interface ResultType extends RegexOptionType {
+    pattern: RegExp;
+}
+declare const parse2RegexOption: (regex: regexParamsType) => ResultType;
+export default parse2RegexOption;

package/lib/condition-input/style/index.d.ts

@@ -0,0 +1 @@
+import 'antd/lib/input/style';

package/lib/config-provider/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { LangType } from '../messages';
+declare const LocaleContext: import("react").Context<LangType>;
+export default LocaleContext;

package/lib/config-provider/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type LocaleType = 'en-US' | 'zh-CN' | 'zh-TW' | 'bg' | 'cs' | 'de' | 'es' | 'fr' | 'fi' | 'it' | 'id' | 'ja' | 'ko' | 'nl' | 'nb-NO' | 'ru' | 'sv' | 'pt' | 'ar' | 'th' | 'ro' | 'vi';
+export interface ConfigProviderProps {
+    children?: React.ReactNode;
+    locale: LocaleType;
+}
+declare const ConfigProvider: React.FC<ConfigProviderProps>;
+export default ConfigProvider;

package/lib/config-provider/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/copy-to-clipboard/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { TooltipProps } from 'antd/lib/tooltip';
+export interface CopyToClipboardProps {
+    /** 需要复制的字符串 */
+    text: string;
+    /** 触发复制事件的元素 */
+    children: React.ReactElement;
+    /** 文本被复制时候的回调 */
+    onCopy?: (text: string, result: boolean) => void;
+    /** ant design Tooltip props */
+    tooltipProps?: Omit<TooltipProps, 'title'>;
+    /** 复制成功的Tooltip提示文案 */
+    tooltipTitle?: React.ReactNode;
+    /** 依赖底层组件 https://github.com/sudodoki/copy-to-clipboard 的 options */
+    options?: {
+        debug?: boolean;
+        message?: string;
+        format?: string;
+    };
+}
+declare const _default: React.MemoExoticComponent<(props: CopyToClipboardProps) => JSX.Element>;
+export default _default;

package/lib/copy-to-clipboard/index.js

@@ -137,7 +137,7 @@ var CopyToClipboard = function CopyToClipboard(props) {
 
   return tooltipTitle ? react_1["default"].createElement(tooltip_1["default"], __assign({
     placement: "topLeft",
-    open: tooltipVisible,
+    visible: tooltipVisible,
     title: tooltipTitle
   }, tooltipProps), react_1["default"].cloneElement(children, {
     onClick: onClick

package/lib/copy-to-clipboard/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/lib/highlight-textarea/HighlighedContents.d.ts

@@ -0,0 +1,7 @@
+import type { HighlightType } from './types';
+export interface HighlighedContentsProps {
+    value: string;
+    highlight: HighlightType;
+}
+declare const HighlighedContents: ({ value, highlight }: HighlighedContentsProps) => JSX.Element;
+export default HighlighedContents;

package/lib/highlight-textarea/extractSpansOfClasses.d.ts

@@ -0,0 +1,15 @@
+import type { RangesType } from './types';
+declare class Span {
+    beginIndex: number;
+    endIndex: number;
+    markClasses: Set<string>;
+    isMark: boolean;
+    text: string;
+    constructor(text: string, beginIndex: number);
+    setMark(className: string): void;
+    carve(beginIndex2: number): Span;
+    get className(): string;
+    render(): JSX.Element;
+}
+export default function extractSpansOfClasses(value: string, ranges: RangesType): Span[];
+export {};

package/lib/highlight-textarea/getRanges.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightType, RangesType } from './types';
+export default function getRanges(input: string, highlight: HighlightType): RangesType;

package/lib/highlight-textarea/getType.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightType, TypeList } from './types';
+export default function getType(instance: HighlightType): TypeList;

package/lib/highlight-textarea/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { HighlighedContentsProps } from './HighlighedContents';
+import type { HighlightType } from './types';
+export interface HighlightTextareaProps extends HighlighedContentsProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'onScroll' | 'style'> {
+    prefixCls?: string;
+    className?: string;
+    textAreaClassName?: string;
+    onChange?: (value: string, e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    highlight: HighlightType;
+}
+declare const HighlightWithinTextarea: React.ForwardRefExoticComponent<HighlightTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default HighlightWithinTextarea;

package/lib/highlight-textarea/style/index.css

@@ -137,7 +137,6 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input-affix-wrapper > input.ant-input {
   padding: 0;
-  font-size: inherit;
   border: none;
   outline: none;
 }
@@ -836,21 +835,18 @@ textarea.ant-input {
 }
 .ant-input-search-rtl .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary),
 .ant-input-search-rtl .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary) {
+  border-right-color: #40a9ff;
   border-left-color: #d9d9d9;
 }
-.ant-input-search-rtl .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover,
-.ant-input-search-rtl .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover {
-  border-left-color: #40a9ff;
-}
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper:hover,
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper-focused {
   border-right-color: #40a9ff;
 }
-.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon:last-child {
+.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon {
   right: -1px;
   left: auto;
 }
-.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon:last-child .ant-input-search-button {
+.ant-input-search-rtl > .ant-input-group > .ant-input-group-addon .ant-input-search-button {
   border-radius: 2px 0 0 2px;
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

package/lib/highlight-textarea/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/lib/highlight-textarea/types.d.ts

@@ -0,0 +1,16 @@
+export declare type StringType = string;
+export declare type NumberArrayType = number[];
+export declare type RegExpType = RegExp;
+export declare type FuncType = (input: string) => string;
+export declare type HighlightInstanceType = StringType | NumberArrayType | RegExpType | FuncType;
+export declare type AdmixArrayType = HighlightInstanceType[];
+export declare type ObjectType = {
+    highlight: HighlightInstanceType;
+    className?: string;
+};
+export declare type CustomArrayArrayType = ObjectType[];
+export declare type RangesType = (number | {
+    className?: string;
+})[][];
+export declare type HighlightType = StringType | NumberArrayType | RegExpType | FuncType | HighlightInstanceType | AdmixArrayType | ObjectType | CustomArrayArrayType;
+export declare type TypeList = 'falsely' | 'range' | 'array' | 'regexp' | 'custom' | 'other' | 'function' | 'string';

package/lib/highlight-words/index.d.ts

@@ -0,0 +1,3 @@
+import HighlightWords, { FindChunks, Chunk, HighlighterProps } from 'react-highlight-words';
+export { FindChunks, Chunk, HighlighterProps };
+export default HighlightWords;

package/lib/highlight-words/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/img-crop/EasyCrop.d.ts

@@ -0,0 +1,6 @@
+import type { CropperProps } from 'react-easy-crop';
+export interface EasyCropProps extends Omit<CropperProps, 'onCropChange' | 'mediaProps' | 'crop' | 'zoomSpeed' | 'restrictPosition' | 'style'> {
+    onComplete: (value: any) => void;
+}
+declare const EasyCrop: (props: EasyCropProps) => JSX.Element;
+export default EasyCrop;

package/lib/img-crop/getCroppedImg.d.ts

@@ -0,0 +1,6 @@
+interface pixelCropType {
+    width: number;
+    height: number;
+}
+declare function getCroppedImg(imageSrc: string, pixelCrop: pixelCropType, name: string, type: string): Promise<unknown>;
+export default getCroppedImg;

package/lib/img-crop/index.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { CropperProps } from 'react-easy-crop';
+import getCroppedImg from './getCroppedImg';
+import './style/index.less';
+export interface RcFile extends File {
+    uid: string;
+}
+export interface ImgCropProps {
+    prefix: string;
+    aspect: number;
+    shape: 'rect' | 'round';
+    grid?: boolean;
+    quality?: number;
+    zoom?: boolean;
+    rotate?: boolean;
+    minZoom: number;
+    maxZoom: number;
+    fillColor: string;
+    modalTitle: string;
+    modalWidth?: string | number;
+    modalCancel?: string;
+    modalOk?: string;
+    zipImg?: {
+        width: number;
+        height: number;
+    };
+    beforeCrop?: (file: RcFile, fileList: RcFile[]) => boolean;
+    cropperProps?: CropperProps;
+    children?: React.ReactElement;
+}
+export declare type Area = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+declare const ImgCrop: {
+    (props: ImgCropProps): JSX.Element;
+    defaultProps: {
+        prefix: string;
+        aspect: number;
+        shape: string;
+        grid: boolean;
+        quality: number;
+        zoom: boolean;
+        rotate: boolean;
+        minZoom: number;
+        maxZoom: number;
+        fillColor: string;
+    };
+    getCroppedImg: typeof getCroppedImg;
+};
+export default ImgCrop;

package/lib/img-crop/index.js

@@ -510,7 +510,7 @@ var ImgCrop = function ImgCrop(props) {
 
   var renderComponent = function renderComponent(titleOfModal) {
     return React.createElement(React.Fragment, null, renderUpload(), src && React.createElement(modal_1["default"], __assign({
-      open: true,
+      visible: true,
       wrapClassName: "".concat(pkg, "-modal"),
       title: titleOfModal,
       onOk: onOk,

package/lib/img-crop/style/index.d.ts

@@ -0,0 +1,3 @@
+import 'antd/lib/slider/style';
+import 'antd/lib/modal/style';
+import './index.less';

package/lib/index.d.ts

@@ -0,0 +1,72 @@
+export type { ButtonDrawerProps } from './button-drawer';
+export { default as ButtonDrawer } from './button-drawer';
+export type { ButtonModalProps } from './button-modal';
+export { default as ButtonModal } from './button-modal';
+export type { ConditionInputProps } from './condition-input';
+export { default as ConditionInput } from './condition-input';
+export type { ConfigProviderProps } from './config-provider';
+export { default as ConfigProvider } from './config-provider';
+export { default as NumberFormatInput } from './number-format-input';
+export type { NumberFormatInputProps } from './number-format-input';
+export type { CopyToClipboardProps } from './copy-to-clipboard';
+export { default as CopyToClipboard } from './copy-to-clipboard';
+export type { HighlightTextareaProps } from './highlight-textarea';
+export { default as HighlightTextarea } from './highlight-textarea';
+export type { FindChunks, Chunk, HighlighterProps } from './highlight-words';
+export { default as HighlightWords } from './highlight-words';
+export type { ImgCropProps } from './img-crop';
+export { default as ImgCrop } from './img-crop';
+export type { KeepTabProps } from './keep-tab';
+export { default as KeepTab } from './keep-tab';
+export type { CSSMotionProps, CSSMotionList, CSSMotionListProps, MotionEventHandler, MotionEndEventHandler, } from './rc-motion';
+export { default as RcMotion } from './rc-motion';
+export type { NumberInputProps } from './number-input';
+export { default as NumberInput } from './number-input';
+export type { StepNumberInputProps } from './step-number-input';
+export { default as StepNumberInput } from './step-number-input';
+export type { RcEchartPropsType } from './rc-echart';
+export { default as RcEcharts } from './rc-echart';
+export type { RcQrcodeProps } from './rc-qrcode';
+export { default as RcQRcode } from './rc-qrcode';
+export { default as RcTransitionGroup } from './rc-transition-group';
+export type { SingleImgUploadProps } from './single-img-upload';
+export { default as SingleImgUpload } from './single-img-upload';
+export { default as sortableHoc } from './sortable-hoc';
+export type { SplitPaneProps } from './split-pane';
+export { default as SplitPane } from './split-pane';
+export type { TAreaProps } from './text-area';
+export { default as TextArea } from './text-area';
+export type { TextInputProps } from './text-input';
+export { default as TextInput } from './text-input';
+export type { LabelInputProps } from './label-input';
+export { default as LabelInput } from './label-input';
+export type { ColorSelectProps } from './color-select';
+export { default as ColorSelect } from './color-select';
+export type { LabelSelectProps } from './label-select';
+export { default as LabelSelect } from './label-select';
+export type { ASelectProps } from './a-select';
+export { default as ASelect } from './a-select';
+export type { LabelTextAreaProps } from './label-text-area';
+export { default as LabelTextArea } from './label-text-area';
+export type { AreaTextProps } from './area-text';
+export { default as AreaText } from './area-text';
+export type { JSONEditorProps } from './json-editor';
+export { default as JsonEditor } from './json-editor';
+export type { LabelRangePickerProps } from './label-range-picker';
+export { default as LabelRangePicker } from './label-range-picker';
+export type { LabelDatePickerProps } from './label-date-picker';
+export { default as LabelDatePicker } from './label-date-picker';
+export type { LabelAutoCompleteProps } from './label-auto-complete';
+export { default as LabelAutoComplete } from './label-auto-complete';
+export type { LabelNumberInputProps } from './label-number-input';
+export { default as LabelNumberInput } from './label-number-input';
+export type { LabelConditionInputProps } from './label-condition-input';
+export { default as LabelConditionInput } from './label-condition-input';
+export type { LabelTreeSelectProps } from './label-tree-select';
+export { default as LabelTreeSelect } from './label-tree-select';
+export type { LabelCustomizeRangePickerProps } from './label-customize-range-picker';
+export { default as LabelCustomizeRangePicker } from './label-customize-range-picker';
+export type { RichTextEditorProps } from './rich-text-editor';
+export { default as RichTextEditor } from './rich-text-editor';
+export { default as BeautifulDnd } from './beautiful-dnd';
+export { default as Resizable } from './resizable';

package/lib/json-editor/index.d.ts

@@ -0,0 +1,10 @@
+import type { JSONEditorOptions } from 'jsoneditor';
+import React from 'react';
+export declare type JSONEditorProps = {
+    className?: string;
+    options?: JSONEditorOptions;
+    onChange?: (value: string) => void;
+    value?: string;
+};
+declare const ForwardRefJsonEditor: React.ForwardRefExoticComponent<JSONEditorProps & React.RefAttributes<unknown>>;
+export default ForwardRefJsonEditor;

package/lib/json-editor/style/index.d.ts

@@ -0,0 +1,2 @@
+import 'jsoneditor/dist/jsoneditor.min.css';
+import './index.less';

package/lib/keep-tab/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { BadgeProps } from 'antd/lib/badge';
+import type { TabPaneProps, TabsProps } from 'antd/lib/tabs';
+export interface KeepTabProps extends TabsProps {
+    /** 由TabPane组成的children */
+    children: React.ReactNode;
+    /** 初始化选中面板的 key，如果没有设置 activeKey */
+    defaultActiveKey?: string;
+    /** 保存激活 tab 面板的的key名 */
+    saveActiveKeyName: string;
+    /** 当前激活 tab 面板的 key */
+    activeKey?: string;
+    /** 切换面板的回调 */
+    onChange?: (activeKey: string) => void;
+    /** antd Badge组件除count意外的所有props */
+    badgeProps?: Omit<BadgeProps, 'count'>;
+}
+export interface SelfTabPaneProps extends TabPaneProps {
+    count: Pick<BadgeProps, 'count'>;
+}
+declare const KeepTab: {
+    (props: KeepTabProps): JSX.Element;
+    defaultProps: {
+        saveActiveKeyName: string;
+    };
+    displayName: string;
+    TabPane: typeof import("rc-tabs").TabPane;
+};
+export default KeepTab;

package/lib/keep-tab/index.js

@@ -120,45 +120,47 @@ var use_url_state_1 = __importDefault(require("@ahooksjs/use-url-state"));
 
 var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
 
+var toArray_1 = __importDefault(require("rc-util/lib/Children/toArray"));
+
 var TabPane = tabs_1["default"].TabPane;
 var defaultBadgeProps = {};
 
 var KeepTab = function KeepTab(props) {
   var _a;
 
-  var _b = props.items,
-      items = _b === void 0 ? [] : _b,
+  var children = props.children,
       defaultActiveKey = props.defaultActiveKey,
       saveActiveKeyName = props.saveActiveKeyName,
       onChange = props.onChange,
-      _c = props.badgeProps,
-      badgeProps = _c === void 0 ? defaultBadgeProps : _c,
-      restProps = __rest(props, ["items", "defaultActiveKey", "saveActiveKeyName", "onChange", "badgeProps"]);
+      _b = props.badgeProps,
+      badgeProps = _b === void 0 ? defaultBadgeProps : _b,
+      restProps = __rest(props, ["children", "defaultActiveKey", "saveActiveKeyName", "onChange", "badgeProps"]);
 
   var defaultUrlParams = qsHelp_1["default"].getQueryObject();
 
-  var _d = __read((0, use_url_state_1["default"])((_a = {}, _a[saveActiveKeyName] = defaultUrlParams[saveActiveKeyName] || defaultActiveKey, _a)), 2),
-      urlParams = _d[0],
-      setUrlParams = _d[1];
+  var _c = __read((0, use_url_state_1["default"])((_a = {}, _a[saveActiveKeyName] = defaultUrlParams[saveActiveKeyName] || defaultActiveKey, _a)), 2),
+      urlParams = _c[0],
+      setUrlParams = _c[1];
 
-  var _e = __read((0, useControllableValue_1["default"])(props, {
+  var _d = __read((0, useControllableValue_1["default"])(props, {
     valuePropName: 'activeKey',
     defaultValue: defaultUrlParams[saveActiveKeyName] || defaultActiveKey
   }), 2),
-      tabActiveKey = _e[0],
-      setTabActiveKey = _e[1];
+      tabActiveKey = _d[0],
+      setTabActiveKey = _d[1];
 
+  var arrayChildren = (0, toArray_1["default"])(children);
   React.useEffect(function () {
     var _a;
 
-    if (!('activeKey' in props) && items) {
-      var resultActiveTab = (0, find_1["default"])(items, {
+    if (!('activeKey' in props)) {
+      var resultActiveTab = (0, find_1["default"])(arrayChildren, {
         key: urlParams[saveActiveKeyName]
       });
 
-      if (!resultActiveTab || resultActiveTab.disabled) {
-        setUrlParams((_a = {}, _a[saveActiveKeyName] = items[0].key, _a));
-        setTabActiveKey(items[0].key);
+      if (!resultActiveTab || resultActiveTab.props.disabled) {
+        setUrlParams((_a = {}, _a[saveActiveKeyName] = arrayChildren[0].key, _a));
+        setTabActiveKey(arrayChildren[0].key);
       }
     }
   }, [tabActiveKey]);
@@ -170,29 +172,29 @@ var KeepTab = function KeepTab(props) {
     setTabActiveKey(nextActiveKey);
   };
 
-  var resultItems = items.map(function (item) {
-    var count = item === null || item === void 0 ? void 0 : item.count;
+  var resultChildren = arrayChildren.map(function (childItem) {
+    var _a;
+
+    var count = (_a = childItem === null || childItem === void 0 ? void 0 : childItem.props) === null || _a === void 0 ? void 0 : _a.count;
 
     if (count) {
-      return __assign(__assign({}, item), {
-        label: React.createElement(badge_1["default"], __assign({
+      return React.cloneElement(childItem, {
+        tab: React.createElement(badge_1["default"], __assign({
           className: "tab-badge",
           count: count,
           offset: [16, -9]
-        }, badgeProps), React.createElement("span", null, item.label))
+        }, badgeProps), React.createElement("span", null, childItem.props.tab))
       });
     }
 
-    return item;
+    return childItem;
   });
   return React.createElement(tabs_1["default"], __assign({
     animated: false,
     onChange: handleTabChange,
     destroyInactiveTabPane: true,
     activeKey: tabActiveKey
-  }, restProps, {
-    items: resultItems
-  }));
+  }, restProps), resultChildren);
 };
 
 KeepTab.defaultProps = {

package/lib/keep-tab/style/index.css

@@ -589,7 +589,7 @@
   margin: 0 0 0 32px;
 }
 .ant-tabs-content {
-  position: relative;
+  display: flex;
   width: 100%;
 }
 .ant-tabs-content-holder {
@@ -597,37 +597,14 @@
   min-width: 0;
   min-height: 0;
 }
+.ant-tabs-content-animated {
+  transition: margin 0.3s;
+}
 .ant-tabs-tabpane {
+  flex: none;
+  width: 100%;
   outline: none;
 }
-.ant-tabs-tabpane-hidden {
-  display: none;
-}
-.ant-tabs-switch-appear,
-.ant-tabs-switch-enter {
-  transition: none;
-}
-.ant-tabs-switch-appear-start,
-.ant-tabs-switch-enter-start {
-  opacity: 0;
-}
-.ant-tabs-switch-appear-active,
-.ant-tabs-switch-enter-active {
-  opacity: 1;
-  transition: opacity 0.3s;
-}
-.ant-tabs-switch-leave {
-  position: absolute;
-  transition: none;
-  inset: 0;
-}
-.ant-tabs-switch-leave-start {
-  opacity: 1;
-}
-.ant-tabs-switch-leave-active {
-  opacity: 0;
-  transition: opacity 0.3s;
-}
 .ant-badge {
   box-sizing: border-box;
   margin: 0;