@quicksilver0218/react-tokenized-input 0.1.8 → 0.1.9

package/dist/index.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useRef,useCallback,useMemo,useState,memo,useEffect}from"react";function SuggestionComponent({displayText:e,hover:t,onMouseEnter:n,onMouseDown:r,onSelect:o}){return _jsx("button",{onClick:o,onMouseEnter:n,onMouseDown:r,style:{cursor:"pointer",border:"none",padding:".5em 1em",backgroundColor:t?"#333":"#1a1a1a",color:"white"},children:e})}let SuggestionListComponent=memo(({ref:e,children:t})=>_jsx("div",{ref:e,style:{display:"flex",flexDirection:"column",width:"min-content",maxHeight:"10em",overflow:"auto"},children:t})),defaultTrigger=/^@([^@]*)$/;function scrollToChild(e,t){e.scrollTop<t.offsetTop+t.offsetHeight-e.clientHeight?e.scrollTop=t.offsetTop+t.offsetHeight-e.clientHeight:e.scrollTop>t.offsetTop&&(e.scrollTop=t.offsetTop)}export default function TokenizedInput({tokens:y,setTokens:x,data:v,lists:b,suggestionListComponent:e=SuggestionListComponent,suggestionComponent:H=SuggestionComponent,multiline:t,caseSensitive:k,missingDataText:g="{missing}",missingDataStyle:$={color:"red",textDecoration:"red wavy underline"},style:n,onCopy:F,onCut:I,onPaste:A,onKeyDown:r,onScroll:o,onClick:s,onBlur:i,onChange:B,...l}){let a=useRef(null),[c,m]=useState([]),w=useRef(-1),S=useRef({tokenIndex:-1,caretPos:-1}),[u,C]=useState(0),T=useRef(!1),p=useCallback((e,t,n,r,o,s,i)=>{let l;var a=t[t.length-1],r=("string"==typeof a?(l=a,t[t.length-1]+=r,1===t.length&&(l=e+l)):(r&&t.push(r),l=""),"string"==typeof t[0]?t[0]=e+t[0]:e&&t.unshift(e),y.toSpliced(s,i-s,...t));"string"==typeof a&&"string"==typeof r[s+t.length]&&(r[s+t.length-1]+=r[s+t.length],r.splice(s+t.length,1)),"string"==typeof r[s]&&"string"==typeof r[s-1]&&(1===t.length&&(l=r[s-1]+l),r[s-1]+=r[s],r.splice(s,1),s--);let c=s+t.length-1;r[s]||(r.splice(s,1),c--),x(r);var u,g=[];for(u of b){var p,f=u.trigger??defaultTrigger,h=[];for(i=0;i<l.length;i++)h.push(l.substring(i).match(f));for(p of u.items)for(i=0;i<l.length;i++)if(h[i]){var d=v[p].displayText;if(k){if(d.startsWith(h[i][1])){g.push({key:p,startPos:i});break}}else if(d.toLowerCase().startsWith(h[i][1].toLowerCase())){g.push({key:p,startPos:i});break}}}m(g),C(0),T.current=!1,w.current=o+n,S.current={tokenIndex:c,caretPos:l.length}},[y,x,v,b,k,m,C]),f=useCallback(a=>{a.preventDefault?.();var c=a.target;if("deleteByDrag"!==a.inputType&&"insertFromDrop"!==a.inputType){let t=c.selectionStart,n=c.selectionEnd,e,r=(null===a.data?(e="",t===n&&("deleteContentBackward"===a.inputType?t--:"deleteContentForward"===a.inputType&&n++)):e=a.data,0),o=-1,s,i="",l="";for(s=0;s<y.length;s++){var u=y[s];let e;if(e=("string"==typeof u?u:v[u.key]?.displayText??g).length,-1===o&&r+e>t&&(o=s,i=c.value.substring(r,t)),r>=n){l=c.value.substring(n,r);break}r+=e}s===y.length&&(l=c.value.substring(n)),-1===o&&(o=y.length),p(i,[e],e.length,l,t,o,s)}},[y,v,g,p]),h=(useEffect(()=>{let e=a.current;return e?.addEventListener("beforeinput",f),()=>{e?.removeEventListener("beforeinput",f)}},[f]),useCallback(e=>{e.preventDefault();var t=e.target,r=t.selectionStart,o=t.selectionEnd;if(r!==o){var s,i=[];let t=0,n=0;for(s of y){let e;var l=(e="string"==typeof s?s:v[s.key]?.displayText??g).length;if(n<r)n+l>r&&(e=e.substring(r-n,Math.min(l,o-n)),i.push(e),t+=e.length);else{if(!(n<o))break;n+l<=o?"string"==typeof s&&"string"==typeof i[i.length-1]?i[i.length-1]+=s:i.push(s):(e=e.substring(0,o-n),"string"==typeof i[i.length-1]?i[i.length-1]+=e:i.push(e)),t+=e.length}n+=l}e.clipboardData.setData("application/json",JSON.stringify({tokens:i,length:t}))}},[y,v,g]));var N=useCallback(e=>{I?.(e),h(e),f({data:"",target:e.target})},[h,f]),K=useCallback(e=>{A?.(e);var i,t=e.clipboardData.getData("application/json");if(t)try{if((i=JSON.parse(t)).tokens&&i.length){e.preventDefault();var l=e.target,a=l.selectionStart,c=l.selectionEnd;let t=0,n=-1,r,o="",s="";for(r=0;r<y.length;r++){var u=y[r];let e;if(e=("string"==typeof u?u:v[u.key]?.displayText??g).length,-1===n&&t+e>a&&(n=r,o=l.value.substring(t,a)),t>=c){s=l.value.substring(c,t);break}t+=e}r===y.length&&(s=l.value.substring(c)),-1===n&&(n=y.length),p(o,i.tokens,i.length,s,a,n,r)}}catch{}},[y,v,g,p]);let d=useCallback(n=>{let{tokenIndex:r,caretPos:o}=S.current;x(e=>{var t=[...e],e=e[r];return t[r]=e.substring(o),t[r]||t.splice(r,1),t.splice(r,0,{key:n.key}),n.startPos&&t.splice(r,0,e.substring(0,n.startPos)),t}),a.current.focus();var e=v[n.key]?.displayText||g;w.current=a.current.selectionStart-o+n.startPos+e.length,m([]),T.current=!1},[x,v,g,m]),D=useRef(null),j=useRef(null);var O=useCallback(e=>{if(r?.(e),c.length)switch(e.key){case"ArrowUp":C(e=>{e=e?e-1:c.length-1;return scrollToChild(j.current,j.current.children[e]),e}),e.preventDefault();break;case"ArrowDown":C(e=>{e=e===c.length-1?0:e+1;return scrollToChild(j.current,j.current.children[e]),e}),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":m([]),T.current=!1;break;case"Escape":m([]),T.current=!1,e.preventDefault();break;case"Enter":d(c[u]),e.preventDefault()}},[r,c,u,C,m,d]),V=useCallback(e=>{o?.(e),D.current.scrollLeft=e.currentTarget.scrollLeft,D.current.scrollTop=e.currentTarget.scrollTop},[o]),J=useCallback(e=>{s?.(e),m([]),T.current=!1},[s,m]),U=useCallback(e=>{T.current||(i?.(e),m([]))},[i,m]);let[E,q]=useState(null),_=useRef(null),W=useCallback(()=>{var e,t;_.current&&E&&(e=E.getBoundingClientRect(),t=_.current.getBoundingClientRect(),e.left+t.width<=window.innerWidth?_.current.style.left=e.left+"px":_.current.style.left=e.right-t.width+"px",e.top+t.height<=window.innerHeight?_.current.style.top=e.bottom+"px":_.current.style.top=e.top-t.height+"px")},[E]),{borderWidth:L,boxSizing:G,fontFamily:Q,fontSize:X,fontStretch:Y,fontWidth:Z,fontStyle:ee,fontVariant:te,fontWeight:ne,letterSpacing:re,lineHeight:oe,overflowWrap:se,padding:ie,textAlign:le,textDecoration:ae,textIndent:ce,textTransform:ue,whiteSpace:ge,wordSpacing:pe}=(W(),useEffect(()=>(window.addEventListener("resize",W),window.addEventListener("scroll",W),()=>{window.removeEventListener("resize",W),window.removeEventListener("scroll",W)}),[W]),a.current?getComputedStyle(a.current):{});var fe=D.current?getComputedStyle(D.current).color:void 0;let{position:he,left:de,top:ye,right:xe,bottom:ve,inset:be,display:ke,width:P,height:R,color:me,...z}=useMemo(()=>n||{},[n]);useEffect(()=>{if(a.current){let e=new ResizeObserver(()=>{var e=D.current?.style;e&&(e.width=`calc(${a.current?.clientWidth||0}px + ${L} * 2)`,e.height=`calc(${a.current?.clientHeight||0}px + ${L} * 2)`)});return e.observe(a.current),()=>e.disconnect()}},[L]);var we=useCallback(e=>_jsx(t?"textarea":"input",{...e}),[t]),Se=useMemo(()=>{if(!y.length)return!1;var e=y[y.length-1];let t;return t="string"==typeof e?e:v[e.key]?.displayText||g,/\s$/.test(t)},[y,v,g]),M=useMemo(()=>y.map(e=>"string"==typeof e?e:v[e.key]?.displayText||g).join(""),[y,v,g]);return useEffect(()=>{var e;a.current&&(B?.({target:a.current}),-1!==w.current)&&(e=w.current,a.current.setSelectionRange(e,e),w.current=-1)},[M]),_jsx("div",{style:{position:he,left:de,top:ye,right:xe,bottom:ve,inset:be,display:ke||"inline-block",width:P,height:R},children:_jsxs("div",{style:{position:"relative"},children:[_jsx(we,{...l,ref:a,value:M,onCopy:e=>{F?.(e),h(e)},onCut:N,onPaste:K,onKeyDown:O,onScroll:V,onClick:J,onBlur:U,style:{fontFamily:"inherit",fontSize:"inherit",fontStretch:"inherit",fontStyle:"inherit",fontVariant:"inherit",fontWeight:"inherit",display:"block",boxSizing:"border-box",color:"transparent",caretColor:fe,width:P,height:R,...z}}),_jsxs("div",{ref:D,className:l.className,style:{borderWidth:L,boxSizing:G,fontFamily:Q,fontSize:X,fontStretch:Y,fontWidth:Z,fontStyle:ee,fontVariant:te,fontWeight:ne,letterSpacing:re,lineHeight:oe,overflowWrap:se,padding:ie,textAlign:le,textDecoration:ae,textIndent:ce,textTransform:ue,whiteSpace:ge,wordSpacing:pe,...z,color:me,pointerEvents:"none",position:"absolute",width:`calc(${a.current?.clientWidth||0}px + ${L} * 2)`,height:`calc(${a.current?.clientHeight||0}px + ${L} * 2)`,inset:0,borderStyle:"solid",borderColor:"transparent",background:"none",overflow:"hidden",textWrap:"nowrap"},children:[y.map((e,t)=>"string"==typeof e?t===S.current.tokenIndex?_jsxs("span",{children:[e.substring(0,S.current.caretPos),_jsx("span",{ref:e=>q(e)}),e.substring(S.current.caretPos)]},t):_jsx("span",{children:e},t):(e=v[e.key],_jsx("span",e?{style:e.style,children:e.displayText}:{style:$,children:g},t))),Se&&_jsx(_Fragment,{children:" "})]}),0!==c.length&&_jsx("div",{ref:_,style:{position:"fixed",zIndex:1},children:_jsx(e,{ref:j,children:c.map((e,t)=>{var n=v[e.key];return _jsx(H,{tokenKey:e.key,displayText:n.displayText,suggestionProps:n.suggestionProps,hover:u===t,onMouseEnter:()=>C(t),onMouseDown:()=>{T.current=!0},onSelect:()=>d(e)},e.key)})})})]})})}
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useRef,useCallback,useMemo,useState,memo,useEffect}from"react";function SuggestionComponent({displayText:e,hover:t,onMouseEnter:n,onMouseDown:r,onSelect:o}){return _jsx("button",{onClick:o,onMouseEnter:n,onMouseDown:r,style:{cursor:"pointer",border:"none",padding:".5em 1em",backgroundColor:t?"#333":"#1a1a1a",color:"white"},children:e})}let SuggestionListComponent=memo(({ref:e,children:t})=>_jsx("div",{ref:e,style:{display:"flex",flexDirection:"column",width:"min-content",maxHeight:"10em",overflow:"auto"},children:t})),defaultTrigger=/^@([^@]*)$/;function scrollToChild(e,t){e.scrollTop<t.offsetTop+t.offsetHeight-e.clientHeight?e.scrollTop=t.offsetTop+t.offsetHeight-e.clientHeight:e.scrollTop>t.offsetTop&&(e.scrollTop=t.offsetTop)}export default function TokenizedInput({tokens:y,setTokens:x,data:v,lists:b,suggestionListComponent:e=SuggestionListComponent,suggestionComponent:H=SuggestionComponent,multiline:t,caseSensitive:k,missingDataText:g="{missing}",missingDataStyle:$={color:"red",textDecoration:"red wavy underline"},style:n,onCopy:F,onCut:I,onPaste:A,onKeyDown:r,onScroll:o,onClick:s,onBlur:i,onChange:B,...l}){let a=useRef(null),[c,m]=useState([]),w=useRef(-1),S=useRef({tokenIndex:-1,caretPos:-1}),[u,C]=useState(0),T=useRef(!1),p=useCallback((e,t,n,r,o,s,i)=>{let l;var a=t[t.length-1],r=("string"==typeof a?(l=a,t[t.length-1]+=r,1===t.length&&(l=e+l)):(r&&t.push(r),l=""),"string"==typeof t[0]?t[0]=e+t[0]:e&&t.unshift(e),y.toSpliced(s,i-s,...t));"string"==typeof a&&"string"==typeof r[s+t.length]&&(r[s+t.length-1]+=r[s+t.length],r.splice(s+t.length,1)),"string"==typeof r[s]&&"string"==typeof r[s-1]&&(1===t.length&&(l=r[s-1]+l),r[s-1]+=r[s],r.splice(s,1),s--);let c=s+t.length-1;r[s]||(r.splice(s,1),c--),x(r);var u,g=[];for(u of b){var p,f=u.trigger??defaultTrigger,h=[];for(i=0;i<l.length;i++)h.push(l.substring(i).match(f));for(p of u.items)for(i=0;i<l.length;i++)if(h[i]){var d=v[p].displayText;if(k){if(d.startsWith(h[i][1])){g.push({key:p,startPos:i});break}}else if(d.toLowerCase().startsWith(h[i][1].toLowerCase())){g.push({key:p,startPos:i});break}}}m(g),C(0),T.current=!1,w.current=o+n,S.current={tokenIndex:c,caretPos:l.length}},[y,x,v,b,k,m,C]),f=useCallback(a=>{a.preventDefault?.();var c=a.target;if("deleteByDrag"!==a.inputType&&"insertFromDrop"!==a.inputType){let t=c.selectionStart,n=c.selectionEnd,e,r=(null===a.data?(e="",t===n&&("deleteContentBackward"===a.inputType?t--:"deleteContentForward"===a.inputType&&n++)):e=a.data,0),o=-1,s,i="",l="";for(s=0;s<y.length;s++){var u=y[s];let e;if(e=("string"==typeof u?u:v[u.key]?.displayText??g).length,-1===o&&r+e>t&&(o=s,i=c.value.substring(r,t)),r>=n){l=c.value.substring(n,r);break}r+=e}s===y.length&&(l=c.value.substring(n)),-1===o&&(o=y.length),p(i,[e],e.length,l,t,o,s)}},[y,v,g,p]),h=(useEffect(()=>{let e=a.current;return e?.addEventListener("beforeinput",f),()=>{e?.removeEventListener("beforeinput",f)}},[f]),useCallback(e=>{e.preventDefault();var t=e.target,r=t.selectionStart,o=t.selectionEnd;if(r!==o){var s,i=[];let t=0,n=0;for(s of y){let e;var l=(e="string"==typeof s?s:v[s.key]?.displayText??g).length;if(n<r)n+l>r&&(e=e.substring(r-n,Math.min(l,o-n)),i.push(e),t+=e.length);else{if(!(n<o))break;n+l<=o?"string"==typeof s&&"string"==typeof i[i.length-1]?i[i.length-1]+=s:i.push(s):(e=e.substring(0,o-n),"string"==typeof i[i.length-1]?i[i.length-1]+=e:i.push(e)),t+=e.length}n+=l}e.clipboardData.setData("application/json",JSON.stringify({tokens:i,length:t}))}},[y,v,g]));var N=useCallback(e=>{I?.(e),h(e),f({data:"",target:e.target})},[h,f]),K=useCallback(e=>{A?.(e);var i,t=e.clipboardData.getData("application/json");if(t)try{if((i=JSON.parse(t)).tokens&&i.length){e.preventDefault();var l=e.target,a=l.selectionStart,c=l.selectionEnd;let t=0,n=-1,r,o="",s="";for(r=0;r<y.length;r++){var u=y[r];let e;if(e=("string"==typeof u?u:v[u.key]?.displayText??g).length,-1===n&&t+e>a&&(n=r,o=l.value.substring(t,a)),t>=c){s=l.value.substring(c,t);break}t+=e}r===y.length&&(s=l.value.substring(c)),-1===n&&(n=y.length),p(o,i.tokens,i.length,s,a,n,r)}}catch{}},[y,v,g,p]);let d=useCallback(n=>{let{tokenIndex:r,caretPos:o}=S.current;x(e=>{var t=[...e],e=e[r];return t[r]=e.substring(o),t[r]||t.splice(r,1),t.splice(r,0,{key:n.key}),n.startPos&&t.splice(r,0,e.substring(0,n.startPos)),t}),a.current.focus();var e=v[n.key]?.displayText||g;w.current=a.current.selectionStart-o+n.startPos+e.length,m([]),T.current=!1},[x,v,g,m]),D=useRef(null),j=useRef(null);var O=useCallback(e=>{if(r?.(e),c.length)switch(e.key){case"ArrowUp":C(e=>{e=e?e-1:c.length-1;return scrollToChild(j.current,j.current.children[e]),e}),e.preventDefault();break;case"ArrowDown":C(e=>{e=e===c.length-1?0:e+1;return scrollToChild(j.current,j.current.children[e]),e}),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":m([]),T.current=!1;break;case"Escape":m([]),T.current=!1,e.preventDefault();break;case"Enter":d(c[u]),e.preventDefault()}},[r,c,u,C,m,d]),V=useCallback(e=>{o?.(e),D.current.scrollLeft=e.currentTarget.scrollLeft,D.current.scrollTop=e.currentTarget.scrollTop},[o]),J=useCallback(e=>{s?.(e),m([]),T.current=!1},[s,m]),U=useCallback(e=>{T.current||(i?.(e),m([]))},[i,m]);let[E,q]=useState(null),_=useRef(null),W=useCallback(()=>{var e,t;_.current&&E&&(e=E.getBoundingClientRect(),t=_.current.getBoundingClientRect(),e.left+t.width<=window.innerWidth?_.current.style.left=e.left+"px":_.current.style.left=e.right-t.width+"px",e.top+t.height<=window.innerHeight?_.current.style.top=e.bottom+"px":_.current.style.top=e.top-t.height+"px")},[E]),{borderWidth:L,boxSizing:G,fontFamily:Q,fontSize:X,fontStretch:Y,fontWidth:Z,fontStyle:ee,fontVariant:te,fontWeight:ne,letterSpacing:re,lineHeight:oe,overflowWrap:se,padding:ie,textAlign:le,textDecoration:ae,textIndent:ce,textTransform:ue,whiteSpace:ge,wordSpacing:pe}=(W(),useEffect(()=>(window.addEventListener("resize",W,!0),window.addEventListener("scroll",W,!0),()=>{window.removeEventListener("resize",W,!0),window.removeEventListener("scroll",W,!0)}),[W]),a.current?getComputedStyle(a.current):{});var fe=D.current?getComputedStyle(D.current).color:void 0;let{position:he,left:de,top:ye,right:xe,bottom:ve,inset:be,display:ke,width:P,height:R,color:me,...z}=useMemo(()=>n||{},[n]);useEffect(()=>{if(a.current){let e=new ResizeObserver(()=>{var e=D.current?.style;e&&(e.width=`calc(${a.current?.clientWidth||0}px + ${L} * 2)`,e.height=`calc(${a.current?.clientHeight||0}px + ${L} * 2)`)});return e.observe(a.current),()=>e.disconnect()}},[L]);var we=useCallback(e=>_jsx(t?"textarea":"input",{...e}),[t]),Se=useMemo(()=>{if(!y.length)return!1;var e=y[y.length-1];let t;return t="string"==typeof e?e:v[e.key]?.displayText||g,/\s$/.test(t)},[y,v,g]),M=useMemo(()=>y.map(e=>"string"==typeof e?e:v[e.key]?.displayText||g).join(""),[y,v,g]);return useEffect(()=>{var e;a.current&&(B?.({target:a.current}),-1!==w.current)&&(e=w.current,a.current.setSelectionRange(e,e),w.current=-1)},[M]),_jsx("div",{style:{position:he,left:de,top:ye,right:xe,bottom:ve,inset:be,display:ke||"inline-block",width:P,height:R},children:_jsxs("div",{style:{position:"relative"},children:[_jsx(we,{...l,ref:a,value:M,onCopy:e=>{F?.(e),h(e)},onCut:N,onPaste:K,onKeyDown:O,onScroll:V,onClick:J,onBlur:U,style:{fontFamily:"inherit",fontSize:"inherit",fontStretch:"inherit",fontStyle:"inherit",fontVariant:"inherit",fontWeight:"inherit",display:"block",boxSizing:"border-box",color:"transparent",caretColor:fe,width:P,height:R,...z}}),_jsxs("div",{ref:D,className:l.className,style:{borderWidth:L,boxSizing:G,fontFamily:Q,fontSize:X,fontStretch:Y,fontWidth:Z,fontStyle:ee,fontVariant:te,fontWeight:ne,letterSpacing:re,lineHeight:oe,overflowWrap:se,padding:ie,textAlign:le,textDecoration:ae,textIndent:ce,textTransform:ue,whiteSpace:ge,wordSpacing:pe,...z,color:me,pointerEvents:"none",position:"absolute",width:`calc(${a.current?.clientWidth||0}px + ${L} * 2)`,height:`calc(${a.current?.clientHeight||0}px + ${L} * 2)`,inset:0,borderStyle:"solid",borderColor:"transparent",background:"none",overflow:"hidden",textWrap:"nowrap"},children:[y.map((e,t)=>"string"==typeof e?t===S.current.tokenIndex?_jsxs("span",{children:[e.substring(0,S.current.caretPos),_jsx("span",{ref:e=>q(e)}),e.substring(S.current.caretPos)]},t):_jsx("span",{children:e},t):(e=v[e.key],_jsx("span",e?{style:e.style,children:e.displayText}:{style:$,children:g},t))),Se&&_jsx(_Fragment,{children:" "})]}),0!==c.length&&_jsx("div",{ref:_,style:{position:"fixed",zIndex:1},children:_jsx(e,{ref:j,children:c.map((e,t)=>{var n=v[e.key];return _jsx(H,{tokenKey:e.key,displayText:n.displayText,suggestionProps:n.suggestionProps,hover:u===t,onMouseEnter:()=>C(t),onMouseDown:()=>{T.current=!0},onSelect:()=>d(e)},e.key)})})})]})})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicksilver0218/react-tokenized-input",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A React input field component that tokenizes and autocompletes the input.",
   "type": "module",
   "main": "dist",