react-tag-autocomplete - npm Package Compare versions

Comparing version 7.0.0-rc.1 to 7.0.0-rc.2

dist/ReactTags.cjs.js

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

dist/ReactTags.es.js

@@ -13,3 +13,3 @@ import u, { useContext as m, useMemo as G, useRef as y, useState as K, useEffect as O, useCallback as W } from "react";
   PageUp: "PageUp"
-}, J = Symbol("Create new tag"), Z = Symbol("No options"), _ = () => {
+}, J = Symbol("Create new tag"), Z = Symbol("No options"), S = () => {
 }, g = u.createContext(void 0);
@@ -113,3 +113,3 @@ function Y(e, t) {
       var p;
-      (p = l.current) != null && p.contains(o.relatedTarget) ? c.current.focus() : s.current.listBoxCollapse();
+      (p = l.current) != null && p.contains(o.relatedTarget) ? c.current.focus({ preventScroll: !0 }) : s.current.listBoxCollapse();
     }, w = () => {
@@ -123,3 +123,3 @@ s.current.listBoxExpand();
       f ? (o.preventDefault(), s.current.updateActiveIndex(p - 1)) : de(o.currentTarget) && (o.preventDefault(), s.current.listBoxExpand());
-    }, S = (o) => {
+    }, _ = (o) => {
       const { isExpanded: p, options: f } = s.current.state;
@@ -147,3 +147,3 @@ p && (o.preventDefault(), s.current.updateActiveIndex(f.length - 1));
       if (o.key === A.PageDown)
-        return S(o);
+        return _(o);
       if (o.key === A.Escape)
@@ -169,7 +169,7 @@ return T();
     id: ge(a),
-    onBlur: i ? _ : v.onBlur,
-    onChange: i ? _ : v.onChange,
-    onClick: i ? _ : v.onClick,
-    onFocus: i ? _ : v.onFocus,
-    onKeyDown: i ? _ : v.onKeyDown,
+    onBlur: i ? S : v.onBlur,
+    onChange: i ? S : v.onChange,
+    onClick: i ? S : v.onClick,
+    onFocus: i ? S : v.onFocus,
+    onKeyDown: i ? S : v.onKeyDown,
     ref: c,
@@ -228,3 +228,3 @@ role: "combobox",
       const d = (c = r.current) == null ? void 0 : c.contains(document.activeElement);
-      a && !d && ((i = e.current) == null || i.focus());
+      a && !d && ((i = e.current) == null || i.focus({ preventScroll: !0 }));
     }
@@ -245,7 +245,7 @@ }, [e, a, r, n]);
 }
-function _e(e, t, r) {
+function Se(e, t, r) {
   const n = t - 1;
   return e > n ? r : e < r ? n : e;
 }
-function Se({
+function _e({
   allowNew: e,
@@ -266,3 +266,3 @@ closeOnSelect: t,
 }) {
-  const E = y(), [P, D] = K(null), [w, k] = K(!1), [b, S] = K(""), h = G(() => {
+  const E = y(), [P, D] = K(null), [w, k] = K(!1), [b, _] = K(""), h = G(() => {
     const f = C(b, B);
@@ -300,7 +300,7 @@ if (e && b) {
     updateActiveIndex(f) {
-      const I = _e(f, h.length, x ? 0 : -1);
+      const I = Se(f, h.length, x ? 0 : -1);
       D(h[I]);
     },
     updateInputValue(f) {
-      b !== f && (S(f), d == null || d(f));
+      b !== f && (_(f), d == null || d(f));
     },
@@ -415,3 +415,3 @@ selectTag(f) {
       title: V(t, a.label),
-      onClick: r ? _ : l
+      onClick: r ? S : l
     }
@@ -543,3 +543,3 @@ };
   onCollapse: b,
-  onDelete: S,
+  onDelete: _,
   onExpand: h,
@@ -559,3 +559,3 @@ onFocus: T,
 }, $) {
-  const ce = y(null), Q = y(null), ie = y(null), le = y(null), ue = y(null), U = Se({
+  const ce = y(null), Q = y(null), ie = y(null), le = y(null), ue = y(null), U = _e({
     allowNew: t,
@@ -566,3 +566,3 @@ closeOnSelect: d,
     onAdd: w,
-    onDelete: S,
+    onDelete: _,
     onCollapse: b,
@@ -569,0 +569,0 @@ onExpand: h,

dist/ReactTags.umd.js

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

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "7.0.0-rc.1",
+  "version": "7.0.0-rc.2",
   "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

Improved metrics

Total package byte prevSize

321591

increased by0.04%

Lines of code

10222

increased by0.01%

No dependency changes