@broxus/react-uikit 0.1.2 → 0.2.0

package/dist/esm/components/Nav/utils/nodeUtil.js

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
+import { Divider } from '../../Nav/Divider';
+import { Group } from '../../Nav/Group';
+import { Item } from '../../Nav/Item';
+import { Sub } from '../../Nav/Sub';
 export function parseChildren(children, keyPath) {
     return toArray(children).map((child, index) => {
         if (React.isValidElement(child)) {
@@ -21,3 +25,35 @@ export function parseChildren(children, keyPath) {
         return child;
     });
 }
+function convertItemsToNodes(list) {
+    return (list || [])
+        .map((opt, index) => {
+        if (opt && typeof opt === 'object') {
+            const { label, children, key, type, ...restProps } = opt;
+            const mergedKey = key ?? `tmp-${index}`;
+            // MenuItemGroup & SubMenuItem
+            if (children || type === 'group') {
+                if (type === 'group') {
+                    // Group
+                    return (React.createElement(Group, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+                }
+                // Sub Menu
+                return (React.createElement(Sub, { key: mergedKey, ...restProps, title: label }, convertItemsToNodes(children)));
+            }
+            // MenuItem & Divider
+            if (type === 'divider') {
+                return React.createElement(Divider, { key: mergedKey, ...restProps });
+            }
+            return (React.createElement(Item, { key: mergedKey, ...restProps }, label));
+        }
+        return null;
+    })
+        .filter(opt => opt);
+}
+export function parseItems(children, items, keyPath) {
+    let childNodes = children;
+    if (items) {
+        childNodes = convertItemsToNodes(items);
+    }
+    return parseChildren(childNodes, keyPath);
+}

package/dist/esm/components/Nav/utils/warnUtil.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 /**
  * `onClick` event return `info.item` which point to react node directly.
  * We should warning this since it will not work on FC.

package/dist/esm/components/Navbar/Center.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarCenterProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, unknown>;
-declare const defaultElement = "div";
-export declare function Center<E extends React.ElementType = typeof defaultElement>(props: NavbarCenterProps<E>): JSX.Element;
-export declare namespace Center {
-    var displayName: string;
+import { type PolymorphicProps } from '../Component';
+export interface NavbarCenterOwnProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
 }
-export {};
+export type NavbarCenterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarCenterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarCenterOwnProps>;
+export declare const Center: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarCenterProps<E>) => JSX.Element)>;

package/dist/esm/components/Navbar/Center.js

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Center(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames('uk-navbar-center', className), component: defaultElement, ...restProps }));
-}
+export const Center = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-center'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Center.displayName = 'Navbar.Center';
 }

package/dist/esm/components/Navbar/Container.d.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 export interface NavbarContainerOwnProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
     transparent?: boolean;
 }
-export declare type NavbarContainerProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, NavbarContainerOwnProps>;
-declare const defaultElement = "div";
-export declare function Container<E extends React.ElementType = typeof defaultElement>(props: NavbarContainerProps<E>): JSX.Element;
-export declare namespace Container {
-    var displayName: string;
-}
-export {};
+export type NavbarContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarContainerOwnProps>;
+export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarContainerProps<E>) => JSX.Element)>;

package/dist/esm/components/Navbar/Container.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Container(props) {
-    const { className, transparent, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames('uk-navbar-container', {
-            'uk-navbar-transparent': transparent,
+export const Container = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, transparent, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(`${rootCls}-container`, {
+            [`${rootCls}-transparent`]: transparent,
         }, className), component: defaultElement, ...restProps }));
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Container.displayName = 'Navbar.Container';
 }

package/dist/esm/components/Navbar/Item.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarItemProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, {
+import { type PolymorphicProps } from '../Component';
+export interface NavbarItemOwnProps extends React.HTMLAttributes<HTMLElement> {
     align?: 'left' | 'right' | 'center';
-}>;
-declare const defaultElement = "div";
-export declare function Item<E extends React.ElementType = typeof defaultElement>(props: NavbarItemProps<E>): JSX.Element;
-export declare namespace Item {
-    var displayName: string;
+    prefixCls?: string;
 }
-export {};
+export type NavbarItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarItemOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarItemOwnProps>;
+export declare const Item: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarItemProps<E>) => JSX.Element)>;

package/dist/esm/components/Navbar/Item.js

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Item(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames('uk-navbar-item', className), component: defaultElement, ...restProps }));
-}
+export const Item = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar-item'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Navbar.Item';
 }

package/dist/esm/components/Navbar/Left.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarLeftProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, unknown>;
-declare const defaultElement = "div";
-export declare function Left<E extends React.ElementType = typeof defaultElement>(props: NavbarLeftProps<E>): JSX.Element;
-export declare namespace Left {
-    var displayName: string;
+import { type PolymorphicProps } from '../Component';
+export interface NavbarLeftOwnProps extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
 }
-export {};
+export type NavbarLeftProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarLeftOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarLeftOwnProps>;
+export declare const Left: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: NavbarLeftProps<E>) => JSX.Element)>;

package/dist/esm/components/Navbar/Left.js

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 const defaultElement = 'div';
-export function Left(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames('uk-navbar-left', className), component: defaultElement, ...restProps }));
-}
+export const Left = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(`${rootCls}-left`, className), component: defaultElement, ...restProps }));
+});
 if (process.env.NODE_ENV !== 'production') {
     Left.displayName = 'Navbar.Left';
 }

package/dist/esm/components/Navbar/Nav.d.ts

@@ -1,4 +1,5 @@
-import type { NavProps } from '../Nav';
+/// <reference types="react" />
+import { type NavProps } from '../Nav';
 export declare function Nav(props: NavProps): JSX.Element;
 export declare namespace Nav {
     var displayName: string;

package/dist/esm/components/Navbar/Nav.js

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
 import { Nav as BaseNav } from '../Nav';
 export function Nav(props) {
-    const { className, ...restProps } = props;
-    return (React.createElement(BaseNav, { className: classNames('uk-navbar-nav', className), popupPrefixCls: "uk-navbar-dropdown", ...restProps, mode: "horizontal" }));
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'navbar'), [config, prefixCls]);
+    return (React.createElement(BaseNav, { className: classNames(`${rootCls}-nav`, className), popupPrefixCls: `${rootCls}-dropdown`, ...restProps, mode: "horizontal" }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Nav.displayName = 'Navbar.Nav';

package/dist/esm/components/Navbar/Right.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarRightProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, unknown>;
-declare const defaultElement = "div";
+import { type PolymorphicProps } from '../Component';
+export type NavbarRightProps<E extends React.ElementType = React.ElementType> = PolymorphicProps<E, unknown>;
+declare const defaultElement: React.ElementType;
 export declare function Right<E extends React.ElementType = typeof defaultElement>(props: NavbarRightProps<E>): JSX.Element;
 export declare namespace Right {
     var displayName: string;

package/dist/esm/components/Navbar/Toggle.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
-export declare type NavbarToggleProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, {
+import { type PolymorphicProps } from '../Component';
+export type NavbarToggleOwnProps = {
     icon?: boolean;
-}>;
-declare const defaultElement = "div";
+};
+export type NavbarToggleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<NavbarToggleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, NavbarToggleOwnProps>;
+declare const defaultElement: React.ElementType;
 export declare function Toggle<E extends React.ElementType = typeof defaultElement>(props: NavbarToggleProps<E>): JSX.Element;
 export declare namespace Toggle {
     var displayName: string;

package/dist/esm/components/Navbar/index.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { Center } from './Center';
-import { Container } from './Container';
-import { Item } from './Item';
-import { Left } from './Left';
-import { Nav } from './Nav';
-import { Right } from './Right';
-import { Toggle } from './Toggle';
-import type { NavbarProps } from './Navbar';
+import type * as React from 'react';
+import { Center } from '../Navbar/Center';
+import { Container } from '../Navbar/Container';
+import { type NavbarProps } from '../Navbar/Navbar';
+import { Item } from '../Navbar/Item';
+import { Left } from '../Navbar/Left';
+import { Nav } from '../Navbar/Nav';
+import { Right } from '../Navbar/Right';
+import { Toggle } from '../Navbar/Toggle';
 import './index.scss';
 export type { NavbarProps };
-export interface CompoundedNavbar extends React.FunctionComponent<NavbarProps> {
+export interface Navbar extends React.FunctionComponent<NavbarProps> {
     Center: typeof Center;
     Container: typeof Container;
     Item: typeof Item;
@@ -18,4 +18,4 @@ export interface CompoundedNavbar extends React.FunctionComponent<NavbarProps> {
     Right: typeof Right;
     Toggle: typeof Toggle;
 }
-export declare const Navbar: CompoundedNavbar;
+export declare const Navbar: Navbar;

package/dist/esm/components/Navbar/index.js

@@ -1,11 +1,11 @@
-import { Center } from './Center';
-import { Container } from './Container';
-import { Navbar as InternalNavbar } from './Navbar';
-import { Item } from './Item';
-import { Left } from './Left';
-import { Nav } from './Nav';
-import { Right } from './Right';
-import { Toggle } from './Toggle';
+import { Center } from '../Navbar/Center';
+import { Container } from '../Navbar/Container';
+import { Navbar as InternalNavbar } from '../Navbar/Navbar';
+import { Item } from '../Navbar/Item';
+import { Left } from '../Navbar/Left';
+import { Nav } from '../Navbar/Nav';
+import { Right } from '../Navbar/Right';
+import { Toggle } from '../Navbar/Toggle';
 import './index.scss';
 export const Navbar = InternalNavbar;
 Navbar.Center = Center;

package/dist/esm/components/Progress/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import './index.scss';
+export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
+    prefixCls?: string;
+}
+export declare const Progress: React.MemoExoticComponent<(props: ProgressProps) => JSX.Element>;

package/dist/esm/components/Progress/index.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
+import './index.scss';
+export const Progress = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'progress'), [config, prefixCls]);
+    return React.createElement("progress", { className: classNames(rootCls, className), ...restProps });
+});

package/dist/esm/components/Progress/index.scss

@@ -0,0 +1,129 @@
+// Name:            Progress
+// Description:     Component to create progress bars
+//
+// Component:       `uk-progress`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Progress
+ ========================================================================== */
+
+/*
+ * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 2. Remove default style
+ * 3. Behave like a block element
+ * 4. Remove borders in Firefox and Edge
+ * 5. Set background color for progress container in Firefox, IE11 and Edge
+ * 6. Style
+ */
+
+.uk-progress {
+    /* 2 */
+    appearance: none;
+
+    /* 5 */
+    background-color: var(--progress-background);
+
+    /* 4 */
+    border: 0;
+
+    /* 3 */
+    display: block;
+    height: var(--progress-height);
+
+    /* 6 */
+    margin-bottom: var(--progress-margin-vertical);
+
+    /* 1 */
+    vertical-align: baseline;
+    width: 100%;
+    @if mixin-exists(hook-progress) {
+        @include hook-progress;
+    }
+}
+
+/* Add margin if adjacent element */
+* + .uk-progress { margin-top: var(--progress-margin-vertical); }
+
+/*
+ * Remove animated circles for indeterminate state in IE11 and Edge
+ */
+
+.uk-progress:indeterminate { color: transparent; }
+
+/*
+ * Progress container
+ * 2. Remove progress bar for indeterminate state in Firefox
+ */
+
+.uk-progress::-webkit-progress-bar {
+    background-color: var(--progress-background);
+    @if mixin-exists(hook-progress) {
+        @include hook-progress;
+    }
+}
+
+/* 2 */
+.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
+
+/*
+ * Progress bar
+ * 1. Remove right border in IE11 and Edge
+ */
+
+.uk-progress::-webkit-progress-value {
+    background-color: var(--progress-bar-background);
+    transition: width 0.6s ease;
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+.uk-progress::-moz-progress-bar {
+    background-color: var(--progress-bar-background);
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+.uk-progress::-ms-fill {
+    background-color: var(--progress-bar-background);
+
+    /* 1 */
+    border: 0;
+    transition: width 0.6s ease;
+    @if mixin-exists(hook-progress-bar) {
+        @include hook-progress-bar;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-progress-misc) {
+    @include hook-progress-misc;
+}
+
+// @mixin hook-progress() {}
+// @mixin hook-progress-bar() {}
+// @mixin hook-progress-misc() {}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --progress-height: #{$progress-height};
+    --progress-margin-vertical: var(--global-margin);
+    --progress-background: var(--global-muted-background);
+    --progress-bar-background: var(--global-primary-background);
+}

package/dist/esm/components/Section/index.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import type { PolymorphicComponentProps } from '../Component';
+import { type PolymorphicProps } from '../Component';
 import './index.scss';
-export declare type SectionOwnProps = {
+export type SectionOwnProps = {
     color?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
 };
-export declare type SectionProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, SectionOwnProps>;
-declare const defaultElement = "section";
-export declare function Section<E extends React.ElementType = typeof defaultElement>(props: SectionProps<E>): JSX.Element;
-export {};
+export type SectionProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<SectionOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, SectionOwnProps>;
+export declare const Section: React.MemoExoticComponent<(<E extends React.ElementType<any> = "section">(props: SectionProps<E>) => JSX.Element)>;

package/dist/esm/components/Section/index.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Component } from '../Component';
+import { useConfig } from '../ConfrigProvider';
 import './index.scss';
 const defaultElement = 'section';
-export function Section(props) {
-    const { className, color, preserveColor, size, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames('uk-section', {
-            [`uk-section-${size}`]: size !== undefined,
-            [`uk-section-${color}`]: color !== undefined,
-            'uk-preserve-color': preserveColor,
+export const Section = React.memo((props) => {
+    const config = useConfig();
+    const { className, color, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'section'), [config, prefixCls]);
+    return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${rootCls}-${size}`]: size !== undefined,
+            [`${rootCls}-${color}`]: color !== undefined,
+            [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
         }, className), component: defaultElement, ...restProps }));
-}
+});

package/dist/esm/components/Spinner/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './index.scss';
-interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    prefixCls?: string;
     ratio?: number;
 }
-export declare function Spinner(props: Props): JSX.Element;
-export {};
+export declare function Spinner(props: SpinnerProps): JSX.Element;

package/dist/esm/components/Spinner/index.js

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { defaultProps, getSize } from '../Icon';
+import { useConfig } from '../ConfrigProvider';
+import { defaultSvgProps, getSize } from '../Icon';
 import './index.scss';
 export function Spinner(props) {
-    const { className, ratio, ...restProps } = props;
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, ratio, ...restProps } = props;
     return (React.createElement("span", { className: classNames([
-            'uk-spinner',
-            'uk-icon',
+            `${prefixCls || config.prefixCls}-spinner`,
+            `${prefixCls || config.prefixCls}-icon`,
         ], className), ...restProps },
-        React.createElement("svg", { ...defaultProps, ...getSize(20, 20, ratio), viewBox: "0 0 30 30" },
-            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: "15", cy: "15", r: "14" }))));
+        React.createElement("svg", { ...defaultSvgProps, ...getSize(20, 20, ratio), viewBox: "0 0 30 30" },
+            React.createElement("circle", { fill: "none", stroke: "currentColor", cx: 15, cy: 15, r: 14 }))));
 }

package/dist/esm/components/Tabs/index.d.ts

@@ -1,20 +1,16 @@
 import * as React from 'react';
-import { TabPane } from 'rc-tabs';
-import type { TabPaneProps, TabsProps } from 'rc-tabs';
+import { type TabsProps as RcTabsProps } from 'rc-tabs';
+import { type Tab, type TabPosition as TabsPosition } from 'rc-tabs/lib/interface';
 import './index.scss';
-export type { TabPaneProps };
-export declare type TabType = 'line' | 'card' | 'editable-card';
-export declare type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
-export interface TabProps extends Exclude<TabsProps, 'editable'> {
+export { type Tab };
+export type TabType = 'line' | 'card' | 'editable-card';
+export { type TabsPosition };
+export interface TabsProps extends Exclude<RcTabsProps, 'editable'> {
     addIcon?: React.ReactNode;
     centered?: boolean;
     hideAdd?: boolean;
-    prefixCls?: string;
     size?: string;
     type?: TabType;
     onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare function Tabs(props: TabProps): JSX.Element;
-export declare namespace Tabs {
-    var Pane: typeof TabPane;
-}
+export declare const Tabs: React.MemoExoticComponent<(props: TabsProps) => JSX.Element>;

package/dist/esm/components/Tabs/index.js

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import RcTabs, { TabPane } from 'rc-tabs';
+import RcTabs from 'rc-tabs';
 import { useConfig } from '../ConfrigProvider';
-import './index.scss';
 import { Icon } from '../Icon';
-export function Tabs(props) {
+import { getMotionName } from '../../utils';
+import './index.scss';
+export const Tabs = React.memo((props) => {
     const config = useConfig();
-    const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon, { icon: "more_horizontal" }), prefixCls = `${config.prefixCls}-tabs`, size, type, onEdit, ...restProps } = props;
-    let editable;
-    if (type === 'editable-card') {
-        editable = {
+    const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
+    const editable = React.useMemo(() => type === 'editable-card'
+        ? {
             addIcon: addIcon || React.createElement(Icon, { icon: "add" }),
             removeIcon: React.createElement(Icon, { icon: "close" }),
             showAdd: hideAdd !== true,
@@ -18,13 +19,12 @@ export function Tabs(props) {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 onEdit?.(editType === 'add' ? event : key, editType);
             },
-        };
-    }
-    return (React.createElement(RcTabs, { direction: direction, moreTransitionName: `${config.prefixCls}-motion-slide-up`, ...restProps, className: classNames({
-            [`${prefixCls}-${size}`]: size,
-            [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type),
-            [`${prefixCls}-editable-card`]: type === 'editable-card',
-            [`${prefixCls}-centered`]: centered,
-        }, className), editable: editable, moreIcon: moreIcon, prefixCls: prefixCls }));
-}
-Tabs.Pane = TabPane;
+        }
+        : undefined, [addIcon, hideAdd, onEdit, type]);
+    return (React.createElement(RcTabs, { direction: direction, moreTransitionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: classNames({
+            [`${rootCls}-${size}`]: size,
+            [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
+            [`${rootCls}-editable-card`]: type === 'editable-card',
+            [`${rootCls}-centered`]: centered,
+        }, className), editable: editable, moreIcon: moreIcon, prefixCls: rootCls }));
+});