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

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

@@ -67,7 +67,7 @@ export default class EuiComboBoxComponent extends Component<EuiComboBoxArgs> {
   get options(): any[] {
     if (this._resolvedOptions) return toPlainArray(this._resolvedOptions);
     if (this.args.options) {
-      return toPlainArray(this.args.options as any[]);
+      return toPlainArray(this.args.options);
     } else {
       return [];
     }

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

@@ -1,77 +1,83 @@
-<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={{@iconColor}} />
-      </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 @isVerticalLayout "column" "row"}}
-            >
-              {{#each @actions as |action|}}
-                <EuiFlexItem @grow={{false}}>
-                  {{action}}
-                </EuiFlexItem>
-              {{/each}}
-            </EuiFlexGroup>
-          {{else}}
-            <EuiSpacer size="l" />
-            {{#each @actions as |action|}}
-              {{action}}
-            {{/each}}
-          {{/if}}
+{{#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>
-  </div>
 
-  {{#if (has-block "footer")}}
-    <div class="euiEmptyPrompt__footer">
-      {{yield to="footer"}}
-    </div>
-  {{else}}
-    <div class="euiEmptyPrompt__footer">
-      {{@footer}}
-    </div>
-  {{/if}}
-</EuiPanel>
+    {{#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/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-flyout/index.ts

@@ -119,7 +119,7 @@ export const SIZES = keysOf(sizeMapping);
 export type EuiFlyoutSize = typeof SIZES[number];
 
 function isEuiFlyoutSizeNamed(value: any): value is EuiFlyoutSize {
-  return SIZES.includes(value as any);
+  return SIZES.includes(value);
 }
 
 export default class EuiCollapsibleNavComponent extends Component<EuiCollapsibleNavArgs> {

package/addon/components/eui-form-control-layout-custom-icon/types.ts

@@ -5,5 +5,7 @@ export type EuiFormControlLayoutCustomIconArgs = CommonArgs &
   ExclusiveUnion<Omit<HTMLButtonElement, 'type'>, HTMLSpanElement> & {
     type: IconType;
     size?: EuiIconArgs['size'];
-    iconRef?: string | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
+    iconRef?:
+      | string
+      | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
   };

package/addon/components/eui-form-control-layout-icons/types.ts

@@ -5,7 +5,10 @@ import { EuiFormControlLayoutClearButtonArgs } from '../eui-form-control-layout-
 
 export const ICON_SIDES: ['left', 'right'] = ['left', 'right'];
 
-type IconShape = DistributiveOmit<EuiFormControlLayoutCustomIconArgs, 'type' | 'iconRef'> & {
+type IconShape = DistributiveOmit<
+  EuiFormControlLayoutCustomIconArgs,
+  'type' | 'iconRef'
+> & {
   type: IconType;
   side?: typeof ICON_SIDES[number];
   ref?: EuiFormControlLayoutCustomIconArgs['iconRef'];

package/addon/components/eui-global-toast-list/index.ts

@@ -68,15 +68,13 @@ export default class EuiGlobalToastList extends GlimmerComponent<GlobalToastList
       this.listElement.scrollTop = position + distanceToDestination * 0.25;
 
       if (this.isScrollingToBottom) {
-        this.isScrollingAnimationFrame = window.requestAnimationFrame(
-          scrollToBottom
-        );
+        this.isScrollingAnimationFrame =
+          window.requestAnimationFrame(scrollToBottom);
       }
     };
 
-    this.startScrollingAnimationFrame = window.requestAnimationFrame(
-      scrollToBottom
-    );
+    this.startScrollingAnimationFrame =
+      window.requestAnimationFrame(scrollToBottom);
   }
 
   @action
@@ -188,6 +186,7 @@ export default class EuiGlobalToastList extends GlimmerComponent<GlobalToastList
   }
 
   willDestroy(): void {
+    super.willDestroy();
     if (this.isScrollingAnimationFrame !== 0) {
       window.cancelAnimationFrame(this.isScrollingAnimationFrame);
     }

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

@@ -56,8 +56,13 @@ export default class EuiImage extends GlimmerComponent<ImageArgs> {
 
   get sizeStyle(): ReturnType<typeof htmlSafe> | string {
     const size = this.args.size;
-    if ((typeof size === 'string' || typeof size === 'number') && !this.sizeClass) {
-      return htmlSafe(`max-height:${this.args.size}px; max-width:${this.args.size}px; width:auto;`);
+    if (
+      (typeof size === 'string' || typeof size === 'number') &&
+      !this.sizeClass
+    ) {
+      return htmlSafe(
+        `max-height:${this.args.size}px; max-width:${this.args.size}px; width:auto;`
+      );
     }
     return '';
   }

package/addon/components/eui-loading-logo/index.hbs

@@ -0,0 +1,14 @@
+<span
+  class={{class-names
+    "euiLoadingLogo "
+    (if
+      (eq @size "m")
+      "euiLoadingLogo--medium"
+      (if (eq @size "l") "euiLoadingLogo--large" "euiLoadingLogo--xLarge")
+    )
+  }}
+>
+  <span className="euiLoadingLogo__icon">
+    <EuiIcon @type={{arg-or-default @logo "logoKibana"}} @size={{arg-or-default @size "m"}} />
+  </span>
+</span>

package/addon/components/eui-page-header/index.hbs

@@ -12,9 +12,9 @@
       @alignItems (concat "euiPageHeader--" @alignItems) "euiPageHeader--center"
     )
     (if
-      @restrictWidth
-      "euiPageHeader--restrictWidth-custom"
+      (eq @restrictWidth true)
       "euiPageHeader--restrictWidth-default"
+      (if (not-eq @restrictWidth false) "euiPageHeader--restrictWidth-custom")
     )
     componentName="EuiPageHeader"
     paddingSize=@paddingSize

package/addon/components/eui-page-header-content/index.ts

@@ -6,7 +6,7 @@ export const TEMPLATES = [
   'default',
   'centeredBody',
   'centeredContent',
-  'empty',
+  'empty'
 ] as const;
 
 export type EuiPageTemplateProps = {

package/addon/components/eui-page-template/index.ts

@@ -25,7 +25,7 @@ export const TEMPLATES = [
   'default',
   'centeredBody',
   'centeredContent',
-  'empty',
+  'empty'
 ] as const;
 
 export type EuiPageTemplateProps = {

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

@@ -13,7 +13,8 @@ export const insertPositions: InsertPositionsMap = {
   before: 'beforebegin'
 };
 
-export const INSERT_POSITIONS: EuiPortalInsertPosition[] = keysOf(insertPositions);
+export const INSERT_POSITIONS: EuiPortalInsertPosition[] =
+  keysOf(insertPositions);
 
 type EuiPortalInsertPosition = keyof typeof insertPositions;
 

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

@@ -4,7 +4,12 @@ import { assert } from '@ember/debug';
 
 export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
 
-export const LEVEL_COLORS: EuiRangeLevelColor[] = ['primary', 'success', 'warning', 'danger'];
+export const LEVEL_COLORS: EuiRangeLevelColor[] = [
+  'primary',
+  'success',
+  'warning',
+  'danger'
+];
 
 export interface EuiRangeLevel {
   min: number;
@@ -26,10 +31,16 @@ export default class EuiRangeLevelsComponent extends Component<EuiRangeLevelsArg
     const { min, max } = this.args;
     this.args.levels?.forEach?.((level) => {
       if (level.min < min) {
-        assert(`The level min of ${level.min} is lower than the min value of ${min}.`, true);
+        assert(
+          `The level min of ${level.min} is lower than the min value of ${min}.`,
+          true
+        );
       }
       if (level.max > max) {
-        assert(`The level max of ${level.max} is higher than the max value of ${max}.`, true);
+        assert(
+          `The level max of ${level.max} is higher than the max value of ${max}.`,
+          true
+        );
       }
     });
   }

package/addon/components/eui-split-panel/inner/index.hbs

@@ -4,7 +4,8 @@
   @color={{arg-or-default @color "transparent"}}
   @borderRadius={{arg-or-default @borderRadius "none"}}
   @hasBorder={{arg-or-default @hasBorder false}}
+  @paddingSize={{@paddingSize}}
   ...attributes
 >
-	{{yield}}
+  {{yield}}
 </EuiPanel>

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

@@ -1,74 +1,63 @@
 {{#let (arg-or-default @id (unique-id)) as |id|}}
-  {{#let
-    (eq @selectedTabId id)
-    (fn @onClick id)
-    (fn (optional @focusFn) id)
-    as |isSelected onClick focusFn|
-  }}
-    {{#if (and @href (not @disabled))}}
-      <a
-        id={{id}}
-        role="tab"
-        aria-selected={{isSelected}}
-        class={{class-names
-          "euiTab"
-          (if isSelected "euiTab-isSelected")
-          (if @disabled "euiTab-isDisabled")
-        }}
-        href={{@href}}
-        disabled={{@disabled}}
-        ...attributes
-        {{on "click" onClick}}
-        {{this.focusTabModifier @selectedTabId @disabled focusFn}}
-      >
-        {{#if (has-block "prepend")}}
-          <span className="euiTab__prepend">
-            {{yield to="prepend"}}
-          </span>
-        {{/if}}
-
-        <span class="euiTab__content">
-          {{yield}}
+  {{#if (and @href (not @disabled))}}
+    <a
+      id={{id}}
+      role="tab"
+      aria-selected={{not (not @isSelected)}}
+      class={{class-names
+        "euiTab"
+        (if @isSelected "euiTab-isSelected")
+        (if @disabled "euiTab-isDisabled")
+      }}
+      href={{@href}}
+      disabled={{@disabled}}
+      ...attributes
+    >
+      {{#if (has-block "prepend")}}
+        <span className="euiTab__prepend">
+          {{yield to="prepend"}}
         </span>
+      {{/if}}
 
-        {{#if (has-block "append")}}
-          <span className="euiTab__append">
-            {{yield to="append"}}
-          </span>
-        {{/if}}
-      </a>
-    {{else}}
-      <button
-        id={{id}}
-        role="tab"
-        aria-selected={{isSelected}}
-        type="button"
-        class={{class-names
-          "euiTab"
-          (if isSelected "euiTab-isSelected")
-          (if @disabled "euiTab-isDisabled")
-        }}
-        disabled={{@disabled}}
-        ...attributes
-        {{on "click" onClick}}
-        {{this.focusTabModifier @selectedTabId @disabled focusFn}}
-      >
-        {{#if (has-block "prepend")}}
-          <span className="euiTab__prepend">
-            {{yield to="prepend"}}
-          </span>
-        {{/if}}
+      <span class="euiTab__content">
+        {{yield}}
+      </span>
 
-        <span class="euiTab__content">
-          {{yield}}
+      {{#if (has-block "append")}}
+        <span className="euiTab__append">
+          {{yield to="append"}}
+        </span>
+      {{/if}}
+    </a>
+  {{else}}
+    <button
+      id={{id}}
+      role="tab"
+      aria-selected={{not (not @isSelected)}}
+      type="button"
+      class={{class-names
+        "euiTab"
+        (if @isSelected "euiTab-isSelected")
+        (if @disabled "euiTab-isDisabled")
+      }}
+      disabled={{@disabled}}
+      ...attributes
+    >
+      {{#if (has-block "prepend")}}
+        <span className="euiTab__prepend">
+          {{yield to="prepend"}}
         </span>
+      {{/if}}
 
-        {{#if (has-block "append")}}
-          <span className="euiTab__append">
-            {{yield to="append"}}
-          </span>
-        {{/if}}
-      </button>
-    {{/if}}
-  {{/let}}
-{{/let}}
+      <span class="euiTab__content">
+        {{yield}}
+      </span>
+
+      {{#if (has-block "append")}}
+        <span className="euiTab__append">
+          {{yield to="append"}}
+        </span>
+      {{/if}}
+    </button>
+  {{/if}}
+{{/let}}

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

@@ -4,18 +4,17 @@ import { modifier } from 'ember-modifier';
 
 const focusTabModifier = modifier(function focusTab(
   _element: HTMLElement,
-  [selectedTabId, isDisabled, focusFn]: [
+  [tabId, selectedTabId, isDisabled, focusFn, onFocusFn]: [
+    string | number,
     Tab,
     boolean,
-    (...args: unknown[]) => void,
-    boolean
+    (...args: unknown[]) => any,
+    (...args: unknown[]) => any
   ]
 ) {
   if (selectedTabId === undefined && !isDisabled) {
-    const fn = () => {
-      focusFn();
-    };
-    scheduleOnce('afterRender', null, fn);
+    scheduleOnce('afterRender', null, focusFn, tabId);
+    scheduleOnce('afterRender', null, onFocusFn, tabId);
   }
 });
 

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

@@ -1,7 +1,6 @@
 {{#let
-  (use-state (get-tab-id @selectedTab))
   (if (eq @display "condensed") false (arg-or-default @bottomBorder true))
-  as |selectedTab bottomBorder|
+  as |bottomBorder|
 }}
   <div
     role="tablist"
@@ -15,13 +14,6 @@
     }}
     ...attributes
   >
-    {{yield
-      (component
-        "eui-tab"
-        onClick=selectedTab.setState
-        selectedTabId=selectedTab.value
-        focusFn=selectedTab.setState
-      )
-    }}
+    {{yield}}
   </div>
 {{/let}}

package/addon/helpers/arg-or-default.ts

@@ -8,7 +8,10 @@ import { assert } from '@ember/debug';
  * @property {unknown} 0 - value to be returned if it's defined
  * @property {unknown} 1 - default value to be returned if value is undefined
  */
-export function argOrDefault([value, defaultValue]: [unknown, unknown]): unknown {
+export function argOrDefault([value, defaultValue]: [
+  unknown,
+  unknown
+]): unknown {
   assert('`defaultValue` must be provided', defaultValue !== undefined);
   return value !== undefined ? value : defaultValue;
 }

package/addon/helpers/eui-palette.ts

@@ -32,6 +32,9 @@ export const PALETTES = {
 
 export type palette_keys = keyof typeof PALETTES;
 
-export default helper(function ([paletteName, steps]: [palette_keys, number]): EuiPalette {
+export default helper(function ([paletteName, steps]: [
+  palette_keys,
+  number
+]): EuiPalette {
   return PALETTES[paletteName](steps);
 });

package/addon/helpers/get-tab-id.ts

@@ -1,7 +1,10 @@
 import { helper } from '@ember/component/helper';
 import { assert } from '@ember/debug';
 
-export function getTabId([tabOrId]: [Tab | string | number]): string | number | undefined {
+export function getTabId([tabOrId]: [Tab | string | number]):
+  | string
+  | number
+  | undefined {
   if (tabOrId === undefined) {
     return;
   }
@@ -10,7 +13,10 @@ export function getTabId([tabOrId]: [Tab | string | number]): string | number |
     return tabOrId;
   }
 
-  assert('The passed `tab` object needs to have the `id` property', tabOrId.id !== undefined);
+  assert(
+    'The passed `tab` object needs to have the `id` property',
+    tabOrId.id !== undefined
+  );
   return tabOrId.id;
 }
 

package/addon/helpers/hex-to-rgb.ts

@@ -25,7 +25,10 @@ import { helper } from '@ember/component/helper';
 export function hexToRgb(hex: string): rgbDef {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, (_m, r1, g1, b1) => r1 + r1 + g1 + g1 + b1 + b1);
+  hex = hex.replace(
+    shorthandRegex,
+    (_m, r1, g1, b1) => r1 + r1 + g1 + g1 + b1 + b1
+  );
 
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
 

package/addon/helpers/inline-styles.ts

@@ -16,12 +16,16 @@ export function inlineStyles(_: unknown, params: InlineStylesParams) {
   let componentStyles = {};
 
   if (componentName) {
-    assert(`Could not find component ${componentName} in cssMappings.`, cssMappings[componentName]);
+    assert(
+      `Could not find component ${componentName} in cssMappings.`,
+      cssMappings[componentName]
+    );
     assert(
       `Could not find inlineStyles in ${componentName}'s cssMapping.`,
       cssMappings[componentName].inlineStyles
     );
-    componentStyles = cssMappings[componentName].inlineStyles?.(componentArgs) || {};
+    componentStyles =
+      cssMappings[componentName].inlineStyles?.(componentArgs) || {};
   }
 
   let finalProperties: FinalProperties = {
@@ -30,7 +34,10 @@ export function inlineStyles(_: unknown, params: InlineStylesParams) {
   };
 
   for (let property in finalProperties) {
-    if (property === 'background-image' && finalProperties[property] !== 'none') {
+    if (
+      property === 'background-image' &&
+      finalProperties[property] !== 'none'
+    ) {
       finalProperties[property] = `url(${finalProperties[property]})`;
     } else {
       finalProperties[property] = `${finalProperties[property]}`;

package/addon/helpers/is-within-number.ts

@@ -7,7 +7,10 @@ type Comparator = {
   value: number | string;
 };
 
-export function isWithinRange(_: unknown[], { min, max, value }: Comparator): boolean {
+export function isWithinRange(
+  _: unknown[],
+  { min, max, value }: Comparator
+): boolean {
   return isWithin(min, max, value);
 }
 

package/addon/helpers/starts-with.ts

@@ -1,6 +1,8 @@
 import { helper } from '@ember/component/helper';
 
-export function startsWith([needle, word]: [string, string] /*, hash*/): boolean {
+export function startsWith(
+  [needle, word]: [string, string] /*, hash*/
+): boolean {
   return word?.startsWith(needle) || false;
 }