@octane-xplat/pager 0.14.0 → 0.16.0

package/src/layout-child.ts

@@ -1,57 +1,95 @@
 import type { LayoutChildProps, FlexContainerProps } from './props'
+import { mergeStyle } from './style-merge'
 
 // start/end shorthand → flex-start/flex-end.
 const FLEX_JUSTIFY: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
 const FLEX_ALIGN: Record<string, string> = { start: 'flex-start', end: 'flex-end' }
 
-/** NativeScript reads these attributes from each child view during parent
- *  layout. Values are forwarded with NativeScript's own property names.
- *  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
- *  the host flexboxlayout itself — its own attributes, not child metadata. */
-export function layoutChildProps(props: LayoutChildProps & Partial<FlexContainerProps>) {
-	const result: Record<string, any> = {}
-	for (const key of [
-		'row',
-		'col',
-		'rowSpan',
-		'colSpan',
-		'dock',
-		'left',
-		'top',
-		'flexGrow',
-		'flexShrink',
-		'alignSelf',
-		'order',
-	] as const) {
-		if (props[key] !== undefined) {
-			result[key] = props[key]
+/** Convert parent-layout metadata + the flex-container contract to the CSS
+ *  style bag on the host masonview — mirrors layout-child.web.ts so the same
+ *  component props compile to the same CSS on both targets. `dock` has no
+ *  CSS equivalent on web (ignored there); on native it becomes absolute
+ *  insets. Native adds `position: absolute` for edge-placed children since
+ *  there is no `.vx-absolute > *` stylesheet rule on the mason engine. */
+export function layoutChildProps(
+	props: LayoutChildProps & Partial<FlexContainerProps> & { style?: any },
+	baseStyle = props.style,
+) {
+	const style: Record<string, any> = { ...(typeof baseStyle === 'object' ? baseStyle : {}) }
+	if (props.row !== undefined) {
+		style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`
+	} else if (props.rowSpan !== undefined) {
+		style.gridRow = `span ${props.rowSpan}`
+	}
+
+	if (props.col !== undefined) {
+		style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`
+	} else if (props.colSpan !== undefined) {
+		style.gridColumn = `span ${props.colSpan}`
+	}
+
+	if (props.dock !== undefined) {
+		style.position = style.position ?? 'absolute'
+		if (props.dock === 'left' || props.dock === 'top' || props.dock === 'bottom') {
+			style.left = style.left ?? 0
+		}
+		if (props.dock === 'right' || props.dock === 'top' || props.dock === 'bottom') {
+			style.right = style.right ?? 0
+		}
+		if (props.dock === 'top' || props.dock === 'left' || props.dock === 'right') {
+			style.top = style.top ?? 0
+		}
+		if (props.dock === 'bottom' || props.dock === 'left' || props.dock === 'right') {
+			style.bottom = style.bottom ?? 0
 		}
 	}
 
-	if (props.justifyContent !== undefined) {
-		result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent
+	if (props.left !== undefined) {
+		style.left = props.left
+	}
+	if (props.top !== undefined) {
+		style.top = props.top
+	}
+	if ((props.left !== undefined || props.top !== undefined) && props.dock === undefined) {
+		style.position = style.position ?? 'absolute'
 	}
 
-	if (props.alignItems !== undefined) {
-		result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems
+	if (props.flexGrow !== undefined) {
+		style.flexGrow = props.flexGrow
+	}
+	if (props.flexShrink !== undefined) {
+		style.flexShrink = props.flexShrink
+	}
+	if (props.alignSelf !== undefined) {
+		style.alignSelf = props.alignSelf
+	}
+	if (props.order !== undefined) {
+		style.order = props.order
 	}
 
+	// Flex-container props (View/Row/Pressable hosts) — RN vocabulary on the
+	// element style.
+	if (props.justifyContent !== undefined) {
+		style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent
+	}
+	if (props.alignItems !== undefined) {
+		style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems
+	}
 	if (props.flexWrap !== undefined) {
-		result.flexWrap =
+		style.flexWrap =
 			props.flexWrap === true ? 'wrap' : props.flexWrap === false ? 'nowrap' : props.flexWrap
 	}
-
 	if (props.gap !== undefined) {
-		result.gap = props.gap
+		style.gap = props.gap
 	}
-
 	if (props.rowGap !== undefined) {
-		result.rowGap = props.rowGap
+		style.rowGap = props.rowGap
 	}
-
 	if (props.columnGap !== undefined) {
-		result.columnGap = props.columnGap
+		style.columnGap = props.columnGap
 	}
 
-	return result
+	// A string base is inline CSS — serialize the emitted keys under it so the
+	// authored declarations still win.
+	return { style: typeof baseStyle === 'string' ? mergeStyle(style, baseStyle) : style }
 }

package/src/style-merge.ts

@@ -0,0 +1,59 @@
+const kebab = (key: string) => key.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase())
+
+/** Anything accepted as a style value, including nested arrays. */
+export type StyleInput =
+	| string
+	| Record<string, any>
+	| null
+	| undefined
+	| readonly StyleInput[]
+
+/** Merge component-emitted style defaults under the authored `style` prop.
+ *  Authored keys win; array styles fold in order; a string style is appended
+ *  after the serialized defaults so its declarations override them too. */
+export function mergeStyle(
+	base: Record<string, any>,
+	style?: Record<string, any> | readonly (Record<string, any> | null | undefined)[] | null,
+): Record<string, any>
+export function mergeStyle(
+	base: Record<string, any>,
+	style?: StyleInput,
+): string | Record<string, any>
+export function mergeStyle(
+	base: Record<string, any>,
+	style?: StyleInput,
+): string | Record<string, any> {
+	if (style == null) {
+		return base
+	}
+
+	let obj: Record<string, any> = { ...base }
+	const strings: string[] = []
+	const add = (s: StyleInput) => {
+		if (s == null) {
+			return
+		}
+		if (typeof s === 'string') {
+			strings.push(s)
+		} else if (Array.isArray(s)) {
+			for (const part of s) {
+				add(part)
+			}
+		} else {
+			obj = { ...obj, ...s }
+		}
+	}
+	add(style)
+
+	if (strings.length === 0) {
+		return obj
+	}
+
+	const prefix = Object.entries(obj)
+		.filter(([, v]) => v != null)
+		.map(([k, v]) => `${kebab(k)}:${v}`)
+		.join(';')
+	return [prefix, ...strings].filter(Boolean).join(';')
+}
+
+export type StyleProp = string | Record<string, any> | readonly StyleProp[] | null | undefined

package/dist/native/Pager.tsrx.js

@@ -1,282 +0,0 @@
-import { cx } from "./cx.mobile.js";
-import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.mobile.js";
-import { layoutChildProps } from "./layout-child.js";
-import { __methodDep } from "octane/universal/native";
-import { NATIVESCRIPT_RENDERER_ID, createNativeScriptRoot, defineUniversalComponent, hookSlots, memo, registerElement, universalComponent, universalIf, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
-import { Pager } from "@nativescript-community/ui-pager";
-import { GridLayout } from "@nativescript/core";
-//#region src/Pager.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(6);
-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 __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "gridlayout",
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "pager",
-	"propsSlot": 0
-});
-var __octaneUniversalPlan2 = universalPlan("nativescript", {
-	"kind": "slot",
-	"slot": 0
-});
-var __octaneUniversalPlan3 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
-});
-var __octaneUniversalPlan4 = universalPlan("nativescript", {
-	"kind": "slot",
-	"slot": 0
-});
-registerElement("pager", Pager);
-var cellsByHost = /* @__PURE__ */ new WeakMap();
-var cellsByPager = /* @__PURE__ */ new WeakMap();
-var PagerCell = defineUniversalComponent(NATIVESCRIPT_RENDERER_ID, (props) => props.renderItem(props.item, props.index));
-function cellFor(host) {
-	let cell = cellsByHost.get(host);
-	if (!cell) {
-		cell = {
-			host,
-			root: createNativeScriptRoot(host),
-			pager: null,
-			renderItem: null,
-			item: void 0,
-			index: -1
-		};
-		cellsByHost.set(host, cell);
-	}
-	return cell;
-}
-function createPageHost() {
-	const host = new GridLayout();
-	cellFor(host);
-	return host;
-}
-var PAGER_TEMPLATES = [{
-	key: "xplat-page",
-	createView: createPageHost
-}];
-var selectPageTemplate = () => "xplat-page";
-function releasePagerCells(pager) {
-	const cells = cellsByPager.get(pager);
-	if (!cells) return;
-	for (const cell of cells) {
-		cellsByHost.delete(cell.host);
-		cell.root.unmount();
-	}
-	cellsByPager.delete(pager);
-}
-var PagerInner = defineUniversalComponent("nativescript", function PagerInner(props) {
-	const host = useRef(null, _h$0);
-	const suppressEcho = useRef(false, _h$1);
-	const pageSeeded = useRef(false, _h$2);
-	const bindHost = useCallback((v) => {
-		host.current = v;
-	}, [], _h$3);
-	const bindCell = (args) => {
-		const cell = cellFor(args.view);
-		cell.pager = args.object;
-		let owned = cellsByPager.get(cell.pager);
-		if (!owned) {
-			owned = /* @__PURE__ */ new Set();
-			cellsByPager.set(cell.pager, owned);
-		}
-		owned.add(cell);
-		const item = args.bindingContext ?? props.items?.[args.index];
-		if (cell.renderItem === props.renderItem && cell.index === args.index && Object.is(cell.item, item)) return;
-		cell.renderItem = props.renderItem;
-		cell.item = item;
-		cell.index = args.index;
-		cell.root.render(PagerCell, {
-			renderItem: (it, i) => universalValue(__octaneUniversalPlan0, [props.renderItem(it, i)]),
-			item,
-			index: args.index
-		});
-	};
-	const disposeCell = (args) => {
-		const cell = args.view && cellsByHost.get(args.view);
-		if (cell) {
-			cellsByHost.delete(args.view);
-			if (cell.pager) cellsByPager.get(cell.pager)?.delete(cell);
-			cell.root.unmount();
-		}
-	};
-	useEffect(() => {
-		const pager = host.current;
-		if (!pager) return;
-		pager.itemTemplates = PAGER_TEMPLATES;
-		pager.itemTemplateSelector = selectPageTemplate;
-		return () => releasePagerCells(pager);
-	}, [], _h$4);
-	useEffect(() => {
-		const pager = host.current;
-		if (!pager) return;
-		applyEscapeProps(pager, props);
-		if (pager.items !== props.items) pager.items = props.items;
-		const target = props.page ?? (pageSeeded.current ? void 0 : props.defaultPage);
-		if (target !== void 0 && pager.selectedIndex !== target) {
-			suppressEcho.current = true;
-			try {
-				pager.selectedIndex = target;
-			} finally {
-				suppressEcho.current = false;
-			}
-		}
-		pageSeeded.current = true;
-	}, [
-		props,
-		__methodDep(props, "items", true, true),
-		__methodDep(props, "page", true, true),
-		__methodDep(props, "defaultPage", true, true)
-	], _h$5);
-	return universalValue(__octaneUniversalPlan1, [universalProps([
-		[
-			"set",
-			"ref",
-			bindHost
-		],
-		[
-			"set",
-			"id",
-			props.id
-		],
-		["spread", layoutChildProps(props)],
-		[
-			"set",
-			"className",
-			cx("vx-pager", props.className)
-		],
-		[
-			"set",
-			"style",
-			props.style
-		],
-		[
-			"set",
-			"onItemLoading",
-			bindCell
-		],
-		[
-			"set",
-			"onItemDisposing",
-			disposeCell
-		],
-		[
-			"set",
-			"onSelectedIndexChange",
-			(args) => {
-				if (!suppressEcho.current) props.onPageChange?.(args.value);
-			}
-		],
-		[
-			"set",
-			"accessibilityRole",
-			nativeAccessibilityRole(props.accessibilityRole)
-		],
-		[
-			"set",
-			"accessibilityLabel",
-			props.accessibilityLabel
-		],
-		[
-			"set",
-			"accessibilityHint",
-			props.accessibilityHint
-		],
-		[
-			"set",
-			"accessibilityValue",
-			props.accessibilityValue
-		],
-		[
-			"set",
-			"accessibilityState",
-			nativeAccessibilityState(props.accessibilityState)
-		],
-		[
-			"set",
-			"accessible",
-			props.accessible
-		],
-		[
-			"set",
-			"accessibilityLiveRegion",
-			props.accessibilityLiveRegion
-		]
-	])]);
-}, { "module": "@nativescript-community/octane" });
-var MemoPager = memo(PagerInner, (a, b) => a.items === b.items && a.className === b.className && a.style === b.style && a.id === b.id && a.page === b.page && a.onPageChange === b.onPageChange && a.ios === b.ios && a.android === b.android);
-var Pager$1 = defineUniversalComponent("nativescript", function Pager(props) {
-	return universalValue(__octaneUniversalPlan4, [universalIf(props.items.length > 0, () => {
-		return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", MemoPager, universalProps([
-			[
-				"set",
-				"id",
-				props.id
-			],
-			[
-				"set",
-				"className",
-				props.className
-			],
-			[
-				"set",
-				"style",
-				props.style
-			],
-			[
-				"set",
-				"items",
-				props.items
-			],
-			[
-				"set",
-				"renderItem",
-				props.renderItem
-			],
-			[
-				"set",
-				"page",
-				props.page
-			],
-			[
-				"set",
-				"defaultPage",
-				props.defaultPage
-			],
-			[
-				"set",
-				"onPageChange",
-				props.onPageChange
-			],
-			[
-				"set",
-				"ios",
-				props.ios
-			],
-			[
-				"set",
-				"android",
-				props.android
-			],
-			["spread", layoutChildProps(props)]
-		]))]);
-	}, () => {
-		return universalValue(__octaneUniversalPlan3, [props.renderEmpty?.()]);
-	})]);
-}, { "module": "@nativescript-community/octane" });
-//#endregion
-export { Pager$1 as Pager };

