@gravity-ui/dashkit 9.2.0 → 9.2.1-beta

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/GridLayout/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {ReactGridLayoutProps} from 'src/typings';\n\nimport type {ConfigItem, ConfigLayout, ItemDragProps} from '../../shared';\n\nexport type GridLayoutProps = {\n    ref?: React.ForwardedRef<unknown>;\n};\n\nexport type GridLayoutState = {\n    isDragging: boolean;\n    isDraggedOut: boolean;\n    isPageHidden: boolean;\n    currentDraggingElement: CurrentDraggingElement | null;\n    draggedOverGroup: string | null;\n};\n\nexport type CurrentDraggingElement = {\n    group: string;\n    layoutItem: ConfigLayout;\n    item: ConfigItem | ItemDragProps;\n    cursorPosition: {\n        offsetX: number;\n        offsetY: number;\n    };\n};\n\nexport type ReloadItemsOptions = {\n    targetIds?: string[];\n    force?: boolean;\n};\n\nexport type ManipulationCallbackArgs = {\n    group: string;\n    layout: ConfigLayout[];\n    oldItem: ConfigLayout;\n    newItem: ConfigLayout;\n    placeholder: ConfigLayout;\n    e: MouseEvent;\n    element: HTMLElement;\n};\n\nexport type MemoGroupLayout = {\n    key: string;\n    layout: ConfigLayout[];\n};\n\ntype GroupCallback = (\n    layout: ConfigLayout[],\n    layoutItem: ConfigLayout,\n    newItem: ConfigLayout,\n    placeholder: ConfigLayout,\n    event: MouseEvent,\n    element: HTMLElement,\n) => void;\n\nexport type GroupCallbacks = {\n    onDragStart: GroupCallback;\n    onDrag: GroupCallback;\n    onDragStop: GroupCallback;\n    onResizeStart: GroupCallback;\n    onResize: GroupCallback;\n    onResizeStop: GroupCallback;\n    onDrop: (layout: ConfigLayout[], item: ConfigLayout | undefined, e: MouseEvent) => void | false;\n    onDropDragOver: (e: DragEvent | MouseEvent) => void | boolean;\n    onDragTargetRestore: (group?: string) => void;\n};\n\nexport type AdjustWidgetLayoutParams = {\n    widgetId: string;\n    needSetDefault?: boolean;\n    adjustedWidgetLayout?: ConfigLayout;\n};\n\nexport type LayoutAndPropsByGroup = {\n    properties: Partial<ReactGridLayoutProps>;\n    layout: ConfigLayout[];\n};\n"]}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { PluginRef } from 'src/typings';
 import { DashKitContext } from "../../context/index.js";
 import { getSortedConfigItems } from "./helpers.js";
 import "./MobileLayout.css";
@@ -6,21 +7,20 @@ 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/index.js").DashKitCtxShape>;
     context: React.ContextType<typeof DashKitContext>;
-    pluginsRefs: PlugibRefObject[];
+    pluginsRefs: PluginRef[];
     sortedLayoutItems: Record<string, ReturnType<typeof getSortedConfigItems>> | null;
     _memoLayout: import("../../index.js").ConfigLayout[];
-    _memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void>;
+    _memoForwardedPluginRef: Array<(refObject: PluginRef) => void>;
     _memoAdjustWidgetLayout: Record<string, (props: {
         needSetDefault: boolean;
     }) => void>;
     state: MobileLayoutState;
     render(): JSX.Element;
     getSortedLayoutItems(): Record<string, (import("../../index.js").ConfigItem & import("../../index.js").ConfigLayout)[]>;
-    getMemoForwardRefCallback(refIndex: number): (refObject: PlugibRefObject) => void;
+    getMemoForwardRefCallback(refIndex: number): (refObject: PluginRef) => void;
     adjustWidgetLayout(id: string, { needSetDefault }: {
         needSetDefault: boolean;
     }): void;

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

@@ -1 +1 @@
-{"version":3,"file":"MobileLayout.js","sourceRoot":"../../../../src","sources":["components/MobileLayout/MobileLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport groupBy from 'lodash/groupBy';\n\nimport {DEFAULT_GROUP} from '../../constants';\nimport {DashKitContext} from '../../context';\nimport {cn} from '../../utils/cn';\nimport Item from '../Item/Item';\n\nimport {getSortedConfigItems} from './helpers';\n\nimport './MobileLayout.scss';\n\nconst b = cn('dashkit-mobile-layout');\n\ntype MobileLayoutProps = {};\n\ntype MobileLayoutState = {\n    itemsWithActiveAutoheight: Record<string, boolean>;\n};\n\ntype PlugibRefObject = React.RefObject<any>;\n\nexport default class MobileLayout extends React.PureComponent<\n    MobileLayoutProps,\n    MobileLayoutState\n> {\n    static contextType = DashKitContext;\n    context!: React.ContextType<typeof DashKitContext>;\n\n    pluginsRefs: PlugibRefObject[] = [];\n    sortedLayoutItems: Record<string, ReturnType<typeof getSortedConfigItems>> | null = null;\n\n    _memoLayout = this.context.layout;\n    _memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void> = [];\n    _memoAdjustWidgetLayout: Record<string, (props: {needSetDefault: boolean}) => void> = {};\n\n    state: MobileLayoutState = {\n        itemsWithActiveAutoheight: {},\n    };\n\n    render() {\n        const {\n            config,\n            layout,\n            groups = [{id: DEFAULT_GROUP}],\n            context,\n            editMode,\n            configItems,\n        } = this.context;\n\n        this.pluginsRefs.length = configItems.length;\n\n        const sortedItems = this.getSortedLayoutItems();\n        let indexOffset = 0;\n\n        return (\n            <div className={b()}>\n                {groups.map((group) => {\n                    const groupId = group.id || DEFAULT_GROUP;\n                    const items = sortedItems[groupId] || [];\n\n                    const children = items.map((item, index) => {\n                        const isItemWithActiveAutoheight =\n                            item.id in this.state.itemsWithActiveAutoheight;\n\n                        return (\n                            <div\n                                className={b('item', {autoheight: isItemWithActiveAutoheight})}\n                                key={item.id}\n                            >\n                                <Item\n                                    id={item.id}\n                                    item={item}\n                                    layout={layout}\n                                    shouldItemUpdate={false}\n                                    adjustWidgetLayout={this.getMemoAdjustWidgetLayout(item.id)}\n                                    forwardedPluginRef={this.getMemoForwardRefCallback(\n                                        indexOffset + index,\n                                    )}\n                                    onItemMountChange={this.context.onItemMountChange}\n                                    onItemRender={this.context.onItemRender}\n                                />\n                            </div>\n                        );\n                    });\n\n                    indexOffset += items.length;\n\n                    if (group.render) {\n                        return group.render(groupId, children, {\n                            isMobile: true,\n                            config,\n                            context,\n                            editMode,\n                            items,\n                            layout,\n                        });\n                    }\n\n                    return children;\n                })}\n            </div>\n        );\n    }\n\n    getSortedLayoutItems() {\n        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {\n            return this.sortedLayoutItems;\n        }\n\n        this._memoLayout = this.context.layout;\n\n        const hasOrderId = Boolean(this.context.configItems.find((item) => item.orderId));\n\n        this.sortedLayoutItems = groupBy(\n            getSortedConfigItems(this.context.config, this.context.configItems, hasOrderId),\n            (item) => item.parent || DEFAULT_GROUP,\n        );\n\n        return this.sortedLayoutItems;\n    }\n\n    getMemoForwardRefCallback(refIndex: number) {\n        if (!this._memoForwardedPluginRef[refIndex]) {\n            this._memoForwardedPluginRef[refIndex] = (pluginRef: PlugibRefObject) => {\n                this.pluginsRefs[refIndex] = pluginRef;\n            };\n        }\n\n        return this._memoForwardedPluginRef[refIndex];\n    }\n\n    adjustWidgetLayout(id: string, {needSetDefault}: {needSetDefault: boolean}) {\n        if (needSetDefault) {\n            const indexesOfItemsWithActiveAutoheight = {\n                ...this.state.itemsWithActiveAutoheight,\n            };\n\n            delete indexesOfItemsWithActiveAutoheight[id];\n\n            this.setState({itemsWithActiveAutoheight: indexesOfItemsWithActiveAutoheight});\n        } else {\n            this.setState({\n                itemsWithActiveAutoheight: Object.assign({}, this.state.itemsWithActiveAutoheight, {\n                    [id]: true,\n                }),\n            });\n        }\n    }\n\n    getMemoAdjustWidgetLayout(id: string) {\n        if (!this._memoAdjustWidgetLayout[id]) {\n            this._memoAdjustWidgetLayout[id] = this.adjustWidgetLayout.bind(this, id);\n        }\n\n        return this._memoAdjustWidgetLayout[id];\n    }\n}\n"]}
+{"version":3,"file":"MobileLayout.js","sourceRoot":"../../../../src","sources":["components/MobileLayout/MobileLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport groupBy from 'lodash/groupBy';\n\nimport type {PluginRef} from 'src/typings';\n\nimport {DEFAULT_GROUP} from '../../constants';\nimport {DashKitContext} from '../../context';\nimport {cn} from '../../utils/cn';\nimport Item from '../Item/Item';\n\nimport {getSortedConfigItems} from './helpers';\n\nimport './MobileLayout.scss';\n\nconst b = cn('dashkit-mobile-layout');\n\ntype MobileLayoutProps = {};\n\ntype MobileLayoutState = {\n    itemsWithActiveAutoheight: Record<string, boolean>;\n};\n\nexport default class MobileLayout extends React.PureComponent<\n    MobileLayoutProps,\n    MobileLayoutState\n> {\n    static contextType = DashKitContext;\n    context!: React.ContextType<typeof DashKitContext>;\n\n    pluginsRefs: PluginRef[] = [];\n    sortedLayoutItems: Record<string, ReturnType<typeof getSortedConfigItems>> | null = null;\n\n    _memoLayout = this.context.layout;\n    _memoForwardedPluginRef: Array<(refObject: PluginRef) => void> = [];\n    _memoAdjustWidgetLayout: Record<string, (props: {needSetDefault: boolean}) => void> = {};\n\n    state: MobileLayoutState = {\n        itemsWithActiveAutoheight: {},\n    };\n\n    render() {\n        const {\n            config,\n            layout,\n            groups = [{id: DEFAULT_GROUP}],\n            context,\n            editMode,\n            configItems,\n        } = this.context;\n\n        this.pluginsRefs.length = configItems.length;\n\n        const sortedItems = this.getSortedLayoutItems();\n        let indexOffset = 0;\n\n        return (\n            <div className={b()}>\n                {groups.map((group) => {\n                    const groupId = group.id || DEFAULT_GROUP;\n                    const items = sortedItems[groupId] || [];\n\n                    const children = items.map((item, index) => {\n                        const isItemWithActiveAutoheight =\n                            item.id in this.state.itemsWithActiveAutoheight;\n\n                        return (\n                            <div\n                                className={b('item', {autoheight: isItemWithActiveAutoheight})}\n                                key={item.id}\n                            >\n                                <Item\n                                    id={item.id}\n                                    item={item}\n                                    layout={layout}\n                                    shouldItemUpdate={false}\n                                    adjustWidgetLayout={this.getMemoAdjustWidgetLayout(item.id)}\n                                    forwardedPluginRef={this.getMemoForwardRefCallback(\n                                        indexOffset + index,\n                                    )}\n                                    onItemMountChange={this.context.onItemMountChange}\n                                    onItemRender={this.context.onItemRender}\n                                />\n                            </div>\n                        );\n                    });\n\n                    indexOffset += items.length;\n\n                    if (group.render) {\n                        return group.render(groupId, children, {\n                            isMobile: true,\n                            config,\n                            context,\n                            editMode,\n                            items,\n                            layout,\n                        });\n                    }\n\n                    return children;\n                })}\n            </div>\n        );\n    }\n\n    getSortedLayoutItems() {\n        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {\n            return this.sortedLayoutItems;\n        }\n\n        this._memoLayout = this.context.layout;\n\n        const hasOrderId = Boolean(this.context.configItems.find((item) => item.orderId));\n\n        this.sortedLayoutItems = groupBy(\n            getSortedConfigItems(this.context.config, this.context.configItems, hasOrderId),\n            (item) => item.parent || DEFAULT_GROUP,\n        );\n\n        return this.sortedLayoutItems;\n    }\n\n    getMemoForwardRefCallback(refIndex: number) {\n        if (!this._memoForwardedPluginRef[refIndex]) {\n            this._memoForwardedPluginRef[refIndex] = (pluginRef: PluginRef) => {\n                this.pluginsRefs[refIndex] = pluginRef;\n            };\n        }\n\n        return this._memoForwardedPluginRef[refIndex];\n    }\n\n    adjustWidgetLayout(id: string, {needSetDefault}: {needSetDefault: boolean}) {\n        if (needSetDefault) {\n            const indexesOfItemsWithActiveAutoheight = {\n                ...this.state.itemsWithActiveAutoheight,\n            };\n\n            delete indexesOfItemsWithActiveAutoheight[id];\n\n            this.setState({itemsWithActiveAutoheight: indexesOfItemsWithActiveAutoheight});\n        } else {\n            this.setState({\n                itemsWithActiveAutoheight: Object.assign({}, this.state.itemsWithActiveAutoheight, {\n                    [id]: true,\n                }),\n            });\n        }\n    }\n\n    getMemoAdjustWidgetLayout(id: string) {\n        if (!this._memoAdjustWidgetLayout[id]) {\n            this._memoAdjustWidgetLayout[id] = this.adjustWidgetLayout.bind(this, id);\n        }\n\n        return this._memoAdjustWidgetLayout[id];\n    }\n}\n"]}

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

