@synerise/ds-table-new 0.1.0

package/dist/components/TableBody/TableBody.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TableBodyProps } from '../../Table.types';
+export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowTooltipProps, emptyDataComponent, texts, }: TableBodyProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableBody/TableBody.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { DEFAULT_CELL_HEIGHT } from "../../Table.const.js";
+import { useTableContext } from "../../contexts/TableContext.js";
+import { TBody } from "./TableBody.styles.js";
+import { TableEmptyBody } from "./TableEmptyBody/TableEmptyBody.js";
+import { TableRow } from "./TableRow/TableRow.js";
+import { TableRowVirtual } from "./TableRow/TableRowVirtual.js";
+const TableBody = ({
+  cellHeight = DEFAULT_CELL_HEIGHT,
+  infiniteScroll,
+  onRowClick,
+  getRowTooltipProps,
+  emptyDataComponent,
+  texts
+}) => {
+  const {
+    table,
+    rowVirtualizer
+  } = useTableContext();
+  const tbodyRef = useRef(null);
+  const virtualItems = rowVirtualizer ? rowVirtualizer.getVirtualItems() : [];
+  const allRows = table.getRowModel().flatRows;
+  return allRows.length ? /* @__PURE__ */ jsx(TBody, { "data-testid": "ds-table-body", ref: tbodyRef, role: "rowgroup", "data-popup-container": true, style: rowVirtualizer && virtualItems.length ? {
+    height: `${rowVirtualizer.getTotalSize()}px`,
+    position: "relative"
+  } : void 0, children: rowVirtualizer && virtualItems.length ? (
+    // Virtualized: place spacer and absolutely-positioned rows
+    virtualItems.map((virtual) => {
+      const row = allRows[virtual.index];
+      return /* @__PURE__ */ jsx(TableRowVirtual, { virtual, cellHeight, row, texts, onRowClick, getRowTooltipProps, rowIndex: virtual.index, infiniteScroll, isLast: virtual.index === allRows.length - 1, isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id);
+    })
+  ) : (
+    // Non-virtualized: render all rows in the normal flow
+    allRows.map((row) => /* @__PURE__ */ jsx(TableRow, { onRowClick, getRowTooltipProps, row, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id))
+  ) }, "virtual-table-body") : /* @__PURE__ */ jsx(TableEmptyBody, { emptyDataComponent, texts });
+};
+export {
+  TableBody
+};

package/dist/components/TableBody/TableBody.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Tr: import('styled-components').StyledComponent<"tr", any, {}, never>;
+export declare const TBody: import('styled-components').StyledComponent<"tbody", any, {}, never>;

package/dist/components/TableBody/TableBody.styles.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { commonRowStyles } from "../../Table.styles.js";
+import { Td } from "./TableCell/TableCell.styles.js";
+const Tr = /* @__PURE__ */ styled.tr.withConfig({
+  displayName: "TableBodystyles__Tr",
+  componentId: "sc-1dty8xx-0"
+})(["", " &:hover{", "{background:", ";}}"], commonRowStyles, Td, (props) => props.theme.palette["grey-050"]);
+const TBody = /* @__PURE__ */ styled.tbody.withConfig({
+  displayName: "TableBodystyles__TBody",
+  componentId: "sc-1dty8xx-1"
+})(["position:relative;"]);
+export {
+  TBody,
+  Tr
+};

package/dist/components/TableBody/TableBodySkeleton/TableBodySkeleton.d.ts

@@ -0,0 +1,5 @@
+import { default as React, MutableRefObject } from 'react';
+export declare const TableBodySkeleton: ({ cellHeight, wrapperRef, }: {
+    cellHeight: number;
+    wrapperRef: MutableRefObject<HTMLDivElement | null>;
+}) => React.JSX.Element;

package/dist/components/TableBody/TableBodySkeleton/TableBodySkeleton.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { useTableContext } from "../../../contexts/TableContext.js";
+import { TableCell } from "../TableCell/TableCell.js";
+import { Tr, TableSkeletonCell, Skeleton, TBody } from "./TableBodySkeleton.styles.js";
+const TableBodySkeleton = ({
+  cellHeight,
+  wrapperRef
+}) => {
+  const {
+    table,
+    getScrollContainer
+  } = useTableContext();
+  const headerGroups = table.getHeaderGroups();
+  const [availableSpace, setAvailableSpace] = useState();
+  useEffect(() => {
+    const container = getScrollContainer();
+    if (container && wrapperRef.current) {
+      const y1 = container.getBoundingClientRect().top;
+      const y2 = wrapperRef.current.getBoundingClientRect().top;
+      setAvailableSpace(container.offsetHeight - (y2 - y1));
+    }
+  }, [getScrollContainer, wrapperRef]);
+  const rowCount = useMemo(() => {
+    const container = getScrollContainer();
+    if (!container) {
+      return 5;
+    }
+    return availableSpace ? Math.floor(availableSpace / cellHeight) : 0;
+  }, [availableSpace, cellHeight, getScrollContainer]);
+  const skeletonRows = useMemo(() => {
+    return Array.from({
+      length: rowCount
+    }, (_, rowIndex) => headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Tr, { role: "row", children: headerGroup.headers.map((header, columnIndex) => {
+      return /* @__PURE__ */ jsx(TableCell, { isSorted: !!header.column.getIsSorted(), headerIndex: columnIndex, width: header.column.getSize(), height: cellHeight, isPinned: header.column.getIsPinned(), rightOffset: header.column.getAfter("right"), leftOffset: header.column.getStart("left"), children: header.column.columnDef.meta?.skeletonCell ? header.column.columnDef.meta?.skeletonCell() : /* @__PURE__ */ jsx(TableSkeletonCell, { children: /* @__PURE__ */ jsx(Skeleton, { numberOfSkeletons: 1, size: "M" }) }) }, header.id);
+    }) }, `${headerGroup.id}-${rowIndex}`)));
+  }, [cellHeight, headerGroups, rowCount]);
+  return /* @__PURE__ */ jsx(TBody, { role: "rowgroup", children: skeletonRows });
+};
+export {
+  TableBodySkeleton
+};

