@kelta/components — API Reference

Every symbol exported from @kelta/components, the React component library, with its TypeScript signature and doc summary — generated from the package entry point.

Every symbol exported from @kelta/components, with its TypeScript signature and the first paragraph of its doc comment — generated from kelta-web/packages/components/src/index.ts. For a guided tour with examples, see @kelta/components.

110 exports, grouped by kind and sorted by name.

Classes#

RuleEngine#

Deprecated.

RuleEngine evaluates per-layout client rules against a form binding. Owns the dependency graph, topological order, cycle detection, and the actual evaluation loop. The host component drives it with form events (onLoad / onFieldChange / onFieldBlur / onBeforeSave).

class RuleEngine {
    constructor(opts: RuleEngineOptions);
    getDiagnostics(): RuleEngineDiagnostic[];
    isDisabled(): boolean;
    isComputed(field: string): boolean;
    onLoad(form: FormBinding): void;
    onFieldChange(field: string, form: FormBinding): void;
    onFieldBlur(field: string, form: FormBinding): void;
    runBeforeSave(form: FormBinding): BeforeSaveResult;
}

Functions#

AICard#

function AICard({ config, className, }: {
    config: AICardConfig;
    className?: string;
}): React.ReactElement;

AddressMap#

function AddressMap<F extends DetailField = DetailField>({ title, fields, mapLabelFields, geoField, record, lookupDisplayMap, defaultCollapsed, renderField, interactive, mapboxToken, mapStyle, }: AddressMapProps<F>): React.ReactElement | null;

ConversationListItem#

One row in a conversation inbox (telehealth slice 3).

function ConversationListItem({ conversation, active, unread, timeLabel, statusLabels, onClick, testId, }: ConversationListItemProps): JSX.Element;

Crumb#

function Crumb({ trail, position }: CrumbProps): React.ReactElement;

DataTable#

Deprecated.

DataTable component for displaying resource lists with TanStack Query integration.

function DataTable<T = unknown>({ resourceName, columns, filters: externalFilters, defaultSort, pageSize, onRowClick, selectable, onSelectionChange, onFiltersChange: _onFiltersChange, onSortChange, onPageChange, className, testId, }: DataTableProps<T>): JSX.Element;
function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.ReactElement;
function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.ReactElement;
function DropdownMenuItem({ className, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
    variant?: "default" | "destructive";
}): React.ReactElement;
function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.ReactElement;
function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.ReactElement;

FieldSection#

function FieldSection<F extends DetailField = DetailField>({ title, fields, record, lookupDisplayMap, defaultCollapsed, columns, renderField, persistKey, renderLabel, }: FieldSectionProps<F>): React.ReactElement | null;

FilterBuilder#

Deprecated.

FilterBuilder component for building filter expressions.

function FilterBuilder({ fields, value, onChange, maxFilters, className, testId, }: FilterBuilderProps): ReactElement;

InteractiveMap#

Deprecated.

function InteractiveMap(props: InteractiveMapProps): React.ReactElement;

KeltaProvider#

Provider component for Kelta context

function KeltaProvider({ client, user, children }: KeltaProviderProps): JSX.Element;

LayoutRenderer#

Deprecated.

Renders a PageLayout definition in view or edit mode.

function LayoutRenderer({ layout, record, fields, mode, onChange, customRenderers, className, testId, }: LayoutRendererProps): ReactElement;

MessageComposer#

Message input (telehealth slice 3): Enter sends, Shift+Enter inserts a newline. Clears only after a successful onSend so failed sends keep the draft; a failed promise surfaces the error state to the caller (toast).

function MessageComposer({ onSend, disabled, placeholder, sendLabel, className, testId, }: MessageComposerProps): JSX.Element;

MessageList#

Reverse-chronology-safe message stream (telehealth slice 3): renders the given messages oldest→newest, right-aligns the current user’s, centers SYSTEM notices, and keeps the viewport pinned to the newest message when it was already at (or near) the bottom.

function MessageList({ messages, currentUserId, emptyText, senderLabel, className, testId, }: MessageListProps): JSX.Element;

MetadataCard#

