survey-react-ui 3.0.0-beta.3 → 3.0.0-beta.5

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v3.0.0-beta.3
+ * surveyjs - Survey JavaScript library v3.0.0-beta.5
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -415,7 +415,7 @@ class SurveyActionBarSeparator extends React.Component {
         super(props);
     }
     render() {
-        var className = `sv-action-bar-separator ${this.props.cssClasses}`;
+        var className = `sd-action-bar__separator ${this.props.cssClasses}`;
         return React.createElement("div", { className: className });
     }
 }
@@ -501,7 +501,7 @@ class SurveyAction extends SurveyElementBase {
             item: this.item,
         });
         return (React.createElement("div", { className: itemClass, id: "" + this.item.uniqueId, ref: this.ref },
-            React.createElement("div", { className: "sv-action__content" },
+            React.createElement("div", { className: this.item.getActionRootContentCss() },
                 separator,
                 itemComponent)));
     }
@@ -557,10 +557,9 @@ class SurveyActionBarItem extends SurveyElementBase {
     }
     renderInnerButton() {
         const className = this.item.getActionBarItemCss();
-        const title = this.item.tooltip || this.item.title;
         const buttonContent = this.renderButtonContent();
         const tabIndex = this.item.disableTabStop ? -1 : undefined;
-        const button = attachKey2click(React.createElement("button", { ref: this.ref, className: className, type: "button", disabled: this.item.disabled, onMouseDown: (args) => this.item.doMouseDown(args), onFocus: (args) => this.item.doFocus(args), onClick: (args) => this.item.doAction(args), title: title, tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, "aria-controls": this.item.ariaControls, "aria-labelledby": this.item.ariaLabelledBy, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
+        const button = attachKey2click(React.createElement("button", { ref: this.ref, className: className, type: "button", disabled: this.item.disabled, onMouseDown: (args) => this.item.doMouseDown(args), onFocus: (args) => this.item.doFocus(args), onClick: (args) => this.item.doAction(args), title: this.item.getTooltip(), tabIndex: tabIndex, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, "aria-controls": this.item.ariaControls, "aria-labelledby": this.item.ariaLabelledBy, role: this.item.ariaRole }, buttonContent), this.item, { processEsc: false });
         return button;
     }
     componentDidMount() {
@@ -713,7 +712,7 @@ class PopupContainer extends SurveyElementBase {
 class PopupDropdownContainer extends PopupContainer {
     renderHeaderPopup(popupModel) {
         const popupDropdownModel = popupModel;
-        if (!popupDropdownModel)
+        if (!popupDropdownModel || !popupDropdownModel.showHeader)
             return null;
         return (React.createElement("span", { style: {
                 left: popupDropdownModel.pointerTarget.left,
@@ -1152,6 +1151,8 @@ var chevrondown_24x24 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/20
 
 var chevronright_16x16 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.35 8.34627L7.35 12.3463C7.25 12.4463 7.12 12.4963 7 12.4963C6.88 12.4963 6.74 12.4463 6.65 12.3463C6.45 12.1463 6.45 11.8363 6.65 11.6363L10.3 7.98627L6.65 4.34627C6.45 4.15627 6.45 3.83627 6.65 3.64627C6.85 3.45627 7.16 3.44627 7.35 3.64627L11.35 7.64627C11.55 7.84627 11.55 8.15627 11.35 8.35627V8.34627Z\"/></svg>";
 
+var chevronright_24x24 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.2263 7.46872L15.2263 11.4687C15.3763 11.6187 15.4463 11.8087 15.4463 11.9987C15.4463 12.1887 15.3763 12.3787 15.2263 12.5287L11.2263 16.5287C10.9363 16.8187 10.4563 16.8187 10.1663 16.5287C9.87629 16.2387 9.87629 15.7587 10.1663 15.4687L13.6363 11.9987L10.1663 8.52872C9.87629 8.23872 9.87629 7.75872 10.1663 7.46872C10.4563 7.17872 10.9363 7.17872 11.2263 7.46872Z\"/></svg>";
+
 var clear_16x16 = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.35 11.65C12.55 11.85 12.55 12.16 12.35 12.36C12.25 12.46 12.12 12.51 12 12.51C11.88 12.51 11.74 12.46 11.65 12.36L8 8.71L4.35 12.36C4.25 12.46 4.12 12.51 4 12.51C3.88 12.51 3.74 12.46 3.65 12.36C3.45 12.16 3.45 11.85 3.65 11.65L7.3 8L3.65 4.35C3.45 4.16 3.45 3.84 3.65 3.65C3.85 3.46 4.16 3.45 4.35 3.65L8 7.3L11.65 3.65C11.85 3.45 12.16 3.45 12.36 3.65C12.56 3.85 12.56 4.16 12.36 4.36L8.71 8.01L12.36 11.66L12.35 11.65Z\"/></svg>";
 
 var clear_24x24 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20.12 10.9325C20.64 10.4125 20.93 9.7225 20.93 8.9925C20.93 8.2625 20.64 7.5725 20.12 7.0525L16.95 3.8825C15.88 2.8125 14.13 2.8125 13.06 3.8825L3.88 13.0525C3.36 13.5725 3.07 14.2625 3.07 14.9925C3.07 15.7225 3.36 16.4125 3.88 16.9325L5.64 18.6925C6.57 19.6225 7.78 20.0825 9 20.0825C10.22 20.0825 11.43 19.6225 12.36 18.6925L20.12 10.9325ZM14.12 4.9325C14.36 4.6925 14.67 4.5625 15 4.5625C15.33 4.5625 15.65 4.6925 15.88 4.9325L19.05 8.1025C19.54 8.5925 19.54 9.3825 19.05 9.8725L12.99 15.9325L8.05 10.9925L14.12 4.9325ZM6.7 17.6325L4.94 15.8725C4.45 15.3825 4.45 14.5925 4.94 14.1025L7 12.0425L11.94 16.9825L11.3 17.6225C10.07 18.8525 7.93 18.8525 6.7 17.6225V17.6325ZM22.75 20.9925C22.75 21.4025 22.41 21.7425 22 21.7425H14C13.59 21.7425 13.25 21.4025 13.25 20.9925C13.25 20.5825 13.59 20.2425 14 20.2425H22C22.41 20.2425 22.75 20.5825 22.75 20.9925ZM4.75 20.9925C4.75 21.4025 4.41 21.7425 4 21.7425H2C1.59 21.7425 1.25 21.4025 1.25 20.9925C1.25 20.5825 1.59 20.2425 2 20.2425H4C4.41 20.2425 4.75 20.5825 4.75 20.9925Z\"/></svg>";
@@ -1259,6 +1260,7 @@ const icons = {
   "check-24x24": check_24x24,
   "chevrondown-24x24": chevrondown_24x24,
   "chevronright-16x16": chevronright_16x16,
+  "chevronright-24x24": chevronright_24x24,
   "clear-16x16": clear_16x16,
   "clear-24x24": clear_24x24,
   "close-16x16": close_16x16,
@@ -2896,13 +2898,13 @@ class SurveyQuestionSelectBaseItem extends ReactSurveyElement {
         return null; //{ marginRight: "3px" };
     }
     renderComment() {
-        if (!this.item.isCommentShowing)
+        if (!this.item.renderedIsCommentShowing)
             return null;
         return React.createElement("div", { className: this.question.getCommentAreaCss(true) },
             React.createElement(SurveyQuestionCommentValueItem, { question: this.question, item: this.item, cssClasses: this.question.cssClasses }));
     }
     renderPanel() {
-        if (this.item.isPanelShowing) {
+        if (this.item.renderedIsPanelShowing) {
             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 }));
         }
@@ -3342,12 +3344,13 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
         return this.questionBase.renderedValue;
     }
     renderReadOnlyElement() {
+        if (this.question.showInputFieldComponent) {
+            return (React.createElement("div", { className: this.question.cssClasses.controlValue }, this.renderValueElement()));
+        }
         if (this.question.readOnlyText) {
             return (React.createElement("div", { className: this.question.cssClasses.controlValue }, this.renderLocString(this.question.locReadOnlyText)));
         }
-        else {
-            return null;
-        }
+        return null;
     }
     renderSelect(cssClasses) {
         let selectElement = null;
@@ -3368,7 +3371,9 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
     }
     renderValueElement() {
         if (this.question.showInputFieldComponent) {
-            return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: this.dropdownListModel.getSelectedAction(), question: this.question });
+            const listModel = this.dropdownListModel;
+            const actionItem = !!listModel ? listModel.getSelectedAction() : this.question.selectedItem;
+            return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: actionItem, question: this.question });
         }
         else if (this.question.showSelectedItemLocText) {
             return this.renderLocString(this.question.selectedItemLocText);
@@ -3851,9 +3856,9 @@ class SurveyFileChooseButton extends ReactSurveyElement {
         return (this.props.item && this.props.item.data.question) || this.props.data.question;
     }
     render() {
-        return attachKey2click(React.createElement("label", { tabIndex: 0, className: this.question.getChooseFileCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText, onClick: (e) => this.question.chooseFile(e.nativeEvent) },
-            (!!this.question.cssClasses.chooseFileIconId) ? React.createElement(SvgIcon, { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto" }) : null,
-            React.createElement("span", null, this.question.chooseButtonText)));
+        return attachKey2click(React.createElement("label", { tabIndex: 0, className: this.props.item.getActionBarItemCss(), htmlFor: this.question.inputId, "aria-label": this.question.chooseButtonText, onClick: (e) => this.question.chooseFile(e.nativeEvent) },
+            !!this.props.item.iconName ? React.createElement(SvgIcon, { title: this.question.chooseButtonText, iconName: this.question.cssClasses.chooseFileIconId, size: "auto", className: this.props.item.cssClasses.itemIcon }) : null,
+            this.props.item.hasTitle ? React.createElement(SurveyLocStringViewer, { model: this.props.item.locTitle, textClass: this.props.item.getActionBarItemTitleCss() }) : null));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-file-choose-btn", (props) => {
@@ -3918,10 +3923,7 @@ class SurveyFileItem extends SurveyElementBase {
             this.renderFileSign(this.question.cssClasses.fileSign, val),
             React.createElement("div", { className: this.question.getImageWrapperCss(val) },
                 this.question.canPreviewImage(val) ? (React.createElement("img", { src: val.content, style: { height: this.question.imageHeight, width: this.question.imageWidth }, alt: "File preview" })) : (this.question.cssClasses.defaultImage ? (React.createElement(SvgIcon, { iconName: this.question.cssClasses.defaultImageIconId, size: "auto", className: this.question.cssClasses.defaultImage })) : null),
-                val.name && !this.question.isReadOnly ? (React.createElement("div", { className: this.question.getRemoveButtonCss(), onClick: (event) => this.question.doRemoveFile(val, event) },
-                    React.createElement("span", { className: this.question.cssClasses.removeFile }, this.question.removeFileCaption),
-                    (this.question.cssClasses.removeFileSvgIconId) ?
-                        (React.createElement(SvgIcon, { title: this.question.removeFileCaption, iconName: this.question.cssClasses.removeFileSvgIconId, size: "auto", className: this.question.cssClasses.removeFileSvg })) : null)) : null),
+                val.name && !this.question.isReadOnly ? (React.createElement(SurveyAction, { item: this.question.getRemoveFileButton(val) })) : null),
             this.renderFileSign(this.question.cssClasses.fileSignBottom, val)));
     }
     canRender() {
@@ -5122,10 +5124,11 @@ class List extends SurveyElementBase {
                 React.createElement("button", { className: this.model.cssClasses.searchClearButtonIcon, onClick: (event) => { this.model.onClickSearchClearButton(event); } },
                     React.createElement(SvgIcon, { iconName: "icon-searchclear", size: "auto" })) : null;
             return (React.createElement("div", { className: this.model.cssClasses.filter },
-                React.createElement("div", { className: this.model.cssClasses.filterIcon },
-                    React.createElement(SvgIcon, { iconName: "icon-search", size: "auto" })),
-                React.createElement("input", { type: "text", className: this.model.cssClasses.filterInput, "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onKeyUp: onKeyUp, onChange: onChange }),
-                clearButton));
+                React.createElement("div", { className: this.model.cssClasses.filterBox },
+                    React.createElement("div", { className: this.model.cssClasses.filterIcon },
+                        React.createElement(SvgIcon, { iconName: "icon-search", size: "auto" })),
+                    React.createElement("input", { type: "text", className: this.model.cssClasses.filterInput, "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onKeyUp: onKeyUp, onChange: onChange }),
+                    clearButton)));
         }
     }
     emptyContent() {
@@ -5174,6 +5177,10 @@ class SurveyQuestionRating extends SurveyQuestionElementBase {
         this.question.setValueFromClick(event.target.value);
         this.setState({ value: this.question.value });
     }
+    componentDidMount() {
+        super.componentDidMount();
+        this.setState({ value: this.question.value });
+    }
     renderItem(item, index) {
         const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
             question: this.question,
@@ -5334,12 +5341,7 @@ class PopupSurvey extends Survey {
     renderElement() {
         var header = this.renderWindowHeader();
         var body = this.renderBody();
-        let style = {};
-        if (!!this.popup.renderedWidth) {
-            style.width = this.popup.renderedWidth;
-            style.maxWidth = this.popup.renderedWidth;
-        }
-        return (React.createElement("div", { className: this.popup.cssRoot, style: style, onScroll: () => this.popup.onScroll() },
+        return (React.createElement("div", { className: this.popup.cssRoot, style: this.popup.renderedStyle, onScroll: () => this.popup.onScroll() },
             React.createElement("div", { className: this.popup.cssRootContent },
                 header,
                 body)));
@@ -5644,13 +5646,13 @@ class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
     renderElement() {
         var cssClasses = this.question.cssClasses;
         const loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
-        var clearButton = this.renderCleanButton();
+        var toolbar = this.renderToolbar();
         return (React.createElement("div", { className: cssClasses.root, ref: (root) => (this.setControl(root)), style: { width: this.question.renderedCanvasWidth } },
             React.createElement("div", { className: cssClasses.placeholder, style: { display: this.question.needShowPlaceholder() ? "" : "none" } }, this.renderLocString(this.question.locRenderedPlaceholder)),
             React.createElement("div", null,
                 this.renderBackgroundImage(),
                 React.createElement("canvas", { tabIndex: -1, className: this.question.cssClasses.canvas, onBlur: (event) => { this.question.onBlur(event); } })),
-            clearButton,
+            toolbar,
             loadingIndicator));
     }
     renderBackgroundImage() {
@@ -5662,14 +5664,8 @@ class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
         return React.createElement("div", { className: this.question.cssClasses.loadingIndicator },
             React.createElement(LoadingIndicatorComponent, null));
     }
-    renderCleanButton() {
-        if (!this.question.canShowClearButton)
-            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.clearValueFromUI() },
-                this.question.cssClasses.clearButtonIconId ? React.createElement(SvgIcon, { iconName: this.question.cssClasses.clearButtonIconId, size: "auto" }) : React.createElement("span", null, "\u2716"),
-                " "));
+    renderToolbar() {
+        return React.createElement(SurveyActionBar, { model: this.question.toolbar });
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("signaturepad", (props) => {
@@ -5774,6 +5770,13 @@ class SurveyQuestionCustom extends SurveyQuestionUncontrolledElement {
         }
         return res;
     }
+    getRenderedElements() {
+        const res = super.getRenderedElements();
+        if (!!this.question.contentQuestion) {
+            res.push(this.question.contentQuestion);
+        }
+        return res;
+    }
     renderElement() {
         return SurveyQuestion.renderQuestionBody(this.creator, this.question.contentQuestion);
     }
@@ -6094,7 +6097,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"3.0.0-beta.3"}`, "survey-react-ui");
+checkLibraryVersion(`${"3.0.0-beta.5"}`, "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 };
 //# sourceMappingURL=survey-react-ui.mjs.map