@gravity-ui/page-constructor 6.3.2-alpha.7 → 6.3.2-alpha.9

package/build/esm/editor-v2/components/Sidebar/Sidebar.css

@@ -1,14 +1,48 @@
 .pceditor-sidebar {
-  position: relative;
-  height: 100%;
-  width: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  height: 100%;
 }
 .pceditor-sidebar__block {
   width: 100%;
   border-bottom: 1px solid var(--g-color-line-generic);
-  overflow-x: scroll;
-  box-sizing: border-box;
-  flex: 0 0 auto;
+}
+.pceditor-sidebar__tabs {
+  scrollbar-width: thin;
+  scrollbar-color: var(--g-color-scroll-handle) transparent;
+  overflow: auto;
+}
+.pceditor-sidebar__tabs::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+.pceditor-sidebar__tabs::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+.pceditor-sidebar__tabs::-webkit-scrollbar-thumb {
+  background: var(--g-color-scroll-handle);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  opacity: 0;
+}
+.pceditor-sidebar__tabs::-webkit-scrollbar-thumb:hover {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-sidebar__tabs::-webkit-scrollbar-thumb:active {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-sidebar__tabs::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pceditor-sidebar__tabs:hover::-webkit-scrollbar-thumb {
+  opacity: 0.7;
+}
+.pceditor-sidebar__tabs:not(:hover)::-webkit-scrollbar-thumb {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
 }

package/build/esm/editor-v2/components/Sidebar/Sidebar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { TabsItemProps } from "../Tabs/Tabs.js";
+import { TabItemProps } from "../Tabs/Tabs.js";
 import './Sidebar.css';
 interface SidebarProps {
-    tabs: TabsItemProps[];
+    tabs: TabItemProps[];
     defaultTab?: string;
     top?: React.ElementType[];
     className?: string;

package/build/esm/editor-v2/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,IAAqB,wBAAqB;AAEjD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAS9B,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,GAAG,GAAG,EAAE,EAAe,EAAE,EAAE;IACjE,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,GAAG,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,cAAe,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAChC,KAAC,YAAY,KAAG,IADV,GAAG,CAEP,CACT,CAAC,EACF,KAAC,IAAI,IAAC,KAAK,EAAE,IAAI,GAAI,IACnB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\nimport Tabs, {TabsItemProps} from '../Tabs/Tabs';\n\nimport './Sidebar.scss';\n\nconst b = editorCn('sidebar');\n\ninterface SidebarProps {\n    tabs: TabsItemProps[];\n    defaultTab?: string;\n    top?: React.ElementType[];\n    className?: string;\n}\n\nexport const Sidebar = ({className, tabs, top = []}: SidebarProps) => {\n    return (\n        <div className={b(null, className)}>\n            {top.map((TopComponent, idx) => (\n                <div key={idx} className={b('block')}>\n                    <TopComponent />\n                </div>\n            ))}\n            <Tabs items={tabs} />\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"Sidebar.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AACxC,OAAO,IAAoB,wBAAqB;AAEhD,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAS9B,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,GAAG,GAAG,EAAE,EAAe,EAAE,EAAE;IACjE,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,GAAG,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,cAAe,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAChC,KAAC,YAAY,KAAG,IADV,GAAG,CAEP,CACT,CAAC,EACF,KAAC,IAAI,IAAC,KAAK,EAAE,IAAI,GAAI,IACnB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\nimport Tabs, {TabItemProps} from '../Tabs/Tabs';\n\nimport './Sidebar.scss';\n\nconst b = editorCn('sidebar');\n\ninterface SidebarProps {\n    tabs: TabItemProps[];\n    defaultTab?: string;\n    top?: React.ElementType[];\n    className?: string;\n}\n\nexport const Sidebar = ({className, tabs, top = []}: SidebarProps) => {\n    return (\n        <div className={b(null, className)}>\n            {top.map((TopComponent, idx) => (\n                <div key={idx} className={b('block')}>\n                    <TopComponent />\n                </div>\n            ))}\n            <Tabs items={tabs} />\n        </div>\n    );\n};\n"]}

package/build/esm/editor-v2/components/Tabs/Tabs.css

@@ -1,11 +1,11 @@
 .pceditor-tabs {
-  overflow: auto;
-  width: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  height: 100%;
   /* Make sure any nested tabs component also has proper overflow behavior */
 }
-.pceditor-tabs__item {
+.pceditor-tabs .g-button.pceditor-tabs__item {
   color: var(--g-color-text-hint);
   font-weight: 500;
   letter-spacing: 0.5px;
@@ -14,7 +14,7 @@
   line-height: var(--g-text-code-inline-2-line-height);
   align-items: center;
 }
-.pceditor-tabs__item_active {
+.pceditor-tabs .g-button.pceditor-tabs__item_active {
   pointer-events: none;
   color: var(--g-color-text-primary);
 }
@@ -41,7 +41,6 @@
 }
 .pceditor-tabs .pceditor-tabs .pceditor-tabs__tabs-wrapper {
   position: sticky;
-  top: 48.5px;
   /* Position below parent tabs-wrapper */
   z-index: 1;
   background-color: var(--g-color-base-background);
@@ -49,4 +48,48 @@
 .pceditor-tabs__body {
   flex: 1;
   min-height: 1px;
+  height: 100%;
+}
+.pceditor-tabs__item {
+  scrollbar-width: thin;
+  scrollbar-color: var(--g-color-scroll-handle) transparent;
+  overflow: auto;
+  overflow-y: auto;
+  max-height: 100%;
+}
+.pceditor-tabs__item::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+.pceditor-tabs__item::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+.pceditor-tabs__item::-webkit-scrollbar-thumb {
+  background: var(--g-color-scroll-handle);
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  opacity: 0;
+}
+.pceditor-tabs__item::-webkit-scrollbar-thumb:hover {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-tabs__item::-webkit-scrollbar-thumb:active {
+  background: var(--g-color-scroll-handle-hover);
+  opacity: 1;
+}
+.pceditor-tabs__item::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.pceditor-tabs__item:hover::-webkit-scrollbar-thumb {
+  opacity: 0.7;
+}
+.pceditor-tabs__item:not(:hover)::-webkit-scrollbar-thumb {
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+}
+.pceditor-tabs__item_padding {
+  padding: 16px 12px;
 }

package/build/esm/editor-v2/components/Tabs/Tabs.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import './Tabs.css';
-export interface TabsItemProps {
+export interface TabItemProps {
     id: string;
     title: string;
     component: React.ElementType;
+    withPadding?: boolean;
 }
 export interface TabsProps {
     className?: string;
-    items: TabsItemProps[];
+    items: TabItemProps[];
     defaultTab?: string | null;
 }
 declare const Tabs: ({ className, items, defaultTab }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/build/esm/editor-v2/components/Tabs/Tabs.js

@@ -6,25 +6,29 @@ import './Tabs.css';
 const b = editorCn('tabs');
 const Tabs = ({ className, items, defaultTab }) => {
     const [currentTab, setCurrentTab] = React.useState(defaultTab);
-    const activeTabId = React.useMemo(() => {
+    const activeTab = React.useMemo(() => {
         if (currentTab) {
-            return currentTab;
+            const findTab = items.find(({ id }) => id === currentTab);
+            if (findTab) {
+                return findTab;
+            }
         }
-        return items[0].id;
+        return items[0] || null;
     }, [currentTab, items]);
-    const handleClick = React.useCallback((tabId) => () => {
-        setCurrentTab(tabId);
+    const [isPaddingEnabled, setIsPaddingEnabled] = React.useState(activeTab?.withPadding || true);
+    const handleClick = React.useCallback((tabItem) => () => {
+        setCurrentTab(tabItem.id);
+        setIsPaddingEnabled(tabItem.withPadding || false);
     }, []);
     const TabComponent = React.useMemo(() => {
-        const findTab = items.find(({ id }) => id === activeTabId);
-        return findTab?.component;
-    }, [activeTabId, items]);
-    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('tabs-wrapper'), role: "tablist", children: items.map(({ id, title }) => {
-                    const isActive = id === activeTabId;
+        return activeTab?.component;
+    }, [activeTab]);
+    return (_jsxs("div", { className: b(null, className), children: [items.length > 1 && (_jsx("div", { className: b('tabs-wrapper'), role: "tablist", children: items.map((item) => {
+                    const isActive = item.id === activeTab.id;
                     return (_jsx(Button, { view: "flat", size: "s", className: b('item', { active: isActive }), extraProps: {
                             role: 'tab',
-                        }, onClick: handleClick(id), children: title }, title));
-                }) }), _jsx("div", { className: b('body'), children: TabComponent && _jsx(TabComponent, {}) })] }));
+                        }, onClick: handleClick(item), children: item.title }, item.title));
+                }) })), _jsx("div", { className: b('body'), children: TabComponent && (_jsx(TabComponent, { className: b('item', { padding: isPaddingEnabled }) })) })] }));
 };
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

