@msviderok/base-ui-solid 1.0.0-beta.1

package/esm/floating-ui-solid/hooks/useHover.js

@@ -0,0 +1,358 @@
+import { isElement } from '@floating-ui/utils/dom';
+import { createEffect, createMemo, on, onCleanup, mergeProps as solidMergeProps } from 'solid-js';
+import { useTimeout } from "../../utils/useTimeout.js";
+import { contains, getDocument, isMouseLikePointerType } from "../utils.js";
+import { access } from "../../solid-helpers.js";
+import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
+import { createAttribute } from "../utils/createAttribute.js";
+const safePolygonIdentifier = createAttribute('safe-polygon');
+export function getDelay(value, prop, pointerType) {
+  if (pointerType && !isMouseLikePointerType(pointerType)) {
+    return 0;
+  }
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (typeof value === 'function') {
+    const result = value();
+    if (typeof result === 'number') {
+      return result;
+    }
+    return result?.[prop];
+  }
+  return value?.[prop];
+}
+/**
+ * Opens the floating element while hovering over the reference element, like
+ * CSS `:hover`.
+ * @see https://floating-ui.com/docs/useHover
+ */
+export function useHover(contextProp, props = {}) {
+  const enabled = () => access(props.enabled) ?? true;
+  const delay = () => access(props.delay) ?? 0;
+  const mouseOnly = () => access(props.mouseOnly) ?? false;
+  const restMs = () => access(props.restMs) ?? 0;
+  const move = () => access(props.move) ?? true;
+  const context = () => access(contextProp);
+  const tree = useFloatingTree();
+  const parentId = useFloatingParentNodeId();
+  let pointerTypeRef;
+  const timeout = useTimeout();
+  const restTimeout = useTimeout();
+  let blockMouseMoveRef = true;
+  let performedPointerEventsMutationRef = false;
+  let restTimeoutPendingRef = false;
+  let unbindMouseMoveRef = () => {};
+  const isHoverOpen = () => {
+    const type = context().dataRef.openEvent?.type;
+    return type?.includes('mouse') && type !== 'mousedown';
+  };
+  function onOpenChangeLocal({
+    open: newOpen
+  }) {
+    if (!newOpen) {
+      timeout.clear();
+      restTimeout.clear();
+      blockMouseMoveRef = true;
+      restTimeoutPendingRef = false;
+    }
+  }
+  function onLeave(event) {
+    if (isHoverOpen()) {
+      context().onOpenChange(false, event, 'hover');
+    }
+  }
+
+  // When closing before opening, clear the delay timeouts to cancel it
+  // from showing.
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    context().events.on('openchange', onOpenChangeLocal);
+    onCleanup(() => {
+      context().events.off('openchange', onOpenChangeLocal);
+    });
+  });
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    if (!props.handleClose) {
+      return;
+    }
+    if (!context().open()) {
+      return;
+    }
+    const floating = context().elements.floating();
+    const html = getDocument(floating).documentElement;
+    html.addEventListener('mouseleave', onLeave);
+    onCleanup(() => {
+      html.removeEventListener('mouseleave', onLeave);
+    });
+  });
+  const closeWithDelay = (event, runElseBranch = true, reason = 'hover') => {
+    const closeDelay = getDelay(delay(), 'close', pointerTypeRef);
+    if (closeDelay) {
+      timeout.start(closeDelay, () => context().onOpenChange(false, event, reason));
+    } else if (runElseBranch) {
+      timeout.clear();
+      context().onOpenChange(false, event, reason);
+    }
+  };
+  const cleanupMouseMoveHandler = () => {
+    unbindMouseMoveRef();
+  };
+  const clearPointerEvents = () => {
+    if (performedPointerEventsMutationRef) {
+      const floating = context().elements.floating();
+      const body = getDocument(floating).body;
+      body.style.pointerEvents = '';
+      body.removeAttribute(safePolygonIdentifier);
+      performedPointerEventsMutationRef = false;
+    }
+  };
+  const isClickLikeOpenEvent = () => {
+    const openEvent = context().dataRef.openEvent;
+    return openEvent ? ['click', 'mousedown'].includes(openEvent.type) : false;
+  };
+  function onReferenceMouseEnter(event) {
+    timeout.clear();
+    blockMouseMoveRef = false;
+    if (mouseOnly() && !isMouseLikePointerType(pointerTypeRef) || restMs() > 0 && !getDelay(delay(), 'open')) {
+      return;
+    }
+    const openDelay = getDelay(delay(), 'open', pointerTypeRef);
+    if (openDelay) {
+      timeout.start(openDelay, () => {
+        if (!context().open()) {
+          context().onOpenChange(true, event, 'hover');
+        }
+      });
+    } else if (!context().open()) {
+      context().onOpenChange(true, event, 'hover');
+    }
+  }
+  function onReferenceMouseLeave(event) {
+    if (isClickLikeOpenEvent()) {
+      clearPointerEvents();
+      return;
+    }
+    unbindMouseMoveRef();
+    const floating = context().elements.floating();
+    const doc = getDocument(floating);
+    restTimeout.clear();
+    restTimeoutPendingRef = false;
+    const ctx = context().dataRef.floatingContext;
+    if (props.handleClose && ctx) {
+      // Prevent clearing `onScrollMouseLeave` timeout.
+      if (!context().open()) {
+        timeout.clear();
+      }
+      const mergedProps = solidMergeProps(ctx, {
+        tree,
+        x: () => event.clientX,
+        y: () => event.clientY,
+        onClose() {
+          clearPointerEvents();
+          cleanupMouseMoveHandler();
+          if (!isClickLikeOpenEvent()) {
+            closeWithDelay(event, true, 'safe-polygon');
+          }
+        }
+      });
+      const handler = props.handleClose(mergedProps);
+      doc.addEventListener('mousemove', handler);
+      unbindMouseMoveRef = () => {
+        doc.removeEventListener('mousemove', handler);
+      };
+      return;
+    }
+
+    // Allow interactivity without `safePolygon` on touch devices. With a
+    // pointer, a short close delay is an alternative, so it should work
+    // consistently.
+    const shouldClose = pointerTypeRef === 'touch' ? !contains(context().elements.floating(), event.relatedTarget) : true;
+    if (shouldClose) {
+      closeWithDelay(event);
+    }
+  }
+
+  // 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()) {
+      return;
+    }
+    const ctx = context().dataRef.floatingContext;
+    if (!ctx) {
+      return;
+    }
+    const mergedProps = solidMergeProps(ctx, {
+      tree,
+      x: () => event.clientX,
+      y: () => event.clientY,
+      onClose() {
+        clearPointerEvents();
+        cleanupMouseMoveHandler();
+        if (!isClickLikeOpenEvent()) {
+          closeWithDelay(event);
+        }
+      }
+    });
+    props.handleClose?.(mergedProps)(event);
+  }
+  function onFloatingMouseEnter() {
+    timeout.clear();
+  }
+  function onFloatingMouseLeave(event) {
+    if (!isClickLikeOpenEvent()) {
+      closeWithDelay(event, false);
+    }
+  }
+
+  // Registering the mouse events on the reference directly to bypass React's
+  // delegation system. If the cursor was on a disabled element and then entered
+  // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+    const domReference = context().elements.domReference();
+    if (isElement(domReference)) {
+      const reference = domReference;
+      const floating = context().elements.floating();
+      if (context().open()) {
+        reference.addEventListener('mouseleave', onScrollMouseLeave);
+      }
+      if (move()) {
+        reference.addEventListener('mousemove', onReferenceMouseEnter, {
+          once: true
+        });
+      }
+      reference.addEventListener('mouseenter', onReferenceMouseEnter);
+      reference.addEventListener('mouseleave', onReferenceMouseLeave);
+      if (floating) {
+        floating.addEventListener('mouseleave', onScrollMouseLeave);
+        floating.addEventListener('mouseenter', onFloatingMouseEnter);
+        floating.addEventListener('mouseleave', onFloatingMouseLeave);
+      }
+      onCleanup(() => {
+        if (context().open()) {
+          reference.removeEventListener('mouseleave', onScrollMouseLeave);
+        }
+        if (move()) {
+          reference.removeEventListener('mousemove', onReferenceMouseEnter);
+        }
+        reference.removeEventListener('mouseenter', onReferenceMouseEnter);
+        reference.removeEventListener('mouseleave', onReferenceMouseLeave);
+        if (floating) {
+          floating.removeEventListener('mouseleave', onScrollMouseLeave);
+          floating.removeEventListener('mouseenter', onFloatingMouseEnter);
+          floating.removeEventListener('mouseleave', onFloatingMouseLeave);
+        }
+      });
+    }
+  });
+
+  // Block pointer-events of every element other than the reference and floating
+  // while the floating element is open and has a `handleClose` handler. Also
+  // handles nested floating elements.
+  // https://github.com/floating-ui/floating-ui/issues/1722
+  createEffect(() => {
+    if (!enabled()) {
+      return;
+    }
+
+    // eslint-disable-next-line no-underscore-dangle
+    if (context().open() && props.handleClose?.__options?.blockPointerEvents && isHoverOpen()) {
+      performedPointerEventsMutationRef = true;
+      const floatingEl = context().elements.floating();
+      const domReference = context().elements.domReference();
+      if (isElement(domReference) && floatingEl) {
+        const body = getDocument(floatingEl).body;
+        body.setAttribute(safePolygonIdentifier, '');
+        const ref = domReference;
+        const parentNode = tree?.nodesRef.find(node => node.id === parentId);
+        const parentFloating = parentNode ? access(parentNode.context)?.elements.floating() : undefined;
+        if (parentFloating) {
+          parentFloating.style.pointerEvents = '';
+        }
+        body.style.pointerEvents = 'none';
+        ref.style.pointerEvents = 'auto';
+        floatingEl.style.pointerEvents = 'auto';
+        onCleanup(() => {
+          body.style.pointerEvents = '';
+          ref.style.pointerEvents = '';
+          floatingEl.style.pointerEvents = '';
+        });
+      }
+    }
+  });
+  createEffect(() => {
+    if (!context().open()) {
+      pointerTypeRef = undefined;
+      restTimeoutPendingRef = false;
+      cleanupMouseMoveHandler();
+      clearPointerEvents();
+    }
+  });
+  createEffect(on([enabled, () => context().elements.domReference()], () => {
+    onCleanup(() => {
+      cleanupMouseMoveHandler();
+      timeout.clear();
+      restTimeout.clear();
+      clearPointerEvents();
+    });
+  }));
+  function setPointerRef(event) {
+    pointerTypeRef = event.pointerType;
+  }
+  const reference = createMemo(() => {
+    return {
+      ref: () => {
+        onCleanup(() => {
+          // @ts-expect-error TODO: even though its not in the types this is valid
+          context().refs?.setReference?.(null);
+        });
+      },
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef,
+      onMouseMove: event => {
+        function handleMouseMove() {
+          if (!blockMouseMoveRef && !context().open()) {
+            context().onOpenChange(true, event, 'hover');
+          }
+        }
+        if (mouseOnly() && !isMouseLikePointerType(pointerTypeRef)) {
+          return;
+        }
+        if (context().open() || restMs() === 0) {
+          return;
+        }
+
+        // Ignore insignificant movements to account for tremors.
+        if (restTimeoutPendingRef && event.movementX ** 2 + event.movementY ** 2 < 2) {
+          return;
+        }
+        restTimeout.clear();
+        if (pointerTypeRef === 'touch') {
+          handleMouseMove();
+        } else {
+          restTimeoutPendingRef = true;
+          restTimeout.start(restMs(), handleMouseMove);
+        }
+      }
+    };
+  });
+  const returnValue = createMemo(() => {
+    if (!enabled()) {
+      return {};
+    }
+    return {
+      reference: reference()
+    };
+  });
+  return returnValue;
+}

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

