@synerise/ds-table-new 0.1.0 → 1.0.2

package/dist/components/BaseTable/BaseTable.styles.js

@@ -20,7 +20,7 @@ const TableSkeleton = /* @__PURE__ */ styled(DSSkeleton).withConfig({
 const StyledTable = /* @__PURE__ */ styled.table.withConfig({
   displayName: "BaseTablestyles__StyledTable",
   componentId: "sc-1oa5lc2-4"
-})(["width:var(--table-size);border-spacing:0;border-collapse:separate;"]);
+})(["width:var(--table-size);border-spacing:0;border-collapse:separate;@keyframes ds-table-row-highlight{0%{background-color:transparent;}5%{background-color:var( --ds-highlight-color,", " );}30%{background-color:var( --ds-highlight-color,", " );}100%{background-color:transparent;}}tr.ds-table-row-highlight td{transition:background 0.3s ease-in-out;animation:ds-table-row-highlight var(--ds-highlight-duration,600ms) ease-in-out forwards;}"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-050"]);
 const TableColumnsHorizontalScroll = /* @__PURE__ */ styled(TableHorizontalScroll).withConfig({
   displayName: "BaseTablestyles__TableColumnsHorizontalScroll",
   componentId: "sc-1oa5lc2-5"

package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
+import { useMemo, useCallback } from "react";
 import Modal from "@synerise/ds-modal";
-import SearchInput from "@synerise/ds-search/dist/Elements/SearchInput/SearchInput";
 import { VirtualTable } from "../../../../VirtualTable.js";
 const DetailsModal = ({
   visible,
@@ -12,25 +11,21 @@ const DetailsModal = ({
   labelKey,
   loading
 }) => {
-  const [searchQuery, setSearchQuery] = useState("");
   const columns = useMemo(() => [{
     id: labelKey,
     accessorKey: labelKey,
     cell: (info) => renderItem(info.getValue(), info.row.original)
   }], [renderItem, labelKey]);
-  const filteredItems = useMemo(() => {
-    return searchQuery !== "" ? items.filter((item) => {
-      const value = item[labelKey];
-      return typeof value === "string" && value.toLowerCase().includes(searchQuery.toLowerCase());
-    }) : items;
-  }, [items, labelKey, searchQuery]);
+  const matchesSearchQuery = useCallback((query, row) => {
+    const value = row[labelKey];
+    return typeof value === "string" && value.toLowerCase().includes(query.toLowerCase());
+  }, [labelKey]);
   return /* @__PURE__ */ jsx(Modal, { size: "small", visible, title: texts.modalTitle, closable: true, onCancel: hide, bodyStyle: {
     padding: 0
-  }, footer: null, children: /* @__PURE__ */ jsx(VirtualTable, { maxHeight: 500, cellHeight: 64, data: filteredItems, title: `${filteredItems.length} ${texts.records}`, columns, isLoading: loading, hideTitleBar: true, rowKey: "key", searchComponent: /* @__PURE__ */ jsx(SearchInput, { clearTooltip: texts.searchClear, placeholder: texts.searchPlaceholder, onChange: (value) => {
-    setSearchQuery(value);
-  }, value: searchQuery, onClear: () => {
-    setSearchQuery("");
-  }, closeOnClickOutside: true }), hideColumnNames: true }) });
+  }, footer: null, children: /* @__PURE__ */ jsx(VirtualTable, { maxHeight: 500, cellHeight: 64, data: items, title: `${items.length} ${texts.records}`, columns, isLoading: loading, hideTitleBar: true, rowKey: "key", matchesSearchQuery, searchProps: {
+    clearTooltip: texts.searchClear,
+    placeholder: texts.searchPlaceholder
+  }, hideColumnNames: true }) });
 };
 export {
   DetailsModal

package/dist/components/ItemsMenu/ItemsMenu.d.ts

@@ -0,0 +1,7 @@
+import { default as React, ReactNode } from 'react';
+type ItemsMenuProps = {
+    children: ReactNode;
+    withLeftPadding?: boolean;
+};
+export declare const ItemsMenu: ({ children, withLeftPadding }: ItemsMenuProps) => React.JSX.Element;
+export {};

package/dist/components/ItemsMenu/ItemsMenu.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { ItemsMenu as ItemsMenu$1 } from "./ItemsMenu.styles.js";
+const ItemsMenu = ({
+  children,
+  withLeftPadding
+}) => /* @__PURE__ */ jsx(ItemsMenu$1, { $withLeftPadding: withLeftPadding, children });
+export {
+  ItemsMenu
+};

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

@@ -0,0 +1,3 @@
+export declare const ItemsMenu: import('styled-components').StyledComponent<"div", any, {
+    $withLeftPadding?: boolean;
+}, never>;

package/dist/components/ItemsMenu/ItemsMenu.styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+const ItemsMenu = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ItemsMenustyles__ItemsMenu",
+  componentId: "sc-1bl2h39-0"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;", ""], ({
+  $withLeftPadding
+}) => $withLeftPadding && "padding-left: 24px;");
+export {
+  ItemsMenu
+};

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

@@ -1,3 +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;
+export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowTooltipProps, withBodyScroll, tableBodyScrollRef, maxHeight, emptyDataComponent, texts, }: TableBodyProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableBody/TableBody.js

@@ -1,5 +1,4 @@
 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";
@@ -11,6 +10,9 @@ const TableBody = ({
   infiniteScroll,
   onRowClick,
   getRowTooltipProps,
+  withBodyScroll,
+  tableBodyScrollRef,
+  maxHeight,
   emptyDataComponent,
   texts
 }) => {
@@ -18,17 +20,36 @@ const TableBody = ({
     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 ? {
+  const flatRows = table.getRowModel().flatRows;
+  const expandedState = table.getState().expanded;
+  const isExpandedMap = typeof expandedState === "object" ? expandedState : null;
+  const nonVirtualRows = !rowVirtualizer && isExpandedMap && flatRows.some((row) => row.depth > 0) ? flatRows.filter((row) => {
+    if (row.depth === 0) {
+      return true;
+    }
+    let current = row.getParentRow();
+    while (current) {
+      if (!isExpandedMap[current.id]) {
+        return false;
+      }
+      current = current.getParentRow();
+    }
+    return true;
+  }) : flatRows;
+  const allRows = rowVirtualizer ? flatRows : nonVirtualRows;
+  return allRows.length ? /* @__PURE__ */ jsx(TBody, { "data-testid": "ds-table-body", ref: (node) => {
+    if (tableBodyScrollRef) {
+      tableBodyScrollRef.current = node;
+    }
+  }, $maxHeight: maxHeight, withBodyScroll, 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);
+      return /* @__PURE__ */ jsx(TableRowVirtual, { virtual, cellHeight, row, texts, onRowClick, getRowTooltipProps, rowIndex: virtual.index, infiniteScroll, isLast: virtual.index === allRows.length - 1, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id);
     })
   ) : (
     // Non-virtualized: render all rows in the normal flow

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

@@ -1,2 +1,5 @@
 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 TBody: import('styled-components').StyledComponent<"tbody", any, {
+    $maxHeight?: number;
+    withBodyScroll?: boolean;
+}, never>;

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

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+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({
@@ -8,7 +8,7 @@ const Tr = /* @__PURE__ */ styled.tr.withConfig({
 const TBody = /* @__PURE__ */ styled.tbody.withConfig({
   displayName: "TableBodystyles__TBody",
   componentId: "sc-1dty8xx-1"
-})(["position:relative;"]);
+})(["position:relative;", ""], (props) => props.withBodyScroll && css(["display:block;max-height:", "px;overflow-y:scroll;"], props.$maxHeight ?? 800));
 export {
   TBody,
   Tr

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

@@ -11,6 +11,7 @@ type TableCellProps = WithHTMLAttributes<HTMLTableCellElement, {
     leftOffset?: number;
     cellKey?: string;
     headerIndex?: number;
+    align?: 'left' | 'center' | 'right';
 }>;
-export declare const TableCell: React.MemoExoticComponent<({ children, width, height, isSorted, colSpan, isPinned, headerIndex, rightOffset, leftOffset, cellKey, ...rest }: TableCellProps) => React.JSX.Element>;
+export declare const TableCell: React.MemoExoticComponent<({ children, width, height, isSorted, colSpan, isPinned, headerIndex, rightOffset, leftOffset, cellKey, align, ...rest }: TableCellProps) => React.JSX.Element>;
 export {};

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

@@ -12,8 +12,9 @@ const TableCell = memo(({
   rightOffset,
   leftOffset,
   cellKey,
+  align,
   ...rest
-}) => /* @__PURE__ */ jsx(Td, { $height: height, $width: width, isSorted, role: "cell", colSpan, isPinned, rightOffset, leftOffset, headerIndex, ...rest, children: /* @__PURE__ */ jsx(CellWrapper, { children }) }, cellKey));
+}) => /* @__PURE__ */ jsx(Td, { $height: height, $width: width, $align: align, 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

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

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

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 import { commonCellStyles, commonPinnedStyles } from "../../../Table.styles.js";
+const justifyMap = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
 const CellWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TableCellstyles__CellWrapper",
   componentId: "sc-1sq3dd7-0"
@@ -7,11 +12,11 @@ const CellWrapper = /* @__PURE__ */ styled.div.withConfig({
 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 ? `  
+})(["", " ", " text-align:", ";&&&&{", ";}", ";", ";", "{display:flex;align-items:center;justify-content:", ";width:100%;}"], commonCellStyles, commonPinnedStyles, (props) => props.$align ?? "left", (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);
+  `, CellWrapper, (props) => props.$align ? justifyMap[props.$align] : "flex-start");
 export {
   CellWrapper,
   Td

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

@@ -1,5 +1,3 @@
 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 {};
+export declare const TableRow: <TData extends object>({ row, onRowClick, getRowTooltipProps, }: TableRowProps<TData>) => React.JSX.Element;

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

@@ -1,16 +1,15 @@
 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 = ({
+const TableRow = ({
   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) => {
+  const rowContent = /* @__PURE__ */ jsx(Tr, { "data-key": row.id, "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) => {
@@ -18,12 +17,11 @@ const TableRowInner = ({
     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);
+    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"), align: cell.column.columnDef.meta?.align, 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/TableRowVirtual.js

@@ -58,9 +58,10 @@ const TableRowVirtualInner = ({
     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 cellRenderer = isChild ? cell.column.columnDef.meta?.childCell ?? cell.column.columnDef.cell : cell.column.columnDef.cell;
+      const cellContent = flexRender(cellRenderer, 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);
+      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"), align: cell.column.columnDef.meta?.align, 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);

package/dist/components/TableBody/TableRowSelection/TableRowSelection.js

@@ -20,7 +20,8 @@ const TableRowSelection = ({
   } = selection || {};
   const isGlobalAllSelected = globalSelectionOnChange !== void 0 && globalSelected;
   const isSelected = row.getIsSelected();
-  const isDisabled = !row.getCanSelect() || isGlobalAllSelected || limit && table.getSelectedRowModel().rows.length >= limit && !isSelected;
+  const totalSelectedCount = Object.keys(table.getState().rowSelection).length;
+  const isDisabled = !row.getCanSelect() || isGlobalAllSelected || limit && totalSelectedCount >= limit && !isSelected;
   const toggleSelection = row.getToggleSelectedHandler();
   const handleChange = (newValue) => {
     stickyContext && stickyContext.setStickyData((prevValue) => ({

package/dist/components/TableColumns/TableColumns.js

@@ -17,7 +17,8 @@ const TableColumns = ({
     const isSticky = header.column.getIsPinned();
     const hasSorter = header.column.getCanSort();
     const isColumnSorted = isSorted(header.column);
-    return /* @__PURE__ */ jsx(Th, { headerIndex: columnIndex, colSpan: header.colSpan, style: header.column.columnDef.meta?.style, isPinned: header.column.getIsPinned(), rightOffset: header.column.getStart("left"), leftOffset: header.column.getAfter("right"), isSorted: isColumnSorted, hasSorter, "data-sticky": isSticky ? "true" : void 0, role: "columnheader", children: /* @__PURE__ */ jsxs(HeaderWrapper, { children: [
+    const align = header.column.columnDef.meta?.align;
+    return /* @__PURE__ */ jsx(Th, { headerIndex: columnIndex, colSpan: header.colSpan, style: header.column.columnDef.meta?.style, isPinned: header.column.getIsPinned(), rightOffset: header.column.getStart("left"), leftOffset: header.column.getAfter("right"), isSorted: isColumnSorted, hasSorter, $align: align, "data-sticky": isSticky ? "true" : void 0, role: "columnheader", children: /* @__PURE__ */ jsxs(HeaderWrapper, { $align: align, children: [
       /* @__PURE__ */ jsx(Label, { disableColumnNamesLineBreak, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
       hasSorter && (header.column.columnDef.meta?.renderCustomSortButton?.(header.getContext()) || /* @__PURE__ */ jsx(TableColumnSorter, { texts, column: header.column }))
     ] }) }, id);

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

@@ -5,10 +5,13 @@ export declare const Th: import('styled-components').StyledComponent<"th", any,
     isPinned?: "left" | "right" | false;
     rightOffset?: number;
     leftOffset?: number;
+    $align?: "left" | "center" | "right";
 }, never>;
 export declare const THead: import('styled-components').StyledComponent<"thead", any, {}, never>;
 export declare const Tr: import('styled-components').StyledComponent<"tr", any, {}, never>;
-export declare const HeaderWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const HeaderWrapper: import('styled-components').StyledComponent<"div", any, {
+    $align?: "left" | "center" | "right";
+}, never>;
 export declare const Label: import('styled-components').StyledComponent<"div", any, {
     disableColumnNamesLineBreak?: boolean;
 }, never>;

package/dist/components/TableColumns/TableColumns.styles.js

@@ -4,7 +4,7 @@ import { ToggleButton } from "./TableColumnSorter/TableColumnSorter.styles.js";
 const Th = /* @__PURE__ */ styled.th.withConfig({
   displayName: "TableColumnsstyles__Th",
   componentId: "sc-k8z5d0-0"
-})(["", ";", ";height:64px;text-align:left;background-color:", ";border-bottom:solid 1px ", ";color:", ";", ";", " &{", "}"], commonCellStyles, commonPinnedStyles, (props) => props.theme.palette["white"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-700"], (props) => props.headerIndex !== void 0 && `width: var(--col-${props.headerIndex}-width)`, (props) => props.hasSorter && css(["", "{opacity:0;}&:hover{background-color:", ";border-bottom:solid 1px ", ";box-shadow:inset 0 -1px 0 ", ";", "{opacity:1;}}"], ToggleButton, props.theme.palette["grey-050"], props.theme.palette["grey-400"], props.theme.palette["grey-400"], ToggleButton), (props) => props.isSorted && css(["&{", "{opacity:1;}background-color:", ";border-bottom:solid 1px ", ";box-shadow:inset 0 -1px 0 ", ";}&:hover{background-color:", ";border-bottom:solid 1px ", ";box-shadow:inset 0 -1px 0 ", ";}"], ToggleButton, props.theme.palette["blue-050"], props.theme.palette["blue-400"], props.theme.palette["blue-400"], props.theme.palette["blue-100"], props.theme.palette["blue-600"], props.theme.palette["blue-600"]));
+})(["", ";", ";height:64px;text-align:", ";background-color:", ";border-bottom:solid 1px ", ";color:", ";", ";", " &{", "}"], commonCellStyles, commonPinnedStyles, (props) => props.$align ?? "left", (props) => props.theme.palette["white"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-700"], (props) => props.headerIndex !== void 0 && `width: var(--col-${props.headerIndex}-width)`, (props) => props.hasSorter && css(["", "{opacity:0;}&:hover{background-color:", ";border-bottom:solid 1px ", ";box-shadow:inset 0 -1px 0 ", ";", "{opacity:1;}}"], ToggleButton, props.theme.palette["grey-050"], props.theme.palette["grey-400"], props.theme.palette["grey-400"], ToggleButton), (props) => props.isSorted && css(["&{", "{opacity:1;}background-color:", ";border-bottom:solid 1px ", ";box-shadow:inset 0 -1px 0 ", ";}&:hover{background-color:", ";border-bottom:solid 1px ", ";box-shadow:inset 0 -1px 0 ", ";}"], ToggleButton, props.theme.palette["blue-050"], props.theme.palette["blue-400"], props.theme.palette["blue-400"], props.theme.palette["blue-100"], props.theme.palette["blue-600"], props.theme.palette["blue-600"]));
 const THead = /* @__PURE__ */ styled.thead.withConfig({
   displayName: "TableColumnsstyles__THead",
   componentId: "sc-k8z5d0-1"
@@ -13,10 +13,15 @@ const Tr = /* @__PURE__ */ styled.tr.withConfig({
   displayName: "TableColumnsstyles__Tr",
   componentId: "sc-k8z5d0-2"
 })(["", ""], commonRowStyles);
+const justifyMap = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
 const HeaderWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TableColumnsstyles__HeaderWrapper",
   componentId: "sc-k8z5d0-3"
-})(["display:flex;align-items:center;justify-content:space-between;font-weight:500;"]);
+})(["display:flex;align-items:center;justify-content:", ";font-weight:500;"], (props) => props.$align ? justifyMap[props.$align] : "space-between");
 const Label = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TableColumnsstyles__Label",
   componentId: "sc-k8z5d0-4"

package/dist/components/TableHeader/TableHeader.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TableHeaderProps } from '../../Table.types';
-export declare const TableHeader: <TData extends object, TValue>({ title, searchComponent, filterComponent, itemsMenu, isCounterLoading, headerButton, texts, renderSelectionTitle, renderCustomCounter, hideTitlePart, dataSourceTotalCount, isLoading, }: TableHeaderProps<TData, TValue>) => React.JSX.Element;
+export declare const TableHeader: <TData extends object, TValue>({ title, searchComponent, filterComponent, itemsMenu, isCounterLoading, headerButton, texts, renderSelectionTitle, renderCustomCounter, hideTitlePart, dataSourceTotalCount, isLoading, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, }: TableHeaderProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableHeader/TableHeader.js

@@ -1,11 +1,13 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useEffect, useMemo } from "react";
 import { useDataFormat } from "@synerise/ds-core";
+import { SearchInput } from "@synerise/ds-search";
 import { BOTTOM_BORDER_WIDTH } from "../../Table.const.js";
 import { TableSkeleton } from "../../Table.styles.js";
 import { useSelectionContext } from "../../contexts/SelectionContext.js";
 import { useStickyContext } from "../../contexts/StickyContext.js";
 import { useTableContext } from "../../contexts/TableContext.js";
+import { ItemsMenu } from "../ItemsMenu/ItemsMenu.js";
 import { TableCounter } from "./TableCounter/TableCounter.js";
 import { Left, TitleContainer, TitlePartEllipsis, TitleSeparator, TitlePart, Header, Right, RightSideWrapper } from "./TableHeader.styles.js";
 import { TableHeaderSelection } from "./TableHeaderSelection/TableHeaderSelection.js";
@@ -23,7 +25,12 @@ const TableHeader = ({
   renderCustomCounter,
   hideTitlePart,
   dataSourceTotalCount,
-  isLoading
+  isLoading,
+  searchQuery,
+  setSearchQuery,
+  handleSearchClear,
+  hasBuiltInSearch,
+  searchProps
 }) => {
   const {
     formatValue
@@ -48,8 +55,9 @@ const TableHeader = ({
       }));
     }
   }, []);
-  const selectedItemsCount = table.getSelectedRowModel().rows.length;
-  const tableTotal = dataSourceTotalCount ?? table.getRowCount();
+  const selectedItemsCount = Object.keys(table.getState().rowSelection).length;
+  const visibleRowCount = table.getRowCount();
+  const tableTotal = dataSourceTotalCount ?? visibleRowCount;
   const displayedSelectedItems = isGlobalSelected ? tableTotal : selectedItemsCount;
   const hasSelectedItems = useMemo(() => selectedItemsCount > 0 || isGlobalSelected, [isGlobalSelected, selectedItemsCount]);
   const renderLeftSide = useMemo(() => {
@@ -68,7 +76,7 @@ const TableHeader = ({
     return hasSelectedItems ? /* @__PURE__ */ jsxs(Left, { "data-testid": "ds-table-selection", children: [
       selectionConfig && !hideSelectAll && /* @__PURE__ */ jsx(TableHeaderSelection, { texts }),
       renderSelectionTitle ? /* @__PURE__ */ jsx(Fragment, { children: renderSelectionTitle(selectionConfig) }) : /* @__PURE__ */ jsx(TitleContainer, { children: /* @__PURE__ */ jsx(TableCounter, { selectedItemsCount: displayedSelectedItems, texts, isCounterLoading, tableTotal }) }),
-      itemsMenu
+      itemsMenu && /* @__PURE__ */ jsx(ItemsMenu, { children: itemsMenu })
     ] }) : /* @__PURE__ */ jsxs(Left, { "data-testid": "ds-table-title", children: [
       selectionConfig && !isLoading && !hideSelectAll && /* @__PURE__ */ jsx(TableHeaderSelection, { texts }),
       /* @__PURE__ */ jsxs(TitleContainer, { children: [
@@ -88,13 +96,13 @@ const TableHeader = ({
         !isLoading && !hideTitlePart && /* @__PURE__ */ jsx(TitlePart, { children: /* @__PURE__ */ jsx(TableCounter, { texts, isCounterLoading, tableTotal, renderCustomCounter }) })
       ] })
     ] });
-  }, [selectionConfig, formatValue, texts, hasSelectedItems, renderSelectionTitle, isCounterLoading, selectedItemsCount, itemsMenu, isLoading, title, hideTitlePart, renderCustomCounter, tableTotal]);
+  }, [selectionConfig, formatValue, texts, hasSelectedItems, renderSelectionTitle, isCounterLoading, selectedItemsCount, itemsMenu, isLoading, title, hideTitlePart, renderCustomCounter, tableTotal, visibleRowCount, dataSourceTotalCount, displayedSelectedItems]);
   return /* @__PURE__ */ jsxs(Header, { ref: headerRef, stickyData: stickyContext?.stickyData, "data-testid": "ds-table-header", isVirtual: !!rowVirtualizer, children: [
     renderLeftSide,
     /* @__PURE__ */ jsxs(Right, { children: [
       headerButton,
       filterComponent && /* @__PURE__ */ jsx(RightSideWrapper, { "data-testid": "ds-table-filter-wrapper", children: filterComponent }),
-      searchComponent && /* @__PURE__ */ jsx(RightSideWrapper, { "data-testid": "ds-table-search-wrapper", children: searchComponent })
+      searchComponent ? /* @__PURE__ */ jsx(RightSideWrapper, { "data-testid": "ds-table-search-wrapper", children: searchComponent }) : hasBuiltInSearch && setSearchQuery && handleSearchClear ? /* @__PURE__ */ jsx(RightSideWrapper, { "data-testid": "ds-table-search-wrapper", children: /* @__PURE__ */ jsx(SearchInput, { placeholder: searchProps?.placeholder ?? "", clearTooltip: searchProps?.clearTooltip ?? "", onChange: setSearchQuery, value: searchQuery ?? "", onClear: handleSearchClear, closeOnClickOutside: true, ...searchProps }) }) : null
     ] })
   ] });
 };

package/dist/components/TableHeader/TableHeaderSelection/TableHeaderSelection.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { DropdownMenu } from "@synerise/ds-dropdown";
 import Icon, { OptionVerticalM } from "@synerise/ds-icon";
-import Tooltip from "@synerise/ds-tooltip";
 import { SELECTION_INVERT, SELECTION_ALL } from "../../../Table.const.js";
 import { useSelectionContext } from "../../../contexts/SelectionContext.js";
 import { useTableContext } from "../../../contexts/TableContext.js";
@@ -21,23 +20,44 @@ const TableHeaderSelection = ({
   } = selectionConfig || {};
   const hasGlobalSelection = globalSelectionOnChange !== void 0;
   const isGlobalAllSelected = hasGlobalSelection && globalSelected;
-  const isAllSelected = table.getIsAllRowsSelected();
-  const isAnySelected = table.getIsSomeRowsSelected();
-  const allRecordsCount = table.getRowModel().rows.length;
-  const selectedRecordsCount = table.getFilteredSelectedRowModel().rows.length;
+  const totalSelectedCount = Object.keys(table.getState().rowSelection).length;
+  const visibleRowCount = table.getRowModel().rows.length;
+  const visibleSelectedCount = table.getFilteredSelectedRowModel().rows.length;
+  const isAllVisibleSelected = visibleRowCount > 0 && visibleSelectedCount === visibleRowCount;
+  const isAnySelected = visibleSelectedCount > 0 && !isAllVisibleSelected;
+  const allRecordsCount = visibleRowCount;
+  const selectedRecordsCount = totalSelectedCount;
   const selectableRecordsCount = table.getRowModel().rows.filter((row) => row.getCanSelect()).length;
   const disabledBulkSelection = Boolean(allRecordsCount === 0 || selectableRecordsCount === 0 || hasSelectionLimit && selectedRecordsCount === 0);
   const selectionTooltipTitle = useMemo(() => {
     if (hasGlobalSelection) {
       return isGlobalAllSelected ? texts.unselectGlobalAll : texts.selectGlobalAll;
     }
-    return isAllSelected ? texts.unselectAll : texts.selectAllTooltip;
-  }, [hasGlobalSelection, isAllSelected, isGlobalAllSelected, texts.selectAllTooltip, texts.selectGlobalAll, texts.unselectAll, texts.unselectGlobalAll]);
+    return isAllVisibleSelected ? texts.unselectAll : texts.selectAllTooltip;
+  }, [hasGlobalSelection, isAllVisibleSelected, isGlobalAllSelected, texts.selectAllTooltip, texts.selectGlobalAll, texts.unselectAll, texts.unselectGlobalAll]);
   const selectAll = useCallback(() => {
-    table.toggleAllRowsSelected(true);
+    table.setRowSelection((prev) => {
+      const next = {
+        ...prev
+      };
+      table.getRowModel().rows.forEach((row) => {
+        if (row.getCanSelect()) {
+          next[row.id] = true;
+        }
+      });
+      return next;
+    });
   }, [table]);
   const unselectAll = useCallback(() => {
-    table.toggleAllRowsSelected(false);
+    table.setRowSelection((prev) => {
+      const next = {
+        ...prev
+      };
+      table.getRowModel().rows.forEach((row) => {
+        delete next[row.id];
+      });
+      return next;
+    });
   }, [table]);
   const selectGlobalAll = useCallback(() => {
     unselectAll();
@@ -70,7 +90,7 @@ const TableHeaderSelection = ({
       switch (selectionMenuElement) {
         case SELECTION_ALL: {
           const items = [];
-          if (!isAllSelected && !hasSelectionLimit) {
+          if (!isAllVisibleSelected && !hasSelectionLimit) {
             items.push({
               onClick: selectAll,
               text: texts.selectAll
@@ -100,17 +120,18 @@ const TableHeaderSelection = ({
       }
     });
     return [...globalSelectionItem, ...menuItems || []];
-  }, [hasGlobalSelection, isGlobalAllSelected, unselectGlobalAll, texts.unselectGlobalAll, texts.selectGlobalAll, texts.selectAll, texts.unselectAll, texts.selectInvert, selectGlobalAll, selectionConfig?.selections, isAllSelected, hasSelectionLimit, isAnySelected, selectAll, unselectAll, selectInvert]);
+  }, [hasGlobalSelection, isGlobalAllSelected, unselectGlobalAll, texts.unselectGlobalAll, texts.selectGlobalAll, texts.selectAll, texts.unselectAll, texts.selectInvert, selectGlobalAll, selectionConfig?.selections, isAllVisibleSelected, hasSelectionLimit, isAnySelected, selectAll, unselectAll, selectInvert]);
   const handleBatchSelectionChange = useCallback(() => {
-    const isSelected = hasGlobalSelection ? isGlobalAllSelected : table.getIsAllRowsSelected();
     if (hasGlobalSelection) {
-      isSelected ? unselectGlobalAll() : selectGlobalAll();
+      isGlobalAllSelected ? unselectGlobalAll() : selectGlobalAll();
     } else {
-      table.toggleAllRowsSelected(!isSelected);
+      isAllVisibleSelected ? unselectAll() : selectAll();
     }
-  }, [hasGlobalSelection, isGlobalAllSelected, selectGlobalAll, table, unselectGlobalAll]);
+  }, [hasGlobalSelection, isAllVisibleSelected, isGlobalAllSelected, selectAll, selectGlobalAll, unselectAll, unselectGlobalAll]);
   return selectionConfig ? /* @__PURE__ */ jsxs(Selection, { "data-popup-container": true, children: [
-    !hasSelectionLimit && /* @__PURE__ */ jsx(Tooltip, { title: selectionTooltipTitle, children: /* @__PURE__ */ jsx(SelectionCheckbox, { isOrphan: !selectionConfig.selections, disabled: disabledBulkSelection, "data-testid": "ds-table-batch-selection-button", checked: hasGlobalSelection ? isGlobalAllSelected : table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: handleBatchSelectionChange }) }),
+    !hasSelectionLimit && /* @__PURE__ */ jsx(SelectionCheckbox, { isOrphan: !selectionConfig.selections, disabled: disabledBulkSelection, "data-testid": "ds-table-batch-selection-button", tooltipProps: {
+      title: selectionTooltipTitle
+    }, checked: hasGlobalSelection ? isGlobalAllSelected : isAllVisibleSelected, indeterminate: isAnySelected, onChange: handleBatchSelectionChange }),
     selectionConfig.selections && /* @__PURE__ */ jsx(DropdownMenu, { disabled: disabledBulkSelection || dropdownDataSource?.length === 0, getPopupContainer: () => document.body, dataSource: dropdownDataSource || [], popoverProps: {
       testId: "table-selection"
     }, asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { isOrphan: !!hasSelectionLimit, disabled: disabledBulkSelection || dropdownDataSource?.length === 0, mode: "single-icon", type: "ghost", "data-testid": "ds-table-batch-selection-options", tooltipProps: {

package/dist/components/TableHeader/TableLimit/TableLimit.js

@@ -4,7 +4,8 @@ import { useDataFormat } from "@synerise/ds-core";
 import InlineAlert from "@synerise/ds-inline-alert";
 import { TableSkeleton } from "../../../Table.styles.js";
 import { useTableContext } from "../../../contexts/TableContext.js";
-import { Alert, Title, TableLimit as TableLimit$1, ItemsMenu } from "./TableLimit.styles.js";
+import { ItemsMenu } from "../../ItemsMenu/ItemsMenu.js";
+import { Alert, Title, TableLimit as TableLimit$1 } from "./TableLimit.styles.js";
 function TableLimit({
   texts,
   itemsMenu,
@@ -21,7 +22,7 @@ function TableLimit({
   const {
     limit
   } = selection;
-  const selectedRows = table.getSelectedRowModel().rows.length;
+  const selectedRows = Object.keys(table.getState().rowSelection).length;
   const total = table.getRowCount();
   const limitReachedInfo = useMemo(() => limit <= selectedRows && /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(InlineAlert, { type: "warning", message: texts.selectionLimitWarning }) }), [texts, selectedRows, limit]);
   const selected = useMemo(() => {
@@ -42,7 +43,7 @@ function TableLimit({
   return /* @__PURE__ */ jsxs(TableLimit$1, { children: [
     selected,
     limitReachedInfo,
-    selectedRows > 0 && /* @__PURE__ */ jsx(ItemsMenu, { children: itemsMenu })
+    selectedRows > 0 && /* @__PURE__ */ jsx(ItemsMenu, { withLeftPadding: true, children: itemsMenu })
   ] });
 }
 export {

package/dist/components/TableHeader/TableLimit/TableLimit.styles.d.ts

@@ -1,4 +1,3 @@
 export declare const TableLimit: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const Title: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const Alert: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const ItemsMenu: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/TableHeader/TableLimit/TableLimit.styles.js

@@ -12,13 +12,8 @@ const Alert = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TableLimitstyles__Alert",
   componentId: "sc-16p1ck3-2"
 })(["position:relative;padding-left:16px;margin-left:16px;&::before{position:absolute;top:4px;left:0;content:'';display:flex;width:1px;height:16px;background:", ";}"], (props) => props.theme.palette["grey-200"]);
-const ItemsMenu = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "TableLimitstyles__ItemsMenu",
-  componentId: "sc-16p1ck3-3"
-})(["padding-left:24px;"]);
 export {
   Alert,
-  ItemsMenu,
   TableLimit,
   Title
 };