@destyler/splitter 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, PropTypes, Required, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "panel" | "resizeTrigger">;
 //#endregion
 //#region src/types.d.ts
 type PanelId = string | number;
@@ -152,17 +149,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: ("orientation" | "size" | "defaultSize" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "id" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "orientation" | "size" | "defaultSize" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "id" | "getRootNode">];
-declare const panelProps: (keyof PanelProps)[];
-declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
-declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
-declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
+export declare const props: ("orientation" | "size" | "defaultSize" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "id" | "getRootNode")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "orientation" | "size" | "defaultSize" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "id" | "getRootNode">];
+export declare const panelProps: (keyof PanelProps)[];
+export declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
+export declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];
+export declare const splitResizeTriggerProps: <Props extends ResizeTriggerProps>(props: Props) => [ResizeTriggerProps, Omit<Props, keyof ResizeTriggerProps>];
 //#endregion
-export { type MachineApi as Api, type UserDefinedContext as Context, type MachineState, type PanelProps, type PanelSizeData, type ResizeTriggerProps, type Service, type SizeChangeDetails, anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
+export type { MachineApi as Api, UserDefinedContext as Context, MachineState, PanelProps, PanelSizeData, ResizeTriggerProps, Service, SizeChangeDetails };

package/dist/index.mjs

@@ -3,13 +3,12 @@ import { createScope, dataAttr, getEventKey, getEventStep, queryAll, raf, trackP
 import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("splitter").parts("root", "panel", "resizeTrigger");
 const parts = anatomy.build();
-
 //#endregion
 //#region src/dom.ts
+const cursorStyles = /* @__PURE__ */ new WeakMap();
 const dom = createScope({
 	getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
 	getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
@@ -44,21 +43,20 @@ const dom = createScope({
 		return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
 	},
 	setupGlobalCursor(ctx) {
-		const styleEl = dom.getById(ctx, dom.getGlobalCursorId(ctx));
-		const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
-		if (styleEl) styleEl.textContent = textContent;
-		else {
-			const style = dom.getDoc(ctx).createElement("style");
+		let style = cursorStyles.get(ctx);
+		if (!style) {
+			style = dom.getDoc(ctx).createElement("style");
 			style.id = dom.getGlobalCursorId(ctx);
-			style.textContent = textContent;
-			dom.getDoc(ctx).head.appendChild(style);
+			cursorStyles.set(ctx, style);
 		}
+		style.textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
+		if (!style.isConnected) dom.getDoc(ctx).head.appendChild(style);
 	},
 	removeGlobalCursor(ctx) {
-		dom.getById(ctx, dom.getGlobalCursorId(ctx))?.remove();
+		cursorStyles.get(ctx)?.remove();
+		cursorStyles.delete(ctx);
 	}
 });
-
 //#endregion
 //#region src/utils.ts
 function validateSize(key, size) {
@@ -68,7 +66,9 @@ function getNormalizedPanels(ctx) {
 	let numOfPanelsWithoutSize = 0;
 	let totalSize = 0;
 	let totalMinSize = 0;
-	const panels = ctx.size.map((panel) => {
+	const size = ctx.size;
+	if (size === void 0) throw new TypeError("Splitter size must be initialized before normalizing panels");
+	const panels = size.map((panel) => {
 		const minSize = panel.minSize ?? 0;
 		const maxSize = panel.maxSize ?? 100;
 		totalMinSize += minSize;
@@ -111,8 +111,8 @@ function getNormalizedPanels(ctx) {
 function getHandlePanels(ctx, id = ctx.activeResizeId) {
 	const [beforeId, afterId] = id?.split(":") ?? [];
 	if (!beforeId || !afterId) return;
-	const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
-	const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
+	const beforeIndex = ctx.previousPanels.findIndex((panel) => String(panel.id) === beforeId);
+	const afterIndex = ctx.previousPanels.findIndex((panel) => String(panel.id) === afterId);
 	if (beforeIndex === -1 || afterIndex === -1) return;
 	const before = ctx.previousPanels[beforeIndex];
 	const after = ctx.previousPanels[afterIndex];
@@ -177,7 +177,6 @@ function getPanelBounds(ctx, id) {
 function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
@@ -185,17 +184,18 @@ function connect(state, send, normalize) {
 	const focused = state.hasTag("focus");
 	const dragging = state.matches("dragging");
 	const panels = state.context.panels;
-	function getResizeTriggerState(props$1) {
-		const { id, disabled } = props$1;
-		const panelIds = id.split(":").map((id$1) => dom.getPanelId(state.context, id$1));
-		const panels$1 = getHandleBounds(state.context, id);
+	function getResizeTriggerState(props) {
+		const { id, disabled } = props;
+		const ids = id.split(":");
+		const panelIds = ids.map((id) => dom.getPanelId(state.context, id));
+		const panels = getHandleBounds(state.context, id);
 		return {
 			disabled: !!disabled,
 			focused: state.context.activeResizeId === id && focused,
 			panelIds,
-			min: panels$1?.min,
-			max: panels$1?.max,
-			value: 0
+			min: panels?.min,
+			max: panels?.max,
+			value: state.context.panels.find((panel) => String(panel.id) === ids[0])?.end ?? 0
 		};
 	}
 	return {
@@ -241,8 +241,8 @@ function connect(state, send, normalize) {
 				}
 			});
 		},
-		getPanelProps(props$1) {
-			const { id } = props$1;
+		getPanelProps(props) {
+			const { id } = props;
 			return normalize.element({
 				...parts.panel.attrs,
 				"data-orientation": state.context.orientation,
@@ -252,9 +252,9 @@ function connect(state, send, normalize) {
 				"style": dom.getPanelStyle(state.context, id)
 			});
 		},
-		getResizeTriggerProps(props$1) {
-			const { id, disabled, step = 1 } = props$1;
-			const triggerState = getResizeTriggerState(props$1);
+		getResizeTriggerProps(props) {
+			const { id, disabled, step = 1 } = props;
+			const triggerState = getResizeTriggerState(props);
 			return normalize.element({
 				...parts.resizeTrigger.attrs,
 				"dir": state.context.dir,
@@ -280,6 +280,7 @@ function connect(state, send, normalize) {
 					[horizontal ? "minHeight" : "minWidth"]: "0"
 				},
 				onPointerDown(event) {
+					if (event.defaultPrevented || event.button !== 0 || event.isPrimary === false) return;
 					if (disabled) {
 						event.preventDefault();
 						return;
@@ -378,7 +379,6 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 function cloneSize(size) {
@@ -423,7 +423,6 @@ function machine(userContext) {
 			orientation: "horizontal",
 			activeResizeId: null,
 			previousPanels: [],
-			size: [],
 			initialSize: [],
 			activeResizeState: {
 				isAtMin: false,
@@ -435,16 +434,20 @@ function machine(userContext) {
 			size: cloneSize(initialSize)
 		},
 		created: ["setPreviousPanels", "setInitialSize"],
-		watch: { size: ["setActiveResizeState"] },
+		watch: { size: ["setPreviousPanels", "setActiveResizeState"] },
 		computed: {
-			isHorizontal: (ctx$1) => ctx$1.orientation === "horizontal",
-			panels: (ctx$1) => getNormalizedPanels(ctx$1)
+			isHorizontal: (ctx) => ctx.orientation === "horizontal",
+			panels: (ctx) => getNormalizedPanels(ctx)
 		},
 		on: { SET_PANEL_SIZE: { actions: "setPanelSize" } },
 		states: {
 			"idle": {
 				entry: ["clearActiveHandleId"],
 				on: {
+					POINTER_DOWN: {
+						target: "dragging",
+						actions: ["setActiveHandleId"]
+					},
 					POINTER_OVER: {
 						target: "hover:temp",
 						actions: ["setActiveHandleId"]
@@ -509,13 +512,13 @@ function machine(userContext) {
 				tags: ["focus"],
 				entry: ["focusResizeHandle", "storeInitialDragState"],
 				activities: ["trackPointerMove"],
+				exit: ["clearGlobalCursor"],
 				on: {
 					POINTER_MOVE: { actions: ["setPointerValue", "setGlobalCursor"] },
 					POINTER_UP: {
 						target: "focused",
 						actions: [
 							"setPreviousPanels",
-							"clearGlobalCursor",
 							"blurResizeHandle",
 							"invokeOnResizeEnd"
 						]
@@ -524,8 +527,9 @@ function machine(userContext) {
 			}
 		}
 	}, {
-		activities: { trackPointerMove: (ctx$1, _evt, { send }) => {
-			return trackPointerMove(dom.getDoc(ctx$1), {
+		activities: { trackPointerMove: (ctx, _evt, { send }) => {
+			const doc = dom.getDoc(ctx);
+			return trackPointerMove(doc, {
 				onPointerMove(info) {
 					send({
 						type: "POINTER_MOVE",
@@ -538,38 +542,38 @@ function machine(userContext) {
 			});
 		} },
 		guards: {
-			isStartPanelAtMin: (ctx$1) => ctx$1.activeResizeState.isAtMin,
-			isStartPanelAtMax: (ctx$1) => ctx$1.activeResizeState.isAtMax,
-			isHorizontal: (ctx$1) => ctx$1.isHorizontal,
-			isVertical: (ctx$1) => !ctx$1.isHorizontal
+			isStartPanelAtMin: (ctx) => ctx.activeResizeState.isAtMin,
+			isStartPanelAtMax: (ctx) => ctx.activeResizeState.isAtMax,
+			isHorizontal: (ctx) => ctx.isHorizontal,
+			isVertical: (ctx) => !ctx.isHorizontal
 		},
 		delays: { HOVER_DELAY: 250 },
 		actions: {
-			setGlobalCursor(ctx$1) {
-				dom.setupGlobalCursor(ctx$1);
+			setGlobalCursor(ctx) {
+				dom.setupGlobalCursor(ctx);
 			},
-			clearGlobalCursor(ctx$1) {
-				dom.removeGlobalCursor(ctx$1);
+			clearGlobalCursor(ctx) {
+				dom.removeGlobalCursor(ctx);
 			},
-			invokeOnResizeEnd(ctx$1) {
-				invoke.sizeChangeEnd(ctx$1);
+			invokeOnResizeEnd(ctx) {
+				invoke.sizeChangeEnd(ctx);
 			},
-			setActiveHandleId(ctx$1, evt) {
-				ctx$1.activeResizeId = evt.id;
+			setActiveHandleId(ctx, evt) {
+				ctx.activeResizeId = evt.id;
 			},
-			clearActiveHandleId(ctx$1) {
-				ctx$1.activeResizeId = null;
+			clearActiveHandleId(ctx) {
+				ctx.activeResizeId = null;
 			},
-			setInitialSize(ctx$1) {
-				ctx$1.initialSize = ctx$1.panels.slice().map((panel) => ({
+			setInitialSize(ctx) {
+				ctx.initialSize = ctx.panels.slice().map((panel) => ({
 					id: panel.id,
 					size: panel.size
 				}));
 			},
-			setPanelSize(ctx$1, evt) {
+			setPanelSize(ctx, evt) {
 				const { id, size } = evt;
-				const next = cloneSize(ctx$1.size ?? []);
-				const index = next.findIndex((panel$1) => panel$1.id === id);
+				const next = cloneSize(ctx.size ?? []);
+				const index = next.findIndex((panel) => panel.id === id);
 				if (index === -1) return;
 				const panel = next[index];
 				const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
@@ -577,13 +581,13 @@ function machine(userContext) {
 					...panel,
 					size: panelSize
 				};
-				set.size(ctx$1, next);
+				set.size(ctx, next);
 			},
-			setStartPanelToMin(ctx$1) {
-				const bounds = getPanelBounds(ctx$1);
+			setStartPanelToMin(ctx) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				const next = cloneSize(ctx$1.size ?? []);
+				const next = cloneSize(ctx.size ?? []);
 				next[before.index] = {
 					...next[before.index],
 					size: before.min
@@ -592,13 +596,13 @@ function machine(userContext) {
 					...next[after.index],
 					size: after.min
 				};
-				set.size(ctx$1, next);
+				set.size(ctx, next);
 			},
-			setStartPanelToMax(ctx$1) {
-				const bounds = getPanelBounds(ctx$1);
+			setStartPanelToMax(ctx) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				const next = cloneSize(ctx$1.size ?? []);
+				const next = cloneSize(ctx.size ?? []);
 				next[before.index] = {
 					...next[before.index],
 					size: before.max
@@ -607,13 +611,13 @@ function machine(userContext) {
 					...next[after.index],
 					size: after.max
 				};
-				set.size(ctx$1, next);
+				set.size(ctx, next);
 			},
-			expandStartPanel(ctx$1, evt) {
-				const bounds = getPanelBounds(ctx$1);
+			expandStartPanel(ctx, evt) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				const next = cloneSize(ctx$1.size ?? []);
+				const next = cloneSize(ctx.size ?? []);
 				next[before.index] = {
 					...next[before.index],
 					size: before.up(evt.step)
@@ -622,13 +626,13 @@ function machine(userContext) {
 					...next[after.index],
 					size: after.down(evt.step)
 				};
-				set.size(ctx$1, next);
+				set.size(ctx, next);
 			},
-			shrinkStartPanel(ctx$1, evt) {
-				const bounds = getPanelBounds(ctx$1);
+			shrinkStartPanel(ctx, evt) {
+				const bounds = getPanelBounds(ctx);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				const next = cloneSize(ctx$1.size ?? []);
+				const next = cloneSize(ctx.size ?? []);
 				next[before.index] = {
 					...next[before.index],
 					size: before.down(evt.step)
@@ -637,79 +641,77 @@ function machine(userContext) {
 					...next[after.index],
 					size: after.up(evt.step)
 				};
-				set.size(ctx$1, next);
+				set.size(ctx, next);
 			},
-			resetStartPanel(ctx$1, evt) {
-				const bounds = getPanelBounds(ctx$1, evt.id);
+			resetStartPanel(ctx, evt) {
+				const bounds = getPanelBounds(ctx, evt.id);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				const next = cloneSize(ctx$1.size ?? []);
+				const next = cloneSize(ctx.size ?? []);
 				next[before.index] = {
 					...next[before.index],
-					size: ctx$1.initialSize[before.index].size
+					size: ctx.initialSize[before.index].size
 				};
 				next[after.index] = {
 					...next[after.index],
-					size: ctx$1.initialSize[after.index].size
+					size: ctx.initialSize[after.index].size
 				};
-				set.size(ctx$1, next);
+				set.size(ctx, next);
 			},
-			focusResizeHandle(ctx$1) {
+			focusResizeHandle(ctx) {
 				raf(() => {
-					dom.getActiveHandleEl(ctx$1)?.focus({ preventScroll: true });
+					dom.getActiveHandleEl(ctx)?.focus({ preventScroll: true });
 				});
 			},
-			blurResizeHandle(ctx$1) {
+			blurResizeHandle(ctx) {
 				raf(() => {
-					dom.getActiveHandleEl(ctx$1)?.blur();
+					dom.getActiveHandleEl(ctx)?.blur();
 				});
 			},
-			storeInitialDragState(ctx$1, evt) {
-				const panels = getHandlePanels(ctx$1);
+			storeInitialDragState(ctx, evt) {
+				const panels = getHandlePanels(ctx);
 				if (!panels) return;
 				const { before, after } = panels;
-				ctx$1.initialDragPoint = evt.point;
-				ctx$1.initialDragSizes = {
+				ctx.initialDragPoint = evt.point;
+				ctx.initialDragSizes = {
 					before: before.size,
 					after: after.size
 				};
 			},
-			setPreviousPanels(ctx$1) {
-				ctx$1.previousPanels = ctx$1.panels.slice();
+			setPreviousPanels(ctx) {
+				ctx.previousPanels = ctx.panels.slice();
 			},
-			setActiveResizeState(ctx$1) {
-				const panels = getPanelBounds(ctx$1);
+			setActiveResizeState(ctx) {
+				const panels = getPanelBounds(ctx);
 				if (!panels) return;
 				const { before } = panels;
-				ctx$1.activeResizeState = {
+				ctx.activeResizeState = {
 					isAtMin: before.isAtMin,
 					isAtMax: before.isAtMax
 				};
 			},
-			setPointerValue(ctx$1, evt) {
-				const panels = getHandlePanels(ctx$1);
-				const bounds = getHandleBounds(ctx$1);
+			setPointerValue(ctx, evt) {
+				const panels = getHandlePanels(ctx);
+				const bounds = getHandleBounds(ctx);
 				if (!panels || !bounds) return;
-				const rootEl = dom.getRootEl(ctx$1);
+				const rootEl = dom.getRootEl(ctx);
 				if (!rootEl) return;
-				if (!ctx$1.initialDragPoint || !ctx$1.initialDragSizes) return;
+				if (!ctx.initialDragPoint || !ctx.initialDragSizes) return;
 				const { before, after } = panels;
-				const rootSize = ctx$1.isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;
-				const currentPos = ctx$1.isHorizontal ? evt.point.x : evt.point.y;
-				const initialPos = ctx$1.isHorizontal ? ctx$1.initialDragPoint.x : ctx$1.initialDragPoint.y;
-				const deltaPercent = (ctx$1.dir === "rtl" && ctx$1.isHorizontal ? initialPos - currentPos : currentPos - initialPos) / rootSize * 100;
-				let newBeforeSize = ctx$1.initialDragSizes.before + deltaPercent;
-				let newAfterSize = ctx$1.initialDragSizes.after - deltaPercent;
-				ctx$1.activeResizeState = {
-					isAtMin: newBeforeSize <= before.minSize,
-					isAtMax: newBeforeSize >= before.maxSize
+				const rootSize = ctx.isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;
+				const currentPos = ctx.isHorizontal ? evt.point.x : evt.point.y;
+				const initialPos = ctx.isHorizontal ? ctx.initialDragPoint.x : ctx.initialDragPoint.y;
+				const deltaPercent = (ctx.dir === "rtl" && ctx.isHorizontal ? initialPos - currentPos : currentPos - initialPos) / rootSize * 100;
+				const totalSize = ctx.initialDragSizes.before + ctx.initialDragSizes.after;
+				const min = Math.max(before.minSize, totalSize - after.maxSize);
+				const max = Math.min(before.maxSize, totalSize - after.minSize);
+				const newBeforeSize = clamp(ctx.initialDragSizes.before + deltaPercent, min, max);
+				const newAfterSize = totalSize - newBeforeSize;
+				ctx.activeResizeState = {
+					isAtMin: newBeforeSize === min,
+					isAtMax: newBeforeSize === max
 				};
-				newBeforeSize = clamp(newBeforeSize, before.minSize, before.maxSize);
-				newAfterSize = clamp(newAfterSize, after.minSize, after.maxSize);
-				const totalSize = ctx$1.initialDragSizes.before + ctx$1.initialDragSizes.after;
-				if (newBeforeSize + newAfterSize > totalSize) if (deltaPercent > 0) newAfterSize = totalSize - newBeforeSize;
-				else newBeforeSize = totalSize - newAfterSize;
-				const next = cloneSize(ctx$1.size ?? []);
+				const next = cloneSize(ctx.size ?? []);
 				next[before.index] = {
 					...next[before.index],
 					size: newBeforeSize
@@ -718,12 +720,11 @@ function machine(userContext) {
 					...next[after.index],
 					size: newAfterSize
 				};
-				set.size(ctx$1, next);
+				set.size(ctx, next);
 			}
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -746,6 +747,5 @@ const resizeTriggerProps = createProps()([
 	"step"
 ]);
 const splitResizeTriggerProps = createSplitProps(resizeTriggerProps);
-
 //#endregion
-export { anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };
+export { anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/splitter",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "A component that divides your layout into resizable sections.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.10",
-    "@destyler/dom": "0.2.10",
-    "@destyler/types": "0.2.10",
-    "@destyler/utils": "0.2.10",
-    "@destyler/xstate": "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"