@razorpay/blade 8.10.2 → 8.11.0

package/build/components/index.web.js

@@ -5,12 +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, FloatingOverlay, useFloating, 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 : {};
 
@@ -4806,14 +4807,6 @@ var ActionListBox = /*#__PURE__*/assignWithoutSideEffects(_ActionListBox, {
   displayName: 'ActionListBox'
 });
 
-/*
- * This content is licensed according to the W3C Software License at
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- * This software or document includes material copied from or derived from
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html.
- * Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang)
- */
 var componentIds = {
   DropdownOverlay: 'DropdownOverlay',
   Dropdown: 'Dropdown',
@@ -5100,6 +5093,96 @@ 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;
+  var zeroSpacing = 'spacing.0';
+  var bottom = position.bottom,
+      right = position.right;
+  var newPosition = {
+    left: zeroSpacing
+  };
+
+  if (!isMenu) {
+    if (bottom > POSITION_THRESHOLDS.bottom) {
+      newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[32]), "px");
+    }
+
+    console.log({
+      newPosition: newPosition
+    });
+    return newPosition;
+  }
+
+  if (right > POSITION_THRESHOLDS.right) {
+    newPosition.right = zeroSpacing;
+    newPosition.left = undefined;
+  }
+
+  if (bottom > POSITION_THRESHOLDS.bottom) {
+    newPosition.bottom = "".concat(Number(triggererEl === null || triggererEl === void 0 ? void 0 : triggererEl.clientHeight) + Number(size[20]), "px");
+    newPosition.top = undefined;
+  }
+
+  return newPosition;
+};
+var getDropdownOverflowMiddleware = function getDropdownOverflowMiddleware(_ref2) {
+  var isMenu = _ref2.isMenu,
+      triggererRef = _ref2.triggererRef,
+      setDropdownPosition = _ref2.setDropdownPosition;
+  return {
+    name: 'detectOverflowMiddleware',
+    fn: function fn(state) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var overflow, position;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return detectOverflow(state, {
+                  elementContext: 'reference'
+                });
+
+              case 2:
+                overflow = _context.sent;
+                position = getDropdownOverlayPosition({
+                  overflow: overflow,
+                  isMenu: isMenu,
+                  triggererEl: triggererRef.current
+                });
+                setDropdownPosition(position);
+                return _context.abrupt("return", {});
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    }
+  };
+};
+
 var _excluded$4R = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
 
 function ownKeys$5I(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -17494,7 +17577,8 @@ var useBladeInnerRef = function useBladeInnerRef(targetRef, handlers) {
       },
       getBoundingClientRect: function getBoundingClientRect() {
         return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
-      }
+      },
+      clientHeight: element.clientHeight
     };
   }, [innerRef, handlers]);
   return innerRef;
@@ -21735,7 +21819,8 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       isOpen = _useDropdown.isOpen,
       triggererRef = _useDropdown.triggererRef,
       hasLabelOnLeft = _useDropdown.hasLabelOnLeft,
-      dropdownTriggerer = _useDropdown.dropdownTriggerer;
+      dropdownTriggerer = _useDropdown.dropdownTriggerer,
+      setIsOpen = _useDropdown.setIsOpen;
 
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
@@ -21750,7 +21835,29 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       width = _React$useState4[0],
       setWidth = _React$useState4[1];
 
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      dropdownPosition = _useState2[0],
+      setDropdownPosition = _useState2[1];
+
   var isMenu = dropdownTriggerer !== 'SelectInput';
+
+  var _useFloating = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    strategy: 'absolute',
+    placement: 'bottom-start',
+    elements: {
+      reference: triggererRef.current
+    },
+    middleware: [getDropdownOverflowMiddleware({
+      isMenu: isMenu,
+      triggererRef: triggererRef,
+      setDropdownPosition: setDropdownPosition
+    })]
+  }),
+      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));
   React__default.useEffect(function () {
@@ -21806,28 +21913,34 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       opacity: isOpen ? 1 : 0
     };
   }, [isOpen]);
-  return /*#__PURE__*/jsx(BaseBox, {
-    position: "relative",
-    children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread$Q(_objectSpread$Q({
-      width: isMenu ? undefined : width // In SelectInput, Overlay should always take width of Input
-      ,
-      minWidth: isMenu ? '240px' : undefined // in SelectInput, we don't want to set maxWidth because it takes width according to the trigger
-      ,
-      maxWidth: isMenu ? '400px' : undefined,
-      left: isMenu ? 'spacing.0' : undefined,
-      right: isMenu ? undefined : 'spacing.0',
-      style: styles,
-      display: castWebType(display),
-      position: "absolute",
-      transition: isOpen ? fadeIn : fadeOut,
-      onAnimationEnd: onAnimationEnd
-    }, metaAttribute({
-      name: MetaConstants.DropdownOverlay,
-      testID: testID
-    })), {}, {
-      children: children
-    }))
-  });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    jsx(BaseBox, {
+      position: "relative",
+      ref: refs.setFloating,
+      children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread$Q(_objectSpread$Q({
+        width: isMenu ? 'max-content' : width // In SelectInput, Overlay should always take width of Input
+        ,
+        minWidth: isMenu ? '240px' : undefined // in SelectInput, we don't want to set maxWidth because it takes width according to the trigger
+        ,
+        maxWidth: isMenu ? '400px' : undefined,
+        left: dropdownPosition.left,
+        right: dropdownPosition.right,
+        bottom: dropdownPosition.bottom,
+        style: styles,
+        display: castWebType(display),
+        position: "absolute",
+        transition: isOpen ? fadeIn : fadeOut,
+        onAnimationEnd: onAnimationEnd
+      }, metaAttribute({
+        name: MetaConstants.DropdownOverlay,
+        testID: testID
+      })), {}, {
+        children: children
+      }))
+    })
+  );
 };
 
 var DropdownOverlay = /*#__PURE__*/assignWithoutSideEffects(_DropdownOverlay, {
@@ -24969,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
@@ -25406,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,
@@ -25472,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, {