@gravity-ui/dashkit 8.2.0 → 8.3.0-beta.0

package/build/cjs/components/DashKit/DashKit.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Config, ConfigItem, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
-import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
+import { ContextProps, DashKiGroup, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -14,6 +14,7 @@ interface DashKitDefaultProps {
     onChange: (data: {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
+        groups?: DashKiGroup[];
     }) => void;
     onDrop: (dropProps: ItemDropProps) => void;
     defaultGlobalParams: GlobalParams;
@@ -23,6 +24,7 @@ interface DashKitDefaultProps {
     context: ContextProps;
     noOverlay: boolean;
     focusable?: boolean;
+    groups?: DashKiGroup[];
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }

package/build/cjs/components/DashKit/DashKit.js

@@ -44,11 +44,7 @@ class DashKit extends react_1.default.PureComponent {
         return utils_1.UpdateManager.removeItem({ id, config, itemsStateAndParams });
     }
     render() {
-        return (react_1.default.createElement(DashKitView_1.default
-        // @ts-ignore
-        , Object.assign({ 
-            // @ts-ignore
-            registerManager: registerManager, ref: this.metaRef }, this.props)));
+        return react_1.default.createElement(DashKitView_1.default, Object.assign({ registerManager: registerManager, ref: this.metaRef }, this.props));
     }
     getItemsMeta() {
         var _a;

package/build/cjs/components/GridLayout/GridLayout.d.ts

@@ -18,12 +18,15 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         adjustedWidgetLayout: any;
     }) => void;
     getItemsMeta: () => any;
+    getActiveLayout(): any;
+    mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
     _onStart: () => void;
-    _onStop: (newLayout: any) => void;
+    _onStop: (group: any, newLayout: any) => void;
     _onDropDragOver: (e: any) => any;
-    _onDrop: (layout: any, item: any, e: any) => false | undefined;
+    _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
-    render(): JSX.Element;
+    renderGroup(group: any, renderLayout: any, renderItems: any, offset?: number): JSX.Element;
+    render(): any;
 }
 import React from 'react';

package/build/cjs/components/GridLayout/GridLayout.js

@@ -35,13 +35,14 @@ class GridLayout extends react_1.default.PureComponent {
                 return;
             this.setState({ isDragging: true });
         };
-        this._onStop = (newLayout) => {
+        this._onStop = (group, newLayout) => {
             const { layoutChange, onDrop, temporaryLayout } = this.context;
+            const groupedLayout = this.mergeGroupsLayout(group, newLayout);
             if (temporaryLayout) {
-                onDrop === null || onDrop === void 0 ? void 0 : onDrop(newLayout, newLayout.find(({ i }) => i === constants_1.TEMPORARY_ITEM_ID));
+                onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, groupedLayout.find(({ i }) => i === constants_1.TEMPORARY_ITEM_ID));
             }
             else {
-                layoutChange(newLayout);
+                layoutChange(groupedLayout);
             }
             this.setState({ isDragging: false });
         };
@@ -52,7 +53,7 @@ class GridLayout extends react_1.default.PureComponent {
             }
             return onDropDragOver(e);
         };
-        this._onDrop = (layout, item, e) => {
+        this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
                 return false;
             }
