@gravity-ui/dashkit 8.16.0 → 8.17.1-beta.0

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

@@ -48,6 +48,16 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         element: any;
     };
     updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _renderRectBlock(element: any): void;
+    _rectBlocks: {
+        spacers: {
+            top: HTMLDivElement;
+            bottom: HTMLDivElement;
+        };
+        parent: any;
+    } | null | undefined;
+    _updateRectBlock(element: any): void;
+    _cleanRectBlock(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
     _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
     _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
@@ -60,6 +70,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     _onDropDragOver: (group: any, e: any) => any;
+    renderRectBlocks(): JSX.Element;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;

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

@@ -287,9 +287,58 @@ class GridLayout extends react_1.default.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
+    _renderRectBlock(element) {
+        const parent = element.parentElement;
+        const elementRect = element.getBoundingClientRect();
+        this._rectBlocks = {
+            spacers: {
+                top: document.createElement('div'),
+                bottom: document.createElement('div'),
+            },
+            parent,
+        };
+        Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
+            block.style.position = 'absolute';
+            block.style.width = `${elementRect.width}px`;
+            block.style.height = '1px';
+            block.style.left = '0px';
+            if (pos === 'top') {
+                block.style.top = '0px';
+            }
+            else {
+                block.style.top = `${elementRect.height - 1}px`;
+            }
+            parent.appendChild(block);
+        });
+        this._updateRectBlock(element);
+    }
+    _updateRectBlock(element) {
+        if (!this._rectBlocks) {
+            return;
+        }
+        const parent = this._rectBlocks.parent;
+        const parentRect = parent.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const left = elementRect.left - parentRect.left;
+        const top = elementRect.top - parentRect.top;
+        Object.values(this._rectBlocks.spacers).forEach((block) => {
+            block.style.transform = `translate(${left}px, ${top}px)`;
+        });
+    }
+    _cleanRectBlock() {
+        if (this._rectBlocks) {
+            Object.values(this._rectBlocks.spacers).forEach((block) => {
+                block.remove();
+            });
+            this._rectBlocks = null;
+        }
+    }
     _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
         var _a;
         (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
+        if (!this.state.currentDraggingElement) {
+            this._renderRectBlock(element);
+        }
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
@@ -300,10 +349,12 @@ class GridLayout extends react_1.default.PureComponent {
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._updateRectBlock(element);
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
     _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._cleanRectBlock();
         this._onStop(group, layout);
         (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
@@ -334,6 +385,9 @@ class GridLayout extends react_1.default.PureComponent {
             });
         }
     }
+    renderRectBlocks() {
+        return react_1.default.createElement("div", { className: "test" }, "123");
+    }
     renderTemporaryPlaceholder() {
         const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
         if (!temporaryLayout || !temporaryLayout.dragProps) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
-import type { ConfigItem, ConfigLayout, ItemState, PluginBase, StringParams } from '../../shared';
+import { type ConfigItem, type ConfigLayout, type ItemState, type ItemsStateAndParamsBase, type PluginBase, type StringParams } from '../../shared';
 import { MenuItem } from '../../typings';
 export declare enum OverlayControlsPosition {
     TopRight = "top_right",
@@ -44,6 +44,8 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
         w: number;
         h: number;
     };
+    targetId?: string;
+    targetInnerId?: string;
 };
 export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
     copyContext?: C;
@@ -52,8 +54,8 @@ type DashKitCtx = React.Context<{
     overlayControls?: Record<string, OverlayControlItem[]>;
     context: Record<string, any>;
     menu: MenuItem[];
+    itemsStateAndParams: ItemsStateAndParamsBase;
     itemsParams: Record<string, StringParams>;
-    itemsState: Record<string, ItemState>;
     editItem: (item: ConfigItem) => void;
     removeItem: (id: string) => void;
     getLayoutItem: (id: string) => ConfigLayout | void;

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

@@ -9,6 +9,7 @@ const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const constants_1 = require("../../constants");
 const DashKitContext_1 = require("../../context/DashKitContext");
 const i18n_1 = require("../../i18n");
+const shared_1 = require("../../shared");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)(constants_1.OVERLAY_CONTROLS_CLASS_NAME);
 var OverlayControlsPosition;
@@ -81,6 +82,13 @@ class OverlayControls extends react_1.default.Component {
             var _a, _b, _c;
             const { configItem } = this.props;
             const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
+            let targetInnerId;
+            if ((0, shared_1.isItemWithTabs)(this.props.configItem)) {
+                targetInnerId = (0, shared_1.resolveItemInnerId)({
+                    item: this.props.configItem,
+                    itemsStateAndParams: this.context.itemsStateAndParams,
+                });
+            }
             let options = {
                 timestamp: Date.now(),
                 data: configItem.data,
@@ -91,6 +99,8 @@ class OverlayControls extends react_1.default.Component {
                     w: correspondedItemLayout.w,
                     h: correspondedItemLayout.h,
                 },
+                targetId: this.props.configItem.id,
+                targetInnerId,
             };
             if (typeof ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) === 'function') {
                 options = this.context.context.getPreparedCopyItemOptions(options);
@@ -175,11 +185,12 @@ class OverlayControls extends react_1.default.Component {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(constants_1.MenuItems).includes(String(item)));
     }
     renderDropdownMenu(isOnlyOneItem) {
+        var _a;
         const { view, size, onItemClick } = this.props;
-        const { menu: contextMenu, itemsParams, itemsState } = this.context;
+        const { menu: contextMenu, itemsParams, itemsStateAndParams } = this.context;
         const configItem = this.props.configItem;
         const itemParams = itemsParams[configItem.id];
-        const itemState = itemsState[configItem.id];
+        const itemState = ((_a = itemsStateAndParams[configItem.id]) === null || _a === void 0 ? void 0 : _a.state) || {};
         const menu = (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.length) > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
         const isDefaultMenu = this.isDefaultMenu(menu);
         const items = isDefaultMenu

package/build/cjs/hocs/withContext.js

@@ -378,19 +378,19 @@ function useMemoStateContext(props) {
         overlayControls: props.overlayControls,
         context: props.context,
         menu: overlayMenuItems,
-        itemsParams: itemsParams,
-        itemsState: itemsState,
+        itemsStateAndParams: props.itemsStateAndParams,
+        itemsParams,
         editItem: props.onItemEdit,
         removeItem: onItemRemove,
         getLayoutItem: getLayoutItem,
     }), [
-        itemsParams,
-        itemsState,
+        props.overlayControls,
         props.context,
+        props.itemsStateAndParams,
         props.onItemEdit,
-        onItemRemove,
-        props.overlayControls,
         overlayMenuItems,
+        itemsParams,
+        onItemRemove,
         getLayoutItem,
     ]);
     return { controlsContextValue, dashkitContextValue };

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

@@ -48,6 +48,16 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
         element: any;
     };
     updateeDraggingElementState(group: any, layoutItem: any, e: any): void;
+    _renderRectBlock(element: any): void;
+    _rectBlocks: {
+        spacers: {
+            top: HTMLDivElement;
+            bottom: HTMLDivElement;
+        };
+        parent: any;
+    } | null | undefined;
+    _updateRectBlock(element: any): void;
+    _cleanRectBlock(): void;
     _onDragStart(group: any, _newLayout: any, layoutItem: any, _newItem: any, _placeholder: any, e: any, element: any): void;
     _onDrag(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
     _onDragStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
@@ -60,6 +70,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onExternalDrop: (group: any, newLayout: any, item: any, e: any) => void;
     _onDrop: (group: any, newLayout: any, item: any, e: any) => false | undefined;
     _onDropDragOver: (group: any, e: any) => any;
+    renderRectBlocks(): JSX.Element;
     renderTemporaryPlaceholder(): JSX.Element | null;
     renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
     render(): any;

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

@@ -284,9 +284,58 @@ class GridLayout extends React.PureComponent {
         }
         this.setState({ currentDraggingElement, draggedOverGroup: group });
     }
+    _renderRectBlock(element) {
+        const parent = element.parentElement;
+        const elementRect = element.getBoundingClientRect();
+        this._rectBlocks = {
+            spacers: {
+                top: document.createElement('div'),
+                bottom: document.createElement('div'),
+            },
+            parent,
+        };
+        Object.entries(this._rectBlocks.spacers).forEach(([pos, block]) => {
+            block.style.position = 'absolute';
+            block.style.width = `${elementRect.width}px`;
+            block.style.height = '1px';
+            block.style.left = '0px';
+            if (pos === 'top') {
+                block.style.top = '0px';
+            }
+            else {
+                block.style.top = `${elementRect.height - 1}px`;
+            }
+            parent.appendChild(block);
+        });
+        this._updateRectBlock(element);
+    }
+    _updateRectBlock(element) {
+        if (!this._rectBlocks) {
+            return;
+        }
+        const parent = this._rectBlocks.parent;
+        const parentRect = parent.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const left = elementRect.left - parentRect.left;
+        const top = elementRect.top - parentRect.top;
+        Object.values(this._rectBlocks.spacers).forEach((block) => {
+            block.style.transform = `translate(${left}px, ${top}px)`;
+        });
+    }
+    _cleanRectBlock() {
+        if (this._rectBlocks) {
+            Object.values(this._rectBlocks.spacers).forEach((block) => {
+                block.remove();
+            });
+            this._rectBlocks = null;
+        }
+    }
     _onDragStart(group, _newLayout, layoutItem, _newItem, _placeholder, e, element) {
         var _a;
         (_a = this.context.onDragStart) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, _newLayout, layoutItem, _newItem, _placeholder, e, element));
+        if (!this.state.currentDraggingElement) {
+            this._renderRectBlock(element);
+        }
         if (this.context.dragOverPlugin) {
             this.setState({ isDragging: true });
         }
@@ -297,10 +346,12 @@ class GridLayout extends React.PureComponent {
     }
     _onDrag(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._updateRectBlock(element);
         (_a = this.context.onDrag) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
     _onDragStop(group, layout, oldItem, newItem, placeholder, e, element) {
         var _a;
+        this._cleanRectBlock();
         this._onStop(group, layout);
         (_a = this.context.onDragStop) === null || _a === void 0 ? void 0 : _a.call(this, this.prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element));
     }
@@ -331,6 +382,9 @@ class GridLayout extends React.PureComponent {
             });
         }
     }
+    renderRectBlocks() {
+        return React.createElement("div", { className: "test" }, "123");
+    }
     renderTemporaryPlaceholder() {
         const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
         if (!temporaryLayout || !temporaryLayout.dragProps) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
-import type { ConfigItem, ConfigLayout, ItemState, PluginBase, StringParams } from '../../shared';
+import { type ConfigItem, type ConfigLayout, type ItemState, type ItemsStateAndParamsBase, type PluginBase, type StringParams } from '../../shared';
 import { MenuItem } from '../../typings';
 import './OverlayControls.css';
 export declare enum OverlayControlsPosition {
@@ -45,6 +45,8 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
         w: number;
         h: number;
     };
+    targetId?: string;
+    targetInnerId?: string;
 };
 export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
     copyContext?: C;
@@ -53,8 +55,8 @@ type DashKitCtx = React.Context<{
     overlayControls?: Record<string, OverlayControlItem[]>;
     context: Record<string, any>;
     menu: MenuItem[];
+    itemsStateAndParams: ItemsStateAndParamsBase;
     itemsParams: Record<string, StringParams>;
-    itemsState: Record<string, ItemState>;
     editItem: (item: ConfigItem) => void;
     removeItem: (id: string) => void;
     getLayoutItem: (id: string) => ConfigLayout | void;

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

@@ -5,6 +5,7 @@ import noop from 'lodash/noop';
 import { COPIED_WIDGET_STORE_KEY, DRAGGABLE_CANCEL_CLASS_NAME, MenuItems, OVERLAY_CONTROLS_CLASS_NAME, OVERLAY_ICON_SIZE, } from '../../constants';
 import { DashkitOvelayControlsContext } from '../../context/DashKitContext';
 import { i18n } from '../../i18n';
+import { isItemWithTabs, resolveItemInnerId, } from '../../shared';
 import { cn } from '../../utils/cn';
 import './OverlayControls.css';
 const b = cn(OVERLAY_CONTROLS_CLASS_NAME);
@@ -78,6 +79,13 @@ class OverlayControls extends React.Component {
             var _a, _b, _c;
             const { configItem } = this.props;
             const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
+            let targetInnerId;
+            if (isItemWithTabs(this.props.configItem)) {
+                targetInnerId = resolveItemInnerId({
+                    item: this.props.configItem,
+                    itemsStateAndParams: this.context.itemsStateAndParams,
+                });
+            }
             let options = {
                 timestamp: Date.now(),
                 data: configItem.data,
@@ -88,6 +96,8 @@ class OverlayControls extends React.Component {
                     w: correspondedItemLayout.w,
                     h: correspondedItemLayout.h,
                 },
+                targetId: this.props.configItem.id,
+                targetInnerId,
             };
             if (typeof ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) === 'function') {
                 options = this.context.context.getPreparedCopyItemOptions(options);
@@ -172,11 +182,12 @@ class OverlayControls extends React.Component {
         return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(MenuItems).includes(String(item)));
     }
     renderDropdownMenu(isOnlyOneItem) {
+        var _a;
         const { view, size, onItemClick } = this.props;
-        const { menu: contextMenu, itemsParams, itemsState } = this.context;
+        const { menu: contextMenu, itemsParams, itemsStateAndParams } = this.context;
         const configItem = this.props.configItem;
         const itemParams = itemsParams[configItem.id];
-        const itemState = itemsState[configItem.id];
+        const itemState = ((_a = itemsStateAndParams[configItem.id]) === null || _a === void 0 ? void 0 : _a.state) || {};
         const menu = (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.length) > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
         const isDefaultMenu = this.isDefaultMenu(menu);
         const items = isDefaultMenu

package/build/esm/hocs/withContext.js

@@ -375,19 +375,19 @@ function useMemoStateContext(props) {
         overlayControls: props.overlayControls,
         context: props.context,
         menu: overlayMenuItems,
-        itemsParams: itemsParams,
-        itemsState: itemsState,
+        itemsStateAndParams: props.itemsStateAndParams,
+        itemsParams,
         editItem: props.onItemEdit,
         removeItem: onItemRemove,
         getLayoutItem: getLayoutItem,
     }), [
-        itemsParams,
-        itemsState,
+        props.overlayControls,
         props.context,
+        props.itemsStateAndParams,
         props.onItemEdit,
-        onItemRemove,
-        props.overlayControls,
         overlayMenuItems,
+        itemsParams,
+        onItemRemove,
         getLayoutItem,
     ]);
     return { controlsContextValue, dashkitContextValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.16.0",
+  "version": "8.17.1-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {