@ember-eui/core 2.0.0 → 3.1.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 ### Master
 
+### 3.1.0
+🚀 Enhancements
+`@ember-eui/*`
+- Embroider ready, in order to use staticComponents you need to have `@embroider` > 1.2.0
+
+🐛 Bug / Fixes
+`@ember-eui/core`
+- `<EuiMarkdownFormat />` and `<EuiMarkdownEditor />` styling bugs and double render issues fixed
+
+### 3.0.2
+`@ember-eui/core`
+🐛 Bug / Fixes
+- Fix `<EuiMarkdownEditor />` icons compatibility with ember-source < 3.27
+
+### 3.0.1
+`@ember-eui/core`
+🚀 Enhancements
+- No longer need to add icons from public icons in ember-eui/core
+
+### 3.0.0
+💥 Breaking change
+`@ember-eui/*`
+- Drops support for ember-source < v3.20.0
+- Drops support for node 10
+- Drops support for importing sass, elastic eui is migrating to emotion, so its better we just focus on that instead of sass, so we no longer dynamically import template only components for now, this could possibly be achieved later post embroider
+
+🏠 Internal
+`@ember-eui/*`
+- `ember-cli-update --to=3.28.0` on all packages
+- Update ember-cli-typescript
+- Remove some deprecations like new imports paths and helpers usage and `#with` helper
+
+### 2.0.0
+💥 Breaking change
+`@ember-eui/core`
+- Deprecate `ember-svg-jar` `hbs` strategy for now, just use stock `ember-svg-jar`
+
 ### 1.6.3
 🐛 Bug / Fixes
 `@ember-eui/core`

package/README.md

@@ -1,7 +1,6 @@
 # ember-eui
 
 This project aims to provide ember components implementing the css layer of https://elastic.github.io/eui
-
 ### Icons
 
 For icons to work you will need to:
@@ -16,7 +15,6 @@ var app = new EmberApp(defaults, {
     svgJar: {
       sourceDirs: [
         'public/assets',
-        '../node_modules/@ember-eui/core/public',
         'node_modules/@elastic/eui/lib/components/icon',
       ],
     },
@@ -27,11 +25,13 @@ var app = new EmberApp(defaults, {
 
 ## Compatibility
 
-- Ember.js v3.12 or above
-- Ember CLI v2.13 or above
-- Node.js v10 or above
+* Ember.js v3.20 or above
+* Ember CLI v3.20 or above
+* Node.js v12 or above
+
 
-## Installation
+Installation
+------------------------------------------------------------------------------
 
 ```
 ember install @ember-eui/core

package/addon/components/eui-badge/index.hbs

@@ -67,7 +67,7 @@
     }}
   >
     <span class="euiBadge__content">
-      {{#if hasBlock}}
+      {{#if (has-block)}}
         {{#if @onClick}}
           <button
             class="euiBadge__childButton"
@@ -101,14 +101,14 @@
             class={{class-names "euiBadge__icon" @closeButtonProps.iconClasses}}
             @type={{@iconType}}
             data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}
-            @size={{if hasBlock "s" "m"}}
+            @size={{if (has-block) "s" "m"}}
           />
         </button>
         {{! tempalte-lint-enable}}
       {{else}}
         <EuiIcon
           @type={{@iconType}}
-          @size={{if hasBlock "s" "m"}}
+          @size={{if (has-block) "s" "m"}}
           class="euiBadge__icon"
         />
       {{/if}}

package/addon/components/eui-button/index.hbs

@@ -21,6 +21,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButton__text" @textClasses}}
     >
       {{yield}}
@@ -48,6 +49,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButton__text" @textClasses}}
     >
       {{yield}}

package/addon/components/eui-button-content/index.hbs

@@ -13,6 +13,7 @@
       @type={{@iconType}}
       @size="m"
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
     />
   {{/if}}
   <span class={{@textClasses}}>

package/addon/components/eui-button-empty/index.hbs

@@ -18,6 +18,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
     >
       {{yield}}
@@ -44,6 +45,7 @@
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
+      @useComponent={{@useComponent}}
       @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
     >
       {{yield}}

package/addon/components/eui-button-icon/index.hbs

@@ -11,6 +11,7 @@
         @type={{@iconType}}
         @size={{arg-or-default @iconSize "m"}}
         @useSvg={{@useSvg}}
+        @useComponent={{@useComponent}}
         aria-hidden="true"
       />
     {{/if}}
@@ -29,6 +30,7 @@
         @type={{@iconType}}
         @size={{@iconSize}}
         @useSvg={{@useSvg}}
+        @useComponent={{@useComponent}}
         aria-hidden="true"
       />
     {{/if}}

package/addon/components/eui-card/eui-card-select/index.hbs

@@ -17,7 +17,7 @@
   aria-checked={{@isSelected}}
   ...attributes
 >
-  {{#if hasBlock}}
+  {{#if (has-block)}}
     {{yield}}
   {{else if @isSelected}}
     Selected

package/addon/components/eui-card/index.hbs

@@ -9,7 +9,7 @@
       (if (eq @layout "horizontal") "euiCard--horizontal")
       (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
       (if @isDisabled "euiCard-isDisabled")
-      (if hasBlock "euiCard--hasChildren")
+      (if (has-block) "euiCard--hasChildren")
       (if @icon "euiCard--hasIcon" (if has-block "icon" "euiCard--hasIcon"))
       (if @betaBadgeLabel "euiCard--hasBetaBadge")
       (if

package/addon/components/eui-combo-box/create-option/index.ts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { isHTMLSafe, htmlSafe } from '@ember/string';
+import { isHTMLSafe, htmlSafe } from '@ember/template';
 import { get } from '@ember/object';
 
 type EuiComboBoxCreateOptionArgs = {

package/addon/components/eui-combo-box/index.hbs

@@ -54,11 +54,7 @@
   @allowClear={{@isClearable}}
   @loadingMessage={{@loadingMessage}}
   @selectedItemComponent={{@selectedItemComponent}}
-  @beforeOptionsComponent={{if
-    @beforeOptionsComponent
-    @beforeOptionsComponent
-    null
-  }}
+  @beforeOptionsComponent={{@beforeOptionsComponent}}
   @placeholder={{@placeholder}}
   @searchPlaceholder={{@searchPlaceholder}}
   @optionsComponent={{component "eui-combo-box/options" rowHeight=@rowHeight}}

package/addon/components/eui-combo-box/options/index.hbs

@@ -1,4 +1,4 @@
-{{#let (component @groupComponent) as |Group|}}
+{{#let (component (ensure-safe-component @groupComponent)) as |Group|}}
   {{#if @select.loading}}
     <EuiText @size="xs" class="euiComboBoxOptionsList__empty">
       <EuiFlexGroup @gutterSize="s" @justifyContent="center">
@@ -23,7 +23,8 @@
       aria-controls="ember-power-select-trigger-{{@select.uniqueId}}"
       ...attributes
       {{did-insert this.addHandlers}}
-      {{will-destroy this.removeHandlers}} as |opt index|
+      {{will-destroy this.removeHandlers}}
+      as |opt index|
     >
       {{! template-lint-enable }}
       {{#if (ember-power-select-is-group opt)}}
@@ -31,10 +32,14 @@
       {{else}}
         <li
           class="euiFilterSelectItem
-            {{if (eq opt @select.highlighted) " euiFilterSelectItem-isFocused"
-            }}"
-          aria-selected="{{ember-power-select-is-selected opt @select.selected
+            {{if
+              (eq opt @select.highlighted)
+              ' euiFilterSelectItem-isFocused'
             }}"
+          aria-selected="{{ember-power-select-is-selected
+            opt
+            @select.selected
+          }}"
           aria-disabled={{if opt.disabled "true"}}
           aria-current="{{eq opt @select.highlighted}}"
           data-option-index="{{index}}"

package/addon/components/eui-combo-box/trigger/index.hbs

@@ -38,7 +38,7 @@
           {{#each @select.selected as |opt idx|}}
             {{#if @selectedItemComponent}}
               {{component
-                @selectedItemComponent
+                (ensure-safe-component @selectedItemComponent)
                 extra=@extra
                 option=opt
                 select=@select
@@ -48,7 +48,7 @@
                 class="ember-power-select-multiple-option
                   {{if
                     opt.disabled
-                    "ember-power-select-multiple-option--disabled"
+                    'ember-power-select-multiple-option--disabled'
                   }}"
                 @option={{opt}}
                 @onClose={{if

package/addon/components/eui-icon/index.hbs

@@ -1,6 +1,23 @@
-{{#if this.icon.inner}}
+{{#if @useComponent}}
   {{! has the shape of a curried component }}
-  {{component this.icon}}
+  {{#let (component (ensure-safe-component this.icon)) as |IconComponent|}}
+    {{!template-lint-disable}}
+    <IconComponent
+      class={{class-names
+        this.optionalColorClass
+        (if this.isAppIcon "euiIcon--app")
+        componentName="EuiIcon"
+        size=this.size
+      }}
+      role="image"
+      aria-hidden={{if this.isAriaHidden "true"}}
+      aria-label={{if @aria-label @aria-label this.titleId}}
+      aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
+      tabindex={{this.tabIndex}}
+      style={{this.optionalCustomStyles}}
+      ...attributes
+    />
+  {{/let}}
 {{else}}
   {{#if this.useImage}}
     <img

package/addon/components/eui-icon/index.ts

@@ -29,8 +29,6 @@ type IconColor = string | NamedColor;
 
 export type IconSize = keyof typeof sizeToClassNameMap;
 
-// const SVG_PREI : string | undefined = config['ember-eui'].svgPath || 'svg/assets';
-
 export type EuiIconArgs = CommonArgs & {
   /**
    * `Enum` is any of the named icons listed in the docs, `string` is usually a URL to an SVG file, and `elementType` is any Ember Icon SVG component
@@ -90,6 +88,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   get useSvg(): boolean {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     return (
       this.args.useSvg ??

package/addon/components/eui-image/index.ts

@@ -1,6 +1,6 @@
 import GlimmerComponent from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { action } from '@ember/object';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { sizeMapping } from '../../utils/css-mappings/eui-image';

package/addon/components/eui-list-group-item/index.hbs

@@ -62,6 +62,6 @@
     </span>
   {{/if}}
   {{#if @extraAction}}
-    {{component @extraAction}}
+    {{component (ensure-safe-component @extraAction)}}
   {{/if}}
 </li>

package/addon/components/eui-markdown-editor/index.ts

@@ -20,6 +20,7 @@ import {
   EuiMarkdownAstNode
 } from '../../utils/markdown/markdown-types';
 import { Processor } from 'unified';
+import { scheduleOnce } from '@ember/runloop';
 
 export interface EuiMarkdownEditorArgs {
   initialViewMode?: string;
@@ -119,7 +120,11 @@ export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEdi
       const resizedTextareaHeight =
         this.textareaRef.offsetHeight + this.editorFooterHeight;
 
-      this.currentHeight = resizedTextareaHeight;
+      const update = () => {
+        this.currentHeight = resizedTextareaHeight;
+      };
+
+      scheduleOnce('afterRender', this, update);
     }
   }
 
@@ -144,7 +149,13 @@ export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEdi
         // then add an extra pixel for safety and because the scrollHeight value is rounded
         const extraHeight = borderWidth + marginWidth + 1;
 
-        this.currentHeight = previewRef.scrollHeight + extraHeight;
+        const update = () => {
+          if (previewRef) {
+            this.currentHeight = previewRef.scrollHeight + extraHeight;
+          }
+        };
+
+        scheduleOnce('afterRender', this, update);
       }
     }
   }
@@ -188,6 +199,7 @@ export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEdi
     };
 
     function identityCompiler(this: Processor) {
+      //eslint-disable-next-line
       this.Compiler = Compiler;
     }
     return unified().use(this.parsingPluginList).use(identityCompiler);

package/addon/components/eui-markdown-editor-footer/icons/markdown-logo/index.d.ts

@@ -0,0 +1,4 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownEditorToolbarIconsMarkdownLogo =
+  typeof templateOnlyComponent;

package/addon/components/eui-markdown-editor-footer/icons/markdown-logo/index.hbs

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="26"
+  height="16"
+  fill="none"
+  viewBox="0 0 26 16"
+  aria-labelledby={{@titleId}}
+  ...attributes
+>
+  {{#if @title}}
+    <title id={{@titleId}}>{{@title}}</title>
+  {{/if}}
+  <path
+    d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z"
+  ></path>
+</svg>

package/addon/components/eui-markdown-editor-footer/index.hbs

@@ -5,6 +5,7 @@
       {{! pending implementation}}
       <EuiButtonIcon
         @iconType={{component "eui-loading-spinner"}}
+        @useComponent={{true}}
         {{! aria-label={ariaLabels.uploadingFiles} }}
       />
     {{/if}}
@@ -29,7 +30,8 @@
   </div>
   <EuiButtonIcon
     class="euiMarkdownEditorFooter__help"
-    @iconType={{this.markdownLogo}}
+    @iconType={{component "eui-markdown-editor-footer/icons/markdown-logo"}}
+    @useComponent={{true}}
     @color="text"
     @useSvg={{true}}
     {{! aria-label={ariaLabels.showMarkdownHelp} }}

package/addon/components/eui-markdown-editor-footer/index.ts

@@ -1,20 +1,9 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { getOwner } from '@ember/application';
 
 export interface EuiMarkdownEditorFooterArgs {}
 
 export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkdownEditorFooterArgs> {
   @tracked isPopoverOpen = false;
   @tracked isShowingHelp = false;
-
-  get svgPath() {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
-    return svgPath;
-  }
-
-  get markdownLogo() {
-    return `${this.svgPath}markdown-logo`;
-  }
 }

package/addon/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.d.ts

@@ -0,0 +1,4 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownEditorToolbarIconsMarkdownCheckmark =
+  typeof templateOnlyComponent;

package/addon/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.hbs

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="none"
+  viewBox="0 0 16 16"
+  aria-labelledby={{@titleId}}
+  ...attributes
+>
+  {{#if @title}}
+    <title id={{@titleId}}>{{@title}}</title>
+  {{/if}}
+  <path
+    d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z"
+  ></path>
+</svg>

package/addon/components/eui-markdown-editor-toolbar/index.hbs

@@ -18,7 +18,12 @@
         <EuiButtonIcon
           @color="text"
           {{on "click" (fn this.handleMdButtonClick item.id)}}
-          @iconType={{item.iconType}}
+          @iconType={{if
+            item.iconType.component
+            (component (ensure-safe-component item.iconType.component))
+            item.iconType
+          }}
+          @useComponent={{item.iconType.component}}
           aria-label={{item.label}}
           @useSvg={{item.useSvg}}
           @isDisabled={{this.isPreviewing}}

package/addon/components/eui-markdown-editor-toolbar/index.ts

@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import type MarkdownActions from '../../utils/markdown/markdown-actions';
 import { MODE_VIEWING } from '../../utils/markdown/markdown-modes';
 import { cached } from '@glimmer/tracking';
-import { getOwner } from '@ember/application';
+
 import { Plugin } from 'unified';
 
 export interface EuiMarkdownEditorToolbarArgs {
@@ -29,12 +29,6 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     }
   ];
 
-  get svgPath() {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
-    return svgPath;
-  }
-
   @cached
   get listButtons() {
     return [
@@ -55,7 +49,10 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
         label: 'Task list',
         name: 'tl',
         useSvg: true,
-        iconType: `${this.svgPath}markdown-checkmark`
+        iconType: {
+          // this should't be needed when we drop support for 3.24.0
+          component: 'eui-markdown-editor-toolbar/icons/markdown-checkmark'
+        }
       }
     ];
   }

package/addon/components/eui-markdown-format/index.hbs

@@ -1,9 +1,19 @@
 {{! This hbs was inspired by https://github.com/ampatspell/ember-cli-remark-static/blob/v3.0.5/addon/components/remark.hbs }}
-<div class="euiMarkdownFormat">
+<EuiText
+  class="euiMarkdownFormat"
+  @color={{@color}}
+  @grow={{@grow}}
+  @size={{@textSize}}
+  @textAlign={{@textAlign}}
+  ...attributes
+>
   {{this.result.element}}
   {{#each this.result.components as |CompNode|}}
     {{#in-element CompNode.element}}
-      {{#let (component CompNode.componentName) as |DynamicComponent|}}
+      {{#let
+        (component (ensure-safe-component CompNode.componentName))
+        as |DynamicComponent|
+      }}
         <DynamicComponent
           @replaceNode={{optional @replaceNode}}
           @node={{CompNode}}
@@ -11,4 +21,4 @@
       {{/let}}
     {{/in-element}}
   {{/each}}
-</div>
+</EuiText>

package/addon/components/eui-tabbed-content/index.hbs

@@ -1,17 +1,21 @@
 {{#let
   (unique-id)
   (optional @onTabClick)
-  (arg-or-default @autoFocus "initial")
+  (arg-or-default @autoFocus 'initial')
   (use-state
-    (get-tab-id (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs)))
-  ) as |id onTabClick autoFocus selectedTab|
+    (get-tab-id
+      (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs))
+    )
+  )
+  as |id onTabClick autoFocus selectedTab|
 }}
   <div class={{@className}} ...attributes>
     <EuiTabs
       @selectedTab={{selectedTab.value}}
       @expand={{@expand}}
       @display={{@display}}
-      @size={{@size}} as |EuiTab|
+      @size={{@size}}
+      as |EuiTab|
     >
       {{#each @tabs as |tab|}}
         <EuiTab
@@ -26,14 +30,16 @@
         </EuiTab>
       {{/each}}
     </EuiTabs>
-    {{#with (find-by "id" selectedTab.value @tabs) as |currentTab|}}
-      <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
-        {{#if (has-block "selectedTabContent")}}
-          {{yield currentTab to="selectedTabContent"}}
-        {{else}}
-          {{currentTab.content}}
-        {{/if}}
-      </div>
-    {{/with}}
+    {{#let (find-by "id" selectedTab.value @tabs) as |currentTab|}}
+      {{#if currentTab}}
+        <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
+          {{#if (has-block "selectedTabContent")}}
+            {{yield currentTab to="selectedTabContent"}}
+          {{else}}
+            {{currentTab.content}}
+          {{/if}}
+        </div>
+      {{/if}}
+    {{/let}}
   </div>
 {{/let}}

package/addon/helpers/class-names.ts

@@ -66,4 +66,6 @@ export function classNames(
   return str;
 }
 
-export default helper(classNames);
+export default helper<string[], Options & { addBase: boolean }, string>(
+  classNames
+);

package/app/components/eui-markdown-editor-footer/icons/markdown-logo/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-footer/icons/markdown-logo';

package/app/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-toolbar/icons/markdown-checkmark';

package/config/environment.js

@@ -1,5 +1,5 @@
 'use strict';
 
-module.exports = function(/* environment, appConfig */) {
-  return { };
+module.exports = function (/* environment, appConfig */) {
+  return {};
 };

package/docs/display/icons-demo/demo1.md

@@ -1,16 +1,6 @@
 # Demo
 
 ```hbs template
-<EuiText style='cursor: pointer;' {{on 'mousemove' this.update}}>
-  You can hover on the icon below, open the network tab, all svgs are loaded on
-  demand!
-  <EuiIcon @type={{this.icon}} />
-  <EuiIcon @type={{this.icon}} @size='m' />
-  <EuiIcon @type={{this.icon}} @size='l' />
-  <EuiIcon @type={{this.icon}} @size='xl' />
-  <EuiIcon @type={{this.icon}} @size='xxl' />
-</EuiText>
-<br />
 <EuiIcon @type='logoGolang' />
 <EuiIcon @type='logoGolang' @size='m' />
 <EuiIcon @type='logoGolang' @size='l' />

package/index.js

@@ -1,10 +1,4 @@
 'use strict';
-const path = require('path');
-const resolve = require('resolve');
-const BroccoliMergeTrees = require('broccoli-merge-trees');
-const writeFile = require('broccoli-file-creator');
-const Funnel = require('broccoli-funnel');
-const EuiScssFilter = require('./lib/elastic-eui-scss-filter');
 
 module.exports = {
   name: require('./package').name,
@@ -53,14 +47,12 @@ module.exports = {
       ? this.emberEuiOptions.theme
       : 'light';
 
-    if (this.emberEuiOptions.useCompiledCss !== false) {
-      if (this.emberEuiOptions.theme) {
-        app.import(
-          `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
-        );
-      } else {
-        app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
-      }
+    if (this.emberEuiOptions.theme) {
+      app.import(
+        `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
+      );
+    } else {
+      app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
     }
 
     this._super.included.apply(this, arguments);
@@ -71,47 +63,5 @@ module.exports = {
       (a) => a.name === 'ember-power-select'
     );
     return emberPowerSelect.contentFor(type, config);
-  },
-
-  // TODO: Currently the performance of recompiling sass on every change are serious, find a way to improve them.
-  treeForStyles(tree) {
-    let trees = [];
-    let euiScssFiles;
-
-    if (this.emberEuiOptions.useCompiledCss === false) {
-      euiScssFiles = new Funnel(this.pathBase('@elastic/eui'), {
-        srcDir: '/src',
-        include: ['**/*.scss'],
-        destDir: 'elastic-eui',
-        annotation: 'ElasticEUIScssFunnel'
-      });
-
-      euiScssFiles = new EuiScssFilter(euiScssFiles);
-
-      trees.push(euiScssFiles);
-    }
-
-    let selectedTheme = this.emberEuiOptions.theme;
-
-    let importer = writeFile(
-      'ember-eui-components.scss',
-      euiScssFiles ? `@import './elastic-eui/theme_${selectedTheme}.scss';` : ''
-    );
-
-    trees.push(importer);
-
-    trees.push(tree);
-
-    let output = new BroccoliMergeTrees(trees, {
-      overwrite: true
-    });
-
-    return this._super.treeForStyles(output);
-  },
-
-  pathBase(packageName) {
-    return path.dirname(
-      resolve.sync(`${packageName}/package.json`, { basedir: __dirname })
-    );
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -26,11 +26,14 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint:* test:*",
+    "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "prepack": "ember ts:precompile",
@@ -49,34 +52,30 @@
   },
   "dependencies": {
     "@elastic/eui": "31.0.0",
-    "@ember/render-modifiers": "^1.0.2",
-    "@html-next/vertical-collection": "^2.0.0",
+    "@ember/render-modifiers": "^2.0.4",
+    "@html-next/vertical-collection": "^2.1.0",
     "@types/lodash-es": "^4.17.4",
-    "broccoli-file-creator": "^2.1.1",
-    "broccoli-filter": "^1.3.0",
-    "broccoli-funnel": "^2.0.1",
-    "broccoli-merge-trees": "^4.2.0",
     "chroma-js": "^2.1.0",
-    "ember-auto-import": "^1.6.0",
+    "ember-auto-import": "^1.11.3",
     "ember-cached-decorator-polyfill": "^0.1.1",
-    "ember-cli-babel": "^7.21.0",
-    "ember-cli-htmlbars": "^5.3.2",
-    "ember-cli-typescript": "^4.1.0",
+    "ember-cli-babel": "^7.26.6",
+    "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
-    "ember-element-helper": "^0.5.0",
-    "ember-focus-trap": "^0.4.0",
+    "ember-element-helper": "^0.5.5",
+    "ember-focus-trap": "^0.7.0",
     "ember-href-to": "^4.1.0",
     "ember-in-element-polyfill": "^1.0.0",
     "ember-keyboard": "^6.0.2",
     "ember-math-helpers": "^2.15.0",
-    "ember-modifier": "^2.1.1",
+    "ember-modifier": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.3",
     "ember-power-select": "^5.0.2",
     "ember-set-body-class": "^1.0.2",
-    "ember-set-helper": "^2.0.0",
+    "ember-set-helper": "^2.0.1",
     "ember-style-modifier": "^0.6.0",
     "ember-svg-jar": "^2.3.4",
-    "ember-truth-helpers": "^2.1.0",
+    "ember-truth-helpers": "^3.0.0",
     "highlight.js": "^9.18.5",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
@@ -93,57 +92,77 @@
     "vfile": "^4.2.0"
   },
   "devDependencies": {
-    "@ember/optional-features": "^1.3.0",
-    "@glimmer/component": "^1.0.1",
-    "@glimmer/tracking": "^1.0.0",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^1.0.0",
+    "@embroider/util": "^1.2.0",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "@types/ember": "^3.16.0",
-    "@types/ember-qunit": "^3.4.9",
-    "@types/ember-resolver": "^5.0.9",
-    "@types/ember__test-helpers": "^1.7.2",
-    "@types/qunit": "^2.9.1",
+    "@types/ember-qunit": "^5.0.0",
+    "@types/ember-resolver": "^5.0.11",
+    "@types/ember__application": "^4.0.0",
+    "@types/ember__array": "^4.0.1",
+    "@types/ember__component": "^4.0.4",
+    "@types/ember__controller": "^4.0.0",
+    "@types/ember__debug": "^4.0.0",
+    "@types/ember__engine": "^4.0.0",
+    "@types/ember__error": "^4.0.0",
+    "@types/ember__object": "^4.0.0",
+    "@types/ember__polyfills": "^4.0.0",
+    "@types/ember__routing": "^4.0.3",
+    "@types/ember__runloop": "^4.0.0",
+    "@types/ember__service": "^4.0.0",
+    "@types/ember__string": "^3.0.9",
+    "@types/ember__template": "^4.0.0",
+    "@types/ember__test": "^4.0.0",
+    "@types/ember__test-helpers": "^2.6.1",
+    "@types/ember__utils": "^4.0.0",
+    "@types/htmlbars-inline-precompile": "^3.0.0",
+    "@types/qunit": "^2.11.3",
+    "@types/rsvp": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.20.0",
+    "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
-    "ember-cli-inject-live-reload": "^2.0.2",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-netlify": "^0.4.1",
-    "ember-cli-postcss": "^7.0.0",
-    "ember-cli-resolve-asset": "^0.3.0",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-string-helpers": "^5.0.0",
+    "ember-cli-string-helpers": "^6.1.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript-blueprints": "^3.0.0",
-    "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-element-helper": "^0.3.1",
     "ember-export-application-global": "^2.0.1",
-    "ember-get-config": "^0.3.0",
-    "ember-load-initializers": "^2.1.1",
+    "ember-get-config": "~1.0.2",
+    "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-modifier": "^2.1.1",
-    "ember-qunit": "^4.6.0",
-    "ember-resolver": "^8.0.0",
-    "ember-source": "~3.20.2",
-    "ember-source-channel-url": "^2.0.1",
-    "ember-string-helpers": "^1.0.2",
-    "ember-template-lint": "^2.9.1",
+    "ember-page-title": "^6.2.2",
+    "ember-qunit": "^5.1.4",
+    "ember-resolver": "^8.0.2",
+    "ember-source": "~3.28.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^3.6.0",
     "ember-try": "^1.4.0",
-    "eslint": "^7.5.0",
-    "eslint-plugin-ember": "^8.9.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ember": "^10.5.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-qunit": "^6.2.0",
     "loader.js": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
-    "qunit-dom": "^1.2.0",
-    "typescript": "^4.0.3"
+    "prettier": "^2.3.2",
+    "qunit": "^2.16.0",
+    "qunit-dom": "^1.6.0",
+    "typescript": "^4.5.5"
   },
   "publishConfig": {
     "access": "public"
   },
   "engines": {
-    "node": ">= 12"
+    "node": "12.* || 14.* || >= 16"
   },
   "ember": {
     "edition": "octane"
@@ -154,5 +173,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "a225f53d9f2212e3eb5ab0c28daeabc5624031ab"
+  "gitHead": "f8ceacd6404b806669edf7bbd1eb2d79aac1f4bf"
 }

package/.prettierignore

@@ -1,20 +0,0 @@
-# unconventional js
-vendor/
-public/
-
-# compiled output
-dist/
-tmp/
-
-# dependencies
-node_modules/
-
-# ember-try
-.node_modules.ember-try/
-bower.json.ember-try
-package.json.ember-try
-
-package.json
-
-*.html
-*.js

package/app/components/eui-text-field/index.js

@@ -1 +0,0 @@
-export { default } from '@ember-eui/core/components/eui-text-field';

package/lib/elastic-eui-scss-filter.js

@@ -1,16 +0,0 @@
-'use strict';
-
-const Filter = require('broccoli-filter');
-
-module.exports = class EuiScssFilter extends Filter {
-  constructor(inputNode) {
-    super(inputNode, { annotation: 'EuiScssFilter' });
-
-    this.extensions = ['scss'];
-    this.targetExtension = 'scss';
-  }
-
-  processString(content) {
-    return content.replace("@import '../packages/index';", '');
-  }
-};

package/public/markdown-checkmark.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
-	<path d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z" />
-</svg>

package/public/markdown-logo.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26" height="16" fill="none" viewBox="0 0 26 16">
-	<path d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z" />
-</svg>