survey-react 1.12.22 → 1.12.23

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.22
+ * surveyjs - Survey JavaScript library v1.12.23
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/modern.min.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.22
+ * surveyjs - Survey JavaScript library v1.12.23
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-react",
-  "version": "1.12.22",
+  "version": "1.12.23",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

package/survey.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.22
+ * surveyjs - Survey JavaScript library v1.12.23
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/survey.min.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.22
+ * surveyjs - Survey JavaScript library v1.12.23
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */

package/survey.react.d.ts

@@ -1723,6 +1723,8 @@ declare module "packages/survey-core/src/defaultCss/defaultV2Css" {
             progressBtnIcon: string;
             noEntriesPlaceholder: string;
             compact: string;
+            tabsContainer: string;
+            tabsContainerWithHeader: string;
             tabsRoot: string;
             tabsLeft: string;
             tabsRight: string;
@@ -2719,9 +2721,11 @@ declare module "packages/survey-core/src/textPreProcessor" {
         private get hasAllValuesOnLastRunValue();
         private set hasAllValuesOnLastRunValue(value);
         onProcess: (textValue: TextPreProcessorValue) => void;
-        process(text: string, returnDisplayValue?: boolean, doEncoding?: boolean): string;
+        process(text: string, returnDisplayValue?: boolean, doEncoding?: boolean, replaceUndefinedValues?: boolean): string;
         processValue(name: string, returnDisplayValue: boolean): TextPreProcessorValue;
         get hasAllValuesOnLastRun(): boolean;
+        processText(text: string, returnDisplayValue: boolean): string;
+        processTextEx(params: ITextProcessorProp): ITextProcessorResult;
         private getItems;
         private isValidItemName;
         private getName;
@@ -2741,7 +2745,7 @@ declare module "packages/survey-core/src/textPreProcessor" {
         private getProcessedTextValue;
         processText(text: string, returnDisplayValue: boolean): string;
         processTextEx(params: ITextProcessorProp): ITextProcessorResult;
-        private processTextCore;
+        private addTextPreProcessor;
     }
 }
 declare module "packages/survey-core/src/error" {
@@ -6600,7 +6604,7 @@ declare module "packages/survey-core/src/question_paneldynamic" {
     import { PanelModel } from "packages/survey-core/src/panel";
     import { SurveyError } from "packages/survey-core/src/survey-error";
     import { ActionContainer } from "packages/survey-core/src/actions/container";
-    import { IAction } from "packages/survey-core/src/actions/action";
+    import { Action, IAction } from "packages/survey-core/src/actions/action";
     import { AdaptiveActionContainer } from "packages/survey-core/src/actions/adaptive-container";
     import { ITheme } from "packages/survey-core/src/themes";
     import { AnimationProperty, IAnimationGroupConsumer } from "packages/survey-core/src/utils/animation";
@@ -6613,6 +6617,13 @@ declare module "packages/survey-core/src/question_paneldynamic" {
         getSurvey(): ISurvey;
         getRootData(): ISurveyData;
     }
+    interface IPanelDynamicTabbedMenuItem extends IAction {
+        panelId: string;
+    }
+    class PanelDynamicTabbedMenuItem extends Action {
+        panelId: string;
+        constructor(innerItem: IPanelDynamicTabbedMenuItem);
+    }
     export class QuestionPanelDynamicItem implements ISurveyData, ISurveyImpl {
         static ItemVariableName: string;
         static ParentItemVariableName: string;
@@ -7068,7 +7079,6 @@ declare module "packages/survey-core/src/question_paneldynamic" {
         set tabAlign(val: "center" | "left" | "right");
         get isRenderModeList(): boolean;
         get isRenderModeTab(): boolean;
-        get hasTitleOnLeftTop(): boolean;
         setVisibleIndex(value: number): number;
         private setPanelVisibleIndex;
         /**
@@ -7242,6 +7252,7 @@ declare module "packages/survey-core/src/question_paneldynamic" {
         get progress(): string;
         getRootCss(): string;
         get cssHeader(): string;
+        getTabsContainerCss(): string;
         getPanelWrapperCss(panel: PanelModel): string;
         getPanelRemoveButtonCss(): string;
         getAddButtonCss(): string;
@@ -7255,9 +7266,9 @@ declare module "packages/survey-core/src/question_paneldynamic" {
         get locNoEntriesText(): LocalizableString;
         getShowNoEntriesPlaceholder(): boolean;
         needResponsiveWidth(): boolean;
-        private additionalTitleToolbarValue;
-        get hasAdditionalTitleToolbar(): boolean;
-        protected getAdditionalTitleToolbar(): AdaptiveActionContainer | null;
+        private tabbedMenuValue;
+        get hasTabbedMenu(): boolean;
+        get tabbedMenu(): AdaptiveActionContainer<PanelDynamicTabbedMenuItem> | null;
         private footerToolbarValue;
         get footerToolbar(): ActionContainer;
         legacyNavigation: boolean;
@@ -7265,7 +7276,7 @@ declare module "packages/survey-core/src/question_paneldynamic" {
         private updateFooterActions;
         private initFooterToolbar;
         private createTabByPanel;
-        private getAdditionalTitleToolbarCss;
+        private getTabbedMenuCss;
         private updateTabToolbarItemsPressedState;
         private updateTabToolbar;
         private addTabFromToolbar;
@@ -15111,6 +15122,7 @@ declare module "packages/survey-core/src/base-interfaces" {
         returnDisplayValue?: boolean;
         doEncoding?: boolean;
         runAtDesign?: boolean;
+        replaceUndefinedValues?: boolean;
     }
     export interface ITextProcessorResult {
         text: string;
@@ -15855,7 +15867,7 @@ declare module "packages/survey-core/src/localizablestring" {
         set localizationName(val: string);
         private _allowLineBreaks;
         get allowLineBreaks(): boolean;
-        onGetTextCallback: (str: string) => string;
+        onGetTextCallback: (str: string, nonProcessedText?: string) => string;
         storeDefaultText: boolean;
         serializeCallBackText: boolean;
         onGetLocalizationTextCallback: (str: string) => string;

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.12.22
+ * surveyjs - Survey JavaScript library v1.12.23
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -4466,12 +4466,14 @@ var JsonMetadata = /** @class */ (function () {
             return;
         var schemaProperties = classSchema.properties;
         var requiredProps = [];
-        if (classInfo.name === "question" || classInfo.name === "panel") {
+        if (classInfo.name === "question") {
             schemaProperties.type = { type: "string" };
             requiredProps.push("type");
         }
         for (var i = 0; i < classInfo.properties.length; i++) {
             var prop = classInfo.properties[i];
+            if (prop.isSerializable === false)
+                continue;
             if (!!classInfo.parentName && !!Serializer.findProperty(classInfo.parentName, prop.name))
                 continue;
             schemaProperties[prop.name] = this.generateSchemaProperty(prop, schemaDef, isRoot);
@@ -15434,15 +15436,13 @@ var localizablestring_LocalizableString = /** @class */ (function () {
         configurable: true
     });
     LocalizableString.prototype.calcText = function () {
-        var res = this.pureText;
-        if (res &&
-            this.owner &&
-            this.owner.getProcessedText &&
-            res.indexOf("{") > -1) {
+        var pureText = this.pureText;
+        var res = pureText;
+        if (res && this.owner && this.owner.getProcessedText && res.indexOf("{") > -1) {
             res = this.owner.getProcessedText(res);
         }
         if (this.onGetTextCallback)
-            res = this.onGetTextCallback(res);
+            res = this.onGetTextCallback(res, pureText);
         return res;
     };
     Object.defineProperty(LocalizableString.prototype, "pureText", {
@@ -19063,8 +19063,8 @@ var question_Question = /** @class */ (function (_super) {
         var _this = this;
         var locTitleValue = _super.prototype.createLocTitleProperty.call(this);
         locTitleValue.storeDefaultText = true;
-        locTitleValue.onGetTextCallback = function (text) {
-            if (!text) {
+        locTitleValue.onGetTextCallback = function (text, nonProcessedText) {
+            if (!text && !nonProcessedText) {
                 text = _this.getDefaultTitle();
             }
             if (!_this.survey)
@@ -21435,8 +21435,10 @@ var question_Question = /** @class */ (function (_super) {
         }
         if (!values)
             values = this.defaultValueExpression ? this.data.getFilteredValues() : {};
-        if (!properties)
+        if (!properties) {
             properties = this.defaultValueExpression ? this.data.getFilteredProperties() : {};
+            properties["question"] = this;
+        }
         if (!!runner && runner.canRun) {
             runner.onRunComplete = function (res) {
                 if (res == undefined)
@@ -24529,9 +24531,7 @@ var textPreProcessor_TextPreProcessor = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    TextPreProcessor.prototype.process = function (text, returnDisplayValue, doEncoding) {
-        if (returnDisplayValue === void 0) { returnDisplayValue = false; }
-        if (doEncoding === void 0) { doEncoding = false; }
+    TextPreProcessor.prototype.process = function (text, returnDisplayValue, doEncoding, replaceUndefinedValues) {
         this.hasAllValuesOnLastRunValue = true;
         if (!text)
             return text;
@@ -24540,28 +24540,28 @@ var textPreProcessor_TextPreProcessor = /** @class */ (function () {
         var items = this.getItems(text);
         for (var i = items.length - 1; i >= 0; i--) {
             var item = items[i];
-            var name = this.getName(text.substring(item.start + 1, item.end));
-            if (!name)
-                continue;
-            var textValue = new TextPreProcessorValue(name, returnDisplayValue);
-            this.onProcess(textValue);
-            if (!textValue.isExists) {
-                if (textValue.canProcess) {
-                    this.hasAllValuesOnLastRunValue = false;
+            var name_1 = this.getName(text.substring(item.start + 1, item.end));
+            if (!!name_1) {
+                var textValue = new TextPreProcessorValue(name_1, returnDisplayValue === true);
+                this.onProcess(textValue);
+                if (!textValue.isExists) {
+                    if (textValue.canProcess) {
+                        this.hasAllValuesOnLastRunValue = false;
+                    }
+                }
+                if (textValue.isExists || replaceUndefinedValues) {
+                    if (helpers_Helpers.isValueEmpty(textValue.value)) {
+                        this.hasAllValuesOnLastRunValue = false;
+                    }
+                    var replacedValue = !helpers_Helpers.isValueEmpty(textValue.value)
+                        ? textValue.value
+                        : "";
+                    if (doEncoding) {
+                        replacedValue = encodeURIComponent(replacedValue);
+                    }
+                    text = text.substring(0, item.start) + replacedValue + text.substring(item.end + 1);
                 }
-                continue;
-            }
-            if (helpers_Helpers.isValueEmpty(textValue.value)) {
-                this.hasAllValuesOnLastRunValue = false;
-            }
-            var replacedValue = !helpers_Helpers.isValueEmpty(textValue.value)
-                ? textValue.value
-                : "";
-            if (doEncoding) {
-                replacedValue = encodeURIComponent(replacedValue);
             }
-            text =
-                text.substring(0, item.start) + replacedValue + text.substring(item.end + 1);
         }
         return text;
     };
@@ -24573,12 +24573,19 @@ var textPreProcessor_TextPreProcessor = /** @class */ (function () {
         return textValue;
     };
     Object.defineProperty(TextPreProcessor.prototype, "hasAllValuesOnLastRun", {
-        get: function () {
-            return !!this.hasAllValuesOnLastRunValue;
-        },
+        get: function () { return !!this.hasAllValuesOnLastRunValue; },
         enumerable: false,
         configurable: true
     });
+    TextPreProcessor.prototype.processText = function (text, returnDisplayValue) {
+        return this.process(text, returnDisplayValue);
+    };
+    TextPreProcessor.prototype.processTextEx = function (params) {
+        var res = { hasAllValuesOnLastRun: true, text: params.text };
+        res.text = this.process(params.text, params.returnDisplayValue, params.doEncoding, params.replaceUndefinedValues);
+        res.hasAllValuesOnLastRun = this.hasAllValuesOnLastRun;
+        return res;
+    };
     TextPreProcessor.prototype.getItems = function (text) {
         var items = [];
         var length = text.length;
@@ -24684,27 +24691,31 @@ var textPreProcessor_QuestionTextProcessor = /** @class */ (function () {
         textValue.value = new conditionProcessValue_ProcessValue().getValue(textValue.name, values);
     };
     QuestionTextProcessor.prototype.processText = function (text, returnDisplayValue) {
-        if (this.survey && this.survey.isDesignMode)
-            return text;
-        text = this.textPreProcessor.process(text, returnDisplayValue);
-        text = this.processTextCore(this.getParentTextProcessor(), text, returnDisplayValue);
-        return this.processTextCore(this.survey, text, returnDisplayValue);
+        var params = { text: text, returnDisplayValue: returnDisplayValue };
+        return this.processTextEx(params).text;
     };
     QuestionTextProcessor.prototype.processTextEx = function (params) {
-        params.text = this.processText(params.text, params.returnDisplayValue);
-        var hasAllValuesOnLastRun = this.textPreProcessor.hasAllValuesOnLastRun;
+        var _a;
         var res = { hasAllValuesOnLastRun: true, text: params.text };
-        if (this.survey) {
-            res = this.survey.processTextEx(params);
+        if (!params.runAtDesign && ((_a = this.survey) === null || _a === void 0 ? void 0 : _a.isDesignMode))
+            return res;
+        var processors = new Array();
+        this.addTextPreProcessor(processors, this.textPreProcessor);
+        this.addTextPreProcessor(processors, this.getParentTextProcessor());
+        this.addTextPreProcessor(processors, this.survey);
+        for (var i = 0; i < processors.length; i++) {
+            var processor = processors[i];
+            params.text = res.text;
+            var processorRes = processor.processTextEx(params);
+            res.text = processorRes.text;
+            res.hasAllValuesOnLastRun = res.hasAllValuesOnLastRun && processorRes.hasAllValuesOnLastRun;
         }
-        res.hasAllValuesOnLastRun =
-            res.hasAllValuesOnLastRun && hasAllValuesOnLastRun;
         return res;
     };
-    QuestionTextProcessor.prototype.processTextCore = function (textProcessor, text, returnDisplayValue) {
-        if (!textProcessor)
-            return text;
-        return textProcessor.processText(text, returnDisplayValue);
+    QuestionTextProcessor.prototype.addTextPreProcessor = function (list, textProcessor) {
+        if (!textProcessor || list.indexOf(textProcessor) > -1)
+            return;
+        list.push(textProcessor);
     };
     return QuestionTextProcessor;
 }());
@@ -25638,9 +25649,10 @@ var question_custom_QuestionCompositeModel = /** @class */ (function (_super) {
         }
         this.initElement(res);
         res.readOnly = this.isReadOnly;
-        res.questions.forEach(function (q) { return q.onUpdateCssClassesCallback = function (css) {
-            _this.onUpdateQuestionCssClasses(q, css);
-        }; });
+        res.questions.forEach(function (q) {
+            q.setParentQuestion(_this);
+            q.onUpdateCssClassesCallback = function (css) { _this.onUpdateQuestionCssClasses(q, css); };
+        });
         this.setAfterRenderCallbacks(res);
         return res;
     };
@@ -28609,11 +28621,10 @@ var question_matrixdropdownrendered_QuestionMatrixDropdownRenderedTable = /** @c
             if (this.matrix.isMobile) {
                 actions.unshift(new action_Action({
                     id: "show-detail-mobile",
-                    title: "Show Details",
+                    title: new ComputedUpdater(function () { return row.isDetailPanelShowing ? _this.matrix.getLocalizationString("hideDetails") : _this.matrix.getLocalizationString("showDetails"); }),
                     showTitle: true,
                     location: "end",
                     action: function (context) {
-                        context.title = row.isDetailPanelShowing ? _this.matrix.getLocalizationString("showDetails") : _this.matrix.getLocalizationString("hideDetails");
                         row.showHideDetailPanelClick();
                     },
                 }));
@@ -34291,6 +34302,8 @@ var defaultV2Css = {
         progressBtnIcon: "icon-progressbuttonv2",
         noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
         compact: "sd-element--with-frame sd-element--compact",
+        tabsContainer: "sd-paneldynamic__tabs-container",
+        tabsContainerWithHeader: "sd-paneldynamic__tabs-container--with-header",
         tabsRoot: "sd-tabs-toolbar",
         tabsLeft: "sd-tabs-toolbar--left",
         tabsRight: "sd-tabs-toolbar--right",
@@ -48065,7 +48078,7 @@ var survey_SurveyModel = /** @class */ (function (_super) {
         var doEncoding = params.doEncoding === undefined ? settings.web.encodeUrlParams : params.doEncoding;
         var text = params.text;
         if (params.runAtDesign || !this.isDesignMode) {
-            text = this.textPreProcessor.process(text, params.returnDisplayValue === true, doEncoding);
+            text = this.textPreProcessor.process(text, params.returnDisplayValue === true, doEncoding, params.replaceUndefinedValues);
         }
         var res = { text: text, hasAllValuesOnLastRun: true };
         res.hasAllValuesOnLastRun = this.textPreProcessor.hasAllValuesOnLastRun;
@@ -66874,6 +66887,13 @@ var QuestionPanelDynamicItemTextProcessor = /** @class */ (function (_super) {
     };
     return QuestionPanelDynamicItemTextProcessor;
 }(textPreProcessor_QuestionTextProcessor));
+var PanelDynamicTabbedMenuItem = /** @class */ (function (_super) {
+    question_paneldynamic_extends(PanelDynamicTabbedMenuItem, _super);
+    function PanelDynamicTabbedMenuItem(innerItem) {
+        return _super.call(this, innerItem) || this;
+    }
+    return PanelDynamicTabbedMenuItem;
+}(action_Action));
 var question_paneldynamic_QuestionPanelDynamicItem = /** @class */ (function () {
     function QuestionPanelDynamicItem(data, panel) {
         this.data = data;
@@ -68257,7 +68277,7 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         set: function (val) {
             this.setPropertyValue("tabAlign", val);
             if (this.isRenderModeTab) {
-                this.additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss();
+                this.tabbedMenu.containerCss = this.getTabbedMenuCss();
             }
         },
         enumerable: false,
@@ -68277,18 +68297,6 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasTitleOnLeftTop", {
-        get: function () {
-            if (this.isRenderModeTab && this.visiblePanelCount > 0)
-                return true;
-            if (!this.hasTitle)
-                return false;
-            var location = this.getTitleLocation();
-            return location === "left" || location === "top";
-        },
-        enumerable: false,
-        configurable: true
-    });
     QuestionPanelDynamicModel.prototype.setVisibleIndex = function (value) {
         if (!this.isVisible)
             return 0;
@@ -68675,8 +68683,8 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         for (var i = 0; i < panels.length; i++) {
             panels[i].locStrsChanged();
         }
-        if (this.additionalTitleToolbar) {
-            this.additionalTitleToolbar.locStrsChanged();
+        if (this.tabbedMenu) {
+            this.tabbedMenu.locStrsChanged();
         }
     };
     QuestionPanelDynamicModel.prototype.clearIncorrectValues = function () {
@@ -69412,14 +69420,16 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         get: function () {
             var showTab = this.isRenderModeTab && !!this.visiblePanelCount;
             return new CssClassBuilder()
-                .append(this.cssClasses.header)
-                .append(this.cssClasses.headerTop, this.hasTitleOnTop || showTab)
-                .append(this.cssClasses.headerTab, showTab)
+                .append(_super.prototype.getCssHeader.call(this, this.cssClasses))
+                .append(this.cssClasses.headerTab, this.hasTitleOnTop && showTab)
                 .toString();
         },
         enumerable: false,
         configurable: true
     });
+    QuestionPanelDynamicModel.prototype.getTabsContainerCss = function () {
+        return new CssClassBuilder().append(this.cssClasses.tabsContainer).append(this.cssClasses.tabsContainerWithHeader, this.hasTitleOnTop).toString();
+    };
     QuestionPanelDynamicModel.prototype.getPanelWrapperCss = function (panel) {
         return new CssClassBuilder()
             .append(this.cssClasses.panelWrapper, !panel || panel.visible)
@@ -69482,25 +69492,29 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             return true;
         return false;
     };
-    Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasAdditionalTitleToolbar", {
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "hasTabbedMenu", {
         get: function () {
             return this.isRenderModeTab && this.visiblePanels.length > 0;
         },
         enumerable: false,
         configurable: true
     });
-    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbar = function () {
-        if (!this.isRenderModeTab)
-            return null;
-        if (!this.additionalTitleToolbarValue) {
-            this.additionalTitleToolbarValue = new adaptive_container_AdaptiveActionContainer();
-            this.additionalTitleToolbarValue.dotsItem.popupModel.showPointer = false;
-            this.additionalTitleToolbarValue.dotsItem.popupModel.verticalPosition = "bottom";
-            this.additionalTitleToolbarValue.dotsItem.popupModel.horizontalPosition = "center";
-            this.updateElementCss(false);
-        }
-        return this.additionalTitleToolbarValue;
-    };
+    Object.defineProperty(QuestionPanelDynamicModel.prototype, "tabbedMenu", {
+        get: function () {
+            if (!this.isRenderModeTab)
+                return null;
+            if (!this.tabbedMenuValue) {
+                this.tabbedMenuValue = new adaptive_container_AdaptiveActionContainer();
+                this.tabbedMenuValue.dotsItem.popupModel.showPointer = false;
+                this.tabbedMenuValue.dotsItem.popupModel.verticalPosition = "bottom";
+                this.tabbedMenuValue.dotsItem.popupModel.horizontalPosition = "center";
+                this.updateElementCss(false);
+            }
+            return this.tabbedMenuValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "footerToolbar", {
         get: function () {
             if (!this.footerToolbarValue) {
@@ -69595,19 +69609,21 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
             return options.title;
         };
         locTitle.sharedData = this.locTemplateTabTitle;
-        var isActive = this.getPanelVisibleIndexById(panel.id) === this.currentIndex;
-        var newItem = new action_Action({
-            id: panel.id,
+        var panelId = panel.id;
+        var isActive = this.getPanelVisibleIndexById(panelId) === this.currentIndex;
+        var newItem = new PanelDynamicTabbedMenuItem({
+            id: this.id + "_tab_" + panelId,
+            panelId: panelId,
             pressed: isActive,
             locTitle: locTitle,
             disableHide: isActive,
             action: function () {
-                _this.currentIndex = _this.getPanelVisibleIndexById(newItem.id);
+                _this.currentIndex = _this.getPanelVisibleIndexById(panelId);
             }
         });
         return newItem;
     };
-    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbarCss = function (cssClasses) {
+    QuestionPanelDynamicModel.prototype.getTabbedMenuCss = function (cssClasses) {
         var css = cssClasses !== null && cssClasses !== void 0 ? cssClasses : this.cssClasses;
         return new CssClassBuilder()
             .append(css.tabsRoot)
@@ -69622,8 +69638,8 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         if (this.currentIndex < 0 || this.currentIndex >= this.visiblePanelCount)
             return;
         var panel = this.visiblePanelsCore[this.currentIndex];
-        this.additionalTitleToolbar.renderedActions.forEach(function (action) {
-            var isActive = action.id === panel.id;
+        this.tabbedMenu.renderedActions.forEach(function (action) {
+            var isActive = action.panelId === panel.id;
             action.pressed = isActive;
             action.disableHide = isActive;
             //should raise update if dimensions are not changed but action is active now
@@ -69645,22 +69661,22 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
         for (var i = 0; i < visPanels.length; i++) {
             _loop_1(i);
         }
-        this.additionalTitleToolbar.setItems(items);
+        this.tabbedMenu.setItems(items);
     };
     QuestionPanelDynamicModel.prototype.addTabFromToolbar = function (panel, index) {
         if (!this.isRenderModeTab)
             return;
         var newItem = this.createTabByPanel(panel, index);
-        this.additionalTitleToolbar.actions.splice(index, 0, newItem);
+        this.tabbedMenu.actions.splice(index, 0, newItem);
         this.updateTabToolbarItemsPressedState();
     };
     QuestionPanelDynamicModel.prototype.removeTabFromToolbar = function (panel) {
         if (!this.isRenderModeTab)
             return;
-        var removedItem = this.additionalTitleToolbar.getActionById(panel.id);
+        var removedItem = this.tabbedMenu.actions.find(function (a) { return a.panelId == panel.id; });
         if (!removedItem)
             return;
-        this.additionalTitleToolbar.actions.splice(this.additionalTitleToolbar.actions.indexOf(removedItem), 1);
+        this.tabbedMenu.actions.splice(this.tabbedMenu.actions.indexOf(removedItem), 1);
         this.updateTabToolbarItemsPressedState();
     };
     Object.defineProperty(QuestionPanelDynamicModel.prototype, "showLegacyNavigation", {
@@ -69684,12 +69700,12 @@ var question_paneldynamic_QuestionPanelDynamicModel = /** @class */ (function (_
     };
     QuestionPanelDynamicModel.prototype.calcCssClasses = function (css) {
         var classes = _super.prototype.calcCssClasses.call(this, css);
-        var additionalTitleToolbar = this.additionalTitleToolbar;
-        if (!!additionalTitleToolbar) {
-            additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss(classes);
-            additionalTitleToolbar.cssClasses = classes.tabs;
-            additionalTitleToolbar.dotsItem.cssClasses = classes.tabs;
-            additionalTitleToolbar.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list;
+        var tabbedMenu = this.tabbedMenu;
+        if (!!tabbedMenu) {
+            tabbedMenu.containerCss = this.getTabbedMenuCss(classes);
+            tabbedMenu.cssClasses = classes.tabs;
+            tabbedMenu.dotsItem.cssClasses = classes.tabs;
+            tabbedMenu.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list;
         }
         return classes;
     };
@@ -72717,9 +72733,9 @@ Serializer.addClass("currencymask", [
 
 var Version;
 var ReleaseDate;
-Version = "" + "1.12.22";
+Version = "" + "1.12.23";
 settings.version = Version;
-ReleaseDate = "" + "2025-02-05";
+ReleaseDate = "" + "2025-02-11";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -89759,6 +89775,8 @@ var reactquestion_paneldynamic_SurveyQuestionPanelDynamic = /** @class */ (funct
         var navV2 = this.renderNavigatorV2();
         var noEntriesPlaceholder = this.renderPlaceholder();
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.cssClasses.root },
+            this.question.hasTabbedMenu ? external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.getTabsContainerCss() },
+                external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"](action_bar_SurveyActionBar, { model: this.question.tabbedMenu })) : null,
             noEntriesPlaceholder,
             navTop,
             external_root_React_commonjs2_react_commonjs_react_amd_react_["createElement"]("div", { className: this.question.cssClasses.panelsContainer }, panels),