@ember-eui/core 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 ### Master
 
+### 4.0.0
+💥 Breaking change
+`@ember-eui/*`
+- Your application must depend on `ember-auto-import` > v2.0.0, please refer to the [migration guides](https://github.com/ef4/ember-auto-import/blob/main/docs/upgrade-guide-2.0.md)
+
+🚀 Enhancements
+`@ember-eui/*`
+- ember v4.1.0 support!
+
+🏠 Internal
+`@ember-eui/*`
+- `ember-cli-update` on all packages for ember >v4.1.0
+- Update ember-cli-typescript
+- Update docs dependencies for ember 4 support
+
+### 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/*`

package/README.md

@@ -15,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',
       ],
     },
@@ -26,8 +25,8 @@ var app = new EmberApp(defaults, {
 
 ## Compatibility
 
-* Ember.js v3.20 or above
-* Ember CLI v3.20 or above
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
 * Node.js v12 or above
 
 

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-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

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,21 +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() {
-    //@ts-ignore
-    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,13 +29,6 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     }
   ];
 
-  get svgPath() {
-    //@ts-ignore
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
-    return svgPath;
-  }
-
   @cached
   get listButtons() {
     return [
@@ -56,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -53,20 +53,19 @@
   "dependencies": {
     "@elastic/eui": "31.0.0",
     "@ember/render-modifiers": "^2.0.4",
-    "@html-next/vertical-collection": "^2.1.0",
+    "@html-next/vertical-collection": "html-next/vertical-collection#v3.0.0-0",
     "@types/lodash-es": "^4.17.4",
     "chroma-js": "^2.1.0",
-    "ember-auto-import": "^1.11.3",
+    "ember-auto-import": "^2.2.4",
     "ember-cached-decorator-polyfill": "^0.1.1",
-    "ember-cli-babel": "^7.26.6",
-    "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
     "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-keyboard": "^7.0.1",
     "ember-math-helpers": "^2.15.0",
     "ember-modifier": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.3",
@@ -95,6 +94,7 @@
     "@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",
@@ -122,7 +122,7 @@
     "@types/rsvp": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.28.0",
+    "ember-cli": "~4.1.1",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-netlify": "^0.4.1",
@@ -134,28 +134,28 @@
     "ember-export-application-global": "^2.0.1",
     "ember-get-config": "~1.0.2",
     "ember-load-initializers": "^2.1.2",
-    "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-page-title": "^6.2.2",
-    "ember-qunit": "^5.1.4",
-    "ember-resolver": "^8.0.2",
-    "ember-source": "~3.28.0",
+    "ember-page-title": "^7.0.0",
+    "ember-qunit": "^5.1.5",
+    "ember-resolver": "^8.0.3",
+    "ember-source": "~4.1.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^3.6.0",
-    "ember-try": "^1.4.0",
+    "ember-template-lint": "^3.15.0",
+    "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-ember": "^10.5.4",
+    "eslint-plugin-ember": "^10.5.8",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-qunit": "^6.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-qunit": "^7.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.3.2",
-    "qunit": "^2.16.0",
-    "qunit-dom": "^1.6.0",
-    "typescript": "^4.5.5"
+    "prettier": "^2.5.1",
+    "qunit": "^2.17.2",
+    "qunit-dom": "^2.0.0",
+    "typescript": "^4.5.5",
+    "webpack": "^5.65.0"
   },
   "publishConfig": {
     "access": "public"
@@ -170,7 +170,7 @@
     "configPath": "tests/dummy/config"
   },
   "volta": {
-    "node": "12.22.1"
+    "extends": "../../package.json"
   },
-  "gitHead": "24ca3b05bb2ffb838ab452bb5b2a9794fd8a993f"
+  "gitHead": "7df0f767d3009cb7b110539c60260dd848fc2ac3"
 }

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

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

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>