@ariakit/react-components 0.1.0

package/src/radio/radio-store.ts

@@ -0,0 +1,64 @@
+import * as Core from "@ariakit/components/radio/radio-store";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import type { Store } from "@ariakit/react-store";
+import type {
+  CompositeStoreFunctions,
+  CompositeStoreOptions,
+  CompositeStoreState,
+} from "../composite/composite-store.ts";
+import {
+  useCompositeStoreOptions,
+  useCompositeStoreProps,
+} from "../composite/composite-store.ts";
+
+export function useRadioStoreProps<T extends Core.RadioStore>(
+  store: T,
+  update: () => void,
+  props: RadioStoreProps,
+) {
+  store = useCompositeStoreProps(store, update, props);
+  useStoreProps(store, props, "value", "setValue");
+  return store;
+}
+
+/**
+ * Creates a radio store to control the state of
+ * [Radio](https://ariakit.com/components/radio) components.
+ * @see https://ariakit.com/components/radio
+ * @example
+ * ```jsx
+ * const radio = useRadioStore();
+ *
+ * <RadioGroup store={radio}>
+ *   <Radio value="Apple" />
+ *   <Radio value="Orange" />
+ * </RadioGroup>
+ * ```
+ */
+export function useRadioStore(props: RadioStoreProps = {}): RadioStore {
+  props = useCompositeStoreOptions(props);
+  const [store, update] = useStore(Core.createRadioStore, props);
+  return useRadioStoreProps(store, update, props);
+}
+
+export interface RadioStoreState
+  extends Core.RadioStoreState, CompositeStoreState {}
+
+export interface RadioStoreFunctions
+  extends Core.RadioStoreFunctions, CompositeStoreFunctions {}
+
+export interface RadioStoreOptions
+  extends Core.RadioStoreOptions, CompositeStoreOptions {
+  /**
+   * Function that will be called when the
+   * [`value`](https://ariakit.com/reference/radio-provider#value) state
+   * changes.
+   */
+  setValue?: (value: RadioStoreState["value"]) => void;
+}
+
+export interface RadioStoreProps
+  extends RadioStoreOptions, Core.RadioStoreProps {}
+
+export interface RadioStore
+  extends RadioStoreFunctions, Store<Core.RadioStore> {}

package/src/radio/radio.tsx

@@ -0,0 +1,242 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useEvent,
+  useForceUpdate,
+  useId,
+  useMergeRefs,
+  useTagName,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { disabledFromProps, removeUndefinedValues } from "@ariakit/utils";
+import type { BivariantCallback } from "@ariakit/utils";
+import type { ChangeEvent, ElementType, FocusEvent, MouseEvent } from "react";
+import { useEffect, useRef } from "react";
+import type { CompositeItemOptions } from "../composite/composite-item.tsx";
+import { useCompositeItem } from "../composite/composite-item.tsx";
+import { useRadioContext } from "./radio-context.tsx";
+import type { RadioStore, RadioStoreState } from "./radio-store.ts";
+
+const TagName = "input" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+function getIsChecked(
+  value: RadioOptions["value"],
+  storeValue?: RadioStoreState["value"],
+) {
+  if (storeValue === undefined) return;
+  if (value != null && storeValue != null) {
+    return storeValue === value;
+  }
+  return !!storeValue;
+}
+
+function isNativeRadio(tagName?: string, type?: string) {
+  return tagName === "input" && (!type || type === "radio");
+}
+
+/**
+ * Returns props to create a `Radio` component.
+ * @see https://ariakit.com/components/radio
+ * @example
+ * ```jsx
+ * const store = useRadioStore();
+ * const props = useRadio({ store, value: "Apple" });
+ * <RadioGroup store={store}>
+ *   <Role {...props} render={<input />} />
+ *   <Radio value="Orange" />
+ * </RadioGroup>
+ * ```
+ */
+export const useRadio = createHook<TagName, RadioOptions>(function useRadio({
+  store,
+  name: nameProp,
+  value,
+  checked,
+  ...props
+}) {
+  const context = useRadioContext();
+  store = store || context;
+
+  const id = useId(props.id);
+
+  const ref = useRef<HTMLType>(null);
+  const isChecked = useStoreState(
+    store,
+    (state) => checked ?? getIsChecked(value, state?.value),
+  );
+
+  // Use the store's id as the default name to ensure radios in different
+  // groups have unique names. This prevents the browser from treating all
+  // radios as a single group. See https://github.com/ariakit/ariakit/issues/3833
+  const storeId = useStoreState(store, (state) => state?.id);
+  const name = nameProp ?? storeId;
+
+  // When the radio store has a default value, we need to update the active id
+  // to point to the checked element, otherwise it'll be the first item in the
+  // list. TODO: Maybe this could be done in the radio store directly?
+  useEffect(() => {
+    if (!id) return;
+    if (!isChecked) return;
+    const isActiveItem = store?.getState().activeId === id;
+    if (isActiveItem) return;
+    store?.setActiveId(id);
+  }, [store, isChecked, id]);
+
+  const onChangeProp = props.onChange;
+  const tagName = useTagName(ref, TagName);
+  const nativeRadio = isNativeRadio(tagName, props.type);
+  const disabled = disabledFromProps(props);
+  // When the checked property is programmatically set on the change event, we
+  // need to schedule the element's property update, so the controlled
+  // isChecked state can be taken into account.
+  const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    if (nativeRadio) return;
+    if (isChecked !== undefined) {
+      element.checked = isChecked;
+    }
+    if (name !== undefined) {
+      element.name = name;
+    }
+    if (value !== undefined) {
+      element.value = `${value}`;
+    }
+  }, [propertyUpdated, nativeRadio, isChecked, name, value]);
+
+  const onChange = useEvent((event: ChangeEvent<HTMLType>) => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    // Do not call onChange if the value is the same as the current value. See
+    // https://github.com/ariakit/ariakit/issues/3771
+    if (store?.getState().value === value) return;
+    if (!nativeRadio) {
+      event.currentTarget.checked = true;
+      schedulePropertyUpdate();
+    }
+    onChangeProp?.(event);
+    if (event.defaultPrevented) return;
+    store?.setValue(value);
+  });
+
+  const onClickProp = props.onClick;
+
+  const onClick = useEvent((event: MouseEvent<HTMLType>) => {
+    onClickProp?.(event);
+    if (event.defaultPrevented) return;
+    if (nativeRadio) return;
+    // @ts-expect-error The onChange event expects a ChangeEvent, but here we
+    // need to pass a MouseEvent.
+    onChange(event);
+  });
+
+  const onFocusProp = props.onFocus;
+
+  const onFocus = useEvent((event: FocusEvent<HTMLType>) => {
+    onFocusProp?.(event);
+    if (event.defaultPrevented) return;
+    if (!nativeRadio) return;
+    if (!store) return;
+    const { moves, activeId } = store.getState();
+    if (!moves) return;
+    if (id && activeId !== id) return;
+    onChange(event);
+  });
+
+  props = {
+    role: !nativeRadio ? "radio" : undefined,
+    type: nativeRadio ? "radio" : undefined,
+    "aria-checked": isChecked,
+    ...props,
+    id,
+    ref: useMergeRefs(ref, props.ref),
+    onChange,
+    onClick,
+    onFocus,
+  };
+
+  props = useCompositeItem<TagName>({
+    store,
+    clickOnEnter: !nativeRadio,
+    ...props,
+  });
+
+  return removeUndefinedValues({
+    name: nativeRadio ? name : undefined,
+    value: nativeRadio ? value : undefined,
+    checked: isChecked,
+    ...props,
+  });
+});
+
+/**
+ * Renders a radio button element that's typically wrapped in a
+ * [`RadioGroup`](https://ariakit.com/reference/radio-group) component.
+ * @see https://ariakit.com/components/radio
+ * @example
+ * ```jsx {3-4}
+ * <RadioProvider>
+ *   <RadioGroup>
+ *     <Radio value="Apple" />
+ *     <Radio value="Orange" />
+ *   </RadioGroup>
+ * </RadioProvider>
+ * ```
+ */
+export const Radio = memo(
+  forwardRef(function Radio(props: RadioProps) {
+    const htmlProps = useRadio(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface RadioOptions<
+  T extends ElementType = TagName,
+> extends CompositeItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useRadioStore`](https://ariakit.com/reference/use-radio-store) hook. If
+   * not provided, the closest
+   * [`RadioGroup`](https://ariakit.com/reference/radio-group) or
+   * [`RadioProvider`](https://ariakit.com/reference/radio-provider) components'
+   * context will be used.
+   */
+  store?: RadioStore;
+  /**
+   * The value of the radio button.
+   *
+   * Live examples:
+   * - [FormRadio](https://ariakit.com/examples/form-radio)
+   * - [MenuItemRadio](https://ariakit.com/examples/menu-item-radio)
+   */
+  value: string | number;
+  /**
+   * The native `name` attribute.
+   */
+  name?: string;
+  /**
+   * Determines if the radio button is checked. Using this prop will make the
+   * radio button controlled and override the
+   * [`value`](https://ariakit.com/reference/radio-provider#value) state.
+   */
+  checked?: boolean;
+  /**
+   * Callback function that is called when the radio button state changes.
+   */
+  onChange?: BivariantCallback<(event: ChangeEvent<HTMLType>) => void>;
+}
+
+export type RadioProps<T extends ElementType = TagName> = Props<
+  T,
+  RadioOptions<T>
+>;

package/src/role/role.tsx

@@ -0,0 +1,88 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import type { ElementType, FC } from "react";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+const elements = [
+  "a",
+  "button",
+  "details",
+  "dialog",
+  "div",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "section",
+  "select",
+  "span",
+  "summary",
+  "textarea",
+  "ul",
+  "svg",
+] as const;
+
+type RoleElements = {
+  [K in (typeof elements)[number]]: FC<RoleProps<K>>;
+};
+
+/**
+ * Returns props to create a `Role` component.
+ * @see https://ariakit.com/components/role
+ * @example
+ * ```jsx
+ * const props = useRole();
+ * <Role {...props} />
+ * ```
+ */
+export const useRole = createHook<TagName, RoleOptions>(
+  function useRole(props) {
+    return props;
+  },
+);
+
+/**
+ * Renders an abstract element that supports the `render` prop and a
+ * `wrapElement` prop that can be used to wrap the underlying element with React
+ * Portal, Context or other component types.
+ * @see https://ariakit.com/components/role
+ * @example
+ * ```jsx
+ * <Role render={<div />} />
+ * ```
+ */
+export const Role = forwardRef(function Role(props: RoleProps) {
+  return createElement(TagName, props);
+}) as FC<RoleProps> & RoleElements;
+
+Object.assign(
+  Role,
+  elements.reduce((acc, element) => {
+    acc[element] = forwardRef(function Role(props: RoleProps<typeof element>) {
+      return createElement(element, props);
+    });
+    return acc;
+  }, {} as RoleElements),
+);
+
+export interface RoleOptions<
+  _T extends ElementType = TagName,
+> extends Options {}
+
+export type RoleProps<T extends ElementType = TagName> = Props<
+  T,
+  RoleOptions<T>
+>;

package/src/select/select-arrow.tsx

@@ -0,0 +1,80 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { PopoverDisclosureArrowOptions } from "../popover/popover-disclosure-arrow.tsx";
+import { usePopoverDisclosureArrow } from "../popover/popover-disclosure-arrow.tsx";
+import { useSelectContext } from "./select-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "span" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `SelectArrow` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectArrow({ store });
+ * <Select store={store}>
+ *   {store.value}
+ *   <Role {...props} />
+ * </Select>
+ * <SelectPopover store={store}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+export const useSelectArrow = createHook<TagName, SelectArrowOptions>(
+  function useSelectArrow({ store, ...props }) {
+    const context = useSelectContext();
+    store = store || context;
+    props = usePopoverDisclosureArrow({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders an arrow pointing to the select popover position. It's usually
+ * rendered inside the [`Select`](https://ariakit.com/reference/select)
+ * component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {4}
+ * <SelectProvider>
+ *   <Select>
+ *     {select.value}
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectArrow = forwardRef(function SelectArrow(
+  props: SelectArrowProps,
+) {
+  const htmlProps = useSelectArrow(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SelectArrowOptions<
+  T extends ElementType = TagName,
+> extends PopoverDisclosureArrowOptions<T> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the closest [`Select`](https://ariakit.com/reference/select)
+   * or [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * components' context will be used.
+   */
+  store?: SelectStore;
+}
+
+export type SelectArrowProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectArrowOptions<T>
+>;

package/src/select/select-context.tsx

@@ -0,0 +1,46 @@
+import { createStoreContext } from "@ariakit/react-utils";
+import type { Dispatch, SetStateAction } from "react";
+import { createContext } from "react";
+import {
+  CompositeContextProvider,
+  CompositeScopedContextProvider,
+} from "../composite/composite-context.tsx";
+import {
+  PopoverContextProvider,
+  PopoverScopedContextProvider,
+} from "../popover/popover-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const ctx = createStoreContext<SelectStore>(
+  [PopoverContextProvider, CompositeContextProvider],
+  [PopoverScopedContextProvider, CompositeScopedContextProvider],
+);
+
+/**
+ * Returns the select store from the nearest select container.
+ * @example
+ * function Select() {
+ *   const store = useSelectContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Select must be wrapped in SelectProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export const useSelectContext = ctx.useContext;
+
+export const useSelectScopedContext = ctx.useScopedContext;
+
+export const useSelectProviderContext = ctx.useProviderContext;
+
+export const SelectContextProvider = ctx.ContextProvider;
+
+export const SelectScopedContextProvider = ctx.ScopedContextProvider;
+
+export const SelectItemCheckedContext = createContext(false);
+
+export const SelectHeadingContext = createContext<
+  [string | undefined, Dispatch<SetStateAction<string | undefined>>] | null
+>(null);

package/src/select/select-dismiss.tsx

@@ -0,0 +1,79 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { PopoverDismissOptions } from "../popover/popover-dismiss.tsx";
+import { usePopoverDismiss } from "../popover/popover-dismiss.tsx";
+import { useSelectScopedContext } from "./select-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "button" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `SelectDismiss` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const props = useSelectDismiss();
+ * <Role.button {...props} />
+ * ```
+ */
+export const useSelectDismiss = createHook<TagName, SelectDismissOptions>(
+  function useSelectDismiss({ store, ...props }) {
+    const context = useSelectScopedContext();
+    store = store || context;
+    props = usePopoverDismiss({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders a button that hides a
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover) component
+ * when clicked.
+ *
+ * When this component is rendered within
+ * [`SelectPopover`](https://ariakit.com/reference/select-popover), all
+ * [`SelectItem`](https://ariakit.com/reference/select-item) elements must be
+ * rendered within a [`SelectList`](https://ariakit.com/reference/select-list)
+ * instead of directly within the popover.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {4}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectDismiss />
+ *     <SelectList>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectList>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectDismiss = forwardRef(function SelectDismiss(
+  props: SelectDismissProps,
+) {
+  const htmlProps = useSelectDismiss(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SelectDismissOptions<
+  T extends ElementType = TagName,
+> extends PopoverDismissOptions<T> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook.
+   * If not provided, the closest
+   * [`Select`](https://ariakit.com/reference/select) or
+   * [`SelectProvider`](https://ariakit.com/reference/select-provider)
+   * components' context will be used.
+   */
+  store?: SelectStore;
+}
+
+export type SelectDismissProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectDismissOptions<T>
+>;

package/src/select/select-group-label.tsx

@@ -0,0 +1,78 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { CompositeGroupLabelOptions } from "../composite/composite-group-label.tsx";
+import { useCompositeGroupLabel } from "../composite/composite-group-label.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `SelectGroupLabel` component. This hook must be
+ * used in a component that's wrapped with `SelectGroup` so the
+ * `aria-labelledby` prop is properly set on the select group element.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * // This component must be wrapped with SelectGroup
+ * const props = useSelectGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export const useSelectGroupLabel = createHook<TagName, SelectGroupLabelOptions>(
+  function useSelectGroupLabel(props) {
+    props = useCompositeGroupLabel(props);
+    return props;
+  },
+);
+
+/**
+ * Renders a label in a select group. This component must be wrapped with
+ * [`SelectGroup`](https://ariakit.com/reference/select-group) so the
+ * `aria-labelledby` prop is properly set on the select group element.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {5,10}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Fruits</SelectGroupLabel>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectGroup>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Meat</SelectGroupLabel>
+ *       <SelectItem value="Beef" />
+ *       <SelectItem value="Chicken" />
+ *     </SelectGroup>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectGroupLabel = forwardRef(function SelectGroupLabel(
+  props: SelectGroupLabelProps,
+) {
+  const htmlProps = useSelectGroupLabel(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SelectGroupLabelOptions<
+  T extends ElementType = TagName,
+> extends CompositeGroupLabelOptions<T> {
+  /**
+   * Object returned by the
+   * [`useSelectStore`](https://ariakit.com/reference/use-select-store) hook. If
+   * not provided, the parent
+   * [`SelectList`](https://ariakit.com/reference/select-list) or
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components'
+   * context will be used.
+   */
+  store?: SelectStore;
+}
+
+export type SelectGroupLabelProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectGroupLabelOptions<T>
+>;