package/dist/native/cx.mobile.js

@@ -1,12 +0,0 @@
-//#region src/cx.mobile.ts
-/** Native renderers now normalize the declarative `className` prop, but
-*  imperative `view.className` writes still need a pre-joined string — NS
-*  splits on ' ' only. Native leaves keep normalizing through cx() before
-*  handing className to an intrinsic so both paths accept the same values.
-*  (The DOM renderer already flattens arrays, so web leaves don't need
-*  this.) */
-function cx(...parts) {
-	return parts.flat(Infinity).filter(Boolean).join(" ");
-}
-//#endregion
-export { cx };

package/dist/native/escape-props.mobile.js

@@ -1,39 +0,0 @@
-import { isAndroid, isIOS } from "@nativescript/core";
-//#region src/escape-props.mobile.ts
-/** Apply only the active device's escape bag after the primitive's own props. */
-function applyEscapeProps(view, props) {
-	if (!view) return;
-	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
-	if (bag) Object.assign(view, bag);
-}
-var NATIVE_ACCESSIBILITY_ROLES = {
-	button: "button",
-	link: "link",
-	search: "search",
-	image: "image",
-	heading: "header",
-	adjustable: "adjustable",
-	summary: "summary",
-	text: "text",
-	none: "none",
-	progressbar: "progressBar",
-	checkbox: "checkbox",
-	switch: "switch",
-	radio: "radioButton",
-	spinbutton: "spinButton",
-	tab: "button"
-};
-/** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
-function nativeAccessibilityRole(role) {
-	return role ? NATIVE_ACCESSIBILITY_ROLES[role] : void 0;
-}
-/** NativeScript's AccessibilityState is a single enum value, unlike the
-*  web's independent ARIA booleans. Priority follows the strongest state. */
-function nativeAccessibilityState(state) {
-	if (state?.disabled) return "disabled";
-	if (state?.selected) return "selected";
-	if (state?.checked === true) return "checked";
-	if (state?.checked === false) return "unchecked";
-}
-//#endregion
-export { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState };

package/dist/native/index.js

@@ -1,2 +0,0 @@
-import { Pager } from "./Pager.tsrx.js";
-export { Pager };

package/dist/native/layout-child.js

@@ -1,38 +0,0 @@
-//#region src/layout-child.ts
-var FLEX_JUSTIFY = {
-	start: "flex-start",
-	end: "flex-end"
-};
-var FLEX_ALIGN = {
-	start: "flex-start",
-	end: "flex-end"
-};
-/** NativeScript reads these attributes from each child view during parent
-*  layout. Values are forwarded with NativeScript's own property names.
-*  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
-*  the host flexboxlayout itself — its own attributes, not child metadata. */
-function layoutChildProps(props) {
-	const result = {};
-	for (const key of [
-		"row",
-		"col",
-		"rowSpan",
-		"colSpan",
-		"dock",
-		"left",
-		"top",
-		"flexGrow",
-		"flexShrink",
-		"alignSelf",
-		"order"
-	]) if (props[key] !== void 0) result[key] = props[key];
-	if (props.justifyContent !== void 0) result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
-	if (props.alignItems !== void 0) result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
-	if (props.flexWrap !== void 0) result.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
-	if (props.gap !== void 0) result.gap = props.gap;
-	if (props.rowGap !== void 0) result.rowGap = props.rowGap;
-	if (props.columnGap !== void 0) result.columnGap = props.columnGap;
-	return result;
-}
-//#endregion
-export { layoutChildProps };

package/dist/native/octane-client-build.json

@@ -1,8 +0,0 @@
-{
-  "version": 1,
-  "buildId": "53f3070f-3c61-4426-97a9-b21bdbd7a163",
-  "mode": "production",
-  "capabilities": {
-    "independentHydration": false
-  }
-}