react-tag-autocomplete - npm Package Compare versions

Comparing version 7.0.0-rc.3 to 7.0.0-rc.4

dist/ReactTags.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),C={Enter:"Enter",Escape:"Escape",Tab:"Tab",Backspace:"Backspace",UpArrow:"ArrowUp",UpArrowCompat:"Up",DownArrow:"ArrowDown",DownArrowCompat:"Down",PageDown:"PageDown",PageUp:"PageUp"},z=Symbol("Create new tag"),H=Symbol("No options"),P=()=>{},g=r.createContext(void 0);function W(e,t){return e===t?[]:e.filter(s=>!t.includes(s))}function oe(e){return e.selectionStart===0&&e.selectionEnd===0}function ae(e){const t=e.value.length;return e.selectionStart===t&&e.selectionEnd===t}function K(e){return`${e}-label`}function ce(e){return`${e}-combobox`}function ie(e){return`${e}-input`}function G(e){return`${e}-listbox`}function q(e,t){return`${e}-option-${pe(t)}`}function ue(e,t){if((e==null?void 0:e.value)===z&&e.disabled===!1)return{value:t,label:t}}function le(e){const t=ue(e.activeOption,e.value)||e.activeOption||Ee(e.value,e.options);return t&&!t.disabled?t:void 0}const fe=/%value%/;function O(e,t){return e.replace(fe,t)}const de=/\s+/g;function U(e){return`${String(e.value)}-${e.label}`}function pe(e){return U(e).replace(de,"_")}function V(e,t){return t.findIndex(({value:s})=>s===e.value)}const ge=/[-\\^$*+?.()|[\]{}]/g;function J(e){return e.replace(ge,"\\$&")}function Q(e){return new RegExp(`${J(e)}`,"i")}function me(e){return new RegExp(`^${J(e)}$`,"i")}function xe(e){const t=Q(e);return s=>t.test(s)}function ve(e){const t=me(e);return s=>t.test(s)}function be(e,t){if(e==="")return[].concat(t);{const s=xe(e);return t.filter(n=>s(n.label))}}function Ee(e,t){const s=ve(e);return t.find(n=>s(n.label))||null}const ye={autoComplete:"off",autoCorrect:"off","data-form-type":"other",spellCheck:!1};function he({allowBackspace:e,ariaDescribedBy:t,ariaErrorMessage:s,delimiterKeys:n}){const{id:o,comboBoxRef:l,inputRef:c,isDisabled:u,isInvalid:f,managerRef:a}=r.useContext(g),m=r.useMemo(()=>{const b=i=>{const p=i.currentTarget.value;a.current.updateInputValue(p),document.activeElement===c.current&&a.current.listBoxExpand()},A=()=>{a.current.listBoxExpand()},h=i=>{var p;((p=l.current)==null?void 0:p.contains(i.relatedTarget))===!1&&a.current.listBoxCollapse()},I=()=>{a.current.listBoxExpand()},S=i=>{const{activeIndex:p,isExpanded:d}=a.current.state;d?(i.preventDefault(),a.current.updateActiveIndex(p+1)):(ae(i.currentTarget)||i.altKey)&&(i.preventDefault(),a.current.listBoxExpand())},v=i=>{const{activeIndex:p,isExpanded:d}=a.current.state;d?(i.preventDefault(),a.current.updateActiveIndex(p-1)):oe(i.currentTarget)&&(i.preventDefault(),a.current.listBoxExpand())},T=i=>{const{isExpanded:p,options:d}=a.current.state;p&&(i.preventDefault(),a.current.updateActiveIndex(d.length-1))},E=i=>{a.current.state.isExpanded&&(i.preventDefault(),a.current.updateActiveIndex(0))},k=()=>{a.current.state.isExpanded?a.current.listBoxCollapse():a.current.updateInputValue("")},R=()=>{if(e){const{value:i,selected:p}=a.current.state,d=p[p.length-1];i===""&&d&&a.current.selectTag(d)}},N=i=>{a.current.state.isExpanded&&(i.preventDefault(),a.current.selectTag())};return{onBlur:h,onChange:b,onClick:I,onFocus:A,onKeyDown:i=>{if(i.key===C.UpArrow)return v(i);if(i.key===C.DownArrow)return S(i);if(i.key===C.PageUp)return E(i);if(i.key===C.PageDown)return T(i);if(i.key===C.Escape)return k();if(i.key===C.Backspace)return R();if(n.includes(i.key))return N(i)}}},[e,l,n,c,a]),{activeOption:x,isExpanded:D,value:w}=a.current.state;return{...ye,"aria-autocomplete":"list","aria-activedescendant":x?q(o,x):void 0,"aria-describedby":t||void 0,"aria-disabled":u,"aria-errormessage":f&&s||void 0,"aria-invalid":f,"aria-labelledby":K(o),"aria-expanded":D,"aria-owns":G(o),id:ie(o),onBlur:u?P:m.onBlur,onChange:u?P:m.onChange,onClick:u?P:m.onClick,onFocus:u?P:m.onFocus,onKeyDown:u?P:m.onKeyDown,ref:c,role:"combobox",type:"text",value:w}}const Ie={position:"absolute",width:0,height:0,visibility:"hidden",overflow:"scroll",whiteSpace:"pre"},Re=["font-family","font-size","font-style","font-weight","letter-spacing","text-transform"];function Ce({allowResize:e=!0,text:t}){const s=r.useRef(null),{inputRef:n}=r.useContext(g),[o,l]=r.useState(0);return r.useEffect(()=>{if(n.current){const c=window.getComputedStyle(n.current);Re.forEach(u=>{var a;const f=c.getPropertyValue(u);(a=s.current)==null||a.style.setProperty(u,f)})}},[n,s]),r.useEffect(()=>{var c;if(e){const u=Math.ceil(((c=s.current)==null?void 0:c.scrollWidth)??0)+2;o!==u&&l(u)}},[e,t,o]),{width:o,sizerProps:{ref:s,style:Ie}}}function De(){var l;const{inputRef:e,managerRef:t,tagListRef:s}=r.useContext(g),n=t.current.flags.tagsDeleted.length,o=(l=s.current)==null?void 0:l.contains(document.activeElement);r.useEffect(()=>{var c,u;if(n){const f=(c=s.current)==null?void 0:c.contains(document.activeElement);o&&!f&&((u=e.current)==null||u.focus({preventScroll:!0}))}},[e,o,s,n])}function we(){const{id:e,inputRef:t,listBoxRef:s,managerRef:n}=r.useContext(g),o=n.current.state.activeIndex===-1,l=r.useCallback(c=>{var u;c.target!==t.current&&((u=t.current)==null||u.focus({preventScroll:!0}))},[t]);return r.useEffect(()=>{var c;o&&((c=s.current)==null||c.scrollTo({top:0}))},[s,o]),{"aria-labelledby":K(e),id:G(e),onFocus:l,ref:s,role:"listbox",tabIndex:-1}}function Ae(e,t,s){const n=t-1;return e>n?s:e<s?n:e}function Se({allowNew:e,closeOnSelect:t,newOptionText:s,noOptionsText:n,onAdd:o,onDelete:l,onCollapse:c,onExpand:u,onInput:f,onValidate:a,selected:m,startWithFirstOption:x,suggestions:D,suggestionsTransform:w}){const b=r.useRef(),[A,h]=r.useState(null),[I,S]=r.useState(!1),[v,T]=r.useState(""),E=r.useMemo(()=>{const d=w(v,D);if(e&&v){const y=typeof a=="function"?a(v):!0;d.push({disabled:!y,label:s,value:z})}return d.length===0&&v&&d.push({disabled:!0,label:n,value:H}),d},[e,s,n,a,D,w,v]),k=A?V(A,E):-1,R=x?Math.max(k,0):k,N=E[R],B={activeIndex:R,activeOption:N,isExpanded:I,options:E,selected:m,value:v},i={tagsAdded:b.current?W(m,b.current.state.selected):[],tagsDeleted:b.current?W(b.current.state.selected,m):[]},p={listBoxCollapse(){I&&(S(!1),h(null),c==null||c())},listBoxExpand(){I||(S(!0),h(E[R]),u==null||u())},updateActiveIndex(d){const y=Ae(d,E.length,x?0:-1);h(E[y])},updateInputValue(d){v!==d&&(T(d),f==null||f(d))},selectTag(d){if(d??(d=le(B)),d){const y=V(d,B.selected);y>-1?l(y):o(d),t&&this.listBoxCollapse(),this.updateInputValue("")}}};return b.current={...p,flags:i,state:B},b}function ke(e){const{id:t,inputRef:s,managerRef:n}=r.useContext(g),o=r.useRef(null),l=n.current.state.options[e],c=e===n.current.state.activeIndex,u=l.disabled??!1,f=V(l,n.current.state.selected)>-1,a=r.useCallback(()=>{var x;n.current.selectTag(),(x=s.current)==null||x.focus()},[s,n]),m=r.useCallback(()=>{e!==n.current.state.activeIndex&&n.current.updateActiveIndex(e)},[e,n]);return r.useEffect(()=>{var x;c&&((x=o.current)==null||x.scrollIntoView({block:"nearest",inline:"start"}))},[c,n.current.state.options]),{option:{...l,active:c,disabled:u,index:e,selected:f},optionProps:{"aria-disabled":u,"aria-posinset":e+1,"aria-selected":u?void 0:f,"aria-setsize":n.current.state.options.length,id:q(t,l),onClick:a,onMouseDown:m,ref:o,role:"option",tabIndex:-1}}}function Be({inputRef:e,managerRef:t}){return r.useRef({input:{blur(){var n;(n=e.current)==null||n.blur()},focus(){var n;(n=e.current)==null||n.focus()},get value(){return t.current.state.value},set value(n){typeof n!="string"&&(n=String(n)),t.current.updateInputValue(n)}},listBox:{collapse(){t.current.listBoxCollapse()},expand(){t.current.listBoxExpand()},get activeOption(){return t.current.state.activeOption},get isExpanded(){return t.current.state.isExpanded}},select(n){t.current.selectTag(n)}}).current}function Pe({onBlur:e,onFocus:t}){const[s,n]=r.useState(!1),{id:o,inputRef:l,rootRef:c}=r.useContext(g),u=r.useMemo(()=>({"aria-describedby":K(o),id:o,onFocus(){n(!0),t==null||t()},onBlur(){var f;(f=c.current)!=null&&f.contains(document.activeElement)||(n(!1),e==null||e())},onClick(){var f;document.activeElement===c.current&&((f=l.current)==null||f.focus())},ref:c,tabIndex:-1}),[l,o,e,t,c]);return{isActive:s,rootProps:u}}function Te(e,t){const{isDisabled:s,managerRef:n}=r.useContext(g),o=n.current.state.selected[e],l=r.useCallback(()=>n.current.selectTag(o),[n,o]);return{tag:o,tagProps:{"aria-disabled":s,title:O(t,o.label),onClick:s?P:l}}}const Ne={position:"absolute",width:1,height:1,left:-9999,overflow:"hidden",clip:"rect(0 0 0 0)"};function _e({ariaAddedText:e,ariaDeletedText:t}){const{managerRef:s}=r.useContext(g),n=r.useRef([]);return s.current.flags.tagsAdded.forEach(o=>{n.current.push(O(e,o.label))}),s.current.flags.tagsDeleted.forEach(o=>{n.current.push(O(t,o.label))}),r.createElement("div",{"aria-live":"polite","aria-relevant":"additions",role:"status",style:Ne},n.current.join(`
-`))}function Le({children:e}){const{classNames:t,comboBoxRef:s,id:n}=r.useContext(g);return r.createElement("div",{className:t.comboBox,id:ce(n),ref:s},e)}function Oe({allowBackspace:e=!0,allowResize:t=!0,ariaDescribedBy:s,ariaErrorMessage:n,delimiterKeys:o,placeholderText:l}){const{classNames:c}=r.useContext(g),{value:u,...f}=he({allowBackspace:e,ariaDescribedBy:s,ariaErrorMessage:n,delimiterKeys:o}),a=u.length<l.length?l:u,{sizerProps:m,width:x}=Ce({allowResize:t,text:a});return r.createElement(r.Fragment,null,r.createElement("input",{className:c.input,placeholder:l,style:{width:x},value:u,...f}),t?r.createElement("div",{...m},a):null)}const Ke=({children:e,classNames:t,id:s})=>r.createElement("div",{className:t.label,id:s},e);function $e({children:e,render:t=Ke}){const{classNames:s,id:n}=r.useContext(g);return t({children:e,classNames:s,id:K(n)})}function Me({children:e}){const{classNames:t,managerRef:s}=r.useContext(g),n=we();return!s.current.state.isExpanded||r.Children.count(e)===0?null:r.createElement("div",{className:t.listBox,...n},e)}const Ue=({children:e,classNames:t,option:s,...n})=>{const o=[t.option];return s.active&&o.push(t.optionIsActive),r.createElement("div",{className:o.join(" "),...n},e)};function Ve({index:e,render:t=Ue}){const{classNames:s,managerRef:n}=r.useContext(g),{option:o,optionProps:l}=ke(e),c=r.createElement(je,{option:o,query:n.current.state.value});return t({classNames:s,children:c,option:o,...l})}function ze(e,t){const s=Q(t);return e.replace(s,"<mark>$&</mark>")}function Fe({option:e,query:t}){return e.value===z||e.value===H?r.createElement("span",null,O(e.label,t)):r.createElement("span",{dangerouslySetInnerHTML:{__html:ze(e.label,t)}})}const je=r.memo(Fe);function We({children:e,onBlur:t,onFocus:s}){De();const{classNames:n,isDisabled:o,isInvalid:l}=r.useContext(g),{isActive:c,rootProps:u}=Pe({onBlur:t,onFocus:s}),f=[n.root];return c&&f.push(n.rootIsActive),o&&f.push(n.rootIsDisabled),l&&f.push(n.rootIsInvalid),r.createElement("div",{className:f.join(" "),...u},e)}const He=({classNames:e,tag:t,...s})=>r.createElement("button",{type:"button",className:e.tag,...s},r.createElement("span",{className:e.tagName},t.label));function Ge({render:e=He,index:t,title:s}){const{classNames:n}=r.useContext(g),{tag:o,tagProps:l}=Te(t,s);return e({classNames:n,tag:o,...l})}function qe({children:e,label:t}){const{classNames:s,tagListRef:n}=r.useContext(g);return r.createElement("ul",{className:s.tagList,"aria-label":t,ref:n,role:"list"},e.map(o=>r.createElement("li",{className:s.tagListItem,key:o.key,role:"listitem"},o)))}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"},Qe=[C.Enter];function Xe({allowBackspace:e=!0,allowNew:t=!1,allowResize:s=!0,ariaAddedText:n="Added tag %value%",ariaDescribedBy:o,ariaErrorMessage:l,ariaDeletedText:c="Removed tag %value%",classNames:u=Je,closeOnSelect:f=!1,deleteButtonText:a="Remove %value% from the list",delimiterKeys:m=Qe,id:x="react-tags",isDisabled:D=!1,isInvalid:w=!1,labelText:b="Select tags",newOptionText:A="Add %value%",noOptionsText:h="No options found for %value%",onAdd:I,onBlur:S,onCollapse:v,onDelete:T,onExpand:E,onFocus:k,onInput:R,onValidate:N,placeholderText:B="Add a tag",renderLabel:i,renderOption:p,renderTag:d,selected:y=[],startWithFirstOption:X=!1,suggestions:Y=[],suggestionsTransform:Z=be,tagListLabelText:ee="Selected tags"},_){const te=r.useRef(null),F=r.useRef(null),ne=r.useRef(null),re=r.useRef(null),se=r.useRef(null),L=Se({allowNew:t,closeOnSelect:f,newOptionText:A,noOptionsText:h,onAdd:I,onDelete:T,onCollapse:v,onExpand:E,onInput:R,onValidate:N,selected:y,startWithFirstOption:X,suggestions:Y,suggestionsTransform:Z}),j=Be({inputRef:F,managerRef:L});return _&&(typeof _=="function"?_(j):_.current=j),r.createElement(g.Provider,{value:{classNames:u,comboBoxRef:te,id:x,inputRef:F,isDisabled:D,isInvalid:w,listBoxRef:ne,managerRef:L,rootRef:re,tagListRef:se}},r.createElement(We,{onBlur:S,onFocus:k},r.createElement($e,{render:i},b),r.createElement(qe,{label:ee},L.current.state.selected.map(($,M)=>r.createElement(Ge,{key:U($),index:M,render:d,title:a}))),r.createElement(Le,null,r.createElement(Oe,{allowBackspace:e,allowResize:s,delimiterKeys:m,placeholderText:B,ariaDescribedBy:o,ariaErrorMessage:l}),r.createElement(Me,null,L.current.state.options.map(($,M)=>r.createElement(Ve,{key:U($),index:M,render:p})))),r.createElement(_e,{ariaAddedText:n,ariaDeletedText:c})))}const Ye=r.forwardRef(Xe);exports.ReactTags=Ye;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),R={Enter:"Enter",Escape:"Escape",Tab:"Tab",Backspace:"Backspace",UpArrow:"ArrowUp",UpArrowCompat:"Up",DownArrow:"ArrowDown",DownArrowCompat:"Down",PageDown:"PageDown",PageUp:"PageUp"},z=Symbol("Create new tag"),H=Symbol("No options"),P=()=>{},g=r.createContext(void 0);function W(e,t){return e===t?[]:e.filter(s=>!t.includes(s))}function oe(e){return e.selectionStart===0&&e.selectionEnd===0}function ae(e){const t=e.value.length;return e.selectionStart===t&&e.selectionEnd===t}function K(e){return`${e}-label`}function ce(e){return`${e}-combobox`}function ie(e){return`${e}-input`}function G(e){return`${e}-listbox`}function q(e,t){return`${e}-option-${ge(t)}`}function ue(e,t){if((e==null?void 0:e.value)===z&&e.disabled===!1)return{value:t,label:t}}function le(e){const t=ue(e.activeOption,e.value)||e.activeOption||ye(e.value,e.options);return t&&!t.disabled?t:void 0}function fe(e,t,s){const n=t-1;return e>n?s:e<s?n:e}const de=/%value%/;function O(e,t){return e.replace(de,t)}const pe=/\s+/g;function U(e){return`${String(e.value)}-${e.label}`}function ge(e){return U(e).replace(pe,"_")}function V(e,t){return t.findIndex(({value:s})=>s===e.value)}const me=/[-\\^$*+?.()|[\]{}]/g;function J(e){return e.replace(me,"\\$&")}function Q(e){return new RegExp(`${J(e)}`,"i")}function xe(e){return new RegExp(`^${J(e)}$`,"i")}function ve(e){const t=Q(e);return s=>t.test(s)}function be(e){const t=xe(e);return s=>t.test(s)}function Ee(e,t){if(e==="")return[].concat(t);{const s=ve(e);return t.filter(n=>s(n.label))}}function ye(e,t){const s=be(e);return t.find(n=>s(n.label))||null}const Ie={autoComplete:"off",autoCorrect:"off","data-form-type":"other",spellCheck:!1};function he({allowBackspace:e,ariaDescribedBy:t,ariaErrorMessage:s,delimiterKeys:n}){const{id:o,comboBoxRef:l,inputRef:c,isDisabled:u,isInvalid:f,managerRef:a}=r.useContext(g),m=r.useMemo(()=>{const v=i=>{const p=i.currentTarget.value;a.current.updateInputValue(p),document.activeElement===c.current&&a.current.listBoxExpand()},w=()=>{a.current.listBoxExpand()},y=i=>{var p;((p=l.current)==null?void 0:p.contains(i.relatedTarget))===!1&&a.current.listBoxCollapse()},I=()=>{a.current.listBoxExpand()},A=i=>{const{activeIndex:p,isExpanded:d}=a.current.state;d?(i.preventDefault(),a.current.updateActiveIndex(p+1)):(ae(i.currentTarget)||i.altKey)&&(i.preventDefault(),a.current.listBoxExpand())},b=i=>{const{activeIndex:p,isExpanded:d}=a.current.state;d?(i.preventDefault(),a.current.updateActiveIndex(p-1)):oe(i.currentTarget)&&(i.preventDefault(),a.current.listBoxExpand())},T=i=>{const{isExpanded:p,options:d}=a.current.state;p&&(i.preventDefault(),a.current.updateActiveIndex(d.length-1))},E=i=>{a.current.state.isExpanded&&(i.preventDefault(),a.current.updateActiveIndex(0))},S=()=>{a.current.state.isExpanded?a.current.listBoxCollapse():a.current.updateInputValue("")},h=()=>{if(e){const{value:i,selected:p}=a.current.state,d=p[p.length-1];i===""&&d&&a.current.selectTag(d)}},N=i=>{a.current.state.isExpanded&&(i.preventDefault(),a.current.selectTag())};return{onBlur:y,onChange:v,onClick:I,onFocus:w,onKeyDown:i=>{if(i.key===R.UpArrow)return b(i);if(i.key===R.DownArrow)return A(i);if(i.key===R.PageUp)return E(i);if(i.key===R.PageDown)return T(i);if(i.key===R.Escape)return S();if(i.key===R.Backspace)return h();if(n.includes(i.key))return N(i)}}},[e,l,n,c,a]),{activeOption:x,isExpanded:C,value:D}=a.current.state;return{...Ie,"aria-autocomplete":"list","aria-activedescendant":x?q(o,x):void 0,"aria-describedby":t||void 0,"aria-disabled":u,"aria-errormessage":f&&s||void 0,"aria-invalid":f,"aria-labelledby":K(o),"aria-expanded":C,"aria-owns":G(o),id:ie(o),onBlur:u?P:m.onBlur,onChange:u?P:m.onChange,onClick:u?P:m.onClick,onFocus:u?P:m.onFocus,onKeyDown:u?P:m.onKeyDown,ref:c,role:"combobox",type:"text",value:D}}const Re={position:"absolute",width:0,height:0,visibility:"hidden",overflow:"scroll",whiteSpace:"pre"},Ce=["font-family","font-size","font-style","font-weight","letter-spacing","text-transform"];function De({allowResize:e=!0,text:t}){const s=r.useRef(null),{inputRef:n}=r.useContext(g),[o,l]=r.useState(0);return r.useEffect(()=>{if(n.current){const c=window.getComputedStyle(n.current);Ce.forEach(u=>{var a;const f=c.getPropertyValue(u);(a=s.current)==null||a.style.setProperty(u,f)})}},[n,s]),r.useLayoutEffect(()=>{var c;if(e){const u=Math.ceil(((c=s.current)==null?void 0:c.scrollWidth)??0)+2;o!==u&&l(u)}},[e,t,o]),{width:o,sizerProps:{ref:s,style:Re}}}function we(){var l;const{inputRef:e,managerRef:t,tagListRef:s}=r.useContext(g),n=t.current.flags.tagsDeleted.length,o=(l=s.current)==null?void 0:l.contains(document.activeElement);r.useEffect(()=>{var c,u;if(n){const f=(c=s.current)==null?void 0:c.contains(document.activeElement);o&&!f&&((u=e.current)==null||u.focus({preventScroll:!0}))}},[e,o,s,n])}function Ae(){const{id:e,inputRef:t,listBoxRef:s,managerRef:n}=r.useContext(g),o=n.current.state.activeIndex===-1,l=r.useCallback(c=>{var u;c.target!==t.current&&((u=t.current)==null||u.focus({preventScroll:!0}))},[t]);return r.useEffect(()=>{var c;o&&((c=s.current)==null||c.scrollTo({top:0}))},[s,o]),{"aria-labelledby":K(e),id:G(e),onFocus:l,ref:s,role:"listbox",tabIndex:-1}}function Se({allowNew:e,closeOnSelect:t,newOptionText:s,noOptionsText:n,onAdd:o,onDelete:l,onCollapse:c,onExpand:u,onInput:f,onValidate:a,selected:m,startWithFirstOption:x,suggestions:C,suggestionsTransform:D}){const v=r.useRef(),[w,y]=r.useState(null),[I,A]=r.useState(!1),[b,T]=r.useState(""),E=r.useMemo(()=>{const d=D(b,C);return b&&(e&&d.push({disabled:typeof a=="function"?!a(b):!1,label:s,value:z}),d.length===0&&d.push({disabled:!0,label:n,value:H})),d},[e,s,n,a,C,D,b]),S=w?V(w,E):-1,h=x?Math.max(S,0):S,N=E[h],k={activeIndex:h,activeOption:N,isExpanded:I,options:E,selected:m,value:b},i={tagsAdded:v.current?W(m,v.current.state.selected):[],tagsDeleted:v.current?W(v.current.state.selected,m):[]},p={listBoxCollapse(){I&&(A(!1),y(null),c==null||c())},listBoxExpand(){I||(A(!0),y(E[h]),u==null||u())},updateActiveIndex(d){const B=fe(d,E.length,x?0:-1);y(E[B])},updateInputValue(d){b!==d&&(T(d),f==null||f(d))},selectTag(d){if(d??(d=le(k)),d){const B=V(d,k.selected);B>-1?l(B):o(d),t&&this.listBoxCollapse(),this.updateInputValue("")}}};return v.current={...p,flags:i,state:k},v}function ke(e){const{id:t,inputRef:s,managerRef:n}=r.useContext(g),o=r.useRef(null),l=n.current.state.options[e],c=e===n.current.state.activeIndex,u=l.disabled??!1,f=V(l,n.current.state.selected)>-1,a=r.useCallback(()=>{var x;n.current.selectTag(),(x=s.current)==null||x.focus()},[s,n]),m=r.useCallback(()=>{e!==n.current.state.activeIndex&&n.current.updateActiveIndex(e)},[e,n]);return r.useEffect(()=>{var x;c&&((x=o.current)==null||x.scrollIntoView({block:"nearest",inline:"start"}))},[c,n.current.state.options]),{option:{...l,active:c,disabled:u,index:e,selected:f},optionProps:{"aria-disabled":u,"aria-posinset":e+1,"aria-selected":u?void 0:f,"aria-setsize":n.current.state.options.length,id:q(t,l),onClick:a,onMouseDown:m,ref:o,role:"option",tabIndex:-1}}}function Be({inputRef:e,managerRef:t}){return r.useRef({input:{blur(){var n;(n=e.current)==null||n.blur()},focus(){var n;(n=e.current)==null||n.focus()},get value(){return t.current.state.value},set value(n){typeof n!="string"&&(n=String(n)),t.current.updateInputValue(n)}},listBox:{collapse(){t.current.listBoxCollapse()},expand(){t.current.listBoxExpand()},get activeOption(){return t.current.state.activeOption},get isExpanded(){return t.current.state.isExpanded}},select(n){t.current.selectTag(n)}}).current}function Pe({onBlur:e,onFocus:t}){const[s,n]=r.useState(!1),{id:o,inputRef:l,rootRef:c}=r.useContext(g),u=r.useMemo(()=>({"aria-describedby":K(o),id:o,onFocus(){n(!0),t==null||t()},onBlur(){var f;(f=c.current)!=null&&f.contains(document.activeElement)||(n(!1),e==null||e())},onClick(){var f;document.activeElement===c.current&&((f=l.current)==null||f.focus())},ref:c,tabIndex:-1}),[l,o,e,t,c]);return{isActive:s,rootProps:u}}function Te(e,t){const{isDisabled:s,managerRef:n}=r.useContext(g),o=n.current.state.selected[e],l=r.useCallback(()=>n.current.selectTag(o),[n,o]);return{tag:o,tagProps:{"aria-disabled":s,title:O(t,o.label),onClick:s?P:l}}}const Ne={position:"absolute",width:1,height:1,left:-9999,overflow:"hidden",clip:"rect(0 0 0 0)"};function _e({ariaAddedText:e,ariaDeletedText:t}){const{managerRef:s}=r.useContext(g),n=r.useRef([]);return s.current.flags.tagsAdded.forEach(o=>{n.current.push(O(e,o.label))}),s.current.flags.tagsDeleted.forEach(o=>{n.current.push(O(t,o.label))}),r.createElement("div",{"aria-live":"polite","aria-relevant":"additions",role:"status",style:Ne},n.current.join(`
+`))}function Le({children:e}){const{classNames:t,comboBoxRef:s,id:n}=r.useContext(g);return r.createElement("div",{className:t.comboBox,id:ce(n),ref:s},e)}function Oe({allowBackspace:e=!0,allowResize:t=!0,ariaDescribedBy:s,ariaErrorMessage:n,delimiterKeys:o,placeholderText:l}){const{classNames:c}=r.useContext(g),{value:u,...f}=he({allowBackspace:e,ariaDescribedBy:s,ariaErrorMessage:n,delimiterKeys:o}),a=u.length<l.length?l:u,{sizerProps:m,width:x}=De({allowResize:t,text:a});return r.createElement(r.Fragment,null,r.createElement("input",{className:c.input,placeholder:l,style:{width:x},value:u,...f}),t?r.createElement("div",{...m},a):null)}const Ke=({children:e,classNames:t,id:s})=>r.createElement("div",{className:t.label,id:s},e);function $e({children:e,render:t=Ke}){const{classNames:s,id:n}=r.useContext(g);return t({children:e,classNames:s,id:K(n)})}function Me({children:e}){const{classNames:t,managerRef:s}=r.useContext(g),n=Ae();return!s.current.state.isExpanded||r.Children.count(e)===0?null:r.createElement("div",{className:t.listBox,...n},e)}const Ue=({children:e,classNames:t,option:s,...n})=>{const o=[t.option];return s.active&&o.push(t.optionIsActive),r.createElement("div",{className:o.join(" "),...n},e)};function Ve({index:e,render:t=Ue}){const{classNames:s,managerRef:n}=r.useContext(g),{option:o,optionProps:l}=ke(e),c=r.createElement(je,{option:o,query:n.current.state.value});return t({classNames:s,children:c,option:o,...l})}function ze(e,t){const s=Q(t);return e.replace(s,"<mark>$&</mark>")}function Fe({option:e,query:t}){return e.value===z||e.value===H?r.createElement("span",null,O(e.label,t)):r.createElement("span",{dangerouslySetInnerHTML:{__html:ze(e.label,t)}})}const je=r.memo(Fe);function We({children:e,onBlur:t,onFocus:s}){we();const{classNames:n,isDisabled:o,isInvalid:l}=r.useContext(g),{isActive:c,rootProps:u}=Pe({onBlur:t,onFocus:s}),f=[n.root];return c&&f.push(n.rootIsActive),o&&f.push(n.rootIsDisabled),l&&f.push(n.rootIsInvalid),r.createElement("div",{className:f.join(" "),...u},e)}const He=({classNames:e,tag:t,...s})=>r.createElement("button",{type:"button",className:e.tag,...s},r.createElement("span",{className:e.tagName},t.label));function Ge({render:e=He,index:t,title:s}){const{classNames:n}=r.useContext(g),{tag:o,tagProps:l}=Te(t,s);return e({classNames:n,tag:o,...l})}function qe({children:e,label:t}){const{classNames:s,tagListRef:n}=r.useContext(g);return r.createElement("ul",{className:s.tagList,"aria-label":t,ref:n,role:"list"},e.map(o=>r.createElement("li",{className:s.tagListItem,key:o.key,role:"listitem"},o)))}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"},Qe=[R.Enter];function Xe({allowBackspace:e=!0,allowNew:t=!1,allowResize:s=!0,ariaAddedText:n="Added tag %value%",ariaDescribedBy:o,ariaErrorMessage:l,ariaDeletedText:c="Removed tag %value%",classNames:u=Je,closeOnSelect:f=!1,deleteButtonText:a="Remove %value% from the list",delimiterKeys:m=Qe,id:x="react-tags",isDisabled:C=!1,isInvalid:D=!1,labelText:v="Select tags",newOptionText:w="Add %value%",noOptionsText:y="No options found for %value%",onAdd:I,onBlur:A,onCollapse:b,onDelete:T,onExpand:E,onFocus:S,onInput:h,onValidate:N,placeholderText:k="Add a tag",renderLabel:i,renderOption:p,renderTag:d,selected:B=[],startWithFirstOption:X=!1,suggestions:Y=[],suggestionsTransform:Z=Ee,tagListLabelText:ee="Selected tags"},_){const te=r.useRef(null),F=r.useRef(null),ne=r.useRef(null),re=r.useRef(null),se=r.useRef(null),L=Se({allowNew:t,closeOnSelect:f,newOptionText:w,noOptionsText:y,onAdd:I,onDelete:T,onCollapse:b,onExpand:E,onInput:h,onValidate:N,selected:B,startWithFirstOption:X,suggestions:Y,suggestionsTransform:Z}),j=Be({inputRef:F,managerRef:L});return _&&(typeof _=="function"?_(j):_.current=j),r.createElement(g.Provider,{value:{classNames:u,comboBoxRef:te,id:x,inputRef:F,isDisabled:C,isInvalid:D,listBoxRef:ne,managerRef:L,rootRef:re,tagListRef:se}},r.createElement(We,{onBlur:A,onFocus:S},r.createElement($e,{render:i},v),r.createElement(qe,{label:ee},L.current.state.selected.map(($,M)=>r.createElement(Ge,{key:U($),index:M,render:d,title:a}))),r.createElement(Le,null,r.createElement(Oe,{allowBackspace:e,allowResize:s,delimiterKeys:m,placeholderText:k,ariaDescribedBy:o,ariaErrorMessage:l}),r.createElement(Me,null,L.current.state.options.map(($,M)=>r.createElement(Ve,{key:U($),index:M,render:p})))),r.createElement(_e,{ariaAddedText:n,ariaDeletedText:c})))}const Ye=r.forwardRef(Xe);exports.ReactTags=Ye;

dist/ReactTags.es.js

@@ -1,3 +0,3 @@
-import u, { useContext as m, useMemo as G, useRef as y, useState as K, useEffect as O, useCallback as V } from "react";
-const A = {
+import u, { useContext as m, useMemo as G, useRef as I, useState as O, useEffect as M, useLayoutEffect as de, useCallback as U } from "react";
+const w = {
   Enter: "Enter",
@@ -18,6 +18,6 @@ Escape: "Escape",
 }
-function de(e) {
+function fe(e) {
   return e.selectionStart === 0 && e.selectionEnd === 0;
 }
-function fe(e) {
+function pe(e) {
   const t = e.value.length;
@@ -29,6 +29,6 @@ return e.selectionStart === t && e.selectionEnd === t;
 }
-function pe(e) {
+function ge(e) {
   return `${e}-combobox`;
 }
-function ge(e) {
+function me(e) {
   return `${e}-input`;
@@ -40,22 +40,26 @@ }
 function ee(e, t) {
-  return `${e}-option-${Ee(t)}`;
+  return `${e}-option-${Ie(t)}`;
 }
-function me(e, t) {
+function ve(e, t) {
   if ((e == null ? void 0 : e.value) === J && e.disabled === !1)
     return { value: t, label: t };
 }
-function ve(e) {
-  const t = me(e.activeOption, e.value) || e.activeOption || we(e.value, e.options);
+function xe(e) {
+  const t = ve(e.activeOption, e.value) || e.activeOption || Be(e.value, e.options);
   return t && !t.disabled ? t : void 0;
 }
-const xe = /%value%/;
-function M(e, t) {
-  return e.replace(xe, t);
+function be(e, t, r) {
+  const n = t - 1;
+  return e > n ? r : e < r ? n : e;
 }
-const be = /\s+/g;
+const Ee = /%value%/;
+function V(e, t) {
+  return e.replace(Ee, t);
+}
+const ye = /\s+/g;
 function j(e) {
   return `${String(e.value)}-${e.label}`;
 }
-function Ee(e) {
-  return j(e).replace(be, "_");
+function Ie(e) {
+  return j(e).replace(ye, "_");
 }
@@ -72,26 +76,26 @@ function H(e, t) {
 }
-function ye(e) {
+function De(e) {
   return new RegExp(`^${te(e)}$`, "i");
 }
-function Ie(e) {
+function Re(e) {
   const t = ne(e);
   return (r) => t.test(r);
 }
-function De(e) {
-  const t = ye(e);
+function we(e) {
+  const t = De(e);
   return (r) => t.test(r);
 }
-function Re(e, t) {
+function Ae(e, t) {
   if (e === "")
     return [].concat(t);
   {
-    const r = Ie(e);
+    const r = Re(e);
     return t.filter((n) => r(n.label));
   }
 }
-function we(e, t) {
-  const r = De(e);
+function Be(e, t) {
+  const r = we(e);
   return t.find((n) => r(n.label)) || null;
 }
-const Ae = {
+const Ce = {
   autoComplete: "off",
@@ -102,3 +106,3 @@ autoCorrect: "off",
 };
-function Be({
+function Pe({
   allowBackspace: e,
@@ -110,26 +114,26 @@ ariaDescribedBy: t,
   const { id: s, comboBoxRef: l, inputRef: o, isDisabled: i, isInvalid: d, managerRef: a } = m(g), v = G(() => {
-    const E = (c) => {
+    const b = (c) => {
       const p = c.currentTarget.value;
       a.current.updateInputValue(p), document.activeElement === o.current && a.current.listBoxExpand();
-    }, P = () => {
+    }, C = () => {
       a.current.listBoxExpand();
-    }, D = (c) => {
+    }, h = (c) => {
       var p;
       ((p = l.current) == null ? void 0 : p.contains(c.relatedTarget)) === !1 && a.current.listBoxCollapse();
-    }, R = () => {
+    }, D = () => {
       a.current.listBoxExpand();
-    }, k = (c) => {
+    }, P = (c) => {
       const { activeIndex: p, isExpanded: f } = a.current.state;
-      f ? (c.preventDefault(), a.current.updateActiveIndex(p + 1)) : (fe(c.currentTarget) || c.altKey) && (c.preventDefault(), a.current.listBoxExpand());
-    }, b = (c) => {
+      f ? (c.preventDefault(), a.current.updateActiveIndex(p + 1)) : (pe(c.currentTarget) || c.altKey) && (c.preventDefault(), a.current.listBoxExpand());
+    }, E = (c) => {
       const { activeIndex: p, isExpanded: f } = a.current.state;
-      f ? (c.preventDefault(), a.current.updateActiveIndex(p - 1)) : de(c.currentTarget) && (c.preventDefault(), a.current.listBoxExpand());
+      f ? (c.preventDefault(), a.current.updateActiveIndex(p - 1)) : fe(c.currentTarget) && (c.preventDefault(), a.current.listBoxExpand());
     }, _ = (c) => {
       const { isExpanded: p, options: f } = a.current.state;
       p && (c.preventDefault(), a.current.updateActiveIndex(f.length - 1));
-    }, h = (c) => {
+    }, y = (c) => {
       a.current.state.isExpanded && (c.preventDefault(), a.current.updateActiveIndex(0));
-    }, T = () => {
+    }, k = () => {
       a.current.state.isExpanded ? a.current.listBoxCollapse() : a.current.updateInputValue("");
-    }, w = () => {
+    }, R = () => {
       if (e) {
@@ -142,21 +146,21 @@ const { value: c, selected: p } = a.current.state, f = p[p.length - 1];
     };
-    return { onBlur: D, onChange: E, onClick: R, onFocus: P, onKeyDown: (c) => {
-      if (c.key === A.UpArrow)
-        return b(c);
-      if (c.key === A.DownArrow)
-        return k(c);
-      if (c.key === A.PageUp)
-        return h(c);
-      if (c.key === A.PageDown)
+    return { onBlur: h, onChange: b, onClick: D, onFocus: C, onKeyDown: (c) => {
+      if (c.key === w.UpArrow)
+        return E(c);
+      if (c.key === w.DownArrow)
+        return P(c);
+      if (c.key === w.PageUp)
+        return y(c);
+      if (c.key === w.PageDown)
         return _(c);
-      if (c.key === A.Escape)
-        return T();
-      if (c.key === A.Backspace)
-        return w();
+      if (c.key === w.Escape)
+        return k();
+      if (c.key === w.Backspace)
+        return R();
       if (n.includes(c.key))
         return L(c);
     } };
-  }, [e, l, n, o, a]), { activeOption: x, isExpanded: B, value: C } = a.current.state;
+  }, [e, l, n, o, a]), { activeOption: x, isExpanded: A, value: B } = a.current.state;
   return {
-    ...Ae,
+    ...Ce,
     "aria-autocomplete": "list",
@@ -169,5 +173,5 @@ "aria-activedescendant": x ? ee(s, x) : void 0,
     "aria-labelledby": z(s),
-    "aria-expanded": B,
+    "aria-expanded": A,
     "aria-owns": q(s),
-    id: ge(s),
+    id: me(s),
     onBlur: i ? S : v.onBlur,
@@ -181,6 +185,6 @@ onChange: i ? S : v.onChange,
     type: "text",
-    value: C
+    value: B
   };
 }
-const Ce = {
+const ke = {
   position: "absolute",
@@ -192,3 +196,3 @@ width: 0,
   whiteSpace: "pre"
-}, Pe = [
+}, Te = [
   "font-family",
@@ -201,8 +205,8 @@ "font-size",
 ];
-function ke({ allowResize: e = !0, text: t }) {
-  const r = y(null), { inputRef: n } = m(g), [s, l] = K(0);
-  return O(() => {
+function Ne({ allowResize: e = !0, text: t }) {
+  const r = I(null), { inputRef: n } = m(g), [s, l] = O(0);
+  return M(() => {
     if (n.current) {
       const o = window.getComputedStyle(n.current);
-      Pe.forEach((i) => {
+      Te.forEach((i) => {
         var a;
@@ -213,3 +217,3 @@ const d = o.getPropertyValue(i);
     }
-  }, [n, r]), O(() => {
+  }, [n, r]), de(() => {
     var o;
@@ -224,10 +228,10 @@ if (e) {
       ref: r,
-      style: Ce
+      style: ke
     }
   };
 }
-function Te() {
+function Se() {
   var l;
   const { inputRef: e, managerRef: t, tagListRef: r } = m(g), n = t.current.flags.tagsDeleted.length, s = (l = r.current) == null ? void 0 : l.contains(document.activeElement);
-  O(() => {
+  M(() => {
     var o, i;
@@ -240,4 +244,4 @@ if (n) {
 }
-function Ne() {
-  const { id: e, inputRef: t, listBoxRef: r, managerRef: n } = m(g), s = n.current.state.activeIndex === -1, l = V(
+function _e() {
+  const { id: e, inputRef: t, listBoxRef: r, managerRef: n } = m(g), s = n.current.state.activeIndex === -1, l = U(
     (o) => {
@@ -249,3 +253,3 @@ var i;
   );
-  return O(() => {
+  return M(() => {
     var o;
@@ -262,7 +266,3 @@ s && ((o = r.current) == null || o.scrollTo({ top: 0 }));
 }
-function Se(e, t, r) {
-  const n = t - 1;
-  return e > n ? r : e < r ? n : e;
-}
-function _e({
+function Le({
   allowNew: e,
@@ -280,61 +280,57 @@ closeOnSelect: t,
   startWithFirstOption: x,
-  suggestions: B,
-  suggestionsTransform: C
+  suggestions: A,
+  suggestionsTransform: B
 }) {
-  const E = y(), [P, D] = K(null), [R, k] = K(!1), [b, _] = K(""), h = G(() => {
-    const f = C(b, B);
-    if (e && b) {
-      const I = typeof a == "function" ? a(b) : !0;
-      f.push({
-        disabled: !I,
-        label: r,
-        value: J
-      });
-    }
-    return f.length === 0 && b && f.push({
+  const b = I(), [C, h] = O(null), [D, P] = O(!1), [E, _] = O(""), y = G(() => {
+    const f = B(E, A);
+    return E && (e && f.push({
+      disabled: typeof a == "function" ? !a(E) : !1,
+      label: r,
+      value: J
+    }), f.length === 0 && f.push({
       disabled: !0,
       label: n,
       value: Z
-    }), f;
-  }, [e, r, n, a, B, C, b]), T = P ? H(P, h) : -1, w = x ? Math.max(T, 0) : T, L = h[w], N = {
-    activeIndex: w,
+    })), f;
+  }, [e, r, n, a, A, B, E]), k = C ? H(C, y) : -1, R = x ? Math.max(k, 0) : k, L = y[R], T = {
+    activeIndex: R,
     activeOption: L,
-    isExpanded: R,
-    options: h,
+    isExpanded: D,
+    options: y,
     selected: v,
-    value: b
+    value: E
   }, c = {
-    tagsAdded: E.current ? Y(v, E.current.state.selected) : [],
-    tagsDeleted: E.current ? Y(E.current.state.selected, v) : []
+    tagsAdded: b.current ? Y(v, b.current.state.selected) : [],
+    tagsDeleted: b.current ? Y(b.current.state.selected, v) : []
   }, p = {
     listBoxCollapse() {
-      R && (k(!1), D(null), o == null || o());
+      D && (P(!1), h(null), o == null || o());
     },
     listBoxExpand() {
-      R || (k(!0), D(h[w]), i == null || i());
+      D || (P(!0), h(y[R]), i == null || i());
     },
     updateActiveIndex(f) {
-      const I = Se(f, h.length, x ? 0 : -1);
-      D(h[I]);
+      const N = be(f, y.length, x ? 0 : -1);
+      h(y[N]);
     },
     updateInputValue(f) {
-      b !== f && (_(f), d == null || d(f));
+      E !== f && (_(f), d == null || d(f));
     },
     selectTag(f) {
-      if (f ?? (f = ve(N)), f) {
-        const I = H(f, N.selected);
-        I > -1 ? l(I) : s(f), t && this.listBoxCollapse(), this.updateInputValue("");
+      if (f ?? (f = xe(T)), f) {
+        const N = H(f, T.selected);
+        N > -1 ? l(N) : s(f), t && this.listBoxCollapse(), this.updateInputValue("");
       }
     }
   };
-  return E.current = { ...p, flags: c, state: N }, E;
+  return b.current = { ...p, flags: c, state: T }, b;
 }
-function Le(e) {
-  const { id: t, inputRef: r, managerRef: n } = m(g), s = y(null), l = n.current.state.options[e], o = e === n.current.state.activeIndex, i = l.disabled ?? !1, d = H(l, n.current.state.selected) > -1, a = V(() => {
+function Oe(e) {
+  const { id: t, inputRef: r, managerRef: n } = m(g), s = I(null), l = n.current.state.options[e], o = e === n.current.state.activeIndex, i = l.disabled ?? !1, d = H(l, n.current.state.selected) > -1, a = U(() => {
     var x;
     n.current.selectTag(), (x = r.current) == null || x.focus();
-  }, [r, n]), v = V(() => {
+  }, [r, n]), v = U(() => {
     e !== n.current.state.activeIndex && n.current.updateActiveIndex(e);
   }, [e, n]);
-  return O(() => {
+  return M(() => {
     var x;
@@ -365,3 +361,3 @@ o && ((x = s.current) == null || x.scrollIntoView({ block: "nearest", inline: "start" }));
 function Ke({ inputRef: e, managerRef: t }) {
-  return y({
+  return I({
     input: {
@@ -402,4 +398,4 @@ blur() {
 }
-function Oe({ onBlur: e, onFocus: t }) {
-  const [r, n] = K(!1), { id: s, inputRef: l, rootRef: o } = m(g), i = G(() => ({
+function $e({ onBlur: e, onFocus: t }) {
+  const [r, n] = O(!1), { id: s, inputRef: l, rootRef: o } = m(g), i = G(() => ({
     "aria-describedby": z(s),
@@ -426,4 +422,4 @@ id: s,
 }
-function $e(e, t) {
-  const { isDisabled: r, managerRef: n } = m(g), s = n.current.state.selected[e], l = V(() => n.current.selectTag(s), [n, s]);
+function Ue(e, t) {
+  const { isDisabled: r, managerRef: n } = m(g), s = n.current.state.selected[e], l = U(() => n.current.selectTag(s), [n, s]);
   return {
@@ -433,3 +429,3 @@ tag: s,
       "aria-disabled": r,
-      title: M(t, s.label),
+      title: V(t, s.label),
       onClick: r ? S : l
@@ -439,3 +435,3 @@ }
 }
-const Ue = {
+const Ve = {
   position: "absolute",
@@ -448,16 +444,16 @@ width: 1,
 };
-function Ve({ ariaAddedText: e, ariaDeletedText: t }) {
-  const { managerRef: r } = m(g), n = y([]);
+function Me({ ariaAddedText: e, ariaDeletedText: t }) {
+  const { managerRef: r } = m(g), n = I([]);
   return r.current.flags.tagsAdded.forEach((s) => {
-    n.current.push(M(e, s.label));
+    n.current.push(V(e, s.label));
   }), r.current.flags.tagsDeleted.forEach((s) => {
-    n.current.push(M(t, s.label));
-  }), /* @__PURE__ */ u.createElement("div", { "aria-live": "polite", "aria-relevant": "additions", role: "status", style: Ue }, n.current.join(`
+    n.current.push(V(t, s.label));
+  }), /* @__PURE__ */ u.createElement("div", { "aria-live": "polite", "aria-relevant": "additions", role: "status", style: Ve }, n.current.join(`
 `));
 }
-function Me({ children: e }) {
+function ze({ children: e }) {
   const { classNames: t, comboBoxRef: r, id: n } = m(g);
-  return /* @__PURE__ */ u.createElement("div", { className: t.comboBox, id: pe(n), ref: r }, e);
+  return /* @__PURE__ */ u.createElement("div", { className: t.comboBox, id: ge(n), ref: r }, e);
 }
-function ze({
+function Fe({
   allowBackspace: e = !0,
@@ -470,3 +466,3 @@ allowResize: t = !0,
 }) {
-  const { classNames: o } = m(g), { value: i, ...d } = Be({
+  const { classNames: o } = m(g), { value: i, ...d } = Pe({
     allowBackspace: e,
@@ -476,3 +472,3 @@ ariaDescribedBy: r,
     delimiterKeys: s
-  }), a = i.length < l.length ? l : i, { sizerProps: v, width: x } = ke({ allowResize: t, text: a });
+  }), a = i.length < l.length ? l : i, { sizerProps: v, width: x } = Ne({ allowResize: t, text: a });
   return /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
@@ -489,42 +485,42 @@ "input",
 }
-const Fe = ({ children: e, classNames: t, id: r }) => /* @__PURE__ */ u.createElement("div", { className: t.label, id: r }, e);
-function We({ children: e, render: t = Fe }) {
+const We = ({ children: e, classNames: t, id: r }) => /* @__PURE__ */ u.createElement("div", { className: t.label, id: r }, e);
+function je({ children: e, render: t = We }) {
   const { classNames: r, id: n } = m(g);
   return t({ children: e, classNames: r, id: z(n) });
 }
-function je({ children: e }) {
-  const { classNames: t, managerRef: r } = m(g), n = Ne();
+function He({ children: e }) {
+  const { classNames: t, managerRef: r } = m(g), n = _e();
   return !r.current.state.isExpanded || u.Children.count(e) === 0 ? null : /* @__PURE__ */ u.createElement("div", { className: t.listBox, ...n }, e);
 }
-const He = ({ children: e, classNames: t, option: r, ...n }) => {
+const Ge = ({ children: e, classNames: t, option: r, ...n }) => {
   const s = [t.option];
   return r.active && s.push(t.optionIsActive), /* @__PURE__ */ u.createElement("div", { className: s.join(" "), ...n }, e);
 };
-function Ge({ index: e, render: t = He }) {
-  const { classNames: r, managerRef: n } = m(g), { option: s, optionProps: l } = Le(e), o = /* @__PURE__ */ u.createElement(Xe, { option: s, query: n.current.state.value });
+function Je({ index: e, render: t = Ge }) {
+  const { classNames: r, managerRef: n } = m(g), { option: s, optionProps: l } = Oe(e), o = /* @__PURE__ */ u.createElement(Ye, { option: s, query: n.current.state.value });
   return t({ classNames: r, children: o, option: s, ...l });
 }
-function Je(e, t) {
+function Qe(e, t) {
   const r = ne(t);
   return e.replace(r, "<mark>$&</mark>");
 }
-function Qe({ option: e, query: t }) {
-  return e.value === J || e.value === Z ? /* @__PURE__ */ u.createElement("span", null, M(e.label, t)) : /* @__PURE__ */ u.createElement("span", { dangerouslySetInnerHTML: { __html: Je(e.label, t) } });
+function Xe({ option: e, query: t }) {
+  return e.value === J || e.value === Z ? /* @__PURE__ */ u.createElement("span", null, V(e.label, t)) : /* @__PURE__ */ u.createElement("span", { dangerouslySetInnerHTML: { __html: Qe(e.label, t) } });
 }
-const Xe = u.memo(Qe);
-function Ye({ children: e, onBlur: t, onFocus: r }) {
-  Te();
-  const { classNames: n, isDisabled: s, isInvalid: l } = m(g), { isActive: o, rootProps: i } = Oe({ onBlur: t, onFocus: r }), d = [n.root];
+const Ye = u.memo(Xe);
+function Ze({ children: e, onBlur: t, onFocus: r }) {
+  Se();
+  const { classNames: n, isDisabled: s, isInvalid: l } = m(g), { isActive: o, rootProps: i } = $e({ onBlur: t, onFocus: r }), d = [n.root];
   return o && d.push(n.rootIsActive), s && d.push(n.rootIsDisabled), l && d.push(n.rootIsInvalid), /* @__PURE__ */ u.createElement("div", { className: d.join(" "), ...i }, e);
 }
-const Ze = ({ classNames: e, tag: t, ...r }) => /* @__PURE__ */ u.createElement("button", { type: "button", className: e.tag, ...r }, /* @__PURE__ */ u.createElement("span", { className: e.tagName }, t.label));
-function qe({ render: e = Ze, index: t, title: r }) {
-  const { classNames: n } = m(g), { tag: s, tagProps: l } = $e(t, r);
+const qe = ({ classNames: e, tag: t, ...r }) => /* @__PURE__ */ u.createElement("button", { type: "button", className: e.tag, ...r }, /* @__PURE__ */ u.createElement("span", { className: e.tagName }, t.label));
+function et({ render: e = qe, index: t, title: r }) {
+  const { classNames: n } = m(g), { tag: s, tagProps: l } = Ue(t, r);
   return e({ classNames: n, tag: s, ...l });
 }
-function et({ children: e, label: t }) {
+function tt({ children: e, label: t }) {
   const { classNames: r, tagListRef: n } = m(g);
   return /* @__PURE__ */ u.createElement("ul", { className: r.tagList, "aria-label": t, ref: n, role: "list" }, e.map((s) => /* @__PURE__ */ u.createElement("li", { className: r.tagListItem, key: s.key, role: "listitem" }, s)));
 }
-const tt = {
+const nt = {
   root: "react-tags",
@@ -545,4 +541,4 @@ rootIsActive: "is-active",
   optionIsActive: "is-active"
-}, nt = [A.Enter];
-function rt({
+}, rt = [w.Enter];
+function st({
   allowBackspace: e = !0,
@@ -555,47 +551,47 @@ allowNew: t = !1,
   ariaDeletedText: o = "Removed tag %value%",
-  classNames: i = tt,
+  classNames: i = nt,
   closeOnSelect: d = !1,
   deleteButtonText: a = "Remove %value% from the list",
-  delimiterKeys: v = nt,
+  delimiterKeys: v = rt,
   id: x = "react-tags",
-  isDisabled: B = !1,
-  isInvalid: C = !1,
-  labelText: E = "Select tags",
-  newOptionText: P = "Add %value%",
-  noOptionsText: D = "No options found for %value%",
-  onAdd: R,
-  onBlur: k,
-  onCollapse: b,
+  isDisabled: A = !1,
+  isInvalid: B = !1,
+  labelText: b = "Select tags",
+  newOptionText: C = "Add %value%",
+  noOptionsText: h = "No options found for %value%",
+  onAdd: D,
+  onBlur: P,
+  onCollapse: E,
   onDelete: _,
-  onExpand: h,
-  onFocus: T,
-  onInput: w,
+  onExpand: y,
+  onFocus: k,
+  onInput: R,
   onValidate: L,
-  placeholderText: N = "Add a tag",
+  placeholderText: T = "Add a tag",
   renderLabel: c,
   renderOption: p,
   renderTag: f,
-  selected: I = [],
+  selected: N = [],
   startWithFirstOption: re = !1,
   suggestions: se = [],
-  suggestionsTransform: ae = Re,
+  suggestionsTransform: ae = Ae,
   tagListLabelText: oe = "Selected tags"
-}, $) {
-  const ce = y(null), Q = y(null), ie = y(null), le = y(null), ue = y(null), U = _e({
+}, K) {
+  const ce = I(null), Q = I(null), ie = I(null), le = I(null), ue = I(null), $ = Le({
     allowNew: t,
     closeOnSelect: d,
-    newOptionText: P,
-    noOptionsText: D,
-    onAdd: R,
+    newOptionText: C,
+    noOptionsText: h,
+    onAdd: D,
     onDelete: _,
-    onCollapse: b,
-    onExpand: h,
-    onInput: w,
+    onCollapse: E,
+    onExpand: y,
+    onInput: R,
     onValidate: L,
-    selected: I,
+    selected: N,
     startWithFirstOption: re,
     suggestions: se,
     suggestionsTransform: ae
-  }), X = Ke({ inputRef: Q, managerRef: U });
-  return $ && (typeof $ == "function" ? $(X) : $.current = X), /* @__PURE__ */ u.createElement(
+  }), X = Ke({ inputRef: Q, managerRef: $ });
+  return K && (typeof K == "function" ? K(X) : K.current = X), /* @__PURE__ */ u.createElement(
     g.Provider,
@@ -608,6 +604,6 @@ {
         inputRef: Q,
-        isDisabled: B,
-        isInvalid: C,
+        isDisabled: A,
+        isInvalid: B,
         listBoxRef: ie,
-        managerRef: U,
+        managerRef: $,
         rootRef: le,
@@ -617,4 +613,4 @@ tagListRef: ue
     },
-    /* @__PURE__ */ u.createElement(Ye, { onBlur: k, onFocus: T }, /* @__PURE__ */ u.createElement(We, { render: c }, E), /* @__PURE__ */ u.createElement(et, { label: oe }, U.current.state.selected.map((F, W) => /* @__PURE__ */ u.createElement(qe, { key: j(F), index: W, render: f, title: a }))), /* @__PURE__ */ u.createElement(Me, null, /* @__PURE__ */ u.createElement(
-      ze,
+    /* @__PURE__ */ u.createElement(Ze, { onBlur: P, onFocus: k }, /* @__PURE__ */ u.createElement(je, { render: c }, b), /* @__PURE__ */ u.createElement(tt, { label: oe }, $.current.state.selected.map((F, W) => /* @__PURE__ */ u.createElement(et, { key: j(F), index: W, render: f, title: a }))), /* @__PURE__ */ u.createElement(ze, null, /* @__PURE__ */ u.createElement(
+      Fe,
       {
@@ -624,12 +620,12 @@ allowBackspace: e,
         delimiterKeys: v,
-        placeholderText: N,
+        placeholderText: T,
         ariaDescribedBy: s,
         ariaErrorMessage: l
       }
-    ), /* @__PURE__ */ u.createElement(je, null, U.current.state.options.map((F, W) => /* @__PURE__ */ u.createElement(Ge, { key: j(F), index: W, render: p })))), /* @__PURE__ */ u.createElement(Ve, { ariaAddedText: n, ariaDeletedText: o }))
+    ), /* @__PURE__ */ u.createElement(He, null, $.current.state.options.map((F, W) => /* @__PURE__ */ u.createElement(Je, { key: j(F), index: W, render: p })))), /* @__PURE__ */ u.createElement(Me, { ariaAddedText: n, ariaDeletedText: o }))
   );
 }
-const at = u.forwardRef(rt);
+const ot = u.forwardRef(st);
 export {
-  at as ReactTags
+  ot as ReactTags
 };

dist/ReactTags.umd.js

@@ -1,2 +0,2 @@
-(function(h,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(h=typeof globalThis<"u"?globalThis:h||self,s(h.ReactTags={},h.React))})(this,function(h,s){"use strict";const I={Enter:"Enter",Escape:"Escape",Tab:"Tab",Backspace:"Backspace",UpArrow:"ArrowUp",UpArrowCompat:"Up",DownArrow:"ArrowDown",DownArrowCompat:"Down",PageDown:"PageDown",PageUp:"PageUp"},U=Symbol("Create new tag"),W=Symbol("No options"),A=()=>{},p=s.createContext(void 0);function H(e,t){return e===t?[]:e.filter(r=>!t.includes(r))}function Z(e){return e.selectionStart===0&&e.selectionEnd===0}function R(e){const t=e.value.length;return e.selectionStart===t&&e.selectionEnd===t}function et(e){return e}function O(e){return`${e}-label`}function ee(e){return`${e}-combobox`}function te(e){return`${e}-input`}function G(e){return`${e}-listbox`}function q(e,t){return`${e}-option-${ie(t)}`}function ne(e,t){if((e==null?void 0:e.value)===U&&e.disabled===!1)return{value:t,label:t}}function se(e){const t=ne(e.activeOption,e.value)||e.activeOption||de(e.value,e.options);return t&&!t.disabled?t:void 0}const re=/%value%/;function K(e,t){return e.replace(re,t)}const oe=/\s+/g;function V(e){return`${String(e.value)}-${e.label}`}function ie(e){return V(e).replace(oe,"_")}function j(e,t){return t.findIndex(({value:r})=>r===e.value)}const ae=/[-\\^$*+?.()|[\]{}]/g;function J(e){return e.replace(ae,"\\$&")}function Q(e){return new RegExp(`${J(e)}`,"i")}function ce(e){return new RegExp(`^${J(e)}$`,"i")}function ue(e){const t=Q(e);return r=>t.test(r)}function le(e){const t=ce(e);return r=>t.test(r)}function fe(e,t){if(e==="")return[].concat(t);{const r=ue(e);return t.filter(n=>r(n.label))}}function de(e,t){const r=le(e);return t.find(n=>r(n.label))||null}const pe={autoComplete:"off",autoCorrect:"off","data-form-type":"other",spellCheck:!1};function ge({allowBackspace:e,ariaDescribedBy:t,ariaErrorMessage:r,delimiterKeys:n}){const{id:o,comboBoxRef:l,inputRef:a,isDisabled:u,isInvalid:f,managerRef:i}=s.useContext(p),m=s.useMemo(()=>{const b=c=>{const g=c.currentTarget.value;i.current.updateInputValue(g),document.activeElement===a.current&&i.current.listBoxExpand()},k=()=>{i.current.listBoxExpand()},C=c=>{var g;((g=l.current)==null?void 0:g.contains(c.relatedTarget))===!1&&i.current.listBoxCollapse()},D=()=>{i.current.listBoxExpand()},B=c=>{const{activeIndex:g,isExpanded:d}=i.current.state;d?(c.preventDefault(),i.current.updateActiveIndex(g+1)):(R(c.currentTarget)||c.altKey)&&(c.preventDefault(),i.current.listBoxExpand())},v=c=>{const{activeIndex:g,isExpanded:d}=i.current.state;d?(c.preventDefault(),i.current.updateActiveIndex(g-1)):Z(c.currentTarget)&&(c.preventDefault(),i.current.listBoxExpand())},_=c=>{const{isExpanded:g,options:d}=i.current.state;g&&(c.preventDefault(),i.current.updateActiveIndex(d.length-1))},E=c=>{i.current.state.isExpanded&&(c.preventDefault(),i.current.updateActiveIndex(0))},P=()=>{i.current.state.isExpanded?i.current.listBoxCollapse():i.current.updateInputValue("")},w=()=>{if(e){const{value:c,selected:g}=i.current.state,d=g[g.length-1];c===""&&d&&i.current.selectTag(d)}},L=c=>{i.current.state.isExpanded&&(c.preventDefault(),i.current.selectTag())};return{onBlur:C,onChange:b,onClick:D,onFocus:k,onKeyDown:c=>{if(c.key===I.UpArrow)return v(c);if(c.key===I.DownArrow)return B(c);if(c.key===I.PageUp)return E(c);if(c.key===I.PageDown)return _(c);if(c.key===I.Escape)return P();if(c.key===I.Backspace)return w();if(n.includes(c.key))return L(c)}}},[e,l,n,a,i]),{activeOption:x,isExpanded:S,value:T}=i.current.state;return{...pe,"aria-autocomplete":"list","aria-activedescendant":x?q(o,x):void 0,"aria-describedby":t||void 0,"aria-disabled":u,"aria-errormessage":f&&r||void 0,"aria-invalid":f,"aria-labelledby":O(o),"aria-expanded":S,"aria-owns":G(o),id:te(o),onBlur:u?A:m.onBlur,onChange:u?A:m.onChange,onClick:u?A:m.onClick,onFocus:u?A:m.onFocus,onKeyDown:u?A:m.onKeyDown,ref:a,role:"combobox",type:"text",value:T}}const me={position:"absolute",width:0,height:0,visibility:"hidden",overflow:"scroll",whiteSpace:"pre"},xe=["font-family","font-size","font-style","font-weight","letter-spacing","text-transform"];function ve({allowResize:e=!0,text:t}){const r=s.useRef(null),{inputRef:n}=s.useContext(p),[o,l]=s.useState(0);return s.useEffect(()=>{if(n.current){const a=window.getComputedStyle(n.current);xe.forEach(u=>{var i;const f=a.getPropertyValue(u);(i=r.current)==null||i.style.setProperty(u,f)})}},[n,r]),s.useEffect(()=>{var a;if(e){const u=Math.ceil(((a=r.current)==null?void 0:a.scrollWidth)??0)+2;o!==u&&l(u)}},[e,t,o]),{width:o,sizerProps:{ref:r,style:me}}}function be(){var l;const{inputRef:e,managerRef:t,tagListRef:r}=s.useContext(p),n=t.current.flags.tagsDeleted.length,o=(l=r.current)==null?void 0:l.contains(document.activeElement);s.useEffect(()=>{var a,u;if(n){const f=(a=r.current)==null?void 0:a.contains(document.activeElement);o&&!f&&((u=e.current)==null||u.focus({preventScroll:!0}))}},[e,o,r,n])}function Ee(){const{id:e,inputRef:t,listBoxRef:r,managerRef:n}=s.useContext(p),o=n.current.state.activeIndex===-1,l=s.useCallback(a=>{var u;a.target!==t.current&&((u=t.current)==null||u.focus({preventScroll:!0}))},[t]);return s.useEffect(()=>{var a;o&&((a=r.current)==null||a.scrollTo({top:0}))},[r,o]),{"aria-labelledby":O(e),id:G(e),onFocus:l,ref:r,role:"listbox",tabIndex:-1}}function ye(e,t,r){const n=t-1;return e>n?r:e<r?n:e}function he({allowNew:e,closeOnSelect:t,newOptionText:r,noOptionsText:n,onAdd:o,onDelete:l,onCollapse:a,onExpand:u,onInput:f,onValidate:i,selected:m,startWithFirstOption:x,suggestions:S,suggestionsTransform:T}){const b=s.useRef(),[k,C]=s.useState(null),[D,B]=s.useState(!1),[v,_]=s.useState(""),E=s.useMemo(()=>{const d=T(v,S);if(e&&v){const y=typeof i=="function"?i(v):!0;d.push({disabled:!y,label:r,value:U})}return d.length===0&&v&&d.push({disabled:!0,label:n,value:W}),d},[e,r,n,i,S,T,v]),P=k?j(k,E):-1,w=x?Math.max(P,0):P,L=E[w],N={activeIndex:w,activeOption:L,isExpanded:D,options:E,selected:m,value:v},c={tagsAdded:b.current?H(m,b.current.state.selected):[],tagsDeleted:b.current?H(b.current.state.selected,m):[]},g={listBoxCollapse(){D&&(B(!1),C(null),a==null||a())},listBoxExpand(){D||(B(!0),C(E[w]),u==null||u())},updateActiveIndex(d){const y=ye(d,E.length,x?0:-1);C(E[y])},updateInputValue(d){v!==d&&(_(d),f==null||f(d))},selectTag(d){if(d??(d=se(N)),d){const y=j(d,N.selected);y>-1?l(y):o(d),t&&this.listBoxCollapse(),this.updateInputValue("")}}};return b.current={...g,flags:c,state:N},b}function Ie(e){const{id:t,inputRef:r,managerRef:n}=s.useContext(p),o=s.useRef(null),l=n.current.state.options[e],a=e===n.current.state.activeIndex,u=l.disabled??!1,f=j(l,n.current.state.selected)>-1,i=s.useCallback(()=>{var x;n.current.selectTag(),(x=r.current)==null||x.focus()},[r,n]),m=s.useCallback(()=>{e!==n.current.state.activeIndex&&n.current.updateActiveIndex(e)},[e,n]);return s.useEffect(()=>{var x;a&&((x=o.current)==null||x.scrollIntoView({block:"nearest",inline:"start"}))},[a,n.current.state.options]),{option:{...l,active:a,disabled:u,index:e,selected:f},optionProps:{"aria-disabled":u,"aria-posinset":e+1,"aria-selected":u?void 0:f,"aria-setsize":n.current.state.options.length,id:q(t,l),onClick:i,onMouseDown:m,ref:o,role:"option",tabIndex:-1}}}function Ce({inputRef:e,managerRef:t}){return s.useRef({input:{blur(){var n;(n=e.current)==null||n.blur()},focus(){var n;(n=e.current)==null||n.focus()},get value(){return t.current.state.value},set value(n){typeof n!="string"&&(n=String(n)),t.current.updateInputValue(n)}},listBox:{collapse(){t.current.listBoxCollapse()},expand(){t.current.listBoxExpand()},get activeOption(){return t.current.state.activeOption},get isExpanded(){return t.current.state.isExpanded}},select(n){t.current.selectTag(n)}}).current}function De({onBlur:e,onFocus:t}){const[r,n]=s.useState(!1),{id:o,inputRef:l,rootRef:a}=s.useContext(p),u=s.useMemo(()=>({"aria-describedby":O(o),id:o,onFocus(){n(!0),t==null||t()},onBlur(){var f;(f=a.current)!=null&&f.contains(document.activeElement)||(n(!1),e==null||e())},onClick(){var f;document.activeElement===a.current&&((f=l.current)==null||f.focus())},ref:a,tabIndex:-1}),[l,o,e,t,a]);return{isActive:r,rootProps:u}}function we(e,t){const{isDisabled:r,managerRef:n}=s.useContext(p),o=n.current.state.selected[e],l=s.useCallback(()=>n.current.selectTag(o),[n,o]);return{tag:o,tagProps:{"aria-disabled":r,title:K(t,o.label),onClick:r?A:l}}}const Ae={position:"absolute",width:1,height:1,left:-9999,overflow:"hidden",clip:"rect(0 0 0 0)"};function Se({ariaAddedText:e,ariaDeletedText:t}){const{managerRef:r}=s.useContext(p),n=s.useRef([]);return r.current.flags.tagsAdded.forEach(o=>{n.current.push(K(e,o.label))}),r.current.flags.tagsDeleted.forEach(o=>{n.current.push(K(t,o.label))}),s.createElement("div",{"aria-live":"polite","aria-relevant":"additions",role:"status",style:Ae},n.current.join(`
-`))}function Te({children:e}){const{classNames:t,comboBoxRef:r,id:n}=s.useContext(p);return s.createElement("div",{className:t.comboBox,id:ee(n),ref:r},e)}function ke({allowBackspace:e=!0,allowResize:t=!0,ariaDescribedBy:r,ariaErrorMessage:n,delimiterKeys:o,placeholderText:l}){const{classNames:a}=s.useContext(p),{value:u,...f}=ge({allowBackspace:e,ariaDescribedBy:r,ariaErrorMessage:n,delimiterKeys:o}),i=u.length<l.length?l:u,{sizerProps:m,width:x}=ve({allowResize:t,text:i});return s.createElement(s.Fragment,null,s.createElement("input",{className:a.input,placeholder:l,style:{width:x},value:u,...f}),t?s.createElement("div",{...m},i):null)}const Be=({children:e,classNames:t,id:r})=>s.createElement("div",{className:t.label,id:r},e);function Pe({children:e,render:t=Be}){const{classNames:r,id:n}=s.useContext(p);return t({children:e,classNames:r,id:O(n)})}function Ne({children:e}){const{classNames:t,managerRef:r}=s.useContext(p),n=Ee();return!r.current.state.isExpanded||s.Children.count(e)===0?null:s.createElement("div",{className:t.listBox,...n},e)}const _e=({children:e,classNames:t,option:r,...n})=>{const o=[t.option];return r.active&&o.push(t.optionIsActive),s.createElement("div",{className:o.join(" "),...n},e)};function Le({index:e,render:t=_e}){const{classNames:r,managerRef:n}=s.useContext(p),{option:o,optionProps:l}=Ie(e),a=s.createElement($e,{option:o,query:n.current.state.value});return t({classNames:r,children:a,option:o,...l})}function Oe(e,t){const r=Q(t);return e.replace(r,"<mark>$&</mark>")}function Ke({option:e,query:t}){return e.value===U||e.value===W?s.createElement("span",null,K(e.label,t)):s.createElement("span",{dangerouslySetInnerHTML:{__html:Oe(e.label,t)}})}const $e=s.memo(Ke);function Me({children:e,onBlur:t,onFocus:r}){be();const{classNames:n,isDisabled:o,isInvalid:l}=s.useContext(p),{isActive:a,rootProps:u}=De({onBlur:t,onFocus:r}),f=[n.root];return a&&f.push(n.rootIsActive),o&&f.push(n.rootIsDisabled),l&&f.push(n.rootIsInvalid),s.createElement("div",{className:f.join(" "),...u},e)}const Ue=({classNames:e,tag:t,...r})=>s.createElement("button",{type:"button",className:e.tag,...r},s.createElement("span",{className:e.tagName},t.label));function Ve({render:e=Ue,index:t,title:r}){const{classNames:n}=s.useContext(p),{tag:o,tagProps:l}=we(t,r);return e({classNames:n,tag:o,...l})}function je({children:e,label:t}){const{classNames:r,tagListRef:n}=s.useContext(p);return s.createElement("ul",{className:r.tagList,"aria-label":t,ref:n,role:"list"},e.map(o=>s.createElement("li",{className:r.tagListItem,key:o.key,role:"listitem"},o)))}const ze={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"},Fe=[I.Enter];function We({allowBackspace:e=!0,allowNew:t=!1,allowResize:r=!0,ariaAddedText:n="Added tag %value%",ariaDescribedBy:o,ariaErrorMessage:l,ariaDeletedText:a="Removed tag %value%",classNames:u=ze,closeOnSelect:f=!1,deleteButtonText:i="Remove %value% from the list",delimiterKeys:m=Fe,id:x="react-tags",isDisabled:S=!1,isInvalid:T=!1,labelText:b="Select tags",newOptionText:k="Add %value%",noOptionsText:C="No options found for %value%",onAdd:D,onBlur:B,onCollapse:v,onDelete:_,onExpand:E,onFocus:P,onInput:w,onValidate:L,placeholderText:N="Add a tag",renderLabel:c,renderOption:g,renderTag:d,selected:y=[],startWithFirstOption:Ge=!1,suggestions:qe=[],suggestionsTransform:Je=fe,tagListLabelText:Qe="Selected tags"},$){const Xe=s.useRef(null),X=s.useRef(null),Ye=s.useRef(null),Ze=s.useRef(null),Re=s.useRef(null),M=he({allowNew:t,closeOnSelect:f,newOptionText:k,noOptionsText:C,onAdd:D,onDelete:_,onCollapse:v,onExpand:E,onInput:w,onValidate:L,selected:y,startWithFirstOption:Ge,suggestions:qe,suggestionsTransform:Je}),Y=Ce({inputRef:X,managerRef:M});return $&&(typeof $=="function"?$(Y):$.current=Y),s.createElement(p.Provider,{value:{classNames:u,comboBoxRef:Xe,id:x,inputRef:X,isDisabled:S,isInvalid:T,listBoxRef:Ye,managerRef:M,rootRef:Ze,tagListRef:Re}},s.createElement(Me,{onBlur:B,onFocus:P},s.createElement(Pe,{render:c},b),s.createElement(je,{label:Qe},M.current.state.selected.map((z,F)=>s.createElement(Ve,{key:V(z),index:F,render:d,title:i}))),s.createElement(Te,null,s.createElement(ke,{allowBackspace:e,allowResize:r,delimiterKeys:m,placeholderText:N,ariaDescribedBy:o,ariaErrorMessage:l}),s.createElement(Ne,null,M.current.state.options.map((z,F)=>s.createElement(Le,{key:V(z),index:F,render:g})))),s.createElement(Se,{ariaAddedText:n,ariaDeletedText:a})))}const He=s.forwardRef(We);h.ReactTags=He,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+(function(y,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(y=typeof globalThis<"u"?globalThis:y||self,s(y.ReactTags={},y.React))})(this,function(y,s){"use strict";const h={Enter:"Enter",Escape:"Escape",Tab:"Tab",Backspace:"Backspace",UpArrow:"ArrowUp",UpArrowCompat:"Up",DownArrow:"ArrowDown",DownArrowCompat:"Down",PageDown:"PageDown",PageUp:"PageUp"},U=Symbol("Create new tag"),W=Symbol("No options"),w=()=>{},p=s.createContext(void 0);function H(e,t){return e===t?[]:e.filter(r=>!t.includes(r))}function Z(e){return e.selectionStart===0&&e.selectionEnd===0}function R(e){const t=e.value.length;return e.selectionStart===t&&e.selectionEnd===t}function et(e){return e}function O(e){return`${e}-label`}function ee(e){return`${e}-combobox`}function te(e){return`${e}-input`}function G(e){return`${e}-listbox`}function q(e,t){return`${e}-option-${ae(t)}`}function ne(e,t){if((e==null?void 0:e.value)===U&&e.disabled===!1)return{value:t,label:t}}function se(e){const t=ne(e.activeOption,e.value)||e.activeOption||pe(e.value,e.options);return t&&!t.disabled?t:void 0}function re(e,t,r){const n=t-1;return e>n?r:e<r?n:e}const oe=/%value%/;function K(e,t){return e.replace(oe,t)}const ie=/\s+/g;function V(e){return`${String(e.value)}-${e.label}`}function ae(e){return V(e).replace(ie,"_")}function j(e,t){return t.findIndex(({value:r})=>r===e.value)}const ce=/[-\\^$*+?.()|[\]{}]/g;function J(e){return e.replace(ce,"\\$&")}function Q(e){return new RegExp(`${J(e)}`,"i")}function ue(e){return new RegExp(`^${J(e)}$`,"i")}function le(e){const t=Q(e);return r=>t.test(r)}function fe(e){const t=ue(e);return r=>t.test(r)}function de(e,t){if(e==="")return[].concat(t);{const r=le(e);return t.filter(n=>r(n.label))}}function pe(e,t){const r=fe(e);return t.find(n=>r(n.label))||null}const ge={autoComplete:"off",autoCorrect:"off","data-form-type":"other",spellCheck:!1};function me({allowBackspace:e,ariaDescribedBy:t,ariaErrorMessage:r,delimiterKeys:n}){const{id:o,comboBoxRef:l,inputRef:a,isDisabled:u,isInvalid:f,managerRef:i}=s.useContext(p),m=s.useMemo(()=>{const v=c=>{const g=c.currentTarget.value;i.current.updateInputValue(g),document.activeElement===a.current&&i.current.listBoxExpand()},k=()=>{i.current.listBoxExpand()},I=c=>{var g;((g=l.current)==null?void 0:g.contains(c.relatedTarget))===!1&&i.current.listBoxCollapse()},C=()=>{i.current.listBoxExpand()},B=c=>{const{activeIndex:g,isExpanded:d}=i.current.state;d?(c.preventDefault(),i.current.updateActiveIndex(g+1)):(R(c.currentTarget)||c.altKey)&&(c.preventDefault(),i.current.listBoxExpand())},b=c=>{const{activeIndex:g,isExpanded:d}=i.current.state;d?(c.preventDefault(),i.current.updateActiveIndex(g-1)):Z(c.currentTarget)&&(c.preventDefault(),i.current.listBoxExpand())},_=c=>{const{isExpanded:g,options:d}=i.current.state;g&&(c.preventDefault(),i.current.updateActiveIndex(d.length-1))},E=c=>{i.current.state.isExpanded&&(c.preventDefault(),i.current.updateActiveIndex(0))},T=()=>{i.current.state.isExpanded?i.current.listBoxCollapse():i.current.updateInputValue("")},D=()=>{if(e){const{value:c,selected:g}=i.current.state,d=g[g.length-1];c===""&&d&&i.current.selectTag(d)}},L=c=>{i.current.state.isExpanded&&(c.preventDefault(),i.current.selectTag())};return{onBlur:I,onChange:v,onClick:C,onFocus:k,onKeyDown:c=>{if(c.key===h.UpArrow)return b(c);if(c.key===h.DownArrow)return B(c);if(c.key===h.PageUp)return E(c);if(c.key===h.PageDown)return _(c);if(c.key===h.Escape)return T();if(c.key===h.Backspace)return D();if(n.includes(c.key))return L(c)}}},[e,l,n,a,i]),{activeOption:x,isExpanded:A,value:S}=i.current.state;return{...ge,"aria-autocomplete":"list","aria-activedescendant":x?q(o,x):void 0,"aria-describedby":t||void 0,"aria-disabled":u,"aria-errormessage":f&&r||void 0,"aria-invalid":f,"aria-labelledby":O(o),"aria-expanded":A,"aria-owns":G(o),id:te(o),onBlur:u?w:m.onBlur,onChange:u?w:m.onChange,onClick:u?w:m.onClick,onFocus:u?w:m.onFocus,onKeyDown:u?w:m.onKeyDown,ref:a,role:"combobox",type:"text",value:S}}const xe={position:"absolute",width:0,height:0,visibility:"hidden",overflow:"scroll",whiteSpace:"pre"},ve=["font-family","font-size","font-style","font-weight","letter-spacing","text-transform"];function be({allowResize:e=!0,text:t}){const r=s.useRef(null),{inputRef:n}=s.useContext(p),[o,l]=s.useState(0);return s.useEffect(()=>{if(n.current){const a=window.getComputedStyle(n.current);ve.forEach(u=>{var i;const f=a.getPropertyValue(u);(i=r.current)==null||i.style.setProperty(u,f)})}},[n,r]),s.useLayoutEffect(()=>{var a;if(e){const u=Math.ceil(((a=r.current)==null?void 0:a.scrollWidth)??0)+2;o!==u&&l(u)}},[e,t,o]),{width:o,sizerProps:{ref:r,style:xe}}}function Ee(){var l;const{inputRef:e,managerRef:t,tagListRef:r}=s.useContext(p),n=t.current.flags.tagsDeleted.length,o=(l=r.current)==null?void 0:l.contains(document.activeElement);s.useEffect(()=>{var a,u;if(n){const f=(a=r.current)==null?void 0:a.contains(document.activeElement);o&&!f&&((u=e.current)==null||u.focus({preventScroll:!0}))}},[e,o,r,n])}function ye(){const{id:e,inputRef:t,listBoxRef:r,managerRef:n}=s.useContext(p),o=n.current.state.activeIndex===-1,l=s.useCallback(a=>{var u;a.target!==t.current&&((u=t.current)==null||u.focus({preventScroll:!0}))},[t]);return s.useEffect(()=>{var a;o&&((a=r.current)==null||a.scrollTo({top:0}))},[r,o]),{"aria-labelledby":O(e),id:G(e),onFocus:l,ref:r,role:"listbox",tabIndex:-1}}function he({allowNew:e,closeOnSelect:t,newOptionText:r,noOptionsText:n,onAdd:o,onDelete:l,onCollapse:a,onExpand:u,onInput:f,onValidate:i,selected:m,startWithFirstOption:x,suggestions:A,suggestionsTransform:S}){const v=s.useRef(),[k,I]=s.useState(null),[C,B]=s.useState(!1),[b,_]=s.useState(""),E=s.useMemo(()=>{const d=S(b,A);return b&&(e&&d.push({disabled:typeof i=="function"?!i(b):!1,label:r,value:U}),d.length===0&&d.push({disabled:!0,label:n,value:W})),d},[e,r,n,i,A,S,b]),T=k?j(k,E):-1,D=x?Math.max(T,0):T,L=E[D],P={activeIndex:D,activeOption:L,isExpanded:C,options:E,selected:m,value:b},c={tagsAdded:v.current?H(m,v.current.state.selected):[],tagsDeleted:v.current?H(v.current.state.selected,m):[]},g={listBoxCollapse(){C&&(B(!1),I(null),a==null||a())},listBoxExpand(){C||(B(!0),I(E[D]),u==null||u())},updateActiveIndex(d){const N=re(d,E.length,x?0:-1);I(E[N])},updateInputValue(d){b!==d&&(_(d),f==null||f(d))},selectTag(d){if(d??(d=se(P)),d){const N=j(d,P.selected);N>-1?l(N):o(d),t&&this.listBoxCollapse(),this.updateInputValue("")}}};return v.current={...g,flags:c,state:P},v}function Ie(e){const{id:t,inputRef:r,managerRef:n}=s.useContext(p),o=s.useRef(null),l=n.current.state.options[e],a=e===n.current.state.activeIndex,u=l.disabled??!1,f=j(l,n.current.state.selected)>-1,i=s.useCallback(()=>{var x;n.current.selectTag(),(x=r.current)==null||x.focus()},[r,n]),m=s.useCallback(()=>{e!==n.current.state.activeIndex&&n.current.updateActiveIndex(e)},[e,n]);return s.useEffect(()=>{var x;a&&((x=o.current)==null||x.scrollIntoView({block:"nearest",inline:"start"}))},[a,n.current.state.options]),{option:{...l,active:a,disabled:u,index:e,selected:f},optionProps:{"aria-disabled":u,"aria-posinset":e+1,"aria-selected":u?void 0:f,"aria-setsize":n.current.state.options.length,id:q(t,l),onClick:i,onMouseDown:m,ref:o,role:"option",tabIndex:-1}}}function Ce({inputRef:e,managerRef:t}){return s.useRef({input:{blur(){var n;(n=e.current)==null||n.blur()},focus(){var n;(n=e.current)==null||n.focus()},get value(){return t.current.state.value},set value(n){typeof n!="string"&&(n=String(n)),t.current.updateInputValue(n)}},listBox:{collapse(){t.current.listBoxCollapse()},expand(){t.current.listBoxExpand()},get activeOption(){return t.current.state.activeOption},get isExpanded(){return t.current.state.isExpanded}},select(n){t.current.selectTag(n)}}).current}function De({onBlur:e,onFocus:t}){const[r,n]=s.useState(!1),{id:o,inputRef:l,rootRef:a}=s.useContext(p),u=s.useMemo(()=>({"aria-describedby":O(o),id:o,onFocus(){n(!0),t==null||t()},onBlur(){var f;(f=a.current)!=null&&f.contains(document.activeElement)||(n(!1),e==null||e())},onClick(){var f;document.activeElement===a.current&&((f=l.current)==null||f.focus())},ref:a,tabIndex:-1}),[l,o,e,t,a]);return{isActive:r,rootProps:u}}function we(e,t){const{isDisabled:r,managerRef:n}=s.useContext(p),o=n.current.state.selected[e],l=s.useCallback(()=>n.current.selectTag(o),[n,o]);return{tag:o,tagProps:{"aria-disabled":r,title:K(t,o.label),onClick:r?w:l}}}const Ae={position:"absolute",width:1,height:1,left:-9999,overflow:"hidden",clip:"rect(0 0 0 0)"};function Se({ariaAddedText:e,ariaDeletedText:t}){const{managerRef:r}=s.useContext(p),n=s.useRef([]);return r.current.flags.tagsAdded.forEach(o=>{n.current.push(K(e,o.label))}),r.current.flags.tagsDeleted.forEach(o=>{n.current.push(K(t,o.label))}),s.createElement("div",{"aria-live":"polite","aria-relevant":"additions",role:"status",style:Ae},n.current.join(`
+`))}function ke({children:e}){const{classNames:t,comboBoxRef:r,id:n}=s.useContext(p);return s.createElement("div",{className:t.comboBox,id:ee(n),ref:r},e)}function Be({allowBackspace:e=!0,allowResize:t=!0,ariaDescribedBy:r,ariaErrorMessage:n,delimiterKeys:o,placeholderText:l}){const{classNames:a}=s.useContext(p),{value:u,...f}=me({allowBackspace:e,ariaDescribedBy:r,ariaErrorMessage:n,delimiterKeys:o}),i=u.length<l.length?l:u,{sizerProps:m,width:x}=be({allowResize:t,text:i});return s.createElement(s.Fragment,null,s.createElement("input",{className:a.input,placeholder:l,style:{width:x},value:u,...f}),t?s.createElement("div",{...m},i):null)}const Te=({children:e,classNames:t,id:r})=>s.createElement("div",{className:t.label,id:r},e);function Pe({children:e,render:t=Te}){const{classNames:r,id:n}=s.useContext(p);return t({children:e,classNames:r,id:O(n)})}function Ne({children:e}){const{classNames:t,managerRef:r}=s.useContext(p),n=ye();return!r.current.state.isExpanded||s.Children.count(e)===0?null:s.createElement("div",{className:t.listBox,...n},e)}const _e=({children:e,classNames:t,option:r,...n})=>{const o=[t.option];return r.active&&o.push(t.optionIsActive),s.createElement("div",{className:o.join(" "),...n},e)};function Le({index:e,render:t=_e}){const{classNames:r,managerRef:n}=s.useContext(p),{option:o,optionProps:l}=Ie(e),a=s.createElement($e,{option:o,query:n.current.state.value});return t({classNames:r,children:a,option:o,...l})}function Oe(e,t){const r=Q(t);return e.replace(r,"<mark>$&</mark>")}function Ke({option:e,query:t}){return e.value===U||e.value===W?s.createElement("span",null,K(e.label,t)):s.createElement("span",{dangerouslySetInnerHTML:{__html:Oe(e.label,t)}})}const $e=s.memo(Ke);function Me({children:e,onBlur:t,onFocus:r}){Ee();const{classNames:n,isDisabled:o,isInvalid:l}=s.useContext(p),{isActive:a,rootProps:u}=De({onBlur:t,onFocus:r}),f=[n.root];return a&&f.push(n.rootIsActive),o&&f.push(n.rootIsDisabled),l&&f.push(n.rootIsInvalid),s.createElement("div",{className:f.join(" "),...u},e)}const Ue=({classNames:e,tag:t,...r})=>s.createElement("button",{type:"button",className:e.tag,...r},s.createElement("span",{className:e.tagName},t.label));function Ve({render:e=Ue,index:t,title:r}){const{classNames:n}=s.useContext(p),{tag:o,tagProps:l}=we(t,r);return e({classNames:n,tag:o,...l})}function je({children:e,label:t}){const{classNames:r,tagListRef:n}=s.useContext(p);return s.createElement("ul",{className:r.tagList,"aria-label":t,ref:n,role:"list"},e.map(o=>s.createElement("li",{className:r.tagListItem,key:o.key,role:"listitem"},o)))}const ze={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"},Fe=[h.Enter];function We({allowBackspace:e=!0,allowNew:t=!1,allowResize:r=!0,ariaAddedText:n="Added tag %value%",ariaDescribedBy:o,ariaErrorMessage:l,ariaDeletedText:a="Removed tag %value%",classNames:u=ze,closeOnSelect:f=!1,deleteButtonText:i="Remove %value% from the list",delimiterKeys:m=Fe,id:x="react-tags",isDisabled:A=!1,isInvalid:S=!1,labelText:v="Select tags",newOptionText:k="Add %value%",noOptionsText:I="No options found for %value%",onAdd:C,onBlur:B,onCollapse:b,onDelete:_,onExpand:E,onFocus:T,onInput:D,onValidate:L,placeholderText:P="Add a tag",renderLabel:c,renderOption:g,renderTag:d,selected:N=[],startWithFirstOption:Ge=!1,suggestions:qe=[],suggestionsTransform:Je=de,tagListLabelText:Qe="Selected tags"},$){const Xe=s.useRef(null),X=s.useRef(null),Ye=s.useRef(null),Ze=s.useRef(null),Re=s.useRef(null),M=he({allowNew:t,closeOnSelect:f,newOptionText:k,noOptionsText:I,onAdd:C,onDelete:_,onCollapse:b,onExpand:E,onInput:D,onValidate:L,selected:N,startWithFirstOption:Ge,suggestions:qe,suggestionsTransform:Je}),Y=Ce({inputRef:X,managerRef:M});return $&&(typeof $=="function"?$(Y):$.current=Y),s.createElement(p.Provider,{value:{classNames:u,comboBoxRef:Xe,id:x,inputRef:X,isDisabled:A,isInvalid:S,listBoxRef:Ye,managerRef:M,rootRef:Ze,tagListRef:Re}},s.createElement(Me,{onBlur:B,onFocus:T},s.createElement(Pe,{render:c},v),s.createElement(je,{label:Qe},M.current.state.selected.map((z,F)=>s.createElement(Ve,{key:V(z),index:F,render:d,title:i}))),s.createElement(ke,null,s.createElement(Be,{allowBackspace:e,allowResize:r,delimiterKeys:m,placeholderText:P,ariaDescribedBy:o,ariaErrorMessage:l}),s.createElement(Ne,null,M.current.state.options.map((z,F)=>s.createElement(Le,{key:V(z),index:F,render:g})))),s.createElement(Se,{ariaAddedText:n,ariaDeletedText:a})))}const He=s.forwardRef(We);y.ReactTags=He,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "7.0.0-rc.3",
+  "version": "7.0.0-rc.4",
   "description": "A simple, accessible, tagging component ready to drop into your React projects.",
@@ -5,0 +5,0 @@ "main": "dist/ReactTags.cjs.js",

No alert changes

Worsened metrics

Total package byte prevSize

323268

decreased by-0.01%

Lines of code

10227

decreased by-0.04%

No dependency changes