@@ -60,7 +61,11 @@ class GridLayout extends react_1.default.PureComponent {
             if (!editMode) {
                 return false;
             }
-            onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
+            if (group !== constants_1.DEFAULT_GROUP) {
+                item.parent = group;
+            }
+            const groupedLayout = this.mergeGroupsLayout(group, newLayout, item);
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, item, e);
         };
         this.pluginsRefs = [];
         this.state = {
@@ -80,6 +85,29 @@ class GridLayout extends react_1.default.PureComponent {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
     }
+    getActiveLayout() {
+        const { layout, temporaryLayout } = this.context;
+        return (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout;
+    }
+    mergeGroupsLayout(group, newLayout, temporaryItem) {
+        const renderLayout = this.getActiveLayout();
+        const itemsByGroup = renderLayout.reduce((memo, item) => {
+            memo[item.i] = item;
+            return memo;
+        }, temporaryItem ? { [temporaryItem.i]: temporaryItem } : {});
+        const newItemsLayoutById = newLayout.reduce((memo, item) => {
+            const parent = itemsByGroup[item.i].parent;
+            memo[item.i] = Object.assign(Object.assign({}, item), { parent });
+            return memo;
+        }, {});
+        return renderLayout.map((currentItem) => {
+            const itemParent = itemsByGroup[currentItem.i].parent || constants_1.DEFAULT_GROUP;
+            if (itemParent === group) {
+                return newItemsLayoutById[currentItem.i];
+            }
+            return currentItem;
+        });
+    }
     reloadItems() {
         const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
         const { isPageHidden } = this.state;
@@ -103,25 +131,84 @@ class GridLayout extends react_1.default.PureComponent {
         const { type } = temporaryLayout.dragProps;
         return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
     }
-    render() {
-        const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
-        this.pluginsRefs.length = config.items.length;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+    renderGroup(group, renderLayout, renderItems, offset = 0) {
+        const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { key: `group_${group}`, layout: renderLayout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
                 onDropDragOver: this._onDropDragOver,
-                onDrop: this._onDrop,
+                onDrop: (...args) => this._onDrop(group, ...args),
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
-            config.items.map((item, i) => {
+            renderItems.map((item, i) => {
                 return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
-                        this.pluginsRefs[i] = pluginRef;
-                    }, key: item.id, id: item.id, item: item, layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+                        this.pluginsRefs[offset + i] = pluginRef;
+                    }, key: item.id, id: item.id, item: item, layout: renderLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
             }),
             this.renderTemporaryPlaceholder()));
     }
+    render() {
+        const { config, groups, editMode } = this.context;
+        this.pluginsRefs.length = config.items.length;
+        const defaultRenderLayout = [];
+        const defaultRenderItems = [];
+        const layoutMap = {};
+        const groupedLayout = this.getActiveLayout().reduce((memo, item) => {
+            if (item.parent) {
+                if (!memo[item.parent]) {
+                    memo[item.parent] = [];
+                }
+                memo[item.parent].push(item);
+                layoutMap[item.i] = item.parent;
+            }
+            else {
+                defaultRenderLayout.push(item);
+            }
+            return memo;
+        }, []);
+        const itemsByGroup = config.items.reduce((memo, item) => {
+            const group = layoutMap[item.id];
+            if (group) {
+                if (!memo[group]) {
+                    memo[group] = [];
+                }
+                memo[group].push(item);
+            }
+            else {
+                defaultRenderItems.push(item);
+            }
+            return memo;
+        }, {});
+        let offset = 0;
+        if (groups) {
+            return groups.map((group) => {
+                const id = group.id || constants_1.DEFAULT_GROUP;
+                let element;
+                if (id === constants_1.DEFAULT_GROUP) {
+                    element = this.renderGroup(constants_1.DEFAULT_GROUP, defaultRenderLayout, defaultRenderItems, offset);
+                    offset += defaultRenderItems.length;
+                }
+                else {
+                    element = this.renderGroup(id, groupedLayout[id], itemsByGroup[id], offset);
+                    offset += itemsByGroup[id].length;
+                }
+                if (group.render) {
+                    return group.render(id, element, {
+                        config,
+                        editMode,
+                        items: itemsByGroup[id],
+                        layout: groupedLayout[id],
+                    });
+                }
+                return element;
+            });
+        }
+        else {
+            return this.renderGroup(constants_1.DEFAULT_GROUP, defaultRenderLayout, defaultRenderItems, offset);
+        }
+    }
 }
 GridLayout.contextType = DashKitContext_1.DashKitContext;
 exports.default = GridLayout;

package/build/cjs/components/GridLayout/ReactGridLayout.js

@@ -6,14 +6,29 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
 const constants_1 = require("../../constants");
 class DragOverLayout extends react_grid_layout_1.default {
-    constructor() {
-        super(...arguments);
+    constructor(...args) {
+        super(...args);
         this.dragReset = () => {
             if (this.dragEnterCounter) {
                 this.dragEnterCounter = 0;
                 this.removeDroppingPlaceholder();
             }
         };
+        this.mouseLeaveHandler = (e) => {
+            var _a;
+            const rect = ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current.getBoundingClientRect()) || {};
+            if (rect.bottom <= e.clientY ||
+                rect.top >= e.clientY ||
+                rect.left >= e.clientX ||
+                rect.right <= e.clientX) {
+                this.dragReset();
+            }
+        };
+        const oldonDrag = this.onDrag;
+        this.onDrag = (i, x, y, sintE) => {
+            oldonDrag(i, x, y, sintE);
+            this.mouseLeaveHandler(sintE.e);
+        };
     }
     componentDidMount() {
         var _a;

package/build/cjs/constants/common.d.ts

@@ -10,3 +10,4 @@ export declare const MenuItems: {
 };
 export declare const DEFAULT_WIDGET_HEIGHT = 3;
 export declare const DEFAULT_WIDGET_WIDTH = 3;
+export declare const DEFAULT_GROUP = "__default";

package/build/cjs/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
+exports.DEFAULT_GROUP = exports.DEFAULT_WIDGET_WIDTH = exports.DEFAULT_WIDGET_HEIGHT = exports.MenuItems = exports.TEMPORARY_ITEM_ID = exports.OVERLAY_CLASS_NAME = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
 exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
 exports.DEFAULT_NAMESPACE = 'default';
 exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
@@ -13,3 +13,4 @@ exports.MenuItems = {
 };
 exports.DEFAULT_WIDGET_HEIGHT = 3;
 exports.DEFAULT_WIDGET_WIDTH = 3;
+exports.DEFAULT_GROUP = '__default';

package/build/cjs/hocs/withContext.js

@@ -4,6 +4,7 @@ exports.withContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const common_1 = require("../constants/common");
 const DashKitContext_1 = require("../context/DashKitContext");
 const shared_1 = require("../shared");
@@ -22,10 +23,11 @@ function useMemoStateContext(props) {
     const outerDnDEnable = Boolean(dndContext);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
-    const onChange = react_1.default.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
+    const onChange = react_1.default.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams, groups = props.groups, }) => {
         if (!((0, isEqual_1.default)(config, props.config) &&
-            (0, isEqual_1.default)(itemsStateAndParams, props.itemsStateAndParams))) {
-            props.onChange({ config, itemsStateAndParams });
+            (0, isEqual_1.default)(itemsStateAndParams, props.itemsStateAndParams) &&
+            (0, isEqual_1.default)(groups, props.groups))) {
+            props.onChange({ config, itemsStateAndParams, groups });
         }
     }, [props.config, props.itemsStateAndParams, props.onChange]);
     // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
@@ -171,6 +173,7 @@ function useMemoStateContext(props) {
         }
         return false;
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDropProp = props.onDrop;
     const onDrop = react_1.default.useCallback((newLayout, item) => {
         if (!dragProps) {
             return;
@@ -179,23 +182,23 @@ function useMemoStateContext(props) {
             data: newLayout,
             dragProps,
         });
-        const { i, w, h, x, y } = item;
-        props.onDrop({
+        onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
-                if (l.i !== i) {
-                    memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
+                if (l.i !== item.i) {
+                    memo.push((0, pick_1.default)(l, ['i', 'h', 'w', 'x', 'y', 'parent']));
                 }
                 return memo;
             }, []),
-            itemLayout: { w, h, x, y },
+            itemLayout: (0, pick_1.default)(item, ['i', 'h', 'w', 'x', 'y', 'parent']),
             commit: resetTemporaryLayout,
             dragProps,
         });
-    }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
+    }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
     return react_1.default.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,
         config: props.config,
+        groups: props.groups,
         context: props.context,
         noOverlay: props.noOverlay,
         focusable: props.focusable,
@@ -224,6 +227,7 @@ function useMemoStateContext(props) {
         resultLayout,
         temporaryLayout,
         props.config,
+        props.groups,
         props.context,
         props.noOverlay,
         props.focusable,

package/build/cjs/hooks/useCalcLayout.d.ts

@@ -6,6 +6,7 @@ export declare const useCalcPropsLayout: (config: Config, registerManager: Regis
     w: number;
     x: number;
     y: number;
+    parent?: string | undefined;
     minW: number;
     minH: number;
     maxW?: number | undefined;

package/build/cjs/shared/modules/state-and-params.d.ts

@@ -5,9 +5,10 @@ export interface GetItemsParamsArg {
     config: Config;
     itemsStateAndParams: ItemsStateAndParams;
     plugins: PluginBase[];
+    useStateAsInitial?: boolean;
 }
 type GetItemsParamsReturn = Record<string, StringParams | Record<string, StringParams>>;
-export declare function getItemsParams({ defaultGlobalParams, globalParams, config, itemsStateAndParams, plugins, }: GetItemsParamsArg): GetItemsParamsReturn;
+export declare function getItemsParams({ defaultGlobalParams, globalParams, config, itemsStateAndParams, plugins, useStateAsInitial, }: GetItemsParamsArg): GetItemsParamsReturn;
 export declare function getItemsState({ config, itemsStateAndParams, }: {
     config: Config;
     itemsStateAndParams: ItemsStateAndParams;

package/build/cjs/shared/modules/state-and-params.js

@@ -5,7 +5,18 @@ const tslib_1 = require("tslib");
 const groupBy_1 = tslib_1.__importDefault(require("lodash/groupBy"));
 const constants_1 = require("../constants");
 const helpers_1 = require("./helpers");
-function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDefaultsByNamespace, getMergedParams, defaultGlobalParams, globalParams, isFirstVersion, queueData, }) {
+const getParamsFromStateAndParams = ({ itemsStateAndParams, parentItemId, item, }) => {
+    const widgetId = parentItemId || item.id;
+    if (!(widgetId in itemsStateAndParams)) {
+        return {};
+    }
+    const stateAndParams = itemsStateAndParams;
+    const itemParams = parentItemId
+        ? Object.assign({}, stateAndParams[widgetId].params[item.id])
+        : Object.assign({}, stateAndParams[widgetId].params);
+    return itemParams;
+};
+function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDefaultsByNamespace, getMergedParams, defaultGlobalParams, globalParams, isFirstVersion, queueData, parentItemId, useStateAsInitial, }) {
     var _a, _b;
     const { id, namespace } = item;
     let defaultWidgetParams = {};
@@ -24,7 +35,9 @@ function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDe
     // default parameters to begin with
     affectingItemsWithDefaults.reduceRight((defaultParams, itemWithDefaults) => {
         return Object.assign(Object.assign({}, defaultParams), getMergedParams(itemWithDefaults.defaults || {}));
-    }, {}), getMergedParams(globalParams));
+    }, {}), getMergedParams(globalParams), useStateAsInitial
+        ? getParamsFromStateAndParams({ parentItemId, item, itemsStateAndParams })
+        : {});
     if (isFirstVersion) {
         itemParams = Object.assign(itemParams, ((_b = itemsStateAndParams === null || itemsStateAndParams === void 0 ? void 0 : itemsStateAndParams[id]) === null || _b === void 0 ? void 0 : _b.params) || {});
     }
