@synerise/ds-table-new 0.1.0

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

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@synerise/ds-button";
+import Tooltip from "@synerise/ds-tooltip";
+import { useSelectionContext } from "../../../contexts/SelectionContext.js";
+import { useStickyContext } from "../../../contexts/StickyContext.js";
+import { useTableContext } from "../../../contexts/TableContext.js";
+const TableRowSelection = ({
+  texts,
+  row
+}) => {
+  const stickyContext = useStickyContext();
+  const {
+    table
+  } = useTableContext();
+  const selection = useSelectionContext();
+  const {
+    globalSelectionOnChange,
+    globalSelected,
+    limit
+  } = selection || {};
+  const isGlobalAllSelected = globalSelectionOnChange !== void 0 && globalSelected;
+  const isSelected = row.getIsSelected();
+  const isDisabled = !row.getCanSelect() || isGlobalAllSelected || limit && table.getSelectedRowModel().rows.length >= limit && !isSelected;
+  const toggleSelection = row.getToggleSelectedHandler();
+  const handleChange = (newValue) => {
+    stickyContext && stickyContext.setStickyData((prevValue) => ({
+      ...prevValue,
+      isRevealed: true
+    }));
+    toggleSelection(newValue);
+  };
+  const selectionTooltipProps = selection?.getSelectionTooltipProps?.(row.original);
+  return /* @__PURE__ */ jsx(Tooltip, { title: texts.selectRowTooltip, ...selectionTooltipProps || {}, children: /* @__PURE__ */ jsx(Checkbox, { "data-testid": "ds-table-selection-button", checked: isGlobalAllSelected || isSelected, disabled: !!isDisabled, indeterminate: row.getIsSomeSelected(), onClick: (event) => {
+    event.stopPropagation();
+  }, onChange: handleChange }) });
+};
+export {
+  TableRowSelection
+};

package/dist/components/TableColumns/TableColumnSorter/SortIcons/DefaultSortIcon.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { SortDirection } from '@tanstack/react-table';
+export declare const DefaultSortIcon: ({ sortDirection, }: {
+    sortDirection: SortDirection | false;
+}) => React.JSX.Element;

package/dist/components/TableColumns/TableColumnSorter/SortIcons/DefaultSortIcon.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { SortAscendingM, SortDescendingM, ArrangeM } from "@synerise/ds-icon";
+import { ASCENDING, DESCENDING } from "../TableColumnSorter.const.js";
+const DefaultSortIcon = ({
+  sortDirection
+}) => {
+  const theme = useTheme();
+  if (sortDirection === ASCENDING) {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortAscendingM, {}), color: theme.palette["gray-600"] });
+  }
+  if (sortDirection === DESCENDING) {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortDescendingM, {}), color: theme.palette["gray-600"] });
+  }
+  return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrangeM, {}), color: theme.palette["gray-600"] });
+};
+export {
+  DefaultSortIcon
+};

package/dist/components/TableColumns/TableColumnSorter/SortIcons/StringSortIcon.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { SortDirection } from '@tanstack/react-table';
+export declare const StringSortIcon: ({ sortDirection, }: {
+    sortDirection: SortDirection | false;
+}) => React.JSX.Element;

package/dist/components/TableColumns/TableColumnSorter/SortIcons/StringSortIcon.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { SortAzM, SortZaM, ArrangeM } from "@synerise/ds-icon";
+import { ASCENDING, DESCENDING } from "../TableColumnSorter.const.js";
+const StringSortIcon = ({
+  sortDirection
+}) => {
+  const theme = useTheme();
+  if (sortDirection === ASCENDING) {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortAzM, {}), color: theme.palette["gray-600"] });
+  }
+  if (sortDirection === DESCENDING) {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortZaM, {}), color: theme.palette["gray-600"] });
+  }
+  return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrangeM, {}), color: theme.palette["gray-600"] });
+};
+export {
+  StringSortIcon
+};

package/dist/components/TableColumns/TableColumnSorter/TableColumnSorter.const.d.ts

@@ -0,0 +1,4 @@
+import { SortDirection } from '@tanstack/react-table';
+export declare const ASCENDING: SortDirection;
+export declare const DESCENDING: SortDirection;
+export declare const STRING_SORTING_FN: string[];

package/dist/components/TableColumns/TableColumnSorter/TableColumnSorter.const.js

@@ -0,0 +1,8 @@
+const ASCENDING = "asc";
+const DESCENDING = "desc";
+const STRING_SORTING_FN = ["text", "alphanumeric", "alphanumericCaseSensitive", "textCaseSensitive"];
+export {
+  ASCENDING,
+  DESCENDING,
+  STRING_SORTING_FN
+};

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

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

package/dist/components/TableColumns/TableColumnSorter/TableColumnSorter.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { DropdownMenu } from "@synerise/ds-dropdown";
+import Icon, { SortZaM, SortAzM, SortDescendingM, SortAscendingM, Close2M } from "@synerise/ds-icon";
+import { getSortOrder } from "../../../utils/sort.js";
+import { DefaultSortIcon } from "./SortIcons/DefaultSortIcon.js";
+import { StringSortIcon } from "./SortIcons/StringSortIcon.js";
+import { DESCENDING, ASCENDING } from "./TableColumnSorter.const.js";
+import { ToggleButton } from "./TableColumnSorter.styles.js";
+const stopPropagation = (event) => event.stopPropagation();
+const TableColumnSorter = ({
+  column,
+  texts
+}) => {
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const sortOrder = getSortOrder(column);
+  const isStringSorter = column.columnDef.meta?.sortRender === "string";
+  const {
+    IconAscending,
+    IconDescending,
+    IconTrigger,
+    ascendingLabel,
+    descendingLabel
+  } = useMemo(() => isStringSorter ? {
+    IconAscending: SortAzM,
+    IconDescending: SortZaM,
+    IconTrigger: StringSortIcon,
+    ascendingLabel: texts.columnSortAz,
+    descendingLabel: texts.columnSortZa
+  } : {
+    IconAscending: SortAscendingM,
+    IconDescending: SortDescendingM,
+    IconTrigger: DefaultSortIcon,
+    ascendingLabel: texts.columnSortAscend,
+    descendingLabel: texts.columnSortDescend
+  }, [isStringSorter, texts.columnSortAscend, texts.columnSortAz, texts.columnSortDescend, texts.columnSortZa]);
+  const dropdownDataSource = [{
+    onClick: () => (
+      // TODO - use column.columnDef.meta.multipleSortingOrder to manage multisort
+      // currently it will prioritise last column sorted
+      column.toggleSorting(!ASCENDING, column.columnDef.enableMultiSort)
+    ),
+    prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(IconAscending, {}) }),
+    selected: sortOrder === ASCENDING,
+    text: ascendingLabel
+  }, {
+    key: DESCENDING,
+    prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(IconDescending, {}) }),
+    selected: sortOrder === DESCENDING,
+    onClick: () => (
+      // TODO - use column.columnDef.meta.multipleSortingOrder to manage multisort
+      // currently it will prioritise last column sorted
+      column.toggleSorting(true, column.columnDef.enableMultiSort)
+    ),
+    text: descendingLabel
+  }];
+  if (sortOrder) {
+    dropdownDataSource.push({
+      type: "danger",
+      prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close2M, {}) }),
+      text: texts.columnSortClear,
+      onClick: () => column.clearSorting()
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { onClick: stopPropagation, children: /* @__PURE__ */ jsx(DropdownMenu, { dataSource: dropdownDataSource, onOpenChange: (isVisible) => {
+    if (isVisible !== isDropdownVisible) {
+      setIsDropdownVisible(isVisible);
+    }
+  }, open: isDropdownVisible, popoverProps: {
+    testId: "table-sort-common"
+  }, children: /* @__PURE__ */ jsx(ToggleButton, { isVisible: isDropdownVisible, type: "ghost", mode: "single-icon", className: "ds-sort-dropdown-button", "data-testid": `table-${isStringSorter ? "string" : "common"}-sorter-button`, children: /* @__PURE__ */ jsx(IconTrigger, { sortDirection: sortOrder }) }) }) });
+};
+export {
+  TableColumnSorter
+};

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

@@ -0,0 +1,30 @@
+export declare const ToggleButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import('antd/lib/button/button').BaseButtonProps & Omit<import('react').AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import('react').ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
+    type?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonType>;
+    mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
+    iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import('@synerise/ds-tag').TagProps;
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+} & import('react').RefAttributes<HTMLButtonElement>> & {
+    Creator: import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import('@synerise/ds-button').ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import('@synerise/ds-button').StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement;
+}, any, {
+    isVisible: boolean;
+}, never>;

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

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const ToggleButton = /* @__PURE__ */ styled(Button).withConfig({
+  displayName: "TableColumnSorterstyles__ToggleButton",
+  componentId: "sc-1u6djvi-0"
+})(["", ";"], ({
+  isVisible
+}) => isVisible ? "opacity: 1 !important;" : "");
+export {
+  ToggleButton
+};

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

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

package/dist/components/TableColumns/TableColumns.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+import { useTableContext } from "../../contexts/TableContext.js";
+import { isSorted } from "../../utils/sort.js";
+import { TableColumnSorter } from "./TableColumnSorter/TableColumnSorter.js";
+import { THead, Tr, Th, HeaderWrapper, Label } from "./TableColumns.styles.js";
+const TableColumns = ({
+  texts,
+  disableColumnNamesLineBreak
+}) => {
+  const {
+    table
+  } = useTableContext();
+  const headerGroups = table.getHeaderGroups();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(THead, { role: "rowgroup", "data-testid": "ds-table-columns", children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Tr, { role: "row", children: headerGroup.headers.map((header, columnIndex) => {
+    const id = header.id;
+    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: [
+      /* @__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);
+  }) }, headerGroup.id)) }) });
+};
+export {
+  TableColumns
+};

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

@@ -0,0 +1,18 @@
+export declare const Th: import('styled-components').StyledComponent<"th", any, {
+    isSorted?: boolean;
+    hasSorter?: boolean;
+    headerIndex?: number;
+    isPinned?: "left" | "right" | false;
+    rightOffset?: number;
+    leftOffset?: number;
+}, 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 Label: import('styled-components').StyledComponent<"div", any, {
+    disableColumnNamesLineBreak?: boolean;
+}, never>;
+export declare const TableSkeletonCell: import('styled-components').StyledComponent<"div", any, {
+    $height?: number;
+    $width?: string;
+}, never>;

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

@@ -0,0 +1,35 @@
+import styled, { css } from "styled-components";
+import { commonCellStyles, commonPinnedStyles, commonRowStyles } from "../../Table.styles.js";
+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"]));
+const THead = /* @__PURE__ */ styled.thead.withConfig({
+  displayName: "TableColumnsstyles__THead",
+  componentId: "sc-k8z5d0-1"
+})([""]);
+const Tr = /* @__PURE__ */ styled.tr.withConfig({
+  displayName: "TableColumnsstyles__Tr",
+  componentId: "sc-k8z5d0-2"
+})(["", ""], commonRowStyles);
+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;"]);
+const Label = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableColumnsstyles__Label",
+  componentId: "sc-k8z5d0-4"
+})(["text-overflow:ellipsis;overflow:hidden;min-width:0;flex-grow:1;white-space:", ";"], (props) => props.disableColumnNamesLineBreak ? "nowrap" : "normal");
+const TableSkeletonCell = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableColumnsstyles__TableSkeletonCell",
+  componentId: "sc-k8z5d0-5"
+})(["display:flex;height:", ";width:", ";align-items:center;justify-content:flex-start;"], (props) => props.$height ? `${props.$height}px` : "auto", (props) => `${props.$width}` || "50%");
+export {
+  HeaderWrapper,
+  Label,
+  THead,
+  TableSkeletonCell,
+  Th,
+  Tr
+};

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TableCounterProps } from '../../../Table.types';
+export declare const TableCounter: <TData extends object, TValue>({ selectedItemsCount, texts, tableTotal, isCounterLoading, renderCustomCounter, }: TableCounterProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableHeader/TableCounter/TableCounter.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useDataFormat } from "@synerise/ds-core";
+import { TableSkeleton } from "../../../Table.styles.js";
+import { TableCounterWrapper } from "./TableCounter.styles.js";
+const TableCounter = ({
+  selectedItemsCount,
+  texts,
+  tableTotal,
+  isCounterLoading,
+  renderCustomCounter
+}) => {
+  const {
+    formatValue
+  } = useDataFormat();
+  const defaultCounterContent = useMemo(() => {
+    return /* @__PURE__ */ jsx(TableCounterWrapper, { children: selectedItemsCount ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("strong", { children: formatValue(selectedItemsCount) }),
+      " ",
+      /* @__PURE__ */ jsx("span", { children: texts.selected })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("strong", { children: formatValue(tableTotal) }),
+      /* @__PURE__ */ jsx("span", { children: texts.totalItems })
+    ] }) });
+  }, [selectedItemsCount, tableTotal, texts.totalItems, texts.selected]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isCounterLoading ? /* @__PURE__ */ jsx(TableSkeleton, { numberOfSkeletons: 1, size: "S", skeletonWidth: "100px" }) : /* @__PURE__ */ jsx(Fragment, { children: renderCustomCounter ? renderCustomCounter({
+    count: tableTotal,
+    content: defaultCounterContent
+  }) : defaultCounterContent }) });
+};
+export {
+  TableCounter
+};

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

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

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

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const TableCounterWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableCounterstyles__TableCounterWrapper",
+  componentId: "sc-1n4y5bp-0"
+})(["display:flex;align-items:center;gap:4px;"]);
+export {
+  TableCounterWrapper
+};

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

@@ -0,0 +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;

package/dist/components/TableHeader/TableHeader.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useMemo } from "react";
+import { useDataFormat } from "@synerise/ds-core";
+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 { TableCounter } from "./TableCounter/TableCounter.js";
+import { Left, TitleContainer, TitlePartEllipsis, TitleSeparator, TitlePart, Header, Right, RightSideWrapper } from "./TableHeader.styles.js";
+import { TableHeaderSelection } from "./TableHeaderSelection/TableHeaderSelection.js";
+import { TableLimit } from "./TableLimit/TableLimit.js";
+const TableHeader = ({
+  title,
+  //   filters,
+  searchComponent,
+  filterComponent,
+  itemsMenu,
+  isCounterLoading,
+  headerButton,
+  texts,
+  renderSelectionTitle,
+  renderCustomCounter,
+  hideTitlePart,
+  dataSourceTotalCount,
+  isLoading
+}) => {
+  const {
+    formatValue
+  } = useDataFormat();
+  const {
+    table,
+    rowVirtualizer
+  } = useTableContext();
+  const stickyContext = useStickyContext();
+  const headerRef = useRef(null);
+  const selectionConfig = useSelectionContext();
+  const hasGlobalSelection = selectionConfig?.globalSelectionOnChange !== void 0;
+  const isGlobalSelected = hasGlobalSelection && selectionConfig?.globalSelected;
+  useEffect(() => {
+    if (stickyContext && headerRef.current) {
+      const {
+        setStickyData
+      } = stickyContext;
+      setStickyData((prevValue) => ({
+        ...prevValue,
+        titleBarHeight: headerRef.current ? headerRef.current.clientHeight + BOTTOM_BORDER_WIDTH : 0
+      }));
+    }
+  }, []);
+  const selectedItemsCount = table.getSelectedRowModel().rows.length;
+  const tableTotal = dataSourceTotalCount ?? table.getRowCount();
+  const displayedSelectedItems = isGlobalSelected ? tableTotal : selectedItemsCount;
+  const hasSelectedItems = useMemo(() => selectedItemsCount > 0 || isGlobalSelected, [isGlobalSelected, selectedItemsCount]);
+  const renderLeftSide = useMemo(() => {
+    const {
+      hideSelectAll
+    } = selectionConfig || {};
+    if (selectionConfig && selectionConfig.limit) {
+      return /* @__PURE__ */ jsxs(Left, { "data-testid": "ds-table-selection", children: [
+        selectionConfig && !hideSelectAll && /* @__PURE__ */ jsx(TableHeaderSelection, { texts }),
+        /* @__PURE__ */ jsx(TableLimit, { selection: {
+          ...selectionConfig,
+          limit: selectionConfig.limit
+        }, itemsMenu, texts, renderCustomCounter, isCounterLoading })
+      ] });
+    }
+    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
+    ] }) : /* @__PURE__ */ jsxs(Left, { "data-testid": "ds-table-title", children: [
+      selectionConfig && !isLoading && !hideSelectAll && /* @__PURE__ */ jsx(TableHeaderSelection, { texts }),
+      /* @__PURE__ */ jsxs(TitleContainer, { children: [
+        isLoading && /* @__PURE__ */ jsx("div", { style: {
+          width: "100px"
+        }, children: /* @__PURE__ */ jsx(TableSkeleton, { width: "L", numberOfSkeletons: 1, skeletonWidth: "100px" }) }),
+        !isLoading && title && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TitlePartEllipsis, { ellipsis: {
+            tooltipProps: {
+              description: /* @__PURE__ */ jsx(Fragment, { children: title }),
+              type: "largeSimple",
+              offset: "small"
+            }
+          }, children: /* @__PURE__ */ jsx(Fragment, { children: title }) }),
+          !hideTitlePart && /* @__PURE__ */ jsx(TitleSeparator, {})
+        ] }),
+        !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]);
+  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 })
+    ] })
+  ] });
+};
+export {
+  TableHeader
+};

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

@@ -0,0 +1,18 @@
+import { StickyData } from '../../Table.types';
+export declare const Header: import('styled-components').StyledComponent<"div", any, {
+    stickyData?: StickyData;
+    isVirtual?: boolean;
+}, never>;
+export declare const TitleContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TitlePartEllipsis: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
+    className?: string;
+    style?: import('react').CSSProperties;
+}) => React.JSX.Element, any, {}, never>;
+export declare const TitlePart: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const TitleSeparator: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Left: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Right: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RightSideWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,48 @@
+import styled, { css } from "styled-components";
+import { macro, Text } from "@synerise/ds-typography";
+const Header = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHeaderstyles__Header",
+  componentId: "sc-2szivb-0"
+})(["background:", ";padding:20px 24px;", " display:flex;border-radius:3px 3px 0 0;justify-content:space-between;border-bottom:1px solid ", ";", ""], (props) => props.theme.palette["white"], (props) => props.isVirtual && `min-height: 73px;`, (props) => props.theme.palette["grey-200"], ({
+  stickyData
+}) => stickyData && css(["transition:top 0.3s ease-in-out;position:sticky;top:", ";z-index:12;"], stickyData.isRevealed ? `-${stickyData.containerPaddingTop}px` : `-${stickyData.titleBarHeight + stickyData.containerPaddingTop}px`));
+const TitleContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHeaderstyles__TitleContainer",
+  componentId: "sc-2szivb-1"
+})(["display:flex;max-width:100%;min-width:0;align-items:center;", ";color:", ";padding:0 24px 0 0;strong{font-weight:500;}"], macro.small, (props) => props.theme.palette["grey-700"]);
+const TitlePartEllipsis = /* @__PURE__ */ styled(Text).withConfig({
+  displayName: "TableHeaderstyles__TitlePartEllipsis",
+  componentId: "sc-2szivb-2"
+})(["font-weight:500;"]);
+const TitlePart = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "TableHeaderstyles__TitlePart",
+  componentId: "sc-2szivb-3"
+})(["display:flex;align-items:center;gap:4px;"]);
+const TitleSeparator = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "TableHeaderstyles__TitleSeparator",
+  componentId: "sc-2szivb-4"
+})(["display:inline-block;vertical-align:middle;flex-shrink:0;width:1px;height:16px;margin:1px 12px 0px 12px;background:", ";"], ({
+  theme
+}) => theme.palette["grey-200"]);
+const Left = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHeaderstyles__Left",
+  componentId: "sc-2szivb-5"
+})(["display:flex;align-items:center;min-width:0;"]);
+const Right = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHeaderstyles__Right",
+  componentId: "sc-2szivb-6"
+})(["display:flex;align-items:center;justify-content:flex-start;gap:8px;> *{min-width:32px;}&&& .ds-button.btn-search{min-width:unset;}"]);
+const RightSideWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHeaderstyles__RightSideWrapper",
+  componentId: "sc-2szivb-7"
+})([""]);
+export {
+  Header,
+  Left,
+  Right,
+  RightSideWrapper,
+  TitleContainer,
+  TitlePart,
+  TitlePartEllipsis,
+  TitleSeparator
+};

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

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