@destyler/toggle 0.2.10 → 0.2.12

package/dist/index.d.mts

@@ -1,10 +1,7 @@
-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">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "item">;
 //#endregion
 //#region src/types.d.ts
 interface ValueChangeDetails {
@@ -130,15 +127,15 @@ 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" | "disabled" | "defaultValue" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "defaultValue" | "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 declare const props: ("value" | "ids" | "disabled" | "defaultValue" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "disabled" | "defaultValue" | "onValueChange" | "loopFocus" | "rovingFocus" | "orientation" | "multiple" | "dir" | "id" | "getRootNode">];
+export declare const itemProps: (keyof ItemProps)[];
+export declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 //#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 };
+export type { MachineApi as Api, UserDefinedContext as Context, ElementIds, ItemProps, ItemState, Orientation, Service, ValueChangeDetails };

package/dist/index.mjs

@@ -3,11 +3,9 @@ import { createScope, dataAttr, getEventKey, isSafari, isSelfTarget, nextById, p
 import { add, compact, createSplitProps, first, isControlled, isEqual, isPropUserProvided, last, remove, resolveControllableProp, withControllableProvided } 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({
@@ -23,7 +21,6 @@ const dom = createScope({
 	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) {
@@ -32,21 +29,21 @@ function connect(state, send, normalize) {
 	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);
+	function getItemState(props) {
+		const id = dom.getItemId(state.context, props.value);
 		return {
 			id,
-			disabled: Boolean(props$1.disabled || disabled),
-			pressed: !!value.includes(props$1.value),
+			disabled: Boolean(props.disabled || disabled),
+			pressed: !!value.includes(props.value),
 			focused: state.context.focusedId === id
 		};
 	}
 	return {
 		value,
-		setValue(value$1) {
+		setValue(value) {
 			send({
 				type: "VALUE.SET",
-				value: value$1
+				value
 			});
 		},
 		getRootProps() {
@@ -66,7 +63,8 @@ function connect(state, send, normalize) {
 				},
 				onFocus(event) {
 					if (disabled) return;
-					if (!isSelfTarget(event.nativeEvent || event) || !!state.context.isClickFocus || state.context.isTabbingBackward) return;
+					const evt = event.nativeEvent || event;
+					if (!isSelfTarget(evt) || !!state.context.isClickFocus || state.context.isTabbingBackward) return;
 					send("ROOT.FOCUS");
 				},
 				onBlur() {
@@ -76,8 +74,8 @@ function connect(state, send, normalize) {
 			});
 		},
 		getItemState,
-		getItemProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemProps(props) {
+			const itemState = getItemState(props);
 			const rovingTabIndex = itemState.focused ? 0 : -1;
 			return normalize.button({
 				...parts.item.attrs,
@@ -106,7 +104,7 @@ function connect(state, send, normalize) {
 					send({
 						type: "TOGGLE.CLICK",
 						id: itemState.id,
-						value: props$1.value
+						value: props.value
 					});
 					if (isSafari()) event.currentTarget.focus({ preventScroll: true });
 				},
@@ -115,8 +113,8 @@ function connect(state, send, normalize) {
 					if (!isSelfTarget(event)) return;
 					if (itemState.disabled) return;
 					const exec = {
-						Tab(event$1) {
-							const isShiftTab = event$1.shiftKey;
+						Tab(event) {
+							const isShiftTab = event.shiftKey;
 							send({
 								type: "TOGGLE.SHIFT_TAB",
 								isShiftTab
@@ -156,7 +154,6 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 const { not, and } = guards;
@@ -195,7 +192,7 @@ function machine(userContext) {
 			isClickFocus: false,
 			isWithinToolbar: false
 		},
-		computed: { currentLoopFocus: (ctx$1) => ctx$1.loopFocus && !ctx$1.isWithinToolbar },
+		computed: { currentLoopFocus: (ctx) => ctx.loopFocus && !ctx.isWithinToolbar },
 		entry: ["checkIfWithinToolbar"],
 		on: {
 			"VALUE.SET": { actions: ["setValue"] },
@@ -232,64 +229,67 @@ function machine(userContext) {
 		}
 	}, {
 		guards: {
-			isClickFocus: (ctx$1) => ctx$1.isClickFocus,
-			isTabbingBackward: (ctx$1) => ctx$1.isTabbingBackward
+			isClickFocus: (ctx) => ctx.isClickFocus,
+			isTabbingBackward: (ctx) => ctx.isTabbingBackward
 		},
 		actions: {
-			setIsTabbingBackward(ctx$1) {
-				ctx$1.isTabbingBackward = true;
+			setIsTabbingBackward(ctx) {
+				ctx.isTabbingBackward = true;
 			},
-			clearIsTabbingBackward(ctx$1) {
-				ctx$1.isTabbingBackward = false;
+			clearIsTabbingBackward(ctx) {
+				ctx.isTabbingBackward = false;
 			},
-			setClickFocus(ctx$1) {
-				ctx$1.isClickFocus = true;
+			setClickFocus(ctx) {
+				ctx.isClickFocus = true;
 			},
-			clearClickFocus(ctx$1) {
-				ctx$1.isClickFocus = false;
+			clearClickFocus(ctx) {
+				ctx.isClickFocus = false;
 			},
-			checkIfWithinToolbar(ctx$1) {
-				ctx$1.isWithinToolbar = !!dom.getRootEl(ctx$1)?.closest("[role=toolbar]");
+			checkIfWithinToolbar(ctx) {
+				ctx.isWithinToolbar = !!dom.getRootEl(ctx)?.closest("[role=toolbar]");
 			},
-			setFocusedId(ctx$1, evt) {
-				ctx$1.focusedId = evt.id;
+			setFocusedId(ctx, evt) {
+				ctx.focusedId = evt.id;
 			},
-			clearFocusedId(ctx$1) {
-				ctx$1.focusedId = null;
+			clearFocusedId(ctx) {
+				ctx.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);
+			setValue(ctx, evt) {
+				if (evt.type === "VALUE.SET") {
+					set.value(ctx, Array.from(evt.value));
+					return;
+				}
+				if (evt.value == null) return;
+				let next = Array.from(ctx.value);
+				if (ctx.multiple) next = next.includes(evt.value) ? remove(next, evt.value) : add(next, evt.value);
+				else next = isEqual(ctx.value, [evt.value]) ? [] : [evt.value];
+				set.value(ctx, next);
 			},
-			focusNextToggle(ctx$1) {
+			focusNextToggle(ctx) {
 				raf(() => {
-					if (!ctx$1.focusedId) return;
-					dom.getNextEl(ctx$1, ctx$1.focusedId)?.focus({ preventScroll: true });
+					if (!ctx.focusedId) return;
+					dom.getNextEl(ctx, ctx.focusedId)?.focus({ preventScroll: true });
 				});
 			},
-			focusPrevToggle(ctx$1) {
+			focusPrevToggle(ctx) {
 				raf(() => {
-					if (!ctx$1.focusedId) return;
-					dom.getPrevEl(ctx$1, ctx$1.focusedId)?.focus({ preventScroll: true });
+					if (!ctx.focusedId) return;
+					dom.getPrevEl(ctx, ctx.focusedId)?.focus({ preventScroll: true });
 				});
 			},
-			focusFirstToggle(ctx$1) {
+			focusFirstToggle(ctx) {
 				raf(() => {
-					dom.getFirstEl(ctx$1)?.focus({ preventScroll: true });
+					dom.getFirstEl(ctx)?.focus({ preventScroll: true });
 				});
 			},
-			focusLastToggle(ctx$1) {
+			focusLastToggle(ctx) {
 				raf(() => {
-					dom.getLastEl(ctx$1)?.focus({ preventScroll: true });
+					dom.getLastEl(ctx)?.focus({ preventScroll: true });
 				});
 			}
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -309,6 +309,5 @@ const props = createProps()([
 const splitProps = createSplitProps(props);
 const itemProps = createProps()(["value", "disabled"]);
 const splitItemProps = createSplitProps(itemProps);
-
 //#endregion
-export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/toggle",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "A two-state button that can be either on or off.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/dom": "0.2.10",
-    "@destyler/anatomy": "0.2.10",
-    "@destyler/xstate": "0.2.10",
-    "@destyler/types": "0.2.10",
-    "@destyler/utils": "0.2.10"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"