@gravity-ui/dashkit 8.6.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>
 ```
 

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.js

@@ -197,7 +197,7 @@ 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;
@@ -219,7 +219,7 @@ class GridLayout extends react_1.default.PureComponent {
             }
             : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                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), 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/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/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/withContext.js

@@ -54,12 +54,13 @@ function useMemoStateContext(props) {
             onChange({ config: newConfig });
         }
     }, [props.config, onChange]);
+    const getLayoutItem = react_1.default.useCallback((id) => {
+        return props.config.layout.find(({ i }) => i === id);
+    }, [props.config.layout]);
     const onItemRemove = react_1.default.useCallback((id) => {
-        if (nowrapAdjustedLayouts.current[id]) {
-            delete nowrapAdjustedLayouts.current[id];
-            delete adjustedLayouts.current[id];
-            delete originalLayouts.current[id];
-        }
+        delete nowrapAdjustedLayouts.current[id];
+        delete adjustedLayouts.current[id];
+        delete originalLayouts.current[id];
         if (id === common_1.TEMPORARY_ITEM_ID) {
             resetTemporaryLayout();
         }
@@ -195,7 +196,7 @@ function useMemoStateContext(props) {
         const nowrapAdjust = nowrapAdjustedLayouts.current;
         return props.layout.map((item) => {
             const widgetId = item.i;
-            if (adjusted[widgetId] || nowrapAdjust[widgetId]) {
+            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 = tslib_1.__rest(_a, ["parent"]);
@@ -205,13 +206,13 @@ function useMemoStateContext(props) {
                 if (item.parent) {
                     adjustedItem.parent = item.parent;
                 }
-                if (nowrapAdjust[widgetId]) {
+                if (widgetId in nowrapAdjust) {
                     adjustedItem.maxW = nowrapAdjust[widgetId];
                 }
                 return adjustedItem;
             }
             else {
-                if (original[widgetId]) {
+                if (widgetId in original) {
                     delete original[widgetId];
                 }
                 return item;
@@ -283,7 +284,7 @@ function useMemoStateContext(props) {
             dragProps,
         });
     }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
-    return react_1.default.useMemo(() => ({
+    const dashkitContextValue = react_1.default.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,
         config: props.config,
@@ -299,10 +300,8 @@ function useMemoStateContext(props) {
         itemsParams,
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
-        removeItem: onItemRemove,
         onDrop,
         onDropDragOver,
-        editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -327,10 +326,8 @@ function useMemoStateContext(props) {
         itemsParams,
         props.registerManager,
         onItemStateAndParamsChange,
-        onItemRemove,
         onDrop,
         onDropDragOver,
-        props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -341,12 +338,34 @@ function useMemoStateContext(props) {
         outerDnDEnable,
         dragOverPlugin,
     ]);
+    const overlayMenuItems = props.overlayMenuItems || props.registerManager.settings.menu;
+    const controlsContextValue = react_1.default.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 };
 }
 function withContext(Component) {
     const WithContext = (props) => {
-        const contextValue = useMemoStateContext(props);
-        return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: contextValue },
-            react_1.default.createElement(Component, { overlayControls: props.overlayControls })));
+        const { dashkitContextValue, controlsContextValue } = useMemoStateContext(props);
+        return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: dashkitContextValue },
+            react_1.default.createElement(DashKitContext_1.DashkitOvelayControlsContext.Provider, { value: controlsContextValue },
+                react_1.default.createElement(Component, null))));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

package/build/esm/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/esm/components/DashKitView/DashKitView.js

@@ -7,10 +7,10 @@ import GridLayout from '../GridLayout/GridLayout';
 import MobileLayout from '../MobileLayout/MobileLayout';
 import './DashKitView.css';
 const b = cn('dashkit');
-function DashKitView(props) {
+function DashKitView() {
     const context = React.useContext(DashKitContext);
     const { registerManager, forwardedMetaRef } = context;
-    return (React.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (React.createElement(MobileLayout, null)) : (React.createElement(GridLayout, { ref: forwardedMetaRef, overlayControls: props.overlayControls }))));
+    return (React.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (React.createElement(MobileLayout, null)) : (React.createElement(GridLayout, { ref: forwardedMetaRef }))));
 }
 const DashKitViewWithContext = withContext(DashKitView);
 const DashKitViewForwardedMeta = React.forwardRef((props, ref) => {

package/build/esm/components/GridItem/GridItem.js

@@ -56,16 +56,15 @@ class GridItem extends React.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.createElement(React.Fragment, null,
             React.createElement("div", { className: b('overlay') }),
-            React.createElement(OverlayControls, { configItem: item, items: controls, overlayControls: overlayControls })));
+            React.createElement(OverlayControls, { configItem: item })));
     }
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
@@ -106,7 +105,6 @@ GridItem.propTypes = {
     item: PropTypes.object,
     isDragging: PropTypes.bool,
     layout: PropTypes.array,
-    overlayControls: PropTypes.object,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,
     isPlaceholder: PropTypes.bool,

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

@@ -194,7 +194,7 @@ class GridLayout extends React.PureComponent {
         }
         const id = TEMPORARY_ITEM_ID;
         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 }));
+        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) }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
@@ -216,7 +216,7 @@ class GridLayout extends React.PureComponent {
             }
             : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
             renderItems.map((item, i) => {
-                return (React.createElement(GridItem, { 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), overlayControls: this.props.overlayControls }));
+                return (React.createElement(GridItem, { 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/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/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/withContext.js

@@ -3,7 +3,7 @@ import React from 'react';
 import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID, } from '../constants/common';
-import { DashKitContext, DashKitDnDContext } from '../context/DashKitContext';
+import { DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext, } from '../context/DashKitContext';
 import { useDeepEqualMemo } from '../hooks/useDeepEqualMemo';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager } from '../utils';
@@ -51,12 +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) => {
-        if (nowrapAdjustedLayouts.current[id]) {
-            delete nowrapAdjustedLayouts.current[id];
-            delete adjustedLayouts.current[id];
-            delete originalLayouts.current[id];
-        }
+        delete nowrapAdjustedLayouts.current[id];
+        delete adjustedLayouts.current[id];
+        delete originalLayouts.current[id];
         if (id === TEMPORARY_ITEM_ID) {
             resetTemporaryLayout();
         }
@@ -192,7 +193,7 @@ function useMemoStateContext(props) {
         const nowrapAdjust = nowrapAdjustedLayouts.current;
         return props.layout.map((item) => {
             const widgetId = item.i;
-            if (adjusted[widgetId] || nowrapAdjust[widgetId]) {
+            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"]);
@@ -202,13 +203,13 @@ function useMemoStateContext(props) {
                 if (item.parent) {
                     adjustedItem.parent = item.parent;
                 }
-                if (nowrapAdjust[widgetId]) {
+                if (widgetId in nowrapAdjust) {
                     adjustedItem.maxW = nowrapAdjust[widgetId];
                 }
                 return adjustedItem;
             }
             else {
-                if (original[widgetId]) {
+                if (widgetId in original) {
                     delete original[widgetId];
                 }
                 return item;
@@ -280,7 +281,7 @@ function useMemoStateContext(props) {
             dragProps,
         });
     }, [dragProps, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
-    return React.useMemo(() => ({
+    const dashkitContextValue = React.useMemo(() => ({
         layout: resultLayout,
         temporaryLayout,
         config: props.config,
@@ -296,10 +297,8 @@ function useMemoStateContext(props) {
         itemsParams,
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
-        removeItem: onItemRemove,
         onDrop,
         onDropDragOver,
-        editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -324,10 +323,8 @@ function useMemoStateContext(props) {
         itemsParams,
         props.registerManager,
         onItemStateAndParamsChange,
-        onItemRemove,
         onDrop,
         onDropDragOver,
-        props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -338,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/package.json

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