ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -1,6 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .progress-viewer {
+    $block: &;
+
     position: relative;
     z-index: 0;
 
@@ -16,37 +18,51 @@
     font-size: var(--g-text-body-2-font-size);
     white-space: nowrap;
 
-    color: var(--g-color-text-light-primary);
+    color: var(--g-color-text-complementary);
     border-radius: 2px;
     background: var(--g-color-base-generic);
 
+    &_theme_dark {
+        color: var(--g-color-text-light-primary);
+
+        // Ensure better contrast with text
+        #{$block}__line {
+            opacity: 0.75;
+        }
+    }
+
+    &_status {
+        &_good {
+            background-color: var(--g-color-base-positive-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-green);
+            }
+        }
+        &_warning {
+            background-color: var(--g-color-base-yellow-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-yellow);
+            }
+        }
+        &_danger {
+            background-color: var(--g-color-base-danger-light);
+            #{$block}__line {
+                background-color: var(--ydb-color-status-red);
+            }
+        }
+    }
+
     &__line {
         position: absolute;
         top: 0;
         left: 0;
 
         height: 100%;
-
-        &_bg_scarlet {
-            background: var(--ydb-color-status-red);
-        }
-        &_bg_apple {
-            background: var(--ydb-color-status-green);
-        }
-        &_bg_saffron {
-            background: var(--ydb-color-status-yellow);
-        }
     }
 
     &__text {
         position: relative;
         z-index: 1;
-        &_text_contrast0 {
-            color: var(--g-color-text-light-primary);
-        }
-        &_text_contrast70 {
-            color: var(--g-color-text-complementary);
-        }
     }
 
     &_size_xs {

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.d.ts

@@ -0,0 +1,8 @@
+import type { AxiosError } from 'axios';
+import './QueryExecutionStatus.scss';
+interface QueryExecutionStatusProps {
+    className?: string;
+    error?: AxiosError | Record<string, any> | string;
+}
+export declare const QueryExecutionStatus: ({ className, error }: QueryExecutionStatusProps) => JSX.Element;
+export {};

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import { Icon as UiKitIcon } from '@gravity-ui/uikit';
+import { Icon } from '../Icon';
+import questionIcon from '../../assets/icons/question.svg';
+import './QueryExecutionStatus.scss';
+const b = cn('kv-query-execution-status');
+export const QueryExecutionStatus = ({ className, error }) => {
+    let icon;
+    let label;
+    if (typeof error === 'object' && (error === null || error === void 0 ? void 0 : error.code) === 'ECONNABORTED') {
+        icon = _jsx(UiKitIcon, { data: questionIcon, size: 16 });
+        label = 'Connection aborted';
+    }
+    else {
+        const hasError = Boolean(error);
+        icon = (_jsx(Icon, { name: hasError ? 'failure' : 'success', viewBox: hasError ? '0 0 512 512' : '0 0 16 16', width: 16, height: 16, className: b('result-status-icon', { error: hasError }) }));
+        label = hasError ? 'Failed' : 'Completed';
+    }
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [icon, label] })));
+};

package/dist/components/QueryExecutionStatus/index.js

@@ -0,0 +1 @@
+export * from './QueryExecutionStatus';

package/dist/components/QueryResultTable/Cell/Cell.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface CellProps {
+    className?: string;
+    value: string;
+}
+export declare const Cell: React.NamedExoticComponent<CellProps>;
+export {};

package/dist/components/QueryResultTable/Cell/Cell.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { showTooltip, hideTooltip } from '../../../store/reducers/tooltip';
+import { b } from '../QueryResultTable';
+export const Cell = React.memo(function Cell(props) {
+    const { className, value } = props;
+    const dispatch = useDispatch();
+    useEffect(() => () => {
+        dispatch(hideTooltip());
+    }, [dispatch]);
+    return (_jsx("span", Object.assign({ className: b('cell', className), onClick: (e) => dispatch(showTooltip(e.target, value, 'cell')) }, { children: value })));
+});

package/dist/components/QueryResultTable/Cell/index.js

@@ -0,0 +1 @@
+export * from './Cell';

package/dist/components/QueryResultTable/QueryResultTable.d.ts

@@ -0,0 +1,19 @@
+import type { DataTableProps } from '@gravity-ui/react-data-table';
+import type { ColumnType, KeyValueRow } from '../../types/api/query';
+import './QueryResultTable.scss';
+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;
+};
+interface QueryResultTableProps extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
+    data?: KeyValueRow[];
+    columns?: ColumnType[];
+}
+export declare const QueryResultTable: (props: QueryResultTableProps) => JSX.Element | null;
+export {};

package/dist/components/QueryResultTable/QueryResultTable.js

@@ -0,0 +1,78 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cn from 'bem-cn-lite';
+import DataTable from '@gravity-ui/react-data-table';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { getColumnType, prepareQueryResponse } from '../../utils/query';
+import { isNumeric } from '../../utils/utils';
+import { Cell } from './Cell';
+import i18n from './i18n';
+import './QueryResultTable.scss';
+const TABLE_SETTINGS = Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { stripedRows: true, dynamicRenderType: 'variable', dynamicItemSizeGetter: () => 40 });
+export const b = cn('ydb-query-result-table');
+const prepareTypedColumns = (columns) => {
+    if (!columns.length) {
+        return [];
+    }
+    return columns.map(({ name, type }) => {
+        const columnType = getColumnType(type);
+        const column = {
+            name,
+            align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT,
+            sortAccessor: (row) => {
+                const value = row[name];
+                if (value === undefined || value === null) {
+                    return null;
+                }
+                return columnType === 'number' ? BigInt(value) : value;
+            },
+            render: ({ row }) => _jsx(Cell, { value: String(row[name]) }),
+        };
+        return column;
+    });
+};
+const prepareGenericColumns = (data) => {
+    if (!data.length) {
+        return [];
+    }
+    return Object.keys(data[0]).map((name) => {
+        const column = {
+            name,
+            align: isNumeric(data[0][name]) ? DataTable.RIGHT : DataTable.LEFT,
+            sortAccessor: (row) => (isNumeric(row[name]) ? Number(row[name]) : row[name]),
+            render: ({ row }) => _jsx(Cell, { value: String(row[name]) }),
+        };
+        return column;
+    });
+};
+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(() => {
+        return rawColumns ? prepareTypedColumns(rawColumns) : prepareGenericColumns(data);
+    }, [data, rawColumns]);
+    const settings = 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(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)
+        rowKey: getRowIndex }, restProps)));
+};

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

@@ -1,3 +1,3 @@
 {
-  "empty": "Table is empty"
+    "empty": "Table is empty"
 }

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

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

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

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

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

@@ -1,3 +1,3 @@
 {
-  "empty": "Таблица пустая"
+    "empty": "Таблица пустая"
 }

package/dist/components/QueryResultTable/index.js

@@ -0,0 +1 @@
+export * from './QueryResultTable';

package/dist/components/Search/Search.d.ts

@@ -0,0 +1,10 @@
+import './Search.scss';
+interface SearchProps {
+    onChange: (value: string) => void;
+    value?: string;
+    className?: string;
+    debounce?: number;
+    placeholder?: string;
+}
+export declare const Search: ({ onChange, value, className, debounce, placeholder, }: SearchProps) => JSX.Element;
+export {};

package/dist/components/Search/Search.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import cn from 'bem-cn-lite';
+import { TextInput } from '@gravity-ui/uikit';
+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(() => {
+        setSearchValue((prevValue) => {
+            if (prevValue !== value) {
+                return value;
+            }
+            return prevValue;
+        });
+    }, [value]);
+    const onSearchValueChange = (newValue) => {
+        setSearchValue(newValue);
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }, debounce);
+    };
+    return (_jsx(TextInput, { hasClear: true, autoFocus: true, className: b(null, className), placeholder: placeholder, value: searchValue, onUpdate: onSearchValueChange }));
+};

package/dist/components/Search/index.js

@@ -0,0 +1 @@
+export * from './Search';

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import './ShortyString.scss';
+declare type Props = {
+    value?: string;
+    limit?: number;
+    /** in strict mode the text always trims at the limit, otherwise it is allowed to overflow a little */
+    strict?: boolean;
+    displayLength?: boolean;
+    render?: (value: string) => React.ReactNode;
+    onToggle?: () => void;
+    expandLabel?: string;
+    collapseLabel?: string;
+};
+export default function ShortyString({ value, limit, strict, displayLength, render, onToggle, expandLabel, collapseLabel, }: Props): JSX.Element;
+export {};

package/dist/components/ShortyString/ShortyString.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import cn from 'bem-cn-lite';
+import { Link } from '@gravity-ui/uikit';
+import i18n from './i18n';
+import './ShortyString.scss';
+const block = cn('kv-shorty-string');
+export default function ShortyString({ value = '', limit = 200, strict = false, displayLength = true, render = (v) => v, onToggle, expandLabel = i18n('default_expand_label'), collapseLabel = i18n('default_collapse_label'), }) {
+    const [expanded, setExpanded] = React.useState(false);
+    const toggleLabelAction = expanded ? collapseLabel : expandLabel;
+    const toggleLabelSymbolsCount = displayLength && !expanded ? i18n('chars_count', { count: value.length }) : '';
+    const toggleLabel = toggleLabelAction + toggleLabelSymbolsCount;
+    // showing toogle button with a label that is longer than the hidden part is pointless,
+    // 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) => {
+                    e.stopPropagation();
+                    setExpanded((v) => !v);
+                    onToggle === null || onToggle === void 0 ? void 0 : onToggle();
+                } }, { children: toggleLabel }))) : null] })));
+}

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

@@ -1,10 +1,10 @@
 {
-  "default_collapse_label": "Show less",
-  "default_expand_label": "Show more",
-  "chars_count": [
-    " ({{count}} symbol)",
-    " ({{count}} symbols)",
-    " ({{count}} symbols)",
-    " ({{count}} symbols)"
-  ]
+    "default_collapse_label": "Show less",
+    "default_expand_label": "Show more",
+    "chars_count": [
+        " ({{count}} symbol)",
+        " ({{count}} symbols)",
+        " ({{count}} symbols)",
+        " ({{count}} symbols)"
+    ]
 }

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

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

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

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

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

@@ -1,10 +1,10 @@
 {
-  "default_collapse_label": "Показать меньше",
-  "default_expand_label": "Показать ещё",
-  "chars_count": [
-    " ({{count}} символ)",
-    " ({{count}} символа)",
-    " ({{count}} символов)",
-    " ({{count}} символов)"
-  ]
+    "default_collapse_label": "Показать меньше",
+    "default_expand_label": "Показать ещё",
+    "chars_count": [
+        " ({{count}} символ)",
+        " ({{count}} символа)",
+        " ({{count}} символов)",
+        " ({{count}} символов)"
+    ]
 }

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.d.ts

@@ -0,0 +1,10 @@
+import { BytesSizes, ProcessSpeedStats } from '../../utils/bytesParsers';
+import './SpeedMultiMeter.scss';
+interface SpeedMultiMeterProps {
+    data?: ProcessSpeedStats;
+    speedSize?: BytesSizes;
+    withValue?: boolean;
+    withPopover?: boolean;
+}
+export declare const SpeedMultiMeter: ({ data, speedSize, withValue, withPopover, }: SpeedMultiMeterProps) => JSX.Element;
+export {};

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import cn from 'bem-cn-lite';
+import { Popover } from '@gravity-ui/uikit';
+import { formatBytes } from '../../utils/bytesParsers';
+import './SpeedMultiMeter.scss';
+import i18n from './i18n';
+const b = cn('speed-multimeter');
+export const SpeedMultiMeter = ({ data, speedSize = 'kb', withValue = true, withPopover = true, }) => {
+    const { perMinute = 0, perHour = 0, perDay = 0 } = data || {};
+    const rawValues = [perMinute, perHour, perDay];
+    const formatValue = (value) => formatBytes({ value: value, size: speedSize, withSpeedLabel: true });
+    const formattedValues = [
+        { value: formatValue(perMinute), label: i18n('perMinute') },
+        { 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 onEnterDiagram = (values, index) => {
+        setValueToDisplay(values[index]);
+        setHighlightedValueIndex(index);
+        setHighlightedContainerIndex(index);
+    };
+    const onLeaveDiagram = () => {
+        setValueToDisplay(perMinute);
+        setHighlightedValueIndex(withValue ? 0 : undefined);
+        setHighlightedContainerIndex(undefined);
+    };
+    const isValueHighlighted = (index) => highlightedValueIndex === index;
+    const isContainerHighlighted = (index) => highlightedContainerIndex === index;
+    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', {
+                highlighted: isContainerHighlighted(index),
+            }), onMouseEnter: onEnterDiagram.bind(null, rawValues, index) }, { children: _jsx("div", { className: b('bar', {
+                    color: isValueHighlighted(index) ? 'dark' : 'light',
+                }), 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 (_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() })) }))] })) })));
+};

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

@@ -1,6 +1,6 @@
 {
-  "averageSpeed": "Average speed",
-  "perMinute": "per minute",
-  "perHour": "per hour",
-  "perDay": "per day"
+    "averageSpeed": "Average speed",
+    "perMinute": "per minute",
+    "perHour": "per hour",
+    "perDay": "per day"
 }

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

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

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

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

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

@@ -1,6 +1,6 @@
 {
-  "averageSpeed": "Средняя скорость",
-  "perMinute": "за минуту",
-  "perHour": "за час",
-  "perDay": "за день"
+    "averageSpeed": "Средняя скорость",
+    "perMinute": "за минуту",
+    "perHour": "за час",
+    "perDay": "за день"
 }

package/dist/components/SpeedMultiMeter/index.js

@@ -0,0 +1 @@
+export * from './SpeedMultiMeter';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SplitProps } from 'react-split';
+import './SplitPane.scss';
+interface SplitPaneProps {
+    children: React.ReactNode;
+    defaultSizePaneKey: string;
+    direction?: SplitProps['direction'];
+    defaultSizes?: SplitProps['sizes'];
+    initialSizes?: SplitProps['sizes'];
+    collapsedSizes?: SplitProps['sizes'];
+    minSize?: number[];
+    triggerCollapse?: boolean;
+    triggerExpand?: boolean;
+    onSplitStartDragAdditional?: VoidFunction;
+    onSplitDragAdditional?: VoidFunction;
+}
+declare function SplitPane(props: SplitPaneProps): JSX.Element;
+export default SplitPane;

package/dist/components/SplitPane/SplitPane.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+import React, { useEffect, useState } from 'react';
+import SplitPaneLib from 'react-split';
+import './SplitPane.scss';
+const b = cn('kv-split');
+const minSizeDefaultInner = [0, 100];
+const sizesDefaultInner = [50, 50];
+function SplitPane(props) {
+    const [innerSizes, setInnerSizes] = useState();
+    const getDefaultSizePane = () => {
+        var _a;
+        const { defaultSizePaneKey, defaultSizes = sizesDefaultInner, initialSizes } = props;
+        if (initialSizes) {
+            return initialSizes;
+        }
+        const sizes = (_a = localStorage.getItem(defaultSizePaneKey)) === null || _a === void 0 ? void 0 : _a.split(',').map(Number);
+        return sizes || defaultSizes;
+    };
+    const setDefaultSizePane = (sizes) => {
+        const { defaultSizePaneKey } = props;
+        localStorage.setItem(defaultSizePaneKey, sizes.join(','));
+    };
+    const onDragHandler = (sizes) => {
+        const { onSplitDragAdditional } = props;
+        if (onSplitDragAdditional) {
+            onSplitDragAdditional();
+        }
+        setDefaultSizePane(sizes);
+    };
+    const onDragStartHandler = () => {
+        const { onSplitStartDragAdditional } = props;
+        if (onSplitStartDragAdditional) {
+            onSplitStartDragAdditional();
+        }
+        setInnerSizes(undefined);
+    };
+    useEffect(() => {
+        const { collapsedSizes, triggerCollapse } = props;
+        if (triggerCollapse) {
+            const newSizes = collapsedSizes || minSizeDefaultInner;
+            setDefaultSizePane(newSizes);
+            setInnerSizes(newSizes);
+        }
+    }, [props.triggerCollapse]);
+    useEffect(() => {
+        const { triggerExpand, defaultSizes } = props;
+        const newSizes = defaultSizes || sizesDefaultInner;
+        if (triggerExpand) {
+            setDefaultSizePane(newSizes);
+            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 })) }));
+}
+export default SplitPane;

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

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

package/dist/components/SplitPane/index.js

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './Stack.scss';
+interface StackProps {
+    className?: string;
+}
+export declare const Stack: React.FC<StackProps>;
+export {};

package/dist/components/Stack/Stack.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'bem-cn-lite';
+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) => {
+        if (!React.isValidElement(child)) {
+            return null;
+        }
+        return (_jsx("div", Object.assign({ className: b('layer'), style: {
+                [LAYER_CSS_VAR]: index,
+            } }, { children: child })));
+    }) })));

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import './TableSkeleton.scss';
+interface TableSkeletonProps {
+    className?: string;
+    rows?: number;
+}
+export declare const TableSkeleton: FC<TableSkeletonProps>;
+export {};

package/dist/components/TableSkeleton/TableSkeleton.js

@@ -0,0 +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 './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}`)))] })));