pds-dev-kit-web-test 2.5.63 → 2.5.65

package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts

@@ -8,15 +8,21 @@ export type PayloadCBType = {
     type: ComponentBlock['type'];
     blockId: string;
     cbId: number;
+    workDir: string;
 };
 export type PayloadGBType = {
     type: GroupBlock['type'];
     blockId: string;
+    childrenBlockIds: string[];
+    childrenCBIds: number[];
+    workDir: string;
 };
 export type PayloadBulkType = {
     type: 'BULK';
     blockId: 'BULK';
     childrenBlockIds: string[];
+    childrenCBIds: number[];
+    workDir: string;
 };
 export type BlockPayloadType = PayloadCBType | PayloadGBType | PayloadBulkType;
 type ActionHandlerPayload = {

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -82,21 +82,26 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         setPedigreeState((_a = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree) !== null && _a !== void 0 ? _a : []);
         setBlockIdMap((0, group_1.mapComponentBlockIdsToBlockIds)((_b = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree) !== null && _b !== void 0 ? _b : []));
     }, [jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree]);
-    var _g = jsonProperties.data, CB_PLACEMENT_PROP_SECTION = _g.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _g.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _g.CB_CONTENT_PROP_SECTION;
-    var _h = (0, react_1.useState)(null), selectedBlockId = _h[0], setSelectedBlockId = _h[1];
+    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_SECTION = _h.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _h.CB_CONTENT_PROP_SECTION, zOrders = _g.zOrders;
+    var _j = (0, react_1.useState)(null), selectedBlockId = _j[0], setSelectedBlockId = _j[1];
     var gleRef = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)(50), rowHeight = _j[0], setRowHeight = _j[1];
-    var _k = (0, react_1.useState)(16), baseFontSize = _k[0], setBaseFontSize = _k[1];
+    var _k = (0, react_1.useState)(50), rowHeight = _k[0], setRowHeight = _k[1];
+    var _l = (0, react_1.useState)(16), baseFontSize = _l[0], setBaseFontSize = _l[1];
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
     var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    var _l = (0, react_1.useState)(function () {
-        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
+    var _m = (0, react_1.useState)(function () {
+        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders), lg = _a.lg, sm = _a.sm;
         return {
             lg: lg,
             sm: sm
         };
-    }), layouts = _l[0], setLayouts = _l[1];
+    }), layouts = _m[0], setLayouts = _m[1];
+    var _o = (0, react_1.useState)('ROOT'), editingGroupBlock = _o[0], setEditingGroupBlock = _o[1];
+    var _p = (0, react_1.useState)([]), bulkBlockIds = _p[0], setBulkBlockIds = _p[1];
+    var newblock = bulkBlockIds.length > 0
+        ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds)
+        : pedigreeState;
     (0, react_1.useImperativeHandle)(ref, function () {
         return {
             selectCB: function (cbId) {
@@ -113,7 +118,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         };
     }, [componentBlocks]);
     (0, react_1.useLayoutEffect)(function () {
-        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []);
+        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
         setLayouts(function (prev) {
             var _a;
             var _b;
@@ -156,7 +161,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             return;
         }
         if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            // breakGroupCB();
             setBulkBlockIds([]);
             setSelectedBlockId(null);
             return;
@@ -193,10 +197,10 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         var allRootChildIds = (0, group_1.findAllChildrenIds)(pedigreeState, editingGroupBlock, 'current');
         setBulkBlockIds(allRootChildIds);
     };
-    var _m = (0, util_1.parseCustomSectionPlacement)({
+    var _q = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), rows = _m.rows, width = _m.width, minHeight = _m.minHeight, isFullWidth = _m.isFullWidth;
+    }), rows = _q.rows, width = _q.width, minHeight = _q.minHeight, isFullWidth = _q.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -204,6 +208,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     };
     var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
     var onClickCB = function (id) {
+        var _a, _b;
         var blockId = blockIdMap.CB_ID[id];
         if (!isEditMode) {
             return;
@@ -221,7 +226,10 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                 return Array.from(set);
             });
             setSelectedBlockId(null);
-            var newBulkIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), blockIds_1, true)));
+            var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), blockIds_1, true)));
+            var newBulkCBIds = newBulkBlockIds
+                .map(function (id) { return blockIdMap.BLOCK_ID[id]; })
+                .filter(function (each) { return each !== undefined; });
             sectionActionHandler &&
                 sectionActionHandler({
                     type: '@CUSTOMSECTION/BLOCK_CLICKED',
@@ -229,7 +237,9 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                         block: {
                             type: 'BULK',
                             blockId: 'BULK',
-                            childrenBlockIds: newBulkIds
+                            childrenBlockIds: newBulkBlockIds,
+                            childrenCBIds: newBulkCBIds,
+                            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, blockId)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
                         }
                     }
                 });
