ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/components/TimeFrameSelector/TimeFrameSelector.scss

@@ -1,5 +1,4 @@
 .ydb-timeframe-selector {
     display: flex;
-
     gap: 2px;
 }

package/dist/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.d.ts

@@ -3,5 +3,5 @@ import './NodeEndpointsTooltipContent.scss';
 interface NodeEdpointsTooltipProps {
     data?: TSystemStateInfo;
 }
-export declare const NodeEndpointsTooltipContent: ({ data }: NodeEdpointsTooltipProps) => JSX.Element;
+export declare const NodeEndpointsTooltipContent: ({ data }: NodeEdpointsTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import { cn } from '../../../utils/cn';
 import { InfoViewer } from '../../InfoViewer';
 import './NodeEndpointsTooltipContent.scss';
-const b = block('ydb-node-endpoints-tooltip-content');
+const b = cn('ydb-node-endpoints-tooltip-content');
 export const NodeEndpointsTooltipContent = ({ data }) => {
     const info = [];
     if (data === null || data === void 0 ? void 0 : data.Rack) {

package/dist/components/TooltipsContent/PoolTooltipContent/PoolTooltipContent.d.ts

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

package/dist/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.d.ts

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

package/dist/components/TruncatedQuery/TruncatedQuery.d.ts

@@ -3,9 +3,9 @@ interface TruncatedQueryProps {
     value?: string;
     maxQueryHeight?: number;
 }
-export declare const TruncatedQuery: ({ value, maxQueryHeight }: TruncatedQueryProps) => JSX.Element;
+export declare const TruncatedQuery: ({ value, maxQueryHeight }: TruncatedQueryProps) => import("react/jsx-runtime").JSX.Element;
 interface OneLineQueryWithPopoverProps {
     value?: string;
 }
-export declare const OneLineQueryWithPopover: ({ value }: OneLineQueryWithPopoverProps) => JSX.Element;
+export declare const OneLineQueryWithPopover: ({ value }: OneLineQueryWithPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TruncatedQuery/TruncatedQuery.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { CellWithPopover } from '../CellWithPopover/CellWithPopover';
 import './TruncatedQuery.scss';
 const b = cn('kv-truncated-query');
@@ -9,10 +10,10 @@ export const TruncatedQuery = ({ value = '', maxQueryHeight = 6 }) => {
     if (truncated) {
         const content = lines.slice(0, maxQueryHeight).join('\n');
         const message = '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
-        return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: b() }, { children: content })), _jsx("span", Object.assign({ className: b('message', { color: 'secondary' }) }, { children: message }))] }));
+        return (_jsxs(React.Fragment, { children: [_jsx("span", { className: b(), children: content }), _jsx("span", { className: b('message', { color: 'secondary' }), children: message })] }));
     }
-    return _jsx(_Fragment, { children: value });
+    return _jsx(React.Fragment, { children: value });
 };
 export const OneLineQueryWithPopover = ({ value = '' }) => {
-    return (_jsx(CellWithPopover, Object.assign({ contentClassName: b('popover-content'), content: value }, { children: value })));
+    return (_jsx(CellWithPopover, { contentClassName: b('popover-content'), content: value, children: value }));
 };

package/dist/components/UptimeFIlter/UptimeFilter.d.ts

@@ -4,5 +4,5 @@ interface UptimeFilterProps {
     onChange: (value: NodesUptimeFilterValues) => void;
     className?: string;
 }
-export declare const UptimeFilter: ({ value, onChange, className }: UptimeFilterProps) => JSX.Element;
+export declare const UptimeFilter: ({ value, onChange, className }: UptimeFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UptimeFIlter/UptimeFilter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RadioButton } from '@gravity-ui/uikit';
-import { NodesUptimeFilterValues, NodesUptimeFilterTitles } from '../../utils/nodes';
+import { NodesUptimeFilterTitles, NodesUptimeFilterValues } from '../../utils/nodes';
 export const UptimeFilter = ({ value, onChange, className }) => {
-    return (_jsxs(RadioButton, Object.assign({ value: value, onUpdate: onChange, className: className }, { children: [_jsx(RadioButton.Option, Object.assign({ value: NodesUptimeFilterValues.All }, { children: NodesUptimeFilterTitles[NodesUptimeFilterValues.All] })), _jsx(RadioButton.Option, Object.assign({ value: NodesUptimeFilterValues.SmallUptime }, { children: NodesUptimeFilterTitles[NodesUptimeFilterValues.SmallUptime] }))] })));
+    return (_jsxs(RadioButton, { value: value, onUpdate: onChange, className: className, children: [_jsx(RadioButton.Option, { value: NodesUptimeFilterValues.All, children: NodesUptimeFilterTitles[NodesUptimeFilterValues.All] }), _jsx(RadioButton.Option, { value: NodesUptimeFilterValues.SmallUptime, children: NodesUptimeFilterTitles[NodesUptimeFilterValues.SmallUptime] })] }));
 };

