@fattureincloud/fic-design-system 0.10.1 → 0.10.2-tmp

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. package/dist/assets/index-7ee742e8.css +154 -0
  2. package/dist/assets/index-9fc4893a.css +155 -0
  3. package/dist/assets/index.esm-bff8cd71.css +155 -0
  4. package/dist/assets/index.esm-c9d742c9.css +154 -0
  5. package/dist/components/dropdown/DropdownImpl.d.ts +1 -1
  6. package/dist/components/dropdown/dropdown.stories.d.ts +1 -0
  7. package/dist/components/dropdown/styled.d.ts +4 -0
  8. package/dist/components/dropdown/types.d.ts +2 -0
  9. package/dist/components/newTable/Table.d.ts +3 -1
  10. package/dist/components/newTable/components/body/Body.d.ts +3 -2
  11. package/dist/components/newTable/components/cell/Cell.d.ts +3 -1
  12. package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts +3 -1
  13. package/dist/components/newTable/components/cell/styled.d.ts +2 -0
  14. package/dist/components/newTable/components/header/Header.d.ts +3 -1
  15. package/dist/components/newTable/components/header/headerCell/HeaderCell.d.ts +3 -1
  16. package/dist/components/newTable/components/header/headerCell/styled.d.ts +3 -0
  17. package/dist/components/newTable/components/row/Row.d.ts +3 -1
  18. package/dist/components/newTable/styled.d.ts +1 -0
  19. package/dist/components/newTable/types.d.ts +2 -1
  20. package/dist/index.css +154 -0
  21. package/dist/index.esm.js +8 -8
  22. package/dist/index.esm.js.map +1 -1
  23. package/dist/index.js +9 -9
  24. package/dist/index.js.map +1 -1
  25. package/package.json +1 -1
package/dist/assets/index-7ee742e8.css ADDED
@@ -0,0 +1,154 @@
1
+ :root {
2
+ --columns-breakpoint-width: 100px; /* default value */
3
+ --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
+ }
5
+
6
+ .Table-container {
7
+ container-type: inline-size;
8
+ container-name: var(--table-breakpoint);
9
+ }
10
+
11
+ /* width breakpoints corresponds to TableBreakpoints enum */
12
+ @container px100 (width < 100px) {
13
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
14
+ min-width: var(--columns-breakpoint-width);
15
+ max-width: var(--columns-breakpoint-width);
16
+ }
17
+
18
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
19
+ min-width: var(--columns-breakpoint-width);
20
+ max-width: var(--columns-breakpoint-width);
21
+ }
22
+ }
23
+
24
+ @container px200 (width < 200px) {
25
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
26
+ min-width: var(--columns-breakpoint-width);
27
+ max-width: var(--columns-breakpoint-width);
28
+ }
29
+
30
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
31
+ min-width: var(--columns-breakpoint-width);
32
+ max-width: var(--columns-breakpoint-width);
33
+ }
34
+ }
35
+
36
+ @container px300 (width < 300px) {
37
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
38
+ min-width: var(--columns-breakpoint-width);
39
+ max-width: var(--columns-breakpoint-width);
40
+ }
41
+
42
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
43
+ min-width: var(--columns-breakpoint-width);
44
+ max-width: var(--columns-breakpoint-width);
45
+ }
46
+ }
47
+
48
+ @container px400 (width < 400px) {
49
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
50
+ min-width: var(--columns-breakpoint-width);
51
+ max-width: var(--columns-breakpoint-width);
52
+ }
53
+
54
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
55
+ min-width: var(--columns-breakpoint-width);
56
+ max-width: var(--columns-breakpoint-width);
57
+ }
58
+ }
59
+
60
+ @container px500 (width < 500px) {
61
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
62
+ min-width: var(--columns-breakpoint-width);
63
+ max-width: var(--columns-breakpoint-width);
64
+ }
65
+
66
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
67
+ min-width: var(--columns-breakpoint-width);
68
+ max-width: var(--columns-breakpoint-width);
69
+ }
70
+ }
71
+
72
+ @container px600 (width < 600px) {
73
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
74
+ min-width: var(--columns-breakpoint-width);
75
+ max-width: var(--columns-breakpoint-width);
76
+ }
77
+
78
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
79
+ min-width: var(--columns-breakpoint-width);
80
+ max-width: var(--columns-breakpoint-width);
81
+ }
82
+ }
83
+
84
+ @container px700 (width < 700px) {
85
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
86
+ min-width: var(--columns-breakpoint-width);
87
+ max-width: var(--columns-breakpoint-width);
88
+ }
89
+
90
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
91
+ min-width: var(--columns-breakpoint-width);
92
+ max-width: var(--columns-breakpoint-width);
93
+ }
94
+ }
95
+
96
+ @container px800 (width < 800px) {
97
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
98
+ min-width: var(--columns-breakpoint-width);
99
+ max-width: var(--columns-breakpoint-width);
100
+ }
101
+
102
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
103
+ min-width: var(--columns-breakpoint-width);
104
+ max-width: var(--columns-breakpoint-width);
105
+ }
106
+ }
107
+
108
+ @container px900 (width < 900px) {
109
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
110
+ min-width: var(--columns-breakpoint-width);
111
+ max-width: var(--columns-breakpoint-width);
112
+ }
113
+
114
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
115
+ min-width: var(--columns-breakpoint-width);
116
+ max-width: var(--columns-breakpoint-width);
117
+ }
118
+ }
119
+
120
+ @container px1000 (width < 1000px) {
121
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
122
+ min-width: var(--columns-breakpoint-width);
123
+ max-width: var(--columns-breakpoint-width);
124
+ }
125
+
126
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
127
+ min-width: var(--columns-breakpoint-width);
128
+ max-width: var(--columns-breakpoint-width);
129
+ }
130
+ }
131
+
132
+ @container px1100 (width < 1100px) {
133
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
134
+ min-width: var(--columns-breakpoint-width);
135
+ max-width: var(--columns-breakpoint-width);
136
+ }
137
+
138
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
139
+ min-width: var(--columns-breakpoint-width);
140
+ max-width: var(--columns-breakpoint-width);
141
+ }
142
+ }
143
+
144
+ @container px1200 (width < 1200px) {
145
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
146
+ min-width: var(--columns-breakpoint-width);
147
+ max-width: var(--columns-breakpoint-width);
148
+ }
149
+
150
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
151
+ min-width: var(--columns-breakpoint-width);
152
+ max-width: var(--columns-breakpoint-width);
153
+ }
154
+ }
package/dist/assets/index-9fc4893a.css ADDED
@@ -0,0 +1,155 @@
1
+ :root {
2
+ --columns-breakpoint-width: 100px; /* default value */
3
+ --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
+ }
5
+
6
+ .Table-container {
7
+ container-type: inline-size;
8
+ container-name: var(--table-breakpoint);
9
+ background: red;
10
+ }
11
+
12
+ /* width breakpoints corresponds to TableBreakpoints enum */
13
+ @container px100 (width < 100px) {
14
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
15
+ min-width: var(--columns-breakpoint-width);
16
+ max-width: var(--columns-breakpoint-width);
17
+ }
18
+
19
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
20
+ min-width: var(--columns-breakpoint-width);
21
+ max-width: var(--columns-breakpoint-width);
22
+ }
23
+ }
24
+
25
+ @container px200 (width < 200px) {
26
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
27
+ min-width: var(--columns-breakpoint-width);
28
+ max-width: var(--columns-breakpoint-width);
29
+ }
30
+
31
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
32
+ min-width: var(--columns-breakpoint-width);
33
+ max-width: var(--columns-breakpoint-width);
34
+ }
35
+ }
36
+
37
+ @container px300 (width < 300px) {
38
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
39
+ min-width: var(--columns-breakpoint-width);
40
+ max-width: var(--columns-breakpoint-width);
41
+ }
42
+
43
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
44
+ min-width: var(--columns-breakpoint-width);
45
+ max-width: var(--columns-breakpoint-width);
46
+ }
47
+ }
48
+
49
+ @container px400 (width < 400px) {
50
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
51
+ min-width: var(--columns-breakpoint-width);
52
+ max-width: var(--columns-breakpoint-width);
53
+ }
54
+
55
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
56
+ min-width: var(--columns-breakpoint-width);
57
+ max-width: var(--columns-breakpoint-width);
58
+ }
59
+ }
60
+
61
+ @container px500 (width < 500px) {
62
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
63
+ min-width: var(--columns-breakpoint-width);
64
+ max-width: var(--columns-breakpoint-width);
65
+ }
66
+
67
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
68
+ min-width: var(--columns-breakpoint-width);
69
+ max-width: var(--columns-breakpoint-width);
70
+ }
71
+ }
72
+
73
+ @container px600 (width < 600px) {
74
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
75
+ min-width: var(--columns-breakpoint-width);
76
+ max-width: var(--columns-breakpoint-width);
77
+ }
78
+
79
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
80
+ min-width: var(--columns-breakpoint-width);
81
+ max-width: var(--columns-breakpoint-width);
82
+ }
83
+ }
84
+
85
+ @container px700 (width < 700px) {
86
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
87
+ min-width: var(--columns-breakpoint-width);
88
+ max-width: var(--columns-breakpoint-width);
89
+ }
90
+
91
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
92
+ min-width: var(--columns-breakpoint-width);
93
+ max-width: var(--columns-breakpoint-width);
94
+ }
95
+ }
96
+
97
+ @container px800 (width < 800px) {
98
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
99
+ min-width: var(--columns-breakpoint-width);
100
+ max-width: var(--columns-breakpoint-width);
101
+ }
102
+
103
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
104
+ min-width: var(--columns-breakpoint-width);
105
+ max-width: var(--columns-breakpoint-width);
106
+ }
107
+ }
108
+
109
+ @container px900 (width < 900px) {
110
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
111
+ min-width: var(--columns-breakpoint-width);
112
+ max-width: var(--columns-breakpoint-width);
113
+ }
114
+
115
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
116
+ min-width: var(--columns-breakpoint-width);
117
+ max-width: var(--columns-breakpoint-width);
118
+ }
119
+ }
120
+
121
+ @container px1000 (width < 1000px) {
122
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
123
+ min-width: var(--columns-breakpoint-width);
124
+ max-width: var(--columns-breakpoint-width);
125
+ }
126
+
127
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
128
+ min-width: var(--columns-breakpoint-width);
129
+ max-width: var(--columns-breakpoint-width);
130
+ }
131
+ }
132
+
133
+ @container px1100 (width < 1100px) {
134
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
135
+ min-width: var(--columns-breakpoint-width);
136
+ max-width: var(--columns-breakpoint-width);
137
+ }
138
+
139
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
140
+ min-width: var(--columns-breakpoint-width);
141
+ max-width: var(--columns-breakpoint-width);
142
+ }
143
+ }
144
+
145
+ @container px1200 (width < 1200px) {
146
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
147
+ min-width: var(--columns-breakpoint-width);
148
+ max-width: var(--columns-breakpoint-width);
149
+ }
150
+
151
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
152
+ min-width: var(--columns-breakpoint-width);
153
+ max-width: var(--columns-breakpoint-width);
154
+ }
155
+ }
package/dist/assets/index.esm-bff8cd71.css ADDED
@@ -0,0 +1,155 @@
1
+ :root {
2
+ --columns-breakpoint-width: 100px; /* default value */
3
+ --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
+ }
5
+
6
+ .Table-container {
7
+ container-type: inline-size;
8
+ container-name: var(--table-breakpoint);
9
+ background: red;
10
+ }
11
+
12
+ /* width breakpoints corresponds to TableBreakpoints enum */
13
+ @container px100 (width < 100px) {
14
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
15
+ min-width: var(--columns-breakpoint-width);
16
+ max-width: var(--columns-breakpoint-width);
17
+ }
18
+
19
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
20
+ min-width: var(--columns-breakpoint-width);
21
+ max-width: var(--columns-breakpoint-width);
22
+ }
23
+ }
24
+
25
+ @container px200 (width < 200px) {
26
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
27
+ min-width: var(--columns-breakpoint-width);
28
+ max-width: var(--columns-breakpoint-width);
29
+ }
30
+
31
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
32
+ min-width: var(--columns-breakpoint-width);
33
+ max-width: var(--columns-breakpoint-width);
34
+ }
35
+ }
36
+
37
+ @container px300 (width < 300px) {
38
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
39
+ min-width: var(--columns-breakpoint-width);
40
+ max-width: var(--columns-breakpoint-width);
41
+ }
42
+
43
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
44
+ min-width: var(--columns-breakpoint-width);
45
+ max-width: var(--columns-breakpoint-width);
46
+ }
47
+ }
48
+
49
+ @container px400 (width < 400px) {
50
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
51
+ min-width: var(--columns-breakpoint-width);
52
+ max-width: var(--columns-breakpoint-width);
53
+ }
54
+
55
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
56
+ min-width: var(--columns-breakpoint-width);
57
+ max-width: var(--columns-breakpoint-width);
58
+ }
59
+ }
60
+
61
+ @container px500 (width < 500px) {
62
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
63
+ min-width: var(--columns-breakpoint-width);
64
+ max-width: var(--columns-breakpoint-width);
65
+ }
66
+
67
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
68
+ min-width: var(--columns-breakpoint-width);
69
+ max-width: var(--columns-breakpoint-width);
70
+ }
71
+ }
72
+
73
+ @container px600 (width < 600px) {
74
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
75
+ min-width: var(--columns-breakpoint-width);
76
+ max-width: var(--columns-breakpoint-width);
77
+ }
78
+
79
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
80
+ min-width: var(--columns-breakpoint-width);
81
+ max-width: var(--columns-breakpoint-width);
82
+ }
83
+ }
84
+
85
+ @container px700 (width < 700px) {
86
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
87
+ min-width: var(--columns-breakpoint-width);
88
+ max-width: var(--columns-breakpoint-width);
89
+ }
90
+
91
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
92
+ min-width: var(--columns-breakpoint-width);
93
+ max-width: var(--columns-breakpoint-width);
94
+ }
95
+ }
96
+
97
+ @container px800 (width < 800px) {
98
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
99
+ min-width: var(--columns-breakpoint-width);
100
+ max-width: var(--columns-breakpoint-width);
101
+ }
102
+
103
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
104
+ min-width: var(--columns-breakpoint-width);
105
+ max-width: var(--columns-breakpoint-width);
106
+ }
107
+ }
108
+
109
+ @container px900 (width < 900px) {
110
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
111
+ min-width: var(--columns-breakpoint-width);
112
+ max-width: var(--columns-breakpoint-width);
113
+ }
114
+
115
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
116
+ min-width: var(--columns-breakpoint-width);
117
+ max-width: var(--columns-breakpoint-width);
118
+ }
119
+ }
120
+
121
+ @container px1000 (width < 1000px) {
122
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
123
+ min-width: var(--columns-breakpoint-width);
124
+ max-width: var(--columns-breakpoint-width);
125
+ }
126
+
127
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
128
+ min-width: var(--columns-breakpoint-width);
129
+ max-width: var(--columns-breakpoint-width);
130
+ }
131
+ }
132
+
133
+ @container px1100 (width < 1100px) {
134
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
135
+ min-width: var(--columns-breakpoint-width);
136
+ max-width: var(--columns-breakpoint-width);
137
+ }
138
+
139
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
140
+ min-width: var(--columns-breakpoint-width);
141
+ max-width: var(--columns-breakpoint-width);
142
+ }
143
+ }
144
+
145
+ @container px1200 (width < 1200px) {
146
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
147
+ min-width: var(--columns-breakpoint-width);
148
+ max-width: var(--columns-breakpoint-width);
149
+ }
150
+
151
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
152
+ min-width: var(--columns-breakpoint-width);
153
+ max-width: var(--columns-breakpoint-width);
154
+ }
155
+ }
package/dist/assets/index.esm-c9d742c9.css ADDED
@@ -0,0 +1,154 @@
1
+ :root {
2
+ --columns-breakpoint-width: 100px; /* default value */
3
+ --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
+ }
5
+
6
+ .Table-container {
7
+ container-type: inline-size;
8
+ container-name: var(--table-breakpoint);
9
+ }
10
+
11
+ /* width breakpoints corresponds to TableBreakpoints enum */
12
+ @container px100 (width < 100px) {
13
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
14
+ min-width: var(--columns-breakpoint-width);
15
+ max-width: var(--columns-breakpoint-width);
16
+ }
17
+
18
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
19
+ min-width: var(--columns-breakpoint-width);
20
+ max-width: var(--columns-breakpoint-width);
21
+ }
22
+ }
23
+
24
+ @container px200 (width < 200px) {
25
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
26
+ min-width: var(--columns-breakpoint-width);
27
+ max-width: var(--columns-breakpoint-width);
28
+ }
29
+
30
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
31
+ min-width: var(--columns-breakpoint-width);
32
+ max-width: var(--columns-breakpoint-width);
33
+ }
34
+ }
35
+
36
+ @container px300 (width < 300px) {
37
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
38
+ min-width: var(--columns-breakpoint-width);
39
+ max-width: var(--columns-breakpoint-width);
40
+ }
41
+
42
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
43
+ min-width: var(--columns-breakpoint-width);
44
+ max-width: var(--columns-breakpoint-width);
45
+ }
46
+ }
47
+
48
+ @container px400 (width < 400px) {
49
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
50
+ min-width: var(--columns-breakpoint-width);
51
+ max-width: var(--columns-breakpoint-width);
52
+ }
53
+
54
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
55
+ min-width: var(--columns-breakpoint-width);
56
+ max-width: var(--columns-breakpoint-width);
57
+ }
58
+ }
59
+
60
+ @container px500 (width < 500px) {
61
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
62
+ min-width: var(--columns-breakpoint-width);
63
+ max-width: var(--columns-breakpoint-width);
64
+ }
65
+
66
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
67
+ min-width: var(--columns-breakpoint-width);
68
+ max-width: var(--columns-breakpoint-width);
69
+ }
70
+ }
71
+
72
+ @container px600 (width < 600px) {
73
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
74
+ min-width: var(--columns-breakpoint-width);
75
+ max-width: var(--columns-breakpoint-width);
76
+ }
77
+
78
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
79
+ min-width: var(--columns-breakpoint-width);
80
+ max-width: var(--columns-breakpoint-width);
81
+ }
82
+ }
83
+
84
+ @container px700 (width < 700px) {
85
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
86
+ min-width: var(--columns-breakpoint-width);
87
+ max-width: var(--columns-breakpoint-width);
88
+ }
89
+
90
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
91
+ min-width: var(--columns-breakpoint-width);
92
+ max-width: var(--columns-breakpoint-width);
93
+ }
94
+ }
95
+
96
+ @container px800 (width < 800px) {
97
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
98
+ min-width: var(--columns-breakpoint-width);
99
+ max-width: var(--columns-breakpoint-width);
100
+ }
101
+
102
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
103
+ min-width: var(--columns-breakpoint-width);
104
+ max-width: var(--columns-breakpoint-width);
105
+ }
106
+ }
107
+
108
+ @container px900 (width < 900px) {
109
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
110
+ min-width: var(--columns-breakpoint-width);
111
+ max-width: var(--columns-breakpoint-width);
112
+ }
113
+
114
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
115
+ min-width: var(--columns-breakpoint-width);
116
+ max-width: var(--columns-breakpoint-width);
117
+ }
118
+ }
119
+
120
+ @container px1000 (width < 1000px) {
121
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
122
+ min-width: var(--columns-breakpoint-width);
123
+ max-width: var(--columns-breakpoint-width);
124
+ }
125
+
126
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
127
+ min-width: var(--columns-breakpoint-width);
128
+ max-width: var(--columns-breakpoint-width);
129
+ }
130
+ }
131
+
132
+ @container px1100 (width < 1100px) {
133
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
134
+ min-width: var(--columns-breakpoint-width);
135
+ max-width: var(--columns-breakpoint-width);
136
+ }
137
+
138
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
139
+ min-width: var(--columns-breakpoint-width);
140
+ max-width: var(--columns-breakpoint-width);
141
+ }
142
+ }
143
+
144
+ @container px1200 (width < 1200px) {
145
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
146
+ min-width: var(--columns-breakpoint-width);
147
+ max-width: var(--columns-breakpoint-width);
148
+ }
149
+
150
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
151
+ min-width: var(--columns-breakpoint-width);
152
+ max-width: var(--columns-breakpoint-width);
153
+ }
154
+ }
package/dist/components/dropdown/DropdownImpl.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { DropdownProps } from './types';
3
- declare const DropdownImpl: ({ className, content, fullWidth, maxWidth, maxHeight, minWidthAsTrigger, placement, renderContent, renderTrigger, triggerStyles, title, forceOpen, disableArrowNavigation, isDisabled, emptyState, onOpen, withPadding, offsetY, forceClose, onClose, }: DropdownProps) => JSX.Element;
3
+ declare const DropdownImpl: ({ className, content, fullWidth, maxWidth, maxHeight, minWidthAsTrigger, placement, renderContent, renderTrigger, triggerStyles, title, forceOpen, disableArrowNavigation, isDisabled, emptyState, onOpen, withPadding, offsetY, forceClose, onClose, sideButton, }: DropdownProps) => JSX.Element;
4
4
  export default DropdownImpl;
