ydb-embedded-ui 6.10.3 → 6.12.0

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

@@ -1,9 +1,9 @@
 import './DateRange.scss';
 export interface DateRangeValues {
-    /** ms from epoch */
-    from?: number;
-    /** ms from epoch */
-    to?: number;
+    /** ms from epoch or special values like now, 1h, 1m, etc*/
+    from?: string;
+    /** ms from epoch or special values like now, 1h, 1m, etc*/
+    to?: string;
 }
 interface DateRangeProps extends DateRangeValues {
     className?: string;

package/dist/components/DateRange/DateRange.js

@@ -1,33 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { RelativeRangeDatePicker } from '@gravity-ui/date-components';
 import { cn } from '../../utils/cn';
+import i18n from './i18n';
+import { fromDateRangeValues, getdatePickerSize, toDateRangeValues } from './utils';
 import './DateRange.scss';
 const b = cn('date-range');
-const toTimezonelessISOString = (timestamp) => {
-    if (!timestamp || isNaN(timestamp)) {
-        return undefined;
-    }
-    // shift by local offset to treat toISOString output as local time
-    const shiftedTimestamp = timestamp - new Date().getTimezoneOffset() * 60 * 1000;
-    return new Date(shiftedTimestamp).toISOString().substring(0, 'yyyy-MM-DDThh:mm'.length);
+const DEFAULT_VALUE = {
+    start: {
+        value: 'now-1h',
+        type: 'relative',
+    },
+    end: {
+        value: 'now',
+        type: 'relative',
+    },
 };
 export const DateRange = ({ from, to, className, onChange }) => {
-    const handleFromChange = ({ target: { value } }) => {
-        let newFrom = value ? new Date(value).getTime() : undefined;
-        // some browsers allow selecting time after the boundary specified in `max`
-        if (newFrom && to && newFrom > to) {
-            newFrom = to;
+    const handleUpdate = React.useCallback((pickerValue) => onChange === null || onChange === void 0 ? void 0 : onChange(toDateRangeValues(pickerValue)), [onChange]);
+    const value = React.useMemo(() => {
+        if (!from && !to) {
+            return undefined;
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange({ from: newFrom, to });
-    };
-    const handleToChange = ({ target: { value } }) => {
-        let newTo = value ? new Date(value).getTime() : undefined;
-        // some browsers allow selecting time before the boundary specified in `min`
-        if (from && newTo && from > newTo) {
-            newTo = from;
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange({ from, to: newTo });
-    };
-    const startISO = toTimezonelessISOString(from);
-    const endISO = toTimezonelessISOString(to);
-    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') })] }));
+        return fromDateRangeValues({ from, to });
+    }, [from, to]);
+    // eslint-disable-next-line new-cap
+    const timeZoneString = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return (_jsx("div", { className: b(null, className), children: _jsx(RelativeRangeDatePicker, { withPresets: true, className: b('range-input', { [getdatePickerSize(value)]: true }), timeZone: timeZoneString, value: value || DEFAULT_VALUE, allowNullableValues: true, size: "m", format: i18n('date-time-format'), onUpdate: handleUpdate, placeholder: `${i18n('date-time-format')} - ${i18n('date-time-format')}`, withApplyButton: true }) }));
 };

package/dist/components/DateRange/DateRange.scss

@@ -1,18 +1,19 @@
 .date-range {
-    &__input {
-        min-width: 190px;
-        height: 28px;
-        padding: 5px 8px;
+    &__range-input {
+        &_s {
+            width: 200px;
+        }
 
-        color: var(--g-color-text-primary);
-        border: 1px solid var(--g-color-line-generic);
-        border-radius: var(--g-border-radius-m);
-        outline: none;
-        background: transparent;
-    }
+        &_m {
+            width: 300px;
+        }
+
+        &_l {
+            width: 350px;
+        }
 
-    &__input:focus,
-    &__input:focus-visible {
-        border: 1px solid var(--g-color-line-generic-hover);
+        input {
+            cursor: pointer;
+        }
     }
 }

package/dist/components/DateRange/__test__/fromDateRangeValues.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateRange/__test__/fromDateRangeValues.test.js

@@ -0,0 +1,80 @@
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import { fromDateRangeValues } from '../utils';
+describe('From daterange values to datepicker values', () => {
+    it('should return the correct datepicker values for to-absolute, from-absolute values', () => {
+        const from = new Date('2020-01-01 19:00:00').getTime();
+        const to = new Date('2022-01-01 19:00:00').getTime();
+        const dateRangeValues = {
+            from: String(from),
+            to: String(to),
+        };
+        const result = fromDateRangeValues(dateRangeValues);
+        expect(result).toEqual({
+            start: {
+                type: 'absolute',
+                value: dateTimeParse(Number(from)),
+            },
+            end: {
+                type: 'absolute',
+                value: dateTimeParse(Number(to)),
+            },
+        });
+    });
+    it('should return the correct datepicker values for to-relative, from-absolute values', () => {
+        const from = new Date('2020-01-01 19:00:00').getTime();
+        const to = 'now';
+        const dateRangeValues = {
+            from: String(from),
+            to: String(to),
+        };
+        const result = fromDateRangeValues(dateRangeValues);
+        expect(result).toEqual({
+            start: {
+                type: 'absolute',
+                value: dateTimeParse(Number(from)),
+            },
+            end: {
+                type: 'relative',
+                value: to,
+            },
+        });
+    });
+    it('should return the correct datepicker values for from-relative, to-absolute values', () => {
+        const from = 'now';
+        const to = new Date('2022-01-01 19:00:00').getTime();
+        const dateRangeValues = {
+            from: String(from),
+            to: String(to),
+        };
+        const result = fromDateRangeValues(dateRangeValues);
+        expect(result).toEqual({
+            start: {
+                type: 'relative',
+                value: from,
+            },
+            end: {
+                type: 'absolute',
+                value: dateTimeParse(Number(to)),
+            },
+        });
+    });
+    it('should return the correct datepicker values for from-relative, to-relative values', () => {
+        const from = 'now';
+        const to = 'now + 1h';
+        const dateRangeValues = {
+            from: String(from),
+            to: String(to),
+        };
+        const result = fromDateRangeValues(dateRangeValues);
+        expect(result).toEqual({
+            start: {
+                type: 'relative',
+                value: from,
+            },
+            end: {
+                type: 'relative',
+                value: to,
+            },
+        });
+    });
+});

package/dist/components/DateRange/__test__/getdatePickerSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateRange/__test__/getdatePickerSize.test.js

@@ -0,0 +1,56 @@
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import { getdatePickerSize } from '../utils';
+describe('getdatePickerSize test', () => {
+    it('should return the correct datepicker size', () => {
+        const datePickerRangeValues = {
+            start: {
+                type: 'relative',
+                value: 'now',
+            },
+            end: {
+                type: 'relative',
+                value: 'now',
+            },
+        };
+        expect(getdatePickerSize(datePickerRangeValues)).toEqual('s');
+    });
+    it('should return the correct datepicker size', () => {
+        const datePickerRangeValues = {
+            start: {
+                type: 'absolute',
+                value: dateTimeParse(Number(new Date().getTime())),
+            },
+            end: {
+                type: 'relative',
+                value: 'now + 1',
+            },
+        };
+        expect(getdatePickerSize(datePickerRangeValues)).toEqual('m');
+    });
+    it('should return the correct datepicker size', () => {
+        const datePickerRangeValues = {
+            start: {
+                type: 'relative',
+                value: 'now + 1',
+            },
+            end: {
+                type: 'absolute',
+                value: dateTimeParse(Number(new Date().getTime())),
+            },
+        };
+        expect(getdatePickerSize(datePickerRangeValues)).toEqual('m');
+    });
+    it('should return the correct datepicker size', () => {
+        const datePickerRangeValues = {
+            start: {
+                type: 'absolute',
+                value: dateTimeParse(Number(new Date().getTime())),
+            },
+            end: {
+                type: 'absolute',
+                value: dateTimeParse(Number(new Date().getTime())),
+            },
+        };
+        expect(getdatePickerSize(datePickerRangeValues)).toEqual('l');
+    });
+});

package/dist/components/DateRange/__test__/toDateRangeValues.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateRange/__test__/toDateRangeValues.test.js

@@ -0,0 +1,80 @@
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import { toDateRangeValues } from '../utils';
+describe('To daterange values from datepicker values', () => {
+    it('should return the correct datepicker values for to-absolute, from-absolute values', () => {
+        const from = new Date('2020-01-01 19:00:00').getTime();
+        const to = new Date('2022-01-01 19:00:00').getTime();
+        const datePickerRangeValues = {
+            start: {
+                type: 'absolute',
+                value: dateTimeParse(Number(from)),
+            },
+            end: {
+                type: 'absolute',
+                value: dateTimeParse(Number(to)),
+            },
+        };
+        const result = toDateRangeValues(datePickerRangeValues);
+        expect(result).toEqual({
+            from: String(from),
+            to: String(to),
+        });
+    });
+});
+it('should return the correct daterange values for to-relative, from-absolute values', () => {
+    const from = new Date('2020-01-01 19:00:00').getTime();
+    const to = 'now';
+    const datePickerRangeValues = {
+        start: {
+            type: 'absolute',
+            value: dateTimeParse(Number(from)),
+        },
+        end: {
+            type: 'relative',
+            value: to,
+        },
+    };
+    const result = toDateRangeValues(datePickerRangeValues);
+    expect(result).toEqual({
+        from: String(from),
+        to: to,
+    });
+});
+it('should return the correct daterange values for from-relative, to-absolute values', () => {
+    const from = 'now';
+    const to = new Date('2022-01-01 19:00:00').getTime();
+    const datePickerRangeValues = {
+        start: {
+            type: 'relative',
+            value: from,
+        },
+        end: {
+            type: 'absolute',
+            value: dateTimeParse(Number(to)),
+        },
+    };
+    const result = toDateRangeValues(datePickerRangeValues);
+    expect(result).toEqual({
+        from: from,
+        to: String(to),
+    });
+});
+it('should return the correct daterange values for from-relative, to-relative values', () => {
+    const from = 'now';
+    const to = 'now + 1';
+    const datePickerRangeValues = {
+        start: {
+            type: 'relative',
+            value: from,
+        },
+        end: {
+            type: 'relative',
+            value: to,
+        },
+    };
+    const result = toDateRangeValues(datePickerRangeValues);
+    expect(result).toEqual({
+        from: from,
+        to: to,
+    });
+});

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

@@ -0,0 +1,4 @@
+{
+    "date-format": "MM/DD/YYYY",
+    "date-time-format": "MM/DD/YYYY HH:mm"
+}

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

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

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

@@ -0,0 +1,5 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-date-range';
+export default registerKeysets(COMPONENT, { ru, en });

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

@@ -0,0 +1,4 @@
+{
+    "date-format": "DD.MM.YYYY",
+    "date-time-format": "DD.MM.YYYY HH:mm"
+}

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

@@ -0,0 +1,5 @@
+import type { RelativeRangeDatePickerProps } from '@gravity-ui/date-components';
+import type { DateRangeValues } from './DateRange';
+export declare function fromDateRangeValues(value: DateRangeValues): RelativeRangeDatePickerProps['value'];
+export declare function toDateRangeValues(value: RelativeRangeDatePickerProps['value']): DateRangeValues;
+export declare function getdatePickerSize(value: RelativeRangeDatePickerProps['value']): "m" | "s" | "l";

package/dist/components/DateRange/utils.js

@@ -0,0 +1,41 @@
+import { dateTimeParse, isLikeRelative } from '@gravity-ui/date-utils';
+export function fromDateRangeValues(value) {
+    var _a, _b;
+    const isFromRelative = isLikeRelative((_a = value.from) !== null && _a !== void 0 ? _a : '');
+    const isToRelative = isLikeRelative((_b = value.to) !== null && _b !== void 0 ? _b : '');
+    return {
+        start: value.from
+            ? {
+                type: isFromRelative ? 'relative' : 'absolute',
+                value: isFromRelative ? value.from : dateTimeParse(Number(value.from)),
+            }
+            : null,
+        end: value.to
+            ? {
+                type: isToRelative ? 'relative' : 'absolute',
+                value: isToRelative ? value.to : dateTimeParse(Number(value.to)),
+            }
+            : null,
+    };
+}
+export function toDateRangeValues(value) {
+    var _a, _b, _c, _d, _e, _f;
+    return {
+        from: ((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.type) === 'relative'
+            ? value.start.value.toString()
+            : String((_c = dateTimeParse((_b = value === null || value === void 0 ? void 0 : value.start) === null || _b === void 0 ? void 0 : _b.value)) === null || _c === void 0 ? void 0 : _c.valueOf()),
+        to: ((_d = value === null || value === void 0 ? void 0 : value.end) === null || _d === void 0 ? void 0 : _d.type) === 'relative'
+            ? value.end.value.toString()
+            : String((_f = dateTimeParse((_e = value === null || value === void 0 ? void 0 : value.end) === null || _e === void 0 ? void 0 : _e.value)) === null || _f === void 0 ? void 0 : _f.valueOf()),
+    };
+}
+export function getdatePickerSize(value) {
+    var _a, _b, _c, _d;
+    if (((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.type) === 'relative' && ((_b = value === null || value === void 0 ? void 0 : value.end) === null || _b === void 0 ? void 0 : _b.type) === 'relative') {
+        return 's';
+    }
+    else if (((_c = value === null || value === void 0 ? void 0 : value.start) === null || _c === void 0 ? void 0 : _c.type) === 'relative' || ((_d = value === null || value === void 0 ? void 0 : value.end) === null || _d === void 0 ? void 0 : _d.type) === 'relative') {
+        return 'm';
+    }
+    return 'l';
+}

package/dist/components/DeveloperUILinkButton/DeveloperUILinkButton.d.ts

@@ -0,0 +1,8 @@
+import './DeveloperUILinkButton.scss';
+interface DeveloperUiLinkProps {
+    className?: string;
+    visible?: boolean;
+    href: string;
+}
+export declare function DeveloperUILinkButton({ href, visible, className }: DeveloperUiLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DeveloperUILinkButton/DeveloperUILinkButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
+import './DeveloperUILinkButton.scss';
+const b = cn('developer-ui-link-button');
+export function DeveloperUILinkButton({ href, visible = false, className }) {
+    return (_jsx(Button, { size: "s", href: href, className: b({ visible }, className), target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) }));
+}

package/dist/components/DeveloperUILinkButton/DeveloperUILinkButton.scss

@@ -0,0 +1,12 @@
+.developer-ui-link-button {
+    display: none;
+
+    &_visible {
+        display: inline-block;
+    }
+
+    .data-table__row:hover &,
+    .ydb-paginated-table__row:hover & {
+        display: inline-block;
+    }
+}

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.d.ts

@@ -1,8 +1,13 @@
+import React from 'react';
 import './DiskStateProgressBar.scss';
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
     severity?: number;
     compact?: boolean;
+    faded?: boolean;
+    empty?: boolean;
+    content?: React.ReactNode;
+    className?: string;
 }
-export declare function DiskStateProgressBar({ diskAllocatedPercent, severity, compact, }: DiskStateProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DiskStateProgressBar({ diskAllocatedPercent, severity, compact, faded, empty, content, className, }: DiskStateProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.js

@@ -1,25 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
 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, }) {
+export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, faded, empty, content, className, }) {
     const [inverted] = useSetting(INVERTED_DISKS_KEY);
-    const renderAllocatedPercent = () => {
-        if (compact) {
-            return _jsx("div", { className: b('filled'), style: { width: '100%' } });
-        }
-        return (diskAllocatedPercent >= 0 && (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('filled'), style: {
-                        width: `${inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent}%`,
-                    } }), _jsx("div", { className: b('filled-title'), children: `${Math.round(diskAllocatedPercent)}%` })] })));
-    };
-    const mods = { inverted, compact };
+    const mods = { inverted, compact, faded, empty };
     const color = severity !== undefined && getSeverityColor(severity);
     if (color) {
         mods[color.toLocaleLowerCase()] = true;
     }
-    return (_jsx("div", { className: b(mods), role: "meter", "aria-label": "Disk allocated space", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": diskAllocatedPercent, children: renderAllocatedPercent() }));
+    const renderAllocatedPercent = () => {
+        if (compact) {
+            return _jsx("div", { className: b('fill-bar', mods), style: { width: '100%' } });
+        }
+        const fillWidth = inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent;
+        if (diskAllocatedPercent >= 0) {
+            return _jsx("div", { className: b('fill-bar', mods), style: { width: `${fillWidth}%` } });
+        }
+        return null;
+    };
+    const renderContent = () => {
+        if (content) {
+            return content;
+        }
+        if (!compact && diskAllocatedPercent >= 0) {
+            return _jsx("div", { className: b('title'), children: `${Math.round(diskAllocatedPercent)}%` });
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: b(mods, className), role: "meter", "aria-label": "Disk allocated space", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": diskAllocatedPercent, children: [renderAllocatedPercent(), renderContent()] }));
 }

package/dist/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -5,81 +5,70 @@
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
+    --progress-bar-border-color: var(--g-color-base-misc-heavy);
+    --progress-bar-background-color: var(--g-color-base-misc-light);
+    --progress-bar-fill-color: var(--g-color-base-misc-medium);
+
     position: relative;
     z-index: 0;
 
-    display: block;
-
     min-width: 50px;
     height: var(--g-text-body-3-line-height);
 
     text-align: center;
 
     color: var(--g-color-text-primary);
-    border: $border-width solid var(--g-color-base-misc-heavy);
+    border: $border-width solid var(--progress-bar-border-color);
     border-radius: $outer-border-radius;
-    background-color: var(--g-color-base-misc-light);
+    background-color: var(--progress-bar-background-color);
 
     &_compact {
         min-width: 0;
         height: 12px;
 
         border-radius: 2px;
-
-        #{$block}__filled {
-            border-radius: 1px;
-        }
-    }
-
-    #{$block}__filled {
-        background-color: var(--g-color-base-misc-medium);
     }
 
     &_green {
-        border-color: var(--g-color-base-positive-heavy);
-        background-color: var(--g-color-base-positive-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-positive-medium);
-
-            .g-root_theme_dark & {
-                // the common medium green is too bright for this case
-                background-color: rgb(124, 227, 121, 0.4);
-            }
-        }
+        --progress-bar-border-color: var(--g-color-base-positive-heavy);
+        --progress-bar-background-color: var(--g-color-base-positive-light);
+        --progress-bar-fill-color: var(--g-color-base-positive-medium);
     }
 
     &_blue {
-        border-color: var(--g-color-base-info-heavy);
-        background-color: var(--g-color-base-info-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-info-medium);
-        }
+        --progress-bar-border-color: var(--g-color-base-info-heavy);
+        --progress-bar-background-color: var(--g-color-base-info-light);
+        --progress-bar-fill-color: var(--g-color-base-info-medium);
     }
 
     &_yellow {
-        border-color: var(--g-color-base-warning-heavy);
-        background-color: var(--g-color-base-yellow-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-yellow-medium);
-        }
+        --progress-bar-border-color: var(--g-color-base-warning-heavy);
+        --progress-bar-background-color: var(--g-color-base-yellow-light);
+        --progress-bar-fill-color: var(--g-color-base-yellow-medium);
     }
 
     &_orange {
-        border-color: var(--ydb-color-status-orange);
-        background-color: var(--g-color-base-warning-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-warning-medium);
-        }
+        --progress-bar-border-color: var(--ydb-color-status-orange);
+        --progress-bar-background-color: var(--g-color-base-warning-light);
+        --progress-bar-fill-color: var(--g-color-base-warning-medium);
     }
     &_red {
-        border-color: var(--g-color-base-danger-heavy);
-        background-color: var(--g-color-base-danger-light);
-        #{$block}__filled {
-            background-color: var(--g-color-base-danger-medium);
-        }
+        --progress-bar-border-color: var(--g-color-base-danger-heavy);
+        --progress-bar-background-color: var(--g-color-base-danger-light);
+        --progress-bar-fill-color: var(--g-color-base-danger-medium);
+    }
+
+    &_faded {
+        background-color: unset;
     }
 
-    &__filled {
+    &_empty {
+        color: var(--g-color-text-hint);
+        border-style: dashed;
+        background-color: unset;
+    }
+
+    &__fill-bar {
         position: absolute;
         top: 0;
         left: 0;
@@ -87,15 +76,26 @@
         height: 100%;
 
         border-radius: $inner-border-radius 0 0 $inner-border-radius;
+        background-color: var(--progress-bar-fill-color);
 
-        #{$block}_inverted & {
+        &_faded {
+            // Bg color is light variant, use it to make bar less bright
+            background-color: var(--progress-bar-background-color);
+        }
+
+        &_compact {
+            border-radius: 1px;
+        }
+
+        &_inverted {
             right: 0;
             left: auto;
 
             border-radius: 0 $inner-border-radius $inner-border-radius 0;
         }
     }
-    &__filled-title {
+
+    &__title {
         position: relative;
         z-index: 2;
 

package/dist/components/EntityStatus/EntityStatus.js

@@ -28,5 +28,5 @@ export function EntityStatus({ status = EFlag.Grey, name = '', label, path, icon
     };
     return (_jsxs("div", { className: b(null, className), title: name, children: [iconPath ? renderStatusLink(iconPath) : renderIcon(), label && (_jsx("span", { title: label, className: b('label', { size, state: status.toLowerCase() }), children: label })), _jsx("span", { className: b('link', { 'with-left-trim': withLeftTrim }), children: renderLink() }), hasClipboardButton && (_jsx(ClipboardButton, { text: name, size: "s", className: b('clipboard-button', {
                     visible: clipboardButtonAlwaysVisible,
-                }) })), additionalControls] }));
+                }) })), additionalControls && (_jsx("span", { className: b('additional-controls '), children: additionalControls }))] }));
 }