react-inline-autocomplete - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.d.ts

@@ -10,9 +10,10 @@ import React from 'react';
     onBlur?: () => void;
-    onChange?: (text: string) => void;
     onFocus?: () => void;
-    onConfirm?: (item: DataSourceItem) => void;
+    onChange?: (value: string) => void;
+    onPressEnter?: (value: string) => void;
+    onSelect?: (item: DataSourceItem) => void;
 }
 export interface DataSourceItem {
+    text: string;
     value: string | number;
-    text: string;
     [key: string]: any;
@@ -19,0 +20,0 @@ }

dist/index.js

@@ -22,5 +22,16 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var KeyEnum;
+
+(function (KeyEnum) {
+  KeyEnum["TAB"] = "Tab";
+  KeyEnum["ENTER"] = "Enter";
+  KeyEnum["ARROW_UP"] = "ArrowUp";
+  KeyEnum["ARROW_DOWN"] = "ArrowDown";
+})(KeyEnum || (KeyEnum = {}));
+
 var styles = {"wrap":"_31Ve9","input":"_ZX6Lw","complete":"_NwvFz"};
 
 var Autocomplete = function Autocomplete(props, ref) {
+  var _matchedDataSource$ac;
+
   var value = props.value,
@@ -30,17 +41,21 @@ dataSource = props.dataSource,
       onBlur = props.onBlur,
+      onFocus = props.onFocus,
       onChange = props.onChange,
-      onFocus = props.onFocus,
-      onConfirm = props.onConfirm,
-      others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onChange", "onFocus", "onConfirm"]);
+      onPressEnter = props.onPressEnter,
+      onSelect = props.onSelect,
+      others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onFocus", "onChange", "onPressEnter", "onSelect"]);
 
-  var _useState = React.useState(),
-      matchedDSItem = _useState[0],
-      setMatchedDSItem = _useState[1];
+  var _useState = React.useState(''),
+      _value = _useState[0],
+      setValue = _useState[1];
 
-  var _useState2 = React.useState(''),
-      _value = _useState2[0],
-      setValue = _useState2[1];
+  var _useState2 = React.useState(),
+      matchedDataSource = _useState2[0],
+      setMatchedDataSource = _useState2[1];
 
-  var controlledValue = value != null ? value : _value; // input ref
+  var _useState3 = React.useState(0),
+      activeIndex = _useState3[0],
+      setActiveIndex = _useState3[1];
 
+  var controlledValue = value != null ? value : _value;
   var inputRef = React.useRef();
@@ -50,31 +65,62 @@ React__default.useImperativeHandle(ref, function () {
   });
-  var wrapClassString = classNames('ria-wrap', styles.wrap, className);
-  var inputClassString = classNames('ria-input', styles.input);
-  var completeClassString = classNames('ria-complete', styles.complete);
 
-  var _onChange = function _onChange(e) {
-    // trigger onChange
-    var text = e.target.value;
-    onChange && onChange(text);
-    setValue(text); // search matched data source item
+  var updateValue = function updateValue(value) {
+    onChange && onChange(value);
+    setValue(value);
+  };
 
-    if (!text) return setMatchedDSItem(null);
-    var matchedDSItem = dataSource.find(function (i) {
-      return i.text.startsWith(text);
-    });
-    setMatchedDSItem(matchedDSItem);
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+    updateValue(value);
+    if (!value) return setMatchedDataSource([]);
+    setActiveIndex(0);
+    setMatchedDataSource(dataSource.filter(function (i) {
+      return i.text.startsWith(value) && i.text !== value;
+    }));
   };
 
-  var _onConfirm = function _onConfirm(e) {
-    if (e.key !== 'Enter') return;
-    if (!matchedDSItem) return; // trigger onChange
+  var handleKeyDown = function handleKeyDown(e) {
+    if (Object.values(KeyEnum).includes(e.key)) {
+      e.preventDefault();
+    }
 
-    var text = matchedDSItem == null ? void 0 : matchedDSItem.text;
-    setValue(text);
-    onChange && onChange(text); // trigger onConfirm and reset
+    switch (e.key) {
+      case KeyEnum.TAB:
+        var matchedDataSourceItem = matchedDataSource == null ? void 0 : matchedDataSource[activeIndex];
+        if (!matchedDataSourceItem) return;
+        updateValue(matchedDataSourceItem.text);
+        onSelect && onSelect(matchedDataSourceItem);
+        setMatchedDataSource([]);
+        break;
 
-    onConfirm && onConfirm(matchedDSItem);
-    setMatchedDSItem(null);
+      case KeyEnum.ARROW_UP:
+        setActiveIndex(function (idx) {
+          if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+            return (idx - 1 + matchedDataSource.length) % matchedDataSource.length;
+          }
+
+          return 0;
+        });
+        break;
+
+      case KeyEnum.ARROW_DOWN:
+        setActiveIndex(function (idx) {
+          if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+            return (idx + 1) % matchedDataSource.length;
+          }
+
+          return 0;
+        });
+        break;
+
+      case KeyEnum.ENTER:
+        onPressEnter && onPressEnter(controlledValue);
+        setMatchedDataSource([]);
+        break;
+    }
   };
 