function MetadataCard({ config, className, }: {
    config: MetadataCardConfig;
    className?: string;
}): React.ReactElement | null;

Navigation component for menu rendering with React Router integration.

function Navigation({ items, currentUser, orientation, collapsible, className, testId, }: NavigationProps): ReactElement;

PageLayout#

Deprecated.

PageLayout component for basic page structure.

function PageLayout({ children, header, footer, className, style, testId, }: PageLayoutProps): ReactElement;

RailRenderer#

function RailRenderer({ blocks }: RailRendererProps): React.ReactElement;

RecordHeader#

function RecordHeader({ config, record, recordId, collectionLabel, fallbackTitle, actions, moreMenu, showPresence, }: RecordHeaderProps): React.ReactElement;

ResourceDetail#

Deprecated.

ResourceDetail component for displaying resource details in read-only mode.

function ResourceDetail({ resourceName, recordId, layout, customRenderers, className, testId, }: ResourceDetailProps): ReactElement;

ResourceForm#

ResourceForm component for creating and editing resources

function ResourceForm({ resourceName, recordId, onSave, onCancel, initialValues, readOnly, className, }: ResourceFormProps): ReactElement;

ScoreCard#

function ScoreCard({ config, className, }: {
    config: ScoreCardConfig;
    className?: string;
}): React.ReactElement;

StatStrip#

function StatStrip({ tiles, className }: StatStripProps): React.ReactElement | null;

TagsCard#

function TagsCard({ config, className, }: {
    config: TagsCardConfig;
    className?: string;
}): React.ReactElement | null;

ThreeColumnLayout#

Deprecated.

ThreeColumnLayout component for complex layouts with left and right sidebars.

function ThreeColumnLayout({ left, main, right, leftWidth, rightWidth, className, style, breakpoints, collapsibleOnMobile, testId, }: ThreeColumnLayoutProps): ReactElement;

Timeline#

function Timeline({ config, className, }: {
    config: TimelineConfig;
    className?: string;
}): React.ReactElement | null;

TwoColumnLayout#

Deprecated.

TwoColumnLayout component for sidebar layouts.

function TwoColumnLayout({ sidebar, main, sidebarWidth, sidebarPosition, className, style, breakpoints, collapsibleOnMobile, testId, }: TwoColumnLayoutProps): ReactElement;

downstreamRules#

Deprecated.

For a given changed field name, returns the rule ids whose dependencies include that field, transitively. Used to skip work when only a small subset of rules need to re-evaluate after a change.

function downstreamRules(changedField: string, rules: RuleNode[], evaluationOrder: string[]): string[];

evaluateVisibilityRule#

Deprecated.

function evaluateVisibilityRule(rule: VisibilityRule, record: Record<string, unknown>): boolean;

getComponentRegistry#

Get the current ComponentRegistry

function getComponentRegistry(): ComponentRegistryInterface | undefined;

getDetailComponentRegistry#

Deprecated.

Get the current ComponentRegistry

function getDetailComponentRegistry(): ComponentRegistryInterface | undefined;

isVisible#

function isVisible(visibilityRule: string | undefined | null, record: Record<string, unknown>): boolean;

parseVisibilityRule#

Deprecated.

function parseVisibilityRule(json: string | undefined | null): VisibilityRule | null;

setComponentRegistry#

Set the ComponentRegistry for custom field renderers This should be called by the application if plugin-sdk is available

function setComponentRegistry(registry: ComponentRegistryInterface): void;

setDetailComponentRegistry#

Deprecated.

Set the ComponentRegistry for custom field renderers This should be called by the application if plugin-sdk is available

function setDetailComponentRegistry(registry: ComponentRegistryInterface): void;

topologicalSort#

Kahn’s algorithm. Returns rule ids in evaluation order, or a cycle path when a cycle is detected.

function topologicalSort(rules: RuleNode[]): TopoResult;

useCurrentUser#

Hook to access the current user

function useCurrentUser(): User | null;

useDiscovery#

Deprecated.

Hook for discovering available resources

