@laerdal/life-react-components 2.0.0 → 2.0.1-dev.10.full

package/dist/Tabs/HorizontalTabs.cjs

@@ -1,102 +1,146 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _types = require("../types");
-
 var _styles = require("../styles");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _typography = require("../styles/typography");
-
 var _zIndexes = require("../styles/z-indexes");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange"],
-    _excluded2 = ["value", "selected", "to", "disabled", "className"];
-
+  _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
-
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // Add custom styles
-var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n"])));
-
+var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ", ";\n  }\n  \n"])), _styles.focusStyles);
 var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
+var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
 
-var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected {\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.focusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
-
+// Add component-specific types
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
   var size = _ref.size,
-      tabs = _ref.tabs,
-      sideFill = _ref.sideFill,
-      fullWidth = _ref.fullWidth,
-      onTabChange = _ref.onTabChange,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    tabs = _ref.tabs,
+    sideFill = _ref.sideFill,
+    fullWidth = _ref.fullWidth,
+    onTabChange = _ref.onTabChange,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   /**
    * Informs parent component of tab change and clears focus.
    * @param to - A link to which user should be navigated.
    */
   var doTabChange = function doTabChange(to) {
     // Let's inform parent component
-    onTabChange(to); // Let's clear focus
+    onTabChange(to);
 
+    // Let's clear focus
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
   };
-
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    currentTab = _React$useState4[0],
+    setCurrentTab = _React$useState4[1];
+  React.useEffect(function () {
+    var selectedTab = tabs.find(function (x) {
+      return x.selected && !x.disabled;
+    });
+    if (selectedTab) setCurrentTab(selectedTab.to);
+  }, [tabs]);
+  var tabListBlur = function tabListBlur() {
+    return setFocused(false);
+  };
+  var tabListFocus = function tabListFocus(e) {
+    return setFocused(true);
+  };
+  var changeTabInternal = function changeTabInternal(tab) {
+    tab.selected = true;
+    tabs.forEach(function (x) {
+      if (x.to != tab.to) x.selected = false;
+    });
+    setCurrentTab(tab.to);
+    onTabChange(tab.to);
+  };
+  var tabListKeyDown = function tabListKeyDown(e) {
+    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      e.preventDefault();
+      if (e.key === 'ArrowRight') {
+        tabs.forEach(function (x, i) {
+          if (x.to != currentTab) return;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = j + i;
+            if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
+            if (tabs[nextIndex].disabled) continue;
+            changeTabInternal(tabs[nextIndex]);
+            break;
+          }
+        });
+      }
+      if (e.key === 'ArrowLeft') {
+        tabs.forEach(function (x, i) {
+          if (x.to != currentTab) return;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = i - j;
+            if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
+            if (tabs[nextIndex].disabled) continue;
+            changeTabInternal(tabs[nextIndex]);
+            break;
+          }
+        });
+      }
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalTabContainer, _objectSpread(_objectSpread({
+    tabIndex: 0,
+    onBlur: tabListBlur,
+    onFocus: tabListFocus,
+    onKeyDown: tabListKeyDown,
+    role: "tablist",
     "data-testid": 'horizontal-tabs-container'
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
+      tabIndex: -1,
       className: "".concat(sideFill ? 'fill' : '')
     }), tabs.map(function (tab, index) {
       var value = tab.value,
-          selected = tab.selected,
-          to = tab.to,
-          disabled = tab.disabled,
-          className = tab.className,
-          rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
+        selected = tab.selected,
+        to = tab.to,
+        disabled = tab.disabled,
+        className = tab.className,
+        rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, _objectSpread(_objectSpread({
+        role: "tab",
         "data-testid": "tab_".concat(value),
-        tabIndex: disabled ? -1 : 0,
+        "aria-selected": selected,
+        "aria-expanded": selected,
+        tabIndex: -1,
         onMouseDown: _common.defaultOnMouseDownHandler,
         style: fullWidth ? {
           width: "".concat(100 / tabs.length, "%")
         } : {},
-        className: "".concat(className || '', " size-").concat(size, " ").concat(selected ? 'selected' : '', " ").concat(disabled ? 'disabled' : ''),
+        className: "".concat(className || '', " size-").concat(size),
         onClick: function onClick() {
-          return !disabled && doTabChange(to);
+          return !disabled && changeTabInternal(tab);
         }
       }, rest), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -107,7 +151,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     })]
   }));
 };
