@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/esm/components/popover/demo/PopoverWithIconButton.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { MrlButton, MrlIconButton, MrlPopover, MrlSvg, MrlText, MrlTextHeading } from '../../..';
+import styles from './PopoverWithTrigger.module.scss.js';
+import { chevronDown } from '@muraldevkit/ds-icons';
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {PopoverWithIconButtonProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export const PopoverWithIconButton = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false }) => {
+    const triggerRef = React.useRef(null);
+    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
+        React.createElement(MrlIconButton, { state: "default", text: "Menu Trigger", icon: React.createElement(MrlSvg, { svg: chevronDown }), ref: triggerRef }),
+        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover" },
+            React.createElement("div", { className: "popover-demo-content" },
+                React.createElement(MrlTextHeading, { kind: "title", size: "small", level: "2" }, "Popover Example"),
+                React.createElement(MrlText, { size: "small", attrs: { className: styles['popover-text'] } }, "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 1", size: "small" }),
+                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 2", size: "small" })))));
+};

package/dist/esm/components/popover/demo/PopoverWithSelect.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { MrlButton, MrlPopover, MrlLegacySelect, MrlLegacySelectMenu, MrlLegacySelectItem } from '../../..';
+import styles from './PopoverWithTrigger.module.scss.js';
+/**
+ * Demo of a popover with a select inside
+ *
+ * @param {PopoverWithSelectProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export const PopoverWithSelect = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false, disableFocusTrap = false }) => {
+    const triggerRef = React.useRef(null);
+    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
+        React.createElement(MrlButton, { text: "Button" }),
+        React.createElement(MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger" }),
+        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
+            React.createElement("div", { className: "popover-demo-content" },
+                React.createElement(MrlLegacySelect, { id: "super-custom-id", labelId: "select-one", defaultValue: "b", "data-qa": "qa-select-one" },
+                    React.createElement(MrlLegacySelectMenu, { id: "select-menu-custom-id", "data-qa": "qa-select-one-menu", labelId: 'select-one', position: "bottom" },
+                        React.createElement(MrlLegacySelectItem, { id: "select-item-custom-id", "data-qa": "qa-select-the-one-we-care-about", value: 'a', index: 0 }, "a is for apple"),
+                        React.createElement(MrlLegacySelectItem, { value: 'b' }, "b is for bat"),
+                        React.createElement(MrlLegacySelectItem, { value: 'c' }, "c is for cat"),
+                        React.createElement(MrlLegacySelectItem, { value: 'd', isDisabled: true }, "d is for door"))))),
+        React.createElement(MrlButton, { text: "Button" }),
+        React.createElement(MrlButton, { text: "Button" })));
+};

package/dist/esm/components/popover/demo/PopoverWithTrigger.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { MrlButton, MrlPopover, MrlSwitch, MrlText, MrlTextHeading } from '../../../';
+import styles from './PopoverWithTrigger.module.scss.js';
+/**
+ * Demo of a menu with a trigger for stories and testing
+ *
+ * @param {PopoverWithTriggerProps} props - The props for the menu with trigger
+ * @returns {Element} The menu with trigger demo
+ */
+export const PopoverWithTrigger = ({ menuAlign = 'bottom', alignment = 'center', actionState, onClose, triggerAlignment = 'left', spacing = 'default', kind = 'primary', point = false, hasCloseButton = false, disableFocusTrap = false, disableTrigger = false, scrolling = false, ariaDisabled = false }) => {
+    const triggerRef = React.useRef(null);
+    const switchRef = React.useRef(null);
+    const selected = false;
+    const [switchChecked, setSwitchChecked] = React.useState(() => selected);
+    const handleChange = (e) => {
+        setSwitchChecked(e.target.checked);
+    };
+    React.useEffect(() => {
+        setSwitchChecked(selected);
+    }, [selected]);
+    return (React.createElement("div", { className: styles[`trigger-${triggerAlignment}`] },
+        React.createElement(MrlButton, { text: "Switch Demo Button", ref: switchRef, state: disableTrigger ? 'disabled' : 'default' }),
+        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: switchRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
+            React.createElement("div", { className: "popover-switch-demo-content" },
+                React.createElement(MrlSwitch, { id: "switch", label: "Switch label", onChange: handleChange, selected: switchChecked }))),
+        React.createElement(MrlButton, { id: "menu-demo-trigger", ref: triggerRef, text: "Menu Trigger", state: ariaDisabled || disableTrigger ? 'disabled' : 'default' }),
+        React.createElement(MrlPopover, { alignment: alignment, position: menuAlign, actionState: actionState || { actionType: null, isOpen: false }, triggerRef: triggerRef, onClose: onClose, spacing: spacing, kind: kind, point: point, hasCloseButton: hasCloseButton, "data-testid": "popover", disableFocusTrap: disableFocusTrap },
+            React.createElement("div", { className: "popover-demo-content" },
+                React.createElement(MrlTextHeading, { kind: "title", size: "small", level: "2" }, "Popover Example"),
+                React.createElement(MrlText, { size: "small", attrs: { className: styles['popover-text'] } }, "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."),
+                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 1", size: "small" }),
+                React.createElement(MrlButton, { className: "popover-demo-button", text: "Action 2", size: "small" }),
+                scrolling && (React.createElement("div", null,
+                    React.createElement("p", null, "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Dolor sed viverra ipsum nunc aliquet bibendum enim. Donec ac odio tempor orci dapibus. Pulvinar mattis nunc sed blandit libero. Ac tortor vitae purus faucibus ornare. Ornare arcu dui vivamus arcu felis bibendum ut. Velit aliquet sagittis id consectetur. Dignissim diam quis enim lobortis. Urna nunc id cursus metus aliquam eleifend mi in. Nunc lobortis mattis aliquam faucibus."))))),
+        React.createElement(MrlButton, { text: "Button" }),
+        React.createElement(MrlButton, { text: "Button" })));
+};

package/dist/esm/components/popover/demo/PopoverWithTrigger.module.css

@@ -0,0 +1,13 @@
+.trigger-left--kTVir {
+  text-align: left;
+}
+.trigger-right--TsfY- {
+  text-align: right;
+}
+.trigger-center--AXRJD {
+  text-align: center;
+}
+
+.popover-text--8dnN8 {
+  margin-bottom: var(--mrl-spacing-05);
+}

package/dist/esm/components/popover/demo/PopoverWithTrigger.module.scss.js

@@ -0,0 +1,7 @@
+import "./PopoverWithTrigger.module.css";
+export default {
+	"trigger-left": "trigger-left--kTVir",
+	"trigger-right": "trigger-right--TsfY-",
+	"trigger-center": "trigger-center--AXRJD",
+	"popover-text": "popover-text--8dnN8"
+};

package/dist/esm/components/popover/index.js

@@ -0,0 +1 @@
+export * from './MrlPopover';

package/dist/esm/components/portal/MrlPortal.js

@@ -0,0 +1,68 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { PORTAL_LAYERS } from '../../utils/layers';
+export const MRL_PORTAL_ID = PORTAL_LAYERS.ROOT.name;
+/**
+ * Dynamically creates a single portal and send your children to the portal.
+ * Where they will live outside of the normal document flow
+ *
+ * @param PortalProps Portal only takes children. Contact the platform team if you need to extend this.
+ * @returns MrlPortal component
+ */
+export const MrlPortal = (_a) => {
+    var { children, className, id, layer } = _a, remainingProps = __rest(_a, ["children", "className", "id", "layer"]);
+    const [portalElement, setPortalElement] = React.useState(null);
+    const element = 'div';
+    const portalId = (layer === null || layer === void 0 ? void 0 : layer.name) || id || MRL_PORTAL_ID;
+    const portalLayer = layer || PORTAL_LAYERS.ROOT;
+    React.useLayoutEffect(() => {
+        let portal = document.getElementById(portalId);
+        const dataQa = remainingProps['data-qa'] || id || PORTAL_LAYERS.ROOT.name;
+        // create the portal on the fly and reuse the same one each time.
+        if (!portal) {
+            portal = document.createElement(element);
+            portal.setAttribute('id', portalId);
+            portal.setAttribute('data-qa', dataQa);
+            portal.setAttribute('data-testid', dataQa);
+            if (className)
+                portal.setAttribute('class', className);
+            document.body.appendChild(portal);
+        }
+        setPortalElement(portal);
+    }, [
+        portalId,
+        remainingProps,
+        id,
+        className
+    ]);
+    /**
+     * Sets z-index of the first child element of the portal to the layer's z-index
+     *
+     * TODO: update to also accept a 'layerId' that will override the default layer
+     * with the provided layerId
+     */
+    if (!portalElement)
+        return null;
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length > 0 && portalElement) {
+        const firstChildElement = portalElement.firstElementChild;
+        if (firstChildElement) {
+            firstChildElement.style.zIndex = `${portalLayer.zIndex}`;
+        }
+    }
+    // state will be null on the very first render.
+    if (!portalElement)
+        return null;
+    return createPortal(children, portalElement);
+};

