@gravity-ui/dashkit 3.0.1

package/build/esm/components/DashKit/DashKit.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { RegisterManager, UpdateManager } from '../../utils';
+import DashKitView from '../DashKitView/DashKitView';
+import { DEFAULT_NAMESPACE } from '../../constants';
+const registerManager = new RegisterManager();
+export class DashKit extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.metaRef = React.createRef();
+    }
+    static registerPlugins(...plugins) {
+        plugins.forEach((plugin) => {
+            registerManager.registerPlugin(plugin);
+        });
+    }
+    static setSettings(settings) {
+        registerManager.setSettings(settings);
+    }
+    static setItem({ item: setItem, namespace = DEFAULT_NAMESPACE, config, }) {
+        if (setItem.id) {
+            return UpdateManager.editItem({ item: setItem, namespace, config });
+        }
+        else {
+            const item = setItem;
+            const layout = Object.assign({}, registerManager.getItem(item.type).defaultLayout);
+            if (item.layout) {
+                Object.assign(layout, item.layout);
+            }
+            return UpdateManager.addItem({
+                item,
+                namespace,
+                config,
+                layout,
+            });
+        }
+    }
+    static removeItem({ id, config, itemsStateAndParams, }) {
+        return UpdateManager.removeItem({ id, config, itemsStateAndParams });
+    }
+    render() {
+        return (React.createElement(DashKitView
+        // @ts-ignore
+        , Object.assign({ 
+            // @ts-ignore
+            registerManager: registerManager, ref: this.metaRef }, this.props)));
+    }
+    getItemsMeta() {
+        var _a;
+        return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
+    }
+}
+DashKit.defaultProps = {
+    onItemEdit: noop,
+    onChange: noop,
+    defaultGlobalParams: {},
+    globalParams: {},
+    itemsStateAndParams: {},
+    settings: {
+        autoupdateInterval: 0,
+        silentLoading: false,
+    },
+    context: {},
+    noOverlay: false,
+};

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

@@ -0,0 +1 @@
+export * from './DashKit';

package/build/esm/components/DashKit/index.js

@@ -0,0 +1 @@
+export * from './DashKit';

package/build/esm/components/DashKitView/DashKitView.css

@@ -0,0 +1,4 @@
+.dashkit {
+  width: 100%;
+  position: relative;
+}

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

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

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

@@ -0,0 +1,21 @@
+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 './DashKitView.css';
+const b = block('dashkit');
+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 }))));
+}
+const DashKitViewWithContext = withContext(DashKitView);
+const DashKitViewForwardedMeta = React.forwardRef((props, ref) => {
+    const layout = useCalcPropsLayout(props.config, props.registerManager);
+    return React.createElement(DashKitViewWithContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref }));
+});
+DashKitViewForwardedMeta.displayName = 'DashKitViewForwardedMeta';
+export default DashKitViewForwardedMeta;

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

@@ -0,0 +1,83 @@
+.dashkit-grid-item {
+  position: relative;
+}
+.dashkit-grid-item__overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 3px;
+  background-color: rgba(230, 230, 230, 0.2);
+  border: solid 1px rgba(0, 0, 0, 0.1);
+}
+.dashkit-grid-item__item {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 3px;
+}
+.dashkit-grid-item__item_editMode {
+  opacity: 0.5;
+  border-color: transparent;
+  pointer-events: none;
+}
+
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top;
+}
+
+.react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable:not(.dashkit-grid-item_with-custom-handle) {
+  cursor: move;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: #fc0;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  user-select: none;
+}
+
+.react-grid-item .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+  z-index: 6;
+}
+
+.react-grid-item .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  border: 4px solid transparent;
+  border-right-color: rgba(0, 0, 0, 0.4);
+  border-bottom-color: rgba(0, 0, 0, 0.4);
+}

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

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

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

