@dxc-technology/halstack-react 9.0.1 → 10.0.0

package/tabs/Tabs.js

@@ -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;
@@ -344,7 +344,7 @@ var DxcTabs = function DxcTabs(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(ScrollIndicator, {
     onClick: scrollLeft,
     enabled: enabledIndicator,
-    "aria-disabled": !scrollLeftEnabled,
+    disabled: !scrollLeftEnabled,
     "aria-label": translatedLabels.tabs.scrollLeft,
     tabIndex: scrollLeftEnabled ? tabIndex : -1,
     minHeightTabs: minHeightTabs
@@ -386,14 +386,14 @@ var DxcTabs = function DxcTabs(_ref) {
   }))), /*#__PURE__*/_react["default"].createElement(ScrollIndicator, {
     onClick: scrollRight,
     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;
@@ -419,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) {
@@ -439,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/text-input/TextInput.js

@@ -642,7 +642,7 @@ var Action = _styledComponents["default"].button(_templateObject7 || (_templateO
 }, function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledActionIconColorOnDark : props.theme.disabledActionIconColor : props.backgroundType === "dark" ? props.theme.actionIconColorOnDark : props.theme.actionIconColor;
 }, function (props) {
-  return !props.disabled && "\n      &:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:focus-visible {\n        outline: none;\n        box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionBackgroundColorOnDark : props.theme.hoverActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionIconColorOnDark : props.theme.hoverActionIconColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionBackgroundColorOnDark : props.theme.activeActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionIconColorOnDark : props.theme.activeActionIconColor, ";\n      }\n    ");
+  return !props.disabled && "\n      &:focus, \n      &:focus-visible {\n        outline: none;\n        box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionBackgroundColorOnDark : props.theme.hoverActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionIconColorOnDark : props.theme.hoverActionIconColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionBackgroundColorOnDark : props.theme.activeActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionIconColorOnDark : props.theme.activeActionIconColor, ";\n      }\n    ");
 });
 
 var Prefix = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin-left: 0.25rem;\n  padding: 0 0.5rem 0 0;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {

package/text-input/TextInput.stories.tsx

@@ -522,7 +522,7 @@ const DarkAutosuggestListbox = () => {
           <Title title="Dark theme" theme="dark" level={2} />
           <ExampleContainer>
             <Title title="Default with opened suggestions" theme="dark" level={3} />
-            <DxcFlex direction="column" gap="80px">
+            <DxcFlex direction="column" gap="5rem">
               <DxcTextInput label="Label" suggestions={countries} optional placeholder="Choose an option" />
               <DxcCheckbox
                 label="You understand the selection and give your consent"

package/textarea/Textarea.js

@@ -171,7 +171,6 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     backgroundType: backgroundType,
     ref: textareaRef,
     tabIndex: tabIndex,
-    "aria-disabled": disabled,
     "aria-invalid": error ? "true" : "false",
     "aria-errormessage": error ? errorId : undefined,
     "aria-required": optional ? "false" : "true"

package/textarea/Textarea.test.js

@@ -85,7 +85,6 @@ describe("Textarea component tests", function () {
         getByLabelText = _render7.getByLabelText;
 
     var textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("false");
     expect(textarea.getAttribute("aria-invalid")).toBe("false");
     expect(textarea.getAttribute("aria-describedBy")).toBeNull();
     expect(textarea.getAttribute("aria-required")).toBe("true");
@@ -101,7 +100,7 @@ describe("Textarea component tests", function () {
     var textarea = getByLabelText("Example label");
     expect(textarea.value).toBe("Example text");
   });
-  test("Disabled textarea renders with correct aria and can not be modified", function () {
+  test("Disabled textarea can not be modified", function () {
     var onChange = jest.fn();
 
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
@@ -112,7 +111,6 @@ describe("Textarea component tests", function () {
         getByLabelText = _render9.getByLabelText;
 
     var textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("true");
 
     _userEvent["default"].type(textarea, "Test");
 

package/toggle-group/ToggleGroup.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import ToogleGroupPropsType from "./types";
-declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToogleGroupPropsType) => JSX.Element;
+import ToggleGroupPropsType from "./types";
+declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToggleGroupPropsType) => JSX.Element;
 export default DxcToggleGroup;

package/useTheme.d.ts

@@ -499,7 +499,7 @@ declare const useTheme: () => {
         underlineSpacing: string;
         underlineStyle: string;
         underlineThickness: string;
-        disabledColor: string;
+        disabledFontColor: string;
         hoverFontColor: string;
         hoverUnderlineColor: string;
         visitedFontColor: string;

package/utils/FocusLock.js

@@ -18,11 +18,10 @@ 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 not = {
-  inert: ":not([inert]):not([inert] *)",
   negTabIndex: ':not([tabindex^="-"])',
-  disabled: ":not(:disabled):not([aria-disabled='true'])"
+  disabled: ":not(:disabled)"
 };
-var focusableQuery = ["a[href]".concat(not.inert).concat(not.negTabIndex), "area[href]".concat(not.inert).concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "select".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "button".concat(not.inert).concat(not.negTabIndex).concat(not.disabled), "details".concat(not.inert, " > summary:first-of-type").concat(not.negTabIndex), "iframe".concat(not.inert).concat(not.negTabIndex), "audio[controls]".concat(not.inert).concat(not.negTabIndex), "video[controls]".concat(not.inert).concat(not.negTabIndex), "[contenteditable]".concat(not.inert).concat(not.negTabIndex), "[tabindex]".concat(not.inert).concat(not.negTabIndex).concat(not.disabled)].join(",");
+var focusableQuery = ["a[href]".concat(not.negTabIndex), "area[href]".concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.negTabIndex).concat(not.disabled), "select".concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.negTabIndex).concat(not.disabled), "button".concat(not.negTabIndex).concat(not.disabled), "details > summary:first-of-type".concat(not.negTabIndex), "iframe".concat(not.negTabIndex), "audio[controls]".concat(not.negTabIndex), "video[controls]".concat(not.negTabIndex), "[contenteditable]".concat(not.negTabIndex), "[tabindex]".concat(not.negTabIndex).concat(not.disabled)].join(",");
 
 var getFocusableElements = function getFocusableElements(container) {
   return Array.prototype.slice.call(container.querySelectorAll(focusableQuery)).filter(function (element) {
@@ -44,7 +43,7 @@ var attempFocus = function attempFocus(element) {
 };
 /**
  * @param element: HTMLElement
- * @returns boolean: true if element is contained inside a Radix Portal, false otherwise. 
+ * @returns boolean: true if element is contained inside a Radix Portal, false otherwise.
  */