package/build/esm/editor-v2/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AAc3B,MAAM,IAAI,GAAG,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAY,EAAE,EAAE;IACvD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAkB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClD,IAAI,UAAU,EAAE,CAAC;YACb,OAAO,UAAU,CAAC;QACtB,CAAC;QAED,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE;QACpB,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EACD,EAAE,CACL,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC;QACzD,OAAO,OAAO,EAAE,SAAS,CAAC;IAC9B,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,IAAI,EAAC,SAAS,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAC,EAAE,EAAE;oBACvB,MAAM,QAAQ,GAAG,EAAE,KAAK,WAAW,CAAC;oBAEpC,OAAO,CACH,KAAC,MAAM,IACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EAExC,UAAU,EAAE;4BACR,IAAI,EAAE,KAAK;yBACd,EACD,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,YAEvB,KAAK,IAND,KAAK,CAOL,CACZ,CAAC;gBACN,CAAC,CAAC,GACA,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,YAAY,IAAI,KAAC,YAAY,KAAG,GAAO,IACjE,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {Button} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\n\nimport './Tabs.scss';\n\nconst b = editorCn('tabs');\n\nexport interface TabsItemProps {\n    id: string;\n    title: string;\n    component: React.ElementType;\n}\n\nexport interface TabsProps {\n    className?: string;\n    items: TabsItemProps[];\n    defaultTab?: string | null;\n}\n\nconst Tabs = ({className, items, defaultTab}: TabsProps) => {\n    const [currentTab, setCurrentTab] = React.useState(defaultTab);\n\n    const activeTabId: string | null = React.useMemo(() => {\n        if (currentTab) {\n            return currentTab;\n        }\n\n        return items[0].id;\n    }, [currentTab, items]);\n\n    const handleClick = React.useCallback(\n        (tabId: string) => () => {\n            setCurrentTab(tabId);\n        },\n        [],\n    );\n\n    const TabComponent = React.useMemo(() => {\n        const findTab = items.find(({id}) => id === activeTabId);\n        return findTab?.component;\n    }, [activeTabId, items]);\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('tabs-wrapper')} role=\"tablist\">\n                {items.map(({id, title}) => {\n                    const isActive = id === activeTabId;\n\n                    return (\n                        <Button\n                            view=\"flat\"\n                            size=\"s\"\n                            className={b('item', {active: isActive})}\n                            key={title}\n                            extraProps={{\n                                role: 'tab',\n                            }}\n                            onClick={handleClick(id)}\n                        >\n                            {title}\n                        </Button>\n                    );\n                })}\n            </div>\n            <div className={b('body')}>{TabComponent && <TabComponent />}</div>\n        </div>\n    );\n};\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AAe3B,MAAM,IAAI,GAAG,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAY,EAAE,EAAE;IACvD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,UAAU,EAAE,CAAC;YACb,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,KAAK,UAAU,CAAC,CAAC;YACxD,IAAI,OAAO,EAAE,CAAC;gBACV,OAAO,OAAO,CAAC;YACnB,CAAC;QACL,CAAC;QAED,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IAC5B,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC1D,SAAS,EAAE,WAAW,IAAI,IAAI,CACjC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,OAAqB,EAAE,EAAE,CAAC,GAAG,EAAE;QAC5B,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC1B,mBAAmB,CAAC,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC;IACtD,CAAC,EACD,EAAE,CACL,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,SAAS,EAAE,SAAS,CAAC;IAChC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACjB,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,IAAI,EAAC,SAAS,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,EAAE,CAAC;oBAE1C,OAAO,CACH,KAAC,MAAM,IACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EAExC,UAAU,EAAE;4BACR,IAAI,EAAE,KAAK;yBACd,EACD,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,YAEzB,IAAI,CAAC,KAAK,IANN,IAAI,CAAC,KAAK,CAOV,CACZ,CAAC;gBACN,CAAC,CAAC,GACA,CACT,EACD,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACpB,YAAY,IAAI,CACb,KAAC,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,OAAO,EAAE,gBAAgB,EAAC,CAAC,GAAI,CACtE,GACC,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {Button} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\n\nimport './Tabs.scss';\n\nconst b = editorCn('tabs');\n\nexport interface TabItemProps {\n    id: string;\n    title: string;\n    component: React.ElementType;\n    withPadding?: boolean;\n}\n\nexport interface TabsProps {\n    className?: string;\n    items: TabItemProps[];\n    defaultTab?: string | null;\n}\n\nconst Tabs = ({className, items, defaultTab}: TabsProps) => {\n    const [currentTab, setCurrentTab] = React.useState(defaultTab);\n\n    const activeTab = React.useMemo(() => {\n        if (currentTab) {\n            const findTab = items.find(({id}) => id === currentTab);\n            if (findTab) {\n                return findTab;\n            }\n        }\n\n        return items[0] || null;\n    }, [currentTab, items]);\n\n    const [isPaddingEnabled, setIsPaddingEnabled] = React.useState<boolean>(\n        activeTab?.withPadding || true,\n    );\n\n    const handleClick = React.useCallback(\n        (tabItem: TabItemProps) => () => {\n            setCurrentTab(tabItem.id);\n            setIsPaddingEnabled(tabItem.withPadding || false);\n        },\n        [],\n    );\n\n    const TabComponent = React.useMemo(() => {\n        return activeTab?.component;\n    }, [activeTab]);\n\n    return (\n        <div className={b(null, className)}>\n            {items.length > 1 && (\n                <div className={b('tabs-wrapper')} role=\"tablist\">\n                    {items.map((item) => {\n                        const isActive = item.id === activeTab.id;\n\n                        return (\n                            <Button\n                                view=\"flat\"\n                                size=\"s\"\n                                className={b('item', {active: isActive})}\n                                key={item.title}\n                                extraProps={{\n                                    role: 'tab',\n                                }}\n                                onClick={handleClick(item)}\n                            >\n                                {item.title}\n                            </Button>\n                        );\n                    })}\n                </div>\n            )}\n            <div className={b('body')}>\n                {TabComponent && (\n                    <TabComponent className={b('item', {padding: isPaddingEnabled})} />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default Tabs;\n"]}

package/build/esm/editor-v2/constants/messages.d.ts

@@ -0,0 +1,10 @@
+export declare const MESSAGES: {
+    readonly NO_BLOCK_SELECTED: {
+        readonly title: "Блок не выбран";
+        readonly description: "Выберите блок на экране или в слоях в левом меню для редактирования его свойств";
+    };
+    readonly UNSUPPORTED_BLOCK: {
+        readonly title: "Неподдерживаемый блок";
+        readonly description: "Данный тип блока не поддерживается в редакторе. Но вы также можете отредактировать его конфигурацию вручную в меню RAW.";
+    };
+};

package/build/esm/editor-v2/constants/messages.js

@@ -0,0 +1,11 @@
+export const MESSAGES = {
+    NO_BLOCK_SELECTED: {
+        title: 'Блок не выбран',
+        description: 'Выберите блок на экране или в слоях в левом меню для редактирования его свойств',
+    },
+    UNSUPPORTED_BLOCK: {
+        title: 'Неподдерживаемый блок',
+        description: 'Данный тип блока не поддерживается в редакторе. Но вы также можете отредактировать его конфигурацию вручную в меню RAW.',
+    },
+};
+//# sourceMappingURL=messages.js.map

package/build/esm/editor-v2/constants/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"../../../../src","sources":["editor-v2/constants/messages.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,iBAAiB,EAAE;QACf,KAAK,EAAE,gBAAgB;QACvB,WAAW,EACP,iFAAiF;KACxF;IACD,iBAAiB,EAAE;QACf,KAAK,EAAE,uBAAuB;QAC9B,WAAW,EACP,yHAAyH;KAChI;CACK,CAAC","sourcesContent":["export const MESSAGES = {\n    NO_BLOCK_SELECTED: {\n        title: 'Блок не выбран',\n        description:\n            'Выберите блок на экране или в слоях в левом меню для редактирования его свойств',\n    },\n    UNSUPPORTED_BLOCK: {\n        title: 'Неподдерживаемый блок',\n        description:\n            'Данный тип блока не поддерживается в редакторе. Но вы также можете отредактировать его конфигурацию вручную в меню RAW.',\n    },\n} as const;\n"]}

package/build/esm/editor-v2/containers/BlockConfigForm/BlockConfigForm.css

