ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/components/VirtualTable/TableRow.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@gravity-ui/uikit';
+import { DEFAULT_ALIGN } from './constants';
+import { b } from './shared';
+const TableRowCell = ({ children, className, height, width, align = DEFAULT_ALIGN, }) => {
+    // Additional maxWidth to ensure overflow hidden for <td>
+    return (_jsx("td", Object.assign({ className: b('row-cell', { align: align }, className), style: { height: `${height}px`, width: `${width}px`, maxWidth: `${width}px` } }, { children: children })));
+};
+export const LoadingTableRow = ({ index, columns, height }) => {
+    return (_jsx("tr", Object.assign({ className: b('row') }, { children: columns.map((column) => {
+            return (_jsx(TableRowCell, Object.assign({ height: height, width: column.width, align: column.align, className: column.className }, { children: _jsx(Skeleton, { style: { width: '80%', height: '50%' } }) }), `${column.name}${index}`));
+        }) })));
+};
+export const TableRow = ({ row, index, columns, getRowClassName, height }) => {
+    const additionalClassName = getRowClassName === null || getRowClassName === void 0 ? void 0 : getRowClassName(row);
+    return (_jsx("tr", Object.assign({ className: b('row', additionalClassName) }, { children: columns.map((column) => {
+            return (_jsx(TableRowCell, Object.assign({ height: height, width: column.width, align: column.align, className: column.className }, { children: column.render({ row, index }) }), `${column.name}${index}`));
+        }) })));
+};
+export const EmptyTableRow = ({ columns, children }) => {
+    return (_jsx("tr", Object.assign({ className: b('row', { empty: true }) }, { children: _jsx("td", Object.assign({ colSpan: columns.length, className: b('td') }, { children: children })) })));
+};

package/dist/components/VirtualTable/VirtualTable.d.ts

@@ -0,0 +1,19 @@
+import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize';
+import type { Column, FetchData, SortParams, RenderControls, GetRowClassName, RenderEmptyDataMessage, RenderErrorMessage } from './types';
+import './VirtualTable.scss';
+interface VirtualTableProps<T> {
+    limit: number;
+    fetchData: FetchData<T>;
+    columns: Column<T>[];
+    getRowClassName?: GetRowClassName<T>;
+    rowHeight?: number;
+    parentContainer?: Element | null;
+    initialSortParams?: SortParams;
+    onColumnsResize?: HandleTableColumnsResize;
+    renderControls?: RenderControls;
+    renderEmptyDataMessage?: RenderEmptyDataMessage;
+    renderErrorMessage?: RenderErrorMessage;
+    dependencyArray?: unknown[];
+}
+export declare const VirtualTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: VirtualTableProps<T>) => JSX.Element;
+export {};

