@ember-eui/core 4.4.0 → 5.0.0-alpha.4

package/addon/components/eui-description-list-description/index.hbs

@@ -0,0 +1,3 @@
+<dd class="euiDescriptionList__description" ...attributes>
+  {{yield}}
+</dd>

package/addon/components/eui-description-list-title/index.hbs

@@ -0,0 +1,3 @@
+<dt class="euiDescriptionList__title" ...attributes>
+  {{yield}}
+</dt>

package/addon/components/eui-dual-range/index.hbs

@@ -1,10 +1,9 @@
 {{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
   (and (not (arg-or-default @isFakeMaxBlock false)) (has-block "max"))
-  (and
-    (not (arg-or-default @isFakeMinBlock false)) (has-block "min")
-  ) as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
+  (and (not (arg-or-default @isFakeMinBlock false)) (has-block "min"))
+  as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
 }}
   {{#if this.showInputOnly}}
     <EuiInputPopover
@@ -44,8 +43,8 @@
               @autoSize={{false}}
               @fullWidth={{this.fullWidth}}
               @isInvalid={{@isInvalid}}
-              @isFakeAppendBlock={{hasPrepend}}
-              @isFakePrependBlock={{hasAppend}}
+              @isPrependProvided={{hasAppend}}
+              @isAppendProvided={{hasPrepend}}
               @controlOnly={{true}}
               @disable={{@disable}}
               ...attributes
@@ -60,11 +59,16 @@
                 (if this.canShowDropdown this.onInputBlur (optional @onBlur))
               }}
               {{on "input" this.handleLowerInputChange}}
-            />
-            <div class="euiRange__horizontalSpacer"></div>
+            >
+              <:prepend as |classes|>
+                {{yield classes to="prepend"}}
+              </:prepend>
+              <:append as |classes|>
+                {{yield classes to="append"}}
+              </:append>
+            </EuiRangeInput>
           </:startControl>
           <:endControl as |classes|>
-            <div class="euiRange__horizontalSpacer"></div>
             <EuiRangeInput
               class={{classes}}
               aria-label={{@maxInputProps.ariaLabel}}
@@ -81,8 +85,8 @@
               @autoSize={{false}}
               @fullWidth={{this.fullWidth}}
               @isInvalid={{@isInvalid}}
-              @isFakeAppendBlock={{hasPrepend}}
-              @isFakePrependBlock={{hasAppend}}
+              @isPrependProvided={{hasAppend}}
+              @isAppendProvided={{hasPrepend}}
               @controlOnly={{true}}
               @disable={{@disable}}
               ...attributes
@@ -97,7 +101,14 @@
                 (if this.canShowDropdown this.onInputBlur (optional @onBlur))
               }}
               {{on "input" this.handleUpperInputChange}}
-            />
+            >
+              <:prepend as |classes|>
+                {{yield classes to="prepend"}}
+              </:prepend>
+              <:append as |classes|>
+                {{yield classes to="append"}}
+              </:append>
+            </EuiRangeInput>
           </:endControl>
           <:append as |appendClasses|>
             {{yield appendClasses to="append"}}
@@ -109,6 +120,7 @@
           class="euiDualRange"
           @fullWidth={{this.fullWidth}}
           @compressed={{this.compressed}}
