pds-dev-kit-web 2.2.48 → 2.2.50

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -347,5 +347,10 @@
     "sys_component_base_46": "black/opacity90",
     "sys_cpnt_list_chatbubble_download_button_base": "white/opacity20",
     "sys_cpnt_sheet_base_11": "darkgrey10",
-    "sys_cpnt_sheet_base_12": "white/opacity20"
+    "sys_cpnt_sheet_base_12": "white/opacity20",
+    "sys_sw_sidebar_item_text_emphasis": "darkgreen500",
+    "sys_sw_sidebar_item_icon_emphasis": "darkgreen500",
+    "sys_sw_sidebar_divider_vertical": "darkgrey100",
+    "sys_cpnt_sheet_base_13": "grey50",
+    "sys_cpnt_sheet_base_14": "grey900"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -314,7 +314,7 @@
     "sys_icon_grey_darktheme_03": "darkgrey400",
     "sys_widget_grey_01_opacity_50": "grey900/opacity50",
     "sys_editor_layout_header": "white",
-    "sys_editor_layout_navigation_panel": "grey50",
+    "sys_editor_layout_navigation_panel": "grey70",
     "sys_editor_layout_canvas_area": "grey30",
     "sys_editor_layout_control_panel": "white",
     "sys_editor_layout_property_panel": "white",
@@ -347,5 +347,10 @@
     "sys_component_base_46": "black/opacity90",
     "sys_cpnt_list_chatbubble_download_button_base": "black/opacity40",
     "sys_cpnt_sheet_base_11": "grey10",
-    "sys_cpnt_sheet_base_12": "white/opacity20"
+    "sys_cpnt_sheet_base_12": "white/opacity20",
+    "sys_sw_sidebar_item_text_emphasis": "darkgreen500",
+    "sys_sw_sidebar_item_icon_emphasis": "darkgreen500",
+    "sys_sw_sidebar_divider_vertical": "darkgrey100",
+    "sys_cpnt_sheet_base_13": "grey50",
+    "sys_cpnt_sheet_base_14": "grey900"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -844,5 +844,11 @@
     "ui_cpnt_list_chatbubble_base_transparent": "sys_component_base_white_opacity00",
     "ui_cpnt_list_chatbubble_download_button_base": "sys_cpnt_list_chatbubble_download_button_base",
     "ui_111": "sys_cpnt_sheet_base_11",
-    "ui_112": "sys_cpnt_sheet_base_12"
+    "ui_112": "sys_cpnt_sheet_base_12",
+    "ui_sw_sidebar_label_text_emphasis": "sys_sw_sidebar_item_text_emphasis",
+    "ui_cpnt_sidebar_label_icon_green": "sys_sw_sidebar_item_icon_emphasis",
+    "ui_sw_sidebar_divider_vertical": "sys_sw_sidebar_divider_vertical",
+    "ui_113": "sys_cpnt_sheet_base_13",
+    "ui_114": "sys_component_base_26",
+    "ui_115": "sys_cpnt_sheet_base_14"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -119,7 +119,7 @@ declare const colorSet: {
         grey300: string;
         darkgrey300: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -469,8 +469,13 @@ declare const colorSet: {
         sys_cpnt_list_chatbubble_download_button_base: string;
         sys_cpnt_sheet_base_11: string;
         sys_cpnt_sheet_base_12: string;
+        sys_sw_sidebar_item_text_emphasis: string;
+        sys_sw_sidebar_item_icon_emphasis: string;
+        sys_sw_sidebar_divider_vertical: string;
+        sys_cpnt_sheet_base_13: string;
+        sys_cpnt_sheet_base_14: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -820,6 +825,11 @@ declare const colorSet: {
         sys_cpnt_list_chatbubble_download_button_base: string;
         sys_cpnt_sheet_base_11: string;
         sys_cpnt_sheet_base_12: string;
+        sys_sw_sidebar_item_text_emphasis: string;
+        sys_sw_sidebar_item_icon_emphasis: string;
+        sys_sw_sidebar_divider_vertical: string;
+        sys_cpnt_sheet_base_13: string;
+        sys_cpnt_sheet_base_14: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1668,6 +1678,12 @@ declare const colorSet: {
         ui_cpnt_list_chatbubble_download_button_base: string;
         ui_111: string;
         ui_112: string;
+        ui_sw_sidebar_label_text_emphasis: string;
+        ui_cpnt_sidebar_label_icon_green: string;
+        ui_sw_sidebar_divider_vertical: string;
+        ui_113: string;
+        ui_114: string;
+        ui_115: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    PaletteColor_light: PaletteColor_light_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -845,4 +845,10 @@ export interface UITheme {
     ui_cpnt_list_chatbubble_download_button_base: string;
     ui_111: string;
     ui_112: string;
+    ui_sw_sidebar_label_text_emphasis: string;
+    ui_cpnt_sidebar_label_icon_green: string;
+    ui_sw_sidebar_divider_vertical: string;
+    ui_113: string;
+    ui_114: string;
+    ui_115: string;
 }

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -86,7 +86,7 @@ function TextFieldBase(_a) {
         clearErrors(name);
     }
     function handleKeyDown(e) {
-        if (textLineType === 'single' && enterSubmitMode === 'none' && e.code === 'Enter') {
+        if (textLineType === 'single' && enterSubmitMode === 'none' && e.key === 'Enter') {
             e.preventDefault();
         }
         if (inputType === 'number') {

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -86,7 +86,7 @@ function TextFieldBase(_a) {
         clearErrors(name);
     }
     function handleKeyDown(e) {
-        if (textLineType === 'single' && enterSubmitMode === 'none' && e.code === 'Enter') {
+        if (textLineType === 'single' && enterSubmitMode === 'none' && e.key === 'Enter') {
             e.preventDefault();
         }
         if (inputType === 'number') {

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 }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef }: 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;
+    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;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -36,8 +36,9 @@ function DynamicLayout(_a) {
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
-            programmedSectionComponents: programmedSectionComponents
-        } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
+            programmedSectionComponents: programmedSectionComponents,
+            shortcutKeyMode: shortcutKeyMode
+        } }, { 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); })))] })));
 }
 exports.default = DynamicLayout;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import type { ISection } from '../../types';
