@clayui/tabs 3.78.3 → 3.79.0

package/lib/Content.d.ts

@@ -4,18 +4,27 @@
  */
 import React from 'react';
 export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @ignore
+     */
+    active?: React.Key;
     /**
      * Receives a number that indicates the `tabkey` to be rendered.
+     * @deprecated since v3.78.2 - No longer needed in new composition.
      */
-    activeIndex: number;
+    activeIndex?: number;
     /**
      * Children elements received from ClayTabs.Content component.
      */
-    children: Array<React.ReactElement>;
+    children: React.ReactNode;
     /**
      * Flag to indicate if `fade` classname that applies an fading animation should be applied.
      */
     fade?: boolean;
+    /**
+     * @ignore
+     */
+    tabsId?: string;
 }
-declare const Content: ({ activeIndex, children, className, fade, ...otherProps }: IProps) => JSX.Element;
+declare const Content: ({ active, activeIndex, children, className, fade, tabsId, ...otherProps }: IProps) => JSX.Element;
 export default Content;

package/lib/Content.js

@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _excluded = ["activeIndex", "children", "className", "fade"];
+var _excluded = ["active", "activeIndex", "children", "className", "fade", "tabsId"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,20 +26,28 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Content = function Content(_ref) {
-  var _ref$activeIndex = _ref.activeIndex,
+  var active = _ref.active,
+      _ref$activeIndex = _ref.activeIndex,
       activeIndex = _ref$activeIndex === void 0 ? 0 : _ref$activeIndex,
       children = _ref.children,
       className = _ref.className,
       _ref$fade = _ref.fade,
       fade = _ref$fade === void 0 ? false : _ref$fade,
+      tabsId = _ref.tabsId,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)('tab-content', className)
   }, otherProps), _react.default.Children.map(children, function (child, index) {
-    return child && /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
-      active: activeIndex === index,
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+
+    return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      active: typeof active === 'number' ? active === index : activeIndex === index,
+      'aria-labelledby': tabsId ? "".concat(tabsId, "-tab-").concat(index) : child.props['aria-labelledby'],
       fade: fade,
+      id: tabsId ? "".concat(tabsId, "-tabpanel-").concat(index) : child.props.id,
       key: index
     }));
   }));

package/lib/List.d.ts

@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { InternalDispatch } from '@clayui/shared';
+import React from 'react';
+export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * @ignore
+     */
+    activation?: 'manual' | 'automatic';
+    /**
+     * @ignore
+     */
+    active?: React.Key;
+    /**
+     * The tabs content.
+     */
+    children: React.ReactNode;
+    /**
+     * The custom class.
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    displayType?: null | 'basic' | 'underline';
+    /**
+     * @ignore
+     */
+    justified?: boolean;
+    /**
+     * @ignore
+     */
+    modern?: boolean;
+    /**
+     * @ignore
+     */
+    onActiveChange?: InternalDispatch<number>;
+    /**
+     * @ignore
+     */
+    tabsId?: string;
+}
+export declare function List({ activation, active, children, className, displayType, justified, modern, onActiveChange, tabsId, ...otherProps }: IProps): JSX.Element;
+export declare namespace List {
+    var displayName: string;
+}

package/lib/List.js

@@ -0,0 +1,96 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = List;
+
+var _shared = require("@clayui/shared");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _excluded = ["activation", "active", "children", "className", "displayType", "justified", "modern", "onActiveChange", "tabsId"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function List(_ref) {
+  var activation = _ref.activation,
+      active = _ref.active,
+      children = _ref.children,
+      className = _ref.className,
+      displayType = _ref.displayType,
+      justified = _ref.justified,
+      modern = _ref.modern,
+      onActiveChange = _ref.onActiveChange,
+      tabsId = _ref.tabsId,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var tabsRef = (0, _react.useRef)(null);
+
+  var _useNavigation = (0, _shared.useNavigation)({
+    activation: activation,
+    containeRef: tabsRef,
+    orientation: 'horizontal'
+  }),
+      onKeyDown = _useNavigation.onKeyDown;
+
+  return /*#__PURE__*/_react.default.createElement("ul", _extends({}, otherProps, {
+    className: (0, _classnames.default)('nav', {
+      'nav-justified': justified
+    }, !displayType ? {
+      'nav-tabs': !modern,
+      'nav-underline': modern
+    } : {
+      'nav-tabs': displayType === 'basic',
+      'nav-underline': displayType === 'underline'
+    }, className),
+    onKeyDown: onKeyDown,
+    ref: tabsRef,
+    role: "tablist"
+  }), _react.default.Children.map(children, function (child, index) {
+    var _child$props$innerPro;
+
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      active: child.props.active !== undefined ? child.props.active : active === index,
+      innerProps: _objectSpread({
+        'aria-controls': tabsId && "".concat(tabsId, "-tabpanel-").concat(index),
+        id: tabsId && "".concat(tabsId, "-tab-").concat(index)
+      }, (_child$props$innerPro = child.props.innerProps) !== null && _child$props$innerPro !== void 0 ? _child$props$innerPro : {}),
+      onClick: function onClick(event) {
+        var onClick = child.props.onClick;
+
+        if (onClick) {
+          onClick(event);
+        } else {
+          onActiveChange(index);
+        }
+      }
+    });
+  }));
+}
+
+List.displayName = 'ClayTabsList';

package/lib/TabPane.d.ts

@@ -13,5 +13,5 @@ export interface ITabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     fade?: boolean;
 }
-declare const TabPane: ({ active, children, className, fade, ...otherProps }: ITabPaneProps) => JSX.Element;
+declare const TabPane: ({ active, children, className, fade, tabIndex, ...otherProps }: ITabPaneProps) => JSX.Element;
 export default TabPane;

package/lib/TabPane.js

@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _excluded = ["active", "children", "className", "fade"];
+var _excluded = ["active", "children", "className", "fade", "tabIndex"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -44,6 +44,8 @@ var TabPane = function TabPane(_ref) {
       children = _ref.children,
       className = _ref.className,
       fade = _ref.fade,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = _react.default.useState(active),
@@ -86,7 +88,7 @@ var TabPane = function TabPane(_ref) {
       show: internalShow
     }, className),
     role: "tabpanel",
-    tabIndex: 0
+    tabIndex: tabIndex
   }), children);
 };
 

package/lib/index.d.ts

@@ -6,6 +6,7 @@ import { InternalDispatch } from '@clayui/shared';
 import React from 'react';
 import Content from './Content';
 import Item from './Item';
+import { List } from './List';
 import TabPane from './TabPane';
 export declare type DisplayType = null | 'basic' | 'underline';
 export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
@@ -29,6 +30,11 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
      * Determines how tab is displayed.
      */
     displayType?: DisplayType;
+    /**
+     * Flag to indicate if `fade` classname that applies an fading animation
+     * should be applied.
+     */
+    fade?: boolean;
     /**
      * Justify the nav items according the tab content.
      */
@@ -44,14 +50,18 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 }
 declare function ClayTabs(props: IProps): JSX.Element & {
     Content: typeof Content;
+    Item: typeof Item;
+    List: typeof List;
+    Panels: typeof Content;
     TabPane: typeof TabPane;
     TabPanel: typeof TabPane;
-    Item: typeof Item;
 };
 declare namespace ClayTabs {
-    var Content: ({ activeIndex, children, className, fade, ...otherProps }: import("./Content").IProps) => JSX.Element;
-    var TabPane: ({ active, children, className, fade, ...otherProps }: import("./TabPane").ITabPaneProps) => JSX.Element;
-    var TabPanel: ({ active, children, className, fade, ...otherProps }: import("./TabPane").ITabPaneProps) => JSX.Element;
+    var Content: ({ active, activeIndex, children, className, fade, tabsId, ...otherProps }: import("./Content").IProps) => JSX.Element;
+    var Panels: ({ active, activeIndex, children, className, fade, tabsId, ...otherProps }: import("./Content").IProps) => JSX.Element;
     var Item: React.ForwardRefExoticComponent<import("./Item").IProps & React.RefAttributes<any>>;
+    var List: typeof import("./List").List;
+    var TabPane: ({ active, children, className, fade, tabIndex, ...otherProps }: import("./TabPane").ITabPaneProps) => JSX.Element;
+    var TabPanel: ({ active, children, className, fade, tabIndex, ...otherProps }: import("./TabPane").ITabPaneProps) => JSX.Element;
 }
 export default ClayTabs;

package/lib/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,21 +7,17 @@ exports.default = void 0;
 
 var _shared = require("@clayui/shared");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _Content = _interopRequireDefault(require("./Content"));
 
 var _Item = _interopRequireDefault(require("./Item"));
 
-var _TabPane = _interopRequireDefault(require("./TabPane"));
+var _List = require("./List");
 
-var _excluded = ["activation", "active", "children", "className", "defaultActive", "displayType", "justified", "modern", "onActiveChange"];
-
-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); }
+var _TabPane = _interopRequireDefault(require("./TabPane"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _excluded = ["activation", "active", "children", "className", "defaultActive", "displayType", "fade", "justified", "modern", "onActiveChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -46,6 +40,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function ClayTabs(_ref) {
+  var _left$type;
+
   var _ref$activation = _ref.activation,
       activation = _ref$activation === void 0 ? 'manual' : _ref$activation,
       externalActive = _ref.active,
@@ -54,14 +50,14 @@ function ClayTabs(_ref) {
       _ref$defaultActive = _ref.defaultActive,
       defaultActive = _ref$defaultActive === void 0 ? 0 : _ref$defaultActive,
       displayType = _ref.displayType,
+      _ref$fade = _ref.fade,
+      fade = _ref$fade === void 0 ? false : _ref$fade,
       justified = _ref.justified,
       _ref$modern = _ref.modern,
       modern = _ref$modern === void 0 ? true : _ref$modern,
       onActiveChange = _ref.onActiveChange,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var tabsRef = (0, _react.useRef)(null);
-
   var _useInternalState = (0, _shared.useInternalState)({
     defaultName: 'defaultActive',
     defaultValue: defaultActive,
@@ -74,58 +70,49 @@ function ClayTabs(_ref) {
       active = _useInternalState2[0],
       setActive = _useInternalState2[1];
 
-  return /*#__PURE__*/_react.default.createElement("ul", _extends({}, otherProps, {
-    className: (0, _classnames.default)('nav', {
-      'nav-justified': justified
-    }, !displayType ? {
-      'nav-tabs': !modern,
-      'nav-underline': modern
-    } : {
-      'nav-tabs': displayType === 'basic',
-      'nav-underline': displayType === 'underline'
-    }, className),
-    onKeyDown: function onKeyDown(event) {
-      if (!tabsRef.current) {
-        return;
-      }
-
-      if (event.key === _shared.Keys.Left || event.key === _shared.Keys.Right) {
-        var tabs = Array.from(tabsRef.current.querySelectorAll(_shared.FOCUSABLE_ELEMENTS.join(',')));
-        var activeElement = document.activeElement;
-        var position = tabs.indexOf(activeElement);
-        var tab = tabs[event.key === _shared.Keys.Left ? position - 1 : position + 1];
-
-        if (tab) {
-          tab.focus();
-
-          if (activation === 'automatic') {
-            var newActive = Array.from(tabsRef.current.querySelectorAll('a, button')).indexOf(tab);
-            setActive(newActive);
-          }
-        }
-      }
-    },
-    ref: tabsRef,
-    role: "tablist"
-  }), _react.default.Children.map(children, function (child, index) {
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      active: child.props.active !== undefined ? child.props.active : active === index,
-      onClick: function onClick(event) {
-        var onClick = child.props.onClick;
-
-        if (onClick) {
-          onClick(event);
-        } else {
-          setActive(index);
-        }
-      }
-    });
-  }));
+  var _React$Children$toArr = _react.default.Children.toArray(children),
+      _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
+      left = _React$Children$toArr2[0],
+      right = _React$Children$toArr2[1];
+
+  var tabsId = (0, _shared.useId)(); // @ts-ignore
+
+  if ((left === null || left === void 0 ? void 0 : (_left$type = left.type) === null || _left$type === void 0 ? void 0 : _left$type.displayName) === 'ClayTabsList') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(left, {
+      activation: activation,
+      active: active,
+      displayType: displayType,
+      justified: justified,
+      modern: modern,
+      onActiveChange: setActive,
+      tabsId: tabsId
+    }), /*#__PURE__*/_react.default.isValidElement(right) && /*#__PURE__*/_react.default.cloneElement(right, {
+      active: active,
+      fade: fade,
+      tabsId: tabsId
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_List.List, _extends({}, otherProps, {
+    activation: activation,
+    active: active,
+    className: className,
+    displayType: displayType,
+    justified: justified,
+    modern: modern,
+    onActiveChange: setActive
+  }), children);
 }
+/**
+ * @deprecated since v3.78.2 - Use new composition with Tabs.List and Tabs.Panels.
+ */
+
 
 ClayTabs.Content = _Content.default;
+ClayTabs.Panels = _Content.default;
+ClayTabs.Item = _Item.default;
+ClayTabs.List = _List.List;
 ClayTabs.TabPane = _TabPane.default;
 ClayTabs.TabPanel = _TabPane.default;
-ClayTabs.Item = _Item.default;
 var _default = ClayTabs;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tabs",
-	"version": "3.78.3",
+	"version": "3.79.0",
 	"description": "ClayTabs component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -26,7 +26,7 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.78.3",
+		"@clayui/shared": "^3.79.0",
 		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
@@ -37,5 +37,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "6066b46f9b7e7455603e9f02e9ebc4f792a619e1"
+	"gitHead": "4bf7ee4967efc6c2c46aee28b69569f764a1926c"
 }

package/src/Content.tsx

@@ -7,41 +7,62 @@ import classNames from 'classnames';
 import React from 'react';
 
 export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * @ignore
+	 */
+	active?: React.Key;
+
 	/**
 	 * Receives a number that indicates the `tabkey` to be rendered.
+	 * @deprecated since v3.78.2 - No longer needed in new composition.
 	 */
-	activeIndex: number;
+	activeIndex?: number;
 
 	/**
 	 * Children elements received from ClayTabs.Content component.
 	 */
-	children: Array<React.ReactElement>;
+	children: React.ReactNode;
 
 	/**
 	 * Flag to indicate if `fade` classname that applies an fading animation should be applied.
 	 */
 	fade?: boolean;
+
+	/**
+	 * @ignore
+	 */
+	tabsId?: string;
 }
 
 const Content = ({
+	active,
 	activeIndex = 0,
 	children,
 	className,
 	fade = false,
+	tabsId,
 	...otherProps
 }: IProps) => {
 	return (
 		<div className={classNames('tab-content', className)} {...otherProps}>
 			{React.Children.map(children, (child, index) => {
-				return (
-					child &&
-					React.cloneElement(child, {
-						...child.props,
-						active: activeIndex === index,
-						fade,
-						key: index,
-					})
-				);
+				if (!React.isValidElement(child)) {
+					return child;
+				}
+
+				return React.cloneElement(child, {
+					...child.props,
+					active:
+						typeof active === 'number'
+							? active === index
+							: activeIndex === index,
+					'aria-labelledby': tabsId
+						? `${tabsId}-tab-${index}`
+						: child.props['aria-labelledby'],
+					fade,
+					id: tabsId ? `${tabsId}-tabpanel-${index}` : child.props.id,
+					key: index,
+				});
 			})}
 		</div>
 	);

package/src/List.tsx

@@ -0,0 +1,132 @@
+/**
+ * SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {InternalDispatch, useNavigation} from '@clayui/shared';
+import classNames from 'classnames';
+import React, {useRef} from 'react';
+
+export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+	/**
+	 * @ignore
+	 */
+	activation?: 'manual' | 'automatic';
+
+	/**
+	 * @ignore
+	 */
+	active?: React.Key;
+
+	/**
+	 * The tabs content.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * The custom class.
+	 */
+	className?: string;
+
+	/**
+	 * @ignore
+	 */
+	displayType?: null | 'basic' | 'underline';
+
+	/**
+	 * @ignore
+	 */
+	justified?: boolean;
+
+	/**
+	 * @ignore
+	 */
+	modern?: boolean;
+
+	/**
+	 * @ignore
+	 */
+	onActiveChange?: InternalDispatch<number>;
+
+	/**
+	 * @ignore
+	 */
+	tabsId?: string;
+}
+
+export function List({
+	activation,
+	active,
+	children,
+	className,
+	displayType,
+	justified,
+	modern,
+	onActiveChange,
+	tabsId,
+	...otherProps
+}: IProps) {
+	const tabsRef = useRef<HTMLUListElement>(null);
+
+	const {onKeyDown} = useNavigation({
+		activation,
+		containeRef: tabsRef,
+		orientation: 'horizontal',
+	});
+
+	return (
+		<ul
+			{...otherProps}
+			className={classNames(
+				'nav',
+				{'nav-justified': justified},
+				!displayType
+					? {
+							'nav-tabs': !modern,
+							'nav-underline': modern,
+					  }
+					: {
+							'nav-tabs': displayType === 'basic',
+							'nav-underline': displayType === 'underline',
+					  },
+
+				className
+			)}
+			onKeyDown={onKeyDown}
+			ref={tabsRef}
+			role="tablist"
+		>
+			{React.Children.map(children, (child, index) => {
+				if (!React.isValidElement(child)) {
+					return child;
+				}
+
+				return React.cloneElement(child as React.ReactElement, {
+					active:
+						(child as React.ReactElement).props.active !== undefined
+							? (child as React.ReactElement).props.active
+							: active === index,
+					innerProps: {
+						'aria-controls':
+							tabsId && `${tabsId}-tabpanel-${index}`,
+						id: tabsId && `${tabsId}-tab-${index}`,
+						...(child.props.innerProps ?? {}),
+					},
+					onClick: (
+						event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+					) => {
+						const {onClick} = (child as React.ReactElement).props;
+
+						if (onClick) {
+							onClick(event);
+						} else {
+							onActiveChange!(index);
+						}
+					},
+				});
+			})}
+		</ul>
+	);
+}
+
+List.displayName = 'ClayTabsList';

package/src/TabPane.tsx

@@ -28,6 +28,7 @@ const TabPane = ({
 	children,
 	className,
 	fade,
+	tabIndex = 0,
 	...otherProps
 }: ITabPaneProps) => {
 	const [internalActive, setInternalActive] = React.useState(active);
@@ -68,7 +69,7 @@ const TabPane = ({
 				className
 			)}
 			role="tabpanel"
-			tabIndex={0}
+			tabIndex={tabIndex}
 		>
 			{children}
 		</div>

package/src/__tests__/index.tsx

@@ -148,4 +148,48 @@ describe('ClayTabs', () => {
 		fireEvent.click(tabItems[1]);
 		expect(onClick).toBeCalled();
 	});
+
+	it('renders elements not valid tabs should continue to work', () => {
+		const {getAllByRole} = render(
+			<>
+				<ClayTabs>
+					{false && <ClayTabs.Item active>One</ClayTabs.Item>}
+					<ClayTabs.Item>Two</ClayTabs.Item>
+				</ClayTabs>
+				<ClayTabs.Content activeIndex={1}>
+					{false && <ClayTabs.TabPane>Content One</ClayTabs.TabPane>}
+					<ClayTabs.TabPane>Content Two</ClayTabs.TabPane>
+				</ClayTabs.Content>
+			</>
+		);
+
+		const tabItems = getAllByRole('tab');
+		const tabPanels = getAllByRole('tabpanel');
+
+		expect(tabItems[0].innerHTML).toBe('Two');
+		expect(tabItems.length).toBe(1);
+
+		expect(tabPanels[0].innerHTML).toBe('Content Two');
+		expect(tabPanels.length).toBe(1);
+	});
+
+	it('renders the new default composition', () => {
+		const {getAllByRole} = render(
+			<ClayTabs>
+				<ClayTabs.List>
+					<ClayTabs.Item>Tab 1</ClayTabs.Item>
+					<ClayTabs.Item>Tab 2</ClayTabs.Item>
+					<ClayTabs.Item>Tab 3</ClayTabs.Item>
+				</ClayTabs.List>
+				<ClayTabs.Panels>
+					<ClayTabs.TabPanel>Tab Content 1</ClayTabs.TabPanel>
+					<ClayTabs.TabPanel>Tab Content 2</ClayTabs.TabPanel>
+					<ClayTabs.TabPanel>Tab Content 3</ClayTabs.TabPanel>
+				</ClayTabs.Panels>
+			</ClayTabs>
+		);
+
+		expect(getAllByRole('tab').length).toBe(3);
+		expect(getAllByRole('tabpanel').length).toBe(3);
+	});
 });

package/src/index.tsx

@@ -3,17 +3,12 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {
-	FOCUSABLE_ELEMENTS,
-	InternalDispatch,
-	Keys,
-	useInternalState,
-} from '@clayui/shared';
-import classNames from 'classnames';
-import React, {useRef} from 'react';
+import {InternalDispatch, useId, useInternalState} from '@clayui/shared';
+import React from 'react';
 
 import Content from './Content';
 import Item from './Item';
+import {List} from './List';
 import TabPane from './TabPane';
 
 export type DisplayType = null | 'basic' | 'underline';
@@ -43,6 +38,12 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	 */
 	displayType?: DisplayType;
 
+	/**
+	 * Flag to indicate if `fade` classname that applies an fading animation
+	 * should be applied.
+	 */
+	fade?: boolean;
+
 	/**
 	 * Justify the nav items according the tab content.
 	 */
@@ -61,9 +62,11 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 
 function ClayTabs(props: IProps): JSX.Element & {
 	Content: typeof Content;
+	Item: typeof Item;
+	List: typeof List;
+	Panels: typeof Content;
 	TabPane: typeof TabPane;
 	TabPanel: typeof TabPane;
-	Item: typeof Item;
 };
 
 function ClayTabs({
@@ -73,13 +76,12 @@ function ClayTabs({
 	className,
 	defaultActive = 0,
 	displayType,
+	fade = false,
 	justified,
 	modern = true,
 	onActiveChange,
 	...otherProps
 }: IProps) {
-	const tabsRef = useRef<HTMLUListElement>(null);
-
 	const [active, setActive] = useInternalState({
 		defaultName: 'defaultActive',
 		defaultValue: defaultActive,
@@ -89,88 +91,59 @@ function ClayTabs({
 		value: externalActive,
 	});
 
+	const [left, right] = React.Children.toArray(children);
+
+	const tabsId = useId();
+
+	// @ts-ignore
+	if (left?.type?.displayName === 'ClayTabsList') {
+		return (
+			<>
+				{React.cloneElement(left as React.ReactElement, {
+					activation,
+					active,
+					displayType,
+					justified,
+					modern,
+					onActiveChange: setActive,
+					tabsId,
+				})}
+
+				{React.isValidElement(right) &&
+					React.cloneElement(right as React.ReactElement, {
+						active,
+						fade,
+						tabsId,
+					})}
+			</>
+		);
+	}
+
 	return (
-		<ul
+		<List
 			{...otherProps}
-			className={classNames(
-				'nav',
-				{'nav-justified': justified},
-				!displayType
-					? {
-							'nav-tabs': !modern,
-							'nav-underline': modern,
-					  }
-					: {
-							'nav-tabs': displayType === 'basic',
-							'nav-underline': displayType === 'underline',
-					  },
-
-				className
-			)}
-			onKeyDown={(event) => {
-				if (!tabsRef.current) {
-					return;
-				}
-
-				if (event.key === Keys.Left || event.key === Keys.Right) {
-					const tabs = Array.from<HTMLElement>(
-						tabsRef.current.querySelectorAll(
-							FOCUSABLE_ELEMENTS.join(',')
-						)
-					);
-					const activeElement = document.activeElement as HTMLElement;
-
-					const position = tabs.indexOf(activeElement);
-
-					const tab =
-						tabs[
-							event.key === Keys.Left
-								? position - 1
-								: position + 1
-						];
-
-					if (tab) {
-						tab.focus();
-
-						if (activation === 'automatic') {
-							const newActive = Array.from(
-								tabsRef.current.querySelectorAll('a, button')
-							).indexOf(tab);
-
-							setActive(newActive);
-						}
-					}
-				}
-			}}
-			ref={tabsRef}
-			role="tablist"
+			activation={activation}
+			active={active}
+			className={className}
+			displayType={displayType}
+			justified={justified}
+			modern={modern}
+			onActiveChange={setActive}
 		>
-			{React.Children.map(children, (child, index) =>
-				React.cloneElement(child as React.ReactElement, {
-					active:
-						(child as React.ReactElement).props.active !== undefined
-							? (child as React.ReactElement).props.active
-							: active === index,
-					onClick: (
-						event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-					) => {
-						const {onClick} = (child as React.ReactElement).props;
-
-						if (onClick) {
-							onClick(event);
-						} else {
-							setActive(index);
-						}
-					},
-				})
-			)}
-		</ul>
+			{children}
+		</List>
 	);
 }
 
+/**
+ * @deprecated since v3.78.2 - Use new composition with Tabs.List and Tabs.Panels.
+ */
 ClayTabs.Content = Content;
+
+ClayTabs.Panels = Content;
+ClayTabs.Item = Item;
+ClayTabs.List = List;
 ClayTabs.TabPane = TabPane;
 ClayTabs.TabPanel = TabPane;
-ClayTabs.Item = Item;
 
 export default ClayTabs;