@octane-xplat/ui 0.7.2 → 0.9.0

package/dist/native/Popover.tsrx.js

@@ -1,12 +1,13 @@
 import { cx } from "./cx.js";
+import { rootLayoutFor } from "./root-layout.mobile.js";
 import { applyNativeProps } from "./platformProps.js";
 import { positionPopover } from "./popover-position.js";
 import { applyThemeClasses, useThemeScheme } from "./theme/theme-scheme.js";
-import { rootLayoutFor } from "./root-layout.mobile.js";
+import { createOverlayLifetime } from "./overlay-lifetime.mobile.js";
 import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef, useState, withSlot } from "@nativescript-community/octane";
-import { GridLayout } from "@nativescript/core";
+import { GridLayout, Screen, isIOS } from "@nativescript/core";
 //#region src/Popover.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _hs$ = /* @__PURE__ */ hookSlots(11);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
@@ -15,6 +16,9 @@ var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
 var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
 var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "gridlayout",
@@ -85,7 +89,14 @@ var PopoverLayer = defineUniversalComponent("nativescript", function PopoverLaye
 			width: coordinateRoot.getActualSize().width,
 			height: coordinateRoot.getActualSize().height
 		}, props.placement ?? "bottom");
-		setPosition((current) => current?.left === next.left && current?.top === next.top && current?.placement === next.placement ? current : next);
+		const insets = isIOS ? panelRef.current?.parent?.getSafeAreaInsets?.() : void 0;
+		const scale = isIOS ? Number(Screen.mainScreen.scale) || 1 : 1;
+		const panelPosition = {
+			...next,
+			left: next.left - Number(insets?.left ?? 0) / scale,
+			top: next.top - Number(insets?.top ?? 0) / scale
+		};
+		setPosition((current) => current?.left === panelPosition.left && current?.top === panelPosition.top && current?.placement === panelPosition.placement ? current : panelPosition);
 		if (panelSize?.width > 0 && panelSize?.height > 0) setSettled(true);
 	};
 	useEffect(() => {
@@ -116,16 +127,19 @@ var PopoverLayer = defineUniversalComponent("nativescript", function PopoverLaye
 		props.children,
 		props.style
 	], _h$3);
+	useEffect(() => {
+		if (position) (panelRef.current?.parent)?.requestLayout?.();
+	}, [position], _h$4);
 	useEffect(() => {
 		applyNativeProps(panelRef.current, props);
 	}, [
 		props.ios,
 		props.android,
 		settled
-	], _h$4);
+	], _h$5);
 	const dismiss = () => props.onDismiss?.();
 	return universalValue(__octaneUniversalPlan1, [
-		cx("vx-popover-layer", withSlot(_h$5, useThemeScheme) === "dark" && "ns-dark"),
+		cx("vx-popover-layer", withSlot(_h$6, useThemeScheme) === "dark" && "ns-dark"),
 		(props.dismissOnOutsideTap ?? true) && universalValue(__octaneUniversalPlan0, ["transparent", dismiss]),
 		panelRef,
 		position?.left ?? 0,
@@ -139,19 +153,13 @@ var PopoverLayer = defineUniversalComponent("nativescript", function PopoverLaye
 	]);
 }, { "module": "@nativescript-community/octane" });
 var Popover = defineUniversalComponent("nativescript", function Popover(props) {
-	const shown = useRef(null, _h$6);
+	const shown = useRef(null, _h$7);
+	const dismiss = useRef(props.onDismiss, _h$8);
+	dismiss.current = props.onDismiss;
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.unbindTheme?.();
-			const owner = cur.host.parent;
-			if (owner?.hasChild?.(cur.host)) owner.close(cur.host).then(() => cur.root.unmount?.(), (error) => {
-				console.error("[Popover] close failed", error);
-				cur.root.unmount?.();
-			});
-			else cur.root.unmount?.();
+			cur?.lifetime.close();
 			return;
 		}
 		const anchor = props.anchor?.current;
@@ -169,20 +177,21 @@ var Popover = defineUniversalComponent("nativescript", function Popover(props) {
 		host.horizontalAlignment = "stretch";
 		host.verticalAlignment = "stretch";
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, "Popover", (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
+		lifetime.own(unbindTheme);
 		shown.current = {
 			host,
 			root,
-			unbindTheme
+			lifetime
 		};
 		root.render(PopoverLayer, {
 			...props,
 			anchorView: anchor
 		});
-		rl.open(host).catch((error) => {
-			if (shown.current?.host === host) shown.current = null;
-			console.error("[Popover] open failed", error);
-			root.unmount?.();
-		});
+		lifetime.open();
 	}, [
 		props.open,
 		props.children,
@@ -190,7 +199,8 @@ var Popover = defineUniversalComponent("nativescript", function Popover(props) {
 		props.className,
 		props.style,
 		props.dismissOnOutsideTap
-	], _h$7);
+	], _h$9);
+	useEffect(() => () => shown.current?.lifetime.close(), [], _h$10);
 	return universalValue(__octaneUniversalPlan2, []);
 }, { "module": "@nativescript-community/octane" });
 //#endregion