+  var wrapClassString = classNames('ria-wrap', styles.wrap, className);
+  var inputClassString = classNames('ria-input', styles.input);
+  var completeClassString = classNames('ria-complete', styles.complete);
   return React__default.createElement("div", {
@@ -89,7 +135,7 @@ className: wrapClassString
     onFocus: onFocus,
-    onChange: _onChange,
-    onKeyDown: _onConfirm
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
   }, others)), React__default.createElement("div", {
     className: completeClassString
-  }, matchedDSItem == null ? void 0 : matchedDSItem.text));
+  }, matchedDataSource == null ? void 0 : (_matchedDataSource$ac = matchedDataSource[activeIndex]) == null ? void 0 : _matchedDataSource$ac.text));
 };
@@ -96,0 +142,0 @@

dist/index.modern.js

@@ -19,5 +19,16 @@ import React, { useState, useRef } from 'react';
 
+var KeyEnum;
+
+(function (KeyEnum) {
+  KeyEnum["TAB"] = "Tab";
+  KeyEnum["ENTER"] = "Enter";
+  KeyEnum["ARROW_UP"] = "ArrowUp";
+  KeyEnum["ARROW_DOWN"] = "ArrowDown";
+})(KeyEnum || (KeyEnum = {}));
+
 var styles = {"wrap":"_31Ve9","input":"_ZX6Lw","complete":"_NwvFz"};
 
 const Autocomplete = (props, ref) => {
+  var _matchedDataSource$ac;
+
   const {
@@ -28,41 +39,75 @@ value,
     onBlur,
+    onFocus,
     onChange,
-    onFocus,
-    onConfirm
+    onPressEnter,
+    onSelect
   } = props,
-        others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onChange", "onFocus", "onConfirm"]);
+        others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onFocus", "onChange", "onPressEnter", "onSelect"]);
 
-  const [matchedDSItem, setMatchedDSItem] = useState();
-  const [_value, setValue] = useState('');
-  const controlledValue = value != null ? value : _value; // input ref
-
+  let [_value, setValue] = useState('');
+  let [matchedDataSource, setMatchedDataSource] = useState();
+  let [activeIndex, setActiveIndex] = useState(0);
+  let controlledValue = value != null ? value : _value;
   const inputRef = useRef();
   React.useImperativeHandle(ref, () => inputRef.current);
-  const wrapClassString = classNames('ria-wrap', styles.wrap, className);
-  const inputClassString = classNames('ria-input', styles.input);
-  const completeClassString = classNames('ria-complete', styles.complete);
 
-  const _onChange = e => {
-    // trigger onChange
-    const text = e.target.value;
-    onChange && onChange(text);
-    setValue(text); // search matched data source item
+  const updateValue = value => {
+    onChange && onChange(value);
+    setValue(value);
+  };
 
-    if (!text) return setMatchedDSItem(null);
-    const matchedDSItem = dataSource.find(i => i.text.startsWith(text));
-    setMatchedDSItem(matchedDSItem);
+  const handleChange = e => {
+    const value = e.target.value;
+    updateValue(value);
+    if (!value) return setMatchedDataSource([]);
+    setActiveIndex(0);
+    setMatchedDataSource(dataSource.filter(i => {
+      return i.text.startsWith(value) && i.text !== value;
+    }));
   };
 
-  const _onConfirm = e => {
-    if (e.key !== 'Enter') return;
-    if (!matchedDSItem) return; // trigger onChange
+  const handleKeyDown = e => {
+    if (Object.values(KeyEnum).includes(e.key)) {
+      e.preventDefault();
+    }
 
-    const text = matchedDSItem == null ? void 0 : matchedDSItem.text;
-    setValue(text);
-    onChange && onChange(text); // trigger onConfirm and reset
+    switch (e.key) {
+      case KeyEnum.TAB:
+        let matchedDataSourceItem = matchedDataSource == null ? void 0 : matchedDataSource[activeIndex];
+        if (!matchedDataSourceItem) return;
+        updateValue(matchedDataSourceItem.text);
+        onSelect && onSelect(matchedDataSourceItem);
+        setMatchedDataSource([]);
+        break;
 
-    onConfirm && onConfirm(matchedDSItem);
-    setMatchedDSItem(null);
+      case KeyEnum.ARROW_UP:
+        setActiveIndex(idx => {
+          if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+            return (idx - 1 + matchedDataSource.length) % matchedDataSource.length;
+          }
+
+          return 0;
+        });
+        break;
+
+      case KeyEnum.ARROW_DOWN:
+        setActiveIndex(idx => {
+          if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+            return (idx + 1) % matchedDataSource.length;
+          }
+
+          return 0;
+        });
+        break;
+
+      case KeyEnum.ENTER:
+        onPressEnter && onPressEnter(controlledValue);
+        setMatchedDataSource([]);
+        break;
+    }
   };
 
+  const wrapClassString = classNames('ria-wrap', styles.wrap, className);
+  const inputClassString = classNames('ria-input', styles.input);
+  const completeClassString = classNames('ria-complete', styles.complete);
   return React.createElement("div", {
@@ -77,7 +122,7 @@ className: wrapClassString
     onFocus: onFocus,
-    onChange: _onChange,
-    onKeyDown: _onConfirm
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
   }, others)), React.createElement("div", {
     className: completeClassString
-  }, matchedDSItem == null ? void 0 : matchedDSItem.text));
+  }, matchedDataSource == null ? void 0 : (_matchedDataSource$ac = matchedDataSource[activeIndex]) == null ? void 0 : _matchedDataSource$ac.text));
 };
