@tale-ui/react 0.0.3

package/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/floating-ui-react/hooks/useHoverReferenceInteraction.js

@@ -0,0 +1,299 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHoverReferenceInteraction = useHoverReferenceInteraction;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _dom = require("@floating-ui/utils/dom");
+var _useValueAsRef = require("@tale-ui/utils/useValueAsRef");
+var _useStableCallback = require("@tale-ui/utils/useStableCallback");
+var _owner = require("@tale-ui/utils/owner");
+var _utils = require("../utils");
+var _createTaleUIEventDetails = require("../../utils/createTaleUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _useHover = require("./useHover");
+var _FloatingTree = require("../components/FloatingTree");
+var _useHoverInteractionSharedState = require("./useHoverInteractionSharedState");
+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.
+ */
+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 = (0, _FloatingTree.useFloatingTree)(externalTree);
+  const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
+  const handleCloseRef = (0, _useValueAsRef.useValueAsRef)(handleClose);
+  const delayRef = (0, _useValueAsRef.useValueAsRef)(delay);
+  const restMsRef = (0, _useValueAsRef.useValueAsRef)(restMs);
+  const enabledRef = (0, _useValueAsRef.useValueAsRef)(enabled);
+  if (isActiveTrigger) {
+    // eslint-disable-next-line no-underscore-dangle
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
+  }
+  const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
+    if (instance.interactedInside) {
+      return true;
+    }
+    return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+  });
+  const isRelatedTargetInsideEnabledTrigger = (0, _useStableCallback.useStableCallback)(target => {
+    return (0, _utils.isTargetInsideEnabledTrigger)(target, store.context.triggerElements);
+  });
+  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
+    const closeDelay = (0, _useHover.getDelay)(delayRef.current, 'close', instance.pointerType);
+    if (closeDelay && !instance.handler) {
+      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
+    } else if (runElseBranch) {
+      instance.openChangeTimeout.clear();
+      store.setOpen(false, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+    }
+  }, [delayRef, store, instance]);
+  const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
+    instance.unbindMouseMove();
+    instance.handler = undefined;
+  });
+  const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
+    if (instance.performedPointerEventsMutation) {
+      const body = (0, _owner.ownerDocument)(store.select('domReferenceElement')).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(_useHoverInteractionSharedState.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 = (0, _useStableCallback.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 (!(0, _dom.isElement)(trigger)) {
+      return undefined;
+    }
+    function onMouseEnter(event) {
+      instance.openChangeTimeout.clear();
+      instance.blockMouseMove = false;
+      if (mouseOnly && !(0, _utils.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 && !(0, _useHover.getDelay)(delayRef.current, 'open')) {
+        return;
+      }
+      const openDelay = (0, _useHover.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 => (0, _utils.contains)(t, event.target))) && (!currentDomReference || !(0, _utils.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, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+      } else if (openDelay) {
+        instance.openChangeTimeout.start(openDelay, () => {
+          if (shouldOpen) {
+            store.setOpen(true, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+          }
+        });
+      } else if (shouldOpen) {
+        store.setOpen(true, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
+      }
+    }
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        clearPointerEvents();
+        return;
+      }
+      instance.unbindMouseMove();
+      const domReferenceElement = store.select('domReferenceElement');
+      const doc = (0, _owner.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' ? !(0, _utils.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 => (0, _utils.contains)(t, event.target))) && (!currentDomReference || !(0, _utils.contains)(currentDomReference, event.target));
+        if (mouseOnly && !(0, _utils.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, (0, _createTaleUIEventDetails.createChangeEventDetails)(_reasons.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/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/floating-ui-react/hooks/useInteractions.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInteractions = useInteractions;
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("../utils/constants");
+/**
+ * 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
+ */
+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[_constants.FOCUSABLE_ATTRIBUTE] = '';
+  }
+  for (const key in userProps) {
+    if (isItem && userProps) {
+      if (key === _constants.ACTIVE_KEY || key === _constants.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 === _constants.ACTIVE_KEY || key === _constants.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);
+        };
+      }
+    }
+  }
+}

package/floating-ui-react/hooks/useListNavigation.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { FloatingTreeStore } from "../components/FloatingTreeStore.js";
+import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
+export declare const ESCAPE = "Escape";
+export interface UseListNavigationProps {
+  /**
+   * A ref that holds an array of list items.
+   * @default empty list
+   */
+  listRef: React.RefObject<Array<HTMLElement | null>>;
+  /**
+   * The index of the currently active (focused or highlighted) item, which may
+   * or may not be selected.
+   * @default null
+   */
+  activeIndex: number | null;
+  /**
+   * A callback that is called when the user navigates to a new active item,
+   * passed in a new `activeIndex`.
+   */
+  onNavigate?: ((activeIndex: number | null, event: React.SyntheticEvent | undefined) => void) | undefined;
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: boolean | undefined;
+  /**
+   * The currently selected item index, which may or may not be active.
+   * @default null
+   */
+  selectedIndex?: number | null | undefined;
+  /**
+   * Whether to focus the item upon opening the floating element. 'auto' infers
+   * what to do based on the input type (keyboard vs. pointer), while a boolean
+   * value will force the value.
+   * @default 'auto'
+   */
+  focusItemOnOpen?: boolean | 'auto' | undefined;
+  /**
+   * Whether hovering an item synchronizes the focus.
+   * @default true
+   */
+  focusItemOnHover?: boolean | undefined;
+  /**
+   * Whether pressing an arrow key on the navigation’s main axis opens the
+   * floating element.
+   * @default true
+   */
+  openOnArrowKeyDown?: boolean | undefined;
+  /**
+   * By default elements with either a `disabled` or `aria-disabled` attribute
+   * are skipped in the list navigation — however, this requires the items to
+   * be rendered.
+   * This prop allows you to manually specify indices which should be disabled,
+   * overriding the default logic.
+   * For Windows-style select popups, where the menu does not open when
+   * navigating via arrow keys, specify an empty array.
+   * @default undefined
+   */
+  disabledIndices?: ReadonlyArray<number> | ((index: number) => boolean) | undefined;
+  /**
+   * Determines whether focus can escape the list, such that nothing is selected
+   * after navigating beyond the boundary of the list. In some
+   * autocomplete/combobox components, this may be desired, as screen
+   * readers will return to the input.
+   * `loopFocus` must be `true`.
+   * @default false
+   */
+  allowEscape?: boolean | undefined;
+  /**
+   * Determines whether focus should loop around when navigating past the first
+   * or last item.
+   * @default false
+   */
+  loopFocus?: boolean | undefined;
+  /**
+   * If the list is nested within another one (e.g. a nested submenu), the
+   * navigation semantics change.
+   * @default false
+   */
+  nested?: boolean | undefined;
+  /**
+   * Allows to specify the orientation of the parent list, which is used to
+   * determine the direction of the navigation.
+   * This is useful when list navigation is used within a Composite,
+   * as the hook can't determine the orientation of the parent list automatically.
+   */
+  parentOrientation?: UseListNavigationProps['orientation'] | undefined;
+  /**
+   * Whether the direction of the floating element’s navigation is in RTL
+   * layout.
+   * @default false
+   */
+  rtl?: boolean | undefined;
+  /**
+   * Whether the focus is virtual (using `aria-activedescendant`).
+   * Use this if you need focus to remain on the reference element
+   * (such as an input), but allow arrow keys to navigate list items.
+   * This is common in autocomplete listbox components.
+   * Your virtually-focused list items must have a unique `id` set on them.
+   * If you’re using a component role with the `useRole()` Hook, then an `id` is
+   * generated automatically.
+   * @default false
+   */
+  virtual?: boolean | undefined;
+  /**
+   * The orientation in which navigation occurs.
+   * @default 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+  /**
+   * Specifies how many columns the list has (i.e., it’s a grid). Use an
+   * orientation of 'horizontal' (e.g. for an emoji picker/date picker, where
+   * pressing ArrowRight or ArrowLeft can change rows), or 'both' (where the
+   * current row cannot be escaped with ArrowRight or ArrowLeft, only ArrowUp
+   * and ArrowDown).
+   * @default 1
+   */
+  cols?: number | undefined;
+  /**
+   * The id of the root component.
+   */
+  id?: string | undefined;
+  /**
+   * Whether to clear the active index when the pointer leaves an item.
+   * @default true
+   */
+  resetOnPointerLeave?: boolean | undefined;
+  /**
+   * External FlatingTree to use when the one provided by context can't be used.
+   */
+  externalTree?: FloatingTreeStore | undefined;
+}
+/**
+ * Adds arrow key-based navigation of a list of items, either using real DOM
+ * focus or virtual focus.
+ * @see https://floating-ui.com/docs/useListNavigation
+ */
+export declare function useListNavigation(context: FloatingRootContext | FloatingContext, props: UseListNavigationProps): ElementProps;