pds-dev-kit-web 2.2.142 → 2.2.144

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js

@@ -81,9 +81,12 @@ var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (t
     var theme = _a.theme;
     return theme.ui_editor_preview_editing;
 });
-var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  position: relative;\n"], ["\n  height: ", ";\n  position: relative;\n"])), function (_a) {
+var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  position: relative;\n  z-index: ", ";\n"], ["\n  height: ", ";\n  position: relative;\n  z-index: ", ";\n"])), function (_a) {
     var isIframeSection = _a.isIframeSection;
     return (isIframeSection ? '100%' : 'auto');
+}, function (_a) {
+    var isEditing = _a.isEditing;
+    return (isEditing ? 3 : 1);
 });
 var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"], ["\n  align-items: center;\n  animation: ", ";\n  background-color: ", ";\n  bottom: 0;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  left: 0;\n\n  opacity: ", ";\n\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: opacity 0.2s ease-out;\n  z-index: 10;\n\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.6;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n"])), function (_a) {
     var fadeOut = _a.fadeOut;

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

@@ -27,12 +27,6 @@ function FlexGridItem(_a) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
     var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    // const zIndex =
-    //   device === 'DESKTOP'
-    //     ? cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX
-    //     : cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT[
-    //         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'
-    //       ];
     return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ "data-cb-id": cb.id, style: {
             zIndex: zIndex,
             gridArea: gridArea
@@ -51,24 +45,26 @@ function getMaxHeight(props, device, rowHeight) {
     var height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
     return height;
 }
+function clamp(num, min, max) {
+    return Math.max(Math.min(num, max), min);
+}
 function getGridAreaFromCB(props, device) {
     var CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX, CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY, cols = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS, rows = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
     if (device === 'DESKTOP') {
-        var colStart_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX + 1;
-        var rowStart_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY + 1;
-        var rowEnd_1 = rows + rowStart_1;
-        var colEnd_1 = cols + colStart_1;
-        // <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
+        var colStart_1 = clamp(CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX + 1, 1, Math.max(1, 25 - cols));
+        var rowStart_1 = clamp(CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY + 1, 1, Infinity);
+        var rowEnd_1 = clamp(rows + rowStart_1, rowStart_1 + 1, Infinity);
+        var colEnd_1 = clamp(colStart_1 + cols, colStart_1 + 1, 25);
         return "".concat(rowStart_1, " / ").concat(colStart_1, " / ").concat(rowEnd_1, " / ").concat(colEnd_1);
     }
     var startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'];
     var startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'];
     var colsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'];
     var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    var colStart = startXMobile + 1;
-    var rowStart = startYMobile + 1;
-    var rowEnd = rowsMobile + rowStart;
-    var colEnd = colsMobile + colStart;
+    var colStart = clamp(startXMobile + 1, 1, Math.max(1, 9 - colsMobile));
+    var rowStart = clamp(startYMobile + 1, 1, Infinity);
+    var rowEnd = clamp(rowsMobile + rowStart, rowStart + 1, Infinity);
+    var colEnd = clamp(colStart + colsMobile, colStart + 1, 9);
     return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
 }
 exports.default = FlexGridItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.142",
+  "version": "2.2.144",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.118",
+    "publ-echo": "^0.0.119",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.142]
+## [v2.2.144]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS_1282] Button CB가 alternative value를 사용하지 않음
+* [PDS-1284] 커스텀 섹션 렌더러에 clamp 기능 추가