react-conditional-ui 1.2.0

package/dist/index.d.cts

@@ -0,0 +1,225 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+declare class Field {
+    readonly raw: string;
+    readonly value: string;
+    readonly label: string;
+    readonly isValid: boolean;
+    constructor(raw: string, value: string, label: string);
+    static invalid(raw: string): Field;
+}
+
+declare class Operator {
+    readonly raw: string;
+    readonly value: string;
+    readonly label: string;
+    readonly isValid: boolean;
+    constructor(raw: string, value: string, label: string);
+    static invalid(raw: string): Operator;
+}
+
+declare class Value {
+    readonly raw: string;
+    readonly value: string;
+    readonly label: string;
+    readonly isValid: boolean;
+    readonly errorMessage: string | null;
+    readonly matchedOption: FieldOption | null;
+    constructor(raw: string, opts?: {
+        isValid: boolean;
+        errorMessage?: string | null;
+        matchedOption?: FieldOption | null;
+    });
+    static valid(raw: string, matchedOption?: FieldOption): Value;
+    static invalid(raw: string, errorMessage: string): Value;
+    static empty(): Value;
+}
+
+declare const DEFAULT_OPERATORS: OperatorOption[];
+
+type OperatorOption = {
+    label: string;
+    value: string;
+    aliases: string[];
+};
+type FieldType = "text" | "number" | "enum";
+type FieldOption = {
+    label: string;
+    value: string;
+    operators?: OperatorOption[];
+    fieldValues?: FieldOption[];
+    type?: FieldType;
+    /** Return `true` if valid, or an error message string. Takes priority over built-in type checks. */
+    validateValue?: (raw: string) => true | string;
+};
+type ParsedCondition = {
+    field: Field;
+    operator: Operator;
+    value: Value;
+    score: number;
+};
+type LogicalOperator = "and" | "or";
+type ConditionEntry = {
+    id: string;
+    condition: ParsedCondition;
+    connector: LogicalOperator;
+};
+type GroupConfig = {
+    /** Logical connector shown between this group and the previous one. Defaults to "and". */
+    connector?: LogicalOperator;
+    /** Whether condition chips can be edited via popover. Defaults to true. */
+    editable?: boolean;
+    /** Whether entries can be removed from this group. Defaults to true. */
+    removable?: boolean;
+    /** Visual variant of the group card. Defaults to "outlined". */
+    variant?: "outlined" | "filled";
+    /** Optional label displayed above the group. */
+    label?: string;
+};
+type ConditionGroup = {
+    id: string;
+    entries: ConditionEntry[];
+    config?: GroupConfig;
+};
+type Diagnostic = {
+    start: number;
+    end: number;
+    message: string;
+};
+type ConditionalUIProps = {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+    value?: string;
+    onChange?: (raw: string) => void;
+    onConditionsChange?: (groups: ConditionGroup[]) => void;
+    className?: string;
+    style?: React$1.CSSProperties;
+};
+
+declare function ConditionalUI({ fields, operators, value, onChange, onConditionsChange, className, style, }: ConditionalUIProps): react_jsx_runtime.JSX.Element;
+
+type BaseProps = {
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+type StandaloneProps = BaseProps & {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (group: ConditionGroup) => void;
+};
+type ControlledProps = BaseProps & {
+    fields?: undefined;
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    getSuggestion?: (text: string) => {
+        completion: string;
+        display: string;
+    } | null;
+    getCompletions?: (text: string, limit?: number) => {
+        completion: string;
+        display: string;
+    }[];
+    diagnostics?: Diagnostic[];
+};
+type InputProps = StandaloneProps | ControlledProps;
+declare function Input(props: InputProps): react_jsx_runtime.JSX.Element;
+
+type GroupMutations = {
+    addGroup: (group: ConditionGroup) => void;
+    removeEntry: (groupId: string, entryId: string) => void;
+    toggleConnector: (groupId: string, entryId: string) => void;
+    updateCondition: (groupId: string, entryId: string, condition: ParsedCondition) => void;
+    updateGroupConfig: (groupId: string, config: Partial<GroupConfig>) => void;
+    reorderWithinGroup: (groupId: string, activeId: string, overId: string) => void;
+    moveBetweenGroups: (sourceGroupId: string, targetGroupId: string, entryId: string, overEntryId: string | null) => void;
+    ungroupEntry: (groupId: string, entryId: string) => void;
+    setGroups: (groups: ConditionGroup[]) => void;
+};
+type UseConditionalOutputOptions = {
+    groups?: ConditionGroup[];
+    onGroupsChange?: (groups: ConditionGroup[]) => void;
+};
+declare function useConditionalOutput({ groups: controlledGroups, onGroupsChange, }?: UseConditionalOutputOptions): {
+    groups: ConditionGroup[];
+    mutations: GroupMutations;
+};
+
+type OutputProps = {
+    fields: FieldOption[];
+    operators: OperatorOption[];
+    /** Controlled groups. Omit for uncontrolled (internal state). */
+    groups?: ConditionGroup[];
+    /** Fires whenever groups change (works in both controlled and uncontrolled mode). */
+    onGroupsChange?: (groups: ConditionGroup[]) => void;
+    /** Default config applied to every group unless overridden by group.config. */
+    defaultGroupConfig?: GroupConfig;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+declare function Output({ fields, operators, groups: controlledGroups, onGroupsChange, defaultGroupConfig, className, style, }: OutputProps): react_jsx_runtime.JSX.Element;
+
+type UseConditionalInputOptions = {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+    value?: string;
+    onChange?: (raw: string) => void;
+    onSubmit?: (group: ConditionGroup) => void;
+};
+declare function useConditionalInput({ fields, operators, value, onChange, onSubmit, }: UseConditionalInputOptions): {
+    text: string;
+    diagnostics: Diagnostic[];
+    handleChange: (next: string) => void;
+    handleSubmit: () => void;
+    getSuggestion: (text: string) => {
+        completion: string;
+        display: string;
+    } | null;
+    getCompletions: (text: string, limit?: number) => {
+        completion: string;
+        display: string;
+    }[];
+};
+
+declare class ConditionDataProvider {
+    private readonly suggestions;
+    private readonly diagnostics;
+    private readonly segments;
+    constructor(fields: FieldOption[], operators: OperatorOption[]);
+    parseComplexCondition(text: string): ConditionGroup | null;
+    getCompletions(text: string, limit?: number): {
+        completion: string;
+        display: string;
+    }[];
+    getSuggestion(text: string): {
+        completion: string;
+        display: string;
+    } | null;
+    diagnose(text: string): Diagnostic[];
+}
+
+type UseConditionDataProviderOptions = {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+};
+type UseConditionDataProviderResult = {
+    provider: ConditionDataProvider;
+    parseComplexCondition: (text: string) => ConditionGroup | null;
+    getCompletions: (text: string, limit?: number) => {
+        completion: string;
+        display: string;
+    }[];
+    getSuggestion: (text: string) => {
+        completion: string;
+        display: string;
+    } | null;
+    diagnose: (text: string) => Diagnostic[];
+};
+declare function useConditionDataProvider({ fields, operators, }: UseConditionDataProviderOptions): UseConditionDataProviderResult;
+
+export { ConditionDataProvider, type ConditionEntry, type ConditionGroup, ConditionDataProvider as ConditionParser, ConditionalUI, type ConditionalUIProps, DEFAULT_OPERATORS, type Diagnostic, type FieldOption, type FieldType, type GroupConfig, type GroupMutations, Input, type InputProps, type LogicalOperator, type OperatorOption, Output, type OutputProps, type ParsedCondition, type UseConditionDataProviderOptions, type UseConditionDataProviderResult, type UseConditionalInputOptions, type UseConditionalOutputOptions, useConditionDataProvider, useConditionalInput, useConditionalOutput };

package/dist/index.d.ts

@@ -0,0 +1,225 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+declare class Field {
+    readonly raw: string;
+    readonly value: string;
+    readonly label: string;
+    readonly isValid: boolean;
+    constructor(raw: string, value: string, label: string);
+    static invalid(raw: string): Field;
+}
+
+declare class Operator {
+    readonly raw: string;
+    readonly value: string;
+    readonly label: string;
+    readonly isValid: boolean;
+    constructor(raw: string, value: string, label: string);
+    static invalid(raw: string): Operator;
+}
+
+declare class Value {
+    readonly raw: string;
+    readonly value: string;
+    readonly label: string;
+    readonly isValid: boolean;
+    readonly errorMessage: string | null;
+    readonly matchedOption: FieldOption | null;
+    constructor(raw: string, opts?: {
+        isValid: boolean;
+        errorMessage?: string | null;
+        matchedOption?: FieldOption | null;
+    });
+    static valid(raw: string, matchedOption?: FieldOption): Value;
+    static invalid(raw: string, errorMessage: string): Value;
+    static empty(): Value;
+}
+
+declare const DEFAULT_OPERATORS: OperatorOption[];
+
+type OperatorOption = {
+    label: string;
+    value: string;
+    aliases: string[];
+};
+type FieldType = "text" | "number" | "enum";
+type FieldOption = {
+    label: string;
+    value: string;
+    operators?: OperatorOption[];
+    fieldValues?: FieldOption[];
+    type?: FieldType;
+    /** Return `true` if valid, or an error message string. Takes priority over built-in type checks. */
+    validateValue?: (raw: string) => true | string;
+};
+type ParsedCondition = {
+    field: Field;
+    operator: Operator;
+    value: Value;
+    score: number;
+};
+type LogicalOperator = "and" | "or";
+type ConditionEntry = {
+    id: string;
+    condition: ParsedCondition;
+    connector: LogicalOperator;
+};
+type GroupConfig = {
+    /** Logical connector shown between this group and the previous one. Defaults to "and". */
+    connector?: LogicalOperator;
+    /** Whether condition chips can be edited via popover. Defaults to true. */
+    editable?: boolean;
+    /** Whether entries can be removed from this group. Defaults to true. */
+    removable?: boolean;
+    /** Visual variant of the group card. Defaults to "outlined". */
+    variant?: "outlined" | "filled";
+    /** Optional label displayed above the group. */
+    label?: string;
+};
+type ConditionGroup = {
+    id: string;
+    entries: ConditionEntry[];
+    config?: GroupConfig;
+};
+type Diagnostic = {
+    start: number;
+    end: number;
+    message: string;
+};
+type ConditionalUIProps = {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+    value?: string;
+    onChange?: (raw: string) => void;
+    onConditionsChange?: (groups: ConditionGroup[]) => void;
+    className?: string;
+    style?: React$1.CSSProperties;
+};
+
+declare function ConditionalUI({ fields, operators, value, onChange, onConditionsChange, className, style, }: ConditionalUIProps): react_jsx_runtime.JSX.Element;
+
+type BaseProps = {
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+type StandaloneProps = BaseProps & {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (group: ConditionGroup) => void;
+};
+type ControlledProps = BaseProps & {
+    fields?: undefined;
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    getSuggestion?: (text: string) => {
+        completion: string;
+        display: string;
+    } | null;
+    getCompletions?: (text: string, limit?: number) => {
+        completion: string;
+        display: string;
+    }[];
+    diagnostics?: Diagnostic[];
+};
+type InputProps = StandaloneProps | ControlledProps;
+declare function Input(props: InputProps): react_jsx_runtime.JSX.Element;
+
+type GroupMutations = {
+    addGroup: (group: ConditionGroup) => void;
+    removeEntry: (groupId: string, entryId: string) => void;
+    toggleConnector: (groupId: string, entryId: string) => void;
+    updateCondition: (groupId: string, entryId: string, condition: ParsedCondition) => void;
+    updateGroupConfig: (groupId: string, config: Partial<GroupConfig>) => void;
+    reorderWithinGroup: (groupId: string, activeId: string, overId: string) => void;
+    moveBetweenGroups: (sourceGroupId: string, targetGroupId: string, entryId: string, overEntryId: string | null) => void;
+    ungroupEntry: (groupId: string, entryId: string) => void;
+    setGroups: (groups: ConditionGroup[]) => void;
+};
+type UseConditionalOutputOptions = {
+    groups?: ConditionGroup[];
+    onGroupsChange?: (groups: ConditionGroup[]) => void;
+};
+declare function useConditionalOutput({ groups: controlledGroups, onGroupsChange, }?: UseConditionalOutputOptions): {
+    groups: ConditionGroup[];
+    mutations: GroupMutations;
+};
+
+type OutputProps = {
+    fields: FieldOption[];
+    operators: OperatorOption[];
+    /** Controlled groups. Omit for uncontrolled (internal state). */
+    groups?: ConditionGroup[];
+    /** Fires whenever groups change (works in both controlled and uncontrolled mode). */
+    onGroupsChange?: (groups: ConditionGroup[]) => void;
+    /** Default config applied to every group unless overridden by group.config. */
+    defaultGroupConfig?: GroupConfig;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+declare function Output({ fields, operators, groups: controlledGroups, onGroupsChange, defaultGroupConfig, className, style, }: OutputProps): react_jsx_runtime.JSX.Element;
+
+type UseConditionalInputOptions = {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+    value?: string;
+    onChange?: (raw: string) => void;
+    onSubmit?: (group: ConditionGroup) => void;
+};
+declare function useConditionalInput({ fields, operators, value, onChange, onSubmit, }: UseConditionalInputOptions): {
+    text: string;
+    diagnostics: Diagnostic[];
+    handleChange: (next: string) => void;
+    handleSubmit: () => void;
+    getSuggestion: (text: string) => {
+        completion: string;
+        display: string;
+    } | null;
+    getCompletions: (text: string, limit?: number) => {
+        completion: string;
+        display: string;
+    }[];
+};
+
+declare class ConditionDataProvider {
+    private readonly suggestions;
+    private readonly diagnostics;
+    private readonly segments;
+    constructor(fields: FieldOption[], operators: OperatorOption[]);
+    parseComplexCondition(text: string): ConditionGroup | null;
+    getCompletions(text: string, limit?: number): {
+        completion: string;
+        display: string;
+    }[];
+    getSuggestion(text: string): {
+        completion: string;
+        display: string;
+    } | null;
+    diagnose(text: string): Diagnostic[];
+}
+
+type UseConditionDataProviderOptions = {
+    fields: FieldOption[];
+    operators?: OperatorOption[];
+};
+type UseConditionDataProviderResult = {
+    provider: ConditionDataProvider;
+    parseComplexCondition: (text: string) => ConditionGroup | null;
+    getCompletions: (text: string, limit?: number) => {
+        completion: string;
+        display: string;
+    }[];
+    getSuggestion: (text: string) => {
+        completion: string;
+        display: string;
+    } | null;
+    diagnose: (text: string) => Diagnostic[];
+};
+declare function useConditionDataProvider({ fields, operators, }: UseConditionDataProviderOptions): UseConditionDataProviderResult;
+
+export { ConditionDataProvider, type ConditionEntry, type ConditionGroup, ConditionDataProvider as ConditionParser, ConditionalUI, type ConditionalUIProps, DEFAULT_OPERATORS, type Diagnostic, type FieldOption, type FieldType, type GroupConfig, type GroupMutations, Input, type InputProps, type LogicalOperator, type OperatorOption, Output, type OutputProps, type ParsedCondition, type UseConditionDataProviderOptions, type UseConditionDataProviderResult, type UseConditionalInputOptions, type UseConditionalOutputOptions, useConditionDataProvider, useConditionalInput, useConditionalOutput };