@dxc-technology/halstack-react 0.0.0-5bbb9f7 → 0.0.0-5beed19

package/stack/Stack.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Stack;
+exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,83 +15,36 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject, _templateObject2;
 
-function Stack(_ref) {
-  var gutter = _ref.gutter,
-      divider = _ref.divider,
-      align = _ref.align,
+var DxcStack = function DxcStack(_ref) {
+  var _ref$alignX = _ref.alignX,
+      alignX = _ref$alignX === void 0 ? "stretch" : _ref$alignX,
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "div" : _ref$as,
+      _ref$divider = _ref.divider,
+      divider = _ref$divider === void 0 ? false : _ref$divider,
+      _ref$gutter = _ref.gutter,
+      gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
       children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledStack, {
+  return /*#__PURE__*/_react["default"].createElement(Stack, {
     gutter: gutter,
-    divider: divider,
-    align: align,
+    alignX: alignX,
+    reverse: reverse,
     as: as
   }, _react["default"].Children.map(children, function (child, index) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
   }));
-}
+};
 
-var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1px;\n  background-color: #999999;\n"])));
+var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 1px;\n  background-color: #999999;\n"])));
 
-var StyledStack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (_ref2) {
-  var align = _ref2.align;
-
-  switch (align) {
-    case "start":
-      return "flex-start";
-
-    case "center":
-      return "center";
-
-    case "end":
-      return "flex-end";
-
-    case "baseline":
-      return "baseline";
-
-    case "stretch":
-      return "stretch";
-
-    default:
-      return "initial";
-  }
-}, function (_ref3) {
-  var gutter = _ref3.gutter,
-      divider = _ref3.divider;
-
-  switch (gutter) {
-    case "none":
-      return "0";
-
-    case "xxxsmall":
-      return "calc(0.125rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xxsmall":
-      return "calc(0.25rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xsmall":
-      return "calc(0.5rem / ".concat(divider ? 2 : 1, ")");
-
-    case "small":
-      return "calc(1rem / ".concat(divider ? 2 : 1, ")");
-
-    case "medium":
-      return "calc(1.5rem / ".concat(divider ? 2 : 1, ")");
-
-    case "large":
-      return "calc(2rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xlarge":
-      return "calc(3rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xxlarge":
-      return "calc(4rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xxxlarge":
-      return "calc(5rem / ".concat(divider ? 2 : 1, ")");
+var Stack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n"])), function (_ref2) {
+  var alignX = _ref2.alignX,
+      gutter = _ref2.gutter,
+      reverse = _ref2.reverse;
+  return "\n    flex-direction: ".concat(reverse ? "column-reverse" : "column", ";\n    align-items: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n    gap: ").concat(gutter, ";\n  ");
+});
 
-    default:
-      return "0";
-  }
-});
+var _default = DxcStack;
+exports["default"] = _default;

package/stack/Stack.stories.tsx

