@ember-eui/core 4.2.6 → 5.0.0-alpha.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 (520) hide show
  1. package/addon/components/common.ts +1 -0
  2. package/addon/components/eui-accordion/index.hbs +106 -85
  3. package/addon/components/eui-accordion/index.ts +58 -19
  4. package/addon/components/eui-auto-sizer/index.hbs +3 -0
  5. package/addon/components/eui-auto-sizer/index.ts +175 -0
  6. package/addon/components/eui-avatar/index.hbs +7 -3
  7. package/addon/components/eui-badge/index.hbs +9 -3
  8. package/addon/components/eui-beta-badge/index.hbs +171 -19
  9. package/addon/components/eui-bottom-bar/index.hbs +43 -12
  10. package/addon/components/eui-bottom-bar/index.ts +75 -32
  11. package/addon/components/eui-breadcrumbs/index.hbs +98 -0
  12. package/addon/components/eui-breadcrumbs/index.ts +194 -0
  13. package/addon/components/eui-button/index.hbs +4 -4
  14. package/addon/components/eui-button-content/index.hbs +6 -2
  15. package/addon/components/eui-button-empty/index.hbs +60 -52
  16. package/addon/components/eui-button-icon/index.hbs +17 -3
  17. package/addon/components/eui-call-out/index.hbs +1 -0
  18. package/addon/components/eui-card/index.hbs +61 -47
  19. package/addon/components/eui-card/index.ts +27 -0
  20. package/addon/components/{eui-card/eui-card-select → eui-card-select}/index.hbs +2 -5
  21. package/addon/components/eui-card-select/index.ts +35 -0
  22. package/addon/components/eui-checkable-card/index.hbs +17 -11
  23. package/addon/components/eui-checkbox/index.hbs +11 -5
  24. package/addon/components/eui-checkbox/index.ts +15 -0
  25. package/addon/components/eui-code/index.hbs +14 -8
  26. package/addon/components/eui-code/index.ts +73 -0
  27. package/addon/components/eui-code-block/controls/index.hbs +26 -0
  28. package/addon/components/eui-code-block/full-screen-display/index.hbs +12 -0
  29. package/addon/components/eui-code-block/index.hbs +144 -9
  30. package/addon/components/eui-code-block/index.ts +290 -0
  31. package/addon/components/eui-code-block/virtualized/index.hbs +30 -0
  32. package/addon/components/eui-code-block/virtualized/index.ts +22 -0
  33. package/addon/components/eui-collapsible-nav/index.hbs +35 -44
  34. package/addon/components/eui-collapsible-nav/index.ts +161 -0
  35. package/addon/components/eui-collapsible-nav-group/index.hbs +114 -66
  36. package/addon/components/eui-combo-box/group/index.hbs +3 -3
  37. package/addon/components/eui-combo-box/index.hbs +8 -5
  38. package/addon/components/eui-combo-box/index.ts +89 -4
  39. package/addon/components/eui-combo-box/options/index.hbs +14 -2
  40. package/addon/components/eui-combo-box/options/index.js +22 -9
  41. package/addon/components/eui-combo-box/trigger/index.hbs +3 -1
  42. package/addon/components/eui-confirm-modal/index.hbs +1 -1
  43. package/addon/components/eui-copy/index.hbs +1 -4
  44. package/addon/components/eui-described-form-group/index.hbs +3 -2
  45. package/addon/components/eui-description-list/index.hbs +23 -0
  46. package/addon/components/eui-description-list-description/index.hbs +3 -0
  47. package/addon/components/eui-description-list-title/index.hbs +3 -0
  48. package/addon/components/eui-dual-range/index.hbs +30 -18
  49. package/addon/components/eui-dual-range/index.ts +36 -10
  50. package/addon/components/eui-empty-prompt/index.hbs +77 -0
  51. package/addon/components/eui-field-number/index.hbs +3 -3
  52. package/addon/components/eui-field-search/index.hbs +2 -1
  53. package/addon/components/eui-field-text/index.hbs +3 -1
  54. package/addon/components/eui-file-picker/index.hbs +15 -11
  55. package/addon/components/eui-file-picker/index.ts +26 -8
  56. package/addon/components/eui-flyout/index.hbs +130 -43
  57. package/addon/components/eui-flyout/index.ts +233 -0
  58. package/addon/components/eui-flyout-body/index.hbs +21 -7
  59. package/addon/components/eui-form-label/index.hbs +1 -1
  60. package/addon/components/eui-form-row/index.hbs +13 -9
  61. package/addon/components/eui-header/index.hbs +18 -3
  62. package/addon/{modifiers/fixed-header.ts → components/eui-header/index.ts} +10 -1
  63. package/addon/components/eui-header-alert/index.hbs +25 -0
  64. package/addon/components/eui-header-breadcrumbs/index.hbs +7 -0
  65. package/addon/components/eui-header-links/index.hbs +41 -0
  66. package/addon/components/eui-header-links/index.ts +14 -0
  67. package/addon/components/eui-header-section-item-button/index.hbs +30 -12
  68. package/addon/components/eui-header-section-item-button/index.ts +131 -0
  69. package/addon/components/eui-health/index.hbs +15 -13
  70. package/addon/components/eui-hide-for/index.hbs +3 -0
  71. package/addon/components/eui-hide-for/index.ts +33 -0
  72. package/addon/components/eui-icon/index.hbs +6 -3
  73. package/addon/components/eui-icon/index.ts +4 -0
  74. package/addon/components/eui-image/index.hbs +63 -25
  75. package/addon/components/eui-input-popover/index.ts +6 -4
  76. package/addon/components/eui-key-pad-menu/index.hbs +16 -0
  77. package/addon/components/eui-key-pad-menu/key/index.hbs +1 -0
  78. package/addon/components/eui-key-pad-menu-item/index.hbs +66 -0
  79. package/addon/components/eui-key-pad-menu-item/index.ts +11 -0
  80. package/addon/components/eui-link/index.hbs +50 -0
  81. package/addon/components/eui-list-group-item/index.hbs +10 -2
  82. package/addon/components/eui-markdown-editor/index.hbs +4 -1
  83. package/addon/components/eui-markdown-editor/index.ts +54 -0
  84. package/addon/components/eui-markdown-editor-footer/index.hbs +39 -40
  85. package/addon/components/eui-markdown-format/index.ts +1 -1
  86. package/addon/components/eui-markdown-format/markdown-code/index.hbs +2 -2
  87. package/addon/components/eui-markdown-format/markdown-code-block/index.hbs +1 -0
  88. package/addon/components/eui-modal/index.hbs +28 -24
  89. package/addon/components/eui-overlay-mask/index.hbs +4 -4
  90. package/addon/components/eui-overlay-mask/index.ts +14 -1
  91. package/addon/components/eui-page/index.hbs +3 -6
  92. package/addon/components/eui-page-body/index.hbs +47 -15
  93. package/addon/components/eui-page-content/index.hbs +6 -8
  94. package/addon/components/eui-page-content-body/index.hbs +13 -1
  95. package/addon/components/eui-page-content-header/index.hbs +6 -0
  96. package/addon/components/eui-page-header/index.hbs +31 -6
  97. package/addon/components/eui-page-header-content/index.hbs +219 -0
  98. package/addon/components/eui-page-header-content/index.ts +49 -0
  99. package/addon/components/eui-page-side-bar/index.hbs +8 -1
  100. package/addon/components/eui-page-template/index.hbs +417 -0
  101. package/addon/components/eui-page-template/index.ts +89 -0
  102. package/addon/components/eui-panel/index.hbs +58 -12
  103. package/addon/components/eui-popover/index.hbs +8 -4
  104. package/addon/components/eui-popover/index.ts +28 -12
  105. package/addon/components/eui-progress/index.hbs +16 -13
  106. package/addon/components/eui-radio/index.hbs +9 -3
  107. package/addon/components/eui-range/index.hbs +33 -11
  108. package/addon/components/eui-range/index.ts +7 -4
  109. package/addon/components/eui-range-input/index.hbs +37 -31
  110. package/addon/components/eui-range-input/types.ts +2 -1
  111. package/addon/components/eui-range-levels/index.hbs +3 -3
  112. package/addon/components/eui-range-ticks/index.hbs +2 -2
  113. package/addon/components/eui-range-track/index.hbs +10 -2
  114. package/addon/components/eui-range-track/index.ts +23 -6
  115. package/addon/components/eui-show-for/index.hbs +3 -0
  116. package/addon/components/eui-show-for/index.ts +79 -0
  117. package/addon/components/eui-side-nav/index.hbs +161 -36
  118. package/addon/components/eui-side-nav/index.ts +28 -0
  119. package/addon/components/eui-side-nav-item/button/index.hbs +26 -14
  120. package/addon/components/eui-side-nav-item/index.hbs +52 -25
  121. package/addon/components/eui-split-panel/inner/index.hbs +10 -0
  122. package/addon/components/eui-split-panel/outer/index.hbs +27 -0
  123. package/addon/components/eui-split-panel/outer/index.ts +37 -0
  124. package/addon/components/eui-step/eui-step-number/index.hbs +21 -4
  125. package/addon/components/eui-steps/index.hbs +7 -1
  126. package/addon/components/eui-tab/index.hbs +28 -3
  127. package/addon/{modifiers/focus-tab.ts → components/eui-tab/index.ts} +6 -1
  128. package/addon/components/eui-tabs/index.hbs +6 -1
  129. package/addon/components/eui-tool-tip/index.hbs +6 -7
  130. package/addon/components/eui-tool-tip/index.ts +27 -11
  131. package/addon/helpers/class-names.ts +2 -0
  132. package/addon/helpers/get-range-tick.ts +53 -8
  133. package/addon/helpers/unique-id.ts +4 -1
  134. package/addon/styles/ember-eui.css +2 -10
  135. package/addon/utils/breakpoint.ts +114 -0
  136. package/addon/utils/code/utils.ts +304 -0
  137. package/addon/utils/css-mappings/eui-avatar.ts +51 -9
  138. package/addon/utils/css-mappings/eui-badge.ts +6 -2
  139. package/addon/utils/css-mappings/eui-beta-badge.ts +22 -0
  140. package/addon/utils/css-mappings/eui-bottom-bar.ts +8 -1
  141. package/addon/utils/css-mappings/eui-button-empty.ts +4 -4
  142. package/addon/utils/css-mappings/eui-button-icon.ts +19 -6
  143. package/addon/utils/css-mappings/eui-button.ts +2 -1
  144. package/addon/utils/css-mappings/eui-card-select.ts +1 -11
  145. package/addon/utils/css-mappings/eui-card.ts +1 -18
  146. package/addon/utils/css-mappings/{eui-code-block-impl.ts → eui-code-block.ts} +0 -0
  147. package/addon/utils/css-mappings/eui-description-list.ts +29 -0
  148. package/addon/utils/css-mappings/eui-empty-prompt.ts +17 -0
  149. package/addon/utils/css-mappings/eui-flyout.ts +21 -1
  150. package/addon/utils/css-mappings/eui-header-links.ts +27 -0
  151. package/addon/utils/css-mappings/eui-health.ts +20 -0
  152. package/addon/utils/css-mappings/eui-icon.ts +94 -70
  153. package/addon/utils/css-mappings/eui-image.ts +17 -2
  154. package/addon/utils/css-mappings/eui-link.ts +21 -0
  155. package/addon/utils/css-mappings/eui-page-body.ts +25 -0
  156. package/addon/utils/css-mappings/eui-page-content-body.ts +17 -0
  157. package/addon/utils/css-mappings/eui-page-content.ts +7 -1
  158. package/addon/utils/css-mappings/eui-page-header.ts +17 -0
  159. package/addon/utils/css-mappings/eui-page-side-bar.ts +17 -0
  160. package/addon/utils/css-mappings/eui-panel.ts +1 -0
  161. package/addon/utils/css-mappings/eui-progress-data.ts +0 -1
  162. package/addon/utils/css-mappings/eui-progress.ts +0 -2
  163. package/addon/utils/css-mappings/eui-range-levels.ts +22 -4
  164. package/addon/utils/css-mappings/eui-tabs.ts +3 -1
  165. package/addon/utils/css-mappings/eui-text-color.ts +3 -2
  166. package/addon/utils/css-mappings/index.ts +23 -3
  167. package/addon/utils/detect-element-resize.js +248 -0
  168. package/addon/utils/markdown/plugins/markdown-add-components/index.ts +1 -0
  169. package/addon/utils/markdown/plugins/{markdown-add-components.ts → markdown-add-components/processor.ts} +14 -7
  170. package/addon/utils/markdown/plugins/markdown-checkbox/index.ts +9 -0
  171. package/addon/utils/markdown/plugins/{markdown-checkbox.ts → markdown-checkbox/parser.ts} +3 -5
  172. package/addon/utils/markdown/plugins/markdown-default-plugins/index.ts +12 -0
  173. package/addon/utils/markdown/plugins/{markdown-default-plugins.ts → markdown-default-plugins/parsing-plugins.ts} +13 -25
  174. package/addon/utils/markdown/plugins/markdown-default-plugins/plugins.ts +32 -0
  175. package/addon/utils/markdown/plugins/markdown-default-plugins/processing-plugins.ts +67 -0
  176. package/addon/utils/markdown/plugins/markdown-default-plugins/ui-plugins.ts +27 -0
  177. package/addon/utils/markdown/plugins/markdown-tooltip/index.ts +2 -0
  178. package/addon/utils/markdown/plugins/{markdown-tooltip.ts → markdown-tooltip/parser.ts} +3 -23
  179. package/addon/utils/markdown/plugins/markdown-tooltip/plugin.ts +17 -0
  180. package/addon/utils/markdown/plugins/to-dom.ts +3 -1
  181. package/addon/utils/markdown/remark/remark-prismjs.ts +41 -0
  182. package/addon/utils/popover/index.ts +87 -35
  183. package/addon/utils/range/index.ts +1 -0
  184. package/app/components/eui-auto-sizer/index.js +1 -0
  185. package/app/components/eui-breadcrumbs/index.js +1 -0
  186. package/app/components/eui-card-select/index.js +1 -0
  187. package/app/components/{eui-code-block-impl → eui-code-block/controls}/index.js +1 -1
  188. package/app/components/{eui-code-block-impl/code-block-controls → eui-code-block/full-screen-display}/index.js +1 -1
  189. package/app/components/eui-code-block/virtualized/index.js +1 -0
  190. package/app/components/eui-description-list/index.js +1 -0
  191. package/app/components/eui-description-list-description/index.js +1 -0
  192. package/app/components/eui-description-list-title/index.js +1 -0
  193. package/app/components/eui-empty-prompt/index.js +1 -0
  194. package/app/components/eui-header-alert/index.js +1 -0
  195. package/app/components/eui-header-breadcrumbs/index.js +1 -0
  196. package/app/components/eui-header-links/index.js +1 -0
  197. package/app/components/eui-hide-for/index.js +1 -0
  198. package/app/components/eui-key-pad-menu/index.js +1 -0
  199. package/app/components/eui-key-pad-menu/key/index.js +1 -0
  200. package/app/components/eui-key-pad-menu-item/index.js +1 -0
  201. package/app/components/eui-link/index.js +1 -0
  202. package/app/components/eui-page-header-content/index.js +1 -0
  203. package/app/components/eui-page-template/index.js +1 -0
  204. package/app/components/eui-show-for/index.js +1 -0
  205. package/app/components/eui-split-panel/inner/index.js +1 -0
  206. package/app/components/eui-split-panel/outer/index.js +1 -0
  207. package/app/utils/copy-to-clipboard.js +1 -0
  208. package/docs/display/avatar-demo/demo1.md +43 -49
  209. package/docs/display/avatar-demo/demo2.md +42 -0
  210. package/docs/display/avatar-demo/demo3.md +33 -0
  211. package/docs/display/avatar-demo/demo4.md +53 -0
  212. package/docs/display/avatar-demo/demo5.md +38 -0
  213. package/docs/display/avatar.md +9 -1
  214. package/docs/display/badge-demo/demo1.md +111 -168
  215. package/docs/display/badge-demo/demo2.md +34 -0
  216. package/docs/display/badge-demo/demo3.md +73 -0
  217. package/docs/display/badge-demo/demo4.md +29 -0
  218. package/docs/display/badge-demo/demo5.md +33 -0
  219. package/docs/display/badge-demo/demo6.md +71 -0
  220. package/docs/display/badge-demo/demo7.md +101 -0
  221. package/docs/display/badge-demo/demo8.md +22 -0
  222. package/docs/display/badge.md +9 -1
  223. package/docs/display/callout-demo/demo1.md +29 -81
  224. package/docs/display/callout-demo/demo2.md +28 -0
  225. package/docs/display/callout-demo/demo3.md +29 -0
  226. package/docs/display/callout-demo/demo4.md +26 -0
  227. package/docs/display/callout.md +15 -1
  228. package/docs/display/card/basic-card-demo/demo1.md +22 -316
  229. package/docs/display/card/basic-card.md +9 -1
  230. package/docs/display/card/beta-badge-demo/demo1.md +47 -0
  231. package/docs/display/card/beta-badge.md +9 -0
  232. package/docs/display/card/checkable-demo/demo1.md +20 -94
  233. package/docs/display/card/checkable-demo/demo2.md +63 -0
  234. package/docs/display/card/checkable.md +9 -1
  235. package/docs/display/card/custom-children-demo/demo1.md +93 -0
  236. package/docs/display/card/custom-children.md +9 -0
  237. package/docs/display/card/footer-demo/demo1.md +77 -0
  238. package/docs/display/card/footer.md +9 -0
  239. package/docs/display/card/images-demo/demo1.md +57 -0
  240. package/docs/display/card/images.md +9 -0
  241. package/docs/display/card/layout-demo/demo1.md +40 -0
  242. package/docs/display/card/layout.md +9 -0
  243. package/docs/display/card/selectable-demo/demo1.md +60 -53
  244. package/docs/display/card/selectable.md +9 -1
  245. package/docs/display/comment-list.md +9 -1
  246. package/docs/display/description-list-demo/demo1.md +54 -0
  247. package/docs/display/description-list-demo/demo2.md +43 -0
  248. package/docs/display/description-list-demo/demo3.md +58 -0
  249. package/docs/display/description-list-demo/demo4.md +42 -0
  250. package/docs/display/description-list-demo/demo5.md +62 -0
  251. package/docs/display/description-list-demo/demo6.md +46 -0
  252. package/docs/display/description-list.md +9 -0
  253. package/docs/display/empty-prompt-demo/demo1.md +49 -0
  254. package/docs/display/empty-prompt.md +11 -0
  255. package/docs/display/health-demo/demo1.md +11 -7
  256. package/docs/display/health-demo/demo2.md +31 -0
  257. package/docs/display/health.md +15 -1
  258. package/docs/display/icons-demo/demo1.md +270 -57
  259. package/docs/display/icons-demo/demo2.md +76 -0
  260. package/docs/display/icons-demo/demo3.md +76 -0
  261. package/docs/display/icons-demo/demo4.md +104 -0
  262. package/docs/display/icons-demo/demo5.md +64 -0
  263. package/docs/display/icons-demo/demo6.md +63 -0
  264. package/docs/display/icons-demo/demo7.md +101 -0
  265. package/docs/display/icons-demo/demo8.md +47 -0
  266. package/docs/display/icons.md +9 -1
  267. package/docs/display/image-demo/demo1.md +15 -50
  268. package/docs/display/image-demo/demo2.md +35 -0
  269. package/docs/display/image-demo/demo3.md +75 -0
  270. package/docs/display/image-demo/demo4.md +80 -0
  271. package/docs/display/image.md +13 -1
  272. package/docs/display/list-group.md +9 -1
  273. package/docs/display/progress-demo/demo1.md +10 -5
  274. package/docs/display/progress-demo/demo2.md +11 -26
  275. package/docs/display/progress-demo/demo3.md +27 -0
  276. package/docs/display/progress-demo/demo4.md +77 -0
  277. package/docs/display/progress.md +9 -1
  278. package/docs/display/stat-demo/demo1.md +0 -118
  279. package/docs/display/stat-demo/demo2.md +24 -22
  280. package/docs/display/stat-demo/demo3.md +39 -0
  281. package/docs/display/stat-demo/demo4.md +50 -0
  282. package/docs/display/stat-demo/demo5.md +25 -0
  283. package/docs/display/stat-demo/demo6.md +40 -0
  284. package/docs/display/stat-demo/demo7.md +84 -0
  285. package/docs/display/stat.md +15 -1
  286. package/docs/display/text-demo/demo1.md +79 -130
  287. package/docs/display/text-demo/demo2.md +71 -0
  288. package/docs/display/text-demo/demo3.md +39 -0
  289. package/docs/display/text.md +20 -1
  290. package/docs/display/title-demo/demo1.md +50 -26
  291. package/docs/display/title.md +9 -1
  292. package/docs/display/tool-tip-demo/demo1.md +57 -100
  293. package/docs/display/tool-tip-demo/demo2.md +35 -29
  294. package/docs/display/tool-tip-demo/demo3.md +52 -0
  295. package/docs/display/tool-tip-demo/demo4.md +77 -0
  296. package/docs/display/tool-tip.md +15 -1
  297. package/docs/editors/code/code-block-demo/demo1.md +21 -40
  298. package/docs/editors/code/code-block-demo/demo2.md +35 -0
  299. package/docs/editors/code/code-block-demo/demo3.md +43 -0
  300. package/docs/editors/code/code-block-demo/demo4.md +28 -0
  301. package/docs/editors/code/code-block-demo/demo5.md +42 -0
  302. package/docs/editors/code/code-block-demo/demo6.md +42 -0
  303. package/docs/editors/code/code-block-demo/demo7.md +853 -0
  304. package/docs/editors/code/code-block-demo/demo8.md +855 -0
  305. package/docs/editors/code/code-block.md +27 -1
  306. package/docs/editors/code/inline-demo/demo1.md +6 -3
  307. package/docs/editors/code/inline.md +9 -1
  308. package/docs/editors/markdown-editor/base-editor-demo/demo1.md +9 -28
  309. package/docs/editors/markdown-editor/base-editor.md +9 -1
  310. package/docs/forms/form-controls/checkbox/demo/demo1.md +49 -0
  311. package/docs/forms/form-controls/checkbox/index.md +34 -0
  312. package/docs/forms/form-controls/{checkbox-group-demo → checkbox-group/demo}/demo1.md +4 -13
  313. package/docs/forms/form-controls/checkbox-group/index.md +35 -0
  314. package/docs/forms/form-controls/{combo-box-demo → combo-box/demo}/demo1.md +8 -2
  315. package/docs/forms/form-controls/{combo-box-demo → combo-box/demo}/demo2.md +10 -8
  316. package/docs/forms/form-controls/combo-box/demo/demo3.md +60 -0
  317. package/docs/forms/form-controls/{combo-box-demo/demo3.md → combo-box/demo/demo4.md} +17 -14
  318. package/docs/forms/form-controls/combo-box/demo/demo5.md +151 -0
  319. package/docs/forms/form-controls/combo-box/index.md +14 -0
  320. package/docs/forms/form-controls/file-picker/demo/demo1.md +29 -0
  321. package/docs/forms/form-controls/file-picker/demo/demo2.md +44 -0
  322. package/docs/forms/form-controls/file-picker/demo/demo3.md +45 -0
  323. package/docs/forms/form-controls/file-picker/demo/demo4.md +63 -0
  324. package/docs/forms/form-controls/file-picker/index.md +30 -0
  325. package/docs/forms/form-controls/{form-control-layout-demo → form-control-layout/demo}/demo1.md +0 -0
  326. package/docs/forms/form-controls/form-control-layout/index.md +38 -0
  327. package/docs/forms/form-controls/{form-control-layout-delimited-demo → form-control-layout-delimited/demo}/demo1.md +41 -37
  328. package/docs/forms/form-controls/form-control-layout-delimited/index.md +32 -0
  329. package/docs/forms/form-controls/number-field/demo/demo1.md +20 -0
  330. package/docs/forms/form-controls/{number-field-demo/demo1.md → number-field/demo/demo2.md} +23 -11
  331. package/docs/forms/form-controls/number-field/index.md +20 -0
  332. package/docs/forms/form-controls/password-field/demo/demo1.md +19 -0
  333. package/docs/forms/form-controls/{password-field-demo/demo1.md → password-field/demo/demo2.md} +12 -8
  334. package/docs/forms/form-controls/password-field/index.md +27 -0
  335. package/docs/forms/form-controls/radio/demo/demo1.md +43 -0
  336. package/docs/forms/form-controls/radio/index.md +32 -0
  337. package/docs/forms/form-controls/radio-group/demo/demo1.md +50 -0
  338. package/docs/forms/form-controls/radio-group/index.md +26 -0
  339. package/docs/forms/form-controls/range/demo/demo1.md +96 -0
  340. package/docs/forms/form-controls/range/demo/demo2.md +62 -0
  341. package/docs/forms/form-controls/{range-demo → range/demo}/demo3.md +10 -12
  342. package/docs/forms/form-controls/{range-demo → range/demo}/demo4.md +16 -18
  343. package/docs/forms/form-controls/{range-demo → range/demo}/demo5.md +18 -20
  344. package/docs/forms/form-controls/range/demo/demo6.md +57 -0
  345. package/docs/forms/form-controls/range/demo/demo7.md +350 -0
  346. package/docs/forms/form-controls/range/index.md +26 -0
  347. package/docs/forms/form-controls/search-field/demo/demo1.md +29 -0
  348. package/docs/forms/form-controls/search-field/index.md +22 -0
  349. package/docs/forms/form-controls/select/demo/demo1.md +29 -0
  350. package/docs/forms/form-controls/select/demo/demo2.md +44 -0
  351. package/docs/forms/form-controls/{select-demo/demo1.md → select/demo/demo3.md} +20 -10
  352. package/docs/forms/form-controls/select/index.md +27 -0
  353. package/docs/forms/form-controls/{switch-demo → switch/demo}/demo1.md +10 -10
  354. package/docs/forms/form-controls/switch/index.md +21 -0
  355. package/docs/forms/form-controls/text-field/demo/demo1.md +35 -0
  356. package/docs/forms/form-controls/text-field/demo/demo2.md +40 -0
  357. package/docs/forms/form-controls/{text-field-demo/demo2.md → text-field/demo/demo3.md} +14 -17
  358. package/docs/forms/form-controls/{text-field-demo/demo1.md → text-field/demo/demo4.md} +18 -32
  359. package/docs/forms/form-controls/text-field/index.md +22 -0
  360. package/docs/forms/form-controls/textarea/demo/demo1.md +21 -0
  361. package/docs/forms/form-controls/textarea/demo/demo2.md +24 -0
  362. package/docs/forms/form-controls/textarea/index.md +22 -0
  363. package/docs/forms/form-layouts/described-form-groups-demo/demo1.md +13 -4
  364. package/docs/forms/form-layouts/described-form-groups.md +9 -1
  365. package/docs/layout/accordion-demo/demo1.md +21 -102
  366. package/docs/layout/accordion-demo/demo2.md +76 -0
  367. package/docs/layout/accordion-demo/demo3.md +25 -0
  368. package/docs/layout/accordion-demo/demo4.md +26 -0
  369. package/docs/layout/accordion-demo/demo5.md +65 -0
  370. package/docs/layout/accordion-demo/demo6.md +78 -0
  371. package/docs/layout/accordion-demo/demo7.md +66 -0
  372. package/docs/layout/accordion-demo/demo8.md +64 -0
  373. package/docs/layout/accordion-demo/demo9.md +114 -0
  374. package/docs/layout/accordion.md +40 -1
  375. package/docs/layout/bottom-bar-demo/demo1.md +32 -49
  376. package/docs/layout/bottom-bar-demo/demo2.md +54 -0
  377. package/docs/layout/bottom-bar-demo/demo3.md +81 -0
  378. package/docs/layout/bottom-bar.md +9 -1
  379. package/docs/layout/flex.md +9 -1
  380. package/docs/layout/flyout-demo/demo1.md +19 -11
  381. package/docs/layout/flyout-demo/demo2.md +43 -28
  382. package/docs/layout/flyout-demo/demo3.md +99 -0
  383. package/docs/layout/flyout-demo/demo4.md +115 -0
  384. package/docs/layout/flyout-demo/demo5.md +59 -0
  385. package/docs/layout/flyout-demo/demo6.md +57 -0
  386. package/docs/layout/flyout-demo/demo7.md +51 -0
  387. package/docs/layout/flyout.md +9 -1
  388. package/docs/layout/header-demo/demo1.md +284 -35
  389. package/docs/layout/header-demo/demo2.md +42 -0
  390. package/docs/layout/header-demo/demo3.md +48 -0
  391. package/docs/layout/header-demo/demo4.md +57 -0
  392. package/docs/layout/header-demo/demo5.md +232 -0
  393. package/docs/layout/header-demo/demo6.md +85 -0
  394. package/docs/layout/header-demo/demo7.md +94 -0
  395. package/docs/layout/header.md +9 -1
  396. package/docs/layout/horizontal-rule.md +9 -1
  397. package/docs/layout/modal-demo/demo1.md +64 -167
  398. package/docs/layout/modal-demo/demo2.md +126 -0
  399. package/docs/layout/modal-demo/demo3.md +55 -0
  400. package/docs/layout/modal-demo/demo4.md +65 -0
  401. package/docs/layout/modal-demo/demo5.md +96 -0
  402. package/docs/layout/modal.md +9 -1
  403. package/docs/layout/page-demo/demo1.md +96 -3
  404. package/docs/layout/page-demo/demo10.md +42 -0
  405. package/docs/layout/page-demo/demo2.md +46 -0
  406. package/docs/layout/page-demo/demo3.md +50 -0
  407. package/docs/layout/page-demo/demo4.md +38 -0
  408. package/docs/layout/page-demo/demo5.md +30 -0
  409. package/docs/layout/page-demo/demo6.md +51 -0
  410. package/docs/layout/page-demo/demo7.md +59 -0
  411. package/docs/layout/page-demo/demo8.md +19 -0
  412. package/docs/layout/page-demo/demo9.md +29 -0
  413. package/docs/layout/page.md +9 -1
  414. package/docs/layout/panel-demo/demo1.md +28 -19
  415. package/docs/layout/panel-demo/demo2.md +22 -0
  416. package/docs/layout/panel-demo/demo3.md +27 -0
  417. package/docs/layout/panel-demo/demo4.md +46 -0
  418. package/docs/layout/panel-demo/demo5.md +81 -0
  419. package/docs/layout/panel.md +15 -1
  420. package/docs/layout/popover-demo/demo1.md +42 -300
  421. package/docs/layout/popover-demo/demo10.md +72 -0
  422. package/docs/layout/popover-demo/demo2.md +306 -96
  423. package/docs/layout/popover-demo/demo3.md +20 -12
  424. package/docs/layout/popover-demo/demo4.md +118 -0
  425. package/docs/layout/popover-demo/demo5.md +252 -0
  426. package/docs/layout/popover-demo/demo6.md +44 -0
  427. package/docs/layout/popover-demo/demo7.md +44 -0
  428. package/docs/layout/popover-demo/demo8.md +50 -0
  429. package/docs/layout/popover-demo/demo9.md +80 -0
  430. package/docs/layout/popover.md +9 -1
  431. package/docs/navigation/breadcrumbs-demo/demo1.md +77 -0
  432. package/docs/navigation/breadcrumbs-demo/demo2.md +61 -0
  433. package/docs/navigation/breadcrumbs-demo/demo3.md +61 -0
  434. package/docs/navigation/breadcrumbs-demo/demo4.md +61 -0
  435. package/docs/navigation/breadcrumbs-demo/demo5.md +61 -0
  436. package/docs/navigation/breadcrumbs-demo/demo6.md +61 -0
  437. package/docs/navigation/breadcrumbs.md +9 -0
  438. package/docs/navigation/button-demo/demo1.md +210 -158
  439. package/docs/navigation/button.md +9 -1
  440. package/docs/navigation/collapsible-nav-demo/demo1.md +21 -44
  441. package/docs/navigation/collapsible-nav-demo/demo2.md +108 -0
  442. package/docs/navigation/collapsible-nav.md +9 -1
  443. package/docs/navigation/key-pad-menu-demo/demo1.md +77 -0
  444. package/docs/navigation/key-pad-menu-demo/demo2.md +102 -0
  445. package/docs/navigation/key-pad-menu-demo/demo3.md +54 -0
  446. package/docs/navigation/key-pad-menu-demo/demo4.md +71 -0
  447. package/docs/navigation/key-pad-menu-demo/demo5.md +65 -0
  448. package/docs/navigation/key-pad-menu.md +9 -0
  449. package/docs/navigation/link-demo/demo1.md +44 -0
  450. package/docs/navigation/link-demo/demo2.md +41 -0
  451. package/docs/navigation/link-demo/demo3.md +45 -0
  452. package/docs/navigation/link-demo/demo4.md +61 -0
  453. package/docs/navigation/link.md +9 -0
  454. package/docs/navigation/side-nav-demo/demo1.md +34 -18
  455. package/docs/navigation/side-nav.md +9 -1
  456. package/docs/navigation/steps-demo/demo1.md +16 -18
  457. package/docs/navigation/steps-demo/demo2.md +18 -21
  458. package/docs/navigation/steps-demo/demo3.md +12 -10
  459. package/docs/navigation/steps-demo/demo4.md +84 -0
  460. package/docs/navigation/steps-demo/demo5.md +29 -0
  461. package/docs/navigation/steps.md +9 -1
  462. package/docs/navigation/tabs.md +9 -1
  463. package/docs/utilities/auto-sizer-demo/demo1.md +34 -0
  464. package/docs/utilities/auto-sizer.md +9 -0
  465. package/docs/utilities/copy-demo/demo1.md +37 -0
  466. package/docs/utilities/copy-demo/demo2.md +70 -0
  467. package/docs/utilities/copy.md +9 -0
  468. package/docs/utilities/mutation-observer.md +9 -1
  469. package/docs/utilities/outside-click-detector.md +9 -1
  470. package/docs/utilities/overlay-mask.md +9 -1
  471. package/docs/utilities/portal.md +9 -1
  472. package/docs/utilities/resize-observer.md +9 -1
  473. package/docs/utilities/responsive-demo/demo1.md +108 -0
  474. package/docs/utilities/responsive.md +9 -0
  475. package/index.js +4 -2
  476. package/package.json +13 -7
  477. package/CHANGELOG.md +0 -1335
  478. package/addon/components/eui-code-block-impl/code-block-controls/index.hbs +0 -33
  479. package/addon/components/eui-code-block-impl/index.hbs +0 -111
  480. package/addon/components/eui-code-block-impl/index.ts +0 -121
  481. package/addon/components/eui-flyout-body/banner/index.hbs +0 -3
  482. package/addon/components/eui-flyout-body/content/index.hbs +0 -3
  483. package/addon/helpers/create-event.ts +0 -30
  484. package/addon/modifiers/get-cursor-node.ts +0 -54
  485. package/addon/modifiers/invalidate-indeterminate.ts +0 -10
  486. package/addon/modifiers/on-event-simulate-event.ts +0 -32
  487. package/app/components/eui-card/eui-card-select/index.js +0 -1
  488. package/app/components/eui-flyout-body/banner/index.js +0 -1
  489. package/app/components/eui-flyout-body/content/index.js +0 -1
  490. package/app/helpers/create-event.js +0 -1
  491. package/app/modifiers/fixed-header.js +0 -1
  492. package/app/modifiers/focus-tab.js +0 -1
  493. package/app/modifiers/get-cursor-node.js +0 -1
  494. package/app/modifiers/invalidate-indeterminate.js +0 -1
  495. package/app/modifiers/on-event-simulate-event.js +0 -1
  496. package/docs/forms/form-controls/checkbox-demo/demo1.md +0 -40
  497. package/docs/forms/form-controls/checkbox-group.md +0 -1
  498. package/docs/forms/form-controls/checkbox.md +0 -1
  499. package/docs/forms/form-controls/combo-box.md +0 -1
  500. package/docs/forms/form-controls/file-picker-demo/demo1.md +0 -28
  501. package/docs/forms/form-controls/file-picker.md +0 -1
  502. package/docs/forms/form-controls/form-control-layout-delimited.md +0 -1
  503. package/docs/forms/form-controls/form-control-layout.md +0 -1
  504. package/docs/forms/form-controls/number-field.md +0 -1
  505. package/docs/forms/form-controls/password-field.md +0 -1
  506. package/docs/forms/form-controls/radio-demo/demo1.md +0 -39
  507. package/docs/forms/form-controls/radio-group-demo/demo1.md +0 -60
  508. package/docs/forms/form-controls/radio-group.md +0 -1
  509. package/docs/forms/form-controls/radio.md +0 -1
  510. package/docs/forms/form-controls/range-demo/demo1.md +0 -61
  511. package/docs/forms/form-controls/range-demo/demo2.md +0 -59
  512. package/docs/forms/form-controls/range-demo/demo6.md +0 -59
  513. package/docs/forms/form-controls/range.md +0 -1
  514. package/docs/forms/form-controls/search-field-demo/demo1.md +0 -31
  515. package/docs/forms/form-controls/search-field.md +0 -1
  516. package/docs/forms/form-controls/select.md +0 -1
  517. package/docs/forms/form-controls/switch.md +0 -1
  518. package/docs/forms/form-controls/text-field.md +0 -1
  519. package/docs/forms/form-controls/textarea-demo/demo1.md +0 -36
  520. package/docs/forms/form-controls/textarea.md +0 -1