function useDiscovery(): {
    resources: ResourceMetadata[];
    isLoading: boolean;
    error: Error | null;
    refetch: (options?: RefetchOptions) => Promise<QueryObserverResult<ResourceMetadata[], Error>>;
};

useKeltaClient#

Hook to access the Kelta client

function useKeltaClient(): KeltaClient;

useLayoutRules#

React hook that hosts the RuleEngine for a form. The hook is binding-agnostic — adapt to React Hook Form, plain useState, or any other state library by supplying values/setFieldValue/setFieldError/clearFieldError.

function useLayoutRules(opts: UseLayoutRulesOptions): UseLayoutRulesResult;

useResource#

Deprecated.

Hook for fetching and mutating a single resource

function useResource<T = unknown>(resourceName: string, recordId?: string): {
    data: T | null | undefined;
    isLoading: boolean;
    error: Error | null;
    refetch: (options?: RefetchOptions) => Promise<QueryObserverResult<T | null, Error>>;
    create: UseMutateAsyncFunction<T, Error, Partial<T>, unknown>;
    update: UseMutateAsyncFunction<T, Error, {
        id: string;
        data: T;
    }, unknown>;
    patch: UseMutateAsyncFunction<T, Error, {
        id: string;
        data: Partial<T>;
    }, unknown>;
    delete: UseMutateAsyncFunction<void, Error, string, unknown>;
    isCreating: boolean;
    isUpdating: boolean;
    isPatching: boolean;
    isDeleting: boolean;
};

useResourceList#

Deprecated.

Hook for fetching a list of resources

function useResourceList<T = unknown>(resourceName: string, options?: ListOptions): UseResourceListResult<T>;

Interfaces#

AIActionConfig#

interface AIActionConfig {
    label: string;
    icon?: React.ReactNode;
    onClick: () => void;
}

AICardConfig#

interface AICardConfig {
    title: string;
    summary: string;
    actions?: AIActionConfig[];
}

AddressMapProps#

interface AddressMapProps<F extends DetailField = DetailField> {
    title: string;
    fields: F[];
    mapLabelFields?: string[];
    geoField?: string;
    record: Record<string, unknown>;
    lookupDisplayMap?: Record<string, Record<string, string>>;
    defaultCollapsed?: boolean;
    renderField: (ctx: FieldSectionRenderContext<F>) => React.ReactNode;
    interactive?: boolean;
    mapboxToken?: string;
    mapStyle?: string;
}

BeforeSaveResult#

interface BeforeSaveResult {
    blocked: boolean;
    violations: RuleViolation[];
}

ChatConversationItem#

interface ChatConversationItem {
    id: string;
    subject?: string | null;
    status: "OPEN" | "ASSIGNED" | "CLOSED" | "ARCHIVED";
    origin: "PORTAL" | "INTERNAL";
    assignedTo?: string | null;
    lastMessageAt?: string | null;
    createdAt?: string | null;
}

ChatMessageItem#

interface ChatMessageItem {
    id: string;
    senderId?: string | null;
    senderType: ChatSenderType;
    kind: "TEXT" | "SYSTEM" | "ATTACHMENT";
    body: string;
    sentAt?: string | null;
}

ColumnDefinition#

Deprecated.

Column definition for DataTable

interface ColumnDefinition<T = unknown> {
    field: keyof T;
    header: string;
    sortable?: boolean;
    filterable?: boolean;
    render?: (value: unknown, row: T) => ReactNode;
    width?: string;
}

ConversationListItemProps#

interface ConversationListItemProps {
    conversation: ChatConversationItem;
    active?: boolean;
    unread?: boolean;
    timeLabel?: string;
    statusLabels?: Partial<Record<ChatConversationItem["status"], string>>;
    onClick?: (conversationId: string) => void;
    testId?: string;
}

CrumbItem#

interface CrumbItem {
    label: string;
    to?: string;
}

CrumbPosition#

interface CrumbPosition {
    index: number;
    total: number;
    onPrev?: () => void;
    onNext?: () => void;
}

CrumbProps#

interface CrumbProps {
    trail: CrumbItem[];
    position?: CrumbPosition;
}

DataTableProps#