@@ -0,0 +1,21 @@
+import { type Accessor, type JSX } from 'solid-js';
+import type { ElementProps } from "../types.js";
+import { ACTIVE_KEY, SELECTED_KEY } from "../utils/constants.js";
+export type ExtendedUserProps = {
+  [ACTIVE_KEY]?: boolean;
+  [SELECTED_KEY]?: boolean;
+};
+export interface UseInteractionsReturn {
+  getReferenceProps: <T extends Element>(userProps?: JSX.HTMLAttributes<T>) => Record<string, unknown>;
+  getFloatingProps: <T extends HTMLElement>(userProps?: JSX.HTMLAttributes<T>) => Record<string, unknown>;
+  getItemProps: <T extends HTMLElement>(userProps?: Omit<JSX.HTMLAttributes<T>, 'selected' | 'active'> & ExtendedUserProps) => 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
+ *
+ * TODO: Object.assign from proxy is probably not the best way to do it
+ */
+export declare function useInteractions(propsList?: Array<Accessor<ElementProps> | void>): UseInteractionsReturn;

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

@@ -0,0 +1,48 @@
+import { combineProps } from '@solid-primitives/props';
+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
+ *
+ * TODO: Object.assign from proxy is probably not the best way to do it
+ */
+export function useInteractions(propsList = []) {
+  return {
+    getReferenceProps(userProps) {
+      const referenceList = propsList.map(item => item?.()?.reference).filter(i => !!i);
+      if (userProps) {
+        referenceList.push(userProps);
+      }
+      const combined = combineProps(referenceList);
+      return Object.assign({}, combined);
+    },
+    getFloatingProps(userProps) {
+      const list = propsList.map(item => item?.()?.floating).filter(i => !!i);
+      list.unshift({
+        tabIndex: -1,
+        [FOCUSABLE_ATTRIBUTE]: ''
+      });
+      if (userProps) {
+        list.push(userProps);
+      }
+      const combined = combineProps(list);
+      return Object.assign({}, combined);
+    },
+    getItemProps(userProps) {
+      let list = propsList.map(item => item?.()?.item).filter(i => !!i);
+      if (userProps) {
+        const userPropsWitoutActiveAndSelected = {
+          ...userProps
+        };
+        delete userPropsWitoutActiveAndSelected[ACTIVE_KEY];
+        delete userPropsWitoutActiveAndSelected[SELECTED_KEY];
+        list.push(userPropsWitoutActiveAndSelected);
+      }
+      list = list.map(item => typeof item === 'function' ? item(userProps ?? {}) : item);
+      const combined = combineProps(list);
+      return Object.assign({}, combined);
+    }
+  };
+}

package/esm/floating-ui-solid/hooks/useListNavigation.d.ts

@@ -0,0 +1,153 @@
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import type { Dimensions, ElementProps, 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: MaybeAccessor<Array<HTMLElement | null | undefined>>;
+  /**
+   * The index of the currently active (focused or highlighted) item, which may
+   * or may not be selected.
+   * @default null
+   */
+  activeIndex: MaybeAccessor<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) => void;
+  /**
+   * Whether the Hook is enabled, including all internal Effects and event
+   * handlers.
+   * @default true
+   */
+  enabled?: MaybeAccessor<boolean>;
+  /**
+   * The currently selected item index, which may or may not be active.
+   * @default null
+   */
+  selectedIndex?: MaybeAccessor<number | null>;
+  /**
+   * 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?: MaybeAccessor<boolean | 'auto'>;
+  /**
+   * Whether hovering an item synchronizes the focus.
+   * @default true
+   */
+  focusItemOnHover?: MaybeAccessor<boolean>;
+  /**
+   * Whether pressing an arrow key on the navigation’s main axis opens the
+   * floating element.
+   * @default true
+   */
+  openOnArrowKeyDown?: MaybeAccessor<boolean>;
+  /**
+   * 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 menus, where the menu does not open when
+   * navigating via arrow keys, specify an empty array.
+   * @default undefined
+   */
+  disabledIndices?: MaybeAccessor<Array<number>> | ((index?: number) => boolean);
+  /**
+   * 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.
+   * `loop` must be `true`.
+   * @default false
+   */
+  allowEscape?: MaybeAccessor<boolean>;
+  /**
+   * Determines whether focus should loop around when navigating past the first
+   * or last item.
+   * @default false
+   */
+  loop?: MaybeAccessor<boolean>;
+  /**
+   * If the list is nested within another one (e.g. a nested submenu), the
+   * navigation semantics change.
+   * @default false
+   */
+  nested?: MaybeAccessor<boolean>;
+  /**
+   * 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'];
+  /**
+   * Whether the direction of the floating element’s navigation is in RTL
+   * layout.
+   * @default false
+   */
+  rtl?: MaybeAccessor<boolean>;
+  /**
+   * 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?: MaybeAccessor<boolean>;
+  /**
+   * The orientation in which navigation occurs.
+   * @default 'vertical'
+   */
+  orientation?: MaybeAccessor<'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?: MaybeAccessor<number | undefined>;
+  /**
+   * Whether to scroll the active item into view when navigating. The default
+   * value uses nearest options.
+   */
+  scrollItemIntoView?: MaybeAccessor<boolean | ScrollIntoViewOptions>;
+  refs?: {
+    /**
+     * When using virtual focus management, this holds a ref to the
+     * virtually-focused item. This allows nested virtual navigation to be
+     * enabled, and lets you know when a nested element is virtually focused from
+     * the root reference handling the events. Requires `FloatingTree` to be
+     * setup.
+     */
+    virtualItemRef?: HTMLElement | null | undefined;
+  };
+  /**
+   * Only for `cols > 1`, specify sizes for grid items.
+   * `{ width: 2, height: 2 }` means an item is 2 columns wide and 2 rows tall.
+   */
+  itemSizes?: MaybeAccessor<Dimensions[]>;
+  /**
+   * Only relevant for `cols > 1` and items with different sizes, specify if
+   * the grid is dense (as defined in the CSS spec for `grid-auto-flow`).
+   * @default false
+   */
+  dense?: MaybeAccessor<boolean>;
+}
+/**
+ * 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(contextProp: MaybeAccessor<FloatingRootContext>, props: UseListNavigationProps): Accessor<ElementProps>;