@ariakit/react-components 0.1.0

package/src/composite/utils.ts

@@ -0,0 +1,121 @@
+import { getDocument, isTextField } from "@ariakit/utils";
+import type { CompositeStore, CompositeStoreItem } from "./composite-store.ts";
+
+const NULL_ITEM = { id: null as unknown as string };
+
+/**
+ * Moves all the items before the passed `id` to the end of the array. This is
+ * useful when we want to loop through the items in the same row or column as
+ * the first items will be placed after the last items.
+ *
+ * The null item that's inserted when `shouldInsertNullItem` is set to `true`
+ * represents the composite container itself. When the active item is null, the
+ * composite container has focus.
+ */
+export function flipItems(
+  items: CompositeStoreItem[],
+  activeId: string,
+  shouldInsertNullItem = false,
+) {
+  const index = items.findIndex((item) => item.id === activeId);
+  return [
+    ...items.slice(index + 1),
+    ...(shouldInsertNullItem ? [NULL_ITEM] : []),
+    ...items.slice(0, index),
+  ];
+}
+
+/**
+ * Finds the first enabled item.
+ */
+export function findFirstEnabledItem(
+  items: CompositeStoreItem[],
+  excludeId?: string,
+) {
+  return items.find((item) => {
+    if (excludeId) {
+      return !item.disabled && item.id !== excludeId;
+    }
+    return !item.disabled;
+  });
+}
+
+/**
+ * Finds the first enabled item by its id.
+ */
+export function getEnabledItem(store: CompositeStore, id?: string | null) {
+  if (!id) return null;
+  return store.item(id) || null;
+}
+
+/**
+ * Creates a two-dimensional array with items grouped by their rowId's.
+ */
+export function groupItemsByRows(items: CompositeStoreItem[]) {
+  const rows: CompositeStoreItem[][] = [];
+  for (const item of items) {
+    const row = rows.find((currentRow) => currentRow[0]?.rowId === item.rowId);
+    if (row) {
+      row.push(item);
+    } else {
+      rows.push([item]);
+    }
+  }
+  return rows;
+}
+
+/**
+ * Selects text field contents even if it's a content editable element.
+ */
+export function selectTextField(element: HTMLElement, collapseToEnd = false) {
+  if (isTextField(element)) {
+    element.setSelectionRange(
+      collapseToEnd ? element.value.length : 0,
+      element.value.length,
+    );
+  } else if (element.isContentEditable) {
+    const selection = getDocument(element).getSelection();
+    selection?.selectAllChildren(element);
+    if (collapseToEnd) {
+      selection?.collapseToEnd();
+    }
+  }
+}
+
+const FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY");
+type FocusSilentlyElement = HTMLElement & { [FOCUS_SILENTLY]?: boolean };
+
+/**
+ * Focus an element with a flag. The `silentlyFocused` function needs to be
+ * called later to check if the focus was silenced and to reset this state.
+ */
+export function focusSilently(element: FocusSilentlyElement) {
+  element[FOCUS_SILENTLY] = true;
+  element.focus({ preventScroll: true });
+}
+
+/**
+ * Checks whether the element has been focused with the `focusSilently` function
+ * and resets the state.
+ */
+export function silentlyFocused(element: FocusSilentlyElement) {
+  const isSilentlyFocused = element[FOCUS_SILENTLY];
+  delete element[FOCUS_SILENTLY];
+  return isSilentlyFocused;
+}
+
+/**
+ * Determines whether the element is a composite item.
+ */
+export function isItem(
+  store: CompositeStore,
+  element?: Element | null,
+  exclude?: Element,
+) {
+  if (!element) return false;
+  if (element === exclude) return false;
+  const item = store.item(element.id);
+  if (!item) return false;
+  if (exclude && item.element === exclude) return false;
+  return true;
+}

package/src/dialog/dialog-backdrop.tsx

@@ -0,0 +1,71 @@
+import { useStoreState } from "@ariakit/react-store";
+import { useSafeLayoutEffect } from "@ariakit/react-utils";
+import { isValidElement, useEffect, useRef } from "react";
+import { useDisclosureContent } from "../disclosure/disclosure-content.tsx";
+import { useDisclosureStore } from "../disclosure/disclosure-store.ts";
+import { Role } from "../role/role.tsx";
+import type { DialogStore } from "./dialog-store.ts";
+import type { DialogProps } from "./dialog.tsx";
+import { markAncestor } from "./utils/mark-tree-outside.ts";
+
+interface DialogBackdropProps extends Pick<
+  DialogProps,
+  "backdrop" | "alwaysVisible" | "hidden"
+> {
+  store: DialogStore;
+}
+
+export function DialogBackdrop({
+  store,
+  backdrop,
+  alwaysVisible,
+  hidden,
+}: DialogBackdropProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const disclosure = useDisclosureStore({ disclosure: store });
+  const contentElement = useStoreState(store, "contentElement");
+
+  useEffect(() => {
+    const backdrop = ref.current;
+    const dialog = contentElement;
+    if (!backdrop) return;
+    if (!dialog) return;
+    backdrop.style.zIndex = getComputedStyle(dialog).zIndex;
+  }, [contentElement]);
+
+  // Mark the backdrop element as an ancestor of the dialog, otherwise clicking
+  // on it won't close the dialog when the dialog uses portal, in which case
+  // elements are only marked outside the portal element.
+  useSafeLayoutEffect(() => {
+    const id = contentElement?.id;
+    if (!id) return;
+    const backdrop = ref.current;
+    if (!backdrop) return;
+    return markAncestor(backdrop, id);
+  }, [contentElement]);
+
+  const props = useDisclosureContent({
+    ref,
+    store: disclosure,
+    role: "presentation",
+    "data-backdrop": contentElement?.id || "",
+    alwaysVisible,
+    hidden: hidden != null ? hidden : undefined,
+    style: {
+      position: "fixed",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  });
+
+  if (!backdrop) return null;
+
+  if (isValidElement(backdrop)) {
+    return <Role {...props} render={backdrop} />;
+  }
+
+  const Component = typeof backdrop !== "boolean" ? backdrop : "div";
+  return <Role {...props} render={<Component />} />;
+}

package/src/dialog/dialog-context.tsx

@@ -0,0 +1,43 @@
+import { createStoreContext } from "@ariakit/react-utils";
+import type { SetState } from "@ariakit/utils";
+import { createContext } from "react";
+import {
+  DisclosureContextProvider,
+  DisclosureScopedContextProvider,
+} from "../disclosure/disclosure-context.tsx";
+import type { DialogStore } from "./dialog-store.ts";
+
+const ctx = createStoreContext<DialogStore>(
+  [DisclosureContextProvider],
+  [DisclosureScopedContextProvider],
+);
+
+/**
+ * Returns the dialog store from the nearest dialog container.
+ * @example
+ * function Dialog() {
+ *   const store = useDialogContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Dialog must be wrapped in DialogProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export const useDialogContext = ctx.useContext;
+
+export const useDialogScopedContext = ctx.useScopedContext;
+
+export const useDialogProviderContext = ctx.useProviderContext;
+
+export const DialogContextProvider = ctx.ContextProvider;
+
+export const DialogScopedContextProvider = ctx.ScopedContextProvider;
+
+export const DialogHeadingContext = createContext<
+  SetState<string | undefined> | undefined
+>(undefined);
+export const DialogDescriptionContext = createContext<
+  SetState<string | undefined> | undefined
+>(undefined);

package/src/dialog/dialog-description.tsx

@@ -0,0 +1,86 @@
+import {
+  useId,
+  useSafeLayoutEffect,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import { removeUndefinedValues } from "@ariakit/utils";
+import type { ElementType } from "react";
+import { useContext } from "react";
+import { DialogDescriptionContext } from "./dialog-context.tsx";
+import type { DialogStore } from "./dialog-store.ts";
+
+const TagName = "p" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `DialogDescription` component. This hook must be
+ * used in a component that's wrapped with `Dialog` so the `aria-describedby`
+ * prop is properly set on the dialog element.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Dialog
+ * const props = useDialogDescription();
+ * <Role {...props}>Description</Role>
+ * ```
+ */
+export const useDialogDescription = createHook<
+  TagName,
+  DialogDescriptionOptions
+>(function useDialogDescription({ store, ...props }) {
+  const setDescriptionId = useContext(DialogDescriptionContext);
+  const id = useId(props.id);
+
+  useSafeLayoutEffect(() => {
+    setDescriptionId?.(id);
+    return () => setDescriptionId?.(undefined);
+  }, [setDescriptionId, id]);
+
+  props = {
+    ...props,
+    id,
+  };
+
+  return removeUndefinedValues(props);
+});
+
+/**
+ * Renders a description in a dialog. This component must be wrapped with
+ * [`Dialog`](https://ariakit.com/reference/dialog) so the `aria-describedby`
+ * prop is properly set on the dialog element.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx {4}
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   <DialogDescription>Description</DialogDescription>
+ * </Dialog>
+ * ```
+ */
+export const DialogDescription = forwardRef(function DialogDescription(
+  props: DialogDescriptionProps,
+) {
+  const htmlProps = useDialogDescription(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface DialogDescriptionOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest [`Dialog`](https://ariakit.com/reference/dialog)
+   * component's context will be used.
+   */
+  store?: DialogStore;
+}
+
+export type DialogDescriptionProps<T extends ElementType = TagName> = Props<
+  T,
+  DialogDescriptionOptions<T>
+>;

package/src/dialog/dialog-disclosure.tsx

@@ -0,0 +1,84 @@
+import { useStoreState } from "@ariakit/react-store";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { getPopupRole, invariant } from "@ariakit/utils";
+import type { ElementType } from "react";
+import type { DisclosureOptions } from "../disclosure/disclosure.tsx";
+import { useDisclosure } from "../disclosure/disclosure.tsx";
+import { useDialogProviderContext } from "./dialog-context.tsx";
+import type { DialogStore } from "./dialog-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `DialogDisclosure` component.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * const store = useDialogStore();
+ * const props = useDialogDisclosure({ store });
+ * <Role {...props}>Disclosure</Role>
+ * <Dialog store={store}>Content</Dialog>
+ * ```
+ */
+export const useDialogDisclosure = createHook<TagName, DialogDisclosureOptions>(
+  function useDialogDisclosure({ store, ...props }) {
+    const context = useDialogProviderContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component.",
+    );
+
+    const contentElement = useStoreState(store, "contentElement");
+
+    props = {
+      "aria-haspopup": getPopupRole(contentElement, "dialog"),
+      ...props,
+    };
+
+    props = useDisclosure({ store, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a button that toggles the visibility of a
+ * [`Dialog`](https://ariakit.com/reference/dialog) component when clicked.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx {2}
+ * <DialogProvider>
+ *   <DialogDisclosure>Disclosure</DialogDisclosure>
+ *   <Dialog>Content</Dialog>
+ * </DialogProvider>
+ * ```
+ */
+export const DialogDisclosure = forwardRef(function DialogDisclosure(
+  props: DialogDisclosureProps,
+) {
+  const htmlProps = useDialogDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface DialogDisclosureOptions<
+  T extends ElementType = TagName,
+> extends DisclosureOptions<T> {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest
+   * [`DialogProvider`](https://ariakit.com/reference/dialog-provider)
+   * component's context will be used.
+   */
+  store?: DialogStore;
+}
+
+export type DialogDisclosureProps<T extends ElementType = TagName> = Props<
+  T,
+  DialogDisclosureOptions<T>
+>;

package/src/dialog/dialog-dismiss.tsx

@@ -0,0 +1,113 @@
+import {
+  useEvent,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType, MouseEvent } from "react";
+import { useMemo } from "react";
+import type { ButtonOptions } from "../button/button.tsx";
+import { useButton } from "../button/button.tsx";
+import { useDialogScopedContext } from "./dialog-context.tsx";
+import type { DialogStore } from "./dialog-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+/**
+ * Returns props to create a `DialogDismiss` component.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * const store = useDialogStore();
+ * const props = useDialogDismiss({ store });
+ * <Dialog store={store}>
+ *   <Role {...props} />
+ * </Dialog>
+ * ```
+ */
+export const useDialogDismiss = createHook<TagName, DialogDismissOptions>(
+  function useDialogDismiss({ store, ...props }) {
+    const context = useDialogScopedContext();
+    store = store || context;
+
+    const onClickProp = props.onClick;
+
+    const onClick = useEvent((event: MouseEvent<HTMLType>) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      store?.hide();
+    });
+
+    const children = useMemo(
+      () => (
+        <svg
+          aria-label="Dismiss popup"
+          display="block"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          viewBox="0 0 16 16"
+          height="1em"
+          width="1em"
+        >
+          <line x1="4" y1="4" x2="12" y2="12" />
+          <line x1="4" y1="12" x2="12" y2="4" />
+        </svg>
+      ),
+      [],
+    );
+
+    props = {
+      "data-dialog-dismiss": "",
+      children,
+      ...props,
+      onClick,
+    };
+
+    props = useButton(props);
+
+    return props;
+  },
+);
+
+/**
+ * Renders a button that hides a
+ * [`Dialog`](https://ariakit.com/reference/dialog) when clicked.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx {4}
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   <DialogDismiss />
+ * </Dialog>
+ * ```
+ */
+export const DialogDismiss = forwardRef(function DialogDismiss(
+  props: DialogDismissProps,
+) {
+  const htmlProps = useDialogDismiss(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface DialogDismissOptions<
+  T extends ElementType = TagName,
+> extends ButtonOptions<T> {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest [`Dialog`](https://ariakit.com/reference/dialog)
+   * component's context will be used.
+   */
+  store?: DialogStore;
+}
+
+export type DialogDismissProps<T extends ElementType = TagName> = Props<
+  T,
+  DialogDismissOptions<T>
+>;

package/src/dialog/dialog-heading.tsx

@@ -0,0 +1,88 @@
+import {
+  useId,
+  useSafeLayoutEffect,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import { useContext } from "react";
+import type { HeadingOptions } from "../heading/heading.tsx";
+import { useHeading } from "../heading/heading.tsx";
+import { DialogHeadingContext } from "./dialog-context.tsx";
+import type { DialogStore } from "./dialog-store.ts";
+
+const TagName = "h1" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `DialogHeading` component. This hook must be used
+ * in a component that's wrapped with `Dialog` so the `aria-labelledby` prop is
+ * properly set on the dialog element.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Dialog
+ * const props = useDialogHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export const useDialogHeading = createHook<TagName, DialogHeadingOptions>(
+  function useDialogHeading({ store, ...props }) {
+    const setHeadingId = useContext(DialogHeadingContext);
+    const id = useId(props.id);
+
+    useSafeLayoutEffect(() => {
+      setHeadingId?.(id);
+      return () => setHeadingId?.(undefined);
+    }, [setHeadingId, id]);
+
+    props = {
+      ...props,
+      id,
+    };
+
+    props = useHeading(props);
+
+    return props;
+  },
+);
+
+/**
+ * Renders a heading in a dialog. This component must be wrapped with
+ * [`Dialog`](https://ariakit.com/reference/dialog) so the `aria-labelledby`
+ * prop is properly set on the dialog element.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx {4}
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   <DialogHeading>Heading</DialogHeading>
+ * </Dialog>
+ * ```
+ */
+export const DialogHeading = forwardRef(function DialogHeading(
+  props: DialogHeadingProps,
+) {
+  const htmlProps = useDialogHeading(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface DialogHeadingOptions<
+  T extends ElementType = TagName,
+> extends HeadingOptions<T> {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest [`Dialog`](https://ariakit.com/reference/dialog)
+   * component's context will be used.
+   */
+  store?: DialogStore;
+}
+
+export type DialogHeadingProps<T extends ElementType = TagName> = Props<
+  T,
+  DialogHeadingOptions<T>
+>;

package/src/dialog/dialog-provider.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { DialogContextProvider } from "./dialog-context.tsx";
+import type { DialogStoreProps } from "./dialog-store.ts";
+import { useDialogStore } from "./dialog-store.ts";
+
+/**
+ * Provides a dialog store to [Dialog](https://ariakit.com/components/dialog)
+ * components.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * <DialogProvider>
+ *   <Dialog />
+ * </DialogProvider>
+ * ```
+ */
+export function DialogProvider(props: DialogProviderProps = {}) {
+  const store = useDialogStore(props);
+  return (
+    <DialogContextProvider value={store}>
+      {props.children}
+    </DialogContextProvider>
+  );
+}
+
+export interface DialogProviderProps extends DialogStoreProps {
+  children?: ReactNode;
+}

package/src/dialog/dialog-store.ts

@@ -0,0 +1,51 @@
+import * as Core from "@ariakit/components/dialog/dialog-store";
+import { useStore } from "@ariakit/react-store";
+import type { Store } from "@ariakit/react-store";
+import type {
+  DisclosureStoreFunctions,
+  DisclosureStoreOptions,
+  DisclosureStoreState,
+} from "../disclosure/disclosure-store.ts";
+import { useDisclosureStoreProps } from "../disclosure/disclosure-store.ts";
+
+export function useDialogStoreProps<T extends Core.DialogStore>(
+  store: T,
+  update: () => void,
+  props: DialogStoreProps,
+) {
+  return useDisclosureStoreProps(store, update, props);
+}
+
+/**
+ * Creates a dialog store to control the state of
+ * [Dialog](https://ariakit.com/components/dialog) components.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * const dialog = useDialogStore();
+ *
+ * <button onClick={dialog.toggle}>Open dialog</button>
+ * <Dialog store={dialog}>Content</Dialog>
+ * ```
+ */
+export function useDialogStore(props: DialogStoreProps = {}): DialogStore {
+  const [store, update] = useStore(Core.createDialogStore, props);
+  return useDialogStoreProps(store, update, props);
+}
+
+export interface DialogStoreState
+  extends Core.DialogStoreState, DisclosureStoreState {}
+
+export interface DialogStoreFunctions
+  extends
+    Omit<Core.DialogStoreFunctions, "disclosure">,
+    DisclosureStoreFunctions {}
+
+export interface DialogStoreOptions
+  extends Omit<Core.DialogStoreOptions, "disclosure">, DisclosureStoreOptions {}
+
+export interface DialogStoreProps
+  extends DialogStoreOptions, Omit<Core.DialogStoreProps, "disclosure"> {}
+
+export interface DialogStore
+  extends DialogStoreFunctions, Omit<Store<Core.DialogStore>, "disclosure"> {}