ydb-embedded-ui 5.4.0 → 6.0.0

package/README.md

@@ -22,11 +22,13 @@ Open http://localhost:8765 to view it in the browser.
 
 1. Run on a machine with Docker installed:
    ```
-   docker pull cr.yandex/yc/yandex-docker-local-ydb
-   docker run --hostname localhost -e YDB_ALLOW_ORIGIN="http://localhost:3000" -dp 2135:2135 -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
+   docker run --rm -ti --name ydb-local -h localhost \
+      -p 8765:8765 \
+      -e MON_PORT=8765 \
+      cr.yandex/yc/yandex-docker-local-ydb:latest
    ```
 2. Run the frontend app in the development mode, via invoking `npm run dev`
-3. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
+3. Open [localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
    You will also see any lint errors in the console.
 
 For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
@@ -37,7 +39,9 @@ For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
 
 Image `cr.yandex/yc/yandex-docker-local-ydb` corresponds to `:latest` tag. It's the latest stable ydb version.
 
-To test new features, you can use ydb version that is currently in testing mode with `cr.yandex/yc/yandex-docker-local-ydb:edge` image. Also you can set specific version like `cr.yandex/yc/yandex-docker-local-ydb:23.1`
+To test new features, you can use ydb version that is currently in testing mode with `cr.yandex/yc/yandex-docker-local-ydb:edge` image
+or use a build from `main` brunch with `ghcr.io/ydb-platform/local-ydb:trunk` image.
+Also you can set specific version like `cr.yandex/yc/yandex-docker-local-ydb:23.1`
 
 ### Custom backend in dev mode
 

package/dist/components/BasicNodeViewer/BasicNodeViewer.d.ts

@@ -1,10 +1,10 @@
-import type { AdditionalNodesProps } from '../../types/additionalProps';
 import type { PreparedNode } from '../../store/reducers/node/types';
+import type { AdditionalNodesProps } from '../../types/additionalProps';
 import './BasicNodeViewer.scss';
 interface BasicNodeViewerProps {
     node: PreparedNode;
     additionalNodesProps?: AdditionalNodesProps;
     className?: string;
 }
-export declare const BasicNodeViewer: ({ node, additionalNodesProps, className }: BasicNodeViewerProps) => JSX.Element;
+export declare const BasicNodeViewer: ({ node, additionalNodesProps, className }: BasicNodeViewerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BasicNodeViewer/BasicNodeViewer.js

@@ -1,13 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { EntityStatus } from '../EntityStatus/EntityStatus';
-import { Tags } from '../Tags';
 import { Icon } from '../Icon';
+import { Tags } from '../Tags';
 import './BasicNodeViewer.scss';
 const b = cn('basic-node-viewer');
 export const BasicNodeViewer = ({ node, additionalNodesProps, className }) => {
     const nodeHref = (additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef)
         ? additionalNodesProps.getNodeRef(node) + 'internal'
         : undefined;
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: node ? (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: "Node" })), _jsx(EntityStatus, { status: node.SystemState, name: node.Host }), nodeHref && (_jsx("a", Object.assign({ rel: "noopener noreferrer", className: b('link', { external: true }), href: nodeHref, target: "_blank" }, { children: _jsx(Icon, { name: "external" }) }))), _jsxs("div", Object.assign({ className: b('id') }, { children: [_jsx("label", Object.assign({ className: b('label') }, { children: "NodeID" })), _jsx("label", { children: node.NodeId })] })), node.DC && _jsx(Tags, { tags: [node.DC] }), node.Roles && _jsx(Tags, { tags: node.Roles, tagsType: "blue" })] })) : (_jsx("div", Object.assign({ className: "error" }, { children: "no data" }))) })));
+    return (_jsx("div", { className: b(null, className), children: node ? (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: "Node" }), _jsx(EntityStatus, { status: node.SystemState, name: node.Host }), nodeHref && (_jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: nodeHref, target: "_blank", children: _jsx(Icon, { name: "external" }) })), _jsxs("div", { className: b('id'), children: [_jsx("label", { className: b('label'), children: "NodeID" }), _jsx("label", { children: node.NodeId })] }), node.DC && _jsx(Tags, { tags: [node.DC] }), node.Roles && _jsx(Tags, { tags: node.Roles, tagsType: "blue" })] })) : (_jsx("div", { className: "error", children: "no data" })) }));
 };

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

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
-import { type ButtonProps } from '@gravity-ui/uikit';
+import React from 'react';
+import type { ButtonProps } from '@gravity-ui/uikit';
 interface ButtonWithConfirmDialogProps<T, K> {
-    children: ReactNode;
+    children: React.ReactNode;
     onConfirmAction: () => Promise<T>;
     onConfirmActionSuccess?: (() => Promise<K>) | VoidFunction;
     dialogContent: string;
@@ -9,5 +9,5 @@ interface ButtonWithConfirmDialogProps<T, K> {
     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 declare function ButtonWithConfirmDialog<T, K>({ children, onConfirmAction, onConfirmActionSuccess, dialogContent, buttonDisabled, buttonView, buttonClassName, }: ButtonWithConfirmDialogProps<T, K>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ButtonWithConfirmDialog/ButtonWithConfirmDialog.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React 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 [isConfirmDialogVisible, setIsConfirmDialogVisible] = React.useState(false);
+    const [buttonLoading, setButtonLoading] = React.useState(false);
     const handleConfirmAction = async () => {
         setButtonLoading(true);
         await onConfirmAction();
@@ -26,7 +26,7 @@ export function ButtonWithConfirmDialog({ children, onConfirmAction, onConfirmAc
     const handleConfirmActionError = () => {
         setButtonLoading(false);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(CriticalActionDialog, { visible: isConfirmDialogVisible, text: dialogContent, onConfirm: handleConfirmAction, onConfirmActionSuccess: handleConfirmActionSuccess, onConfirmActionError: handleConfirmActionError, onClose: () => {
+    return (_jsxs(React.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 }))] }));
+                } }), _jsx(Button, { onClick: () => setIsConfirmDialogVisible(true), view: buttonView, disabled: buttonDisabled, loading: !buttonDisabled && buttonLoading, className: buttonClassName, children: children })] }));
 }