-export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, onClickEditSection }: {
+import type { DynamicLayoutProps, ISection } from '../../types';
+export default function EditModeSectionMatcher({ filteredSortedSection, scrollDownTargetSectionId, editingSectionId, dynamicLayoutRef, onClickEditSection }: {
     filteredSortedSection: ISection[];
     scrollDownTargetSectionId?: number;
     editingSectionId?: number;
+    dynamicLayoutRef: DynamicLayoutProps['dynamicLayoutRef'];
     onClickEditSection: (section: ISection) => void;
 }): JSX.Element;

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

@@ -26,19 +26,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var sections_1 = require("../../../DynamicLayout/sections");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
-    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
+    var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, dynamicLayoutRef = _a.dynamicLayoutRef, onClickEditSection = _a.onClickEditSection;
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, iframeSection)) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, section)) }), section.id)); })) }));
+    var _b = (0, react_1.useState)(null), selectedSectionRef = _b[0], setSelectedSectionRef = _b[1];
+    var refCallback = (0, react_1.useCallback)(function (node) {
+        setSelectedSectionRef(node);
+    }, []);
+    (0, react_1.useImperativeHandle)(dynamicLayoutRef, function () {
+        return {
+            selectCB: function (cb) {
+                selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectCB(cb);
+            },
+            selectCBInBulk: function (cbIds) {
+                selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectCBInBulk(cbIds);
+            }
+        };
+    }, [selectedSectionRef]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, iframeSection)) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: section.type === 'CUSTOM' ? ((0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, section, { ref: editingSectionId === section.id ? refCallback : null }))) : ((0, jsx_runtime_1.jsx)(DesignedSectionsMatcher, __assign({}, section))) }), section.id)); })) }));
 }
 exports.default = EditModeSectionMatcher;
-function Matcher(_a) {
+function DesignedSectionsMatcher(_a) {
     var props = __rest(_a, []);
-    if (props.type === 'CUSTOM') {
-        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props));
-    }
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':

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

@@ -30,8 +30,9 @@ function CustomSectionBackground(_a) {
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
     var id = context.id, jsonProperties = context.jsonProperties;
     var backgroundRef = (0, react_1.useRef)(null);
-    var _c = jsonProperties || {}, CB_STYLE_PROP_BGOVERLAY = _c.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _c.CB_STYLE_PROP_BGMEDIA;
-    var _d = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _d.style, overlayStyle = _d.overlayStyle, effect = _d.effect;
+    var data = jsonProperties.data;
+    var CB_STYLE_PROP_BGOVERLAY = data.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = data.CB_STYLE_PROP_BGMEDIA;
+    var _c = (0, util_1.parseJsonProperties)(data, isMobile ? 'MOBILE' : 'DESKTOP'), style = _c.style, overlayStyle = _c.overlayStyle, effect = _c.effect;
     var isOverlay = getIsOverlay(isMobile, CB_STYLE_PROP_BGOVERLAY);
     var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
     var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);

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

@@ -0,0 +1,6 @@
+export declare const CUSTOMSECTION_SHORTCUT_KEYS: string[];
+export type CustomSectionShortcutType = 'BULK_SELECT' | 'COLLISION_SELECT' | 'SELECT_ALL' | null;
+declare function useCustomSectionShortcut(): {
+    shortcut: CustomSectionShortcutType;
+};
+export default useCustomSectionShortcut;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CUSTOMSECTION_SHORTCUT_KEYS = void 0;
+var react_1 = require("react");
+exports.CUSTOMSECTION_SHORTCUT_KEYS = ['Shift', 'Meta', 'A', 'ㅁ'];
+function useCustomSectionShortcut() {
+    var _a = (0, react_1.useState)(null), shortcut = _a[0], setShortcut = _a[1];
+    (0, react_1.useEffect)(function () {
+        var keys = new Map();
+        function onKeyDown(e) {
+            if (!exports.CUSTOMSECTION_SHORTCUT_KEYS.includes(e.key)) {
+                return;
+            }
+            keys.set(e.key, true);
+            var isShiftOn = keys.get('Shift');
+            var isMetaOn = keys.get('Meta');
+            var isAOn = keys.get('A') || keys.get('ㅁ');
+            if (isShiftOn && isAOn) {
+                setShortcut('SELECT_ALL');
+                return;
+            }
+            if (isShiftOn && isMetaOn) {
+                setShortcut('COLLISION_SELECT');
+                return;
+            }
+            if (isShiftOn) {
+                setShortcut('BULK_SELECT');
+            }
+        }
+        function onKeyUp(e) {
+            if (e.key === 'a') {
+                keys.delete('A');
+            }
+            else {
+                keys.delete(e.key);
+            }
+            setShortcut(null);
+        }
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        return function () {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+        };
+    }, []);
+    return {
+        shortcut: shortcut
+    };
+}
+exports.default = useCustomSectionShortcut;