Deprecated.

Props for DataTable component

interface DataTableProps<T = unknown> {
    resourceName: string;
    columns: ColumnDefinition<T>[];
    filters?: FilterExpression[];
    defaultSort?: SortCriteria[];
    pageSize?: number;
    onRowClick?: (row: T) => void;
    selectable?: boolean;
    onSelectionChange?: (selected: T[]) => void;
    onFiltersChange?: (filters: FilterExpression[]) => void;
    onSortChange?: (sort: SortCriteria[]) => void;
    onPageChange?: (page: number) => void;
    className?: string;
    testId?: string;
}

DetailField#

Minimal field shape consumed by FieldSection’s grid + label rendering. Mirrors the structural subset of the consumer’s full FieldDefinition; consumers usually pass their full definition type via the generic.

interface DetailField {
    name: string;
    displayName?: string;
    type: string;
    referenceTarget?: string;
}

FieldRendererProps#

Props passed to field renderer components

interface FieldRendererProps {
    value: unknown;
    field: FieldDefinition;
    onChange?: (value: unknown) => void;
    readOnly?: boolean;
}

FieldSectionProps#

interface FieldSectionProps<F extends DetailField = DetailField> {
    title: string;
    fields: F[];
    record: Record<string, unknown>;
    lookupDisplayMap?: Record<string, Record<string, string>>;
    defaultCollapsed?: boolean;
    columns?: 1 | 2 | 3 | 4;
    renderField: (ctx: FieldSectionRenderContext<F>) => React.ReactNode;
    persistKey?: string;
    renderLabel?: (field: F) => React.ReactNode;
}

FieldSectionRenderContext#

interface FieldSectionRenderContext<F extends DetailField = DetailField> {
    field: F;
    value: unknown;
    displayLabel?: string;
}

FilterBuilderProps#

Deprecated.

Props for FilterBuilder component

interface FilterBuilderProps {
    fields: FieldDefinition[];
    value: FilterExpression[];
    onChange: (filters: FilterExpression[]) => void;
    maxFilters?: number;
    className?: string;
    testId?: string;
}

FormBinding#

Deprecated.

interface FormBinding {
    getValue(field: string): unknown;
    getValues(): Record<string, unknown>;
    setValue(field: string, value: unknown): void;
    setError(field: string, message: string): void;
    clearError(field: string): void;
}

InteractiveMapProps#

Deprecated.

interface InteractiveMapProps {
    lat: number;
    lng: number;
    label?: string;
    zoom?: number;
    className?: string;
}

KeltaProviderProps#

Props for KeltaProvider

interface KeltaProviderProps {
    client: KeltaClient;
    user?: User | null;
    children: ReactNode;
}

LayoutRendererProps#

Deprecated.

Props for the LayoutRenderer component.

interface LayoutRendererProps {
    layout: PageLayout;
    record: Record<string, unknown>;
    fields: FieldDefinition[];
    mode: "view" | "edit";
    onChange?: (fieldName: string, value: unknown) => void;
    onSave?: () => void;
    customRenderers?: Record<string, FieldRendererFn>;
    className?: string;
    testId?: string;
}

Menu item definition

interface MenuItem {
    id: string;
    label: string;
    path?: string;
    icon?: ReactNode;
    children?: MenuItem[];
    roles?: string[];
    onClick?: () => void;
}

MessageComposerProps#

interface MessageComposerProps {
    onSend: (body: string) => void | Promise<void>;
    disabled?: boolean;
    placeholder?: string;
    sendLabel?: string;
    className?: string;
    testId?: string;
}

MessageListProps#

interface MessageListProps {
    messages: ChatMessageItem[];
    currentUserId?: string;
    emptyText?: string;
    senderLabel?: (message: ChatMessageItem) => string | undefined;
    className?: string;
    testId?: string;
}

MetadataCardConfig#

interface MetadataCardConfig {
    title: string;
    rows: MetadataRow[];
}

MetadataRow#

interface MetadataRow {
    label: string;
    value: React.ReactNode;
    mono?: boolean;
}

Props for Navigation component

