@ariakit/react-components 0.1.0

package/src/select/select-label.tsx

@@ -0,0 +1,117 @@
+import {
+  useEvent,
+  useId,
+  useMergeRefs,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import { invariant, removeUndefinedValues } from "@ariakit/utils";
+import type { ElementType, MouseEvent } from "react";
+import { useSelectProviderContext } from "./select-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+/**
+ * Returns props to create a `SelectLabel` component. Since it's not a native
+ * select element, we can't use the native label element. The `SelectLabel`
+ * component will move focus and click on the `Select` component when the user
+ * clicks on the label.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectLabel({ store });
+ * <Role {...props}>Favorite fruit</Role>
+ * <Select store={store} />
+ * ```
+ */
+export const useSelectLabel = createHook<TagName, SelectLabelOptions>(
+  function useSelectLabel({ store, ...props }) {
+    const context = useSelectProviderContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "SelectLabel must receive a `store` prop or be wrapped in a SelectProvider component.",
+    );
+
+    const id = useId(props.id);
+
+    const onClickProp = props.onClick;
+
+    const onClick = useEvent((event: MouseEvent<HTMLType>) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      // queueMicrotask will guarantee that the focus and click events will be
+      // triggered only after the current event queue is flushed (which includes
+      // this click event).
+      queueMicrotask(() => {
+        const select = store?.getState().selectElement;
+        select?.focus();
+      });
+    });
+
+    props = {
+      ...props,
+      id,
+      ref: useMergeRefs(store.setLabelElement, props.ref),
+      onClick,
+      style: {
+        cursor: "default",
+        ...props.style,
+      },
+    };
+
+    return removeUndefinedValues(props);
+  },
+);
+
+/**
+ * Renders a label for the [`Select`](https://ariakit.com/reference/select)
+ * component. Since it's not a native select element, we can't use the native
+ * label element. This component will move focus and click on the
+ * [`Select`](https://ariakit.com/reference/select) component when clicked.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {2}
+ * <SelectProvider defaultValue="Apple">
+ *   <SelectLabel>Favorite fruit</SelectLabel>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectLabel = memo(
+  forwardRef(function SelectLabel(props: SelectLabelProps) {
+    const htmlProps = useSelectLabel(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface SelectLabelOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * 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;
+}
+
+export type SelectLabelProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectLabelOptions<T>
+>;

package/src/select/select-list.tsx

@@ -0,0 +1,251 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useAttribute,
+  useBooleanEvent,
+  useEvent,
+  useId,
+  useMergeRefs,
+  useTransactionState,
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { isSelfTarget, invariant } from "@ariakit/utils";
+import type { BooleanOrCallback } from "@ariakit/utils";
+import type { ElementType, KeyboardEvent } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import type { CompositeTypeaheadOptions } from "../composite/composite-typeahead.tsx";
+import { useCompositeTypeahead } from "../composite/composite-typeahead.tsx";
+import type { CompositeOptions } from "../composite/composite.tsx";
+import { useComposite } from "../composite/composite.tsx";
+import type { DisclosureContentOptions } from "../disclosure/disclosure-content.tsx";
+import { isHidden } from "../disclosure/disclosure-content.tsx";
+import {
+  SelectHeadingContext,
+  SelectScopedContextProvider,
+  useSelectContext,
+} from "./select-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+const SelectListContext = createContext<
+  ((store: SelectStore | null) => void) | null
+>(null);
+
+/**
+ * Returns props to create a `SelectList` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectList({ store });
+ * <Role {...props}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </Role>
+ * ```
+ */
+export const useSelectList = createHook<TagName, SelectListOptions>(
+  function useSelectList({
+    store,
+    resetOnEscape = true,
+    hideOnEnter = true,
+    focusOnMove = true,
+    composite,
+    alwaysVisible,
+    ...props
+  }) {
+    const context = useSelectContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "SelectList must receive a `store` prop or be wrapped in a SelectProvider component.",
+    );
+
+    const id = useId(props.id);
+    const value = useStoreState(store, "value");
+    const multiSelectable = Array.isArray(value);
+    const [defaultValue, setDefaultValue] = useState(value);
+
+    const mounted = useStoreState(store, "mounted");
+
+    // Stores the intial value so we can reset it later when Escape is pressed
+    useEffect(() => {
+      if (mounted) return;
+      setDefaultValue(value);
+    }, [mounted, value]);
+
+    resetOnEscape = resetOnEscape && !multiSelectable;
+
+    const onKeyDownProp = props.onKeyDown;
+    const resetOnEscapeProp = useBooleanEvent(resetOnEscape);
+    const hideOnEnterProp = useBooleanEvent(hideOnEnter);
+
+    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "Escape" && resetOnEscapeProp(event)) {
+        store?.setValue(defaultValue);
+      }
+      if (event.key === " " || event.key === "Enter") {
+        if (isSelfTarget(event) && hideOnEnterProp(event)) {
+          event.preventDefault();
+          store?.hide();
+        }
+      }
+    });
+
+    const headingContext = useContext(SelectHeadingContext);
+    const headingState = useState<string>();
+    const [headingId, setHeadingId] = headingContext || headingState;
+
+    const headingContextValue: typeof headingState = useMemo(
+      () => [headingId, setHeadingId],
+      [headingId, setHeadingId],
+    );
+
+    const [childStore, setChildStore] = useState<SelectStore | null>(null);
+    const setStore = useContext(SelectListContext);
+
+    useEffect(() => {
+      if (!setStore) return;
+      setStore(store);
+      return () => setStore(null);
+    }, [setStore, store]);
+
+    props = useWrapElement(
+      props,
+      (element) => (
+        <SelectScopedContextProvider value={store}>
+          <SelectListContext.Provider value={setChildStore}>
+            <SelectHeadingContext.Provider value={headingContextValue}>
+              {element}
+            </SelectHeadingContext.Provider>
+          </SelectListContext.Provider>
+        </SelectScopedContextProvider>
+      ),
+      [store, headingContextValue],
+    );
+
+    const hasCombobox = !!store.combobox;
+    composite = composite ?? (!hasCombobox && childStore !== store);
+
+    const [element, setElement] = useTransactionState(
+      composite ? store.setListElement : null,
+    );
+
+    const role = useAttribute(element, "role", props.role);
+    const isCompositeRole =
+      role === "listbox" ||
+      role === "menu" ||
+      role === "tree" ||
+      role === "grid";
+    const ariaMultiSelectable =
+      composite || isCompositeRole ? multiSelectable || undefined : undefined;
+
+    const hidden = isHidden(mounted, props.hidden, alwaysVisible);
+    const style = hidden ? { ...props.style, display: "none" } : props.style;
+
+    if (composite) {
+      props = {
+        role: "listbox",
+        "aria-multiselectable": ariaMultiSelectable,
+        ...props,
+      };
+    }
+
+    const labelId = useStoreState(
+      store,
+      (state) => headingId || state.labelElement?.id,
+    );
+
+    props = {
+      "aria-labelledby": props["aria-label"] != null ? undefined : labelId,
+      hidden,
+      ...props,
+      id,
+      ref: useMergeRefs(setElement, props.ref),
+      style,
+      onKeyDown,
+    };
+
+    props = useComposite({ store, ...props, composite });
+    props = useCompositeTypeahead({ store, typeahead: !hasCombobox, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a wrapper for
+ * [`SelectItem`](https://ariakit.com/reference/select-item) elements. This
+ * component may be rendered within a
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover) component if
+ * there are other non-item elements inside the popover.
+ *
+ * The `aria-labelledby` prop is set to the
+ * [`Select`](https://ariakit.com/reference/select) element's `id` by default.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {5-8}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectDismiss />
+ *     <SelectList>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectList>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectList = forwardRef(function SelectList(
+  props: SelectListProps,
+) {
+  const htmlProps = useSelectList(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SelectListOptions<T extends ElementType = TagName>
+  extends
+    CompositeOptions<T>,
+    CompositeTypeaheadOptions<T>,
+    Pick<DisclosureContentOptions, "alwaysVisible"> {
+  /**
+   * 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;
+  /**
+   * Whether the select value should be reset to the value before the list got
+   * shown when Escape is pressed. This has effect only when
+   * [`setValueOnMove`](https://ariakit.com/reference/select-provider#setvalueonmove)
+   * is `true`.
+   * @default true
+   */
+  resetOnEscape?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Whether the [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components
+   * should be hidden when the user presses Enter or Space while the list
+   * element is focused and no item is active.
+   * @default true
+   */
+  hideOnEnter?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+}
+
+export type SelectListProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectListOptions<T>
+>;

package/src/select/select-popover.tsx

@@ -0,0 +1,67 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import { createDialogComponent } from "../dialog/dialog.tsx";
+import type { PopoverOptions } from "../popover/popover.tsx";
+import { usePopover } from "../popover/popover.tsx";
+import { useSelectProviderContext } from "./select-context.tsx";
+import type { SelectListOptions } from "./select-list.tsx";
+import { useSelectList } from "./select-list.tsx";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `SelectPopover` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectPopover({ store });
+ * <Role {...props}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </Role>
+ * ```
+ */
+export const useSelectPopover = createHook<TagName, SelectPopoverOptions>(
+  function useSelectPopover({ store, alwaysVisible, ...props }) {
+    const context = useSelectProviderContext();
+    store = store || context;
+    props = useSelectList({ store, alwaysVisible, ...props });
+    props = usePopover({ store, alwaysVisible, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders a select popover. The `role` attribute is set to `listbox` by
+ * default, but can be overriden by any other valid select popup role
+ * (`listbox`, `menu`, `tree`, `grid` or `dialog`).
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {3-6}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectPopover = createDialogComponent(
+  forwardRef(function SelectPopover(props: SelectPopoverProps) {
+    const htmlProps = useSelectPopover(props);
+    return createElement(TagName, htmlProps);
+  }),
+  useSelectProviderContext,
+);
+
+export interface SelectPopoverOptions<T extends ElementType = TagName>
+  extends SelectListOptions<T>, Omit<PopoverOptions<T>, "store"> {}
+
+export type SelectPopoverProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectPopoverOptions<T>
+>;

package/src/select/select-provider.tsx

@@ -0,0 +1,45 @@
+import type { PickRequired } from "@ariakit/utils";
+import type { ReactElement, ReactNode } from "react";
+import { SelectContextProvider } from "./select-context.tsx";
+import type { SelectStoreProps, SelectStoreValue } from "./select-store.ts";
+import { useSelectStore } from "./select-store.ts";
+
+type Value = SelectStoreValue;
+
+/**
+ * Provides a select store to [Select](https://ariakit.com/components/select)
+ * components.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * <SelectProvider defaultValue="Apple">
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+
+export function SelectProvider<T extends Value = Value>(
+  props: PickRequired<SelectProviderProps<T>, "value" | "defaultValue">,
+): ReactElement;
+
+export function SelectProvider(props?: SelectProviderProps): ReactElement;
+
+export function SelectProvider(props: SelectProviderProps = {}) {
+  const store = useSelectStore(props);
+  return (
+    <SelectContextProvider value={store}>
+      {props.children}
+    </SelectContextProvider>
+  );
+}
+
+export interface SelectProviderProps<
+  T extends Value = Value,
+> extends SelectStoreProps<T> {
+  children?: ReactNode;
+}

package/src/select/select-renderer.tsx

@@ -0,0 +1,160 @@
+import { useStoreState } from "@ariakit/react-store";
+import { createElement, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { toArray } from "@ariakit/utils";
+import type { ElementType } from "react";
+import { useMemo } from "react";
+import type {
+  CompositeRendererBaseItemProps,
+  CompositeRendererItem,
+  CompositeRendererItemObject,
+  CompositeRendererItemProps,
+  CompositeRendererOptions,
+} from "../composite/composite-renderer.tsx";
+import {
+  getCompositeRendererItem,
+  getCompositeRendererItemId,
+  useCompositeRenderer,
+} from "../composite/composite-renderer.tsx";
+import { useSelectContext } from "./select-context.tsx";
+import type { SelectStore, SelectStoreValue } from "./select-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+interface ItemObject extends CompositeRendererItemObject {
+  value?: string;
+}
+
+type Item = ItemObject | CompositeRendererItem;
+
+type BaseItemProps = CompositeRendererBaseItemProps;
+
+type ItemProps<
+  T extends Item,
+  P extends BaseItemProps = BaseItemProps,
+> = CompositeRendererItemProps<T, P>;
+
+function getItemObject(item: Item): ItemObject {
+  if (!item || typeof item !== "object") {
+    return { value: `${item}` };
+  }
+  return item;
+}
+
+function findIndicesByValue(
+  items: readonly Item[],
+  value: SelectStoreValue,
+): number[] {
+  const values = toArray(value);
+  const indices: number[] = [];
+
+  for (const [index, item] of items.entries()) {
+    if (indices.length === values.length) break;
+
+    const object = getItemObject(item);
+
+    if (object.value != null && values.includes(object.value)) {
+      indices.push(index);
+    } else if (object.items?.length) {
+      const childIndices = findIndicesByValue(object.items, value);
+      if (childIndices.length) {
+        indices.push(index);
+      }
+    }
+  }
+
+  return indices;
+}
+
+function useSelectRenderer<T extends Item = any>({
+  store,
+  orientation: orientationProp,
+  persistentIndices: persistentIndicesProp,
+  items: itemsProp,
+  value: valueProp,
+  ...props
+}: SelectRendererProps<T>) {
+  const context = useSelectContext();
+  store = store || context;
+
+  const items = useStoreState(store, (state) => {
+    if (!state) return itemsProp;
+    if (!state.mounted) return 0;
+    return itemsProp ?? (state.items as T[]);
+  });
+
+  const value = useStoreState(store, (state) => valueProp ?? state?.value);
+
+  const valueIndices = useMemo(() => {
+    if (!items) return [];
+    if (value == null) return [];
+    if (typeof items === "number") return [];
+    if (!items.length) return [];
+    return findIndicesByValue(items, value);
+  }, [items, value]);
+
+  const persistentIndices = useMemo(() => {
+    if (persistentIndicesProp) {
+      return [...persistentIndicesProp, ...valueIndices];
+    }
+    return valueIndices;
+  }, [valueIndices, persistentIndicesProp]);
+
+  return useCompositeRenderer({
+    store: store as CompositeRendererOptions["store"],
+    items,
+    persistentIndices,
+    ...props,
+  });
+}
+
+export const SelectRenderer = forwardRef(function SelectRenderer<
+  T extends Item = any,
+>(props: SelectRendererProps<T>) {
+  const htmlProps = useSelectRenderer(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  getCompositeRendererItem as getSelectRendererItem,
+  getCompositeRendererItemId as getSelectRendererItemId,
+};
+
+export type SelectRendererItemObject = ItemObject;
+export type SelectRendererItem = Item;
+export type SelectRendererBaseItemProps = BaseItemProps;
+export type SelectRendererItemProps<
+  T extends Item,
+  P extends BaseItemProps = BaseItemProps,
+> = ItemProps<T, P>;
+
+export interface SelectRendererOptions<T extends Item = any> extends Omit<
+  CompositeRendererOptions<T>,
+  "store"
+> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the closest [Select](https://ariakit.com/components/select)
+   * component's context will be used.
+   *
+   * The store [`items`](https://ariakit.com/reference/use-select-store#items)
+   * state will be used to render the items if the
+   * [`items`](https://ariakit.com/reference/select-items#items) prop is not
+   * provided.
+   */
+  store?: SelectStore;
+  /**
+   * The current value of the select. This will ensure the item with the given
+   * value is rendered even if it's not in the viewport, so it can be
+   * automatically focused when the select popover is opened. If not provided,
+   * the value will be read from the store.
+   */
+  value?: SelectStoreValue;
+}
+
+export interface SelectRendererProps<T extends Item = any> extends Props<
+  TagName,
+  SelectRendererOptions<T>
+> {}