@ember-eui/core 1.2.6 → 1.3.3

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ### Master
 
+### 1.3.0
+🚀 Enhancements
+`@ember-eui/core`
+- `<EuiMarkdownEditor />` `<EuiMarkdownFormat />` `<EuiCode />` `<EuiCopy />` `<EuiCodeBlock />`
+
+`@ember-eui/validated-form`
+- `<Form.FieldMarkdownEditor />`
+
+
 ### 1.2.6
 🐛 Bug / Fixes
 - Update ember-svg-jar dependency

package/addon/components/common.ts

@@ -1,3 +1,16 @@
+// utility types:
+/**
+ * XOR for some properties applied to a type
+ * (XOR is one of these but not both or neither)
+ *
+ * Usage: OneOf<typeToExtend, one | but | not | multiple | of | these | are | required>
+ *
+ * To require aria-label or aria-labelledby but not both
+ * Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
+ */
+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 {
   'aria-label'?: string;
   'data-test-subj'?: string;

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

@@ -20,6 +20,7 @@
       @iconType={{@iconType}}
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
+      @useSvg={{@useSvg}}
       @textClasses={{class-names "euiButton__text" @textClasses}}
     >
       {{yield}}
@@ -46,6 +47,7 @@
       @iconType={{@iconType}}
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
+      @useSvg={{@useSvg}}
       @textClasses={{class-names "euiButton__text" @textClasses}}
     >
       {{yield}}

package/addon/components/eui-button-content/index.hbs

@@ -12,6 +12,7 @@
       class="euiButtonContent__icon {{@iconClasses}}"
       @type={{@iconType}}
       @size="m"
+      @useSvg={{@useSvg}}
     />
   {{/if}}
   <span class={{@textClasses}}>

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

@@ -17,6 +17,7 @@
       @iconType={{@iconType}}
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
+      @useSvg={{@useSvg}}
       @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
     >
       {{yield}}
@@ -42,6 +43,7 @@
       @iconType={{@iconType}}
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
+      @useSvg={{@useSvg}}
       @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
     >
       {{yield}}

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

@@ -10,6 +10,7 @@
         class="euiButtonIcon__icon {{@iconClasses}}"
         @type={{@iconType}}
         @size={{arg-or-default @iconSize "m"}}
+        @useSvg={{@useSvg}}
         aria-hidden="true"
       />
     {{/if}}
@@ -27,6 +28,7 @@
         class="euiButtonIcon__icon {{@iconClasses}}"
         @type={{@iconType}}
         @size={{@iconSize}}
+        @useSvg={{@useSvg}}
         aria-hidden="true"
       />
     {{/if}}

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

@@ -0,0 +1,9 @@
+<EuiCodeBlockImpl
+  @inline={{true}}
+  @language={{@language}}
+  @transparentBackground={{@transparentBackground}}
+	@overflowHeight={{@overflowHeight}}
+  ...attributes
+>
+  {{yield}}
+</EuiCodeBlockImpl>

package/addon/components/eui-code-block/index.d.ts

@@ -0,0 +1,2 @@
+export type PaddingSize = 'none' | 's' | 'm' | 'l';
+export type FontSize = 's' | 'm' | 'l';

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

@@ -0,0 +1,10 @@
+<EuiCodeBlockImpl
+  @inline={{false}}
+  @language={{@language}}
+  @transparentBackground={{@transparentBackground}}
+  @isCopyable={{@isCopyable}}
+  @overflowHeight={{@overflowHeight}}
+  ...attributes
+>
+  {{yield}}
+</EuiCodeBlockImpl>

package/addon/components/eui-code-block-impl/code-block-controls/index.hbs

@@ -0,0 +1,33 @@
+{{#if (or (and @isCopyable @innerText) @overflowHeight)}}
+  <div class="euiCodeBlock__controls">
+    {{#if @overflowHeight}}
+      <EuiButtonIcon
+        class="euiCodeBlock__fullScreenButton"
+        @size="s"
+        {{on "click" @toggleFullScreen}}
+        @iconType={{if @isFullScreen "cross" "fullScreen"}}
+        @color="text"
+        aria-label={{if @isFullScreen "Collapse" "Expand"}}
+      />
+
+    {{/if}}
+    {{#if (and @isCopyable @innerText)}}
+      <div class="euiCodeBlock__copyButton">
+        <EuiCopy
+          @textToCopy={{@innerText}}
+          @beforeMessage="Copy"
+          @afterMessage="Copied"
+          as |copy|
+        >
+          <EuiButtonIcon
+            @size="s"
+            {{on "click" copy}}
+            @iconType="copy"
+            @color="text"
+            aria-label="Copy"
+          />
+        </EuiCopy>
+      </div>
+    {{/if}}
+  </div>
+{{/if}}

package/addon/components/eui-code-block-impl/index.hbs

@@ -0,0 +1,111 @@
+{{#let
+  (class-names
+    "euiCodeBlock__pre"
+    (if (eq this.whiteSpace "pre") "euiCodeBlock__pre--whiteSpacePre")
+    (if (eq this.whiteSpace "pre-wrap") "euiCodeBlock__pre--whiteSpacePreWrap")
+  )
+  (class-names "euiCodeBlock__code" @language)
+  (class-names
+    "euiCodeBlock"
+    (if this.transparentBackground "euiCodeBlock--transparentBackground")
+    (if @inline "euiCodeBlock--inline")
+    (if (or @isCopyable @overflowHeight) "euiCodeBlock--hasControls")
+    componentName="EuiCodeBlockImpl"
+    paddingSize=this.paddingSize
+    fontSize=this.fontSize
+  )
+  as |preClasses codeClasses classes|
+}}
+  {{#if @inline}}
+    {{#if this.isPortalTargetReady}}
+      {{#in-element this.codeTarget}}
+        {{yield}}
+      {{/in-element}}
+      <span
+        class={{classes}}
+        {{style (if @overflowHeight (hash maxHeight=@overflowHeight))}}
+      ><code
+          {{did-insert (set this "code")}}
+          class={{codeClasses}}
+        ></code></span>
+    {{/if}}
+  {{else}}
+    {{! Not inline }}
+    {{#if this.isPortalTargetReady}}
+      {{#in-element this.codeTarget}}
+        {{yield}}
+      {{/in-element}}
+      <EuiInnerText @fallback="" as |setRef innerText|>
+        <div
+          class={{classes}}
+          {{style (if @overflowHeight (hash maxHeight=@overflowHeight))}}
+        >
+          <pre
+            {{did-insert setRef}}
+            class={{preClasses}}
+            {{style (if @overflowHeight (hash maxHeight=@overflowHeight))}}
+          ><code
+              {{did-insert (set this "code")}}
+              class={{codeClasses}}
+            ></code></pre>
+
+          <EuiCodeBlockImpl::CodeBlockControls
+            @innerText={{innerText}}
+            @isCopyable={{@isCopyable}}
+            @overflowHeight={{@overflowHeight}}
+            @toggleFullScreen={{set this "isFullScreen" (not this.isFullScreen)}}
+            @isFullScreen={{this.isFullScreen}}
+          />
+
+          {{#if this.isFullScreen}}
+            <EuiOverlayMask>
+              <div
+                {{focus-trap
+                  isActive=true
+                  focusTrapOptions=(hash
+                    clickOutsideDeactivates=true returnFocusOnDeactivate=true
+                  )
+                }}
+              >
+                <div
+                  class={{class-names
+                    "euiCodeBlock euiCodeBlock-paddingLarge euiCodeBlock-isFullScreen"
+                    fontSize=this.fontSize
+                    componentName="EuiCodeBlockImpl"
+                  }}
+                >
+                  <pre class={{preClasses}}>
+                    {{!template-lint-disable}}
+                    <code
+                      {{did-insert
+                        (queue (set this "codeFullScreen") this.update)
+                      }}
+                      {{will-destroy (set this "codeFullScreen" null)}}
+                      {{did-update this.update @language}}
+                      class={{codeClasses}}
+                      tabIndex={{0}}
+                      tabIndex={{0}}
+                      {{on "keydown" this.onKeyDown}}
+                    ></code>
+                    {{!template-lint-enable}}
+                  </pre>
+                  <EuiCodeBlockImpl::CodeBlockControls
+                    @innerText={{innerText}}
+                    @isCopyable={{@isCopyable}}
+                    @overflowHeight={{@overflowHeight}}
+                    @toggleFullScreen={{set
+                      this
+                      "isFullScreen"
+                      (not this.isFullScreen)
+                    }}
+                    @isFullScreen={{this.isFullScreen}}
+                  />
+                </div>
+              </div>
+            </EuiOverlayMask>
+          {{/if}}
+        </div>
+      </EuiInnerText>
+    {{/if}}
+  {{/if}}
+{{/let}}

package/addon/components/eui-code-block-impl/index.ts

@@ -0,0 +1,121 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
+import { PaddingSize, FontSize } from '../eui-code-block';
+//@ts-ignore
+import hljs from 'highlight.js';
+import { keys } from '../../utils/keys';
+import { scheduleOnce } from '@ember/runloop';
+
+type EuiCodeImplArgs = {
+  fontSize?: FontSize;
+
+  /**
+   * Displays the passed code in an inline format. Also removes any margins set.
+   */
+  inline?: boolean;
+
+  /**
+   * Displays an icon button to copy the code snippet to the clipboard.
+   */
+  isCopyable?: boolean;
+
+  /**
+   * Sets the syntax highlighting for a specific language
+   */
+  language?: string;
+  overflowHeight?: number;
+  paddingSize?: PaddingSize;
+  transparentBackground?: boolean;
+  /**
+   * Specify how `white-space` inside the element is handled.
+   * `pre` respects line breaks/white space but doesn't force them to wrap the line
+   * `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary.
+   */
+  whiteSpace?: 'pre' | 'pre-wrap';
+};
+
+export default class EuiAccordionAccordionComponent extends Component<EuiCodeImplArgs> {
+  // Defaults
+  @argOrDefault(false) declare transparentBackground: boolean;
+  @argOrDefault('l') declare paddingSize: string;
+  @argOrDefault('s') declare fontSize: string;
+  @argOrDefault(false) declare isCopyable: boolean;
+  @argOrDefault('pre-wrap') declare whiteSpace: string;
+
+  @tracked isFullScreen: boolean = false;
+  @tracked isPortalTargetReady: boolean = false;
+  @tracked codeTarget: HTMLDivElement | null = null;
+  @tracked code: HTMLElement | null = null;
+  @tracked codeFullScreen: HTMLElement | null = null;
+
+  observer: MutationObserver | null = null;
+
+  constructor(owner: unknown, args: EuiCodeImplArgs) {
+    super(owner, args);
+    this.codeTarget = document.createElement('div');
+    this.isPortalTargetReady = true;
+    this.setupObserver();
+  }
+
+  setupObserver() {
+    this.observer?.disconnect();
+    this.observer = new MutationObserver((mutationsList) => {
+      if (mutationsList.length) this.update();
+    });
+    if (this.codeTarget) {
+      this.update();
+      this.observer.observe(this.codeTarget, {
+        characterData: true,
+        subtree: true,
+        childList: true
+      });
+    }
+  }
+
+  willDestroy(): void {
+    this.observer?.disconnect();
+  }
+
+  @action
+  update() {
+    const render = () => {
+      const language = this.args.language;
+      const html = (
+        this.isPortalTargetReady && this.codeTarget?.innerHTML
+          ? this.codeTarget.innerHTML
+          : ''
+      ).trim();
+
+      const code = this.code;
+
+      if (code) {
+        code.innerHTML = html;
+      }
+
+      if (language) {
+        if (code) {
+          hljs.highlightBlock(code);
+        }
+      }
+
+      if (this.codeFullScreen) {
+        this.codeFullScreen.innerHTML = html;
+        if (language) {
+          hljs.highlightBlock(this.codeFullScreen);
+        }
+      }
+    };
+    scheduleOnce('afterRender', this, render);
+  }
+
+  @action
+  onKeyDown(event: KeyboardEvent): void {
+    if (event.key === keys.ESCAPE) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.isFullScreen = false;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<EuiToolTip @onMouseOut={{this.resetTooltipText}} ...attributes>
+  <:anchor>
+    {{yield this.copy}}
+  </:anchor>
+  <:content>
+    {{this.tooltipText}}
+  </:content>
+</EuiToolTip>

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

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { copyToClipboard } from '../../utils/copy-to-clipboard';
+
+type EuiCopyArgs = {
+  /**
+   * Text that will be copied to clipboard when copy function is executed.
+   */
+  textToCopy: string;
+  /**
+   * Tooltip message displayed before copy function is called.
+   */
+  beforeMessage?: string;
+  /**
+   * Tooltip message displayed after copy function is called that lets the user know that
+   * 'textToCopy' has been copied to the clipboard.
+   */
+  afterMessage?: string;
+};
+
+export default class EuiCopyComponent extends Component<EuiCopyArgs> {
+  @tracked tooltipText = this.args.beforeMessage;
+
+  @action
+  copy(): void {
+    const isCopied = copyToClipboard(this.args.textToCopy);
+    if (isCopied) {
+      this.tooltipText = this.args.afterMessage;
+    }
+  }
+
+  @action
+  resetTooltipText(): void {
+    this.tooltipText = this.args.beforeMessage;
+  }
+}

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

@@ -1,34 +1,39 @@
-{{#if this.useImage}}
-  <img
-    src={{this.icon}}
-    class={{class-names
-      this.optionalColorClass
-      (if this.isAppIcon "euiIcon--app")
-      componentName="EuiIcon"
-      size=this.size
-    }}
-    alt={{if @title @title}}
-    tabIndex={{@tabIndex}}
-    ...attributes
-  />
+{{#if this.icon.inner}}
+  {{! has the shape of a curried component }}
+  {{component this.icon}}
 {{else}}
-  <Svg
-    @name={{this.icon}}
-    @loadingSvg={{this.emptyIcon}}
-    class={{class-names
-      this.optionalColorClass
-      (if this.isAppIcon "euiIcon--app")
-      componentName="EuiIcon"
-      size=this.size
-    }}
-    style={{this.optionalCustomStyles}}
-    tabIndex={{this.tabIndex}}
-    role="image"
-    aria-hidden={{if this.isAriaHidden true}}
-    aria-label={{if @aria-label @aria-label this.titleId}}
-    aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
-    @title={{@title}}
-    @onIconLoad={{@onIconLoad}}
-    ...attributes
-  />
+  {{#if this.useImage}}
+    <img
+      src={{this.icon}}
+      class={{class-names
+        this.optionalColorClass
+        (if this.isAppIcon "euiIcon--app")
+        componentName="EuiIcon"
+        size=this.size
+      }}
+      alt={{if @title @title}}
+      tabIndex={{@tabIndex}}
+      ...attributes
+    />
+  {{else}}
+    <Svg
+      @name={{this.icon}}
+      @loadingSvg={{this.emptyIcon}}
+      class={{class-names
+        this.optionalColorClass
+        (if this.isAppIcon "euiIcon--app")
+        componentName="EuiIcon"
+        size=this.size
+      }}
+      style={{this.optionalCustomStyles}}
+      tabIndex={{this.tabIndex}}
+      role="image"
+      aria-hidden={{if this.isAriaHidden true}}
+      aria-label={{if @aria-label @aria-label this.titleId}}
+      aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
+      @title={{@title}}
+      @onIconLoad={{@onIconLoad}}
+      ...attributes
+    />
+  {{/if}}
 {{/if}}

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

@@ -0,0 +1 @@
+{{yield this.setRef this.innerText}}

package/addon/components/eui-inner-text/index.ts

@@ -0,0 +1,61 @@
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+type InnerTextArgs = {
+  fallback?: string;
+};
+
+export default class EuiImage extends GlimmerComponent<InnerTextArgs> {
+  @tracked ref: HTMLElement | null = null;
+  @tracked innerText = '';
+  observer: MutationObserver | null = null;
+
+  get innerTextFallback() {
+    return this.args.fallback ?? '';
+  }
+
+  setupObserver() {
+    this.observer?.disconnect();
+    this.observer = new MutationObserver((mutationsList) => {
+      if (mutationsList.length) this.updateInnerText(this.ref);
+    });
+    if (this.ref) {
+      this.updateInnerText(this.ref);
+      this.observer.observe(this.ref, {
+        characterData: true,
+        subtree: true,
+        childList: true
+      });
+    }
+  }
+
+  updateInnerText(node: HTMLElement | null) {
+    if (!node) return;
+    this.setInnerText(
+      // Check for `innerText` implementation rather than a simple OR check
+      // because in real cases the result of `innerText` could correctly be `null`
+      // while the result of `textContent` could correctly be non-`null` due to
+      // differing reliance on browser layout calculations.
+      // We prefer the result of `innerText`, if available.
+      'innerText' in node
+        ? node.innerText
+        : (node as HTMLElement).textContent || this.innerTextFallback
+    );
+  }
+
+  setInnerText(text: string) {
+    this.innerText = text;
+  }
+
+  @action
+  setRef(ref: HTMLElement): void {
+    this.ref = ref;
+    this.setupObserver();
+  }
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.observer?.disconnect();
+  }
+}

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

@@ -0,0 +1,63 @@
+<div
+  class={{class-names
+    "euiMarkdownEditor"
+    (if (eq this.height "full") "euiMarkdownEditor--fullHeight")
+    (if this.isPreviewing "euiMarkdownEditor--isPreviewing")
+  }}
+  {{did-update
+    this.updateCurrentHeight
+    this.currentHeight
+    this.isPreviewing
+    this.height
+    this.autoExpandPreview
+  }}
+>
+  <EuiMarkdownEditorToolbar
+    @selectedNode={{this.selectedNode}}
+    @markdownActions={{this.markdownActions}}
+    @onClickPreview={{this.setViewMode}}
+    @viewMode={{this.viewMode}}
+    @uiPlugins={{this.toolbarPlugins}}
+    {{did-insert this.setEditorToolbarRef}}
+  />
+  {{#if this.isPreviewing}}
+    <div
+      class="euiMarkdownEditorPreview"
+      {{did-insert (set this "previewRef")}}
+      {{style (hash height=this.previewHeight)}}
+    >
+      <EuiMarkdownFormat
+        @parsingPluginList={{this.parsingPluginList}}
+        @processingPluginList={{this.processingPluginList}}
+        @value={{@value}}
+        @replaceNode={{this.replaceNode}}
+      />
+    </div>
+  {{/if}}
+
+  <div
+    class="euiMarkdownEditor__toggleContainer"
+    {{style height=this.editorToggleContainerHeight}}
+  >
+    <EuiMarkdownEditorDropZone
+      @uiPlugins={{this.toolbarPlugins}}
+      {{resize-observer onResize=this.onResize}}
+    >
+      <EuiMarkdownEditorTextArea
+        {{get-cursor-node (get this.parsed "0") this.setSelectedNode}}
+        {{did-update this.onParse this.parsed}}
+        {{did-insert this.setTextAreaRef}}
+        disabled={{@disabled}}
+        id={{this.editorId}}
+        @height={{this.textAreaHeight}}
+        @maxHeight={{this.textAreaMaxHeight}}
+        value={{@value}}
+        aria-label={{@ariaLabel}}
+        aria-labelledby={{@ariaLabelledBy}}
+        aria-describedby={{@ariaDescribedBy}}
+        {{on "input" (pick "target.value" @onChange)}}
+        ...attributes
+      />
+    </EuiMarkdownEditorDropZone>
+  </div>
+</div>