@@ -1,9 +1,11 @@
+.pceditor-block-config-form_empty {
+  padding: 16px 12px;
+}
 .pceditor-block-config-form__title {
   font-family: var(--g-text-subheader-font-family);
   font-weight: var(--g-text-subheader-font-weight);
   font-size: var(--g-text-subheader-3-font-size);
   line-height: var(--g-text-subheader-3-line-height);
-  padding: 12px;
 }
 .pceditor-block-config-form__form {
   padding: 12px 0;

package/build/esm/editor-v2/containers/BlockConfigForm/BlockConfigForm.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import _ from 'lodash';
 import DynamicForm from "../../components/DynamicForm/DynamicForm.js";
+import { MessageCard } from "../../components/MessageCard/index.js";
+import { MESSAGES } from "../../constants/messages.js";
 import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
 import { generateChildrenPathFromArray } from "../../utils/index.js";
 import { editorCn } from "../../utils/cn.js";
@@ -15,12 +17,12 @@ const BlockConfigForm = ({ className }) => {
         updateField('blocks' + currentBlockPath + '.' + key, value);
     };
     if (!currentConfig) {
-        return _jsx("div", { className: b('empty'), children: "Select block for start" });
+        return (_jsx("div", { className: b({ empty: true }, className), children: _jsx(MessageCard, { title: MESSAGES.NO_BLOCK_SELECTED.title, description: MESSAGES.NO_BLOCK_SELECTED.description, theme: "info" }) }));
     }
     if (!currentSchema) {
-        return _jsxs("div", { className: b('empty'), children: ["Not supported: ", currentConfig.type] });
+        return (_jsx("div", { className: b({ empty: true }, className), children: _jsx(MessageCard, { title: MESSAGES.UNSUPPORTED_BLOCK.title, description: MESSAGES.UNSUPPORTED_BLOCK.description, theme: "warning" }) }));
     }
-    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: currentSchema.schema.name }), _jsx("div", { className: b('form'), children: _jsx(DynamicForm, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdate: onUpdate }) })] }));
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: currentSchema.schema.name }), _jsx("div", { className: b('form'), children: _jsx(DynamicForm, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdateByKey: onUpdate }) })] }));
 };
 export default BlockConfigForm;
 //# sourceMappingURL=BlockConfigForm.js.map

package/build/esm/editor-v2/containers/BlockConfigForm/BlockConfigForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockConfigForm.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx"],"names":[],"mappings":";AAAA,OAAO,CAAC,MAAM,QAAQ,CAAC;AAGvB,OAAO,WAAW,oDAAiD;AACnE,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,6BAA6B,EAAC,6BAAoB;AAC1D,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAMxC,MAAM,eAAe,GAAG,CAAC,EAAC,SAAS,EAAuB,EAAE,EAAE;IAC1D,MAAM,EAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAEtF,MAAM,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,aAAa,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,IAAI,KAAK,aAAa,EAAE,IAAI,CAAC,CAAC;IAE/F,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,uCAA8B,CAAC;IACpE,CAAC;IAED,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,gCAAkB,aAAa,CAAC,IAAI,IAAO,CAAC;IACjF,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,aAAa,CAAC,MAAM,CAAC,IAAI,GAAO,EAC7D,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,WAAW,IACR,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EACxC,QAAQ,EAAE,QAAQ,GACpB,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import _ from 'lodash';\n\nimport {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockConfigForm.scss';\n\nconst b = editorCn('block-config-form');\n\ninterface BlockConfigFormProps {\n    className?: string;\n}\n\nconst BlockConfigForm = ({className}: BlockConfigFormProps) => {\n    const {selectedBlock, content, blocks, subBlocks, updateField} = useMainEditorStore();\n\n    const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';\n\n    const currentConfig = _.get(content.blocks, currentBlockPath || '');\n    const currentSchema = [...blocks, ...subBlocks].find(({type}) => type === currentConfig?.type);\n\n    const onUpdate = (key: string, value: DynamicFormValue) => {\n        updateField('blocks' + currentBlockPath + '.' + key, value);\n    };\n\n    if (!currentConfig) {\n        return <div className={b('empty')}>Select block for start</div>;\n    }\n\n    if (!currentSchema) {\n        return <div className={b('empty')}>Not supported: {currentConfig.type}</div>;\n    }\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>{currentSchema.schema.name}</div>\n            <div className={b('form')}>\n                <DynamicForm\n                    contentConfig={currentConfig}\n                    blockConfig={currentSchema.schema.inputs}\n                    onUpdate={onUpdate}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default BlockConfigForm;\n"]}
+{"version":3,"file":"BlockConfigForm.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx"],"names":[],"mappings":";AAAA,OAAO,CAAC,MAAM,QAAQ,CAAC;AAGvB,OAAO,WAAW,oDAAiD;AACnE,OAAO,EAAC,WAAW,EAAC,8CAAqC;AACzD,OAAO,EAAC,QAAQ,EAAC,oCAAiC;AAClD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,6BAA6B,EAAC,6BAAoB;AAC1D,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAMxC,MAAM,eAAe,GAAG,CAAC,EAAC,SAAS,EAAuB,EAAE,EAAE;IAC1D,MAAM,EAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAEtF,MAAM,gBAAgB,GAAG,aAAa,CAAC,CAAC,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,aAAa,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC;IACpE,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,IAAI,KAAK,aAAa,EAAE,IAAI,CAAC,CAAC;IAE/F,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,EAAE,SAAS,CAAC,YACvC,KAAC,WAAW,IACR,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EACvC,WAAW,EAAE,QAAQ,CAAC,iBAAiB,CAAC,WAAW,EACnD,KAAK,EAAC,MAAM,GACd,GACA,CACT,CAAC;IACN,CAAC;IAED,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,IAAI,EAAC,EAAE,SAAS,CAAC,YACvC,KAAC,WAAW,IACR,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EACvC,WAAW,EAAE,QAAQ,CAAC,iBAAiB,CAAC,WAAW,EACnD,KAAK,EAAC,SAAS,GACjB,GACA,CACT,CAAC;IACN,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,aAAa,CAAC,MAAM,CAAC,IAAI,GAAO,EAC7D,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,WAAW,IACR,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EACxC,aAAa,EAAE,QAAQ,GACzB,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import _ from 'lodash';\n\nimport {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {MessageCard} from '../../components/MessageCard';\nimport {MESSAGES} from '../../constants/messages';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {generateChildrenPathFromArray} from '../../utils';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockConfigForm.scss';\n\nconst b = editorCn('block-config-form');\n\ninterface BlockConfigFormProps {\n    className?: string;\n}\n\nconst BlockConfigForm = ({className}: BlockConfigFormProps) => {\n    const {selectedBlock, content, blocks, subBlocks, updateField} = useMainEditorStore();\n\n    const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';\n\n    const currentConfig = _.get(content.blocks, currentBlockPath || '');\n    const currentSchema = [...blocks, ...subBlocks].find(({type}) => type === currentConfig?.type);\n\n    const onUpdate = (key: string, value: DynamicFormValue) => {\n        updateField('blocks' + currentBlockPath + '.' + key, value);\n    };\n\n    if (!currentConfig) {\n        return (\n            <div className={b({empty: true}, className)}>\n                <MessageCard\n                    title={MESSAGES.NO_BLOCK_SELECTED.title}\n                    description={MESSAGES.NO_BLOCK_SELECTED.description}\n                    theme=\"info\"\n                />\n            </div>\n        );\n    }\n\n    if (!currentSchema) {\n        return (\n            <div className={b({empty: true}, className)}>\n                <MessageCard\n                    title={MESSAGES.UNSUPPORTED_BLOCK.title}\n                    description={MESSAGES.UNSUPPORTED_BLOCK.description}\n                    theme=\"warning\"\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>{currentSchema.schema.name}</div>\n            <div className={b('form')}>\n                <DynamicForm\n                    contentConfig={currentConfig}\n                    blockConfig={currentSchema.schema.inputs}\n                    onUpdateByKey={onUpdate}\n                />\n            </div>\n        </div>\n    );\n};\n\nexport default BlockConfigForm;\n"]}

package/build/esm/editor-v2/containers/BlocksList/BlocksList.css

@@ -1,41 +1,42 @@
 .pceditor-blocks-list {
-  padding: 16px 12px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
-.pceditor-blocks-list__card {
-  padding: 8px;
-  cursor: grab;
-  user-select: none;
-  margin-bottom: 8px;
+.pceditor-blocks-list__search {
   display: flex;
-  flex-direction: column;
+  gap: 8px;
   align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  gap: 4px;
-  max-width: 192px;
-}
-.pceditor-blocks-list__card:active {
-  background-color: var(--g-color-base-generic-hover);
-  cursor: grabbing;
-}
-.pceditor-blocks-list__name {
-  justify-self: flex-end;
-  color: var(--g-color-text-secondary);
 }
 .pceditor-blocks-list__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  user-select: none;
+  outline: none;
   color: var(--g-color-text-secondary);
-  margin-bottom: 10px;
+  font-size: var(--g-text-subheader-1-font-size);
+  line-height: var(--g-text-subheader-1-line-height);
+  font-weight: 500;
+  border-radius: 8px;
+  transition: background-color 0.2s;
 }
-.pceditor-blocks-list__icon {
-  color: var(--g-color-text-complementary);
+.pceditor-blocks-list__title:hover {
+  background-color: var(--g-color-base-generic-hover);
+}
+.pceditor-blocks-list__title:focus {
+  outline: none;
 }
-.pceditor-blocks-list__group {
-  padding-bottom: 12px;
-  margin-top: 12px;
-  border-bottom: 1px solid var(--g-color-line-generic);
+.pceditor-blocks-list__title-icon {
+  flex-shrink: 0;
+  color: var(--g-color-text-hint);
+  transition: transform 0.2s;
 }
 .pceditor-blocks-list__group:first-child {
   margin-top: 0;
@@ -43,11 +44,19 @@
 .pceditor-blocks-list__group:last-child {
   border-bottom: none;
 }
+.pceditor-blocks-list__group_collapsed .pceditor-blocks-list__title-icon {
+  transform: rotate(0deg);
+}
+.pceditor-blocks-list__group:not(.pceditor-blocks-list__group_collapsed) .pceditor-blocks-list__title-icon {
+  transform: rotate(0deg);
+}
 .pceditor-blocks-list__group-items {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 8px;
+  margin-top: 8px;
 }
 .pceditor-blocks-list__search-icon {
   margin-left: 8px;
+  margin-right: 8px;
 }

package/build/esm/editor-v2/containers/BlocksList/BlocksList.d.ts

@@ -1,3 +1,6 @@
+import { ClassNameProps } from "../../../models/index.js";
 import './BlocksList.css';
-declare const BlocksList: () => import("react/jsx-runtime").JSX.Element;
+interface BlockListProps extends ClassNameProps {
+}
+declare const BlocksList: ({ className }: BlockListProps) => import("react/jsx-runtime").JSX.Element;
 export default BlocksList;

package/build/esm/editor-v2/containers/BlocksList/BlocksList.js

@@ -1,21 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Magnifier, SquareBars } from '@gravity-ui/icons';
-import { Card, Icon, TextInput } from '@gravity-ui/uikit';
+import { ChevronDown, ChevronRight, Folder, FolderOpen, Magnifier } from '@gravity-ui/icons';
+import { DropdownMenu, Icon, TextInput } from '@gravity-ui/uikit';
 import * as React from 'react';
+import BlockCard from "../../components/BlockCard/BlockCard.js";
 import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
 import { editorCn } from "../../utils/cn.js";
 import './BlocksList.css';
 const b = editorCn('blocks-list');
-const BlocksList = () => {
+const BlocksList = ({ className }) => {
     const { blocks, enableInsertMode } = useMainEditorStore();
     const [search, setSearch] = React.useState('');
+    const [collapsedGroups, setCollapsedGroups] = React.useState(new Set());
     const onMouseDown = React.useCallback((blockType) => {
         enableInsertMode(blockType);
     }, [enableInsertMode]);
+    const toggleGroup = React.useCallback((groupKey) => {
+        setCollapsedGroups((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(groupKey)) {
+                newSet.delete(groupKey);
+            }
+            else {
+                newSet.add(groupKey);
+            }
+            return newSet;
+        });
+    }, []);
+    const expandAll = React.useCallback(() => {
+        setCollapsedGroups(new Set());
+    }, []);
     const groups = React.useMemo(() => {
         return blocks.reduce((acc, currentBlock) => {
             const group = currentBlock.schema.group;
-            if (search && currentBlock.type.indexOf(search) === -1) {
+            if (search &&
+                currentBlock.type.toLowerCase().indexOf(search.toLowerCase()) === -1 &&
+                currentBlock.schema.name.toLowerCase().indexOf(search.toLowerCase()) === -1) {
                 return acc;
             }
             if (group) {
@@ -26,16 +45,37 @@ const BlocksList = () => {
                 acc[group].push(currentBlock);
             }
             else {
-                if (!acc['other']) {
+                if (!acc['Other']) {
                     /* eslint-disable no-param-reassign */
-                    acc['other'] = [];
+                    acc['Other'] = [];
                 }
-                acc['other'].push(currentBlock);
+                acc['Other'].push(currentBlock);
             }
             return acc;
         }, {});
     }, [blocks, search]);
-    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('search'), children: _jsx(TextInput, { hasClear: true, placeholder: "Search block", onUpdate: setSearch, value: search, startContent: _jsx(Icon, { className: b('search-icon'), data: Magnifier }) }) }), Object.entries(groups).map(([key, groupBlocks]) => (_jsxs("div", { className: b('group'), children: [_jsx("div", { className: b('title'), children: key }), _jsx("div", { className: b('group-items'), children: groupBlocks.map(({ type, schema: { name, previewImg } }) => (_jsxs(Card, { className: b('card'), onMouseDown: () => onMouseDown(type), children: [_jsx("div", { children: previewImg ? (_jsx("img", { src: previewImg, alt: "" })) : (_jsx(Icon, { className: b('icon'), size: 45, data: SquareBars })) }), _jsx("div", { className: b('name'), children: name })] }, type))) })] }, key)))] }));
+    const collapseAll = React.useCallback(() => {
+        setCollapsedGroups(new Set(Object.keys(groups)));
+    }, [groups]);
+    const allGroupsExpanded = collapsedGroups.size === 0;
+    const allGroupsCollapsed = collapsedGroups.size === Object.keys(groups).length;
+    return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('search'), children: [_jsx(TextInput, { size: "m", hasClear: true, placeholder: "Search block", onUpdate: setSearch, value: search, startContent: _jsx(Icon, { className: b('search-icon'), data: Magnifier }) }), _jsx(DropdownMenu, { items: [
+                            {
+                                action: expandAll,
+                                text: 'Раскрыть все',
+                                iconStart: _jsx(Icon, { data: FolderOpen }),
+                                disabled: allGroupsExpanded,
+                            },
+                            {
+                                action: collapseAll,
+                                text: 'Свернуть все',
+                                iconStart: _jsx(Icon, { data: Folder }),
+                                disabled: allGroupsCollapsed,
+                            },
+                        ] })] }), Object.entries(groups).map(([key, groupBlocks]) => {
+                const isCollapsed = collapsedGroups.has(key);
+                return (_jsxs("div", { className: b('group', { collapsed: isCollapsed }), children: [_jsxs("button", { className: b('title'), onClick: () => toggleGroup(key), type: "button", children: [_jsx(Icon, { className: b('title-icon'), data: isCollapsed ? ChevronRight : ChevronDown, size: 14 }), key] }), !isCollapsed && (_jsx("div", { className: b('group-items'), children: groupBlocks.map(({ type, schema: { name, previewImg } }) => (_jsx(BlockCard, { type: type, name: name, previewImg: previewImg, onMouseDown: onMouseDown }, type))) }))] }, key));
+            })] }));
 };
 export default BlocksList;
 //# sourceMappingURL=BlocksList.js.map

