chore: improve docs

2025-01-22 01:15:58 +00:00 · 2024-07-08 20:53:24 +01:00 · 2024-07-08 20:53:24 +01:00 · eb3cac8b1b
commit eb3cac8b1b
parent 0db4f59990
23 changed files with 1948 additions and 1493 deletions
--- a/packages/dockview-core/src/dockview/options.ts
+++ b/packages/dockview-core/src/dockview/options.ts
@ -33,22 +33,29 @@ export interface ViewFactoryData {
 }

 export interface DockviewOptions {
+    /**
+     * Disable the auto-resizing which is controlled through a `ResizeObserver`.
+     * Call `.layout(width, height)` to manually resize the container.
+     */
    disableAutoResizing?: boolean;
    hideBorders?: boolean;
    singleTabMode?: 'fullwidth' | 'default';
    disableFloatingGroups?: boolean;
    floatingGroupBounds?:
-    | 'boundedWithinViewport'
-    | {
-        minimumHeightWithinViewport?: number;
-        minimumWidthWithinViewport?: number;
-    };
+        | 'boundedWithinViewport'
+        | {
+              minimumHeightWithinViewport?: number;
+              minimumWidthWithinViewport?: number;
+          };
    popoutUrl?: string;
    defaultRenderer?: DockviewPanelRenderer;
    debug?: boolean;
    rootOverlayModel?: DroptargetOverlayModel;
    locked?: boolean;
    disableDnd?: boolean;
+    /**
+     * Pixel gap between groups
+     */
    gap?: number;
 }

@ -76,7 +83,7 @@ export class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
        readonly position: Position,
        readonly getData: () => PanelTransfer | undefined,
        readonly group?: DockviewGroupPanel