+          @showInput={{this.showInput}}
         >
           {{#if this.showLabels}}
             <EuiRangeLabel @side="min" @disabled={{@disabled}}>
@@ -231,8 +243,8 @@
           @readOnly={{@readOnly}}
           @fullWidth={{this.fullWidth}}
           @isInvalid={{@isInvalid}}
-          @isFakeAppendBlock={{true}}
-          @isFakePrependBlock={{true}}
+          @isPrependProvided={{false}}
+          @isAppendProvided={{false}}
           @controlOnly={{true}}
           @disable={{@disable}}
           ...attributes
@@ -357,8 +369,8 @@
           @fullWidth={{this.fullWidth}}
           @isInvalid={{@isInvalid}}
           @controlOnly={{this.showInputOnly}}
-          @isFakeAppendBlock={{true}}
-          @isFakePrependBlock={{true}}
+          @isPrependProvided={{false}}
+          @isAppendProvided={{false}}
           @disable={{@disable}}
           ...attributes
           {{on-key "_all" this.handleInputKeyDown}}
@@ -369,4 +381,4 @@
       {{/if}}
     </EuiRangeWrapper>
   {{/if}}
-{{/let}}
+{{/let}}

package/addon/components/eui-dual-range/index.ts

@@ -13,6 +13,7 @@ import { EuiRangeTick } from '../eui-range-ticks';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { later } from '@ember/runloop';
 import { keys } from '../../utils/keys';
+import { EUI_THUMB_SIZE } from '../../utils/range';
 type ValueMember = number | string;
 
 export interface EuiDualRangeArgs
@@ -177,16 +178,28 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
     // Determine thumb movement based on slider interaction
     if (!this.isValid) {
       // Non-standard positioning follows
-      this._determineInvalidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
+      this._determineInvalidThumbMovement(
+        newVal,
+        this.lowerValue,
+        this.upperValue,
+        e
+      );
     } else {
       // Standard positioning based on click event proximity to thumb locations
-      this._determineValidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
+      this._determineValidThumbMovement(
+        newVal,
+        this.lowerValue,
+        this.upperValue,
+        e
+      );
     }
   }
 
   @action
   _handleOnChange(lower: ValueMember, upper: ValueMember, e: Event): void {
-    const isValid = isWithinRange(this.min, upper, lower) && isWithinRange(lower, this.max, upper);
+    const isValid =
+      isWithinRange(this.min, upper, lower) &&
+      isWithinRange(lower, this.max, upper);
     this.args.onChange([lower, upper], isValid, e);
   }
 
@@ -198,15 +211,23 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
   @action
   _resetToRangeEnds(e: KeyboardEvent): void {
     // Arbitrary decision to pass `min` instead of `max`. Result is the same.
-    this._determineInvalidThumbMovement(this.min, this.lowerValue, this.upperValue, e);
+    this._determineInvalidThumbMovement(
+      this.min,
+      this.lowerValue,
+      this.upperValue,
+      e
+    );
   }
 
   @action
   _isDirectionalKeyPress(event: KeyboardEvent): boolean {
     return (
-      [keys.ARROW_UP, keys.ARROW_RIGHT, keys.ARROW_DOWN, keys.ARROW_LEFT].indexOf(
-        event.key as keys
-      ) > -1
+      [
+        keys.ARROW_UP,
+        keys.ARROW_RIGHT,
+        keys.ARROW_DOWN,
+        keys.ARROW_LEFT
+      ].indexOf(event.key as keys) > -1
     );
   }
 
@@ -303,7 +324,6 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
     let valuePosition = decimal <= 1 ? decimal : 1;
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
-    const EUI_THUMB_SIZE = 16;
     const trackWidth =
       this.args.showInput === 'inputWithPopover' && !!width
         ? width
@@ -325,11 +345,17 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
   }
 
   get calculateLowerValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(Number(this.lowerValue) || this.min, this.rangeWidth);
+    return this.calculateThumbPositionStyle(
+      Number(this.lowerValue) || this.min,
+      this.rangeWidth
+    );
   }
 
   get calculateUpperValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(Number(this.upperValue) || this.max, this.rangeWidth);
+    return this.calculateThumbPositionStyle(
+      Number(this.upperValue) || this.max,
+      this.rangeWidth
+    );
   }
 
   @action

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