package/dist/components/VirtualTable/VirtualTable.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useReducer, useRef, useCallback, useEffect } from 'react';
+import { getArray } from '../../utils';
+import { TableWithControlsLayout } from '../TableWithControlsLayout/TableWithControlsLayout';
+import { ResponseError } from '../Errors/ResponseError';
+import { createVirtualTableReducer, initChunk, removeChunk, resetChunks, setChunkData, setChunkError, setChunkLoading, } from './reducer';
+import { DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT } from './constants';
+import { TableHead } from './TableHead';
+import { TableChunk } from './TableChunk';
+import { EmptyTableRow } from './TableRow';
+import { useIntersectionObserver } from './useIntersectionObserver';
+import i18n from './i18n';
+import { b } from './shared';
+import './VirtualTable.scss';
+export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }) => {
+    const inited = useRef(false);
+    const tableContainer = useRef(null);
+    const [state, dispatch] = useReducer(createVirtualTableReducer(), {});
+    const [sortParams, setSortParams] = useState(initialSortParams);
+    const [totalEntities, setTotalEntities] = useState(limit);
+    const [foundEntities, setFoundEntities] = useState(0);
+    const [error, setError] = useState();
+    const pendingRequests = useRef({});
+    const fetchChunkData = useCallback(async (id) => {
+        dispatch(setChunkLoading(id));
+        const timer = setTimeout(async () => {
+            const offset = Number(id) * limit;
+            try {
+                const response = await fetchData(limit, offset, sortParams);
+                const { data, total, found } = response;
+                setTotalEntities(total);
+                setFoundEntities(found);
+                inited.current = true;
+                dispatch(setChunkData(id, data));
+            }
+            catch (err) {
+                // Do not set error on cancelled requests
+                if (err === null || err === void 0 ? void 0 : err.isCancelled) {
+                    return;
+                }
+                dispatch(setChunkError(id, err));
+                setError(err);
+            }
+        }, DEFAULT_REQUEST_TIMEOUT);
+        // Chunk data load could be triggered by different events
+        // Cancel previous chunk request, while it is pending (instead of concurrentId)
+        if (pendingRequests.current[id]) {
+            const oldTimer = pendingRequests.current[id];
+            window.clearTimeout(oldTimer);
+        }
+        pendingRequests.current[id] = timer;
+    }, [fetchData, limit, sortParams]);
+    const onEntry = useCallback((id) => {
+        dispatch(initChunk(id));
+    }, []);
+    const onLeave = useCallback((id) => {
+        dispatch(removeChunk(id));
+        // If there is a pending request for the removed chunk, cancel it
+        // It made to prevent excessive requests on fast scroll
+        if (pendingRequests.current[id]) {
+            const timer = pendingRequests.current[id];
+            window.clearTimeout(timer);
+            delete pendingRequests.current[id];
+        }
+    }, []);
+    // Cancel all pending requests on component unmount
+    useEffect(() => {
+        return () => {
+            Object.values(pendingRequests.current).forEach((timer) => {
+                window.clearTimeout(timer);
+            });
+            pendingRequests.current = {};
+        };
+    }, []);
+    // Load chunks if they become active
+    // This mecanism helps to set chunk active state from different sources, but load data only once
+    // Only currently active chunks should be in state so iteration by the whole state shouldn't be a problem
+    useEffect(() => {
+        for (const id of Object.keys(state)) {
+            const chunk = state[Number(id)];
+            if ((chunk === null || chunk === void 0 ? void 0 : chunk.active) && !(chunk === null || chunk === void 0 ? void 0 : chunk.loading) && !(chunk === null || chunk === void 0 ? void 0 : chunk.wasLoaded)) {
+                fetchChunkData(id);
+            }
+        }
+    }, [fetchChunkData, state]);
+    // Reset table on filters change
+    useEffect(() => {
+        var _a;
+        // Reset counts, so table unmount unneeded chunks
+        setTotalEntities(limit);
+        setFoundEntities(0);
+        setError(undefined);
+        // Remove all chunks from state
+        dispatch(resetChunks());
+        // Reset table state for the controls
+        inited.current = false;
+        // If there is a parent, scroll to parent container ref
+        // Else scroll to table top
+        // It helps to prevent layout shifts, when chunks quantity is changed
+        if (parentContainer) {
+            parentContainer.scrollTo(0, 0);
+        }
+        else {
+            (_a = tableContainer.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+        }
+        // Make table start to load data
+        dispatch(initChunk('0'));
+    }, [dependencyArray, limit, parentContainer]);
+    // Reload currently active chunks
+    // Use case - sort params change, so data should be updated, but without chunks unmount
+    const reloadCurrentViewport = () => {
+        var _a;
+        for (const id of Object.keys(state)) {
+            if ((_a = state[Number(id)]) === null || _a === void 0 ? void 0 : _a.active) {
+                dispatch(initChunk(id));
+            }
+        }
+    };
+    const handleSort = (params) => {
+        setSortParams(params);
+        reloadCurrentViewport();
+    };
+    const observer = useIntersectionObserver({ onEntry, onLeave, parentContainer });
+    // Render at least 1 chunk
+    const totalLength = foundEntities || limit;
+    const chunksCount = Math.ceil(totalLength / limit);
+    const renderChunks = () => {
+        if (!observer) {
+            return null;
+        }
+        return getArray(chunksCount).map((value) => {
+            const chunkData = state[value];
+            return (_jsx(TableChunk, { observer: observer, id: value, chunkSize: limit, rowHeight: rowHeight, columns: columns, chunkData: chunkData, getRowClassName: getRowClassName }, value));
+        });
+    };
+    const renderData = () => {
+        if (inited.current && foundEntities === 0) {
+            return (_jsx("tbody", { children: _jsx(EmptyTableRow, Object.assign({ columns: columns }, { children: renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty') })) }));
+        }
+        // If first chunk is loaded with the error, display error
+        // In case of other chunks table will be inited
+        if (!inited.current && error) {
+            return (_jsx("tbody", { children: _jsx(EmptyTableRow, Object.assign({ columns: columns }, { children: renderErrorMessage ? (renderErrorMessage(error)) : (_jsx(ResponseError, { error: error })) })) }));
+        }
+        return renderChunks();
+    };
+    const renderTable = () => {
+        return (_jsxs("table", Object.assign({ className: b('table') }, { children: [_jsx(TableHead, { columns: columns, onSort: handleSort, onColumnsResize: onColumnsResize }), renderData()] })));
+    };
+    const renderContent = () => {
+        if (renderControls) {
+            return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls({ inited: inited.current, totalEntities, foundEntities }) }), _jsx(TableWithControlsLayout.Table, { children: renderTable() })] }));
+        }
+        return renderTable();
+    };
+    return (_jsx("div", Object.assign({ ref: tableContainer, className: b(null) }, { children: renderContent() })));
+};

package/dist/components/VirtualTable/VirtualTable.scss

@@ -6,8 +6,6 @@
     --virtual-table-cell-vertical-padding: 5px;
     --virtual-table-cell-horizontal-padding: 10px;
 
-    --virtual-table-sort-icon-space: 18px;
-
     --virtual-table-border-color: var(--g-color-base-generic-hover);
     --virtual-table-hover-color: var(--g-color-base-float-hover);
 
@@ -21,6 +19,10 @@
         table-layout: fixed;
         border-spacing: 0;
         border-collapse: separate;
+
+        th {
+            padding: 0;
+        }
     }
 
     &__row {
@@ -40,96 +42,96 @@
         @include sticky-top();
     }
 
