@clayui/tabs 3.77.0 → 3.78.0

package/lib/Item.js

@@ -50,7 +50,7 @@ var Item = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onClick: onClick,
     ref: ref,
     role: "tab",
-    tabIndex: !active ? -1 : undefined
+    tabIndex: !active ? -1 : 0
   }), children));
 });
 

package/lib/index.d.ts

@@ -2,12 +2,29 @@
  * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
  * SPDX-License-Identifier: BSD-3-Clause
  */
+import { InternalDispatch } from '@clayui/shared';
 import React from 'react';
 import Content from './Content';
 import Item from './Item';
 import TabPane from './TabPane';
 export declare type DisplayType = null | 'basic' | 'underline';
 export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * Flag to indicate the navigation behavior in the tab.
+     *
+     * - manual - it will just move the focus and tab activation is done just
+     * by pressing space or enter.
+     * - automatic - moves the focus to the tab and activates the tab.
+     */
+    activation?: 'manual' | 'automatic';
+    /**
+     * The current tab active (controlled).
+     */
+    active?: number;
+    /**
+     * Initial active tab when rendering component (uncontrolled).
+     */
+    defaultActive?: number;
     /**
      * Determines how tab is displayed.
      */
@@ -20,6 +37,10 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
      * Applies a modern style to the tab.
      */
     modern?: boolean;
+    /**
+     * Callback is called when the active tab changes (controlled).
+     */
+    onActiveChange?: InternalDispatch<number>;
 }
 declare function ClayTabs(props: IProps): JSX.Element & {
     Content: typeof Content;

package/lib/index.js

@@ -1,13 +1,17 @@
 "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.default = void 0;
 
+var _shared = require("@clayui/shared");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Content = _interopRequireDefault(require("./Content"));
 
@@ -15,25 +19,61 @@ var _Item = _interopRequireDefault(require("./Item"));
 
 var _TabPane = _interopRequireDefault(require("./TabPane"));
 
-var _excluded = ["children", "className", "displayType", "justified", "modern"];
+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); }
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 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 ClayTabs(_ref) {
-  var children = _ref.children,
+  var _ref$activation = _ref.activation,
+      activation = _ref$activation === void 0 ? 'manual' : _ref$activation,
+      externalActive = _ref.active,
+      children = _ref.children,
       className = _ref.className,
+      _ref$defaultActive = _ref.defaultActive,
+      defaultActive = _ref$defaultActive === void 0 ? 0 : _ref$defaultActive,
       displayType = _ref.displayType,
       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,
+    handleName: 'onActiveChange',
+    name: 'active',
+    onChange: onActiveChange,
+    value: externalActive
+  }),
+      _useInternalState2 = _slicedToArray(_useInternalState, 2),
+      active = _useInternalState2[0],
+      setActive = _useInternalState2[1];
+
   return /*#__PURE__*/_react.default.createElement("ul", _extends({}, otherProps, {
     className: (0, _classnames.default)('nav', {
       'nav-justified': justified
@@ -44,8 +84,43 @@ function ClayTabs(_ref) {
       '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"
-  }), children);
+  }), _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);
+        }
+      }
+    });
+  }));
 }
 
 ClayTabs.Content = _Content.default;

package/package.json

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

package/src/Item.tsx

@@ -69,7 +69,7 @@ const Item = React.forwardRef<any, IProps>(
 				onClick={onClick}
 				ref={ref}
 				role="tab"
-				tabIndex={!active ? -1 : undefined}
+				tabIndex={!active ? -1 : 0}
 			>
 				{children}
 			</LinkOrButton>

package/src/__tests__/__snapshots__/index.tsx.snap

@@ -24,6 +24,7 @@ exports[`ClayTabs renders with items 1`] = `
         class="nav-link active btn btn-unstyled"
         data-testid="tabItem"
         role="tab"
+        tabindex="0"
         type="button"
       >
         Dummy1

package/src/__tests__/index.tsx

@@ -9,32 +9,16 @@ import {cleanup, fireEvent, render} from '@testing-library/react';
 import React from 'react';
 
 const ClayTabsWithItems = () => {
-	const [activeTabKeyValue, setActiveTabKeyValue] = React.useState<number>(0);
+	const [active, setActive] = React.useState<number>(0);
 
 	return (
 		<>
-			<ClayTabs>
-				<ClayTabs.Item
-					active={activeTabKeyValue == 0}
-					onClick={() => setActiveTabKeyValue(0)}
-				>
-					Dummy1
-				</ClayTabs.Item>
-				<ClayTabs.Item
-					active={activeTabKeyValue == 1}
-					data-testid="tabItem2"
-					onClick={() => setActiveTabKeyValue(1)}
-				>
-					Dummy2
-				</ClayTabs.Item>
-				<ClayTabs.Item
-					active={activeTabKeyValue == 2}
-					onClick={() => setActiveTabKeyValue(2)}
-				>
-					Dummy3
-				</ClayTabs.Item>
+			<ClayTabs active={active} onActiveChange={setActive}>
+				<ClayTabs.Item>Dummy1</ClayTabs.Item>
+				<ClayTabs.Item data-testid="tabItem2">Dummy2</ClayTabs.Item>
+				<ClayTabs.Item>Dummy3</ClayTabs.Item>
 			</ClayTabs>
-			<ClayTabs.Content activeIndex={activeTabKeyValue}>
+			<ClayTabs.Content activeIndex={active}>
 				<ClayTabs.TabPane data-testid="tabPane1">
 					Tab Content 1
 				</ClayTabs.TabPane>
@@ -96,8 +80,9 @@ describe('ClayTabs', () => {
 		const {getAllByTestId} = render(
 			<>
 				<ClayTabs>
-					<ClayTabs.Item active href="https://clay.dev/foo" />
-					One
+					<ClayTabs.Item active href="https://clay.dev/foo">
+						One
+					</ClayTabs.Item>
 					<ClayTabs.Item href="https://clay.dev/bar">
 						Two
 					</ClayTabs.Item>

package/src/index.tsx

@@ -3,8 +3,14 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import {
+	FOCUSABLE_ELEMENTS,
+	InternalDispatch,
+	Keys,
+	useInternalState,
+} from '@clayui/shared';
 import classNames from 'classnames';
-import React from 'react';
+import React, {useRef} from 'react';
 
 import Content from './Content';
 import Item from './Item';
@@ -13,6 +19,25 @@ import TabPane from './TabPane';
 export type DisplayType = null | 'basic' | 'underline';
 
 export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+	/**
+	 * Flag to indicate the navigation behavior in the tab.
+	 *
+	 * - manual - it will just move the focus and tab activation is done just
+	 * by pressing space or enter.
+	 * - automatic - moves the focus to the tab and activates the tab.
+	 */
+	activation?: 'manual' | 'automatic';
+
+	/**
+	 * The current tab active (controlled).
+	 */
+	active?: number;
+
+	/**
+	 * Initial active tab when rendering component (uncontrolled).
+	 */
+	defaultActive?: number;
+
 	/**
 	 * Determines how tab is displayed.
 	 */
@@ -27,6 +52,11 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	 * Applies a modern style to the tab.
 	 */
 	modern?: boolean;
+
+	/**
+	 * Callback is called when the active tab changes (controlled).
+	 */
+	onActiveChange?: InternalDispatch<number>;
 }
 
 function ClayTabs(props: IProps): JSX.Element & {
@@ -37,13 +67,28 @@ function ClayTabs(props: IProps): JSX.Element & {
 };
 
 function ClayTabs({
+	activation = 'manual',
+	active: externalActive,
 	children,
 	className,
+	defaultActive = 0,
 	displayType,
 	justified,
 	modern = true,
+	onActiveChange,
 	...otherProps
 }: IProps) {
+	const tabsRef = useRef<HTMLUListElement>(null);
+
+	const [active, setActive] = useInternalState({
+		defaultName: 'defaultActive',
+		defaultValue: defaultActive,
+		handleName: 'onActiveChange',
+		name: 'active',
+		onChange: onActiveChange,
+		value: externalActive,
+	});
+
 	return (
 		<ul
 			{...otherProps}
@@ -62,9 +107,63 @@ function ClayTabs({
 
 				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"
 		>
-			{children}
+			{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>
 	);
 }