@gravity-ui/dashkit 8.5.0 → 8.7.0

package/README.md

@@ -35,7 +35,8 @@ interface DashKitProps {
   itemsStateAndParams: ItemsStateAndParams;
   settings: SettingsProps;
   context: ContextProps;
-  overlayControls?: Record<string, OverlayControlItem[]>;
+  overlayControls?: Record<string, OverlayControlItem[]> | null;
+  overlayMenuItems?: MenuItems[] | null;
   noOverlay?: boolean;
   focusable?: boolean;
   draggableHandleClassName?: string;
@@ -51,7 +52,8 @@ interface DashKitProps {
 - **itemsStateAndParams**: [itemsStateAndParams](#temsStateAndParams).
 - **settings**: DashKit settings.
 - **context**: Object that will be propped up on all widgets.
-- **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed.
+- **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed. If `null` passed only close button or custom menu will be displayed.
+- **overlayMenuItems**: Custom dropdown menu items
 - **noOverlay**: If `true`, overlay and controls are not displayed while editing.
 - **focusable**: If `true`, grid items will be focusable.
 - **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
@@ -343,6 +345,10 @@ type MenuItem = {
 };
 
 // use array of menu items in settings
+<Dashkit overlayMenuItems={[] as Array<MenuItem> | null} />
+
+[deprecated]
+// overlayMenuItems property has greater priority over setSettings menu
 DashKit.setSettings({menu: [] as Array<MenuItem>});
 ```
 
@@ -386,7 +392,7 @@ type ItemDropProps = {
 #### Example:
 
 ```jsx
-const menuItems = [
+const overlayMenuItems = [
   {
     id: 'chart',
     icon: <Icon data={ChartColumn} />,
@@ -405,7 +411,7 @@ const onDrop = (dropProps: ItemDropProps) => {
 
 <DashKitDnDWrapper>
   <DashKit editMode={true} config={config} onChange={onChange} onDrop={onDrop} />
-  <ActionPanel items={menuItems} />
+  <ActionPanel items={overlayMenuItems} />
 </DashKitDnDWrapper>
 ```
 
@@ -475,6 +481,7 @@ const CustomThemeWrapper = (props: {
 By default, storybook runs on `http://localhost:7120/`.
 New changes from a project aren't always picked up when storybook is running, so it's better to rebuild a project manually and restart storybook.
 
+
 ### Example of an nginx config for development on a dev machine
 
 ```bash

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import type { Config, ConfigItem, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
-import { ContextProps, DashKitGroup, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
+import { ContextProps, DashKitGroup, MenuItem, Plugin, SetConfigItem, SetNewItemOptions, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
 interface DashKitGeneralProps {
     config: Config;
     editMode: boolean;
     draggableHandleClassName?: string;
-    overlayControls?: Record<string, OverlayControlItem[]>;
+    overlayControls?: Record<string, OverlayControlItem[]> | null;
+    overlayMenuItems?: MenuItem[] | null;
 }
 interface DashKitDefaultProps {
     onItemEdit: (item: ConfigItem) => void;

package/build/cjs/components/DashKitView/DashKitView.js

@@ -9,10 +9,10 @@ const cn_1 = require("../../utils/cn");
 const GridLayout_1 = tslib_1.__importDefault(require("../GridLayout/GridLayout"));
 const MobileLayout_1 = tslib_1.__importDefault(require("../MobileLayout/MobileLayout"));
 const b = (0, cn_1.cn)('dashkit');
-function DashKitView(props) {
+function DashKitView() {
     const context = react_1.default.useContext(DashKitContext_1.DashKitContext);
     const { registerManager, forwardedMetaRef } = context;
-    return (react_1.default.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (react_1.default.createElement(MobileLayout_1.default, null)) : (react_1.default.createElement(GridLayout_1.default, { ref: forwardedMetaRef, overlayControls: props.overlayControls }))));
+    return (react_1.default.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (react_1.default.createElement(MobileLayout_1.default, null)) : (react_1.default.createElement(GridLayout_1.default, { ref: forwardedMetaRef }))));
 }
 const DashKitViewWithContext = (0, withContext_1.withContext)(DashKitView);
 const DashKitViewForwardedMeta = react_1.default.forwardRef((props, ref) => {

package/build/cjs/components/GridItem/GridItem.js

@@ -58,16 +58,15 @@ class GridItem extends react_1.default.PureComponent {
         };
     }
     renderOverlay() {
-        const { overlayControls, isPlaceholder } = this.props;
+        const { isPlaceholder } = this.props;
         const { editMode } = this.context;
         if (!editMode || this.props.item.data._editActive || isPlaceholder) {
             return null;
         }
         const { item } = this.props;
-        const controls = overlayControls && overlayControls[item.type];
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: b('overlay') }),
-            react_1.default.createElement(OverlayControls_1.default, { configItem: item, items: controls, overlayControls: overlayControls })));
+            react_1.default.createElement(OverlayControls_1.default, { configItem: item })));
     }
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
@@ -108,7 +107,6 @@ GridItem.propTypes = {
     item: prop_types_1.default.object,
     isDragging: prop_types_1.default.bool,
     layout: prop_types_1.default.array,
-    overlayControls: prop_types_1.default.object,
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,
     isPlaceholder: prop_types_1.default.bool,

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

@@ -9,6 +9,10 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
+    _memoCallbacksForGroups: {};
+    _memoGroupsProps: {};
+    _memoGroupsLayouts: {};
+    _memoForwardedPluginRef: any[];
     _timeout: any;
     _lastReloadAt: any;
     onVisibilityChange: () => void;
@@ -19,11 +23,22 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     }) => void;
     getItemsMeta: () => any;
     getActiveLayout(): any;
+    getMemoGroupLayout: (group: any, layout: any) => any;
+    getMemoGroupCallbacks: (group: any) => any;
+    getMemoGroupProps: (group: any, renderLayout: any, properties: any) => {
+        layout: any;
+        callbacks: any;
+    };
+    getLayoutAndPropsByGroup: (group: any) => {
+        properties: any;
+        layout: any;
+    };
+    getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
     reloadItems(): void;
     _onStart: () => void;
     _onStop: (group: any, newLayout: any) => void;
-    _onDropDragOver: (e: any) => any;
+    _onDropDragOver: (group: any, e: any) => any;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;

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

@@ -9,6 +9,10 @@ const ReactGridLayout_1 = require("./ReactGridLayout");
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
         super(props, context);
+        this._memoForwardedPluginRef = [];
+        this._memoGroupsProps = {};
+        this._memoGroupsLayouts = {};
+        this._memoCallbacksForGroups = {};
         this.onVisibilityChange = () => {
             this.setState({
                 isPageHidden: document.hidden,
@@ -30,6 +34,65 @@ class GridLayout extends react_1.default.PureComponent {
             const { getItemsMeta } = this.context;
             return getItemsMeta(this.pluginsRefs);
         };
+        this.getMemoGroupLayout = (group, layout) => {
+            // fastest possible way to match json
+            const key = JSON.stringify(layout);
+            if (this._memoGroupsLayouts[group]) {
+                if (this._memoGroupsLayouts[group].key === key) {
+                    return this._memoGroupsLayouts[group];
+                }
+                else {
+                    this._memoGroupsLayouts[group].key = key;
+                    this._memoGroupsLayouts[group].layout = layout;
+                }
+            }
+            else {
+                this._memoGroupsLayouts[group] = {
+                    key,
+                    layout,
+                };
+            }
+            return this._memoGroupsLayouts[group];
+        };
+        this.getMemoGroupCallbacks = (group) => {
+            if (!this._memoCallbacksForGroups[group]) {
+                const onStart = this._onStart;
+                const onStop = this._onStop.bind(this, group);
+                const onDrop = this._onDrop.bind(this, group);
+                const onDropDragOver = this._onDropDragOver.bind(this, group);
+                this._memoCallbacksForGroups[group] = {
+                    onDragStart: onStart,
+                    onResizeStart: onStart,
+                    onDragStop: onStop,
+                    onResizeStop: onStop,
+                    onDrop: onDrop,
+                    onDropDragOver,
+                };
+            }
+            return this._memoCallbacksForGroups[group];
+        };
+        this.getMemoGroupProps = (group, renderLayout, properties) => {
+            // Needed for _onDropDragOver
+            this._memoGroupsProps[group] = properties;
+            return {
+                layout: this.getMemoGroupLayout(group, renderLayout).layout,
+                callbacks: this.getMemoGroupCallbacks(group),
+            };
+        };
+        this.getLayoutAndPropsByGroup = (group) => {
+            return {
+                properties: this._memoGroupsProps[group],
+                layout: this._memoGroupsLayouts[group].layout,
+            };
+        };
+        this.getMemoForwardRefCallback = (refIndex) => {
+            if (!this._memoForwardedPluginRef[refIndex]) {
+                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                    this.pluginsRefs[refIndex] = pluginRef;
+                };
+            }
+            return this._memoForwardedPluginRef[refIndex];
+        };
         this._onStart = () => {
             if (this.temporaryLayout)
                 return;
@@ -46,12 +109,13 @@ class GridLayout extends react_1.default.PureComponent {
             }
             this.setState({ isDragging: false });
         };
-        this._onDropDragOver = (e) => {
-            const { editMode, dragOverPlugin, onDropDragOver } = this.context;
+        this._onDropDragOver = (group, e) => {
+            const { editMode, dragOverPlugin } = this.context;
             if (!editMode || !dragOverPlugin) {
                 return false;
             }
-            return onDropDragOver(e);
+            const { properties, layout } = this.getLayoutAndPropsByGroup(group);
+            return this.context.onDropDragOver(e, properties, layout);
         };
         this._onDrop = (group, newLayout, item, e) => {
             if (!item) {
@@ -84,6 +148,10 @@ class GridLayout extends react_1.default.PureComponent {
     componentWillUnmount() {
         clearTimeout(this._timeout);
         document.removeEventListener('visibilitychange', this.onVisibilityChange);
+        this._memoCallbacksForGroups = {};
+        this._memoGroupsProps = {};
+        this._memoGroupsLayouts = {};
+        this._memoForwardedPluginRef = [];
     }
     getActiveLayout() {
         const { layout, temporaryLayout } = this.context;
@@ -129,26 +197,29 @@ class GridLayout extends react_1.default.PureComponent {
         }
         const id = constants_1.TEMPORARY_ITEM_ID;
         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 }));
+        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) }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         const properties = groupGridProperties
             ? groupGridProperties(Object.assign({}, registerManager.gridLayout))
             : registerManager.gridLayout;
-        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { layout: renderLayout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: (...args) => this._onStop(group, ...args), onResizeStart: this._onStart, onResizeStop: (...args) => this._onStop(group, ...args) }, (draggableHandleClassName
+        let { compactType } = properties;
+        if (compactType === constants_1.COMPACT_TYPE_HORIZONTAL_NOWRAP) {
+            compactType = 'horizontal';
+        }
+        const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
+        return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, properties, { compactType: compactType, layout: layout, key: `group_${group}`, isDraggable: editMode, isResizable: editMode, onDragStart: callbacks.onDragStart, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResizeStop: callbacks.onResizeStop }, (draggableHandleClassName
             ? { draggableHandle: `.${draggableHandleClassName}` }
             : null), (outerDnDEnable
             ? {
                 isDroppable: true,
-                onDropDragOver: this._onDropDragOver,
-                onDrop: (...args) => this._onDrop(group, ...args),
+                onDropDragOver: callbacks.onDropDragOver,
+                onDrop: callbacks.onDrop,
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
-                        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 }));
+                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName) }));
             }),
             this.renderTemporaryPlaceholder()));
     }

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

@@ -2,6 +2,8 @@ declare const _default: {
     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 @@ declare const _default: {
     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/cjs/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';
 export declare enum OverlayControlsPosition {
     TopRight = "top_right",
     TopLeft = "top_left",
@@ -13,6 +13,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;
@@ -35,8 +36,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;
@@ -49,21 +48,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/cjs/components/OverlayControls/OverlayControls.js

@@ -24,6 +24,11 @@ const DEFAULT_DROPDOWN_MENU = [constants_1.MenuItems.Copy, constants_1.MenuItems
 class OverlayControls extends react_1.default.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;
@@ -31,18 +36,28 @@ class OverlayControls extends react_1.default.Component {
             return (react_1.default.createElement(uikit_1.Button, { key: index, view: view, size: size, title: title, pin: this.getControlItemPinStyle(index, length), onClick: () => onItemClickHandler(this.props.configItem), qa: qa },
                 react_1.default.createElement(uikit_1.Icon, { data: icon || CogIcon_1.CogIcon, size: icon ? iconSize : 24 })));
         };
+        this.getDefaultControls = () => {
+            const { view, size } = this.props;
+            if (this.context.overlayControls === null) {
+                return null;
+            }
+            return (react_1.default.createElement(uikit_1.Button, { view: view, size: size, title: (0, i18n_1.i18n)('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
+                react_1.default.createElement(uikit_1.Icon, { data: CogIcon_1.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)) {
@@ -57,15 +72,14 @@ class OverlayControls extends react_1.default.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,
@@ -87,7 +101,8 @@ class OverlayControls extends react_1.default.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()
@@ -122,11 +137,9 @@ class OverlayControls extends react_1.default.Component {
         return null;
     }
     renderControls() {
-        const { view, size } = this.props;
         const customLeftControls = this.getCustomLeftOverlayControls();
         const hasCustomOverlayLeftControls = Boolean(customLeftControls.length);
-        const defaultControl = (react_1.default.createElement(uikit_1.Button, { view: view, size: size, title: (0, i18n_1.i18n)('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
-            react_1.default.createElement(uikit_1.Icon, { data: CogIcon_1.CogIcon, size: "24" })));
+        const defaultControl = this.getDefaultControls();
         const controls = hasCustomOverlayLeftControls
             ? customLeftControls.map((item, index, items) => this.renderControlsItem(item, index, items.length + 1))
             : defaultControl;
@@ -139,50 +152,58 @@ class OverlayControls extends react_1.default.Component {
     }
     renderMenu() {
         const { view, size } = this.props;
-        const { registerManager } = this.context;
-        const withMenu = Array.isArray(registerManager.settings.menu) && registerManager.settings.menu.length;
-        return (react_1.default.createElement(react_1.default.Fragment, null, withMenu ? (this.renderDropdownMenu()) : (react_1.default.createElement(uikit_1.Button, { view: view, size: size, title: (0, i18n_1.i18n)('label_delete'), pin: "brick-round", onClick: this.onRemoveItem, qa: "dashkit-overlay-control-menu" },
-            react_1.default.createElement(uikit_1.Icon, { data: CloseIcon_1.CloseIcon, size: "12" })))));
+        const dropdown = this.renderDropdownMenu();
+        if (dropdown) {
+            return dropdown;
+        }
+        return (react_1.default.createElement(uikit_1.Button, { key: 'delete-control', view: view, size: size, title: (0, i18n_1.i18n)('label_delete'), pin: "brick-round", onClick: this.onRemoveItem, qa: "dashkit-overlay-control-menu" },
+            react_1.default.createElement(uikit_1.Icon, { data: CloseIcon_1.CloseIcon, size: "12" })));
     }
     isDefaultMenu(menu) {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(constants_1.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 || (0, i18n_1.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_1.default.createElement(uikit_1.DropdownMenu, { items: items, renderSwitcher: (props) => (react_1.default.createElement(uikit_1.Button, Object.assign({}, props, { view: view, size: size, pin: "brick-round", qa: "dashkit-overlay-control-menu" }),
                 react_1.default.createElement(uikit_1.Icon, { data: DotsIcon_1.DotsIcon, size: "16" }))) }));
     }
@@ -202,19 +223,14 @@ class OverlayControls extends react_1.default.Component {
         return 'brick-brick';
     }
     getCustomControlsWithWidgets() {
-        // Добавляем контрол удаления виджета по умолчанию
-        const deleteControl = {
-            title: (0, i18n_1.i18n)('label_delete'),
-            icon: CloseIcon_1.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_1.DashKitContext;
+OverlayControls.contextType = DashKitContext_1.DashkitOvelayControlsContext;
 OverlayControls.defaultProps = {
     position: OverlayControlsPosition.TopRight,
     view: 'flat',

package/build/cjs/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/cjs/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.COMPACT_TYPE_HORIZONTAL_NOWRAP = 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';
@@ -14,3 +14,4 @@ exports.MenuItems = {
 exports.DEFAULT_WIDGET_HEIGHT = 3;
 exports.DEFAULT_WIDGET_WIDTH = 3;
 exports.DEFAULT_GROUP = '__default';
+exports.COMPACT_TYPE_HORIZONTAL_NOWRAP = 'horizontal-nowrap';

package/build/cjs/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/cjs/context/DashKitContext.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashKitDnDContext = exports.DashKitContext = void 0;
+exports.DashKitDnDContext = exports.DashkitOvelayControlsContext = exports.DashKitContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const DashKitContext = react_1.default.createContext();
 exports.DashKitContext = DashKitContext;
+const DashkitOvelayControlsContext = react_1.default.createContext();
+exports.DashkitOvelayControlsContext = DashkitOvelayControlsContext;
 const DashKitDnDContext = react_1.default.createContext();
 exports.DashKitDnDContext = DashKitDnDContext;

package/build/cjs/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;