@razorpay/blade 8.10.2 → 8.10.3

package/build/components/index.web.js

@@ -5,9 +5,11 @@ 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, FloatingFocusManager, shift, flip, offset, arrow, autoUpdate, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingPortal, 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';
@@ -4806,14 +4808,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 +5094,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 +17578,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 +21820,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 +21836,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 +21914,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, {