@hh.ru/magritte-ui-table 3.2.9 → 4.0.0

package/StickyTableHeader.d.ts

@@ -1,10 +1,10 @@
 import { FC, PropsWithChildren, RefObject } from 'react';
-import { Density } from '@hh.ru/magritte-ui-table/types';
+import { TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';
 interface StickyTableHeaderProps extends PropsWithChildren {
     root: HTMLDivElement;
     headerRef: RefObject<HTMLTableSectionElement>;
     divider?: boolean;
-    density: Density;
+    density: TokenBaseStaticSpace;
 }
 export declare const StickyTableHeader: FC<StickyTableHeaderProps>;
 export {};

package/StickyTableHeader.js

@@ -4,15 +4,9 @@ import { useRef, useContext, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import classnames from 'classnames';
 import { TableContext } from './context.js';
-import { c as cellStyles } from './cell-CmFhtUuZ.js';
-import { s as styles } from './table-DCGiTlL0.js';
+import { c as cellStyles } from './cell-DJucuY6T.js';
+import { s as styles } from './table-h9Fxk8He.js';
 
-const DENSITY_TO_CSS = {
-    'extra-small': styles.densityExtraSmall,
-    small: styles.densitySmall,
-    medium: styles.densityMedium,
-    large: styles.densityLarge,
-};
 const StickyTableHeader = ({ root, divider, density, headerRef, children }) => {
     const ref = useRef(null);
     const { fontLoaded: renderPortal, subscribeResizeHandler, unsubscribeResizeHandler } = useContext(TableContext);
@@ -40,9 +34,11 @@ const StickyTableHeader = ({ root, divider, density, headerRef, children }) => {
         return void 0;
     }, [root, renderPortal, calcWidth, subscribeResizeHandler, unsubscribeResizeHandler]);
     return (jsx(Fragment, { children: renderPortal &&
-            createPortal(jsx("table", { ref: ref, className: classnames(styles.table, cellStyles.duplicateTable), children: jsx("thead", { className: classnames(styles.header, DENSITY_TO_CSS[density], {
+            createPortal(jsx("table", { ref: ref, className: classnames(styles.table, cellStyles.duplicateTable), children: jsx("thead", { className: classnames(styles.header, {
                         [styles.withDivider]: !!divider,
-                    }), "data-qa": "table-sticky-header", children: children }) }), root) }));
+                    }), style: {
+                        '--magritte-table-row-gap': `${density}px 0`,
+                    }, "data-qa": "table-sticky-header", children: children }) }), root) }));
 };
 
 export { StickyTableHeader };

