@ember-eui/core 4.2.6 → 5.0.0-alpha.1

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

@@ -78,7 +78,7 @@ export type EuiPopoverArgs = {
    * document.querySelector() to find the DOM node), or a function that
    * returns a DOM node
    */
-  initialFocus?: FocusTarget;
+  initialFocus?: FocusTarget | false;
   /**
    * Passed directly to EuiPortal for DOM positioning. Both properties are
    * required if prop is specified
@@ -147,6 +147,8 @@ export type EuiPopoverArgs = {
    * Usually takes the `id` of the popover title
    */
   'aria-labelledby'?: string;
+
+  tabindex?: string | number;
 };
 
 type AnchorPosition = 'up' | 'right' | 'down' | 'left';
@@ -234,7 +236,7 @@ type CssProps = {
 export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   // Defaults
   @argOrDefault(false) isOpen!: boolean;
-  @argOrDefault(false) ownFocus!: boolean;
+  @argOrDefault(true) ownFocus!: boolean;
   @argOrDefault('downCenter') anchorPosition!: PopoverAnchorPosition;
   @argOrDefault('m') panelPaddingSize!: PanelPaddingSize;
   @argOrDefault(true) hasArrow!: boolean;
@@ -257,6 +259,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   private closingTransitionTimeout: ReturnType<typeof later> | null = null;
   private closingTransitionAnimationFrame: number | undefined;
   private updateFocusAnimationFrame: number | undefined;
+  private hasSetInitialFocus: boolean = false;
   @tracked button: HTMLElement | null = null;
   @tracked panel: HTMLElement | null = null;
 
@@ -287,7 +290,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   @action
   onKeyDown(event: KeyboardEvent): void {
     if (event.key === cascadingMenuKeys.ESCAPE) {
-      this.onEscapeKey((event as unknown) as Event);
+      this.onEscapeKey(event as unknown as Event);
     }
   }
 
@@ -303,12 +306,15 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   updateFocus(): void {
     // Wait for the DOM to update.
     this.updateFocusAnimationFrame = window.requestAnimationFrame(() => {
-      if (!this.ownFocus || !this.panel) {
+      if (!this.ownFocus || !this.panel || this.args.initialFocus === false) {
         return;
       }
 
       // If we've already focused on something inside the panel, everything's fine.
-      if (this.panel.contains(document.activeElement)) {
+      if (
+        this.hasSetInitialFocus &&
+        this.panel.contains(document.activeElement)
+      ) {
         return;
       }
 
@@ -331,8 +337,8 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
         // there isn't a focus target, one of two reasons:
         // #1 is the whole panel hidden? If so, schedule another check
         // #2 panel is visible but no tabbables exist, move focus to the panel
-        const panelVisibility = window.getComputedStyle(this.panel).visibility;
-        if (panelVisibility === 'hidden') {
+        const panelVisibility = window.getComputedStyle(this.panel).opacity;
+        if (panelVisibility === '0') {
           // #1
           this.updateFocus();
         } else {
@@ -348,7 +354,10 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
         }
       }
 
-      if (focusTarget != null) focusTarget.focus();
+      if (focusTarget != null) {
+        this.hasSetInitialFocus = true;
+        focusTarget.focus();
+      }
     });
   }
 
@@ -411,7 +420,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
     }
 
     if (this.args.repositionOnScroll) {
-      window.addEventListener('scroll', this.positionPopoverFixed);
+      window.addEventListener('scroll', this.positionPopoverFixed, true);
     }
 
     this.updateFocus();
@@ -420,9 +429,9 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   @action
   didUpdateRepositionOnScroll(): void {
     if (this.args.repositionOnScroll) {
-      window.addEventListener('scroll', this.positionPopoverFixed);
+      window.addEventListener('scroll', this.positionPopoverFixed, true);
     } else {
-      window.removeEventListener('scroll', this.positionPopoverFixed);
+      window.removeEventListener('scroll', this.positionPopoverFixed, true);
     }
   }
 
@@ -451,7 +460,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
 
   willDestroy(): void {
     super.willDestroy();
-    window.removeEventListener('scroll', this.positionPopoverFixed);
+    window.removeEventListener('scroll', this.positionPopoverFixed, true);
     cancel(this.respositionTimeout as ReturnType<typeof later>);
     cancel(this.closingTransitionTimeout as ReturnType<typeof later>);
     cancelAnimationFrame(this.closingTransitionAnimationFrame as number);
@@ -552,6 +561,13 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
     };
   }
 
+  get tabindex() {
+    if (this.ownFocus) {
+      return this.args.tabindex ?? '0';
+    }
+    return '-1';
+  }
+
   @action
   positionPopoverFixed(): void {
     this.positionPopover(true);

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

@@ -4,13 +4,13 @@
       class={{class-names
         (if (eq @size "l") "euiProgress__data--l")
         componentName="EuiProgressData"
-        color=(arg-or-default @color "secondary")
+        color=(arg-or-default @color "success")
       }}
     >
       {{#if (has-block "label")}}
-          <span class="euiProgress__label">
-            {{yield to="label"}}
-          </span>
+        <span class="euiProgress__label">
+          {{yield to="label"}}
+        </span>
       {{/if}}
       {{#if (or (has-block "valueText") @valueText)}}
         <span class="euiProgress__valueText {{@labelClasses}}">
@@ -27,24 +27,27 @@
     class={{class-names
       "euiProgress--native"
       componentName="EuiProgress"
-      size=(arg-or-default @size 'm')
-      position=(arg-or-default @position 'static')
-      color=(arg-or-default @color 'secondary')
+      size=(arg-or-default @size "m")
+      position=(arg-or-default @position "static")
+      color=(arg-or-default @color "success")
     }}
     max={{@max}}
     value={{@value}}
-    aria-hidden={{and (has-block "label") (or @valueText (has-block "valueText"))}}
+    aria-hidden={{and
+      (has-block "label")
+      (or @valueText (has-block "valueText"))
+    }}
     ...attributes
-  />
+  ></progress>
 {{else}}
   <div
     class={{class-names
       "euiProgress--indeterminate"
       componentName="EuiProgress"
-      size=(arg-or-default @size 'm')
-      position=(arg-or-default @position 'static')
-      color=(arg-or-default @color 'secondary')
+      size=(arg-or-default @size "m")
+      position=(arg-or-default @position "static")
+      color=(arg-or-default @color "success")
     }}
     ...attributes
-  />
+  ></div>
 {{/if}}

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

@@ -1,13 +1,16 @@
 {{#let
   (and (has-block "label") (not (arg-or-default @isFakeLabelBlock false)))
-  (arg-or-default @id (unique-id)) as |hasLabelBlock id|
+  (arg-or-default @id (unique-id))
+  as |hasLabelBlock id|
 }}
   {{#let
     (class-names
+      @containerClass
       (if (not (or hasLabelBlock @label)) "euiRadio--noLabel")
       (if @compressed "euiRadio--compressed")
       "euiRadio"
-    ) as |classes|
+    )
+    as |classes|
   }}
     <div class={{classes}}>
       <input
@@ -22,7 +25,10 @@
       />
       <div class="euiRadio__circle"></div>
       {{#if (or hasLabelBlock @label)}}
-        <label class="euiRadio__label" for={{id}}>
+        <label
+          class={{class-names "euiRadio__label" @labelProps.className}}
+          for={{id}}
+        >
           {{#if hasLabelBlock}}
             {{yield to="label"}}
           {{else}}

package/addon/components/eui-range/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"))
   (and (not (arg-or-default @isFakeMaxBlock false)) (has-block "max"))
   (and (not (arg-or-default @isFakeMinBlock false)) (has-block "min"))
   (and (not (arg-or-default @isFakeValueBlock false)) (has-block "value"))
@@ -38,8 +38,8 @@
           @isLoading={{and @showInputOnly @isLoading}}
           @isInvalid={{@isInvalid}}
           @autoSize={{not this.showInputOnly}}
-          @isFakePrependBlock={{hasPrepend}}
-          @isFakeAppendBlock={{hasAppend}}
+          @isPrependProvided={{hasPrepend}}
+          @isAppendProvided={{hasAppend}}
           ...attributes
           {{on
             "focus"
@@ -61,7 +61,10 @@
       </:input>
       <:content>
         <EuiRangeWrapper
-          class="euiRange"
+          class={{class-names
+            "euiRange"
+            (if this.showInput "euiRange--hasInput")
+          }}
           @fullWidth={{@fullWidth}}
           @compressed={{@compressed}}
         >
@@ -191,6 +194,8 @@
                 @isLoading={{and @showInputOnly @isLoading}}
                 @isInvalid={{@isInvalid}}
                 @autoSize={{not this.showInputOnly}}
+                @isPrependProvided={{hasPrepend}}
+                @isAppendProvided={{hasAppend}}
                 ...attributes
                 {{on
                   "focus"
@@ -203,7 +208,14 @@
                   (if this.canShowDropdown this.onInputBlur (optional @onBlur))
                 }}
                 {{on "input" this.handleOnChange}}
-              />
+              >
+                <:prepend as |classes|>
+                  {{yield classes to="prepend"}}
+                </:prepend>
+                <:append as |classes|>
+                  {{yield classes to="append"}}
+                </:append>
+              </EuiRangeInput>
             {{/if}}
           {{/if}}
         </EuiRangeWrapper>
@@ -211,7 +223,10 @@
     </EuiInputPopover>
   {{else}}
     <EuiRangeWrapper
-      class="euiRange"
+      class={{class-names
+        "euiRange"
+        (if this.showInput "euiRange--hasInput")
+      }}
       @fullWidth={{@fullWidth}}
       @compressed={{@compressed}}
     >
@@ -337,8 +352,8 @@
             @isLoading={{and @showInputOnly @isLoading}}
             @isInvalid={{@isInvalid}}
             @autoSize={{not this.showInputOnly}}
-            @isFakePrependBlock={{hasPrepend}}
-            @isFakeAppendBlock={{hasAppend}}
+            @isPrependProvided={{hasPrepend}}
+            @isAppendProvided={{hasAppend}}
             ...attributes
             {{on
               "focus"
@@ -349,9 +364,16 @@
               (if this.canShowDropdown this.onInputBlur (optional @onBlur))
             }}
             {{on "input" this.handleOnChange}}
-          />
+          >
+            <:prepend as |classes|>
+              {{yield classes to="prepend"}}
+            </:prepend>
+            <:append as |classes|>
+              {{yield classes to="append"}}
+            </:append>
+          </EuiRangeInput>
         {{/if}}
       {{/if}}
     </EuiRangeWrapper>
   {{/if}}
-{{/let}}
+{{/let}}

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

@@ -3,15 +3,14 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { uniqueId } from '../../helpers/unique-id';
 import { isWithinRange } from '../../utils/number';
-import { CommonArgs } from '../common';
 import { EuiRangeInputArgs } from '../eui-range-input/types';
 import { EuiRangeLevel } from '../eui-range-levels';
 import { EuiRangeTick } from '../eui-range-ticks';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { later } from '@ember/runloop';
+
 export interface EuiRangeArgs
-  extends CommonArgs,
-    Omit<EuiRangeInputArgs, 'onChange' | 'digitTolerance'> {
+  extends Omit<EuiRangeInputArgs, 'onChange' | 'digitTolerance'> {
   compressed?: boolean;
   readOnly?: boolean;
   fullWidth?: boolean;
@@ -111,7 +110,11 @@ export default class EuiRangeComponent extends Component<EuiRangeArgs> {
   }
 
   get showRangeTooltip(): boolean {
-    return this.showValue && !!String(this.args.value).length && this.args.value !== undefined;
+    return (
+      this.showValue &&
+      !!String(this.args.value).length &&
+      this.args.value !== undefined
+    );
   }
 
   @action

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

@@ -1,32 +1,38 @@
-<EuiFieldNumber
-  class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
-  name={{@name}}
-  min={{cast-to @min to="number"}}
-  max={{cast-to @max to="number"}}
-  @step={{@step}}
-  @value={{if (eq @value "") "" (cast-to @value to="number")}}
-  @disabled={{@disabled}}
-  @compressed={{@compressed}}
-  @fullWidth={{@fullWidth}}
-  @controlOnly={{@controlOnly}}
-  @isFakeAppendBlock={{@isFakeAppendBlock}}
-  @isFakePrependBlock={{@isFakePrependBlock}}
-  @isInvalid={{@isInvalid}}
-  @disable={{@disable}}
-  ...attributes
-  {{simple-style
-    (inline-styles
-      componentName="EuiRangeInput"
-      componentArgs=(hash
-        autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
+{{#let
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
+  as |hasAppend hasPrepend|
+}}
+  <EuiFieldNumber
+    class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
+    name={{@name}}
+    min={{cast-to @min to="number"}}
+    max={{cast-to @max to="number"}}
+    @step={{@step}}
+    @value={{if (eq @value "") "" (cast-to @value to="number")}}
+    @disabled={{@disabled}}
+    @compressed={{@compressed}}
+    @fullWidth={{@fullWidth}}
+    @controlOnly={{@controlOnly}}
+    @isPrependProvided={{hasAppend}}
+    @isAppendProvided={{hasPrepend}}
+    @isInvalid={{@isInvalid}}
+    @disable={{@disable}}
+    ...attributes
+    {{simple-style
+      (inline-styles
+        componentName="EuiRangeInput"
+        componentArgs=(hash
+          autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
+        )
       )
-    )
-  }}
->
-  <:prepend as |classes|>
-    {{yield classes to="prepend"}}
-  </:prepend>
-  <:append as |classes|>
-    {{yield classes to="append"}}
-  </:append>
-</EuiFieldNumber>
+    }}
+  >
+    <:prepend as |classes|>
+      {{yield classes to="prepend"}}
+    </:prepend>
+    <:append as |classes|>
+      {{yield classes to="append"}}
+    </:append>
+  </EuiFieldNumber>
+{{/let}}

package/addon/components/eui-range-input/types.ts

@@ -1,6 +1,7 @@
 import { EuiFieldNumberArgs } from '../eui-field-number/types';
 
-export interface EuiRangeInputArgs extends Omit<EuiFieldNumberArgs, 'max' | 'min' | 'value'> {
+export interface EuiRangeInputArgs
+  extends Omit<EuiFieldNumberArgs, 'max' | 'min' | 'value'> {
   autoSize?: boolean;
   digitTolerance: number;
   max: number;

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

@@ -2,7 +2,7 @@
   class={{class-names
     "euiRangeLevels"
     (if @showTicks "euiRangeLevels--hasTicks")
-    (if @compresses "euiRangeLevels--compressed")
+    (if @compressed "euiRangeLevels--compressed")
   }}
   {{did-insert this.validateLevels}}
   {{did-update this.validateLevels @levels}}
@@ -14,9 +14,9 @@
       class="euiRangeLevel euiRangeLevel--{{level.color}}"
       {{simple-style
         (inline-styles
-          componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min)
+          componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min trackWidth=@trackWidth)
         )
       }}
     ></span>
   {{/each}}
-</div>
+</div>

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

@@ -5,7 +5,7 @@
 >
   {{#each @tickSequence key="value" as |tickValue|}}
     {{#let
-      (get-range-tick @ticks tickValue @min @max this.percentageWidth) as |derivedState|
+      (get-range-tick @ticks tickValue @min @max this.percentageWidth @trackWidth) as |derivedState|
     }}
       <button
         type="button"
@@ -24,4 +24,4 @@
       </button>
     {{/let}}
   {{/each}}
-</div>
+</div>

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

@@ -1,8 +1,14 @@
 <div
-  class="euiRangeTrack {{if @disabled "euiRangeTrack--disabled"}}"
+  class={{class-names
+    "euiRangeTrack"
+    (if @disabled "euiRangeTrack--disabled")
+    (if @showTicks "euiRangeTrack--hasTicks")
+    (if (and @levels (gt @levels.length 0)) "euiRangeTrack--hasLevels")
+  }}
   style={{if this.derivedState.styles this.derivedState.styles}}
   ...attributes
   {{did-insert (fn this.validateValueIsInStep @max)}}
+  {{did-insert this.registerTrack}}
   {{did-update (fn this.validateValueIsInStep @max) @max}}
   {{did-update (fn this.validateValueIsInStep @max) @min}}
   {{did-update (fn this.validateValueIsInStep @max) @step}}
@@ -14,6 +20,7 @@
       @max={{@max}}
       @min={{@min}}
       @showTicks={{@showTicks}}
+      @trackWidth={{this.trackEl.clientWidth}}
     />
   {{/if}}
   {{#if this.derivedState.tickSequence}}
@@ -27,7 +34,8 @@
       @max={{@max}}
       @interval={{or @tickInterval @step}}
       @onChange={{@onChange}}
+      @trackWidth={{this.trackEl.clientWidth}}
     />
   {{/if}}
   {{yield}}
-</div>
+</div>

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

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { EuiRangeLevel, LEVEL_COLORS } from '../eui-range-levels';
 import { assert } from '@ember/debug';
 import { isEvenlyDivisibleBy } from '../../utils/number';
@@ -35,14 +36,28 @@ type Styling = {
 };
 
 export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs> {
+  @tracked
+  trackEl: HTMLElement | undefined;
+
+  @action
+  registerTrack(el: HTMLElement) {
+    this.trackEl = el;
+  }
+
   @action
   validateValueIsInStep(value: number): number {
     const { min, max, step } = this.args;
     if (value < min) {
-      assert(`The value of ${value} is lower than the min value of ${min}.`, false);
+      assert(
+        `The value of ${value} is lower than the min value of ${min}.`,
+        false
+      );
     }
     if (value > max) {
-      assert(`The value of ${value} is higher than the max value of ${max}.`, false);
+      assert(
+        `The value of ${value} is higher than the max value of ${max}.`,
+        false
+      );
     }
     // Error out if the value doesn't line up with the sequence of steps
     if (!isEvenlyDivisibleBy(value - min, step !== undefined ? step : 1)) {
@@ -95,7 +110,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
     // Error out if there are too many ticks to render
     if (ticks.length > 20) {
       assert(
-        `The number of ticks to render is too high (${ticks.length}), reduce the interval.`,
+        `The number of ticks to render is too high (${ticks.length}), increase the interval.`,
         true
       );
     }
@@ -105,7 +120,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
 
   get derivedState(): Styling {
     let tickSequence;
-    let styles;
+    let styles = '';
     const { showTicks, min, max, step, tickInterval, ticks } = this.args;
 
     if (showTicks) {
@@ -114,7 +129,9 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
       // Calculate if any extra margin should be added to the inputWrapper
       // because of longer tick labels on the ends
       const lengthOfMinLabel = String(tickSequence[0]).length;
-      const lenghtOfMaxLabel = String(tickSequence[tickSequence.length - 1]).length;
+      const lenghtOfMaxLabel = String(
+        tickSequence[tickSequence.length - 1]
+      ).length;
       const isLastTickTheMax = tickSequence[tickSequence.length - 1] === max;
       if (lengthOfMinLabel > 2) {
         styles = `margin-left: ${lengthOfMinLabel / 5}em`;
@@ -126,7 +143,7 @@ export default class EuiRangeTrackComponent extends Component<EuiRangeTrackArgs>
 
     return {
       tickSequence,
-      styles: htmlSafe(styles as string)
+      styles: htmlSafe(styles)
     };
   }
 }

package/addon/components/eui-show-for/index.hbs

@@ -0,0 +1,3 @@
+{{#if this.shouldShow}}
+  {{yield}}
+{{/if}}

package/addon/components/eui-show-for/index.ts

@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+import { throttle } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
+import { EuiBreakpointSize, getBreakpoint } from '../../utils/breakpoint';
+//@ts-ignore
+import { invokeHelper } from '@ember/helper';
+//@ts-ignore
+import { getValue } from '@glimmer/tracking/primitives/cache';
+import Helper from '@ember/component/helper';
+
+export class CurrentBreakPointHelper extends Helper {
+  @tracked currentBreakpoint: string | undefined;
+  functionToCallOnWindowResize: undefined | (() => void);
+
+  compute([sizes]: [EuiHideForBreakpoints[] | 'all' | 'none']) {
+    this.currentBreakpoint = getBreakpoint(
+      typeof window === 'undefined' ? -Infinity : window.innerWidth
+    );
+
+    this.setupListeners();
+
+    return (
+      sizes === 'all' ||
+      sizes.includes(this.currentBreakpoint as EuiBreakpointSize)
+    );
+  }
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.teardown();
+  }
+
+  setupListeners() {
+    this.functionToCallOnWindowResize = () => {
+      const fn = () => {
+        const newBreakpoint = getBreakpoint(window.innerWidth);
+        if (newBreakpoint !== this.currentBreakpoint) {
+          this.currentBreakpoint = newBreakpoint;
+        }
+      };
+      throttle(this, fn, 50);
+    };
+
+    window.addEventListener('resize', this.functionToCallOnWindowResize);
+  }
+
+  teardown() {
+    if (typeof this.functionToCallOnWindowResize === 'function') {
+      window.removeEventListener('resize', this.functionToCallOnWindowResize);
+      this.functionToCallOnWindowResize = undefined;
+    }
+  }
+}
+
+export type EuiHideForBreakpoints = EuiBreakpointSize;
+
+export interface EuiShowForArgs {
+  /**
+   * Required otherwise nothing ever gets returned
+   */
+  children: Component;
+  /**
+   * List of all the responsive sizes to hide the children for.
+   * Array of #EuiBreakpointSize
+   */
+  sizes: EuiHideForBreakpoints[] | 'all' | 'none';
+}
+
+export default class EuiShowForComponent extends Component<EuiShowForArgs> {
+  currentBreakpointHelper = invokeHelper(this, CurrentBreakPointHelper, () => {
+    return {
+      positional: [this.args.sizes]
+    };
+  });
+
+  get shouldShow() {
+    return getValue(this.currentBreakpointHelper);
+  }
+}