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

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 = {
@@ -86,6 +92,11 @@ type ActionHandlerPayload = {
         sectionId: number;
         e: React.MouseEvent;
     };
+    '@CUSTOMSECTION/GROUP_RIGHT_CLICKED': {
+        e: React.MouseEvent;
+        blockId: string;
+        isEditingGroup: boolean;
+    };
     '@CUSTOMSECTION/BULK_CREATED': {
         message: string;
         data: LayoutItem;

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

@@ -61,10 +61,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
 var S_HiddenCover_1 = require("./components/ComponentBlock/componentBlocks/components/S_HiddenCover");
-var useGroupDrag_1 = require("./hooks/useGroupDrag");
-var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
-var utils_1 = require("./hooks/useGroupDrag/utils");
-var _clsx_1 = require("./newUtils/\bclsx");
+var clsx_1 = require("./newUtils/clsx");
+var group_2 = require("./newUtils/group");
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
 var Responsive = (0, publ_echo_test_1.WidthProvider)(publ_echo_test_1.ResponsiveGridEditor);
@@ -99,17 +97,11 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             sm: sm
         };
     }), layouts = _l[0], setLayouts = _l[1];
-    var _m = (0, useGroupDrag_1.useGroupDrag)({
-        layouts: layouts,
-        setLayouts: setLayouts,
-        device: device,
-        sectionActionHandler: sectionActionHandler
-    }), setGroupCB = _m.setGroupCB, 
-    // breakGroupCB,
-    // escapeFromGroup,
-    // makeAllInOneGroup,
-    // makeCollisionGroup,
-    makeCollisionOfBulk = _m.makeCollisionOfBulk, getCollisionGroupIds = _m.getCollisionGroupIds;
+    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];
+    var newblock = bulkBlockIds.length > 0
+        ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds)
+        : pedigreeState;
     (0, react_1.useImperativeHandle)(ref, function () {
         return {
             selectCB: function (cbId) {
@@ -130,21 +122,21 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         setLayouts(function (prev) {
             var _a;
             var _b;
-            var group = (0, useGroupDrag_2.getGroupCB)(prev[layoutByDevice]);
+            var group = (0, group_2.getGroupCB)(prev[layoutByDevice]);
             var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
-            var filteredLayout = (0, useGroupDrag_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
+            var filteredLayout = (0, group_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
             if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
                 var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
                     return groupedCBIds.includes(each.i);
                 });
                 if (groupCbs.length > 0) {
-                    var newGroupLayout = (0, utils_1.getGroupForMultiple)(groupCbs);
+                    var newGroupLayout = (0, group_2.getGroupForMultiple)(groupCbs);
                     filteredLayout.push(newGroupLayout);
                 }
             }
             return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
         });
-    }, [componentBlocks, useGroupDrag_2.getGroupCB, layoutByDevice]);
+    }, [componentBlocks, group_2.getGroupCB, layoutByDevice]);
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedBlockId(null);
@@ -187,27 +179,29 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             if (!selectedCBId) {
                 return;
             }
-            var bulks = getCollisionGroupIds(selectedCBId).map(function (cbid) { return blockIdMap.CB_ID[Number(cbid)]; });
-            var bulkIds = (0, group_1.findAccessibleChildrenBlocks)(pedigreeState, editingGroupBlock, bulks);
-            setBulkBlockIds(bulkIds);
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: { type: 'BULK', blockId: 'BULK', childrenBlockIds: bulks }
-                    }
-                });
+            // const bulks = getCollisionGroupIds(selectedCBId).map(
+            //   (cbid) => blockIdMap.CB_ID[Number(cbid)]
+            // );
+            // const bulkIds = findAccessibleChildrenBlocks(pedigreeState, editingGroupBlock, bulks);
+            // setBulkBlockIds(bulkIds);
+            // sectionActionHandler &&
+            //   sectionActionHandler({
+            //     type: '@CUSTOMSECTION/BLOCK_CLICKED',
+            //     payload: {
+            //       block: { type: 'BULK', blockId: 'BULK', childrenBlockIds: bulks }
+            //     }
+            //   });
             setSelectedBlockId('BULK');
         }
