@clayui/tabs 3.87.0 → 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/List.d.ts

@@ -46,7 +46,4 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
      */
     tabsId?: string;
 }
-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;
-}
+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");
 
@@ -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,
@@ -56,6 +56,9 @@ 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
@@ -113,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tabs",
-	"version": "3.87.0",
+	"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.87.0",
+		"@clayui/shared": "^3.88.0",
 		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
@@ -37,5 +37,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "f071126e11f2c0ddeab525b5c14eb83f984f6f37"
+	"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/List.tsx

@@ -5,7 +5,7 @@
 
 import {InternalDispatch, useNavigation} from '@clayui/shared';
 import classNames from 'classnames';
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useImperativeHandle, useRef} from 'react';
 
 export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
@@ -59,19 +59,22 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	tabsId?: string;
 }
 
-export function List({
-	activation,
-	active,
-	children,
-	className,
-	displayType,
-	justified,
-	modern,
-	onActiveChange,
-	shouldUseActive = false,
-	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({
@@ -80,6 +83,8 @@ 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
@@ -156,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;