@razorpay/blade 10.2.1 → 10.3.1

package/build/components/index.development.web.js

@@ -5,12 +5,11 @@ import _toConsumableArray$1 from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
-import { FloatingDelayGroup, useFloating, detectOverflow, autoUpdate, FloatingOverlay, FloatingPortal, FloatingFocusManager, shift, flip, offset, arrow, useTransitionStyles, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
+import { FloatingDelayGroup, useFloating, offset, flip, size as size$1, autoUpdate, useTransitionStyles, FloatingOverlay, FloatingPortal, FloatingFocusManager, shift, arrow, useDelayGroup, useDelayGroupContext, useHover, useFocus, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
 import _typeof from '@babel/runtime/helpers/typeof';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 
 /*
  * This content is licensed according to the W3C Software License at
@@ -740,6 +739,9 @@ var DropdownContext = /*#__PURE__*/React__default.createContext({
   },
   triggererRef: {
     current: null
+  },
+  triggererWrapperRef: {
+    current: null
   }
 });
 var searchTimeout;
@@ -1355,27 +1357,6 @@ var fontWeight = {
   }
 });
 
-/**
- * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
- *
- * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
- */
-
-var spacing = {
-  0: 0,
-  1: 2,
-  2: 4,
-  3: 8,
-  4: 12,
-  5: 16,
-  6: 20,
-  7: 24,
-  8: 32,
-  9: 40,
-  10: 48,
-  11: 56
-};
-
 /**
  * Size tokens are currently not exposed for users (therefore not available in theme)
  */
@@ -1432,6 +1413,8 @@ var size = {
   160: 160,
   /** 200 px */
   200: 200,
+  /** 240 px */
+  240: 240,
   /** 300 px */
   300: 300,
   /** 360 px */
@@ -14970,33 +14953,55 @@ var SelectorSupportText = function SelectorSupportText(_ref) {
   });
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function assignRef(ref, value) {
+  if (ref == null) return;
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+  try {
+    ref.current = value;
+  } catch (error) {
+    throwBladeError({
+      moduleName: 'useMergeRefs',
+      message: "Cannot assign value '".concat(value, "' to ref '").concat(ref, "'")
+    });
+  }
+}
+function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return function (node) {
+    refs.forEach(function (ref) {
+      assignRef(ref, node);
+    });
+  };
+}
+
 /**
- * A hook which only exposes the properties of html input element via imparative hook
+ * Merged two or more refs into a single ref callback.
+ *
+ * Usage:
+ * ```ts
+ * const internalRef = React.useRef()
+ * const ref = useMergeRefs(incomingRef, internalRef);
+ * ```
  *
- * It avoids exposing other native properties of HTMLElement
- * like `style` `classList` to avoid unintended usage of refs.
+ *
+ * Taken from ChakraUI:
+ * https://github.com/chakra-ui/chakra-ui/blob/f3c4a492e5636d2745b438d10794fa4e7999b6de/packages/hooks/use-merge-refs/src/index.ts#L31
  */
-var useBladeInnerRef = function useBladeInnerRef(targetRef, handlers) {
-  var innerRef = React__default.useRef(null);
-  React__default.useImperativeHandle(targetRef, function () {
-    var element = innerRef.current;
-    return {
-      focus: function focus(opts) {
-        var _element$focus;
-        return handlers !== null && handlers !== void 0 && handlers.onFocus ? handlers.onFocus(opts) : element === null || element === void 0 ? void 0 : (_element$focus = element.focus) === null || _element$focus === void 0 ? void 0 : _element$focus.call(element, opts);
-      },
-      scrollIntoView: function scrollIntoView(opts) {
-        var _element$scrollIntoVi;
-        return element === null || element === void 0 ? void 0 : (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 ? void 0 : _element$scrollIntoVi.call(element, opts);
-      },
-      getBoundingClientRect: function getBoundingClientRect() {
-        return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
-      },
-      clientHeight: element.clientHeight
-    };
-  }, [innerRef, handlers]);
-  return innerRef;
-};
+function useMergeRefs() {
+  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    refs[_key2] = arguments[_key2];
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(function () {
+    return mergeRefs.apply(void 0, refs);
+  }, refs);
+}
 
 function ownKeys$1n(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; }
 function _objectSpread$1m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -15051,7 +15056,10 @@ var _SelectorInput = function _SelectorInput(_ref3, ref) {
     hoverTokens = _ref3.hoverTokens,
     tabIndex = _ref3.tabIndex,
     accessibilityLabel = _ref3.accessibilityLabel;
-  var inputRef = useBladeInnerRef(ref);
+  // merging both refs because inputProps.ref needs to have access to indeterminate state
+  // to be able to set the mixed value via setMixed() function
+  // TODO: replace with a generic `mergeRefs()` util if we do this in other places
+  var mergedRef = useMergeRefs(ref, inputProps.ref);
   return /*#__PURE__*/jsx(StyledInput, _objectSpread$1m(_objectSpread$1m(_objectSpread$1m({
     id: id,
     isChecked: isChecked,
@@ -15062,13 +15070,7 @@ var _SelectorInput = function _SelectorInput(_ref3, ref) {
   }, inputProps), makeAccessible({
     label: accessibilityLabel
   })), {}, {
-    // merging both refs because inputProps.ref needs to have access to indeterminate state
-    // to be able to set the mixed value via setMixed() function
-    // TODO: replace with a generic `mergeRefs()` util if we do this in other places
-    ref: function ref(value) {
-      inputProps.ref.current = value;
-      inputRef.current = value;
-    }
+    ref: mergedRef
   }));
 };
 var SelectorInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectorInput), {
@@ -19277,6 +19279,11 @@ var _Dropdown = function _Dropdown(_ref) {
     shouldIgnoreBlurAnimation = _React$useState14[0],
     setShouldIgnoreBlurAnimation = _React$useState14[1];
   var triggererRef = React__default.useRef(null);
+  /**
+   * In inputs, actual input is smaller than the visible input wrapper.
+   * You can set this reference in such cases so floating ui calculations happen correctly
+   * */
+  var triggererWrapperRef = React__default.useRef(null);
   var actionListItemRef = React__default.useRef(null);
   var _React$useState15 = React__default.useState(false),
     _React$useState16 = _slicedToArray(_React$useState15, 2),
@@ -19361,6 +19368,7 @@ var _Dropdown = function _Dropdown(_ref) {
       setIsKeydownPressed: setIsKeydownPressed,
       dropdownBaseId: dropdownBaseId,
       triggererRef: triggererRef,
+      triggererWrapperRef: triggererWrapperRef,
       actionListItemRef: actionListItemRef,
       selectionType: selectionType,
       hasFooterAction: hasFooterAction,
@@ -19425,157 +19433,75 @@ var StyledDropdownOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
 
 function ownKeys$W(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; }
 function _objectSpread$V(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$W(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _regeneratorRuntime() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
-var dropdownFadeIn = /*#__PURE__*/keyframes(["from{transform:translateY(", ");opacity:0;}to{transform:translateY(", ");opacity:1;}"], makeSize(spacing[0]), makeSize(spacing[3]));
-var dropdownFadeOut = /*#__PURE__*/keyframes(["from{transform:translateY(", ");opacity:1;}to{transform:translateY(", ");opacity:0;}"], makeSize(spacing[3]), makeSize(spacing[0]));
-var AnimatedOverlay = /*#__PURE__*/styled(StyledDropdownOverlay).withConfig({
-  displayName: "DropdownOverlayweb__AnimatedOverlay",
-  componentId: "sc-9pwxtx-0"
-})(function (props) {
-  return css(["", " transform:translateY(", ");opacity:0;z-index:99;pointer-events:", ";"], props.transition, makeSize(props.theme.spacing[3]), props.isOpen ? 'all' : 'none');
-});
-
-/**
- * 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,
-    actionListItemEl = _ref.actionListItemEl;
-  var zeroSpacing = 'spacing.0';
-  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) {
-    // In SelectInput, we set position wrt to right so that leftLabel position can be accomodated
-    // without additional offset calculation from left
-    newPosition.left = undefined;
-    newPosition.right = zeroSpacing;
-    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;
-    }
-    return newPosition;
-  }
-  if (right > WIDTH_THRESHOLD) {
-    newPosition.right = zeroSpacing;
-    newPosition.left = undefined;
-  }
-  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',
-    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,
-                actionListItemEl: actionListItemRef.current
-              });
-              setDropdownPosition(position);
-              return _context.abrupt("return", {});
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }))();
-    }
-  };
-};
+var OVERLAY_OFFSET = size['8'];
+var OVERLAY_PADDING = size['12']; // doesn't have to be exact. Just rough padding for floating ui to decide to show overlay on top or bottom
+var OVERLAY_ZINDEX = 1001;
 
 /**
  * Overlay of dropdown
  *
  * Wrap your ActionList within this component
  */
-var _DropdownOverlay = function _DropdownOverlay(_ref3) {
-  var children = _ref3.children,
-    testID = _ref3.testID;
+var _DropdownOverlay = function _DropdownOverlay(_ref) {
+  var _triggererWrapperRef$;
+  var children = _ref.children,
+    testID = _ref.testID,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? OVERLAY_ZINDEX : _ref$zIndex;
   var _useDropdown = useDropdown(),
     isOpen = _useDropdown.isOpen,
     triggererRef = _useDropdown.triggererRef,
-    hasLabelOnLeft = _useDropdown.hasLabelOnLeft,
+    triggererWrapperRef = _useDropdown.triggererWrapperRef,
     dropdownTriggerer = _useDropdown.dropdownTriggerer,
-    setIsOpen = _useDropdown.setIsOpen,
-    actionListItemRef = _useDropdown.actionListItemRef;
+    setIsOpen = _useDropdown.setIsOpen;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
-  var _React$useState = React__default.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    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 _React$useState5 = React__default.useState({}),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    dropdownPosition = _React$useState6[0],
-    setDropdownPosition = _React$useState6[1];
   var isMenu = dropdownTriggerer !== 'SelectInput';
   var _useFloating = useFloating({
       open: isOpen,
       onOpenChange: setIsOpen,
-      strategy: 'absolute',
+      strategy: 'fixed',
       placement: 'bottom-start',
       elements: {
-        reference: triggererRef.current
+        // Input triggers have their ref on internal input element but we want width height of overall visible input hence wrapperRef is needed
+        // We fallback to use `triggererRef` for triggers like button and link where wrapper is not needed
+        // Checkout: https://github.com/razorpay/blade/pull/1559#discussion_r1305438920
+        reference: (_triggererWrapperRef$ = triggererWrapperRef.current) !== null && _triggererWrapperRef$ !== void 0 ? _triggererWrapperRef$ : triggererRef.current
       },
-      middleware: [getDropdownOverflowMiddleware({
-        isMenu: isMenu,
-        triggererRef: triggererRef,
-        actionListItemRef: actionListItemRef,
-        setDropdownPosition: setDropdownPosition
+      middleware: [offset({
+        mainAxis: OVERLAY_OFFSET
+      }), flip({
+        padding: OVERLAY_OFFSET + OVERLAY_PADDING
+      }), size$1({
+        apply: function apply(_ref2) {
+          var rects = _ref2.rects,
+            elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            // in menu, we have flexible width between min and max
+            // in input triggers, we just take width of trigger
+            width: isMenu ? undefined : makeSize(rects.reference.width),
+            minWidth: isMenu ? makeSize(size['240']) : undefined,
+            maxWidth: isMenu ? makeSize(size['400']) : undefined
+          });
+        }
       })],
       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;"]);
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var _useTransitionStyles = useTransitionStyles(context, {
+      duration: theme.motion.duration.quick,
+      initial: function initial() {
+        return {
+          transform: "translateY(-".concat(makeSize(size['8']), ")"),
+          opacity: 0
+        };
+      }
+    }),
+    isMounted = _useTransitionStyles.isMounted,
+    styles = _useTransitionStyles.styles;
   React__default.useEffect(function () {
     if (isOpen) {
       var _triggererRef$current;
@@ -19584,88 +19510,24 @@ var _DropdownOverlay = function _DropdownOverlay(_ref3) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
-
-  // We want to set width of overlay as per width of the SelectInput
-  React__default.useEffect(function () {
-    // We don't set width according to trigger when trigger is Button or other menu trigger
-    if (isMenu) {
-      return undefined;
-    }
-    var setOverlayWidth = throttle_1(function () {
-      var _triggererRef$current2;
-      if ((_triggererRef$current2 = triggererRef.current) !== null && _triggererRef$current2 !== void 0 && _triggererRef$current2.clientWidth && hasLabelOnLeft) {
-        var _triggererRef$current3;
-        var svgWidth = size[16];
-        var interactionElementPadding = theme.spacing[4];
-        var offset = svgWidth + interactionElementPadding;
-        // SelectInput is -> Button + InteractionElement on right (the chevron icon)
-        // So we add the interactionElement offset with Button's width.
-        setWidth(makeSize(((_triggererRef$current3 = triggererRef.current) === null || _triggererRef$current3 === void 0 ? void 0 : _triggererRef$current3.clientWidth) + offset));
-      } else {
-        // We don't have to worry about setting the custom width when label is on top since we can just 100% width of parent div
-        setWidth('100%');
-        window.removeEventListener('resize', setOverlayWidth);
-      }
-    }, 1000);
-    setOverlayWidth();
-    window.addEventListener('resize', setOverlayWidth);
-    return function () {
-      window.removeEventListener('resize', setOverlayWidth);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setWidth, triggererRef, hasLabelOnLeft]);
-  var onAnimationEnd = React__default.useCallback(function () {
-    if (isOpen) {
-      setShowFadeOutAnimation(true);
-    } else {
-      setShowFadeOutAnimation(false);
-    }
-  }, [isOpen]);
-  var styles = React__default.useMemo(function () {
-    return {
-      opacity: isOpen ? 1 : 0
-    };
-  }, [isOpen]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    jsxs(BaseBox, {
-      position: "relative",
-      ref: refs.setFloating,
-      children: [isOpen ? /*#__PURE__*/jsx(BaseBox, {
-        position: 'fixed',
-        top: "spacing.0",
-        left: "spacing.0",
-        height: "100%",
-        width: "100%",
-        onClick: function onClick() {
-          return setIsOpen(false);
-        }
-      }) : null, /*#__PURE__*/jsx(AnimatedOverlay, _objectSpread$V(_objectSpread$V({
-        isInBottomSheet: bottomSheetAndDropdownGlue === null || bottomSheetAndDropdownGlue === void 0 ? void 0 : bottomSheetAndDropdownGlue.dropdownHasBottomSheet,
-        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,
-        isOpen: isOpen,
-        position: "absolute",
-        transition: isOpen ? fadeIn : showFadeOutAnimation ? fadeOut : noAnimation,
-        onAnimationEnd: onAnimationEnd
-      }, metaAttribute({
-        name: MetaConstants.DropdownOverlay,
-        testID: testID
-      })), {}, {
-        children: children
-      }))]
-    })
-  );
+  return /*#__PURE__*/jsx(BaseBox
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , {
+    ref: refs.setFloating,
+    style: floatingStyles,
+    zIndex: zIndex,
+    display: isMounted ? 'flex' : 'none',
+    children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread$V(_objectSpread$V({
+      isInBottomSheet: bottomSheetAndDropdownGlue === null || bottomSheetAndDropdownGlue === void 0 ? void 0 : bottomSheetAndDropdownGlue.dropdownHasBottomSheet,
+      style: _objectSpread$V({}, styles),
+      width: "100%"
+    }, metaAttribute({
+      name: MetaConstants.DropdownOverlay,
+      testID: testID
+    })), {}, {
+      children: children
+    }))
+  });
 };
 var DropdownOverlay = /*#__PURE__*/assignWithoutSideEffects(_DropdownOverlay, {
   componentId: componentIds$1.DropdownOverlay
@@ -20646,7 +20508,7 @@ var BaseInputAnimatedBorder = function BaseInputAnimatedBorder(_ref2) {
   });
 };
 
-var _excluded$k = ["children", "validationState", "currentInteraction", "isLabelLeftPositioned", "isTextArea"];
+var _excluded$k = ["children", "validationState", "currentInteraction", "isLabelLeftPositioned", "isTextArea", "setInputWrapperRef"];
 function ownKeys$M(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; }
 function _objectSpread$L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
@@ -20684,8 +20546,12 @@ var BaseInputWrapper = function BaseInputWrapper(_ref) {
     currentInteraction = _ref.currentInteraction;
     _ref.isLabelLeftPositioned;
     var isTextArea = _ref.isTextArea,
+    setInputWrapperRef = _ref.setInputWrapperRef,
     props = _objectWithoutProperties$1(_ref, _excluded$k);
-  return /*#__PURE__*/jsxs(StyledBaseInputWrapper, _objectSpread$L(_objectSpread$L({
+  return /*#__PURE__*/jsxs(StyledBaseInputWrapper
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+  , _objectSpread$L(_objectSpread$L({
+    ref: setInputWrapperRef,
     display: "flex",
     flexDirection: "row",
     width: "100%",
@@ -20701,7 +20567,7 @@ var BaseInputWrapper = function BaseInputWrapper(_ref) {
   }));
 };
 
-var _excluded$j = ["as", "label", "labelPosition", "placeholder", "type", "defaultValue", "name", "value", "onFocus", "onChange", "onInput", "onBlur", "onSubmit", "onClick", "onKeyDown", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "leadingIcon", "prefix", "interactionElement", "suffix", "trailingIcon", "maxCharacters", "textAlign", "autoFocus", "keyboardReturnKeyType", "keyboardType", "autoCompleteSuggestionType", "trailingHeaderSlot", "trailingFooterSlot", "numberOfLines", "id", "componentName", "accessibilityLabel", "labelId", "activeDescendant", "hideLabelText", "hideFormHint", "hasPopup", "popupId", "isPopupExpanded", "shouldIgnoreBlurAnimation", "autoCapitalize", "testID"];
+var _excluded$j = ["as", "label", "labelPosition", "placeholder", "type", "defaultValue", "name", "value", "onFocus", "onChange", "onInput", "onBlur", "onSubmit", "onClick", "onKeyDown", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "leadingIcon", "prefix", "interactionElement", "suffix", "trailingIcon", "maxCharacters", "textAlign", "autoFocus", "keyboardReturnKeyType", "keyboardType", "autoCompleteSuggestionType", "trailingHeaderSlot", "trailingFooterSlot", "numberOfLines", "id", "componentName", "accessibilityLabel", "labelId", "activeDescendant", "hideLabelText", "hideFormHint", "hasPopup", "popupId", "isPopupExpanded", "shouldIgnoreBlurAnimation", "autoCapitalize", "setInputWrapperRef", "testID"];
 function ownKeys$L(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; }
 function _objectSpread$K(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$L(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var autoCompleteSuggestionTypeValues = ['none', 'on', 'name', 'email', 'username', 'password', 'newPassword', 'oneTimeCode', 'telephone', 'postalCode', 'countryName', 'creditCardNumber', 'creditCardCSC', 'creditCardExpiry', 'creditCardExpiryMonth', 'creditCardExpiryYear'];
@@ -20936,6 +20802,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
     isPopupExpanded = _ref11.isPopupExpanded,
     shouldIgnoreBlurAnimation = _ref11.shouldIgnoreBlurAnimation,
     autoCapitalize = _ref11.autoCapitalize,
+    setInputWrapperRef = _ref11.setInputWrapperRef,
     testID = _ref11.testID,
     styledProps = _objectWithoutProperties$1(_ref11, _excluded$j);
   var _useTheme = useTheme(),
@@ -21036,6 +20903,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
         validationState: validationState,
         currentInteraction: currentInteraction,
         isLabelLeftPositioned: isLabelLeftPositioned,
+        setInputWrapperRef: setInputWrapperRef,
         children: [/*#__PURE__*/jsx(BaseInputVisuals, {
           leadingIcon: leadingIcon,
           prefix: prefix,
@@ -21261,7 +21129,8 @@ var _TextInput = function _TextInput(_ref2, ref) {
     autoCapitalize = _ref2.autoCapitalize,
     testID = _ref2.testID,
     styledProps = _objectWithoutProperties$1(_ref2, _excluded$h);
-  var textInputRef = useBladeInnerRef(ref);
+  var textInputRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(ref, textInputRef);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     shouldShowClearButton = _useState2[0],
@@ -21304,7 +21173,7 @@ var _TextInput = function _TextInput(_ref2, ref) {
   return /*#__PURE__*/jsx(BaseInput, _objectSpread$I(_objectSpread$I({
     id: "textinput",
     componentName: MetaConstants.TextInput,
-    ref: textInputRef,
+    ref: mergedRef,
     label: label,
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
@@ -21406,7 +21275,6 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
     autoCompleteSuggestionType = _ref.autoCompleteSuggestionType,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$g);
-  var inputRef = useBladeInnerRef(ref);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isRevealed = _React$useState2[0],
@@ -21441,7 +21309,7 @@ var _PasswordInput = function _PasswordInput(_ref, ref) {
     }) : null;
   };
   return /*#__PURE__*/jsx(BaseInput, _objectSpread$H({
-    ref: inputRef,
+    ref: ref,
     componentName: MetaConstants.PasswordInput,
     id: "password-field",
     label: label,
@@ -21517,7 +21385,8 @@ var _TextArea = function _TextArea(_ref, ref) {
     numberOfLines = _ref$numberOfLines === void 0 ? 2 : _ref$numberOfLines,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties$1(_ref, _excluded$f);
-  var inputRef = useBladeInnerRef(ref);
+  var inputRef = React__default.useRef(null);
+  var mergedRef = useMergeRefs(ref, inputRef);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     shouldShowClearButton = _React$useState2[0],
@@ -21560,7 +21429,7 @@ var _TextArea = function _TextArea(_ref, ref) {
     id: "textarea",
     componentName: MetaConstants.TextArea,
     autoFocus: autoFocus,
-    ref: inputRef,
+    ref: mergedRef,
     label: label,
     accessibilityLabel: accessibilityLabel,
     hideLabelText: !Boolean(label),
@@ -21988,13 +21857,8 @@ var _SelectInput = function _SelectInput(props, ref) {
     isControlled = _useDropdown.isControlled,
     setIsControlled = _useDropdown.setIsControlled,
     selectionType = _useDropdown.selectionType,
-    selectedIndices = _useDropdown.selectedIndices;
-  var inputRef = useBladeInnerRef(ref, {
-    onFocus: function onFocus(opts) {
-      var _triggererRef$current;
-      (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus(opts);
-    }
-  });
+    selectedIndices = _useDropdown.selectedIndices,
+    triggererWrapperRef = _useDropdown.triggererWrapperRef;
   var icon = props.icon;
     props.onChange;
     props.defaultValue;
@@ -22085,7 +21949,11 @@ var _SelectInput = function _SelectInput(props, ref) {
     position: "relative",
     children: [!isReactNative$4() ? /*#__PURE__*/jsx(VisuallyHidden, {
       children: /*#__PURE__*/jsx("input", {
-        ref: inputRef,
+        onFocus: function onFocus() {
+          var _triggererRef$current;
+          (_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus();
+        },
+        ref: ref,
         tabIndex: -1,
         required: props.isRequired,
         name: props.name,
@@ -22104,6 +21972,9 @@ var _SelectInput = function _SelectInput(props, ref) {
       hideLabelText: ((_props$label = props.label) === null || _props$label === void 0 ? void 0 : _props$label.length) === 0,
       componentName: MetaConstants.SelectInput,
       ref: !isReactNative$4() ? triggererRef : null,
+      setInputWrapperRef: function setInputWrapperRef(wrapperNode) {
+        triggererWrapperRef.current = wrapperNode;
+      },
       textAlign: "left",
       value: displayValue,
       placeholder: placeholder,