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

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

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

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

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

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

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

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

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

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

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

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

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

package/build/cjs/constants/common.js

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

package/build/cjs/hocs/withContext.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -82,6 +82,7 @@ function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams, pa
     // if it's Record<string, StringParams>, then this is a group application of params
     // and checking for comparison of allowedParams and stateParamsConf is not necessary
     const isGroupParamsApply = typeof (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) === 'object' &&
+        (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) !== null &&
         !Array.isArray(stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]);
     if ((0, shared_1.isItemWithTabs)(item)) {
         let tab;
@@ -233,7 +234,7 @@ class UpdateManager {
         const newIdData = (0, get_new_id_1.getNewId)({ config, salt, counter, excludeIds: newItemData.excludeIds });
         counter = newIdData.counter;
         const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
-        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y']);
+        const saveDefaultLayout = (0, pick_1.default)(layout, ['h', 'w', 'x', 'y', 'parent']);
         if (options.updateLayout) {
             const byId = options.updateLayout.reduce((memo, t) => {
                 memo[t.i] = t;
@@ -314,7 +315,7 @@ class UpdateManager {
     static updateLayout({ layout, config }) {
         return (0, immutability_helper_1.default)(config, {
             layout: {
-                $set: layout.map(({ x, y, w, h, i }) => ({ x, y, w, h, i })),
+                $set: layout.map((item) => (0, pick_1.default)(item, ['i', 'h', 'w', 'x', 'y', 'parent'])),
             },
         });
     }

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

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

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

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

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

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

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

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

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

@@ -2,14 +2,29 @@ import React from 'react';
 import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
 import { OVERLAY_CLASS_NAME } from '../../constants';
 class DragOverLayout extends ReactGridLayout {
-    constructor() {
-        super(...arguments);
+    constructor(...args) {
+        super(...args);
         this.dragReset = () => {
             if (this.dragEnterCounter) {
                 this.dragEnterCounter = 0;
                 this.removeDroppingPlaceholder();
             }
         };
+        this.mouseLeaveHandler = (e) => {
+            var _a;
+            const rect = ((_a = this.props.innerRef) === null || _a === void 0 ? void 0 : _a.current.getBoundingClientRect()) || {};
+            if (rect.bottom <= e.clientY ||
+                rect.top >= e.clientY ||
+                rect.left >= e.clientX ||
+                rect.right <= e.clientX) {
+                this.dragReset();
+            }
+        };
+        const oldonDrag = this.onDrag;
+        this.onDrag = (i, x, y, sintE) => {
+            oldonDrag(i, x, y, sintE);
+            this.mouseLeaveHandler(sintE.e);
+        };
     }
     componentDidMount() {
         var _a;

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

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

package/build/esm/constants/common.js

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

package/build/esm/hocs/withContext.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -78,6 +78,7 @@ function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams, pa
     // if it's Record<string, StringParams>, then this is a group application of params
     // and checking for comparison of allowedParams and stateParamsConf is not necessary
     const isGroupParamsApply = typeof (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) === 'object' &&
+        (stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]) !== null &&
         !Array.isArray(stateParamsConf === null || stateParamsConf === void 0 ? void 0 : stateParamsConf[item.id]);
     if (isItemWithTabs(item)) {
         let tab;
@@ -228,7 +229,7 @@ export class UpdateManager {
         const newIdData = getNewId({ config, salt, counter, excludeIds: newItemData.excludeIds });
         counter = newIdData.counter;
         const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
-        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y']);
+        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y', 'parent']);
         if (options.updateLayout) {
             const byId = options.updateLayout.reduce((memo, t) => {
                 memo[t.i] = t;
@@ -309,7 +310,7 @@ export class UpdateManager {
     static updateLayout({ layout, config }) {
         return update(config, {
             layout: {
-                $set: layout.map(({ x, y, w, h, i }) => ({ x, y, w, h, i })),
+                $set: layout.map((item) => pick(item, ['i', 'h', 'w', 'x', 'y', 'parent'])),
             },
         });
     }

package/package.json

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