@smwb/ui-solid 0.12.0 → 0.12.1

package/dist/headless/primitives/createCssTransition.js

@@ -1,40 +1,43 @@
-import { createSignal as v, createEffect as x, onCleanup as D } from "solid-js";
-const F = (...t) => t.filter(Boolean).join(" ");
-function C(t) {
-  const [l, m] = v(t.in()), [A, i] = v("");
-  let o = !0, r, n, s;
-  const f = () => {
-    r !== void 0 && clearTimeout(r), n !== void 0 && cancelAnimationFrame(n), s !== void 0 && cancelAnimationFrame(s), r = void 0, n = void 0, s = void 0;
-  }, u = (c, e, a, d, p) => {
-    i(c ?? ""), n = requestAnimationFrame(() => {
-      s = requestAnimationFrame(() => i(F(c, e)));
-    }), r = setTimeout(() => {
-      p ? p() : i(a ?? "");
-    }, d);
+import { createSignal as A, createEffect as F, onCleanup as T } from "solid-js";
+const C = (...t) => t.filter(Boolean).join(" ");
+function j(t) {
+  const [f, u] = A(t.in()), [x, r] = A("");
+  let l = !0, o, n, a, s = 0;
+  const m = () => {
+    s++, o !== void 0 && clearTimeout(o), n !== void 0 && cancelAnimationFrame(n), a !== void 0 && cancelAnimationFrame(a), o = void 0, n = void 0, a = void 0;
+  }, v = (c, e, i, D, d) => {
+    const p = s;
+    r(c ?? ""), n = requestAnimationFrame(() => {
+      n = void 0, p === s && (a = requestAnimationFrame(() => {
+        a = void 0, p === s && r(C(c, e));
+      }));
+    }), o = setTimeout(() => {
+      m(), d ? d() : r(i ?? "");
+    }, D);
   };
-  return x(() => {
+  return F(() => {
     const c = t.in();
-    f();
+    m();
     const e = t.classNames;
     if (c)
-      if (m(!0), o && !t.appear)
-        i(e.enterDone ?? "");
+      if (u(!0), l && !t.appear)
+        r(e.enterDone ?? "");
       else {
-        const a = o && !!t.appear;
-        u(
-          a ? e.appear : e.enter,
-          a ? e.appearActive : e.enterActive,
-          a ? e.appearDone ?? e.enterDone : e.enterDone,
-          a ? t.timeout.appear ?? t.timeout.enter : t.timeout.enter
+        const i = l && !!t.appear;
+        v(
+          i ? e.appear : e.enter,
+          i ? e.appearActive : e.enterActive,
+          i ? e.appearDone ?? e.enterDone : e.enterDone,
+          i ? t.timeout.appear ?? t.timeout.enter : t.timeout.enter
         );
       }
-    else l() && u(e.exit, e.exitActive, e.exitDone, t.timeout.exit, () => {
-      m(!1), i("");
+    else f() && v(e.exit, e.exitActive, e.exitDone, t.timeout.exit, () => {
+      u(!1), r("");
     });
-    o = !1;
-  }), D(f), { mounted: l, classes: A };
+    l = !1;
+  }), T(m), { mounted: f, classes: x };
 }
 export {
-  C as createCssTransition
+  j as createCssTransition
 };
 //# sourceMappingURL=createCssTransition.js.map

package/dist/headless/primitives/createCssTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCssTransition.js","sources":["../../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n\n  const clearTimers = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));\n    });\n    timer = setTimeout(() => {\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","clearTimers","run","start","active","done","duration","onEnd","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAQrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC;AAEJ,QAAMC,IAAc,MAAY;AAC9B,IAAIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEME,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,IAAAX,EAAWO,KAAS,EAAE,GACtBJ,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAMJ,EAAWR,EAAKe,GAAOC,CAAM,CAAC,CAAC;AAAA,IACpE,CAAC,GACDN,IAAQ,WAAW,MAAM;AACvB,MAAIS,IAAOA,EAAA,IACNX,EAAWS,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAE,EAAa,MAAM;AACjB,UAAMC,IAAOlB,EAAQ,GAAA;AACrB,IAAAU,EAAA;AACA,UAAMS,IAAMnB,EAAQ;AAEpB,QAAIkB;AAEF,UADAhB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWc,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYd,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAW;AAAA,UACES,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAapB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTU,EAAIQ,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUnB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDe,EAAUX,CAAW,GAEd,EAAE,SAAAT,GAAS,SAAAG,EAAA;AACpB;"}
+{"version":3,"file":"createCssTransition.js","sources":["../../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n *\n * Each phase settles once: when the timeout fires, the pending rAFs are\n * cancelled and can no longer rewrite the classes. At a low frame rate the\n * second rAF can land after the timeout, and it used to overwrite the done\n * class with the start/active classes, parking the node in its off-screen\n * state.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n  // Bumped whenever a phase settles or is replaced; a frame callback from an\n  // older phase sees a different value and does nothing.\n  let generation = 0;\n\n  const clearTimers = (): void => {\n    generation++;\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    const own = generation;\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf1 = undefined;\n      if (own !== generation) return;\n      raf2 = requestAnimationFrame(() => {\n        raf2 = undefined;\n        if (own === generation) setClasses(join(start, active));\n      });\n    });\n    timer = setTimeout(() => {\n      clearTimers();\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","generation","clearTimers","run","start","active","done","duration","onEnd","own","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAcrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC,GAGAC,IAAa;AAEjB,QAAMC,IAAc,MAAY;AAC9B,IAAAD,KACIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEMG,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,UAAMC,IAAMR;AACZ,IAAAL,EAAWQ,KAAS,EAAE,GACtBL,IAAO,sBAAsB,MAAM;AAEjC,MADAA,IAAO,QACHU,MAAQR,MACZD,IAAO,sBAAsB,MAAM;AACjC,QAAAA,IAAO,QACHS,MAAQR,KAAYL,EAAWR,EAAKgB,GAAOC,CAAM,CAAC;AAAA,MACxD,CAAC;AAAA,IACH,CAAC,GACDP,IAAQ,WAAW,MAAM;AACvB,MAAAI,EAAA,GACIM,IAAOA,EAAA,IACNZ,EAAWU,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAG,EAAa,MAAM;AACjB,UAAMC,IAAOpB,EAAQ,GAAA;AACrB,IAAAW,EAAA;AACA,UAAMU,IAAMrB,EAAQ;AAEpB,QAAIoB;AAEF,UADAlB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWgB,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYhB,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAY;AAAA,UACEU,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAatB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTW,EAAIS,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUrB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDiB,EAAUZ,CAAW,GAEd,EAAE,SAAAV,GAAS,SAAAG,EAAA;AACpB;"}

package/dist/headless/source/primitives/createCssTransition.js

@@ -7,7 +7,9 @@ function createCssTransition(options) {
   let timer;
   let raf1;
   let raf2;
+  let generation = 0;
   const clearTimers = () => {
+    generation++;
     if (timer !== void 0) clearTimeout(timer);
     if (raf1 !== void 0) cancelAnimationFrame(raf1);
     if (raf2 !== void 0) cancelAnimationFrame(raf2);
@@ -16,11 +18,18 @@ function createCssTransition(options) {
     raf2 = void 0;
   };
   const run = (start, active, done, duration, onEnd) => {
+    const own = generation;
     setClasses(start ?? "");
     raf1 = requestAnimationFrame(() => {
-      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));
+      raf1 = void 0;
+      if (own !== generation) return;
+      raf2 = requestAnimationFrame(() => {
+        raf2 = void 0;
+        if (own === generation) setClasses(join(start, active));
+      });
     });
     timer = setTimeout(() => {
+      clearTimers();
       if (onEnd) onEnd();
       else setClasses(done ?? "");
     }, duration);

package/dist/headless/source/primitives/createCssTransition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/primitives/createCssTransition.ts"],
-  "sourcesContent": ["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics \u2014 a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n\n  const clearTimers = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));\n    });\n    timer = setTimeout(() => {\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],
-  "mappings": "AAAA,SAAwB,cAAc,cAAc,iBAAiB;AA6BrE,MAAM,OAAO,IAAI,UAA6C,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAQrF,SAAS,oBAAoB,SAAyD;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,QAAQ,GAAG,CAAC;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,EAAE;AAE7C,MAAI,QAAQ;AACZ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,QAAM,cAAc,MAAY;AAC9B,QAAI,UAAU,OAAW,cAAa,KAAK;AAC3C,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,YAAQ;AACR,WAAO;AACP,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,OAA2B,QAA4B,MAA0B,UAAkB,UAA6B;AAC3I,eAAW,SAAS,EAAE;AACtB,WAAO,sBAAsB,MAAM;AACjC,aAAO,sBAAsB,MAAM,WAAW,KAAK,OAAO,MAAM,CAAC,CAAC;AAAA,IACpE,CAAC;AACD,YAAQ,WAAW,MAAM;AACvB,UAAI,MAAO,OAAM;AAAA,UACZ,YAAW,QAAQ,EAAE;AAAA,IAC5B,GAAG,QAAQ;AAAA,EACb;AAEA,eAAa,MAAM;AACjB,UAAM,OAAO,QAAQ,GAAG;AACxB,gBAAY;AACZ,UAAM,MAAM,QAAQ;AAEpB,QAAI,MAAM;AACR,iBAAW,IAAI;AACf,UAAI,SAAS,CAAC,QAAQ,QAAQ;AAC5B,mBAAW,IAAI,aAAa,EAAE;AAAA,MAChC,OAAO;AACL,cAAM,YAAY,SAAS,CAAC,CAAC,QAAQ;AACrC;AAAA,UACE,YAAY,IAAI,SAAS,IAAI;AAAA,UAC7B,YAAY,IAAI,eAAe,IAAI;AAAA,UACnC,YAAa,IAAI,cAAc,IAAI,YAAa,IAAI;AAAA,UACpD,YAAa,QAAQ,QAAQ,UAAU,QAAQ,QAAQ,QAAS,QAAQ,QAAQ;AAAA,QAClF;AAAA,MACF;AAAA,IACF,WAAW,QAAQ,GAAG;AACpB,UAAI,IAAI,MAAM,IAAI,YAAY,IAAI,UAAU,QAAQ,QAAQ,MAAM,MAAM;AACtE,mBAAW,KAAK;AAChB,mBAAW,EAAE;AAAA,MACf,CAAC;AAAA,IACH;AACA,YAAQ;AAAA,EACV,CAAC;AAED,YAAU,WAAW;AAErB,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
+  "sourcesContent": ["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics \u2014 a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n *\n * Each phase settles once: when the timeout fires, the pending rAFs are\n * cancelled and can no longer rewrite the classes. At a low frame rate the\n * second rAF can land after the timeout, and it used to overwrite the done\n * class with the start/active classes, parking the node in its off-screen\n * state.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n  // Bumped whenever a phase settles or is replaced; a frame callback from an\n  // older phase sees a different value and does nothing.\n  let generation = 0;\n\n  const clearTimers = (): void => {\n    generation++;\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    const own = generation;\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf1 = undefined;\n      if (own !== generation) return;\n      raf2 = requestAnimationFrame(() => {\n        raf2 = undefined;\n        if (own === generation) setClasses(join(start, active));\n      });\n    });\n    timer = setTimeout(() => {\n      clearTimers();\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],
+  "mappings": "AAAA,SAAwB,cAAc,cAAc,iBAAiB;AA6BrE,MAAM,OAAO,IAAI,UAA6C,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAcrF,SAAS,oBAAoB,SAAyD;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,QAAQ,GAAG,CAAC;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,EAAE;AAE7C,MAAI,QAAQ;AACZ,MAAI;AACJ,MAAI;AACJ,MAAI;AAGJ,MAAI,aAAa;AAEjB,QAAM,cAAc,MAAY;AAC9B;AACA,QAAI,UAAU,OAAW,cAAa,KAAK;AAC3C,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,YAAQ;AACR,WAAO;AACP,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,OAA2B,QAA4B,MAA0B,UAAkB,UAA6B;AAC3I,UAAM,MAAM;AACZ,eAAW,SAAS,EAAE;AACtB,WAAO,sBAAsB,MAAM;AACjC,aAAO;AACP,UAAI,QAAQ,WAAY;AACxB,aAAO,sBAAsB,MAAM;AACjC,eAAO;AACP,YAAI,QAAQ,WAAY,YAAW,KAAK,OAAO,MAAM,CAAC;AAAA,MACxD,CAAC;AAAA,IACH,CAAC;AACD,YAAQ,WAAW,MAAM;AACvB,kBAAY;AACZ,UAAI,MAAO,OAAM;AAAA,UACZ,YAAW,QAAQ,EAAE;AAAA,IAC5B,GAAG,QAAQ;AAAA,EACb;AAEA,eAAa,MAAM;AACjB,UAAM,OAAO,QAAQ,GAAG;AACxB,gBAAY;AACZ,UAAM,MAAM,QAAQ;AAEpB,QAAI,MAAM;AACR,iBAAW,IAAI;AACf,UAAI,SAAS,CAAC,QAAQ,QAAQ;AAC5B,mBAAW,IAAI,aAAa,EAAE;AAAA,MAChC,OAAO;AACL,cAAM,YAAY,SAAS,CAAC,CAAC,QAAQ;AACrC;AAAA,UACE,YAAY,IAAI,SAAS,IAAI;AAAA,UAC7B,YAAY,IAAI,eAAe,IAAI;AAAA,UACnC,YAAa,IAAI,cAAc,IAAI,YAAa,IAAI;AAAA,UACpD,YAAa,QAAQ,QAAQ,UAAU,QAAQ,QAAQ,QAAS,QAAQ,QAAQ;AAAA,QAClF;AAAA,MACF;AAAA,IACF,WAAW,QAAQ,GAAG;AACpB,UAAI,IAAI,MAAM,IAAI,YAAY,IAAI,UAAU,QAAQ,QAAQ,MAAM,MAAM;AACtE,mBAAW,KAAK;AAChB,mBAAW,EAAE;AAAA,MACf,CAAC;AAAA,IACH;AACA,YAAQ;AAAA,EACV,CAAC;AAED,YAAU,WAAW;AAErB,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
   "names": []
 }

package/dist/primitives/createCssTransition.d.ts

@@ -32,5 +32,11 @@ export interface CssTransitionState {
  * dependency-free replacement for react-transition-group's CSSTransition. Uses
  * a double rAF to flush the start class before the active class so the CSS
  * transition runs, and a timeout to advance to the done/unmounted phase.
+ *
+ * Each phase settles once: when the timeout fires, the pending rAFs are
+ * cancelled and can no longer rewrite the classes. At a low frame rate the
+ * second rAF can land after the timeout, and it used to overwrite the done
+ * class with the start/active classes, parking the node in its off-screen
+ * state.
  */
 export declare function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState;

package/dist/primitives/createCssTransition.js

@@ -1,40 +1,43 @@
-import { createSignal as v, createEffect as x, onCleanup as D } from "solid-js";
-const F = (...t) => t.filter(Boolean).join(" ");
-function C(t) {
-  const [l, m] = v(t.in()), [A, i] = v("");
-  let o = !0, r, n, s;
-  const f = () => {
-    r !== void 0 && clearTimeout(r), n !== void 0 && cancelAnimationFrame(n), s !== void 0 && cancelAnimationFrame(s), r = void 0, n = void 0, s = void 0;
-  }, u = (c, e, a, d, p) => {
-    i(c ?? ""), n = requestAnimationFrame(() => {
-      s = requestAnimationFrame(() => i(F(c, e)));
-    }), r = setTimeout(() => {
-      p ? p() : i(a ?? "");
-    }, d);
+import { createSignal as A, createEffect as F, onCleanup as T } from "solid-js";
+const C = (...t) => t.filter(Boolean).join(" ");
+function j(t) {
+  const [f, u] = A(t.in()), [x, r] = A("");
+  let l = !0, o, n, a, s = 0;
+  const m = () => {
+    s++, o !== void 0 && clearTimeout(o), n !== void 0 && cancelAnimationFrame(n), a !== void 0 && cancelAnimationFrame(a), o = void 0, n = void 0, a = void 0;
+  }, v = (c, e, i, D, d) => {
+    const p = s;
+    r(c ?? ""), n = requestAnimationFrame(() => {
+      n = void 0, p === s && (a = requestAnimationFrame(() => {
+        a = void 0, p === s && r(C(c, e));
+      }));
+    }), o = setTimeout(() => {
+      m(), d ? d() : r(i ?? "");
+    }, D);
   };
-  return x(() => {
+  return F(() => {
     const c = t.in();
-    f();
+    m();
     const e = t.classNames;
     if (c)
-      if (m(!0), o && !t.appear)
-        i(e.enterDone ?? "");
+      if (u(!0), l && !t.appear)
+        r(e.enterDone ?? "");
       else {
-        const a = o && !!t.appear;
-        u(
-          a ? e.appear : e.enter,
-          a ? e.appearActive : e.enterActive,
-          a ? e.appearDone ?? e.enterDone : e.enterDone,
-          a ? t.timeout.appear ?? t.timeout.enter : t.timeout.enter
+        const i = l && !!t.appear;
+        v(
+          i ? e.appear : e.enter,
+          i ? e.appearActive : e.enterActive,
+          i ? e.appearDone ?? e.enterDone : e.enterDone,
+          i ? t.timeout.appear ?? t.timeout.enter : t.timeout.enter
         );
       }
-    else l() && u(e.exit, e.exitActive, e.exitDone, t.timeout.exit, () => {
-      m(!1), i("");
+    else f() && v(e.exit, e.exitActive, e.exitDone, t.timeout.exit, () => {
+      u(!1), r("");
     });
-    o = !1;
-  }), D(f), { mounted: l, classes: A };
+    l = !1;
+  }), T(m), { mounted: f, classes: x };
 }
 export {
-  C as createCssTransition
+  j as createCssTransition
 };
 //# sourceMappingURL=createCssTransition.js.map

package/dist/primitives/createCssTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCssTransition.js","sources":["../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n\n  const clearTimers = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));\n    });\n    timer = setTimeout(() => {\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","clearTimers","run","start","active","done","duration","onEnd","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAQrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC;AAEJ,QAAMC,IAAc,MAAY;AAC9B,IAAIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEME,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,IAAAX,EAAWO,KAAS,EAAE,GACtBJ,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAMJ,EAAWR,EAAKe,GAAOC,CAAM,CAAC,CAAC;AAAA,IACpE,CAAC,GACDN,IAAQ,WAAW,MAAM;AACvB,MAAIS,IAAOA,EAAA,IACNX,EAAWS,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAE,EAAa,MAAM;AACjB,UAAMC,IAAOlB,EAAQ,GAAA;AACrB,IAAAU,EAAA;AACA,UAAMS,IAAMnB,EAAQ;AAEpB,QAAIkB;AAEF,UADAhB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWc,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYd,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAW;AAAA,UACES,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAapB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTU,EAAIQ,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUnB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDe,EAAUX,CAAW,GAEd,EAAE,SAAAT,GAAS,SAAAG,EAAA;AACpB;"}
+{"version":3,"file":"createCssTransition.js","sources":["../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n *\n * Each phase settles once: when the timeout fires, the pending rAFs are\n * cancelled and can no longer rewrite the classes. At a low frame rate the\n * second rAF can land after the timeout, and it used to overwrite the done\n * class with the start/active classes, parking the node in its off-screen\n * state.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n  // Bumped whenever a phase settles or is replaced; a frame callback from an\n  // older phase sees a different value and does nothing.\n  let generation = 0;\n\n  const clearTimers = (): void => {\n    generation++;\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    const own = generation;\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf1 = undefined;\n      if (own !== generation) return;\n      raf2 = requestAnimationFrame(() => {\n        raf2 = undefined;\n        if (own === generation) setClasses(join(start, active));\n      });\n    });\n    timer = setTimeout(() => {\n      clearTimers();\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","generation","clearTimers","run","start","active","done","duration","onEnd","own","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAcrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC,GAGAC,IAAa;AAEjB,QAAMC,IAAc,MAAY;AAC9B,IAAAD,KACIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEMG,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,UAAMC,IAAMR;AACZ,IAAAL,EAAWQ,KAAS,EAAE,GACtBL,IAAO,sBAAsB,MAAM;AAEjC,MADAA,IAAO,QACHU,MAAQR,MACZD,IAAO,sBAAsB,MAAM;AACjC,QAAAA,IAAO,QACHS,MAAQR,KAAYL,EAAWR,EAAKgB,GAAOC,CAAM,CAAC;AAAA,MACxD,CAAC;AAAA,IACH,CAAC,GACDP,IAAQ,WAAW,MAAM;AACvB,MAAAI,EAAA,GACIM,IAAOA,EAAA,IACNZ,EAAWU,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAG,EAAa,MAAM;AACjB,UAAMC,IAAOpB,EAAQ,GAAA;AACrB,IAAAW,EAAA;AACA,UAAMU,IAAMrB,EAAQ;AAEpB,QAAIoB;AAEF,UADAlB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWgB,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYhB,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAY;AAAA,UACEU,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAatB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTW,EAAIS,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUrB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDiB,EAAUZ,CAAW,GAEd,EAAE,SAAAV,GAAS,SAAAG,EAAA;AACpB;"}

package/dist/source/primitives/createCssTransition.js

@@ -7,7 +7,9 @@ function createCssTransition(options) {
   let timer;
   let raf1;
   let raf2;
+  let generation = 0;
   const clearTimers = () => {
+    generation++;
     if (timer !== void 0) clearTimeout(timer);
     if (raf1 !== void 0) cancelAnimationFrame(raf1);
     if (raf2 !== void 0) cancelAnimationFrame(raf2);
@@ -16,11 +18,18 @@ function createCssTransition(options) {
     raf2 = void 0;
   };
   const run = (start, active, done, duration, onEnd) => {
+    const own = generation;
     setClasses(start ?? "");
     raf1 = requestAnimationFrame(() => {
-      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));
+      raf1 = void 0;
+      if (own !== generation) return;
+      raf2 = requestAnimationFrame(() => {
+        raf2 = void 0;
+        if (own === generation) setClasses(join(start, active));
+      });
     });
     timer = setTimeout(() => {
+      clearTimers();
       if (onEnd) onEnd();
       else setClasses(done ?? "");
     }, duration);

package/dist/source/primitives/createCssTransition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/primitives/createCssTransition.ts"],
-  "sourcesContent": ["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics \u2014 a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n\n  const clearTimers = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));\n    });\n    timer = setTimeout(() => {\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],
-  "mappings": "AAAA,SAAwB,cAAc,cAAc,iBAAiB;AA6BrE,MAAM,OAAO,IAAI,UAA6C,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAQrF,SAAS,oBAAoB,SAAyD;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,QAAQ,GAAG,CAAC;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,EAAE;AAE7C,MAAI,QAAQ;AACZ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,QAAM,cAAc,MAAY;AAC9B,QAAI,UAAU,OAAW,cAAa,KAAK;AAC3C,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,YAAQ;AACR,WAAO;AACP,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,OAA2B,QAA4B,MAA0B,UAAkB,UAA6B;AAC3I,eAAW,SAAS,EAAE;AACtB,WAAO,sBAAsB,MAAM;AACjC,aAAO,sBAAsB,MAAM,WAAW,KAAK,OAAO,MAAM,CAAC,CAAC;AAAA,IACpE,CAAC;AACD,YAAQ,WAAW,MAAM;AACvB,UAAI,MAAO,OAAM;AAAA,UACZ,YAAW,QAAQ,EAAE;AAAA,IAC5B,GAAG,QAAQ;AAAA,EACb;AAEA,eAAa,MAAM;AACjB,UAAM,OAAO,QAAQ,GAAG;AACxB,gBAAY;AACZ,UAAM,MAAM,QAAQ;AAEpB,QAAI,MAAM;AACR,iBAAW,IAAI;AACf,UAAI,SAAS,CAAC,QAAQ,QAAQ;AAC5B,mBAAW,IAAI,aAAa,EAAE;AAAA,MAChC,OAAO;AACL,cAAM,YAAY,SAAS,CAAC,CAAC,QAAQ;AACrC;AAAA,UACE,YAAY,IAAI,SAAS,IAAI;AAAA,UAC7B,YAAY,IAAI,eAAe,IAAI;AAAA,UACnC,YAAa,IAAI,cAAc,IAAI,YAAa,IAAI;AAAA,UACpD,YAAa,QAAQ,QAAQ,UAAU,QAAQ,QAAQ,QAAS,QAAQ,QAAQ;AAAA,QAClF;AAAA,MACF;AAAA,IACF,WAAW,QAAQ,GAAG;AACpB,UAAI,IAAI,MAAM,IAAI,YAAY,IAAI,UAAU,QAAQ,QAAQ,MAAM,MAAM;AACtE,mBAAW,KAAK;AAChB,mBAAW,EAAE;AAAA,MACf,CAAC;AAAA,IACH;AACA,YAAQ;AAAA,EACV,CAAC;AAED,YAAU,WAAW;AAErB,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
+  "sourcesContent": ["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics \u2014 a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n *\n * Each phase settles once: when the timeout fires, the pending rAFs are\n * cancelled and can no longer rewrite the classes. At a low frame rate the\n * second rAF can land after the timeout, and it used to overwrite the done\n * class with the start/active classes, parking the node in its off-screen\n * state.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n  // Bumped whenever a phase settles or is replaced; a frame callback from an\n  // older phase sees a different value and does nothing.\n  let generation = 0;\n\n  const clearTimers = (): void => {\n    generation++;\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    const own = generation;\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf1 = undefined;\n      if (own !== generation) return;\n      raf2 = requestAnimationFrame(() => {\n        raf2 = undefined;\n        if (own === generation) setClasses(join(start, active));\n      });\n    });\n    timer = setTimeout(() => {\n      clearTimers();\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],
+  "mappings": "AAAA,SAAwB,cAAc,cAAc,iBAAiB;AA6BrE,MAAM,OAAO,IAAI,UAA6C,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAcrF,SAAS,oBAAoB,SAAyD;AAC3F,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,QAAQ,GAAG,CAAC;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,EAAE;AAE7C,MAAI,QAAQ;AACZ,MAAI;AACJ,MAAI;AACJ,MAAI;AAGJ,MAAI,aAAa;AAEjB,QAAM,cAAc,MAAY;AAC9B;AACA,QAAI,UAAU,OAAW,cAAa,KAAK;AAC3C,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,QAAI,SAAS,OAAW,sBAAqB,IAAI;AACjD,YAAQ;AACR,WAAO;AACP,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,OAA2B,QAA4B,MAA0B,UAAkB,UAA6B;AAC3I,UAAM,MAAM;AACZ,eAAW,SAAS,EAAE;AACtB,WAAO,sBAAsB,MAAM;AACjC,aAAO;AACP,UAAI,QAAQ,WAAY;AACxB,aAAO,sBAAsB,MAAM;AACjC,eAAO;AACP,YAAI,QAAQ,WAAY,YAAW,KAAK,OAAO,MAAM,CAAC;AAAA,MACxD,CAAC;AAAA,IACH,CAAC;AACD,YAAQ,WAAW,MAAM;AACvB,kBAAY;AACZ,UAAI,MAAO,OAAM;AAAA,UACZ,YAAW,QAAQ,EAAE;AAAA,IAC5B,GAAG,QAAQ;AAAA,EACb;AAEA,eAAa,MAAM;AACjB,UAAM,OAAO,QAAQ,GAAG;AACxB,gBAAY;AACZ,UAAM,MAAM,QAAQ;AAEpB,QAAI,MAAM;AACR,iBAAW,IAAI;AACf,UAAI,SAAS,CAAC,QAAQ,QAAQ;AAC5B,mBAAW,IAAI,aAAa,EAAE;AAAA,MAChC,OAAO;AACL,cAAM,YAAY,SAAS,CAAC,CAAC,QAAQ;AACrC;AAAA,UACE,YAAY,IAAI,SAAS,IAAI;AAAA,UAC7B,YAAY,IAAI,eAAe,IAAI;AAAA,UACnC,YAAa,IAAI,cAAc,IAAI,YAAa,IAAI;AAAA,UACpD,YAAa,QAAQ,QAAQ,UAAU,QAAQ,QAAQ,QAAS,QAAQ,QAAQ;AAAA,QAClF;AAAA,MACF;AAAA,IACF,WAAW,QAAQ,GAAG;AACpB,UAAI,IAAI,MAAM,IAAI,YAAY,IAAI,UAAU,QAAQ,QAAQ,MAAM,MAAM;AACtE,mBAAW,KAAK;AAChB,mBAAW,EAAE;AAAA,MACf,CAAC;AAAA,IACH;AACA,YAAQ;AAAA,EACV,CAAC;AAED,YAAU,WAAW;AAErB,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-solid",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "SolidJS port of summer-ui: strict, tree-shakeable Material-style component library sharing the @smwb/ui-styles design system.",
   "license": "MIT",
   "type": "module",