@ariakit/react-components 0.1.0

package/src/select/select.tsx

@@ -0,0 +1,371 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useBooleanEvent,
+  useEvent,
+  useMergeRefs,
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import {
+  toArray,
+  getPopupRole,
+  queueBeforeEvent,
+  invariant,
+} from "@ariakit/utils";
+import type { BooleanOrCallback } from "@ariakit/utils";
+import type {
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+  SelectHTMLAttributes,
+} from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { CompositeTypeaheadOptions } from "../composite/composite-typeahead.tsx";
+import { useCompositeTypeahead } from "../composite/composite-typeahead.tsx";
+import type { PopoverDisclosureOptions } from "../popover/popover-disclosure.tsx";
+import { usePopoverDisclosure } from "../popover/popover-disclosure.tsx";
+import { SelectArrow } from "./select-arrow.tsx";
+import {
+  SelectScopedContextProvider,
+  useSelectProviderContext,
+} from "./select-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+type BasePlacement = "top" | "bottom" | "left" | "right";
+
+function getSelectedValues(select: HTMLSelectElement) {
+  return Array.from(select.selectedOptions).map((option) => option.value);
+}
+
+// When moving through the items when the select list is closed, we don't want
+// to move to items without value, so we filter them out here.
+function nextWithValue(store: SelectStore, next: SelectStore["next"]) {
+  return () => {
+    const nextId = next();
+    if (!nextId) return;
+    let i = 0;
+    let nextItem = store.item(nextId);
+    const firstItem = nextItem;
+    while (nextItem && nextItem.value == null) {
+      const nextId = next(++i);
+      if (!nextId) return;
+      nextItem = store.item(nextId);
+      // Prevents infinite loop when focusLoop is true
+      if (nextItem === firstItem) break;
+    }
+    return nextItem?.id;
+  };
+}
+
+/**
+ * Returns props to create a `Select` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelect({ store });
+ * <Role {...props} />
+ * ```
+ */
+export const useSelect = createHook<TagName, SelectOptions>(function useSelect({
+  store,
+  name,
+  form,
+  required,
+  showOnKeyDown = true,
+  moveOnKeyDown = true,
+  toggleOnPress = true,
+  toggleOnClick = toggleOnPress,
+  ...props
+}) {
+  const context = useSelectProviderContext();
+  store = store || context;
+
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" &&
+      "Select must receive a `store` prop or be wrapped in a SelectProvider component.",
+  );
+
+  const onKeyDownProp = props.onKeyDown;
+  const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);
+  const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown);
+  const placement = useStoreState(store, "placement");
+  const dir = placement.split("-")[0] as BasePlacement;
+  const value = useStoreState(store, "value");
+  const multiSelectable = Array.isArray(value);
+
+  const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {
+    onKeyDownProp?.(event);
+    if (event.defaultPrevented) return;
+    if (!store) return;
+    const { orientation, items, activeId } = store.getState();
+    // moveOnKeyDown
+    const isVertical = orientation !== "horizontal";
+    const isHorizontal = orientation !== "vertical";
+    const isGrid = !!items.find((item) => !item.disabled && item.value != null)
+      ?.rowId;
+    const moveKeyMap = {
+      ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),
+      ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),
+      ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),
+      ArrowLeft:
+        (isGrid || isHorizontal) && nextWithValue(store, store.previous),
+    };
+    const getId = moveKeyMap[event.key as keyof typeof moveKeyMap];
+    if (getId && moveOnKeyDownProp(event)) {
+      event.preventDefault();
+      store.move(getId());
+    }
+    // showOnKeyDown
+    const isTopOrBottom = dir === "top" || dir === "bottom";
+    const isLeft = dir === "left";
+    const isRight = dir === "right";
+    const canShowKeyMap = {
+      ArrowDown: isTopOrBottom,
+      ArrowUp: isTopOrBottom,
+      ArrowLeft: isLeft,
+      ArrowRight: isRight,
+    };
+    const canShow = canShowKeyMap[event.key as keyof typeof canShowKeyMap];
+    if (canShow && showOnKeyDownProp(event)) {
+      event.preventDefault();
+      store.move(activeId);
+      // Schedule the show event to run after the key event has finished
+      // bubbling. This is necessary to avoid the page to scroll when the
+      // popover is shown.
+      queueBeforeEvent(event.currentTarget, "keyup", store.show);
+    }
+  });
+
+  props = useWrapElement(
+    props,
+    (element) => (
+      <SelectScopedContextProvider value={store}>
+        {element}
+      </SelectScopedContextProvider>
+    ),
+    [store],
+  );
+
+  const [autofill, setAutofill] = useState(false);
+  const nativeSelectChangedRef = useRef(false);
+
+  // Resets the autofilled state when the select value changes, but only if
+  // the change wasn't triggered by the native select element (which is an
+  // autofill).
+  useEffect(() => {
+    const nativeSelectChanged = nativeSelectChangedRef.current;
+    nativeSelectChangedRef.current = false;
+    if (nativeSelectChanged) return;
+    setAutofill(false);
+  }, [value]);
+
+  const labelId = useStoreState(store, (state) => state.labelElement?.id);
+  const label = props["aria-label"];
+  const labelledBy = props["aria-labelledby"] || labelId;
+  const items = useStoreState(store, (state) => {
+    if (!name) return;
+    return state.items;
+  });
+  const values = useMemo(() => {
+    // Filter out items without value and duplicate values.
+    return [...new Set(items?.map((i) => i.value!).filter((v) => v != null))];
+  }, [items]);
+
+  // Renders a native select element with the same value as the select so we
+  // support browser autofill. When the native select value changes, the
+  // onChange event is triggered and we set the autofill state to true.
+  props = useWrapElement(
+    props,
+    (element) => {
+      if (!name) return element;
+      return (
+        <>
+          <select
+            style={{
+              border: 0,
+              clip: "rect(0 0 0 0)",
+              height: "1px",
+              margin: "-1px",
+              overflow: "hidden",
+              padding: 0,
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px",
+            }}
+            tabIndex={-1}
+            aria-hidden
+            aria-label={label}
+            aria-labelledby={label != null ? undefined : labelledBy}
+            name={name}
+            form={form}
+            required={required}
+            disabled={props.disabled}
+            value={value}
+            multiple={multiSelectable}
+            // Even though this element is visually hidden and is not
+            // tabbable, it's still focusable. Some autofill extensions like
+            // 1password will move focus to the next form element on autofill.
+            // In this case, we want to move focus to our custom select
+            // element.
+            onFocus={() => store?.getState().selectElement?.focus()}
+            onChange={(event) => {
+              nativeSelectChangedRef.current = true;
+              setAutofill(true);
+              store?.setValue(
+                multiSelectable
+                  ? getSelectedValues(event.target)
+                  : event.target.value,
+              );
+            }}
+          >
+            {toArray(value).map((value) => {
+              if (value == null) return null;
+              if (values.includes(value)) return null;
+              return (
+                <option key={value} value={value}>
+                  {value}
+                </option>
+              );
+            })}
+            {values.map((value) => (
+              <option key={value} value={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+          {element}
+        </>
+      );
+    },
+    [
+      store,
+      label,
+      labelledBy,
+      name,
+      form,
+      required,
+      value,
+      multiSelectable,
+      values,
+      props.disabled,
+    ],
+  );
+
+  const children = (
+    <>
+      {value}
+      <SelectArrow />
+    </>
+  );
+
+  const contentElement = useStoreState(store, "contentElement");
+
+  props = {
+    role: "combobox",
+    "aria-autocomplete": "none",
+    "aria-labelledby": props["aria-label"] != null ? undefined : labelId,
+    "aria-haspopup": getPopupRole(contentElement, "listbox"),
+    "data-autofill": autofill || undefined,
+    "data-name": name,
+    children,
+    ...props,
+    ref: useMergeRefs(store.setSelectElement, props.ref),
+    onKeyDown,
+  };
+
+  props = usePopoverDisclosure({ store, toggleOnClick, ...props });
+  props = useCompositeTypeahead<TagName>({ store, ...props });
+
+  return props;
+});
+
+/**
+ * Renders a custom select element that controls the visibility of either a
+ * [`SelectList`](https://ariakit.com/reference/select-list) or a
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover) component.
+ *
+ * By default, the
+ * [`value`](https://ariakit.com/reference/select-provider#value) state is
+ * rendered as the children, followed by a
+ * [`SelectArrow`](https://ariakit.com/reference/select-arrow) component. This
+ * can be customized by passing different children to the component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {2}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const Select = forwardRef(function Select(props: SelectProps) {
+  const htmlProps = useSelect(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SelectOptions<T extends ElementType = TagName>
+  extends
+    PopoverDisclosureOptions<T>,
+    CompositeTypeaheadOptions<T>,
+    Pick<
+      SelectHTMLAttributes<HTMLSelectElement>,
+      "name" | "form" | "required"
+    > {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the closest
+   * [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * component's context will be used.
+   */
+  store?: SelectStore;
+  /**
+   * Determines if the
+   * [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components
+   * will appear when the user uses arrow keys while the select element is
+   * in focus.
+   *
+   * Live examples:
+   * - [Select Grid](https://ariakit.com/examples/select-grid)
+   * @default true
+   */
+  showOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Determines whether pressing arrow keys will move the active item even when
+   * the [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components
+   * are hidden.
+   * @default false
+   */
+  moveOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Determines whether pressing Space, Enter, or a click event will
+   * [`toggle`](https://ariakit.com/reference/use-select-store#toggle) the
+   * [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components.
+   * @default true
+   * @deprecated Use
+   * [`toggleOnClick`](https://ariakit.com/reference/select#toggleonclick)
+   * instead.
+   */
+  toggleOnPress?: BooleanOrCallback<
+    MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
+  >;
+}
+
+export type SelectProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectOptions<T>
+>;

package/src/separator/separator.tsx

@@ -0,0 +1,54 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+
+const TagName = "hr" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `Separator` component.
+ * @see https://ariakit.com/components/separator
+ * @example
+ * ```jsx
+ * const props = useSeparator({ orientation: "horizontal" });
+ * <Role {...props} />
+ * ```
+ */
+export const useSeparator = createHook<TagName, SeparatorOptions>(
+  function useSeparator({ orientation = "horizontal", ...props }) {
+    props = {
+      role: "separator",
+      "aria-orientation": orientation,
+      ...props,
+    };
+    return props;
+  },
+);
+
+/**
+ * Renders a separator element.
+ * @see https://ariakit.com/components/separator
+ * @example
+ * ```jsx
+ * <Separator orientation="horizontal" />
+ * ```
+ */
+export const Separator = forwardRef(function Separator(props: SeparatorProps) {
+  const htmlProps = useSeparator(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SeparatorOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * The orientation of the separator.
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+}
+
+export type SeparatorProps<T extends ElementType = TagName> = Props<
+  T,
+  SeparatorOptions<T>
+>;

package/src/store.ts

@@ -0,0 +1 @@
+export * from "@ariakit/react-store";

package/src/tab/tab-context.tsx

@@ -0,0 +1,34 @@
+import { createStoreContext } from "@ariakit/react-utils";
+import {
+  CompositeContextProvider,
+  CompositeScopedContextProvider,
+} from "../composite/composite-context.tsx";
+import type { TabStore } from "./tab-store.ts";
+
+const ctx = createStoreContext<TabStore>(
+  [CompositeContextProvider],
+  [CompositeScopedContextProvider],
+);
+
+/**
+ * Returns the tab store from the nearest tab container.
+ * @example
+ * function Tab() {
+ *   const store = useTabContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Tab must be wrapped in TabProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export const useTabContext = ctx.useContext;
+
+export const useTabScopedContext = ctx.useScopedContext;
+
+export const useTabProviderContext = ctx.useProviderContext;
+
+export const TabContextProvider = ctx.ContextProvider;
+
+export const TabScopedContextProvider = ctx.ScopedContextProvider;

package/src/tab/tab-list.tsx

@@ -0,0 +1,120 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useWrapElement,
+  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 { CompositeOptions } from "../composite/composite.tsx";
+import { useComposite } from "../composite/composite.tsx";
+import {
+  TabScopedContextProvider,
+  useTabProviderContext,
+} from "./tab-context.tsx";
+import type { TabStore } from "./tab-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `TabList` component.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx
+ * const store = useTabStore();
+ * const props = useTabList({ store });
+ * <Role {...props}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </Role>
+ * <TabPanel store={store}>Panel 1</TabPanel>
+ * <TabPanel store={store}>Panel 2</TabPanel>
+ * ```
+ */
+export const useTabList = createHook<TagName, TabListOptions>(
+  function useTabList({ store, ...props }) {
+    const context = useTabProviderContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "TabList must receive a `store` prop or be wrapped in a TabProvider component.",
+    );
+
+    const orientation = useStoreState(store, (state) =>
+      state.orientation === "both" ? undefined : state.orientation,
+    );
+
+    props = useWrapElement(
+      props,
+      (element) => (
+        <TabScopedContextProvider value={store}>
+          {element}
+        </TabScopedContextProvider>
+      ),
+      [store],
+    );
+
+    // If the tab list is rendered as part of another composite widget such as
+    // combobox, it should not be focusable.
+    if (store.composite) {
+      props = {
+        focusable: false,
+        ...props,
+      };
+    }
+
+    props = {
+      role: "tablist",
+      "aria-orientation": orientation,
+      ...props,
+    };
+
+    props = useComposite({ store, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a composite tab list wrapper for
+ * [`Tab`](https://ariakit.com/reference/tab) elements.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx {2-5}
+ * <TabProvider>
+ *   <TabList>
+ *     <Tab>Tab 1</Tab>
+ *     <Tab>Tab 2</Tab>
+ *   </TabList>
+ *   <TabPanel>Panel 1</TabPanel>
+ *   <TabPanel>Panel 2</TabPanel>
+ * </TabProvider>
+ * ```
+ */
+export const TabList = forwardRef(function TabList(props: TabListProps) {
+  const htmlProps = useTabList(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface TabListOptions<
+  T extends ElementType = TagName,
+> extends CompositeOptions<T> {
+  /**
+   * Object returned by the
+   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not
+   * provided, the closest
+   * [`TabProvider`](https://ariakit.com/reference/tab-provider) component's
+   * context will be used.
+   */
+  store?: TabStore;
+}
+
+export type TabListProps<T extends ElementType = TagName> = Props<
+  T,
+  TabListOptions<T>
+>;