@plastic-js/tsumiki 0.1.64 → 0.1.66

package/dist/components/BottomSheet.js

@@ -1,5 +1,5 @@
 import Portal_default from "./Portal.js";
-import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
+import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 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
@@ -102,7 +102,8 @@ var BottomSheet = (props) => {
 		backdropBlur: true,
 		draggable: true,
 		lazyMount: true,
-		unmountOnExit: true
+		unmountOnExit: true,
+		portal: true
 	}, props), [
 		"open",
 		"onOpen",
@@ -116,6 +117,7 @@ var BottomSheet = (props) => {
 		"contentClassName",
 		"lazyMount",
 		"unmountOnExit",
+		"portal",
 		"class",
 		"children"
 	]);
@@ -193,47 +195,48 @@ var BottomSheet = (props) => {
 		settle(false);
 	};
 	const showGrabber = read(local.draggable);
-	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 renderOverlay = () => jsx(Fragment, { 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);
 			const _el1 = _el0.firstChild;
-			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);
+			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;
+	}] });
+	return jsx(Either, mergeProps({
+		condition: () => render(),
+		trueBranch: () => read(local.portal) ? jsx(Portal_default, mergeProps({ children: () => renderOverlay() })) : renderOverlay(),
 		falseBranch: () => null
 	}));
 };

package/dist/components/DatePicker.js

@@ -281,7 +281,8 @@ var DatePicker = (props = {}) => {
 		size: "md",
 		disabled: false,
 		intent: "default",
-		invalid: false
+		invalid: false,
+		closeOnBackdrop: true
 	}, props), [
 		"value",
 		"onValueChange",
@@ -290,7 +291,8 @@ var DatePicker = (props = {}) => {
 		"size",
 		"intent",
 		"invalid",
-		"className"
+		"className",
+		"closeOnBackdrop"
 	]);
 	const open = createSignal(false);
 	const resolveValue = () => {
@@ -396,7 +398,7 @@ var DatePicker = (props = {}) => {
 			const _el22 = _el21.firstChild;
 			const _el23 = _el21.firstChild.nextSibling;
 			setProp(_el1, "className", () => backdropClass);
-			setProp(_el1, "onClick", () => cancel);
+			setProp(_el1, "onClick", () => read(local.closeOnBackdrop) ? cancel : void 0);
 			setProp(_el4, "className", () => toolbarBtnClass);
 			setProp(_el4, "onClick", () => cancel);
 			setProp(_el5, "className", () => toolbarTitleClass);

package/dist/components/Select.js

@@ -2,7 +2,8 @@ import BottomSheet from "./BottomSheet.js";
 import Icon from "./Icon.js";
 import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
-import { Loop, createContext, createEffect, createSignal, mergeProps as mergeProps$1, splitProps, useContext } from "@plastic-js/plastic";
+import { useDialogContext } from "@plastic-js/ark";
+import { Loop, createContext, createEffect, createSignal, mergeProps as mergeProps$2, splitProps, useContext } from "@plastic-js/plastic";
 //#region src/components/Select.jsx
 var _tmpl3 = template("<div>No results</div>");
 var _tmpl2 = template("<button type=\"button\" aria-label=\"Clear search\"></button>");
@@ -209,8 +210,8 @@ var useSelect = () => {
 var read = (source) => {
 	return typeof source === "function" ? source() : source;
 };
-var Select = (props) => {
-	const [local, rest] = splitProps(mergeProps$1({
+var Select$1 = (props) => {
+	const [local, rest] = splitProps(mergeProps$2({
 		size: "md",
 		variant: "outline",
 		intent: "default",
@@ -360,11 +361,20 @@ var Item = (props) => {
 };
 var List = () => {
 	const ctx = useSelect();
+	const heldHeight = createSignal(0);
+	const holdRef = (el) => {
+		if (!el || !ctx.filter || heldHeight()) return;
+		requestAnimationFrame(() => {
+			if (el && !heldHeight()) heldHeight(el.clientHeight);
+		});
+	};
 	const handleFilterClear = () => {
 		ctx.query("");
 	};
 	return jsx("div", mergeProps(() => part("list"), {
+		ref: holdRef,
 		className: listClass,
+		style: () => heldHeight() ? { minHeight: `${heldHeight()}px` } : void 0,
 		children: [() => ctx.filter && (() => {
 			const _el0 = _tmpl.cloneNode(true);
 			const _el1 = _el0.firstChild;
@@ -422,8 +432,9 @@ var Content = () => {
 			return ctx.backdropStyle ?? { background: "var(--tsu-bg-overlay)" };
 		},
 		contentClassName: listBodyClass,
+		portal: !useDialogContext(),
 		children: jsx(List, {})
 	}));
 };
 //#endregion
-export { SelectTrigger, Select as default };
+export { SelectTrigger, Select$1 as default };

package/docs/api.md

@@ -729,6 +729,7 @@ A free-form presentation layer: a backdrop, an optional drag grabber, and a scro
 | `backdropClassName` | `string` | — | Extra class for the backdrop. |
 | `backdropStyle` | `object` | — | Extra style for the backdrop. |
 | `contentClassName` | `string` | — | Extra class for the content area. |
+| `portal` | `boolean` | `true` | Render the overlay into `<body>`. When `false` the backdrop + sheet render **inline**, keeping them inside a parent Dialog's focus-trap boundary — required for a filter `input` nested in a Dialog on iOS Safari (WebKit focus-lock). The overlay is `position: fixed`, so it still covers the viewport when inline. |
 | `class` | `string` | — | Extra class for the sheet. |
 | `children` | `node` | — | **Required** body content. |
 

package/docs/select-in-dialog-focus-lock.md

@@ -0,0 +1,38 @@
+# Select-in-Dialog filter input focus-lock on iOS
+
+**Status:** Fixed
+**Affects:** `Select.jsx` (nested inside `Dialog`)
+
+## Problem
+
+A `Select` with a filter input, nested inside a `Dialog`, could not be focused on
+iOS Safari — tapping the search box did nothing and the keyboard never appeared.
+
+The `Dialog` (ArkDialog `modal`) installs a focus trap that listens on
+`document` and forces focus back into the dialog content whenever it escapes.
+The Select's bottom sheet was portaled to `document.body`, which is **outside**
+the dialog's focus-trap boundary. On iOS Safari the trap's `focusin` handler
+stole focus back from the filter input on every tap, so the input never kept
+focus long enough for the keyboard to appear.
+
+The old `SelectMobile` component hit the exact same WebKit focus-lock bug and
+fixed it by rendering the sheet **inline** (no `<Portal>`), keeping it inside
+the dialog's focus-trap boundary. The current `Select` re-introduced the bug by
+routing through `BottomSheet`, which always portaled.
+
+## Fix
+
+- `BottomSheet` gains a `portal` prop (default `true`, backward compatible).
+  When `false`, the backdrop + sheet render inline instead of into `<body>`.
+- `Select.Content` reads `useDialogContext()` and passes `portal={!dialog}`:
+  inside a Dialog the sheet stays within the focus-trap boundary; standalone
+  usage still portals as before.
+
+Because `BottomSheet`'s overlay is `position: fixed`, rendering inline still
+covers the viewport correctly even when nested inside the dialog.
+
+## e2e
+
+`e2e/select-in-dialog-*` verifies the sheet stays inside the dialog content,
+the filter input keeps focus after a tap, and closing the sheet via backdrop
+leaves the dialog open.

package/package.json

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