@dxc-technology/halstack-react 0.0.0-5a1e592 → 0.0.0-5a4d834

package/utils/BaseTypography.js

@@ -1,108 +1,98 @@
 "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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
-
+var ValidTypographyTags = ["a", "blockquote", "cite", "code", "div", "em", "figcaption", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "small", "span", "strong"];
+var isValidTypography = function isValidTypography(tag) {
+  return ValidTypographyTags.includes(tag);
+};
 var BaseTypography = function BaseTypography(_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;
+    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 contextValue = (0, _react.useMemo)(function () {
-    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14;
-
+    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13;
     return {
-      as: (_ref2 = as !== null && as !== void 0 ? as : componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) !== null && _ref2 !== void 0 ? _ref2 : "span",
-      display: (_ref3 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref3 !== void 0 ? _ref3 : "inline",
-      fontFamily: (_ref4 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref4 !== void 0 ? _ref4 : "Open Sans, sans-serif",
-      fontSize: (_ref5 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref5 !== void 0 ? _ref5 : "1rem",
-      fontStyle: (_ref6 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref6 !== void 0 ? _ref6 : "normal",
-      fontWeight: (_ref7 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref7 !== void 0 ? _ref7 : "400",
-      letterSpacing: (_ref8 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref8 !== void 0 ? _ref8 : "0em",
-      lineHeight: (_ref9 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref9 !== void 0 ? _ref9 : "1.5em",
-      textAlign: (_ref10 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref10 !== void 0 ? _ref10 : "left",
-      color: (_ref11 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref11 !== void 0 ? _ref11 : "#000000",
-      textDecoration: (_ref12 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref12 !== void 0 ? _ref12 : "none",
-      textOverflow: (_ref13 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref13 !== void 0 ? _ref13 : "unset",
-      whiteSpace: (_ref14 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref14 !== void 0 ? _ref14 : "normal"
+      as: isValidTypography(as) ? as : isValidTypography(componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) ? componentContext === null || componentContext === void 0 ? void 0 : componentContext.as : "span",
+      display: (_ref2 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref2 !== void 0 ? _ref2 : "inline",
+      fontFamily: (_ref3 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref3 !== void 0 ? _ref3 : "Open Sans, sans-serif",
+      fontSize: (_ref4 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref4 !== void 0 ? _ref4 : "1rem",
+      fontStyle: (_ref5 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref5 !== void 0 ? _ref5 : "normal",
+      fontWeight: (_ref6 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref6 !== void 0 ? _ref6 : "400",
+      letterSpacing: (_ref7 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref7 !== void 0 ? _ref7 : "0em",
+      lineHeight: (_ref8 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref8 !== void 0 ? _ref8 : "1.5em",
+      textAlign: (_ref9 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref9 !== void 0 ? _ref9 : "left",
+      color: (_ref10 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref10 !== void 0 ? _ref10 : "#000000",
+      textDecoration: (_ref11 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref11 !== void 0 ? _ref11 : "none",
+      textOverflow: (_ref12 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref12 !== void 0 ? _ref12 : "unset",
+      whiteSpace: (_ref13 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref13 !== void 0 ? _ref13 : "normal"
     };
   }, [as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace]);
   return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react["default"].createElement(StyledTypography, contextValue, children));
 };
-
-var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n  margin: 0;\n"])), function (_ref15) {
-  var display = _ref15.display;
+var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n  margin: 0;\n"])), function (_ref14) {
+  var display = _ref14.display;
   return display;
-}, function (_ref16) {
-  var color = _ref16.color;
+}, function (_ref15) {
+  var color = _ref15.color;
   return color;
-}, function (_ref17) {
-  var fontFamily = _ref17.fontFamily;
+}, function (_ref16) {
+  var fontFamily = _ref16.fontFamily;
   return fontFamily;
-}, function (_ref18) {
-  var fontSize = _ref18.fontSize;
+}, function (_ref17) {
+  var fontSize = _ref17.fontSize;
   return fontSize;
-}, function (_ref19) {
-  var fontStyle = _ref19.fontStyle;
+}, function (_ref18) {
+  var fontStyle = _ref18.fontStyle;
   return fontStyle;
-}, function (_ref20) {
-  var fontWeight = _ref20.fontWeight;
+}, function (_ref19) {
+  var fontWeight = _ref19.fontWeight;
   return fontWeight;
-}, function (_ref21) {
-  var letterSpacing = _ref21.letterSpacing;
+}, function (_ref20) {
+  var letterSpacing = _ref20.letterSpacing;
   return letterSpacing;
-}, function (_ref22) {
-  var lineHeight = _ref22.lineHeight;
+}, function (_ref21) {
+  var lineHeight = _ref21.lineHeight;
   return lineHeight;
-}, function (_ref23) {
-  var textAlign = _ref23.textAlign;
+}, function (_ref22) {
+  var textAlign = _ref22.textAlign;
   return textAlign;
-}, function (_ref24) {
-  var textDecoration = _ref24.textDecoration;
+}, function (_ref23) {
+  var textDecoration = _ref23.textDecoration;
   return textDecoration;
-}, function (_ref25) {
-  var textOverflow = _ref25.textOverflow;
+}, function (_ref24) {
+  var textOverflow = _ref24.textOverflow;
   return textOverflow;
-}, function (_ref26) {
-  var whiteSpace = _ref26.whiteSpace;
+}, function (_ref25) {
+  var whiteSpace = _ref25.whiteSpace;
   return whiteSpace;
-}, function (_ref27) {
-  var textOverflow = _ref27.textOverflow;
+}, function (_ref26) {
+  var textOverflow = _ref26.textOverflow;
   return textOverflow !== "unset" ? "hidden" : "visible";
 });
-
-var _default = BaseTypography;
-exports["default"] = _default;
+var _default = exports["default"] = BaseTypography;

package/utils/FocusLock.js

@@ -1,33 +1,26 @@
 "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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var not = {
   negTabIndex: ':not([tabindex^="-"])',
   disabled: ":not(:disabled)"
 };
 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) {
     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
@@ -35,37 +28,35 @@ var getFocusableElements = function getFocusableElements(container) {
  * @param element: HTMLElement
  * @returns
  */
-
-
-var attempFocus = function attempFocus(element) {
+var attemptFocus = function attemptFocus(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]");
+  var radixPoppers = document.querySelectorAll("[data-radix-popper-content-wrapper]");
   return Array.prototype.slice.call(radixPortals).some(function (portal) {
     return portal.contains(activeElement);
+  }) || Array.prototype.slice.call(radixPoppers).some(function (popper) {
+    return popper.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];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    focusableElements = _useState2[0],
+    setFocusableElements = _useState2[1];
   (0, _react.useEffect)(function () {
     if (ref.current != null) {
       setFocusableElements(getFocusableElements(ref.current));
@@ -84,6 +75,7 @@ var useFocusableElements = function useFocusableElements(ref) {
   }, []);
   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.
@@ -92,33 +84,27 @@ var useFocusableElements = function useFocusableElements(ref) {
  * @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;
-    }
+    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) focusableElements.some(function (element) {
+      return attemptFocus(element);
+    });
   }, [focusableElements]);
-
   var focusLast = function focusLast() {
-    for (var i = focusableElements.length - 1; i >= 0; i--) {
-      if (attempFocus(focusableElements[i])) return;
-    }
+    var _focusableElements$re;
+    focusableElements === null || focusableElements === void 0 ? void 0 : (_focusableElements$re = focusableElements.reverse()) === null || _focusableElements$re === void 0 ? void 0 : _focusableElements$re.some(function (element) {
+      return attemptFocus(element);
+    });
   };
-
   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();
+    if (event.key === "Tab") 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", {
@@ -127,12 +113,13 @@ var FocusLock = function FocusLock(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     onKeyDown: focusLock,
     ref: childrenContainerRef,
-    tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1
+    tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1,
+    style: {
+      outline: "none"
+    }
   }, children), /*#__PURE__*/_react["default"].createElement("div", {
     onFocus: focusFirst,
     tabIndex: 0
   }));
 };
-
-var _default = FocusLock;
-exports["default"] = _default;
+var _default = exports["default"] = FocusLock;

package/utils/useWidth.d.ts

@@ -0,0 +1,2 @@
+declare const useWidth: <T extends Element>(target: T) => number;
+export default useWidth;

package/utils/useWidth.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useWidth = function useWidth(target) {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (target != null) {
+      setWidth(target.getBoundingClientRect().width);
+      var triggerObserver = new ResizeObserver(function (entries) {
+        var rect = entries[0].target.getBoundingClientRect();
+        setWidth(rect === null || rect === void 0 ? void 0 : rect.width);
+      });
+      triggerObserver.observe(target);
+      return function () {
+        triggerObserver.unobserve(target);
+      };
+    }
+  }, [target]);
+  return width;
+};
+var _default = exports["default"] = useWidth;

package/wizard/Wizard.accessibility.test.d.ts

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

package/wizard/Wizard.accessibility.test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Wizard = _interopRequireDefault(require("./Wizard"));
+var favoriteSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+}));
+describe("Wizard 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;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
+            steps: [{
+              label: "first-step",
+              description: "Description",
+              icon: favoriteSVG
+            }, {
+              label: "second-step",
+              description: "Description"
+            }, {
+              label: "valid-step",
+              valid: true
+            }, {
+              label: "disabled-step",
+              disabled: true
+            }],
+            mode: "vertical",
+            defaultCurrentStep: 1,
+            margin: "medium"
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});