survey-creator-react 2.0.2 → 2.0.4

package/fesm/{survey-creator-react.js → survey-creator-react.mjs}

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator React v2.0.2
+ * SurveyJS Creator React v2.0.4
  * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -8,8 +8,8 @@
 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, 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, ScrollViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
+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';
 export { PropertyGridEditorCollection, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, editorLocalization, localization, settings, svgBundle } from 'survey-creator-core';
 import { ResponsivityManager, CssClassBuilder, settings, VerticalResponsivityManager, RendererFactory, unwrap, checkLibraryVersion } from 'survey-core';
 
@@ -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();
@@ -1467,11 +1467,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);
@@ -1547,34 +1545,6 @@ ReactElementFactory.Instance.registerElement("svc-search", (props) => {
     return React.createElement(SearchComponent, props);
 });
 
-class ScrollComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.rootRef = React.createRef();
-        this.model = new ScrollViewModel();
-    }
-    componentDidMount() {
-        const container = this.rootRef.current;
-        if (!container)
-            return;
-        this.model.setRootElement(container);
-    }
-    componentWillUnmount() {
-        this.model.unsubscribeRootElement();
-        this.model.setRootElement(undefined);
-    }
-    render() {
-        return React.createElement("div", { ref: this.rootRef, className: "svc-scroll__wrapper" },
-            React.createElement("div", { className: "svc-scroll__scroller sv-drag-target-skipped", onScroll: () => this.model.onScrollContainer() },
-                React.createElement("div", { className: "svc-scroll__container" }, this.props.children)),
-            React.createElement("div", { className: "svc-scroll__scrollbar", onScroll: () => this.model.onScrollScrollbar() },
-                React.createElement("div", { className: "svc-scroll__scrollbar-sizer" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("svc-scroll", (props) => {
-    return React.createElement(ScrollComponent, props);
-});
-
 class AdaptiveToolbox extends SurveyElementBase {
     constructor(props) {
         super(props);
@@ -1631,7 +1601,7 @@ class AdaptiveToolbox extends SurveyElementBase {
             React.createElement("div", { onBlur: (e) => this.toolbox.focusOut(e), className: "svc-toolbox__panel" },
                 search,
                 placeholder,
-                React.createElement(ScrollComponent, null, (this.toolbox.showInSingleCategory) ?
+                React.createElement(Scroll, null, (this.toolbox.showInSingleCategory) ?
                     (React.createElement("div", { className: "svc-toolbox__category" }, this.renderItems(this.toolbox.renderedActions, this.toolbox.isCompactRendered)))
                     : this.renderCategories()))));
     }
@@ -1738,7 +1708,7 @@ class TabControl extends SurveyElementBase {
                     React.createElement(TabButtonComponent, { model: this.props.model.expandCollapseAction })),
                 React.createElement("div", { className: "svc-sidebar-tabs__separator" },
                     React.createElement("div", null)),
-                React.createElement(ScrollComponent, null,
+                React.createElement(Scroll, null,
                     React.createElement("div", { className: "svc-sidebar-tabs__items" },
                         React.createElement(TabsComponent, { model: this.props.model.topToolbar })))),
             React.createElement("div", { className: "svc-sidebar-tabs__bottom-container" },
@@ -2090,7 +2060,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)),
@@ -2251,7 +2221,7 @@ class TabDesignerComponent extends SurveyElementBase {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "svc-flex-column" }, this.model.isToolboxVisible ? ReactElementFactory.Instance.createElement("svc-toolbox", { model: this.creator }) : null),
             React.createElement("div", { className: designerTabClassName, onClick: () => this.model.clickDesigner() },
-                React.createElement(ScrollComponent, null,
+                React.createElement(Scroll, null,
                     React.createElement("div", { className: "svc-tab-designer_content" }, this.model.showPlaceholder ? this.renderPlaceHolder() : this.renderTabContent())))));
     }
     renderHeader(condition) {
@@ -2621,8 +2591,7 @@ class PropertyGridComponent extends SurveyElementBase {
     renderElement() {
         return (React.createElement("div", { className: this.model.rootCss },
             React.createElement(SearchComponent, { model: this.model.searchManager }),
-            React.createElement(ScrollComponent, null,
-                React.createElement(Survey, { model: this.model.survey }))));
+            React.createElement(Survey, { model: this.model.survey })));
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("buttongroup", (props) => {
@@ -2684,7 +2653,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) },
@@ -2696,9 +2665,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" }))));
     }
 }
@@ -2727,7 +2696,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) },
@@ -2741,11 +2710,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() {
@@ -2779,11 +2748,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() {
@@ -2829,7 +2798,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" },
@@ -2837,7 +2806,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) => {
@@ -2846,8 +2815,8 @@ ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
 RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
 
 let Version;
-Version = `${"2.0.2"}`;
-checkLibraryVersion(`${"2.0.2"}`, "survey-creator-react");
+Version = `${"2.0.4"}`;
+checkLibraryVersion(`${"2.0.4"}`, "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.js.map
+//# sourceMappingURL=survey-creator-react.mjs.map