@plastic-js/tsumiki 0.1.42 → 0.1.44

package/dist/components/BottomSheet.js

@@ -1,7 +1,7 @@
 import Portal_default from "./Portal.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
-import { css } from "@emotion/css";
-import { createEffect, createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
+import { css, keyframes } from "@emotion/css";
+import { Either, createEffect, createSignal, mergeProps as mergeProps$1, onCleanup, splitProps } from "@plastic-js/plastic";
 //#region src/components/BottomSheet.jsx
 var _tmpl3 = template("<div data-part=\"grabber\"><div></div></div>");
 var _tmpl2 = template("<div role=\"dialog\" aria-modal=\"true\" aria-label=\"BottomSheet\"><!><div data-part=\"content\"></div></div>");
@@ -45,7 +45,11 @@ var sheetClass = css({
 	"&[data-open]": {
 		transform: "translateY(0)",
 		pointerEvents: "auto",
-		transition: "transform var(--tsu-transition-overlay-enter)"
+		transition: "transform var(--tsu-transition-overlay-enter)",
+		animation: `${keyframes({
+			from: { transform: "translateY(100%)" },
+			to: { transform: "translateY(0)" }
+		})} var(--tsu-duration-overlay-enter) var(--tsu-ease-out)`
 	},
 	"&::after": {
 		content: "\"\"",
@@ -57,7 +61,10 @@ var sheetClass = css({
 		background: "var(--tsu-surface)"
 	}
 });
-var draggingClass = css({ transition: "none" });
+var draggingClass = css({
+	transition: "none",
+	animation: "none"
+});
 var grabberAreaClass = css({
 	display: "flex",
 	alignItems: "center",
@@ -82,11 +89,21 @@ var contentClass = css({
 	minHeight: 0
 });
 var read = (v) => typeof v === "function" ? v() : v;
+var DEFAULT_EXIT_MS = 200;
+var toMs = (s) => {
+	const v = String(s).trim().toLowerCase();
+	if (!v) return 0;
+	if (v.endsWith("ms")) return parseFloat(v) || 0;
+	if (v.endsWith("s")) return (parseFloat(v) || 0) * 1e3;
+	return parseFloat(v) || 0;
+};
 var BottomSheet = (props) => {
 	const [local] = splitProps(mergeProps$1({
 		dismissible: true,
 		backdropBlur: true,
-		draggable: true
+		draggable: true,
+		lazyMount: true,
+		unmountOnExit: true
 	}, props), [
 		"open",
 		"onOpen",
@@ -98,10 +115,22 @@ var BottomSheet = (props) => {
 		"backdropClassName",
 		"backdropStyle",
 		"contentClassName",
+		"lazyMount",
+		"unmountOnExit",
 		"class",
 		"children"
 	]);
 	const dragging = createSignal(false);
+	const isOpen = () => read(local.open);
+	const render = createSignal(!local.lazyMount || isOpen());
+	let exitTimer = null;
+	const measureExitDuration = () => {
+		const el = sheetEl;
+		if (!el) return DEFAULT_EXIT_MS;
+		const duration = getComputedStyle(el).transitionDuration;
+		const ms = String(duration).split(",").reduce((max, d) => Math.max(max, toMs(d)), 0);
+		return ms > 0 ? ms : DEFAULT_EXIT_MS;
+	};
 	let sheetEl = null;
 	let startY = 0;
 	let currentDy = 0;
@@ -112,13 +141,22 @@ var BottomSheet = (props) => {
 		if (!detail.open) local.onClose?.();
 		local.onOpenChange?.(detail);
 	};
-	const isOpen = () => read(local.open);
 	let prevOpen = isOpen();
 	createEffect(() => {
 		const cur = isOpen();
 		if (cur && !prevOpen) local.onOpen?.();
+		if (cur) {
+			if (exitTimer) {
+				clearTimeout(exitTimer);
+				exitTimer = null;
+			}
+			render(true);
+		} else if (prevOpen && local.unmountOnExit && render()) exitTimer = setTimeout(() => render(false), measureExitDuration());
 		prevOpen = cur;
 	});
+	onCleanup(() => {
+		if (exitTimer) clearTimeout(exitTimer);
+	});
 	const handleBackdropClick = () => {
 		if (read(local.dismissible)) handleOpenChange({ open: false });
 	};
@@ -156,45 +194,49 @@ var BottomSheet = (props) => {
 		settle(false);
 	};
 	const showGrabber = read(local.draggable);
-	return jsx(Portal_default, mergeProps({ children: [(() => {
-		const _el0 = _tmpl.cloneNode(true);
-		setProp(_el0, "className", () => [
-			backdropClass,
-			local.backdropBlur && backdropBlurClass,
-			local.backdropClassName
-		].filter(Boolean).join(" "));
-		setProp(_el0, "style", () => local.backdropStyle);
-		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
-		setProp(_el0, "onClick", () => handleBackdropClick);
-		return _el0;
-	})(), () => {
-		const _el0 = _tmpl2.cloneNode(true);
-		const _el1 = _el0.firstChild;
-		const _el2 = _el0.firstChild.nextSibling;
-		insert(_el0, () => showGrabber && (() => {
-			const _el0 = _tmpl3.cloneNode(true);
+	return jsx(Either, mergeProps({
+		condition: () => render(),
+		trueBranch: () => jsx(Portal_default, mergeProps({ children: [(() => {
+			const _el0 = _tmpl.cloneNode(true);
+			setProp(_el0, "className", () => [
+				backdropClass,
+				local.backdropBlur && backdropBlurClass,
+				local.backdropClassName
+			].filter(Boolean).join(" "));
+			setProp(_el0, "style", () => local.backdropStyle);
+			setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
+			setProp(_el0, "onClick", () => handleBackdropClick);
+			return _el0;
+		})(), () => {
+			const _el0 = _tmpl2.cloneNode(true);
 			const _el1 = _el0.firstChild;
-			setProp(_el1, "className", () => grabberClass);
-			setProp(_el0, "className", () => grabberAreaClass);
-			setProp(_el0, "onPointerDown", () => onGrabberPointerDown);
-			setProp(_el0, "onPointerMove", () => onGrabberPointerMove);
-			setProp(_el0, "onPointerUp", () => onGrabberPointerUp);
-			setProp(_el0, "onPointerCancel", () => onGrabberPointerCancel);
+			const _el2 = _el0.firstChild.nextSibling;
+			insert(_el0, () => showGrabber && (() => {
+				const _el0 = _tmpl3.cloneNode(true);
+				const _el1 = _el0.firstChild;
+				setProp(_el1, "className", () => grabberClass);
+				setProp(_el0, "className", () => grabberAreaClass);
+				setProp(_el0, "onPointerDown", () => onGrabberPointerDown);
+				setProp(_el0, "onPointerMove", () => onGrabberPointerMove);
+				setProp(_el0, "onPointerUp", () => onGrabberPointerUp);
+				setProp(_el0, "onPointerCancel", () => onGrabberPointerCancel);
+				return _el0;
+			})(), _el1);
+			insert(_el2, () => local.children);
+			setProp(_el2, "className", () => [contentClass, local.contentClassName].filter(Boolean).join(" "));
+			setProp(_el0, "ref", (el) => {
+				sheetEl = el;
+			});
+			setProp(_el0, "className", () => [
+				sheetClass,
+				dragging() && draggingClass,
+				local.class
+			].filter(Boolean).join(" "));
+			setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
 			return _el0;
-		})(), _el1);
-		insert(_el2, () => local.children);
-		setProp(_el2, "className", () => [contentClass, local.contentClassName].filter(Boolean).join(" "));
-		setProp(_el0, "ref", (el) => {
-			sheetEl = el;
-		});
-		setProp(_el0, "className", () => [
-			sheetClass,
-			dragging() && draggingClass,
-			local.class
-		].filter(Boolean).join(" "));
-		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
-		return _el0;
-	}] }));
+		}] })),
+		falseBranch: () => null
+	}));
 };
 //#endregion
 export { BottomSheet as default };

package/dist/components/Dialog.js

@@ -3,8 +3,8 @@ import Button from "./Button.js";
 import Icon from "./Icon.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css, keyframes } from "@emotion/css";
-import { Dialog } from "@plastic-js/ark";
-import { mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
+import { Dialog, useDialogContext } from "@plastic-js/ark";
+import { Either, mergeProps as mergeProps$2, splitProps } from "@plastic-js/plastic";
 //#region src/components/Dialog.jsx
 var _tmpl4 = template("<div data-scope=\"dialog\" data-part=\"footer\"></div>");
 var _tmpl3 = template("<div data-scope=\"dialog\" data-part=\"body\"></div>");
@@ -156,6 +156,14 @@ var positiveBtnClass = css({
 });
 var read = (v) => typeof v === "function" ? v() : v;
 var warnedSheetNoTitle = false;
+var DialogPortal = (props) => {
+	const dialog = useDialogContext();
+	return jsx(Either, mergeProps({
+		condition: () => !dialog()?.unmounted,
+		trueBranch: () => jsx(Portal_default, mergeProps({ children: () => props.children })),
+		falseBranch: () => null
+	}));
+};
 var Dialog$1 = (props) => {
 	const [local, rest] = splitProps(mergeProps$2({
 		mode: "sheet",
@@ -273,7 +281,7 @@ var Dialog$1 = (props) => {
 			return local.closeOnInteractOutside;
 		},
 		modal: true
-	}, rest, { children: jsx(Portal_default, mergeProps({ children: [jsx(Dialog.Backdrop, mergeProps({ className: isSheet ? backdropSheetClass : backdropModalClass })), jsx(Dialog.Positioner, mergeProps({
+	}, rest, { children: jsx(DialogPortal, mergeProps({ children: [jsx(Dialog.Backdrop, mergeProps({ className: isSheet ? backdropSheetClass : backdropModalClass })), jsx(Dialog.Positioner, mergeProps({
 		className: isSheet ? positionerSheetClass : positionerModalClass,
 		children: jsx(Dialog.Content, mergeProps({
 			get className() {

package/docs/api.md

@@ -643,6 +643,8 @@ Passthrough: Ark `Root` props (`value`, `min`, `max`, …).
 
 > **Note:** Dialog never renders a grabber / drag handle in either mode (`modal` or `sheet`). Drag-to-dismiss and the grabber are exclusive to [`BottomSheet`](#bottomsheet) — this is a deliberate difference between the two components.
 
+> **Note:** Dialog has **enter-only** animations — its content unmounts immediately on close (no exit transition). [`BottomSheet`](#bottomsheet) is the opposite: it stays mounted through its exit transition before the nodes are removed. If you need a closing animation, use `BottomSheet`.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `mode` | `string` | `'sheet'` | `'modal'` (centered) or `'sheet'` (bottom sheet). |
@@ -763,14 +765,16 @@ A free-form presentation layer: a backdrop, an optional drag grabber, and a scro
 
 **Exports:** `BottomSheet` · no `.origin`
 
-**Rendered DOM parts:** exactly three — `data-part="backdrop"`, `data-part="grabber"` (only when `draggable`), and `data-part="content"`. BottomSheet has no focus trap or Escape-to-close — use [`Dialog`](#dialog) when those are required.
+**Rendered DOM parts:** exactly three — `data-part="backdrop"`, `data-part="grabber"` (only when `draggable`), and `data-part="content"`. With the default `lazyMount: true` + `unmountOnExit: true`, a closed sheet that was never opened renders **zero** nodes; after close it stays mounted only long enough for the exit transition, then unmounts. BottomSheet has no focus trap or Escape-to-close — use [`Dialog`](#dialog) when those are required.
 
 > **Design decision:** `content` is a pure container — `display: flex; flex-direction: column` with `padding: 0 24px` only. It has **no vertical padding, no margin, and no scrolling**. Spacing and scrolling are entirely consumer-owned: build your own layout inside `children` (the sheet caps height at `70vh`, so a scrollable section can be a `flex: 1; min-height: 0; overflow-y: auto` child).
 
 | Prop | Type | Default | Description |
-|---|---|---|---|
+|---|---|---|---|---|
 | `open` | `boolean \| (() => boolean)` | — | **Required** controlled open state. |
 | `onOpenChange` | `({ open }) => void` | — | Fired on open/close; sync your state here. |
+| `lazyMount` | `boolean` | `true` | Mount only after the first open. A closed sheet that was never opened renders **no** DOM nodes. |
+| `unmountOnExit` | `boolean` | `true` | Unmount after close, once the exit transition has played (the close delay is measured from the sheet's computed `transition-duration`, `200ms` fallback). When `false`, the sheet stays mounted and is hidden with CSS. |
 | `dismissible` | `boolean` | `true` | Allow dismiss via backdrop / drag. |
 | `draggable` | `boolean` | `true` | Show the grabber and enable drag-to-dismiss. |
 | `backdropBlur` | `boolean` | `true` | Blur the backdrop. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",
@@ -50,7 +50,10 @@
     "prepublishOnly": "npm run build",
     "preview": "vite preview",
     "theme": "node scripts/theme.js",
-    "e2e:repro": "node e2e/dlgcbx-repro.mjs"
+    "e2e:repro": "node e2e/dlgcbx-repro.mjs",
+    "e2e:bottomsheet": "node e2e/bottomsheet-presence-verify.mjs",
+    "e2e:dialog-portal": "node e2e/dialog-portal-verify.mjs",
+    "e2e:bottomsheet-animation": "node e2e/bottomsheet-animation-verify.mjs"
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",