@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
@@ -1,12 +1,9 @@
1
1
  import { ActionButtons } from '../../action-buttons';
2
2
  import { Button } from '../../button';
3
3
  import { Checkbox } from '../../checkbox';
4
- import { DropdownList } from '../../dropdownlist';
5
4
  import { Icon } from '../../icon';
6
- import { Searchbox } from '../../searchbox';
7
- import { Textbox } from '../../textbox';
8
5
  import { Popup } from '../../popup';
9
-
6
+ import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal, FilterMenuMultiCheck, FilterMenuNormal } from '../../column-menu';
10
7
 
11
8
  const styles = `
12
9
  .k-animation-container,
@@ -15,7 +12,7 @@ const styles = `
15
12
  overflow: visible;
16
13
  }
17
14
 
18
- .k-grid-columnmenu-popup {
15
+ .k-column-menu-popup {
19
16
  width: 100%;
20
17
  }
21
18
  `;
@@ -30,195 +27,131 @@ export default () =>(
30
27
  <span>Columns grouped expanded</span>
31
28
 
32
29
  <section>
33
- <Popup className="k-column-menu k-grid-columnmenu-popup">
34
- <div className="k-columnmenu-item-wrapper">
35
- <div className="k-columnmenu-item">
36
- <Icon icon="sort-asc-small" />Sort ascending
37
- </div>
38
- <div className="k-columnmenu-item">
39
- <Icon icon="sort-desc-small" />Sort descending
40
- </div>
41
- </div>
42
- <div className="k-columnmenu-item-wrapper">
43
- <div className="k-columnmenu-item">
44
- <Icon icon="columns" />Columns
45
- </div>
46
- </div>
47
- <div className="k-columnmenu-item-wrapper">
48
- <div className="k-columnmenu-item">
49
- <Icon icon="filter" />Filter
50
- </div>
51
- </div>
52
- <div className="k-columnmenu-item-wrapper">
53
- <div className="k-columnmenu-item">
54
- <Icon icon="group" />Group column
55
- </div>
56
- </div>
57
- <div className="k-columnmenu-item-wrapper">
58
- <div className="k-columnmenu-item">
59
- <Icon icon="set-column-position" />Set column position
60
- </div>
61
- </div>
30
+ <Popup className="k-grid-columnmenu-popup">
31
+ <ColumnMenuNormal>
32
+ <ColumnMenuItemWrapper>
33
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
34
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
35
+ </ColumnMenuItemWrapper>
36
+ <ColumnMenuItemWrapper>
37
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" />
38
+ </ColumnMenuItemWrapper>
39
+ <ColumnMenuItemWrapper>
40
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" />
41
+ </ColumnMenuItemWrapper>
42
+ <ColumnMenuItemWrapper>
43
+ <ColumnMenuItem text="Group column" icon="group" />
44
+ </ColumnMenuItemWrapper>
45
+ <ColumnMenuItemWrapper>
46
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" />
47
+ </ColumnMenuItemWrapper>
48
+ </ColumnMenuNormal>
62
49
  </Popup>
63
50
  </section>
64
51
 
65
52
  <section>
66
- <Popup className="k-column-menu k-grid-columnmenu-popup">
67
- <div className="k-columnmenu-item-wrapper">
68
- <div className="k-columnmenu-item">
69
- <Icon icon="sort-asc-small" />Sort ascending
70
- </div>
71
- <div className="k-columnmenu-item">
72
- <Icon icon="sort-desc-small" />Sort descending
73
- </div>
74
- </div>
75
- <div className="k-columnmenu-item-wrapper">
76
- <div className="k-widget k-expander">
77
- <div className="k-columnmenu-item">
78
- <Icon icon="columns" />Columns
79
- <span className="k-spacer"></span>
80
- <span className="k-expander-indicator">
81
- <Icon icon="chevron-up" />
82
- </span>
83
- </div>
84
- <div className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
85
- <div className="k-column-list-wrapper">
86
- <div className="k-column-list">
87
- <label className="k-column-list-item">
88
- <Checkbox />
89
- <span className="k-checkbox-label">Column 1</span>
90
- </label>
91
- <label className="k-column-list-item">
92
- <Checkbox />
93
- <span className="k-checkbox-label">Column 2</span>
94
- </label>
95
- <label className="k-column-list-item">
96
- <Checkbox />
97
- <span className="k-checkbox-label">Column 3</span>
98
- </label>
99
- <label className="k-column-list-item">
100
- <Checkbox />
101
- <span className="k-checkbox-label">Column 4</span>
102
- </label>
53
+ <Popup className="k-grid-columnmenu-popup">
54
+ <ColumnMenuNormal>
55
+ <ColumnMenuItemWrapper>
56
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
57
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
58
+ </ColumnMenuItemWrapper>
59
+ <ColumnMenuItemWrapper>
60
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" expanded={true} itemContent={
61
+ <>
62
+ <div className="k-column-list-wrapper">
63
+ <div className="k-column-list">
64
+ <label className="k-column-list-item">
65
+ <Checkbox />
66
+ <span className="k-checkbox-label">Column 1</span>
67
+ </label>
68
+ <label className="k-column-list-item">
69
+ <Checkbox />
70
+ <span className="k-checkbox-label">Column 2</span>
71
+ </label>
72
+ <label className="k-column-list-item">
73
+ <Checkbox />
74
+ <span className="k-checkbox-label">Column 3</span>
75
+ </label>
76
+ <label className="k-column-list-item">
77
+ <Checkbox />
78
+ <span className="k-checkbox-label">Column 4</span>
79
+ </label>
80
+ </div>
103
81
  </div>
104
- </div>
105
- <ActionButtons alignment="stretched">
106
- <Button themeColor="primary">Apply</Button>
107
- <Button>Reset</Button>
108
- </ActionButtons>
109
- </div>
110
- </div>
111
- </div>
112
- <div className="k-columnmenu-item-wrapper">
113
- <div className="k-widget k-expander">
114
- <div className="k-columnmenu-item">
115
- <Icon icon="filter" />Filter
116
- <span className="k-spacer"></span>
117
- <span className="k-expander-indicator">
118
- <Icon icon="chevron-down" />
119
- </span>
120
- </div>
121
- </div>
122
- </div>
123
- <div className="k-columnmenu-item-wrapper">
124
- <div className="k-columnmenu-item">
125
- <Icon icon="group" />Group column
126
- </div>
127
- </div>
128
- <div className="k-columnmenu-item-wrapper">
129
- <div className="k-widget k-expander">
130
- <div className="k-columnmenu-item">
131
- <Icon icon="set-column-position" />Set column position
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>
82
+ <ActionButtons alignment="stretched">
83
+ <Button themeColor="primary">Apply</Button>
84
+ <Button>Reset</Button>
85
+ </ActionButtons>
86
+ </>
87
+ }/>
88
+ </ColumnMenuItemWrapper>
89
+ <ColumnMenuItemWrapper>
90
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" />
91
+ </ColumnMenuItemWrapper>
92
+ <ColumnMenuItemWrapper>
93
+ <ColumnMenuItem text="Group column" icon="group" />
94
+ </ColumnMenuItemWrapper>
95
+ <ColumnMenuItemWrapper>
96
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" />
97
+ </ColumnMenuItemWrapper>
98
+ </ColumnMenuNormal>
139
99
  </Popup>
140
100
  </section>
141
101
 
142
102
  <section>
143
- <Popup className="k-column-menu k-grid-columnmenu-popup">
144
- <div className="k-columnmenu-item-wrapper">
145
- <div className="k-columnmenu-item">
146
- <Icon icon="sort-asc-small" />Sort ascending
147
- </div>
148
- <div className="k-columnmenu-item">
149
- <Icon icon="sort-desc-small" />Sort descending
150
- </div>
151
- </div>
152
- <div className="k-columnmenu-item-wrapper">
153
- <div className="k-widget k-expander">
154
- <div className="k-columnmenu-item">
155
- <Icon icon="columns" />Columns
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" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
162
- <div className="k-column-list-wrapper">
163
- <div className="k-column-list">
164
- <span className="k-column-menu-group-header">
165
- <span className="k-column-menu-group-header-text">Group 1</span>
166
- </span>
167
- <label className="k-column-list-item">
168
- <Checkbox />
169
- <span className="k-checkbox-label">Column 1</span>
170
- </label>
171
- <label className="k-column-list-item">
172
- <Checkbox />
173
- <span className="k-checkbox-label">Column 2</span>
174
- </label>
175
- <span className="k-column-menu-group-header">
176
- <span className="k-column-menu-group-header-text">Group 2</span>
177
- </span>
178
- <label className="k-column-list-item">
179
- <Checkbox />
180
- <span className="k-checkbox-label">Column 3</span>
181
- </label>
182
- <label className="k-column-list-item">
183
- <Checkbox />
184
- <span className="k-checkbox-label">Column 4</span>
185
- </label>
103
+ <Popup className="k-grid-columnmenu-popup">
104
+ <ColumnMenuNormal>
105
+ <ColumnMenuItemWrapper>
106
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
107
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
108
+ </ColumnMenuItemWrapper>
109
+ <ColumnMenuItemWrapper>
110
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" expanded={true} itemContent={
111
+ <>
112
+ <div className="k-column-list-wrapper">
113
+ <div className="k-column-list">
114
+ <span className="k-column-menu-group-header">
115
+ <span className="k-column-menu-group-header-text">Group 1</span>
116
+ </span>
117
+ <label className="k-column-list-item">
118
+ <Checkbox />
119
+ <span className="k-checkbox-label">Column 1</span>
120
+ </label>
121
+ <label className="k-column-list-item">
122
+ <Checkbox />
123
+ <span className="k-checkbox-label">Column 2</span>
124
+ </label>
125
+ <span className="k-column-menu-group-header">
126
+ <span className="k-column-menu-group-header-text">Group 2</span>
127
+ </span>
128
+ <label className="k-column-list-item">
129
+ <Checkbox />
130
+ <span className="k-checkbox-label">Column 3</span>
131
+ </label>
132
+ <label className="k-column-list-item">
133
+ <Checkbox />
134
+ <span className="k-checkbox-label">Column 4</span>
135
+ </label>
136
+ </div>
186
137
  </div>
187
- </div>
188
- <ActionButtons alignment="stretched">
189
- <Button themeColor="primary">Apply</Button>
190
- <Button>Reset</Button>
191
- </ActionButtons>
192
- </div>
193
- </div>
194
- </div>
195
- <div className="k-columnmenu-item-wrapper">
196
- <div className="k-widget k-expander">
197
- <div className="k-columnmenu-item">
198
- <Icon icon="filter" />Filter
199
- <span className="k-spacer"></span>
200
- <span className="k-expander-indicator">
201
- <Icon icon="chevron-down" />
202
- </span>
203
- </div>
204
- </div>
205
- </div>
206
- <div className="k-columnmenu-item-wrapper">
207
- <div className="k-columnmenu-item">
208
- <Icon icon="group" />Group column
209
- </div>
210
- </div>
211
- <div className="k-columnmenu-item-wrapper">
212
- <div className="k-widget k-expander">
213
- <div className="k-columnmenu-item">
214
- <Icon icon="set-column-position" />Set column position
215
- <span className="k-spacer"></span>
216
- <span className="k-expander-indicator">
217
- <Icon icon="chevron-down" />
218
- </span>
219
- </div>
220
- </div>
221
- </div>
138
+ <ActionButtons alignment="stretched">
139
+ <Button themeColor="primary">Apply</Button>
140
+ <Button>Reset</Button>
141
+ </ActionButtons>
142
+ </>
143
+ }/>
144
+ </ColumnMenuItemWrapper>
145
+ <ColumnMenuItemWrapper>
146
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" />
147
+ </ColumnMenuItemWrapper>
148
+ <ColumnMenuItemWrapper>
149
+ <ColumnMenuItem text="Group column" icon="group" />
150
+ </ColumnMenuItemWrapper>
151
+ <ColumnMenuItemWrapper>
152
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" />
153
+ </ColumnMenuItemWrapper>
154
+ </ColumnMenuNormal>
222
155
  </Popup>
223
156
  </section>
224
157
 
@@ -227,198 +160,92 @@ export default () =>(
227
160
  <span>Filter multi expanded</span>
228
161
 
229
162
  <section>
230
- <Popup className="k-column-menu k-grid-columnmenu-popup">
231
- <div className="k-columnmenu-item-wrapper">
232
- <div className="k-columnmenu-item">
233
- <Icon icon="sort-asc-small" />Sort ascending
234
- </div>
235
- <div className="k-columnmenu-item">
236
- <Icon icon="sort-desc-small" />Sort descending
237
- </div>
238
- </div>
239
- <div className="k-columnmenu-item-wrapper">
240
- <div className="k-widget k-expander">
241
- <div className="k-columnmenu-item">
242
- <Icon icon="columns" />Columns
243
- <span className="k-spacer"></span>
244
- <span className="k-expander-indicator">
245
- <Icon icon="chevron-down" />
246
- </span>
247
- </div>
248
- </div>
249
- </div>
250
- <div className="k-columnmenu-item-wrapper">
251
- <div className="k-widget k-expander">
252
- <div className="k-columnmenu-item">
253
- <Icon icon="filter" />Filter
254
- <span className="k-spacer"></span>
255
- <span className="k-expander-indicator">
256
- <Icon icon="chevron-down" />
257
- </span>
258
- </div>
259
- </div>
260
- </div>
261
- <div className="k-columnmenu-item-wrapper">
262
- <div className="k-columnmenu-item">
263
- <Icon icon="group" />Group column
264
- </div>
265
- </div>
266
- <div className="k-columnmenu-item-wrapper">
267
- <div className="k-widget k-expander">
268
- <div className="k-columnmenu-item">
269
- <Icon icon="set-column-position" />Set column position
270
- <span className="k-spacer"></span>
271
- <span className="k-expander-indicator">
272
- <Icon icon="chevron-up" />
273
- </span>
274
- </div>
275
- <div className="k-columnmenu-item-content k-columns-item">
276
- <div className="k-column-list">
277
- <div className="k-column-list-item">
278
- <Icon icon="lock" />Lock column
279
- </div>
280
- <div className="k-column-list-item">
281
- <Icon icon="lock" />Unlock column
163
+ <Popup className="k-grid-columnmenu-popup">
164
+ <ColumnMenuNormal>
165
+ <ColumnMenuItemWrapper>
166
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
167
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
168
+ </ColumnMenuItemWrapper>
169
+ <ColumnMenuItemWrapper>
170
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" />
171
+ </ColumnMenuItemWrapper>
172
+ <ColumnMenuItemWrapper>
173
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" />
174
+ </ColumnMenuItemWrapper>
175
+ <ColumnMenuItemWrapper>
176
+ <ColumnMenuItem text="Group column" icon="group" />
177
+ </ColumnMenuItemWrapper>
178
+ <ColumnMenuItemWrapper>
179
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" expanded={true} itemContent={
180
+ <>
181
+ <div className="k-column-list">
182
+ <div className="k-column-list-item">
183
+ <Icon icon="lock" />Lock column
184
+ </div>
185
+ <div className="k-column-list-item k-disabled">
186
+ <Icon icon="unlock" />Unlock column
187
+ </div>
188
+ <div className="k-column-list-item">
189
+ <Icon icon="stick" />Stick column
190
+ </div>
191
+ <div className="k-column-list-item k-disabled">
192
+ <Icon icon="unstick" />Unstick column
193
+ </div>
282
194
  </div>
283
- </div>
284
- </div>
285
- </div>
286
- </div>
195
+ </>
196
+ }/>
197
+ </ColumnMenuItemWrapper>
198
+ </ColumnMenuNormal>
287
199
  </Popup>
288
200
  </section>
289
201
 
290
202
  <section>
291
- <Popup className="k-column-menu k-grid-columnmenu-popup">
292
- <div className="k-columnmenu-item-wrapper">
293
- <div className="k-columnmenu-item">
294
- <Icon icon="sort-asc-small" />Sort ascending
295
- </div>
296
- <div className="k-columnmenu-item">
297
- <Icon icon="sort-desc-small" />Sort descending
298
- </div>
299
- </div>
300
- <div className="k-columnmenu-item-wrapper">
301
- <div className="k-widget k-expander">
302
- <div className="k-columnmenu-item">
303
- <Icon icon="columns" />Columns
304
- <span className="k-spacer"></span>
305
- <span className="k-expander-indicator">
306
- <Icon icon="chevron-down" />
307
- </span>
308
- </div>
309
- </div>
310
- </div>
311
- <div className="k-columnmenu-item-wrapper">
312
- <div className="k-widget k-expander">
313
- <div className="k-columnmenu-item">
314
- <Icon icon="filter" />Filter
315
- <span className="k-spacer"></span>
316
- <span className="k-expander-indicator">
317
- <Icon icon="chevron-up" />
318
- </span>
319
- </div>
320
- <div className="k-columnmenu-item-content k-columns-item">
321
- <form className="k-filter-menu k-group k-reset">
322
- <div className="k-filter-menu-container">
323
- <DropdownList value="Contains" />
324
- <Textbox placeholder="Filter..." />
325
- <DropdownList value="And" className="k-filter-and" />
326
- <DropdownList value="Contains" />
327
- <Textbox placeholder="Filter..." />
328
- <ActionButtons alignment="stretched">
329
- <Button themeColor="primary">Filter</Button>
330
- <Button>Clear</Button>
331
- </ActionButtons>
332
- </div>
333
- </form>
334
- </div>
335
- </div>
336
- </div>
337
- <div className="k-columnmenu-item-wrapper">
338
- <div className="k-columnmenu-item">
339
- <Icon icon="group" />Group column
340
- </div>
341
- </div>
342
- <div className="k-columnmenu-item-wrapper">
343
- <div className="k-widget k-expander">
344
- <div className="k-columnmenu-item">
345
- <Icon icon="set-column-position" />Set column position
346
- <span className="k-spacer"></span>
347
- <span className="k-expander-indicator">
348
- <Icon icon="chevron-down" />
349
- </span>
350
- </div>
351
- </div>
352
- </div>
203
+ <Popup className="k-grid-columnmenu-popup">
204
+ <ColumnMenuNormal>
205
+ <ColumnMenuItemWrapper>
206
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
207
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
208
+ </ColumnMenuItemWrapper>
209
+ <ColumnMenuItemWrapper>
210
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" />
211
+ </ColumnMenuItemWrapper>
212
+ <ColumnMenuItemWrapper>
213
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" expanded={true} itemContent={
214
+ <FilterMenuNormal />
215
+ }/>
216
+ </ColumnMenuItemWrapper>
217
+ <ColumnMenuItemWrapper>
218
+ <ColumnMenuItem text="Group column" icon="group" />
219
+ </ColumnMenuItemWrapper>
220
+ <ColumnMenuItemWrapper>
221
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" />
222
+ </ColumnMenuItemWrapper>
223
+ </ColumnMenuNormal>
353
224
  </Popup>
354
225
  </section>
355
226
 
356
227
  <section>
357
- <Popup className="k-column-menu k-grid-columnmenu-popup">
358
- <div className="k-columnmenu-item-wrapper">
359
- <div className="k-columnmenu-item">
360
- <Icon icon="sort-asc-small" />Sort ascending
361
- </div>
362
- <div className="k-columnmenu-item">
363
- <Icon icon="sort-desc-small" />Sort descending
364
- </div>
365
- </div>
366
- <div className="k-columnmenu-item-wrapper">
367
- <div className="k-widget k-expander">
368
- <div className="k-columnmenu-item">
369
- <Icon icon="columns" />Columns
370
- <span className="k-spacer"></span>
371
- <span className="k-expander-indicator">
372
- <Icon icon="chevron-down" />
373
- </span>
374
- </div>
375
- </div>
376
- </div>
377
- <div className="k-columnmenu-item-wrapper">
378
- <div className="k-widget k-expander">
379
- <div className="k-columnmenu-item">
380
- <Icon icon="filter" />Filter
381
- <span className="k-spacer"></span>
382
- <span className="k-expander-indicator">
383
- <Icon icon="chevron-up" />
384
- </span>
385
- </div>
386
- <div className="k-columnmenu-item-content k-columns-item">
387
- <form className="k-filter-menu k-group k-reset">
388
- <div className="k-filter-menu-container">
389
- <Searchbox placeholder="Search..." />
390
- <ul className="k-reset k-multicheck-wrap">
391
- <li className="k-item k-check-all-wrap"><label className="k-label k-checkbox-label"><Checkbox /><span>Select All</span></label></li>
392
- <li className="k-item"><label className="k-label k-checkbox-label"><Checkbox /><span>Chai</span></label></li>
393
- <li className="k-item"><label className="k-label k-checkbox-label"><Checkbox /><span>Chang</span></label></li>
394
- <li className="k-item"><label className="k-label k-checkbox-label"><Checkbox /><span>Aniseed Syrup Aniseed Syrup Aniseed Syrup Aniseed Syrup </span></label></li>
395
- </ul>
396
- <div className="k-filter-selected-items">0 selected items</div>
397
- <ActionButtons alignment="stretched">
398
- <Button themeColor="primary">Filter</Button>
399
- <Button>Clear</Button>
400
- </ActionButtons>
401
- </div>
402
- </form>
403
- </div>
404
- </div>
405
- </div>
406
- <div className="k-columnmenu-item-wrapper">
407
- <div className="k-columnmenu-item">
408
- <Icon icon="group" />Group column
409
- </div>
410
- </div>
411
- <div className="k-columnmenu-item-wrapper">
412
- <div className="k-widget k-expander">
413
- <div className="k-columnmenu-item">
414
- <Icon icon="set-column-position" />Set column position
415
- <span className="k-spacer"></span>
416
- <span className="k-expander-indicator">
417
- <Icon icon="chevron-down" />
418
- </span>
419
- </div>
420
- </div>
421
- </div>
228
+ <Popup className="k-grid-columnmenu-popup">
229
+ <ColumnMenuNormal>
230
+ <ColumnMenuItemWrapper>
231
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
232
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
233
+ </ColumnMenuItemWrapper>
234
+ <ColumnMenuItemWrapper>
235
+ <ColumnMenuExpander itemText="Columns" itemIcon="columns" />
236
+ </ColumnMenuItemWrapper>
237
+ <ColumnMenuItemWrapper>
238
+ <ColumnMenuExpander itemText="Filter" itemIcon="filter" expanded={true} itemContent={
239
+ <FilterMenuMultiCheck />
240
+ }/>
241
+ </ColumnMenuItemWrapper>
242
+ <ColumnMenuItemWrapper>
243
+ <ColumnMenuItem text="Group column" icon="group" />
244
+ </ColumnMenuItemWrapper>
245
+ <ColumnMenuItemWrapper>
246
+ <ColumnMenuExpander itemText="Set column position" itemIcon="set-column-position" />
247
+ </ColumnMenuItemWrapper>
248
+ </ColumnMenuNormal>
422
249
  </Popup>
423
250
  </section>
424
251