@progress/kendo-themes-html 6.2.1-dev.0 → 6.2.1-dev.44

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 (116) hide show
  1. package/dist/action-sheet/tests/action-sheet-data-table.js +382 -2
  2. package/dist/action-sheet/tests/action-sheet-data-table.js.map +4 -4
  3. package/dist/dropdowngrid/dropdowngrid.js +1 -1
  4. package/dist/dropdowngrid/dropdowngrid.js.map +2 -2
  5. package/dist/dropdowngrid/tests/dropdowngrid-flat.js +1 -1
  6. package/dist/dropdowngrid/tests/dropdowngrid-flat.js.map +2 -2
  7. package/dist/dropdowngrid/tests/dropdowngrid-outline.js +1 -1
  8. package/dist/dropdowngrid/tests/dropdowngrid-outline.js.map +2 -2
  9. package/dist/dropdowngrid/tests/dropdowngrid.js +1 -1
  10. package/dist/dropdowngrid/tests/dropdowngrid.js.map +2 -2
  11. package/dist/fab/fab-item.js +104 -0
  12. package/dist/fab/fab-item.js.map +7 -0
  13. package/dist/fab/fab-items.js +64 -0
  14. package/dist/fab/fab-items.js.map +7 -0
  15. package/dist/fab/tests/fab-items.js +51 -4
  16. package/dist/fab/tests/fab-items.js.map +4 -4
  17. package/dist/fab/tests/fab-position.js +6 -0
  18. package/dist/fab/tests/fab-position.js.map +4 -4
  19. package/dist/fab/tests/fab-size.js +6 -0
  20. package/dist/fab/tests/fab-size.js.map +4 -4
  21. package/dist/fab/tests/fab-states.js +6 -0
  22. package/dist/fab/tests/fab-states.js.map +4 -4
  23. package/dist/fab/tests/fab.js +6 -0
  24. package/dist/fab/tests/fab.js.map +4 -4
  25. package/dist/grid/tests/grid-rows-resizing.js +1131 -0
  26. package/dist/grid/tests/grid-rows-resizing.js.map +7 -0
  27. package/dist/index.js +711 -184
  28. package/dist/index.js.map +4 -4
  29. package/dist/popup/tests/popup-dropdowngrid.js +508 -0
  30. package/dist/popup/tests/popup-dropdowngrid.js.map +7 -0
  31. package/dist/table/data-table.js +97 -0
  32. package/dist/table/data-table.js.map +7 -0
  33. package/dist/table/table-body.js +67 -0
  34. package/dist/table/table-body.js.map +7 -0
  35. package/dist/table/table-footer.js +66 -0
  36. package/dist/table/table-footer.js.map +7 -0
  37. package/dist/table/table-group-header.js +66 -0
  38. package/dist/table/table-group-header.js.map +7 -0
  39. package/dist/table/table-group-row.js +66 -0
  40. package/dist/table/table-group-row.js.map +7 -0
  41. package/dist/table/table-group-sticky-header.js +66 -0
  42. package/dist/table/table-group-sticky-header.js.map +7 -0
  43. package/dist/table/table-header.js +115 -0
  44. package/dist/table/table-header.js.map +7 -0
  45. package/dist/table/table-list-group-row.js +66 -0
  46. package/dist/table/table-list-group-row.js.map +7 -0
  47. package/dist/table/table-list-row.js +78 -0
  48. package/dist/table/table-list-row.js.map +7 -0
  49. package/dist/table/table-list-td.js +103 -0
  50. package/dist/table/table-list-td.js.map +7 -0
  51. package/dist/table/table-list-th.js +103 -0
  52. package/dist/table/table-list-th.js.map +7 -0
  53. package/dist/table/table-list.js +97 -0
  54. package/dist/table/table-list.js.map +7 -0
  55. package/dist/table/table-row.js +78 -0
  56. package/dist/table/table-row.js.map +7 -0
  57. package/dist/table/table-tbody.js +66 -0
  58. package/dist/table/table-tbody.js.map +7 -0
  59. package/dist/table/table-td.js +105 -0
  60. package/dist/table/table-td.js.map +7 -0
  61. package/dist/table/table-tfoot.js +66 -0
  62. package/dist/table/table-tfoot.js.map +7 -0
  63. package/dist/table/table-th.js +105 -0
  64. package/dist/table/table-th.js.map +7 -0
  65. package/dist/table/table-thead.js +66 -0
  66. package/dist/table/table-thead.js.map +7 -0
  67. package/dist/table/table.js +94 -0
  68. package/dist/table/table.js.map +7 -0
  69. package/dist/table/tests/table-data-sizes.js +392 -1
  70. package/dist/table/tests/table-data-sizes.js.map +4 -4
  71. package/dist/table/tests/table-list-jquery.js +409 -1
  72. package/dist/table/tests/table-list-jquery.js.map +4 -4
  73. package/dist/table/tests/table-list-sizes.js +453 -1
  74. package/dist/table/tests/table-list-sizes.js.map +4 -4
  75. package/dist/table/tests/table-list-virtual.js +373 -1
  76. package/dist/table/tests/table-list-virtual.js.map +4 -4
  77. package/dist/table/tests/table-native-sizes.js +335 -1
  78. package/dist/table/tests/table-native-sizes.js.map +4 -4
  79. package/dist/table/tests/table-native-states.js +299 -1
  80. package/dist/table/tests/table-native-states.js.map +4 -4
  81. package/package.json +2 -2
  82. package/src/action-sheet/tests/action-sheet-data-table.tsx +119 -144
  83. package/src/dropdowngrid/dropdowngrid.tsx +1 -1
  84. package/src/fab/fab-item.tsx +48 -0
  85. package/src/fab/fab-items.tsx +32 -0
  86. package/src/fab/index.ts +2 -0
  87. package/src/fab/tests/fab-items.tsx +65 -250
  88. package/src/grid/tests/grid-rows-resizing.tsx +202 -0
  89. package/src/index.ts +3 -0
  90. package/src/popup/tests/popup-dropdowngrid.tsx +163 -0
  91. package/src/table/data-table.tsx +37 -0
  92. package/src/table/index.ts +19 -0
  93. package/src/table/table-body.tsx +29 -0
  94. package/src/table/table-footer.tsx +28 -0
  95. package/src/table/table-group-header.tsx +28 -0
  96. package/src/table/table-group-row.tsx +28 -0
  97. package/src/table/table-group-sticky-header.tsx +28 -0
  98. package/src/table/table-header.tsx +31 -0
  99. package/src/table/table-list-group-row.tsx +28 -0
  100. package/src/table/table-list-row.tsx +45 -0
  101. package/src/table/table-list-td.tsx +38 -0
  102. package/src/table/table-list-th.tsx +38 -0
  103. package/src/table/table-list.tsx +37 -0
  104. package/src/table/table-row.tsx +45 -0
  105. package/src/table/table-tbody.tsx +28 -0
  106. package/src/table/table-td.tsx +39 -0
  107. package/src/table/table-tfoot.tsx +28 -0
  108. package/src/table/table-th.tsx +39 -0
  109. package/src/table/table-thead.tsx +28 -0
  110. package/src/table/table.tsx +33 -0
  111. package/src/table/tests/table-data-sizes.tsx +205 -228
  112. package/src/table/tests/table-list-jquery.tsx +187 -204
  113. package/src/table/tests/table-list-sizes.tsx +178 -189
  114. package/src/table/tests/table-list-virtual.tsx +76 -79
  115. package/src/table/tests/table-native-sizes.tsx +157 -168
  116. package/src/table/tests/table-native-states.tsx +62 -61
