react-textarea-with-suggest 2.0.0 → 2.1.1

package/README.md

@@ -1,9 +1,11 @@
 # react-textarea-with-suggest
 Textarea with suggest for React app v2.0.0
 
-### Last changes:
-- supports TypeScript and new React versions
-- fixed bug with installing
+### Last changes
+[You can find in CHANGELOG.md](./CHANGELOG.md)
+
+### Demo
+[You can try component here](https://marylorian.github.io/react-textarea-with-suggest/)
 
 ## Install
 If you use npm
@@ -16,6 +18,28 @@ yarn add react-textarea-with-suggest
 ```
 
 ## Usage
+
+### For functional component
+```
+import Textarea from "react-textarea-with-suggest";
+
+const MyApp = (props) => {
+    const [text, setText] = useState<string>("")
+    const { results, search } = useMyOwnSearchResults();
+    
+    return <Textarea 
+        className="myapp-textarea"
+        value={text}
+        onChange={({ target }) => setText({ target.value })}
+        onSearch={(searchPhrase) => search(searchPhrase)}
+        suggestList={results}
+        searchMarker="@"
+        autoFocus
+    />
+}
+```
+
+### For class component
 ```
 import Textarea from "react-textarea-with-suggest";
 import { search } from "../actions"
@@ -40,31 +64,34 @@ export default class MyApp extends React.Component {
 
 |Name|Default value|Required|Description|
 |----|-------------|--------|-----------|
-|autosizable|bool: false|no|using [`<TextareaAutosize>`](https://www.npmjs.com/package/react-textarea-autosize) instead  of `<textarea>` if true|
+|autosizable|boolean: false|no|using [`<TextareaAutosize>`](https://www.npmjs.com/package/react-textarea-autosize) instead  of `<textarea>` if true|
+|value|string: ""|no|initial text value for `<textarea>`|
 |className|string: ""|no|className property for `<textarea>` element|
 |searchMarker|char: "@"|no|after this symbol will be inited search and onSearch function|
-|onChange|func: () => {}|yes|function on change value in textarea|
-|onSearch|func: () => {}|yes|function after input of searchMarker into textarea|
-|onSuggestItemRender|func|no|custom function for rendering each item in suggest|
+|searchRegexp|string: /@([a-z0\d\-.]+[a-z\d])/gim|no|default RegExp to detect search phrase after searchMarker|
+|closeSuggestOnFocusOut|boolean: false|no|closes suggest on `focusout` and returns back on `focusin`|
+|cancelSearchOnFocusOut|boolean: false|no|cancelling search on `focusout`|
+|onChange|func: (event: React.ChangeEvent) => {}|no|function on change value in textarea|
+|onSearch|func: (searchPhrase: string) => {}|yes|function after input of searchMarker into textarea|
+|suggestList|array: (string OR CustomType)[]: []|no|rendering suggest when suggestList isn't empty, items rendering in customSuggestItemRenderer function|
+|customSuggestItemRenderer|func: (searchListItem: string OR CustomType) => ReactNode|no|custom function for rendering each item in suggest|
 ```
-//onSuggestItemRender
+//customSuggestItemRenderer
 
-item => 
-    <div className="textarea-suggest-item" onClick={() => this.setResult(item)}>
-        <div className="textarea-suggest-item--info">
-            <div>{item}</div>
+(item) => 
+    <div className="textarea-suggest-item" onClick={myOwnClickHandler}>
+        <div className="textarea-suggest-item__info">
+            <div>{item.name}</div>
+            <div>{item.description}</div>
         </div>
     </div>
 ```
 |||||
 |----|-------------|--------|-----------|
-|searchRegexp|string: /@([a-z0\d\-.]+[a-z\d])/gim|no||
-|suggestList|array: []|no|rendering suggest when suggestList isn't empty, items rendering in onSuggestItemRender function|
-|value|string: ""|no|text value for `<textarea>`|
 |any else params for `<textarea>`| - | - |https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes|
 
 ## Using libraries
  - "react-textarea-autosize" (optionally)
 
 ## License
-Copyright (c) 2019 Maria Lobareva Licensed under the [The MIT License (MIT)](http://opensource.org/licenses/MIT).
+Copyright (c) 2019 Mariia Lobareva Licensed under the [The MIT License (MIT)](http://opensource.org/licenses/MIT).

package/example/package.json

@@ -1,16 +1,19 @@
 {
   "name": "example",
   "version": "0.1.0",
-  "private": true,
+  "homepage": "https://marylorian.github.io/react-textarea-with-suggest/",
   "dependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-scripts": "5.0.1",
     "react-textarea-with-suggest": "latest"
   },
   "scripts": {
     "start": "react-scripts start",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "build": "react-scripts build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -31,7 +34,7 @@
     ]
   },
   "devDependencies": {
-    "lodash.once": "^4.1.1",
+    "gh-pages": "^4.0.0",
     "react-textarea-autosize": "^8.4.0"
   }
 }

package/example/src/App.css

@@ -1,5 +1,4 @@
 .example {
-  text-align: center;
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -12,4 +11,20 @@
 .example__textarea__results {
   border-radius: 4px;
   border: 1px solid;
+  background-color: white;
+}
+
+.example__textarea__custom-item {
+  cursor: pointer;
+  padding: 4px 8px;
+  font-size: 8px;
+  text-align: left;
+}
+
+.example__textarea__custom-item p {
+  margin: 0;
+}
+
+.example__textarea__custom-item:hover {
+  background-color: burlywood;
 }

package/example/src/App.js

@@ -41,32 +41,186 @@ function App() {
   return (
     <div className="example">
       <h1>TextareaWithSuggest Example</h1>
-      <p>Default</p>
-      <Textarea
-        className="example__textarea"
-        onChange={onChange}
-        onSearch={onSearch}
-        suggestList={results}
-      />
 
-      <p>Autosizable</p>
-      <Textarea
-        autosizable
-        className="example__textarea"
-        onChange={onChange}
-        onSearch={onSearch}
-        suggestList={results}
-      />
+      <div className="example__item">
+        <p>Default</p>
+        <p>
+          <code>
+            {`<Textarea
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+        />`}
+          </code>
+        </p>
+        <Textarea
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+        />
+      </div>
 
-      <p>With initial value</p>
-      <Textarea
-        autosizable
-        className="example__textarea"
-        value="Initial Value"
-        onChange={onChange}
-        onSearch={onSearch}
-        suggestList={results}
-      />
+      <div className="example__item">
+        <p>Autosizable</p>
+        <p>
+          <code>
+            {`<Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+        />`}
+          </code>
+        </p>
+        <Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+        />
+      </div>
+
+      <div className="example__item">
+        <p>With initial value</p>
+        <p>
+          <code>
+            {`<Textarea
+          autosizable
+          className="example__textarea"
+          value="Initial Value"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+        />`}
+          </code>
+        </p>
+        <Textarea
+          autosizable
+          className="example__textarea"
+          value="Initial Value"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+        />
+      </div>
+
+      <div className="example__item">
+        <p>With customSuggestItemRenderer</p>
+        <p>
+          <code>
+            {`<Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          customSuggestItemRenderer={(result, defaultOnClick) => (
+            <div
+              className="example__textarea__custom-item"
+              onClick={defaultOnClick}
+            >
+              <p>
+                Custom: <span>{result}</span>
+              </p>
+            </div>
+          )}
+        />`}
+          </code>
+        </p>
+        <Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          customSuggestItemRenderer={(result, defaultOnClick) => (
+            <div
+              className="example__textarea__custom-item"
+              onClick={defaultOnClick}
+            >
+              <p>
+                Custom: <span>{result}</span>
+              </p>
+            </div>
+          )}
+        />
+      </div>
+
+      <div className="example__item">
+        <p>With custom searchMarker "#"</p>
+        <p>
+          <code>
+            {`<Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          searchMarker="#"
+        />`}
+          </code>
+        </p>
+        <Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          searchMarker="#"
+        />
+      </div>
+
+      <div className="example__item">
+        <p>Closes suggests on focusout, returns back on focusin</p>
+        <p>
+          <code>
+            {`<Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          closeSuggestOnFocusOut
+        />`}
+          </code>
+        </p>
+        <Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          closeSuggestOnFocusOut
+        />
+      </div>
+
+      <div className="example__item">
+        <p>Cancelling search on focusout</p>
+        <p>
+          <code>
+            {`<Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          cancelSearchOnFocusOut
+        />`}
+          </code>
+        </p>
+        <Textarea
+          autosizable
+          className="example__textarea"
+          onChange={onChange}
+          onSearch={onSearch}
+          suggestList={results}
+          cancelSearchOnFocusOut
+        />
+      </div>
     </div>
   );
 }

package/lib/index.d.ts

@@ -7,18 +7,20 @@
  *
  * LICENSE MIT.
  */
-import React, { ReactNode } from "react";
+import React, { ReactNode, HTMLProps, ChangeEvent } from "react";
 import "../styles.css";
-interface TextareaSuggestProps<SuggestItemType> {
+interface TextareaSuggestProps<SuggestItemType> extends Partial<Omit<HTMLProps<HTMLTextAreaElement>, "style">> {
     className?: string;
     autosizable?: boolean;
     searchMarker?: string;
     searchRegexp?: RegExp;
     suggestList?: SuggestItemType[];
     value?: string;
-    onChange?: Function;
-    onSearch: Function;
-    customSuggestItemRenderer?: (suggestItem: SuggestItemType, defaultOnClick: (item: SuggestItemType) => void) => ReactNode;
+    closeSuggestOnFocusOut?: boolean;
+    cancelSearchOnFocusOut?: boolean;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onSearch: (newValue: string) => void;
+    customSuggestItemRenderer?: (suggestItem: SuggestItemType) => ReactNode;
 }
-declare const TextareaSuggest: <SuggestItemType extends React.ReactNode>({ autosizable, value, searchMarker, searchRegexp: searchRegexpProp, suggestList, onSearch, onChange, customSuggestItemRenderer, ...props }: TextareaSuggestProps<SuggestItemType>) => JSX.Element;
+declare const TextareaSuggest: <SuggestItemType extends React.ReactNode>({ autosizable, value, searchMarker, searchRegexp: searchRegexpProp, suggestList, closeSuggestOnFocusOut, cancelSearchOnFocusOut, onSearch, onChange, customSuggestItemRenderer, ...props }: TextareaSuggestProps<SuggestItemType>) => JSX.Element;
 export default TextareaSuggest;

package/lib/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-textarea-autosize");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(e),r=a(t),i=function(){return i=Object.assign||function(e){for(var t,a=1,n=arguments.length;a<n;a++)for(var r in t=arguments[a])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},i.apply(this,arguments)};function o(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(a[n[r]]=e[n[r]])}return a}function c(t){var a=e.useRef();return e.useEffect((function(){a.current=t}),[t]),a.current}var l=e.forwardRef((function(e,t){return n.default.createElement("textarea",i({},e,{ref:t}))}));exports.default=function(t){var a=t.autosizable,s=void 0!==a&&a,u=t.value,d=void 0===u?"":u,m=t.searchMarker,f=void 0===m?"@":m,p=t.searchRegexp,g=t.suggestList,v=void 0===g?[]:g,b=t.onSearch,h=t.onChange,w=t.customSuggestItemRenderer,k=o(t,["autosizable","value","searchMarker","searchRegexp","suggestList","onSearch","onChange","customSuggestItemRenderer"]),y=e.useState(d),x=y[0],O=y[1],E=e.useState(null==d?void 0:d.includes(f)),z=E[0],j=E[1],R=c(x),_=c(d),S=e.useRef(null),M=s?r.default:l,q=e.useMemo((function(){return p?new RegExp(p):new RegExp("".concat(f,"([a-z0-9-_.]+[a-z0-9])"),"gim")}),[p]);e.useEffect((function(){if(f.length>1)throw new TypeError("Max length of searchMarker is 1 symbol. Please change your searchMarker to char")}),[]),e.useEffect((function(){R!==d&&_!==d&&O(d)}),[x,d,R,_]);var I=function(e){var t,a,n,r,i,o,c=null===(t=S.current)||void 0===t?void 0:t.selectionEnd,l=x.slice(0,c).lastIndexOf(f),s=x.slice(l);if(-1!==l){var u=(s.includes(" ")?s.indexOf(" "):x.length)+l,d=void 0;if(s.lastIndexOf(f)>0&&(u=s.lastIndexOf(f)+l),(!u||u<l)&&(u=x.length),d=x.slice(0,l||0)+x.slice(l).replace(x.slice(l,u),"".concat(f).concat(e," ")),S.current&&(S.current.value=d,S.current.focus()),o=!1,i=navigator.userAgent||navigator.vendor||"opera"in window&&window.opera,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(i)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(i.substr(0,4)))&&(o=!0),o){var m=d.slice(l).indexOf(" ")+l+1;null===(a=S.current)||void 0===a||a.setSelectionRange(m,m)}var p=new Event("onchange",{bubbles:!0,cancelable:!1});null===(r=null===(n=S.current)||void 0===n?void 0:n.onchange)||void 0===r||r.call(n,p),j(!1),O(d)}},C=e.useCallback((function(e){var t=function(){return I(e)};return w?w(e,t):n.default.createElement("div",{className:"textarea-suggest-item",onClick:t},n.default.createElement("div",{className:"textarea-suggest-item__info"},n.default.createElement("div",null,e)))}),[I,w]),P=e.useMemo((function(){var t;if(z&&v&&v.length&&S.current){var a=null===(t=S.current)||void 0===t?void 0:t.getBoundingClientRect(),r=a.width,i=a.left;return n.default.createElement("div",{className:"textarea-suggest__results ".concat(k.className,"__results"),style:{position:"absolute",width:r,left:i}},v.map((function(t,a){return n.default.createElement(e.Fragment,{key:t&&"object"==typeof t&&"id"in t?t.id:a},C(t))})))}return null}),[z,v,S]);return n.default.createElement("div",{className:"textarea-suggest"},n.default.createElement(M,i({},k,{ref:S,onChange:function(e){var t,a=o(e,[]),n=a.currentTarget,r=void 0===n?{}:n,c=a.isTrusted,l=void 0===c||c,s=r.value,u=void 0===s?x:s,d=null===(t=S.current)||void 0===t?void 0:t.selectionEnd,m=d?u.slice(d-1,d):u.slice(-1);if(O(u),m===f&&j(!0),u.includes(f)&&![" ","\n","\r"].includes(m)||!z||j(!1),m!==f&&z){var p=u.slice(0,d),g=p.slice(p.lastIndexOf(f)).match(q),v=g?g[0].slice(1):m;b(v)}return l?null==h?void 0:h(a):null==h?void 0:h(i(i({},a),{currentTarget:S.current,target:S.current}))},value:x||d})),P)};
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-textarea-autosize");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e),r=n(t),o=function(){return o=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},o.apply(this,arguments)};function i(t){var n=e.useRef();return e.useEffect((function(){n.current=t}),[t]),n.current}var c=function(t){var n=t.textareaRef,r=t.values,o=void 0===r?[]:r,i=t.isHidden,c=t.className,l=t.customSuggestItemRenderer,u=t.onItemClickHandler;if(i||!(null==o?void 0:o.length)||!n.current)return null;var s=e.useMemo((function(){var e;return(null===(e=n.current)||void 0===e?void 0:e.getBoundingClientRect())||{}}),[n.current]),d=s.width,m=void 0===d?0:d,f=s.left,v=void 0===f?0:f,g=e.useCallback((function(t){return l?a.default.createElement(e.Fragment,{onMouseDown:u(t)},l(t)):a.default.createElement("div",{className:"textarea-suggest-item",onMouseDown:u(t)},a.default.createElement("div",{className:"textarea-suggest-item__info"},a.default.createElement("div",null,t)))}),[u,l]);return a.default.createElement("div",{className:"textarea-suggest__results ".concat(c?"".concat(c,"__results"):""),style:{position:"absolute",width:m,left:v}},o.map((function(t,n){return a.default.createElement(e.Fragment,{key:n},g(t))})))},l=e.forwardRef((function(e,t){return a.default.createElement("textarea",o({},e,{ref:t}))}));exports.default=function(t){var n=t.autosizable,u=void 0!==n&&n,s=t.value,d=void 0===s?"":s,m=t.searchMarker,f=void 0===m?"@":m,v=t.searchRegexp,g=t.suggestList,p=void 0===g?[]:g,b=t.closeSuggestOnFocusOut,h=void 0!==b&&b,w=t.cancelSearchOnFocusOut,k=void 0!==w&&w,x=t.onSearch,y=t.onChange,O=t.customSuggestItemRenderer,E=function(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(n[a[r]]=e[a[r]])}return n}(t,["autosizable","value","searchMarker","searchRegexp","suggestList","closeSuggestOnFocusOut","cancelSearchOnFocusOut","onSearch","onChange","customSuggestItemRenderer"]),S=e.useState(d),z=S[0],R=S[1],j=e.useState(null==d?void 0:d.includes(f)),I=j[0],_=j[1],C=e.useState(!0),M=C[0],F=C[1],q=i(z),N=i(d),P=e.useRef(null),T=u?r.default:l,B=e.useMemo((function(){return v?new RegExp(v):new RegExp("".concat(f,"([a-z0-9-_.]+[a-z0-9])"),"gim")}),[v]);e.useEffect((function(){if(f.length>1)throw new TypeError("Max length of searchMarker is 1 symbol. Please change your searchMarker to char")}),[]),e.useEffect((function(){q!==d&&N!==d&&R(d)}),[z,d,q,N]);var H=e.useCallback((function(e){return setTimeout((function(){var t;h&&F(!0),k&&_(!1),null===(t=E.onBlur)||void 0===t||t.call(E,e)}),0)}),[h,k,E.onBlur]),D=e.useCallback((function(e){var t;M&&F(!1),null===(t=E.onFocus)||void 0===t||t.call(E,e)}),[h,k,E.onFocus]),L=e.useCallback((function(e){return function(){var t,n,a,r,o=null===(t=P.current)||void 0===t?void 0:t.selectionEnd,i=z.slice(0,o).lastIndexOf(f),c=z.slice(i);if(-1!==i){var l=(c.includes(" ")?c.indexOf(" "):z.length)+i,u=void 0;if(c.lastIndexOf(f)>0&&(l=c.lastIndexOf(f)+i),(!l||l<i)&&(l=z.length),u=z.slice(0,i||0)+z.slice(i).replace(z.slice(i,l),"".concat(f).concat(e," ")),P.current&&(P.current.value=u,P.current.focus()),function(){if("undefined"==typeof navigator||"undefined"==typeof window)return!1;var e,t=!1;return e=navigator.userAgent||navigator.vendor||"opera"in window&&window.opera,(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(e.substr(0,4)))&&(t=!0),t}()){var s=u.slice(i).indexOf(" ")+i+1;null===(n=P.current)||void 0===n||n.setSelectionRange(s,s)}var d=new Event("onchange",{bubbles:!0,cancelable:!1});null===(r=null===(a=P.current)||void 0===a?void 0:a.onchange)||void 0===r||r.call(a,d),_(!1),R(u)}}}),[P,z]);return a.default.createElement("div",{className:"textarea-suggest"},a.default.createElement(T,o({},E,{onBlur:H,onFocus:D,ref:P,onChange:function(e){var t,n=e.currentTarget.value,a=void 0===n?z:n,r=e.isTrusted,i=void 0===r||r,c=null===(t=P.current)||void 0===t?void 0:t.selectionEnd,l=c?a.slice(c-1,c):a.slice(-1);if(R(a),l===f&&_(!0),a.includes(f)&&![" ","\n","\r"].includes(l)||!I||_(!1),l!==f&&I){var u=a.slice(0,c),s=u.slice(u.lastIndexOf(f)).match(B),d=s?s[0].slice(1):l;x(d)}return i?null==y?void 0:y(e):null==y?void 0:y(o(o({},e),{currentTarget:P.current,target:P.current}))},value:z||d})),a.default.createElement(c,{className:E.className,textareaRef:P,values:p,isHidden:M||!I,customSuggestItemRenderer:O,onItemClickHandler:L}))};
 //# sourceMappingURL=index.js.map

package/lib/suggest.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode, RefObject } from "react";
+import { Nullable } from "./utils";
+interface SuggestProps<T> {
+    className?: string;
+    textareaRef: RefObject<Nullable<HTMLTextAreaElement>>;
+    values: T[];
+    isHidden?: boolean;
+    onItemClickHandler: (item: T) => () => void;
+    customSuggestItemRenderer?: (item: T) => ReactNode;
+}
+export declare const SuggestResults: <T extends React.ReactNode>({ textareaRef, values, isHidden, className, customSuggestItemRenderer, onItemClickHandler, }: SuggestProps<T>) => JSX.Element | null;
+export {};

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "react-textarea-with-suggest",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Textarea with suggest for React app",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "dependencies": {
-    "react-scripts": "^5.0.1",
     "react-textarea-autosize": "^8.4.0"
   },
   "files": [
@@ -16,8 +15,7 @@
     "prettier": "prettier --write .",
     "build:debug": "npm install && npm run build && rm -rf node_modules",
     "build": "rollup -c",
-    "start": "rollup -c -w",
-    "build:old": "npm run prettier && babel --extensions .tsx ./src -d ./lib --source-maps && cp ./src/index.d.ts ./lib"
+    "start": "rollup -c -w"
   },
   "license": "MIT",
   "eslintConfig": {
@@ -80,15 +78,12 @@
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-terser": "^0.2.1",
     "@rollup/plugin-typescript": "^10.0.1",
-    "@types/lodash.once": "^4.1.7",
     "@types/react": "^18.0.26",
-    "babel-core": "^6.26.3",
     "babel-loader": "^8.0.6",
     "css-loader": "^6.7.3",
     "prettier": "2.7.1",
     "rollup": "^2.79.1",
     "rollup-plugin-css-only": "^4.3.0",
-    "terser": "^5.16.1",
     "typescript": "^4.9.4",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",