@kanso-labs/kanso-ui 0.34.0 → 0.34.2

package/dist/hooks/useRipple.js

@@ -46,43 +46,17 @@ function isTouch(event) {
 function prefersReducedMotion() {
 	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-/**
-* Renders a press ripple that grows from the pointer's position, or from
-* the element's center for a keyboard or other non-pointer activation.
-*
-* Growth runs via the Web Animations API on a single reused element (no
-* per-click DOM nodes to clean up), over a fixed duration independent of how
-* long the element is held — a real press-and-hold keeps the ripple
-* growing until release, while a quick tap is still held visible for a
-* minimum duration so it plays a complete animation rather than a flicker.
-*
-* Merges its own handlers with `externalHandlers` (e.g. a component's own
-* consumer-supplied props — ripple's own run first, then the external
-* ones) and returns `handlers` to spread onto the interactive element and
-* `surface`, the node to render as a child. The host element must
-* establish a positioning context (`position: relative` or similar) so
-* `surface`, which fills it via `inset: 0`, clips to its bounds and
-* inherits its shape.
-*
-* Pass `enabled: false` to opt out — no ripple listeners are attached and
-* no surface is rendered, leaving `externalHandlers` and a component's own
-* hover/press state layer (if any) untouched.
-*
-* `handlers` and `surface` are hand-memoized (not left to build-tool
-* optimization) so a consumer rendering many instances — a list of icon
-* buttons, say — can memoize around them too, and so stability doesn't
-* depend on any particular compiler being configured.
-*/
-function useRipple(t0, t1) {
-	const $ = c(43);
+function useRipple(t0, t1, t2) {
+	const $ = c(49);
 	const enabled = t0 === void 0 ? true : t0;
-	let t2;
+	let t3;
 	if ($[0] !== t1) {
-		t2 = t1 === void 0 ? {} : t1;
+		t3 = t1 === void 0 ? {} : t1;
 		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	const externalHandlers = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	const externalHandlers = t3;
+	const endsOnRelease = t2 === void 0 ? false : t2;
 	const [pressed, setPressed] = useState(false);
 	const rippleRef = useRef(null);
 	const state = useRef(RippleState.Inactive);
@@ -90,20 +64,25 @@ function useRipple(t0, t1) {
 	const rippleStartEvent = useRef(void 0);
 	const initialSize = useRef(0);
 	const rippleScale = useRef("1");
-	let t3;
+	let t4;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = (event) => {
+		t4 = (event) => {
 			if (!event.isPrimary) return false;
 			const startEvent = rippleStartEvent.current;
-			if (startEvent && startEvent.pointerId !== event.pointerId) return false;
-			return isTouch(event) || event.buttons === 1;
+			return !startEvent || startEvent.pointerId === event.pointerId;
 		};
-		$[2] = t3;
-	} else t3 = $[2];
-	const shouldReactToEvent = t3;
-	let t4;
+		$[2] = t4;
+	} else t4 = $[2];
+	const isPressPointer = t4;
+	let t5;
 	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = (rect) => {
+		t5 = (event_0) => isPressPointer(event_0) && (isTouch(event_0) || event_0.buttons === 1);
+		$[3] = t5;
+	} else t5 = $[3];
+	const shouldReactToEvent = t5;
+	let t6;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (rect) => {
 			const { height, width } = rect;
 			const maxDimension = Math.max(height, width);
 			const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDimension, SOFT_EDGE_MINIMUM_SIZE);
@@ -113,12 +92,12 @@ function useRipple(t0, t1) {
 			rippleScale.current = `${(maxRadius + softEdgeSize) / size}`;
 			return `${size}px`;
 		};
-		$[3] = t4;
-	} else t4 = $[3];
-	const determineRippleSize = t4;
-	let t5;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = (rect_0, positionEvent) => {
+		$[4] = t6;
+	} else t6 = $[4];
+	const determineRippleSize = t6;
+	let t7;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (rect_0, positionEvent) => {
 			const { height: height_0, left, top, width: width_0 } = rect_0;
 			const size_0 = initialSize.current;
 			const endPoint = {
@@ -140,12 +119,12 @@ function useRipple(t0, t1) {
 				}
 			};
 		};
-		$[4] = t5;
-	} else t5 = $[4];
-	const getTranslationCoordinates = t5;
-	let t6;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = (target, positionEvent_0) => {
+		$[5] = t7;
+	} else t7 = $[5];
+	const getTranslationCoordinates = t7;
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (target, positionEvent_0) => {
 			const ripple = rippleRef.current;
 			if (!ripple) return;
 			setPressed(true);
@@ -161,12 +140,12 @@ function useRipple(t0, t1) {
 				fill: "forwards"
 			});
 		};
-		$[5] = t6;
-	} else t6 = $[5];
-	const startPressAnimation = t6;
-	let t7;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = async () => {
+		$[6] = t8;
+	} else t8 = $[6];
+	const startPressAnimation = t8;
+	let t9;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = async () => {
 			rippleStartEvent.current = void 0;
 			state.current = RippleState.Inactive;
 			const animation = growAnimation.current;
@@ -181,221 +160,235 @@ function useRipple(t0, t1) {
 			if (growAnimation.current !== animation) return;
 			setPressed(false);
 		};
-		$[6] = t7;
-	} else t7 = $[6];
-	const endPressAnimation = t7;
-	let t8;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = () => state.current;
-		$[7] = t8;
-	} else t8 = $[7];
-	const getState = t8;
-	let t9;
+		$[7] = t9;
+	} else t9 = $[7];
+	const endPressAnimation = t9;
+	let t10;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = async (event_0) => {
-			if (!shouldReactToEvent(event_0)) return;
-			rippleStartEvent.current = event_0;
-			const target_0 = event_0.currentTarget;
-			if (!isTouch(event_0)) {
+		t10 = () => state.current;
+		$[8] = t10;
+	} else t10 = $[8];
+	const getState = t10;
+	let t11;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = async (event_1) => {
+			if (!shouldReactToEvent(event_1)) return;
+			rippleStartEvent.current = event_1;
+			const target_0 = event_1.currentTarget;
+			if (!isTouch(event_1)) {
 				state.current = RippleState.WaitingForClick;
-				startPressAnimation(target_0, event_0);
+				startPressAnimation(target_0, event_1);
 				return;
 			}
 			state.current = RippleState.TouchDelay;
 			await new Promise(_temp);
 			if (getState() !== RippleState.TouchDelay) return;
 			state.current = RippleState.Holding;
-			startPressAnimation(target_0, event_0);
+			startPressAnimation(target_0, event_1);
 		};
-		$[8] = t9;
-	} else t9 = $[8];
-	const handlePointerDownAsync = t9;
-	let t10;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = (event_1) => {
-			handlePointerDownAsync(event_1);
-		};
-		$[9] = t10;
-	} else t10 = $[9];
-	const handlePointerDown = t10;
-	let t11;
+		$[9] = t11;
+	} else t11 = $[9];
+	const handlePointerDownAsync = t11;
+	let t12;
 	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = (event_2) => {
-			if (!shouldReactToEvent(event_2)) return;
-			if (state.current === RippleState.Holding) {
-				state.current = RippleState.WaitingForClick;
+		t12 = (event_2) => {
+			handlePointerDownAsync(event_2);
+		};
+		$[10] = t12;
+	} else t12 = $[10];
+	const handlePointerDown = t12;
+	let t13;
+	if ($[11] !== endsOnRelease) {
+		t13 = (event_3) => {
+			if (endsOnRelease && !isTouch(event_3)) {
+				if (isPressPointer(event_3) && state.current === RippleState.WaitingForClick) endPressAnimation();
 				return;
 			}
-			if (state.current === RippleState.TouchDelay) {
+			if (!shouldReactToEvent(event_3)) return;
+			if (state.current === RippleState.Holding) state.current = RippleState.WaitingForClick;
+			else if (state.current === RippleState.TouchDelay) {
 				state.current = RippleState.WaitingForClick;
-				startPressAnimation(event_2.currentTarget, rippleStartEvent.current);
+				startPressAnimation(event_3.currentTarget, rippleStartEvent.current);
 			}
+			if (endsOnRelease && state.current === RippleState.WaitingForClick) endPressAnimation();
 		};
-		$[10] = t11;
-	} else t11 = $[10];
-	const handlePointerUp = t11;
-	let t12;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = (event_3) => {
-			if (isTouch(event_3) || !shouldReactToEvent(event_3)) return;
-			if (state.current !== RippleState.Inactive) endPressAnimation();
-		};
-		$[11] = t12;
-	} else t12 = $[11];
-	const handlePointerLeave = t12;
-	let t13;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = (event_4) => {
-			if (!shouldReactToEvent(event_4)) return;
-			endPressAnimation();
-		};
+		$[11] = endsOnRelease;
 		$[12] = t13;
 	} else t13 = $[12];