-    }, [selectedBlockId, shortcutKeyMode, getCollisionGroupIds, sectionActionHandler, setSelectedBlockId]);
+    }, [selectedBlockId, shortcutKeyMode, sectionActionHandler, setSelectedBlockId]);
     var makeAllInOneGroup = function () {
         var allRootChildIds = (0, group_1.findAllChildrenIds)(pedigreeState, editingGroupBlock, 'current');
         setBulkBlockIds(allRootChildIds);
     };
-    var _o = (0, util_1.parseCustomSectionPlacement)({
+    var _p = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), rows = _o.rows, width = _o.width, minHeight = _o.minHeight, isFullWidth = _o.isFullWidth;
+    }), rows = _p.rows, width = _p.width, minHeight = _p.minHeight, isFullWidth = _p.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -215,6 +209,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;
@@ -232,7 +227,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',
@@ -240,7 +238,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'
                         }
                     }
                 });
@@ -248,21 +248,23 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         if (shortcutKeyMode === 'COLLISION_SELECT') {
             var selectedCBId = selectedBlockId ? blockIdMap.BLOCK_ID[selectedBlockId] : undefined;
-            var bulks = getCollisionGroupIds(id, selectedCBId).map(function (cbid) { return blockIdMap.CB_ID[Number(cbid)]; });
-            var bulkIds = (0, group_1.findAccessibleChildrenBlocks)(pedigreeState, editingGroupBlock, bulks);
-            setBulkBlockIds(bulkIds);
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: bulkIds
-                        }
-                    }
-                });
-            setSelectedBlockId('BULK');
+            // const bulks = getCollisionGroupIds(id, selectedCBId).map(
+            //   (cbid) => blockIdMap.CB_ID[Number(cbid)]
+            // );
+            // const bulkIds = findAccessibleChildrenBlocks(pedigreeState, editingGroupBlock, bulks);
+            // setBulkBlockIds(bulkIds);
+            // sectionActionHandler &&
+            //   sectionActionHandler({
+            //     type: '@CUSTOMSECTION/BLOCK_CLICKED',
+            //     payload: {
+            //       block: {
+            //         type: 'BULK',
+            //         blockId: 'BULK',
+            //         childrenBlockIds: bulkIds
+            //       }
+            //     }
+            //   });
+            // setSelectedBlockId('BULK');
             return;
         }
         setSelectedBlockId(blockId);
@@ -274,7 +276,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'
                     }
                 }
             });
@@ -320,7 +323,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;
         }
@@ -346,7 +349,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         var blockId = blockIdMap.CB_ID[numberId];
         var isIdNumber = !Number.isNaN(numberId);
         if (blockId) {
-            if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
+            if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
                 setTimeout(function () {
                     setBulkBlockIds([]);
                 }, 100);
@@ -362,7 +365,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'
                         }
                     }
                 });
@@ -431,11 +435,23 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                 }
             });
     };
+    var onContextGroup = function (e, blockId, isEditingGroup) {
+        setSelectedBlockId(blockId);
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/GROUP_RIGHT_CLICKED',
+                payload: {
+                    blockId: blockId,
+                    e: e,
+                    isEditingGroup: isEditingGroup
+                }
+            });
+    };
     var onContextSection = function (e) {
         if (!isEditMode) {
             return;
         }
-        if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
+        if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
             setBulkBlockIds([]);
         }
         setSelectedBlockId(null);
@@ -467,9 +483,10 @@ 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();
+            // makeCollisionOfBulk();
             return;
         }
         if (shortcutKeyMode === 'BULK_SELECT') {
@@ -488,7 +505,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'
                             }
                         }
                     });
@@ -501,7 +519,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         if (shortcutKeyMode !== 'COLLISION_SELECT') {
             return;
         }
-        makeCollisionOfBulk();
+        // makeCollisionOfBulk();
     };
     var showSectionHiddenCover = (function () {
         if (mode === 'EDIT') {
@@ -515,11 +533,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return false;
     })();
-    var _p = (0, react_1.useState)('ROOT'), editingGroupBlock = _p[0], setEditingGroupBlock = _p[1];
-    var _q = (0, react_1.useState)([]), bulkBlockIds = _q[0], setBulkBlockIds = _q[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') {
@@ -531,6 +544,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;
@@ -547,14 +561,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',
@@ -562,7 +580,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'
                         }
                     }
                 });
@@ -570,8 +590,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({
@@ -580,7 +603,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'
                         }
                     }
                 });
