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

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

var T=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var B=e=>T(e,"__esModule",{value:!0});var H=(e,t)=>{for(var n in t)T(e,n,{get:t[n],enumerable:!0})},N=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of _(t))!F.call(e,l)&&(n||l!=="default")&&T(e,l,{get:()=>t[l],enumerable:!(r=W(t,l))||r.enumerable});return e};var $=(e=>(t,n)=>e&&e.get(t)||(n=N(B({}),t,1),e&&e.set(t,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var K={};H(K,{connect:()=>D,machine:()=>M});var g=e=>e?"":void 0;var Z=(()=>{let e=0;return()=>(e++,e.toString(36))})();function m(e){let t=new Set;function n(r){let l=globalThis.requestAnimationFrame(r);t.add(()=>globalThis.cancelAnimationFrame(l))}return n(()=>n(e)),function(){t.forEach(function(r){r()})}}function I(e){var t;return(t=e.nativeEvent)!=null?t:e}function L(e,t){var n;let r=Array.isArray(t.exclude)?t.exclude:[t.exclude],l=(n=e.relatedTarget)!=null?n:t.fallback;return r.every(u=>!(u==null?void 0:u.contains(l)))}var J=["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 P={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft",Home:"End",End:"Home"},j={Up:"ArrowUp",Down:"ArrowDown",Esc:"Escape"," ":"Space",",":"Comma",Left:"ArrowLeft",Right:"ArrowRight"};function A(e,t={}){var n;let{dir:r="ltr",orientation:l="horizontal"}=t,{key:u}=e;return u=(n=j[u])!=null?n:u,r==="rtl"&&l==="horizontal"&&u in P&&(u=P[u]),u}var z={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 U(e){Object.assign(e.style,z)}function O(e={}){let{ariaLive:t="polite",role:n="log",ariaRelevant:r="additions",doc:l,root:u,name:i="machine-announcer"}=e,a=null,s=l||document,d=s.defaultView||window;if(s.getElementById("__live-region__"))return null;a=s.createElement(i),a.id="__live-region__",a.setAttribute("aria-live",t),a.setAttribute("role",n),a.setAttribute("aria-relevant",r),U(a),(u!=null?u:s.body).appendChild(a);function p(w,V=7e3){if(!a)return;let E=s.createElement("p");E.innerHTML=w,a.appendChild(E),d.setTimeout(()=>{a==null||a.removeChild(E)},V)}function c(){var w;!a||(w=a.parentNode)==null||w.removeChild(a)}return{announce:p,destroy:c}}function C(e,t){var n;return Array.from((n=e==null?void 0:e.querySelectorAll(t))!=null?n:[])}function Y(e,t){return e.find(n=>n.id===t)}function b(e,t){let n=Y(e,t);return n?e.indexOf(n):-1}function k(e,t,n=!0){let r=b(e,t);return r=n?(r+1)%e.length:Math.min(r+1,e.length-1),e[r]}function R(e,t,n=!0){let r=b(e,t);return r===-1?n?e[e.length-1]:null:(r=n?(r-1+e.length)%e.length:Math.max(0,r-1),e[r])}var f=(e,t)=>({variable:e,reference:t?`var(${e}, ${t})`:`var(${e})`}),Q={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 G(e){return{button:e,label:e,input:e,output:e,element:e}}var S=G(e=>e);var o={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)=>`${o.getTagId(e,t)}-delete-btn`,getTagInputId:(e,t)=>`${o.getTagId(e,t)}-input`,getRootEl:e=>o.getDoc(e).getElementById(o.getRootId(e)),getInputEl:e=>o.getDoc(e).getElementById(o.getInputId(e)),getEditInputEl:e=>o.getDoc(e).getElementById(o.getEditInputId(e)),getTag:(e,t)=>o.getDoc(e).getElementById(o.getTagId(e,t)),getElements:e=>C(o.getRootEl(e),`[data-ownedby=${o.getRootId(e)}]`),getClosestFormEl:e=>{var t;return(t=o.getInputEl(e))==null?void 0:t.closest("form")},getIndexOfId:(e,t)=>b(o.getElements(e),t),isInputFocused:e=>o.getDoc(e).activeElement===o.getInputEl(e),getFirstEl:e=>o.getElements(e)[0],getLastEl:e=>o.getElements(e)[o.getElements(e).length-1],getPrevEl:(e,t)=>R(o.getElements(e),t,!1),getNextEl:(e,t)=>k(o.getElements(e),t,!1),getFocusedTagValue:e=>{var n;if(!e.focusedId)return null;let t=o.getIndexOfId(e,e.focusedId);return t===-1?null:(n=o.getElements(e)[t].dataset.value)!=null?n:null}};function D(e,t,n=S){let{context:r}=e,l=e.matches("focused:input","navigating:tag"),u=e.matches("editing:tag");return{value:r.value,valueAsString:r.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=o.getInputEl(r))==null||i.focus()})},blur(){var i;(i=o.getInputEl(r))==null||i.blur()},rootProps:n.element({"data-part":"root","data-invalid":g(r.outOfRange),"data-disabled":g(r.disabled),"data-focus":g(l),id:o.getRootId(r),onPointerDown(){t("POINTER_DOWN")}}),inputProps:n.input({"data-part":"input",id:o.getInputId(r),value:r.inputValue,autoComplete:"off",disabled:r.disabled,onChange(i){let a=I(i);a.isComposing||a.inputType==="insertFromPaste"||t({type:"TYPE",value:i.target.value})},onFocus(){t("FOCUS")},onBlur(i){L(i,{exclude:o.getRootEl(r)})&&t("BLUR")},onPaste(i){let a=i.clipboardData.getData("text/plain");t({type:"PASTE",value:a})},onKeyDown(i){if(I(i).isComposing)return;let s={ArrowDown(){t("ARROW_DOWN")},ArrowLeft(){t("ARROW_LEFT")},ArrowRight(){r.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=A(i,r),p=s[d];p==null||p(i)}}),hiddenInputProps:n.input({"data-part":"hidden-input",type:"hidden",name:r.name,id:o.getHiddenInputId(r),value:r.valueAsString}),getTagProps({index:i,value:a}){let s=o.getTagId(r,i);return n.element({"data-part":"tag",id:s,hidden:u?r.editedId===s:!1,"data-value":a,"data-disabled":g(r.disabled),"data-selected":g(s===r.focusedId),"data-ownedby":o.getRootId(r),onPointerDown(d){d.preventDefault(),t({type:"POINTER_DOWN_TAG",id:s})},onDoubleClick(){t({type:"DOUBLE_CLICK_TAG",id:s})}})},getTagInputProps({index:i}){let a=o.getTagId(r,i),s=r.editedId===a;return n.input({"data-part":"tag--input",id:o.getTagInputId(r,i),type:"text",tabIndex:-1,hidden:u?!s:!0,value:s?r.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 s=o.getTagId(r,i);return n.button({"data-part":"tag--delete-button",id:o.getTagDeleteBtnId(r,i),type:"button","aria-label":`Delete ${a}`,tabIndex:-1,onPointerOver(){t({type:"HOVER_DELETE_TAG",id:s})},onClick(){t({type:"DELETE_TAG",id:s})}})},clearButtonProps:n.button({"data-part":"clear-button",id:o.getClearButtonId(r),type:"button","aria-label":"Clear all tags",hidden:r.count===0,onClick(){t("CLEAR_ALL")}})}}var h=require("@ui-machines/core");var{and:v,not:y,or:q}=h.guards,x=v(q(y("isAtMax"),"allowOutOfRange"),y("isInputValueEmpty")),M=(0,h.createMachine)({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:y("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:y("hasFocusedId"),target:"focused:input"}}},"focused:input":{entry:["focusInput","clearFocusedId"],on:{TYPE:{actions:"setInputValue"},BLUR:[{target:"idle",guard:v("addOnBlur",x),actions:["addTag","clearInputValue"]},{target:"idle"}],ENTER:{guard:x,actions:["addTag","clearInputValue"]},COMMA:{guard:x,actions:["addTag","clearInputValue"]},ARROW_LEFT:{guard:v("hasTags","isInputCaretAtStart"),target:"navigating:tag",actions:"focusLastTag"},BACKSPACE:{target:"navigating:tag",guard:v("hasTags","isInputCaretAtStart"),actions:"focusLastTag"},PASTE:{guard:"addOnPaste",actions:["setInputValue","addTagFromPaste"]}}},"navigating:tag":{on:{ARROW_RIGHT:[{guard:v("hasTags","isInputCaretAtStart",y("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=>o.isInputFocused(e),isTagFocused:(e,t)=>e.focusedId===t.id,isLastTagFocused:e=>{var t;return((t=o.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=o.getInputEl(e);if(!t)return!1;try{return t.selectionStart===0&&t.selectionEnd===0}catch(n){return t.value===""}}},actions:{invokeOnHighlight(e){var n;let t=o.getFocusedTagValue(e);(n=e.onHighlight)==null||n.call(e,t)},setupDocument(e,t){e.uid=t.id,e.doc=(0,h.ref)(t.doc),e.liveRegion=O({name:"tags-announcer",role:"alert",ariaLive:"assertive"})},focusNextTag(e){if(!e.focusedId)return;let t=o.getNextEl(e,e.focusedId);t&&(e.focusedId=t.id)},focusLastTag(e){let t=o.getLastEl(e);t&&(e.focusedId=t.id)},focusPrevTag(e){if(!e.focusedId)return;let t=o.getPrevEl(e,e.focusedId);t&&(e.focusedId=t.id)},focusTag(e,t){e.focusedId=t.id},deleteTag(e,t){let n=o.getIndexOfId(e,t.id);e.value.splice(n,1)},deleteFocusedTag(e){if(!e.focusedId)return;let t=o.getIndexOfId(e,e.focusedId);e.value.splice(t,1)},setEditedId(e,t){var n;e.editedId=(n=t.id)!=null?n:e.focusedId},clearEditedId(e){e.editedId=null},clearEditedTagValue(e){e.editedTagValue=""},setEditedTagValue(e,t){e.editedTagValue=t.value},submitEditedTagValue(e){var n;if(!e.editedId)return;let t=o.getIndexOfId(e,e.editedId);e.value[t]=(n=e.editedTagValue)!=null?n:""},initEditedTagValue(e){if(!e.editedId)return;let t=o.getIndexOfId(e,e.editedId);e.editedTagValue=e.value[t]},focusEditedTagInput(e){m(()=>{var t;(t=o.getEditInputEl(e))==null||t.select()})},setInputValue(e,t){e.inputValue=t.value},clearFocusedId(e){e.focusedId=null},focusInput(e){m(()=>{var t;(t=o.getInputEl(e))==null||t.focus()})},clearInputValue(e){e.inputValue=""},addTag(e,t){var l,u,i;let n=(l=t.value)!=null?l:e.trimmedInputValue;((u=e.validateTag)==null?void 0:u.call(e,{inputValue:n,values:e.value}))?e.value.push(n):(i=e.onInvalid)==null||i.call(e,"invalidTag")},addTagFromPaste(e){m(()=>{var r,l;let t=e.trimmedInputValue;if((r=e.validateTag)==null?void 0:r.call(e,{inputValue:t,values:e.value})){let u=t.split(e.separator).map(i=>i.trim());e.value.push(...u)}else(l=e.onInvalid)==null||l.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"))}}});module.exports=$(K);
//# sourceMappingURL=index.js.map