[core] Use local useInteractions

mui · Dec 30, 2024 · e133094 · e133094
1 parent 38f77b6
commit e133094
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 6 deletions.
diff --git a/packages/react/src/dialog/root/useDialogRoot.ts b/packages/react/src/dialog/root/useDialogRoot.ts
@@ -5,7 +5,6 @@ import {
   useClick,
   useDismiss,
   useFloatingRootContext,
-  useInteractions,
   type OpenChangeReason as FloatingUIOpenChangeReason,
 } from '@floating-ui/react';
 import { useControlled } from '../../utils/useControlled';
@@ -20,6 +19,7 @@ import {
   type OpenChangeReason,
   translateOpenChangeReason,
 } from '../../utils/translateOpenChangeReason';
+import { useInteractions } from '../../utils/useInteractions';
 
 export function useDialogRoot(parameters: useDialogRoot.Parameters): useDialogRoot.ReturnValue {
   const {

diff --git a/packages/react/src/menu/root/useMenuRoot.ts b/packages/react/src/menu/root/useMenuRoot.ts
@@ -6,7 +6,6 @@ import {
   useDismiss,
   useFloatingRootContext,
   useHover,
-  useInteractions,
   useListNavigation,
   useRole,
   useTypeahead,
@@ -21,6 +20,7 @@ import { TYPEAHEAD_RESET_MS } from '../../utils/constants';
 import { useAfterExitAnimation } from '../../utils/useAfterExitAnimation';
 import type { TextDirection } from '../../direction-provider/DirectionContext';
 import { useScrollLock } from '../../utils/useScrollLock';
+import { useInteractions } from '../../utils/useInteractions';
 
 const EMPTY_ARRAY: never[] = [];
 

diff --git a/packages/react/src/popover/root/usePopoverRoot.ts b/packages/react/src/popover/root/usePopoverRoot.ts
@@ -6,7 +6,6 @@ import {
   useDismiss,
   useFloatingRootContext,
   useHover,
-  useInteractions,
   useRole,
   type FloatingRootContext,
 } from '@floating-ui/react';
@@ -24,6 +23,7 @@ import {
   type OpenChangeReason,
 } from '../../utils/translateOpenChangeReason';
 import { useAfterExitAnimation } from '../../utils/useAfterExitAnimation';
+import { useInteractions } from '../../utils/useInteractions';
 
 export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoot.ReturnValue {
   const {

diff --git a/packages/react/src/preview-card/root/usePreviewCardRoot.ts b/packages/react/src/preview-card/root/usePreviewCardRoot.ts
@@ -5,7 +5,6 @@ import {
   useDismiss,
   useFloatingRootContext,
   useHover,
-  useInteractions,
   type FloatingRootContext,
 } from '@floating-ui/react';
 import { useControlled } from '../../utils/useControlled';
@@ -20,6 +19,7 @@ import {
   type OpenChangeReason,
 } from '../../utils/translateOpenChangeReason';
 import { useAfterExitAnimation } from '../../utils/useAfterExitAnimation';
+import { useInteractions } from '../../utils/useInteractions';
 
 export function usePreviewCardRoot(
   params: usePreviewCardRoot.Parameters,

diff --git a/packages/react/src/select/root/useSelectRoot.ts b/packages/react/src/select/root/useSelectRoot.ts
@@ -3,7 +3,6 @@ import {
   useClick,
   useDismiss,
   useFloatingRootContext,
-  useInteractions,
   useListNavigation,
   useRole,
   useTypeahead,
@@ -19,6 +18,7 @@ import { warn } from '../../utils/warn';
 import type { SelectRootContext } from './SelectRootContext';
 import type { SelectIndexContext } from './SelectIndexContext';
 import { useAfterExitAnimation } from '../../utils/useAfterExitAnimation';
+import { useInteractions } from '../../utils/useInteractions';
 
 export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelectRoot.ReturnValue {
   const {

diff --git a/packages/react/src/tooltip/root/useTooltipRoot.ts b/packages/react/src/tooltip/root/useTooltipRoot.ts
@@ -8,7 +8,6 @@ import {
   useFloatingRootContext,
   useFocus,
   useHover,
-  useInteractions,
   type FloatingRootContext,
 } from '@floating-ui/react';
 import { useControlled } from '../../utils/useControlled';
@@ -22,6 +21,7 @@ import {
   type OpenChangeReason,
 } from '../../utils/translateOpenChangeReason';
 import { useAfterExitAnimation } from '../../utils/useAfterExitAnimation';
+import { useInteractions } from '../../utils/useInteractions';
 
 export function useTooltipRoot(params: useTooltipRoot.Parameters): useTooltipRoot.ReturnValue {
   const {

diff --git a/packages/react/src/utils/useInteractions.ts b/packages/react/src/utils/useInteractions.ts
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { ElementProps } from '@floating-ui/react';
+import type { GenericHTMLProps } from './types';
+import { mergeReactProps } from './mergeReactProps';
+
+/**
+ * Merges an array of interaction hooks' props into prop getters, allowing
+ * event handler functions to be composed together without overwriting one
+ * another.
+ * @see https://floating-ui.com/docs/useInteractions
+ */
+export function useInteractions(propsList: Array<ElementProps>) {
+  const referenceDeps = propsList.map((key) => key.reference);
+  const floatingDeps = propsList.map((key) => key.floating);
+  const itemDeps = propsList.map((key) => key.item);
+
+  const getReferenceProps = React.useCallback(
+    (userProps?: GenericHTMLProps) => mergeReactProps(userProps, propsList, 'reference'),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    referenceDeps,
+  );
+
+  const getFloatingProps = React.useCallback(
+    (userProps?: GenericHTMLProps) => mergeReactProps(userProps, propsList, 'floating'),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    floatingDeps,
+  );
+
+  const getItemProps = React.useCallback(
+    (userProps?: GenericHTMLProps & { selected?: boolean; active?: boolean }) =>
+      mergeReactProps(userProps, propsList, 'item'),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    itemDeps,
+  );
+
+  return React.useMemo(
+    () => ({ getReferenceProps, getFloatingProps, getItemProps }),
+    [getReferenceProps, getFloatingProps, getItemProps],
+  );
+}