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

package/addon/components/common.ts

@@ -12,6 +12,7 @@ export type OneOf<T, K extends keyof T> = Omit<T, K> &
   { [k in K]: Pick<Required<T>, k> & { [k1 in Exclude<K, k>]?: never } }[K];
 
 export interface CommonArgs {
+  className?: string;
   'aria-label'?: string;
   'data-test-subj'?: string;
 }

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

@@ -1,96 +1,117 @@
-<div
-  class={{class-names
-    (if this.isOpen "euiAccordion-isOpen")
-    componentName="EuiAccordion"
-    paddingSize=this.paddingSize
-  }}
-  ...attributes
->
-  <div class={{class-names "euiAccordion__triggerWrapper" @triggerClassName}}>
-    <button
-      id={{this.buttonId}}
-      aria-controls={{@id}}
-      aria-expanded={{this.isOpen}}
-      class={{this.buttonClasses}}
-      type="button"
-      {{on "click" this.onToggle}}
-    >
-      {{#if this.hasArrowDisplay}}
-        <span
-          class={{concat
-            "euiAccordion__iconWrapper "
-            (if this.hasIconButton "euiAccordion__iconButton ")
+{{#let
+  (element (arg-or-default @element "div"))
+  (element this.buttonElement)
+  as |Element ButtonElement|
+}}
+  <Element
+    class={{class-names
+      (if this.isOpen "euiAccordion-isOpen")
+      componentName="EuiAccordion"
+    }}
+    ...attributes
+  >
+    <div class={{class-names "euiAccordion__triggerWrapper" @triggerClassName}}>
+      {{#if (eq this._arrowDisplay "left")}}
+        <EuiButtonIcon
+          @color="text"
+          @iconClasses={{class-names
+            "euiAccordion__iconButton"
+            (if this.isOpen "euiAccordion__iconButton-isOpen")
+            (if
+              (eq this._arrowDisplay "right") "euiAccordion__iconButton--right"
+            )
+            (if @arrowProps.className @arrowProps.className)
           }}
-        >
-          <EuiIcon
-            @iconClasses={{class-names
-              "euiAccordion__icon"
-              (if this.isOpen "euiAccordion__icon-isOpen")
-            }}
-            @type="arrowRight"
-            @size="m"
-          />
-        </span>
+          @iconType="arrowRight"
+          {{on "click" this.onToggle}}
+          aria-controls={{@id}}
+          aria-expanded={{this.isOpen}}
+          aria-labelledby={{this.buttonId}}
+          tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
+        />
       {{/if}}
-      <span class={{concat "euiIEFlexWrapFix " @buttonContentClassName}}>
-        {{yield to="buttonContent"}}
-      </span>
-    </button>
-    {{#if (and @extraAction (not this.isLoading))}}
-      <div class="euiAccordion__optionalAction">
-        {{@extraAction}}
-      </div>
-    {{else if this.isLoading}}
-      <div class="euiAccordion__optionalAction">
-        <EuiLoadingSpinner />
-      </div>
-    {{/if}}
-    {{#if this.hasIconButton}}
-      <button
+      <ButtonElement
+        type="button"
+        id={{arg-or-default this.buttonProps.id (unique-id)}}
+        class={{this.buttonClasses}}
         aria-controls={{@id}}
         aria-expanded={{this.isOpen}}
-        aria-labelledby={{this.buttonId}}
-        tabIndex={{-1}}
-        class={{concat
-          "euiAccordion__iconWrapper "
-          (if this.hasIconButton "euiAccordion__iconButton ")
-        }}
-        type="button"
+        aria-labelledby={{arg-or-default this.buttonProps.id (unique-id)}}
         {{on "click" this.onToggle}}
       >
-        <EuiIcon
-          @iconClasses={{class-names
-            "euiAccordion__icon"
-            (if this.isOpen "euiAccordion__icon-isOpen")
+        <span class={{this.buttonContentClasses}}>
+          {{yield to="buttonContent"}}
+        </span>
+      </ButtonElement>
+      {{#if (and @extraAction (not this.isLoading))}}
+        <div class="euiAccordion__optionalAction">
+          {{yield to="extraAction"}}
+        </div>
+      {{else if this.isLoading}}
+        <div class="euiAccordion__optionalAction">
+          <EuiLoadingSpinner />
+        </div>
+      {{/if}}
+      {{#if (eq this._arrowDisplay "right")}}
+        <EuiButtonIcon
+          @color="text"
+          class={{class-names
+            "euiAccordion__iconButton"
+            (if this.isOpen "euiAccordion__iconButton-isOpen")
+            (if
+              (eq this._arrowDisplay "right") "euiAccordion__iconButton--right"
+            )
+            (if @arrowProps.className @arrowProps.className)
           }}
-          @type="arrowRight"
-          @size="m"
+          @iconType="arrowRight"
+          {{on "click" this.onToggle}}
+          aria-controls={{@id}}
+          aria-expanded={{this.isOpen}}
+          aria-labelledby={{this.buttonId}}
+          tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
         />
-      </button>
-    {{/if}}
-  </div>
-  <div class="euiAccordion__childWrapper" style={{this.childContentStyle}} id={{@id}}>
+      {{/if}}
+    </div>
     <div
-      class={{class-names
-        (if this.isLoading " euiAccordion__children-isLoading")
-        @childClassName
-        paddingSize=this.paddingSize
-        componentName="EuiAccordion"
-      }}
+      class="euiAccordion__childWrapper"
+      style={{this.childContentStyle}}
+      id={{@id}}
+      {{did-insert (set this "childWrapper")}}
+      tabindex="-1"
+      role="region"
+      aria-labelledby={{this.buttonId}}
     >
-      {{#if (and this.isLoading this.isLoadingMessage)}}
-        <EuiLoadingSpinner class="euiAccordion__spinner" />
-        <span>
-          {{#if this.hasLoadingMessage}}
-            {{this.isLoadingMessage}}
-          {{else}}
-            {{! <EuiI18n @token="euiAccordion.isLoading" @default="Loading" /> }}
-            Loading...
-          {{/if}}
-        </span>
-      {{else}}
-        {{yield to="content"}}
-      {{/if}}
+      <div
+        class={{class-names
+          (if this.isLoading "euiAccordion__children-isLoading")
+          @childClassName
+        }}
+        {{did-insert
+          (queue (set this "childContent") this.setChildContentHeight)
+        }}
+        {{resize-observer onResize=this.setChildContentHeight}}
+      >
+        {{#if (and this.isLoading this.isLoadingMessage)}}
+          <EuiLoadingSpinner class="euiAccordion__spinner" />
+          <span>
+            {{#if this.hasLoadingMessage}}
+              {{this.isLoadingMessage}}
+            {{else}}
+              {{! <EuiI18n @token="euiAccordion.isLoading" @default="Loading" /> }}
+              Loading...
+            {{/if}}
+          </span>
+        {{else}}
+          <div
+            class={{class-names
+              componentName="EuiAccordion"
+              paddingSize=this.paddingSize
+            }}
+          >
+            {{yield to="content"}}
+          </div>
+        {{/if}}
+      </div>
     </div>
-  </div>
-</div>
+  </Element>
+{{/let}}

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

@@ -1,19 +1,33 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { uniqueId } from '../../helpers/unique-id';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { paddingMapping } from '../../utils/css-mappings/eui-accordion';
 import { htmlSafe } from '@ember/template';
+import { CommonArgs } from '../common';
 
 type EuiAccordionPaddingSize = keyof typeof paddingMapping;
 
 type AccordionArgs = {
   id: string;
+
+  element?: 'div' | 'fieldset';
   /**
    * Class that will apply to the trigger for the accordion.
    */
   buttonClassName?: string;
+
+  buttonProps?: CommonArgs;
+
+  /**
+   * Applied to the main button receiving the `onToggle` event.
+   * Anything other than the default `button` does not support removing the arrow display (for accessibility of focus).
+   */
+  buttonElement?: 'div' | 'legend' | 'button';
+  /**
+   * Extra props to pass to the EuiButtonIcon containing the arrow.
+   */
+  arrowProps?: 'iconType' | 'onClick' | 'aria-labelledby';
   /**
    * Class that will apply to the trigger content for the accordion.
    */
@@ -54,6 +68,8 @@ type AccordionArgs = {
    * Choose whether the loading message replaces the content. Customize the message by passing a node
    */
   isLoadingMessage?: boolean | Component;
+
+  isOpen?: boolean;
 };
 
 export default class EuiAccordionAccordionComponent extends Component<AccordionArgs> {
@@ -65,8 +81,8 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
   @argOrDefault('left') arrowDisplay!: AccordionArgs['arrowDisplay'];
 
   @tracked _opened;
-
-  buttonId: string = uniqueId();
+  @tracked childWrapper: HTMLDivElement | null = null;
+  @tracked childContent: HTMLDivElement | null = null;
 
   constructor(owner: unknown, args: AccordionArgs) {
     super(owner, args);
@@ -76,22 +92,24 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
       : this.args.initialIsOpen;
   }
 
-  get isOpen(): boolean {
-    return this.args.forceState
-      ? this.args.forceState === 'open'
-      : this._opened;
+  get buttonElement() {
+    return this.args.element === 'fieldset' ? 'legend' : 'button';
   }
 
-  get hasIconButton(): boolean | undefined {
-    return this.args.extraAction && this.arrowDisplay === 'right';
+  get buttonElementIsFocusable() {
+    return this.buttonElement === 'button';
   }
 
-  get hasArrowDisplay(): boolean {
-    return this.arrowDisplay !== 'none';
+  get _arrowDisplay() {
+    return this.arrowDisplay === 'none' && !this.buttonElementIsFocusable
+      ? 'left'
+      : this.arrowDisplay;
   }
 
-  get buttonReverse(): boolean {
-    return !this.args.extraAction && this.arrowDisplay === 'right';
+  get isOpen(): boolean {
+    return this.args.forceState
+      ? this.args.forceState === 'open'
+      : this._opened;
   }
 
   get hasLoadingMessage(): boolean {
@@ -101,23 +119,44 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
   get buttonClasses(): string {
     return [
       'euiAccordion__button',
-      this.buttonReverse ? 'euiAccordion__buttonReverse' : '',
-      this.args.buttonClassName
+      this.args.buttonClassName,
+      this.args.buttonProps?.className
+    ].join(' ');
+  }
+
+  get buttonContentClasses(): string {
+    return [
+      'euiAccordion__buttonContent',
+      this.args.buttonContentClassName
     ].join(' ');
   }
 
   get childContentStyle(): string | ReturnType<typeof htmlSafe> {
-    return this.isOpen ? '' : htmlSafe(`height: 0px;`);
+    return this._opened ? '' : htmlSafe(`height: 0px;`);
   }
 
+  setChildContentHeight = () => {
+    const { forceState } = this.args;
+    requestAnimationFrame(() => {
+      const height =
+        this.childContent && (forceState ? forceState === 'open' : this._opened)
+          ? this.childContent.clientHeight
+          : 0;
+      this.childWrapper &&
+        this.childWrapper.setAttribute('style', `height: ${height}px`);
+    });
+  };
+
   @action
   onToggle(): void {
     if (this.args.forceState) {
-      this.args.onToggle &&
-        this.args.onToggle(this.args.forceState === 'open' ? false : true);
+      this.args.onToggle?.(this.args.forceState === 'open' ? false : true);
     } else {
       this._opened = !this._opened;
-      this.args.onToggle && this.args.onToggle(this._opened);
+      if (this._opened && this.childWrapper) {
+        this.childWrapper.focus();
+      }
+      this.args.onToggle?.(this._opened);
     }
   }
 }

package/addon/components/eui-auto-sizer/index.hbs

@@ -0,0 +1,3 @@
+<div {{did-insert this.setRef}} {{style this.style.outerStyle}} ...attributes>
+  {{yield this.style.childStyle}}
+</div>

package/addon/components/eui-auto-sizer/index.ts

@@ -0,0 +1,175 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+//@ts-ignore
+import createDetectElementResize from '../../utils/detect-element-resize';
+
+type Size = {
+  height: number;
+  width: number;
+};
+
+interface EuiAutoSizerComponentArgs {
+  /** Function responsible for rendering children.*/
+
+  /** Optional custom CSS class name to attach to root AutoSizer element.  */
+  className?: string;
+
+  /** Default height to use for initial render; useful for SSR */
+  defaultHeight?: number;
+
+  /** Default width to use for initial render; useful for SSR */
+  defaultWidth?: number;
+
+  /** Disable dynamic :height property */
+  disableHeight: boolean;
+
+  /** Disable dynamic :width property */
+  disableWidth: boolean;
+
+  /** Nonce of the inlined stylesheet for Content Security Policy */
+  nonce?: string;
+
+  /** Callback to be invoked on-resize */
+  onResize: (size: Size) => void;
+
+  /** Optional inline style */
+  style?: Record<string, string>;
+}
+
+type ResizeHandler = (element: HTMLElement, onResize: () => void) => void;
+
+type DetectElementResize = {
+  addResizeListener: ResizeHandler;
+  removeResizeListener: ResizeHandler;
+};
+
+type DynamicStyle = {
+  outerStyle: {
+    height?: number | string;
+    width?: number | string;
+    overflow?: string;
+  };
+  childStyle?: {
+    height?: number | string;
+    width?: number | string;
+  };
+};
+export default class EuiAutoSizerComponent extends Component<EuiAutoSizerComponentArgs> {
+  _autoSizer?: HTMLElement;
+  _parentNode?: HTMLElement;
+  _window?: any; // uses any instead of Window because Flow doesn't have window type
+  _detectElementResize?: DetectElementResize;
+
+  @tracked height: number | undefined;
+  @tracked width: number | undefined;
+
+  get disableHeight() {
+    return this.args.disableHeight ?? false;
+  }
+
+  get disableWidth() {
+    return this.args.disableWidth ?? false;
+  }
+
+  get style() {
+    let style: DynamicStyle = {
+      outerStyle: { overflow: 'visible' },
+      childStyle: {}
+    };
+    if (!this.disableHeight) {
+      style.outerStyle.height = `0px`;
+      if (style.childStyle) {
+        style.childStyle.height = `${this.height}px`;
+      }
+    }
+
+    if (!this.disableWidth) {
+      style.outerStyle.width = `0px`;
+      if (style.childStyle) {
+        style.childStyle.width = `${this.width}px`;
+      }
+    }
+
+    return style;
+  }
+
+  setup() {
+    const { nonce } = this.args;
+    if (
+      this._autoSizer &&
+      this._autoSizer.parentNode &&
+      this._autoSizer.parentNode.ownerDocument &&
+      this._autoSizer.parentNode.ownerDocument.defaultView &&
+      this._autoSizer.parentNode instanceof
+        this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement
+    ) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+      this._window = this._autoSizer.parentNode.ownerDocument.defaultView;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      this._detectElementResize = createDetectElementResize(
+        nonce,
+        this._window
+      );
+      //@ts-ignore
+      this._detectElementResize.addResizeListener(
+        this._parentNode,
+        this._onResize
+      );
+
+      this._onResize();
+    }
+  }
+
+  _onResize = () => {
+    const { disableHeight, disableWidth } = this;
+
+    if (this._parentNode) {
+      // Guard against AutoSizer component being removed from the DOM immediately after being added.
+      // This can result in invalid style values which can result in NaN values if we don't handle them.
+      // See issue #150 for more context.
+
+      const height = this._parentNode.offsetHeight || 0;
+      const width = this._parentNode.offsetWidth || 0;
+
+      const win = this._window || window;
+      const style = win.getComputedStyle(this._parentNode) || {};
+      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
+      const paddingRight = parseInt(style.paddingRight, 10) || 0;
+      const paddingTop = parseInt(style.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;
+
+      const newHeight = height - paddingTop - paddingBottom;
+      const newWidth = width - paddingLeft - paddingRight;
+
+      if (
+        (!disableHeight && this.height !== newHeight) ||
+        (!disableWidth && this.width !== newWidth)
+      ) {
+        this.height = height - paddingTop - paddingBottom;
+        this.width = width - paddingLeft - paddingRight;
+
+        this.args.onResize?.({ height, width });
+      }
+    }
+  };
+
+  setRef = (ele: HTMLElement) => {
+    this._autoSizer = ele;
+    this.setup();
+  };
+
+  willDestroy(): void {
+    super.willDestroy();
+    if (this._detectElementResize && this._parentNode) {
+      this._detectElementResize.removeResizeListener(
+        this._parentNode,
+        this._onResize
+      );
+    }
+  }
+}

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

@@ -7,9 +7,11 @@
       iconColor=@iconColor
       iconSize=@iconSize
       iconType=@iconType
+      imageUrl=@imageUrl
+      initials=@initials
     )
-    background-image=(if @imageUrl @imageUrl "none")
-  ) as |inlineStyles|
+  )
+  as |inlineStyles|
 }}
   <div
     class={{class-names
@@ -19,8 +21,9 @@
       size=(arg-or-default @size "m")
       type=(arg-or-default @type "user")
     }}
-    aria-label={{@name}}
+    aria-label={{if @isDisabled undefined @name}}
     title={{@name}}
+    role={{if @isDisabled "presentation" "img"}}
     ...attributes
     {{simple-style inlineStyles}}
   >
@@ -34,6 +37,7 @@
         @size={{or @iconSize @size}}
         @type={{@iconType}}
         aria-label={{@name}}
+        role={{if @isDisabled "presentation" "img"}}
         @color={{or
           @iconColor
           (if (eq @iconColor null) @iconColor inlineStyles.color)

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

@@ -1,3 +1,4 @@
+
 {{#if (and (or @onClick @href) (not @iconType))}}
   {{#if @onClick}}
     <button
@@ -95,18 +96,23 @@
           disabled={{@isDisabled}}
           title={{@iconOnClickAriaLabel}}
           tabindex={{@closeButtonProps.tabIndex}}
+          data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}
           {{on "click" (optional @iconOnClick)}}
         >
           <EuiIcon
-            @iconClasses={{class-names "euiBadge__icon" @closeButtonProps.iconClasses}}
+            @color="inherit"
+            @iconClasses={{class-names
+              "euiBadge__icon"
+              @closeButtonProps.iconClasses
+            }}
             @type={{@iconType}}
-            data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}
             @size={{if (has-block) "s" "m"}}
           />
         </button>
         {{! tempalte-lint-enable}}
       {{else}}
         <EuiIcon
+          @color="inherit"
           @type={{@iconType}}
           @size={{if (has-block) "s" "m"}}
           @iconClasses="euiBadge__icon"
@@ -136,4 +142,4 @@
       </span>
     </span>
   </span>
-{{/if}}
+{{/if}}