Fixed reactivity issues with interactions

skeletonlabs · May 13, 2024 · d49219b · d49219b
1 parent 31cdf01
commit d49219b
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 89 deletions.
diff --git a/src/lib/hooks/useClick/index.svelte.ts b/src/lib/hooks/useClick/index.svelte.ts
@@ -71,13 +71,12 @@ function useClick(context: FloatingContext, options: UseClickOptions = {}): Elem
 	let pointerType: PointerEvent['pointerType'] | undefined = undefined;
 	let didKeyDown = false;
 
-	const elementProps = $derived.by(() => {
-		if (!enabled) {
-			return {};
-		}
-
-		return {
-			reference: {
+	return {
+		get reference() {
+			if (!enabled) {
+				return {};
+			}
+			return {
 				onpointerdown: (event: PointerEvent) => {
 					pointerType = event.pointerType;
 				},
@@ -159,11 +158,9 @@ function useClick(context: FloatingContext, options: UseClickOptions = {}): Elem
 						}
 					}
 				},
-			},
-		};
-	});
-
-	return elementProps;
+			};
+		},
+	};
 }
 
 export { useClick, type UseClickOptions };
diff --git a/src/lib/hooks/useHover/index.svelte.ts b/src/lib/hooks/useHover/index.svelte.ts
@@ -248,35 +248,34 @@ function useHover(context: FloatingContext, options: UseHoverOptions = {}): Elem
 		};
 	});
 
-	const elementProps = $derived.by(() => {
-		if (!enabled) {
-			return {};
-		}
-
-		const onmouseenter = (event: MouseEvent) => {
-			clearTimeout(timeout);
-			blockMouseMove = false;
-
-			if (
-				(mouseOnly && !isMouseLikePointerType(pointerType)) ||
-				(restMs > 0 && !getDelay(delay, 'open'))
-			) {
-				return;
+	return {
+		get reference() {
+			if (!enabled) {
+				return {};
 			}
 
-			const openDelay = getDelay(delay, 'open', pointerType);
-
-			if (openDelay) {
-				timeout = window.setTimeout(() => {
+			const onmouseenter = (event: MouseEvent) => {
+				clearTimeout(timeout);
+				blockMouseMove = false;
+
+				if (
+					(mouseOnly && !isMouseLikePointerType(pointerType)) ||
+					(restMs > 0 && !getDelay(delay, 'open'))
+				) {
+					return;
+				}
+
+				const openDelay = getDelay(delay, 'open', pointerType);
+
+				if (openDelay) {
+					timeout = window.setTimeout(() => {
+						onOpenChange(true, event, 'hover');
+					}, openDelay);
+				} else {
 					onOpenChange(true, event, 'hover');
-				}, openDelay);
-			} else {
-				onOpenChange(true, event, 'hover');
-			}
-		};
-
-		return {
-			reference: {
+				}
+			};
+			return {
 				onpointerdown: (event: PointerEvent) => (pointerType = event.pointerType),
 				onpointerenter: (event: PointerEvent) => (pointerType = event.pointerType),
 				onmouseenter,
@@ -367,8 +366,14 @@ function useHover(context: FloatingContext, options: UseHoverOptions = {}): Elem
 						})(event);
 					}
 				},
-			},
-			floating: {
+			};
+		},
+
+		get floating() {
+			if (!enabled) {
+				return {};
+			}
+			return {
 				onmouseenter() {
 					clearTimeout(timeout);
 				},
@@ -388,11 +393,9 @@ function useHover(context: FloatingContext, options: UseHoverOptions = {}): Elem
 					}
 					closeWithDelay(event, false);
 				},
-			},
-		};
-	});
-
-	return elementProps;
+			};
+		},
+	};
 }
 
 export { useHover, type UseHoverOptions };
