rc-tabs - npm Package Compare versions

Comparing version 11.16.1 to 12.0.0-alpha.0

es/index.d.ts

 import Tabs from './Tabs';
 import type { TabsProps } from './Tabs';
-import TabPane from './TabPanelList/TabPane';
-import type { TabPaneProps } from './TabPanelList/TabPane';
-export type { TabsProps, TabPaneProps };
-export { TabPane };
+export type { TabsProps };
 export default Tabs;

es/index.js

 import Tabs from './Tabs';
-import TabPane from './TabPanelList/TabPane';
-export { TabPane };
 export default Tabs;

es/interface.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import type React from 'react';
 import type { TabNavListProps } from './TabNavList';
@@ -19,5 +19,5 @@ import type { TabPaneProps } from './TabPanelList/TabPane';
 export declare type TabPosition = 'left' | 'right' | 'top' | 'bottom';
-export interface Tab extends TabPaneProps {
+export interface Tab extends Omit<TabPaneProps, 'tab'> {
     key: string;
-    node: React.ReactElement;
+    label: React.ReactNode;
 }
@@ -40,2 +40,3 @@ declare type RenderTabBarProps = {
     style: React.CSSProperties;
+    /** @deprecated It do not pass real TabPane node. Only for compatible usage.  */
     panes: React.ReactNode;
@@ -51,3 +52,3 @@ };
     onEdit: (type: 'add' | 'remove', info: {
-        key?: string;
+        key?: React.Key;
         event: React.MouseEvent | React.KeyboardEvent;
@@ -54,0 +55,0 @@ }) => void;

es/TabNavList/index.d.ts

@@ -8,3 +8,2 @@ import * as React from 'react';
     rtl: boolean;
-    panes: React.ReactNode;
     animated?: AnimatedConfig;
@@ -21,3 +20,3 @@ extra?: TabBarExtraContent;
     locale?: TabsLocale;
-    onTabClick: (activeKey: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onTabClick: (activeKey: React.Key, e: React.MouseEvent | React.KeyboardEvent) => void;
     onTabScroll?: OnTabScroll;
@@ -24,0 +23,0 @@ children?: (node: React.ReactElement) => React.ReactElement;

es/TabNavList/OperationNode.d.ts

@@ -11,3 +11,3 @@ import * as React from 'react';
     tabBarGutter?: number;
-    activeKey: string;
+    activeKey: React.Key;
     mobile: boolean;
@@ -14,0 +14,0 @@ moreIcon?: React.ReactNode;

es/TabNavList/OperationNode.js

@@ -77,3 +77,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
       disabled: tab.disabled
-    }, /*#__PURE__*/React.createElement("span", null, tab.tab), removable && /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement("span", null, tab.label), removable && /*#__PURE__*/React.createElement("button", {
       type: "button",
@@ -80,0 +80,0 @@ "aria-label": removeAriaLabel || 'remove',

es/TabNavList/TabNode.js

@@ -14,3 +14,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
       key = _ref$tab.key,
-      tab = _ref$tab.tab,
+      label = _ref$tab.label,
       disabled = _ref$tab.disabled,
@@ -74,3 +74,3 @@ closeIcon = _ref$tab.closeIcon,
     onFocus: onFocus
-  }, tab), removable && /*#__PURE__*/React.createElement("button", {
+  }, label), removable && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -77,0 +77,0 @@ "aria-label": removeAriaLabel || 'remove',

es/TabPanelList/index.js

@@ -0,1 +1,2 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -5,2 +6,3 @@ import * as React from 'react';
 import TabContext from '../TabContext';
+import TabPane from './TabPane';
 export default function TabPanelList(_ref) {
@@ -28,12 +30,12 @@ var id = _ref.id,
   }, tabs.map(function (tab) {
-    return /*#__PURE__*/React.cloneElement(tab.node, {
-      key: tab.key,
+    return /*#__PURE__*/React.createElement(TabPane, _extends({}, tab, {
       prefixCls: prefixCls,
+      id: id,
       tabKey: tab.key,
-      id: id,
       animated: tabPaneAnimated,
       active: tab.key === activeKey,
-      destroyInactiveTabPane: destroyInactiveTabPane
-    });
+      destroyInactiveTabPane: destroyInactiveTabPane,
+      key: tab.key
+    }));
   })));
 }

es/Tabs.d.ts

 import * as React from 'react';