@@ -265,7 +275,8 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                     block: {
                         blockId: blockId,
                         type: 'COMPONENT_BLOCK',
-                        cbId: id
+                        cbId: id,
+                        workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, blockId)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
                     }
                 }
             });
@@ -311,7 +322,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             });
     };
     var onDragStop = function (props) {
-        var _a;
+        var _a, _b;
         if (!isEditMode || !props.item) {
             return;
         }
@@ -353,7 +364,8 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                         block: {
                             blockId: blockId,
                             cbId: numberId,
-                            type: 'COMPONENT_BLOCK'
+                            type: 'COMPONENT_BLOCK',
+                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, blockId)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
                         }
                     }
                 });
@@ -423,7 +435,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             });
     };
     var onContextGroup = function (e, blockId, isEditingGroup) {
-        console.log(e, blockId, isEditingGroup);
         setSelectedBlockId(blockId);
         sectionActionHandler &&
             sectionActionHandler({
@@ -471,6 +482,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
     var innerRef = (0, react_1.useRef)(null);
     var clickOneCBInBulk = function (id) {
+        var _a;
         var blockId = blockIdMap.CB_ID[id];
         if (shortcutKeyMode === 'COLLISION_SELECT') {
             // makeCollisionOfBulk();
@@ -492,7 +504,8 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                             block: {
                                 blockId: oneLastBlockId,
                                 cbId: cbId,
-                                type: 'COMPONENT_BLOCK'
+                                type: 'COMPONENT_BLOCK',
+                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, blockId)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
                             }
                         }
                     });
@@ -519,11 +532,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return false;
     })();
-    var _o = (0, react_1.useState)('ROOT'), editingGroupBlock = _o[0], setEditingGroupBlock = _o[1];
-    var _p = (0, react_1.useState)([]), bulkBlockIds = _p[0], setBulkBlockIds = _p[1];
-    var newblock = bulkBlockIds.length > 0
-        ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds)
-        : pedigreeState;
     var onDoubleClickGroup = function (e, id, type) {
         e.stopPropagation();
         if (id === 'BULK') {
@@ -535,6 +543,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         setEditingGroupBlock('ROOT');
     };
     var onClickGroup = function (e, id, type) {
+        var _a, _b, _c, _d;
         e.stopPropagation();
         if (id === 'BULK') {
             return;
@@ -551,14 +560,18 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                             block: {
                                 blockId: oneLastBlockId,
                                 type: 'COMPONENT_BLOCK',
-                                cbId: blockIdMap.BLOCK_ID[oneLastBlockId]
+                                cbId: blockIdMap.BLOCK_ID[oneLastBlockId],
+                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, oneLastBlockId)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
                             }
                         }
                     });
                 return;
             }
-            var newBulkBlockIds = bulkBlockIds.filter(function (each) { return each !== id; });
-            setBulkBlockIds(newBulkBlockIds);
+            var newBulkBlockIds_1 = bulkBlockIds.filter(function (each) { return each !== id; });
+            var newBulkCBIds_1 = newBulkBlockIds_1
+                .map(function (id) { return blockIdMap.BLOCK_ID[id]; })
+                .filter(function (each) { return each !== undefined; });
+            setBulkBlockIds(newBulkBlockIds_1);
             sectionActionHandler &&
                 sectionActionHandler({
                     type: '@CUSTOMSECTION/BLOCK_CLICKED',
@@ -566,7 +579,9 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                         block: {
                             blockId: 'BULK',
                             type: 'BULK',
-                            childrenBlockIds: newBulkBlockIds
+                            childrenBlockIds: newBulkBlockIds_1,
+                            childrenCBIds: newBulkCBIds_1,
+                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, 'BULK')) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
                         }
                     }
                 });
@@ -574,8 +589,11 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         if (shortcutKeyMode === 'BULK_SELECT') {
             var added = selectedBlockId ? [selectedBlockId.toString(), id] : [id];
-            var newBulkBlocks = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-            setBulkBlockIds(newBulkBlocks);
+            var newBulkBlockIds_2 = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
+            var newBulkCBIds_2 = newBulkBlockIds_2
+                .map(function (id) { return blockIdMap.BLOCK_ID[id]; })
+                .filter(function (each) { return each !== undefined; });
+            setBulkBlockIds(newBulkBlockIds_2);
             setSelectedBlockId(null);
             sectionActionHandler &&
                 sectionActionHandler({
@@ -584,7 +602,9 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                         block: {
                             blockId: 'BULK',
                             type: 'BULK',
-                            childrenBlockIds: newBulkBlocks
+                            childrenBlockIds: newBulkBlockIds_2,
+                            childrenCBIds: newBulkCBIds_2,
+                            workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, 'BULK')) !== null && _c !== void 0 ? _c : 'NOT-FOUND'
                         }
                     }
                 });
@@ -592,13 +612,20 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         setBulkBlockIds([]);
         setSelectedBlockId(id);
+        var newBulkBlockIds = (0, group_1.findAllChildrenIds)(newblock, id, 'current');
+        var newBulkCBIds = newBulkBlockIds
+            .map(function (id) { return blockIdMap.BLOCK_ID[id]; })
+            .filter(function (each) { return each !== undefined; });
         sectionActionHandler &&
             sectionActionHandler({
                 type: '@CUSTOMSECTION/BLOCK_CLICKED',
                 payload: {
                     block: {
                         blockId: id,
-                        type: 'GROUP_BLOCK'
+                        type: 'GROUP_BLOCK',
+                        workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, id)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
+                        childrenBlockIds: newBulkBlockIds,
+                        childrenCBIds: newBulkCBIds
                     }
                 }
             });

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridCustomSection.js

@@ -62,10 +62,10 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     var _a;
     var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _c = jsonProperties.data, CB_PLACEMENT_PROP_SECTION = _c.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _c.CB_LAYOUT_PROP_PADDING;
+    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _d = (0, react_1.useState)(null), selectedCB = _d[0], setSelectedCB = _d[1];
+    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
     var gleRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
@@ -124,10 +124,10 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _e = (0, util_1.parseCustomSectionPlacement)({
+    var _f = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _e.width, minHeight = _e.minHeight, isFullWidth = _e.isFullWidth;
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -195,7 +195,10 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                             maxWidth: customSectionStyles.maxWidth,
                             minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                             fontSize: "".concat(baseFontSize, "px")
-                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) { return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight }) }, cb.id)); }) })) })) })) }) }));
+                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                        }) })) })) })) }) }));
 });
 var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
 var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.d.ts

@@ -6,6 +6,7 @@ type Props = {
     index: number;
     device: Device;
     rowHeight: number;
+    zIndex: number;
 };
-declare function FlexGridItem({ cb, index, device, rowHeight }: Props): JSX.Element;
+declare function FlexGridItem({ cb, index, device, rowHeight, zIndex }: Props): JSX.Element;
 export default FlexGridItem;

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.js

@@ -23,13 +23,16 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
 var gap = 10;
 function FlexGridItem(_a) {
-    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight;
+    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
     var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    var zIndex = device === 'DESKTOP'
-        ? cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX
-        : cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'];
+    // const zIndex =
+    //   device === 'DESKTOP'
+    //     ? cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX
+    //     : cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT[
+    //         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'
+    //       ];
     return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: {
             zIndex: zIndex,
             gridArea: gridArea

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentBlock } from '../types';
-export declare function parsePlacement(components: ComponentBlock[]): {
+import { ComponentBlock } from '../types';
+import type { SectionZOrder } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+export declare function parsePlacement(components: ComponentBlock[], zOrders: SectionZOrder): {
     sm: {
         i: string;
         x: number;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable no-console */
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -11,10 +12,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePlacement = void 0;
 var types_1 = require("../types");
-function parsePlacement(components) {
+function parsePlacement(components, zOrders) {
+    if (!zOrders) {
+        console.error('Z-ORDER NOT FOUND');
+    }
     return components.reduce(function (acc, cur) {
         var id = cur.id, jsonProperties = cur.jsonProperties, componentBlockCode = cur.componentBlockCode;
-        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id, componentBlockCode), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
+        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id, componentBlockCode, zOrders), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
         return {
             sm: __spreadArray(__spreadArray([], acc.sm, true), [mobileLayout], false),
             lg: __spreadArray(__spreadArray([], acc.lg, true), [desktopLayout], false)
@@ -22,14 +26,14 @@ function parsePlacement(components) {
     }, { sm: [], lg: [] });
 }
 exports.parsePlacement = parsePlacement;
-function parsePropPlacement(props, id, cbCode) {
+function parsePropPlacement(props, id, cbCode, zOrders) {
     var desktopLayout = {
         i: id.toString(),
         x: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX,
         y: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY,
         w: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS,
         h: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS,
-        z: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX + 500,
+        z: zOrders.desktop[id] + 500,
         autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT
     };
     var mobileLayout = {
@@ -38,7 +42,7 @@ function parsePropPlacement(props, id, cbCode) {
         y: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'],
         w: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'],
         h: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'],
-        z: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'] + 500,
+        z: zOrders.mobile[id] + 500,
         autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT
     };
     return {

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -6,7 +6,7 @@ import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util
 import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
 import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
 import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
-import type { Block } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+import type { Block, SectionZOrder } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
 import type { Ref } from 'react';
 export { TypeOfSectionAction };
 export type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
@@ -301,6 +301,7 @@ export type IMembershipDisplay = {
     connectedMemberships: IConnectedMembership[];
 };
 export type ISectionJsonProperties = {
+    zOrders?: SectionZOrder;
     pedigree?: SectionPedigree;
     data: {
         CB_CONTENT_PROP_SECTION: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.63",
+  "version": "2.5.65",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",