@dhis2-ui/tab 9.9.0 → 9.10.0

package/build/cjs/tab/tab.js

@@ -7,17 +7,23 @@ exports.Tab = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _tooltip = require("@dhis2-ui/tooltip");
+
 var _uiConstants = require("@dhis2/ui-constants");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 }; }
 
-const Tab = _ref => {
+const Tab = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     icon,
     onClick,
@@ -27,20 +33,48 @@ const Tab = _ref => {
     className,
     dataTest
   } = _ref;
+  let tabRef = (0, _react.useRef)(null);
+
+  if (ref) {
+    tabRef = ref;
+  }
+
+  const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const checkOverflow = () => {
+      const isOverflow = tabRef.current.scrollWidth > tabRef.current.clientWidth;
+      setIsOverflowing(isOverflow);
+    };
+
+    checkOverflow();
+  }, []);
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: disabled ? undefined : event => onClick({}, event),
     "data-test": dataTest,
-    className: _style.default.dynamic([["3476406340", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]]) + " " + "".concat((0, _classnames.default)('tab', className, {
+    ref: tabRef,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    "aria-disabled": disabled ? 'true' : 'false',
+    onFocus: disabled ? undefined : event => onClick({}, event),
+    tabIndex: -1,
+    className: _style.default.dynamic([["2433456263", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]]) + " " + "".concat((0, _classnames.default)('tab', className, {
       selected,
       disabled
     }))
-  }, icon, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.dynamic([["3476406340", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]])
+  }, icon, isOverflowing ? /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
+    content: children,
+    maxWidth: '100%'
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    ref: tabRef,
+    className: _style.default.dynamic([["2433456263", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]])
+  }, children)) : /*#__PURE__*/_react.default.createElement("span", {
+    ref: tabRef,
+    className: _style.default.dynamic([["2433456263", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]])
   }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3476406340",
+    id: "2433456263",
     dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]
-  }, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(_uiConstants.colors.grey400, ";color:").concat(_uiConstants.colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{color:".concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(_uiConstants.theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";height:4px;}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey500, ";}")]));
-};
+  }, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(_uiConstants.colors.grey400, ";color:").concat(_uiConstants.colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{color:".concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(_uiConstants.theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";height:4px;}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey500, ";}")]));
+});
 
 exports.Tab = Tab;
 Tab.defaultProps = {
@@ -58,4 +92,5 @@ Tab.propTypes = {
 
   /** Called with the signature `({}, event)` */
   onClick: _propTypes.default.func
-};
+};
+Tab.displayName = 'Tab';

package/build/cjs/tab-bar/tabs.js

@@ -13,7 +13,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 }; }
 
@@ -23,13 +27,63 @@ const Tabs = _ref => {
     fixed,
     dataTest
   } = _ref;
+  const tabContainer = (0, _react.useRef)(null);
+  const childrenRefs = (0, _react.useMemo)(() => _react.default.Children.map(children, () => /*#__PURE__*/_react.default.createRef()), [children]);
+
+  const handleKeyDown = event => {
+    const currentFocus = document.activeElement;
+
+    if (tabContainer.current && tabContainer.current === currentFocus) {
+      if (childrenRefs.length > 0 && childrenRefs[0].current) {
+        childrenRefs[0].current.focus();
+      }
+
+      return;
+    }
+
+    const currentIndex = childrenRefs.findIndex(ref => ref.current === currentFocus);
+
+    if (currentIndex === -1) {
+      return;
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      const nextIndex = (currentIndex + 1) % childrenRefs.length;
+      childrenRefs[nextIndex].current.focus();
+    }
+
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      const prevIndex = (currentIndex - 1 + childrenRefs.length) % childrenRefs.length;
+      childrenRefs[prevIndex].current.focus();
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: tabContainer,
     "data-test": dataTest,
-    className: _style.default.dynamic([["2678989862", [_uiConstants.colors.grey400, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)({
+    role: "tablist",
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    className: _style.default.dynamic([["771129571", [_uiConstants.colors.grey400, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)({
       fixed
     }) || "")
-  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2678989862",
+  }, _react.default.Children.map(children, (child, index) => {
+    if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        ref: childrenRefs[index]
+      });
+    } // Wrap non-element children e.g string in a <span>
+
+
+    return /*#__PURE__*/_react.default.createElement("span", {
+      ref: childrenRefs[index],
+      tabIndex: -1,
+      className: _style.default.dynamic([["771129571", [_uiConstants.colors.grey400, _uiConstants.colors.white]]])
+    }, child);
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "771129571",
     dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.white]
   }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ".concat(_uiConstants.colors.grey400, ";-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:").concat(_uiConstants.colors.white, ";}")]));
 };

package/build/es/tab/tab.js

@@ -1,10 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
+import { Tooltip } from '@dhis2-ui/tooltip';
 import { colors, theme } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
-
-const Tab = _ref => {
+import React, { useState, useEffect, useRef } from 'react';
+export const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon,
     onClick,
@@ -14,21 +14,48 @@ const Tab = _ref => {
     className,
     dataTest
   } = _ref;
+  let tabRef = useRef(null);
+
+  if (ref) {
+    tabRef = ref;
+  }
+
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useEffect(() => {
+    const checkOverflow = () => {
+      const isOverflow = tabRef.current.scrollWidth > tabRef.current.clientWidth;
+      setIsOverflowing(isOverflow);
+    };
+
+    checkOverflow();
+  }, []);
   return /*#__PURE__*/React.createElement("button", {
     onClick: disabled ? undefined : event => onClick({}, event),
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3476406340", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]]) + " " + "".concat(cx('tab', className, {
+    ref: tabRef,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    "aria-disabled": disabled ? 'true' : 'false',
+    onFocus: disabled ? undefined : event => onClick({}, event),
+    tabIndex: -1,
+    className: _JSXStyle.dynamic([["2433456263", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]]) + " " + "".concat(cx('tab', className, {
       selected,
       disabled
     }))
-  }, icon, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3476406340", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]])
+  }, icon, isOverflowing ? /*#__PURE__*/React.createElement(Tooltip, {
+    content: children,
+    maxWidth: '100%'
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: tabRef,
+    className: _JSXStyle.dynamic([["2433456263", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]])
+  }, children)) : /*#__PURE__*/React.createElement("span", {
+    ref: tabRef,
+    className: _JSXStyle.dynamic([["2433456263", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]])
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3476406340",
+    id: "2433456263",
     dynamic: [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey900, colors.grey600, colors.grey800, theme.primary800, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]
-  }, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(colors.grey400, ";color:").concat(colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{color:".concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";height:4px;}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey500, ";}")]));
-};
-
+  }, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(colors.grey400, ";color:").concat(colors.grey600, ";font-size:14px;line-height:20px;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{color:".concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";height:4px;}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey500, ";}")]));
+});
 Tab.defaultProps = {
   dataTest: 'dhis2-uicore-tab'
 };
@@ -45,4 +72,4 @@ Tab.propTypes = {
   /** Called with the signature `({}, event)` */
   onClick: PropTypes.func
 };
-export { Tab };
+Tab.displayName = 'Tab';

package/build/es/tab-bar/tabs.js

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useRef, useMemo } from 'react';
 
 const Tabs = _ref => {
   let {
@@ -10,13 +10,63 @@ const Tabs = _ref => {
     fixed,
     dataTest
   } = _ref;
+  const tabContainer = useRef(null);
+  const childrenRefs = useMemo(() => React.Children.map(children, () => /*#__PURE__*/React.createRef()), [children]);
+
+  const handleKeyDown = event => {
+    const currentFocus = document.activeElement;
+
+    if (tabContainer.current && tabContainer.current === currentFocus) {
+      if (childrenRefs.length > 0 && childrenRefs[0].current) {
+        childrenRefs[0].current.focus();
+      }
+
+      return;
+    }
+
+    const currentIndex = childrenRefs.findIndex(ref => ref.current === currentFocus);
+
+    if (currentIndex === -1) {
+      return;
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      const nextIndex = (currentIndex + 1) % childrenRefs.length;
+      childrenRefs[nextIndex].current.focus();
+    }
+
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      const prevIndex = (currentIndex - 1 + childrenRefs.length) % childrenRefs.length;
+      childrenRefs[prevIndex].current.focus();
+    }
+  };
+
   return /*#__PURE__*/React.createElement("div", {
+    ref: tabContainer,
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["2678989862", [colors.grey400, colors.white]]]) + " " + (cx({
+    role: "tablist",
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    className: _JSXStyle.dynamic([["771129571", [colors.grey400, colors.white]]]) + " " + (cx({
       fixed
     }) || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2678989862",
+  }, React.Children.map(children, (child, index) => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        ref: childrenRefs[index]
+      });
+    } // Wrap non-element children e.g string in a <span>
+
+
+    return /*#__PURE__*/React.createElement("span", {
+      ref: childrenRefs[index],
+      tabIndex: -1,
+      className: _JSXStyle.dynamic([["771129571", [colors.grey400, colors.white]]])
+    }, child);
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "771129571",
     dynamic: [colors.grey400, colors.white]
   }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ".concat(colors.grey400, ";-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:").concat(colors.white, ";}")]));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tab",
-    "version": "9.9.0",
+    "version": "9.10.0",
     "description": "UI Tabs",
     "repository": {
         "type": "git",
@@ -32,9 +32,10 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
+        "@dhis2-ui/tooltip": "9.10.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.9.0",
-        "@dhis2/ui-icons": "9.9.0",
+        "@dhis2/ui-constants": "9.10.0",
+        "@dhis2/ui-icons": "9.10.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },