@dxc-technology/halstack-react 9.0.0 → 9.1.0

package/spinner/Spinner.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -46,11 +46,8 @@ var DxcSpinner = function DxcSpinner(_ref) {
     margin: margin,
     mode: mode
   }, /*#__PURE__*/_react["default"].createElement(SpinnerContainer, {
-    backgroundType: backgroundType,
-    mode: mode
-  }, mode === "overlay" && /*#__PURE__*/_react["default"].createElement(BackOverlay, null), /*#__PURE__*/_react["default"].createElement(BackgroundSpinner, {
     mode: mode
-  }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
+  }, mode === "overlay" && /*#__PURE__*/_react["default"].createElement(BackOverlay, null), /*#__PURE__*/_react["default"].createElement(BackgroundSpinner, null, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
     viewBox: "0 0 140 140"
   }, /*#__PURE__*/_react["default"].createElement(CircleBackground, {
     cx: "70",
@@ -65,8 +62,7 @@ var DxcSpinner = function DxcSpinner(_ref) {
     r: "6",
     mode: mode
   }))), value >= 0 && value <= 100 ? /*#__PURE__*/_react["default"].createElement(Spinner, {
-    role: "progressbar",
-    mode: mode
+    role: "progressbar"
   }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
     viewBox: "0 0 140 140",
     isDeterminated: true
@@ -90,8 +86,7 @@ var DxcSpinner = function DxcSpinner(_ref) {
     isDeterminated: true,
     value: value
   }))) : /*#__PURE__*/_react["default"].createElement(Spinner, {
-    role: "progressbar",
-    mode: mode
+    role: "progressbar"
   }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
     viewBox: "0 0 140 140",
     isDeterminated: false
@@ -101,7 +96,8 @@ var DxcSpinner = function DxcSpinner(_ref) {
     r: "65",
     backgroundType: backgroundType,
     mode: mode,
-    isDeterminated: false
+    isDeterminated: false,
+    value: value
   })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
     viewBox: "0 0 16 16",
     isDeterminated: false
@@ -111,26 +107,24 @@ var DxcSpinner = function DxcSpinner(_ref) {
     r: "6",
     backgroundType: backgroundType,
     mode: mode,
-    isDeterminated: false
-  }))), mode !== "small" && /*#__PURE__*/_react["default"].createElement(LabelsContainer, {
-    label: label,
-    value: value,
-    showValue: showValue
-  }, /*#__PURE__*/_react["default"].createElement(SpinnerLabel, {
+    isDeterminated: false,
+    value: value
+  }))), mode !== "small" && /*#__PURE__*/_react["default"].createElement(LabelsContainer, null, /*#__PURE__*/_react["default"].createElement(SpinnerLabel, {
     backgroundType: backgroundType,
     mode: mode
   }, label), (value || value === 0) && showValue && /*#__PURE__*/_react["default"].createElement(SpinnerProgress, {
+    value: value,
     backgroundType: backgroundType,
     mode: mode,
     showValue: showValue
   }, value, "%")))));
 };
 
-var determinatedValue = function determinatedValue(props, strokeDashArray) {
+var determinatedValue = function determinatedValue(value, strokeDashArray) {
   var val = 0;
 
-  if (props.value >= 0 && props.value <= 100) {
-    val = strokeDashArray * (1 - props.value / 100);
+  if (value >= 0 && value <= 100) {
+    val = strokeDashArray * (1 - value / 100);
   }
 
   return val;
@@ -207,7 +201,7 @@ var CircleSpinner = _styledComponents["default"].circle(_templateObject9 || (_te
 }, function (props) {
   return props.mode !== "small" ? "8.5px" : "2px";
 }, function (props) {
-  return props.isDeterminated ? props.mode !== "small" ? determinatedValue(props, 409) : determinatedValue(props, 38) : "";
+  return props.isDeterminated ? props.mode !== "small" ? determinatedValue(props.value, 409) : determinatedValue(props.value, 38) : "";
 });
 
 var LabelsContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  margin: 0 auto;\n  position: absolute;\n  text-align: center;\n  width: 110px;\n"])));
@@ -229,7 +223,7 @@ var SpinnerLabel = _styledComponents["default"].p(_templateObject11 || (_templat
 });
 
 var SpinnerProgress = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  color: ", ";\n  text-align: ", ";\n  letter-spacing: ", ";\n"])), function (props) {
-  return props.value !== "" && props.showValue === true && "block" || "none";
+  return props.value && props.showValue === true && "block" || "none";
 }, function (props) {
   return props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily;
 }, function (props) {

package/spinner/Spinner.stories.jsx

@@ -23,62 +23,62 @@ export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="With label" theme="light" level={4} />
-      <DxcSpinner label="Label" value="50"></DxcSpinner>
+      <DxcSpinner label="Label" value={50}></DxcSpinner>
       <Title title="With value label" theme="light" level={4} />
-      <DxcSpinner value="50" showValue></DxcSpinner>
+      <DxcSpinner value={50} showValue></DxcSpinner>
       <Title title="With label and value label" theme="light" level={4} />
-      <DxcSpinner label="Label" value="50" showValue></DxcSpinner>
+      <DxcSpinner label="Label" value={50} showValue></DxcSpinner>
       <Title title="With 100%" theme="light" level={4} />
-      <DxcSpinner label="Label" value="100" showValue></DxcSpinner>
+      <DxcSpinner label="Label" value={100} showValue></DxcSpinner>
     </ExampleContainer>
     <Title title="Modes" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Mode large" theme="light" level={4} />
-      <DxcSpinner mode="large" value="50"></DxcSpinner>
+      <DxcSpinner mode="large" value={50}></DxcSpinner>
       <Title title="Mode small" theme="light" level={4} />
-      <DxcSpinner mode="small" value="50"></DxcSpinner>
+      <DxcSpinner mode="small" value={50}></DxcSpinner>
       <Title title="Mode small with 100%" theme="light" level={4} />
-      <DxcSpinner mode="small" value="100" showValue></DxcSpinner>
+      <DxcSpinner mode="small" value={100} showValue></DxcSpinner>
     </ExampleContainer>
     <Title title="Margins with large mode" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xxsmall" value="75"></DxcSpinner>
+      <DxcSpinner margin="xxsmall" value={75}></DxcSpinner>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xsmall" value="75"></DxcSpinner>
+      <DxcSpinner margin="xsmall" value={75}></DxcSpinner>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcSpinner margin="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="small" value={75}></DxcSpinner>
       <Title title="Medium margin" theme="light" level={4} />
-      <DxcSpinner margin="medium" value="75"></DxcSpinner>
+      <DxcSpinner margin="medium" value={75}></DxcSpinner>
       <Title title="Large margin" theme="light" level={4} />
-      <DxcSpinner margin="large" value="75"></DxcSpinner>
+      <DxcSpinner margin="large" value={75}></DxcSpinner>
       <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xlarge" value="75"></DxcSpinner>
+      <DxcSpinner margin="xlarge" value={75}></DxcSpinner>
       <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xxlarge" value="75"></DxcSpinner>
+      <DxcSpinner margin="xxlarge" value={75}></DxcSpinner>
     </ExampleContainer>
     <Title title="Margins with small mode" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xxsmall" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="xxsmall" mode="small" value={75}></DxcSpinner>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xsmall" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="xsmall" mode="small" value={75}></DxcSpinner>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcSpinner margin="small" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="small" mode="small" value={75}></DxcSpinner>
       <Title title="Medium margin" theme="light" level={4} />
-      <DxcSpinner margin="medium" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="medium" mode="small" value={75}></DxcSpinner>
       <Title title="Large margin" theme="light" level={4} />
-      <DxcSpinner margin="large" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="large" mode="small" value={75}></DxcSpinner>
       <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xlarge" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="xlarge" mode="small" value={75}></DxcSpinner>
       <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xxlarge" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="xxlarge" mode="small" value={75}></DxcSpinner>
     </ExampleContainer>
     <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
       <Title title="With label and value label" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcSpinner label="Label" value="50" showValue></DxcSpinner>
+        <DxcSpinner label="Label" value={50} showValue></DxcSpinner>
       </HalstackProvider>
     </ExampleContainer>
   </>
@@ -87,35 +87,35 @@ export const Chromatic = () => (
 export const SpinnerOverlay = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="25"></DxcSpinner>
+    <DxcSpinner mode="overlay" value={25}></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWith100 = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="100"></DxcSpinner>
+    <DxcSpinner mode="overlay" value={100}></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWithLabel = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="50" label="Label"></DxcSpinner>
+    <DxcSpinner mode="overlay" value={50} label="Label"></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWithValue = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="50" showValue></DxcSpinner>
+    <DxcSpinner mode="overlay" value={50} showValue></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWithValueAndLabel = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" label="Label" value="50" showValue></DxcSpinner>
+    <DxcSpinner mode="overlay" label="Label" value={50} showValue></DxcSpinner>
   </ExampleContainer>
 );
 
@@ -123,7 +123,7 @@ export const SpinnerOverlayWithValueAndLabelOpinionated = () => (
   <ExampleContainer>
     <HalstackProvider theme={opinionatedTheme}>
       <Title title="Mode overlay" theme="light" level={4} />
-      <DxcSpinner mode="overlay" label="Label" value="50" showValue></DxcSpinner>
+      <DxcSpinner mode="overlay" label="Label" value={50} showValue></DxcSpinner>
     </HalstackProvider>
   </ExampleContainer>
 );

package/spinner/Spinner.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Spinner = _interopRequireDefault(require("./Spinner"));
+var _Spinner = _interopRequireDefault(require("./Spinner.tsx"));
 
 describe("Spinner component tests", function () {
   test("Spinner renders with correct label", function () {

package/switch/Switch.js

@@ -21,9 +21,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _uuid = require("uuid");
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 

package/switch/Switch.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Switch = _interopRequireDefault(require("./Switch"));
+var _Switch = _interopRequireDefault(require("./Switch.tsx"));
 
 describe("Switch component tests", function () {
   test("Switch renders with correct text", function () {

package/switch/types.d.ts

@@ -1,5 +1,5 @@
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/table/Table.js

@@ -17,9 +17,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 

package/table/Table.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Table = _interopRequireDefault(require("./Table"));
+var _Table = _interopRequireDefault(require("./Table.tsx"));
 
 describe("Table component tests", function () {
   test("Table renders with correct content", function () {

package/tabs/Tab.js

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Badge = _interopRequireDefault(require("../badge/Badge"));
 
-var _Typography = _interopRequireDefault(require("../typography/Typography"));
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -42,7 +42,6 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     type: "button",
     tabIndex: tabIndex,
     disabled: tab.isDisabled,
-    "aria-disabled": tab.isDisabled,
     "aria-selected": active,
     hasLabelAndIcon: hasLabelAndIcon,
     iconPosition: iconPosition,
@@ -57,7 +56,7 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _onMouseLeave();
     }
   }, /*#__PURE__*/_react["default"].createElement(MainLabelContainer, {
-    hasBadge: tab.notificationNumber,
+    notificationNumber: tab.notificationNumber,
     hasLabelAndIcon: hasLabelAndIcon,
     iconPosition: iconPosition
   }, tab.icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
@@ -65,7 +64,7 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     iconPosition: iconPosition
   }, typeof tab.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: tab.icon
-  }) : tab.icon), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+  }) : tab.icon), /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
     color: tab.isDisabled ? colorsTheme.tabs.disabledFontColor : active ? colorsTheme.tabs.selectedFontColor : colorsTheme.tabs.unselectedFontColor,
     fontFamily: colorsTheme.tabs.fontFamily,
     fontSize: colorsTheme.tabs.fontSize,
@@ -74,15 +73,15 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     textAlign: "center",
     letterSpacing: "0.025em",
     lineHeight: "1.715em"
-  }, tab.label)), tab.notificationNumber && tab.notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, {
+  }, tab.label)), tab.notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, {
     hasLabelAndIcon: hasLabelAndIcon,
     iconPosition: iconPosition
   }, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
-    notificationText: tab.notificationNumber > 99 ? "+99" : tab.notificationNumber
+    notificationText: typeof tab.notificationNumber === "number" && tab.notificationNumber > 99 ? "+99" : tab.notificationNumber
   })));
 });
 
