@destyler/tabs 0.0.7-beta.7 → 0.0.7-beta.9

package/dist/index.js

@@ -0,0 +1,538 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { clickIfLink, createScope, dataAttr, getEventKey, getFocusables, isAnchorElement, isComposingEvent, isSafari, isSelfTarget, itemById, nextById, nextTick, prevById, queryAll, raf } from "@destyler/dom";
+import { compact, createSplitProps, first, isEqual, last } from "@destyler/utils";
+import { trackElementRect } from "@destyler/element-rect";
+import { createMachine, guards } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
+	getListId: (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`,
+	getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
+	getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
+	getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
+	getListEl: (ctx) => dom.getById(ctx, dom.getListId(ctx)),
+	getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
+	getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
+	getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
+	getElements: (ctx) => {
+		const ownerId = CSS.escape(dom.getListId(ctx));
+		const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
+		return queryAll(dom.getListEl(ctx), selector);
+	},
+	getFirstTriggerEl: (ctx) => first(dom.getElements(ctx)),
+	getLastTriggerEl: (ctx) => last(dom.getElements(ctx)),
+	getNextTriggerEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+	getPrevTriggerEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+	getSelectedContentEl: (ctx) => {
+		if (!ctx.value) return;
+		return dom.getContentEl(ctx, ctx.value);
+	},
+	getSelectedTriggerEl: (ctx) => {
+		if (!ctx.value) return;
+		return dom.getTriggerEl(ctx, ctx.value);
+	},
+	getOffsetRect: (el) => {
+		return {
+			left: el?.offsetLeft ?? 0,
+			top: el?.offsetTop ?? 0,
+			width: el?.offsetWidth ?? 0,
+			height: el?.offsetHeight ?? 0
+		};
+	},
+	getRectById: (ctx, id) => {
+		const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id));
+		return dom.resolveRect(dom.getOffsetRect(tab));
+	},
+	resolveRect: (rect) => ({
+		width: `${rect.width}px`,
+		height: `${rect.height}px`,
+		left: `${rect.left}px`,
+		top: `${rect.top}px`
+	})
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const translations = state.context.translations;
+	const focused = state.matches("focused");
+	const isVertical = state.context.orientation === "vertical";
+	const isHorizontal = state.context.orientation === "horizontal";
+	const composite = state.context.composite;
+	const indicator = state.context.indicatorState;
+	function getTriggerState(props$1) {
+		return {
+			selected: state.context.value === props$1.value,
+			focused: state.context.focusedValue === props$1.value,
+			disabled: !!props$1.disabled
+		};
+	}
+	return {
+		value: state.context.value,
+		focusedValue: state.context.focusedValue,
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value
+			});
+		},
+		clearValue() {
+			send({ type: "CLEAR_VALUE" });
+		},
+		setIndicatorRect(value) {
+			const id = dom.getTriggerId(state.context, value);
+			send({
+				type: "SET_INDICATOR_RECT",
+				id
+			});
+		},
+		syncTabIndex() {
+			send("SYNC_TAB_INDEX");
+		},
+		selectNext(fromValue) {
+			send({
+				type: "TAB_FOCUS",
+				value: fromValue,
+				src: "selectNext"
+			});
+			send({
+				type: "ARROW_NEXT",
+				src: "selectNext"
+			});
+		},
+		selectPrev(fromValue) {
+			send({
+				type: "TAB_FOCUS",
+				value: fromValue,
+				src: "selectPrev"
+			});
+			send({
+				type: "ARROW_PREV",
+				src: "selectPrev"
+			});
+		},
+		focus() {
+			dom.getSelectedTriggerEl(state.context)?.focus();
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"id": dom.getRootId(state.context),
+				"data-orientation": state.context.orientation,
+				"data-focus": dataAttr(focused),
+				"dir": state.context.dir
+			});
+		},
+		getListProps() {
+			return normalize.element({
+				...parts.list.attrs,
+				"id": dom.getListId(state.context),
+				"role": "tablist",
+				"dir": state.context.dir,
+				"data-focus": dataAttr(focused),
+				"aria-orientation": state.context.orientation,
+				"data-orientation": state.context.orientation,
+				"aria-label": translations?.listLabel,
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!isSelfTarget(event)) return;
+					if (isComposingEvent(event)) return;
+					const keyMap = {
+						ArrowDown() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_NEXT",
+								key: "ArrowDown"
+							});
+						},
+						ArrowUp() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_PREV",
+								key: "ArrowUp"
+							});
+						},
+						ArrowLeft() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_PREV",
+								key: "ArrowLeft"
+							});
+						},
+						ArrowRight() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_NEXT",
+								key: "ArrowRight"
+							});
+						},
+						Home() {
+							send("HOME");
+						},
+						End() {
+							send("END");
+						},
+						Enter() {
+							send({ type: "ENTER" });
+						}
+					};
+					const key = getEventKey(event, state.context);
+					const exec = keyMap[key];
+					if (exec) {
+						event.preventDefault();
+						exec(event);
+					}
+				}
+			});
+		},
+		getTriggerState,
+		getTriggerProps(props$1) {
+			const { value, disabled } = props$1;
+			const triggerState = getTriggerState(props$1);
+			return normalize.button({
+				...parts.trigger.attrs,
+				"role": "tab",
+				"type": "button",
+				disabled,
+				"dir": state.context.dir,
+				"data-orientation": state.context.orientation,
+				"data-disabled": dataAttr(disabled),
+				"aria-disabled": disabled,
+				"data-value": value,
+				"aria-selected": triggerState.selected,
+				"data-selected": dataAttr(triggerState.selected),
+				"data-focus": dataAttr(triggerState.focused),
+				"aria-controls": triggerState.selected ? dom.getContentId(state.context, value) : void 0,
+				"data-ownedby": dom.getListId(state.context),
+				"data-ssr": dataAttr(state.context.ssr),
+				"id": dom.getTriggerId(state.context, value),
+				"tabIndex": triggerState.selected && composite ? 0 : -1,
+				onFocus() {
+					send({
+						type: "TAB_FOCUS",
+						value
+					});
+				},
+				onBlur(event) {
+					const target = event.relatedTarget;
+					if (target?.getAttribute("role") !== "tab") send({ type: "TAB_BLUR" });
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (isSafari()) event.currentTarget.focus();
+					send({
+						type: "TAB_CLICK",
+						value
+					});
+				}
+			});
+		},
+		getContentProps(props$1) {
+			const { value } = props$1;
+			const selected = state.context.value === value;
+			return normalize.element({
+				...parts.content.attrs,
+				"dir": state.context.dir,
+				"id": dom.getContentId(state.context, value),
+				"tabIndex": composite ? 0 : -1,
+				"aria-labelledby": dom.getTriggerId(state.context, value),
+				"role": "tabpanel",
+				"data-ownedby": dom.getListId(state.context),
+				"data-selected": dataAttr(selected),
+				"data-orientation": state.context.orientation,
+				"hidden": !selected
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				"id": dom.getIndicatorId(state.context),
+				...parts.indicator.attrs,
+				"dir": state.context.dir,
+				"data-orientation": state.context.orientation,
+				"style": {
+					"--transition-property": "left, right, top, bottom, width, height",
+					"--left": indicator.rect?.left,
+					"--top": indicator.rect?.top,
+					"--width": indicator.rect?.width,
+					"--height": indicator.rect?.height,
+					"position": "absolute",
+					"willChange": "var(--transition-property)",
+					"transitionProperty": "var(--transition-property)",
+					"transitionDuration": indicator.transition ? "var(--transition-duration, 150ms)" : "0ms",
+					"transitionTimingFunction": "var(--transition-timing-function)",
+					[isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+const { not } = guards;
+const invoke = {
+	change: (ctx) => {
+		if (ctx.value == null) return;
+		ctx.onValueChange?.({ value: ctx.value });
+	},
+	focusChange: (ctx) => {
+		if (ctx.focusedValue == null) return;
+		ctx.onFocusChange?.({ focusedValue: ctx.focusedValue });
+	}
+};
+const set = {
+	value: (ctx, value) => {
+		if (isEqual(value, ctx.value)) return;
+		ctx.value = value;
+		invoke.change(ctx);
+	},
+	focusedValue: (ctx, value) => {
+		if (isEqual(value, ctx.focusedValue)) return;
+		ctx.focusedValue = value;
+		invoke.focusChange(ctx);
+	}
+};
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		initial: "idle",
+		context: {
+			dir: "ltr",
+			orientation: "horizontal",
+			activationMode: "automatic",
+			value: null,
+			loopFocus: true,
+			composite: true,
+			navigate(details) {
+				clickIfLink(details.node);
+			},
+			...ctx,
+			focusedValue: ctx.value ?? null,
+			ssr: true,
+			indicatorState: {
+				rendered: false,
+				transition: false,
+				rect: {
+					left: "0px",
+					top: "0px",
+					width: "0px",
+					height: "0px"
+				}
+			}
+		},
+		watch: {
+			value: [
+				"allowIndicatorTransition",
+				"syncIndicatorRect",
+				"syncTabIndex",
+				"navigateIfNeeded"
+			],
+			dir: ["syncIndicatorRect"],
+			orientation: ["syncIndicatorRect"]
+		},
+		on: {
+			SET_VALUE: { actions: "setValue" },
+			CLEAR_VALUE: { actions: "clearValue" },
+			SET_INDICATOR_RECT: { actions: "setIndicatorRect" },
+			SYNC_TAB_INDEX: { actions: "syncTabIndex" }
+		},
+		created: ["syncFocusedValue"],
+		entry: [
+			"checkRenderedElements",
+			"syncIndicatorRect",
+			"syncTabIndex",
+			"syncSsr"
+		],
+		exit: ["cleanupObserver"],
+		states: {
+			idle: { on: {
+				TAB_FOCUS: {
+					target: "focused",
+					actions: "setFocusedValue"
+				},
+				TAB_CLICK: {
+					target: "focused",
+					actions: ["setFocusedValue", "setValue"]
+				}
+			} },
+			focused: { on: {
+				TAB_CLICK: {
+					target: "focused",
+					actions: ["setFocusedValue", "setValue"]
+				},
+				ARROW_PREV: [{
+					guard: "selectOnFocus",
+					actions: ["focusPrevTab", "selectFocusedTab"]
+				}, { actions: "focusPrevTab" }],
+				ARROW_NEXT: [{
+					guard: "selectOnFocus",
+					actions: ["focusNextTab", "selectFocusedTab"]
+				}, { actions: "focusNextTab" }],
+				HOME: [{
+					guard: "selectOnFocus",
+					actions: ["focusFirstTab", "selectFocusedTab"]
+				}, { actions: "focusFirstTab" }],
+				END: [{
+					guard: "selectOnFocus",
+					actions: ["focusLastTab", "selectFocusedTab"]
+				}, { actions: "focusLastTab" }],
+				ENTER: {
+					guard: not("selectOnFocus"),
+					actions: "selectFocusedTab"
+				},
+				TAB_FOCUS: { actions: ["setFocusedValue"] },
+				TAB_BLUR: {
+					target: "idle",
+					actions: "clearFocusedValue"
+				}
+			} }
+		}
+	}, {
+		guards: { selectOnFocus: (ctx$1) => ctx$1.activationMode === "automatic" },
+		actions: {
+			syncFocusedValue(ctx$1) {
+				if (ctx$1.value != null && ctx$1.focusedValue == null) ctx$1.focusedValue = ctx$1.value;
+			},
+			selectFocusedTab(ctx$1) {
+				raf(() => {
+					const nullable = ctx$1.deselectable && ctx$1.value === ctx$1.focusedValue;
+					const value = nullable ? null : ctx$1.focusedValue;
+					set.value(ctx$1, value);
+				});
+			},
+			setFocusedValue(ctx$1, evt) {
+				if (evt.value == null) return;
+				set.focusedValue(ctx$1, evt.value);
+			},
+			clearFocusedValue(ctx$1) {
+				set.focusedValue(ctx$1, null);
+			},
+			setValue(ctx$1, evt) {
+				const nullable = ctx$1.deselectable && ctx$1.value === ctx$1.focusedValue;
+				const value = nullable ? null : evt.value;
+				set.value(ctx$1, value);
+			},
+			clearValue(ctx$1) {
+				set.value(ctx$1, null);
+			},
+			focusFirstTab(ctx$1) {
+				raf(() => {
+					dom.getFirstTriggerEl(ctx$1)?.focus();
+				});
+			},
+			focusLastTab(ctx$1) {
+				raf(() => {
+					dom.getLastTriggerEl(ctx$1)?.focus();
+				});
+			},
+			focusNextTab(ctx$1) {
+				if (!ctx$1.focusedValue) return;
+				const triggerEl = dom.getNextTriggerEl(ctx$1, ctx$1.focusedValue);
+				raf(() => {
+					if (ctx$1.composite) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) set.focusedValue(ctx$1, triggerEl.dataset.value);
+				});
+			},
+			focusPrevTab(ctx$1) {
+				if (!ctx$1.focusedValue) return;
+				const triggerEl = dom.getPrevTriggerEl(ctx$1, ctx$1.focusedValue);
+				raf(() => {
+					if (ctx$1.composite) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) set.focusedValue(ctx$1, triggerEl.dataset.value);
+				});
+			},
+			checkRenderedElements(ctx$1) {
+				ctx$1.indicatorState.rendered = !!dom.getIndicatorEl(ctx$1);
+			},
+			syncTabIndex(ctx$1) {
+				raf(() => {
+					const contentEl = dom.getSelectedContentEl(ctx$1);
+					if (!contentEl) return;
+					const focusables = getFocusables(contentEl);
+					if (focusables.length > 0) contentEl.removeAttribute("tabindex");
+					else contentEl.setAttribute("tabindex", "0");
+				});
+			},
+			cleanupObserver(ctx$1) {
+				ctx$1.indicatorCleanup?.();
+			},
+			allowIndicatorTransition(ctx$1) {
+				ctx$1.indicatorState.transition = true;
+			},
+			setIndicatorRect(ctx$1, evt) {
+				const value = evt.id ?? ctx$1.value;
+				if (!ctx$1.indicatorState.rendered || !value) return;
+				const triggerEl = dom.getTriggerEl(ctx$1, value);
+				if (!triggerEl) return;
+				ctx$1.indicatorState.rect = dom.getRectById(ctx$1, value);
+				nextTick(() => {
+					ctx$1.indicatorState.transition = false;
+				});
+			},
+			syncSsr(ctx$1) {
+				ctx$1.ssr = false;
+			},
+			syncIndicatorRect(ctx$1) {
+				ctx$1.indicatorCleanup?.();
+				const value = ctx$1.value;
+				if (!ctx$1.indicatorState.rendered || !value) return;
+				const triggerEl = dom.getSelectedTriggerEl(ctx$1);
+				if (!triggerEl) return;
+				ctx$1.indicatorCleanup = trackElementRect(triggerEl, {
+					getRect(el) {
+						return dom.getOffsetRect(el);
+					},
+					onChange(rect) {
+						ctx$1.indicatorState.rect = dom.resolveRect(rect);
+						nextTick(() => {
+							ctx$1.indicatorState.transition = false;
+						});
+					}
+				});
+			},
+			navigateIfNeeded(ctx$1) {
+				const triggerEl = dom.getSelectedTriggerEl(ctx$1);
+				if (!isAnchorElement(triggerEl)) return;
+				ctx$1.navigate({
+					value: ctx$1.value,
+					node: triggerEl
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"activationMode",
+	"composite",
+	"deselectable",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopFocus",
+	"navigate",
+	"onFocusChange",
+	"onValueChange",
+	"orientation",
+	"translations",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+const triggerProps = createProps()(["disabled", "value"]);
+const splitTriggerProps = createSplitProps(triggerProps);
+const contentProps = createProps()(["value"]);
+const splitContentProps = createSplitProps(contentProps);
+
+//#endregion
+export { anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };

package/package.json

@@ -1,37 +1,32 @@
 {
   "name": "@destyler/tabs",
   "type": "module",
-  "version": "0.0.7-beta.7",
+  "version": "0.0.7-beta.9",
   "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@zag-js/anatomy": "^0.82.1",
-    "@zag-js/core": "^0.82.1",
-    "@zag-js/dom-event": "^0.80.0",
-    "@zag-js/dom-query": "^0.82.1",
-    "@zag-js/element-rect": "^0.82.1",
-    "@zag-js/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/anatomy": "0.0.7-beta.9",
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/element-rect": "0.0.7-beta.9",
+    "@destyler/types": "0.0.7-beta.9",
+    "@destyler/utils": "0.0.7-beta.9",
+    "@destyler/xstate": "0.0.7-beta.9"
   },
   "scripts": {
     "clear": "rimraf ./dist",
     "clear:node_modules": "rimraf ./node_modules",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }