@razorpay/blade 8.10.3 → 8.11.0

package/build/components/index.web.js

@@ -5,14 +5,13 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
-import { FloatingDelayGroup, detectOverflow, useFloating, FloatingOverlay, FloatingFocusManager, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import { FloatingDelayGroup, detectOverflow, useFloating, FloatingOverlay, FloatingPortal, FloatingFocusManager, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
 import _toConsumableArray$1 from '@babel/runtime/helpers/toConsumableArray';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
-import { createPortal } from 'react-dom';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -25083,25 +25082,6 @@ isVisible, opts) {
   };
 }
 
-var createModalRootWrapper = function createModalRootWrapper(id) {
-  var element = document.createElement('div');
-  element.setAttribute('id', id);
-  document.body.appendChild(element);
-  return element;
-};
-
-var ModalPortal = function ModalPortal(_ref) {
-  var children = _ref.children;
-  var wrapperID = 'blade-modal-root-portal';
-  var element = document.getElementById(wrapperID);
-
-  if (!element) {
-    element = createModalRootWrapper(wrapperID);
-  }
-
-  return /*#__PURE__*/createPortal(children, element);
-};
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var ModalContext = /*#__PURE__*/React__default.createContext({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -25520,48 +25500,9 @@ var Modal = function Modal(_ref2) {
     open: isMounted
   }),
       refs = _useFloating.refs,
-      context = _useFloating.context; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+      context = _useFloating.context;
 
   var defaultInitialFocusRef = React__default.useRef(null);
-  var originalFocusElement = React__default.useRef(null);
-  var returnFocus = React__default.useCallback(function () {
-    if (!originalFocusElement.current) return;
-    originalFocusElement.current.focus(); // After returning focus we will clear the original focus
-    // Because if modal can be opened up via multiple triggers
-    // We want to ensure the focus returns back to the most recent triggerer
-
-    originalFocusElement.current = null;
-  }, [originalFocusElement]);
-  var focusOnInitialRef = React__default.useCallback(function () {
-    if (!initialFocusRef) {
-      var _defaultInitialFocusR;
-
-      // focus on close button
-      (_defaultInitialFocusR = defaultInitialFocusRef.current) === null || _defaultInitialFocusR === void 0 ? void 0 : _defaultInitialFocusR.focus();
-    } else {
-      var _initialFocusRef$curr;
-
-      // focus on the initialRef passed by the user
-      (_initialFocusRef$curr = initialFocusRef.current) === null || _initialFocusRef$curr === void 0 ? void 0 : _initialFocusRef$curr.focus();
-    }
-  }, [initialFocusRef]);
-  React__default.useEffect(function () {
-    if (isMounted) {
-      var _originalFocusElement;
-
-      // set the original focus element where the focus will return to after closing the modal
-      originalFocusElement.current = (_originalFocusElement = originalFocusElement.current) !== null && _originalFocusElement !== void 0 ? _originalFocusElement : document.activeElement; // focus on an element on Modal, if initialFocusRef is not passed, focus on the close button
-
-      focusOnInitialRef();
-    }
-  }, [isMounted, focusOnInitialRef]);
-  React__default.useEffect(function () {
-    // Return focus to the element that originally had it
-    if (!isOpen) {
-      returnFocus();
-    }
-  }, [isOpen, returnFocus]);
   var modalContext = React__default.useMemo(function () {
     return {
       isOpen: isOpen,
@@ -25586,10 +25527,12 @@ var Modal = function Modal(_ref2) {
       throw new Error('[Blade Modal] Modal only accepts ModalHeader, ModalBody and ModalFooter as children');
     }
   });
-  return /*#__PURE__*/jsx(ModalPortal, {
+  return /*#__PURE__*/jsx(FloatingPortal, {
     children: /*#__PURE__*/jsx(ModalContext.Provider, {
       value: modalContext,
       children: isMounted ? /*#__PURE__*/jsx(FloatingFocusManager, {
+        returnFocus: true,
+        initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : defaultInitialFocusRef,
         context: context,
         modal: true,
         children: /*#__PURE__*/jsxs(Box, {