@dxc-technology/halstack-react 0.0.0-fdc49d2 → 0.0.0-feed711

package/switch/Switch.test.js

@@ -37,7 +37,7 @@ describe("Switch component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
   });
-  test("Everytime the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
+  test("Calls correct function on key down", function () {
     var onChange = jest.fn();
 
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
@@ -47,6 +47,30 @@ describe("Switch component tests", function () {
     })),
         getByText = _render3.getByText;
 
+    _react2.fireEvent.focus(getByText("SwitchComponent"));
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: "Enter"
+    });
+
+    expect(onChange).toHaveBeenCalled();
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: " "
+    });
+
+    expect(onChange).toHaveBeenCalled();
+  });
+  test("Everytime the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      checked: false,
+      onChange: onChange
+    })),
+        getByText = _render4.getByText;
+
     _react2.fireEvent.click(getByText("SwitchComponent"));
 
     _react2.fireEvent.click(getByText("SwitchComponent"));
@@ -54,14 +78,60 @@ describe("Switch component tests", function () {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(true);
   });
+  test("Everytime the user use enter in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
+    var onChange = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      checked: false,
+      onChange: onChange
+    })),
+        getByText = _render5.getByText;
+
+    _react2.fireEvent.focus(getByText("SwitchComponent"));
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: "Enter"
+    });
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: "Enter"
+    });
+
+    expect(onChange.mock.calls[0][0]).toBe(true);
+    expect(onChange.mock.calls[1][0]).toBe(true);
+  });
+  test("Everytime the user use space in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", function () {
+    var onChange = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      checked: false,
+      onChange: onChange
+    })),
+        getByText = _render6.getByText;
+
+    _react2.fireEvent.focus(getByText("SwitchComponent"));
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: " "
+    });
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: " "
+    });
+
+    expect(onChange.mock.calls[0][0]).toBe(true);
+    expect(onChange.mock.calls[1][0]).toBe(true);
+  });
   test("Everytime the user clicks the component the onchange function is called with the correct value UNCONTROLLED COMPONENT", function () {
     var onChange = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
       label: "SwitchComponent",
       onChange: onChange
     })),
-        getByText = _render4.getByText;
+        getByText = _render7.getByText;
 
     _react2.fireEvent.click(getByText("SwitchComponent"));
 
@@ -70,13 +140,57 @@ describe("Switch component tests", function () {
     expect(onChange.mock.calls[0][0]).toBe(true);
     expect(onChange.mock.calls[1][0]).toBe(false);
   });
+  test("Everytime the user use enter in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", function () {
+    var onChange = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      onChange: onChange
+    })),
+        getByText = _render8.getByText;
+
+    _react2.fireEvent.focus(getByText("SwitchComponent"));
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: "Enter"
+    });
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: "Enter"
+    });
+
+    expect(onChange.mock.calls[0][0]).toBe(true);
+    expect(onChange.mock.calls[1][0]).toBe(false);
+  });
+  test("Everytime the user use space in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", function () {
+    var onChange = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+      label: "SwitchComponent",
+      onChange: onChange
+    })),
+        getByText = _render9.getByText;
+
+    _react2.fireEvent.focus(getByText("SwitchComponent"));
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: " "
+    });
+
+    _react2.fireEvent.keyDown(getByText("SwitchComponent"), {
+      key: " "
+    });
+
+    expect(onChange.mock.calls[0][0]).toBe(true);
+    expect(onChange.mock.calls[1][0]).toBe(false);
+  });
   test("Renders with correct initial value and initial state when it is uncontrolled", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
       label: "Default label",
       defaultChecked: true,
       value: "test-defaultChecked"
     })),
-        getByRole = _render5.getByRole;
+        getByRole = _render10.getByRole;
 
     var inputEl = getByRole("switch");
     expect(inputEl.checked).toBe(true);
@@ -84,11 +198,11 @@ describe("Switch component tests", function () {
     expect(inputEl.getAttribute("aria-checked")).toBe("true");
   });
   test("Renders with correct aria attributes", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
       label: "Default label"
     })),
-        getByRole = _render6.getByRole,
-        getByText = _render6.getByText;
+        getByRole = _render11.getByRole,
+        getByText = _render11.getByText;
 
     var inputEl = getByRole("switch");
     var label = getByText("Default label");

package/switch/types.d.ts

@@ -1,11 +1,11 @@
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type Props = {
+export declare type SwitchPropsType = {
     /**
      * Initial state of the switch, only when it is uncontrolled.
      */
@@ -42,9 +42,9 @@ declare type Props = {
      */
     onChange?: (checked: boolean) => void;
     /**
-     * If true, the switch will change its appearence, showing that the value is required.
+     * If true, the component will display '(Optional)' next to the label.
      */
-    required?: boolean;
+    optional?: boolean;
     /**
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
@@ -59,4 +59,3 @@ declare type Props = {
      */
     tabIndex?: number;
 };
-export default Props;

package/tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import TabsPropsType from "./types";
-declare const DxcTabs: ({ activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, }: TabsPropsType) => JSX.Element;
+declare const DxcTabs: ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, }: TabsPropsType) => JSX.Element;
 export default DxcTabs;

package/tabs/Tabs.js

@@ -15,7 +15,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
 
@@ -36,7 +36,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
 
 var DxcTabs = function DxcTabs(_ref) {
-  var activeTabIndex = _ref.activeTabIndex,
+  var defaultActiveTabIndex = _ref.defaultActiveTabIndex,
+      activeTabIndex = _ref.activeTabIndex,
       tabs = _ref.tabs,
       onTabClick = _ref.onTabClick,
       onTabHover = _ref.onTabHover,
@@ -46,10 +47,10 @@ var DxcTabs = function DxcTabs(_ref) {
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _React$useState = _react["default"].useState(0),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      innerActiveTabIndex = _React$useState2[0],
-      setInnerActiveTabIndex = _React$useState2[1];
+  var _useState = (0, _react.useState)(defaultActiveTabIndex !== null && defaultActiveTabIndex !== void 0 ? defaultActiveTabIndex : 0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      innerActiveTabIndex = _useState2[0],
+      setInnerActiveTabIndex = _useState2[1];
 
   var colorsTheme = (0, _useTheme["default"])();
   var hasLabelAndIcon = tabs && tabs.filter(function (tab) {
@@ -57,10 +58,7 @@ var DxcTabs = function DxcTabs(_ref) {
   }).length > 0;
 
   var handleChange = function handleChange(event, newValue) {
-    if (activeTabIndex == null) {
-      setInnerActiveTabIndex(newValue);
-    }
-
+    activeTabIndex !== null && activeTabIndex !== void 0 ? activeTabIndex : setInnerActiveTabIndex(newValue);
     onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(newValue);
   };
 
@@ -90,7 +88,7 @@ var DxcTabs = function DxcTabs(_ref) {
     hasLabelAndIcon: hasLabelAndIcon,
     iconPosition: iconPosition
   }, /*#__PURE__*/_react["default"].createElement(Underline, null), /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
-    value: activeTabIndex != null ? activeTabIndex : innerActiveTabIndex,
+    value: activeTabIndex !== null && activeTabIndex !== void 0 ? activeTabIndex : innerActiveTabIndex,
     onChange: handleChange,
     variant: "scrollable",
     scrollButtons: "auto"

package/tabs/Tabs.stories.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
 import DxcTabs from "./Tabs";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
@@ -79,13 +78,6 @@ export const Chromatic = () => (
       <Title title="With icon on the left and notification number" theme="light" level={4} />
       <DxcTabs tabs={tabsNotificationIcon} iconPosition="left" />
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Scrollable" theme="light" level={4} />
-      <div style={{ width: "400px" }}>
-        <DxcTabs tabs={tabsNotificationIcon} iconPosition="left" activeTabIndex={1} />
-      </div>
-    </ExampleContainer>
-
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />

package/tabs/Tabs.test.js

@@ -30,11 +30,16 @@ describe("Tabs component tests", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
       tabs: sampleTabs
     })),
-        getByText = _render.getByText;
+        getByText = _render.getByText,
+        getAllByRole = _render.getAllByRole;
 
+    var tabs = getAllByRole("tab");
     expect(getByText("Tab-1")).toBeTruthy();
     expect(getByText("Tab-2")).toBeTruthy();
     expect(getByText("Tab-3")).toBeTruthy();
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("false");
   });
   test("Tabs render with correct labels and badges", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
@@ -46,8 +51,20 @@ describe("Tabs component tests", function () {
     expect(getByText("20")).toBeTruthy();
     expect(getByText("+99")).toBeTruthy();
   });
-  test("Tabs render with correct icons", function () {
+  test("Tabs render with an initially active tab", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+      defaultActiveTabIndex: 2,
+      tabs: sampleTabsWithBadge
+    })),
+        getAllByRole = _render3.getAllByRole;
+
+    var tabs = getAllByRole("tab");
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[2].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Tabs render with correct icons", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
       tabs: [{
         label: "Tab-1",
         icon: "/testIcon1.png"
@@ -59,14 +76,14 @@ describe("Tabs component tests", function () {
         icon: "/testIcon3.png"
       }]
     })),
-        getAllByRole = _render3.getAllByRole;
+        getAllByRole = _render4.getAllByRole;
 
     expect(getAllByRole("img")[0].getAttribute("src")).toBe("/testIcon1.png");
     expect(getAllByRole("img")[1].getAttribute("src")).toBe("/testIcon2.png");
     expect(getAllByRole("img")[2].getAttribute("src")).toBe("/testIcon3.png");
   });
   test("Tabs render with disabled tab", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
       tabs: [{
         label: "Tab-1",
         isDisabled: true
@@ -74,7 +91,7 @@ describe("Tabs component tests", function () {
         label: "Tab-2"
       }]
     })),