@@ -84,0 +129,0 @@

dist/index.module.js

@@ -19,5 +19,16 @@ import React, { useState, useRef } from 'react';
 
+var KeyEnum;
+
+(function (KeyEnum) {
+  KeyEnum["TAB"] = "Tab";
+  KeyEnum["ENTER"] = "Enter";
+  KeyEnum["ARROW_UP"] = "ArrowUp";
+  KeyEnum["ARROW_DOWN"] = "ArrowDown";
+})(KeyEnum || (KeyEnum = {}));
+
 var styles = {"wrap":"_31Ve9","input":"_ZX6Lw","complete":"_NwvFz"};
 
 var Autocomplete = function Autocomplete(props, ref) {
+  var _matchedDataSource$ac;
+
   var value = props.value,
@@ -27,17 +38,21 @@ dataSource = props.dataSource,
       onBlur = props.onBlur,
+      onFocus = props.onFocus,
       onChange = props.onChange,
-      onFocus = props.onFocus,
-      onConfirm = props.onConfirm,
-      others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onChange", "onFocus", "onConfirm"]);
+      onPressEnter = props.onPressEnter,
+      onSelect = props.onSelect,
+      others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onFocus", "onChange", "onPressEnter", "onSelect"]);
 
-  var _useState = useState(),
-      matchedDSItem = _useState[0],
-      setMatchedDSItem = _useState[1];
+  var _useState = useState(''),
+      _value = _useState[0],
+      setValue = _useState[1];
 
-  var _useState2 = useState(''),
-      _value = _useState2[0],
-      setValue = _useState2[1];
+  var _useState2 = useState(),
+      matchedDataSource = _useState2[0],
+      setMatchedDataSource = _useState2[1];
 
-  var controlledValue = value != null ? value : _value; // input ref
+  var _useState3 = useState(0),
+      activeIndex = _useState3[0],
+      setActiveIndex = _useState3[1];
 
+  var controlledValue = value != null ? value : _value;
   var inputRef = useRef();
@@ -47,31 +62,62 @@ React.useImperativeHandle(ref, function () {
   });
-  var wrapClassString = classNames('ria-wrap', styles.wrap, className);
-  var inputClassString = classNames('ria-input', styles.input);
-  var completeClassString = classNames('ria-complete', styles.complete);
 
-  var _onChange = function _onChange(e) {
-    // trigger onChange
-    var text = e.target.value;
-    onChange && onChange(text);
-    setValue(text); // search matched data source item
+  var updateValue = function updateValue(value) {
+    onChange && onChange(value);
+    setValue(value);
+  };
 
-    if (!text) return setMatchedDSItem(null);
-    var matchedDSItem = dataSource.find(function (i) {
-      return i.text.startsWith(text);
-    });
-    setMatchedDSItem(matchedDSItem);
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+    updateValue(value);
+    if (!value) return setMatchedDataSource([]);
+    setActiveIndex(0);
+    setMatchedDataSource(dataSource.filter(function (i) {
+      return i.text.startsWith(value) && i.text !== value;
+    }));
   };
 
-  var _onConfirm = function _onConfirm(e) {
-    if (e.key !== 'Enter') return;
-    if (!matchedDSItem) return; // trigger onChange
+  var handleKeyDown = function handleKeyDown(e) {
+    if (Object.values(KeyEnum).includes(e.key)) {
+      e.preventDefault();
+    }
 
-    var text = matchedDSItem == null ? void 0 : matchedDSItem.text;
-    setValue(text);
-    onChange && onChange(text); // trigger onConfirm and reset
+    switch (e.key) {
+      case KeyEnum.TAB:
+        var matchedDataSourceItem = matchedDataSource == null ? void 0 : matchedDataSource[activeIndex];
+        if (!matchedDataSourceItem) return;
+        updateValue(matchedDataSourceItem.text);
+        onSelect && onSelect(matchedDataSourceItem);
+        setMatchedDataSource([]);
+        break;
 
-    onConfirm && onConfirm(matchedDSItem);
-    setMatchedDSItem(null);
+      case KeyEnum.ARROW_UP:
+        setActiveIndex(function (idx) {
+          if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+            return (idx - 1 + matchedDataSource.length) % matchedDataSource.length;
+          }
+
+          return 0;
+        });
+        break;
+
+      case KeyEnum.ARROW_DOWN:
+        setActiveIndex(function (idx) {
+          if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+            return (idx + 1) % matchedDataSource.length;
+          }
+
+          return 0;
+        });
+        break;
+
+      case KeyEnum.ENTER:
+        onPressEnter && onPressEnter(controlledValue);
+        setMatchedDataSource([]);
+        break;
+    }
   };
 
