@gravity-ui/dashkit 8.11.0 → 8.12.1

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, DashKitGroup, MenuItem, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
+import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
+import { AddNewItemOptions, ContextProps, DashKitGroup, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -39,11 +39,12 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     static defaultProps: DashKitDefaultProps;
     static registerPlugins(...plugins: Plugin[]): void;
     static setSettings(settings: Settings): void;
-    static setItem({ item: setItem, namespace, config, options, }: {
+    static setItem({ item: setItem, namespace, config, options, groups, }: {
         item: SetConfigItem;
         namespace?: string;
         config: Config;
-        options?: SetNewItemOptions;
+        options?: Omit<AddNewItemOptions, 'reflowLayoutOptions'>;
+        groups?: DashKitGroup[];
     }): Config;
     static removeItem({ id, config, itemsStateAndParams, }: {
         id: string;
@@ -53,6 +54,7 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     };
+    static reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], groups?: DashKitGroup[]): ConfigLayout[];
     metaRef: React.RefObject<GridLayout>;
     render(): JSX.Element;
     getItemsMeta(): any;

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

@@ -4,10 +4,25 @@ exports.DashKit = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const constants_1 = require("../../constants");
 const utils_1 = require("../../utils");
 const DashKitView_1 = tslib_1.__importDefault(require("../DashKitView/DashKitView"));
 const registerManager = new utils_1.RegisterManager();
+const getReflowProps = (props) => Object.assign({ compactType: 'vertical', cols: 36 }, (0, pick_1.default)(props, 'cols', 'maxRows', 'compactType'));
+const getReflowGroupsConfig = (groups = []) => {
+    const defaultGridProps = getReflowProps(registerManager.gridLayout);
+    return {
+        defaultProps: defaultGridProps,
+        groups: groups.reduce((memo, g) => {
+            const groupId = g.id || constants_1.DEFAULT_GROUP;
+            memo[groupId] = g.gridProperties
+                ? getReflowProps(g.gridProperties(defaultGridProps))
+                : defaultGridProps;
+            return memo;
+        }, {}),
+    };
+};
 class DashKit extends react_1.default.PureComponent {
     constructor() {
         super(...arguments);
@@ -21,28 +36,39 @@ class DashKit extends react_1.default.PureComponent {
     static setSettings(settings) {
         registerManager.setSettings(settings);
     }
-    static setItem({ item: setItem, namespace = constants_1.DEFAULT_NAMESPACE, config, options = {}, }) {
+    static setItem({ item: setItem, namespace = constants_1.DEFAULT_NAMESPACE, config, options = {}, groups = [], }) {
         if (setItem.id) {
-            return utils_1.UpdateManager.editItem({ item: setItem, namespace, config, options });
+            return utils_1.UpdateManager.editItem({
+                item: setItem,
+                namespace,
+                config,
+                options,
+            });
         }
         else {
             const item = setItem;
             const layout = Object.assign({}, registerManager.getItem(item.type).defaultLayout);
-            if (item.layout) {
-                Object.assign(layout, item.layout);
+            const reflowLayoutOptions = getReflowGroupsConfig(groups);
+            const copyItem = Object.assign({}, item);
+            if (copyItem.layout) {
+                Object.assign(layout, copyItem.layout);
+                delete copyItem.layout;
             }
             return utils_1.UpdateManager.addItem({
-                item,
+                item: copyItem,
                 namespace,
                 config,
                 layout,
-                options,
+                options: Object.assign(Object.assign({}, options), { reflowLayoutOptions }),
             });
         }
     }
     static removeItem({ id, config, itemsStateAndParams, }) {
         return utils_1.UpdateManager.removeItem({ id, config, itemsStateAndParams });
     }
+    static reflowLayout(newLayoutItem, layout, groups) {
+        return (0, utils_1.reflowLayout)(newLayoutItem, layout, getReflowGroupsConfig(groups));
+    }
     render() {
         return react_1.default.createElement(DashKitView_1.default, Object.assign({ registerManager: registerManager, ref: this.metaRef }, this.props));
     }

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

@@ -38,7 +38,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
-    _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
+    _onDragStart: (group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any) => void;
     _onResizeStart: () => void;
     _onTargetRestore: () => void;
     _onStop: (group: any, newLayout: any) => void;

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

@@ -94,7 +94,7 @@ class GridLayout extends react_1.default.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onDragStart = (group, _newLayout, layoutItem) => {
+        this._onDragStart = (group, _newLayout, layoutItem, _newItem, _placeholder, e) => {
             if (this.temporaryLayout)
                 return;
             if (this.context.dragOverPlugin) {
@@ -103,9 +103,15 @@ class GridLayout extends react_1.default.PureComponent {
             else {
                 let currentDraggingElement = this.state.currentDraggingElement;
                 if (!currentDraggingElement) {
-                    const _id = layoutItem.i;
-                    const item = this.context.config.items.find(({ id }) => id === _id);
-                    currentDraggingElement = [group, layoutItem, item];
+                    const layoutId = layoutItem.i;
+                    const item = this.context.config.items.find(({ id }) => id === layoutId);
+                    const { offsetX, offsetY } = e.nativeEvent;
+                    currentDraggingElement = {
+                        group,
+                        layoutItem,
+                        item,
+                        cursorPosition: { offsetX, offsetY },
+                    };
                 }
                 this.setState({
                     isDragging: true,
@@ -123,7 +129,7 @@ class GridLayout extends react_1.default.PureComponent {
             const { currentDraggingElement } = this.state;
             if (currentDraggingElement) {
                 this.setState({
-                    draggedOverGroup: currentDraggingElement[0],
+                    draggedOverGroup: currentDraggingElement.group,
                 });
             }
         };
@@ -132,7 +138,7 @@ class GridLayout extends react_1.default.PureComponent {
             const { draggedOverGroup, currentDraggingElement } = this.state;
             if (currentDraggingElement &&
                 draggedOverGroup !== null &&
-                draggedOverGroup !== currentDraggingElement[0]) {
+                draggedOverGroup !== currentDraggingElement.group) {
                 // Skipping layout update when change event called for source grid
                 // and waiting _onDrop
                 return;
@@ -156,15 +162,15 @@ class GridLayout extends react_1.default.PureComponent {
             if (!currentDraggingElement) {
                 return;
             }
-            const [, sourceItem] = currentDraggingElement;
+            const sourceLayoutItem = currentDraggingElement.layoutItem;
             const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
-                if (item.i === sourceItem.i) {
+                if (item.i === sourceLayoutItem.i) {
                     const copy = Object.assign({}, tempItem);
                     delete copy.parent;
                     if (targetGroup !== constants_1.DEFAULT_GROUP) {
                         copy.parent = targetGroup;
                     }
-                    copy.i = sourceItem.i;
+                    copy.i = sourceLayoutItem.i;
                     return copy;
                 }
                 return item;
@@ -205,7 +211,8 @@ class GridLayout extends react_1.default.PureComponent {
             }
             const { properties, layout } = this.getLayoutAndPropsByGroup(group);
             if (currentDraggingElement) {
-                const [, { h, w, i }, { type }] = currentDraggingElement;
+                const { h, w, i } = currentDraggingElement.layoutItem;
+                const { type } = currentDraggingElement.item;
                 return onDropDragOver(e, properties, layout, { h, w, i, type });
             }
             if (dragOverPlugin) {
@@ -297,12 +304,12 @@ class GridLayout extends react_1.default.PureComponent {
             compactType = 'horizontal';
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
-        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
+        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement.group !== group);
         const isDragCaptured = currentDraggingElement &&
-            group === currentDraggingElement[0] &&
+            group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
             draggedOverGroup !== group;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {

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

@@ -170,15 +170,23 @@ class DragOverLayout extends react_grid_layout_1.default {
         const { props: itemProps } = gridItem;
         if (isDroppingItem) {
             const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
-            const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
-            const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            const { sharedDragPosition, hasSharedDragItem } = this.props;
+            let offsetX, offsetY;
+            if (sharedDragPosition) {
+                offsetX = sharedDragPosition.offsetX;
+                offsetY = sharedDragPosition.offsetY;
+            }
+            else {
+                offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
+                offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            }
             const style = gridItem.props.style || null;
             // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return react_1.default.cloneElement(gridItem, {
                 // hiding previre if dragging shared item
-                style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
+                style: hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
                 className: constants_1.OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
+                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY }),
             });
         }
         return gridItem;

package/build/cjs/hocs/withContext.js

@@ -128,7 +128,7 @@ function useMemoStateContext(props) {
     react_1.default.useMemo(() => {
         const groups = props.groups;
         const layout = props.layout;
-        const defaultProps = props.registerManager._gridLayout || {};
+        const defaultProps = props.registerManager.gridLayout || {};
         const nowrapGroups = {};
         let hasNowrapGroups = false;
         if (defaultProps.compactType === common_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {

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

@@ -4,14 +4,26 @@ import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
     namespace?: string;
-    layout?: ConfigLayout;
+    layout?: Omit<ConfigLayout, 'i'>;
 }
 export type SetConfigItem = ConfigItem | AddConfigItem;
 export type SetItemOptions = {
     excludeIds?: string[];
+};
+export type GridReflowOptions = {
+    cols: number;
+    maxRows?: number;
+    compactType?: CompactType;
+};
+export type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+export type ReflowLayoutOptions = {
+    defaultProps: GridReflowOptions;
+    groups?: Record<string, GridReflowOptions>;
+};
+export type AddNewItemOptions = SetItemOptions & {
     updateLayout?: ConfigLayout[];
+    reflowLayoutOptions?: ReflowLayoutOptions;
 };
-export type SetNewItemOptions = SetItemOptions;
 export interface DashkitGroupRenderProps {
     config: Config;
     editMode: boolean;
@@ -19,7 +31,7 @@ export interface DashkitGroupRenderProps {
     layout: ConfigLayout[];
 }
 export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
-    compactType?: ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+    compactType?: CompactType;
 };
 export interface DashKitGroup {
     id?: string;

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

@@ -196,7 +196,7 @@ describe('UpdateManager', () => {
                     type: 'widget',
                 },
                 namespace: 'default',
-                layout: { h: 4, w: 4, x: 0, y: 0 },
+                layout: { h: 4, w: 4, x: 0, y: Infinity },
                 config: config,
             })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
                     ...config.items,
@@ -215,7 +215,7 @@ describe('UpdateManager', () => {
                     type: 'widget',
                 },
                 namespace: 'default',
-                layout: { h: 4, w: 4, x: 0, y: 0 },
+                layout: { h: 4, w: 4, x: 0, y: Infinity },
                 config: config,
                 options: {
                     excludeIds: ['EZ'],
@@ -260,6 +260,67 @@ describe('UpdateManager', () => {
                     },
                 ], layout: [...updateLayout, { h: 4, w: 12, x: 0, y: 0, i: 'EZ' }] }));
         });
+        it('prepend new item', () => {
+            expect(update_manager_1.UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 36, x: 0, y: 0 },
+                config: config,
+                options: {
+                    reflowLayoutOptions: {
+                        defaultProps: {
+                            cols: 36,
+                        },
+                    },
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [
+                    { i: 'al', h: 4, w: 4, x: 8, y: 4 },
+                    { i: 'Q8', h: 16, w: 12, x: 12, y: 4 },
+                    { i: 'L5', h: 2, w: 8, x: 0, y: 4 },
+                    { i: 'C8', h: 2, w: 8, x: 10, y: 30 },
+                    { i: 'lko', h: 2, w: 8, x: 0, y: 12 },
+                    { i: 'qY', h: 2, w: 8, x: 0, y: 24 },
+                    { i: 'EZ', h: 4, w: 36, x: 0, y: 0 },
+                ] }));
+        });
+        it('add item with no compactType', () => {
+            expect(update_manager_1.UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 36, x: 0, y: 0 },
+                config: config,
+                options: {
+                    reflowLayoutOptions: {
+                        defaultProps: {
+                            cols: 36,
+                            compactType: null,
+                        },
+                    },
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...config.layout, { i: 'EZ', h: 4, w: 36, x: 0, y: 0 }] }));
+        });
     });
     describe('removeItem', () => {
         it('remove item by id', () => {

package/build/cjs/utils/grid-layout.d.ts

@@ -0,0 +1,4 @@
+import { Layout } from 'react-grid-layout';
+import type { CompactType } from '../';
+export declare const compact: (layout: Layout[], compactType: CompactType, cols: number) => Layout[];
+export declare const bottom: (layout: Layout[]) => number;

package/build/cjs/utils/grid-layout.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bottom = exports.compact = void 0;
+const tslib_1 = require("tslib");
+const react_grid_layout_1 = tslib_1.__importDefault(require("react-grid-layout"));
+const { utils } = react_grid_layout_1.default;
+const compact = (layout, compactType, cols) => {
+    if (compactType === 'horizontal-nowrap') {
+        compactType = 'horizontal';
+    }
+    return utils.compact(layout, compactType, cols);
+};
+exports.compact = compact;
+const bottom = (layout) => {
+    return utils.bottom(layout);
+};
+exports.bottom = bottom;

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

@@ -1,5 +1,6 @@
+import { ConfigLayout } from '../shared';
 import type { Config, ConfigItem, ConfigItemGroup, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
+import type { AddConfigItem, AddNewItemOptions, ReflowLayoutOptions, SetItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -20,13 +21,14 @@ export declare const getChangedParams: ({ initiatorItem, stateAndParams, itemsSt
 }) => {
     [x: string]: string | string[];
 };
+export declare function reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], reflowLayoutOptions: ReflowLayoutOptions): ConfigLayout[];
 export declare class UpdateManager {
     static addItem({ item, namespace, layout, config, options, }: {
         item: AddConfigItem;
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options?: SetNewItemOptions;
+        options?: AddNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UpdateManager = exports.getChangedParams = void 0;
+exports.UpdateManager = exports.reflowLayout = 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"));
@@ -8,6 +8,7 @@ const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const constants_1 = require("../constants");
 const shared_1 = require("../shared");
 const get_new_id_1 = require("./get-new-id");
+const grid_layout_1 = require("./grid-layout");
 (0, immutability_helper_1.extend)('$auto', (value, object) => (object ? (0, immutability_helper_1.default)(object, value) : (0, immutability_helper_1.default)({}, value)));
 function removeItemVersion1({ id, config, itemsStateAndParams }) {
     const itemIndex = config.items.findIndex((item) => item.id === id);
@@ -226,6 +227,49 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
     };
     return (0, immutability_helper_1.default)(itemsStateAndParams, obj);
 }
+function reflowLayout(newLayoutItem, layout, reflowLayoutOptions) {
+    const byGroup = {};
+    const reducer = (memo, item, i, _items, isNewItem) => {
+        memo[item.i] = i;
+        const parent = item.parent || constants_1.DEFAULT_GROUP;
+        if (byGroup[parent]) {
+            if (isNewItem) {
+                byGroup[parent].unshift(item);
+            }
+            else {
+                byGroup[parent].push(item);
+            }
+        }
+        else {
+            byGroup[parent] = [item];
+        }
+        return memo;
+    };
+    const orderById = layout.reduce(reducer, {});
+    reducer(orderById, newLayoutItem, layout.length, layout, true);
+    const { defaultProps } = reflowLayoutOptions;
+    return Object.entries(byGroup)
+        .reduce((memo, [groupId, layoutItems]) => {
+        var _a;
+        let reflowOptions = defaultProps;
+        if ((_a = reflowLayoutOptions === null || reflowLayoutOptions === void 0 ? void 0 : reflowLayoutOptions.groups) === null || _a === void 0 ? void 0 : _a[groupId]) {
+            reflowOptions = reflowLayoutOptions === null || reflowLayoutOptions === void 0 ? void 0 : reflowLayoutOptions.groups[groupId];
+        }
+        if (reflowOptions.compactType === null) {
+            return memo.concat(layoutItems);
+        }
+        const compactedList = (0, grid_layout_1.compact)(layoutItems, reflowOptions.compactType, reflowOptions.cols).map((item) => {
+            const cleanCopy = (0, pick_1.default)(item, ['i', 'h', 'w', 'x', 'y', 'parent']);
+            if (groupId === constants_1.DEFAULT_GROUP) {
+                return cleanCopy;
+            }
+            return Object.assign(Object.assign({}, cleanCopy), { parent: groupId });
+        });
+        return memo.concat(compactedList);
+    }, [])
+        .sort((a, b) => orderById[a.i] - orderById[b.i]);
+}
+exports.reflowLayout = reflowLayout;
 class UpdateManager {
     static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, options = {}, }) {
         const salt = config.salt;
@@ -240,10 +284,32 @@ class UpdateManager {
                 memo[t.i] = t;
                 return memo;
             }, {});
-            const newLayout = [
-                ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
-                Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
-            ];
+            let newLayout;
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
+            if (options.reflowLayoutOptions) {
+                newLayout = reflowLayout(newLayoutItem, config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))), options.reflowLayoutOptions);
+            }
+            else {
+                newLayout = [
+                    ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
+                    Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
+                ];
+            }
+            return (0, immutability_helper_1.default)(config, {
+                items: { $push: [newItem] },
+                layout: { $set: newLayout },
+                counter: { $set: counter },
+            });
+        }
+        else if (isFinite(layout.y)) {
+            let newLayout;
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
+            if (options.reflowLayoutOptions) {
+                newLayout = reflowLayout(newLayoutItem, config.layout, options.reflowLayoutOptions);
+            }
+            else {
+                newLayout = [...config.layout, newLayoutItem];
+            }
             return (0, immutability_helper_1.default)(config, {
                 items: { $push: [newItem] },
                 layout: { $set: newLayout },
@@ -251,7 +317,7 @@ class UpdateManager {
             });
         }
         else {
-            const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
+            const layoutY = (0, grid_layout_1.bottom)(config.layout);
             const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id });
             return (0, immutability_helper_1.default)(config, {
                 items: { $push: [newItem] },

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, DashKitGroup, MenuItem, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
+import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
+import { AddNewItemOptions, ContextProps, DashKitGroup, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
@@ -39,11 +39,12 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     static defaultProps: DashKitDefaultProps;
     static registerPlugins(...plugins: Plugin[]): void;
     static setSettings(settings: Settings): void;
-    static setItem({ item: setItem, namespace, config, options, }: {
+    static setItem({ item: setItem, namespace, config, options, groups, }: {
         item: SetConfigItem;
         namespace?: string;
         config: Config;
-        options?: SetNewItemOptions;
+        options?: Omit<AddNewItemOptions, 'reflowLayoutOptions'>;
+        groups?: DashKitGroup[];
     }): Config;
     static removeItem({ id, config, itemsStateAndParams, }: {
         id: string;
@@ -53,6 +54,7 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
         config: Config;
         itemsStateAndParams: ItemsStateAndParams;
     };
+    static reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], groups?: DashKitGroup[]): ConfigLayout[];
     metaRef: React.RefObject<GridLayout>;
     render(): JSX.Element;
     getItemsMeta(): any;

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

@@ -1,9 +1,24 @@
 import React from 'react';
 import noop from 'lodash/noop';
-import { DEFAULT_NAMESPACE } from '../../constants';
-import { RegisterManager, UpdateManager } from '../../utils';
+import pick from 'lodash/pick';
+import { DEFAULT_GROUP, DEFAULT_NAMESPACE } from '../../constants';
+import { RegisterManager, UpdateManager, reflowLayout } from '../../utils';
 import DashKitView from '../DashKitView/DashKitView';
 const registerManager = new RegisterManager();
+const getReflowProps = (props) => Object.assign({ compactType: 'vertical', cols: 36 }, pick(props, 'cols', 'maxRows', 'compactType'));
+const getReflowGroupsConfig = (groups = []) => {
+    const defaultGridProps = getReflowProps(registerManager.gridLayout);
+    return {
+        defaultProps: defaultGridProps,
+        groups: groups.reduce((memo, g) => {
+            const groupId = g.id || DEFAULT_GROUP;
+            memo[groupId] = g.gridProperties
+                ? getReflowProps(g.gridProperties(defaultGridProps))
+                : defaultGridProps;
+            return memo;
+        }, {}),
+    };
+};
 export class DashKit extends React.PureComponent {
     constructor() {
         super(...arguments);
@@ -17,28 +32,39 @@ export class DashKit extends React.PureComponent {
     static setSettings(settings) {
         registerManager.setSettings(settings);
     }
-    static setItem({ item: setItem, namespace = DEFAULT_NAMESPACE, config, options = {}, }) {
+    static setItem({ item: setItem, namespace = DEFAULT_NAMESPACE, config, options = {}, groups = [], }) {
         if (setItem.id) {
-            return UpdateManager.editItem({ item: setItem, namespace, config, options });
+            return UpdateManager.editItem({
+                item: setItem,
+                namespace,
+                config,
+                options,
+            });
         }
         else {
             const item = setItem;
             const layout = Object.assign({}, registerManager.getItem(item.type).defaultLayout);
-            if (item.layout) {
-                Object.assign(layout, item.layout);
+            const reflowLayoutOptions = getReflowGroupsConfig(groups);
+            const copyItem = Object.assign({}, item);
+            if (copyItem.layout) {
+                Object.assign(layout, copyItem.layout);
+                delete copyItem.layout;
             }
             return UpdateManager.addItem({
-                item,
+                item: copyItem,
                 namespace,
                 config,
                 layout,
-                options,
+                options: Object.assign(Object.assign({}, options), { reflowLayoutOptions }),
             });
         }
     }
     static removeItem({ id, config, itemsStateAndParams, }) {
         return UpdateManager.removeItem({ id, config, itemsStateAndParams });
     }
+    static reflowLayout(newLayoutItem, layout, groups) {
+        return reflowLayout(newLayoutItem, layout, getReflowGroupsConfig(groups));
+    }
     render() {
         return React.createElement(DashKitView, Object.assign({ registerManager: registerManager, ref: this.metaRef }, this.props));
     }

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

@@ -38,7 +38,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
-    _onDragStart: (group: any, _newLayout: any, layoutItem: any) => void;
+    _onDragStart: (group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any) => void;
     _onResizeStart: () => void;
     _onTargetRestore: () => void;
     _onStop: (group: any, newLayout: any) => void;

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

@@ -91,7 +91,7 @@ class GridLayout extends React.PureComponent {
             }
             return this._memoForwardedPluginRef[refIndex];
         };
-        this._onDragStart = (group, _newLayout, layoutItem) => {
+        this._onDragStart = (group, _newLayout, layoutItem, _newItem, _placeholder, e) => {
             if (this.temporaryLayout)
                 return;
             if (this.context.dragOverPlugin) {
@@ -100,9 +100,15 @@ class GridLayout extends React.PureComponent {
             else {
                 let currentDraggingElement = this.state.currentDraggingElement;
                 if (!currentDraggingElement) {
-                    const _id = layoutItem.i;
-                    const item = this.context.config.items.find(({ id }) => id === _id);
-                    currentDraggingElement = [group, layoutItem, item];
+                    const layoutId = layoutItem.i;
+                    const item = this.context.config.items.find(({ id }) => id === layoutId);
+                    const { offsetX, offsetY } = e.nativeEvent;
+                    currentDraggingElement = {
+                        group,
+                        layoutItem,
+                        item,
+                        cursorPosition: { offsetX, offsetY },
+                    };
                 }
                 this.setState({
                     isDragging: true,
@@ -120,7 +126,7 @@ class GridLayout extends React.PureComponent {
             const { currentDraggingElement } = this.state;
             if (currentDraggingElement) {
                 this.setState({
-                    draggedOverGroup: currentDraggingElement[0],
+                    draggedOverGroup: currentDraggingElement.group,
                 });
             }
         };
@@ -129,7 +135,7 @@ class GridLayout extends React.PureComponent {
             const { draggedOverGroup, currentDraggingElement } = this.state;
             if (currentDraggingElement &&
                 draggedOverGroup !== null &&
-                draggedOverGroup !== currentDraggingElement[0]) {
+                draggedOverGroup !== currentDraggingElement.group) {
                 // Skipping layout update when change event called for source grid
                 // and waiting _onDrop
                 return;
@@ -153,15 +159,15 @@ class GridLayout extends React.PureComponent {
             if (!currentDraggingElement) {
                 return;
             }
-            const [, sourceItem] = currentDraggingElement;
+            const sourceLayoutItem = currentDraggingElement.layoutItem;
             const groupedLayout = this.mergeGroupsLayout(targetGroup, newLayout, tempItem).map((item) => {
-                if (item.i === sourceItem.i) {
+                if (item.i === sourceLayoutItem.i) {
                     const copy = Object.assign({}, tempItem);
                     delete copy.parent;
                     if (targetGroup !== DEFAULT_GROUP) {
                         copy.parent = targetGroup;
                     }
-                    copy.i = sourceItem.i;
+                    copy.i = sourceLayoutItem.i;
                     return copy;
                 }
                 return item;
@@ -202,7 +208,8 @@ class GridLayout extends React.PureComponent {
             }
             const { properties, layout } = this.getLayoutAndPropsByGroup(group);
             if (currentDraggingElement) {
-                const [, { h, w, i }, { type }] = currentDraggingElement;
+                const { h, w, i } = currentDraggingElement.layoutItem;
+                const { type } = currentDraggingElement.item;
                 return onDropDragOver(e, properties, layout, { h, w, i, type });
             }
             if (dragOverPlugin) {
@@ -294,12 +301,12 @@ class GridLayout extends React.PureComponent {
             compactType = 'horizontal';
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
-        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement[0] !== group);
+        const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement.group !== group);
         const isDragCaptured = currentDraggingElement &&
-            group === currentDraggingElement[0] &&
+            group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
             draggedOverGroup !== group;
-        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, isDragCaptured: isDragCaptured }, (draggableHandleClassName
+        return (React.createElement(Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onResizeStart: this._onResizeStart, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStop: callbacks.onResizeStop, onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {

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

@@ -166,15 +166,23 @@ class DragOverLayout extends ReactGridLayout {
         const { props: itemProps } = gridItem;
         if (isDroppingItem) {
             const { containerWidth, cols, w, h, rowHeight, margin, transformScale, droppingPosition, } = itemProps;
-            const leftOffset = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
-            const topOffset = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            const { sharedDragPosition, hasSharedDragItem } = this.props;
+            let offsetX, offsetY;
+            if (sharedDragPosition) {
+                offsetX = sharedDragPosition.offsetX;
+                offsetY = sharedDragPosition.offsetY;
+            }
+            else {
+                offsetX = (((containerWidth / cols) * w) / 2 || 0) * transformScale;
+                offsetY = ((h * rowHeight + (h - 1) * margin[1]) / 2 || 0) * transformScale;
+            }
             const style = gridItem.props.style || null;
             // React.cloneElement is just cleaner then copy-paste whole processGridItem method
             return React.cloneElement(gridItem, {
                 // hiding previre if dragging shared item
-                style: this.props.hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
+                style: hasSharedDragItem ? Object.assign(Object.assign({}, style), { opacity: 0 }) : style,
                 className: OVERLAY_CLASS_NAME,
-                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - leftOffset, top: droppingPosition.top - topOffset }),
+                droppingPosition: Object.assign(Object.assign({}, droppingPosition), { left: droppingPosition.left - offsetX, top: droppingPosition.top - offsetY }),
             });
         }
         return gridItem;

package/build/esm/hocs/withContext.js

@@ -125,7 +125,7 @@ function useMemoStateContext(props) {
     React.useMemo(() => {
         const groups = props.groups;
         const layout = props.layout;
-        const defaultProps = props.registerManager._gridLayout || {};
+        const defaultProps = props.registerManager.gridLayout || {};
         const nowrapGroups = {};
         let hasNowrapGroups = false;
         if (defaultProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {

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

@@ -4,14 +4,26 @@ import type { Config, ConfigItem, ConfigLayout } from '../shared';
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
     namespace?: string;
-    layout?: ConfigLayout;
+    layout?: Omit<ConfigLayout, 'i'>;
 }
 export type SetConfigItem = ConfigItem | AddConfigItem;
 export type SetItemOptions = {
     excludeIds?: string[];
+};
+export type GridReflowOptions = {
+    cols: number;
+    maxRows?: number;
+    compactType?: CompactType;
+};
+export type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+export type ReflowLayoutOptions = {
+    defaultProps: GridReflowOptions;
+    groups?: Record<string, GridReflowOptions>;
+};
+export type AddNewItemOptions = SetItemOptions & {
     updateLayout?: ConfigLayout[];
+    reflowLayoutOptions?: ReflowLayoutOptions;
 };
-export type SetNewItemOptions = SetItemOptions;
 export interface DashkitGroupRenderProps {
     config: Config;
     editMode: boolean;
@@ -19,7 +31,7 @@ export interface DashkitGroupRenderProps {
     layout: ConfigLayout[];
 }
 export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'compactType' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'> & {
-    compactType?: ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+    compactType?: CompactType;
 };
 export interface DashKitGroup {
     id?: string;

package/build/esm/utils/__tests__/update-manager.test.js

@@ -194,7 +194,7 @@ describe('UpdateManager', () => {
                     type: 'widget',
                 },
                 namespace: 'default',
-                layout: { h: 4, w: 4, x: 0, y: 0 },
+                layout: { h: 4, w: 4, x: 0, y: Infinity },
                 config: config,
             })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
                     ...config.items,
@@ -213,7 +213,7 @@ describe('UpdateManager', () => {
                     type: 'widget',
                 },
                 namespace: 'default',
-                layout: { h: 4, w: 4, x: 0, y: 0 },
+                layout: { h: 4, w: 4, x: 0, y: Infinity },
                 config: config,
                 options: {
                     excludeIds: ['EZ'],
@@ -258,6 +258,67 @@ describe('UpdateManager', () => {
                     },
                 ], layout: [...updateLayout, { h: 4, w: 12, x: 0, y: 0, i: 'EZ' }] }));
         });
+        it('prepend new item', () => {
+            expect(UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 36, x: 0, y: 0 },
+                config: config,
+                options: {
+                    reflowLayoutOptions: {
+                        defaultProps: {
+                            cols: 36,
+                        },
+                    },
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [
+                    { i: 'al', h: 4, w: 4, x: 8, y: 4 },
+                    { i: 'Q8', h: 16, w: 12, x: 12, y: 4 },
+                    { i: 'L5', h: 2, w: 8, x: 0, y: 4 },
+                    { i: 'C8', h: 2, w: 8, x: 10, y: 30 },
+                    { i: 'lko', h: 2, w: 8, x: 0, y: 12 },
+                    { i: 'qY', h: 2, w: 8, x: 0, y: 24 },
+                    { i: 'EZ', h: 4, w: 36, x: 0, y: 0 },
+                ] }));
+        });
+        it('add item with no compactType', () => {
+            expect(UpdateManager.addItem({
+                item: {
+                    data: {},
+                    type: 'widget',
+                },
+                namespace: 'default',
+                layout: { h: 4, w: 36, x: 0, y: 0 },
+                config: config,
+                options: {
+                    reflowLayoutOptions: {
+                        defaultProps: {
+                            cols: 36,
+                            compactType: null,
+                        },
+                    },
+                },
+            })).toEqual(Object.assign(Object.assign({}, config), { salt: '0.09852189776033704', counter: 15, items: [
+                    ...config.items,
+                    {
+                        id: 'EZ',
+                        data: {},
+                        type: 'widget',
+                        namespace: 'default',
+                    },
+                ], layout: [...config.layout, { i: 'EZ', h: 4, w: 36, x: 0, y: 0 }] }));
+        });
     });
     describe('removeItem', () => {
         it('remove item by id', () => {

package/build/esm/utils/grid-layout.d.ts

@@ -0,0 +1,4 @@
+import { Layout } from 'react-grid-layout';
+import type { CompactType } from '../';
+export declare const compact: (layout: Layout[], compactType: CompactType, cols: number) => Layout[];
+export declare const bottom: (layout: Layout[]) => number;

package/build/esm/utils/grid-layout.js

@@ -0,0 +1,11 @@
+import gridLayout from 'react-grid-layout';
+const { utils } = gridLayout;
+export const compact = (layout, compactType, cols) => {
+    if (compactType === 'horizontal-nowrap') {
+        compactType = 'horizontal';
+    }
+    return utils.compact(layout, compactType, cols);
+};
+export const bottom = (layout) => {
+    return utils.bottom(layout);
+};

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

@@ -1,5 +1,6 @@
+import { ConfigLayout } from '../shared';
 import type { Config, ConfigItem, ConfigItemGroup, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
+import type { AddConfigItem, AddNewItemOptions, ReflowLayoutOptions, SetItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -20,13 +21,14 @@ export declare const getChangedParams: ({ initiatorItem, stateAndParams, itemsSt
 }) => {
     [x: string]: string | string[];
 };
+export declare function reflowLayout(newLayoutItem: ConfigLayout, layout: ConfigLayout[], reflowLayoutOptions: ReflowLayoutOptions): ConfigLayout[];
 export declare class UpdateManager {
     static addItem({ item, namespace, layout, config, options, }: {
         item: AddConfigItem;
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options?: SetNewItemOptions;
+        options?: AddNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;

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

@@ -1,9 +1,10 @@
 import update, { extend } from 'immutability-helper';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
-import { DEFAULT_NAMESPACE } from '../constants';
+import { DEFAULT_GROUP, DEFAULT_NAMESPACE } from '../constants';
 import { META_KEY, addGroupToQueue, addToQueue, deleteFromQueue, getCurrentVersion, getInitialItemsStateAndParamsMeta, getItemsStateAndParamsMeta, isItemWithGroup, isItemWithTabs, mergeParamsWithAliases, pickActionParamsFromParams, resolveItemInnerId, transformParamsToActionParams, } from '../shared';
 import { getNewId } from './get-new-id';
+import { bottom, compact } from './grid-layout';
 extend('$auto', (value, object) => (object ? update(object, value) : update({}, value)));
 function removeItemVersion1({ id, config, itemsStateAndParams }) {
     const itemIndex = config.items.findIndex((item) => item.id === id);
@@ -221,6 +222,48 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
     };
     return update(itemsStateAndParams, obj);
 }
+export function reflowLayout(newLayoutItem, layout, reflowLayoutOptions) {
+    const byGroup = {};
+    const reducer = (memo, item, i, _items, isNewItem) => {
+        memo[item.i] = i;
+        const parent = item.parent || DEFAULT_GROUP;
+        if (byGroup[parent]) {
+            if (isNewItem) {
+                byGroup[parent].unshift(item);
+            }
+            else {
+                byGroup[parent].push(item);
+            }
+        }
+        else {
+            byGroup[parent] = [item];
+        }
+        return memo;
+    };
+    const orderById = layout.reduce(reducer, {});
+    reducer(orderById, newLayoutItem, layout.length, layout, true);
+    const { defaultProps } = reflowLayoutOptions;
+    return Object.entries(byGroup)
+        .reduce((memo, [groupId, layoutItems]) => {
+        var _a;
+        let reflowOptions = defaultProps;
+        if ((_a = reflowLayoutOptions === null || reflowLayoutOptions === void 0 ? void 0 : reflowLayoutOptions.groups) === null || _a === void 0 ? void 0 : _a[groupId]) {
+            reflowOptions = reflowLayoutOptions === null || reflowLayoutOptions === void 0 ? void 0 : reflowLayoutOptions.groups[groupId];
+        }
+        if (reflowOptions.compactType === null) {
+            return memo.concat(layoutItems);
+        }
+        const compactedList = compact(layoutItems, reflowOptions.compactType, reflowOptions.cols).map((item) => {
+            const cleanCopy = pick(item, ['i', 'h', 'w', 'x', 'y', 'parent']);
+            if (groupId === DEFAULT_GROUP) {
+                return cleanCopy;
+            }
+            return Object.assign(Object.assign({}, cleanCopy), { parent: groupId });
+        });
+        return memo.concat(compactedList);
+    }, [])
+        .sort((a, b) => orderById[a.i] - orderById[b.i]);
+}
 export class UpdateManager {
     static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, options = {}, }) {
         const salt = config.salt;
@@ -235,10 +278,32 @@ export class UpdateManager {
                 memo[t.i] = t;
                 return memo;
             }, {});
-            const newLayout = [
-                ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
-                Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
-            ];
+            let newLayout;
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
+            if (options.reflowLayoutOptions) {
+                newLayout = reflowLayout(newLayoutItem, config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))), options.reflowLayoutOptions);
+            }
+            else {
+                newLayout = [
+                    ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
+                    Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
+                ];
+            }
+            return update(config, {
+                items: { $push: [newItem] },
+                layout: { $set: newLayout },
+                counter: { $set: counter },
+            });
+        }
+        else if (isFinite(layout.y)) {
+            let newLayout;
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id });
+            if (options.reflowLayoutOptions) {
+                newLayout = reflowLayout(newLayoutItem, config.layout, options.reflowLayoutOptions);
+            }
+            else {
+                newLayout = [...config.layout, newLayoutItem];
+            }
             return update(config, {
                 items: { $push: [newItem] },
                 layout: { $set: newLayout },
@@ -246,7 +311,7 @@ export class UpdateManager {
             });
         }
         else {
-            const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
+            const layoutY = bottom(config.layout);
             const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id });
             return update(config, {
                 items: { $push: [newItem] },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.11.0",
+  "version": "8.12.1",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {