survey-creator-react 1.12.31 → 1.12.33

package/fesm/survey-creator-react.mjs

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v2.0.3
+ * SurveyJS Creator React v2.0.6
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -7,10 +7,10 @@
 
 import * as React from 'react';
 import { createElement, Fragment } from 'react';
-import * as ReactDOM from 'react-dom';
-import { ReactElementFactory, SurveyElementBase, attachKey2click, SvgIcon, Survey, SvgBundleComponent, PopupModal, SurveyActionBar, NotifierComponent, ReactQuestionFactory, SurveyLocStringViewer, TitleElement, ReactSurveyElementsWrapper, LoadingIndicatorComponent, SurveyPage, Popup, LogoImage, SurveyQuestionElementBase, SurveyQuestion, Scroll, CharacterCounterComponent, SurveyQuestionDropdown, SurveyHeader, List, SurveyQuestionButtonGroup, SurveyQuestionText } from 'survey-react-ui';
-import { assign, SurveyCreatorModel, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, PageAdorner, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
+import { ReactElementFactory, SurveyElementBase, attachKey2click, SvgIcon, Survey, ReactQuestionFactory, SurveyLocStringViewer, SvgBundleComponent, PopupModal, SurveyActionBar, NotifierComponent, TitleElement, ReactSurveyElementsWrapper, LoadingIndicatorComponent, SurveyPage, Popup, LogoImage, SurveyQuestionElementBase, SurveyQuestion, Scroll, CharacterCounterComponent, SurveyQuestionDropdown, SurveyHeader, List, SurveyQuestionButtonGroup, SurveyQuestionText } from 'survey-react-ui';
+import { SurveyCreatorModel, assign, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, PageAdorner, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
 export { PropertyGridEditorCollection, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, editorLocalization, localization, settings, svgBundle } from 'survey-creator-core';
+import * as ReactDOM from 'react-dom';
 import { ResponsivityManager, CssClassBuilder, settings, VerticalResponsivityManager, RendererFactory, unwrap, checkLibraryVersion } from 'survey-core';
 
 class TabbedMenuComponent extends SurveyElementBase {
@@ -26,7 +26,7 @@ class TabbedMenuComponent extends SurveyElementBase {
     }
     renderElement() {
         const items = this.model.renderedActions.map((item) => React.createElement(TabbedMenuItemWrapper, { item: item, key: item.renderedId }));
-        return (React.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu" }, items));
+        return (React.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu", role: "tablist" }, items));
     }
     componentDidMount() {
         super.componentDidMount();
@@ -214,15 +214,8 @@ class SurveyCreator extends SurveyCreatorModel {
         super(options, options2);
     }
     render(target) {
-        let node = target;
-        if (typeof target === "string") {
-            node = document.getElementById(target);
-        }
-        /* eslint-disable react/no-deprecated */
-        ReactDOM.unmountComponentAtNode(node);
-        ReactDOM.render(React.createElement(React.StrictMode, null,
-            React.createElement(SurveyCreatorComponent, { creator: this })), node);
-        /* eslint-enable react/no-deprecated */
+        // eslint-disable-next-line no-console
+        console.error("The render method is deprecated. Use SurveyCreatorComponent instead.");
     }
     //ISurveyCreator
     createQuestionElement(question) {
@@ -1467,11 +1460,9 @@ class SurveyCreatorToolboxCategory extends SurveyElementBase {
     renderButton() {
         if (!this.toolbox.canCollapseCategories)
             return null;
-        const iconName = this.category.collapsed ? "arrow-down" : "arrow-up";
-        const suffixName = this.category.collapsed ? "expand" : "collapse";
-        const svgIconClassName = "svc-toolbox__category-header__button svc-string-editor__button--" + suffixName;
+        const iconName = this.category.iconName;
         return (React.createElement("div", { className: "svc-toolbox__category-header__controls" },
-            React.createElement(SvgIcon, { className: svgIconClassName, iconName: "icon-" + iconName, size: "auto" })));
+            React.createElement(SvgIcon, { className: this.category.iconClassName, iconName: iconName, size: "auto" })));
     }
     renderCategoryContent() {
         return this.renderItems(this.category.items);
@@ -2062,7 +2053,7 @@ class SurveyLogicOpertor extends SurveyQuestionDropdown {
         return (React.createElement("div", { id: this.question.inputId, className: q.getControlClass(), tabIndex: this.question.isInputReadOnly ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onKeyUp: this.keyhandler, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy },
+            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onKeyUp: this.keyhandler, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-labelledby": this.question.ariaLabelledBy, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded },
             React.createElement("div", { className: this.question.cssClasses.controlValue },
                 text,
                 React.createElement("div", null, q.readOnlyText)),
@@ -2655,7 +2646,7 @@ class SurveyQuestionSpinEditor extends SurveyQuestionText {
     }
     renderInput() {
         return (React.createElement(React.Fragment, null,
-            React.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: (input) => (this.setControl(input)), placeholder: this.question.renderedPlaceholder, autoComplete: "off", onBlur: (event) => this.question.onBlur(event.nativeEvent), onFocus: (event) => this.question.onFocus(event.nativeEvent), onChange: this.question.onChange, onBeforeInput: event => this.question.onBeforeInput(event.nativeEvent), onKeyUp: (event) => this.question.onKeyUp(event.nativeEvent), onKeyDown: (event) => this.question.onInputKeyDown(event.nativeEvent), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
+            React.createElement("input", { role: "spinbutton", id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: (input) => (this.setControl(input)), placeholder: this.question.renderedPlaceholder, autoComplete: "off", onBlur: (event) => this.question.onBlur(event.nativeEvent), onFocus: (event) => this.question.onFocus(event.nativeEvent), onChange: this.question.onChange, onBeforeInput: event => this.question.onBeforeInput(event.nativeEvent), onKeyUp: (event) => this.question.onKeyUp(event.nativeEvent), onKeyDown: (event) => this.question.onInputKeyDown(event.nativeEvent), "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage })));
     }
     renderElement() {
         return (React.createElement("div", { className: this.question.cssClasses.root, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
@@ -2667,9 +2658,9 @@ class SurveyQuestionSpinEditor extends SurveyQuestionText {
     }
     renderButtons() {
         return (React.createElement("span", { className: this.question.cssClasses.buttonsContainer },
-            React.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onDownButtonClick, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
+            React.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onDownButtonClick, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
                 React.createElement(SvgIcon, { iconName: this.question.cssClasses.decreaseButtonIcon, size: "auto" })),
-            React.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onUpButtonClick, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
+            React.createElement("button", { tabIndex: -1, "aria-hidden": "true", className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onUpButtonClick, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
                 React.createElement(SvgIcon, { iconName: this.question.cssClasses.increaseButtonIcon, size: "auto" }))));
     }
 }
@@ -2698,7 +2689,7 @@ class SurveyQuestionColor extends SurveyQuestionText {
     }
     renderInput() {
         return (React.createElement(React.Fragment, null,
-            React.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: (input) => (this.setControl(input)), placeholder: this.question.renderedPlaceholder, autoComplete: "off", onKeyUp: (event) => this.question.onKeyUp(event.nativeEvent), onBlur: (event) => this.question.onBlur(event.nativeEvent), onChange: this.question.onChange, onBeforeInput: event => this.question.onBeforeInput(event.nativeEvent), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
+            React.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: (input) => (this.setControl(input)), placeholder: this.question.renderedPlaceholder, autoComplete: "off", onKeyUp: (event) => this.question.onKeyUp(event.nativeEvent), onBlur: (event) => this.question.onBlur(event.nativeEvent), onChange: this.question.onChange, onBeforeInput: event => this.question.onBeforeInput(event.nativeEvent), "aria-required": this.question.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy })));
     }
     renderElement() {
         return (React.createElement("div", { className: this.question.cssClasses.root, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
@@ -2712,11 +2703,11 @@ class SurveyQuestionColor extends SurveyQuestionText {
     renderColorSwatch() {
         return React.createElement("label", { className: this.question.getSwatchCss(), style: this.question.getSwatchStyle() },
             React.createElement(SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
-            React.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: (event) => this.question.onColorInputChange(event.nativeEvent), tabIndex: -1 }));
+            React.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: (event) => this.question.onColorInputChange(event.nativeEvent), tabIndex: -1, "aria-required": this.question.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
     }
     renderDropdownAction() {
         return (React.createElement(React.Fragment, null,
-            ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction }),
+            React.createElement("div", { "aria-hidden": "true", className: this.question.cssClasses.choicesButtonWrapper }, ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction })),
             this.renderPopup()));
     }
     renderPopup() {
@@ -2750,11 +2741,11 @@ class SurveyQuestionFileEditor extends SurveyQuestionText {
             this.renderChooseButton()));
     }
     renderClearButton() {
-        return attachKey2click((React.createElement("button", { type: "button", className: this.questionFile.cssClasses.clearButton, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
-            React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto", title: this.questionFile.clearButtonCaption }))));
+        return attachKey2click((React.createElement("button", { className: this.questionFile.cssClasses.clearButton, title: this.questionFile.clearButtonCaption, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
+            React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto" }))));
     }
     renderChooseButton() {
-        return (attachKey2click(React.createElement("label", { role: "button", onClick: event => this.questionFile.chooseFiles(event.nativeEvent), className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
+        return (attachKey2click(React.createElement("label", { onClick: event => this.questionFile.chooseFiles(event.nativeEvent), className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
             React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.chooseButtonIcon, size: "auto", title: this.questionFile.chooseButtonCaption }))));
     }
     renderElement() {
@@ -2800,7 +2791,7 @@ ReactQuestionFactory.Instance.registerQuestion("commentwithreset", (props) => {
 
 class SurveyQuestionBooleanSwitch extends SurveyQuestionElementBase {
     renderElement() {
-        const button = attachKey2click(React.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-required": this.questionBase.ariaRequired, "aria-label": this.questionBase.ariaLabel, "aria-invalid": this.questionBase.ariaInvalid, "aria-errormessage": this.questionBase.ariaErrormessage },
+        const button = attachKey2click(React.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-checked": this.questionBase.booleanValue || false, "aria-required": this.questionBase.a11y_input_ariaRequired, "aria-label": this.questionBase.a11y_input_ariaLabel, "aria-labelledby": this.questionBase.a11y_input_ariaLabelledBy, "aria-invalid": this.questionBase.a11y_input_ariaInvalid, "aria-errormessage": this.questionBase.a11y_input_ariaErrormessage },
             React.createElement("div", { className: "spg-boolean-switch__thumb" },
                 React.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
             React.createElement("div", { className: "spg-boolean-switch__thumb" },
@@ -2808,7 +2799,7 @@ class SurveyQuestionBooleanSwitch extends SurveyQuestionElementBase {
         return (React.createElement("div", { className: "spg-boolean-switch", onClick: () => this.questionBase.value = !this.questionBase.value },
             button,
             React.createElement("div", { className: "spg-boolean-switch__caption" },
-                React.createElement("div", { className: "spg-boolean-switch__title" }, SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
+                React.createElement("div", { className: "spg-boolean-switch__title", id: this.questionBase.labelRenderedAriaID }, SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
@@ -2817,8 +2808,8 @@ ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
 RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
 
 let Version;
-Version = `${"2.0.3"}`;
-checkLibraryVersion(`${"2.0.3"}`, "survey-creator-react");
+Version = `${"2.0.6"}`;
+checkLibraryVersion(`${"2.0.6"}`, "survey-creator-react");
 
 export { ActionButton, AdaptiveToolbox, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, CreatorSurveyPageComponent, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionBooleanSwitch, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyQuestionTextWithReset, SurveyResults, SurveyResultsByRow, SurveySimulator, SwitcherComponent, TabButtonComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicAddButtonComponent, TabLogicComponent, TabPreviewSurveyComponent, TabPreviewTestSurveyAgainComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version };
 //# sourceMappingURL=survey-creator-react.mjs.map