@tale-ui/react 0.0.3

package/esm/floating-ui-react/components/FloatingPortal.js

@@ -0,0 +1,202 @@
+'use client';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { isNode } from '@floating-ui/utils/dom';
+import { useId } from '@tale-ui/utils/useId';
+import { useIsoLayoutEffect } from '@tale-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { FocusGuard } from "../../utils/FocusGuard.js";
+import { enableFocusInside, disableFocusInside, getPreviousTabbable, getNextTabbable, isOutsideEvent } from "../utils.js";
+import { createChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { createAttribute } from "../utils/createAttribute.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { EMPTY_OBJECT, ownerVisuallyHidden } from "../../utils/constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PortalContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") PortalContext.displayName = "PortalContext";
+export const usePortalContext = () => React.useContext(PortalContext);
+const attr = createAttribute('portal');
+export function useFloatingPortalNode(props = {}) {
+  const {
+    ref,
+    container: containerProp,
+    componentProps = EMPTY_OBJECT,
+    elementProps
+  } = props;
+  const uniqueId = useId();
+  const portalContext = usePortalContext();
+  const parentPortalNode = portalContext?.portalNode;
+  const [containerElement, setContainerElement] = React.useState(null);
+  const [portalNode, setPortalNode] = React.useState(null);
+  const setPortalNodeRef = useStableCallback(node => {
+    if (node !== null) {
+      // the useIsoLayoutEffect below watching containerProp / parentPortalNode
+      // sets setPortalNode(null) when the container becomes null or changes.
+      // So even though the ref callback now ignores null, the portal node still gets cleared.
+      setPortalNode(node);
+    }
+  });
+  const containerRef = React.useRef(null);
+  useIsoLayoutEffect(() => {
+    // Wait for the container to be resolved if explicitly `null`.
+    if (containerProp === null) {
+      if (containerRef.current) {
+        containerRef.current = null;
+        setPortalNode(null);
+        setContainerElement(null);
+      }
+      return;
+    }
+
+    // React 17 does not use React.useId().
+    if (uniqueId == null) {
+      return;
+    }
+    const resolvedContainer = (containerProp && (isNode(containerProp) ? containerProp : containerProp.current)) ?? parentPortalNode ?? document.body;
+    if (resolvedContainer == null) {
+      if (containerRef.current) {
+        containerRef.current = null;
+        setPortalNode(null);
+        setContainerElement(null);
+      }
+      return;
+    }
+    if (containerRef.current !== resolvedContainer) {
+      containerRef.current = resolvedContainer;
+      setPortalNode(null);
+      setContainerElement(resolvedContainer);
+    }
+  }, [containerProp, parentPortalNode, uniqueId]);
+  const portalElement = useRenderElement('div', componentProps, {
+    ref: [ref, setPortalNodeRef],
+    props: [{
+      id: uniqueId,
+      [attr]: ''
+    }, elementProps]
+  });
+
+  // This `createPortal` call injects `portalElement` into the `container`.
+  // Another call inside `FloatingPortal`/`FloatingPortalLite` then injects the children into `portalElement`.
+  const portalSubtree = containerElement && portalElement ? /*#__PURE__*/ReactDOM.createPortal(portalElement, containerElement) : null;
+  return {
+    portalNode,
+    portalSubtree
+  };
+}
+
+/**
+ * Portals the floating element into a given container element — by default,
+ * outside of the app root and into the body.
+ * This is necessary to ensure the floating element can appear outside any
+ * potential parent containers that cause clipping (such as `overflow: hidden`),
+ * while retaining its location in the React tree.
+ * @see https://floating-ui.com/docs/FloatingPortal
+ * @internal
+ */
+export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPortal(componentProps, forwardedRef) {
+  const {
+    children,
+    container,
+    className,
+    render,
+    renderGuards,
+    ...elementProps
+  } = componentProps;
+  const {
+    portalNode,
+    portalSubtree
+  } = useFloatingPortalNode({
+    container,
+    ref: forwardedRef,
+    componentProps,
+    elementProps
+  });
+  const beforeOutsideRef = React.useRef(null);
+  const afterOutsideRef = React.useRef(null);
+  const beforeInsideRef = React.useRef(null);
+  const afterInsideRef = React.useRef(null);
+  const [focusManagerState, setFocusManagerState] = React.useState(null);
+  const modal = focusManagerState?.modal;
+  const open = focusManagerState?.open;
+  const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
+
+  // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
+  React.useEffect(() => {
+    if (!portalNode || modal) {
+      return undefined;
+    }
+
+    // Make sure elements inside the portal element are tabbable only when the
+    // portal has already been focused, either by tabbing into a focus trap
+    // element outside or using the mouse.
+    function onFocus(event) {
+      if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
+        const focusing = event.type === 'focusin';
+        const manageFocus = focusing ? enableFocusInside : disableFocusInside;
+        manageFocus(portalNode);
+      }
+    }
+
+    // Listen to the event on the capture phase so they run before the focus
+    // trap elements onFocus prop is called.
+    portalNode.addEventListener('focusin', onFocus, true);
+    portalNode.addEventListener('focusout', onFocus, true);
+    return () => {
+      portalNode.removeEventListener('focusin', onFocus, true);
+      portalNode.removeEventListener('focusout', onFocus, true);
+    };
+  }, [portalNode, modal]);
+  React.useEffect(() => {
+    if (!portalNode || open) {
+      return;
+    }
+    enableFocusInside(portalNode);
+  }, [open, portalNode]);
+  const portalContextValue = React.useMemo(() => ({
+    beforeOutsideRef,
+    afterOutsideRef,
+    beforeInsideRef,
+    afterInsideRef,
+    portalNode,
+    setFocusManagerState
+  }), [portalNode]);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [portalSubtree, /*#__PURE__*/_jsxs(PortalContext.Provider, {
+      value: portalContextValue,
+      children: [shouldRenderGuards && portalNode && /*#__PURE__*/_jsx(FocusGuard, {
+        "data-type": "outside",
+        ref: beforeOutsideRef,
+        onFocus: event => {
+          if (isOutsideEvent(event, portalNode)) {
+            beforeInsideRef.current?.focus();
+          } else {
+            const domReference = focusManagerState ? focusManagerState.domReference : null;
+            const prevTabbable = getPreviousTabbable(domReference);
+            prevTabbable?.focus();
+          }
+        }
+      }), shouldRenderGuards && portalNode && /*#__PURE__*/_jsx("span", {
+        "aria-owns": portalNode.id,
+        style: ownerVisuallyHidden
+      }), portalNode && /*#__PURE__*/ReactDOM.createPortal(children, portalNode), shouldRenderGuards && portalNode && /*#__PURE__*/_jsx(FocusGuard, {
+        "data-type": "outside",
+        ref: afterOutsideRef,
+        onFocus: event => {
+          if (isOutsideEvent(event, portalNode)) {
+            afterInsideRef.current?.focus();
+          } else {
+            const domReference = focusManagerState ? focusManagerState.domReference : null;
+            const nextTabbable = getNextTabbable(domReference);
+            nextTabbable?.focus();
+            if (focusManagerState?.closeOnFocusOut) {
+              focusManagerState?.onOpenChange(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent));
+            }
+          }
+        }
+      })]
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") FloatingPortal.displayName = "FloatingPortal";

package/esm/floating-ui-react/components/FloatingRootStore.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ReactStore } from '@tale-ui/utils/store';
+import type { FloatingEvents, ContextData, ReferenceType } from "../types.js";
+import { type TaleUIChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { type PopupTriggerMap } from "../../utils/popups/index.js";
+export interface FloatingRootState {
+  open: boolean;
+  domReferenceElement: Element | null;
+  referenceElement: ReferenceType | null;
+  floatingElement: HTMLElement | null;
+  positionReference: ReferenceType | null;
+  /**
+   * The ID of the floating element.
+   */
+  floatingId: string | undefined;
+}
+export interface FloatingRootStoreContext {
+  onOpenChange: ((open: boolean, eventDetails: TaleUIChangeEventDetails<string>) => void) | undefined;
+  readonly dataRef: React.RefObject<ContextData>;
+  readonly events: FloatingEvents;
+  nested: boolean;
+  noEmit: boolean;
+  readonly triggerElements: PopupTriggerMap;
+}
+declare const selectors: {
+  open: (state: FloatingRootState) => boolean;
+  domReferenceElement: (state: FloatingRootState) => Element | null;
+  referenceElement: (state: FloatingRootState) => ReferenceType | null;
+  floatingElement: (state: FloatingRootState) => HTMLElement | null;
+  floatingId: (state: FloatingRootState) => string | undefined;
+};
+interface FloatingRootStoreOptions {
+  open: boolean;
+  referenceElement: ReferenceType | null;
+  floatingElement: HTMLElement | null;
+  triggerElements: PopupTriggerMap;
+  floatingId: string | undefined;
+  nested: boolean;
+  noEmit: boolean;
+  onOpenChange: ((open: boolean, eventDetails: TaleUIChangeEventDetails<string>) => void) | undefined;
+}
+export declare class FloatingRootStore extends ReactStore<Readonly<FloatingRootState>, FloatingRootStoreContext, typeof selectors> {
+  constructor(options: FloatingRootStoreOptions);
+  /**
+   * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
+   *
+   * @param newOpen The new open state.
+   * @param eventDetails Details about the event that triggered the open state change.
+   */
+  setOpen: (newOpen: boolean, eventDetails: TaleUIChangeEventDetails<string>) => void;
+}
+export {};

package/esm/floating-ui-react/components/FloatingRootStore.js

@@ -0,0 +1,61 @@
+import { createSelector, ReactStore } from '@tale-ui/utils/store';
+import { createEventEmitter } from "../utils/createEventEmitter.js";
+import { isClickLikeEvent } from "../utils.js";
+const selectors = {
+  open: createSelector(state => state.open),
+  domReferenceElement: createSelector(state => state.domReferenceElement),
+  referenceElement: createSelector(state => state.positionReference ?? state.referenceElement),
+  floatingElement: createSelector(state => state.floatingElement),
+  floatingId: createSelector(state => state.floatingId)
+};
+export class FloatingRootStore extends ReactStore {
+  constructor(options) {
+    const {
+      nested,
+      noEmit,
+      onOpenChange,
+      triggerElements,
+      ...initialState
+    } = options;
+    super({
+      ...initialState,
+      positionReference: initialState.referenceElement,
+      domReferenceElement: initialState.referenceElement
+    }, {
+      onOpenChange,
+      dataRef: {
+        current: {}
+      },
+      events: createEventEmitter(),
+      nested,
+      noEmit,
+      triggerElements
+    }, selectors);
+  }
+
+  /**
+   * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
+   *
+   * @param newOpen The new open state.
+   * @param eventDetails Details about the event that triggered the open state change.
+   */
+  setOpen = (newOpen, eventDetails) => {
+    if (!newOpen || !this.state.open ||
+    // Prevent a pending hover-open from overwriting a click-open event, while allowing
+    // click events to upgrade a hover-open.
+    isClickLikeEvent(eventDetails.event)) {
+      this.context.dataRef.current.openEvent = newOpen ? eventDetails.event : undefined;
+    }
+    if (!this.context.noEmit) {
+      const details = {
+        open: newOpen,
+        reason: eventDetails.reason,
+        nativeEvent: eventDetails.event,
+        nested: this.context.nested,
+        triggerElement: eventDetails.trigger
+      };
+      this.context.events.emit('openchange', details);
+    }
+    this.context.onOpenChange?.(newOpen, eventDetails);
+  };
+}

package/esm/floating-ui-react/components/FloatingTree.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { FloatingTreeType } from "../types.js";
+import { FloatingTreeStore } from "./FloatingTreeStore.js";
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
+export declare const useFloatingParentNodeId: () => string | null;
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+export declare const useFloatingTree: (externalTree?: FloatingTreeStore) => FloatingTreeType | null;
+/**
+ * Registers a node into the `FloatingTree`, returning its id.
+ * @see https://floating-ui.com/docs/FloatingTree
+ */
+export declare function useFloatingNodeId(externalTree?: FloatingTreeStore): string | undefined;
+export interface FloatingNodeProps {
+  children?: React.ReactNode;
+  id: string | undefined;
+}
+/**
+ * Provides parent node context for nested floating elements.
+ * @see https://floating-ui.com/docs/FloatingTree
+ * @internal
+ */
+export declare function FloatingNode(props: FloatingNodeProps): React.JSX.Element;
+export interface FloatingTreeProps {
+  children?: React.ReactNode;
+  externalTree?: FloatingTreeStore | undefined;
+}
+/**
+ * Provides context for nested floating elements when they are not children of
+ * each other on the DOM.
+ * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
+ * - The `bubbles` option in the `useDismiss()` Hook
+ * - Nested virtual list navigation
+ * - Nested floating elements that each open on hover
+ * - Custom communication between parent and child floating elements
+ * @see https://floating-ui.com/docs/FloatingTree
+ * @internal
+ */
+export declare function FloatingTree(props: FloatingTreeProps): React.JSX.Element;

package/esm/floating-ui-react/components/FloatingTree.js

@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { useId } from '@tale-ui/utils/useId';
+import { useIsoLayoutEffect } from '@tale-ui/utils/useIsoLayoutEffect';
+import { useRefWithInit } from '@tale-ui/utils/useRefWithInit';
+import { FloatingTreeStore } from "./FloatingTreeStore.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FloatingNodeContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") FloatingNodeContext.displayName = "FloatingNodeContext";
+const FloatingTreeContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
+if (process.env.NODE_ENV !== "production") FloatingTreeContext.displayName = "FloatingTreeContext";
+export const useFloatingParentNodeId = () => React.useContext(FloatingNodeContext)?.id || null;
+
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+export const useFloatingTree = externalTree => {
+  const contextTree = React.useContext(FloatingTreeContext);
+  return externalTree ?? contextTree;
+};
+
+/**
+ * Registers a node into the `FloatingTree`, returning its id.
+ * @see https://floating-ui.com/docs/FloatingTree
+ */
+export function useFloatingNodeId(externalTree) {
+  const id = useId();
+  const tree = useFloatingTree(externalTree);
+  const parentId = useFloatingParentNodeId();
+  useIsoLayoutEffect(() => {
+    if (!id) {
+      return undefined;
+    }
+    const node = {
+      id,
+      parentId
+    };
+    tree?.addNode(node);
+    return () => {
+      tree?.removeNode(node);
+    };
+  }, [tree, id, parentId]);
+  return id;
+}
+/**
+ * Provides parent node context for nested floating elements.
+ * @see https://floating-ui.com/docs/FloatingTree
+ * @internal
+ */
+export function FloatingNode(props) {
+  const {
+    children,
+    id
+  } = props;
+  const parentId = useFloatingParentNodeId();
+  return /*#__PURE__*/_jsx(FloatingNodeContext.Provider, {
+    value: React.useMemo(() => ({
+      id,
+      parentId
+    }), [id, parentId]),
+    children: children
+  });
+}
+/**
+ * Provides context for nested floating elements when they are not children of
+ * each other on the DOM.
+ * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
+ * - The `bubbles` option in the `useDismiss()` Hook
+ * - Nested virtual list navigation
+ * - Nested floating elements that each open on hover
+ * - Custom communication between parent and child floating elements
+ * @see https://floating-ui.com/docs/FloatingTree
+ * @internal
+ */
+export function FloatingTree(props) {
+  const {
+    children,
+    externalTree
+  } = props;
+  const tree = useRefWithInit(() => externalTree ?? new FloatingTreeStore()).current;
+  return /*#__PURE__*/_jsx(FloatingTreeContext.Provider, {
+    value: tree,
+    children: children
+  });
+}

package/esm/floating-ui-react/components/FloatingTreeStore.d.ts

@@ -0,0 +1,11 @@
+import type { FloatingNodeType, FloatingEvents } from "../types.js";
+/**
+ * Stores and manages floating elements in a tree structure.
+ * This is a backing store for the `FloatingTree` component.
+ */
+export declare class FloatingTreeStore {
+  readonly nodesRef: React.RefObject<Array<FloatingNodeType>>;
+  readonly events: FloatingEvents;
+  addNode(node: FloatingNodeType): void;
+  removeNode(node: FloatingNodeType): void;
+}

package/esm/floating-ui-react/components/FloatingTreeStore.js

@@ -0,0 +1,21 @@
+import { createEventEmitter } from "../utils/createEventEmitter.js";
+
+/**
+ * Stores and manages floating elements in a tree structure.
+ * This is a backing store for the `FloatingTree` component.
+ */
+export class FloatingTreeStore {
+  nodesRef = {
+    current: []
+  };
+  events = createEventEmitter();
+  addNode(node) {
+    this.nodesRef.current.push(node);
+  }
+  removeNode(node) {
+    const index = this.nodesRef.current.findIndex(n => n === node);
+    if (index !== -1) {
+      this.nodesRef.current.splice(index, 1);
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
+import { REASONS } from "../../utils/reasons.js";
+export interface UseClickProps {
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: boolean | undefined;
+  /**
+   * The type of event to use to determine a “click” with mouse input.
+   * Keyboard clicks work as normal.
+   * @default 'click'
+   */
+  event?: 'click' | 'mousedown' | 'mousedown-only' | undefined;
+  /**
+   * Whether to toggle the open state with repeated clicks.
+   * @default true
+   */
+  toggle?: boolean | undefined;
+  /**
+   * Whether to ignore the logic for mouse input (for example, if `useHover()`
+   * is also being used).
+   * @default false
+   */
+  ignoreMouse?: boolean | undefined;
+  /**
+   * If already open from another event such as the `useHover()` Hook,
+   * determines whether to keep the floating element open when clicking the
+   * reference element for the first time.
+   * @default true
+   */
+  stickIfOpen?: boolean | undefined;
+  /**
+   * Touch-only delay (ms) before opening. Useful to allow mobile viewport/keyboard to settle.
+   * @default 0
+   */
+  touchOpenDelay?: number | undefined;
+  /**
+   * The reason for the click.
+   * @default REASONS.triggerPress
+   */
+  reason?: typeof REASONS.triggerPress | typeof REASONS.inputPress | undefined;
+}
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+export declare function useClick(context: FloatingRootContext | FloatingContext, props?: UseClickProps): ElementProps;

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

@@ -0,0 +1,111 @@
+'use client';
+
+import * as React from 'react';
+import { useAnimationFrame } from '@tale-ui/utils/useAnimationFrame';
+import { useTimeout } from '@tale-ui/utils/useTimeout';
+import { EMPTY_OBJECT } from "../../utils/constants.js";
+import { isClickLikeEvent, isMouseLikePointerType, isTypeableElement } from "../utils.js";
+import { createChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+export function useClick(context, props = {}) {
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const dataRef = store.context.dataRef;
+  const {
+    enabled = true,
+    event: eventOption = 'click',
+    toggle = true,
+    ignoreMouse = false,
+    stickIfOpen = true,
+    touchOpenDelay = 0,
+    reason = REASONS.triggerPress
+  } = props;
+  const pointerTypeRef = React.useRef(undefined);
+  const frame = useAnimationFrame();
+  const touchOpenTimeout = useTimeout();
+  const reference = React.useMemo(() => ({
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onMouseDown(event) {
+      const pointerType = pointerTypeRef.current;
+      const nativeEvent = event.nativeEvent;
+      const open = store.select('open');
+
+      // Ignore all buttons except for the "main" button.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+      if (event.button !== 0 || eventOption === 'click' || isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+        return;
+      }
+      const openEvent = dataRef.current.openEvent;
+      const openEventType = openEvent?.type;
+      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
+      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? openEventType === 'click' || openEventType === 'mousedown' : true));
+
+      // Animations sometimes won't run on a typeable element if using a rAF.
+      // Focus is always set on these elements. For touch, we may delay opening.
+      if (isTypeableElement(nativeEvent.target)) {
+        const details = createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
+        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+          touchOpenTimeout.start(touchOpenDelay, () => {
+            store.setOpen(true, details);
+          });
+        } else {
+          store.setOpen(nextOpen, details);
+        }
+        return;
+      }
+
+      // Capture the currentTarget before the rAF.
+      // as React sets it to null after the event handler completes.
+      const eventCurrentTarget = event.currentTarget;
+
+      // Wait until focus is set on the element. This is an alternative to
+      // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
+      frame.request(() => {
+        const details = createChangeEventDetails(reason, nativeEvent, eventCurrentTarget);
+        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+          touchOpenTimeout.start(touchOpenDelay, () => {
+            store.setOpen(true, details);
+          });
+        } else {
+          store.setOpen(nextOpen, details);
+        }
+      });
+    },
+    onClick(event) {
+      if (eventOption === 'mousedown-only') {
+        return;
+      }
+      const pointerType = pointerTypeRef.current;
+      if (eventOption === 'mousedown' && pointerType) {
+        pointerTypeRef.current = undefined;
+        return;
+      }
+      if (isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+        return;
+      }
+      const open = store.select('open');
+      const openEvent = dataRef.current.openEvent;
+      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
+      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? isClickLikeEvent(openEvent) : true));
+      const details = createChangeEventDetails(reason, event.nativeEvent, event.currentTarget);
+      if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+        touchOpenTimeout.start(touchOpenDelay, () => {
+          store.setOpen(true, details);
+        });
+      } else {
+        store.setOpen(nextOpen, details);
+      }
+    },
+    onKeyDown() {
+      pointerTypeRef.current = undefined;
+    }
+  }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
+  return React.useMemo(() => enabled ? {
+    reference
+  } : EMPTY_OBJECT, [enabled, reference]);
+}

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

@@ -0,0 +1,22 @@
+import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
+export interface UseClientPointProps {
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: boolean | undefined;
+  /**
+   * Whether to restrict the client point to an axis and use the reference
+   * element (if it exists) as the other axis. This can be useful if the
+   * floating element is also interactive.
+   * @default 'both'
+   */
+  axis?: 'x' | 'y' | 'both' | undefined;
+}
+/**
+ * Positions the floating element relative to a client point (in the viewport),
+ * such as the mouse position. By default, it follows the mouse cursor.
+ * @see https://floating-ui.com/docs/useClientPoint
+ */
+export declare function useClientPoint(context: FloatingRootContext | FloatingContext, props?: UseClientPointProps): ElementProps;