@kanso-labs/kanso-ui 0.44.1 → 0.45.0

package/dist/hooks/useRipple.js

@@ -46,17 +46,18 @@ function isTouch(event) {
 function prefersReducedMotion() {
 	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function useRipple(t0, t1, t2) {
-	const $ = c(52);
+function useRipple(t0, t1, t2, t3) {
+	const $ = c(63);
 	const enabled = t0 === void 0 ? true : t0;
-	let t3;
+	let t4;
 	if ($[0] !== t1) {
-		t3 = t1 === void 0 ? {} : t1;
+		t4 = t1 === void 0 ? {} : t1;
 		$[0] = t1;
-		$[1] = t3;
-	} else t3 = $[1];
-	const externalHandlers = t3;
+		$[1] = t4;
+	} else t4 = $[1];
+	const externalHandlers = t4;
 	const endsOnRelease = t2 === void 0 ? false : t2;
+	const centred = t3 === void 0 ? false : t3;
 	const [pressed, setPressed] = useState(false);
 	const rippleRef = useRef(null);
 	const state = useRef(RippleState.Inactive);
@@ -65,25 +66,25 @@ function useRipple(t0, t1, t2) {
 	const initialSize = useRef(0);
 	const rippleScale = useRef("1");
 	const removeDocumentListeners = useRef(void 0);
-	let t4;
+	let t5;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = (event) => {
+		t5 = (event) => {
 			if (!event.isPrimary) return false;
 			const startEvent = rippleStartEvent.current;
 			return !startEvent || startEvent.pointerId === event.pointerId;
 		};
-		$[2] = t4;
-	} else t4 = $[2];
-	const isPressPointer = t4;
-	let t5;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = (event_0) => isPressPointer(event_0) && (isTouch(event_0) || event_0.buttons === 1);
-		$[3] = t5;
-	} else t5 = $[3];
-	const shouldReactToEvent = t5;
+		$[2] = t5;
+	} else t5 = $[2];
+	const isPressPointer = t5;
 	let t6;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event_0) => isPressPointer(event_0) && (isTouch(event_0) || event_0.buttons === 1);
+		$[3] = t6;
+	} else t6 = $[3];
+	const shouldReactToEvent = t6;
+	let t7;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = (rect) => {
+		t7 = (rect) => {
 			const { height, width } = rect;
 			const maxDimension = Math.max(height, width);
 			const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDimension, SOFT_EDGE_MINIMUM_SIZE);
@@ -93,12 +94,12 @@ function useRipple(t0, t1, t2) {
 			rippleScale.current = `${(maxRadius + softEdgeSize) / size}`;
 			return `${size}px`;
 		};
-		$[4] = t6;
-	} else t6 = $[4];
-	const determineRippleSize = t6;
-	let t7;
+		$[4] = t7;
+	} else t7 = $[4];
+	const determineRippleSize = t7;
+	let t8;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = (rect_0, positionEvent) => {
+		t8 = (rect_0, positionEvent) => {
 			const { height: height_0, left, top, width: width_0 } = rect_0;
 			const size_0 = initialSize.current;
 			const endPoint = {
@@ -120,12 +121,12 @@ function useRipple(t0, t1, t2) {
 				}
 			};
 		};
-		$[5] = t7;
-	} else t7 = $[5];
-	const getTranslationCoordinates = t7;
-	let t8;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = (target, positionEvent_0) => {
+		$[5] = t8;
+	} else t8 = $[5];
+	const getTranslationCoordinates = t8;
+	let t9;
+	if ($[6] !== centred) {
+		t9 = (target, positionEvent_0) => {
 			const ripple = rippleRef.current;
 			if (!ripple) return;
 			setPressed(true);
@@ -133,7 +134,7 @@ function useRipple(t0, t1, t2) {
 			const surface = ripple.parentElement?.getBoundingClientRect();
 			const rect_1 = surface && (surface.width > 0 || surface.height > 0) ? surface : target.getBoundingClientRect();
 			const size_1 = determineRippleSize(rect_1);
-			const { endPoint: endPoint_0, startPoint: startPoint_0 } = getTranslationCoordinates(rect_1, positionEvent_0);
+			const { endPoint: endPoint_0, startPoint: startPoint_0 } = getTranslationCoordinates(rect_1, centred ? void 0 : positionEvent_0);
 			ripple.style.width = size_1;
 			ripple.style.height = size_1;
 			growAnimation.current = ripple.animate({ transform: [`translate(${startPoint_0.x}px, ${startPoint_0.y}px) scale(1)`, `translate(${endPoint_0.x}px, ${endPoint_0.y}px) scale(${rippleScale.current})`] }, {
@@ -142,12 +143,13 @@ function useRipple(t0, t1, t2) {
 				fill: "forwards"
 			});
 		};
-		$[6] = t8;
-	} else t8 = $[6];
-	const startPressAnimation = t8;
-	let t9;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = async () => {
+		$[6] = centred;
+		$[7] = t9;
+	} else t9 = $[7];
+	const startPressAnimation = t9;
+	let t10;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = async () => {
 			removeDocumentListeners.current?.();
 			removeDocumentListeners.current = void 0;
 			rippleStartEvent.current = void 0;
@@ -164,12 +166,12 @@ function useRipple(t0, t1, t2) {
 			if (growAnimation.current !== animation) return;
 			setPressed(false);
 		};
-		$[7] = t9;
-	} else t9 = $[7];
-	const endPressAnimation = t9;
-	let t10;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = (host, pointerId) => {
+		$[8] = t10;
+	} else t10 = $[8];
+	const endPressAnimation = t10;
+	let t11;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = (host, pointerId) => {
 			removeDocumentListeners.current?.();
 			const document = host.ownerDocument;
 			const handleEnd = (event_1) => {
@@ -183,32 +185,32 @@ function useRipple(t0, t1, t2) {
 				document.removeEventListener("pointerup", handleEnd, true);
 			};
 		};
-		$[8] = t10;
-	} else t10 = $[8];
-	const listenBeyondHost = t10;
-	let t11;
+		$[9] = t11;
+	} else t11 = $[9];
+	const listenBeyondHost = t11;
 	let t12;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = () => () => {
+	let t13;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = () => () => {
 			removeDocumentListeners.current?.();
 		};
-		t12 = [];
-		$[9] = t11;
+		t13 = [];
 		$[10] = t12;
+		$[11] = t13;
 	} else {
-		t11 = $[9];
 		t12 = $[10];
+		t13 = $[11];
 	}
-	useEffect(t11, t12);
-	let t13;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = () => state.current;
-		$[11] = t13;
-	} else t13 = $[11];
-	const getState = t13;
+	useEffect(t12, t13);
 	let t14;
 	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = async (event_2) => {
+		t14 = () => state.current;
+		$[12] = t14;
+	} else t14 = $[12];
+	const getState = t14;
+	let t15;
+	if ($[13] !== startPressAnimation) {
+		t15 = async (event_2) => {
 			if (!shouldReactToEvent(event_2)) return;
 			rippleStartEvent.current = event_2;
 			const target_0 = event_2.currentTarget;
@@ -224,20 +226,22 @@ function useRipple(t0, t1, t2) {
 			state.current = RippleState.Holding;
 			startPressAnimation(target_0, event_2);
 		};
-		$[12] = t14;
-	} else t14 = $[12];
-	const handlePointerDownAsync = t14;
-	let t15;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = (event_3) => {
+		$[13] = startPressAnimation;
+		$[14] = t15;
+	} else t15 = $[14];
+	const handlePointerDownAsync = t15;
+	let t16;
+	if ($[15] !== handlePointerDownAsync) {
+		t16 = (event_3) => {
 			handlePointerDownAsync(event_3);
 		};
-		$[13] = t15;
-	} else t15 = $[13];
-	const handlePointerDown = t15;
-	let t16;
-	if ($[14] !== endsOnRelease) {
-		t16 = (event_4) => {
+		$[15] = handlePointerDownAsync;
+		$[16] = t16;
+	} else t16 = $[16];
+	const handlePointerDown = t16;
+	let t17;
+	if ($[17] !== endsOnRelease || $[18] !== startPressAnimation) {
+		t17 = (event_4) => {
 			if (endsOnRelease && !isTouch(event_4)) {
 				if (isPressPointer(event_4) && state.current === RippleState.WaitingForClick) endPressAnimation();
 				return;
@@ -250,31 +254,32 @@ function useRipple(t0, t1, t2) {
 			}
 			if (endsOnRelease && state.current === RippleState.WaitingForClick) endPressAnimation();
 		};
-		$[14] = endsOnRelease;
-		$[15] = t16;
-	} else t16 = $[15];
-	const handlePointerUp = t16;
-	let t17;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = (event_5) => {
+		$[17] = endsOnRelease;
+		$[18] = startPressAnimation;
+		$[19] = t17;
+	} else t17 = $[19];
+	const handlePointerUp = t17;
+	let t18;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = (event_5) => {
 			if (isTouch(event_5) || !shouldReactToEvent(event_5)) return;
 			if (state.current !== RippleState.Inactive) endPressAnimation();
 		};
-		$[16] = t17;
-	} else t17 = $[16];
-	const handlePointerLeave = t17;
-	let t18;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = (event_6) => {
+		$[20] = t18;
+	} else t18 = $[20];
+	const handlePointerLeave = t18;
+	let t19;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = (event_6) => {
 			if (!shouldReactToEvent(event_6)) return;
 			endPressAnimation();
 		};
-		$[17] = t18;
-	} else t18 = $[17];
-	const handlePointerCancel = t18;
-	let t19;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = (event_7) => {
+		$[21] = t19;
+	} else t19 = $[21];
+	const handlePointerCancel = t19;
+	let t20;
+	if ($[22] !== startPressAnimation) {
+		t20 = (event_7) => {
 			if (state.current === RippleState.WaitingForClick) {
 				endPressAnimation();
 				return;
@@ -284,149 +289,168 @@ function useRipple(t0, t1, t2) {
 				endPressAnimation();
 			}
 		};
-		$[18] = t19;
-	} else t19 = $[18];
-	const handleClick = t19;
-	let t20;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-		t20 = () => {
+		$[22] = startPressAnimation;
+		$[23] = t20;
+	} else t20 = $[23];
+	const handleClick = t20;
+	let t21;
+	if ($[24] !== startPressAnimation) {
+		t21 = () => {
+			const host_0 = rippleRef.current?.parentElement?.parentElement;
+			if (!host_0 || state.current !== RippleState.Inactive) return;
+			startPressAnimation(host_0);
 			endPressAnimation();
 		};
-		$[19] = t20;
-	} else t20 = $[19];
-	const handleContextMenu = t20;
+		$[24] = startPressAnimation;
+		$[25] = t21;
+	} else t21 = $[25];
+	const play = t21;
+	let t22;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = () => {
+			endPressAnimation();
+		};
+		$[26] = t22;
+	} else t22 = $[26];
+	const handleContextMenu = t22;
 	const { onClick: onClickProp, onContextMenu: onContextMenuProp, onPointerCancel: onPointerCancelProp, onPointerDown: onPointerDownProp, onPointerLeave: onPointerLeaveProp, onPointerUp: onPointerUpProp } = externalHandlers;
