@plastic-js/tsumiki 0.1.86 → 0.1.87

package/dist/components/BottomSheet.js

@@ -51,6 +51,11 @@ var sheetClass = css({
 			to: { transform: "translateY(0)" }
 		})} var(--tsu-duration-overlay-enter) var(--tsu-ease-out)`
 	},
+	"&[data-dragging]": {
+		transition: "none",
+		animation: "none",
+		willChange: "transform"
+	},
 	"&::after": {
 		content: "\"\"",
 		position: "absolute",
@@ -61,10 +66,6 @@ var sheetClass = css({
 		background: "var(--tsu-surface)"
 	}
 });
-var draggingClass = css({
-	transition: "none",
-	animation: "none"
-});
 var grabberAreaClass = css({
 	display: "flex",
 	alignItems: "center",
@@ -121,7 +122,6 @@ var BottomSheet = (props) => {
 		"class",
 		"children"
 	]);
-	const dragging = createSignal(false);
 	const isOpen = () => read(local.open);
 	const render = createSignal(!local.lazyMount || isOpen());
 	let exitTimer = null;
@@ -133,11 +133,30 @@ var BottomSheet = (props) => {
 		return ms > 0 ? ms : DEFAULT_EXIT_MS;
 	};
 	let sheetEl = null;
+	let dragActive = false;
 	let startY = 0;
 	let currentDy = 0;
 	let lastY = 0;
 	let lastT = 0;
 	let velocity = 0;
+	let rafId = 0;
+	let pendingTranslate = null;
+	const flushTransform = () => {
+		rafId = 0;
+		if (pendingTranslate === null || !sheetEl) return;
+		sheetEl.style.transform = `translate3d(0, ${pendingTranslate}px, 0)`;
+	};
+	const scheduleTransform = (px) => {
+		pendingTranslate = px;
+		if (!rafId) rafId = requestAnimationFrame(flushTransform);
+	};
+	const cancelTransform = () => {
+		if (rafId) {
+			cancelAnimationFrame(rafId);
+			rafId = 0;
+		}
+		pendingTranslate = null;
+	};
 	const handleOpenChange = (detail) => {
 		if (!detail.open) local.onClose?.();
 		local.onOpenChange?.(detail);
@@ -157,6 +176,7 @@ var BottomSheet = (props) => {
 	});
 	onCleanup(() => {
 		if (exitTimer) clearTimeout(exitTimer);
+		cancelTransform();
 	});
 	const handleBackdropClick = () => {
 		if (read(local.dismissible)) handleOpenChange({ open: false });
@@ -167,31 +187,35 @@ var BottomSheet = (props) => {
 		lastT = e.timeStamp;
 		velocity = 0;
 		currentDy = 0;
-		dragging(true);
+		dragActive = true;
+		if (sheetEl) sheetEl.dataset.dragging = "";
 	};
 	const onGrabberPointerMove = (e) => {
-		if (!dragging()) return;
+		if (!dragActive) return;
 		const dy = e.clientY - startY;
 		const dt = e.timeStamp - lastT;
 		if (dt > 0) velocity = (e.clientY - lastY) / dt;
 		lastY = e.clientY;
 		lastT = e.timeStamp;
 		currentDy = dy;
-		const translate = dy >= 0 ? dy : dy / RUBBER_BAND_FACTOR;
-		if (sheetEl) sheetEl.style.transform = `translateY(${translate}px)`;
+		scheduleTransform(dy >= 0 ? dy : dy / RUBBER_BAND_FACTOR);
 	};
 	const settle = (shouldClose) => {
-		dragging(false);
-		if (sheetEl) sheetEl.style.transform = "";
+		dragActive = false;
+		cancelTransform();
+		if (sheetEl) {
+			delete sheetEl.dataset.dragging;
+			sheetEl.style.transform = "";
+		}
 		if (shouldClose && read(local.dismissible)) handleOpenChange({ open: false });
 	};
 	const onGrabberPointerUp = () => {
-		if (!dragging()) return;
+		if (!dragActive) return;
 		const sheetHeight = sheetEl?.offsetHeight || 1;
 		settle(currentDy > sheetHeight * CLOSE_DISTANCE_RATIO || currentDy > 0 && velocity > CLOSE_VELOCITY);
 	};
 	const onGrabberPointerCancel = () => {
-		if (!dragging()) return;
+		if (!dragActive) return;
 		settle(false);
 	};
 	const showGrabber = read(local.draggable);
@@ -226,11 +250,7 @@ var BottomSheet = (props) => {
 		setProp(_el0, "ref", (el) => {
 			sheetEl = el;
 		});
-		setProp(_el0, "className", () => [
-			sheetClass,
-			dragging() && draggingClass,
-			local.class
-		].filter(Boolean).join(" "));
+		setProp(_el0, "className", () => [sheetClass, local.class].filter(Boolean).join(" "));
 		setProp(_el0, "data-open", () => read(local.open) ? "" : void 0);
 		return _el0;
 	}] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plastic-js/tsumiki",
-  "version": "0.1.86",
+  "version": "0.1.87",
   "description": "A UI component library for Plastic JS.",
   "license": "MIT",
   "author": "tigre",