@razorpay/blade 10.15.0 → 10.15.2

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

@@ -14317,6 +14317,7 @@ var getCheckboxIconWrapperStyles = function getCheckboxIconWrapperStyles(_ref) {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    flexShrink: 0,
     width: makeSpace(checkboxSizes.icon[size].width),
     height: makeSpace(checkboxSizes.icon[size].height),
     borderWidth: makeBorderSize(theme.border.width.thick),
@@ -15197,7 +15198,6 @@ var _Checkbox = function _Checkbox(_ref, ref) {
         flexDirection: "column",
         children: [/*#__PURE__*/jsxs(BaseBox, {
           display: "flex",
-          alignItems: "center",
           flexDirection: "row",
           children: [/*#__PURE__*/jsx(SelectorInput, {
             hoverTokens: checkboxHoverTokens,
@@ -15728,14 +15728,6 @@ var _ActionListItemText = function _ActionListItemText(_ref4) {
 var ActionListItemText = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemText, {
   componentId: componentIds.ActionListItemText
 });
-var ActionListCheckboxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "ActionListItem__ActionListCheckboxWrapper",
-  componentId: "m6qdwa-1"
-})(function (_props) {
-  return {
-    pointerEvents: 'none'
-  };
-});
 var makeActionListItemClickable = function makeActionListItemClickable(clickHandler) {
   if (isReactNative$4()) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
@@ -15772,8 +15764,9 @@ var _ActionListItemBody = function _ActionListItemBody(_ref5) {
         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$1q(_objectSpread$1q({
-          hasDescription: Boolean(description)
+        jsx(BaseBox, _objectSpread$1q(_objectSpread$1q({
+          pointerEvents: "none",
+          paddingRight: "spacing.2"
         }, makeAccessible({
           hidden: true
         })), {}, {
@@ -15960,15 +15953,15 @@ var MAX_WIDTH$2 = size[584];
 var getCommonStyles = function getCommonStyles(props) {
   var theme = props.theme,
     contrastType = props.contrastType,
-    intent = props.intent,
+    color = props.color,
     isFullWidth = props.isFullWidth,
     isDesktop = props.isDesktop;
   var feedbackColors = theme.colors.feedback;
   return {
-    background: feedbackColors.background[intent][contrastType],
+    background: feedbackColors.background[color][contrastType],
     padding: isFullWidth ? "".concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[5])) : "".concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[3]), " ").concat(makeSpace(theme.spacing[4]), " ").concat(makeSpace(theme.spacing[3])),
     borderRadius: makeBorderSize(isFullWidth ? theme.border.radius.none : theme.border.radius.medium),
-    borderColor: feedbackColors.border[intent][contrastType],
+    borderColor: feedbackColors.border[color][contrastType],
     borderWidth: makeBorderSize(isFullWidth ? theme.border.width.none : theme.border.width.thin),
     borderStyle: 'solid',
     display: 'flex',
@@ -17227,7 +17220,8 @@ var Alert = function Alert(_ref) {
   var contrastType = "".concat(contrast, "Contrast");
   var iconSize = isFullWidth ? 'large' : 'medium';
   var textSize = isFullWidth ? 'medium' : 'small';
-  var Icon = intentIconMap[intent];
+  var alertColor = color !== null && color !== void 0 ? color : intent;
+  var Icon = intentIconMap[alertColor];
   var iconOffset = 'spacing.1';
 
   // certain special cases below needs special care for near perfect alignment
@@ -17252,7 +17246,7 @@ var Alert = function Alert(_ref) {
     marginTop: iconOffset,
     display: "flex",
     children: /*#__PURE__*/jsx(Icon, {
-      color: "feedback.icon.".concat(intent, ".").concat(contrastType),
+      color: "feedback.icon.".concat(alertColor, ".").concat(contrastType),
       size: iconSize
     })
   });
@@ -17285,7 +17279,7 @@ var Alert = function Alert(_ref) {
     children: /*#__PURE__*/jsx(BaseButton, {
       size: textSize,
       onClick: actions.primary.onClick,
-      color: color || intent,
+      color: alertColor,
       variant: contrast === 'high' ? 'primary' : 'secondary',
       children: actions.primary.text
     })
@@ -17310,7 +17304,7 @@ var Alert = function Alert(_ref) {
     display: isReactNative$3 ? castNativeType('flex') : castWebType('inline-flex'),
     children: /*#__PURE__*/jsx(BaseLink, _objectSpread$1j(_objectSpread$1j({
       size: textSize,
-      color: contrast === 'high' ? 'white' : intent
+      color: contrast === 'high' ? 'white' : alertColor
     }, secondaryActionParams), {}, {
       children: actions.secondary.text
     }))
@@ -17346,8 +17340,8 @@ var Alert = function Alert(_ref) {
   }) : null;
   var a11yProps = makeAccessible(_objectSpread$1j({
     // React Native doesn't has status as role
-    role: isReactNative$3 || intent === 'negative' || intent === 'notice' ? 'alert' : 'status'
-  }, intent === 'notice' && {
+    role: isReactNative$3 || alertColor === 'negative' || alertColor === 'notice' ? 'alert' : 'status'
+  }, alertColor === 'notice' && {
     liveRegion: 'polite'
   }));
   if (!isVisible) {
@@ -17358,7 +17352,7 @@ var Alert = function Alert(_ref) {
     testID: testID
   })), getStyledProps(styledProps)), {}, {
     children: /*#__PURE__*/jsxs(StyledAlert, {
-      intent: intent,
+      color: alertColor,
       contrastType: contrastType,
       isFullWidth: isFullWidth,
       isDesktop: isDesktop,
@@ -21316,7 +21310,7 @@ var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
   }, commonProps), props), accessibilityProps), {}, {
     value: props.value,
     children: /*#__PURE__*/jsx(Text, {
-      type: props.value ? 'subtle' : 'placeholder',
+      type: props.value && !isDisabled ? 'subtle' : 'placeholder',
       truncateAfterLines: 1,
       textAlign: props.textAlign,
       children: props.value ? props.value : props.placeholder
@@ -21589,7 +21583,8 @@ var BaseInputTagSlot = function BaseInputTagSlot(_ref3) {
     handleOnInputClick = _ref3.handleOnInputClick,
     isDropdownTrigger = _ref3.isDropdownTrigger,
     visibleTagsCountRef = _ref3.visibleTagsCountRef,
-    labelPrefix = _ref3.labelPrefix;
+    labelPrefix = _ref3.labelPrefix,
+    isDisabled = _ref3.isDisabled;
   var hasTags = tags && tags.length > 0;
   var slotRef = React__default.useRef(null);
   var visibleTagsCount = useVisibleTagsCount({
@@ -21658,6 +21653,7 @@ var BaseInputTagSlot = function BaseInputTagSlot(_ref3) {
       setShouldIgnoreBlurAnimation === null || setShouldIgnoreBlurAnimation === void 0 ? void 0 : setShouldIgnoreBlurAnimation(false);
     },
     children: [visibleTags, tags && !showAllTags && invisibleTagsCount ? /*#__PURE__*/jsx(Text, {
+      type: isDisabled ? 'placeholder' : 'normal',
       alignSelf: "center",
       marginY: "spacing.2",
       marginRight: "spacing.4",
@@ -22091,6 +22087,7 @@ var BaseInput = /*#__PURE__*/React__default.forwardRef(function (_ref11, ref) {
         }), /*#__PURE__*/jsx(BaseInputTagSlot, {
           renderAs: as,
           tags: tags,
+          isDisabled: isDisabled,
           showAllTags: showAllTagsWithAnimation,
           setFocusOnInput: function setFocusOnInput() {
             if (ref && !isReactNative && 'current' in ref) {
@@ -23031,22 +23028,32 @@ var _OTPInput = function _OTPInput(_ref, incomingRef) {
 };
 var OTPInput = /*#__PURE__*/React__default.forwardRef(_OTPInput);
 
+var Chevron = function Chevron(props) {
+  var iconColor = "surface.text.".concat(props.isDisabled ? 'placeholder' : 'normal', ".lowContrast");
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ChevronDownIcon, {
+      display: props.isOpen ? 'none' : 'flex',
+      size: "medium",
+      color: iconColor
+    }), /*#__PURE__*/jsx(ChevronUpIcon, {
+      display: props.isOpen ? 'flex' : 'none',
+      size: "medium",
+      color: iconColor
+    })]
+  });
+};
+
 var InputChevronIcon = function InputChevronIcon(props) {
-  return /*#__PURE__*/jsxs(BaseBox, {
+  return /*#__PURE__*/jsx(BaseBox, {
     display: "flex",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
     onClick: props.onClick,
-    children: [/*#__PURE__*/jsx(ChevronDownIcon, {
-      display: props.isOpen ? 'none' : 'flex',
-      color: "surface.text.normal.lowContrast",
-      size: "medium"
-    }), /*#__PURE__*/jsx(ChevronUpIcon, {
-      display: props.isOpen ? 'flex' : 'none',
-      color: "surface.text.normal.lowContrast",
-      size: "medium"
-    })]
+    children: /*#__PURE__*/jsx(Chevron, {
+      isOpen: props.isOpen,
+      isDisabled: props.isDisabled
+    })
   });
 };
 
@@ -23196,6 +23203,7 @@ var AnimatedTagContainer = /*#__PURE__*/styled(BaseBox).withConfig({
 var AnimatedTag = function AnimatedTag(_ref) {
   var children = _ref.children,
     currentTagIndex = _ref.currentTagIndex,
+    isDisabled = _ref.isDisabled,
     activeTagIndex = _ref.activeTagIndex,
     onDismiss = _ref.onDismiss;
   var _React$useState = React__default.useState(true),
@@ -23225,6 +23233,7 @@ var AnimatedTag = function AnimatedTag(_ref) {
       },
       marginRight: "spacing.3",
       marginY: "spacing.2",
+      isDisabled: isDisabled,
       children: children
     })
   });
@@ -23233,6 +23242,7 @@ var AnimatedTag = function AnimatedTag(_ref) {
 var getTagsGroup = function getTagsGroup(_ref) {
   var tags = _ref.tags,
     activeTagIndex = _ref.activeTagIndex,
+    isDisabled = _ref.isDisabled,
     onDismiss = _ref.onDismiss;
   return tags.map(function (tagName, tagIndex) {
     return /*#__PURE__*/jsx(AnimatedTag, {
@@ -23240,6 +23250,7 @@ var getTagsGroup = function getTagsGroup(_ref) {
       onDismiss: onDismiss,
       currentTagIndex: tagIndex,
       tagsLength: tags.length,
+      isDisabled: isDisabled,
       children: tagName
     }, tagName);
   });
@@ -23419,9 +23430,11 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
       }
       return getTagsGroup({
         tags: selectedIndices.map(function (selectedIndex) {
-          return options[selectedIndex].title;
+          var _options$selectedInde;
+          return (_options$selectedInde = options[selectedIndex]) === null || _options$selectedInde === void 0 ? void 0 : _options$selectedInde.title;
         }),
         activeTagIndex: activeTagIndex,
+        isDisabled: props.isDisabled,
         onDismiss: function onDismiss(_ref) {
           var tagIndex = _ref.tagIndex;
           if (isTagDismissedRef.current) {
@@ -23487,7 +23500,13 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
     autoFocus: props.autoFocus // eslint-disable-line jsx-a11y/no-autofocus
     ,
     value: getValue(),
-    onClick: props.onTriggerClick,
+    onClick: function onClick(e) {
+      var _props$onTriggerClick;
+      if (props.isDisabled) {
+        return;
+      }
+      (_props$onTriggerClick = props.onTriggerClick) === null || _props$onTriggerClick === void 0 ? void 0 : _props$onTriggerClick.call(props, e);
+    },
     onFocus: props.onFocus,
     onBlur: function onBlur(_ref2) {
       var _props$onBlur;
@@ -23525,6 +23544,7 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
           onTriggerClick();
         }
       },
+      isDisabled: props.isDisabled,
       isOpen: isOpen
     })
   });
@@ -23726,7 +23746,10 @@ var useAutoComplete = function useAutoComplete(_ref) {
         name: props.name,
         value: displayText
       });
-      setInputValue(displayText !== null && displayText !== void 0 ? displayText : '');
+      // Use displayText as inputValue only if its not controlled by user
+      if (typeof props.value === 'undefined') {
+        setInputValue(displayText !== null && displayText !== void 0 ? displayText : '');
+      }
     }
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
       name: props.name,