package/addon/components/eui-collapsible-nav/index.ts ADDED
@@ -0,0 +1,161 @@
1
+ import Component from '@glimmer/component';
2
+ import { EuiBreakpointSize } from '../../utils/breakpoint';
3
+ import { tracked } from '@glimmer/tracking';
4
+ import { isWithinMinBreakpoint } from '../../utils/breakpoint';
5
+ import { throttle } from '@ember/runloop';
6
+ import { action } from '@ember/object';
7
+ import { modifier } from 'ember-modifier';
8
+
9
+ export type EuiCollapsibleNavArgs = {
10
+ /**
11
+ * ReactNode to render as this component's content
12
+ */
13
+ children?: Component;
14
+ /**
15
+ * Shows the navigation flyout
16
+ */
17
+ isOpen?: boolean;
18
+ /**
19
+ * Keeps navigation flyout visible and push `<body>` content via padding
20
+ */
21
+ isDocked?: boolean;
22
+ /**
23
+ * Named breakpoint or pixel value for customizing the minimum window width to enable docking
24
+ */
25
+ dockedBreakpoint?: EuiBreakpointSize | number;
26
+ /**
27
+ * Keeps the display of toggle button when in docked state
28
+ */
29
+ showButtonIfDocked?: boolean;
30
+
31
+ as: string;
32
+
33
+ size?: number;
34
+
35
+ side?: 'left' | 'right';
36
+
37
+ role?: null | string;
38
+
39
+ ownFocus?: boolean;
40
+
41
+ outsideClickCloses?: boolean;
42
+
43
+ closeButtonPosition?: 'outside' | 'inside';
44
+
45
+ paddingSize?: string;
46
+ };
47
+
48
+ const triggerHandlersModifier = modifier(
49
+ (
50
+ element: HTMLElement,
51
+ _pos,
52
+ { flyoutID, isOpen }: { flyoutID: string; isOpen: boolean }
53
+ ) => {
54
+ element.setAttribute('aria-controls', flyoutID);
55
+ element.setAttribute('aria-expanded', isOpen ? 'true' : '');
56
+ element.setAttribute('aria-pressed', isOpen ? 'true' : '');
57
+
58
+ const fn = (e: Event) => {
59
+ e.stopImmediatePropagation();
60
+ };
61
+
62
+ element.addEventListener('touchend', fn);
63
+ element.addEventListener('mouseup', fn, true);
64
+ return () => {
65
+ element.removeEventListener('touchend', fn);
66
+ element.removeEventListener('mouseup', fn, true);
67
+ };
68
+ }
69
+ );
70
+
71
+ const onWindowResizeModifier = modifier(
72
+ (
73
+ _ele: HTMLElement,
74
+ _pos,
75
+ {
76
+ isDocked = false,
77
+ functionToCallOnWindowResize
78
+ }: { isDocked: boolean; functionToCallOnWindowResize: () => void }
79
+ ) => {
80
+ if (isDocked) {
81
+ window.addEventListener('resize', functionToCallOnWindowResize);
82
+ }
83
+
84
+ return () => {
85
+ if (isDocked) {
86
+ window.removeEventListener('resize', functionToCallOnWindowResize);
87
+ }
88
+ };
89
+ }
90
+ );
91
+
92
+ export default class EuiCollapsibleNavComponent extends Component<EuiCollapsibleNavArgs> {
93
+ triggerHandlers = triggerHandlersModifier;
94
+ onWindowResize = onWindowResizeModifier;
95
+ @tracked windowIsLargeEnoughToPush = isWithinMinBreakpoint(
96
+ typeof window === 'undefined' ? -Infinity : window.innerWidth,
97
+ this.dockedBreakpoint
98
+ );
99
+
100
+ get isDocked() {
101
+ return this.args.isDocked ?? false;
102
+ }
103
+
104
+ get navIsDocked() {
105
+ return this.isDocked && this.windowIsLargeEnoughToPush;
106
+ }
107
+
108
+ get dockedBreakpoint() {
109
+ return this.args.dockedBreakpoint ?? 'l';
110
+ }
111
+
112
+ get showButtonIfDocked() {
113
+ return this.args.showButtonIfDocked ?? false;
114
+ }
115
+
116
+ get as() {
117
+ return this.args.as ?? 'nav';
118
+ }
119
+
120
+ get size() {
121
+ if (this.args.size && typeof this.args.size !== 'string') {
122
+ return `${this.args.size}px`;
123
+ }
124
+ return this.args.size ?? '320px';
125
+ }
126
+
127
+ get side() {
128
+ return this.args.side ?? 'left';
129
+ }
130
+
131
+ get role() {
132
+ return this.args.role ?? null;
133
+ }
134
+
135
+ get ownFocus() {
136
+ return this.args.ownFocus ?? true;
137
+ }
138
+
139
+ get outsideClickCloses() {
140
+ return this.args.outsideClickCloses ?? true;
141
+ }
142
+
143
+ get closeButtonPosition() {
144
+ return this.args.closeButtonPosition ?? 'outside';
145
+ }
146
+
147
+ get paddingSize() {
148
+ return this.args.paddingSize ?? 'none';
149
+ }
150
+
151
+ @action
152
+ functionToCallOnWindowResize() {
153
+ throttle(() => {
154
+ if (isWithinMinBreakpoint(window.innerWidth, this.dockedBreakpoint)) {
155
+ this.windowIsLargeEnoughToPush = true;
156
+ } else {
157
+ this.windowIsLargeEnoughToPush = false;
158
+ }
159
+ }, 50);
160
+ }
161
+ }
package/addon/components/eui-collapsible-nav-group/index.hbs CHANGED
@@ -1,76 +1,124 @@
1
- {{#let (unique-id) as |groupId|}}
2
- {{#if (and @isCollapsible (has-block "title"))}}
3
- <EuiAccordion
4
- id={{groupId}}
5
- class={{class-names
6
- (if (has-block "title") "euiCollapsibleNavGroup--withHeading")
7
- componentName="EuiCollapsibleNavGroup"
8
- backgroundColor=(arg-or-default @background "none")
9
- }}
10
- @buttonClassName="euiCollapsibleNavGroup__heading"
11
- @initialIsOpen={{arg-or-default @initialIsOpen true}}
12
- @arrowDisplay="right"
13
- ...attributes
14
- >
15
- <:buttonContent>
16
- <EuiFlexGroup @gutterSize="m" @alignItems="center" @responsive={{false}}>
17
- {{#if @iconType}}
18
- <div class="euiFlexItem euiFlexItem--flexGrowZero">
19
- <EuiIcon @type={{@iconType}} @size={{arg-or-default @iconSize "l"}} />
20
- </div>
21
- {{/if}}
22
- <EuiFlexItem>
23
- <EuiTitle
24
- id={{concat groupId "__title"}}
25
- class="euiCollapsibleNavGroup__title"
26
- @tagName={{arg-or-default @titleTagName "h3"}}
27
- @size={{arg-or-default @titleSize "xxs"}}
28
- >
29
- {{yield to="title"}}
30
- </EuiTitle>
31
- </EuiFlexItem>
32
- </EuiFlexGroup>
33
- </:buttonContent>
34
- <:content>
35
- <div class="euiCollapsibleNavGroup__children">
36
- {{yield to="content"}}
37
- </div>
38
- </:content>
39
- </EuiAccordion>
40
- {{else}}
41
- <div
42
- id={{groupId}}
43
- class={{class-names
44
- (if (has-block "title") "euiCollapsibleNavGroup--withHeading")
45
- componentName="EuiCollapsibleNavGroup"
46
- backgroundColor=(arg-or-default @background "none")
47
- }}
48
- ...attributes
49
- >
50
- {{#if (has-block "title")}}
51
- <div class="euiCollapsibleNavGroup__heading">
52
- <EuiFlexGroup @gutterSize="m" @alignItems="center" @responsive={{false}}>
1
+ {{#let
2
+ (arg-or-default @id (unique-id))
3
+ (arg-or-default @titleElement "h3")
4
+ as |groupID titleElement|
5
+ }}
6
+ {{#let (concat groupID "__title") as |titleID|}}
7
+ {{#if (and @isCollapsible (has-block "title"))}}
8
+ <EuiAccordion
9
+ id={{groupID}}
10
+ class={{class-names
11
+ (if (has-block "title") "euiCollapsibleNavGroup--withHeading")
12
+ componentName="EuiCollapsibleNavGroup"
13
+ backgroundColor=(arg-or-default @background "none")
14
+ }}
15
+ @buttonClassName="euiCollapsibleNavGroup__heading"
16
+ @initialIsOpen={{arg-or-default @initialIsOpen true}}
17
+ @arrowDisplay="right"
18
+ ...attributes
19
+ >
20
+ <:buttonContent>
21
+ <EuiFlexGroup
22
+ @gutterSize="m"
23
+ @alignItems="center"
24
+ @responsive={{false}}
25
+ >
53
26
  {{#if @iconType}}
54
- <div class="euiFlexItem euiFlexItem--flexGrowZero">
55
- <EuiIcon @type={{@iconType}} @size={{@iconSize}} />
56
- </div>
27
+ <EuiFlexItem @grow={{false}}>
28
+ <EuiIcon
29
+ @type={{@iconType}}
30
+ @size={{arg-or-default @iconSize "l"}}
31
+ />
32
+ </EuiFlexItem>
57
33
  {{/if}}
58
34
  <EuiFlexItem>
59
- <EuiTitle
60
- id={{concat groupId "__title"}}
61
- class="euiCollapsibleNavGroup__title"
35
+ <EuiTitle
36
+ id={{concat groupID "__title"}}
62
37
  @tagName={{arg-or-default @titleTagName "h3"}}
63
38
  @size={{arg-or-default @titleSize "xxs"}}
64
39
  >
65
- {{yield to="title"}}
40
+ {{#if (not-eq titleElement "h3")}}
41
+ {{#let (element titleElement) as |TitleElement|}}
42
+ <TitleElement
43
+ id={{titleID}}
44
+ class="euiCollapsibleNavGroup__title"
45
+ >
46
+ {{yield to="title"}}
47
+ </TitleElement>
48
+ {{/let}}
49
+ {{else}}
50
+ <h3 id={{titleID}} class="euiCollapsibleNavGroup__title">
51
+ {{yield to="title"}}
52
+ </h3>
53
+ {{/if}}
66
54
  </EuiTitle>
67
55
  </EuiFlexItem>
68
56
  </EuiFlexGroup>
69
- </div>
70
- {{/if}}
71
- <div class="euiCollapsibleNavGroup__children">
72
- {{yield to="content"}}
57
+ </:buttonContent>
58
+ <:content>
59
+ {{#if (has-block "content")}}
60
+ <div class="euiCollapsibleNavGroup__children">
61
+ {{yield to="content"}}
62
+ </div>
63
+ {{/if}}
64
+ </:content>
65
+ </EuiAccordion>
66
+ {{else}}
67
+ <div
68
+ id={{groupID}}
69
+ class={{class-names
70
+ (if (has-block "title") "euiCollapsibleNavGroup--withHeading")
71
+ componentName="EuiCollapsibleNavGroup"
72
+ backgroundColor=(arg-or-default @background "none")
73
+ }}
74
+ ...attributes
75
+ >
76
+ {{#if (has-block "title")}}
77
+ <div class="euiCollapsibleNavGroup__heading">
78
+ <EuiFlexGroup
79
+ @gutterSize="m"
80
+ @alignItems="center"
81
+ @responsive={{false}}
82
+ >
83
+ {{#if @iconType}}
84
+ <EuiFlexItem @grow={{false}}>
85
+ <EuiIcon
86
+ @type={{@iconType}}
87
+ @size={{arg-or-default @iconSize "l"}}
88
+ />
89
+ </EuiFlexItem>
90
+ {{/if}}
91
+ <EuiFlexItem>
92
+ <EuiTitle
93
+ id={{concat groupID "__title"}}
94
+ @tagName={{arg-or-default @titleTagName "h3"}}
95
+ @size={{arg-or-default @titleSize "xxs"}}
96
+ >
97
+ {{#if (not-eq titleElement "h3")}}
98
+ {{#let (element titleElement) as |TitleElement|}}
99
+ <TitleElement
100
+ id={{titleID}}
101
+ class="euiCollapsibleNavGroup__title"
102
+ >
103
+ {{yield to="title"}}
104
+ </TitleElement>
105
+ {{/let}}
106
+ {{else}}
107
+ <h3 id={{titleID}} class="euiCollapsibleNavGroup__title">
108
+ {{yield to="title"}}
109
+ </h3>
110
+ {{/if}}
111
+ </EuiTitle>
112
+ </EuiFlexItem>
113
+ </EuiFlexGroup>
114
+ </div>
115
+ {{/if}}
116
+ {{#if (has-block "content")}}
117
+ <div class="euiCollapsibleNavGroup__children">
118
+ {{yield to="content"}}
119
+ </div>
120
+ {{/if}}
73
121
  </div>
74
- </div>
75
- {{/if}}
76
- {{/let}}
122
+ {{/if}}
123
+ {{/let}}
124
+ {{/let}}
package/addon/components/eui-combo-box/group/index.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <li class="ember-power-select-group" aria-disabled={{if @group.disabled "true"}} role="option" ...attributes>
2
- <span class="ember-power-select-group-name euiComboBoxTitle">{{@group.groupName}}</span>
1
+ <div class="ember-power-select-group" aria-disabled={{if @group.disabled "true"}} ...attributes>
2
+ <div class="ember-power-select-group-name euiComboBoxTitle">{{@group.groupName}}</div>
3
3
  {{yield}}
4
- </li>
4
+ </div>
package/addon/components/eui-combo-box/index.hbs CHANGED
@@ -16,17 +16,19 @@
16
16
  @searchField={{@searchField}}
17
17
  @searchEnabled={{arg-or-default @searchEnabled true}}
18
18
  @tabindex={{@tabindex}}
19
+ @initiallyOpened={{and (not @isDisabled) @autoFocus}}
19
20
  @triggerComponent={{component
20
21
  "eui-combo-box/trigger"
21
22
  fullWidth=@fullWidth
22
23
  compressed=@compressed
23
- disabled=@disabled
24
24
  isInvalid=@isInvalid
25
25
  singleSelection=@singleSelection
26
26
  onClose=@removeTag
27
27
  onCreateOption=(if
28
28
  @onCreateOption this.onCreateOption
29
29
  )
30
+ isLoading=@isLoading
31
+ autoFocus=(and (not @isDisabled) @autoFocus)
30
32
  }}
31
33
  @matcher={{@matcher}}
32
34
  @initiallyOpen={{@initiallyOpen}}
@@ -42,17 +44,18 @@
42
44
  @preventScroll={{@preventScroll}}
43
45
  @renderInPlace={{@renderInPlace}}
44
46
  @verticalPosition={{@verticalPosition}}
45
- @disabled={{@disabled}}
47
+ @disabled={{@isDisabled}}
46
48
  @calculatePosition={{@calculatePosition}}
47
49
  @eventType={{@eventType}}
48
50
  @ariaLabel={{@ariaLabel}}
51
+ @ariaLabelledBy={{@ariaLabelledBy}}
49
52
  @required={{@required}}
50
53
  @triggerRole={{@triggerRole}}
51
54
  @title={{@title}}
52
55
  @triggerId={{@triggerId}}
53
56
  @allowClear={{and
54
57
  (arg-or-default @isClearable true)
55
- (not (or @isDisabled @disabled))
58
+ (not @isDisabled)
56
59
  }}
57
60
  @loadingMessage={{@loadingMessage}}
58
61
  @selectedItemComponent={{@selectedItemComponent}}
@@ -66,7 +69,7 @@
66
69
  "euiComboBox"
67
70
  (if @compressed "euiComboBox--compressed")
68
71
  (if @fullWidth "euiComboBox--fullWidth")
69
- (if (or @isDisabled @disabled) "euiComboBox-isDisabled")
72
+ (if @isDisabled "euiComboBox-isDisabled")
70
73
  (if @isInvalid "euiComboBox--isInvalid")
71
74
  (if this.select.isOpen "euiComboBox-isOpen")
72
75
  }}
@@ -80,7 +83,7 @@
80
83
  )
81
84
  (component "eui-combo-box/no-matches-message")
82
85
  }}
83
- @dropdownClass="euiComboBoxOptionsList euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--plain euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isAttached euiPopover__panel-isOpen euiPopover__panel-noArrow {{@dropdownClass}}"
86
+ @dropdownClass="euiComboBoxOptionsList euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--plain euiPopover__panel-isAttached euiPopover__panel euiPopover__panel-noArrow euiPopover__panel--bottom euiPopover__panel-isOpen euiComboBoxOptionsList__rowWrap {{@dropdownClass}}"
84
87
  as |option i|
85
88
  >
86
89
  {{yield option i}}
package/addon/components/eui-combo-box/index.ts CHANGED
@@ -1,13 +1,19 @@
1
1
  import Component from '@glimmer/component';
2
2
  import { action } from '@ember/object';
3
- // @ts-ignore
4
- import { indexOfOption } from 'ember-power-select/utils/group-utils';
5
- import { tracked } from '@glimmer/tracking';
3
+ import { tracked, cached } from '@glimmer/tracking';
4
+ //@ts-ignore
5
+ import { emberPowerSelectIsGroup } from 'ember-power-select/helpers/ember-power-select-is-group';
6
6
  import { isEqual } from '@ember/utils';
7
7
 
8
+ interface PromiseProxy<T> extends Promise<T> {
9
+ content: any;
10
+ }
11
+
8
12
  interface EuiComboBoxArgs {
9
13
  singleSelection: boolean;
10
14
  onCreateOption?: (search: string) => boolean | undefined;
15
+ options: any[];
16
+ search?: (term: string, select: Select) => any[] | PromiseProxy<any[]>;
11
17
  }
12
18
 
13
19
  interface Select {
@@ -17,8 +23,84 @@ interface Select {
17
23
  };
18
24
  }
19
25
 
26
+ interface Arrayable<T> {
27
+ toArray(): T[];
28
+ }
29
+ const isArrayable = <T>(coll: any): coll is Arrayable<T> => {
30
+ return typeof coll.toArray === 'function';
31
+ };
32
+
33
+ const toPlainArray = <T>(collection: T[] | Arrayable<T>): T[] => {
34
+ if (isArrayable<T>(collection)) {
35
+ return collection.toArray();
36
+ } else {
37
+ return collection;
38
+ }
39
+ };
40
+
20
41
  export default class EuiComboBoxComponent extends Component<EuiComboBoxArgs> {
21
42
  @tracked select: any = null;
43
+ @tracked private _resolvedOptions?: any[];
44
+ @tracked searchText = '';
45
+ @tracked private _searchResult?: any[];
46
+ private _filterResultsCache: {
47
+ results: any[];
48
+ options: any[];
49
+ searchText: string;
50
+ } = { results: [], options: [], searchText: this.searchText };
51
+
52
+ //This is to allow scrolling between virtualized groups
53
+ @cached
54
+ get opts() {
55
+ //@ts-ignore
56
+ return this.results.reduce((acc, curr) => {
57
+ if (emberPowerSelectIsGroup([curr])) {
58
+ acc.push(curr, ...curr.options);
59
+ } else {
60
+ acc.push(curr);
61
+ }
62
+ return acc;
63
+ }, []);
64
+ }
65
+
66
+ @cached
67
+ get options(): any[] {
68
+ if (this._resolvedOptions) return toPlainArray(this._resolvedOptions);
69
+ if (this.args.options) {
70
+ return toPlainArray(this.args.options as any[]);
71
+ } else {
72
+ return [];
73
+ }
74
+ }
75
+
76
+ @cached
77
+ get results(): any[] {
78
+ if (this.searchText.length > 0) {
79
+ if (this.args.search) {
80
+ return toPlainArray(this._searchResult || this.options);
81
+ } else {
82
+ if (
83
+ this._filterResultsCache.options === this.options &&
84
+ this._filterResultsCache.searchText === this.searchText
85
+ ) {
86
+ // This is an optimization to avoid filtering several times, which may be a bit expensive
87
+ // if there are many options, if neither the options nor the searchtext have changed
88
+ return this._filterResultsCache.results;
89
+ }
90
+ //@ts-ignore
91
+ let results = this._filter(this.options, this.searchText);
92
+ //eslint-disable-next-line
93
+ this._filterResultsCache = {
94
+ results,
95
+ options: this.options,
96
+ searchText: this.searchText
97
+ };
98
+ return results;
99
+ }
100
+ } else {
101
+ return this.options;
102
+ }
103
+ }
22
104
 
23
105
  @action
24
106
  scrollTo(option: any, select: { results: []; uniqueId: string }): void {
@@ -28,10 +110,13 @@ export default class EuiComboBoxComponent extends Component<EuiComboBoxArgs> {
28
110
  if (!optionsList) {
29
111
  return;
30
112
  }
31
- let index = indexOfOption(select.results, option);
113
+
114
+ let index = this.opts.indexOf(option);
115
+
32
116
  if (index === -1) {
33
117
  return;
34
118
  }
119
+
35
120
  let optionElement = optionsList.querySelector(
36
121
  `[data-option-index="${index}"]`
37
122
  ) as HTMLElement;
package/addon/components/eui-combo-box/options/index.hbs CHANGED
@@ -22,15 +22,27 @@
22
22
  role="listbox"
23
23
  aria-controls="ember-power-select-trigger-{{@select.uniqueId}}"
24
24
  ...attributes
25
+ {{did-update this.setFlattedOptions @options}}
25
26
  {{did-insert this.addHandlers}}
26
27
  {{will-destroy this.removeHandlers}}
27
28
  as |opt index|
28
29
  >
29
30
  {{! template-lint-enable }}
30
31
  {{#if (ember-power-select-is-group opt)}}
31
- <Group @group={{opt}} @select={{@select}} @extra={{@extra}} />
32
+ <Group
33
+ @group={{opt}}
34
+ @select={{@select}}
35
+ @extra={{@extra}}
36
+ style={{html-safe
37
+ (concat "height:" (arg-or-default @rowHeight 29) "px;")
38
+ }}
39
+ data-option-index="{{index}}"
40
+ />
32
41
  {{else}}
33
42
  <li
43
+ style={{html-safe
44
+ (concat "height:" (arg-or-default @rowHeight 29) "px;")
45
+ }}
34
46
  class="euiFilterSelectItem
35
47
  {{if
36
48
  (eq opt @select.highlighted)
@@ -52,7 +64,7 @@
52
64
  </span>
53
65
  {{#if (and (eq opt @select.highlighted) (not opt.disabled))}}
54
66
  <EuiBadge
55
- class="euiComboBoxOptions__enterBadge"
67
+ class="euiComboBoxOption__enterBadge"
56
68
  @color="hollow"
57
69
  @iconType="returnKey"
58
70
  aria-hidden="true"
package/addon/components/eui-combo-box/options/index.js CHANGED
@@ -1,16 +1,29 @@
1
1
  import EmberPowerSelectOptions from 'ember-power-select/components/power-select/options';
2
2
  import { emberPowerSelectIsGroup } from 'ember-power-select/helpers/ember-power-select-is-group';
3
- import { cached } from '@glimmer/tracking';
3
+ import { tracked } from '@glimmer/tracking';
4
4
 
5
5
  export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
6
- @cached
7
- get flattedOptions() {
8
- return this.args.options.reduce((acc, curr) => {
9
- return [
10
- ...acc,
11
- ...(emberPowerSelectIsGroup([curr]) ? [curr, ...curr.options] : [curr])
12
- ];
13
- }, []);
6
+ @tracked flattedOptions = [];
7
+ _optionsCache = [];
8
+
9
+ setFlattedOptions = () => {
10
+ if (this._optionsCache !== this.args.options) {
11
+ this.flattedOptions = this.args.options?.reduce((acc, curr) => {
12
+ if (emberPowerSelectIsGroup([curr])) {
13
+ acc.push(curr, ...curr.options);
14
+ } else {
15
+ acc.push(curr);
16
+ }
17
+ return acc;
18
+ }, []);
19
+ this._optionsCache = this.args.options;
20
+ }
21
+ };
22
+
23
+ constructor() {
24
+ super(...arguments);
25
+ this.setFlattedOptions();
26
+ this._optionsCache = this.args.options;
14
27
  }
15
28
 
16
29
  _optionFromIndex(index) {
package/addon/components/eui-combo-box/trigger/index.hbs CHANGED
@@ -8,6 +8,7 @@
8
8
  (and @select.selected @allowClear)
9
9
  (fn @select.actions.select (array))
10
10
  }}
11
+ @isLoading={{@isLoading}}
11
12
  @disabled={{@select.disabled}}
12
13
  >
13
14
  <:field>
@@ -89,6 +90,7 @@
89
90
  autocomplete="off"
90
91
  autocorrect="off"
91
92
  autocapitalize="off"
93
+ autofocus={{@autoFocus}}
92
94
  spellcheck={{false}}
93
95
  id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
94
96
  value={{@select.searchText}}
@@ -115,4 +117,4 @@
115
117
  {{/if}}
116
118
  </ul>
117
119
  </:field>
118
- </EuiFormControlLayout>
120
+ </EuiFormControlLayout>
package/addon/components/eui-confirm-modal/index.hbs CHANGED
@@ -25,7 +25,7 @@
25
25
  @fill={{true}}
26
26
  @color={{@buttonColor}}
27
27
  @isDisabled={{@confirmButtonDisabled}}
28
- @isLoading={{@confirmButtonIsLoading}}
28
+ @isLoading={{@isLoading}}
29
29
  {{on "click" @onConfirm}}
30
30
  >
31
31
  {{@confirmButtonText}}
package/addon/components/eui-copy/index.hbs CHANGED
@@ -1,8 +1,5 @@
1
- <EuiToolTip @onMouseOut={{this.resetTooltipText}} ...attributes>
1
+ <EuiToolTip @content={{this.tooltipText}} @onMouseOut={{this.resetTooltipText}} ...attributes>
2
2
  <:anchor>
3
3
  {{yield this.copy}}
4
4
  </:anchor>
5
- <:content>
6
- {{this.tooltipText}}
7
- </:content>
8
5
  </EuiToolTip>
package/addon/components/eui-described-form-group/index.hbs CHANGED
@@ -7,7 +7,7 @@
7
7
  ...attributes
8
8
  >
9
9
  <EuiFlexGroup @gutterSize={{arg-or-default @gutterSize "l"}}>
10
- <EuiFlexItem>
10
+ <EuiFlexItem @grow={{@descriptionFlexItemProps.grow}}>
11
11
  <EuiTitle class="euiDescribedFormGroup__title" @size={{@titleSize}}>
12
12
  {{yield to="title"}}
13
13
  </EuiTitle>
@@ -25,8 +25,9 @@
25
25
  componentName="EuiDescribedFormGroup"
26
26
  paddingSize=(arg-or-default @titleSize "xs")
27
27
  }}
28
+ @grow={{@fieldFlexItemProps.grow}}
28
29
  >
29
30
  {{yield}}
30
31
  </EuiFlexItem>
31
32
  </EuiFlexGroup>
32
- </div>
33
+ </div>