react-textarea-with-suggest 2.1.4 → 2.3.0

package/README.md

@@ -1,7 +1,13 @@
 # react-textarea-with-suggest
 Textarea with suggest for React app v2
 
-[![npm version](https://badge.fury.io/js/react-textarea-with-suggest.svg)](https://badge.fury.io/js/react-textarea-with-suggest)
+[![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/marylorian/react-textarea-with-suggest/master?label=latest%20version)](https://www.npmjs.com/package/react-textarea-with-suggest)
+![NPM](https://img.shields.io/npm/l/react-textarea-with-suggest)
+![npm type definitions](https://img.shields.io/npm/types/react-textarea-with-suggest)
+![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-textarea-with-suggest/peer/react)
+![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-textarea-with-suggest/peer/react-dom)
+![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-textarea-with-suggest/latest)
+![Server Side Rendering](https://img.shields.io/badge/SSR-supported-green)
 
 ### Last changes
 [You can find in CHANGELOG.md](./CHANGELOG.md)
@@ -82,7 +88,7 @@ export default class MyApp extends React.Component {
 |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|
+|customSuggestItemRenderer|func: (searchListItem: string OR CustomType, isSelected: boolean) => ReactNode|no|custom function for rendering each item in suggest, second argument is true if user navigates through items by keyboard and stops on current element|
 ```
 //customSuggestItemRenderer
 

package/example/src/App.css

@@ -25,7 +25,8 @@
   margin: 0;
 }
 
-.example__textarea__custom-item:hover {
+.example__textarea__custom-item:hover,
+.example__textarea__results__item_selected {
   background-color: burlywood;
 }
 

package/example/src/App.js

@@ -63,7 +63,22 @@ function App() {
 
   return (
     <div className="example">
-      <h1>TextareaWithSuggest Example</h1>
+      <h1>Textarea With Suggest Example page</h1>
+
+      <p>
+        You can check <code>react-textarea-with-suggest</code> npm page{" "}
+        <a
+          href="https://www.npmjs.com/package/react-textarea-with-suggest"
+          target="_blank"
+          rel="noreferrer"
+        >
+          here
+        </a>
+      </p>
+      <p>
+        You can check <code>onChange</code> and <code>onSearch</code> firing in
+        your Browser console
+      </p>
 
       <ExampleItem
         title="Default"

package/lib/components/NativeTextarea.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NativeTextarea: React.ForwardRefExoticComponent<Pick<React.HTMLProps<HTMLTextAreaElement>, "value" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLTextAreaElement>>;

package/lib/components/SuggestResults.d.ts

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

package/lib/components/SuggestResultsItem.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CustomSuggestItemRenderer, OnItemClickHandler } from "../types";
+interface SuggestResultsItemProps<T> {
+    item: T;
+    isSelected: boolean;
+    className?: string;
+    customSuggestItemRenderer?: CustomSuggestItemRenderer<T>;
+    onItemClickHandler: OnItemClickHandler<T>;
+}
+export declare const SuggestResultsItem: React.MemoExoticComponent<(<T>({ isSelected, item: itemProp, className, customSuggestItemRenderer, onItemClickHandler, }: SuggestResultsItemProps<T>) => JSX.Element)>;
+export {};

package/lib/components/TextareaWithSuggests.d.ts

@@ -0,0 +1,26 @@
+/**
+ * React textarea with suggest v2.0.0
+ *
+ *
+ * Copyright (c) 2019-present,
+ * by Mariia Lobareva (marialobareva97@gmail.com).
+ *
+ * LICENSE MIT.
+ */
+import React, { HTMLProps, ChangeEvent } from "react";
+import { CustomSuggestItemRenderer } from "../types";
+interface TextareaSuggestProps<SuggestItemType> extends Partial<Omit<HTMLProps<HTMLTextAreaElement>, "style">> {
+    className?: string;
+    autosizable?: boolean;
+    searchMarker?: string;
+    searchRegexp?: RegExp;
+    suggestList?: SuggestItemType[];
+    value?: string;
+    closeSuggestOnFocusOut?: boolean;
+    cancelSearchOnFocusOut?: boolean;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onSearch: (newValue: string) => void;
+    customSuggestItemRenderer?: CustomSuggestItemRenderer<SuggestItemType>;
+}
+export declare const TextareaWithSuggests: <SuggestItemType extends React.ReactNode>({ autosizable, value, searchMarker, searchRegexp: searchRegexpProp, suggestList, closeSuggestOnFocusOut, cancelSearchOnFocusOut, onSearch, onChange, customSuggestItemRenderer, ...props }: TextareaSuggestProps<SuggestItemType>) => JSX.Element;
+export {};

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export { NativeTextarea } from "./NativeTextarea";
+export { SuggestResults } from "./SuggestResults";

package/lib/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum KeyCodes {
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    Enter = "Enter",
+    Escape = "Escape"
+}
+export declare const SUPPORTED_KEYDOWN: KeyCodes[];
+export declare const SEARCH_MARKER = "@";
+export declare const ENDING_SYMBOLS: string[];

package/lib/index.d.ts

@@ -1,25 +1,2 @@
-/**
- * React textarea with suggest v2.0.0
- *
- *
- * Copyright (c) 2019-present,
- * by Mariia Lobareva (marialobareva97@gmail.com).
- *
- * LICENSE MIT.
- */
-import React, { ReactNode, HTMLProps, ChangeEvent } from "react";
-interface TextareaSuggestProps<SuggestItemType> extends Partial<Omit<HTMLProps<HTMLTextAreaElement>, "style">> {
-    className?: string;
-    autosizable?: boolean;
-    searchMarker?: string;
-    searchRegexp?: RegExp;
-    suggestList?: SuggestItemType[];
-    value?: string;
-    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, closeSuggestOnFocusOut, cancelSearchOnFocusOut, onSearch, onChange, customSuggestItemRenderer, ...props }: TextareaSuggestProps<SuggestItemType>) => JSX.Element;
-export default TextareaSuggest;
+import { TextareaWithSuggests } from "./components/TextareaWithSuggests";
+export default TextareaWithSuggests;

package/lib/index.js

@@ -1,2 +1,2 @@
-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 r=n(e),a=n(t),o=function(){return o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},o.apply(this,arguments)};function i(t){var n=e.useRef();return e.useEffect((function(){n.current=t}),[t]),n.current}function u(){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 l=function(e){var t=!1,n=!1;return{nativeEvent:e,currentTarget:e.currentTarget,target:e.target,bubbles:e.bubbles,cancelable:e.cancelable,defaultPrevented:e.defaultPrevented,eventPhase:e.eventPhase,isTrusted:e.isTrusted,preventDefault:function(){t=!0,e.preventDefault()},isDefaultPrevented:function(){return t},stopPropagation:function(){n=!0,e.stopPropagation()},isPropagationStopped:function(){return n},persist:function(){},timeStamp:e.timeStamp,type:e.type}},c=function(t){var n=t.textareaRef,a=t.values,o=void 0===a?[]:a,i=t.isHidden,l=t.className,c=t.customSuggestItemRenderer,s=t.onItemClickHandler;if(i||!(null==o?void 0:o.length)||!n.current)return null;var d=e.useMemo((function(){var e;return(null===(e=n.current)||void 0===e?void 0:e.getBoundingClientRect())||{}}),[n.current]),v=d.width,f=void 0===v?0:v,m=d.left,p=void 0===m?0:m,g=u(),b=e.useCallback((function(e){return c?r.default.createElement("div",{className:"textarea-suggest-item",onMouseDown:g?void 0:s(e),onTouchStart:g?s(e):void 0},c(e)):r.default.createElement("div",{className:"textarea-suggest-item",onMouseDown:g?void 0:s(e),onTouchStart:g?s(e):void 0},r.default.createElement("div",{className:"textarea-suggest-item__info"},r.default.createElement("div",null,e)))}),[s,c]);return r.default.createElement("div",{className:"textarea-suggest__results ".concat(l?"".concat(l,"__results"):""),style:{position:"absolute",width:f,left:p}},o.map((function(t,n){return r.default.createElement(e.Fragment,{key:n},b(t))})))},s=e.forwardRef((function(e,t){return r.default.createElement("textarea",o({},e,{ref:t}))}));exports.default=function(t){var n=t.autosizable,d=void 0!==n&&n,v=t.value,f=void 0===v?"":v,m=t.searchMarker,p=void 0===m?"@":m,g=t.searchRegexp,b=t.suggestList,h=void 0===b?[]:b,w=t.closeSuggestOnFocusOut,y=void 0!==w&&w,k=t.cancelSearchOnFocusOut,x=void 0!==k&&k,O=t.onSearch,E=t.onChange,S=t.customSuggestItemRenderer,P=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["autosizable","value","searchMarker","searchRegexp","suggestList","closeSuggestOnFocusOut","cancelSearchOnFocusOut","onSearch","onChange","customSuggestItemRenderer"]),j=e.useState(f),z=j[0],R=j[1],T=e.useState(null==f?void 0:f.includes(p)),I=T[0],_=T[1],C=e.useState(!0),M=C[0],F=C[1],N=i(z),q=i(f),D=e.useRef(null),B=d?a.default:s,H=e.useMemo((function(){return g?new RegExp(g):new RegExp("".concat(p,"([a-z0-9-_.]+[a-z0-9])"),"gim")}),[g]);e.useEffect((function(){if(p.length>1)throw new TypeError("Max length of searchMarker is 1 symbol. Please change your searchMarker to char")}),[]),e.useEffect((function(){f&&N!==f&&q!==f&&(R(f),G(void 0,f))}),[z,f,N,q]);var L=e.useCallback((function(e){var t;y&&F(!0),x&&_(!1),null===(t=P.onBlur)||void 0===t||t.call(P,e)}),[y,x,P.onBlur]),A=e.useCallback((function(e){var t;M&&F(!1),null===(t=P.onFocus)||void 0===t||t.call(P,e)}),[y,x,P.onFocus]),G=function(e,t){var n,r,a;void 0===t&&(t="");var i=e?void 0===(null===(n=e.currentTarget)||void 0===n?void 0:n.value)?z:(null===(r=e.currentTarget)||void 0===r?void 0:r.value)||"":t,u=!!e&&(void 0===e.isTrusted||e.isTrusted),c=null===(a=D.current)||void 0===a?void 0:a.selectionEnd,s=c?i.slice(c-1,c):i.slice(-1);if(R(i),s===p&&(t&&F(!1),_(!0)),i.includes(p)&&![" ","\n","\r"].includes(s)||!I||_(!1),s!==p&&I){var d=i.slice(0,c),v=d.slice(d.lastIndexOf(p)).match(H),f=v?v[0].slice(1):s;O(f)}if(!e&&D.current&&(D.current.value=i),e&&u)return null==E?void 0:E(e);if(e&&!u)return null==E?void 0:E(o(o({},e),{currentTarget:D.current,target:D.current}));var m=function(e,t){var n=new Event("change",{bubbles:!0});return Object.defineProperty(n,"target",{writable:!1,value:e}),l(n)}(D.current);return null==E?void 0:E(m)},J=e.useCallback((function(e){return function(){var t,n,r=null===(t=D.current)||void 0===t?void 0:t.selectionEnd,a=z.slice(0,r).lastIndexOf(p),o=z.slice(a);if(-1!==a){var i=(o.includes(" ")?o.indexOf(" "):z.length)+a;o.lastIndexOf(p)>0&&(i=o.lastIndexOf(p)+a),(!i||i<a)&&(i=z.length);var l=z.slice(0,a||0)+z.slice(a).replace(z.slice(a,i),"".concat(p).concat(e," "));if(u()){var c=l.slice(a).indexOf(" ")+a+1;null===(n=D.current)||void 0===n||n.setSelectionRange(c,c)}D.current&&(!function(e,t){var n,r,a=null===(n=Object.getOwnPropertyDescriptor(e,"value"))||void 0===n?void 0:n.set,o=Object.getPrototypeOf(e),i=null===(r=Object.getOwnPropertyDescriptor(o,"value"))||void 0===r?void 0:r.set;a&&a!==i?null==i||i.call(e,t):null==a||a.call(e,t),e.dispatchEvent(new Event("input",{bubbles:!0}))}(D.current,l),setTimeout((function(){var e;return null===(e=D.current)||void 0===e?void 0:e.focus()}))),_(!1),R(l)}}}),[D,z]);return r.default.createElement("div",{className:"textarea-suggest"},r.default.createElement(B,o({},P,{onBlur:L,onFocus:A,ref:D,onChange:G,value:z||f})),r.default.createElement(c,{className:P.className,textareaRef:D,values:h,isHidden:M||!I,customSuggestItemRenderer:S,onItemClickHandler:J}))};
+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 r=n(e),a=n(t),o=function(){return o=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);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,l=function(e){var t=!1,n=!1;return{nativeEvent:e,currentTarget:e.currentTarget,target:e.target,bubbles:e.bubbles,cancelable:e.cancelable,defaultPrevented:e.defaultPrevented,eventPhase:e.eventPhase,isTrusted:e.isTrusted,preventDefault:function(){t=!0,e.preventDefault()},isDefaultPrevented:function(){return t},stopPropagation:function(){n=!0,e.stopPropagation()},isPropagationStopped:function(){return n},persist:function(){},timeStamp:e.timeStamp,type:e.type}},u=e.forwardRef((function(e,t){return r.default.createElement("textarea",o({},e,{ref:t}))})),s=r.default.memo((function(t){var n=t.isSelected,a=t.item,o=t.className,i=t.customSuggestItemRenderer,c=t.onItemClickHandler,l=e.useRef(!1),u=a,s=["textarea-suggest-item",n?"textarea-suggest-item_selected":"",o?"".concat(o,"__results__item"):"",n&&o?"".concat(o,"__results__item_selected"):""].filter(Boolean).join(" ");return r.default.createElement("div",{className:s,onMouseDown:function(e){if(l.current)return e.preventDefault(),e.stopPropagation(),void(l.current=!1);c(u)()},onTouchStart:function(e){l.current=!0,e.stopPropagation(),c(u)()}},i?i(u,n):r.default.createElement("div",{className:"textarea-suggest-item__info"},u))})),d=function(t){var n=t.textareaRef,a=t.values,o=void 0===a?[]:a,i=t.isHidden,c=t.className,l=t.selectedItemIndex,u=t.customSuggestItemRenderer,d=t.onItemClickHandler,v=e.useMemo((function(){var e,t;return(null===(t=null===(e=null==n?void 0:n.current)||void 0===e?void 0:e.getBoundingClientRect)||void 0===t?void 0:t.call(e))||{}}),[null==n?void 0:n.current]),f=v.width,p=void 0===f?0:f,m=v.left,g=void 0===m?0:m;return!i&&(null==o?void 0:o.length)&&(null==n?void 0:n.current)?r.default.createElement("div",{className:"textarea-suggest__results ".concat(c?"".concat(c,"__results"):""),style:{position:"absolute",width:p,left:g}},o.map((function(e,t){return r.default.createElement(s,{key:t,className:c,item:e,isSelected:t===l,onItemClickHandler:d,customSuggestItemRenderer:u})}))):null};!function(e){e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Enter="Enter",e.Escape="Escape"}(c||(c={}));var v=[c.ArrowUp,c.ArrowDown,c.Enter,c.Escape],f=[" ","\n","\r"];exports.default=function(t){var n=t.autosizable,s=void 0!==n&&n,p=t.value,m=void 0===p?"":p,g=t.searchMarker,b=void 0===g?"@":g,w=t.searchRegexp,h=t.suggestList,y=void 0===h?[]:h,k=t.closeSuggestOnFocusOut,x=void 0!==k&&k,O=t.cancelSearchOnFocusOut,E=void 0!==O&&O,S=t.onSearch,P=t.onChange,_=t.customSuggestItemRenderer,I=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(t,["autosizable","value","searchMarker","searchRegexp","suggestList","closeSuggestOnFocusOut","cancelSearchOnFocusOut","onSearch","onChange","customSuggestItemRenderer"]),j=e.useState(m),R=j[0],D=j[1],z=e.useState(null==m?void 0:m.includes(b)),C=z[0],T=z[1],A=e.useState(!0),M=A[0],N=A[1],q=e.useState(void 0),F=q[0],H=q[1],B=i(R),U=i(m),K=e.useRef(null),L=s?a.default:u,G=e.useMemo((function(){return w?new RegExp(w):new RegExp("".concat(b,"([a-z0-9-_.]+[a-z0-9])"),"gim")}),[w]);e.useEffect((function(){if(b.length>1)throw new TypeError("Max length of searchMarker is 1 symbol. Please change your searchMarker to char")}),[]),e.useEffect((function(){m&&B!==m&&U!==m&&(D(m),W(void 0,m))}),[R,m,B,U]);var J=e.useCallback((function(e){var t,n=e.code,r=C&&!M&&y.length;if(null===(t=I.onKeyDown)||void 0===t||t.call(I,e),r&&v.includes(n))switch(e.stopPropagation(),e.nativeEvent.stopImmediatePropagation(),n){case c.ArrowUp:return e.preventDefault(),H((function(e){return void 0===e||0===e?y.length-1:e-1}));case c.ArrowDown:return e.preventDefault(),H((function(e){return void 0===e||e===y.length-1?0:e+1}));case c.Enter:return void(void 0!==F&&(e.preventDefault(),X(y[F])()));case c.Escape:T(!1),H(void 0)}}),[I.onKeyDown,F,y,C,M]),Q=e.useCallback((function(e){var t;x&&N(!0),E&&T(!1),null===(t=I.onBlur)||void 0===t||t.call(I,e)}),[x,E,I.onBlur]),V=e.useCallback((function(e){var t;M&&N(!1),null===(t=I.onFocus)||void 0===t||t.call(I,e)}),[x,E,I.onFocus]),W=function(e,t){var n,r,a;void 0===t&&(t="");var i=e?void 0===(null===(n=e.currentTarget)||void 0===n?void 0:n.value)?R:(null===(r=e.currentTarget)||void 0===r?void 0:r.value)||"":t,c=!!e&&(void 0===e.isTrusted||e.isTrusted),u=null===(a=K.current)||void 0===a?void 0:a.selectionEnd,s=u?i.slice(u-1,u):i.slice(-1);if(D(i),s===b&&(t&&N(!1),T(!0)),i.includes(b)&&!f.includes(s)||!C||T(!1),s!==b&&C){var d=i.slice(0,u),v=d.slice(d.lastIndexOf(b)).match(G),p=v?v[0].slice(1):s;S(p)}if(!e&&K.current&&(K.current.value=i),e&&c)return null==P?void 0:P(e);if(e&&!c)return null==P?void 0:P(o(o({},e),{currentTarget:K.current,target:K.current}));var m=function(e,t){var n=new Event("change",{bubbles:!0});return Object.defineProperty(n,"target",{writable:!1,value:e}),l(n)}(K.current);return null==P?void 0:P(m)},X=e.useCallback((function(e){return function(){var t,n,r=null===(t=K.current)||void 0===t?void 0:t.selectionEnd,a=R.slice(0,r).lastIndexOf(b),o=R.slice(a);if(-1!==a){var i=(o.includes(" ")?o.indexOf(" "):R.length)+a;o.lastIndexOf(b)>0&&(i=o.lastIndexOf(b)+a),(!i||i<a)&&(i=R.length);var c=R.slice(0,a||0)+R.slice(a).replace(R.slice(a,i),"".concat(b).concat(e," "));if(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|tablet|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/gi.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 l=c.slice(a).indexOf(" ")+a+1;null===(n=K.current)||void 0===n||n.setSelectionRange(l,l)}K.current&&(!function(e,t){var n,r,a=null===(n=Object.getOwnPropertyDescriptor(e,"value"))||void 0===n?void 0:n.set,o=Object.getPrototypeOf(e),i=null===(r=Object.getOwnPropertyDescriptor(o,"value"))||void 0===r?void 0:r.set;a&&a!==i?null==i||i.call(e,t):null==a||a.call(e,t),e.dispatchEvent(new Event("input",{bubbles:!0}))}(K.current,c),setTimeout((function(){var e;return null===(e=K.current)||void 0===e?void 0:e.focus()}))),H(void 0),T(!1),D(c)}}}),[K,R]);return r.default.createElement("div",{className:"textarea-suggest"},r.default.createElement(L,o({},I,{onKeyDown:J,onBlur:Q,onFocus:V,ref:K,onChange:W,value:R||m})),r.default.createElement(d,{className:I.className,textareaRef:K,values:y,selectedItemIndex:F,isHidden:M||!C,customSuggestItemRenderer:_,onItemClickHandler:X}))};
 //# sourceMappingURL=index.js.map

package/lib/styles.css

@@ -25,7 +25,8 @@
 .textarea-suggest-item:last-child {
   padding-bottom: 8px;
 }
-.textarea-suggest-item:hover {
+.textarea-suggest-item:hover,
+.textarea-suggest-item_selected {
   background-color: #f2f3f9;
 }
 .textarea-suggest-item--info {

package/lib/types.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from "react";
+export type Nullable<T> = T | null;
+export type CustomSuggestItemRenderer<T> = (item: T, isSelected?: boolean) => ReactNode;
+export type OnItemClickHandler<T> = (item: T) => () => void;

package/lib/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { usePrevious } from "./usePrevious";
+export { isMobileAndTabletCheck } from "./isMobileAndTabletCheck";
+export { setNativeValue } from "./nativeEvents";
+export { createSyntheticEvent, createSyntheticEventByTarget, } from "./syntheticEvents";

package/lib/utils/isMobileAndTabletCheck.d.ts

@@ -0,0 +1,5 @@
+/**
+ * from http://detectmobilebrowsers.com/
+ * https://www.quirksmode.org/js/detect.html
+ */
+export declare function isMobileAndTabletCheck(): boolean;

package/lib/utils/nativeEvents.d.ts

@@ -0,0 +1,5 @@
+/**
+ * dispatching syntetic events no longer supported by react
+ * https://github.com/facebook/react/issues/12344
+ */
+export declare function setNativeValue(element: Element, value: string): void;

package/lib/utils/syntheticEvents.d.ts

@@ -0,0 +1,3 @@
+import { SyntheticEvent } from "react";
+export declare const createSyntheticEventByTarget: <T extends Element>(target: T, eventType?: string) => SyntheticEvent<T, Event>;
+export declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => SyntheticEvent<T, E>;

package/lib/utils/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-textarea-with-suggest",
-  "version": "2.1.4",
+  "version": "2.3.0",
   "description": "Textarea with suggest for React app",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -15,7 +15,9 @@
     "prettier": "prettier --write .",
     "build:debug": "npm install && npm run build && rm -rf node_modules",
     "build": "rollup -c",
-    "start": "rollup -c -w"
+    "start": "rollup -c -w",
+    "deploy:demo": "cd ./example && rm -rf node_modules && rm package-lock.json && npm i && npm run deploy && cd ../",
+    "test": "jest --coverage --"
   },
   "license": "MIT",
   "eslintConfig": {
@@ -36,7 +38,7 @@
   "bugs": {
     "url": "https://github.com/marylorian/react-textarea-with-suggest/issues"
   },
-  "homepage": "https://github.com/marylorian/react-textarea-with-suggest#readme",
+  "homepage": "https://marylorian.github.io/react-textarea-with-suggest/",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -56,12 +58,7 @@
       "@babel/preset-typescript"
     ],
     "plugins": [
-      [
-        "@babel/plugin-proposal-class-properties",
-        {
-          "loose": true
-        }
-      ]
+      "@babel/plugin-proposal-class-properties"
     ]
   },
   "peerDependencies": {
@@ -78,9 +75,13 @@
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-terser": "^0.2.1",
     "@rollup/plugin-typescript": "^10.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.26",
     "babel-loader": "^8.0.6",
     "css-loader": "^6.7.3",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "prettier": "2.7.1",
     "rollup": "^2.79.1",
     "rollup-plugin-css-only": "^4.3.0",

package/lib/suggest.d.ts

@@ -1,12 +0,0 @@
-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/lib/utils.d.ts

@@ -1,11 +0,0 @@
-import { SyntheticEvent } from "react";
-export type Nullable<T> = T | null;
-export declare function usePrevious<T>(value: T): T | undefined;
-export declare function isMobileAndTabletCheck(): boolean;
-/**
- * syntetic events no longer supported by react
- * https://github.com/facebook/react/issues/12344
- */
-export declare function setNativeValue(element: Element, value: string): void;
-export declare const createSyntheticEventByTarget: <T extends Element>(target: T, eventType?: string) => SyntheticEvent<T, Event>;
-export declare const createSyntheticEvent: <T extends Element, E extends Event>(event: E) => SyntheticEvent<T, E>;