@synerise/ds-table 1.1.8 → 1.1.9

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/Cell/Star/StarCell.d.ts +1 -0
  3. package/dist/Cell/Star/StarCell.styles.d.ts +1 -1
  4. package/dist/TableHeader/TableHeader.js +18 -6
  5. package/dist/TableHeader/TableLimit/TableLimit.js +9 -7
  6. package/dist/TableHeader/TableLimit/TableLimit.types.d.ts +4 -3
  7. package/dist/TableHeader/TableSelection.d.ts +2 -2
  8. package/dist/TableHeader/TableSelection.js +26 -15
  9. package/dist/TableHeader/TableSelection.types.d.ts +10 -4
  10. package/dist/VirtualTable/VirtualTableRow.js +2 -1
  11. package/package.json +25 -25
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.1.9](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.1.8...@synerise/ds-table@1.1.9) (2025-05-07)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **table:** center infinite loader row content ([8389fc4](https://github.com/synerise/synerise-design/commit/8389fc44ebc05e7be687be6203f5f4633321c796))
12
+ * **table:** update batch selection for table with limit ([a63698a](https://github.com/synerise/synerise-design/commit/a63698adf24e59aa3b220f3840ecdc43d60d62a5))
13
+
14
+
15
+
16
+
17
+
6
18
  ## [1.1.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.1.7...@synerise/ds-table@1.1.8) (2025-04-24)
7
19
 
8
20
  **Note:** Version bump only for package @synerise/ds-table
package/dist/Cell/Star/StarCell.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  declare const _default: React.ForwardRefExoticComponent<{
3
+ [x: `data-${string}`]: string;
3
4
  slot?: string | undefined;
4
5
  style?: React.CSSProperties | undefined;
5
6
  title?: string | undefined;
package/dist/Cell/Star/StarCell.styles.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { IconProps } from '@synerise/ds-icon';
3
3
  export declare const StarCell: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const StarredIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: IconProps) => import("react").JSX.Element, any, import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & {
4
+ export declare const StarredIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: IconProps) => import("react").JSX.Element, any, import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & {
5
5
  active?: boolean | undefined;
6
6
  onClick?: (() => void) | undefined;
7
7
  }, never>;
package/dist/TableHeader/TableHeader.js CHANGED
@@ -30,12 +30,24 @@ var TableHeader = function TableHeader(_ref) {
30
30
  var _ref2 = selection || {},
31
31
  limit = _ref2.limit,
32
32
  hideSelectAll = _ref2.hideSelectAll;
33
- if (limit) return /*#__PURE__*/React.createElement(TableLimit, {
34
- total: dataSourceTotalCount || dataSource.length,
35
- selection: selection,
36
- itemsMenu: itemsMenu,
37
- locale: locale
38
- });
33
+ if (limit) {
34
+ return /*#__PURE__*/React.createElement(S.Left, {
35
+ "data-testid": "ds-table-selection"
36
+ }, selection && !hideSelectAll && /*#__PURE__*/React.createElement(TableSelection, {
37
+ rowKey: rowKey,
38
+ dataSource: dataSource,
39
+ dataSourceFull: dataSourceFull,
40
+ selection: selection,
41
+ locale: locale,
42
+ hasSelectionLimit: true,
43
+ childrenColumnName: childrenColumnName
44
+ }), /*#__PURE__*/React.createElement(TableLimit, {
45
+ total: dataSourceTotalCount || dataSource.length,
46
+ selection: selection,
47
+ itemsMenu: itemsMenu,
48
+ locale: locale
49
+ }));
50
+ }
39
51
  return selectedRows && selectedRows > 0 ? /*#__PURE__*/React.createElement(S.Left, {
40
52
  "data-testid": "ds-table-selection"
41
53
  }, selection && !hideSelectAll && /*#__PURE__*/React.createElement(TableSelection, {
package/dist/TableHeader/TableLimit/TableLimit.js CHANGED
@@ -9,18 +9,20 @@ export function TableLimit(_ref) {
9
9
  selection = _ref.selection;
10
10
  var _useDataFormat = useDataFormat(),
11
11
  formatValue = _useDataFormat.formatValue;
12
+ var selectedRowKeys = selection.selectedRowKeys,
13
+ limit = selection.limit;
12
14
  var selectedRows = useMemo(function () {
13
- return (selection == null ? void 0 : selection.selectedRowKeys.length) || 0;
14
- }, [selection]);
15
+ return selectedRowKeys.length || 0;
16
+ }, [selectedRowKeys]);
15
17
  var limitReachedInfo = useMemo(function () {
16
- return (selection == null ? void 0 : selection.limit) && (selection == null ? void 0 : selection.limit) <= selectedRows && /*#__PURE__*/React.createElement(S.Alert, null, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
18
+ return limit <= selectedRows && /*#__PURE__*/React.createElement(S.Alert, null, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
17
19
  type: "warning",
18
20
  message: locale.selectionLimitWarning
19
21
  }));
20
- }, [locale, selectedRows, selection]);
22
+ }, [locale, selectedRows, limit]);
21
23
  var selected = useMemo(function () {
22
- var _locale$pagination, _locale$pagination2;
23
- return selectedRows > 0 ? /*#__PURE__*/React.createElement(S.Title, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), " ", locale.selected, " /", ' ', formatValue(total) + " " + ((_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items)) : /*#__PURE__*/React.createElement(S.Title, null, /*#__PURE__*/React.createElement("strong", null, formatValue(total)), " ", (_locale$pagination2 = locale.pagination) == null ? void 0 : _locale$pagination2.items);
24
- }, [formatValue, locale.pagination, locale.selected, selectedRows, total]);
24
+ var _locale$pagination;
25
+ 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, /*#__PURE__*/React.createElement("strong", null, formatValue(total)), " ", (_locale$pagination = locale.pagination) == null ? void 0 : _locale$pagination.items);
26
+ }, [formatValue, limit, locale.pagination, locale.selected, selectedRows, total]);
25
27
  return /*#__PURE__*/React.createElement(S.TableLimit, null, selected, limitReachedInfo, selectedRows > 0 && /*#__PURE__*/React.createElement(S.ItemsMenu, null, itemsMenu));
26
28
  }
package/dist/TableHeader/TableLimit/TableLimit.types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- import { ReactNode, ReactText } from 'react';
1
+ import type { ReactNode } from 'react';
2
+ import type { RequiredProps } from '@synerise/ds-utils';
2
3
  import { Locale, RowSelection } from '../../Table.types';
3
4
  export type TableLimitProps<T extends {
4
- key: ReactText;
5
+ key: string | number;
5
6
  }> = {
6
- selection?: RowSelection<T>;
7
+ selection: RequiredProps<RowSelection<T>, 'limit'>;
7
8
  total: number;
8
9
  itemsMenu: ReactNode;
9
10
  locale: Locale;
package/dist/TableHeader/TableSelection.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import type { ReactText } from 'react';
3
- import { Props } from './TableSelection.types';
3
+ import type { TableSelectionProps } from './TableSelection.types';
4
4
  declare const TableSelection: <T extends {
5
5
  key: ReactText;
6
6
  children?: T[] | undefined;
7
- }>({ dataSource, dataSourceFull, selection, rowKey, locale, childrenColumnName, }: Props<T>) => React.JSX.Element | null;
7
+ }>({ dataSource, dataSourceFull, selection, rowKey, locale, hasSelectionLimit, childrenColumnName, }: TableSelectionProps<T>) => React.JSX.Element | null;
8
8
  export default TableSelection;
package/dist/TableHeader/TableSelection.js CHANGED
@@ -15,6 +15,7 @@ var TableSelection = function TableSelection(_ref) {
15
15
  selection = _ref.selection,
16
16
  rowKey = _ref.rowKey,
17
17
  locale = _ref.locale,
18
+ hasSelectionLimit = _ref.hasSelectionLimit,
18
19
  childrenColumnName = _ref.childrenColumnName;
19
20
  var _useRowKey = useRowKey(rowKey),
20
21
  getRowKey = _useRowKey.getRowKey;
@@ -143,29 +144,37 @@ var TableSelection = function TableSelection(_ref) {
143
144
  selectableAndSelectedRecordsCount = _useBulkSelectionCoun.selectableAndSelectedRecordsCount,
144
145
  selectedRecordsCount = _useBulkSelectionCoun.selectedRecordsCount;
145
146
  var isIndeterminate = selectedRecordsCount > 0 && selectableRecordsCount !== selectableAndSelectedRecordsCount;
146
- var disabledBulkSelection = allRecordsCount === 0 || selectableRecordsCount === 0;
147
+ var disabledBulkSelection = allRecordsCount === 0 || selectableRecordsCount === 0 || hasSelectionLimit && selectedRecordsCount === 0;
147
148
  var isAllSelected = !disabledBulkSelection && selectableRecordsCount === selectableAndSelectedRecordsCount;
149
+ var isAnySelected = allRecordsCount > 0 && selectedRecordsCount > 0;
148
150
  var selectionTooltipTitle = !isAllSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
149
151
  var menuDataSource = useMemo(function () {
150
152
  var _selection$selections;
151
- return selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean).map(function (selectionMenuElement) {
153
+ return selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean).flatMap(function (selectionMenuElement) {
152
154
  switch (selectionMenuElement) {
153
155
  case SELECTION_ALL:
154
156
  {
155
- return !isAllSelected ? {
156
- onClick: selectAll,
157
- text: locale == null ? void 0 : locale.selectAll
158
- } : {
159
- onClick: unselectAll,
160
- text: locale == null ? void 0 : locale.unselectAll
161
- };
157
+ var items = [];
158
+ if (!isAllSelected && !hasSelectionLimit) {
159
+ items.push({
160
+ onClick: selectAll,
161
+ text: locale == null ? void 0 : locale.selectAll
162
+ });
163
+ }
164
+ if (isAnySelected) {
165
+ items.push({
166
+ onClick: unselectAll,
167
+ text: locale == null ? void 0 : locale.unselectAll
168
+ });
169
+ }
170
+ return items;
162
171
  }
163
172
  case SELECTION_INVERT:
164
173
  {
165
- return {
174
+ return !hasSelectionLimit ? {
166
175
  onClick: selectInvert,
167
176
  text: locale == null ? void 0 : locale.selectInvert
168
- };
177
+ } : [];
169
178
  }
170
179
  default:
171
180
  {
@@ -176,10 +185,10 @@ var TableSelection = function TableSelection(_ref) {
176
185
  }
177
186
  }
178
187
  });
179
- }, [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]);
188
+ }, [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]);
180
189
  return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
181
190
  "data-popup-container": true
182
- }, /*#__PURE__*/React.createElement(Tooltip, {
191
+ }, !hasSelectionLimit && /*#__PURE__*/React.createElement(Tooltip, {
183
192
  title: selectionTooltipTitle
184
193
  }, /*#__PURE__*/React.createElement(Button.Checkbox, {
185
194
  disabled: disabledBulkSelection,
@@ -194,14 +203,16 @@ var TableSelection = function TableSelection(_ref) {
194
203
  },
195
204
  indeterminate: isIndeterminate
196
205
  })), (selection == null ? void 0 : selection.selections) && /*#__PURE__*/React.createElement(Dropdown, {
197
- disabled: disabledBulkSelection,
206
+ disabled: disabledBulkSelection || (menuDataSource == null ? void 0 : menuDataSource.length) === 0,
198
207
  trigger: ['click'],
199
208
  overlay: /*#__PURE__*/React.createElement(S.SelectionMenu, {
200
209
  dataSource: menuDataSource
201
- })
210
+ }),
211
+ hideOnItemClick: true
202
212
  }, /*#__PURE__*/React.createElement(Tooltip, {
203
213
  title: locale == null ? void 0 : locale.selectionOptionsTooltip
204
214
  }, /*#__PURE__*/React.createElement(Button, {
215
+ disabled: disabledBulkSelection || (menuDataSource == null ? void 0 : menuDataSource.length) === 0,
205
216
  mode: "single-icon",
206
217
  type: "ghost"
207
218
  }, /*#__PURE__*/React.createElement(Icon, {
package/dist/TableHeader/TableSelection.types.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { ReactText } from 'react';
2
- import { RowSelection, Locale } from '../Table.types';
3
- export type Props<T extends {
4
- key: ReactText;
1
+ import type { RowSelection, Locale } from '../Table.types';
2
+ export type TableSelectionProps<T extends {
3
+ key: string | number;
5
4
  }> = {
6
5
  selection?: RowSelection<T>;
7
6
  dataSource: T[];
@@ -9,4 +8,11 @@ export type Props<T extends {
9
8
  locale?: Locale;
10
9
  rowKey?: Function | string;
11
10
  childrenColumnName: string;
11
+ hasSelectionLimit?: boolean;
12
12
  };
13
+ /**
14
+ * @deprecated use TableSelectionProps instead
15
+ */
16
+ export type Props<T extends {
17
+ key: string | number;
18
+ }> = TableSelectionProps<T>;
package/dist/VirtualTable/VirtualTableRow.js CHANGED
@@ -58,7 +58,8 @@ function VirtualTableRow(_ref) {
58
58
  style: _extends({}, style, {
59
59
  top: top,
60
60
  height: INFINITE_LOADED_ITEM_HEIGHT + "px",
61
- padding: '16px 24px'
61
+ padding: '0 24px',
62
+ display: 'flex'
62
63
  })
63
64
  }, /*#__PURE__*/React.createElement(InfiniteLoaderItem, {
64
65
  infiniteScroll: _extends({}, infiniteScroll, infiniteLoaderItemProps),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-table",
3
- "version": "1.1.8",
3
+ "version": "1.1.9",
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.0.6",
38
- "@synerise/ds-badge": "^1.0.6",
39
- "@synerise/ds-button": "^1.1.5",
40
- "@synerise/ds-button-group": "^1.0.7",
41
- "@synerise/ds-checkbox": "^1.0.6",
42
- "@synerise/ds-column-manager": "^1.0.8",
37
+ "@synerise/ds-alert": "^1.1.0",
38
+ "@synerise/ds-badge": "^1.0.7",
39
+ "@synerise/ds-button": "^1.2.0",
40
+ "@synerise/ds-button-group": "^1.0.8",
41
+ "@synerise/ds-checkbox": "^1.0.7",
42
+ "@synerise/ds-column-manager": "^1.0.9",
43
43
  "@synerise/ds-data-format": "^1.0.0",
44
- "@synerise/ds-dropdown": "^1.0.6",
44
+ "@synerise/ds-dropdown": "^1.0.7",
45
45
  "@synerise/ds-flag": "^1.0.0",
46
- "@synerise/ds-icon": "^1.4.1",
47
- "@synerise/ds-input": "^1.1.1",
48
- "@synerise/ds-loader": "^1.0.1",
49
- "@synerise/ds-menu": "^1.0.6",
50
- "@synerise/ds-modal": "^1.0.6",
51
- "@synerise/ds-pagination": "^1.0.6",
52
- "@synerise/ds-result": "^1.0.6",
53
- "@synerise/ds-scrollbar": "^1.0.6",
54
- "@synerise/ds-search": "^1.1.3",
55
- "@synerise/ds-select": "^1.1.1",
56
- "@synerise/ds-skeleton": "^1.0.6",
57
- "@synerise/ds-status": "^1.2.1",
58
- "@synerise/ds-tag": "^1.1.5",
59
- "@synerise/ds-tooltip": "^1.1.5",
60
- "@synerise/ds-typography": "^1.0.6",
61
- "@synerise/ds-utils": "^1.0.1",
46
+ "@synerise/ds-icon": "^1.4.2",
47
+ "@synerise/ds-input": "^1.1.2",
48
+ "@synerise/ds-loader": "^1.0.2",
49
+ "@synerise/ds-menu": "^1.0.7",
50
+ "@synerise/ds-modal": "^1.0.7",
51
+ "@synerise/ds-pagination": "^1.0.7",
52
+ "@synerise/ds-result": "^1.0.7",
53
+ "@synerise/ds-scrollbar": "^1.0.7",
54
+ "@synerise/ds-search": "^1.1.4",
55
+ "@synerise/ds-select": "^1.1.2",
56
+ "@synerise/ds-skeleton": "^1.0.7",
57
+ "@synerise/ds-status": "^1.2.2",
58
+ "@synerise/ds-tag": "^1.1.6",
59
+ "@synerise/ds-tooltip": "^1.1.6",
60
+ "@synerise/ds-typography": "^1.0.7",
61
+ "@synerise/ds-utils": "^1.1.0",
62
62
  "@types/react-window": "^1.8.5",
63
63
  "classnames": "2.3.2",
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": "885a2e01bd5c4b45bfa39506f5b4d6a12aafaba4"
80
+ "gitHead": "90af7549cf0f556340bdd0deec4bb59bacf3e95e"
81
81
  }