-var TabContainer = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  text-transform: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  vertical-align: middle;\n  justify-content: center;\n  min-width: 90px;\n  max-width: 360px;\n  padding: ", ";\n  height: ", ";\n  min-height: ", ";\n  background-color: ", ";\n  svg {\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n\n  &[aria-selected=\"true\"] {\n    background-color: ", ";\n    svg {\n      color: ", ";\n    }\n    opacity: 1;\n  }\n\n  &[aria-disabled=\"true\"] {\n    background-color: ", " !important;\n    cursor: not-allowed !important;\n    pointer-events: all;\n    font-style: ", ";\n    svg {\n      color: ", ";\n    }\n    outline: none !important;\n    > div {\n      opacity: 0.5;\n    }\n  }\n"])), function (props) {
+var TabContainer = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  text-transform: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  vertical-align: middle;\n  justify-content: center;\n  min-width: 90px;\n  max-width: 360px;\n  padding: ", ";\n  height: ", ";\n  min-height: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n  svg {\n    color: ", ";\n  }\n\n  &[aria-selected=\"true\"] {\n    background-color: ", ";\n    svg {\n      color: ", ";\n    }\n    opacity: 1;\n  }\n\n  &:disabled {\n    background-color: ", " !important;\n    cursor: not-allowed !important;\n    pointer-events: all;\n    font-style: ", ";\n    outline: none !important;\n\n    svg {\n      color: ", ";\n    }\n    > div {\n      opacity: 0.5;\n    }\n  }\n"])), function (props) {
   return props.theme.fontTextTransform;
 }, function (props) {
   return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "12px 16px" || "8px 16px";
@@ -92,14 +91,14 @@ var TabContainer = _styledComponents["default"].button(_templateObject || (_temp
   return (!props.hasLabelAndIcon || props.hasLabelAndIcon && props.iconPosition !== "top") && "47px" || "71px";
 }, function (props) {
   return props.theme.unselectedBackgroundColor;
-}, function (props) {
-  return props.theme.unselectedIconColor;
 }, function (props) {
   return "".concat(props.theme.hoverBackgroundColor, " !important");
 }, function (props) {
   return "".concat(props.theme.pressedBackgroundColor, " !important");
 }, function (props) {
   return props.theme.focusOutline;
+}, function (props) {
+  return props.theme.unselectedIconColor;
 }, function (props) {
   return props.theme.selectedBackgroundColor;
 }, function (props) {
@@ -119,7 +118,7 @@ var BadgeContainer = _styledComponents["default"].div(_templateObject2 || (_temp
 var MainLabelContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  margin-left: ", ";\n"])), function (props) {
   return props.hasLabelAndIcon && props.iconPosition === "top" && "column" || "row";
 }, function (props) {
-  return props.hasBadge ? typeof props.hasBadge === "number" ? "calc(".concat(props.theme.badgeWidthWithNotificationNumber, " + 12px)") : "calc(".concat(props.theme.badgeWidth, " + 12px)") : "unset";
+  return props.notificationNumber ? typeof props.notificationNumber === "number" ? "calc(".concat(props.theme.badgeWidthWithNotificationNumber, " + 12px)") : "calc(".concat(props.theme.badgeWidth, " + 12px)") : "unset";
 });
 
 var TabIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n\n  img,\n  svg {\n    height: 22px;\n    width: 22px;\n  }\n"])), function (props) {

package/tabs/Tabs.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -193,7 +193,7 @@ var DxcTabs = function DxcTabs(_ref) {
     var _refTabList$current3;
 
     var scrollWidth = (refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current3 = refTabList.current) === null || _refTabList$current3 === void 0 ? void 0 : _refTabList$current3.offsetWidth) * 0.75;
-    var moveX;
+    var moveX = 0;
 
     if (countClick <= scrollWidth) {
       moveX = 0;
@@ -213,7 +213,7 @@ var DxcTabs = function DxcTabs(_ref) {
     var _refTabList$current4, _refTabList$current5;
 
     var scrollWidth = (refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current4 = refTabList.current) === null || _refTabList$current4 === void 0 ? void 0 : _refTabList$current4.offsetWidth) * 0.75;
-    var moveX;
+    var moveX = 0;
 
     if (countClick + scrollWidth + (refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current5 = refTabList.current) === null || _refTabList$current5 === void 0 ? void 0 : _refTabList$current5.offsetWidth) >= totalTabsWidth) {
       var _refTabList$current6;
@@ -343,9 +343,8 @@ var DxcTabs = function DxcTabs(_ref) {
     iconPosition: iconPosition
   }, /*#__PURE__*/_react["default"].createElement(ScrollIndicator, {
     onClick: scrollLeft,
-    scrollLeftEnabled: scrollLeftEnabled,
     enabled: enabledIndicator,
-    "aria-disabled": !scrollLeftEnabled,
+    disabled: !scrollLeftEnabled,
     "aria-label": translatedLabels.tabs.scrollLeft,
     tabIndex: scrollLeftEnabled ? tabIndex : -1,
     minHeightTabs: minHeightTabs
@@ -386,16 +385,15 @@ var DxcTabs = function DxcTabs(_ref) {
     "aria-disabled": isActiveIndicatorDisabled
   }))), /*#__PURE__*/_react["default"].createElement(ScrollIndicator, {
     onClick: scrollRight,
-    scrollRightEnabled: scrollRightEnabled,
     enabled: enabledIndicator,
-    "aria-disabled": !scrollRightEnabled,
+    disabled: !scrollRightEnabled,
     "aria-label": translatedLabels.tabs.scrollRight,
     tabIndex: scrollRightEnabled ? tabIndex : -1,
     minHeightTabs: minHeightTabs
   }, arrowIcons.right))));
 };
 