-	const handlePointerCancel = t13;
+	const handlePointerUp = t13;
 	let t14;
 	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = (event_5) => {
-			if (state.current === RippleState.WaitingForClick) {
-				endPressAnimation();
-				return;
-			}
-			if (state.current === RippleState.Inactive) {
-				startPressAnimation(event_5.currentTarget);
-				endPressAnimation();
-			}
+		t14 = (event_4) => {
+			if (isTouch(event_4) || !shouldReactToEvent(event_4)) return;
+			if (state.current !== RippleState.Inactive) endPressAnimation();
 		};
 		$[13] = t14;
 	} else t14 = $[13];
-	const handleClick = t14;
+	const handlePointerLeave = t14;
 	let t15;
 	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = () => {
+		t15 = (event_5) => {
+			if (!shouldReactToEvent(event_5)) return;
 			endPressAnimation();
 		};
 		$[14] = t15;
 	} else t15 = $[14];
-	const handleContextMenu = t15;
-	const { onClick: onClickProp, onContextMenu: onContextMenuProp, onPointerCancel: onPointerCancelProp, onPointerDown: onPointerDownProp, onPointerLeave: onPointerLeaveProp, onPointerUp: onPointerUpProp } = externalHandlers;
+	const handlePointerCancel = t15;
 	let t16;
