feat(react-v10): add input change callback to multiselect filterable (#11690)

* feat(react): added input change callback to multiselect filterable (#11415)

* feat(react): added input change callback to multiselect filterable

* chore(react): removed story changes for previous version

* chore(project): update snaps

* chore(react): updated handleOnInputValueChange to remove type param

Co-authored-by: Taylor Jones <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* chore(project): update caniuse-lite, browserslist db

Co-authored-by: Tanner Summers <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

.yarn/cache/caniuse-lite-npm-1.0.30001287-7c4995ce2e-b53c26a3a2.zip

@@ -3083,6 +3083,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onInputValueChange": Object {
+        "type": "func",
+      },
       "onMenuChange": Object {
         "type": "func",
       },
@@ -4160,6 +4163,9 @@ Map {
         "onChange": Object {
           "type": "func",
         },
+        "onInputValueChange": Object {
+          "type": "func",
+        },
         "onMenuChange": Object {
           "type": "func",
         },

.yarn/cache/caniuse-lite-npm-1.0.30001359-a30b134aa2-e15dbf4ea4.zip

@@ -111,6 +111,12 @@ export default class FilterableMultiSelect extends React.Component {
      */
     onChange: PropTypes.func,
 
+    /**
+     * `onInputValueChange` is a utility for this controlled component to communicate to
+     * the currently typed input.
+     */
+    onInputValueChange: PropTypes.func,
+
     /**
      * `onMenuChange` is a utility for this controlled component to communicate to a
      * consuming component that the menu was opened(`true`)/closed(`false`).
@@ -260,6 +266,10 @@ export default class FilterableMultiSelect extends React.Component {
   };
 
   handleOnInputValueChange = (inputValue, { type }) => {
+    if (this.props.onInputValueChange) {
+      this.props.onInputValueChange(inputValue);
+    }
+
     if (type !== Downshift.stateChangeTypes.changeInput) {
       return;
     }

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -45,6 +45,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
     itemToString,
     light,
     locale,
+    onInputValueChange,
     open,
     onChange,
     onMenuChange,
@@ -166,6 +167,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect(
   }
 
   function handleOnInputValueChange(inputValue, { type }) {
+    if (onInputValueChange) {
+      onInputValueChange(inputValue);
+    }
+
     if (type !== Downshift.stateChangeTypes.changeInput) {
       return;
     }
@@ -516,6 +521,12 @@ FilterableMultiSelect.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
+   */
+  onInputValueChange: PropTypes.func,
+
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
    * consuming component that the menu was opened(`true`)/closed(`false`).

packages/react/src/components/MultiSelect/FilterableMultiSelect.js

@@ -11591,9 +11591,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001179, caniuse-lite@npm:^1.0.30001202, caniuse-lite@npm:^1.0.30001219, caniuse-lite@npm:^1.0.30001228, caniuse-lite@npm:^1.0.30001272, caniuse-lite@npm:^1.0.30001286, caniuse-lite@npm:^1.0.30001287":
-  version: 1.0.30001287
-  resolution: "caniuse-lite@npm:1.0.30001287"
-  checksum: b53c26a3a267a2920394e4aa5d1f60a76f891943914068066700e5497dda512f096d8a77dfefda17306a9df06e16ce9c6b5179f8856cc0efbcd8873d13b2fbea
+  version: 1.0.30001359
+  resolution: "caniuse-lite@npm:1.0.30001359"
+  checksum: e15dbf4ea445367e998ad525c54620275ae382446d0bc289d14bf014a159074a2207881b46406b011a72676686f8a734457ea8e8d4856dc3f700c3391e89b43e
   languageName: node
   linkType: hard