pds-dev-kit-web-test 2.2.96 → 2.2.99

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

@@ -5,7 +5,7 @@ type Props = {
     cbProps: ComponentBlock;
     device: Device;
     index: number;
-    rootBaseFontSize: number;
+    id: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device, index, rootBaseFontSize }: 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, rootBaseFontSize = _a.rootBaseFontSize;
+    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, rootBaseFontSize: rootBaseFontSize })));
+            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

@@ -85,12 +85,7 @@ function getBTNStyles(props, device) {
         'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL',
         'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL'
     ];
-    return (0, newUtils_1.parseStyleTextToCSSProp)({
-        availableSpecCodes: availableSpecCodes,
-        props: props,
-        device: device,
-        propKey: 'BTNTEXT'
-    });
+    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'BTNTEXT' });
 }
 function getBTNColorStyles(props, device) {
     var availableSpecCodes = [

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { CB_TEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
 type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection & {
-    rootBaseFontSize: number;
+    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

@@ -1,8 +1,4 @@
 "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++) {
@@ -21,9 +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");
+var react_measure_1 = __importDefault(require("react-measure"));
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var styled_components_1 = __importDefault(require("styled-components"));
+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"));
@@ -33,10 +32,9 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
-var useMaxFontAdjustment_1 = __importDefault(require("./useMaxFontAdjustment"));
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    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, rootBaseFontSize = props.rootBaseFontSize;
+    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,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
@@ -62,19 +60,46 @@ 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 } : {};
-    var textBoxRef = (0, react_1.useRef)(null);
-    var baseFontSize = (0, useMaxFontAdjustment_1.default)(textBoxRef, textStyle.fontSize, mode, device, rootBaseFontSize);
-    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: { fontSize: rootBaseFontSize < 16 ? "".concat(baseFontSize, "px") : "".concat(rootBaseFontSize, "px") } }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ ref: textBoxRef, className: "cb-layout-box cb-text-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), effectCssProperties), layoutStyle), { cursor: CLINKCursor, paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_TextContent, __assign({ className: "cb-text-content", style: {
-                            whiteSpace: 'pre-wrap',
-                            wordBreak: 'break-word',
-                            height: 'fit-content',
-                            paddingTop: layoutStyle.paddingTop,
-                            paddingBottom: layoutStyle.paddingBottom,
-                            paddingLeft: layoutStyle.paddingLeft,
-                            paddingRight: layoutStyle.paddingRight
-                        } }, { 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) {
+        console.log('called');
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/AUTO_RESIZED_TO_FIT_CONTENT',
+                payload: payload
+            });
+    }, 1000), [sectionActionHandler]);
+    var handleResize = function (contentRect) {
+        var breakpoint = device === 'DESKTOP' ? 'lg' : 'sm';
+        if (!contentRect.bounds) {
+            return;
+        }
+        var height = contentRect.bounds.height;
+        var id = props.id;
+        setLayouts(function (prev) {
+            var copy = JSON.parse(JSON.stringify(prev));
+            var targetIndex = copy[breakpoint].findIndex(function (each) { return each.i === id.toString(); });
+            var newH = Math.ceil((height + 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
+                }
+            });
+            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)(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 }, { 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 S_TextContent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  all: inherit;\n"], ["\n  all: inherit;\n"])));
 function getTextStyles(props, device) {
     var availableSpecCodes = [
         'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
@@ -86,12 +111,6 @@ function getTextStyles(props, device) {
         'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL',
         'CB_STYLE_PROP_TEXT_SPEC_VERTICAL'
     ];
-    return (0, textUtil_1.parseStyleTextToCSSProp)({
-        availableSpecCodes: availableSpecCodes,
-        props: props,
-        device: device,
-        propKey: 'TEXT'
-    });
+    return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }
 exports.default = Text;
-var templateObject_1;

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_AnimationObserverBox.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 type Props = {
     effectVisibleStyle: React.CSSProperties;
-    normalStyle?: React.CSSProperties;
-    hoverStyle?: React.CSSProperties;
 };
 export declare const S_CB_AnimationObserverBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
 export {};

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

@@ -14,40 +14,14 @@ var __assign = (this && this.__assign) || function () {
     };
     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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S_CB_AnimationObserverBox = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-exports.S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n"], ["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n"])), function (_a) {
     var effectVisibleStyle = _a.effectVisibleStyle;
     return effectVisibleStyle && __assign({}, effectVisibleStyle);
-}, 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) {
-    var hoverStyle = _a.hoverStyle;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { boxShadow: '' }));
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1;

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

@@ -7,9 +7,6 @@ export type StylesProps = {
 export type CB_CONTENT_PROP_TEXT = {
     CB_CONTENT_PROP_TEXT_SPEC_TEXT: STRING_PLAIN;
 };
-export type CB_CONTENT_PROP_TEXTOPTION = {
-    CB_CONTENT_PROP_TEXTOPTION_SPEC_FITCONTENT: boolean;
-};
 export type CB_CONTENT_PROP_CLINK = {
     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'INTERNAL' | 'EXTERNAL' | 'DISABLED';
     CB_CONTENT_PROP_CLINK_SPEC_SRC: STRING_PLAIN;

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

@@ -66,14 +66,14 @@ function parseStyleTextToCSSProp(_a) {
         }
         if (cssPropertyKey === 'fontSize') {
             if (hoverValue === null || hoverValue === undefined) {
-                var emValue_1 = getFontSize(device, value);
+                var emValue_1 = getEmFontSize(device, value);
                 return {
                     style: __assign(__assign({}, acc.style), (_k = {}, _k[cssPropertyKey] = emValue_1, _k)),
                     hoverStyle: __assign({}, acc.hoverStyle)
                 };
             }
-            var emValue = getFontSize(device, value);
-            var hoverEmValue = getFontSize(device, hoverValue);
+            var emValue = getEmFontSize(device, value);
+            var hoverEmValue = getEmFontSize(device, hoverValue);
             return {
                 style: __assign(__assign({}, acc.style), (_l = {}, _l[cssPropertyKey] = emValue, _l)),
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), (_m = {}, _m[cssPropertyKey] = hoverEmValue, _m))
@@ -204,6 +204,9 @@ function getVerticalPositionValue(value) {
             return '';
     }
 }
-function getFontSize(device, size) {
+function getEmFontSize(device, size) {
+    if (device === 'DESKTOP') {
+        return "".concat((size / 16).toFixed(3), "em");
+    }
     return "".concat((size / 16).toFixed(3), "em");
 }

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentBlock } from '../types';
+import type { ComponentBlock } from '../types';
 export declare function parsePlacement(components: ComponentBlock[]): {
     sm: {
         i: string;
@@ -7,7 +7,6 @@ export declare function parsePlacement(components: ComponentBlock[]): {
         w: number;
         h: number;
         z: number;
-        activeAutoResize: boolean;
     }[];
     lg: {
         i: string;
@@ -16,7 +15,6 @@ export declare function parsePlacement(components: ComponentBlock[]): {
         w: number;
         h: number;
         z: number;
-        activeAutoResize: boolean;
     }[];
 };
 export default parsePlacement;

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

@@ -10,20 +10,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePlacement = void 0;
-var types_1 = require("../types");
 function parsePlacement(components) {
     return components.reduce(function (acc, cur) {
-        var _a;
-        var id = cur.id, jsonProperties = cur.jsonProperties, componentBlockCode = cur.componentBlockCode;
-        var activeAutoResize = false;
-        // NOTE: 임시
-        if (componentBlockCode === types_1.CB_ALL_CODES.CB_TEXT) {
-            activeAutoResize = true;
-        }
-        if (componentBlockCode === types_1.CB_ALL_CODES.CB_TEXT && ((_a = jsonProperties.data.CB_CONTENT_PROP_TEXTOPTION) === null || _a === void 0 ? void 0 : _a.CB_CONTENT_PROP_TEXTOPTION_SPEC_FITCONTENT)) {
-            activeAutoResize = true;
-        }
-        var _b = parsePropPlacement(id, jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, activeAutoResize), mobileLayout = _b.mobileLayout, desktopLayout = _b.desktopLayout;
+        var id = cur.id, jsonProperties = cur.jsonProperties;
+        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
         return {
             sm: __spreadArray(__spreadArray([], acc.sm, true), [mobileLayout], false),
             lg: __spreadArray(__spreadArray([], acc.lg, true), [desktopLayout], false)
@@ -31,24 +21,22 @@ function parsePlacement(components) {
     }, { sm: [], lg: [] });
 }
 exports.parsePlacement = parsePlacement;
-function parsePropPlacement(id, placementProps, activeAutoResize) {
+function parsePropPlacement(props, id) {
     var desktopLayout = {
         i: id.toString(),
-        x: placementProps.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX,
-        y: placementProps.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY,
-        w: placementProps.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS,
-        h: placementProps.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS,
-        z: placementProps.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX + 500,
-        activeAutoResize: activeAutoResize
+        x: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX,
+        y: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY,
+        w: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS,
+        h: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS,
+        z: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX + 500
     };
     var mobileLayout = {
         i: id.toString(),
-        x: placementProps['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'],
-        y: placementProps['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'],
-        w: placementProps['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'],
-        h: placementProps['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'],
-        z: placementProps['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'] + 500,
-        activeAutoResize: activeAutoResize
+        x: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'],
+        y: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'],
+        w: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'],
+        h: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'],
+        z: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'] + 500
     };
     return {
         mobileLayout: mobileLayout,

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -1,7 +1,7 @@
 import type { CB_BTNTEXT_STYLE_PROPS, CB_STYLE_PROP_BTNCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
 import type { CB_STYLE_PROP_TEXT_SPECS } from '../components/ComponentBlock/componentBlocks/Text/types';
 import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
-import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXTOPTION, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
 import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
 import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
 import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
@@ -41,7 +41,6 @@ export type CB_TEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
     CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
     CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
-    CB_CONTENT_PROP_TEXTOPTION: CB_CONTENT_PROP_TEXTOPTION;
     CB_STYLE_PROP_TEXT: CB_STYLE_PROP_TEXT_SPECS;
     CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
     CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.2.96",
+  "version": "2.2.99",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,9 +22,10 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.83",
+    "publ-echo": "^0.0.45",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
+    "react-measure": "^2.5.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "smoothscroll-polyfill": "^0.4.4",
@@ -85,6 +86,8 @@
     "@storybook/react": "^6.3.12",
     "@types/lodash": "^4.14.175",
     "@types/node": "^16.10.2",
+    "@types/react-grid-layout": "^1.3.5",
+    "@types/react-measure": "^2.0.12",
     "@types/react-router-dom": "^5.3.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/styled-components": "^5.1.9",

package/release-note.md

@@ -1,6 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.60]
+## [v2.2.66]
 ## daily|https://design.storybook.publ.biz/
 
-### DynamicLayout
-* CustomSection - Fix cb_embed 사용할 수 없는 호스트 추가
+### sub
+* LayoutWS > Containers
+    * WSJ_1 추가

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

@@ -1,5 +0,0 @@
-import { RefObject } from 'react';
-import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
-import type { DynamicLayoutProps } from '../../../../../../../DynamicLayout/types';
-declare const useMaxFontAdjustment: (ref: RefObject<HTMLDivElement>, cbFontSize: string, mode: DynamicLayoutProps['mode'], device: Device, rootBaseFontSize: number) => number;
-export default useMaxFontAdjustment;

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

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var DEFAULT_BASE_FONT = 16;
-var useMaxFontAdjustment = function (ref, cbFontSize, mode, device, rootBaseFontSize) {
-    var _a = (0, react_1.useState)(DEFAULT_BASE_FONT), fontSize = _a[0], setFontSize = _a[1];
-    var ogRef = (0, react_1.useRef)(0);
-    (0, react_1.useEffect)(function () {
-        if (device === 'DESKTOP') {
-            return;
-        }
-        if (mode !== 'PREVIEW') {
-            return;
-        }
-        if (!ref.current) {
-            return;
-        }
-        if (rootBaseFontSize >= 16) {
-            return;
-        }
-        var resizeObserver = new ResizeObserver(function (callback) {
-            var object = callback[0];
-            var height = object.target.clientHeight;
-            var contentHeight = object.target.children[0].clientHeight;
-            var minFontSize = parseEmToNumber(cbFontSize) * 0.6;
-            if (fontSize === 16) {
-                var percent = (contentHeight / contentHeight) * 100;
-                ogRef.current = percent;
-            }
-            var p = (contentHeight / height) * 100;
-            var isOverflow = contentHeight > height;
-            var hasContentGap = p > ogRef.current;
-            var isNextMin = fontSize <= minFontSize;
-            if (isNextMin) {
-                return;
-            }
-            if (isOverflow || hasContentGap) {
-                setFontSize(function (prev) { return Number((prev - 0.3).toFixed(3)); });
-            }
-        });
-        resizeObserver.observe(ref.current);
-        return function () {
-            resizeObserver.disconnect();
-        };
-    }, [fontSize, mode, device, rootBaseFontSize]);
-    (0, react_1.useEffect)(function () {
-        return function () {
-            ogRef.current = 0;
-        };
-    }, []);
-    return fontSize;
-};
-exports.default = useMaxFontAdjustment;
-function parseEmToNumber(value) {
-    var numericPart = value.replace('em', '').trim();
-    var result = parseFloat(numericPart);
-    if (isNaN(result)) {
-        return 0;
-    }
-    return result;
-}