ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/components/EntityStatus/EntityStatus.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { EFlag } from '../../types/api/enums';
-import { type StatusIconMode, type StatusIconSize } from '../StatusIcon/StatusIcon';
+import type { StatusIconMode, StatusIconSize } from '../StatusIcon/StatusIcon';
 import './EntityStatus.scss';
 interface EntityStatusProps {
     status?: EFlag;
@@ -17,5 +16,5 @@ interface EntityStatusProps {
     clipboardButtonAlwaysVisible?: boolean;
     className?: string;
 }
-export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, }: EntityStatusProps): JSX.Element;
+export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, }: EntityStatusProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from 'react-router-dom';
-import cn from 'bem-cn-lite';
 import { Link as UIKitLink } from '@gravity-ui/uikit';
+import { Link } from 'react-router-dom';
 import { EFlag } from '../../types/api/enums';
-import { StatusIcon } from '../StatusIcon/StatusIcon';
+import { cn } from '../../utils/cn';
 import { ClipboardButton } from '../ClipboardButton';
+import { StatusIcon } from '../StatusIcon/StatusIcon';
 import './EntityStatus.scss';
 const b = cn('entity-status');
 export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, }) {
@@ -12,18 +12,21 @@ export function EntityStatus({ status = EFlag.Grey, name = '', label, path, icon
         if (!showStatus) {
             return null;
         }
-        return _jsx(StatusIcon, { status: status, size: size, mode: mode });
+        return _jsx(StatusIcon, { className: b('icon'), status: status, size: size, mode: mode });
     };
-    const renderStatusLink = () => {
-        return (_jsx(UIKitLink, Object.assign({ target: "_blank", href: iconPath }, { children: renderIcon() })));
+    const renderStatusLink = (href) => {
+        return (_jsx(UIKitLink, { target: "_blank", href: href, children: renderIcon() }));
     };
     const renderLink = () => {
-        if (externalLink) {
-            return (_jsx(UIKitLink, Object.assign({ className: b('name'), href: path }, { children: name })));
+        if (path) {
+            if (externalLink) {
+                return (_jsx(UIKitLink, { className: b('name'), href: path, children: name }));
+            }
+            return (_jsx(Link, { className: b('name'), to: path, children: name }));
         }
-        return path ? (_jsx(Link, Object.assign({ className: b('name'), to: path }, { children: name }))) : (name && _jsx("span", Object.assign({ className: b('name') }, { children: name })));
+        return name && _jsx("span", { className: b('name'), children: name });
     };
-    return (_jsxs("div", Object.assign({ className: b(null, className), title: name }, { children: [iconPath ? renderStatusLink() : renderIcon(), label && (_jsx("span", Object.assign({ title: label, className: b('label', { size, state: status.toLowerCase() }) }, { children: label }))), _jsx("span", Object.assign({ className: b('link', { 'with-left-trim': withLeftTrim }) }, { children: renderLink() })), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
+    return (_jsxs("div", { className: b(null, className), title: name, children: [iconPath ? renderStatusLink(iconPath) : renderIcon(), label && (_jsx("span", { title: label, className: b('label', { size, state: status.toLowerCase() }), children: label })), _jsx("span", { className: b('link', { 'with-left-trim': withLeftTrim }), children: renderLink() }), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
                     visible: clipboardButtonAlwaysVisible,
-                }) }))] })));
+                }) }))] }));
 }

package/dist/components/EntityStatus/EntityStatus.scss

@@ -9,6 +9,10 @@
 
     @include body-2-typography();
 
+    &__icon {
+        margin-right: 8px;
+    }
+
     &__clipboard-button {
         visibility: hidden;
 

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,19 +1,19 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 import './ErrorBoundary.scss';
 export declare function ErrorBoundary({ children }: {
-    children?: ReactNode;
-}): JSX.Element;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 interface ErrorBoundaryProps {
-    children?: ReactNode;
+    children?: React.ReactNode;
     useRetry?: boolean;
     onReportProblem?: (error?: Error) => void;
 }
-export declare function ErrorBoundaryInner({ children, useRetry, onReportProblem, }: ErrorBoundaryProps): JSX.Element;
+export declare function ErrorBoundaryInner({ children, useRetry, onReportProblem, }: ErrorBoundaryProps): import("react/jsx-runtime").JSX.Element;
 interface ErrorBoundaryFallbackProps {
     error: Error;
     useRetry?: boolean;
     resetErrorBoundary?: () => void;
     onReportProblem?: (error?: Error) => void;
 }
-export declare function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }: ErrorBoundaryFallbackProps): JSX.Element;
+export declare function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }: ErrorBoundaryFallbackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ErrorBoundary/ErrorBoundary.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ErrorBoundary as ErrorBoundaryBase } from 'react-error-boundary';
-import cn from 'bem-cn-lite';
 import { Button, Disclosure } from '@gravity-ui/uikit';
+import { ErrorBoundary as ErrorBoundaryBase } from 'react-error-boundary';
+import { cn } from '../../utils/cn';
 import { registerError } from '../../utils/registerError';
-import { Illustration } from '../Illustration';
 import { useComponent } from '../ComponentsProvider/ComponentsProvider';
+import { Illustration } from '../Illustration';
 import i18n from './i18n';
 import './ErrorBoundary.scss';
 const b = cn('ydb-error-boundary');
@@ -13,12 +13,13 @@ export function ErrorBoundary({ children }) {
     return _jsx(ErrorBoundaryComponent, { children: children });
 }
 export function ErrorBoundaryInner({ children, useRetry = true, onReportProblem, }) {
-    return (_jsx(ErrorBoundaryBase, Object.assign({ onError: (error, info) => {
-            registerError(error, info.componentStack, 'error-boundary');
+    return (_jsx(ErrorBoundaryBase, { onError: (error, info) => {
+            var _a;
+            registerError(error, (_a = info.componentStack) !== null && _a !== void 0 ? _a : undefined, 'error-boundary');
         }, fallbackRender: ({ error, resetErrorBoundary }) => {
             return (_jsx(ErrorBoundaryFallback, { error: error, useRetry: useRetry, resetErrorBoundary: resetErrorBoundary, onReportProblem: onReportProblem }));
-        } }, { children: children })));
+        }, children: children }));
 }
 export function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }) {
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Illustration, { name: "error", className: b('illustration') }), _jsxs("div", Object.assign({ className: b('content') }, { children: [_jsx("h2", Object.assign({ className: b('error-title') }, { children: i18n('error-title') })), _jsx("div", Object.assign({ className: b('error-description') }, { children: i18n('error-description') })), _jsx(Disclosure, Object.assign({ summary: i18n('show-details'), className: b('show-details'), size: "m" }, { children: _jsx("pre", Object.assign({ className: b('error-details') }, { children: error.stack })) })), _jsxs("div", Object.assign({ className: b('actions') }, { children: [useRetry && (_jsx(Button, Object.assign({ view: "outlined", onClick: resetErrorBoundary }, { children: i18n('button-reset') }))), onReportProblem && (_jsx(Button, Object.assign({ view: "outlined", onClick: () => onReportProblem(error) }, { children: i18n('report-problem') })))] }))] }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsx(Illustration, { name: "error", className: b('illustration') }), _jsxs("div", { className: b('content'), children: [_jsx("h2", { className: b('error-title'), children: i18n('error-title') }), _jsx("div", { className: b('error-description'), children: i18n('error-description') }), _jsx(Disclosure, { summary: i18n('show-details'), className: b('show-details'), size: "m", children: _jsx("pre", { className: b('error-details'), children: error.stack }) }), _jsxs("div", { className: b('actions'), children: [useRetry && (_jsx(Button, { view: "outlined", onClick: resetErrorBoundary, children: i18n('button-reset') })), onReportProblem && (_jsx(Button, { view: "outlined", onClick: () => onReportProblem(error), children: i18n('report-problem') }))] })] })] }));
 }

package/dist/components/ErrorBoundary/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: "error-title" | "error-description" | "show-details" | "report-problem" | "button-reset", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/components/ErrorBoundary/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-error-boundary';
-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/Errors/403/AccessDenied.d.ts

@@ -1,7 +1,7 @@
-import { type EmptyStateProps } from '../../EmptyState';
+import type { EmptyStateProps } from '../../EmptyState';
 interface AccessDeniedProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
     title?: string;
     description?: string;
 }
-export declare const AccessDenied: ({ title, description, ...restProps }: AccessDeniedProps) => JSX.Element;
+export declare const AccessDenied: ({ title, description, ...restProps }: AccessDeniedProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Errors/ResponseError/ResponseError.d.ts

@@ -1,8 +1,7 @@
-import type { IResponseError } from '../../../types/api/error';
 interface ResponseErrorProps {
-    error?: IResponseError;
+    error?: unknown;
     className?: string;
     defaultMessage?: string;
 }
-export declare const ResponseError: ({ error, className, defaultMessage, }: ResponseErrorProps) => JSX.Element;
+export declare const ResponseError: ({ error, className, defaultMessage, }: ResponseErrorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Errors/ResponseError/ResponseError.js

@@ -1,5 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import i18n from '../i18n';
 export const ResponseError = ({ error, className, defaultMessage = i18n('responseError.defaultMessage'), }) => {
-    return _jsx("div", Object.assign({ className: `error ${className}` }, { children: (error === null || error === void 0 ? void 0 : error.statusText) || defaultMessage }));
+    let statusText = '';
+    if (error && typeof error === 'object') {
+        if ('statusText' in error && typeof error.statusText === 'string') {
+            statusText = error.statusText;
+        }
+        else if ('message' in error && typeof error.message === 'string') {
+            statusText = error.message;
+        }
+    }
+    return _jsx("div", { className: `error ${className}`, children: statusText || defaultMessage });
 };

package/dist/components/Errors/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: "403.title" | "403.description" | "responseError.defaultMessage", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/components/Errors/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-errors-access-denied';
-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/FormattedBytes/FormattedBytes.d.ts

@@ -1,4 +1,4 @@
-import { FormatBytesArgs } from '../../utils/bytesParsers';
+import type { FormatBytesArgs } from '../../utils/bytesParsers';
 type FormattedBytesProps = FormatBytesArgs;
-export declare const FormattedBytes: ({ value, withSpeedLabel, ...params }: FormattedBytesProps) => JSX.Element;
+export declare const FormattedBytes: ({ value, withSpeedLabel, ...params }: FormattedBytesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FormattedBytes/FormattedBytes.js

@@ -5,5 +5,5 @@ export const FormattedBytes = (_a) => {
     var { value, withSpeedLabel } = _a, params = __rest(_a, ["value", "withSpeedLabel"]);
     const formatted = formatBytes(Object.assign({ value, withSpeedLabel }, params));
     const bytes = formatBytes({ value, withSpeedLabel, size: 'b' });
-    return _jsx("span", Object.assign({ title: bytes }, { children: formatted }));
+    return _jsx("span", { title: bytes, children: formatted });
 };

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

@@ -1,2 +1,2 @@
 import type { FormatBytesArgs } from '../../utils/bytesParsers';
-export declare const toFormattedSize: (value: number | string | undefined, params?: Omit<FormatBytesArgs, 'value'>) => JSX.Element | null;
+export declare const toFormattedSize: (value: number | string | undefined, params?: Omit<FormatBytesArgs, 'value'>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/FullNodeViewer/FullNodeViewer.d.ts

@@ -4,5 +4,5 @@ interface FullNodeViewerProps {
     node: PreparedNode | undefined;
     className?: string;
 }
-export declare const FullNodeViewer: ({ node, className }: FullNodeViewerProps) => JSX.Element;
+export declare const FullNodeViewer: ({ node, className }: FullNodeViewerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import { LOAD_AVERAGE_TIME_INTERVALS } from '../../utils/constants';
 import InfoViewer from '../InfoViewer/InfoViewer';
-import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import { PoolUsage } from '../PoolUsage/PoolUsage';
+import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import './FullNodeViewer.scss';
 const b = cn('full-node-viewer');
 export const FullNodeViewer = ({ node, className }) => {
@@ -22,5 +22,5 @@ export const FullNodeViewer = ({ node, className }) => {
         label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
         value: (_jsx(ProgressViewer, { value: load, percents: true, colorizeProgress: true, capacity: 100 })),
     }));
-    return (_jsx("div", Object.assign({ className: `${b()} ${className}` }, { children: node ? (_jsxs("div", Object.assign({ className: b('common-info') }, { children: [_jsxs("div", { children: [_jsx("div", Object.assign({ className: b('section-title') }, { children: "Pools" })), _jsx("div", Object.assign({ className: b('section', { pools: true }) }, { children: (_d = node === null || node === void 0 ? void 0 : node.PoolStats) === null || _d === void 0 ? void 0 : _d.map((pool, poolIndex) => (_jsx(PoolUsage, { data: pool }, poolIndex))) }))] }), endpointsInfo && endpointsInfo.length && (_jsx(InfoViewer, { title: "Endpoints", className: b('section'), info: endpointsInfo })), _jsx(InfoViewer, { title: "Common info", className: b('section'), info: commonInfo }), _jsx(InfoViewer, { title: "Load average", className: b('section', { average: true }), info: averageInfo })] }))) : (_jsx("div", Object.assign({ className: "error" }, { children: "no data" }))) })));
+    return (_jsx("div", { className: `${b()} ${className}`, children: node ? (_jsxs("div", { className: b('common-info'), children: [_jsxs("div", { children: [_jsx("div", { className: b('section-title'), children: "Pools" }), _jsx("div", { className: b('section', { pools: true }), children: (_d = node === null || node === void 0 ? void 0 : node.PoolStats) === null || _d === void 0 ? void 0 : _d.map((pool, poolIndex) => (_jsx(PoolUsage, { data: pool }, poolIndex))) })] }), endpointsInfo && endpointsInfo.length && (_jsx(InfoViewer, { title: "Endpoints", className: b('section'), info: endpointsInfo })), _jsx(InfoViewer, { title: "Common info", className: b('section'), info: commonInfo }), _jsx(InfoViewer, { title: "Load average", className: b('section', { average: true }), info: averageInfo })] })) : (_jsx("div", { className: "error", children: "no data" })) }));
 };

package/dist/components/Fullscreen/Fullscreen.d.ts

@@ -4,5 +4,5 @@ interface FullscreenProps {
     children: React.ReactNode;
     className?: string;
 }
-declare function Fullscreen(props: FullscreenProps): JSX.Element;
+declare function Fullscreen(props: FullscreenProps): import("react/jsx-runtime").JSX.Element;
 export default Fullscreen;

package/dist/components/Fullscreen/Fullscreen.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
 import { Button } from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import { useTypedDispatch } from '../../utils/hooks';
+import ReactDOM from 'react-dom';
 import { disableFullscreen } from '../../store/reducers/fullscreen';
+import { cn } from '../../utils/cn';
+import { useTypedDispatch } from '../../utils/hooks';
 import { Icon } from '../Icon';
 import './Fullscreen.scss';
 const b = cn('kv-fullscreen');
@@ -34,7 +34,7 @@ function Fullscreen(props) {
     const onDisableFullScreen = React.useCallback(() => {
         dispatch(disableFullscreen());
     }, [dispatch]);
-    useEffect(() => {
+    React.useEffect(() => {
         const escFunction = (event) => {
             if (event.key === 'Escape') {
                 onDisableFullScreen();
@@ -45,6 +45,6 @@ function Fullscreen(props) {
             document.removeEventListener('keydown', escFunction, false);
         };
     }, [onDisableFullScreen]);
-    return (_jsx(FullscreenWrapper, { children: _jsxs("div", Object.assign({ className: b(null, props.className) }, { children: [_jsx(Button, Object.assign({ onClick: onDisableFullScreen, view: "raised", className: b('close-button') }, { children: _jsx(Icon, { name: "disableFullscreen", viewBox: '0 0 16 16 ', width: 16, height: 16 }) })), props.children] })) }));
+    return (_jsx(FullscreenWrapper, { children: _jsxs("div", { className: b(null, props.className), children: [_jsx(Button, { onClick: onDisableFullScreen, view: "raised", className: b('close-button'), children: _jsx(Icon, { name: "disableFullscreen", viewBox: '0 0 16 16 ', width: 16, height: 16 }) }), props.children] }) }));
 }
 export default Fullscreen;

package/dist/components/Fullscreen/Fullscreen.scss

@@ -3,10 +3,7 @@
     // counts on .gn-aside-header__content to have position: relative, it is set in App.scss
     position: absolute;
     z-index: 10;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
 
     display: flex;
     overflow: hidden;

package/dist/components/GroupInfo/GroupInfo.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { PreparedStorageGroup } from '../../store/reducers/storage/types';
 import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
 interface GroupInfoProps<T extends Partial<PreparedStorageGroup>> extends Omit<InfoViewerProps, 'info'> {
     data: T;
 }
-export declare function GroupInfo<T extends Partial<PreparedStorageGroup>>({ data, ...infoViewerProps }: GroupInfoProps<T>): JSX.Element;
+export declare function GroupInfo<T extends Partial<PreparedStorageGroup>>({ data, ...infoViewerProps }: GroupInfoProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Icon/Icon.d.ts

@@ -8,7 +8,7 @@ interface IconProps {
     onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
 }
 export declare const Icon: {
-    ({ name, height, width, viewBox, className, onClick, }: IconProps): JSX.Element;
+    ({ name, height, width, viewBox, className, onClick, }: IconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/Illustration/Illustration.d.ts

@@ -1,6 +1,6 @@
-import { ImgHTMLAttributes } from 'react';
-export interface IllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
+import React from 'react';
+export interface IllustrationProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     name: string;
     className?: string;
 }
-export declare const Illustration: ({ name, className, ...props }: IllustrationProps) => JSX.Element;
+export declare const Illustration: ({ name, className, ...props }: IllustrationProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Illustration/Illustration.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { useThemeValue } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 const store = {
     light: {
         403: () => import('../../assets/illustrations/light/403.svg'),
@@ -19,9 +19,9 @@ const b = cn('kv-illustration');
 export const Illustration = (_a) => {
     var { name, className } = _a, props = __rest(_a, ["name", "className"]);
     const theme = useThemeValue();
-    const [src, setSrc] = useState('');
+    const [src, setSrc] = React.useState('');
     const srcGetter = store[theme] && store[theme][name];
-    useEffect(() => {
+    React.useEffect(() => {
         if (typeof srcGetter === 'function') {
             srcGetter()
                 .then((svg) => setSrc(svg.default))
@@ -31,5 +31,5 @@ export const Illustration = (_a) => {
             });
         }
     }, [srcGetter]);
-    return _jsx("img", Object.assign({ alt: name, src: src, className: b(null, className) }, props));
+    return src ? _jsx("img", Object.assign({ alt: name, src: src, className: b(null, className) }, props)) : null;
 };

package/dist/components/InfoViewer/InfoViewer.d.ts

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
+import React from 'react';
 import './InfoViewer.scss';
 export interface InfoViewerItem {
-    label: ReactNode;
-    value: ReactNode;
+    label: React.ReactNode;
+    value: React.ReactNode;
 }
 export interface InfoViewerProps {
     title?: string;
@@ -11,7 +11,7 @@ export interface InfoViewerProps {
     size?: 's';
     className?: string;
     multilineLabels?: boolean;
-    renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => ReactNode;
+    renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => React.ReactNode;
 }
-export declare const InfoViewer: ({ title, info, dots, size, className, multilineLabels, renderEmptyState, }: InfoViewerProps) => JSX.Element;
+export declare const InfoViewer: ({ title, info, dots, size, className, multilineLabels, renderEmptyState, }: InfoViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default InfoViewer;

package/dist/components/InfoViewer/InfoViewer.js

@@ -1,11 +1,12 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../utils/cn';
 import './InfoViewer.scss';
 const b = cn('info-viewer');
 export const InfoViewer = ({ title, info, dots = true, size, className, multilineLabels, renderEmptyState, }) => {
     if ((!info || !info.length) && renderEmptyState) {
-        return _jsx(_Fragment, { children: renderEmptyState({ title, size }) });
+        return _jsx(React.Fragment, { children: renderEmptyState({ title, size }) });
     }
-    return (_jsxs("div", Object.assign({ className: b({ size }, className) }, { children: [title && _jsx("div", Object.assign({ className: b('title') }, { children: title })), info && info.length > 0 ? (_jsx("div", Object.assign({ className: b('items') }, { children: info.map((data, infoIndex) => (_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsxs("div", Object.assign({ className: b('label') }, { children: [_jsx("div", Object.assign({ className: b('label-text', { multiline: multilineLabels }) }, { children: data.label })), dots && _jsx("div", { className: b('dots') })] })), _jsx("div", Object.assign({ className: b('value') }, { children: data.value }))] }), infoIndex))) }))) : (_jsxs(_Fragment, { children: ["No ", title, " data"] }))] })));
+    return (_jsxs("div", { className: b({ size }, className), children: [title && _jsx("div", { className: b('title'), children: title }), info && info.length > 0 ? (_jsx("div", { className: b('items'), children: info.map((data, infoIndex) => (_jsxs("div", { className: b('row'), children: [_jsxs("div", { className: b('label'), children: [_jsx("div", { className: b('label-text', { multiline: multilineLabels }), children: data.label }), dots && _jsx("div", { className: b('dots') })] }), _jsx("div", { className: b('value'), children: data.value })] }, infoIndex))) })) : (_jsxs(React.Fragment, { children: ["No ", title, " data"] }))] }));
 };
 export default InfoViewer;

package/dist/components/InfoViewer/formatters/cdcStream.d.ts

@@ -1,5 +1,6 @@
-import { TCdcStreamDescription } from '../../../types/api/schema';
+/// <reference types="react" />
+import type { TCdcStreamDescription } from '../../../types/api/schema';
 export declare const formatCdcStreamItem: <Key extends keyof TCdcStreamDescription>(label: Key, value: TCdcStreamDescription[Key]) => {
     label: string;
-    value: {} | TCdcStreamDescription[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TCdcStreamDescription[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/common.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import type { TDirEntry } from '../../../types/api/schema';
 export declare const formatCommonItem: <Key extends keyof TDirEntry>(label: Key, value: TDirEntry[Key]) => {
     label: string;
-    value: {} | TDirEntry[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TDirEntry[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/common.js

@@ -1,6 +1,6 @@
 import { formatDateTime } from '../../../utils/dataFormatters/dataFormatters';
-import { createInfoFormatter } from '../utils';
 import i18n from '../i18n';
+import { createInfoFormatter } from '../utils';
 export const formatCommonItem = createInfoFormatter({
     values: {
         PathType: (value) => value === null || value === void 0 ? void 0 : value.substring('EPathType'.length),

package/dist/components/InfoViewer/formatters/pqGroup.d.ts

@@ -1,13 +1,14 @@
-import { TPersQueueGroupDescription, TPQPartitionConfig, TPQTabletConfig } from '../../../types/api/schema';
+/// <reference types="react" />
+import type { TPQPartitionConfig, TPQTabletConfig, TPersQueueGroupDescription } from '../../../types/api/schema';
 export declare const formatPQGroupItem: <Key extends keyof TPersQueueGroupDescription>(label: Key, value: TPersQueueGroupDescription[Key]) => {
     label: string;
-    value: {} | TPersQueueGroupDescription[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TPersQueueGroupDescription[Key] | null | undefined;
 };
 export declare const formatPQTabletConfig: <Key extends keyof TPQTabletConfig>(label: Key, value: TPQTabletConfig[Key]) => {
     label: string;
-    value: {} | TPQTabletConfig[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TPQTabletConfig[Key] | null | undefined;
 };
 export declare const formatPQPartitionConfig: <Key extends keyof TPQPartitionConfig>(label: Key, value: TPQPartitionConfig[Key]) => {
     label: string;
-    value: {} | TPQPartitionConfig[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TPQPartitionConfig[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/pqGroup.js

@@ -1,6 +1,6 @@
-import { EMeteringMode, } from '../../../types/api/schema';
-import { formatBps, formatBytes, formatNumber } from '../../../utils/dataFormatters/dataFormatters';
+import { EMeteringMode } from '../../../types/api/schema';
 import { HOUR_IN_SECONDS } from '../../../utils/constants';
+import { formatBps, formatBytes, formatNumber } from '../../../utils/dataFormatters/dataFormatters';
 import { createInfoFormatter } from '../utils';
 const EMeteringModeToNames = {
     [EMeteringMode.METERING_MODE_REQUEST_UNITS]: 'request-units',

package/dist/components/InfoViewer/formatters/schema.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import type { TIndexDescription } from '../../../types/api/schema';
 export declare const formatTableIndexItem: <Key extends keyof TIndexDescription>(label: Key, value: TIndexDescription[Key]) => {
     label: string;
-    value: {} | TIndexDescription[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TIndexDescription[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/schema.js

@@ -2,8 +2,8 @@ import { toFormattedSize } from '../../FormattedBytes/utils';
 import { createInfoFormatter } from '../utils';
 export const formatTableIndexItem = createInfoFormatter({
     values: {
-        Type: (value) => value === null || value === void 0 ? void 0 : value.substring(10),
-        State: (value) => value === null || value === void 0 ? void 0 : value.substring(11),
+        Type: (value) => value === null || value === void 0 ? void 0 : value.substring(10), // trims EIndexType prefix
+        State: (value) => value === null || value === void 0 ? void 0 : value.substring(11), // trims EIndexState prefix
         KeyColumnNames: (value) => value === null || value === void 0 ? void 0 : value.join(', '),
         DataColumnNames: (value) => value === null || value === void 0 ? void 0 : value.join(', '),
         DataSize: toFormattedSize,

package/dist/components/InfoViewer/formatters/table.d.ts

@@ -1,18 +1,19 @@
+/// <reference types="react" />
 import type { TFollowerGroup, TPartitionConfig, TTableStats } from '../../../types/api/schema';
 import type { TMetrics } from '../../../types/api/tenant';
 export declare const formatTabletMetricsItem: <Key extends keyof TMetrics>(label: Key, value: TMetrics[Key]) => {
     label: string;
-    value: {} | TMetrics[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TMetrics[Key] | null | undefined;
 };
 export declare const formatFollowerGroupItem: <Key extends keyof TFollowerGroup>(label: Key, value: TFollowerGroup[Key]) => {
     label: string;
-    value: {} | TFollowerGroup[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TFollowerGroup[Key] | null | undefined;
 };
 export declare const formatPartitionConfigItem: <Key extends keyof TPartitionConfig>(label: Key, value: TPartitionConfig[Key]) => {
     label: string;
-    value: {} | TPartitionConfig[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TPartitionConfig[Key] | null | undefined;
 };
 export declare const formatTableStatsItem: <Key extends keyof TTableStats>(label: Key, value: TTableStats[Key]) => {
     label: string;
-    value: {} | TTableStats[Key] | null | undefined;
+    value: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | TTableStats[Key] | null | undefined;
 };

package/dist/components/InfoViewer/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: "common.created" | "common.type", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/components/InfoViewer/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-components-info-viewer';
-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/InfoViewer/schemaInfo/TableIndexInfo.d.ts

@@ -2,5 +2,5 @@ import type { TEvDescribeSchemeResult } from '../../../types/api/schema';
 interface TableIndexInfoProps {
     data?: TEvDescribeSchemeResult;
 }
-export declare const TableIndexInfo: ({ data }: TableIndexInfoProps) => JSX.Element;
+export declare const TableIndexInfo: ({ data }: TableIndexInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoViewer/schemaInfo/TableIndexInfo.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { InfoViewer } from '..';
 import { getEntityName } from '../../../containers/Tenant/utils';
 import { formatTableIndexItem } from '../formatters';
-import { InfoViewer } from '..';
 const DISPLAYED_FIELDS = new Set([
     'Type',
     'State',
@@ -13,7 +13,7 @@ export const TableIndexInfo = ({ data }) => {
     var _a;
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
     if (!data) {
-        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+        return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
     const TableIndex = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.TableIndex;
     const info = [];

package/dist/components/InfoViewer/schemaOverview/CDCStreamOverview.d.ts

@@ -2,5 +2,5 @@ import type { TEvDescribeSchemeResult } from '../../../types/api/schema';
 interface CDCStreamOverviewProps {
     data?: TEvDescribeSchemeResult;
 }
-export declare const CDCStreamOverview: ({ data }: CDCStreamOverviewProps) => JSX.Element;
+export declare const CDCStreamOverview: ({ data }: CDCStreamOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};