@dxc-technology/halstack-react 8.0.0 → 9.0.0

package/text-input/TextInput.test.js

@@ -57,6 +57,7 @@ global.DOMRect = {
   }
 };
 var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
+var specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];
 describe("TextInput component tests", function () {
   test("Renders with correct error aria attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
@@ -1183,10 +1184,109 @@ describe("TextInput component synchronous autosuggest tests", function () {
     expect(input.value).toBe("");
     expect(queryByRole("listbox")).toBeFalsy();
   });
+  test("Autosuggest escapes special characters", function () {
+    var onChange = jest.fn();
+
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: specialCharacters,
+      onChange: onChange
+    })),
+        getAllByText = _render37.getAllByText,
+        getByText = _render37.getByText,
+        getByRole = _render37.getByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "/"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("/").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "\\"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("\\").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "*"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("*").length).toBe(2);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "("
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("(").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: ")"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText(")").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "["
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("[").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "]"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("]").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "+"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("+").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "?"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("?").length).toBe(1);
+  });
 });
 describe("TextInput component asynchronous autosuggest tests", function () {
   test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var callbackFunc, onChange, _render37, getByRole, getByText, input;
+    var callbackFunc, onChange, _render38, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
@@ -1203,11 +1303,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render37.getByRole, getByText = _render37.getByText;
+            })), getByRole = _render38.getByRole, getByText = _render38.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1270,14 +1370,14 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     });
     var onChange = jest.fn();
 
-    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Autosuggest Countries",
       suggestions: callbackFunc,
       onChange: onChange
     })),
-        getByRole = _render38.getByRole,
-        queryByText = _render38.queryByText,
-        queryByRole = _render38.queryByRole;
+        getByRole = _render39.getByRole,
+        queryByText = _render39.queryByText,
+        queryByRole = _render39.queryByRole;
 
     var input = getByRole("combobox");
 
@@ -1299,7 +1399,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     expect(input.value).toBe("");
   });
   test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var callbackFunc, onChange, _render39, getByRole, getByText, queryByText, queryByRole, input, list;
+    var callbackFunc, onChange, _render40, getByRole, getByText, queryByText, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
@@ -1316,11 +1416,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render39.getByRole, getByText = _render39.getByText, queryByText = _render39.queryByText, queryByRole = _render39.queryByRole;
+            })), getByRole = _render40.getByRole, getByText = _render40.getByText, queryByText = _render40.queryByText, queryByRole = _render40.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1368,7 +1468,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee2);
   })));
   test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var callbackFunc, onChange, _render40, getByRole, getByText, input;
+    var callbackFunc, onChange, _render41, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
@@ -1385,11 +1485,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render40.getByRole, getByText = _render40.getByText;
+            })), getByRole = _render41.getByRole, getByText = _render41.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1419,7 +1519,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee3);
   })));
   test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var callbackFunc, onChange, _render41, getByRole, getByText, queryByRole, input;
+    var callbackFunc, onChange, _render42, getByRole, getByText, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
@@ -1436,12 +1536,12 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               value: "Denm",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render41.getByRole, getByText = _render41.getByText, queryByRole = _render41.queryByRole;
+            })), getByRole = _render42.getByRole, getByText = _render42.getByText, queryByRole = _render42.queryByRole;
             input = getByRole("combobox");
             expect(input.value).toBe("Denm");
 
@@ -1472,7 +1572,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee4);
   })));
   test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var callbackFunc, onChange, _render42, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee5$(_context5) {
       while (1) {
@@ -1489,11 +1589,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render42.getByText, getByRole = _render42.getByRole, queryByRole = _render42.queryByRole;
+            })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1516,7 +1616,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee5);
   })));
   test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-    var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render44, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee6$(_context6) {
       while (1) {
@@ -1533,11 +1633,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.queryByRole;
+            })), getByText = _render44.getByText, getByRole = _render44.getByRole, queryByRole = _render44.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1582,7 +1682,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee6);
   })));
   test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
-    var errorCallbackFunc, onChange, _render44, getByRole, getByText, input;
+    var errorCallbackFunc, onChange, _render45, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee7$(_context7) {
       while (1) {
@@ -1597,11 +1697,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: errorCallbackFunc
-            })), getByRole = _render44.getByRole, getByText = _render44.getByText;
+            })), getByRole = _render45.getByRole, getByText = _render45.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);

package/textarea/Textarea.stories.jsx

@@ -4,12 +4,20 @@ import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import DarkContainer from "../../.storybook/components/DarkSection";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Textarea",
   component: DxcTextarea,
 };
 
+const opinionatedTheme = {
+  textarea: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <>
@@ -151,7 +159,58 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTextarea label="Xxlarge" margin="xxlarge" />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Hovered" helperText="Sample text" placeholder="Placeholder" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Focused" helperText="Sample text" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Disabled"
+          optional
+          helperText="Sample text"
+          placeholder="Enter your text here..."
+          disabled
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with value" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Disabled" helperText="Sample text" defaultValue="Example text" disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With error" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message."
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Grow manual" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Manual vertical grow"
+          verticalGrow="manual"
+          defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+        />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/toggle-group/ToggleGroup.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from "@storybook/testing-library";
 import DxcToggleGroup from "./ToggleGroup";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "ToggleGroup",
@@ -89,6 +90,16 @@ const twoOptions = [
     label: "Twitter",
   },
 ];
+
+const opinionatedTheme = {
+  toggleGroup: {
+    selectedBaseColor: "#5f249f",
+    selectedFontColor: "#ffffff",
+    unselectedBaseColor: "#e6e6e6",
+    unselectedFontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -154,6 +165,37 @@ export const Chromatic = () => (
       <Title title="xxLarge" theme="light" level={4} />
       <DxcToggleGroup label="xxLarge margin" options={options} margin="xxlarge" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Selected" theme="light" level={4} />
+        <DxcToggleGroup label="Selected" helperText="HelperText" defaultValue={2} options={options} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Icons & label toggle group" theme="light" level={4} />
+        <DxcToggleGroup label="Icons & label" options={optionsWithIconAndLabel} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Disabled" theme="light" level={4} />
+        <DxcToggleGroup label="Disabled" defaultValue={2} options={options} disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcToggleGroup label="Hovered" options={twoOptions} defaultValue={2} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcToggleGroup label="Actived" options={twoOptions} defaultValue={2} />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 const OptionSelected = () => <DxcToggleGroup label="Toggle group" helperText="HelperText" options={options} />;

package/utils/FocusLock.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+/**
+ * Traps the focus inside the children of the component. It will focus the first focusable element when the component is mounted.
+ * When the focus is on the last focusable element and the user tries to focus the next element, it will focus the first element.
+ * When the focus is on the first focusable element and the user tries to focus the previous element, it will focus the last element.
+ * The focus can't be moved outside the children unless the children are removed from the DOM (for example, a Dialog, a Modal, etc).
+ * @param children: React.ReactNode
+ * @returns
+ */
+declare const FocusLock: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default FocusLock;

package/utils/FocusLock.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var not = {
+  inert: ":not([inert]):not([inert] *)",
+  negTabIndex: ':not([tabindex^="-"])',
+  disabled: ":not(:disabled):not([aria-disabled='true'])"
+};
+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 getFocusableElements = function getFocusableElements(container) {
+  return Array.prototype.slice.call(container.querySelectorAll(focusableQuery)).filter(function (element) {
+    return element.getAttribute("aria-hidden") !== "true" && window.getComputedStyle(element).display !== "none" && window.getComputedStyle(element).visibility !== "hidden";
+  });
+};
+/**
+ * This function will try to focus the element and return true if it was able to receive the focus.
+ * Even if the element is focusable (passes any of the conditions of our selector), there is the possibility
+ * that the element may not be focusable at all.
+ * @param element: HTMLElement
+ * @returns
+ */
+
+
+var attempFocus = function attempFocus(element) {
+  element === null || element === void 0 ? void 0 : element.focus();
+  return document.activeElement === element;
+};
+/**
+ * @param element: HTMLElement
+ * @returns boolean: true if element is contained inside a Radix Portal, false otherwise. 
+ */
+
+
+var radixPortalContains = function radixPortalContains(activeElement) {
+  var radixPortals = document.querySelectorAll("[data-radix-portal]");
+  return Array.prototype.slice.call(radixPortals).some(function (portal) {
+    return portal.contains(activeElement);
+  });
+};
+/**
+ * Custom hook that returns an array of focusable elements inside a container.
+ * @param ref: React.MutableRefObject<HTMLDivElement>
+ * @returns
+ */
+
+
+var useFocusableElements = function useFocusableElements(ref) {
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      focusableElements = _useState2[0],
+      setFocusableElements = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (ref.current != null) {
+      setFocusableElements(getFocusableElements(ref.current));
+      var observer = new MutationObserver(function () {
+        setFocusableElements(getFocusableElements(ref.current));
+      });
+      observer.observe(ref.current, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+      return function () {
+        observer.disconnect();
+      };
+    }
+  }, []);
+  return focusableElements;
+};
+/**
+ * Traps the focus inside the children of the component. It will focus the first focusable element when the component is mounted.
+ * When the focus is on the last focusable element and the user tries to focus the next element, it will focus the first element.
+ * When the focus is on the first focusable element and the user tries to focus the previous element, it will focus the last element.
+ * The focus can't be moved outside the children unless the children are removed from the DOM (for example, a Dialog, a Modal, etc).
+ * @param children: React.ReactNode
+ * @returns
+ */
+
+
+var FocusLock = function FocusLock(_ref) {
+  var children = _ref.children;
+  var childrenContainerRef = (0, _react.useRef)();
+  var focusableElements = useFocusableElements(childrenContainerRef);
+  var focusFirst = (0, _react.useCallback)(function () {
+    var _childrenContainerRef;
+
+    if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) (_childrenContainerRef = childrenContainerRef.current) === null || _childrenContainerRef === void 0 ? void 0 : _childrenContainerRef.focus();else if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 0) for (var i = 0; i < focusableElements.length; i++) {
+      if (attempFocus(focusableElements[i])) return;
+    }
+  }, [focusableElements]);
+
+  var focusLast = function focusLast() {
+    for (var i = focusableElements.length - 1; i >= 0; i--) {
+      if (attempFocus(focusableElements[i])) return;
+    }
+  };
+
+  var focusLock = function focusLock(event) {
+    if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();else if (event.key === "Tab" && event.key === "Shift") focusableElements.length === 0 && event.preventDefault();
+  };
+
+  (0, _react.useEffect)(function () {
+    var _childrenContainerRef2;
+
+    if (!((_childrenContainerRef2 = childrenContainerRef.current) !== null && _childrenContainerRef2 !== void 0 && _childrenContainerRef2.contains(document.activeElement)) && !radixPortalContains(document.activeElement)) focusFirst();
+  }, [focusFirst]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    onFocus: focusLast,
+    tabIndex: 0
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    onKeyDown: focusLock,
+    ref: childrenContainerRef,
+    tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1
+  }, children), /*#__PURE__*/_react["default"].createElement("div", {
+    onFocus: focusFirst,
+    tabIndex: 0
+  }));
+};
+
+var _default = FocusLock;
+exports["default"] = _default;

