Value Selection Dialog

ValueSelectionDialogPlugin

Dependencies

• Auto-installed DialogPlugin: Uses the shared Pro dialog runtime for searchable value selection.

class ValueSelectionDialogPlugin {
  open<T = ValueSelectionDialogValue>(
    options: ValueSelectionDialogOpenOptions<T>,
  ): void;

  close(): void;
}

---

createValueSelectionDialogEditor

export function createValueSelectionDialogEditor<T>({
  document,
  localeText,
  initialSelection,
  getKey,
  getLabel,
  onSearch,
}: ValueSelectionDialogEditorOptions<T>): ValueSelectionDialogEditor<T>;

---

formatValueSelectionText

export function formatValueSelectionText(
  template: string,
  values: Record<string, string | number>,
): string;

---

ValueSelectionDialogEditor

interface ValueSelectionDialogEditor {
  readonly element: HTMLElement;
  readonly searchInput: HTMLInputElement;
  setValues(values: readonly T[], totalCount: number): void;
  setLoading(): void;
  setError(message: string): void;
  getSelection(): ValueSelectionDialogSelection<T>
}

---

ValueSelectionDialogValue

export type ValueSelectionDialogValue =
  string | number | boolean | null;

---

ValueSelectionDialogSelection

interface ValueSelectionDialogSelection {
  readonly mode: 'include' | 'exclude';
  readonly values: readonly T[]
}

---

ValueSelectionDialogPage

interface ValueSelectionDialogPage {
  readonly values: readonly T[];
  readonly totalCount: number
}

---

ValueSelectionDialogLoadContext

interface ValueSelectionDialogLoadContext {
  readonly search: string;
  readonly signal: AbortSignal
}

---

ValueSelectionDialogLocaleText

interface ValueSelectionDialogLocaleText {
  readonly description: string;
  readonly searchPlaceholder: string;
  readonly selectAllVisible: string;
  readonly valuesLabel: string;
  readonly resultCount: string;
  readonly selectedCount: string;
  readonly loading: string;
  readonly empty: string;
  readonly loadError: string;
  readonly clear: string;
  readonly cancel: string;
  readonly apply: string
}

---

ValueSelectionDialogOpenOptions

interface ValueSelectionDialogOpenOptions {
  readonly title: string;
  readonly closeLabel: string;
  readonly localeText: ValueSelectionDialogLocaleText;
  readonly initialSelection: ValueSelectionDialogSelection<T>;
  readonly loadValues: (
      context: ValueSelectionDialogLoadContext,
    ) => Promise<ValueSelectionDialogPage<T>> | ValueSelectionDialogPage<T>;
  readonly getKey: (value: T) => string;
  readonly getLabel: (value: T) => string;
  readonly searchDebounceMs?: number;
  readonly onApply: (selection: ValueSelectionDialogSelection<T>) => void;
  readonly onClear: () => void
}