package/dist/components/TableBody/TableBodySkeleton/TableBodySkeleton.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const Tr: import('styled-components').StyledComponent<"tr", any, {}, never>;
+export declare const TBody: import('styled-components').StyledComponent<"tbody", any, {}, never>;
+export declare const Td: import('styled-components').StyledComponent<"td", any, {
+    $width?: number;
+}, never>;
+export declare const TableSkeletonCell: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Skeleton: import('styled-components').StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import('@synerise/ds-skeleton').SkeletonProps) => React.JSX.Element, any, {
+    skeletonWidth?: string;
+}, never>;

package/dist/components/TableBody/TableBodySkeleton/TableBodySkeleton.styles.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import DSSkeleton from "@synerise/ds-skeleton";
+import { commonCellStyles, commonRowStyles } from "../../../Table.styles.js";
+const Tr = /* @__PURE__ */ styled.tr.withConfig({
+  displayName: "TableBodySkeletonstyles__Tr",
+  componentId: "sc-1fl88wn-0"
+})(["", ""], commonRowStyles);
+const TBody = /* @__PURE__ */ styled.tbody.withConfig({
+  displayName: "TableBodySkeletonstyles__TBody",
+  componentId: "sc-1fl88wn-1"
+})(["position:relative;"]);
+const Td = /* @__PURE__ */ styled.td.withConfig({
+  displayName: "TableBodySkeletonstyles__Td",
+  componentId: "sc-1fl88wn-2"
+})(["", " padding:16px 24px;", ";"], commonCellStyles, (props) => props.$width ? `width: ${props.$width}px` : "");
+const TableSkeletonCell = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableBodySkeletonstyles__TableSkeletonCell",
+  componentId: "sc-1fl88wn-3"
+})(["align-items:center;justify-content:flex-start;width:100%;"]);
+const Skeleton = /* @__PURE__ */ styled(DSSkeleton).withConfig({
+  displayName: "TableBodySkeletonstyles__Skeleton",
+  componentId: "sc-1fl88wn-4"
+})(["padding:0;", ""], (props) => props.skeletonWidth && `width: ${props.skeletonWidth};`);
+export {
+  Skeleton,
+  TBody,
+  TableSkeletonCell,
+  Td,
+  Tr
+};

package/dist/components/TableBody/TableCell/TableCell.d.ts

