pds-dev-kit-web-test 2.5.682 → 2.5.683

package/dist/src/sub/AdminList/AdminList/AdminList.d.ts

@@ -7,21 +7,30 @@ type Props = {
     selectionMode?: 'none' | 'single' | 'multi';
     headerRowMode?: 'none' | 'use';
     column2HeaderText: PDSTextType;
+    column2HeaderTooltipText?: PDSTextType;
     column3HeaderText?: PDSTextType;
+    column3HeaderTooltipText?: PDSTextType;
     column3Width?: ColumnWidthType;
     column4HeaderText?: PDSTextType;
+    column4HeaderTooltipText?: PDSTextType;
     column4Width?: ColumnWidthType;
     column5HeaderText?: PDSTextType;
+    column5HeaderTooltipText?: PDSTextType;
     column5Width?: ColumnWidthType;
     column6HeaderText?: PDSTextType;
+    column6HeaderTooltipText?: PDSTextType;
     column6Width?: ColumnWidthType;
     column7HeaderText?: PDSTextType;
+    column7HeaderTooltipText?: PDSTextType;
     column7Width?: ColumnWidthType;
     column8HeaderText?: PDSTextType;
+    column8HeaderTooltipText?: PDSTextType;
     column8Width?: ColumnWidthType;
     column9HeaderText?: PDSTextType;
+    column9HeaderTooltipText?: PDSTextType;
     column9Width?: ColumnWidthType;
     column10HeaderText?: PDSTextType;
+    column10HeaderTooltipText?: PDSTextType;
     column10Width?: ColumnWidthType;
     quickActionBtnMode?: 'none' | 'btn_amount1' | 'btn_amount2' | 'btn_amount3';
     quickActionBtn1Text?: PDSTextType;
@@ -43,5 +52,5 @@ type Props = {
     selectedIds?: number[];
     maintainIds?: number[];
 };
-declare function AdminList({ toolBar, bulkActionBar, selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, headerRowCheckboxName, flexibleHideInfoMode, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect }: Props): JSX.Element;
+declare function AdminList({ toolBar, bulkActionBar, selectionMode, headerRowMode, column2HeaderText, column2HeaderTooltipText, column3HeaderText, column3HeaderTooltipText, column3Width, column4HeaderText, column4HeaderTooltipText, column4Width, column5HeaderText, column5HeaderTooltipText, column5Width, column6HeaderText, column6HeaderTooltipText, column6Width, column7HeaderText, column7HeaderTooltipText, column7Width, column8HeaderText, column8HeaderTooltipText, column8Width, column9HeaderText, column9HeaderTooltipText, column9Width, column10HeaderText, column10HeaderTooltipText, column10Width, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, headerRowCheckboxName, flexibleHideInfoMode, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect }: Props): JSX.Element;
 export default AdminList;

package/dist/src/sub/AdminList/AdminList/AdminList.js

@@ -58,7 +58,7 @@ var components_2 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var HeaderRow_1 = __importDefault(require("./HeaderRow"));
 function AdminList(_a) {
-    var toolBar = _a.toolBar, bulkActionBar = _a.bulkActionBar, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.quickActionBtnMode, quickActionBtnMode = _m === void 0 ? 'btn_amount2' : _m, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _o = _a.quickActionBtnType, quickActionBtnType = _o === void 0 ? 'fix' : _o, emptyText = _a.emptyText, _p = _a.scrollMode, scrollMode = _p === void 0 ? 'infinite' : _p, _q = _a.scrollVisibleType, scrollVisibleType = _q === void 0 ? 'moving' : _q, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, _r = _a.headerRowCheckboxName, headerRowCheckboxName = _r === void 0 ? 'all' : _r, _s = _a.flexibleHideInfoMode, flexibleHideInfoMode = _s === void 0 ? 'use' : _s, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect;
+    var toolBar = _a.toolBar, bulkActionBar = _a.bulkActionBar, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column2HeaderTooltipText = _a.column2HeaderTooltipText, column3HeaderText = _a.column3HeaderText, column3HeaderTooltipText = _a.column3HeaderTooltipText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, column4HeaderTooltipText = _a.column4HeaderTooltipText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, column5HeaderTooltipText = _a.column5HeaderTooltipText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, column6HeaderTooltipText = _a.column6HeaderTooltipText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, column7HeaderTooltipText = _a.column7HeaderTooltipText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, column8HeaderTooltipText = _a.column8HeaderTooltipText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, column9HeaderTooltipText = _a.column9HeaderTooltipText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, column10HeaderTooltipText = _a.column10HeaderTooltipText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.quickActionBtnMode, quickActionBtnMode = _m === void 0 ? 'btn_amount2' : _m, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _o = _a.quickActionBtnType, quickActionBtnType = _o === void 0 ? 'fix' : _o, emptyText = _a.emptyText, _p = _a.scrollMode, scrollMode = _p === void 0 ? 'infinite' : _p, _q = _a.scrollVisibleType, scrollVisibleType = _q === void 0 ? 'moving' : _q, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, _r = _a.headerRowCheckboxName, headerRowCheckboxName = _r === void 0 ? 'all' : _r, _s = _a.flexibleHideInfoMode, flexibleHideInfoMode = _s === void 0 ? 'use' : _s, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect;
     var selectAllMethods = (0, react_hook_form_1.useForm)();
     var checkboxMethods = (0, react_hook_form_1.useForm)();
     var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({
@@ -200,17 +200,26 @@ function AdminList(_a) {
                 ? react_1.default.isValidElement(bulkActionBar) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_1.default.cloneElement(bulkActionBar, {
                         itemCount: totalItemCount
                     }) }))
-                : toolBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolBar, (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) }) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
+                : toolBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolBar, (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)(HeaderRowStyle, __assign({ scrollVisibleType: scrollVisibleType, scrollMode: scrollMode }, { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column2HeaderTooltipText: column2HeaderTooltipText, column3HeaderText: column3HeaderText, column3HeaderTooltipText: column3HeaderTooltipText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderTooltipText: column4HeaderTooltipText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderTooltipText: column5HeaderTooltipText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderTooltipText: column6HeaderTooltipText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderTooltipText: column7HeaderTooltipText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderTooltipText: column8HeaderTooltipText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderTooltipText: column9HeaderTooltipText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderTooltipText: column10HeaderTooltipText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) })) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
 }
