pds-dev-kit-web-test 2.2.48 → 2.2.60

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

@@ -2,6 +2,7 @@ import React from 'react';
 type Props = {
     ani: string;
     children: React.ReactNode;
+    index: number;
 };
-declare function ComponentBlock({ ani, children }: Props): JSX.Element;
+declare function ComponentBlock({ ani, children, index }: Props): JSX.Element;
 export default ComponentBlock;

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

@@ -43,9 +43,9 @@ var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../hooks");
 function ComponentBlock(_a) {
-    var ani = _a.ani, children = _a.children;
+    var ani = _a.ani, children = _a.children, index = _a.index;
     var ref = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(ref, { threshold: 0 });
+    var entry = (0, hooks_1.useIntersectionObserver)(ref, { threshold: 0 }, [index]);
     var isInViewport = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     return ((0, jsx_runtime_1.jsx)(S_CBWrapper, { children: (0, jsx_runtime_1.jsx)(S_CBBox, __assign({ ref: ref, isInViewport: isInViewport, animationName: ani }, { children: children })) }));
 }

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

@@ -4,6 +4,7 @@ import type { Device } from '../../util/types';
 type Props = {
     cbProps: ComponentBlock;
     device: Device;
+    index: number;
 };
-export default function ComponentBlockMatcher({ cbProps, device }: 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

@@ -15,34 +15,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
 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 Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(_a) {
-    var cbProps = _a.cbProps, device = _a.device;
-    var componentBlockCode = cbProps.componentBlockCode, properties = cbProps.properties;
-    var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(properties) : properties;
+    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));
+            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));
+            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));
+            return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_DIVIDER:
-            return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, propsWithValue));
+            return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_IMG:
-            return (0, jsx_runtime_1.jsx)(Image_1.default, __assign({}, propsWithValue));
+            return (0, jsx_runtime_1.jsx)(Image_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_TWITTER:
-            return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, propsWithValue));
+            return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_YOUTUBE:
-            return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue));
+            return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_EMBED:
+            return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_BTN_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
-type Props = CB_BTN_PROPERTIES_TYPE;
+import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_BTN_PROPERTIES_TYPE & IndexForIntersection;
 declare function Button(props: Props): JSX.Element;
 export default Button;

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

@@ -40,7 +40,7 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Button(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, 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,
@@ -57,7 +57,9 @@ function Button(props) {
         propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'

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

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

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

@@ -49,14 +49,16 @@ var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function Divider(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'

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

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

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

@@ -0,0 +1,48 @@
+"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");
+var react_1 = require("react");
+var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
+var constant_1 = require("./constant");
+var EmbedIframe_1 = __importDefault(require("./EmbedIframe"));
+var IframeDenied_1 = __importDefault(require("./IframeDenied"));
+function Embed(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, index = props.index;
+    var CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE = props.CB_CONTENT_PROP_CODEBLOCK.CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
+    var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
+    var isNoneEffectType = device === 'DESKTOP'
+        ? 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 iframeDenied = constant_1.EMBED_DENIED_HOSTS.includes(window.location.hostname);
+    return ((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_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: iframeDenied ? ((0, jsx_runtime_1.jsx)(IframeDenied_1.default, {})) : ((0, jsx_runtime_1.jsx)(EmbedIframe_1.default, { embedCode: CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, style: layout })) })) })));
+}
+exports.default = Embed;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+interface EmbedCoreProps {
+    embedCode: string;
+    style: CSSProperties;
+}
+declare const EmbedIframe: React.FC<EmbedCoreProps>;
+export default EmbedIframe;

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

@@ -0,0 +1,45 @@
+"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 __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 styled_components_1 = __importDefault(require("styled-components"));
+var EmbedIframe = function (_a) {
+    var embedCode = _a.embedCode, style = _a.style;
+    var iframeRef = (0, react_1.useRef)(null);
+    var embedHtml = (0, react_1.useMemo)(function () {
+        return getHtmlCode(embedCode, style);
+    }, [embedCode, style]);
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        if (!iframeRef.current) {
+            return;
+        }
+        var iframeDoc = iframeRef.current.contentDocument || ((_a = iframeRef.current.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+        if (!iframeDoc || !embedHtml) {
+            return;
+        }
+        iframeDoc.open();
+        iframeDoc.write(embedHtml);
+        iframeDoc.close();
+    }, [embedHtml]);
+    return ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: "cb-embed", allow: "accelerometer; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; clipboard-write;", sandbox: "allow-forms allow-modals allow-same-origin allow-popups allow-presentation allow-scripts allow-downloads allow-pointer-lock" }));
+};
+var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"])));
+function getHtmlCode(code, style) {
+    var styleString = Object.entries(style).reduce(function (styleStr, _a) {
+        var prop = _a[0], value = _a[1];
+        var kebabProp = prop.replace(/([a-z0])([A-Z])/g, '$1-$2').toLowerCase();
+        return "".concat(styleStr).concat(kebabProp, ": ").concat(value, ";");
+    }, '');
+    var html = "\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <base href=\"https://example.com/\">\n        <meta charset=\"UTF-8\">\n        <style>\n            html, body {\n                margin: 0;\n                padding: 0;\n                width: 100%;\n                height: 100%;\n                ".concat(styleString, "\n            }\n\n            body > div { \n            flex-grow: 1;\n            width: 100%;\n          }\n        </style>\n    </head>\n    <body>\n        ").concat(code, "\n    </body>\n    </html>\n    ");
+    return html;
+}
+exports.default = EmbedIframe;
+var templateObject_1;

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

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

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

@@ -0,0 +1,21 @@
+"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 __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 react_i18next_1 = require("react-i18next");
+var components_1 = require("../../../../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function IframeDenied() {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsx)(S_Denied, { children: (0, jsx_runtime_1.jsx)(components_1.D_TextLabel, { text: t('str_key_user_scene_x00001pages_notconnectdomain_embedcb_hide_info'), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", textAlign: "center" }) }));
+}
+var S_Denied = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
+exports.default = IframeDenied;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export declare const EMBED_DENIED_HOSTS: string[];

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMBED_DENIED_HOSTS = void 0;
+exports.EMBED_DENIED_HOSTS = [
+    'app.publr.co',
+    'app.local.publr.co',
+    'app.dev.publr.co',
+    'app.qa.publr.co'
+];

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

@@ -0,0 +1,6 @@
+import type { DefaultBrightTheme } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+export type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
+export type CB_TWITTER_STYLE_PROPS = {
+    CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;
+    'CB_STYLE_PROP_TWITTER_SPEC_THEME:MOBILE': DefaultBrightTheme | undefined;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -53,7 +53,7 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Image(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, 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,
@@ -64,7 +64,9 @@ function Image(props) {
     var _e = parseImageCBStyle(style, hoverStyle, mode), boxStyle = _e.boxStyle, imgStyle = _e.imgStyle;
     var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_RICHTEXT_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
-type Props = CB_RICHTEXT_PROPERTIES_TYPE;
+import type { CB_RICHTEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_RICHTEXT_PROPERTIES_TYPE & IndexForIntersection;
 declare function RichText(props: Props): JSX.Element;
 export default RichText;

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

@@ -32,7 +32,7 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function RichText(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
     var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
@@ -40,7 +40,9 @@ function RichText(props) {
         propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'

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

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

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-console */
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
@@ -29,7 +30,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;
-    var _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 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,
@@ -45,7 +46,9 @@ function Text(props) {
         propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'
@@ -53,7 +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 } : {};
-    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 })) }))] }));
+    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, height: 'fit-content' }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', height: 'fit-content' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [

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

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

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

@@ -22,7 +22,7 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 function Twitter(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, index = props.index;
     var CB_CONTENT_PROP_TWITTER_SPEC_SRC = props.CB_CONTENT_PROP_TWITTER.CB_CONTENT_PROP_TWITTER_SPEC_SRC, CB_STYLE_PROP_TWITTER_SPEC_THEME = props.CB_STYLE_PROP_TWITTER.CB_STYLE_PROP_TWITTER_SPEC_THEME, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
     var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
     var userId = CB_CONTENT_PROP_TWITTER_SPEC_SRC.replace('https://twitter.com/', '');
@@ -37,7 +37,9 @@ function Twitter(props) {
         delete layout.justifyContent;
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { CB_YOUTUBE_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
-type Props = CB_YOUTUBE_PROPERTIES_TYPE;
+import type { CB_YOUTUBE_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_YOUTUBE_PROPERTIES_TYPE & IndexForIntersection;
 export type YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
 declare function Youtube(props: Props): JSX.Element;
 export default Youtube;

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

@@ -32,7 +32,7 @@ var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentPr
 var YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'VIEWPORT';
 function Youtube(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE, device, YOUTUBE_AUTOPLAY_TRIGGER_POINT), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id, cbAutoplayMode = _b.cbAutoplayMode;
     var isEditMode = mode === 'EDIT';
     var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
@@ -42,7 +42,9 @@ function Youtube(props) {
         propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
-    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     var isNoneEffectType = device === 'DESKTOP'
@@ -54,7 +56,7 @@ function Youtube(props) {
     var autoplayRef = (0, react_1.useRef)(null);
     var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
         freezeOnceVisible: YOUTUBE_AUTOPLAY_TRIGGER_POINT === 'VIEWPORT-FREEZE' ? true : false
-    });
+    }, [index]);
     var onLoadIframe = function () {
         var _a;
         if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {

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

@@ -19,3 +19,6 @@ export type CB_CONTENT_PROP_IMAGE = {
 export type CB_CONTENT_PROP_TWITTER = {
     CB_CONTENT_PROP_TWITTER_SPEC_SRC: STRING_PLAIN;
 };
+export type CB_CONTENT_PROP_CODEBLOCK = {
+    CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: STRING_PLAIN;
+};

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/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.useGroupDrag = void 0;
+var useGroupDrag_1 = require("./useGroupDrag");
+Object.defineProperty(exports, "useGroupDrag", { enumerable: true, get: function () { return __importDefault(useGroupDrag_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { LayoutItemWithGroupType } from './utils';
+import type { LayoutsType } from '../../CustomSection';
+import type { Device } from '../../util/types';
+import type { DynamicLayoutProps } from '../../../../../DynamicLayout/types';
+import type { Layout, LayoutItem } from 'publ-echo/dist/lib';
+type Props = {
+    device: Device;
+    setLayouts: React.Dispatch<React.SetStateAction<LayoutsType>>;
+    sectionActionHandler: DynamicLayoutProps['sectionActionHandler'];
+};
+declare function useGroupDrag({ device, setLayouts, sectionActionHandler }: Props): {
+    setGroupCB: (selectedId: number | 'group', newId: number) => void;
+    breakGroupCB: () => void;
+    makeAllInOneGroup: () => void;
+    escapeFromGroup: (id: string) => void;
+    makeCollisionGroup: (id: number, selectedCBId?: number) => void;
+    makeCollisionOfBulk: () => void;
+};
+export declare function getGroupCB(layout: Layout): LayoutItemWithGroupType | null;
+export declare const filterItemsById: (layout: Layout, idsToRemove: Array<string>) => LayoutItem[];
+export default useGroupDrag;