@@ -588,13 +613,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
                     }
                 }
             });
@@ -631,13 +663,13 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                 fontSize: "".concat(baseFontSize, "px")
                             }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, onDragStopForGroup: onGroupDragStop, onFitToContent: onAutoFitContent, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, 
                             // GROUP
-                            selectedGroupBlock: (_c = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _c !== void 0 ? _c : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
+                            selectedGroupBlock: (_c = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _c !== void 0 ? _c : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup, onContextGroup: onContextGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
                                 var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
                                 var isInBulk = bulkBlockIds.includes((0, group_1.getBlockIdByComponentId)(pedigreeState, Number(each.i)));
                                 if (!matchedCB) {
                                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                                 }
-                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, _clsx_1.clsx)({
+                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, clsx_1.clsx)({
                                         'react-grid-item-selected': selectedBlockId === blockIdMap.CB_ID[matchedCB.id]
                                     }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "grid-item-child", style: {
                                             width: '100%',

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

@@ -42,6 +42,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
@@ -49,8 +50,6 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var CustomSection_1 = require("./CustomSection");
 var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
-var useGroupDrag_1 = require("./hooks/useGroupDrag/useGroupDrag");
-var utils_1 = require("./hooks/useGroupDrag/utils");
 var useResizableObserver_1 = require("./hooks/useResizableObserver");
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
@@ -70,51 +69,14 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     var gleRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
-    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    var _e = (0, react_1.useState)(function () {
-        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
-        return {
-            lg: lg,
-            sm: sm
-        };
-    }), layouts = _e[0], setLayouts = _e[1];
-    (0, react_1.useImperativeHandle)(ref, function () {
-        return {
-            selectCB: function (cbId) {
-                setSelectedCB(cbId);
-            },
-            selectCBInBulk: function (cbIds) {
-                var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []);
-                setLayouts(function (prev) {
-                    var _a;
-                    var filteredLayout = (0, useGroupDrag_1.filterItemsById)(parsedLayouts[layoutByDevice], cbIds);
-                    var newGroupLayout = (0, utils_1.getGroupForMultiple)(parsedLayouts[layoutByDevice].filter(function (each) { return cbIds.includes(each.i); }));
-                    filteredLayout.push(newGroupLayout);
-                    return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
-                });
-            }
-        };
-    }, [componentBlocks]);
-    (0, react_1.useLayoutEffect)(function () {
-        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []);
-        setLayouts(function (prev) {
-            var _a;
-            var _b;
-            var group = (0, useGroupDrag_1.getGroupCB)(prev[layoutByDevice]);
-            var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
-            var filteredLayout = (0, useGroupDrag_1.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
-            if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
-                var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
-                    return groupedCBIds.includes(each.i);
-                });
-                if (groupCbs.length > 0) {
-                    var newGroupLayout = (0, utils_1.getGroupForMultiple)(groupCbs);
-                    filteredLayout.push(newGroupLayout);
-                }
-            }
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
-        });
-    }, [componentBlocks, useGroupDrag_1.getGroupCB, layoutByDevice]);
+    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    // const [layouts] = useState<LayoutsType>(() => {
+    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
+    //   return {
+    //     lg,
+    //     sm
+    //   };
+    // });
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
@@ -162,10 +124,10 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _f = (0, util_1.parseCustomSectionPlacement)({
+    var _e = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
+    }), width = _e.width, minHeight = _e.minHeight, isFullWidth = _e.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -175,9 +137,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         if (!isEditMode) {
             return;
         }