-import TabPane from './TabPanelList/TabPane';
-import type { TabPosition, RenderTabBar, TabsLocale, EditableConfig, AnimatedConfig, OnTabScroll, TabBarExtraContent } from './interface';
-export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import type { TabPosition, RenderTabBar, TabsLocale, EditableConfig, AnimatedConfig, OnTabScroll, Tab, TabBarExtraContent } from './interface';
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
     prefixCls?: string;
     className?: string;
     style?: React.CSSProperties;
-    children?: React.ReactNode;
     id?: string;
+    items?: Tab[];
     activeKey?: string;
@@ -32,6 +31,2 @@ defaultActiveKey?: string;
 declare const ForwardTabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
-export declare type ForwardTabsType = typeof ForwardTabs & {
-    TabPane: typeof TabPane;
-};
-declare const _default: ForwardTabsType;
-export default _default;
+export default ForwardTabs;

es/Tabs.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _excluded = ["id", "prefixCls", "className", "children", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName"];
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName"];
 // Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
@@ -12,9 +12,7 @@ import * as React from 'react';
 import classNames from 'classnames';
-import toArray from "rc-util/es/Children/toArray";
 import isMobile from "rc-util/es/isMobile";
 import useMergedState from "rc-util/es/hooks/useMergedState";
-import TabNavList from './TabNavList';
 import TabPanelList from './TabPanelList';
-import TabPane from './TabPanelList/TabPane';
 import TabContext from './TabContext';
+import TabNavListWrapper from './TabNavList/Wrapper';
 /**
@@ -33,19 +31,2 @@ * Should added antd:
 
-function parseTabList(children) {
-  return toArray(children).map(function (node) {
-    if ( /*#__PURE__*/React.isValidElement(node)) {
-      var key = node.key !== undefined ? String(node.key) : undefined;
-      return _objectSpread(_objectSpread({
-        key: key
-      }, node.props), {}, {
-        node: node
-      });
-    }
-
-    return null;
-  }).filter(function (tab) {
-    return tab;
-  });
-}
-
 function Tabs(_ref, ref) {
@@ -58,3 +39,3 @@ var _classNames;
       className = _ref.className,
-      children = _ref.children,
+      items = _ref.items,
       direction = _ref.direction,
@@ -86,3 +67,7 @@ activeKey = _ref.activeKey,
 
-  var tabs = parseTabList(children);
+  var tabs = React.useMemo(function () {
+    return (items || []).filter(function (item) {
+      return item && _typeof(item) === 'object' && 'key' in item;
+    });
+  }, [items]);
   var rtl = direction === 'rtl';
@@ -210,3 +195,3 @@ var mergedAnimated;
     style: tabBarStyle,
-    panes: children,
+    panes: null,
     getPopupContainer: getPopupContainer,
@@ -216,8 +201,2 @@ popupClassName: popupClassName
 
-  if (renderTabBar) {
-    tabNavBar = renderTabBar(tabNavBarProps, TabNavList);
-  } else {
-    tabNavBar = /*#__PURE__*/React.createElement(TabNavList, tabNavBarProps);
-  }
-
   return /*#__PURE__*/React.createElement(TabContext.Provider, {
@@ -232,3 +211,5 @@ value: {
     className: classNames(prefixCls, "".concat(prefixCls, "-").concat(mergedTabPosition), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-mobile"), mobile), _defineProperty(_classNames, "".concat(prefixCls, "-editable"), editable), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), rtl), _classNames), className)
-  }, restProps), tabNavBar, /*#__PURE__*/React.createElement(TabPanelList, _extends({
+  }, restProps), tabNavBar, /*#__PURE__*/React.createElement(TabNavListWrapper, _extends({}, tabNavBarProps, {
+    renderTabBar: renderTabBar
+  })), /*#__PURE__*/React.createElement(TabPanelList, _extends({
     destroyInactiveTabPane: destroyInactiveTabPane
@@ -241,3 +222,7 @@ }, sharedProps, {
 var ForwardTabs = /*#__PURE__*/React.forwardRef(Tabs);
-ForwardTabs.TabPane = TabPane;
+
+if (process.env.NODE_ENV !== 'production') {
+  ForwardTabs.displayName = 'Tabs';
+}
+
 export default ForwardTabs;

lib/index.d.ts

 import Tabs from './Tabs';
 import type { TabsProps } from './Tabs';
-import TabPane from './TabPanelList/TabPane';
-import type { TabPaneProps } from './TabPanelList/TabPane';
-export type { TabsProps, TabPaneProps };
-export { TabPane };
+export type { TabsProps };
 export default Tabs;

lib/index.js

@@ -8,8 +8,2 @@ "use strict";
 });
-Object.defineProperty(exports, "TabPane", {
-  enumerable: true,
-  get: function get() {
-    return _TabPane.default;
-  }
-});
 exports.default = void 0;
@@ -19,5 +13,3 @@
 
-var _TabPane = _interopRequireDefault(require("./TabPanelList/TabPane"));
-
 var _default = _Tabs.default;
 exports.default = _default;

lib/interface.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import type React from 'react';
 import type { TabNavListProps } from './TabNavList';
@@ -19,5 +19,5 @@ import type { TabPaneProps } from './TabPanelList/TabPane';
 export declare type TabPosition = 'left' | 'right' | 'top' | 'bottom';
-export interface Tab extends TabPaneProps {
+export interface Tab extends Omit<TabPaneProps, 'tab'> {
     key: string;
-    node: React.ReactElement;
+    label: React.ReactNode;
 }
@@ -40,2 +40,3 @@ declare type RenderTabBarProps = {
     style: React.CSSProperties;
+    /** @deprecated It do not pass real TabPane node. Only for compatible usage.  */
     panes: React.ReactNode;
@@ -51,3 +52,3 @@ };
     onEdit: (type: 'add' | 'remove', info: {
-        key?: string;
+        key?: React.Key;
         event: React.MouseEvent | React.KeyboardEvent;
@@ -54,0 +55,0 @@ }) => void;

lib/TabNavList/index.d.ts

@@ -8,3 +8,2 @@ import * as React from 'react';
     rtl: boolean;
-    panes: React.ReactNode;
     animated?: AnimatedConfig;
@@ -21,3 +20,3 @@ extra?: TabBarExtraContent;
     locale?: TabsLocale;
-    onTabClick: (activeKey: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onTabClick: (activeKey: React.Key, e: React.MouseEvent | React.KeyboardEvent) => void;
     onTabScroll?: OnTabScroll;
@@ -24,0 +23,0 @@ children?: (node: React.ReactElement) => React.ReactElement;

lib/TabNavList/OperationNode.d.ts

@@ -11,3 +11,3 @@ import * as React from 'react';
     tabBarGutter?: number;
-    activeKey: string;
+    activeKey: React.Key;
     mobile: boolean;
@@ -14,0 +14,0 @@ moreIcon?: React.ReactNode;

lib/TabNavList/OperationNode.js

@@ -98,3 +98,3 @@ "use strict";
       disabled: tab.disabled
-    }, /*#__PURE__*/React.createElement("span", null, tab.tab), removable && /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement("span", null, tab.label), removable && /*#__PURE__*/React.createElement("button", {
       type: "button",
@@ -101,0 +101,0 @@ "aria-label": removeAriaLabel || 'remove',

lib/TabNavList/TabNode.js

@@ -32,3 +32,3 @@ "use strict";
       key = _ref$tab.key,
-      tab = _ref$tab.tab,
+      label = _ref$tab.label,
       disabled = _ref$tab.disabled,
@@ -92,3 +92,3 @@ closeIcon = _ref$tab.closeIcon,
     onFocus: onFocus
-  }, tab), removable && /*#__PURE__*/React.createElement("button", {
+  }, label), removable && /*#__PURE__*/React.createElement("button", {
     type: "button",
@@ -95,0 +95,0 @@ "aria-label": removeAriaLabel || 'remove',

lib/TabPanelList/index.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -21,2 +23,4 @@
 
+var _TabPane = _interopRequireDefault(require("./TabPane"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -48,12 +52,12 @@
   }, tabs.map(function (tab) {
-    return /*#__PURE__*/React.cloneElement(tab.node, {
-      key: tab.key,
+    return /*#__PURE__*/React.createElement(_TabPane.default, (0, _extends2.default)({}, tab, {
       prefixCls: prefixCls,
+      id: id,
       tabKey: tab.key,
-      id: id,
       animated: tabPaneAnimated,
       active: tab.key === activeKey,
-      destroyInactiveTabPane: destroyInactiveTabPane
-    });
+      destroyInactiveTabPane: destroyInactiveTabPane,
+      key: tab.key
+    }));
   })));
 }

lib/Tabs.d.ts

 import * as React from 'react';
-import TabPane from './TabPanelList/TabPane';
-import type { TabPosition, RenderTabBar, TabsLocale, EditableConfig, AnimatedConfig, OnTabScroll, TabBarExtraContent } from './interface';
-export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+import type { TabPosition, RenderTabBar, TabsLocale, EditableConfig, AnimatedConfig, OnTabScroll, Tab, TabBarExtraContent } from './interface';
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
     prefixCls?: string;
     className?: string;
     style?: React.CSSProperties;
-    children?: React.ReactNode;
     id?: string;
+    items?: Tab[];
     activeKey?: string;
@@ -32,6 +31,2 @@ defaultActiveKey?: string;
 declare const ForwardTabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
-export declare type ForwardTabsType = typeof ForwardTabs & {
-    TabPane: typeof TabPane;
-};
-declare const _default: ForwardTabsType;
-export default _default;
+export default ForwardTabs;

lib/Tabs.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -23,4 +25,2 @@
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var React = _interopRequireWildcard(require("react"));
@@ -30,4 +30,2 @@
 
-var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
-
 var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
@@ -37,12 +35,10 @@
 
-var _TabNavList = _interopRequireDefault(require("./TabNavList"));
-
 var _TabPanelList = _interopRequireDefault(require("./TabPanelList"));
 
-var _TabPane = _interopRequireDefault(require("./TabPanelList/TabPane"));
-
 var _TabContext = _interopRequireDefault(require("./TabContext"));
 
-var _excluded = ["id", "prefixCls", "className", "children", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName"];
+var _Wrapper = _interopRequireDefault(require("./TabNavList/Wrapper"));
 
+var _excluded = ["id", "prefixCls", "className", "items", "direction", "activeKey", "defaultActiveKey", "editable", "animated", "tabPosition", "tabBarGutter", "tabBarStyle", "tabBarExtraContent", "locale", "moreIcon", "moreTransitionName", "destroyInactiveTabPane", "renderTabBar", "onChange", "onTabClick", "onTabScroll", "getPopupContainer", "popupClassName"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -64,19 +60,2 @@
 
-function parseTabList(children) {
-  return (0, _toArray.default)(children).map(function (node) {
-    if ( /*#__PURE__*/React.isValidElement(node)) {
-      var key = node.key !== undefined ? String(node.key) : undefined;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        key: key
-      }, node.props), {}, {
-        node: node
-      });
-    }
-
-    return null;
-  }).filter(function (tab) {
-    return tab;
-  });
-}
-
 function Tabs(_ref, ref) {
@@ -89,3 +68,3 @@ var _classNames;
       className = _ref.className,
-      children = _ref.children,
+      items = _ref.items,
       direction = _ref.direction,
@@ -116,3 +95,7 @@ activeKey = _ref.activeKey,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var tabs = parseTabList(children);
+  var tabs = React.useMemo(function () {
+    return (items || []).filter(function (item) {
+      return item && (0, _typeof2.default)(item) === 'object' && 'key' in item;
+    });
+  }, [items]);
   var rtl = direction === 'rtl';
@@ -239,13 +222,6 @@ var mergedAnimated;
     style: tabBarStyle,
-    panes: children,
+    panes: null,
     getPopupContainer: getPopupContainer,
     popupClassName: popupClassName
   });
-
-  if (renderTabBar) {
-    tabNavBar = renderTabBar(tabNavBarProps, _TabNavList.default);
-  } else {
-    tabNavBar = /*#__PURE__*/React.createElement(_TabNavList.default, tabNavBarProps);
-  }
-
   return /*#__PURE__*/React.createElement(_TabContext.default.Provider, {
@@ -260,3 +236,5 @@ value: {
     className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(mergedTabPosition), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-mobile"), mobile), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-editable"), editable), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-rtl"), rtl), _classNames), className)
-  }, restProps), tabNavBar, /*#__PURE__*/React.createElement(_TabPanelList.default, (0, _extends2.default)({
+  }, restProps), tabNavBar, /*#__PURE__*/React.createElement(_Wrapper.default, (0, _extends2.default)({}, tabNavBarProps, {
+    renderTabBar: renderTabBar
+  })), /*#__PURE__*/React.createElement(_TabPanelList.default, (0, _extends2.default)({
     destroyInactiveTabPane: destroyInactiveTabPane
@@ -269,4 +247,8 @@ }, sharedProps, {
 var ForwardTabs = /*#__PURE__*/React.forwardRef(Tabs);
-ForwardTabs.TabPane = _TabPane.default;
+
+if (process.env.NODE_ENV !== 'production') {
+  ForwardTabs.displayName = 'Tabs';
+}
+
 var _default = ForwardTabs;
 exports.default = _default;

package.json

 {
   "name": "rc-tabs",
-  "version": "11.16.1",
+  "version": "12.0.0-alpha.0",
   "description": "tabs ui component for react",
@@ -5,0 +5,0 @@ "engines": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

151262

increased by3.7%

Number of package files

73

increased by7.35%

Lines of code

3515

increased by0.98%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

4

increased by100%

No dependency changes