-	if ($[15] !== onClickProp) {
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
 		t16 = (event_6) => {
-			handleClick(event_6);
-			onClickProp?.(event_6);
+			if (state.current === RippleState.WaitingForClick) {
+				endPressAnimation();
+				return;
+			}
+			if (state.current === RippleState.Inactive) {
+				startPressAnimation(event_6.currentTarget);
+				endPressAnimation();
+			}
 		};
-		$[15] = onClickProp;
-		$[16] = t16;
-	} else t16 = $[16];
-	const onClick = t16;
+		$[15] = t16;
+	} else t16 = $[15];
+	const handleClick = t16;
 	let t17;
-	if ($[17] !== onContextMenuProp) {
-		t17 = (event_7) => {
-			handleContextMenu();
-			onContextMenuProp?.(event_7);
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = () => {
+			endPressAnimation();
 		};
-		$[17] = onContextMenuProp;
-		$[18] = t17;
-	} else t17 = $[18];
-	const onContextMenu = t17;
+		$[16] = t17;
+	} else t17 = $[16];
+	const handleContextMenu = t17;
+	const { onClick: onClickProp, onContextMenu: onContextMenuProp, onPointerCancel: onPointerCancelProp, onPointerDown: onPointerDownProp, onPointerLeave: onPointerLeaveProp, onPointerUp: onPointerUpProp } = externalHandlers;
 	let t18;
