pds-dev-kit-web-test 2.3.8 → 2.3.10

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function NewCustomSection(): JSX.Element;
+export default NewCustomSection;

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

@@ -0,0 +1,70 @@
+"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 __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");
+require("publ-echo");
+var ReactGridLayout_1 = __importDefault(require("publ-echo/dist/lib/GridLayoutEditor/ReactGridLayout"));
+var react_1 = require("react");
+var react_measure_1 = __importDefault(require("react-measure"));
+var CustomSection_1 = require("./CustomSection");
+function NewCustomSection() {
+    var _a = (0, react_1.useState)([
+        {
+            i: 'a',
+            x: 0,
+            y: 0,
+            w: 3,
+            h: 6,
+            text: 'iam AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA AAAAAAAA',
+            autoSize: true
+        },
+        { i: 'b', x: 1, y: 0, w: 3, h: 2, text: 'iam BBBBBBBB' },
+        { i: 'c', x: 4, y: 0, w: 1, h: 2, text: 'iam CCCCCCCC' }
+    ]), layout = _a[0], setLayout = _a[1];
+    function onSizeChange(size, index) {
+        setLayout(function (prev) {
+            var copy = JSON.parse(JSON.stringify(prev));
+            // From formula pixelHeight = (rowHeight * h) + (marginH * (h - 1))
+            // h = (pixelHeight + marginH) / (marginH + rowHeight)
+            var newH = (size.height + 50) / (50 + 30);
+            copy[index].h = newH;
+            copy[index].minH = newH;
+            console.log('size changed so setLayout');
+            return copy;
+        });
+        // const placeholder = document.querySelector('.react-grid-placeholder')
+        // placeholder.height = 100;
+    }
+    return ((0, jsx_runtime_1.jsx)(CustomSection_1.S_gleStyles, __assign({ style: { backgroundColor: 'white' } }, { children: (0, jsx_runtime_1.jsx)(ReactGridLayout_1.default, __assign({ layout: layout, 
+            // onLayoutChange={onLayoutChange}
+            allowOverlap: true, margin: [50, 50], cols: 12, rowHeight: 30, width: 1200, resizeHandles: ['n', 'e', 'w', 'sw', 'se', 's', 'nw', 'ne'] }, { children: layout.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(MeasuredCB, { text: item.text, onSizeChange: function (size) { return onSizeChange(size, index); } }) }, item.i)); }) })) })));
+}
+var MeasuredCB = function (_a) {
+    var text = _a.text, onSizeChange = _a.onSizeChange;
+    var handleResize = function (contentRect) {
+        if (contentRect.bounds) {
+            onSizeChange({
+                width: contentRect.bounds.width,
+                height: contentRect.bounds.height
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_measure_1.default, __assign({ bounds: true, onResize: handleResize }, { children: function (_a) {
+            var measureRef = _a.measureRef;
+            return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: measureRef, contentEditable: true, style: { outline: 'none' } }, { children: text })));
+        } })));
+};
+exports.default = NewCustomSection;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.d.ts

@@ -5,6 +5,7 @@ type Props = {
     cbProps: ComponentBlock;
     device: Device;
     index: number;
+    id: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device, index }: Props): JSX.Element;
+export default function ComponentBlockMatcher({ cbProps, device, index, id }: Props): JSX.Element;
 export {};

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js

