survey-js-ui 2.3.10 → 2.3.12

package/fesm/survey-js-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.3.10
+ * surveyjs - Survey JavaScript library v2.3.12
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -171,6 +171,16 @@ class SurveyElementBase extends x$2 {
                 });
             }
         };
+        this.onArrayChangedCallback = (stateElement, options) => {
+            if (this.isRendering)
+                return;
+            this.changedStatePropNameValue = options.name;
+            this.setState((state) => {
+                var newState = {};
+                newState[options.name] = options.newValue;
+                return newState;
+            });
+        };
     }
     componentDidMount() {
         this.makeBaseElementsReact();
@@ -297,16 +307,7 @@ class SurveyElementBase extends x$2 {
             var val = hash[key];
             if (Array.isArray(val)) {
                 var val = val;
-                val["onArrayChanged"] = (arrayChanges) => {
-                    if (this.isRendering)
-                        return;
-                    this.changedStatePropNameValue = key;
-                    this.setState((state) => {
-                        var newState = {};
-                        newState[key] = val;
-                        return newState;
-                    });
-                };
+                stateElement.addOnArrayChangedCallback(val, this.onArrayChangedCallback);
             }
         });
         stateElement.setPropertyValueCoreHandler = this.propertyValueChangedHandler;
@@ -323,7 +324,7 @@ class SurveyElementBase extends x$2 {
             var val = hash[key];
             if (Array.isArray(val)) {
                 var val = val;
-                val["onArrayChanged"] = () => { };
+                stateElement.removeOnArrayChangedCallback(val, this.onArrayChangedCallback);
             }
         });
     }
@@ -854,13 +855,16 @@ class TitleActions extends x$2 {
     get element() {
         return this.props.element;
     }
+    get renderActions() {
+        return this.props.renderActions === undefined ? true : this.props.renderActions;
+    }
     render() {
         const titleContent = _$1(TitleContent, { element: this.element, cssClasses: this.cssClasses });
         if (!this.element.hasTitleActions)
             return titleContent;
         return (_$1("div", { className: "sv-title-actions" },
             _$1("span", { className: "sv-title-actions__title" }, titleContent),
-            _$1(SurveyActionBar, { model: this.element.getTitleToolbar() })));
+            (this.renderActions ? _$1(SurveyActionBar, { model: this.element.getTitleToolbar() }) : null)));
     }
 }
 RendererFactory.Instance.registerRenderer("element", "title-actions", "sv-title-actions");
@@ -887,7 +891,7 @@ class TitleElement extends x$2 {
             return null;
         const ariaLabel = element.titleAriaLabel || undefined;
         const titleExpandableSvg = this.renderTitleExpandableSvg();
-        const titleContent = (_$1(TitleActions, { element: element, cssClasses: element.cssClasses }));
+        const titleContent = (_$1(TitleActions, { element: element, cssClasses: element.cssClasses, renderActions: this.props.renderActions }));
         let onClick = undefined;
         let onKeyUp = undefined;
         if (element.hasTitleEvents) {
@@ -1127,7 +1131,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.10
+ * surveyjs - Survey JavaScript library v2.3.12
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1197,7 +1201,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.3.10
+ * surveyjs - Survey JavaScript library v2.3.12
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1981,7 +1985,7 @@ class SurveyQuestionCommentValueItem extends SurveyQuestionCommentItem {
     getTextAreaModel() {
         return this.props.question.getCommentTextAreaModel(this.props.item);
     }
-    getKey() { return this.props.item.normalizedId; }
+    getKey() { return this.props.item.uniqueId; }
 }
 ReactQuestionFactory.Instance.registerQuestion("comment", (props) => {
     return _$1(SurveyQuestionComment, props);
@@ -2760,7 +2764,7 @@ class SurveyQuestionSelectbase extends SurveyQuestionElementBase {
     }
     renderItem(item, isFirst, cssClasses, index, isChecked) {
         const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
-            key: item.value,
+            key: item.uniqueId,
             question: this.question,
             cssClasses: cssClasses,
             isDisplayMode: this.isDisplayMode,
@@ -2980,7 +2984,7 @@ class SurveyQuestionRanking extends SurveyQuestionElementBase {
         const index = i;
         const indexText = this.question.getNumberByIndex(index);
         const tabIndex = this.question.getItemTabIndex(item);
-        const renderedItem = (_$1(SurveyQuestionRankingItem, { key: item.value, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, handlePointerUp: handlePointerUp, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
+        const renderedItem = (_$1(SurveyQuestionRankingItem, { key: item.uniqueId, text: text, index: index, indexText: indexText, itemTabIndex: tabIndex, handleKeydown: handleKeydown, handlePointerDown: handlePointerDown, handlePointerUp: handlePointerUp, cssClasses: cssClasses, itemClass: itemClass, question: question, unrankedItem: unrankedItem, item: item }));
         const survey = this.question.survey;
         let wrappedItem = null;
         if (!!survey) {
@@ -3360,7 +3364,7 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
     renderOther(item, cssClasses) {
         if (!item || !item.isCommentShowing)
             return null;
-        return (_$1("div", { key: item.normalizedId, className: this.question.getCommentAreaCss(true) },
+        return (_$1("div", { key: item.uniqueId, className: this.question.getCommentAreaCss(true) },
             _$1(SurveyQuestionCommentValueItem, { question: this.question, item: item, cssClasses: this.question.cssClasses })));
     }
     renderEditorButtons() {
@@ -3483,7 +3487,7 @@ class SurveyQuestionDropdownSelect extends SurveyQuestionDropdown {
         _$1("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true }, this.question.readOnlyText)) :
             (_$1("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: (select) => (this.setControl(select)), autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, required: this.question.isRequired },
                 this.question.allowClear ? (_$1("option", { value: "" }, this.question.placeholder)) : null,
-                this.question.visibleChoices.map((item, i) => _$1(SurveyQuestionOptionItem, { key: "item" + i, item: item }))));
+                this.question.visibleChoices.map((item) => _$1(SurveyQuestionOptionItem, { key: item.uniqueId, item: item }))));
         return (_$1("div", { className: cssClasses.selectWrapper },
             selectElement,
             this.createChevronButton()));
@@ -3529,21 +3533,19 @@ class SurveyQuestionMatrix extends SurveyQuestionElementBase {
         var headers = [];
         for (var i = 0; i < this.question.visibleColumns.length; i++) {
             var column = this.question.visibleColumns[i];
-            var key = "column" + i;
             var columText = this.renderLocString(column.locText);
             const style = {};
             if (!!this.question.columnMinWidth) {
                 style.minWidth = this.question.columnMinWidth;
                 style.width = this.question.columnMinWidth;
             }
-            headers.push(_$1("th", { className: this.question.cssClasses.headerCell, style: style, key: key }, this.wrapCell({ column: column }, columText, "column-header")));
+            headers.push(_$1("th", { className: this.question.cssClasses.headerCell, style: style, key: column.uniqueId }, this.wrapCell({ column: column }, columText, "column-header")));
         }
         var rows = [];
         var visibleRows = this.question.visibleRows;
         for (var i = 0; i < visibleRows.length; i++) {
             var row = visibleRows[i];
-            var key = "row-" + row.name + "-" + i;
-            rows.push(_$1(SurveyQuestionMatrixRow, { key: key, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
+            rows.push(_$1(SurveyQuestionMatrixRow, { key: row.uniqueId, question: this.question, cssClasses: cssClasses, row: row, isFirst: i == 0 }));
         }
         var header = !this.question.showHeader ? null : (_$1("thead", { role: "presentation" },
             _$1("tr", null,
@@ -3609,7 +3611,7 @@ class SurveyQuestionMatrixRow extends ReactSurveyElement {
         for (var i = 0; i < this.question.visibleColumns.length; i++) {
             let td = null;
             const column = this.question.visibleColumns[i];
-            const key = "value" + i;
+            const key = column.uniqueId;
             let itemClass = this.question.getItemClass(row, column);
             if (this.question.hasCellText) {
                 const getHandler = (column) => () => this.cellClick(row, column);
@@ -3908,7 +3910,7 @@ class SurveyQuestionMultipleText extends SurveyQuestionElementBase {
         else {
             cellContent = _$1(SurveyMultipleTextItem, { question: this.question, item: cell.item, creator: this.creator, cssClasses: cssClasses });
         }
-        return (_$1("td", { key: "item" + index, className: cell.className, onFocus: focusIn }, cellContent));
+        return (_$1("td", { key: cell.item.id, className: cell.className, onFocus: focusIn }, cellContent));
     }
     renderRow(rowIndex, cells, cssClasses) {
         const key = "item" + rowIndex;
@@ -5427,7 +5429,7 @@ class SurveyQuestionImagePicker extends SurveyQuestionElementBase {
     }
     getColumns(cssClasses) {
         return this.question.columns.map((column, ci) => {
-            var items = column.map((item, ii) => this.renderItem("item" + ii, item, cssClasses));
+            var items = column.map((item, ii) => this.renderItem(item, cssClasses));
             return (_$1("div", { key: "column" + ci + this.question.getItemsColumnKey(column), className: this.question.getColumnClass(), role: "presentation" }, items));
         });
     }
@@ -5435,16 +5437,15 @@ class SurveyQuestionImagePicker extends SurveyQuestionElementBase {
         var items = [];
         for (var i = 0; i < this.question.visibleChoices.length; i++) {
             var item = this.question.visibleChoices[i];
-            var key = "item" + i;
-            items.push(this.renderItem(key, item, cssClasses));
+            items.push(this.renderItem(item, cssClasses));
         }
         return items;
     }
     get textStyle() {
         return { marginLeft: "3px", display: "inline", position: "static" };
     }
-    renderItem(key, item, cssClasses) {
-        const renderedItem = _$1(SurveyQuestionImagePickerItem, { key: key, question: this.question, item: item, cssClasses: cssClasses });
+    renderItem(item, cssClasses) {
+        const renderedItem = _$1(SurveyQuestionImagePickerItem, { key: item.uniqueId, question: this.question, item: item, cssClasses: cssClasses });
         const survey = this.question.survey;
         let wrappedItem = null;
         if (!!survey) {
@@ -6086,7 +6087,7 @@ class SliderLabelItem extends SurveyElementBase {
         else {
             labelText = _$1("div", { className: cssClasses.labelText }, this.renderLocString(locText));
         }
-        return _$1("div", { key: this.item.id, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, value); } },
+        return _$1("div", { key: this.item.uniqueId, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, value); } },
             _$1("div", { className: cssClasses.labelTick }),
             _$1("div", { className: cssClasses.labelTextContainer },
                 labelText,
@@ -6279,7 +6280,7 @@ SurveyModel.prototype["render"] = function (element = null) {
     }
 };
 const preact = React;
-checkLibraryVersion(`${"2.3.10"}`, "survey-js-ui");
+checkLibraryVersion(`${"2.3.12"}`, "survey-js-ui");
 
 export { CharacterCounterComponent, O as Children, x$2 as Component, ComponentsContainer, k$2 as Fragment, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, N as PureComponent, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, SliderLabelItem, Cn as StrictMode, 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, P as Suspense, B as SuspenseList, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click, _n as cloneElement, Q$1 as createContext, _$1 as createElement, dn as createFactory, $ as createPortal, b$1 as createRef, Sn as findDOMNode, En as flushSync, D as forwardRef, tn as hydrate, pn as isFragment, yn as isMemo, mn as isValidElement, z as lazy, M as memo, preact, nn as render, renderPopupSurvey, renderSurvey, R as startTransition, bn as unmountComponentAtNode, gn as unstable_batchedUpdates, q$1 as useCallback, x$1 as useContext, P$1 as useDebugValue, w as useDeferredValue, y as useEffect, g$1 as useId, F$1 as useImperativeHandle, I as useInsertionEffect, _ as useLayoutEffect, T$1 as useMemo, h as useReducer, A$1 as useRef, d as useState, C as useSyncExternalStore, k as useTransition, vn as version };
 //# sourceMappingURL=survey-js-ui.mjs.map