+  var wrapClassString = classNames('ria-wrap', styles.wrap, className);
+  var inputClassString = classNames('ria-input', styles.input);
+  var completeClassString = classNames('ria-complete', styles.complete);
   return React.createElement("div", {
@@ -86,7 +132,7 @@ className: wrapClassString
     onFocus: onFocus,
-    onChange: _onChange,
-    onKeyDown: _onConfirm
+    onChange: handleChange,
+    onKeyDown: handleKeyDown
   }, others)), React.createElement("div", {
     className: completeClassString
-  }, matchedDSItem == null ? void 0 : matchedDSItem.text));
+  }, matchedDataSource == null ? void 0 : (_matchedDataSource$ac = matchedDataSource[activeIndex]) == null ? void 0 : _matchedDataSource$ac.text));
 };
@@ -93,0 +139,0 @@

dist/index.umd.js

@@ -24,5 +24,16 @@ (function (global, factory) {
 
+  var KeyEnum;
+
+  (function (KeyEnum) {
+    KeyEnum["TAB"] = "Tab";
+    KeyEnum["ENTER"] = "Enter";
+    KeyEnum["ARROW_UP"] = "ArrowUp";
+    KeyEnum["ARROW_DOWN"] = "ArrowDown";
+  })(KeyEnum || (KeyEnum = {}));
+
   var styles = {"wrap":"_31Ve9","input":"_ZX6Lw","complete":"_NwvFz"};
 
   var Autocomplete = function Autocomplete(props, ref) {
+    var _matchedDataSource$ac;
+
     var value = props.value,
@@ -32,17 +43,21 @@ dataSource = props.dataSource,
         onBlur = props.onBlur,
+        onFocus = props.onFocus,
         onChange = props.onChange,
-        onFocus = props.onFocus,
-        onConfirm = props.onConfirm,
-        others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onChange", "onFocus", "onConfirm"]);
+        onPressEnter = props.onPressEnter,
+        onSelect = props.onSelect,
+        others = _objectWithoutPropertiesLoose(props, ["value", "dataSource", "className", "onBlur", "onFocus", "onChange", "onPressEnter", "onSelect"]);
 
-    var _useState = React.useState(),
-        matchedDSItem = _useState[0],
-        setMatchedDSItem = _useState[1];
+    var _useState = React.useState(''),
+        _value = _useState[0],
+        setValue = _useState[1];
 
-    var _useState2 = React.useState(''),
-        _value = _useState2[0],
-        setValue = _useState2[1];
+    var _useState2 = React.useState(),
+        matchedDataSource = _useState2[0],
+        setMatchedDataSource = _useState2[1];
 
-    var controlledValue = value != null ? value : _value; // input ref
+    var _useState3 = React.useState(0),
+        activeIndex = _useState3[0],
+        setActiveIndex = _useState3[1];
 
+    var controlledValue = value != null ? value : _value;
     var inputRef = React.useRef();
@@ -52,31 +67,62 @@ React__default.useImperativeHandle(ref, function () {
     });
-    var wrapClassString = classNames('ria-wrap', styles.wrap, className);
-    var inputClassString = classNames('ria-input', styles.input);
-    var completeClassString = classNames('ria-complete', styles.complete);
 
-    var _onChange = function _onChange(e) {
-      // trigger onChange
-      var text = e.target.value;
-      onChange && onChange(text);
-      setValue(text); // search matched data source item
+    var updateValue = function updateValue(value) {
+      onChange && onChange(value);
+      setValue(value);
+    };
 
-      if (!text) return setMatchedDSItem(null);
-      var matchedDSItem = dataSource.find(function (i) {
-        return i.text.startsWith(text);
-      });
-      setMatchedDSItem(matchedDSItem);
+    var handleChange = function handleChange(e) {
+      var value = e.target.value;
+      updateValue(value);
+      if (!value) return setMatchedDataSource([]);
+      setActiveIndex(0);
+      setMatchedDataSource(dataSource.filter(function (i) {
+        return i.text.startsWith(value) && i.text !== value;
+      }));
     };
 
-    var _onConfirm = function _onConfirm(e) {
-      if (e.key !== 'Enter') return;
-      if (!matchedDSItem) return; // trigger onChange
+    var handleKeyDown = function handleKeyDown(e) {
+      if (Object.values(KeyEnum).includes(e.key)) {
+        e.preventDefault();
+      }
 
-      var text = matchedDSItem == null ? void 0 : matchedDSItem.text;
-      setValue(text);
-      onChange && onChange(text); // trigger onConfirm and reset
+      switch (e.key) {
+        case KeyEnum.TAB:
+          var matchedDataSourceItem = matchedDataSource == null ? void 0 : matchedDataSource[activeIndex];
+          if (!matchedDataSourceItem) return;
+          updateValue(matchedDataSourceItem.text);
+          onSelect && onSelect(matchedDataSourceItem);
+          setMatchedDataSource([]);
+          break;
 
-      onConfirm && onConfirm(matchedDSItem);
-      setMatchedDSItem(null);
+        case KeyEnum.ARROW_UP:
+          setActiveIndex(function (idx) {
+            if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+              return (idx - 1 + matchedDataSource.length) % matchedDataSource.length;
+            }
+
+            return 0;
+          });
+          break;
+
+        case KeyEnum.ARROW_DOWN:
+          setActiveIndex(function (idx) {
+            if (matchedDataSource == null ? void 0 : matchedDataSource.length) {
+              return (idx + 1) % matchedDataSource.length;
+            }
+
+            return 0;
+          });
+          break;
+
+        case KeyEnum.ENTER:
+          onPressEnter && onPressEnter(controlledValue);
+          setMatchedDataSource([]);
+          break;
+      }
     };
 
+    var wrapClassString = classNames('ria-wrap', styles.wrap, className);
+    var inputClassString = classNames('ria-input', styles.input);
+    var completeClassString = classNames('ria-complete', styles.complete);
     return React__default.createElement("div", {
@@ -91,7 +137,7 @@ className: wrapClassString
       onFocus: onFocus,
-      onChange: _onChange,
-      onKeyDown: _onConfirm
+      onChange: handleChange,
+      onKeyDown: handleKeyDown
     }, others)), React__default.createElement("div", {
       className: completeClassString
-    }, matchedDSItem == null ? void 0 : matchedDSItem.text));
+    }, matchedDataSource == null ? void 0 : (_matchedDataSource$ac = matchedDataSource[activeIndex]) == null ? void 0 : _matchedDataSource$ac.text));
   };