@@ -0,0 +1,83 @@
+{{#let (arg-or-default @layout "vertical") as |layout|}}
+  <EuiPanel
+    class={{class-names
+      (if layout (concat "euiEmptyPrompt--" layout) "euiEmptyPrompt--vertical")
+      componentName="EuiEmptyPrompt"
+      paddingSize=(arg-or-default @paddingSize "l")
+    }}
+    @paddingSize="none"
+    @color={{arg-or-default @color "transparent"}}
+    @hasBorder={{@hasBorder}}
+    @hasShadow={{false}}
+  >
+    <div class="euiEmptyPrompt__main">
+      {{#if (has-block "icon")}}
+        <div class="euiEmptyPrompt__icon">{{yield to="icon"}}</div>
+      {{else if @iconType}}
+        <div class="euiEmptyPrompt__icon">
+          <EuiIcon
+            @type={{@iconType}}
+            @size="xxl"
+            @color={{if @iconColor @iconColor (if @color @color "subdued")}}
+          />
+        </div>
+      {{/if}}
+      <div class="euiEmptyPrompt__content">
+        {{#if (has-block "content")}}
+          <div class="euiEmptyPrompt__contentInner">{{yield to="content"}}</div>
+        {{else}}
+          <div class="euiEmptyPrompt__contentInner">
+            {{#if @title}}
+              <EuiTitle
+                @size={{arg-or-default @titleSize "m"}}
+              >{{@title}}</EuiTitle>
+            {{/if}}
+            {{#if @body}}
+              <EuiTextColor @color="subdued">
+                {{#if @title}}
+                  <EuiSpacer @size="m" />
+                {{/if}}
+                <EuiText>
+                  {{@body}}
+                </EuiText>
+              </EuiTextColor>
+            {{/if}}
+            {{#if (gte @actions.length 2)}}
+              <EuiSpacer size="l" />
+              <EuiFlexGroup
+                class="euiEmptyPrompt__actions"
+                @gutterSize="m"
+                @alignItems="center"
+                @justifyContent="center"
+                @direction={{if (eq layout "vertical") "column" "row"}}
+              >
+                {{#each @actions as |action|}}
+                  <EuiFlexItem @grow={{false}}>
+                    {{action}}
+                  </EuiFlexItem>
+                {{/each}}
+              </EuiFlexGroup>
+            {{else}}
+              <EuiSpacer size="l" />
+              {{#each @actions as |action|}}
+                {{action}}
+              {{/each}}
+            {{/if}}
+          </div>
+        {{/if}}
+      </div>
+    </div>
+
+    {{#if (has-block "footer")}}
+      <div class="euiEmptyPrompt__footer">
+        {{yield to="footer"}}
+      </div>
+    {{else}}
+      {{#if @footer}}
+        <div class="euiEmptyPrompt__footer">
+          {{@footer}}
+        </div>
+      {{/if}}
+    {{/if}}
+  </EuiPanel>
+{{/let}}

package/addon/components/eui-field-number/index.hbs

@@ -1,6 +1,6 @@
 {{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
   (arg-or-default @id (unique-id)) as |hasPrepend hasAppend inputId|
 }}
   {{#let
@@ -59,4 +59,4 @@
       </EuiFormControlLayout>
     {{/if}}
   {{/let}}
-{{/let}}
+{{/let}}

package/addon/components/eui-field-number/types.ts

@@ -3,7 +3,10 @@ import { EuiFormControlLayoutArgs } from '../eui-form-control-layout/types';
 
 import { IconType } from '../eui-icon';
 
-export type EuiFieldNumberArgs = Omit<HTMLInputElement, 'min' | 'max' | 'readOnly' | 'step'> &
+export type EuiFieldNumberArgs = Omit<
+  HTMLInputElement,
+  'min' | 'max' | 'readOnly' | 'step'
+> &
   CommonArgs & {
     icon?: IconType;
     isInvalid?: boolean;

package/addon/components/eui-field-search/index.hbs

@@ -43,6 +43,7 @@
           value={{this.value}}
           disabled={{@disabled}}
           type="text"
+          placeholder={{@placeholder}}
           ...attributes
           {{on "keyup" (fn this.onKeyUp this.incremental @onSearch)}}
           {{on "search" this.setValue}}
@@ -57,4 +58,4 @@
       </:append>
     </EuiFormControlLayout>
   {{/let}}
-{{/let}}
+{{/let}}

package/addon/components/eui-field-text/index.hbs

@@ -20,6 +20,7 @@
         class={{classes}}
         disabled={{@disabled}}
         type="text"
+        placeholder={{@placeholder}}
         ...attributes
         {{validatable-control @isInvalid}}
         {{did-insert (optional @inputRef)}}
@@ -45,6 +46,7 @@
             class={{classes}}
             disabled={{@disabled}}
             type="text"
+            placeholder={{@placeholder}}
             ...attributes
             {{validatable-control @isInvalid}}
           />
@@ -55,4 +57,4 @@
       </EuiFormControlLayout>
     {{/if}}
   {{/let}}
-{{/let}}
+{{/let}}

package/addon/components/eui-file-picker/index.hbs

@@ -7,20 +7,19 @@
     display=this.display
     componentName="EuiFilePicker"
   )
-  (arg-or-default @id (unique-id)) as |classes inputId|
+  (arg-or-default @id (unique-id))
+  as |classes inputId|
 }}
   {{#let
     (if inputId (concat inputId "-filePicker__prompt") (unique-id))
     (not-eq this.promptText null)
-    (eq this.display "default") as |promptId isOverridingInitialPrompt normalFormControl|
+    (eq this.display "default")
+    as |promptId isOverridingInitialPrompt normalFormControl|
   }}
     <div
       class="{{classes}}
-
-        {{if this.isHoveringDrop "euiFilePicker__showDrop"}}
-
-        {{if isOverridingInitialPrompt "euiFilePicker--hasFiles"}}"
-      ...attributes
+        {{if this.isHoveringDrop 'euiFilePicker__showDrop'}}
+        {{if isOverridingInitialPrompt 'euiFilePicker--hasFiles'}}"
     >
       <div class="euiFilePicker__wrap">
         <input
@@ -30,12 +29,14 @@
           class="euiFilePicker__input"
           disabled={{@disabled}}
           aria-describedby={{promptId}}
+          multiple={{@multiple}}
           {{on "dragover" this.showDrop}}
           {{on "dragleave" this.hideDrop}}
           {{on "drop" this.hideDrop}}
-          {{on "change" (fn this.handleChange this.filesSelected)}}
-					{{did-insert this.didInsertInput}}
+          {{on "change" this.handleChange}}
+          {{did-insert this.didInsertInput}}
           {{validatable-control @isInvalid}}
+          ...attributes
         />
         <div class="euiFilePicker__prompt" id={{promptId}}>
           <EuiIcon
@@ -57,7 +58,10 @@
                 class="euiFilePicker__clearButton"
                 {{on "click" this.removeFiles}}
               >
-                <EuiIcon @iconClasses="euiFilePicker__clearIcon" @type="cross" />
+                <EuiIcon
+                  @iconClasses="euiFilePicker__clearIcon"
+                  @type="cross"
+                />
               </button>
             {{else}}
               <EuiButtonEmpty
@@ -77,4 +81,4 @@
       </div>
     </div>
   {{/let}}
-{{/let}}
+{{/let}}

package/addon/components/eui-file-picker/index.ts

@@ -35,6 +35,11 @@ type EuiFilePicker = {
   isInvalid?: boolean;
   isLoading?: boolean;
   disabled?: boolean;
+
+  /**
+   * Optionally pass a fn to get the instance of the component to access it programatically
+   */
+  ref?: (c: typeof EuiFilePickerComponent) => void;
 };
 
 export default class EuiFilePickerComponent extends Component<EuiFilePicker> {
@@ -42,9 +47,13 @@ export default class EuiFilePickerComponent extends Component<EuiFilePicker> {
   @tracked promptText: string | null | undefined = null;
   @tracked isHoveringDrop = false;
 
-  @argOrDefault('Select or drag and drop a file') initialPromptText!: Component | string | null;
+  @argOrDefault('Select or drag and drop a file') initialPromptText!:
+    | Component
+    | string
+    | null;
+
   @argOrDefault(false) compressed!: boolean;
-  @argOrDefault('large') display!: string;
+  @argOrDefault('') display!: string;
 
   @action
   showDrop(): void {
@@ -59,11 +68,17 @@ export default class EuiFilePickerComponent extends Component<EuiFilePicker> {
   }
 
   @action
-  handleChange(filesSelected?: string | null): void {
+  handleChange(): void {
     if (!this.fileInput) return;
 
     if (this.fileInput.files && this.fileInput.files.length > 1) {
-      this.promptText = `${this.fileInput.files.length} ${filesSelected}`;
+      this.promptText = `${this.fileInput.files.length} files selected`;
+      // TODO: Change when EuiI18n is available
+      // <EuiI18n
+      //   token="euiFilePicker.filesSelected"
+      //   default="{fileCount} files selected"
+      //   values={{ fileCount: this.fileInput.files.length }}
+      // />
     } else if (this.fileInput.files && this.fileInput.files.length === 0) {
       this.promptText = null;
     } else {
@@ -78,18 +93,21 @@ export default class EuiFilePickerComponent extends Component<EuiFilePicker> {
   }
 
   @action
-  removeFiles(e: MouseEvent): void {
-    e.stopPropagation();
-    e.preventDefault();
+  removeFiles(e?: MouseEvent): void {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
 
     if (!this.fileInput) return;
 
     this.fileInput.value = '';
-    this.handleChange(null);
+    this.handleChange();
   }
 
   @action
   didInsertInput(inputRef: HTMLInputElement): void {
     this.fileInput = inputRef;
+    this.args.ref?.(this as any as typeof EuiFilePickerComponent);
   }
 }

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

@@ -1,47 +1,134 @@
-{{#if @ownFocus}}
-  <EuiOverlayMask @headerZindexLocation="below" {{on "click" @onClose}} />
-{{/if}}
-{{set-body-class "euiBody--hasFlyout"}}
-
 {{#let
-  (if
-    (not (or (eq @maxWidth false) (eq @maxWidth true)))
-    (inline-styles max-width=@maxWidth)
-    (hash)
+  (class-names
+    (if (eq this.maxWidth true) "euiFlyout--maxWidth-default")
+    componentName="EuiFlyout"
+    type=this.type
+    side=this.side
+    size=this.size
+    padding=this.paddingSize
+  )
+  (class-names
+    "euiFlyout__closeButton"
+    (concat "euiFlyout__closeButton--" this.closeButtonPosition)
+    (or @closeButtonProps.className @closeButtonProps.classes)
+  )
+  (modifier
+    "focus-trap"
+    isActive=(arg-or-default @isFocusTrapActive true)
+    shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
+    isPaused=this.isPushed
+    focusTrapOptions=(arg-or-default
+      @focusTrapOptions
+      (hash allowOutsideClick=true clickOutsideDeactivates=(not this.ownFocus))
+    )
   )
-  as |inlineStyles|
+  (modifier
+    "outside-click-detector"
+    isDisabled=(or this.isPushed (not this.outsideClickCloses))
+    onOutsideClick=this.onClose
+  )
+  (modifier "style" this.styles)
+  (modifier "on-key" "Escape" this.onClose)
+  (modifier
+    this.classesModifier
+    type=this.type
+    isPushed=this.isPushed
+    side=this.side
+    dimensions=this.dimensions
+    functionToCallOnWindowResize=this.functionToCallOnWindowResize
+  )
+  (modifier "resize-observer" onResize=this.onResize)
+  (element this.as)
+  as |classes closeButtonClasses focusTrap outsideClickDetector currentStyles onEscape classesModifier resizeObserver Element|
 }}
-  <div
-    role="dialog"
-    class={{class-names
-      (if (eq @maxWidth true) "euiFlyout--maxWidth-default")
-      componentName="EuiFlyout"
-      size=(arg-or-default @size "m")
-    }}
-    tabindex={{0}}
-    ...attributes
-    {{style inlineStyles}}
-    {{focus-trap
-      isActive=(arg-or-default @isFocusTrapActive true)
-      shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-      isPaused=(arg-or-default @isFocusTrapPaused false)
-      focusTrapOptions=(arg-or-default
-        @focusTrapOptions
-        (hash allowOutsideClick=true clickOutsideDeactivates=(not @ownFocus))
-      )
-    }}
-    {{on-key "Escape" @onClose}}
-  >
-    {{#if (and @onClose (not @hideCloseButton))}}
-      <EuiButtonIcon
-        class="euiFlyout__closeButton"
-        aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
-        @iconType="cross"
-        @color="text"
-        data-test-subj="euiFlyoutCloseButton"
-        {{on "click" @onClose}}
-      />
-    {{/if}}
-    {{yield}}
-  </div>
+
+  {{#if (and this.ownFocus (not this.isPushed))}}
+    <EuiOverlayMask @headerZindexLocation="below" @onClick={{this.onClose}}>
+      <Element
+        role={{this.role}}
+        class={{classes}}
+        tabindex={{-1}}
+        {{currentStyles}}
+        {{focusTrap}}
+        {{outsideClickDetector}}
+        {{classesModifier}}
+        {{resizeObserver}}
+        ...attributes
+      >
+        {{#if (and @onClose (not @hideCloseButton))}}
+          <EuiButtonIcon
+            @display={{if
+              (eq this.closeButtonPosition "outside")
+              "fill"
+              "empty"
+            }}
+            @iconType="cross"
+            @color="text"
+            aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
+            data-test-subj="euiFlyoutCloseButton"
+            class={{closeButtonClasses}}
+            {{on "click" this.onButtonCloseClicked}}
+          />
+        {{/if}}
+        {{yield}}
+      </Element>
+    </EuiOverlayMask>
+  {{else if (not this.isPushed)}}
+    <EuiPortal>
+      <Element
+        role={{this.role}}
+        class={{classes}}
+        tabindex={{-1}}
+        {{currentStyles}}
+        {{focusTrap}}
+        {{outsideClickDetector}}
+        {{classesModifier}}
+        {{resizeObserver}}
+        ...attributes
+      >
+        {{#if (and @onClose (not @hideCloseButton))}}
+          <EuiButtonIcon
+            @display={{if
+              (eq this.closeButtonPosition "outside")
+              "fill"
+              "empty"
+            }}
+            @iconType="cross"
+            @color="text"
+            aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
+            data-test-subj="euiFlyoutCloseButton"
+            class={{closeButtonClasses}}
+            {{on "click" this.onButtonCloseClicked}}
+          />
+        {{/if}}
+        {{yield}}
+      </Element>
+    </EuiPortal>
+  {{else}}
+    <Element
+      role={{this.role}}
+      class={{classes}}
+      tabindex={{-1}}
+      {{currentStyles}}
+      {{focusTrap}}
+      {{outsideClickDetector}}
+      {{onEscape}}
+      {{classesModifier}}
+      {{resizeObserver}}
+      ...attributes
+    >
+      {{#if (and @onClose (not @hideCloseButton))}}
+        <EuiButtonIcon
+          @display={{if (eq this.closeButtonPosition "outside") "fill" "empty"}}
+          @iconType="cross"
+          @color="text"
+          aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
+          data-test-subj="euiFlyoutCloseButton"
+          class={{closeButtonClasses}}
+          {{on "click" this.onButtonCloseClicked}}
+        />
+      {{/if}}
+      {{yield}}
+    </Element>
+  {{/if}}
 {{/let}}