dockview 1.5.2 → 1.7.0

package/dist/{cjs/react → esm}/dockview/defaultTab.d.ts

@@ -1,4 +1,4 @@
 import { IDockviewPanelHeaderProps } from './dockview';
 import * as React from 'react';
-export declare type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>;
+export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>;
 export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;

package/dist/{cjs/react → esm}/dockview/dockview.d.ts

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import { DockviewDropEvent } from '../../dockview/dockviewComponent';
-import { DockviewDndOverlayEvent } from '../../dockview/options';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
-import { DockviewApi } from '../../api/component.api';
+import { DockviewDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi } from 'dockview-core';
 import { IWatermarkPanelProps } from './reactWatermarkPart';
 import { PanelCollection, PanelParameters } from '../types';
 import { IDockviewGroupControlProps } from './groupControlsRenderer';
@@ -10,18 +7,18 @@ export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extend
     api: DockviewPanelApi;
     containerApi: DockviewApi;
 }
-export declare type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
-export declare type IDockviewPanelProps<T extends {
+export type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
+export type IDockviewPanelProps<T extends {
     [index: string]: any;
 } = any> = IGroupPanelBaseProps<T>;
 export interface DockviewReadyEvent {
     api: DockviewApi;
 }
 export interface IDockviewReactProps {
+    onReady: (event: DockviewReadyEvent) => void;
     components: PanelCollection<IDockviewPanelProps>;
     tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onReady: (event: DockviewReadyEvent) => void;
     tabHeight?: number;
     onDidDrop?: (event: DockviewDropEvent) => void;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
@@ -30,5 +27,6 @@ export interface IDockviewReactProps {
     disableAutoResizing?: boolean;
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
     groupControlComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
+    singleTabMode?: 'fullwidth' | 'default';
 }
 export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/{react/dockview → dockview}/dockview.js

@@ -1,14 +1,10 @@
 import * as React from 'react';
-import { DockviewComponent, } from '../../dockview/dockviewComponent';
+import { DockviewComponent, DockviewApi, watchElementResize, } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
-import { ReactPanelDeserialzier } from '../deserializer';
 import { usePortalsLifecycle } from '../react';
-import { DockviewApi } from '../../api/component.api';
 import { ReactWatermarkPart } from './reactWatermarkPart';
-import { watchElementResize } from '../../dom';
 import { ReactGroupControlsRendererPart, } from './groupControlsRenderer';
-import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
 function createGroupControlElement(component, store) {
     return component
         ? (groupPanel) => {
@@ -16,6 +12,7 @@ function createGroupControlElement(component, store) {
         }
         : undefined;
 }
+const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
 export const DockviewReact = React.forwardRef((props, ref) => {
     const domRef = React.useRef(null);
     const dockviewRef = React.useRef();
@@ -62,21 +59,28 @@ export const DockviewReact = React.forwardRef((props, ref) => {
             },
         };
         const element = document.createElement('div');
+        const frameworkTabComponents = props.tabComponents || {};
+        if (props.defaultTabComponent) {
+            frameworkTabComponents[DEFAULT_REACT_TAB] =
+                props.defaultTabComponent;
+        }
         const dockview = new DockviewComponent(element, {
             frameworkComponentFactory: factory,
             frameworkComponents: props.components,
-            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+            frameworkTabComponents,
             tabHeight: props.tabHeight,
             watermarkFrameworkComponent: props.watermarkComponent,
-            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+            defaultTabComponent: props.defaultTabComponent
+                ? DEFAULT_REACT_TAB
+                : undefined,
             styles: props.hideBorders
                 ? { separatorBorder: 'transparent' }
                 : undefined,
             showDndOverlay: props.showDndOverlay,
             createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+            singleTabMode: props.singleTabMode,
         });
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
         const { clientWidth, clientHeight } = domRef.current;
         dockview.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -139,9 +143,16 @@ export const DockviewReact = React.forwardRef((props, ref) => {
         if (!dockviewRef.current) {
             return;
         }
+        const frameworkTabComponents = props.tabComponents || {};
+        if (props.defaultTabComponent) {
+            frameworkTabComponents[DEFAULT_REACT_TAB] =
+                props.defaultTabComponent;
+        }
         dockviewRef.current.updateOptions({
-            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
-            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+            defaultTabComponent: props.defaultTabComponent
+                ? DEFAULT_REACT_TAB
+                : undefined,
+            frameworkTabComponents,
         });
     }, [props.defaultTabComponent]);
     React.useEffect(() => {

package/dist/esm/{react/dockview → dockview}/groupControlsRenderer.d.ts

@@ -1,24 +1,13 @@
 import * as React from 'react';
 import { ReactPart, ReactPortalStore } from '../react';
-import { PanelUpdateEvent } from '../../panel/types';
-import { GroupPanel, GroupviewPanelApi } from '../../groupview/groupviewPanel';
-import { DockviewApi } from '../../api/component.api';
-import { IDisposable } from '../../lifecycle';
-import { IDockviewPanel } from '../../groupview/groupPanel';
+import { IDockviewPanel, DockviewApi, DockviewGroupPanel, DockviewGroupPanelApi, PanelUpdateEvent } from 'dockview-core';
 export interface IDockviewGroupControlProps {
-    api: GroupviewPanelApi;
+    api: DockviewGroupPanelApi;
     containerApi: DockviewApi;
     panels: IDockviewPanel[];
     activePanel: IDockviewPanel | undefined;
     isGroupActive: boolean;
 }
-export interface IGroupControlRenderer extends IDisposable {
-    readonly element: HTMLElement;
-    init(params: {
-        containerApi: DockviewApi;
-        api: GroupviewPanelApi;
-    }): void;
-}
 export declare class ReactGroupControlsRendererPart {
     private readonly component;
     private readonly reactPortalStore;
@@ -28,12 +17,12 @@ export declare class ReactGroupControlsRendererPart {
     private _part?;
     get element(): HTMLElement;
     get part(): ReactPart<IDockviewGroupControlProps> | undefined;
-    get group(): GroupPanel;
-    constructor(component: React.FunctionComponent<IDockviewGroupControlProps>, reactPortalStore: ReactPortalStore, _group: GroupPanel);
+    get group(): DockviewGroupPanel;
+    constructor(component: React.FunctionComponent<IDockviewGroupControlProps>, reactPortalStore: ReactPortalStore, _group: DockviewGroupPanel);
     focus(): void;
     init(parameters: {
         containerApi: DockviewApi;
-        api: GroupviewPanelApi;
+        api: DockviewGroupPanelApi;
     }): void;
     update(event: PanelUpdateEvent): void;
     dispose(): void;

package/dist/esm/{react/dockview → dockview}/groupControlsRenderer.js

@@ -1,14 +1,6 @@
 import { ReactPart } from '../react';
-import { CompositeDisposable, MutableDisposable, } from '../../lifecycle';
+import { DockviewCompositeDisposable, DockviewMutableDisposable, } from 'dockview-core';
 export class ReactGroupControlsRendererPart {
-    constructor(component, reactPortalStore, _group) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._group = _group;
-        this.mutableDisposable = new MutableDisposable();
-        this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
-    }
     get element() {
         return this._element;
     }
@@ -18,11 +10,19 @@ export class ReactGroupControlsRendererPart {
     get group() {
         return this._group;
     }
+    constructor(component, reactPortalStore, _group) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._group = _group;
+        this.mutableDisposable = new DockviewMutableDisposable();
+        this._element = document.createElement('div');
+        this._element.className = 'dockview-react-part';
+    }
     focus() {
         // TODO
     }
     init(parameters) {
-        this.mutableDisposable.value = new CompositeDisposable(this._group.model.onDidAddPanel(() => {
+        this.mutableDisposable.value = new DockviewCompositeDisposable(this._group.model.onDidAddPanel(() => {
             this.updatePanels();
         }), this._group.model.onDidRemovePanel(() => {
             this.updatePanels();

package/dist/esm/{react/dockview → dockview}/reactContentPart.d.ts

@@ -1,30 +1,22 @@
 import * as React from 'react';
-import { IContentRenderer, GroupPanelContentPartInitParameters } from '../../groupview/types';
 import { ReactPortalStore } from '../react';
 import { IDockviewPanelProps } from '../dockview/dockview';
-import { PanelUpdateEvent } from '../../panel/types';
-import { GroupPanel } from '../../groupview/groupviewPanel';
-import { Event } from '../../events';
+import { DockviewEvent, PanelUpdateEvent, IContentRenderer, GroupPanelContentPartInitParameters } from 'dockview-core';
 export declare class ReactPanelContentPart implements IContentRenderer {
     readonly id: string;
     private readonly component;
     private readonly reactPortalStore;
     private _element;
     private part?;
-    private _group;
     private readonly _onDidFocus;
-    readonly onDidFocus: Event<void>;
+    readonly onDidFocus: DockviewEvent<void>;
     private readonly _onDidBlur;
-    readonly onDidBlur: Event<void>;
+    readonly onDidBlur: DockviewEvent<void>;
     get element(): HTMLElement;
     constructor(id: string, component: React.FunctionComponent<IDockviewPanelProps>, reactPortalStore: ReactPortalStore);
     focus(): void;
     init(parameters: GroupPanelContentPartInitParameters): void;
-    toJSON(): {
-        id: string;
-    };
     update(event: PanelUpdateEvent): void;
-    updateParentGroup(group: GroupPanel, _isPanelVisible: boolean): void;
     layout(_width: number, _height: number): void;
     dispose(): void;
 }

package/dist/esm/{react/dockview → dockview}/reactContentPart.js

@@ -1,20 +1,20 @@
 import { ReactPart } from '../react';
-import { Emitter } from '../../events';
+import { DockviewEmitter, } from 'dockview-core';
 export class ReactPanelContentPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
         this.reactPortalStore = reactPortalStore;
-        this._onDidFocus = new Emitter();
+        this._onDidFocus = new DockviewEmitter();
         this.onDidFocus = this._onDidFocus.event;
-        this._onDidBlur = new Emitter();
+        this._onDidBlur = new DockviewEmitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     focus() {
         // TODO
     }
@@ -25,18 +25,10 @@ export class ReactPanelContentPart {
             containerApi: parameters.containerApi,
         });
     }
-    toJSON() {
-        return {
-            id: this.id,
-        };
-    }
     update(event) {
         var _a;
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
     }
-    updateParentGroup(group, _isPanelVisible) {
-        this._group = group;
-    }
     layout(_width, _height) {
         // noop
     }

package/dist/esm/{react/dockview → dockview}/reactHeaderPart.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { ITabRenderer, GroupPanelPartInitParameters } from '../../groupview/types';
-import { GroupPanel } from '../../groupview/groupviewPanel';
-import { PanelUpdateEvent } from '../../panel/types';
 import { ReactPortalStore } from '../react';
 import { IGroupPanelBaseProps } from './dockview';
+import { PanelUpdateEvent, ITabRenderer, GroupPanelPartInitParameters } from 'dockview-core';
 export declare class ReactPanelHeaderPart implements ITabRenderer {
     readonly id: string;
     private readonly component;
@@ -15,12 +13,6 @@ export declare class ReactPanelHeaderPart implements ITabRenderer {
     focus(): void;
     init(parameters: GroupPanelPartInitParameters): void;
     update(event: PanelUpdateEvent): void;
-    toJSON(): {
-        id?: undefined;
-    } | {
-        id: string;
-    };
     layout(_width: number, _height: number): void;
-    updateParentGroup(_group: GroupPanel, _isPanelVisible: boolean): void;
     dispose(): void;
 }

package/dist/esm/{react/dockview → dockview}/reactHeaderPart.js

@@ -1,6 +1,8 @@
 import { ReactPart } from '../react';
-import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
 export class ReactPanelHeaderPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
@@ -8,9 +10,6 @@ export class ReactPanelHeaderPart {
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     focus() {
         //noop
     }
@@ -25,20 +24,9 @@ export class ReactPanelHeaderPart {
         var _a;
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
     }
-    toJSON() {
-        if (this.id === DEFAULT_TAB_IDENTIFIER) {
-            return {};
-        }
-        return {
-            id: this.id,
-        };
-    }
     layout(_width, _height) {
         // noop - retrieval from api
     }
-    updateParentGroup(_group, _isPanelVisible) {
-        // noop - retrieval from api
-    }
     dispose() {
         var _a;
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();

package/dist/esm/{react/dockview → dockview}/reactWatermarkPart.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { GroupPanelPartInitParameters, IWatermarkRenderer } from '../../groupview/types';
-import { GroupPanel } from '../../groupview/groupviewPanel';
 import { ReactPortalStore } from '../react';
-import { IGroupPanelBaseProps } from './dockview';
-import { PanelUpdateEvent } from '../../panel/types';
-export interface IWatermarkPanelProps extends IGroupPanelBaseProps {
+import { PanelUpdateEvent, DockviewGroupPanel, IWatermarkRenderer, WatermarkRendererInitParameters, DockviewApi, IDockviewGroupPanel } from 'dockview-core';
+export interface IWatermarkPanelProps {
+    containerApi: DockviewApi;
+    group?: IDockviewGroupPanel;
     close: () => void;
 }
 export declare class ReactWatermarkPart implements IWatermarkRenderer {
@@ -13,17 +12,13 @@ export declare class ReactWatermarkPart implements IWatermarkRenderer {
     private readonly reactPortalStore;
     private _element;
     private part?;
-    private _groupRef;
     private parameters;
     get element(): HTMLElement;
     constructor(id: string, component: React.FunctionComponent<IWatermarkPanelProps>, reactPortalStore: ReactPortalStore);
-    init(parameters: GroupPanelPartInitParameters): void;
+    init(parameters: WatermarkRendererInitParameters): void;
     focus(): void;
     update(params: PanelUpdateEvent): void;
-    toJSON(): {
-        id: string;
-    };
     layout(_width: number, _height: number): void;
-    updateParentGroup(group: GroupPanel, _isPanelVisible: boolean): void;
+    updateParentGroup(_group: DockviewGroupPanel, _isPanelVisible: boolean): void;
     dispose(): void;
 }

package/dist/esm/{react/dockview → dockview}/reactWatermarkPart.js

@@ -1,27 +1,22 @@
 import { ReactPart } from '../react';
 export class ReactWatermarkPart {
+    get element() {
+        return this._element;
+    }
     constructor(id, component, reactPortalStore) {
         this.id = id;
         this.component = component;
         this.reactPortalStore = reactPortalStore;
-        this._groupRef = {
-            value: undefined,
-        };
         this._element = document.createElement('div');
         this._element.className = 'dockview-react-part';
     }
-    get element() {
-        return this._element;
-    }
     init(parameters) {
-        this.parameters = parameters;
         this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
+            group: parameters.group,
             containerApi: parameters.containerApi,
             close: () => {
-                if (this._groupRef.value) {
-                    parameters.containerApi.removeGroup(this._groupRef.value);
+                if (parameters.group) {
+                    parameters.containerApi.removeGroup(parameters.group);
                 }
             },
         });
@@ -36,17 +31,11 @@ export class ReactWatermarkPart {
         }
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: ((_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) || {} });
     }
-    toJSON() {
-        return {
-            id: this.id,
-        };
-    }
     layout(_width, _height) {
         // noop - retrieval from api
     }
-    updateParentGroup(group, _isPanelVisible) {
-        // noop - retrieval from api
-        this._groupRef.value = group;
+    updateParentGroup(_group, _isPanelVisible) {
+        // noop
     }
     dispose() {
         var _a;

package/dist/esm/gridview/gridview.d.ts

@@ -1,126 +1,22 @@
-import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/core/splitview';
-import { Position } from '../dnd/droptarget';
-import { LeafNode } from './leafNode';
-import { Node } from './types';
-import { Event } from '../events';
-import { IDisposable } from '../lifecycle';
-export declare function indexInParent(element: HTMLElement): number;
-/**
- * Find the grid location of a specific DOM element by traversing the parent
- * chain and finding each child index on the way.
- *
- * This will break as soon as DOM structures of the Splitview or Gridview change.
- */
-export declare function getGridLocation(element: HTMLElement): number[];
-export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[];
-export declare function getDirectionOrientation(direction: Position): Orientation;
-export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation;
-export interface IViewSize {
-    width?: number;
-    height?: number;
-}
-export interface IGridView {
-    readonly onDidChange: Event<IViewSize | undefined>;
-    readonly element: HTMLElement;
-    readonly minimumWidth: number;
-    readonly maximumWidth: number;
-    readonly minimumHeight: number;
-    readonly maximumHeight: number;
-    priority?: LayoutPriority;
-    layout(width: number, height: number): void;
-    toJSON(): object;
-    fromJSON?(json: object): void;
-    snap?: boolean;
-    setVisible?(visible: boolean): void;
-}
-export declare const orthogonal: (orientation: Orientation) => Orientation;
-export interface GridLeafNode<T extends IGridView> {
-    readonly view: T;
-    readonly cachedVisibleSize: number | undefined;
-    readonly box: {
-        width: number;
-        height: number;
-    };
-}
-export interface GridBranchNode<T extends IGridView> {
-    readonly children: GridNode<T>[];
-    readonly box: {
-        width: number;
-        height: number;
-    };
-}
-export declare type GridNode<T extends IGridView> = GridLeafNode<T> | GridBranchNode<T>;
-export declare function isGridBranchNode<T extends IGridView>(node: GridNode<T>): node is GridBranchNode<T>;
-export interface SerializedGridObject<T> {
-    type: 'leaf' | 'branch';
-    data: T | SerializedGridObject<T>[];
-    size?: number;
-    visible?: boolean;
-}
-export interface ISerializedLeafNode<T = any> {
-    type: 'leaf';
-    data: T;
-    size: number;
-    visible?: boolean;
-}
-export interface ISerializedBranchNode {
-    type: 'branch';
-    data: ISerializedNode[];
-    size: number;
-}
-export declare type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
-export interface INodeDescriptor {
-    node: Node;
-    visible?: boolean;
-}
-export interface IViewDeserializer {
-    fromJSON: (data: ISerializedLeafNode) => IGridView;
-}
-export declare class Gridview implements IDisposable {
-    readonly proportionalLayout: boolean;
-    readonly styles: ISplitviewStyles | undefined;
-    private _root;
-    readonly element: HTMLElement;
-    private disposable;
-    private readonly _onDidChange;
-    readonly onDidChange: Event<{
-        size?: number;
-        orthogonalSize?: number;
-    }>;
-    serialize(): {
-        root: SerializedGridObject<any>;
-        width: number;
-        height: number;
-        orientation: Orientation;
-    };
-    dispose(): void;
-    clear(): void;
-    deserialize(json: any, deserializer: IViewDeserializer): void;
-    private _deserialize;
-    private _deserializeNode;
-    get orientation(): Orientation;
-    set orientation(orientation: Orientation);
-    private get root();
-    private set root(value);
-    next(location: number[]): LeafNode;
-    previous(location: number[]): LeafNode;
-    getView(): GridBranchNode<IGridView>;
-    getView(location?: number[]): GridNode<IGridView>;
-    private _getViews;
-    private progmaticSelect;
-    get width(): number;
-    get height(): number;
-    get minimumWidth(): number;
-    get minimumHeight(): number;
-    get maximumWidth(): number;
-    get maximumHeight(): number;
-    constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation);
-    isViewVisible(location: number[]): boolean;
-    setViewVisible(location: number[], visible: boolean): void;
-    moveView(parentLocation: number[], from: number, to: number): void;
-    addView(view: IGridView, size: number | Sizing, location: number[]): void;
-    remove(view: IGridView, sizing?: Sizing): IGridView;
-    removeView(location: number[], sizing?: Sizing): IGridView;
-    layout(width: number, height: number): void;
-    private getNode;
-}
+import * as React from 'react';
+import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { PanelCollection, PanelParameters } from '../types';
+export interface GridviewReadyEvent {
+    api: GridviewApi;
+}
+export interface IGridviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: GridviewPanelApi;
+    containerApi: GridviewApi;
+}
+export interface IGridviewReactProps {
+    orientation?: Orientation;
+    onReady: (event: GridviewReadyEvent) => void;
+    components: PanelCollection<IGridviewPanelProps>;
+    hideBorders?: boolean;
+    className?: string;
+    proportionalLayout?: boolean;
+    disableAutoResizing?: boolean;
+}
+export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;