@gravity-ui/dashkit 8.5.0 → 8.7.0

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
-import type { Config, ConfigItem, ItemState, PluginBase, StringParams } from '../../shared';
-import type { RegisterManager } from '../../utils/register-manager';
+import type { ConfigItem, ConfigLayout, ItemState, PluginBase, StringParams } from '../../shared';
+import { MenuItem } from '../../typings';
 import './OverlayControls.css';
 export declare enum OverlayControlsPosition {
     TopRight = "top_right",
@@ -14,6 +14,7 @@ export interface OverlayControlItem {
     icon?: IconProps['data'];
     iconSize?: number | string;
     handler?: (item: ConfigItem) => void;
+    visible?: (item: ConfigItem) => boolean;
     allWidgetsControls?: boolean;
     excludeWidgetsTypes?: Array<PluginBase['type']>;
     id?: string;
@@ -36,8 +37,6 @@ interface OverlayControlsDefaultProps {
 }
 interface OverlayControlsProps extends OverlayControlsDefaultProps {
     configItem: ConfigItem;
-    items?: OverlayControlItem[];
-    overlayControls?: Record<string, OverlayControlItem[]>;
 }
 type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults' | 'namespace'> & {
     timestamp: number;
@@ -50,21 +49,24 @@ export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOpt
     copyContext?: C;
 };
 type DashKitCtx = React.Context<{
+    overlayControls?: Record<string, OverlayControlItem[]>;
     context: Record<string, any>;
-    registerManager: RegisterManager;
+    menu: MenuItem[];
     itemsParams: Record<string, StringParams>;
     itemsState: Record<string, ItemState>;
     editItem: (item: ConfigItem) => void;
     removeItem: (id: string) => void;
-    config: Config;
+    getLayoutItem: (id: string) => ConfigLayout | void;
 }>;
 declare class OverlayControls extends React.Component<OverlayControlsProps> {
     static contextType: React.Context<any>;
     static defaultProps: OverlayControlsDefaultProps;
     context: React.ContextType<DashKitCtx>;
     render(): JSX.Element;
+    private getItems;
     private renderControlsItem;
     private getDropDownMenuItemConfig;
+    private getDefaultControls;
     private renderControls;
     private renderMenu;
     private isDefaultMenu;

package/build/esm/components/OverlayControls/OverlayControls.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, DropdownMenu, Icon, } from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
 import { COPIED_WIDGET_STORE_KEY, MenuItems, OVERLAY_CONTROLS_CLASS_NAME } from '../../constants';
-import { DashKitContext } from '../../context/DashKitContext';
+import { DashkitOvelayControlsContext } from '../../context/DashKitContext';
 import { i18n } from '../../i18n';
 import { CloseIcon } from '../../icons/CloseIcon';
 import { CogIcon } from '../../icons/CogIcon';
@@ -21,6 +21,11 @@ const DEFAULT_DROPDOWN_MENU = [MenuItems.Copy, MenuItems.Delete];
 class OverlayControls extends React.Component {
     constructor() {
         super(...arguments);
+        this.getItems = () => {
+            const { overlayControls } = this.context;
+            const { configItem } = this.props;
+            return (overlayControls && overlayControls[configItem.type]) || [];
+        };
         this.renderControlsItem = (item, index, length) => {
             const { view, size } = this.props;
             const { title, handler, icon, iconSize, qa } = item;
@@ -28,18 +33,28 @@ class OverlayControls extends React.Component {
             return (React.createElement(Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem), qa: qa },
                 React.createElement(Icon, { data: icon || CogIcon, size: icon ? iconSize : 24 })));
         };
+        this.getDefaultControls = () => {
+            const { view, size } = this.props;
+            if (this.context.overlayControls === null) {
+                return null;
+            }
+            return (React.createElement(Button, { view: view, size: size, title: i18n('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
+                React.createElement(Icon, { data: CogIcon, size: "24" })));
+        };
         this.getCustomLeftOverlayControls = () => {
             // выбираем только items-ы у которых проставлено поле `allWidgetsControls:true`
             // те контролы, которые будут показываться слева от меню
             let controls = [];
-            for (const controlItem of Object.values(this.props.overlayControls || {})) {
+            for (const controlItem of Object.values(this.context.overlayControls || {})) {
                 controls = controls.concat((controlItem.filter((item) => {
                     var _a;
                     // если тип виджета-плагина в списке исключаемых, то не показываем такой контрол
                     if ((_a = item.excludeWidgetsTypes) === null || _a === void 0 ? void 0 : _a.includes(this.props.configItem.type)) {
                         return false;
                     }
-                    return item.allWidgetsControls;
+                    return item.visible
+                        ? item.visible(this.props.configItem)
+                        : item.allWidgetsControls;
                 }) || []).map((item) => {
                     var _a;
                     if (!(item === null || item === void 0 ? void 0 : item.id)) {
@@ -54,15 +69,14 @@ class OverlayControls extends React.Component {
         };
         this.onCopyItem = () => {
             var _a;
-            const correspondedItemLayout = this.context.config.layout.find((item) => {
-                return item.i === this.props.configItem.id;
-            });
+            const { configItem } = this.props;
+            const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
             let options = {
                 timestamp: Date.now(),
-                data: this.props.configItem.data,
-                type: this.props.configItem.type,
-                defaults: this.props.configItem.defaults,
-                namespace: this.props.configItem.namespace,
+                data: configItem.data,
+                type: configItem.type,
+                defaults: configItem.defaults,
+                namespace: configItem.namespace,
                 layout: {
                     w: correspondedItemLayout.w,
                     h: correspondedItemLayout.h,
@@ -84,7 +98,8 @@ class OverlayControls extends React.Component {
         };
     }
     render() {
-        const { items = [], position } = this.props;
+        const { position } = this.props;
+        const items = this.getItems();
         const hasCustomControlsWithWidgets = items.length > 0;
         const controls = hasCustomControlsWithWidgets
             ? this.getCustomControlsWithWidgets()
@@ -119,11 +134,9 @@ class OverlayControls extends React.Component {
         return null;
     }
     renderControls() {
-        const { view, size } = this.props;
         const customLeftControls = this.getCustomLeftOverlayControls();
         const hasCustomOverlayLeftControls = Boolean(customLeftControls.length);
-        const defaultControl = (React.createElement(Button, { view: view, size: size, title: i18n('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
-            React.createElement(Icon, { data: CogIcon, size: "24" })));
+        const defaultControl = this.getDefaultControls();
         const controls = hasCustomOverlayLeftControls
             ? customLeftControls.map((item, index, items) => this.renderControlsItem(item, index, items.length + 1))
             : defaultControl;
@@ -136,50 +149,58 @@ class OverlayControls extends React.Component {
     }
     renderMenu() {
         const { view, size } = this.props;
-        const { registerManager } = this.context;
-        const withMenu = Array.isArray(registerManager.settings.menu) && registerManager.settings.menu.length;
-        return (React.createElement(React.Fragment, null, withMenu ? (this.renderDropdownMenu()) : (React.createElement(Button, { view: view, size: size, title: i18n('label_delete'), pin: "brick-round", onClick: this.onRemoveItem, qa: "dashkit-overlay-control-menu" },
-            React.createElement(Icon, { data: CloseIcon, size: "12" })))));
+        const dropdown = this.renderDropdownMenu();
+        if (dropdown) {
+            return dropdown;
+        }
+        return (React.createElement(Button, { key: 'delete-control', view: view, size: size, title: i18n('label_delete'), pin: "brick-round", onClick: this.onRemoveItem, qa: "dashkit-overlay-control-menu" },
+            React.createElement(Icon, { data: CloseIcon, size: "12" })));
     }
     isDefaultMenu(menu) {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(MenuItems).includes(String(item)));
     }
     renderDropdownMenu() {
         const { view, size } = this.props;
-        const { registerManager, itemsParams, itemsState } = this.context;
+        const { menu: contextMenu, itemsParams, itemsState } = this.context;
         const configItem = this.props.configItem;
         const itemParams = itemsParams[configItem.id];
         const itemState = itemsState[configItem.id];
-        let menu = registerManager.settings.menu;
-        if (!menu.length) {
-            menu = DEFAULT_DROPDOWN_MENU;
-        }
+        const menu = (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.length) > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
         const isDefaultMenu = this.isDefaultMenu(menu);
-        let items = isDefaultMenu
-            ? (menu || []).map((name) => this.getDropDownMenuItemConfig(name, true))
-            : menu.map((item) => {
+        const items = isDefaultMenu
+            ? (menu || []).reduce((memo, name) => {
+                const item = this.getDropDownMenuItemConfig(name, true);
+                if (item) {
+                    memo.push(item);
+                }
+                return memo;
+            }, [])
+            : menu.reduce((memo, item) => {
                 var _a;
                 if (typeof item === 'string') {
-                    return null;
+                    return memo;
                 }
                 // custom menu dropdown item filter
                 if (item.visible && !item.visible(configItem)) {
-                    return null;
+                    return memo;
                 }
                 const itemHandler = item.handler;
                 const itemAction = typeof itemHandler === 'function'
                     ? () => itemHandler(configItem, itemParams, itemState)
                     : ((_a = this.getDropDownMenuItemConfig(item.id)) === null || _a === void 0 ? void 0 : _a.action) || (() => { });
-                return {
+                memo.push({
                     // @ts-expect-error
                     text: item.title || i18n(item.id),
                     icon: item.icon,
                     action: itemAction,
                     className: item.className,
                     qa: item.qa,
-                };
-            });
-        items = items.filter(Boolean);
+                });
+                return memo;
+            }, []);
+        if (items.length === 0) {
+            return null;
+        }
         return (React.createElement(DropdownMenu, { items: items, renderSwitcher: (props) => (React.createElement(Button, Object.assign({}, props, { view: view, size: size, pin: "brick-round", qa: "dashkit-overlay-control-menu" }),
                 React.createElement(Icon, { data: DotsIcon, size: "16" }))) }));
     }
@@ -199,19 +220,14 @@ class OverlayControls extends React.Component {
         return 'brick-brick';
     }
     getCustomControlsWithWidgets() {
-        // Добавляем контрол удаления виджета по умолчанию
-        const deleteControl = {
-            title: i18n('label_delete'),
-            icon: CloseIcon,
-            iconSize: 12,
-            handler: this.onRemoveItem,
-        };
-        const { items = [] } = this.props;
-        const customOverlayControls = [...items, deleteControl];
-        return customOverlayControls.map((item, index, controlItems) => this.renderControlsItem(item, index, controlItems.length));
+        const items = this.getItems();
+        const result = items.map((item, index, controlItems) => this.renderControlsItem(item, index, controlItems.length));
+        // Добавляем контрол удаления или меню виджета по умолчанию
+        result.push(this.renderMenu());
+        return result;
     }
 }
-OverlayControls.contextType = DashKitContext;
+OverlayControls.contextType = DashkitOvelayControlsContext;
 OverlayControls.defaultProps = {
     position: OverlayControlsPosition.TopRight,
     view: 'flat',

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

@@ -11,3 +11,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";
+export declare const COMPACT_TYPE_HORIZONTAL_NOWRAP = "horizontal-nowrap";

package/build/esm/constants/common.js

@@ -11,3 +11,4 @@ export const MenuItems = {
 export const DEFAULT_WIDGET_HEIGHT = 3;
 export const DEFAULT_WIDGET_WIDTH = 3;
 export const DEFAULT_GROUP = '__default';
+export const COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';

package/build/esm/context/DashKitContext.d.ts

@@ -1,3 +1,4 @@
 export const DashKitContext: React.Context<any>;
+export const DashkitOvelayControlsContext: React.Context<any>;
 export const DashKitDnDContext: React.Context<any>;
 import React from 'react';

package/build/esm/context/DashKitContext.js

@@ -1,4 +1,5 @@
 import React from 'react';
 const DashKitContext = React.createContext();
+const DashkitOvelayControlsContext = React.createContext();
 const DashKitDnDContext = React.createContext();
-export { DashKitContext, DashKitDnDContext };
+export { DashKitContext, DashkitOvelayControlsContext, DashKitDnDContext };

package/build/esm/hocs/prepareItem.d.ts

@@ -2,6 +2,8 @@ export function prepareItem(Component: any): {
     new (props: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
@@ -26,6 +28,8 @@ export function prepareItem(Component: any): {
     new (props: any, context: any): {
         shouldComponentUpdate(nextProps: any): boolean;
         _onStateAndParamsChange: (stateAndParams: any, options: any) => void;
+        _currentRenderProps: {};
+        getRenderProps: () => {};
         render(): JSX.Element;
         context: unknown;
         setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;

package/build/esm/hocs/prepareItem.js

@@ -9,6 +9,35 @@ export function prepareItem(Component) {
                 this._onStateAndParamsChange = (stateAndParams, options) => {
                     this.context.onItemStateAndParamsChange(this.props.id, stateAndParams, options);
                 };
+                this._currentRenderProps = {};
+                this.getRenderProps = () => {
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
+                    const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
+                    const { data, defaults, namespace } = item;
+                    const rendererProps = {
+                        data,
+                        editMode,
+                        params: itemsParams[id],
+                        state: itemsState[id],
+                        onStateAndParamsChange: this._onStateAndParamsChange,
+                        width,
+                        height,
+                        id,
+                        defaults,
+                        namespace,
+                        settings,
+                        context,
+                        layout,
+                        gridLayout: registerManager.gridLayout,
+                        adjustWidgetLayout,
+                        isPlaceholder,
+                    };
+                    const changedProp = Object.entries(rendererProps).find(([key, value]) => this._currentRenderProps[key] !== value);
+                    if (changedProp) {
+                        this._currentRenderProps = rendererProps;
+                    }
+                    return this._currentRenderProps;
+                };
             }
             shouldComponentUpdate(nextProps) {
                 const { width, height, transform } = this.props;
@@ -22,28 +51,10 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
-                const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
-                const { type, data, defaults, namespace } = item;
-                const rendererProps = {
-                    data,
-                    editMode,
-                    params: itemsParams[id],
-                    state: itemsState[id],
-                    onStateAndParamsChange: this._onStateAndParamsChange,
-                    width,
-                    height,
-                    id,
-                    defaults,
-                    namespace,
-                    settings,
-                    context,
-                    layout,
-                    gridLayout: registerManager.gridLayout,
-                    adjustWidgetLayout,
-                    isPlaceholder,
-                };
-                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
+                const { item, isPlaceholder } = this.props;
+                const { registerManager } = this.context;
+                const { type } = item;
+                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
             }
         },
         _a.propTypes = {

package/build/esm/hocs/withContext.js

@@ -1,10 +1,13 @@
+import { __rest } from "tslib";
 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 { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID, } from '../constants/common';
+import { DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext, } from '../context/DashKitContext';
+import { useDeepEqualMemo } from '../hooks/useDeepEqualMemo';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager } from '../utils';
+const ITEM_PROPS = ['i', 'h', 'w', 'x', 'y', 'parent'];
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
@@ -13,6 +16,7 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = React.useRef({});
     const adjustedLayouts = React.useRef({});
+    const nowrapAdjustedLayouts = React.useRef({});
     const [temporaryLayout, setTemporaryLayout] = React.useState(null);
     const resetTemporaryLayout = React.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
     const dndContext = React.useContext(DashKitDnDContext);
@@ -47,7 +51,13 @@ function useMemoStateContext(props) {
             onChange({ config: newConfig });
         }
     }, [props.config, onChange]);
+    const getLayoutItem = React.useCallback((id) => {
+        return props.config.layout.find(({ i }) => i === id);
+    }, [props.config.layout]);
     const onItemRemove = React.useCallback((id) => {
+        delete nowrapAdjustedLayouts.current[id];
+        delete adjustedLayouts.current[id];
+        delete originalLayouts.current[id];
         if (id === TEMPORARY_ITEM_ID) {
             resetTemporaryLayout();
         }
@@ -102,7 +112,55 @@ function useMemoStateContext(props) {
             forceUpdateLayout((prev) => prev + 1);
         }
     }, []);
-    const itemsParams = React.useMemo(() => getItemsParams({
+    React.useMemo(() => {
+        const groups = props.groups;
+        const layout = props.layout;
+        const defaultProps = props.registerManager._gridLayout || {};
+        const nowrapGroups = {};
+        let hasNowrapGroups = false;
+        if (defaultProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            nowrapGroups[DEFAULT_GROUP] = {
+                items: [],
+                leftSpace: defaultProps.cols,
+            };
+            hasNowrapGroups = true;
+        }
+        if (groups) {
+            groups.forEach((group) => {
+                var _a;
+                const resultProps = ((_a = group.gridProperties) === null || _a === void 0 ? void 0 : _a.call(group, defaultProps)) || {};
+                if (resultProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+                    nowrapGroups[group.id] = {
+                        items: [],
+                        leftSpace: resultProps.cols,
+                    };
+                    hasNowrapGroups = true;
+                }
+            });
+        }
+        if (hasNowrapGroups) {
+            layout.forEach((item) => {
+                const widgetId = item.i;
+                const parentId = item.parent || DEFAULT_GROUP;
+                if (nowrapGroups[parentId]) {
+                    // Collecting nowrap elements
+                    nowrapGroups[parentId].items.push(item);
+                    nowrapGroups[parentId].leftSpace -= item.w;
+                }
+                else if (nowrapAdjustedLayouts.current[widgetId]) {
+                    // If element is not in horizontal-nowrap cleaning up and reverting adjustLayout values
+                    delete nowrapAdjustedLayouts.current[widgetId];
+                }
+            });
+            Object.entries(nowrapGroups).forEach(([, { items, leftSpace }]) => {
+                items.forEach((item) => {
+                    // setting maxW with adjustLayout fields and saving previous
+                    nowrapAdjustedLayouts.current[item.i] = item.w + leftSpace;
+                });
+            });
+        }
+    }, [props.registerManager, props.groups, props.layout]);
+    const itemsParams = useDeepEqualMemo(() => getItemsParams({
         defaultGlobalParams: props.defaultGlobalParams,
         globalParams: props.globalParams,
         config: props.config,
@@ -115,7 +173,7 @@ function useMemoStateContext(props) {
         props.itemsStateAndParams,
         props.registerManager,
     ]);
-    const itemsState = React.useMemo(() => getItemsState({
+    const itemsState = useDeepEqualMemo(() => getItemsState({
         config: props.config,
         itemsStateAndParams: props.itemsStateAndParams,
     }), [props.config, props.itemsStateAndParams]);
@@ -130,12 +188,31 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
     const resultLayout = React.useMemo(() => {
+        const adjusted = adjustedLayouts.current;
+        const original = originalLayouts.current;
+        const nowrapAdjust = nowrapAdjustedLayouts.current;
         return props.layout.map((item) => {
-            if (item.i in adjustedLayouts.current) {
-                return Object.assign(Object.assign({}, adjustedLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+            const widgetId = item.i;
+            if (widgetId in adjusted || widgetId in nowrapAdjust) {
+                original[widgetId] = item;
+                // eslint-disable-next-line no-unused-vars
+                const _a = adjusted[widgetId] || item, { parent } = _a, adjustedItem = __rest(_a, ["parent"]);
+                adjustedItem.w = item.w;
+                adjustedItem.x = item.x;
+                adjustedItem.y = item.y;
+                if (item.parent) {
+                    adjustedItem.parent = item.parent;
+                }
+                if (widgetId in nowrapAdjust) {
+                    adjustedItem.maxW = nowrapAdjust[widgetId];
+                }
+                return adjustedItem;
             }
             else {
-                return Object.assign({}, item);
+                if (widgetId in original) {
+                    delete original[widgetId];
+                }
+                return item;
             }
         });
     }, [props.layout, layoutUpdateCounter]);
@@ -157,17 +234,31 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback(() => {
+    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (dragOverPlugin) {
-            const { defaultLayout } = dragOverPlugin;
-            const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
-            return { h, w };
+        if (!dragOverPlugin) {
+            return false;
+        }
+        let maxW = gridProps.cols;
+        const { defaultLayout } = dragOverPlugin;
+        const maxH = Math.min(gridProps.maxRows || Infinity, defaultLayout.maxH || Infinity);
+        if (gridProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            maxW = groupLayout.reduce((memo, item) => memo - item.w, gridProps.cols);
+        }
+        if (maxW === 0 ||
+            maxH === 0 ||
+            maxW < defaultLayout.minW ||
+            maxH < defaultLayout.minH) {
+            return false;
         }
-        return false;
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
+        return {
+            h: maxH ? Math.min(h, maxH) : h,
+            w: maxW ? Math.min(w, maxW) : w,
+        };
     }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
     const onDropProp = props.onDrop;
     const onDrop = React.useCallback((newLayout, item) => {
@@ -181,16 +272,16 @@ function useMemoStateContext(props) {
         onDropProp({
             newLayout: newLayout.reduce((memo, l) => {
                 if (l.i !== item.i) {
-                    memo.push(pick(l, ['i', 'h', 'w', 'x', 'y', 'parent']));
+                    memo.push(pick(l, ITEM_PROPS));
                 }
                 return memo;
             }, []),
-            itemLayout: pick(item, ['i', 'h', 'w', 'x', 'y', 'parent']),
+            itemLayout: pick(item, ITEM_PROPS),
             commit: resetTemporaryLayout,
             dragProps,
         });
     }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
-    return React.useMemo(() => ({
+    const dashkitContextValue = React.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,
         config: props.config,
@@ -206,10 +297,8 @@ function useMemoStateContext(props) {
         itemsParams,
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
-        removeItem: onItemRemove,
         onDrop,
         onDropDragOver,
-        editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -234,10 +323,8 @@ function useMemoStateContext(props) {
         itemsParams,
         props.registerManager,
         onItemStateAndParamsChange,
-        onItemRemove,
         onDrop,
         onDropDragOver,
-        props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -248,12 +335,34 @@ function useMemoStateContext(props) {
         outerDnDEnable,
         dragOverPlugin,
     ]);
+    const overlayMenuItems = props.overlayMenuItems || props.registerManager.settings.menu;
+    const controlsContextValue = React.useMemo(() => ({
+        overlayControls: props.overlayControls,
+        context: props.context,
+        menu: overlayMenuItems,
+        itemsParams: itemsParams,
+        itemsState: itemsState,
+        editItem: props.onItemEdit,
+        removeItem: onItemRemove,
+        getLayoutItem: getLayoutItem,
+    }), [
+        itemsParams,
+        itemsState,
+        props.context,
+        props.onItemEdit,
+        onItemRemove,
+        props.overlayControls,
+        overlayMenuItems,
+        getLayoutItem,
+    ]);
+    return { controlsContextValue, dashkitContextValue };
 }
 export function withContext(Component) {
     const WithContext = (props) => {
-        const contextValue = useMemoStateContext(props);
-        return (React.createElement(DashKitContext.Provider, { value: contextValue },
-            React.createElement(Component, { overlayControls: props.overlayControls })));
+        const { dashkitContextValue, controlsContextValue } = useMemoStateContext(props);
+        return (React.createElement(DashKitContext.Provider, { value: dashkitContextValue },
+            React.createElement(DashkitOvelayControlsContext.Provider, { value: controlsContextValue },
+                React.createElement(Component, null))));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useDeepEqualMemo: <T extends unknown>(predicate: () => T, deps: React.DependencyList) => T;

package/build/esm/hooks/useDeepEqualMemo.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+export const useDeepEqualMemo = (predicate, deps) => {
+    const previousValueRef = React.useRef({});
+    return React.useMemo(() => {
+        const value = predicate();
+        if (!isEqual(previousValueRef.current, value)) {
+            previousValueRef.current = value;
+        }
+        return previousValueRef.current;
+    }, [previousValueRef, ...deps]);
+};

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

@@ -19,7 +19,9 @@ export interface DashkitGroupRenderProps {
     items: ConfigItem[];
     layout: ConfigLayout[];
 }
-export type ReactGridLayoutProps = Omit<ReactGridLayout.ReactGridLayoutProps, 'children' | 'innerRef' | 'key' | 'layout' | 'isDraggable' | 'isResizable' | 'onDragStart' | 'onDragStop' | 'onResizeStart' | 'onResizeStop' | 'draggableHandle' | 'isDroppable' | 'onDropDragOver' | 'onDrop' | 'draggableCancel'>;
+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';
+};
 export interface DashKitGroup {
     id?: string;
     render?: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => React.ReactNode;