-	let t21;
-	if ($[20] !== onClickProp) {
-		t21 = (event_8) => {
+	let t23;
+	if ($[27] !== handleClick || $[28] !== onClickProp) {
+		t23 = (event_8) => {
 			handleClick(event_8);
 			onClickProp?.(event_8);
 		};
-		$[20] = onClickProp;
-		$[21] = t21;
-	} else t21 = $[21];
-	const onClick = t21;
-	let t22;
-	if ($[22] !== onContextMenuProp) {
-		t22 = (event_9) => {
+		$[27] = handleClick;
+		$[28] = onClickProp;
+		$[29] = t23;
+	} else t23 = $[29];
+	const onClick = t23;
+	let t24;
+	if ($[30] !== onContextMenuProp) {
+		t24 = (event_9) => {
 			handleContextMenu();
 			onContextMenuProp?.(event_9);
 		};
-		$[22] = onContextMenuProp;
-		$[23] = t22;
-	} else t22 = $[23];
-	const onContextMenu = t22;
-	let t23;
-	if ($[24] !== onPointerCancelProp) {
-		t23 = (event_10) => {
+		$[30] = onContextMenuProp;
+		$[31] = t24;
+	} else t24 = $[31];
+	const onContextMenu = t24;
+	let t25;
+	if ($[32] !== onPointerCancelProp) {
+		t25 = (event_10) => {
 			handlePointerCancel(event_10);
 			onPointerCancelProp?.(event_10);
 		};
-		$[24] = onPointerCancelProp;
-		$[25] = t23;
-	} else t23 = $[25];
-	const onPointerCancel = t23;
-	let t24;
-	if ($[26] !== onPointerDownProp) {
-		t24 = (event_11) => {
+		$[32] = onPointerCancelProp;
+		$[33] = t25;
+	} else t25 = $[33];
+	const onPointerCancel = t25;
+	let t26;
+	if ($[34] !== handlePointerDown || $[35] !== onPointerDownProp) {
+		t26 = (event_11) => {
 			handlePointerDown(event_11);
 			onPointerDownProp?.(event_11);
 		};
-		$[26] = onPointerDownProp;
-		$[27] = t24;
-	} else t24 = $[27];
-	const onPointerDown = t24;
-	let t25;
-	if ($[28] !== onPointerLeaveProp) {
-		t25 = (event_12) => {
+		$[34] = handlePointerDown;
+		$[35] = onPointerDownProp;
+		$[36] = t26;
+	} else t26 = $[36];
+	const onPointerDown = t26;
+	let t27;
+	if ($[37] !== onPointerLeaveProp) {
+		t27 = (event_12) => {
 			handlePointerLeave(event_12);
 			onPointerLeaveProp?.(event_12);
 		};
-		$[28] = onPointerLeaveProp;
-		$[29] = t25;
-	} else t25 = $[29];
-	const onPointerLeave = t25;
-	let t26;
-	if ($[30] !== handlePointerUp || $[31] !== onPointerUpProp) {
-		t26 = (event_13) => {
+		$[37] = onPointerLeaveProp;
+		$[38] = t27;
+	} else t27 = $[38];
+	const onPointerLeave = t27;
+	let t28;
+	if ($[39] !== handlePointerUp || $[40] !== onPointerUpProp) {
+		t28 = (event_13) => {
 			handlePointerUp(event_13);
 			onPointerUpProp?.(event_13);
 		};
-		$[30] = handlePointerUp;
-		$[31] = onPointerUpProp;
-		$[32] = t26;
-	} else t26 = $[32];
-	const onPointerUp = t26;
-	let t27;
-	if ($[33] !== onContextMenu || $[34] !== onPointerCancel || $[35] !== onPointerDown || $[36] !== onPointerLeave || $[37] !== onPointerUp) {
-		t27 = {
+		$[39] = handlePointerUp;
+		$[40] = onPointerUpProp;
+		$[41] = t28;
+	} else t28 = $[41];
+	const onPointerUp = t28;
+	let t29;
+	if ($[42] !== onContextMenu || $[43] !== onPointerCancel || $[44] !== onPointerDown || $[45] !== onPointerLeave || $[46] !== onPointerUp) {
+		t29 = {
 			onContextMenu,
 			onPointerCancel,
 			onPointerDown,
 			onPointerLeave,
 			onPointerUp
 		};
-		$[33] = onContextMenu;
-		$[34] = onPointerCancel;
-		$[35] = onPointerDown;
-		$[36] = onPointerLeave;
-		$[37] = onPointerUp;
-		$[38] = t27;
-	} else t27 = $[38];
-	const pointer = t27;
-	let t28;
-	if ($[39] !== endsOnRelease || $[40] !== onClick || $[41] !== pointer) {
-		t28 = endsOnRelease ? pointer : {
+		$[42] = onContextMenu;
+		$[43] = onPointerCancel;
+		$[44] = onPointerDown;
+		$[45] = onPointerLeave;
+		$[46] = onPointerUp;
+		$[47] = t29;
+	} else t29 = $[47];
+	const pointer = t29;
+	let t30;
+	if ($[48] !== endsOnRelease || $[49] !== onClick || $[50] !== pointer) {
+		t30 = endsOnRelease ? pointer : {
 			onClick,
 			...pointer
 		};
-		$[39] = endsOnRelease;
-		$[40] = onClick;
-		$[41] = pointer;
-		$[42] = t28;
-	} else t28 = $[42];
-	const handlers = t28;
-	let t29;
-	if ($[43] !== pressed) {
-		t29 = props(styles.press, pressed && styles.pressed);
-		$[43] = pressed;
-		$[44] = t29;
-	} else t29 = $[44];
-	let t30;
-	if ($[45] !== t29) {
-		t30 = /* @__PURE__ */ jsx("span", {
+		$[48] = endsOnRelease;
+		$[49] = onClick;
+		$[50] = pointer;
+		$[51] = t30;
+	} else t30 = $[51];
+	const handlers = t30;
+	let t31;
+	if ($[52] !== pressed) {
+		t31 = props(styles.press, pressed && styles.pressed);
+		$[52] = pressed;
+		$[53] = t31;
+	} else t31 = $[53];
+	let t32;
+	if ($[54] !== t31) {
+		t32 = /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			...surfaceProps,
 			children: /* @__PURE__ */ jsx("span", {
 				ref: rippleRef,
-				...t29
+				...t31
 			})
 		});
-		$[45] = t29;
-		$[46] = t30;
-	} else t30 = $[46];
-	const surface_0 = t30;
-	let t31;
-	if ($[47] !== handlers || $[48] !== surface_0) {
-		t31 = {
+		$[54] = t31;
+		$[55] = t32;
+	} else t32 = $[55];
+	const surface_0 = t32;
+	let t33;
+	if ($[56] !== handlers || $[57] !== play || $[58] !== surface_0) {
+		t33 = {
 			handlers,
+			play,
 			surface: surface_0
 		};
-		$[47] = handlers;
-		$[48] = surface_0;
-		$[49] = t31;
-	} else t31 = $[49];
-	const enabledResult = t31;
-	let t32;
-	if ($[50] !== externalHandlers) {
-		t32 = {
+		$[56] = handlers;
+		$[57] = play;
+		$[58] = surface_0;
+		$[59] = t33;
+	} else t33 = $[59];
+	const enabledResult = t33;
+	let t34;
+	if ($[60] !== externalHandlers || $[61] !== play) {
+		t34 = {
 			handlers: externalHandlers,
+			play,
 			surface: null
 		};
-		$[50] = externalHandlers;
-		$[51] = t32;
-	} else t32 = $[51];
-	return enabled ? enabledResult : t32;
+		$[60] = externalHandlers;
+		$[61] = play;
+		$[62] = t34;
+	} else t34 = $[62];
+	return enabled ? enabledResult : t34;
 }
 function _temp(resolve_0) {
 	setTimeout(resolve_0, motionDurationMs.short2);