-    &__th {
-        position: relative;
-
-        padding: var(--virtual-table-cell-vertical-padding)
-            var(--virtual-table-cell-horizontal-padding);
-
-        font-weight: bold;
-        cursor: default;
-        text-align: left;
+    &__sort-icon-container {
+        display: flex;
+        justify-content: center;
 
-        border-bottom: $cell-border;
+        color: inherit;
 
-        &_sortable {
-            cursor: pointer;
+        &_shadow {
+            opacity: 0.15;
+        }
+    }
 
-            #{$block}__head-cell {
-                padding-right: var(--virtual-table-sort-icon-space);
-            }
+    &__sort-icon {
+        &_desc {
+            transform: rotate(180deg);
+        }
+    }
 
-            &#{$block}__th_align_right {
-                #{$block}__head-cell {
-                    padding-right: 0;
-                    padding-left: var(--virtual-table-sort-icon-space);
-                }
+    &__head-cell-wrapper {
+        display: flex;
+        overflow-x: hidden;
 
-                #{$block}__sort-icon {
-                    right: auto;
-                    left: 0;
+        border-bottom: $cell-border;
 
-                    transform: translate(0, -50%) scaleX(-1);
-                }
-            }
+        &_resizeable {
+            resize: horizontal;
         }
     }
 
     &__head-cell {
-        position: relative;
-
-        display: inline-block;
-        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
 
-        box-sizing: border-box;
+        width: 100%;
         max-width: 100%;
+        padding: var(--virtual-table-cell-vertical-padding)
+            var(--virtual-table-cell-horizontal-padding);
 
-        vertical-align: top;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        &_align {
+            &_left {
+                justify-content: left;
+            }
+            &_center {
+                justify-content: center;
+            }
+            &_right {
+                justify-content: right;
+            }
+        }
     }
 
-    &__sort-icon {
-        position: absolute;
-        top: 50%;
-        right: 0;
-
-        display: inline-flex;
+    &__head-cell {
+        gap: 8px;
 
-        color: inherit;
+        font-weight: bold;
+        cursor: default;
 
-        transform: translate(0, -50%);
+        &_sortable {
+            cursor: pointer;
 
-        &_shadow {
-            opacity: 0.15;
+            &#{$block}__head-cell_align_right {
+                flex-direction: row-reverse;
+            }
         }
     }
 
-    &__icon {
-        vertical-align: top;
+    // Separate head cell content class for correct text ellipsis overflow
+    &__head-cell-content {
+        overflow: hidden;
 
-        &_desc {
-            transform: rotate(180deg);
-        }
+        width: min-content;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
-    &__td {
-        overflow: hidden;
+    &__row-cell {
+        display: table-cell;
+        overflow-x: hidden;
 
+        width: 100%;
+        max-width: 100%;
         padding: var(--virtual-table-cell-vertical-padding)
             var(--virtual-table-cell-horizontal-padding);
 
+        vertical-align: middle;
         white-space: nowrap;
         text-overflow: ellipsis;
 
         border-bottom: $cell-border;
-    }
-
-    &__td,
-    &__th {
-        height: 40px;
-
-        vertical-align: middle;
 
         &_align {
             &_left {

package/dist/components/VirtualTable/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const LEFT = "left";
+export declare const CENTER = "center";
+export declare const RIGHT = "right";
+export declare const DEFAULT_ALIGN = "left";
+export declare const ASCENDING = 1;
+export declare const DESCENDING = -1;
+export declare const DEFAULT_SORT_ORDER = -1;
+export declare const DEFAULT_REQUEST_TIMEOUT = 200;
+export declare const DEFAULT_TABLE_ROW_HEIGHT = 40;
+export declare const DEFAULT_INTERSECTION_OBSERVER_MARGIN = "100%";

package/dist/components/VirtualTable/constants.js

@@ -0,0 +1,11 @@
+export const LEFT = 'left';
+export const CENTER = 'center';
+export const RIGHT = 'right';
+export const DEFAULT_ALIGN = LEFT;
+export const ASCENDING = 1;
+export const DESCENDING = -1;
+export const DEFAULT_SORT_ORDER = DESCENDING;
+// Time in ms after which request will be sent
+export const DEFAULT_REQUEST_TIMEOUT = 200;
+export const DEFAULT_TABLE_ROW_HEIGHT = 40;
+export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';

package/dist/components/VirtualTable/i18n/en.json

@@ -1,3 +1,3 @@
 {
-  "empty": "No data"
+    "empty": "No data"
 }

package/dist/components/VirtualTable/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/components/VirtualTable/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-virtual-table';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

package/dist/components/VirtualTable/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-  "empty": "Нет данных"
+    "empty": "Нет данных"
 }

package/dist/components/VirtualTable/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './types';
+export * from './VirtualTable';

package/dist/components/VirtualTable/reducer.d.ts

@@ -0,0 +1,44 @@
+import type { Reducer } from 'react';
+import type { IResponseError } from '../../types/api/error';
+import type { Chunk } from './types';
+declare const SET_CHUNK_DATA = "infiniteTable/SET_CHUNK_DATA";
+declare type VirtualTableState<T> = Record<string, Chunk<T> | undefined>;
+interface SetChunkDataAction<T> {
+    type: typeof SET_CHUNK_DATA;
+    data: {
+        id: string;
+        data: T[];
+    };
+}
+export declare const setChunkData: <T>(id: string, data: T[]) => SetChunkDataAction<T>;
+export declare const setChunkError: (id: string, error: IResponseError) => {
+    readonly type: "infiniteTable/SET_CHUNK_ERROR";
+    readonly data: {
+        readonly id: string;
+        readonly error: IResponseError<unknown>;
+    };
+};
+export declare const initChunk: (id: string) => {
+    readonly type: "infiniteTable/INIT_CHUNK";
+    readonly data: {
+        readonly id: string;
+    };
+};
+export declare const setChunkLoading: (id: string) => {
+    readonly type: "infiniteTable/SET_CHUNK_LOADING";
+    readonly data: {
+        readonly id: string;
+    };
+};
+export declare const removeChunk: (id: string) => {
+    readonly type: "infiniteTable/REMOVE_CHUNK";
+    readonly data: {
+        readonly id: string;
+    };
+};
+export declare const resetChunks: () => {
+    readonly type: "infiniteTable/RESET_CHUNKS";
+};
+declare type VirtualTableAction<T> = SetChunkDataAction<T> | ReturnType<typeof setChunkError> | ReturnType<typeof initChunk> | ReturnType<typeof setChunkLoading> | ReturnType<typeof removeChunk> | ReturnType<typeof resetChunks>;
+export declare const createVirtualTableReducer: <T>() => Reducer<VirtualTableState<T>, VirtualTableAction<T>>;
+export {};

package/dist/components/VirtualTable/reducer.js

@@ -0,0 +1,91 @@
+const INIT_CHUNK = 'infiniteTable/INIT_CHUNK';
+const REMOVE_CHUNK = 'infiniteTable/REMOVE_CHUNK';
+const SET_CHUNK_LOADING = 'infiniteTable/SET_CHUNK_LOADING';
+const SET_CHUNK_DATA = 'infiniteTable/SET_CHUNK_DATA';
+const SET_CHUNK_ERROR = 'infiniteTable/SET_CHUNK_ERROR';
+const RESET_CHUNKS = 'infiniteTable/RESET_CHUNKS';
+export const setChunkData = (id, data) => {
+    return {
+        type: SET_CHUNK_DATA,
+        data: { id, data },
+    };
+};
+export const setChunkError = (id, error) => {
+    return {
+        type: SET_CHUNK_ERROR,
+        data: { id, error },
+    };
+};
+export const initChunk = (id) => {
+    return {
+        type: INIT_CHUNK,
+        data: { id },
+    };
+};
+export const setChunkLoading = (id) => {
+    return {
+        type: SET_CHUNK_LOADING,
+        data: { id },
+    };
+};
+export const removeChunk = (id) => {
+    return {
+        type: REMOVE_CHUNK,
+        data: { id },
+    };
+};
+export const resetChunks = () => {
+    return {
+        type: RESET_CHUNKS,
+    };
+};
+// Reducer wrapped in additional function to pass generic type
+export const createVirtualTableReducer = () => (state, action) => {
+    switch (action.type) {
+        case SET_CHUNK_DATA: {
+            const { id, data } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: false,
+                    wasLoaded: true,
+                    active: true,
+                    data,
+                } });
+        }
+        case SET_CHUNK_ERROR: {
+            const { id, error } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: false,
+                    wasLoaded: true,
+                    active: true,
+                    error,
+                } });
+        }
+        case INIT_CHUNK: {
+            const { id } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: false,
+                    wasLoaded: false,
+                    active: true,
+                } });
+        }
+        case SET_CHUNK_LOADING: {
+            const { id } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: true,
+                    wasLoaded: false,
+                    active: true,
+                } });
+        }
+        case REMOVE_CHUNK: {
+            const { id } = action.data;
+            const newState = Object.assign({}, state);
+            delete newState[id];
+            return newState;
+        }
+        case RESET_CHUNKS: {
+            return {};
+        }
+        default:
+            return state;
+    }
+};

