@bigbinary/neetoui 5.2.9 → 5.2.11

package/formik.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { createContext, useContext, useRef, useEffect, useLayoutEffect, useCallback, useMemo, forwardRef as forwardRef$1, createElement, useState, cloneElement, Children, isValidElement, Fragment, Component, startTransition } from 'react';
+import React__default, { createContext, useContext, useRef, useEffect, useLayoutEffect, useCallback, useMemo, forwardRef as forwardRef$1, createElement, useState, cloneElement, Children, isValidElement, useSyncExternalStore, Fragment, Component, startTransition } from 'react';
 import { useFormikContext, Field, Form as Form$1, Formik, useField } from 'formik';
 import { Link, useHistory } from 'react-router-dom';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -16459,25 +16459,45 @@ var OverlayManager = /*#__PURE__*/function () {
     _classCallCheck$1(this, OverlayManager);
     this.overlays = [];
     this.previouslyFocusedElements = [];
+    this.subscribers = new Set();
     this.add = this.add.bind(this);
     this.remove = this.remove.bind(this);
     this.isTopOverlay = this.isTopOverlay.bind(this);
     this.hasOverlays = this.hasOverlays.bind(this);
     this.getFinalFocusInOverlay = this.getFinalFocusInOverlay.bind(this);
     this.getTopMostOverlay = this.getTopMostOverlay.bind(this);
+    this.subscribe = this.subscribe.bind(this);
   }
   _createClass$1(OverlayManager, [{
+    key: "subscribe",
+    value: function subscribe(callback) {
+      var _this = this;
+      this.subscribers.add(callback);
+      return function () {
+        return _this.subscribers["delete"](callback);
+      };
+    }
+  }, {
     key: "add",
     value: function add(overlay, elementToFocus) {
       this.overlays.push(overlay);
       this.previouslyFocusedElements.push(elementToFocus);
+      this.subscribers.forEach(function (subscriber) {
+        return subscriber();
+      });
     }
   }, {
     key: "remove",
-    value: function remove(overlay) {
+    value: function remove(overlay, elementToFocus) {
       this.overlays = this.overlays.filter(function (_overlay) {
         return _overlay !== overlay;
       });
+      this.previouslyFocusedElements = this.previouslyFocusedElements.filter(function (_elementToFocus) {
+        return _elementToFocus !== elementToFocus;
+      });
+      this.subscribers.forEach(function (subscriber) {
+        return subscriber();
+      });
     }
   }, {
     key: "isTopOverlay",
@@ -16493,7 +16513,11 @@ var OverlayManager = /*#__PURE__*/function () {
   }, {
     key: "getFinalFocusInOverlay",
     value: function getFinalFocusInOverlay() {
-      return this.previouslyFocusedElements.pop();
+      var finalFocus = this.previouslyFocusedElements.pop();
+      this.subscribers.forEach(function (subscriber) {
+        return subscriber();
+      });
+      return finalFocus;
     }
   }, {
     key: "getTopMostOverlay",
@@ -16569,14 +16593,13 @@ var hyphenize = function hyphenize(string) {
   }
   return fallbackString;
 };
-var renderFocusOnFocusableElements = function renderFocusOnFocusableElements(ref) {
+var trapFocusOnFocusableElements = function trapFocusOnFocusableElements(ref) {
   var _ref$current, _ref$current2;
-  var shouldFocusFirstFocusableElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var focusableElements = 'button,[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
   var firstFocusableElement = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelectorAll(focusableElements)[0];
   var focusableContent = ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelectorAll(focusableElements);
   var lastFocusableElement = focusableContent[(focusableContent === null || focusableContent === void 0 ? void 0 : focusableContent.length) - 1];
-  document.addEventListener("keydown", function (e) {
+  var onKeyDown = function onKeyDown(e) {
     var isTabPressed = e.key === "Tab" || e.keyCode === 9;
     if (!isTabPressed) {
       return;
@@ -16592,8 +16615,16 @@ var renderFocusOnFocusableElements = function renderFocusOnFocusableElements(ref
         e.preventDefault();
       }
     }
-  });
-  if (!shouldFocusFirstFocusableElement) return;
+  };
+  document.addEventListener("keydown", onKeyDown);
+  return function () {
+    return document.removeEventListener("keydown", onKeyDown);
+  };
+};
+var focusFirstFocusableElement = function focusFirstFocusableElement(ref) {
+  var _ref$current3;
+  var focusableElements = 'button,[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  var firstFocusableElement = ref === null || ref === void 0 ? void 0 : (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.querySelectorAll(focusableElements)[0];
   firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
 };
 var hideScrollAndAddMargin = function hideScrollAndAddMargin() {
@@ -16637,9 +16668,8 @@ var useOverlay = function useOverlay(_ref) {
       if ((_initialFocusRef = initialFocusRef) !== null && _initialFocusRef !== void 0 && _initialFocusRef.current) {
         var _initialFocusRef2, _initialFocusRef2$cur;
         (_initialFocusRef2 = initialFocusRef) === null || _initialFocusRef2 === void 0 ? void 0 : (_initialFocusRef2$cur = _initialFocusRef2.current) === null || _initialFocusRef2$cur === void 0 ? void 0 : _initialFocusRef2$cur.focus();
-        renderFocusOnFocusableElements(overlayWrapper, false);
       } else {
-        renderFocusOnFocusableElements(overlayWrapper);
+        focusFirstFocusableElement(overlayWrapper);
       }
     }
   };
@@ -16649,18 +16679,27 @@ var useOverlay = function useOverlay(_ref) {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
   useOnClickOutside(overlayWrapper, backdropRef, closeOnOutsideClick ? handleOverlayClose : noop$1);
+  var isTopOverlay = useSyncExternalStore(manager.subscribe, function () {
+    return manager.isTopOverlay(overlayWrapper);
+  });
   useHotkeys("esc", function () {
     closeOnEsc && handleOverlayClose();
   }, [handleOverlayClose, closeOnEsc]);
   useEffect(function () {
+    var cleanUp = noop$1;
     if (isOpen) {
-      if (hasTransitionCompleted) focusRequiredElementInOverlay();
+      if (hasTransitionCompleted && isTopOverlay) {
+        focusRequiredElementInOverlay();
+        // Enable focus trap only for the topmost overlay
+        cleanUp = trapFocusOnFocusableElements(overlayWrapper);
+      }
       if (shouldHideScrollAndAddMargin) hideScrollAndAddMargin();
     }
     return function () {
       if (!manager.hasOverlays()) showScrollAndRemoveMargin();
+      cleanUp();
     };
-  }, [isOpen, hasTransitionCompleted]);
+  }, [isOpen, hasTransitionCompleted, isTopOverlay]);
   var setFocusField = function setFocusField(fieldRef) {
     if (!fieldRef) return;
     initialFocusRef = {
@@ -16681,7 +16720,7 @@ var useOverlayManager = function useOverlayManager(ref, isOpen) {
       manager.add(ref, elementToFocus);
     }
     return function () {
-      manager.remove(ref);
+      manager.remove(ref, elementToFocus);
     };
   }, [isOpen, ref]);
 };