@gravity-ui/dashkit 8.10.1 → 8.11.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, DashKitGroup, MenuItem, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
+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;

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

@@ -4,10 +4,12 @@ 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'));
 class DashKit extends react_1.default.PureComponent {
     constructor() {
         super(...arguments);
@@ -21,22 +23,43 @@ 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 defaultGridProps = getReflowProps(registerManager.gridLayout);
+            const reflowLayoutOptions = {
+                defaultProps: defaultGridProps,
+                groups: groups.reduce((memo, g) => {
+                    const groupId = g.id || constants_1.DEFAULT_GROUP;
+                    if (g.gridProperties) {
+                        memo[groupId] = getReflowProps(g.gridProperties(defaultGridProps));
+                    }
+                    else {
+                        memo[groupId] = defaultGridProps;
+                    }
+                    return memo;
+                }, {}),
+            };
+            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 }),
             });
         }
     }

package/build/cjs/components/GridItem/GridItem.css

@@ -78,18 +78,111 @@
   position: absolute;
   width: 20px;
   height: 20px;
-  bottom: 0;
-  right: 0;
-  cursor: se-resize;
   z-index: 6;
 }
 
 .react-grid-item .react-resizable-handle::after {
   content: "";
   position: absolute;
-  right: 3px;
-  bottom: 3px;
   border: 4px solid transparent;
+}
+
+.react-grid-item .react-resizable-handle-s {
+  cursor: s-resize;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(0);
+}
+.react-grid-item .react-resizable-handle-s::after {
+  bottom: -3px;
+  left: 4px;
+  border: 6px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-w {
+  cursor: w-resize;
+  top: 50%;
+  left: 0;
+  transform: translateX(0) translateY(-50%);
+}
+.react-grid-item .react-resizable-handle-w::after {
+  top: 4px;
+  left: -3px;
+  border: 6px solid transparent;
+  border-right-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-e {
+  cursor: e-resize;
+  top: 50%;
+  right: 0;
+  transform: translateX(0) translateY(-50%);
+}
+.react-grid-item .react-resizable-handle-e::after {
+  top: 4px;
+  right: -3px;
+  border: 6px solid transparent;
+  border-left-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-n {
+  cursor: n-resize;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(0);
+}
+.react-grid-item .react-resizable-handle-n::after {
+  top: -3px;
+  left: 4px;
+  border: 6px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-sw {
+  cursor: sw-resize;
+  bottom: 0;
+  left: 0;
+}
+.react-grid-item .react-resizable-handle-sw::after {
+  bottom: 3px;
+  left: 3px;
+  border-left-color: rgba(0, 0, 0, 0.4);
+  border-bottom-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-nw {
+  cursor: nw-resize;
+  top: 0;
+  left: 0;
+}
+.react-grid-item .react-resizable-handle-nw::after {
+  top: 3px;
+  left: 3px;
+  border-left-color: rgba(0, 0, 0, 0.4);
+  border-top-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-se {
+  cursor: se-resize;
+  bottom: 0;
+  right: 0;
+}
+.react-grid-item .react-resizable-handle-se::after {
+  bottom: 3px;
+  right: 3px;
   border-right-color: rgba(0, 0, 0, 0.4);
   border-bottom-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-ne {
+  cursor: ne-resize;
+  top: 0;
+  right: 0;
+}
+.react-grid-item .react-resizable-handle-ne::after {
+  top: 3px;
+  right: 3px;
+  border-right-color: rgba(0, 0, 0, 0.4);
+  border-top-color: rgba(0, 0, 0, 0.4);
 }

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

@@ -11,6 +11,11 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
     adjustWidgetLayout: (index: any, { needSetDefault }: {
         needSetDefault: any;
     }) => void;
+    onMountChange: (isMounted: any) => void;
+    _inited: boolean | undefined;
+    onBeforeLoad: () => () => void;
+    _isAsyncItem: boolean | undefined;
+    onLoad: () => void;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/cjs/components/MobileLayout/MobileLayout.js

@@ -27,6 +27,33 @@ class MobileLayout extends react_1.default.PureComponent {
                 });
             }
         };
+        this.onMountChange = (isMounted) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (isMounted) {
+                this._inited = true;
+                (_b = (_a = this.context).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+                if (!this._isAsyncItem) {
+                    (_d = (_c = this.context).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
+                }
+            }
+            else {
+                (_f = (_e = this.context).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+            }
+        };
+        this.onBeforeLoad = () => {
+            this._isAsyncItem = true;
+            return this.onLoad;
+        };
+        this.onLoad = () => {
+            var _a, _b;
+            (_b = (_a = this.context).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+        };
     }
     componentDidUpdate(prevProps, prevState) {
         if (prevState.activeTabId !== this.context.config.id) {
@@ -46,7 +73,7 @@ class MobileLayout extends react_1.default.PureComponent {
             return (react_1.default.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
                 react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
                         this.pluginsRefs[index] = pluginRef;
-                    } })));
+                    }, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
         })));
     }
 }

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,25 @@ 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 SetNewItemOptions = SetItemOptions & {
+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 interface DashkitGroupRenderProps {
     config: Config;
@@ -20,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,5 @@
 import type { Config, ConfigItem, ConfigItemGroup, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
+import type { AddConfigItem, AddNewItemOptions, SetItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -26,7 +26,7 @@ export declare class UpdateManager {
         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

@@ -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,48 @@ 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]);
+}
 class UpdateManager {
     static addItem({ item, namespace = constants_1.DEFAULT_NAMESPACE, layout, config, options = {}, }) {
         const salt = config.salt;
@@ -240,10 +283,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 +316,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 { 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;

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import noop from 'lodash/noop';
-import { DEFAULT_NAMESPACE } from '../../constants';
+import pick from 'lodash/pick';
+import { DEFAULT_GROUP, DEFAULT_NAMESPACE } from '../../constants';
 import { RegisterManager, UpdateManager } 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'));
 export class DashKit extends React.PureComponent {
     constructor() {
         super(...arguments);
@@ -17,22 +19,43 @@ 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 defaultGridProps = getReflowProps(registerManager.gridLayout);
+            const reflowLayoutOptions = {
+                defaultProps: defaultGridProps,
+                groups: groups.reduce((memo, g) => {
+                    const groupId = g.id || DEFAULT_GROUP;
+                    if (g.gridProperties) {
+                        memo[groupId] = getReflowProps(g.gridProperties(defaultGridProps));
+                    }
+                    else {
+                        memo[groupId] = defaultGridProps;
+                    }
+                    return memo;
+                }, {}),
+            };
+            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 }),
             });
         }
     }

package/build/esm/components/GridItem/GridItem.css

@@ -78,18 +78,111 @@
   position: absolute;
   width: 20px;
   height: 20px;
-  bottom: 0;
-  right: 0;
-  cursor: se-resize;
   z-index: 6;
 }
 
 .react-grid-item .react-resizable-handle::after {
   content: "";
   position: absolute;
-  right: 3px;
-  bottom: 3px;
   border: 4px solid transparent;
+}
+
+.react-grid-item .react-resizable-handle-s {
+  cursor: s-resize;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(0);
+}
+.react-grid-item .react-resizable-handle-s::after {
+  bottom: -3px;
+  left: 4px;
+  border: 6px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-w {
+  cursor: w-resize;
+  top: 50%;
+  left: 0;
+  transform: translateX(0) translateY(-50%);
+}
+.react-grid-item .react-resizable-handle-w::after {
+  top: 4px;
+  left: -3px;
+  border: 6px solid transparent;
+  border-right-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-e {
+  cursor: e-resize;
+  top: 50%;
+  right: 0;
+  transform: translateX(0) translateY(-50%);
+}
+.react-grid-item .react-resizable-handle-e::after {
+  top: 4px;
+  right: -3px;
+  border: 6px solid transparent;
+  border-left-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-n {
+  cursor: n-resize;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%) translateY(0);
+}
+.react-grid-item .react-resizable-handle-n::after {
+  top: -3px;
+  left: 4px;
+  border: 6px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-sw {
+  cursor: sw-resize;
+  bottom: 0;
+  left: 0;
+}
+.react-grid-item .react-resizable-handle-sw::after {
+  bottom: 3px;
+  left: 3px;
+  border-left-color: rgba(0, 0, 0, 0.4);
+  border-bottom-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-nw {
+  cursor: nw-resize;
+  top: 0;
+  left: 0;
+}
+.react-grid-item .react-resizable-handle-nw::after {
+  top: 3px;
+  left: 3px;
+  border-left-color: rgba(0, 0, 0, 0.4);
+  border-top-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-se {
+  cursor: se-resize;
+  bottom: 0;
+  right: 0;
+}
+.react-grid-item .react-resizable-handle-se::after {
+  bottom: 3px;
+  right: 3px;
   border-right-color: rgba(0, 0, 0, 0.4);
   border-bottom-color: rgba(0, 0, 0, 0.4);
+}
+
+.react-grid-item .react-resizable-handle-ne {
+  cursor: ne-resize;
+  top: 0;
+  right: 0;
+}
+.react-grid-item .react-resizable-handle-ne::after {
+  top: 3px;
+  right: 3px;
+  border-right-color: rgba(0, 0, 0, 0.4);
+  border-top-color: rgba(0, 0, 0, 0.4);
 }

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

@@ -11,6 +11,11 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
     adjustWidgetLayout: (index: any, { needSetDefault }: {
         needSetDefault: any;
     }) => void;
+    onMountChange: (isMounted: any) => void;
+    _inited: boolean | undefined;
+    onBeforeLoad: () => () => void;
+    _isAsyncItem: boolean | undefined;
+    onLoad: () => void;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/esm/components/MobileLayout/MobileLayout.js

@@ -25,6 +25,33 @@ class MobileLayout extends React.PureComponent {
                 });
             }
         };
+        this.onMountChange = (isMounted) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (isMounted) {
+                this._inited = true;
+                (_b = (_a = this.context).onItemMountChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+                if (!this._isAsyncItem) {
+                    (_d = (_c = this.context).onItemRender) === null || _d === void 0 ? void 0 : _d.call(_c, this.props.item);
+                }
+            }
+            else {
+                (_f = (_e = this.context).onItemMountChange) === null || _f === void 0 ? void 0 : _f.call(_e, this.props.item, {
+                    isAsync: this._isAsyncItem,
+                    isMounted: isMounted,
+                });
+            }
+        };
+        this.onBeforeLoad = () => {
+            this._isAsyncItem = true;
+            return this.onLoad;
+        };
+        this.onLoad = () => {
+            var _a, _b;
+            (_b = (_a = this.context).onItemRender) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.item);
+        };
     }
     componentDidUpdate(prevProps, prevState) {
         if (prevState.activeTabId !== this.context.config.id) {
@@ -44,7 +71,7 @@ class MobileLayout extends React.PureComponent {
             return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
                 React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
                         this.pluginsRefs[index] = pluginRef;
-                    } })));
+                    }, onMountChange: this.onMountChange, onBeforeLoad: this.onBeforeLoad })));
         })));
     }
 }

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,25 @@ 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 SetNewItemOptions = SetItemOptions & {
+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 interface DashkitGroupRenderProps {
     config: Config;
@@ -20,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,5 @@
 import type { Config, ConfigItem, ConfigItemGroup, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
+import type { AddConfigItem, AddNewItemOptions, SetItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -26,7 +26,7 @@ export declare class UpdateManager {
         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);
 }
+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.10.1",
+  "version": "8.11.0-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {