@razorpay/blade 8.11.0 → 8.11.1

package/build/components/index.web.js

@@ -5,7 +5,7 @@ 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, FloatingPortal, FloatingFocusManager, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, 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';
@@ -5093,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',
@@ -5167,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", {});
@@ -21803,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');
 });
 
 /**
@@ -21820,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';
 
@@ -21853,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
@@ -21903,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 () {
@@ -21929,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,