mautourco-components 0.2.139 → 0.2.141

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 (5) hide show
  1. package/dist/components/organisms/Table/Table.css +22 -6
  2. package/dist/components/organisms/Table/Table.js +3 -3
  3. package/package.json +1 -1
  4. package/src/components/organisms/Table/Table.css +20 -4
  5. package/src/components/organisms/Table/Table.tsx +4 -4
package/dist/components/organisms/Table/Table.css CHANGED
@@ -46,24 +46,37 @@
46
46
  }
47
47
  }
48
48
  .table__body {
49
- tr {
49
+ > tr {
50
50
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
51
51
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
52
52
  transition-duration: 150ms;
53
53
  }
54
- tr {
54
+ > tr {
55
55
  transition-duration: 200ms;
56
56
  }
57
- tr {
57
+ > tr {
58
58
  border-top: solid 1px var(--color-surface-300);
59
- &:hover:not(.table__no-hover) {
59
+ &:hover:not(.table__row-with-children) {
60
60
  background-color: var(--color-elevation-state-hover-subtle);
61
61
  }
62
62
  &.table__row-highlighted:hover {
63
- tr {
63
+ .table__row-div-highlighted {
64
64
  background-color: var(--color-yellow-100);
65
65
  }
66
66
  }
67
+ &.table__row-div-highlighted {
68
+ div.table__nested-wrapper table tr {
69
+ background-color: var(--color-yellow-50);
70
+ &:hover {
71
+ background-color: var(--color-yellow-100);
72
+ }
73
+ }
74
+ }
75
+ &.table__row-with-children {
76
+ tr:hover {
77
+ background-color: var(--color-elevation-state-hover-subtle);
78
+ }
79
+ }
67
80
  &:first-child {
68
81
  border-top: none;
69
82
  }
@@ -72,7 +85,6 @@
72
85
  &:not(:nth-of-type(1)) {
73
86
  td {
74
87
  vertical-align: top;
75
- padding-top: 0;
76
88
  }
77
89
  }
78
90
  }
@@ -188,9 +200,13 @@
188
200
  }
189
201
  .table .table__nested-wrapper tr {
190
202
  border-top: none;
203
+ background-color: #fff;
191
204
  &:last-child {
192
205
  border-bottom: solid 1px var(--color-surface-300);
193
206
  }
207
+ &:hover {
208
+ background-color: var(--color-elevation-state-hover-subtle);
209
+ }
194
210
  }
195
211
  }
196
212
 
package/dist/components/organisms/Table/Table.js CHANGED
@@ -48,7 +48,7 @@ var NestedContent = function (_a) {
48
48
  opacity: { duration: 0.15, ease: 'easeInOut' },
49
49
  }, className: "table__nested-wrapper", children: _jsx("table", { className: "table", children: _jsx("tbody", { children: children.map(function (child, childIndex) { return (_jsx("tr", { className: cn(child.className, {
50
50
  'table__row-clickable': onClickRow,
51
- }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, child, { parentIndex: parentIndex, childIndex: childIndex }); }, children: _jsx(TableCell, { columns: columns, row: child, rowIndex: childIndex, childIndex: childIndex }) }, "ch-".concat(rowIndex, "-").concat(childIndex))); }) }) }) }));
51
+ }), onClick: function (e) { return onClickRow === null || onClickRow === void 0 ? void 0 : onClickRow(e, child, { parentIndex: parentIndex, childIndex: childIndex }); }, children: _jsx(TableCell, { columns: columns, row: child, rowIndex: childIndex, childIndex: childIndex }) }, "ch-".concat(child.id, "-").concat(rowIndex, "-").concat(childIndex))); }) }) }) }));
52
52
  };
53
53
  /**
54
54
  * A table component for displaying structured data in rows and columns. Supports customizable column definitions and data rows.
@@ -92,13 +92,13 @@ export function Table(props) {
92
92
  'table__children--visible': hasVisibleChildren,
93
93
  }), children: _jsx("div", { className: "table__children-wrapper", children: _jsx("table", { className: "table", children: _jsxs("tbody", { children: [defaultTable, _jsx(AnimatePresence, { initial: false, children: hasVisibleChildren && (_jsx("tr", { className: cn('table__no-hover', {
94
94
  'table__row-nested': row.children && row.children.length > 0,
95
- }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, parentIndex: rowIndex, children: row.children || [], onClickRow: onClickRow }) }) }, "nested-".concat(rowIndex))) })] }) }) }) }) })) }, "rw-".concat(rowIndex)));
95
+ }), children: _jsx("td", { colSpan: columns.length, className: "table__cell-nested", children: _jsx(NestedContent, { rowIndex: rowIndex, columns: columns, parentIndex: rowIndex, children: row.children || [], onClickRow: onClickRow }) }) }, "nested-".concat(row.id, "-").concat(rowIndex))) })] }) }) }) }) })) }, "rw-".concat(row.id, "-").concat(rowIndex)));
96
96
  }), data.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "table__cell-empty", children: _jsx(Text, { size: "md", variant: "bold", className: "text-center", children: "No data found" }) }) }))] })] }) }), hasTotal && (_jsx("div", { className: 'table__total-container', children: _jsx("table", { className: "table", children: _jsx("tbody", { className: cn('table__total', {
97
97
  'table__total--dashed': isTotalBorderDash,
98
98
  }), children: _jsxs("tr", { children: [_jsx("td", { colSpan: columns.length - 1 }), _jsx("td", { style: {
99
99
  '--last-column-width': normalizeLastColumnWidth(),
100
100
  }, children: _jsxs("div", { className: "relative", children: [_jsxs(Text, { size: "md", variant: "bold", className: "absolute top-0 -left-3 -translate-x-full", children: ["Total :", ' '] }), _jsx("div", { children: Object.entries(totalRows).map(function (_a) {
101
101
  var currency = _a[0], total = _a[1];
102
- return (_jsx("div", { children: _jsx(Text, { size: "md", variant: "bold", children: priceFormatter(total, currency) }) }, currency));
102
+ return (_jsx("div", { children: _jsx(Text, { size: "md", variant: "bold", children: priceFormatter(total, currency) }) }, "total-".concat(total, "-").concat(currency)));
103
103
  }) })] }) })] }) }) }) })), pagination && (_jsx("div", { className: "flex justify-end mt-4", children: _jsx(Pagination, __assign({}, pagination)) }))] }) }));
104
104
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mautourco-components",
3
- "version": "0.2.139",
3
+ "version": "0.2.141",
4
4
  "private": false,
5
5
  "description": "Bibliothèque de composants Mautourco pour le redesign",
6
6
  "main": "dist/index.js",
package/src/components/organisms/Table/Table.css CHANGED
@@ -37,17 +37,30 @@
37
37
  }
38
38
  }
39
39
  .table__body {
40
- tr {
40
+ > tr {
41
41
  @apply transition-colors duration-200;
42
42
  border-top: solid 1px var(--color-surface-300);
43
- &:hover:not(.table__no-hover) {
43
+ &:hover:not(.table__row-with-children) {
44
44
  background-color: var(--color-elevation-state-hover-subtle);
45
45
  }
46
46
  &.table__row-highlighted:hover {
47
- tr {
47
+ .table__row-div-highlighted {
48
48
  background-color: var(--color-yellow-100);
49
49
  }
50
50
  }
51
+ &.table__row-div-highlighted {
52
+ div.table__nested-wrapper table tr {
53
+ background-color: var(--color-yellow-50);
54
+ &:hover {
55
+ background-color: var(--color-yellow-100);
56
+ }
57
+ }
58
+ }
59
+ &.table__row-with-children {
60
+ tr:hover {
61
+ background-color: var(--color-elevation-state-hover-subtle);
62
+ }
63
+ }
51
64
  &:first-child {
52
65
  border-top: none;
53
66
  }
@@ -56,7 +69,6 @@
56
69
  &:not(:nth-of-type(1)) {
57
70
  td {
58
71
  vertical-align: top;
59
- padding-top: 0;
60
72
  }
61
73
  }
62
74
  }
@@ -166,9 +178,13 @@
166
178
  }
167
179
  .table .table__nested-wrapper tr {
168
180
  border-top: none;
181
+ background-color: #fff;
169
182
  &:last-child {
170
183
  border-bottom: solid 1px var(--color-surface-300);
171
184
  }
185
+ &:hover {
186
+ background-color: var(--color-elevation-state-hover-subtle);
187
+ }
172
188
  }
173
189
  }
174
190
 
package/src/components/organisms/Table/Table.tsx CHANGED
@@ -119,7 +119,7 @@ const NestedContent = <T extends TableRowData<T>>({
119
119
  <tbody>
120
120
  {children.map((child, childIndex) => (
121
121
  <tr
122
- key={`ch-${rowIndex}-${childIndex}`}
122
+ key={`ch-${child.id}-${rowIndex}-${childIndex}`}
123
123
  className={cn(child.className, {
124
124
  'table__row-clickable': onClickRow,
125
125
  })}
@@ -236,7 +236,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
236
236
  );
237
237
 
238
238
  return (
239
- <Fragment key={`rw-${rowIndex}`}>
239
+ <Fragment key={`rw-${row.id}-${rowIndex}`}>
240
240
  {isGrouped ? (
241
241
  row.children && row.children.length > 0 ? (
242
242
  <tr
@@ -273,7 +273,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
273
273
  <AnimatePresence initial={false}>
274
274
  {hasVisibleChildren && (
275
275
  <tr
276
- key={`nested-${rowIndex}`}
276
+ key={`nested-${row.id}-${rowIndex}`}
277
277
  className={cn('table__no-hover', {
278
278
  'table__row-nested':
279
279
  row.children && row.children.length > 0,
@@ -337,7 +337,7 @@ export function Table<T extends TableRowData<T>>(props: TableProps<T>) {
337
337
  </Text>
338
338
  <div>
339
339
  {Object.entries(totalRows).map(([currency, total]) => (
340
- <div key={currency}>
340
+ <div key={`total-${total}-${currency}`}>
341
341
  <Text size="md" variant="bold">
342
342
  {priceFormatter(total, currency)}
343
343
  </Text>