-var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"])));
-var scrollVisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var S_AdminList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
-var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  overflow-y: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  overflow-y: ", ";\n\n  ", "\n"])), function (_a) {
+var HeaderRowStyle = styled_components_1.default.form(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType !== 'hidden' && '8px';
+});
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var scrollInvisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"])));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var scrollVisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n    display: initial;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n    display: initial;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_enabled;
+});
+var S_AdminList = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var S_ScrollBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: ", ";\n  position: relative;\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n    height: 8px;\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: #ccc;\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  scrollbar-gutter: stable;\n  scrollbar-width: ", ";\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: ", ";\n  position: relative;\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n    height: 8px;\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: #ccc;\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  scrollbar-gutter: stable;\n  scrollbar-width: ", ";\n"])), function (_a) {
     var scrollMode = _a.scrollMode;
     switch (scrollMode) {
         case 'infinite':
         case 'page': {
-            return 'auto';
+            return 'overlay';
         }
         case 'none': {
             return 'none';
@@ -218,16 +227,8 @@ var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateO
     }
 }, function (_a) {
     var scrollVisibleType = _a.scrollVisibleType;
-    switch (scrollVisibleType) {
-        case 'moving':
-        case 'visible': {
-            return scrollVisible;
-        }
-        case 'hidden': {
-            return scrollInvisible;
-        }
-    }
+    return (scrollVisibleType === 'hidden' ? 'none' : 'auto');
 });
-var S_EmptyTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"], ["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"])));
+var S_EmptyTextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"], ["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"])));
 exports.default = AdminList;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/sub/AdminList/AdminList/HeaderRow.d.ts