@@ -0,0 +1,68 @@
+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 './GridItem.css';
+import OverlayControls from '../OverlayControls/OverlayControls';
+const b = block('dashkit-grid-item');
+class GridItem extends React.PureComponent {
+    renderOverlay() {
+        const { editMode, overlayControls } = this.context;
+        if (!editMode || this.props.item.data._editActive) {
+            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 })));
+    }
+    render() {
+        // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
+        // https://github.com/STRML/react-grid-layout/issues/721
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, withCustomHandle, } = this.props;
+        const { editMode } = this.context;
+        const width = Number.parseInt(style.width, 10);
+        const height = Number.parseInt(style.height, 10);
+        const transform = style.transform;
+        const preparedClassName = editMode
+            ? className
+            : className.replace('react-resizable', '').replace('react-draggable', '');
+        const preparedChildren = editMode ? children : null;
+        const reactGridLayoutProps = editMode
+            ? { onMouseDown, onMouseUp, onTouchEnd, onTouchStart }
+            : {};
+        const { _editActive } = this.props.item.data;
+        return (React.createElement("div", Object.assign({ className: b({
+                'is-dragging': isDragging,
+                'with-custom-handle': withCustomHandle,
+            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style }, reactGridLayoutProps),
+            React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
+                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+            !noOverlay && this.renderOverlay(),
+            preparedChildren));
+    }
+}
+GridItem.propTypes = {
+    adjustWidgetLayout: PropTypes.func.isRequired,
+    id: PropTypes.string,
+    item: PropTypes.object,
+    isDragging: PropTypes.bool,
+    layout: PropTypes.array,
+    forwardedPluginRef: PropTypes.any,
+    // from react-grid-layout:
+    children: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    noOverlay: PropTypes.bool,
+    withCustomHandle: PropTypes.bool,
+    onMouseDown: PropTypes.func,
+    onMouseUp: PropTypes.func,
+    onTouchEnd: PropTypes.func,
+    onTouchStart: PropTypes.func,
+};
+GridItem.contextType = DashKitContext;
+export default React.forwardRef((props, ref) => {
+    return React.createElement(GridItem, Object.assign({}, props, { forwardedPluginRef: ref }));
+});

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

@@ -0,0 +1,25 @@
+export default class GridLayout extends React.PureComponent<any, any, any> {
+    static contextType: React.Context<any>;
+    constructor(props: any, context: any);
+    pluginsRefs: any[];
+    state: {
+        isDragging: boolean;
+        isPageHidden: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    _timeout: any;
+    onVisibilityChange: () => void;
+    adjustWidgetLayout: ({ widgetId, needSetDefault, adjustedWidgetLayout }: {
+        widgetId: any;
+        needSetDefault: any;
+        adjustedWidgetLayout: any;
+    }) => void;
+    getItemsMeta: () => any;
+    reloadItems(): void;
+    _onStart: () => void;
+    _onStop: (newLayout: any) => void;
+    render(): JSX.Element;
+}
+import React from "react";

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
+import GridItem from '../GridItem/GridItem';
+import { DashKitContext } from '../../context/DashKitContext';
+const Layout = WidthProvider(ReactGridLayout); // eslint-disable-line new-cap
+export default class GridLayout extends React.PureComponent {
+    constructor(props, context) {
+        super(props, context);
+        this.onVisibilityChange = () => {
+            this.setState({
+                isPageHidden: document.hidden,
+            });
+        };
+        this.adjustWidgetLayout = ({ widgetId, needSetDefault, adjustedWidgetLayout }) => {
+            const { getLayout, memorizeOriginalLayout, revertToOriginalLayout } = this.context;
+            if (needSetDefault) {
+                revertToOriginalLayout(widgetId);
+                return;
+            }
+            if (!adjustedWidgetLayout) {
+                return;
+            }
+            const layout = getLayout();
+            const correspondedLayoutItemIndex = layout.findIndex((layoutItem) => layoutItem.i === widgetId);
+            memorizeOriginalLayout(widgetId, Object.assign({}, layout[correspondedLayoutItemIndex]), adjustedWidgetLayout);
+        };
+        this.getItemsMeta = () => {
+            const { getItemsMeta } = this.context;
+            return getItemsMeta(this.pluginsRefs);
+        };
+        this._onStart = () => {
+            this.setState({ isDragging: true });
+        };
+        this._onStop = (newLayout) => {
+            const { layoutChange } = this.context;
+            layoutChange(newLayout);
+            this.setState({ isDragging: false });
+        };
+        this.pluginsRefs = [];
+        this.state = {
+            isDragging: false,
+            isPageHidden: false,
+        };
+    }
+    componentDidMount() {
+        this.reloadItems();
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
+    }
+    componentDidUpdate() {
+        clearTimeout(this._timeout);
+        this.reloadItems();
+    }
+    componentWillUnmount() {
+        clearTimeout(this._timeout);
+        document.removeEventListener('visibilitychange', this.onVisibilityChange);
+    }
+    reloadItems() {
+        const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
+        const { isPageHidden } = this.state;
+        const autoupdateIntervalNumber = Number(autoupdateInterval);
+        if (autoupdateIntervalNumber) {
+            this._timeout = setTimeout(() => {
+                if (!isPageHidden) {
+                    if (!editMode) {
+                        reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+                    }
+                    this.reloadItems();
+                }
+            }, autoupdateIntervalNumber * 1000);
+        }
+    }
+    render() {
+        const { getLayout, config, registerManager, editMode, noOverlay, draggableHandleClassName } = this.context;
+        this.pluginsRefs.length = config.items.length;
+        const layout = getLayout();
+        return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+            ? { draggableHandle: `.${draggableHandleClassName}` }
+            : null)), config.items.map((item, i) => {
+            return (React.createElement(GridItem, { ref: (pluginRef) => {
+                    this.pluginsRefs[i] = pluginRef;
+                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
+        })));
+    }
+}
+GridLayout.contextType = DashKitContext;

package/build/esm/components/Item/Item.css

@@ -0,0 +1,19 @@
+.dashkit-item__renderer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.dashkit-item__loader {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: dashed 1px rgba(0, 0, 0, 0.1);
+  z-index: 3;
+}

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

@@ -0,0 +1,67 @@
+declare const _default: {
+    new (props: any): {
+        shouldComponentUpdate(nextProps: any): boolean;
+        _onStateAndParamsChange: (stateAndParams: any) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    new (props: any, context: any): {
+        shouldComponentUpdate(nextProps: any): boolean;
+        _onStateAndParamsChange: (stateAndParams: any) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    propTypes: {
+        adjustWidgetLayout: PropTypes.Validator<(...args: any[]) => any>;
+        layout: PropTypes.Requireable<any[]>;
+        id: PropTypes.Requireable<string>;
+        item: PropTypes.Requireable<object>;
+        shouldItemUpdate: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<number>;
+        transform: PropTypes.Requireable<string>;
+        forwardedPluginRef: PropTypes.Requireable<any>;
+    };
+    contextType: React.Context<any>;
+};
+export default _default;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import { prepareItem } from '../../hocs/prepareItem';
+import './Item.css';
+const b = block('dashkit-item');
+// TODO: getDerivedStateFromError и заглушка с ошибкой
+const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
+    if (!registerManager.check(type)) {
+        console.warn(`type [${type}] не зарегистрирован`);
+        return null;
+    }
+    return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
+};
+Item.propTypes = {
+    forwardedPluginRef: PropTypes.any,
+    rendererProps: PropTypes.object,
+    registerManager: PropTypes.object,
+    type: PropTypes.string,
+};
+export default prepareItem(Item);

package/build/esm/components/MobileLayout/MobileLayout.css

@@ -0,0 +1,10 @@
+.dashkit-mobile-layout__item {
+  margin-bottom: 20px;
+  position: relative;
+}
+.dashkit-mobile-layout .dashkit-item__renderer {
+  overflow-y: auto;
+  border-radius: 3px;
+  position: static;
+  user-select: none;
+}

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

@@ -0,0 +1,16 @@
+export default class MobileLayout extends React.PureComponent<any, any, any> {
+    static contextType: React.Context<any>;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    pluginsRefs: any[];
+    state: {
+        activeTabId: null;
+        indexesOfItemsWithActiveAutoheight: {};
+    };
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    adjustWidgetLayout: (index: any, { needSetDefault }: {
+        needSetDefault: any;
+    }) => void;
+    render(): JSX.Element;
+}
+import React from "react";

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import Item from '../Item/Item';
+import { DashKitContext } from '../../context/DashKitContext';
+import { getSortedConfigItems } from './helpers';
+import './MobileLayout.css';
+const b = block('dashkit-mobile-layout');
+export default class MobileLayout extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.pluginsRefs = [];
+        this.state = {
+            activeTabId: null,
+            indexesOfItemsWithActiveAutoheight: {},
+        };
+        this.adjustWidgetLayout = (index, { needSetDefault }) => {
+            if (needSetDefault) {
+                const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
+                delete indexesOfItemsWithActiveAutoheight[index];
+                this.setState({ indexesOfItemsWithActiveAutoheight });
+            }
+            else {
+                this.setState({
+                    indexesOfItemsWithActiveAutoheight: Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight, { [index]: true }),
+                });
+            }
+        };
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.activeTabId !== this.context.config.id) {
+            this.setState({
+                activeTabId: this.context.config.id,
+                indexesOfItemsWithActiveAutoheight: {},
+            });
+        }
+    }
+    render() {
+        const { config, getLayout } = this.context;
+        this.pluginsRefs.length = config.items.length;
+        const hasOrderId = Boolean(config.items.find((item) => item.orderId));
+        const sortedItems = getSortedConfigItems(config, hasOrderId);
+        return (React.createElement("div", { className: b() }, sortedItems.map((item, index) => {
+            const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
+            return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
+                React.createElement(Item, { id: item.id, item: item, layout: getLayout(), shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
+                        this.pluginsRefs[index] = pluginRef;
+                    } })));
+        })));
+    }
+}
+MobileLayout.contextType = DashKitContext;