interface NavigationProps {
    items: MenuItem[];
    currentUser?: User | null;
    orientation?: "horizontal" | "vertical";
    collapsible?: boolean;
    className?: string;
    testId?: string;
}

PageLayoutProps#

Deprecated.

Props for PageLayout component

interface PageLayoutProps {
    children: ReactNode;
    header?: ReactNode;
    footer?: ReactNode;
    className?: string;
    style?: CSSProperties;
    testId?: string;
}

RailRendererProps#

interface RailRendererProps {
    blocks: RailBlockDto[];
}

RecordHeaderAction#

interface RecordHeaderAction {
    label: string;
    icon?: React.ReactNode;
    onClick: () => void;
    variant?: "primary" | "ghost";
    testId?: string;
}

RecordHeaderConfig#

interface RecordHeaderConfig {
    titleFields?: string[];
    avatarFrom?: string[];
    metaFields?: RecordHeaderMetaField[];
}

RecordHeaderConfigDto#

Deprecated.

interface RecordHeaderConfigDto {
    titleFields?: string[];
    avatarFrom?: string[];
    metaFields?: Array<{
        key: string;
        icon?: string;
        prefix?: string;
    }>;
}

RecordHeaderMetaField#

interface RecordHeaderMetaField {
    key: string;
    icon?: React.ReactNode;
    prefix?: string;
}

RecordHeaderProps#

interface RecordHeaderProps {
    config?: RecordHeaderConfig;
    record: Record<string, unknown>;
    recordId: string;
    collectionLabel: string;
    fallbackTitle: string;
    actions?: RecordHeaderAction[];
    moreMenu?: React.ReactNode;
    showPresence?: boolean;
}

ResourceDetailProps#

Deprecated.

Props for ResourceDetail component

interface ResourceDetailProps {
    resourceName: string;
    recordId: string;
    layout?: "vertical" | "horizontal" | "grid";
    customRenderers?: Record<string, FieldRenderer>;
    className?: string;
    testId?: string;
}

ResourceFormProps#

Props for ResourceForm component

interface ResourceFormProps {
    resourceName: string;
    recordId?: string;
    onSave: (data: unknown) => void;
    onCancel: () => void;
    initialValues?: Record<string, unknown>;
    readOnly?: boolean;
    className?: string;
}

ResponsiveBreakpoints#

Deprecated.

Responsive breakpoint configuration

interface ResponsiveBreakpoints {
    mobile?: number;
    tablet?: number;
    desktop?: number;
}

RuleEngineDiagnostic#

interface RuleEngineDiagnostic {
    ruleId: string;
    ruleName: string;
    level: "error" | "warning";
    message: string;
}

RuleEngineOptions#

Deprecated.

interface RuleEngineOptions {
    layoutRules: LayoutRule[];
    validationRules?: CollectionValidationRule[];
    evaluator?: FormulaEvaluator;
}

RuleNode#

Dependency graph utilities for the layout client-rules engine.

interface RuleNode {
    id: string;
    target: string;
    dependsOn: string[];
}

RuleViolation#

interface RuleViolation {
    ruleId: string;
    ruleName: string;
    field?: string;
    message: string;
    severity: "error" | "warning";
}

ScoreCardConfig#

interface ScoreCardConfig {
    title: string;
    score: number;
    statusLabel?: string;
    tone?: ScoreTone;
    delta?: string;
    metrics?: ScoreMetric[];
}

ScoreMetric#

interface ScoreMetric {
    label: string;
    value: string;
    ok?: boolean;
}

StatStripProps#

interface StatStripProps {
    tiles: StatTileConfig[];
    className?: string;
}

StatTileConfig#

interface StatTileConfig {
    label: string;
    value: string;
    kind?: StatTileKind;
    icon?: React.ReactNode;
    trend?: StatTileTrend;
    sub?: string;
}

StatTileTrend#

interface StatTileTrend {
    dir: "up" | "down";
    label: string;
}

TagItem#

interface TagItem {
    label: string;
    tone?: TagTone;
}

TagsCardConfig#

interface TagsCardConfig {
    title: string;
    tags: TagItem[];
    onAdd?: () => void;
}

