survey-react-ui 2.3.9 → 2.3.10

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.3.9
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1074,7 +1074,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.9
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1144,7 +1144,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.9
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2170,7 +2170,7 @@ class SurveyQuestion extends SurveyElementBase {
         var descriptionUnderInput = question.hasDescriptionUnderInput
             ? this.renderDescription()
             : null;
-        return (React.createElement("div", { className: question.cssContent || undefined, style: contentStyle, "aria-hidden": question.contentAriaHidden, role: "presentation" },
+        return (React.createElement("div", { className: question.cssContent || undefined, style: contentStyle, "aria-hidden": question.contentAriaHidden, role: "presentation", "data-sv-drop-target-matrix": this.question.dragDropMatrixAttribute, "data-sv-drop-target-matrix-row": this.question.dragDropMatrixAttribute },
             questionRender,
             comment,
             descriptionUnderInput));
@@ -2646,7 +2646,7 @@ ReactElementFactory.Instance.registerElement("flowpanel", props => {
     return React.createElement(SurveyFlowPanel, props);
 });
 
-class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
+class SurveyQuestionSelectbase extends SurveyQuestionElementBase {
     constructor(props) {
         super(props);
     }
@@ -2656,29 +2656,29 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
     renderElement() {
         var cssClasses = this.question.cssClasses;
         return (React.createElement("fieldset", { className: this.question.getSelectBaseRootCss(), ref: (fieldset) => (this.setControl(fieldset)), role: this.question.a11y_input_ariaRole, "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 },
-            React.createElement("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
-            this.getHeader(),
+            this.renderHeader(),
             this.question.hasColumns
                 ? this.getColumnedBody(cssClasses)
                 : this.getBody(cssClasses),
             this.getFooter()));
     }
-    getHeader() {
-        if (this.question.hasHeadItems) {
-            return this.question.headItems.map((item, ii) => this.renderItem(item, false, this.question.cssClasses));
-        }
-    }
+    renderHeader() { return null; }
     getFooter() {
         if (this.question.hasFootItems) {
-            return this.question.footItems.map((item, ii) => this.renderItem(item, false, this.question.cssClasses));
+            const items = this.question.footItems.map((item, ii) => this.renderItem(item, false, this.question.cssClasses));
+            return React.createElement(React.Fragment, null, items);
         }
+        return null;
     }
+    getStateValue() { return undefined; }
+    isItemChecked(item, value) { return false; }
     getColumnedBody(cssClasses) {
         return (React.createElement("div", { className: cssClasses.rootMultiColumn }, this.getColumns(cssClasses)));
     }
     getColumns(cssClasses) {
+        const value = this.getStateValue();
         return this.question.columns.map((column, ci) => {
-            var items = column.map((item, ii) => this.renderItem(item, ci === 0 && ii === 0, cssClasses, "" + ci + ii));
+            var items = column.map((item, ii) => this.renderItem(item, ci === 0 && ii === 0, cssClasses, "" + ci + ii, this.isItemChecked(item, value)));
             return (React.createElement("div", { key: "column" + ci + this.question.getItemsColumnKey(column), className: this.question.getColumnClass(), role: "presentation" }, items));
         });
     }
@@ -2691,20 +2691,21 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
         }
     }
     getItems(cssClasses, choices) {
-        var renderedItems = [];
-        for (var i = 0; i < choices.length; i++) {
-            var item = choices[i];
-            var renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i);
+        const items = [];
+        const value = this.getStateValue();
+        for (let i = 0; i < choices.length; i++) {
+            const item = choices[i];
+            const renderedItem = this.renderItem(item, i == 0, cssClasses, "" + i, this.isItemChecked(item, value));
             if (!!renderedItem) {
-                renderedItems.push(renderedItem);
+                items.push(renderedItem);
             }
         }
-        return renderedItems;
+        return items;
     }
     get textStyle() {
         return null;
     }
-    renderItem(item, isFirst, cssClasses, index) {
+    renderItem(item, isFirst, cssClasses, index, isChecked) {
         const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
             key: item.value,
             question: this.question,
@@ -2714,6 +2715,8 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
             textStyle: this.textStyle,
             index: index,
             isFirst: isFirst,
+            isChecked: isChecked,
+            creator: this.props.creator,
         });
         const survey = this.question.survey;
         let wrappedItem = null;
@@ -2723,11 +2726,11 @@ class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
         return wrappedItem !== null && wrappedItem !== void 0 ? wrappedItem : renderedItem;
     }
 }
-class SurveyQuestionCheckboxItem extends ReactSurveyElement {
+class SurveyQuestionSelectBaseItem extends ReactSurveyElement {
     constructor(props) {
         super(props);
         this.handleOnChange = (event) => {
-            this.question.clickItemHandler(this.item, event.target.checked);
+            this.doOnItemChange(event);
         };
         this.rootRef = React.createRef();
     }
@@ -2774,15 +2777,19 @@ class SurveyQuestionCheckboxItem extends ReactSurveyElement {
             !!this.question.customWidget.widgetJson.isDefaultRender ||
             !!this.question.customWidget.widgetJson.render);
     }
+    doOnItemChange(event) { }
     canRender() {
         return !!this.item && !!this.question;
     }
     renderElement() {
-        const isChecked = this.question.isItemSelected(this.item);
         return React.createElement(React.Fragment, null,
-            this.renderCheckbox(isChecked, null),
+            this.renderElementContent(),
+            this.renderPanel(),
             this.renderComment());
     }
+    renderElementContent() {
+        return null;
+    }
     get inputStyle() {
         return null; //{ marginRight: "3px" };
     }
@@ -2792,7 +2799,61 @@ class SurveyQuestionCheckboxItem extends ReactSurveyElement {
         return React.createElement("div", { className: this.question.getCommentAreaCss(true) },
             React.createElement(SurveyQuestionCommentValueItem, { question: this.question, item: this.item, cssClasses: this.question.cssClasses }));
     }
-    renderCheckbox(isChecked, otherItem) {
+    renderPanel() {
+        if (this.item.isPanelShowing) {
+            const panel = this.item.panel;
+            return (React.createElement(SurveyPanel, { key: panel.id, element: panel, survey: this.question.survey, cssClasses: this.props.cssClasses, isDisplayMode: this.isDisplayMode, creator: this.props.creator }));
+        }
+        return null;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(this.rootRef.current);
+        }
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        if (!this.question.isDesignMode) {
+            this.item.setRootElement(undefined);
+        }
+    }
+}
+
+class SurveyQuestionCheckbox extends SurveyQuestionSelectbase {
+    constructor(props) {
+        super(props);
+    }
+    get question() {
+        return this.questionBase;
+    }
+    renderHeader() {
+        return React.createElement(React.Fragment, null,
+            React.createElement("legend", { className: "sv-hidden" }, this.question.locTitle.renderedHtml),
+            this.getHeader());
+    }
+    getHeader() {
+        if (this.question.hasHeadItems) {
+            return this.question.headItems.map((item, ii) => this.renderItem(item, false, this.question.cssClasses));
+        }
+        return null;
+    }
+}
+class SurveyQuestionCheckboxItem extends SurveyQuestionSelectBaseItem {
+    constructor(props) {
+        super(props);
+    }
+    doOnItemChange(event) {
+        this.question.clickItemHandler(this.item, event.target.checked);
+    }
+    renderElementContent() {
+        const isChecked = this.question.isItemSelected(this.item);
+        return this.renderCheckbox(isChecked);
+    }
+    get inputStyle() {
+        return null; //{ marginRight: "3px" };
+    }
+    renderCheckbox(isChecked) {
         const id = this.question.getItemId(this.item);
         const itemClass = this.question.getItemClass(this.item);
         const labelClass = this.question.getLabelClass(this.item);
@@ -2806,20 +2867,7 @@ class SurveyQuestionCheckboxItem extends ReactSurveyElement {
                             React.createElement("use", { xlinkHref: this.question.itemSvgIcon })) :
                         null) :
                     null,
-                itemLabel),
-            otherItem));
-    }
-    componentDidMount() {
-        super.componentDidMount();
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(this.rootRef.current);
-        }
-    }
-    componentWillUnmount() {
-        super.componentWillUnmount();
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(undefined);
-        }
+                itemLabel)));
     }
 }
 ReactElementFactory.Instance.registerElement("survey-checkbox-item", (props) => {
@@ -3855,90 +3903,32 @@ ReactQuestionFactory.Instance.registerQuestion("multipletext", (props) => {
     return React.createElement(SurveyQuestionMultipleText, props);
 });
 
-class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
+class SurveyQuestionRadiogroup extends SurveyQuestionSelectbase {
     constructor(props) {
         super(props);
     }
     get question() {
         return this.questionBase;
     }
-    renderElement() {
-        var cssClasses = this.question.cssClasses;
-        var clearButton = null;
-        if (this.question.showClearButtonInContent) {
-            clearButton = (React.createElement("div", null,
-                React.createElement("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: () => this.question.clearValue(true), value: this.question.clearButtonCaption })));
-        }
-        return (React.createElement("fieldset", { className: this.question.getSelectBaseRootCss(), ref: (fieldset) => (this.setControl(fieldset)), role: this.question.a11y_input_ariaRole, "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 },
-            this.question.hasColumns
-                ? this.getColumnedBody(cssClasses)
-                : this.getBody(cssClasses),
-            this.getFooter(),
-            clearButton));
-    }
     getFooter() {
-        if (this.question.hasFootItems) {
-            return this.question.footItems.map((item, ii) => this.renderItem(item, false, this.question.cssClasses));
-        }
-    }
-    getColumnedBody(cssClasses) {
-        return (React.createElement("div", { className: cssClasses.rootMultiColumn }, this.getColumns(cssClasses)));
-    }
-    getColumns(cssClasses) {
-        var value = this.getStateValue();
-        return this.question.columns.map((column, ci) => {
-            var items = column.map((item, ii) => this.renderItem(item, value, cssClasses, "" + ci + ii));
-            return (React.createElement("div", { key: "column" + ci + this.question.getItemsColumnKey(column), className: this.question.getColumnClass(), role: "presentation" }, items));
-        });
-    }
-    getBody(cssClasses) {
-        if (this.question.blockedRow) {
-            return React.createElement("div", { className: cssClasses.rootRow }, this.getItems(cssClasses, this.question.dataChoices));
-        }
-        else {
-            return React.createElement(React.Fragment, null, this.getItems(cssClasses, this.question.bodyItems));
-        }
-    }
-    getItems(cssClasses, choices) {
-        var items = [];
-        var value = this.getStateValue();
-        for (var i = 0; i < choices.length; i++) {
-            var item = choices[i];
-            var renderedItem = this.renderItem(item, value, cssClasses, "" + i);
-            items.push(renderedItem);
-        }
-        return items;
-    }
-    get textStyle() {
-        return null; //{ display: "inline", position: "static" };
+        return React.createElement(React.Fragment, null,
+            super.getFooter(),
+            this.renderClearButton());
     }
-    renderItem(item, value, cssClasses, index) {
-        const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: item.value,
-            question: this.question,
-            cssClasses: cssClasses,
-            isDisplayMode: this.isDisplayMode,
-            item: item,
-            textStyle: this.textStyle,
-            index: index,
-            isChecked: value === item.value,
-        });
-        const survey = this.question.survey;
-        let wrappedItem = null;
-        if (!!survey) {
-            wrappedItem = ReactSurveyElementsWrapper.wrapItemValue(survey, renderedItem, this.question, item);
-        }
-        return wrappedItem !== null && wrappedItem !== void 0 ? wrappedItem : renderedItem;
+    renderClearButton() {
+        if (!this.question.showClearButtonInContent)
+            return null;
+        return (React.createElement("div", null,
+            React.createElement("input", { type: "button", className: this.question.cssClasses.clearButton, onClick: () => this.question.clearValueFromUI(), value: this.question.clearButtonCaption })));
     }
     getStateValue() {
         return !this.question.isEmpty() ? this.question.renderedValue : "";
     }
+    isItemChecked(item, value) { return item.value === value; }
 }
-class SurveyQuestionRadioItem extends ReactSurveyElement {
+class SurveyQuestionRadioItem extends SurveyQuestionSelectBaseItem {
     constructor(props) {
         super(props);
-        this.rootRef = React.createRef();
-        this.handleOnChange = this.handleOnChange.bind(this);
         this.handleOnMouseDown = this.handleOnMouseDown.bind(this);
     }
     getStateElement() {
@@ -3947,64 +3937,17 @@ class SurveyQuestionRadioItem extends ReactSurveyElement {
     get question() {
         return this.props.question;
     }
-    get item() {
-        return this.props.item;
-    }
-    get textStyle() {
-        return this.props.textStyle;
-    }
-    get index() {
-        return this.props.index;
-    }
     get isChecked() {
         return this.props.isChecked;
     }
-    get hideCaption() {
-        return this.props.hideCaption === true;
-    }
-    get ariaLabel() {
-        return this.props.ariaLabel || null;
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (!super.shouldComponentUpdate(nextProps, nextState))
-            return false;
-        if (!this.question)
-            return false;
-        return (!this.question.customWidget ||
-            !!this.question.customWidgetData.isNeedRender ||
-            !!this.question.customWidget.widgetJson.isDefaultRender ||
-            !!this.question.customWidget.widgetJson.render);
-    }
-    handleOnChange(event) {
+    doOnItemChange(event) {
         this.question.clickItemHandler(this.item);
     }
     handleOnMouseDown(event) {
         this.question.onMouseDown();
     }
-    canRender() {
-        return !!this.question && !!this.item;
-    }
-    componentDidUpdate(prevProps, prevState) {
-        super.componentDidUpdate(prevProps, prevState);
-        if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
-            if (this.props.item) {
-                this.props.item.setRootElement(this.rootRef.current);
-            }
-            if (prevProps.item) {
-                prevProps.item.setRootElement(undefined);
-            }
-        }
-    }
-    renderElement() {
-        return React.createElement(React.Fragment, null,
-            this.renderRadioButton(),
-            this.renderComment());
-    }
-    renderComment() {
-        if (!this.item.isCommentShowing)
-            return null;
-        return React.createElement("div", { className: this.question.getCommentAreaCss(true) },
-            React.createElement(SurveyQuestionCommentValueItem, { question: this.question, item: this.item, cssClasses: this.question.cssClasses }));
+    renderElementContent() {
+        return this.renderRadioButton();
     }
     renderRadioButton() {
         var itemClass = this.question.getItemClass(this.item);
@@ -4022,18 +3965,6 @@ class SurveyQuestionRadioItem extends ReactSurveyElement {
                     null,
                 itemLabel)));
     }
-    componentDidMount() {
-        super.componentDidMount();
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(this.rootRef.current);
-        }
-    }
-    componentWillUnmount() {
-        super.componentWillUnmount();
-        if (!this.question.isDesignMode) {
-            this.item.setRootElement(undefined);
-        }
-    }
 }
 ReactElementFactory.Instance.registerElement("survey-radiogroup-item", (props) => {
     return React.createElement(SurveyQuestionRadioItem, props);
@@ -4489,7 +4420,7 @@ class SurveyQuestionMatrixDropdownBase extends SurveyQuestionElementBase {
         return this.renderTableDiv();
     }
     renderTableDiv() {
-        return (React.createElement("div", { className: this.question.cssClasses.tableWrapper, "data-sv-drop-target-matrix-row": this.question.renderedTable.wrapperDropTargetId, ref: (root) => (this.setControl(root)) },
+        return (React.createElement("div", { className: this.question.cssClasses.tableWrapper, ref: (root) => (this.setControl(root)) },
             React.createElement(SurveyQuestionMatrixTable, { question: this.question, creator: this.creator, wrapCell: (cell, element, reason) => this.wrapCell(cell, element, reason) })));
     }
 }
@@ -5646,7 +5577,7 @@ class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
             return null;
         var cssClasses = this.question.cssClasses;
         return React.createElement("div", { className: cssClasses.controls },
-            React.createElement("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: () => this.question.clearValue(true) },
+            React.createElement("button", { type: "button", className: cssClasses.clearButton, title: this.question.clearButtonCaption, onClick: () => this.question.clearValueFromUI() },
                 this.question.cssClasses.clearButtonIconId ? React.createElement(SvgIcon, { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : React.createElement("span", null, "\u2716"),
                 " "));
     }
@@ -6093,9 +6024,20 @@ class SliderLabelItem extends SurveyElementBase {
     renderElement() {
         const { cssClasses, handleLabelPointerUp, getLabelCss, getPercent } = 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));
+        }
+        else {
+            labelText = React.createElement("div", { className: cssClasses.labelText }, this.renderLocString(locText));
+        }
         return React.createElement("div", { key: this.item.id, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, value); } },
             React.createElement("div", { className: cssClasses.labelTick }),
-            React.createElement("div", { className: cssClasses.labelText }, this.renderLocString(locText)));
+            React.createElement("div", { className: cssClasses.labelTextContainer },
+                labelText,
+                labelTextSecondary));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-slider-label-item", (props) => {
@@ -6235,7 +6177,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.3.9"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.3.10"}`, "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, SurveyNavigationButton, 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, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, 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