@ada-cx/lovelace 1.3.0 → 1.5.0

package/dist/utils/animation.d.ts

@@ -0,0 +1,28 @@
+import type { RefObject } from "react";
+/**
+ * True until the element's entrance animation finishes. Style the "from" state
+ * off `[data-entering]`; removing the attribute is what starts the transition.
+ */
+export declare function useEnterAnimation(ref: RefObject<HTMLElement | null>): boolean;
+/**
+ * True while the element plays its exit animation after `isPresent` goes false.
+ * Keep the element mounted until it returns false, and style the "to" state off
+ * `[data-exiting]`.
+ */
+export declare function useExitAnimation(ref: RefObject<HTMLElement | null>, isPresent: boolean): boolean;
+/**
+ * The height to render the element at while it arrives or leaves, or null once it
+ * is settled and its own content should size it.
+ *
+ * A surface whose box already holds its full height reports the space before it
+ * arrives and keeps it after it leaves: whatever sits below jumps a full height at
+ * once, then waits out the travel against a gap. Animating the height moves that
+ * content in step with the surface instead.
+ *
+ * The height has to be measured, since a transition cannot run from `auto`. Each
+ * direction sets its start value in the commit that changed `isPresent`, then its
+ * end value on the next frame, so the browser has something to interpolate from.
+ * An arriving surface drops back to `null` once its transition ends, so a later
+ * change to its content can size it again.
+ */
+export declare function useSlideHeight(ref: RefObject<HTMLElement | null>, isPresent: boolean): number | null;

package/dist/utils/animation.js

@@ -0,0 +1,68 @@
+import { readPrefersReducedMotion as e } from "../hooks/usePrefersReducedMotion.js";
+import { useCallback as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { flushSync as a } from "react-dom";
+//#region src/utils/animation.ts
+function o(e, t, r) {
+	n(() => {
+		let n = e.current;
+		if (!t || !n) return;
+		if (!("getAnimations" in n)) {
+			r();
+			return;
+		}
+		let i = n.getAnimations();
+		if (i.length === 0) {
+			r();
+			return;
+		}
+		let o = !1;
+		return Promise.allSettled(i.map((e) => e.finished)).then(() => {
+			o || a(r);
+		}), () => {
+			o = !0;
+		};
+	}, [
+		e,
+		t,
+		r
+	]);
+}
+function s(e) {
+	let [n, r] = i(!0);
+	return o(e, n, t(() => r(!1), [])), n;
+}
+function c(e, n) {
+	let [r, a] = i(n ? "present" : "exited");
+	n && r !== "present" ? a("present") : !n && r === "present" && a("exiting");
+	let s = r === "exiting";
+	return o(e, s, t(() => a((e) => e === "exiting" ? "exited" : e), [])), s;
+}
+function l(t, a) {
+	let [o, s] = i(null), c = r(null);
+	return n(() => {
+		let n = t.current;
+		if (!n || c.current === a) return;
+		if (c.current = a, e()) {
+			s(null);
+			return;
+		}
+		let r = n.offsetHeight;
+		if (r === 0) {
+			s(null);
+			return;
+		}
+		s(a ? 0 : r);
+		let i = requestAnimationFrame(() => s(a ? r : 0));
+		if (!a) return () => cancelAnimationFrame(i);
+		let o = (e) => {
+			e.propertyName === "height" && s(null);
+		};
+		return n.addEventListener("transitionend", o), () => {
+			cancelAnimationFrame(i), n.removeEventListener("transitionend", o);
+		};
+	}, [t, a]), o;
+}
+//#endregion
+export { s as useEnterAnimation, c as useExitAnimation, l as useSlideHeight };
+
+//# sourceMappingURL=animation.js.map

package/dist/utils/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","names":[],"sources":["../../src/utils/animation.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { readPrefersReducedMotion } from \"../hooks/usePrefersReducedMotion.js\";\n\n/**\n * Runs `onEnd` once every animation on the element has settled. Modelled on\n * react-aria's overlay animation handling, which is private API — RAC drives\n * `data-entering`/`data-exiting` for us on Dialog and Sheet, but its Toast does\n * not, so lovelace needs its own copy for the toast surfaces.\n *\n * Two cases resolve immediately and both are load-bearing: jsdom has no\n * `getAnimations`, and an element whose transition has not started yet reports\n * none. The latter is what removes `data-entering` and lets the transition run.\n */\nfunction useAnimationEnd(\n\tref: RefObject<HTMLElement | null>,\n\tisActive: boolean,\n\tonEnd: () => void,\n) {\n\tuseLayoutEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!isActive || !element) {\n\t\t\treturn;\n\t\t}\n\t\tif (!(\"getAnimations\" in element)) {\n\t\t\tonEnd();\n\t\t\treturn;\n\t\t}\n\t\tconst animations = element.getAnimations();\n\t\tif (animations.length === 0) {\n\t\t\tonEnd();\n\t\t\treturn;\n\t\t}\n\t\tlet cancelled = false;\n\t\tPromise.allSettled(animations.map((animation) => animation.finished)).then(\n\t\t\t() => {\n\t\t\t\tif (!cancelled) {\n\t\t\t\t\tflushSync(onEnd);\n\t\t\t\t}\n\t\t\t},\n\t\t);\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [ref, isActive, onEnd]);\n}\n\n/**\n * True until the element's entrance animation finishes. Style the \"from\" state\n * off `[data-entering]`; removing the attribute is what starts the transition.\n */\nexport function useEnterAnimation(ref: RefObject<HTMLElement | null>): boolean {\n\tconst [isEntering, setIsEntering] = useState(true);\n\tuseAnimationEnd(\n\t\tref,\n\t\tisEntering,\n\t\tuseCallback(() => setIsEntering(false), []),\n\t);\n\treturn isEntering;\n}\n\n/**\n * True while the element plays its exit animation after `isPresent` goes false.\n * Keep the element mounted until it returns false, and style the \"to\" state off\n * `[data-exiting]`.\n */\nexport function useExitAnimation(\n\tref: RefObject<HTMLElement | null>,\n\tisPresent: boolean,\n): boolean {\n\tconst [phase, setPhase] = useState<\"present\" | \"exiting\" | \"exited\">(\n\t\tisPresent ? \"present\" : \"exited\",\n\t);\n\n\t// Derive during render rather than in an effect so the exit styles land in the\n\t// same commit that dropped `isPresent` — a frame of the entered state would\n\t// otherwise paint first and the transition would start from the wrong place.\n\tif (isPresent && phase !== \"present\") {\n\t\tsetPhase(\"present\");\n\t} else if (!isPresent && phase === \"present\") {\n\t\tsetPhase(\"exiting\");\n\t}\n\n\tconst isExiting = phase === \"exiting\";\n\tuseAnimationEnd(\n\t\tref,\n\t\tisExiting,\n\t\tuseCallback(\n\t\t\t() => setPhase((current) => (current === \"exiting\" ? \"exited\" : current)),\n\t\t\t[],\n\t\t),\n\t);\n\treturn isExiting;\n}\n\n/**\n * The height to render the element at while it arrives or leaves, or null once it\n * is settled and its own content should size it.\n *\n * A surface whose box already holds its full height reports the space before it\n * arrives and keeps it after it leaves: whatever sits below jumps a full height at\n * once, then waits out the travel against a gap. Animating the height moves that\n * content in step with the surface instead.\n *\n * The height has to be measured, since a transition cannot run from `auto`. Each\n * direction sets its start value in the commit that changed `isPresent`, then its\n * end value on the next frame, so the browser has something to interpolate from.\n * An arriving surface drops back to `null` once its transition ends, so a later\n * change to its content can size it again.\n */\nexport function useSlideHeight(\n\tref: RefObject<HTMLElement | null>,\n\tisPresent: boolean,\n): number | null {\n\tconst [height, setHeight] = useState<number | null>(null);\n\tconst settledRef = useRef<boolean | null>(null);\n\n\tuseLayoutEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element || settledRef.current === isPresent) {\n\t\t\treturn;\n\t\t}\n\t\tsettledRef.current = isPresent;\n\n\t\t// The surface only transitions its height under `no-preference`, so pinning\n\t\t// a measured height here would never hear the `transitionend` that hands\n\t\t// sizing back, and later, longer copy would be clipped for good.\n\t\tif (readPrefersReducedMotion()) {\n\t\t\tsetHeight(null);\n\t\t\treturn;\n\t\t}\n\n\t\t// A surface measured inside a hidden frame reports 0. Pinning that would clip\n\t\t// it shut for good: the height never changes, so no transition starts and no\n\t\t// `transitionend` arrives to hand sizing back.\n\t\tconst content = element.offsetHeight;\n\t\tif (content === 0) {\n\t\t\tsetHeight(null);\n\t\t\treturn;\n\t\t}\n\t\tsetHeight(isPresent ? 0 : content);\n\t\tconst frame = requestAnimationFrame(() =>\n\t\t\tsetHeight(isPresent ? content : 0),\n\t\t);\n\n\t\tif (!isPresent) {\n\t\t\treturn () => cancelAnimationFrame(frame);\n\t\t}\n\t\t// Hand sizing back to the content once it is in. A leaving surface keeps its\n\t\t// zero height instead — it is about to unmount.\n\t\tconst handleEnd = (event: TransitionEvent) => {\n\t\t\tif (event.propertyName === \"height\") {\n\t\t\t\tsetHeight(null);\n\t\t\t}\n\t\t};\n\t\telement.addEventListener(\"transitionend\", handleEnd);\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\telement.removeEventListener(\"transitionend\", handleEnd);\n\t\t};\n\t}, [ref, isPresent]);\n\n\treturn height;\n}\n"],"mappings":";;;;AAeA,SAAS,EACR,GACA,GACA,GACC;AACD,SAAsB;EACrB,IAAM,IAAU,EAAI;AACpB,MAAI,CAAC,KAAY,CAAC,EACjB;AAED,MAAI,EAAE,mBAAmB,IAAU;AAClC,MAAO;AACP;;EAED,IAAM,IAAa,EAAQ,eAAe;AAC1C,MAAI,EAAW,WAAW,GAAG;AAC5B,MAAO;AACP;;EAED,IAAI,IAAY;AAQhB,SAPA,QAAQ,WAAW,EAAW,KAAK,MAAc,EAAU,SAAS,CAAC,CAAC,WAC/D;AACL,GAAK,KACJ,EAAU,EAAM;IAGlB,QACY;AACZ,OAAY;;IAEX;EAAC;EAAK;EAAU;EAAM,CAAC;;AAO3B,SAAgB,EAAkB,GAA6C;CAC9E,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAK;AAMlD,QALA,EACC,GACA,GACA,QAAkB,EAAc,GAAM,EAAE,EAAE,CAAC,CAC3C,EACM;;AAQR,SAAgB,EACf,GACA,GACU;CACV,IAAM,CAAC,GAAO,KAAY,EACzB,IAAY,YAAY,SACxB;AAKD,CAAI,KAAa,MAAU,YAC1B,EAAS,UAAU,GACT,CAAC,KAAa,MAAU,aAClC,EAAS,UAAU;CAGpB,IAAM,IAAY,MAAU;AAS5B,QARA,EACC,GACA,GACA,QACO,GAAU,MAAa,MAAY,YAAY,WAAW,EAAS,EACzE,EAAE,CACF,CACD,EACM;;AAkBR,SAAgB,EACf,GACA,GACgB;CAChB,IAAM,CAAC,GAAQ,KAAa,EAAwB,KAAK,EACnD,IAAa,EAAuB,KAAK;AA+C/C,QA7CA,QAAsB;EACrB,IAAM,IAAU,EAAI;AACpB,MAAI,CAAC,KAAW,EAAW,YAAY,EACtC;AAOD,MALA,EAAW,UAAU,GAKjB,GAA0B,EAAE;AAC/B,KAAU,KAAK;AACf;;EAMD,IAAM,IAAU,EAAQ;AACxB,MAAI,MAAY,GAAG;AAClB,KAAU,KAAK;AACf;;AAED,IAAU,IAAY,IAAI,EAAQ;EAClC,IAAM,IAAQ,4BACb,EAAU,IAAY,IAAU,EAAE,CAClC;AAED,MAAI,CAAC,EACJ,cAAa,qBAAqB,EAAM;EAIzC,IAAM,KAAa,MAA2B;AAC7C,GAAI,EAAM,iBAAiB,YAC1B,EAAU,KAAK;;AAIjB,SADA,EAAQ,iBAAiB,iBAAiB,EAAU,QACvC;AAEZ,GADA,qBAAqB,EAAM,EAC3B,EAAQ,oBAAoB,iBAAiB,EAAU;;IAEtD,CAAC,GAAK,EAAU,CAAC,EAEb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ada-cx/lovelace",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Ada's messaging design system primitives: React Aria Components behavior, vanilla-extract styling, Figma-generated design tokens.",
   "license": "ISC",
   "type": "module",
@@ -52,7 +52,8 @@
     "@vanilla-extract/css": "^1.20.1",
     "@vanilla-extract/recipes": "^0.5.7",
     "react-aria": "^3.48.0",
-    "react-aria-components": "^1.15.1"
+    "react-aria-components": "^1.15.1",
+    "react-stately": "^3.46.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",