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

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

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import {
+  EuiCodeSharedProps,
+  getHtmlContent,
+  checkSupportedLanguage
+} from '../../utils/code/utils';
+import { action } from '@ember/object';
+import { highlight, RefractorNode } from 'refractor';
+import { tracked } from '@glimmer/tracking';
+import { scheduleOnce } from '@ember/runloop';
+
+type EuiCodeArgs = EuiCodeSharedProps & {
+  //comments
+};
+
+export default class EuiCodeComponent extends Component<EuiCodeArgs> {
+  @tracked codeTarget: undefined | HTMLElement;
+  @tracked code: undefined | HTMLElement;
+  observer: MutationObserver | null = null;
+
+  constructor(owner: unknown, args: EuiCodeArgs) {
+    super(owner, args);
+    this.codeTarget = document.createElement('div');
+    this.setupObserver();
+  }
+
+  get language() {
+    return checkSupportedLanguage(this.args.language || '');
+  }
+
+  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
+      });
+    }
+  }
+
+  @action
+  update() {
+    const render = () => {
+      const html = (
+        this.codeTarget?.textContent ? this.codeTarget.textContent : ''
+      ).trim();
+
+      let data: RefractorNode[];
+      if (typeof html !== 'string') {
+        data = [];
+      } else {
+        data = highlight(html, this.language);
+      }
+
+      const code = this.code;
+
+      if (code) {
+        code.innerHTML = getHtmlContent(data).element.innerHTML;
+      }
+    };
+    scheduleOnce('afterRender', this, render);
+  }
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.observer?.disconnect();
+  }
+}

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

