survey-js-ui 2.2.0 → 2.2.2

package/fesm/survey-js-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.2.0
+ * surveyjs - Survey JavaScript library v2.2.2
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1005,7 +1005,7 @@ class SurveyActionBar extends SurveyElementBase {
     }
     componentDidMount() {
         super.componentDidMount();
-        if (!this.model.hasActions)
+        if (!this.model.hasVisibleActions)
             return;
         const container = this.rootRef.current;
         if (!!container) {
@@ -1021,7 +1021,7 @@ class SurveyActionBar extends SurveyElementBase {
         if (prevProps.model != this.props.model) {
             prevProps.model.resetResponsivityManager();
         }
-        if (!!this.model.hasActions) {
+        if (!!this.model.hasVisibleActions) {
             const container = this.rootRef.current;
             if (!!container) {
                 this.model.initResponsivityManager(container, (callback) => { setTimeout(callback, 100); });
@@ -1035,7 +1035,7 @@ class SurveyActionBar extends SurveyElementBase {
         if (!this.model.hasActions)
             return null;
         const items = this.renderItems();
-        return (_$1("div", { ref: this.rootRef, className: this.model.getRootCss(), onClick: this.handleClick ? function (event) {
+        return (_$1("div", { ref: this.rootRef, style: this.model.getRootStyle(), className: this.model.getRootCss(), onClick: this.handleClick ? function (event) {
                 event.stopPropagation();
             } : undefined }, items));
     }
@@ -1503,7 +1503,7 @@ class SurveyQuestion extends SurveyElementBase {
         var descriptionUnderInput = question.hasDescriptionUnderInput
             ? this.renderDescription()
             : null;
-        return (_$1("div", { className: question.cssContent || undefined, style: contentStyle, role: "presentation" },
+        return (_$1("div", { className: question.cssContent || undefined, style: contentStyle, "aria-hidden": question.contentAriaHidden, role: "presentation" },
             questionRender,
             comment,
             descriptionUnderInput));
@@ -1978,7 +1978,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.0
+ * surveyjs - Survey JavaScript library v2.2.2
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2048,7 +2048,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.2.0
+ * surveyjs - Survey JavaScript library v2.2.2
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -3248,7 +3248,7 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
         else {
             selectElement = _$1(k$2, null,
                 this.renderInput(),
-                _$1(Popup, { model: dropdownListModel.popupModel }));
+                this.question.isInputReadOnly ? null : _$1(Popup, { model: dropdownListModel.popupModel }));
         }
         return (_$1("div", { className: cssClasses.selectWrapper, onClick: this.click }, selectElement));
     }
@@ -3264,12 +3264,6 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
     renderInput() {
         const dropdownListModel = this.dropdownListModel;
         let valueElement = this.renderValueElement();
-        const { root } = settings.environment;
-        const onInputChange = (e) => {
-            if (e.target === root.activeElement) {
-                dropdownListModel.inputStringRendered = e.target.value;
-            }
-        };
         return (_$1("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
@@ -3283,9 +3277,19 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
                         _$1("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
                         _$1("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                _$1("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: (element) => (this.inputElement = element), className: this.question.cssClasses.filterStringInput, role: dropdownListModel.ariaInputRole, "aria-required": dropdownListModel.ariaInputRequired, "aria-invalid": dropdownListModel.ariaInputInvalid, "aria-errormessage": dropdownListModel.ariaInputErrorMessage, "aria-expanded": dropdownListModel.ariaInputExpanded, "aria-label": dropdownListModel.ariaInputLabel, "aria-labelledby": dropdownListModel.ariaInputLabelledby, "aria-describedby": dropdownListModel.ariaInputDescribedby, "aria-controls": dropdownListModel.ariaInputControls, "aria-activedescendant": dropdownListModel.ariaInputActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: (e) => { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
+                dropdownListModel.needRenderInput ? this.renderFilterInput() : null),
             this.renderEditorButtons()));
     }
+    renderFilterInput() {
+        const { root } = settings.environment;
+        const dropdownListModel = this.dropdownListModel;
+        const onInputChange = (e) => {
+            if (e.target === root.activeElement) {
+                dropdownListModel.inputStringRendered = e.target.value;
+            }
+        };
+        return _$1("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: (element) => (this.inputElement = element), className: this.question.cssClasses.filterStringInput, role: dropdownListModel.ariaInputRole, "aria-required": dropdownListModel.ariaInputRequired, "aria-invalid": dropdownListModel.ariaInputInvalid, "aria-errormessage": dropdownListModel.ariaInputErrorMessage, "aria-expanded": dropdownListModel.ariaInputExpanded, "aria-label": dropdownListModel.ariaInputLabel, "aria-labelledby": dropdownListModel.ariaInputLabelledby, "aria-describedby": dropdownListModel.ariaInputDescribedby, "aria-controls": dropdownListModel.ariaInputControls, "aria-activedescendant": dropdownListModel.ariaInputActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: (e) => { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus });
+    }
     renderOther(cssClasses) {
         return (_$1("div", { className: this.question.getCommentAreaCss(true) },
             _$1(SurveyQuestionOtherValueItem, { question: this.question, otherCss: cssClasses.other, cssClasses: cssClasses, isDisplayMode: this.isDisplayMode, isOther: true })));
@@ -3377,7 +3381,7 @@ class SurveyQuestionTagbox extends SurveyQuestionDropdownBase {
             disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: dropdownListModel.ariaQuestionRole, "aria-required": dropdownListModel.ariaQuestionRequired, "aria-invalid": dropdownListModel.ariaQuestionInvalid, "aria-errormessage": dropdownListModel.ariaQuestionErrorMessage, "aria-label": dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel.ariaQuestionDescribedby, "aria-expanded": dropdownListModel.ariaQuestionExpanded, "aria-controls": dropdownListModel.ariaQuestionControls, "aria-activedescendant": dropdownListModel.ariaQuestionActivedescendant, ref: (div) => (this.setControl(div)) },
             _$1("div", { className: this.question.cssClasses.controlValue },
                 items,
-                _$1(TagboxFilterString, { model: dropdownListModel, question: this.question })),
+                dropdownListModel.needRenderInput ? _$1(TagboxFilterString, { model: dropdownListModel, question: this.question }) : null),
             this.renderEditorButtons()));
     }
     renderElement() {
@@ -4308,7 +4312,7 @@ class MatrixRow extends SurveyElementBase {
         const model = this.model;
         if (!model.visible)
             return null;
-        return (_$1("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.row && model.row.id, onPointerDown: (event) => this.onPointerDownHandler(event) }, this.props.children));
+        return (_$1("tr", { ref: this.root, className: model.className, "data-sv-drop-target-matrix-row": model.dropTargetId, onPointerDown: (event) => this.onPointerDownHandler(event) }, this.props.children));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-matrix-row", (props) => {
@@ -4826,7 +4830,7 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
         return (_$1("div", { className: this.question.cssClasses.footer },
             _$1("hr", { className: this.question.cssClasses.separator }),
             range,
-            this.question.footerToolbar.visibleActions.length ? (_$1("div", { className: this.question.cssClasses.footerButtonsContainer },
+            this.question.footerToolbar.hasVisibleActions ? (_$1("div", { className: this.question.cssClasses.footerButtonsContainer },
                 _$1(SurveyActionBar, { model: this.question.footerToolbar }))) : null));
     }
     renderPlaceholder(cssClasses) {
@@ -5300,7 +5304,7 @@ class SurveyQuestionSlider extends SurveyQuestionElementBase {
     }
     getRangeInput() {
         const { renderedMax: max, renderedMin: min, step, cssClasses, handleRangeOnChange, handleRangePointerDown, handleRangePointerUp } = this.question;
-        return _$1("input", { name: "range-input", ref: this.rangeInputRef, className: cssClasses.input, type: "range", "aria-hidden": "true", min: min, max: max, step: step, tabIndex: -1, onChange: (e) => { handleRangeOnChange(e.nativeEvent); }, onPointerDown: (e) => { e.persist(); handleRangePointerDown(e.nativeEvent, this.control); }, onPointerUp: (e) => { handleRangePointerUp(e.nativeEvent, this.control); } });
+        return _$1("input", { name: "range-input", id: "sjs-slider-input-range-input", ref: this.rangeInputRef, className: cssClasses.input, type: "range", "aria-hidden": "true", min: min, max: max, step: step, tabIndex: -1, onChange: (e) => { handleRangeOnChange(e.nativeEvent); }, onPointerDown: (e) => { e.persist(); handleRangePointerDown(e.nativeEvent, this.control); }, onPointerUp: (e) => { handleRangePointerUp(e.nativeEvent, this.control); } });
     }
     getLabels() {
         const labels = [];
@@ -6294,7 +6298,7 @@ SurveyModel.prototype["render"] = function (element = null) {
     }
 };
 const preact = React;
-checkLibraryVersion(`${"2.2.0"}`, "survey-js-ui");
+checkLibraryVersion(`${"2.2.2"}`, "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, 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, K$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