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

package/dist/index.d.ts

@@ -1,136 +1,139 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, Orientation, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-export { Orientation } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } from '@zag-js/core';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item">;
+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, Orientation, PropTypes, RequiredBy } from "@destyler/types";
 
+//#region src/anatomy.d.ts
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "item">;
+//#endregion
+//#region src/types.d.ts
 interface ValueChangeDetails {
-    value: string[];
+  value: string[];
 }
 type ElementIds = Partial<{
-    root: string;
-    item: (value: string) => string;
+  root: string;
+  item: (value: string) => string;
 }>;
 interface PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the toggle. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-    /**
-     * Whether the toggle is disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * The values of the toggles in the group.
-     */
-    value: string[];
-    /**
-     * Function to call when the toggle is clicked.
-     */
-    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
-    /**
-     * Whether to loop focus inside the toggle group.
-     * @default true
-     */
-    loopFocus: boolean;
-    /**
-     *  Whether to use roving tab index to manage focus.
-     * @default true
-     */
-    rovingFocus?: boolean | undefined;
-    /**
-     * The orientation of the toggle group.
-     * @default "horizontal"
-     */
-    orientation: Orientation;
-    /**
-     * Whether to allow multiple toggles to be selected.
-     */
-    multiple?: boolean | undefined;
+  /**
+   * The ids of the elements in the toggle. Useful for composition.
+   */
+  ids?: ElementIds | undefined;
+  /**
+   * Whether the toggle is disabled.
+   */
+  disabled?: boolean | undefined;
+  /**
+   * The values of the toggles in the group.
+   */
+  value: string[];
+  /**
+   * Function to call when the toggle is clicked.
+   */
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  /**
+   * Whether to loop focus inside the toggle group.
+   * @default true
+   */
+  loopFocus: boolean;
+  /**
+   *  Whether to use roving tab index to manage focus.
+   * @default true
+   */
+  rovingFocus?: boolean | undefined;
+  /**
+   * The orientation of the toggle group.
+   * @default "horizontal"
+   */
+  orientation: Orientation;
+  /**
+   * Whether to allow multiple toggles to be selected.
+   */
+  multiple?: boolean | undefined;
 }
 type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
 type ComputedContext = Readonly<{
-    currentLoopFocus: boolean;
+  currentLoopFocus: boolean;
 }>;
 interface PrivateContext {
-    /**
-     * @internal
-     * Whether the user is tabbing backward.
-     */
-    isTabbingBackward: boolean;
-    /**
-     * @internal
-     * Whether the toggle was focused by a click.
-     */
-    isClickFocus: boolean;
-    /**
-     * @internal
-     * The value of the toggle that was focused.
-     */
-    focusedId: string | null;
-    /**
-     * @internal
-     * Whether the toggle group is within a toolbar.
-     * This is used to determine whether to use roving tab index.
-     */
-    isWithinToolbar: boolean;
-}
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+  /**
+   * @internal
+   * Whether the user is tabbing backward.
+   */
+  isTabbingBackward: boolean;
+  /**
+   * @internal
+   * Whether the toggle was focused by a click.
+   */
+  isClickFocus: boolean;
+  /**
+   * @internal
+   * The value of the toggle that was focused.
+   */
+  focusedId: string | null;
+  /**
+   * @internal
+   * Whether the toggle group is within a toolbar.
+   * This is used to determine whether to use roving tab index.
+   */
+  isWithinToolbar: boolean;
 }
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
 interface MachineState {
-    value: 'idle' | 'focused';
+  value: 'idle' | 'focused';
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type State = XState<MachineContext, MachineState>;
+type Send = XSend<AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, AnyEventObject>;
 interface ItemProps {
-    value: string;
-    disabled?: boolean | undefined;
+  value: string;
+  disabled?: boolean | undefined;
 }
 interface ItemState {
-    /**
-     * The underlying id of the item.
-     */
-    id: string;
-    /**
-     * Whether the toggle item is disabled.
-     */
-    disabled: boolean;
-    /**
-     * Whether the toggle item is pressed.
-     */
-    pressed: boolean;
-    /**
-     * Whether the toggle item is focused.
-     */
-    focused: boolean;
+  /**
+   * The underlying id of the item.
+   */
+  id: string;
+  /**
+   * Whether the toggle item is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Whether the toggle item is pressed.
+   */
+  pressed: boolean;
+  /**
+   * Whether the toggle item is focused.
+   */
+  focused: boolean;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
-    /**
-     * The value of the toggle group.
-     */
-    value: string[];
-    /**
-     * Function to set the value of the toggle group.
-     */
-    setValue: (values: string[]) => void;
-    /**
-     * Returns the state of the toggle item.
-     */
-    getItemState: (props: ItemProps) => ItemState;
-    getRootProps: () => T['element'];
-    getItemProps: (props: ItemProps) => T['button'];
+  /**
+   * The value of the toggle group.
+   */
+  value: string[];
+  /**
+   * Function to set the value of the toggle group.
+   */
+  setValue: (values: string[]) => void;
+  /**
+   * Returns the state of the toggle item.
+   */
+  getItemState: (props: ItemProps) => ItemState;
+  getRootProps: () => T['element'];
+  getItemProps: (props: ItemProps) => T['button'];
 }
-
+//#endregion
+//#region src/connect.d.ts
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-declare const props: ("ids" | "disabled" | "value" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "disabled" | "value" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "id" | "dir" | "getRootNode">];
+//#endregion
+//#region src/machine.d.ts
+declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+//#endregion
+//#region src/props.d.ts
+declare const props: ("value" | "ids" | "disabled" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode">];
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
-
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+//#endregion
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Orientation, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/dist/index.js

@@ -0,0 +1,307 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { createScope, dataAttr, getEventKey, isSafari, isSelfTarget, nextById, prevById, queryAll, raf } from "@destyler/dom";
+import { add, compact, createSplitProps, first, isEqual, last, remove } from "@destyler/utils";
+import { createMachine, guards } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("toggle-group").parts("root", "item");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `toggle:${ctx.id}`,
+	getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `toggle:${ctx.id}:${value}`,
+	getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+	getElements: (ctx) => {
+		const ownerId = CSS.escape(dom.getRootId(ctx));
+		const selector = `[data-ownedby='${ownerId}']:not([data-disabled])`;
+		return queryAll(dom.getRootEl(ctx), selector);
+	},
+	getFirstEl: (ctx) => first(dom.getElements(ctx)),
+	getLastEl: (ctx) => last(dom.getElements(ctx)),
+	getNextEl: (ctx, id) => nextById(dom.getElements(ctx), id, ctx.currentLoopFocus),
+	getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), id, ctx.currentLoopFocus)
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const value = state.context.value;
+	const disabled = state.context.disabled;
+	const isSingle = !state.context.multiple;
+	const rovingFocus = state.context.rovingFocus;
+	const isHorizontal = state.context.orientation === "horizontal";
+	function getItemState(props$1) {
+		const id = dom.getItemId(state.context, props$1.value);
+		return {
+			id,
+			disabled: Boolean(props$1.disabled || disabled),
+			pressed: !!value.includes(props$1.value),
+			focused: state.context.focusedId === id
+		};
+	}
+	return {
+		value,
+		setValue(value$1) {
+			send({
+				type: "VALUE.SET",
+				value: value$1
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"id": dom.getRootId(state.context),
+				"dir": state.context.dir,
+				"role": isSingle ? "radiogroup" : "group",
+				"tabIndex": state.context.isTabbingBackward ? -1 : 0,
+				"data-disabled": dataAttr(disabled),
+				"data-orientation": state.context.orientation,
+				"data-focus": dataAttr(state.context.focusedId != null),
+				"style": { outline: "none" },
+				onMouseDown() {
+					if (disabled) return;
+					send("ROOT.MOUSE_DOWN");
+				},
+				onFocus(event) {
+					if (disabled) return;
+					const evt = event.nativeEvent || event;
+					if (!isSelfTarget(evt) || !!state.context.isClickFocus || state.context.isTabbingBackward) return;
+					send("ROOT.FOCUS");
+				},
+				onBlur() {
+					if (disabled) return;
+					send("ROOT.BLUR");
+				}
+			});
+		},
+		getItemState,
+		getItemProps(props$1) {
+			const itemState = getItemState(props$1);
+			const rovingTabIndex = itemState.focused ? 0 : -1;
+			return normalize.button({
+				...parts.item.attrs,
+				"id": itemState.id,
+				"type": "button",
+				"data-ownedby": dom.getRootId(state.context),
+				"data-focus": dataAttr(itemState.focused),
+				"disabled": itemState.disabled,
+				"tabIndex": rovingFocus ? rovingTabIndex : void 0,
+				"role": isSingle ? "radio" : void 0,
+				"aria-checked": isSingle ? itemState.pressed : void 0,
+				"aria-pressed": isSingle ? void 0 : itemState.pressed,
+				"data-disabled": dataAttr(itemState.disabled),
+				"data-orientation": state.context.orientation,
+				"dir": state.context.dir,
+				"data-state": itemState.pressed ? "on" : "off",
+				onFocus() {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.FOCUS",
+						id: itemState.id
+					});
+				},
+				onClick(event) {
+					if (itemState.disabled) return;
+					send({
+						type: "TOGGLE.CLICK",
+						id: itemState.id,
+						value: props$1.value
+					});
+					if (isSafari()) event.currentTarget.focus({ preventScroll: true });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!isSelfTarget(event)) return;
+					if (itemState.disabled) return;
+					const keyMap = {
+						Tab(event$1) {
+							const isShiftTab = event$1.shiftKey;
+							send({
+								type: "TOGGLE.SHIFT_TAB",
+								isShiftTab
+							});
+						},
+						ArrowLeft() {
+							if (!rovingFocus || !isHorizontal) return;
+							send("TOGGLE.FOCUS_PREV");
+						},
+						ArrowRight() {
+							if (!rovingFocus || !isHorizontal) return;
+							send("TOGGLE.FOCUS_NEXT");
+						},
+						ArrowUp() {
+							if (!rovingFocus || isHorizontal) return;
+							send("TOGGLE.FOCUS_PREV");
+						},
+						ArrowDown() {
+							if (!rovingFocus || isHorizontal) return;
+							send("TOGGLE.FOCUS_NEXT");
+						},
+						Home() {
+							if (!rovingFocus) return;
+							send("TOGGLE.FOCUS_FIRST");
+						},
+						End() {
+							if (!rovingFocus) return;
+							send("TOGGLE.FOCUS_LAST");
+						}
+					};
+					const exec = keyMap[getEventKey(event)];
+					if (exec) {
+						exec(event);
+						if (event.key !== "Tab") event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+const { not, and } = guards;
+const invoke = { change(ctx) {
+	ctx.onValueChange?.({ value: Array.from(ctx.value) });
+} };
+const set = { value(ctx, value) {
+	if (isEqual(ctx.value, value)) return;
+	ctx.value = value;
+	invoke.change(ctx);
+} };
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "toggle-group",
+		initial: "idle",
+		context: {
+			value: [],
+			disabled: false,
+			orientation: "horizontal",
+			rovingFocus: true,
+			loopFocus: true,
+			...ctx,
+			focusedId: null,
+			isTabbingBackward: false,
+			isClickFocus: false,
+			isWithinToolbar: false
+		},
+		computed: { currentLoopFocus: (ctx$1) => ctx$1.loopFocus && !ctx$1.isWithinToolbar },
+		entry: ["checkIfWithinToolbar"],
+		on: {
+			"VALUE.SET": { actions: ["setValue"] },
+			"TOGGLE.CLICK": { actions: ["setValue"] },
+			"ROOT.MOUSE_DOWN": { actions: ["setClickFocus"] }
+		},
+		states: {
+			idle: { on: {
+				"ROOT.FOCUS": {
+					target: "focused",
+					guard: not(and("isClickFocus", "isTabbingBackward")),
+					actions: ["focusFirstToggle", "clearClickFocus"]
+				},
+				"TOGGLE.FOCUS": {
+					target: "focused",
+					actions: ["setFocusedId"]
+				}
+			} },
+			focused: { on: {
+				"ROOT.BLUR": {
+					target: "idle",
+					actions: ["clearIsTabbingBackward"]
+				},
+				"TOGGLE.FOCUS": { actions: ["setFocusedId"] },
+				"TOGGLE.FOCUS_NEXT": { actions: ["focusNextToggle"] },
+				"TOGGLE.FOCUS_PREV": { actions: ["focusPrevToggle"] },
+				"TOGGLE.FOCUS_FIRST": { actions: ["focusFirstToggle"] },
+				"TOGGLE.FOCUS_LAST": { actions: ["focusLastToggle"] },
+				"TOGGLE.SHIFT_TAB": {
+					target: "idle",
+					actions: ["setIsTabbingBackward"]
+				}
+			} }
+		}
+	}, {
+		guards: {
+			isClickFocus: (ctx$1) => ctx$1.isClickFocus,
+			isTabbingBackward: (ctx$1) => ctx$1.isTabbingBackward
+		},
+		actions: {
+			setIsTabbingBackward(ctx$1) {
+				ctx$1.isTabbingBackward = true;
+			},
+			clearIsTabbingBackward(ctx$1) {
+				ctx$1.isTabbingBackward = false;
+			},
+			setClickFocus(ctx$1) {
+				ctx$1.isClickFocus = true;
+			},
+			clearClickFocus(ctx$1) {
+				ctx$1.isClickFocus = false;
+			},
+			checkIfWithinToolbar(ctx$1) {
+				const closestToolbar = dom.getRootEl(ctx$1)?.closest("[role=toolbar]");
+				ctx$1.isWithinToolbar = !!closestToolbar;
+			},
+			setFocusedId(ctx$1, evt) {
+				ctx$1.focusedId = evt.id;
+			},
+			clearFocusedId(ctx$1) {
+				ctx$1.focusedId = null;
+			},
+			setValue(ctx$1, evt) {
+				if (!evt.value) return;
+				let next = Array.from(ctx$1.value);
+				if (ctx$1.multiple) next = next.includes(evt.value) ? remove(next, evt.value) : add(next, evt.value);
+				else next = isEqual(ctx$1.value, [evt.value]) ? [] : [evt.value];
+				set.value(ctx$1, next);
+			},
+			focusNextToggle(ctx$1) {
+				raf(() => {
+					if (!ctx$1.focusedId) return;
+					dom.getNextEl(ctx$1, ctx$1.focusedId)?.focus({ preventScroll: true });
+				});
+			},
+			focusPrevToggle(ctx$1) {
+				raf(() => {
+					if (!ctx$1.focusedId) return;
+					dom.getPrevEl(ctx$1, ctx$1.focusedId)?.focus({ preventScroll: true });
+				});
+			},
+			focusFirstToggle(ctx$1) {
+				raf(() => {
+					dom.getFirstEl(ctx$1)?.focus({ preventScroll: true });
+				});
+			},
+			focusLastToggle(ctx$1) {
+				raf(() => {
+					dom.getLastEl(ctx$1)?.focus({ preventScroll: true });
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopFocus",
+	"multiple",
+	"onValueChange",
+	"orientation",
+	"rovingFocus",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["value", "disabled"]);
+const splitItemProps = createSplitProps(itemProps);
+
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/package.json

@@ -1,36 +1,31 @@
 {
   "name": "@destyler/toggle",
   "type": "module",
-  "version": "0.0.7-beta.7",
+  "version": "0.0.7-beta.9",
   "description": "A two-state button that can be either on or off.",
   "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/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/anatomy": "0.0.7-beta.9",
+    "@destyler/types": "0.0.7-beta.9",
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/xstate": "0.0.7-beta.9",
+    "@destyler/utils": "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"
   }
 }