@ember-eui/core 4.0.1 → 4.0.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### Master
 
+### 4.0.4
+🐛 Bug / Fixes
+`@ember-eui/core`
+- Fixes some dependencies issues with 4.x breakings
+- Adds a blueprint to install ember-focus-trap in host
+- Fixes `<EuiPikaday />`
+
 ### 4.0.0
 💥 Breaking change
 `@ember-eui/*`
@@ -53,7 +60,11 @@
 💥 Breaking change
 `@ember-eui/core`
 - Deprecate `ember-svg-jar` `hbs` strategy for now, just use stock `ember-svg-jar`
-### 1.6.4
+### 1.6.7
+🐛 Bug / Fixes
+`@ember-eui/core`
+- `<EuiComboBox />` Call `onChange` after `onCreateOption` is triggered
+### 1.6.5
 🐛 Bug / Fixes
 `@ember-eui/core`
 - `<EuiComboBox />` hide clear button when disabled

package/README.md

@@ -15,6 +15,7 @@ var app = new EmberApp(defaults, {
     svgJar: {
       sourceDirs: [
         'public/assets',
+        '../node_modules/@ember-eui/core/public',
         'node_modules/@elastic/eui/lib/components/icon',
       ],
     },

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

@@ -10,7 +10,7 @@
       (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
       (if @isDisabled "euiCard-isDisabled")
       (if (has-block) "euiCard--hasChildren")
-      (if @icon "euiCard--hasIcon" (if has-block "icon" "euiCard--hasIcon"))
+      (if @icon "euiCard--hasIcon" (if (has-block) "icon" "euiCard--hasIcon"))
       (if @betaBadgeLabel "euiCard--hasBetaBadge")
       (if
         (or titleId (and @selectable (not @selectable.isDisabled)))

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

@@ -27,7 +27,6 @@
     onCreateOption=(if
       @onCreateOption (pipe this.onCreateOption @onCreateOption)
     )
-    isClearable=(and @isClearable (not @disabled))
   }}
   @matcher={{@matcher}}
   @initiallyOpen={{@initiallyOpen}}
@@ -51,7 +50,10 @@
   @triggerRole={{@triggerRole}}
   @title={{@title}}
   @triggerId={{@triggerId}}
-  @allowClear={{and @isClearable (not @disabled)}}
+  @allowClear={{and
+    (arg-or-default @isClearable true)
+    (not (or @isDisabled @disabled))
+  }}
   @loadingMessage={{@loadingMessage}}
   @selectedItemComponent={{@selectedItemComponent}}
   @beforeOptionsComponent={{@beforeOptionsComponent}}

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

@@ -66,6 +66,7 @@ export default class EuiComboBoxComponent extends Component<EuiComboBoxArgs> {
   onCreateOption() {
     let search = this.select.searchText;
     this.select.actions.search('');
+    this.select.actions.select(search);
     this.select.actions.close();
     return search;
   }

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

@@ -1,121 +1,118 @@
-{{#let (arg-or-default @isClearable true) as |isClearable|}}
-  <EuiFormControlLayout
-    @icon="arrowDown"
-    @iconSide="right"
-    @fullWidth={{@fullWidth}}
-    @compressed={{@compressed}}
-    @readOnly={{@readOnly}}
-    @clear={{if
-      (and @select.selected isClearable)
-      (fn @select.actions.select (array))
-    }}
-    @disabled={{@select.disabled}}
-  >
-    <:field>
-      {{! template-lint-disable }}
-      <ul
-        id="ember-power-select-multiple-options-{{@select.uniqueId}}"
-        class={{class-names
-          "euiComboBox__inputWrap ember-power-select-multiple-options"
-          (if @compressed "euiComboBox__inputWrap--compressed")
-          (if @fullWidth "euiComboBox__inputWrap--fullWidth")
-          (if @singleSelection "euiComboBox__inputWrap--noWrap")
-          (if @isLoading "euiComboBox__inputWrap--isLoading")
-          (if isClearable "euiComboBox__inputWrap-isClearable")
-        }}
-        ...attributes
-        {{did-update this.openChanged @select.isOpen}}
-        {{on "touchstart" this.chooseOption}}
-        {{on "mousedown" this.chooseOption}}
-      >
-        {{! template-lint-enable }}
-        {{#if
-          (or
-            (and @singleSelection (not @select.searchText))
-            (not @singleSelection)
-          )
-        }}
-          {{#each @select.selected as |opt idx|}}
-            {{#if @selectedItemComponent}}
-              {{component
-                (ensure-safe-component @selectedItemComponent)
-                extra=@extra
-                option=opt
-                select=@select
+<EuiFormControlLayout
+  @icon="arrowDown"
+  @iconSide="right"
+  @fullWidth={{@fullWidth}}
+  @compressed={{@compressed}}
+  @readOnly={{@readOnly}}
+  @clear={{if
+    (and @select.selected @allowClear)
+    (fn @select.actions.select (array))
+  }}
+  @disabled={{@select.disabled}}
+>
+  <:field>
+    {{! template-lint-disable }}
+    <ul
+      id="ember-power-select-multiple-options-{{@select.uniqueId}}"
+      class={{class-names
+        "euiComboBox__inputWrap ember-power-select-multiple-options"
+        (if @compressed "euiComboBox__inputWrap--compressed")
+        (if @fullWidth "euiComboBox__inputWrap--fullWidth")
+        (if @singleSelection "euiComboBox__inputWrap--noWrap")
+        (if @isLoading "euiComboBox__inputWrap--isLoading")
+        (if @allowClear "euiComboBox__inputWrap-isClearable")
+      }}
+      ...attributes
+      {{did-update this.openChanged @select.isOpen}}
+      {{on "touchstart" this.chooseOption}}
+      {{on "mousedown" this.chooseOption}}
+    >
+      {{! template-lint-enable }}
+      {{#if
+        (or
+          (and @singleSelection (not @select.searchText)) (not @singleSelection)
+        )
+      }}
+        {{#each @select.selected as |opt idx|}}
+          {{#if @selectedItemComponent}}
+            {{component
+              @selectedItemComponent
+              extra=@extra
+              option=opt
+              select=@select
+            }}
+          {{else}}
+            <EuiComboBoxPill
+              class="ember-power-select-multiple-option
+                {{if
+                  opt.disabled
+                  "ember-power-select-multiple-option--disabled"
+                }}"
+              @option={{opt}}
+              @onClose={{if
+                (or @select.disabled @singleSelection)
+                false
+                (if @onClose (fn (optional @onClose) opt) true)
               }}
-            {{else}}
-              <EuiComboBoxPill
-                class="ember-power-select-multiple-option
-                  {{if
-                    opt.disabled
-                    'ember-power-select-multiple-option--disabled'
-                  }}"
-                @option={{opt}}
-                @onClose={{if
-                  (or @select.disabled @singleSelection)
-                  false
-                  (if @onClose (fn (optional @onClose) opt) true)
-                }}
-                @dataSelectedIconIndex={{idx}}
-                @color={{opt.color}}
-                @asPlainText={{@singleSelection.asPlainText}}
-              >
-                {{yield opt @select}}
-              </EuiComboBoxPill>
-            {{/if}}
-          {{else if (and @placeholder (not @searchEnabled))}}
-            <span class="ember-power-select-placeholder">
-              {{@placeholder}}
-            </span>
-          {{/each}}
-        {{/if}}
-        {{#if @searchEnabled}}
-          {{! template-lint-disable }}
-          {{#if (and this.maybePlaceholder (not @select.searchText))}}
-            <p class="euiComboBoxPlaceholder">
-              {{this.maybePlaceholder}}
-            </p>
+              @dataSelectedIconIndex={{idx}}
+              @color={{opt.color}}
+              @asPlainText={{@singleSelection.asPlainText}}
+            >
+              {{yield opt @select}}
+            </EuiComboBoxPill>
           {{/if}}
-          <div
-            class="euiComboBox__input"
-            style="font-size: 14px; display: inline-block; position: relative;"
-          >
-            <input
-              tabindex="-1"
-              style="opacity: 0px; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important;"
-              class="fake-input-for-html-form-validity"
-              {{validatable-control @isInvalid}}
-            />
-            <input
-              class="ember-power-select-trigger-multiple-input euiComboBox__input"
-              autocomplete="off"
-              autocorrect="off"
-              autocapitalize="off"
-              spellcheck={{false}}
-              id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
-              value={{@select.searchText}}
-              aria-controls={{@listboxId}}
-              style={{this.triggerMultipleInputStyle}}
-              disabled={{@select.disabled}}
-              tabindex={{@tabindex}}
-              form="power-select-fake-form"
-              {{on "focus" @onFocus}}
-              {{on "blur" @onBlur}}
-              {{on "input" this.handleInput}}
-              {{on "keydown" this.handleKeydown}}
-              {{did-insert this.storeInputStyles}}
-            />
-          </div>
-          {{! template-lint-enable }}
-        {{else}}
-          {{! template-lint-disable }}
-          <div
-            class="euiComboBox__input"
-            style="font-size: 14px; display: inline-block;"
-          ></div>
-          {{! template-lint-enable }}
+        {{else if (and @placeholder (not @searchEnabled))}}
+          <span class="ember-power-select-placeholder">
+            {{@placeholder}}
+          </span>
+        {{/each}}
+      {{/if}}
+      {{#if @searchEnabled}}
+        {{! template-lint-disable }}
+        {{#if (and this.maybePlaceholder (not @select.searchText))}}
+          <p class="euiComboBoxPlaceholder">
+            {{this.maybePlaceholder}}
+          </p>
         {{/if}}
-      </ul>
-    </:field>
-  </EuiFormControlLayout>
-{{/let}}
+        <div
+          class="euiComboBox__input"
+          style="font-size: 14px; display: inline-block; position: relative;"
+        >
+          <input
+            tabindex="-1"
+            style="opacity: 0px; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important;"
+            class="fake-input-for-html-form-validity"
+            {{validatable-control @isInvalid}}
+          />
+          <input
+            class="ember-power-select-trigger-multiple-input euiComboBox__input"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck={{false}}
+            id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
+            value={{@select.searchText}}
+            aria-controls={{@listboxId}}
+            style={{this.triggerMultipleInputStyle}}
+            disabled={{@select.disabled}}
+            tabindex={{@tabindex}}
+            form="power-select-fake-form"
+            {{on "focus" @onFocus}}
+            {{on "blur" @onBlur}}
+            {{on "input" this.handleInput}}
+            {{on "keydown" this.handleKeydown}}
+            {{did-insert this.storeInputStyles}}
+          />
+        </div>
+        {{! template-lint-enable }}
+      {{else}}
+        {{! template-lint-disable }}
+        <div
+          class="euiComboBox__input"
+          style="font-size: 14px; display: inline-block;"
+        ></div>
+        {{! template-lint-enable }}
+      {{/if}}
+    </ul>
+  </:field>
+</EuiFormControlLayout>

package/addon/modifiers/focus-tab.ts

@@ -1,10 +1,19 @@
+import { scheduleOnce } from '@ember/runloop';
 import { modifier } from 'ember-modifier';
 
 export default modifier(function focusTab(
   _element: HTMLElement,
-  [selectedTabId, isDisabled, focusFn]: [Tab, boolean, (...args: unknown[]) => void, boolean]
+  [selectedTabId, isDisabled, focusFn]: [
+    Tab,
+    boolean,
+    (...args: unknown[]) => void,
+    boolean
+  ]
 ) {
   if (selectedTabId === undefined && !isDisabled) {
-    focusFn();
+    const fn = () => {
+      focusFn();
+    };
+    scheduleOnce('afterRender', null, fn);
   }
 });

package/blueprints/{ember-eui → ember-eui-core}/index.js

@@ -1,7 +1,7 @@
-'use strict'
+'use strict';
 
 module.exports = {
-  description: 'Installs ember-cli-sass',
+  description: 'Installs ember-focus-trap',
 
   normalizeEntityName() {
     // this prevents an error when the entityName is
@@ -9,6 +9,6 @@ module.exports = {
   },
 
   afterInstall() {
-    return this.addAddonToProject('ember-cli-sass');
+    return this.addAddonToProject('ember-focus-trap');
   }
-};
+};

package/docs/editors/code/code-block-demo/demo1.md

@@ -18,24 +18,19 @@ order: 1
   @value={{this.htmlCode}}
   {{on 'input' (pick 'target.value' (set this 'htmlCode'))}}
 />
+<EuiFormRow @label='Choose a Language'>
+  <EuiSelect
+    @value={{this.language}}
+    @hasNoInitialSelection={{true}}
+    @options={{array
+      (hash value='javascript' text='javascript')
+      (hash value='html' text='html')
+      (hash value='golang' text='golang')
+    }}
+    {{on 'change' (pick 'target.value' (set this 'language'))}}
+  />
 
-<EuiSelect
-  @value={{this.language}}
-  @hasNoInitialSelection={{true}}
-  @options={{array
-    (hash value='javascript' text='javascript')
-    (hash value='html' text='html')
-    (hash value='golang' text='golang')
-  }}
-  @id={{selectId}}
-  {{on 'change' (pick 'target.value' (set this 'language'))}}
->
-  <:prepend as |classes|>
-    <EuiFormLabel class={{classes}} for={{selectId}}>
-      Choose a language
-    </EuiFormLabel>
-  </:prepend>
-</EuiSelect>
+</EuiFormRow>
 ```
 
 ```javascript component

package/docs/forms/form-controls/form-control-layout-demo/demo1.md

@@ -17,7 +17,7 @@
   />
 </EuiFormControlLayout>
 <EuiSpacer @size="m" />
-<EuiFormControlLayout @clear={{optional}}>
+<EuiFormControlLayout @clear={{(optional)}}>
   <input
     type="text"
     class="euiFieldText"
@@ -25,7 +25,7 @@
   />
 </EuiFormControlLayout>
 <EuiSpacer size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{optional}}>
+<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}}>
   <input
     type="text"
     class="euiFieldText"
@@ -49,7 +49,7 @@
   />
 </EuiFormControlLayout>
 <EuiSpacer size="m" />
-<EuiFormControlLayout @clear={{optional}} @icon="search">
+<EuiFormControlLayout @clear={{(optional)}} @icon="search">
   <input
     type="text"
     class="euiFieldText"
@@ -57,7 +57,7 @@
   />
 </EuiFormControlLayout>
 <EuiSpacer size="m" />
-<EuiFormControlLayout @clear={{optional}} @icon="arrowDown" @iconSide="right">
+<EuiFormControlLayout @clear={{(optional)}} @icon="arrowDown" @iconSide="right">
   <input
     type="text"
     class="euiFieldText"
@@ -65,7 +65,7 @@
   />
 </EuiFormControlLayout>
 <EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{optional}} @icon="search">
+<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon="search">
   <input
     type="text"
     class="euiFieldText"
@@ -73,7 +73,7 @@
   />
 </EuiFormControlLayout>
 <EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{optional}} @icon="arrowDown" @iconSide="right">
+<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon="arrowDown" @iconSide="right">
   <input
     type="text"
     class="euiFieldText"
@@ -81,7 +81,7 @@
   />
 </EuiFormControlLayout>
 <EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{optional}} @icon="search">
+<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}} @icon="search">
   <input
     type="text"
     class="euiFieldText"
@@ -128,7 +128,7 @@
   </:field>
 </EuiFormControlLayout>
 <EuiSpacer @size="m" />
-<EuiFormControlLayout @isLoading={{true}} @clear={{optional}}>
+<EuiFormControlLayout @isLoading={{true}} @clear={{(optional)}}>
   <:prepend as |classes|>
     <EuiButtonEmpty @size="xs" @iconType="arrowDown" @iconSide="right" class={{classes}}>
       Button

package/docs/utilities/mutation-observer-demo/demo1.md

@@ -20,7 +20,7 @@
       <EuiFlexItem @grow={{false}}>
         <EuiPanel @grow={{false}}>
           <ul>
-            {{#each items as |item|}}
+            {{#each this.items as |item|}}
               <li>
                 {{item}}
               </li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "4.0.1",
+  "version": "4.0.4",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -62,17 +62,14 @@
     "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-in-element-polyfill": "^1.0.0",
+    "ember-element-helper": "^0.6.0",
     "ember-keyboard": "^7.0.1",
     "ember-math-helpers": "^2.15.0",
-    "ember-modifier": "^2.1.2",
-    "ember-named-blocks-polyfill": "^0.2.3",
+    "ember-modifier": "^3.1.0",
     "ember-power-select": "^5.0.2",
     "ember-set-body-class": "^1.0.2",
     "ember-set-helper": "^2.0.1",
-    "ember-style-modifier": "^0.6.0",
+    "ember-style-modifier": "^0.7.0",
     "ember-svg-jar": "^2.3.4",
     "ember-truth-helpers": "^3.0.0",
     "highlight.js": "^9.18.5",
@@ -90,6 +87,9 @@
     "unified": "^9.2.0",
     "vfile": "^4.2.0"
   },
+  "peerDependencies": {
+    "ember-focus-trap": "^1.0.1"
+  },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.6.0",
@@ -132,6 +132,7 @@
     "ember-cli-typescript-blueprints": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
+    "ember-focus-trap": "^1.0.1",
     "ember-get-config": "~1.0.2",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
@@ -167,10 +168,11 @@
     "edition": "octane"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "configPath": "tests/dummy/config",
+    "defaultBluerprint": "ember-eui-core"
   },
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "ab324804766c49f4991f91c8b988868c4a826208"
+  "gitHead": "d0007138cff1b49a85ad28a59bc4080d57042990"
 }

package/blueprints/ember-eui/files/app/styles/app.scss

@@ -1 +0,0 @@
-@import 'ember-eui';