@ui-machines/tags-input/dist/index.mjs

Core logic for the tags-input widget implemented as a state machine

var g=e=>e?"":void 0;var j=(()=>{let e=0;return()=>(e++,e.toString(36))})();function m(e){let t=new Set;function o(n){let s=globalThis.requestAnimationFrame(n);t.add(()=>globalThis.cancelAnimationFrame(s))}return o(()=>o(e)),function(){t.forEach(function(n){n()})}}function E(e){var t;return(t=e.nativeEvent)!=null?t:e}function I(e,t){var o;let n=Array.isArray(t.exclude)?t.exclude:[t.exclude],s=(o=e.relatedTarget)!=null?o:t.fallback;return n.every(l=>!(l==null?void 0:l.contains(s)))}var z=["input:not([disabled]):not([type=hidden])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","embed","iframe","object","a[href]","area[href]","[tabindex]","audio[controls]","video[controls]","*[tabindex]:not([aria-disabled])","[contenteditable]:not([contenteditable=false])","details > summary:first-of-type"].join(",");var x={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft",Home:"End",End:"Home"},S={Up:"ArrowUp",Down:"ArrowDown",Esc:"Escape"," ":"Space",",":"Comma",Left:"ArrowLeft",Right:"ArrowRight"};function L(e,t={}){var o;let{dir:n="ltr",orientation:s="horizontal"}=t,{key:l}=e;return l=(o=S[l])!=null?o:l,n==="rtl"&&s==="horizontal"&&l in x&&(l=x[l]),l}var D={border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px",whiteSpace:"nowrap",wordWrap:"normal"};function M(e){Object.assign(e.style,D)}function P(e={}){let{ariaLive:t="polite",role:o="log",ariaRelevant:n="additions",doc:s,root:l,name:i="machine-announcer"}=e,a=null,u=s||document,d=u.defaultView||window;if(u.getElementById("__live-region__"))return null;a=u.createElement(i),a.id="__live-region__",a.setAttribute("aria-live",t),a.setAttribute("role",o),a.setAttribute("aria-relevant",n),M(a),(l!=null?l:u.body).appendChild(a);function p(y,R=7e3){if(!a)return;let b=u.createElement("p");b.innerHTML=y,a.appendChild(b),d.setTimeout(()=>{a==null||a.removeChild(b)},R)}function c(){var y;!a||(y=a.parentNode)==null||y.removeChild(a)}return{announce:p,destroy:c}}function A(e,t){var o;return Array.from((o=e==null?void 0:e.querySelectorAll(t))!=null?o:[])}function V(e,t){return e.find(o=>o.id===t)}function w(e,t){let o=V(e,t);return o?e.indexOf(o):-1}function O(e,t,o=!0){let n=w(e,t);return n=o?(n+1)%e.length:Math.min(n+1,e.length-1),e[n]}function C(e,t,o=!0){let n=w(e,t);return n===-1?o?e[e.length-1]:null:(n=o?(n-1+e.length)%e.length:Math.max(0,n-1),e[n])}var f=(e,t)=>({variable:e,reference:t?`var(${e}, ${t})`:`var(${e})`}),U={arrowShadowColor:f("--arrow-shadow-color"),arrowSize:f("--arrow-size"),arrowSizeHalf:f("--arrow-size-half"),arrowBg:f("--arrow-background"),transformOrigin:f("--transform-origin"),arrowOffset:f("--arrow-offset"),boxShadow:f("--arrow-box-shadow")};function W(e){return{button:e,label:e,input:e,output:e,element:e}}var k=W(e=>e);var r={getDoc:e=>{var t;return(t=e.doc)!=null?t:document},getRootId:e=>`tags-input-${e.uid}-root`,getInputId:e=>`tags-input-${e.uid}-input`,getEditInputId:e=>`${e.editedId}-input`,getClearButtonId:e=>`tags-input-${e.uid}-clear-btn`,getHiddenInputId:e=>`tags-input-${e.uid}-hidden-input`,getTagId:(e,t)=>`tags-input-${e.uid}-tag-${t}`,getTagDeleteBtnId:(e,t)=>`${r.getTagId(e,t)}-delete-btn`,getTagInputId:(e,t)=>`${r.getTagId(e,t)}-input`,getRootEl:e=>r.getDoc(e).getElementById(r.getRootId(e)),getInputEl:e=>r.getDoc(e).getElementById(r.getInputId(e)),getEditInputEl:e=>r.getDoc(e).getElementById(r.getEditInputId(e)),getTag:(e,t)=>r.getDoc(e).getElementById(r.getTagId(e,t)),getElements:e=>A(r.getRootEl(e),`[data-ownedby=${r.getRootId(e)}]`),getClosestFormEl:e=>{var t;return(t=r.getInputEl(e))==null?void 0:t.closest("form")},getIndexOfId:(e,t)=>w(r.getElements(e),t),isInputFocused:e=>r.getDoc(e).activeElement===r.getInputEl(e),getFirstEl:e=>r.getElements(e)[0],getLastEl:e=>r.getElements(e)[r.getElements(e).length-1],getPrevEl:(e,t)=>C(r.getElements(e),t,!1),getNextEl:(e,t)=>O(r.getElements(e),t,!1),getFocusedTagValue:e=>{var o;if(!e.focusedId)return null;let t=r.getIndexOfId(e,e.focusedId);return t===-1?null:(o=r.getElements(e)[t].dataset.value)!=null?o:null}};function _(e,t,o=k){let{context:n}=e,s=e.matches("focused:input","navigating:tag"),l=e.matches("editing:tag");return{value:n.value,valueAsString:n.valueAsString,clear(){t("CLEAR_ALL")},add(i){t({type:"ADD_TAG",value:i})},delete(i){t({type:"DELETE_TAG",id:i})},focus(){m(()=>{var i;(i=r.getInputEl(n))==null||i.focus()})},blur(){var i;(i=r.getInputEl(n))==null||i.blur()},rootProps:o.element({"data-part":"root","data-invalid":g(n.outOfRange),"data-disabled":g(n.disabled),"data-focus":g(s),id:r.getRootId(n),onPointerDown(){t("POINTER_DOWN")}}),inputProps:o.input({"data-part":"input",id:r.getInputId(n),value:n.inputValue,autoComplete:"off",disabled:n.disabled,onChange(i){let a=E(i);a.isComposing||a.inputType==="insertFromPaste"||t({type:"TYPE",value:i.target.value})},onFocus(){t("FOCUS")},onBlur(i){I(i,{exclude:r.getRootEl(n)})&&t("BLUR")},onPaste(i){let a=i.clipboardData.getData("text/plain");t({type:"PASTE",value:a})},onKeyDown(i){if(E(i).isComposing)return;let u={ArrowDown(){t("ARROW_DOWN")},ArrowLeft(){t("ARROW_LEFT")},ArrowRight(){n.focusedId&&i.preventDefault(),t("ARROW_RIGHT")},Escape(c){c.preventDefault(),t("ESCAPE")},Backspace(){t("BACKSPACE")},Delete(){t("DELETE")},Comma(c){c.preventDefault(),t("COMMA")},Enter(c){c.preventDefault(),t("ENTER")}},d=L(i,n),p=u[d];p==null||p(i)}}),hiddenInputProps:o.input({"data-part":"hidden-input",type:"hidden",name:n.name,id:r.getHiddenInputId(n),value:n.valueAsString}),getTagProps({index:i,value:a}){let u=r.getTagId(n,i);return o.element({"data-part":"tag",id:u,hidden:l?n.editedId===u:!1,"data-value":a,"data-disabled":g(n.disabled),"data-selected":g(u===n.focusedId),"data-ownedby":r.getRootId(n),onPointerDown(d){d.preventDefault(),t({type:"POINTER_DOWN_TAG",id:u})},onDoubleClick(){t({type:"DOUBLE_CLICK_TAG",id:u})}})},getTagInputProps({index:i}){let a=r.getTagId(n,i),u=n.editedId===a;return o.input({"data-part":"tag--input",id:r.getTagInputId(n,i),type:"text",tabIndex:-1,hidden:l?!u:!0,value:u?n.editedTagValue:"",onChange(d){t({type:"TAG_INPUT_TYPE",value:d.target.value})},onBlur(){t("TAG_INPUT_BLUR")},onKeyDown(d){let c={Enter(){t("TAG_INPUT_ENTER")},Escape(){t("TAG_INPUT_ESCAPE")}}[d.key];c&&(d.preventDefault(),c(d))}})},getTagDeleteButtonProps({index:i,value:a}){let u=r.getTagId(n,i);return o.button({"data-part":"tag--delete-button",id:r.getTagDeleteBtnId(n,i),type:"button","aria-label":`Delete ${a}`,tabIndex:-1,onPointerOver(){t({type:"HOVER_DELETE_TAG",id:u})},onClick(){t({type:"DELETE_TAG",id:u})}})},clearButtonProps:o.button({"data-part":"clear-button",id:r.getClearButtonId(n),type:"button","aria-label":"Clear all tags",hidden:n.count===0,onClick(){t("CLEAR_ALL")}})}}import{createMachine as F,guards as B,ref as H}from"@ui-machines/core";var{and:h,not:v,or:N}=B,T=h(N(v("isAtMax"),"allowOutOfRange"),v("isInputValueEmpty")),$=F({id:"tags-input",initial:"unknown",context:{uid:"test",inputValue:"",editedTagValue:"",focusedId:null,editedId:null,value:[],dir:"ltr",max:1/0,liveRegion:null,addOnBlur:!1,addOnPaste:!1,validateTag:()=>!0,separator:","},computed:{count:e=>e.value.length,valueAsString:e=>e.value.join(e.separator),trimmedInputValue:e=>e.inputValue.trim(),isInteractive:e=>!(e.readonly||e.disabled),isAtMax:e=>e.count===e.max,outOfRange:e=>e.count>e.max},watch:{focusedId:"invokeOnHighlight",outOfRange:"invokeOnInvalid"},exit:["removeLiveRegion"],on:{DOUBLE_CLICK_TAG:{target:"editing:tag",actions:["setEditedId","initEditedTagValue"]},POINTER_DOWN_TAG:{guard:v("isTagFocused"),target:"navigating:tag",actions:["focusTag","focusInput"]},DELETE_TAG:{actions:"deleteTag"},CLEAR_ALL:{actions:"clearValue"},ADD_TAG:{actions:["addTag","clearInputValue"]}},states:{unknown:{on:{SETUP:[{guard:"autoFocus",target:"focused:input",actions:"setupDocument"},{target:"idle",actions:"setupDocument"}]}},idle:{on:{FOCUS:"focused:input",POINTER_DOWN:{guard:v("hasFocusedId"),target:"focused:input"}}},"focused:input":{entry:["focusInput","clearFocusedId"],on:{TYPE:{actions:"setInputValue"},BLUR:[{target:"idle",guard:h("addOnBlur",T),actions:["addTag","clearInputValue"]},{target:"idle"}],ENTER:{guard:T,actions:["addTag","clearInputValue"]},COMMA:{guard:T,actions:["addTag","clearInputValue"]},ARROW_LEFT:{guard:h("hasTags","isInputCaretAtStart"),target:"navigating:tag",actions:"focusLastTag"},BACKSPACE:{target:"navigating:tag",guard:h("hasTags","isInputCaretAtStart"),actions:"focusLastTag"},PASTE:{guard:"addOnPaste",actions:["setInputValue","addTagFromPaste"]}}},"navigating:tag":{on:{ARROW_RIGHT:[{guard:h("hasTags","isInputCaretAtStart",v("isLastTagFocused")),actions:"focusNextTag"},{target:"focused:input"}],ARROW_LEFT:{actions:"focusPrevTag"},BLUR:{target:"idle",actions:"clearFocusedId"},ENTER:{target:"editing:tag",actions:["setEditedId","initEditedTagValue","focusEditedTagInput"]},ARROW_DOWN:"focused:input",ESCAPE:"focused:input",TYPE:{target:"focused:input",actions:"setInputValue"},BACKSPACE:{actions:["deleteFocusedTag","focusPrevTag"]},DELETE:{actions:"deleteFocusedTag"}}},"editing:tag":{entry:"focusEditedTagInput",on:{TAG_INPUT_TYPE:{actions:"setEditedTagValue"},TAG_INPUT_ESCAPE:{target:"navigating:tag",actions:["clearEditedTagValue","focusInput","clearEditedId"]},TAG_INPUT_BLUR:{target:"navigating:tag",actions:["clearEditedTagValue","clearFocusedId","clearEditedId"]},TAG_INPUT_ENTER:{target:"navigating:tag",actions:["submitEditedTagValue","focusInput","clearEditedId"]}}}}},{guards:{isAtMax:e=>e.isAtMax,hasFocusedId:e=>e.focusedId!==null,isInputFocused:e=>r.isInputFocused(e),isTagFocused:(e,t)=>e.focusedId===t.id,isLastTagFocused:e=>{var t;return((t=r.getLastEl(e))==null?void 0:t.id)===e.focusedId},isInputValueEmpty:e=>e.trimmedInputValue.length===0,hasTags:e=>e.value.length>0,allowOutOfRange:e=>!!e.allowOutOfRange,autoFocus:e=>!!e.autoFocus,addOnBlur:e=>!!e.addOnBlur,addOnPaste:e=>!!e.addOnPaste,isInputCaretAtStart(e){let t=r.getInputEl(e);if(!t)return!1;try{return t.selectionStart===0&&t.selectionEnd===0}catch(o){return t.value===""}}},actions:{invokeOnHighlight(e){var o;let t=r.getFocusedTagValue(e);(o=e.onHighlight)==null||o.call(e,t)},setupDocument(e,t){e.uid=t.id,e.doc=H(t.doc),e.liveRegion=P({name:"tags-announcer",role:"alert",ariaLive:"assertive"})},focusNextTag(e){if(!e.focusedId)return;let t=r.getNextEl(e,e.focusedId);t&&(e.focusedId=t.id)},focusLastTag(e){let t=r.getLastEl(e);t&&(e.focusedId=t.id)},focusPrevTag(e){if(!e.focusedId)return;let t=r.getPrevEl(e,e.focusedId);t&&(e.focusedId=t.id)},focusTag(e,t){e.focusedId=t.id},deleteTag(e,t){let o=r.getIndexOfId(e,t.id);e.value.splice(o,1)},deleteFocusedTag(e){if(!e.focusedId)return;let t=r.getIndexOfId(e,e.focusedId);e.value.splice(t,1)},setEditedId(e,t){var o;e.editedId=(o=t.id)!=null?o:e.focusedId},clearEditedId(e){e.editedId=null},clearEditedTagValue(e){e.editedTagValue=""},setEditedTagValue(e,t){e.editedTagValue=t.value},submitEditedTagValue(e){var o;if(!e.editedId)return;let t=r.getIndexOfId(e,e.editedId);e.value[t]=(o=e.editedTagValue)!=null?o:""},initEditedTagValue(e){if(!e.editedId)return;let t=r.getIndexOfId(e,e.editedId);e.editedTagValue=e.value[t]},focusEditedTagInput(e){m(()=>{var t;(t=r.getEditInputEl(e))==null||t.select()})},setInputValue(e,t){e.inputValue=t.value},clearFocusedId(e){e.focusedId=null},focusInput(e){m(()=>{var t;(t=r.getInputEl(e))==null||t.focus()})},clearInputValue(e){e.inputValue=""},addTag(e,t){var s,l,i;let o=(s=t.value)!=null?s:e.trimmedInputValue;((l=e.validateTag)==null?void 0:l.call(e,{inputValue:o,values:e.value}))?e.value.push(o):(i=e.onInvalid)==null||i.call(e,"invalidTag")},addTagFromPaste(e){m(()=>{var n,s;let t=e.trimmedInputValue;if((n=e.validateTag)==null?void 0:n.call(e,{inputValue:t,values:e.value})){let l=t.split(e.separator).map(i=>i.trim());e.value.push(...l)}else(s=e.onInvalid)==null||s.call(e,"invalidTag");e.inputValue=""})},clearValue(e){e.value=[]},removeLiveRegion(e){var t;(t=e.liveRegion)==null||t.destroy()},invokeOnInvalid(e){var t;e.outOfRange&&((t=e.onInvalid)==null||t.call(e,"outOfRange"))}}});export{_ as connect,$ as machine};
//# sourceMappingURL=index.mjs.map