package/dist/components/VirtualTable/shared.d.ts

@@ -0,0 +1,10 @@
+export declare const b: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};

package/dist/components/VirtualTable/shared.js

@@ -0,0 +1,2 @@
+import cn from 'bem-cn-lite';
+export const b = cn('ydb-virtual-table');

package/dist/components/VirtualTable/types.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+import type { IResponseError } from '../../types/api/error';
+import { ASCENDING, CENTER, DESCENDING, LEFT, RIGHT } from './constants';
+export interface Chunk<T> {
+    active: boolean;
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: T[];
+    error?: IResponseError;
+}
+export declare type GetChunk<T> = (id: number) => Chunk<T> | undefined;
+export declare type OnEntry = (id: string) => void;
+export declare type OnLeave = (id: string) => void;
+export declare type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
+export declare type SortOrderType = typeof ASCENDING | typeof DESCENDING;
+export declare type SortParams = {
+    columnId?: string;
+    sortOrder?: SortOrderType;
+};
+export declare type OnSort = (params: SortParams) => void;
+export interface Column<T> {
+    name: string;
+    header?: ReactNode;
+    className?: string;
+    sortable?: boolean;
+    resizeable?: boolean;
+    render: (props: {
+        row: T;
+        index: number;
+    }) => ReactNode;
+    width: number;
+    align: AlignType;
+}
+export interface VirtualTableData<T> {
+    data: T[];
+    total: number;
+    found: number;
+}
+export declare type FetchData<T> = (limit: number, offset: number, sortParams?: SortParams) => Promise<VirtualTableData<T>>;
+export declare type OnError = (error?: IResponseError) => void;
+interface ControlsParams {
+    totalEntities: number;
+    foundEntities: number;
+    inited: boolean;
+}
+export declare type RenderControls = (params: ControlsParams) => ReactNode;
+export declare type RenderEmptyDataMessage = () => ReactNode;
+export declare type RenderErrorMessage = (error: IResponseError) => ReactNode;
+export declare type GetRowClassName<T> = (row: T) => string | undefined;
+export {};

package/dist/components/VirtualTable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/VirtualTable/useIntersectionObserver.d.ts

@@ -0,0 +1,9 @@
+import type { OnEntry, OnLeave } from './types';
+interface UseIntersectionObserverProps {
+    onEntry: OnEntry;
+    onLeave: OnLeave;
+    /** Intersection observer calculate margins based on container element properties */
+    parentContainer?: Element | null;
+}
+export declare const useIntersectionObserver: ({ onEntry, onLeave, parentContainer, }: UseIntersectionObserverProps) => IntersectionObserver | undefined;
+export {};