Typings refactoring

src/components/DashKit/DashKit.tsx

@@ -58,7 +58,7 @@
         groups?: DashKitGroup[];
     }) => void;
 
-    onDrop?: (dropProps: ItemDropProps) => void;
+    onDrop: (dropProps: ItemDropProps) => void;
 
     onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void;
     onItemRender?: (item: ConfigItem) => void;
@@ -96,7 +96,7 @@
         defaultProps: defaultGridProps,
         groups: groups.reduce<Record<string, GridReflowOptions>>((memo, g) => {
             const groupId = g.id || DEFAULT_GROUP;
             memo[groupId] = g.gridProperties
                 ? getReflowProps(g.gridProperties(defaultGridProps))
                 : defaultGridProps;
 

src/components/GridItem/GridItem.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import {FOCUSED_CLASS_NAME} from '../../constants';
 import {DashKitContext} from '../../context';
 import type {ConfigItem, ConfigLayout} from '../../shared';
-import type {PluginRef, ReactGridLayoutProps} from '../../typings';
+import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from '../../typings';
 import {cn} from '../../utils/cn';
+import type {DashKitProps} from '../DashKit';
 import Item from '../Item/Item';
 import OverlayControls from '../OverlayControls/OverlayControls';
 
@@ -46,11 +47,7 @@ class WindowFocusObserver {
 const windowFocusObserver = new WindowFocusObserver();
 
 type GridItemProps = {
-    adjustWidgetLayout: (data: {
-        widgetId: string;
-        needSetDefault?: boolean;
-        adjustedWidgetLayout?: ConfigLayout;
-    }) => void;
+    adjustWidgetLayout: PluginWidgetProps['adjustWidgetLayout'];
     gridLayout?: ReactGridLayoutProps;
     id: string;
     item: ConfigItem;
@@ -62,8 +59,8 @@ type GridItemProps = {
     forwardedPluginRef?: (pluginRef: PluginRef) => void;
     isPlaceholder?: boolean;
 
-    onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void;
-    onItemRender?: (item: ConfigItem) => void;
+    onItemMountChange?: DashKitProps['onItemMountChange'];
+    onItemRender?: DashKitProps['onItemRender'];
 
     // from react-grid-layout:
     children?: React.ReactNode;
@@ -76,8 +73,8 @@ type GridItemProps = {
     onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;
     onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
-    onItemFocus?: (item: ConfigItem) => void;
-    onItemBlur?: (item: ConfigItem) => void;
+    onItemFocus?: DashKitProps['onItemFocus'];
+    onItemBlur?: DashKitProps['onItemBlur'];
 };
 
 type GridItemState = {

src/components/GridLayout/GridLayout.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {DragOverEvent} from 'react-grid-layout';
 
-import type {PluginRef, ReactGridLayoutProps} from 'src/typings';
+import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from 'src/typings';
 
 import {
     COMPACT_TYPE_HORIZONTAL_NOWRAP,
@@ -18,7 +18,6 @@ import GridItem from '../GridItem/GridItem';
 
 import {Layout} from './ReactGridLayout';
 import type {
-    AdjustWidgetLayoutParams,
     CurrentDraggingElement,
     GridLayoutProps,
     GridLayoutState,
@@ -93,11 +92,11 @@ export default class GridLayout extends React.PureComponent<GridLayoutProps, Gri
         });
     };
 
-    adjustWidgetLayout = ({
+    adjustWidgetLayout: PluginWidgetProps['adjustWidgetLayout'] = ({
         widgetId,
         needSetDefault,
         adjustedWidgetLayout,
-    }: AdjustWidgetLayoutParams) => {
+    }) => {
         const {layout, memorizeOriginalLayout, revertToOriginalLayout} = this.context;
 
         if (needSetDefault) {

src/components/GridLayout/types.ts

@@ -67,12 +67,6 @@ export type GroupCallbacks = {
     onDragTargetRestore: (group?: string) => void;
 };
 
-export type AdjustWidgetLayoutParams = {
-    widgetId: string;
-    needSetDefault?: boolean;
-    adjustedWidgetLayout?: ConfigLayout;
-};
-
 export type LayoutAndPropsByGroup = {
     properties: Partial<ReactGridLayoutProps>;
     layout: ConfigLayout[];

src/components/Item/Item.tsx

@@ -13,7 +13,6 @@ const b = cn('dashkit-item');
 const Item: React.FC<ItemProps> = ({
     registerManager,
     rendererProps,
-    type,
     isPlaceholder,
     forwardedPluginRef,
     onItemRender,
@@ -27,6 +26,7 @@ const Item: React.FC<ItemProps> = ({
     const onItemMountChangeRef = React.useRef(onItemMountChange);
 
     itemRef.current = item;
+    const {type} = item;
     onItemRenderRef.current = onItemRender;
     onItemMountChangeRef.current = onItemMountChange;
 

src/components/Item/types.ts

@@ -1,22 +1,16 @@
 import type {ConfigItem, ItemParams} from '../../shared/types';
 import type {PluginRef, PluginWidgetProps} from '../../typings';
 import type {RegisterManager} from '../../utils/register-manager';
+import type {DashKitProps} from '../DashKit';
 
-export type RendererProps = Omit<
-    PluginWidgetProps<ItemParams>,
-    'onBeforeLoad' | 'width' | 'height'
-> & {
-    width?: number;
-    height?: number;
-};
+export type RendererProps = Omit<PluginWidgetProps<ItemParams>, 'onBeforeLoad'>;
 
 export type ItemProps = {
     forwardedPluginRef?: (ref: PluginRef) => void;
     isPlaceholder?: boolean;
     item: ConfigItem;
     registerManager: RegisterManager;
     rendererProps: RendererProps;
-    type: string;
-    onItemRender?: (item: ConfigItem) => void;
-    onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void;
+    onItemRender?: DashKitProps['onItemRender'];
+    onItemMountChange?: DashKitProps['onItemMountChange'];
 };

src/context/DashKitContext.ts

@@ -8,6 +8,7 @@ import type {
     ConfigItem,
     ConfigLayout,
     DraggedOverItem,
+    GlobalParams,
     ItemDragProps,
     ItemParams,
     ItemState,
@@ -16,18 +17,17 @@ import type {
 } from '../shared';
 import type {ContextProps, PluginRef, ReactGridLayoutProps, SettingsProps} from '../typings';
 
-type DashkitPropsPassedToCtx = Pick<
+export type DashkitPropsPassedToCtx = Pick<
     DashKitProps,
     | 'config'
     | 'groups'
-    | 'context'
     | 'noOverlay'
     | 'focusable'
-    | 'globalParams'
     | 'editMode'
-    | 'settings'
     | 'onItemMountChange'
     | 'onItemRender'
+    | 'onItemFocus'
+    | 'onItemBlur'
     | 'draggableHandleClassName'
     // default handlers bypass
     | 'onDragStart'
@@ -43,9 +43,10 @@ export type TemporaryLayout = {
     dragProps: ItemDragProps;
 };
 
-export type DashKitCtxShape = Omit<DashkitPropsPassedToCtx, 'context' | 'settings'> & {
+export type DashKitCtxShape = DashkitPropsPassedToCtx & {
     context: ContextProps;
     settings: SettingsProps;
+    globalParams: GlobalParams;
 
     registerManager: RegisterManager;
     forwardedMetaRef: React.ForwardedRef<any>;
@@ -83,8 +84,6 @@ export type DashKitCtxShape = Omit<DashkitPropsPassedToCtx, 'context' | 'setting
         groupLayout: ConfigLayout[],
         sharedItem?: DraggedOverItem,
     ) => {w?: number; h?: number} | false | undefined;
-    onItemBlur?: (item: ConfigItem) => void;
-    onItemFocus?: (item: ConfigItem) => void;
     outerDnDEnable: boolean;
     dragOverPlugin: null | RegisterManagerPlugin;
 };

src/hocs/prepareItem.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 
 import isEqual from 'lodash/isEqual';
 
+import type {DashKitProps} from '../components/DashKit';
 import type {ItemProps, RendererProps} from '../components/Item/types';
 import {DashKitContext} from '../context';
 import type {ConfigItem, ConfigLayout} from '../shared';
-import type {
-    ItemStateAndParams,
-    ItemStateAndParamsChangeOptions,
-} from '../shared/types/state-and-params';
 import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from '../typings';
 
 type PrepareItemProps = {
@@ -23,8 +20,8 @@ type PrepareItemProps = {
     transform?: string;
     isPlaceholder?: boolean;
 
-    onItemRender?: (item: ConfigItem) => void;
-    onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void;
+    onItemRender?: DashKitProps['onItemRender'];
+    onItemMountChange?: DashKitProps['onItemMountChange'];
 
     forwardedPluginRef?: (ref: PluginRef) => void;
 };
@@ -50,9 +47,9 @@ export function prepareItem(
             );
         }
 
-        _onStateAndParamsChange = (
-            stateAndParams: ItemStateAndParams,
-            options?: ItemStateAndParamsChangeOptions,
+        _onStateAndParamsChange: PluginWidgetProps['onStateAndParamsChange'] = (
+            stateAndParams,
+            options,
         ) => {
             this.context.onItemStateAndParamsChange(this.props.id, stateAndParams, options);
         };
@@ -101,14 +98,12 @@ export function prepareItem(
             const {item, isPlaceholder, forwardedPluginRef, onItemMountChange, onItemRender} =
                 this.props;
             const {registerManager} = this.context;
-            const {type} = item;
 
             return (
                 <WrappedComponent
                     forwardedPluginRef={forwardedPluginRef}
                     rendererProps={this.getRenderProps()}
                     registerManager={registerManager}
-                    type={type}
                     isPlaceholder={isPlaceholder}
                     onItemMountChange={onItemMountChange}
                     onItemRender={onItemRender}

src/hocs/withContext.tsx

@@ -3,10 +3,7 @@ import React from 'react';
 import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 
-import type {
-    OverlayControlItem,
-    PreparedCopyItemOptions,
-} from '../components/OverlayControls/OverlayControls';
+import type {DashKitProps} from '../components/DashKit';
 import {
     COMPACT_TYPE_HORIZONTAL_NOWRAP,
     DEFAULT_GROUP,
@@ -15,67 +12,43 @@ import {
     TEMPORARY_ITEM_ID,
 } from '../constants/common';
 import {DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext} from '../context';
-import type {DashKitCtxShape, OverlayControlsCtxShape, TemporaryLayout} from '../context';
-import {useDeepEqualMemo} from '../hooks/useDeepEqualMemo';
 import type {
-    Config,
-    ConfigItem,
-    ConfigLayout,
-    GlobalParams,
-    ItemDropProps,
-    ItemsStateAndParams,
-} from '../shared';
+    DashKitCtxShape,
+    DashkitPropsPassedToCtx,
+    OverlayControlsCtxShape,
+    TemporaryLayout,
+} from '../context';
+import {useDeepEqualMemo} from '../hooks/useDeepEqualMemo';
+import type {ConfigLayout} from '../shared';
 import {getAllConfigItems, getItemsParams, getItemsState} from '../shared';
-import type {
-    ContextProps,
-    DashKitGroup,
-    ItemManipulationCallback,
-    MenuItem,
-    PluginRef,
-    SettingsProps,
-} from '../typings';
+import type {PluginRef} from '../typings';
 import type {RegisterManager, RegisterManagerPlugin} from '../utils';
 import {UpdateManager, resolveLayoutGroup} from '../utils';
 
 const ITEM_PROPS = ['i', 'h', 'w', 'x', 'y', 'parent'] as const;
 
-export type DashKitWithContextProps = {
-    config: Config;
-    itemsStateAndParams: ItemsStateAndParams;
-    groups?: DashKitGroup[];
-    onChange: (data: {
-        config: Config;
-        itemsStateAndParams: ItemsStateAndParams;
-        groups?: DashKitGroup[];
-    }) => void;
-    layout: ConfigLayout[];
-    registerManager: RegisterManager;
-    defaultGlobalParams: GlobalParams;
-    globalParams: GlobalParams;
-    onItemEdit: (item: ConfigItem) => void;
-    context: ContextProps;
-    noOverlay: boolean;
-    focusable?: boolean;
-    settings: SettingsProps;
-    onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void;
-    onItemRender?: (item: ConfigItem) => void;
-    forwardedMetaRef: React.ForwardedRef<any>;
-    draggableHandleClassName?: string;
-    onDrop?: (dropProps: ItemDropProps) => void;
-    overlayControls?: Record<string, OverlayControlItem[]> | null;
-    overlayMenuItems?: MenuItem[] | null;
-    getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
-    onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
-    editMode: boolean;
-    onItemFocus?: (item: ConfigItem) => void;
-    onItemBlur?: (item: ConfigItem) => void;
-    onDragStart?: ItemManipulationCallback;
-    onDrag?: ItemManipulationCallback;
-    onDragStop?: ItemManipulationCallback;
-    onResizeStart?: ItemManipulationCallback;
-    onResize?: ItemManipulationCallback;
-    onResizeStop?: ItemManipulationCallback;
-};
+export type DashKitWithContextProps = DashkitPropsPassedToCtx &
+    Pick<
+        DashKitProps,
+        'overlayControls' | 'overlayMenuItems' | 'getPreparedCopyItemOptions' | 'onCopyFulfill'
+    > &
+    Required<
+        Pick<
+            DashKitProps,
+            | 'itemsStateAndParams'
+            | 'defaultGlobalParams'
+            | 'globalParams'
+            | 'context'
+            | 'settings'
+            | 'onItemEdit'
+            | 'onChange'
+            | 'onDrop'
+        >
+    > & {
+        layout: ConfigLayout[];
+        registerManager: RegisterManager;
+        forwardedMetaRef: React.ForwardedRef<any>;
+    };
 
 type OriginalLayouts = Record<string, ConfigLayout>;
 

src/typings/common.ts

@@ -4,12 +4,31 @@ import type {OverlayCustomControlItem} from '../components/OverlayControls/Overl
 import {MenuItems} from '../constants';
 import {AdditionalWidgetLayout} from '../shared';
 
-export type GridLayoutSettings = ReactGridLayout.ReactGridLayoutProps & {
+export type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
+
+export type ReactGridLayoutProps = Omit<
+    ReactGridLayout.ReactGridLayoutProps,
+    | 'children'
+    | 'compactType'
+    | 'innerRef'
+    | 'key'
+    | 'layout'
+    | 'onDragStart'
+    | 'onDragStop'
+    | 'onResizeStart'
+    | 'onResizeStop'
+    | 'draggableHandle'
+    | 'isDroppable'
+    | 'onDropDragOver'
+    | 'onDrop'
+    | 'draggableCancel'
+> & {
+    compactType?: CompactType;
     noOverlay?: boolean;
 };
 
 export interface Settings {
-    gridLayout?: GridLayoutSettings;
+    gridLayout?: ReactGridLayoutProps;
     theme?: string;
     isMobile?: boolean;
     // @deprecated as it's possibly mutable property use Dashkit overlayMenuItems property instead