@@ -4,21 +4,30 @@ type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
 type Props = {
     selectionMode: 'none' | 'single' | 'multi';
     column2HeaderText?: PDSTextType;
+    column2HeaderTooltipText?: PDSTextType;
     column3HeaderText?: PDSTextType;
+    column3HeaderTooltipText?: PDSTextType;
     column3HeaderWidth?: ColumnWidthType;
     column4HeaderText?: PDSTextType;
+    column4HeaderTooltipText?: PDSTextType;
     column4HeaderWidth?: ColumnWidthType;
     column5HeaderText?: PDSTextType;
+    column5HeaderTooltipText?: PDSTextType;
     column5HeaderWidth?: ColumnWidthType;
     column6HeaderText?: PDSTextType;
+    column6HeaderTooltipText?: PDSTextType;
     column6HeaderWidth?: ColumnWidthType;
     column7HeaderText?: PDSTextType;
+    column7HeaderTooltipText?: PDSTextType;
     column7HeaderWidth?: ColumnWidthType;
     column8HeaderText?: PDSTextType;
+    column8HeaderTooltipText?: PDSTextType;
     column8HeaderWidth?: ColumnWidthType;
     column9HeaderText?: PDSTextType;
+    column9HeaderTooltipText?: PDSTextType;
     column9HeaderWidth?: ColumnWidthType;
     column10HeaderText?: PDSTextType;
+    column10HeaderTooltipText?: PDSTextType;
     column10HeaderWidth?: ColumnWidthType;
     quickActionBtnType?: 'hover' | 'fix';
     quickActionButtonCount?: number;
@@ -26,5 +35,5 @@ type Props = {
     flexibleHideInfoMode?: 'use' | 'none';
     onClickSelectAllCheckbox?: () => void;
 };
-declare function HeaderRow({ selectionMode, column2HeaderText, column3HeaderText, column3HeaderWidth, column4HeaderText, column4HeaderWidth, column5HeaderText, column5HeaderWidth, column6HeaderText, column6HeaderWidth, column7HeaderText, column7HeaderWidth, column8HeaderText, column8HeaderWidth, column9HeaderText, column9HeaderWidth, column10HeaderText, column10HeaderWidth, quickActionBtnType, quickActionButtonCount, headerRowCheckboxName, flexibleHideInfoMode, onClickSelectAllCheckbox }: Props): JSX.Element;
+declare function HeaderRow({ selectionMode, column2HeaderText, column2HeaderTooltipText, column3HeaderText, column3HeaderTooltipText, column3HeaderWidth, column4HeaderText, column4HeaderTooltipText, column4HeaderWidth, column5HeaderText, column5HeaderTooltipText, column5HeaderWidth, column6HeaderText, column6HeaderTooltipText, column6HeaderWidth, column7HeaderText, column7HeaderTooltipText, column7HeaderWidth, column8HeaderText, column8HeaderTooltipText, column8HeaderWidth, column9HeaderText, column9HeaderTooltipText, column9HeaderWidth, column10HeaderText, column10HeaderTooltipText, column10HeaderWidth, quickActionBtnType, quickActionButtonCount, headerRowCheckboxName, flexibleHideInfoMode, onClickSelectAllCheckbox }: Props): JSX.Element;
 export default HeaderRow;

package/dist/src/sub/AdminList/AdminList/HeaderRow.js

@@ -43,8 +43,8 @@ var components_1 = require("../../../desktop/components");
 var components_2 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 function HeaderRow(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, _o = _a.headerRowCheckboxName, headerRowCheckboxName = _o === void 0 ? 'all' : _o, _p = _a.flexibleHideInfoMode, flexibleHideInfoMode = _p === void 0 ? 'use' : _p, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderRow, __assign({ flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_c", spacingType: "width" }), selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_CheckBox, { children: (0, jsx_runtime_1.jsx)(components_1.Checkbox, { name: headerRowCheckboxName, onChange: onClickSelectAllCheckbox }) })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_c", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_FlexColumn, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }), column3HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column3HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column4HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column4HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column5HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column5HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column6HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column6HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column7HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column7HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column8HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column8HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column9HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column9HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), column10HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }) }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f", spacingType: "width" }), quickActionBtnType === 'fix' && quickActionButtonCount > 0 && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, { children: Array(quickActionButtonCount)
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, column2HeaderText = _a.column2HeaderText, column2HeaderTooltipText = _a.column2HeaderTooltipText, column3HeaderText = _a.column3HeaderText, column3HeaderTooltipText = _a.column3HeaderTooltipText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, column4HeaderTooltipText = _a.column4HeaderTooltipText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, column5HeaderTooltipText = _a.column5HeaderTooltipText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, column6HeaderTooltipText = _a.column6HeaderTooltipText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, column7HeaderTooltipText = _a.column7HeaderTooltipText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, column8HeaderTooltipText = _a.column8HeaderTooltipText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, column9HeaderTooltipText = _a.column9HeaderTooltipText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, column10HeaderTooltipText = _a.column10HeaderTooltipText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, _o = _a.headerRowCheckboxName, headerRowCheckboxName = _o === void 0 ? 'all' : _o, _p = _a.flexibleHideInfoMode, flexibleHideInfoMode = _p === void 0 ? 'use' : _p, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderRow, __assign({ flexibleHideInfoMode: flexibleHideInfoMode }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_c", spacingType: "width" }), selectionMode === 'multi' && ((0, jsx_runtime_1.jsx)(S_CheckBox, { children: (0, jsx_runtime_1.jsx)(components_1.Checkbox, { name: headerRowCheckboxName, onChange: onClickSelectAllCheckbox }) })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_c", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_FlexColumn, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column2HeaderTooltipText }) }), column3HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column3HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column3HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column3HeaderTooltipText }) }))), column4HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column4HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column4HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column4HeaderTooltipText }) }))), column5HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column5HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column5HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column5HeaderTooltipText }) }))), column6HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column6HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column6HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column6HeaderTooltipText }) }))), column7HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column7HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column7HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column7HeaderTooltipText }) }))), column8HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column8HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column8HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column8HeaderTooltipText }) }))), column9HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column9HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column9HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column9HeaderTooltipText }) }))), column10HeaderText && ((0, jsx_runtime_1.jsx)(S_Column, __assign({ columnSize: column10HeaderWidth, className: "hidableColumn" }, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", tooltipText: column10HeaderTooltipText }) }))), quickActionBtnType === 'hover' && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f", spacingType: "width" }), quickActionBtnType === 'fix' && quickActionButtonCount > 0 && ((0, jsx_runtime_1.jsx)(S_QuickActionButtonBox, { children: Array(quickActionButtonCount)
                     .fill(0)
                     .map(function (el, i) { return ((0, jsx_runtime_1.jsx)(S_EmptyDiv, {}, "".concat(el).concat(i))); }) }))] })));
 }

package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js

@@ -46,12 +46,9 @@ function ComponentBlockMatcher(_a) {
             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 }));
-        case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
+        case types_1.CB_ALL_CODES.CB_CONTENTS_CAROUSEL: {
             return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
         }
-        case types_1.CB_ALL_CODES.CB_LIST: {
-            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CONTENTSLIST" });
-        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import type { IComposition } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { ISection } from '../types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IComposition & {
-    device?: "DESKTOP" | "MOBILE" | undefined;
-} & React.RefAttributes<unknown>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
 export default _default;

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js

@@ -47,34 +47,36 @@ var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
-require("../components");
+var components_1 = require("../components");
 var gleStyles_1 = require("../gleStyles");
 var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
-require("../sections/CustomSection/util");
+var util_1 = require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
-var parseStylePropBorder_1 = __importDefault(require("../sections/CustomSection/util/stylePropParsers/parseStylePropBorder"));
-var parseStylePropShadow_1 = __importDefault(require("../sections/CustomSection/util/stylePropParsers/parseStylePropShadow"));
-var types_1 = require("../sections/CustomSection/util/stylePropParsers/types");
-var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
 var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
+var GRID_CELL_MIN = 24;
+var DESKTOP_GRID_COLS = 24;
+var MOBILE_GRID_COLS = 8;
+var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
+var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a, _b, _c, _d, _e;
-    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _f.device, editingSectionId = _f.editingSectionId, mode = _f.mode, shortcutKeyMode = _f.shortcutKeyMode, sectionActionHandler = _f.sectionActionHandler, queryData = _f.queryData;
+    var _a;
+    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_COMPOSITION = _h.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_SHADOW = _h.CB_STYLE_PROP_SHADOW, CB_STYLE_PROP_BORDER = _h.CB_STYLE_PROP_BORDER, zOrders = _g.zOrders;
-    var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
-    var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
-    var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
-    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
-    var rows = isMobile ? rowsMobile : rowsDesktop;
-    var cols = isMobile ? colsMobile : colsDesktop;
+    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _j = (0, react_1.useState)(null), selectedCB = _j[0], setSelectedCB = _j[1];
+    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
     var gleRef = (0, react_1.useRef)(null);
+    var isMobile = device === 'MOBILE';
+    var isEditMode = mode === 'EDIT';
+    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    // const [layouts] = useState<LayoutsType>(() => {
+    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
+    //   return {
+    //     lg,
+    //     sm
+    //   };
+    // });
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
@@ -122,17 +124,14 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _k = (0, parseCompositionPlacement_1.default)({
+    var _f = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
-        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
-    }), minHeight = _k.minHeight, maxHeight = _k.maxHeight, maxWidth = _k.maxWidth, minWidth = _k.minWidth;
-    var canvasWidth = 50 * cols;
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
     var customSectionStyles = {
-        minHeight: "".concat(minHeight, "px"),
-        maxHeight: "".concat(maxHeight, "px"),
-        width: "100%",
-        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
+        minHeight: "".concat(minHeight, "vh"),
+        width: '100%',
+        maxWidth: isFullWidth ? '' : "".concat(width, "px")
     };
     var onClickSection = function () {
         if (!isEditMode) {
@@ -148,34 +147,26 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             });
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-    var shadowStyles = (0, parseStylePropShadow_1.default)({
-        name: types_1.CB_STYLE_PROP_KEYS.CB_STYLE_PROP_SHADOW,
-        specs: MOCK_SHADOW
-    }, device);
-    var borderStyles = (0, parseStylePropBorder_1.default)({
-        name: types_1.CB_STYLE_PROP_KEYS.CB_STYLE_PROP_BORDER,
-        specs: MOCK_BORDER
-    }, device);
+    var sectionRow = CB_PLACEMENT_PROP_SECTION[device === 'DESKTOP'
+        ? 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS'
+        : 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'];
     var rowHeight = (function () {
         if (!size.width) {
             return 50;
         }
         if (device === 'MOBILE') {
-            var cellWidth_1 = size.width / cols;
+            var cellWidth_1 = size.width / MOBILE_GRID_COLS;
             return cellWidth_1 * 0.56;
         }
-        var cellWidth = size.width / cols;
+        var cellWidth = size.width / DESKTOP_GRID_COLS;
         return cellWidth * 0.56;
     })();
-    // TODO: 폰트사이즈 작업 필요.
     var baseFontSize = (function () {
+        var _a, _b;
         if (!size.width) {
             return 16;
         }
-        // const responsiveFontMode =
-        //   !!props.jsonProperties?.CB_CONTENT_PROP_COMPOSITION
-        //     ?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
-        var responsiveFontMode = true;
+        var responsiveFontMode = !!((_b = (_a = props.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_SECTION) === null || _b === void 0 ? void 0 : _b.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
         if (device === 'MOBILE') {
             if (responsiveFontMode) {
                 return size.width * 0.0421;
@@ -193,88 +184,29 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return 16;
     })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
-                device: device
-            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: __assign(__assign(__assign({ width: '100%', height: '100%' }, shadowStyles.style), borderStyles.style), { overflow: 'hidden' }) }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: { width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
+                    width: '100%',
+                    height: '100%'
+                } }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                        // minHeight: customSectionStyles.minHeight,
+                        paddingTop: padding.top,
+                        paddingBottom: padding.bottom,
+                        paddingRight: padding.right,
+                        paddingLeft: padding.left,
                         width: '100%',
                         height: '100%'
-                    } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props, { isMobile: isMobile, overrideStyles: {
-                            // minHeight: customSectionStyles.minHeight,
-                            paddingTop: padding.top,
-                            paddingBottom: padding.bottom,
-                            paddingRight: padding.right,
-                            paddingLeft: padding.left,
-                            width: '100%',
-                            height: '100%'
-                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
-                                width: customSectionStyles.width,
-                                maxWidth: customSectionStyles.maxWidth
-                                // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                // fontSize: `${baseFontSize}px`
-                            } }, { children: (_e = props.componentBlocks) === null || _e === void 0 ? void 0 : _e.map(function (cb, index) {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
-                            }) })) })) })) })) })) }));
+                    } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, style: {
+                            width: customSectionStyles.width,
+                            maxWidth: customSectionStyles.maxWidth,
+                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                            fontSize: "".concat(baseFontSize, "px")
+                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                        }) })) })) })) })) }));
 });
-var MOCK_BORDER = {
-    CB_STYLE_PROP_BORDER_SPEC_COLOR: '#000000FF',
-    'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
-        bl: 18,
-        br: 18,
-        tl: 18,
-        tr: 18
-    },
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: true,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': true,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_STYLE: 'SOLID',
-    'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_WIDTH: 3,
-    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null
-};
-var MOCK_SHADOW = {
-    CB_STYLE_PROP_SHADOW_SPEC_BLUR: 24,
-    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_COLOR: '#000000FF',
-    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_OPACITY: 30,
-    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_SPREAD: 2,
-    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_TYPE: 'OUTSET',
-    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': 'OUTSET',
-    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_X: 0,
-    'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_Y: 12,
-    'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
-};
-var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
-var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(", ", minmax(", ", 1fr));\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(", ", minmax(", ", 1fr));\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(0, "px"); });
+var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(Composition);
 function getDefensiveFontSize(device, width) {
     if (device === 'MOBILE') {

package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IComposition } from '../../DynamicLayout/types';
+declare function CompositionRenderer({ compositions }: {
+    compositions: IComposition[];
+}): JSX.Element;
+export default CompositionRenderer;

package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+var Composition_1 = __importDefault(require("./Composition"));
+function CompositionRenderer(_a) {
+    var compositions = _a.compositions;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+            width: '100%',
+            height: '100%'
+        } }, { children: compositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id)); }) })));
+}
+exports.default = CompositionRenderer;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef, zoomScale, queryData, placementRestriction }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef, zoomScale }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale, queryData = _a.queryData, placementRestriction = _a.placementRestriction;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
         var _a;
         if (!section.display) {
@@ -51,9 +51,7 @@ function DynamicLayout(_a) {
             editingSectionId: editingSectionId,
             programmedSectionComponents: programmedSectionComponents,
             shortcutKeyMode: shortcutKeyMode,
-            zoomScale: zoomScale,
-            queryData: queryData,
-            placementRestriction: placementRestriction
+            zoomScale: zoomScale
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js

@@ -44,7 +44,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomSectionBackgroundMedia = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var compositionQueryContext_1 = require("../../../../DynamicLayout/compositionQueryContext");
 var utils_1 = require("../../../../DynamicLayout/utils");
 var styled_components_1 = __importStar(require("styled-components"));
 var YouTubeIframe_1 = require("../../YouTubeIframe");
@@ -52,8 +51,7 @@ var util_1 = require("../util");
 var VideoBGMedia_1 = __importDefault(require("./VideoBGMedia"));
 function CustomSectionBackgroundMedia(_a) {
     var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, componentStyle = _a.componentStyle, device = _a.device, backgroundRef = _a.backgroundRef;
-    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
-    var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE = _b.CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE, CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA = _b.CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA;
+    var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR;
     var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
     var youTubeIframeKey = (0, react_1.useMemo)(function () {
         return "".concat(utils_1.YouTubeLinkParser.getId(String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC)), "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME);
@@ -102,32 +100,12 @@ function CustomSectionBackgroundMedia(_a) {
             observer.disconnect();
         };
     }, [device, specs, playerId, mediaType]);
-    var imgSrc = function () {
-        var isDataConnected = CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE === 'DATA' ||
-            CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE === 'DELEGATEDDATA';
-        if (!isDataConnected) {
-            return CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR
-                ? String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR)
-                : '';
-        }
-        if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
-            // eslint-disable-next-line
-            console.warn('ERROR: No query data found');
-            return 'ERROR';
-        }
-        if (!queryContext.queryData[String(CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA)]) {
-            // eslint-disable-next-line
-            console.warn("ERROR: ".concat(CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA, " NOT found in query data"));
-            return 'ERROR';
-        }
-        return queryContext.queryData[String(CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA)];
-    };
     if ('background' in componentStyle) {
         delete componentStyle.background;
     }
     switch (mediaType) {
         case 'IMAGE':
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: imgSrc() && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: imgSrc(), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: imgSrc(), style: { visibility: 'hidden', width: '100%', height: '100%' } }) }))) }));
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }) }))) }));
         case 'YOUTUBE':
             return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: youtubeSize.height > 0 && youtubeSize.width > 0 && ((0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), id: playerId, loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, youTubeIframeKey)) })));
         case 'VIDEO':

package/dist/src/sub/DynamicLayout/components/Section/sectionContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IComposition, ISection } from '../../types';
-export declare const sectionContext: import("react").Context<ISection | IComposition | null>;
+import type { ISection } from '../../types';
+export declare const sectionContext: import("react").Context<ISection | null>;

package/dist/src/sub/DynamicLayout/components/Section/util/parseSectionBackgroundMediaData.js

@@ -26,9 +26,7 @@ var AVAILABLE_SPECS = [
     'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR',
     'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT',
     'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME',
-    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR',
-    'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE',
-    'CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA'
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR'
     // 'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY'
 ];
 function UseCustomSectionBackgroundMediaData(specs, device) {