raft-ui/dist/wip.d.mts

React UI components for Raft.

import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
import { Combobox } from "@base-ui/react/combobox";
//#region src/components/combobox-select/combobox-select.types.d.ts
type ComboboxSelectValue = string | number;
interface ComboboxSelectOption {
  value: ComboboxSelectValue;
  label: string;
  disabled?: boolean;
}
interface ComboboxSelectGroup<Option = ComboboxSelectOption> {
  type: "group";
  key: string | number;
  label: ReactNode;
  children: readonly Option[];
}
type ComboboxSelectSelection<Multiple extends boolean | undefined> = Multiple extends true ? ComboboxSelectValue[] : ComboboxSelectValue | null;
interface ComboboxSelectMessages {
  clear: string;
  toggle: string;
  selected: string;
  chipDescription: string;
  inputDescription: string;
  remove: (label: string) => string;
}
type RootProps = Combobox.Root.Props<unknown, boolean>;
type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false> = Pick<RootProps, "name" | "form" | "required" | "disabled" | "readOnly" | "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "autoHighlight" | "autoComplete" | "inputValue" | "defaultInputValue" | "onInputValueChange"> & Pick<ComponentPropsWithRef<"input">, "id" | "ref" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
  options: readonly (Option | ComboboxSelectGroup<Option>)[];
  multiple?: Multiple;
  value?: ComboboxSelectSelection<Multiple>;
  defaultValue?: ComboboxSelectSelection<Multiple>;
  onValueChange?: (value: ComboboxSelectSelection<Multiple>, options: Multiple extends true ? (Option | undefined)[] : Option | undefined | null, details: Combobox.Root.ChangeEventDetails) => void;
  labelField?: keyof Option;
  valueField?: keyof Option;
  disabledField?: keyof Option;
  /** Supplies labels for values that have not been loaded yet. */
  fallbackOption?: (value: ComboboxSelectValue) => Option;
  filterable?: boolean;
  filter?: false | ((query: string, option: Option) => boolean);
  /** Display the provided results without local filtering. Requests belong to the caller. */
  remote?: boolean;
  onSearch?: (query: string) => void;
  loading?: boolean;
  create?: boolean;
  /** Alias for create, useful when matching Select libraries that call this mode creatable. */
  creatable?: boolean;
  /** Called only when the creation row is selected. Return null to reject creation. */
  onCreate?: (query: string) => Option | null;
  clearable?: boolean;
  showArrow?: boolean;
  clearFilterAfterSelect?: boolean;
  onClear?: () => void;
  /** Collapse chips when the control is unfocused; all remain reachable when focused. */
  maxTagCount?: number;
  size?: "sm" | "md" | "lg";
  status?: "error" | "warning";
  placeholder?: string;
  renderLabel?: (option: Option) => ReactNode;
  /** Customizes option content while preserving the Base UI option element. */
  renderOption?: (option: Option, info: {
    selected: boolean;
  }) => ReactNode;
  /** Customizes chip content while preserving keyboard navigation and removal. */
  renderTag?: (option: Option) => ReactNode;
  renderCreateLabel?: (query: string) => ReactNode;
  emptyContent?: ReactNode;
  loadingContent?: ReactNode;
  messages?: Partial<ComboboxSelectMessages>;
  inputProps?: Omit<Combobox.Input.Props, "value" | "defaultValue" | "size" | "children">;
  portalProps?: Combobox.Portal.Props;
  positionerProps?: Omit<Combobox.Positioner.Props, "children">;
  popupProps?: Omit<Combobox.Popup.Props, "children">;
  className?: string;
  style?: CSSProperties;
};
//#endregion
//#region src/components/combobox-select/combobox-select.d.ts
/** Options-driven composition. The stable compound Combobox API stays unchanged. */
declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
//#endregion
export { ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue };