@razorpay/blade 10.12.1 → 10.13.1

package/build/components/index.d.ts

@@ -5452,6 +5452,7 @@ declare const SelectInput: React__default.ForwardRefExoticComponent<(({
         name?: string | undefined;
         values: string[];
     }) => void) | undefined;
+    syncInputValueWithSelection?: ((value: string) => void) | undefined;
     maxRows?: "multiple" | "single" | "expandable" | undefined;
     labelPosition?: "left" | "top" | "inside-input" | undefined;
 }) & React__default.RefAttributes<BladeElementRef>>;
@@ -5510,6 +5511,7 @@ declare const AutoComplete: React__default.ForwardRefExoticComponent<Pick<BaseIn
         name?: string | undefined;
         values: string[];
     }) => void) | undefined;
+    syncInputValueWithSelection?: ((value: string) => void) | undefined;
     maxRows?: "multiple" | "single" | "expandable" | undefined;
     labelPosition?: "left" | "top" | "inside-input" | undefined;
 } & {
@@ -5534,6 +5536,12 @@ declare type DropdownInputTriggersCommonProps = Pick<BaseInputProps, 'label' | '
         name?: string;
         values: string[];
     }) => void;
+    /**
+     * Syncs the selected value to inputValue in AutoComplete
+     *
+     * Only needed in single select AutoComplete because inputValue is expected to be same as selected value there
+     */
+    syncInputValueWithSelection?: (value: string) => void;
     /**
      * constraints the height of input to given number rows
      *

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

@@ -3077,7 +3077,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) {
@@ -14583,7 +14583,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"
@@ -14605,7 +14605,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"
@@ -19733,14 +19733,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'
   },
@@ -23674,6 +23674,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]);
@@ -23735,7 +23741,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 = '';
@@ -24028,7 +24036,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 {
@@ -24138,6 +24146,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) {