@gravity-ui/dashkit 6.7.2 → 7.0.0

package/README.md

@@ -57,24 +57,12 @@ interface DashKitProps {
 
 Before using `DashKit` as a react component, it must be configured.
 
-- setLang
-
-  Used for setting the language of DashKit provided ui elements. Currently the languages supported are: ru, en.
+- set language
 
   ```js
-  import {setLang} from '@gravity-ui/dashkit';
-
-  setLang('en');
-  ```
+  import {configure, Lang} from '@gravity-ui/uikit';
 
-  **From version 3.0.0 the language must be set separately for each DashKit and Gravity-ui instances**
-
-  ```js
-  import {setLang} from '@gravity-ui/dashkit';
-  import {configure as uiKitConfigure, Lang as UILang} from '@gravity-ui/uikit';
-    
-  setLang('en');
-  uiKitConfigure({lang: lang as UILang});
+  configure({lang: Lang.En});
   ```
 
 - DashKit.setSettings
@@ -97,7 +85,7 @@ Before using `DashKit` as a react component, it must be configured.
 
   ```js
   import {DashKit} from '@gravity-ui/dashkit';
-  import {pluginTitle, pluginText}  from '@gravity-ui/dashkit';
+  import {pluginTitle, pluginText} from '@gravity-ui/dashkit';
 
   DashKit.registerPlugins(
     pluginTitle,
@@ -325,6 +313,61 @@ type MenuItem = {
 DashKit.setSettings({menu: [] as Array<MenuItem>});
 ```
 
+### CSS API
+
+| Name                                           | Description           |
+| :--------------------------------------------- | :-------------------- |
+| Action panel variables                         |                       |
+| `--dashkit-action-panel-color`                 | Background color      |
+| `--dashkit-action-panel-border-color`          | Border color          |
+| `--dashkit-action-panel-border-radius`         | Border radius         |
+| Action panel item variables                    |                       |
+| `--dashkit-action-panel-item-color`            | Backgroud color       |
+| `--dashkit-action-panel-item-text-color`       | Text color            |
+| `--dashkit-action-panel-item-color-hover`      | Hover backgroud color |
+| `--dashkit-action-panel-item-text-color-hover` | Hover text color      |
+| Overlay variables                              |                       |
+| `--dashkit-overlay-border-color`               | Border color          |
+| `--dashkit-overlay-color`                      | Background color      |
+| `--dashkit-overlay-opacity`                    | Opacity               |
+| Grid item variables                            |                       |
+| `--dashkit-grid-item-edit-opacity`             | Opacity               |
+| `--dashkit-grid-item-border-radius`            | Border radius         |
+| Placeholder variables                          |                       |
+| `--dashkit-placeholder-color`                  | Background color      |
+| `--dashkit-placeholder-opacity`                | Opacity               |
+
+#### Usage example
+
+```css
+.custom-theme-wrapper {
+  --dashkit-grid-item-edit-opacit: 1;
+  --dashkit-overlay-color: var(--g-color-base-float);
+  --dashkit-overlay-border-color: var(--g-color-base-float);
+  --dashkit-overlay-opacity: 0.5;
+
+  --dashkit-action-panel-border-color: var(--g-color-line-info);
+  --dashkit-action-panel-color: var(--g-color-base-float-accent);
+  --dashkit-action-panel-border-radius: var(--g-border-radius-xxl);
+}
+```
+
+```tsx
+// ....
+
+const CustomThemeWrapper = (props: {
+  dashkitProps: DashkitProps;
+  actionPanelProps: ActionPanelProps;
+}) => {
+  return (
+    <div className="custom-theme-wrapper">
+      <Dashkit {...props.dashkitProps} />
+      <ActionPanel {...props.actionPanelProps} />
+    </div>
+  );
+};
+```
+
 ## Development
 
 ### Build & watch

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

@@ -1,33 +1,75 @@
 .dashkit-action-panel {
-  background-color: var(--g-color-base-float);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+  --_--dashkit-action-panel-color: var(--dashkit-action-panel-color, var(--g-color-base-float));
+  --_--dashkit-action-panel-border-color: var(
+      --dashkit-action-panel-border-color,
+      var(--g-color-base-brand)
+  );
+  --_--dashkit-action-panel-border-radius: var(
+      --dashkit-action-panel-border-radius,
+      var(--g-border-radius-xl)
+  );
+  background-color: var(--_--dashkit-action-panel-color);
   position: fixed;
   bottom: 20px;
   display: flex;
-  border-radius: 8px;
+  border-radius: var(--_--dashkit-action-panel-border-radius);
+  border: 2px solid var(--_--dashkit-action-panel-border-color);
   padding: 8px;
   gap: 0;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) translateY(0);
   z-index: 1;
 }
+.dashkit-action-panel-enter {
+  transform: translateX(-50%) translateY(calc(100% + 20px));
+  will-change: transform;
+}
+.dashkit-action-panel-enter-active {
+  transform: translateX(-50%) translateY(0);
+  transition: transform 300ms ease;
+}
+.dashkit-action-panel-exit {
+  transform: translateX(-50%) translateY(0);
+  will-change: transform;
+}
+.dashkit-action-panel-exit-active {
+  transform: translateX(-50%) translateY(calc(100% + 20px));
+  transition: transform 300ms ease;
+}
 .dashkit-action-panel__item {
+  --_--dashkit-action-panel-item-color: var(--dashkit-action-panel-item-color, transparent);
+  --_--dashkit-action-panel-item-text-color: var(
+      --dashkit-action-panel-item-text-color,
+      var(--g-color-text-primary)
+  );
+  --_--dashkit-action-panel-item-color-hover: var(
+      --dashkit-action-panel-item-color-hover,
+      var(--g-color-base-simple-hover)
+  );
+  --_--dashkit-action-panel-item-text-color-hover: var(
+      --dashkit-action-panel-item-text-color-hover,
+      var(--g-color-text-primary)
+  );
   height: 68px;
   width: 98px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  transition: 0.3s background-color ease-in-out;
+  transition: 300ms color ease-in-out, 300ms background-color ease-in-out;
   border-radius: 6px;
   padding: 0 12px;
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
+  background-color: var(--_--dashkit-action-panel-item-color);
+  color: var(--_--dashkit-action-panel-item-text-color);
+  will-change: color, backgroung-color;
 }
 .dashkit-action-panel__item:hover {
   cursor: pointer;
-  background-color: var(--g-color-base-simple-hover);
+  background-color: var(--_--dashkit-action-panel-item-color-hover);
+  color: var(--_--dashkit-action-panel-item-text-color-hover);
 }
 .dashkit-action-panel__icon {
   margin-bottom: 4px;

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

@@ -10,5 +10,7 @@ export type ActionPanelItem = {
 export type ActionPanelProps = {
     items: ActionPanelItem[];
     className?: string;
+    disable?: boolean;
+    toggleAnimation?: boolean;
 };
-export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element;
+export declare const ActionPanel: (props: ActionPanelProps) => JSX.Element | null;

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

@@ -3,13 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionPanel = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const react_transition_group_1 = require("react-transition-group");
 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(null, props.className) }, props.items.map((item) => {
+    var _a, _b;
+    const isDisabled = (_a = props.disable) !== null && _a !== void 0 ? _a : false;
+    const isAnimated = (_b = props.toggleAnimation) !== null && _b !== void 0 ? _b : false;
+    const nodeRef = react_1.default.useRef(null);
+    const content = (react_1.default.createElement("div", { ref: nodeRef, className: b(null, props.className) }, 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, "data-qa": item.qa },
             react_1.default.createElement("div", { className: b('icon') }, item.icon),
             react_1.default.createElement("div", { className: b('title'), title: item.title }, item.title)));
     })));
+    if (isAnimated) {
+        return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: !isDisabled, nodeRef: nodeRef, classNames: b(null), timeout: 300, unmountOnExit: true }, content));
+    }
+    else {
+        return isDisabled ? null : content;
+    }
 };
 exports.ActionPanel = ActionPanel;

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

@@ -1,7 +1,7 @@
 import React from 'react';
