@razorpay/blade 9.5.2 → 9.6.0

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

@@ -21735,16 +21735,7 @@ var StyledBaseNativeButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "StyledBaseInputweb__StyledBaseNativeButton",
   componentId: "hsusrk-1"
 })(function (props) {
-  return _objectSpread$M(_objectSpread$M(_objectSpread$M({}, getWebInputStyles(props)), getTextStyles({
-    size: 'medium',
-    variant: 'body',
-    type: props.value ? 'subtle' : 'placeholder',
-    weight: 'regular',
-    contrast: 'low',
-    theme: props.theme
-  })), {}, {
-    textAlign: props.textAlign
-  });
+  return _objectSpread$M({}, getWebInputStyles(props));
 });
 var autoCompleteSuggestionTypeMap = {
   none: 'off',
@@ -21833,7 +21824,12 @@ var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
     }
   }, commonProps), props), accessibilityProps), {}, {
     value: props.value,
-    children: props.value ? props.value : props.placeholder
+    children: /*#__PURE__*/jsx(Text, {
+      type: props.value ? 'subtle' : 'placeholder',
+      truncateAfterLines: 1,
+      textAlign: props.textAlign,
+      children: props.value ? props.value : props.placeholder
+    })
   })) : /*#__PURE__*/jsx(StyledBaseNativeInput // @ts-expect-error: TS doesnt understand that this will always be `input`
   , _objectSpread$M(_objectSpread$M(_objectSpread$M({
     ref: ref,
@@ -26410,33 +26406,406 @@ var amountLineHeights = {
   'heading-large-bold': 400,
   'title-small': 500,
   'title-medium': 600
-};
+}; // All the supported currency codes are taken from Razorpay's Merchant Dashboard codebase
+
 var currencyPrefixMapping = {
+  AED: {
+    'currency-symbol': 'د.إ',
+    'currency-code': 'AED'
+  },
+  ALL: {
+    'currency-symbol': 'Lek',
+    'currency-code': 'ALL'
+  },
+  AMD: {
+    'currency-symbol': '֏',
+    'currency-code': 'AMD'
+  },
+  ARS: {
+    'currency-symbol': 'ARS',
+    'currency-code': 'ARS'
+  },
+  AUD: {
+    'currency-symbol': 'A$',
+    'currency-code': 'AUD'
+  },
+  AWG: {
+    'currency-symbol': 'Afl.',
+    'currency-code': 'AWG'
+  },
+  BBD: {
+    'currency-symbol': '$',
+    'currency-code': 'BBD'
+  },
+  BDT: {
+    'currency-symbol': '৳',
+    'currency-code': 'BDT'
+  },
+  BMD: {
+    'currency-symbol': '$',
+    'currency-code': 'BMD'
+  },
+  BND: {
+    'currency-symbol': 'BND',
+    'currency-code': 'BND'
+  },
+  BOB: {
+    'currency-symbol': 'Bs',
+    'currency-code': 'BOB'
+  },
+  BSD: {
+    'currency-symbol': 'B$',
+    'currency-code': 'BSD'
+  },
+  BWP: {
+    'currency-symbol': 'P',
+    'currency-code': 'BWP'
+  },
+  BZD: {
+    'currency-symbol': 'BZ$',
+    'currency-code': 'BZD'
+  },
+  CAD: {
+    'currency-symbol': 'C$',
+    'currency-code': 'CAD'
+  },
+  CHF: {
+    'currency-symbol': 'CHf',
+    'currency-code': 'CHF'
+  },
+  CNY: {
+    'currency-symbol': '¥',
+    'currency-code': 'CNY'
+  },
+  COP: {
+    'currency-symbol': 'COL$',
+    'currency-code': 'COP'
+  },
+  CRC: {
+    'currency-symbol': '₡',
+    'currency-code': 'CRC'
+  },
+  CUP: {
+    'currency-symbol': '$MN',
+    'currency-code': 'CUP'
+  },
+  CZK: {
+    'currency-symbol': 'Kč',
+    'currency-code': 'CZK'
+  },
+  DKK: {
+    'currency-symbol': 'DKK',
+    'currency-code': 'DKK'
+  },
+  DOP: {
+    'currency-symbol': 'RD$',
+    'currency-code': 'DOP'
+  },
+  DZD: {
+    'currency-symbol': 'د.ج',
+    'currency-code': 'DZD'
+  },
+  EGP: {
+    'currency-symbol': 'E£',
+    'currency-code': 'EGP'
+  },
+  ETB: {
+    'currency-symbol': 'ብር',
+    'currency-code': 'ETB'
+  },
+  EUR: {
+    'currency-symbol': '€',
+    'currency-code': 'EUR'
+  },
+  FJD: {
+    'currency-symbol': 'FJ$',
+    'currency-code': 'FJD'
+  },
+  GBP: {
+    'currency-symbol': '£',
+    'currency-code': 'GBP'
+  },
+  GHS: {
+    'currency-symbol': 'GH₵',
+    'currency-code': 'GHS'
+  },
+  GIP: {
+    'currency-symbol': 'GIP',
+    'currency-code': 'GIP'
+  },
+  GMD: {
+    'currency-symbol': 'D',
+    'currency-code': 'GMD'
+  },
+  GTQ: {
+    'currency-symbol': 'Q',
+    'currency-code': 'GTQ'
+  },
+  GYD: {
+    'currency-symbol': 'G$',
+    'currency-code': 'GYD'
+  },
+  HKD: {
+    'currency-symbol': 'HK$',
+    'currency-code': 'HKD'
+  },
+  HNL: {
+    'currency-symbol': 'HNL',
+    'currency-code': 'HNL'
+  },
+  HRK: {
+    'currency-symbol': 'kn',
+    'currency-code': 'HRK'
+  },
+  HTG: {
+    'currency-symbol': 'G',
+    'currency-code': 'HTG'
+  },
+  HUF: {
+    'currency-symbol': 'Ft',
+    'currency-code': 'HUF'
+  },
+  IDR: {
+    'currency-symbol': 'Rp',
+    'currency-code': 'IDR'
+  },
+  ILS: {
+    'currency-symbol': '₪',
+    'currency-code': 'ILS'
+  },
   INR: {
     'currency-symbol': '₹',
     'currency-code': 'INR'
   },
+  JMD: {
+    'currency-symbol': 'J$',
+    'currency-code': 'JMD'
+  },
+  KES: {
+    'currency-symbol': 'Ksh',
+    'currency-code': 'KES'
+  },
+  KGS: {
+    'currency-symbol': 'Лв',
+    'currency-code': 'KGS'
+  },
+  KHR: {
+    'currency-symbol': '៛',
+    'currency-code': 'KHR'
+  },
+  KYD: {
+    'currency-symbol': 'CI$',
+    'currency-code': 'KYD'
+  },
+  KZT: {
+    'currency-symbol': '₸',
+    'currency-code': 'KZT'
+  },
+  LAK: {
+    'currency-symbol': '₭',
+    'currency-code': 'LAK'
+  },
+  LKR: {
+    'currency-symbol': 'රු',
+    'currency-code': 'LKR'
+  },
+  LRD: {
+    'currency-symbol': 'L$',
+    'currency-code': 'LRD'
+  },
+  LSL: {
+    'currency-symbol': 'LSL',
+    'currency-code': 'LSL'
+  },
+  MAD: {
+    'currency-symbol': 'د.م.',
+    'currency-code': 'MAD'
+  },
+  MDL: {
+    'currency-symbol': 'MDL',
+    'currency-code': 'MDL'
+  },
+  MKD: {
+    'currency-symbol': 'ден',
+    'currency-code': 'MKD'
+  },
+  MMK: {
+    'currency-symbol': 'MMK',
+    'currency-code': 'MMK'
+  },
+  MNT: {
+    'currency-symbol': '₮',
+    'currency-code': 'MNT'
+  },
+  MOP: {
+    'currency-symbol': 'MOP$',
+    'currency-code': 'MOP'
+  },
+  MUR: {
+    'currency-symbol': '₨',
+    'currency-code': 'MUR'
+  },
+  MVR: {
+    'currency-symbol': 'Rf',
+    'currency-code': 'MVR'
+  },
+  MWK: {
+    'currency-symbol': 'MK',
+    'currency-code': 'MWK'
+  },
+  MXN: {
+    'currency-symbol': 'Mex$',
+    'currency-code': 'MXN'
+  },
   MYR: {
     'currency-symbol': 'RM',
     'currency-code': 'MYR'
+  },
+  NAD: {
+    'currency-symbol': 'N$',
+    'currency-code': 'NAD'
+  },
+  NGN: {
+    'currency-symbol': '₦',
+    'currency-code': 'NGN'
+  },
+  NIO: {
+    'currency-symbol': 'NIO',
+    'currency-code': 'NIO'
+  },
+  NOK: {
+    'currency-symbol': 'NOK',
+    'currency-code': 'NOK'
+  },
+  NPR: {
+    'currency-symbol': 'रू',
+    'currency-code': 'NPR'
+  },
+  NZD: {
+    'currency-symbol': 'NZ$',
+    'currency-code': 'NZD'
+  },
+  PEN: {
+    'currency-symbol': 'S/',
+    'currency-code': 'PEN'
+  },
+  PGK: {
+    'currency-symbol': 'PGK',
+    'currency-code': 'PGK'
+  },
+  PHP: {
+    'currency-symbol': '₱',
+    'currency-code': 'PHP'
+  },
+  PKR: {
+    'currency-symbol': '₨',
+    'currency-code': 'PKR'
+  },
+  QAR: {
+    'currency-symbol': 'QR',
+    'currency-code': 'QAR'
+  },
+  RUB: {
+    'currency-symbol': '₽',
+    'currency-code': 'RUB'
+  },
+  SAR: {
+    'currency-symbol': 'SR',
+    'currency-code': 'SAR'
+  },
+  SCR: {
+    'currency-symbol': 'SRe',
+    'currency-code': 'SCR'
+  },
+  SEK: {
+    'currency-symbol': 'SEK',
+    'currency-code': 'SEK'
+  },
+  SGD: {
+    'currency-symbol': 'S$',
+    'currency-code': 'SGD'
+  },
+  SLL: {
+    'currency-symbol': 'Le',
+    'currency-code': 'SLL'
+  },
+  SOS: {
+    'currency-symbol': 'Sh.so.',
+    'currency-code': 'SOS'
+  },
+  SSP: {
+    'currency-symbol': 'SS£',
+    'currency-code': 'SSP'
+  },
+  SVC: {
+    'currency-symbol': '₡',
+    'currency-code': 'SVC'
+  },
+  SZL: {
+    'currency-symbol': 'E',
+    'currency-code': 'SZL'
+  },
+  THB: {
+    'currency-symbol': '฿',
+    'currency-code': 'THB'
+  },
+  TTD: {
+    'currency-symbol': 'TT$',
+    'currency-code': 'TTD'
+  },
+  TZS: {
+    'currency-symbol': 'Sh',
+    'currency-code': 'TZS'
+  },
+  USD: {
+    'currency-symbol': '$',
+    'currency-code': 'USD'
+  },
+  UYU: {
+    'currency-symbol': '$U',
+    'currency-code': 'UYU'
+  },
+  UZS: {
+    'currency-symbol': "so'm",
+    'currency-code': 'UZS'
+  },
+  YER: {
+    'currency-symbol': '﷼',
+    'currency-code': 'YER'
+  },
+  ZAR: {
+    'currency-symbol': 'R',
+    'currency-code': 'ZAR'
+  },
+  KWD: {
+    'currency-symbol': 'د.ك',
+    'currency-code': 'KWD'
+  },
+  BHD: {
+    'currency-symbol': 'د.ب.',
+    'currency-code': 'BHD'
+  },
+  OMR: {
+    'currency-symbol': 'ر.ع.',
+    'currency-code': 'OMR'
   }
 };
-var currencyLocaleMapping = {
-  INR: 'en-IN',
-  MYR: 'en-MY'
-};
-var currencyAbbreviationsMapping = {
-  INR: [{
-    value: 1e7,
-    symbol: 'Cr'
-  }, {
-    value: 1e5,
-    symbol: 'L'
-  }, {
-    value: 1e3,
-    symbol: 'k'
-  }],
-  MYR: [{
+
+var getCurrencyAbbreviations = function getCurrencyAbbreviations(currency) {
+  if (currency === 'INR') {
+    return [{
+      value: 1e7,
+      symbol: 'Cr'
+    }, {
+      value: 1e5,
+      symbol: 'L'
+    }, {
+      value: 1e3,
+      symbol: 'k'
+    }];
+  }
+
+  return [{
     value: 1e9,
     symbol: 'B'
   }, {
@@ -26445,7 +26814,7 @@ var currencyAbbreviationsMapping = {
   }, {
     value: 1e3,
     symbol: 'K'
-  }]
+  }];
 };
 
 var _excluded$3 = ["value", "suffix", "size", "isAffixSubtle", "intent", "prefix", "testID", "currency"];
@@ -26520,7 +26889,9 @@ var getFlooredFixed = function getFlooredFixed(value, decimalPlaces) {
 };
 var addCommas = function addCommas(amountValue, currency) {
   var decimalPlaces = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var locale = currencyLocaleMapping[currency];
+  // If the currency is 'INR', set the locale to 'en-IN' (Indian English).
+  // Otherwise, set the locale to 'en-US' (U.S. English).
+  var locale = currency === 'INR' ? 'en-IN' : 'en-US';
   return amountValue.toLocaleString(locale, {
     minimumFractionDigits: decimalPlaces
   });
@@ -26532,7 +26903,7 @@ var addCommas = function addCommas(amountValue, currency) {
  */
 
 var getHumanizedAmount = function getHumanizedAmount(amountValue, currency) {
-  var abbreviations = currencyAbbreviationsMapping[currency];
+  var abbreviations = getCurrencyAbbreviations(currency);
   var abbreviation = abbreviations.find(function (abbr) {
     return amountValue >= abbr.value;
   });
@@ -28835,7 +29206,9 @@ var _BottomSheet = function _BottomSheet(_ref2) {
       children = _ref2.children,
       initialFocusRef = _ref2.initialFocusRef,
       _ref2$snapPoints = _ref2.snapPoints,
-      snapPoints = _ref2$snapPoints === void 0 ? [0.35, 0.5, 0.85] : _ref2$snapPoints;
+      snapPoints = _ref2$snapPoints === void 0 ? [0.35, 0.5, 0.85] : _ref2$snapPoints,
+      _ref2$zIndex = _ref2.zIndex,
+      zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex;
 
   var _useTheme = useTheme(),
       theme = _useTheme.theme;
@@ -28889,7 +29262,6 @@ var _BottomSheet = function _BottomSheet(_ref2) {
   var preventScrollingRef = React__default.useRef(true);
   var scrollRef = React__default.useRef(null);
   var grabHandleRef = React__default.useRef(null);
-  var originalFocusElement = React__default.useRef(null);
   var defaultInitialFocusRef = React__default.useRef(null);
   var initialSnapPoint = React__default.useRef(snapPoints[1]);
   var totalHeight = React__default.useMemo(function () {
@@ -28906,7 +29278,7 @@ var _BottomSheet = function _BottomSheet(_ref2) {
 
   var currentStackIndex = getCurrentStackIndexById(id);
   var isOnTopOfStack = getTopOfTheStack() === id;
-  var zIndex = 100 - currentStackIndex;
+  var bottomSheetZIndex = zIndex - currentStackIndex;
   var setPositionY = React__default.useCallback(function (value) {
     var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var maxValue = computeMaxContent({
@@ -28950,42 +29322,13 @@ var _BottomSheet = function _BottomSheet(_ref2) {
       initialSnapPoint.current = snapPoints[0];
     }
   }, [dimensions.height, snapPoints, totalHeight]);
-  var returnFocus = React__default.useCallback(function () {
-    if (!originalFocusElement.current) return;
-    originalFocusElement.current.focus(); // After returning focus we will clear the original focus
-    // Because if sheet 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]);
   var handleOnOpen = React__default.useCallback(function () {
-    var _originalFocusElement;
-
     setPositionY(dimensions.height * initialSnapPoint.current);
-    scrollLockRef.current.activate(); // initialize the original focused element
-    // On first render it will be the activeElement, eg: the button trigger or select input
-    // On Subsequent open operations it won't further update the original focus
-
-    originalFocusElement.current = (_originalFocusElement = originalFocusElement.current) !== null && _originalFocusElement !== void 0 ? _originalFocusElement : document.activeElement;
-    focusOnInitialRef();
-  }, [dimensions.height, focusOnInitialRef, scrollLockRef, setPositionY]);
+    scrollLockRef.current.activate();
+  }, [dimensions.height, scrollLockRef, setPositionY]);
   var handleOnClose = React__default.useCallback(function () {
     setPositionY(0);
-    returnFocus();
-  }, [returnFocus, setPositionY]);
+  }, [setPositionY]);
   var close = React__default.useCallback(function () {
     onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     bottomSheetAndDropdownGlue === null || bottomSheetAndDropdownGlue === void 0 ? void 0 : bottomSheetAndDropdownGlue.onBottomSheetDismiss();
@@ -29203,49 +29546,66 @@ var _BottomSheet = function _BottomSheet(_ref2) {
 
       _setPositionY(0);
     }
-  }, [isMounted, scrollLockRef]); // We don't want to destroy the react tree when we are rendering inside Dropdown
+  }, [isMounted, scrollLockRef]); // required by floating ui to handle focus
+
+  var _useFloating = useFloating({
+    open: isMounted
+  }),
+      refs = _useFloating.refs,
+      context = _useFloating.context; // We don't want to destroy the react tree when we are rendering inside Dropdown
   // Because if we bail out early then ActionList won't render,
   // and Dropdown manages it's state based on the rendered JSX of ActionList
   // If we don't render ActionList Dropdown state will reset each time we open/close BottomSheet
 
+
   var isInsideDropdown = Boolean(bottomSheetAndDropdownGlue);
 
   if (!isMounted && !isInsideDropdown) {
     return /*#__PURE__*/jsx(Fragment, {});
   }
 
-  return /*#__PURE__*/jsxs(BottomSheetContext.Provider, {
+  return /*#__PURE__*/jsx(BottomSheetContext.Provider, {
     value: contextValue,
-    children: [/*#__PURE__*/jsx(BottomSheetBackdrop, {
-      zIndex: zIndex
-    }), /*#__PURE__*/jsx(BottomSheetSurface, _objectSpread$c(_objectSpread$c(_objectSpread$c({}, metaAttribute({
-      name: MetaConstants.BottomSheet
-    })), makeAccessible({
+    children: (isMounted || isInsideDropdown) && /*#__PURE__*/jsx(FloatingFocusManager, {
+      returnFocus: true,
+      initialFocus: initialFocusRef !== null && initialFocusRef !== void 0 ? initialFocusRef : defaultInitialFocusRef,
+      context: context,
       modal: true,
-      role: 'dialog'
-    })), {}, {
-      windowHeight: dimensions.height,
-      isDragging: isDragging,
-      style: {
-        opacity: isVisible ? 1 : 0,
-        pointerEvents: isVisible ? 'all' : 'none',
-        height: positionY,
-        bottom: 0,
-        top: 'auto',
-        zIndex: zIndex
-      },
-      children: /*#__PURE__*/jsxs(BaseBox, {
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        children: [/*#__PURE__*/jsx(BottomSheetGrabHandle, _objectSpread$c(_objectSpread$c({
-          ref: grabHandleRef,
-          isHeaderFloating: isHeaderFloating
-        }, metaAttribute({
-          name: ComponentIds.BottomSheetGrabHandle
-        })), bind())), children]
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(BottomSheetBackdrop, {
+          zIndex: bottomSheetZIndex
+        }), /*#__PURE__*/jsx(BottomSheetSurface, _objectSpread$c(_objectSpread$c(_objectSpread$c({}, metaAttribute({
+          name: MetaConstants.BottomSheet,
+          testID: 'bottomsheet-surface'
+        })), makeAccessible({
+          modal: true,
+          role: 'dialog'
+        })), {}, {
+          windowHeight: dimensions.height,
+          isDragging: isDragging,
+          style: {
+            opacity: isVisible ? 1 : 0,
+            pointerEvents: isVisible ? 'all' : 'none',
+            height: positionY,
+            bottom: 0,
+            top: 'auto',
+            zIndex: bottomSheetZIndex
+          },
+          ref: refs.setFloating,
+          children: /*#__PURE__*/jsxs(BaseBox, {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            children: [/*#__PURE__*/jsx(BottomSheetGrabHandle, _objectSpread$c(_objectSpread$c({
+              ref: grabHandleRef,
+              isHeaderFloating: isHeaderFloating
+            }, metaAttribute({
+              name: ComponentIds.BottomSheetGrabHandle
+            })), bind())), children]
+          })
+        }))]
       })
-    }))]
+    })
   });
 };