@clayui/tabs 3.86.1 → 3.88.0

package/lib/Content.d.ts

@@ -26,5 +26,5 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     tabsId?: string;
 }
-declare const Content: ({ active, activeIndex, children, className, fade, tabsId, ...otherProps }: IProps) => JSX.Element;
+declare const Content: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
 export default Content;

package/lib/Content.js

@@ -25,7 +25,7 @@ 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 Content = /*#__PURE__*/_react.default.forwardRef(function Content(_ref, ref) {
   var active = _ref.active,
       _ref$activeIndex = _ref.activeIndex,
       activeIndex = _ref$activeIndex === void 0 ? 0 : _ref$activeIndex,
@@ -38,7 +38,9 @@ var Content = function Content(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)('tab-content', className)
-  }, otherProps), _react.default.Children.map(children, function (child, index) {
+  }, otherProps, {
+    ref: ref
+  }), _react.default.Children.map(children, function (child, index) {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return child;
     }
@@ -51,7 +53,7 @@ var Content = function Content(_ref) {
       key: index
     }));
   }));
-};
+});
 
 var _default = Content;
 exports.default = _default;

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,13 @@ 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 namespace List {
-    var displayName: string;
-}
+export declare const List: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLUListElement>>;

package/lib/List.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.List = List;
+exports.List = void 0;
 
 var _shared = require("@clayui/shared");
 
@@ -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); }
 
@@ -33,7 +33,7 @@ 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 List(_ref) {
+var List = /*#__PURE__*/_react.default.forwardRef(function List(_ref, ref) {
   var activation = _ref.activation,
       active = _ref.active,
       children = _ref.children,
@@ -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,30 @@ function List(_ref) {
   }),
       navigationProps = _useNavigation.navigationProps;
 
+  (0, _react.useImperativeHandle)(ref, function () {
+    return tabsRef.current;
+  }, [tabsRef]);
+  (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 +100,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)
@@ -90,6 +116,7 @@ function List(_ref) {
       }
     });
   }));
-}
+});
 
+exports.List = List;
 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, tabIndex, ...otherProps }: ITabPaneProps) => JSX.Element;
+declare const TabPane: React.ForwardRefExoticComponent<ITabPaneProps & React.RefAttributes<HTMLDivElement>>;
 export default TabPane;

package/lib/TabPane.js

@@ -38,7 +38,7 @@ var delay = function delay(fn) {
   }, val);
 };
 
-var TabPane = function TabPane(_ref) {
+var TabPane = /*#__PURE__*/_react.default.forwardRef(function TabPane(_ref, ref) {
   var _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       children = _ref.children,
@@ -87,10 +87,11 @@ var TabPane = function TabPane(_ref) {
       fade: fade,
       show: internalShow
     }, className),
+    ref: ref,
     role: "tabpanel",
     tabIndex: tabIndex
   }), children);
-};
+});
 
 var _default = TabPane;
 exports.default = _default;

package/lib/index.d.ts

@@ -57,11 +57,11 @@ declare function ClayTabs(props: IProps): JSX.Element & {
     TabPanel: typeof TabPane;
 };
 declare namespace ClayTabs {
-    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 Content: React.ForwardRefExoticComponent<import("./Content").IProps & React.RefAttributes<HTMLDivElement>>;
+    var Panels: React.ForwardRefExoticComponent<import("./Content").IProps & React.RefAttributes<HTMLDivElement>>;
     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;
+    var List: React.ForwardRefExoticComponent<import("./List").IProps & React.RefAttributes<HTMLUListElement>>;
+    var TabPane: React.ForwardRefExoticComponent<import("./TabPane").ITabPaneProps & React.RefAttributes<HTMLDivElement>>;
+    var TabPanel: React.ForwardRefExoticComponent<import("./TabPane").ITabPaneProps & React.RefAttributes<HTMLDivElement>>;
 }
 export default ClayTabs;

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.88.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.88.0",
 		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
@@ -37,5 +37,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "9437a1f6f7c2845824e9b63b8251e6f7f366323f"
+	"gitHead": "cf84d2b2f04d7576be26ce3917e40ec9da52bef8"
 }

package/src/Content.tsx

@@ -34,17 +34,24 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	tabsId?: string;
 }
 
-const Content = ({
-	active,
-	activeIndex = 0,
-	children,
-	className,
-	fade = false,
-	tabsId,
-	...otherProps
-}: IProps) => {
+const Content = React.forwardRef<HTMLDivElement, IProps>(function Content(
+	{
+		active,
+		activeIndex = 0,
+		children,
+		className,
+		fade = false,
+		tabsId,
+		...otherProps
+	},
+	ref
+) {
 	return (
-		<div className={classNames('tab-content', className)} {...otherProps}>
+		<div
+			className={classNames('tab-content', className)}
+			{...otherProps}
+			ref={ref}
+		>
 			{React.Children.map(children, (child, index) => {
 				if (!React.isValidElement(child)) {
 					return child;
@@ -66,6 +73,6 @@ const Content = ({
 			})}
 		</div>
 	);
-};
+});
 
 export default Content;

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, useImperativeHandle, useRef} from 'react';
 
 export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
@@ -48,24 +48,33 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	 */
 	onActiveChange?: InternalDispatch<number>;
 
+	/**
+	 * @ignore
+	 */
+	shouldUseActive?: boolean;
+
 	/**
 	 * @ignore
 	 */
 	tabsId?: string;
 }
 
-export function List({
-	activation,
-	active,
-	children,
-	className,
-	displayType,
-	justified,
-	modern,
-	onActiveChange,
-	tabsId,
-	...otherProps
-}: IProps) {
+export const List = React.forwardRef<HTMLUListElement, IProps>(function List(
+	{
+		activation,
+		active,
+		children,
+		className,
+		displayType,
+		justified,
+		modern,
+		onActiveChange,
+		shouldUseActive = false,
+		tabsId,
+		...otherProps
+	},
+	ref
+) {
 	const tabsRef = useRef<HTMLUListElement>(null);
 
 	const {navigationProps} = useNavigation({
@@ -74,6 +83,30 @@ export function List({
 		orientation: 'horizontal',
 	});
 
+	useImperativeHandle(ref, () => tabsRef.current!, [tabsRef]);
+
+	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 +136,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,
@@ -127,6 +161,6 @@ export function List({
 			})}
 		</ul>
 	);
-}
+});
 
 List.displayName = 'ClayTabsList';

package/src/TabPane.tsx

@@ -23,57 +23,63 @@ const delay = (fn: Function, val: number = 150) =>
 		fn();
 	}, val);
 
-const TabPane = ({
-	active = false,
-	children,
-	className,
-	fade,
-	tabIndex = 0,
-	...otherProps
-}: ITabPaneProps) => {
-	const [internalActive, setInternalActive] = React.useState(active);
-	const [internalShow, setInternalShow] = React.useState(active);
+const TabPane = React.forwardRef<HTMLDivElement, ITabPaneProps>(
+	function TabPane(
+		{
+			active = false,
+			children,
+			className,
+			fade,
+			tabIndex = 0,
+			...otherProps
+		},
+		ref
+	) {
+		const [internalActive, setInternalActive] = React.useState(active);
+		const [internalShow, setInternalShow] = React.useState(active);
 
-	React.useEffect(() => {
-		let delayFn = () => {
-			setInternalActive(true);
+		React.useEffect(() => {
+			let delayFn = () => {
+				setInternalActive(true);
 
-			delay(() => setInternalShow(true), 50);
-		};
+				delay(() => setInternalShow(true), 50);
+			};
 
-		if (!active) {
-			setInternalShow(false);
+			if (!active) {
+				setInternalShow(false);
 
-			delayFn = () => setInternalActive(false);
-		}
+				delayFn = () => setInternalActive(false);
+			}
 
-		const timer = delay(delayFn);
+			const timer = delay(delayFn);
 
-		return () => {
-			clearTimeout(timer);
+			return () => {
+				clearTimeout(timer);
 
-			setInternalShow(false);
-		};
-	}, [active]);
+				setInternalShow(false);
+			};
+		}, [active]);
 
-	return (
-		<div
-			{...otherProps}
-			className={classNames(
-				'tab-pane',
-				{
-					active: internalActive,
-					fade,
-					show: internalShow,
-				},
-				className
-			)}
-			role="tabpanel"
-			tabIndex={tabIndex}
-		>
-			{children}
-		</div>
-	);
-};
+		return (
+			<div
+				{...otherProps}
+				className={classNames(
+					'tab-pane',
+					{
+						active: internalActive,
+						fade,
+						show: internalShow,
+					},
+					className
+				)}
+				ref={ref}
+				role="tabpanel"
+				tabIndex={tabIndex}
+			>
+				{children}
+			</div>
+		);
+	}
+);
 
 export default TabPane;

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,
 				})}