@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.1

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 (172) hide show
  1. package/dist/cjs/autocomplete/tests/autocomplete-prefix-suffix.js +1096 -888
  2. package/dist/cjs/column-menu/column-menu-expander.spec.js +5933 -0
  3. package/dist/cjs/column-menu/column-menu-item-content.js +47 -0
  4. package/dist/cjs/column-menu/column-menu-item-wrapper.js +46 -0
  5. package/dist/cjs/column-menu/column-menu-item.spec.js +4396 -0
  6. package/dist/cjs/column-menu/column-menu-multicheck-item.js +261 -0
  7. package/dist/cjs/column-menu/column-menu-multicheck-wrap.js +46 -0
  8. package/dist/cjs/column-menu/column-menu.spec.js +67 -0
  9. package/dist/cjs/column-menu/filter-menu.spec.js +61 -0
  10. package/dist/cjs/column-menu/templates/column-menu-normal.js +5957 -0
  11. package/dist/cjs/column-menu/templates/column-menu-tabbed.js +5947 -0
  12. package/dist/cjs/column-menu/templates/filter-menu-multi-check.js +5984 -0
  13. package/dist/cjs/column-menu/templates/filter-menu-normal.js +5947 -0
  14. package/dist/cjs/column-menu/tests/column-menu-rtl.js +6038 -0
  15. package/dist/cjs/column-menu/tests/column-menu-tabbed.js +6026 -0
  16. package/dist/cjs/column-menu/tests/column-menu.js +6038 -0
  17. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +1096 -888
  18. package/dist/cjs/filemanager/tests/filemanager-gridview-preview.js +957 -749
  19. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +911 -703
  20. package/dist/cjs/form/tests/form-field-dropdowns.js +1095 -887
  21. package/dist/cjs/grid/tests/grid-column-menu-rtl.js +707 -603
  22. package/dist/cjs/grid/tests/grid-column-menu-tabbed.js +841 -655
  23. package/dist/cjs/grid/tests/grid-column-menu.js +706 -602
  24. package/dist/cjs/grid/tests/grid-column-reordering-actions.js +302 -122
  25. package/dist/cjs/grid/tests/grid-column-reordering.js +308 -128
  26. package/dist/cjs/grid/tests/grid-column-resizing-actions.js +290 -107
  27. package/dist/cjs/grid/tests/grid-editing-custom-editor.js +1168 -960
  28. package/dist/cjs/grid/tests/grid-grouping-actions.js +272 -59
  29. package/dist/cjs/index.js +2539 -2199
  30. package/dist/cjs/multiselect/templates/multiselect-prefix.js +1071 -863
  31. package/dist/cjs/multiselect/templates/multiselect-suffix.js +1071 -863
  32. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +1077 -869
  33. package/dist/cjs/multiselect/tests/multiselect-flat.js +1101 -893
  34. package/dist/cjs/multiselect/tests/multiselect-grouping.js +1077 -869
  35. package/dist/cjs/multiselect/tests/multiselect-opened.js +1079 -871
  36. package/dist/cjs/multiselect/tests/multiselect-outline.js +1101 -893
  37. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +1108 -900
  38. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +1080 -872
  39. package/dist/cjs/multiselect/tests/multiselect-solid.js +1101 -893
  40. package/dist/cjs/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  41. package/dist/cjs/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  42. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +1110 -902
  43. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +1124 -916
  44. package/dist/cjs/taskboard/taskboard-pane.js +1078 -870
  45. package/dist/cjs/taskboard/taskboard.spec.js +993 -785
  46. package/dist/cjs/taskboard/templates/taskboard-normal.js +1027 -819
  47. package/dist/cjs/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  48. package/dist/cjs/taskboard/tests/taskboard-card.js +1099 -891
  49. package/dist/cjs/taskboard/tests/taskboard-column.js +1114 -906
  50. package/dist/cjs/taskboard/tests/taskboard-pane.js +1035 -827
  51. package/dist/cjs/taskboard/tests/taskboard-resources.js +1081 -873
  52. package/dist/cjs/taskboard/tests/taskboard-rtl.js +1033 -825
  53. package/dist/cjs/taskboard/tests/taskboard.js +1033 -825
  54. package/dist/cjs/treelist/tests/treelist-aggregate-react.js +4277 -73
  55. package/dist/cjs/treelist/tests/treelist-aggregates.js +4519 -216
  56. package/dist/cjs/treelist/tests/treelist-react.js +2518 -98
  57. package/dist/cjs/treelist/tests/treelist-row-reordering.js +4371 -59
  58. package/dist/cjs/treelist/tests/treelist.js +4409 -112
  59. package/dist/cjs/treelist/treelist.spec.js +8415 -0
  60. package/dist/esm/autocomplete/tests/autocomplete-prefix-suffix.js +1011 -803
  61. package/dist/esm/column-menu/column-menu-expander.spec.js +5917 -0
  62. package/dist/esm/column-menu/column-menu-item-content.js +25 -0
  63. package/dist/esm/column-menu/column-menu-item-wrapper.js +24 -0
  64. package/dist/esm/column-menu/column-menu-item.spec.js +4380 -0
  65. package/dist/esm/column-menu/column-menu-multicheck-item.js +239 -0
  66. package/dist/esm/column-menu/column-menu-multicheck-wrap.js +24 -0
  67. package/dist/esm/column-menu/column-menu.spec.js +45 -0
  68. package/dist/esm/column-menu/filter-menu.spec.js +39 -0
  69. package/dist/esm/column-menu/templates/column-menu-normal.js +5941 -0
  70. package/dist/esm/column-menu/templates/column-menu-tabbed.js +5931 -0
  71. package/dist/esm/column-menu/templates/filter-menu-multi-check.js +5968 -0
  72. package/dist/esm/column-menu/templates/filter-menu-normal.js +5931 -0
  73. package/dist/esm/column-menu/tests/column-menu-rtl.js +6022 -0
  74. package/dist/esm/column-menu/tests/column-menu-tabbed.js +6010 -0
  75. package/dist/esm/column-menu/tests/column-menu.js +6022 -0
  76. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +1011 -803
  77. package/dist/esm/filemanager/tests/filemanager-gridview-preview.js +949 -741
  78. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +903 -695
  79. package/dist/esm/form/tests/form-field-dropdowns.js +1010 -802
  80. package/dist/esm/grid/tests/grid-column-menu-rtl.js +707 -603
  81. package/dist/esm/grid/tests/grid-column-menu-tabbed.js +852 -666
  82. package/dist/esm/grid/tests/grid-column-menu.js +706 -602
  83. package/dist/esm/grid/tests/grid-column-reordering-actions.js +302 -122
  84. package/dist/esm/grid/tests/grid-column-reordering.js +308 -128
  85. package/dist/esm/grid/tests/grid-column-resizing-actions.js +290 -107
  86. package/dist/esm/grid/tests/grid-editing-custom-editor.js +1083 -875
  87. package/dist/esm/grid/tests/grid-grouping-actions.js +272 -59
  88. package/dist/esm/index.js +2495 -2155
  89. package/dist/esm/multiselect/templates/multiselect-prefix.js +986 -778
  90. package/dist/esm/multiselect/templates/multiselect-suffix.js +986 -778
  91. package/dist/esm/multiselect/tests/multiselect-adaptive.js +992 -784
  92. package/dist/esm/multiselect/tests/multiselect-flat.js +1016 -808
  93. package/dist/esm/multiselect/tests/multiselect-grouping.js +992 -784
  94. package/dist/esm/multiselect/tests/multiselect-opened.js +994 -786
  95. package/dist/esm/multiselect/tests/multiselect-outline.js +1016 -808
  96. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +1023 -815
  97. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +995 -787
  98. package/dist/esm/multiselect/tests/multiselect-solid.js +1016 -808
  99. package/dist/esm/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  100. package/dist/esm/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  101. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +1025 -817
  102. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +1039 -831
  103. package/dist/esm/taskboard/taskboard-pane.js +985 -777
  104. package/dist/esm/taskboard/taskboard.spec.js +981 -773
  105. package/dist/esm/taskboard/templates/taskboard-normal.js +1015 -807
  106. package/dist/esm/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  107. package/dist/esm/taskboard/tests/taskboard-card.js +1014 -806
  108. package/dist/esm/taskboard/tests/taskboard-column.js +1029 -821
  109. package/dist/esm/taskboard/tests/taskboard-pane.js +1023 -815
  110. package/dist/esm/taskboard/tests/taskboard-resources.js +996 -788
  111. package/dist/esm/taskboard/tests/taskboard-rtl.js +1021 -813
  112. package/dist/esm/taskboard/tests/taskboard.js +1021 -813
  113. package/dist/esm/treelist/tests/treelist-aggregate-react.js +4277 -73
  114. package/dist/esm/treelist/tests/treelist-aggregates.js +4520 -217
  115. package/dist/esm/treelist/tests/treelist-react.js +2518 -98
  116. package/dist/esm/treelist/tests/treelist-row-reordering.js +4371 -59
  117. package/dist/esm/treelist/tests/treelist.js +4410 -113
  118. package/dist/esm/treelist/treelist.spec.js +8399 -0
  119. package/dist/types/column-menu/column-menu-expander.spec.d.ts +17 -0
  120. package/dist/types/column-menu/column-menu-item-content.d.ts +1 -0
  121. package/dist/types/column-menu/column-menu-item-wrapper.d.ts +1 -0
  122. package/dist/types/column-menu/column-menu-item.spec.d.ts +17 -0
  123. package/dist/types/column-menu/column-menu-multicheck-item.d.ts +4 -0
  124. package/dist/types/column-menu/column-menu-multicheck-wrap.d.ts +1 -0
  125. package/dist/types/column-menu/column-menu.spec.d.ts +14 -0
  126. package/dist/types/column-menu/filter-menu.spec.d.ts +9 -0
  127. package/dist/types/column-menu/index.d.ts +12 -0
  128. package/dist/types/column-menu/templates/column-menu-normal.d.ts +1 -0
  129. package/dist/types/column-menu/templates/column-menu-tabbed.d.ts +1 -0
  130. package/dist/types/column-menu/templates/filter-menu-multi-check.d.ts +1 -0
  131. package/dist/types/column-menu/templates/filter-menu-normal.d.ts +1 -0
  132. package/dist/types/column-menu/tests/column-menu-rtl.d.ts +2 -0
  133. package/dist/types/column-menu/tests/column-menu-tabbed.d.ts +2 -0
  134. package/dist/types/column-menu/tests/column-menu.d.ts +2 -0
  135. package/dist/types/index.d.ts +2 -0
  136. package/dist/types/treelist/index.d.ts +1 -0
  137. package/dist/types/treelist/treelist.spec.d.ts +9 -0
  138. package/package.json +2 -2
  139. package/src/column-menu/column-menu-expander.spec.tsx +66 -0
  140. package/src/column-menu/column-menu-item-content.tsx +18 -0
  141. package/src/column-menu/column-menu-item-wrapper.tsx +17 -0
  142. package/src/column-menu/column-menu-item.spec.tsx +56 -0
  143. package/src/column-menu/column-menu-multicheck-item.tsx +32 -0
  144. package/src/column-menu/column-menu-multicheck-wrap.tsx +17 -0
  145. package/src/column-menu/column-menu.spec.tsx +46 -0
  146. package/src/column-menu/filter-menu.spec.tsx +38 -0
  147. package/src/column-menu/index.ts +12 -0
  148. package/src/column-menu/templates/column-menu-normal.tsx +23 -0
  149. package/src/column-menu/templates/column-menu-tabbed.tsx +36 -0
  150. package/src/column-menu/templates/filter-menu-multi-check.tsx +26 -0
  151. package/src/column-menu/templates/filter-menu-normal.tsx +23 -0
  152. package/src/column-menu/tests/column-menu-rtl.tsx +119 -0
  153. package/src/column-menu/tests/column-menu-tabbed.tsx +113 -0
  154. package/src/column-menu/tests/column-menu.tsx +119 -0
  155. package/src/grid/tests/grid-column-menu-rtl.tsx +194 -367
  156. package/src/grid/tests/grid-column-menu-tabbed.tsx +147 -260
  157. package/src/grid/tests/grid-column-menu.tsx +194 -366
  158. package/src/grid/tests/grid-column-reordering-actions.tsx +48 -77
  159. package/src/grid/tests/grid-column-reordering.tsx +60 -86
  160. package/src/grid/tests/grid-column-resizing-actions.tsx +25 -64
  161. package/src/grid/tests/grid-grouping-actions.tsx +15 -11
  162. package/src/index.ts +2 -1
  163. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +141 -232
  164. package/src/pivotgrid/tests/pivotgrid-settings-panel-reordering.tsx +17 -34
  165. package/src/taskboard/tests/taskboard-card-column-menu.tsx +12 -22
  166. package/src/treelist/index.ts +1 -0
  167. package/src/treelist/tests/treelist-aggregate-react.tsx +73 -71
  168. package/src/treelist/tests/treelist-aggregates.tsx +219 -242
  169. package/src/treelist/tests/treelist-react.tsx +98 -95
  170. package/src/treelist/tests/treelist-row-reordering.tsx +95 -74
  171. package/src/treelist/tests/treelist.tsx +110 -139
  172. package/src/treelist/treelist.spec.tsx +32 -0
