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

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}}

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

@@ -8,30 +8,34 @@
   )
   as |inlineStyles|
 }}
-  <div
-    class={{class-names
-      "euiModal"
-      (if (eq @maxWidth true) "euiModal--maxWidth-default")
-    }}
-    tabindex="0"
-    ...attributes
-    {{style inlineStyles}}
-    {{focus-trap
-      isActive=(arg-or-default @isFocusTrapActive true)
-      shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-      isPaused=(arg-or-default @isFocusTrapPaused false)
-      focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
-    }}
-    {{on-key "Escape" @onClose}}
+  <EuiOverlayMask
+    @onClick={{if @clickOutsideToClose (optional @onClose) (noop)}}
   >
-    <EuiButtonIcon
-      class="euiModal__closeIcon"
-      @iconType="cross"
-      @color="text"
-      {{on "click" @onClose}}
-    />
-    <div class="euiModal__flex">
-      {{yield}}
+    <div
+      class={{class-names
+        "euiModal"
+        (if (eq @maxWidth true) "euiModal--maxWidth-default")
+      }}
+      tabindex="0"
+      ...attributes
+      {{style inlineStyles}}
+      {{focus-trap
+        isActive=(arg-or-default @isFocusTrapActive true)
+        shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
+        isPaused=(arg-or-default @isFocusTrapPaused false)
+        focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
+      }}
+      {{on-key "Escape" (prevent-default (stop-propagation @onClose))}}
+    >
+      <EuiButtonIcon
+        class="euiModal__closeIcon"
+        @iconType="cross"
+        @color="text"
+        {{on "click" @onClose}}
+      />
+      <div class="euiModal__flex">
+        {{yield}}
+      </div>
     </div>
-  </div>
+  </EuiOverlayMask>
 {{/let}}

package/addon/components/eui-overlay-mask/index.hbs

@@ -1,8 +1,5 @@
 {{set-body-class "euiBody-hasOverlayMask"}}