package/StickyTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"StickyTableHeader.js","sources":["src/StickyTableHeader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, RefObject, useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\nimport { Density } from '@hh.ru/magritte-ui-table/types';\n\nimport cellStyles from './cell.less';\nimport styles from './table.less';\n\ninterface StickyTableHeaderProps extends PropsWithChildren {\n    root: HTMLDivElement;\n    headerRef: RefObject<HTMLTableSectionElement>;\n    divider?: boolean;\n    density: Density;\n}\n\nconst DENSITY_TO_CSS = {\n    'extra-small': styles.densityExtraSmall,\n    small: styles.densitySmall,\n    medium: styles.densityMedium,\n    large: styles.densityLarge,\n};\n\nexport const StickyTableHeader: FC<StickyTableHeaderProps> = ({ root, divider, density, headerRef, children }) => {\n    const ref = useRef<HTMLTableElement>(null);\n    const { fontLoaded: renderPortal, subscribeResizeHandler, unsubscribeResizeHandler } = useContext(TableContext);\n\n    const calcWidth = useCallback(() => {\n        if (ref.current && root && headerRef.current) {\n            const columnsHeader =\n                headerRef.current.querySelectorAll<HTMLTableCellElement>('[data-magritte-table-cell]');\n            const widths: number[] = [];\n            [...columnsHeader].forEach((column, index) => {\n                widths[index] = column.getBoundingClientRect().width;\n            });\n            const columns = ref.current.querySelectorAll<HTMLElement>('[data-magritte-table-cell]');\n            [...columns].forEach((column, index) => {\n                column.style.setProperty('width', `${widths[index]}px`);\n                column.style.setProperty('max-width', `${widths[index]}px`);\n            });\n            root.style.setProperty('margin-bottom', `-${headerRef.current.getBoundingClientRect().height}px`);\n        }\n    }, [headerRef, root]);\n\n    useLayoutEffect(() => {\n        if (root && renderPortal) {\n            calcWidth();\n            subscribeResizeHandler?.(calcWidth, 1);\n\n            return () => unsubscribeResizeHandler?.(calcWidth);\n        }\n\n        return void 0;\n    }, [root, renderPortal, calcWidth, subscribeResizeHandler, unsubscribeResizeHandler]);\n\n    return (\n        <>\n            {renderPortal &&\n                createPortal(\n                    <table ref={ref} className={classnames(styles.table, cellStyles.duplicateTable)}>\n                        <thead\n                            className={classnames(styles.header, DENSITY_TO_CSS[density], {\n                                [styles.withDivider]: !!divider,\n                            })}\n                            data-qa=\"table-sticky-header\"\n                        >\n                            {children}\n                        </thead>\n                    </table>,\n                    root\n                )}\n        </>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"StickyTableHeader.js","sources":["src/StickyTableHeader.tsx"],"sourcesContent":["import {\n    CSSProperties,\n    FC,\n    PropsWithChildren,\n    RefObject,\n    useCallback,\n    useContext,\n    useLayoutEffect,\n    useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\n\nimport cellStyles from './cell.less';\nimport styles from './table.less';\n\ninterface StickyTableHeaderProps extends PropsWithChildren {\n    root: HTMLDivElement;\n    headerRef: RefObject<HTMLTableSectionElement>;\n    divider?: boolean;\n    density: TokenBaseStaticSpace;\n}\n\nexport const StickyTableHeader: FC<StickyTableHeaderProps> = ({ root, divider, density, headerRef, children }) => {\n    const ref = useRef<HTMLTableElement>(null);\n    const { fontLoaded: renderPortal, subscribeResizeHandler, unsubscribeResizeHandler } = useContext(TableContext);\n\n    const calcWidth = useCallback(() => {\n        if (ref.current && root && headerRef.current) {\n            const columnsHeader =\n                headerRef.current.querySelectorAll<HTMLTableCellElement>('[data-magritte-table-cell]');\n            const widths: number[] = [];\n            [...columnsHeader].forEach((column, index) => {\n                widths[index] = column.getBoundingClientRect().width;\n            });\n            const columns = ref.current.querySelectorAll<HTMLElement>('[data-magritte-table-cell]');\n            [...columns].forEach((column, index) => {\n                column.style.setProperty('width', `${widths[index]}px`);\n                column.style.setProperty('max-width', `${widths[index]}px`);\n            });\n            root.style.setProperty('margin-bottom', `-${headerRef.current.getBoundingClientRect().height}px`);\n        }\n    }, [headerRef, root]);\n\n    useLayoutEffect(() => {\n        if (root && renderPortal) {\n            calcWidth();\n            subscribeResizeHandler?.(calcWidth, 1);\n\n            return () => unsubscribeResizeHandler?.(calcWidth);\n        }\n\n        return void 0;\n    }, [root, renderPortal, calcWidth, subscribeResizeHandler, unsubscribeResizeHandler]);\n\n    return (\n        <>\n            {renderPortal &&\n                createPortal(\n                    <table ref={ref} className={classnames(styles.table, cellStyles.duplicateTable)}>\n                        <thead\n                            className={classnames(styles.header, {\n                                [styles.withDivider]: !!divider,\n                            })}\n                            style={\n                                {\n                                    '--magritte-table-row-gap': `${density}px 0`,\n                                } as CSSProperties\n                            }\n                            data-qa=\"table-sticky-header\"\n                        >\n                            {children}\n                        </thead>\n                    </table>,\n                    root\n                )}\n        </>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AA0Ba,MAAA,iBAAiB,GAA+B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAI;AAC7G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;AAC3C,IAAA,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;AAEhH,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,MAAK;QAC/B,IAAI,GAAG,CAAC,OAAO,IAAI,IAAI,IAAI,SAAS,CAAC,OAAO,EAAE;YAC1C,MAAM,aAAa,GACf,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAuB,4BAA4B,CAAC,CAAC;YAC3F,MAAM,MAAM,GAAa,EAAE,CAAC;YAC5B,CAAC,GAAG,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;gBACzC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;AACzD,aAAC,CAAC,CAAC;YACH,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAc,4BAA4B,CAAC,CAAC;YACxF,CAAC,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;AACnC,gBAAA,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAG,EAAA,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAI,CAAC,CAAC;AACxD,gBAAA,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,CAAG,EAAA,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAI,CAAC,CAAC;AAChE,aAAC,CAAC,CAAC;AACH,YAAA,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,CAAI,CAAA,EAAA,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAA,EAAA,CAAI,CAAC,CAAC;SACrG;AACL,KAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IAEtB,eAAe,CAAC,MAAK;AACjB,QAAA,IAAI,IAAI,IAAI,YAAY,EAAE;AACtB,YAAA,SAAS,EAAE,CAAC;AACZ,YAAA,sBAAsB,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;YAEvC,OAAO,MAAM,wBAAwB,GAAG,SAAS,CAAC,CAAC;SACtD;QAED,OAAO,KAAK,CAAC,CAAC;AAClB,KAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB,EAAE,wBAAwB,CAAC,CAAC,CAAC;IAEtF,QACIA,0BACK,YAAY;YACT,YAAY,CACRA,GAAO,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,EAAA,QAAA,EAC3EA,GACI,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;AACjC,wBAAA,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,OAAO;qBAClC,CAAC,EACF,KAAK,EACD;wBACI,0BAA0B,EAAE,CAAG,EAAA,OAAO,CAAM,IAAA,CAAA;qBAC9B,EAEd,SAAA,EAAA,qBAAqB,EAE5B,QAAA,EAAA,QAAQ,EACL,CAAA,EAAA,CACJ,EACR,IAAI,CACP,EACN,CAAA,EACL;AACN;;;;"}

package/Table.js

@@ -6,18 +6,24 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
+import { VirtualizedListWrapper } from './VirtualizedList/VirtualizedListWrapper.js';
+import { VirtualizedPanel } from './VirtualizedList/VirtualizedPanel.js';
 import { TableContext } from './context.js';
 import { useTableResize } from './useTableResize.js';
-import { c as cellStyles } from './cell-CmFhtUuZ.js';
-import { s as styles } from './table-DCGiTlL0.js';
+import { c as cellStyles } from './cell-DJucuY6T.js';
+import { s as styles } from './table-h9Fxk8He.js';
+import './VirtualizedList/context.js';
+import './virtualized-list-B8kzPHyT.js';
 
-const DENSITY_TO_CSS = {
-    'extra-small': styles.densityExtraSmall,
-    small: styles.densitySmall,
-    medium: styles.densityMedium,
-    large: styles.densityLarge,
+const measureElement = (element) => {
+    let rowHeight = element?.getBoundingClientRect().height;
+    const siblingElement = element.nextElementSibling;
+    if (siblingElement && siblingElement.hasAttribute('data-magritte-table-row-panel')) {
+        rowHeight += siblingElement.getBoundingClientRect().height;
+    }
+    return rowHeight;
 };
-const Table = ({ density = 'small', topPanel, bottomPanel, fixedSize, stickyBottom, stickyHeader, divider, dividerTop, dividerBottom, tinted, style = 'primary', styleHighlighted, tintedStyle = 'secondary', tintedStyleHighlighted, topStyle, bottomStyle, padding, paddingLeft: _paddingLeft, paddingRight: _paddingRight, cellsGap, onScrollHorizontal, virtualized = true, 'data-qa': dataQa = 'table-wrapper', children, }) => {
+const Table = ({ density = 16, topPanel: _topPanel, bottomPanel: _bottomPanel, fixedSize, stickyBottom, stickyHeader, divider, dividerTop, dividerBottom, tinted, style = 'primary', styleHighlighted, tintedStyle = 'secondary', tintedStyleHighlighted, topStyle, bottomStyle, padding, paddingLeft: _paddingLeft, paddingRight: _paddingRight, cellsGap, onScrollHorizontal, virtualized = true, 'data-qa': dataQa = 'table-wrapper', children, }) => {
     const wrapperRef = useRef(null);
     const contentRef = useRef(null);
     const tableRef = useRef(null);
@@ -130,11 +136,6 @@ const Table = ({ density = 'small', topPanel, bottomPanel, fixedSize, stickyBott
         }
         return void 0;
     }, [calcDividersAndScrollbar, isMobile, subscribeResizeHandler, unsubscribeResizeHandler]);
-    const { hasVerticalScroll, verticalScrollbarProps, ...vScrollbar } = useScrollbar({
-        axis: fixedSize ? 'vertical' : 'none',
-    });
-    const wrapperRefCallback = useMultipleRefs(wrapperRef, vScrollbar.scrollContainerRef);
-    const contentRefCallback = useMultipleRefs(contentRef, vScrollbar.contentWrapperRef);
     const { hasHorizontalScroll, horizontalScrollbarProps, ...hScrollbar } = useScrollbar({
         axis: 'horizontal',
         offsetRight: fixedSize ? 8 : undefined,
@@ -144,28 +145,26 @@ const Table = ({ density = 'small', topPanel, bottomPanel, fixedSize, stickyBott
     if (isMobile) {
         return null;
     }
-    return (jsxs("div", { className: classnames(styles.wrapper, DENSITY_TO_CSS[density], vScrollbar.hoverContainerCssClass, {
+    const topPanel = _topPanel || stickyHeader ? (jsxs(VirtualizedPanel, { stickyTop: stickyHeader, style: topColor, children: [_topPanel && (jsx("div", { className: classnames(styles.topPanel, {
+                    [styles.withDivider]: topWithDivider,
+                }), "data-qa": "table-top-panel", style: { paddingLeft, paddingRight }, children: _topPanel })), stickyHeader && (jsx("div", { ref: headerRefCallback, onScroll: handleHeaderScroll, "data-qa": "table-sticky-header-root", className: classnames(styles.headerContainer) }))] })) : null;
+    const bottomPanel = (jsxs(Fragment, { children: [(!_bottomPanel || !stickyBottom) && (jsxs(VirtualizedPanel, { stickyBottom: true, children: [jsx("div", { className: styles.scrollContainer, onScroll: handleScrollContainerScroll, ref: scrollContainerRefCallback, children: jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback }) }), hasHorizontalScroll && (jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps }))] })), _bottomPanel && (jsxs(VirtualizedPanel, { stickyBottom: stickyBottom, style: bottomColor, children: [stickyBottom && (jsxs(Fragment, { children: [jsx("div", { className: styles.scrollContainer, onScroll: handleScrollContainerScroll, ref: scrollContainerRefCallback, children: jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback }) }), hasHorizontalScroll && (jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps }))] })), jsx("div", { className: classnames(styles.bottomPanel, {
+                            [styles.withDivider]: bottomWithDivider,
+                        }), "data-qa": "table-bottom-panel", style: { paddingLeft, paddingRight }, children: _bottomPanel })] }))] }));
+    return (jsx("div", { className: classnames(styles.wrapper, {
             [styles[`style-${style}`]]: style,
             [styles[`style-highlighted-${highlightedColor}`]]: highlightedColor,
             [styles[`tinted-style-${tintedStyle}`]]: tinted && tintedStyle,
             [styles[`tinted-style-highlighted-${tintedHighlightedColor}`]]: tinted && tintedHighlightedColor,
-            [styles[`top-style-${topColor}`]]: topColor,
-            [styles[`bottom-style-${bottomColor}`]]: bottomColor,
         }), "data-qa": dataQa, style: {
             '--magritte-table-padding-left': `${paddingLeft ?? 0}px`,
             '--magritte-table-padding-right': `${paddingRight ?? 0}px`,
+            '--magritte-table-row-gap': `${density}px 0`,
+            '--magritte-table-row-panel-gap': `0 0 ${density}px`,
             ...(cellsGap ? { '--magritte-table-cell-padding': `${cellsGap / 2}px` } : {}),
-        }, children: [jsxs("div", { className: classnames({ [styles.scrollWrapper]: fixedSize }), "data-magritte-table-wrapper": true, ref: wrapperRefCallback, children: [(topPanel || stickyHeader) && (jsxs("div", { className: classnames(styles.topContainer, {
-                            [styles.sticky]: stickyHeader,
-                        }), children: [topPanel && (jsx("div", { className: classnames(styles.topPanel, {
-                                    [styles.withDivider]: topWithDivider,
-                                }), "data-qa": "table-top-panel", style: { paddingLeft, paddingRight }, children: topPanel })), stickyHeader && (jsx("div", { ref: headerRefCallback, onScroll: handleHeaderScroll, "data-qa": "table-sticky-header-root", className: classnames(styles.headerContainer) }))] })), jsx(TableContext.Provider, { value: value, children: jsx("div", { className: classnames(styles.container), ref: contentRefCallback, onScroll: handleScrollContent, "data-qa": 'table-container', children: jsx("table", { className: classnames(styles.table, {
-                                    [styles.divider]: !!divider,
-                                }), "data-qa": "table", ref: tableRef, children: children }) }) }), (!bottomPanel || !stickyBottom) && (jsxs("div", { className: classnames(styles.bottomContainer, styles.sticky), children: [jsx("div", { className: styles.scrollContainer, onScroll: handleScrollContainerScroll, ref: scrollContainerRefCallback, children: jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback }) }), hasHorizontalScroll && (jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps }))] })), bottomPanel && (jsxs("div", { className: classnames(styles.bottomContainer, {
-                            [styles.sticky]: stickyBottom,
-                        }), children: [stickyBottom && (jsxs(Fragment, { children: [jsx("div", { className: styles.scrollContainer, onScroll: handleScrollContainerScroll, ref: scrollContainerRefCallback, children: jsx("div", { className: styles.scrollContent, ref: scrollContentRefCallback }) }), hasHorizontalScroll && (jsx(Scrollbar, { className: styles.horizontalScrollbar, ...horizontalScrollbarProps }))] })), bottomPanel && (jsx("div", { className: classnames(styles.bottomPanel, {
-                                    [styles.withDivider]: bottomWithDivider,
-                                }), "data-qa": "table-bottom-panel", style: { paddingLeft, paddingRight }, children: bottomPanel }))] }))] }), hasVerticalScroll && jsx(Scrollbar, { className: styles.verticalScrollbar, ...verticalScrollbarProps })] }));
+        }, children: jsx(VirtualizedListWrapper, { fixedSize: fixedSize, virtualized: virtualized, topPanel: topPanel, bottomPanel: bottomPanel, ref: wrapperRef, measureElement: measureElement, children: jsx(TableContext.Provider, { value: value, children: jsx("div", { ref: contentRef, className: classnames(styles.container), onScroll: handleScrollContent, "data-qa": 'table-container', children: jsx("table", { className: classnames(styles.table, {
+                            [styles.divider]: !!divider,
+                        }), "data-qa": "table", ref: tableRef, children: children }) }) }) }) }));
 };
 
 export { Table };

package/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["src/Table.tsx"],"sourcesContent":["import { FC, RefCallback, useCallback, useLayoutEffect, useMemo, useRef, useState, CSSProperties } from 'react';\nimport classnames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\nimport { TableProps } from '@hh.ru/magritte-ui-table/types';\nimport { useTableResize } from '@hh.ru/magritte-ui-table/useTableResize';\n\nimport cellStyles from './cell.less';\nimport styles from './table.less';\n\nconst DENSITY_TO_CSS = {\n    'extra-small': styles.densityExtraSmall,\n    small: styles.densitySmall,\n    medium: styles.densityMedium,\n    large: styles.densityLarge,\n};\n\nexport const Table: FC<TableProps> = ({\n    density = 'small',\n    topPanel,\n    bottomPanel,\n    fixedSize,\n    stickyBottom,\n    stickyHeader,\n    divider,\n    dividerTop,\n    dividerBottom,\n    tinted,\n    style = 'primary',\n    styleHighlighted,\n    tintedStyle = 'secondary',\n    tintedStyleHighlighted,\n    topStyle,\n    bottomStyle,\n    padding,\n    paddingLeft: _paddingLeft,\n    paddingRight: _paddingRight,\n    cellsGap,\n    onScrollHorizontal,\n    virtualized = true,\n    'data-qa': dataQa = 'table-wrapper',\n    children,\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLDivElement | null>(null);\n    const scrollbarContainerRef = useRef<HTMLDivElement | null>(null);\n    const scrollbarRef = useRef<HTMLDivElement | null>(null);\n    const [headerNode, setHeaderNode] = useState<HTMLDivElement | null>(null);\n    const topWithDivider = dividerTop ?? !!divider;\n    const bottomWithDivider = dividerBottom ?? !!divider;\n    const paddingLeft = _paddingLeft ?? padding;\n    const paddingRight = _paddingRight ?? padding;\n    const highlightedColor = styleHighlighted || style;\n    const tintedHighlightedColor = tintedStyleHighlighted || tintedStyle;\n    const topColor = topStyle || style;\n    const bottomColor = bottomStyle || style;\n    const [fontLoaded, setFontLoaded] = useState(false);\n    const { isMobile } = useBreakpoint();\n    useWhenFontLoaded(() => setFontLoaded(true));\n    const { subscribeResizeHandler, unsubscribeResizeHandler } = useTableResize({\n        tableRef,\n        wrapperRef,\n        fontLoaded,\n    });\n\n    const value = useMemo(\n        () => ({\n            headerNode,\n            stickyHeader,\n            paddingLeft,\n            paddingRight,\n            fixedSize,\n            fontLoaded,\n            virtualized,\n            divider: !!divider,\n            subscribeResizeHandler,\n            unsubscribeResizeHandler,\n        }),\n        [\n            headerNode,\n            stickyHeader,\n            paddingLeft,\n            paddingRight,\n            fixedSize,\n            fontLoaded,\n            divider,\n            virtualized,\n            subscribeResizeHandler,\n            unsubscribeResizeHandler,\n        ]\n    );\n\n    const setScrollStyles = useCallback(() => {\n        if (wrapperRef.current && contentRef.current) {\n            wrapperRef.current.classList.toggle(cellStyles.hasScrollLeft, contentRef.current.scrollLeft > 0);\n            wrapperRef.current.classList.toggle(\n                cellStyles.hasScrollRight,\n                Math.round(contentRef.current.scrollLeft) + contentRef.current.offsetWidth + (paddingRight ?? 0) <\n                    contentRef.current.scrollWidth\n            );\n        }\n    }, [paddingRight]);\n\n    const setFakeScrollbar = useCallback(() => {\n        if (scrollbarRef.current && tableRef.current && contentRef.current && scrollbarContainerRef.current) {\n            if (contentRef.current.scrollWidth > contentRef.current.offsetWidth) {\n                scrollbarRef.current.style.setProperty('width', `${tableRef.current.getBoundingClientRect().width}px`);\n                scrollbarContainerRef.current.style.setProperty('display', 'block');\n            } else {\n                scrollbarRef.current.style.setProperty('width', 'auto');\n                scrollbarContainerRef.current.style.setProperty('display', 'none');\n            }\n        }\n    }, []);\n\n    const calcDividersAndScrollbar = useCallback(() => {\n        setScrollStyles();\n        setFakeScrollbar();\n    }, [setScrollStyles, setFakeScrollbar]);\n\n    const handleScrollContent = useCallback(() => {\n        if (headerRef.current) {\n            headerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n        }\n        if (scrollbarContainerRef.current) {\n            scrollbarContainerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n        }\n        setScrollStyles();\n        onScrollHorizontal?.();\n    }, [setScrollStyles, onScrollHorizontal]);\n\n    const handleHeaderScroll = useCallback(() => {\n        if (contentRef.current) {\n            contentRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n        }\n        if (scrollbarContainerRef.current) {\n            scrollbarContainerRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n        }\n    }, []);\n\n    const handleScrollContainerScroll = useCallback(() => {\n        if (contentRef.current) {\n            contentRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n        }\n\n        if (headerRef.current) {\n            headerRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n        }\n    }, []);\n\n    const headerRefCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n        if (node) {\n            setHeaderNode(node);\n            headerRef.current = node;\n        } else {\n            headerRef.current = null;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        if (!isMobile) {\n            calcDividersAndScrollbar();\n            subscribeResizeHandler?.(calcDividersAndScrollbar);\n\n            return () => unsubscribeResizeHandler?.(calcDividersAndScrollbar);\n        }\n        return void 0;\n    }, [calcDividersAndScrollbar, isMobile, subscribeResizeHandler, unsubscribeResizeHandler]);\n\n    const { hasVerticalScroll, verticalScrollbarProps, ...vScrollbar } = useScrollbar({\n        axis: fixedSize ? 'vertical' : 'none',\n    });\n    const wrapperRefCallback = useMultipleRefs(wrapperRef, vScrollbar.scrollContainerRef);\n    const contentRefCallback = useMultipleRefs(contentRef, vScrollbar.contentWrapperRef);\n\n    const { hasHorizontalScroll, horizontalScrollbarProps, ...hScrollbar } = useScrollbar({\n        axis: 'horizontal',\n        offsetRight: fixedSize ? 8 : undefined,\n    });\n    const scrollContainerRefCallback = useMultipleRefs(scrollbarContainerRef, hScrollbar.scrollContainerRef);\n    const scrollContentRefCallback = useMultipleRefs(scrollbarRef, hScrollbar.contentWrapperRef);\n\n    if (isMobile) {\n        return null;\n    }\n\n    return (\n        <div\n            className={classnames(styles.wrapper, DENSITY_TO_CSS[density], vScrollbar.hoverContainerCssClass, {\n                [styles[`style-${style}`]]: style,\n                [styles[`style-highlighted-${highlightedColor}`]]: highlightedColor,\n                [styles[`tinted-style-${tintedStyle}`]]: tinted && tintedStyle,\n                [styles[`tinted-style-highlighted-${tintedHighlightedColor}`]]: tinted && tintedHighlightedColor,\n                [styles[`top-style-${topColor}`]]: topColor,\n                [styles[`bottom-style-${bottomColor}`]]: bottomColor,\n            })}\n            data-qa={dataQa}\n            style={\n                {\n                    '--magritte-table-padding-left': `${paddingLeft ?? 0}px`,\n                    '--magritte-table-padding-right': `${paddingRight ?? 0}px`,\n                    ...(cellsGap ? { '--magritte-table-cell-padding': `${cellsGap / 2}px` } : {}),\n                } as CSSProperties\n            }\n        >\n            <div\n                className={classnames({ [styles.scrollWrapper]: fixedSize })}\n                data-magritte-table-wrapper\n                ref={wrapperRefCallback}\n            >\n                {(topPanel || stickyHeader) && (\n                    <div\n                        className={classnames(styles.topContainer, {\n                            [styles.sticky]: stickyHeader,\n                        })}\n                    >\n                        {topPanel && (\n                            <div\n                                className={classnames(styles.topPanel, {\n                                    [styles.withDivider]: topWithDivider,\n                                })}\n                                data-qa=\"table-top-panel\"\n                                style={{ paddingLeft, paddingRight }}\n                            >\n                                {topPanel}\n                            </div>\n                        )}\n                        {stickyHeader && (\n                            <div\n                                ref={headerRefCallback}\n                                onScroll={handleHeaderScroll}\n                                data-qa=\"table-sticky-header-root\"\n                                className={classnames(styles.headerContainer)}\n                            />\n                        )}\n                    </div>\n                )}\n                <TableContext.Provider value={value}>\n                    <div\n                        className={classnames(styles.container)}\n                        ref={contentRefCallback}\n                        onScroll={handleScrollContent}\n                        data-qa={'table-container'}\n                    >\n                        <table\n                            className={classnames(styles.table, {\n                                [styles.divider]: !!divider,\n                            })}\n                            data-qa=\"table\"\n                            ref={tableRef}\n                        >\n                            {children}\n                        </table>\n                    </div>\n                </TableContext.Provider>\n                {(!bottomPanel || !stickyBottom) && (\n                    <div className={classnames(styles.bottomContainer, styles.sticky)}>\n                        <div\n                            className={styles.scrollContainer}\n                            onScroll={handleScrollContainerScroll}\n                            ref={scrollContainerRefCallback}\n                        >\n                            <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n                        </div>\n                        {hasHorizontalScroll && (\n                            <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n                        )}\n                    </div>\n                )}\n                {bottomPanel && (\n                    <div\n                        className={classnames(styles.bottomContainer, {\n                            [styles.sticky]: stickyBottom,\n                        })}\n                    >\n                        {stickyBottom && (\n                            <>\n                                <div\n                                    className={styles.scrollContainer}\n                                    onScroll={handleScrollContainerScroll}\n                                    ref={scrollContainerRefCallback}\n                                >\n                                    <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n                                </div>\n                                {hasHorizontalScroll && (\n                                    <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n                                )}\n                            </>\n                        )}\n                        {bottomPanel && (\n                            <div\n                                className={classnames(styles.bottomPanel, {\n                                    [styles.withDivider]: bottomWithDivider,\n                                })}\n                                data-qa=\"table-bottom-panel\"\n                                style={{ paddingLeft, paddingRight }}\n                            >\n                                {bottomPanel}\n                            </div>\n                        )}\n                    </div>\n                )}\n            </div>\n            {hasVerticalScroll && <Scrollbar className={styles.verticalScrollbar} {...verticalScrollbarProps} />}\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["src/Table.tsx"],"sourcesContent":["import { FC, RefCallback, useCallback, useLayoutEffect, useMemo, useRef, useState, CSSProperties } from 'react';\nimport classnames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { VirtualizedListWrapper } from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedListWrapper';\nimport { VirtualizedPanel } from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedPanel';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\nimport { TableProps } from '@hh.ru/magritte-ui-table/types';\nimport { useTableResize } from '@hh.ru/magritte-ui-table/useTableResize';\n\nimport cellStyles from './cell.less';\nimport styles from './table.less';\n\nconst measureElement = (element: Element) => {\n    let rowHeight = element?.getBoundingClientRect().height;\n    const siblingElement = element.nextElementSibling;\n    if (siblingElement && siblingElement.hasAttribute('data-magritte-table-row-panel')) {\n        rowHeight += siblingElement.getBoundingClientRect().height;\n    }\n    return rowHeight;\n};\n\nexport const Table: FC<TableProps> = ({\n    density = 16,\n    topPanel: _topPanel,\n    bottomPanel: _bottomPanel,\n    fixedSize,\n    stickyBottom,\n    stickyHeader,\n    divider,\n    dividerTop,\n    dividerBottom,\n    tinted,\n    style = 'primary',\n    styleHighlighted,\n    tintedStyle = 'secondary',\n    tintedStyleHighlighted,\n    topStyle,\n    bottomStyle,\n    padding,\n    paddingLeft: _paddingLeft,\n    paddingRight: _paddingRight,\n    cellsGap,\n    onScrollHorizontal,\n    virtualized = true,\n    'data-qa': dataQa = 'table-wrapper',\n    children,\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const tableRef = useRef<HTMLTableElement>(null);\n    const headerRef = useRef<HTMLDivElement | null>(null);\n    const scrollbarContainerRef = useRef<HTMLDivElement | null>(null);\n    const scrollbarRef = useRef<HTMLDivElement | null>(null);\n    const [headerNode, setHeaderNode] = useState<HTMLDivElement | null>(null);\n    const topWithDivider = dividerTop ?? !!divider;\n    const bottomWithDivider = dividerBottom ?? !!divider;\n    const paddingLeft = _paddingLeft ?? padding;\n    const paddingRight = _paddingRight ?? padding;\n    const highlightedColor = styleHighlighted || style;\n    const tintedHighlightedColor = tintedStyleHighlighted || tintedStyle;\n    const topColor = topStyle || style;\n    const bottomColor = bottomStyle || style;\n    const [fontLoaded, setFontLoaded] = useState(false);\n    const { isMobile } = useBreakpoint();\n    useWhenFontLoaded(() => setFontLoaded(true));\n    const { subscribeResizeHandler, unsubscribeResizeHandler } = useTableResize({\n        tableRef,\n        wrapperRef,\n        fontLoaded,\n    });\n\n    const value = useMemo(\n        () => ({\n            headerNode,\n            stickyHeader,\n            paddingLeft,\n            paddingRight,\n            fixedSize,\n            fontLoaded,\n            virtualized,\n            divider: !!divider,\n            subscribeResizeHandler,\n            unsubscribeResizeHandler,\n        }),\n        [\n            headerNode,\n            stickyHeader,\n            paddingLeft,\n            paddingRight,\n            fixedSize,\n            fontLoaded,\n            divider,\n            virtualized,\n            subscribeResizeHandler,\n            unsubscribeResizeHandler,\n        ]\n    );\n\n    const setScrollStyles = useCallback(() => {\n        if (wrapperRef.current && contentRef.current) {\n            wrapperRef.current.classList.toggle(cellStyles.hasScrollLeft, contentRef.current.scrollLeft > 0);\n            wrapperRef.current.classList.toggle(\n                cellStyles.hasScrollRight,\n                Math.round(contentRef.current.scrollLeft) + contentRef.current.offsetWidth + (paddingRight ?? 0) <\n                    contentRef.current.scrollWidth\n            );\n        }\n    }, [paddingRight]);\n\n    const setFakeScrollbar = useCallback(() => {\n        if (scrollbarRef.current && tableRef.current && contentRef.current && scrollbarContainerRef.current) {\n            if (contentRef.current.scrollWidth > contentRef.current.offsetWidth) {\n                scrollbarRef.current.style.setProperty('width', `${tableRef.current.getBoundingClientRect().width}px`);\n                scrollbarContainerRef.current.style.setProperty('display', 'block');\n            } else {\n                scrollbarRef.current.style.setProperty('width', 'auto');\n                scrollbarContainerRef.current.style.setProperty('display', 'none');\n            }\n        }\n    }, []);\n\n    const calcDividersAndScrollbar = useCallback(() => {\n        setScrollStyles();\n        setFakeScrollbar();\n    }, [setScrollStyles, setFakeScrollbar]);\n\n    const handleScrollContent = useCallback(() => {\n        if (headerRef.current) {\n            headerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n        }\n        if (scrollbarContainerRef.current) {\n            scrollbarContainerRef.current.scrollLeft = contentRef.current?.scrollLeft || 0;\n        }\n        setScrollStyles();\n        onScrollHorizontal?.();\n    }, [setScrollStyles, onScrollHorizontal]);\n\n    const handleHeaderScroll = useCallback(() => {\n        if (contentRef.current) {\n            contentRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n        }\n        if (scrollbarContainerRef.current) {\n            scrollbarContainerRef.current.scrollLeft = headerRef.current?.scrollLeft || 0;\n        }\n    }, []);\n\n    const handleScrollContainerScroll = useCallback(() => {\n        if (contentRef.current) {\n            contentRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n        }\n\n        if (headerRef.current) {\n            headerRef.current.scrollLeft = scrollbarContainerRef.current?.scrollLeft || 0;\n        }\n    }, []);\n\n    const headerRefCallback: RefCallback<HTMLDivElement> = useCallback((node) => {\n        if (node) {\n            setHeaderNode(node);\n            headerRef.current = node;\n        } else {\n            headerRef.current = null;\n        }\n    }, []);\n\n    useLayoutEffect(() => {\n        if (!isMobile) {\n            calcDividersAndScrollbar();\n            subscribeResizeHandler?.(calcDividersAndScrollbar);\n\n            return () => unsubscribeResizeHandler?.(calcDividersAndScrollbar);\n        }\n        return void 0;\n    }, [calcDividersAndScrollbar, isMobile, subscribeResizeHandler, unsubscribeResizeHandler]);\n\n    const { hasHorizontalScroll, horizontalScrollbarProps, ...hScrollbar } = useScrollbar({\n        axis: 'horizontal',\n        offsetRight: fixedSize ? 8 : undefined,\n    });\n    const scrollContainerRefCallback = useMultipleRefs(scrollbarContainerRef, hScrollbar.scrollContainerRef);\n    const scrollContentRefCallback = useMultipleRefs(scrollbarRef, hScrollbar.contentWrapperRef);\n\n    if (isMobile) {\n        return null;\n    }\n\n    const topPanel =\n        _topPanel || stickyHeader ? (\n            <VirtualizedPanel stickyTop={stickyHeader} style={topColor}>\n                {_topPanel && (\n                    <div\n                        className={classnames(styles.topPanel, {\n                            [styles.withDivider]: topWithDivider,\n                        })}\n                        data-qa=\"table-top-panel\"\n                        style={{ paddingLeft, paddingRight }}\n                    >\n                        {_topPanel}\n                    </div>\n                )}\n                {stickyHeader && (\n                    <div\n                        ref={headerRefCallback}\n                        onScroll={handleHeaderScroll}\n                        data-qa=\"table-sticky-header-root\"\n                        className={classnames(styles.headerContainer)}\n                    />\n                )}\n            </VirtualizedPanel>\n        ) : null;\n\n    const bottomPanel = (\n        <>\n            {(!_bottomPanel || !stickyBottom) && (\n                <VirtualizedPanel stickyBottom>\n                    <div\n                        className={styles.scrollContainer}\n                        onScroll={handleScrollContainerScroll}\n                        ref={scrollContainerRefCallback}\n                    >\n                        <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n                    </div>\n                    {hasHorizontalScroll && (\n                        <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n                    )}\n                </VirtualizedPanel>\n            )}\n            {_bottomPanel && (\n                <VirtualizedPanel stickyBottom={stickyBottom} style={bottomColor}>\n                    {stickyBottom && (\n                        <>\n                            <div\n                                className={styles.scrollContainer}\n                                onScroll={handleScrollContainerScroll}\n                                ref={scrollContainerRefCallback}\n                            >\n                                <div className={styles.scrollContent} ref={scrollContentRefCallback}></div>\n                            </div>\n                            {hasHorizontalScroll && (\n                                <Scrollbar className={styles.horizontalScrollbar} {...horizontalScrollbarProps} />\n                            )}\n                        </>\n                    )}\n                    <div\n                        className={classnames(styles.bottomPanel, {\n                            [styles.withDivider]: bottomWithDivider,\n                        })}\n                        data-qa=\"table-bottom-panel\"\n                        style={{ paddingLeft, paddingRight }}\n                    >\n                        {_bottomPanel}\n                    </div>\n                </VirtualizedPanel>\n            )}\n        </>\n    );\n    return (\n        <div\n            className={classnames(styles.wrapper, {\n                [styles[`style-${style}`]]: style,\n                [styles[`style-highlighted-${highlightedColor}`]]: highlightedColor,\n                [styles[`tinted-style-${tintedStyle}`]]: tinted && tintedStyle,\n                [styles[`tinted-style-highlighted-${tintedHighlightedColor}`]]: tinted && tintedHighlightedColor,\n            })}\n            data-qa={dataQa}\n            style={\n                {\n                    '--magritte-table-padding-left': `${paddingLeft ?? 0}px`,\n                    '--magritte-table-padding-right': `${paddingRight ?? 0}px`,\n                    '--magritte-table-row-gap': `${density}px 0`,\n                    '--magritte-table-row-panel-gap': `0 0 ${density}px`,\n                    ...(cellsGap ? { '--magritte-table-cell-padding': `${cellsGap / 2}px` } : {}),\n                } as CSSProperties\n            }\n        >\n            <VirtualizedListWrapper\n                fixedSize={fixedSize}\n                virtualized={virtualized}\n                topPanel={topPanel}\n                bottomPanel={bottomPanel}\n                ref={wrapperRef}\n                measureElement={measureElement}\n            >\n                <TableContext.Provider value={value}>\n                    <div\n                        ref={contentRef}\n                        className={classnames(styles.container)}\n                        onScroll={handleScrollContent}\n                        data-qa={'table-container'}\n                    >\n                        <table\n                            className={classnames(styles.table, {\n                                [styles.divider]: !!divider,\n                            })}\n                            data-qa=\"table\"\n                            ref={tableRef}\n                        >\n                            {children}\n                        </table>\n                    </div>\n                </TableContext.Provider>\n            </VirtualizedListWrapper>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/TableBody.js

@@ -1,16 +1,16 @@
 import './index.css';
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useContext } from 'react';
-import { VirtualizedTableBody } from './VirtualizedTableBody.js';
-import { TableContext } from './context.js';
-import { s as styles } from './table-DCGiTlL0.js';
-import './useTableVirtualizer.js';
+import { VirtualizedList } from './VirtualizedList/VirtualizedList.js';
+import { s as styles } from './table-h9Fxk8He.js';
+import 'react';
+import 'classnames';
+import './VirtualizedList/context.js';
+import './VirtualizedList/useVirtualizedList.js';
 import '@tanstack/react-virtual';
+import './virtualized-list-B8kzPHyT.js';
 
 const TableBody = ({ 'data-qa': dataQa = 'table-body', children, }) => {
-    const ref = useRef(null);
-    const { virtualized } = useContext(TableContext);
-    return (jsx("tbody", { ref: ref, className: styles.body, "data-qa": dataQa, children: virtualized ? jsx(VirtualizedTableBody, { tableRef: ref, children: children }) : children }));
+    return (jsx(VirtualizedList, { className: styles.body, "data-qa": dataQa, Element: 'tbody', ElementItem: 'tr', children: children }));
 };
 
 export { TableBody };

package/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["src/TableBody.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useRef, useContext } from 'react';\n\nimport { VirtualizedTableBody } from '@hh.ru/magritte-ui-table/VirtualizedTableBody';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\n\nimport styles from './table.less';\n\nexport const TableBody: FC<PropsWithChildren<{ 'data-qa'?: string }>> = ({\n    'data-qa': dataQa = 'table-body',\n    children,\n}) => {\n    const ref = useRef(null);\n    const { virtualized } = useContext(TableContext);\n\n    return (\n        <tbody ref={ref} className={styles.body} data-qa={dataQa}>\n            {virtualized ? <VirtualizedTableBody tableRef={ref}>{children}</VirtualizedTableBody> : children}\n        </tbody>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AAOO,MAAM,SAAS,GAAkD,CAAC,EACrE,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,QAAQ,GACX,KAAI;AACD,IAAA,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACzB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;AAEjD,IAAA,QACIA,GAAA,CAAA,OAAA,EAAA,EAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAW,SAAA,EAAA,MAAM,YACnD,WAAW,GAAGA,GAAC,CAAA,oBAAoB,EAAC,EAAA,QAAQ,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAwB,GAAG,QAAQ,EAAA,CAC5F,EACV;AACN;;;;"}
+{"version":3,"file":"TableBody.js","sources":["src/TableBody.tsx"],"sourcesContent":["import { FC, PropsWithChildren } from 'react';\n\nimport { VirtualizedList } from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedList';\n\nimport styles from './table.less';\n\nexport const TableBody: FC<PropsWithChildren<{ 'data-qa'?: string }>> = ({\n    'data-qa': dataQa = 'table-body',\n    children,\n}) => {\n    return (\n        <VirtualizedList className={styles.body} data-qa={dataQa} Element={'tbody'} ElementItem={'tr'}>\n            {children}\n        </VirtualizedList>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AAMO,MAAM,SAAS,GAAkD,CAAC,EACrE,SAAS,EAAE,MAAM,GAAG,YAAY,EAChC,QAAQ,GACX,KAAI;IACD,QACIA,IAAC,eAAe,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAW,SAAA,EAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EACxF,QAAA,EAAA,QAAQ,EACK,CAAA,EACpB;AACN;;;;"}

package/TableCell.js

@@ -5,8 +5,8 @@ import classnames from 'classnames';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useLayoutContext } from '@hh.ru/magritte-ui-grid/layoutContext';
 import { TableContext } from './context.js';
-import { c as cellStyles } from './cell-CmFhtUuZ.js';
-import { s as styles } from './table-DCGiTlL0.js';
+import { c as cellStyles } from './cell-DJucuY6T.js';
+import { s as styles } from './table-h9Fxk8He.js';
 
 const TableCellComponent = ({ Element = 'td', m, l, xl, xxl, width, children, stickyLeft, stickyRight, align, verticalAlign, 'data-qa': dataQa = 'table-cell', ...rest }, ref) => {
     const cellRef = useRef(null);

package/TableHeader.js

@@ -4,23 +4,19 @@ import { useRef, useContext } from 'react';
 import classnames from 'classnames';
 import { StickyTableHeader } from './StickyTableHeader.js';
 import { TableContext } from './context.js';
-import { s as styles } from './table-DCGiTlL0.js';
+import { s as styles } from './table-h9Fxk8He.js';
 import 'react-dom';
-import './cell-CmFhtUuZ.js';
+import './cell-DJucuY6T.js';
 
-const DENSITY_TO_CSS = {
-    'extra-small': styles.densityExtraSmall,
-    small: styles.densitySmall,
-    medium: styles.densityMedium,
-    large: styles.densityLarge,
-};
-const TableHeader = ({ divider, density = 'small', 'data-qa': dataQa = 'table-header', children, }) => {
+const TableHeader = ({ divider, density = 16, 'data-qa': dataQa = 'table-header', children, }) => {
     const theadRef = useRef(null);
     const tableContext = useContext(TableContext);
     const withDivider = divider ?? tableContext.divider;
-    return (jsxs(Fragment, { children: [jsx("thead", { ref: theadRef, className: classnames(styles.header, DENSITY_TO_CSS[density], {
+    return (jsxs(Fragment, { children: [jsx("thead", { ref: theadRef, className: classnames(styles.header, {
                     [styles.withDivider]: !!withDivider,
-                }), "data-qa": dataQa, children: children }), tableContext.stickyHeader && tableContext.headerNode && (jsx(StickyTableHeader, { root: tableContext.headerNode, headerRef: theadRef, divider: withDivider, density: density, children: children }))] }));
+                }), "data-qa": dataQa, style: {
+                    '--magritte-table-row-gap': `${density}px 0`,
+                }, children: children }), tableContext.stickyHeader && tableContext.headerNode && (jsx(StickyTableHeader, { root: tableContext.headerNode, headerRef: theadRef, divider: withDivider, density: density, children: children }))] }));
 };
 
 export { TableHeader };

package/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["src/TableHeader.tsx"],"sourcesContent":["import { FC, useContext, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { StickyTableHeader } from '@hh.ru/magritte-ui-table/StickyTableHeader';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\nimport { TableHeaderProps } from '@hh.ru/magritte-ui-table/types';\n\nimport styles from './table.less';\n\nconst DENSITY_TO_CSS = {\n    'extra-small': styles.densityExtraSmall,\n    small: styles.densitySmall,\n    medium: styles.densityMedium,\n    large: styles.densityLarge,\n};\n\nexport const TableHeader: FC<TableHeaderProps> = ({\n    divider,\n    density = 'small',\n    'data-qa': dataQa = 'table-header',\n    children,\n}) => {\n    const theadRef = useRef<HTMLTableSectionElement>(null);\n    const tableContext = useContext(TableContext);\n    const withDivider = divider ?? tableContext.divider;\n\n    return (\n        <>\n            <thead\n                ref={theadRef}\n                className={classnames(styles.header, DENSITY_TO_CSS[density], {\n                    [styles.withDivider]: !!withDivider,\n                })}\n                data-qa={dataQa}\n            >\n                {children}\n            </thead>\n            {tableContext.stickyHeader && tableContext.headerNode && (\n                <StickyTableHeader\n                    root={tableContext.headerNode}\n                    headerRef={theadRef}\n                    divider={withDivider}\n                    density={density}\n                >\n                    {children}\n                </StickyTableHeader>\n            )}\n        </>\n    );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;AASA,MAAM,cAAc,GAAG;IACnB,aAAa,EAAE,MAAM,CAAC,iBAAiB;IACvC,KAAK,EAAE,MAAM,CAAC,YAAY;IAC1B,MAAM,EAAE,MAAM,CAAC,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC,YAAY;CAC7B,CAAC;MAEW,WAAW,GAAyB,CAAC,EAC9C,OAAO,EACP,OAAO,GAAG,OAAO,EACjB,SAAS,EAAE,MAAM,GAAG,cAAc,EAClC,QAAQ,GACX,KAAI;AACD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;AACvD,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;AAC9C,IAAA,MAAM,WAAW,GAAG,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC;AAEpD,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE;AAC1D,oBAAA,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,WAAW;AACtC,iBAAA,CAAC,aACO,MAAM,EAAA,QAAA,EAEd,QAAQ,EACL,CAAA,EACP,YAAY,CAAC,YAAY,IAAI,YAAY,CAAC,UAAU,KACjDA,GAAC,CAAA,iBAAiB,IACd,IAAI,EAAE,YAAY,CAAC,UAAU,EAC7B,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAEf,QAAA,EAAA,QAAQ,GACO,CACvB,CAAA,EAAA,CACF,EACL;AACN;;;;"}
+{"version":3,"file":"TableHeader.js","sources":["src/TableHeader.tsx"],"sourcesContent":["import { CSSProperties, FC, useContext, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { StickyTableHeader } from '@hh.ru/magritte-ui-table/StickyTableHeader';\nimport { TableContext } from '@hh.ru/magritte-ui-table/context';\nimport { TableHeaderProps } from '@hh.ru/magritte-ui-table/types';\n\nimport styles from './table.less';\n\nexport const TableHeader: FC<TableHeaderProps> = ({\n    divider,\n    density = 16,\n    'data-qa': dataQa = 'table-header',\n    children,\n}) => {\n    const theadRef = useRef<HTMLTableSectionElement>(null);\n    const tableContext = useContext(TableContext);\n    const withDivider = divider ?? tableContext.divider;\n\n    return (\n        <>\n            <thead\n                ref={theadRef}\n                className={classnames(styles.header, {\n                    [styles.withDivider]: !!withDivider,\n                })}\n                data-qa={dataQa}\n                style={\n                    {\n                        '--magritte-table-row-gap': `${density}px 0`,\n                    } as CSSProperties\n                }\n            >\n                {children}\n            </thead>\n            {tableContext.stickyHeader && tableContext.headerNode && (\n                <StickyTableHeader\n                    root={tableContext.headerNode}\n                    headerRef={theadRef}\n                    divider={withDivider}\n                    density={density}\n                >\n                    {children}\n                </StickyTableHeader>\n            )}\n        </>\n    );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;MASa,WAAW,GAAyB,CAAC,EAC9C,OAAO,EACP,OAAO,GAAG,EAAE,EACZ,SAAS,EAAE,MAAM,GAAG,cAAc,EAClC,QAAQ,GACX,KAAI;AACD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;AACvD,IAAA,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;AAC9C,IAAA,MAAM,WAAW,GAAG,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC;AAEpD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GACI,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;AACjC,oBAAA,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,WAAW;AACtC,iBAAA,CAAC,EACO,SAAA,EAAA,MAAM,EACf,KAAK,EACD;oBACI,0BAA0B,EAAE,CAAG,EAAA,OAAO,CAAM,IAAA,CAAA;AAC9B,iBAAA,EAAA,QAAA,EAGrB,QAAQ,EACL,CAAA,EACP,YAAY,CAAC,YAAY,IAAI,YAAY,CAAC,UAAU,KACjDA,GAAA,CAAC,iBAAiB,EACd,EAAA,IAAI,EAAE,YAAY,CAAC,UAAU,EAC7B,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAEf,QAAA,EAAA,QAAQ,GACO,CACvB,CAAA,EAAA,CACF,EACL;AACN;;;;"}

package/TableRow.js

@@ -4,8 +4,8 @@ import { forwardRef, useContext, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { TableContext } from './context.js';
-import { c as cellStyles } from './cell-CmFhtUuZ.js';
-import { s as styles } from './table-DCGiTlL0.js';
+import { c as cellStyles } from './cell-DJucuY6T.js';
+import { s as styles } from './table-h9Fxk8He.js';
 
 const TableRowComponent = ({ style, styleHighlighted, action, showAction, animated, onClick, panel, showPanel, children, measure, align, verticalAlign = 'top', 'data-qa': dataQa = 'table-row', ...rest }, ref) => {
     const { paddingLeft, paddingRight } = useContext(TableContext);

package/VirtualizedList/VirtualizedList.d.ts

@@ -0,0 +1,12 @@
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+import { VirtualItem } from '@tanstack/virtual-core';
+interface VirtualizedListProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    ElementItem?: keyof JSX.IntrinsicElements & keyof HTMLElementTagNameMap;
+    Element?: keyof JSX.IntrinsicElements & keyof HTMLElementTagNameMap;
+}
+export declare const VirtualizedList: FC<VirtualizedListProps>;
+interface VirtualizedItemProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    measure?: VirtualItem<Element>['measureElement'];
+}
+export declare const VirtualizedItem: import("react").ForwardRefExoticComponent<VirtualizedItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/VirtualizedList/VirtualizedList.js

@@ -0,0 +1,49 @@
+import './../index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, Children, isValidElement, useRef, cloneElement } from 'react';
+import classnames from 'classnames';
+import { VirtualizedListContext } from './context.js';
+import { useVirtualizedList } from './useVirtualizedList.js';
+import { s as styles } from '../virtualized-list-B8kzPHyT.js';
+import '@tanstack/react-virtual';
+
+const ActivatedVirtualizedList = ({ ElementItem = 'div', Element = 'div', className, children, ...rest }) => {
+    const childArray = Children.toArray(children).filter((e) => isValidElement(e));
+    const contentRef = useRef(null);
+    const virtualizer = useVirtualizedList({
+        count: childArray.length,
+        contentRef,
+    });
+    const additionalProps = { ...rest };
+    additionalProps.ref = contentRef;
+    const items = virtualizer.getVirtualItems();
+    const [paddingTop, paddingBottom] = items.length > 0
+        ? [
+            Math.max(0, items[0].start - virtualizer.options.scrollMargin),
+            Math.max(0, virtualizer.getTotalSize() - (items[items.length - 1].end - virtualizer.options.scrollMargin)),
+        ]
+        : [0, 0];
+    return (jsxs(Element, { ...additionalProps, className: classnames(styles.virtualizedList, className), children: [paddingTop > 0 && jsx(ElementItem, { style: { height: paddingTop } }), virtualizer.getVirtualItems().map((virtualItem) => {
+                return cloneElement(childArray[virtualItem.index], {
+                    key: virtualItem.key,
+                    'data-index': virtualItem.index,
+                    ref: virtualItem.measureElement,
+                    measure: virtualItem.measureElement,
+                });
+            }), paddingBottom > 0 && jsx(ElementItem, { style: { height: paddingBottom } })] }));
+};
+const VirtualizedList = (props) => {
+    const { Element = 'div', className, children, ...rest } = props;
+    const { virtualized } = useContext(VirtualizedListContext);
+    if (!virtualized) {
+        return (jsx(Element, { ...rest, className: classnames(styles.virtualizedList, className), children: children }));
+    }
+    return jsx(ActivatedVirtualizedList, { ...props });
+};
+const VirtualizedItemComponent = ({ measure, ...rest }, ref) => {
+    return jsx("div", { ...rest, ref: ref });
+};
+const VirtualizedItem = forwardRef(VirtualizedItemComponent);
+
+export { VirtualizedItem, VirtualizedList };
+//# sourceMappingURL=VirtualizedList.js.map

package/VirtualizedList/VirtualizedList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedList.js","sources":["src/VirtualizedList/VirtualizedList.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    FC,\n    type ForwardedRef,\n    forwardRef,\n    HTMLAttributes,\n    isValidElement,\n    PropsWithChildren,\n    ReactElement,\n    useContext,\n    useRef,\n} from 'react';\nimport { VirtualItem } from '@tanstack/virtual-core';\nimport classnames from 'classnames';\n\nimport { VirtualizedListContext } from '@hh.ru/magritte-ui-table/VirtualizedList/context';\nimport { useVirtualizedList } from '@hh.ru/magritte-ui-table/VirtualizedList/useVirtualizedList';\n\nimport styles from './virtualized-list.less';\n\ninterface VirtualizedListProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {\n    ElementItem?: keyof JSX.IntrinsicElements & keyof HTMLElementTagNameMap;\n    Element?: keyof JSX.IntrinsicElements & keyof HTMLElementTagNameMap;\n}\n\nconst ActivatedVirtualizedList: FC<VirtualizedListProps> = ({\n    ElementItem = 'div',\n    Element = 'div',\n    className,\n    children,\n    ...rest\n}) => {\n    const childArray = Children.toArray(children).filter<ReactElement>((e): e is ReactElement => isValidElement(e));\n    const contentRef = useRef<HTMLElement>(null);\n\n    const virtualizer = useVirtualizedList({\n        count: childArray.length,\n        contentRef,\n    });\n\n    const additionalProps: Record<string, unknown> = { ...rest };\n\n    additionalProps.ref = contentRef;\n\n    const items = virtualizer.getVirtualItems();\n    const [paddingTop, paddingBottom] =\n        items.length > 0\n            ? [\n                  Math.max(0, items[0].start - virtualizer.options.scrollMargin),\n                  Math.max(\n                      0,\n                      virtualizer.getTotalSize() - (items[items.length - 1].end - virtualizer.options.scrollMargin)\n                  ),\n              ]\n            : [0, 0];\n\n    return (\n        <Element {...additionalProps} className={classnames(styles.virtualizedList, className)}>\n            {paddingTop > 0 && <ElementItem style={{ height: paddingTop }}></ElementItem>}\n            {virtualizer.getVirtualItems().map((virtualItem) => {\n                return cloneElement(childArray[virtualItem.index], {\n                    key: virtualItem.key,\n                    'data-index': virtualItem.index,\n                    ref: virtualItem.measureElement,\n                    measure: virtualItem.measureElement,\n                });\n            })}\n            {paddingBottom > 0 && <ElementItem style={{ height: paddingBottom }}></ElementItem>}\n        </Element>\n    );\n};\n\nexport const VirtualizedList: FC<VirtualizedListProps> = (props) => {\n    const { Element = 'div', className, children, ...rest } = props;\n\n    const { virtualized } = useContext(VirtualizedListContext);\n\n    if (!virtualized) {\n        return (\n            <Element {...rest} className={classnames(styles.virtualizedList, className)}>\n                {children}\n            </Element>\n        );\n    }\n\n    return <ActivatedVirtualizedList {...props} />;\n};\n\ninterface VirtualizedItemProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {\n    measure?: VirtualItem<Element>['measureElement'];\n}\n\nconst VirtualizedItemComponent = ({ measure, ...rest }: VirtualizedItemProps, ref: ForwardedRef<HTMLDivElement>) => {\n    return <div {...rest} ref={ref} />;\n};\n\nexport const VirtualizedItem = forwardRef(VirtualizedItemComponent);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/VirtualizedList/VirtualizedListWrapper.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { VirtualizerOptions } from '@tanstack/virtual-core';
+interface VirtualizedListWrapperProps extends PropsWithChildren {
+    /** Находится ли список в блоке ограниченной высоты */
+    fixedSize?: boolean;
+    /** Верхняя панель */
+    topPanel?: ReactNode;
+    /** Нижняя панель */
+    bottomPanel?: ReactNode;
+    /** Включена ли виртуализация */
+    virtualized?: boolean;
+    /** Функция для замера размеров айтема списка (по умолчанию используется getBoundingClientRect.height) */
+    measureElement?: VirtualizerOptions<HTMLElement, Element>['measureElement'];
+    /** Предполагаемая высота айтема (по умолчанию 80px) */
+    estimateSize?: number;
+}
+export declare const VirtualizedListWrapper: import("react").ForwardRefExoticComponent<VirtualizedListWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/VirtualizedList/VirtualizedListWrapper.js

@@ -0,0 +1,28 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo } from 'react';
+import classnames from 'classnames';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
+import { VirtualizedListContext, DEFAULT_ITEM_HEIGHT } from './context.js';
+import { s as styles } from '../virtualized-list-B8kzPHyT.js';
+
+const VirtualizedListWrapperComponent = ({ fixedSize, topPanel, bottomPanel, virtualized = true, measureElement, estimateSize = DEFAULT_ITEM_HEIGHT, children, }, ref) => {
+    const { hasVerticalScroll, verticalScrollbarProps, ...vScrollbar } = useScrollbar({
+        axis: fixedSize ? 'vertical' : 'none',
+    });
+    const contentRef = useRef(null);
+    const wrapperRefCallback = useMultipleRefs(ref, vScrollbar.scrollContainerRef);
+    const contentRefCallback = useMultipleRefs(contentRef, vScrollbar.contentWrapperRef);
+    const value = useMemo(() => ({
+        fixedSize,
+        virtualized,
+        measureElement,
+        estimateSize,
+    }), [fixedSize, virtualized, measureElement, estimateSize]);
+    return (jsxs("div", { className: classnames(styles.virtualizedWrapper, vScrollbar.hoverContainerCssClass), children: [jsx("div", { className: classnames({ [styles.scrollWrapper]: fixedSize }), "data-virtualized-list-wrapper": true, ref: wrapperRefCallback, children: jsxs(VirtualizedListContext.Provider, { value: value, children: [topPanel, jsx("div", { ref: contentRefCallback, "data-virtualized-list-content": true, children: children }), bottomPanel] }) }), hasVerticalScroll && jsx(Scrollbar, { className: styles.verticalScrollbar, ...verticalScrollbarProps })] }));
+};
+const VirtualizedListWrapper = forwardRef(VirtualizedListWrapperComponent);
+
+export { VirtualizedListWrapper };
+//# sourceMappingURL=VirtualizedListWrapper.js.map

package/VirtualizedList/VirtualizedListWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedListWrapper.js","sources":["src/VirtualizedList/VirtualizedListWrapper.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, PropsWithChildren, ReactNode, useMemo, useRef } from 'react';\nimport { VirtualizerOptions } from '@tanstack/virtual-core';\nimport classnames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\nimport { VirtualizedListContext, DEFAULT_ITEM_HEIGHT } from '@hh.ru/magritte-ui-table/VirtualizedList/context';\n\nimport styles from './virtualized-list.less';\n\ninterface VirtualizedListWrapperProps extends PropsWithChildren {\n    /** Находится ли список в блоке ограниченной высоты */\n    fixedSize?: boolean;\n    /** Верхняя панель */\n    topPanel?: ReactNode;\n    /** Нижняя панель */\n    bottomPanel?: ReactNode;\n    /** Включена ли виртуализация */\n    virtualized?: boolean;\n    /** Функция для замера размеров айтема списка (по умолчанию используется getBoundingClientRect.height) */\n    measureElement?: VirtualizerOptions<HTMLElement, Element>['measureElement'];\n    /** Предполагаемая высота айтема (по умолчанию 80px) */\n    estimateSize?: number;\n}\n\nconst VirtualizedListWrapperComponent = (\n    {\n        fixedSize,\n        topPanel,\n        bottomPanel,\n        virtualized = true,\n        measureElement,\n        estimateSize = DEFAULT_ITEM_HEIGHT,\n        children,\n    }: VirtualizedListWrapperProps,\n    ref: ForwardedRef<HTMLDivElement>\n) => {\n    const { hasVerticalScroll, verticalScrollbarProps, ...vScrollbar } = useScrollbar({\n        axis: fixedSize ? 'vertical' : 'none',\n    });\n    const contentRef = useRef<HTMLDivElement>(null);\n    const wrapperRefCallback = useMultipleRefs(ref, vScrollbar.scrollContainerRef);\n    const contentRefCallback = useMultipleRefs(contentRef, vScrollbar.contentWrapperRef);\n\n    const value = useMemo(\n        () => ({\n            fixedSize,\n            virtualized,\n            measureElement,\n            estimateSize,\n        }),\n        [fixedSize, virtualized, measureElement, estimateSize]\n    );\n\n    return (\n        <div className={classnames(styles.virtualizedWrapper, vScrollbar.hoverContainerCssClass)}>\n            <div\n                className={classnames({ [styles.scrollWrapper]: fixedSize })}\n                data-virtualized-list-wrapper\n                ref={wrapperRefCallback}\n            >\n                <VirtualizedListContext.Provider value={value}>\n                    {topPanel}\n                    <div ref={contentRefCallback} data-virtualized-list-content>\n                        {children}\n                    </div>\n                    {bottomPanel}\n                </VirtualizedListContext.Provider>\n            </div>\n            {hasVerticalScroll && <Scrollbar className={styles.verticalScrollbar} {...verticalScrollbarProps} />}\n        </div>\n    );\n};\n\nexport const VirtualizedListWrapper = forwardRef(VirtualizedListWrapperComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAyBA,MAAM,+BAA+B,GAAG,CACpC,EACI,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,GAAG,IAAI,EAClB,cAAc,EACd,YAAY,GAAG,mBAAmB,EAClC,QAAQ,GACkB,EAC9B,GAAiC,KACjC;IACA,MAAM,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAAG,UAAU,EAAE,GAAG,YAAY,CAAC;QAC9E,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM;AACxC,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,kBAAkB,GAAG,eAAe,CAAC,GAAG,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC/E,MAAM,kBAAkB,GAAG,eAAe,CAAC,UAAU,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;AAErF,IAAA,MAAM,KAAK,GAAG,OAAO,CACjB,OAAO;QACH,SAAS;QACT,WAAW;QACX,cAAc;QACd,YAAY;KACf,CAAC,EACF,CAAC,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,CAAC,CACzD,CAAC;AAEF,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,kBAAkB,EAAE,UAAU,CAAC,sBAAsB,CAAC,aACpFC,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,EAAA,+BAAA,EAAA,IAAA,EAE5D,GAAG,EAAE,kBAAkB,EAEvB,QAAA,EAAAD,IAAA,CAAC,sBAAsB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EACxC,QAAA,EAAA,CAAA,QAAQ,EACTC,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,kBAAkB,EACvB,+BAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,GACP,EACL,WAAW,CACkB,EAAA,CAAA,EAAA,CAChC,EACL,iBAAiB,IAAIA,GAAC,CAAA,SAAS,IAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAM,GAAA,sBAAsB,EAAI,CAAA,CAAA,EAAA,CAClG,EACR;AACN,CAAC,CAAC;MAEW,sBAAsB,GAAG,UAAU,CAAC,+BAA+B;;;;"}

package/VirtualizedList/VirtualizedPanel.d.ts

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren } from 'react';
+import { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';
+interface PanelProps extends PropsWithChildren {
+    /** Прилипает ли панель сверху */
+    stickyTop?: boolean;
+    /** Прилипает ли панель снизу */
+    stickyBottom?: boolean;
+    /** Цвет фона */
+    style?: TokenColorBackground;
+}
+export declare const VirtualizedPanel: FC<PanelProps>;
+export {};

package/VirtualizedList/VirtualizedPanel.js

@@ -0,0 +1,15 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { s as styles } from '../virtualized-list-B8kzPHyT.js';
+
+const VirtualizedPanel = ({ stickyTop, stickyBottom, style = 'primary', children }) => {
+    return (jsx("div", { className: classnames(styles.panelContainer, styles.topPanel, {
+            [styles[`panel-style-${style}`]]: style,
+            [styles.stickyTop]: stickyTop,
+            [styles.stickyBottom]: stickyBottom,
+        }), children: jsx("div", { className: classnames(styles.panel), children: children }) }));
+};
+
+export { VirtualizedPanel };
+//# sourceMappingURL=VirtualizedPanel.js.map

package/VirtualizedList/VirtualizedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedPanel.js","sources":["src/VirtualizedList/VirtualizedPanel.tsx"],"sourcesContent":["import { FC, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nimport { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\n\nimport styles from './virtualized-list.less';\n\ninterface PanelProps extends PropsWithChildren {\n    /** Прилипает ли панель сверху */\n    stickyTop?: boolean;\n    /** Прилипает ли панель снизу */\n    stickyBottom?: boolean;\n    /** Цвет фона */\n    style?: TokenColorBackground;\n}\n\nexport const VirtualizedPanel: FC<PanelProps> = ({ stickyTop, stickyBottom, style = 'primary', children }) => {\n    return (\n        <div\n            className={classnames(styles.panelContainer, styles.topPanel, {\n                [styles[`panel-style-${style}`]]: style,\n                [styles.stickyTop]: stickyTop,\n                [styles.stickyBottom]: stickyBottom,\n            })}\n        >\n            <div className={classnames(styles.panel)}>{children}</div>\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;AAgBa,MAAA,gBAAgB,GAAmB,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,GAAG,SAAS,EAAE,QAAQ,EAAE,KAAI;AACzG,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,QAAQ,EAAE;YAC1D,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,KAAK,EAAE,CAAC,GAAG,KAAK;AACvC,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;AAC7B,YAAA,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY;AACtC,SAAA,CAAC,EAEF,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,EAAA,CACxD,EACR;AACN;;;;"}

package/VirtualizedList/context.d.ts

@@ -0,0 +1,9 @@
+import { VirtualizerOptions } from '@tanstack/virtual-core';
+export declare const DEFAULT_ITEM_HEIGHT = 80;
+export interface VirtualizedListContextProps {
+    fixedSize?: boolean;
+    virtualized?: boolean;
+    measureElement?: VirtualizerOptions<HTMLElement, Element>['measureElement'];
+    estimateSize: number;
+}
+export declare const VirtualizedListContext: import("react").Context<VirtualizedListContextProps>;

package/VirtualizedList/context.js

@@ -0,0 +1,10 @@
+import './../index.css';
+import { createContext } from 'react';
+
+const DEFAULT_ITEM_HEIGHT = 80;
+const VirtualizedListContext = createContext({
+    estimateSize: DEFAULT_ITEM_HEIGHT,
+});
+
+export { DEFAULT_ITEM_HEIGHT, VirtualizedListContext };
+//# sourceMappingURL=context.js.map

package/VirtualizedList/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["src/VirtualizedList/context.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { VirtualizerOptions } from '@tanstack/virtual-core';\n\nexport const DEFAULT_ITEM_HEIGHT = 80;\n\nexport interface VirtualizedListContextProps {\n    fixedSize?: boolean;\n    virtualized?: boolean;\n    measureElement?: VirtualizerOptions<HTMLElement, Element>['measureElement'];\n    estimateSize: number;\n}\n\nexport const VirtualizedListContext = createContext<VirtualizedListContextProps>({\n    estimateSize: DEFAULT_ITEM_HEIGHT,\n});\n"],"names":[],"mappings":";;AAGO,MAAM,mBAAmB,GAAG,GAAG;AAS/B,MAAM,sBAAsB,GAAG,aAAa,CAA8B;AAC7E,IAAA,YAAY,EAAE,mBAAmB;AACpC,CAAA;;;;"}

package/VirtualizedList/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedListWrapper';
+export * from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedList';
+export * from '@hh.ru/magritte-ui-table/VirtualizedList/VirtualizedPanel';