package/dist/components/UsageLabel/UsageLabel.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { type LabelProps } from '@gravity-ui/uikit';
+import type { LabelProps } from '@gravity-ui/uikit';
 import './UsageLabel.scss';
 interface UsageLabelProps extends Omit<LabelProps, 'value'> {
     value: number | string;
     overloadThreshold?: number;
 }
-export declare function UsageLabel({ value, overloadThreshold, theme, ...props }: UsageLabelProps): JSX.Element;
+export declare function UsageLabel({ value, overloadThreshold, theme, ...props }: UsageLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UsageLabel/UsageLabel.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Label } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import './UsageLabel.scss';
 const b = cn('ydb-usage-label');
 export function UsageLabel(_a) {

package/dist/components/User/StaffCard.d.ts

@@ -5,4 +5,4 @@ export interface StaffCardProps {
         ref?: React.Ref<HTMLElement>;
     };
 }
-export declare function StaffCard({ children }: StaffCardProps): JSX.Element;
+export declare function StaffCard({ children }: StaffCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/User/User.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import './User.scss';
 interface UserProps {
     className?: string;
     login: string;
 }
-export declare function UserCard({ login, className }: UserProps): JSX.Element;
+export declare function UserCard({ login, className }: UserProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/User/User.js

@@ -5,5 +5,5 @@ import './User.scss';
 const b = cn('kv-user');
 export function UserCard({ login, className }) {
     const StaffCard = useComponent('StaffCard');
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: _jsx(StaffCard, Object.assign({ login: login }, { children: _jsx("div", Object.assign({ className: b('name') }, { children: login })) })) })));
+    return (_jsx("div", { className: b(null, className), children: _jsx(StaffCard, { login: login, children: _jsx("div", { className: b('name'), children: login }) }) }));
 }

package/dist/components/VDisk/VDisk.d.ts

@@ -6,5 +6,5 @@ interface VDiskProps {
     nodes?: NodesMap;
     compact?: boolean;
 }
-export declare const VDisk: ({ data, nodes, compact }: VDiskProps) => JSX.Element;
+export declare const VDisk: ({ data, nodes, compact }: VDiskProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VDisk/VDisk.js

@@ -1,28 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
+import { STRUCTURE } from '../../containers/Node/NodePages';
 import routes, { createHref } from '../../routes';
+import { cn } from '../../utils/cn';
 import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
 import { isFullVDiskData } from '../../utils/disks/helpers';
-import { STRUCTURE } from '../../containers/Node/NodePages';
-import { VDiskPopup } from '../VDiskPopup/VDiskPopup';
 import { DiskStateProgressBar } from '../DiskStateProgressBar/DiskStateProgressBar';
 import { InternalLink } from '../InternalLink';
+import { VDiskPopup } from '../VDiskPopup/VDiskPopup';
 import './VDisk.scss';
 const b = cn('ydb-vdisk-component');
 export const VDisk = ({ data = {}, nodes, compact }) => {
     var _a, _b;
     const isFullData = isFullVDiskData(data);
-    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(React.Fragment, { children: [_jsx(VDiskPopup, { data: data, nodes: nodes, anchorRef: anchor, open: isPopupVisible }), _jsx("div", Object.assign({ className: b(), ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: data.NodeId && isFullData ? (_jsx(InternalLink, Object.assign({ to: createHref(routes.node, { id: data.NodeId, activeTab: STRUCTURE }, {
+    return (_jsxs(React.Fragment, { children: [_jsx(VDiskPopup, { data: data, nodes: nodes, anchorRef: anchor, open: isPopupVisible }), _jsx("div", { className: b(), ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup, children: data.NodeId && isFullData ? (_jsx(InternalLink, { to: createHref(routes.node, { id: data.NodeId, activeTab: STRUCTURE }, {
                         pdiskId: (_a = data.PDiskId) !== null && _a !== void 0 ? _a : (_b = data.PDisk) === null || _b === void 0 ? void 0 : _b.PDiskId,
                         vdiskId: stringifyVdiskId(data.VDiskId),
-                    }), className: b('content') }, { children: _jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact }) }))) : (_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact })) }))] }));
+                    }), className: b('content'), children: _jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact }) })) : (_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact })) })] }));
 };