package/dist/native/Pressable.tsrx.js

@@ -76,7 +76,10 @@ var Pressable = defineUniversalComponent("nativescript", function Pressable(prop
 		[
 			"set",
 			"accessibilityState",
-			nativeAccessibilityState(props.accessibilityState)
+			nativeAccessibilityState({
+				...props.accessibilityState,
+				disabled: props.disabled || props.accessibilityState?.disabled
+			})
 		],
 		[
 			"set",

package/dist/native/Screen.tsrx.js

@@ -1,7 +1,7 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
 import { registerRootLayout, unregisterRootLayout } from "./root-layout.mobile.js";
-import { attachTapToBlur } from "./tap-to-blur.mobile.js";
+import { attachTapToBlur } from "./tap-to-blur.ios.js";
 import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
 //#region src/Screen.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {

package/dist/native/SearchInput.tsrx.js

@@ -1,7 +1,8 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
 import { Icon } from "./Icon.tsrx.js";
-import { writeText } from "./text-write.js";
+import { isWritingText, writeText } from "./text-write.js";
+import { blurText } from "./text-focus.js";
 import { defineUniversalComponent, hookSlots, markWarm, universalComponent, universalPlan, universalProps, universalValue, useBatch, useEffect, useRef, useState, warmChild } from "@nativescript-community/octane";
 //#region src/SearchInput.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(3);
@@ -116,13 +117,15 @@ var SearchInput = defineUniversalComponent("nativescript", markWarm(function Sea
 			if (!v) return;
 			props.bind?.({
 				focus: () => v.focus(),
-				blur: () => v.dismissSoftInput?.() ?? v.blur(),
+				blur: () => blurText(v),
 				native: v
 			});
 		},
 		props.placeholder,
 		props.editable ?? true,
-		(e) => setValue(e.value),
+		(e) => {
+			if (!isWritingText(e.object)) setValue(e.value);
+		},
 		props.onSubmit,
 		props.onFocus,
 		props.onBlur,

package/dist/native/Sheet.tsrx.js

@@ -1,16 +1,19 @@
 import { cx } from "./cx.js";
-import { applyThemeClasses } from "./theme/theme-scheme.js";
 import { rootLayoutFor } from "./root-layout.mobile.js";
-import { attachTapToBlur } from "./tap-to-blur.mobile.js";
+import { attachTapToBlur } from "./tap-to-blur.ios.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { createOverlayLifetime } from "./overlay-lifetime.mobile.js";
 import { attachSheetDetents } from "./sheet-detents.js";
 import { bindBottomInsetToKeyboard } from "./keyboard-inset.mobile.js";
 import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
 //#region src/Sheet.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _hs$ = /* @__PURE__ */ hookSlots(5);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "range",
 	"children": [{
@@ -29,19 +32,12 @@ var SheetBody = defineUniversalComponent("nativescript", function SheetBody(prop
 var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 	const sentinel = useRef(null, _h$0);
 	const shown = useRef(null, _h$1);
+	const dismiss = useRef(props.onDismiss, _h$2);
+	dismiss.current = props.onDismiss;
 	useEffect(() => {
 		const cur = shown.current;
 		if (!props.open) {
-			if (!cur) return;
-			shown.current = null;
-			cur.programmatic = true;
-			cur.unbindTheme?.();
-			cur.unbindKeyboard?.();
-			cur.root.unmount?.();
-			const owner = cur.host.parent;
-			if (owner?.hasChild?.(cur.host)) owner.close(cur.host).catch((error) => {
-				console.error("[Sheet] close failed", error);
-			});
+			cur?.lifetime.close();
 			return;
 		}
 		const rl = rootLayoutFor(sentinel.current);
@@ -57,32 +53,26 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
 		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, "Sheet", (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.();
+		});
+		lifetime.own(unbindTheme);
 		const detents = props.detents?.length ? attachSheetDetents(host, props.detents, () => {
 			host.parent?.close?.(host)?.catch?.((error) => {
 				console.error("[Sheet] close failed", error);
 			});
 		}) : null;
-		const unbindKeyboard = bindBottomInsetToKeyboard(host);
-		attachTapToBlur(host);
-		const opened = {
+		lifetime.own(bindBottomInsetToKeyboard(host));
+		lifetime.own(attachTapToBlur(host));
+		if (detents) lifetime.own(detents.detach);
+		shown.current = {
 			host,
 			root,
-			unbindTheme,
-			unbindKeyboard,
-			programmatic: false,
-			detach: detents?.detach
+			lifetime
 		};
-		shown.current = opened;
 		root.render(SheetBody, { children: props.children });
-		host.on("closed", () => {
-			if (shown.current === opened) shown.current = null;
-			opened.detach?.();
-			opened.unbindKeyboard?.();
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			if (!opened.programmatic) props.onDismiss?.();
-		});
-		rl.open(host, {
+		lifetime.open({
 			...props.shadeCover ?? true ? { shadeCover: {
 				opacity: .4,
 				tapToClose: true
@@ -97,13 +87,7 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 					duration: 200
 				}
 			} }
-		}).then(() => detents?.enter()).catch((error) => {
-			if (shown.current === opened) shown.current = null;
-			opened.unbindKeyboard?.();
-			opened.unbindTheme?.();
-			opened.root.unmount?.();
-			console.error("[Sheet] open failed", error);
-		});
+		}, () => detents?.enter());
 	}, [
 		props.open,
 		props.children,
@@ -112,7 +96,8 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 		props.shadeCover,
 		props.ios,
 		props.android
-	], _h$2);
+	], _h$3);
+	useEffect(() => () => shown.current?.lifetime.close(), [], _h$4);
 	return universalValue(__octaneUniversalPlan1, [(v) => {
 		sentinel.current = v;
 	}, {

package/dist/native/Slider.tsrx.js

@@ -15,7 +15,7 @@ var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
 var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "gridlayout",
+	"type": "absolutelayout",
 	"bindings": [
 		["id", 0],
 		["className", 1],
@@ -28,25 +28,20 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		{
 			"kind": "host",
 			"type": "flexboxlayout",
-			"props": { "className": "vx-slider-track" }
+			"props": { "className": "vx-slider-track" },
+			"bindings": [["style", 6]]
 		},
 		{
 			"kind": "host",
 			"type": "flexboxlayout",
-			"props": {
-				"className": "vx-slider-fill",
-				"horizontalAlignment": "left"
-			},
-			"bindings": [["style", 6]]
+			"props": { "className": "vx-slider-fill" },
+			"bindings": [["style", 7]]
 		},
 		{
 			"kind": "host",
 			"type": "flexboxlayout",
-			"props": {
-				"className": "vx-slider-thumb",
-				"horizontalAlignment": "left"
-			},
-			"bindings": [["style", 7]]
+			"props": { "className": "vx-slider-thumb" },
+			"bindings": [["style", 8]]
 		}
 	]
 });
@@ -64,6 +59,10 @@ var Slider = defineUniversalComponent("nativescript", function Slider(props) {
 		host.current = el;
 		measure.bind(el);
 	}, [], _h$4);
+	const thumbSize = 20;
+	const trackTop = 12;
+	const thumbTop = 4;
+	const thumbLeft = Math.min(Math.max(ratio * width - thumbSize / 2, 0), Math.max(width - thumbSize, 0));
 	useEffect(() => {
 		applyNativeProps(host.current, props);
 	}, [props], _h$5);
@@ -90,8 +89,18 @@ var Slider = defineUniversalComponent("nativescript", function Slider(props) {
 		nativeAccessibilityRole("adjustable"),
 		onPan,
 		bindHost,
-		{ width: ratio * width },
-		{ marginLeft: Math.min(Math.max(ratio * width - 10, 0), Math.max(width - 20, 0)) }
+		{
+			width,
+			translateY: trackTop
+		},
+		{
+			width: ratio * width,
+			translateY: trackTop
+		},
+		{
+			translateX: thumbLeft,
+			translateY: thumbTop
+		}
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion

package/dist/native/Text.tsrx.js

@@ -2,6 +2,7 @@ import { cx } from "./cx.js";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
 import { layoutChildProps } from "./layout-child.js";
 import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
+import { Application } from "@nativescript/core";
 //#region src/Text.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
@@ -34,8 +35,23 @@ var TextScope = defineUniversalComponent("nativescript", function TextScope(prop
 }, { "module": "@nativescript-community/octane" });
 var Text = defineUniversalComponent("nativescript", function Text(props) {
 	const inText = useContext(InText);
+	const fontWeightValue = String(props.style?.fontWeight ?? "").toLowerCase();
+	const fontWeight = /^\d+$/.test(fontWeightValue) ? Number(fontWeightValue) : {
+		normal: 400,
+		bold: 700,
+		thin: 100,
+		"extra-light": 200,
+		light: 300,
+		medium: 500,
+		"semi-bold": 600,
+		"extra-bold": 800,
+		black: 900
+	}[fontWeightValue];
+	const lineHeight = props.style?.lineHeight;
 	const textStyle = {
 		...props.style,
+		...(Application.ios || Application.android) && typeof lineHeight === "number" && Number.isFinite(lineHeight) && lineHeight > 0 && props.style?.height == null && props.style?.minHeight == null ? { minHeight: lineHeight } : {},
+		...Application.ios && props.style?.fontVariationSettings == null && fontWeight !== void 0 && fontWeight >= 100 && fontWeight <= 900 ? { fontVariationSettings: `'wght' ${fontWeight}` } : {},
 		...props.ellipsize || props.numberOfLines ? { flexShrink: 1 } : {},
 		...props.ellipsize ? {
 			whiteSpace: "nowrap",

package/dist/native/TextArea.tsrx.js

@@ -1,6 +1,7 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
-import { writeText } from "./text-write.js";
+import { isWritingText, writeText } from "./text-write.js";
+import { blurText } from "./text-focus.js";
 import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { Utils } from "@nativescript/core";
 //#region src/TextArea.tsrx
@@ -61,7 +62,7 @@ var TextArea = defineUniversalComponent("nativescript", function TextArea(props)
 			applyEscapeProps(v, props);
 			props.bind?.({
 				focus: () => v.focus(),
-				blur: () => v.dismissSoftInput?.() ?? v.blur(),
+				blur: () => blurText(v),
 				native: v
 			});
 		},
@@ -75,7 +76,9 @@ var TextArea = defineUniversalComponent("nativescript", function TextArea(props)
 		props.returnKeyType,
 		props.editable ?? true,
 		(e) => fit(e.object),
-		(e) => props.onChange?.(e.value),
+		(e) => {
+			if (!isWritingText(e.object)) props.onChange?.(e.value);
+		},
 		submitOnReturn ? props.onSubmit : void 0,
 		props.onFocus,
 		props.onBlur

package/dist/native/TextInput.tsrx.js

@@ -1,6 +1,7 @@
 import { cx } from "./cx.js";
 import { applyEscapeProps } from "./escape-props.js";
-import { writeText } from "./text-write.js";
+import { isWritingText, writeText } from "./text-write.js";
+import { blurText } from "./text-focus.js";
 import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 //#region src/TextInput.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(2);
@@ -35,7 +36,7 @@ var TextInput = defineUniversalComponent("nativescript", function TextInput(prop
 			applyEscapeProps(v, props);
 			props.bind?.({
 				focus: () => v.focus(),
-				blur: () => v.dismissSoftInput?.() ?? v.blur(),
+				blur: () => blurText(v),
 				native: v
 			});
 		},
@@ -50,7 +51,9 @@ var TextInput = defineUniversalComponent("nativescript", function TextInput(prop
 		props.keyboardType === "default" ? void 0 : props.keyboardType,
 		props.returnKeyType,
 		props.editable ?? true,
-		(e) => props.onChange?.(e.value),
+		(e) => {
+			if (!isWritingText(e.object)) props.onChange?.(e.value);
+		},
 		props.onSubmit,
 		props.onFocus,
 		props.onBlur