@ariakit/react-components 0.1.0

package/src/composite/composite-hover.tsx

@@ -0,0 +1,230 @@
+import {
+  useBooleanEvent,
+  useEvent,
+  useIsMouseMoving,
+  useMergeRefs,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import {
+  contains,
+  hasFocus,
+  hasFocusWithin,
+  hasOwnProperty,
+  invariant,
+  removeUndefinedValues,
+} from "@ariakit/utils";
+import type { BooleanOrCallback } from "@ariakit/utils";
+import type { ElementType, MouseEvent as ReactMouseEvent } from "react";
+import { useCallback } from "react";
+import { useCompositeContext } from "./composite-context.tsx";
+import type { CompositeStore } from "./composite-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+function getMouseDestination(event: ReactMouseEvent<HTMLElement>) {
+  const relatedTarget = event.relatedTarget as Node | null;
+  if (relatedTarget?.nodeType === Node.ELEMENT_NODE) {
+    return relatedTarget as Element;
+  }
+  return null;
+}
+
+function hoveringInside(event: ReactMouseEvent<HTMLElement>) {
+  const nextElement = getMouseDestination(event);
+  if (!nextElement) return false;
+  return contains(event.currentTarget, nextElement);
+}
+
+const symbol = Symbol("composite-hover");
+type ElementWithSymbol = HTMLElement & { [symbol]?: boolean };
+
+function movingToAnotherItem(event: ReactMouseEvent<HTMLElement>) {
+  let dest = getMouseDestination(event);
+  if (!dest) return false;
+  do {
+    if (hasOwnProperty(dest, symbol) && dest[symbol]) return true;
+    dest = dest.parentElement;
+  } while (dest);
+  return false;
+}
+
+/**
+ * Returns props to create a `CompositeHover` component. The composite item that
+ * receives these props will get focused on mouse move and lose focus to the
+ * composite base element on mouse leave. This should be combined with the
+ * `CompositeItem` component, the `useCompositeItem` hook or any component/hook
+ * that uses them underneath.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeHover({ store });
+ * <CompositeItem store={store} {...props}>Item</CompositeItem>
+ * ```
+ */
+export const useCompositeHover = createHook<TagName, CompositeHoverOptions>(
+  function useCompositeHover({
+    store,
+    focusOnHover = true,
+    blurOnHoverEnd = !!focusOnHover,
+    ...props
+  }) {
+    const context = useCompositeContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "CompositeHover must be wrapped in a Composite component.",
+    );
+
+    const isMouseMoving = useIsMouseMoving();
+
+    const onMouseMoveProp = props.onMouseMove;
+    const focusOnHoverProp = useBooleanEvent(focusOnHover);
+
+    const onMouseMove = useEvent((event: ReactMouseEvent<HTMLType>) => {
+      onMouseMoveProp?.(event);
+      if (event.defaultPrevented) return;
+      if (!isMouseMoving()) return;
+      if (!focusOnHoverProp(event)) return;
+      // If we're hovering over an item that doesn't have DOM focus, we move
+      // focus to the composite element. We're doing this here before setting
+      // the active id because the composite element will automatically set the
+      // active id to null when it receives focus.
+      if (!hasFocusWithin(event.currentTarget)) {
+        const baseElement = store?.getState().baseElement;
+        if (baseElement && !hasFocus(baseElement)) {
+          baseElement.focus();
+        }
+      }
+      store?.setActiveId(event.currentTarget.id);
+    });
+
+    const onMouseLeaveProp = props.onMouseLeave;
+    const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);
+
+    const onMouseLeave = useEvent((event: ReactMouseEvent<HTMLType>) => {
+      onMouseLeaveProp?.(event);
+      if (event.defaultPrevented) return;
+      if (!isMouseMoving()) return;
+      if (hoveringInside(event)) return;
+      if (movingToAnotherItem(event)) return;
+      if (!focusOnHoverProp(event)) return;
+      if (!blurOnHoverEndProp(event)) return;
+      store?.setActiveId(null);
+      // Move focus to the composite element.
+      store?.getState().baseElement?.focus();
+    });
+
+    const ref = useCallback((element: ElementWithSymbol | null) => {
+      if (!element) return;
+      element[symbol] = true;
+    }, []);
+
+    props = {
+      ...props,
+      ref: useMergeRefs(ref, props.ref),
+      onMouseMove,
+      onMouseLeave,
+    };
+
+    return removeUndefinedValues(props);
+  },
+);
+
+/**
+ * Renders an element in a composite widget that receives focus on mouse move
+ * and loses focus to the composite base element on mouse leave.
+ *
+ * This should be combined with the
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) component.
+ * The
+ * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)
+ * and
+ * [`blurOnHoverEnd`](https://ariakit.com/reference/composite-hover#bluronhoverend)
+ * props can be used to customize the behavior.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeHover render={<CompositeItem />}>
+ *       Item
+ *     </CompositeHover>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+export const CompositeHover = memo(
+  forwardRef(function CompositeHover(props: CompositeHoverProps) {
+    const htmlProps = useCompositeHover(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface CompositeHoverOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`Composite`](https://ariakit.com/reference/composite) or
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * components' context will be used.
+   */
+  store?: CompositeStore;
+  /**
+   * Determines if the composite item should be _focused_ when hovered over.
+   *
+   * Note that the actual DOM focus will stay on the composite element. This
+   * item will get the
+   * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)
+   * attribute so it can be styled as if it's focused.
+   *
+   * Live examples:
+   * - [Multi-selectable
+   *   Combobox](https://ariakit.com/examples/combobox-multiple)
+   * - [Combobox with integrated
+   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * @default true
+   */
+  focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
+  /**
+   * Determines if the composite item should lose focus when the mouse leaves.
+   * By default, this is set to `true` if
+   * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)
+   * is `true`.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * - [Combobox with integrated
+   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   * - [Select with Combobox and
+   *   Tabs](https://ariakit.com/examples/select-combobox-tab)
+   */
+  blurOnHoverEnd?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
+}
+
+export type CompositeHoverProps<T extends ElementType = TagName> = Props<
+  T,
+  CompositeHoverOptions<T>
+>;