package/dist/components/CellWithPopover/CellWithPopover.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { type PopoverProps } from '@gravity-ui/uikit';
+import type { PopoverProps } from '@gravity-ui/uikit';
 import './CellWithPopover.scss';
 interface CellWithPopoverProps extends PopoverProps {
     wrapperClassName?: string;
 }
-export declare function CellWithPopover({ children, className, wrapperClassName, ...props }: CellWithPopoverProps): JSX.Element;
+export declare function CellWithPopover({ children, className, wrapperClassName, ...props }: CellWithPopoverProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CellWithPopover/CellWithPopover.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Popover } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import './CellWithPopover.scss';
 const b = cn('ydb-cell-with-popover');
 export function CellWithPopover(_a) {
     var { children, className, wrapperClassName } = _a, props = __rest(_a, ["children", "className", "wrapperClassName"]);
-    return (_jsx("div", Object.assign({ className: b(null, wrapperClassName) }, { children: _jsx(Popover, Object.assign({ className: b('popover', className) }, props, { children: children })) })));
+    return (_jsx("div", { className: b(null, wrapperClassName), children: _jsx(Popover, Object.assign({ className: b('popover', className) }, props, { children: children })) }));
 }

package/dist/components/CellWithPopover/CellWithPopover.scss

@@ -13,7 +13,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
 
-        .yc-popover__handler {
+        .g-popover__handler {
             display: inline;
         }
     }

package/dist/components/CircularProgressBar/CircularProgressBar.d.ts

@@ -1,13 +1,13 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 import type { MetricStatus } from '../../store/reducers/tenants/types';
 import './CircularProgressBar.scss';
 interface CircularProgressBarProps {
     size?: number;
     progress?: number;
     strokeWidth?: number;
-    content?: ReactNode;
+    content?: React.ReactNode;
     status?: MetricStatus;
     circleBgClassName?: string;
 }
-export declare function CircularProgressBar({ size, progress, strokeWidth, content, status, circleBgClassName, }: CircularProgressBarProps): JSX.Element;
+export declare function CircularProgressBar({ size, progress, strokeWidth, content, status, circleBgClassName, }: CircularProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CircularProgressBar/CircularProgressBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { normalizeProgress } from '../../store/reducers/tenants/utils';
+import { cn } from '../../utils/cn';
 import './CircularProgressBar.scss';
 const b = cn('ydb-circular-progress-bar');
 export function CircularProgressBar({ size = 100, progress = 0, strokeWidth = 10, content, status, circleBgClassName, }) {
@@ -9,5 +9,5 @@ export function CircularProgressBar({ size = 100, progress = 0, strokeWidth = 10
     const circumference = 2 * Math.PI * radius;
     const normalizedProgress = normalizeProgress(progress);
     const offset = ((100 - normalizedProgress) / 100) * circumference;
-    return (_jsxs("div", Object.assign({ className: b('wrapper') }, { children: [content && _jsx("div", Object.assign({ className: b('content') }, { children: content })), _jsxs("svg", Object.assign({ className: b(), width: size, height: size }, { children: [_jsx("circle", { className: b('circle-bg', circleBgClassName), cx: center, cy: center, r: radius, strokeWidth: strokeWidth }), _jsx("circle", { className: b('circle', { status: status === null || status === void 0 ? void 0 : status.toLocaleLowerCase() }), cx: center, cy: center, r: radius, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset })] }))] })));
+    return (_jsxs("div", { className: b('wrapper'), children: [content && _jsx("div", { className: b('content'), children: content }), _jsxs("svg", { className: b(), width: size, height: size, children: [_jsx("circle", { className: b('circle-bg', circleBgClassName), cx: center, cy: center, r: radius, strokeWidth: strokeWidth }), _jsx("circle", { className: b('circle', { status: status === null || status === void 0 ? void 0 : status.toLocaleLowerCase() }), cx: center, cy: center, r: radius, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset })] })] }));
 }

package/dist/components/ClipboardButton/ClipboardButton.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { ButtonProps } from '@gravity-ui/uikit';
+import type { ButtonProps } from '@gravity-ui/uikit';
 interface ClipboardButtonProps extends Pick<ButtonProps, 'disabled' | 'size' | 'title' | 'view'> {
     className?: string;
     text: string;
 }
-export declare function ClipboardButton({ text, ...props }: ClipboardButtonProps): JSX.Element;
+export declare function ClipboardButton({ text, ...props }: ClipboardButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -1,7 +1,7 @@
 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';
+import { Button, ClipboardIcon, CopyToClipboard as CopyToClipboardUiKit, Tooltip, } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 const b = cn('clipboard-button');
 /**
  * An inner component required
@@ -9,14 +9,14 @@ const b = cn('clipboard-button');
  */
 function InnerButton(_a) {
     var { className, status, title } = _a, props = __rest(_a, ["className", "status", "title"]);
-    return (_jsx(Tooltip, Object.assign({ content: status === CopyToClipboardStatus.Success ? 'Copied!' : title || 'Copy', 
+    return (_jsx(Tooltip, { content: status === 'success' ? 'Copied!' : title || 'Copy', 
         /**
          * Auto-placement has a bug with text changing.
          * @link https://github.com/ydb-platform/ydb-embedded-ui/pull/648#discussion_r1453530092
          */
-        placement: "bottom-start" }, { children: _jsx(Button, Object.assign({}, props, { className: b(null, className) }, { children: _jsx(Button.Icon, { children: _jsx(ClipboardIcon, { status: status, size: 16 }) }) })) })));
+        placement: "bottom-start", children: _jsx(Button, Object.assign({}, props, { className: b(null, className), children: _jsx(Button.Icon, { children: _jsx(ClipboardIcon, { status: status, size: 16 }) }) })) }));
 }
 export function ClipboardButton(_a) {
     var { text } = _a, props = __rest(_a, ["text"]);
-    return (_jsx(CopyToClipboardUiKit, Object.assign({ text: text, timeout: 1000 }, { children: (status) => _jsx(InnerButton, Object.assign({}, props, { status: status })) })));
+    return (_jsx(CopyToClipboardUiKit, { text: text, timeout: 1000, children: (status) => _jsx(InnerButton, Object.assign({}, props, { status: status })) }));
 }

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

@@ -4,7 +4,7 @@ interface ComponentsProviderProps {
     registry: ComponentsRegistry;
     children: React.ReactNode;
 }
-export declare function ComponentsProvider({ children, registry }: ComponentsProviderProps): JSX.Element;
+export declare function ComponentsProvider({ children, registry }: ComponentsProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useComponent<T extends Parameters<ComponentsRegistry['get']>[0]>(id: T): ({
     StaffCard: typeof import("../User/StaffCard").StaffCard;
 } & {

package/dist/components/ComponentsProvider/ComponentsProvider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 const componentsStoreContext = React.createContext(undefined);
 export function ComponentsProvider({ children, registry }) {
-    return (_jsx(componentsStoreContext.Provider, Object.assign({ value: registry }, { children: children })));
+    return (_jsx(componentsStoreContext.Provider, { value: registry, children: children }));
 }
 export function useComponent(id) {
     const store = React.useContext(componentsStoreContext);

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

@@ -1,7 +1,8 @@
-import { StaffCard } from '../User/StaffCard';
 import { AsideNavigation } from '../../containers/AsideNavigation/AsideNavigation';
-import { ComponentsRegistryTemplate, Registry } from './registry';
 import { ErrorBoundaryInner } from '../ErrorBoundary/ErrorBoundary';
+import { StaffCard } from '../User/StaffCard';
+import type { ComponentsRegistryTemplate } from './registry';
+import { Registry } from './registry';
 declare const componentsRegistryInner: Registry<{
     StaffCard: typeof StaffCard;
 } & {

package/dist/components/ComponentsProvider/componentsRegistry.js

@@ -1,7 +1,7 @@
-import { StaffCard } from '../User/StaffCard';
 import { AsideNavigation } from '../../containers/AsideNavigation/AsideNavigation';
-import { Registry } from './registry';
 import { ErrorBoundaryInner } from '../ErrorBoundary/ErrorBoundary';
+import { StaffCard } from '../User/StaffCard';
+import { Registry } from './registry';
 const componentsRegistryInner = new Registry()
     .register('StaffCard', StaffCard)
     .register('AsideNavigation', AsideNavigation)

package/dist/components/ContentWithPopup/ContentWithPopup.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-import { PopupProps } from '@gravity-ui/uikit';
+import React from 'react';
+import type { PopupProps } from '@gravity-ui/uikit';
 interface ContentWithPopupProps extends PopupProps {
-    content: ReactNode;
+    content: React.ReactNode;
     className?: string;
-    children?: ReactNode;
+    children?: React.ReactNode;
 }
-export declare const ContentWithPopup: ({ children, content, className, hasArrow, placement, ...props }: ContentWithPopupProps) => JSX.Element;
+export declare const ContentWithPopup: ({ children, content, className, hasArrow, placement, ...props }: ContentWithPopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ContentWithPopup/ContentWithPopup.js

@@ -1,16 +1,16 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Popup } from '@gravity-ui/uikit';
 export const ContentWithPopup = (_a) => {
     var { children, content, className, hasArrow = true, placement = ['top', 'bottom'] } = _a, props = __rest(_a, ["children", "content", "className", "hasArrow", "placement"]);
-    const [isPopupVisible, setIsPopupVisible] = useState(false);
-    const anchor = useRef(null);
+    const [isPopupVisible, setIsPopupVisible] = React.useState(false);
+    const anchor = React.useRef(null);
     const showPopup = () => {
         setIsPopupVisible(true);
     };
     const hidePopup = () => {
         setIsPopupVisible(false);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Popup, Object.assign({ anchorRef: anchor, open: isPopupVisible, placement: placement, hasArrow: hasArrow }, props, { children: content })), _jsx("span", Object.assign({ className: className, ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: children }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Popup, Object.assign({ anchorRef: anchor, open: isPopupVisible, placement: placement, hasArrow: hasArrow }, props, { children: content })), _jsx("span", { className: className, ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup, children: children })] }));
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './CriticalActionDialog.scss';
 interface CriticalActionDialogProps<T> {
     visible: boolean;
@@ -8,5 +7,5 @@ interface CriticalActionDialogProps<T> {
     onConfirmActionSuccess: VoidFunction;
     onConfirmActionError: VoidFunction;
 }
-export declare function CriticalActionDialog<T>({ visible, text, onClose, onConfirm, onConfirmActionSuccess, onConfirmActionError, }: CriticalActionDialogProps<T>): JSX.Element;
+export declare function CriticalActionDialog<T>({ visible, text, onClose, onConfirm, onConfirmActionSuccess, onConfirmActionError, }: CriticalActionDialogProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CriticalActionDialog/CriticalActionDialog.js

@@ -1,8 +1,8 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { CircleXmarkFill } from '@gravity-ui/icons';
+import { Dialog } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import { Icon } from '../Icon';
 import { criticalActionDialogKeyset } from './i18n';
 import './CriticalActionDialog.scss';
@@ -17,8 +17,8 @@ const parseError = (error) => {
     return criticalActionDialogKeyset('default-error');
 };
 export function CriticalActionDialog({ visible, text, onClose, onConfirm, onConfirmActionSuccess, onConfirmActionError, }) {
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState();
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState();
     const onSubmit = async (e) => {
         e.preventDefault();
         setIsLoading(true);
@@ -37,9 +37,9 @@ export function CriticalActionDialog({ visible, text, onClose, onConfirm, onConf
     };
     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(React.Fragment, { children: [_jsxs(Dialog.Body, { className: b('body'), children: [_jsx("span", { 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 (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs(Dialog.Body, { className: b('body'), children: [_jsx("span", { 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() })));
+    return (_jsx(Dialog, { open: visible, hasCloseButton: false, className: b(), size: "s", onClose: onClose, onTransitionExited: () => setError(undefined), children: renderDialogContent() }));
 }

package/dist/components/DateRange/DateRange.d.ts

@@ -9,5 +9,5 @@ interface DateRangeProps extends DateRangeValues {
     className?: string;
     onChange?: (value: DateRangeValues) => void;
 }
-export declare const DateRange: ({ from, to, className, onChange }: DateRangeProps) => JSX.Element;
+export declare const DateRange: ({ from, to, className, onChange }: DateRangeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DateRange/DateRange.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import './DateRange.scss';
 const b = cn('date-range');
 const toTimezonelessISOString = (timestamp) => {
@@ -29,5 +29,5 @@ export const DateRange = ({ from, to, className, onChange }) => {
     };
     const startISO = toTimezonelessISOString(from);
     const endISO = toTimezonelessISOString(to);
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [_jsx("input", { type: "datetime-local", value: startISO || '', max: endISO, onChange: handleFromChange, className: b('input') }), "\u2014", _jsx("input", { type: "datetime-local", min: startISO, value: endISO || '', onChange: handleToChange, className: b('input') })] })));
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("input", { type: "datetime-local", value: startISO || '', max: endISO, onChange: handleFromChange, className: b('input') }), "\u2014", _jsx("input", { type: "datetime-local", min: startISO, value: endISO || '', onChange: handleToChange, className: b('input') })] }));
 };

package/dist/components/DiagnosticCard/DiagnosticCard.d.ts

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 import './DiagnosticCard.scss';
 interface DiagnosticCardProps {
-    children?: ReactNode;
+    children?: React.ReactNode;
     className?: string;
     active?: boolean;
 }
-export declare function DiagnosticCard({ children, className, active }: DiagnosticCardProps): JSX.Element;
+export declare function DiagnosticCard({ children, className, active }: DiagnosticCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DiagnosticCard/DiagnosticCard.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 './DiagnosticCard.scss';
 const b = cn('ydb-diagnostic-card');
 export function DiagnosticCard({ children, className, active }) {
-    return _jsx("div", Object.assign({ className: b({ active }, className) }, { children: children }));
+    return _jsx("div", { className: b({ active }, className), children: children });
 }

package/dist/components/DiskPageTitle/DiskPageTitle.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { EFlag } from '../../types/api/enums';
+import './DiskPageTitle.scss';
+interface DiskPageTitleProps {
+    entityName: React.ReactNode;
+    status: EFlag;
+    id: React.ReactNode;
+    className?: string;
+}
+export declare function DiskPageTitle({ entityName, status, id, className }: DiskPageTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DiskPageTitle/DiskPageTitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+import { StatusIcon } from '../StatusIcon/StatusIcon';
+import './DiskPageTitle.scss';
+const b = cn('ydb-disk-page-title');
+export function DiskPageTitle({ entityName, status, id, className }) {
+    return (_jsxs("div", { className: b(null, className), children: [_jsx("span", { className: b('prefix'), children: entityName }), _jsx(StatusIcon, { className: b('icon'), status: status, size: "s" }), id] }));
+}

package/dist/components/DiskPageTitle/DiskPageTitle.scss

@@ -0,0 +1,21 @@
+@import '../../styles/mixins.scss';
+
+.ydb-disk-page-title {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: baseline;
+
+    text-wrap: nowrap;
+
+    @include header-2-typography();
+
+    &__prefix {
+        margin-right: 6px;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__icon {
+        margin-right: 8px;
+    }
+}

package/dist/{containers/Storage → components}/DiskStateProgressBar/DiskStateProgressBar.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import './DiskStateProgressBar.scss';
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
     severity?: number;
     compact?: boolean;
 }
-export declare function DiskStateProgressBar({ diskAllocatedPercent, severity, compact, }: DiskStateProgressBarProps): JSX.Element;
+export declare function DiskStateProgressBar({ diskAllocatedPercent, severity, compact, }: DiskStateProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/{containers/Storage → components}/DiskStateProgressBar/DiskStateProgressBar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import cn from 'bem-cn-lite';
-import { INVERTED_DISKS_KEY } from '../../../utils/constants';
-import { useSetting } from '../../../utils/hooks';
-import { getSeverityColor } from '../../../utils/disks/helpers';
+import { cn } from '../../utils/cn';
+import { INVERTED_DISKS_KEY } from '../../utils/constants';
+import { getSeverityColor } from '../../utils/disks/helpers';
+import { useSetting } from '../../utils/hooks';
 import './DiskStateProgressBar.scss';
 const b = cn('storage-disk-progress-bar');
 export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, }) {
@@ -14,12 +14,12 @@ export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, comp
         }
         return (diskAllocatedPercent >= 0 && (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('filled'), style: {
                         width: `${inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent}%`,
-                    } }), _jsx("div", Object.assign({ className: b('filled-title') }, { children: `${Math.round(diskAllocatedPercent)}%` }))] })));
+                    } }), _jsx("div", { className: b('filled-title'), children: `${Math.round(diskAllocatedPercent)}%` })] })));
     };
     const mods = { inverted, compact };
     const color = severity !== undefined && getSeverityColor(severity);
     if (color) {
         mods[color.toLocaleLowerCase()] = true;
     }
-    return (_jsx("div", Object.assign({ className: b(mods), role: "meter", "aria-label": "Disk allocated space", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": diskAllocatedPercent }, { children: renderAllocatedPercent() })));
+    return (_jsx("div", { className: b(mods), role: "meter", "aria-label": "Disk allocated space", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": diskAllocatedPercent, children: renderAllocatedPercent() }));
 }

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './Divider.scss';
-declare function Divider(): JSX.Element;
+declare function Divider(): import("react/jsx-runtime").JSX.Element;
 export default Divider;

package/dist/components/Divider/Divider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import './Divider.scss';
 const b = cn('kv-divider');
 function Divider() {

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import './EmptyState.scss';
 declare const sizes: {
     s: number;
@@ -7,11 +7,11 @@ declare const sizes: {
 };
 export interface EmptyStateProps {
     title: string;
-    image?: ReactNode;
-    description?: ReactNode;
-    actions?: ReactNode[];
+    image?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode[];
     size?: keyof typeof sizes;
     position?: 'left' | 'center';
 }
-export declare const EmptyState: ({ image, title, description, actions, size, position, }: EmptyStateProps) => JSX.Element;
+export declare const EmptyState: ({ image, title, description, actions, size, position, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EmptyState/EmptyState.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import { Icon } from '../Icon';
 import './EmptyState.scss';
 const block = cn('empty-state');
@@ -9,5 +9,5 @@ const sizes = {
     l: 350,
 };
 export const EmptyState = ({ image, title, description, actions, size = 'm', position = 'center', }) => {
-    return (_jsx("div", Object.assign({ className: block({ size }) }, { children: _jsxs("div", Object.assign({ className: block('wrapper', { size, position }) }, { children: [_jsx("div", Object.assign({ className: block('image') }, { children: image ? (image) : (_jsx(Icon, { viewBox: "0 0 383 396", name: "emptyState", width: sizes[size], height: sizes[size] })) })), _jsx("div", Object.assign({ className: block('title', { size }) }, { children: title })), _jsx("div", Object.assign({ className: block('description') }, { children: description })), _jsx("div", Object.assign({ className: block('actions') }, { children: actions }))] })) })));
+    return (_jsx("div", { className: block({ size }), children: _jsxs("div", { className: block('wrapper', { size, position }), children: [_jsx("div", { className: block('image'), children: image ? (image) : (_jsx(Icon, { viewBox: "0 0 383 396", name: "emptyState", width: sizes[size], height: sizes[size] })) }), _jsx("div", { className: block('title', { size }), children: title }), _jsx("div", { className: block('description'), children: description }), _jsx("div", { className: block('actions'), children: actions })] }) }));
 };

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 interface EnableFullscreenButtonProps {
     disabled?: boolean;
 }
-declare function EnableFullscreenButton({ disabled }: EnableFullscreenButtonProps): JSX.Element;
+declare function EnableFullscreenButton({ disabled }: EnableFullscreenButtonProps): import("react/jsx-runtime").JSX.Element;
 export default EnableFullscreenButton;

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@gravity-ui/uikit';
-import { useTypedDispatch } from '../../utils/hooks';
 import { enableFullscreen } from '../../store/reducers/fullscreen';
+import { useTypedDispatch } from '../../utils/hooks';
 import { Icon } from '../Icon';
 function EnableFullscreenButton({ disabled }) {
     const dispatch = useTypedDispatch();
     const onEnableFullscreen = () => {
         dispatch(enableFullscreen());
     };
-    return (_jsx(Button, Object.assign({ onClick: onEnableFullscreen, view: "flat-secondary", disabled: disabled, title: "Fullscreen" }, { children: _jsx(Icon, { name: "enableFullscreen", viewBox: '0 0 16 16', height: 16, width: 16 }) })));
+    return (_jsx(Button, { onClick: onEnableFullscreen, view: "flat-secondary", disabled: disabled, title: "Fullscreen", children: _jsx(Icon, { name: "enableFullscreen", viewBox: '0 0 16 16', height: 16, width: 16 }) }));
 }
 export default EnableFullscreenButton;

package/dist/components/EntitiesCount/EntitiesCount.d.ts

@@ -5,5 +5,5 @@ interface EntitiesCountProps {
     loading?: boolean;
     className?: string;
 }
-export declare const EntitiesCount: ({ total, current, label, loading, className }: EntitiesCountProps) => JSX.Element;
+export declare const EntitiesCount: ({ total, current, label, loading, className }: EntitiesCountProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EntitiesCount/EntitiesCount.js

@@ -15,5 +15,5 @@ export const EntitiesCount = ({ total, current, label, loading, className }) =>
             content += ` ${i18n('of')} ${total}`;
         }
     }
-    return (_jsx(Label, Object.assign({ theme: "info", size: "m", className: className }, { children: content })));
+    return (_jsx(Label, { theme: "info", size: "m", className: className, children: content }));
 };

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