@tale-ui/react 0.0.3

package/esm/floating-ui-react/hooks/useHoverFloatingInteraction.js

@@ -0,0 +1,182 @@
+'use client';
+
+import * as React from 'react';
+import { isElement } from '@floating-ui/utils/dom';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { useIsoLayoutEffect } from '@tale-ui/utils/useIsoLayoutEffect';
+import { ownerDocument } from '@tale-ui/utils/owner';
+import { getTarget, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
+import { createChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
+import { isInteractiveElement, safePolygonIdentifier, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
+const clickLikeEvents = new Set(['click', 'mousedown']);
+
+/**
+ * Provides hover interactions that should be attached to the floating element.
+ */
+export function useHoverFloatingInteraction(context, parameters = {}) {
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
+  const floatingElement = store.useState('floatingElement');
+  const domReferenceElement = store.useState('domReferenceElement');
+  const {
+    dataRef
+  } = store.context;
+  const {
+    enabled = true,
+    closeDelay: closeDelayProp = 0
+  } = parameters;
+  const instance = useHoverInteractionSharedState(store);
+  const tree = useFloatingTree();
+  const parentId = useFloatingParentNodeId();
+  const isClickLikeOpenEvent = useStableCallback(() => {
+    if (instance.interactedInside) {
+      return true;
+    }
+    return dataRef.current.openEvent ? clickLikeEvents.has(dataRef.current.openEvent.type) : false;
+  });
+  const isHoverOpen = useStableCallback(() => {
+    const type = dataRef.current.openEvent?.type;
+    return type?.includes('mouse') && type !== 'mousedown';
+  });
+  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
+    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  });
+  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
+    const closeDelay = getDelay(closeDelayProp, instance.pointerType);
+    if (closeDelay && !instance.handler) {
+      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
+    } else if (runElseBranch) {
+      instance.openChangeTimeout.clear();
+      store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+    }
+  }, [closeDelayProp, store, instance]);
+  const cleanupMouseMoveHandler = useStableCallback(() => {
+    instance.unbindMouseMove();
+    instance.handler = undefined;
+  });
+  const clearPointerEvents = useStableCallback(() => {
+    if (instance.performedPointerEventsMutation) {
+      const body = ownerDocument(floatingElement).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(safePolygonIdentifier);
+      instance.performedPointerEventsMutation = false;
+    }
+  });
+  const handleInteractInside = useStableCallback(event => {
+    const target = getTarget(event);
+    if (!isInteractiveElement(target)) {
+      instance.interactedInside = false;
+      return;
+    }
+    instance.interactedInside = true;
+  });
+  useIsoLayoutEffect(() => {
+    if (!open) {
+      instance.pointerType = undefined;
+      instance.restTimeoutPending = false;
+      instance.interactedInside = false;
+      cleanupMouseMoveHandler();
+      clearPointerEvents();
+    }
+  }, [open, instance, cleanupMouseMoveHandler, clearPointerEvents]);
+  React.useEffect(() => {
+    return () => {
+      cleanupMouseMoveHandler();
+    };
+  }, [cleanupMouseMoveHandler]);
+  React.useEffect(() => {
+    return clearPointerEvents;
+  }, [clearPointerEvents]);
+  useIsoLayoutEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && isElement(domReferenceElement) && floatingElement) {
+      instance.performedPointerEventsMutation = true;
+      const body = ownerDocument(floatingElement).body;
+      body.setAttribute(safePolygonIdentifier, '');
+      const ref = domReferenceElement;
+      const floatingEl = floatingElement;
+      const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
+      if (parentFloating) {
+        parentFloating.style.pointerEvents = '';
+      }
+      body.style.pointerEvents = 'none';
+      ref.style.pointerEvents = 'auto';
+      floatingEl.style.pointerEvents = 'auto';
+      return () => {
+        body.style.pointerEvents = '';
+        ref.style.pointerEvents = '';
+        floatingEl.style.pointerEvents = '';
+      };
+    }
+    return undefined;
+  }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId]);
+  React.useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+
+    // Ensure the floating element closes after scrolling even if the pointer
+    // did not move.
+    // https://github.com/floating-ui/floating-ui/discussions/1692
+    function onScrollMouseLeave(event) {
+      if (isClickLikeOpenEvent() || !dataRef.current.floatingContext || !store.select('open')) {
+        return;
+      }
+      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+        // If the mouse is leaving the reference element to another trigger, don't explicitly close the popup
+        // as it will be moved.
+        return;
+      }
+
+      // If the safePolygon handler is active, let it handle the close logic.
+      // The handler checks for open children in the floating tree.
+      if (instance.handler) {
+        instance.handler(event);
+        return;
+      }
+      clearPointerEvents();
+      cleanupMouseMoveHandler();
+      if (!isClickLikeOpenEvent()) {
+        closeWithDelay(event);
+      }
+    }
+    function onFloatingMouseEnter(event) {
+      instance.openChangeTimeout.clear();
+      clearPointerEvents();
+      instance.handler?.(event);
+    }
+    function onFloatingMouseLeave(event) {
+      if (!isClickLikeOpenEvent()) {
+        closeWithDelay(event, false);
+      }
+    }
+    const floating = floatingElement;
+    if (floating) {
+      floating.addEventListener('mouseleave', onScrollMouseLeave);
+      floating.addEventListener('mouseenter', onFloatingMouseEnter);
+      floating.addEventListener('mouseleave', onFloatingMouseLeave);
+      floating.addEventListener('pointerdown', handleInteractInside, true);
+    }
+    return () => {
+      if (floating) {
+        floating.removeEventListener('mouseleave', onScrollMouseLeave);
+        floating.removeEventListener('mouseenter', onFloatingMouseEnter);
+        floating.removeEventListener('mouseleave', onFloatingMouseLeave);
+        floating.removeEventListener('pointerdown', handleInteractInside, true);
+      }
+    };
+  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, cleanupMouseMoveHandler, handleInteractInside, instance]);
+}
+export function getDelay(value, pointerType) {
+  if (pointerType && !isMouseLikePointerType(pointerType)) {
+    return 0;
+  }
+  if (typeof value === 'function') {
+    return value();
+  }
+  return value;
+}

package/esm/floating-ui-react/hooks/useHoverInteractionSharedState.d.ts

@@ -0,0 +1,21 @@
+import { Timeout } from '@tale-ui/utils/useTimeout';
+import type { FloatingRootContext, SafePolygonOptions } from "../types.js";
+export declare const safePolygonIdentifier: string;
+export declare function isInteractiveElement(element: Element | null): boolean;
+export declare class HoverInteraction {
+  pointerType: string | undefined;
+  interactedInside: boolean;
+  handler: ((event: MouseEvent) => void) | undefined;
+  blockMouseMove: boolean;
+  performedPointerEventsMutation: boolean;
+  unbindMouseMove: () => void;
+  restTimeoutPending: boolean;
+  openChangeTimeout: Timeout;
+  restTimeout: Timeout;
+  handleCloseOptions: SafePolygonOptions | undefined;
+  constructor();
+  static create(): HoverInteraction;
+  dispose: () => void;
+  disposeEffect: () => () => void;
+}
+export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;

package/esm/floating-ui-react/hooks/useHoverInteractionSharedState.js

@@ -0,0 +1,45 @@
+'use client';
+
+import { useOnMount } from '@tale-ui/utils/useOnMount';
+import { useRefWithInit } from '@tale-ui/utils/useRefWithInit';
+import { Timeout } from '@tale-ui/utils/useTimeout';
+import { createAttribute } from "../utils/createAttribute.js";
+import { TYPEABLE_SELECTOR } from "../utils/constants.js";
+export const safePolygonIdentifier = createAttribute('safe-polygon');
+const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`;
+export function isInteractiveElement(element) {
+  return element ? Boolean(element.closest(interactiveSelector)) : false;
+}
+export class HoverInteraction {
+  constructor() {
+    this.pointerType = undefined;
+    this.interactedInside = false;
+    this.handler = undefined;
+    this.blockMouseMove = true;
+    this.performedPointerEventsMutation = false;
+    this.unbindMouseMove = () => {};
+    this.restTimeoutPending = false;
+    this.openChangeTimeout = new Timeout();
+    this.restTimeout = new Timeout();
+    this.handleCloseOptions = undefined;
+  }
+  static create() {
+    return new HoverInteraction();
+  }
+  dispose = () => {
+    this.openChangeTimeout.clear();
+    this.restTimeout.clear();
+  };
+  disposeEffect = () => {
+    return this.dispose;
+  };
+}
+export function useHoverInteractionSharedState(store) {
+  const instance = useRefWithInit(HoverInteraction.create).current;
+  const data = store.context.dataRef.current;
+  if (!data.hoverInteractionState) {
+    data.hoverInteractionState = instance;
+  }
+  useOnMount(data.hoverInteractionState.disposeEffect);
+  return data.hoverInteractionState;
+}

package/esm/floating-ui-react/hooks/useHoverReferenceInteraction.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { FloatingContext, FloatingRootContext } from "../types.js";
+import type { UseHoverProps } from "./useHover.js";
+import type { FloatingTreeStore } from "../components/FloatingTreeStore.js";
+import { HTMLProps } from "../../utils/types.js";
+export interface UseHoverReferenceInteractionProps extends UseHoverProps {
+  enabled?: boolean | undefined;
+  mouseOnly?: boolean | undefined;
+  externalTree?: FloatingTreeStore | undefined;
+  /**
+   * Whether the hook controls the active trigger. When false, the props are
+   * returned under the `trigger` key so they can be applied to inactive
+   * triggers via `getTriggerProps`.
+   * @default true
+   */
+  isActiveTrigger?: boolean | undefined;
+  triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
+}
+/**
+ * Provides hover interactions that should be attached to reference or trigger
+ * elements.
+ */
+export declare function useHoverReferenceInteraction(context: FloatingRootContext | FloatingContext, props?: UseHoverReferenceInteractionProps): HTMLProps | undefined;

package/esm/floating-ui-react/hooks/useHoverReferenceInteraction.js

@@ -0,0 +1,293 @@
+'use client';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { isElement } from '@floating-ui/utils/dom';
+import { useValueAsRef } from '@tale-ui/utils/useValueAsRef';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { ownerDocument } from '@tale-ui/utils/owner';
+import { contains, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
+import { createChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { getDelay } from "./useHover.js";
+import { useFloatingTree } from "../components/FloatingTree.js";
+import { safePolygonIdentifier, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
+function getRestMs(value) {
+  if (typeof value === 'function') {
+    return value();
+  }
+  return value;
+}
+const EMPTY_REF = {
+  current: null
+};
+
+/**
+ * Provides hover interactions that should be attached to reference or trigger
+ * elements.
+ */
+export function useHoverReferenceInteraction(context, props = {}) {
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const {
+    dataRef,
+    events
+  } = store.context;
+  const {
+    enabled = true,
+    delay = 0,
+    handleClose = null,
+    mouseOnly = false,
+    restMs = 0,
+    move = true,
+    triggerElementRef = EMPTY_REF,
+    externalTree,
+    isActiveTrigger = true
+  } = props;
+  const tree = useFloatingTree(externalTree);
+  const instance = useHoverInteractionSharedState(store);
+  const handleCloseRef = useValueAsRef(handleClose);
+  const delayRef = useValueAsRef(delay);
+  const restMsRef = useValueAsRef(restMs);
+  const enabledRef = useValueAsRef(enabled);
+  if (isActiveTrigger) {
+    // eslint-disable-next-line no-underscore-dangle
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
+  }
+  const isClickLikeOpenEvent = useStableCallback(() => {
+    if (instance.interactedInside) {
+      return true;
+    }
+    return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+  });
+  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
+    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  });
+  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
+    const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
+    if (closeDelay && !instance.handler) {
+      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
+    } else if (runElseBranch) {
+      instance.openChangeTimeout.clear();
+      store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+    }
+  }, [delayRef, store, instance]);
+  const cleanupMouseMoveHandler = useStableCallback(() => {
+    instance.unbindMouseMove();
+    instance.handler = undefined;
+  });
+  const clearPointerEvents = useStableCallback(() => {
+    if (instance.performedPointerEventsMutation) {
+      const body = ownerDocument(store.select('domReferenceElement')).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(safePolygonIdentifier);
+      instance.performedPointerEventsMutation = false;
+    }
+  });
+
+  // When closing before opening, clear the delay timeouts to cancel it
+  // from showing.
+  React.useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    function onOpenChangeLocal(details) {
+      if (!details.open) {
+        instance.openChangeTimeout.clear();
+        instance.restTimeout.clear();
+        instance.blockMouseMove = true;
+        instance.restTimeoutPending = false;
+      }
+    }
+    events.on('openchange', onOpenChangeLocal);
+    return () => {
+      events.off('openchange', onOpenChangeLocal);
+    };
+  }, [enabled, events, instance]);
+  const handleScrollMouseLeave = useStableCallback(event => {
+    if (isClickLikeOpenEvent()) {
+      return;
+    }
+    if (!dataRef.current.floatingContext) {
+      return;
+    }
+    if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+      return;
+    }
+    const currentTrigger = triggerElementRef.current;
+    handleCloseRef.current?.({
+      ...dataRef.current.floatingContext,
+      tree,
+      x: event.clientX,
+      y: event.clientY,
+      onClose() {
+        clearPointerEvents();
+        cleanupMouseMoveHandler();
+        if (!isClickLikeOpenEvent() && currentTrigger === store.select('domReferenceElement')) {
+          closeWithDelay(event);
+        }
+      }
+    })(event);
+  });
+  React.useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
+    if (!isElement(trigger)) {
+      return undefined;
+    }
+    function onMouseEnter(event) {
+      instance.openChangeTimeout.clear();
+      instance.blockMouseMove = false;
+      if (mouseOnly && !isMouseLikePointerType(instance.pointerType)) {
+        return;
+      }
+
+      // Only rest delay is set; there's no fallback delay.
+      // This will be handled by `onMouseMove`.
+      if (getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, 'open')) {
+        return;
+      }
+      const openDelay = getDelay(delayRef.current, 'open', instance.pointerType);
+      const currentDomReference = store.select('domReferenceElement');
+      const allTriggers = store.context.triggerElements;
+      const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => contains(t, event.target))) && (!currentDomReference || !contains(currentDomReference, event.target));
+      const triggerNode = event.currentTarget ?? null;
+      const isOpen = store.select('open');
+      const shouldOpen = !isOpen || isOverInactiveTrigger;
+
+      // When moving between triggers while already open, open immediately without delay
+      if (isOverInactiveTrigger && isOpen) {
+        store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
+      } else if (openDelay) {
+        instance.openChangeTimeout.start(openDelay, () => {
+          if (shouldOpen) {
+            store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
+          }
+        });
+      } else if (shouldOpen) {
+        store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
+      }
+    }
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        clearPointerEvents();
+        return;
+      }
+      instance.unbindMouseMove();
+      const domReferenceElement = store.select('domReferenceElement');
+      const doc = ownerDocument(domReferenceElement);
+      instance.restTimeout.clear();
+      instance.restTimeoutPending = false;
+      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+        return;
+      }
+      if (handleCloseRef.current && dataRef.current.floatingContext) {
+        if (!store.select('open')) {
+          instance.openChangeTimeout.clear();
+        }
+        const currentTrigger = triggerElementRef.current;
+        instance.handler = handleCloseRef.current({
+          ...dataRef.current.floatingContext,
+          tree,
+          x: event.clientX,
+          y: event.clientY,
+          onClose() {
+            clearPointerEvents();
+            cleanupMouseMoveHandler();
+            if (enabledRef.current && !isClickLikeOpenEvent() && currentTrigger === store.select('domReferenceElement')) {
+              closeWithDelay(event, true);
+            }
+          }
+        });
+        const handler = instance.handler;
+        handler(event);
+        doc.addEventListener('mousemove', handler);
+        instance.unbindMouseMove = () => {
+          doc.removeEventListener('mousemove', handler);
+        };
+        return;
+      }
+      const shouldClose = instance.pointerType === 'touch' ? !contains(store.select('floatingElement'), event.relatedTarget) : true;
+      if (shouldClose) {
+        closeWithDelay(event);
+      }
+    }
+    function onScrollMouseLeave(event) {
+      handleScrollMouseLeave(event);
+    }
+    if (store.select('open')) {
+      trigger.addEventListener('mouseleave', onScrollMouseLeave);
+    }
+    if (move) {
+      trigger.addEventListener('mousemove', onMouseEnter, {
+        once: true
+      });
+    }
+    trigger.addEventListener('mouseenter', onMouseEnter);
+    trigger.addEventListener('mouseleave', onMouseLeave);
+    return () => {
+      trigger.removeEventListener('mouseleave', onScrollMouseLeave);
+      if (move) {
+        trigger.removeEventListener('mousemove', onMouseEnter);
+      }
+      trigger.removeEventListener('mouseenter', onMouseEnter);
+      trigger.removeEventListener('mouseleave', onMouseLeave);
+    };
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, handleScrollMouseLeave, instance, isActiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef]);
+  return React.useMemo(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    function setPointerRef(event) {
+      instance.pointerType = event.pointerType;
+    }
+    return {
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef,
+      onMouseMove(event) {
+        const {
+          nativeEvent
+        } = event;
+        const trigger = event.currentTarget;
+        const currentDomReference = store.select('domReferenceElement');
+        const allTriggers = store.context.triggerElements;
+        const currentOpen = store.select('open');
+        const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => contains(t, event.target))) && (!currentDomReference || !contains(currentDomReference, event.target));
+        if (mouseOnly && !isMouseLikePointerType(instance.pointerType)) {
+          return;
+        }
+        if (currentOpen && !isOverInactiveTrigger || getRestMs(restMsRef.current) === 0) {
+          return;
+        }
+        if (!isOverInactiveTrigger && instance.restTimeoutPending && event.movementX ** 2 + event.movementY ** 2 < 2) {
+          return;
+        }
+        instance.restTimeout.clear();
+        function handleMouseMove() {
+          instance.restTimeoutPending = false;
+
+          // A delayed hover open should not override a click-like open that happened
+          // while the hover delay was pending.
+          if (isClickLikeOpenEvent()) {
+            return;
+          }
+          const latestOpen = store.select('open');
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactiveTrigger)) {
+            store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, nativeEvent, trigger));
+          }
+        }
+        if (instance.pointerType === 'touch') {
+          ReactDOM.flushSync(() => {
+            handleMouseMove();
+          });
+        } else if (isOverInactiveTrigger && currentOpen) {
+          handleMouseMove();
+        } else {
+          instance.restTimeoutPending = true;
+          instance.restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
+        }
+      }
+    };
+  }, [enabled, instance, isClickLikeOpenEvent, mouseOnly, store, restMsRef]);
+}

package/esm/floating-ui-react/hooks/useInteractions.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ElementProps } from "../types.js";
+import { ACTIVE_KEY, SELECTED_KEY } from "../utils/constants.js";
+export type ExtendedUserProps = {
+  [ACTIVE_KEY]?: boolean | undefined;
+  [SELECTED_KEY]?: boolean | undefined;
+};
+export interface UseInteractionsReturn {
+  getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+  getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+  getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, 'selected' | 'active'> & ExtendedUserProps) => Record<string, unknown>;
+  getTriggerProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+}
+/**
+ * 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 declare function useInteractions(propsList?: Array<ElementProps | void>): UseInteractionsReturn;

package/esm/floating-ui-react/hooks/useInteractions.js

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { ACTIVE_KEY, FOCUSABLE_ATTRIBUTE, SELECTED_KEY } from "../utils/constants.js";
+/**
+ * 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 = []) {
+  const referenceDeps = propsList.map(key => key?.reference);
+  const floatingDeps = propsList.map(key => key?.floating);
+  const itemDeps = propsList.map(key => key?.item);
+  const triggerDeps = propsList.map(key => key?.trigger);
+  const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  referenceDeps);
+  const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  floatingDeps);
+  const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  itemDeps);
+  const getTriggerProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'trigger'),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerDeps);
+  return React.useMemo(() => ({
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps,
+    getTriggerProps
+  }), [getReferenceProps, getFloatingProps, getItemProps, getTriggerProps]);
+}
+
+/* eslint-disable guard-for-in */
+
+function mergeProps(userProps, propsList, elementKey) {
+  const eventHandlers = new Map();
+  const isItem = elementKey === 'item';
+  const outputProps = {};
+  if (elementKey === 'floating') {
+    outputProps.tabIndex = -1;
+    outputProps[FOCUSABLE_ATTRIBUTE] = '';
+  }
+  for (const key in userProps) {
+    if (isItem && userProps) {
+      if (key === ACTIVE_KEY || key === SELECTED_KEY) {
+        continue;
+      }
+    }
+    outputProps[key] = userProps[key];
+  }
+  for (let i = 0; i < propsList.length; i += 1) {
+    let props;
+    const propsOrGetProps = propsList[i]?.[elementKey];
+    if (typeof propsOrGetProps === 'function') {
+      props = userProps ? propsOrGetProps(userProps) : null;
+    } else {
+      props = propsOrGetProps;
+    }
+    if (!props) {
+      continue;
+    }
+    mutablyMergeProps(outputProps, props, isItem, eventHandlers);
+  }
+  mutablyMergeProps(outputProps, userProps, isItem, eventHandlers);
+  return outputProps;
+}
+function mutablyMergeProps(outputProps, props, isItem, eventHandlers) {
+  for (const key in props) {
+    const value = props[key];
+    if (isItem && (key === ACTIVE_KEY || key === SELECTED_KEY)) {
+      continue;
+    }
+    if (!key.startsWith('on')) {
+      outputProps[key] = value;
+    } else {
+      if (!eventHandlers.has(key)) {
+        eventHandlers.set(key, []);
+      }
+      if (typeof value === 'function') {
+        eventHandlers.get(key)?.push(value);
+        outputProps[key] = (...args) => {
+          return eventHandlers.get(key)?.map(fn => fn(...args)).find(val => val !== undefined);
+        };
+      }
+    }
+  }
+}