@@ -1,29 +1,37 @@
 import React from 'react';
 import type { RegisterManager } from "../utils/index.js";
 import type { DashKitProps } from "../components/DashKit/index.js";
-import type { ConfigItem, ConfigLayout, ItemParams, ItemState, ItemStateAndParams, ItemStateAndParamsChangeOptions } from "../shared/index.js";
+import type { ConfigItem, ConfigLayout, ItemDragProps, ItemParams, ItemState, ItemStateAndParams, ItemStateAndParamsChangeOptions } from "../shared/index.js";
+import type { PluginRef, ReactGridLayoutProps } from "../typings/index.js";
 type DashkitPropsPassedToCtx = Pick<DashKitProps, 'config' | 'groups' | 'context' | 'noOverlay' | 'focusable' | 'globalParams' | 'editMode' | 'settings' | 'onItemMountChange' | 'onItemRender' | 'draggableHandleClassName' | 'onDragStart' | 'onDrag' | 'onDragStop' | 'onResizeStart' | 'onResize' | 'onResizeStop'>;
 type PluginType = string;
+type TemporaryLayout = {
+    data: ConfigLayout[];
+    dragProps: ItemDragProps;
+};
 export type DashKitCtxShape = DashkitPropsPassedToCtx & {
     registerManager: RegisterManager;
     forwardedMetaRef: React.ForwardedRef<any>;
     configItems: ConfigItem[];
     layout: ConfigLayout[];
-    temporaryLayout: ConfigLayout[] | null;
+    layoutChange: (layout: ConfigLayout[]) => void;
+    temporaryLayout: TemporaryLayout | null;
     memorizeOriginalLayout: (widgetId: string, preAutoHeightLayout: ConfigLayout, postAutoHeightLayout: ConfigLayout) => void;
     revertToOriginalLayout: (widgetId: string) => void;
     itemsState?: Record<string, ItemState>;
     itemsParams: Record<string, ItemParams>;
     onItemStateAndParamsChange: (id: string, stateAndParams: ItemStateAndParams, options: ItemStateAndParamsChangeOptions) => void;
-    getItemsMeta: (pluginsRefs: Array<React.RefObject<any>>) => Array<Promise<any>>;
-    reloadItems: (pluginsRefs: Array<React.RefObject<any>>, data: {
+    getItemsMeta: (pluginsRefs: Array<PluginRef>) => Array<Promise<any>>;
+    reloadItems: (pluginsRefs: Array<PluginRef>, data: {
         silentLoading: boolean;
         noVeil: boolean;
     }) => void;
-    onDrop: (newLayout: ConfigLayout, item: ConfigItem) => void;
-    onDropDragOver: (e: DragEvent | MouseEvent, group: string | void, gridProps: Partial<ReactGridLayout.ReactGridLayoutProps>, groupLayout: ConfigLayout[], sharedItem: (Partial<ConfigLayout> & {
+    onDrop: (newLayout: ConfigLayout[], item: ConfigLayout, e?: MouseEvent) => void;
+    onDropDragOver: (e: DragEvent | MouseEvent, group: string | void, gridProps: ReactGridLayoutProps, groupLayout: ConfigLayout[], sharedItem: (Partial<ConfigLayout> & {
         type: PluginType;
     }) | void) => void | boolean;
+    onItemBlur: (item: ConfigItem) => void;
+    onItemFocus: (item: ConfigItem) => void;
     outerDnDEnable: boolean;
     dragOverPlugin: null | PluginType;
 };

package/build/cjs/context/DashKitContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashKitContext.js","sourceRoot":"../../../src","sources":["context/DashKitContext.ts"],"names":[],"mappings":";;;;AAAA,0DAA0B;AA6E1B,MAAM,cAAc,GAAG,eAAK,CAAC,aAAa,CAAkB,EAAqB,CAAC,CAAC;AAE3E,wCAAc","sourcesContent":["import React from 'react';\n\nimport type {RegisterManager} from '..//utils';\nimport type {DashKitProps} from '../components/DashKit';\nimport type {\n    ConfigItem,\n    ConfigLayout,\n    ItemParams,\n    ItemState,\n    ItemStateAndParams,\n    ItemStateAndParamsChangeOptions,\n} from '../shared';\n\ntype DashkitPropsPassedToCtx = Pick<\n    DashKitProps,\n    | 'config'\n    | 'groups'\n    | 'context'\n    | 'noOverlay'\n    | 'focusable'\n    | 'globalParams'\n    | 'editMode'\n    | 'settings'\n    | 'onItemMountChange'\n    | 'onItemRender'\n    | 'draggableHandleClassName'\n    // default handlers bypass\n    | 'onDragStart'\n    | 'onDrag'\n    | 'onDragStop'\n    | 'onResizeStart'\n    | 'onResize'\n    | 'onResizeStop'\n>;\n\ntype PluginType = string;\n\nexport type DashKitCtxShape = DashkitPropsPassedToCtx & {\n    registerManager: RegisterManager;\n    forwardedMetaRef: React.ForwardedRef<any>;\n\n    configItems: ConfigItem[];\n    layout: ConfigLayout[];\n    temporaryLayout: ConfigLayout[] | null;\n    memorizeOriginalLayout: (\n        widgetId: string,\n        preAutoHeightLayout: ConfigLayout,\n        postAutoHeightLayout: ConfigLayout,\n    ) => void;\n    revertToOriginalLayout: (widgetId: string) => void;\n\n    itemsState?: Record<string, ItemState>;\n    itemsParams: Record<string, ItemParams>;\n    onItemStateAndParamsChange: (\n        id: string,\n        stateAndParams: ItemStateAndParams,\n        options: ItemStateAndParamsChangeOptions,\n    ) => void;\n\n    getItemsMeta: (pluginsRefs: Array<React.RefObject<any>>) => Array<Promise<any>>;\n    reloadItems: (\n        pluginsRefs: Array<React.RefObject<any>>,\n        data: {silentLoading: boolean; noVeil: boolean},\n    ) => void;\n\n    onDrop: (newLayout: ConfigLayout, item: ConfigItem) => void;\n    onDropDragOver: (\n        e: DragEvent | MouseEvent,\n        group: string | void,\n        gridProps: Partial<ReactGridLayout.ReactGridLayoutProps>,\n        groupLayout: ConfigLayout[],\n        sharedItem: (Partial<ConfigLayout> & {type: PluginType}) | void,\n    ) => void | boolean;\n    outerDnDEnable: boolean;\n    dragOverPlugin: null | PluginType;\n};\n\nconst DashKitContext = React.createContext<DashKitCtxShape>({} as DashKitCtxShape);\n\nexport {DashKitContext};\n"]}
+{"version":3,"file":"DashKitContext.js","sourceRoot":"../../../src","sources":["context/DashKitContext.ts"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAuF1B,MAAM,cAAc,GAAG,eAAK,CAAC,aAAa,CAAkB,EAAqB,CAAC,CAAC;AAE3E,wCAAc","sourcesContent":["import React from 'react';\n\nimport type {RegisterManager} from '..//utils';\nimport type {DashKitProps} from '../components/DashKit';\nimport type {\n    ConfigItem,\n    ConfigLayout,\n    ItemDragProps,\n    ItemParams,\n    ItemState,\n    ItemStateAndParams,\n    ItemStateAndParamsChangeOptions,\n} from '../shared';\nimport type {PluginRef, ReactGridLayoutProps} from '../typings';\n\ntype DashkitPropsPassedToCtx = Pick<\n    DashKitProps,\n    | 'config'\n    | 'groups'\n    | 'context'\n    | 'noOverlay'\n    | 'focusable'\n    | 'globalParams'\n    | 'editMode'\n    | 'settings'\n    | 'onItemMountChange'\n    | 'onItemRender'\n    | 'draggableHandleClassName'\n    // default handlers bypass\n    | 'onDragStart'\n    | 'onDrag'\n    | 'onDragStop'\n    | 'onResizeStart'\n    | 'onResize'\n    | 'onResizeStop'\n>;\n\ntype PluginType = string;\n\ntype TemporaryLayout = {\n    data: ConfigLayout[];\n    dragProps: ItemDragProps;\n};\n\nexport type DashKitCtxShape = DashkitPropsPassedToCtx & {\n    registerManager: RegisterManager;\n    forwardedMetaRef: React.ForwardedRef<any>;\n\n    configItems: ConfigItem[];\n    layout: ConfigLayout[];\n    layoutChange: (layout: ConfigLayout[]) => void;\n    temporaryLayout: TemporaryLayout | null;\n    memorizeOriginalLayout: (\n        widgetId: string,\n        preAutoHeightLayout: ConfigLayout,\n        postAutoHeightLayout: ConfigLayout,\n    ) => void;\n    revertToOriginalLayout: (widgetId: string) => void;\n\n    itemsState?: Record<string, ItemState>;\n    itemsParams: Record<string, ItemParams>;\n    onItemStateAndParamsChange: (\n        id: string,\n        stateAndParams: ItemStateAndParams,\n        options: ItemStateAndParamsChangeOptions,\n    ) => void;\n\n    getItemsMeta: (pluginsRefs: Array<PluginRef>) => Array<Promise<any>>;\n    reloadItems: (\n        pluginsRefs: Array<PluginRef>,\n        data: {silentLoading: boolean; noVeil: boolean},\n    ) => void;\n\n    onDrop: (newLayout: ConfigLayout[], item: ConfigLayout, e?: MouseEvent) => void;\n    onDropDragOver: (\n        e: DragEvent | MouseEvent,\n        group: string | void,\n        gridProps: ReactGridLayoutProps,\n        groupLayout: ConfigLayout[],\n        sharedItem: (Partial<ConfigLayout> & {type: PluginType}) | void,\n    ) => void | boolean;\n    onItemBlur: (item: ConfigItem) => void;\n    onItemFocus: (item: ConfigItem) => void;\n    outerDnDEnable: boolean;\n    dragOverPlugin: null | PluginType;\n};\n\nconst DashKitContext = React.createContext<DashKitCtxShape>({} as DashKitCtxShape);\n\nexport {DashKitContext};\n"]}

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

@@ -1,4 +1,4 @@
-import type { Layout, Layouts } from 'react-grid-layout';
+import type { Layout } from 'react-grid-layout';
 import type { Config, ConfigItem, ConfigLayout } from "../shared/index.js";
 import { GridLayoutSettings } from "./common.js";
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
@@ -42,7 +42,7 @@ export interface DashKitGroup {
     gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }
 export type ItemManipulationCallback = (eventData: {
-    layout: Layouts;
+    layout: Layout[];
     oldItem: Layout;
     newItem: Layout;
     placeholder: Layout;

package/build/cjs/typings/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"../../../src","sources":["typings/config.ts"],"names":[],"mappings":"","sourcesContent":["import type {Layout, Layouts} from 'react-grid-layout';\n\nimport type {Config, ConfigItem, ConfigLayout} from '../shared';\n\nimport {GridLayoutSettings} from './common';\n\nexport interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {\n    id?: null;\n    namespace?: string;\n    layout?: Omit<ConfigLayout, 'i'>;\n}\nexport type SetConfigItem = ConfigItem | AddConfigItem;\n\nexport type SetItemOptions = {\n    excludeIds?: string[];\n    useGlobalItems?: boolean;\n};\n\nexport type GridReflowOptions = {\n    cols: number;\n    maxRows?: number;\n    compactType?: CompactType;\n};\n\nexport type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';\n\nexport type ReflowLayoutOptions = {\n    defaultProps: GridReflowOptions;\n    groups?: Record<string, GridReflowOptions>;\n};\n\nexport type AddNewItemOptions = SetItemOptions & {\n    updateLayout?: ConfigLayout[];\n    reflowLayoutOptions?: ReflowLayoutOptions;\n};\n\nexport interface DashkitGroupRenderProps {\n    config: Config;\n    editMode: boolean;\n    isMobile: boolean;\n    items: ConfigItem[];\n    layout: ConfigLayout[];\n    context: any;\n}\n\nexport type ReactGridLayoutProps = Omit<\n    GridLayoutSettings,\n    | 'children'\n    | 'compactType'\n    | 'innerRef'\n    | 'key'\n    | 'layout'\n    | 'onDragStart'\n    | 'onDragStop'\n    | 'onResizeStart'\n    | 'onResizeStop'\n    | 'draggableHandle'\n    | 'isDroppable'\n    | 'onDropDragOver'\n    | 'onDrop'\n    | 'draggableCancel'\n> & {\n    compactType?: CompactType;\n};\n\nexport interface DashKitGroup {\n    id?: string;\n    render?: (\n        id: string,\n        children: React.ReactNode,\n        props: DashkitGroupRenderProps,\n    ) => React.ReactNode;\n    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;\n}\n\nexport type ItemManipulationCallback = (eventData: {\n    layout: Layouts;\n    oldItem: Layout;\n    newItem: Layout;\n    placeholder: Layout;\n    e: MouseEvent;\n    element: HTMLElement;\n}) => void;\n"]}
+{"version":3,"file":"config.js","sourceRoot":"../../../src","sources":["typings/config.ts"],"names":[],"mappings":"","sourcesContent":["import type {Layout} from 'react-grid-layout';\n\nimport type {Config, ConfigItem, ConfigLayout} from '../shared';\n\nimport {GridLayoutSettings} from './common';\n\nexport interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {\n    id?: null;\n    namespace?: string;\n    layout?: Omit<ConfigLayout, 'i'>;\n}\nexport type SetConfigItem = ConfigItem | AddConfigItem;\n\nexport type SetItemOptions = {\n    excludeIds?: string[];\n    useGlobalItems?: boolean;\n};\n\nexport type GridReflowOptions = {\n    cols: number;\n    maxRows?: number;\n    compactType?: CompactType;\n};\n\nexport type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';\n\nexport type ReflowLayoutOptions = {\n    defaultProps: GridReflowOptions;\n    groups?: Record<string, GridReflowOptions>;\n};\n\nexport type AddNewItemOptions = SetItemOptions & {\n    updateLayout?: ConfigLayout[];\n    reflowLayoutOptions?: ReflowLayoutOptions;\n};\n\nexport interface DashkitGroupRenderProps {\n    config: Config;\n    editMode: boolean;\n    isMobile: boolean;\n    items: ConfigItem[];\n    layout: ConfigLayout[];\n    context: any;\n}\n\nexport type ReactGridLayoutProps = Omit<\n    GridLayoutSettings,\n    | 'children'\n    | 'compactType'\n    | 'innerRef'\n    | 'key'\n    | 'layout'\n    | 'onDragStart'\n    | 'onDragStop'\n    | 'onResizeStart'\n    | 'onResizeStop'\n    | 'draggableHandle'\n    | 'isDroppable'\n    | 'onDropDragOver'\n    | 'onDrop'\n    | 'draggableCancel'\n> & {\n    compactType?: CompactType;\n};\n\nexport interface DashKitGroup {\n    id?: string;\n    render?: (\n        id: string,\n        children: React.ReactNode,\n        props: DashkitGroupRenderProps,\n    ) => React.ReactNode;\n    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;\n}\n\nexport type ItemManipulationCallback = (eventData: {\n    layout: Layout[];\n    oldItem: Layout;\n    newItem: Layout;\n    placeholder: Layout;\n    e: MouseEvent;\n    element: HTMLElement;\n}) => void;\n"]}

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

@@ -25,6 +25,7 @@ export interface PluginWidgetProps<T = StringParams> {
     }) => void;
 }
 export type PluginDefaultLayout = Partial<Omit<WidgetLayout, 'i'>>;
+export type PluginRef = React.RefObject<any> | Record<string, unknown>;
 export interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {
     defaultLayout?: PluginDefaultLayout;
     renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;

package/build/cjs/typings/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sourceRoot":"../../../src","sources":["typings/plugin.ts"],"names":[],"mappings":"","sourcesContent":["import React from 'react';\n\nimport ReactGridLayout from 'react-grid-layout';\n\nimport type {\n    ConfigItem,\n    ItemState,\n    ItemStateAndParams,\n    ItemStateAndParamsChangeOptions,\n    PluginBase,\n    StringParams,\n} from '../shared';\n\nimport type {ContextProps, SettingsProps, WidgetLayout} from './common';\n\nexport interface PluginWidgetProps<T = StringParams> {\n    id: string;\n    editMode: boolean;\n    params: T;\n    state: ItemState;\n    onStateAndParamsChange: (\n        stateAndParams: ItemStateAndParams,\n        options?: ItemStateAndParamsChangeOptions,\n    ) => void;\n    onBeforeLoad: () => () => void;\n    width: number;\n    height: number;\n    data: ConfigItem['data'];\n    defaults: ConfigItem['defaults'];\n    namespace: ConfigItem['namespace'];\n    settings: SettingsProps;\n    context: ContextProps;\n    layout: WidgetLayout[];\n    gridLayout: ReactGridLayout.ReactGridLayoutProps;\n    adjustWidgetLayout: (data: {\n        widgetId: string;\n        needSetDefault?: boolean;\n        adjustedWidgetLayout?: WidgetLayout;\n    }) => void;\n}\n\nexport type PluginDefaultLayout = Partial<Omit<WidgetLayout, 'i'>>;\n\nexport interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {\n    defaultLayout?: PluginDefaultLayout;\n    renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;\n    placeholderRenderer?: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;\n}\n"]}
+{"version":3,"file":"plugin.js","sourceRoot":"../../../src","sources":["typings/plugin.ts"],"names":[],"mappings":"","sourcesContent":["import React from 'react';\n\nimport ReactGridLayout from 'react-grid-layout';\n\nimport type {\n    ConfigItem,\n    ItemState,\n    ItemStateAndParams,\n    ItemStateAndParamsChangeOptions,\n    PluginBase,\n    StringParams,\n} from '../shared';\n\nimport type {ContextProps, SettingsProps, WidgetLayout} from './common';\n\nexport interface PluginWidgetProps<T = StringParams> {\n    id: string;\n    editMode: boolean;\n    params: T;\n    state: ItemState;\n    onStateAndParamsChange: (\n        stateAndParams: ItemStateAndParams,\n        options?: ItemStateAndParamsChangeOptions,\n    ) => void;\n    onBeforeLoad: () => () => void;\n    width: number;\n    height: number;\n    data: ConfigItem['data'];\n    defaults: ConfigItem['defaults'];\n    namespace: ConfigItem['namespace'];\n    settings: SettingsProps;\n    context: ContextProps;\n    layout: WidgetLayout[];\n    gridLayout: ReactGridLayout.ReactGridLayoutProps;\n    adjustWidgetLayout: (data: {\n        widgetId: string;\n        needSetDefault?: boolean;\n        adjustedWidgetLayout?: WidgetLayout;\n    }) => void;\n}\n\nexport type PluginDefaultLayout = Partial<Omit<WidgetLayout, 'i'>>;\n\nexport type PluginRef = React.RefObject<any> | Record<string, unknown>;\n\nexport interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {\n    defaultLayout?: PluginDefaultLayout;\n    renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;\n    placeholderRenderer?: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;\n}\n"]}

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

@@ -73,7 +73,7 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
     }): ConfigLayout[];
     metaRef: React.RefObject<GridLayout>;
     render(): JSX.Element;
-    getItemsMeta(): any;
+    getItemsMeta(): Promise<any>[] | undefined;
     reloadItems(options?: {
         targetIds?: string[];
         force?: boolean;

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

@@ -1,73 +1,59 @@
-export default class GridLayout extends React.PureComponent<any, any, any> {
-    static contextType: React.Context<import("../../context/index.js").DashKitCtxShape>;
-    constructor(props: any, context: any);
-    pluginsRefs: any[];
-    state: {
-        isDragging: boolean;
-        isDraggedOut: boolean;
-        isPageHidden: boolean;
-        currentDraggingElement: null;
-        draggedOverGroup: null;
-    };
+import React from 'react';
+import type { PluginRef, ReactGridLayoutProps } from 'src/typings';
+import type { DashKitCtxShape } from "../../context/index.js";
+import type { ConfigItem, ConfigLayout } from "../../shared/index.js";
+import type { AdjustWidgetLayoutParams, GridLayoutProps, GridLayoutState, GroupCallbacks, LayoutAndPropsByGroup, ManipulationCallbackArgs, MemoGroupLayout, ReloadItemsOptions } from "./types.js";
+export default class GridLayout extends React.PureComponent<GridLayoutProps, GridLayoutState> {
+    static contextType: React.Context<DashKitCtxShape>;
+    context: DashKitCtxShape;
+    pluginsRefs: Array<PluginRef>;
+    private _memoForwardedPluginRef;
+    private _memoGroupsProps;
+    private _memoGroupsLayouts;
+    private _memoCallbacksForGroups;
+    private _timeout?;
+    private _lastReloadAt?;
+    private _parendDragNode;
+    constructor(props: GridLayoutProps, context: DashKitCtxShape);
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    _memoCallbacksForGroups: {};
-    _memoGroupsProps: {};
-    _memoGroupsLayouts: {};
-    _memoForwardedPluginRef: any[];
-    _timeout: any;
-    _lastReloadAt: any;
     onVisibilityChange: () => void;
-    adjustWidgetLayout: ({ widgetId, needSetDefault, adjustedWidgetLayout }: {
-        widgetId: any;
-        needSetDefault: any;
-        adjustedWidgetLayout: any;
-    }) => void;
-    getItemsMeta: () => any;
-    getActiveLayout(): any;
-    getMemoGroupLayout(group: any, layout: any): any;
-    getMemoGroupCallbacks(group: any): any;
-    getMemoGroupProps: (group: any, renderLayout: any, properties: any) => {
-        layout: any;
-        callbacks: any;
-    };
-    getLayoutAndPropsByGroup: (group: any) => {
-        properties: any;
-        layout: any;
+    adjustWidgetLayout: ({ widgetId, needSetDefault, adjustedWidgetLayout, }: AdjustWidgetLayoutParams) => void;
+    getItemsMeta: () => Promise<any>[];
+    getActiveLayout(): ConfigLayout[];
+    getMemoGroupLayout(group: string, layout: ConfigLayout[]): MemoGroupLayout;
+    getMemoGroupCallbacks(group: string): GroupCallbacks;
+    getMemoGroupProps: (group: string, renderLayout: ConfigLayout[], properties: Partial<ReactGridLayoutProps>) => {
+        layout: ConfigLayout[];
+        callbacks: GroupCallbacks;
     };
-    getMemoForwardRefCallback: (refIndex: any) => any;
-    mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
-    reloadItems(options: any): void;
-    prepareDefaultArguments(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): {
-        group: any;
-        layout: any;
-        oldItem: any;
-        newItem: any;
-        placeholder: any;
-        e: any;
-        element: any;
-    };
-    updateDraggingElementState(group: any, layoutItem: any, e: any): void;
-    _initDragCoordinatesWatcher(element: any): void;
-    _parendDragNode: any;
-    _forceCursorCapture(parentElement: any, position: any, parentRect: any): void;
-    _updateDragCoordinates(e: any): void;
+    getLayoutAndPropsByGroup: (group: string) => LayoutAndPropsByGroup;
+    getMemoForwardRefCallback: (refIndex: number) => (pluginRef: PluginRef) => void;
+    mergeGroupsLayout(group: string, newLayout: ConfigLayout[], temporaryItem?: ConfigLayout): ConfigLayout[];
+    reloadItems(options?: ReloadItemsOptions): void;
+    prepareDefaultArguments(group: string, layout: ConfigLayout[], oldItem: ConfigLayout, newItem: ConfigLayout, placeholder: ConfigLayout, e: MouseEvent, element: HTMLElement): ManipulationCallbackArgs;
+    updateDraggingElementState(group: string, layoutItem: ConfigLayout, e: MouseEvent): void;
+    _initDragCoordinatesWatcher(element: HTMLElement): void;
+    _forceCursorCapture(parentElement: HTMLElement, position: {
+        top: number;
+        left: number;
+    }, parentRect: DOMRect): void;
+    _updateDragCoordinates(e: MouseEvent): void;
     _resetDragWatcher(): 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;
-    _onResizeStart(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
-    _onResize(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
-    _onResizeStop(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): void;
+    _onDragStart(group: string, _newLayout: ConfigLayout[], layoutItem: ConfigLayout, _newItem: ConfigLayout, _placeholder: ConfigLayout, e: MouseEvent, element: HTMLElement): void;
+    _onDrag(group: string, layout: ConfigLayout[], oldItem: ConfigLayout, newItem: ConfigLayout, placeholder: ConfigLayout, e: MouseEvent, element: HTMLElement): void;
+    _onDragStop(group: string, layout: ConfigLayout[], oldItem: ConfigLayout, newItem: ConfigLayout, placeholder: ConfigLayout, e: MouseEvent, element: HTMLElement): void;
+    _onResizeStart(group: string, layout: ConfigLayout[], oldItem: ConfigLayout, newItem: ConfigLayout, placeholder: ConfigLayout, e: MouseEvent, element: HTMLElement): void;
+    _onResize(group: string, layout: ConfigLayout[], oldItem: ConfigLayout, newItem: ConfigLayout, placeholder: ConfigLayout, e: MouseEvent, element: HTMLElement): void;
+    _onResizeStop(group: string, layout: ConfigLayout[], oldItem: ConfigLayout, newItem: ConfigLayout, placeholder: ConfigLayout, e: MouseEvent, element: HTMLElement): void;
     _onTargetRestore(): void;
-    _onStop: (group: any, newLayout: any) => void;
-    _onSharedDrop: (targetGroup: any, newLayout: any, tempItem: any) => void;
-    _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;
-    renderTemporaryPlaceholder(gridLayout: any): JSX.Element | null;
-    renderGroup(group: any, renderLayout: any, renderItems: any, offset: number | undefined, groupGridProperties: any): JSX.Element;
-    render(): any;
+    _onStop: (group: string, newLayout: ConfigLayout[]) => void;
+    _onSharedDrop: (targetGroup: string, newLayout: ConfigLayout[], tempItem: ConfigLayout) => void;
+    _onExternalDrop: (group: string, newLayout: ConfigLayout[], item: ConfigLayout, e: MouseEvent) => void;
+    _onDrop: (group: string, newLayout: ConfigLayout[], item: ConfigLayout | undefined, e: MouseEvent) => void | false;
+    _onDropDragOver: (group: string, e: DragEvent | MouseEvent) => void | boolean;
+    renderTemporaryPlaceholder(gridLayout: Partial<ReactGridLayoutProps>): JSX.Element | null;
+    renderGroup(group: string, renderLayout: ConfigLayout[], renderItems: ConfigItem[], offset?: number, groupGridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps): JSX.Element;
+    render(): JSX.Element | (string | number | boolean | JSX.Element | React.ReactFragment | null | undefined)[];
 }
-import React from 'react';

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

@@ -4,6 +4,13 @@ import { DashKitContext } from "../../context/index.js";
 import { resolveLayoutGroup } from "../../utils/index.js";
 import GridItem from "../GridItem/GridItem.js";
 import { Layout } from "./ReactGridLayout.js";
+const hasPluginId = (value) => {
+    return ('props' in value &&
+        typeof value.props === 'object' &&
+        value.props !== null &&
+        'id' in value.props &&
+        typeof value.props.id === 'string');
+};
 class GridLayout extends React.PureComponent {
     constructor(props, context) {
         super(props, context);
@@ -11,12 +18,13 @@ class GridLayout extends React.PureComponent {
         this._memoGroupsProps = {};
         this._memoGroupsLayouts = {};
         this._memoCallbacksForGroups = {};
+        this._parendDragNode = null;
         this.onVisibilityChange = () => {
             this.setState({
                 isPageHidden: document.hidden,
             });
         };
-        this.adjustWidgetLayout = ({ widgetId, needSetDefault, adjustedWidgetLayout }) => {
+        this.adjustWidgetLayout = ({ widgetId, needSetDefault, adjustedWidgetLayout, }) => {
             const { layout, memorizeOriginalLayout, revertToOriginalLayout } = this.context;
             if (needSetDefault) {
                 revertToOriginalLayout(widgetId);
@@ -71,7 +79,10 @@ class GridLayout extends React.PureComponent {
                 draggedOverGroup: null,
             });
             if (temporaryLayout) {
-                onDrop === null || onDrop === void 0 ? void 0 : onDrop(groupedLayout, groupedLayout.find(({ i }) => i === TEMPORARY_ITEM_ID));
+                const temporaryItem = groupedLayout.find(({ i }) => i === TEMPORARY_ITEM_ID);
+                if (onDrop && temporaryItem) {
+                    onDrop(groupedLayout, temporaryItem);
+                }
             }
             else {
                 layoutChange(groupedLayout);
@@ -212,7 +223,7 @@ class GridLayout extends React.PureComponent {
             const onResizeStop = this._onResizeStop.bind(this, group);
             const onDrop = this._onDrop.bind(this, group);
             const onDropDragOver = this._onDropDragOver.bind(this, group);
-            const onDragTargetRestore = this._onTargetRestore.bind(this, group);
+            const onDragTargetRestore = this._onTargetRestore.bind(this);
             this._memoCallbacksForGroups[group] = {
                 onDragStart,
                 onDrag,
@@ -234,7 +245,8 @@ class GridLayout extends React.PureComponent {
             return memo;
         }, temporaryItem ? { [temporaryItem.i]: temporaryItem } : {});
         const newItemsLayoutById = newLayout.reduce((memo, item) => {
-            const parent = itemsByGroup[item.i].parent;
+            var _a;
+            const parent = (_a = itemsByGroup[item.i]) === null || _a === void 0 ? void 0 : _a.parent;
             memo[item.i] = Object.assign({}, item);
             if (parent) {
                 memo[item.i].parent = parent;
@@ -255,19 +267,19 @@ class GridLayout extends React.PureComponent {
         const { isPageHidden } = this.state;
         const autoupdateIntervalMs = Number(autoupdateInterval) * 1000;
         const targetPlugins = targetIds
-            ? this.pluginsRefs.filter((plugin) => targetIds.includes(plugin.props.id))
+            ? this.pluginsRefs.filter((plugin) => hasPluginId(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)) {
                 this._lastReloadAt = new Date().getTime();
-                reloadItems(targetPlugins, { silentLoading, noVeil: true });
+                reloadItems(targetPlugins, { silentLoading: Boolean(silentLoading), noVeil: true });
             }
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
         else if (force) {
-            reloadItems(targetPlugins, { silentLoading, noVeil: true });
+            reloadItems(targetPlugins, { silentLoading: Boolean(silentLoading), noVeil: true });
         }
     }
     prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element) {
@@ -289,11 +301,15 @@ class GridLayout extends React.PureComponent {
             const item = temporaryLayout
                 ? temporaryLayout.dragProps
                 : this.context.configItems.find(({ id }) => id === layoutId);
+            if (!item) {
+                return;
+            }
             let { offsetX, offsetY } = e.nativeEvent || {};
             if (offsetX === undefined || offsetY === undefined) {
-                const gridRect = e.currentTarget.getBoundingClientRect();
-                offsetX = e.clientX - gridRect.left;
-                offsetY = e.clientY - gridRect.top;
+                const target = e.currentTarget;
+                const gridRect = target === null || target === void 0 ? void 0 : target.getBoundingClientRect();
+                offsetX = e.clientX - ((gridRect === null || gridRect === void 0 ? void 0 : gridRect.left) || 0);
+                offsetY = e.clientY - ((gridRect === null || gridRect === void 0 ? void 0 : gridRect.top) || 0);
             }
             currentDraggingElement = {
                 group,
@@ -331,6 +347,9 @@ class GridLayout extends React.PureComponent {
     }
     _updateDragCoordinates(e) {
         const parent = this._parendDragNode;
+        if (!parent) {
+            return;
+        }
         const parentRect = parent.getBoundingClientRect();
         const { clientX, clientY } = e;
         let isDraggedOut = this.state.isDraggedOut;
@@ -416,7 +435,10 @@ class GridLayout extends React.PureComponent {
         }
         const id = TEMPORARY_ITEM_ID;
         const { type } = temporaryLayout.dragProps;
-        return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), gridLayout: gridLayout }));
+        return (React.createElement(GridItem, { key: id, 
+            // TODO remove the expected error after translating GridItem to TS
+            // @ts-expect-error
+            id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), gridLayout: gridLayout }));
     }
     renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const { registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, onItemMountChange, onItemRender, onItemFocus, onItemBlur, } = this.context;
@@ -435,22 +457,43 @@ class GridLayout extends React.PureComponent {
             group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
             draggedOverGroup !== group;
-        return (React.createElement(Layout, Object.assign({ isDraggable: editMode, isResizable: editMode }, properties, { key: `group_${group}`, 
+        return (React.createElement(Layout, Object.assign({ key: `group_${group}` }, Object.assign(Object.assign({ isDraggable: editMode, isResizable: editMode }, properties), { 
             // Layout props
-            compactType: compactType, layout: layout, draggableCancel: `.${DRAGGABLE_CANCEL_CLASS_NAME}`, draggableHandle: draggableHandleClassName ? `.${draggableHandleClassName}` : null, 
+            compactType,
+            layout, draggableCancel: `.${DRAGGABLE_CANCEL_CLASS_NAME}`, draggableHandle: draggableHandleClassName
+                ? `.${draggableHandleClassName}`
+                : null, 
             // Default callbacks
             onDragStart: callbacks.onDragStart, onDrag: callbacks.onDrag, onDragStop: callbacks.onDragStop, onResizeStart: callbacks.onResizeStart, onResize: callbacks.onResize, onResizeStop: callbacks.onResizeStop, 
             // External Drag N Drop options
-            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem: hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured: isDragCaptured, isDroppable: Boolean(outerDnDEnable) && editMode }),
+            onDragTargetRestore: callbacks.onDragTargetRestore, onDropDragOver: callbacks.onDropDragOver, onDrop: callbacks.onDrop, hasSharedDragItem, sharedDragPosition: currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.cursorPosition, isDragCaptured, isDroppable: Boolean(outerDnDEnable) && editMode })),
             renderItems.map((item, i) => {
                 const keyId = item.id;
                 const isDragging = this.state.isDragging;
-                const isCurrentDraggedItem = (currentDraggingElement === null || currentDraggingElement === void 0 ? void 0 : currentDraggingElement.item.id) === keyId;
+                const isCurrentDraggedItem = currentDraggingElement &&
+                    'id' in currentDraggingElement.item &&
+                    currentDraggingElement.item.id === keyId;
                 const isDraggedOut = isCurrentDraggedItem && this.state.isDraggedOut;
                 const itemNoOverlay = hasOwnGroupProperties && 'noOverlay' in properties
                     ? properties.noOverlay
                     : noOverlay;
-                return (React.createElement(GridItem, { forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), key: keyId, id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties, onItemFocus: onItemFocus, onItemBlur: onItemBlur }));
+                return (React.createElement(GridItem, Object.assign({ key: keyId }, {
+                    forwardedPluginRef: this.getMemoForwardRefCallback(offset + i),
+                    id: keyId,
+                    item,
+                    layout,
+                    adjustWidgetLayout: this.adjustWidgetLayout,
+                    isDragging,
+                    isDraggedOut,
+                    noOverlay: itemNoOverlay,
+                    focusable,
+                    withCustomHandle: Boolean(draggableHandleClassName),
+                    onItemMountChange,
+                    onItemRender,
+                    gridLayout: properties,
+                    onItemFocus,
+                    onItemBlur,
+                })));
             }),
             this.renderTemporaryPlaceholder(properties)));
     }
@@ -472,7 +515,7 @@ class GridLayout extends React.PureComponent {
                 defaultRenderLayout.push(item);
             }
             return memo;
-        }, []);
+        }, {});
         const itemsByGroup = this.context.configItems.reduce((memo, item) => {
             const group = layoutMap[item.id];
             if (group) {