@@ -0,0 +1,16 @@
+import { default as React, ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+type TableCellProps = WithHTMLAttributes<HTMLTableCellElement, {
+    children?: ReactNode;
+    width?: number;
+    height?: number;
+    colSpan?: number;
+    isSorted?: boolean;
+    isPinned?: 'right' | 'left' | false;
+    rightOffset?: number;
+    leftOffset?: number;
+    cellKey?: string;
+    headerIndex?: number;
+}>;
+export declare const TableCell: React.MemoExoticComponent<({ children, width, height, isSorted, colSpan, isPinned, headerIndex, rightOffset, leftOffset, cellKey, ...rest }: TableCellProps) => React.JSX.Element>;
+export {};

package/dist/components/TableBody/TableCell/TableCell.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Td, CellWrapper } from "./TableCell.styles.js";
+const TableCell = memo(({
+  children,
+  width,
+  height,
+  isSorted,
+  colSpan,
+  isPinned,
+  headerIndex,
+  rightOffset,
+  leftOffset,
+  cellKey,
+  ...rest
+}) => /* @__PURE__ */ jsx(Td, { $height: height, $width: width, isSorted, role: "cell", colSpan, isPinned, rightOffset, leftOffset, headerIndex, ...rest, children: /* @__PURE__ */ jsx(CellWrapper, { children }) }, cellKey));
+export {
+  TableCell
+};

package/dist/components/TableBody/TableCell/TableCell.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const CellWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Td: import('styled-components').StyledComponent<"td", any, {
+    $height?: number;
+    $width?: number;
+    isSorted?: boolean;
+    headerIndex?: number;
+    isPinned?: "left" | "right" | false;
+    rightOffset?: number;
+    leftOffset?: number;
+}, never>;

