@factorialco/f0-react 1.397.0 → 1.398.0

package/dist/f0.d.ts

@@ -135,6 +135,7 @@ import { WithDataTestIdReturnType as WithDataTestIdReturnType_3 } from './f0';
 import { WithDataTestIdReturnType as WithDataTestIdReturnType_4 } from './f0';
 import { WithDataTestIdReturnType as WithDataTestIdReturnType_5 } from './f0';
 import { WithDataTestIdReturnType as WithDataTestIdReturnType_6 } from './f0';
+import { WithDataTestIdReturnType as WithDataTestIdReturnType_7 } from './f0';
 import { z } from 'zod';
 import { ZodEffects } from 'zod';
 import { ZodRawShape } from 'zod';
@@ -290,6 +291,8 @@ declare type ActionSize = (typeof actionSizes)[number];
 
 declare const actionSizes: readonly ["sm", "md", "lg"];
 
+export declare type ActionType = "duplicate" | "delete";
+
 declare type ActionVariant = (typeof actionVariants)[number];
 
 declare const actionVariants: readonly ["default", "outline", "critical", "neutral", "ghost", "promote", "outlinePromote", "ai", "link", "unstyled", "mention"];
@@ -871,6 +874,25 @@ export declare type BasePaginatedResponse<R> = BaseResponse<R> & {
     perPage: number;
 };
 
+export declare type BaseQuestionOnChangeParams = {
+    id: string;
+    title?: string;
+    description?: string;
+    required?: boolean;
+};
+
+declare type BaseQuestionProps = {
+    id: string;
+    title: string;
+    description?: string;
+    type: QuestionType;
+    children: React.ReactNode;
+    required?: boolean;
+    locked?: boolean;
+};
+
+declare type BaseQuestionPropsForOtherQuestionComponents = Omit<BaseQuestionProps, "children" | "onChange">;
+
 /**
  * Base response type for collection data
  * @template R - The type of records in the collection
@@ -1642,6 +1664,8 @@ declare type ComponentTypes = (typeof componentTypes)[number];
 
 declare const componentTypes: readonly ["layout", "info", "action", "form"];
 
+export declare function computeSectionEndIds(elements: SurveyFormBuilderElement[]): Set<string>;
+
 declare type CountryCode = keyof TranslationsType["countries"];
 
 export declare function createAtlaskitDriver(instanceId: symbol): DndDriver;
@@ -2214,6 +2238,10 @@ export declare interface DatePreset {
     value: DateRange | (() => DateRange);
 }
 
+declare type DateQuestionProps = BaseQuestionPropsForOtherQuestionComponents & {
+    value?: Date | null;
+};
+
 declare type DateRange = {
     from: Date;
     to?: Date;
@@ -2724,7 +2752,7 @@ export declare const defaultTranslations: {
             readonly dismiss: "Dismiss";
         };
     };
-    readonly coCreationForm: {
+    readonly surveyFormBuilder: {
         readonly actions: {
             readonly actions: "Actions";
             readonly duplicateQuestion: "Duplicate question";
@@ -2756,7 +2784,11 @@ export declare const defaultTranslations: {
         };
         readonly answer: {
             readonly label: "Answer";
-            readonly placeholder: "Respondent's answer";
+            readonly dropdownPlaceholder: "Pick an option";
+            readonly textPlaceholder: "Type your answer";
+            readonly numericPlaceholder: "Enter a number";
+            readonly linkPlaceholder: "https://example.com";
+            readonly invalidUrl: "Enter a valid URL";
         };
         readonly labels: {
             readonly applyingChanges: "Applying changes";
@@ -2775,6 +2807,16 @@ export declare const defaultTranslations: {
             readonly lastQuestionDialogDescription: "Moving this question will leave the section empty and it will be removed. Do you want to continue?";
         };
     };
+    readonly surveyAnsweringForm: {
+        readonly actions: {
+            readonly submit: "Submit survey";
+            readonly cancel: "Cancel";
+            readonly next: "Next";
+            readonly previous: "Previous";
+            readonly expand: "Expand";
+            readonly collapse: "Collapse";
+        };
+    };
     readonly richTextEditor: {
         readonly bold: "Bold";
         readonly italic: "Italic";
@@ -2961,6 +3003,12 @@ declare type DropdownItemSeparator = {
     type: "separator";
 };
 
+declare type DropdownSingleQuestionProps = BaseQuestionPropsForOtherQuestionComponents & {
+    type: "dropdown-single";
+    options: SelectQuestionOption[];
+    value?: string | null;
+};
+
 export declare type DropIntent = {
     type: "reorder";
     containerId: string;
@@ -3027,6 +3075,8 @@ declare type EditableTableVisualizationOptions<R extends RecordType, _Filters ex
 
 declare type EditableTableVisualizationSettings = TableVisualizationSettings;
 
+export declare type ElementType = QuestionType | "section";
+
 export declare function Em({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): JSX_2.Element;
 
 export declare function EmojiImage({ emoji, size, alt }: EmojiImageProps): JSX_2.Element;
@@ -4609,6 +4659,20 @@ export declare interface F0FormDiscardConfig {
  */
 export declare type F0FormErrorTriggerMode = "on-blur" | "on-change" | "on-submit";
 
