react-tag-autocomplete - npm Package Compare versions

Comparing version 7.0.0-beta.4 to 7.0.0-beta.5

dist/ReactTags.es.js

@@ -140,3 +140,4 @@ var __defProp = Object.defineProperty;
 const NoOptionsValue = Symbol("No options");
-const DisableAutoComplete = {
+const VoidFn = () => void 0;
+const DisableAutoCompleteAttrs = {
   autoComplete: "off",
@@ -147,3 +148,2 @@ autoCorrect: "off",
 };
-const VoidFn = () => void 0;
 function useInput({
@@ -162,6 +162,2 @@ allowBackspace,
     };
-    const onSelectKey = (e) => {
-      e.preventDefault();
-      onSelect();
-    };
     const onDownArrowKey = (e) => {
@@ -195,2 +191,8 @@ if (manager.state.isExpanded) {
     };
+    const onEnterKey = (e) => {
+      if (manager.state.isExpanded) {
+        e.preventDefault();
+        onSelect();
+      }
+    };
     const onEscapeKey = () => {
@@ -205,8 +207,16 @@ if (manager.state.isExpanded) {
     const onBackspaceKey = () => {
-      const isEmpty = manager.state.value === "";
-      const lastTag = manager.state.selected[manager.state.selected.length - 1];
-      if (isEmpty && lastTag) {
-        onSelect(lastTag);
+      if (allowBackspace) {
+        const isEmpty = manager.state.value === "";
+        const lastTag = manager.state.selected[manager.state.selected.length - 1];
+        if (isEmpty && lastTag) {
+          onSelect(lastTag);
+        }
       }
     };
+    const onTabKey = (e) => {
+      if (allowTab && manager.state.isExpanded) {
+        e.preventDefault();
+        onSelect();
+      }
+    };
     const onKeyDown = (e) => {
@@ -222,9 +232,9 @@ if (e.key === KeyNames.UpArrow)
       if (e.key === KeyNames.Enter)
-        return onSelectKey(e);
+        return onEnterKey(e);
       if (e.key === KeyNames.Escape)
         return onEscapeKey();
-      if (e.key === KeyNames.Backspace && allowBackspace)
+      if (e.key === KeyNames.Backspace)
         return onBackspaceKey();
-      if (e.key === KeyNames.Tab && allowTab)
-        return onSelectKey(e);
+      if (e.key === KeyNames.Tab)
+        return onTabKey(e);
     };
@@ -234,3 +244,3 @@ return { onChange, onKeyDown };
   const { activeOption, isExpanded, value } = manager.state;
-  return __spreadProps(__spreadValues({}, DisableAutoComplete), {
+  return __spreadProps(__spreadValues({}, DisableAutoCompleteAttrs), {
     "aria-autocomplete": "list",
@@ -577,3 +587,3 @@ "aria-activedescendant": activeOption ? optionId(id, activeOption) : null,
 function usePrevious(value) {
-  const ref = useRef();
+  const ref = useRef(value);
   useEffect(() => {
@@ -638,3 +648,3 @@ ref.current = value;
   const { selected } = manager.state;
-  const prevSelected = usePrevious(selected) || selected;
+  const prevSelected = usePrevious(selected);
   const logsRef = useRef([]);
@@ -641,0 +651,0 @@ selected.forEach((tag) => {

dist/ReactTags.umd.js

@@ -1,2 +0,2 @@
-var ot=Object.defineProperty,st=Object.defineProperties;var at=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable;var X=(d,s,m)=>s in d?ot(d,s,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[s]=m,f=(d,s)=>{for(var m in s||(s={}))Y.call(s,m)&&X(d,m,s[m]);if(_)for(var m of _(s))Z.call(s,m)&&X(d,m,s[m]);return d},x=(d,s)=>st(d,at(s));var M=(d,s)=>{var m={};for(var r in d)Y.call(d,r)&&s.indexOf(r)<0&&(m[r]=d[r]);if(d!=null&&_)for(var r of _(d))s.indexOf(r)<0&&Z.call(d,r)&&(m[r]=d[r]);return m};(function(d,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(d=typeof globalThis!="undefined"?globalThis:d||self,s(d.ReactTags={},d.React))})(this,function(d,s){"use strict";function m(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var r=m(s);function ee(e){return e.selectionStart===0&&e.selectionEnd===0}function te(e){const t=e.value.length;return e.selectionStart===t&&e.selectionEnd===t}function lt(e){return e}function T(e){return`${e}-label`}function ne(e){return`${e}-combobox`}function oe(e){return`${e}-input`}function q(e){return`${e}-listbox`}function H(e,t){return`${e}-option-${le(t)}`}const se=/%value%/;function O(e,t){return e.replace(se,t)}const ae=/\s+/g;function D(e){return`${String(e.value)}-${e.label}`}function le(e){return D(e).replace(ae,"_")}function S(e,t){return t.findIndex(({value:n})=>n===e.value)}const re=/[-\\^$*+?.()|[\]{}]/g;function G(e){return e.replace(re,"\\$&")}function R(e){return new RegExp(`${G(e)}`,"i")}function ue(e){return new RegExp(`^${G(e)}$`,"i")}function ie(e){const t=R(e);return n=>t.test(n)}function ce(e){const t=ue(e);return n=>t.test(n)}function de(e,t){const n=ie(e);return t.filter(o=>n(o.label))}function pe(e,t){const n=ce(e);return t.find(o=>n(o.label))||null}const v=r.default.createContext(null);function fe(){const{comboBoxRef:e,id:t,manager:n}=s.useContext(v);return s.useMemo(()=>({id:ne(t),ref:e,onBlur(o){var a;(a=e.current)!=null&&a.contains(o.relatedTarget)||(n.collapse(),n.clearActiveIndex())},onFocus(o){var a;(a=e.current)!=null&&a.contains(o.relatedTarget)||n.expand()},onClick(){n.state.isExpanded||n.expand()}}),[e,t,n])}const h={Enter:"Enter",Escape:"Escape",Tab:"Tab",Backspace:"Backspace",UpArrow:"ArrowUp",UpArrowCompat:"Up",DownArrow:"ArrowDown",DownArrowCompat:"Down",PageDown:"PageDown",PageUp:"PageUp"},J=Symbol("Create new tag"),ve=Symbol("No options"),me={autoComplete:"off",autoCorrect:"off","data-form-type":"other",spellCheck:!1},A=()=>{};function ge({allowBackspace:e,allowTab:t,ariaDescribedBy:n,ariaErrorMessage:o}){const{id:a,inputRef:l,isDisabled:u,isInvalid:p,manager:i,onInput:g,onSelect:y}=s.useContext(v),I=s.useMemo(()=>{const B=c=>{const w=c.currentTarget.value;i.updateValue(w),g==null||g(w)},k=c=>{c.preventDefault(),y()},L=c=>{i.state.isExpanded?(c.preventDefault(),i.updateActiveIndex(i.state.activeIndex+1)):te(c.currentTarget)&&i.expand()},V=c=>{i.state.isExpanded?(c.preventDefault(),i.updateActiveIndex(i.state.activeIndex-1)):ee(c.currentTarget)&&i.expand()},$=c=>{i.state.isExpanded&&(c.preventDefault(),i.updateActiveIndex(i.state.options.length-1))},K=c=>{i.state.isExpanded&&(c.preventDefault(),i.updateActiveIndex(0))},F=()=>{i.state.isExpanded?(i.clearActiveIndex(),i.collapse()):i.clearValue()},j=()=>{const c=i.state.value==="",w=i.state.selected[i.state.selected.length-1];c&&w&&y(w)};return{onChange:B,onKeyDown:c=>{if(c.key===h.UpArrow)return V(c);if(c.key===h.DownArrow)return L(c);if(c.key===h.PageUp)return K(c);if(c.key===h.PageDown)return $(c);if(c.key===h.Enter)return k(c);if(c.key===h.Escape)return F();if(c.key===h.Backspace&&e)return j();if(c.key===h.Tab&&t)return k(c)}}},[e,t,i,g,y]),{activeOption:b,isExpanded:C,value:U}=i.state;return x(f({},me),{"aria-autocomplete":"list","aria-activedescendant":b?H(a,b):null,"aria-describedby":n||null,"aria-disabled":u,"aria-errormessage":p&&o||null,"aria-invalid":p,"aria-labelledby":T(a),"aria-expanded":C,"aria-owns":q(a),id:oe(a),onChange:u?A:I.onChange,onKeyDown:u?A:I.onKeyDown,ref:l,role:"combobox",type:"text",value:U})}const xe={position:"absolute",width:0,height:0,visibility:"hidden",overflow:"scroll",whiteSpace:"pre"},ye=["fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","textTransform"];function be({allowResize:e=!0,text:t}){const n=s.useRef(),{inputRef:o}=s.useContext(v),[a,l]=s.useState(0);return s.useEffect(()=>{const u=window.getComputedStyle(o.current);ye.forEach(p=>{n.current.style[p]=u[p]})},[o,n]),s.useEffect(()=>{if(e){const u=Math.ceil(n.current.scrollWidth)+2;a!==u&&l(u)}},[e,t,a]),{width:a,sizerProps:{ref:n,style:xe}}}function Ee(){var i;const{inputRef:e,manager:t,tagListRef:n}=s.useContext(v),o=t.state.selected.length,a=P(o),l=o<a,u=(i=n.current)==null?void 0:i.contains(document.activeElement),p=P(u);s.useEffect(()=>{var g,y;if(l){const I=(g=n.current)==null?void 0:g.contains(document.activeElement);p&&!I&&((y=e.current)==null||y.focus())}},[e,p,n,l])}function Ie({newOptionText:e,noOptionsText:t,onValidate:n}){const o=s.useCallback(l=>({disabled:typeof n=="function"?!n(l):!1,label:e,value:J}),[e,n]),a=s.useCallback(()=>({disabled:!0,label:t,value:ve}),[t]);return{newTagOption:o,noTagsOption:a}}function Ce(){const{id:e,listBoxRef:t,manager:n}=s.useContext(v);return s.useEffect(()=>{var o;n.state.activeIndex===-1&&((o=t.current)==null||o.scrollTo({top:0}))},[t,n.state.activeIndex]),{"aria-labelledby":T(e),id:q(e),ref:t,role:"listbox"}}var E=(e=>(e[e.ClearActiveIndex=0]="ClearActiveIndex",e[e.ClearAll=1]="ClearAll",e[e.ClearValue=2]="ClearValue",e[e.Collapse=3]="Collapse",e[e.Expand=4]="Expand",e[e.UpdateActiveIndex=5]="UpdateActiveIndex",e[e.UpdateSelected=6]="UpdateSelected",e[e.UpdateSuggestions=7]="UpdateSuggestions",e[e.UpdateValue=8]="UpdateValue",e))(E||{});function he(e,t){const n=t-1;return e>n?-1:e<-1?n:e}function we(e,t){if(t.type===0)return x(f({},e),{activeIndex:-1,activeOption:null});if(t.type===1)return x(f({},e),{activeIndex:-1,activeOption:null,isExpanded:!1,options:[...e.suggestions],value:""});if(t.type===2){const n=[...e.suggestions],o=e.activeOption?S(e.activeOption,n):-1;return x(f({},e),{activeIndex:o,activeOption:n[o],options:n,value:""})}if(t.type===3)return x(f({},e),{activeIndex:-1,activeOption:null,isExpanded:!1});if(t.type===4)return x(f({},e),{isExpanded:!0});if(t.type===5){const n=he(t.payload,e.options.length);return x(f({},e),{activeIndex:n,activeOption:e.options[n]})}if(t.type===6)return x(f({},e),{selected:t.payload});if(t.type===7){const n=e.suggestionsTransform(e.value,t.payload);e.allowNew&&e.value&&n.push(e.newTagOption(e.value)),n.length===0&&e.value&&n.push(e.noTagsOption(e.value));const o=e.activeOption?S(e.activeOption,n):-1;return x(f({},e),{activeIndex:o,activeOption:n[o]||null,options:n,suggestions:t.payload})}if(t.type===8){const n=e.suggestionsTransform(t.payload,e.suggestions);e.allowNew&&t.payload&&n.push(e.newTagOption(t.payload)),n.length===0&&t.payload&&n.push(e.noTagsOption(t.payload));const o=e.activeOption?S(e.activeOption,n):-1;return x(f({},e),{activeIndex:o,activeOption:n[o]||null,isExpanded:!0,options:n,value:t.payload})}return e}function Se(e){return x(f({},e),{options:[...e.suggestions]})}function Te(e){var a;const t=s.useRef(),[n,o]=s.useReducer(we,e,Se);return(a=t.current)!=null||(t.current={state:null,clearActiveIndex(){o({type:E.ClearActiveIndex})},clearAll(){o({type:E.ClearAll})},clearValue(){o({type:E.ClearValue})},collapse(){o({type:E.Collapse})},expand(){o({type:E.Expand})},updateActiveIndex(l){o({type:E.UpdateActiveIndex,payload:l})},updateSelected(l){o({type:E.UpdateSelected,payload:l})},updateSuggestions(l){o({type:E.UpdateSuggestions,payload:l})},updateValue(l){o({type:E.UpdateValue,payload:l})}}),t.current.state=n,e.selected!==n.selected&&t.current.updateSelected(e.selected),e.suggestions!==n.suggestions&&t.current.updateSuggestions(e.suggestions),t.current}function Oe(e,t){if((e==null?void 0:e.value)===J&&e.disabled===!1)return{value:null,label:t}}function ke(e){const t=Oe(e.activeOption,e.value)||e.activeOption||pe(e.value,e.options);return t!=null&&t.disabled?null:t}function Ne({closeOnSelect:e,manager:t,onAdd:n,onDelete:o}){return s.useCallback(a=>{if(a!=null||(a=ke(t.state)),!a)return;const l=S(a,t.state.selected);l>=0?o(l):(n(a),e?t.clearAll():t.clearValue())},[e,t,o,n])}function _e(e){var b;const{id:t,inputRef:n,manager:o,onSelect:a}=s.useContext(v),l=s.useRef(),u=o.state.options[e],p=e===o.state.activeIndex,i=(b=u.disabled)!=null?b:!1,g=S(u,o.state.selected)>-1,y=s.useCallback(()=>{var C;a(),(C=n.current)==null||C.focus()},[n,a]),I=s.useCallback(()=>{e!==o.state.activeIndex&&o.updateActiveIndex(e)},[e,o]);return s.useEffect(()=>{var C;p&&((C=l.current)==null||C.scrollIntoView({block:"nearest",inline:"start"}))},[p]),x(f({},u),{active:p,disabled:i,index:e,selected:g,optionProps:{"aria-disabled":i,"aria-posinset":e+1,"aria-selected":i?null:g,"aria-setsize":o.state.options.length,id:H(t,u),onClick:y,onMouseDown:I,ref:l,role:"option",tabIndex:-1}})}function P(e){const t=s.useRef();return s.useEffect(()=>{t.current=e},[e]),t.current}function De(){const[e,t]=s.useState(!1),{id:n,inputRef:o,rootRef:a}=s.useContext(v),l=s.useMemo(()=>({"aria-describedby":T(n),id:n,onFocus(){t(!0)},onBlur(){var u;(u=a.current)!=null&&u.contains(document.activeElement)||t(!1)},onClick(){var u;document.activeElement===a.current&&((u=o.current)==null||u.focus())},ref:a,tabIndex:-1}),[o,n,a]);return{isActive:e,rootProps:l}}function Ae(e,t){const{isDisabled:n,manager:o,onSelect:a}=s.useContext(v),l=o.state.selected[e],u=s.useCallback(()=>a(l),[a,l]);return x(f({},l),{tagProps:{"aria-disabled":n,title:O(t,l.label),onClick:n?A:u}})}const Pe={position:"absolute",width:1,height:1,left:-9999,overflow:"hidden",clip:"rect(0 0 0 0)"};function Ue({ariaAddedText:e,ariaDeletedText:t}){const{manager:n}=s.useContext(v),{selected:o}=n.state,a=P(o)||o,l=s.useRef([]);return o.forEach(u=>{a.includes(u)||l.current.push(O(e,u.label))}),a.forEach(u=>{o.includes(u)||l.current.push(O(t,u.label))}),r.default.createElement("div",{"aria-live":"polite","aria-relevant":"additions",role:"status",style:Pe},l.current.join(`
-`))}function Be({children:e}){const{classNames:t}=s.useContext(v),n=fe();return r.default.createElement("div",f({className:t.comboBox},n),e)}function Le({allowBackspace:e=!0,allowResize:t=!0,allowTab:n=!1,ariaDescribedBy:o,ariaErrorMessage:a,placeholderText:l}){const{classNames:u}=s.useContext(v),b=ge({allowBackspace:e,allowTab:n,ariaDescribedBy:o,ariaErrorMessage:a}),{value:p}=b,i=M(b,["value"]),g=p.length<l.length?l:p,{sizerProps:y,width:I}=be({allowResize:t,text:g});return r.default.createElement(r.default.Fragment,null,r.default.createElement("input",f({className:u.input,placeholder:l,style:{width:I},value:p},i)),t?r.default.createElement("div",f({},y),g):null)}function Ve({children:e}){const{classNames:t,id:n}=s.useContext(v);return r.default.createElement("div",{className:t.label,id:T(n)},e)}function $e({children:e}){const{classNames:t,manager:n}=s.useContext(v),o=Ce();return!n.state.isExpanded||r.default.Children.count(e)===0?null:r.default.createElement("div",f({className:t.listBox},o),e)}function Ke({label:e,query:t}){return r.default.createElement("span",null,O(e,t))}function Fe({index:e}){const{classNames:t,manager:n}=s.useContext(v),{active:o,label:a,value:l,optionProps:u}=_e(e),p=[t.option];return o&&p.push(t.optionIsActive),r.default.createElement("div",f({className:p.join(" ")},u),typeof l=="symbol"?r.default.createElement(Ke,{label:a,query:n.state.value}):r.default.createElement(We,{label:a,query:n.state.value}))}function je(e,t){const n=R(t);return e.replace(n,"<mark>$&</mark>")}function ze({label:e,query:t}){return r.default.createElement("span",{dangerouslySetInnerHTML:{__html:je(e,t)}})}const We=r.default.memo(ze);function qe({children:e}){Ee();const{classNames:t,isDisabled:n,isInvalid:o}=s.useContext(v),{isActive:a,rootProps:l}=De(),u=[t.root];return a&&u.push(t.rootIsActive),n&&u.push(t.rootIsDisabled),o&&u.push(t.rootIsInvalid),r.default.createElement("div",f({className:u.join(" ")},l),e)}function He({index:e,title:t}){const{classNames:n}=s.useContext(v),{label:o,tagProps:a}=Ae(e,t);return r.default.createElement("button",f({type:"button",className:n.tag},a),r.default.createElement("span",{className:n.tagName},o))}function Ge({children:e,label:t}){const{classNames:n,tagListRef:o}=s.useContext(v);return r.default.createElement("ul",{className:n.tagList,"aria-label":t,ref:o,role:"list"},e.map(a=>r.default.createElement("li",{className:n.tagListItem,key:a.key,role:"listitem"},a)))}const Re={root:"react-tags",rootIsActive:"is-active",rootIsDisabled:"is-disabled",rootIsInvalid:"is-invalid",label:"react-tags__label",tagList:"react-tags__list",tagListItem:"react-tags__list-item",tag:"react-tags__tag",tagName:"react-tags__tag-name",comboBox:"react-tags__combobox",input:"react-tags__combobox-input",listBox:"react-tags__listbox",noOptions:"react-tags__listbox-no-options",option:"react-tags__listbox-option",optionIsActive:"is-active"};function Je({allowBackspace:e=!0,allowNew:t=!1,allowResize:n=!0,allowTab:o=!1,ariaAddedText:a="Added tag %value%",ariaDescribedBy:l,ariaErrorMessage:u,ariaDeletedText:p="Removed tag %value%",classNames:i=Re,closeOnSelect:g=!1,id:y="react-tags",isDisabled:I=!1,isInvalid:b=!1,labelText:C="Select tags",newOptionText:U="Add %value%",noOptionsText:B="No options found for %value%",onAdd:k,onDelete:L,onInput:V,onValidate:$,placeholderText:K="Add a tag",removeButtonText:F="Remove %value% from the list",selected:j=[],suggestions:Q=[],suggestionsTransform:c=de,tagListLabelText:w="Selected tags"}){const Qe=s.useRef(),Xe=s.useRef(),Ye=s.useRef(),Ze=s.useRef(),Me=s.useRef(),{newTagOption:et,noTagsOption:tt}=Ie({newOptionText:U,noOptionsText:B,onValidate:$}),N=Te({activeIndex:-1,activeOption:null,allowNew:t,isExpanded:!1,newTagOption:et,noTagsOption:tt,options:[],selected:j,suggestions:Q,suggestionsTransform:c,value:""}),nt=Ne({closeOnSelect:g,manager:N,onAdd:k,onDelete:L});return r.default.createElement(v.Provider,{value:{classNames:i,comboBoxRef:Qe,id:y,inputRef:Xe,isDisabled:I,isInvalid:b,listBoxRef:Ye,manager:N,onInput:V,onSelect:nt,rootRef:Ze,tagListRef:Me}},r.default.createElement(qe,null,r.default.createElement(Ve,null,C),r.default.createElement(Ge,{label:w},N.state.selected.map((z,W)=>r.default.createElement(He,{key:D(z),index:W,title:F}))),r.default.createElement(Be,null,r.default.createElement(Le,{allowBackspace:e,allowResize:n,allowTab:o,placeholderText:K,ariaDescribedBy:l,ariaErrorMessage:u}),r.default.createElement($e,null,N.state.options.map((z,W)=>r.default.createElement(Fe,{key:D(z),index:W})))),r.default.createElement(Ue,{ariaAddedText:a,ariaDeletedText:p})))}d.ReactTags=Je,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+var ot=Object.defineProperty,st=Object.defineProperties;var at=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var Y=(d,s,m)=>s in d?ot(d,s,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[s]=m,p=(d,s)=>{for(var m in s||(s={}))Z.call(s,m)&&Y(d,m,s[m]);if(N)for(var m of N(s))M.call(s,m)&&Y(d,m,s[m]);return d},x=(d,s)=>st(d,at(s));var ee=(d,s)=>{var m={};for(var r in d)Z.call(d,r)&&s.indexOf(r)<0&&(m[r]=d[r]);if(d!=null&&N)for(var r of N(d))s.indexOf(r)<0&&M.call(d,r)&&(m[r]=d[r]);return m};(function(d,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(d=typeof globalThis!="undefined"?globalThis:d||self,s(d.ReactTags={},d.React))})(this,function(d,s){"use strict";function m(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var r=m(s);function te(e){return e.selectionStart===0&&e.selectionEnd===0}function ne(e){const t=e.value.length;return e.selectionStart===t&&e.selectionEnd===t}function lt(e){return e}function T(e){return`${e}-label`}function oe(e){return`${e}-combobox`}function se(e){return`${e}-input`}function H(e){return`${e}-listbox`}function G(e,t){return`${e}-option-${re(t)}`}const ae=/%value%/;function O(e,t){return e.replace(ae,t)}const le=/\s+/g;function D(e){return`${String(e.value)}-${e.label}`}function re(e){return D(e).replace(le,"_")}function S(e,t){return t.findIndex(({value:n})=>n===e.value)}const ue=/[-\\^$*+?.()|[\]{}]/g;function R(e){return e.replace(ue,"\\$&")}function J(e){return new RegExp(`${R(e)}`,"i")}function ie(e){return new RegExp(`^${R(e)}$`,"i")}function ce(e){const t=J(e);return n=>t.test(n)}function de(e){const t=ie(e);return n=>t.test(n)}function fe(e,t){const n=ce(e);return t.filter(o=>n(o.label))}function pe(e,t){const n=de(e);return t.find(o=>n(o.label))||null}const v=r.default.createContext(null);function ve(){const{comboBoxRef:e,id:t,manager:n}=s.useContext(v);return s.useMemo(()=>({id:oe(t),ref:e,onBlur(o){var a;(a=e.current)!=null&&a.contains(o.relatedTarget)||(n.collapse(),n.clearActiveIndex())},onFocus(o){var a;(a=e.current)!=null&&a.contains(o.relatedTarget)||n.expand()},onClick(){n.state.isExpanded||n.expand()}}),[e,t,n])}const h={Enter:"Enter",Escape:"Escape",Tab:"Tab",Backspace:"Backspace",UpArrow:"ArrowUp",UpArrowCompat:"Up",DownArrow:"ArrowDown",DownArrowCompat:"Down",PageDown:"PageDown",PageUp:"PageUp"},Q=Symbol("Create new tag"),me=Symbol("No options"),_=()=>{},ge={autoComplete:"off",autoCorrect:"off","data-form-type":"other",spellCheck:!1};function xe({allowBackspace:e,allowTab:t,ariaDescribedBy:n,ariaErrorMessage:o}){const{id:a,inputRef:l,isDisabled:u,isInvalid:f,manager:i,onInput:g,onSelect:y}=s.useContext(v),I=s.useMemo(()=>{const U=c=>{const w=c.currentTarget.value;i.updateValue(w),g==null||g(w)},B=c=>{i.state.isExpanded?(c.preventDefault(),i.updateActiveIndex(i.state.activeIndex+1)):ne(c.currentTarget)&&i.expand()},L=c=>{i.state.isExpanded?(c.preventDefault(),i.updateActiveIndex(i.state.activeIndex-1)):te(c.currentTarget)&&i.expand()},K=c=>{i.state.isExpanded&&(c.preventDefault(),i.updateActiveIndex(i.state.options.length-1))},V=c=>{i.state.isExpanded&&(c.preventDefault(),i.updateActiveIndex(0))},$=c=>{i.state.isExpanded&&(c.preventDefault(),y())},F=()=>{i.state.isExpanded?(i.clearActiveIndex(),i.collapse()):i.clearValue()},j=()=>{if(e){const c=i.state.value==="",w=i.state.selected[i.state.selected.length-1];c&&w&&y(w)}},z=c=>{t&&i.state.isExpanded&&(c.preventDefault(),y())};return{onChange:U,onKeyDown:c=>{if(c.key===h.UpArrow)return L(c);if(c.key===h.DownArrow)return B(c);if(c.key===h.PageUp)return V(c);if(c.key===h.PageDown)return K(c);if(c.key===h.Enter)return $(c);if(c.key===h.Escape)return F();if(c.key===h.Backspace)return j();if(c.key===h.Tab)return z(c)}}},[e,t,i,g,y]),{activeOption:b,isExpanded:C,value:P}=i.state;return x(p({},ge),{"aria-autocomplete":"list","aria-activedescendant":b?G(a,b):null,"aria-describedby":n||null,"aria-disabled":u,"aria-errormessage":f&&o||null,"aria-invalid":f,"aria-labelledby":T(a),"aria-expanded":C,"aria-owns":H(a),id:se(a),onChange:u?_:I.onChange,onKeyDown:u?_:I.onKeyDown,ref:l,role:"combobox",type:"text",value:P})}const ye={position:"absolute",width:0,height:0,visibility:"hidden",overflow:"scroll",whiteSpace:"pre"},be=["fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","textTransform"];function Ee({allowResize:e=!0,text:t}){const n=s.useRef(),{inputRef:o}=s.useContext(v),[a,l]=s.useState(0);return s.useEffect(()=>{const u=window.getComputedStyle(o.current);be.forEach(f=>{n.current.style[f]=u[f]})},[o,n]),s.useEffect(()=>{if(e){const u=Math.ceil(n.current.scrollWidth)+2;a!==u&&l(u)}},[e,t,a]),{width:a,sizerProps:{ref:n,style:ye}}}function Ie(){var i;const{inputRef:e,manager:t,tagListRef:n}=s.useContext(v),o=t.state.selected.length,a=A(o),l=o<a,u=(i=n.current)==null?void 0:i.contains(document.activeElement),f=A(u);s.useEffect(()=>{var g,y;if(l){const I=(g=n.current)==null?void 0:g.contains(document.activeElement);f&&!I&&((y=e.current)==null||y.focus())}},[e,f,n,l])}function Ce({newOptionText:e,noOptionsText:t,onValidate:n}){const o=s.useCallback(l=>({disabled:typeof n=="function"?!n(l):!1,label:e,value:Q}),[e,n]),a=s.useCallback(()=>({disabled:!0,label:t,value:me}),[t]);return{newTagOption:o,noTagsOption:a}}function he(){const{id:e,listBoxRef:t,manager:n}=s.useContext(v);return s.useEffect(()=>{var o;n.state.activeIndex===-1&&((o=t.current)==null||o.scrollTo({top:0}))},[t,n.state.activeIndex]),{"aria-labelledby":T(e),id:H(e),ref:t,role:"listbox"}}var E=(e=>(e[e.ClearActiveIndex=0]="ClearActiveIndex",e[e.ClearAll=1]="ClearAll",e[e.ClearValue=2]="ClearValue",e[e.Collapse=3]="Collapse",e[e.Expand=4]="Expand",e[e.UpdateActiveIndex=5]="UpdateActiveIndex",e[e.UpdateSelected=6]="UpdateSelected",e[e.UpdateSuggestions=7]="UpdateSuggestions",e[e.UpdateValue=8]="UpdateValue",e))(E||{});function we(e,t){const n=t-1;return e>n?-1:e<-1?n:e}function Se(e,t){if(t.type===0)return x(p({},e),{activeIndex:-1,activeOption:null});if(t.type===1)return x(p({},e),{activeIndex:-1,activeOption:null,isExpanded:!1,options:[...e.suggestions],value:""});if(t.type===2){const n=[...e.suggestions],o=e.activeOption?S(e.activeOption,n):-1;return x(p({},e),{activeIndex:o,activeOption:n[o],options:n,value:""})}if(t.type===3)return x(p({},e),{activeIndex:-1,activeOption:null,isExpanded:!1});if(t.type===4)return x(p({},e),{isExpanded:!0});if(t.type===5){const n=we(t.payload,e.options.length);return x(p({},e),{activeIndex:n,activeOption:e.options[n]})}if(t.type===6)return x(p({},e),{selected:t.payload});if(t.type===7){const n=e.suggestionsTransform(e.value,t.payload);e.allowNew&&e.value&&n.push(e.newTagOption(e.value)),n.length===0&&e.value&&n.push(e.noTagsOption(e.value));const o=e.activeOption?S(e.activeOption,n):-1;return x(p({},e),{activeIndex:o,activeOption:n[o]||null,options:n,suggestions:t.payload})}if(t.type===8){const n=e.suggestionsTransform(t.payload,e.suggestions);e.allowNew&&t.payload&&n.push(e.newTagOption(t.payload)),n.length===0&&t.payload&&n.push(e.noTagsOption(t.payload));const o=e.activeOption?S(e.activeOption,n):-1;return x(p({},e),{activeIndex:o,activeOption:n[o]||null,isExpanded:!0,options:n,value:t.payload})}return e}function Te(e){return x(p({},e),{options:[...e.suggestions]})}function Oe(e){var a;const t=s.useRef(),[n,o]=s.useReducer(Se,e,Te);return(a=t.current)!=null||(t.current={state:null,clearActiveIndex(){o({type:E.ClearActiveIndex})},clearAll(){o({type:E.ClearAll})},clearValue(){o({type:E.ClearValue})},collapse(){o({type:E.Collapse})},expand(){o({type:E.Expand})},updateActiveIndex(l){o({type:E.UpdateActiveIndex,payload:l})},updateSelected(l){o({type:E.UpdateSelected,payload:l})},updateSuggestions(l){o({type:E.UpdateSuggestions,payload:l})},updateValue(l){o({type:E.UpdateValue,payload:l})}}),t.current.state=n,e.selected!==n.selected&&t.current.updateSelected(e.selected),e.suggestions!==n.suggestions&&t.current.updateSuggestions(e.suggestions),t.current}function ke(e,t){if((e==null?void 0:e.value)===Q&&e.disabled===!1)return{value:null,label:t}}function Ne(e){const t=ke(e.activeOption,e.value)||e.activeOption||pe(e.value,e.options);return t!=null&&t.disabled?null:t}function De({closeOnSelect:e,manager:t,onAdd:n,onDelete:o}){return s.useCallback(a=>{if(a!=null||(a=Ne(t.state)),!a)return;const l=S(a,t.state.selected);l>=0?o(l):(n(a),e?t.clearAll():t.clearValue())},[e,t,o,n])}function _e(e){var b;const{id:t,inputRef:n,manager:o,onSelect:a}=s.useContext(v),l=s.useRef(),u=o.state.options[e],f=e===o.state.activeIndex,i=(b=u.disabled)!=null?b:!1,g=S(u,o.state.selected)>-1,y=s.useCallback(()=>{var C;a(),(C=n.current)==null||C.focus()},[n,a]),I=s.useCallback(()=>{e!==o.state.activeIndex&&o.updateActiveIndex(e)},[e,o]);return s.useEffect(()=>{var C;f&&((C=l.current)==null||C.scrollIntoView({block:"nearest",inline:"start"}))},[f]),x(p({},u),{active:f,disabled:i,index:e,selected:g,optionProps:{"aria-disabled":i,"aria-posinset":e+1,"aria-selected":i?null:g,"aria-setsize":o.state.options.length,id:G(t,u),onClick:y,onMouseDown:I,ref:l,role:"option",tabIndex:-1}})}function A(e){const t=s.useRef(e);return s.useEffect(()=>{t.current=e},[e]),t.current}function Ae(){const[e,t]=s.useState(!1),{id:n,inputRef:o,rootRef:a}=s.useContext(v),l=s.useMemo(()=>({"aria-describedby":T(n),id:n,onFocus(){t(!0)},onBlur(){var u;(u=a.current)!=null&&u.contains(document.activeElement)||t(!1)},onClick(){var u;document.activeElement===a.current&&((u=o.current)==null||u.focus())},ref:a,tabIndex:-1}),[o,n,a]);return{isActive:e,rootProps:l}}function Pe(e,t){const{isDisabled:n,manager:o,onSelect:a}=s.useContext(v),l=o.state.selected[e],u=s.useCallback(()=>a(l),[a,l]);return x(p({},l),{tagProps:{"aria-disabled":n,title:O(t,l.label),onClick:n?_:u}})}const Ue={position:"absolute",width:1,height:1,left:-9999,overflow:"hidden",clip:"rect(0 0 0 0)"};function Be({ariaAddedText:e,ariaDeletedText:t}){const{manager:n}=s.useContext(v),{selected:o}=n.state,a=A(o),l=s.useRef([]);return o.forEach(u=>{a.includes(u)||l.current.push(O(e,u.label))}),a.forEach(u=>{o.includes(u)||l.current.push(O(t,u.label))}),r.default.createElement("div",{"aria-live":"polite","aria-relevant":"additions",role:"status",style:Ue},l.current.join(`
+`))}function Le({children:e}){const{classNames:t}=s.useContext(v),n=ve();return r.default.createElement("div",p({className:t.comboBox},n),e)}function Ke({allowBackspace:e=!0,allowResize:t=!0,allowTab:n=!1,ariaDescribedBy:o,ariaErrorMessage:a,placeholderText:l}){const{classNames:u}=s.useContext(v),b=xe({allowBackspace:e,allowTab:n,ariaDescribedBy:o,ariaErrorMessage:a}),{value:f}=b,i=ee(b,["value"]),g=f.length<l.length?l:f,{sizerProps:y,width:I}=Ee({allowResize:t,text:g});return r.default.createElement(r.default.Fragment,null,r.default.createElement("input",p({className:u.input,placeholder:l,style:{width:I},value:f},i)),t?r.default.createElement("div",p({},y),g):null)}function Ve({children:e}){const{classNames:t,id:n}=s.useContext(v);return r.default.createElement("div",{className:t.label,id:T(n)},e)}function $e({children:e}){const{classNames:t,manager:n}=s.useContext(v),o=he();return!n.state.isExpanded||r.default.Children.count(e)===0?null:r.default.createElement("div",p({className:t.listBox},o),e)}function Fe({label:e,query:t}){return r.default.createElement("span",null,O(e,t))}function je({index:e}){const{classNames:t,manager:n}=s.useContext(v),{active:o,label:a,value:l,optionProps:u}=_e(e),f=[t.option];return o&&f.push(t.optionIsActive),r.default.createElement("div",p({className:f.join(" ")},u),typeof l=="symbol"?r.default.createElement(Fe,{label:a,query:n.state.value}):r.default.createElement(qe,{label:a,query:n.state.value}))}function ze(e,t){const n=J(t);return e.replace(n,"<mark>$&</mark>")}function We({label:e,query:t}){return r.default.createElement("span",{dangerouslySetInnerHTML:{__html:ze(e,t)}})}const qe=r.default.memo(We);function He({children:e}){Ie();const{classNames:t,isDisabled:n,isInvalid:o}=s.useContext(v),{isActive:a,rootProps:l}=Ae(),u=[t.root];return a&&u.push(t.rootIsActive),n&&u.push(t.rootIsDisabled),o&&u.push(t.rootIsInvalid),r.default.createElement("div",p({className:u.join(" ")},l),e)}function Ge({index:e,title:t}){const{classNames:n}=s.useContext(v),{label:o,tagProps:a}=Pe(e,t);return r.default.createElement("button",p({type:"button",className:n.tag},a),r.default.createElement("span",{className:n.tagName},o))}function Re({children:e,label:t}){const{classNames:n,tagListRef:o}=s.useContext(v);return r.default.createElement("ul",{className:n.tagList,"aria-label":t,ref:o,role:"list"},e.map(a=>r.default.createElement("li",{className:n.tagListItem,key:a.key,role:"listitem"},a)))}const Je={root:"react-tags",rootIsActive:"is-active",rootIsDisabled:"is-disabled",rootIsInvalid:"is-invalid",label:"react-tags__label",tagList:"react-tags__list",tagListItem:"react-tags__list-item",tag:"react-tags__tag",tagName:"react-tags__tag-name",comboBox:"react-tags__combobox",input:"react-tags__combobox-input",listBox:"react-tags__listbox",noOptions:"react-tags__listbox-no-options",option:"react-tags__listbox-option",optionIsActive:"is-active"};function Qe({allowBackspace:e=!0,allowNew:t=!1,allowResize:n=!0,allowTab:o=!1,ariaAddedText:a="Added tag %value%",ariaDescribedBy:l,ariaErrorMessage:u,ariaDeletedText:f="Removed tag %value%",classNames:i=Je,closeOnSelect:g=!1,id:y="react-tags",isDisabled:I=!1,isInvalid:b=!1,labelText:C="Select tags",newOptionText:P="Add %value%",noOptionsText:U="No options found for %value%",onAdd:B,onDelete:L,onInput:K,onValidate:V,placeholderText:$="Add a tag",removeButtonText:F="Remove %value% from the list",selected:j=[],suggestions:z=[],suggestionsTransform:X=fe,tagListLabelText:c="Selected tags"}){const w=s.useRef(),Xe=s.useRef(),Ye=s.useRef(),Ze=s.useRef(),Me=s.useRef(),{newTagOption:et,noTagsOption:tt}=Ce({newOptionText:P,noOptionsText:U,onValidate:V}),k=Oe({activeIndex:-1,activeOption:null,allowNew:t,isExpanded:!1,newTagOption:et,noTagsOption:tt,options:[],selected:j,suggestions:z,suggestionsTransform:X,value:""}),nt=De({closeOnSelect:g,manager:k,onAdd:B,onDelete:L});return r.default.createElement(v.Provider,{value:{classNames:i,comboBoxRef:w,id:y,inputRef:Xe,isDisabled:I,isInvalid:b,listBoxRef:Ye,manager:k,onInput:K,onSelect:nt,rootRef:Ze,tagListRef:Me}},r.default.createElement(He,null,r.default.createElement(Ve,null,C),r.default.createElement(Re,{label:c},k.state.selected.map((W,q)=>r.default.createElement(Ge,{key:D(W),index:q,title:F}))),r.default.createElement(Le,null,r.default.createElement(Ke,{allowBackspace:e,allowResize:n,allowTab:o,placeholderText:$,ariaDescribedBy:l,ariaErrorMessage:u}),r.default.createElement($e,null,k.state.options.map((W,q)=>r.default.createElement(je,{key:D(W),index:q})))),r.default.createElement(Be,{ariaAddedText:a,ariaDeletedText:f})))}d.ReactTags=Qe,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-beta.5",
   "description": "",
@@ -33,8 +33,8 @@ "module": "dist/ReactTags.es.js",
   "devDependencies": {
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/react": "^13.1.0",
+    "@testing-library/user-event": "^14.1.0",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.38",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@types/react": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
@@ -45,4 +45,4 @@ "axe-core": "^4.4.0",
     "husky": "^7.0.4",
-    "jsdom": "^18.1.0",
-    "lint-staged": "^12.3.2",
+    "jsdom": "^19.0.0",
+    "lint-staged": "^12.4.0",
     "match-sorter": "^6.3.0",
@@ -54,3 +54,3 @@ "prettier": "^2.6.0",
     "vite": "^2.9.0",
-    "vitest": "^0.8.0"
+    "vitest": "^0.9.0"
   },
@@ -57,0 +57,0 @@ "peerDependencies": {

readme.md

@@ -125,3 +125,3 @@ # React Tag Autocomplete
 
-TODO
+References an element by ID which contains more information about errors related to the component. Defaults to `""`.
 
@@ -128,0 +128,0 @@ #### classNames (optional)

src/constants.ts

@@ -18,10 +18,2 @@ export const KeyNames = {
 
-// <https://stackoverflow.com/questions/59939931/stop-dashlane-auto-fill-on-specific-input-fields>
-export const DisableAutoComplete = {
-  autoComplete: 'off',
-  autoCorrect: 'off',
-  'data-form-type': 'other',
-  spellCheck: false,
-}
-
 export const VoidFn = (): void => undefined

src/hooks/useInput.ts

 import { useContext, useMemo } from 'react'
-import { DisableAutoComplete, KeyNames, VoidFn } from '../constants'
+import { KeyNames, VoidFn } from '../constants'
 import { GlobalContext } from '../contexts'
@@ -16,2 +16,10 @@ import { inputId, isCaretAtEnd, isCaretAtStart, labelId, listBoxId, optionId } from '../lib'
 
+// <https://stackoverflow.com/questions/59939931/stop-dashlane-auto-fill-on-specific-input-fields>
+const DisableAutoCompleteAttrs = {
+  autoComplete: 'off',
+  autoCorrect: 'off',
+  'data-form-type': 'other',
+  spellCheck: false,
+}
+
 export function useInput({
@@ -33,7 +41,2 @@ allowBackspace,
 
-    const onSelectKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      e.preventDefault()
-      onSelect()
-    }
-
     const onDownArrowKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -71,2 +74,9 @@ if (manager.state.isExpanded) {
 
+    const onEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (manager.state.isExpanded) {
+        e.preventDefault()
+        onSelect()
+      }
+    }
+
     const onEscapeKey = () => {
@@ -82,10 +92,19 @@ if (manager.state.isExpanded) {
     const onBackspaceKey = () => {
-      const isEmpty = manager.state.value === ''
-      const lastTag = manager.state.selected[manager.state.selected.length - 1]
+      if (allowBackspace) {
+        const isEmpty = manager.state.value === ''
+        const lastTag = manager.state.selected[manager.state.selected.length - 1]
 
-      if (isEmpty && lastTag) {
-        onSelect(lastTag)
+        if (isEmpty && lastTag) {
+          onSelect(lastTag)
+        }
       }
     }
 
+    const onTabKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (allowTab && manager.state.isExpanded) {
+        e.preventDefault()
+        onSelect()
+      }
+    }
+
     const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -96,6 +115,6 @@ if (e.key === KeyNames.UpArrow) return onUpArrowKey(e)
       if (e.key === KeyNames.PageDown) return onPageDownKey(e)
-      if (e.key === KeyNames.Enter) return onSelectKey(e)
+      if (e.key === KeyNames.Enter) return onEnterKey(e)
       if (e.key === KeyNames.Escape) return onEscapeKey()
-      if (e.key === KeyNames.Backspace && allowBackspace) return onBackspaceKey()
-      if (e.key === KeyNames.Tab && allowTab) return onSelectKey(e)
+      if (e.key === KeyNames.Backspace) return onBackspaceKey()
+      if (e.key === KeyNames.Tab) return onTabKey(e)
     }
@@ -109,3 +128,3 @@
   return {
-    ...DisableAutoComplete,
+    ...DisableAutoCompleteAttrs,
     'aria-autocomplete': 'list',
@@ -112,0 +131,0 @@ 'aria-activedescendant': activeOption ? optionId(id, activeOption) : null,

src/hooks/usePrevious.ts

 import { useEffect, useRef } from 'react'
 
 export function usePrevious<T>(value: T): T {
-  const ref = useRef<T>()
+  const ref = useRef<T>(value)
 
@@ -6,0 +6,0 @@ useEffect(() => {

No alert changes

Improved metrics

Total package byte prevSize

377192

increased by0.36%

Lines of code

12177

increased by0.26%

No dependency changes