@gravity-ui/dashkit 8.21.0 → 8.21.1-beta.0

package/build/cjs/hocs/prepareItem.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const DashKitContext_1 = require("../context/DashKitContext");
+const context_1 = require("../context");
 function prepareItem(Component) {
     var _a;
     return _a = class PrepareItem extends react_1.default.Component {
@@ -83,7 +83,7 @@ function prepareItem(Component) {
             onItemMountChange: prop_types_1.default.func,
             forwardedPluginRef: prop_types_1.default.any,
         },
-        _a.contextType = DashKitContext_1.DashKitContext,
+        _a.contextType = context_1.DashKitContext,
         _a;
 }
 exports.prepareItem = prepareItem;

package/build/cjs/hocs/withContext.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const common_1 = require("../constants/common");
-const DashKitContext_1 = require("../context/DashKitContext");
+const context_1 = require("../context");
 const useDeepEqualMemo_1 = require("../hooks/useDeepEqualMemo");
 const shared_1 = require("../shared");
 const utils_1 = require("../utils");
@@ -22,7 +22,7 @@ function useMemoStateContext(props) {
     const nowrapAdjustedLayouts = react_1.default.useRef({});
     const [temporaryLayout, setTemporaryLayout] = react_1.default.useState(null);
     const resetTemporaryLayout = react_1.default.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
-    const dndContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
+    const dndContext = react_1.default.useContext(context_1.DashKitDnDContext);
     const outerDnDEnable = Boolean(dndContext);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
@@ -286,6 +286,7 @@ function useMemoStateContext(props) {
         }
         return itemLayout;
     }, [
+        props.registerManager,
         resetTemporaryLayout,
         temporaryLayout,
         dragOverPlugin,
@@ -314,8 +315,6 @@ function useMemoStateContext(props) {
         });
     }, [dragPropsContext, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
     const dashkitContextValue = react_1.default.useMemo(() => ({
-        layout: resultLayout,
-        temporaryLayout,
         config: props.config,
         groups: props.groups,
         context: props.context,
@@ -325,24 +324,26 @@ function useMemoStateContext(props) {
         globalParams: props.globalParams,
         editMode: props.editMode,
         settings: props.settings,
-        itemsState,
-        itemsParams,
-        registerManager: props.registerManager,
-        onItemStateAndParamsChange,
-        onDrop,
-        onDropDragOver,
         onItemMountChange: props.onItemMountChange,
         onItemRender: props.onItemRender,
+        draggableHandleClassName: props.draggableHandleClassName,
+        registerManager: props.registerManager,
+        forwardedMetaRef: props.forwardedMetaRef,
+        layout: resultLayout,
+        temporaryLayout,
         layoutChange: onLayoutChange,
-        getItemsMeta,
-        reloadItems,
         memorizeOriginalLayout,
         revertToOriginalLayout,
-        forwardedMetaRef: props.forwardedMetaRef,
-        draggableHandleClassName: props.draggableHandleClassName,
+        itemsState,
+        itemsParams,
+        onItemStateAndParamsChange,
+        getItemsMeta,
+        reloadItems,
+        onDrop,
+        onDropDragOver,
         outerDnDEnable,
         dragOverPlugin,
-        /* default bypassing handlers */
+        /* default handlers bypass */
         onDragStart: props.onDragStart,
         onDrag: props.onDrag,
         onDragStop: props.onDragStop,
@@ -388,14 +389,15 @@ function useMemoStateContext(props) {
     const controlsContextValue = react_1.default.useMemo(() => ({
         overlayControls: props.overlayControls,
         context: props.context,
-        menu: overlayMenuItems,
         itemsStateAndParams: props.itemsStateAndParams,
+        itemsState,
         itemsParams,
+        getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
+        onCopyFulfill: props.onCopyFulfill,
+        menu: overlayMenuItems,
         editItem: props.onItemEdit,
         removeItem: onItemRemove,
         getLayoutItem: getLayoutItem,
-        getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
-        onCopyFulfill: props.onCopyFulfill,
     }), [
         props.overlayControls,
         props.context,
@@ -404,6 +406,7 @@ function useMemoStateContext(props) {
         props.getPreparedCopyItemOptions,
         props.onCopyFulfill,
         overlayMenuItems,
+        itemsState,
         itemsParams,
         onItemRemove,
         getLayoutItem,
@@ -413,8 +416,8 @@ function useMemoStateContext(props) {
 function withContext(Component) {
     const WithContext = (props) => {
         const { dashkitContextValue, controlsContextValue } = useMemoStateContext(props);
-        return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: dashkitContextValue },
-            react_1.default.createElement(DashKitContext_1.DashkitOvelayControlsContext.Provider, { value: controlsContextValue },
+        return (react_1.default.createElement(context_1.DashKitContext.Provider, { value: dashkitContextValue },
+            react_1.default.createElement(context_1.DashkitOvelayControlsContext.Provider, { value: controlsContextValue },
                 react_1.default.createElement(Component, null))));
     };
     WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;

package/build/cjs/hooks/useDnDItemProps.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDnDItemProps = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const DashKitContext_1 = require("../context/DashKitContext");
+const context_1 = require("../context");
 const useDnDItemProps = (item) => {
-    const dragContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
+    const dragContext = react_1.default.useContext(context_1.DashKitDnDContext);
     const onDragStart = react_1.default.useCallback((e) => {
         if (dragContext && item.dragProps) {
             dragContext.onDragStart(e, item.dragProps);

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

@@ -1,5 +1 @@
-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) & {
-    keysetData: {
-        dashkit: Record<"button_retry" | "label_render-markdown-error" | "label_settings" | "label_copy" | "label_delete" | "label_error", import("@gravity-ui/i18n").KeyData>;
-    };
-};
+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/shared/modules/helpers.d.ts

@@ -18,7 +18,7 @@ export declare function formQueueData({ items, itemsStateAndParams, }: {
 }): FormedQueueData[];
 export declare function resolveItemInnerId({ item, itemsStateAndParams, }: {
     item: Pick<ConfigItemWithTabs, 'data' | 'id'>;
-    itemsStateAndParams: ItemsStateAndParams;
+    itemsStateAndParams?: ItemsStateAndParams;
 }): string;
 export declare function getMapItemsIgnores({ items, ignores, itemsStateAndParams, isFirstVersion, }: {
     items: (ConfigItem | ConfigItemGroup)[];

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

@@ -118,7 +118,7 @@ exports.formQueueData = formQueueData;
 function resolveItemInnerId({ item, itemsStateAndParams, }) {
     var _a, _b;
     const { id } = item;
-    const stateTabId = (_b = (_a = itemsStateAndParams[id]) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.tabId;
+    const stateTabId = (_b = (_a = itemsStateAndParams === null || itemsStateAndParams === void 0 ? void 0 : itemsStateAndParams[id]) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.tabId;
     const { tabs } = item.data;
     if (stateTabId && tabs.some((tab) => tab.id === stateTabId)) {
         return stateTabId;

package/build/cjs/shared/types/state-and-params.d.ts

@@ -3,6 +3,7 @@ import { StringParams } from './common';
 export interface ItemState {
     [key: string]: any;
 }
+export type ItemParams = StringParams | Record<string, StringParams>;
 export interface QueueItem {
     id: string;
     tabId?: string;
@@ -16,7 +17,7 @@ export type StateAndParamsMeta = {
     [META_KEY]: StateAndParamsMetaData;
 };
 export type ItemStateAndParams = {
-    params?: StringParams | Record<string, StringParams>;
+    params?: ItemParams;
     state?: ItemState;
 };
 export type ItemStateAndParamsChangeOptions = {

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

@@ -28,6 +28,7 @@ export type AddNewItemOptions = SetItemOptions & {
 export interface DashkitGroupRenderProps {
     config: Config;
     editMode: boolean;
+    isMobile: boolean;
     items: ConfigItem[];
     layout: ConfigLayout[];
     context: any;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
-import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
+import type { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
 import GridLayout from '../GridLayout/GridLayout';
-import { OverlayControlItem, OverlayControlsCtxShape } from '../OverlayControls/OverlayControls';
-interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
+import type { OverlayControlItem, PreparedCopyItemOptions } from '../OverlayControls/OverlayControls';
+interface DashKitGeneralProps {
     config: Config;
     editMode: boolean;
     draggableHandleClassName?: string;
@@ -11,6 +11,14 @@ interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPrepared
     overlayMenuItems?: MenuItem[] | null;
 }
 interface DashKitDefaultProps {
+    defaultGlobalParams: GlobalParams;
+    globalParams: GlobalParams;
+    itemsStateAndParams: ItemsStateAndParams;
+    settings: SettingsProps;
+    context: ContextProps;
+    noOverlay: boolean;
+    focusable?: boolean;
+    groups?: DashKitGroup[];
     onItemEdit: (item: ConfigItem) => void;
     onChange: (data: {
         config: Config;
@@ -23,27 +31,21 @@ interface DashKitDefaultProps {
         isMounted: boolean;
     }) => void;
     onItemRender?: (item: ConfigItem) => void;
+    getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
+    onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
     onDragStart?: ItemManipulationCallback;
     onDrag?: ItemManipulationCallback;
     onDragStop?: ItemManipulationCallback;
     onResizeStart?: ItemManipulationCallback;
     onResize?: ItemManipulationCallback;
     onResizeStop?: ItemManipulationCallback;
-    defaultGlobalParams: GlobalParams;
-    globalParams: GlobalParams;
-    itemsStateAndParams: ItemsStateAndParams;
-    settings: SettingsProps;
-    context: ContextProps;
-    noOverlay: boolean;
-    focusable?: boolean;
-    groups?: DashKitGroup[];
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }
 type DashKitInnerProps = DashKitGeneralProps & DashKitDefaultProps;
 export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     static defaultProps: DashKitDefaultProps;
-    static contextType: React.Context<any>;
+    static contextType: React.Context<void | import("../../context").DashKitDnDCtxShape>;
     static registerPlugins(...plugins: Plugin[]): void;
     static reloadPlugins(...plugins: Plugin[]): void;
     static setSettings(settings: Settings): void;
@@ -70,9 +72,5 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     metaRef: React.RefObject<GridLayout>;
     render(): JSX.Element;
     getItemsMeta(): any;
-    reloadItems(options?: {
-        targetIds?: string[];
-        force?: boolean;
-    }): void;
 }
 export {};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import noop from 'lodash/noop';
 import pick from 'lodash/pick';
 import { DEFAULT_GROUP, DEFAULT_NAMESPACE } from '../../constants';
-import { DashKitDnDContext } from '../../context/DashKitContext';
+import { DashKitDnDContext } from '../../context';
 import { RegisterManager, UpdateManager, reflowLayout } from '../../utils';
 import { DashKitDnDWrapper } from '../DashKitDnDWrapper/DashKitDnDWrapper';
 import DashKitView from '../DashKitView/DashKitView';
@@ -87,10 +87,6 @@ export class DashKit extends React.PureComponent {
         var _a;
         return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
     }
-    reloadItems(options) {
-        var _a;
-        (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.reloadItems(options);
-    }
 }
 DashKit.defaultProps = {
     onItemEdit: noop,

package/build/esm/components/DashKitDnDWrapper/DashKitDnDWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DashKitDnDContext } from '../../context/DashKitContext';
+import { DashKitDnDContext } from '../../context';
 const defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 export const DashKitDnDWrapper = (props) => {
     const [dragProps, setDragProps] = React.useState(null);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DashKitContext } from '../../context/DashKitContext';
+import { DashKitContext } from '../../context';
 import { withContext } from '../../hocs/withContext';
 import { useCalcPropsLayout } from '../../hooks/useCalcLayout';
 import { cn } from '../../utils/cn';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FOCUSED_CLASS_NAME } from '../../constants';
-import { DashKitContext } from '../../context/DashKitContext';
+import { DashKitContext } from '../../context';
 import { cn } from '../../utils/cn';
 import Item from '../Item/Item';
 import OverlayControls from '../OverlayControls/OverlayControls';

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

@@ -1,5 +1,5 @@
 export default class GridLayout extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<any>;
+    static contextType: React.Context<import("../../context").DashKitCtxShape>;
     constructor(props: any, context: any);
     pluginsRefs: any[];
     state: {
@@ -38,7 +38,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     };
     getMemoForwardRefCallback: (refIndex: any) => any;
     mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
-    reloadItems(options: any): void;
+    reloadItems(): void;
     prepareDefaultArguments(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): {
         group: any;
         layout: any;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DRAGGABLE_CANCEL_CLASS_NAME, TEMPORARY_ITEM_ID, } from '../../constants';
-import { DashKitContext } from '../../context/DashKitContext';
+import { DashKitContext } from '../../context';
 import { resolveLayoutGroup } from '../../utils';
 import GridItem from '../GridItem/GridItem';
 import { Layout } from './ReactGridLayout';
@@ -249,26 +249,19 @@ class GridLayout extends React.PureComponent {
             return currentItem;
         });
     }
-    reloadItems(options) {
-        const { targetIds, force } = options || {};
+    reloadItems() {
         const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
         const { isPageHidden } = this.state;
         const autoupdateIntervalMs = Number(autoupdateInterval) * 1000;
-        const targetPlugins = targetIds
-            ? this.pluginsRefs.filter((plugin) => targetIds.includes(plugin.props.id))
-            : this.pluginsRefs;
         if (autoupdateIntervalMs) {
             const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
             const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
-            if (force || (!isPageHidden && !editMode && reloadIntervalRemains <= 0)) {
+            if (!isPageHidden && !editMode && reloadIntervalRemains <= 0) {
                 this._lastReloadAt = new Date().getTime();
-                reloadItems(targetPlugins, { silentLoading, noVeil: true });
+                reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
             }
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
-        else if (force || (!isPageHidden && !editMode)) {
-            reloadItems(targetPlugins, { silentLoading, noVeil: true });
-        }
     }
     prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element) {
         return {
@@ -498,6 +491,7 @@ class GridLayout extends React.PureComponent {
                 offset += items.length;
                 if (group.render) {
                     const groupContext = {
+                        isMobile: false,
                         config,
                         editMode,
                         items,

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

@@ -66,7 +66,8 @@ declare const _default: {
         onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
-    contextType: React.Context<any>;
+    contextType: React.Context<import("../../context").DashKitCtxShape>;
 };
 export default _default;
 import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -1,23 +1,31 @@
-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[];
-    sortedLayoutItems: any;
-    _memoLayout: any;
-    _memoForwardedPluginRef: any[];
-    _memoAdjustWidgetLayout: any[];
-    state: {
-        activeTabId: null;
-        indexesOfItemsWithActiveAutoheight: {};
-    };
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    getSortedLayoutItems(): any;
-    getMemoForwardRefCallback: (refIndex: any) => any;
-    adjustWidgetLayout: (index: any, { needSetDefault }: {
-        needSetDefault: any;
-    }) => void;
-    getMemoAdjustWidgetLayout: (index: any) => any;
+import React from 'react';
+import { DashKitContext } from '../../context';
+import { getSortedConfigItems } from './helpers';
+import './MobileLayout.css';
+type MobileLayoutProps = {};
+type MobileLayoutState = {
+    itemsWithActiveAutoheight: Record<string, boolean>;
+};
+type PlugibRefObject = React.RefObject<any>;
+export default class MobileLayout extends React.PureComponent<MobileLayoutProps, MobileLayoutState> {
+    static contextType: React.Context<import("../../context").DashKitCtxShape>;
+    context: React.ContextType<typeof DashKitContext>;
+    pluginsRefs: PlugibRefObject[];
+    sortedLayoutItems: Record<string, ReturnType<typeof getSortedConfigItems>> | null;
+    _memoLayout: import("../..").ConfigLayout[];
+    _memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void>;
+    _memoAdjustWidgetLayout: Record<string, (props: {
+        needSetDefault: boolean;
+    }) => void>;
+    state: MobileLayoutState;
     render(): JSX.Element;
+    getSortedLayoutItems(): Record<string, (import("../..").ConfigItem & import("../..").ConfigLayout)[]>;
+    getMemoForwardRefCallback(refIndex: number): (refObject: PlugibRefObject) => void;
+    adjustWidgetLayout(id: string, { needSetDefault }: {
+        needSetDefault: boolean;
+    }): void;
+    getMemoAdjustWidgetLayout(id: string): (props: {
+        needSetDefault: boolean;
+    }) => void;
 }
-import React from 'react';
+export {};

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { DashKitContext } from '../../context/DashKitContext';
+import groupBy from 'lodash/groupBy';
+import { DEFAULT_GROUP } from '../../constants';
+import { DashKitContext } from '../../context';
 import { cn } from '../../utils/cn';
 import Item from '../Item/Item';
 import { getSortedConfigItems } from './helpers';
@@ -9,47 +11,40 @@ class MobileLayout extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.pluginsRefs = [];
+        this.sortedLayoutItems = null;
         this._memoLayout = this.context.layout;
         this._memoForwardedPluginRef = [];
-        this._memoAdjustWidgetLayout = [];
+        this._memoAdjustWidgetLayout = {};
         this.state = {
-            activeTabId: null,
-            indexesOfItemsWithActiveAutoheight: {},
-        };
-        this.getMemoForwardRefCallback = (refIndex) => {
-            if (!this._memoForwardedPluginRef[refIndex]) {
-                this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
-                    this.pluginsRefs[refIndex] = pluginRef;
-                };
-            }
-            return this._memoForwardedPluginRef[refIndex];
-        };
-        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 }),
-                });
-            }
-        };
-        this.getMemoAdjustWidgetLayout = (index) => {
-            if (!this._memoAdjustWidgetLayout[index]) {
-                this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
-            }
-            return this._memoAdjustWidgetLayout[index];
+            itemsWithActiveAutoheight: {},
         };
     }
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.activeTabId !== this.context.config.id) {
-            this.setState({
-                activeTabId: this.context.config.id,
-                indexesOfItemsWithActiveAutoheight: {},
+    render() {
+        const { config, layout, groups = [{ id: DEFAULT_GROUP }], context, editMode } = this.context;
+        this.pluginsRefs.length = config.items.length;
+        const sortedItems = this.getSortedLayoutItems();
+        let indexOffset = 0;
+        return (React.createElement("div", { className: b() }, groups.map((group) => {
+            const groupId = group.id || DEFAULT_GROUP;
+            const items = sortedItems[groupId];
+            const children = items.map((item, index) => {
+                const isItemWithActiveAutoheight = item.id in this.state.itemsWithActiveAutoheight;
+                return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
+                    React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(item.id), forwardedPluginRef: this.getMemoForwardRefCallback(indexOffset + index), onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
             });
-        }
+            indexOffset += items.length;
+            if (group.render) {
+                return group.render(groupId, children, {
+                    isMobile: true,
+                    config,
+                    context,
+                    editMode,
+                    items,
+                    layout,
+                });
+            }
+            return children;
+        })));
     }
     getSortedLayoutItems() {
         if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
@@ -57,18 +52,36 @@ class MobileLayout extends React.PureComponent {
         }
         this._memoLayout = this.context.layout;
         const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
-        this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
+        this.sortedLayoutItems = groupBy(getSortedConfigItems(this.context.config, hasOrderId), (item) => item.parent || DEFAULT_GROUP);
         return this.sortedLayoutItems;
     }
-    render() {
-        const { config, layout } = this.context;
-        this.pluginsRefs.length = config.items.length;
-        const sortedItems = this.getSortedLayoutItems();
-        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: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
-        })));
+    getMemoForwardRefCallback(refIndex) {
+        if (!this._memoForwardedPluginRef[refIndex]) {
+            this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                this.pluginsRefs[refIndex] = pluginRef;
+            };
+        }
+        return this._memoForwardedPluginRef[refIndex];
+    }
+    adjustWidgetLayout(id, { needSetDefault }) {
+        if (needSetDefault) {
+            const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.itemsWithActiveAutoheight);
+            delete indexesOfItemsWithActiveAutoheight[id];
+            this.setState({ itemsWithActiveAutoheight: indexesOfItemsWithActiveAutoheight });
+        }
+        else {
+            this.setState({
+                itemsWithActiveAutoheight: Object.assign({}, this.state.itemsWithActiveAutoheight, {
+                    [id]: true,
+                }),
+            });
+        }
+    }
+    getMemoAdjustWidgetLayout(id) {
+        if (!this._memoAdjustWidgetLayout[id]) {
+            this._memoAdjustWidgetLayout[id] = this.adjustWidgetLayout.bind(this, id);
+        }
+        return this._memoAdjustWidgetLayout[id];
     }
 }
 MobileLayout.contextType = DashKitContext;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
-import { type ConfigItem, type ConfigLayout, type ItemState, type ItemsStateAndParamsBase, type PluginBase, type StringParams } from '../../shared';
-import { MenuItem } from '../../typings';
+import { OverlayControlsCtxShape } from '../../context';
+import { type ConfigItem, type ItemParams, type ItemState, type PluginBase } from '../../shared';
 import './OverlayControls.css';
 export declare enum OverlayControlsPosition {
     TopRight = "top_right",
@@ -25,7 +25,7 @@ export interface OverlayCustomControlItem {
     title?: string;
     icon?: MenuItemProps['icon'];
     iconSize?: number | string;
-    handler?: (item: ConfigItem, params: StringParams, state: ItemState) => void;
+    handler?: (item: ConfigItem, params: ItemParams, state: ItemState) => void;
     visible?: (item: ConfigItem) => boolean;
     className?: string;
     qa?: string;
@@ -51,21 +51,9 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
 export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
     copyContext?: C;
 };
-export interface OverlayControlsCtxShape {
-    overlayControls?: Record<string, OverlayControlItem[]>;
-    context: Record<string, any>;
-    menu: MenuItem[];
-    itemsStateAndParams: ItemsStateAndParamsBase;
-    itemsParams: Record<string, StringParams>;
-    editItem: (item: ConfigItem) => void;
-    removeItem: (id: string) => void;
-    getLayoutItem: (id: string) => ConfigLayout | void;
-    getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
-    onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
-}
 type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
 declare class OverlayControls extends React.Component<OverlayControlsProps> {
-    static contextType: React.Context<any>;
+    static contextType: React.Context<void | OverlayControlsCtxShape>;
     static defaultProps: OverlayControlsDefaultProps;
     context: React.ContextType<OverlayControlsCtx>;
     render(): JSX.Element;