-{{#in-element
-  this.destinationElement
-  insertBefore=null
-}}
+{{#in-element this.destinationElement insertBefore=null}}
   <div
     class={{class-names
       "euiOverlayMask"
@@ -12,6 +9,9 @@
         "euiOverlayMask--belowHeader"
       )
     }}
+    {{did-insert (set this "overlayMaskNode")}}
+    {{! template-lint-disable }}
+    {{on "click" this.onClick}}
     ...attributes
   >
     {{yield}}

package/addon/components/eui-overlay-mask/index.ts

@@ -1,6 +1,19 @@
 import GlimmerComponent from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-interface EuiOverlayMaskArgs {}
+interface EuiOverlayMaskArgs {
+  onClick(): void;
+}
 export default class EuiOverlayMaskComponent extends GlimmerComponent<EuiOverlayMaskArgs> {
+  @tracked overlayMaskNode: HTMLDivElement | undefined;
+
   destinationElement = document.body;
+
+  @action
+  onClick(e: MouseEvent) {
+    if (e.target === this.overlayMaskNode) {
+      this.args.onClick?.();
+    }
+  }
 }

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

@@ -14,6 +14,7 @@
   }}
     <div
       class={{class-names
+        (if @grow "euiPage--grow" "")
         styling.widthClassName
         componentName="EuiPage"
         paddingSize=(arg-or-default @paddingSize "m")
@@ -21,14 +22,10 @@
       ...attributes
       {{style
         (if styling.widthStyle (inline-styles max-width=styling.widthStyle))
+        (inline-styles min-height="460px;")
       }}
     >
-      {{yield
-        (hash
-          Sidebar=(component "eui-page-side-bar")
-          Body=(component "eui-page-body")
-        )
-      }}
+      {{yield}}
     </div>
   {{/let}}
 {{/let}}

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

@@ -1,34 +1,66 @@
 {{#let
   (arg-or-default @tagName "div")
-  (arg-or-default @restrictWidth false) as |tagName restrictWidth|
+  (arg-or-default @restrictWidth false)
+  (arg-or-default @borderRadius "none")
+  (arg-or-default @paddingSize (if @panelled "l" "none"))
+  as |tagName restrictWidth borderRadius paddingSize|
 }}
+
   {{#let
     (if
       (eq restrictWidth true)
-      (hash widthClassName="euiPageBody--restrictWidth-default")
+      (hash widthClassName="euiPageBody--restrictWidth-custom")
       (if
-        (not-eq restrictWidth false)
-        (hash widthClassName="euiPageBody--restrictWidth-custom" widthStyle=restrictWidth)
+        (eq restrictWidth false)
+        (hash
+          widthClassName="euiPageBody--restrictWidth-default"
+          widthStyle=restrictWidth
+        )
       )
-    ) as |styling|
+    )
+    as |styling|
   }}
-    {{#if (eq tagName "div")}}
-      <div
-        class={{class-names styling.widthClassName "euiPageBody"}}
+    {{#if @panelled}}
+      <EuiPanel
+        class={{class-names
+          componentName="EuiPageBody"
+          borderRadiusSize=borderRadius
+          paddingSize=@paddingSize
+        }}
+        @paddingSize={{paddingSize}}
+        @borderRadius={{borderRadius}}
+        {{!-- @paddingSize={{arg-or-default @paddingSize "none"}} --}}
+        {{!-- @restrictWidth={{@restrictWidth}} --}}
         ...attributes
-        {{style (if styling.widthStyle (inline-styles max-width=styling.widthStyle))}}
+        {{style
+          (if styling.widthStyle (inline-styles max-width=styling.widthStyle))
+        }}
       >
-        {{yield (hash Header=(component "eui-page-header") Content=(component "eui-page-content"))}}
-      </div>
+        {{!-- <div
+          class={{class-names
+            componentName="EuiPageBody"
+            borderRadiusSize=borderRadius
+            paddingSize=paddingSize
+          }}
+        > --}}
+        {{yield}}
+        {{! </div> }}
+      </EuiPanel>
     {{else}}
       {{#let (element tagName) as |Tag|}}
         <Tag
-          class={{class-names styling.widthClassName "euiPageBody"}}
-          style={{if styling.widthStyle (inline-styles max-width=styling.widthStyle)}}
+          class={{class-names
+            componentName="EuiPageBody"
+            borderRadiusSize=borderRadius
+            paddingSize=paddingSize
+          }}
+          style={{if
+            styling.widthStyle
+            (inline-styles max-width=styling.widthStyle)
+          }}
           ...attributes
         >
-          {{yield (hash Header=(component "eui-page-header") Content=(component "eui-page-content"))
-          }}
+          {{yield}}
         </Tag>
       {{/let}}
     {{/if}}

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

@@ -1,19 +1,17 @@
-{{! TODO: Add Beta Badge Component for Beta Label props}}
 <EuiPanel
   class={{class-names
     componentName="EuiPageContent"
     verticalPosition=@verticalPosition
     horizontalPosition=@horizontalPosition
+    borderRadius=@borderRadius
   }}
   @hasShadow={{@hasShadow}}
-  @paddingSize={{@paddingSize}}
+  @hasBorder={{@hasBorder}}
+  @paddingSize={{arg-or-default @paddingSize "l"}}
+  @borderRadius={{@borderRadius}}
+  @color={{@color}}
   @grow={{@grow}}
   ...attributes
 >
-  {{yield
-    (hash
-      Header=(component "eui-page-content-header")
-      Body=(component "eui-page-content-body")
-    )
-  }}
+  {{yield}}
 </EuiPanel>

package/addon/components/eui-page-content-body/index.hbs

@@ -1,3 +1,15 @@
-<div class="euiPageContentBody" ...attributes>
+<div
+  class={{class-names
+    (if
+      @restrictWidth
+      "euiPage--restrictWidth-custom"
+      "euiPage--restrictWidth-default"
+    )
+    componentName="EuiPageContentBody"
+    paddingSize=@paddingSize
+  }}
+  {{style (inline-styles width=@restrictWidth)}}
+  ...attributes
+>
   {{yield}}
 </div>

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

@@ -2,7 +2,13 @@
   class={{class-names
     "euiPageContentHeader"
     (if @responsive "euiPageContentHeader--responsive")
+    (if
+      @restrictWidth
+      "euiPanel--restrictWidth-custom"
+      "euiPanel--restrictWidth-default"
+    )
   }}
+  {{style (inline-styles width=@restrictWidth)}}
   ...attributes
 >
   {{yield

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

@@ -1,11 +1,36 @@
-<div
+<header
   class={{class-names
-    "euiPageHeader"
+    (if @bottomBorder "euiPageHeader--bottomBorder")
     (if @responsive "euiPageHeader--responsive")
+    (if (and @pageTitle @tabs) "euiPageHeader--tabsAtBottom")
+    (if
+      (and @tabs (not @pageTitle) (not @rightSideItems) (not @description))
+      "euiPageHeader--onlyTabs"
+    )
+    (if (eq @responsive "reverse") "euiPageHeader--responsiveReverse")
+    (if
+      @alignItems (concat "euiPageHeader--" @alignItems) "euiPageHeader--center"
+    )
+    (if
+      (eq @restrictWidth true)
+      "euiPageHeader--restrictWidth-default"
+      (if (not-eq @restrictWidth false) "euiPageHeader--restrictWidth-custom")
+    )
+    componentName="EuiPageHeader"
+    paddingSize=@paddingSize
   }}
   ...attributes
 >
-  {{yield
-    (hash Section=(component "eui-page-header-section"))
-  }}
-</div>
+  <EuiPageHeaderContent
+    @alignItems={{@alignItems}}
+    @responsive={{@responsive}}
+    @pageTitle={{@pageTitle}}
+    @iconType={{@iconType}}
+    @tabs={{@tabs}}
+    @description={{@description}}
+    @rightSideItems={{@rightSideItems}}
+    @restrictWidth={{@restrictWidth}}
+  >
+    {{yield}}
+  </EuiPageHeaderContent>
+</header>