ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/components/QueryResultTable/QueryResultTable.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
+import { cn } from '../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { getColumnType, prepareQueryResponse } from '../../utils/query';
 import { isNumeric } from '../../utils/utils';
@@ -49,18 +49,18 @@ const prepareGenericColumns = (data) => {
 const getRowIndex = (_, index) => index;
 export const QueryResultTable = (props) => {
     const { columns: rawColumns, data: rawData, settings: settingsMix } = props, restProps = __rest(props, ["columns", "data", "settings"]);
-    const data = useMemo(() => prepareQueryResponse(rawData), [rawData]);
-    const columns = useMemo(() => {
+    const data = React.useMemo(() => prepareQueryResponse(rawData), [rawData]);
+    const columns = React.useMemo(() => {
         return rawColumns ? prepareTypedColumns(rawColumns) : prepareGenericColumns(data);
     }, [data, rawColumns]);
-    const settings = useMemo(() => (Object.assign(Object.assign({}, TABLE_SETTINGS), settingsMix)), [settingsMix]);
+    const settings = React.useMemo(() => (Object.assign(Object.assign({}, TABLE_SETTINGS), settingsMix)), [settingsMix]);
     // empty data is expected to be be an empty array
     // undefined data is not rendered at all
     if (!Array.isArray(rawData)) {
         return null;
     }
     if (!columns.length) {
-        return _jsx("div", Object.assign({ className: b('message') }, { children: i18n('empty') }));
+        return _jsx("div", { className: b('message'), children: i18n('empty') });
     }
     return (_jsx(DataTable, Object.assign({ theme: "yandex-cloud", data: data, columns: columns, settings: settings, 
         // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)

package/dist/components/QueryResultTable/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/QueryResultTable/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-query-result-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/Search/Search.d.ts

@@ -6,5 +6,5 @@ interface SearchProps {
     debounce?: number;
     placeholder?: string;
 }
-export declare const Search: ({ onChange, value, className, debounce, placeholder, }: SearchProps) => JSX.Element;
+export declare const Search: ({ onChange, value, className, debounce, placeholder, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Search/Search.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useState } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { TextInput } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import './Search.scss';
 const b = cn('ydb-search');
 export const Search = ({ onChange, value = '', className, debounce = 200, placeholder, }) => {
-    const [searchValue, setSearchValue] = useState(value);
-    const timer = useRef();
-    useEffect(() => {
+    const [searchValue, setSearchValue] = React.useState(value);
+    const timer = React.useRef();
+    React.useEffect(() => {
         setSearchValue((prevValue) => {
             if (prevValue !== value) {
                 return value;

package/dist/components/ShortyString/ShortyString.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import './ShortyString.scss';
 type Props = {
     value?: string;
@@ -11,5 +11,5 @@ type Props = {
     expandLabel?: string;
     collapseLabel?: string;
 };
-export default function ShortyString({ value, limit, strict, displayLength, render, onToggle, expandLabel, collapseLabel, }: Props): JSX.Element;
+export default function ShortyString({ value, limit, strict, displayLength, render, onToggle, expandLabel, collapseLabel, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ShortyString/ShortyString.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { Link } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import i18n from './i18n';
 import './ShortyString.scss';
 const block = cn('kv-shorty-string');
@@ -14,9 +14,10 @@ export default function ShortyString({ value = '', limit = 200, strict = false,
     // hence compare to limit + length in the not-strict mode
     const hasToggle = value.length > limit + (strict ? 0 : toggleLabel.length);
     const text = expanded || !hasToggle ? value : value.slice(0, limit - 4) + '\u00a0...';
-    return (_jsxs("div", Object.assign({ className: block() }, { children: [render(text), hasToggle ? (_jsx(Link, Object.assign({ className: block('toggle'), onClick: (e) => {
+    return (_jsxs("div", { className: block(), children: [render(text), hasToggle ? (_jsx(Link, { className: block('toggle'), href: "#", onClick: (e) => {
                     e.stopPropagation();
+                    e.preventDefault();
                     setExpanded((v) => !v);
                     onToggle === null || onToggle === void 0 ? void 0 : onToggle();
-                } }, { children: toggleLabel }))) : null] })));
+                }, children: toggleLabel })) : null] }));
 }

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

package/dist/components/ShortyString/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-shorty-string';
-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/SpeedMultiMeter/SpeedMultiMeter.d.ts

@@ -1,4 +1,4 @@
-import { BytesSizes, ProcessSpeedStats } from '../../utils/bytesParsers';
+import type { BytesSizes, ProcessSpeedStats } from '../../utils/bytesParsers';
 import './SpeedMultiMeter.scss';
 interface SpeedMultiMeterProps {
     data?: ProcessSpeedStats;
@@ -6,5 +6,5 @@ interface SpeedMultiMeterProps {
     withValue?: boolean;
     withPopover?: boolean;
 }
-export declare const SpeedMultiMeter: ({ data, speedSize, withValue, withPopover, }: SpeedMultiMeterProps) => JSX.Element;
+export declare const SpeedMultiMeter: ({ data, speedSize, withValue, withPopover, }: SpeedMultiMeterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { Popover } from '@gravity-ui/uikit';
 import { formatBytes } from '../../utils/bytesParsers';
-import './SpeedMultiMeter.scss';
+import { cn } from '../../utils/cn';
 import i18n from './i18n';
+import './SpeedMultiMeter.scss';
 const b = cn('speed-multimeter');
 export const SpeedMultiMeter = ({ data, speedSize = 'kb', withValue = true, withPopover = true, }) => {
     const { perMinute = 0, perHour = 0, perDay = 0 } = data || {};
@@ -15,9 +15,9 @@ export const SpeedMultiMeter = ({ data, speedSize = 'kb', withValue = true, with
         { value: formatValue(perHour), label: i18n('perHour') },
         { value: formatValue(perDay), label: i18n('perDay') },
     ];
-    const [valueToDisplay, setValueToDisplay] = useState(perMinute);
-    const [highlightedValueIndex, setHighlightedValueIndex] = useState(withValue ? 0 : undefined);
-    const [highlightedContainerIndex, setHighlightedContainerIndex] = useState();
+    const [valueToDisplay, setValueToDisplay] = React.useState(perMinute);
+    const [highlightedValueIndex, setHighlightedValueIndex] = React.useState(withValue ? 0 : undefined);
+    const [highlightedContainerIndex, setHighlightedContainerIndex] = React.useState();
     const onEnterDiagram = (values, index) => {
         setValueToDisplay(values[index]);
         setHighlightedValueIndex(index);
@@ -33,14 +33,14 @@ export const SpeedMultiMeter = ({ data, speedSize = 'kb', withValue = true, with
     const getModifier = (flag) => (flag ? { color: 'primary' } : { color: 'secondary' });
     const renderValues = () => {
         const max = Math.max(...rawValues, 0) || 1;
-        return rawValues.map((value, index) => (_jsx("div", Object.assign({ className: b('bar-container', {
+        return rawValues.map((value, index) => (_jsx("div", { className: b('bar-container', {
                 highlighted: isContainerHighlighted(index),
-            }), onMouseEnter: onEnterDiagram.bind(null, rawValues, index) }, { children: _jsx("div", { className: b('bar', {
+            }), onMouseEnter: onEnterDiagram.bind(null, rawValues, index), children: _jsx("div", { className: b('bar', {
                     color: isValueHighlighted(index) ? 'dark' : 'light',
-                }), style: { width: `${(100 * value) / max}%` } }) }), index)));
+                }), style: { width: `${(100 * value) / max}%` } }) }, index)));
     };
     const renderPopoverContent = () => {
-        return (_jsxs("div", Object.assign({ className: b('popover-content') }, { children: [_jsx("span", Object.assign({ className: b('popover-header') }, { children: i18n('averageSpeed') })), formattedValues.map((formattedValue, index) => (_jsx("span", Object.assign({ className: b('popover-row', getModifier(isValueHighlighted(index))) }, { children: `${formattedValue.label}: ${formattedValue.value}` }), index)))] })));
+        return (_jsxs("div", { className: b('popover-content'), children: [_jsx("span", { className: b('popover-header'), children: i18n('averageSpeed') }), formattedValues.map((formattedValue, index) => (_jsx("span", { className: b('popover-row', getModifier(isValueHighlighted(index))), children: `${formattedValue.label}: ${formattedValue.value}` }, index)))] }));
     };
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('content') }, { children: [withValue && (_jsx("div", Object.assign({ className: b('displayed-value') }, { children: formatValue(valueToDisplay) }))), _jsx(Popover, Object.assign({ content: renderPopoverContent(), className: b('popover-container'), placement: 'bottom', disabled: !withPopover, hasArrow: true, size: "s" }, { children: _jsx("div", Object.assign({ className: b('bars'), onMouseLeave: onLeaveDiagram }, { children: renderValues() })) }))] })) })));
+    return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('content'), children: [withValue && (_jsx("div", { className: b('displayed-value'), children: formatValue(valueToDisplay) })), _jsx(Popover, { content: renderPopoverContent(), className: b('popover-container'), placement: 'bottom', disabled: !withPopover, hasArrow: true, size: "s", children: _jsx("div", { className: b('bars'), onMouseLeave: onLeaveDiagram, children: renderValues() }) })] }) }));
 };

package/dist/components/SpeedMultiMeter/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: "averageSpeed" | "perMinute" | "perHour" | "perDay", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/components/SpeedMultiMeter/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-speed-multimeter';
-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/SplitPane/SplitPane.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SplitProps } from 'react-split';
+import type { SplitProps } from 'react-split';
 import './SplitPane.scss';
 interface SplitPaneProps {
     children: React.ReactNode;
@@ -14,5 +14,5 @@ interface SplitPaneProps {
     onSplitStartDragAdditional?: VoidFunction;
     onSplitDragAdditional?: VoidFunction;
 }
-declare function SplitPane(props: SplitPaneProps): JSX.Element;
+declare function SplitPane(props: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
 export default SplitPane;

package/dist/components/SplitPane/SplitPane.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import SplitPaneLib from 'react-split';
+import { cn } from '../../utils/cn';
 import './SplitPane.scss';
 const b = cn('kv-split');
 const minSizeDefaultInner = [0, 100];
 const sizesDefaultInner = [50, 50];
 function SplitPane(props) {
-    const [innerSizes, setInnerSizes] = useState();
+    const [innerSizes, setInnerSizes] = React.useState();
     const getDefaultSizePane = () => {
         var _a;
         const { defaultSizePaneKey, defaultSizes = sizesDefaultInner, initialSizes } = props;
@@ -35,7 +35,7 @@ function SplitPane(props) {
         }
         setInnerSizes(undefined);
     };
-    useEffect(() => {
+    React.useEffect(() => {
         const { collapsedSizes, triggerCollapse } = props;
         if (triggerCollapse) {
             const newSizes = collapsedSizes || minSizeDefaultInner;
@@ -43,7 +43,7 @@ function SplitPane(props) {
             setInnerSizes(newSizes);
         }
     }, [props.triggerCollapse]);
-    useEffect(() => {
+    React.useEffect(() => {
         const { triggerExpand, defaultSizes } = props;
         const newSizes = defaultSizes || sizesDefaultInner;
         if (triggerExpand) {
@@ -51,6 +51,6 @@ function SplitPane(props) {
             setInnerSizes(newSizes);
         }
     }, [props.triggerExpand]);
-    return (_jsx(React.Fragment, { children: _jsx(SplitPaneLib, Object.assign({ direction: props.direction || 'horizontal', sizes: innerSizes || getDefaultSizePane(), minSize: props.minSize || [0, 0], onDrag: onDragHandler, className: b(null, props.direction || 'horizontal'), gutterSize: 8, onDragStart: onDragStartHandler, expandToMin: true }, { children: props.children })) }));
+    return (_jsx(React.Fragment, { children: _jsx(SplitPaneLib, { direction: props.direction || 'horizontal', sizes: innerSizes || getDefaultSizePane(), minSize: props.minSize || [0, 0], onDrag: onDragHandler, className: b(null, props.direction || 'horizontal'), gutterSize: 8, onDragStart: onDragStartHandler, expandToMin: true, children: props.children }) }));
 }
 export default SplitPane;

package/dist/components/SplitPane/SplitPane.scss

@@ -28,10 +28,7 @@
 
         &::after {
             position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset: 0;
 
             content: '';
 

package/dist/components/SplitPane/index.d.ts

@@ -1,2 +1,2 @@
 export default SplitPane;
-import SplitPane from "./SplitPane";
+import SplitPane from './SplitPane';

package/dist/components/Stack/Stack.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './Stack.scss';
 interface StackProps {
     className?: string;
+    children: React.ReactNode;
 }
-export declare const Stack: React.FC<StackProps>;
+export declare const Stack: ({ children, className }: StackProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Stack/Stack.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import './Stack.scss';
 const LAYER_CSS_VAR = '--ydb-stack-level';
 const b = cn('stack');
-export const Stack = ({ children, className }) => (_jsx("div", Object.assign({ className: b(null, className) }, { children: React.Children.map(children, (child, index) => {
+export const Stack = ({ children, className }) => (_jsx("div", { className: b(null, className), children: React.Children.map(children, (child, index) => {
         if (!React.isValidElement(child)) {
             return null;
         }
-        return (_jsx("div", Object.assign({ className: b('layer'), style: {
+        return (_jsx("div", { className: b('layer'), style: {
                 [LAYER_CSS_VAR]: index,
-            } }, { children: child })));
-    }) })));
+            }, children: child }));
+    }) }));

package/dist/components/Stack/Stack.scss

@@ -8,6 +8,8 @@
     position: relative;
 
     &__layer {
+        background: var(--g-color-base-background);
+
         transition: transform 0.1s ease-out;
 
         &:first-child {
@@ -42,12 +44,14 @@
         .stack__layer + .stack__layer {
             transform: translate(
                 calc(
-                    var(--ydb-stack-level) * (var(--ydb-stack-offset-x-hover) * 2) -
-                        var(--ydb-stack-offset-x-hover)
+                    var(--ydb-stack-level) * (var(--ydb-stack-offset-x-hover) * 2) - var(
+                            --ydb-stack-offset-x-hover
+                        )
                 ),
                 calc(
-                    var(--ydb-stack-level) * (var(--ydb-stack-offset-y-hover) * 2) -
-                        var(--ydb-stack-offset-y-hover)
+                    var(--ydb-stack-level) * (var(--ydb-stack-offset-y-hover) * 2) - var(
+                            --ydb-stack-offset-y-hover
+                        )
                 )
             );
         }

package/dist/components/StatusIcon/StatusIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EFlag } from '../../types/api/enums';
 import './StatusIcon.scss';
 export type StatusIconMode = 'color' | 'icons';
@@ -7,6 +6,7 @@ interface StatusIconProps {
     status?: EFlag;
     size?: StatusIconSize;
     mode?: StatusIconMode;
+    className?: string;
 }
-export declare function StatusIcon({ status, size, mode }: StatusIconProps): JSX.Element;
+export declare function StatusIcon({ status, size, mode, className, }: StatusIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/StatusIcon/StatusIcon.js

@@ -1,23 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '@gravity-ui/uikit';
+import { EFlag } from '../../types/api/enums';
+import { cn } from '../../utils/cn';
 import CircleExclamationFillIcon from '@gravity-ui/icons/svgs/circle-exclamation-fill.svg';
 import CircleInfoFillIcon from '@gravity-ui/icons/svgs/circle-info-fill.svg';
-import CircleXmarkFillIcon from '@gravity-ui/icons/svgs/circle-xmark-fill.svg';
 import TriangleExclamationFillIcon from '@gravity-ui/icons/svgs/triangle-exclamation-fill.svg';
-import { EFlag } from '../../types/api/enums';
-import { cn } from '../../utils/cn';
 import './StatusIcon.scss';
 const b = cn('ydb-status-icon');
 const icons = {
     [EFlag.Blue]: CircleInfoFillIcon,
     [EFlag.Yellow]: CircleExclamationFillIcon,
     [EFlag.Orange]: TriangleExclamationFillIcon,
-    [EFlag.Red]: CircleXmarkFillIcon,
+    [EFlag.Red]: CircleExclamationFillIcon,
 };
-export function StatusIcon({ status = EFlag.Grey, size = 's', mode = 'color' }) {
+export function StatusIcon({ status = EFlag.Grey, size = 's', mode = 'color', className, }) {
     const modifiers = { state: status.toLowerCase(), size };
     if (mode === 'icons' && status in icons) {
-        return (_jsx(Icon, { className: b('status-icon', modifiers), data: icons[status] }));
+        return (_jsx(Icon, { className: b('status-icon', modifiers, className), data: icons[status] }));
     }
-    return _jsx("div", { className: b('status-color', modifiers) });
+    return _jsx("div", { className: b('status-color', modifiers, className) });
 }

package/dist/components/StatusIcon/StatusIcon.scss

@@ -39,8 +39,6 @@
     &__status-icon {
         flex-shrink: 0;
 
-        margin-right: 8px;
-
         border-radius: 3px;
         &_size_xs {
             aspect-ratio: 1;
@@ -62,8 +60,8 @@
         }
 
         &_size_l {
-            width: 27px;
-            height: 27px;
+            width: 24px;
+            height: 24px;
         }
     }
 }

package/dist/components/TableSkeleton/TableSkeleton.d.ts

@@ -1,8 +1,7 @@
-import { FC } from 'react';
 import './TableSkeleton.scss';
 interface TableSkeletonProps {
     className?: string;
     rows?: number;
 }
-export declare const TableSkeleton: FC<TableSkeletonProps>;
+export declare const TableSkeleton: ({ rows, className }: TableSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TableSkeleton/TableSkeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import { Skeleton } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import './TableSkeleton.scss';
-const b = block('table-skeleton');
-export const TableSkeleton = ({ rows = 2, className }) => (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx(Skeleton, { className: b('col-1') }), _jsx(Skeleton, { className: b('col-2') }), _jsx(Skeleton, { className: b('col-3') }), _jsx(Skeleton, { className: b('col-4') }), _jsx(Skeleton, { className: b('col-5') })] })), [...new Array(rows)].map((_, index) => (_jsx("div", Object.assign({ className: b('row') }, { children: _jsx(Skeleton, { className: b('col-full') }) }), `skeleton-row-${index}`)))] })));
+const b = cn('table-skeleton');
+export const TableSkeleton = ({ rows = 2, className }) => (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('row'), children: [_jsx(Skeleton, { className: b('col-1') }), _jsx(Skeleton, { className: b('col-2') }), _jsx(Skeleton, { className: b('col-3') }), _jsx(Skeleton, { className: b('col-4') }), _jsx(Skeleton, { className: b('col-5') })] }), [...new Array(rows)].map((_, index) => (_jsx("div", { className: b('row'), children: _jsx(Skeleton, { className: b('col-full') }) }, `skeleton-row-${index}`)))] }));

package/dist/components/TableSkeleton/TableSkeleton.scss

@@ -7,7 +7,7 @@
 
         height: var(--data-table-row-height);
 
-        .yc-skeleton {
+        .g-skeleton {
             height: var(--g-text-body-2-line-height);
         }
     }

package/dist/components/TableWithControlsLayout/TableWithControlsLayout.d.ts

@@ -1,15 +1,15 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 import './TableWithControlsLayout.scss';
 interface TableWithControlsLayoutItemProps {
-    children: ReactNode;
+    children: React.ReactNode;
     className?: string;
 }
 interface TableProps extends TableWithControlsLayoutItemProps {
     loading?: boolean;
 }
 export declare const TableWithControlsLayout: {
-    ({ children, className, }: TableWithControlsLayoutItemProps): JSX.Element;
-    Controls({ children, className, }: TableWithControlsLayoutItemProps): JSX.Element;
-    Table({ children, loading, className }: TableProps): JSX.Element;
+    ({ children, className, }: TableWithControlsLayoutItemProps): import("react/jsx-runtime").JSX.Element;
+    Controls({ children, className, }: TableWithControlsLayoutItemProps): import("react/jsx-runtime").JSX.Element;
+    Table({ children, loading, className }: TableProps): import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/TableWithControlsLayout/TableWithControlsLayout.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import { TableSkeleton } from '../TableSkeleton/TableSkeleton';
 import './TableWithControlsLayout.scss';
-const b = block('ydb-table-with-controls-layout');
+const b = cn('ydb-table-with-controls-layout');
 export const TableWithControlsLayout = ({ children, className, }) => {
-    return _jsx("div", Object.assign({ className: b(null, className) }, { children: children }));
+    return _jsx("div", { className: b(null, className), children: children });
 };
 TableWithControlsLayout.Controls = function TableControls({ children, className, }) {
-    return (_jsx("div", Object.assign({ className: b('controls-wrapper') }, { children: _jsx("div", Object.assign({ className: b('controls', className) }, { children: children })) })));
+    return (_jsx("div", { className: b('controls-wrapper'), children: _jsx("div", { className: b('controls', className), children: children }) }));
 };
 TableWithControlsLayout.Table = function Table({ children, loading, className }) {
     if (loading) {
         return _jsx(TableSkeleton, { className: b('loader') });
     }
-    return _jsx("div", Object.assign({ className: b('table', className) }, { children: children }));
+    return _jsx("div", { className: b('table', className), children: children });
 };

package/dist/components/Tablet/Tablet.d.ts

@@ -4,5 +4,5 @@ interface TabletProps {
     tablet?: TTabletStateInfo;
     tenantName?: string;
 }
-export declare const Tablet: ({ tablet, tenantName }: TabletProps) => JSX.Element;
+export declare const Tablet: ({ tablet, tenantName }: TabletProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tablet/Tablet.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
-import { getTabletLabel } from '../../utils/constants';
 import routes, { createHref } from '../../routes';
+import { cn } from '../../utils/cn';
+import { getTabletLabel } from '../../utils/constants';
 import { ContentWithPopup } from '../ContentWithPopup/ContentWithPopup';
-import { TabletIcon } from '../TabletIcon/TabletIcon';
 import { InternalLink } from '../InternalLink';
+import { TabletIcon } from '../TabletIcon/TabletIcon';
 import { TabletTooltipContent } from '../TooltipsContent';
 import './Tablet.scss';
 const b = cn('tablet');
@@ -13,5 +13,5 @@ export const Tablet = ({ tablet = {}, tenantName }) => {
     const { TabletId: id, NodeId, Type } = tablet;
     const status = (_a = tablet.Overall) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     const tabletPath = id && createHref(routes.tablet, { id }, { nodeId: NodeId, tenantName, type: Type });
-    return (_jsx(ContentWithPopup, Object.assign({ className: b('wrapper'), content: _jsx(TabletTooltipContent, { data: tablet, className: b('popup-content') }) }, { children: _jsx(InternalLink, Object.assign({ to: tabletPath }, { children: _jsx(TabletIcon, { className: b({ status }), text: getTabletLabel(tablet.Type) }) })) })));
+    return (_jsx(ContentWithPopup, { className: b('wrapper'), content: _jsx(TabletTooltipContent, { data: tablet, className: b('popup-content') }), children: _jsx(InternalLink, { to: tabletPath, children: _jsx(TabletIcon, { className: b({ status }), text: getTabletLabel(tablet.Type) }) }) }));
 };

package/dist/components/TabletIcon/TabletIcon.d.ts

@@ -3,5 +3,5 @@ interface TabletIconProps {
     text?: string;
     className?: string;
 }
-export declare const TabletIcon: ({ text, className }: TabletIconProps) => JSX.Element;
+export declare const TabletIcon: ({ text, className }: TabletIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TabletIcon/TabletIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import './TabletIcon.scss';
 const b = cn('tablet-icon');
 export const TabletIcon = ({ text, className }) => {
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: _jsx("div", Object.assign({ className: b('type') }, { children: text || 'T' })) })));
+    return (_jsx("div", { className: b(null, className), children: _jsx("div", { className: b('type'), children: text || 'T' }) }));
 };

package/dist/components/TabletsOverall/TabletsOverall.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import './TabletsOverall.scss';
 interface TabletsOverallProps {
     tablets: {
         Overall?: string;
     }[];
 }
-declare function TabletsOverall({ tablets }: TabletsOverallProps): JSX.Element;
+declare function TabletsOverall({ tablets }: TabletsOverallProps): import("react/jsx-runtime").JSX.Element;
 export default TabletsOverall;

package/dist/components/TabletsOverall/TabletsOverall.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Progress } from '@gravity-ui/uikit';
 import { hideTooltip, showTooltip } from '../../store/reducers/tooltip';
-import { useTypedDispatch } from '../../utils/hooks';
+import { cn } from '../../utils/cn';
 import { COLORS_PRIORITY } from '../../utils/constants';
+import { useTypedDispatch } from '../../utils/hooks';
 import './TabletsOverall.scss';
 // to be able to see problem places with very small percentage, we'll set minimum percentage to 3.
 const minOverallPercentValue = 3;
@@ -63,6 +63,6 @@ function TabletsOverall({ tablets }) {
     }));
     // sort stack to achieve order "green, orange, yellow, red, blue, grey"
     stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]);
-    return (_jsxs("div", Object.assign({ className: b('row', { overall: true }) }, { children: [_jsx("span", Object.assign({ className: b('label', { overall: true }) }, { children: "Overall:" })), _jsx("div", Object.assign({ onMouseLeave: () => dispatch(hideTooltip()), onMouseEnter: (e) => dispatch(showTooltip(e.target, tooltipData, 'tabletsOverall')) }, { children: _jsx(Progress, { value: memoryProgress, stack: stack }) }))] })));
+    return (_jsxs("div", { className: b('row', { overall: true }), children: [_jsx("span", { className: b('label', { overall: true }), children: "Overall:" }), _jsx("div", { onMouseLeave: () => dispatch(hideTooltip()), onMouseEnter: (e) => dispatch(showTooltip(e.target, tooltipData, 'tabletsOverall')), children: _jsx(Progress, { value: memoryProgress, stack: stack }) })] }));
 }
 export default TabletsOverall;

package/dist/components/TabletsOverall/TabletsOverall.scss

@@ -1,12 +1,11 @@
 .kv-tablets-overall {
     &__row {
         display: flex;
-        gap: 8px;
-
         align-items: center;
+        gap: 8px;
 
         &_overall {
-            .yc-progress {
+            .g-progress {
                 width: 166px;
                 margin: 0;
             }

package/dist/components/TabletsStatistic/TabletsStatistic.d.ts

@@ -1,5 +1,5 @@
-import type { TTabletStateInfo as TFullTabletStateInfo } from '../../types/api/tablet';
 import type { TTabletStateInfo as TComputeTabletStateInfo } from '../../types/api/compute';
+import type { TTabletStateInfo as TFullTabletStateInfo } from '../../types/api/tablet';
 import './TabletsStatistic.scss';
 type Tablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
 interface TabletsStatisticProps {
@@ -8,5 +8,5 @@ interface TabletsStatisticProps {
     nodeIds: string[] | number[];
     backend?: string;
 }
-export declare const TabletsStatistic: ({ tablets, path, nodeIds, backend }: TabletsStatisticProps) => JSX.Element;
+export declare const TabletsStatistic: ({ tablets, path, nodeIds, backend }: TabletsStatisticProps) => import("react/jsx-runtime").JSX.Element;
 export {};