ydb-embedded-ui 5.2.0 → 5.3.0

package/dist/components/BasicNodeViewer/BasicNodeViewer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'bem-cn-lite';
-import EntityStatus from '../EntityStatus/EntityStatus';
+import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { Tags } from '../Tags';
 import { Icon } from '../Icon';
 import './BasicNodeViewer.scss';

package/dist/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type ButtonProps } from '@gravity-ui/uikit';
+interface ButtonWithConfirmDialogProps<T, K> {
+    children: ReactNode;
+    onConfirmAction: () => Promise<T>;
+    onConfirmActionSuccess?: (() => Promise<K>) | VoidFunction;
+    dialogContent: string;
+    buttonDisabled?: ButtonProps['disabled'];
+    buttonView?: ButtonProps['view'];
+    buttonClassName?: ButtonProps['className'];
+}
+export declare function ButtonWithConfirmDialog<T, K>({ children, onConfirmAction, onConfirmActionSuccess, dialogContent, buttonDisabled, buttonView, buttonClassName, }: ButtonWithConfirmDialogProps<T, K>): JSX.Element;
+export {};

package/dist/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { CriticalActionDialog } from '../CriticalActionDialog';
+export function ButtonWithConfirmDialog({ children, onConfirmAction, onConfirmActionSuccess, dialogContent, buttonDisabled = false, buttonView = 'action', buttonClassName, }) {
+    const [isConfirmDialogVisible, setIsConfirmDialogVisible] = useState(false);
+    const [buttonLoading, setButtonLoading] = useState(false);
+    const handleConfirmAction = async () => {
+        setButtonLoading(true);
+        await onConfirmAction();
+        setButtonLoading(false);
+    };
+    const handleConfirmActionSuccess = async () => {
+        if (onConfirmActionSuccess) {
+            setButtonLoading(true);
+            try {
+                await onConfirmActionSuccess();
+            }
+            catch (_a) {
+            }
+            finally {
+                setButtonLoading(false);
+            }
+        }
+    };
+    const handleConfirmActionError = () => {
+        setButtonLoading(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(CriticalActionDialog, { visible: isConfirmDialogVisible, text: dialogContent, onConfirm: handleConfirmAction, onConfirmActionSuccess: handleConfirmActionSuccess, onConfirmActionError: handleConfirmActionError, onClose: () => {
+                    setIsConfirmDialogVisible(false);
+                } }), _jsx(Button, Object.assign({ onClick: () => setIsConfirmDialogVisible(true), view: buttonView, disabled: buttonDisabled, loading: !buttonDisabled && buttonLoading, className: buttonClassName }, { children: children }))] }));
+}

package/dist/components/CellWithPopover/CellWithPopover.js

@@ -1,14 +1,4 @@
-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 { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'bem-cn-lite';
 import { Popover } from '@gravity-ui/uikit';

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -1,14 +1,4 @@
-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 { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, ClipboardIcon, CopyToClipboard as CopyToClipboardUiKit, CopyToClipboardStatus, Tooltip, } from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';

package/dist/components/ComponentsProvider/ComponentsProvider.d.ts

@@ -11,11 +11,11 @@ export declare function useComponent<T extends Parameters<ComponentsRegistry['ge
     AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
 } & {
     ErrorBoundary: typeof import("../ErrorBoundary/ErrorBoundary").ErrorBoundaryInner;
-})[T] extends React.ComponentType<any> ? React.ComponentType<React.PropsWithoutRef<React.ComponentProps<({
+})[T] extends infer T_1 ? T_1 extends ({
     StaffCard: typeof import("../User/StaffCard").StaffCard;
 } & {
     AsideNavigation: typeof import("../../containers/AsideNavigation/AsideNavigation").AsideNavigation;
 } & {
     ErrorBoundary: typeof import("../ErrorBoundary/ErrorBoundary").ErrorBoundaryInner;
-})[T]>>> : never;
+})[T] ? T_1 extends React.ComponentType<any> ? React.ComponentType<React.PropsWithoutRef<React.ComponentProps<T_1>>> : never : never : never;
 export {};

package/dist/components/ComponentsProvider/componentsRegistry.d.ts

@@ -9,6 +9,6 @@ declare const componentsRegistryInner: Registry<{
 } & {
     ErrorBoundary: typeof ErrorBoundaryInner;
 }>;
-export declare type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
+export type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
 export declare const componentsRegistry: ComponentsRegistry;
 export {};

package/dist/components/ComponentsProvider/registry.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare type RegistryEntity<T = any> = T;
-declare type RegistryEntities = Record<string, RegistryEntity>;
+type RegistryEntity<T = any> = T;
+type RegistryEntities = Record<string, RegistryEntity>;
 export declare class Registry<Entities extends RegistryEntities = {}> {
     type?: Entities;
     private entities;
@@ -10,7 +10,7 @@ export declare class Registry<Entities extends RegistryEntities = {}> {
         [key in Id]: T;
     }>;
 }
-declare type ComponentType<T> = T extends React.ComponentType<any> ? React.ComponentType<React.ComponentPropsWithoutRef<T>> : never;
+type ComponentType<T> = T extends React.ComponentType<any> ? React.ComponentType<React.ComponentPropsWithoutRef<T>> : never;
 export interface ComponentsRegistryTemplate<T extends Registry, Entities = NonNullable<T['type']>> {
     set<Id extends keyof Entities>(id: Id, entity: ComponentType<Entities[Id]>): this;
     get<Id extends keyof Entities>(id: Id): ComponentType<Entities[Id]>;

package/dist/components/ContentWithPopup/ContentWithPopup.js

@@ -1,14 +1,4 @@
-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 { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { Popup } from '@gravity-ui/uikit';

package/dist/components/CriticalActionDialog/CriticalActionDialog.d.ts

@@ -1,10 +1,12 @@
+/// <reference types="react" />
 import './CriticalActionDialog.scss';
-interface CriticalActionDialogProps {
+interface CriticalActionDialogProps<T> {
     visible: boolean;
     text: string;
     onClose: VoidFunction;
-    onConfirm: () => Promise<unknown>;
-    onConfirmActionFinish: VoidFunction;
+    onConfirm: () => Promise<T>;
+    onConfirmActionSuccess: VoidFunction;
+    onConfirmActionError: VoidFunction;
 }
-export declare const CriticalActionDialog: ({ visible, text, onClose, onConfirm, onConfirmActionFinish, }: CriticalActionDialogProps) => JSX.Element;
+export declare function CriticalActionDialog<T>({ visible, text, onClose, onConfirm, onConfirmActionSuccess, onConfirmActionError, }: CriticalActionDialogProps<T>): JSX.Element;
 export {};

package/dist/components/CriticalActionDialog/CriticalActionDialog.js

@@ -1,20 +1,45 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import cn from 'bem-cn-lite';
 import { Dialog } from '@gravity-ui/uikit';
+import { CircleXmarkFill } from '@gravity-ui/icons';
 import { Icon } from '../Icon';
+import { criticalActionDialogKeyset } from './i18n';
 import './CriticalActionDialog.scss';
 const b = cn('ydb-critical-dialog');
-export const CriticalActionDialog = ({ visible, text, onClose, onConfirm, onConfirmActionFinish, }) => {
+const parseError = (error) => {
+    if (error.status === 403) {
+        return criticalActionDialogKeyset('no-rights-error');
+    }
+    if (error.statusText) {
+        return error.statusText;
+    }
+    return criticalActionDialogKeyset('default-error');
+};
+export function CriticalActionDialog({ visible, text, onClose, onConfirm, onConfirmActionSuccess, onConfirmActionError, }) {
     const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState();
     const onSubmit = async (e) => {
         e.preventDefault();
         setIsLoading(true);
-        return onConfirm().then(() => {
-            onConfirmActionFinish();
-            setIsLoading(false);
+        return onConfirm()
+            .then(() => {
+            onConfirmActionSuccess();
             onClose();
+        })
+            .catch((err) => {
+            onConfirmActionError();
+            setError(err);
+        })
+            .finally(() => {
+            setIsLoading(false);
         });
     };
-    return (_jsx(Dialog, Object.assign({ open: visible, hasCloseButton: false, className: b(), size: "s", onClose: onClose }, { children: _jsxs("form", Object.assign({ onSubmit: onSubmit }, { children: [_jsxs(Dialog.Body, Object.assign({ className: b('body') }, { children: [_jsx("span", Object.assign({ className: b('warning-icon') }, { children: _jsx(Icon, { name: "dialog-warning", width: "24", height: "22", viewBox: "0 0 24 22" }) })), text] })), _jsx(Dialog.Footer, { loading: isLoading, preset: "default", textButtonApply: "Confirm", textButtonCancel: "Cancel", propsButtonApply: { type: 'submit' }, onClickButtonCancel: onClose, onClickButtonApply: () => { } })] })) })));
-};
+    const renderDialogContent = () => {
+        if (error) {
+            return (_jsxs(_Fragment, { children: [_jsxs(Dialog.Body, Object.assign({ className: b('body') }, { children: [_jsx("span", Object.assign({ className: b('error-icon') }, { children: _jsx(CircleXmarkFill, { width: "24", height: "22" }) })), parseError(error)] })), _jsx(Dialog.Footer, { loading: false, preset: "default", textButtonCancel: criticalActionDialogKeyset('button-close'), onClickButtonCancel: onClose })] }));
+        }
+        return (_jsxs("form", Object.assign({ onSubmit: onSubmit }, { children: [_jsxs(Dialog.Body, Object.assign({ className: b('body') }, { children: [_jsx("span", Object.assign({ className: b('warning-icon') }, { children: _jsx(Icon, { name: "dialog-warning", width: "24", height: "22", viewBox: "0 0 24 22" }) })), text] })), _jsx(Dialog.Footer, { loading: isLoading, preset: "default", textButtonApply: criticalActionDialogKeyset('button-confirm'), textButtonCancel: criticalActionDialogKeyset('button-cancel'), propsButtonApply: { type: 'submit' }, onClickButtonCancel: onClose, onClickButtonApply: () => { } })] })));
+    };
+    return (_jsx(Dialog, Object.assign({ open: visible, hasCloseButton: false, className: b(), size: "s", onClose: onClose, onTransitionExited: () => setError(undefined) }, { children: renderDialogContent() })));
+}

package/dist/components/CriticalActionDialog/CriticalActionDialog.scss

@@ -1,32 +1,21 @@
 .ydb-critical-dialog {
-    width: 252px !important;
+    width: 400px;
 
     &__warning-icon {
         margin-right: 16px;
     }
 
+    &__error-icon {
+        height: 24px;
+        margin-right: 16px;
+
+        color: var(--ydb-color-status-red);
+    }
+
     &__body {
         display: flex;
         align-items: center;
 
         padding: 16px 16px 0;
     }
-
-    & .yc-dialog-footer {
-        padding: 20px 4px 4px;
-    }
-
-    & .yc-dialog-footer__children {
-        display: none;
-    }
-
-    & .yc-dialog-footer__button {
-        box-sizing: border-box;
-        min-width: 120px;
-        margin: 0;
-    }
-
-    & .yc-dialog-footer__button_action_cancel {
-        margin-right: 4px;
-    }
 }

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

@@ -0,0 +1,7 @@
+{
+    "default-error": "Something went wrong, action cannot be completed",
+    "no-rights-error": "You don't have enough rights to complete the operation",
+    "button-confirm": "Confirm",
+    "button-cancel": "Cancel",
+    "button-close": "Close"
+}

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

@@ -0,0 +1 @@
+export declare const criticalActionDialogKeyset: (key: "default-error" | "no-rights-error" | "button-confirm" | "button-cancel" | "button-close", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-critical-action-dialog';
+export const criticalActionDialogKeyset = registerKeysets(COMPONENT, { en });

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@gravity-ui/uikit';
-import { useDispatch } from 'react-redux';
+import { useTypedDispatch } from '../../utils/hooks';
 import { enableFullscreen } from '../../store/reducers/fullscreen';
 import { Icon } from '../Icon';
 function EnableFullscreenButton({ disabled }) {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const onEnableFullscreen = () => {
         dispatch(enableFullscreen());
     };

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

@@ -1,38 +1,21 @@
-export default EntityStatus;
-declare class EntityStatus extends React.Component<any, any, any> {
-    static propTypes: {
-        status: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string | number>;
-        onNameMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onNameMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        path: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<string>;
-        iconPath: PropTypes.Requireable<string>;
-        hasClipboardButton: PropTypes.Requireable<boolean>;
-        clipboardButtonAlwaysVisible: PropTypes.Requireable<boolean>;
-        showStatus: PropTypes.Requireable<boolean>;
-        externalLink: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        mode: PropTypes.Requireable<string>;
-        withLeftTrim: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        status: string;
-        text: string;
-        size: string;
-        label: string;
-        showStatus: boolean;
-        externalLink: boolean;
-        mode: string;
-        withLeftTrim: boolean;
-        clipboardButtonAlwaysVisible: boolean;
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    renderIcon(): JSX.Element | null;
-    renderStatusLink(): JSX.Element;
-    renderLink(): any;
-    render(): JSX.Element;
+/// <reference types="react" />
+import { EFlag } from '../../types/api/enums';
+import { type StatusIconMode, type StatusIconSize } from '../StatusIcon/StatusIcon';
+import './EntityStatus.scss';
+interface EntityStatusProps {
+    status?: EFlag;
+    name?: string;
+    label?: string;
+    path?: string;
+    iconPath?: string;
+    size?: StatusIconSize;
+    mode?: StatusIconMode;
+    showStatus?: boolean;
+    externalLink?: boolean;
+    withLeftTrim?: boolean;
+    hasClipboardButton?: boolean;
+    clipboardButtonAlwaysVisible?: boolean;
+    className?: string;
 }
-import React from "react";
+export declare function EntityStatus({ status, name, label, path, iconPath, size, mode, showStatus, externalLink, withLeftTrim, hasClipboardButton, clipboardButtonAlwaysVisible, className, }: EntityStatusProps): JSX.Element;
+export {};

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,78 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Link as UIKitLink } from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import React from 'react';
 import { Link } from 'react-router-dom';
-import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
-import circleInfoIcon from '../../assets/icons/circle-info.svg';
-import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
-import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import cn from 'bem-cn-lite';
+import { Link as UIKitLink } from '@gravity-ui/uikit';
+import { EFlag } from '../../types/api/enums';
+import { StatusIcon } from '../StatusIcon/StatusIcon';
 import { ClipboardButton } from '../ClipboardButton';
 import './EntityStatus.scss';
-const icons = {
-    BLUE: circleInfoIcon,
-    YELLOW: circleExclamationIcon,
-    ORANGE: triangleExclamationIcon,
-    RED: circleTimesIcon,
-};
 const b = cn('entity-status');
-class EntityStatus extends React.Component {
-    renderIcon() {
-        const { status, size, showStatus, mode } = this.props;
+export function EntityStatus({ status = EFlag.Grey, name = '', label, path, iconPath, size = 's', mode = 'color', showStatus = true, externalLink = false, withLeftTrim = false, hasClipboardButton, clipboardButtonAlwaysVisible = false, className, }) {
+    const renderIcon = () => {
         if (!showStatus) {
             return null;
         }
-        const modifiers = { state: status.toLowerCase(), size };
-        if (mode === 'icons' && icons[status]) {
-            return _jsx(Icon, { className: b('status-icon', modifiers), data: icons[status] });
-        }
-        return _jsx("div", { className: b('status-color', modifiers) });
-    }
-    renderStatusLink() {
-        const { iconPath } = this.props;
-        return (_jsx(UIKitLink, Object.assign({ target: "_blank", href: iconPath }, { children: this.renderIcon() })));
-    }
-    renderLink() {
-        const { externalLink, name, path, onNameMouseEnter, onNameMouseLeave } = this.props;
+        return _jsx(StatusIcon, { status: status, size: size, mode: mode });
+    };
+    const renderStatusLink = () => {
+        return (_jsx(UIKitLink, Object.assign({ target: "_blank", href: iconPath }, { children: renderIcon() })));
+    };
+    const renderLink = () => {
         if (externalLink) {
             return (_jsx(UIKitLink, Object.assign({ className: b('name'), href: path }, { children: name })));
         }
-        return path ? (_jsx(Link, Object.assign({ className: b('name'), to: path, onMouseEnter: onNameMouseEnter, onMouseLeave: onNameMouseLeave }, { children: name }))) : (name && (_jsx("span", Object.assign({ className: b('name'), onMouseEnter: onNameMouseEnter, onMouseLeave: onNameMouseLeave }, { children: name }))));
-    }
-    render() {
-        const { name, label, iconPath, hasClipboardButton, className, size, status } = this.props;
-        return (_jsxs("div", Object.assign({ className: b(null, className), title: name }, { children: [iconPath ? this.renderStatusLink() : this.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': this.props.withLeftTrim }) }, { children: this.renderLink() })), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
-                        visible: this.props.clipboardButtonAlwaysVisible,
-                    }) }))] })));
-    }
+        return path ? (_jsx(Link, Object.assign({ className: b('name'), to: path }, { children: name }))) : (name && _jsx("span", Object.assign({ 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', {
+                    visible: clipboardButtonAlwaysVisible,
+                }) }))] })));
 }
