@seed-design/lynx-react 0.5.0 → 0.5.1

package/lib/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,gBAAgB,CAAC;AAKxB,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAIrB,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAI3D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAyF7F;;;;;;;GAOG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,sBAAsB;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,+EAmMnB,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,sBAAsB;CAAG;AAEhE,eAAO,MAAM,QAAQ,+EAsCnB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,WAAW,kFAiEtB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAkCxB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,kFAgCtB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,mFA8BvB,CAAC;AAKH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,kBAAkB,yFAmH9B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,gBAAgB,CAAC;AAKxB,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAUrB,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAI3D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAiF7F;;;;;;;GAOG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,sBAAsB;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,+EA8MnB,CAAC;AAyBH,MAAM,WAAW,aAAc,SAAQ,sBAAsB;CAAG;AAEhE,eAAO,MAAM,QAAQ,+EAkCnB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,WAAW,kFAiEtB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAiCxB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,kFAgCtB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,mFA8BvB,CAAC;AAKH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,kBAAkB,yFAgH9B,CAAC"}

package/lib/components/Tabs/Tabs.jsx

@@ -1,6 +1,7 @@
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { usePressTap } from "../../hooks/usePressTap.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils.js";
 import * as React from "@lynx-js/react";
 import clsx from "clsx";
 import { tabs } from "@seed-design/lynx-css/recipes/tabs";
@@ -32,15 +33,6 @@ function invokeScrollToOffset(list, offset) {
 		}).exec();
 	} catch {}
 }