package/dist/components/VDisk/VDiskWithDonorsStack.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { NodesMap } from '../../types/store/nodesList';
 import type { PreparedVDisk } from '../../utils/disks/types';
 interface VDiskWithDonorsStackProps {
@@ -8,5 +7,5 @@ interface VDiskWithDonorsStackProps {
     className?: string;
     stackClassName?: string;
 }
-export declare function VDiskWithDonorsStack({ data, nodes, compact, className, stackClassName, }: VDiskWithDonorsStackProps): JSX.Element;
+export declare function VDiskWithDonorsStack({ data, nodes, compact, className, stackClassName, }: VDiskWithDonorsStackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VDisk/VDiskWithDonorsStack.js

@@ -5,10 +5,10 @@ import { Stack } from '../Stack/Stack';
 import { VDisk } from './VDisk';
 export function VDiskWithDonorsStack({ data, nodes, compact, className, stackClassName, }) {
     const donors = data === null || data === void 0 ? void 0 : data.Donors;
-    const content = donors && donors.length > 0 ? (_jsxs(Stack, Object.assign({ className: stackClassName }, { children: [_jsx(VDisk, { data: data, nodes: nodes, compact: compact }), donors.map((donor) => {
+    const content = donors && donors.length > 0 ? (_jsxs(Stack, { className: stackClassName, children: [_jsx(VDisk, { data: data, nodes: nodes, compact: compact }), donors.map((donor) => {
                 const isFullData = isFullVDiskData(donor);
                 // donor and acceptor are always in the same group
                 return (_jsx(VDisk, { data: donor, nodes: nodes, compact: compact }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
-            })] }))) : (_jsx(VDisk, { data: data, nodes: nodes, compact: compact }));
-    return _jsx("div", Object.assign({ className: className }, { children: content }));
+            })] })) : (_jsx(VDisk, { data: data, nodes: nodes, compact: compact }));
+    return _jsx("div", { className: className, children: content });
 }

package/dist/components/VDiskInfo/VDiskInfo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PreparedVDisk } from '../../utils/disks/types';
 import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
 import './VDiskInfo.scss';
@@ -6,5 +5,5 @@ interface VDiskInfoProps<T extends PreparedVDisk> extends Omit<InfoViewerProps,
     data: T;
     isVDiskPage?: boolean;
 }
-export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, ...infoViewerProps }: VDiskInfoProps<T>): JSX.Element;
+export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, ...infoViewerProps }: VDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VDiskInfo/VDiskInfo.js

@@ -1,13 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getVDiskPagePath } from '../../routes';
 import { valueIsDefined } from '../../utils';
-import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
-import { bytesToSpeed } from '../../utils/utils';
 import { cn } from '../../utils/cn';
+import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
 import { createVDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
-import { getVDiskPagePath } from '../../routes';
-import { InfoViewer } from '../InfoViewer';
+import { bytesToSpeed } from '../../utils/utils';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
+import { InfoViewer } from '../InfoViewer';
 import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
 import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import { vDiskInfoKeyset } from './i18n';
@@ -106,7 +106,7 @@ export function VDiskInfo(_a) {
         });
         vdiskInfo.push({
             label: vDiskInfoKeyset('links'),
-            value: (_jsxs("span", Object.assign({ className: b('links') }, { children: [!isVDiskPage && (_jsx(LinkWithIcon, { title: vDiskInfoKeyset('vdisk-page'), url: vDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: vDiskInfoKeyset('developer-ui'), url: vDiskInternalViewerPath })] }))),
+            value: (_jsxs("span", { className: b('links'), children: [!isVDiskPage && (_jsx(LinkWithIcon, { title: vDiskInfoKeyset('vdisk-page'), url: vDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: vDiskInfoKeyset('developer-ui'), url: vDiskInternalViewerPath })] })),
         });
     }
     return _jsx(InfoViewer, Object.assign({ info: vdiskInfo }, infoViewerProps));

package/dist/components/VDiskInfo/VDiskInfo.scss

@@ -2,7 +2,6 @@
     &__links {
         display: flex;
         flex-flow: row wrap;
-
         gap: 12px;
     }
 }

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

@@ -1 +1 @@
-export declare const vDiskInfoKeyset: (key: "size" | "kind" | "yes" | "no" | "links" | "guid" | "developer-ui" | "slot-id" | "pool-name" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const vDiskInfoKeyset: (key: "size" | "kind" | "links" | "yes" | "no" | "pool-name" | "guid" | "developer-ui" | "slot-id" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/components/VDiskPopup/VDiskPopup.d.ts

@@ -1,11 +1,11 @@
-import { PopupProps } from '@gravity-ui/uikit';
-import type { NodesMap } from '../../types/store/nodesList';
+import type { PopupProps } from '@gravity-ui/uikit';
 import type { TVDiskStateInfo } from '../../types/api/vdisk';
+import type { NodesMap } from '../../types/store/nodesList';
 import type { UnavailableDonor } from '../../utils/disks/types';
 import './VDiskPopup.scss';
 interface VDiskPopupProps extends PopupProps {
     data: TVDiskStateInfo | UnavailableDonor;
     nodes?: NodesMap;
 }
-export declare const VDiskPopup: ({ data, nodes, ...props }: VDiskPopupProps) => JSX.Element;
+export declare const VDiskPopup: ({ data, nodes, ...props }: VDiskPopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VDiskPopup/VDiskPopup.js

@@ -1,15 +1,15 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { Label, Popup } from '@gravity-ui/uikit';
 import { EFlag } from '../../types/api/enums';
+import { cn } from '../../utils/cn';
+import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
 import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
-import { bytesToGB, bytesToSpeed } from '../../utils/utils';
 import { isFullVDiskData } from '../../utils/disks/helpers';
-import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
-import { preparePDiskData } from '../PDiskPopup/PDiskPopup';
+import { bytesToGB, bytesToSpeed } from '../../utils/utils';
 import { InfoViewer } from '../InfoViewer';
+import { preparePDiskData } from '../PDiskPopup/PDiskPopup';
 import './VDiskPopup.scss';
 const b = cn('vdisk-storage-popup');
 const prepareUnavailableVDiskData = (data) => {
@@ -87,10 +87,10 @@ const prepareVDiskData = (data) => {
 export const VDiskPopup = (_a) => {
     var { data, nodes } = _a, props = __rest(_a, ["data", "nodes"]);
     const isFullData = isFullVDiskData(data);
-    const vdiskInfo = useMemo(() => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)), [data, isFullData]);
-    const pdiskInfo = useMemo(() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes), [data, nodes, isFullData]);
+    const vdiskInfo = React.useMemo(() => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)), [data, isFullData]);
+    const pdiskInfo = React.useMemo(() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes), [data, nodes, isFullData]);
     return (_jsxs(Popup, Object.assign({ contentClassName: b(), placement: ['top', 'bottom'], 
         // bigger offset for easier switching to neighbour nodes
         // matches the default offset for popup with arrow out of a sense of beauty
-        offset: [0, 12] }, props, { children: [data.DonorMode && _jsx(Label, Object.assign({ className: b('donor-label') }, { children: "Donor" })), _jsx(InfoViewer, { title: "VDisk", info: vdiskInfo, size: "s" }), pdiskInfo && _jsx(InfoViewer, { title: "PDisk", info: pdiskInfo, size: "s" })] })));
+        offset: [0, 12] }, props, { children: [data.DonorMode && _jsx(Label, { className: b('donor-label'), children: "Donor" }), _jsx(InfoViewer, { title: "VDisk", info: vdiskInfo, size: "s" }), pdiskInfo && _jsx(InfoViewer, { title: "PDisk", info: pdiskInfo, size: "s" })] })));
 };

package/dist/components/VirtualTable/TableChunk.d.ts

@@ -1,4 +1,4 @@
-import type { Column, Chunk, GetRowClassName } from './types';
+import type { Chunk, Column, GetRowClassName } from './types';
 interface TableChunkProps<T> {
     id: number;
     chunkSize: number;
@@ -8,5 +8,5 @@ interface TableChunkProps<T> {
     observer: IntersectionObserver;
     getRowClassName?: GetRowClassName<T>;
 }
-export declare const TableChunk: <T>({ id, chunkSize, rowHeight, columns, chunkData, observer, getRowClassName, }: TableChunkProps<T>) => JSX.Element;
+export declare const TableChunk: <T>({ id, chunkSize, rowHeight, columns, chunkData, observer, getRowClassName, }: TableChunkProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VirtualTable/TableChunk.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, memo } from 'react';
+import React from 'react';
 import { getArray } from '../../utils';
 import { LoadingTableRow, TableRow } from './TableRow';
 // With original memo generic types are lost
-const typedMemo = memo;
+const typedMemo = React.memo;
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
 export const TableChunk = typedMemo(function TableChunk({ id, chunkSize, rowHeight, columns, chunkData, observer, getRowClassName, }) {
     var _a;
-    const ref = useRef(null);
-    useEffect(() => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
         const el = ref.current;
         if (el) {
             observer.observe(el);
@@ -39,5 +39,5 @@ export const TableChunk = typedMemo(function TableChunk({ id, chunkSize, rowHeig
             return (_jsx(TableRow, { index: index, row: data, columns: columns, height: rowHeight, getRowClassName: getRowClassName }, index));
         });
     };
-    return (_jsx("tbody", Object.assign({ ref: ref, id: id.toString(), style: { height: `${chunkHeight}px` } }, { children: renderContent() })));
+    return (_jsx("tbody", { ref: ref, id: id.toString(), style: { height: `${chunkHeight}px` }, children: renderContent() }));
 });

package/dist/components/VirtualTable/TableHead.d.ts

@@ -10,7 +10,7 @@ interface TableHeadCellProps<T> {
     onCellMount?: (element: Element) => void;
     onCellUnMount?: (element: Element) => void;
 }
-export declare const TableHeadCell: <T>({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }: TableHeadCellProps<T>) => JSX.Element;
+export declare const TableHeadCell: <T>({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }: TableHeadCellProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface TableHeadProps<T> {
     columns: Column<T>[];
     onSort?: OnSort;
@@ -18,5 +18,5 @@ interface TableHeadProps<T> {
     defaultSortOrder?: SortOrderType;
     rowHeight?: number;
 }
-export declare const TableHead: <T>({ columns, onSort, onColumnsResize, defaultSortOrder, rowHeight, }: TableHeadProps<T>) => JSX.Element;
+export declare const TableHead: <T>({ columns, onSort, onColumnsResize, defaultSortOrder, rowHeight, }: TableHeadProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VirtualTable/TableHead.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { ASCENDING, DEFAULT_RESIZEABLE, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING, } from './constants';
 import { b } from './shared';
 const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
 // Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
 const SortIcon = ({ order }) => {
-    return (_jsx("svg", Object.assign({ className: b('sort-icon', { desc: order === DESCENDING }), viewBox: "0 0 10 6", width: "10", height: "6" }, { children: _jsx("path", { fill: "currentColor", d: "M0 5h10l-5 -5z" }) })));
+    return (_jsx("svg", { className: b('sort-icon', { desc: order === DESCENDING }), viewBox: "0 0 10 6", width: "10", height: "6", children: _jsx("path", { fill: "currentColor", d: "M0 5h10l-5 -5z" }) }));
 };
 const ColumnSortIcon = ({ sortOrder, sortable, defaultSortOrder }) => {
     if (sortable) {
-        return (_jsx("span", Object.assign({ className: b('sort-icon-container', { shadow: !sortOrder }) }, { children: _jsx(SortIcon, { order: sortOrder || defaultSortOrder }) })));
+        return (_jsx("span", { className: b('sort-icon-container', { shadow: !sortOrder }), children: _jsx(SortIcon, { order: sortOrder || defaultSortOrder }) }));
     }
     else {
         return null;
@@ -17,8 +17,8 @@ const ColumnSortIcon = ({ sortOrder, sortable, defaultSortOrder }) => {
 };
 export const TableHeadCell = ({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }) => {
     var _a;
-    const cellWrapperRef = useRef(null);
-    useEffect(() => {
+    const cellWrapperRef = React.useRef(null);
+    React.useEffect(() => {
         const cellWrapper = cellWrapperRef.current;
         if (cellWrapper) {
             onCellMount === null || onCellMount === void 0 ? void 0 : onCellMount(cellWrapper);
@@ -30,21 +30,19 @@ export const TableHeadCell = ({ column, resizeable, sortOrder, defaultSortOrder,
         };
     }, [onCellMount, onCellUnMount]);
     const content = (_a = column.header) !== null && _a !== void 0 ? _a : column.name;
-    return (_jsx("th", { children: _jsx("div", Object.assign({ ref: cellWrapperRef, className: b('head-cell-wrapper', { resizeable }), style: {
+    return (_jsx("th", { children: _jsx("div", { ref: cellWrapperRef, className: b('head-cell-wrapper', { resizeable }), style: {
                 height: `${rowHeight}px`,
                 width: `${column.width}px`,
-            } }, {
-            [COLUMN_NAME_HTML_ATTRIBUTE]: column.name,
-        }, { children: _jsxs("div", Object.assign({ className: b('head-cell', { align: column.align, sortable: column.sortable }, column.className), onClick: () => {
+            }, [COLUMN_NAME_HTML_ATTRIBUTE]: column.name, children: _jsxs("div", { className: b('head-cell', { align: column.align, sortable: column.sortable }, column.className), onClick: () => {
                     if (column.sortable) {
                         onSort === null || onSort === void 0 ? void 0 : onSort(column.name);
                     }
-                } }, { children: [_jsx("div", Object.assign({ className: b('head-cell-content') }, { children: content })), _jsx(ColumnSortIcon, { sortOrder: sortOrder, sortable: column.sortable, defaultSortOrder: defaultSortOrder })] })) })) }));
+                }, children: [_jsx("div", { className: b('head-cell-content'), children: content }), _jsx(ColumnSortIcon, { sortOrder: sortOrder, sortable: column.sortable, defaultSortOrder: defaultSortOrder })] }) }) }));
 };
 export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder = DEFAULT_SORT_ORDER, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, }) => {
-    const [sortParams, setSortParams] = useState({});
+    const [sortParams, setSortParams] = React.useState({});
     const isTableResizeable = Boolean(onColumnsResize);
-    const resizeObserver = useMemo(() => {
+    const resizeObserver = React.useMemo(() => {
         if (!isTableResizeable) {
             return undefined;
         }
@@ -59,10 +57,10 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
             onColumnsResize === null || onColumnsResize === void 0 ? void 0 : onColumnsResize(columnsWidth);
         });
     }, [onColumnsResize, isTableResizeable]);
-    const handleCellMount = useCallback((element) => {
+    const handleCellMount = React.useCallback((element) => {
         resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(element);
     }, [resizeObserver]);
-    const handleCellUnMount = useCallback((element) => {
+    const handleCellUnMount = React.useCallback((element) => {
         resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(element);
     }, [resizeObserver]);
     const handleSort = (columnId) => {
@@ -98,12 +96,12 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
             }) }));
     };
     const renderTableHead = () => {
-        return (_jsx("thead", Object.assign({ className: b('head') }, { children: _jsx("tr", { children: columns.map((column) => {
+        return (_jsx("thead", { className: b('head'), children: _jsx("tr", { children: columns.map((column) => {
                     var _a;
                     const sortOrder = sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
                     const resizeable = onColumnsResize && ((_a = column.resizeable) !== null && _a !== void 0 ? _a : DEFAULT_RESIZEABLE);
                     return (_jsx(TableHeadCell, { column: column, resizeable: resizeable, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onCellMount: handleCellMount, onCellUnMount: handleCellUnMount }, column.name));
-                }) }) })));
+                }) }) }));
     };
-    return (_jsxs(_Fragment, { children: [renderTableColGroups(), renderTableHead()] }));
+    return (_jsxs(React.Fragment, { children: [renderTableColGroups(), renderTableHead()] }));
 };

package/dist/components/VirtualTable/TableRow.d.ts

@@ -1,11 +1,11 @@
-import { type ReactNode } from 'react';
+/// <reference types="react" />
 import type { Column, GetRowClassName } from './types';
 interface LoadingTableRowProps<T> {
     columns: Column<T>[];
     index: number;
     height: number;
 }
-export declare const LoadingTableRow: <T>({ index, columns, height }: LoadingTableRowProps<T>) => JSX.Element;
+export declare const LoadingTableRow: <T>({ index, columns, height }: LoadingTableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface TableRowProps<T> {
     columns: Column<T>[];
     index: number;
@@ -13,10 +13,10 @@ interface TableRowProps<T> {
     height: number;
     getRowClassName?: GetRowClassName<T>;
 }
-export declare const TableRow: <T>({ row, index, columns, getRowClassName, height }: TableRowProps<T>) => JSX.Element;
+export declare const TableRow: <T>({ row, index, columns, getRowClassName, height }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface EmptyTableRowProps<T> {
     columns: Column<T>[];
-    children?: ReactNode;
+    children?: React.ReactNode;
 }
-export declare const EmptyTableRow: <T>({ columns, children }: EmptyTableRowProps<T>) => JSX.Element;
+export declare const EmptyTableRow: <T>({ columns, children }: EmptyTableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VirtualTable/TableRow.js

@@ -4,19 +4,19 @@ import { DEFAULT_ALIGN } from './constants';
 import { b } from './shared';
 const TableRowCell = ({ children, className, height, width, align = DEFAULT_ALIGN, }) => {
     // Additional maxWidth to ensure overflow hidden for <td>
-    return (_jsx("td", Object.assign({ className: b('row-cell', { align: align }, className), style: { height: `${height}px`, width: `${width}px`, maxWidth: `${width}px` } }, { children: children })));
+    return (_jsx("td", { className: b('row-cell', { align: align }, className), style: { height: `${height}px`, width: `${width}px`, maxWidth: `${width}px` }, children: children }));
 };
 export const LoadingTableRow = ({ index, columns, height }) => {
-    return (_jsx("tr", Object.assign({ className: b('row') }, { children: columns.map((column) => {
-            return (_jsx(TableRowCell, Object.assign({ height: height, width: column.width, align: column.align, className: column.className }, { children: _jsx(Skeleton, { style: { width: '80%', height: '50%' } }) }), `${column.name}${index}`));
-        }) })));
+    return (_jsx("tr", { className: b('row'), children: columns.map((column) => {
+            return (_jsx(TableRowCell, { height: height, width: column.width, align: column.align, className: column.className, children: _jsx(Skeleton, { style: { width: '80%', height: '50%' } }) }, `${column.name}${index}`));
+        }) }));
 };
 export const TableRow = ({ row, index, columns, getRowClassName, height }) => {
     const additionalClassName = getRowClassName === null || getRowClassName === void 0 ? void 0 : getRowClassName(row);
-    return (_jsx("tr", Object.assign({ className: b('row', additionalClassName) }, { children: columns.map((column) => {
-            return (_jsx(TableRowCell, Object.assign({ height: height, width: column.width, align: column.align, className: column.className }, { children: column.render({ row, index }) }), `${column.name}${index}`));
-        }) })));
+    return (_jsx("tr", { className: b('row', additionalClassName), children: columns.map((column) => {
+            return (_jsx(TableRowCell, { height: height, width: column.width, align: column.align, className: column.className, children: column.render({ row, index }) }, `${column.name}${index}`));
+        }) }));
 };
 export const EmptyTableRow = ({ columns, children }) => {
-    return (_jsx("tr", Object.assign({ className: b('row', { empty: true }) }, { children: _jsx("td", Object.assign({ colSpan: columns.length, className: b('td') }, { children: children })) })));
+    return (_jsx("tr", { className: b('row', { empty: true }), children: _jsx("td", { colSpan: columns.length, className: b('td'), children: children }) }));
 };

package/dist/components/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize';
-import type { Column, FetchData, SortParams, RenderControls, GetRowClassName, RenderEmptyDataMessage, RenderErrorMessage } from './types';
+import type { Column, FetchData, GetRowClassName, RenderControls, RenderEmptyDataMessage, RenderErrorMessage, SortParams } from './types';
 import './VirtualTable.scss';
 interface VirtualTableProps<T> {
     limit: number;
@@ -15,5 +15,5 @@ interface VirtualTableProps<T> {
     renderErrorMessage?: RenderErrorMessage;
     dependencyArray?: unknown[];
 }
-export declare const VirtualTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: VirtualTableProps<T>) => JSX.Element;
+export declare const VirtualTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: VirtualTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};