@@ -13,148 +13,187 @@ export const Chromatic = () => (
     <Title title="Default" theme="light" level={4} />
     <Container>
       <DxcStack>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="Align = baseline" theme="light" level={4} />
+    <Title title="Default with divider" theme="light" level={4} />
     <Container>
-      <DxcStack align="baseline">
-        <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingRight={60}></Placeholder>
+      <DxcStack divider>
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="Align = center" theme="light" level={4} />
+    <Title title="Alignment with divider" theme="light" level={4} />
     <Container>
-      <DxcStack align="center">
+      <DxcStack alignX="end" divider>
         <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
+        <Placeholder />
         <Placeholder paddingLeft={60}></Placeholder>
       </DxcStack>
     </Container>
-    <Title title="Align = end" theme="light" level={4} />
+    <Title title="Default with one child" theme="light" level={4} />
     <Container>
-      <DxcStack align="end">
-        <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingLeft={60}></Placeholder>
+      <DxcStack divider>
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="Align = start" theme="light" level={4} />
+    <Title title="Wrap" theme="light" level={4} />
+    <FlexContainer customHeight>
+      <DxcStack>
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+      </DxcStack>
+    </FlexContainer>
+    <Title title="AlignX = start" theme="light" level={4} />
     <Container>
-      <DxcStack align="start">
+      <DxcStack alignX="start">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder />
+        <Placeholder paddingRight={60}></Placeholder>
         <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingLeft={60}></Placeholder>
       </DxcStack>
     </Container>
-    <Title title="Align = stretch" theme="light" level={4} />
+    <Title title="AlignX = end" theme="light" level={4} />
     <Container>
-      <DxcStack align="stretch">
+      <DxcStack alignX="end">
         <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
+        <Placeholder />
         <Placeholder paddingLeft={60}></Placeholder>
       </DxcStack>
     </Container>
-    <Title title="gutter = xxxsmall" theme="light" level={4} />
+    <Title title="AlignX = center" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxxsmall">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack alignX="center">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder />
+        <Placeholder paddingLeft={60}></Placeholder>
+        <Placeholder paddingLeft={20}></Placeholder>
       </DxcStack>
     </Container>
-    <Title title="gutter = xxsmall" theme="light" level={4} />
+    <Title title="AlignX = baseline" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxsmall">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack alignX="baseline">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder />
+        <Placeholder paddingLeft={60}></Placeholder>
       </DxcStack>
     </Container>
-    <Title title="gutter = xsmall" theme="light" level={4} />
+    <Title title="AlignX with wrapped items" theme="light" level={4} />
+    <FlexContainer customHeight>
+      <DxcStack alignX="center">
+        <Placeholder />
+        <Placeholder paddingRight={60} />
+        <Placeholder paddingLeft={20} />
+        <Placeholder />
+        <Placeholder paddingRight={20} />
+        <Placeholder paddingLeft={60} />
+      </DxcStack>
+    </FlexContainer>
+    <Title title="Gutter = 0rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xsmall">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0rem">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = small" theme="light" level={4} />
+    <Title title="Gutter = 0.125rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="small">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.125rem">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = medium" theme="light" level={4} />
+    <Title title="Gutter = 0.25rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.25rem">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = large" theme="light" level={4} />
+    <Title title="Gutter = 0.5rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="large">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.5rem">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = xlarge" theme="light" level={4} />
+    <Title title="Gutter = 0.75rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xlarge">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.75rem">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxlarge" theme="light" level={4} />
+    <Title title="Gutter = 1rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxlarge">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="1rem">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxxlarge" theme="light" level={4} />
+    <Title title="Gutter = 1.5rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxxlarge">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="1.5rem">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxlarge && divider" theme="light" level={4} />
+    <Title title="Gutter = 2rem & divider" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxlarge" divider>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="2rem" divider>
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
       </DxcStack>
     </Container>
-    <Title title="gutter = none" theme="light" level={4} />
+    <Title title="Reverse" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="none">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack reverse>
+        <Placeholder>1</Placeholder>
+        <Placeholder>2</Placeholder>
+        <Placeholder>3</Placeholder>
+        <Placeholder>4</Placeholder>
       </DxcStack>
     </Container>
   </>
 );
 
-const Container = styled.div`
+const FlexContainer = styled.div<{ customHeight?: boolean }>`
+  display: flex;
+  ${({ customHeight }) => customHeight && `height: 100px;`};
   background: #f2eafa;
