@synerise/ds-table-new 1.3.0 → 1.4.0

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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/components/Cell/LabelsWithShowMore/LabelsWithShowMore.js +3 -3
  3. package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.d.ts +1 -1
  4. package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.js +2 -4
  5. package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.types.d.ts +1 -1
  6. package/dist/components/TreeTable/TreeTable.d.ts +1 -1
  7. package/dist/components/TreeTable/TreeTable.js +10 -7
  8. package/dist/components/TreeTable/TreeTable.types.d.ts +10 -1
  9. package/package.json +22 -22
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.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.3.1...@synerise/ds-table-new@1.4.0) (2026-05-22)
7
+
8
+ ### Features
9
+
10
+ - **modal:** migration from antd ([3588b65](https://github.com/Synerise/synerise-design/commit/3588b65fbe67838fed4ee5125090ad47d334e04b))
11
+
12
+ ## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.3.0...@synerise/ds-table-new@1.3.1) (2026-05-19)
13
+
14
+ ### Bug Fixes
15
+
16
+ - **table-new:** reinstate optional indent without expander ([015517a](https://github.com/Synerise/synerise-design/commit/015517a00a7d9dd1a4b50e7dad20c7fb71ede2d8))
17
+
6
18
  # [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.2.0...@synerise/ds-table-new@1.3.0) (2026-05-15)
7
19
 
8
20
  ### Features
package/dist/components/Cell/LabelsWithShowMore/LabelsWithShowMore.js CHANGED
@@ -12,7 +12,7 @@ const LabelsWithShowMore = ({
12
12
  loading,
13
13
  ...htmlAttributes
14
14
  }) => {
15
- const [modalVisible, setModalVisible] = useState(false);
15
+ const [isModalOpen, setIsModalOpen] = useState(false);
16
16
  const diff = useMemo(() => {
17
17
  return items.length - numberOfVisibleItems;
18
18
  }, [items, numberOfVisibleItems]);
@@ -21,11 +21,11 @@ const LabelsWithShowMore = ({
21
21
  }, [items, labelKey, numberOfVisibleItems]);
22
22
  return /* @__PURE__ */ jsxs(CellWrapper, { ...htmlAttributes, children: [
23
23
  /* @__PURE__ */ jsx(Labels, { children: labels }),
24
- diff > 0 && /* @__PURE__ */ jsx(Tooltip, { title: `${texts.tooltip}`, children: /* @__PURE__ */ jsxs(MoreInfo, { onClick: () => setModalVisible(true), children: [
24
+ diff > 0 && /* @__PURE__ */ jsx(Tooltip, { title: `${texts.tooltip}`, children: /* @__PURE__ */ jsxs(MoreInfo, { onClick: () => setIsModalOpen(true), children: [
25
25
  "+",
26
26
  diff
27
27
  ] }) }),
28
- /* @__PURE__ */ jsx(DetailsModal, { visible: modalVisible, hide: () => setModalVisible(false), items, renderItem, labelKey, texts, loading })
28
+ /* @__PURE__ */ jsx(DetailsModal, { isOpen: isModalOpen, hide: () => setIsModalOpen(false), items, renderItem, labelKey, texts, loading })
29
29
  ] });
30
30
  };
31
31
  export {
package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { default as React } from 'react';
2
2
  import { DataSourceType, ModalProps } from './Modal.types';
3
- declare const DetailsModal: ({ visible, hide, items, texts, renderItem, labelKey, loading, }: ModalProps<DataSourceType>) => React.JSX.Element;
3
+ declare const DetailsModal: ({ isOpen, hide, items, texts, renderItem, labelKey, loading, }: ModalProps<DataSourceType>) => React.JSX.Element;
4
4
  export { DetailsModal };
package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.js CHANGED
@@ -3,7 +3,7 @@ import { useMemo, useCallback } from "react";
3
3
  import Modal from "@synerise/ds-modal";
4
4
  import { VirtualTable } from "../../../../VirtualTable.js";
5
5
  const DetailsModal = ({
6
- visible,
6
+ isOpen,
7
7
  hide,
8
8
  items,
9
9
  texts,
@@ -20,9 +20,7 @@ const DetailsModal = ({
20
20
  const value = row[labelKey];
21
21
  return typeof value === "string" && value.toLowerCase().includes(query.toLowerCase());
22
22
  }, [labelKey]);
23
- return /* @__PURE__ */ jsx(Modal, { size: "small", visible, title: texts.modalTitle, closable: true, onCancel: hide, bodyStyle: {
24
- padding: 0
25
- }, 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: {
23
+ return /* @__PURE__ */ jsx(Modal, { size: "small", open: isOpen, title: texts.modalTitle, closable: true, onCancel: hide, bodyFullWidth: 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: {
26
24
  clearTooltip: texts.searchClear,
27
25
  placeholder: texts.searchPlaceholder
28
26
  }, hideColumnNames: true }) });
package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.types.d.ts CHANGED
@@ -5,7 +5,7 @@ export type DataSourceType = Record<string, any> & {
5
5
  key: React.ReactText;
6
6
  };
7
7
  export type ModalProps<T extends DataSourceType> = {
8
- visible: boolean;
8
+ isOpen: boolean;
9
9
  items: T[];
10
10
  hide: () => void;
11
11
  renderItem: (label: string, item: T) => JSX.Element | React.Component;
package/dist/components/TreeTable/TreeTable.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { default as React } from 'react';
2
2
  import { TreeTableProps } from './TreeTable.types';
3
- export declare const TreeTable: <TData extends object, TValue>({ data, columns, childrenColumnName, defaultExpandAllRows, expandedRowKeys: controlledExpandedKeys, onExpandRow, expandIconColumnIndex, rowKey, ...props }: TreeTableProps<TData, TValue>) => React.JSX.Element;
3
+ export declare const TreeTable: <TData extends object, TValue>({ data, columns, childrenColumnName, defaultExpandAllRows, expandedRowKeys: controlledExpandedKeys, onExpandRow, expandIconColumnIndex, hideExpandIcon, rowKey, ...props }: TreeTableProps<TData, TValue>) => React.JSX.Element;
package/dist/components/TreeTable/TreeTable.js CHANGED
@@ -27,6 +27,7 @@ const TreeTable = ({
27
27
  expandedRowKeys: controlledExpandedKeys,
28
28
  onExpandRow,
29
29
  expandIconColumnIndex = 0,
30
+ hideExpandIcon = false,
30
31
  rowKey,
31
32
  ...props
32
33
  }) => {
@@ -84,18 +85,20 @@ const TreeTable = ({
84
85
  length: depth
85
86
  }, (_, i) => /* @__PURE__ */ jsx(IndentBar, { $level: i, $active: i + 1 === depth }, i));
86
87
  const originalCell = typeof col.cell === "function" ? col.cell(info) : info.getValue();
87
- return /* @__PURE__ */ jsxs(TreeCellWrapper, { $indentWidth: depth * INDENT_SIZE, children: [
88
- depth > 0 && /* @__PURE__ */ jsx(IndentsContainer, { $depth: depth, children: indents }),
89
- /* @__PURE__ */ jsx(ExpanderWrapper, { children: isParent ? /* @__PURE__ */ jsx(Expander, { expanded: isExpanded, onClick: (e) => {
90
- e.stopPropagation();
91
- toggleExpand(rowId);
92
- } }) : depth > 0 ? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ChildRowLeftDownM, {}), color: theme.palette["grey-400"] }) : null }),
88
+ const rowPrefix = isParent && !hideExpandIcon ? /* @__PURE__ */ jsx(Expander, { expanded: isExpanded, onClick: (e) => {
89
+ e.stopPropagation();
90
+ toggleExpand(rowId);
91
+ } }) : depth > 0 ? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ChildRowLeftDownM, {}), color: theme.palette["grey-400"] }) : null;
92
+ const finalDepth = hideExpandIcon && depth > 0 ? depth - 1 : depth;
93
+ return /* @__PURE__ */ jsxs(TreeCellWrapper, { $indentWidth: finalDepth * INDENT_SIZE, children: [
94
+ depth > 0 && !hideExpandIcon && /* @__PURE__ */ jsx(IndentsContainer, { $depth: depth, children: indents }),
95
+ rowPrefix && /* @__PURE__ */ jsx(ExpanderWrapper, { children: rowPrefix }),
93
96
  originalCell
94
97
  ] });
95
98
  }
96
99
  };
97
100
  });
98
- }, [columns, expandIconColumnIndex, getRowKey, hasChildren, expandedKeys, toggleExpand]);
101
+ }, [columns, expandIconColumnIndex, getRowKey, hasChildren, expandedKeys, toggleExpand, hideExpandIcon]);
99
102
  return /* @__PURE__ */ jsx(TreeTableRoot, { children: /* @__PURE__ */ jsx(Table, { data, columns: treeColumns, rowKey, expandable: {
100
103
  childrenColumnName: childrenKey,
101
104
  expandedRowKeys: expandedKeys
package/dist/components/TreeTable/TreeTable.types.d.ts CHANGED
@@ -19,8 +19,17 @@ export type TreeTableProps<TData, TValue> = Omit<TableProps<TData, TValue>, 'exp
19
19
  onExpandRow?: (key: string, expanded: boolean) => void;
20
20
  /**
21
21
  * Index of the column where the expand icon is rendered.
22
- * Set to -1 to hide the expand icon entirely.
22
+ * Set to -1 to hide the expand icon and skip indentation entirely.
23
23
  * @default 0
24
24
  */
25
25
  expandIconColumnIndex?: number;
26
+ /**
27
+ * Suppress the expander button on parent rows while still rendering
28
+ * indentation and the leaf glyph (ChildRowLeftDownM) on every indented row.
29
+ * Use when expand/collapse is not user-controllable but you still want
30
+ * visual hierarchy matching the legacy antd table.
31
+ * Ignored when `expandIconColumnIndex` is negative.
32
+ * @default false
33
+ */
34
+ hideExpandIcon?: boolean;
26
35
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-table-new",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "description": "TableNew UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -43,28 +43,28 @@
43
43
  "types": "dist/index.d.ts",
44
44
  "dependencies": {
45
45
  "@floating-ui/react": "^0.27.16",
46
- "@synerise/ds-badge": "^1.0.53",
47
- "@synerise/ds-button": "^1.5.29",
48
- "@synerise/ds-checkbox": "^1.2.30",
49
- "@synerise/ds-copy-icon": "^1.2.11",
50
- "@synerise/ds-dropdown": "^1.3.12",
46
+ "@synerise/ds-badge": "^1.0.54",
47
+ "@synerise/ds-button": "^1.5.30",
48
+ "@synerise/ds-checkbox": "^1.2.31",
49
+ "@synerise/ds-copy-icon": "^1.2.12",
50
+ "@synerise/ds-dropdown": "^1.3.13",
51
51
  "@synerise/ds-flag": "^1.0.11",
52
- "@synerise/ds-icon": "^1.18.0",
53
- "@synerise/ds-inline-alert": "^1.1.23",
54
- "@synerise/ds-input": "^1.7.7",
55
- "@synerise/ds-input-number": "^1.2.44",
52
+ "@synerise/ds-icon": "^1.18.1",
53
+ "@synerise/ds-inline-alert": "^1.1.24",
54
+ "@synerise/ds-input": "^1.7.8",
55
+ "@synerise/ds-input-number": "^1.2.45",
56
56
  "@synerise/ds-loader": "^1.0.16",
57
- "@synerise/ds-modal": "^1.4.14",
58
- "@synerise/ds-pagination": "^1.0.64",
59
- "@synerise/ds-result": "^1.0.60",
60
- "@synerise/ds-scrollbar": "^1.3.5",
61
- "@synerise/ds-search": "^1.5.24",
62
- "@synerise/ds-skeleton": "^1.0.54",
63
- "@synerise/ds-tag": "^1.4.27",
64
- "@synerise/ds-tags": "^1.5.41",
65
- "@synerise/ds-tooltip": "^1.4.19",
66
- "@synerise/ds-typography": "^1.1.22",
67
- "@synerise/ds-utils": "^1.8.1",
57
+ "@synerise/ds-modal": "^1.5.0",
58
+ "@synerise/ds-pagination": "^1.0.65",
59
+ "@synerise/ds-result": "^1.0.61",
60
+ "@synerise/ds-scrollbar": "^1.4.0",
61
+ "@synerise/ds-search": "^1.5.25",
62
+ "@synerise/ds-skeleton": "^1.0.55",
63
+ "@synerise/ds-tag": "^1.4.28",
64
+ "@synerise/ds-tags": "^1.5.42",
65
+ "@synerise/ds-tooltip": "^1.5.0",
66
+ "@synerise/ds-typography": "^1.1.23",
67
+ "@synerise/ds-utils": "^1.9.0",
68
68
  "@tanstack/react-table": "^8.21.3",
69
69
  "@tanstack/react-virtual": "^3.13.12",
70
70
  "unit-to-px": "^1.0.5",
@@ -80,5 +80,5 @@
80
80
  "react-intl": ">= 3.12.0 <= 6.8",
81
81
  "styled-components": "^5.3.3"
82
82
  },
83
- "gitHead": "ef14a62702ad420add6ad1c56da88df1f70a1bb8"
83
+ "gitHead": "f257f56d8991010593efd5ea9915335e813671a6"
84
84
  }