@snack-uikit/table 0.31.1 → 0.32.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 (71) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +2 -0
  3. package/dist/cjs/components/Table/Table.d.ts +1 -1
  4. package/dist/cjs/components/Table/Table.js +101 -101
  5. package/dist/cjs/components/Table/styles.module.css +4 -3
  6. package/dist/cjs/components/types.d.ts +1 -0
  7. package/dist/cjs/helperComponents/Cells/BodyCell/BodyCell.d.ts +2 -1
  8. package/dist/cjs/helperComponents/Cells/BodyCell/BodyCell.js +4 -2
  9. package/dist/cjs/helperComponents/Cells/BodyCell/styles.module.css +8 -2
  10. package/dist/cjs/helperComponents/Cells/CopyCell/CopyCell.js +1 -1
  11. package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.d.ts +2 -1
  12. package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.js +4 -2
  13. package/dist/cjs/helperComponents/Cells/HeaderCell/styles.module.css +10 -1
  14. package/dist/cjs/helperComponents/Cells/StatusCell/styles.module.css +3 -3
  15. package/dist/cjs/helperComponents/Cells/TreeCell/TreeCell.d.ts +1 -1
  16. package/dist/cjs/helperComponents/Cells/TreeCell/TreeCell.js +28 -30
  17. package/dist/cjs/helperComponents/Cells/TreeCell/TreeLine/styles.module.css +2 -2
  18. package/dist/cjs/helperComponents/Cells/TreeCell/styles.module.css +16 -34
  19. package/dist/cjs/helperComponents/Rows/BodyRow.d.ts +3 -2
  20. package/dist/cjs/helperComponents/Rows/BodyRow.js +9 -4
  21. package/dist/cjs/helperComponents/Rows/HeaderRow.d.ts +2 -1
  22. package/dist/cjs/helperComponents/Rows/HeaderRow.js +11 -4
  23. package/dist/cjs/helperComponents/Rows/Row.d.ts +3 -3
  24. package/dist/cjs/helperComponents/Rows/Row.js +4 -2
  25. package/dist/cjs/helperComponents/Rows/styles.module.css +14 -6
  26. package/dist/cjs/helperComponents/TableEmptyState/styles.module.css +1 -1
  27. package/dist/esm/components/Table/Table.d.ts +1 -1
  28. package/dist/esm/components/Table/Table.js +15 -17
  29. package/dist/esm/components/Table/styles.module.css +4 -3
  30. package/dist/esm/components/types.d.ts +1 -0
  31. package/dist/esm/helperComponents/Cells/BodyCell/BodyCell.d.ts +2 -1
  32. package/dist/esm/helperComponents/Cells/BodyCell/BodyCell.js +2 -2
  33. package/dist/esm/helperComponents/Cells/BodyCell/styles.module.css +8 -2
  34. package/dist/esm/helperComponents/Cells/CopyCell/CopyCell.js +1 -1
  35. package/dist/esm/helperComponents/Cells/HeaderCell/HeaderCell.d.ts +2 -1
  36. package/dist/esm/helperComponents/Cells/HeaderCell/HeaderCell.js +2 -2
  37. package/dist/esm/helperComponents/Cells/HeaderCell/styles.module.css +10 -1
  38. package/dist/esm/helperComponents/Cells/StatusCell/styles.module.css +3 -3
  39. package/dist/esm/helperComponents/Cells/TreeCell/TreeCell.d.ts +1 -1
  40. package/dist/esm/helperComponents/Cells/TreeCell/TreeCell.js +26 -28
  41. package/dist/esm/helperComponents/Cells/TreeCell/TreeLine/TreeLine.js +2 -2
  42. package/dist/esm/helperComponents/Cells/TreeCell/TreeLine/styles.module.css +2 -2
  43. package/dist/esm/helperComponents/Cells/TreeCell/styles.module.css +16 -34
  44. package/dist/esm/helperComponents/Rows/BodyRow.d.ts +3 -2
  45. package/dist/esm/helperComponents/Rows/BodyRow.js +2 -2
  46. package/dist/esm/helperComponents/Rows/HeaderRow.d.ts +2 -1
  47. package/dist/esm/helperComponents/Rows/HeaderRow.js +2 -2
  48. package/dist/esm/helperComponents/Rows/Row.d.ts +3 -3
  49. package/dist/esm/helperComponents/Rows/Row.js +2 -2
  50. package/dist/esm/helperComponents/Rows/styles.module.css +14 -6
  51. package/dist/esm/helperComponents/TableEmptyState/styles.module.css +1 -1
  52. package/package.json +2 -2
  53. package/src/components/Table/Table.tsx +110 -117
  54. package/src/components/Table/styles.module.scss +4 -8
  55. package/src/components/types.ts +3 -0
  56. package/src/helperComponents/Cells/BodyCell/BodyCell.tsx +3 -1
  57. package/src/helperComponents/Cells/BodyCell/styles.module.scss +6 -1
  58. package/src/helperComponents/Cells/CopyCell/CopyCell.tsx +1 -1
  59. package/src/helperComponents/Cells/CopyCell/styles.module.scss +1 -1
  60. package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx +8 -2
  61. package/src/helperComponents/Cells/HeaderCell/styles.module.scss +9 -0
  62. package/src/helperComponents/Cells/StatusCell/styles.module.scss +9 -7
  63. package/src/helperComponents/Cells/TreeCell/TreeCell.tsx +51 -42
  64. package/src/helperComponents/Cells/TreeCell/TreeLine/TreeLine.tsx +2 -2
  65. package/src/helperComponents/Cells/TreeCell/TreeLine/styles.module.scss +8 -8
  66. package/src/helperComponents/Cells/TreeCell/styles.module.scss +36 -55
  67. package/src/helperComponents/Rows/BodyRow.tsx +7 -6
  68. package/src/helperComponents/Rows/HeaderRow.tsx +15 -6
  69. package/src/helperComponents/Rows/Row.tsx +10 -3
  70. package/src/helperComponents/Rows/styles.module.scss +30 -19
  71. package/src/helperComponents/TableEmptyState/styles.module.scss +1 -1
package/src/helperComponents/Rows/styles.module.scss CHANGED
@@ -18,11 +18,15 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
18
18
 
19
19
  box-sizing: border-box;
20
20
 
21
- border-color: transparent;
22
-
23
21
  background-color: $snack-ui-table-row-background;
22
+ border-color: transparent;
24
23
  border-style: solid none;
24
+ height: styles-theme-variables.$size-table-line-height;
25
25
 
26
+ &[data-auto-height] {
27
+ height: auto;
28
+ min-height: styles-theme-variables.$size-table-line-height;
29
+ }
26
30
  }
27
31
 
28
32
  .rowPinnedCells {
@@ -84,25 +88,17 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
84
88
  content: '';
85
89
 
86
90
  position: absolute;
87
- top: calc(-1 * #{styles-theme-variables.$border-width-table});
88
- left: 0;
89
-
90
91
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
91
92
  z-index: 2;
93
+ top: calc(-1 * #{styles-theme-variables.$border-width-table});
94
+ left: 0;
92
95
 
93
96
  width: 100%;
94
-
95
97
  height: styles-tokens-table.$border-width-table-line;
96
98
 
97
99
  background-color: styles-tokens-table.$sys-neutral-decor-disabled;
98
100
  }
99
101
 
100
- &:hover, &:hover + & {
101
- &::before {
102
- height: 0;
103
- }
104
- }
105
-
106
102
  &[data-disabled] {
107
103
  cursor: not-allowed;
108
104
  background-color: styles-tokens-table.$sys-neutral-background;
@@ -114,6 +110,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
114
110
 
115
111
  &[data-selected] {
116
112
  background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
113
+
117
114
  .rowPinnedCells {
118
115
  background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
119
116
  border-color: styles-tokens-table.$sys-primary-decor-activated;
@@ -134,14 +131,28 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
134
131
  cursor: pointer;
135
132
  }
136
133
 
137
- &:not([data-disabled]):not([data-selected]) {
138
- &:hover, &[data-actions-opened] {
139
- background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
140
- border-color: styles-tokens-table.$sys-neutral-decor-hovered;
134
+ &:not([data-disabled]) {
135
+ &:hover {
136
+ &::before {
137
+ height: 0;
138
+ }
139
+ }
141
140
 
142
- .rowPinnedCells {
143
- background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
144
- border-color: inherit;
141
+ &:not([data-selected]) {
142
+ &:hover, &[data-actions-opened] {
143
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
144
+ border-color: styles-tokens-table.$sys-neutral-decor-hovered;
145
+
146
+ .rowPinnedCells {
147
+ background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
148
+ border-color: inherit;
149
+ }
150
+ }
151
+ }
152
+
153
+ &:hover + .bodyRow {
154
+ &::before {
155
+ height: 0;
145
156
  }
146
157
  }
147
158
  }
package/src/helperComponents/TableEmptyState/styles.module.scss CHANGED
@@ -7,6 +7,6 @@
7
7
  justify-content: center;
8
8
 
9
9
  box-sizing: border-box;
10
- height: calc((var(--page-size, 10) * styles-tokens-table.$size-table-line-height) + styles-tokens-table.$size-table-line-height);
10
+ height: styles-tokens-table.$size-table-information-min-height;
11
11
  padding: styles-tokens-table.$dimension-3m;
12
12
  }