@gravity-ui/dashkit 6.0.0-beta.2 → 6.1.0-beta.0

package/build/cjs/components/ActionPanel/ActionPanel.css

@@ -0,0 +1,43 @@
+.dashkit-action-panel {
+  background-color: var(--g-color-base-float);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+  position: fixed;
+  bottom: 20px;
+  display: flex;
+  border-radius: 8px;
+  padding: 8px;
+  gap: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+.dashkit-action-panel__item {
+  height: 68px;
+  width: 98px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s background-color ease-in-out;
+  border-radius: 6px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.dashkit-action-panel__item:hover {
+  cursor: pointer;
+  background-color: var(--g-color-base-simple-hover);
+}
+.dashkit-action-panel__icon {
+  margin-bottom: 4px;
+}
+.dashkit-action-panel__title {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export type ActionPanelItem = {
+    id: string;
+    icon: React.ReactNode;
+    title: string | React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+};
+type ActionPanelProps = {
+    items: ActionPanelItem[];
+};
+export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element;
+export {};

package/build/cjs/components/ActionPanel/ActionPanel.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionPanel = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.cn)('dashkit-action-panel');
+const ActionPanel = (props) => {
+    return (react_1.default.createElement("div", { className: b() }, props.items.map((item) => {
+        return (react_1.default.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick },
+            react_1.default.createElement("div", { className: b('icon') }, item.icon),
+            react_1.default.createElement("div", { className: b('title') }, item.title)));
+    })));
+};
+exports.ActionPanel = ActionPanel;

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

@@ -3,6 +3,7 @@ import GridLayout from '../GridLayout/GridLayout';
 import { SetConfigItem, Settings, SettingsProps, ContextProps, Plugin, SetItemOptions } from '../../typings';
 import { GlobalParams, Config, ConfigItem, ItemsStateAndParams } from '../../shared';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
+import { ActionPanelItem } from '../ActionPanel/ActionPanel';
 interface DashKitGeneralProps {
     config: Config;
     editMode: boolean;
@@ -21,6 +22,7 @@ interface DashKitDefaultProps {
     overlayControls?: Record<string, OverlayControlItem[]>;
     noOverlay?: boolean;
     draggableHandleClassName?: string;
+    actionPanel?: ActionPanelItem[];
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }

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

@@ -2,17 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const DashKitContext_1 = require("../../context/DashKitContext");
 const GridLayout_1 = tslib_1.__importDefault(require("../GridLayout/GridLayout"));
 const MobileLayout_1 = tslib_1.__importDefault(require("../MobileLayout/MobileLayout"));
 const withContext_1 = require("../../hocs/withContext");
 const useCalcLayout_1 = require("../../hooks/useCalcLayout");
-const b = (0, bem_cn_lite_1.default)('dashkit');
+const cn_1 = require("../../utils/cn");
+const ActionPanel_1 = require("../ActionPanel/ActionPanel");
+const b = (0, cn_1.cn)('dashkit');
 function DashKitView(props) {
+    var _a;
     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 }))));