@@ -0,0 +1,26 @@
+{{#if (or @showCopyButton @showFullScreenButton)}}
+  <div class="euiCodeBlock__controls">
+    {{#if @showFullScreenButton}}
+      <EuiButtonIcon
+        class="euiCodeBlock__fullScreenButton"
+        @iconType={{if @isFullScreen "fullScreenExit" "fullScreen"}}
+        @color="text"
+        aria-label={{if @isFullScreen "Collapse" "Expand"}}
+        {{on "click" @toggleFullScreen}}
+      />
+    {{/if}}
+
+    {{#if @showCopyButton}}
+      <div className="euiCodeBlock__copyButton">
+        <EuiCopy @textToCopy={{@textToCopy}} @afterMessage="Copied" as |copy|>
+          <EuiButtonIcon
+            {{on "click" copy}}
+            @iconType="copyClipboard"
+            @color="text"
+            aria-label="Copy"
+          />
+        </EuiCopy>
+      </div>
+    {{/if}}
+  </div>
+{{/if}}

package/addon/components/eui-code-block/full-screen-display/index.hbs

@@ -0,0 +1,12 @@
+<EuiOverlayMask>
+  <div
+    class="euiCodeBlock--fontLarge euiCodeBlock--paddingLarge euiCodeBlock-isFullScreen"
+    {{focus-trap
+      isActive=true
+      focusTrapOptions=(hash clickOutsideDeactivates=true)
+    }}
+    ...attributes
+  >
+    {{yield}}
+  </div>
+</EuiOverlayMask>

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

@@ -1,10 +1,145 @@
-<EuiCodeBlockImpl
-  @inline={{false}}
-  @language={{@language}}
-  @transparentBackground={{@transparentBackground}}
-  @isCopyable={{@isCopyable}}
-  @overflowHeight={{@overflowHeight}}
-  ...attributes
->
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{#in-element this.codeTarget}}
   {{yield}}
-</EuiCodeBlockImpl>
+{{/in-element}}
+<EuiInnerText as |setInnerTextRef innerText|>
+  {{#let
+    (class-names
+      "euiCodeBlock"
+      (if
+        (or this.showCopyButton this.showFullScreenButton)
+        "euiCodeBlock--hasControl"
+      )
+      (if
+        (and this.showCopyButton this.showFullScreenButton)
+        "euiCodeBlock--hasBothControls"
+      )
+      (if this.lineNumbersConfig.show "euiCodeBlock--hasLineNumbers")
+    )
+    (class-names
+      "euiCodeBlock__pre"
+      (if
+        (or (eq this.whiteSpace "pre") this.isVirtualized)
+        "euiCodeBlock__pre--whiteSpacePre"
+      )
+      (if
+        (and (eq this.whiteSpace "pre-wrap") (not this.isVirtualized))
+        "euiCodeBlock__pre--whiteSpacePreWrap"
+      )
+      (if this.isVirtualized "euiCodeBlock__pre--isVirtualized")
+    )
+    (component "eui-code-block/virtualized")
+    (component "eui-code-block/controls")
+    (component "eui-code-block/full-screen-display")
+    as |wrapperClasses preClasses VirtualizedCodeBlock Controls FullScreenDisplay|
+  }}
+    <div
+      class={{class-names
+        wrapperClasses
+        (if this.transparentBackground "euiCodeBlock--transparentBackground")
+        componentName="EuiCodeBlock"
+        fontSize=this.fontSize
+        paddingSize=this.paddingSize
+      }}
+      {{style this.optionalStyles}}
+      {{this.highlightTargetModifier
+        element=this.codeTarget
+        language=this.language
+        lineNumbersConfig=this.lineNumbersConfig
+        onChange=this.updateCode
+        codeElement=this.code
+        codeFullScreenElement=this.codeFullScreen
+      }}
+    >
+      {{#if this.isVirtualized}}
+        {{!virtualized}}
+        <VirtualizedCodeBlock
+          class={{preClasses}}
+          tabindex="0"
+          {{on-key "Escape" this.closeFullScreen}}
+          @language={{this.language}}
+          @data={{this.data.data}}
+          @rowHeight={{this.rowHeight}}
+          @overflowHeight={{@overflowHeight}}
+        />
+      {{else}}
+        {{!template-lint-disable}}
+        <pre
+          class={{preClasses}}
+          {{style this.optionalStyles}}
+          tabindex={{this.tabIndex}}
+          {{did-insert (set this "wrapperRef")}}
+          {{resize-observer onResize=this.doesOverflow}}
+          {{mutation-observer
+            onMutation=this.doesOverflow
+            observerOptions=(hash subtree=true childList=true)
+          }}
+          {{did-insert setInnerTextRef}}
+        ><code
+            class="euiCodeBlock__code"
+            data-code-language={{this.language}}
+            {{did-insert (set this "code")}}
+            ...attributes
+          ></code></pre>
+
+      {{/if}}
+
+      <Controls
+        @isFullScreen={{this.isFullScreen}}
+        @showFullScreenButton={{this.showFullScreenButton}}
+        @toggleFullScreen={{this.toggleFullScreen}}
+        @showCopyButton={{this.showCopyButton}}
+        @textToCopy={{this.textToCopyHelper
+          isVirtualized=this.isVirtualized
+          innerText=(this.cleanTextHelper innerText)
+          element=this.data.element
+        }}
+      />
+
+      {{#if this.isFullScreen}}
+        <FullScreenDisplay class={{wrapperClasses}}>
+          {{#if this.isVirtualized}}
+            <VirtualizedCodeBlock
+              class={{preClasses}}
+              tabindex="0"
+              {{on-key "Escape" this.closeFullScreen}}
+              @language={{this.language}}
+              @data={{this.data.data}}
+              @rowHeight={{this.fontSizeToRowHeightMap.l}}
+              @overflowHeight={{@overflowHeight}}
+            />
+          {{else}}
+            <pre
+              class={{preClasses}}
+              tabindex="0"
+              {{on-key "Escape" this.closeFullScreen}}
+            ><code
+                class="euiCodeBlock__code"
+                data-code-language={{this.language}}
+                {{did-insert (set this "codeFullScreen")}}
+              ></code></pre>
+          {{/if}}
+          <Controls
+            @isFullScreen={{this.isFullScreen}}
+            @showFullScreenButton={{this.showFullScreenButton}}
+            @showCopyButton={{this.showCopyButton}}
+            @toggleFullScreen={{this.toggleFullScreen}}
+            @textToCopy={{this.textToCopyHelper
+              isVirtualized=this.isVirtualized
+              innerText=(this.cleanTextHelper innerText)
+              element=this.data.element
+            }}
+          />
+        </FullScreenDisplay>
+      {{/if}}
+    </div>
+  {{/let}}
+</EuiInnerText>

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

@@ -0,0 +1,290 @@
+import Component from '@glimmer/component';
+import {
+  EuiCodeSharedProps,
+  getHtmlContent,
+  checkSupportedLanguage,
+  highlightByLine
+} from '../../utils/code/utils';
+import { action } from '@ember/object';
+import { RefractorNode } from 'refractor';
+import { tracked } from '@glimmer/tracking';
+import { scheduleOnce } from '@ember/runloop';
+import { modifier } from 'ember-modifier';
+import { helper } from '@ember/component/helper';
+
+interface LineNumbersConfig {
+  start?: number;
+  highlight?: string;
+  show?: boolean;
+}
+
+type PaddingSize = 'none' | 's' | 'm' | 'l';
+type FontSize = 's' | 'm' | 'l';
+
+const fontSizeToRowHeightMap = {
+  s: 18,
+  m: 21,
+  l: 24
+};
+
+type EuiCodeBlockArgs = EuiCodeSharedProps & {
+  paddingSize?: PaddingSize;
+  fontSize?: FontSize;
+
+  /**
+   * 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';
+
+  /**
+   * Displays an icon button to copy the code snippet to the clipboard.
+   */
+  isCopyable?: boolean;
+
+  /**
+   * Displays line numbers.
+   * Optionally accepts a configuration object for setting the starting number and visual highlighting ranges:
+   * `{ start: 100, highlight: '1, 5-10, 20-30, 40' }`
+   */
+  lineNumbers?: boolean | LineNumbersConfig;
+
+  /**
+   * Sets the maximum container height.
+   * Accepts a pixel value (`300`) or a percentage (`'100%'`)
+   * Ensure the container has calcuable height when using a percentage
+   */
+  overflowHeight?: number | string;
+
+  /**
+   * Renders code block lines virtually.
+   * Useful for improving load times of large code blocks.
+   *
+   * When using this configuration, `overflowHeight` is required and
+   * `whiteSpace` can only be `pre`.
+   */
+  isVirtualized?: boolean;
+};
+
+interface LineNumbersFinal {
+  start: number;
+  show: boolean;
+  highlight?: string;
+}
+
+const highlightModifier = modifier(
+  (
+    _e,
+    _pos: unknown[],
+    {
+      element: targetEle,
+      language = 'text',
+      lineNumbersConfig = { start: 1, show: false },
+      onChange
+    }: {
+      element: Element | undefined;
+      language: EuiCodeSharedProps['language'];
+      lineNumbersConfig: LineNumbersFinal;
+      onChange: ({
+        data,
+        element
+      }: {
+        data: RefractorNode[];
+        element: HTMLElement;
+      }) => void;
+    }
+  ) => {
+    let observer: undefined | MutationObserver;
+
+    const getHighlighedHtml = () => {
+      const html = (targetEle?.textContent ? targetEle.textContent : '').trim();
+
+      let data: RefractorNode[];
+      if (typeof html !== 'string') {
+        data = [];
+      } else {
+        data = highlightByLine(html, language, lineNumbersConfig);
+      }
+
+      return {
+        data,
+        element: getHtmlContent(data).element
+      };
+    };
+
+    const setupObserver = () => {
+      const newObserver = new MutationObserver((mutationsList) => {
+        if (mutationsList.length) {
+          onChange(getHighlighedHtml());
+        }
+      });
+      if (targetEle) {
+        onChange(getHighlighedHtml());
+        newObserver.observe(targetEle, {
+          characterData: true,
+          subtree: true,
+          childList: true
+        });
+      }
+
+      return newObserver;
+    };
+
+    if (targetEle) {
+      observer = setupObserver();
+    }
+
+    return () => {
+      observer?.disconnect();
+    };
+  }
+);
+
+const cleanTextHelper = helper(function ([text]: [string]) {
+  return text?.replace(/[\r\n?]{2}|\n\n/g, '\n') || '';
+});
+
+const textToCopyHelper = helper(function (
+  _pos,
+  {
+    isVirtualized,
+    element,
+    innerText
+  }: { isVirtualized: boolean; element: HTMLElement; innerText: string }
+) {
+  return isVirtualized ? element.textContent : innerText;
+});
+
+export default class EuiCodeBlockComponent extends Component<EuiCodeBlockArgs> {
+  highlightTargetModifier = highlightModifier;
+  cleanTextHelper = cleanTextHelper;
+  textToCopyHelper = textToCopyHelper;
+  fontSizeToRowHeightMap = fontSizeToRowHeightMap;
+
+  //fake element where yield writes to, so we can observe and clone a highlighted version to code and codeFullSceen
+  @tracked codeTarget: undefined | HTMLElement;
+  //<code> Element for non fullscreen
+  @tracked code: undefined | HTMLElement;
+  //<code> Element for fullscreen modal
+  @tracked codeFullScreen: undefined | HTMLElement;
+  @tracked wrapperRef: undefined | HTMLElement;
+  @tracked tabIndex = 1;
+  @tracked isFullScreen = false;
+  @tracked data: undefined | { data: RefractorNode[]; element: HTMLElement };
+
+  get language() {
+    return checkSupportedLanguage(this.args.language || '');
+  }
+
+  get transparentBackground() {
+    return this.args.transparentBackground ?? false;
+  }
+
+  get paddingSize() {
+    return this.args.paddingSize ?? 'l';
+  }
+
+  get fontSize() {
+    return this.args.fontSize ?? 's';
+  }
+
+  get isCopyable() {
+    return this.args.isCopyable ?? false;
+  }
+
+  get whiteSpace() {
+    return this.args.whiteSpace ?? 'pre-wrap';
+  }
+
+  get isVirtualized() {
+    return !!(this.args.isVirtualized && Array.isArray(this.data?.data));
+  }
+
+  get lineNumbers() {
+    return this.args.lineNumbers ?? false;
+  }
+
+  get lineNumbersConfig() {
+    const { lineNumbers } = this;
+    const config = typeof lineNumbers === 'object' ? lineNumbers : {};
+    return lineNumbers
+      ? { start: 1, show: true, ...config }
+      : { start: 1, show: false };
+  }
+
+  get optionalStyles() {
+    const overflowHeight = this.args.overflowHeight;
+    if (overflowHeight) {
+      const property =
+        typeof overflowHeight === 'string' ? 'height' : 'maxHeight';
+
+      return {
+        [property]:
+          typeof overflowHeight === 'string'
+            ? overflowHeight
+            : `${overflowHeight}px`
+      };
+    }
+    return {};
+  }
+
+  get showCopyButton() {
+    return this.isCopyable && true;
+  }
+
+  get rowHeight() {
+    return fontSizeToRowHeightMap[this.fontSize];
+  }
+
+  get showFullScreenButton() {
+    return !!this.args.overflowHeight;
+  }
+
+  constructor(owner: unknown, args: EuiCodeBlockArgs) {
+    super(owner, args);
+    this.codeTarget = document.createElement('div');
+  }
+
+  @action
+  toggleFullScreen() {
+    this.isFullScreen = !this.isFullScreen;
+  }
+
+  @action
+  closeFullScreen(e: KeyboardEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isFullScreen = false;
+  }
+
+  @action
+  doesOverflow() {
+    if (!this.wrapperRef) return;
+    const { clientWidth, clientHeight, scrollWidth, scrollHeight } =
+      this.wrapperRef;
+    const doesOverflow =
+      scrollHeight > clientHeight || scrollWidth > clientWidth;
+
+    this.tabIndex = doesOverflow ? 0 : -1;
+  }
+
+  @action
+  updateCode(resp: { data: RefractorNode[]; element: HTMLElement }) {
+    const render = () => {
+      const code = this.code;
+      const codeFullScreen = this.codeFullScreen;
+
+      if (code && !this.isFullScreen) {
+        this.data = resp;
+        code.innerHTML = resp.element.innerHTML;
+      }
+
+      if (codeFullScreen && this.isFullScreen) {
+        this.data = resp;
+        codeFullScreen.innerHTML = resp.element.innerHTML;
+      }
+    };
+    scheduleOnce('afterRender', this, render);
+  }
+}

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

@@ -0,0 +1,30 @@
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}}
+{{#let (unique-id) as |theID|}}
+  <EuiAutoSizer as |styles|>
+    <pre
+      {{style styles}}
+      {{!template-lint-disable}}
+      style="position: relative; overflow: auto;"
+      id={{theID}}
+      ...attributes
+    ><VerticalCollection
+        @items={{@data}}
+        @tagName="code"
+        class="euiCodeBlock__code"
+        data-code-language={{@language}}
+        @estimateHeight={{@rowHeight}}
+        @bufferSize={{40}}
+        @staticHeight={{true}}
+        @containerSelector={{concat "#" theID}}
+        as |opt index|
+      >{{this.getHtmlContent opt index @rowHeight}}</VerticalCollection></pre>
+  </EuiAutoSizer>
+{{/let}}

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

@@ -0,0 +1,22 @@
+import { helper } from '@ember/component/helper';
+import { RefractorNode } from 'refractor';
+import Component from '@glimmer/component';
+import { getHtmlContent } from '../../../utils/code/utils';
+
+export default class EuiCodeBlockVirtualizedComponent extends Component {
+  getHtmlContent = helper(function ([node, index, rowHeight]: [
+    RefractorNode,
+    number,
+    number
+  ]) {
+    const content = getHtmlContent([node]);
+    const span = content.element.firstChild as HTMLElement;
+    if (span) {
+      span.style.position = 'absolute';
+      span.style.height = `${rowHeight}px`;
+      span.style.left = '0';
+      span.style.top = `${index * rowHeight}px`;
+    }
+    return span;
+  });
+}

package/addon/components/eui-collapsible-nav/index.hbs

@@ -1,47 +1,38 @@
-{{!
-  Trigger button itself
-  By using a named block you can place any button as the trigger:
-  eg. HeaderSectionItem, EuiButton, EuiButtonIcon, or any custom button
-}}
-{{#if (not (and @navIsDocked (not @showButtonIfDocked)))}}
-  {{yield to="button"}}
-{{/if}}
-{{!
-  The side navigation panel, acts the same way as a flyout
-}}
-{{#if @isOpen}}
-  {{#let (unique-id) as |flyoutId|}}
-    {{#unless @navIsDocked}}
-      <EuiOverlayMask
-        @headerZindexLocation="below"
-        {{on "click" (unless @navIsDocked @onClose (noop))}}
-      />
-    {{/unless}}
-    <nav
-      id={{flyoutId}}
-      class={{class-names "euiCollapsibleNav" (if @navIsDocked "euiCollapsibleNav--isDocked")}}
+<span
+  {{this.onWindowResize
+    isDocked=this.isDocked
+    functionToCallOnWindowResize=this.functionToCallOnWindowResize
+  }}
+></span>
+{{#let (arg-or-default @id (unique-id)) as |flyoutID|}}
+
+  {{#if (not (and this.navIsDocked (not this.showButtonIfDocked)))}}
+    {{yield
+      (modifier this.triggerHandlers isOpen=@isOpen flyoutID=flyoutID)
+      to="button"
+    }}
+  {{/if}}
+
+  {{#if (or @isOpen this.navIsDocked)}}
+    <EuiFlyout
+      id={{flyoutID}}
+      class="euiCollapsibleNav"
+      @as={{this.as}}
+      @size={{this.size}}
+      @side={{this.side}}
+      @role={{this.role}}
+      @ownFocus={{this.ownFocus}}
+      @outsideClickCloses={{this.outsideClickCloses}}
+      @closeButtonPosition={{this.closeButtonPosition}}
+      @paddingSize={{this.paddingSize}}
+      @type={{if this.navIsDocked "push" "overlay"}}
+      @hideCloseButton={{this.navIsDocked}}
+      @pushMinBreakpoint={{this.dockedBreakpoint}}
+      @onClose={{@onClose}}
+      {{this.windowResize}}
       ...attributes
-      {{open-collapsible-nav @navIsDocked}}
-      {{on-key "Escape" (unless @navIsDocked @onClose)}}
-      {{focus-trap isActive=(not @navIsDocked) focusTrapOptions=(hash allowOutsideClick=true)}}
     >
       {{yield to="content"}}
-      {{!
-        Close button is for accessibility purposes only
-        To close, use ESC key, or click outside the Nav.
-        Commented for the time being
-      }}
-      {{!-- {{#if @showCloseButton}}
-        <EuiButtonEmpty
-          @onClick={{unless @navIsDocked @onClose}}
-          @size="xs"
-          @textClasses="euiCollapsibleNav__closeButtonText"
-          @iconType="cross"
-          class="euiCollapsibleNav__closeButton"
-        >
-          {{@closeButtonLabel}}
-        </EuiButtonEmpty>
-      {{/if}} --}}
-    </nav>
-  {{/let}}
-{{/if}}
+    </EuiFlyout>
+  {{/if}}
+{{/let}}