+import { Config, ConfigItem, GlobalParams, ItemsStateAndParams } from '../../shared';
+import { ContextProps, Plugin, SetConfigItem, SetItemOptions, Settings, SettingsProps } from '../../typings';
 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';
 interface DashKitGeneralProps {
     config: Config;

package/build/cjs/components/DashKit/DashKit.js

@@ -4,9 +4,9 @@ exports.DashKit = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const constants_1 = require("../../constants");
 const utils_1 = require("../../utils");
 const DashKitView_1 = tslib_1.__importDefault(require("../DashKitView/DashKitView"));
-const constants_1 = require("../../constants");
 const registerManager = new utils_1.RegisterManager();
 class DashKit extends react_1.default.PureComponent {
     constructor() {

package/build/cjs/components/DashKitView/DashKitView.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 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 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) {
     const context = react_1.default.useContext(DashKitContext_1.DashKitContext);

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

@@ -2,25 +2,32 @@
   position: relative;
 }
 .dashkit-grid-item__overlay {
+  --_-dashkit-overlay-color: var(--dashkit-overlay-color, var(--g-color-base-generic));
+  --_-dashkit-overlay-border-color: var(--dashkit-overlay-border-color, rgba(0, 0, 0, 0.1));
+  --_-dashkit-overlay-opacity: var(--dashkit-overlay-opacity, 1);
+  --_-dashkit-overlay-border-radius: var(
+      --dashkit-grid-item-border-radius,
+      3px
+  );
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-radius: 3px;
-  background-color: var(--g-color-base-generic);
-  border: solid 1px rgba(0, 0, 0, 0.1);
+  inset: 0;
+  border-radius: var(--_-dashkit-overlay-border-radius);
+  background-color: var(--_-dashkit-overlay-color);
+  border: solid 1px var(--_-dashkit-overlay-border-color);
+  opacity: var(--_-dashkit-overlay-opacity);
 }
 .dashkit-grid-item__item {
+  --_-dashkit-grid-item-border-radius: var(
+      --dashkit-grid-item-border-radius,
+      3px
+  );
+  --_-dashkit-grid-item-edit-opacity: var(--dashkit-grid-item-edit-opacity, 0.5);
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-radius: 3px;
+  inset: 0;
+  border-radius: var(--_-dashkit-grid-item-border-radius);
 }
 .dashkit-grid-item__item_editMode {
-  opacity: 0.5;
+  opacity: var(--_-dashkit-grid-item-edit-opacity);
   border-color: transparent;
   pointer-events: none;
 }
@@ -50,8 +57,10 @@
 }
 
 .react-grid-item.react-grid-placeholder {
-  background: #fc0;
-  opacity: 0.2;
+  --_-dashkit-placeholder-color: var(--dashkit-placeholder-color, #fc0);
+  --_-dashkit-placeholder-opacity: var(--dashkit-placeholder-opacity, 0.2);
+  background: var(--_-dashkit-placeholder-color);
+  opacity: var(--_-dashkit-placeholder-opacity);
   transition-duration: 100ms;
   z-index: 2;
   user-select: none;

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

@@ -1,3 +1,3 @@
 declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 export default _default;
-import React from "react";
+import React from 'react';

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

@@ -3,9 +3,9 @@ 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 Item_1 = tslib_1.__importDefault(require("../Item/Item"));
 const DashKitContext_1 = require("../../context/DashKitContext");
 const cn_1 = require("../../utils/cn");
+const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
 const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/OverlayControls"));
 const b = (0, cn_1.cn)('dashkit-grid-item');
 class GridItem extends react_1.default.PureComponent {

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

@@ -23,4 +23,4 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onStop: (newLayout: any) => void;
     render(): JSX.Element;
 }
-import React from "react";
+import React from 'react';

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
-const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
-const DashKitContext_1 = require("../../context/DashKitContext");
 const constants_1 = require("../../constants");
+const DashKitContext_1 = require("../../context/DashKitContext");
+const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
 const Layout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.default); // eslint-disable-line new-cap
 class GridLayout extends react_1.default.PureComponent {
     constructor(props, context) {
@@ -83,5 +83,5 @@ class GridLayout extends react_1.default.PureComponent {
         })));
     }
 }
-exports.default = GridLayout;
 GridLayout.contextType = DashKitContext_1.DashKitContext;
+exports.default = GridLayout;

package/build/cjs/components/Item/Item.css

@@ -1,16 +1,10 @@
 .dashkit-item__renderer {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
 }
 .dashkit-item__loader {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -61,3 +61,4 @@ declare const _default: {
     contextType: React.Context<any>;
 };
 export default _default;
+import React from 'react';

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

@@ -13,4 +13,4 @@ export default class MobileLayout extends React.PureComponent<any, any, any> {
     }) => void;
     render(): JSX.Element;
 }
-import React from "react";
+import React from 'react';

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ButtonView, ButtonSize, IconProps, MenuItemProps } from '@gravity-ui/uikit';
-import { ConfigItem, PluginBase, StringParams, Config, ItemState } from '../../shared';
+import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
+import { Config, ConfigItem, ItemState, PluginBase, StringParams } from '../../shared';
 import type { RegisterManager } from '../../utils/register-manager';
 export declare enum OverlayControlsPosition {
     TopRight = "top_right",

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayControlsPosition = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const i18n_1 = tslib_1.__importDefault(require("../../i18n"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const DashKitContext_1 = require("../../context/DashKitContext");
 const uikit_1 = require("@gravity-ui/uikit");
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const constants_1 = require("../../constants");
-const DotsIcon_1 = require("../../icons/DotsIcon");
-const CogIcon_1 = require("../../icons/CogIcon");
+const DashKitContext_1 = require("../../context/DashKitContext");
+const i18n_1 = require("../../i18n");
 const CloseIcon_1 = require("../../icons/CloseIcon");
+const CogIcon_1 = require("../../icons/CogIcon");
+const DotsIcon_1 = require("../../icons/DotsIcon");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)(constants_1.OVERLAY_CONTROLS_CLASS_NAME);
 var OverlayControlsPosition;
@@ -19,7 +19,7 @@ var OverlayControlsPosition;
     OverlayControlsPosition["TopLeft"] = "top_left";
     OverlayControlsPosition["BottomRight"] = "bottom_right";
     OverlayControlsPosition["BottomLeft"] = "bottom_left";
-})(OverlayControlsPosition = exports.OverlayControlsPosition || (exports.OverlayControlsPosition = {}));
+})(OverlayControlsPosition || (exports.OverlayControlsPosition = OverlayControlsPosition = {}));
 const DEFAULT_DROPDOWN_MENU = [constants_1.MenuItems.Copy, constants_1.MenuItems.Delete];
 class OverlayControls extends react_1.default.Component {
     constructor() {
@@ -99,13 +99,13 @@ class OverlayControls extends react_1.default.Component {
             case constants_1.MenuItems.Copy: {
                 return {
                     action: this.onCopyItem,
-                    text: (0, i18n_1.default)('label_copy'),
+                    text: (0, i18n_1.i18n)('label_copy'),
                 };
             }
             case constants_1.MenuItems.Delete: {
                 return {
                     action: this.onRemoveItem,
-                    text: (0, i18n_1.default)('label_delete'),
+                    text: (0, i18n_1.i18n)('label_delete'),
                 };
             }
             case constants_1.MenuItems.Settings: {
@@ -115,7 +115,7 @@ class OverlayControls extends react_1.default.Component {
                 }
                 return {
                     action: this.onEditItem,
-                    text: (0, i18n_1.default)('label_settings'),
+                    text: (0, i18n_1.i18n)('label_settings'),
                 };
             }
         }
@@ -125,7 +125,7 @@ class OverlayControls extends react_1.default.Component {
         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.default)('label_settings'), pin: "round-brick", onClick: this.onEditItem, qa: "dashkit-overlay-control-settings" },
+        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 controls = hasCustomOverlayLeftControls
             ? customLeftControls.map((item, index, items) => this.renderControlsItem(item, index, items.length + 1))
@@ -141,7 +141,7 @@ class OverlayControls extends react_1.default.Component {
         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.default)('label_delete'), pin: "brick-round", onClick: this.onRemoveItem, qa: "dashkit-overlay-control-menu" },
