react-tag-autocomplete - npm Package Compare versions

Comparing version 7.0.0-beta.8 to 7.0.0-beta.9

dist/ReactTags.cjs.js

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

dist/ReactTags.es.js

@@ -1,69 +0,73 @@
-import i, { useContext as p, useMemo as R, useRef as x, useState as H, useEffect as w, useReducer as ie, useCallback as D } from "react";
-function ce(e) {
+import i, { useContext as p, useMemo as T, useRef as m, useState as Q, useEffect as C, useReducer as de, useCallback as R } from "react";
+function pe(e) {
   return e.selectionStart === 0 && e.selectionEnd === 0;
 }
-function ue(e) {
+function fe(e) {
   const t = e.value.length;
   return e.selectionStart === t && e.selectionEnd === t;
 }
-function S(e) {
+function O(e) {
   return `${e}-label`;
 }
-function de(e) {
+function ve(e) {
   return `${e}-combobox`;
 }
-function pe(e) {
+function ge(e) {
   return `${e}-input`;
 }
-function G(e) {
+function X(e) {
   return `${e}-listbox`;
 }
-function J(e, t) {
-  return `${e}-option-${ve(t)}`;
+function Y(e, t) {
+  return `${e}-option-${ye(t)}`;
 }
-const fe = /%value%/;
-function O(e, t) {
-  return e.replace(fe, t);
+const me = /%value%/;
+function D(e, t) {
+  return e.replace(me, t);
 }
-const ge = /\s+/g;
-function F(e) {
+const xe = /\s+/g;
+function z(e) {
   return `${String(e.value)}-${e.label}`;
 }
-function ve(e) {
-  return F(e).replace(ge, "_");
+function ye(e) {
+  return z(e).replace(xe, "_");
 }
-function h(e, t) {
+function w(e, t) {
   return t.findIndex(({ value: n }) => n === e.value);
 }
-const me = /[-\\^$*+?.()|[\]{}]/g;
-function Q(e) {
-  return e.replace(me, "\\$&");
+const be = /[-\\^$*+?.()|[\]{}]/g;
+function Z(e) {
+  return e.replace(be, "\\$&");
 }
-function X(e) {
-  return new RegExp(`${Q(e)}`, "i");
+function M(e) {
+  return new RegExp(`${Z(e)}`, "i");
 }
-function xe(e) {
-  return new RegExp(`^${Q(e)}$`, "i");
+function Ee(e) {
+  return new RegExp(`^${Z(e)}$`, "i");
 }
-function ye(e) {
-  const t = X(e);
+function Ie(e) {
+  const t = M(e);
   return (n) => t.test(n);
 }
-function be(e) {
-  const t = xe(e);
+function he(e) {
+  const t = Ee(e);
   return (n) => t.test(n);
 }
-function Ee(e, t) {
-  const n = ye(e);
-  return t.filter((o) => n(o.label));
+function we(e, t) {
+  if (e === "")
+    return [].concat(t);
+  {
+    const n = Ie(e);
+    return t.filter((o) => n(o.label));
+  }
 }
-function Ie(e, t) {
-  const n = be(e);
+function Ce(e, t) {
+  const n = he(e);
   return t.find((o) => n(o.label)) || null;
 }
 const d = i.createContext(void 0);
-function he() {
+function Re() {
   const { comboBoxRef: e, id: t, manager: n } = p(d);
-  return R(() => ({
-    id: de(t),
+  return T(() => ({
+    id: ve(t),
     ref: e,
@@ -94,4 +98,4 @@ onBlur(o) {
   PageUp: "PageUp"
-}, W = Symbol("Create new tag"), Y = Symbol("No options"), z = () => {
-}, we = {
+}, j = Symbol("Create new tag"), ee = Symbol("No options"), W = () => {
+}, De = {
   autoComplete: "off",
@@ -102,3 +106,3 @@ autoCorrect: "off",
 };
-function Ce({
+function Te({
   allowBackspace: e,
@@ -109,49 +113,49 @@ allowTab: t,
 }) {
-  const { id: a, inputRef: c, isDisabled: r, isInvalid: u, manager: s, onInput: f, onSelect: g } = p(d), y = R(() => {
+  const { id: a, inputRef: c, isDisabled: r, isInvalid: u, manager: s, onInput: f, onSelect: v } = p(d), y = T(() => {
     const A = (l) => {
       const I = l.currentTarget.value;
       s.updateValue(I), f == null || f(I);
+    }, P = (l) => {
+      s.state.isExpanded ? (l.preventDefault(), s.updateActiveIndex(s.state.activeIndex + 1)) : fe(l.currentTarget) && s.expand();
     }, N = (l) => {
-      s.state.isExpanded ? (l.preventDefault(), s.updateActiveIndex(s.state.activeIndex + 1)) : ue(l.currentTarget) && s.expand();
+      s.state.isExpanded ? (l.preventDefault(), s.updateActiveIndex(s.state.activeIndex - 1)) : pe(l.currentTarget) && s.expand();
     }, k = (l) => {
-      s.state.isExpanded ? (l.preventDefault(), s.updateActiveIndex(s.state.activeIndex - 1)) : ce(l.currentTarget) && s.expand();
-    }, P = (l) => {
       s.state.isExpanded && (l.preventDefault(), s.updateActiveIndex(s.state.options.length - 1));
     }, _ = (l) => {
       s.state.isExpanded && (l.preventDefault(), s.updateActiveIndex(0));
-    }, U = (l) => {
-      s.state.isExpanded && (l.preventDefault(), g());
-    }, B = () => {
+    }, B = (l) => {
+      s.state.isExpanded && (l.preventDefault(), v());
+    }, U = () => {
       s.state.isExpanded ? (s.clearActiveIndex(), s.collapse()) : s.clearValue();
-    }, L = () => {
+    }, V = () => {
       if (e) {
         const l = s.state.value === "", I = s.state.selected[s.state.selected.length - 1];
-        l && I && g(I);
+        l && I && v(I);
       }
-    }, V = (l) => {
-      t && s.state.isExpanded && (l.preventDefault(), g());
+    }, L = (l) => {
+      t && s.state.isExpanded && (l.preventDefault(), v());
     };
     return { onChange: A, onKeyDown: (l) => {
       if (l.key === b.UpArrow)
-        return k(l);
+        return N(l);
       if (l.key === b.DownArrow)
-        return N(l);
+        return P(l);
       if (l.key === b.PageUp)
         return _(l);
       if (l.key === b.PageDown)
-        return P(l);
+        return k(l);
       if (l.key === b.Enter)
-        return U(l);
+        return B(l);
       if (l.key === b.Escape)
-        return B();
+        return U();
       if (l.key === b.Backspace)
-        return L();
+        return V();
       if (l.key === b.Tab)
-        return V(l);
+        return L(l);
     } };
-  }, [e, t, s, f, g]), { activeOption: E, isExpanded: m, value: T } = s.state;
+  }, [e, t, s, f, v]), { activeOption: E, isExpanded: x, value: S } = s.state;
   return {
-    ...we,
+    ...De,
     "aria-autocomplete": "list",
-    "aria-activedescendant": E ? J(a, E) : void 0,
+    "aria-activedescendant": E ? Y(a, E) : void 0,
     "aria-describedby": n || void 0,
@@ -161,15 +165,15 @@ "aria-disabled": r,
     "aria-invalid": u,
-    "aria-labelledby": S(a),
-    "aria-expanded": m,
-    "aria-owns": G(a),
-    id: pe(a),
-    onChange: r ? z : y.onChange,
-    onKeyDown: r ? z : y.onKeyDown,
+    "aria-labelledby": O(a),
+    "aria-expanded": x,
+    "aria-owns": X(a),
+    id: ge(a),
+    onChange: r ? W : y.onChange,
+    onKeyDown: r ? W : y.onKeyDown,
     ref: c,
     role: "combobox",
     type: "text",
-    value: T
+    value: S
   };
 }
-const De = {
+const Oe = {
   position: "absolute",
@@ -181,3 +185,3 @@ width: 0,
   whiteSpace: "pre"
-}, Oe = [
+}, Se = [
   "font-family",
@@ -190,8 +194,8 @@ "font-size",
 ];
-function Re({ allowResize: e = !0, text: t }) {
-  const n = x(null), { inputRef: o } = p(d), [a, c] = H(0);
-  return w(() => {
+function Ae({ allowResize: e = !0, text: t }) {
+  const n = m(null), { inputRef: o } = p(d), [a, c] = Q(0);
+  return C(() => {
     if (o.current) {
       const r = window.getComputedStyle(o.current);
-      Oe.forEach((u) => {
+      Se.forEach((u) => {
         var f;
@@ -202,3 +206,3 @@ const s = r.getPropertyValue(u);
     }
-  }, [o, n]), w(() => {
+  }, [o, n]), C(() => {
     var r, u;
@@ -213,10 +217,10 @@ if (e) {
       ref: n,
-      style: De
+      style: Oe
     }
   };
 }
-function Se() {
+function Pe() {
   var c;
   const { inputRef: e, manager: t, tagListRef: n } = p(d), o = t.flags.tagsDeleted.length, a = (c = n.current) == null ? void 0 : c.contains(document.activeElement);
-  w(() => {
+  C(() => {
     var r, u;
@@ -229,3 +233,3 @@ if (o) {
 }
-function Te({
+function Ne({
   newOptionText: e,
@@ -235,3 +239,3 @@ noOptionsText: t,
 }) {
-  return R(() => ({
+  return T(() => ({
     newTagOption(o) {
@@ -241,3 +245,3 @@ return {
         label: e,
-        value: W
+        value: j
       };
@@ -249,3 +253,3 @@ },
         label: t,
-        value: Y
+        value: ee
       };
@@ -255,10 +259,10 @@ }
 }
-function Ae() {
+function ke() {
   const { id: e, listBoxRef: t, manager: n } = p(d);
-  return w(() => {
+  return C(() => {
     var o;
     n.state.activeIndex === -1 && ((o = t.current) == null || o.scrollTo({ top: 0 }));
   }, [t, n.state.activeIndex]), {
-    "aria-labelledby": S(e),
-    id: G(e),
+    "aria-labelledby": O(e),
+    id: X(e),
     ref: t,
@@ -268,8 +272,8 @@ role: "listbox"
 }
-var v = /* @__PURE__ */ ((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))(v || {});
-function Ne(e, t) {
+var g = /* @__PURE__ */ ((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))(g || {});
+function _e(e, t) {
   const n = t - 1;
   return e > n ? -1 : e < -1 ? n : e;
 }
-function ke(e, t) {
+function Be(e, t) {
   if (t.type === 0)
@@ -291,3 +295,3 @@ return {
   if (t.type === 2) {
-    const n = [...e.suggestions], o = e.activeOption ? h(e.activeOption, n) : -1;
+    const n = [...e.suggestions], o = e.activeOption ? w(e.activeOption, n) : -1;
     return {
@@ -314,3 +318,3 @@ ...e,
   if (t.type === 5) {
-    const n = Ne(t.payload, e.options.length);
+    const n = _e(t.payload, e.options.length);
     return {
@@ -327,3 +331,3 @@ ...e,
     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 ? h(e.activeOption, n) : -1;
+    const o = e.activeOption ? w(e.activeOption, n) : -1;
     return {
@@ -340,3 +344,3 @@ ...e,
     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 ? h(e.activeOption, n) : -1;
+    const o = e.activeOption ? w(e.activeOption, n) : -1;
     return {
@@ -353,54 +357,55 @@ ...e,
 }
-function q(e, t) {
+function J(e, t) {
   return e === t ? [] : e.filter((n) => !t.includes(n));
 }
-function Pe(e) {
-  return { ...e, options: [...e.suggestions] };
+function Ue(e) {
+  const t = e.suggestionsTransform(e.value, e.suggestions);
+  return { ...e, options: t };
 }
-function _e(e) {
-  const [t, n] = ie(ke, e, Pe), o = x({
+function Ve(e) {
+  const [t, n] = de(Be, e, Ue), o = m({
     state: null,
     flags: null,
     clearActiveIndex() {
-      n({ type: v.ClearActiveIndex });
+      n({ type: g.ClearActiveIndex });
     },
     clearAll() {
-      n({ type: v.ClearAll });
+      n({ type: g.ClearAll });
     },
     clearValue() {
-      n({ type: v.ClearValue });
+      n({ type: g.ClearValue });
     },
     collapse() {
-      n({ type: v.Collapse });
+      n({ type: g.Collapse });
     },
     expand() {
-      n({ type: v.Expand });
+      n({ type: g.Expand });
     },
     updateActiveIndex(a) {
-      n({ type: v.UpdateActiveIndex, payload: a });
+      n({ type: g.UpdateActiveIndex, payload: a });
     },
     updateSelected(a) {
-      n({ type: v.UpdateSelected, payload: a });
+      n({ type: g.UpdateSelected, payload: a });
     },
     updateSuggestions(a) {
-      n({ type: v.UpdateSuggestions, payload: a });
+      n({ type: g.UpdateSuggestions, payload: a });
     },
     updateValue(a) {
-      n({ type: v.UpdateValue, payload: a });
+      n({ type: g.UpdateValue, payload: a });
     }
   });
   return o.current.flags = {
-    tagsAdded: o.current.state ? q(t.selected, o.current.state.selected) : [],
-    tagsDeleted: o.current.state ? q(o.current.state.selected, t.selected) : []
+    tagsAdded: o.current.state ? J(t.selected, o.current.state.selected) : [],
+    tagsDeleted: o.current.state ? J(o.current.state.selected, t.selected) : []
   }, o.current.state = t, e.selected !== t.selected && o.current.updateSelected(e.selected), e.suggestions !== t.suggestions && o.current.updateSuggestions(e.suggestions), o.current;
 }
-function Ue(e, t) {
-  if ((e == null ? void 0 : e.value) === W && e.disabled === !1)
+function Le(e, t) {
+  if ((e == null ? void 0 : e.value) === j && e.disabled === !1)
     return { value: t, label: t };
 }
-function Be(e) {
-  const t = Ue(e.activeOption, e.value) || e.activeOption || Ie(e.value, e.options);
+function Ke(e) {
+  const t = Le(e.activeOption, e.value) || e.activeOption || Ce(e.value, e.options);
   return t && !t.disabled ? t : void 0;
 }
-function Le({
+function $e({
   closeOnSelect: e,
@@ -411,7 +416,7 @@ manager: t,
 }) {
-  return D(
+  return R(
     (a) => {
-      if (a != null || (a = Be(t.state)), !a)
+      if (a != null || (a = Ke(t.state)), !a)
         return;
-      const c = h(a, t.state.selected);
+      const c = w(a, t.state.selected);
       c >= 0 ? o(c) : (n(a), e ? t.clearAll() : t.clearValue());
@@ -422,13 +427,13 @@ },
 }
-function Ve(e) {
+function Fe(e) {
   var E;
-  const { id: t, inputRef: n, manager: o, onSelect: a } = p(d), c = x(null), r = o.state.options[e], u = e === o.state.activeIndex, s = (E = r.disabled) != null ? E : !1, f = h(r, o.state.selected) > -1, g = D(() => {
-    var m;
-    a(), (m = n.current) == null || m.focus();
-  }, [n, a]), y = D(() => {
+  const { id: t, inputRef: n, manager: o, onSelect: a } = p(d), c = m(null), r = o.state.options[e], u = e === o.state.activeIndex, s = (E = r.disabled) != null ? E : !1, f = w(r, o.state.selected) > -1, v = R(() => {
+    var x;
+    a(), (x = n.current) == null || x.focus();
+  }, [n, a]), y = R(() => {
     e !== o.state.activeIndex && o.updateActiveIndex(e);
   }, [e, o]);
-  return w(() => {
-    var m;
-    u && ((m = c.current) == null || m.scrollIntoView({ block: "nearest", inline: "start" }));
+  return C(() => {
+    var x;
+    u && ((x = c.current) == null || x.scrollIntoView({ block: "nearest", inline: "start" }));
   }, [u]), {
@@ -447,4 +452,4 @@ option: {
       "aria-setsize": o.state.options.length,
-      id: J(t, r),
-      onClick: g,
+      id: Y(t, r),
+      onClick: v,
       onMouseDown: y,
@@ -457,5 +462,44 @@ ref: c,
 }
-function Ke() {
-  const [e, t] = H(!1), { id: n, inputRef: o, rootRef: a } = p(d), c = R(() => ({
-    "aria-describedby": S(n),
+function ze({ inputRef: e, manager: t }) {
+  return m({
+    input: {
+      clear() {
+        t.clearValue();
+      },
+      focus() {
+        var o;
+        (o = e.current) == null || o.focus();
+      },
+      get value() {
+        return t.state.value;
+      },
+      set value(o) {
+        t.updateValue(o);
+      }
+    },
+    listBox: {
+      collapse() {
+        t.collapse();
+      },
+      expand() {
+        t.expand();
+      },
+      get activeIndex() {
+        return t.state.activeIndex;
+      },
+      set activeIndex(o) {
+        t.updateActiveIndex(o);
+      },
+      get isExpanded() {
+        return t.state.isExpanded;
+      },
+      get options() {
+        return t.state.options;
+      }
+    }
+  }).current;
+}
+function We() {
+  const [e, t] = Q(!1), { id: n, inputRef: o, rootRef: a } = p(d), c = T(() => ({
+    "aria-describedby": O(n),
     id: n,
@@ -481,4 +525,4 @@ onFocus() {
 }
-function $e(e, t) {
-  const { isDisabled: n, manager: o, onSelect: a } = p(d), c = o.state.selected[e], r = D(() => a(c), [a, c]);
+function je(e, t) {
+  const { isDisabled: n, manager: o, onSelect: a } = p(d), c = o.state.selected[e], r = R(() => a(c), [a, c]);
   return {
@@ -488,8 +532,8 @@ tag: c,
       "aria-disabled": n,
-      title: O(t, c.label),
-      onClick: n ? z : r
+      title: D(t, c.label),
+      onClick: n ? W : r
     }
   };
 }
-const Fe = {
+const He = {
   position: "absolute",
@@ -502,8 +546,8 @@ width: 1,
 };
-function ze({ ariaAddedText: e, ariaDeletedText: t }) {
-  const { manager: n } = p(d), o = x([]);
+function qe({ ariaAddedText: e, ariaDeletedText: t }) {
+  const { manager: n } = p(d), o = m([]);
   return n.flags.tagsAdded.forEach((a) => {
-    o.current.push(O(e, a.label));
+    o.current.push(D(e, a.label));
   }), n.flags.tagsDeleted.forEach((a) => {
-    o.current.push(O(t, a.label));
+    o.current.push(D(t, a.label));
   }), /* @__PURE__ */ i.createElement("div", {
@@ -513,8 +557,8 @@ "aria-live": "polite",
     role: "status",
-    style: Fe
+    style: He
   }, o.current.join(`
 `));
 }
-function We({ children: e }) {
-  const { classNames: t } = p(d), n = he();
+function Ge({ children: e }) {
+  const { classNames: t } = p(d), n = Re();
   return /* @__PURE__ */ i.createElement("div", {
@@ -525,3 +569,3 @@ className: t.comboBox,
 }
-function je({
+function Je({
   allowBackspace: e = !0,
@@ -534,3 +578,3 @@ allowResize: t = !0,
 }) {
-  const { classNames: r } = p(d), { value: u, ...s } = Ce({
+  const { classNames: r } = p(d), { value: u, ...s } = Te({
     allowBackspace: e,
@@ -540,3 +584,3 @@ allowTab: n,
     ariaErrorMessage: a
-  }), f = u.length < c.length ? c : u, { sizerProps: g, width: y } = Re({ allowResize: t, text: f });
+  }), f = u.length < c.length ? c : u, { sizerProps: v, width: y } = Ae({ allowResize: t, text: f });
   return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement("input", {
@@ -549,15 +593,15 @@ className: r.input,
   }), t ? /* @__PURE__ */ i.createElement("div", {
-    ...g
+    ...v
   }, f) : null);
 }
-const qe = ({ children: e, classNames: t, id: n }) => /* @__PURE__ */ i.createElement("div", {
+const Qe = ({ children: e, classNames: t, id: n }) => /* @__PURE__ */ i.createElement("div", {
   className: t.label,
   id: n
 }, e);
-function He({ children: e, render: t = qe }) {
+function Xe({ children: e, render: t = Qe }) {
   const { classNames: n, id: o } = p(d);
-  return t({ children: e, classNames: n, id: S(o) });
+  return t({ children: e, classNames: n, id: O(o) });
 }
-function Ge({ children: e }) {
-  const { classNames: t, manager: n } = p(d), o = Ae();
+function Ye({ children: e }) {
+  const { classNames: t, manager: n } = p(d), o = ke();
   return !n.state.isExpanded || i.Children.count(e) === 0 ? null : /* @__PURE__ */ i.createElement("div", {
@@ -568,6 +612,6 @@ className: t.listBox,
 }
-function Je({ label: e, query: t }) {
-  return /* @__PURE__ */ i.createElement("span", null, O(e, t));
+function Ze({ label: e, query: t }) {
+  return /* @__PURE__ */ i.createElement("span", null, D(e, t));
 }
-const Qe = i.memo(Je), Xe = ({ children: e, classNames: t, option: n, ...o }) => {
+const Me = i.memo(Ze), et = ({ children: e, classNames: t, option: n, ...o }) => {
   const a = [t.option];
@@ -579,7 +623,7 @@ return n.active && a.push(t.optionIsActive), /* @__PURE__ */ i.createElement("div", {
 };
-function Ye({ index: e, render: t = Xe }) {
-  const { classNames: n, manager: o } = p(d), { option: a, optionProps: c } = Ve(e), r = a.value === W || a.value === Y ? /* @__PURE__ */ i.createElement(Qe, {
+function tt({ index: e, render: t = et }) {
+  const { classNames: n, manager: o } = p(d), { option: a, optionProps: c } = Fe(e), r = a.value === j || a.value === ee ? /* @__PURE__ */ i.createElement(Me, {
     label: a.label,
     query: o.state.value
-  }) : /* @__PURE__ */ i.createElement(et, {
+  }) : /* @__PURE__ */ i.createElement(at, {
     label: a.label,
@@ -590,15 +634,15 @@ query: o.state.value
 }
-function Ze(e, t) {
-  const n = X(t);
+function nt(e, t) {
+  const n = M(t);
   return e.replace(n, "<mark>$&</mark>");
 }
-function Me({ label: e, query: t }) {
+function ot({ label: e, query: t }) {
   return /* @__PURE__ */ i.createElement("span", {
-    dangerouslySetInnerHTML: { __html: Ze(e, t) }
+    dangerouslySetInnerHTML: { __html: nt(e, t) }
   });
 }
-const et = i.memo(Me);
-function tt({ children: e }) {
-  Se();
-  const { classNames: t, isDisabled: n, isInvalid: o } = p(d), { isActive: a, rootProps: c } = Ke(), r = [t.root];
+const at = i.memo(ot);
+function st({ children: e }) {
+  Pe();
+  const { classNames: t, isDisabled: n, isInvalid: o } = p(d), { isActive: a, rootProps: c } = We(), r = [t.root];
   return a && r.push(t.rootIsActive), n && r.push(t.rootIsDisabled), o && r.push(t.rootIsInvalid), /* @__PURE__ */ i.createElement("div", {
@@ -609,3 +653,3 @@ className: r.join(" "),
 }
-const nt = ({ classNames: e, tag: t, ...n }) => /* @__PURE__ */ i.createElement("button", {
+const rt = ({ classNames: e, tag: t, ...n }) => /* @__PURE__ */ i.createElement("button", {
   type: "button",
@@ -617,7 +661,7 @@ className: e.tag,
 }, t.label));
-function ot({ render: e = nt, index: t, title: n }) {
-  const { classNames: o } = p(d), { tag: a, tagProps: c } = $e(t, n);
+function lt({ render: e = rt, index: t, title: n }) {
+  const { classNames: o } = p(d), { tag: a, tagProps: c } = je(t, n);
   return e({ classNames: o, tag: a, ...c });
 }
-function at({ children: e, label: t }) {
+function it({ children: e, label: t }) {
   const { classNames: n, tagListRef: o } = p(d);
@@ -635,3 +679,3 @@ return /* @__PURE__ */ i.createElement("ul", {
 }
-const st = {
+const ct = {
   root: "react-tags",
@@ -653,3 +697,3 @@ rootIsActive: "is-active",
 };
-function lt({
+function ut({
   allowBackspace: e = !0,
@@ -663,29 +707,30 @@ allowNew: t = !1,
   ariaDeletedText: u = "Removed tag %value%",
-  classNames: s = st,
+  classNames: s = ct,
   closeOnSelect: f = !1,
-  deleteButtonText: g = "Remove %value% from the list",
+  deleteButtonText: v = "Remove %value% from the list",
   id: y = "react-tags",
   isDisabled: E = !1,
-  isInvalid: m = !1,
-  labelText: T = "Select tags",
+  isInvalid: x = !1,
+  labelText: S = "Select tags",
   newOptionText: A = "Add %value%",
-  noOptionsText: N = "No options found for %value%",
-  onAdd: k,
-  onDelete: P,
+  noOptionsText: P = "No options found for %value%",
+  onAdd: N,
+  onDelete: k,
   onInput: _,
-  onValidate: U,
-  placeholderText: B = "Add a tag",
-  renderLabel: L,
-  renderOption: V,
-  renderTag: j,
+  onValidate: B,
+  placeholderText: U = "Add a tag",
+  renderLabel: V,
+  renderOption: L,
+  renderTag: H,
   selected: l = [],
   suggestions: I = [],
-  suggestionsTransform: Z = Ee,
-  tagListLabelText: M = "Selected tags"
-}) {
-  const ee = x(null), te = x(null), ne = x(null), oe = x(null), ae = x(null), { newTagOption: se, noTagsOption: re } = Te({
+  suggestionsTransform: te = we,
+  tagListLabelText: ne = "Selected tags"
+}, K) {
+  var G;
+  const oe = m(null), q = m(null), ae = m(null), se = m(null), re = m(null), { newTagOption: le, noTagsOption: ie } = Ne({
     newOptionText: A,
-    noOptionsText: N,
-    onValidate: U
-  }), C = _e({
+    noOptionsText: P,
+    onValidate: B
+  }), h = Ve({
     activeIndex: -1,
@@ -695,46 +740,46 @@ activeOption: null,
     isExpanded: !1,
-    newTagOption: se,
-    noTagsOption: re,
+    newTagOption: le,
+    noTagsOption: ie,
     options: [],
     selected: l,
     suggestions: I,
-    suggestionsTransform: Z,
+    suggestionsTransform: te,
     value: ""
-  }), le = Le({ closeOnSelect: f, manager: C, onAdd: k, onDelete: P });
-  return /* @__PURE__ */ i.createElement(d.Provider, {
+  }), ce = $e({ closeOnSelect: f, manager: h, onAdd: N, onDelete: k }), ue = ze({ inputRef: q, manager: h });
+  return K && ((G = K.current) != null || (K.current = ue)), /* @__PURE__ */ i.createElement(d.Provider, {
     value: {
       classNames: s,
-      comboBoxRef: ee,
+      comboBoxRef: oe,
       id: y,
-      inputRef: te,
+      inputRef: q,
       isDisabled: E,
-      isInvalid: m,
-      listBoxRef: ne,
-      manager: C,
+      isInvalid: x,
+      listBoxRef: ae,
+      manager: h,
       onInput: _,
-      onSelect: le,
-      rootRef: oe,
-      tagListRef: ae
+      onSelect: ce,
+      rootRef: se,
+      tagListRef: re
     }
-  }, /* @__PURE__ */ i.createElement(tt, null, /* @__PURE__ */ i.createElement(He, {
-    render: L
-  }, T), /* @__PURE__ */ i.createElement(at, {
-    label: M
-  }, C.state.selected.map((K, $) => /* @__PURE__ */ i.createElement(ot, {
-    key: F(K),
-    index: $,
-    render: j,
-    title: g
-  }))), /* @__PURE__ */ i.createElement(We, null, /* @__PURE__ */ i.createElement(je, {
+  }, /* @__PURE__ */ i.createElement(st, null, /* @__PURE__ */ i.createElement(Xe, {
+    render: V
+  }, S), /* @__PURE__ */ i.createElement(it, {
+    label: ne
+  }, h.state.selected.map(($, F) => /* @__PURE__ */ i.createElement(lt, {
+    key: z($),
+    index: F,
+    render: H,
+    title: v
+  }))), /* @__PURE__ */ i.createElement(Ge, null, /* @__PURE__ */ i.createElement(Je, {
     allowBackspace: e,
     allowResize: n,
     allowTab: o,
-    placeholderText: B,
+    placeholderText: U,
     ariaDescribedBy: c,
     ariaErrorMessage: r
-  }), /* @__PURE__ */ i.createElement(Ge, null, C.state.options.map((K, $) => /* @__PURE__ */ i.createElement(Ye, {
-    key: F(K),
-    index: $,
-    render: V
-  })))), /* @__PURE__ */ i.createElement(ze, {
+  }), /* @__PURE__ */ i.createElement(Ye, null, h.state.options.map(($, F) => /* @__PURE__ */ i.createElement(tt, {
+    key: z($),
+    index: F,
+    render: L
+  })))), /* @__PURE__ */ i.createElement(qe, {
     ariaAddedText: a,
@@ -744,4 +789,5 @@ ariaDeletedText: u
 }
+const pt = i.forwardRef(ut);
 export {
-  lt as ReactTags
+  pt as ReactTags
 };

dist/ReactTags.umd.js

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

dist/types.d.ts

@@ -42,2 +42,18 @@ // Generated by dts-bundle-generator v6.13.0
 export declare type SuggestionsTransform = (value: string, suggestions: TagSuggestion[]) => TagSuggestion[];
+declare type PublicAPI = {
+	input: {
+		clear(): void;
+		focus(): void;
+		get value(): string;
+		set value(value: string);
+	};
+	listBox: {
+		collapse(): void;
+		expand(): void;
+		get activeIndex(): number;
+		set activeIndex(index: number);
+		get isExpanded(): boolean;
+		get options(): TagSuggestion[];
+	};
+};
 export declare type LabelRendererProps = {
@@ -91,4 +107,9 @@ children: React.ReactNode;
 };
-export declare function ReactTags({ allowBackspace, allowNew, allowResize, allowTab, ariaAddedText, ariaDescribedBy, ariaErrorMessage, ariaDeletedText, classNames, closeOnSelect, deleteButtonText, id, isDisabled, isInvalid, labelText, newOptionText, noOptionsText, onAdd, onDelete, onInput, onValidate, placeholderText, renderLabel, renderOption, renderTag, selected, suggestions, suggestionsTransform, tagListLabelText, }: ReactTagsProps): JSX.Element;
+declare const ReactTagsWithRef: React.ForwardRefExoticComponent<ReactTagsProps & React.RefAttributes<PublicAPI>>;
 
+export {
+	PublicAPI as ReactTagsAPI,
+	ReactTagsWithRef as ReactTags,
+};
+
 export {};

example/src/main.jsx

@@ -1,2 +0,2 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import ReactDOM from 'react-dom/client'
@@ -46,3 +46,3 @@ import { ReactTags } from '../../src'
       <ReactTags
-        id="demo-1"
+        id="demo-component-1"
         labelText="Select countries"
@@ -150,3 +150,3 @@ onAdd={onAdd}
         closeOnSelect
-        id="demo-2"
+        id="demo-component-2"
         labelText="Enter new tags"
@@ -200,3 +200,3 @@ onAdd={onAdd}
         ariaErrorMessage="error"
-        id="demo-3"
+        id="demo-component-3"
         isInvalid={selected.length !== length}
@@ -314,3 +314,3 @@ labelText="Select countries"
         ariaDescribedBy="description-4"
-        id="demo-4"
+        id="demo-component-4"
         labelText="Select breweries"
@@ -334,1 +334,67 @@ noOptionsText={noOptionsText}
 container4.render(<AsyncSuggestions />)
+
+/**
+ * Demo 5 - Using the API
+ */
+
+function UsingTheAPI() {
+  const [selected, setSelected] = useState([])
+
+  const onAdd = useCallback(
+    (newTag) => {
+      setSelected([...selected, newTag])
+    },
+    [selected]
+  )
+
+  const onDelete = useCallback(
+    (index) => {
+      setSelected(selected.filter((_, i) => i !== index))
+    },
+    [selected]
+  )
+
+  const api = useRef(null)
+
+  const focus = useCallback(() => {
+    api.current.input.focus()
+  }, [api])
+
+  const clear = useCallback(() => {
+    api.current.input.clear()
+  }, [api])
+
+  const toggle = useCallback(() => {
+    api.current.listBox.isExpanded ? api.current.listBox.collapse() : api.current.listBox.expand()
+  }, [api])
+
+  return (
+    <>
+      <p>Use the buttons below to control the component:</p>
+      <p>
+        <button type="button" onClick={focus}>
+          Focus input
+        </button>
+        <button type="button" onClick={clear}>
+          Clear input value
+        </button>
+        <button type="button" onClick={toggle}>
+          Toggle options list
+        </button>
+      </p>
+      <ReactTags
+        id="demo-component-5"
+        isInvalid={selected.length !== length}
+        labelText="Select countries"
+        onAdd={onAdd}
+        onDelete={onDelete}
+        ref={api}
+        selected={selected}
+        suggestions={suggestions}
+      />
+    </>
+  )
+}
+
+const container5 = ReactDOM.createRoot(document.getElementById('demo-5'))
+container5.render(<UsingTheAPI />)

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "7.0.0-beta.8",
+  "version": "7.0.0-beta.9",
   "description": "",
@@ -55,3 +55,2 @@ "main": "dist/ReactTags.cjs.js",
     "lint-staged": "^13.0.0",
-    "match-sorter": "^6.3.0",
     "prettier": "^2.6.0",
@@ -58,0 +57,0 @@ "react": "^18.0.0",

readme.md

@@ -88,2 +88,5 @@ # React Tag Autocomplete
 - [`placeholderText`](#placeholderText-optional)
+- [`renderLabel`](#renderLabel-optional)
+- [`renderOption`](#renderOption-optional)
+- [`renderTag`](#renderTag-optional)
 - [`selected`](#selected-optional)
@@ -234,2 +237,50 @@ - [`suggestions`](#suggestions-optional)
 
+#### renderLabel (optional)
+
+Optional custom label component to render. Receives the label text as children, required label attributes, and [`classNames`](#classNames-optional) as props. Defaults to `null`.
+
+
+```js
+function CustomLabel({ children, classNames, ...labelProps }) {
+  return (
+    <div className={classNames.label} {...labelProps}>
+      {children}
+    </div>
+  )
+}
+```
+
+#### renderOption (optional)
+
+Optional custom option component to render. Receives the pre-rendered option text as children, option object, required option attributes, and [`classNames`](#classNames-optional) as props. Defaults to `null`.
+
+```js
+function CustomOption({ children, classNames, option, ...optionProps }) {
+  const classes = [
+    classNames.option,
+    option.active ? 'is-active' : '',
+    option.selected ? 'is-selected' : ''
+  ]
+
+  return (
+    <div className={classes.join(' ')} {...optionProps}>
+      {children}
+    </div>
+  )
+}
+```
+
+#### renderTag (optional)
+
+Optional custom tag component to render. Receives the selected tag object, required tag attributes, and [`classNames`](#classNames-optional) as props. Defaults to `null`.
+
+```js
+function CustomTag({ classNames, tag, ...tagProps }) {
+  return (
+    <button type="button" className={classNames.tag} {...tagProps}>
+      <span className={classNames.tagName}>{tag.label}</span>
+    </button>
+  )
+}
+
 #### selected (optional)
@@ -236,0 +287,0 @@

No alert changes

Improved metrics

Total package byte prevSize

323799

increased by1.7%

Dev dependency count

21

decreased by-4.55%

Lines of code

10385

increased by1.23%

Number of lines in readme file

339

increased by17.71%

No dependency changes