fix!: global type refactoring

.github/workflows/ci.yaml

@@ -2,9 +2,8 @@ name: CI
 
 on:
   push:
-    branches: [main, v8]
+    branches: [main]
   pull_request:
-    branches: [main, v8]
 
 jobs:
   verify_files:

README-ru.md

@@ -25,7 +25,7 @@ npm i @gravity-ui/dashkit @gravity-ui/uikit
 
 ```ts
 type ItemManipulationCallback = (eventData: {
-    layout: Layouts;
+    layout: Layout[];
     oldItem: Layout;
     newItem: Layout;
     placeholder: Layout;

README.md

@@ -25,7 +25,7 @@ Plugins are required to create custom widgets.
 
 ```ts
 type ItemManipulationCallback = (eventData: {
-    layout: Layouts;
+    layout: Layout[];
     oldItem: Layout;
     newItem: Layout;
     placeholder: Layout;

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;
 
@@ -226,7 +226,7 @@
     }
 
     getItemsMeta() {
-        return this.metaRef.current?.getItemsMeta();
+        return this.metaRef.current?.getItemsMeta() ?? [];
     }
 
     reloadItems(options?: {targetIds?: string[]; force?: boolean}) {

src/components/DashKitView/DashKitView.tsx

@@ -2,20 +2,17 @@ import React from 'react';
 
 import {DashKitContext} from '../../context';
 import {withContext} from '../../hocs/withContext';
+import type {DashKitWithContextProps} from '../../hocs/withContext';
 import {useCalcPropsLayout} from '../../hooks/useCalcLayout';
-import type {RegisterManager} from '../../utils';
 import {cn} from '../../utils/cn';
-import type {DashKitProps} from '../DashKit';
 import GridLayout from '../GridLayout/GridLayout';
 import MobileLayout from '../MobileLayout/MobileLayout';
 
 import './DashKitView.scss';
 
 const b = cn('dashkit');
 
-type DashKitViewProps = DashKitProps & {
-    registerManager: RegisterManager;
-};
+type DashKitViewProps = Omit<DashKitWithContextProps, 'layout' | 'forwardedMetaRef'>;
 
 function DashKitView() {
     const context = React.useContext(DashKitContext);

src/components/GridItem/GridItem.js → src/components/GridItem/GridItem.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
-
 import {FOCUSED_CLASS_NAME} from '../../constants';
 import {DashKitContext} from '../../context';
+import type {ConfigItem, ConfigLayout} from '../../shared';
+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';
 
@@ -13,28 +14,28 @@ import './GridItem.scss';
 const b = cn('dashkit-grid-item');
 
 class WindowFocusObserver {
-    constructor() {
-        this.subscribers = 0;
-        this.isFocused = !document.hidden;
+    subscribers = 0;
+    isFocused = !document.hidden;
 
+    constructor() {
         window.addEventListener('blur', this.blurHandler, true);
         window.addEventListener('focus', this.focusHandler, true);
     }
 
-    blurHandler = (e) => {
+    blurHandler = (e: FocusEvent) => {
         if (e.target === window) {
             this.isFocused = false;
         }
     };
 
-    focusHandler = (e) => {
+    focusHandler = (e: FocusEvent) => {
         if (e.target === window) {
             this.isFocused = true;
         }
     };
 
     // Method to get state after all blur\focus events in document are triggered
-    async getFocusedState() {
+    async getFocusedState(): Promise<boolean> {
         return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 resolve(this.isFocused);
@@ -45,43 +46,49 @@ class WindowFocusObserver {
 
 const windowFocusObserver = new WindowFocusObserver();
 
-class GridItem extends React.PureComponent {
-    static 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,
-    };
-
+type GridItemProps = {
+    adjustWidgetLayout: PluginWidgetProps['adjustWidgetLayout'];
+    gridLayout?: ReactGridLayoutProps;
+    id: string;
+    item: ConfigItem;
+    isDragging?: boolean;
+    isDraggedOut?: boolean;
+    layout: ConfigLayout[];
+
+    forwardedRef?: React.Ref<HTMLDivElement>;
+    forwardedPluginRef?: (pluginRef: PluginRef) => void;
+    isPlaceholder?: boolean;
+
+    onItemMountChange?: DashKitProps['onItemMountChange'];
+    onItemRender?: DashKitProps['onItemRender'];
+
+    // from react-grid-layout:
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    noOverlay?: boolean;
+    focusable?: boolean;
+    withCustomHandle?: boolean;
+    onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;
+    onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
+    onItemFocus?: DashKitProps['onItemFocus'];
+    onItemBlur?: DashKitProps['onItemBlur'];
+};
+
+type GridItemState = {
+    isFocused: boolean;
+};
+
+class GridItem extends React.PureComponent<GridItemProps, GridItemState> {
     static contextType = DashKitContext;
+    context!: React.ContextType<typeof DashKitContext>;
 
     _isAsyncItem = false;
+    controller: AbortController | null = null;
 
-    state = {
+    state: GridItemState = {
         isFocused: false,
     };
 
@@ -105,7 +112,7 @@ class GridItem extends React.PureComponent {
                 <div className={b('overlay')} />
                 <OverlayControls
                     configItem={item}
-                    onItemClick={focusable ? this.onOverlayItemClick : null}
+                    onItemClick={focusable ? this.onOverlayItemClick : undefined}
                 />
             </React.Fragment>
         );
@@ -114,17 +121,13 @@ class GridItem extends React.PureComponent {
     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()
@@ -187,14 +190,16 @@ class GridItem extends React.PureComponent {
         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?.width === undefined ? undefined : Number.parseInt(String(style.width), 10);
+        const height =
+            style?.height === undefined ? undefined : Number.parseInt(String(style.height), 10);
+        const transform = style?.transform;
         const preparedClassName =
             (editMode
                 ? className
                 : className
-                      .replace('react-resizable', '')
+                      ?.replace('react-resizable', '')
                       .replace('react-draggable', '')
                       .replace(FOCUSED_CLASS_NAME, '')) +
             (isFocused ? ` ${FOCUSED_CLASS_NAME}` : '');
@@ -254,9 +259,11 @@ class GridItem extends React.PureComponent {
     }
 }
 
-const GridItemForwarderRef = React.forwardRef((props, ref) => {
-    return <GridItem {...props} forwardedRef={ref} />;
-});
+const GridItemForwarderRef = React.forwardRef<HTMLDivElement, Omit<GridItemProps, 'forwardedRef'>>(
+    (props, ref) => {
+        return <GridItem {...props} forwardedRef={ref} />;
+    },
+);
 
 GridItemForwarderRef.displayName = 'forwardRef(GridItem)';