survey-react 1.8.74 → 1.8.78

package/survey.react.d.ts

@@ -1,4 +1,4 @@
-/*Type definitions for Survey JavaScript library v1.8.74
+/*Type definitions for Survey JavaScript library v1.8.78
 Copyright (c) 2015-2021 Devsoft Baltic OÜ  - http://surveyjs.io/
 Definitions by: Devsoft Baltic OÜ <https://github.com/surveyjs/>
 */
@@ -233,6 +233,8 @@ export declare var defaultStandardCss: {
         progressText: string;
         panelWrapper: string;
         panelWrapperInRow: string;
+        separatorV2: string;
+        footer: string;
     };
     multipletext: {
         root: string;
@@ -545,6 +547,8 @@ export declare var defaultBootstrapCss: {
         progressText: string;
         panelWrapper: string;
         panelWrapperInRow: string;
+        separatorV2: string;
+        footer: string;
     };
     multipletext: {
         root: string;
@@ -861,6 +865,8 @@ export declare var defaultBootstrapMaterialCss: {
         progressText: string;
         panelWrapper: string;
         panelWrapperInRow: string;
+        separatorV2: string;
+        footer: string;
     };
     multipletext: {
         root: string;
@@ -957,6 +963,334 @@ export declare var defaultBootstrapMaterialCss: {
     };
 };
 
+export declare var defaultV2Css: {
+    root: string;
+    container: string;
+    header: string;
+    body: string;
+    bodyEmpty: string;
+    footer: string;
+    title: string;
+    description: string;
+    logo: string;
+    logoImage: string;
+    headerText: string;
+    navigationButton: string;
+    completedPage: string;
+    navigation: {
+        complete: string;
+        prev: string;
+        next: string;
+        start: string;
+        preview: string;
+        edit: string;
+    };
+    panel: {
+        title: string;
+        titleExpandable: string;
+        titleOnExpand: string;
+        titleOnError: string;
+        description: string;
+        container: string;
+        content: string;
+        icon: string;
+        iconExpanded: string;
+        footer: string;
+        requiredText: string;
+    };
+    paneldynamic: {
+        mainRoot: string;
+        root: string;
+        navigation: string;
+        title: string;
+        button: string;
+        buttonRemove: string;
+        buttonAdd: string;
+        progressTop: string;
+        progressBottom: string;
+        buttonPrev: string;
+        buttonNext: string;
+        progressContainer: string;
+        progress: string;
+        progressBar: string;
+        progressText: string;
+        separator: string;
+        separatorV2: string;
+        panelWrapper: string;
+        footer: string;
+        footerButtonsContainer: string;
+        panelWrapperInRow: string;
+    };
+    progress: string;
+    progressBar: string;
+    progressText: string;
+    progressTextInBar: string;
+    page: {
+        root: string;
+        title: string;
+        description: string;
+    };
+    pageTitle: string;
+    pageDescription: string;
+    row: string;
+    rowMultiple: string;
+    question: {
+        mainRoot: string;
+        flowRoot: string;
+        asCell: string;
+        answered: string;
+        header: string;
+        headerLeft: string;
+        headerTop: string;
+        headerBottom: string;
+        content: string;
+        contentLeft: string;
+        titleLeftRoot: string;
+        titleOnAnswer: string;
+        titleOnError: string;
+        title: string;
+        requiredText: string;
+        number: string;
+        description: string;
+        descriptionUnderInput: string;
+        comment: string;
+        other: string;
+        required: string;
+        titleRequired: string;
+        indent: number;
+        footer: string;
+        formGroup: string;
+        hasError: string;
+        disabled: string;
+    };
+    image: {
+        root: string;
+        image: string;
+    };
+    error: {
+        root: string;
+        icon: string;
+        item: string;
+        tooltip: string;
+        aboveQuestion: string;
+        locationTop: string;
+        locationBottom: string;
+    };
+    checkbox: {
+        root: string;
+        item: string;
+        itemOnError: string;
+        itemSelectAll: string;
+        itemNone: string;
+        itemDisabled: string;
+        itemChecked: string;
+        itemHover: string;
+        itemInline: string;
+        label: string;
+        labelChecked: string;
+        itemControl: string;
+        itemDecorator: string;
+        controlLabel: string;
+        materialDecorator: string;
+        other: string;
+        column: string;
+    };
+    radiogroup: {
+        root: string;
+        item: string;
+        itemOnError: string;
+        itemInline: string;
+        label: string;
+        labelChecked: string;
+        itemDisabled: string;
+        itemChecked: string;
+        itemHover: string;
+        itemControl: string;
+        itemDecorator: string;
+        controlLabel: string;
+        materialDecorator: string;
+        other: string;
+        clearButton: string;
+        column: string;
+    };
+    boolean: {
+        mainRoot: string;
+        root: string;
+        item: string;
+        itemOnError: string;
+        control: string;
+        itemChecked: string;
+        itemIndeterminate: string;
+        itemDisabled: string;
+        label: string;
+        switch: string;
+        disabledLabel: string;
+        itemDecorator: string;
+        materialDecorator: string;
+        sliderText: string;
+        slider: string;
+    };
+    text: {
+        root: string;
+        small: string;
+        controlDisabled: string;
+        onError: string;
+    };
+    multipletext: {
+        root: string;
+        item: string;
+        itemTitle: string;
+        row: string;
+        cell: string;
+    };
+    dropdown: {
+        root: string;
+        small: string;
+        control: string;
+        selectWrapper: string;
+        other: string;
+        onError: string;
+        label: string;
+        item: string;
+        itemDisabled: string;
+        itemChecked: string;
+        itemHover: string;
+        itemControl: string;
+        itemDecorator: string;
+        controlDisabled: string;
+        controlLabel: string;
+        materialDecorator: string;
+    };
+    imagepicker: {
+        mainRoot: string;
+        root: string;
+        item: string;
+        itemOnError: string;
+        itemInline: string;
+        itemChecked: string;
+        itemDisabled: string;
+        itemHover: string;
+        label: string;
+        itemControl: string;
+        image: string;
+        itemText: string;
+        clearButton: string;
+        other: string;
+    };
+    matrix: {
+        mainRoot: string;
+        tableWrapper: string;
+        root: string;
+        rowError: string;
+        cell: string;
+        headerCell: string;
+        label: string;
+        itemOnError: string;
+        itemValue: string;
+        itemChecked: string;
+        itemDisabled: string;
+        itemHover: string;
+        materialDecorator: string;
+        itemDecorator: string;
+        cellText: string;
+        cellTextSelected: string;
+        cellTextDisabled: string;
+    };
+    matrixdropdown: {
+        mainRoot: string;
+        root: string;
+        cell: string;
+        headerCell: string;
+        rowTextCell: string;
+    };
+    matrixdynamic: {
+        mainRoot: string;
+        root: string;
+        cell: string;
+        headerCell: string;
+        rowTextCell: string;
+        button: string;
+        detailRow: string;
+        detailButton: string;
+        detailButtonExpanded: string;
+        detailIcon: string;
+        detailIconExpanded: string;
+        detailPanelCell: string;
+        actionsCell: string;
+        buttonAdd: string;
+        buttonRemove: string;
+        iconAdd: string;
+        iconRemove: string;
+    };
+    rating: {
+        root: string;
+        item: string;
+        itemOnError: string;
+        itemHover: string;
+        selected: string;
+        minText: string;
+        itemText: string;
+        maxText: string;
+        itemDisabled: string;
+    };
+    comment: {
+        root: string;
+        small: string;
+        controlDisabled: string;
+        onError: string;
+    };
+    expression: string;
+    file: {
+        root: string;
+        other: string;
+        placeholderInput: string;
+        preview: string;
+        fileSign: string;
+        fileList: string;
+        fileSignBottom: string;
+        fileDecorator: string;
+        onError: string;
+        fileDecoratorDrag: string;
+        fileInput: string;
+        noFileChosen: string;
+        chooseFile: string;
+        disabled: string;
+        removeButton: string;
+        removeButtonBottom: string;
+        removeFile: string;
+        removeFileSvg: string;
+        wrapper: string;
+        defaultImage: string;
+        removeFileButton: string;
+        dragAreaPlaceholder: string;
+    };
+    signaturepad: {
+        root: string;
+        small: string;
+        controls: string;
+        placeholder: string;
+        clearButton: string;
+    };
+    saveData: {
+        root: string;
+        saving: string;
+        error: string;
+        success: string;
+        saveAgainButton: string;
+    };
+    window: {
+        root: string;
+        body: string;
+        header: {
+            root: string;
+            title: string;
+            button: string;
+            buttonExpanded: string;
+            buttonCollapsed: string;
+        };
+    };
+};
+
 export declare var modernCss: {
     root: string;
     container: string;
@@ -1011,6 +1345,8 @@ export declare var modernCss: {
         separator: string;
         panelWrapper: string;
         panelWrapperInRow: string;
+        separatorV2: string;
+        footer: string;
     };
     progress: string;
     progressBar: string;
@@ -1453,6 +1789,10 @@ export interface IAction {
             * Set it to true to make the tabIndex -1 to disable keyboard navigation to this item
             */
         disableTabStop?: boolean;
+        /**
+            * Set it to false to force action "large" mode even if has icon and does not fit to action bar space
+            */
+        disableShrink?: boolean;
         /**
             * Action button display mode
             */
@@ -1485,6 +1825,7 @@ export declare class Action extends Base implements IAction {
         visibleIndex: number;
         mode: "large" | "small" | "popup";
         disableTabStop: boolean;
+        disableShrink: boolean;
         get disabled(): boolean;
         get hasTitle(): boolean;
         get isVisible(): boolean;
@@ -1500,6 +1841,7 @@ export declare class AdaptiveActionContainer<T extends Action = Action> extends
     protected dotsItem: Action;
     protected dotsItemPopupModel: PopupModel;
     minVisibleItemsCount: number;
+    protected invisibleItemsListModel: ListModel;
     constructor();
     protected onSet(): void;
     protected onPush(item: T): void;
@@ -1528,6 +1870,12 @@ export declare class ActionContainer<T extends Action = Action> extends Base {
     resetResponsivityManager(): void;
 }
 
+export declare class TooltipManager {
+    tooltipElement: HTMLElement;
+    constructor(tooltipElement: HTMLElement);
+    dispose(): void;
+}
+
 export declare class Survey extends SurveyElementBase<any, any> implements ISurveyCreator {
     static get cssType(): string;
     static set cssType(value: string);
@@ -1694,6 +2042,8 @@ export declare class SurveyElementErrors extends ReactSurveyElement {
     protected get element(): SurveyElement;
     protected get location(): string;
     protected canRender(): boolean;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    componentWillUnmount(): void;
     protected renderElement(): JSX.Element;
 }
 export declare class SurveyQuestionAndErrorsCell extends ReactSurveyElement {
@@ -1975,10 +2325,11 @@ export declare class SurveyQuestionPanelDynamic extends SurveyQuestionElementBas
     handleOnRangeChange(event: any): void;
     protected renderElement(): JSX.Element;
     protected renderNavigator(): JSX.Element;
-    protected rendrerPrevButton(): JSX.Element;
-    protected rendrerNextButton(): JSX.Element;
+    protected rendrerPrevButton(viewBox?: string, icon?: JSX.Element): JSX.Element;
+    protected rendrerNextButton(viewBox?: string, icon?: JSX.Element): JSX.Element;
     protected renderRange(): JSX.Element;
     protected renderAddRowButton(): JSX.Element;
+    protected renderNavigatorV2(): JSX.Element;
 }
 export declare class SurveyQuestionPanelDynamicItem extends SurveyPanel {
     constructor(props: any);
@@ -2140,10 +2491,12 @@ export declare class PopupContainer extends SurveyElementBase<any, any> {
     renderPointer(): JSX.Element;
     renderHeader(): JSX.Element;
     renderContent(): JSX.Element;
+    renderCancelButton(): JSX.Element;
+    renderApplyButton(): JSX.Element;
     renderFooter(): JSX.Element;
     render(): JSX.Element;
 }
-export declare function showModal(componentName: string, data: any, onApply: () => boolean, onCancel?: () => void, cssClass?: string, title?: string): void;
+export declare function showModal(componentName: string, data: any, onApply: () => boolean, onCancel?: () => void, cssClass?: string, title?: string, displayMode?: "popup" | "overlay"): void;
 export {};
 
 interface IListProps {
@@ -2361,11 +2714,17 @@ export declare var settings: {
             */
         executeSkipTriggerOnValueChanged: boolean;
         /**
-            * Set this property to change readOnlyCommentRenderMode: "textarea" (default) or "div"
+            * Specifies how the input field of [Comment](https://surveyjs.io/Documentation/Library?id=questioncommentmodel) questions is rendered in the read-only mode.
+            * Available values:
+            * "textarea" (default) - A 'textarea' element is used to render a Comment question's input field.
+            * "div" - A 'div' element is used to render a Comment question's input field.
             */
         readOnlyCommentRenderMode: string;
         /**
-            * Set this property to change readOnlyTextRenderMode: "input" (default) or "div"
+            * Specifies how the input field of [Text](https://surveyjs.io/Documentation/Library?id=questiontextmodel) questions is rendered in the read-only mode.
+            * Available values:
+            * "input" (default) - An 'input' element is used to render a Text question's input field.
+            * "div" - A 'div' element is used to render a Text question's input field.
             */
         readOnlyTextRenderMode: string;
         /**
@@ -2424,7 +2783,7 @@ export declare var settings: {
             * Set the value as string "yyyy-mm-dd". text questions with inputType "date" will not allow to set to survey date that greater than this value
             */
         maxDate: string;
-        showModal: (componentName: string, data: any, onApply: () => boolean, onCancel?: () => void, cssClass?: string, title?: string) => void;
+        showModal: (componentName: string, data: any, onApply: () => boolean, onCancel?: () => void, cssClass?: string, title?: string, displayMode?: "popup" | "overlay") => void;
         supportCreatorV2: boolean;
         /**
             * Specifies a list of custom icons.
@@ -2530,7 +2889,7 @@ export declare class NumericValidator extends SurveyValidator {
     * Validate text values.
     */
 export declare class TextValidator extends SurveyValidator {
-        constructor(minLength?: number, maxLength?: number, allowDigits?: boolean);
+        constructor();
         getType(): string;
         validate(value: any, name?: string, values?: any, properties?: any): ValidatorResult;
         protected getDefaultErrorText(name: string): any;
@@ -2613,7 +2972,7 @@ export declare class ExpressionValidator extends SurveyValidator {
   * It has two main properties: value and text. If text is empty, value is used for displaying.
   * The text property is localizable and support markdown.
   */
-export declare class ItemValue extends Base {
+export declare class ItemValue extends Base implements IShortcutText {
     protected typeName: string;
     [index: string]: any;
     static get Separator(): string;
@@ -2645,6 +3004,7 @@ export declare class ItemValue extends Base {
     get text(): string;
     set text(newText: string);
     get calculatedText(): string;
+    get shortcutText(): string;
     getData(): any;
     toJSON(): any;
     setData(value: any): void;
@@ -3008,7 +3368,10 @@ export interface ISurveyImpl {
 export interface IConditionRunner {
     runCondition(values: HashTable<any>, properties: HashTable<any>): any;
 }
-export interface ISurveyElement {
+export interface IShortcutText {
+    shortcutText: string;
+}
+export interface ISurveyElement extends IShortcutText {
     name: string;
     isVisible: boolean;
     isReadOnly: boolean;
@@ -3017,7 +3380,7 @@ export interface ISurveyElement {
     containsErrors: boolean;
     parent: IPanel;
     skeletonComponentName: string;
-    setSurveyImpl(value: ISurveyImpl): any;
+    setSurveyImpl(value: ISurveyImpl, isLight?: boolean): any;
     onSurveyLoad(): any;
     onFirstRendering(): any;
     getType(): string;
@@ -3165,13 +3528,19 @@ export declare abstract class SurveyElementCore extends Base implements ILocaliz
         abstract getRendererContext(locStr: LocalizableString): any;
         abstract getProcessedText(text: string): string;
 }
+export declare enum DragTypeOverMeEnum {
+        InsideEmptyPanel = 1,
+        MultilineRight = 2,
+        MultilineLeft = 3
+}
 /**
     * Base class of SurveyJS Elements.
     */
 export declare class SurveyElement extends SurveyElementCore implements ISurveyElement {
         stateChangedCallback: () => void;
         static getProgressInfoByElements(children: Array<SurveyElement>, isRequired: boolean): IProgressInfo;
-        isDragOverMe: boolean;
+        dragTypeOverMe: DragTypeOverMeEnum;
+        isDragMe: boolean;
         readOnlyChangedCallback: () => void;
         static ScrollElementToTop(elementId: string): boolean;
         static GetFirstNonTextElement(elements: any, removeSpaces?: boolean): any;
@@ -3217,6 +3586,7 @@ export declare class SurveyElement extends SurveyElementCore implements ISurveyE
             */
         toggleState(): boolean;
         get hasStateButton(): boolean;
+        get shortcutText(): string;
         getTitleToolbar(): AdaptiveActionContainer;
         get titleActions(): Array<any>;
         getTitleActions(): Array<any>;
@@ -3225,7 +3595,7 @@ export declare class SurveyElement extends SurveyElementCore implements ISurveyE
         getTitleComponentName(): string;
         get titleTabIndex(): number;
         get titleAriaExpanded(): boolean;
-        setSurveyImpl(value: ISurveyImpl): void;
+        setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
         protected get surveyImpl(): ISurveyImpl;
         get data(): ISurveyData;
         /**
@@ -4642,10 +5012,11 @@ export declare class QuestionMatrixDropdownModel extends QuestionMatrixDropdownM
         protected getSearchableItemValueKeys(keys: Array<string>): void;
 }
 
-export declare class MatrixDynamicRowModel extends MatrixDropdownRowModelBase {
+export declare class MatrixDynamicRowModel extends MatrixDropdownRowModelBase implements IShortcutText {
         index: number;
         constructor(index: number, data: IMatrixDropdownData, value: any);
         get rowName(): string;
+        get shortcutText(): string;
 }
 /**
     * A Model for a matrix dymanic question. You may use a dropdown, checkbox, radiogroup, text and comment questions as a cell editors.
@@ -4655,7 +5026,7 @@ export declare class QuestionMatrixDynamicModel extends QuestionMatrixDropdownMo
         onGetValueForNewRowCallBack: (sender: QuestionMatrixDynamicModel) => any;
         constructor(name: string);
         dragDropMatrixRows: DragDropMatrixRows;
-        setSurveyImpl(value: ISurveyImpl): void;
+        setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
         startDragMatrixRow(event: PointerEvent, row: MatrixDropdownRowModelBase): void;
         getType(): string;
         get isRowsDynamic(): boolean;
@@ -5058,7 +5429,7 @@ export declare class QuestionMultipleTextModel extends Question implements IMult
         colCountChangedCallback: () => void;
         constructor(name: string);
         getType(): string;
-        setSurveyImpl(value: ISurveyImpl): void;
+        setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
         get isAllowTitleLeft(): boolean;
         get hasSingleInput(): boolean;
         onSurveyLoad(): void;
@@ -5166,7 +5537,7 @@ export declare class PanelModelBase extends SurveyElement implements IPanel, ICo
         onGetQuestionTitleLocation: () => string;
         constructor(name?: string);
         getType(): string;
-        setSurveyImpl(value: ISurveyImpl): void;
+        setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
         endLoadingFromJson(): void;
         get hasTitle(): boolean;
         protected canShowTitle(): boolean;
@@ -5452,8 +5823,6 @@ export declare class PanelModelBase extends SurveyElement implements IPanel, ICo
     * It may contain questions and other panels.
     */
 export declare class PanelModel extends PanelModelBase implements IElement {
-        minWidth?: string;
-        maxWidth?: string;
         constructor(name?: string);
         getType(): string;
         get contentId(): string;
@@ -5525,6 +5894,16 @@ export declare class PanelModel extends PanelModelBase implements IElement {
             */
         get width(): string;
         set width(val: string);
+        /**
+            * Use it to set the specific minWidth constraint to the panel like css style (%, px, em etc).
+            */
+        get minWidth(): string;
+        set minWidth(val: string);
+        /**
+            * Use it to set the specific maxWidth constraint to the panel like css style (%, px, em etc).
+            */
+        get maxWidth(): string;
+        set maxWidth(val: string);
         /**
             * The left indent. Set this property to increase the panel left indent.
             */
@@ -5568,6 +5947,7 @@ export declare class PanelModel extends PanelModelBase implements IElement {
         protected getCssError(cssClasses: any): string;
         protected onVisibleChanged(): void;
         needResponsiveWidth(): boolean;
+        focusIn: () => void;
 }
 
 /**
@@ -5732,6 +6112,8 @@ export declare class Question extends SurveyElement implements IQuestion, ICondi
             */
         onReadyChanged: EventBase<Question>;
         isReadOnlyRenderDiv(): boolean;
+        get isErrorsModeTooltip(): boolean;
+        get hasParent(): boolean;
         constructor(name: string);
         protected createLocTitleProperty(): LocalizableString;
         getSurvey(live?: boolean): ISurvey;
@@ -5825,7 +6207,7 @@ export declare class Question extends SurveyElement implements IQuestion, ICondi
             */
         moveTo(container: IPanel, insertBefore?: any): boolean;
         getProgressInfo(): IProgressInfo;
-        setSurveyImpl(value: ISurveyImpl): void;
+        setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
         getDataFilteredValues(): any;
         getDataFilteredProperties(): any;
         /**
@@ -6000,6 +6382,7 @@ export declare class Question extends SurveyElement implements IQuestion, ICondi
             * @param onError set this parameter to true, to focus the input with the first error, other wise the first input will be focused.
             */
         focus(onError?: boolean): void;
+        focusIn: () => void;
         protected fireCallback(callback: () => void): void;
         getOthersMaxLength(): any;
         protected onCreating(): void;
@@ -6092,6 +6475,10 @@ export declare class Question extends SurveyElement implements IQuestion, ICondi
         createValueCopy(): any;
         protected getUnbindValue(value: any): any;
         protected isValueSurveyElement(val: any): boolean;
+        /**
+            * Return true if there is a parent (page or panel) and it is visible
+            */
+        get isParentVisible(): boolean;
         clearValueIfInvisible(): void;
         get displayValue(): any;
         /**
@@ -6478,7 +6865,7 @@ export declare class QuestionSelectBase extends Question {
         supportNone(): boolean;
         protected isSupportProperty(propName: string): boolean;
         protected onCheckForErrors(errors: Array<SurveyError>, isOnValueChanged: boolean): void;
-        setSurveyImpl(value: ISurveyImpl): void;
+        setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
         protected setSurveyCore(value: ISurvey): void;
         protected getStoreOthersAsComment(): boolean;
         onSurveyLoad(): void;
@@ -6627,7 +7014,7 @@ export declare class QuestionRankingModel extends QuestionCheckboxModel {
     protected isItemCurrentDropTarget(item: ItemValue): boolean;
     get ghostPositionCssClass(): string;
     getNumberByIndex(index: number): string;
-    setSurveyImpl: (value: ISurveyImpl) => void;
+    setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
     onSurveyValueChanged(newValue: any): void;
     protected onVisibleChoicesChanged: () => void;
     localeChanged: () => void;
@@ -7045,6 +7432,9 @@ export declare class QuestionExpressionModel extends Question {
         set minimumFractionDigits(val: number);
         get runIfReadOnly(): boolean;
         set runIfReadOnly(val: boolean);
+        get formatedValue(): string;
+        protected updateFormatedValue(): void;
+        protected onValueChanged(): void;
         protected getDisplayValueCore(keysAsText: boolean, value: any): any;
         /**
             * You may set this property to "decimal", "currency", "percent" or "date". If you set it to "currency", you may use the currency property to display the value in currency different from USD.
@@ -7443,7 +7833,7 @@ export declare class QuestionPanelDynamicModel extends Question implements IQues
         currentIndexChangedCallback: () => void;
         constructor(name: string);
         get hasSingleInput(): boolean;
-        setSurveyImpl(value: ISurveyImpl): void;
+        setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
         getType(): string;
         get isCompositeQuestion(): boolean;
         clearOnDeletingContainer(): void;
@@ -8310,6 +8700,20 @@ export declare class SurveyModel extends SurveyElementCore implements ISurvey, I
             * <br/> `options.htmlElement` - an HTML element bound to the panel object
             */
         onAfterRenderPanel: EventBase<SurveyModel>;
+        /**
+            * The event occurs when an element within a question gets focus.
+            * <br/> `sender` - A [survey](https://surveyjs.io/Documentation/Library?id=surveymodel) object that fires the event.
+            * <br/> `options.question` - A [question](https://surveyjs.io/Documentation/Library?id=Question) whose child element gets focus.
+            * @see onFocusInPanel
+            */
+        onFocusInQuestion: EventBase<SurveyModel>;
+        /**
+            * The event occurs when an element within a panel gets focus.
+            * <br/> `sender` - A [survey](https://surveyjs.io/Documentation/Library?id=surveymodel) object that fires the event.
+            * <br/> `options.panel` - A [panel](https://surveyjs.io/Documentation/Library?id=PanelModelBase) whose child element gets focus.
+            * @see onFocusInQuestion
+            */
+        onFocusInPanel: EventBase<SurveyModel>;
         /**
             * The event is fired on adding a new row in Matrix Dynamic question.
             * <br/> `sender` - the survey object that fires the event
@@ -9491,11 +9895,12 @@ export declare class SurveyModel extends SurveyElementCore implements ISurvey, I
             * Gets whether the current page is the first one.
             */
         get isFirstPage(): boolean;
-        get isShowPrevButton(): boolean;
         /**
             * Gets whether the current page is the last one.
             */
         get isLastPage(): boolean;
+        get isShowPrevButton(): boolean;
+        get isShowNextButton(): boolean;
         /**
             * Completes the survey.
             *
@@ -9567,6 +9972,8 @@ export declare class SurveyModel extends SurveyElementCore implements ISurvey, I
         afterRenderQuestion(question: IQuestion, htmlElement: HTMLElement): void;
         afterRenderQuestionInput(question: IQuestion, htmlElement: HTMLElement): void;
         afterRenderPanel(panel: IElement, htmlElement: HTMLElement): void;
+        whenQuestionFocusIn(question: IQuestion): void;
+        whenPanelFocusIn(panel: IPanel): void;
         matrixBeforeRowAdded(options: any): void;
         matrixRowAdded(question: IQuestion, row: any): void;
         getQuestionByValueNameFromArray(valueName: string, name: string, index: number): IQuestion;
@@ -10455,7 +10862,7 @@ export declare abstract class QuestionCustomModelBase extends Question implement
     onFirstRendering(): void;
     protected abstract getElement(): SurveyElement;
     protected initElement(el: SurveyElement): void;
-    setSurveyImpl(value: ISurveyImpl): void;
+    setSurveyImpl(value: ISurveyImpl, isLight?: boolean): void;
     onSurveyLoad(): void;
     afterRenderQuestionElement(el: HTMLElement): void;
     afterRender(el: any): void;
@@ -10585,6 +10992,7 @@ export declare class ListModel extends ActionContainer {
     getItemIndent: (itemValue: any) => string;
     get filteredTextPlaceholder(): any;
     onKeyDown(event: KeyboardEvent): void;
+    onPointerDown(event: PointerEvent, item: any): void;
     refresh(): void;
 }
 
@@ -10601,13 +11009,14 @@ export declare class PopupModel<T = any> extends Base {
     onShow: () => void;
     cssClass: string;
     title: string;
+    displayMode: "popup" | "overlay";
     constructor(contentComponentName: string, contentComponentData: T, verticalPosition?: VerticalPosition, horizontalPosition?: HorizontalPosition, showPointer?: boolean, isModal?: boolean, onCancel?: () => void, onApply?: () => boolean, onHide?: () => void, onShow?: () => void, cssClass?: string, title?: string);
     get isVisible(): boolean;
     set isVisible(value: boolean);
     toggleVisibility(): void;
     onVisibilityChanged: (isVisible: boolean) => void;
 }
-export declare function createPopupModalViewModel(componentName: string, data: any, onApply: () => boolean, onCancel?: () => void, onHide?: () => void, onShow?: () => void, cssClass?: string, title?: string): PopupBaseViewModel;
+export declare function createPopupModalViewModel(componentName: string, data: any, onApply: () => boolean, onCancel?: () => void, onHide?: () => void, onShow?: () => void, cssClass?: string, title?: string, displayMode?: "popup" | "overlay"): PopupBaseViewModel;
 export declare class PopupBaseViewModel extends Base {
     targetElement?: HTMLElement;
     top: string;
@@ -10625,6 +11034,8 @@ export declare class PopupBaseViewModel extends Base {
     get contentComponentData(): any;
     get showPointer(): boolean;
     get isModal(): boolean;
+    get showFooter(): boolean;
+    get isOverlay(): boolean;
     get styleClass(): string;
     onKeyDown(event: any): void;
     updateOnShowing(): void;
@@ -10707,11 +11118,16 @@ export declare class DragDropSurveyElements extends DragDropCore<any> {
     protected prevIsEdge: any;
     protected ghostSurveyElement: IElement;
     protected get draggedElementType(): string;
+    protected isDraggedElementSelected: boolean;
     startDragToolboxItem(event: PointerEvent, draggedElementJson: JsonObject): void;
+    startDragSurveyElement(event: PointerEvent, draggedElement: any, isElementSelected?: boolean): void;
+    protected createDraggedElementShortcut(text: string, draggedElementNode?: HTMLElement, event?: PointerEvent): HTMLElement;
+    protected createDraggedElementIcon(): HTMLElement;
+    protected getDraggedElementClass(): string;
     protected createElementFromJson(json: object): HTMLElement;
-    protected getShortcutText(draggedElement: any): string;
     protected getDropTargetByDataAttributeValue(dataAttributeValue: string, dropTargetNode: HTMLElement, event: PointerEvent): any;
-    protected isDropTargetValid(dropTarget: SurveyElement, isBottom: boolean): boolean;
+    protected isDropTargetValid(dropTarget: SurveyElement): boolean;
+    protected calculateIsBottom(clientY: number, dropTargetNode?: HTMLElement): boolean;
     protected isDropTargetDoesntChanged(newIsBottom: boolean): boolean;
     protected findDeepestDropTargetChild(parent: HTMLElement): HTMLElement;
     protected afterDragOver(): void;
@@ -10725,11 +11141,10 @@ export declare class DragDropSurveyElements extends DragDropCore<any> {
 
 export declare class DragDropChoices extends DragDropCore<QuestionSelectBase> {
     protected get draggedElementType(): string;
-    protected getShortcutText(draggedElement: ItemValue): string;
-    protected createDraggedElementShortcut(text: string, draggedElementNode: HTMLElement): HTMLElement;
+    protected createDraggedElementShortcut(text: string, draggedElementNode: HTMLElement, event: PointerEvent): HTMLElement;
     protected findDropTargetNodeByDragOverNode(dragOverNode: HTMLElement): HTMLElement;
     protected getDropTargetByDataAttributeValue(dataAttributeValue: string): ItemValue;
-    protected isDropTargetValid(dropTarget: ItemValue, isBottom: boolean, dropTargetNode?: HTMLElement): boolean;
+    protected isDropTargetValid(dropTarget: ItemValue): boolean;
     protected calculateIsBottom(clientY: number): boolean;
     protected afterDragOver(dropTargetNode: HTMLElement): void;
     protected doDrop(): any;
@@ -10829,7 +11244,6 @@ export declare class QuestionMatrixBaseModel<TRow, TColumn> extends Question {
 export declare class DragDropMatrixRows extends DragDropCore<QuestionMatrixDynamicModel> {
     protected get draggedElementType(): string;
     protected ghostPositionChanged(): void;
-    protected getShortcutText(draggedElement: any): string;
     protected getDropTargetByDataAttributeValue(dataAttributeValue: any): MatrixDropdownRowModelBase;
     protected isDropTargetValid(dropTarget: any): boolean;
     protected findDropTargetNodeByDragOverNode(dragOverNode: HTMLElement): HTMLElement;
@@ -10841,12 +11255,14 @@ export declare class DragDropRankingChoices extends DragDropChoices {
     protected get draggedElementType(): string;
     protected createDraggedElementShortcut(text: string, draggedElementNode: HTMLElement): HTMLElement;
     protected getDropTargetByDataAttributeValue(dataAttributeValue: string): ItemValue;
-    protected isDropTargetValid(dropTarget: ItemValue, isBottom: boolean, dropTargetNode?: HTMLElement): boolean;
+    protected findDropTargetNodeByDragOverNode(dragOverNode: HTMLElement): HTMLElement;
+    protected isDropTargetValid(dropTarget: ItemValue, dropTargetNode?: HTMLElement): boolean;
     protected calculateIsBottom(clientY: number): boolean;
+    protected doDragOver: () => any;
     protected afterDragOver(dropTargetNode: HTMLElement): void;
     protected ghostPositionChanged(): void;
+    protected doBanDropHere: () => any;
     protected doDrop: () => any;
-    protected handleEscapeButton: (event: KeyboardEvent) => void;
     protected doClear: () => void;
 }
 
@@ -10934,17 +11350,19 @@ export declare abstract class DragDropCore<T> extends Base {
     protected get dropTargetDataAttributeName(): string;
     protected get survey(): SurveyModel;
     prevDropTarget: any;
-    protected draggedElementShortcut: HTMLElement;
+    protected draggedElementShortcut: any;
+    protected allowDropHere: boolean;
     constructor(surveyValue?: ISurvey, creator?: any);
     startDrag(event: PointerEvent, draggedElement: any, parentElement?: any, draggedElementNode?: HTMLElement): void;
     protected isDropTargetDoesntChanged(newIsBottom: boolean): boolean;
     protected doStartDrag(): void;
-    protected abstract getShortcutText(draggedElement: any): string;
-    protected createDraggedElementShortcut(text: string, draggedElementNode?: HTMLElement): HTMLElement;
+    protected getShortcutText(draggedElement: IShortcutText): string;
+    protected createDraggedElementShortcut(text: string, draggedElementNode?: HTMLElement, event?: PointerEvent): HTMLElement;
+    protected getDraggedElementClass(): string;
     protected doDragOver(dropTargetNode?: HTMLElement): void;
     protected afterDragOver(dropTargetNode?: HTMLElement): void;
     getGhostPosition(item: any): string;
-    protected abstract isDropTargetValid(dropTarget: any, isBottom: boolean, dropTargetNode?: HTMLElement): boolean;
+    protected abstract isDropTargetValid(dropTarget: any, dropTargetNode?: HTMLElement): boolean;
     protected handleEscapeButton: (event: KeyboardEvent) => void;
     protected banDropHere: () => void;
     protected doBanDropHere: () => void;
@@ -10952,7 +11370,7 @@ export declare abstract class DragDropCore<T> extends Base {
     protected getDropTargetByNode(dropTargetNode: HTMLElement, event: PointerEvent): any;
     protected abstract getDropTargetByDataAttributeValue(dataAttributeValue: string, dropTargetNode?: HTMLElement, event?: PointerEvent): any;
     protected calculateMiddleOfHTMLElement(HTMLElement: HTMLElement): number;
-    protected calculateIsBottom(clientY: number, dropTargetNode?: HTMLElement): boolean;
+    protected abstract calculateIsBottom(clientY: number, dropTargetNode?: HTMLElement): boolean;
     protected findDropTargetNodeByDragOverNode(dragOverNode: HTMLElement): HTMLElement;
     protected abstract doDrop(): any;
     protected clear: () => void;