@muraldevkit/ui-toolkit 4.68.0-dev-NFbt.1 → 4.68.0-dev-nPeA.1

package/dist/cjs/components/rovingTabindex/MrlRovingTabindex/MrlRovingTabindex.js

@@ -3,7 +3,8 @@
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
 	var n = Object.create(null);
 	if (e) {
 		Object.keys(e).forEach(function (k) {
@@ -20,7 +21,7 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var _excluded = ["activeSelector", "allowDisabled", "children", "delayMount", "focusOnInit", "focusWithShortcut", "forceUpdate", "hasChildRoving", "ignoreElements", "isFocused", "onBlur", "onRefocus", "orientation", "qa"];
 /**
@@ -29,16 +30,12 @@ var _excluded = ["activeSelector", "allowDisabled", "children", "delayMount", "f
  * @param {string} selector - the selector to query (should already exclude disabled elements)
  * @returns {HTMLElement[]} - an array of tabbable HTML elements
  */
-var getTabbableElements = function getTabbableElements(ref, selector) {
+var getTabbableElements = (ref, selector) => {
   var elements = ref === null || ref === void 0 ? void 0 : ref.querySelectorAll(selector);
   if (!elements) return [];
   return Array.prototype.slice.call(elements);
 };
-var arraysEqual = function arraysEqual(a, b) {
-  return a.length === b.length && a.every(function (el, i) {
-    return el === b[i];
-  });
-};
+var arraysEqual = (a, b) => a.length === b.length && a.every((el, i) => el === b[i]);
 /**
  * Default value for allowDisabled prop.
  * When true, disabled elements are included in the roving tabindex navigation.
@@ -63,7 +60,7 @@ var NESTED_ROVING_EXCLUSION = ':not(.helpers-roving-tabindex-container .helpers-
  * @param hasChildRoving - Whether nested roving tabindex containers should be excluded
  * @returns CSS selector string for querying roving elements
  */
-var buildSelector = function buildSelector(allowDisabled, hasChildRoving) {
+var buildSelector = (allowDisabled, hasChildRoving) => {
   var disabledPart = allowDisabled ? '' : DISABLED_EXCLUSION;
   var nestedPart = hasChildRoving ? NESTED_ROVING_EXCLUSION : '';
   return "[data-roving]".concat(disabledPart).concat(nestedPart);
@@ -73,25 +70,23 @@ var buildSelector = function buildSelector(allowDisabled, hasChildRoving) {
  * Component to create a Roving Tabindex in the DOM
  * @returns {HTMLDivElement}
  */
-var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
+class MrlRovingTabindex extends React__namespace.Component {
   /**
    * MrlRovingTabindex class constructor
    * @param props - the MrlRovingTabindex props
    * @returns new instance
    */
-  function MrlRovingTabindex(props) {
-    var _this;
-    _rollupPluginBabelHelpers.classCallCheck(this, MrlRovingTabindex);
-    _this = _rollupPluginBabelHelpers.callSuper(this, MrlRovingTabindex, [props]);
-    _rollupPluginBabelHelpers.defineProperty(_this, "elements", void 0);
-    _rollupPluginBabelHelpers.defineProperty(_this, "orientation", void 0);
-    _rollupPluginBabelHelpers.defineProperty(_this, "ref", void 0);
-    _rollupPluginBabelHelpers.defineProperty(_this, "selector", void 0);
-    _rollupPluginBabelHelpers.defineProperty(_this, "handleRef", function (ref) {
-      _this.ref = ref;
+  constructor(props) {
+    super(props);
+    _rollupPluginBabelHelpers.defineProperty(this, "elements", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "orientation", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "ref", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "selector", void 0);
+    _rollupPluginBabelHelpers.defineProperty(this, "handleRef", ref => {
+      this.ref = ref;
       // Set up focus listener when ref becomes available
       if (ref) {
-        ref.addEventListener('focusout', _this.handleFocusOut);
+        ref.addEventListener('focusout', this.handleFocusOut);
       }
       return ref;
     });
@@ -100,13 +95,13 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * @param {FocusEvent} event - the focus out event
      * @returns {void}
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "handleFocusOut", function (event) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleFocusOut", event => {
       var _this$ref;
-      var onBlur = _this.props.onBlur;
+      var onBlur = this.props.onBlur;
       var relatedTarget = event.relatedTarget;
 
       // Check if focus is moving to an element outside the container
-      if (relatedTarget && !((_this$ref = _this.ref) !== null && _this$ref !== void 0 && _this$ref.contains(relatedTarget))) {
+      if (relatedTarget && !((_this$ref = this.ref) !== null && _this$ref !== void 0 && _this$ref.contains(relatedTarget))) {
         // Focus has moved from inside the container to outside
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
       }
@@ -115,18 +110,18 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * Sets component array of elements
      * @returns {void}
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "setElements", function () {
-      if (!_this.ref) return;
-      _this.elements = getTabbableElements(_this.ref, _this.selector);
+    _rollupPluginBabelHelpers.defineProperty(this, "setElements", () => {
+      if (!this.ref) return;
+      this.elements = getTabbableElements(this.ref, this.selector);
     });
     /**
      * Queries for a single element matching the selector within the container.
      * @param selector - CSS selector to query
      * @returns The matching element or null
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "queryElement", function (selector) {
+    _rollupPluginBabelHelpers.defineProperty(this, "queryElement", selector => {
       var _this$ref2;
-      return (_this$ref2 = _this.ref) === null || _this$ref2 === void 0 ? void 0 : _this$ref2.querySelector(selector);
+      return (_this$ref2 = this.ref) === null || _this$ref2 === void 0 ? void 0 : _this$ref2.querySelector(selector);
     });
     /**
      * Gets the active element based on priority order:
@@ -137,9 +132,9 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * Disabled elements are excluded unless `allowDisabled` is true.
      * @returns The active HTML element, or undefined if none found
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "getActiveElement", function () {
+    _rollupPluginBabelHelpers.defineProperty(this, "getActiveElement", () => {
       var _this$ref3;
-      var _this$props = _this.props,
+      var _this$props = this.props,
         activeSelector = _this$props.activeSelector,
         _this$props$allowDisa = _this$props.allowDisabled,
         allowDisabled = _this$props$allowDisa === void 0 ? DEFAULT_ALLOW_DISABLED : _this$props$allowDisa;
@@ -148,18 +143,18 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
       // Priority 1: Custom active selector (e.g., for radio button groups)
       // An element with the matching activeSelector prop (example usage: custom radio elements)
       if (activeSelector) {
-        var customActiveElement = _this.queryElement("".concat(activeSelector, "[data-roving]").concat(disabledFilter));
+        var customActiveElement = this.queryElement("".concat(activeSelector, "[data-roving]").concat(disabledFilter));
         if (customActiveElement) return customActiveElement;
       }
 
       // Priority 2: Programmatically marked active element
       // An element with a `data-roving-active` attribute, indicating the current active element
-      var markedActiveElement = _this.queryElement("[data-roving][data-roving-active]".concat(disabledFilter));
+      var markedActiveElement = this.queryElement("[data-roving][data-roving-active]".concat(disabledFilter));
       if (markedActiveElement) return markedActiveElement;
 
       // Priority 3: First roving element (uses pre-built selector with disabled handling)
       // If no active element is found, the first instance of an element with `data-roving="true"`
-      var firstRovingElement = (_this$ref3 = _this.ref) === null || _this$ref3 === void 0 ? void 0 : _this$ref3.querySelectorAll(_this.selector)[0];
+      var firstRovingElement = (_this$ref3 = this.ref) === null || _this$ref3 === void 0 ? void 0 : _this$ref3.querySelectorAll(this.selector)[0];
       return firstRovingElement;
     });
     /**
@@ -167,9 +162,9 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * @param {HTMLElement | undefined} el - the element to set as active
      * @returns {void}
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "setActiveElement", function (el) {
+    _rollupPluginBabelHelpers.defineProperty(this, "setActiveElement", el => {
       if (!el) return;
-      _this.unsetTabbableElements();
+      this.unsetTabbableElements();
       el.setAttribute('tabindex', '0');
     });
     /**
@@ -177,7 +172,7 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * @param {HTMLElement | undefined} el - the element to set in focus
      * @returns {void}
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "setElementFocus", function (el) {
+    _rollupPluginBabelHelpers.defineProperty(this, "setElementFocus", el => {
       if (!el) return;
 
       /**
@@ -187,10 +182,10 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
        * [data-roving-active]. An item with [data-roving-active] can exist without having [tabindex=0] and vice versa. We only want to set [data-roving-active]
        * intentionally when a user action has occured to change it. Such as a keyboard event or moving focus manually with Javascript.
        */
-      var current = _this.getActiveElement();
+      var current = this.getActiveElement();
       if (current) current.removeAttribute('data-roving-active');
       el.setAttribute('data-roving-active', 'true');
-      _this.setActiveElement(el);
+      this.setActiveElement(el);
       el.focus();
     });
     /**
@@ -199,10 +194,10 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * @param {NavigationDirection} direction 'forward' | 'back'
      * @returns {void}
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "setFocusByDirection", function (direction) {
-      var itemsLen = _this.elements.length;
+    _rollupPluginBabelHelpers.defineProperty(this, "setFocusByDirection", direction => {
+      var itemsLen = this.elements.length;
       if (itemsLen > 0) {
-        var currentIndex = _this.elements.indexOf(document.activeElement);
+        var currentIndex = this.elements.indexOf(document.activeElement);
         var directionSum = direction === 'back' ? -1 : 1;
         var nextIndex = currentIndex + directionSum;
         if (direction === 'back') {
@@ -211,7 +206,7 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
         if (direction === 'forward') {
           nextIndex = nextIndex >= itemsLen ? 0 : nextIndex;
         }
-        _this.setElementFocus(_this.elements[nextIndex]);
+        this.setElementFocus(this.elements[nextIndex]);
       }
     });
     /**
@@ -219,19 +214,19 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * Also ensures disabled elements (excluded from roving tabindex) have tabindex=-1
      * @returns {void}
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "unsetTabbableElements", function () {
-      if (!_this.elements) return;
+    _rollupPluginBabelHelpers.defineProperty(this, "unsetTabbableElements", () => {
+      if (!this.elements) return;
 
       // Set tabindex=-1 for all roving tabindex elements
-      _this.elements.forEach(function (el) {
+      this.elements.forEach(el => {
         el && el.setAttribute('tabindex', '-1');
       });
 
       // Also set tabindex=-1 for disabled elements that are excluded from roving tabindex
       // This ensures disabled elements are not tabbable even though they're not in the navigation order
-      if (!_this.ref || _this.props.allowDisabled) return;
-      var disabledElements = _this.ref.querySelectorAll("[data-roving][disabled], [data-roving][aria-disabled=\"true\"]");
-      disabledElements.forEach(function (el) {
+      if (!this.ref || this.props.allowDisabled) return;
+      var disabledElements = this.ref.querySelectorAll("[data-roving][disabled], [data-roving][aria-disabled=\"true\"]");
+      disabledElements.forEach(el => {
         el.setAttribute('tabindex', '-1');
       });
     });
@@ -241,16 +236,16 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
      * @param orientation : 'horizontal' | 'vertical'
      * @returns boolean
      */
-    _rollupPluginBabelHelpers.defineProperty(_this, "canUseArrows", function (orientation) {
+    _rollupPluginBabelHelpers.defineProperty(this, "canUseArrows", orientation => {
       var _document = document,
         activeElement = _document.activeElement;
       var role = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('role');
       var hasMenuOrSelect = (activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-haspopup')) === 'true' || role === 'combobox' || role === 'option' || role === 'listbox';
-      return !(_this.orientation === orientation && hasMenuOrSelect);
+      return !(this.orientation === orientation && hasMenuOrSelect);
     });
-    _rollupPluginBabelHelpers.defineProperty(_this, "handleKeyUp", function (e) {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleKeyUp", e => {
       var _document$activeEleme;
-      var ignoreElements = _this.props.ignoreElements;
+      var ignoreElements = this.props.ignoreElements;
       var allowKeyPress = !ignoreElements ? true : !((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest(ignoreElements));
       var modifierPressed = e.ctrlKey || e.metaKey || e.shiftKey;
       if (modifierPressed) return;
@@ -261,283 +256,262 @@ var MrlRovingTabindex = /*#__PURE__*/function (_React$Component) {
        * `this.elements` contains all elements that MrlRovingTabindex should be aware
        * of and will update `this.elements` if neccessary.
        */
-      var knownTabbableElements = _this.elements;
-      var allTabbableElements = getTabbableElements(_this.ref, _this.selector);
+      var knownTabbableElements = this.elements;
+      var allTabbableElements = getTabbableElements(this.ref, this.selector);
       if (knownTabbableElements.length !== allTabbableElements.length || !arraysEqual(knownTabbableElements, allTabbableElements)) {
-        _this.setElements();
-        _this.setActiveElement(_this.getActiveElement());
+        this.setElements();
+        this.setActiveElement(this.getActiveElement());
       }
-      var isActiveRoving = _this.getActiveElement() === document.activeElement;
+      var isActiveRoving = this.getActiveElement() === document.activeElement;
       if (allowKeyPress && isActiveRoving) {
         e.stopPropagation();
         switch (e.key) {
           case 'ArrowDown':
-            if (_this.canUseArrows('horizontal')) _this.setFocusByDirection('forward');
+            if (this.canUseArrows('horizontal')) this.setFocusByDirection('forward');
             break;
           case 'ArrowUp':
-            if (_this.canUseArrows('horizontal')) _this.setFocusByDirection('back');
+            if (this.canUseArrows('horizontal')) this.setFocusByDirection('back');
             break;
           case 'ArrowRight':
-            if (_this.canUseArrows('vertical')) _this.setFocusByDirection('forward');
+            if (this.canUseArrows('vertical')) this.setFocusByDirection('forward');
             break;
           case 'ArrowLeft':
-            if (_this.canUseArrows('vertical')) _this.setFocusByDirection('back');
+            if (this.canUseArrows('vertical')) this.setFocusByDirection('back');
             break;
           case 'End':
-            _this.handleFocusedLast();
+            this.handleFocusedLast();
             break;
           case 'Home':
-            _this.handleFocusedFirst();
+            this.handleFocusedFirst();
             break;
         }
       }
     });
-    _rollupPluginBabelHelpers.defineProperty(_this, "handleFocusedFirst", function () {
-      return _this.setElementFocus(_this.elements[0]);
-    });
-    _rollupPluginBabelHelpers.defineProperty(_this, "handleFocusedLast", function () {
-      return _this.setElementFocus(_this.elements[_this.elements.length - 1]);
-    });
-    _rollupPluginBabelHelpers.defineProperty(_this, "handleRefocus", function () {
+    _rollupPluginBabelHelpers.defineProperty(this, "handleFocusedFirst", () => this.setElementFocus(this.elements[0]));
+    _rollupPluginBabelHelpers.defineProperty(this, "handleFocusedLast", () => this.setElementFocus(this.elements[this.elements.length - 1]));
+    _rollupPluginBabelHelpers.defineProperty(this, "handleRefocus", () => {
       var _this$props$onRefocus, _this$props2;
-      _this.setActiveElement(document.activeElement);
-      (_this$props$onRefocus = (_this$props2 = _this.props).onRefocus) === null || _this$props$onRefocus === void 0 ? void 0 : _this$props$onRefocus.call(_this$props2, false);
+      this.setActiveElement(document.activeElement);
+      (_this$props$onRefocus = (_this$props2 = this.props).onRefocus) === null || _this$props$onRefocus === void 0 ? void 0 : _this$props$onRefocus.call(_this$props2, false);
     });
     var _props$allowDisabled = props.allowDisabled,
       _allowDisabled = _props$allowDisabled === void 0 ? DEFAULT_ALLOW_DISABLED : _props$allowDisabled,
       _props$hasChildRoving = props.hasChildRoving,
       hasChildRoving = _props$hasChildRoving === void 0 ? false : _props$hasChildRoving,
       _orientation = props.orientation;
-    _this.elements = [];
-    _this.orientation = _orientation || 'horizontal';
-    _this.selector = buildSelector(_allowDisabled, hasChildRoving);
-    return _this;
+    this.elements = [];
+    this.orientation = _orientation || 'horizontal';
+    this.selector = buildSelector(_allowDisabled, hasChildRoving);
   }
 
   /**
    * Runs when the MrlRovingTabindex component mounts
    */
-  _rollupPluginBabelHelpers.inherits(MrlRovingTabindex, _React$Component);
-  return _rollupPluginBabelHelpers.createClass(MrlRovingTabindex, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var delayMount = this.props.delayMount;
-      if (delayMount) {
-        setTimeout(function () {
-          return _this2.mount();
-        }, delayMount);
-        return;
-      }
-      this.mount();
+  componentDidMount() {
+    var delayMount = this.props.delayMount;
+    if (delayMount) {
+      setTimeout(() => this.mount(), delayMount);
+      return;
+    }
+    this.mount();
+  }
+
+  /**
+   * Runs when the MrlRovingTabindex component unmounts
+   */
+  componentWillUnmount() {
+    // Remove focus event listener
+    if (this.ref) {
+      this.ref.removeEventListener('focusout', this.handleFocusOut);
     }
+  }
+
+  /**
+   * Runs when the MrlRovingTabindex component updates
+   * @param {RovingPropTypes} prevProps - the props before the component updated
+   */
+  componentDidUpdate(prevProps) {
+    var _this$props3 = this.props,
+      _this$props3$allowDis = _this$props3.allowDisabled,
+      allowDisabled = _this$props3$allowDis === void 0 ? DEFAULT_ALLOW_DISABLED : _this$props3$allowDis,
+      children = _this$props3.children,
+      focusWithShortcut = _this$props3.focusWithShortcut,
+      _this$props3$hasChild = _this$props3.hasChildRoving,
+      hasChildRoving = _this$props3$hasChild === void 0 ? false : _this$props3$hasChild,
+      isFocused = _this$props3.isFocused,
+      onBlur = _this$props3.onBlur,
+      onRefocus = _this$props3.onRefocus;
 
     /**
-     * Runs when the MrlRovingTabindex component unmounts
+     * If allowDisabled or hasChildRoving prop changes, rebuild the selector
+     * and re-scan for elements to reflect the new configuration.
      */
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      // Remove focus event listener
-      if (this.ref) {
-        this.ref.removeEventListener('focusout', this.handleFocusOut);
-      }
+    if (prevProps.allowDisabled !== allowDisabled || prevProps.hasChildRoving !== hasChildRoving) {
+      this.selector = buildSelector(allowDisabled, hasChildRoving);
+      this.setElements();
+      this.setActiveElement(this.getActiveElement());
     }
 
     /**
-     * Runs when the MrlRovingTabindex component updates
-     * @param {RovingPropTypes} prevProps - the props before the component updated
+     * If focus is programatically moved to the MrlRovingTabindex
+     * component from outside of the MrlRovingTabindex, passing
+     * the prop of `onRefocus` will cause the component to go
+     * through and make sure that only the  active element
+     * has a tabindex set to 0.
      */
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props3 = this.props,
-        _this$props3$allowDis = _this$props3.allowDisabled,
-        allowDisabled = _this$props3$allowDis === void 0 ? DEFAULT_ALLOW_DISABLED : _this$props3$allowDis,
-        children = _this$props3.children,
-        focusWithShortcut = _this$props3.focusWithShortcut,
-        _this$props3$hasChild = _this$props3.hasChildRoving,
-        hasChildRoving = _this$props3$hasChild === void 0 ? false : _this$props3$hasChild,
-        isFocused = _this$props3.isFocused,
-        onBlur = _this$props3.onBlur,
-        onRefocus = _this$props3.onRefocus;
+    if (onRefocus) {
+      this.handleRefocus();
+    }
 
+    /**
+     * When children change, re-scan for elements and update tabindex values.
+     * This ensures that dynamically added/removed buttons are properly managed.
+     */
+    if (prevProps.children !== children && !focusWithShortcut) {
+      this.setElements();
+      this.setActiveElement(this.getActiveElement());
+    }
+    if (focusWithShortcut) {
+      var _this$ref4;
       /**
-       * If allowDisabled or hasChildRoving prop changes, rebuild the selector
-       * and re-scan for elements to reflect the new configuration.
+       * If the component within MrlRovingTabindex shows on the page before it should
+       * be reached with a keyboard the prop `focusWithiShortcut` can be used to
+       * achieve that. The conditions below handle the various states that a
+       * component can experience under this scenario.
        */
-      if (prevProps.allowDisabled !== allowDisabled || prevProps.hasChildRoving !== hasChildRoving) {
-        this.selector = buildSelector(allowDisabled, hasChildRoving);
-        this.setElements();
-        this.setActiveElement(this.getActiveElement());
+      if (!isFocused && !prevProps.isFocused) {
+        /**
+         * The component was not focus before and is not ready to be focused on
+         */
+        this.unsetTabbableElements();
       }
-
-      /**
-       * If focus is programatically moved to the MrlRovingTabindex
-       * component from outside of the MrlRovingTabindex, passing
-       * the prop of `onRefocus` will cause the component to go
-       * through and make sure that only the  active element
-       * has a tabindex set to 0.
-       */
-      if (onRefocus) {
-        this.handleRefocus();
+      if (prevProps.isFocused && !isFocused) {
+        /**
+         * The component was focused but is not focused anymore
+         */
+        this.unsetTabbableElements();
+        // Only call onBlur if focus has truly left the container
+        if (this.ref && !this.ref.contains(document.activeElement)) {
+          onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        }
       }
-
-      /**
-       * When children change, re-scan for elements and update tabindex values.
-       * This ensures that dynamically added/removed buttons are properly managed.
-       */
-      if (prevProps.children !== children && !focusWithShortcut) {
+      if (!prevProps.isFocused && isFocused) {
+        /**
+         * The component was not focused before and is ready to be focused
+         */
         this.setElements();
-        this.setActiveElement(this.getActiveElement());
+        this.setElementFocus(this.getActiveElement());
+      }
+      if (prevProps.children !== children && !isFocused && !prevProps.isFocused) {
+        /**
+         * Children changed but component is not focused
+         * Ensure all new elements have tabindex=-1 to prevent Tab key access
+         */
+        this.setElements();
+        this.unsetTabbableElements();
       }
-      if (focusWithShortcut) {
-        var _this$ref4;
+      if (prevProps.children !== children && prevProps.isFocused && isFocused && !((_this$ref4 = this.ref) !== null && _this$ref4 !== void 0 && _this$ref4.contains(document.activeElement))) {
         /**
-         * If the component within MrlRovingTabindex shows on the page before it should
-         * be reached with a keyboard the prop `focusWithiShortcut` can be used to
-         * achieve that. The conditions below handle the various states that a
-         * component can experience under this scenario.
+         * While the component was focused an action was performed that
+         * changed the elements of the component and focus was moved to
+         * a different element on the page
          */
-        if (!isFocused && !prevProps.isFocused) {
+        this.setElements();
+        this.setActiveElement(this.getActiveElement());
+        if (this.getActiveElement()) {
           /**
-           * The component was not focus before and is not ready to be focused on
+           * The active element is still within the roving tabindex so focus
+           * on the element that should receive focus
            */
-          this.unsetTabbableElements();
-        }
-        if (prevProps.isFocused && !isFocused) {
+          this.setElementFocus(this.getActiveElement());
+        } else {
           /**
-           * The component was focused but is not focused anymore
+           * The active element has been moved outside of the MrlRovingTabindex
+           * component so reset the component
            */
-          this.unsetTabbableElements();
           // Only call onBlur if focus has truly left the container
           if (this.ref && !this.ref.contains(document.activeElement)) {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur();
           }
         }
-        if (!prevProps.isFocused && isFocused) {
-          /**
-           * The component was not focused before and is ready to be focused
-           */
-          this.setElements();
-          this.setElementFocus(this.getActiveElement());
-        }
-        if (prevProps.children !== children && !isFocused && !prevProps.isFocused) {
-          /**
-           * Children changed but component is not focused
-           * Ensure all new elements have tabindex=-1 to prevent Tab key access
-           */
-          this.setElements();
-          this.unsetTabbableElements();
-        }
-        if (prevProps.children !== children && prevProps.isFocused && isFocused && !((_this$ref4 = this.ref) !== null && _this$ref4 !== void 0 && _this$ref4.contains(document.activeElement))) {
-          /**
-           * While the component was focused an action was performed that
-           * changed the elements of the component and focus was moved to
-           * a different element on the page
-           */
-          this.setElements();
-          this.setActiveElement(this.getActiveElement());
-          if (this.getActiveElement()) {
-            /**
-             * The active element is still within the roving tabindex so focus
-             * on the element that should receive focus
-             */
-            this.setElementFocus(this.getActiveElement());
-          } else {
-            /**
-             * The active element has been moved outside of the MrlRovingTabindex
-             * component so reset the component
-             */
-            // Only call onBlur if focus has truly left the container
-            if (this.ref && !this.ref.contains(document.activeElement)) {
-              onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-            }
-          }
-        }
       }
     }
-  }, {
-    key: "mount",
-    value:
-    /**
-     * Mounts the MrlRovingTabindex component
-     * @returns {void}
-     */
-    function mount() {
-      var _this$props4 = this.props,
-        focusOnInit = _this$props4.focusOnInit,
-        focusWithShortcut = _this$props4.focusWithShortcut,
-        isFocused = _this$props4.isFocused;
-      if (!focusWithShortcut) {
-        // get initial set of elements for the component
-        this.setElements();
+  }
+  /**
+   * Mounts the MrlRovingTabindex component
+   * @returns {void}
+   */
+  mount() {
+    var _this$props4 = this.props,
+      focusOnInit = _this$props4.focusOnInit,
+      focusWithShortcut = _this$props4.focusWithShortcut,
+      isFocused = _this$props4.isFocused;
+    if (!focusWithShortcut) {
+      // get initial set of elements for the component
+      this.setElements();
 
-        // sets the first element of the component to tabindex=0 but does not move focus
-        // this allows users to tab to the component naturally based on tab order
-        this.setActiveElement(this.getActiveElement());
+      // sets the first element of the component to tabindex=0 but does not move focus
+      // this allows users to tab to the component naturally based on tab order
+      this.setActiveElement(this.getActiveElement());
+    } else {
+      // When focusWithShortcut is true, we need to set up elements
+      // but only set tabindex values based on isFocused state
+      this.setElements();
+      if (!isFocused) {
+        // If not focused initially, set all elements to tabindex=-1
+        this.unsetTabbableElements();
       } else {
-        // When focusWithShortcut is true, we need to set up elements
-        // but only set tabindex values based on isFocused state
-        this.setElements();
-        if (!isFocused) {
-          // If not focused initially, set all elements to tabindex=-1
-          this.unsetTabbableElements();
-        } else {
-          // If focused initially, set the active element properly
-          this.setActiveElement(this.getActiveElement());
-        }
+        // If focused initially, set the active element properly
+        this.setActiveElement(this.getActiveElement());
       }
-      if (focusOnInit && this.elements.length > 0) {
-        if (focusOnInit === 'first') {
-          this.handleFocusedFirst();
-          return;
-        }
-        this.handleFocusedLast();
+    }
+    if (focusOnInit && this.elements.length > 0) {
+      if (focusOnInit === 'first') {
+        this.handleFocusedFirst();
+        return;
       }
+      this.handleFocusedLast();
     }
+  }
 
-    /**
-     * Renders the MrlRovingTabindex component
-     * @returns {HTMLDivElement} - the rendered MrlRovingTabindex component
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      // Destructure component-specific props to prevent them from being spread to the DOM
-      var _this$props5 = this.props;
-        _this$props5.activeSelector;
-        _this$props5.allowDisabled;
-        var children = _this$props5.children;
-        _this$props5.delayMount;
-        _this$props5.focusOnInit;
-        _this$props5.focusWithShortcut;
-        _this$props5.forceUpdate;
-        _this$props5.hasChildRoving;
-        _this$props5.ignoreElements;
-        _this$props5.isFocused;
-        _this$props5.onBlur;
-        _this$props5.onRefocus;
-        _this$props5.orientation;
-        var qa = _this$props5.qa,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props5, _excluded);
-      /* eslint-enable @typescript-eslint/no-unused-vars */
+  /**
+   * Renders the MrlRovingTabindex component
+   * @returns {HTMLDivElement} - the rendered MrlRovingTabindex component
+   */
+  render() {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    // Destructure component-specific props to prevent them from being spread to the DOM
+    var _this$props5 = this.props;
+      _this$props5.activeSelector;
+      _this$props5.allowDisabled;
+      var children = _this$props5.children;
+      _this$props5.delayMount;
+      _this$props5.focusOnInit;
+      _this$props5.focusWithShortcut;
+      _this$props5.forceUpdate;
+      _this$props5.hasChildRoving;
+      _this$props5.ignoreElements;
+      _this$props5.isFocused;
+      _this$props5.onBlur;
+      _this$props5.onRefocus;
+      _this$props5.orientation;
+      var qa = _this$props5.qa,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props5, _excluded);
+    /* eslint-enable @typescript-eslint/no-unused-vars */
 
-      var dataQa = "".concat(qa || 'generic', "-roving");
-      return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-        className: "helpers-roving-tabindex-container",
-        "data-qa": dataQa,
-        onKeyUp: this.handleKeyUp,
-        ref: this.handleRef,
-        role: "presentation"
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        ,
-        tabIndex: -1
-      }), children);
-    }
-  }]);
-}(React__namespace.Component);
+    var dataQa = "".concat(qa || 'generic', "-roving");
+    return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+      className: "helpers-roving-tabindex-container",
+      "data-qa": dataQa,
+      onKeyUp: this.handleKeyUp,
+      ref: this.handleRef,
+      role: "presentation"
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: -1
+    }), children);
+  }
+}
 
 exports.MrlRovingTabindex = MrlRovingTabindex;
 exports.getTabbableElements = getTabbableElements;