@zag-js/tabs
Advanced tools
Comparing version 0.0.0-dev-20220413175519 to 0.0.0-dev-20220415160434
var __defProp = Object.defineProperty; | ||
var __defProps = Object.defineProperties; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropDescs = Object.getOwnPropertyDescriptors; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
@@ -21,3 +19,2 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols; | ||
}; | ||
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); | ||
var __export = (target, all) => { | ||
@@ -45,30 +42,31 @@ for (var name in all) | ||
// ../../utilities/dom/src/attrs.ts | ||
// ../../utilities/dom/dist/index.mjs | ||
var dataAttr = (guard) => { | ||
return guard ? "" : void 0; | ||
}; | ||
// ../../utilities/dom/src/computed-style.ts | ||
var styleCache = /* @__PURE__ */ new WeakMap(); | ||
function getComputedStyle(el) { | ||
function getStyleCache() { | ||
; | ||
globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap(); | ||
return globalThis.__styleCache__; | ||
} | ||
function getComputedStyle2(el) { | ||
var _a; | ||
if (!el) | ||
return {}; | ||
let style = styleCache.get(el); | ||
const cache = getStyleCache(); | ||
let style = cache.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); | ||
cache.set(el, style); | ||
} | ||
return style; | ||
} | ||
// ../../utilities/dom/src/next-tick.ts | ||
function nextTick(fn) { | ||
const set = /* @__PURE__ */ new Set(); | ||
function raf(fn2) { | ||
function raf2(fn2) { | ||
const id = globalThis.requestAnimationFrame(fn2); | ||
set.add(() => globalThis.cancelAnimationFrame(id)); | ||
} | ||
raf(() => raf(fn)); | ||
raf2(() => raf2(fn)); | ||
return function cleanup() { | ||
@@ -80,55 +78,2 @@ set.forEach(function(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) { | ||
@@ -140,4 +85,2 @@ return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string"; | ||
}; | ||
// ../../utilities/dom/src/focusable.ts | ||
var focusableSelector = /* @__PURE__ */ [ | ||
@@ -161,3 +104,3 @@ "input:not([disabled]):not([type=hidden])", | ||
function isHidden(el, until) { | ||
const style = getComputedStyle(el); | ||
const style = getComputedStyle2(el); | ||
if (!el || style.getPropertyValue("visibility") === "hidden") | ||
@@ -188,4 +131,2 @@ return true; | ||
}; | ||
// ../../utilities/dom/src/keyboard-event.ts | ||
var rtlKeyMap = { | ||
@@ -217,4 +158,2 @@ ArrowLeft: "ArrowRight", | ||
} | ||
// ../../utilities/dom/src/nodelist.ts | ||
function queryAll(root, selector) { | ||
@@ -244,3 +183,3 @@ var _a; | ||
// ../../types/src/prop-types.ts | ||
// ../../types/dist/index.mjs | ||
function createNormalizer(fn) { | ||
@@ -251,2 +190,9 @@ return { button: fn, label: fn, input: fn, output: fn, element: fn }; | ||
// ../../utilities/core/dist/index.mjs | ||
var first = (v) => v[0]; | ||
var last = (v) => v[v.length - 1]; | ||
var ua = (v) => isDom() && v.test(navigator.userAgent); | ||
var isDom = () => !!(typeof window !== "undefined"); | ||
var isSafari = () => ua(/^((?!chrome|android).)*safari/i); | ||
// src/tabs.dom.ts | ||
@@ -451,711 +397,6 @@ var dom = { | ||
// ../../../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({ | ||
var import_core = require("@zag-js/core"); | ||
var { not } = import_core.guards; | ||
var machine = (0, import_core.createMachine)({ | ||
initial: "unknown", | ||
@@ -1245,3 +486,3 @@ context: { | ||
ENTER: { | ||
guard: not2("selectOnFocus"), | ||
guard: not("selectOnFocus"), | ||
actions: "setValue" | ||
@@ -1273,3 +514,3 @@ }, | ||
if (evt.doc) | ||
ctx.doc = (0, import_vanilla3.ref)(evt.doc); | ||
ctx.doc = (0, import_core.ref)(evt.doc); | ||
}, | ||
@@ -1276,0 +517,0 @@ setFocusedValue(ctx, evt) { |
{ | ||
"name": "@zag-js/tabs", | ||
"version": "0.0.0-dev-20220413175519", | ||
"version": "0.0.0-dev-20220415160434", | ||
"description": "Core logic for the tabs widget implemented as a state machine", | ||
@@ -32,6 +32,6 @@ "keywords": [ | ||
"dependencies": { | ||
"@zag-js/core": "^0.0.0-dev-20220413175519", | ||
"@zag-js/dom-utils": "^0.0.0-dev-20220413175519", | ||
"@zag-js/types": "^0.0.0-dev-20220413175519", | ||
"@zag-js/utils": "^0.0.0-dev-20220413175519" | ||
"@zag-js/core": "^0.0.0-dev-20220415160434", | ||
"@zag-js/dom-utils": "^0.0.0-dev-20220415160434", | ||
"@zag-js/types": "^0.0.0-dev-20220415160434", | ||
"@zag-js/utils": "^0.0.0-dev-20220415160434" | ||
}, | ||
@@ -38,0 +38,0 @@ "scripts": { |
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
211069
1309