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

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

@@ -2,13 +2,13 @@
 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 b = (0, cn_1.cn)('dashkit');
 function DashKitView(props) {
     const context = react_1.default.useContext(DashKitContext_1.DashKitContext);
     const { registerManager, forwardedMetaRef } = context;

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.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";

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

@@ -1,12 +1,12 @@
 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 './DashKitView.css';
-const b = block('dashkit');
+const b = cn('dashkit');
 function DashKitView(props) {
     const context = React.useContext(DashKitContext);
     const { registerManager, forwardedMetaRef } = context;

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.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";

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/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/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",
   "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 }));
-    })));
-};