@fattureincloud/fic-design-system 0.11.1 → 0.11.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) 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/modals/types.d.ts +1 -0
  6. package/dist/index.css +130 -104
  7. package/dist/index.esm.js +1 -1
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/index.js.map +1 -1
  11. package/package.json +1 -1
  12. package/dist/components/banner/utils.d.ts +0 -8
  13. package/dist/components/chips/chips.d.ts +0 -7
  14. package/dist/components/chips/chips.stories.d.ts +0 -6
  15. package/dist/components/chips/components/styledChipWrapper.d.ts +0 -4
  16. package/dist/components/chips/index.d.ts +0 -2
  17. package/dist/components/chips/types.d.ts +0 -11
  18. package/dist/components/drawer/types.d.ts +0 -14
  19. package/dist/components/form/checkbox/components/Input.d.ts +0 -9
  20. package/dist/components/form/checkbox/components/Label.d.ts +0 -8
  21. package/dist/components/form/datepicker/StyledDatePicker.d.ts +0 -1
  22. package/dist/components/form/datepicker/hooks/useDatePickerValues.d.ts +0 -13
  23. package/dist/components/form/inputText/components/codeInput/CodeInput.d.ts +0 -4
  24. package/dist/components/form/inputText/components/codeInput/styled.d.ts +0 -29
  25. package/dist/components/form/inputText/components/codeInput/useCodeInputHooks.d.ts +0 -11
  26. package/dist/components/form/inputText/components/telephoneInput/TelephoneInput.d.ts +0 -4
  27. package/dist/components/form/inputText/components/telephoneInput/countriesTelephonePrefixes.d.ts +0 -7
  28. package/dist/components/form/inputText/components/telephoneInput/styled.d.ts +0 -2
  29. package/dist/components/form/select/components/Placeholder.d.ts +0 -4
  30. package/dist/components/gridCard/GridCard.d.ts +0 -4
  31. package/dist/components/gridCard/gridCard.stories.d.ts +0 -8
  32. package/dist/components/gridCard/index.d.ts +0 -2
  33. package/dist/components/gridCard/stories/data.d.ts +0 -3
  34. package/dist/components/gridCard/styled.d.ts +0 -15
  35. package/dist/components/gridCard/types.d.ts +0 -16
  36. package/dist/components/gridCard/utils.d.ts +0 -2
  37. package/dist/components/groupRadioButton/index.d.ts +0 -23
  38. package/dist/components/groupRadioButton/radio-group.stories.d.ts +0 -6
  39. package/dist/components/inlineMessages/components/styledInlineMessageWrapper.d.ts +0 -8
  40. package/dist/components/inlineMessages/index.d.ts +0 -2
  41. package/dist/components/inlineMessages/inlineMessages.d.ts +0 -4
  42. package/dist/components/inlineMessages/inlineMessages.stories.d.ts +0 -7
  43. package/dist/components/inlineMessages/types.d.ts +0 -29
  44. package/dist/components/newTable/components/header/styled.d.ts +0 -1
  45. package/dist/components/pagination/paginationStyledWrapper.d.ts +0 -1
  46. package/dist/components/progressbar/components/styledProgressbarWrapper.d.ts +0 -2
  47. package/dist/components/radioButton/components/label.d.ts +0 -2
  48. package/dist/components/radioButton/components/radio.d.ts +0 -2
  49. package/dist/components/radioButton/index.d.ts +0 -2
  50. package/dist/components/radioButton/radio.stories.d.ts +0 -6
  51. package/dist/components/radioButton/typings/radioButton.d.ts +0 -21
  52. package/dist/components/table/Table.d.ts +0 -57
  53. package/dist/components/table/components/ActionsCell.d.ts +0 -10
  54. package/dist/components/table/components/EmptyState.d.ts +0 -7
  55. package/dist/components/table/components/Pagination.d.ts +0 -8
  56. package/dist/components/table/components/SelectedRowsCount.d.ts +0 -7
  57. package/dist/components/table/components/SortIndicator.d.ts +0 -6
  58. package/dist/components/table/components/TableBody.d.ts +0 -14
  59. package/dist/components/table/components/TableFoot.d.ts +0 -2
  60. package/dist/components/table/components/TableHeader.d.ts +0 -7
  61. package/dist/components/table/components/actions/ActionsCell.d.ts +0 -10
  62. package/dist/components/table/components/actions/DropdownActions.d.ts +0 -10
  63. package/dist/components/table/components/actions/PrimaryAction.d.ts +0 -12
  64. package/dist/components/table/components/checkboxes/Cell.d.ts +0 -5
  65. package/dist/components/table/components/checkboxes/Header.d.ts +0 -5
  66. package/dist/components/table/components/checkboxes/useHeaderCheckboxProps.d.ts +0 -12
  67. package/dist/components/table/components/loadingCell/LoadingCell.d.ts +0 -8
  68. package/dist/components/table/components/pagination/PageButton.d.ts +0 -10
  69. package/dist/components/table/components/pagination/PaginationButtons.d.ts +0 -10
  70. package/dist/components/table/components/pagination/utils.d.ts +0 -14
  71. package/dist/components/table/components/tableBody/TableBody.d.ts +0 -17
  72. package/dist/components/table/components/tableBody/TableBodyLoader.d.ts +0 -7
  73. package/dist/components/table/components/tableBody/TableBodyTr.d.ts +0 -8
  74. package/dist/components/table/components/tableBody/styled.d.ts +0 -3
  75. package/dist/components/table/components/tableHeader/SortIndicator.d.ts +0 -7
  76. package/dist/components/table/components/tableHeader/TableHeader.d.ts +0 -12
  77. package/dist/components/table/components/tableParts/TableTd.d.ts +0 -8
  78. package/dist/components/table/components/tableParts/TableTh.d.ts +0 -4
  79. package/dist/components/table/components/tableParts/styled.d.ts +0 -17
  80. package/dist/components/table/constants.d.ts +0 -2
  81. package/dist/components/table/hooks/useCheckboxesComponents.d.ts +0 -4
  82. package/dist/components/table/hooks/useRowsSelection.d.ts +0 -4
  83. package/dist/components/table/hooks/useTableHooks.d.ts +0 -6
  84. package/dist/components/table/hooks/useTableValues.d.ts +0 -14
  85. package/dist/components/table/index.d.ts +0 -7
  86. package/dist/components/table/stories/columns.d.ts +0 -3
  87. package/dist/components/table/stories/components/CustomPerson.d.ts +0 -7
  88. package/dist/components/table/stories/components/Role.d.ts +0 -8
  89. package/dist/components/table/stories/components/types.d.ts +0 -14
  90. package/dist/components/table/stories/data.d.ts +0 -2
  91. package/dist/components/table/table.stories.d.ts +0 -6
  92. package/dist/components/table/tablePalette.d.ts +0 -33
  93. package/dist/components/table/types.d.ts +0 -28
  94. package/dist/components/table/utils.d.ts +0 -16
  95. package/dist/components/tip/components/styledTip.d.ts +0 -4
  96. package/dist/components/toast/ToastContainer.d.ts +0 -9
  97. package/dist/components/toast/typings/toast.d.ts +0 -34
  98. package/dist/index.esm.css +0 -128
  99. package/dist/styles/defaultPalette/colors/azure.d.ts +0 -2
  100. package/dist/styles/defaultPalette/colors/purple.d.ts +0 -2
  101. /package/dist/components/floatingBadge/{floatingBadge.d.ts → FloatingBadge.d.ts} +0 -0
  102. /package/dist/components/floatingBadge/{withBadge.d.ts → WithBadge.d.ts} +0 -0
  103. /package/dist/components/progressbar/{progressbar.d.ts → ProgressBar.d.ts} +0 -0
  104. /package/dist/components/progressbar/{progressbar.stories.d.ts → progressBar.stories.d.ts} +0 -0
  105. /package/dist/components/tip/{shortcutTip.d.ts → ShortcutTip.d.ts} +0 -0
  106. /package/dist/components/tip/{tip.d.ts → Tip.d.ts} +0 -0
  107. /package/dist/components/toast/{toast.d.ts → Toast.d.ts} +0 -0
  108. /package/dist/components/toast/components/{toastContent.d.ts → ToastContent.d.ts} +0 -0
@@ -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
+ }
@@ -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
+ }
@@ -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
+ }
@@ -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
+ }
@@ -31,6 +31,7 @@ export interface ModalPropsInterface {
31
31
  isConfirmModal?: boolean;
32
32
  sizeCloseX?: SizeProp;
33
33
  zIndex?: number;
34
+ disableInfoTooltip?: boolean;
34
35
  }
35
36
  export interface StyledModalBoxProps {
36
37
  isFullscreen?: boolean;