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

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

@@ -1,16 +1,18 @@
-<div class="euiHealth" ...attributes>
+<div
+  class={{class-names
+    componentName="EuiHealth"
+    textSize=(arg-or-default @textSize "m")
+  }}
+  ...attributes
+>
   <div
-    class="
-      euiFlexGroup
-      euiFlexGroup--gutterExtraSmall
-      euiFlexGroup--alignItemsCenter
-      euiFlexGroup--directionRow"
+    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
   >
-     <div class="euiFlexItem euiFlexItem--flexGrowZero">
-       <EuiIcon @type="dot" @color={{@color}} />
-     </div>
-     <div class="euiFlexItem euiFlexItem--flexGrowZero">
-        {{yield}}
-     </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <EuiIcon @type="dot" @color={{@color}} />
+    </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      {{yield}}
+    </div>
   </div>
-</div>
+</div>

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

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

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

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { EuiBreakpointSize } from '../../utils/breakpoint';
+import { CurrentBreakPointHelper } from '../eui-show-for';
+//@ts-ignore
+import { invokeHelper } from '@ember/helper';
+//@ts-ignore
+import { getValue } from '@glimmer/tracking/primitives/cache';
+
+export type EuiHideForBreakpoints = EuiBreakpointSize;
+
+export interface EuiHideForArgs {
+  /**
+   * 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 EuiHideForComponent extends Component<EuiHideForArgs> {
+  currentBreakpointHelper = invokeHelper(this, CurrentBreakPointHelper, () => {
+    return {
+      positional: [this.args.sizes]
+    };
+  });
+
+  get shouldShow() {
+    return !getValue(this.currentBreakpointHelper);
+  }
+}

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

@@ -6,7 +6,7 @@
       class={{class-names
         @iconClasses
         this.optionalColorClass
-        (if this.isAppIcon "euiIcon--app")
+        (if (and this.isAppIcon (not this.appIconHasColor)) "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
@@ -16,6 +16,7 @@
       aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
       tabindex={{this.tabIndex}}
       style={{this.optionalCustomStyles}}
+      color={{@color}}
       ...attributes
     />
   {{/let}}
@@ -26,10 +27,11 @@
       class={{class-names
         @iconClasses
         this.optionalColorClass
-        (if this.isAppIcon "euiIcon--app")
+        (if (and this.isAppIcon (not this.appIconHasColor)) "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
+      color={{@color}}
       alt={{if @title @title}}
       tabIndex={{@tabIndex}}
       ...attributes
@@ -40,10 +42,11 @@
       class=(class-names
         @iconClasses
         this.optionalColorClass
-        (if this.isAppIcon "euiIcon--app")
+        (if (and this.isAppIcon (not this.appIconHasColor)) "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       )
+      color=@color
       role="image"
       aria-hidden=(if this.isAriaHidden "true")
       aria-label=(if @aria-label @aria-label this.titleId)

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

@@ -129,6 +129,10 @@ export default class EuiIcon extends Component<EuiIconArgs> {
     );
   }
 
+  get appIconHasColor() {
+    return this.args.color && this.args.color !== 'default';
+  }
+
   get focusable(): string {
     const { tabIndex } = this.args;
     return tabIndex == null || tabIndex === -1 ? 'false' : 'true';

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

@@ -1,12 +1,16 @@
-<figure
-  class={{class-names
-    (unless (eq @hasShadow false) "euiImage--hasShadow")
-    componentName="EuiImage"
-    size=@size
-  }}
-  ...attributes
->
-  {{#if @allowFullScreen}}
+{{#if @allowFullScreen}}
+  <figure
+    class={{class-names
+      "euiImage--allowFullScreen"
+      (unless (eq @hasShadow false) "euiImage--hasShadow")
+      float=@float
+      margin=@margin
+      componentName="EuiImage"
+      size=@size
+    }}
+    ...attributes
+  >
+
     <button
       class="euiImage__button"
       type="button"
@@ -15,43 +19,77 @@
       {{on "click" this.toggleFullscreen}}
     >
       <img
-        src={{@url}}
+        src={{or @src @url}}
         class="euiImage__img"
         style={{this.sizeStyle}}
         alt={{@alt}}
       />
       <EuiIcon
-        class="euiImage__icon"
+        @iconClasses="euiImage__icon"
         @type="fullScreen"
-        @color={{if (not (eq @fullScreenIconColor "dark")) "ghost"}}
+        @color={{if (not-eq @fullScreenIconColor "dark") "ghost"}}
       />
     </button>
-  {{else}}
+
+    {{#if @caption}}
+      <figcaption class="euiImage__caption">
+        {{@caption}}
+      </figcaption>
+    {{/if}}
+  </figure>
+
+{{else}}
+
+  <figure
+    class={{class-names
+      (unless (eq @hasShadow false) "euiImage--hasShadow")
+      float=@float
+      margin=@margin
+      componentName="EuiImage"
+      size=@size
+    }}
+    ...attributes
+  >
+
     <img
-      src={{@url}}
+      src={{or @src @url}}
       class="euiImage__img"
       style={{this.sizeStyle}}
       alt={{@alt}}
     />
-  {{/if}}
-  {{#if @caption}}
-    <figcaption class="euiImage__caption">
-      {{@caption}}
-    </figcaption>
-  {{/if}}
-</figure>
+
+    {{#if @caption}}
+      <figcaption class="euiImage__caption">
+        {{@caption}}
+      </figcaption>
+    {{/if}}
+  </figure>
+
+{{/if}}
+
 {{#if this.isFullscreen}}
   <EuiOverlayMask
     @headerZindexLocation="above"
-    {{on "click" this.toggleFullscreen}}
+    @onClick={{this.toggleFullscreen}}
   >
-    <figure class="euiImage euiImage-isFullScreen">
+    <figure
+      class="euiImage euiImage-isFullScreen"
+      {{focus-trap focusTrapOptions=(hash clickOutsideDeactivates=true)}}
+    >
       <button
         class="euiImage__button"
         type="button"
         {{on "click" this.toggleFullscreen}}
+        {{on-key
+          "Escape"
+          (prevent-default (stop-propagation this.toggleFullscreen))
+        }}
       >
-        <img class="euiImage-isFullScreen__img" src={{@url}} alt={{@alt}} />
+        <img
+          class="euiImage-isFullScreen__img"
+          src={{or @src @url}}
+          alt={{@alt}}
+        />
       </button>
       <figcaption class="euiImage__caption">
         {{@caption}}
@@ -60,7 +98,7 @@
     <EuiIcon
       @iconClasses="euiImage-isFullScreenCloseIcon"
       @type="cross"
-      @color={{if (not (eq @fullScreenIconColor "dark")) "ghost"}}
+      @color={{if (not-eq @fullScreenIconColor "dark") "ghost"}}
     />
   </EuiOverlayMask>
 {{/if}}

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

@@ -6,7 +6,8 @@ import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-defa
 import { tabbable } from 'tabbable';
 import { EuiPopoverArgs } from '../eui-popover';
 
-export interface EuiInputPopoverArgs extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
+export interface EuiInputPopoverArgs
+  extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
   disableFocusTrap?: boolean;
   fullWidth?: boolean;
   input: EuiPopoverArgs['button'];
@@ -44,8 +45,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
   @action
   setPanelWidth(width?: number): void {
     const { panel, inputWidth } = this;
-    if (panel && (!!inputWidth || !!width)) {
-      const newWidth = !width ? width : inputWidth;
+    const newWidth = width || inputWidth;
+    if (panel && !!newWidth) {
       panel.style.width = `${newWidth}px`;
       this.args.onPanelResize?.(newWidth);
     }
@@ -74,7 +75,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
       });
       if (
         this.args.disableFocusTrap ||
-        (tabbableItems.length && tabbableItems[tabbableItems.length - 1] === document.activeElement)
+        (tabbableItems.length &&
+          tabbableItems[tabbableItems.length - 1] === document.activeElement)
       ) {
         this.args.closePopover?.();
       }

package/addon/components/eui-key-pad-menu/index.hbs

@@ -0,0 +1,16 @@
+{{#if @checkable.legend}}
+  <fieldset
+    class="euiKeyPadMenu"
+    aria-label={{@checkable.ariaLegend}}
+    ...attributes
+  >
+    <EuiFormLabel @type="legend">
+      {{@checkable.legend}}
+    </EuiFormLabel>
+    {{yield}}
+  </fieldset>
+{{else}}
+  <ul class="euiKeyPadMenu" ...attributes>
+    {{yield (component "eui-key-pad-menu/key")}}
+  </ul>
+{{/if}}

package/addon/components/eui-key-pad-menu/key/index.hbs

@@ -0,0 +1 @@
+<li>{{yield}}</li>

package/addon/components/eui-key-pad-menu-item/index.hbs

@@ -0,0 +1,66 @@
+{{#let
+  (if @checkable "label" (if (and @href (not @isDisabled)) "a" "button"))
+  (arg-or-default @id (unique-id))
+  (and @href (not @isDisabled))
+  as |ElementTag itemId useHref|
+}}
+  {{#let (element ElementTag) as |Element|}}
+    <Element
+      href={{if useHref @href}}
+      target={{if useHref @target}}
+      aria-current={{if (and useHref @isSelected) @isSelected}}
+      for={{if @checkable itemId}}
+      disabled={{if (and (not useHref) (not @checkable)) @isDisabled}}
+      type={{if (and (not useHref) (not @checkable)) "button"}}
+      aria-pressed={{if (and (not useHref) (not @checkable)) @isSelected}}
+      class={{class-names
+        "euiKeyPadMenuItem"
+        (if @betaBadgeLabel "euiKeyPadMenuItem--hasBetaBadge")
+        (if @checkable "euiKeyPadMenuItem--checkable")
+        (if @isDisabled "euiKeyPadMenuItem-isDisabled")
+        (if @isSelected "euiKeyPadMenuItem-isSelected")
+      }}
+      rel={{if useHref "noreferrer"}}
+      ...attributes
+    >
+      <span class="euiKeyPadMenuItem__inner">
+        {{#if @checkable}}
+          {{#if (eq @checkable "single")}}
+            {{! template-lint-disable no-duplicate-id }}
+            <EuiRadio
+              id={{itemId}}
+              @containerClass="euiKeyPadMenuItem__checkableInput"
+              @checked={{@isSelected}}
+              @disabled={{@isDisabled}}
+              @name={{@name}}
+              value={{@value}}
+              {{on "change" (fn @onChange itemId @value)}}
+            />
+          {{else}}
+            <EuiCheckbox
+              id={{itemId}}
+              @containerClass="euiKeyPadMenuItem__checkableInput"
+              @checked={{@isSelected}}
+              @disabled={{@isDisabled}}
+              @name={{@name}}
+              {{on "change" (fn @onChange itemId)}}
+            />
+          {{/if}}
+        {{else}}
+          <EuiBetaBadge
+            @size="s"
+            @color="subdued"
+            class="euiKeyPadMenuItem__betaBadge"
+            @label={{this.charAt @betaBadgeLabel 0}}
+            @title={{@betaBadgeLabel}}
+            @iconType={{@betaBadgeIconType}}
+            @tooltipContent={{@betaBadgeTooltipContent}}
+          />
+        {{/if}}
+        <span class="euiKeyPadMenuItem__icon">{{yield}}</span>
+        <span class="euiKeyPadMenuItem__label">{{@label}}</span>
+      </span>
+    </Element>
+
+  {{/let}}
+{{/let}}

package/addon/components/eui-key-pad-menu-item/index.ts

@@ -0,0 +1,11 @@
+import { helper } from '@ember/component/helper';
+import Component from '@glimmer/component';
+interface EuiKeyPadMenuItemComponentArgs {}
+
+const charAt = helper(function ([str, num]: [string, number]) {
+  return str?.charAt?.(num);
+});
+
+export default class EuiKeyPadMenuItemComponent extends Component<EuiKeyPadMenuItemComponentArgs> {
+  charAt = charAt;
+}

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

@@ -0,0 +1,50 @@
+{{#let (arg-or-default @color "primary") as |color|}}
+  {{#if @href}}
+    <a
+      href={{@href}}
+      class={{class-names
+        (if @disabled "euiLink--disabled")
+        componentName="EuiLink"
+        color=(unless @disabled color)
+      }}
+      target={{@target}}
+      disabled={{@disabled}}
+      ...attributes
+    >
+
+      {{yield}}
+      {{#if
+        (or
+          (and (eq @target "_blank") (not-eq @external false))
+          (eq @external true)
+        )
+      }}
+        <EuiIcon
+          @type="popout"
+          aria-label="External link"
+          @size="s"
+          class="euiLink__externalIcon"
+        />
+      {{/if}}
+      {{#if (eq @target "_blank")}}
+        <span {{screen-reader-only}}>
+          (opens in a new tab or window)
+        </span>
+      {{/if}}
+    </a>
+  {{else}}
+    <button
+      type={{arg-or-default @type "button"}}
+      class={{class-names
+        (if @disabled "euiLink-disabled")
+        componentName="EuiLink"
+        color=(unless @disabled color)
+      }}
+      disabled={{@disabled}}
+      ...attributes
+    >
+      {{yield}}
+    </button>
+
+  {{/if}}
+{{/let}}

package/addon/components/eui-list-group-item/index.hbs

@@ -37,7 +37,11 @@
       ...attributes
     >
       {{#if @iconType}}
-        <EuiIcon @iconClasses="euiListGroupItem__icon" @type={{@iconType}} />
+        <EuiIcon
+          @iconClasses="euiListGroupItem__icon"
+          @type={{@iconType}}
+          @color="inherit"
+        />
       {{/if}}
       <span class="euiListGroupItem__label">
         {{#if (has-block)}}
@@ -50,7 +54,11 @@
   {{else}}
     <span class="euiListGroupItem__text" ...attributes>
       {{#if @iconType}}
-        <EuiIcon @iconClasses="euiListGroupItem__icon" @type={{@iconType}} />
+        <EuiIcon
+          @iconClasses="euiListGroupItem__icon"
+          @type={{@iconType}}
+          @color="inherit"
+        />
       {{/if}}
       <span class="euiListGroupItem__label">
         {{#if (has-block)}}

package/addon/components/eui-markdown-editor/index.hbs

@@ -44,7 +44,10 @@
       {{resize-observer onResize=this.onResize}}
     >
       <EuiMarkdownEditorTextArea
-        {{get-cursor-node (get this.parsed "0") this.setSelectedNode}}
+        {{this.getCursorNodeModifier
+          (get this.parsed "0")
+          this.setSelectedNode
+        }}
         {{did-update this.onParse this.parsed}}
         {{did-insert this.setTextAreaRef}}
         disabled={{@disabled}}

package/addon/components/eui-markdown-editor/index.ts

@@ -21,6 +21,7 @@ import {
 } from '../../utils/markdown/markdown-types';
 import { Processor } from 'unified';
 import { scheduleOnce } from '@ember/runloop';
+import { modifier } from 'ember-modifier';
 
 export interface EuiMarkdownEditorArgs {
   initialViewMode?: string;
@@ -54,7 +55,60 @@ export interface EuiMarkdownEditorArgs {
 //   return text;
 // }
 
+export const getCursorNode = (
+  textareaRef: HTMLInputElement,
+  parsed: any
+): EuiMarkdownAstNode => {
+  const { selectionStart } = textareaRef;
+
+  let node: EuiMarkdownAstNode = parsed.result ?? parsed.contents;
+
+  //eslint-disable-next-line
+  outer: while (true) {
+    if (node.children) {
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        if (
+          child.position.start.offset < (selectionStart as number) &&
+          (selectionStart as number) < child.position.end.offset
+        ) {
+          if (child.type === 'text') break outer; // don't dive into `text` nodes
+          node = child;
+          continue outer;
+        }
+      }
+    }
+    break;
+  }
+
+  return node;
+};
+
+function wrapper(
+  textarea: HTMLInputElement,
+  parsed: any,
+  callback: (node: EuiMarkdownAstNode) => void
+) {
+  const node = getCursorNode(textarea, parsed);
+  callback(node);
+}
+
+export const getCursorNodeModifier = modifier(function getCursorNodeModifier(
+  textarea: HTMLInputElement,
+  [parsed, onSelectedNode]: [boolean, () => void]
+) {
+  const fn = wrapper.bind(null, textarea, parsed, onSelectedNode);
+  textarea.addEventListener('keyup', fn);
+  textarea.addEventListener('mouseup', fn);
+
+  return () => {
+    textarea.removeEventListener('keyup', fn);
+    textarea.removeEventListener('mouseup', fn);
+  };
+});
+
 export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEditorArgs> {
+  getCursorNodeModifier = getCursorNodeModifier;
   // Defaults
   @argOrDefault(defaultParsingPlugins)
   declare parsingPluginList: typeof defaultParsingPlugins;

package/addon/components/eui-markdown-editor-footer/index.hbs

@@ -39,34 +39,34 @@
   />
 
   {{#if this.isShowingHelp}}
-    <EuiOverlayMask>
-      <EuiModal @onClose={{set this "isShowingHelp" false}}>
-        <EuiModalHeader>
-          <EuiTitle>
-            <h3>
-              Syntax Help
-              {{! <EuiI18n
+
+    <EuiModal @onClose={{set this "isShowingHelp" false}}>
+      <EuiModalHeader>
+        <EuiTitle>
+          <h3>
+            Syntax Help
+            {{! <EuiI18n
                 token="euiMarkdownEditorFooter.syntaxTitle"
                 default="Syntax help"
               /> }}
-            </h3>
-          </EuiTitle>
-        </EuiModalHeader>
-        <EuiModalBody>
+          </h3>
+        </EuiTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
 
-          <EuiText>
-            <p>The editor uses</p>
-            <a
-              href="https://github.github.com/gfm/"
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              Github flavored markdown
-            </a>
-            <p>You can also utilize these additional syntax plugins to add rich
-              content to yoru text.</p>
+        <EuiText>
+          <p>The editor uses</p>
+          <a
+            href="https://github.github.com/gfm/"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Github flavored markdown
+          </a>
+          <p>You can also utilize these additional syntax plugins to add rich
+            content to yoru text.</p>
 
-            {{! <EuiI18n
+          {{! <EuiI18n
                     tokens={[
                       'euiMarkdownEditorFooter.descriptionPrefix',
                       'euiMarkdownEditorFooter.descriptionSuffix',
@@ -87,24 +87,23 @@
                       </p>
                     )}
                   </EuiI18n> }}
-          </EuiText>
-          <EuiHorizontalRule />
-          {{#each @uiPlugins as |uiPlugin|}}
-            {{#if uiPlugin.helpText}}
-              <EuiTitle size="xxs">
-                <p>
-                  <strong>{{uiPlugin.name}}</strong>
-                </p>
-              </EuiTitle>
-              <EuiSpacer size="s" />
-              <EuiMarkdownFormat @value={{uiPlugin.helpText}} />
-              <EuiSpacer size="l" />
+        </EuiText>
+        <EuiHorizontalRule />
+        {{#each @uiPlugins as |uiPlugin|}}
+          {{#if uiPlugin.helpText}}
+            <EuiTitle size="xxs">
+              <p>
+                <strong>{{uiPlugin.name}}</strong>
+              </p>
+            </EuiTitle>
+            <EuiSpacer size="s" />
+            <EuiMarkdownFormat @value={{uiPlugin.helpText}} />
+            <EuiSpacer size="l" />
 
-            {{/if}}
-          {{/each}}
-        </EuiModalBody>
-      </EuiModal>
-    </EuiOverlayMask>
+          {{/if}}
+        {{/each}}
+      </EuiModalBody>
+    </EuiModal>
 
   {{/if}}
 </div>

package/addon/components/eui-markdown-format/index.ts

@@ -32,6 +32,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     };
 
     function identityCompiler(this: Processor) {
+      //eslint-disable-next-line
       this.Compiler = Compiler;
     }
     return unified()
@@ -41,7 +42,6 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
   }
 
   @cached
-  //@ts-ignore
   get result() {
     try {
       const processed = this.processor.processSync(this.args.value);

package/addon/components/eui-markdown-format/markdown-code/index.hbs

@@ -1,3 +1,3 @@
-<EuiCode>
-	{{@node.content}}
+<EuiCode @language={{@node.language}}>
+  {{@node.content}}
 </EuiCode>

package/addon/components/eui-markdown-format/markdown-code-block/index.hbs

@@ -1,6 +1,7 @@
 <EuiCodeBlock
   @paddingSize={{@node.paddingSize}}
   @fontSize={{@node.fontSize}}
+  @language={{@node.language}}
   @isCopyable={{true}}
 >
   {{@node.content}}