-    ) { }
+    ) {}

    accept(): void {
        this._isAccepted = true;
@ -178,9 +185,7 @@ export function isPanelOptionsWithGroup(
 }

 type AddPanelFloatingGroupUnion = {
-    floating:
-    | Partial<AnchoredBox>
-    | true;
+    floating: Partial<AnchoredBox> | true;
    position: never;
 };

--- a/packages/dockview-vue/src/dockview/dockview.vue
+++ b/packages/dockview-vue/src/dockview/dockview.vue
@ -5,7 +5,6 @@ import {
    type DockviewOptions,
    PROPERTY_KEYS,
    type DockviewFrameworkOptions,
-    type DockviewReadyEvent,
 } from 'dockview-core';
 import {
    ref,
@ -23,20 +22,7 @@ import {
    VueWatermarkRenderer,
    findComponent,
 } from '../utils';
-
-interface VueProps {
-    watermarkComponent?: string;
-    defaultTabComponent?: string;
-    rightHeaderActionsComponent?: string;
-    leftHeaderActionsComponent?: string;
-    prefixHeaderActionsComponent?: string;
-}
-
-type VueEvents = {
-    ready: [event: DockviewReadyEvent];
-};
-
-export type IDockviewVueProps = DockviewOptions & VueProps;
+import type { IDockviewVueProps, VueEvents } from './types';

 function extractCoreOptions(props: IDockviewVueProps): DockviewOptions {
    const coreOptions = (PROPERTY_KEYS as (keyof DockviewOptions)[]).reduce(
--- a/packages/dockview-vue/src/dockview/types.ts
+++ b/packages/dockview-vue/src/dockview/types.ts
@ -0,0 +1,15 @@
+import { type DockviewOptions, type DockviewReadyEvent } from 'dockview-core';
+
+export interface VueProps {
+    watermarkComponent?: string;
+    defaultTabComponent?: string;
+    rightHeaderActionsComponent?: string;
+    leftHeaderActionsComponent?: string;
+    prefixHeaderActionsComponent?: string;
+}
+
+export type VueEvents = {
+    ready: [event: DockviewReadyEvent];
+};
+
+export type IDockviewVueProps = DockviewOptions & VueProps;
--- a/packages/dockview-vue/src/index.ts
+++ b/packages/dockview-vue/src/index.ts
@ -3,3 +3,4 @@ export * from 'dockview-core';
 import DockviewVue from './dockview/dockview.vue';
 export { DockviewVue };
 export * from './dockview/dockview.vue';
+export * from './dockview/types';
--- a/packages/dockview-vue/tsconfig.typedoc.json
+++ b/packages/dockview-vue/tsconfig.typedoc.json
@ -0,0 +1,3 @@
+{
+  "include": ["src/dockview/types.ts"]
+}
--- a/packages/dockview-vue/typedoc.json
+++ b/packages/dockview-vue/typedoc.json
@ -1,5 +1,6 @@
 {
+    "$schema": "https://typedoc.org/schema.json",
    "extends": ["../../typedoc.base.json"],
-    "entryPoints": ["src/index.ts"],
-    "exclude": ["**/dist/**"]
+    "entryPoints": ["src/dockview/types.ts"],
+    "tsconfig":"tsconfig.typedoc.json"
 }
--- a/packages/docs/docs/api/dockview/options.mdx
+++ b/packages/docs/docs/api/dockview/options.mdx
@ -15,4 +15,9 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
 </FrameworkSpecific>


+<FrameworkSpecific framework="Vue">
+  <DocRef declaration="IDockviewVueProps" />
+</FrameworkSpecific>
+
+

--- a/packages/docs/docusaurus.config.js
+++ b/packages/docs/docusaurus.config.js
@ -55,6 +55,9 @@ const config = {
        {
            href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200',
        },
+        {
+          href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"'
+        }
    ],
    plugins: [
        'docusaurus-plugin-sass',
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@ -31,6 +31,7 @@
    "@docusaurus/preset-classic": "^3.1.1",
    "@mdx-js/react": "^3.0.0",
    "@minoru/react-dnd-treeview": "^3.4.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-popover": "^1.0.7",
    "ag-grid-community": "^31.0.2",
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
@ -15,6 +15,8 @@
    }
 }

+
+
 .data-table {
    table {
        font-size: 11px;
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@ -198,6 +198,8 @@ const DockviewDemo = (props: { theme?: string }) => {
        } as React.CSSProperties;
    }, [gapCheck]);

+    const [showLogs, setShowLogs] = React.useState<boolean>(false);
+
    return (
        <div
            style={{
@ -241,83 +243,118 @@ const DockviewDemo = (props: { theme?: string }) => {
                    </button>
                </div> */}
            </div>
+            <div
+                className="action-container"
+                style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    padding: '4px',
+                }}
+            >
+                <button
+                    onClick={() => {
+                        setShowLogs(!showLogs);
+                    }}
+                >
+                    <span style={{ paddingRight: '4px' }}>
+                        {`${showLogs ? 'Hide' : 'Show'} Events Log`}
+                    </span>
+                    <span className="material-symbols-outlined">terminal</span>
+                </button>
+            </div>
            <div
                style={{
                    flexGrow: 1,
-                    overflow: 'hidden',
-                    // flexBasis: 0
                    height: 0,
                    display: 'flex',
                }}
            >
-                <DockviewReact
-                    components={components}
-                    defaultTabComponent={headerComponents.default}
-                    rightHeaderActionsComponent={RightControls}
-                    leftHeaderActionsComponent={LeftControls}
-                    prefixHeaderActionsComponent={PrefixHeaderControls}
-                    watermarkComponent={
-                        watermark ? WatermarkComponent : undefined
-                    }
-                    onReady={onReady}
-                    className={props.theme || 'dockview-theme-abyss'}
-                />
                <div
                    style={{
-                        // height: '200px',
-                        width: '300px',
-                        backgroundColor: 'black',
-                        color: 'white',
-                        overflow: 'auto',
+                        flexGrow: 1,
+                        overflow: 'hidden',
+                        height: '100%',
+                        display: 'flex',
                    }}
                >
-                    {logLines.map((line, i) => {
-                        return (
-                            <div
-                                style={{
-                                    height: '30px',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    fontSize: '13px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    backgroundColor: line.backgroundColor,
-                                }}
-                                key={i}
-                            >
-                                <span
-                                    style={{
-                                        display: 'inline-block',
-                                        width: '20px',
-                                        color: 'gray',
-                                        borderRight: '1px solid gray',
-                                        marginRight: '4px',
-                                        paddingLeft: '2px',
-                                        height: '100%',
-                                    }}
-                                >
-                                    {logLines.length - i}
-                                </span>
-                                <span>
-                                    {line.timestamp && (
-                                        <span
-                                            style={{
-                                                fontSize: '0.7em',
-                                                padding: '0px 2px',
-                                            }}
-                                        >
-                                            {line.timestamp
-                                                .toISOString()
-                                                .substring(11, 23)}
-                                        </span>
-                                    )}
-                                    <span>{line.text}</span>
-                                </span>
-                            </div>
-                        );
-                    })}
+                    <DockviewReact
+                        components={components}
+                        defaultTabComponent={headerComponents.default}
+                        rightHeaderActionsComponent={RightControls}
+                        leftHeaderActionsComponent={LeftControls}
+                        prefixHeaderActionsComponent={PrefixHeaderControls}
+                        watermarkComponent={
+                            watermark ? WatermarkComponent : undefined
+                        }
+                        onReady={onReady}
+                        className={props.theme || 'dockview-theme-abyss'}
+                    />
                </div>
+
+                {showLogs && (
+                    <div
+                        style={{
+                            width: '400px',
+                            backgroundColor: 'black',
+                            color: 'white',
+                            overflow: 'auto',
+                            fontFamily: 'monospace',
+                            marginLeft: '10px',
+                            flexShrink: 0,
+                        }}
+                    >
+                        {logLines.map((line, i) => {
+                            return (
+                                <div
+                                    style={{
+                                        height: '30px',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        fontSize: '13px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+
+                                        backgroundColor: line.backgroundColor,
+                                    }}
+                                    key={i}
+                                >
+                                    <span
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            minWidth: '20px',
+                                            maxWidth: '20px',
+                                            color: 'gray',
+                                            borderRight: '1px solid gray',
+                                            marginRight: '4px',
+                                            paddingLeft: '4px',
+                                            height: '100%',
+                                        }}
+                                    >
+                                        {logLines.length - i}
+                                    </span>
+                                    <span>
+                                        {line.timestamp && (
+                                            <span
+                                                style={{
+                                                    fontSize: '0.7em',
+                                                    padding: '0px 2px',
+                                                }}
+                                            >
+                                                {line.timestamp
+                                                    .toISOString()
+                                                    .substring(11, 23)}
+                                            </span>
+                                        )}
+                                        <span>{line.text}</span>
+                                    </span>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
            </div>
        </div>
    );
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
@ -98,11 +98,12 @@ export const GridActions = (props: {
            </button>
            <span style={{ flexGrow: 1 }} />
            <div style={{ display: 'flex' }}>
-                <span style={{ paddingRight: '4px' }}>Gap</span>
+                <span style={{ paddingRight: '4px' }}>Group Gap</span>
                <input
+                    style={{ width: 40 }}
                    type="number"
                    min={0}
-                    max={20}
+                    max={99}
                    step={1}
                    value={gap}
                    onChange={(event) => setGap(Number(event.target.value))}
--- a/packages/docs/src/components/frameworkSpecific.css
+++ b/packages/docs/src/components/frameworkSpecific.css
@ -0,0 +1,105 @@
+
+.DropdownMenuContent {
+  /* min-width: 220px; */
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 5px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+.DropdownMenuContent[data-side='top'],
+.DropdownMenuSubContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+.DropdownMenuContent[data-side='right'],
+.DropdownMenuSubContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+.DropdownMenuContent[data-side='bottom'],
+.DropdownMenuSubContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+.DropdownMenuContent[data-side='left'],
+.DropdownMenuSubContent[data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+.DropdownMenuItem[data-highlighted],
+.DropdownMenuCheckboxItem[data-highlighted],
+.DropdownMenuRadioItem[data-highlighted],
+.DropdownMenuSubTrigger[data-highlighted] {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+
+
+.framework-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100px;
+  height: 25px;
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.framework-menu-item-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 120px;
+  height: 35px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 13px;
+  background-color: rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  border: 1px solid rgba(0,0,0, 0.1);
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
--- a/packages/docs/src/components/frameworkSpecific.tsx
+++ b/packages/docs/src/components/frameworkSpecific.tsx
@ -1,18 +1,27 @@
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import { DockviewEmitter } from 'dockview';
 import * as React from 'react';
-import { IS_PROD } from '../flags';
+import './frameworkSpecific.css';

-const frameworks = [
-    // { value: 'JavaScript', label: 'JavaScript' },
-    { value: 'React', label: 'React' },
-    { value: 'Vue', label: 'Vue' },
+export interface FrameworkDescriptor {
+    value: string;
+    label: string;
+    icon: string;
+}
+
+const frameworks: FrameworkDescriptor[] = [
+    // { value: 'JavaScript', label: 'JavaScript', icon: 'img/js-icon.svg' },
+    { value: 'React', label: 'React', icon: 'img/react-icon.svg' },
+    { value: 'Vue', label: 'Vue', icon: 'img/vue-icon.svg' },
    // { value: 'Angular', label: 'Angular' },
 ];

 const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });

-export function useActiveFramework(): [string, (value: string) => void] {
+export function useActiveFramework(): [
+    FrameworkDescriptor,
+    (value: string) => void
+] {
    const [value, setValue] = React.useState<string>(
        localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
    );
@ -37,9 +46,14 @@ export function useActiveFramework(): [string, (value: string) => void] {
        activeFrameworkGlobal.fire(value);
    }, []);

-    return [IS_PROD ? frameworks[0].value : value, setter];
+    const option = frameworks.find((_) => _.value === value);
+
+    return [option, setter];
 }

+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 const FrameworkSelector1 = () => {
    const [activeFramework, setActiveFramework] = useActiveFramework();

@ -47,18 +61,48 @@ const FrameworkSelector1 = () => {
        setActiveFramework(event.target.value),
    ];

-    if (IS_PROD) {
-        return null;
-    }
-
    return (
-        <select onChange={onChange} value={activeFramework}>
-            {frameworks.map((framework) => {
-                return (
-                    <option value={framework.value}>{framework.label}</option>
-                );
-            })}
-        </select>
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild={true}>
+                <div className="framework-menu-item-select">
+                    <span style={{ padding: '0px 8px' }}>
+                        {activeFramework.label}
+                    </span>
+                    <img
+                        width={20}
+                        height={20}
+                        src={useBaseUrl(activeFramework.icon)}
+                        style={{ marginRight: '8px' }}
+                    />
+                </div>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+                side="bottom"
+                align="end"
+                sideOffset={10}
+                className="DropdownMenuContent"
+            >
+                {frameworks.map((framework) => {
+                    return (
+                        <DropdownMenu.Item
+                            onClick={() => setActiveFramework(framework.label)}
+                            className="DropdownMenuItem"
+                        >
+                            <div className="framework-menu-item">
+                                <span style={{ paddingRight: '8px' }}>
+                                    {framework.label}
+                                </span>
+                                <img
+                                    width={20}
+                                    height={20}
+                                    src={useBaseUrl(framework.icon)}
+                                />
+                            </div>
+                        </DropdownMenu.Item>
+                    );
+                })}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
    );
 };

@ -72,7 +116,7 @@ const FrameworkSpecific1 = (props: {
 }) => {
    const [activeFramework] = useActiveFramework();

-    if (activeFramework === props.framework) {
+    if (activeFramework.value === props.framework) {
        return props.children;
    }

--- a/packages/docs/src/components/ui/codeRunner.tsx
+++ b/packages/docs/src/components/ui/codeRunner.tsx
@ -10,8 +10,10 @@ export const _CodeRunner = (props: { id: string; height: number }) => {

    const sandboxUrl = `${BASE_SANDBOX_URL}/templates/${
        props.id
-    }/${framework.toLowerCase()}`;
-    const path = `/templates/${props.id}/${framework.toLowerCase()}/index.html`;
+    }/${framework.label.toLowerCase()}`;
+    const path = `/templates/${
+        props.id
+    }/${framework.value.toLowerCase()}/index.html`;
    return (
        <div>
            <iframe
--- a/packages/docs/src/components/ui/reference/docRef.tsx
+++ b/packages/docs/src/components/ui/reference/docRef.tsx
@ -111,7 +111,7 @@ export const Summary = (props: { summary: DocsComment }) => {
    return (
        <div>
            <Text content={props.summary.summary ?? []} />
-            {/* <Tags tags={props.summary.blockTags ?? []} /> */}
+            <Tags tags={props.summary.blockTags ?? []} />
        </div>
    );
 };
@ -184,6 +184,34 @@ const Row = (props: { doc: TypeSystem.Type }) => {
    );
 };

+function filter(docs: TypeSystem.Type, methods: string[]) {
+    if (docs.kind === 'typeAlias') {
+        if (docs.type.type === 'intersection') {
+            return docs.type.values
+                .map((value) => newJson[(value as any).value])
+                .map((v) => filter(v, methods))
+                .flat();
+        }
+    }
+
+    if (docs.kind === 'class' || docs.kind === 'interface') {
+        const extended = docs.extends.flatMap((name) =>
+            filter(newJson[name], methods)
+        );
+
+        return extended.concat(
+            docs.children.filter((child) => {
+                if (methods && !methods.includes(child.name)) {
+                    return false;
+                }
+                return true;
+            })
+        );
+    }
+
+    return [];
+}
+
 export const DocRef = (props: DocRefProps) => {
    const docs = React.useMemo(
        () => newJson[props.declaration],
@ -191,18 +219,7 @@ export const DocRef = (props: DocRefProps) => {
    );

    const filteredDocs = React.useMemo(
-        () =>
-            docs.kind === 'class' || docs.kind === 'interface'
-                ? docs.children.filter((child) => {
-                      if (
-                          props.methods &&
-                          !props.methods.includes(child.name)
-                      ) {
-                          return false;
-                      }
-                      return true;
-                  })
-                : [],
+        () => filter(docs, props.methods),
        [docs]
    );

--- a/packages/docs/src/components/ui/reference/types.ts
+++ b/packages/docs/src/components/ui/reference/types.ts
@ -325,6 +325,7 @@ export namespace TypeSystem {
        name: string;
        kind: 'class';
        children: TypeSystem.Type[];
+        extends: string[];
        comment?: Comment;
    };

@ -333,6 +334,7 @@ export namespace TypeSystem {
        kind: 'interface';
        children: TypeSystem.Type[];
        comment?: Comment;
+        extends: string[];
    };

    export type Parameter = {
--- a/packages/docs/src/css/custom.scss
+++ b/packages/docs/src/css/custom.scss
@ -11,7 +11,7 @@

 /* You can override the default Infima variables here. */
 :root {
-    --ifm-font-family-base: ui-sans-serif, system-ui, -apple-system,
+    --ifm-font-family-base: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
        sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
        Noto Color Emoji;
--- a/packages/docs/src/flags.ts
+++ b/packages/docs/src/flags.ts
@ -1 +0,0 @@
-export const IS_PROD = false;
--- a/packages/docs/src/generated/api.output.json
+++ b/packages/docs/src/generated/api.output.json
--- a/scripts/docs.mjs
+++ b/scripts/docs.mjs
@ -65,8 +65,10 @@ const dockviewCore = content.children.find(
    (child) => child.name === 'dockview-core'
 );
 const dockview = content.children.find((child) => child.name === 'dockview');
+const dockviewVue = content.children.find((child) => child.name === 'dockview-vue');

-const declarations = [dockviewCore, dockview]
+
+const declarations = [dockviewCore, dockview, dockviewVue]
    .flatMap(
        (item) => item.children
        // .filter((child) => DOCUMENT_LIST.includes(child.name))
@ -100,6 +102,8 @@ function parseType(obj) {
            return `${obj.name} is ${parseType(obj.targetType)}`;
        case 'tuple':
            return `[${obj.elements.map(parseType)}]`;
+        case 'namedTupleMember':
+            return `[${obj.name}: ${parseType(obj.element)}]`;
        default:
            throw new Error(`unhandled type ${obj.type}`);
    }
@ -169,6 +173,11 @@ function parseComplexType(obj) {
                type: obj.type,
                values: obj.elements.map(parseComplexType),
            };
+        case 'namedTupleMember':
+          return {
+            type: obj.type,
+            values: parseComplexType(obj.element),
+          };
        default:
            throw new Error(`unhandled type ${obj.type}`);
    }
@ -559,59 +568,73 @@ function parseDeclarationMetadata(declaration) {
 function createDocument(declarations) {
    const documentation = {};

+    function parseDeclaration(declaration) {
+      const { children, name, extendedTypes } = declaration;
+
+      /**
+       * 4: Namespace
+       * 8: Enum
+       * 64: Function
+       * 128: Class
+       * 256: Interface
+       * 2097152: TypeAlias
+       */
+
+      const metadata = parseDeclarationMetadata(declaration);
+
+      documentation[name] = {
+          ...metadata,
+          name,
+          children: [],
+          extends: []
+      };
+
+      if (!children) {
+          documentation[name] = {
+              ...parse(declaration),
+          };
+          // documentation[name].metadata = parse(declaration);
+      }
+
+      if (children) {
+          for (const child of children) {
+              try {
+                  const { flags } = child;
+
+                  if (flags.isPrivate) {
+                      continue;
+                  }
+
+                  const output = parse(child);
+
+                  if (output) {
+                      output.pieces = Array.from(new Set(output.pieces))
+                          .filter(Boolean)
+                          .sort();
+                      delete output.pieces;
+                      // delete output.comment;
+
+                      documentation[name].children.push(output);
+                  }
+              } catch (err) {
+                  console.error('error', err, JSON.stringify(child, null, 4));
+                  process.exit(-1);
+              }
+          }
+      }
+
+      if(extendedTypes) {
+        for(const extendedType of extendedTypes) {
+          if(extendedType.package && extendedType.package.startsWith("dockview")) {
+            documentation[name].extends.push(extendedType.name);
+          }
+        }
+
+      }
+    }
+
    for (const declaration of declarations) {
-        const { children, name } = declaration;
-
-        /**
-         * 4: Namespace
-         * 8: Enum
-         * 64: Function
-         * 128: Class
-         * 256: Interface
-         * 2097152: TypeAlias
-         */
-
-        const metadata = parseDeclarationMetadata(declaration);
-
-        documentation[name] = {
-            ...metadata,
-            name,
-            children: [],
-        };
-
-        if (!children) {
-            documentation[name] = {
-                ...parse(declaration),
-            };
-            // documentation[name].metadata = parse(declaration);
-        }
-
-        if (children) {
-            for (const child of children) {
-                try {
-                    const { flags } = child;
-
-                    if (flags.isPrivate) {
-                        continue;
-                    }
-
-                    const output = parse(child);
-
-                    if (output) {
-                        output.pieces = Array.from(new Set(output.pieces))
-                            .filter(Boolean)
-                            .sort();
-                        delete output.pieces;
-                        // delete output.comment;
-
-                        documentation[name].children.push(output);
-                    }
-                } catch (err) {
-                    console.error('error', err, JSON.stringify(child, null, 4));
-                    process.exit(-1);
-                }
-            }
-        }
+      parseDeclaration(declaration);
    }

    return documentation;
--- a/typedoc.json
+++ b/typedoc.json
@ -1,5 +1,5 @@
 {
-    "entryPoints": ["packages/dockview", "packages/dockview-core"],
+    "entryPoints": ["packages/dockview", "packages/dockview-core", "packages/dockview-vue"],
    "name": "Dockview",
    "entryPointStrategy": "packages",
    "includeVersion": true,
--- a/yarn.lock
+++ b/yarn.lock
@ -3478,6 +3478,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/primitive@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
+  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+
 "@radix-ui/react-arrow@1.0.3":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
@ -3486,6 +3491,23 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.3"

+"@radix-ui/react-arrow@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz#744f388182d360b86285217e43b6c63633f39e7a"
+  integrity sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
+"@radix-ui/react-collection@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed"
+  integrity sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+
 "@radix-ui/react-compose-refs@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@ -3493,6 +3515,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
 "@radix-ui/react-context@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
@ -3500,6 +3527,16 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-context@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
+  integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
+
+"@radix-ui/react-direction@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
+  integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
+
 "@radix-ui/react-dismissable-layer@1.0.5":
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
@ -3512,6 +3549,30 @@
    "@radix-ui/react-use-callback-ref" "1.0.1"
    "@radix-ui/react-use-escape-keydown" "1.0.3"

+"@radix-ui/react-dismissable-layer@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz#2cd0a49a732372513733754e6032d3fb7988834e"
+  integrity sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
+"@radix-ui/react-dropdown-menu@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz#3dc578488688250dbbe109d9ff2ca28a9bca27ec"
+  integrity sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-menu" "2.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-focus-guards@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
@ -3519,6 +3580,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-focus-guards@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz#8e9abb472a9a394f59a1b45f3dd26cfe3fc6da13"
+  integrity sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==
+
 "@radix-ui/react-focus-scope@1.0.4":
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525"
@ -3529,6 +3595,15 @@
    "@radix-ui/react-primitive" "1.0.3"
    "@radix-ui/react-use-callback-ref" "1.0.1"

+"@radix-ui/react-focus-scope@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
+  integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-icons@^1.3.0":
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
@ -3542,6 +3617,37 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-use-layout-effect" "1.0.1"

+"@radix-ui/react-id@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-menu@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.1.tgz#bd623ace0e1ae1ac78023a505fec0541d59fb346"
+  integrity sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-focus-guards" "1.1.0"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.7"
+
 "@radix-ui/react-popover@^1.0.7":
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
@ -3581,6 +3687,22 @@
    "@radix-ui/react-use-size" "1.0.1"
    "@radix-ui/rect" "1.0.1"

+"@radix-ui/react-popper@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.0.tgz#a3e500193d144fe2d8f5d5e60e393d64111f2a7a"
+  integrity sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-rect" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+    "@radix-ui/rect" "1.1.0"
+
 "@radix-ui/react-portal@1.0.4":
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
@ -3589,6 +3711,14 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-primitive" "1.0.3"

+"@radix-ui/react-portal@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f"
+  integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-presence@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
@ -3598,6 +3728,14 @@
    "@radix-ui/react-compose-refs" "1.0.1"
    "@radix-ui/react-use-layout-effect" "1.0.1"

+"@radix-ui/react-presence@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.0.tgz#227d84d20ca6bfe7da97104b1a8b48a833bfb478"
+  integrity sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/react-primitive@1.0.3":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
@ -3606,6 +3744,28 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-slot" "1.0.2"

+"@radix-ui/react-primitive@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
+"@radix-ui/react-roving-focus@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
+  integrity sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-slot@1.0.2":
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
@ -3614,6 +3774,13 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.1"

+"@radix-ui/react-slot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-use-callback-ref@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@ -3621,6 +3788,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
 "@radix-ui/react-use-controllable-state@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
@ -3629,6 +3801,13 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-use-callback-ref" "1.0.1"

+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-use-escape-keydown@1.0.3":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
@ -3637,6 +3816,13 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-use-callback-ref" "1.0.1"

+"@radix-ui/react-use-escape-keydown@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
 "@radix-ui/react-use-layout-effect@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
@ -3644,6 +3830,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
 "@radix-ui/react-use-rect@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
@ -3652,6 +3843,13 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/rect" "1.0.1"

+"@radix-ui/react-use-rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88"
+  integrity sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==
+  dependencies:
+    "@radix-ui/rect" "1.1.0"
+
 "@radix-ui/react-use-size@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
@ -3660,6 +3858,13 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-use-layout-effect" "1.0.1"

+"@radix-ui/react-use-size@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz#b4dba7fbd3882ee09e8d2a44a3eed3a7e555246b"
+  integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
 "@radix-ui/rect@1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
@ -3667,6 +3872,11 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
+  integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
+
 "@react-dnd/asap@^5.0.1":
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
@ -14351,6 +14561,14 @@ react-remove-scroll-bar@^2.3.3:
    react-style-singleton "^2.2.1"
    tslib "^2.0.0"

+react-remove-scroll-bar@^2.3.4:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
+  integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 react-remove-scroll@2.5.5:
  version "2.5.5"
  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
@ -14362,6 +14580,17 @@ react-remove-scroll@2.5.5:
    use-callback-ref "^1.3.0"
    use-sidecar "^1.1.2"

+react-remove-scroll@2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
+  integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.4"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-router-config@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"