+        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" })))));
     }
     isDefaultMenu(menu) {
@@ -174,7 +174,8 @@ class OverlayControls extends react_1.default.Component {
                     ? () => itemHandler(configItem, itemParams, itemState)
                     : ((_a = this.getDropDownMenuItemConfig(item.id)) === null || _a === void 0 ? void 0 : _a.action) || (() => { });
                 return {
-                    text: item.title || (0, i18n_1.default)(item.id),
+                    // @ts-expect-error
+                    text: item.title || (0, i18n_1.i18n)(item.id),
                     icon: item.icon,
                     action: itemAction,
                     className: item.className,
@@ -203,7 +204,7 @@ class OverlayControls extends react_1.default.Component {
     getCustomControlsWithWidgets() {
         // Добавляем контрол удаления виджета по умолчанию
         const deleteControl = {
-            title: (0, i18n_1.default)('label_delete'),
+            title: (0, i18n_1.i18n)('label_delete'),
             icon: CloseIcon_1.CloseIcon,
             iconSize: 12,
             handler: this.onRemoveItem,

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

@@ -1,2 +1,2 @@
 export const DashKitContext: React.Context<any>;
-import React from "react";
+import React from 'react';

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

@@ -60,3 +60,4 @@ export function prepareItem(Component: any): {
     };
     contextType: React.Context<any>;
 };
+import React from 'react';

package/build/cjs/hocs/prepareItem.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.prepareItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const DashKitContext_1 = require("../context/DashKitContext");
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const DashKitContext_1 = require("../context/DashKitContext");
 function prepareItem(Component) {
     var _a;
     return _a = class PrepareItem extends react_1.default.Component {

package/build/cjs/hocs/withContext.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const DashKitContext_1 = require("../context/DashKitContext");
-const utils_1 = require("../utils");
 const shared_1 = require("../shared");
-const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const utils_1 = require("../utils");
 function useMemoStateContext(props) {
     // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
     // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,

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

@@ -1,4 +1 @@
-import { I18N } from '@gravity-ui/i18n';
-export declare const i18n: I18N;
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
-export default _default;
+export declare const i18n: (key: "button_retry" | "label_render-markdown-error" | "label_settings" | "label_copy" | "label_delete" | "label_error", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/i18n/index.js

@@ -2,18 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.i18n = void 0;
 const tslib_1 = require("tslib");
-const i18n_1 = require("@gravity-ui/i18n");
-const configure_1 = require("../utils/configure");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
 const en_json_1 = tslib_1.__importDefault(require("./en.json"));
 const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
-exports.i18n = new i18n_1.I18N();
-const COMPONENT = 'dashkit';
-exports.i18n.registerKeyset('en', COMPONENT, en_json_1.default);
-exports.i18n.registerKeyset('ru', COMPONENT, ru_json_1.default);
-exports.i18n.setLang((0, configure_1.getConfig)().lang || 'en');
-(0, configure_1.subscribeConfigure)((config) => {
-    if (config.lang) {
-        exports.i18n.setLang(config.lang);
-    }
-});
-exports.default = exports.i18n.keyset(COMPONENT);
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, 'dashkit');

package/build/cjs/plugins/Text/Text.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PluginWidgetProps, Plugin } from '../../typings';
+import { Plugin, PluginWidgetProps } from '../../typings';
 declare enum LoadStatus {
     Pending = "pending",
     Success = "success",

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

@@ -4,7 +4,7 @@ exports.PluginText = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const i18n_1 = tslib_1.__importDefault(require("../../i18n"));
+const i18n_1 = require("../../i18n");
 const cn_1 = require("../../utils/cn");
 // need to set markdown styles separately
 // for instance can use yfm-transform
@@ -65,9 +65,9 @@ class PluginText extends react_1.default.PureComponent {
     }
     renderError() {
         return (react_1.default.createElement("div", { className: b({ error: true }) },
-            react_1.default.createElement("div", { className: b('error') }, (0, i18n_1.default)('label_render-markdown-error')),
+            react_1.default.createElement("div", { className: b('error') }, (0, i18n_1.i18n)('label_render-markdown-error')),
             react_1.default.createElement("br", null),
-            react_1.default.createElement(uikit_1.Button, { view: "action", size: "m", onClick: this.onRetryClick }, (0, i18n_1.default)('button_retry')),
+            react_1.default.createElement(uikit_1.Button, { view: "action", size: "m", onClick: this.onRetryClick }, (0, i18n_1.i18n)('button_retry')),
             react_1.default.createElement("br", null)));
     }
     renderText() {

package/build/cjs/plugins/Title/Title.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PluginWidgetProps, Plugin } from '../../typings';
+import { Plugin, PluginWidgetProps } from '../../typings';
 export interface PluginTitleProps extends PluginWidgetProps {
     data: {
         size: 'l' | 'm' | 's' | 'xs';

package/build/cjs/shared/modules/helpers.d.ts

@@ -1,4 +1,4 @@
-import { PluginBase, ConfigItem, ItemsStateAndParams, StateAndParamsMetaData, StringParams, ConfigConnection, ConfigAliases, ConfigItemWithTabs, Config, ItemStateAndParams } from '../types';
+import { Config, ConfigAliases, ConfigConnection, ConfigItem, ConfigItemWithTabs, ItemStateAndParams, ItemsStateAndParams, PluginBase, StateAndParamsMetaData, StringParams } from '../types';
 export declare function prerenderItems({ items, plugins, }: {
     items: ConfigItem[];
     plugins: PluginBase[];

package/build/cjs/shared/modules/helpers.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasActionParams = exports.hasActionParam = exports.transformParamsToActionParams = exports.pickExceptActionParamsFromParams = exports.pickActionParamsFromParams = exports.deleteFromQueue = exports.addToQueue = exports.getInitialItemsStateAndParamsMeta = exports.mergeParamsWithAliases = exports.getMapItemsIgnores = exports.resolveItemInnerId = exports.formQueueData = exports.isItemWithTabs = exports.getCurrentVersion = exports.getItemsStateAndParamsMeta = exports.prerenderItems = void 0;
 const tslib_1 = require("tslib");
-const keyBy_1 = tslib_1.__importDefault(require("lodash/keyBy"));
 const get_1 = tslib_1.__importDefault(require("lodash/get"));
 const invert_1 = tslib_1.__importDefault(require("lodash/invert"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
+const keyBy_1 = tslib_1.__importDefault(require("lodash/keyBy"));
 const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const constants_1 = require("../constants");
 function getNormalizedPlugins(plugins) {