@ariakit/react-components 0.1.0

package/src/toolbar/toolbar-context.tsx

@@ -0,0 +1,34 @@
+import { createStoreContext } from "@ariakit/react-utils";
+import {
+  CompositeContextProvider,
+  CompositeScopedContextProvider,
+} from "../composite/composite-context.tsx";
+import type { ToolbarStore } from "./toolbar-store.ts";
+
+const ctx = createStoreContext<ToolbarStore>(
+  [CompositeContextProvider],
+  [CompositeScopedContextProvider],
+);
+
+/**
+ * Returns the toolbar store from the nearest toolbar container.
+ * @example
+ * function ToolbarItem() {
+ *   const store = useToolbarContext();
+ *
+ *   if (!store) {
+ *     throw new Error("ToolbarItem must be wrapped in ToolbarProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export const useToolbarContext = ctx.useContext;
+
+export const useToolbarScopedContext = ctx.useScopedContext;
+
+export const useToolbarProviderContext = ctx.useProviderContext;
+
+export const ToolbarContextProvider = ctx.ContextProvider;
+
+export const ToolbarScopedContextProvider = ctx.ScopedContextProvider;

package/src/toolbar/toolbar-input.tsx

@@ -0,0 +1,64 @@
+import {
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import { useToolbarContext } from "./toolbar-context.tsx";
+import type { ToolbarItemOptions } from "./toolbar-item.tsx";
+import { useToolbarItem } from "./toolbar-item.tsx";
+
+const TagName = "input" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `ToolbarInput` component.
+ * @see https://ariakit.com/components/toolbar
+ * @deprecated Use `useToolbarItem` instead.
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbarInput({ store });
+ * <Toolbar store={store}>
+ *   <Role {...props} />
+ * </Toolbar>
+ * ```
+ */
+export const useToolbarInput = createHook<TagName, ToolbarInputOptions>(
+  function useToolbarInput({ store, ...props }) {
+    const context = useToolbarContext();
+    store = store || context;
+    props = useToolbarItem<TagName>({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders a text input as a toolbar item, maintaining arrow key navigation on
+ * the toolbar.
+ * @see https://ariakit.com/components/toolbar
+ * @deprecated Use `<ToolbarItem render={<input />}>` instead.
+ * @example
+ * ```jsx {2}
+ * <Toolbar>
+ *   <ToolbarInput />
+ * </Toolbar>
+ * ```
+ */
+export const ToolbarInput = memo(
+  forwardRef(function ToolbarInput(props: ToolbarInputProps) {
+    const htmlProps = useToolbarInput(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface ToolbarInputOptions<
+  T extends ElementType = TagName,
+> extends ToolbarItemOptions<T> {}
+
+export type ToolbarInputProps<T extends ElementType = TagName> = Props<
+  T,
+  ToolbarInputOptions<T>
+>;

package/src/toolbar/toolbar-item.tsx

@@ -0,0 +1,72 @@
+import {
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { CompositeItemOptions } from "../composite/composite-item.tsx";
+import { useCompositeItem } from "../composite/composite-item.tsx";
+import { useToolbarContext } from "./toolbar-context.tsx";
+import type { ToolbarStore } from "./toolbar-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `ToolbarItem` component.
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbarItem({ store });
+ * <Toolbar store={store}>
+ *   <Role {...props}>Item</Role>
+ * </Toolbar>
+ * ```
+ */
+export const useToolbarItem = createHook<TagName, ToolbarItemOptions>(
+  function useToolbarItem({ store, ...props }) {
+    const context = useToolbarContext();
+    store = store || context;
+    props = useCompositeItem({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders an interactive element inside a
+ * [`Toolbar`](https://ariakit.com/reference/toolbar).
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx {2}
+ * <Toolbar>
+ *   <ToolbarItem>Item</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export const ToolbarItem = memo(
+  forwardRef(function ToolbarItem(props: ToolbarItemProps) {
+    const htmlProps = useToolbarItem(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface ToolbarItemOptions<
+  T extends ElementType = TagName,
+> extends CompositeItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useToolbarStore`](https://ariakit.com/reference/use-toolbar-store) hook.
+   * If not provided, the closest
+   * [`Toolbar`](https://ariakit.com/reference/toolbar) component's context will
+   * be used.
+   */
+  store?: ToolbarStore;
+}
+
+export type ToolbarItemProps<T extends ElementType = TagName> = Props<
+  T,
+  ToolbarItemOptions<T>
+>;

package/src/toolbar/toolbar-provider.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { ToolbarContextProvider } from "./toolbar-context.tsx";
+import type { ToolbarStoreProps } from "./toolbar-store.ts";
+import { useToolbarStore } from "./toolbar-store.ts";
+
+/**
+ * Provides a toolbar store to [Toolbar](https://ariakit.com/components/toolbar)
+ * components.
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx
+ * <ToolbarProvider>
+ *   <Toolbar>
+ *     <ToolbarItem />
+ *     <ToolbarItem />
+ *     <ToolbarItem />
+ *   </Toolbar>
+ * </ToolbarProvider>
+ * ```
+ */
+export function ToolbarProvider(props: ToolbarProviderProps = {}) {
+  const store = useToolbarStore(props);
+  return (
+    <ToolbarContextProvider value={store}>
+      {props.children}
+    </ToolbarContextProvider>
+  );
+}
+
+export interface ToolbarProviderProps extends ToolbarStoreProps {
+  children?: ReactNode;
+}

package/src/toolbar/toolbar-separator.tsx

@@ -0,0 +1,71 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { CompositeSeparatorOptions } from "../composite/composite-separator.tsx";
+import { useCompositeSeparator } from "../composite/composite-separator.tsx";
+import { useToolbarContext } from "./toolbar-context.tsx";
+import type { ToolbarStore } from "./toolbar-store.ts";
+
+const TagName = "hr" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `ToolbarSeparator` component.
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbarSeparator({ store });
+ * <Toolbar store={store}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <Role {...props} />
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export const useToolbarSeparator = createHook<TagName, ToolbarSeparatorOptions>(
+  function useToolbarSeparator({ store, ...props }) {
+    const context = useToolbarContext();
+    store = store || context;
+    props = useCompositeSeparator({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders a divider between
+ * [`ToolbarItem`](https://ariakit.com/reference/toolbar-item) elements.
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx {3}
+ * <Toolbar>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarSeparator />
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export const ToolbarSeparator = forwardRef(function ToolbarSeparator(
+  props: ToolbarSeparatorProps,
+) {
+  const htmlProps = useToolbarSeparator(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface ToolbarSeparatorOptions<
+  T extends ElementType = TagName,
+> extends CompositeSeparatorOptions<T> {
+  /**
+   * Object returned by the
+   * [`useToolbarStore`](https://ariakit.com/reference/use-toolbar-store) hook.
+   * If not provided, the closest
+   * [`Toolbar`](https://ariakit.com/reference/toolbar) component's context will
+   * be used.
+   */
+  store?: ToolbarStore;
+}
+
+export type ToolbarSeparatorProps<T extends ElementType = TagName> = Props<
+  T,
+  ToolbarSeparatorOptions<T>
+>;

package/src/toolbar/toolbar-store.ts

@@ -0,0 +1,52 @@
+import * as Core from "@ariakit/components/toolbar/toolbar-store";
+import { useStore } from "@ariakit/react-store";
+import type { Store } from "@ariakit/react-store";
+import type {
+  CompositeStoreFunctions,
+  CompositeStoreOptions,
+  CompositeStoreState,
+} from "../composite/composite-store.ts";
+import { useCompositeStoreProps } from "../composite/composite-store.ts";
+
+export function useToolbarStoreProps<T extends Core.ToolbarStore>(
+  store: T,
+  update: () => void,
+  props: ToolbarStoreProps,
+) {
+  return useCompositeStoreProps(store, update, props);
+}
+
+/**
+ * Creates a toolbar store to control the state of
+ * [Toolbar](https://ariakit.com/components/toolbar) components.
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx
+ * const toolbar = useToolbarStore();
+ *
+ * <Toolbar store={toolbar}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ *   <ToolbarItem>Item 3</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export function useToolbarStore(props: ToolbarStoreProps = {}): ToolbarStore {
+  const [store, update] = useStore(Core.createToolbarStore, props);
+  return useToolbarStoreProps(store, update, props);
+}
+
+export interface ToolbarStoreState
+  extends Core.ToolbarStoreState, CompositeStoreState {}
+
+export interface ToolbarStoreFunctions
+  extends Core.ToolbarStoreFunctions, CompositeStoreFunctions {}
+
+export interface ToolbarStoreOptions
+  extends Core.ToolbarStoreOptions, CompositeStoreOptions {}
+
+export interface ToolbarStoreProps
+  extends ToolbarStoreOptions, Core.ToolbarStoreProps {}
+
+export interface ToolbarStore
+  extends ToolbarStoreFunctions, Store<Core.ToolbarStore> {}

package/src/toolbar/toolbar.tsx

@@ -0,0 +1,119 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { CompositeOptions } from "../composite/composite.tsx";
+import { useComposite } from "../composite/composite.tsx";
+import {
+  ToolbarScopedContextProvider,
+  useToolbarProviderContext,
+} from "./toolbar-context.tsx";
+import type { ToolbarStore, ToolbarStoreProps } from "./toolbar-store.ts";
+import { useToolbarStore } from "./toolbar-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `Toolbar` component.
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx
+ * const store = useToolbarStore();
+ * const props = useToolbar({ store });
+ * <Role {...props}>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Role>
+ * ```
+ */
+export const useToolbar = createHook<TagName, ToolbarOptions>(
+  function useToolbar({
+    store: storeProp,
+    orientation: orientationProp,
+    virtualFocus,
+    focusLoop,
+    rtl,
+    ...props
+  }) {
+    const context = useToolbarProviderContext();
+    storeProp = storeProp || context;
+
+    const store = useToolbarStore({
+      store: storeProp,
+      orientation: orientationProp,
+      virtualFocus,
+      focusLoop,
+      rtl,
+    });
+
+    const orientation = useStoreState(store, (state) =>
+      state.orientation === "both" ? undefined : state.orientation,
+    );
+
+    props = useWrapElement(
+      props,
+      (element) => (
+        <ToolbarScopedContextProvider value={store}>
+          {element}
+        </ToolbarScopedContextProvider>
+      ),
+      [store],
+    );
+
+    props = {
+      role: "toolbar",
+      "aria-orientation": orientation,
+      ...props,
+    };
+
+    props = useComposite({ store, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a toolbar element that groups interactive elements together.
+ * @see https://ariakit.com/components/toolbar
+ * @example
+ * ```jsx
+ * <Toolbar>
+ *   <ToolbarItem>Item 1</ToolbarItem>
+ *   <ToolbarItem>Item 2</ToolbarItem>
+ * </Toolbar>
+ * ```
+ */
+export const Toolbar = forwardRef(function Toolbar(props: ToolbarProps) {
+  const htmlProps = useToolbar(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface ToolbarOptions<T extends ElementType = TagName>
+  extends
+    CompositeOptions<T>,
+    Pick<
+      ToolbarStoreProps,
+      "focusLoop" | "orientation" | "rtl" | "virtualFocus"
+    > {
+  /**
+   * Object returned by the
+   * [`useToolbarStore`](https://ariakit.com/reference/use-toolbar-store) hook.
+   * If not provided, the closest
+   * [`ToolbarProvider`](https://ariakit.com/reference/toolbar-provider)
+   * component context will be used. If the component is not wrapped in a
+   * [`ToolbarProvider`](https://ariakit.com/reference/toolbar-provider)
+   * component, an internal store will be used.
+   */
+  store?: ToolbarStore;
+}
+
+export type ToolbarProps<T extends ElementType = TagName> = Props<
+  T,
+  ToolbarOptions<T>
+>;

package/src/tooltip/tooltip-anchor.tsx

@@ -0,0 +1,210 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useEvent,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { createStore, sync } from "@ariakit/store";
+import { chain, invariant, isFalsyBooleanCallback } from "@ariakit/utils";
+import type { ElementType, FocusEvent, MouseEvent } from "react";
+import { useEffect, useRef } from "react";
+import type { HovercardAnchorOptions } from "../hovercard/hovercard-anchor.tsx";
+import { useHovercardAnchor } from "../hovercard/hovercard-anchor.tsx";
+import { useTooltipProviderContext } from "./tooltip-context.tsx";
+import type { TooltipStore } from "./tooltip-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+// Create a global store to keep track of the active tooltip store so we can
+// show other tooltips without a delay when there's already an active tooltip.
+const globalStore = createStore<{ activeStore: TooltipStore | null }>({
+  activeStore: null,
+});
+
+function createRemoveStoreCallback(store: TooltipStore) {
+  return () => {
+    const { activeStore } = globalStore.getState();
+    if (activeStore !== store) return;
+    globalStore.setState("activeStore", null);
+  };
+}
+
+/**
+ * Returns props to create a `TooltipAnchor` component.
+ * @see https://ariakit.com/components/tooltip
+ * @example
+ * ```jsx
+ * const store = useToolTipStore();
+ * const props = useTooltipAnchor({ store });
+ * <Role {...props}>Anchor</Role>
+ * <Tooltip store={store}>Tooltip</Tooltip>
+ * ```
+ */
+export const useTooltipAnchor = createHook<TagName, TooltipAnchorOptions>(
+  function useTooltipAnchor({ store, showOnHover = true, ...props }) {
+    const context = useTooltipProviderContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component.",
+    );
+
+    // Imagine the scenario: the user hovers over an anchor, which shows a
+    // tooltip, then presses escape to close the tooltip. We don't want to show
+    // the tooltip again while the anchor is still hovered. So we keep this flag
+    // that's set to true on mouse enter.
+    const canShowOnHoverRef = useRef(false);
+
+    useEffect(() => {
+      return sync(store, ["mounted"], (state) => {
+        if (state.mounted) return;
+        canShowOnHoverRef.current = false;
+      });
+    }, [store]);
+
+    useEffect(() => {
+      if (!store) return;
+      return chain(
+        // Immediately remove the current store from the global store when
+        // the component unmounts. This is useful, for example, to avoid
+        // showing tooltips immediately on serial tests.
+        createRemoveStoreCallback(store),
+        sync(store, ["mounted", "skipTimeout"], (state) => {
+          if (!store) return;
+          // If the current tooltip is open, we should immediately hide the
+          // active one and set the current one as the active tooltip.
+          if (state.mounted) {
+            const { activeStore } = globalStore.getState();
+            if (activeStore !== store) {
+              activeStore?.hide();
+            }
+            return globalStore.setState("activeStore", store);
+          }
+          // Otherwise, if the current tooltip is closed, we should set a
+          // timeout to hide the active tooltip in the global store. This is so
+          // we can show other tooltips without a delay when there's already an
+          // active tooltip (see the showOnHover method below).
+          const id = setTimeout(
+            createRemoveStoreCallback(store),
+            state.skipTimeout,
+          );
+          return () => clearTimeout(id);
+        }),
+      );
+    }, [store]);
+
+    const onMouseEnterProp = props.onMouseEnter;
+
+    const onMouseEnter = useEvent((event: MouseEvent<HTMLType>) => {
+      onMouseEnterProp?.(event);
+      canShowOnHoverRef.current = true;
+    });
+
+    const onFocusVisibleProp = props.onFocusVisible;
+
+    const onFocusVisible = useEvent((event: FocusEvent<HTMLType>) => {
+      onFocusVisibleProp?.(event);
+      if (event.defaultPrevented) return;
+      store?.setAnchorElement(event.currentTarget);
+      store?.show();
+    });
+
+    const onBlurProp = props.onBlur;
+
+    const onBlur = useEvent((event: FocusEvent<HTMLType>) => {
+      onBlurProp?.(event);
+      if (event.defaultPrevented) return;
+      const { activeStore } = globalStore.getState();
+      // Sets canShowOnHover to false so moving the mouse over the anchor after
+      // it loses focus (for example, clicking on a menu button) doesn't show
+      // the tooltip until the mouse leaves and re-enters the anchor.
+      canShowOnHoverRef.current = false;
+      // If the current tooltip is the active tooltip and the anchor loses focus
+      // (for example, if the anchor is a menu button, clicking on the menu
+      // button will automatically focus on the menu), we don't want to show
+      // subsequent tooltips without a delay. So we set the active tooltip to
+      // null.
+      if (activeStore === store) {
+        globalStore.setState("activeStore", null);
+      }
+    });
+
+    const type = useStoreState(store, "type");
+    const contentId = useStoreState(store, (state) => state.contentElement?.id);
+
+    props = {
+      "aria-labelledby":
+        type === "label" && props["aria-label"] == null ? contentId : undefined,
+      ...props,
+      onMouseEnter,
+      onFocusVisible,
+      onBlur,
+    };
+
+    props = useHovercardAnchor<TagName>({
+      store,
+      showOnHover(event) {
+        if (!canShowOnHoverRef.current) return false;
+        if (isFalsyBooleanCallback(showOnHover, event)) return false;
+        const { activeStore } = globalStore.getState();
+        if (!activeStore) return true;
+        // Show the tooltip immediately if there's an active tooltip instead of
+        // waiting for the showTimeout delay.
+        store?.show();
+        return false;
+      },
+      ...props,
+    });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a reference element for a
+ * [`Tooltip`](https://ariakit.com/reference/tooltip), which is triggered by
+ * focusing or hovering over the anchor.
+ *
+ * The tooltip is strictly for visual purposes. It's your responsibility to
+ * ensure the anchor element has an accessible name. See [Tooltip anchors must
+ * have accessible
+ * names](https://ariakit.com/components/tooltip#tooltip-anchors-must-have-accessible-names)
+ * @see https://ariakit.com/components/tooltip
+ * @example
+ * ```jsx {2}
+ * <TooltipProvider>
+ *   <TooltipAnchor>Anchor</TooltipAnchor>
+ *   <Tooltip>Tooltip</Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export const TooltipAnchor = forwardRef(function TooltipAnchor(
+  props: TooltipAnchorProps,
+) {
+  const htmlProps = useTooltipAnchor(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface TooltipAnchorOptions<
+  T extends ElementType = TagName,
+> extends HovercardAnchorOptions<T> {
+  /**
+   * Object returned by the
+   * [`useTooltipStore`](https://ariakit.com/reference/use-tooltip-store) hook.
+   * If not provided, the closest
+   * [`TooltipProvider`](https://ariakit.com/reference/tooltip-provider)
+   * component's context will be used.
+   */
+  store?: TooltipStore;
+}
+
+export type TooltipAnchorProps<T extends ElementType = TagName> = Props<
+  T,
+  TooltipAnchorOptions<T>
+>;