@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;
DropdownMenu#
function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.ReactElement;
DropdownMenuContent#
function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.ReactElement;
DropdownMenuItem#
function DropdownMenuItem({ className, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
variant?: "default" | "destructive";
}): React.ReactElement;
DropdownMenuSeparator#
function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.ReactElement;
DropdownMenuTrigger#
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#
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;
}
MenuItem#
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;
}
NavigationProps#
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[];
};