package/src/grid/tests/grid-column-reordering-actions.tsx CHANGED
@@ -3,6 +3,7 @@ import { Icon } from '../../icon';
3
3
  import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
4
4
  import { Popup } from '../../popup';
5
5
  import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar, GridPager } from '../../grid';
6
+ import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
6
7
 
7
8
  const styles = `
8
9
  .k-animation-container,
@@ -105,86 +106,56 @@ export default () =>(
105
106
  </Grid>
106
107
  </section>
107
108
 
108
- <Popup className="k-column-menu k-grid-columnmenu-popup">
109
- <div className="k-columnmenu-item-wrapper">
110
- <div className="k-columnmenu-item">
111
- <Icon icon="sort-asc-small" />Sort ascending
112
- </div>
113
- <div className="k-columnmenu-item">
114
- <Icon icon="sort-desc-small" />Sort descending
115
- </div>
116
- </div>
117
- <div className="k-columnmenu-item-wrapper">
118
- <div className="k-expander">
119
- <div className="k-columnmenu-item">
120
- <Icon icon="columns"/>Columns
121
- <span className="k-spacer"></span>
122
- <span className="k-expander-indicator">
123
- <Icon icon="chevron-down"/>
124
- </span>
125
- </div>
126
- </div>
127
- </div>
128
- <div className="k-columnmenu-item-wrapper">
129
- <div className="k-expander">
130
- <div className="k-columnmenu-item">
131
- <Icon icon="filter"/>Filter
132
- <span className="k-spacer"></span>
133
- <span className="k-expander-indicator">
134
- <Icon icon="chevron-down"/>
135
- </span>
136
- </div>
137
- </div>
138
- </div>
139
- <div className="k-columnmenu-item-wrapper">
140
- <div className="k-columnmenu-item">
141
- <Icon icon="group" />Group column
142
- </div>
143
- </div>
144
- <div className="k-columnmenu-item-wrapper">
145
- <div className="k-columnmenu-item">
146
- <Icon icon="max-width"/>Autosize this column
147
- </div>
148
- <div className="k-columnmenu-item">
149
- <Icon icon="display-inline-flex"/>Autosize all columns
150
- </div>
151
- </div>
152
- <div className="k-columnmenu-item-wrapper">
153
- <div className="k-expander">
154
- <div className="k-columnmenu-item">
155
- <Icon icon="set-column-position" />Set column position
156
- <span className="k-spacer"></span>
157
- <span className="k-expander-indicator">
158
- <Icon icon="chevron-up"/>
159
- </span>
160
- </div>
161
- <div className="k-columnmenu-item-content k-columns-item">
162
- <div className="k-column-list-wrapper">
163
- <div className="k-column-list" style={{ maxHeight: "260px", overflowY: "hidden" }}>
164
- <div className="k-column-list-item">
165
- <Icon icon="lock"/>Lock column
166
- </div>
167
- <div className="k-column-list-item k-disabled">
168
- <Icon icon="unlock"/>Unlock column
169
- </div>
170
- <div className="k-column-list-item">
171
- <Icon icon="stick"/>Stick column
172
- </div>
173
- <div className="k-column-list-item k-disabled">
174
- <Icon icon="unstick"/>Unstick column
175
- </div>
176
- <div className="k-column-list-item">
177
- <Icon icon="caret-alt-left"/>Move previous
178
- </div>
179
- <div className="k-column-list-item">
180
- <Icon icon="caret-alt-right"/>Move next
109
+ <Popup className="k-grid-columnmenu-popup">
110
+ <ColumnMenuNormal>
111
+ <ColumnMenuItemWrapper>
112
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
113
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
114
+ </ColumnMenuItemWrapper>
115
+ <ColumnMenuItemWrapper>
116
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" />
117
+ </ColumnMenuItemWrapper>
118
+ <ColumnMenuItemWrapper>
119
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" />
120
+ </ColumnMenuItemWrapper>
121
+ <ColumnMenuItemWrapper>
122
+ <ColumnMenuItem text="Group column" icon="group" />
123
+ </ColumnMenuItemWrapper>
124
+ <ColumnMenuItemWrapper>
125
+ <ColumnMenuItem text="Autosize this column" icon="max-width" />
126
+ <ColumnMenuItem text="Autosize all columns" icon="display-inline-flex" />
127
+ </ColumnMenuItemWrapper>
128
+ <ColumnMenuItemWrapper>
129
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" expanded={true} itemContent={
130
+ <>
131
+ <div className="k-column-list-wrapper">
132
+ <div className="k-column-list" style={{ maxHeight: "260px", overflowY: "hidden" }}>
133
+ <div className="k-column-list-item">
134
+ <Icon icon="lock" />Lock column
135
+ </div>
136
+ <div className="k-column-list-item k-disabled">
137
+ <Icon icon="unlock" />Unlock column
138
+ </div>
139
+ <div className="k-column-list-item">
140
+ <Icon icon="stick" />Stick column
141
+ </div>
142
+ <div className="k-column-list-item k-disabled">
143
+ <Icon icon="unstick" />Unstick column
144
+ </div>
145
+ <div className="k-column-list-item">
146
+ <Icon icon="caret-alt-left" />Move previous
147
+ </div>
148
+ <div className="k-column-list-item">
149
+ <Icon icon="caret-alt-right" />Move next
150
+ </div>
181
151
  </div>
182
152
  </div>
183
- </div>
184
- </div>
185
- </div>
186
- </div>
153
+ </>
154
+ }/>
155
+ </ColumnMenuItemWrapper>
156
+ </ColumnMenuNormal>
187
157
  </Popup>
158
+
188
159
  </div>
189
160
  </>
190
161
  );
package/src/grid/tests/grid-column-reordering.tsx CHANGED
@@ -3,6 +3,7 @@ import { Icon } from '../../icon';
3
3
  import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
4
4
  import { Popup } from '../../popup';
5
5
  import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridPager, GridToolbar } from '../../grid';
6
+ import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
6
7
 
7
8
  const styles = `
8
9
  .k-animation-container,
@@ -112,96 +113,69 @@ export default () =>(
112
113
 
113
114
  </section>
114
115
 
115
- <Popup id="discontinued" className="k-column-menu k-grid-columnmenu-popup">
116
- <div className="k-columnmenu-item-wrapper">
117
- <div className="k-columnmenu-item">
118
- <Icon icon="sort-asc-small" />Sort ascending
119
- </div>
120
- <div className="k-columnmenu-item">
121
- <Icon icon="sort-desc-small" />Sort descending
122
- </div>
123
- </div>
124
- <div className="k-columnmenu-item-wrapper">
125
- <div className="k-expander">
126
- <div className="k-columnmenu-item">
127
- <Icon icon="columns"/>Columns
128
- <span className="k-spacer"></span>
129
- <span className="k-expander-indicator">
130
- <Icon icon="chevron-down"/>
131
- </span>
132
- </div>
133
- </div>
134
- </div>
135
- <div className="k-columnmenu-item-wrapper">
136
- <div className="k-expander">
137
- <div className="k-columnmenu-item">
138
- <Icon icon="filter"/>Filter
139
- <span className="k-spacer"></span>
140
- <Icon icon="chevron-down"/>
141
- </div>
142
- </div>
143
- </div>
144
- <div className="k-columnmenu-item-wrapper">
145
- <div className="k-columnmenu-item">
146
- <Icon icon="group"/>Group column
147
- </div>
148
- </div>
149
- <div className="k-columnmenu-item-wrapper">
150
- <div className="k-columnmenu-item">
151
- <Icon icon="max-width"/>Autosize this column
152
- </div>
153
- <div className="k-columnmenu-item">
154
- <Icon icon="display-inline-flex"/>Autosize all columns
155
- </div>
156
- </div>
157
- <div className="k-columnmenu-item-wrapper">
158
- <div className="k-expander">
159
- <div className="k-columnmenu-item">
160
- <Icon icon="set-column-position" />Set column position
161
- <span className="k-spacer"></span>
162
- <span className="k-expander-indicator">
163
- <Icon icon="chevron-up"/>
164
- </span>
165
- </div>
166
- <div className="k-columnmenu-item-content k-columns-item">
167
- <div className="k-column-list-wrapper">
168
- <div className="k-column-list" style={{ maxHeight: "260px", overflowY: "hidden" }}>
169
- <div className="k-column-list-item">
170
- <Icon icon="lock"/>Lock column
171
- </div>
172
- <div className="k-column-list-item k-disabled">
173
- <Icon icon="unlock"/>Unlock column
174
- </div>
175
- <div className="k-column-list-item">
176
- <Icon icon="stick"/>Stick column
177
- </div>
178
- <div className="k-column-list-item k-disabled">
179
- <Icon icon="unstick"/>Unstick column
180
- </div>
181
- <div className="k-column-list-item">
182
- <Icon icon="caret-alt-left"/>Move previous
183
- </div>
184
- <div className="k-column-list-item">
185
- <Icon icon="caret-alt-right"/>Move next
116
+ <Popup id="discontinued" className="k-grid-columnmenu-popup">
117
+ <ColumnMenuNormal>
118
+ <ColumnMenuItemWrapper>
119
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
120
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
121
+ </ColumnMenuItemWrapper>
122
+ <ColumnMenuItemWrapper>
123
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" />
124
+ </ColumnMenuItemWrapper>
125
+ <ColumnMenuItemWrapper>
126
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" />
127
+ </ColumnMenuItemWrapper>
128
+ <ColumnMenuItemWrapper>
129
+ <ColumnMenuItem text="Group column" icon="group" />
130
+ </ColumnMenuItemWrapper>
131
+ <ColumnMenuItemWrapper>
132
+ <ColumnMenuItem text="Autosize this column" icon="max-width" />
133
+ <ColumnMenuItem text="Autosize all columns" icon="display-inline-flex" />
134
+ </ColumnMenuItemWrapper>
135
+ <ColumnMenuItemWrapper>
136
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" expanded={true} itemContent={
137
+ <>
138
+ <div className="k-column-list-wrapper">
139
+ <div className="k-column-list" style={{ maxHeight: "260px", overflowY: "hidden" }}>
140
+ <div className="k-column-list-item">
141
+ <Icon icon="lock" />Lock column
142
+ </div>
143
+ <div className="k-column-list-item k-disabled">
144
+ <Icon icon="unlock" />Unlock column
145
+ </div>
146
+ <div className="k-column-list-item">
147
+ <Icon icon="stick" />Stick column
148
+ </div>
149
+ <div className="k-column-list-item k-disabled">
150
+ <Icon icon="unstick" />Unstick column
151
+ </div>
152
+ <div className="k-column-list-item">
153
+ <Icon icon="caret-alt-left" />Move previous
154
+ </div>
155
+ <div className="k-column-list-item">
156
+ <Icon icon="caret-alt-right" />Move next
157
+ </div>
186
158
  </div>
187
159
  </div>
188
- </div>
189
- </div>
190
- </div>
191
- </div>
160
+ </>
161
+ }/>
162
+ </ColumnMenuItemWrapper>
163
+ </ColumnMenuNormal>
192
164
  </Popup>
