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

package/build/esm/components/DashKit/DashKit.js

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

package/build/esm/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/esm/components/GridLayout/GridLayout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID } from '../../constants';
+import { DEFAULT_GROUP, OVERLAY_CONTROLS_CLASS_NAME, TEMPORARY_ITEM_ID } from '../../constants';
 import { DashKitContext } from '../../context/DashKitContext';
 import GridItem from '../GridItem/GridItem';
 import { Layout } from './ReactGridLayout';
@@ -32,13 +32,14 @@ class GridLayout extends React.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 === TEMPORARY_ITEM_ID));
+                onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, groupedLayout.find(({ i }) => i === TEMPORARY_ITEM_ID));
             }
             else {
-                layoutChange(newLayout);
+                layoutChange(groupedLayout);
             }
             this.setState({ isDragging: false });
         };
@@ -49,7 +50,7 @@ class GridLayout extends React.PureComponent {
             }
             return onDropDragOver(e);
         };
-        this._onDrop = (layout, item, e) => {
+        this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
                 return false;
             }
@@ -57,7 +58,11 @@ class GridLayout extends React.PureComponent {
             if (!editMode) {
                 return false;
             }
-            onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
+            if (group !== 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 = {
@@ -77,6 +82,29 @@ class GridLayout extends React.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 || DEFAULT_GROUP;
+            if (itemParent === group) {
+                return newItemsLayoutById[currentItem.i];
+            }
+            return currentItem;
+        });
+    }
     reloadItems() {
         const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
         const { isPageHidden } = this.state;
@@ -100,25 +128,84 @@ class GridLayout extends React.PureComponent {
         const { type } = temporaryLayout.dragProps;
         return (React.createElement(GridItem, { 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.createElement(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.createElement(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: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
-            config.items.map((item, i) => {
+            renderItems.map((item, i) => {
                 return (React.createElement(GridItem, { 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 || DEFAULT_GROUP;
+                let element;
+                if (id === DEFAULT_GROUP) {
+                    element = this.renderGroup(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(DEFAULT_GROUP, defaultRenderLayout, defaultRenderItems, offset);
+        }
+    }
 }
 GridLayout.contextType = DashKitContext;
 export default GridLayout;

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

@@ -2,14 +2,29 @@ import React from 'react';
 import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
 import { OVERLAY_CLASS_NAME } from '../../constants';
 class DragOverLayout extends ReactGridLayout {
-    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/esm/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/esm/constants/common.js

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

package/build/esm/hocs/withContext.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
+import pick from 'lodash/pick';
 import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID } from '../constants/common';
 import { DashKitContext, DashKitDnDContext } from '../context/DashKitContext';
 import { getItemsParams, getItemsState } from '../shared';
@@ -18,10 +19,11 @@ function useMemoStateContext(props) {
     const outerDnDEnable = Boolean(dndContext);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = React.useState(0);
-    const onChange = React.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
+    const onChange = React.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams, groups = props.groups, }) => {
         if (!(isEqual(config, props.config) &&
-            isEqual(itemsStateAndParams, props.itemsStateAndParams))) {
-            props.onChange({ config, itemsStateAndParams });
+            isEqual(itemsStateAndParams, props.itemsStateAndParams) &&
+            isEqual(groups, props.groups))) {
+            props.onChange({ config, itemsStateAndParams, groups });
         }
     }, [props.config, props.itemsStateAndParams, props.onChange]);
     // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
@@ -167,6 +169,7 @@ function useMemoStateContext(props) {
         }
         return false;
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
+    const onDropProp = props.onDrop;
     const onDrop = React.useCallback((newLayout, item) => {
         if (!dragProps) {
             return;
@@ -175,23 +178,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(pick(l, ['i', 'h', 'w', 'x', 'y', 'parent']));
                 }
                 return memo;
             }, []),
-            itemLayout: { w, h, x, y },
+            itemLayout: pick(item, ['i', 'h', 'w', 'x', 'y', 'parent']),
             commit: resetTemporaryLayout,
             dragProps,
         });
-    }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
+    }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
     return React.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,
         config: props.config,
+        groups: props.groups,
         context: props.context,
         noOverlay: props.noOverlay,
         focusable: props.focusable,
@@ -220,6 +223,7 @@ function useMemoStateContext(props) {
         resultLayout,
         temporaryLayout,
         props.config,
+        props.groups,
         props.context,
         props.noOverlay,
         props.focusable,

package/build/esm/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/esm/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/esm/shared/modules/state-and-params.js

@@ -1,7 +1,18 @@
 import groupBy from 'lodash/groupBy';
 import { META_KEY } from '../constants';
 import { formQueueData, getCurrentVersion, getMapItemsIgnores, hasActionParam, isItemWithGroup, isItemWithTabs, mergeParamsWithAliases, pickActionParamsFromParams, pickExceptActionParamsFromParams, prerenderItems, resolveItemInnerId, } from './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 = {};
@@ -20,7 +31,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) || {});
     }
@@ -45,7 +58,7 @@ function getItemParams({ item, itemsStateAndParams, mapItemsIgnores, itemsWithDe
     }
     return Object.assign(Object.assign({}, defaultWidgetParams), itemParams);
 }
-export function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, }) {
+export function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, config, itemsStateAndParams, plugins, useStateAsInitial, }) {
     const { aliases, connections } = config;
     const items = prerenderItems({ items: config.items, plugins });
     const isFirstVersion = getCurrentVersion(itemsStateAndParams) === 1;
@@ -88,10 +101,11 @@ export function getItemsParams({ defaultGlobalParams = {}, globalParams = {}, co
             globalParams,
             isFirstVersion,
             queueData,
+            useStateAsInitial,
         };
         if (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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/utils/update-manager.js

@@ -74,6 +74,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 (isItemWithTabs(item)) {
         let tab;
         if ('state' in stateAndParams && ((_a = stateAndParams.state) === null || _a === void 0 ? void 0 : _a.tabId)) {
@@ -86,14 +92,11 @@ function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams, pa
         allowedParams = pick(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 = pick(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;
@@ -176,6 +179,11 @@ function getNewItemData({ item, config, counter: argsCounter, salt, options }) {
     }
     return { data, counter, excludeIds };
 }
+export 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);
+};
 function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStateAndParams, stateAndParams, config, unusedIds, }) {
     var _a;
     const meta = addGroupToQueue({
@@ -188,9 +196,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 = getChangedParams({
+                initiatorItem: groupItem,
+                stateAndParams,
+                itemsStateAndParams,
+            });
+            updatedItems[groupItem.id] = changedParams;
             continue;
         }
         if (currentItemParams && currentItemParams[groupItem.id]) {
@@ -218,7 +229,7 @@ export class UpdateManager {
         const newIdData = 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 = pick(layout, ['h', 'w', 'x', 'y']);
+        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y', 'parent']);
         if (options.updateLayout) {
             const byId = options.updateLayout.reduce((memo, t) => {
                 memo[t.i] = t;
@@ -299,7 +310,7 @@ export class UpdateManager {
     static updateLayout({ layout, config }) {
         return update(config, {
             layout: {
-                $set: layout.map(({ x, y, w, h, i }) => ({ x, y, w, h, i })),
+                $set: layout.map((item) => pick(item, ['i', 'h', 'w', 'x', 'y', 'parent'])),
             },
         });
     }
@@ -350,8 +361,11 @@ export class UpdateManager {
             });
         }
         if ('params' in stateAndParams) {
-            const allowableParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams);
-            const allowableActionParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams, { type: 'actionParams', returnPrefix: true });
+            const changedParams = getChangedParams({
+                initiatorItem,
+                stateAndParams,
+                itemsStateAndParams,
+            });
             const tabId = isItemWithTabs(initiatorItem)
                 ? newTabId || resolveItemInnerId({ item: initiatorItem, itemsStateAndParams })
                 : undefined;
@@ -366,7 +380,7 @@ export class UpdateManager {
                 $unset: unusedIds,
                 [initiatorId]: {
                     $auto: Object.assign({ params: {
-                            [commandUpdateParams]: Object.assign(Object.assign({}, allowableParams), allowableActionParams),
+                            [commandUpdateParams]: changedParams,
                         } }, (hasState ? { state: { $set: stateAndParams.state } } : {})),
                 },
                 [META_KEY]: { $set: meta },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.2.0",
+  "version": "8.3.0-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {
@@ -60,12 +60,12 @@
     "prepublishOnly": "npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@gravity-ui/icons": "^2.8.1",
     "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/icons": "^2.8.1",
     "hashids": "^2.2.8",
     "immutability-helper": "^3.1.1",
     "prop-types": "^15.8.1",
-    "react-grid-layout": "^1.3.4",
+    "react-grid-layout": "^1.4.4",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {
@@ -90,7 +90,7 @@
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.170",
     "@types/react": "^18.0.27",
-    "@types/react-grid-layout": "^1.3.2",
+    "@types/react-grid-layout": "^1.3.5",
     "babel-jest": "^26.6.3",
     "copyfiles": "^2.4.1",
     "enzyme": "^3.11.0",