package/src/composite/composite-input.tsx

@@ -0,0 +1,147 @@
+import {
+  useEvent,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import {
+  getDocument,
+  getTextboxSelection,
+  isTextField,
+  removeUndefinedValues,
+} from "@ariakit/utils";
+import type { ElementType, FocusEvent, KeyboardEvent } from "react";
+import { useEffect } from "react";
+import type { CompositeStore } from "./composite-store.ts";
+import { selectTextField } from "./utils.ts";
+
+const TagName = "input" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+function getValueLength(element: HTMLElement) {
+  if (isTextField(element)) {
+    return element.value.length;
+  } else if (element.isContentEditable) {
+    const range = getDocument(element).createRange();
+    range.selectNodeContents(element);
+    return range.toString().length;
+  }
+  return 0;
+}
+
+/**
+ * Returns props to create a `CompositeInput` component. This should be used in
+ * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
+ * or any other component/hook that uses `CompositeItem` underneath.
+ * @see https://ariakit.com/components/composite
+ * @deprecated Use `useCompositeItem` instead.
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeInput({ store });
+ * <Composite store={store}>
+ *   <CompositeItem {...props} />
+ * </Composite>
+ * ```
+ */
+export const useCompositeInput = createHook<TagName, CompositeInputOptions>(
+  function useCompositeInput({ store, ...props }) {
+    const onKeyDownCaptureProp = props.onKeyDownCapture;
+
+    if (process.env.NODE_ENV !== "production") {
+      useEffect(() => {
+        console.warn(
+          "CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead.",
+        );
+      }, []);
+    }
+
+    const onKeyDownCapture = useEvent((event: KeyboardEvent<HTMLType>) => {
+      onKeyDownCaptureProp?.(event);
+      if (event.defaultPrevented) return;
+      const element = event.currentTarget;
+      if (!element.isContentEditable && !isTextField(element)) return;
+      const selection = getTextboxSelection(element);
+
+      const { orientation } = store?.getState() || {};
+      const isHorizontal = orientation !== "vertical";
+      const isVertical = orientation !== "horizontal";
+
+      const isLeft = isHorizontal && event.key === "ArrowLeft";
+      const isRight = isHorizontal && event.key === "ArrowRight";
+      const isUp = isVertical && event.key === "ArrowUp";
+      const isDown = isVertical && event.key === "ArrowDown";
+
+      if (isRight || isDown) {
+        if (selection.end !== getValueLength(element)) {
+          event.stopPropagation();
+        }
+      } else if (isLeft || isUp) {
+        if (selection.start !== 0) {
+          event.stopPropagation();
+        }
+      }
+    });
+
+    const onFocusProp = props.onFocus;
+
+    const onFocus = useEvent((event: FocusEvent<HTMLType>) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented) return;
+      selectTextField(event.currentTarget);
+    });
+
+    props = {
+      ...props,
+      onKeyDownCapture,
+      onFocus,
+    };
+
+    return removeUndefinedValues(props);
+  },
+);
+
+/**
+ * Renders an input as a composite item. This should be used in conjunction with
+ * the [`CompositeItem`](https://ariakit.com/reference/composite-item) component
+ * or a component that uses
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.
+ * @see https://ariakit.com/components/composite
+ * @deprecated Use `<CompositeItem render={<input />}>` instead.
+ * @example
+ * ```jsx {3}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem render={<CompositeInput />} />
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+export const CompositeInput = memo(
+  forwardRef(function CompositeInput(props: CompositeInputProps) {
+    const htmlProps = useCompositeInput(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface CompositeInputOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`Composite`](https://ariakit.com/reference/composite) or
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * components' context will be used.
+   */
+  store?: CompositeStore;
+}
+
+export type CompositeInputProps<T extends ElementType = TagName> = Props<
+  T,
+  CompositeInputOptions<T>
+>;

package/src/composite/composite-item-offscreen.tsx

@@ -0,0 +1,112 @@
+import { useStoreStateObject } from "@ariakit/react-store";
+import { useId, useMergeRefs, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { getPopupItemRole } from "@ariakit/utils";
+import type { ElementType } from "react";
+import type { CollectionItemOptions } from "../collection/collection-item-offscreen.tsx";
+import { useCollectionItemOffscreen } from "../collection/collection-item-offscreen.tsx";
+import type { ComboboxStoreState } from "../combobox/combobox-store.ts";
+import { Role } from "../role/role.tsx";
+import type { SelectStoreState } from "../select/select-store.ts";
+import { useCompositeContext } from "./composite-context.tsx";
+import * as Base from "./composite-item.tsx";
+import type { CompositeStoreState } from "./composite-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+
+export function useCompositeItemOffscreen<
+  T extends ElementType,
+  // oxlint-disable-next-line no-unnecessary-type-parameters
+  P extends CompositeItemProps<T>,
+>({ store, offscreenMode = "active", disabled, value, ...props }: P) {
+  const context = useCompositeContext();
+  store = store || context;
+
+  const id = useId(props.id);
+
+  const { storeId, active, listElement, offscreenRoot } = useStoreStateObject(
+    store,
+    {
+      storeId: "id",
+      active(
+        state?: CompositeStoreState | ComboboxStoreState | SelectStoreState,
+      ) {
+        if (!state) return;
+        if (!("selectedValue" in state) && "value" in state) {
+          if (state.value === value) return true;
+        }
+        return !!id && state.activeId === id;
+      },
+      listElement(state?: CompositeStoreState | SelectStoreState) {
+        if (!state) return;
+        if (!("listElement" in state)) return;
+        return state.listElement;
+      },
+      offscreenRoot(state?: CompositeStoreState | ComboboxStoreState) {
+        if (props.offscreenRoot) return props.offscreenRoot;
+        if (!state) return;
+        if (!("contentElement" in state)) return;
+        return state.contentElement || null;
+      },
+    },
+  );
+
+  const offscreenProps = useCollectionItemOffscreen({
+    id,
+    store,
+    offscreenMode: active ? "active" : offscreenMode,
+    ...props,
+    offscreenRoot,
+  });
+
+  if (!offscreenProps.active) {
+    return {
+      ...offscreenProps,
+      children: value,
+      role: getPopupItemRole(listElement),
+      "aria-disabled": disabled || undefined,
+      "data-offscreen-id": storeId,
+    };
+  }
+
+  return offscreenProps;
+}
+
+export const CompositeItem = forwardRef(function CompositeItem({
+  offscreenMode,
+  offscreenRoot,
+  ...props
+}: CompositeItemProps) {
+  const { active, ref, ...rest } = useCompositeItemOffscreen({
+    offscreenMode,
+    offscreenRoot,
+    ...props,
+  });
+  const allProps = { ...rest, ...props, ref: useMergeRefs(ref, props.ref) };
+  if (active) {
+    return <Base.CompositeItem {...allProps} />;
+  }
+  // Remove CompositeItem props
+  const {
+    store,
+    rowId,
+    preventScrollOnKeyDown,
+    moveOnKeyPress,
+    tabbable,
+    getItem,
+    ...htmlProps
+  } = allProps;
+  const Component = Role[TagName];
+  return <Component {...htmlProps} />;
+});
+
+export interface CompositeItemOptions<T extends ElementType = TagName>
+  extends
+    Base.CompositeItemOptions<T>,
+    Omit<CollectionItemOptions<T>, "store"> {}
+
+export type CompositeItemProps<T extends ElementType = TagName> = Props<
+  T,
+  CompositeItemOptions<T>
+>;