193
165
 
194
- <Popup id="category" className="k-column-menu k-grid-columnmenu-popup">
195
- <div className="k-columnmenu-item-wrapper">
196
- <div className="k-columnmenu-item">
197
- <div className="k-column-list-item">
198
- <Icon icon="caret-alt-left"/>Move previous
199
- </div>
200
- <div className="k-column-list-item k-disabled">
201
- <Icon icon="caret-alt-right"/>Move next
202
- </div>
203
- </div>
204
- </div>
166
+ <Popup id="category" className="k-grid-columnmenu-popup">
167
+ <ColumnMenuNormal>
168
+ <ColumnMenuItemWrapper>
169
+ <ColumnMenuItem>
170
+ <div className="k-column-list-item">
171
+ <Icon icon="caret-alt-left"/>Move previous
172
+ </div>
173
+ <div className="k-column-list-item k-disabled">
174
+ <Icon icon="caret-alt-right"/>Move next
175
+ </div>
176
+ </ColumnMenuItem>
177
+ </ColumnMenuItemWrapper>
178
+ </ColumnMenuNormal>
205
179
  </Popup>
206
180
  </div>
207
181
  </>
package/src/grid/tests/grid-column-resizing-actions.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import { Chip, ChipAction, ChipList } from '../../chip';
2
- import { Icon } from '../../icon';
3
2
  import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
