pds-dev-kit-web-test 2.3.11 → 2.3.13

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

@@ -5,7 +5,6 @@ type Props = {
     cbProps: ComponentBlock;
     device: Device;
     index: number;
-    id: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device, index, id }: Props): JSX.Element;
+export default function ComponentBlockMatcher({ cbProps, device, index }: 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 = require("./componentBlocks/Text");
+var Text_1 = __importDefault(require("./componentBlocks/Text/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, id = _a.id;
+    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
     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.Text, __assign({}, propsWithValue, { index: index, id: id }));
+            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
         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 : 1 } : {};
+    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, style: {
                     paddingLeft: paddingLeft,
                     paddingRight: paddingRight,

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

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

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

@@ -17,12 +17,8 @@ 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"));
@@ -34,7 +30,6 @@ 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,
@@ -61,48 +56,7 @@ 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 _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 })) }))] }));
+    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 })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [
@@ -117,14 +71,4 @@ 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/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  /* 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) {
+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) {
     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 ComponentBlockMatcher } from './ComponentBlockMatcher';
+export { default as ComponentBlock } from './ComponentBlock';

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.ComponentBlockMatcher = void 0;
-var ComponentBlockMatcher_1 = require("./ComponentBlockMatcher");
-Object.defineProperty(exports, "ComponentBlockMatcher", { enumerable: true, get: function () { return __importDefault(ComponentBlockMatcher_1).default; } });
+exports.ComponentBlock = void 0;
+var ComponentBlock_1 = require("./ComponentBlock");
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return __importDefault(ComponentBlock_1).default; } });

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

@@ -1 +1 @@
-export { ComponentBlockMatcher } from './ComponentBlock';
+export { ComponentBlock } 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.ComponentBlockMatcher = void 0;
+exports.ComponentBlock = void 0;
 var ComponentBlock_1 = require("./ComponentBlock");
-Object.defineProperty(exports, "ComponentBlockMatcher", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlockMatcher; } });
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlock; } });

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

@@ -208,16 +208,5 @@ function getEmFontSize(device, size) {
     if (device === 'DESKTOP') {
         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 )");
+    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;
-        fitToContent: boolean;
     }[];
     lg: {
         i: string;
@@ -16,7 +15,6 @@ export declare function parsePlacement(components: ComponentBlock[]): {
         w: number;
         h: number;
         z: number;
-        fitToContent: boolean;
     }[];
 };
 export default parsePlacement;

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

@@ -10,11 +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 id = cur.id, jsonProperties = cur.jsonProperties;
-        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id, cur.componentBlockCode === types_1.CB_ALL_CODES.CB_TEXT), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
+        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)
@@ -22,15 +21,14 @@ function parsePlacement(components) {
     }, { sm: [], lg: [] });
 }
 exports.parsePlacement = parsePlacement;
-function parsePropPlacement(props, id, fitToContent) {
+function parsePropPlacement(props, id) {
     var desktopLayout = {
         i: id.toString(),
         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,
-        fitToContent: fitToContent
+        z: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX + 500
     };
     var mobileLayout = {
         i: id.toString(),
@@ -38,8 +36,7 @@ function parsePropPlacement(props, id, fitToContent) {
         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,
-        fitToContent: fitToContent
+        z: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'] + 500
     };
     return {
         mobileLayout: mobileLayout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.3.11",
+  "version": "2.3.13",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,10 +22,9 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.84",
+    "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",
@@ -86,8 +85,6 @@
     "@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",