diff --git a/src/lib/hooks/useInteractions/index.svelte.ts b/src/lib/hooks/useInteractions/index.svelte.ts
@@ -84,21 +84,21 @@ function mergeProps<Key extends keyof ElementProps>(
 }
 
 function useInteractions(propsList: Array<ElementProps | void> = []): UseInteractionsReturn {
-	const getReferenceProps = (userProps?: HTMLAttributes<Element>) => {
+	const getReferenceProps = $derived((userProps?: HTMLAttributes<Element>) => {
 		return mergeProps(userProps, propsList, 'reference');
-	};
+	});
 
-	const getFloatingProps = (userProps?: HTMLAttributes<Element>) => {
+	const getFloatingProps = $derived((userProps?: HTMLAttributes<Element>) => {
 		return mergeProps(userProps, propsList, 'floating');
-	};
+	});
 
-	const getItemProps = (
-		userProps?: Omit<HTMLAttributes<Element>, 'selected' | 'active'> & ExtendedUserProps,
-	) => {
-		return mergeProps(userProps, propsList, 'item');
-	};
+	const getItemProps = $derived(
+		(userProps?: Omit<HTMLAttributes<Element>, 'selected' | 'active'> & ExtendedUserProps) => {
+			return mergeProps(userProps, propsList, 'item');
+		},
+	);
 
 	return { getReferenceProps, getFloatingProps, getItemProps };
 }
 
-export { useInteractions, type UseInteractionsReturn, type ElementProps };
+export { useInteractions, type UseInteractionsReturn, type ElementProps, type ExtendedUserProps };
diff --git a/src/lib/hooks/useRole/index.svelte.ts b/src/lib/hooks/useRole/index.svelte.ts
@@ -1,6 +1,6 @@
 import { Map as ReactiveMap } from 'svelte/reactivity';
 import type { FloatingContext } from '../useFloating/index.svelte.js';
-import type { ElementProps } from '../useInteractions/index.svelte.js';
+import type { ElementProps, ExtendedUserProps } from '../useInteractions/index.svelte.js';
 import { useId } from '../useId/index.js';
 
 type AriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
@@ -42,29 +42,12 @@ function useRole(context: FloatingContext, options: UseRoleOptions = {}): Elemen
 
 	const isNested = parentId != null;
 
-	const elementProps: ElementProps = $derived.by(() => {
-		if (!enabled) {
-			return {};
-		}
-
-		const floatingProps = {
-			id: floatingId,
-			...(ariaRole && { role: ariaRole }),
-		};
-
-		if (ariaRole === 'tooltip' || role === 'label') {
+	return {
+		get reference() {
+			if (!enabled) {
+				return {};
+			}
 			return {
-				reference: {
-					[`aria-${role === 'label' ? 'labelledby' : 'describedby'}`]: open
-						? floatingId
-						: undefined,
-				},
-				floating: floatingProps,
-			};
-		}
-
-		return {
-			reference: {
 				'aria-expanded': open ? 'true' : 'false',
 				'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
 				'aria-controls': open ? floatingId : undefined,
@@ -73,12 +56,22 @@ function useRole(context: FloatingContext, options: UseRoleOptions = {}): Elemen
 				...(ariaRole === 'menu' && isNested && { role: 'menuitem' }),
 				...(role === 'select' && { 'aria-autocomplete': 'none' }),
 				...(role === 'combobox' && { 'aria-autocomplete': 'list' }),
-			},
-			floating: {
-				...floatingProps,
-				...(ariaRole === 'menu' && { 'aria-labelledby': referenceId }),
-			},
-			item: ({ active, selected }) => {
+			};
+		},
+		get floating() {
+			if (!enabled) {
+				return {};
+			}
+			return {
+				id: floatingId,
+				...(ariaRole && { role: ariaRole }),
+			};
+		},
+		get item() {
+			if (!enabled) {
+				return {};
+			}
+			return ({ active, selected }: ExtendedUserProps) => {
 				const commonProps = {
 					role: 'option',
 					...(active && { id: `${context.floatingId}-option` }),
@@ -102,11 +95,9 @@ function useRole(context: FloatingContext, options: UseRoleOptions = {}): Elemen
 				}
 
 				return {};
-			},
-		};
-	});
-
-	return elementProps;
+			};
+		},
+	};
 }
 
 export { useRole, type UseRoleOptions };