package/build/esm/editor-v2/containers/BlocksList/BlocksList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlocksList.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlocksList/BlocksList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Magnifier, SquareBars} from '@gravity-ui/icons';\nimport {Card, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {ItemConfig} from '../../../common/types';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlocksList.scss';\n\nconst b = editorCn('blocks-list');\n\ninterface BlockGroups {\n    [key: string]: ItemConfig[];\n}\n\nconst BlocksList = () => {\n    const {blocks, enableInsertMode} = useMainEditorStore();\n    const [search, setSearch] = React.useState('');\n\n    const onMouseDown = React.useCallback(\n        (blockType: string) => {\n            enableInsertMode(blockType);\n        },\n        [enableInsertMode],\n    );\n\n    const groups = React.useMemo(() => {\n        return blocks.reduce<BlockGroups>((acc, currentBlock) => {\n            const group = currentBlock.schema.group;\n            if (search && currentBlock.type.indexOf(search) === -1) {\n                return acc;\n            }\n            if (group) {\n                if (!acc[group]) {\n                    /* eslint-disable no-param-reassign */\n                    acc[group] = [];\n                }\n                acc[group].push(currentBlock);\n            } else {\n                if (!acc['other']) {\n                    /* eslint-disable no-param-reassign */\n                    acc['other'] = [];\n                }\n                acc['other'].push(currentBlock);\n            }\n\n            return acc;\n        }, {} as BlockGroups);\n    }, [blocks, search]);\n\n    return (\n        <div className={b()}>\n            <div className={b('search')}>\n                <TextInput\n                    hasClear\n                    placeholder=\"Search block\"\n                    onUpdate={setSearch}\n                    value={search}\n                    startContent={<Icon className={b('search-icon')} data={Magnifier} />}\n                />\n            </div>\n            {Object.entries(groups).map(([key, groupBlocks]) => (\n                <div className={b('group')} key={key}>\n                    <div className={b('title')}>{key}</div>\n                    <div className={b('group-items')}>\n                        {groupBlocks.map(({type, schema: {name, previewImg}}) => (\n                            <Card\n                                key={type}\n                                className={b('card')}\n                                onMouseDown={() => onMouseDown(type)}\n                            >\n                                <div>\n                                    {previewImg ? (\n                                        <img src={previewImg} alt=\"\" />\n                                    ) : (\n                                        <Icon className={b('icon')} size={45} data={SquareBars} />\n                                    )}\n                                </div>\n                                <div className={b('name')}>{name}</div>\n                            </Card>\n                        ))}\n                    </div>\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport default BlocksList;\n"]}
+{"version":3,"file":"BlocksList.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/BlocksList/BlocksList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC3F,OAAO,EAAC,YAAY,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,SAAS,gDAA6C;AAC7D,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAQlC,MAAM,UAAU,GAAG,CAAC,EAAC,SAAS,EAAiB,EAAE,EAAE;IAC/C,MAAM,EAAC,MAAM,EAAE,gBAAgB,EAAC,GAAG,kBAAkB,EAAE,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAc,IAAI,GAAG,EAAE,CAAC,CAAC;IAErF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,SAAiB,EAAE,EAAE;QAClB,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,gBAAgB,CAAC,CACrB,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACvD,kBAAkB,CAAC,CAAC,IAAI,EAAE,EAAE;YACxB,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACJ,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC;YACD,OAAO,MAAM,CAAC;QAClB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrC,kBAAkB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,MAAM,CAAC,MAAM,CAAc,CAAC,GAAG,EAAE,YAAY,EAAE,EAAE;YACpD,MAAM,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IACI,MAAM;gBACN,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;gBACpE,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAC7E,CAAC;gBACC,OAAO,GAAG,CAAC;YACf,CAAC;YACD,IAAI,KAAK,EAAE,CAAC;gBACR,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;oBACd,sCAAsC;oBACtC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;gBACpB,CAAC;gBACD,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;oBAChB,sCAAsC;oBACtC,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;gBACtB,CAAC;gBACD,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACpC,CAAC;YAED,OAAO,GAAG,CAAC;QACf,CAAC,EAAE,EAAiB,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,kBAAkB,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,iBAAiB,GAAG,eAAe,CAAC,IAAI,KAAK,CAAC,CAAC;IACrD,MAAM,kBAAkB,GAAG,eAAe,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IAE/E,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,SAAS,IACN,IAAI,EAAC,GAAG,EACR,QAAQ,QACR,WAAW,EAAC,cAAc,EAC1B,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,KAAC,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,GAAI,GACtE,EACF,KAAC,YAAY,IACT,KAAK,EAAE;4BACH;gCACI,MAAM,EAAE,SAAS;gCACjB,IAAI,EAAE,cAAc;gCACpB,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,GAAI;gCACrC,QAAQ,EAAE,iBAAiB;6BAC9B;4BACD;gCACI,MAAM,EAAE,WAAW;gCACnB,IAAI,EAAE,cAAc;gCACpB,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,GAAI;gCACjC,QAAQ,EAAE,kBAAkB;6BAC/B;yBACJ,GACH,IACA,EACL,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE;gBAC/C,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBAC7C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,SAAS,EAAE,WAAW,EAAC,CAAC,aAChD,kBACI,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,EAC/B,IAAI,EAAC,QAAQ,aAEb,KAAC,IAAI,IACD,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAC1B,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAC9C,IAAI,EAAE,EAAE,GACV,EACD,GAAG,IACC,EACR,CAAC,WAAW,IAAI,CACb,cAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC3B,WAAW,CAAC,GAAG,CAAC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,EAAC,EAAE,EAAE,CAAC,CACrD,KAAC,SAAS,IAEN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,IAJnB,IAAI,CAKX,CACL,CAAC,GACA,CACT,KAzBsD,GAAG,CA0BxD,CACT,CAAC;YACN,CAAC,CAAC,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {ChevronDown, ChevronRight, Folder, FolderOpen, Magnifier} from '@gravity-ui/icons';\nimport {DropdownMenu, Icon, TextInput} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {ItemConfig} from '../../../common/types';\nimport {ClassNameProps} from '../../../models';\nimport BlockCard from '../../components/BlockCard/BlockCard';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './BlocksList.scss';\n\nconst b = editorCn('blocks-list');\n\ninterface BlockGroups {\n    [key: string]: ItemConfig[];\n}\n\ninterface BlockListProps extends ClassNameProps {}\n\nconst BlocksList = ({className}: BlockListProps) => {\n    const {blocks, enableInsertMode} = useMainEditorStore();\n    const [search, setSearch] = React.useState('');\n    const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(new Set());\n\n    const onMouseDown = React.useCallback(\n        (blockType: string) => {\n            enableInsertMode(blockType);\n        },\n        [enableInsertMode],\n    );\n\n    const toggleGroup = React.useCallback((groupKey: string) => {\n        setCollapsedGroups((prev) => {\n            const newSet = new Set(prev);\n            if (newSet.has(groupKey)) {\n                newSet.delete(groupKey);\n            } else {\n                newSet.add(groupKey);\n            }\n            return newSet;\n        });\n    }, []);\n\n    const expandAll = React.useCallback(() => {\n        setCollapsedGroups(new Set());\n    }, []);\n\n    const groups = React.useMemo(() => {\n        return blocks.reduce<BlockGroups>((acc, currentBlock) => {\n            const group = currentBlock.schema.group;\n            if (\n                search &&\n                currentBlock.type.toLowerCase().indexOf(search.toLowerCase()) === -1 &&\n                currentBlock.schema.name.toLowerCase().indexOf(search.toLowerCase()) === -1\n            ) {\n                return acc;\n            }\n            if (group) {\n                if (!acc[group]) {\n                    /* eslint-disable no-param-reassign */\n                    acc[group] = [];\n                }\n                acc[group].push(currentBlock);\n            } else {\n                if (!acc['Other']) {\n                    /* eslint-disable no-param-reassign */\n                    acc['Other'] = [];\n                }\n                acc['Other'].push(currentBlock);\n            }\n\n            return acc;\n        }, {} as BlockGroups);\n    }, [blocks, search]);\n\n    const collapseAll = React.useCallback(() => {\n        setCollapsedGroups(new Set(Object.keys(groups)));\n    }, [groups]);\n\n    const allGroupsExpanded = collapsedGroups.size === 0;\n    const allGroupsCollapsed = collapsedGroups.size === Object.keys(groups).length;\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('search')}>\n                <TextInput\n                    size=\"m\"\n                    hasClear\n                    placeholder=\"Search block\"\n                    onUpdate={setSearch}\n                    value={search}\n                    startContent={<Icon className={b('search-icon')} data={Magnifier} />}\n                />\n                <DropdownMenu\n                    items={[\n                        {\n                            action: expandAll,\n                            text: 'Раскрыть все',\n                            iconStart: <Icon data={FolderOpen} />,\n                            disabled: allGroupsExpanded,\n                        },\n                        {\n                            action: collapseAll,\n                            text: 'Свернуть все',\n                            iconStart: <Icon data={Folder} />,\n                            disabled: allGroupsCollapsed,\n                        },\n                    ]}\n                />\n            </div>\n            {Object.entries(groups).map(([key, groupBlocks]) => {\n                const isCollapsed = collapsedGroups.has(key);\n                return (\n                    <div className={b('group', {collapsed: isCollapsed})} key={key}>\n                        <button\n                            className={b('title')}\n                            onClick={() => toggleGroup(key)}\n                            type=\"button\"\n                        >\n                            <Icon\n                                className={b('title-icon')}\n                                data={isCollapsed ? ChevronRight : ChevronDown}\n                                size={14}\n                            />\n                            {key}\n                        </button>\n                        {!isCollapsed && (\n                            <div className={b('group-items')}>\n                                {groupBlocks.map(({type, schema: {name, previewImg}}) => (\n                                    <BlockCard\n                                        key={type}\n                                        type={type}\n                                        name={name}\n                                        previewImg={previewImg}\n                                        onMouseDown={onMouseDown}\n                                    />\n                                ))}\n                            </div>\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default BlocksList;\n"]}

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.css