-EntityStatus.propTypes = {
-    status: PropTypes.string,
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    onNameMouseEnter: PropTypes.func,
-    onNameMouseLeave: PropTypes.func,
-    path: PropTypes.string,
-    size: PropTypes.string,
-    label: PropTypes.string,
-    iconPath: PropTypes.string,
-    hasClipboardButton: PropTypes.bool,
-    clipboardButtonAlwaysVisible: PropTypes.bool,
-    showStatus: PropTypes.bool,
-    externalLink: PropTypes.bool,
-    className: PropTypes.string,
-    mode: PropTypes.oneOf(['color', 'icons']),
-    withLeftTrim: PropTypes.bool,
-};
-EntityStatus.defaultProps = {
-    status: 'gray',
-    text: '',
-    size: 's',
-    label: '',
-    showStatus: true,
-    externalLink: false,
-    mode: 'color',
-    withLeftTrim: false,
-    clipboardButtonAlwaysVisible: false,
-};
-export default EntityStatus;

package/dist/components/EntityStatus/EntityStatus.scss

@@ -58,63 +58,7 @@
         }
     }
 
-    &__status-color,
-    &__status-icon {
-        flex-shrink: 0;
-
-        margin-right: 8px;
-
-        border-radius: 3px;
-        &_size_xs {
-            aspect-ratio: 1;
-
-            width: 12px;
-            height: 12px;
-        }
-        &_size_s {
-            aspect-ratio: 1;
-
-            width: 16px;
-            height: 16px;
-        }
-        &_size_m {
-            aspect-ratio: 1;
-
-            width: 18px;
-            height: 18px;
-        }
-
-        &_size_l {
-            width: 27px;
-            height: 27px;
-        }
-    }
-
-    &__status-color {
-        &_state_running,
-        &_state_green {
-            background-color: var(--ydb-color-status-green);
-        }
-        &_state_yellow {
-            background-color: var(--ydb-color-status-yellow);
-        }
-        &_state_blue {
-            background-color: var(--ydb-color-status-blue);
-        }
-        &_state_red {
-            background-color: var(--ydb-color-status-red);
-        }
-        &_state_gray,
-        &_state_grey {
-            background-color: var(--ydb-color-status-grey);
-        }
-        &_state_orange {
-            background-color: var(--ydb-color-status-orange);
-        }
-    }
-
-    &__label,
-    &__status-icon {
+    &__label {
         &_state_blue {
             color: var(--ydb-color-status-blue);
         }

package/dist/components/Errors/403/AccessDenied.js

@@ -1,14 +1,4 @@
-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 { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EmptyState } from '../../EmptyState';
 import { Illustration } from '../../Illustration';

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

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

package/dist/components/FormattedBytes/FormattedBytes.js

@@ -1,14 +1,4 @@
-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 { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { formatBytes } from '../../utils/bytesParsers';
 export const FormattedBytes = (_a) => {

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"> | undefined) => JSX.Element | null;
+export declare const toFormattedSize: (value: number | string | undefined, params?: Omit<FormatBytesArgs, 'value'>) => JSX.Element | null;

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'bem-cn-lite';
 import { LOAD_AVERAGE_TIME_INTERVALS } from '../../utils/constants';
-import { calcUptime } from '../../utils/dataFormatters/dataFormatters';
 import InfoViewer from '../InfoViewer/InfoViewer';
 import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import { PoolUsage } from '../PoolUsage/PoolUsage';
@@ -18,7 +17,7 @@ export const FullNodeViewer = ({ node, className }) => {
     if ((_b = node === null || node === void 0 ? void 0 : node.Tenants) === null || _b === void 0 ? void 0 : _b.length) {
         commonInfo.push({ label: 'Database', value: node.Tenants[0] });
     }
-    commonInfo.push({ label: 'Version', value: node === null || node === void 0 ? void 0 : node.Version }, { label: 'Uptime', value: calcUptime(node === null || node === void 0 ? void 0 : node.StartTime) }, { label: 'DC', value: (node === null || node === void 0 ? void 0 : node.DataCenterDescription) || (node === null || node === void 0 ? void 0 : node.DC) }, { label: 'Rack', value: node === null || node === void 0 ? void 0 : node.Rack });
+    commonInfo.push({ label: 'Version', value: node === null || node === void 0 ? void 0 : node.Version }, { label: 'Uptime', value: node === null || node === void 0 ? void 0 : node.Uptime }, { label: 'DC', value: (node === null || node === void 0 ? void 0 : node.DataCenterDescription) || (node === null || node === void 0 ? void 0 : node.DC) }, { label: 'Rack', value: node === null || node === void 0 ? void 0 : node.Rack });
     const averageInfo = (_c = node === null || node === void 0 ? void 0 : node.LoadAverage) === null || _c === void 0 ? void 0 : _c.map((load, loadIndex) => ({
         label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
         value: (_jsx(ProgressViewer, { value: load, percents: true, colorizeProgress: true, capacity: 100 })),

package/dist/components/Fullscreen/Fullscreen.js

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { Button } from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
-import { useDispatch } from 'react-redux';
+import { useTypedDispatch } from '../../utils/hooks';
 import { disableFullscreen } from '../../store/reducers/fullscreen';
 import { Icon } from '../Icon';
 import './Fullscreen.scss';
@@ -30,21 +30,21 @@ class FullscreenWrapper extends React.Component {
     }
 }
 function Fullscreen(props) {
-    const dispatch = useDispatch();
-    const escFunction = (event) => {
-        if (event.key === 'Escape') {
-            onDisableFullScreen();
-        }
-    };
+    const dispatch = useTypedDispatch();
+    const onDisableFullScreen = React.useCallback(() => {
+        dispatch(disableFullscreen());
+    }, [dispatch]);
     useEffect(() => {
+        const escFunction = (event) => {
+            if (event.key === 'Escape') {
+                onDisableFullScreen();
+            }
+        };
         document.addEventListener('keydown', escFunction, false);
         return () => {
             document.removeEventListener('keydown', escFunction, false);
         };
-    }, []);
-    const onDisableFullScreen = () => {
-        dispatch(disableFullscreen());
-    };
+    }, [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] })) }));
 }
 export default Fullscreen;