-
 HorizontalTabs.propTypes = {
   tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
     value: _propTypes.default.string.isRequired,

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","defaultOnMouseDownHandler","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            tabIndex={disabled ? -1 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}

package/dist/Tabs/HorizontalTabs.js

@@ -1,85 +1,149 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange"],
-    _excluded2 = ["value", "selected", "to", "disabled", "className"];
-
+  _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * Import React libraries.
  */
 import * as React from 'react';
 import { Size } from '../types';
+
 /**
  * Import custom styles.
  */
-
 import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+
 /**
  * Import third-party libraries.
  */
-
 import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
-import { defaultOnMouseDownHandler } from '../common'; // Add custom styles
+import { defaultOnMouseDownHandler } from '../common';
 
+// Add custom styles
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n"])));
+var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ", ";\n  }\n  \n"])), focusStyles);
 var TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.white);
-var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected {\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, focusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null));
+
+// Add component-specific types
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
   var size = _ref.size,
-      tabs = _ref.tabs,
-      sideFill = _ref.sideFill,
-      fullWidth = _ref.fullWidth,
-      onTabChange = _ref.onTabChange,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    tabs = _ref.tabs,
+    sideFill = _ref.sideFill,
+    fullWidth = _ref.fullWidth,
+    onTabChange = _ref.onTabChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * Informs parent component of tab change and clears focus.
    * @param to - A link to which user should be navigated.
    */
   var doTabChange = function doTabChange(to) {
     // Let's inform parent component
-    onTabChange(to); // Let's clear focus
+    onTabChange(to);
 
+    // Let's clear focus
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
   };
-
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    currentTab = _React$useState4[0],
+    setCurrentTab = _React$useState4[1];
+  React.useEffect(function () {
+    var selectedTab = tabs.find(function (x) {
+      return x.selected && !x.disabled;
+    });
+    if (selectedTab) setCurrentTab(selectedTab.to);
+  }, [tabs]);
+  var tabListBlur = function tabListBlur() {
+    return setFocused(false);
+  };
+  var tabListFocus = function tabListFocus(e) {
+    return setFocused(true);
+  };
+  var changeTabInternal = function changeTabInternal(tab) {
+    tab.selected = true;
+    tabs.forEach(function (x) {
+      if (x.to != tab.to) x.selected = false;
+    });
+    setCurrentTab(tab.to);
+    onTabChange(tab.to);
+  };
+  var tabListKeyDown = function tabListKeyDown(e) {
+    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      e.preventDefault();
+      if (e.key === 'ArrowRight') {
+        tabs.forEach(function (x, i) {
+          if (x.to != currentTab) return;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = j + i;
+            if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
+            if (tabs[nextIndex].disabled) continue;
+            changeTabInternal(tabs[nextIndex]);
+            break;
+          }
+        });
+      }
+      if (e.key === 'ArrowLeft') {
+        tabs.forEach(function (x, i) {
+          if (x.to != currentTab) return;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = i - j;
+            if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
+            if (tabs[nextIndex].disabled) continue;
+            changeTabInternal(tabs[nextIndex]);
+            break;
+          }
+        });
+      }
+    }
+  };
   return /*#__PURE__*/_jsxs(HorizontalTabContainer, _objectSpread(_objectSpread({
+    tabIndex: 0,
+    onBlur: tabListBlur,
+    onFocus: tabListFocus,
+    onKeyDown: tabListKeyDown,
+    role: "tablist",
     "data-testid": 'horizontal-tabs-container'
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(TabSideFill, {
+      tabIndex: -1,
       className: "".concat(sideFill ? 'fill' : '')
     }), tabs.map(function (tab, index) {
       var value = tab.value,
-          selected = tab.selected,
-          to = tab.to,
-          disabled = tab.disabled,
-          className = tab.className,
-          rest = _objectWithoutProperties(tab, _excluded2);
-
+        selected = tab.selected,
+        to = tab.to,
+        disabled = tab.disabled,
+        className = tab.className,
+        rest = _objectWithoutProperties(tab, _excluded2);
       return /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
+        role: "tab",
         "data-testid": "tab_".concat(value),
-        tabIndex: disabled ? -1 : 0,
+        "aria-selected": selected,
+        "aria-expanded": selected,
+        tabIndex: -1,
         onMouseDown: defaultOnMouseDownHandler,
         style: fullWidth ? {
           width: "".concat(100 / tabs.length, "%")
         } : {},
-        className: "".concat(className || '', " size-").concat(size, " ").concat(selected ? 'selected' : '', " ").concat(disabled ? 'disabled' : ''),
+        className: "".concat(className || '', " size-").concat(size),
         onClick: function onClick() {
-          return !disabled && doTabChange(to);
+          return !disabled && changeTabInternal(tab);
         }
       }, rest), {}, {
         children: /*#__PURE__*/_jsx("div", {
@@ -90,7 +154,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     })]
   }));
 };
-
 HorizontalTabs.propTypes = {
   tabs: _pt.arrayOf(_pt.shape({
     value: _pt.string.isRequired,

package/dist/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","selected","disabled","className","width","length"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            tabIndex={disabled ? -1 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size} ${selected ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}