-        if ((0, useGroupDrag_1.getGroupCB)(layouts[layoutByDevice])) {
-            // breakGroupCB();
-        }
         setSelectedCB(null);
         sectionActionHandler &&
             sectionActionHandler({

package/dist/src/sub/DynamicLayout/sections/CustomSection/{hooks/useGroupDrag/utils.d.ts → newUtils/group.d.ts}

@@ -1,4 +1,5 @@
-import type { ComponentBlock } from '../../types';
+import type { ComponentBlock } from '../types';
+import type { Layout } from 'publ-echo-test/dist/lib';
 import type { LayoutItem } from 'publ-echo/dist/lib';
 export interface LayoutItemWithGroupType extends LayoutItem {
     childrenIds: string[];
@@ -11,3 +12,5 @@ export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBl
     inGroup: ComponentBlock[];
     notInGroup: ComponentBlock[];
 };
+export declare function getGroupCB(layout: Layout): LayoutItemWithGroupType | null;
+export declare const filterItemsById: (layout: Layout, idsToRemove: Array<string>) => import("publ-echo-test/dist/lib").LayoutItem[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/{hooks/useGroupDrag/utils.js → newUtils/group.js}

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitComponentBlocksByGroup = exports.getGroupForMultiple = exports.recalculatedGroup = exports.getGroupData = void 0;
+exports.filterItemsById = exports.getGroupCB = exports.splitComponentBlocksByGroup = exports.getGroupForMultiple = exports.recalculatedGroup = exports.getGroupData = void 0;
 function getGroupData(elem1, elem2) {
     var _a, _b;
     var minX = Math.min(elem1.x, elem2.x);
@@ -125,3 +125,16 @@ function splitComponentBlocksByGroup(componentBlocks, groupIds) {
     };
 }
 exports.splitComponentBlocksByGroup = splitComponentBlocksByGroup;
+function getGroupCB(layout) {
+    var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
+    if (groupIdx < 0) {
+        return null;
+    }
+    var groupItem = layout[groupIdx];
+    return groupItem;
+}
+exports.getGroupCB = getGroupCB;
+var filterItemsById = function (layout, idsToRemove) {
+    return layout.filter(function (item) { return !idsToRemove.includes(item.i); });
+};
+exports.filterItemsById = filterItemsById;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.61",
+  "version": "2.5.64",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
     "publ-echo": "^0.0.99",
-    "publ-echo-test": "^0.0.106",
+    "publ-echo-test": "^0.0.108",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/index.d.ts

@@ -1 +0,0 @@
-export { default as useGroupDrag } from './useGroupDrag';

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGroupDrag = void 0;
-var useGroupDrag_1 = require("./useGroupDrag");
-Object.defineProperty(exports, "useGroupDrag", { enumerable: true, get: function () { return __importDefault(useGroupDrag_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { LayoutItemWithGroupType } from './utils';
-import type { LayoutsType } from '../../CustomSection';
-import type { Device } from '../../util/types';
-import type { DynamicLayoutProps } from '../../../../../DynamicLayout/types';
-import type { Layout, LayoutItem } from 'publ-echo/dist/lib';
-type Props = {
-    device: Device;
-    layouts: LayoutsType;
-    setLayouts: React.Dispatch<React.SetStateAction<LayoutsType>>;
-    sectionActionHandler: DynamicLayoutProps['sectionActionHandler'];
-};
-declare function useGroupDrag({ device, setLayouts, sectionActionHandler, layouts }: Props): {
-    setGroupCB: (selectedId: number | 'group', newId: number) => void;
-    breakGroupCB: () => void;
-    makeAllInOneGroup: () => void;
-    escapeFromGroup: (id: string) => void;
-    makeCollisionGroup: (id: number, selectedCBId?: number) => void;
-    makeCollisionOfBulk: () => void;
-    getCollisionGroupIds: (id: number, selectedCBId?: number) => string[];
-};
-export declare function getGroupCB(layout: Layout): LayoutItemWithGroupType | null;
-export declare const filterItemsById: (layout: Layout, idsToRemove: Array<string>) => LayoutItem[];
-export default useGroupDrag;

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

@@ -1,297 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterItemsById = exports.getGroupCB = void 0;
-// eslint-disable-next-line import/no-extraneous-dependencies
-var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
-var react_1 = require("react");
-var deepCopy_1 = __importDefault(require("../../../../../DynamicLayout/utils/deepCopy"));
-var utils_1 = require("./utils");
-function useGroupDrag(_a) {
-    var device = _a.device, setLayouts = _a.setLayouts, sectionActionHandler = _a.sectionActionHandler, layouts = _a.layouts;
-    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    function makeAllInOneGroup() {
-        setLayouts(function (prev) {
-            var _a, _b;
-            var _c;
-            // TODO: 임시용 카피
-            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
-            if (currentLayoutCopy.length === 0) {
-                return prev;
-            }
-            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
-            // NOTE: 그룹이 없는 경우
-            if (groupIdx < 0) {
-                var group_1 = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BULK_CREATED',
-                        payload: {
-                            message: 'group generated',
-                            data: group_1
-                        }
-                    });
-                return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = [group_1], _a));
-            }
-            // NOTE: 그룹이 이미 있는경우
-            var groupItem = currentLayoutCopy.splice(groupIdx, 1)[0];
-            if (!groupItem.groupLayouts) {
-                return prev;
-            }
-            var groupItems = (_c = groupItem.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
-            currentLayoutCopy.push.apply(currentLayoutCopy, groupItems);
-            var group = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BULK_CREATED',
-                    payload: {
-                        message: 'group generated',
-                        data: group
-                    }
-                });
-            return __assign(__assign({}, prev), (_b = {}, _b[layoutByDevice] = [group], _b));
-        });
-    }
-    function escapeFromGroup(id) {
-        setLayouts(function (prev) {
-            var _a;
-            // TODO: 임시용 카피
-            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
-            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
-            var group = currentLayoutCopy[groupIdx];
-            if (!group || !group.groupLayouts) {
-                return prev;
-            }
-            var escapeIndex = group.groupLayouts.findIndex(function (each) { return each.i === id; });
-            if (escapeIndex < 0) {
-                return prev;
-            }
-            var escapedItem = group.groupLayouts.splice(escapeIndex, 1)[0];
-            escapedItem.x += group.x;
-            escapedItem.y += group.y;
-            currentLayoutCopy.push(escapedItem);
-            var newGroup = (0, utils_1.recalculatedGroup)(group);
-            currentLayoutCopy.splice(groupIdx, 1, newGroup);
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/ESCAPE_ONE_FROM_BULK',
-                    payload: {
-                        id: id
-                    }
-                });
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
-        });
-    }
-    function setGroupCB(selectedId, newId) {
-        setLayouts(function (prev) {
-            var _a;
-            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
-            var firstIdx = currentLayoutCopy.findIndex(function (item) {
-                if (selectedId === 'group') {
-                    return item.i === 'group';
-                }
-                if (Number(item.i) === selectedId) {
-                    return true;
-                }
-                return false;
-            });
-            var firstElem = currentLayoutCopy.splice(firstIdx, 1)[0];
-            var secondIdx = currentLayoutCopy.findIndex(function (item) { return Number(item.i) === newId; });
-            var secondElem = currentLayoutCopy.splice(secondIdx, 1)[0];
-            var group = (0, utils_1.getGroupData)(firstElem, secondElem);
-            currentLayoutCopy.unshift(group);
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BULK_CREATED',
-                    payload: {
-                        message: 'group generated',
-                        data: group
-                    }
-                });
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
-        });
-    }
-    var breakGroupCB = (0, react_1.useCallback)(function () {
-        setLayouts(function (prev) {
-            var _a;
-            var _b;
-            // TODO: 임시용 카피
-            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
-            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
-            if (groupIdx < 0) {
-                return prev;
-            }
-            var groupItem = currentLayoutCopy.splice(groupIdx, 1)[0];
-            if (!groupItem.groupLayouts) {
-                return prev;
-            }
-            var groupItems = (_b = groupItem.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _b !== void 0 ? _b : [];
-            currentLayoutCopy.push.apply(currentLayoutCopy, groupItems);
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
-        });
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/BULK_DISMISSED',
-                payload: {
-                    message: 'group dismissed'
-                }
-            });
-    }, []);
-    function getCollisionGroupIds(id, selectedCBId) {
-        var currentLayoutCopy = (0, deepCopy_1.default)(layouts[layoutByDevice]); // 현재 레이아웃 복사
-        var additionalSelectedCBLayout = (function () {
-            if (selectedCBId === undefined || id === selectedCBId) {
-                return null;
-            }
-            return (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, selectedCBId.toString());
-        })();
-        var layout = (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, id.toString());
-        if (!layout) {
-            return []; // 해당 id에 대한 layout이 없으면 빈 배열 반환
-        }
-        var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
-        var groupLayouts = __spreadArray([layout], collisions, true);
-        if (additionalSelectedCBLayout) {
-            var alreadyHas = collisions.some(function (each) { return each.i === additionalSelectedCBLayout.i; });
-            if (!alreadyHas) {
-                groupLayouts.push(additionalSelectedCBLayout);
-            }
-        }
-        // 충돌 그룹 내의 layout 아이템의 id만 반환
-        return groupLayouts.map(function (item) { return item.i; });
-    }
-    function makeCollisionGroup(id, selectedCBId) {
-        setLayouts(function (prev) {
-            var _a, _b;
-            var _c, _d;
-            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
-            var additionalSelectedCBLayout = (function () {
-                if (selectedCBId === undefined) {
-                    return null;
-                }
-                if (id === selectedCBId) {
-                    return null;
-                }
-                return (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, selectedCBId.toString());
-            })();
-            var layout = (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, id.toString());
-            if (!layout) {
-                return prev;
-            }
-            var prevGroupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
-            if (prevGroupIdx < 0) {
-                var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
-                var groupLayouts = __spreadArray([layout], collisions, true);
-                if (collisions.length === 0 && !additionalSelectedCBLayout) {
-                    sectionActionHandler &&
-                        sectionActionHandler({
-                            type: '@CUSTOMSECTION/COLLISION_NOT_FOUND',
-                            payload: {
-                                message: '겹치는 부분이 없어, 아무련 변화가 없습니다.'
-                            }
-                        });
-                    return prev;
-                }
-                if (additionalSelectedCBLayout) {
-                    var alreadyHas = collisions.some(function (each) { return each.i === additionalSelectedCBLayout.i; });
-                    !alreadyHas && groupLayouts.push(additionalSelectedCBLayout);
-                }
-                var group_2 = (0, utils_1.getGroupForMultiple)(groupLayouts);
-                var filtered = currentLayoutCopy.filter(function (layout) { return !group_2.childrenIds.includes(layout.i); });
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BULK_CREATED',
-                        payload: {
-                            message: 'group generated with collision detect',
-                            data: group_2
-                        }
-                    });
-                return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([group_2], filtered, true), _a));
-            }
-            var groupItem = currentLayoutCopy.splice(prevGroupIdx, 1)[0];
-            if (groupItem) {
-                var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
-                var groupItems = (_d = (_c = groupItem.groupLayouts) === null || _c === void 0 ? void 0 : _c.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _d !== void 0 ? _d : [];
-                var newGroup_1 = (0, utils_1.getGroupForMultiple)([layout].concat(collisions).concat(groupItems));
-                var filtered = currentLayoutCopy.filter(function (layout) { return !newGroup_1.childrenIds.includes(layout.i); });
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BULK_CREATED',
-                        payload: {
-                            message: 'group generated with collision detect',
-                            data: newGroup_1
-                        }
-                    });
-                return __assign(__assign({}, prev), (_b = {}, _b[layoutByDevice] = __spreadArray([newGroup_1], filtered, true), _b));
-            }
-            return prev;
-        });
-    }
-    function makeCollisionOfBulk() {
-        setLayouts(function (prev) {
-            var _a;
-            var _b, _c;
-            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
-            var prevGroupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
-            var groupItem = currentLayoutCopy.splice(prevGroupIdx, 1)[0];
-            var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, groupItem);
-            var groupItems = (_c = (_b = groupItem.groupLayouts) === null || _b === void 0 ? void 0 : _b.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
-            var newGroup = (0, utils_1.getGroupForMultiple)(groupItems.concat(collisions));
-            var filtered = currentLayoutCopy.filter(function (layout) { return !newGroup.childrenIds.includes(layout.i); });
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BULK_CREATED',
-                    payload: {
-                        message: 'group generated with collision detect',
-                        data: newGroup
-                    }
-                });
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([newGroup], filtered, true), _a));
-        });
-    }
-    return {
-        setGroupCB: setGroupCB,
-        breakGroupCB: breakGroupCB,
-        makeAllInOneGroup: makeAllInOneGroup,
-        escapeFromGroup: escapeFromGroup,
-        makeCollisionGroup: makeCollisionGroup,
-        makeCollisionOfBulk: makeCollisionOfBulk,
-        getCollisionGroupIds: getCollisionGroupIds
-    };
-}
-function getGroupCB(layout) {
-    var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
-    if (groupIdx < 0) {
-        return null;
-    }
-    var groupItem = layout[groupIdx];
-    return groupItem;
-}
-exports.getGroupCB = getGroupCB;
-var filterItemsById = function (layout, idsToRemove) {
-    return layout.filter(function (item) { return !idsToRemove.includes(item.i); });
-};
-exports.filterItemsById = filterItemsById;
-exports.default = useGroupDrag;