-        getAllByRole = _render4.getAllByRole;
+        getAllByRole = _render5.getAllByRole;
 
     expect(getAllByRole("tab")[0].hasAttribute("disabled")).toBeTruthy();
     expect(getAllByRole("tab")[1].hasAttribute("disabled")).toBeFalsy();
@@ -82,11 +99,11 @@ describe("Tabs component tests", function () {
   test("Uncontrolled tabs", function () {
     var onTabClick = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
       tabs: sampleTabs,
       onTabClick: onTabClick
     })),
-        getByText = _render5.getByText;
+        getByText = _render6.getByText;
 
     var tab1 = getByText("Tab-1");
     var tab2 = getByText("Tab-2");
@@ -102,12 +119,12 @@ describe("Tabs component tests", function () {
   test("Controlled tabs", function () {
     var onTabClick = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
       tabs: sampleTabs,
       onTabClick: onTabClick,
       activeTabIndex: 0
     })),
-        getByText = _render6.getByText;
+        getByText = _render7.getByText;
 
     var tab2 = getByText("Tab-2");
     var tab3 = getByText("Tab-3");

package/tabs/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TabCommonProps = {
     /**
      * Whether the tab is disabled or not.
@@ -50,6 +50,10 @@ declare type Props = {
      * Whether the icon should appear above or to the left of the label.
      */
     iconPosition?: "top" | "left";
+    /**
+     * Initially active tab, only when it is uncontrolled.
+     */
+    defaultActiveTabIndex?: number;
     /**
      * The index of the active tab. If undefined, the component will be
      * uncontrolled and the active tab will be managed internally by the component.

package/tabs-nav/NavTabs.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { NavTabsContextProps, NavTabsProps } from "./types";
+export declare const NavTabsContext: React.Context<NavTabsContextProps>;
+declare const DxcNavTabs: {
+    ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
+    Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+export default DxcNavTabs;

package/tabs-nav/NavTabs.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavTabsContext = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+var _Tab = _interopRequireDefault(require("./Tab"));
+
+var _templateObject;
+
+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; }
+
+var NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
+exports.NavTabsContext = NavTabsContext;
+
+var getPropInChild = function getPropInChild(child, propName) {
+  return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
+};
+
+var getLabelFromTab = function getLabelFromTab(child) {
+  if (typeof child === "string") {
+    return child.toString();
+  } else if (child.props.children) {
+    return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
+  }
+};
+
+var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
+  var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
+
+  while (getPropInChild(array[index], "disabled")) {
+    index = index === 0 ? array.length - 1 : index - 1;
+  }
+
+  return index;
+};
+
+var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
+  var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
+
+  while (getPropInChild(array[index], "disabled")) {
+    index = index === array.length - 1 ? 0 : index + 1;
+  }
+
+  return index;
+};
+
+var DxcNavTabs = function DxcNavTabs(_ref) {
+  var _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      children = _ref.children;
+  var colorsTheme = (0, _useTheme["default"])();
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      innerFocus = _useState2[0],
+      setInnerFocus = _useState2[1];
+
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      iconPosition: iconPosition,
+      tabIndex: tabIndex,
+      hasIcons: _react["default"].Children.toArray(children).some(function (child) {
+        return getPropInChild(child, "icon");
+      }),
+      focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
+    };
+  }, [iconPosition, tabIndex, innerFocus]);
+
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
+      return getPropInChild(child, "active");
+    });
+
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
+        event.preventDefault();
+        setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
+        break;
+
+      case "Right":
+      case "ArrowRight":
+        event.preventDefault();
+        setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
+        break;
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.tabs
+  }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
+    onKeyDown: handleOnKeyDown,
+    role: "tablist",
+    "aria-label": "Navigation tabs"
+  }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
+    value: contextValue
+  }, children)));
+};
+
+DxcNavTabs.Tab = _Tab["default"];
+
+var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
+
+var _default = DxcNavTabs;
+exports["default"] = _default;