@dxc-technology/halstack-react 0.0.0-5fd247d → 0.0.0-6083a54

package/typography/Typography.js

@@ -0,0 +1,131 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+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 TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
+
+var Typography = function Typography(_ref) {
+  var as = _ref.as,
+      display = _ref.display,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      fontStyle = _ref.fontStyle,
+      fontWeight = _ref.fontWeight,
+      letterSpacing = _ref.letterSpacing,
+      lineHeight = _ref.lineHeight,
+      textAlign = _ref.textAlign,
+      color = _ref.color,
+      textDecoration = _ref.textDecoration,
+      textOverflow = _ref.textOverflow,
+      whiteSpace = _ref.whiteSpace,
+      children = _ref.children;
+  var componentContext = (0, _react.useContext)(TypographyContext);
+  var asValue = as !== null && as !== void 0 ? as : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) || "span";
+  var displayValue = display !== null && display !== void 0 ? display : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) || "inline";
+  var fontFamilyValue = fontFamily !== null && fontFamily !== void 0 ? fontFamily : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) || "Open Sans, sans-serif";
+  var fontSizeValue = fontSize !== null && fontSize !== void 0 ? fontSize : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) || "1rem";
+  var fontStyleValue = fontStyle !== null && fontStyle !== void 0 ? fontStyle : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) || "normal";
+  var fontWeightValue = fontWeight !== null && fontWeight !== void 0 ? fontWeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) || "400";
+  var letterSpacingValue = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) || "0em";
+  var lineHeightValue = lineHeight !== null && lineHeight !== void 0 ? lineHeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) || "1.5em";
+  var textAlignValue = textAlign !== null && textAlign !== void 0 ? textAlign : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) || "left";
+  var colorValue = color !== null && color !== void 0 ? color : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) || "#000000";
+  var textDecorationValue = textDecoration !== null && textDecoration !== void 0 ? textDecoration : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) || "none";
+  var textOverflowValue = textOverflow !== null && textOverflow !== void 0 ? textOverflow : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) || "unset";
+  var whiteSpaceValue = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) || "normal";
+  return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
+    value: {
+      as: asValue,
+      display: displayValue,
+      fontFamily: fontFamilyValue,
+      fontSize: fontSizeValue,
+      fontStyle: fontStyleValue,
+      fontWeight: fontWeightValue,
+      letterSpacing: letterSpacingValue,
+      lineHeight: lineHeightValue,
+      textAlign: textAlignValue,
+      color: colorValue,
+      textDecoration: textDecorationValue,
+      textOverflow: textOverflowValue,
+      whiteSpace: whiteSpaceValue
+    }
+  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, {
+    as: asValue,
+    display: displayValue,
+    fontFamily: fontFamilyValue,
+    fontSize: fontSizeValue,
+    fontStyle: fontStyleValue,
+    fontWeight: fontWeightValue,
+    letterSpacing: letterSpacingValue,
+    lineHeight: lineHeightValue,
+    textAlign: textAlignValue,
+    color: colorValue,
+    textDecoration: textDecorationValue,
+    textOverflow: textOverflowValue,
+    whiteSpace: whiteSpaceValue
+  }, children));
+};
+
+var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-align: ", ";\n  line-height: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n"])), function (_ref2) {
+  var display = _ref2.display;
+  return display;
+}, function (_ref3) {
+  var color = _ref3.color;
+  return color;
+}, function (_ref4) {
+  var fontFamily = _ref4.fontFamily;
+  return fontFamily;
+}, function (_ref5) {
+  var fontSize = _ref5.fontSize;
+  return fontSize;
+}, function (_ref6) {
+  var fontStyle = _ref6.fontStyle;
+  return fontStyle;
+}, function (_ref7) {
+  var fontWeight = _ref7.fontWeight;
+  return fontWeight;
+}, function (_ref8) {
+  var letterSpacing = _ref8.letterSpacing;
+  return letterSpacing;
+}, function (_ref9) {
+  var textAlign = _ref9.textAlign;
+  return textAlign;
+}, function (_ref10) {
+  var lineHeight = _ref10.lineHeight;
+  return lineHeight;
+}, function (_ref11) {
+  var textDecoration = _ref11.textDecoration;
+  return textDecoration;
+}, function (_ref12) {
+  var textOverflow = _ref12.textOverflow;
+  return textOverflow;
+}, function (_ref13) {
+  var whiteSpace = _ref13.whiteSpace,
+      textOverflow = _ref13.textOverflow;
+  return whiteSpace !== "normal" ? whiteSpace : textOverflow !== "unset" ? "nowrap" : "normal";
+}, function (_ref14) {
+  var textOverflow = _ref14.textOverflow;
+  return textOverflow !== "unset" ? "hidden" : "visible";
+});
+
+var _default = Typography;
+exports["default"] = _default;

