feat: extend grid properties

src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx

@@ -31,7 +31,7 @@
     const [editMode, setEditMode] = React.useState(true);
 
     const onClick = () => {
         console.log('click');
     };
 
     const items = React.useMemo(
@@ -93,7 +93,7 @@
     );
     const [config, setConfig] = React.useState(getConfig(true));
 
     const onChange = React.useCallback(({config}: {config: DashKitProps['config']}) => {
         setConfig(config);
     }, []);
 
@@ -112,7 +112,12 @@
                     );
                 },
                 gridProperties: (props: ReactGridLayoutProps) => {
-                    return {...props, compactType: 'horizontal-nowrap', maxRows: MAX_ROWS};
+                    return {
+                        ...props,
+                        compactType: 'horizontal-nowrap',
+                        maxRows: MAX_ROWS,
+                        noOverlay: true,
+                    };
                 },
             },
             {
@@ -134,7 +139,7 @@
 
     const overlayMenuItems = React.useMemo(() => {
         const layoutById = config.layout.reduce<Record<string, ConfigLayout>>((memo, item) => {
             memo[item.i] = item;
             return memo;
         }, {});
         const maxOffset = config.layout

src/components/GridLayout/GridLayout.js

@@ -605,18 +605,16 @@ export default class GridLayout extends React.PureComponent {
 
         return (
             <Layout
+                isDraggable={editMode}
+                isResizable={editMode}
                 // Group properties
                 {...properties}
+                key={`group_${group}`}
                 // Layout props
                 compactType={compactType}
                 layout={layout}
-                key={`group_${group}`}
-                isDraggable={editMode}
-                isResizable={editMode}
                 draggableCancel={`.${DRAGGABLE_CANCEL_CLASS_NAME}`}
-                {...(draggableHandleClassName
-                    ? {draggableHandle: `.${draggableHandleClassName}`}
-                    : null)}
+                draggableHandle={draggableHandleClassName ? `.${draggableHandleClassName}` : null}
                 // Default callbacks
                 onDragStart={callbacks.onDragStart}
                 onDrag={callbacks.onDrag}
@@ -631,27 +629,27 @@ export default class GridLayout extends React.PureComponent {
                 hasSharedDragItem={hasSharedDragItem}
                 sharedDragPosition={currentDraggingElement?.cursorPosition}
                 isDragCaptured={isDragCaptured}
-                {...(outerDnDEnable
-                    ? {
-                          isDroppable: true,
-                      }
-                    : null)}
+                isDroppable={Boolean(outerDnDEnable)}
             >
                 {renderItems.map((item, i) => {
-                    const isCurrentItem = currentDraggingElement?.item.id === item.id;
+                    const keyId = item.id;
+                    const isCurrentItem = currentDraggingElement?.item.id === keyId;
                     const isDraggedOut = isCurrentItem && this.state.draggedOut;
+                    const isDragging = this.state.isDragging;
+                    const itemNoOverlay =
+                        'noOverlay' in properties ? properties.noOverlay : noOverlay;
 
                     return (
                         <GridItem
                             forwardedPluginRef={this.getMemoForwardRefCallback(offset + i)} // forwarded ref to plugin
-                            key={item.id}
-                            id={item.id}
+                            key={keyId}
+                            id={keyId}
                             item={item}
                             layout={layout}
                             adjustWidgetLayout={this.adjustWidgetLayout}
-                            isDragging={this.state.isDragging}
+                            isDragging={isDragging}
                             isDraggedOut={isDraggedOut}
-                            noOverlay={noOverlay}
+                            noOverlay={itemNoOverlay}
                             focusable={focusable}
                             withCustomHandle={Boolean(draggableHandleClassName)}
                             onItemMountChange={onItemMountChange}

src/components/OverlayControls/OverlayControls.tsx

@@ -141,7 +141,7 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
         const onItemClickHandler = typeof handler === 'function' ? handler : noop;
         return (
             <Button
-                key={index}
+                key={`control_${index}`}
                 view={view}
                 size={size}
                 title={title}
@@ -194,6 +194,7 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
 
         return (
             <Button
+                key={'control_default'}
                 view={view}
                 size={size}
                 title={i18n('label_settings')}
@@ -210,13 +211,12 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
         const customLeftControls = this.getCustomLeftOverlayControls();
         const hasCustomOverlayLeftControls = Boolean(customLeftControls.length);
 
-        const defaultControl = this.getDefaultControls();
         const controls = hasCustomOverlayLeftControls
             ? customLeftControls.map(
                   (item: OverlayControlItem, index: number, items: OverlayControlItem[]) =>
                       this.renderControlsItem(item, index, items.length + 1),
               )
-            : defaultControl;
+            : this.getDefaultControls();
 
         const menu = this.renderMenu(controls === null);
 
@@ -319,6 +319,7 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
 
         return (
             <DropdownMenu
+                key={'controls_dropdown'}
                 items={items}
                 renderSwitcher={(props) => (
                     <Button

src/typings/common.ts

@@ -4,8 +4,12 @@ import type {OverlayCustomControlItem} from '../components/OverlayControls/Overl
 import {MenuItems} from '../constants';
 import {AdditionalWidgetLayout} from '../shared';
 
+export type GridLayoutSettings = ReactGridLayout.ReactGridLayoutProps & {
+    noOverlay?: boolean;
+};
+
 export interface Settings {
-    gridLayout?: ReactGridLayout.ReactGridLayoutProps;
+    gridLayout?: GridLayoutSettings;
     theme?: string;
     isMobile?: boolean;
     // @deprecated as it's possibly mutable property use Dashkit overlayMenuItems property instead

src/typings/config.ts

@@ -2,6 +2,8 @@ import type {Layout, Layouts} from 'react-grid-layout';
 
 import type {Config, ConfigItem, ConfigLayout} from '../shared';
 
+import {GridLayoutSettings} from './common';
+
 export interface AddConfigItem extends Omit<ConfigItem, 'id' | 'namespace'> {
     id?: null;
     namespace?: string;
@@ -40,14 +42,12 @@ export interface DashkitGroupRenderProps {
 }
 
 export type ReactGridLayoutProps = Omit<
-    ReactGridLayout.ReactGridLayoutProps,
+    GridLayoutSettings,
     | 'children'
     | 'compactType'
     | 'innerRef'
     | 'key'
     | 'layout'
-    | 'isDraggable'
-    | 'isResizable'
     | 'onDragStart'
     | 'onDragStop'
     | 'onResizeStart'