package/dist/components/TableBody/TableCell/TableCell.styles.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { commonCellStyles, commonPinnedStyles } from "../../../Table.styles.js";
+const CellWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableCellstyles__CellWrapper",
+  componentId: "sc-1sq3dd7-0"
+})(["overflow:hidden;"]);
+const Td = /* @__PURE__ */ styled.td.withConfig({
+  displayName: "TableCellstyles__Td",
+  componentId: "sc-1sq3dd7-1"
+})(["", " ", " &&&&{", ";}", ";", ";", "{display:flex;align-items:center;width:100%;}"], commonCellStyles, commonPinnedStyles, (props) => props.isSorted && `background-color: ${props.theme.palette["blue-050"]}`, (props) => props.headerIndex !== void 0 ? `width: var(--col-${props.headerIndex}-width)` : props.$width && `width: ${props.$width}px`, (props) => props.$height ? `  
+    padding: 0 24px;
+    height: ${props.$height}px` : `
+    padding: 16px 24px;
+  `, CellWrapper);
+export {
+  CellWrapper,
+  Td
+};

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TableEmptyBodyProps } from '../../../Table.types';
+export declare const TableEmptyBody: <TData, TValue>({ emptyDataComponent, texts, }: TableEmptyBodyProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { FormattedMessage } from "react-intl";
+import Result from "@synerise/ds-result";
+import { useTableContext } from "../../../contexts/TableContext.js";
+import { TBody, Tr, Td, TableEmptyBodyWrapper } from "./TableEmptyBody.styles.js";
+const TableEmptyBody = ({
+  emptyDataComponent,
+  texts
+}) => {
+  const {
+    table
+  } = useTableContext();
+  const colSpan = table.getAllLeafColumns().length;
+  return /* @__PURE__ */ jsx(TBody, { children: /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan, children: /* @__PURE__ */ jsx(TableEmptyBodyWrapper, { children: emptyDataComponent !== void 0 ? emptyDataComponent : /* @__PURE__ */ jsx(Result, { description: texts.emptyText || /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TABLE.EMPTY_TEXT" }), type: "no-results", noSearchResults: true }) }) }) }) });
+};
+export {
+  TableEmptyBody
+};

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Tr: import('styled-components').StyledComponent<"tr", any, {}, never>;
+export declare const Td: import('styled-components').StyledComponent<"td", any, {}, never>;
+export declare const TBody: import('styled-components').StyledComponent<"tbody", any, {}, never>;
+export declare const TableEmptyBodyWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.styles.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+const Tr = /* @__PURE__ */ styled.tr.withConfig({
+  displayName: "TableEmptyBodystyles__Tr",
+  componentId: "sc-14kyiyc-0"
+})([""]);
+const Td = /* @__PURE__ */ styled.td.withConfig({
+  displayName: "TableEmptyBodystyles__Td",
+  componentId: "sc-14kyiyc-1"
+})([""]);
+const TBody = /* @__PURE__ */ styled.tbody.withConfig({
+  displayName: "TableEmptyBodystyles__TBody",
+  componentId: "sc-14kyiyc-2"
+})(["position:relative;"]);
+const TableEmptyBodyWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableEmptyBodystyles__TableEmptyBodyWrapper",
+  componentId: "sc-14kyiyc-3"
+})(["min-height:160px;display:flex;align-items:center;"]);
+export {
+  TBody,
+  TableEmptyBodyWrapper,
+  Td,
+  Tr
+};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/ErrorItem.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { InfiniteLoaderRowTexts } from '../../../../Table.types';
+type ErrorItemProps = {
+    onRetryClick?: () => void;
+    texts: InfiniteLoaderRowTexts;
+};
+export declare const ErrorItem: ({ onRetryClick, texts }: ErrorItemProps) => React.JSX.Element;
+export {};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/ErrorItem.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Button from "@synerise/ds-button";
+import Icon, { RefreshM } from "@synerise/ds-icon";
+import InlineAlert from "@synerise/ds-inline-alert";
+import { ErrorItemWrapper } from "./ErrorItem.styles.js";
+const ErrorItem = ({
+  onRetryClick,
+  texts
+}) => {
+  return /* @__PURE__ */ jsxs(ErrorItemWrapper, { children: [
+    /* @__PURE__ */ jsx(InlineAlert, { type: "alert", message: texts.infiniteScrollError }),
+    onRetryClick && /* @__PURE__ */ jsx(Button, { onClick: onRetryClick, type: "ghost", mode: "icon-label", icon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(RefreshM, {}) }), style: {
+      marginLeft: 8
+    }, children: texts.infiniteScrollRetry })
+  ] });
+};
+export {
+  ErrorItem
+};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/ErrorItem.styles.d.ts

@@ -0,0 +1 @@
+export declare const ErrorItemWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/ErrorItem.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const ErrorItemWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ErrorItemstyles__ErrorItemWrapper",
+  componentId: "sc-m3zsh5-0"
+})(["display:flex;gap:8px;"]);
+export {
+  ErrorItemWrapper
+};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/InfiniteLoaderRow.d.ts

@@ -0,0 +1,14 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+import { InfiniteLoaderRowTexts, InfiniteScrollState } from '../../../../Table.types';
+type InfiniteLoaderRowProps = {
+    position: 'TOP' | 'BOTTOM';
+    children?: ReactNode;
+    style?: CSSProperties;
+    infiniteLoaderItemProps: InfiniteScrollState & {
+        handleRetryClick?: () => void;
+    };
+    loadMore?: () => void;
+    texts: InfiniteLoaderRowTexts;
+};
+export declare const InfiniteLoaderRow: ({ texts, style, loadMore, infiniteLoaderItemProps, }: InfiniteLoaderRowProps) => React.JSX.Element;
+export {};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/InfiniteLoaderRow.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useTableContext } from "../../../../contexts/TableContext.js";
+import { TableCell } from "../../TableCell/TableCell.js";
+import { Tr } from "../TableRow.styles.js";
+import { ErrorItem } from "./ErrorItem.js";
+import { LoadingItem } from "./LoadingItem.js";
+import { NoMoreItem } from "./NoMoreItem.js";
+const InfiniteLoaderRow = ({
+  texts,
+  style,
+  loadMore,
+  infiniteLoaderItemProps
+}) => {
+  const {
+    table,
+    rowVirtualizer
+  } = useTableContext();
+  const size = table.getTotalSize();
+  const {
+    hasError,
+    hasMore,
+    isLoading,
+    handleRetryClick
+  } = infiniteLoaderItemProps;
+  const autoLoadMore = !isLoading && hasMore && !hasError;
+  useEffect(() => {
+    if (autoLoadMore && loadMore && !rowVirtualizer?.isScrolling) {
+      const timeout = setTimeout(loadMore, 0);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [loadMore, autoLoadMore, hasError, hasMore, rowVirtualizer, isLoading]);
+  return /* @__PURE__ */ jsxs(Tr, { style, role: "row", children: [
+    /* @__PURE__ */ jsxs(TableCell, { style: {
+      zIndex: 11
+    }, isPinned: "left", leftOffset: 0, width: 400, children: [
+      isLoading && /* @__PURE__ */ jsx(LoadingItem, { texts }),
+      !isLoading && !hasMore && /* @__PURE__ */ jsx(NoMoreItem, { texts }),
+      !isLoading && hasError && /* @__PURE__ */ jsx(ErrorItem, { texts, onRetryClick: handleRetryClick })
+    ] }),
+    /* @__PURE__ */ jsx(TableCell, { style: {
+      zIndex: 11
+    }, width: size - 400 })
+  ] });
+};
+export {
+  InfiniteLoaderRow
+};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/LoadingItem.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { InfiniteLoaderRowTexts } from '../../../../Table.types';
+export declare const LoadingItem: ({ texts }: {
+    texts: InfiniteLoaderRowTexts;
+}) => React.JSX.Element;

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/LoadingItem.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader } from "./LoadingItem.styles.js";
+const LoadingItem = ({
+  texts
+}) => {
+  return /* @__PURE__ */ jsx(Loader, { size: "M", label: texts.infiniteScrollLoading });
+};
+export {
+  LoadingItem
+};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/LoadingItem.styles.d.ts

@@ -0,0 +1 @@
+export declare const Loader: import('styled-components').StyledComponent<({ size, label, labelPosition, color, percent, percentFormatter, text, fontSize, mode, className, }: import('@synerise/ds-loader/dist/Loader.types').LoaderProps) => React.JSX.Element, any, {}, never>;

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/LoadingItem.styles.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import DSLoader from "@synerise/ds-loader";
+const Loader = /* @__PURE__ */ styled(DSLoader).withConfig({
+  displayName: "LoadingItemstyles__Loader",
+  componentId: "sc-i54qqh-0"
+})(["justify-content:flex-start;"]);
+export {
+  Loader
+};

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/NoMoreItem.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { InfiniteLoaderRowTexts } from '../../../../Table.types';
+export declare const NoMoreItem: ({ texts }: {
+    texts: InfiniteLoaderRowTexts;
+}) => React.JSX.Element;

package/dist/components/TableBody/TableRow/InfiniteLoaderRow/NoMoreItem.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import InlineAlert from "@synerise/ds-inline-alert";
+const NoMoreItem = ({
+  texts
+}) => {
+  return /* @__PURE__ */ jsx(InlineAlert, { type: "info", message: texts.infiniteScrollNoMoreData });
+};
+export {
+  NoMoreItem
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TableRowProps } from '../../../Table.types';
+declare const TableRowInner: <TData extends object>({ row, onRowClick, getRowTooltipProps, }: TableRowProps<TData>) => React.JSX.Element;
+export declare const TableRow: typeof TableRowInner;
+export {};

package/dist/components/TableBody/TableRow/TableRow.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import Tooltip from "@synerise/ds-tooltip";
+import { flexRender } from "@tanstack/react-table";
+import { isSorted } from "../../../utils/sort.js";
+import { TableCell } from "../TableCell/TableCell.js";
+import { Tr } from "./TableRow.styles.js";
+const TableRowInner = ({
+  row,
+  onRowClick,
+  getRowTooltipProps
+}) => {
+  const rowContent = /* @__PURE__ */ jsx(Tr, { "data-row-depth": row.depth, "data-row-index": row.index, "data-index": row.index, role: "row", onClick: onRowClick ? (event) => {
+    event.stopPropagation();
+    onRowClick && onRowClick(row.original, event);
+  } : void 0, children: row.getVisibleCells().map((cell, columnIndex) => {
+    const cellId = `cell-${cell.column.id}-${cell.row.id}`;
+    const isColumnSorted = isSorted(cell.column);
+    const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+    const cellTooltipProps = cell.column.columnDef.meta?.getCellTooltipProps?.(row.original);
+    return /* @__PURE__ */ jsx(TableCell, { isSorted: isColumnSorted, headerIndex: columnIndex, cellKey: cellId, width: cell.column.getSize(), isPinned: cell.column.getIsPinned(), rightOffset: cell.column.getAfter("right"), leftOffset: cell.column.getStart("left"), style: cell.column.columnDef.meta?.style, "data-cell-id": cellId, "data-column-dataindex": cell.column.columnDef.meta?.dataIndex, "data-column-title": cell.column.columnDef.meta?.title, children: cellTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...cellTooltipProps, children: /* @__PURE__ */ jsx("span", { children: cellContent }) }) : cellContent }, cellId);
+  }) }, row.id);
+  const rowTooltipProps = getRowTooltipProps?.(row.original);
+  return rowTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...rowTooltipProps, children: rowContent }) : rowContent;
+};
+const TableRow = memo(TableRowInner);
+export {
+  TableRow
+};

