@ariakit/react-components 0.1.0

package/src/composite/composite-overflow-store.ts

@@ -0,0 +1,61 @@
+import * as Core from "@ariakit/components/composite/composite-overflow-store";
+import { useStore } from "@ariakit/react-store";
+import type { Store } from "@ariakit/react-store";
+import type {
+  PopoverStoreFunctions,
+  PopoverStoreOptions,
+  PopoverStoreState,
+} from "../popover/popover-store.ts";
+import { usePopoverStoreProps } from "../popover/popover-store.ts";
+
+export function useCompositeOverflowStoreProps<
+  T extends Core.CompositeOverflowStore,
+>(store: T, update: () => void, props: CompositeOverflowStoreProps) {
+  return usePopoverStoreProps(store, update, props);
+}
+
+/**
+ * Creates a composite overflow store.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+export function useCompositeOverflowStore(
+  props: CompositeOverflowStoreProps = {},
+): CompositeOverflowStore {
+  const [store, update] = useStore(Core.createCompositeOverflowStore, props);
+  return useCompositeOverflowStoreProps(store, update, props);
+}
+
+export interface CompositeOverflowStoreState
+  extends Core.CompositeOverflowStoreState, PopoverStoreState {}
+
+export interface CompositeOverflowStoreFunctions
+  extends
+    Omit<Core.CompositeOverflowStoreFunctions, "disclosure">,
+    PopoverStoreFunctions {}
+
+export interface CompositeOverflowStoreOptions
+  extends
+    Omit<Core.CompositeOverflowStoreOptions, "disclosure">,
+    PopoverStoreOptions {}
+
+export type CompositeOverflowStoreProps = CompositeOverflowStoreOptions &
+  Omit<Core.CompositeOverflowStoreProps, "disclosure">;
+
+export type CompositeOverflowStore = CompositeOverflowStoreFunctions &
+  Omit<Store<Core.CompositeOverflowStore>, "disclosure">;

package/src/composite/composite-overflow.tsx

@@ -0,0 +1,123 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useEvent,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { CSSProperties, ElementType, FocusEvent } from "react";
+import type { PopoverOptions } from "../popover/popover.tsx";
+import { usePopover } from "../popover/popover.tsx";
+import type { CompositeOverflowStore } from "./composite-overflow-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+// Hiding the popover with `display: none` would prevent the hidden items to be
+// focused, so we just make it transparent and disable pointer events.
+const hiddenStyle: CSSProperties = {
+  opacity: 0,
+  pointerEvents: "none",
+};
+
+/**
+ * Returns props to create a `CompositeOverflow` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeOverflowStore();
+ * const props = useCompositeOverflow({ store });
+ * <Role {...props}>
+ *   <CompositeItem>Item 3</CompositeItem>
+ *   <CompositeItem>Item 4</CompositeItem>
+ * </Role>
+ * ```
+ */
+export const useCompositeOverflow = createHook<
+  TagName,
+  CompositeOverflowOptions
+>(function useCompositeOverflow({
+  store,
+  wrapperProps: wrapperPropsProp,
+  portal = false,
+  ...props
+}) {
+  const onFocusProp = props.onFocus;
+
+  const onFocus = useEvent((event: FocusEvent<HTMLType>) => {
+    onFocusProp?.(event);
+    if (event.defaultPrevented) return;
+    store.show();
+  });
+
+  const mounted = useStoreState(store, "mounted");
+
+  const getStyle = (styleProp?: CSSProperties) =>
+    mounted ? styleProp : { ...hiddenStyle, ...styleProp };
+
+  const wrapperProps = {
+    ...wrapperPropsProp,
+    style: getStyle(wrapperPropsProp?.style),
+  };
+
+  props = {
+    role: "presentation",
+    ...props,
+    onFocus,
+  };
+
+  props = usePopover({
+    store,
+    focusable: false,
+    alwaysVisible: true,
+    wrapperProps,
+    portal,
+    ...props,
+  });
+
+  return props;
+});
+
+/**
+ * Renders a popover that will contain the overflow items in a composite
+ * collection.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+export const CompositeOverflow = forwardRef(function CompositeOverflow(
+  props: CompositeOverflowProps,
+) {
+  const htmlProps = useCompositeOverflow(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface CompositeOverflowOptions<
+  T extends ElementType = TagName,
+> extends PopoverOptions<T> {
+  /**
+   * Object returned by the `useCompositeOverflowStore` hook.
+   */
+  store: CompositeOverflowStore;
+}
+
+export type CompositeOverflowProps<T extends ElementType = TagName> = Props<
+  T,
+  CompositeOverflowOptions<T>
+>;

package/src/composite/composite-provider.tsx

@@ -0,0 +1,47 @@
+import type { PickRequired } from "@ariakit/utils";
+import type { ReactElement, ReactNode } from "react";
+import { CompositeContextProvider } from "./composite-context.tsx";
+import type {
+  CompositeStoreItem,
+  CompositeStoreProps,
+} from "./composite-store.ts";
+import { useCompositeStore } from "./composite-store.ts";
+
+/**
+ * Provides a composite store to
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) components.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem />
+ *     <CompositeItem />
+ *     <CompositeItem />
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+
+export function CompositeProvider<
+  T extends CompositeStoreItem = CompositeStoreItem,
+>(
+  props: PickRequired<CompositeProviderProps<T>, "items" | "defaultItems">,
+): ReactElement;
+
+export function CompositeProvider(props?: CompositeProviderProps): ReactElement;
+
+export function CompositeProvider(props: CompositeProviderProps = {}) {
+  const store = useCompositeStore(props);
+  return (
+    <CompositeContextProvider value={store}>
+      {props.children}
+    </CompositeContextProvider>
+  );
+}
+
+export interface CompositeProviderProps<
+  T extends CompositeStoreItem = CompositeStoreItem,
+> extends CompositeStoreProps<T> {
+  children?: ReactNode;
+}

package/src/composite/composite-renderer.tsx

@@ -0,0 +1,231 @@
+import { useStoreState } from "@ariakit/react-store";
+import { useId, createElement, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType, ReactNode } from "react";
+import { useMemo } from "react";
+import type {
+  CollectionRendererBaseItemProps,
+  CollectionRendererItem,
+  CollectionRendererItemObject,
+  CollectionRendererItemProps,
+  CollectionRendererOptions,
+} from "../collection/collection-renderer.tsx";
+import {
+  getCollectionRendererItem,
+  getCollectionRendererItemId,
+  useCollectionRenderer,
+} from "../collection/collection-renderer.tsx";
+import type { CollectionStoreItem } from "../collection/collection-store.ts";
+import { useCompositeContext } from "./composite-context.tsx";
+import type { CompositeStore, CompositeStoreItem } from "./composite-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+interface ItemObject extends CollectionRendererItemObject {
+  disabled?: boolean;
+}
+
+type Item = ItemObject | CollectionRendererItem;
+
+interface BaseItemProps extends CollectionRendererBaseItemProps {
+  "aria-setsize": number;
+  "aria-posinset": number;
+}
+
+type ItemProps<
+  T extends Item,
+  P extends BaseItemProps = BaseItemProps,
+> = CollectionRendererItemProps<T, P>;
+
+function getItemObject(item: Item): ItemObject {
+  if (!item || typeof item !== "object") {
+    return { value: item };
+  }
+  return item;
+}
+
+function countItems(items?: number | readonly Item[]): number[] {
+  if (!items) return [0];
+  if (typeof items === "number") {
+    return Array.from({ length: items }, (_, index) => index + 1);
+  }
+  return items.reduce<number[]>((count, item, index) => {
+    const object = getItemObject(item);
+    if (!object.items) {
+      count[index] = index + 1;
+      return count;
+    }
+    const prevCount = count[index - 1] ?? 0;
+    const itemsCount = countItems(object.items)[object.items.length - 1] ?? 0;
+    count[index] = prevCount + itemsCount;
+    return count;
+  }, []);
+}
+
+function findFirst(items: readonly Item[], offset = 1): number {
+  for (
+    let index = offset > 0 ? 0 : items.length - 1;
+    index >= 0 && index < items.length;
+    index += offset
+  ) {
+    const item = items[index];
+    const object = getItemObject(item);
+    if (object.items && findFirst(object.items, offset) !== -1) return index;
+    if (!object.disabled) return index;
+  }
+  return -1;
+}
+
+function findLast(items: readonly Item[]) {
+  return findFirst(items, -1);
+}
+
+function findById(items: readonly Item[], id: string, baseId: string): number {
+  return items.findIndex((item, index) => {
+    const itemId = getCollectionRendererItemId(item, index, baseId);
+    if (itemId === id) return true;
+    const object = getItemObject(item);
+    if (object.items?.length) return findById(object.items, id, itemId) !== -1;
+    const ids = id.split("/");
+    if (ids.length === 1) return false;
+    return ids.some((id) => itemId === id);
+  });
+}
+
+export function useCompositeRenderer<T extends Item = any>({
+  store,
+  orientation: orientationProp,
+  persistentIndices: persistentIndicesProp,
+  children: renderItem,
+  "aria-setsize": ariaSetSize,
+  "aria-posinset": ariaPosInSet = 1,
+  ...props
+}: CompositeRendererProps<T>) {
+  const context = useCompositeContext();
+  store = store || (context as typeof store);
+
+  const orientation = useStoreState(store, (state) =>
+    (orientationProp ?? state?.orientation === "both")
+      ? "vertical"
+      : state?.orientation,
+  );
+
+  const items = useStoreState(store, (state) => {
+    if (!state) return props.items;
+    if ("mounted" in state && !state.mounted) return 0;
+    return props.items ?? (state.items as T[]);
+  });
+
+  const id = useId(props.id);
+
+  const itemsCount = useMemo(() => countItems(items), [items]);
+
+  const setSize = useMemo(
+    () => ariaSetSize ?? itemsCount[itemsCount.length - 1] ?? 0,
+    [ariaSetSize, itemsCount],
+  );
+
+  const firstIndex = useMemo(() => {
+    if (!items) return -1;
+    if (typeof items === "number") return 0;
+    if (!items.length) return -1;
+    return findFirst(items);
+  }, [items]);
+
+  const lastIndex = useMemo(() => {
+    if (!items) return -1;
+    if (typeof items === "number") return items - 1;
+    if (!items.length) return -1;
+    return findLast(items);
+  }, [items]);
+
+  const activeId = useStoreState(store, "activeId");
+
+  const activeIndex = useMemo(() => {
+    if (!id) return -1;
+    if (!items) return -1;
+    if (activeId == null) return -1;
+    if (typeof items === "number") return -1;
+    if (!items.length) return -1;
+    return findById(items, activeId, id);
+  }, [id, items, activeId]);
+
+  const persistentIndices = useMemo(() => {
+    const indices = [firstIndex, activeIndex, lastIndex].filter(
+      (index) => index >= 0,
+    );
+    if (persistentIndicesProp) {
+      return [...persistentIndicesProp, ...indices];
+    }
+    return indices;
+  }, [firstIndex, activeIndex, lastIndex, persistentIndicesProp]);
+
+  return useCollectionRenderer({
+    id,
+    store,
+    orientation,
+    persistentIndices,
+    ...props,
+    children: (item) => {
+      const nextItem = Object.assign({}, item, {
+        "aria-setsize": setSize,
+        "aria-posinset": ariaPosInSet + (itemsCount[item.index - 1] ?? 0),
+      });
+      return renderItem?.(nextItem as ItemProps<T>);
+    },
+  });
+}
+
+export {
+  getCollectionRendererItem as getCompositeRendererItem,
+  getCollectionRendererItemId as getCompositeRendererItemId,
+};
+
+export type CompositeRendererItemObject = ItemObject;
+export type CompositeRendererItem = Item;
+export type CompositeRendererBaseItemProps = BaseItemProps;
+export type CompositeRendererItemProps<
+  T extends Item,
+  P extends BaseItemProps = BaseItemProps,
+> = ItemProps<T, P>;
+
+export const CompositeRenderer = forwardRef(function CompositeRenderer<
+  T extends Item = any,
+>(props: CompositeRendererProps<T>) {
+  const htmlProps = useCompositeRenderer(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface CompositeRendererOptions<T extends Item = any> extends Omit<
+  CollectionRendererOptions<T>,
+  "store" | "children"
+> {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [Composite](https://ariakit.com/components/composite) component's context
+   * will be used.
+   *
+   * The store
+   * [`items`](https://ariakit.com/reference/use-composite-store#items) state
+   * will be used to render the items if the
+   * [`items`](https://ariakit.com/reference/composite-items#items) prop is not
+   * provided.
+   */
+  store?: CompositeStore<
+    T extends CollectionStoreItem ? T : CompositeStoreItem
+  >;
+  /**
+   * The `children` should be a function that receives item props and returns a
+   * React element. The item props should be spread onto the element that
+   * renders the item.
+   */
+  children?: (item: ItemProps<T>) => ReactNode;
+}
+
+export interface CompositeRendererProps<T extends Item = any> extends Props<
+  TagName,
+  CompositeRendererOptions<T>
+> {}