-  padding: 10px;
 `;
 
-const Placeholder = styled.div`
+const Container = styled.div<{ customHeight?: boolean }>`
+  background: #f2eafa;
+`;
+
+type PlaceholderProps = { paddingLeft?: number; paddingRight?: number };
+
+const Placeholder = styled.div<PlaceholderProps>`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;

package/stack/types.d.ts

@@ -1,24 +1,28 @@
 /// <reference types="react" />
 declare type Props = {
     /**
-     * Space applied between each child.
+     * Alignment applied to children in the main axis.
+     */
+    alignX?: "start" | "end" | "center" | "baseline" | "stretch";
+    /**
+     * Specifies the HTML tag or component that is rendered as the wrapper element.
      */
-    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    as?: React.ElementType;
     /**
      * If true, a divider is shown between children.
      */
     divider?: boolean;
     /**
-     * Alignment applied to children.
+     * Space applied between each child.
      */
-    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem";
     /**
-     * Specifies the HTML tag or component that is rendered as the wrapper element.
+     * Change the direction of the stack to reverse.
      */
-    as?: React.ElementType;
+    reverse?: boolean;
     /**
      * Custom content inside the stack.
      */
-    children: React.ReactNode;
+    children: React.ReactElement<React.ReactNode>[] | React.ReactElement<React.ReactNode>;
 };
 export default Props;

package/tabs-nav/NavTabs.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-import { NavTabsProps } from "./types";
+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>>;

package/tabs-nav/NavTabs.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.NavTabsContext = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -27,10 +27,25 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 (array[index].props.disabled) {
+  while (getPropInChild(array[index], "disabled")) {
     index = index === 0 ? array.length - 1 : index - 1;
   }
 
@@ -40,7 +55,7 @@ var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
 var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
   var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
 
-  while (array[index].props.disabled) {
+  while (getPropInChild(array[index], "disabled")) {
     index = index === array.length - 1 ? 0 : index + 1;
   }
 
@@ -60,22 +75,33 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       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 child.props.active;
+      return getPropInChild(child, "active");
     });
 
     switch (event.keyCode) {
       case 37:
         // arrow left
         event.preventDefault();
-        setInnerFocus(getPreviousTabIndex(_react["default"].Children.toArray(children), innerFocus === null ? activeTab : innerFocus));
+        setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;
 
       case 39:
         // arrow right
         event.preventDefault();
-        setInnerFocus(getNextTabIndex(_react["default"].Children.toArray(children), innerFocus === null ? activeTab : innerFocus));
+        setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;
     }
   };
@@ -86,16 +112,9 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     onKeyDown: handleOnKeyDown,
     role: "tablist",
     "aria-label": "Navigation tabs"
-  }, _react["default"].Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/_react["default"].cloneElement(child, {
-      iconPosition: iconPosition,
-      tabIndex: tabIndex,
-      hasIcons: _react["default"].Children.toArray(children).some(function (child) {
-        return child.props.icon;
-      }),
-      focused: index === innerFocus
-    });
-  })));
+  }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
+    value: contextValue
+  }, children)));
 };
 
 DxcNavTabs.Tab = _Tab["default"];

package/tabs-nav/Tab.js

@@ -11,14 +11,22 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Badge = _interopRequireDefault(require("../badge/Badge"));
 
+var _NavTabs = require("./NavTabs");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
+var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
+
 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; }
@@ -33,18 +41,20 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
       _ref$notificationNumb = _ref.notificationNumber,
       notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
       children = _ref.children,
-      iconPosition = _ref.iconPosition,
-      tabIndex = _ref.tabIndex,
-      _ref$hasIcons = _ref.hasIcons,
-      hasIcons = _ref$hasIcons === void 0 ? false : _ref$hasIcons,
-      _ref$focused = _ref.focused,
-      focused = _ref$focused === void 0 ? false : _ref$focused;
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var tabRef = /*#__PURE__*/(0, _react.createRef)();
+
+  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
+      iconPosition = _useContext.iconPosition,
+      tabIndex = _useContext.tabIndex,
+      hasIcons = _useContext.hasIcons,
+      focusedLabel = _useContext.focusedLabel;
+
   (0, _react.useLayoutEffect)(function () {
     var _tabRef$current;
 
-    focused && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
-  }, [focused]);
+    focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
+  }, [focusedLabel]);
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
     var _tabRef$current2;
@@ -64,18 +74,23 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     active: active,
     role: "tab",
     "aria-selected": active
-  }, /*#__PURE__*/_react["default"].createElement(Tab, {
+  }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
     href: !disabled && href ? href : undefined,
     disabled: disabled,
     iconPosition: iconPosition,
     hasIcon: hasIcons,
     ref: function ref(anchorRef) {
       tabRef.current = anchorRef;
-      return _ref2;
+
+      if (_ref2) {
+        if (typeof _ref2 === "function") _ref2(anchorRef);else {
+          _ref2.current = anchorRef;
+        }
+      }
     },
     onKeyDown: handleOnKeyDown,
     tabIndex: active ? tabIndex : -1
-  }, icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
+  }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
     iconPosition: iconPosition
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
     src: icon

package/tabs-nav/types.d.ts

@@ -29,10 +29,6 @@ export declare type TabProps = {
      * Content of the tab.
      */
     children: string;
-    iconPosition?: "top" | "left";
-    tabIndex?: number;
-    hasIcons?: boolean;
-    focused?: boolean;
 };
 export declare type NavTabsProps = {
     /**
@@ -48,4 +44,10 @@ export declare type NavTabsProps = {
      */
     children: React.ReactNode;
 };
+export declare type NavTabsContextProps = {
+    iconPosition: "top" | "left";
+    tabIndex: number;
+    hasIcons: boolean;
+    focusedLabel: string;
+};
 export {};

package/radio/Radio.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import RadioPropsType from "./types";
-declare const DxcRadio: ({ checked, value, label, labelPosition, name, disabled, onClick, required, margin, size, }: RadioPropsType) => JSX.Element;
-export default DxcRadio;