@@ -1,6 +1,4 @@
 .pceditor-global-config__title {
-  padding: 12px;
-  margin-top: 8px;
   font-family: var(--g-text-subheader-font-family);
   font-weight: var(--g-text-subheader-font-weight);
   font-size: var(--g-text-subheader-3-font-size);

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.js

@@ -9,7 +9,7 @@ const GlobalConfig = ({ className }) => {
     const onUpdate = (key, value) => {
         updateField('navigation.' + key, value);
     };
-    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: "Global Config" }), _jsx(DynamicForm, { contentConfig: content.navigation, blockConfig: global, onUpdate: onUpdate })] }));
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("div", { className: b('title'), children: "Global Config" }), _jsx(DynamicForm, { contentConfig: content.navigation, blockConfig: global, onUpdateByKey: onUpdate })] }));
 };
 export default GlobalConfig;
 //# sourceMappingURL=GlobalConfig.js.map

package/build/esm/editor-v2/containers/GlobalConfig/GlobalConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/GlobalConfig/GlobalConfig.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,oDAAiD;AACnE,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,aAAa,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,KAAC,WAAW,IACR,aAAa,EAAE,OAAO,CAAC,UAAU,EACjC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,GACpB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './GlobalConfig.scss';\n\nconst b = editorCn('global-config');\n\nexport interface GlobalConfigProps {\n    className?: string;\n}\n\nconst GlobalConfig = ({className}: GlobalConfigProps) => {\n    const {global, content, updateField} = useMainEditorStore();\n\n    const onUpdate = (key: string, value: DynamicFormValue) => {\n        updateField('navigation.' + key, value);\n    };\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>Global Config</div>\n            <DynamicForm\n                contentConfig={content.navigation}\n                blockConfig={global}\n                onUpdate={onUpdate}\n            />\n        </div>\n    );\n};\n\nexport default GlobalConfig;\n"]}
+{"version":3,"file":"GlobalConfig.js","sourceRoot":"../../../../../src","sources":["editor-v2/containers/GlobalConfig/GlobalConfig.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,oDAAiD;AACnE,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,QAAQ,EAAC,0BAAuB;AAExC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMpC,MAAM,YAAY,GAAG,CAAC,EAAC,SAAS,EAAoB,EAAE,EAAE;IACpD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAC,GAAG,kBAAkB,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,KAAuB,EAAE,EAAE;QACtD,WAAW,CAAC,aAAa,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,8BAAqB,EAC/C,KAAC,WAAW,IACR,aAAa,EAAE,OAAO,CAAC,UAAU,EACjC,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,QAAQ,GACzB,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {DynamicFormValue} from '../../../common/types';\nimport DynamicForm from '../../components/DynamicForm/DynamicForm';\nimport {useMainEditorStore} from '../../hooks/useMainEditorStore';\nimport {editorCn} from '../../utils/cn';\n\nimport './GlobalConfig.scss';\n\nconst b = editorCn('global-config');\n\nexport interface GlobalConfigProps {\n    className?: string;\n}\n\nconst GlobalConfig = ({className}: GlobalConfigProps) => {\n    const {global, content, updateField} = useMainEditorStore();\n\n    const onUpdate = (key: string, value: DynamicFormValue) => {\n        updateField('navigation.' + key, value);\n    };\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('title')}>Global Config</div>\n            <DynamicForm\n                contentConfig={content.navigation}\n                blockConfig={global}\n                onUpdateByKey={onUpdate}\n            />\n        </div>\n    );\n};\n\nexport default GlobalConfig;\n"]}