package/src/composite/composite-row.tsx

@@ -0,0 +1,133 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useId,
+  useWrapElement,
+  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 {
+  CompositeRowContext,
+  useCompositeContext,
+} from "./composite-context.tsx";
+import type { CompositeStore } from "./composite-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `CompositeRow` component. Wrapping `CompositeItem`
+ * elements within rows will create a two-dimensional composite widget, such as
+ * a grid.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeRow({ store });
+ * <Composite store={store}>
+ *   <Role {...props}>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *   </Role>
+ * </Composite>
+ * ```
+ */
+export const useCompositeRow = createHook<TagName, CompositeRowOptions>(
+  function useCompositeRow({
+    store,
+    "aria-setsize": ariaSetSize,
+    "aria-posinset": ariaPosInSet,
+    ...props
+  }) {
+    const context = useCompositeContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "CompositeRow must be wrapped in a Composite component.",
+    );
+
+    const id = useId(props.id);
+
+    const baseElement = useStoreState(
+      store,
+      (state) => state.baseElement || undefined,
+    );
+
+    const providerValue = useMemo(
+      () => ({ id, baseElement, ariaSetSize, ariaPosInSet }),
+      [id, baseElement, ariaSetSize, ariaPosInSet],
+    );
+
+    props = useWrapElement(
+      props,
+      (element) => (
+        <CompositeRowContext.Provider value={providerValue}>
+          {element}
+        </CompositeRowContext.Provider>
+      ),
+      [providerValue],
+    );
+
+    props = { ...props, id };
+
+    return removeUndefinedValues(props);
+  },
+);
+
+/**
+ * Renders a row element for composite items that allows two-dimensional arrow
+ * key navigation.
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) elements
+ * wrapped within this component will automatically receive a
+ * [`rowId`](https://ariakit.com/reference/composite-item#rowid) prop.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {3-12}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 1.1</CompositeItem>
+ *       <CompositeItem>Item 1.2</CompositeItem>
+ *       <CompositeItem>Item 1.3</CompositeItem>
+ *     </CompositeRow>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 2.1</CompositeItem>
+ *       <CompositeItem>Item 2.2</CompositeItem>
+ *       <CompositeItem>Item 2.3</CompositeItem>
+ *     </CompositeRow>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+export const CompositeRow = forwardRef(function CompositeRow(
+  props: CompositeRowProps,
+) {
+  const htmlProps = useCompositeRow(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface CompositeRowOptions<
+  _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 CompositeRowProps<T extends ElementType = TagName> = Props<
+  T,
+  CompositeRowOptions<T>
+>;

package/src/composite/composite-separator.tsx

@@ -0,0 +1,96 @@
+import { useStoreState } from "@ariakit/react-store";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import type { ElementType } from "react";
+import type { SeparatorOptions } from "../separator/separator.tsx";
+import { useSeparator } from "../separator/separator.tsx";
+import { useCompositeContext } from "./composite-context.tsx";
+import type { CompositeStore } from "./composite-store.ts";
+
+const TagName = "hr" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `CompositeSeparator` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeSeparator({ store });
+ * <Composite store={store}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <Role {...props} />
+ *   <CompositeItem>Item 2</CompositeItem>
+ * </Composite>
+ * ```
+ */
+export const useCompositeSeparator = createHook<
+  TagName,
+  CompositeSeparatorOptions
+>(function useCompositeSeparator({ store, ...props }) {
+  const context = useCompositeContext();
+  store = store || context;
+
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" &&
+      "CompositeSeparator must be wrapped in a Composite component.",
+  );
+
+  const orientation = useStoreState(store, (state) =>
+    state.orientation === "horizontal" ? "vertical" : "horizontal",
+  );
+
+  props = useSeparator({ ...props, orientation });
+
+  return props;
+});
+
+/**
+ * Renders a divider between
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) elements.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {4}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeSeparator />
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+export const CompositeSeparator = forwardRef(function CompositeSeparator(
+  props: CompositeSeparatorProps,
+) {
+  const htmlProps = useCompositeSeparator(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface CompositeSeparatorOptions<
+  T extends ElementType = TagName,
+> extends SeparatorOptions<T> {
+  /**
+   * 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;
+  /**
+   * The orientation of the separator. By default, this is the opposite of the
+   * [`orientation`](https://ariakit.com/reference/composite-provider#orientation)
+   * state of the composite widget. Which means it doesn't need to be explicitly
+   * set in most cases.
+   */
+  orientation?: SeparatorOptions<T>["orientation"];
+}
+
+export type CompositeSeparatorProps<T extends ElementType = TagName> = Props<
+  T,
+  CompositeSeparatorOptions<T>
+>;