survey-react-ui 2.5.14 → 3.0.0-beta.0

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.5.14
+ * surveyjs - Survey JavaScript library v3.0.0-beta.0
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -530,6 +530,10 @@ class SurveyAction extends SurveyElementBase {
     }
 }
 class SurveyActionBarItem extends SurveyElementBase {
+    constructor() {
+        super(...arguments);
+        this.ref = React.createRef();
+    }
     get item() {
         return this.props.item;
     }
@@ -556,9 +560,17 @@ class SurveyActionBarItem extends SurveyElementBase {
         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", { 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-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: 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 });
         return button;
     }
+    componentDidMount() {
+        super.componentDidMount();
+        this.props.item.setInputElement(this.ref.current);
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.props.item.setInputElement(undefined);
+    }
 }
 ReactElementFactory.Instance.registerElement("sv-action-bar-item", (props) => {
     return React.createElement(SurveyActionBarItem, props);
@@ -4881,52 +4893,30 @@ class SurveyQuestionMatrixDynamic extends SurveyQuestionMatrixDropdownBase {
             ? this.renderTableDiv()
             : this.renderNoRowsContent(cssClasses);
         return (React.createElement("div", null,
-            this.renderAddRowButtonOnTop(cssClasses),
+            this.renderTopToolbar(),
             mainDiv,
-            this.renderAddRowButtonOnBottom(cssClasses)));
+            this.renderBottomToolbar()));
     }
-    renderAddRowButtonOnTop(cssClasses) {
-        if (!this.matrix.renderedTable.showAddRowOnTop)
+    renderToolbar() {
+        return React.createElement("div", { className: this.matrix.cssClasses.footer }, ReactElementFactory.Instance.createElement("sv-action-bar", { model: this.matrix.toolbar }));
+    }
+    renderTopToolbar() {
+        if (!this.matrix.getShowToolbar("top"))
             return null;
-        return this.renderAddRowButton(cssClasses);
+        return this.renderToolbar();
     }
-    renderAddRowButtonOnBottom(cssClasses) {
-        if (!this.matrix.renderedTable.showAddRowOnBottom)
+    renderBottomToolbar() {
+        if (!this.matrix.getShowToolbar("bottom"))
             return null;
-        return this.renderAddRowButton(cssClasses);
+        return this.renderToolbar();
     }
     renderNoRowsContent(cssClasses) {
         return ReactElementFactory.Instance.createElement("sv-placeholder-matrixdynamic", { cssClasses: cssClasses, question: this.matrix });
     }
-    renderAddRowButton(cssClasses, isEmptySection = false) {
-        return ReactElementFactory.Instance.createElement("sv-matrixdynamic-add-btn", {
-            question: this.question, cssClasses, isEmptySection
-        });
-    }
 }
 ReactQuestionFactory.Instance.registerQuestion("matrixdynamic", (props) => {
     return React.createElement(SurveyQuestionMatrixDynamic, props);
 });
-class SurveyQuestionMatrixDynamicAddButton extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-        this.handleOnRowAddClick = this.handleOnRowAddClick.bind(this);
-    }
-    get matrix() {
-        return this.props.question;
-    }
-    handleOnRowAddClick(event) {
-        this.matrix.addRowUI();
-    }
-    renderElement() {
-        const addRowText = this.renderLocString(this.matrix.locAddRowText);
-        const addButton = (React.createElement("button", { className: this.matrix.getAddRowButtonCss(this.props.isEmptySection), type: "button", disabled: this.matrix.isInputReadOnly, onClick: this.matrix.isDesignMode ? undefined : this.handleOnRowAddClick },
-            addRowText,
-            React.createElement("span", { className: this.props.cssClasses.iconAdd }, this.cssClasses.iconAddId && React.createElement("svg", null,
-                React.createElement("use", { xlinkHref: this.cssClasses.iconAddId })))));
-        return (this.props.isEmptySection ? addButton : React.createElement("div", { className: this.props.cssClasses.footer }, addButton));
-    }
-}
 class SurveyQuestionMatrixDynamicPlaceholder extends ReactSurveyElement {
     constructor(props) {
         super(props);
@@ -4934,21 +4924,14 @@ class SurveyQuestionMatrixDynamicPlaceholder extends ReactSurveyElement {
     renderElement() {
         const cssClasses = this.props.cssClasses;
         const matrix = this.props.question;
-        const showAddButton = matrix.renderedTable.showAddRow;
         const text = this.renderLocString(matrix.locNoRowsText);
         const textDiv = React.createElement("div", { className: cssClasses.noRowsText }, text);
-        const btn = showAddButton ? this.renderAddRowButton(cssClasses, matrix) : undefined;
+        const toolbar = matrix.getShowToolbar() ? ReactElementFactory.Instance.createElement("sv-action-bar", { model: matrix.toolbar }) : null;
         return (React.createElement("div", { className: cssClasses.noRowsSection },
             textDiv,
-            btn));
-    }
-    renderAddRowButton(cssClasses, question) {
-        return ReactElementFactory.Instance.createElement("sv-matrixdynamic-add-btn", {
-            question: question, cssClasses: cssClasses, isEmptySection: true
-        });
+            toolbar));
     }
 }
-ReactElementFactory.Instance.registerElement("sv-matrixdynamic-add-btn", (props) => { return React.createElement(SurveyQuestionMatrixDynamicAddButton, props); });
 ReactElementFactory.Instance.registerElement("sv-placeholder-matrixdynamic", (props) => { return React.createElement(SurveyQuestionMatrixDynamicPlaceholder, props); });
 
 class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
@@ -4992,7 +4975,7 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
         const rangeTop = this.question.isRangeShowing && this.question.isProgressTopShowing
             ? this.renderRange()
             : null;
-        const navV2 = this.renderNavigatorV2();
+        const navigation = this.renderNavigator();
         const noEntriesPlaceholder = this.renderPlaceholder(cssClasses);
         return (React.createElement("div", { className: cssClasses.root },
             this.question.hasTabbedMenu ? React.createElement("div", { className: this.question.getTabsContainerCss() },
@@ -5000,18 +4983,13 @@ class SurveyQuestionPanelDynamic extends SurveyQuestionElementBase {
             noEntriesPlaceholder,
             rangeTop,
             React.createElement("div", { className: this.question.cssClasses.panelsContainer }, panels),
-            navV2));
+            navigation));
     }
     renderRange() {
         return (React.createElement("div", { className: this.question.cssClasses.progress },
             React.createElement("div", { className: this.question.cssClasses.progressBar, style: { width: this.question.progress }, role: "progressbar", "aria-label": this.question.progressBarAriaLabel })));
     }
-    renderAddRowButton() {
-        return ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
-            data: { question: this.question }
-        });
-    }
-    renderNavigatorV2() {
+    renderNavigator() {
         if (!this.question.showNavigation)
             return null;
         const range = this.question.isRangeShowing && this.question.isProgressBottomShowing ? this.renderRange() : null;
@@ -5055,9 +5033,7 @@ class SurveyQuestionPanelDynamicItem extends SurveyPanel {
     renderButton() {
         if (!this.question.canRenderRemovePanelOnRight(this.panel))
             return null;
-        return ReactElementFactory.Instance.createElement("sv-paneldynamic-remove-btn", {
-            data: { question: this.question, panel: this.panel }
-        });
+        return React.createElement(SurveyAction, { item: this.question.getRemovePanelAction(this.panel) });
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("paneldynamic", props => {
@@ -5072,12 +5048,7 @@ class SurveyQuestionPanelDynamicPlaceholder extends ReactSurveyElement {
         const question = this.props.question;
         return (React.createElement("div", { className: cssClasses.noEntriesPlaceholder },
             React.createElement("span", null, this.renderLocString(question.locNoEntriesText)),
-            this.renderAddRowButton(question)));
-    }
-    renderAddRowButton(question) {
-        return ReactElementFactory.Instance.createElement("sv-paneldynamic-add-btn", {
-            data: { question: question }
-        });
+            React.createElement(SurveyActionBar, { model: this.props.question.footerToolbar })));
     }
 }
 ReactElementFactory.Instance.registerElement("sv-placeholder-paneldynamic", (props) => { return React.createElement(SurveyQuestionPanelDynamicPlaceholder, props); });
@@ -6078,145 +6049,13 @@ ReactElementFactory.Instance.registerElement("sv-logo-image", (props) => {
     return React.createElement(LogoImage, props);
 });
 
-class SurveyQuestionMatrixDynamicRemoveButton extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-        this.handleOnRowRemoveClick = this.handleOnRowRemoveClick.bind(this);
-    }
-    get question() {
-        return this.props.item.data.question;
-    }
-    get row() {
-        return this.props.item.data.row;
-    }
-    handleOnRowRemoveClick(event) {
-        this.question.removeRowUI(this.row);
-    }
-    renderElement() {
-        var removeRowText = this.renderLocString(this.question.locRemoveRowText);
-        return (React.createElement("button", { className: this.question.getRemoveRowButtonCss(), type: "button", onClick: this.handleOnRowRemoveClick, disabled: this.question.isInputReadOnly },
-            removeRowText,
-            React.createElement("span", { className: this.question.cssClasses.iconRemove })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-matrix-remove-button", (props) => {
-    return React.createElement(SurveyQuestionMatrixDynamicRemoveButton, props);
-});
-
-class SurveyQuestionMatrixDetailButton extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-        this.handleOnShowHideClick = this.handleOnShowHideClick.bind(this);
-    }
-    getStateElement() {
-        return this.props.item;
-    }
-    get item() {
-        return this.props.item;
-    }
-    get question() {
-        return this.props.item.data.question;
-    }
-    get row() {
-        return this.props.item.data.row;
-    }
-    handleOnShowHideClick(event) {
-        this.row.showHideDetailPanelClick();
-    }
-    renderElement() {
-        var isExpanded = this.row.isDetailPanelShowing;
-        var ariaExpanded = isExpanded;
-        var ariaControls = isExpanded ? this.row.detailPanelId : undefined;
-        return (React.createElement("button", { type: "button", title: this.props.item.title, onClick: this.handleOnShowHideClick, className: this.question.getDetailPanelButtonCss(this.row), "aria-expanded": ariaExpanded, "aria-controls": ariaControls },
-            React.createElement(SvgIcon, { className: this.question.getDetailPanelIconCss(this.row), iconName: this.question.getDetailPanelIconId(this.row), size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-matrix-detail-button", props => {
-    return React.createElement(SurveyQuestionMatrixDetailButton, props);
-});
-
-class SurveyQuestionPanelDynamicAction extends ReactSurveyElement {
-    constructor(props) {
-        super(props);
-    }
+class SurveyQuestionPanelDynamicProgressText extends ReactSurveyElement {
     get data() {
         return (this.props.item && this.props.item.data) || this.props.data;
     }
     get question() {
         return (this.props.item && this.props.item.data.question) || this.props.data.question;
     }
-}
-class SurveyQuestionPanelDynamicAddButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.addPanelUI();
-        };
-    }
-    renderElement() {
-        if (!this.question.canAddPanel)
-            return null;
-        const btnText = this.renderLocString(this.question.locAddPanelText);
-        return (React.createElement("button", { type: "button", id: this.question.addButtonId, className: this.question.getAddButtonCss(), onClick: this.handleClick },
-            React.createElement("span", { className: this.question.cssClasses.buttonAddText }, btnText)));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-add-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicAddButton, props);
-});
-
-class SurveyQuestionPanelDynamicRemoveButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.removePanelUI(this.data.panel);
-        };
-    }
-    renderElement() {
-        const btnText = this.renderLocString(this.question.locRemovePanelText);
-        const id = this.question.getPanelRemoveButtonId(this.data.panel);
-        return (React.createElement("button", { id: id, className: this.question.getPanelRemoveButtonCss(), onClick: this.handleClick, type: "button" },
-            React.createElement("span", { className: this.question.cssClasses.buttonRemoveText }, btnText),
-            React.createElement("span", { className: this.question.cssClasses.iconRemove })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-remove-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicRemoveButton, props);
-});
-
-class SurveyQuestionPanelDynamicPrevButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.goToPrevPanel();
-        };
-    }
-    renderElement() {
-        return (React.createElement("div", { title: this.question.panelPrevText, onClick: this.handleClick, className: this.question.getPrevButtonCss() },
-            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-prev-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicPrevButton, props);
-});
-
-class SurveyQuestionPanelDynamicNextButton extends SurveyQuestionPanelDynamicAction {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (event) => {
-            this.question.goToNextPanel();
-        };
-    }
-    renderElement() {
-        return (React.createElement("div", { title: this.question.panelNextText, onClick: this.handleClick, className: this.question.getNextButtonCss() },
-            React.createElement(SvgIcon, { iconName: this.question.cssClasses.progressBtnIcon, size: "auto" })));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-paneldynamic-next-btn", (props) => {
-    return React.createElement(SurveyQuestionPanelDynamicNextButton, props);
-});
-
-class SurveyQuestionPanelDynamicProgressText extends SurveyQuestionPanelDynamicAction {
     renderElement() {
         return (React.createElement("div", { className: this.question.cssClasses.progressText }, this.question.progressText));
     }
@@ -6225,21 +6064,6 @@ ReactElementFactory.Instance.registerElement("sv-paneldynamic-progress-text", (p
     return React.createElement(SurveyQuestionPanelDynamicProgressText, props);
 });
 
-class SurveyNavigationButton extends ReactSurveyElement {
-    get item() {
-        return this.props.item;
-    }
-    canRender() {
-        return this.item.isVisible;
-    }
-    renderElement() {
-        return (React.createElement("input", { className: this.item.innerCss, type: "button", disabled: this.item.disabled, onMouseDown: this.item.data && this.item.data.mouseDown, onClick: this.item.action, title: this.item.getTooltip(), value: this.item.title }));
-    }
-}
-ReactElementFactory.Instance.registerElement("sv-nav-btn", (props) => {
-    return React.createElement(SurveyNavigationButton, props);
-});
-
 class QuestionErrorComponent extends React.Component {
     render() {
         const error = this.props.error;
@@ -6423,7 +6247,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.5.14"}`, "survey-react-ui");
+checkLibraryVersion(`${"3.0.0-beta.0"}`, "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, SurveyQuestionImageMap, 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 };
+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