package/dist/components/TableBody/TableRow/TableRow.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const Tr: import('styled-components').StyledComponent<"tr", any, {
+    isChild?: boolean;
+}, never>;
+export declare const VirtualRow: import('styled-components').StyledComponent<"tr", any, {
+    isChild?: boolean;
+    isVisible?: boolean;
+}, never>;

package/dist/components/TableBody/TableRow/TableRow.styles.js

@@ -0,0 +1,15 @@
+import styled, { css } from "styled-components";
+import { commonRowStyles } from "../../../Table.styles.js";
+import { Td } from "../TableCell/TableCell.styles.js";
+const Tr = /* @__PURE__ */ styled.tr.withConfig({
+  displayName: "TableRowstyles__Tr",
+  componentId: "sc-h0tq5q-0"
+})(["", " & ", "{background:", ";}&:hover{", "{background:", ";}}"], commonRowStyles, Td, (props) => props.theme.palette[props.isChild ? "grey-050" : "white"], Td, (props) => props.theme.palette[props.isChild ? "grey-100" : "grey-050"]);
+const VirtualRow = /* @__PURE__ */ styled.tr.withConfig({
+  displayName: "TableRowstyles__VirtualRow",
+  componentId: "sc-h0tq5q-1"
+})(["", " ", " & ", "{background:", ";", "}&:hover{", "{background:", ";}}"], (props) => !props.isVisible && css(["&&&{height:0 !important;overflow:hidden;display:block;}"]), commonRowStyles, Td, (props) => props.theme.palette[props.isChild ? "grey-050" : "white"], (props) => props.isChild && css(["&:first-child:before{content:'';display:block;position:absolute;top:0;left:0;width:2px;height:100%;background-color:", ";};}"], props.theme.palette["grey-500"]), Td, (props) => props.theme.palette[props.isChild ? "grey-100" : "grey-050"]);
+export {
+  Tr,
+  VirtualRow
+};

package/dist/components/TableBody/TableRow/TableRowVirtual.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TableRowVirtualProps } from '../../../Table.types';
+declare const TableRowVirtualInner: <TData extends object>({ cellHeight, rowIndex, virtual, infiniteScroll, texts, row, isLast, onRowClick, getRowTooltipProps, isExpanded: _isExpanded, isParentExpanded, }: TableRowVirtualProps<TData>) => React.JSX.Element;
+export declare const TableRowVirtual: typeof TableRowVirtualInner;
+export {};

package/dist/components/TableBody/TableRow/TableRowVirtual.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import Tooltip from "@synerise/ds-tooltip";
+import { flexRender } from "@tanstack/react-table";
+import { INFINITE_LOADER_ITEM_HEIGHT } from "../../../Table.const.js";
+import { useTableContext } from "../../../contexts/TableContext.js";
+import { isSorted } from "../../../utils/sort.js";
+import { TableCell } from "../TableCell/TableCell.js";
+import { InfiniteLoaderRow } from "./InfiniteLoaderRow/InfiniteLoaderRow.js";
+import { VirtualRow } from "./TableRow.styles.js";
+const TableRowVirtualInner = ({
+  cellHeight,
+  rowIndex,
+  virtual,
+  infiniteScroll,
+  texts,
+  row,
+  isLast,
+  onRowClick,
+  getRowTooltipProps,
+  isExpanded: _isExpanded,
+  isParentExpanded
+}) => {
+  const {
+    rowVirtualizer
+  } = useTableContext();
+  const isFirst = rowIndex === 0;
+  const renderLoaderRow = useCallback((position) => {
+    let isVisible2 = false;
+    let infiniteLoaderItemProps;
+    let top2 = virtual.start;
+    let loadMore = infiniteScroll?.onScrollEndReach;
+    if (position === "TOP") {
+      isVisible2 = Boolean(infiniteScroll?.prevPage?.hasMore && rowIndex === 0);
+      infiniteLoaderItemProps = infiniteScroll?.prevPage;
+      top2 = 0;
+      loadMore = infiniteScroll?.onScrollTopReach;
+    }
+    if (position === "BOTTOM") {
+      isVisible2 = Boolean(isLast && infiniteScroll?.nextPage);
+      infiniteLoaderItemProps = infiniteScroll?.nextPage;
+      const prevDataInfiniteLoaderHeight = infiniteScroll?.prevPage?.hasMore ? INFINITE_LOADER_ITEM_HEIGHT : 0;
+      top2 = virtual.start + virtual.size + prevDataInfiniteLoaderHeight + 1;
+    }
+    return infiniteLoaderItemProps && isVisible2 && /* @__PURE__ */ jsx(InfiniteLoaderRow, { position, texts, infiniteLoaderItemProps, loadMore, style: {
+      position: "absolute",
+      top: `${top2}px`,
+      height: `${INFINITE_LOADER_ITEM_HEIGHT}px`,
+      left: 0,
+      right: 0
+    } });
+  }, [virtual.size, infiniteScroll, isLast, rowIndex, texts, virtual.start]);
+  const top = infiniteScroll?.prevPage?.hasMore ? virtual.start + INFINITE_LOADER_ITEM_HEIGHT : virtual.start;
+  const isChild = !!row.parentId;
+  const isChildExpanded = isChild && !!isParentExpanded;
+  const isVisible = !isChild || !!isParentExpanded;
+  const renderRow = useCallback((tableRow) => {
+    return tableRow.getVisibleCells().map((cell, columnIndex) => {
+      const colId = cell.column.id;
+      const isColumnSorted = isSorted(cell.column);
+      const cellContent = flexRender(isChild ? cell.column.columnDef.meta?.childCell : cell.column.columnDef.cell, cell.getContext());
+      const cellTooltipProps = cell.column.columnDef.meta?.getCellTooltipProps?.(tableRow.original);
+      return /* @__PURE__ */ jsx(TableCell, { isSorted: isColumnSorted, headerIndex: columnIndex, "data-column-key": colId, width: cell.column.getSize(), height: cellHeight, isPinned: cell.column.getIsPinned(), rightOffset: cell.column.getAfter("right"), leftOffset: cell.column.getStart("left"), style: cell.column.columnDef.meta?.style, "data-column-dataindex": cell.column.columnDef.meta?.dataIndex, "data-column-title": cell.column.columnDef.meta?.title, children: cellTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...cellTooltipProps, children: /* @__PURE__ */ jsx("span", { children: cellContent }) }) : cellContent }, colId);
+    });
+  }, [cellHeight, isChild]);
+  const rowTooltipProps = getRowTooltipProps?.(row.original);
+  const virtualRowContent = /* @__PURE__ */ jsx(VirtualRow, { "data-key": row.id, "data-row-depth": row.depth, "data-row-ischild": isChild, "data-row-index": virtual.index, "data-index": virtual.index, ...isChild ? {
+    "data-row-expanded": isChildExpanded
+  } : {}, ref: rowVirtualizer?.measureElement, style: {
+    position: "absolute",
+    top: `${top}px`,
+    height: `${isVisible ? virtual.size : 0}px`,
+    left: 0,
+    right: 0
+  }, isVisible, isChild, onClick: onRowClick ? (event) => {
+    event.stopPropagation();
+    onRowClick && onRowClick(row.original, event);
+  } : void 0, children: renderRow(row) }, row.id);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isFirst && renderLoaderRow("TOP"),
+    rowTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...rowTooltipProps, children: virtualRowContent }) : virtualRowContent,
+    isLast && renderLoaderRow("BOTTOM")
+  ] });
+};
+const TableRowVirtual = memo(TableRowVirtualInner);
+export {
+  TableRowVirtual
+};

package/dist/components/TableBody/TableRowSelection/TableRowSelection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TableRowSelectionProps } from '../../../Table.types';
+export declare const TableRowSelection: <TData extends object>({ texts, row, }: TableRowSelectionProps<TData>) => React.JSX.Element;