package/wizard/Wizard.stories.tsx

@@ -3,6 +3,7 @@ import DxcWizard from "./Wizard";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Wizard",
@@ -36,6 +37,7 @@ const stepWithLabel = [
     label: "Forth step",
   },
 ];
+
 const stepWithLabelDescription = [
   {
     label: "First step",
@@ -56,6 +58,7 @@ const stepWithLabelDescription = [
     valid: false,
   },
 ];
+
 const stepWithLongDescription = [
   {
     label: "First step",
@@ -73,6 +76,7 @@ const stepWithLongDescription = [
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
   },
 ];
+
 const stepDisabled = [
   {
     label: "First step",
@@ -98,6 +102,7 @@ const stepDisabled = [
     disabled: true,
   },
 ];
+
 const stepIcons = [
   {
     label: "First step",
@@ -112,6 +117,7 @@ const stepIcons = [
     icon: favoriteSVG,
   },
 ];
+
 const stepLargeIcons = [
   {
     label: "First step",
@@ -127,6 +133,14 @@ const stepLargeIcons = [
   },
 ];
 
+const opinionatedTheme = {
+  wizard: {
+    baseColor: "#5f249f",
+    fontColor: "#000000",
+    selectedStepFontColor: "#ffffff",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -215,6 +229,12 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcWizard mode="vertical" margin="xxlarge" steps={stepWithLabel}></DxcWizard>
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );