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

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

@@ -82,23 +82,23 @@ 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];
-    var _m = (0, react_1.useState)('ROOT'), editingGroupBlock = _m[0], setEditingGroupBlock = _m[1];
-    var _o = (0, react_1.useState)([]), bulkBlockIds = _o[0], setBulkBlockIds = _o[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;
@@ -118,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;
@@ -161,7 +161,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             return;
         }
         if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            // breakGroupCB();
             setBulkBlockIds([]);
             setSelectedBlockId(null);
             return;
@@ -198,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 _p = (0, util_1.parseCustomSectionPlacement)({
+    var _q = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), rows = _p.rows, width = _p.width, minHeight = _p.minHeight, isFullWidth = _p.isFullWidth;
+    }), rows = _q.rows, width = _q.width, minHeight = _q.minHeight, isFullWidth = _q.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',

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.64",
+  "version": "2.5.65",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",