@octane-xplat/ui 0.4.0 → 0.6.0

package/dist/web/web/Tooltip.web.tsrx.js

@@ -0,0 +1,183 @@
+import { View } from "../View.web.tsrx.js";
+import { cx } from "../cx.js";
+import { Popover } from "../Popover.web.tsrx.js";
+import { bag4, bag5, child, clone, componentSlotVoid, drainFrag, hookSlots, markChildrenBlock, sibling, template, useEffect, useRef, useState } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant, textHoleUpdate } from "octane/internal/client";
+//#region src/web/Tooltip.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<!><!>", 3, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(9);
+var __childrenBody = {};
+var __childrenBody$ = {};
+var nextTooltipId = 0;
+var FOCUSABLE = "a[href],button,input,select,textarea,[tabindex],[contenteditable=\"true\"]";
+var Tooltip = function Tooltip(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
+	const [open, setOpen] = useState(false, _hs$ + 0);
+	const anchor = useRef(null, _hs$ + 1);
+	const binding = useRef(null, _hs$ + 2);
+	const described = useRef(null, _hs$ + 3);
+	const tooltipId = useRef("", _hs$ + 4);
+	if (!tooltipId.current) tooltipId.current = `vx-tooltip-${++nextTooltipId}`;
+	const openTimer = useRef(null, _hs$ + 5);
+	const closeTimer = useRef(null, _hs$ + 6);
+	const clearOpen = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, () => {
+		if (openTimer.current !== null) clearTimeout(openTimer.current);
+		openTimer.current = null;
+	});
+	const clearClose = __hk[1] ?? hookMemoPublishInvariant(__hk, 1, () => {
+		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+		closeTimer.current = null;
+	});
+	const startOpen = () => {
+		if (props.disabled) return;
+		clearClose();
+		clearOpen();
+		openTimer.current = setTimeout(() => {
+			openTimer.current = null;
+			setOpen(true);
+		}, Math.max(0, props.openDelay ?? 500));
+	};
+	const scheduleClose = () => {
+		clearClose();
+		closeTimer.current = setTimeout(() => {
+			closeTimer.current = null;
+			setOpen(false);
+		}, Math.max(0, props.closeDelay ?? 100));
+	};
+	const openNow = () => {
+		if (props.disabled) return;
+		clearClose();
+		clearOpen();
+		setOpen(true);
+	};
+	const closeNow = __hk[2] ?? hookMemoPublishInvariant(__hk, 2, () => {
+		clearOpen();
+		clearClose();
+		setOpen(false);
+	});
+	const bindAnchor = (node) => {
+		anchor.current = node;
+		if (binding.current?.node === node) return;
+		const old = binding.current;
+		if (old) {
+			old.node.removeEventListener("mouseenter", old.enter);
+			old.node.removeEventListener("mouseleave", old.leave);
+			old.node.removeEventListener("focusin", old.focusIn);
+			old.node.removeEventListener("focusout", old.focusOut);
+		}
+		binding.current = null;
+		if (!node) return;
+		const next = {
+			node,
+			enter: startOpen,
+			leave: () => {
+				clearOpen();
+				scheduleClose();
+			},
+			focusIn: openNow,
+			focusOut: closeNow
+		};
+		node.addEventListener("mouseenter", next.enter);
+		node.addEventListener("mouseleave", next.leave);
+		node.addEventListener("focusin", next.focusIn);
+		node.addEventListener("focusout", next.focusOut);
+		binding.current = next;
+	};
+	useEffect(() => () => {
+		clearOpen();
+		clearClose();
+		const current = binding.current;
+		if (current) {
+			current.node.removeEventListener("mouseenter", current.enter);
+			current.node.removeEventListener("mouseleave", current.leave);
+			current.node.removeEventListener("focusin", current.focusIn);
+			current.node.removeEventListener("focusout", current.focusOut);
+		}
+	}, [], _hs$ + 7);
+	useEffect(() => {
+		if (!open) return;
+		const host = anchor.current;
+		const target = host?.matches?.(FOCUSABLE) ? host : host?.querySelector?.(FOCUSABLE) ?? host;
+		if (target) {
+			target.setAttribute("aria-describedby", tooltipId.current);
+			described.current = target;
+		}
+		const onKey = (event) => {
+			if (event.key === "Escape") closeNow();
+		};
+		const onScroll = () => closeNow();
+		window.addEventListener("keydown", onKey);
+		window.addEventListener("scroll", onScroll, true);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			window.removeEventListener("scroll", onScroll, true);
+			described.current?.removeAttribute("aria-describedby");
+			described.current = null;
+		};
+	}, [open], _hs$ + 8);
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$4(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1;
+				const _root = clone(_t$0);
+				_m0 = __block.parentNode;
+				_m1 = child(_root);
+				drainFrag(_root, __block.parentNode, __block.endMarker);
+				_b = bag4(__s, null, _m0, _m1, null, void 0);
+			}
+			{
+				const _v = props.content;
+				_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+				_b.d = _v;
+			}
+		}
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1, _m4;
+			const _root = clone(_t$1);
+			_m0 = __block.parentNode;
+			const _el0 = child(_root);
+			_m1 = _el0;
+			_m4 = sibling(_el0, 1);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag5(__s, null, _m0, _m1, null, void 0, _m4);
+		}
+		{
+			const _v = props.trigger;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true);
+			_b.d = _v;
+		}
+		componentSlotVoid(__s, 2, _b.a, Popover, {
+			"open": open,
+			"anchor": anchor,
+			"placement": props.placement ?? "top",
+			"dismissOnOutsideTap": false,
+			"className": cx("vx-tooltip", props.contentClassName),
+			"style": {
+				pointerEvents: "none",
+				...props.contentStyle
+			},
+			"web": {
+				role: "tooltip",
+				id: tooltipId.current
+			},
+			"children": markChildrenBlock(__children$4, __childrenBody)
+		}, _b.e, void 0, void 0, void 0, void 0, "c:268467ce");
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, View, {
+		"className": props.className,
+		"style": props.style,
+		"bind": bindAnchor,
+		"web": props.web,
+		"children": markChildrenBlock(__children$1, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:624a85e5");
+};
+//#endregion
+export { Tooltip };

package/dist/web/web/index.js

@@ -0,0 +1,3 @@
+import { Hoverable } from "./Hoverable.web.tsrx.js";
+import { Tooltip } from "./Tooltip.web.tsrx.js";
+export { Hoverable, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "files": [
     "dist",
     "types",
@@ -10,10 +10,32 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "web": "./dist/web/ui.js",
-      "native": "./dist/native/ui.js",
+      "web": {
+        "types": "./types/index.web.d.ts",
+        "default": "./dist/web/ui.js"
+      },
+      "native": {
+        "types": "./types/index.native.d.ts",
+        "default": "./dist/native/ui.js"
+      },
       "default": "./dist/native/ui.js"
     },
+    "./ios": {
+      "types": "./types/ios.d.ts",
+      "native": "./dist/native/ios/index.js"
+    },
+    "./android": {
+      "types": "./types/android.d.ts",
+      "native": "./dist/native/android/index.js"
+    },
+    "./native": {
+      "types": "./types/native.d.ts",
+      "native": "./dist/native/native/index.js"
+    },
+    "./web": {
+      "types": "./types/web.d.ts",
+      "web": "./dist/web/web/index.js"
+    },
     "./theme/tokens.css": "./src/theme/tokens.css"
   },
   "devDependencies": {
@@ -22,6 +44,8 @@
     "@nativescript-community/ui-drawer": "0.1.32",
     "@nativescript-community/ui-svg": "0.2.24",
     "@nativescript/core": "9.1.2",
+    "@nstudio/nativescript-camera-plus": "6.0.1",
+    "@nstudio/nativescript-exoplayer": "6.2.0",
     "@octanejs/vite-plugin": "0.1.60",
     "jsdom": "30.1.1",
     "octane": "0.5.0",
@@ -29,14 +53,21 @@
     "vitest": "5.0.1"
   },
   "peerDependencies": {
+    "@nativescript-community/gesturehandler": ">=2.0.8 <3",
     "@nativescript-community/octane": ">=0.2.1 <1",
     "@nativescript-community/ui-canvas": ">=4.6.52 <5",
     "@nativescript-community/ui-drawer": ">=0.1.32 <1",
+    "@nativescript-community/ui-pager": ">=14.1.42 <15",
     "@nativescript-community/ui-svg": ">=0.2.24 <1",
     "@nativescript/core": ">=9.1.0 <10",
+    "@nstudio/nativescript-camera-plus": ">=6.0.1 <7",
+    "@nstudio/nativescript-exoplayer": ">=6.2.0 <7",
     "octane": ">=0.1.51 <1"
   },
   "peerDependenciesMeta": {
+    "@nativescript-community/gesturehandler": {
+      "optional": true
+    },
     "@nativescript-community/octane": {
       "optional": true
     },