@razorpay/blade 10.12.1 → 10.13.1

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

@@ -2992,7 +2992,7 @@ function _objectSpread$6g(target) { for (var i = 1; i < arguments.length; i++) {
 /**
  * Reusable hook to be used in BladeProvider.native & BladeProvider.web file
  *
- * This hook proccesses incoming themeTokens & initialColorScheme
+ * This hook processes incoming themeTokens & initialColorScheme
  * And validates & returns the theme values
  */
 var useBladeProvider = function useBladeProvider(_ref) {
@@ -14375,7 +14375,7 @@ var CheckedIcon$1 = function CheckedIcon(_ref) {
       clipRule: "evenodd",
       d: "M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z",
       fill: color,
-      stroke: "white",
+      stroke: color,
       strokeWidth: "0.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
@@ -14397,7 +14397,7 @@ var IndeterminateIcon = function IndeterminateIcon(_ref2) {
       clipRule: "evenodd",
       d: "M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z",
       fill: color,
-      stroke: "white",
+      stroke: color,
       strokeWidth: "0.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
@@ -19400,14 +19400,14 @@ var chipColorTokens = {
   text: {
     unchecked: 'surface.text.subtle.lowContrast',
     disabled: 'surface.text.placeholder.lowContrast',
-    none: 'brand.primary.500',
+    none: 'action.text.secondary.default',
     positive: 'feedback.text.positive.lowContrast',
     negative: 'feedback.text.negative.lowContrast'
   },
   icon: {
     unchecked: 'surface.text.subtle.lowContrast',
     disabled: 'surface.text.placeholder.lowContrast',
-    none: 'brand.primary.500',
+    none: 'action.icon.secondary.default',
     positive: 'feedback.icon.positive.lowContrast',
     negative: 'feedback.icon.negative.lowContrast'
   },
@@ -23275,6 +23275,12 @@ var useControlledDropdownInput = function useControlledDropdownInput(props) {
         setIsControlled(true);
       }
       selectValues(props.value);
+
+      // in single select AutoComplete, we have to set inputValue of autocomplete according to the new selection.
+      if (selectionType === 'single' && !Array.isArray(props.value) && !props.isSelectInput) {
+        var _props$syncInputValue;
+        (_props$syncInputValue = props.syncInputValueWithSelection) === null || _props$syncInputValue === void 0 ? void 0 : _props$syncInputValue.call(props, props.value);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.value, options]);
@@ -23336,7 +23342,9 @@ var _BaseDropdownInputTrigger = function _BaseDropdownInputTrigger(props, ref) {
     onChange: props.onChange,
     name: props.name,
     value: props.value,
-    defaultValue: props.defaultValue
+    defaultValue: props.defaultValue,
+    syncInputValueWithSelection: props.syncInputValueWithSelection,
+    isSelectInput: props.isSelectInput
   });
   var getValue = function getValue() {
     var prefix = '';
@@ -23629,7 +23637,7 @@ var useAutoComplete = function useAutoComplete(_ref) {
       // eslint-disable-next-line no-lonely-if
       if (value && options && options.length > 0) {
         var filteredOptions = getOptionValues().filter(function (optionValue) {
-          return optionValue.toLowerCase().startsWith(value.toLowerCase());
+          return optionValue.toLowerCase().includes(value.toLowerCase());
         });
         setGlobalFilteredValues(filteredOptions);
       } else {
@@ -23739,6 +23747,17 @@ var _AutoComplete = function _AutoComplete(props, ref) {
       onChange: onSelectionChange,
       isSelectInput: false,
       inputValue: inputValue,
+      syncInputValueWithSelection: function syncInputValueWithSelection(value) {
+        var _selectedOption$title;
+        if (!value) {
+          setInputValue('');
+          return;
+        }
+        var selectedOption = options.find(function (option) {
+          return option.value === value;
+        });
+        setInputValue((_selectedOption$title = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.title) !== null && _selectedOption$title !== void 0 ? _selectedOption$title : '');
+      },
       onTriggerKeydown: onTriggerKeydown,
       onInputValueChange: onInputValueChange,
       onTriggerClick: function onTriggerClick(triggerEvent) {