4
3
  import { Popup } from '../../popup';
5
4
  import { WindowNormal } from '../../window';
@@ -8,6 +7,8 @@ import { FormNormal, FormField } from '../../form';
8
7
  import { Checkbox } from '../../checkbox';
9
8
  import { Textbox } from '../../textbox';
10
9
  import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar, GridPager } from '../../grid';
10
+ import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
11
+
11
12
 
12
13
  const styles = `
13
14
  .k-animation-container,
@@ -117,69 +118,29 @@ export default () =>(
117
118
  </Grid>
118
119
  </section>
119
120
 
120
- <Popup className="k-column-menu k-grid-columnmenu-popup">
121
- <div className="k-columnmenu-item-wrapper">
122
- <div className="k-columnmenu-item">
123
- <Icon icon="sort-asc-small" />Sort ascending
124
- </div>
125
- <div className="k-columnmenu-item">
126
- <Icon icon="sort-desc-small" />Sort descending
127
- </div>
128
- </div>
129
- <div className="k-columnmenu-item-wrapper">
130
- <div className="k-expander">
131
- <div className="k-columnmenu-item">
132
- <Icon icon="columns"/>Columns
133
- <span className="k-spacer"></span>
134
- <span className="k-expander-indicator">
135
- <Icon icon="chevron-down"/>
136
- </span>
137
- </div>
138
- </div>
139
- </div>
140
- <div className="k-columnmenu-item-wrapper">
141
- <div className="k-expander">
142
- <div className="k-columnmenu-item">
143
- <Icon icon="filter"/>Filter
144
- <span className="k-spacer"></span>
145
- <span className="k-expander-indicator">
146
- <Icon icon="chevron-down"/>
147
- </span>
148
- </div>
149
- </div>
150
- </div>
151
- <div className="k-columnmenu-item-wrapper">
152
- <div className="k-columnmenu-item">
153
- <Icon icon="group" />Group column
154
- </div>
155
- </div>
156
- <div className="k-columnmenu-item-wrapper">
157
- <div className="k-expander">
158
- <div className="k-columnmenu-item">
159
- <Icon icon="arrows-left-right"/>Resize column
160
- <span className="k-spacer"></span>
161
- <span className="k-expander-indicator">
162
- <Icon icon="window-restore"/>
163
- </span>
164
- </div>
165
- </div>
166
- </div>
167
- <div className="k-columnmenu-item-wrapper">
168
- <div className="k-columnmenu-item">
169
- <Icon icon="group" />Autosize all columns
170
- </div>
171
- </div>
172
- <div className="k-columnmenu-item-wrapper">
173
- <div className="k-expander">
174
- <div className="k-columnmenu-item">
175
- <Icon icon="set-column-position" />Set column position
176
- <span className="k-spacer"></span>
177
- <span className="k-expander-indicator">
178
- <Icon icon="chevron-down" />
179
- </span>
180
- </div>
181
- </div>
182
- </div>
121
+ <Popup className="k-grid-columnmenu-popup">
122
+ <ColumnMenuNormal>
123
+ <ColumnMenuItemWrapper>
124
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
125
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
126
+ </ColumnMenuItemWrapper>
127
+ <ColumnMenuItemWrapper>
128
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" />
129
+ </ColumnMenuItemWrapper>
130
+ <ColumnMenuItemWrapper>
131
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" />
132
+ </ColumnMenuItemWrapper>
133
+ <ColumnMenuItemWrapper>
134
+ <ColumnMenuItem text="Group column" icon="group" />
135
+ </ColumnMenuItemWrapper>
136
+ <ColumnMenuItemWrapper>
137
+ <ColumnMenuExpander itemText="Resize column" itemIcon="arrows-left-right" expanderIcon="window-restore"/>
138
+ <ColumnMenuItem text="Autosize all columns" icon="display-inline-flex" />
139
+ </ColumnMenuItemWrapper>
140
+ <ColumnMenuItemWrapper>
141
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" />
142
+ </ColumnMenuItemWrapper>
143
+ </ColumnMenuNormal>
183
144
  </Popup>
184
145
 
185
146
  <section>
package/src/grid/tests/grid-grouping-actions.tsx CHANGED
@@ -3,6 +3,8 @@ import { Icon } from '../../icon';
3
3
  import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
4
4
  import { Popup } from '../../popup';
5
5
  import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar, GridPager } from '../../grid';
6
+ import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuNormal } from '../../column-menu';
7
+
6
8
 
7
9
  const styles = `
