survey-react-ui 3.0.0-beta.7 → 3.0.0-beta.9

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v3.0.0-beta.7
+ * surveyjs - Survey JavaScript library v3.0.0-beta.9
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -500,7 +500,7 @@ class SurveyAction extends SurveyElementBase {
         const itemComponent = ReactElementFactory.Instance.createElement(this.item.component || "sv-action-bar-item", {
             item: this.item,
         });
-        return (React.createElement("div", { className: itemClass, id: "" + this.item.uniqueId, ref: this.ref },
+        return (React.createElement("div", { className: itemClass, id: this.item.renderedId, ref: this.ref },
             React.createElement("div", { className: this.item.getActionRootContentCss() },
                 separator,
                 itemComponent)));
@@ -792,7 +792,7 @@ class SurveyActionBar extends SurveyElementBase {
     }
     renderItems() {
         return this.model.renderedActions.concat([]).map((item, itemIndex) => {
-            return (React.createElement(SurveyAction, { item: item, key: item.renderedId }));
+            return (React.createElement(SurveyAction, { item: item, key: item.uniqueId }));
         });
     }
 }
@@ -1609,7 +1609,7 @@ function attachKey2click(element, viewModel, options = { processEsc: true, disab
         props = { tabIndex: -1 };
     }
     else {
-        options = Object.assign({}, options);
+        options = { ...options };
         props = {
             tabIndex: 0,
             onKeyUp: (evt) => {
@@ -1752,14 +1752,13 @@ class SurveyRowElement extends SurveyElementBase {
     renderElement() {
         const element = this.element;
         const innerElement = this.createElement(element, this.index);
-        const css = element.cssClassesValue;
         const focusIn = () => {
             const el = element;
             if (el && el.isQuestion) {
                 el.focusIn();
             }
         };
-        return (React.createElement("div", { className: css.questionWrapper, style: element.rootStyle, "data-key": element.name + this.index, onFocus: focusIn, ref: this.rootRef }, innerElement));
+        return (React.createElement("div", { className: element.getWrapperCss(), style: element.rootStyle, "data-key": element.name + this.index, onFocus: focusIn, ref: this.rootRef }, innerElement));
     }
     createElement(element, elementIndex) {
         if (!this.row.isNeedRender) {
@@ -1972,6 +1971,14 @@ class TextAreaComponent extends SurveyElementBase {
             this.viewModel.setElement(el);
         }
     }
+    componentDidUpdate(prevProps, prevState) {
+        var _a;
+        super.componentDidUpdate(prevProps, prevState);
+        if (prevProps.viewModel !== this.viewModel) {
+            (_a = prevProps.viewModel) === null || _a === void 0 ? void 0 : _a.resetElement();
+            this.viewModel.setElement(this.textareaRef.current);
+        }
+    }
     componentWillUnmount() {
         var _a;
         super.componentWillUnmount();
@@ -2196,9 +2203,9 @@ class SurveyBreadcrumbs extends SurveyElementBase {
         const result = [];
         this.items.concat([]).forEach((item, itemIndex) => {
             if (itemIndex) {
-                result.push(React.createElement(SvgIcon, { key: item.renderedId + "_separator", className: this.css.breadcrumbsSeparator, iconName: "arrowright-16x16", size: "auto" }));
+                result.push(React.createElement(SvgIcon, { key: item.uniqueId + "_separator", className: this.css.breadcrumbsSeparator, iconName: "arrowright-16x16", size: "auto" }));
             }
-            result.push(React.createElement(SurveyAction, { key: item.renderedId, item: item }));
+            result.push(React.createElement(SurveyAction, { key: item.uniqueId, item: item }));
         });
         return result;
     }
@@ -2309,11 +2316,13 @@ class SurveyQuestion extends SurveyElementBase {
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, "data-name": question.name, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-label": this.question.ariaLabel, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded },
                 singleBreadcrumbs,
-                errorsAboveQuestion,
-                headerTop,
-                questionContent,
-                headerBottom,
-                errorsBelowQuestion)));
+                React.createElement("div", { className: question.getQuestionContainerCss() },
+                    errorsAboveQuestion,
+                    React.createElement("div", { className: question.getHeaderAndContentContainerCss() },
+                        headerTop,
+                        questionContent,
+                        headerBottom),
+                    errorsBelowQuestion))));
     }
     renderSingleInputQuestion(question, cssClasses) {
         const singleQuestion = question.singleInputQuestion;
@@ -2358,7 +2367,7 @@ class SurveyQuestion extends SurveyElementBase {
         return React.createElement(SurveyElementHeader, { element: question });
     }
     renderErrors(cssClasses, location) {
-        return (React.createElement(SurveyElementErrors, { element: this.question, cssClasses: cssClasses, creator: this.creator, location: location, id: this.question.id + "_errors" }));
+        return (React.createElement(SurveyElementErrors, { element: this.question, cssClasses: cssClasses, creator: this.creator, location: location, id: this.question.renderedId + "_errors" }));
     }
 }
 ReactElementFactory.Instance.registerElement("question", (props) => {
@@ -2370,7 +2379,7 @@ class SurveyElementErrors extends ReactSurveyElement {
         this.state = this.getState();
     }
     get id() {
-        return this.props.element.id + "_errors";
+        return this.props.element.renderedId + "_errors";
     }
     get element() {
         return this.props.element;
@@ -2392,7 +2401,7 @@ class SurveyElementErrors extends ReactSurveyElement {
             const key = "error" + i;
             errors.push(this.creator.renderError(key, this.element.renderedErrors[i], this.cssClasses, this.element));
         }
-        return (React.createElement("div", { className: this.element.cssError, id: this.id }, errors));
+        return (React.createElement("div", { className: this.element.cssError, id: this.id, role: "alert", "aria-live": "polite", "aria-atomic": "true" }, errors));
     }
 }
 class SurveyQuestionAndErrorsWrapped extends ReactSurveyElement {
@@ -2538,11 +2547,17 @@ class SurveyPage extends SurveyPanelBase {
         var description = this.renderDescription();
         var rows = this.renderRows(this.panelBase.cssClasses);
         const errors = (React.createElement(SurveyElementErrors, { element: this.panelBase, cssClasses: this.panelBase.cssClasses, creator: this.creator }));
+        var header = null;
+        if (this.page.hasTitle || this.page._showDescription) {
+            header = (React.createElement("div", { className: this.page.cssHeader },
+                title,
+                description));
+        }
         return (React.createElement("div", { ref: this.rootRef, className: this.page.cssRoot },
-            title,
-            description,
-            errors,
-            rows));
+            header,
+            React.createElement("div", { className: this.page.cssContent },
+                errors,
+                rows)));
     }
     renderTitle() {
         return React.createElement(TitleElement, { element: this.page });
@@ -2569,16 +2584,23 @@ class SurveyPanel extends SurveyPanelBase {
     renderElement() {
         const header = this.renderHeader();
         const errors = (React.createElement(SurveyElementErrors, { element: this.panelBase, cssClasses: this.panelBase.cssClasses, creator: this.creator }));
+        // const panelPaddingHorizontal = "var(--sjs2-layout-component-panel-content-area-padding-horizontal, var(--sjs2-spacing-x500))";
+        const panelPaddingHorizontal = this.panel.isDesignMode ? "var(--sjs2-spacing-x000)" : "var(--sd-base-padding, var(--sjs2-spacing-x500))";
         const style = {
-            paddingLeft: this.panel.innerPaddingLeft,
+            paddingInlineStart: this.panel.innerPaddingLeft
+                ? `calc(${panelPaddingHorizontal} + ${this.panel.innerPaddingLeft})`
+                : this.panel.innerPaddingLeft,
+            // paddingInlineEnd: this.panel.innerPaddingLeft ? panelPaddingHorizontal : undefined,
             display: this.panel.renderedIsExpanded ? undefined : "none",
         };
         let content = null;
+        let bottom = null;
         if (this.panel.renderedIsExpanded) {
             // this.hasBeenExpanded = true;
             const rows = this.renderRows(this.panelBase.cssClasses);
             const className = this.panelBase.cssClasses.panel.content;
             content = this.renderContent(style, rows, className);
+            bottom = this.renderBottom();
         }
         const focusIn = () => {
             if (this.panelBase)
@@ -2588,7 +2610,8 @@ class SurveyPanel extends SurveyPanelBase {
             this.panel.showErrorsAbovePanel ? errors : null,
             header,
             this.panel.showErrorsAbovePanel ? null : errors,
-            content));
+            content,
+            bottom));
     }
     renderHeader() {
         if (!this.panel.hasTitle && !this.panel.hasDescription) {
@@ -2605,10 +2628,7 @@ class SurveyPanel extends SurveyPanelBase {
         return wrapper !== null && wrapper !== void 0 ? wrapper : element;
     }
     renderContent(style, rows, className) {
-        const bottom = this.renderBottom();
-        return (React.createElement("div", { style: style, className: className, id: this.panel.contentId, role: this.panel.ariaRole, "aria-labelledby": this.panel.ariaLabelledBy, "aria-label": this.panel.ariaLabel },
-            rows,
-            bottom));
+        return (React.createElement("div", { style: style, className: className, id: this.panel.contentId, role: this.panel.ariaRole, "aria-labelledby": this.panel.ariaLabelledBy, "aria-label": this.panel.ariaLabel }, rows));
     }
     renderTitle() {
         if (!this.panelBase.title)
@@ -3034,7 +3054,7 @@ class SurveyQuestionRanking extends SurveyQuestionElementBase {
         return items;
     }
     renderItem(item, i, handleKeydown, handlePointerDown, handlePointerUp, cssClasses, itemClass, question, unrankedItem) {
-        "id-" + item.renderedId;
+        "id-" + item.uniqueId;
         const text = this.renderLocString(item.locText);
         const index = i;
         const indexText = this.question.getNumberByIndex(index);
@@ -4284,6 +4304,27 @@ ReactQuestionFactory.Instance.registerQuestion("sv-boolean-radio", (props) => {
 });
 RendererFactory.Instance.registerRenderer("boolean", "radio", "sv-boolean-radio");
 
+class SurveyQuestionBooleanSwitch extends SurveyQuestionBoolean {
+    constructor(props) {
+        super(props);
+    }
+    renderElement() {
+        const cssClasses = this.question.cssClasses;
+        const buttonClass = this.question.getSwitchButtonCss();
+        const button = attachKey2click(React.createElement("div", { className: buttonClass, tabIndex: 0, role: "checkbox", "aria-checked": this.question.booleanValue || false, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage },
+            React.createElement("div", { className: cssClasses.switchThumb },
+                React.createElement("div", { className: cssClasses.switchThumbCircle }))), this.question, { processEsc: false });
+        return (React.createElement("div", { className: cssClasses.rootSwitch, onClick: () => this.question.booleanValue = !this.question.booleanValue },
+            button,
+            this.question.isLabelRendered && (React.createElement("div", { className: cssClasses.switchCaption },
+                React.createElement("div", { className: cssClasses.switchTitle, id: this.question.labelRenderedAriaID }, SurveyElementBase.renderLocString(this.question.locTitle))))));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
+    return React.createElement(SurveyQuestionBooleanSwitch, props);
+});
+RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
+
 class SurveyQuestionEmpty extends SurveyQuestionElementBase {
     constructor(props) {
         super(props);
@@ -4829,6 +4870,8 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
         if (!this.question.showNavigation)
             return null;
         const range = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
+        if (!range && !this.question.showFooterToolbar)
+            return null;
         return (React.createElement("div", { className: this.question.cssClasses.footer },
             React.createElement("hr", { className: this.question.cssClasses.separator }),
             range,
@@ -5000,7 +5043,15 @@ class ListItem extends SurveyElementBase {
             return null;
         const className = this.model.getItemClass(this.item);
         const itemContent = this.item.component || this.model.itemComponent;
-        const newElement = ReactElementFactory.Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
+        const itemData = this.item.data;
+        const newElement = ReactElementFactory.Instance.createElement(itemContent, {
+            item: this.item,
+            key: this.item.id,
+            model: this.model,
+            itemData,
+            survey: itemData === null || itemData === void 0 ? void 0 : itemData.survey,
+            page: itemData === null || itemData === void 0 ? void 0 : itemData.page
+        });
         const contentWrap = React.createElement("div", { ref: this.elementRef, style: this.model.getItemStyle(this.item), className: this.model.cssClasses.itemBody, title: this.item.getTooltip(), onMouseOver: (event) => { this.model.onItemHover(this.item); }, onMouseLeave: (event) => { this.model.onItemLeave(this.item); } }, newElement);
         const separator = this.item.needSeparator ? React.createElement("div", { className: this.model.cssClasses.itemSeparator }) : null;
         const isVisible = this.model.isItemVisible(this.item);
@@ -5901,18 +5952,18 @@ class SliderLabelItem extends SurveyElementBase {
         super.componentDidUpdate(prevProps, prevState);
     }
     renderElement() {
-        const { cssClasses, handleLabelPointerUp, getLabelCss, getPercent } = this.question;
+        const { cssClasses, handleLabelPointerUp, getLabelCss, getPercent, getLabelMaxWidth } = this.question;
         const { value, locText } = this.item;
         let labelText = null;
         let labelTextSecondary = null;
         if (this.item.showValue) {
-            labelText = React.createElement("div", { className: cssClasses.labelText }, this.item.value);
-            labelTextSecondary = React.createElement("div", { className: cssClasses.labelTextSecondaryMode }, this.renderLocString(locText));
+            labelText = React.createElement("div", { className: cssClasses.labelText, title: "" + this.item.value }, this.item.value);
+            labelTextSecondary = React.createElement("div", { className: cssClasses.labelTextSecondaryMode, title: locText.renderedHtml }, this.renderLocString(locText));
         }
         else {
-            labelText = React.createElement("div", { className: cssClasses.labelText }, this.renderLocString(locText));
+            labelText = React.createElement("div", { className: cssClasses.labelText, title: locText.renderedHtml }, this.renderLocString(locText));
         }
-        return React.createElement("div", { key: this.item.uniqueId, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, value); } },
+        return React.createElement("div", { key: this.item.uniqueId, className: getLabelCss(locText), style: { left: getPercent(value) + "%", maxWidth: getLabelMaxWidth(this.item) }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, value); } },
             React.createElement("div", { className: cssClasses.labelTick }),
             React.createElement("div", { className: cssClasses.labelTextContainer },
                 labelText,
@@ -6086,7 +6137,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"3.0.0-beta.7"}`, "survey-react-ui");
+checkLibraryVersion(`${"3.0.0-beta.9"}`, "survey-react-ui");
 
-export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFileItem, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImageMap, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicProgressText, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
+export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFileItem, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionBooleanSwitch, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImageMap, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicProgressText, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
 //# sourceMappingURL=survey-react-ui.mjs.map