-function getLayoutRect(event) {
-	const width = event.detail?.width ?? event.params?.width;
-	const left = event.detail?.left ?? event.params?.left;
-	if (!Number.isFinite(width) || !Number.isFinite(left)) return null;
-	return {
-		width: Math.max(0, width),
-		left
-	};
-}
 var TabsContext = React.createContext(null);
 function useTabsContext(consumer) {
 	const context = React.useContext(TabsContext);
@@ -72,17 +64,16 @@ var TabsRoot = React.forwardRef((props, ref) => {
 	const [items, setItems] = React.useState([]);
 	const [contentValues, setContentValues] = React.useState([]);
 	const [indicatorValue, setIndicatorValue] = React.useState();
-	const [triggerRects, setTriggerRects] = React.useState({});
-	const [listLeft, setListLeft] = React.useState(0);
+	const [triggerWidths, setTriggerWidths] = React.useState({});
 	const listRef = React.useRef(null);
 	const pagerRef = React.useRef(null);
 	const indicatorRef = React.useMainThreadRef(null);
 	const pagerValues = React.useMemo(() => contentValues.filter((contentValue) => !items.find((item) => item.value === contentValue)?.disabled), [contentValues, items]);
+	const triggerRects = React.useMemo(() => getTabsTriggerRects(items.map((item) => item.value), triggerWidths), [items, triggerWidths]);
 	const visualValue = indicatorValue ?? value;
 	const indicatorIndex = items.findIndex((item) => item.value === visualValue);
 	const selectedPagerIndex = value === void 0 ? -1 : pagerValues.indexOf(value);
-	const selectedRect = value === void 0 ? void 0 : triggerRects[value];
-	const selectedOffset = selectedRect ? Math.max(0, selectedRect.left - listLeft) : null;
+	const selectedOffset = (value === void 0 ? void 0 : triggerRects[value])?.left ?? null;
 	const setListNode = React.useCallback((node) => {
 		listRef.current = node;
 		if (node && selectedOffset !== null) invokeScrollToOffset(node, selectedOffset);
@@ -102,7 +93,7 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		return () => {
 			"background only";
 			setItems((current) => current.filter((item) => item.value !== triggerValue));
-			setTriggerRects((current) => {
+			setTriggerWidths((current) => {
 				const next = { ...current };
 				delete next[triggerValue];
 				return next;
@@ -122,14 +113,16 @@ var TabsRoot = React.forwardRef((props, ref) => {
 			disabled
 		} : item));
 	}, []);
-	const updateTriggerRect = React.useCallback((triggerValue, rect) => {
-		setTriggerRects((current) => {
-			const previous = current[triggerValue];
-			if (previous?.left === rect.left && previous.width === rect.width) return current;
-			return {
-				...current,
-				[triggerValue]: rect
-			};
+	const syncTriggerOrder = React.useCallback((triggerValues) => {
+		setItems((current) => {
+			const ordered = getTabsOrderedItems(current, triggerValues);
+			return ordered.every((item, index) => item === current[index]) ? current : ordered;
+		});
+	}, []);
+	const updateTriggerWidth = React.useCallback((triggerValue, width) => {
+		setTriggerWidths((current) => current[triggerValue] === width ? current : {
+			...current,
+			[triggerValue]: width
 		});
 	}, []);
 	const selectValue = React.useCallback((nextValue) => {
@@ -159,13 +152,12 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		indicatorIndex,
 		selectedPagerIndex,
 		indicatorRef,
-		listLeft,
 		triggerRects,
 		registerTrigger,
 		registerContent,
 		updateTriggerDisabled,
-		updateTriggerRect,
-		setListLeft,
+		syncTriggerOrder,
+		updateTriggerWidth,
 		setListRef: setListNode,
 		setPagerRef: setPagerNode,
 		selectValue,
@@ -180,12 +172,12 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		indicatorIndex,
 		selectedPagerIndex,
 		indicatorRef,
-		listLeft,
 		triggerRects,
 		registerTrigger,
 		registerContent,
 		updateTriggerDisabled,
-		updateTriggerRect,
+		syncTriggerOrder,
+		updateTriggerWidth,
 		setListNode,
 		setPagerNode,
 		selectValue,
@@ -201,21 +193,42 @@ var TabsRoot = React.forwardRef((props, ref) => {
     </TabsContext.Provider>;
 });
 TabsRoot.displayName = "TabsRoot";
+function getTabsTriggerValues(children) {
+	const values = [];
+	function visit(node) {
+		if (Array.isArray(node)) {
+			node.forEach(visit);
+			return;
+		}
+		if (!React.isValidElement(node)) return;
+		if (node.type === TabsTrigger) {
+			values.push(node.props.value);
+			return;
+		}
+		if (node.type === React.Fragment) visit(node.props.children);
+	}
+	visit(children);
+	return values;
+}
 var TabsList = React.forwardRef((props, ref) => {
 	const { children, className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	const { setListLeft, setListRef } = useTabsContext("TabsList");
+	const { items, setListRef, syncTriggerOrder } = useTabsContext("TabsList");
+	const triggerOrder = React.useMemo(() => getTabsTriggerValues(children), [children]);
+	React.useEffect(() => {
+		"background only";
+		syncTriggerOrder(triggerOrder);
+	}, [
+		items,
+		syncTriggerOrder,
+		triggerOrder
+	]);
 	const mergedRef = React.useCallback((node) => {
 		setListRef(node);
 		if (typeof ref === "function") ref(node);
 		else if (ref) ref.current = node;
 	}, [ref, setListRef]);
-	const handleLayoutChange = React.useCallback((...args) => {
-		"background only";
-		const rect = getLayoutRect(args[0]);
-		if (rect) setListLeft(rect.left);
-	}, [setListLeft]);
-	return <scroll-view ref={mergedRef} {...nativeProps} scroll-orientation="horizontal" scroll-bar-enable={false} bindlayoutchange={handleLayoutChange} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
+	return <scroll-view ref={mergedRef} {...nativeProps} scroll-orientation="horizontal" scroll-bar-enable={false} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
       <view className={classNames.listContent}>{children}</view>
     </scroll-view>;
 });
@@ -246,9 +259,9 @@ var TabsTrigger = React.forwardRef((props, ref) => {
 	});
 	const handleLayoutChange = React.useCallback((...args) => {
 		"background only";
-		const rect = getLayoutRect(args[0]);
-		if (rect) context.updateTriggerRect(triggerValue, rect);
-	}, [context.updateTriggerRect, triggerValue]);
+		const width = getTabsLayoutWidth(args[0]);
+		if (width !== null) context.updateTriggerWidth(triggerValue, width);
+	}, [context.updateTriggerWidth, triggerValue]);
 	const triggerClasses = tabs({
 		...context.variantProps,
 		selected: visuallySelected,
@@ -263,14 +276,14 @@ TabsTrigger.displayName = "TabsTrigger";
 var TabsIndicator = React.forwardRef((props, ref) => {
 	const { className, style, ...nativeProps } = props;
 	const classNames = useClassNames();
-	const { indicatorRef, items, listLeft, indicatorIndex, triggerRects } = useTabsContext("TabsIndicator");
+	const { indicatorRef, items, indicatorIndex, triggerRects } = useTabsContext("TabsIndicator");
 	const position = indicatorIndex;
 	const lowerIndex = Math.max(0, Math.floor(position));
 	const upperIndex = Math.min(items.length - 1, Math.ceil(position));
 	const progress = Math.max(0, Math.min(1, position - lowerIndex));
 	const lowerRect = triggerRects[items[lowerIndex]?.value ?? ""];
 	const upperRect = triggerRects[items[upperIndex]?.value ?? ""] ?? lowerRect;
-	const x = lowerRect ? lowerRect.left - listLeft + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress : 0;
+	const x = lowerRect ? lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress : 0;
 	const width = lowerRect ? lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress : 0;
 	return <view {...ref ? { ref } : {}} main-thread:ref={indicatorRef} {...nativeProps} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={{
 		"--tabs-indicator-x": `${x}px`,
@@ -337,7 +350,7 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 	const tabsContext = useTabsContext("TabsCarouselCamera");
 	const carouselContext = useTabsCarouselContext("TabsCarouselCamera");
 	const swipingRef = React.useRef(false);
-	const { indicatorRef, pagerValues, listLeft, triggerRects } = tabsContext;
+	const { indicatorRef, pagerValues, triggerRects } = tabsContext;
 	const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
 	const mergedRef = React.useCallback((node) => {
 		tabsContext.setPagerRef(node);
@@ -388,7 +401,7 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 		const lowerRect = indicatorRects[lowerIndex];
 		const upperRect = indicatorRects[upperIndex] ?? lowerRect;
 		if (!lowerRect) return;
-		const x = lowerRect.left - listLeft + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
+		const x = lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
 		const width = lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress;
 		indicatorRef.current?.setStyleProperties({
 			"--tabs-indicator-x": `${x}px`,

package/lib/components/Tabs/Tabs.utils.d.ts

@@ -0,0 +1,18 @@
+export interface TabsLayoutChangeEvent {
+    detail?: {
+        width?: number;
+    };
+    params?: {
+        width?: number;
+    };
+}
+export interface TabsLayoutRect {
+    left: number;
+    width: number;
+}
+export declare function getTabsLayoutWidth(event: TabsLayoutChangeEvent): number | null;
+export declare function getTabsOrderedItems<T extends {
+    value: string;
+}>(items: T[], values: string[]): T[];
+export declare function getTabsTriggerRects(values: string[], widths: Record<string, number>): Record<string, TabsLayoutRect>;
+//# sourceMappingURL=Tabs.utils.d.ts.map

package/lib/components/Tabs/Tabs.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,GAAG,IAAI,CAI9E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC7D,KAAK,EAAE,CAAC,EAAE,EACV,MAAM,EAAE,MAAM,EAAE,GACf,CAAC,EAAE,CAUL;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EAAE,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAiBhC"}

package/lib/components/Tabs/Tabs.utils.js

@@ -0,0 +1,37 @@
+//#region src/components/Tabs/Tabs.utils.ts
+function getTabsLayoutWidth(event) {
+	const width = event.detail?.width ?? event.params?.width;
+	if (typeof width !== "number" || !Number.isFinite(width)) return null;
+	return Math.max(0, width);
+}
+function getTabsOrderedItems(items, values) {
+	const itemsByValue = new Map(items.map((item) => [item.value, item]));
+	const ordered = values.flatMap((value) => {
+		const item = itemsByValue.get(value);
+		if (!item) return [];
+		itemsByValue.delete(value);
+		return [item];
+	});
+	ordered.push(...itemsByValue.values());
+	return ordered;
+}
+function getTabsTriggerRects(values, widths) {
+	const rects = Object.create(null);
+	let left = 0;
+	let hasCompletePrefix = true;
+	for (const value of values) {
+		const width = Object.prototype.hasOwnProperty.call(widths, value) ? widths[value] : void 0;
+		if (width === void 0) {
+			hasCompletePrefix = false;
+			continue;
+		}
+		if (hasCompletePrefix) rects[value] = {
+			left,
+			width
+		};
+		left += width;
+	}
+	return rects;
+}
+//#endregion
+export { getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.9.0",
+    "@seed-design/lynx-css": "0.9.1",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/Tabs/Tabs.test.tsx

@@ -3,6 +3,7 @@ import { fireEvent, render } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import * as Tabs from "./Tabs.namespace";
+import { getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils";
 
 function BasicTabs(props: {
   value?: string;
@@ -56,6 +57,45 @@ describe("Tabs", () => {
     expect(second).toHaveAttribute("accessibility-value", "selected");
   });
 
+  it("derives trigger positions from ordered widths instead of platform coordinates", () => {
+    expect(getTabsLayoutWidth({ detail: { width: 128 }, params: { width: 128 } })).toBe(128);
+    expect(
+      getTabsTriggerRects(["one", "two", "three"], {
+        one: 128,
+        two: 128,
+        three: 128,
+      }),
+    ).toEqual({
+      one: { left: 0, width: 128 },
+      two: { left: 128, width: 128 },
+      three: { left: 256, width: 128 },
+    });
+  });
+
+  it("waits for every preceding trigger width before positioning later triggers", () => {
+    expect(getTabsTriggerRects(["one", "two", "three"], { one: 80, three: 120 })).toEqual({
+      one: { left: 0, width: 80 },
+    });
+  });
+
+  it("ignores inherited object properties used as trigger values", () => {
+    expect(getTabsTriggerRects(["toString"], {})).toEqual({});
+    expect(getTabsTriggerRects(["constructor"], {})).toEqual({});
+    expect(getTabsTriggerRects(["__proto__"], {})).toEqual({});
+  });
+
+  it("updates trigger positions when keyed triggers are reordered", () => {
+    const items = [{ value: "one" }, { value: "two" }, { value: "three" }];
+    const reordered = getTabsOrderedItems(items, ["three", "two", "one"]);
+    const rects = getTabsTriggerRects(
+      reordered.map((item) => item.value),
+      { one: 80, two: 80, three: 80 },
+    );
+
+    expect(reordered.map((item) => item.value)).toEqual(["three", "two", "one"]);
+    expect(rects["three"]?.left).toBe(0);
+  });
+
   it("does not select a disabled trigger", () => {
     const onValueChange = vi.fn();
     const { container } = render(

package/src/components/Tabs/Tabs.tsx

@@ -19,11 +19,17 @@ import type {
   LynxViewRef,
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import {
+  getTabsLayoutWidth,
+  getTabsOrderedItems,
+  getTabsTriggerRects,
+  type TabsLayoutRect,
+} from "./Tabs.utils";
 
 type NativeViewProps = IntrinsicElements["view"];
 type NativeViewPagerProps = IntrinsicElements["viewpager"];
 type LayoutChangeHandler = NonNullable<NativeViewProps["bindlayoutchange"]>;
-type TriggerRect = { left: number; width: number };
+type TriggerRect = TabsLayoutRect;
 type TriggerItem = { value: string; disabled: boolean };
 type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel">;
 
@@ -49,13 +55,6 @@ function invokeScrollToOffset(list: NodesRef | null, offset: number) {
   }
 }
 
-function getLayoutRect(event: Parameters<LayoutChangeHandler>[0]): TriggerRect | null {
-  const width = event.detail?.width ?? event.params?.width;
-  const left = event.detail?.left ?? event.params?.left;
-  if (!Number.isFinite(width) || !Number.isFinite(left)) return null;
-  return { width: Math.max(0, width), left };
-}
-
 interface TabsContextValue {
   value: string | undefined;
   visualValue: string | undefined;
@@ -65,13 +64,12 @@ interface TabsContextValue {
   indicatorIndex: number;
   selectedPagerIndex: number;
   indicatorRef: React.RefObject<MainThread.Element>;
-  listLeft: number;
   triggerRects: Record<string, TriggerRect>;
   registerTrigger: (value: string, disabled: boolean) => () => void;
   registerContent: (value: string) => () => void;
   updateTriggerDisabled: (value: string, disabled: boolean) => void;
-  updateTriggerRect: (value: string, rect: TriggerRect) => void;
-  setListLeft: (left: number) => void;
+  syncTriggerOrder: (values: string[]) => void;
+  updateTriggerWidth: (value: string, width: number) => void;
   setListRef: (ref: NodesRef | null) => void;
   setPagerRef: (ref: NodesRef | null) => void;
   selectValue: (value: string) => void;
@@ -151,8 +149,7 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
   const [items, setItems] = React.useState<TriggerItem[]>([]);
   const [contentValues, setContentValues] = React.useState<string[]>([]);
   const [indicatorValue, setIndicatorValue] = React.useState<string | undefined>();
-  const [triggerRects, setTriggerRects] = React.useState<Record<string, TriggerRect>>({});
-  const [listLeft, setListLeft] = React.useState(0);
+  const [triggerWidths, setTriggerWidths] = React.useState<Record<string, number>>({});
   const listRef = React.useRef<NodesRef | null>(null);
   const pagerRef = React.useRef<NodesRef | null>(null);
   const indicatorRef = React.useMainThreadRef<MainThread.Element>(null);
@@ -164,11 +161,19 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       ),
     [contentValues, items],
   );
+  const triggerRects = React.useMemo(
+    () =>
+      getTabsTriggerRects(
+        items.map((item) => item.value),
+        triggerWidths,
+      ),
+    [items, triggerWidths],
+  );
   const visualValue = indicatorValue ?? value;
   const indicatorIndex = items.findIndex((item) => item.value === visualValue);
   const selectedPagerIndex = value === undefined ? -1 : pagerValues.indexOf(value);
   const selectedRect = value === undefined ? undefined : triggerRects[value];
-  const selectedOffset = selectedRect ? Math.max(0, selectedRect.left - listLeft) : null;
+  const selectedOffset = selectedRect?.left ?? null;
 
   const setListNode = React.useCallback(
     (node: NodesRef | null) => {
@@ -195,7 +200,7 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
     return () => {
       "background only";
       setItems((current) => current.filter((item) => item.value !== triggerValue));
-      setTriggerRects((current) => {
+      setTriggerWidths((current) => {
         const next = { ...current };
         delete next[triggerValue];
         return next;
@@ -222,14 +227,19 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
     );
   }, []);
 
-  const updateTriggerRect = React.useCallback((triggerValue: string, rect: TriggerRect) => {
-    setTriggerRects((current) => {
-      const previous = current[triggerValue];
-      if (previous?.left === rect.left && previous.width === rect.width) return current;
-      return { ...current, [triggerValue]: rect };
+  const syncTriggerOrder = React.useCallback((triggerValues: string[]) => {
+    setItems((current) => {
+      const ordered = getTabsOrderedItems(current, triggerValues);
+      return ordered.every((item, index) => item === current[index]) ? current : ordered;
     });
   }, []);
 
+  const updateTriggerWidth = React.useCallback((triggerValue: string, width: number) => {
+    setTriggerWidths((current) =>
+      current[triggerValue] === width ? current : { ...current, [triggerValue]: width },
+    );
+  }, []);
+
   const selectValue = React.useCallback(
     (nextValue: string) => {
       setIndicatorValue(undefined);
@@ -273,13 +283,12 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       indicatorIndex,
       selectedPagerIndex,
       indicatorRef,
-      listLeft,
       triggerRects,
       registerTrigger,
       registerContent,
       updateTriggerDisabled,
-      updateTriggerRect,
-      setListLeft,
+      syncTriggerOrder,
+      updateTriggerWidth,
       setListRef: setListNode,
       setPagerRef: setPagerNode,
       selectValue,
@@ -295,12 +304,12 @@ export const TabsRoot = React.forwardRef<unknown, TabsRootProps>((props, ref) =>
       indicatorIndex,
       selectedPagerIndex,
       indicatorRef,
-      listLeft,
       triggerRects,
       registerTrigger,
       registerContent,
       updateTriggerDisabled,
-      updateTriggerRect,
+      syncTriggerOrder,
+      updateTriggerWidth,
       setListNode,
       setPagerNode,
       selectValue,
@@ -328,12 +337,38 @@ TabsRoot.displayName = "TabsRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+function getTabsTriggerValues(children: React.ReactNode): string[] {
+  const values: string[] = [];
+
+  function visit(node: React.ReactNode) {
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    if (!React.isValidElement<TabsTriggerProps>(node)) return;
+    if (node.type === TabsTrigger) {
+      values.push(node.props.value);
+      return;
+    }
+    if (node.type === React.Fragment) visit(node.props.children);
+  }
+
+  visit(children);
+  return values;
+}
+
 export interface TabsListProps extends LynxStyledElementProps {}
 
 export const TabsList = React.forwardRef<unknown, TabsListProps>((props, ref) => {
   const { children, className, style, ...nativeProps } = props;
   const classNames = useClassNames();
-  const { setListLeft, setListRef } = useTabsContext("TabsList");
+  const { items, setListRef, syncTriggerOrder } = useTabsContext("TabsList");
+  const triggerOrder = React.useMemo(() => getTabsTriggerValues(children), [children]);
+
+  React.useEffect(() => {
+    "background only";
+    syncTriggerOrder(triggerOrder);
+  }, [items, syncTriggerOrder, triggerOrder]);
 
   const mergedRef = React.useCallback(
     (node: NodesRef | null) => {
@@ -344,22 +379,12 @@ export const TabsList = React.forwardRef<unknown, TabsListProps>((props, ref) =>
     [ref, setListRef],
   );
 
-  const handleLayoutChange = React.useCallback<LayoutChangeHandler>(
-    (...args) => {
-      "background only";
-      const rect = getLayoutRect(args[0]);
-      if (rect) setListLeft(rect.left);
-    },
-    [setListLeft],
-  );
-
   return (
     <scroll-view
       ref={mergedRef}
       {...nativeProps}
       scroll-orientation="horizontal"
       scroll-bar-enable={false}
-      bindlayoutchange={handleLayoutChange}
       accessibility-element={false}
       accessibility-traits="tabbar"
       className={clsx(classNames.list, className)}
@@ -412,10 +437,10 @@ export const TabsTrigger = React.forwardRef<unknown, TabsTriggerProps>((props, r
   const handleLayoutChange = React.useCallback<LayoutChangeHandler>(
     (...args) => {
       "background only";
-      const rect = getLayoutRect(args[0]);
-      if (rect) context.updateTriggerRect(triggerValue, rect);
+      const width = getTabsLayoutWidth(args[0]);
+      if (width !== null) context.updateTriggerWidth(triggerValue, width);
     },
-    [context.updateTriggerRect, triggerValue],
+    [context.updateTriggerWidth, triggerValue],
   );
 
   const triggerClasses = tabs({
@@ -454,8 +479,7 @@ export interface TabsIndicatorProps extends LynxStyledElementProps {}
 export const TabsIndicator = React.forwardRef<unknown, TabsIndicatorProps>((props, ref) => {
   const { className, style, ...nativeProps } = props;
   const classNames = useClassNames();
-  const { indicatorRef, items, listLeft, indicatorIndex, triggerRects } =
-    useTabsContext("TabsIndicator");
+  const { indicatorRef, items, indicatorIndex, triggerRects } = useTabsContext("TabsIndicator");
   const position = indicatorIndex;
   const lowerIndex = Math.max(0, Math.floor(position));
   const upperIndex = Math.min(items.length - 1, Math.ceil(position));
@@ -463,7 +487,7 @@ export const TabsIndicator = React.forwardRef<unknown, TabsIndicatorProps>((prop
   const lowerRect = triggerRects[items[lowerIndex]?.value ?? ""];
   const upperRect = triggerRects[items[upperIndex]?.value ?? ""] ?? lowerRect;
   const x = lowerRect
-    ? lowerRect.left - listLeft + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress
+    ? lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress
     : 0;
   const width = lowerRect
     ? lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress
@@ -602,7 +626,7 @@ export const TabsCarouselCamera = React.forwardRef<unknown, TabsCarouselCameraPr
     const tabsContext = useTabsContext("TabsCarouselCamera");
     const carouselContext = useTabsCarouselContext("TabsCarouselCamera");
     const swipingRef = React.useRef(false);
-    const { indicatorRef, pagerValues, listLeft, triggerRects } = tabsContext;
+    const { indicatorRef, pagerValues, triggerRects } = tabsContext;
     const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
 
     const mergedRef = React.useCallback(
@@ -669,10 +693,7 @@ export const TabsCarouselCamera = React.forwardRef<unknown, TabsCarouselCameraPr
       const upperRect = indicatorRects[upperIndex] ?? lowerRect;
       if (!lowerRect) return;
 
-      const x =
-        lowerRect.left -
-        listLeft +
-        ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
+      const x = lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
       const width =
         lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress;
 

package/src/components/Tabs/Tabs.utils.ts

@@ -0,0 +1,56 @@
+export interface TabsLayoutChangeEvent {
+  detail?: {
+    width?: number;
+  };
+  params?: {
+    width?: number;
+  };
+}
+
+export interface TabsLayoutRect {
+  left: number;
+  width: number;
+}
+
+export function getTabsLayoutWidth(event: TabsLayoutChangeEvent): number | null {
+  const width = event.detail?.width ?? event.params?.width;
+  if (typeof width !== "number" || !Number.isFinite(width)) return null;
+  return Math.max(0, width);
+}
+
+export function getTabsOrderedItems<T extends { value: string }>(
+  items: T[],
+  values: string[],
+): T[] {
+  const itemsByValue = new Map(items.map((item) => [item.value, item]));
+  const ordered = values.flatMap((value) => {
+    const item = itemsByValue.get(value);
+    if (!item) return [];
+    itemsByValue.delete(value);
+    return [item];
+  });
+  ordered.push(...itemsByValue.values());
+  return ordered;
+}
+
+export function getTabsTriggerRects(
+  values: string[],
+  widths: Record<string, number>,
+): Record<string, TabsLayoutRect> {
+  const rects = Object.create(null) as Record<string, TabsLayoutRect>;
+  let left = 0;
+  let hasCompletePrefix = true;
+
+  for (const value of values) {
+    // biome-ignore lint/suspicious/noPrototypeBuiltins: Object.hasOwn is unavailable in supported Lynx runtimes.
+    const width = Object.prototype.hasOwnProperty.call(widths, value) ? widths[value] : undefined;
+    if (width === undefined) {
+      hasCompletePrefix = false;
+      continue;
+    }
+    if (hasCompletePrefix) rects[value] = { left, width };
+    left += width;
+  }
+
+  return rects;
+}