@@ -23,18 +23,18 @@ var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
-var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
+var Text_1 = require("./componentBlocks/Text");
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(_a) {
-    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
+    var cbProps = _a.cbProps, device = _a.device, index = _a.index, id = _a.id;
     var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
     var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
             return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_TEXT:
-            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
+            return (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({}, propsWithValue, { index: index, id: id }));
         case types_1.CB_ALL_CODES.CB_RICHTEXT:
             return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_DIVIDER:

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js

@@ -66,7 +66,7 @@ function Button(props) {
         ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
-    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 1 } : {};
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
                     paddingLeft: paddingLeft,
                     paddingRight: paddingRight,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import type { CB_TEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
-type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection;
+type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection & {
+    id: number;
+};
 declare function Text(props: Props): JSX.Element;
 export default Text;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -17,8 +17,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-console */
 /* eslint-disable react/destructuring-assignment */
+// eslint-disable-next-line import/no-extraneous-dependencies
+var lodash_1 = require("lodash");
 var react_1 = require("react");
+require("react-measure");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var customSectionContext_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/customSectionContext");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
@@ -30,6 +34,7 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    console.log(props.id);
     var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _c = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
@@ -56,7 +61,48 @@ function Text(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
+    var _f = (0, customSectionContext_1.useCustomSectionContext)(), setLayouts = _f.setLayouts, rowHeight = _f.rowHeight, sectionActionHandler = _f.sectionActionHandler;
+    var debouncedSectionActionHandler = (0, react_1.useCallback)((0, lodash_1.debounce)(function (payload) {
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/AUTO_RESIZED_TO_FIT_CONTENT',
+                payload: payload
+            });
+    }, 1000), []);
+    // const handleResize = (contentRect: ContentRect) => {
+    //   const breakpoint = device === 'DESKTOP' ? 'lg' : 'sm';
+    //   const scrollHeight = contentRect.scroll?.height;
+    //   const clientHeight = contentRect.client?.height;
+    //   if (!scrollHeight || !clientHeight) {
+    //     return;
+    //   }
+    //   if (clientHeight < scrollHeight) {
+    //     return;
+    //   }
+    //   const { id } = props;
+    //   // setLayouts((prev) => {
+    //   //   const copy: any = JSON.parse(JSON.stringify(prev));
+    //   //   const targetIndex = copy[breakpoint].findIndex((each: any) => each.i === id.toString());
+    //   //   const newH = Math.ceil((clientHeight + 10) / (10 + rowHeight));
+    //   //   copy[breakpoint][targetIndex].h = newH;
+    //   //   copy[breakpoint][targetIndex].minH = newH;
+    //   //   debouncedSectionActionHandler({
+    //   //     layout: copy[breakpoint],
+    //   //     cb: {
+    //   //       i: id,
+    //   //       h: newH,
+    //   //       w: copy[breakpoint][targetIndex].w,
+    //   //       x: copy[breakpoint][targetIndex].x,
+    //   //       y: copy[breakpoint][targetIndex].y
+    //   //     }
+    //   //   });
+    //   //   // console.log(copy[breakpoint][targetIndex]);
+    //   //   return copy;
+    //   // });
+    // };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { 
+                        // width: cbRef.current ? calculateCh(cbRef.current, '1rem') : '100%',
+                        width: '100%', whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [
@@ -71,4 +117,14 @@ function getTextStyles(props, device) {
     ];
     return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }
+function calculateCh(element, fontSize) {
+    var zero = document.createElement('span');
+    zero.innerText = '0';
+    zero.style.position = 'absolute';
+    zero.style.fontSize = fontSize;
+    element.appendChild(zero);
+    var chPixels = zero.getBoundingClientRect().width;
+    element.removeChild(zero);
+    return "".concat(320 / chPixels, "ch");
+}
 exports.default = Text;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/index.d.ts

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/index.js

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_Box.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S_CB_Box = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
+exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  /* font-size: calc(0.8rem + (2rem - 0.8rem) * ((100vw - 20rem) / (50rem - 20rem))); */\n  font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  /* font-size: calc(0.8rem + (2rem - 0.8rem) * ((100vw - 20rem) / (50rem - 20rem))); */\n  font-size: calc(0.8rem + 1.2 * ((100vw - 20rem) / 30));\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { boxShadow: '' }));
 }, function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/index.d.ts

@@ -1 +1 @@
-export { default as ComponentBlock } from './ComponentBlock';
+export { default as ComponentBlockMatcher } from './ComponentBlockMatcher';

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/index.js

@@ -3,6 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBlock = void 0;
-var ComponentBlock_1 = require("./ComponentBlock");
-Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return __importDefault(ComponentBlock_1).default; } });
+exports.ComponentBlockMatcher = void 0;
+var ComponentBlockMatcher_1 = require("./ComponentBlockMatcher");
+Object.defineProperty(exports, "ComponentBlockMatcher", { enumerable: true, get: function () { return __importDefault(ComponentBlockMatcher_1).default; } });

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

@@ -1 +1 @@
-export { ComponentBlock } from './ComponentBlock';
+export { ComponentBlockMatcher } from './ComponentBlock';

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

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBlock = void 0;
+exports.ComponentBlockMatcher = void 0;
 var ComponentBlock_1 = require("./ComponentBlock");
-Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlock; } });
+Object.defineProperty(exports, "ComponentBlockMatcher", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlockMatcher; } });

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { LayoutsType } from './CustomSection';
+import type { TypeOfSectionAction } from '../../../DynamicLayout/sectionActionTypes';
+export interface CustomSectionContext {
+    rowHeight: number;
+    setLayouts: React.Dispatch<React.SetStateAction<LayoutsType>>;
+    sectionActionHandler?: (action: TypeOfSectionAction) => void;
+}
+export declare const CustomSectionContext: React.Context<CustomSectionContext | undefined>;
+export declare function useCustomSectionContext(): CustomSectionContext;

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomSectionContext = exports.CustomSectionContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.CustomSectionContext = react_1.default.createContext(undefined);
+// export const CustomSectionContextProvider: React.FC = ({ children }) => {
+//   const [user, setUser] = React.useState<string>('');
+//   const value = { user, setUser };
+//   return <CustomSectionContext.Provider value={value}>{children}</CustomSectionContext.Provider>;
+// };
+function useCustomSectionContext() {
+    var context = react_1.default.useContext(exports.CustomSectionContext);
+    if (context === undefined) {
+        throw new Error('useCustomSectionContext must be used within an AppProvider');
+    }
+    return context;
+}
+exports.useCustomSectionContext = useCustomSectionContext;

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

@@ -208,5 +208,16 @@ function getEmFontSize(device, size) {
     if (device === 'DESKTOP') {
         return "".concat((size / 16).toFixed(3), "em");
     }
-    return "".concat((size / 16).toFixed(3), "em");
+    var value = clampBuilder(320, 960, 1, 3);
+    return value;
+    // return `${(size / 16).toFixed(3)}em`;
+}
+function clampBuilder(minWidthPx, maxWidthPx, minFontSize, maxFontSize) {
+    var root = document.querySelector('html');
+    var pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));
+    var minWidth = minWidthPx / pixelsPerRem;
+    var maxWidth = maxWidthPx / pixelsPerRem;
+    var slope = (maxFontSize - minFontSize) / (maxWidth - minWidth);
+    var yAxisIntersection = -minWidth * slope + minFontSize;
+    return "clamp( ".concat(minFontSize, "rem, ").concat(yAxisIntersection, "rem + ").concat(slope * 100, "vw, ").concat(maxFontSize, "rem )");
 }

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type ComponentBlock } from '../CustomSection/types';
+import type { Device } from '../CustomSection/util/types';
+type Props = {
+    cb: ComponentBlock;
+    index: number;
+    device: Device;
+    rowHeight: number;
+};
+declare function FlexGridItem({ cb, index, device, rowHeight }: Props): JSX.Element;
+export default FlexGridItem;

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

@@ -0,0 +1,69 @@
+"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 __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");
+require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../CustomSection/components");
+var types_1 = require("../CustomSection/types");
+var gap = 10;
+function FlexGridItem(_a) {
+    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight;
+    var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
+    var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
+    return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: {
+            gridArea: gridArea,
+            maxHeight: cb.componentBlockCode !== types_1.CB_ALL_CODES.CB_TEXT ? defaultHeight : undefined
+        } }, { children: (0, jsx_runtime_1.jsx)(components_1.ComponentBlockMatcher, { id: Number(cb.id), cbProps: cb, device: device, index: index }) })));
+}
+var S_CB = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid red;\n  /* max-height: fit-content; */\n  min-height: ", ";\n"], ["\n  border: 1px solid red;\n  /* max-height: fit-content; */\n  min-height: ", ";\n"])), function (props) { return "".concat(props.defaultHeight, "px"); });
+var GridItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  max-height: fit-content;\n  word-break: break-word;\n"], ["\n  height: auto;\n  max-height: fit-content;\n  word-break: break-word;\n"])));
+function getMaxHeight(props, device, rowHeight) {
+    if (device === 'DESKTOP') {
+        var CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
+        var height_1 = (CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS * rowHeight) + ((CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS - 1) * gap);
+        return height_1;
+    }
+    var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
+    var height = (rowsMobile * rowHeight) + ((rowsMobile - 1) * gap);
+    return height;
+}
+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>;
+        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;
+    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
+}
+exports.default = FlexGridItem;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/TempCustomSection/TempCustomSection.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ISection } from '../../../DynamicLayout/types';
+type Props = {
+    section: ISection;
+};
+declare function TempCustomSection({ section }: Props): JSX.Element;
+export default TempCustomSection;

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

@@ -0,0 +1,87 @@
+"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 __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 react_1 = require("react");
+var components_1 = require("../../../DynamicLayout/components");
+var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
+var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
+var styled_components_1 = __importDefault(require("styled-components"));
+var CustomSection_1 = require("../CustomSection/CustomSection");
+var customSectionContext_1 = require("../CustomSection/customSectionContext");
+var util_1 = require("../CustomSection/util");
+var parseSectionPadding_1 = __importDefault(require("../CustomSection/util/layoutPropParsers/parseSectionPadding"));
+var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
+var useResizableObserver_1 = require("./useResizableObserver");
+function TempCustomSection(_a) {
+    var _b;
+    var section = _a.section;
+    var _c = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _c.device, editingSectionId = _c.editingSectionId, mode = _c.mode, shortcutKeyMode = _c.shortcutKeyMode, sectionActionHandler = _c.sectionActionHandler;
+    var isMobile = device === 'MOBILE';
+    var ref = (0, react_1.useRef)(null);
+    var size = (0, useResizableObserver_1.useResizeObserver)({ ref: ref, box: 'border-box' });
+    if (!section.jsonProperties) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Error: No JsonProperties of section" });
+    }
+    var _d = section.jsonProperties.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING;
+    var sectionRow = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS;
+    var _e = (0, util_1.parseCustomSectionPlacement)({
+        isMobile: isMobile,
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), rows = _e.rows, width = _e.width, minHeight = _e.minHeight, isFullWidth = _e.isFullWidth;
+    var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, 'DESKTOP');
+    var customSectionStyles = {
+        minHeight: "".concat(minHeight, "vh"),
+        width: '100%',
+        maxWidth: isFullWidth ? '' : "".concat(width, "px")
+    };
+    var rowHeight = (function () {
+        if (!size.width) {
+            return 50;
+        }
+        // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
+        // const responsiveFontMode =
+        // !!CB_CONTENT_PROP_SECTION?.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE;
+        if (device === 'MOBILE') {
+            var cellWidth_1 = size.width / CustomSection_1.MOBILE_GRID_COLS;
+            // baseFontSize !== 16 && setBaseFontSize(16);
+            return cellWidth_1 * 0.56;
+        }
+        var cellWidth = size.width / CustomSection_1.DESKTOP_GRID_COLS;
+        return cellWidth * 0.56;
+        // responsiveFontMode ? setBaseFontSize(cellWidth / 2.35) : setBaseFontSize(16);
+    })();
+    return ((0, jsx_runtime_1.jsx)(S_SectionWrapper, { children: (0, jsx_runtime_1.jsx)(customSectionContext_1.CustomSectionContext.Provider, __assign({ value: { rowHeight: rowHeight, setLayouts: null, sectionActionHandler: null } }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, section, { overrideStyles: {
+                    minHeight: customSectionStyles.minHeight,
+                    paddingTop: padding.top,
+                    paddingBottom: padding.bottom,
+                    paddingRight: padding.right,
+                    paddingLeft: padding.left
+                } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: ref, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow, style: {
+                        width: customSectionStyles.width,
+                        maxWidth: customSectionStyles.maxWidth,
+                        minWidth: isMobile ? CustomSection_1.GLE_MIN_WIDTH_MOBILE_PX : CustomSection_1.GLE_MIN_WIDTH_DESKTOP_PX,
+                        fontSize: "16px"
+                    } }, { children: (_b = section.componentBlocks) === null || _b === void 0 ? void 0 : _b.map(function (cb, index) { return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight }) }, cb.id)); }) })) })) })) }));
+}
+var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var GridContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
+exports.default = TempCustomSection;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/TempCustomSection/useIsMounted.d.ts

