lilact 0.10.2 → 0.11.1

package/src/transition.jsx

@@ -37,9 +37,9 @@ const ENTERING =  "entering";
 const ENTERED =   "entered";
 const EXITING =   "exiting";
 
-import {setTimeout, clearTimeout} from "./timers.jsx"
-import {Children} from "./misc.jsx"
-import {useEffect} from "./hooks.jsx"
+import { setTimeout, clearTimeout} from "./timers.jsx"
+import { Children } from "./misc.jsx"
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "./hooks.jsx"
 
 /**
  * Transition component that manages enter/exit lifecycle and calls callbacks based on state changes.
@@ -200,7 +200,7 @@ export function Transition({
  */
 export function CSSTransition({
 	in: inProp,
-	timeout = defaultTransitionTimeout,
+	timeout = Lilact.defaultTransitionTimeout,
 	classNames = "fade",
 	mountOnEnter = false,
 	unmountOnExit = false,
@@ -244,6 +244,182 @@ export function CSSTransition({
 }
 
 
+
+/**
+ * Switches between keyed children with `CSSTransition`.
+ * Ensures each child key gets its own `CSSTransition` instance to avoid state loss.
+ *
+ * @param {object} props
+ * @param {Array} props.children
+ *   The set of children to switch between. Each child should have a stable `key`
+ *   (or your `key` will fall back to its index).
+ * @param {*} props.activeKey
+ *   The key of the currently active child.
+ * @param {"out-in" | "in-out"} [props.mode="out-in"]
+ *   Controls sequencing when `activeKey` changes:
+ *   - `"out-in"`: outgoing transitions out first, incoming transitions in after exit completes.
+ *   - `"in-out"`: incoming transitions in first, outgoing transitions out after the incoming finishes entering
+ *     (relies on `onEntered`).
+ * @param {number} [props.timeout=Lilact.defaultTransitionTimeout]
+ *   Transition timeout passed to each `CSSTransition`.
+ * @param {string} [props.classNames="switch"]
+ *   Base className(s) used by `CSSTransition` to apply enter/exit classes.
+ * @param {boolean} [props.mountOnEnter=false]
+ *   Whether to mount the transitioning child only when it begins entering.
+ * @param {boolean} [props.unmountOnExit=false]
+ *   Whether to unmount the child after it finishes exiting.
+ * @param {boolean} [props.appear=false]
+ *   Whether to run the initial transition on first mount.
+ *
+ * @param {(isAppearing: boolean) => void} [props.onExited]
+ *   Called when the outgoing child finishes exiting.
+ * @param {(isAppearing: boolean) => void} [props.onEnter]
+ *   Called when a child begins entering.
+ * @param {(isAppearing: boolean) => void} [props.onExiting]
+ *   Called when a child begins exiting.
+ * @param {(isAppearing: boolean) => void} [props.onEntered]
+ *   Called when a child finishes entering. Used to implement `"in-out"` sequencing.
+ *
+ * @param {object} [props.csstProps]
+ *   Any additional props are forwarded to each `CSSTransition` instance.
+ */
+
+
+export function SwitchTransition({
+  children,
+  activeKey,
+  mode = "out-in", // "out-in" | "in-out"
+
+  timeout = Lilact.defaultTransitionTimeout,
+  classNames = "switch",
+
+  mountOnEnter = false,
+  unmountOnExit = false,
+  appear = false,
+
+  // callbacks (optional)
+  onExited,
+  onEnter,
+  onExiting,
+  onEntered,
+
+  ...csstProps
+}) {
+  const childArray = useMemo(() => Children.toArray(children), [children]);
+
+  // Outgoing key (the one that should exit) and phase flags
+  const [exitingKey, setExitingKey] = useState(null);
+  const [exitStarted, setExitStarted] = useState(false);
+
+  // Controls whether the incoming (activeKey) is currently "in"
+  const [enterAllowed, setEnterAllowed] = useState(true);
+
+  // Refs to avoid stale closures in callbacks
+  const prevKeyRef = useRef(activeKey);
+  const activeKeyRef = useRef(activeKey);
+  const exitingKeyRef = useRef(exitingKey);
+
+  useLayoutEffect(() => {
+    activeKeyRef.current = activeKey;
+  }, [activeKey]);
+
+  useLayoutEffect(() => {
+    exitingKeyRef.current = exitingKey;
+  }, [exitingKey]);
+
+  useLayoutEffect(() => {
+    const prevKey = prevKeyRef.current;
+    if (prevKey === activeKey) return;
+
+    prevKeyRef.current = activeKey;
+
+    // Start a new switch
+    setExitingKey(prevKey);
+
+    if (mode === "out-in") {
+      // Incoming blocked; outgoing should exit immediately.
+      setEnterAllowed(false);
+      setExitStarted(true); // outgoing in: true -> false => triggers exit
+    } else {
+      // Incoming allowed immediately; outgoing should exit only after incoming has entered.
+      setEnterAllowed(true);
+      setExitStarted(false); // outgoing stays in:true until we flip it later
+    }
+  }, [activeKey, mode]);
+
+  const handleExited = (key) => (node, isAppearing) => {
+    if (typeof onExited === "function") onExited(node, isAppearing);
+
+    if (key === exitingKeyRef.current) {
+      setExitingKey(null);
+
+      // out-in: once outgoing is fully exited, allow incoming to start
+      if (mode === "out-in") {
+        setExitStarted(false);
+        setEnterAllowed(true);
+      }
+      // in-out: incoming already entered; just clean up outgoing
+      if (mode === "in-out") {
+        setExitStarted(false);
+      }
+    }
+  };
+
+  const handleEntered = (key) => (node, isAppearing) => {
+    if (typeof onEntered === "function") onEntered(node, isAppearing);
+
+    if (mode === "in-out") {
+      // Only start outgoing exit when the CURRENT incoming (activeKey) finishes entering.
+      if (key === activeKeyRef.current && exitingKeyRef.current != null) {
+        setExitStarted(true); // outgoing in:true -> false => triggers exit
+      }
+    }
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      {childArray.map((child, index) => {
+        const key = child?.props?.key || index;
+
+        const isIncoming = key === activeKey;
+        const isOutgoing = key === exitingKey;
+
+        // Core rule:
+        // - Incoming: in = enterAllowed
+        // - Outgoing: in = !exitStarted
+        // - Others: in = false
+        const inProp = isIncoming
+          ? enterAllowed
+          : isOutgoing
+            ? !exitStarted
+            : false;
+
+        return (
+          <CSSTransition
+            key={key}
+            in={inProp}
+            timeout={timeout}
+            classNames={classNames}
+            mountOnEnter={mountOnEnter}
+            unmountOnExit={unmountOnExit}
+            appear={appear}
+            onEnter={onEnter}
+            onExiting={onExiting}
+            onEntered={handleEntered(key)}
+            onExited={handleExited(key)}
+            {...csstProps}
+          >
+            <div style={{ position: "absolute", inset: 0 }}>
+              {child}
+            </div>
+          </CSSTransition>
+        );
+      })}
+    </div>
+  );
+}
+
+
 /**
  * Lilact doesn't need TransitionGroup, so it is the same as a fragment.
  * In Lilact all the transitions and timeouts are automatically grouped.

package/docs/functions/misc.classNames.html

@@ -1,3 +0,0 @@
-<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>classNames | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/misc.html">misc</a></li><li><a href="" aria-current="page">classNames</a></li></ul><h1>Function classNames</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="classnames"><span class="tsd-kind-call-signature">classNames</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">classes</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><a href="#classnames" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Utility for applying one or more class names to an element.</p>
-</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">classes</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>One or more class name values to combine.</p>
-</div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4><aside class="tsd-sources"><ul><li>Defined in misc.js:200</li></ul></aside></div></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>