@clayui/tabs 3.86.1 → 3.87.0

package/lib/Item.d.ts

@@ -6,6 +6,10 @@ import React from 'react';
 export interface IProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
     /**
      * Flag to indicate if the component is active or not.
+     *
+     * OBS: The `active` API in the new pattern has uncontrolled behavior,
+     * working just like `defaultActive` as in the prop declared in the
+     * root component.
      */
     active?: boolean;
     /**

package/lib/List.d.ts

@@ -37,12 +37,16 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
      * @ignore
      */
     onActiveChange?: InternalDispatch<number>;
+    /**
+     * @ignore
+     */
+    shouldUseActive?: boolean;
     /**
      * @ignore
      */
     tabsId?: string;
 }
-export declare function List({ activation, active, children, className, displayType, justified, modern, onActiveChange, tabsId, ...otherProps }: IProps): JSX.Element;
+export declare function List({ activation, active, children, className, displayType, justified, modern, onActiveChange, shouldUseActive, tabsId, ...otherProps }: IProps): JSX.Element;
 export declare namespace List {
     var displayName: string;
 }

package/lib/List.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["activation", "active", "children", "className", "displayType", "justified", "modern", "onActiveChange", "tabsId"];
+var _excluded = ["activation", "active", "children", "className", "displayType", "justified", "modern", "onActiveChange", "shouldUseActive", "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); }
 
@@ -42,6 +42,8 @@ function List(_ref) {
       justified = _ref.justified,
       modern = _ref.modern,
       onActiveChange = _ref.onActiveChange,
+      _ref$shouldUseActive = _ref.shouldUseActive,
+      shouldUseActive = _ref$shouldUseActive === void 0 ? false : _ref$shouldUseActive,
       tabsId = _ref.tabsId,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -54,6 +56,27 @@ function List(_ref) {
   }),
       navigationProps = _useNavigation.navigationProps;
 
+  (0, _react.useEffect)(function () {
+    // Internal API to maintain compatibility with the old Tabs pattern and to
+    // only update the initial state when the component is in
+    // uncontrolled mode.
+    if (!shouldUseActive) {
+      return;
+    }
+
+    var childrenArray = _react.default.Children.toArray(children); // The `active` API in the new pattern has uncontrolled behavior, working
+    // just like defaultActive as in the prop declared in the root component.
+
+
+    for (var index = 0; index < childrenArray.length; index++) {
+      var child = childrenArray[index];
+
+      if ( /*#__PURE__*/_react.default.isValidElement(child) && child.props.active) {
+        onActiveChange(index);
+        break;
+      }
+    }
+  }, []);
   return /*#__PURE__*/_react.default.createElement("ul", _extends({}, otherProps, navigationProps, {
     className: (0, _classnames.default)('nav', {
       'nav-justified': justified
@@ -74,7 +97,7 @@ function List(_ref) {
     }
 
     return /*#__PURE__*/_react.default.cloneElement(child, {
-      active: child.props.active !== undefined ? child.props.active : active === index,
+      active: !shouldUseActive && 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)

package/lib/index.js

@@ -66,9 +66,10 @@ function ClayTabs(_ref) {
     onChange: onActiveChange,
     value: externalActive
   }),
-      _useInternalState2 = _slicedToArray(_useInternalState, 2),
+      _useInternalState2 = _slicedToArray(_useInternalState, 3),
       active = _useInternalState2[0],
-      setActive = _useInternalState2[1];
+      setActive = _useInternalState2[1],
+      isUncontrolled = _useInternalState2[2];
 
   var _React$Children$toArr = _react.default.Children.toArray(children),
       _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
@@ -85,6 +86,7 @@ function ClayTabs(_ref) {
       justified: justified,
       modern: modern,
       onActiveChange: setActive,
+      shouldUseActive: isUncontrolled,
       tabsId: tabsId
     }), /*#__PURE__*/_react.default.isValidElement(right) && /*#__PURE__*/_react.default.cloneElement(right, {
       active: active,

package/package.json

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

package/src/Item.tsx

@@ -11,6 +11,10 @@ export interface IProps
 	extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
 	/**
 	 * Flag to indicate if the component is active or not.
+	 *
+	 * OBS: The `active` API in the new pattern has uncontrolled behavior,
+	 * working just like `defaultActive` as in the prop declared in the
+	 * root component.
 	 */
 	active?: boolean;
 

package/src/List.tsx

@@ -5,7 +5,7 @@
 
 import {InternalDispatch, useNavigation} from '@clayui/shared';
 import classNames from 'classnames';
-import React, {useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 
 export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
@@ -48,6 +48,11 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	 */
 	onActiveChange?: InternalDispatch<number>;
 
+	/**
+	 * @ignore
+	 */
+	shouldUseActive?: boolean;
+
 	/**
 	 * @ignore
 	 */
@@ -63,6 +68,7 @@ export function List({
 	justified,
 	modern,
 	onActiveChange,
+	shouldUseActive = false,
 	tabsId,
 	...otherProps
 }: IProps) {
@@ -74,6 +80,28 @@ export function List({
 		orientation: 'horizontal',
 	});
 
+	useEffect(() => {
+		// Internal API to maintain compatibility with the old Tabs pattern and to
+		// only update the initial state when the component is in
+		// uncontrolled mode.
+		if (!shouldUseActive) {
+			return;
+		}
+
+		const childrenArray = React.Children.toArray(children);
+
+		// The `active` API in the new pattern has uncontrolled behavior, working
+		// just like defaultActive as in the prop declared in the root component.
+		for (let index = 0; index < childrenArray.length; index++) {
+			const child = childrenArray[index];
+
+			if (React.isValidElement(child) && child.props.active) {
+				onActiveChange!(index);
+				break;
+			}
+		}
+	}, []);
+
 	return (
 		<ul
 			{...otherProps}
@@ -103,6 +131,7 @@ export function List({
 
 				return React.cloneElement(child as React.ReactElement, {
 					active:
+						!shouldUseActive &&
 						(child as React.ReactElement).props.active !== undefined
 							? (child as React.ReactElement).props.active
 							: active === index,

package/src/__tests__/index.tsx

@@ -192,4 +192,25 @@ describe('ClayTabs', () => {
 		expect(getAllByRole('tab').length).toBe(3);
 		expect(getAllByRole('tabpanel').length).toBe(3);
 	});
+
+	it('renders the tab item active when `active` is set on uncontrolled state', () => {
+		const {getByRole} = render(
+			<ClayTabs>
+				<ClayTabs.List>
+					<ClayTabs.Item>Tab 1</ClayTabs.Item>
+					<ClayTabs.Item active>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>
+		);
+
+		const activeTab = getByRole('tab', {selected: true});
+
+		expect(activeTab.innerHTML).toBe('Tab 2');
+	});
 });

package/src/index.tsx

@@ -82,7 +82,7 @@ function ClayTabs({
 	onActiveChange,
 	...otherProps
 }: IProps) {
-	const [active, setActive] = useInternalState({
+	const [active, setActive, isUncontrolled] = useInternalState({
 		defaultName: 'defaultActive',
 		defaultValue: defaultActive,
 		handleName: 'onActiveChange',
@@ -106,6 +106,7 @@ function ClayTabs({
 					justified,
 					modern,
 					onActiveChange: setActive,
+					shouldUseActive: isUncontrolled,
 					tabsId,
 				})}