package/src/fab/tests/fab-items.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
- import { Icon } from '../../icon';
4
- import { FloatingActionButton } from '../../fab';
3
+ import { FloatingActionButton, FloatingActionButtonItems, FloatingActionButtonItem } from '../../fab';
5
4
 
6
5
  const root = ReactDOM.createRoot(
7
6
  document.getElementById('app') as HTMLElement
@@ -32,74 +31,35 @@ root.render(
32
31
  <span className="relative-container">
33
32
  <FloatingActionButton icon="plus" size="small" position="top-end" style={{ top: "16px", right: "16px" }} />
34
33
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
35
- <ul className="k-fab-items k-fab-items-sm k-fab-items-bottom">
36
- <li className="k-fab-item k-text-right">
37
- <span className="k-fab-item-text">Normal</span>
38
- <Icon className="k-fab-item-icon" name="pencil" />
39
- </li>
40
- <li className="k-fab-item k-text-right k-hover">
41
- <span className="k-fab-item-text">Hover long text</span>
42
- <Icon className="k-fab-item-icon" name="pencil" />
43
- </li>
44
- <li className="k-fab-item k-text-right k-focus">
45
- <span className="k-fab-item-text">Focus</span>
46
- <Icon className="k-fab-item-icon" name="pencil" />
47
- </li>
48
- <li className="k-fab-item k-text-right k-active">
49
- <span className="k-fab-item-text">Active</span>
50
- <Icon className="k-fab-item-icon" name="pencil" />
51
- </li>
52
- <li className="k-fab-item k-text-right k-disabled">
53
- <span className="k-fab-item-text">Disabled</span>
54
- <Icon className="k-fab-item-icon" name="cancel" />
55
- </li>
56
- </ul>
34
+ <FloatingActionButtonItems position="bottom">
35
+ <FloatingActionButtonItem text="Normal" icon="pencil" align="right" />
36
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
37
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
38
+ <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
39
+ <FloatingActionButtonItem text="Disabled" icon="cancel" align="right" disabled />
40
+ </FloatingActionButtonItems>
57
41
  </div>
58
42
  </span>
59
43
  <span className="relative-container">
60
44
  <FloatingActionButton icon="plus" size="medium" position="top-end" style={{ top: "16px", right: "16px" }} />
61
45
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
62
- <ul className="k-fab-items k-fab-items-md k-fab-items-bottom">
63
- <li className="k-fab-item k-text-right k-hover">
64
- <span className="k-fab-item-text">Hover long text</span>
65
- <Icon className="k-fab-item-icon" name="pencil" />
66
- </li>
67
- <li className="k-fab-item k-text-right k-focus">
68
- <span className="k-fab-item-text">Focus</span>
69
- <Icon className="k-fab-item-icon" name="pencil" />
70
- </li>
71
- <li className="k-fab-item k-text-right k-active">
72
- <span className="k-fab-item-text">Active</span>
73
- <Icon className="k-fab-item-icon" name="pencil" />
74
- </li>
75
- <li className="k-fab-item k-text-right k-disabled k-focus">
76
- <span className="k-fab-item-text">Disabled & Focus</span>
77
- <Icon className="k-fab-item-icon" name="cancel" />
78
- </li>
79
- </ul>
46
+ <FloatingActionButtonItems position="bottom">
47
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
48
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
49
+ <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
50
+ <FloatingActionButtonItem text="Disabled & Focus" icon="cancel" align="right" disabled focus />
51
+ </FloatingActionButtonItems>
80
52
  </div>
81
53
  </span>
82
54
  <span className="relative-container">
83
55
  <FloatingActionButton icon="plus" size="large" position="top-end" style={{ top: "16px", right: "16px" }} />
84
56
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
85
- <ul className="k-fab-items k-fab-items-lg k-fab-items-bottom">
86
- <li className="k-fab-item k-text-right k-hover">
87
- <span className="k-fab-item-text">Hover long text</span>
88
- <Icon className="k-fab-item-icon" name="pencil" />
89
- </li>
90
- <li className="k-fab-item k-text-right k-focus">
91
- <span className="k-fab-item-text">Focus</span>
92
- <Icon className="k-fab-item-icon" name="pencil" />
93
- </li>
94
- <li className="k-fab-item k-text-right k-active">
95
- <span className="k-fab-item-text">Active</span>
96
- <Icon className="k-fab-item-icon" name="pencil" />
97
- </li>
98
- <li className="k-fab-item k-text-right k-disabled">
99
- <span className="k-fab-item-text">Disabled</span>
100
- <Icon className="k-fab-item-icon" name="cancel" />
101
- </li>
102
- </ul>
57
+ <FloatingActionButtonItems position="bottom">
58
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
59
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
60
+ <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
61
+ <FloatingActionButtonItem text="Disabled" icon="cancel" align="right" disabled />
62
+ </FloatingActionButtonItems>
103
63
  </div>
104
64
  </span>
105
65
 
@@ -107,58 +67,31 @@ root.render(
107
67
  <span className="relative-container">
108
68
  <FloatingActionButton icon="plus" size="small" position="top-start" style={{ top: "16px", left: "16px" }} />
109
69
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
110
- <ul className="k-fab-items k-fab-items-bottom">
111
- <li className="k-fab-item k-text-left k-hover">
112
- <span className="k-fab-item-text">Hover long text</span>
113
- <Icon className="k-fab-item-icon" name="pencil" />
114
- </li>
115
- <li className="k-fab-item k-text-left k-focus">
116
- <span className="k-fab-item-text">Focus</span>
117
- <Icon className="k-fab-item-icon" name="pencil" />
118
- </li>
119
- <li className="k-fab-item k-text-left k-active">
120
- <span className="k-fab-item-text">Active</span>
121
- <Icon className="k-fab-item-icon" name="pencil" />
122
- </li>
123
- </ul>
70
+ <FloatingActionButtonItems position="bottom">
71
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
72
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
73
+ <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
74
+ </FloatingActionButtonItems>
124
75
  </div>
125
76
  </span>
126
77
  <span className="relative-container">
127
78
  <FloatingActionButton icon="plus" size="medium" position="top-start" style={{ top: "16px", left: "16px" }} />
128
79
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
129
- <ul className="k-fab-items k-fab-items-bottom">
130
- <li className="k-fab-item k-text-left k-hover">
131
- <span className="k-fab-item-text">Hover long text</span>
132
- <Icon className="k-fab-item-icon" name="pencil" />
133
- </li>
134
- <li className="k-fab-item k-text-left k-focus">
135
- <span className="k-fab-item-text">Focus</span>
136
- <Icon className="k-fab-item-icon" name="pencil" />
137
- </li>
138
- <li className="k-fab-item k-text-left k-active">
139
- <span className="k-fab-item-text">Active</span>
140
- <Icon className="k-fab-item-icon" name="pencil" />
141
- </li>
142
- </ul>
80
+ <FloatingActionButtonItems position="bottom">
81
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
82
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
83
+ <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
84
+ </FloatingActionButtonItems>
143
85
  </div>
144
86
  </span>
145
87
  <span className="relative-container">
146
88
  <FloatingActionButton icon="plus" size="large" position="top-start" style={{ top: "16px", left: "16px" }} />
147
89
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
148
- <ul className="k-fab-items k-fab-items-bottom">
149
- <li className="k-fab-item k-text-left k-hover">
150
- <span className="k-fab-item-text">Hover long text</span>
151
- <Icon className="k-fab-item-icon" name="pencil" />
152
- </li>
153
- <li className="k-fab-item k-text-left k-focus">
154
- <span className="k-fab-item-text">Focus</span>
155
- <Icon className="k-fab-item-icon" name="pencil" />
156
- </li>
157
- <li className="k-fab-item k-text-left k-active">
158
- <span className="k-fab-item-text">Active</span>
159
- <Icon className="k-fab-item-icon" name="pencil" />
160
- </li>
161
- </ul>
90
+ <FloatingActionButtonItems position="bottom">
91
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
92
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
93
+ <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
94
+ </FloatingActionButtonItems>
162
95
  </div>
163
96
  </span>
164
97
 
@@ -166,58 +99,31 @@ root.render(
166
99
  <span className="relative-container">
167
100
  <FloatingActionButton icon="plus" size="small" position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
168
101
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
169
- <ul className="k-fab-items k-fab-items-top">
170
- <li className="k-fab-item k-text-right k-hover">
171
- <span className="k-fab-item-text">Hover long text</span>
172
- <Icon className="k-fab-item-icon" name="pencil" />
173
- </li>
174
- <li className="k-fab-item k-text-right k-focus">
175
- <span className="k-fab-item-text">Focus</span>
176
- <Icon className="k-fab-item-icon" name="pencil" />
177
- </li>
178
- <li className="k-fab-item k-text-right k-active">
179
- <span className="k-fab-item-text">Active</span>
180
- <Icon className="k-fab-item-icon" name="pencil" />
181
- </li>
182
- </ul>
102
+ <FloatingActionButtonItems position="top">
103
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
104
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
105
+ <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
106
+ </FloatingActionButtonItems>
183
107
  </div>
184
108
  </span>
185
109
  <span className="relative-container">
186
110
  <FloatingActionButton icon="plus" size="medium" position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
187
111
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
188
- <ul className="k-fab-items k-fab-items-top">
189
- <li className="k-fab-item k-text-right k-hover">
190
- <span className="k-fab-item-text">Hover long text</span>
191
- <Icon className="k-fab-item-icon" name="pencil" />
192
- </li>
193
- <li className="k-fab-item k-text-right k-focus">
194
- <span className="k-fab-item-text">Focus</span>
195
- <Icon className="k-fab-item-icon" name="pencil" />
196
- </li>
197
- <li className="k-fab-item k-text-right k-active">
198
- <span className="k-fab-item-text">Active</span>
199
- <Icon className="k-fab-item-icon" name="pencil" />
200
- </li>
201
- </ul>
112
+ <FloatingActionButtonItems position="top">
113
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
114
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
115
+ <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
116
+ </FloatingActionButtonItems>
202
117
  </div>
203
118
  </span>
204
119
  <span className="relative-container">
205
120
  <FloatingActionButton icon="plus" size="large" position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
206
121
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
207
- <ul className="k-fab-items k-fab-items-top">
208
- <li className="k-fab-item k-text-right k-hover">
209
- <span className="k-fab-item-text">Hover long text</span>
210
- <Icon className="k-fab-item-icon" name="pencil" />
211
- </li>
212
- <li className="k-fab-item k-text-right k-focus">
213
- <span className="k-fab-item-text">Focus</span>
214
- <Icon className="k-fab-item-icon" name="pencil" />
215
- </li>
216
- <li className="k-fab-item k-text-right k-active">
217
- <span className="k-fab-item-text">Active</span>
218
- <Icon className="k-fab-item-icon" name="pencil" />
219
- </li>
220
- </ul>
122
+ <FloatingActionButtonItems position="top">
123
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
124
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
125
+ <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
126
+ </FloatingActionButtonItems>
221
127
  </div>
222
128
  </span>
223
129
 
@@ -225,124 +131,33 @@ root.render(
225
131
  <span className="relative-container">
226
132
  <FloatingActionButton icon="plus" size="small" position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
227
133
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
228
- <ul className="k-fab-items k-fab-items-top">
229
- <li className="k-fab-item k-text-left k-hover">
230
- <span className="k-fab-item-text">Hover long text</span>
231
- <Icon className="k-fab-item-icon" name="pencil" />
232
- </li>
233
- <li className="k-fab-item k-text-left k-focus">
234
- <span className="k-fab-item-text">Focus</span>
235
- <Icon className="k-fab-item-icon" name="pencil" />
236
- </li>
237
- <li className="k-fab-item k-text-left k-active">
238
- <span className="k-fab-item-text">Active</span>
239
- <Icon className="k-fab-item-icon" name="pencil" />
240
- </li>
241
- </ul>
134
+ <FloatingActionButtonItems position="top">
135
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
136
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
137
+ <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
138
+ </FloatingActionButtonItems>
242
139
  </div>
243
140
  </span>
244
141
  <span className="relative-container">
245
142
  <FloatingActionButton icon="plus" size="medium" position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
246
143
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
247
- <ul className="k-fab-items k-fab-items-top">
248
- <li className="k-fab-item k-text-left k-hover">
249
- <span className="k-fab-item-text">Hover long text</span>
250
- <Icon className="k-fab-item-icon" name="pencil" />
251
- </li>
252
- <li className="k-fab-item k-text-left k-focus">
253
- <span className="k-fab-item-text">Focus</span>
254
- <Icon className="k-fab-item-icon" name="pencil" />
255
- </li>
256
- <li className="k-fab-item k-text-left k-active">
257
- <span className="k-fab-item-text">Active</span>
258
- <Icon className="k-fab-item-icon" name="pencil" />
259
- </li>
260
- </ul>
144
+ <FloatingActionButtonItems position="top">
145
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
146
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
147
+ <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
148
+ </FloatingActionButtonItems>
261
149
  </div>
262
150
  </span>
263
151
  <span className="relative-container">
264
152
  <FloatingActionButton icon="plus" size="large" position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
265
153
  <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
266
- <ul className="k-fab-items k-fab-items-top">
267
- <li className="k-fab-item k-text-left k-hover">
268
- <span className="k-fab-item-text">Hover long text</span>
269
- <Icon className="k-fab-item-icon" name="pencil" />
270
- </li>
271
- <li className="k-fab-item k-text-left k-focus">
272
- <span className="k-fab-item-text">Focus</span>
273
- <Icon className="k-fab-item-icon" name="pencil" />
274
- </li>
275
- <li className="k-fab-item k-text-left k-active">
276
- <span className="k-fab-item-text">Active</span>
277
- <Icon className="k-fab-item-icon" name="pencil" />
278
- </li>
279
- </ul>
154
+ <FloatingActionButtonItems position="top">
155
+ <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
156
+ <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
157
+ <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
158
+ </FloatingActionButtonItems>
280
159
  </div>
281
160
  </span>
282
- <span>Angular rendering</span>
283
- <span className="relative-container">
284
- <span className="k-pos-absolute k-bottom-start" style={{ bottom: "16px", left: "16px" }}>
285
- <FloatingActionButton icon="plus" size="small" />
286
- <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "36px", left: "calc(calc(36px/2) - calc(36px/2))" }}>
287
- <ul className="k-fab-items k-fab-items-top" >
288
- <li className="k-fab-item k-text-left k-hover">
289
- <span className="k-fab-item-text">Hover long text</span>
290
- <Icon className="k-fab-item-icon" name="pencil" />
291
- </li>
292
- <li className="k-fab-item k-text-left k-focus">
293
- <span className="k-fab-item-text">Focus</span>
294
- <Icon className="k-fab-item-icon" name="pencil" />
295
- </li>
296
- <li className="k-fab-item k-text-left k-active">
297
- <span className="k-fab-item-text">Active</span>
298
- <Icon className="k-fab-item-icon" name="pencil" />
299
- </li>
300
- </ul>
301
- </div>
302
- </span>
303
- </span>
304
- <span className="relative-container">
305
- <span className="k-pos-absolute k-bottom-start" style={{ bottom: "16px", left: "16px" }}>
306
- <FloatingActionButton icon="plus" size="medium" />
307
- <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "52px", left: "calc(calc(52px/2) - calc(36px/2))" }}>
308
- <ul className="k-fab-items k-fab-items-top" >
309
- <li className="k-fab-item k-text-left k-hover">
310
- <span className="k-fab-item-text">Hover long text</span>
311
- <Icon className="k-fab-item-icon" name="pencil" />
312
- </li>
313
- <li className="k-fab-item k-text-left k-focus">
314
- <span className="k-fab-item-text">Focus</span>
315
- <Icon className="k-fab-item-icon" name="pencil" />
316
- </li>
317
- <li className="k-fab-item k-text-left k-active">
318
- <span className="k-fab-item-text">Active</span>
319
- <Icon className="k-fab-item-icon" name="pencil" />
320
- </li>
321
- </ul>
322
- </div>
323
- </span>
324
- </span>
325
- <span className="relative-container">
326
- <span className="k-pos-absolute k-bottom-start" style={{ bottom: "16px", left: "16px" }}>
327
- <FloatingActionButton icon="plus" size="large" />
328
- <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "68px", left: "calc(calc(68px/2) - calc(36px/2))" }}>
329
- <ul className="k-fab-items k-fab-items-top" >
330
- <li className="k-fab-item k-text-left k-hover">
331
- <span className="k-fab-item-text">Hover long text</span>
332
- <Icon className="k-fab-item-icon" name="pencil" />
333
- </li>
334
- <li className="k-fab-item k-text-left k-focus">
335
- <span className="k-fab-item-text">Focus</span>
336
- <Icon className="k-fab-item-icon" name="pencil" />
337
- </li>
338
- <li className="k-fab-item k-text-left k-active">
339
- <span className="k-fab-item-text">Active</span>
340
- <Icon className="k-fab-item-icon" name="pencil" />
341
- </li>
342
- </ul>
343
- </div>
344
- </span>
345
- </span>
346
161
  </div>
347
162
  </>
348
163
  );
package/src/grid/tests/grid-rows-resizing.tsx ADDED
@@ -0,0 +1,202 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import { Button } from '../../button';
4
+ import { Toolbar } from '../../toolbar';
5
+ import { Searchbox } from '../../searchbox';
6
+
7
+
8
+ const root = ReactDOM.createRoot(
9
+ document.getElementById('app') as HTMLElement
10
+ );
11
+
12
+ root.render(
13
+ <>
14
+
15
+ <div id="test-area" className="k-d-grid k-grid-cols-2">
16
+
17
+ <span className="col-2">Resizing Row / Hover</span>
18
+
19
+ <section className="col-2">
20
+ <div className="k-grid k-grid-md k-grid-display-block">
21
+ <Toolbar className="k-grid-toolbar">
22
+ <Button className="k-toolbar-button" icon="add">Add new record</Button>
23
+ <span className="k-spacer"></span>
24
+ <Searchbox className="k-grid-search" placeholder="Search..."/>
25
+ </Toolbar>
26
+ <div className="k-grid-header" style={{ padding: "0" }}>
27
+ <div className="k-grid-header-wrap k-auto-scrollable">
28
+ <table className="k-table k-table-md k-grid-header-table">
29
+ <colgroup>
30
+ <col />
31
+ <col />
32
+ <col />
33
+ </colgroup>
34
+ <thead className="k-table-thead">
35
+ <tr className="k-table-row">
36
+ <th className="k-table-th k-header">
37
+ <span className="k-cell-inner">
38
+ <span className="k-link">
39
+ <span className="k-column-title">Header Cell</span>
40
+ </span>
41
+ </span>
42
+ </th>
43
+ <th className="k-table-th k-header">
44
+ <span className="k-cell-inner">
45
+ <span className="k-link">
46
+ <span className="k-column-title">Header Cell</span>
47
+ </span>
48
+ </span>
49
+ </th>
50
+ <th className="k-table-th k-header">
51
+ <span className="k-cell-inner">
52
+ <span className="k-link">
53
+ <span className="k-column-title">Header Cell</span>
54
+ </span>
55
+ </span>
56
+ </th>
57
+ </tr>
58
+ </thead>
59
+ </table>
60
+ </div>
61
+ </div>
62
+ <div className="k-grid-content k-auto-scrollable" style={{ overflowY: "visible" }}>
63
+ <table className="k-table k-table-md k-grid-table">
64
+ <colgroup>
65
+ <col />
66
+ <col />
67
+ <col />
68
+ </colgroup>
69
+ <tbody className="k-table-tbody">
70
+ <tr className="k-table-row k-master-row k-hover">
71
+ <td className="k-table-td">Grid Cell</td>
72
+ <td className="k-table-td" style={{ whiteSpace: "nowrap" }}>Grid Cell with loooooong text that spans on multiple rows</td>
73
+ <td className="k-table-td k-command-cell">
74
+ <Button themeColor="primary">Edit</Button>
75
+ <Button>Remove</Button>
76
+ </td>
77
+ </tr>
78
+ <tr className="k-table-row k-table-alt-row k-master-row k-alt">
79
+ <td className="k-table-td">Grid Cell</td>
80
+ <td className="k-table-td">Grid Cell</td>
81
+ <td className="k-table-td k-command-cell">
82
+ <Button themeColor="primary">Edit</Button>
83
+ <Button>Remove</Button>
84
+ </td>
85
+ </tr>
86
+ <tr className="k-table-row k-master-row">
87
+ <td className="k-table-td">Grid Cell</td>
88
+ <td className="k-table-td">Grid Cell</td>
89
+ <td className="k-table-td k-command-cell">
90
+ <Button themeColor="primary">Edit</Button>
91
+ <Button>Remove</Button>
92
+ </td>
93
+ </tr>
94
+ <tr className="k-table-row k-table-alt-row k-master-row k-alt">
95
+ <td className="k-table-td">Grid Cell</td>
96
+ <td className="k-table-td">Grid Cell</td>
97
+ <td className="k-table-td k-command-cell">
98
+ <Button themeColor="primary">Edit</Button>
99
+ <Button>Remove</Button>
100
+ </td>
101
+ </tr>
102
+ </tbody>
103
+ </table>
104
+ <span className="k-row-resizer" style={{ top: "34px" }}></span>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <span className="col-2">Resizing Row / Drag</span>
110
+
111
+ <section className="col-2">
112
+ <div className="k-grid k-grid-md k-grid-display-block">
113
+ <Toolbar className="k-grid-toolbar">
114
+ <Button className="k-toolbar-button" icon="add">Add new record</Button>
115
+ <span className="k-spacer"></span>
116
+ <Searchbox className="k-grid-search" placeholder="Search..."/>
117
+ </Toolbar>
118
+ <div className="k-grid-header" style={{ padding: "0" }}>
119
+ <div className="k-grid-header-wrap k-auto-scrollable">
120
+ <table className="k-table k-table-md k-grid-header-table">
121
+ <colgroup>
122
+ <col />
123
+ <col />
124
+ <col />
125
+ </colgroup>
126
+ <thead className="k-table-thead">
127
+ <tr className="k-table-row">
128
+ <th className="k-table-th k-header">
129
+ <span className="k-cell-inner">
130
+ <span className="k-link">
131
+ <span className="k-column-title">Header Cell</span>
132
+ </span>
133
+ </span>
134
+ </th>
135
+ <th className="k-table-th k-header">
136
+ <span className="k-cell-inner">
137
+ <span className="k-link">
138
+ <span className="k-column-title">Header Cell</span>
139
+ </span>
140
+ </span>
141
+ </th>
142
+ <th className="k-table-th k-header">
143
+ <span className="k-cell-inner">
144
+ <span className="k-link">
145
+ <span className="k-column-title">Header Cell</span>
146
+ </span>
147
+ </span>
148
+ </th>
149
+ </tr>
150
+ </thead>
151
+ </table>
152
+ </div>
153
+ </div>
154
+ <div className="k-grid-content k-auto-scrollable" style={{ overflowY: "visible" }}>
155
+ <table className="k-table k-table-md k-grid-table">
156
+ <colgroup>
157
+ <col />
158
+ <col />
159
+ <col />
160
+ </colgroup>
161
+ <tbody className="k-table-tbody">
162
+ <tr className="k-table-row k-master-row k-hover">
163
+ <td className="k-table-td">Grid Cell</td>
164
+ <td className="k-table-td" style={{ whiteSpace: "unset" }}>Grid Cell with loooooong text that spans on multiple rows</td>
165
+ <td className="k-table-td k-command-cell">
166
+ <Button themeColor="primary">Edit</Button>
167
+ <Button>Remove</Button>
168
+ </td>
169
+ </tr>
170
+ <tr className="k-table-row k-table-alt-row k-master-row k-alt">
171
+ <td className="k-table-td">Grid Cell</td>
172
+ <td className="k-table-td">Grid Cell</td>
173
+ <td className="k-table-td k-command-cell">
174
+ <Button themeColor="primary">Edit</Button>
175
+ <Button>Remove</Button>
176
+ </td>
177
+ </tr>
178
+ <tr className="k-table-row k-master-row">
179
+ <td className="k-table-td">Grid Cell</td>
180
+ <td className="k-table-td">Grid Cell</td>
181
+ <td className="k-table-td k-command-cell">
182
+ <Button themeColor="primary">Edit</Button>
183
+ <Button>Remove</Button>
184
+ </td>
185
+ </tr>
186
+ <tr className="k-table-row k-table-alt-row k-master-row k-alt">
187
+ <td className="k-table-td">Grid Cell</td>
188
+ <td className="k-table-td">Grid Cell</td>
189
+ <td className="k-table-td k-command-cell">
190
+ <Button themeColor="primary">Edit</Button>
191
+ <Button>Remove</Button>
192
+ </td>
193
+ </tr>
194
+ </tbody>
195
+ </table>
196
+ <span className="k-row-resizer k-active" style={{ top: "54px" }}></span>
197
+ </div>
198
+ </div>
199
+ </section>
200
+ </div>
201
+ </>
202
+ );
package/src/index.ts CHANGED
@@ -91,3 +91,6 @@ export * from './card/index';
91
91
 
92
92
  // Editors
93
93
  export * from './editor/index';
94
+
95
+ // Tables
96
+ export * from './table/index';