@synerise/ds-table 1.4.3 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/Cell/AvatarLabel/AvatarLabel.styles.d.ts +7 -8
  3. package/dist/Cell/IconLabel/IconLabel.styles.d.ts +1 -1
  4. package/dist/Cell/IconTooltipCell/IconTooltipCell.styles.d.ts +1 -1
  5. package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.types.d.ts +1 -1
  6. package/dist/Cell/LabelsWithShowMore/Modal/Modal.d.ts +1 -1
  7. package/dist/Cell/LabelsWithShowMore/Modal/Modal.js +6 -6
  8. package/dist/Cell/LabelsWithShowMore/Modal/Modal.types.d.ts +3 -2
  9. package/dist/Cell/Star/StarCell.d.ts +91 -91
  10. package/dist/Cell/Star/StarCell.js +3 -2
  11. package/dist/Cell/Star/StarCell.styles.d.ts +3 -4
  12. package/dist/Cell/Star/StarCell.types.d.ts +2 -1
  13. package/dist/Cell/TagIcon/TagIcon.styles.d.ts +1 -1
  14. package/dist/ColumnSortMenu/columnWithSortButtons.d.ts +1 -1
  15. package/dist/ColumnSortMenu/groupedColumnsSort.d.ts +2 -2
  16. package/dist/DefaultTable/DefaultTable.js +2 -0
  17. package/dist/FilterTrigger/FilterTrigger.styles.d.ts +2 -3
  18. package/dist/GroupTable/GroupTable.styles.d.ts +3 -3
  19. package/dist/GroupTable/GroupTableBody/GroupTableBody.d.ts +0 -1
  20. package/dist/GroupTable/GroupTableHeader/GroupTableHeader.d.ts +0 -1
  21. package/dist/InfiniteScroll/BackToTopButton.styles.d.ts +2 -2
  22. package/dist/InfiniteScroll/InfiniteLoaderItem.styles.d.ts +1 -2
  23. package/dist/InfiniteScroll/utils.d.ts +1 -12
  24. package/dist/RowSelection/RowSelectionColumn.d.ts +1 -1
  25. package/dist/RowSelection/RowSelectionColumn.js +5 -3
  26. package/dist/RowSelection/RowSelectionColumn.types.d.ts +2 -1
  27. package/dist/Table.js +4 -2
  28. package/dist/Table.styles.d.ts +13 -14
  29. package/dist/Table.styles.js +1 -1
  30. package/dist/Table.types.d.ts +19 -0
  31. package/dist/TableHeader/TableHeader.d.ts +1 -1
  32. package/dist/TableHeader/TableHeader.js +22 -5
  33. package/dist/TableHeader/TableHeader.types.d.ts +3 -2
  34. package/dist/TableHeader/TableLimit/TableLimit.d.ts +1 -1
  35. package/dist/TableHeader/TableLimit/TableLimit.js +8 -3
  36. package/dist/TableHeader/TableLimit/TableLimit.types.d.ts +2 -1
  37. package/dist/TableHeader/TableSelection.d.ts +1 -1
  38. package/dist/TableHeader/TableSelection.js +32 -7
  39. package/dist/TableHeader/TableSelection.types.d.ts +2 -2
  40. package/dist/VirtualTable/VirtualTable.js +4 -2
  41. package/dist/VirtualTable/VirtualTable.styles.d.ts +2 -3
  42. package/dist/utils/getChildrenColumnName.d.ts +1 -1
  43. package/dist/utils/getRecordSelectionStatus.d.ts +1 -4
  44. package/dist/utils/getSkeletonProps.d.ts +1 -6
  45. package/dist/utils/getValueFromPath.d.ts +1 -1
  46. package/dist/utils/isGrouped.d.ts +1 -1
  47. package/dist/utils/isRecordSelectable.d.ts +1 -4
  48. package/dist/utils/locale.d.ts +0 -1
  49. package/dist/utils/locale.js +9 -1
  50. package/package.json +27 -27
@@ -1,16 +1,15 @@
1
- /// <reference types="react" />
2
1
  import Menu from '@synerise/ds-menu';
3
2
  export declare const Header: import("styled-components").StyledComponent<"div", any, {
4
- withBorderTop?: boolean | undefined;
3
+ withBorderTop?: boolean;
5
4
  }, never>;
6
5
  export declare const Size: import("styled-components").StyledComponent<"div", any, {}, never>;
7
6
  export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
8
7
  export declare const TitlePartEllipsis: import("styled-components").StyledComponent<({ size, className, children, ellipsis, }: {
9
- size?: import("@synerise/ds-typography").TextSize | undefined;
10
- ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
8
+ size?: import("@synerise/ds-typography").TextSize;
9
+ ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
11
10
  children?: import("react").ReactNode;
12
- className?: string | undefined;
13
- }) => import("react").JSX.Element, any, {}, never>;
11
+ className?: string;
12
+ }) => React.JSX.Element, any, {}, never>;
14
13
  export declare const TitlePart: import("styled-components").StyledComponent<"span", any, {}, never>;
