@ariakit/react-components 0.1.0

package/src/combobox/combobox-group.tsx

@@ -0,0 +1,100 @@
+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 { CompositeGroupOptions } from "../composite/composite-group.tsx";
+import { useCompositeGroup } from "../composite/composite-group.tsx";
+import { useComboboxScopedContext } from "./combobox-context.tsx";
+import type { ComboboxStore } from "./combobox-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `ComboboxGroup` component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxGroup({ store });
+ * <Combobox store={store} />
+ * <ComboboxPopover store={store}>
+ *   <Role {...props}>
+ *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *   </Role>
+ * </ComboboxPopover>
+ * ```
+ */
+export const useComboboxGroup = createHook<TagName, ComboboxGroupOptions>(
+  function useComboboxGroup({ store, ...props }) {
+    const context = useComboboxScopedContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component",
+    );
+
+    const contentElement = useStoreState(store, "contentElement");
+    const popupRole = getPopupRole(contentElement);
+
+    if (popupRole === "grid") {
+      props = { role: "rowgroup", ...props };
+    }
+
+    props = useCompositeGroup({ store, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a group for
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.
+ * Optionally, a
+ * [`ComboboxGroupLabel`](https://ariakit.com/reference/combobox-group-label)
+ * can be rendered as a child to provide a label for the group.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {4-8}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxGroup>
+ *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+ *       <ComboboxItem value="Apple" />
+ *       <ComboboxItem value="Banana" />
+ *     </ComboboxGroup>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export const ComboboxGroup = forwardRef(function ComboboxGroup(
+  props: ComboboxGroupProps,
+) {
+  const htmlProps = useComboboxGroup(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface ComboboxGroupOptions<
+  T extends ElementType = TagName,
+> extends CompositeGroupOptions<T> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components' context will be used.
+   */
+  store?: ComboboxStore;
+}
+
+export type ComboboxGroupProps<T extends ElementType = TagName> = Props<
+  T,
+  ComboboxGroupOptions<T>
+>;

package/src/combobox/combobox-item-check.tsx

@@ -0,0 +1,83 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import { useContext } from "react";
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.tsx";
+import { useCheckboxCheck } from "../checkbox/checkbox-check.tsx";
+import { ComboboxItemCheckedContext } from "./combobox-context.tsx";
+import type { ComboboxStore } from "./combobox-store.ts";
+
+const TagName = "span" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `ComboboxItemCheck` component. This hook must be
+ * used in a component that's wrapped with `ComboboxItem` or the `checked` prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const props = useComboboxItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export const useComboboxItemCheck = createHook<
+  TagName,
+  ComboboxItemCheckOptions
+>(function useComboboxItemCheck({ store, checked, ...props }) {
+  const context = useContext(ComboboxItemCheckedContext);
+  checked = checked ?? context;
+  props = useCheckboxCheck({ ...props, checked });
+  return props;
+});
+
+/**
+ * Renders a checkmark icon when the
+ * [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop
+ * is `true`. The icon can be overridden by providing a different one as
+ * children.
+ *
+ * When rendered inside a
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component, the
+ * [`checked`](https://ariakit.com/reference/combobox-item-check#checked) prop
+ * is automatically derived from the context.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {5,9}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemCheck />
+ *       Apple
+ *     </ComboboxItem>
+ *     <ComboboxItem value="Orange">
+ *       <ComboboxItemCheck />
+ *       Orange
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export const ComboboxItemCheck = forwardRef(function ComboboxItemCheck(
+  props: ComboboxItemCheckProps,
+) {
+  const htmlProps = useComboboxItemCheck(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface ComboboxItemCheckOptions<
+  T extends ElementType = TagName,
+> extends CheckboxCheckOptions<T> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook.
+   */
+  store?: ComboboxStore;
+}
+
+export type ComboboxItemCheckProps<T extends ElementType = TagName> = Props<
+  T,
+  ComboboxItemCheckOptions<T>
+>;

package/src/combobox/combobox-item-offscreen.tsx

@@ -0,0 +1,87 @@
+import { useMergeRefs, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import { useContext } from "react";
+import type { CompositeItemOptions } from "../composite/composite-item-offscreen.tsx";
+import { useCompositeItemOffscreen } from "../composite/composite-item-offscreen.tsx";
+import { Role } from "../role/role.tsx";
+import {
+  ComboboxListRoleContext,
+  useComboboxScopedContext,
+} from "./combobox-context.tsx";
+import * as Base from "./combobox-item.tsx";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+const itemRoleByPopupRole = {
+  menu: "menuitem",
+  listbox: "option",
+  tree: "treeitem",
+};
+
+function getItemRole(popupRole?: string) {
+  const key = popupRole as keyof typeof itemRoleByPopupRole;
+  return itemRoleByPopupRole[key] ?? "option";
+}
+
+export function useComboboxItemOffscreen<
+  T extends ElementType,
+  // oxlint-disable-next-line no-unnecessary-type-parameters
+  P extends ComboboxItemProps<T>,
+>({ store, value, ...props }: P) {
+  const context = useComboboxScopedContext();
+  store = store || context;
+
+  const offscreenProps = useCompositeItemOffscreen({ store, value, ...props });
+  const popupRole = useContext(ComboboxListRoleContext);
+
+  if (!offscreenProps.active) {
+    return {
+      ...offscreenProps,
+      role: getItemRole(popupRole),
+    };
+  }
+
+  return offscreenProps;
+}
+
+export const ComboboxItem = forwardRef(function ComboboxItem({
+  offscreenMode,
+  offscreenRoot,
+  ...props
+}: ComboboxItemProps) {
+  const { active, ref, ...rest } = useComboboxItemOffscreen({
+    offscreenMode,
+    offscreenRoot,
+    ...props,
+  });
+  const allProps = { ...rest, ...props, ref: useMergeRefs(ref, props.ref) };
+  if (active) {
+    return <Base.ComboboxItem {...allProps} />;
+  }
+  // Remove ComboboxItem props
+  const {
+    store,
+    value,
+    hideOnClick,
+    setValueOnClick,
+    selectValueOnClick,
+    resetValueOnSelect,
+    focusOnHover,
+    blurOnHoverEnd,
+    moveOnKeyPress,
+    getItem,
+    ...htmlProps
+  } = allProps;
+  const Component = Role[TagName];
+  return <Component {...htmlProps} />;
+});
+
+export interface ComboboxItemOptions<T extends ElementType = TagName>
+  extends Base.ComboboxItemOptions<T>, Omit<CompositeItemOptions<T>, "store"> {}
+
+export type ComboboxItemProps<T extends ElementType = TagName> = Props<
+  T,
+  ComboboxItemOptions<T>
+>;

package/src/combobox/combobox-item-value.tsx

@@ -0,0 +1,231 @@
+import { useStoreState } from "@ariakit/react-store";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Options, Props } from "@ariakit/react-utils";
+import {
+  toArray,
+  normalizeString,
+  removeUndefinedValues,
+} from "@ariakit/utils";
+import type { ElementType, ReactElement } from "react";
+import { useContext, useMemo } from "react";
+import {
+  ComboboxItemValueContext,
+  useComboboxScopedContext,
+} from "./combobox-context.tsx";
+import type { ComboboxStore } from "./combobox-store.ts";
+
+const TagName = "span" satisfies ElementType;
+type TagName = typeof TagName;
+
+function normalizeValue(value: string) {
+  return normalizeString(value).toLowerCase();
+}
+
+function getOffsets(string: string, values: Iterable<string>) {
+  const offsets = [] as Array<[number, number]>;
+  for (const value of values) {
+    let pos = 0;
+    const length = value.length;
+    while (string.indexOf(value, pos) !== -1) {
+      const index = string.indexOf(value, pos);
+      if (index !== -1) {
+        offsets.push([index, length]);
+      }
+      pos = index + 1;
+    }
+  }
+  return offsets;
+}
+
+function filterOverlappingOffsets(offsets: Array<[number, number]>) {
+  return offsets.filter(([offset, length], i, arr) => {
+    return !arr.some(
+      ([o, l], j) => j !== i && o <= offset && o + l >= offset + length,
+    );
+  });
+}
+
+function sortOffsets(offsets: Array<[number, number]>) {
+  return offsets.sort(([a], [b]) => a - b);
+}
+
+function splitValue(itemValue?: string | null, userValue?: string | string[]) {
+  if (!itemValue) return itemValue;
+  if (!userValue) return itemValue;
+  const userValues = toArray(userValue).filter(Boolean).map(normalizeValue);
+  const parts: ReactElement[] = [];
+
+  const span = (value: string, autocomplete = false) => (
+    <span
+      key={parts.length}
+      data-autocomplete-value={autocomplete ? "" : undefined}
+      data-user-value={autocomplete ? undefined : ""}
+    >
+      {value}
+    </span>
+  );
+
+  const offsets = sortOffsets(
+    filterOverlappingOffsets(
+      // Convert userValues into a set to avoid duplicates
+      getOffsets(normalizeValue(itemValue), new Set(userValues)),
+    ),
+  );
+
+  const firstEntry = offsets[0];
+
+  if (!firstEntry) {
+    parts.push(span(itemValue, true));
+    return parts;
+  }
+
+  const [firstOffset] = firstEntry;
+
+  const values = [
+    itemValue.slice(0, firstOffset),
+    ...offsets.flatMap(([offset, length], i) => {
+      const value = itemValue.slice(offset, offset + length);
+      const nextOffset = offsets[i + 1]?.[0];
+      const nextValue = itemValue.slice(offset + length, nextOffset);
+      return [value, nextValue];
+    }),
+  ];
+
+  values.forEach((value, i) => {
+    if (!value) return;
+    parts.push(span(value, i % 2 === 0));
+  });
+
+  return parts;
+}
+
+/**
+ * Returns props to create a `ComboboxItemValue` component that displays a value
+ * element inside a combobox item. The value will be split into span elements
+ * and returned as the children prop. The portions of the value that correspond
+ * to the store value will have a `data-user-value` attribute. The other
+ * portions will have a `data-autocomplete-value` attribute.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore({ value: "p" });
+ * const props = useComboboxItemValue({ store, value: "Apple" });
+ * <Role {...props} />
+ * // This will result in the following DOM:
+ * <span>
+ *   <span data-autocomplete-value>A</span>
+ *   <span data-user-value>p</span>
+ *   <span data-user-value>p</span>
+ *   <span data-autocomplete-value>le</span>
+ * </span>
+ * ```
+ */
+export const useComboboxItemValue = createHook<
+  TagName,
+  ComboboxItemValueOptions
+>(function useComboboxItemValue({ store, value, userValue, ...props }) {
+  const context = useComboboxScopedContext();
+  store = store || context;
+
+  const itemContext = useContext(ComboboxItemValueContext);
+  const itemValue = value ?? itemContext;
+
+  const inputValue = useStoreState(store, (state) => userValue ?? state?.value);
+
+  const children = useMemo(() => {
+    if (!itemValue) return;
+    if (!inputValue) return itemValue;
+    return splitValue(itemValue, inputValue);
+  }, [itemValue, inputValue]);
+
+  props = {
+    children,
+    ...props,
+  };
+
+  return removeUndefinedValues(props);
+});
+
+/**
+ * Renders a `span` element with the combobox item value as children. The value
+ * is split into span elements. Portions of the value matching the user input
+ * will have a
+ * [`data-user-value`](https://ariakit.com/guide/styling#data-user-value)
+ * attribute, while the rest will have a
+ * [`data-autocomplete-value`](https://ariakit.com/guide/styling#data-autocomplete-value)
+ * attribute.
+ *
+ * The item value is automatically set to the value of the closest
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component's
+ * [`value`](https://ariakit.com/reference/combobox-item#value) prop. The user
+ * input value is automatically set to the combobox store's
+ * [`value`](https://ariakit.com/reference/use-combobox-store#value) state. Both
+ * values can be overridden by providing the
+ * [`value`](https://ariakit.com/reference/combobox-item-value#value) and
+ * [`userValue`](https://ariakit.com/reference/combobox-item-value#uservalue)
+ * props, respectively.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {5} "value"
+ * <ComboboxProvider value="p">
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemValue />
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ *
+ * // The Apple item will have a value element that looks like this:
+ * <span>
+ *   <span data-autocomplete-value>A</span>
+ *   <span data-user-value>p</span>
+ *   <span data-user-value>p</span>
+ *   <span data-autocomplete-value>le</span>
+ * </span>
+ * ```
+ */
+export const ComboboxItemValue = forwardRef(function ComboboxItemValue(
+  props: ComboboxItemValueProps,
+) {
+  const htmlProps = useComboboxItemValue(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface ComboboxItemValueOptions<
+  _T extends ElementType = TagName,
+> extends Options {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components' context will be used.
+   */
+  store?: ComboboxStore;
+  /**
+   * The current combobox item value. If not provided, the parent
+   * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) component's
+   * [`value`](https://ariakit.com/reference/combobox-item#value) prop will be
+   * used.
+   *
+   * This is the value rendered by the component. It can be customized to
+   * display different children.
+   */
+  value?: string;
+  /**
+   * The current user input value. If not provided, the combobox store's
+   * [`value`](https://ariakit.com/reference/use-combobox-store#value) state
+   * will be used.
+   *
+   * This is the value used to highlight the matching portions of the item
+   * value. It can be customized to highlight different portions.
+   */
+  userValue?: string | string[];
+}
+
+export type ComboboxItemValueProps<T extends ElementType = TagName> = Props<
+  T,
+  ComboboxItemValueOptions<T>
+>;