+    const { registerManager, forwardedMetaRef, editMode } = 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 })),
+        Boolean(((_a = props.actionPanel) === null || _a === void 0 ? void 0 : _a.length) && editMode) && (react_1.default.createElement(ActionPanel_1.ActionPanel, { items: props.actionPanel }))));
 }
 const DashKitViewWithContext = (0, withContext_1.withContext)(DashKitView);
 const DashKitViewForwardedMeta = react_1.default.forwardRef((props, ref) => {

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

@@ -8,7 +8,7 @@
   left: 0;
   right: 0;
   border-radius: 3px;
-  background-color: rgba(230, 230, 230, 0.2);
+  background-color: var(--g-color-base-generic);
   border: solid 1px rgba(0, 0, 0, 0.1);
 }
 .dashkit-grid-item__item {

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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
 const DashKitContext_1 = require("../../context/DashKitContext");
+const cn_1 = require("../../utils/cn");
 const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/OverlayControls"));
-const b = (0, bem_cn_lite_1.default)('dashkit-grid-item');
+const b = (0, cn_1.cn)('dashkit-grid-item');
 class GridItem extends react_1.default.PureComponent {
     renderOverlay() {
         const { overlayControls } = this.props;

package/build/cjs/components/Item/Item.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const prepareItem_1 = require("../../hocs/prepareItem");
-const b = (0, bem_cn_lite_1.default)('dashkit-item');
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.cn)('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
 const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
     if (!registerManager.check(type)) {

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
 const DashKitContext_1 = require("../../context/DashKitContext");
+const cn_1 = require("../../utils/cn");
 const helpers_1 = require("./helpers");
-const b = (0, bem_cn_lite_1.default)('dashkit-mobile-layout');
+const b = (0, cn_1.cn)('dashkit-mobile-layout');
 class MobileLayout extends react_1.default.PureComponent {
     constructor() {
         super(...arguments);

package/build/cjs/components/OverlayControls/OverlayControls.css

@@ -4,8 +4,9 @@
 }
 .dashkit-overlay-controls__default-controls {
   display: flex;
-  background: var(--g-color-base-generic-ultralight);
+  background-color: var(--g-color-base-float);
   border-radius: var(--g-border-radius-m);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 }
 .dashkit-overlay-controls_position_top_right {
   top: 7px;

package/build/cjs/components/OverlayControls/OverlayControls.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayControlsPosition = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const i18n_1 = tslib_1.__importDefault(require("../../i18n"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const DashKitContext_1 = require("../../context/DashKitContext");
@@ -12,7 +11,8 @@ const constants_1 = require("../../constants");
 const DotsIcon_1 = require("../../icons/DotsIcon");
 const CogIcon_1 = require("../../icons/CogIcon");
 const CloseIcon_1 = require("../../icons/CloseIcon");
-const b = (0, bem_cn_lite_1.default)('dashkit-overlay-controls');
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.cn)('dashkit-overlay-controls');
 var OverlayControlsPosition;
 (function (OverlayControlsPosition) {
     OverlayControlsPosition["TopRight"] = "top_right";
@@ -210,7 +210,7 @@ class OverlayControls extends react_1.default.Component {
 OverlayControls.contextType = DashKitContext_1.DashKitContext;
 OverlayControls.defaultProps = {
     position: OverlayControlsPosition.TopRight,
-    view: 'normal',
+    view: 'flat',
     size: 'm',
 };
 exports.default = OverlayControls;

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

@@ -1,4 +1,2 @@
 export * from './DashKit';
-export { ActionsToolbar } from './ActionsToolbar/ActionsToolbar';
 export type { OverlayControlItem } from './OverlayControls/OverlayControls';
-export type { ActionsToolbarButton } from './ActionsToolbar/ActionsToolbar';

package/build/cjs/components/index.js

@@ -1,7 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionsToolbar = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DashKit"), exports);
-var ActionsToolbar_1 = require("./ActionsToolbar/ActionsToolbar");
-Object.defineProperty(exports, "ActionsToolbar", { enumerable: true, get: function () { return ActionsToolbar_1.ActionsToolbar; } });

package/build/cjs/hocs/withContext.js

@@ -172,7 +172,7 @@ 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 })));
+            react_1.default.createElement(Component, { overlayControls: props.overlayControls, actionPanel: props.actionPanel })));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

package/build/cjs/plugins/Text/Text.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PluginText = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const uikit_1 = require("@gravity-ui/uikit");
 const i18n_1 = tslib_1.__importDefault(require("../../i18n"));
+const cn_1 = require("../../utils/cn");
 // need to set markdown styles separately
 // for instance can use yfm-transform
-const b = (0, bem_cn_lite_1.default)('dashkit-plugin-text');
+const b = (0, cn_1.cn)('dashkit-plugin-text');
 var LoadStatus;
 (function (LoadStatus) {
     LoadStatus["Pending"] = "pending";

package/build/cjs/plugins/Title/Title.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PluginTitle = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
-const b = (0, bem_cn_lite_1.default)('dashkit-plugin-title');
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.cn)('dashkit-plugin-title');
 class PluginTitle extends react_1.default.Component {
     render() {
         const { data } = this.props;

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

@@ -1,11 +1,13 @@
 import { OverlayCustomControlItem } from '../components/OverlayControls/OverlayControls';
 import { MenuItems } from '../constants';
 import type { ReactGridLayoutProps } from 'react-grid-layout';
+import { ActionPanelItem } from '../components/ActionPanel/ActionPanel';
 export interface Settings {
     gridLayout?: ReactGridLayoutProps;
     theme?: string;
     isMobile?: boolean;
     menu?: Array<MenuItem>;
+    actionPanel?: ActionPanelItem[];
 }
 export type MenuItem = (typeof MenuItems)[keyof typeof MenuItems] | OverlayCustomControlItem;
 export interface SettingsProps {

package/build/cjs/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;

package/build/cjs/utils/cn.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+const classname_1 = require("@bem-react/classname");
+exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });

package/build/esm/components/ActionPanel/ActionPanel.css

@@ -0,0 +1,43 @@
+.dashkit-action-panel {
+  background-color: var(--g-color-base-float);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+  position: fixed;
+  bottom: 20px;
+  display: flex;
+  border-radius: 8px;
+  padding: 8px;
+  gap: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+.dashkit-action-panel__item {
+  height: 68px;
+  width: 98px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s background-color ease-in-out;
+  border-radius: 6px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.dashkit-action-panel__item:hover {
+  cursor: pointer;
+  background-color: var(--g-color-base-simple-hover);
+}
+.dashkit-action-panel__icon {
+  margin-bottom: 4px;
+}
+.dashkit-action-panel__title {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './ActionPanel.css';
+export type ActionPanelItem = {
+    id: string;
+    icon: React.ReactNode;
+    title: string | React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+};
+type ActionPanelProps = {
+    items: ActionPanelItem[];
+};
+export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element;
+export {};

package/build/esm/components/ActionPanel/ActionPanel.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { cn } from '../../utils/cn';
+import './ActionPanel.css';
+const b = cn('dashkit-action-panel');
+export const ActionPanel = (props) => {
+    return (React.createElement("div", { className: b() }, props.items.map((item) => {
+        return (React.createElement("div", { role: "button", className: b('item', item.className), key: `dk-action-panel-${item.id}`, onClick: item.onClick },
+            React.createElement("div", { className: b('icon') }, item.icon),
+            React.createElement("div", { className: b('title') }, item.title)));
+    })));
+};

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

@@ -3,6 +3,7 @@ import GridLayout from '../GridLayout/GridLayout';
 import { SetConfigItem, Settings, SettingsProps, ContextProps, Plugin, SetItemOptions } from '../../typings';
 import { GlobalParams, Config, ConfigItem, ItemsStateAndParams } from '../../shared';
 import { OverlayControlItem } from '../OverlayControls/OverlayControls';
+import { ActionPanelItem } from '../ActionPanel/ActionPanel';
 interface DashKitGeneralProps {
     config: Config;
     editMode: boolean;
@@ -21,6 +22,7 @@ interface DashKitDefaultProps {
     overlayControls?: Record<string, OverlayControlItem[]>;
     noOverlay?: boolean;
     draggableHandleClassName?: string;
+    actionPanel?: ActionPanelItem[];
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }

package/build/esm/components/DashKitView/DashKitView.js

@@ -1,16 +1,20 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { DashKitContext } from '../../context/DashKitContext';
 import GridLayout from '../GridLayout/GridLayout';
 import MobileLayout from '../MobileLayout/MobileLayout';
 import { withContext } from '../../hocs/withContext';
 import { useCalcPropsLayout } from '../../hooks/useCalcLayout';
+import { cn } from '../../utils/cn';
+import { ActionPanel } from '../ActionPanel/ActionPanel';
 import './DashKitView.css';
-const b = block('dashkit');
+const b = cn('dashkit');
 function DashKitView(props) {
+    var _a;
     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 }))));
+    const { registerManager, forwardedMetaRef, editMode } = 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 })),
+        Boolean(((_a = props.actionPanel) === null || _a === void 0 ? void 0 : _a.length) && editMode) && (React.createElement(ActionPanel, { items: props.actionPanel }))));
 }
 const DashKitViewWithContext = withContext(DashKitView);
 const DashKitViewForwardedMeta = React.forwardRef((props, ref) => {

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

@@ -8,7 +8,7 @@
   left: 0;
   right: 0;
   border-radius: 3px;
-  background-color: rgba(230, 230, 230, 0.2);
+  background-color: var(--g-color-base-generic);
   border: solid 1px rgba(0, 0, 0, 0.1);
 }
 .dashkit-grid-item__item {

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import block from 'bem-cn-lite';
 import Item from '../Item/Item';
 import { DashKitContext } from '../../context/DashKitContext';
+import { cn } from '../../utils/cn';
 import './GridItem.css';
 import OverlayControls from '../OverlayControls/OverlayControls';
-const b = block('dashkit-grid-item');
+const b = cn('dashkit-grid-item');
 class GridItem extends React.PureComponent {
     renderOverlay() {
         const { overlayControls } = this.props;

package/build/esm/components/Item/Item.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 import { prepareItem } from '../../hocs/prepareItem';
+import { cn } from '../../utils/cn';
 import './Item.css';
-const b = block('dashkit-item');
+const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
 const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
     if (!registerManager.check(type)) {

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import Item from '../Item/Item';
 import { DashKitContext } from '../../context/DashKitContext';
+import { cn } from '../../utils/cn';
 import { getSortedConfigItems } from './helpers';
 import './MobileLayout.css';
-const b = block('dashkit-mobile-layout');
+const b = cn('dashkit-mobile-layout');
 export default class MobileLayout extends React.PureComponent {
     constructor() {
         super(...arguments);

package/build/esm/components/OverlayControls/OverlayControls.css

@@ -4,8 +4,9 @@
 }
 .dashkit-overlay-controls__default-controls {
   display: flex;
-  background: var(--g-color-base-generic-ultralight);
+  background-color: var(--g-color-base-float);
   border-radius: var(--g-border-radius-m);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 }
 .dashkit-overlay-controls_position_top_right {
   top: 7px;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import i18n from '../../i18n';
 import noop from 'lodash/noop';
 import { DashKitContext } from '../../context/DashKitContext';
@@ -8,8 +7,9 @@ import { COPIED_WIDGET_STORE_KEY, MenuItems } from '../../constants';
 import { DotsIcon } from '../../icons/DotsIcon';
 import { CogIcon } from '../../icons/CogIcon';
 import { CloseIcon } from '../../icons/CloseIcon';
+import { cn } from '../../utils/cn';
 import './OverlayControls.css';
-const b = block('dashkit-overlay-controls');
+const b = cn('dashkit-overlay-controls');
 export var OverlayControlsPosition;
 (function (OverlayControlsPosition) {
     OverlayControlsPosition["TopRight"] = "top_right";
@@ -207,7 +207,7 @@ class OverlayControls extends React.Component {
 OverlayControls.contextType = DashKitContext;
 OverlayControls.defaultProps = {
     position: OverlayControlsPosition.TopRight,
-    view: 'normal',
+    view: 'flat',
     size: 'm',
 };
 export default OverlayControls;

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

@@ -1,4 +1,2 @@
 export * from './DashKit';
-export { ActionsToolbar } from './ActionsToolbar/ActionsToolbar';
 export type { OverlayControlItem } from './OverlayControls/OverlayControls';
-export type { ActionsToolbarButton } from './ActionsToolbar/ActionsToolbar';

package/build/esm/components/index.js

@@ -1,2 +1 @@
 export * from './DashKit';
-export { ActionsToolbar } from './ActionsToolbar/ActionsToolbar';

package/build/esm/hocs/withContext.js

@@ -168,7 +168,7 @@ export function withContext(Component) {
     const WithContext = (props) => {
         const contextValue = useMemoStateContext(props);
         return (React.createElement(DashKitContext.Provider, { value: contextValue },
-            React.createElement(Component, { overlayControls: props.overlayControls })));
+            React.createElement(Component, { overlayControls: props.overlayControls, actionPanel: props.actionPanel })));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
     return WithContext;

package/build/esm/plugins/Text/Text.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { Loader, Button } from '@gravity-ui/uikit';
 import i18n from '../../i18n';
+import { cn } from '../../utils/cn';
 import './Text.css';
 // need to set markdown styles separately
 // for instance can use yfm-transform
-const b = block('dashkit-plugin-text');
+const b = cn('dashkit-plugin-text');
 var LoadStatus;
 (function (LoadStatus) {
     LoadStatus["Pending"] = "pending";

package/build/esm/plugins/Title/Title.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import './Title.css';
-const b = block('dashkit-plugin-title');
+const b = cn('dashkit-plugin-title');
 export class PluginTitle extends React.Component {
     render() {
         const { data } = this.props;

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

@@ -1,11 +1,13 @@
 import { OverlayCustomControlItem } from '../components/OverlayControls/OverlayControls';
 import { MenuItems } from '../constants';
 import type { ReactGridLayoutProps } from 'react-grid-layout';
+import { ActionPanelItem } from '../components/ActionPanel/ActionPanel';
 export interface Settings {
     gridLayout?: ReactGridLayoutProps;
     theme?: string;
     isMobile?: boolean;
     menu?: Array<MenuItem>;
+    actionPanel?: ActionPanelItem[];
 }
 export type MenuItem = (typeof MenuItems)[keyof typeof MenuItems] | OverlayCustomControlItem;
 export interface SettingsProps {

package/build/esm/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;

package/build/esm/utils/cn.js

@@ -0,0 +1,2 @@
+import { withNaming } from '@bem-react/classname';
+export const cn = withNaming({ e: '__', m: '_' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "6.0.0-beta.2",
+  "version": "6.1.0-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {
@@ -41,18 +41,19 @@
     "react-grid-layout": "^1.3.4"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "5.0.0-beta.4",
-    "bem-cn-lite": "^4.0.0",
+    "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/uikit": "^5.0.0",
     "react": "^16.8.0  || ^17 || ^18"
   },
   "devDependencies": {
+    "@bem-react/classname": "^1.6.0",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@gravity-ui/eslint-config": "^1.0.2",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.0.0-beta.4",
+    "@gravity-ui/uikit": "^5.9.0",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/cli": "^7.0.18",
@@ -65,7 +66,6 @@
     "@types/react": "^18.0.27",
     "@types/react-grid-layout": "^1.3.2",
     "babel-jest": "^26.6.3",
-    "bem-cn-lite": "^4.0.0",
     "copyfiles": "^2.4.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",

package/build/cjs/components/ActionsToolbar/ActionsToolbar.css

@@ -1,26 +0,0 @@
-.actions-toolbar {
-  display: flex;
-  position: fixed;
-  width: fit-content;
-  padding: 8px;
-  border-radius: var(--g-border-radius-l);
-  background-color: var(--g-color-base-background);
-  box-shadow: 0px 5px 6px 0px var(--g-color-sfx-shadow);
-}
-.actions-toolbar__button {
-  transition: all 0.2s ease;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 98px;
-  height: 68px;
-  cursor: pointer;
-  border-radius: var(--g-border-radius-s);
-}
-.actions-toolbar__button:hover {
-  background-color: var(--g-color-base-generic);
-}
-.actions-toolbar__icon {
-  margin-bottom: 10px;
-}

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { IconProps } from '@gravity-ui/uikit';
-export interface ActionsToolbarProps {
-    controls: ActionsToolbarButton[];
-    className?: string;
-}
-export interface ActionsToolbarButton {
-    icon: IconProps['data'];
-    text: React.ReactNode;
-    handler: () => void;
-    iconSize?: number;
-}
-export declare const ActionsToolbar: React.FC<ActionsToolbarProps>;

package/build/cjs/components/ActionsToolbar/ActionsToolbar.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionsToolbar = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
-const uikit_1 = require("@gravity-ui/uikit");
-const b = (0, bem_cn_lite_1.default)('actions-toolbar');
-const WidgetButton = ({ icon, text, handler }) => (react_1.default.createElement("div", { className: b('button'), onClick: handler },
-    react_1.default.createElement(uikit_1.Icon, { size: '18', className: b('icon'), data: icon }),
-    react_1.default.createElement(uikit_1.Text, { variant: 'body-1' }, text)));
-const ActionsToolbar = (props) => {
-    return (react_1.default.createElement("div", { className: `${b()} ${props.className}` }, props.controls.map((button, index) => {
-        return (react_1.default.createElement(WidgetButton, { key: index, icon: button.icon, text: button.text, handler: button.handler }));
-    })));
-};
-exports.ActionsToolbar = ActionsToolbar;

package/build/esm/components/ActionsToolbar/ActionsToolbar.css

@@ -1,26 +0,0 @@
-.actions-toolbar {
-  display: flex;
-  position: fixed;
-  width: fit-content;
-  padding: 8px;
-  border-radius: var(--g-border-radius-l);
-  background-color: var(--g-color-base-background);
-  box-shadow: 0px 5px 6px 0px var(--g-color-sfx-shadow);
-}
-.actions-toolbar__button {
-  transition: all 0.2s ease;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 98px;
-  height: 68px;
-  cursor: pointer;
-  border-radius: var(--g-border-radius-s);
-}
-.actions-toolbar__button:hover {
-  background-color: var(--g-color-base-generic);
-}
-.actions-toolbar__icon {
-  margin-bottom: 10px;
-}

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { IconProps } from '@gravity-ui/uikit';
-import './ActionsToolbar.css';
-export interface ActionsToolbarProps {
-    controls: ActionsToolbarButton[];
-    className?: string;
-}
-export interface ActionsToolbarButton {
-    icon: IconProps['data'];
-    text: React.ReactNode;
-    handler: () => void;
-    iconSize?: number;
-}
-export declare const ActionsToolbar: React.FC<ActionsToolbarProps>;

package/build/esm/components/ActionsToolbar/ActionsToolbar.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import block from 'bem-cn-lite';
-import { Icon, Text } from '@gravity-ui/uikit';
-import './ActionsToolbar.css';
-const b = block('actions-toolbar');
-const WidgetButton = ({ icon, text, handler }) => (React.createElement("div", { className: b('button'), onClick: handler },
-    React.createElement(Icon, { size: '18', className: b('icon'), data: icon }),
-    React.createElement(Text, { variant: 'body-1' }, text)));
-export const ActionsToolbar = (props) => {
-    return (React.createElement("div", { className: `${b()} ${props.className}` }, props.controls.map((button, index) => {
-        return (React.createElement(WidgetButton, { key: index, icon: button.icon, text: button.text, handler: button.handler }));
-    })));
-};