15
14
  export declare const TitleSeparator: import("styled-components").StyledComponent<"span", any, {}, never>;
16
15
  export declare const Left: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -18,23 +17,23 @@ export declare const Right: import("styled-components").StyledComponent<"div", a
18
17
  export declare const RightSideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
19
18
  export declare const Icon: import("styled-components").StyledComponent<"div", any, {}, never>;
20
19
  export declare const Input: import("styled-components").StyledComponent<"div", any, {
21
- isOpen?: boolean | undefined;
20
+ isOpen?: boolean;
22
21
  }, never>;
23
22
  export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
24
- isOpen?: boolean | undefined;
23
+ isOpen?: boolean;
25
24
  searchValue: string | undefined;
26
25
  }, never>;
27
26
  export declare const Selection: import("styled-components").StyledComponent<"div", any, {}, never>;
28
27
  export declare const SelectionMenu: import("styled-components").StyledComponent<typeof Menu, any, {}, never>;
29
28
  export declare const Spinner: import("styled-components").StyledComponent<"div", any, {}, never>;
30
29
  export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, {
31
- hideColumnNames?: boolean | undefined;
32
- disableColumnNamesLineBreak?: boolean | undefined;
30
+ hideColumnNames?: boolean;
31
+ disableColumnNamesLineBreak?: boolean;
33
32
  }, never>;
34
- export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {
35
- skeletonWidth?: string | undefined;
33
+ export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => React.JSX.Element, any, {
34
+ skeletonWidth?: string;
36
35
  }, never>;
37
36
  export declare const TableSkeletonCell: import("styled-components").StyledComponent<"div", any, {
38
- height?: number | undefined;
39
- width?: string | undefined;
37
+ height?: number;
38
+ width?: string;
40
39
  }, never>;
@@ -19,7 +19,7 @@ export var Size = styled.div.withConfig({
19
19
  export var TitleContainer = styled.div.withConfig({
20
20
  displayName: "Tablestyles__TitleContainer",
21
21
  componentId: "sc-dacfhr-2"
22
- })(["display:flex;max-width:100%;min-width:0;", ";color:", ";padding:0 24px 0 0;strong{font-weight:500;}"], macro.small, function (props) {
22
+ })(["display:flex;max-width:100%;min-width:0;align-items:center;", ";color:", ";padding:0 24px 0 0;strong{font-weight:500;}"], macro.small, function (props) {
23
23
  return props.theme.palette['grey-700'];
24
24
  });
25
25
  export var TitlePartEllipsis = styled(Text).withConfig({
@@ -18,6 +18,17 @@ export type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> & {
18
18
  fixed?: boolean;
19
19
  selectedRowKeys: Key[];
20
20
  selections?: SelectionItem[];
21
+ /**
22
+ * @param globalSelection
23
+ * @description for paginated tables or tables with infinite loader - allows setting all items (even ones not loaded yet) as selected.
24
+ * This will NOT provide ketys of selected rows (as those are unknown), only a boolean flag that can be used for batch actions on the entire set
25
+ * Adding this prop will render additional items in the selection dropdown, in the table header.
26
+ * Labels for this prop should be provided via `locale` prop
27
+ */
28
+ globalSelection?: {
29
+ isSelected: boolean;
30
+ onChange: (selected: boolean) => void;
31
+ };
21
32
  onChange: (selectedRowKeys: Key[], selectedRows: T[]) => void;
22
33
  limit?: number;
23
34
  independentSelectionExpandedRows?: boolean;
@@ -58,6 +69,7 @@ export type Locale = TableLocale & {
58
69
  };
59
70
  selectRowTooltip?: string;
60
71
  selectVisible?: string;
72
+ selectGlobalAll?: string;
61
73
  selectAllTooltip?: string;
62
74
  starRowTooltip?: string;
63
75
  selectionOptionsTooltip?: string;
@@ -72,6 +84,7 @@ export type Locale = TableLocale & {
72
84
  infiniteScrollLoading?: string;
73
85
  infiniteScrollBackToTop?: string;
74
86
  unselectAll?: string;
87
+ unselectGlobalAll?: string;
75
88
  };
76
89
  export type DSColumnType<T> = Omit<ColumnType<T>, 'fixed'> & {
77
90
  fixed?: 'left' | 'right';
@@ -98,6 +111,11 @@ export type SingleColumnSort = {
98
111
  order: ColumnSortOrder;
99
112
  };
100
113
  export type OnSortFn = (singleColumnSort: SingleColumnSort, sortState: ColumnsSortState) => void;
114
+ export type CustomCounterArgs = {
115
+ count: number;
116
+ content: ReactNode;
117
+ };
118
+ export type CustomCounterFn = (props: CustomCounterArgs) => ReactNode;
101
119
  export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
102
120
  title?: ReactNode | (() => ReactNode);
103
121
  hideTitleBar?: boolean;
@@ -128,6 +146,7 @@ export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
128
146
  dataSourceFull?: T[];
129
147
  dataSourceTotalCount?: number;
130
148
  isCounterLoading?: boolean;
149
+ renderCustomCounter?: CustomCounterFn;
131
150
  skeletonProps?: {
132
151
  maxHeight?: number;
133
152
  headerHeight?: number;
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { type Props } from './TableHeader.types';
3
- declare const TableHeader: <T extends object>({ title, filters, searchComponent, filterComponent, selectedRows, itemsMenu, selection, dataSource, dataSourceFull, dataSourceTotalCount, isCounterLoading, rowKey, withBorderTop, headerButton, locale, renderSelectionTitle, hideTitlePart, childrenColumnName, isLoading, }: Props<T>) => React.JSX.Element;
3
+ declare const TableHeader: <T extends object>({ title, filters, searchComponent, filterComponent, selectedRows, itemsMenu, selection, dataSource, dataSourceFull, dataSourceTotalCount, isCounterLoading, rowKey, withBorderTop, headerButton, locale, renderSelectionTitle, renderCustomCounter, hideTitlePart, childrenColumnName, isLoading, }: Props<T>) => React.JSX.Element;
4
4
  export default TableHeader;
@@ -6,6 +6,7 @@ import * as S from '../Table.styles';
6
6
  import { TableLimit } from './TableLimit';
7
7
  import TableSelection from './TableSelection';
8
8
  var TableHeader = function TableHeader(_ref) {
9
+ var _selection$globalSele2;
9
10
  var title = _ref.title,
10
11
  filters = _ref.filters,
11
12
  searchComponent = _ref.searchComponent,
@@ -23,13 +24,19 @@ var TableHeader = function TableHeader(_ref) {
23
24
  headerButton = _ref.headerButton,
24
25
  locale = _ref.locale,
25
26
  renderSelectionTitle = _ref.renderSelectionTitle,
27
+ renderCustomCounter = _ref.renderCustomCounter,
26
28
  hideTitlePart = _ref.hideTitlePart,
27
29
  childrenColumnName = _ref.childrenColumnName,
28
30
  isLoading = _ref.isLoading;
29
31
  var _useDataFormat = useDataFormat(),
30
32
  formatValue = _useDataFormat.formatValue;
33
+ var hasSelectedItems = useMemo(function () {
34
+ var _selection$globalSele;
35
+ return selectedRows && selectedRows > 0 || (selection == null || (_selection$globalSele = selection.globalSelection) == null ? void 0 : _selection$globalSele.isSelected);
36
+ }, [selectedRows, selection == null || (_selection$globalSele2 = selection.globalSelection) == null ? void 0 : _selection$globalSele2.isSelected]);
31
37
  var renderLeftSide = useMemo(function () {
32
38
  var _locale$pagination;
39
+ var tableTotal = dataSourceTotalCount || dataSource.length;
33
40
  var _ref2 = selection || {},
34
41
  hideSelectAll = _ref2.hideSelectAll;
35
42
  if (selection && selection.limit) {
@@ -44,16 +51,19 @@ var TableHeader = function TableHeader(_ref) {
44
51
  hasSelectionLimit: true,
45
52
  childrenColumnName: childrenColumnName
46
53
  }), /*#__PURE__*/React.createElement(TableLimit, {
47
- total: dataSourceTotalCount || dataSource.length,
54
+ total: tableTotal,
48
55
  selection: _extends({}, selection, {
49
56
  limit: selection.limit
50
57
  }),
51
58
  itemsMenu: itemsMenu,
52
59
  locale: locale,
60
+ renderCustomCounter: renderCustomCounter,
53
61
  isCounterLoading: isCounterLoading
54
62
  }));
55
63
  }
56
- return selectedRows && selectedRows > 0 ? /*#__PURE__*/React.createElement(S.Left, {
64
+ var selectedItemsCount = selectedRows || tableTotal;
65
+ var counterContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, formatValue(tableTotal)), /*#__PURE__*/React.createElement("span", null, locale == null || (_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items));
66
+ return hasSelectedItems ? /*#__PURE__*/React.createElement(S.Left, {
57
67
  "data-testid": "ds-table-selection"
58
68
  }, selection && !hideSelectAll && /*#__PURE__*/React.createElement(TableSelection, {
59
69
  rowKey: rowKey,
@@ -62,7 +72,11 @@ var TableHeader = function TableHeader(_ref) {
62
72
  selection: selection,
63
73
  locale: locale,
64
74
  childrenColumnName: childrenColumnName
65
- }), renderSelectionTitle ? /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectionTitle(selection, filters)) : /*#__PURE__*/React.createElement(S.TitleContainer, null, /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), ' ', /*#__PURE__*/React.createElement("span", null, locale.selected))), itemsMenu) : /*#__PURE__*/React.createElement(S.Left, {
75
+ }), renderSelectionTitle ? /*#__PURE__*/React.createElement(React.Fragment, null, renderSelectionTitle(selection, filters)) : /*#__PURE__*/React.createElement(S.TitleContainer, null, isCounterLoading ? /*#__PURE__*/React.createElement(S.Skeleton, {
76
+ numberOfSkeletons: 1,
77
+ size: "S",
78
+ skeletonWidth: "100px"
79
+ }) : /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedItemsCount)), ' ', /*#__PURE__*/React.createElement("span", null, locale.selected))), itemsMenu) : /*#__PURE__*/React.createElement(S.Left, {
66
80
  "data-testid": "ds-table-title"
67
81
  }, selection && !isLoading && !hideSelectAll && /*#__PURE__*/React.createElement(TableSelection, {
68
82
  rowKey: rowKey,
@@ -92,8 +106,11 @@ var TableHeader = function TableHeader(_ref) {
92
106
  numberOfSkeletons: 1,
93
107
  size: "S",
94
108
  skeletonWidth: "100px"
95
- }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSourceTotalCount || dataSource.length)), /*#__PURE__*/React.createElement("span", null, locale == null || (_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items)))));
96
- }, [selection, dataSourceTotalCount, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, isCounterLoading, childrenColumnName, renderSelectionTitle, filters, formatValue, title, hideTitlePart, isLoading]);
109
+ }) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCustomCounter ? renderCustomCounter({
110
+ count: tableTotal,
111
+ content: counterContent
112
+ }) : counterContent))));
113
+ }, [selection, selectedRows, dataSourceTotalCount, dataSource, hasSelectedItems, rowKey, dataSourceFull, locale, childrenColumnName, renderSelectionTitle, filters, isCounterLoading, renderCustomCounter, formatValue, itemsMenu, isLoading, title, hideTitlePart]);
97
114
  return /*#__PURE__*/React.createElement(S.Header, {
98
115
  withBorderTop: withBorderTop
99
116
  }, renderLeftSide, /*#__PURE__*/React.createElement(S.Right, null, headerButton, filters == null ? void 0 : filters.map(function (filter) {
@@ -1,5 +1,5 @@
1
1
  import { type ReactNode } from 'react';
2
- import { type Filter, type Locale, type RowSelection } from '../Table.types';
2
+ import { type CustomCounterFn, type Filter, type Locale, type RowSelection } from '../Table.types';
3
3
  export type Props<T extends object> = {
4
4
  title?: ReactNode | (() => ReactNode);
5
5
  filters?: Filter[];
@@ -17,7 +17,8 @@ export type Props<T extends object> = {
17
17
  locale: Locale;
18
18
  renderSelectionTitle?: (selection?: RowSelection<T>, filters?: Filter[]) => ReactNode;
19
19
  hideTitlePart?: boolean;
20
+ renderCustomCounter?: CustomCounterFn;
20
21
  dataSourceTotalCount?: number;
21
- childrenColumnName: string;
22
+ childrenColumnName: keyof T;
22
23
  isLoading?: boolean;
23
24
  };
@@ -2,4 +2,4 @@ import React from 'react';
2
2
  import { type TableLimitProps } from './TableLimit.types';
3
3
  export declare function TableLimit<T extends {
4
4
  children?: T[];
5
- }>({ total, locale, itemsMenu, selection, isCounterLoading, }: TableLimitProps<T>): React.JSX.Element;
5
+ }>({ total, locale, itemsMenu, selection, isCounterLoading, renderCustomCounter, }: TableLimitProps<T>): React.JSX.Element;
@@ -8,7 +8,8 @@ export function TableLimit(_ref) {
8
8
  locale = _ref.locale,
9
9
  itemsMenu = _ref.itemsMenu,
10
10
  selection = _ref.selection,
11
- isCounterLoading = _ref.isCounterLoading;
11
+ isCounterLoading = _ref.isCounterLoading,
12
+ renderCustomCounter = _ref.renderCustomCounter;
12
13
  var _useDataFormat = useDataFormat(),
13
14
  formatValue = _useDataFormat.formatValue;
14
15
  var selectedRowKeys = selection.selectedRowKeys,
@@ -24,11 +25,15 @@ export function TableLimit(_ref) {
24
25
  }, [locale, selectedRows, limit]);
25
26
  var selected = useMemo(function () {
26
27
  var _locale$pagination;
28
+ var counterContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, formatValue(total)), " ", (_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items);
27
29
  return selectedRows > 0 ? /*#__PURE__*/React.createElement(S.Title, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows) + " / " + formatValue(limit)), ' ', locale.selected) : /*#__PURE__*/React.createElement(S.Title, null, isCounterLoading ? /*#__PURE__*/React.createElement(Skeleton, {
28
30
  numberOfSkeletons: 1,
29
31
  size: "S",
30
32
  skeletonWidth: "100px"
31
- }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, formatValue(total)), " ", (_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items));
32
- }, [formatValue, limit, locale.pagination, locale.selected, isCounterLoading, selectedRows, total]);
33
+ }) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCustomCounter ? renderCustomCounter({
34
+ count: total,
35
+ content: counterContent
36
+ }) : counterContent));
37
+ }, [formatValue, renderCustomCounter, limit, locale.pagination, locale.selected, isCounterLoading, selectedRows, total]);
33
38
  return /*#__PURE__*/React.createElement(S.TableLimit, null, selected, limitReachedInfo, selectedRows > 0 && /*#__PURE__*/React.createElement(S.ItemsMenu, null, itemsMenu));
34
39
  }
@@ -1,10 +1,11 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import type { RequiredProps } from '@synerise/ds-utils';
3
- import { type Locale, type RowSelection } from '../../Table.types';
3
+ import { type CustomCounterFn, type Locale, type RowSelection } from '../../Table.types';
4
4
  export type TableLimitProps<T extends object> = {
5
5
  selection: RequiredProps<RowSelection<T>, 'limit'>;
6
6
  total: number;
7
7
  itemsMenu: ReactNode;
8
8
  locale: Locale;
9
9
  isCounterLoading?: boolean;
10
+ renderCustomCounter?: CustomCounterFn;
10
11
  };
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { TableSelectionProps } from './TableSelection.types';
3
3
  declare const TableSelection: <T extends {
4
- children?: T[] | undefined;
4
+ children?: T[];
5
5
  }>({ dataSource, dataSourceFull, selection, rowKey, locale, hasSelectionLimit, childrenColumnName, }: TableSelectionProps<T>) => React.JSX.Element | null;
6
6
  export default TableSelection;
@@ -10,6 +10,7 @@ import { useBulkSelectionCount } from '../hooks/useBulkSelection';
10
10
  import { useRowKey } from '../hooks/useRowKey';
11
11
  import { isRecordSelectable } from '../utils';
12
12
  var TableSelection = function TableSelection(_ref) {
13
+ var _selection$globalSele5;
13
14
  var dataSource = _ref.dataSource,
14
15
  dataSourceFull = _ref.dataSourceFull,
15
16
  selection = _ref.selection,
@@ -47,6 +48,7 @@ var TableSelection = function TableSelection(_ref) {
47
48
  }, [allData, getRowKey, selection, childrenColumnName]);
48
49
  var selectAll = useCallback(function () {
49
50
  if (dataSource && selection) {
51
+ var _selection$globalSele;
50
52
  var selectedRowKeys = selection.selectedRowKeys,
51
53
  checkRowSelectionStatus = selection.checkRowSelectionStatus;
52
54
  var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
@@ -65,6 +67,7 @@ var TableSelection = function TableSelection(_ref) {
65
67
  });
66
68
  var uniqueKeys = Array.from(new Set(keys));
67
69
  var rows = getRowsForKeys(uniqueKeys);
70
+ (_selection$globalSele = selection.globalSelection) == null || _selection$globalSele.onChange(false);
68
71
  selection.onChange(uniqueKeys, rows);
69
72
  }
70
73
  }, [childrenColumnName, dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey]);
@@ -93,6 +96,15 @@ var TableSelection = function TableSelection(_ref) {
93
96
  selection.onChange(keysLeft, rows);
94
97
  }
95
98
  }, [dataSource, getRowKey, getRowsForKeys, selection, childrenColumnName]);
