@ariakit/react-components 0.1.0

package/src/menubar/menubar.tsx

@@ -0,0 +1,145 @@
+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 {
+  MenubarScopedContextProvider,
+  useMenubarProviderContext,
+} from "./menubar-context.tsx";
+import type { MenubarStore, MenubarStoreProps } from "./menubar-store.ts";
+import { useMenubarStore } from "./menubar-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `Menubar` component.
+ * @see https://ariakit.com/components/menubar
+ * @example
+ * ```jsx
+ * const store = useMenubarStore();
+ * const menubarProps = useMenubar({ store });
+ * const fileProps = useMenuItem({ store });
+ * const fileMenu = useMenuStore();
+ * <Role {...menubarProps}>
+ *   <MenuButton {...fileProps} store={fileMenu}>
+ *     File
+ *   </MenuButton>
+ *   <Menu store={fileMenu}>
+ *     <MenuItem>New File</MenuItem>
+ *     <MenuItem>New Window</MenuItem>
+ *   </Menu>
+ * </Role>
+ * ```
+ */
+export const useMenubar = createHook<TagName, MenubarOptions>(
+  function useMenubar({
+    store: storeProp,
+    composite = true,
+    orientation: orientationProp,
+    virtualFocus,
+    focusLoop,
+    rtl,
+    ...props
+  }) {
+    const context = useMenubarProviderContext();
+    storeProp = storeProp || context;
+
+    const store = useMenubarStore({
+      store: storeProp,
+      orientation: orientationProp,
+      virtualFocus,
+      focusLoop,
+      rtl,
+    });
+
+    const orientation = useStoreState(store, (state) =>
+      !composite || state.orientation === "both"
+        ? undefined
+        : state.orientation,
+    );
+
+    props = useWrapElement(
+      props,
+      (element) => (
+        <MenubarScopedContextProvider value={store}>
+          {element}
+        </MenubarScopedContextProvider>
+      ),
+      [store],
+    );
+
+    if (composite) {
+      props = {
+        role: "menubar",
+        "aria-orientation": orientation,
+        ...props,
+      };
+    }
+
+    props = useComposite({ store, composite, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a menubar that may contain a group of
+ * [`MenuItem`](https://ariakit.com/reference/menu-item) elements that control
+ * other submenus.
+ * @see https://ariakit.com/components/menubar
+ * @example
+ * ```jsx
+ * <Menubar>
+ *   <MenuProvider>
+ *     <MenuItem render={<MenuButton />}>File</MenuItem>
+ *     <Menu>
+ *       <MenuItem>New File</MenuItem>
+ *       <MenuItem>New Window</MenuItem>
+ *     </Menu>
+ *   </MenuProvider>
+ *   <MenuProvider>
+ *     <MenuItem render={<MenuButton />}>Edit</MenuItem>
+ *     <Menu>
+ *       <MenuItem>Undo</MenuItem>
+ *       <MenuItem>Redo</MenuItem>
+ *     </Menu>
+ *   </MenuProvider>
+ * </Menubar>
+ * ```
+ */
+export const Menubar = forwardRef(function Menubar(props: MenubarProps) {
+  const htmlProps = useMenubar(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface MenubarOptions<T extends ElementType = TagName>
+  extends
+    CompositeOptions<T>,
+    Pick<
+      MenubarStoreProps,
+      "focusLoop" | "orientation" | "rtl" | "virtualFocus"
+    > {
+  /**
+   * Object returned by the
+   * [`useMenubarStore`](https://ariakit.com/reference/use-menubar-store) hook.
+   * If not provided, the closest
+   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)
+   * component context will be used. If the component is not wrapped in a
+   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)
+   * component, an internal store will be used.
+   */
+  store?: MenubarStore;
+}
+
+export type MenubarProps<T extends ElementType = TagName> = Props<
+  T,
+  MenubarOptions<T>
+>;

package/src/popover/popover-anchor.tsx

@@ -0,0 +1,74 @@
+import {
+  useMergeRefs,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import { usePopoverProviderContext } from "./popover-context.tsx";
+import type { PopoverStore } from "./popover-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `PopoverAnchor` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverAnchor({ store });
+ * <Role {...props}>Anchor</Role>
+ * <Popover store={store}>Popover</Popover>
+ * ```
+ */
+export const usePopoverAnchor = createHook<TagName, PopoverAnchorOptions>(
+  function usePopoverAnchor({ store, ...props }) {
+    const context = usePopoverProviderContext();
+    store = store || context;
+    props = {
+      ...props,
+      ref: useMergeRefs(store?.setAnchorElement, props.ref),
+    };
+    return props;
+  },
+);
+
+/**
+ * Renders an element that acts as the anchor for the popover. The
+ * [`Popover`](https://ariakit.com/reference/popover) component will be
+ * positioned in relation to this element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {2}
+ * <PopoverProvider>
+ *   <PopoverAnchor>Anchor</PopoverAnchor>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverAnchor = forwardRef(function PopoverAnchor(
+  props: PopoverAnchorProps,
+) {
+  const htmlProps = usePopoverAnchor(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface PopoverAnchorOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * component's context will be used.
+   */
+  store?: PopoverStore;
+}
+
+export type PopoverAnchorProps<T extends ElementType = TagName> = Props<
+  T,
+  PopoverAnchorOptions<T>
+>;

package/src/popover/popover-arrow-path.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Modifications Copyright 2019 - present by Diego Haz.
+ *
+ * Extracted the SVG path and made the tip more angled.
+ */
+export const POPOVER_ARROW_PATH =
+  "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z";

package/src/popover/popover-arrow.tsx

@@ -0,0 +1,228 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useId,
+  useMergeRefs,
+  useSafeLayoutEffect,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import { getWindow, invariant, removeUndefinedValues } from "@ariakit/utils";
+import type { ElementType } from "react";
+import { useMemo, useState } from "react";
+import { POPOVER_ARROW_PATH } from "./popover-arrow-path.ts";
+import { usePopoverContext } from "./popover-context.tsx";
+import type { PopoverStore } from "./popover-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type BasePlacement = "top" | "bottom" | "left" | "right";
+
+const defaultSize = 30;
+const halfDefaultSize = defaultSize / 2;
+
+const rotateMap = {
+  top: `rotate(180 ${halfDefaultSize} ${halfDefaultSize})`,
+  right: `rotate(-90 ${halfDefaultSize} ${halfDefaultSize})`,
+  bottom: `rotate(0 ${halfDefaultSize} ${halfDefaultSize})`,
+  left: `rotate(90 ${halfDefaultSize} ${halfDefaultSize})`,
+};
+
+function useComputedStyle(store: PopoverStore) {
+  const [style, setStyle] = useState<CSSStyleDeclaration>();
+  const contentElement = useStoreState(store, "contentElement");
+  useSafeLayoutEffect(() => {
+    if (!contentElement) return;
+    const win = getWindow(contentElement);
+    const computedStyle = win.getComputedStyle(contentElement);
+    setStyle(computedStyle);
+  }, [contentElement]);
+  return style;
+}
+
+function getRingWidth(style?: CSSStyleDeclaration) {
+  if (!style) return;
+  const boxShadow = style.getPropertyValue("box-shadow");
+  const ringWidth = boxShadow.match(/0px 0px 0px ([^0]+px)/)?.[1];
+  return ringWidth;
+}
+
+function getBorderColor(dir: BasePlacement, style?: CSSStyleDeclaration) {
+  if (!style) return;
+  const borderColor = style.getPropertyValue(`border-${dir}-color`);
+  if (borderColor) return borderColor;
+  const boxShadow = style.getPropertyValue("box-shadow");
+  const match = boxShadow.match(/0px 0px 0px [^,]+/);
+  if (!match) return;
+  const segment = match[0];
+  const ringColor = segment.replace(/^0px 0px 0px\s+[^\s,]+/, "").trim();
+  return ringColor || undefined;
+}
+
+/**
+ * Returns props to create a `PopoverArrow` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverArrow({ store });
+ * <Popover store={store}>
+ *   <Role {...props} />
+ *   Popover
+ * </Popover>
+ * ```
+ */
+export const usePopoverArrow = createHook<TagName, PopoverArrowOptions>(
+  function usePopoverArrow({
+    store,
+    size = defaultSize,
+    borderWidth: borderWidthProp,
+    ...props
+  }) {
+    const context = usePopoverContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "PopoverArrow must be wrapped in a Popover component.",
+    );
+
+    const dir = useStoreState(
+      store,
+      (state) => state.currentPlacement.split("-")[0] as BasePlacement,
+    );
+
+    const maskId = useId();
+    const style = useComputedStyle(store);
+    const stroke = getBorderColor(dir, style) || "none";
+    const fill = style?.getPropertyValue("background-color") || "none";
+
+    const [borderWidth, isRing] = useMemo(() => {
+      if (borderWidthProp != null) return [borderWidthProp, false];
+      if (!style) return [0, false];
+      const ringWidth = getRingWidth(style);
+      if (ringWidth) return [Number.parseInt(ringWidth, 10), true];
+      const borderWidth = style.getPropertyValue(`border-${dir}-width`);
+      if (borderWidth) {
+        const parsed = Number.parseFloat(borderWidth);
+        if (!Number.isNaN(parsed)) {
+          return [Math.ceil(parsed), false];
+        }
+      }
+      return [0, false];
+    }, [borderWidthProp, style, dir]);
+
+    const strokeWidth = borderWidth * 2 * (defaultSize / size);
+    const transform = rotateMap[dir];
+
+    const children = useMemo(
+      () => (
+        <svg display="block" viewBox="0 0 30 30">
+          <g transform={transform}>
+            {!isRing && (
+              // When using the CSS border property, set the fill color to match
+              // the background behind the stroke so transparent strokes match
+              // the appearance of borders on HTML elements.
+              <path
+                fill="none"
+                stroke={`var(--ak-layer, ${fill})`}
+                d={POPOVER_ARROW_PATH}
+                mask={`url(#${maskId})`}
+              />
+            )}
+            <path fill="none" d={POPOVER_ARROW_PATH} mask={`url(#${maskId})`} />
+            <path stroke="none" d={POPOVER_ARROW_PATH} />
+            <mask id={maskId} maskUnits="userSpaceOnUse">
+              <rect
+                x="-15"
+                y="0"
+                width="60"
+                height="30"
+                fill="white"
+                stroke="black"
+              />
+            </mask>
+          </g>
+        </svg>
+      ),
+      [transform, isRing, fill, maskId],
+    );
+
+    props = {
+      children,
+      "aria-hidden": true,
+      ...props,
+      ref: useMergeRefs(store.setArrowElement, props.ref),
+      style: {
+        position: "absolute",
+        fontSize: size,
+        width: "1em",
+        height: "1em",
+        pointerEvents: "none",
+        fill: `var(--ak-layer, ${fill})`,
+        stroke: `var(--ak-layer-border, ${stroke})`,
+        strokeWidth,
+        ...props.style,
+      },
+    };
+
+    return removeUndefinedValues(props);
+  },
+);
+
+/**
+ * Renders an arrow inside a [`Popover`](https://ariakit.com/reference/popover)
+ * component pointing to the anchor element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {4}
+ * <PopoverProvider>
+ *   <PopoverAnchor />
+ *   <Popover>
+ *     <PopoverArrow />
+ *     Popover
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverArrow = memo(
+  forwardRef(function PopoverArrow(props: PopoverArrowProps) {
+    const htmlProps = usePopoverArrow(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface PopoverArrowOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * 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;
+  /**
+   * The size of the arrow.
+   *
+   * Live examples:
+   * - [Selection Popover](https://ariakit.com/examples/popover-selection)
+   * @default 30
+   */
+  size?: number;
+  /**
+   * The arrow's border width. If not specified, Ariakit will infer it from the
+   * popover `contentElement`'s style.
+   */
+  borderWidth?: number;
+}
+
+export type PopoverArrowProps<T extends ElementType = TagName> = Props<
+  T,
+  PopoverArrowOptions<T>
+>;

package/src/popover/popover-context.tsx

@@ -0,0 +1,34 @@
+import { createStoreContext } from "@ariakit/react-utils";
+import {
+  DialogContextProvider,
+  DialogScopedContextProvider,
+} from "../dialog/dialog-context.tsx";
+import type { PopoverStore } from "./popover-store.ts";
+
+const ctx = createStoreContext<PopoverStore>(
+  [DialogContextProvider],
+  [DialogScopedContextProvider],
+);
+
+/**
+ * Returns the popover store from the nearest popover container.
+ * @example
+ * function Popover() {
+ *   const store = usePopoverContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Popover must be wrapped in PopoverProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export const usePopoverContext = ctx.useContext;
+
+export const usePopoverScopedContext = ctx.useScopedContext;
+
+export const usePopoverProviderContext = ctx.useProviderContext;
+
+export const PopoverContextProvider = ctx.ContextProvider;
+
+export const PopoverScopedContextProvider = ctx.ScopedContextProvider;

package/src/popover/popover-description.tsx

@@ -0,0 +1,69 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { DialogDescriptionOptions } from "../dialog/dialog-description.tsx";
+import { useDialogDescription } from "../dialog/dialog-description.tsx";
+import type { PopoverStore } from "./popover-store.ts";
+
+const TagName = "p" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `PopoverDescription` component. This hook must be
+ * used in a component that's wrapped with `Popover` so the `aria-describedby`
+ * 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 = usePopoverDescription();
+ * <Role {...props}>Description</Role>
+ * ```
+ */
+export const usePopoverDescription = createHook<
+  TagName,
+  PopoverDescriptionOptions
+>(function usePopoverDescription(props) {
+  props = useDialogDescription(props);
+  return props;
+});
+
+/**
+ * Renders a description in a popover. This component must be wrapped with
+ * [`Popover`](https://ariakit.com/reference/popover) so the `aria-describedby`
+ * prop is properly set on the popover element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {3}
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverDescription>Description</PopoverDescription>
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+export const PopoverDescription = forwardRef(function PopoverDescription(
+  props: PopoverDescriptionProps,
+) {
+  const htmlProps = usePopoverDescription(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface PopoverDescriptionOptions<
+  T extends ElementType = TagName,
+> extends DialogDescriptionOptions<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 PopoverDescriptionProps<T extends ElementType = TagName> = Props<
+  T,
+  PopoverDescriptionOptions<T>
+>;