@react-magma/charts 14.0.0-rc.3 → 14.0.0-rc.4

package/dist/charts.js

@@ -803,6 +803,148 @@ var curriedTransparentize = /*#__PURE__*/curry
 /* ::<number | string, string, string> */
 (transparentize);
 
+var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function getFocusableElements(container) {
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
+        var style = window.getComputedStyle(el);
+        return (style.display !== 'none' &&
+            style.visibility !== 'hidden' &&
+            !el.hasAttribute('disabled'));
+    });
+}
+function findVisibleModal(wrapper) {
+    var modal = wrapper.querySelector('.cds--modal');
+    if (!modal)
+        return null;
+    var isVisible = modal.getAttribute('aria-modal') === 'true' ||
+        modal.style.visibility === 'visible' ||
+        modal.classList.contains('is-visible');
+    return isVisible ? modal : null;
+}
+function useCarbonModalFocusManagement(wrapperRef) {
+    var previouslyFocusedElement = React__namespace.useRef(null);
+    var keydownHandler = React__namespace.useRef(null);
+    var focusinHandler = React__namespace.useRef(null);
+    var currentModal = React__namespace.useRef(null);
+    React__namespace.useEffect(function () {
+        var wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        function focusModalCloseButton(modal) {
+            var closeButton = modal.querySelector('.cds--modal-close');
+            if (closeButton) {
+                closeButton.focus();
+            }
+            else {
+                var focusable = getFocusableElements(modal);
+                if (focusable.length > 0) {
+                    focusable[0].focus();
+                }
+            }
+        }
+        function handleModalOpen(modal) {
+            currentModal.current = modal;
+            previouslyFocusedElement.current = document.activeElement;
+            // Permanent guard: redirect focus back into modal whenever it escapes
+            // (e.g. Carbon's overflow menu returning focus to its trigger).
+            focusinHandler.current = function (event) {
+                var target = event.target;
+                if (!modal.contains(target)) {
+                    setTimeout(function () {
+                        if (currentModal.current === modal) {
+                            focusModalCloseButton(modal);
+                        }
+                    }, 0);
+                }
+            };
+            document.addEventListener('focusin', focusinHandler.current);
+            var pollAttempts = 0;
+            var pollAndFocus = function () {
+                if (currentModal.current !== modal)
+                    return;
+                if (modal.contains(document.activeElement))
+                    return;
+                var closeBtn = modal.querySelector('.cds--modal-close');
+                if (closeBtn &&
+                    window.getComputedStyle(closeBtn).visibility !== 'hidden') {
+                    closeBtn.focus();
+                    return;
+                }
+                if (++pollAttempts < 30) {
+                    requestAnimationFrame(pollAndFocus);
+                }
+            };
+            requestAnimationFrame(pollAndFocus);
+            keydownHandler.current = function (event) {
+                if (event.key !== 'Tab')
+                    return;
+                var focusable = getFocusableElements(modal);
+                if (focusable.length === 0) {
+                    event.preventDefault();
+                    return;
+                }
+                if (focusable.length === 1) {
+                    event.preventDefault();
+                    if (focusable[0] !== document.activeElement) {
+                        focusable[0].focus();
+                    }
+                    return;
+                }
+                var firstItem = focusable[0];
+                var lastItem = focusable[focusable.length - 1];
+                if (!event.shiftKey && document.activeElement === lastItem) {
+                    event.preventDefault();
+                    firstItem.focus();
+                }
+                else if (event.shiftKey && document.activeElement === firstItem) {
+                    event.preventDefault();
+                    lastItem.focus();
+                }
+            };
+            document.addEventListener('keydown', keydownHandler.current);
+        }
+        function handleModalClose() {
+            // Null out currentModal first so any pending setTimeout redirects
+            // (scheduled by the focusin guard) see a closed modal and bail out.
+            currentModal.current = null;
+            if (focusinHandler.current) {
+                document.removeEventListener('focusin', focusinHandler.current);
+                focusinHandler.current = null;
+            }
+            if (keydownHandler.current) {
+                document.removeEventListener('keydown', keydownHandler.current);
+                keydownHandler.current = null;
+            }
+            if (previouslyFocusedElement.current instanceof HTMLElement) {
+                previouslyFocusedElement.current.focus();
+            }
+        }
+        var observer = new MutationObserver(function () {
+            var visibleModal = findVisibleModal(wrapper);
+            if (visibleModal && !currentModal.current) {
+                handleModalOpen(visibleModal);
+            }
+            else if (!visibleModal && currentModal.current) {
+                handleModalClose();
+            }
+        });
+        observer.observe(wrapper, {
+            attributes: true,
+            attributeFilter: ['class', 'style', 'aria-modal'],
+            subtree: true,
+        });
+        return function () {
+            observer.disconnect();
+            if (keydownHandler.current) {
+                document.removeEventListener('keydown', keydownHandler.current);
+            }
+            if (focusinHandler.current) {
+                document.removeEventListener('focusin', focusinHandler.current);
+            }
+        };
+    }, [wrapperRef]);
+}
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -1011,6 +1153,17 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
     var testId = props.testId, isInverseProp = props.isInverse, type = props.type, dataSet = props.dataSet, options = props.options, ariaLabel = props.ariaLabel, rest = __rest(props, ["testId", "isInverse", "type", "dataSet", "options", "ariaLabel"]);
     var theme = React__namespace.useContext(reactMagmaDom.ThemeContext);
     var isInverse = reactMagmaDom.useIsInverse(isInverseProp);
+    var internalRef = React__namespace.useRef(null);
+    var mergedRef = React__namespace.useCallback(function (node) {
+        internalRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    useCarbonModalFocusManagement(internalRef);
     var allCharts = {
         area: chartsReact.AreaChart,
         areaStacked: chartsReact.StackedAreaChart,
@@ -1065,7 +1218,7 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
         }
     });
     var groupsLength = Object.keys(buildColors()).length;
-    return (React__namespace.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, ref: ref, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper", groupsLength: groupsLength < 6 ? groupsLength : 14 }, rest),
+    return (React__namespace.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, ref: mergedRef, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper", groupsLength: groupsLength < 6 ? groupsLength : 14 }, rest),
         React__namespace.createElement(ChartType, { data: dataSet, options: newOptions })));
 });
 var templateObject_1;