ThreeColumnLayoutProps#

Deprecated.

Props for ThreeColumnLayout component

interface ThreeColumnLayoutProps {
    left: ReactNode;
    main: ReactNode;
    right: ReactNode;
    leftWidth?: string;
    rightWidth?: string;
    className?: string;
    style?: CSSProperties;
    breakpoints?: ResponsiveBreakpoints;
    collapsibleOnMobile?: boolean;
    testId?: string;
}

TimelineConfig#

interface TimelineConfig {
    title: string;
    events: TimelineEvent[];
}

TimelineEvent#

interface TimelineEvent {
    at: string;
    icon?: React.ReactNode;
    tone?: TimelineTone;
    title: string;
    body?: string;
}

TwoColumnLayoutProps#

Deprecated.

Props for TwoColumnLayout component

interface TwoColumnLayoutProps {
    sidebar: ReactNode;
    main: ReactNode;
    sidebarWidth?: string;
    sidebarPosition?: "left" | "right";
    className?: string;
    style?: CSSProperties;
    breakpoints?: ResponsiveBreakpoints;
    collapsibleOnMobile?: boolean;
    testId?: string;
}

UseLayoutRulesOptions#

interface UseLayoutRulesOptions {
    rules: LayoutRule[] | undefined;
    validationRules?: CollectionValidationRule[];
    values: Record<string, unknown>;
    setFieldValue: (field: string, value: unknown) => void;
    setFieldError: (field: string, message: string) => void;
    clearFieldError: (field: string) => void;
    enabled?: boolean;
}

UseLayoutRulesResult#

interface UseLayoutRulesResult {
    enabled: boolean;
    diagnostics: RuleEngineDiagnostic[];
    isComputed: (field: string) => boolean;
    onFieldChange: (field: string, nextValues?: Record<string, unknown>) => void;
    onFieldBlur: (field: string, nextValues?: Record<string, unknown>) => void;
    runBeforeSave: () => BeforeSaveResult;
}

Type aliases#

ChatSenderType#

Chat primitives (telehealth slice 3) — purely presentational, fed by the consuming app’s hooks. No KeltaClient coupling so the same components serve the staff console and the portal page-builder widget.

type ChatSenderType = "INTERNAL" | "PORTAL" | "SYSTEM";

FieldRenderer#

Deprecated.

Field renderer function type

type FieldRenderer = (value: unknown, field: FieldDefinition) => ReactNode;

FieldRendererComponent#

Field renderer component type

type FieldRendererComponent = (props: FieldRendererProps) => ReactElement;

FieldRendererFn#

Deprecated.

Function that renders a field value.

type FieldRendererFn = (value: unknown, field: FieldDefinition, mode: "view" | "edit", onChange?: (value: unknown) => void) => ReactNode;

RailBlockDto#

type RailBlockDto = {
    kind: "metadataCard";
    config: {
        title: string;
        rows: Array<{
            label: string;
            value: string;
            mono?: boolean;
        }>;
    };
} | {
    kind: "statStrip";
    config: {
        tiles: Array<Record<string, unknown>>;
    };
} | {
    kind: "scoreCard";
    config: Record<string, unknown>;
} | {
    kind: "tagsCard";
    config: {
        title: string;
        tags: Array<{
            label: string;
            tone?: string;
        }>;
    };
} | {
    kind: "aiCard";
    config: {
        title: string;
        summary: string;
        actions?: Array<{
            label: string;
        }>;
    };
} | {
    kind: "timeline";
    config: {
        title: string;
        events: Array<Record<string, unknown>>;
    };
};

ScoreTone#

type ScoreTone = "success" | "warning" | "danger";

StatTileKind#

type StatTileKind = "currency" | "number" | "text";

TagTone#

type TagTone = "default" | "brand" | "success" | "warning" | "danger";

TimelineTone#

type TimelineTone = "default" | "brand" | "success" | "warning" | "danger";

TopoResult#

type TopoResult = {
    ok: true;
    order: string[];
} | {
    ok: false;
    cycle: string[];
};

Edit this page on GitHub