@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/native/MenuParts.tsrx.js

@@ -0,0 +1,762 @@
+import { View } from "./View.tsrx.js";
+import { Text } from "./Text.tsrx.js";
+import { Pressable } from "./Pressable.tsrx.js";
+import { Icon } from "./Icon.tsrx.js";
+import { MenuRadioContext, MenuRadioProvider, useDropdownMenuContext } from "./menu-context.js";
+import { Separator } from "./Separator.tsrx.js";
+import { Popover } from "./Popover.tsrx.js";
+import { MenuSurface } from "./MenuSurface.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalPlan, universalProps, universalValue, useContext, useMemo, useRef, useState, withSlot } from "@nativescript-community/octane";
+//#region src/MenuParts.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(8);
+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 _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		},
+		{
+			"kind": "slot",
+			"slot": 3
+		}
+	]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		},
+		{
+			"kind": "slot",
+			"slot": 3
+		},
+		{
+			"kind": "slot",
+			"slot": 4
+		}
+	]
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan10 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan11 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan12 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		},
+		{
+			"kind": "slot",
+			"slot": 3
+		},
+		{
+			"kind": "slot",
+			"slot": 4
+		}
+	]
+});
+var __octaneUniversalPlan13 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan14 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan15 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan16 = universalPlan("nativescript", {
+	"kind": "text",
+	"value": "›"
+});
+var __octaneUniversalPlan17 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+var __octaneUniversalPlan18 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan19 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan20 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan21 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan22 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan23 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan24 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan25 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan26 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan27 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var DropdownMenuItem = defineUniversalComponent("nativescript", function DropdownMenuItem(props) {
+	const menu = withSlot(_h$0, useDropdownMenuContext);
+	const select = () => {
+		if (props.isDisabled) return;
+		props.onSelect?.();
+		if (props.hasCloseOnSelect !== false) menu?.closeMenu();
+	};
+	return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Pressable, universalProps([
+		[
+			"set",
+			"ref",
+			props.ref
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			[
+				"vx-menu-item",
+				props.isDisabled && "vx-menu-item--disabled",
+				props.className
+			]
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"accessibilityRole",
+			"menuitem"
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			typeof props.label === "string" ? props.label : void 0
+		],
+		[
+			"set",
+			"accessibilityState",
+			{ disabled: props.isDisabled }
+		],
+		[
+			"set",
+			"onPress",
+			select
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan2, [
+			props.icon && universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				props.icon
+			]]))]),
+			universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"vx-menu-item-label"
+			]], props.label)),
+			props.description && universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Text, universalProps([], props.description))]),
+			props.endContent
+		]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var DropdownMenuCheckboxItem = defineUniversalComponent("nativescript", function DropdownMenuCheckboxItem(props) {
+	const menu = withSlot(_h$1, useDropdownMenuContext);
+	const select = () => {
+		if (props.isDisabled) return;
+		props.onValueChange?.(!props.value);
+		props.onSelect?.();
+		if (props.hasCloseOnSelect) menu?.closeMenu();
+	};
+	return universalValue(__octaneUniversalPlan7, [universalComponent("nativescript", Pressable, universalProps([
+		[
+			"set",
+			"ref",
+			props.ref
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			[
+				"vx-menu-item",
+				props.isDisabled && "vx-menu-item--disabled",
+				props.className
+			]
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"accessibilityRole",
+			"menuitemcheckbox"
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			typeof props.label === "string" ? props.label : void 0
+		],
+		[
+			"set",
+			"accessibilityState",
+			{
+				disabled: props.isDisabled,
+				checked: props.value
+			}
+		],
+		[
+			"set",
+			"onPress",
+			select
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan6, [
+			universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"accessible",
+				false
+			]], props.value ? "✓" : "○")),
+			props.icon && universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				props.icon
+			]]))]),
+			universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"vx-menu-item-label"
+			]], props.label)),
+			props.description && universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", Text, universalProps([], props.description))]),
+			props.endContent
+		]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var DropdownMenuRadioGroup = defineUniversalComponent("nativescript", function DropdownMenuRadioGroup(props) {
+	const [internal, setInternal] = useState(props.defaultValue, _h$2);
+	const context = {
+		get value() {
+			return props.value !== void 0 ? props.value : internal;
+		},
+		get isDisabled() {
+			return props.isDisabled;
+		},
+		get hasCloseOnSelect() {
+			return props.hasCloseOnSelect;
+		},
+		get label() {
+			return props.label;
+		},
+		onValueChange: (value) => {
+			if (props.isDisabled) return;
+			if (props.value === void 0) setInternal(value);
+			props.onValueChange?.(value);
+		}
+	};
+	return universalValue(__octaneUniversalPlan9, [universalComponent("nativescript", View, universalProps([[
+		"set",
+		"accessibilityRole",
+		"group"
+	], [
+		"set",
+		"accessibilityLabel",
+		props.label
+	]], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan8, [universalComponent("nativescript", MenuRadioProvider, universalProps([[
+			"set",
+			"value",
+			context
+		]], props.children))]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var DropdownMenuRadioItem = defineUniversalComponent("nativescript", function DropdownMenuRadioItem(props) {
+	const group = useContext(MenuRadioContext);
+	const menu = withSlot(_h$3, useDropdownMenuContext);
+	if (!group) throw new Error("MenuRadioItem requires a MenuRadioGroup");
+	const select = () => {
+		if (props.isDisabled || group.isDisabled) return;
+		if (group.value !== props.value) group.onValueChange?.(props.value);
+		props.onSelect?.();
+		if ((props.hasCloseOnSelect ?? group.hasCloseOnSelect) !== false) menu?.closeMenu();
+	};
+	return universalValue(__octaneUniversalPlan13, [universalComponent("nativescript", Pressable, universalProps([
+		[
+			"set",
+			"ref",
+			props.ref
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			[
+				"vx-menu-item",
+				props.isDisabled && "vx-menu-item--disabled",
+				props.className
+			]
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"accessibilityRole",
+			"menuitemradio"
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			typeof props.label === "string" ? props.label : void 0
+		],
+		[
+			"set",
+			"accessibilityState",
+			{
+				disabled: props.isDisabled || group.isDisabled,
+				checked: group.value === props.value
+			}
+		],
+		[
+			"set",
+			"onPress",
+			select
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan12, [
+			universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"accessible",
+				false
+			]], group.value === props.value ? "●" : "○")),
+			props.icon && universalValue(__octaneUniversalPlan10, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				props.icon
+			]]))]),
+			universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"className",
+				"vx-menu-item-label"
+			]], props.label)),
+			props.description && universalValue(__octaneUniversalPlan11, [universalComponent("nativescript", Text, universalProps([], props.description))]),
+			props.endContent
+		]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var DropdownMenuDivider = defineUniversalComponent("nativescript", function DropdownMenuDivider(props) {
+	return universalValue(__octaneUniversalPlan14, [universalComponent("nativescript", Separator, universalProps([["spread", props]]))]);
+}, { "module": "@nativescript-community/octane" });
+var DropdownMenuSubMenu = defineUniversalComponent("nativescript", function DropdownMenuSubMenu(props) {
+	const parent = withSlot(_h$4, useDropdownMenuContext);
+	const anchor = useRef(null, _h$5);
+	const mergedRef = useMemo(() => props.ref ? [anchor, props.ref] : anchor, [props.ref], _h$6);
+	const [internal, setInternal] = useState(props.defaultOpen ?? false, _h$7);
+	const open = props.isOpen ?? internal;
+	const setOpen = (next) => {
+		if (next && props.isDisabled) return;
+		if (props.isOpen === void 0) setInternal(next);
+		props.onOpenChange?.(next);
+	};
+	const closeLevel = () => setOpen(false);
+	return universalValue(__octaneUniversalPlan20, [universalComponent("nativescript", Pressable, universalProps([
+		[
+			"set",
+			"ref",
+			mergedRef
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			[
+				"vx-menu-item",
+				props.isDisabled && "vx-menu-item--disabled",
+				props.className
+			]
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"accessibilityRole",
+			"menuitem"
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			typeof props.label === "string" ? props.label : void 0
+		],
+		[
+			"set",
+			"accessibilityHint",
+			"Opens submenu"
+		],
+		[
+			"set",
+			"accessibilityState",
+			{ disabled: props.isDisabled }
+		],
+		[
+			"set",
+			"onPress",
+			() => setOpen(!open)
+		],
+		[
+			"set",
+			"web",
+			{
+				"aria-haspopup": "menu",
+				"aria-expanded": open,
+				"data-menu-submenu": true,
+				onKeyDown: (event) => {
+					if (event.isComposing || event.keyCode === 229 || event.defaultPrevented) return;
+					if (event.key === "ArrowRight" && !props.isDisabled) {
+						event.preventDefault();
+						event.stopPropagation();
+						setOpen(true);
+					}
+				}
+			}
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan17, [
+			props.icon && universalValue(__octaneUniversalPlan15, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				props.icon
+			]]))]),
+			universalComponent("nativescript", Text, universalProps([], props.label)),
+			universalComponent("nativescript", Text, universalProps([[
+				"set",
+				"accessible",
+				false
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan16, []);
+			})))
+		]);
+	}))), universalComponent("nativescript", Popover, universalProps([
+		[
+			"set",
+			"anchor",
+			anchor
+		],
+		[
+			"set",
+			"open",
+			open
+		],
+		[
+			"set",
+			"placement",
+			"right"
+		],
+		[
+			"set",
+			"alignment",
+			"start"
+		],
+		[
+			"set",
+			"onDismiss",
+			() => setOpen(false)
+		],
+		[
+			"set",
+			"className",
+			"vx-menu"
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan19, [universalComponent("nativescript", MenuSurface, universalProps([
+			[
+				"set",
+				"closeMenu",
+				() => {
+					setOpen(false);
+					parent?.closeMenu();
+				}
+			],
+			[
+				"set",
+				"closeLevel",
+				closeLevel
+			],
+			[
+				"set",
+				"label",
+				typeof props.label === "string" ? props.label : void 0
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan18, [universalComponent("nativescript", MenuData, universalProps([[
+				"set",
+				"items",
+				props.items
+			]])), props.children]);
+		})))]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+var MenuData = defineUniversalComponent("nativescript", function MenuData(props) {
+	return universalValue(__octaneUniversalPlan27, [props.items?.map((item) => item.type === "divider" ? universalValue(__octaneUniversalPlan21, [universalComponent("nativescript", DropdownMenuDivider, universalProps([[
+		"set",
+		"id",
+		item.key
+	]]))]) : item.type === "radio-group" ? universalValue(__octaneUniversalPlan23, [universalComponent("nativescript", DropdownMenuRadioGroup, universalProps([
+		[
+			"set",
+			"label",
+			item.label ?? "Options"
+		],
+		[
+			"set",
+			"value",
+			typeof item.value === "string" ? item.value : void 0
+		],
+		[
+			"set",
+			"onValueChange",
+			item.onValueChange
+		],
+		[
+			"set",
+			"isDisabled",
+			item.isDisabled ?? item.disabled
+		],
+		[
+			"set",
+			"hasCloseOnSelect",
+			item.hasCloseOnSelect
+		]
+	], item.items?.map((option) => universalValue(__octaneUniversalPlan22, [universalComponent("nativescript", DropdownMenuRadioItem, universalProps([
+		[
+			"set",
+			"id",
+			option.key
+		],
+		[
+			"set",
+			"label",
+			option.label
+		],
+		[
+			"set",
+			"value",
+			typeof option.value === "string" ? option.value : option.key
+		],
+		[
+			"set",
+			"isDisabled",
+			option.isDisabled ?? option.disabled
+		],
+		[
+			"set",
+			"onSelect",
+			option.onSelect
+		]
+	]))]))))]) : item.type === "checkbox" ? universalValue(__octaneUniversalPlan24, [universalComponent("nativescript", DropdownMenuCheckboxItem, universalProps([
+		["spread", item],
+		[
+			"set",
+			"id",
+			item.key
+		],
+		[
+			"set",
+			"label",
+			item.label
+		],
+		[
+			"set",
+			"value",
+			item.value === true
+		],
+		[
+			"set",
+			"onValueChange",
+			item.onValueChange
+		],
+		[
+			"set",
+			"isDisabled",
+			item.isDisabled ?? item.disabled
+		]
+	]))]) : item.items ? universalValue(__octaneUniversalPlan25, [universalComponent("nativescript", DropdownMenuSubMenu, universalProps([
+		["spread", item],
+		[
+			"set",
+			"id",
+			item.key
+		],
+		[
+			"set",
+			"label",
+			item.label
+		],
+		[
+			"set",
+			"isDisabled",
+			item.isDisabled ?? item.disabled
+		]
+	]))]) : universalValue(__octaneUniversalPlan26, [universalComponent("nativescript", DropdownMenuItem, universalProps([
+		["spread", item],
+		[
+			"set",
+			"id",
+			item.key
+		],
+		[
+			"set",
+			"label",
+			item.label
+		],
+		[
+			"set",
+			"isDisabled",
+			item.isDisabled ?? item.disabled
+		]
+	]))]))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { DropdownMenuCheckboxItem, DropdownMenuDivider, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSubMenu, MenuData };