8
10
  .k-animation-container,
@@ -104,17 +106,19 @@ export default () => (
104
106
  </Grid>
105
107
  </section>
106
108
 
107
- <Popup className="k-column-menu k-grid-columnmenu-popup">
108
- <div className="k-columnmenu-item-wrapper">
109
- <div className="k-columnmenu-item">
110
- <div className="k-column-list-item">
111
- <Icon icon="caret-alt-left"/>Move previous
112
- </div>
113
- <div className="k-column-list-item">
114
- <Icon icon="caret-alt-right"/>Move next
115
- </div>
116
- </div>
117
- </div>
109
+ <Popup className="k-grid-columnmenu-popup">
110
+ <ColumnMenuNormal>
111
+ <ColumnMenuItemWrapper>
112
+ <ColumnMenuItem>
113
+ <div className="k-column-list-item">
114
+ <Icon icon="caret-alt-left"/>Move previous
115
+ </div>
116
+ <div className="k-column-list-item k-disabled">
117
+ <Icon icon="caret-alt-right"/>Move next
118
+ </div>
119
+ </ColumnMenuItem>
120
+ </ColumnMenuItemWrapper>
121
+ </ColumnMenuNormal>
118
122
  </Popup>
119
123
  </div>
120
124
  </>
package/src/index.ts CHANGED
@@ -101,10 +101,11 @@ export * from './grid/index';
101
101
  export * from './listview/index';
102
102
  // export * from './spreadsheet/index';
103
103
  // export * from './pivotgrid/index';
104
- // export * from './treelist/index';
104
+ export * from './treelist/index';
105
105
  export * from './filter/index';
106
106
  export * from './filemanager/index';
107
107
  export * from './taskboard/index';
108
+ export * from './column-menu/index';
108
109
 
109
110
  // Misc
110
111
  // export * from './adaptive/index''