@razorpay/blade 6.6.2 → 6.6.3

package/build/components/index.web.js

@@ -5088,7 +5088,7 @@ function _objectSpread$5b(target) { for (var i = 1; i < arguments.length; i++) {
  * ```
  *
  */
-var ActionList = function ActionList(_ref) {
+var _ActionList = function _ActionList(_ref) {
   var children = _ref.children,
       _ref$surfaceLevel = _ref.surfaceLevel,
       surfaceLevel = _ref$surfaceLevel === void 0 ? 2 : _ref$surfaceLevel,
@@ -5148,6 +5148,8 @@ var ActionList = function ActionList(_ref) {
   }));
 };
 
+var ActionList = /*#__PURE__*/React__default.memo(_ActionList);
+
 var getBaseActionListItemStyles = function getBaseActionListItemStyles(props) {
   return {
     // @TODO: replace this with outline token when we add
@@ -7162,16 +7164,18 @@ var FileTextIcon = function FileTextIcon(_ref) {
     viewBox: "0 0 24 24",
     fill: "none",
     children: [/*#__PURE__*/jsx(Path, {
-      d: "M5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H13C13.5523 13 14 12.5523 14 12C14 11.4477 13.5523 11 13 11H5Z",
+      d: "M8 12C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H8Z",
       fill: iconColor
     }), /*#__PURE__*/jsx(Path, {
-      d: "M4 16C4 15.4477 4.44772 15 5 15H13C13.5523 15 14 15.4477 14 16C14 16.5523 13.5523 17 13 17H5C4.44772 17 4 16.5523 4 16Z",
+      d: "M7 17C7 16.4477 7.44772 16 8 16H16C16.5523 16 17 16.4477 17 17C17 17.5523 16.5523 18 16 18H8C7.44772 18 7 17.5523 7 17Z",
       fill: iconColor
     }), /*#__PURE__*/jsx(Path, {
-      d: "M5 7C4.44772 7 4 7.44772 4 8C4 8.55229 4.44772 9 5 9H7C7.55228 9 8 8.55229 8 8C8 7.44772 7.55228 7 7 7H5Z",
+      d: "M8 8C7.44772 8 7 8.44772 7 9C7 9.55229 7.44772 10 8 10H10C10.5523 10 11 9.55229 11 9C11 8.44772 10.5523 8 10 8H8Z",
       fill: iconColor
     }), /*#__PURE__*/jsx(Path, {
-      d: "M0 3C0 1.34315 1.34315 0 3 0H11C11.2652 0 11.5196 0.105357 11.7071 0.292893L17.7071 6.29289C17.8946 6.48043 18 6.73478 18 7V19C18 20.6569 16.6569 22 15 22H3C1.34315 22 0 20.6569 0 19V3ZM3 2C2.44772 2 2 2.44772 2 3V19C2 19.5523 2.44772 20 3 20H15C15.5523 20 16 19.5523 16 19V8H11C10.4477 8 10 7.55228 10 7V2H3ZM12 3.41421L14.5858 6H12V3.41421Z",
+      d: "M3 4C3 2.34315 4.34315 1 6 1H14C14.2652 1 14.5196 1.10536 14.7071 1.29289L20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V20C21 21.6569 19.6569 23 18 23H6C4.34315 23 3 21.6569 3 20V4ZM6 3C5.44772 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H18C18.5523 21 19 20.5523 19 20V9H14C13.4477 9 13 8.55228 13 8V3H6ZM15 4.41421L17.5858 7H15V4.41421Z",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
       fill: iconColor
     })]
   }));
@@ -17548,6 +17552,68 @@ var makeActionListItemClickable = function makeActionListItemClickable(clickHand
     onClick: clickHandler
   };
 };
+
+var _ActionListItemBody = function _ActionListItemBody(_ref4) {
+  var selectionType = _ref4.selectionType,
+      intent = _ref4.intent,
+      description = _ref4.description,
+      isDisabled = _ref4.isDisabled,
+      leading = _ref4.leading,
+      trailing = _ref4.trailing,
+      title = _ref4.title,
+      isSelected = _ref4.isSelected;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
+      display: "flex",
+      justifyContent: "center",
+      flexDirection: "row",
+      alignItems: "center",
+      maxHeight: isReactNative$4() ? undefined : makeSize(size[20]),
+      children: [/*#__PURE__*/jsx(BaseBox, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        children: selectionType === 'multiple' ?
+        /*#__PURE__*/
+        // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us
+        jsx(ActionListCheckboxWrapper, _objectSpread$H(_objectSpread$H({
+          hasDescription: Boolean(description)
+        }, makeAccessible({
+          hidden: true
+        })), {}, {
+          children: /*#__PURE__*/jsx(Checkbox, {
+            isChecked: isSelected,
+            tabIndex: -1,
+            isDisabled: isDisabled,
+            children: null
+          })
+        })) : leading
+      }), /*#__PURE__*/jsx(BaseBox, {
+        paddingLeft: selectionType === 'multiple' || !leading ? 'spacing.0' : 'spacing.3',
+        paddingRight: "spacing.3",
+        children: /*#__PURE__*/jsx(Text, {
+          truncateAfterLines: 1,
+          color: intent === 'negative' ? 'feedback.text.negative.lowContrast' : getNormalTextColor(isDisabled),
+          children: title
+        })
+      }), /*#__PURE__*/jsx(BaseBox, {
+        marginLeft: "auto",
+        children: trailing
+      })]
+    }), /*#__PURE__*/jsx(BaseBox, {
+      paddingLeft: leading || selectionType === 'multiple' ? 'spacing.7' : undefined,
+      children: description ? /*#__PURE__*/jsx(Text, {
+        color: getNormalTextColor(isDisabled, {
+          isMuted: true
+        }),
+        size: "small",
+        children: description
+      }) : null
+    })]
+  });
+};
+
+var ActionListItemBody = /*#__PURE__*/React__default.memo(_ActionListItemBody);
 /**
  * ### ActionListItem
  *
@@ -17567,7 +17633,6 @@ var makeActionListItemClickable = function makeActionListItemClickable(clickHand
  * ```
  */
 
-
 var _ActionListItem = function _ActionListItem(props) {
   var _useDropdown = useDropdown(),
       activeIndex = _useDropdown.activeIndex,
@@ -17598,7 +17663,7 @@ var _ActionListItem = function _ActionListItem(props) {
       intent: props.intent,
       isDisabled: props.isDisabled
     },
-    children: /*#__PURE__*/jsxs(StyledActionListItem, _objectSpread$H(_objectSpread$H(_objectSpread$H(_objectSpread$H({
+    children: /*#__PURE__*/jsx(StyledActionListItem, _objectSpread$H(_objectSpread$H(_objectSpread$H(_objectSpread$H({
       as: !isReactNative$4() ? renderOnWebAs : undefined,
       id: "".concat(dropdownBaseId, "-").concat(props._index),
       type: "button",
@@ -17643,58 +17708,21 @@ var _ActionListItem = function _ActionListItem(props) {
       intent: props.intent,
       isSelected: isSelected,
       isKeydownPressed: isKeydownPressed,
-      children: [/*#__PURE__*/jsxs(BaseBox, {
-        display: "flex",
-        justifyContent: "center",
-        flexDirection: "row",
-        alignItems: "center",
-        maxHeight: isReactNative$4() ? undefined : makeSize(size[20]),
-        children: [/*#__PURE__*/jsx(BaseBox, {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          children: selectionType === 'multiple' ?
-          /*#__PURE__*/
-          // Adding aria-hidden because the listbox item in multiselect in itself explains the behaviour so announcing checkbox is unneccesary and just a nice UI tweak for us
-          jsx(ActionListCheckboxWrapper, _objectSpread$H(_objectSpread$H({
-            hasDescription: Boolean(props.description)
-          }, makeAccessible({
-            hidden: true
-          })), {}, {
-            children: /*#__PURE__*/jsx(Checkbox, {
-              isChecked: isSelected,
-              tabIndex: -1,
-              isDisabled: props.isDisabled,
-              children: null
-            })
-          })) : props.leading
-        }), /*#__PURE__*/jsx(BaseBox, {
-          paddingLeft: selectionType === 'multiple' || !props.leading ? 'spacing.0' : 'spacing.3',
-          paddingRight: "spacing.3",
-          children: /*#__PURE__*/jsx(Text, {
-            truncateAfterLines: 1,
-            color: props.intent === 'negative' ? 'feedback.text.negative.lowContrast' : getNormalTextColor(props.isDisabled),
-            children: props.title
-          })
-        }), /*#__PURE__*/jsx(BaseBox, {
-          marginLeft: "auto",
-          children: props.trailing
-        })]
-      }), /*#__PURE__*/jsx(BaseBox, {
-        paddingLeft: props.leading || selectionType === 'multiple' ? 'spacing.7' : undefined,
-        children: props.description ? /*#__PURE__*/jsx(Text, {
-          color: getNormalTextColor(props.isDisabled, {
-            isMuted: true
-          }),
-          size: "small",
-          children: props.description
-        }) : null
-      })]
+      children: /*#__PURE__*/jsx(ActionListItemBody, {
+        selectionType: selectionType,
+        intent: props.intent,
+        description: props.description,
+        isDisabled: props.isDisabled,
+        leading: props.leading,
+        trailing: props.trailing,
+        title: props.title,
+        isSelected: isSelected
+      })
     }))
   });
 };
 
-var ActionListItem = /*#__PURE__*/assignWithoutSideEffects(_ActionListItem, {
+var ActionListItem = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionListItem), {
   componentId: componentIds$1.ActionListItem
 });
 
@@ -20349,7 +20377,7 @@ var _Dropdown = function _Dropdown(_ref) {
       setIsKeydownPressed = _React$useState18[1];
 
   var dropdownBaseId = useId('dropdown');
-  var dropdownTriggerer;
+  var dropdownTriggerer = React__default.useRef();
   React__default.Children.map(children, function (child) {
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
       if (!isValidAllowedChildren(child, 'SelectInput') && !isValidAllowedChildren(child, componentIds.DropdownOverlay)) {
@@ -20357,7 +20385,7 @@ var _Dropdown = function _Dropdown(_ref) {
       }
 
       if (isValidAllowedChildren(child, 'SelectInput')) {
-        dropdownTriggerer = 'SelectInput';
+        dropdownTriggerer.current = 'SelectInput';
       }
     }
   });
@@ -20385,7 +20413,7 @@ var _Dropdown = function _Dropdown(_ref) {
       setHasFooterAction: setHasFooterAction,
       hasLabelOnLeft: hasLabelOnLeft,
       setHasLabelOnLeft: setHasLabelOnLeft,
-      dropdownTriggerer: dropdownTriggerer
+      dropdownTriggerer: dropdownTriggerer.current
     };
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [isOpen, selectedIndices, options, activeIndex, shouldIgnoreBlur, shouldIgnoreBlurAnimation, selectionType, hasFooterAction, hasLabelOnLeft, isKeydownPressed]);
@@ -20872,24 +20900,28 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       window.removeEventListener('resize', setOverlayWidth);
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setWidth, triggererRef, hasLabelOnLeft]);
+  var onAnimationEnd = React__default.useCallback(function () {
+    if (isOpen) {
+      setDisplay('block');
+    } else {
+      setDisplay('none');
+    }
+  }, [isOpen]);
+  var styles = React__default.useMemo(function () {
+    return {
+      opacity: isOpen ? 1 : 0
+    };
+  }, [isOpen]);
   return /*#__PURE__*/jsx(BaseBox, {
     position: "relative",
     children: /*#__PURE__*/jsx(StyledDropdownOverlay, _objectSpread$m(_objectSpread$m({
       width: width,
-      style: {
-        opacity: isOpen ? 1 : 0
-      },
+      style: styles,
       display: castWebType(display),
       right: "0px",
       position: "absolute",
       transition: isOpen ? fadeIn : fadeOut,
-      onAnimationEnd: function onAnimationEnd() {
-        if (isOpen) {
-          setDisplay('block');
-        } else {
-          setDisplay('none');
-        }
-      }
+      onAnimationEnd: onAnimationEnd
     }, metaAttribute({
       name: MetaConstants.DropdownOverlay,
       testID: testID