@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

package/dist/components/combobox-field/combobox.d.ts

@@ -0,0 +1,105 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { type ComponentProps, type ReactNode, type Ref } from "react";
+import { Field, type FieldState } from "../field/index.ts";
+export type ComboboxRootProps<TItem, TMultiple extends boolean | undefined = false> = Omit<BaseCombobox.Root.Props<TItem, TMultiple>, "autoHighlight"> & Readonly<{
+    /** `"always"` highlights the first item whenever the list changes. @default "always" */
+    autoHighlight?: boolean | "always";
+}>;
+declare const ComboboxRoot: <TItem, TMultiple extends boolean | undefined = false>({ autoHighlight, ...props }: ComboboxRootProps<TItem, TMultiple>) => ReactNode;
+export type ComboboxControlProps = BaseCombobox.InputGroup.Props & Readonly<{
+    /** The control element, which the positioner takes as its `anchor`. */
+    ref?: Ref<HTMLDivElement>;
+    /** The states projected onto the control as `data-*` attributes. */
+    state?: FieldState;
+    /**
+     * The tags, beside the trigger. They show the selection, so the
+     * trigger's own value is read but not shown.
+     */
+    tags?: ReactNode;
+}>;
+declare const ComboboxControl: ({ className, children, tags, state, ...props }: ComboboxControlProps) => ReactNode;
+export type ComboboxTagsProps<TItem> = Readonly<{
+    /** Names the group of tags, such as "Selected statuses". */
+    label: string;
+    items: readonly TItem[];
+    /** A stable identity per item. */
+    itemKey: (item: TItem) => string;
+    /** An item as plain text, which its tag is read as. */
+    itemLabel: (item: TItem) => string;
+    /** The remove control's own name, which the tag's name completes, such as "Remove". */
+    removeLabel: string;
+    /** The remove control's tooltip for an item, such as "Remove Jan Jansen". */
+    removeHint: (item: TItem) => string;
+    /** Renders one tag's content. */
+    children: (item: TItem) => ReactNode;
+    /** Called with the items left after a removal. */
+    onRemove: (remaining: readonly TItem[]) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+}>;
+declare const ComboboxTags: <TItem>({ label, items, itemKey, itemLabel, removeLabel, removeHint, children, onRemove, disabled, readOnly, }: ComboboxTagsProps<TItem>) => ReactNode;
+declare const ComboboxPositioner: ({ className, sideOffset, ...props }: BaseCombobox.Positioner.Props) => ReactNode;
+declare const ComboboxPopup: ({ className, ...props }: BaseCombobox.Popup.Props) => ReactNode;
+export type ComboboxSearchProps = Omit<BaseCombobox.Input.Props, "aria-label" | "aria-labelledby"> & Readonly<{
+    /** The search box's accessible name. */
+    "aria-label": string;
+}>;
+/**
+ * The search box inside the popup. It names itself, clearing the field label
+ * base-ui hands every labelable control under a field, which names the
+ * field's own control.
+ */
+declare const ComboboxSearch: ({ className, ...props }: ComboboxSearchProps) => ReactNode;
+export type ComboboxListProps = BaseCombobox.List.Props & Readonly<{
+    /** The scroll container, which `useInfiniteScroll` watches. */
+    ref?: Ref<HTMLDivElement>;
+}>;
+declare const ComboboxList: ({ className, ...props }: ComboboxListProps) => ReactNode;
+export type ComboboxOptionProps = BaseCombobox.Item.Props & Readonly<{
+    /** Draws a checkbox rather than a tick, for a multi-value list. */
+    multiple?: boolean;
+}>;
+declare const ComboboxOption: ({ className, children, multiple, ...props }: ComboboxOptionProps) => ReactNode;
+declare const ComboboxEmpty: ({ className, ...props }: BaseCombobox.Empty.Props) => ReactNode;
+declare const ComboboxStatus: ({ className, ...props }: BaseCombobox.Status.Props) => ReactNode;
+declare const ComboboxStatusArea: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+/** The parts of a combobox. */
+export type ComboboxParts = Omit<typeof BaseCombobox, "Root" | "Positioner" | "Popup" | "Input" | "List" | "Empty" | "Status"> & Readonly<{
+    Root: typeof ComboboxRoot;
+    Control: typeof ComboboxControl;
+    Tags: typeof ComboboxTags;
+    Positioner: typeof ComboboxPositioner;
+    Popup: typeof ComboboxPopup;
+    Search: typeof ComboboxSearch;
+    List: typeof ComboboxList;
+    Option: typeof ComboboxOption;
+    Empty: typeof ComboboxEmpty;
+    Status: typeof ComboboxStatus;
+    StatusArea: typeof ComboboxStatusArea;
+    Pending: typeof Field.Pending;
+}>;
+/**
+ * The styled parts of a base-ui Combobox: a filterable select whose control
+ * matches `Select`'s trigger and whose popup is the shared popup surface. Every
+ * unstyled base-ui part stays reachable. For the ordinary case, use
+ * `ComboboxField`. The positioner takes the control as its `anchor`.
+ *
+ * @example
+ * <Combobox.Root items={statuses}>
+ * 	<Combobox.Control ref={anchorRef}>
+ * 		<Combobox.Value>{(status: string | null) => status}</Combobox.Value>
+ * 	</Combobox.Control>
+ * 	<Combobox.Portal>
+ * 		<Combobox.Positioner anchor={anchorRef}>
+ * 			<Combobox.Popup>
+ * 				<Combobox.Search aria-label="Search" />
+ * 				<Combobox.List>
+ * 					{(status: string) => <Combobox.Option key={status} value={status}>{status}</Combobox.Option>}
+ * 				</Combobox.List>
+ * 			</Combobox.Popup>
+ * 		</Combobox.Positioner>
+ * 	</Combobox.Portal>
+ * </Combobox.Root>
+ */
+export declare const Combobox: ComboboxParts;
+export {};