@destyler/tabs 0.2.10 → 0.2.12

package/dist/index.d.mts

@@ -1,14 +1,11 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
-import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
 //#endregion
 //#region src/types.d.ts
 interface ValueChangeDetails {
-  value: string;
+  value: string | null;
 }
 interface FocusChangeDetails {
   focusedValue: string;
@@ -209,17 +206,17 @@ interface MachineApi<T extends PropTypes = PropTypes> {
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("value" | "ids" | "translations" | "loopFocus" | "defaultValue" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "translations" | "loopFocus" | "defaultValue" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode">];
-declare const triggerProps: (keyof TriggerProps)[];
-declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
-declare const contentProps: "value"[];
-declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
+export declare const props: ("value" | "ids" | "translations" | "loopFocus" | "defaultValue" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "translations" | "loopFocus" | "defaultValue" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode">];
+export declare const triggerProps: (keyof TriggerProps)[];
+export declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
+export declare const contentProps: "value"[];
+export declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
 //#endregion
-export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };
+export type { MachineApi as Api, ContentProps, UserDefinedContext as Context, ElementIds, FocusChangeDetails, IntlTranslations, Service, TriggerProps, ValueChangeDetails };

package/dist/index.mjs

@@ -4,11 +4,9 @@ import { compact, createSplitProps, first, isControlled, isEqual, isPropUserProv
 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({
@@ -30,11 +28,11 @@ const dom = createScope({
 	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;
+		if (ctx.value == null) return;
 		return dom.getContentEl(ctx, ctx.value);
 	},
 	getSelectedTriggerEl: (ctx) => {
-		if (!ctx.value) return;
+		if (ctx.value == null) return;
 		return dom.getTriggerEl(ctx, ctx.value);
 	},
 	getOffsetRect: (el) => {
@@ -56,7 +54,6 @@ const dom = createScope({
 		top: `${rect.top}px`
 	})
 });
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
@@ -66,11 +63,11 @@ function connect(state, send, normalize) {
 	const isHorizontal = state.context.orientation === "horizontal";
 	const composite = state.context.composite;
 	const indicator = state.context.indicatorState;
-	function getTriggerState(props$1) {
+	function getTriggerState(props) {
 		return {
-			selected: state.context.value === props$1.value,
-			focused: state.context.focusedValue === props$1.value,
-			disabled: !!props$1.disabled
+			selected: state.context.value === props.value,
+			focused: state.context.focusedValue === props.value,
+			disabled: !!props.disabled
 		};
 	}
 	return {
@@ -88,7 +85,7 @@ function connect(state, send, normalize) {
 		setIndicatorRect(value) {
 			send({
 				type: "SET_INDICATOR_RECT",
-				id: dom.getTriggerId(state.context, value)
+				id: value
 			});
 		},
 		syncTabIndex() {
@@ -142,7 +139,7 @@ function connect(state, send, normalize) {
 					if (event.defaultPrevented) return;
 					if (!isSelfTarget(event)) return;
 					if (isComposingEvent(event)) return;
-					const exec = {
+					const keyMap = {
 						ArrowDown() {
 							if (isHorizontal) return;
 							send({
@@ -180,7 +177,11 @@ function connect(state, send, normalize) {
 						Enter() {
 							send({ type: "ENTER" });
 						}
-					}[getEventKey(event, state.context)];
+					};
+					const key = getEventKey(event, state.context);
+					if (isHorizontal && (key === "ArrowUp" || key === "ArrowDown")) return;
+					if (isVertical && (key === "ArrowLeft" || key === "ArrowRight")) return;
+					const exec = keyMap[key];
 					if (exec) {
 						event.preventDefault();
 						exec(event);
@@ -189,9 +190,9 @@ function connect(state, send, normalize) {
 			});
 		},
 		getTriggerState,
-		getTriggerProps(props$1) {
-			const { value, disabled } = props$1;
-			const triggerState = getTriggerState(props$1);
+		getTriggerProps(props) {
+			const { value, disabled } = props;
+			const triggerState = getTriggerState(props);
 			return normalize.button({
 				...parts.trigger.attrs,
 				"role": "tab",
@@ -230,8 +231,8 @@ function connect(state, send, normalize) {
 				}
 			});
 		},
-		getContentProps(props$1) {
-			const { value } = props$1;
+		getContentProps(props) {
+			const { value } = props;
 			const selected = state.context.value === value;
 			return normalize.element({
 				...parts.content.attrs,
@@ -269,13 +270,30 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 const { not } = guards;
+const scheduledEffects = /* @__PURE__ */ new WeakMap();
+function trackScheduledEffects(ctx) {
+	const pending = /* @__PURE__ */ new Set();
+	scheduledEffects.set(ctx, pending);
+	return () => {
+		if (scheduledEffects.get(ctx) === pending) scheduledEffects.delete(ctx);
+		pending.forEach((cleanup) => cleanup());
+		pending.clear();
+	};
+}
+function scheduleEffect(ctx, callback, schedule = raf) {
+	const pending = scheduledEffects.get(ctx);
+	if (!pending) return;
+	const cleanup = schedule(() => {
+		pending.delete(cleanup);
+		if (scheduledEffects.get(ctx) === pending) callback();
+	});
+	pending.add(cleanup);
+}
 const invoke = {
 	change: (ctx, value) => {
-		if (value == null) return;
 		ctx.onValueChange?.({ value });
 	},
 	focusChange: (ctx) => {
@@ -350,6 +368,7 @@ function machine(userContext) {
 			SYNC_TAB_INDEX: { actions: "syncTabIndex" }
 		},
 		created: ["syncFocusedValue"],
+		activities: [trackScheduledEffects],
 		entry: [
 			"checkRenderedElements",
 			"syncIndicatorRect",
@@ -401,116 +420,115 @@ function machine(userContext) {
 			} }
 		}
 	}, {
-		guards: { selectOnFocus: (ctx$1) => ctx$1.activationMode === "automatic" },
+		guards: { selectOnFocus: (ctx) => ctx.activationMode === "automatic" },
 		actions: {
-			syncFocusedValue(ctx$1) {
-				if (ctx$1.value != null && ctx$1.focusedValue == null) ctx$1.focusedValue = ctx$1.value;
+			syncFocusedValue(ctx) {
+				if (ctx.value != null && ctx.focusedValue == null) ctx.focusedValue = ctx.value;
 			},
-			selectFocusedTab(ctx$1) {
-				raf(() => {
-					const value = ctx$1.deselectable && ctx$1.value === ctx$1.focusedValue ? null : ctx$1.focusedValue;
-					set.value(ctx$1, value);
+			selectFocusedTab(ctx) {
+				scheduleEffect(ctx, () => {
+					const value = ctx.deselectable && ctx.value === ctx.focusedValue ? null : ctx.focusedValue;
+					set.value(ctx, value);
 				});
 			},
-			setFocusedValue(ctx$1, evt) {
+			setFocusedValue(ctx, evt) {
 				if (evt.value == null) return;
-				set.focusedValue(ctx$1, evt.value);
+				set.focusedValue(ctx, evt.value);
 			},
-			clearFocusedValue(ctx$1) {
-				set.focusedValue(ctx$1, null);
+			clearFocusedValue(ctx) {
+				set.focusedValue(ctx, null);
 			},
-			setValue(ctx$1, evt) {
-				const value = ctx$1.deselectable && ctx$1.value === ctx$1.focusedValue ? null : evt.value;
-				set.value(ctx$1, value);
+			setValue(ctx, evt) {
+				const value = ctx.deselectable && evt.type === "TAB_CLICK" && ctx.value === evt.value ? null : evt.value;
+				set.value(ctx, value);
 			},
-			clearValue(ctx$1) {
-				set.value(ctx$1, null);
+			clearValue(ctx) {
+				set.value(ctx, null);
 			},
-			focusFirstTab(ctx$1) {
-				raf(() => {
-					dom.getFirstTriggerEl(ctx$1)?.focus();
+			focusFirstTab(ctx) {
+				scheduleEffect(ctx, () => {
+					dom.getFirstTriggerEl(ctx)?.focus();
 				});
 			},
-			focusLastTab(ctx$1) {
-				raf(() => {
-					dom.getLastTriggerEl(ctx$1)?.focus();
+			focusLastTab(ctx) {
+				scheduleEffect(ctx, () => {
+					dom.getLastTriggerEl(ctx)?.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);
+			focusNextTab(ctx) {
+				if (ctx.focusedValue == null) return;
+				const triggerEl = dom.getNextTriggerEl(ctx, ctx.focusedValue);
+				scheduleEffect(ctx, () => {
+					if (ctx.composite) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) set.focusedValue(ctx, 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);
+			focusPrevTab(ctx) {
+				if (ctx.focusedValue == null) return;
+				const triggerEl = dom.getPrevTriggerEl(ctx, ctx.focusedValue);
+				scheduleEffect(ctx, () => {
+					if (ctx.composite) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) set.focusedValue(ctx, triggerEl.dataset.value);
 				});
 			},
-			checkRenderedElements(ctx$1) {
-				ctx$1.indicatorState.rendered = !!dom.getIndicatorEl(ctx$1);
+			checkRenderedElements(ctx) {
+				ctx.indicatorState.rendered = !!dom.getIndicatorEl(ctx);
 			},
-			syncTabIndex(ctx$1) {
-				raf(() => {
-					const contentEl = dom.getSelectedContentEl(ctx$1);
+			syncTabIndex(ctx) {
+				scheduleEffect(ctx, () => {
+					const contentEl = dom.getSelectedContentEl(ctx);
 					if (!contentEl) return;
 					if (getFocusables(contentEl).length > 0) contentEl.removeAttribute("tabindex");
 					else contentEl.setAttribute("tabindex", "0");
 				});
 			},
-			cleanupObserver(ctx$1) {
-				ctx$1.indicatorCleanup?.();
+			cleanupObserver(ctx) {
+				ctx.indicatorCleanup?.();
 			},
-			allowIndicatorTransition(ctx$1) {
-				ctx$1.indicatorState.transition = true;
+			allowIndicatorTransition(ctx) {
+				ctx.indicatorState.transition = true;
 			},
-			setIndicatorRect(ctx$1, evt) {
-				const value = evt.id ?? ctx$1.value;
-				if (!ctx$1.indicatorState.rendered || !value) return;
-				if (!dom.getTriggerEl(ctx$1, value)) return;
-				ctx$1.indicatorState.rect = dom.getRectById(ctx$1, value);
-				nextTick(() => {
-					ctx$1.indicatorState.transition = false;
-				});
+			setIndicatorRect(ctx, evt) {
+				const value = evt.id ?? ctx.value;
+				if (!ctx.indicatorState.rendered || value == null) return;
+				if (!dom.getTriggerEl(ctx, value)) return;
+				ctx.indicatorState.rect = dom.getRectById(ctx, value);
+				scheduleEffect(ctx, () => {
+					ctx.indicatorState.transition = false;
+				}, nextTick);
 			},
-			syncSsr(ctx$1) {
-				ctx$1.ssr = false;
+			syncSsr(ctx) {
+				ctx.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);
+			syncIndicatorRect(ctx) {
+				ctx.indicatorCleanup?.();
+				const value = ctx.value;
+				if (!ctx.indicatorState.rendered || value == null) return;
+				const triggerEl = dom.getSelectedTriggerEl(ctx);
 				if (!triggerEl) return;
-				ctx$1.indicatorCleanup = trackElementRect(triggerEl, {
+				ctx.indicatorCleanup = trackElementRect(triggerEl, {
 					getRect(el) {
 						return dom.getOffsetRect(el);
 					},
 					onChange(rect) {
-						ctx$1.indicatorState.rect = dom.resolveRect(rect);
-						nextTick(() => {
-							ctx$1.indicatorState.transition = false;
-						});
+						ctx.indicatorState.rect = dom.resolveRect(rect);
+						scheduleEffect(ctx, () => {
+							ctx.indicatorState.transition = false;
+						}, nextTick);
 					}
 				});
 			},
-			navigateIfNeeded(ctx$1) {
-				const triggerEl = dom.getSelectedTriggerEl(ctx$1);
+			navigateIfNeeded(ctx) {
+				const triggerEl = dom.getSelectedTriggerEl(ctx);
 				if (!isAnchorElement(triggerEl)) return;
-				ctx$1.navigate({
-					value: ctx$1.value,
+				ctx.navigate({
+					value: ctx.value,
 					node: triggerEl
 				});
 			}
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -535,6 +553,5 @@ 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 };
+export { anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/tabs",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "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",
@@ -22,12 +22,12 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.10",
-    "@destyler/dom": "0.2.10",
-    "@destyler/types": "0.2.10",
-    "@destyler/element-rect": "0.2.10",
-    "@destyler/utils": "0.2.10",
-    "@destyler/xstate": "0.2.10"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/element-rect": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"