@razorpay/blade 10.15.1 → 10.15.3

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),
@@ -14914,7 +14915,7 @@ var SelectorLabel = function SelectorLabel(_ref2) {
   var children = _ref2.children,
     componentName = _ref2.componentName,
     testID = _ref2.testID,
-    _onMouseDown = _ref2.onMouseDown,
+    onMouseDown = _ref2.onMouseDown,
     onMouseUp = _ref2.onMouseUp,
     onMouseOut = _ref2.onMouseOut,
     onKeyDown = _ref2.onKeyDown,
@@ -14925,10 +14926,7 @@ var SelectorLabel = function SelectorLabel(_ref2) {
   return /*#__PURE__*/jsx(StyledSelectorLabel, _objectSpread$1x(_objectSpread$1x({
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd,
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault();
-      _onMouseDown === null || _onMouseDown === void 0 ? void 0 : _onMouseDown(e);
-    },
+    onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onMouseOut: onMouseOut,
     onKeyDown: onKeyDown,
@@ -15197,7 +15195,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 +15725,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 +15761,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
         })), {}, {
@@ -21317,7 +21307,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
@@ -21590,7 +21580,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({
@@ -21659,6 +21650,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",
@@ -22092,6 +22084,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) {
@@ -23032,22 +23025,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
+    })
   });
 };
 
@@ -23197,6 +23200,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),
@@ -23226,6 +23230,7 @@ var AnimatedTag = function AnimatedTag(_ref) {
       },
       marginRight: "spacing.3",
       marginY: "spacing.2",
+      isDisabled: isDisabled,
       children: children
     })
   });
@@ -23234,6 +23239,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, {
@@ -23241,6 +23247,7 @@ var getTagsGroup = function getTagsGroup(_ref) {
       onDismiss: onDismiss,
       currentTagIndex: tagIndex,
       tagsLength: tags.length,
+      isDisabled: isDisabled,
       children: tagName
     }, tagName);
   });
@@ -23420,9 +23427,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) {
@@ -23488,7 +23497,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;
@@ -23526,6 +23541,7 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
           onTriggerClick();
         }
       },
+      isDisabled: props.isDisabled,
       isOpen: isOpen
     })
   });
@@ -23727,7 +23743,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,