-var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
+var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.theme.dividerThickness;
 }, function (props) {
   return props.theme.dividerColor;
@@ -421,16 +419,12 @@ var Tabs = _styledComponents["default"].div(_templateObject3 || (_templateObject
   return props.theme.unselectedBackgroundColor;
 });
 
-var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  background-color: #ffffff;\n  font-size: 1.25rem;\n  min-width: ", ";\n  height: ", "px;\n  padding: 0;\n  justify-content: center;\n  cursor: pointer;\n  border-bottom: solid ", " ", ";\n  box-sizing: border-box;\n  border: none;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n  &:active {\n    background-color: ", ";\n  }\n  svg {\n    height: 20px;\n    width: 20px;\n    align-self: center;\n    fill: ", ";\n    visibility: visible;\n  }\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n    cursor: default;\n    svg {\n      visibility: hidden;\n    }\n    &:focus {\n      outline: none;\n    }\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n  }\n"])), function (props) {
+var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: center;\n  min-width: ", ";\n  height: ", "px;\n  padding: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 1.25rem;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    cursor: default;\n    svg {\n      visibility: hidden;\n    }\n    &:focus {\n      outline: none;\n    }\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n  }\n\n  svg {\n    align-self: center;\n    height: 20px;\n    width: 20px;\n    fill: ", ";\n  }\n"])), function (props) {
   return props.enabled ? "flex" : "none";
 }, function (props) {
   return props.theme.scrollButtonsWidth;
 }, function (props) {
   return props.minHeightTabs - 1;
-}, function (props) {
-  return props.theme.dividerThickness;
-}, function (props) {
-  return props.theme.dividerColor;
 }, function (props) {
   return "".concat(props.theme.hoverBackgroundColor, " !important");
 }, function (props) {
@@ -441,19 +435,19 @@ var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_
   return props.theme.unselectedFontColor;
 });
 