@@ -0,0 +1 @@
+export declare function useIsMounted(): () => boolean;

package/dist/src/sub/DynamicLayout/sections/TempCustomSection/useIsMounted.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMounted = void 0;
+var react_1 = require("react");
+function useIsMounted() {
+    var isMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return (0, react_1.useCallback)(function () { return isMounted.current; }, []);
+}
+exports.useIsMounted = useIsMounted;

package/dist/src/sub/DynamicLayout/sections/TempCustomSection/useResizableObserver.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+type Size = {
+    width: number | undefined;
+    height: number | undefined;
+};
+type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+    ref: RefObject<T>;
+    onResize?: (size: Size) => void;
+    box?: 'border-box' | 'content-box' | 'device-pixel-content-box';
+};
+export declare function useResizeObserver<T extends HTMLElement = HTMLElement>(options: UseResizeObserverOptions<T>): Size;
+export {};

package/dist/src/sub/DynamicLayout/sections/TempCustomSection/useResizableObserver.js

@@ -0,0 +1,74 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeObserver = void 0;
+var react_1 = require("react");
+var useIsMounted_1 = require("./useIsMounted");
+var initialSize = {
+    width: undefined,
+    height: undefined
+};
+function useResizeObserver(options) {
+    var ref = options.ref, _a = options.box, box = _a === void 0 ? 'content-box' : _a;
+    var _b = (0, react_1.useState)(initialSize), _c = _b[0], width = _c.width, height = _c.height, setSize = _b[1];
+    var isMounted = (0, useIsMounted_1.useIsMounted)();
+    var previousSize = (0, react_1.useRef)(__assign({}, initialSize));
+    var onResize = (0, react_1.useRef)(undefined);
+    onResize.current = options.onResize;
+    (0, react_1.useEffect)(function () {
+        if (!ref.current)
+            return;
+        if (typeof window === 'undefined' || !('ResizeObserver' in window))
+            return;
+        var observer = new ResizeObserver(function (_a) {
+            var entry = _a[0];
+            var boxProp = box === 'border-box'
+                ? 'borderBoxSize'
+                : box === 'device-pixel-content-box'
+                    ? 'devicePixelContentBoxSize'
+                    : 'contentBoxSize';
+            var newWidth = extractSize(entry, boxProp, 'inlineSize');
+            var newHeight = extractSize(entry, boxProp, 'blockSize');
+            var hasChanged = previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
+            if (hasChanged) {
+                var newSize = { width: newWidth, height: newHeight };
+                previousSize.current.width = newWidth;
+                previousSize.current.height = newHeight;
+                if (onResize.current) {
+                    onResize.current(newSize);
+                }
+                else if (isMounted()) {
+                    setSize(newSize);
+                }
+            }
+        });
+        observer.observe(ref.current, { box: box });
+        return function () {
+            observer.disconnect();
+        };
+    }, [box, ref, isMounted]);
+    return { width: width, height: height };
+}
+exports.useResizeObserver = useResizeObserver;
+function extractSize(entry, box, sizeType) {
+    if (!entry[box]) {
+        if (box === 'contentBoxSize') {
+            return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
+        }
+        return undefined;
+    }
+    return Array.isArray(entry[box])
+        ? entry[box][0][sizeType]
+        : // @ts-ignore Support Firefox's non-standard behavior
+            entry[box][sizeType];
+}