+/**
+ * Standalone form field component that renders the appropriate F0Form input
+ * without requiring a react-hook-form context.
+ *
+ * Supports all field types that F0Form supports: text, number, textarea,
+ * select, checkbox, switch, date, time, datetime, daterange, richtext, custom,
+ * and file.
+ */
+export declare function F0FormField({ field, value, onChange, onBlur, error, errorMessage, loading, required, disabled, hideLabel: hideLabelProp, initialFiles, }: F0FormFieldProps): JSX_2.Element;
+
+export declare namespace F0FormField {
+    var displayName: string;
+}
+
 /**
  * String field - text input, textarea, select, or custom
  * @typeParam R - Record type for data source (when using source instead of options)
@@ -4684,6 +4748,44 @@ export declare function f0FormField<T extends ZodTypeAny, TConfig = undefined>(s
  */
 export declare function f0FormField<T extends ZodTypeAny, V extends string | number = string | number, R extends Record<string, unknown> = Record<string, unknown>>(schema: T, config: F0FieldConfig<V, R>): T & F0ZodType<T>;
 
+declare interface F0FormFieldCommonProps {
+    /** Field definition (type, label, placeholder, etc.) */
+    /** Current field value */
+    value: unknown;
+    /** Called when the field value changes */
+    onChange: (value: unknown) => void;
+    /** Called when the field loses focus */
+    onBlur?: () => void;
+    /** Whether the field has an error */
+    error?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the field is in a loading/validating state */
+    loading?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled (overrides field.disabled) */
+    disabled?: boolean;
+    /** Whether to hide the label (useful when label is rendered externally) */
+    hideLabel?: boolean;
+}
+
+declare interface F0FormFieldFileProps extends F0FormFieldCommonProps {
+    /** File field definition */
+    field: F0FileField;
+    /** Shared pool of pre-existing file metadata for standalone file fields */
+    initialFiles?: InitialFile[];
+}
+
+declare interface F0FormFieldNonFileProps extends F0FormFieldCommonProps {
+    /** Non-file field definition */
+    field: Exclude<F0Field, F0FileField>;
+    /** Only supported for file fields */
+    initialFiles?: never;
+}
+
+export declare type F0FormFieldProps = F0FormFieldFileProps | F0FormFieldNonFileProps;
+
 /**
  * Union of all F0Form prop variants.
  * The component detects the mode based on whether `schema` is a single Zod schema
@@ -4875,6 +4977,12 @@ declare interface F0FormSubmitConfigBase {
     icon?: IconType | null;
     /** Label shown in the action bar while submitting (defaults to i18n "forms.actionBar.saving") */
     savingMessage?: string;
+    /**
+     * Duration in ms before the success message auto-clears.
+     * - number: auto-clear after this many ms (default: 3000)
+     * - null: never auto-clear (caller is responsible for unmounting)
+     */
+    successMessageDuration?: number | null;
 }
 
 /**
@@ -5468,7 +5576,7 @@ export declare const F0TableOfContentPopover: WithDataTestIdReturnType_3<typeof
  * Internal implementation of the TableOfContentPopover component.
  * This component includes all props including private ones.
  */
-declare function F0TableOfContentPopover_2({ title, items, className, activeItem, collapsible, sortable, onReorder, showChildrenCounter, barsAlign, size, variant, }: F0TableOfContentPopoverProps): JSX_2.Element;
+declare function F0TableOfContentPopover_2({ title, items, className, activeItem, collapsible, sortable, onReorder, showChildrenCounter, barsAlign, size, variant, portalContainer, }: F0TableOfContentPopoverProps): JSX_2.Element;
 
 declare interface F0TableOfContentPopoverProps extends Omit<TOCProps, "showSearchBox" | "title" | "hideChildrenCounter"> {
     /** Optional title displayed at the top of the menu popup */
@@ -5483,6 +5591,8 @@ declare interface F0TableOfContentPopoverProps extends Omit<TOCProps, "showSearc
     size?: PopupSize;
     /** Visual variant: "dark" for light backgrounds (default), "light" for dark backgrounds */
     variant?: TableOfContentPopoverVariant;
+    /** Container element for the portal. When inside a modal, pass the modal's container to prevent focus/click issues */
+    portalContainer?: HTMLElement | null;
 }
 
 export declare const F0TagAlert: WithDataTestIdReturnType_4<ForwardRefExoticComponent<Props_2 & RefAttributes<HTMLDivElement>>>;
@@ -5948,6 +6058,30 @@ export declare type FlagAvatarVariant = Extract<AvatarVariant, {
     type: "flag";
 }>;
 
+export declare type FlatFormItem = {
+    type: "section-header";
+    id: string;
+    section: SectionElement;
+} | {
+    type: "question";
+    id: string;
+    question: QuestionElement;
+} | {
+    type: "section-end";
+    id: string;
+    sectionId: string;
+};
+
+export declare type FlatQuestion = {
+    id: string;
+    type: string;
+    required?: boolean;
+    sectionTitle?: string;
+    sectionDescription?: string;
+};
+
+export declare function flattenElements(elements: SurveyFormBuilderElement[]): FlatFormItem[];
+
 /** Flex direction */
 export declare type FlexDirectionToken = "row" | "column" | "row-reverse" | "column-reverse";
 
@@ -5960,6 +6094,23 @@ declare const fontSizes: readonly ["sm", "md", "lg"];
 
 /* Excluded from this release type: FormDefinitionItem */
 
+/**
+ * Standalone form field props — decoupled from react-hook-form.
+ * This is the minimal contract that field renderers need to operate.
+ */
+export declare interface FormFieldProps {
+    /** Current field value */
+    value: unknown;
+    /** Called when the field value changes */
+    onChange: (value: unknown) => void;
+    /** Called when the field loses focus (used for validation triggers) */
+    onBlur: () => void;
+    /** Field name (defaults to field.id if not provided) */
+    name?: string;
+    /** Ref callback for the underlying input element */
+    ref?: React.RefCallback<HTMLElement>;
+}
+
 /** Fraction tokens for proportional widths */
 export declare type FractionToken = "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "5/6";
 
@@ -6418,6 +6569,21 @@ export declare interface InitialFile {
     size?: number;
 }
 
+/**
+ * Re-inject section-end markers into a flat list that has none.
+ *
+ * Uses `inSectionQuestionIds` (the set of question IDs that originally
+ * belonged to *any* section) to determine where each section ends:
+ * - Questions in the set stay inside the current section.
+ * - Original standalone questions (NOT in the set) cause the section to close
+ *   before them so they remain standalone.
+ *
+ * This allows cross-section moves (a question from section B placed after
+ * section A's header joins section A) while keeping standalone questions
+ * outside sections unless the user explicitly drags them between section items.
+ */
+export declare function injectSectionEnds(items: FlatFormItem[], inSectionQuestionIds: Set<string>): FlatFormItem[];
+
 declare const INPUTFIELD_SIZES: readonly ["sm", "md"];
 
 declare type InputFieldInheritedProps = (typeof inputFieldInheritedProps)[number];
@@ -6658,6 +6824,10 @@ declare type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     disabled?: boolean;
 };
 
+declare type LinkQuestionProps = BaseQuestionPropsForOtherQuestionComponents & {
+    value?: string | null;
+};
+
 export declare const linkVariants: readonly ["link", "unstyled", "mention"];
 
 /**
@@ -7043,6 +7213,10 @@ declare type NumericFormatterOptions = {
     useGrouping?: boolean;
 };
 
+declare type NumericQuestionProps = BaseQuestionPropsForOtherQuestionComponents & {
+    value?: number | null;
+};
+
 /**
  * Numeric size scale matching core spacing (relativeSpacing).
  * Maps 1:1 to Tailwind classes like w-0, w-4, w-8, w-16, etc.
@@ -7111,11 +7285,61 @@ declare type NumericWithFormatter = {
 
 export declare function Ol({ children, ...props }: React.HTMLAttributes<HTMLOListElement>): JSX_2.Element;
 
+export declare type OnAddNewElementParams = {
+    type: ElementType;
+    afterId?: string;
+};
+
 declare type OnBulkActionCallback<Record extends RecordType, Filters extends FiltersDefinition> = (...args: [
 action: BulkAction,
 ...Parameters<OnSelectItemsCallback<Record, Filters>>
 ]) => void;
 
+declare type OnChangeQuestionParams = BaseQuestionOnChangeParams & ({
+    type: "text" | "longText";
+    value?: string | null;
+} | {
+    type: "rating";
+    value: number;
+    options?: {
+        value: number;
+        label: string;
+    }[];
+} | {
+    type: "select";
+    value?: string | null;
+    options: SelectQuestionOption[];
+} | {
+    type: "multi-select";
+    value?: string[] | null;
+    options: SelectQuestionOption[];
+} | {
+    type: "dropdown-single";
+    value?: string | null;
+    options?: SelectQuestionOption[];
+} | {
+    type: "numeric";
+    value?: number | null;
+} | {
+    type: "link";
+    value?: string | null;
+} | {
+    type: "date";
+    value?: Date | null;
+});
+
+export declare type OnChangeSectionParams = {
+    id: string;
+    title: string;
+    description?: string;
+    questions?: QuestionElement[];
+};
+
+export declare type OnDuplicateElementParams = {
+    elementId: string;
+    type: ElementType;
+};
+
 export declare const OneFilterPicker: <Definition extends FiltersDefinition>(props: OneFilterPickerRootProps<Definition> & {
     dataTestId?: string;
 }) => ReactElement | null;
@@ -7562,6 +7786,30 @@ declare type Props_3 = {
     list?: TagCounterItem[];
 };
 
+export declare type QuestionActionParams = {
+    questionId: string;
+    type: ActionType;
+    index: number;
+};
+
+export declare type QuestionElement = Omit<TextQuestionProps, QuestionPropsToOmit> | Omit<RatingQuestionProps & {
+    type: "rating";
+}, QuestionPropsToOmit> | Omit<SelectQuestionProps & {
+    type: "select" | "multi-select";
+}, QuestionPropsToOmit> | Omit<DropdownSingleQuestionProps & {
+    type: "dropdown-single";
+}, QuestionPropsToOmit> | Omit<NumericQuestionProps & {
+    type: "numeric";
+}, QuestionPropsToOmit> | Omit<LinkQuestionProps & {
+    type: "link";
+}, QuestionPropsToOmit> | Omit<DateQuestionProps & {
+    type: "date";
+}, QuestionPropsToOmit>;
+
+declare type QuestionPropsToOmit = "onAction" | "onChange" | "onAddNewElement";
+
+export declare type QuestionType = "rating" | "select" | "multi-select" | "dropdown-single" | "text" | "longText" | "numeric" | "link" | "date";
+
 export declare interface RadarChartConfig {
     type: "radar";
     /** Fill the radar area. @default true */
@@ -7574,6 +7822,17 @@ export declare interface RadarChartConfig {
     valueFormatter?: (value: number) => string;
 }
 
+declare type RatingQuestionProps = BaseQuestionPropsForOtherQuestionComponents & {
+    value?: number;
+} & {
+    options: {
+        value: number;
+        label: string;
+    }[];
+};
+
+export declare function reconstructElements(flatItems: FlatFormItem[]): SurveyFormBuilderElement[];
+
 /**
  * Utility type to get all possible paths through an object using dot notation
  * @template T - The object type to traverse
@@ -7741,8 +8000,24 @@ declare type SecondaryActionsDefinition = {
 
 declare type SecondaryActionsItems = SecondaryActionItem[] | SecondaryActionItem[][] | SecondaryActionGroup[];
 
+export declare type SectionActionParams = {
+    sectionId: string;
+    type: ActionType;
+    index: number;
+};
+
 /* Excluded from this release type: SectionDefinition */
 
+export declare type SectionElement = Omit<SectionProps, "onAction" | "onChange">;
+
+declare type SectionProps = {
+    id: string;
+    title: string;
+    description?: string;
+    locked?: boolean;
+    questions?: QuestionElement[];
+};
+
 /**
  * Conditional rendering for sections - can be a condition object or a function
  */
@@ -7817,6 +8092,23 @@ export declare type SelectionStatus<R extends RecordType, Filters extends Filter
     totalKnownItemsCount: number;
 };
 
+export declare type SelectQuestionOption = {
+    id?: string;
+    value: string;
+    label: string;
+    correct?: boolean;
+};
+
+declare type SelectQuestionProps = BaseQuestionPropsForOtherQuestionComponents & {
+    options: SelectQuestionOption[];
+} & ({
+    type: "select";
+    value?: string | null;
+} | {
+    type: "multi-select";
+    value?: string[] | null;
+});
+
 /**
  * Base for select-specific conditions
  */
@@ -7942,6 +8234,87 @@ declare type SummaryKey<Definition extends SummariesDefinition> = Definition ext
 
 declare type SummaryType = "sum";
 
+export declare function SurveyAnsweringForm({ elements, onSubmit, mode, title, isOpen, onClose, fullscreen: fullscreenProp, allowToChangeFullscreen, defaultValues, errorTriggerMode, }: SurveyAnsweringFormProps): JSX_2.Element;
+
+export declare type SurveyAnsweringFormMode = "stepped" | "all-questions";
+
+export declare interface SurveyAnsweringFormProps {
+    elements: SurveyFormBuilderElement[];
+    onSubmit: (answers: SurveySubmitAnswers) => Promise<SurveyFormSubmitResult> | SurveyFormSubmitResult;
+    mode: SurveyAnsweringFormMode;
+    title: string;
+    isOpen: boolean;
+    onClose: () => void;
+    fullscreen?: boolean;
+    allowToChangeFullscreen?: boolean;
+    defaultValues?: Partial<SurveyAnswers>;
+    errorTriggerMode?: F0FormErrorTriggerMode;
+}
+
+export declare type SurveyAnswers = Record<string, SurveyAnswerValue>;
+
+export declare type SurveyAnswerValue = {
+    type: "text" | "longText";
+    value: string | null;
+} | {
+    type: "rating";
+    value: number | null;
+} | {
+    type: "select";
+    value: string | null;
+} | {
+    type: "multi-select";
+    value: string[] | null;
+} | {
+    type: "dropdown-single";
+    value: string | null;
+} | {
+    type: "numeric";
+    value: number | null;
+} | {
+    type: "link";
+    value: string | null;
+} | {
+    type: "date";
+    value: Date | null;
+};
+
+export declare const SurveyFormBuilder: WithDataTestIdReturnType_7<({ elements: elementsProp, disabled, onChange, disallowOptionalQuestions, allowedQuestionTypes, applyingChanges, }: SurveyFormBuilderProps) => JSX_2.Element>;
+
+export declare type SurveyFormBuilderCallbacks = {
+    onQuestionChange?: (params: OnChangeQuestionParams) => void;
+    onSectionChange?: (params: OnChangeSectionParams) => void;
+    onAddNewElement?: (params: OnAddNewElementParams) => void;
+    onDuplicateElement?: (params: OnDuplicateElementParams) => void;
+};
+
+export declare type SurveyFormBuilderElement = {
+    type: "section";
+    section: SectionElement;
+} | {
+    type: "question";
+    question: QuestionElement;
+};
+
+export declare type SurveyFormBuilderProps = {
+    elements: SurveyFormBuilderElement[];
+    onChange: (elements: SurveyFormBuilderElement[]) => void;
+    disabled?: boolean;
+    disallowOptionalQuestions?: boolean;
+    allowedQuestionTypes?: QuestionType[];
+    applyingChanges?: boolean;
+};
+
+export declare type SurveyFormSubmitResult = {
+    success: true;
+    message?: string;
+} | {
+    success: false;
+    errors?: Record<string, string>;
+};
+
+export declare type SurveySubmitAnswers = Record<string, string | number | string[] | Date | null>;
+
 /**
  * All valid renderIf conditions for switch fields
  */
@@ -8300,6 +8673,11 @@ declare interface TextProps extends Omit<default_2.HTMLAttributes<HTMLElement>,
     required?: boolean;
 }
 
+declare type TextQuestionProps = BaseQuestionPropsForOtherQuestionComponents & {
+    type: "text" | "longText";
+    value?: string | null;
+};
+
 /**
  * Base for text-specific conditions
  */