package/dist/esm/components/portal/index.js

@@ -0,0 +1 @@
+export * from './MrlPortal';

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

@@ -0,0 +1,458 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+/**
+ * Gets tabbable elements in a given bit of the DOM, excluding disabled elements
+ * @param {RefType} ref - the ref of the container
+ * @param {string} selector - the selector to query (should already exclude disabled elements)
+ * @returns {HTMLElement[]} - an array of tabbable HTML elements
+ */
+export const getTabbableElements = (ref, selector) => {
+    const elements = ref === null || ref === void 0 ? void 0 : ref.querySelectorAll(selector);
+    if (!elements)
+        return [];
+    return Array.prototype.slice.call(elements);
+};
+const 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.
+ */
+const DEFAULT_ALLOW_DISABLED = true;
+/**
+ * CSS selector to exclude disabled elements.
+ * Excludes both native disabled attribute and ARIA-compliant disabled elements.
+ */
+const DISABLED_EXCLUSION = ':not([disabled]):not([aria-disabled="true"])';
+/**
+ * CSS selector suffix to exclude nested roving tabindex elements.
+ * Prevents deeply nested elements from being included in parent roving tabindex.
+ */
+const NESTED_ROVING_EXCLUSION = ':not(.helpers-roving-tabindex-container .helpers-roving-tabindex-container [data-roving])';
+/**
+ * Builds the appropriate CSS selector based on configuration.
+ * @param allowDisabled - Whether to include disabled elements in the roving tabindex
+ * @param hasChildRoving - Whether nested roving tabindex containers should be excluded
+ * @returns CSS selector string for querying roving elements
+ */
+const buildSelector = (allowDisabled, hasChildRoving) => {
+    const disabledPart = allowDisabled ? '' : DISABLED_EXCLUSION;
+    const nestedPart = hasChildRoving ? NESTED_ROVING_EXCLUSION : '';
+    return `[data-roving]${disabledPart}${nestedPart}`;
+};
+/**
+ * Component to create a Roving Tabindex in the DOM
+ * @returns {HTMLDivElement}
+ */
+class MrlRovingTabindex extends React.Component {
+    /**
+     * MrlRovingTabindex class constructor
+     * @param props - the MrlRovingTabindex props
+     * @returns new instance
+     */
+    constructor(props) {
+        super(props);
+        this.handleRef = (ref) => {
+            this.ref = ref;
+            // Set up focus listener when ref becomes available
+            if (ref) {
+                ref.addEventListener('focusout', this.handleFocusOut);
+            }
+            return ref;
+        };
+        /**
+         * Handles focus out events to detect when focus leaves the roving tabindex container
+         * @param {FocusEvent} event - the focus out event
+         * @returns {void}
+         */
+        this.handleFocusOut = (event) => {
+            var _a;
+            const { onBlur } = this.props;
+            const relatedTarget = event.relatedTarget;
+            // Check if focus is moving to an element outside the container
+            if (relatedTarget && !((_a = this.ref) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget))) {
+                // Focus has moved from inside the container to outside
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+            }
+        };
+        /**
+         * Sets component array of elements
+         * @returns {void}
+         */
+        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
+         */
+        this.queryElement = (selector) => {
+            var _a;
+            return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+        };
+        /**
+         * Gets the active element based on priority order:
+         * 1. Element matching the custom `activeSelector` prop (e.g., custom radio elements)
+         * 2. Element with `data-roving-active` attribute (programmatically set active)
+         * 3. First element with `data-roving` attribute (default fallback)
+         *
+         * Disabled elements are excluded unless `allowDisabled` is true.
+         * @returns The active HTML element, or undefined if none found
+         */
+        this.getActiveElement = () => {
+            var _a;
+            const { activeSelector, allowDisabled = DEFAULT_ALLOW_DISABLED } = this.props;
+            const disabledFilter = allowDisabled ? '' : DISABLED_EXCLUSION;
+            // 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) {
+                const customActiveElement = this.queryElement(`${activeSelector}[data-roving]${disabledFilter}`);
+                if (customActiveElement)
+                    return customActiveElement;
+            }
+            // Priority 2: Programmatically marked active element
+            // An element with a `data-roving-active` attribute, indicating the current active element
+            const markedActiveElement = this.queryElement(`[data-roving][data-roving-active]${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"`
+            const firstRovingElement = (_a = this.ref) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.selector)[0];
+            return firstRovingElement;
+        };
+        /**
+         * Sets an element to `tabindex=0` and sets all other elements to `tabindex=-1`
+         * @param {HTMLElement | undefined} el - the element to set as active
+         * @returns {void}
+         */
+        this.setActiveElement = (el) => {
+            if (!el)
+                return;
+            this.unsetTabbableElements();
+            el.setAttribute('tabindex', '0');
+        };
+        /**
+         * Sets focus to a specific element
+         * @param {HTMLElement | undefined} el - the element to set in focus
+         * @returns {void}
+         */
+        this.setElementFocus = (el) => {
+            if (!el)
+                return;
+            /**
+             * Why data-roving-active?
+             *
+             * We only want to set data-roving-active when 'setElementFocus' is triggered because we don't want [tabindex=0] to be mutally exclusive with
+             * [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.
+             */
+            const current = this.getActiveElement();
+            if (current)
+                current.removeAttribute('data-roving-active');
+            el.setAttribute('data-roving-active', 'true');
+            this.setActiveElement(el);
+            el.focus();
+        };
+        /**
+         * Sets focus to an element based on a direction (`forward` or `back`)
+         * Disabled elements are already excluded from this.elements via CSS selector
+         * @param {NavigationDirection} direction 'forward' | 'back'
+         * @returns {void}
+         */
+        this.setFocusByDirection = (direction) => {
+            const itemsLen = this.elements.length;
+            if (itemsLen > 0) {
+                const currentIndex = this.elements.indexOf(document.activeElement);
+                const directionSum = direction === 'back' ? -1 : 1;
+                let nextIndex = currentIndex + directionSum;
+                if (direction === 'back') {
+                    nextIndex = nextIndex < 0 ? itemsLen - 1 : nextIndex;
+                }
+                if (direction === 'forward') {
+                    nextIndex = nextIndex >= itemsLen ? 0 : nextIndex;
+                }
+                this.setElementFocus(this.elements[nextIndex]);
+            }
+        };
+        /**
+         * Sets all tabindex for elements of this component to -1
+         * Also ensures disabled elements (excluded from roving tabindex) have tabindex=-1
+         * @returns {void}
+         */
+        this.unsetTabbableElements = () => {
+            if (!this.elements)
+                return;
+            // Set tabindex=-1 for all roving tabindex elements
+            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;
+            const disabledElements = this.ref.querySelectorAll(`[data-roving][disabled], [data-roving][aria-disabled="true"]`);
+            disabledElements.forEach((el) => {
+                el.setAttribute('tabindex', '-1');
+            });
+        };
+        /**
+         * Will return `false` if the orientation param matches the
+         * orientation of the component and the actively focused element has a menu or select
+         * @param orientation : 'horizontal' | 'vertical'
+         * @returns boolean
+         */
+        this.canUseArrows = (orientation) => {
+            const { activeElement } = document;
+            const role = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('role');
+            const hasMenuOrSelect = (activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-haspopup')) === 'true' ||
+                role === 'combobox' ||
+                role === 'option' ||
+                role === 'listbox';
+            return !(this.orientation === orientation && hasMenuOrSelect);
+        };
+        this.handleKeyUp = (e) => {
+            var _a;
+            const { ignoreElements } = this.props;
+            const allowKeyPress = !ignoreElements ? true : !((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(ignoreElements));
+            const modifierPressed = e.ctrlKey || e.metaKey || e.shiftKey;
+            if (modifierPressed)
+                return;
+            /**
+             * If elements within MrlRovingTabindex are added after the component mounts
+             * they will not automatically be a `part of this.elements`. This checks if
+             * `this.elements` contains all elements that MrlRovingTabindex should be aware
+             * of and will update `this.elements` if neccessary.
+             */
+            const knownTabbableElements = this.elements;
+            const allTabbableElements = getTabbableElements(this.ref, this.selector);
+            if (knownTabbableElements.length !== allTabbableElements.length ||
+                !arraysEqual(knownTabbableElements, allTabbableElements)) {
+                this.setElements();
+                this.setActiveElement(this.getActiveElement());
+            }
+            const isActiveRoving = this.getActiveElement() === document.activeElement;
+            if (allowKeyPress && isActiveRoving) {
+                e.stopPropagation();
+                switch (e.key) {
+                    case 'ArrowDown':
+                        if (this.canUseArrows('horizontal'))
+                            this.setFocusByDirection('forward');
+                        break;
+                    case 'ArrowUp':
+                        if (this.canUseArrows('horizontal'))
+                            this.setFocusByDirection('back');
+                        break;
+                    case 'ArrowRight':
+                        if (this.canUseArrows('vertical'))
+                            this.setFocusByDirection('forward');
+                        break;
+                    case 'ArrowLeft':
+                        if (this.canUseArrows('vertical'))
+                            this.setFocusByDirection('back');
+                        break;
+                    case 'End':
+                        this.handleFocusedLast();
+                        break;
+                    case 'Home':
+                        this.handleFocusedFirst();
+                        break;
+                }
+            }
+        };
+        this.handleFocusedFirst = () => this.setElementFocus(this.elements[0]);
+        this.handleFocusedLast = () => this.setElementFocus(this.elements[this.elements.length - 1]);
+        this.handleRefocus = () => {
+            var _a, _b;
+            this.setActiveElement(document.activeElement);
+            (_b = (_a = this.props).onRefocus) === null || _b === void 0 ? void 0 : _b.call(_a, false);
+        };
+        const { allowDisabled = DEFAULT_ALLOW_DISABLED, hasChildRoving = false, orientation } = props;
+        this.elements = [];
+        this.orientation = orientation || 'horizontal';
+        this.selector = buildSelector(allowDisabled, hasChildRoving);
+    }
+    /**
+     * Runs when the MrlRovingTabindex component mounts
+     */
+    componentDidMount() {
+        const { delayMount } = this.props;
+        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 _a;
+        const { allowDisabled = DEFAULT_ALLOW_DISABLED, children, focusWithShortcut, hasChildRoving = false, isFocused, onBlur, onRefocus } = this.props;
+        /**
+         * If allowDisabled or hasChildRoving prop changes, rebuild the selector
+         * and re-scan for elements to reflect the new configuration.
+         */
+        if (prevProps.allowDisabled !== allowDisabled || prevProps.hasChildRoving !== hasChildRoving) {
+            this.selector = buildSelector(allowDisabled, hasChildRoving);
+            this.setElements();
+            this.setActiveElement(this.getActiveElement());
+        }
+        /**
+         * 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();
+        }
+        /**
+         * 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) {
+            /**
+             * 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 (!isFocused && !prevProps.isFocused) {
+                /**
+                 * The component was not focus before and is not ready to be focused on
+                 */
+                this.unsetTabbableElements();
+            }
+            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();
+                }
+            }
+            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 &&
+                !((_a = this.ref) === null || _a === void 0 ? void 0 : _a.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();
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Mounts the MrlRovingTabindex component
+     * @returns {void}
+     */
+    mount() {
+        const { focusOnInit, focusWithShortcut, isFocused } = this.props;
+        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());
+        }
+        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 (focusOnInit && this.elements.length > 0) {
+            if (focusOnInit === 'first') {
+                this.handleFocusedFirst();
+                return;
+            }
+            this.handleFocusedLast();
+        }
+    }
+    /**
+     * 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
+        const _a = this.props, { activeSelector, allowDisabled, children, delayMount, focusOnInit, focusWithShortcut, forceUpdate, hasChildRoving, ignoreElements, isFocused, onBlur, onRefocus, orientation, qa } = _a, rest = __rest(_a, ["activeSelector", "allowDisabled", "children", "delayMount", "focusOnInit", "focusWithShortcut", "forceUpdate", "hasChildRoving", "ignoreElements", "isFocused", "onBlur", "onRefocus", "orientation", "qa"]);
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+        const dataQa = `${qa || 'generic'}-roving`;
+        return (React.createElement("div", Object.assign({}, 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));
+    }
+}
+export { MrlRovingTabindex };

package/dist/esm/components/rovingTabindex/MrlRovingTabindex/index.js

@@ -0,0 +1 @@
+export * from './MrlRovingTabindex';

package/dist/esm/components/rovingTabindex/index.js

@@ -0,0 +1 @@
+export * from './MrlRovingTabindex';