-var ActiveIndicator = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  left: ", ";\n  width: ", ";\n  background-color: ", ";\n  bottom: 0;\n  height: ", ";\n  position: absolute;\n  &[aria-disabled=\"true\"] {\n    background-color: ", ";\n    display: none;\n  }\n"])), function (props) {
+var ActiveIndicator = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  &[aria-disabled=\"true\"] {\n    background-color: ", ";\n    display: none;\n  }\n"])), function (props) {
   return "".concat(props.tabLeft, "px");
 }, function (props) {
   return "".concat(props.tabWidth, "px");
-}, function (props) {
-  return props.theme.selectedUnderlineColor;
 }, function (props) {
   return props.theme.selectedUnderlineThickness;
+}, function (props) {
+  return props.theme.selectedUnderlineColor;
 }, function (props) {
   return props.theme.disabledFontColor;
 });
 
-var TabsContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex: 1 1 auto;\n  display: inline-block;\n  position: relative;\n  white-space: nowrap;\n  overflow-x: scroll;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var TabsContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  display: inline-block;\n  position: relative;\n  white-space: nowrap;\n  overflow-x: scroll;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
 
 var TabList = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  min-height: ", "px;\n"])), function (props) {
   return props.minHeightTabs;

package/tabs/Tabs.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _Tabs = _interopRequireDefault(require("./Tabs.tsx"));
 
 var sampleTabs = [{
   label: "Tab-1"
@@ -17,13 +17,13 @@ var sampleTabs = [{
 }];
 var sampleTabsWithBadge = [{
   label: "Tab-1",
-  notificationNumber: "10"
+  notificationNumber: 10
 }, {
   label: "Tab-2",
-  notificationNumber: "20"
+  notificationNumber: 20
 }, {
   label: "Tab-3",
-  notificationNumber: "101"
+  notificationNumber: 101
 }];
 var sampleTabsMiddleDisabled = [{
   label: "Tab-1"
@@ -149,7 +149,6 @@ describe("Tabs component tests", function () {
       onTabClick: onTabClick,
       activeTabIndex: 0
     })),
-        getByText = _render7.getByText,
         getAllByRole = _render7.getAllByRole;
 
     var tabs = getAllByRole("tab");

package/tabs/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/tag/Tag.js

@@ -19,11 +19,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _Box = _interopRequireDefault(require("../box/Box"));
 
@@ -64,9 +64,7 @@ var DxcTag = function DxcTag(_ref) {
   var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     size: size,
     shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
-  }, /*#__PURE__*/_react["default"].createElement(TagContent, {
-    labelPosition: labelPosition
-  }, labelPosition === "before" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(TagContent, null, labelPosition === "before" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     iconBgColor: iconBgColor
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TagIcon, {
     src: icon
@@ -114,16 +112,16 @@ var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templat
   return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
 }, function (_ref4) {
   var margin = _ref4.margin;
-  return margin && margin.top ? _variables.spaces[margin.top] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
 }, function (_ref5) {
   var margin = _ref5.margin;
-  return margin && margin.right ? _variables.spaces[margin.right] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
 }, function (_ref6) {
   var margin = _ref6.margin;
-  return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.bottom ? _variables.spaces[margin.bottom] : "";
 }, function (_ref7) {
   var margin = _ref7.margin;
-  return margin && margin.left ? _variables.spaces[margin.left] : "";
+  return margin && (0, _typeof2["default"])(margin) === "object" && margin.left ? _variables.spaces[margin.left] : "";
 }, function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {

package/tag/Tag.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Tag = _interopRequireDefault(require("./Tag"));
+var _Tag = _interopRequireDefault(require("./Tag.tsx"));
 
 describe("Tag component tests", function () {
   test("Tag renders with correct label", function () {

package/text-input/Suggestion.js

@@ -62,7 +62,7 @@ var Suggestion = function Suggestion(_ref) {
     role: "option",
     "aria-selected": visuallyFocused ? true : undefined
   }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
-    last: isLast,
+    isLast: isLast,
     visuallyFocused: visuallyFocused
   }, highlighted ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedSuggestion.matchedWords), matchedSuggestion.noMatchedWords) : suggestion));
 };
@@ -76,7 +76,7 @@ var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_t
 });
 
 var StyledSuggestion = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n  ", ";\n"])), function (props) {
-  return props.last || props.visuallyFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
+  return props.isLast || props.visuallyFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
 });
 
 var _default = /*#__PURE__*/_react["default"].memo(Suggestion);