@razorpay/blade 8.10.3 → 8.11.1

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, autoUpdate, FloatingOverlay, FloatingPortal, FloatingFocusManager, shift, flip, offset, arrow, 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 : {};
 
@@ -5094,60 +5093,66 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
   return "".concat(selectedIndices.length, " items selected");
 };
 
-/**
- * This object is used for calculating overflows in dropdown overlay.
- * 400 is used since max-width of dropdown overlay is 400px.
- */
-var POSITION_THRESHOLDS = {
-  top: -400,
-  bottom: -300,
-  left: -400,
-  right: -400
-};
 /**
  * This function calculates the position of dropdown overlay with respect to dropdown trigger element.
  * For non-menus (e.g SelectInput), position is flipped if overflow is on bottom.
  * For menus (e.g. DropdownButton), position is flipped if overflow is on right or bottom.
  * Additional spacing is added to clientHeight to provide spacing above the dropdown trigger.
  */
-
 var getDropdownOverlayPosition = function getDropdownOverlayPosition(_ref) {
   var position = _ref.overflow,
       isMenu = _ref.isMenu,
-      triggererEl = _ref.triggererEl;
+      triggererEl = _ref.triggererEl,
+      actionListItemEl = _ref.actionListItemEl;
   var zeroSpacing = 'spacing.0';
-  var bottom = position.bottom,
+  var top = position.top,
+      bottom = position.bottom,
       right = position.right;
   var newPosition = {
     left: zeroSpacing
   };
+  /**
+   * Calculating thresholds using the height & width of action list element with offset of 16px
+   */
+
+  var WIDTH_THRESHOLD = (Number(actionListItemEl === null || actionListItemEl === void 0 ? void 0 : actionListItemEl.clientWidth) + Number(size[16])) * -1;
+  var HEIGHT_THRESHOLD = (Number(actionListItemEl === null || actionListItemEl === void 0 ? void 0 : actionListItemEl.clientHeight) + Number(size[16])) * -1;
 
   if (!isMenu) {
-    if (bottom > POSITION_THRESHOLDS.bottom) {
+    if (bottom > HEIGHT_THRESHOLD) {
       newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[32]), "px");
+      newPosition.top = undefined;
+    }
+
+    if (top > HEIGHT_THRESHOLD) {
+      newPosition.top = zeroSpacing;
+      newPosition.bottom = undefined;
     }
 
-    console.log({
-      newPosition: newPosition
-    });
     return newPosition;
   }
 
-  if (right > POSITION_THRESHOLDS.right) {
+  if (right > WIDTH_THRESHOLD) {
     newPosition.right = zeroSpacing;
     newPosition.left = undefined;
   }
 
-  if (bottom > POSITION_THRESHOLDS.bottom) {
+  if (bottom > HEIGHT_THRESHOLD) {
     newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[20]), "px");
     newPosition.top = undefined;
   }
 
+  if (top > HEIGHT_THRESHOLD) {
+    newPosition.top = zeroSpacing;
+    newPosition.bottom = undefined;
+  }
+
   return newPosition;
 };
 var getDropdownOverflowMiddleware = function getDropdownOverflowMiddleware(_ref2) {
   var isMenu = _ref2.isMenu,
       triggererRef = _ref2.triggererRef,
+      actionListItemRef = _ref2.actionListItemRef,
       setDropdownPosition = _ref2.setDropdownPosition;
   return {
     name: 'detectOverflowMiddleware',
@@ -5168,7 +5173,8 @@ var getDropdownOverflowMiddleware = function getDropdownOverflowMiddleware(_ref2
                 position = getDropdownOverlayPosition({
                   overflow: overflow,
                   isMenu: isMenu,
-                  triggererEl: triggererRef.current
+                  triggererEl: triggererRef.current,
+                  actionListItemEl: actionListItemRef.current
                 });
                 setDropdownPosition(position);
                 return _context.abrupt("return", {});
@@ -21804,7 +21810,7 @@ var StyledDropdownOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "DropdownOverlayweb__StyledDropdownOverlay",
   componentId: "sc-9pwxtx-0"
 })(function (props) {
-  return css(["", " transform:translateY(", ");opacity:0;z-index:99;"], props.transition, makeSize(props.theme.spacing[3]));
+  return css(["", " transform:translateY(", ");opacity:0;z-index:99;pointer-events:", ";"], props.transition, makeSize(props.theme.spacing[3]), props.isOpen ? 'all' : 'none');
 });
 
 /**
@@ -21821,25 +21827,26 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       triggererRef = _useDropdown.triggererRef,
       hasLabelOnLeft = _useDropdown.hasLabelOnLeft,
       dropdownTriggerer = _useDropdown.dropdownTriggerer,
-      setIsOpen = _useDropdown.setIsOpen;
+      setIsOpen = _useDropdown.setIsOpen,
+      actionListItemRef = _useDropdown.actionListItemRef;
 
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
 
-  var _React$useState = React__default.useState('none'),
+  var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      display = _React$useState2[0],
-      setDisplay = _React$useState2[1];
+      showFadeOutAnimation = _React$useState2[0],
+      setShowFadeOutAnimation = _React$useState2[1];
 
   var _React$useState3 = React__default.useState('100%'),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       width = _React$useState4[0],
       setWidth = _React$useState4[1];
 
-  var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      dropdownPosition = _useState2[0],
-      setDropdownPosition = _useState2[1];
+  var _React$useState5 = React__default.useState({}),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      dropdownPosition = _React$useState6[0],
+      setDropdownPosition = _React$useState6[1];
 
   var isMenu = dropdownTriggerer !== 'SelectInput';
 
@@ -21854,20 +21861,22 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
     middleware: [getDropdownOverflowMiddleware({
       isMenu: isMenu,
       triggererRef: triggererRef,
+      actionListItemRef: actionListItemRef,
       setDropdownPosition: setDropdownPosition
-    })]
+    })],
+    whileElementsMounted: autoUpdate
   }),
       refs = _useFloating.refs;
 
   var fadeIn = /*#__PURE__*/css(["animation:", " ", " ", ";"], dropdownFadeIn, makeMotionTime(theme.motion.duration.quick), String(theme.motion.easing.entrance.revealing));
   var fadeOut = /*#__PURE__*/css(["animation:", " ", " ", ";"], dropdownFadeOut, makeMotionTime(theme.motion.duration.quick), String(theme.motion.easing.entrance.revealing));
+  var noAnimation = /*#__PURE__*/css(["animation:none;"]);
   React__default.useEffect(function () {
     if (isOpen) {
       var _triggererRef$current;
 
       // On Safari clicking on a non input element doesn't focuses it https://bugs.webkit.org/show_bug.cgi?id=22261
       (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus();
-      setDisplay('block');
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpen]); // We want to set width of overlay as per width of the SelectInput
@@ -21904,9 +21913,9 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
   }, [setWidth, triggererRef, hasLabelOnLeft]);
   var onAnimationEnd = React__default.useCallback(function () {
     if (isOpen) {
-      setDisplay('block');
+      setShowFadeOutAnimation(true);
     } else {
-      setDisplay('none');
+      setShowFadeOutAnimation(false);
     }
   }, [isOpen]);
   var styles = React__default.useMemo(function () {
@@ -21930,9 +21939,9 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
         right: dropdownPosition.right,
         bottom: dropdownPosition.bottom,
         style: styles,
-        display: castWebType(display),
+        isOpen: isOpen,
         position: "absolute",
-        transition: isOpen ? fadeIn : fadeOut,
+        transition: isOpen ? fadeIn : showFadeOutAnimation ? fadeOut : noAnimation,
         onAnimationEnd: onAnimationEnd
       }, metaAttribute({
         name: MetaConstants.DropdownOverlay,
@@ -25083,25 +25092,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 +25510,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 +25537,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, {