package/build/esm/components/MobileLayout/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ConfigItem, ConfigLayout } from '../../shared';
+import { DashKitProps } from '../DashKit';
+export declare const getSortedConfigItems: (config: DashKitProps['config'], hasOrderId: boolean) => (ConfigItem & ConfigLayout)[];

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

@@ -0,0 +1,28 @@
+const sortByOrderComparator = (prev, next, fieldName) => {
+    const prevOrderId = prev[fieldName];
+    const nextOrderId = next[fieldName];
+    if (prevOrderId === undefined) {
+        return 1;
+    }
+    if (nextOrderId === undefined) {
+        return -1;
+    }
+    if (prevOrderId > nextOrderId) {
+        return 1;
+    }
+    else if (prevOrderId < nextOrderId) {
+        return -1;
+    }
+    return 0;
+};
+const getWidgetsSortComparator = (hasOrderId) => {
+    return hasOrderId
+        ? (prev, next) => sortByOrderComparator(prev, next, 'orderId')
+        : (prev, next) => prev.y === next.y ? prev.x - next.x : prev.y - next.y;
+};
+export const getSortedConfigItems = (config, hasOrderId) => {
+    const sortComparator = getWidgetsSortComparator(hasOrderId);
+    return config.items
+        .map((item, index) => Object.assign({}, item, config.layout[index]))
+        .sort(sortComparator);
+};

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

@@ -0,0 +1,28 @@
+.dashkit-overlay-controls {
+  position: absolute;
+  display: flex;
+}
+.dashkit-overlay-controls__default-controls {
+  display: flex;
+  background: var(--yc-color-base-generic-ultralight);
+  border-radius: var(--yc-border-radius-m);
+}
+.dashkit-overlay-controls_position_top_right {
+  top: 7px;
+  right: 7px;
+}
+.dashkit-overlay-controls_position_top_left {
+  top: 7px;
+  left: 7px;
+}
+.dashkit-overlay-controls_position_bottom_right {
+  bottom: 7px;
+  right: 7px;
+}
+.dashkit-overlay-controls_position_bottom_left {
+  bottom: 7px;
+  left: 7px;
+}
+.dashkit-overlay-controls__item_danger {
+  color: var(--yc-color-text-danger);
+}