ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/components/VirtualTable/TableHead.js

@@ -1,24 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ASCENDING, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ASCENDING, DEFAULT_RESIZEABLE, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING, } from './constants';
 import { b } from './shared';
 const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
 // Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
 const SortIcon = ({ order }) => {
-    return (_jsx("svg", Object.assign({ className: b('sort-icon', { desc: order === DESCENDING }), viewBox: "0 0 10 6", width: "10", height: "6" }, { children: _jsx("path", { fill: "currentColor", d: "M0 5h10l-5 -5z" }) })));
+    return (_jsx("svg", { className: b('sort-icon', { desc: order === DESCENDING }), viewBox: "0 0 10 6", width: "10", height: "6", children: _jsx("path", { fill: "currentColor", d: "M0 5h10l-5 -5z" }) }));
 };
 const ColumnSortIcon = ({ sortOrder, sortable, defaultSortOrder }) => {
     if (sortable) {
-        return (_jsx("span", Object.assign({ className: b('sort-icon-container', { shadow: !sortOrder }) }, { children: _jsx(SortIcon, { order: sortOrder || defaultSortOrder }) })));
+        return (_jsx("span", { className: b('sort-icon-container', { shadow: !sortOrder }), children: _jsx(SortIcon, { order: sortOrder || defaultSortOrder }) }));
     }
     else {
         return null;
     }
 };
-export const TableHeadCell = ({ column, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }) => {
+export const TableHeadCell = ({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }) => {
     var _a;
-    const cellWrapperRef = useRef(null);
-    useEffect(() => {
+    const cellWrapperRef = React.useRef(null);
+    React.useEffect(() => {
         const cellWrapper = cellWrapperRef.current;
         if (cellWrapper) {
             onCellMount === null || onCellMount === void 0 ? void 0 : onCellMount(cellWrapper);
@@ -30,23 +30,19 @@ export const TableHeadCell = ({ column, sortOrder, defaultSortOrder, onSort, row
         };
     }, [onCellMount, onCellUnMount]);
     const content = (_a = column.header) !== null && _a !== void 0 ? _a : column.name;
-    return (_jsx("th", { children: _jsx("div", Object.assign({ ref: cellWrapperRef, className: b('head-cell-wrapper', {
-                resizeable: column.resizeable,
-            }), style: {
+    return (_jsx("th", { children: _jsx("div", { ref: cellWrapperRef, className: b('head-cell-wrapper', { resizeable }), style: {
                 height: `${rowHeight}px`,
                 width: `${column.width}px`,
-            } }, {
-            [COLUMN_NAME_HTML_ATTRIBUTE]: column.name,
-        }, { children: _jsxs("div", Object.assign({ className: b('head-cell', { align: column.align, sortable: column.sortable }, column.className), onClick: () => {
+            }, [COLUMN_NAME_HTML_ATTRIBUTE]: column.name, children: _jsxs("div", { className: b('head-cell', { align: column.align, sortable: column.sortable }, column.className), onClick: () => {
                     if (column.sortable) {
                         onSort === null || onSort === void 0 ? void 0 : onSort(column.name);
                     }
-                } }, { children: [_jsx("div", Object.assign({ className: b('head-cell-content') }, { children: content })), _jsx(ColumnSortIcon, { sortOrder: sortOrder, sortable: column.sortable, defaultSortOrder: defaultSortOrder })] })) })) }));
+                }, children: [_jsx("div", { className: b('head-cell-content'), children: content }), _jsx(ColumnSortIcon, { sortOrder: sortOrder, sortable: column.sortable, defaultSortOrder: defaultSortOrder })] }) }) }));
 };
 export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder = DEFAULT_SORT_ORDER, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, }) => {
-    const [sortParams, setSortParams] = useState({});
+    const [sortParams, setSortParams] = React.useState({});
     const isTableResizeable = Boolean(onColumnsResize);
-    const resizeObserver = useMemo(() => {
+    const resizeObserver = React.useMemo(() => {
         if (!isTableResizeable) {
             return undefined;
         }
@@ -61,10 +57,10 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
             onColumnsResize === null || onColumnsResize === void 0 ? void 0 : onColumnsResize(columnsWidth);
         });
     }, [onColumnsResize, isTableResizeable]);
-    const handleCellMount = useCallback((element) => {
+    const handleCellMount = React.useCallback((element) => {
         resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(element);
     }, [resizeObserver]);
-    const handleCellUnMount = useCallback((element) => {
+    const handleCellUnMount = React.useCallback((element) => {
         resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(element);
     }, [resizeObserver]);
     const handleSort = (columnId) => {
@@ -100,10 +96,12 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
             }) }));
     };
     const renderTableHead = () => {
-        return (_jsx("thead", Object.assign({ className: b('head') }, { children: _jsx("tr", { children: columns.map((column) => {
+        return (_jsx("thead", { className: b('head'), children: _jsx("tr", { children: columns.map((column) => {
+                    var _a;
                     const sortOrder = sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
-                    return (_jsx(TableHeadCell, { column: column, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onCellMount: handleCellMount, onCellUnMount: handleCellUnMount }, column.name));
-                }) }) })));
+                    const resizeable = onColumnsResize && ((_a = column.resizeable) !== null && _a !== void 0 ? _a : DEFAULT_RESIZEABLE);
+                    return (_jsx(TableHeadCell, { column: column, resizeable: resizeable, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onCellMount: handleCellMount, onCellUnMount: handleCellUnMount }, column.name));
+                }) }) }));
     };
-    return (_jsxs(_Fragment, { children: [renderTableColGroups(), renderTableHead()] }));
+    return (_jsxs(React.Fragment, { children: [renderTableColGroups(), renderTableHead()] }));
 };

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

@@ -1,11 +1,11 @@
-import { type ReactNode } from 'react';
+/// <reference types="react" />
 import type { Column, GetRowClassName } from './types';
 interface LoadingTableRowProps<T> {
     columns: Column<T>[];
     index: number;
     height: number;
 }
-export declare const LoadingTableRow: <T>({ index, columns, height }: LoadingTableRowProps<T>) => JSX.Element;
+export declare const LoadingTableRow: <T>({ index, columns, height }: LoadingTableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface TableRowProps<T> {
     columns: Column<T>[];
     index: number;
@@ -13,10 +13,10 @@ interface TableRowProps<T> {
     height: number;
     getRowClassName?: GetRowClassName<T>;
 }
-export declare const TableRow: <T>({ row, index, columns, getRowClassName, height }: TableRowProps<T>) => JSX.Element;
+export declare const TableRow: <T>({ row, index, columns, getRowClassName, height }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface EmptyTableRowProps<T> {
     columns: Column<T>[];
-    children?: ReactNode;
+    children?: React.ReactNode;
 }
-export declare const EmptyTableRow: <T>({ columns, children }: EmptyTableRowProps<T>) => JSX.Element;
+export declare const EmptyTableRow: <T>({ columns, children }: EmptyTableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VirtualTable/TableRow.js

@@ -4,19 +4,19 @@ 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 })));
+    return (_jsx("td", { 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}`));
-        }) })));
+    return (_jsx("tr", { className: b('row'), children: columns.map((column) => {
+            return (_jsx(TableRowCell, { 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}`));
-        }) })));
+    return (_jsx("tr", { className: b('row', additionalClassName), children: columns.map((column) => {
+            return (_jsx(TableRowCell, { 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 })) })));
+    return (_jsx("tr", { className: b('row', { empty: true }), children: _jsx("td", { colSpan: columns.length, className: b('td'), children: children }) }));
 };

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

@@ -1,5 +1,5 @@
 import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize';
-import type { Column, FetchData, SortParams, RenderControls, GetRowClassName, RenderEmptyDataMessage, RenderErrorMessage } from './types';
+import type { Column, FetchData, GetRowClassName, RenderControls, RenderEmptyDataMessage, RenderErrorMessage, SortParams } from './types';
 import './VirtualTable.scss';
 interface VirtualTableProps<T> {
     limit: number;
@@ -15,5 +15,5 @@ interface VirtualTableProps<T> {
     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 declare const VirtualTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: VirtualTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VirtualTable/VirtualTable.js

@@ -1,27 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useReducer, useRef, useCallback, useEffect } from 'react';
+import React 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 { TableWithControlsLayout } from '../TableWithControlsLayout/TableWithControlsLayout';
 import { TableChunk } from './TableChunk';
+import { TableHead } from './TableHead';
 import { EmptyTableRow } from './TableRow';
-import { useIntersectionObserver } from './useIntersectionObserver';
+import { DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT } from './constants';
 import i18n from './i18n';
+import { createVirtualTableReducer, initChunk, removeChunk, resetChunks, setChunkData, setChunkError, setChunkLoading, } from './reducer';
 import { b } from './shared';
+import { useIntersectionObserver } from './useIntersectionObserver';
 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) => {
+    const inited = React.useRef(false);
+    const tableContainer = React.useRef(null);
+    const [state, dispatch] = React.useReducer(createVirtualTableReducer(), {});
+    const [sortParams, setSortParams] = React.useState(initialSortParams);
+    const [totalEntities, setTotalEntities] = React.useState(limit);
+    const [foundEntities, setFoundEntities] = React.useState(0);
+    const [error, setError] = React.useState();
+    const pendingRequests = React.useRef({});
+    const fetchChunkData = React.useCallback(async (id) => {
         dispatch(setChunkLoading(id));
         const timer = setTimeout(async () => {
             const offset = Number(id) * limit;
@@ -50,10 +50,10 @@ export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHe
         }
         pendingRequests.current[id] = timer;
     }, [fetchData, limit, sortParams]);
-    const onEntry = useCallback((id) => {
+    const onEntry = React.useCallback((id) => {
         dispatch(initChunk(id));
     }, []);
-    const onLeave = useCallback((id) => {
+    const onLeave = React.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
@@ -64,7 +64,7 @@ export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHe
         }
     }, []);
     // Cancel all pending requests on component unmount
-    useEffect(() => {
+    React.useEffect(() => {
         return () => {
             Object.values(pendingRequests.current).forEach((timer) => {
                 window.clearTimeout(timer);
@@ -75,7 +75,7 @@ export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHe
     // 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(() => {
+    React.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)) {
@@ -84,7 +84,7 @@ export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHe
         }
     }, [fetchChunkData, state]);
     // Reset table on filters change
-    useEffect(() => {
+    React.useEffect(() => {
         var _a;
         // Reset counts, so table unmount unneeded chunks
         setTotalEntities(limit);
@@ -135,17 +135,17 @@ export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHe
     };
     const renderData = () => {
         if (inited.current && foundEntities === 0) {
-            return (_jsx("tbody", { children: _jsx(EmptyTableRow, Object.assign({ columns: columns }, { children: renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty') })) }));
+            return (_jsx("tbody", { children: _jsx(EmptyTableRow, { 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 (_jsx("tbody", { children: _jsx(EmptyTableRow, { 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()] })));
+        return (_jsxs("table", { className: b('table'), children: [_jsx(TableHead, { columns: columns, onSort: handleSort, onColumnsResize: onColumnsResize }), renderData()] }));
     };
     const renderContent = () => {
         if (renderControls) {
@@ -153,5 +153,5 @@ export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHe
         }
         return renderTable();
     };
-    return (_jsx("div", Object.assign({ ref: tableContainer, className: b(null) }, { children: renderContent() })));
+    return (_jsx("div", { ref: tableContainer, className: b(null), children: renderContent() }));
 };

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

@@ -2,6 +2,7 @@ export declare const LEFT = "left";
 export declare const CENTER = "center";
 export declare const RIGHT = "right";
 export declare const DEFAULT_ALIGN = "left";
+export declare const DEFAULT_RESIZEABLE = true;
 export declare const ASCENDING = 1;
 export declare const DESCENDING = -1;
 export declare const DEFAULT_SORT_ORDER = -1;

package/dist/components/VirtualTable/constants.js

@@ -2,6 +2,7 @@ export const LEFT = 'left';
 export const CENTER = 'center';
 export const RIGHT = 'right';
 export const DEFAULT_ALIGN = LEFT;
+export const DEFAULT_RESIZEABLE = true;
 export const ASCENDING = 1;
 export const DESCENDING = -1;
 export const DEFAULT_SORT_ORDER = DESCENDING;

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

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

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

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../utils/i18n';
+import { registerKeysets } 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);
+export default registerKeysets(COMPONENT, { ru, en });

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

@@ -1,4 +1,3 @@
-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";
@@ -40,5 +39,5 @@ export declare const resetChunks: () => {
     readonly type: "infiniteTable/RESET_CHUNKS";
 };
 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 declare const createVirtualTableReducer: <T>() => React.Reducer<VirtualTableState<T>, VirtualTableAction<T>>;
 export {};

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

@@ -1,10 +1 @@
-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;
-};
+export declare const b: import("@bem-react/classname").ClassNameFormatter;

package/dist/components/VirtualTable/shared.js

@@ -1,2 +1,2 @@
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 export const b = cn('ydb-virtual-table');

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

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 import type { IResponseError } from '../../types/api/error';
-import { ASCENDING, CENTER, DESCENDING, LEFT, RIGHT } from './constants';
+import type { ASCENDING, CENTER, DESCENDING, LEFT, RIGHT } from './constants';
 export interface Chunk<T> {
     active: boolean;
     loading: boolean;
@@ -20,14 +20,14 @@ export type SortParams = {
 export type OnSort = (params: SortParams) => void;
 export interface Column<T> {
     name: string;
-    header?: ReactNode;
+    header?: React.ReactNode;
     className?: string;
     sortable?: boolean;
     resizeable?: boolean;
     render: (props: {
         row: T;
         index: number;
-    }) => ReactNode;
+    }) => React.ReactNode;
     width: number;
     align: AlignType;
 }
@@ -43,8 +43,8 @@ interface ControlsParams {
     foundEntities: number;
     inited: boolean;
 }
-export type RenderControls = (params: ControlsParams) => ReactNode;
-export type RenderEmptyDataMessage = () => ReactNode;
-export type RenderErrorMessage = (error: IResponseError) => ReactNode;
+export type RenderControls = (params: ControlsParams) => React.ReactNode;
+export type RenderEmptyDataMessage = () => React.ReactNode;
+export type RenderErrorMessage = (error: IResponseError) => React.ReactNode;
 export type GetRowClassName<T> = (row: T) => string | undefined;
 export {};

package/dist/components/VirtualTable/useIntersectionObserver.js

@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react';
+import React from 'react';
 import { DEFAULT_INTERSECTION_OBSERVER_MARGIN } from './constants';
 export const useIntersectionObserver = ({ onEntry, onLeave, parentContainer, }) => {
-    const observer = useRef();
-    useEffect(() => {
+    const observer = React.useRef();
+    React.useEffect(() => {
         const callback = (entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export interface SlotComponent<Props = {}, Type = never> extends React.FC<Props & React.RefAttributes<Type>> {
+export interface SlotComponent<Props = {}, Type = never> extends React.FC<Props & {
+    ref?: React.Ref<Type>;
+}> {
 }
 export interface SlotItem<Props = {}, Type = unknown> {
     name: string;

package/dist/components/slots/utils.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import type { SlotComponent } from './types';
-export declare function isSlotElement<P = {}, Type = never>(node: React.ReactNode): node is React.ReactElement<P, SlotComponent<P>> & React.RefAttributes<Type>;
+export declare function isSlotElement<P = {}, Type = never>(node: React.ReactNode): node is React.ReactElement<P, SlotComponent<P>> & {
+    ref?: React.Ref<Type>;
+};
 export declare function isSlotComponent<T = {}>(type: string | React.JSXElementConstructor<any>): type is SlotComponent<T>;

package/dist/containers/App/App.d.ts

@@ -10,6 +10,12 @@ export interface AppProps {
     userSettings?: YDBEmbeddedUISettings;
     children?: React.ReactNode;
 }
-declare function App({ store, history, singleClusterMode, children, userSettings }: AppProps): JSX.Element;
-declare const _default: import("react-redux").ConnectedComponent<typeof App, import("react-redux").Omit<AppProps, "singleClusterMode">>;
+declare function App({ store, history, singleClusterMode, children, userSettings }: AppProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof App, {
+    history: History<unknown>;
+    store: Store<any, import("redux").UnknownAction, unknown>;
+    children?: React.ReactNode;
+    userSettings?: YDBEmbeddedUISettings | undefined;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
+}>;
 export default _default;

package/dist/containers/App/App.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet-async';
-import ContentWrapper, { Content } from './Content';
-import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
+import { connect } from 'react-redux';
+import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 import AppIcons from '../AppIcons/AppIcons';
 import { Navigation } from '../AsideNavigation/Navigation';
-import { registerLanguages } from '../../utils/monaco';
-import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
+import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import { settings } from '../UserSettings/settings';
+import ContentWrapper, { Content } from './Content';
 import { Providers } from './Providers';
 import './App.scss';
-registerLanguages();
 function App({ store, history, singleClusterMode, children, userSettings = settings }) {
-    return (_jsxs(Providers, Object.assign({ store: store, history: history }, { children: [_jsx(Helmet, { defaultTitle: "YDB Monitoring", titleTemplate: "%s \u2014 YDB Monitoring" }), _jsx(ContentWrapper, { children: _jsx(Navigation, Object.assign({ userSettings: userSettings }, { children: _jsxs(ErrorBoundary, { children: [_jsx(Content, Object.assign({ singleClusterMode: singleClusterMode }, { children: children })), _jsx("div", { id: "fullscreen-root" })] }) })) }), _jsx(ReduxTooltip, {}), _jsx(AppIcons, {})] })));
+    return (_jsxs(Providers, { store: store, history: history, children: [_jsx(Helmet, { defaultTitle: "YDB Monitoring", titleTemplate: "%s \u2014 YDB Monitoring" }), _jsx(ContentWrapper, { children: _jsx(Navigation, { userSettings: userSettings, children: _jsxs(ErrorBoundary, { children: [_jsx(Content, { singleClusterMode: singleClusterMode, children: children }), _jsx("div", { id: "fullscreen-root" })] }) }) }), _jsx(ReduxTooltip, {}), _jsx(AppIcons, {})] }));
 }
 function mapStateToProps(state) {
     return {

package/dist/containers/App/App.scss

@@ -4,9 +4,12 @@
 * {
     // FIXME: this is an overkill, potentially could break external components, needs refactoring
     box-sizing: border-box;
+
+    // Make all digits in the app monospace
+    font-variant-numeric: tabular-nums;
 }
 
-.yc-select-popup__tick-icon {
+.g-select-popup__tick-icon {
     // this is a local fix, remove after the refactoring
     box-sizing: content-box;
 }
@@ -42,11 +45,11 @@ body,
     --ydb-color-status-black: var(--g-color-base-misc-heavy);
 }
 
-:is(#tab, .yc-tabs-item_active .yc-tabs-item__title) {
+:is(#tab, .g-tabs-item_active .g-tabs-item__title) {
     color: var(--g-color-text-primary) !important;
 }
 
-:is(#tab, .yc-tabs-item__title) {
+:is(#tab, .g-tabs-item__title) {
     color: var(--g-color-text-secondary);
 }
 
@@ -128,7 +131,7 @@ body,
     background: var(--ydb-data-table-color-hover);
 }
 
-.yc-table-column-setup__item {
+.g-table-column-setup__item {
     /* stylelint-disable-next-line declaration-no-important*/
     padding: 0 8px 0 32px !important;
     /* stylelint-disable-next-line declaration-no-important*/
@@ -139,6 +142,6 @@ body,
     font-family: 'Rubik', sans-serif;
 }
 
-.yc-popup {
+.g-popup {
     max-width: 500px;
 }

package/dist/containers/App/Content.d.ts

@@ -4,12 +4,16 @@ interface ContentProps {
     singleClusterMode: boolean;
     children: React.ReactNode;
 }
-export declare function Content(props: ContentProps): JSX.Element;
+export declare function Content(props: ContentProps): import("react/jsx-runtime").JSX.Element;
 interface ContentWrapperProps {
     singleClusterMode: boolean;
     isAuthenticated: boolean;
     children: React.ReactNode;
 }
-declare function ContentWrapper(props: ContentWrapperProps): JSX.Element;
-declare const _default: import("react-redux").ConnectedComponent<typeof ContentWrapper, import("react-redux").Omit<ContentWrapperProps, "singleClusterMode" | "isAuthenticated">>;
+declare function ContentWrapper(props: ContentWrapperProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof ContentWrapper, {
+    children: React.ReactNode;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+}>;
 export default _default;

package/dist/containers/App/Content.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Switch, Route, Redirect } from 'react-router-dom';
-import cn from 'bem-cn-lite';
-import { connect } from 'react-redux';
+import { connect, shallowEqual } from 'react-redux';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { useSlots } from '../../components/slots';
 import routes from '../../routes';
-import { Clusters } from '../Clusters/Clusters';
+import { getUser } from '../../store/reducers/authentication/authentication';
+import { nodesListApi } from '../../store/reducers/nodesList';
+import { cn } from '../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import Authentication from '../Authentication/Authentication';
 import Cluster from '../Cluster/Cluster';
-import Tenant from '../Tenant/Tenant';
+import { getClusterPath } from '../Cluster/utils';
+import { Clusters } from '../Clusters/Clusters';
+import Header from '../Header/Header';
 import Node from '../Node/Node';
-import { PDisk } from '../PDisk/PDisk';
+import { PDiskPage } from '../PDiskPage/PDiskPage';
 import { Tablet } from '../Tablet';
 import TabletsFilters from '../TabletsFilters/TabletsFilters';
-import Header from '../Header/Header';
-import Authentication from '../Authentication/Authentication';
-import { getUser } from '../../store/reducers/authentication/authentication';
-import { getClusterPath } from '../Cluster/utils';
-import { useSlots } from '../../components/slots';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { ClusterSlot, ClustersSlot, NodeSlot, PDiskSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, } from './appSlots';
+import Tenant from '../Tenant/Tenant';
+import { VDiskPage } from '../VDiskPage/VDiskPage';
+import { ClusterSlot, ClustersSlot, NodeSlot, PDiskPageSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, VDiskPageSlot, } from './appSlots';
 import i18n from './i18n';
 import './App.scss';
 const b = cn('app');
@@ -39,8 +41,13 @@ const routesSlots = [
     },
     {
         path: routes.pDisk,
-        slot: PDiskSlot,
-        component: PDisk,
+        slot: PDiskPageSlot,
+        component: PDiskPage,
+    },
+    {
+        path: routes.vDisk,
+        slot: VDiskPageSlot,
+        component: VDiskPage,
     },
     {
         path: routes.tablet,
@@ -67,7 +74,7 @@ function renderRouteSlot(slots, route) {
             else {
                 content = slot.rendered;
             }
-            return _jsx("main", Object.assign({ className: b('main') }, { children: content }));
+            return _jsx("main", { className: b('main'), children: content });
         } }, route.path));
 }
 export function Content(props) {
@@ -88,7 +95,7 @@ export function Content(props) {
                     exact: true,
                     component: Clusters,
                     slot: ClustersSlot,
-                }), additionalRoutes === null || additionalRoutes === void 0 ? void 0 : additionalRoutes.rendered, _jsxs(Route, { children: [_jsx(GetUser, {}), _jsx(Header, { mainPage: mainPage }), _jsxs(Switch, { children: [routesSlots.map((route) => {
+                }), additionalRoutes === null || additionalRoutes === void 0 ? void 0 : additionalRoutes.rendered, _jsxs(Route, { children: [_jsx(GetUser, {}), _jsx(GetNodesList, {}), _jsx(Header, { mainPage: mainPage }), _jsxs(Switch, { children: [routesSlots.map((route) => {
                                 return renderRouteSlot(slots, route);
                             }), _jsx(Redirect, Object.assign({}, redirectProps))] })] }, "single-cluster")] }));
 }
@@ -97,7 +104,7 @@ function GetUser() {
     const { isAuthenticated, isInternalUser } = useTypedSelector((state) => ({
         isAuthenticated: state.authentication.isAuthenticated,
         isInternalUser: Boolean(state.authentication.user),
-    }));
+    }), shallowEqual);
     React.useEffect(() => {
         if (isAuthenticated && !isInternalUser) {
             dispatch(getUser());
@@ -105,9 +112,13 @@ function GetUser() {
     }, [dispatch, isAuthenticated, isInternalUser]);
     return null;
 }
+function GetNodesList() {
+    nodesListApi.useGetNodesListQuery(undefined);
+    return null;
+}
 function ContentWrapper(props) {
     const { singleClusterMode, isAuthenticated } = props;
-    return (_jsxs(Switch, { children: [_jsx(Route, Object.assign({ path: routes.auth }, { children: _jsx(Authentication, { closable: true }) })), _jsx(Route, { children: _jsx("div", Object.assign({ className: b({ embedded: singleClusterMode }) }, { children: isAuthenticated ? props.children : _jsx(Authentication, {}) })) })] }));
+    return (_jsxs(Switch, { children: [_jsx(Route, { path: routes.auth, children: _jsx(Authentication, { closable: true }) }), _jsx(Route, { children: _jsx("div", { className: b({ embedded: singleClusterMode }), children: isAuthenticated ? props.children : _jsx(Authentication, {}) }) })] }));
 }
 function mapStateToProps(state) {
     return {

package/dist/containers/App/Providers.d.ts

@@ -8,5 +8,5 @@ interface ProvidersProps {
     componentsRegistry?: ComponentsRegistry;
     children: React.ReactNode;
 }
-export declare function Providers({ store, history, componentsRegistry, children, }: ProvidersProps): JSX.Element;
+export declare function Providers({ store, history, componentsRegistry, children, }: ProvidersProps): import("react/jsx-runtime").JSX.Element;
 export {};