@@ -49,7 +62,7 @@ function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDe
     }
     return Object.assign(Object.assign({}, defaultWidgetParams), itemParams);
 }
-function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, }) {
+function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, useStateAsInitial, }) {
     const { aliases, connections } = config;
     const items = (0, helpers_1.prerenderItems)({ items: config.items, plugins });
     const isFirstVersion = (0, helpers_1.getCurrentVersion)(itemsStateAndParams) === 1;
@@ -92,10 +105,11 @@ function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, i
             globalParams,
             isFirstVersion,
             queueData,
+            useStateAsInitial,
         };
         if ((0, helpers_1.isItemWithGroup)(item)) {
             const groupParams = item.data.group.reduce((groupItemParams, groupItem) => {
-                groupItemParams[groupItem.id] = getItemParams(Object.assign({ item: groupItem }, paramsOptions));
+                groupItemParams[groupItem.id] = getItemParams(Object.assign({ item: groupItem, parentItemId: item.id }, paramsOptions));
                 return groupItemParams;
             }, {});
             return Object.assign(Object.assign({}, itemsParams), { [id]: groupParams });

package/build/cjs/shared/types/config.d.ts

@@ -1,5 +1,8 @@
 import { StringParams } from './common';
-export interface ConfigLayout {
+export interface AdditionalWidgetLayout {
+    parent?: string;
+}
+export interface ConfigLayout extends AdditionalWidgetLayout {
     i: string;
     h: number;
     w: number;

package/build/cjs/typings/common.d.ts

@@ -1,6 +1,7 @@
 import type ReactGridLayout from 'react-grid-layout';
 import type { OverlayCustomControlItem } from '../components/OverlayControls/OverlayControls';
 import { MenuItems } from '../constants';
+import { AdditionalWidgetLayout } from '../shared';
 export interface Settings {
     gridLayout?: ReactGridLayout.ReactGridLayoutProps;
     theme?: string;
@@ -15,7 +16,7 @@ export interface SettingsProps {
 export interface ContextProps {
     [key: string]: any;
 }
-export interface WidgetLayout {
+export interface WidgetLayout extends AdditionalWidgetLayout {
     i: string;
     w: number;
     h: number;

package/build/cjs/typings/config.d.ts

@@ -1,4 +1,5 @@
-import type { ConfigItem, ConfigLayout } from '../shared';
+/// <reference types="react" />
+import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
     namespace?: string;
@@ -11,3 +12,13 @@ export type SetItemOptions = {
 export type SetNewItemOptions = SetItemOptions & {
     updateLayout?: ConfigLayout[];
 };
+export interface DashkitGroupRenderProps {
+    config: Config;
+    editMode: boolean;
+    items: ConfigItem[];
+    layout: ConfigLayout[];
+}
+export interface DashKiGroup {
+    id?: string;
+    render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;
+}

package/build/cjs/typings/plugin.d.ts

@@ -23,16 +23,7 @@ export interface PluginWidgetProps<T = StringParams> {
         adjustedWidgetLayout?: WidgetLayout;
     }) => void;
 }
-export interface PluginDefaultLayout {
-    w?: number;
-    h?: number;
-    x?: number;
-    y?: number;
-    minW?: number;
-    maxW?: number;
-    minH?: number;
-    maxH?: number;
-}
+export type PluginDefaultLayout = Partial<Omit<WidgetLayout, 'i'>>;
 export interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {
     defaultLayout?: PluginDefaultLayout;
     renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;

package/build/cjs/utils/update-manager.d.ts

@@ -1,4 +1,4 @@
-import type { Config, ConfigItem, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
+import type { Config, ConfigItem, ConfigItemGroup, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
 import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
@@ -13,6 +13,13 @@ interface ChangeStateAndParamsArg {
     stateAndParams: ItemStateAndParams;
     options?: ItemStateAndParamsChangeOptions;
 }
+export declare const getChangedParams: ({ initiatorItem, stateAndParams, itemsStateAndParams, }: {
+    initiatorItem: ConfigItem | ConfigItemGroup;
+    stateAndParams: ItemStateAndParams;
+    itemsStateAndParams: ItemsStateAndParams;
+}) => {
+    [x: string]: string | string[];
+};
 export declare class UpdateManager {
     static addItem({ item, namespace, layout, config, options, }: {
         item: AddConfigItem;

package/build/cjs/utils/update-manager.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UpdateManager = void 0;
+exports.UpdateManager = exports.getChangedParams = void 0;
 const tslib_1 = require("tslib");
 const immutability_helper_1 = tslib_1.__importStar(require("immutability-helper"));
 const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
@@ -78,6 +78,12 @@ function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams, pa
             : allowedParams;
     }
     const stateParamsConf = stateAndParams.params;
+    // check if structure is StringParams or Record<string, StringParams>
+    // if it's Record<string, StringParams>, then this is a group application of params
+    // and checking for comparison of allowedParams and stateParamsConf is not necessary
+    const isGroupParamsApply = typeof (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) === 'object' &&
+        (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) !== null &&
+        !Array.isArray(stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]);
     if ((0, shared_1.isItemWithTabs)(item)) {
         let tab;
         if ('state' in stateAndParams && ((_a = stateAndParams.state) === null || _a === void 0 ? void 0 : _a.tabId)) {
@@ -90,14 +96,11 @@ function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams, pa
         allowedParams = (0, pick_1.default)(stateParamsConf, Object.keys((tab === null || tab === void 0 ? void 0 : tab.params) || {}));
     }
     else {
-        // check if structure is StringParams or Record<string, StringParams>
-        const paramsConf = typeof (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) === 'object' &&
-            !Array.isArray(stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id])
-            ? stateParamsConf[item.id]
-            : stateParamsConf;
+        const paramsConf = isGroupParamsApply ? stateParamsConf[item.id] : stateParamsConf;
         allowedParams = (0, pick_1.default)(paramsConf, Object.keys(item.defaults || {}));
     }
-    if (Object.keys(allowedParams || {}).length !== Object.keys(stateParamsConf || {}).length) {
+    if (!isGroupParamsApply &&
+        Object.keys(allowedParams || {}).length !== Object.keys(stateParamsConf || {}).length) {
         console.warn('Параметры, которых нет в defaults, будут проигнорированы!');
     }
     return allowedParams;
@@ -180,6 +183,12 @@ function getNewItemData({ item, config, counter: argsCounter, salt, options }) {
     }
     return { data, counter, excludeIds };
 }
+const getChangedParams = ({ initiatorItem, stateAndParams, itemsStateAndParams, }) => {
+    const allowableParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams);
+    const allowableActionParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams, { type: 'actionParams', returnPrefix: true });
+    return Object.assign(Object.assign({}, allowableParams), allowableActionParams);
+};
+exports.getChangedParams = getChangedParams;
 function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStateAndParams, stateAndParams, config, unusedIds, }) {
     var _a;
     const meta = (0, shared_1.addGroupToQueue)({
@@ -192,9 +201,12 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
     const currentItemParams = (_a = itemsStateAndParams[initiatorId]) === null || _a === void 0 ? void 0 : _a.params;
     for (const groupItem of initiatorItem.data.group) {
         if (groupItemIds.includes(groupItem.id)) {
-            const allowableParams = getAllowableChangedParams(groupItem, stateAndParams, itemsStateAndParams);
-            const allowableActionParams = getAllowableChangedParams(groupItem, stateAndParams, itemsStateAndParams, { type: 'actionParams', returnPrefix: true });
-            updatedItems[groupItem.id] = Object.assign(Object.assign({}, allowableParams), allowableActionParams);
+            const changedParams = (0, exports.getChangedParams)({
+                initiatorItem: groupItem,
+                stateAndParams,
+                itemsStateAndParams,
+            });
+            updatedItems[groupItem.id] = changedParams;
             continue;
         }
         if (currentItemParams && currentItemParams[groupItem.id]) {
@@ -222,7 +234,7 @@ class UpdateManager {
         const newIdData = (0, get_new_id_1.getNewId)({ config, salt, counter, excludeIds: newItemData.excludeIds });
         counter = newIdData.counter;
         const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
-        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y']);
+        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y', 'parent']);
         if (options.updateLayout) {
             const byId = options.updateLayout.reduce((memo, t) => {
                 memo[t.i] = t;
@@ -303,7 +315,7 @@ class UpdateManager {
     static updateLayout({ layout, config }) {
         return (0, immutability_helper_1.default)(config, {
             layout: {
-                $set: layout.map(({ x, y, w, h, i }) => ({ x, y, w, h, i })),
+                $set: layout.map((item) => (0, pick_1.default)(item, ['i', 'h', 'w', 'x', 'y', 'parent'])),
             },
         });
     }
@@ -354,8 +366,11 @@ class UpdateManager {
             });
         }
         if ('params' in stateAndParams) {
-            const allowableParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams);
-            const allowableActionParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams, { type: 'actionParams', returnPrefix: true });
+            const changedParams = (0, exports.getChangedParams)({
+                initiatorItem,
+                stateAndParams,
+                itemsStateAndParams,
+            });
             const tabId = (0, shared_1.isItemWithTabs)(initiatorItem)
                 ? newTabId || (0, shared_1.resolveItemInnerId)({ item: initiatorItem, itemsStateAndParams })
                 : undefined;
@@ -370,7 +385,7 @@ class UpdateManager {
                 $unset: unusedIds,
                 [initiatorId]: {
                     $auto: Object.assign({ params: {
-                            [commandUpdateParams]: Object.assign(Object.assign({}, allowableParams), allowableActionParams),
+                            [commandUpdateParams]: changedParams,
                         } }, (hasState ? { state: { $set: stateAndParams.state } } : {})),
                 },
                 [shared_1.META_KEY]: { $set: meta },

package/build/esm/components/DashKit/DashKit.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Config, ConfigItem, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
-import { ContextProps, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
+import { ContextProps, DashKiGroup, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -14,6 +14,7 @@ interface DashKitDefaultProps {
     onChange: (data: {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
+        groups?: DashKiGroup[];
     }) => void;
     onDrop: (dropProps: ItemDropProps) => void;
     defaultGlobalParams: GlobalParams;
@@ -23,6 +24,7 @@ interface DashKitDefaultProps {
     context: ContextProps;
     noOverlay: boolean;
     focusable?: boolean;
+    groups?: DashKiGroup[];
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }