@ember-eui/core 7.1.1 → 7.1.3

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

@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked, cached } from '@glimmer/tracking';
-//@ts-ignore
 import { emberPowerSelectIsGroup } from 'ember-power-select/helpers/ember-power-select-is-group';
 import { isEqual } from '@ember/utils';
 
@@ -23,16 +22,17 @@ interface Select {
   };
 }
 
-interface Arrayable<T> {
-  toArray(): T[];
+interface Sliceable<T> {
+  slice(): T[];
 }
-const isArrayable = <T>(coll: any): coll is Arrayable<T> => {
-  return typeof coll.toArray === 'function';
+
+const isSliceable = <T>(coll: any): coll is Sliceable<T> => {
+  return typeof coll.slice === 'function' && typeof coll.sort === 'function';
 };
 
-const toPlainArray = <T>(collection: T[] | Arrayable<T>): T[] => {
-  if (isArrayable<T>(collection)) {
-    return collection.toArray();
+export const toPlainArray = <T>(collection: T[] | Sliceable<T>): T[] => {
+  if (isSliceable<T>(collection)) {
+    return collection.slice();
   } else {
     return collection;
   }

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

@@ -1,6 +1,7 @@
 import EmberPowerSelectOptions from 'ember-power-select/components/power-select/options';
 import { emberPowerSelectIsGroup } from 'ember-power-select/helpers/ember-power-select-is-group';
 import config from 'ember-get-config';
+import { toPlainArray } from '..';
 
 export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
   _optionsCache = [];
@@ -22,7 +23,7 @@ export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions
 
   _optionFromIndex(index) {
     let parts = index.split('.');
-    let option = this.flattedOptions[parseInt(parts[0], 10)];
+    let option = toPlainArray(this.flattedOptions).at?.(parseInt(parts[0], 10));
     for (let i = 1; i < parts.length; i++) {
       option = option.options[parseInt(parts[i], 10)];
     }

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

@@ -69,44 +69,44 @@
         {{/each}}
       {{/if}}
       {{#if @searchEnabled}}
-        {{! template-lint-disable }}
         {{#if (and this.maybePlaceholder (not @select.searchText))}}
           <p class="euiComboBoxPlaceholder">
             {{this.maybePlaceholder}}
           </p>
         {{/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"
-            autofocus={{@autoFocus}}
-            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 }}
+
+        {{#let
+          (component
+            "eui-combo-box/trigger/input"
+            select=@select
+            ariaActiveDescendant=@ariaActiveDescendant
+            ariaLabelledBy=@ariaLabelledBy
+            ariaLabel=@ariaLabel
+            listboxId=@listboxId
+            tabindex=@tabindex
+            buildSelection=@buildSelection
+            placeholder=@placeholder
+            placeholderComponent=@placeholderComponent
+            searchField=@searchField
+            onFocus=@onFocus
+            onBlur=@onBlur
+            onKeydown=@onKeydown
+            onInput=@onInput
+            onCreateOption=@onCreateOption
+          )
+          as |InputComponent|
+        }}
+          {{component
+            (ensure-safe-component @placeholderComponent)
+            select=@select
+            placeholder=@placeholder
+            isMutlipleWithSearch=true
+            inputComponent=InputComponent
+            displayPlaceholder=(and
+              (not @select.searchText) (not @select.selected)
+            )
+          }}
+        {{/let}}
       {{else}}
         {{! template-lint-disable }}
         <div
@@ -117,4 +117,4 @@
       {{/if}}
     </ul>
   </:field>
-</EuiFormControlLayout>
+</EuiFormControlLayout>

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

@@ -1,57 +1,3 @@
 import EmberPowerSelectMultipleTrigger from 'ember-power-select/components/power-select-multiple/trigger';
-import { action } from '@ember/object';
-import { isBlank } from '@ember/utils';
-import { scheduleOnce } from '@ember/runloop';
-import { htmlSafe } from '@ember/template';
 
-export default class EuiComboBoxTriggerComponent extends EmberPowerSelectMultipleTrigger {
-  get triggerMultipleInputStyle() {
-    scheduleOnce('actions', null, this.args.select.actions.reposition);
-
-    let textWidth = 0;
-    if (this.inputFont) {
-      textWidth = this.textMeasurer.width(
-        this.args.select.searchText,
-        this.inputFont
-      );
-    }
-    return htmlSafe(`box-sizing: content-box; width: ${textWidth + 2}px`);
-  }
-
-  @action
-  handleKeydown(e) {
-    if (e.target === null) return;
-    if (this.args.onKeydown && this.args.onKeydown(e) === false) {
-      if (
-        this.args.onCreateOption && //if user wants to create an option and
-        e.keyCode === 13 && //presses [Enter] and
-        (this.args.select.options.length === 0 || //If There are no options or
-          this.args.select.results.length === 0) && //Last search made returned no results and
-        this.args.select.searchText.length >= 1 //There's something in the searchText box
-      ) {
-        this.args.onCreateOption();
-        return false;
-      }
-      e.stopPropagation();
-      return false;
-    }
-    if (e.keyCode === 8) {
-      e.stopPropagation();
-      if (isBlank(e.target.value)) {
-        let lastSelection =
-          this.args.select.selected[this.args.select.selected.length - 1];
-        if (lastSelection) {
-          this.args.select.actions.select(
-            this.args.buildSelection(lastSelection, this.args.select),
-            e
-          );
-          this.args.select.actions.search('');
-          this.args.select.actions.open(e);
-        }
-      }
-    } else if ((e.keyCode >= 48 && e.keyCode <= 90) || e.keyCode === 32) {
-      // Keys 0-9, a-z or SPACE
-      e.stopPropagation();
-    }
-  }
-}
+export default class EuiComboBoxTriggerComponent extends EmberPowerSelectMultipleTrigger {}

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

@@ -0,0 +1,38 @@
+{{!template-lint-disable}}
+{{#if (and this.maybePlaceholder (not @select.searchText))}}
+  <p class="euiComboBoxPlaceholder">
+    {{this.maybePlaceholder}}
+  </p>
+{{/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"
+    autofocus={{@autoFocus}}
+    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}}

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

@@ -0,0 +1,63 @@
+import EmberPowerSelectPowerSelectMultipleTriggerInputComponent from 'ember-power-select/components/power-select-multiple/input';
+import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+
+import { htmlSafe } from '@ember/template';
+
+import { scheduleOnce } from '@ember/runloop';
+
+export default class EuiComboBoxTriggerInputComponent extends EmberPowerSelectPowerSelectMultipleTriggerInputComponent {
+  get triggerMultipleInputStyle() {
+    scheduleOnce('actions', null, this.args.select.actions.reposition);
+
+    let textWidth = 0;
+    // @ts-expect-error
+    if (this.inputFont) {
+      textWidth = this.textMeasurer.width(
+        this.args.select.searchText,
+        // @ts-expect-error
+        this.inputFont
+      );
+    }
+    return htmlSafe(`box-sizing: content-box; width: ${textWidth + 2}px`);
+  }
+
+  @action
+  handleKeydown(e: KeyboardEvent): false | void {
+    if (e.target === null) return;
+    if (this.args.onKeydown && this.args.onKeydown(e) === false) {
+      if (
+        // @ts-expect-error
+        this.args.onCreateOption && //if user wants to create an option and
+        e.keyCode === 13 && //presses [Enter] and
+        (this.args.select.options.length === 0 || //If There are no options or
+          this.args.select.results.length === 0) && //Last search made returned no results and
+        this.args.select.searchText.length >= 1 //There's something in the searchText box
+      ) {
+        // @ts-expect-error
+        this.args.onCreateOption();
+        return false;
+      }
+      e.stopPropagation();
+      return false;
+    }
+    if (e.keyCode === 8) {
+      e.stopPropagation();
+      if (isBlank((e.target as HTMLInputElement).value)) {
+        let lastSelection =
+          this.args.select.selected[this.args.select.selected.length - 1];
+        if (lastSelection) {
+          this.args.select.actions.select(
+            this.args.buildSelection(lastSelection, this.args.select),
+            e
+          );
+          this.args.select.actions.search('');
+          this.args.select.actions.open(e);
+        }
+      }
+    } else if ((e.keyCode >= 48 && e.keyCode <= 90) || e.keyCode === 32) {
+      // Keys 0-9, a-z or SPACE
+      e.stopPropagation();
+    }
+  }
+}

package/app/components/eui-combo-box/trigger/input/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-combo-box/trigger/input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "7.1.1",
+  "version": "7.1.3",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -186,5 +186,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "e6b8e2ea6871b8a0da0a1792af948185fcba1074"
+  "gitHead": "b31eb2bf6cd5c5c15a271a88b7d7386df271ed4d"
 }