@zag-js/tabs
Advanced tools
Comparing version 0.0.0-dev-20220413091534 to 0.0.0-dev-20220413174154
export { connect } from "./tabs.connect"; | ||
export { machine } from "./tabs.machine"; | ||
export type { MachineContext, MachineState } from "./tabs.types"; | ||
//# sourceMappingURL=index.d.ts.map |
1350
dist/index.js
@@ -1,2 +0,1350 @@ | ||
var $=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var Wt=Object.getOwnPropertyNames;var Ft=Object.prototype.hasOwnProperty;var jt=(t,e)=>{for(var n in e)$(t,n,{get:e[n],enumerable:!0})},Bt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of Wt(e))!Ft.call(t,a)&&a!==n&&$(t,a,{get:()=>e[a],enumerable:!(r=Nt(e,a))||r.enumerable});return t};var Ht=t=>Bt($({},"__esModule",{value:!0}),t);var be={};jt(be,{connect:()=>gt,machine:()=>Vt});module.exports=Ht(be);var V=t=>t?"":void 0;var et=new WeakMap;function _t(t){var e;if(!t)return{};let n=et.get(t);return n||(n=((e=t?.ownerDocument.defaultView)!=null?e:window).getComputedStyle(t),et.set(t,n)),n}function L(t){let e=new Set;function n(r){let a=globalThis.requestAnimationFrame(r);e.add(()=>globalThis.cancelAnimationFrame(a))}return n(()=>n(t)),function(){e.forEach(function(r){r()})}}var we=(()=>{let t=0;return()=>(t++,t.toString(36))})();function it(t){return typeof t=="object"&&t?.nodeType===Node.ELEMENT_NODE&&typeof t?.nodeName=="string"}var zt=t=>t?.getAttribute("disabled")!=null||!!(t!=null&&t.getAttribute("aria-disabled"));var rt=["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(",");function ot(t,e){let n=_t(t);if(!t||n.getPropertyValue("visibility")==="hidden")return!0;for(;t;){if(e!=null&&t===e)return!1;if(n.getPropertyValue("display")==="none")return!0;t=t.parentElement}return!1}var st=(t,e=!1)=>{if(!t)return[];let n=Array.from(t.querySelectorAll(rt));return e&&it(t)&&n.unshift(t),n.filter(r=>Kt(r)&&!ot(r))},Kt=t=>!it(t)||ot(t)||zt(t)?!1:t?.matches(rt);var nt={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft",Home:"End",End:"Home"},$t={Up:"ArrowUp",Down:"ArrowDown",Esc:"Escape"," ":"Space",",":"Comma",Left:"ArrowLeft",Right:"ArrowRight"};function at(t,e={}){var n;let{dir:r="ltr",orientation:a="horizontal"}=e,{key:u}=t;return u=(n=$t[u])!=null?n:u,r==="rtl"&&a==="horizontal"&&u in nt&&(u=nt[u]),u}function lt(t,e){var n;return Array.from((n=t?.querySelectorAll(e))!=null?n:[])}function q(t,e){return t.find(n=>n.id===e)}function ut(t,e){let n=q(t,e);return n?t.indexOf(n):-1}function ct(t,e,n=!0){let r=ut(t,e);return r=n?(r+1)%t.length:Math.min(r+1,t.length-1),t[r]}function dt(t,e,n=!0){let r=ut(t,e);return r===-1?n?t[t.length-1]:null:(r=n?(r-1+t.length)%t.length:Math.max(0,r-1),t[r])}function qt(t){return{button:t,label:t,input:t,output:t,element:t}}var ht=qt(t=>t);var ft=t=>t[0],pt=t=>t[t.length-1];var Te=(()=>{let t=0;return()=>(t++,t.toString(36))})();var Ut=t=>Gt()&&t.test(navigator.userAgent);var Gt=()=>typeof window<"u";var vt=()=>Ut(/^((?!chrome|android).)*safari/i);var p={getDoc:t=>{var e;return(e=t.doc)!=null?e:document},getRootId:t=>{var e,n;return(n=(e=t.ids)==null?void 0:e.root)!=null?n:`tabs-${t.uid}`},getTriggerGroupId:t=>{var e,n;return(n=(e=t.ids)==null?void 0:e.triggerGroup)!=null?n:`tabs-${t.uid}-trigger-group`},getContentId:(t,e)=>{var n,r;return(r=(n=t.ids)==null?void 0:n.content)!=null?r:`tabs-${t.uid}-content-${e}`},getContentGroupId:t=>{var e,n;return(n=(e=t.ids)==null?void 0:e.contentGroup)!=null?n:`tabs-${t.uid}-content-group`},getTriggerId:(t,e)=>{var n,r;return(r=(n=t.ids)==null?void 0:n.trigger)!=null?r:`tabs-${t.uid}-trigger-${e}`},getIndicatorId:t=>`tabs-${t.uid}-indicator`,getTriggerGroupEl:t=>p.getDoc(t).getElementById(p.getTriggerGroupId(t)),getContentEl:(t,e)=>p.getDoc(t).getElementById(p.getContentId(t,e)),getTriggerEl:(t,e)=>p.getDoc(t).getElementById(p.getTriggerId(t,e)),getIndicatorEl:t=>p.getDoc(t).getElementById(p.getIndicatorId(t)),getElements:t=>{let n=`[role=tab][data-ownedby='${CSS.escape(p.getTriggerGroupId(t))}']:not([disabled])`;return lt(p.getTriggerGroupEl(t),n)},getFirstEl:t=>ft(p.getElements(t)),getLastEl:t=>pt(p.getElements(t)),getNextEl:(t,e)=>ct(p.getElements(t),p.getTriggerId(t,e),t.loop),getPrevEl:(t,e)=>dt(p.getElements(t),p.getTriggerId(t,e),t.loop),getRectById:(t,e)=>{var a;let n={offsetLeft:0,offsetTop:0,offsetWidth:0,offsetHeight:0},r=(a=q(p.getElements(t),p.getTriggerId(t,e)))!=null?a:n;return t.isVertical?{top:`${r.offsetTop}px`,height:`${r.offsetHeight}px`}:{left:`${r.offsetLeft}px`,width:`${r.offsetWidth}px`}},getActiveContentEl:t=>{if(!t.value)return;let e=p.getContentId(t,t.value);return p.getDoc(t).getElementById(e)}};function gt(t,e,n=ht){let r=t.context.messages,a=t.matches("focused");return{value:t.context.value,focusedValue:t.context.focusedValue,previousValues:Array.from(t.context.previousValues),setValue(u){e({type:"SET_VALUE",value:u})},rootProps:n.element({"data-part":"root",id:p.getRootId(t.context),"data-orientation":t.context.orientation,"data-focus":V(a),dir:t.context.dir}),triggerGroupProps:n.element({"data-part":"trigger-group",id:p.getTriggerGroupId(t.context),role:"tablist","data-focus":V(a),"aria-orientation":t.context.orientation,"data-orientation":t.context.orientation,"aria-label":r.tablistLabel,onKeyDown(u){let g={ArrowDown(){e("ARROW_DOWN")},ArrowUp(){e("ARROW_UP")},ArrowLeft(){e("ARROW_LEFT")},ArrowRight(){e("ARROW_RIGHT")},Home(){e("HOME")},End(){e("END")},Enter(){e({type:"ENTER",value:t.context.focusedValue})}},m=at(u,t.context),y=g[m];y&&(u.preventDefault(),y(u))}}),getTriggerProps(u){let{value:g,disabled:m}=u,y=t.context.value===g;return n.button({"data-part":"trigger",role:"tab",type:"button",disabled:m,"data-orientation":t.context.orientation,"data-disabled":V(m),"aria-disabled":m,"data-value":g,"aria-selected":y,"data-selected":V(y),"aria-controls":p.getContentId(t.context,g),"data-ownedby":p.getTriggerGroupId(t.context),id:p.getTriggerId(t.context,g),tabIndex:y?0:-1,onFocus(){e({type:"TAB_FOCUS",value:g})},onBlur(b){let E=b.relatedTarget;(E==null?void 0:E.getAttribute("role"))!=="tab"&&e({type:"TAB_BLUR"})},onClick(b){m||(vt()&&b.currentTarget.focus(),e({type:"TAB_CLICK",value:g}))}})},contentGroupProps:n.element({"data-part":"content-group",id:p.getContentGroupId(t.context),"data-orientation":t.context.orientation}),getContentProps({value:u}){let g=t.context.value===u;return n.element({"data-part":"content",id:p.getContentId(t.context,u),tabIndex:0,"aria-labelledby":p.getTriggerId(t.context,u),role:"tabpanel","data-ownedby":p.getTriggerGroupId(t.context),hidden:!g})},getDeleteButtonProps({value:u,disabled:g}){var m;return n.button({"data-part":"delete-button",type:"button",tabIndex:-1,"aria-label":(m=r.deleteLabel)==null?void 0:m.call(r,u),disabled:g,onClick(){e({type:"DELETE",value:u})}})},indicatorProps:n.element({id:p.getIndicatorId(t.context),"data-part":"indicator","data-orientation":t.context.orientation,style:{"--transition-duration":"200ms","--transition-property":"left, right, top, bottom, width, height",position:"absolute",willChange:"var(--transition-property)",transitionProperty:"var(--transition-property)",transitionDuration:t.context.hasMeasuredRect?"var(--transition-duration)":"0ms",transitionTimingFunction:"var(--transition-timing-function)",...t.context.indicatorRect}})}}var K={},We=Symbol(),Fe=Symbol(),Yt=Symbol(),mt=Object.getPrototypeOf,X=new WeakMap,Xt=t=>t&&(X.has(t)?X.get(t):mt(t)===Object.prototype||mt(t)===Array.prototype),Jt=t=>Xt(t)&&t[Yt]||null,yt=(t,e=!0)=>{X.set(t,e)},Lt=Symbol(),A=Symbol(),H=Symbol(),Zt=Symbol(),D=Symbol(),bt=Symbol(),Z=new WeakSet;function _(t){return Z.add(t),t}var z=t=>typeof t=="object"&&t!==null,Qt=t=>z(t)&&!Z.has(t)&&(Array.isArray(t)||!(Symbol.iterator in t))&&!(t instanceof WeakMap)&&!(t instanceof WeakSet)&&!(t instanceof Error)&&!(t instanceof Number)&&!(t instanceof Date)&&!(t instanceof String)&&!(t instanceof RegExp)&&!(t instanceof ArrayBuffer),Et=new WeakMap,wt=1,xt=new WeakMap;function Q(t={}){if(!z(t))throw new Error("object required");let e=Et.get(t);if(e)return e;let n=wt,r=new Set,a=(f,h=++wt)=>{n!==h&&(n=h,r.forEach(i=>i(f,h)))},u=new Map,g=f=>{let h=u.get(f);return h||(h=(i,o)=>{let s=[...i];s[1]=[f,...s[1]],a(s,o)},u.set(f,h)),h},m=f=>{let h=u.get(f);return u.delete(f),h},y=(f,h)=>{let i=xt.get(h);if(i?.[0]===n)return i[1];let o=Array.isArray(f)?[]:Object.create(Object.getPrototypeOf(f));return yt(o,!0),xt.set(h,[n,o]),Reflect.ownKeys(f).forEach(s=>{let l=Reflect.get(f,s,h);if(Z.has(l))yt(l,!1),o[s]=l;else if(l instanceof Promise)if(D in l)o[s]=l[D];else{let d=l[bt]||l;Object.defineProperty(o,s,{get(){if(D in l)return l[D];throw d}})}else l?.[A]?o[s]=l[H]:o[s]=l}),Object.freeze(o),o},b=Array.isArray(t)?[]:Object.create(Object.getPrototypeOf(t)),E={get(f,h,i){return h===Lt?n:h===A?r:h===H?y(f,i):h===Zt?E:Reflect.get(f,h,i)},deleteProperty(f,h){let i=Reflect.get(f,h),o=i?.[A];o&&o.delete(m(h));let s=Reflect.deleteProperty(f,h);return s&&a(["delete",[h],i]),s},is:Object.is,canProxy:Qt,set(f,h,i,o){var s;let l=Reflect.get(f,h,o);if(this.is(l,i))return!0;let d=l?.[A];d&&d.delete(m(h)),z(i)&&(i=Jt(i)||i);let c;return(s=Object.getOwnPropertyDescriptor(f,h))!=null&&s.set?c=i:i instanceof Promise?c=i.then(v=>(c[D]=v,a(["resolve",[h],v]),v)).catch(v=>{c[bt]=v,a(["reject",[h],v])}):i?.[A]?(c=i,c[A].add(g(h))):this.canProxy(i)?(c=Q(i),c[A].add(g(h))):c=i,Reflect.set(f,h,c,o),a(["set",[h],i,l]),!0}},T=new Proxy(b,E);return Et.set(t,T),Reflect.ownKeys(t).forEach(f=>{let h=Object.getOwnPropertyDescriptor(t,f);h.get||h.set?Object.defineProperty(b,f,h):T[f]=t[f]}),T}function St(t){return z(t)?t[Lt]:void 0}function tt(t,e,n){(K.env&&K.env.MODE)!=="production"&&!t?.[A]&&console.warn("Please use proxy object");let r,a=[],u=g=>{if(a.push(g),n){e(a.splice(0));return}r||(r=Promise.resolve().then(()=>{r=void 0,e(a.splice(0))}))};return t[A].add(u),()=>{t[A].delete(u)}}function te(t){return(K.env&&K.env.MODE)!=="production"&&!t?.[H]&&console.warn("Please use proxy object"),t[H]}function ee(t){for(;t.length>0;)t.pop();return t}var Tt=(t,...e)=>(typeof t=="function"?t(...e):t)??void 0,C=t=>t,At=()=>{};var ne=(()=>{let t=0;return()=>(t++,t.toString(36))})(),M=t=>Array.isArray(t),W=t=>!(t==null||typeof t!="object"||M(t)),ie=t=>typeof t=="number"&&!Number.isNaN(t),S=t=>typeof t=="string",P=t=>typeof t=="function";function U(...t){let e=t.length===1?t[0]:t[1],n=t.length===2?t[0]:!0}function G(...t){let e=t.length===1?t[0]:t[1],n=t.length===2?t[0]:!0}function re(t){return W(t)&&t.predicate!=null}function Y(t,e){return(n,r)=>re(t)?t.predicate(e??{})(n,r):t}function oe(...t){return{predicate:e=>(n,r)=>t.map(a=>{var u;return S(a)?!!((u=e[a])!=null&&u.call(e,n,r)):P(a)?a(n,r):a.predicate(e)(n,r)}).some(Boolean)}}function se(...t){return{predicate:e=>(n,r)=>t.map(a=>{var u;return S(a)?!!((u=e[a])!=null&&u.call(e,n,r)):P(a)?a(n,r):a.predicate(e)(n,r)}).every(Boolean)}}function ae(t){return{predicate:e=>(n,r)=>{var a;return S(t)?!((a=e[t])!=null&&a.call(e,n,r)):P(t)?!t(n,r):!t.predicate(e)(n,r)}}}var kt={or:oe,and:se,not:ae};function le(t){return W(t)&&t.predicate!=null}var ue=()=>!0;function It(t,e){return t=t??ue,(n,r)=>{if(S(t)){let a=e?.[t];return P(a)?a(n,r):a}return le(t)?t.predicate(e??{})(n,r):t?.(n,r)}}function N(t){var e,n,r;if(Array.isArray(t)){for(n=Array(e=t.length);e--;)n[e]=(r=t[e])&&typeof r=="object"?N(r):r;return n}if(Object.prototype.toString.call(t)==="[object Object]"){n={};for(e in t)e==="__proto__"?Object.defineProperty(n,e,{value:N(t[e]),configurable:!0,enumerable:!0,writable:!0}):n[e]=(r=t[e])&&typeof r=="object"?N(r):r;return n}return t}function Ct(t,e,n,r){return tt(t,a=>{a.some(u=>u[1][0]===e)&&n(t[e])},r)}var je=Symbol(),I=new WeakMap,F=new WeakMap,Mt=(t,e)=>{let n=I.get(t);n&&(n[0].forEach(r=>{let{d:a}=r;t!==a&&Mt(a)}),++n[2],e&&n[3].add(e))},ce=(t,e)=>{let n=I.get(t);return n?.[2]?(n[3].add(e),!0):!1},J=t=>{let e=I.get(t);e&&(--e[2],e[2]||(e[3].forEach(n=>n()),e[3].clear()),e[0].forEach(n=>{let{d:r}=n;t!==r&&J(r)}))},de=t=>{let{s:e,d:n}=t,r=F.get(n);r||(r=[new Set],F.set(t.d,r)),r[0].add(t);let a=I.get(e);if(!a){let u=new Set,g=tt(e,m=>{u.forEach(y=>{let{d:b,c:E,n:T,i:f}=y;e===b&&m.every(h=>h[1].length===1&&f.includes(h[1][0]))||y.p||(Mt(e,E),T?J(e):y.p=Promise.resolve().then(()=>{delete y.p,J(e)}))})},!0);a=[u,g,0,new Set],I.set(e,a)}a[0].add(t)},Pt=t=>{let{s:e,d:n}=t,r=F.get(n);r?.[0].delete(t),r?.[0].size===0&&F.delete(n);let a=I.get(e);if(a){let[u,g]=a;u.delete(t),u.size||(g(),I.delete(e))}},he=t=>{let e=F.get(t);return e?Array.from(e[0]):[]};function fe(t,e){let n=e?.proxy||Q({}),r=!!e?.sync,a=Object.keys(t);return a.forEach(u=>{if(Object.getOwnPropertyDescriptor(n,u))throw new Error("object property already defined");let g=t[u],m=null,y=()=>{if(m&&(Array.from(m).map(([f])=>ce(f,y)).some(f=>f)||Array.from(m).every(([f,h])=>St(f)===h.v)))return;let b=new Map,E=g(f=>(b.set(f,{v:St(f)}),f)),T=()=>{b.forEach((f,h)=>{var i;let o=(i=m?.get(h))==null?void 0:i.s;if(o)f.s=o;else{let s={s:h,d:n,k:u,c:y,n:r,i:a};de(s),f.s=s}}),m?.forEach((f,h)=>{!b.has(h)&&f.s&&Pt(f.s)}),m=b};E instanceof Promise?E.finally(T):T(),n[u]=E};y()}),n}function pe(t,e){let n=e?.delete?new Set:null;he(t).forEach(r=>{let{k:a}=r;(!e?.keys||e.keys.includes(a))&&(Pt(r),n&&n.add(a))}),n&&n.forEach(r=>{delete t[r]})}function ve(t){var e;let n=Q({value:"",previousValue:"",event:C({}),context:(e=t.context)!=null?e:C({}),done:!1,tags:[],hasTag(r){return this.tags.includes(r)},matches(...r){return r.includes(this.value)},can(r){return C(this).nextEvents.includes(r)},get nextEvents(){var r,a,u,g;let m=(u=(a=(r=t.states)==null?void 0:r[this.value])==null?void 0:a.on)!=null?u:{},y=(g=t?.on)!=null?g:{};return Object.keys({...m,...y})},get changed(){return this.event.value==="machine.init"||!this.previousValue?!1:this.value!==this.previousValue}});return C(n)}function j(t,e){return(n,r)=>{if(ie(t))return t;if(P(t))return t(n,r);if(S(t)){let a=Number.parseFloat(t);if(!Number.isNaN(a))return a;if(e){let u=e?.[t];if(u==null){let g=`[machine] Cannot determine delay for ${t}. It doesn't exist in options.delays`;throw new Error(g)}return P(u)?u(n,r):u}}}}function x(t){return S(t)?{type:t}:t}function k(t){return t?M(t)?t:[t]:[]}function Ot(t){return S(t)?{target:t}:t}function ge(t,e){return(n,r)=>k(t).map(Ot).find(a=>{var u;let g=It(a.guard,e)(n,r);return(u=g??a.target)!=null?u:a.actions})}function me(t,e){let n=S(t)?Ot(t):t,r=a=>(a.actions&&!a.target&&e&&(a.target=e),a);if(M(n))return n.map(r);if(W(n))return r(C(n))}var B=class{constructor(t,e){this.config=t,this.status="Not Started",this.type="machine",this.activityEvents=new Map,this.delayedEvents=new Map,this.stateListeners=new Set,this.eventListeners=new Set,this.doneListeners=new Set,this.contextWatchers=new Set,this.removeStateListener=At,this.removeEventListener=At,this.children=new Map,this.start=i=>{if(this.status==="Running")return this;this.status="Running";let o=x("machine.init");if(i){let d=W(i)?i:{context:this.config.context,value:i};this.setState(d.value),this.setContext(d.context)}let s={target:i?void 0:this.config.initial},l=this.getNextStateInfo(s,o);return l.target=C(l.target||s.target),this.initialState=l,this.performStateChangeEffects(l.target,l,o),this.removeStateListener=tt(this.state,()=>{this.stateListeners.forEach(d=>{d(this.stateSnapshot)})},this.sync),this.removeEventListener=Ct(this.state,"event",d=>{this.config.onEvent&&this.executeActions(this.config.onEvent,d);for(let c of this.eventListeners)c(d)}),this.setupContextWatchers(),this.executeActivities(x("machine.start"),k(this.config.activities),"machine.start"),this.executeActions(this.config.entry,x("machine.start")),this},this.setupContextWatchers=()=>{var i;for(let[o,s]of Object.entries((i=this.config.watch)!=null?i:{}))this.contextWatchers.add(Ct(this.state.context,o,()=>{this.executeActions(s,this.state.event)}))},this.setupComputed=()=>{var i;let o=C((i=this.config.computed)!=null?i:{}),s=Object.fromEntries(Object.entries(o).map(([l,d])=>[l,c=>d(c(this.state.context))]));fe(s,{proxy:this.state.context})},this.detachComputed=()=>{pe(this.state.context,{delete:!0})},this.stop=()=>{if(this.status!=="Stopped")return this.setState(null),this.setEvent("machine.stop"),this.config.context&&this.setContext(this.config.context),this.stopStateListeners(),this.stopChildren(),this.stopActivities(),this.stopDelayedEvents(),this.stopContextWatchers(),this.stopEventListeners(),this.detachComputed(),this.status="Stopped",this.executeActions(this.config.exit,x("machine.stop")),this},this.stopEventListeners=()=>{this.eventListeners.clear(),this.removeEventListener()},this.stopStateListeners=()=>{this.removeStateListener(),this.stateListeners.clear()},this.stopContextWatchers=()=>{this.contextWatchers.forEach(i=>i()),this.contextWatchers.clear()},this.stopDelayedEvents=()=>{this.delayedEvents.forEach(i=>{i.forEach(o=>o())}),this.delayedEvents.clear()},this.stopActivities=i=>{var o,s;i?((o=this.activityEvents.get(i))==null||o.forEach(l=>l()),(s=this.activityEvents.get(i))==null||s.clear(),this.activityEvents.delete(i)):(this.activityEvents.forEach(l=>{l.forEach(d=>d()),l.clear()}),this.activityEvents.clear())},this.sendChild=(i,o)=>{let s=x(i),l=Tt(o,this.contextSnapshot),d=this.children.get(l);d||G(`[machine/send-child] Cannot send '${s.type}' event to unknown child`),d.send(s)},this.stopChild=i=>{this.children.has(i)||G("[machine/stop-child] Cannot stop unknown child"),this.children.get(i).stop(),this.children.delete(i)},this.removeChild=i=>{this.children.delete(i)},this.stopChildren=()=>{this.children.forEach(i=>i.stop()),this.children.clear()},this.setParent=i=>{this.parent=i},this.spawn=(i,o)=>{let s=Tt(i);return o&&(s.id=o),s.type="machine.actor",s.setParent(this),this.children.set(s.id,C(s)),s.onDone(()=>{this.removeChild(s.id)}).start(),C(_(s))},this.addActivityCleanup=(i,o)=>{var s;!i||(this.activityEvents.has(i)?(s=this.activityEvents.get(i))==null||s.add(o):this.activityEvents.set(i,new Set([o])))},this.setState=i=>{this.state.previousValue=this.state.value,this.state.value=i;let o=this.getStateNode(i);i==null?ee(this.state.tags):this.state.tags=k(o?.tags)},this.setContext=i=>{for(let o in i)this.state.context[o]=i[o]},this.withContext=i=>{this.detachComputed();let o={...this.config.context,...i};return new B({...this.config,context:o},this.options)},this.withOptions=i=>(this.detachComputed(),new B(this.config,{...this.options,...i})),this.setActions=i=>{this.actionMap={...this.actionMap,...i}},this.clone=()=>(this.detachComputed(),new B(this.config,this.options)),this.getStateNode=i=>{var o;if(i)return(o=this.config.states)==null?void 0:o[i]},this.getNextStateInfo=(i,o)=>{var s;let l=this.determineTransition(i,o),d=(s=l?.target)!=null?s:this.state.value,c=this.getStateNode(d);return{transition:l,stateNode:c,target:d}},this.getActionFromDelayedTransition=i=>{let o=x("machine.after"),s=j(i.delay,this.delayMap)(this.contextSnapshot,o),l;return{entry:()=>{l=globalThis.setTimeout(()=>{let d=this.state.value,c=this.getNextStateInfo(i,o);this.performStateChangeEffects(d,c,o)},s)},exit:()=>{globalThis.clearTimeout(l)}}},this.getDelayedEventActions=i=>{let o=this.getStateNode(i),s=x("machine.after");if(!o||!o.after)return;let l=[],d=[];if(M(o.after)){let c=this.determineTransition(o.after,s);if(!c)return;let v=this.getActionFromDelayedTransition(c);l.push(v.entry),d.push(v.exit)}else if(W(o.after))for(let c in o.after){let v=o.after[c],w={};if(M(v)){let R=this.determineTransition(v,s);R&&(w=R)}else S(v)?w={target:v,delay:c}:w={...v,delay:c};let O=this.getActionFromDelayedTransition(w);l.push(O.entry),d.push(O.exit)}return{entries:l,exits:d}},this.executeActions=(i,o)=>{var s;let l=Y(i,this.guardMap)(this.contextSnapshot,o);for(let d of k(l)){let c=S(d)?(s=this.actionMap)==null?void 0:s[d]:d;U(S(d)&&!c,`[machine/exec-action] No implementation found for action: \`${d}\``),c?.(this.state.context,o,this.meta)}},this.executeActivities=(i,o,s)=>{var l;for(let d of o){let c=S(d)?(l=this.activityMap)==null?void 0:l[d]:d;if(!c){U(`[machine/exec-activity] No implementation found for activity: \`${d}\``);continue}let v=c(this.state.context,i,this.meta);v&&this.addActivityCleanup(s??this.state.value,v)}},this.createEveryActivities=(i,o)=>{if(!i)return;let s=x("machine.every");if(M(i)){let l=k(i).find(c=>{let v=j(c.delay,this.delayMap);c.delay=v(this.contextSnapshot,s);let w=It(c.guard,this.guardMap)(this.contextSnapshot,s);return w??c.delay});if(!l)return;let d=j(l.delay,this.delayMap)(this.contextSnapshot,s);o(()=>{let c=globalThis.setInterval(()=>{this.executeActions(l.actions,s)},d);return()=>{globalThis.clearInterval(c)}})}else for(let l in i){let d=i?.[l],c=j(l,this.delayMap)(this.contextSnapshot,s);o(()=>{let v=globalThis.setInterval(()=>{this.executeActions(d,s)},c);return()=>{globalThis.clearInterval(v)}})}},this.setEvent=i=>{this.state.event=_(x(i))},this.performExitEffects=(i,o)=>{let s=this.state.value,l=i?this.getStateNode(i):void 0;this.stopActivities(s);let d=Y(l?.exit,this.guardMap)(this.contextSnapshot,o),c=k(d),v=this.delayedEvents.get(s);v&&c.push(...v),this.executeActions(c,o),this.eventListeners.clear()},this.performEntryEffects=(i,o)=>{let s=this.getStateNode(i),l=k(s?.activities);this.createEveryActivities(s?.every,w=>{l.unshift(w)}),l.length>0&&this.executeActivities(o,l);let d=Y(s?.entry,this.guardMap)(this.contextSnapshot,o),c=k(d),v=this.getDelayedEventActions(i);s?.after&&v&&(this.delayedEvents.set(i,v?.exits),c.push(...v.entries)),this.executeActions(c,o),s?.type==="final"&&(this.state.done=!0,this.doneListeners.forEach(w=>{w(this.stateSnapshot)}),this.stop())},this.performTransitionEffects=(i,o)=>{let s=this.determineTransition(i,o);this.executeActions(s?.actions,o)},this.performStateChangeEffects=(i,o,s)=>{var l,d;this.setEvent(s),o.target=(d=(l=o.target)!=null?l:this.state.value)!=null?d:void 0;let c=o.target&&o.target!==this.state.value;c&&this.performExitEffects(i,s),this.performTransitionEffects(o?.transition,s),this.setState(o.target),c&&this.performEntryEffects(o.target,s)},this.determineTransition=(i,o)=>{let s=ge(i,this.guardMap);return s?.(this.contextSnapshot,o)},this.sendParent=i=>{var o;this.parent||G("[machine/send-parent] Cannot send event to an unknown parent");let s=x(i);(o=this.parent)==null||o.send(s)},this.send=i=>{let o=x(i);this.transition(this.state.value,o)},this.transition=(i,o)=>{var s,l,d;let c=S(i)?this.getStateNode(i):i?.stateNode,v=x(o);if(!c&&!this.config.on){let Dt=this.status==="Stopped"?"[machine/transition] Cannot transition a stopped machine":"[machine/transition] State does not have a definition";U(Dt);return}let w=(d=(s=c?.on)==null?void 0:s[v.type])!=null?d:(l=this.config.on)==null?void 0:l[v.type],O=me(w,this.state.value);if(!O)return;let R=this.getNextStateInfo(O,v);return this.performStateChangeEffects(this.state.value,R,v),R.stateNode},this.subscribe=i=>(this.stateListeners.add(i),this.status==="Running"&&i(this.stateSnapshot),()=>{this.stateListeners.delete(i)}),this.onDone=i=>(this.doneListeners.add(i),this),this.onTransition=i=>(this.stateListeners.add(i),this.status==="Running"&&i(this.stateSnapshot),this),this.onEvent=i=>(i(this.state.event),this.eventListeners.add(i),this);var n,r,a,u,g,m,y,b,E,T,f;this.options=N(e),this.id=(n=t.id)!=null?n:`machine-${ne()}`,this.guardMap=(a=(r=this.options)==null?void 0:r.guards)!=null?a:{},this.actionMap=(g=(u=this.options)==null?void 0:u.actions)!=null?g:{},this.delayMap=(y=(m=this.options)==null?void 0:m.delays)!=null?y:{},this.activityMap=(E=(b=this.options)==null?void 0:b.activities)!=null?E:{},this.sync=(f=(T=this.options)==null?void 0:T.sync)!=null?f:!1,this.state=ve(N(t)),this.setupComputed();let h=x("machine.created");this.executeActions(t?.created,h)}get stateSnapshot(){return C(te(this.state))}get contextSnapshot(){return this.stateSnapshot.context}get self(){let t=this;return{id:this.id,send:this.send.bind(this),sendParent:this.sendParent.bind(this),sendChild:this.sendChild.bind(this),stop:this.stop.bind(this),stopChild:this.stopChild.bind(this),spawn:this.spawn.bind(this),get state(){return t.stateSnapshot}}}get meta(){return{state:this.stateSnapshot,guards:this.guardMap,send:this.send.bind(this),listen:this.onEvent.bind(this),self:this.self,getState:()=>this.stateSnapshot}}},Rt=(t,e)=>new B(t,e);var{not:ye}=kt,Vt=Rt({initial:"unknown",context:{dir:"ltr",orientation:"horizontal",activationMode:"automatic",value:null,focusedValue:null,uid:"",previousValues:[],indicatorRect:{left:"0px",top:"0px",width:"0px",height:"0px"},hasMeasuredRect:!1,isIndicatorRendered:!1,loop:!0,messages:{}},computed:{isHorizontal:t=>t.orientation==="horizontal",isVertical:t=>t.orientation==="vertical"},created:["setPrevSelectedTabs"],watch:{focusedValue:"invokeOnFocus",value:["invokeOnChange","setPrevSelectedTabs","setIndicatorRect","setContentTabIndex"],dir:["clearMeasured","setIndicatorRect"]},on:{SET_VALUE:{actions:"setValue"},DELETE:{actions:"deleteValue"}},states:{unknown:{on:{SETUP:{target:"idle",actions:["setupDocument","checkRenderedElements","setIndicatorRect","setContentTabIndex"]}}},idle:{on:{TAB_FOCUS:{guard:"selectOnFocus",target:"focused",actions:["setFocusedValue","setValue"]},TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]}}},focused:{on:{TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]},ARROW_LEFT:{guard:"isHorizontal",actions:"focusPrevTab"},ARROW_RIGHT:{guard:"isHorizontal",actions:"focusNextTab"},ARROW_UP:{guard:"isVertical",actions:"focusPrevTab"},ARROW_DOWN:{guard:"isVertical",actions:"focusNextTab"},HOME:{actions:"focusFirstTab"},END:{actions:"focusLastTab"},ENTER:{guard:ye("selectOnFocus"),actions:"setValue"},TAB_FOCUS:[{guard:"selectOnFocus",actions:["setFocusedValue","setValue"]},{actions:"setFocusedValue"}],TAB_BLUR:{target:"idle",actions:"clearFocusedValue"}}}}},{guards:{isVertical:t=>t.isVertical,isHorizontal:t=>t.isHorizontal,selectOnFocus:t=>t.activationMode==="automatic"},actions:{setupDocument(t,e){t.uid=e.id,e.doc&&(t.doc=_(e.doc))},setFocusedValue(t,e){t.focusedValue=e.value},clearFocusedValue(t){t.focusedValue=null},setValue(t,e){t.value=e.value},invokeOnDelete(t,e){var n;(n=t.onDelete)==null||n.call(t,{value:e.value})},focusFirstTab(t){L(()=>{var e;return(e=p.getFirstEl(t))==null?void 0:e.focus()})},focusLastTab(t){L(()=>{var e;return(e=p.getLastEl(t))==null?void 0:e.focus()})},focusNextTab(t){if(!t.focusedValue)return;let e=p.getNextEl(t,t.focusedValue);L(()=>e==null?void 0:e.focus())},focusPrevTab(t){if(!t.focusedValue)return;let e=p.getPrevEl(t,t.focusedValue);L(()=>e==null?void 0:e.focus())},setIndicatorRect(t){L(()=>{!t.isIndicatorRendered||!t.value||(t.indicatorRect=p.getRectById(t,t.value),!t.hasMeasuredRect&&L(()=>{t.hasMeasuredRect=!0}))})},checkRenderedElements(t){L(()=>{t.isIndicatorRendered=!!p.getIndicatorEl(t)})},clearMeasured(t){t.hasMeasuredRect=!1},invokeOnChange(t){var e;(e=t.onChange)==null||e.call(t,{value:t.value})},invokeOnFocus(t){var e;(e=t.onFocus)==null||e.call(t,{value:t.focusedValue})},setPrevSelectedTabs(t){if(t.value!=null){let e=Array.from(t.previousValues).concat(t.value);t.previousValues=Array.from(new Set(e))}},setContentTabIndex(t){L(()=>{let e=p.getActiveContentEl(t);if(!e)return;st(e).length>0?e.removeAttribute("tabindex"):e.setAttribute("tabindex","0")})}}}); | ||
var __defProp = Object.defineProperty; | ||
var __defProps = Object.defineProperties; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropDescs = Object.getOwnPropertyDescriptors; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __getOwnPropSymbols = Object.getOwnPropertySymbols; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
var __propIsEnum = Object.prototype.propertyIsEnumerable; | ||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; | ||
var __spreadValues = (a, b) => { | ||
for (var prop in b || (b = {})) | ||
if (__hasOwnProp.call(b, prop)) | ||
__defNormalProp(a, prop, b[prop]); | ||
if (__getOwnPropSymbols) | ||
for (var prop of __getOwnPropSymbols(b)) { | ||
if (__propIsEnum.call(b, prop)) | ||
__defNormalProp(a, prop, b[prop]); | ||
} | ||
return a; | ||
}; | ||
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); | ||
var __export = (target, all) => { | ||
for (var name in all) | ||
__defProp(target, name, { get: all[name], enumerable: true }); | ||
}; | ||
var __copyProps = (to, from, except, desc) => { | ||
if (from && typeof from === "object" || typeof from === "function") { | ||
for (let key of __getOwnPropNames(from)) | ||
if (!__hasOwnProp.call(to, key) && key !== except) | ||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
} | ||
return to; | ||
}; | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
// src/index.ts | ||
var src_exports = {}; | ||
__export(src_exports, { | ||
connect: () => connect, | ||
machine: () => machine | ||
}); | ||
module.exports = __toCommonJS(src_exports); | ||
// ../../utilities/dom/src/attrs.ts | ||
var dataAttr = (guard) => { | ||
return guard ? "" : void 0; | ||
}; | ||
// ../../utilities/dom/src/computed-style.ts | ||
var styleCache = /* @__PURE__ */ new WeakMap(); | ||
function getComputedStyle(el) { | ||
var _a; | ||
if (!el) | ||
return {}; | ||
let style = styleCache.get(el); | ||
if (!style) { | ||
const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window; | ||
style = win.getComputedStyle(el); | ||
styleCache.set(el, style); | ||
} | ||
return style; | ||
} | ||
// ../../utilities/dom/src/next-tick.ts | ||
function nextTick(fn) { | ||
const set = /* @__PURE__ */ new Set(); | ||
function raf(fn2) { | ||
const id = globalThis.requestAnimationFrame(fn2); | ||
set.add(() => globalThis.cancelAnimationFrame(id)); | ||
} | ||
raf(() => raf(fn)); | ||
return function cleanup() { | ||
set.forEach(function(fn2) { | ||
fn2(); | ||
}); | ||
}; | ||
} | ||
// ../../utilities/core/src/array.ts | ||
var first = (v) => v[0]; | ||
var last = (v) => v[v.length - 1]; | ||
function clear(v) { | ||
while (v.length > 0) | ||
v.pop(); | ||
return v; | ||
} | ||
// ../../utilities/core/src/functions.ts | ||
var runIfFn = (v, ...a) => { | ||
const res = typeof v === "function" ? v(...a) : v; | ||
return res != null ? res : void 0; | ||
}; | ||
var cast = (v) => v; | ||
var noop = () => { | ||
}; | ||
var uuid = /* @__PURE__ */ (() => { | ||
let id = 0; | ||
return () => { | ||
id++; | ||
return id.toString(36); | ||
}; | ||
})(); | ||
// ../../utilities/core/src/guard.ts | ||
var ua = (v) => isDom() && v.test(navigator.userAgent); | ||
var isDom = () => !!(typeof window !== "undefined"); | ||
var isSafari = () => ua(/^((?!chrome|android).)*safari/i); | ||
var isArray = (v) => Array.isArray(v); | ||
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v)); | ||
var isNumber = (v) => typeof v === "number" && !Number.isNaN(v); | ||
var isString = (v) => typeof v === "string"; | ||
var isFunction = (v) => typeof v === "function"; | ||
// ../../utilities/core/src/warning.ts | ||
function warn(...a) { | ||
const m = a.length === 1 ? a[0] : a[1]; | ||
const c = a.length === 2 ? a[0] : true; | ||
if (c && void 0 !== "production") { | ||
console.warn(m); | ||
} | ||
} | ||
function invariant(...a) { | ||
const m = a.length === 1 ? a[0] : a[1]; | ||
const c = a.length === 2 ? a[0] : true; | ||
if (c && void 0 !== "production") { | ||
throw new Error(m); | ||
} | ||
} | ||
// ../../utilities/dom/src/query.ts | ||
function isHTMLElement(v) { | ||
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string"; | ||
} | ||
var isDisabled = (el) => { | ||
return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true; | ||
}; | ||
// ../../utilities/dom/src/focusable.ts | ||
var focusableSelector = /* @__PURE__ */ [ | ||
"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(","); | ||
function isHidden(el, until) { | ||
const style = getComputedStyle(el); | ||
if (!el || style.getPropertyValue("visibility") === "hidden") | ||
return true; | ||
while (el) { | ||
if (until != null && el === until) | ||
return false; | ||
if (style.getPropertyValue("display") === "none") | ||
return true; | ||
el = el.parentElement; | ||
} | ||
return false; | ||
} | ||
var getFocusables = (el, includeContainer = false) => { | ||
if (!el) | ||
return []; | ||
let els = Array.from(el.querySelectorAll(focusableSelector)); | ||
if (includeContainer && isHTMLElement(el)) { | ||
els.unshift(el); | ||
} | ||
return els.filter((el2) => isFocusable(el2) && !isHidden(el2)); | ||
}; | ||
var isFocusable = (el) => { | ||
if (!isHTMLElement(el) || isHidden(el) || isDisabled(el)) | ||
return false; | ||
return el == null ? void 0 : el.matches(focusableSelector); | ||
}; | ||
// ../../utilities/dom/src/keyboard-event.ts | ||
var rtlKeyMap = { | ||
ArrowLeft: "ArrowRight", | ||
ArrowRight: "ArrowLeft", | ||
Home: "End", | ||
End: "Home" | ||
}; | ||
var sameKeyMap = { | ||
Up: "ArrowUp", | ||
Down: "ArrowDown", | ||
Esc: "Escape", | ||
" ": "Space", | ||
",": "Comma", | ||
Left: "ArrowLeft", | ||
Right: "ArrowRight" | ||
}; | ||
function getEventKey(event, options = {}) { | ||
var _a; | ||
const { dir = "ltr", orientation = "horizontal" } = options; | ||
let { key } = event; | ||
key = (_a = sameKeyMap[key]) != null ? _a : key; | ||
const isRtl = dir === "rtl" && orientation === "horizontal"; | ||
if (isRtl && key in rtlKeyMap) { | ||
key = rtlKeyMap[key]; | ||
} | ||
return key; | ||
} | ||
// ../../utilities/dom/src/nodelist.ts | ||
function queryAll(root, selector) { | ||
var _a; | ||
return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []); | ||
} | ||
function itemById(v, id) { | ||
return v.find((node) => node.id === id); | ||
} | ||
function indexOfId(v, id) { | ||
const item = itemById(v, id); | ||
return item ? v.indexOf(item) : -1; | ||
} | ||
function nextById(v, id, loop = true) { | ||
let idx = indexOfId(v, id); | ||
idx = loop ? (idx + 1) % v.length : Math.min(idx + 1, v.length - 1); | ||
return v[idx]; | ||
} | ||
function prevById(v, id, loop = true) { | ||
let idx = indexOfId(v, id); | ||
if (idx === -1) | ||
return loop ? v[v.length - 1] : null; | ||
idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1); | ||
return v[idx]; | ||
} | ||
// ../../types/src/prop-types.ts | ||
function createNormalizer(fn) { | ||
return { button: fn, label: fn, input: fn, output: fn, element: fn }; | ||
} | ||
var normalizeProp = createNormalizer((v) => v); | ||
// src/tabs.dom.ts | ||
var dom = { | ||
getDoc: (ctx) => { | ||
var _a; | ||
return (_a = ctx.doc) != null ? _a : document; | ||
}, | ||
getRootId: (ctx) => { | ||
var _a, _b; | ||
return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs-${ctx.uid}`; | ||
}, | ||
getTriggerGroupId: (ctx) => { | ||
var _a, _b; | ||
return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs-${ctx.uid}-trigger-group`; | ||
}, | ||
getContentId: (ctx, id) => { | ||
var _a, _b; | ||
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs-${ctx.uid}-content-${id}`; | ||
}, | ||
getContentGroupId: (ctx) => { | ||
var _a, _b; | ||
return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs-${ctx.uid}-content-group`; | ||
}, | ||
getTriggerId: (ctx, id) => { | ||
var _a, _b; | ||
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs-${ctx.uid}-trigger-${id}`; | ||
}, | ||
getIndicatorId: (ctx) => `tabs-${ctx.uid}-indicator`, | ||
getTriggerGroupEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getTriggerGroupId(ctx)), | ||
getContentEl: (ctx, id) => dom.getDoc(ctx).getElementById(dom.getContentId(ctx, id)), | ||
getTriggerEl: (ctx, id) => dom.getDoc(ctx).getElementById(dom.getTriggerId(ctx, id)), | ||
getIndicatorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getIndicatorId(ctx)), | ||
getElements: (ctx) => { | ||
const ownerId = CSS.escape(dom.getTriggerGroupId(ctx)); | ||
const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`; | ||
return queryAll(dom.getTriggerGroupEl(ctx), selector); | ||
}, | ||
getFirstEl: (ctx) => first(dom.getElements(ctx)), | ||
getLastEl: (ctx) => last(dom.getElements(ctx)), | ||
getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop), | ||
getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop), | ||
getRectById: (ctx, id) => { | ||
var _a; | ||
const empty = { offsetLeft: 0, offsetTop: 0, offsetWidth: 0, offsetHeight: 0 }; | ||
const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty; | ||
if (ctx.isVertical) { | ||
return { top: `${tab.offsetTop}px`, height: `${tab.offsetHeight}px` }; | ||
} | ||
return { left: `${tab.offsetLeft}px`, width: `${tab.offsetWidth}px` }; | ||
}, | ||
getActiveContentEl: (ctx) => { | ||
if (!ctx.value) | ||
return; | ||
const id = dom.getContentId(ctx, ctx.value); | ||
return dom.getDoc(ctx).getElementById(id); | ||
} | ||
}; | ||
// src/tabs.connect.ts | ||
function connect(state, send, normalize = normalizeProp) { | ||
const messages = state.context.messages; | ||
const isFocused = state.matches("focused"); | ||
return { | ||
value: state.context.value, | ||
focusedValue: state.context.focusedValue, | ||
previousValues: Array.from(state.context.previousValues), | ||
setValue(value) { | ||
send({ type: "SET_VALUE", value }); | ||
}, | ||
rootProps: normalize.element({ | ||
"data-part": "root", | ||
id: dom.getRootId(state.context), | ||
"data-orientation": state.context.orientation, | ||
"data-focus": dataAttr(isFocused), | ||
dir: state.context.dir | ||
}), | ||
triggerGroupProps: normalize.element({ | ||
"data-part": "trigger-group", | ||
id: dom.getTriggerGroupId(state.context), | ||
role: "tablist", | ||
"data-focus": dataAttr(isFocused), | ||
"aria-orientation": state.context.orientation, | ||
"data-orientation": state.context.orientation, | ||
"aria-label": messages.tablistLabel, | ||
onKeyDown(event) { | ||
const keyMap = { | ||
ArrowDown() { | ||
send("ARROW_DOWN"); | ||
}, | ||
ArrowUp() { | ||
send("ARROW_UP"); | ||
}, | ||
ArrowLeft() { | ||
send("ARROW_LEFT"); | ||
}, | ||
ArrowRight() { | ||
send("ARROW_RIGHT"); | ||
}, | ||
Home() { | ||
send("HOME"); | ||
}, | ||
End() { | ||
send("END"); | ||
}, | ||
Enter() { | ||
send({ type: "ENTER", value: state.context.focusedValue }); | ||
} | ||
}; | ||
let key = getEventKey(event, state.context); | ||
const exec = keyMap[key]; | ||
if (exec) { | ||
event.preventDefault(); | ||
exec(event); | ||
} | ||
} | ||
}), | ||
getTriggerProps(props) { | ||
const { value, disabled } = props; | ||
const selected = state.context.value === value; | ||
return normalize.button({ | ||
"data-part": "trigger", | ||
role: "tab", | ||
type: "button", | ||
disabled, | ||
"data-orientation": state.context.orientation, | ||
"data-disabled": dataAttr(disabled), | ||
"aria-disabled": disabled, | ||
"data-value": value, | ||
"aria-selected": selected, | ||
"data-selected": dataAttr(selected), | ||
"aria-controls": dom.getContentId(state.context, value), | ||
"data-ownedby": dom.getTriggerGroupId(state.context), | ||
id: dom.getTriggerId(state.context, value), | ||
tabIndex: selected ? 0 : -1, | ||
onFocus() { | ||
send({ type: "TAB_FOCUS", value }); | ||
}, | ||
onBlur(event) { | ||
const target = event.relatedTarget; | ||
if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") { | ||
send({ type: "TAB_BLUR" }); | ||
} | ||
}, | ||
onClick(event) { | ||
if (disabled) | ||
return; | ||
if (isSafari()) { | ||
event.currentTarget.focus(); | ||
} | ||
send({ type: "TAB_CLICK", value }); | ||
} | ||
}); | ||
}, | ||
contentGroupProps: normalize.element({ | ||
"data-part": "content-group", | ||
id: dom.getContentGroupId(state.context), | ||
"data-orientation": state.context.orientation | ||
}), | ||
getContentProps({ value }) { | ||
const selected = state.context.value === value; | ||
return normalize.element({ | ||
"data-part": "content", | ||
id: dom.getContentId(state.context, value), | ||
tabIndex: 0, | ||
"aria-labelledby": dom.getTriggerId(state.context, value), | ||
role: "tabpanel", | ||
"data-ownedby": dom.getTriggerGroupId(state.context), | ||
hidden: !selected | ||
}); | ||
}, | ||
getDeleteButtonProps({ value, disabled }) { | ||
var _a; | ||
return normalize.button({ | ||
"data-part": "delete-button", | ||
type: "button", | ||
tabIndex: -1, | ||
"aria-label": (_a = messages.deleteLabel) == null ? void 0 : _a.call(messages, value), | ||
disabled, | ||
onClick() { | ||
send({ type: "DELETE", value }); | ||
} | ||
}); | ||
}, | ||
indicatorProps: normalize.element({ | ||
id: dom.getIndicatorId(state.context), | ||
"data-part": "indicator", | ||
"data-orientation": state.context.orientation, | ||
style: __spreadValues({ | ||
"--transition-duration": "200ms", | ||
"--transition-property": "left, right, top, bottom, width, height", | ||
position: "absolute", | ||
willChange: "var(--transition-property)", | ||
transitionProperty: "var(--transition-property)", | ||
transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms", | ||
transitionTimingFunction: "var(--transition-timing-function)" | ||
}, state.context.indicatorRect) | ||
}) | ||
}; | ||
} | ||
// ../../../node_modules/@zag-js/core/src/index.ts | ||
var import_vanilla3 = require("valtio/vanilla"); | ||
// ../../core/src/action-utils.ts | ||
function isGuardHelper(value) { | ||
return isObject(value) && value.predicate != null; | ||
} | ||
function determineActionsFn(values, guardMap) { | ||
return (context, event) => { | ||
if (isGuardHelper(values)) | ||
return values.predicate(guardMap != null ? guardMap : {})(context, event); | ||
return values; | ||
}; | ||
} | ||
// ../../core/src/guard-utils.ts | ||
function or(...conditions) { | ||
return { | ||
predicate: (guards2) => (ctx, event) => conditions.map((condition) => { | ||
var _a; | ||
if (isString(condition)) { | ||
return !!((_a = guards2[condition]) == null ? void 0 : _a.call(guards2, ctx, event)); | ||
} | ||
if (isFunction(condition)) { | ||
return condition(ctx, event); | ||
} | ||
return condition.predicate(guards2)(ctx, event); | ||
}).some(Boolean) | ||
}; | ||
} | ||
function and(...conditions) { | ||
return { | ||
predicate: (guards2) => (ctx, event) => conditions.map((condition) => { | ||
var _a; | ||
if (isString(condition)) { | ||
return !!((_a = guards2[condition]) == null ? void 0 : _a.call(guards2, ctx, event)); | ||
} | ||
if (isFunction(condition)) { | ||
return condition(ctx, event); | ||
} | ||
return condition.predicate(guards2)(ctx, event); | ||
}).every(Boolean) | ||
}; | ||
} | ||
function not(condition) { | ||
return { | ||
predicate: (guardMap) => (ctx, event) => { | ||
var _a; | ||
if (isString(condition)) { | ||
return !((_a = guardMap[condition]) == null ? void 0 : _a.call(guardMap, ctx, event)); | ||
} | ||
if (isFunction(condition)) { | ||
return !condition(ctx, event); | ||
} | ||
return !condition.predicate(guardMap)(ctx, event); | ||
} | ||
}; | ||
} | ||
var guards = { or, and, not }; | ||
function isGuardHelper2(value) { | ||
return isObject(value) && value.predicate != null; | ||
} | ||
var TruthyGuard = () => true; | ||
function determineGuardFn(guard, guardMap) { | ||
guard = guard != null ? guard : TruthyGuard; | ||
return (context, event) => { | ||
if (isString(guard)) { | ||
const value = guardMap == null ? void 0 : guardMap[guard]; | ||
return isFunction(value) ? value(context, event) : value; | ||
} | ||
if (isGuardHelper2(guard)) { | ||
return guard.predicate(guardMap != null ? guardMap : {})(context, event); | ||
} | ||
return guard == null ? void 0 : guard(context, event); | ||
}; | ||
} | ||
// ../../../node_modules/klona/json/index.mjs | ||
function klona(val) { | ||
var k, out, tmp; | ||
if (Array.isArray(val)) { | ||
out = Array(k = val.length); | ||
while (k--) | ||
out[k] = (tmp = val[k]) && typeof tmp === "object" ? klona(tmp) : tmp; | ||
return out; | ||
} | ||
if (Object.prototype.toString.call(val) === "[object Object]") { | ||
out = {}; | ||
for (k in val) { | ||
if (k === "__proto__") { | ||
Object.defineProperty(out, k, { | ||
value: klona(val[k]), | ||
configurable: true, | ||
enumerable: true, | ||
writable: true | ||
}); | ||
} else { | ||
out[k] = (tmp = val[k]) && typeof tmp === "object" ? klona(tmp) : tmp; | ||
} | ||
} | ||
return out; | ||
} | ||
return val; | ||
} | ||
// ../../core/src/machine.ts | ||
var import_utils11 = require("valtio/utils"); | ||
var import_vanilla2 = require("valtio/vanilla"); | ||
// ../../core/src/create-proxy.ts | ||
var import_vanilla = require("valtio/vanilla"); | ||
function createProxy(config) { | ||
var _a; | ||
const state = (0, import_vanilla.proxy)({ | ||
value: "", | ||
previousValue: "", | ||
event: cast({}), | ||
context: (_a = config.context) != null ? _a : cast({}), | ||
done: false, | ||
tags: [], | ||
hasTag(tag) { | ||
return this.tags.includes(tag); | ||
}, | ||
matches(...value) { | ||
return value.includes(this.value); | ||
}, | ||
can(event) { | ||
return cast(this).nextEvents.includes(event); | ||
}, | ||
get nextEvents() { | ||
var _a2, _b, _c, _d; | ||
const stateEvents = (_c = (_b = (_a2 = config.states) == null ? void 0 : _a2[this.value]) == null ? void 0 : _b["on"]) != null ? _c : {}; | ||
const globalEvents = (_d = config == null ? void 0 : config.on) != null ? _d : {}; | ||
return Object.keys(__spreadValues(__spreadValues({}, stateEvents), globalEvents)); | ||
}, | ||
get changed() { | ||
if (this.event.value === "machine.init" /* Init */ || !this.previousValue) | ||
return false; | ||
return this.value !== this.previousValue; | ||
} | ||
}); | ||
return cast(state); | ||
} | ||
// ../../core/src/delay-utils.ts | ||
function determineDelayFn(delay, delaysMap) { | ||
return (context, event) => { | ||
if (isNumber(delay)) | ||
return delay; | ||
if (isFunction(delay)) { | ||
return delay(context, event); | ||
} | ||
if (isString(delay)) { | ||
const value = Number.parseFloat(delay); | ||
if (!Number.isNaN(value)) { | ||
return value; | ||
} | ||
if (delaysMap) { | ||
const valueOrFn = delaysMap == null ? void 0 : delaysMap[delay]; | ||
if (valueOrFn == null) { | ||
const msg = `[machine] Cannot determine delay for ${delay}. It doesn't exist in options.delays`; | ||
throw new Error(msg); | ||
} | ||
return isFunction(valueOrFn) ? valueOrFn(context, event) : valueOrFn; | ||
} | ||
} | ||
}; | ||
} | ||
// ../../core/src/utils.ts | ||
function toEvent(event) { | ||
const obj = isString(event) ? { type: event } : event; | ||
return obj; | ||
} | ||
function toArray(value) { | ||
if (!value) | ||
return []; | ||
return isArray(value) ? value : [value]; | ||
} | ||
// ../../core/src/transition-utils.ts | ||
function toTarget(target) { | ||
return isString(target) ? { target } : target; | ||
} | ||
function determineTransitionFn(transitions, guardMap) { | ||
return (context, event) => { | ||
return toArray(transitions).map(toTarget).find((transition) => { | ||
var _a; | ||
const determineGuard = determineGuardFn(transition.guard, guardMap); | ||
const guard = determineGuard(context, event); | ||
return (_a = guard != null ? guard : transition.target) != null ? _a : transition.actions; | ||
}); | ||
}; | ||
} | ||
function toTransition(transition, current) { | ||
const _transition = isString(transition) ? toTarget(transition) : transition; | ||
const fn = (t) => { | ||
const isTargetless = t.actions && !t.target; | ||
if (isTargetless && current) | ||
t.target = current; | ||
return t; | ||
}; | ||
if (isArray(_transition)) { | ||
return _transition.map(fn); | ||
} | ||
if (isObject(_transition)) { | ||
return fn(cast(_transition)); | ||
} | ||
} | ||
// ../../core/src/machine.ts | ||
var Machine = class { | ||
constructor(config, options) { | ||
this.config = config; | ||
this.status = "Not Started" /* NotStarted */; | ||
this.type = "machine" /* Machine */; | ||
this.activityEvents = /* @__PURE__ */ new Map(); | ||
this.delayedEvents = /* @__PURE__ */ new Map(); | ||
this.stateListeners = /* @__PURE__ */ new Set(); | ||
this.eventListeners = /* @__PURE__ */ new Set(); | ||
this.doneListeners = /* @__PURE__ */ new Set(); | ||
this.contextWatchers = /* @__PURE__ */ new Set(); | ||
this.removeStateListener = noop; | ||
this.removeEventListener = noop; | ||
this.children = /* @__PURE__ */ new Map(); | ||
this.start = (init) => { | ||
if (this.status === "Running" /* Running */) { | ||
return this; | ||
} | ||
this.status = "Running" /* Running */; | ||
const event = toEvent("machine.init" /* Init */); | ||
if (init) { | ||
const resolved = isObject(init) ? init : { context: this.config.context, value: init }; | ||
this.setState(resolved.value); | ||
this.setContext(resolved.context); | ||
} | ||
const transition = { | ||
target: !!init ? void 0 : this.config.initial | ||
}; | ||
const info = this.getNextStateInfo(transition, event); | ||
info.target = cast(info.target || transition.target); | ||
this.initialState = info; | ||
this.performStateChangeEffects(info.target, info, event); | ||
this.removeStateListener = (0, import_vanilla2.subscribe)(this.state, () => { | ||
this.stateListeners.forEach((listener) => { | ||
listener(this.stateSnapshot); | ||
}); | ||
}, this.sync); | ||
this.removeEventListener = (0, import_utils11.subscribeKey)(this.state, "event", (value) => { | ||
if (this.config.onEvent) { | ||
this.executeActions(this.config.onEvent, value); | ||
} | ||
for (const listener of this.eventListeners) { | ||
listener(value); | ||
} | ||
}); | ||
this.setupContextWatchers(); | ||
this.executeActivities(toEvent("machine.start" /* Start */), toArray(this.config.activities), "machine.start" /* Start */); | ||
this.executeActions(this.config.entry, toEvent("machine.start" /* Start */)); | ||
return this; | ||
}; | ||
this.setupContextWatchers = () => { | ||
var _a; | ||
for (const [key, fn] of Object.entries((_a = this.config.watch) != null ? _a : {})) { | ||
this.contextWatchers.add((0, import_utils11.subscribeKey)(this.state.context, key, () => { | ||
this.executeActions(fn, this.state.event); | ||
})); | ||
} | ||
}; | ||
this.setupComputed = () => { | ||
var _a; | ||
const computed = cast((_a = this.config.computed) != null ? _a : {}); | ||
const deriveFns = Object.fromEntries(Object.entries(computed).map(([key, fn]) => [key, (get) => fn(get(this.state.context))])); | ||
(0, import_utils11.derive)(deriveFns, { proxy: this.state.context }); | ||
}; | ||
this.detachComputed = () => { | ||
(0, import_utils11.underive)(this.state.context, { delete: true }); | ||
}; | ||
this.stop = () => { | ||
if (this.status === "Stopped" /* Stopped */) | ||
return; | ||
this.setState(null); | ||
this.setEvent("machine.stop" /* Stop */); | ||
if (this.config.context) { | ||
this.setContext(this.config.context); | ||
} | ||
this.stopStateListeners(); | ||
this.stopChildren(); | ||
this.stopActivities(); | ||
this.stopDelayedEvents(); | ||
this.stopContextWatchers(); | ||
this.stopEventListeners(); | ||
this.detachComputed(); | ||
this.status = "Stopped" /* Stopped */; | ||
this.executeActions(this.config.exit, toEvent("machine.stop" /* Stop */)); | ||
return this; | ||
}; | ||
this.stopEventListeners = () => { | ||
this.eventListeners.clear(); | ||
this.removeEventListener(); | ||
}; | ||
this.stopStateListeners = () => { | ||
this.removeStateListener(); | ||
this.stateListeners.clear(); | ||
}; | ||
this.stopContextWatchers = () => { | ||
this.contextWatchers.forEach((fn) => fn()); | ||
this.contextWatchers.clear(); | ||
}; | ||
this.stopDelayedEvents = () => { | ||
this.delayedEvents.forEach((state) => { | ||
state.forEach((stop) => stop()); | ||
}); | ||
this.delayedEvents.clear(); | ||
}; | ||
this.stopActivities = (state) => { | ||
var _a, _b; | ||
if (state) { | ||
(_a = this.activityEvents.get(state)) == null ? void 0 : _a.forEach((stop) => stop()); | ||
(_b = this.activityEvents.get(state)) == null ? void 0 : _b.clear(); | ||
this.activityEvents.delete(state); | ||
} else { | ||
this.activityEvents.forEach((state2) => { | ||
state2.forEach((stop) => stop()); | ||
state2.clear(); | ||
}); | ||
this.activityEvents.clear(); | ||
} | ||
}; | ||
this.sendChild = (evt, to) => { | ||
const event = toEvent(evt); | ||
const id = runIfFn(to, this.contextSnapshot); | ||
const child = this.children.get(id); | ||
if (!child) { | ||
invariant(`[machine/send-child] Cannot send '${event.type}' event to unknown child`); | ||
} | ||
child.send(event); | ||
}; | ||
this.stopChild = (id) => { | ||
if (!this.children.has(id)) { | ||
invariant("[machine/stop-child] Cannot stop unknown child"); | ||
} | ||
this.children.get(id).stop(); | ||
this.children.delete(id); | ||
}; | ||
this.removeChild = (id) => { | ||
this.children.delete(id); | ||
}; | ||
this.stopChildren = () => { | ||
this.children.forEach((child) => child.stop()); | ||
this.children.clear(); | ||
}; | ||
this.setParent = (parent) => { | ||
this.parent = parent; | ||
}; | ||
this.spawn = (src, id) => { | ||
const actor = runIfFn(src); | ||
if (id) | ||
actor.id = id; | ||
actor.type = "machine.actor" /* Actor */; | ||
actor.setParent(this); | ||
this.children.set(actor.id, cast(actor)); | ||
actor.onDone(() => { | ||
this.removeChild(actor.id); | ||
}).start(); | ||
return cast((0, import_vanilla2.ref)(actor)); | ||
}; | ||
this.addActivityCleanup = (state, cleanup) => { | ||
var _a; | ||
if (!state) | ||
return; | ||
if (!this.activityEvents.has(state)) { | ||
this.activityEvents.set(state, /* @__PURE__ */ new Set([cleanup])); | ||
} else { | ||
(_a = this.activityEvents.get(state)) == null ? void 0 : _a.add(cleanup); | ||
} | ||
}; | ||
this.setState = (target) => { | ||
this.state.previousValue = this.state.value; | ||
this.state.value = target; | ||
const stateNode = this.getStateNode(target); | ||
if (target == null) { | ||
clear(this.state.tags); | ||
} else { | ||
this.state.tags = toArray(stateNode == null ? void 0 : stateNode.tags); | ||
} | ||
}; | ||
this.setContext = (context) => { | ||
for (const key in context) { | ||
this.state.context[key] = context[key]; | ||
} | ||
}; | ||
this.withContext = (context) => { | ||
this.detachComputed(); | ||
const newContext = __spreadValues(__spreadValues({}, this.config.context), context); | ||
return new Machine(__spreadProps(__spreadValues({}, this.config), { context: newContext }), this.options); | ||
}; | ||
this.withOptions = (options) => { | ||
this.detachComputed(); | ||
return new Machine(this.config, __spreadValues(__spreadValues({}, this.options), options)); | ||
}; | ||
this.setActions = (actions) => { | ||
this.actionMap = __spreadValues(__spreadValues({}, this.actionMap), actions); | ||
}; | ||
this.clone = () => { | ||
this.detachComputed(); | ||
return new Machine(this.config, this.options); | ||
}; | ||
this.getStateNode = (state) => { | ||
var _a; | ||
if (!state) | ||
return; | ||
return (_a = this.config.states) == null ? void 0 : _a[state]; | ||
}; | ||
this.getNextStateInfo = (transitions, event) => { | ||
var _a; | ||
const transition = this.determineTransition(transitions, event); | ||
const target = (_a = transition == null ? void 0 : transition.target) != null ? _a : this.state.value; | ||
const stateNode = this.getStateNode(target); | ||
return { | ||
transition, | ||
stateNode, | ||
target | ||
}; | ||
}; | ||
this.getActionFromDelayedTransition = (transition) => { | ||
const event = toEvent("machine.after" /* After */); | ||
const determineDelay = determineDelayFn(transition.delay, this.delayMap); | ||
const delay = determineDelay(this.contextSnapshot, event); | ||
let id; | ||
return { | ||
entry: () => { | ||
id = globalThis.setTimeout(() => { | ||
const current = this.state.value; | ||
const next = this.getNextStateInfo(transition, event); | ||
this.performStateChangeEffects(current, next, event); | ||
}, delay); | ||
}, | ||
exit: () => { | ||
globalThis.clearTimeout(id); | ||
} | ||
}; | ||
}; | ||
this.getDelayedEventActions = (state) => { | ||
const stateNode = this.getStateNode(state); | ||
const event = toEvent("machine.after" /* After */); | ||
if (!stateNode || !stateNode.after) | ||
return; | ||
const entries = []; | ||
const exits = []; | ||
if (isArray(stateNode.after)) { | ||
const transition = this.determineTransition(stateNode.after, event); | ||
if (!transition) | ||
return; | ||
const actions = this.getActionFromDelayedTransition(transition); | ||
entries.push(actions.entry); | ||
exits.push(actions.exit); | ||
} else if (isObject(stateNode.after)) { | ||
for (const delay in stateNode.after) { | ||
const transition = stateNode.after[delay]; | ||
let resolvedTransition = {}; | ||
if (isArray(transition)) { | ||
const picked = this.determineTransition(transition, event); | ||
if (picked) | ||
resolvedTransition = picked; | ||
} else if (isString(transition)) { | ||
resolvedTransition = { target: transition, delay }; | ||
} else { | ||
resolvedTransition = __spreadProps(__spreadValues({}, transition), { delay }); | ||
} | ||
const actions = this.getActionFromDelayedTransition(resolvedTransition); | ||
entries.push(actions.entry); | ||
exits.push(actions.exit); | ||
} | ||
} | ||
return { entries, exits }; | ||
}; | ||
this.executeActions = (actions, event) => { | ||
var _a; | ||
const _actions = determineActionsFn(actions, this.guardMap)(this.contextSnapshot, event); | ||
for (const action of toArray(_actions)) { | ||
const fn = isString(action) ? (_a = this.actionMap) == null ? void 0 : _a[action] : action; | ||
warn(isString(action) && !fn, `[machine/exec-action] No implementation found for action: \`${action}\``); | ||
fn == null ? void 0 : fn(this.state.context, event, this.meta); | ||
} | ||
}; | ||
this.executeActivities = (event, activities, state) => { | ||
var _a; | ||
for (const activity of activities) { | ||
const fn = isString(activity) ? (_a = this.activityMap) == null ? void 0 : _a[activity] : activity; | ||
if (!fn) { | ||
warn(`[machine/exec-activity] No implementation found for activity: \`${activity}\``); | ||
continue; | ||
} | ||
const cleanup = fn(this.state.context, event, this.meta); | ||
if (cleanup) { | ||
this.addActivityCleanup(state != null ? state : this.state.value, cleanup); | ||
} | ||
} | ||
}; | ||
this.createEveryActivities = (every, callbackfn) => { | ||
if (!every) | ||
return; | ||
const event = toEvent("machine.every" /* Every */); | ||
if (isArray(every)) { | ||
const picked = toArray(every).find((t) => { | ||
const determineDelay2 = determineDelayFn(t.delay, this.delayMap); | ||
t.delay = determineDelay2(this.contextSnapshot, event); | ||
const determineGuard = determineGuardFn(t.guard, this.guardMap); | ||
const guard = determineGuard(this.contextSnapshot, event); | ||
return guard != null ? guard : t.delay; | ||
}); | ||
if (!picked) | ||
return; | ||
const determineDelay = determineDelayFn(picked.delay, this.delayMap); | ||
const delay = determineDelay(this.contextSnapshot, event); | ||
const activity = () => { | ||
const id = globalThis.setInterval(() => { | ||
this.executeActions(picked.actions, event); | ||
}, delay); | ||
return () => { | ||
globalThis.clearInterval(id); | ||
}; | ||
}; | ||
callbackfn(activity); | ||
} else { | ||
for (const interval in every) { | ||
const actions = every == null ? void 0 : every[interval]; | ||
const determineDelay = determineDelayFn(interval, this.delayMap); | ||
const delay = determineDelay(this.contextSnapshot, event); | ||
const activity = () => { | ||
const id = globalThis.setInterval(() => { | ||
this.executeActions(actions, event); | ||
}, delay); | ||
return () => { | ||
globalThis.clearInterval(id); | ||
}; | ||
}; | ||
callbackfn(activity); | ||
} | ||
} | ||
}; | ||
this.setEvent = (event) => { | ||
this.state.event = (0, import_vanilla2.ref)(toEvent(event)); | ||
}; | ||
this.performExitEffects = (current, event) => { | ||
const currentState = this.state.value; | ||
const stateNode = current ? this.getStateNode(current) : void 0; | ||
this.stopActivities(currentState); | ||
const _exit = determineActionsFn(stateNode == null ? void 0 : stateNode.exit, this.guardMap)(this.contextSnapshot, event); | ||
const exitActions = toArray(_exit); | ||
const afterExitActions = this.delayedEvents.get(currentState); | ||
if (afterExitActions) { | ||
exitActions.push(...afterExitActions); | ||
} | ||
this.executeActions(exitActions, event); | ||
this.eventListeners.clear(); | ||
}; | ||
this.performEntryEffects = (next, event) => { | ||
const stateNode = this.getStateNode(next); | ||
const activities = toArray(stateNode == null ? void 0 : stateNode.activities); | ||
this.createEveryActivities(stateNode == null ? void 0 : stateNode.every, (activity) => { | ||
activities.unshift(activity); | ||
}); | ||
if (activities.length > 0) { | ||
this.executeActivities(event, activities); | ||
} | ||
const _entry = determineActionsFn(stateNode == null ? void 0 : stateNode.entry, this.guardMap)(this.contextSnapshot, event); | ||
const entryActions = toArray(_entry); | ||
const afterActions = this.getDelayedEventActions(next); | ||
if ((stateNode == null ? void 0 : stateNode.after) && afterActions) { | ||
this.delayedEvents.set(next, afterActions == null ? void 0 : afterActions.exits); | ||
entryActions.push(...afterActions.entries); | ||
} | ||
this.executeActions(entryActions, event); | ||
if ((stateNode == null ? void 0 : stateNode.type) === "final") { | ||
this.state.done = true; | ||
this.doneListeners.forEach((listener) => { | ||
listener(this.stateSnapshot); | ||
}); | ||
this.stop(); | ||
} | ||
}; | ||
this.performTransitionEffects = (transition, event) => { | ||
const t = this.determineTransition(transition, event); | ||
this.executeActions(t == null ? void 0 : t.actions, event); | ||
}; | ||
this.performStateChangeEffects = (current, next, event) => { | ||
var _a, _b; | ||
this.setEvent(event); | ||
next.target = (_b = (_a = next.target) != null ? _a : this.state.value) != null ? _b : void 0; | ||
const ok = next.target && next.target !== this.state.value; | ||
if (ok) { | ||
this.performExitEffects(current, event); | ||
} | ||
this.performTransitionEffects(next == null ? void 0 : next.transition, event); | ||
this.setState(next.target); | ||
if (ok) { | ||
this.performEntryEffects(next.target, event); | ||
} | ||
}; | ||
this.determineTransition = (transition, event) => { | ||
const fn = determineTransitionFn(transition, this.guardMap); | ||
return fn == null ? void 0 : fn(this.contextSnapshot, event); | ||
}; | ||
this.sendParent = (evt) => { | ||
var _a; | ||
if (!this.parent) { | ||
invariant("[machine/send-parent] Cannot send event to an unknown parent"); | ||
} | ||
const event = toEvent(evt); | ||
(_a = this.parent) == null ? void 0 : _a.send(event); | ||
}; | ||
this.send = (evt) => { | ||
const event = toEvent(evt); | ||
this.transition(this.state.value, event); | ||
}; | ||
this.transition = (state, evt) => { | ||
var _a, _b, _c; | ||
const stateNode = isString(state) ? this.getStateNode(state) : state == null ? void 0 : state.stateNode; | ||
const event = toEvent(evt); | ||
if (!stateNode && !this.config.on) { | ||
const msg = this.status === "Stopped" /* Stopped */ ? "[machine/transition] Cannot transition a stopped machine" : "[machine/transition] State does not have a definition"; | ||
warn(msg); | ||
return; | ||
} | ||
const transitionConfig = (_c = (_a = stateNode == null ? void 0 : stateNode.on) == null ? void 0 : _a[event.type]) != null ? _c : (_b = this.config.on) == null ? void 0 : _b[event.type]; | ||
const transition = toTransition(transitionConfig, this.state.value); | ||
if (!transition) | ||
return; | ||
const info = this.getNextStateInfo(transition, event); | ||
this.performStateChangeEffects(this.state.value, info, event); | ||
return info.stateNode; | ||
}; | ||
this.subscribe = (listener) => { | ||
this.stateListeners.add(listener); | ||
if (this.status === "Running" /* Running */) { | ||
listener(this.stateSnapshot); | ||
} | ||
return () => { | ||
this.stateListeners.delete(listener); | ||
}; | ||
}; | ||
this.onDone = (listener) => { | ||
this.doneListeners.add(listener); | ||
return this; | ||
}; | ||
this.onTransition = (listener) => { | ||
this.stateListeners.add(listener); | ||
if (this.status === "Running" /* Running */) { | ||
listener(this.stateSnapshot); | ||
} | ||
return this; | ||
}; | ||
this.onEvent = (listener) => { | ||
listener(this.state.event); | ||
this.eventListeners.add(listener); | ||
return this; | ||
}; | ||
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k; | ||
this.options = klona(options); | ||
this.id = (_a = config.id) != null ? _a : `machine-${uuid()}`; | ||
this.guardMap = (_c = (_b = this.options) == null ? void 0 : _b.guards) != null ? _c : {}; | ||
this.actionMap = (_e = (_d = this.options) == null ? void 0 : _d.actions) != null ? _e : {}; | ||
this.delayMap = (_g = (_f = this.options) == null ? void 0 : _f.delays) != null ? _g : {}; | ||
this.activityMap = (_i = (_h = this.options) == null ? void 0 : _h.activities) != null ? _i : {}; | ||
this.sync = (_k = (_j = this.options) == null ? void 0 : _j.sync) != null ? _k : false; | ||
this.state = createProxy(klona(config)); | ||
this.setupComputed(); | ||
const event = toEvent("machine.created" /* Created */); | ||
this.executeActions(config == null ? void 0 : config.created, event); | ||
} | ||
get stateSnapshot() { | ||
return cast((0, import_vanilla2.snapshot)(this.state)); | ||
} | ||
get contextSnapshot() { | ||
return this.stateSnapshot.context; | ||
} | ||
get self() { | ||
const _self = this; | ||
return { | ||
id: this.id, | ||
send: this.send.bind(this), | ||
sendParent: this.sendParent.bind(this), | ||
sendChild: this.sendChild.bind(this), | ||
stop: this.stop.bind(this), | ||
stopChild: this.stopChild.bind(this), | ||
spawn: this.spawn.bind(this), | ||
get state() { | ||
return _self.stateSnapshot; | ||
} | ||
}; | ||
} | ||
get meta() { | ||
return { | ||
state: this.stateSnapshot, | ||
guards: this.guardMap, | ||
send: this.send.bind(this), | ||
listen: this.onEvent.bind(this), | ||
self: this.self, | ||
getState: () => this.stateSnapshot | ||
}; | ||
} | ||
}; | ||
var createMachine = (config, options) => new Machine(config, options); | ||
// src/tabs.machine.ts | ||
var { not: not2 } = guards; | ||
var machine = createMachine({ | ||
initial: "unknown", | ||
context: { | ||
dir: "ltr", | ||
orientation: "horizontal", | ||
activationMode: "automatic", | ||
value: null, | ||
focusedValue: null, | ||
uid: "", | ||
previousValues: [], | ||
indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" }, | ||
hasMeasuredRect: false, | ||
isIndicatorRendered: false, | ||
loop: true, | ||
messages: {} | ||
}, | ||
computed: { | ||
isHorizontal: (ctx) => ctx.orientation === "horizontal", | ||
isVertical: (ctx) => ctx.orientation === "vertical" | ||
}, | ||
created: ["setPrevSelectedTabs"], | ||
watch: { | ||
focusedValue: "invokeOnFocus", | ||
value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"], | ||
dir: ["clearMeasured", "setIndicatorRect"] | ||
}, | ||
on: { | ||
SET_VALUE: { | ||
actions: "setValue" | ||
}, | ||
DELETE: { | ||
actions: "deleteValue" | ||
} | ||
}, | ||
states: { | ||
unknown: { | ||
on: { | ||
SETUP: { | ||
target: "idle", | ||
actions: ["setupDocument", "checkRenderedElements", "setIndicatorRect", "setContentTabIndex"] | ||
} | ||
} | ||
}, | ||
idle: { | ||
on: { | ||
TAB_FOCUS: { | ||
guard: "selectOnFocus", | ||
target: "focused", | ||
actions: ["setFocusedValue", "setValue"] | ||
}, | ||
TAB_CLICK: { | ||
target: "focused", | ||
actions: ["setFocusedValue", "setValue"] | ||
} | ||
} | ||
}, | ||
focused: { | ||
on: { | ||
TAB_CLICK: { | ||
target: "focused", | ||
actions: ["setFocusedValue", "setValue"] | ||
}, | ||
ARROW_LEFT: { | ||
guard: "isHorizontal", | ||
actions: "focusPrevTab" | ||
}, | ||
ARROW_RIGHT: { | ||
guard: "isHorizontal", | ||
actions: "focusNextTab" | ||
}, | ||
ARROW_UP: { | ||
guard: "isVertical", | ||
actions: "focusPrevTab" | ||
}, | ||
ARROW_DOWN: { | ||
guard: "isVertical", | ||
actions: "focusNextTab" | ||
}, | ||
HOME: { | ||
actions: "focusFirstTab" | ||
}, | ||
END: { | ||
actions: "focusLastTab" | ||
}, | ||
ENTER: { | ||
guard: not2("selectOnFocus"), | ||
actions: "setValue" | ||
}, | ||
TAB_FOCUS: [ | ||
{ | ||
guard: "selectOnFocus", | ||
actions: ["setFocusedValue", "setValue"] | ||
}, | ||
{ actions: "setFocusedValue" } | ||
], | ||
TAB_BLUR: { | ||
target: "idle", | ||
actions: "clearFocusedValue" | ||
} | ||
} | ||
} | ||
} | ||
}, { | ||
guards: { | ||
isVertical: (ctx) => ctx.isVertical, | ||
isHorizontal: (ctx) => ctx.isHorizontal, | ||
selectOnFocus: (ctx) => ctx.activationMode === "automatic" | ||
}, | ||
actions: { | ||
setupDocument(ctx, evt) { | ||
ctx.uid = evt.id; | ||
if (evt.doc) | ||
ctx.doc = (0, import_vanilla3.ref)(evt.doc); | ||
}, | ||
setFocusedValue(ctx, evt) { | ||
ctx.focusedValue = evt.value; | ||
}, | ||
clearFocusedValue(ctx) { | ||
ctx.focusedValue = null; | ||
}, | ||
setValue(ctx, evt) { | ||
ctx.value = evt.value; | ||
}, | ||
invokeOnDelete(ctx, evt) { | ||
var _a; | ||
(_a = ctx.onDelete) == null ? void 0 : _a.call(ctx, { value: evt.value }); | ||
}, | ||
focusFirstTab(ctx) { | ||
nextTick(() => { | ||
var _a; | ||
return (_a = dom.getFirstEl(ctx)) == null ? void 0 : _a.focus(); | ||
}); | ||
}, | ||
focusLastTab(ctx) { | ||
nextTick(() => { | ||
var _a; | ||
return (_a = dom.getLastEl(ctx)) == null ? void 0 : _a.focus(); | ||
}); | ||
}, | ||
focusNextTab(ctx) { | ||
if (!ctx.focusedValue) | ||
return; | ||
const next = dom.getNextEl(ctx, ctx.focusedValue); | ||
nextTick(() => next == null ? void 0 : next.focus()); | ||
}, | ||
focusPrevTab(ctx) { | ||
if (!ctx.focusedValue) | ||
return; | ||
const prev = dom.getPrevEl(ctx, ctx.focusedValue); | ||
nextTick(() => prev == null ? void 0 : prev.focus()); | ||
}, | ||
setIndicatorRect(ctx) { | ||
nextTick(() => { | ||
if (!ctx.isIndicatorRendered || !ctx.value) | ||
return; | ||
ctx.indicatorRect = dom.getRectById(ctx, ctx.value); | ||
if (ctx.hasMeasuredRect) | ||
return; | ||
nextTick(() => { | ||
ctx.hasMeasuredRect = true; | ||
}); | ||
}); | ||
}, | ||
checkRenderedElements(ctx) { | ||
nextTick(() => { | ||
ctx.isIndicatorRendered = !!dom.getIndicatorEl(ctx); | ||
}); | ||
}, | ||
clearMeasured(ctx) { | ||
ctx.hasMeasuredRect = false; | ||
}, | ||
invokeOnChange(ctx) { | ||
var _a; | ||
(_a = ctx.onChange) == null ? void 0 : _a.call(ctx, { value: ctx.value }); | ||
}, | ||
invokeOnFocus(ctx) { | ||
var _a; | ||
(_a = ctx.onFocus) == null ? void 0 : _a.call(ctx, { value: ctx.focusedValue }); | ||
}, | ||
setPrevSelectedTabs(ctx) { | ||
if (ctx.value != null) { | ||
const newSelected = Array.from(ctx.previousValues).concat(ctx.value); | ||
ctx.previousValues = Array.from(new Set(newSelected)); | ||
} | ||
}, | ||
setContentTabIndex(ctx) { | ||
nextTick(() => { | ||
const panel = dom.getActiveContentEl(ctx); | ||
if (!panel) | ||
return; | ||
const focusables = getFocusables(panel); | ||
if (focusables.length > 0) { | ||
panel.removeAttribute("tabindex"); | ||
} else { | ||
panel.setAttribute("tabindex", "0"); | ||
} | ||
}); | ||
} | ||
} | ||
}); | ||
//# sourceMappingURL=index.js.map |
@@ -19,1 +19,2 @@ import { StateMachine as S } from "@zag-js/core"; | ||
}; | ||
//# sourceMappingURL=tabs.connect.d.ts.map |
@@ -32,1 +32,2 @@ import { MachineContext as Ctx } from "./tabs.types"; | ||
}; | ||
//# sourceMappingURL=tabs.dom.d.ts.map |
import { MachineContext, MachineState } from "./tabs.types"; | ||
export declare const machine: import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>; | ||
//# sourceMappingURL=tabs.machine.d.ts.map |
@@ -106,1 +106,2 @@ import { Context } from "@zag-js/types"; | ||
export {}; | ||
//# sourceMappingURL=tabs.types.d.ts.map |
{ | ||
"name": "@zag-js/tabs", | ||
"version": "0.0.0-dev-20220413091534", | ||
"version": "0.0.0-dev-20220413174154", | ||
"description": "Core logic for the tabs widget implemented as a state machine", | ||
@@ -23,3 +23,3 @@ "keywords": [ | ||
"files": [ | ||
"dist" | ||
"dist/**/*" | ||
], | ||
@@ -33,7 +33,16 @@ "publishConfig": { | ||
"dependencies": { | ||
"@zag-js/core": "^0.0.0-dev-20220413091534", | ||
"@zag-js/dom-utils": "^0.0.0-dev-20220413091534", | ||
"@zag-js/types": "^0.0.0-dev-20220413091534", | ||
"@zag-js/utils": "^0.0.0-dev-20220413091534" | ||
"@zag-js/core": "^0.0.0-dev-20220413174154", | ||
"@zag-js/dom-utils": "^0.0.0-dev-20220413174154", | ||
"@zag-js/types": "^0.0.0-dev-20220413174154", | ||
"@zag-js/utils": "^0.0.0-dev-20220413174154" | ||
}, | ||
"scripts": { | ||
"build:fast": "zag build", | ||
"start": "zag build --watch", | ||
"build": "zag build --prod", | ||
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests", | ||
"lint": "eslint src --ext .ts,.tsx", | ||
"test:ci": "yarn test --ci --runInBand", | ||
"test:watch": "yarn test --watch --updateSnapshot" | ||
} | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
16
2789
292619
1