pds-dev-kit-web 2.2.49 → 2.2.50

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,6 +15,7 @@ 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"));
@@ -25,24 +26,24 @@ 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 }));
         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/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'

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/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;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.js

@@ -0,0 +1,273 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterItemsById = exports.getGroupCB = void 0;
+// eslint-disable-next-line import/no-extraneous-dependencies
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
+var react_1 = require("react");
+var deepCopy_1 = __importDefault(require("../../../../../DynamicLayout/utils/deepCopy"));
+var utils_1 = require("./utils");
+function useGroupDrag(_a) {
+    var device = _a.device, setLayouts = _a.setLayouts, sectionActionHandler = _a.sectionActionHandler;
+    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    function makeAllInOneGroup() {
+        setLayouts(function (prev) {
+            var _a, _b;
+            var _c;
+            // TODO: 임시용 카피
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            if (currentLayoutCopy.length === 0) {
+                return prev;
+            }
+            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            // NOTE: 그룹이 없는 경우
+            if (groupIdx < 0) {
+                var group_1 = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
+                sectionActionHandler &&
+                    sectionActionHandler({
+                        type: '@CUSTOMSECTION/GROUP_CREATED',
+                        payload: {
+                            message: 'group generated',
+                            data: group_1
+                        }
+                    });
+                return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = [group_1], _a));
+            }
+            // NOTE: 그룹이 이미 있는경우
+            var groupItem = currentLayoutCopy.splice(groupIdx, 1)[0];
+            if (!groupItem.groupLayouts) {
+                return prev;
+            }
+            var groupItems = (_c = groupItem.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
+            currentLayoutCopy.push.apply(currentLayoutCopy, groupItems);
+            var group = (0, utils_1.getGroupForMultiple)(currentLayoutCopy);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_CREATED',
+                    payload: {
+                        message: 'group generated',
+                        data: group
+                    }
+                });
+            return __assign(__assign({}, prev), (_b = {}, _b[layoutByDevice] = [group], _b));
+        });
+    }
+    function escapeFromGroup(id) {
+        setLayouts(function (prev) {
+            var _a;
+            // TODO: 임시용 카피
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            var group = currentLayoutCopy[groupIdx];
+            if (!group || !group.groupLayouts) {
+                return prev;
+            }
+            var escapeIndex = group.groupLayouts.findIndex(function (each) { return each.i === id; });
+            if (escapeIndex < 0) {
+                return prev;
+            }
+            var escapedItem = group.groupLayouts.splice(escapeIndex, 1)[0];
+            escapedItem.x += group.x;
+            escapedItem.y += group.y;
+            currentLayoutCopy.push(escapedItem);
+            var newGroup = (0, utils_1.recalculatedGroup)(group);
+            currentLayoutCopy.splice(groupIdx, 1, newGroup);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/ESCAPE_ONE_FROM_GROUP',
+                    payload: {
+                        id: id
+                    }
+                });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
+        });
+    }
+    function setGroupCB(selectedId, newId) {
+        setLayouts(function (prev) {
+            var _a;
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var firstIdx = currentLayoutCopy.findIndex(function (item) {
+                if (selectedId === 'group') {
+                    return item.i === 'group';
+                }
+                if (Number(item.i) === selectedId) {
+                    return true;
+                }
+                return false;
+            });
+            var firstElem = currentLayoutCopy.splice(firstIdx, 1)[0];
+            var secondIdx = currentLayoutCopy.findIndex(function (item) { return Number(item.i) === newId; });
+            var secondElem = currentLayoutCopy.splice(secondIdx, 1)[0];
+            var group = (0, utils_1.getGroupData)(firstElem, secondElem);
+            currentLayoutCopy.unshift(group);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_CREATED',
+                    payload: {
+                        message: 'group generated',
+                        data: group
+                    }
+                });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
+        });
+    }
+    var breakGroupCB = (0, react_1.useCallback)(function () {
+        setLayouts(function (prev) {
+            var _a;
+            var _b;
+            // TODO: 임시용 카피
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var groupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            if (groupIdx < 0) {
+                return prev;
+            }
+            var groupItem = currentLayoutCopy.splice(groupIdx, 1)[0];
+            if (!groupItem.groupLayouts) {
+                return prev;
+            }
+            var groupItems = (_b = groupItem.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _b !== void 0 ? _b : [];
+            currentLayoutCopy.push.apply(currentLayoutCopy, groupItems);
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
+        });
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/GROUP_DISMISSED',
+                payload: {
+                    message: 'group dismissed'
+                }
+            });
+    }, []);
+    function makeCollisionGroup(id, selectedCBId) {
+        setLayouts(function (prev) {
+            var _a, _b;
+            var _c, _d;
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var additionalSelectedCBLayout = (function () {
+                if (selectedCBId === undefined) {
+                    return null;
+                }
+                if (id === selectedCBId) {
+                    return null;
+                }
+                return (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, selectedCBId.toString());
+            })();
+            var layout = (0, renderHelpers_1.getLayoutItem)(currentLayoutCopy, id.toString());
+            if (!layout) {
+                return prev;
+            }
+            var prevGroupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            if (prevGroupIdx < 0) {
+                var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
+                var groupLayouts = __spreadArray([layout], collisions, true);
+                if (collisions.length === 0 && !additionalSelectedCBLayout) {
+                    sectionActionHandler &&
+                        sectionActionHandler({
+                            type: '@CUSTOMSECTION/COLLISION_NOT_FOUND',
+                            payload: {
+                                message: '겹치는 부분이 없어, 아무련 변화가 없습니다.'
+                            }
+                        });
+                    return prev;
+                }
+                if (additionalSelectedCBLayout) {
+                    var alreadyHas = collisions.some(function (each) { return each.i === additionalSelectedCBLayout.i; });
+                    !alreadyHas && groupLayouts.push(additionalSelectedCBLayout);
+                }
+                var group_2 = (0, utils_1.getGroupForMultiple)(groupLayouts);
+                var filtered = currentLayoutCopy.filter(function (layout) { return !group_2.childrenIds.includes(layout.i); });
+                sectionActionHandler &&
+                    sectionActionHandler({
+                        type: '@CUSTOMSECTION/GROUP_CREATED',
+                        payload: {
+                            message: 'group generated with collision detect',
+                            data: group_2
+                        }
+                    });
+                return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([group_2], filtered, true), _a));
+            }
+            var groupItem = currentLayoutCopy.splice(prevGroupIdx, 1)[0];
+            if (groupItem) {
+                var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, layout);
+                var groupItems = (_d = (_c = groupItem.groupLayouts) === null || _c === void 0 ? void 0 : _c.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _d !== void 0 ? _d : [];
+                var newGroup_1 = (0, utils_1.getGroupForMultiple)([layout].concat(collisions).concat(groupItems));
+                var filtered = currentLayoutCopy.filter(function (layout) { return !newGroup_1.childrenIds.includes(layout.i); });
+                sectionActionHandler &&
+                    sectionActionHandler({
+                        type: '@CUSTOMSECTION/GROUP_CREATED',
+                        payload: {
+                            message: 'group generated with collision detect',
+                            data: newGroup_1
+                        }
+                    });
+                return __assign(__assign({}, prev), (_b = {}, _b[layoutByDevice] = __spreadArray([newGroup_1], filtered, true), _b));
+            }
+            return prev;
+        });
+    }
+    function makeCollisionOfBulk() {
+        setLayouts(function (prev) {
+            var _a;
+            var _b, _c;
+            var currentLayoutCopy = (0, deepCopy_1.default)(prev[layoutByDevice]);
+            var prevGroupIdx = currentLayoutCopy.findIndex(function (item) { return item.i === 'group'; });
+            var groupItem = currentLayoutCopy.splice(prevGroupIdx, 1)[0];
+            var collisions = (0, renderHelpers_1.getAllCollisions)(currentLayoutCopy, groupItem);
+            var groupItems = (_c = (_b = groupItem.groupLayouts) === null || _b === void 0 ? void 0 : _b.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _c !== void 0 ? _c : [];
+            var newGroup = (0, utils_1.getGroupForMultiple)(groupItems.concat(collisions));
+            var filtered = currentLayoutCopy.filter(function (layout) { return !newGroup.childrenIds.includes(layout.i); });
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_CREATED',
+                    payload: {
+                        message: 'group generated with collision detect',
+                        data: newGroup
+                    }
+                });
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = __spreadArray([newGroup], filtered, true), _a));
+        });
+    }
+    return {
+        setGroupCB: setGroupCB,
+        breakGroupCB: breakGroupCB,
+        makeAllInOneGroup: makeAllInOneGroup,
+        escapeFromGroup: escapeFromGroup,
+        makeCollisionGroup: makeCollisionGroup,
+        makeCollisionOfBulk: makeCollisionOfBulk
+    };
+}
+function getGroupCB(layout) {
+    var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
+    if (groupIdx < 0) {
+        return null;
+    }
+    var groupItem = layout[groupIdx];
+    return groupItem;
+}
+exports.getGroupCB = getGroupCB;
+var filterItemsById = function (layout, idsToRemove) {
+    return layout.filter(function (item) { return !idsToRemove.includes(item.i); });
+};
+exports.filterItemsById = filterItemsById;
+exports.default = useGroupDrag;

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

@@ -0,0 +1,13 @@
+import type { ComponentBlock } from '../../types';
+import type { LayoutItem } from 'publ-echo/dist/lib';
+export interface LayoutItemWithGroupType extends LayoutItem {
+    childrenIds: string[];
+    keepInLastIndex?: boolean;
+}
+export declare function getGroupData(elem1: LayoutItemWithGroupType, elem2: LayoutItemWithGroupType): LayoutItemWithGroupType;
+export declare function recalculatedGroup(group: LayoutItemWithGroupType): LayoutItemWithGroupType;
+export declare function getGroupForMultiple(elems: LayoutItem[]): LayoutItemWithGroupType;
+export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBlock[], groupIds: string[]): {
+    inGroup: ComponentBlock[];
+    notInGroup: ComponentBlock[];
+};