@gravity-ui/dashkit 9.3.2 → 10.0.0

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FOCUSED_CLASS_NAME } from "../../constants/index.js";
 import { DashKitContext } from "../../context/index.js";
 import { cn } from "../../utils/cn.js";
@@ -9,6 +8,8 @@ import "./GridItem.css";
 const b = cn('dashkit-grid-item');
 class WindowFocusObserver {
     constructor() {
+        this.subscribers = 0;
+        this.isFocused = !document.hidden;
         this.blurHandler = (e) => {
             if (e.target === window) {
                 this.isFocused = false;
@@ -19,8 +20,6 @@ class WindowFocusObserver {
                 this.isFocused = true;
             }
         };
-        this.subscribers = 0;
-        this.isFocused = !document.hidden;
         window.addEventListener('blur', this.blurHandler, true);
         window.addEventListener('focus', this.focusHandler, true);
     }
@@ -38,22 +37,20 @@ class GridItem extends React.PureComponent {
     constructor() {
         super(...arguments);
         this._isAsyncItem = false;
+        this.controller = null;
         this.state = {
             isFocused: false,
         };
         this.onOverlayItemClick = () => {
             // Creating button element to trigger focus out
             const focusDummy = document.createElement('button');
-            const styles = {
+            Object.assign(focusDummy.style, {
                 width: '0',
                 height: '0',
                 opacity: '0',
                 position: 'fixed',
                 top: '0',
                 left: '0',
-            };
-            Object.entries(styles).forEach(([key, value]) => {
-                focusDummy.style[key] = value;
             });
             // requestAnimationFrame to make call after alert() or confirm()
             requestAnimationFrame(() => {
@@ -102,7 +99,7 @@ class GridItem extends React.PureComponent {
         const { item, focusable } = this.props;
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: b('overlay') }),
-            React.createElement(OverlayControls, { configItem: item, onItemClick: focusable ? this.onOverlayItemClick : null })));
+            React.createElement(OverlayControls, { configItem: item, onItemClick: focusable ? this.onOverlayItemClick : undefined })));
     }
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
@@ -110,15 +107,12 @@ class GridItem extends React.PureComponent {
         const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, isDraggedOut, noOverlay, focusable, withCustomHandle, isPlaceholder = false, } = this.props;
         const { editMode } = this.context;
         const { isFocused } = this.state;
-        const width = Number.parseInt(style.width, 10);
-        const height = Number.parseInt(style.height, 10);
-        const transform = style.transform;
+        const width = (style === null || style === void 0 ? void 0 : style.width) === undefined ? undefined : Number.parseInt(String(style.width), 10);
+        const height = (style === null || style === void 0 ? void 0 : style.height) === undefined ? undefined : Number.parseInt(String(style.height), 10);
+        const transform = style === null || style === void 0 ? void 0 : style.transform;
         const preparedClassName = (editMode
             ? className
-            : className
-                .replace('react-resizable', '')
-                .replace('react-draggable', '')
-                .replace(FOCUSED_CLASS_NAME, '')) +
+            : className === null || className === void 0 ? void 0 : className.replace('react-resizable', '').replace('react-draggable', '').replace(FOCUSED_CLASS_NAME, '')) +
             (isFocused ? ` ${FOCUSED_CLASS_NAME}` : '');
         const computedClassName = b({
             'is-dragging': isDragging,
@@ -145,33 +139,6 @@ class GridItem extends React.PureComponent {
             preparedChildren));
     }
 }
-GridItem.propTypes = {
-    adjustWidgetLayout: PropTypes.func.isRequired,
-    gridLayout: PropTypes.object,
-    id: PropTypes.string,
-    item: PropTypes.object,
-    isDragging: PropTypes.bool,
-    isDraggedOut: PropTypes.bool,
-    layout: PropTypes.array,
-    forwardedRef: PropTypes.any,
-    forwardedPluginRef: PropTypes.any,
-    isPlaceholder: PropTypes.bool,
-    onItemMountChange: PropTypes.func,
-    onItemRender: PropTypes.func,
-    // from react-grid-layout:
-    children: PropTypes.node,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    noOverlay: PropTypes.bool,
-    focusable: PropTypes.bool,
-    withCustomHandle: PropTypes.bool,
-    onMouseDown: PropTypes.func,
-    onMouseUp: PropTypes.func,
-    onTouchEnd: PropTypes.func,
-    onTouchStart: PropTypes.func,
-    onItemFocus: PropTypes.func,
-    onItemBlur: PropTypes.func,
-};
 GridItem.contextType = DashKitContext;
 const GridItemForwarderRef = React.forwardRef((props, ref) => {
     return React.createElement(GridItem, Object.assign({}, props, { forwardedRef: ref }));

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

@@ -1 +1 @@
-{"version":3,"file":"GridItem.js","sourceRoot":"../../../../src","sources":["components/GridItem/GridItem.js"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport PropTypes from 'prop-types';\n\nimport {FOCUSED_CLASS_NAME} from '../../constants';\nimport {DashKitContext} from '../../context';\nimport {cn} from '../../utils/cn';\nimport Item from '../Item/Item';\nimport OverlayControls from '../OverlayControls/OverlayControls';\n\nimport './GridItem.scss';\n\nconst b = cn('dashkit-grid-item');\n\nclass WindowFocusObserver {\n    constructor() {\n        this.subscribers = 0;\n        this.isFocused = !document.hidden;\n\n        window.addEventListener('blur', this.blurHandler, true);\n        window.addEventListener('focus', this.focusHandler, true);\n    }\n\n    blurHandler = (e) => {\n        if (e.target === window) {\n            this.isFocused = false;\n        }\n    };\n\n    focusHandler = (e) => {\n        if (e.target === window) {\n            this.isFocused = true;\n        }\n    };\n\n    // Method to get state after all blur\\focus events in document are triggered\n    async getFocusedState() {\n        return new Promise((resolve) => {\n            requestAnimationFrame(() => {\n                resolve(this.isFocused);\n            });\n        });\n    }\n}\n\nconst windowFocusObserver = new WindowFocusObserver();\n\nclass GridItem extends React.PureComponent {\n    static propTypes = {\n        adjustWidgetLayout: PropTypes.func.isRequired,\n        gridLayout: PropTypes.object,\n        id: PropTypes.string,\n        item: PropTypes.object,\n        isDragging: PropTypes.bool,\n        isDraggedOut: PropTypes.bool,\n        layout: PropTypes.array,\n\n        forwardedRef: PropTypes.any,\n        forwardedPluginRef: PropTypes.any,\n        isPlaceholder: PropTypes.bool,\n\n        onItemMountChange: PropTypes.func,\n        onItemRender: PropTypes.func,\n\n        // from react-grid-layout:\n        children: PropTypes.node,\n        className: PropTypes.string,\n        style: PropTypes.object,\n        noOverlay: PropTypes.bool,\n        focusable: PropTypes.bool,\n        withCustomHandle: PropTypes.bool,\n        onMouseDown: PropTypes.func,\n        onMouseUp: PropTypes.func,\n        onTouchEnd: PropTypes.func,\n        onTouchStart: PropTypes.func,\n        onItemFocus: PropTypes.func,\n        onItemBlur: PropTypes.func,\n    };\n\n    static contextType = DashKitContext;\n\n    _isAsyncItem = false;\n\n    state = {\n        isFocused: false,\n    };\n\n    renderOverlay() {\n        const {isPlaceholder} = this.props;\n        const {editMode} = this.context;\n\n        if (editMode && this.props.item.data._editActive) {\n            // needed for correst pointer-events: none work in firefox\n            return <div className={b('overlay-placeholder')} />;\n        }\n\n        if (!editMode || this.props.item.data._editActive || isPlaceholder) {\n            return null;\n        }\n\n        const {item, focusable} = this.props;\n\n        return (\n            <React.Fragment>\n                <div className={b('overlay')} />\n                <OverlayControls\n                    configItem={item}\n                    onItemClick={focusable ? this.onOverlayItemClick : null}\n                />\n            </React.Fragment>\n        );\n    }\n\n    onOverlayItemClick = () => {\n        // Creating button element to trigger focus out\n        const focusDummy = document.createElement('button');\n        const styles = {\n            width: '0',\n            height: '0',\n            opacity: '0',\n            position: 'fixed',\n            top: '0',\n            left: '0',\n        };\n\n        Object.entries(styles).forEach(([key, value]) => {\n            focusDummy.style[key] = value;\n        });\n\n        // requestAnimationFrame to make call after alert() or confirm()\n        requestAnimationFrame(() => {\n            // Adding elment an changing focus\n            document.body.appendChild(focusDummy);\n            focusDummy.focus();\n            document.body.removeChild(focusDummy);\n\n            this.setState({isFocused: false});\n        });\n    };\n\n    onFocusHandler = () => {\n        this.setState({isFocused: true});\n\n        if (this.props.onItemFocus) {\n            // Sync focus and blur handlers\n            windowFocusObserver.getFocusedState().then(() => {\n                this.props.onItemFocus?.(this.props.item);\n            });\n        }\n\n        if (this.controller) {\n            this.controller.abort();\n        }\n    };\n\n    onBlurHandler = () => {\n        this.controller = new AbortController();\n\n        windowFocusObserver.getFocusedState().then((isWindowFocused) => {\n            if (!this.controller?.signal.aborted && isWindowFocused) {\n                this.setState({isFocused: false});\n                this.props.onItemBlur?.(this.props.item);\n            }\n\n            this.controller = null;\n        });\n    };\n\n    render() {\n        // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable\n        // https://github.com/STRML/react-grid-layout/issues/721\n        const {\n            style,\n            onMouseDown,\n            onMouseUp,\n            onTouchEnd,\n            onTouchStart,\n            children,\n            className,\n            isDragging,\n            isDraggedOut,\n            noOverlay,\n            focusable,\n            withCustomHandle,\n            isPlaceholder = false,\n        } = this.props;\n        const {editMode} = this.context;\n        const {isFocused} = this.state;\n\n        const width = Number.parseInt(style.width, 10);\n        const height = Number.parseInt(style.height, 10);\n        const transform = style.transform;\n        const preparedClassName =\n            (editMode\n                ? className\n                : className\n                      .replace('react-resizable', '')\n                      .replace('react-draggable', '')\n                      .replace(FOCUSED_CLASS_NAME, '')) +\n            (isFocused ? ` ${FOCUSED_CLASS_NAME}` : '');\n        const computedClassName = b(\n            {\n                'is-dragging': isDragging,\n                'is-dragged-out': isDraggedOut,\n                'is-focused': isFocused,\n                'with-custom-handle': withCustomHandle,\n            },\n            preparedClassName,\n        );\n\n        const preparedChildren = editMode ? children : null;\n        const reactGridLayoutProps = editMode\n            ? {onMouseDown, onMouseUp, onTouchEnd, onTouchStart}\n            : {};\n        const reactFocusProps = focusable\n            ? {\n                  onFocus: this.onFocusHandler,\n                  onBlur: this.onBlurHandler,\n                  tabIndex: -1,\n              }\n            : {};\n        const {_editActive} = this.props.item.data;\n\n        return (\n            <div\n                className={computedClassName}\n                data-qa=\"dashkit-grid-item\"\n                style={style}\n                ref={this.props.forwardedRef}\n                {...reactGridLayoutProps}\n                {...reactFocusProps}\n            >\n                <div className={b('item', {editMode: editMode && !_editActive && !noOverlay})}>\n                    <Item\n                        id={this.props.id}\n                        item={this.props.item}\n                        shouldItemUpdate={!isDragging}\n                        width={width}\n                        height={height}\n                        transform={transform}\n                        isPlaceholder={isPlaceholder}\n                        adjustWidgetLayout={this.props.adjustWidgetLayout}\n                        layout={this.props.layout}\n                        forwardedPluginRef={this.props.forwardedPluginRef}\n                        onItemMountChange={this.props.onItemMountChange}\n                        onItemRender={this.props.onItemRender}\n                        gridLayout={this.props.gridLayout}\n                    />\n                </div>\n                {!noOverlay && this.renderOverlay()}\n                {preparedChildren}\n            </div>\n        );\n    }\n}\n\nconst GridItemForwarderRef = React.forwardRef((props, ref) => {\n    return <GridItem {...props} forwardedRef={ref} />;\n});\n\nGridItemForwarderRef.displayName = 'forwardRef(GridItem)';\n\nexport default GridItemForwarderRef;\n"]}
+{"version":3,"file":"GridItem.js","sourceRoot":"../../../../src","sources":["components/GridItem/GridItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {FOCUSED_CLASS_NAME} from '../../constants';\nimport {DashKitContext} from '../../context';\nimport type {ConfigItem, ConfigLayout} from '../../shared';\nimport type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from '../../typings';\nimport {cn} from '../../utils/cn';\nimport type {DashKitProps} from '../DashKit';\nimport Item from '../Item/Item';\nimport OverlayControls from '../OverlayControls/OverlayControls';\n\nimport './GridItem.scss';\n\nconst b = cn('dashkit-grid-item');\n\nclass WindowFocusObserver {\n    subscribers = 0;\n    isFocused = !document.hidden;\n\n    constructor() {\n        window.addEventListener('blur', this.blurHandler, true);\n        window.addEventListener('focus', this.focusHandler, true);\n    }\n\n    blurHandler = (e: FocusEvent) => {\n        if (e.target === window) {\n            this.isFocused = false;\n        }\n    };\n\n    focusHandler = (e: FocusEvent) => {\n        if (e.target === window) {\n            this.isFocused = true;\n        }\n    };\n\n    // Method to get state after all blur\\focus events in document are triggered\n    async getFocusedState(): Promise<boolean> {\n        return new Promise((resolve) => {\n            requestAnimationFrame(() => {\n                resolve(this.isFocused);\n            });\n        });\n    }\n}\n\nconst windowFocusObserver = new WindowFocusObserver();\n\ntype GridItemProps = {\n    adjustWidgetLayout: PluginWidgetProps['adjustWidgetLayout'];\n    gridLayout?: ReactGridLayoutProps;\n    id: string;\n    item: ConfigItem;\n    isDragging?: boolean;\n    isDraggedOut?: boolean;\n    layout: ConfigLayout[];\n\n    forwardedRef?: React.Ref<HTMLDivElement>;\n    forwardedPluginRef?: (pluginRef: PluginRef) => void;\n    isPlaceholder?: boolean;\n\n    onItemMountChange?: DashKitProps['onItemMountChange'];\n    onItemRender?: DashKitProps['onItemRender'];\n\n    // from react-grid-layout:\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    noOverlay?: boolean;\n    focusable?: boolean;\n    withCustomHandle?: boolean;\n    onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;\n    onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;\n    onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;\n    onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;\n    onItemFocus?: DashKitProps['onItemFocus'];\n    onItemBlur?: DashKitProps['onItemBlur'];\n};\n\ntype GridItemState = {\n    isFocused: boolean;\n};\n\nclass GridItem extends React.PureComponent<GridItemProps, GridItemState> {\n    static contextType = DashKitContext;\n    context!: React.ContextType<typeof DashKitContext>;\n\n    _isAsyncItem = false;\n    controller: AbortController | null = null;\n\n    state: GridItemState = {\n        isFocused: false,\n    };\n\n    renderOverlay() {\n        const {isPlaceholder} = this.props;\n        const {editMode} = this.context;\n\n        if (editMode && this.props.item.data._editActive) {\n            // needed for correst pointer-events: none work in firefox\n            return <div className={b('overlay-placeholder')} />;\n        }\n\n        if (!editMode || this.props.item.data._editActive || isPlaceholder) {\n            return null;\n        }\n\n        const {item, focusable} = this.props;\n\n        return (\n            <React.Fragment>\n                <div className={b('overlay')} />\n                <OverlayControls\n                    configItem={item}\n                    onItemClick={focusable ? this.onOverlayItemClick : undefined}\n                />\n            </React.Fragment>\n        );\n    }\n\n    onOverlayItemClick = () => {\n        // Creating button element to trigger focus out\n        const focusDummy = document.createElement('button');\n        Object.assign(focusDummy.style, {\n            width: '0',\n            height: '0',\n            opacity: '0',\n            position: 'fixed',\n            top: '0',\n            left: '0',\n        });\n\n        // requestAnimationFrame to make call after alert() or confirm()\n        requestAnimationFrame(() => {\n            // Adding elment an changing focus\n            document.body.appendChild(focusDummy);\n            focusDummy.focus();\n            document.body.removeChild(focusDummy);\n\n            this.setState({isFocused: false});\n        });\n    };\n\n    onFocusHandler = () => {\n        this.setState({isFocused: true});\n\n        if (this.props.onItemFocus) {\n            // Sync focus and blur handlers\n            windowFocusObserver.getFocusedState().then(() => {\n                this.props.onItemFocus?.(this.props.item);\n            });\n        }\n\n        if (this.controller) {\n            this.controller.abort();\n        }\n    };\n\n    onBlurHandler = () => {\n        this.controller = new AbortController();\n\n        windowFocusObserver.getFocusedState().then((isWindowFocused) => {\n            if (!this.controller?.signal.aborted && isWindowFocused) {\n                this.setState({isFocused: false});\n                this.props.onItemBlur?.(this.props.item);\n            }\n\n            this.controller = null;\n        });\n    };\n\n    render() {\n        // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable\n        // https://github.com/STRML/react-grid-layout/issues/721\n        const {\n            style,\n            onMouseDown,\n            onMouseUp,\n            onTouchEnd,\n            onTouchStart,\n            children,\n            className,\n            isDragging,\n            isDraggedOut,\n            noOverlay,\n            focusable,\n            withCustomHandle,\n            isPlaceholder = false,\n        } = this.props;\n        const {editMode} = this.context;\n        const {isFocused} = this.state;\n\n        const width =\n            style?.width === undefined ? undefined : Number.parseInt(String(style.width), 10);\n        const height =\n            style?.height === undefined ? undefined : Number.parseInt(String(style.height), 10);\n        const transform = style?.transform;\n        const preparedClassName =\n            (editMode\n                ? className\n                : className\n                      ?.replace('react-resizable', '')\n                      .replace('react-draggable', '')\n                      .replace(FOCUSED_CLASS_NAME, '')) +\n            (isFocused ? ` ${FOCUSED_CLASS_NAME}` : '');\n        const computedClassName = b(\n            {\n                'is-dragging': isDragging,\n                'is-dragged-out': isDraggedOut,\n                'is-focused': isFocused,\n                'with-custom-handle': withCustomHandle,\n            },\n            preparedClassName,\n        );\n\n        const preparedChildren = editMode ? children : null;\n        const reactGridLayoutProps = editMode\n            ? {onMouseDown, onMouseUp, onTouchEnd, onTouchStart}\n            : {};\n        const reactFocusProps = focusable\n            ? {\n                  onFocus: this.onFocusHandler,\n                  onBlur: this.onBlurHandler,\n                  tabIndex: -1,\n              }\n            : {};\n        const {_editActive} = this.props.item.data;\n\n        return (\n            <div\n                className={computedClassName}\n                data-qa=\"dashkit-grid-item\"\n                style={style}\n                ref={this.props.forwardedRef}\n                {...reactGridLayoutProps}\n                {...reactFocusProps}\n            >\n                <div className={b('item', {editMode: editMode && !_editActive && !noOverlay})}>\n                    <Item\n                        id={this.props.id}\n                        item={this.props.item}\n                        shouldItemUpdate={!isDragging}\n                        width={width}\n                        height={height}\n                        transform={transform}\n                        isPlaceholder={isPlaceholder}\n                        adjustWidgetLayout={this.props.adjustWidgetLayout}\n                        layout={this.props.layout}\n                        forwardedPluginRef={this.props.forwardedPluginRef}\n                        onItemMountChange={this.props.onItemMountChange}\n                        onItemRender={this.props.onItemRender}\n                        gridLayout={this.props.gridLayout}\n                    />\n                </div>\n                {!noOverlay && this.renderOverlay()}\n                {preparedChildren}\n            </div>\n        );\n    }\n}\n\nconst GridItemForwarderRef = React.forwardRef<HTMLDivElement, Omit<GridItemProps, 'forwardedRef'>>(\n    (props, ref) => {\n        return <GridItem {...props} forwardedRef={ref} />;\n    },\n);\n\nGridItemForwarderRef.displayName = 'forwardRef(GridItem)';\n\nexport default GridItemForwarderRef;\n"]}

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

@@ -1,73 +1,63 @@
-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 { DragOverEvent } from 'react-grid-layout';
+import type { PluginRef, PluginWidgetProps, ReactGridLayoutProps } from 'src/typings';
+import type { DashKitCtxShape } from "../../context/index.js";
+import type { ConfigItem, ConfigLayout } from "../../shared/index.js";
+import type { 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: PluginWidgetProps['adjustWidgetLayout'];
+    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: DragOverEvent) => {
+        w?: number;
+        h?: number;
+    } | false | undefined;
+    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,14 @@ 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 (value !== null &&
+        '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 +19,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 +80,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 +224,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 +246,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 +268,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 +302,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 +348,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;
@@ -431,13 +451,13 @@ class GridLayout extends React.PureComponent {
         }
         const { callbacks, layout } = this.getMemoGroupProps(group, renderLayout, properties);
         const hasSharedDragItem = Boolean(currentDraggingElement && currentDraggingElement.group !== group);
-        const isDragCaptured = currentDraggingElement &&
+        const isDragCaptured = Boolean(currentDraggingElement &&
             group === currentDraggingElement.group &&
             draggedOverGroup !== null &&
-            draggedOverGroup !== group;
-        return (React.createElement(Layout, Object.assign({ isDraggable: editMode, isResizable: editMode }, properties, { key: `group_${group}`, 
+            draggedOverGroup !== group);
+        return (React.createElement(Layout, Object.assign({ key: `group_${group}`, isDraggable: editMode, isResizable: editMode }, properties, { 
             // Layout props
-            compactType: compactType, layout: layout, draggableCancel: `.${DRAGGABLE_CANCEL_CLASS_NAME}`, draggableHandle: draggableHandleClassName ? `.${draggableHandleClassName}` : null, 
+            compactType: compactType, layout: layout, draggableCancel: `.${DRAGGABLE_CANCEL_CLASS_NAME}`, draggableHandle: draggableHandleClassName ? `.${draggableHandleClassName}` : undefined, 
             // 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
@@ -445,12 +465,14 @@ class GridLayout extends React.PureComponent {
             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, { key: keyId, forwardedPluginRef: this.getMemoForwardRefCallback(offset + i), id: keyId, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: isDragging, isDraggedOut: isDraggedOut || undefined, noOverlay: itemNoOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), onItemMountChange: onItemMountChange, onItemRender: onItemRender, gridLayout: properties, onItemFocus: onItemFocus, onItemBlur: onItemBlur }));
             }),
             this.renderTemporaryPlaceholder(properties)));
     }
@@ -472,7 +494,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) {