@ariakit/react-components 0.1.0

package/src/popover/popover-disclosure-arrow.tsx

@@ -0,0 +1,135 @@
+import { useStoreState } from "@ariakit/react-store";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import { invariant, removeUndefinedValues } from "@ariakit/utils";
+import type { ElementType } from "react";
+import { useMemo } from "react";
+import { usePopoverContext } from "./popover-context.tsx";
+import type { PopoverStore, PopoverStoreState } from "./popover-store.ts";
+
+const TagName = "span" satisfies ElementType;
+type TagName = typeof TagName;
+type BasePlacement = "top" | "bottom" | "left" | "right";
+
+const pointsMap = {
+  top: "4,10 8,6 12,10",
+  right: "6,4 10,8 6,12",
+  bottom: "4,6 8,10 12,6",
+  left: "10,4 6,8 10,12",
+};
+
+/**
+ * Returns props to create a `PopoverDisclosureArrow` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverDisclosureArrow({ store });
+ * <PopoverDisclosure store={store}>
+ *   Disclosure
+ *   <Role {...props} />
+ * </PopoverDisclosure>
+ * ```
+ */
+export const usePopoverDisclosureArrow = createHook<
+  TagName,
+  PopoverDisclosureArrowOptions
+>(function usePopoverDisclosureArrow({ store, placement, ...props }) {
+  const context = usePopoverContext();
+  store = store || context;
+
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" &&
+      "PopoverDisclosureArrow must be wrapped in a PopoverDisclosure component.",
+  );
+
+  const position = useStoreState(
+    store,
+    (state) => placement || state.placement,
+  );
+  const dir = position.split("-")[0] as BasePlacement;
+  const points = pointsMap[dir];
+
+  const children = useMemo(
+    () => (
+      <svg
+        display="block"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        viewBox="0 0 16 16"
+        height="1em"
+        width="1em"
+      >
+        <polyline points={points} />
+      </svg>
+    ),
+    [points],
+  );
+
+  props = {
+    children,
+    "aria-hidden": true,
+    ...props,
+    style: {
+      width: "1em",
+      height: "1em",
+      pointerEvents: "none",
+      ...props.style,
+    },
+  };
+
+  return removeUndefinedValues(props);
+});
+
+/**
+ * Renders an arrow pointing to the popover position. It's usually rendered
+ * inside the
+ * [`PopoverDisclosure`](https://ariakit.com/reference/popover-disclosure)
+ * component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {4}
+ * <PopoverProvider>
+ *   <PopoverDisclosure>
+ *     Disclosure
+ *     <PopoverDisclosureArrow />
+ *   </PopoverDisclosure>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverDisclosureArrow = forwardRef(
+  function PopoverDisclosureArrow(props: PopoverDisclosureArrowProps) {
+    const htmlProps = usePopoverDisclosureArrow(props);
+    return createElement(TagName, htmlProps);
+  },
+);
+
+export interface PopoverDisclosureArrowOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`PopoverDisclosure`](https://ariakit.com/reference/popover-disclosure) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+  /**
+   * Arrow's placement direction. If not provided, it will be inferred from the
+   * context.
+   *
+   * Live examples:
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   */
+  placement?: PopoverStoreState["placement"];
+}
+
+export type PopoverDisclosureArrowProps<T extends ElementType = TagName> =
+  Props<T, PopoverDisclosureArrowOptions<T>>;

package/src/popover/popover-disclosure.tsx

@@ -0,0 +1,101 @@
+import {
+  useEvent,
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import type { ElementType, MouseEvent } from "react";
+import type { DialogDisclosureOptions } from "../dialog/dialog-disclosure.tsx";
+import { useDialogDisclosure } from "../dialog/dialog-disclosure.tsx";
+import type { PopoverAnchorOptions } from "./popover-anchor.tsx";
+import { usePopoverAnchor } from "./popover-anchor.tsx";
+import {
+  PopoverScopedContextProvider,
+  usePopoverProviderContext,
+} from "./popover-context.tsx";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+/**
+ * Returns props to create a `PopoverDisclosure` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverDisclosure({ store });
+ * <Role {...props}>Disclosure</Role>
+ * <Popover store={store}>Popover</Popover>
+ * ```
+ */
+export const usePopoverDisclosure = createHook<
+  TagName,
+  PopoverDisclosureOptions
+>(function usePopoverDisclosure({ store, ...props }) {
+  const context = usePopoverProviderContext();
+  store = store || context;
+
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" &&
+      "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component.",
+  );
+
+  const onClickProp = props.onClick;
+
+  const onClick = useEvent((event: MouseEvent<HTMLType>) => {
+    store?.setAnchorElement(event.currentTarget);
+    onClickProp?.(event);
+  });
+
+  props = useWrapElement(
+    props,
+    (element) => (
+      <PopoverScopedContextProvider value={store}>
+        {element}
+      </PopoverScopedContextProvider>
+    ),
+    [store],
+  );
+
+  props = {
+    ...props,
+    onClick,
+  };
+
+  props = usePopoverAnchor<TagName>({ store, ...props });
+  props = useDialogDisclosure({ store, ...props });
+
+  return props;
+});
+
+/**
+ * Renders a button that controls the visibility of the
+ * [`Popover`](https://ariakit.com/reference/popover) component when clicked.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {2}
+ * <PopoverProvider>
+ *   <PopoverDisclosure>Disclosure</PopoverDisclosure>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverDisclosure = forwardRef(function PopoverDisclosure(
+  props: PopoverDisclosureProps,
+) {
+  const htmlProps = usePopoverDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface PopoverDisclosureOptions<T extends ElementType = TagName>
+  extends PopoverAnchorOptions<T>, Omit<DialogDisclosureOptions<T>, "store"> {}
+
+export type PopoverDisclosureProps<T extends ElementType = TagName> = Props<
+  T,
+  PopoverDisclosureOptions<T>
+>;

package/src/popover/popover-dismiss.tsx

@@ -0,0 +1,70 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { DialogDismissOptions } from "../dialog/dialog-dismiss.tsx";
+import { useDialogDismiss } from "../dialog/dialog-dismiss.tsx";
+import { usePopoverScopedContext } from "./popover-context.tsx";
+import type { PopoverStore } from "./popover-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `PopoverDismiss` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverDismiss({ store });
+ * <Popover store={store}>
+ *   <Role {...props} />
+ * </Popover>
+ * ```
+ */
+export const usePopoverDismiss = createHook<TagName, PopoverDismissOptions>(
+  function usePopoverDismiss({ store, ...props }) {
+    const context = usePopoverScopedContext();
+    store = store || context;
+    props = useDialogDismiss({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders a button that hides a
+ * [`Popover`](https://ariakit.com/reference/popover) component when clicked.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {3}
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverDismiss />
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverDismiss = forwardRef(function PopoverDismiss(
+  props: PopoverDismissProps,
+) {
+  const htmlProps = usePopoverDismiss(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface PopoverDismissOptions<
+  T extends ElementType = TagName,
+> extends DialogDismissOptions<T> {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`Popover`](https://ariakit.com/reference/popover) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+}
+
+export type PopoverDismissProps<T extends ElementType = TagName> = Props<
+  T,
+  PopoverDismissOptions<T>
+>;

package/src/popover/popover-heading.tsx

@@ -0,0 +1,68 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { DialogHeadingOptions } from "../dialog/dialog-heading.tsx";
+import { useDialogHeading } from "../dialog/dialog-heading.tsx";
+import type { PopoverStore } from "./popover-store.ts";
+
+const TagName = "h1" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `PopoverHeading` component. This hook must be used
+ * in a component that's wrapped with `Popover` so the `aria-labelledby` prop is
+ * properly set on the popover element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Popover
+ * const props = usePopoverHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export const usePopoverHeading = createHook<TagName, PopoverHeadingOptions>(
+  function usePopoverHeading(props) {
+    props = useDialogHeading(props);
+    return props;
+  },
+);
+
+/**
+ * Renders a heading in a popover. This component must be wrapped with
+ * [`Popover`](https://ariakit.com/reference/popover) so the `aria-labelledby`
+ * prop is properly set on the popover element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {3}
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverHeading>Heading</PopoverHeading>
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverHeading = forwardRef(function PopoverHeading(
+  props: PopoverHeadingProps,
+) {
+  const htmlProps = usePopoverHeading(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface PopoverHeadingOptions<
+  T extends ElementType = TagName,
+> extends DialogHeadingOptions<T> {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`Popover`](https://ariakit.com/reference/popover) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+}
+
+export type PopoverHeadingProps<T extends ElementType = TagName> = Props<
+  T,
+  PopoverHeadingOptions<T>
+>;

package/src/popover/popover-provider.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import { PopoverContextProvider } from "./popover-context.tsx";
+import type { PopoverStoreProps } from "./popover-store.ts";
+import { usePopoverStore } from "./popover-store.ts";
+
+/**
+ * Provides a popover store to [Popover](https://ariakit.com/components/popover)
+ * components.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * <PopoverProvider>
+ *   <PopoverDisclosure />
+ *   <Popover />
+ * </PopoverProvider>
+ * ```
+ */
+export function PopoverProvider(props: PopoverProviderProps = {}) {
+  const store = usePopoverStore(props);
+  return (
+    <PopoverContextProvider value={store}>
+      {props.children}
+    </PopoverContextProvider>
+  );
+}
+
+export interface PopoverProviderProps extends PopoverStoreProps {
+  children?: ReactNode;
+}

package/src/popover/popover-store.ts

@@ -0,0 +1,53 @@
+import * as Core from "@ariakit/components/popover/popover-store";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import type { Store } from "@ariakit/react-store";
+import { useUpdateEffect } from "@ariakit/react-utils";
+import type {
+  DialogStoreFunctions,
+  DialogStoreOptions,
+  DialogStoreState,
+} from "../dialog/dialog-store.ts";
+import { useDialogStoreProps } from "../dialog/dialog-store.ts";
+
+export function usePopoverStoreProps<T extends Core.PopoverStore>(
+  store: T,
+  update: () => void,
+  props: PopoverStoreProps,
+) {
+  useUpdateEffect(update, [props.popover]);
+  useStoreProps(store, props, "placement");
+  return useDialogStoreProps(store, update, props);
+}
+
+/**
+ * Creates a popover store to control the state of
+ * [Popover](https://ariakit.com/components/popover) components.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const popover = usePopoverStore();
+ * <PopoverDisclosure store={popover}>Disclosure</PopoverDisclosure>
+ * <Popover store={popover}>Popover</Popover>
+ * ```
+ */
+export function usePopoverStore(props: PopoverStoreProps = {}): PopoverStore {
+  const [store, update] = useStore(Core.createPopoverStore, props);
+  return usePopoverStoreProps(store, update, props);
+}
+
+export interface PopoverStoreState
+  extends Core.PopoverStoreState, DialogStoreState {}
+
+export interface PopoverStoreFunctions
+  extends
+    Omit<Core.PopoverStoreFunctions, "disclosure">,
+    DialogStoreFunctions {}
+
+export interface PopoverStoreOptions
+  extends Omit<Core.PopoverStoreOptions, "disclosure">, DialogStoreOptions {}
+
+export interface PopoverStoreProps
+  extends PopoverStoreOptions, Omit<Core.PopoverStoreProps, "disclosure"> {}
+
+export interface PopoverStore
+  extends PopoverStoreFunctions, Omit<Store<Core.PopoverStore>, "disclosure"> {}