@dxc-technology/halstack-react 12.0.0 → 12.0.1

package/file-input/FileInput.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _FileInput = _interopRequireDefault(require("./FileInput.tsx"));
+var _FileInput = _interopRequireDefault(require("./FileInput"));
 var file1 = new File(["file1"], "file1.png", {
   type: "image/png"
 });
@@ -21,10 +21,13 @@ var allFiles = [{
 }];
 describe("FileInput component tests", function () {
   test("Renders with correct labels and helper text in file mode", function () {
+    var callbackFile = jest.fn();
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
-        buttonLabel: "Choose files"
+        value: allFiles,
+        buttonLabel: "Choose files",
+        callbackFile: callbackFile
       })),
       getByText = _render.getByText;
     expect(getByText("File input label")).toBeTruthy();
@@ -32,92 +35,119 @@ describe("FileInput component tests", function () {
     expect(getByText("Choose files")).toBeTruthy();
   });
   test("Renders with correct button label in file mode", function () {
+    var callbackFile = jest.fn();
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
-        helperText: "File input helper text"
+        helperText: "File input helper text",
+        value: allFiles,
+        callbackFile: callbackFile
       })),
       getByText = _render2.getByText;
     expect(getByText("Select files")).toBeTruthy();
   });
   test("Renders with correct button label in file mode and single file selection", function () {
+    var callbackFile = jest.fn();
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
-        multiple: false
+        value: allFiles,
+        multiple: false,
+        callbackFile: callbackFile
       })),
       getByText = _render3.getByText;
     expect(getByText("Select file")).toBeTruthy();
   });
   test("Renders with correct labels in filedrop mode", function () {
+    var callbackFile = jest.fn();
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
-        mode: "filedrop"
+        value: allFiles,
+        mode: "filedrop",
+        callbackFile: callbackFile
       })),
       getByText = _render4.getByText;
     expect(getByText("Select")).toBeTruthy();
     expect(getByText("or drop files")).toBeTruthy();
   });
   test("Renders with correct labels in filedrop mode and single file selection", function () {
+    var callbackFile = jest.fn();
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
+        value: allFiles,
         mode: "filedrop",
-        multiple: false
+        multiple: false,
+        callbackFile: callbackFile
       })),
       getByText = _render5.getByText;
     expect(getByText("Select")).toBeTruthy();
     expect(getByText("or drop a file")).toBeTruthy();
   });
   test("Renders with correct custom labels in filedrop mode", function () {
+    var callbackFile = jest.fn();
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
+        value: allFiles,
         mode: "filedrop",
         buttonLabel: "Choose",
-        dropAreaLabel: "(or drop the files)"
+        dropAreaLabel: "(or drop the files)",
+        callbackFile: callbackFile
       })),
       getByText = _render6.getByText;
     expect(getByText("Choose")).toBeTruthy();
     expect(getByText("(or drop the files)")).toBeTruthy();
   });
   test("Renders with correct labels in dropzone mode", function () {
+    var callbackFile = jest.fn();
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
-        mode: "dropzone"
+        value: allFiles,
+        mode: "dropzone",
+        callbackFile: callbackFile
       })),
       getByText = _render7.getByText;
     expect(getByText("Select")).toBeTruthy();
     expect(getByText("or drop files")).toBeTruthy();
   });
   test("Renders with correct labels in dropzone mode and single file selection", function () {
+    var callbackFile = jest.fn();
     var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
+        value: allFiles,
         mode: "dropzone",
-        multiple: false
+        multiple: false,
+        callbackFile: callbackFile
       })),
       getByText = _render8.getByText;
     expect(getByText("Select")).toBeTruthy();
     expect(getByText("or drop a file")).toBeTruthy();
   });
   test("Renders with correct custom labels in dropzone mode", function () {
+    var callbackFile = jest.fn();
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
+        value: allFiles,
         mode: "dropzone",
         buttonLabel: "Choose",
-        dropAreaLabel: "(or drop the files)"
+        dropAreaLabel: "(or drop the files)",
+        callbackFile: callbackFile
       })),
       getByText = _render9.getByText;
     expect(getByText("Choose")).toBeTruthy();
     expect(getByText("(or drop the files)")).toBeTruthy();
   });
   test("Disabled file input", function () {
+    var callbackFile = jest.fn();
     var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
         label: "File input label",
         helperText: "File input helper text",
+        value: allFiles,
+        callbackFile: callbackFile,
         disabled: true
       })),
       getByText = _render10.getByText,
@@ -167,9 +197,7 @@ describe("FileInput component tests", function () {
             expect(getByText("file1.png")).toBeTruthy();
             expect(getByText("file2.txt")).toBeTruthy();
             expect(getByText("Error message")).toBeTruthy();
-            var inputFile = getByLabelText("File input label", {
-              hidden: true
-            });
+            var inputFile = getByLabelText("File input label");
             _react2.fireEvent.change(inputFile, {
               target: {
                 files: [file1]
@@ -236,9 +264,7 @@ describe("FileInput component tests", function () {
             expect(getByText("file1.png")).toBeTruthy();
             expect(getByText("file2.txt")).toBeTruthy();
             expect(getByText("Error message")).toBeTruthy();
-            var inputFile = getByLabelText("File input label", {
-              hidden: true
-            });
+            var inputFile = getByLabelText("File input label");
             _react2.fireEvent.change(inputFile, {
               target: {
                 files: [newFile]
@@ -303,9 +329,7 @@ describe("FileInput component tests", function () {
           })), getByLabelText = _render16.getByLabelText;
           _context6.next = 5;
           return (0, _react2.waitFor)(function () {
-            var inputFile = getByLabelText("File input label", {
-              hidden: true
-            });
+            var inputFile = getByLabelText("File input label");
             _react2.fireEvent.change(inputFile, {
               target: {
                 files: [newFile]
@@ -352,9 +376,7 @@ describe("FileInput component tests", function () {
             expect(getByText("file1.png")).toBeTruthy();
             expect(getByText("file2.txt")).toBeTruthy();
             expect(getByText("Error message")).toBeTruthy();
-            var inputFile = getByLabelText("File input label", {
-              hidden: true
-            });
+            var inputFile = getByLabelText("File input label");
             _react2.fireEvent.change(inputFile, {
               target: {
                 files: [newFile]

package/footer/Footer.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/footer/Footer.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Footer = _interopRequireDefault(require("./Footer.tsx"));
+var _Footer = _interopRequireDefault(require("./Footer"));
 var _disabledRules = require("../../test/accessibility/rules/specific/footer/disabledRules.js");
 var disabledRules = {
   rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {

package/footer/Footer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/footer/Footer.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Footer = _interopRequireDefault(require("./Footer.tsx"));
+var _Footer = _interopRequireDefault(require("./Footer"));
 var social = [{
   href: "https://www.test.com/social",
   logo: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",

package/header/Header.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/header/Header.accessibility.test.js

@@ -6,9 +6,9 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Header = _interopRequireDefault(require("./Header.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
-var _Link = _interopRequireDefault(require("../link/Link.tsx"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _Link = _interopRequireDefault(require("../link/Link"));
 var _disabledRules = require("../../test/accessibility/rules/specific/header/disabledRules.js");
 var disabledRules = {
   rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
@@ -74,7 +74,8 @@ describe("Header component accessibility tests", function () {
               iconPosition: "after",
               margin: "medium",
               size: "medium",
-              optionsIconPosition: "after"
+              optionsIconPosition: "after",
+              onSelectOption: function onSelectOption() {}
             })),
             margin: "medium",
             underlined: true

package/header/Header.test.d.ts

@@ -0,0 +1 @@
+export {};

package/header/Header.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Header = _interopRequireDefault(require("./Header.tsx"));
+var _Header = _interopRequireDefault(require("./Header"));
 describe("Header component tests", function () {
   beforeAll(function () {
     Object.defineProperty(window, "matchMedia", {

package/heading/Heading.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/heading/Heading.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Heading = _interopRequireDefault(require("./Heading.tsx"));
+var _Heading = _interopRequireDefault(require("./Heading"));
 describe("Heading component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;

package/heading/Heading.test.d.ts

@@ -0,0 +1 @@
+export {};

package/heading/Heading.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Heading = _interopRequireDefault(require("./Heading.tsx"));
+var _Heading = _interopRequireDefault(require("./Heading"));
 describe("Heading component tests", function () {
   test("Heading renders with default level", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
@@ -153,17 +153,4 @@ describe("Heading component tests", function () {
       level: 4
     })).toBeTruthy();
   });
-  test("Heading renders with level 5 and invalid as", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 5,
-        as: "h4afdssf"
-      })),
-      getByText = _render13.getByText,
-      getByRole = _render13.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 5
-    })).toBeTruthy();
-  });
 });

package/icon/Icon.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/image/Image.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/link/Link.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/link/Link.accessibility.test.js

@@ -6,8 +6,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Link = _interopRequireDefault(require("./Link.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _Link = _interopRequireDefault(require("./Link"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var icon = /*#__PURE__*/_react["default"].createElement("svg", {
   viewBox: "0 0 24 24",
   enableBackground: "new 0 0 24 24",

package/link/Link.test.d.ts

@@ -0,0 +1 @@
+export {};

package/link/Link.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Link = _interopRequireDefault(require("./Link.tsx"));
+var _Link = _interopRequireDefault(require("./Link"));
 describe("Link component tests", function () {
   test("Link renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),

package/main.d.ts

@@ -1,3 +1,4 @@
+import "./common/fonts.css";
 import DxcAlert from "./alert/Alert";
 import DxcAccordion from "./accordion/Accordion";
 import DxcButton from "./button/Button";

package/main.js

@@ -311,6 +311,7 @@ Object.defineProperty(exports, "HalstackProvider", {
     return _HalstackContext.HalstackProvider;
   }
 });
+require("./common/fonts.css");
 var _Alert = _interopRequireDefault(require("./alert/Alert"));
 var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
 var _Button = _interopRequireDefault(require("./button/Button"));

package/nav-tabs/NavTabs.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/nav-tabs/NavTabs.accessibility.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
+var _NavTabs = _interopRequireDefault(require("./NavTabs"));
 var favoriteIcon = 'filled_Favorite';
 var pinIcon = 'Location_On';
 describe("Tabs component accessibility tests", function () {

package/nav-tabs/NavTabs.js

@@ -50,7 +50,17 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     innerFocusIndex = _useState2[0],
     setInnerFocusIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    underlineWidth = _useState4[0],
+    setUnderlineWidth = _useState4[1];
+  var refNavTabList = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
+  (0, _react.useEffect)(function () {
+    var _refNavTabList$curren, _refNavTabList$curren2;
+    console.log(refNavTabList === null || refNavTabList === void 0 ? void 0 : (_refNavTabList$curren = refNavTabList.current) === null || _refNavTabList$curren === void 0 ? void 0 : _refNavTabList$curren.scrollWidth);
+    setUnderlineWidth(refNavTabList === null || refNavTabList === void 0 ? void 0 : (_refNavTabList$curren2 = refNavTabList.current) === null || _refNavTabList$curren2 === void 0 ? void 0 : _refNavTabList$curren2.scrollWidth);
+  }, [children]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
       iconPosition: iconPosition,
@@ -79,15 +89,20 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     theme: colorsTheme.navTabs
   }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
     onKeyDown: handleOnKeyDown,
+    ref: refNavTabList,
     role: "tablist",
     "aria-label": "Navigation tabs"
   }, /*#__PURE__*/_react["default"].createElement(_NavTabsContext.NavTabsContext.Provider, {
     value: contextValue
-  }, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
+  }, children), /*#__PURE__*/_react["default"].createElement(Underline, {
+    underlineWidth: underlineWidth
+  })));
 };
-var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 2px;\n  background-color: ", ";\n"])), function (props) {
+var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: ", ";\n  z-index: -1;\n  width: ", "px;\n"])), function (props) {
   return props.theme.dividerColor;
+}, function (props) {
+  return props.underlineWidth;
 });
 DxcNavTabs.Tab = _Tab["default"];
-var NavTabsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n"])));
+var NavTabsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  overflow: auto;\n  z-index: 0;\n"])));
 var _default = exports["default"] = DxcNavTabs;

package/nav-tabs/NavTabs.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import DxcNavTabs from "./NavTabs";
+import DxcContainer from "../container/Container";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
@@ -16,10 +17,9 @@ const iconSVG = (
   </svg>
 );
 
+const favoriteIcon = "filled_Favorite";
 
-const favoriteIcon = 'filled_Favorite'
-
-const pinIcon = 'Location_On';
+const pinIcon = "Location_On";
 
 const opinionatedTheme = {
   navTabs: {
@@ -275,5 +275,20 @@ export const Chromatic = () => (
         </DxcNavTabs>
       </HalstackProvider>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="NavTabs in a limited space container" theme="light" level={4} />
+      <DxcContainer width="500px">
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </DxcContainer>
+    </ExampleContainer>
   </>
 );

package/nav-tabs/NavTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/nav-tabs/NavTabs.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
+var _NavTabs = _interopRequireDefault(require("./NavTabs"));
 describe("Tabs component tests", function () {
   test("Tabs render with correct labels and attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], null, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {

package/nav-tabs/Tab.js

@@ -95,7 +95,7 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     label: typeof notificationNumber === "number" && notificationNumber
   }))));
 });
-var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n  z-index: 1;\n"])), function (props) {
+var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n"])), function (props) {
   return props.active ? props.theme.selectedUnderlineColor : "transparent";
 });
 var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n  gap: ", ";\n  height: ", ";\n  min-width: 176px;\n  min-height: 44px;\n  padding: 0.375rem;\n  border-radius: 4px;\n  background: ", ";\n  text-decoration-color: transparent;\n  text-decoration-line: none;\n  cursor: ", ";\n\n  ", "\n"])), function (props) {

package/number-input/NumberInput.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/number-input/NumberInput.accessibility.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {

package/number-input/NumberInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/number-input/NumberInput.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
+var _NumberInput = _interopRequireDefault(require("./NumberInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -776,7 +776,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render30.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -804,7 +804,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render31.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -832,7 +832,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render32.getByLabelText;
     var number = getByLabelText("Number input label");
@@ -860,7 +860,7 @@ describe("Number input component tests", function () {
         min: 5,
         max: 20,
         step: 5,
-        defaultValue: 10
+        defaultValue: "10"
       })),
       getByLabelText = _render33.getByLabelText;
     var number = getByLabelText("Number input label");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "12.0.0",
+  "version": "12.0.1",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "https://developer.dxc.com/halstack",
@@ -21,8 +21,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "color": "^3.1.3",
     "dayjs": "^1.11.1",
-    "slugify": "^1.6.5",
-    "uuid": "^8.3.2"
+    "slugify": "^1.6.5"
   },
   "scripts": {
     "test": "jest --env=jsdom --config=./jest.config.js",
@@ -37,7 +36,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.24.3",
+    "@babel/core": "^7.24.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.16.8",
@@ -60,11 +59,11 @@
     "@types/jest-axe": "^3.5.9",
     "@types/react": "^18.0.18",
     "@types/styled-components": "5.1.29",
-    "@types/uuid": "^9.0.6",
     "axe-playwright": "^2.0.1",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
     "chromatic": "^8.0.0",
+    "css-loader": "^7.1.1",
     "eslint": "^8.53.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",
@@ -82,7 +81,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.5.3",
-    "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook-addon-pseudo-states": "^3.0.1",
+    "style-loader": "^4.0.0",
     "styled-components": "^5.0.1",
     "typescript": "^5.3.3"
   }

package/paginator/Paginator.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/paginator/Paginator.accessibility.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _Paginator = _interopRequireDefault(require("./Paginator.tsx"));
+var _Paginator = _interopRequireDefault(require("./Paginator"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {

package/paginator/Paginator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/paginator/Paginator.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Paginator = _interopRequireDefault(require("./Paginator.tsx"));
+var _Paginator = _interopRequireDefault(require("./Paginator"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {

package/paragraph/Paragraph.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/password-input/PasswordInput.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/password-input/PasswordInput.accessibility.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _axeHelper = require("../../test/accessibility/axe-helper.js");
-var _PasswordInput = _interopRequireDefault(require("./PasswordInput.tsx"));
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {