@ariakit/react-components 0.1.0

package/src/disclosure/disclosure.tsx

@@ -0,0 +1,144 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useBooleanEvent,
+  useEvent,
+  useMergeRefs,
+  useMetadataProps,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import type { BooleanOrCallback } from "@ariakit/utils";
+import type { ElementType, MouseEvent } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { ButtonOptions } from "../button/button.tsx";
+import { useButton } from "../button/button.tsx";
+import { useDisclosureProviderContext } from "./disclosure-context.tsx";
+import type { DisclosureStore } from "./disclosure-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+const symbol = Symbol("disclosure");
+
+/**
+ * Returns props to create a `Disclosure` component.
+ * @see https://ariakit.com/components/disclosure
+ * @example
+ * ```jsx
+ * const store = useDisclosureStore();
+ * const props = useDisclosure({ store });
+ * <Role {...props}>Disclosure</Role>
+ * <DisclosureContent store={store}>Content</DisclosureContent>
+ * ```
+ */
+export const useDisclosure = createHook<TagName, DisclosureOptions>(
+  function useDisclosure({ store, toggleOnClick = true, ...props }) {
+    const context = useDisclosureProviderContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "Disclosure must receive a `store` prop or be wrapped in a DisclosureProvider component.",
+    );
+
+    const ref = useRef<HTMLType>(null);
+    const [expanded, setExpanded] = useState(false);
+    const disclosureElement = useStoreState(store, "disclosureElement");
+    const open = useStoreState(store, "open");
+
+    // Assigns the disclosure element whenever it's undefined or disconnected
+    // from the DOM. If the current element is the disclosure element, it will
+    // get the `aria-expanded` attribute set to `true` when the disclosure
+    // content is open.
+    useEffect(() => {
+      let isCurrentDisclosure = disclosureElement === ref.current;
+      if (!disclosureElement?.isConnected) {
+        store?.setDisclosureElement(ref.current);
+        isCurrentDisclosure = true;
+      }
+      setExpanded(open && isCurrentDisclosure);
+    }, [disclosureElement, store, open]);
+
+    const onClickProp = props.onClick;
+    const toggleOnClickProp = useBooleanEvent(toggleOnClick);
+    const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true);
+
+    const onClick = useEvent((event: MouseEvent<HTMLType>) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      if (isDuplicate) return;
+      if (!toggleOnClickProp(event)) return;
+      store?.setDisclosureElement(event.currentTarget);
+      store?.toggle();
+    });
+
+    const contentElement = useStoreState(store, "contentElement");
+
+    props = {
+      "aria-expanded": expanded,
+      "aria-controls": contentElement?.id,
+      ...metadataProps,
+      ...props,
+      ref: useMergeRefs(ref, props.ref),
+      onClick,
+    };
+
+    props = useButton(props);
+
+    return props;
+  },
+);
+
+/**
+ * Renders an element that controls the visibility of a
+ * [`DisclosureContent`](https://ariakit.com/reference/disclosure-content)
+ * element.
+ * @see https://ariakit.com/components/disclosure
+ * @example
+ * ```jsx {2}
+ * <DisclosureProvider>
+ *   <Disclosure>Disclosure</Disclosure>
+ *   <DisclosureContent>Content</DisclosureContent>
+ * </DisclosureProvider>
+ * ```
+ */
+export const Disclosure = forwardRef(function Disclosure(
+  props: DisclosureProps,
+) {
+  const htmlProps = useDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface DisclosureOptions<
+  T extends ElementType = TagName,
+> extends ButtonOptions<T> {
+  /**
+   * Object returned by the
+   * [`useDisclosureStore`](https://ariakit.com/reference/use-disclosure-store)
+   * hook. If not provided, the closest
+   * [`DisclosureProvider`](https://ariakit.com/reference/disclosure-provider)
+   * component's context will be used.
+   */
+  store?: DisclosureStore;
+  /**
+   * Determines whether
+   * [`toggle`](https://ariakit.com/reference/use-disclosure-store#toggle) will
+   * be called on click. This is useful if you want to handle the toggle logic
+   * yourself.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * @default true
+   */
+  toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+}
+
+export type DisclosureProps<T extends ElementType = TagName> = Props<
+  T,
+  DisclosureOptions<T>
+>;

package/src/focus-trap/focus-trap-region.tsx

@@ -0,0 +1,112 @@
+import {
+  useMergeRefs,
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import { getAllTabbableIn, removeUndefinedValues } from "@ariakit/utils";
+import type { ElementType } from "react";
+import { useRef } from "react";
+import { FocusTrap } from "./focus-trap.tsx";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+/**
+ * Returns props to create a `FocusTrapRegion` component.
+ * @see https://ariakit.com/components/focus-trap-region
+ * @example
+ * ```jsx
+ * const props = useFocusTrapRegion();
+ * <Role {...props} />
+ * ```
+ */
+export const useFocusTrapRegion = createHook<TagName, FocusTrapRegionOptions>(
+  function useFocusTrapRegion({ enabled = false, ...props }) {
+    const ref = useRef<HTMLType>(null);
+
+    props = useWrapElement(
+      props,
+      (element) => {
+        const renderFocusTrap = () => {
+          if (!enabled) return null;
+          return (
+            <FocusTrap
+              onFocus={(event) => {
+                const container = ref.current;
+                if (!container) return;
+                const tabbables = getAllTabbableIn(container, true);
+                const first = tabbables[0];
+                const last = tabbables[tabbables.length - 1];
+                // Fallbacks to the container element
+                if (!tabbables.length) {
+                  container.focus();
+                  return;
+                }
+                if (event.relatedTarget === first) {
+                  last?.focus();
+                } else {
+                  first?.focus();
+                }
+              }}
+            />
+          );
+        };
+        return (
+          <>
+            {renderFocusTrap()}
+            {element}
+            {renderFocusTrap()}
+          </>
+        );
+      },
+      [enabled],
+    );
+
+    props = {
+      ...props,
+      ref: useMergeRefs(ref, props.ref),
+    };
+
+    return removeUndefinedValues(props);
+  },
+);
+
+/**
+ * Renders a wrapper element that traps the focus inside it when the
+ * [`enabled`](https://ariakit.com/reference/focus-trap-region#enabled) prop is
+ * `true`.
+ * @see https://ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrapRegion>
+ *  <Button>click me</Button>
+ *  <Button>trap focus</Button>
+ *  <Button disabled>disabled Button</Button>
+ * </FocusTrapRegion>
+ * ```
+ */
+export const FocusTrapRegion = forwardRef(function FocusTrapRegion(
+  props: FocusTrapRegionProps,
+) {
+  const htmlProps = useFocusTrapRegion(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface FocusTrapRegionOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * If true, it will trap the focus in the region.
+   * @default false
+   */
+  enabled?: boolean;
+}
+
+export type FocusTrapRegionProps<T extends ElementType = TagName> = Props<
+  T,
+  FocusTrapRegionOptions<T>
+>;

package/src/focus-trap/focus-trap.tsx

@@ -0,0 +1,60 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.tsx";
+import { useVisuallyHidden } from "../visually-hidden/visually-hidden.tsx";
+
+const TagName = "span" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `FocusTrap` component.
+ * @see https://ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * const props = useFocusTrap();
+ * <Role {...props} />
+ * ```
+ */
+export const useFocusTrap = createHook<TagName, FocusTrapOptions>(
+  function useFocusTrap(props) {
+    props = {
+      "data-focus-trap": "",
+      tabIndex: 0,
+      "aria-hidden": true,
+      ...props,
+      style: {
+        // Prevents unintended scroll jumps.
+        position: "fixed",
+        top: 0,
+        left: 0,
+        ...props.style,
+      },
+    };
+
+    props = useVisuallyHidden(props);
+
+    return props;
+  },
+);
+
+/**
+ * Renders a focus trap element.
+ * @see https://ariakit.com/components/focus-trap
+ * @example
+ * ```jsx
+ * <FocusTrap onFocus={focusSomethingElse} />
+ * ```
+ */
+export const FocusTrap = forwardRef(function FocusTrap(props: FocusTrapProps) {
+  const htmlProps = useFocusTrap(props);
+  return createElement(TagName, htmlProps);
+});
+
+export type FocusTrapOptions<T extends ElementType = TagName> =
+  VisuallyHiddenOptions<T>;
+
+export type FocusTrapProps<T extends ElementType = TagName> = Props<
+  T,
+  FocusTrapOptions<T>
+>;

package/src/focusable/focusable-container.tsx

@@ -0,0 +1,75 @@
+import {
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import { FocusableContext } from "./focusable-context.tsx";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `FocusableContainer` component.
+ * @see https://ariakit.com/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusableContainer();
+ * <Role {...props} />
+ * ```
+ */
+export const useFocusableContainer = createHook<
+  TagName,
+  FocusableContainerOptions
+>(function useFocusableContainer({ autoFocusOnShow = true, ...props }) {
+  props = useWrapElement(
+    props,
+    (element) => (
+      <FocusableContext.Provider value={autoFocusOnShow}>
+        {element}
+      </FocusableContext.Provider>
+    ),
+    [autoFocusOnShow],
+  );
+
+  return props;
+});
+
+/**
+ * Renders a div that wraps
+ * [`Focusable`](https://ariakit.com/reference/focusable) components and
+ * controls whether they can be auto-focused.
+ * @see https://ariakit.com/components/focusable
+ * @example
+ * ```jsx
+ * <FocusableContainer autoFocusOnShow={false}>
+ *   <Focusable autoFocus />
+ * </FocusableContainer>
+ * ```
+ */
+export const FocusableContainer = forwardRef(function FocusableContainer(
+  props: FocusableContainerProps,
+) {
+  const htmlProps = useFocusableContainer(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface FocusableContainerOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * Determines whether [`Focusable`](https://ariakit.com/reference/focusable)
+   * elements inside the container should be automatically focused when the
+   * container is shown and they have the
+   * [`autoFocus`](https://ariakit.com/reference/focusable#autofocus) prop.
+   * @default true
+   */
+  autoFocusOnShow?: boolean;
+}
+
+export type FocusableContainerProps<T extends ElementType = TagName> = Props<
+  T,
+  FocusableContainerOptions<T>
+>;

package/src/focusable/focusable-context.tsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const FocusableContext = createContext(true);