-	if ($[19] !== onPointerCancelProp) {
-		t18 = (event_8) => {
-			handlePointerCancel(event_8);
-			onPointerCancelProp?.(event_8);
+	if ($[17] !== onClickProp) {
+		t18 = (event_7) => {
+			handleClick(event_7);
+			onClickProp?.(event_7);
 		};
-		$[19] = onPointerCancelProp;
-		$[20] = t18;
-	} else t18 = $[20];
-	const onPointerCancel = t18;
+		$[17] = onClickProp;
+		$[18] = t18;
+	} else t18 = $[18];
+	const onClick = t18;
 	let t19;
-	if ($[21] !== onPointerDownProp) {
-		t19 = (event_9) => {
-			handlePointerDown(event_9);
-			onPointerDownProp?.(event_9);
+	if ($[19] !== onContextMenuProp) {
+		t19 = (event_8) => {
+			handleContextMenu();
+			onContextMenuProp?.(event_8);
 		};
-		$[21] = onPointerDownProp;
-		$[22] = t19;
-	} else t19 = $[22];
-	const onPointerDown = t19;
+		$[19] = onContextMenuProp;
+		$[20] = t19;
+	} else t19 = $[20];
+	const onContextMenu = t19;
 	let t20;
-	if ($[23] !== onPointerLeaveProp) {
-		t20 = (event_10) => {
-			handlePointerLeave(event_10);
-			onPointerLeaveProp?.(event_10);
+	if ($[21] !== onPointerCancelProp) {
+		t20 = (event_9) => {
+			handlePointerCancel(event_9);
+			onPointerCancelProp?.(event_9);
 		};
-		$[23] = onPointerLeaveProp;
-		$[24] = t20;
-	} else t20 = $[24];
-	const onPointerLeave = t20;
+		$[21] = onPointerCancelProp;
+		$[22] = t20;
+	} else t20 = $[22];
+	const onPointerCancel = t20;
 	let t21;
-	if ($[25] !== onPointerUpProp) {
-		t21 = (event_11) => {
-			handlePointerUp(event_11);
-			onPointerUpProp?.(event_11);
+	if ($[23] !== onPointerDownProp) {
+		t21 = (event_10) => {
+			handlePointerDown(event_10);
+			onPointerDownProp?.(event_10);
 		};
-		$[25] = onPointerUpProp;
-		$[26] = t21;
-	} else t21 = $[26];
-	const onPointerUp = t21;
+		$[23] = onPointerDownProp;
+		$[24] = t21;
+	} else t21 = $[24];
+	const onPointerDown = t21;
 	let t22;
-	if ($[27] !== onClick || $[28] !== onContextMenu || $[29] !== onPointerCancel || $[30] !== onPointerDown || $[31] !== onPointerLeave || $[32] !== onPointerUp) {
-		t22 = {
-			onClick,
+	if ($[25] !== onPointerLeaveProp) {
+		t22 = (event_11) => {
+			handlePointerLeave(event_11);
+			onPointerLeaveProp?.(event_11);
+		};
+		$[25] = onPointerLeaveProp;
+		$[26] = t22;
+	} else t22 = $[26];
+	const onPointerLeave = t22;
+	let t23;
+	if ($[27] !== handlePointerUp || $[28] !== onPointerUpProp) {
+		t23 = (event_12) => {
+			handlePointerUp(event_12);
+			onPointerUpProp?.(event_12);
+		};
+		$[27] = handlePointerUp;
+		$[28] = onPointerUpProp;
+		$[29] = t23;
+	} else t23 = $[29];
+	const onPointerUp = t23;
+	let t24;
+	if ($[30] !== onContextMenu || $[31] !== onPointerCancel || $[32] !== onPointerDown || $[33] !== onPointerLeave || $[34] !== onPointerUp) {
+		t24 = {
 			onContextMenu,
 			onPointerCancel,
 			onPointerDown,
 			onPointerLeave,
 			onPointerUp
 		};
-		$[27] = onClick;
-		$[28] = onContextMenu;
-		$[29] = onPointerCancel;
-		$[30] = onPointerDown;
-		$[31] = onPointerLeave;
-		$[32] = onPointerUp;
-		$[33] = t22;
-	} else t22 = $[33];
-	const handlers = t22;
-	let t23;
-	if ($[34] !== pressed) {
-		t23 = props(styles.press, pressed && styles.pressed);
-		$[34] = pressed;
-		$[35] = t23;
-	} else t23 = $[35];
-	let t24;
-	if ($[36] !== t23) {
-		t24 = /* @__PURE__ */ jsx("span", {
+		$[30] = onContextMenu;
+		$[31] = onPointerCancel;
+		$[32] = onPointerDown;
+		$[33] = onPointerLeave;
+		$[34] = onPointerUp;
+		$[35] = t24;
+	} else t24 = $[35];
+	const pointer = t24;
+	let t25;
+	if ($[36] !== endsOnRelease || $[37] !== onClick || $[38] !== pointer) {
+		t25 = endsOnRelease ? pointer : {
+			onClick,
+			...pointer
+		};
+		$[36] = endsOnRelease;
+		$[37] = onClick;
+		$[38] = pointer;
+		$[39] = t25;
+	} else t25 = $[39];
+	const handlers = t25;
+	let t26;
+	if ($[40] !== pressed) {
+		t26 = props(styles.press, pressed && styles.pressed);
+		$[40] = pressed;
+		$[41] = t26;
+	} else t26 = $[41];
+	let t27;
+	if ($[42] !== t26) {
+		t27 = /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			...surfaceProps,
 			children: /* @__PURE__ */ jsx("span", {
 				ref: rippleRef,
-				...t23
+				...t26
 			})
 		});
-		$[36] = t23;
-		$[37] = t24;
-	} else t24 = $[37];
-	const surface = t24;
-	let t25;
-	if ($[38] !== handlers || $[39] !== surface) {
-		t25 = {
+		$[42] = t26;
+		$[43] = t27;
+	} else t27 = $[43];
+	const surface = t27;
+	let t28;
+	if ($[44] !== handlers || $[45] !== surface) {
+		t28 = {
 			handlers,
 			surface
 		};
-		$[38] = handlers;
-		$[39] = surface;
-		$[40] = t25;
-	} else t25 = $[40];
-	const enabledResult = t25;
-	let t26;
-	if ($[41] !== externalHandlers) {
-		t26 = {
+		$[44] = handlers;
+		$[45] = surface;
+		$[46] = t28;
+	} else t28 = $[46];
+	const enabledResult = t28;
+	let t29;
+	if ($[47] !== externalHandlers) {
+		t29 = {
 			handlers: externalHandlers,
 			surface: null
 		};
-		$[41] = externalHandlers;
-		$[42] = t26;
-	} else t26 = $[42];
-	return enabled ? enabledResult : t26;
+		$[47] = externalHandlers;
+		$[48] = t29;
+	} else t29 = $[48];
+	return enabled ? enabledResult : t29;
 }
 function _temp(resolve_0) {
 	setTimeout(resolve_0, motionDurationMs.short2);