@ariakit/react-components 0.1.0

package/src/select/select-row.tsx

@@ -0,0 +1,97 @@
+import { useStoreState } from "@ariakit/react-store";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { getPopupRole, invariant } from "@ariakit/utils";
+import type { ElementType } from "react";
+import type { CompositeRowOptions } from "../composite/composite-row.tsx";
+import { useCompositeRow } from "../composite/composite-row.tsx";
+import { useSelectContext } from "./select-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `SelectRow` component.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectRow({ store });
+ * <SelectPopover store={store}>
+ *   <Role {...props}>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </Role>
+ * </SelectPopover>
+ * ```
+ */
+export const useSelectRow = createHook<TagName, SelectRowOptions>(
+  function useSelectRow({ store, ...props }) {
+    const context = useSelectContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "SelectRow must be wrapped in a SelectList or SelectPopover component",
+    );
+
+    const listElement = useStoreState(store, "listElement");
+    const popupRole = getPopupRole(listElement);
+    const role = popupRole === "grid" ? "row" : "presentation";
+
+    props = { role, ...props };
+
+    props = useCompositeRow({ store, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a select row that allows two-dimensional arrow key navigation.
+ * [`SelectItem`](https://ariakit.com/reference/select-item) elements wrapped
+ * within this component will automatically receive a
+ * [`rowId`](https://ariakit.com/reference/select-item#rowid) prop.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {4-11}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectRow>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectRow>
+ *     <SelectRow>
+ *       <SelectItem value="Banana" />
+ *       <SelectItem value="Grape" />
+ *     </SelectRow>
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectRow = forwardRef(function SelectRow(props: SelectRowProps) {
+  const htmlProps = useSelectRow(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SelectRowOptions<
+  T extends ElementType = TagName,
+> extends CompositeRowOptions<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 SelectRowProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectRowOptions<T>
+>;

package/src/select/select-separator.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 { CompositeSeparatorOptions } from "../composite/composite-separator.tsx";
+import { useCompositeSeparator } from "../composite/composite-separator.tsx";
+import { useSelectContext } from "./select-context.tsx";
+import type { SelectStore } from "./select-store.ts";
+
+const TagName = "hr" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `SelectSeparator` component.
+ * @deprecated Use `useSelectGroup` with CSS borders instead.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const store = useSelectStore();
+ * const props = useSelectSeparator({ store });
+ * <SelectPopover store={store}>
+ *   <SelectItem value="Item 1" />
+ *   <Role {...props} />
+ *   <SelectItem value="Item 2" />
+ *   <SelectItem value="Item 3" />
+ * </SelectPopover>
+ * ```
+ */
+export const useSelectSeparator = createHook<TagName, SelectSeparatorOptions>(
+  function useSelectSeparator({ store, ...props }) {
+    const context = useSelectContext();
+    store = store || context;
+    props = useCompositeSeparator({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders a divider between
+ * [`SelectItem`](https://ariakit.com/reference/select-item) elements.
+ * @deprecated Use [`SelectGroup`](https://ariakit.com/reference/select-group)
+ * with CSS borders instead.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {5}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Item 1" />
+ *     <SelectSeparator />
+ *     <SelectItem value="Item 2" />
+ *     <SelectItem value="Item 3" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export const SelectSeparator = forwardRef(function SelectSeparator(
+  props: SelectSeparatorProps,
+) {
+  const htmlProps = useSelectSeparator(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface SelectSeparatorOptions<
+  T extends ElementType = TagName,
+> extends CompositeSeparatorOptions<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 SelectSeparatorProps<T extends ElementType = TagName> = Props<
+  T,
+  SelectSeparatorOptions<T>
+>;

package/src/select/select-store.ts

@@ -0,0 +1,139 @@
+import * as Core from "@ariakit/components/select/select-store";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import type { Store } from "@ariakit/react-store";
+import { useUpdateEffect } from "@ariakit/react-utils";
+import type { BivariantCallback, PickRequired } from "@ariakit/utils";
+import { useComboboxProviderContext } from "../combobox/combobox-context.tsx";
+import type { ComboboxStore } from "../combobox/combobox-store.ts";
+import type {
+  CompositeStoreFunctions,
+  CompositeStoreOptions,
+  CompositeStoreState,
+} from "../composite/composite-store.ts";
+import {
+  useCompositeStoreOptions,
+  useCompositeStoreProps,
+} from "../composite/composite-store.ts";
+import type {
+  PopoverStoreFunctions,
+  PopoverStoreOptions,
+  PopoverStoreState,
+} from "../popover/popover-store.ts";
+import { usePopoverStoreProps } from "../popover/popover-store.ts";
+
+export function useSelectStoreOptions<T extends Core.SelectStoreOptions>(
+  props: T,
+) {
+  const combobox = useComboboxProviderContext();
+  props = {
+    ...props,
+    combobox: props.combobox !== undefined ? props.combobox : combobox,
+  };
+  return useCompositeStoreOptions(props);
+}
+
+export function useSelectStoreProps<T extends Core.SelectStore>(
+  store: T,
+  update: () => void,
+  props: SelectStoreProps,
+) {
+  useUpdateEffect(update, [props.combobox]);
+  useStoreProps(store, props, "value", "setValue");
+  useStoreProps(store, props, "setValueOnMove");
+  return Object.assign(
+    usePopoverStoreProps(
+      useCompositeStoreProps(store, update, props),
+      update,
+      props,
+    ),
+    { combobox: props.combobox },
+  );
+}
+
+/**
+ * Creates a select store to control the state of
+ * [Select](https://ariakit.com/components/select) components.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx
+ * const select = useSelectStore({ defaultValue: "Apple" });
+ *
+ * <Select store={select} />
+ * <SelectPopover store={select}>
+ *   <SelectItem value="Apple" />
+ *   <SelectItem value="Orange" />
+ * </SelectPopover>
+ * ```
+ */
+export function useSelectStore<T extends SelectStoreValue = SelectStoreValue>(
+  props: PickRequired<SelectStoreProps<T>, "value" | "defaultValue">,
+): SelectStore<T>;
+
+export function useSelectStore(props?: SelectStoreProps): SelectStore;
+
+export function useSelectStore(props: SelectStoreProps = {}): SelectStore {
+  props = useSelectStoreOptions(props);
+  const [store, update] = useStore(Core.createSelectStore, props);
+  return useSelectStoreProps(store, update, props);
+}
+
+export type SelectStoreValue = Core.SelectStoreValue;
+
+export interface SelectStoreItem extends Core.SelectStoreItem {}
+
+export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
+  extends
+    Core.SelectStoreState<T>,
+    CompositeStoreState<SelectStoreItem>,
+    PopoverStoreState {}
+
+export interface SelectStoreFunctions<
+  T extends SelectStoreValue = SelectStoreValue,
+>
+  extends
+    Pick<SelectStoreOptions<T>, "combobox" | "disclosure">,
+    Omit<Core.SelectStoreFunctions<T>, "combobox" | "disclosure">,
+    CompositeStoreFunctions<SelectStoreItem>,
+    PopoverStoreFunctions {}
+
+export interface SelectStoreOptions<
+  T extends SelectStoreValue = SelectStoreValue,
+>
+  extends
+    Omit<Core.SelectStoreOptions<T>, "combobox" | "disclosure">,
+    CompositeStoreOptions<SelectStoreItem>,
+    PopoverStoreOptions {
+  /**
+   * Function that will be called when the
+   * [`value`](https://ariakit.com/reference/select-provider#value) state
+   * changes.
+   *
+   * Live examples:
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * - [Select Grid](https://ariakit.com/examples/select-grid)
+   * - [Select with custom
+   *   items](https://ariakit.com/examples/select-item-custom)
+   * - [Multi-Select](https://ariakit.com/examples/select-multiple)
+   * - [Toolbar with Select](https://ariakit.com/examples/toolbar-select)
+   * - [Select with Next.js App
+   *   Router](https://ariakit.com/examples/select-next-router)
+   */
+  setValue?: BivariantCallback<(value: SelectStoreState<T>["value"]) => void>;
+  /**
+   * A reference to a [combobox
+   * store](https://ariakit.com/reference/use-combobox-store). It's
+   * automatically set when composing [Select with
+   * Combobox](https://ariakit.com/examples/select-combobox).
+   */
+  combobox?: ComboboxStore | null;
+}
+
+export interface SelectStoreProps<T extends SelectStoreValue = SelectStoreValue>
+  extends
+    SelectStoreOptions<T>,
+    Omit<Core.SelectStoreProps<T>, "combobox" | "disclosure"> {}
+
+export interface SelectStore<T extends SelectStoreValue = SelectStoreValue>
+  extends
+    SelectStoreFunctions<T>,
+    Omit<Store<Core.SelectStore<T>>, "combobox" | "disclosure"> {}

package/src/select/select-value.tsx

@@ -0,0 +1,108 @@
+import { useStoreState } from "@ariakit/react-store";
+import type { PickRequired, ToPrimitive } from "@ariakit/utils";
+import type { ReactNode } from "react";
+import { useSelectContext } from "./select-context.tsx";
+import type { SelectStore, SelectStoreValue } from "./select-store.ts";
+
+type Value = SelectStoreValue;
+
+/**
+ * Renders the current
+ * [`value`](https://ariakit.com/reference/use-select-store#value) state in the
+ * [select store](https://ariakit.com/reference/use-select-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props. It can optionally accept a
+ * [`fallback`](https://ariakit.com/reference/select-value#fallback) prop to use
+ * as a default value if the store's
+ * [`value`](https://ariakit.com/reference/use-select-store#value) is
+ * `undefined`.
+ *
+ * Additionally, it takes a
+ * [`children`](https://ariakit.com/reference/select-value#children) function
+ * that gets called with the current value as an argument. This is handy for
+ * rendering the value in a custom way.
+ * @see https://ariakit.com/components/select
+ * @example
+ * ```jsx {3}
+ * <SelectProvider>
+ *   <Select>
+ *     <SelectValue fallback="Select a value" />
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ * @example
+ * ```jsx {1-3,7}
+ * function renderValue(value) {
+ *   // render custom JSX
+ * }
+ *
+ * <SelectProvider>
+ *   <Select>
+ *     <SelectValue>{renderValue}</SelectValue>
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+
+export function SelectValue<T extends Value = Value>(
+  props: PickRequired<SelectValueProps<T>, "fallback">,
+): T;
+
+export function SelectValue(props?: SelectValueProps): Value;
+
+export function SelectValue({
+  store,
+  fallback,
+  children,
+}: SelectValueProps = {}) {
+  const context = useSelectContext();
+  store = store || context;
+
+  const value = useStoreState(store, (state) => {
+    if (!state?.value.length) return fallback;
+    return state.value;
+  });
+
+  if (children) {
+    return children(value || "");
+  }
+
+  return value;
+}
+
+export interface SelectValueProps<T extends Value = Value> {
+  /**
+   * 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<T>;
+  /**
+   * The value to use as a default if the store's
+   * [`value`](https://ariakit.com/reference/use-select-store#value) is
+   * `undefined`.
+   * @default ""
+   */
+  fallback?: T;
+  /**
+   * A function that gets called with the current value as an argument. This is
+   * handy for rendering the value in a custom way.
+   */
+  children?: (value: ToPrimitive<T>) => ReactNode;
+}