pds-dev-kit-web-test 2.5.709 → 2.5.710

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

@@ -1,1238 +0,0 @@
-"use strict";
-
-var __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
-  if (Object.defineProperty) {
-    Object.defineProperty(cooked, "raw", {
-      value: raw
-    });
-  } else {
-    cooked.raw = raw;
-  }
-  return cooked;
-};
-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 __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
-  }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = this && this.__importStar || function (mod) {
-  if (mod && mod.__esModule) return mod;
-  var result = {};
-  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-  __setModuleDefault(result, mod);
-  return result;
-};
-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
-});
-var jsx_runtime_1 = require("react/jsx-runtime");
-var publ_echo_test_1 = require("publ-echo-test");
-var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
-var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
-var react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
-var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
-var gleStyles_1 = require("../../../DynamicLayout/gleStyles");
-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 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);
-var GRID_CELL_MIN = 24;
-var DESKTOP_GRID_COLS = 24;
-var MOBILE_GRID_COLS = 8;
-var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
-var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
-var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-  var _a, _b, _c, _d;
-  var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext),
-    device = _e.device,
-    editingSectionId = _e.editingSectionId,
-    mode = _e.mode,
-    shortcutKeyMode = _e.shortcutKeyMode,
-    zoomScale = _e.zoomScale,
-    placementRestriction = _e.placementRestriction,
-    sectionActionHandler = _e.sectionActionHandler;
-  var componentBlocks = props.componentBlocks,
-    jsonProperties = props.jsonProperties;
-  var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-  var _f = (0, react_1.useState)(sectionPedigree),
-    pedigreeState = _f[0],
-    setPedigreeState = _f[1];
-  (0, react_1.useEffect)(function () {
-    setPedigreeState(sectionPedigree);
-  }, [sectionPedigree]);
-  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 colsDesktop = (_a = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _a !== void 0 ? _a : 24;
-  var colsMobile = (_b = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
-  var _j = (0, react_1.useState)(null),
-    selectedBlockId = _j[0],
-    setSelectedBlockId = _j[1];
-  var gleRef = (0, react_1.useRef)(null);
-  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 _m = (0, react_1.useState)(function () {
-      var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction),
-        lg = _a.lg,
-        sm = _a.sm;
-      return {
-        lg: lg,
-        sm: sm
-      };
-    }),
-    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];
-  (0, react_1.useEffect)(function () {
-    if (editingGroupBlock) {
-      var found = (0, group_1.findBlockByBlockId)(sectionPedigree, editingGroupBlock);
-      if (!found) {
-        setEditingGroupBlock('ROOT');
-        return;
-      }
-      if (found.type === 'GROUP_BLOCK' && found.children.length === 0) {
-        setEditingGroupBlock('ROOT');
-        return;
-      }
-    }
-  }, [editingGroupBlock, sectionPedigree]);
-  var newblock = bulkBlockIds.length > 0 ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds) : pedigreeState;
-  (0, react_1.useImperativeHandle)(ref, function () {
-    return {
-      selectCB: function (blockId) {
-        setSelectedBlockId(blockId);
-      },
-      selectCBInBulk: function (blockIds) {
-        setBulkBlockIds(blockIds);
-      },
-      selectGroup: function (groupBlockId) {
-        setBulkBlockIds([]);
-        setSelectedBlockId(groupBlockId);
-      }
-    };
-  }, [componentBlocks]);
-  (0, react_1.useLayoutEffect)(function () {
-    var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction);
-    setLayouts(function (prev) {
-      var _a;
-      var _b;
-      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, 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, group_2.getGroupForMultiple)(groupCbs);
-          filteredLayout.push(newGroupLayout);
-        }
-      }
-      return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
-    });
-  }, [componentBlocks, group_2.getGroupCB, layoutByDevice, zOrders]);
-  (0, react_1.useEffect)(function () {
-    if (editingSectionId !== props.id) {
-      setSelectedBlockId(null);
-      setBulkBlockIds([]);
-      setEditingGroupBlock('ROOT');
-    }
-  }, [editingSectionId]);
-  var workDir = (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : '/ROOT';
-  (0, react_1.useEffect)(function () {
-    sectionActionHandler && sectionActionHandler({
-      type: '@CUSTOMSECTION/WORKDIR_CHANGED',
-      payload: {
-        workDir: workDir
-      }
-    });
-  }, [workDir]);
-  // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
-  (0, react_1.useLayoutEffect)(function () {
-    var _a, _b, _c, _d, _e, _f;
-    if (props.id !== editingSectionId) {
-      return;
-    }
-    if (!shortcutKeyMode) {
-      return;
-    }
-    if (shortcutKeyMode === 'SELECT_ALL') {
-      makeAllInOneGroup();
-      return;
-    }
-    // esc
-    if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-      if (selectedBlockId && editingGroupBlock !== selectedBlockId && editingGroupBlock !== 'ROOT') {
-        setSelectedBlockId(null);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              blockId: editingGroupBlock,
-              type: 'GROUP_BLOCK',
-              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-              childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : [],
-              childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : []
-            }
-          }
-        });
-        return;
-      }
-      if (bulkBlockIds.length > 0) {
-        setBulkBlockIds([]);
-        setSelectedBlockId(null);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              blockId: editingGroupBlock,
-              type: 'GROUP_BLOCK',
-              workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-              childrenBlockIds: (_e = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : [],
-              childrenCBIds: (_f = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _f !== void 0 ? _f : []
-            }
-          }
-        });
-        return;
-      }
-      if (editingGroupBlock !== 'ROOT') {
-        setEditingGroupBlock('ROOT');
-        setSelectedBlockId(null);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BULK_DISMISSED',
-          payload: {
-            message: 'MANUAL_BULK_BREAK_OR_ESC',
-            editingGroupBlock: 'ROOT'
-          }
-        });
-        return;
-      }
-      if (editingGroupBlock === 'ROOT') {
-        setSelectedBlockId(null);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BULK_DISMISSED',
-          payload: {
-            message: 'MANUAL_BULK_BREAK_OR_ESC',
-            editingGroupBlock: 'ROOT'
-          }
-        });
-      }
-    }
-  }, [shortcutKeyMode, setSelectedBlockId]);
-  (0, react_1.useLayoutEffect)(function () {
-    var _a;
-    if (props.id !== editingSectionId) {
-      return;
-    }
-    if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
-      if (!selectedBlockId || selectedBlockId === 'BULK') {
-        return;
-      }
-      var selectedCBId = selectedBlockId ? (0, group_1.formatBlockIdToCbId)(selectedBlockId) : undefined;
-      if (!selectedCBId) {
-        return;
-      }
-      var bulks_1 = getCollisionGroupIds(selectedCBId);
-      if (selectedBlockId) {
-        bulks_1.push(selectedBlockId);
-      }
-      setBulkBlockIds(function (prev) {
-        var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
-        return Array.from(set);
-      });
-      setSelectedBlockId(null);
-      var newBulkCBIds = bulks_1.map(function (id) {
-        return (0, group_1.formatBlockIdToCbId)(id);
-      }).filter(function (each) {
-        return each !== null;
-      });
-      var childrenCBIds = [];
-      if (newBulkCBIds.length === 0) {
-        var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks_1[0]);
-        childrenCBIds = oneCB ? [oneCB] : [];
-      } else {
-        childrenCBIds = newBulkCBIds;
-      }
-      var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true).length;
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            type: 'BULK',
-            blockId: 'BULK',
-            childrenBlockIds: bulks_1,
-            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-            childrenCBIds: childrenCBIds,
-            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-          }
-        }
-      });
-      return;
-    }
-  }, [selectedBlockId, shortcutKeyMode, sectionActionHandler, bulkBlockIds, setSelectedBlockId]);
-  var makeAllInOneGroup = function () {
-    var _a, _b, _c, _d, _e;
-    var allRootChildIds = (0, group_1.findDirectChildrenBlockIds)(pedigreeState, editingGroupBlock);
-    if (allRootChildIds.length === 1) {
-      var block = (0, group_1.findBlockByBlockId)(newblock, allRootChildIds[0]);
-      if (!block) {
-        return;
-      }
-      setSelectedBlockId(block.blockId);
-      setBulkBlockIds([]);
-      if (block.type === 'COMPONENT_BLOCK') {
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              blockId: block.blockId,
-              type: block.type,
-              cbId: block.componentBlockId,
-              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-            }
-          }
-        });
-        return;
-      }
-      if (block.type === 'GROUP_BLOCK') {
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              blockId: block.blockId,
-              type: 'GROUP_BLOCK',
-              workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-              childrenBlockIds: (_c = (0, group_1.findDirectChildrenBlockIds)(newblock, block.blockId)) !== null && _c !== void 0 ? _c : [],
-              childrenCBIds: (_d = (0, group_1.findDirectChildrenCbIds)(newblock, block.blockId)) !== null && _d !== void 0 ? _d : []
-            }
-          }
-        });
-      }
-      return;
-    }
-    setBulkBlockIds(allRootChildIds);
-    var newBulkCBIds = allRootChildIds.map(function (id) {
-      return (0, group_1.formatBlockIdToCbId)(id);
-    }).filter(function (each) {
-      return each !== null;
-    });
-    var childrenCBIds = [];
-    if (newBulkCBIds.length === 0) {
-      var oneCB = (0, group_1.findOneComponentBlock)(newblock, allRootChildIds[0]);
-      childrenCBIds = oneCB ? [oneCB] : [];
-    } else {
-      childrenCBIds = newBulkCBIds;
-    }
-    var groupDisabled = getWorkDirDirectChildrenLength() === allRootChildIds.length;
-    sectionActionHandler && sectionActionHandler({
-      type: '@CUSTOMSECTION/BLOCK_CLICKED',
-      payload: {
-        block: {
-          type: 'BULK',
-          blockId: 'BULK',
-          childrenBlockIds: allRootChildIds,
-          workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-          childrenCBIds: childrenCBIds,
-          groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-        }
-      }
-    });
-  };
-  var getCollisionGroupIds = function (cdId1) {
-    var layoutItem = (0, renderHelpers_1.getLayoutItem)(layouts[layoutByDevice], cdId1.toString());
-    if (!layoutItem) {
-      return [];
-    }
-    var allCollisions = (0, renderHelpers_1.getAllCollisions)(layouts[layoutByDevice], layoutItem);
-    var allCollisionsCbIds = allCollisions.map(function (each) {
-      return Number(each.i);
-    });
-    var workDirChildrenBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock);
-    var collisions = workDirChildrenBlockIds.filter(function (each) {
-      var cbId = (0, group_1.formatBlockIdToCbId)(each);
-      var allCollisions = (0, group_1.findAllChildrenCbIds)(newblock, each);
-      if (cbId !== null && allCollisionsCbIds.includes(cbId)) {
-        return true;
-      }
-      var hasCollision = allCollisions.some(function (each) {
-        return allCollisionsCbIds.includes(each);
-      });
-      return hasCollision;
-    });
-    return __spreadArray(__spreadArray([], collisions, true), [(0, group_1.formatCbIdToBlockId)(cdId1)], false);
-  };
-  var _q = (0, util_1.parseCustomSectionPlacement)({
-      isMobile: isMobile,
-      customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }),
-    rows = _q.rows,
-    width = _q.width,
-    minHeight = _q.minHeight,
-    isFullWidth = _q.isFullWidth;
-  var customSectionStyles = {
-    minHeight: "".concat(minHeight, "vh"),
-    width: '100%',
-    maxWidth: isFullWidth ? '' : "".concat(width, "px")
-  };
-  var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
-  var onClickCB = function (id) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var blockId = (0, group_1.formatCbIdToBlockId)(id);
-    if (!isEditMode) {
-      return;
-    }
-    var added = function () {
-      if (selectedBlockId === editingGroupBlock) {
-        return [blockId];
-      }
-      if (selectedBlockId === 'BULK') {
-        return [blockId];
-      }
-      return selectedBlockId ? [selectedBlockId, blockId] : [blockId];
-    }();
-    if (shortcutKeyMode === 'BULK_SELECT') {
-      setBulkBlockIds(function (prev) {
-        var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
-        return Array.from(set);
-      });
-      setSelectedBlockId(null);
-      var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-      var newBulkCBIds = newBulkBlockIds.map(function (id) {
-        return (0, group_1.formatBlockIdToCbId)(id);
-      }).filter(function (each) {
-        return each !== null;
-      });
-      var childrenCBIds = [];
-      if (newBulkCBIds.length === 0) {
-        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-        childrenCBIds = oneCB ? [oneCB] : [];
-      } else {
-        childrenCBIds = newBulkCBIds;
-      }
-      var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), added, true).length;
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            type: 'BULK',
-            blockId: 'BULK',
-            childrenBlockIds: newBulkBlockIds,
-            childrenCBIds: childrenCBIds,
-            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-          }
-        }
-      });
-      return;
-    }
-    if (shortcutKeyMode === 'COLLISION_SELECT') {
-      var bulks = getCollisionGroupIds(id);
-      var newBulksSet = new Set(__spreadArray(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true), bulks, true));
-      var newBulks = Array.from(newBulksSet);
-      if (newBulks.length === 1) {
-        var blockId_1 = newBulks[0];
-        setSelectedBlockId(blockId_1);
-        setBulkBlockIds([]);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              type: 'COMPONENT_BLOCK',
-              blockId: blockId_1,
-              cbId: id,
-              workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-            }
-          }
-        });
-        return;
-      }
-      setBulkBlockIds(newBulks);
-      setSelectedBlockId(null);
-      var newBulkCBIds = newBulks.map(function (id) {
-        return (0, group_1.formatBlockIdToCbId)(id);
-      }).filter(function (each) {
-        return each !== null;
-      });
-      var childrenCBIds = [];
-      if (newBulkCBIds.length === 0) {
-        var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks[0]);
-        childrenCBIds = oneCB ? [oneCB] : [];
-      } else {
-        childrenCBIds = newBulkCBIds;
-      }
-      var groupDisabled = getWorkDirDirectChildrenLength() === newBulks.length;
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            type: 'BULK',
-            blockId: 'BULK',
-            childrenBlockIds: newBulks,
-            workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND',
-            childrenCBIds: childrenCBIds,
-            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-          }
-        }
-      });
-      return;
-    }
-    var blockType = blockId.startsWith('GB_') ? 'GROUP_BLOCK' : 'COMPONENT_BLOCK';
-    setSelectedBlockId(blockId);
-    setBulkBlockIds([]);
-    if (blockType === 'COMPONENT_BLOCK') {
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            blockId: blockId,
-            type: blockType,
-            cbId: id,
-            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND'
-          }
-        }
-      });
-      return;
-    }
-    if (blockType === 'GROUP_BLOCK') {
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            blockId: blockId,
-            type: 'GROUP_BLOCK',
-            workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-            childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _f !== void 0 ? _f : [],
-            childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _g !== void 0 ? _g : []
-          }
-        }
-      });
-    }
-  };
-  var onContextMenuCB = function (id, e) {
-    var _a;
-    var blockId = (0, group_1.formatCbIdToBlockId)(id);
-    if (!isEditMode) {
-      return;
-    }
-    if (selectedBlockId === 'BULK' && blockId !== selectedBlockId) {
-      setBulkBlockIds([]);
-    }
-    // if (!['COLLISION_SELECT', 'BULK_SELECT'].includes(shortcutKeyMode ?? '')) {
-    //   if (blockId !== selectedBlockId) {
-    //     setBulkBlockIds([]);
-    //   }
-    // }
-    setSelectedBlockId(blockId);
-    if (sectionActionHandler) {
-      sectionActionHandler({
-        type: '@CUSTOMSECTION/CB_RIGHT_CLICKED',
-        payload: {
-          e: e,
-          block: {
-            blockId: blockId,
-            cbId: id,
-            type: 'COMPONENT_BLOCK',
-            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-          }
-        }
-      });
-    }
-  };
-  var onLayoutChange = function (props) {
-    if (!isEditMode) {
-      return;
-    }
-    if (sectionActionHandler) {
-      sectionActionHandler({
-        type: '@CUSTOMSECTION/PLACEMENT_CHANGED',
-        payload: props
-      });
-    }
-    setLayouts(props.layouts);
-  };
-  var onDragStart = function (props) {
-    sectionActionHandler && sectionActionHandler({
-      type: '@CUSTOMSECTION/CB_DRAG_START',
-      payload: __assign({}, props)
-    });
-  };
-  var onDragStop = function (props) {
-    var _a, _b, _c;
-    if (!isEditMode || !props.item) {
-      return;
-    }
-    var item = props.item,
-      prev = props.prev;
-    var isShiftOn = shortcutKeyMode === 'BULK_SELECT' || shortcutKeyMode === 'COLLISION_SELECT';
-    if (isLayoutPlacementSame(item, prev) && isShiftOn) {
-      setTimeout(function () {
-        onClickCB(Number(item.i));
-      }, 0);
-      return;
-    }
-    // NOTE 미사용시 삭제
-    // if (item.i === 'BULK' && props.item.groupLayouts) {
-    //   setSelectedBlockId('BULK');
-    //   const outerBasedChildrenPositions = props.item.groupLayouts.map((cb) => ({
-    //     ...cb,
-    //     x: item.x + cb.x,
-    //     y: item.y + cb.y
-    //   }));
-    //   sectionActionHandler &&
-    //     sectionActionHandler({
-    //       type: '@CUSTOMSECTION/BULK_DRAG_STOP',
-    //       payload: {
-    //         updatedBlocks: props.
-    //         ...props,
-    //         outerBasedChildrenPositions,
-    //         workDir: getBlockWorkDirPath(newblock, editingGroupBlock) ?? 'NOT-FOUND'
-    //       }
-    //     });
-    //   return;
-    // }
-    var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
-    var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-    var isIdNumber = !Number.isNaN(numberId);
-    if (blockId) {
-      if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-        setTimeout(function () {
-          setBulkBlockIds([]);
-        }, 100);
-      }
-      setSelectedBlockId(blockId);
-    }
-    if (isLayoutPlacementSame(item, prev)) {
-      // 확인 필요.. 그룹과 벌크
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            blockId: blockId,
-            cbId: numberId,
-            type: 'COMPONENT_BLOCK',
-            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-          }
-        }
-      });
-      return;
-    }
-    if (sectionActionHandler && isIdNumber) {
-      sectionActionHandler({
-        type: '@CUSTOMSECTION/CB_DRAG_STOP',
-        payload: __assign(__assign({}, props), {
-          blockId: blockId,
-          workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND'
-        })
-      });
-    }
-  };
-  var onResizeStop = function (props) {
-    var _a;
-    var prev = props.prev,
-      item = props.item;
-    if (!isEditMode || !item) {
-      return;
-    }
-    var numberId = Number(item.i);
-    var isIdNumber = !Number.isNaN(numberId);
-    if (isLayoutPlacementSame(item, prev)) {
-      return;
-    }
-    if (isIdNumber) {
-      var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-      setSelectedBlockId(blockId);
-    }
-    if (sectionActionHandler && isIdNumber) {
-      sectionActionHandler({
-        type: '@CUSTOMSECTION/CB_RESIZE_STOP',
-        payload: __assign(__assign({}, props), {
-          blockId: (0, group_1.formatCbIdToBlockId)(numberId),
-          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-        })
-      });
-    }
-  };
-  var onAutoFitContent = function (props) {
-    var _a;
-    var prev = props.prev,
-      item = props.item;
-    if (!isEditMode || !item) {
-      return;
-    }
-    var numberId = Number(item.i);
-    var isIdNumber = !Number.isNaN(numberId);
-    if (isLayoutPlacementSame(item, prev)) {
-      return;
-    }
-    if (isIdNumber) {
-      var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-      setSelectedBlockId(blockId);
-    }
-    if (sectionActionHandler && isIdNumber) {
-      sectionActionHandler({
-        type: '@CUSTOMSECTION/CB_AUTO_FIT_CONTENT',
-        payload: __assign(__assign({}, props), {
-          details: {
-            hadPaddingChanged: props.hasPaddingChanged
-          },
-          blockId: (0, group_1.formatCbIdToBlockId)(numberId),
-          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-        })
-      });
-    }
-  };
-  var onClickSection = function (e) {
-    if (!isEditMode) {
-      return;
-    }
-    if (editingGroupBlock !== 'ROOT') {
-      onClickGroup(e, editingGroupBlock);
-      return;
-    }
-    setBulkBlockIds([]);
-    setSelectedBlockId(null);
-    sectionActionHandler && sectionActionHandler({
-      type: '@CUSTOMSECTION/SECTION_CLICKED',
-      payload: {
-        sectionId: props.id
-      }
-    });
-  };
-  var onContextGroup = function (e, blockId, isEditingGroup) {
-    var _a, _b, _c;
-    setSelectedBlockId(blockId);
-    var block = (0, group_1.findBlockByBlockId)(newblock, blockId);
-    if ((block === null || block === void 0 ? void 0 : block.type) === 'COMPONENT_BLOCK') {
-      return;
-    }
-    sectionActionHandler && sectionActionHandler({
-      type: '@CUSTOMSECTION/GROUP_RIGHT_CLICKED',
-      payload: {
-        block: {
-          blockId: blockId,
-          type: 'GROUP_BLOCK',
-          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-          childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _b !== void 0 ? _b : [],
-          childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _c !== void 0 ? _c : []
-        },
-        e: e,
-        isEditingGroup: isEditingGroup
-      }
-    });
-  };
-  var onContextSection = function (e) {
-    if (editingGroupBlock !== 'ROOT') {
-      e.preventDefault();
-      return;
-    }
-    if (!isEditMode) {
-      return;
-    }
-    if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-      setBulkBlockIds([]);
-    }
-    setSelectedBlockId(null);
-    sectionActionHandler && sectionActionHandler({
-      type: '@CUSTOMSECTION/SECTION_RIGHT_CLICKED',
-      payload: {
-        sectionId: props.id,
-        e: e
-      }
-    });
-  };
-  var onWidthChange = function (width) {
-    var responsiveFontMode =
-    // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
-    !!(CB_CONTENT_PROP_SECTION === null || CB_CONTENT_PROP_SECTION === void 0 ? void 0 : CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
-    if (device === 'MOBILE') {
-      var cellWidth_1 = width / MOBILE_GRID_COLS;
-      setRowHeight(cellWidth_1 * 0.56);
-      // baseFontSize !== 16 && setBaseFontSize(width * 0.0133);
-      responsiveFontMode ? setBaseFontSize(width * 0.0421) : setBaseFontSize(16);
-      return;
-    }
-    var cellWidth = width / DESKTOP_GRID_COLS;
-    setRowHeight(cellWidth * 0.56);
-    responsiveFontMode ? setBaseFontSize(width * 0.0133) : setBaseFontSize(16);
-  };
-  var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-  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, _b;
-    var blockId = (0, group_1.formatCbIdToBlockId)(id);
-    if (shortcutKeyMode === 'COLLISION_SELECT') {
-      return;
-    }
-    if (shortcutKeyMode === 'BULK_SELECT') {
-      if (bulkBlockIds.length <= 2) {
-        var oneLastBlockId = bulkBlockIds.filter(function (each) {
-          return each !== blockId;
-        })[0];
-        setBulkBlockIds([]);
-        if (!oneLastBlockId) {
-          return;
-        }
-        var cbId = (0, group_1.formatBlockIdToCbId)(oneLastBlockId);
-        if (!cbId) {
-          return;
-        }
-        setSelectedBlockId(oneLastBlockId);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              blockId: oneLastBlockId,
-              cbId: cbId,
-              type: 'COMPONENT_BLOCK',
-              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-            }
-          }
-        });
-        return;
-      }
-      var filtered = bulkBlockIds.filter(function (each) {
-        return each !== blockId;
-      });
-      setBulkBlockIds(filtered);
-      var groupDisabled = getWorkDirDirectChildrenLength() === filtered.length;
-      var newBulkCBIds = filtered.map(function (id) {
-        return (0, group_1.formatBlockIdToCbId)(id);
-      }).filter(function (each) {
-        return each !== null;
-      });
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            type: 'BULK',
-            blockId: 'BULK',
-            childrenBlockIds: filtered,
-            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-            childrenCBIds: newBulkCBIds,
-            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-          }
-        }
-      });
-    }
-  };
-  var showSectionHiddenCover = function () {
-    if (mode === 'EDIT') {
-      var visibilityKey = device === 'DESKTOP' ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP' : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
-      var isSectionVisible = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.data.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
-      // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
-      var shouldShowHiddenCover = !isSectionVisible;
-      return shouldShowHiddenCover;
-    }
-    return false;
-  }();
-  var onDoubleClickGroup = function (e, id) {
-    e.stopPropagation();
-    if (id === 'BULK') {
-      return;
-    }
-    setEditingGroupBlock(id);
-  };
-  var onDoubleClickOutsideGroup = function () {
-    setEditingGroupBlock('ROOT');
-    setSelectedBlockId(null);
-  };
-  var onClickGroup = function (e, id) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    e.stopPropagation();
-    if (id === 'BULK') {
-      return;
-    }
-    if (editingGroupBlock === id && shortcutKeyMode === 'BULK_SELECT') {
-      return;
-    }
-    if (bulkBlockIds.includes(id) && shortcutKeyMode === 'BULK_SELECT') {
-      if (bulkBlockIds.length <= 2) {
-        var oneLastBlockId = bulkBlockIds.filter(function (each) {
-          return each !== id;
-        })[0];
-        setBulkBlockIds([]);
-        setSelectedBlockId(oneLastBlockId);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              blockId: oneLastBlockId,
-              type: 'GROUP_BLOCK',
-              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-              childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, oneLastBlockId)) !== null && _b !== void 0 ? _b : [],
-              childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, oneLastBlockId)) !== null && _c !== void 0 ? _c : []
-            }
-          }
-        });
-        return;
-      }
-      var newBulkBlockIds_1 = bulkBlockIds.filter(function (each) {
-        return each !== id;
-      });
-      var newBulkCBIds_1 = newBulkBlockIds_1.map(function (id) {
-        return (0, group_1.formatBlockIdToCbId)(id);
-      }).filter(function (each) {
-        return each !== null;
-      });
-      var childrenCBIds_1 = [];
-      if (newBulkCBIds_1.length === 0) {
-        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_1[0]);
-        childrenCBIds_1 = oneCB ? [oneCB] : [];
-      } else {
-        childrenCBIds_1 = newBulkCBIds_1;
-      }
-      setBulkBlockIds(newBulkBlockIds_1);
-      var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_1.length;
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            blockId: 'BULK',
-            type: 'BULK',
-            childrenBlockIds: newBulkBlockIds_1,
-            childrenCBIds: childrenCBIds_1,
-            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-          }
-        }
-      });
-      return;
-    }
-    if (shortcutKeyMode === 'BULK_SELECT') {
-      var added = function () {
-        if (selectedBlockId === editingGroupBlock) {
-          return [id];
-        }
-        return selectedBlockId ? [selectedBlockId, id] : [id];
-      }();
-      if (bulkBlockIds.length === 0 && added.length === 1) {
-        setSelectedBlockId(id);
-        setBulkBlockIds([]);
-        sectionActionHandler && sectionActionHandler({
-          type: '@CUSTOMSECTION/BLOCK_CLICKED',
-          payload: {
-            block: {
-              blockId: id,
-              type: 'GROUP_BLOCK',
-              workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-              childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, id)) !== null && _f !== void 0 ? _f : [],
-              childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, id)) !== null && _g !== void 0 ? _g : []
-            }
-          }
-        });
-        return;
-      }
-      var newBulkBlockIds_2 = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-      var newBulkCBIds_2 = newBulkBlockIds_2.map(function (id) {
-        return (0, group_1.formatBlockIdToCbId)(id);
-      }).filter(function (each) {
-        return each !== null;
-      });
-      setBulkBlockIds(newBulkBlockIds_2);
-      setSelectedBlockId(null);
-      var childrenCBIds_2 = [];
-      if (newBulkCBIds_2.length === 0) {
-        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
-        childrenCBIds_2 = oneCB ? [oneCB] : [];
-      } else {
-        childrenCBIds_2 = newBulkCBIds_2;
-      }
-      var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_2.length;
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-        payload: {
-          block: {
-            blockId: 'BULK',
-            type: 'BULK',
-            childrenBlockIds: newBulkBlockIds_2,
-            childrenCBIds: childrenCBIds_2,
-            workDir: (_h = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _h !== void 0 ? _h : 'NOT-FOUND',
-            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-          }
-        }
-      });
-      return;
-    }
-    setBulkBlockIds([]);
-    setSelectedBlockId(id);
-    var newBulkBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, id);
-    var newBulkCBIds = newBulkBlockIds.map(function (id) {
-      return (0, group_1.formatBlockIdToCbId)(id);
-    }).filter(function (each) {
-      return each !== null;
-    });
-    var childrenCBIds = [];
-    if (newBulkCBIds.length === 0) {
-      var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-      childrenCBIds = oneCB ? [oneCB] : [];
-    } else {
-      childrenCBIds = newBulkCBIds;
-    }
-    sectionActionHandler && sectionActionHandler({
-      type: '@CUSTOMSECTION/BLOCK_CLICKED',
-      payload: {
-        block: {
-          blockId: id,
-          type: 'GROUP_BLOCK',
-          workDir: (_j = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _j !== void 0 ? _j : 'NOT-FOUND',
-          childrenBlockIds: newBulkBlockIds,
-          childrenCBIds: childrenCBIds
-        }
-      }
-    });
-  };
-  var onBulkDragStop = function (_a) {
-    var _b;
-    var updatedItems = _a.updatedItems,
-      item = _a.item;
-    if ((item === null || item === void 0 ? void 0 : item.i) === 'BULK') {
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/BULK_DRAG_STOP',
-        payload: {
-          updatedBlocks: updatedItems.map(function (i) {
-            return {
-              cbId: Number(i.id),
-              blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-              x: i.x,
-              y: i.y
-            };
-          })
-        }
-      });
-      return;
-    }
-    if (item) {
-      sectionActionHandler && sectionActionHandler({
-        type: '@CUSTOMSECTION/GROUP_DRAG_STOP',
-        payload: {
-          workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, item.i)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-          updatedBlocks: updatedItems.map(function (i) {
-            return {
-              cbId: Number(i.id),
-              blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-              x: i.x,
-              y: i.y
-            };
-          })
-        }
-      });
-    }
-  };
-  (0, react_1.useLayoutEffect)(function () {
-    if (innerRef.current) {
-      innerRef.current.setAttribute('data-section-id', props.id.toString());
-    }
-  }, []);
-  function getWorkDirDirectChildrenLength() {
-    var ids = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock).filter(function (each) {
-      return each !== 'BULK';
-    });
-    return ids.length + bulkBlockIds.length;
-  }
-  var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
-  return (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, {
-    children: (0, jsx_runtime_1.jsxs)(gleStyles_1.S_gleStyles, __assign({
-      isBulkMode: shortcutKeyMode === 'BULK_SELECT'
-    }, {
-      children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({
-        ref: gleRef,
-        "x-dlayout-section-type": "NO_NAME",
-        onClick: onClickSection,
-        onContextMenu: function (e) {
-          e.stopPropagation();
-          e.preventDefault();
-          onContextSection(e);
-        }
-      }, {
-        children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, {
-          isMobile: isMobile,
-          overrideStyles: {
-            minHeight: customSectionStyles.minHeight,
-            paddingTop: padding.top,
-            paddingBottom: padding.bottom,
-            paddingRight: padding.right,
-            paddingLeft: padding.left
-          }
-        }, {
-          children: (0, jsx_runtime_1.jsx)(Responsive, __assign({
-            sectionId: props.id.toString(),
-            innerRef: innerRef,
-            className: (0, clsx_1.clsx)({
-              'selected-grid-layout': editingSectionId === props.id
-            }),
-            allowOverlap: true,
-            layouts: layouts,
-            resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'],
-            breakpoints: breakpoints,
-            breakpoint: breakpoint,
-            cols: {
-              lg: colsDesktop,
-              sm: colsMobile
-            },
-            rowHeight: rowHeight,
-            margin: [10, 10],
-            style: {
-              width: customSectionStyles.width,
-              maxWidth: customSectionStyles.maxWidth,
-              minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-              fontSize: "".concat(baseFontSize, "px")
-            },
-            onLayoutChange: onLayoutChange,
-            onDragStart: onDragStart,
-            onDragStop: onDragStop,
-            onResizeStop: onResizeStop,
-            onDragStopForGroup: onBulkDragStop,
-            onFitToContent: onAutoFitContent,
-            onWidthChange: onWidthChange,
-            minNbRow: rows,
-            isDraggable: isEditMode,
-            isResizable: isEditMode,
-            zoom: zoomScale,
-            // GROUP
-            selectedGroupBlock: (_d = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _d !== void 0 ? _d : '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.formatCbIdToBlockId)(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)({
-                  'react-grid-item-selected': selectedBlockId === (0, group_1.formatCbIdToBlockId)(matchedCB.id)
-                })
-              }, {
-                children: (0, jsx_runtime_1.jsx)("div", __assign({
-                  className: (0, clsx_1.clsx)({
-                    'grid-item-child': true
-                  }),
-                  style: {
-                    width: '100%',
-                    height: '100%'
-                  },
-                  onClick: function (e) {
-                    e.stopPropagation();
-                    if (isInBulk) {
-                      clickOneCBInBulk(matchedCB.id);
-                      return;
-                    }
-                    if (editingGroupBlock !== 'ROOT') {
-                      if (!editableCBIDs.includes(matchedCB.id)) {
-                        e.preventDefault();
-                        return;
-                      }
-                    }
-                    onClickCB(matchedCB.id);
-                  },
-                  onContextMenu: function (e) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    onContextMenuCB(matchedCB.id, e);
-                  }
-                }, {
-                  children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, {
-                    children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, {
-                      cbProps: matchedCB,
-                      device: device,
-                      rowHeight: rowHeight,
-                      index: index
-                    })
-                  })
-                }))
-              }), each.i);
-            })
-          }))
-        }))
-      }))]
-    }))
-  });
-});
-function isLayoutPlacementSame(current, prev) {
-  if (!prev) {
-    return false;
-  }
-  return prev.w === current.w && prev.h === current.h && prev.x === current.x && prev.y === current.y && prev.z === current.z && prev.i === current.i;
-}
-var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.default = react_1.default.memo(CustomSection);
-var templateObject_1;