99
+ var selectGlobalAll = useCallback(function () {
100
+ var _selection$globalSele2;
101
+ unselectAll();
102
+ (_selection$globalSele2 = selection.globalSelection) == null || _selection$globalSele2.onChange(true);
103
+ }, [unselectAll, selection.globalSelection]);
104
+ var unselectGlobalAll = useCallback(function () {
105
+ var _selection$globalSele3;
106
+ (_selection$globalSele3 = selection.globalSelection) == null || _selection$globalSele3.onChange(false);
107
+ }, [selection.globalSelection]);
96
108
  var getSelectableChildren = useCallback(function (children) {
97
109
  var selectionStatusValidator = (selection == null ? void 0 : selection.checkRowSelectionStatus) || undefined;
98
110
  return children ? children.filter(function (child) {
@@ -151,8 +163,16 @@ var TableSelection = function TableSelection(_ref) {
151
163
  var isAnySelected = allRecordsCount > 0 && selectedRecordsCount > 0;
152
164
  var selectionTooltipTitle = !isAllSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
153
165
  var menuDataSource = useMemo(function () {
154
- var _selection$selections;
155
- return selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean).flatMap(function (selectionMenuElement) {
166
+ var _selection$globalSele4, _selection$selections;
167
+ var isGlobalAllSelected = (_selection$globalSele4 = selection.globalSelection) == null ? void 0 : _selection$globalSele4.isSelected;
168
+ var globalSelectionItem = selection.globalSelection ? [isGlobalAllSelected ? {
169
+ onClick: unselectGlobalAll,
170
+ text: locale == null ? void 0 : locale.unselectGlobalAll
171
+ } : {
172
+ onClick: selectGlobalAll,
173
+ text: locale == null ? void 0 : locale.selectGlobalAll
174
+ }] : [];
175
+ var menuItems = selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean).flatMap(function (selectionMenuElement) {
156
176
  switch (selectionMenuElement) {
157
177
  case SELECTION_ALL:
158
178
  {
@@ -187,7 +207,8 @@ var TableSelection = function TableSelection(_ref) {
187
207
  }
188
208
  }
189
209
  });
190
- }, [isAllSelected, locale == null ? void 0 : locale.selectAll, locale == null ? void 0 : locale.selectInvert, locale == null ? void 0 : locale.unselectAll, selectAll, selectInvert, selection == null ? void 0 : selection.selections, unselectAll, isAnySelected, hasSelectionLimit]);
210
+ return [].concat(globalSelectionItem, menuItems || []);
211
+ }, [selection.globalSelection, selection == null ? void 0 : selection.selections, unselectGlobalAll, locale == null ? void 0 : locale.unselectGlobalAll, locale == null ? void 0 : locale.selectGlobalAll, locale == null ? void 0 : locale.selectAll, locale == null ? void 0 : locale.unselectAll, locale == null ? void 0 : locale.selectInvert, selectGlobalAll, isAllSelected, hasSelectionLimit, isAnySelected, selectAll, unselectAll, selectInvert]);
191
212
  return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
192
213
  "data-popup-container": true
193
214
  }, !hasSelectionLimit && /*#__PURE__*/React.createElement(Tooltip, {
@@ -195,16 +216,19 @@ var TableSelection = function TableSelection(_ref) {
195
216
  }, /*#__PURE__*/React.createElement(Button.Checkbox, {
196
217
  disabled: disabledBulkSelection,
197
218
  "data-testid": "ds-table-batch-selection-button",
198
- checked: isAllSelected,
219
+ checked: isAllSelected || ((_selection$globalSele5 = selection.globalSelection) == null ? void 0 : _selection$globalSele5.isSelected),
199
220
  onChange: function onChange() {
200
- if (!isAllSelected) {
221
+ var _selection$globalSele6;
222
+ if ((_selection$globalSele6 = selection.globalSelection) != null && _selection$globalSele6.isSelected) {
223
+ unselectGlobalAll();
224
+ } else if (!isAllSelected) {
201
225
  selectAll();
202
226
  } else {
203
227
  unselectAll();
204
228
  }
205
229
  },
206
230
  indeterminate: isIndeterminate
207
- })), (selection == null ? void 0 : selection.selections) && /*#__PURE__*/React.createElement(Dropdown, {
231
+ })), (selection.selections || (menuDataSource == null ? void 0 : menuDataSource.length)) && /*#__PURE__*/React.createElement(Dropdown, {
208
232
  disabled: disabledBulkSelection || (menuDataSource == null ? void 0 : menuDataSource.length) === 0,
209
233
  trigger: ['click'],
210
234
  overlay: /*#__PURE__*/React.createElement(S.SelectionMenu, {
@@ -216,7 +240,8 @@ var TableSelection = function TableSelection(_ref) {
216
240
  }, /*#__PURE__*/React.createElement(Button, {
217
241
  disabled: disabledBulkSelection || (menuDataSource == null ? void 0 : menuDataSource.length) === 0,
218
242
  mode: "single-icon",
219
- type: "ghost"
243
+ type: "ghost",
244
+ "data-testid": "ds-table-batch-selection-options"
220
245
  }, /*#__PURE__*/React.createElement(Icon, {
221
246
  component: /*#__PURE__*/React.createElement(OptionVerticalM, null)
222
247
  }))))) : null;
@@ -1,11 +1,11 @@
1
1
  import type { Locale, RowSelection } from '../Table.types';
2
2
  export type TableSelectionProps<T extends object> = {
3
- selection?: RowSelection<T>;
3
+ selection: RowSelection<T>;
4
4
  dataSource: readonly T[];
5
5
  dataSourceFull?: T[];
6
6
  locale?: Locale;
7
7
  rowKey?: Function | string;
8
- childrenColumnName: string;
8
+ childrenColumnName: keyof T;
9
9
  hasSelectionLimit?: boolean;
10
10
  };
11
11
  /**
@@ -73,7 +73,6 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
73
73
  if (prevFirstItemIndex >= 0 && listRef != null && listRef.current) {
74
74
  if (onScrollToRecordIndex) {
75
75
  onScrollToRecordIndex(prevFirstItemIndex, function () {
76
- // error Expected an assignment or function call and instead saw an expression
77
76
  (listRef == null ? void 0 : listRef.current) && listRef.current.scrollToItem(prevFirstItemIndex, 'start');
78
77
  });
79
78
  } else {
@@ -173,7 +172,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
173
172
  var selectedRecords = useMemo(function () {
174
173
  if (selection) {
175
174
  var _ref = selection,
176
- selectedRowKeys = _ref.selectedRowKeys;
175
+ _ref$selectedRowKeys = _ref.selectedRowKeys,
176
+ selectedRowKeys = _ref$selectedRowKeys === void 0 ? [] : _ref$selectedRowKeys;
177
177
  var selectedRows = [];
178
178
  allData.forEach(function (row) {
179
179
  var key = getRowKey(row);
@@ -195,6 +195,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
195
195
  return [];
196
196
  }, [allData, childrenColumnName, getRowKey, selection]);
197
197
  var renderRowSelection = useCallback(function (key, record) {
198
+ var _selection$globalSele;
198
199
  var _ref2 = selection,
199
200
  selectedRowKeys = _ref2.selectedRowKeys,
200
201
  limit = _ref2.limit,
@@ -215,6 +216,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
215
216
  independentSelectionExpandedRows: independentSelectionExpandedRows,
216
217
  onChange: handleChange,
217
218
  selectedRecords: selectedRecords,
219
+ isGlobalAllSelected: selection == null || (_selection$globalSele = selection.globalSelection) == null ? void 0 : _selection$globalSele.isSelected,
218
220
  tableLocale: locale,
219
221
  checkRowSelectionStatus: checkRowSelectionStatus,
220
222
  childrenColumnName: childrenColumnName
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type ColWrapperProps = {
3
2
  width?: number | null;
4
3
  minWidth?: number | null;
@@ -7,7 +6,7 @@ type ColWrapperProps = {
7
6
  left?: number;
8
7
  };
9
8
  export declare const RowWrapper: import("styled-components").StyledComponent<"div", any, {
10
- onRowClickAvailable?: boolean | undefined;
9
+ onRowClickAvailable?: boolean;
11
10
  }, never>;
12
11
  export declare const InnerListElement: import("styled-components").StyledComponent<"div", any, {}, never>;
13
12
  export declare const VirtualListSpace: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -28,6 +27,6 @@ export declare const VirtualTableWrapper: import("styled-components").StyledComp
28
27
  isSticky: boolean;
29
28
  titleBarHeight: number;
30
29
  titleBarTop: number;
31
- isHeaderVisible?: boolean | undefined;
30
+ isHeaderVisible?: boolean;
32
31
  }, never>;
33
32
  export {};
@@ -1 +1 @@
1
- export declare const getChildrenColumnName: (childrenColumnName?: string) => string;
1
+ export declare const getChildrenColumnName: <T>(childrenColumnName?: keyof T) => keyof T;
@@ -1,8 +1,5 @@
1
1
  import { type RowSelection } from '../Table.types';
2
- export declare const getRecordSelectionStatus: <T>(checkRowSelectionStatus: ((record: T) => {
3
- disabled?: boolean | undefined;
4
- unavailable?: boolean | undefined;
5
- }) | undefined, record: T) => {
2
+ export declare const getRecordSelectionStatus: <T>(checkRowSelectionStatus: RowSelection<T>["checkRowSelectionStatus"], record: T) => {
6
3
  unavailable: boolean | undefined;
7
4
  disabled: boolean | undefined;
8
5
  };
@@ -1,7 +1,2 @@
1
1
  import type { DSColumnType, DSTableProps } from '../Table.types';
2
- export declare const getSkeletonProps: <T extends object>(skeletonProps: {
3
- maxHeight?: number | undefined;
4
- headerHeight?: number | undefined;
5
- subheaderHeight?: number | undefined;
6
- cellHeight?: number | undefined;
7
- } | undefined, columns?: DSColumnType<T>[] | undefined) => Partial<DSTableProps<T>>;
2
+ export declare const getSkeletonProps: <T extends object>(skeletonProps: DSTableProps<T>["skeletonProps"], columns?: DSColumnType<T>[]) => Partial<DSTableProps<T>>;
@@ -1 +1 @@
1
- export declare const getValueFromPath: (object: object, valuePath?: string | number | readonly (string | number)[]) => string | number | boolean;
1
+ export declare const getValueFromPath: <T extends object>(object: T, valuePath?: string | number | readonly (string | number)[]) => {} | T[keyof T];
@@ -1,2 +1,2 @@
1
1
  import type { GroupType } from '../GroupTable/GroupTable.types';
2
- export declare const isGrouped: <T extends object>(dataSource?: readonly T[] | GroupType<T>[] | undefined) => dataSource is GroupType<T>[];
2
+ export declare const isGrouped: <T extends object>(dataSource?: readonly T[] | GroupType<T>[]) => dataSource is GroupType<T>[];
@@ -1,5 +1,2 @@
1
1
  import type { RowSelection } from '../Table.types';
2
- export declare const isRecordSelectable: <T>(record: T, checkRowSelectionStatus?: ((record: T) => {
3
- disabled?: boolean | undefined;
4
- unavailable?: boolean | undefined;
5
- }) | undefined) => boolean;
2
+ export declare const isRecordSelectable: <T>(record: T, checkRowSelectionStatus?: RowSelection<T>["checkRowSelectionStatus"]) => boolean;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { type IntlShape } from 'react-intl';
3
2
  import { type Locale } from '../Table.types';
4
3
  export declare const getDefaultLocale: (intl: IntlShape) => Locale;
@@ -82,10 +82,18 @@ export var getDefaultLocale = function getDefaultLocale(intl) {
82
82
  }),
83
83
  unselectAll: intl.formatMessage({
84
84
  id: 'DS.TABLE.UNSELECT_ALL',
85
- defaultMessage: 'Unselect all'
85
+ defaultMessage: 'Unselect visible'
86
86
  }),
87
87
  selectAll: intl.formatMessage({
88
88
  id: 'DS.TABLE.SELECT_ALL',
89
+ defaultMessage: 'Select visible'
90
+ }),
91
+ unselectGlobalAll: intl.formatMessage({
92
+ id: 'DS.TABLE.UNSELECT_GLOBAL_ALL',
93
+ defaultMessage: 'Unselect all'
94
+ }),
95
+ selectGlobalAll: intl.formatMessage({
96
+ id: 'DS.TABLE.SELECT_GLOBAL_ALL',
89
97
  defaultMessage: 'Select all'
90
98
  }),
91
99
  selectInvert: intl.formatMessage({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-table",
3
- "version": "1.4.3",
3
+ "version": "1.5.1",
4
4
  "description": "Table UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -34,31 +34,31 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-alert": "^1.1.10",
38
- "@synerise/ds-badge": "^1.0.16",
39
- "@synerise/ds-button": "^1.4.5",
40
- "@synerise/ds-button-group": "^1.1.9",
41
- "@synerise/ds-checkbox": "^1.1.3",
42
- "@synerise/ds-column-manager": "^1.2.6",
43
- "@synerise/ds-data-format": "^1.0.1",
44
- "@synerise/ds-dropdown": "^1.0.18",
45
- "@synerise/ds-flag": "^1.0.2",
46
- "@synerise/ds-icon": "^1.6.1",
47
- "@synerise/ds-input": "^1.3.5",
48
- "@synerise/ds-loader": "^1.0.6",
49
- "@synerise/ds-menu": "^1.0.17",
50
- "@synerise/ds-modal": "^1.2.5",
51
- "@synerise/ds-pagination": "^1.0.18",
52
- "@synerise/ds-result": "^1.0.17",
53
- "@synerise/ds-scrollbar": "^1.1.4",
54
- "@synerise/ds-search": "^1.2.5",
55
- "@synerise/ds-select": "^1.1.12",
56
- "@synerise/ds-skeleton": "^1.0.17",
57
- "@synerise/ds-status": "^1.2.10",
58
- "@synerise/ds-tag": "^1.1.14",
59
- "@synerise/ds-tooltip": "^1.1.14",
60
- "@synerise/ds-typography": "^1.0.16",
61
- "@synerise/ds-utils": "^1.3.1",
37
+ "@synerise/ds-alert": "^1.1.11",
38
+ "@synerise/ds-badge": "^1.0.17",
39
+ "@synerise/ds-button": "^1.4.6",
40
+ "@synerise/ds-button-group": "^1.1.10",
41
+ "@synerise/ds-checkbox": "^1.1.4",
42
+ "@synerise/ds-column-manager": "^1.2.8",
43
+ "@synerise/ds-data-format": "^1.1.0",
44
+ "@synerise/ds-dropdown": "^1.0.19",
45
+ "@synerise/ds-flag": "^1.0.3",
46
+ "@synerise/ds-icon": "^1.6.2",
47
+ "@synerise/ds-input": "^1.3.6",
48
+ "@synerise/ds-loader": "^1.0.7",
49
+ "@synerise/ds-menu": "^1.0.18",
50
+ "@synerise/ds-modal": "^1.2.6",
51
+ "@synerise/ds-pagination": "^1.0.19",
52
+ "@synerise/ds-result": "^1.0.19",
53
+ "@synerise/ds-scrollbar": "^1.1.5",
54
+ "@synerise/ds-search": "^1.2.6",
55
+ "@synerise/ds-select": "^1.1.13",
56
+ "@synerise/ds-skeleton": "^1.0.18",
57
+ "@synerise/ds-status": "^1.2.11",
58
+ "@synerise/ds-tag": "^1.1.15",
59
+ "@synerise/ds-tooltip": "^1.1.15",
60
+ "@synerise/ds-typography": "^1.0.17",
61
+ "@synerise/ds-utils": "^1.4.0",
62
62
  "@types/react-window": "^1.8.5",
63
63
  "classnames": "^2.5.1",
64
64
  "copy-to-clipboard": "^3.3.1",
@@ -77,5 +77,5 @@
77
77
  "react-intl": ">=3.12.0 <= 6.8",
78
78
  "styled-components": "^5.3.3"
79
79
  },
80
- "gitHead": "4e851d649cb25346f2f8e0575dde91cc50f43bc4"
80
+ "gitHead": "e57b766f264575efe046c96200e81a8ccd0c3128"
81
81
  }