package/typography/Typography.stories.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcTypography from "./Typography";
+
+export default {
+  title: "Typography",
+  component: DxcTypography,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default Typography" theme="light" level={4} />
+      <DxcTypography>Default typography.</DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font sizes" theme="light" level={4} />
+      <DxcTypography display="block" fontSize="3.75rem">
+        3.75rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="3rem">
+        3rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="2rem">
+        2rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1.5rem">
+        1.5rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1.25rem">
+        1.25rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="1rem">
+        1rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="0.875rem">
+        0.875rem.
+      </DxcTypography>
+      <DxcTypography display="block" fontSize="0.75rem">
+        0.75rem.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography letter spacing" theme="light" level={4} />
+      <DxcTypography display="block" letterSpacing="-0.025em">
+        -0.025em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="-0.0125em">
+        -0.0125em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0em">
+        0em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.025em">
+        0.025em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.05em">
+        0.05em.
+      </DxcTypography>
+      <DxcTypography display="block" letterSpacing="0.1em">
+        0.1em.
+      </DxcTypography>{" "}
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography line height" theme="light" level={4} />
+      <DxcTypography display="block" lineHeight="1em">
+        1em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.25em">
+        1.25em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.365em">
+        1.365em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.5em">
+        1.5em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="1.715em">
+        1.715em.
+      </DxcTypography>
+      <DxcTypography display="block" lineHeight="2em">
+        2em.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font weight" theme="light" level={4} />
+      <DxcTypography display="block" fontWeight="300">
+        300.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="400">
+        400.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="600">
+        600.
+      </DxcTypography>
+      <DxcTypography display="block" fontWeight="700">
+        700.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography decoration" theme="light" level={4} />
+      <DxcTypography display="block" textDecoration="underline">
+        Underline.
+      </DxcTypography>
+      <DxcTypography display="block" textDecoration="line-through">
+        Line-through.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font family" theme="light" level={4} />
+      <DxcTypography display="block" fontFamily="Open Sans, sans-serif">
+        Open Sans, sans-serif.
+      </DxcTypography>
+      <DxcTypography display="block" fontFamily="Source Code Pro, monospace">
+        Source Code Pro, monospace.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography font style" theme="light" level={4} />
+      <DxcTypography display="block" fontStyle="italic">
+        Italic.
+      </DxcTypography>
+      <DxcTypography display="block" fontStyle="normal">
+        Normal.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography align" theme="light" level={4} />
+      <DxcTypography display="block" textAlign="left">
+        Left.
+      </DxcTypography>
+      <DxcTypography display="block" textAlign="center">
+        Center.
+      </DxcTypography>
+      <DxcTypography display="block" textAlign="right">
+        Right.
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography whitespace" theme="light" level={4} />
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="normal" fontSize="2rem">
+          {"                  "} Normal: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="nowrap" fontSize="2rem">
+          {"                  "}No-wrap: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre" fontSize="2rem">
+          {"                  "} pre: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre-line" fontSize="2rem">
+          {"                  "}pre-line: A bunch of words you see.
+        </DxcTypography>
+      </div>
+      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
+        <DxcTypography whiteSpace="pre-wrap" fontSize="2rem">
+          {"                  "} pre-wrap: A bunch of words you see.
+        </DxcTypography>
+      </div>
+    </ExampleContainer>{" "}
+    <ExampleContainer>
+      <Title title="Typography display" theme="light" level={4} />
+      <DxcTypography display="block" textAlign="left">
+        Display Block.
+        <DxcTypography>A different text.</DxcTypography>
+      </DxcTypography>
+      <DxcTypography display="inline" textAlign="left">
+        Display Inline.
+        <DxcTypography>A different text.</DxcTypography>
+      </DxcTypography>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Typography text-overflow" theme="light" level={4} />
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="clip">
+          Overflow clip.
+        </DxcTypography>
+      </div>
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="ellipsis">
+          Overflow ellipsis.
+        </DxcTypography>
+      </div>
+      <div style={{ width: "75px" }}>
+        <DxcTypography display="block" textOverflow="unset">
+          Overflow unset.
+        </DxcTypography>
+      </div>
+    </ExampleContainer>
+  </>
+);

package/typography/types.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type Props = {
+    as?: keyof HTMLElementTagNameMap;
+    display?: "inline" | "block";
+    fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
+    fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
+    fontStyle?: "italic" | "normal";
+    fontWeight?: "300" | "400" | "600" | "700";
+    letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
+    lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
+    textAlign?: "left" | "center" | "right";
+    color?: string;
+    textDecoration?: "none" | "underline" | "line-through";
+    textOverflow?: "clip" | "ellipsis" | "unset";
+    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
+    children: React.ReactNode;
+};
+export default Props;

package/typography/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/useTheme.d.ts

@@ -0,0 +1,2 @@
+declare const useTheme: () => any;
+export default useTheme;

package/useTheme.js

@@ -11,10 +11,10 @@ var _react = require("react");
 
 var _variables = require("./common/variables.js");
 
-var _ThemeContext = _interopRequireDefault(require("./ThemeContext.js"));
+var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
 
 var useTheme = function useTheme() {
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]);
+  var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
   return colorsTheme || _variables.componentTokens;
 };
 

package/useTranslatedLabels.d.ts

@@ -0,0 +1,2 @@
+declare const useTranslatedLabels: () => any;
+export default useTranslatedLabels;

package/useTranslatedLabels.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _variables = require("./common/variables");
+
+var _HalstackContext = require("./HalstackContext");
+
+var useTranslatedLabels = function useTranslatedLabels() {
+  var labels = (0, _react.useContext)(_HalstackContext.HalstackLanguageContext);
+  return labels || _variables.defaultTranslatedComponentLabels;
+};
+
+var _default = useTranslatedLabels;
+exports["default"] = _default;

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.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import WizardPropsType from "./types";
+declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: WizardPropsType) => JSX.Element;
+export default DxcWizard;