survey-react 1.11.3 → 1.11.5

package/survey.react.d.ts

@@ -13,6 +13,9 @@ declare module "global_variables_utils" {
         static requestAnimationFrame(callback: FrameRequestCallback): number;
         static addEventListener(type: string, listener: (e?: any) => void): void;
         static removeEventListener(type: string, listener: (e?: any) => void): void;
+        static matchMedia(mediaQueryString: string): {
+            matches: boolean;
+        } | null;
     }
     export class DomDocumentHelper {
         static isAvailable(): boolean;
@@ -188,6 +191,9 @@ declare module "surveyStrings" {
         localeNames: {
             [index: string]: any;
         };
+        localeDirections: {
+            [index: string]: any;
+        };
         supportedLocales: any[];
         currentLocale: string;
         defaultLocale: string;
@@ -986,6 +992,7 @@ declare module "list" {
         searchClearButtonIcon: string;
         loadingIndicator: string;
         itemSelected: string;
+        itemGroup: string;
         itemWithIcon: string;
         itemDisabled: string;
         itemFocused: string;
@@ -1056,6 +1063,7 @@ declare module "list" {
             searchClearButtonIcon: string;
             loadingIndicator: string;
             itemSelected: string;
+            itemGroup: string;
             itemWithIcon: string;
             itemDisabled: string;
             itemFocused: string;
@@ -1325,6 +1333,7 @@ declare module "actions/action" {
         get disabled(): boolean;
         get canShrink(): boolean;
         get hasTitle(): boolean;
+        get hasSubItems(): boolean;
         getActionBarItemTitleCss(): string;
         getActionBarItemCss(): string;
         getActionRootCss(): string;
@@ -1357,7 +1366,7 @@ declare module "actions/action" {
         private raiseUpdate;
         constructor(innerItem: IAction);
         private createLocTitle;
-        setItems(items: Array<IAction>, onSelectionChanged?: (item: Action, ...params: any[]) => void): void;
+        setSubItems(options: IListModel): void;
         location?: string;
         id: string;
         private _visible;
@@ -1494,6 +1503,7 @@ declare module "defaultCss/defaultV2Css" {
     export var surveyCss: any;
     export var defaultV2Css: {
         root: string;
+        rootProgress: string;
         rootMobile: string;
         rootAnimationDisabled: string;
         rootReadOnly: string;
@@ -2833,7 +2843,7 @@ declare module "question_custom" {
          */
         onPropertyChanged?(question: Question, propertyName: string, newValue: any): void;
         /**
-         * A function that is called after the question value is changed.
+         * A function that is called after the question value is changed in the UI.
          *
          * Parameters:
          *
@@ -2843,10 +2853,12 @@ declare module "question_custom" {
          * The question's [name](https://surveyjs.io/Documentation/Library?id=Question#name).
          * - `newValue`: `any`\
          * A new value for the question.
+         *
+         * If you want to perform some actions when the value is changed in code as well as in the UI, implement the [`onValueSet`](https://surveyjs.io/form-library/documentation/api-reference/icustomquestiontypeconfiguration#onValueSet) function.
          */
         onValueChanged?(question: Question, name: string, newValue: any): void;
         /**
-         * A function that is called before a question value is changed.
+         * A function that is called before a question value is changed in the UI.
          *
          * This function should return the value you want to save: `newValue`, a custom value, or `undefined` if you want to clear the question value.
          *
@@ -2914,6 +2926,21 @@ declare module "question_custom" {
          * @returns An error text.
          */
         getErrorText?: (question: Question) => string;
+        /**
+         * A function that is called after the question value is set.
+         *
+         * Parameters:
+         *
+         * - `question`: [Question](https://surveyjs.io/Documentation/Library?id=Question)\
+         * A custom question.
+         * - `newValue`: `any`\
+         * A new value for the question.
+         *
+         * Unlike the [`onValueChanged`](https://surveyjs.io/form-library/documentation/api-reference/icustomquestiontypeconfiguration#onValueChanged) function, which is called only when the question value is changed in the UI, `onValueSet` is called when the value is changed in code as well.
+         *
+         * [View Demo](https://surveyjs.io/survey-creator/examples/smart-search-input/ (linkStyle))
+         */
+        onValueSet?: (question: Question, newValue: any) => void;
         onSetQuestionValue?: (question: Question, newValue: any) => void;
         valueToQuestion?: (val: any) => any;
         valueFromQuestion?: (val: any) => any;
@@ -3243,6 +3270,7 @@ declare module "panel" {
         showTitle: boolean;
         get hasTitle(): boolean;
         delete(doDispose?: boolean): void;
+        private deletePanel;
         protected removeFromParent(): void;
         protected canShowTitle(): boolean;
         showDescription: boolean;
@@ -3454,6 +3482,8 @@ declare module "panel" {
         get questionTitleLocation(): string;
         set questionTitleLocation(value: string);
         getQuestionTitleLocation(): string;
+        availableQuestionTitleWidth(): boolean;
+        hasElementWithTitleLocationLeft(): boolean;
         /**
          * Sets consistent width for question titles in CSS values. Applies only when [`questionTitleLocation`](#questionTitleLocation) evaluates to `"left"`.
          *
@@ -3482,6 +3512,7 @@ declare module "panel" {
         private updateRowsOnElementAdded;
         protected onAddElement(element: IElement, index: number): void;
         protected onRemoveElement(element: IElement): void;
+        private onRemoveElementNotifySurvey;
         private onElementVisibilityChanged;
         private onElementStartWithNewLineChanged;
         private updateRowsVisibility;
@@ -4714,6 +4745,11 @@ declare module "question_baseselect" {
         get hasHeadItems(): boolean;
         get hasFootItems(): boolean;
         get columns(): any[];
+        protected getObservedElementSelector(): string;
+        protected supportResponsiveness(): boolean;
+        allowMultiColumns: boolean;
+        protected onBeforeSetCompactRenderer(): void;
+        protected onBeforeSetDesktopRenderer(): void;
         get hasColumns(): boolean;
         get rowLayout(): boolean;
         get blockedRow(): boolean;
@@ -4738,6 +4774,10 @@ declare module "question_baseselect" {
         protected getDefaultItemComponent(): string;
         /**
          * The name of a component used to render items.
+         *
+         * [View Dropdown Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
+         *
+         * [View Ranking Demo](https://surveyjs.io/form-library/examples/dropdown-box-with-custom-items/ (linkStyle))
          */
         get itemComponent(): string;
         set itemComponent(value: string);
@@ -4957,7 +4997,7 @@ declare module "question_expression" {
         unlocCalculation(): void;
         runCondition(values: HashTable<any>, properties: HashTable<any>): void;
         protected canCollectErrors(): boolean;
-        protected hasRequiredError(): boolean;
+        hasRequiredError(): boolean;
         private createRunner;
         /**
          * The maximum number of fraction digits. Applies only if the `displayStyle` property is not `"none"`. Accepts values in the range from -1 to 20, where -1 disables the property.
@@ -5399,6 +5439,10 @@ declare module "utils/devices" {
     };
     export let IsTouch: boolean;
     export function _setIsTouch(val: boolean): void;
+    export type MatchMediaMethod = ((query: string) => {
+        matches: boolean;
+    } | null) | null;
+    export function detectMouseSupport(matchMedia: MatchMediaMethod): boolean;
 }
 declare module "dragdrop/dom-adapter" {
     import { IDragDropEngine } from "dragdrop/engine";
@@ -7968,6 +8012,7 @@ declare module "survey-events-api" {
          * A Boolean property that you can set to `false` if you want to cancel the drag and drop operation.
          */
         allow: boolean;
+        allowMultipleElementsInRow?: boolean;
         /**
          * Obsolete. Use `options.draggedElement` instead.
          */
@@ -8528,6 +8573,7 @@ declare module "mask/mask_utils" {
 }
 declare module "mask/mask_base" {
     import { Base } from "base";
+    import { ISurvey } from "base-interfaces";
     import { IInputMask, IMaskedInputResult, ITextInputParams } from "mask/mask_utils";
     /**
      * A base class for classes that implement input masks:
@@ -8544,6 +8590,8 @@ declare module "mask/mask_base" {
          * Default value: `false`
          */
         saveMaskedValue: boolean;
+        owner: ISurvey;
+        getSurvey(live?: boolean): ISurvey;
         getType(): string;
         setData(json: any): void;
         getData(): any;
@@ -9718,7 +9766,7 @@ declare module "survey" {
          */
         onUpdatePageCssClasses: EventBase<SurveyModel, UpdatePageCssClassesEvent>;
         /**
-         * An event that is raised before rendering a choice item in Radio Button Group, Checkboxes, and Dropdown questions. Use it to override default CSS classes applied to choice items.
+         * An event that is raised before rendering a choice item in Radio Button Group and Checkboxes questions. Use it to override default CSS classes applied to choice items.
          *
          * For information on event handler parameters, refer to descriptions within the interface.
          *
@@ -10325,6 +10373,8 @@ declare module "survey" {
          * - `"onValueChanged"` - Triggers validation each time a question value is changed.
          * - `"onComplete"` - Triggers validation when a user clicks the Complete button. If previous pages contain errors, the survey switches to the page with the first error.
          *
+         * > The `"onValueChanged"` doesn't work with date input fields because of the way browsers process date values. In most browsers, the value is considered changed as soon as a user starts entering the date in a text input field. This means that a user may only enter the day without having the chance to enter the month and year before validation is triggered. For this reason, date input fields are validated before the survey is switched to the next page or completed.
+         *
          * Refer to the following help topic for more information: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).
          * @see validationEnabled
          * @see validationAllowSwitchPages
@@ -10340,6 +10390,7 @@ declare module "survey" {
          *
          * You can override this property for individual Long Text questions: [`autoGrow`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#autoGrow).
          * @see allowResizeComment
+         * @see commentAreaRows
          */
         get autoGrowComment(): boolean;
         set autoGrowComment(val: boolean);
@@ -10350,9 +10401,21 @@ declare module "survey" {
          *
          * You can override this property for individual Long Text questions: [`allowResize`](https://surveyjs.io/form-library/documentation/api-reference/comment-field-model#allowResize).
          * @see autoGrowComment
+         * @see commentAreaRows
          */
         get allowResizeComment(): boolean;
         set allowResizeComment(val: boolean);
+        /**
+         * Specifies the visible height of comment areas, measured in lines. Applies to the questions with the [`showCommentArea`](https://surveyjs.io/form-library/documentation/api-reference/question#showCommentArea) or [`showOtherItem`](https://surveyjs.io/form-library/documentation/api-reference/question#showOtherItem) property enabled.
+         *
+         * Default value: 2
+         *
+         * The value of this property is passed on to the `rows` attribute of the underlying `<textarea>` element.
+         * @see autoGrowComment
+         * @see allowResizeComment
+         */
+        get commentAreaRows(): number;
+        set commentAreaRows(val: number);
         /**
          * Specifies when to update the question value in questions with a text input field.
          *
@@ -10413,6 +10476,7 @@ declare module "survey" {
         get locale(): string;
         set locale(value: string);
         private onSurveyLocaleChanged;
+        get localeDir(): string;
         /**
          * Returns an array of locales whose translations are used in the survey.
          *
@@ -13145,6 +13209,7 @@ declare module "question" {
         set hasOther(val: boolean);
         protected hasOtherChanged(): void;
         get requireUpdateCommentValue(): boolean;
+        readOnlyCallback: () => boolean;
         get isReadOnly(): boolean;
         get isInputReadOnly(): boolean;
         get renderedInputReadOnly(): string;
@@ -13182,6 +13247,7 @@ declare module "question" {
         protected initDataFromSurvey(): void;
         protected initCommentFromSurvey(): void;
         protected runExpression(expression: string): any;
+        get commentAreaRows(): number;
         private get autoGrowComment();
         private get allowResizeComment();
         private get questionValue();
@@ -13382,6 +13448,7 @@ declare module "question" {
         protected isValueExpression(val: any): boolean;
         protected setValueAndRunExpression(runner: ExpressionRunner, defaultValue: any, setFunc: (val: any) => void, values?: HashTable<any>, properties?: HashTable<any>): void;
         protected convertFuncValuetoQuestionValue(val: any): any;
+        private runExpressionSetValueCore;
         private runExpressionSetValue;
         private runDefaultValueExpression;
         /**
@@ -13443,7 +13510,7 @@ declare module "question" {
         protected canRunValidators(isOnValueChanged: boolean): boolean;
         private fireSurveyValidation;
         protected onCheckForErrors(errors: Array<SurveyError>, isOnValueChanged: boolean): void;
-        protected hasRequiredError(): boolean;
+        hasRequiredError(): boolean;
         private validatorRunner;
         private isRunningValidatorsValue;
         onCompletedAsyncValidators: (hasErrors: boolean) => void;
@@ -13736,6 +13803,7 @@ declare module "martixBase" {
         protected onColumnsChanged(): void;
         protected onRowsChanged(): void;
         protected updateVisibilityBasedOnRows(): void;
+        protected isVisibleCore(): boolean;
         protected shouldRunColumnExpression(): boolean;
         protected hasRowsAsItems(): boolean;
         protected runItemsCondition(values: HashTable<any>, properties: HashTable<any>): boolean;
@@ -13809,6 +13877,7 @@ declare module "question_matrixdropdownbase" {
         onTotalValueChanged(): any;
         getSurvey(): ISurvey;
         getDataFilteredValues(): any;
+        isMatrixReadOnly(): boolean;
     }
     export class MatrixDropdownCell {
         column: MatrixDropdownColumn;
@@ -13856,6 +13925,8 @@ declare module "question_matrixdropdownbase" {
         get rowName(): any;
         get dataName(): string;
         get text(): any;
+        isRowEnabled(): boolean;
+        protected isRowHasEnabledCondition(): boolean;
         get value(): any;
         set value(value: any);
         get locText(): LocalizableString;
@@ -13908,7 +13979,7 @@ declare module "question_matrixdropdownbase" {
         locStrsChanged(): void;
         updateCellQuestionOnColumnChanged(column: MatrixDropdownColumn, name: string, newValue: any): void;
         updateCellQuestionOnColumnItemValueChanged(column: MatrixDropdownColumn, propertyName: string, obj: ItemValue, name: string, newValue: any, oldValue: any): void;
-        onQuestionReadOnlyChanged(parentIsReadOnly: boolean): void;
+        onQuestionReadOnlyChanged(): void;
         private validationValues;
         hasErrors(fireCallback: boolean, rec: any, raiseOnCompletedAsyncValidators: () => void): boolean;
         protected updateCellOnColumnChanged(cell: MatrixDropdownCell, name: string, newValue: any): void;
@@ -14287,6 +14358,7 @@ declare module "question_matrixdropdownbase" {
         onTotalValueChanged(): any;
         getDataFilteredValues(): any;
         getParentTextProcessor(): ITextProcessor;
+        isMatrixReadOnly(): boolean;
         getQuestionFromArray(name: string, index: number): IQuestion;
         private isMatrixValueEmpty;
         private get SurveyModel();
@@ -14376,6 +14448,7 @@ declare module "base-interfaces" {
         isUpdateValueTextOnTyping: boolean;
         autoGrowComment: boolean;
         allowResizeComment: boolean;
+        commentAreaRows: number;
         state: string;
         isLazyRendering: boolean;
         lazyRenderingFirstBatchSize: number;
@@ -15904,11 +15977,19 @@ declare module "settings" {
          */
         ratingMaximumRateValueCount: number;
         /**
-         * Specifies whether to close the drop-down menu of a [TagBox](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) question after a user selects a value.
+         * Specifies whether to close the drop-down menu of a [Multi-Select Dropdown (Tag Box)](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) question after a user selects a value.
          *
-         * This setting applies to all TagBox questions on a page. You can use the [closeOnSelect](https://surveyjs.io/form-library/documentation/api-reference/dropdown-tag-box-model#closeOnSelect) property to specify the same setting for an individual TagBox question.
+         * This setting applies to all Multi-Select Dropdown questions on a web page. You can use the [`closeOnSelect`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-tag-box-model#closeOnSelect) property to specify the same setting for an individual Multi-Select Dropdown question.
          */
         tagboxCloseOnSelect: boolean;
+        /**
+         * A time interval in milliseconds between the last entered character and the beginning of search in [Single-](https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/) and [Multi-Select Dropdown](https://surveyjs.io/form-library/examples/how-to-create-multiselect-tag-box/) questions. Applies only to questions with the [`choicesLazyLoadEnabled`](https://surveyjs.io/form-library/documentation/api-reference/dropdown-menu-model#choicesLazyLoadEnabled) property set to `true`.
+         *
+         * Default value: 500
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/lazy-loading-dropdown/ (linkStyle))
+         */
+        dropdownSearchDelay: number;
         /**
          * A function that activates a browser confirm dialog.
          *
@@ -16163,6 +16244,8 @@ declare module "question_matrixdropdown" {
         get rowName(): string;
         get text(): string;
         get locText(): LocalizableString;
+        isRowEnabled(): boolean;
+        protected isRowHasEnabledCondition(): boolean;
     }
     /**
       * A class that describes the Multi-Select Matrix question type. Multi-Select Matrix allows you to use the [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Checkbox](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Radiogroup](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), [Text](https://surveyjs.io/form-library/documentation/questiontextmodel), and [Comment](https://surveyjs.io/form-library/documentation/questioncommentmodel) question types as cell editors.
@@ -16216,6 +16299,7 @@ declare module "dropdownListModel" {
         protected onSelectionChanged?: (item: IAction, ...params: any[]) => void;
         readonly minPageSize = 25;
         readonly loadingItemHeight = 40;
+        timer: any;
         private htmlCleanerElement;
         private _markdownMode;
         private _popupModel;
@@ -16232,6 +16316,7 @@ declare module "dropdownListModel" {
         protected listModelFilterStringChanged: (newValue: string) => void;
         private resetItemsSettings;
         private setItems;
+        private loadQuestionChoices;
         private updateQuestionChoices;
         private updatePopupFocusFirstInputSelector;
         protected createPopup(): void;
@@ -16865,6 +16950,7 @@ declare module "question_checkbox" {
         get checkBoxSvgPath(): string;
         get isNewA11yStructure(): boolean;
         get a11y_input_ariaRole(): string;
+        get a11y_input_ariaRequired(): "true" | "false";
     }
 }
 declare module "multiSelectListModel" {
@@ -17195,6 +17281,7 @@ declare module "dragdrop/choices" {
         private imagepickerControlsNode;
         protected get draggedElementType(): string;
         protected createDraggedElementShortcut(text: string, draggedElementNode: HTMLElement, event: PointerEvent): HTMLElement;
+        onShortcutCreated: (node: HTMLElement) => void;
         private createImagePickerShortcut;
         protected getDropTargetByDataAttributeValue(dataAttributeValue: string): ItemValue;
         private getVisibleChoices;
@@ -17223,7 +17310,7 @@ declare module "dragdrop/ranking-choices" {
         protected isDropTargetValid(dropTarget: ItemValue, dropTargetNode?: HTMLElement): boolean;
         protected calculateIsBottom(clientY: number, dropTargetNode?: HTMLElement): boolean;
         protected doDragOver: () => any;
-        getIndixies(model: any, fromChoicesArray: Array<ItemValue>, toChoicesArray: Array<ItemValue>): {
+        getIndices(model: any, fromChoicesArray: Array<ItemValue>, toChoicesArray: Array<ItemValue>): {
             fromIndex: number;
             toIndex: number;
         };
@@ -17270,7 +17357,6 @@ declare module "question_ranking" {
         private domNode;
         private dragOrClickHelper;
         constructor(name: string);
-        protected getDefaultItemComponent(): string;
         getType(): string;
         getItemTabIndex(item: ItemValue): number;
         protected supportContainerQueries(): boolean;
@@ -17315,7 +17401,7 @@ declare module "question_ranking" {
         endLoadingFromJson(): void;
         private setDragDropRankingChoices;
         protected createDragDropRankingChoices(): DragDropRankingChoices;
-        private draggedChoise;
+        private draggedChoiceValue;
         private draggedTargetNode;
         handlePointerDown: (event: PointerEvent, choice: ItemValue, node: HTMLElement) => void;
         startDrag: (event: PointerEvent) => void;
@@ -17349,11 +17435,7 @@ declare module "question_ranking" {
         */
         get longTap(): boolean;
         set longTap(val: boolean);
-        /**
-         * The name of a component used to render items.
-         */
-        get itemContentComponent(): string;
-        set itemContentComponent(value: string);
+        protected getDefaultItemComponent(): string;
         /**
          * Specifies whether users can select choices they want to rank.
          *
@@ -17770,9 +17852,14 @@ declare module "question_rating" {
         getItemClassByText(item: ItemValue, text: string): string;
         private getRenderedItemColor;
         getItemStyle(item: ItemValue, highlight?: "none" | "highlighted" | "unhighlighted"): {
-            borderColor: string;
-            fill: string;
-            backgroundColor: string;
+            "--sd-rating-item-color"?: undefined;
+            "--sd-rating-item-color-light"?: undefined;
+        } | {
+            "--sd-rating-item-color": string;
+            "--sd-rating-item-color-light": string;
+        } | {
+            "--sd-rating-item-color": string;
+            "--sd-rating-item-color-light"?: undefined;
         };
         getItemClass(item: ItemValue, highlight?: "none" | "highlighted" | "unhighlighted"): string;
         getControlClass(): string;
@@ -17836,10 +17923,6 @@ declare module "question_boolean" {
         getDefaultValue(): any;
         get locTitle(): LocalizableString;
         get labelRenderedAriaID(): string;
-        leftAnswerElement: HTMLElement;
-        thumbMargin: string;
-        updateThumbMargin(): void;
-        afterRender(el: HTMLElement): void;
         beforeDestroyQuestionElement(el: HTMLElement): void;
         showTitle: boolean;
         label: string;
@@ -18674,6 +18757,7 @@ declare module "entries/chunks/model" {
 declare module "defaultCss/cssstandard" {
     export var defaultStandardCss: {
         root: string;
+        rootProgress: string;
         container: string;
         header: string;
         bodyContainer: string;
@@ -19083,6 +19167,7 @@ declare module "defaultCss/cssstandard" {
 declare module "defaultCss/cssmodern" {
     export var modernCss: {
         root: string;
+        rootProgress: string;
         timerRoot: string;
         container: string;
         header: string;