package/dist/components/dropdown/dropdown.stories.d.ts CHANGED
@@ -3,5 +3,6 @@ import { Meta } from '@storybook/react';
3
3
  import { DropdownProps } from './types';
4
4
  export declare const Simple: () => JSX.Element;
5
5
  export declare const WithKnobs: () => JSX.Element;
6
+ export declare const WithButton: () => JSX.Element;
6
7
  declare const DropdownStories: Meta<DropdownProps>;
7
8
  export default DropdownStories;
package/dist/components/dropdown/styled.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ export declare const WithButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const LeftButton: import("styled-components").StyledComponent<({ className, color, fullWidth, href, iconLeft, iconRight, isDisabled, isLoading, onClick, size, target, text, type, }: import("../buttons").ButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const RightButton: import("styled-components").StyledComponent<({ className, color, fullWidth, href, iconLeft, iconRight, isDisabled, isLoading, onClick, size, target, text, type, }: import("../buttons").ButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
package/dist/components/dropdown/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Placement } from '@popperjs/core/lib/enums';
2
2
  import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
3
+ import { ButtonProps } from '../buttons';
3
4
  import { IconProps } from '../icon';
4
5
  export declare type TitleProps = {
5
6
  text: string;
@@ -27,6 +28,7 @@ export declare type DropdownProps = {
27
28
  withPadding?: boolean;
28
29
  offsetY?: number;
29
30
  forceClose?: boolean;
31
+ sideButton?: Pick<ButtonProps, 'text' | 'iconLeft' | 'iconRight' | 'onClick'>;
30
32
  };
31
33
  export declare type DropdownItemType = 'default' | 'danger' | 'success' | 'warning' | 'link';
32
34
  export interface DropdownItemProps {
package/dist/components/newTable/Table.d.ts CHANGED
@@ -29,6 +29,8 @@ import { TableProps } from './types';
29
29
  * @param {function} onRowClick Callback called after a click on a row, returns the row
30
30
  * @param {number} rowIdHighlight id of the row that will be highlighted
31
31
  * @param {number} actionColumnWidth used to determine the width of the action column
32
+ * @param {string} columnsBreakpointWidth fixed length that columns get below the breakpoint set with {tableBreakpoint} prop
33
+ * @param {string} tableBreakpoint table breakpoint below which the columns of the table get a fixed length
32
34
  */
33
- declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowIdHighlight, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, resetPageIndex, }: TableProps<T>) => JSX.Element;
35
+ declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowIdHighlight, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, resetPageIndex, columnsBreakpointWidth, tableBreakpoint, }: TableProps<T>) => JSX.Element;
34
36
  export default Table;
package/dist/components/newTable/components/body/Body.d.ts CHANGED
@@ -7,7 +7,8 @@ interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'r
7
7
  onRowClick?: (row: Row<T>) => void;
8
8
  pageIndex: number;
9
9
  actionColumnWidth: number;
10
- disableScrollX?: boolean;
10
+ fixedWidthCells: boolean;
11
+ columnsBreakpointWidth: string;
11
12
  }
12
- declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowIdHighlight, rowHighlightColor, pageIndex, actionColumnWidth, disableScrollX, }: BodyProps<T>) => JSX.Element;
13
+ declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowIdHighlight, rowHighlightColor, pageIndex, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: BodyProps<T>) => JSX.Element;
13
14
  export default Body;
package/dist/components/newTable/components/cell/Cell.d.ts CHANGED
@@ -9,6 +9,8 @@ interface Props<T> {
9
9
  isLoading?: boolean;
10
10
  onRowClick?: (row: Row<T>) => void;
11
11
  actionColumnWidth: number;
12
+ fixedWidthCells: boolean;
13
+ columnsBreakpointWidth: string;
12
14
  }
13
- declare const Cell: <T>({ cell, row, hover, rowSize, isLoading, onRowClick, actionColumnWidth }: Props<T>) => JSX.Element;
15
+ declare const Cell: <T>({ cell, row, hover, rowSize, isLoading, onRowClick, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: Props<T>) => JSX.Element;
14
16
  export default Cell;