@@ -98,0 +144,0 @@

package.json

 {
   "name": "react-inline-autocomplete",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "react-inline-autocomplete",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -32,2 +32,6 @@ # React Inline Autocomplete
   {
+    text: 'Amazon',
+    value: 'Amazon',
+  },
+  {
     text: 'Google',
@@ -49,8 +53,8 @@ value: 'Google',
   {
-    text: 'Amazon',
-    value: 'Amazon',
+    text: 'Apple Watch',
+    value: 'AppleWatch',
   },
   {
-    text: 'Microsoft',
-    value: 'Microsoft',
+    text: 'Apple Power',
+    value: 'ApplePower',
   },
@@ -64,4 +68,5 @@ ];
   };
-  const onChange = () => {};
-  const onConfirm = () => {};
+  const onChange = (value: string) => {};
+  const onPressEnter = (value: string) => {};
+  const onSelect = (item: DataSourceItem) => {};
 
@@ -74,3 +79,4 @@ return (
       onChange={onChange}
-      onConfirm={onConfirm}
+      onConfirm={onPressEnter}
+      onSelect={onSelect}
     ></InlineAutocomplete>
@@ -83,14 +89,15 @@ );
 
-| Property    | Type                           |   Default | Required | Description                                      |
-| ----------- | ------------------------------ | --------: | -------- | ------------------------------------------------ |
-| value       | string                         | undefined | no       | input value                                      |
-| dataSource  | DataSourceItem                 |        [] | yes      | Array of available items to search.              |
-| className   | string                         |        "" | yes      |                                                  |
-| style       | React.CSSProperties            | undefined | no       |                                                  |
-| placeholder | string                         | undefined | no       |                                                  |
-| disabled    | boolean                        |     false | no       | Whether to disable, the default is false.        |
-| onBlur      | () => void                     | undefined | no       | onBlur handler                                   |
-| onChange    | (text: string) => void;        | undefined | no       | onChange handler                                 |
-| onFocus     | () => void                     | undefined | no       | onFocus handler                                  |
-| onConfirm   | (item: DataSourceItem) => void | undefined | no       | onConfirm handler(called when you press `Enter`) |
+| Property     | Type                           |   Default | Required | Description                                         |
+| ------------ | ------------------------------ | --------: | -------- | --------------------------------------------------- |
+| value        | string                         | undefined | no       | input value                                         |
+| dataSource   | DataSourceItem                 |        [] | yes      | Array of available items to search.                 |
+| className    | string                         |        "" | yes      |                                                     |
+| style        | React.CSSProperties            | undefined | no       |                                                     |
+| placeholder  | string                         | undefined | no       |                                                     |
+| disabled     | boolean                        |     false | no       | Whether to disable, the default is false.           |
+| onBlur       | () => void                     | undefined | no       | onBlur handler                                      |
+| onFocus      | () => void                     | undefined | no       | onFocus handler                                     |
+| onChange     | (value: string) => void        | undefined | no       | onChange handler                                    |
+| onPressEnter | (value: string) => void        | undefined | no       | onPressEnter handler(called when you press `Enter`) |
+| onSelect     | (item: DataSourceItem) => void | undefined | no       | onSelect handler(called when you press `Tab`)       |
 
@@ -97,0 +104,0 @@ ## Development

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55412

39.84%

Number of package files

14

7.69%

Lines of code

530

44.41%

Number of lines in readme file

133

5.56%

Number of medium supply chain risk alerts

0

-100%

No dependency changes