@ember-eui/core 1.2.3 → 1.3.3

package/CHANGELOG.md

@@ -2,17 +2,38 @@
 
 ### Master
 
-
 ### 1.3.0
-🏠 Internal
+🚀 Enhancements
 `@ember-eui/core`
-- update ember-power-select in order to be able to pass attributes to trigger
+- `<EuiMarkdownEditor />` `<EuiMarkdownFormat />` `<EuiCode />` `<EuiCopy />` `<EuiCodeBlock />`
 
-### 1.3.0
+`@ember-eui/validated-form`
+- `<Form.FieldMarkdownEditor />`
+
+
+### 1.2.6
+🐛 Bug / Fixes
+- Update ember-svg-jar dependency
+
+### 1.2.5
+🐛 Bug / Fixes
+`@ember-eui/core`
+- Fix `<EuiComboBox/>` isClereable
+
+### 1.2.4
+🏠 Internal
+`@ember-eui/changeset-form`,`@ember-eui/validated-form`
+- Pass down isCleareable to <EuiComboBox /> wrapped components
+
+### 1.2.3
 🚀 Enhancements
 `@ember-eui/core`
 - add errorMessage for validatable-control for i18n or so
 
+🏠 Internal
+`@ember-eui/core`
+- update ember-power-select in order to be able to pass attributes to trigger
+
 ### 1.2.2
 🐛 Bug / Fixes
 `@ember-eui/core`

package/README.md

@@ -9,7 +9,7 @@ For icons to work you will need to:
 - install `ember-svg-jar`
 - add the following `ember-svg-jar` options to your `ember-cli-build.js`:
 - NOTICE: we are currently using a fork from ember-svg-jar, for the hbs strategy
-  `"ember-svg-jar": "github:betocantu93/ember-svg-jar#add-bundle-flag"`
+  `"ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag"`
 
 ```javascript
 // ember-cli-build.js

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-combo-box/index.hbs

@@ -27,6 +27,7 @@
     onCreateOption=(if
       @onCreateOption (pipe this.onCreateOption @onCreateOption)
     )
+    isClearable=@isClearable
   }}
   @matcher={{@matcher}}
   @initiallyOpen={{@initiallyOpen}}
@@ -81,8 +82,8 @@
     )
     (component "eui-combo-box/no-matches-message")
   }}
-  @dropdownClass="euiComboBoxOptionsList euiPanel euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--plain euiPopover__panel-isAttached euiPopover__panel-noArrow euiPopover__panel--bottom euiPopover__panel-isOpen euiComboBoxOptionsList__rowWrap
-    {{@dropdownClass}}" as |option i|
+  @dropdownClass="euiComboBoxOptionsList euiPanel euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--plain euiPopover__panel-isAttached euiPopover__panel-noArrow euiPopover__panel--bottom euiPopover__panel-isOpen euiComboBoxOptionsList__rowWrap {{@dropdownClass}}"
+  as |option i|
 >
   {{yield option i}}
 </PowerSelectMultiple>

package/addon/components/eui-combo-box/trigger/index.hbs

@@ -1,115 +1,121 @@
-<EuiFormControlLayout
-  @icon="arrowDown"
-  @iconSide="right"
-  @fullWidth={{@fullWidth}}
-  @compressed={{@compressed}}
-  @readOnly={{@readOnly}}
-  @clear={{if (and @select.selected @onClear) @onClear}}
-  @disabled={{@select.disabled}}
->
-  <:field>
-    {{! template-lint-disable }}
-    <ul
-      id="ember-power-select-multiple-options-{{@select.uniqueId}}"
-      class={{class-names
-        "euiComboBox__inputWrap ember-power-select-multiple-options"
-        (if @compressed "euiComboBox__inputWrap--compressed")
-        (if @fullWidth "euiComboBox__inputWrap--fullWidth")
-        (if @singleSelection "euiComboBox__inputWrap--noWrap")
-        (if @isLoading "euiComboBox__inputWrap--isLoading")
-        (if @onClear "euiComboBox__inputWrap--isClearable")
-      }}
-      ...attributes
-      {{did-update this.openChanged @select.isOpen}}
-      {{on "touchstart" this.chooseOption}}
-      {{on "mousedown" this.chooseOption}}
-    >
-      {{! template-lint-enable }}
-      {{#if
-        (or
-          (and @singleSelection (not @select.searchText)) (not @singleSelection)
-        )
-      }}
-        {{#each @select.selected as |opt idx|}}
-          {{#if @selectedItemComponent}}
-            {{component
-              @selectedItemComponent
-              extra=@extra
-              option=opt
-              select=@select
-            }}
-          {{else}}
-            <EuiComboBoxPill
-              class="ember-power-select-multiple-option
-                {{if
-                  opt.disabled
-                  "ember-power-select-multiple-option--disabled"
-                }}"
-              @option={{opt}}
-              @onClose={{if
-                (or @select.disabled @singleSelection)
-                false
-                (if @onClose (fn (optional @onClose) opt) true)
+{{#let (arg-or-default @isClearable true) as |isClearable|}}
+  <EuiFormControlLayout
+    @icon="arrowDown"
+    @iconSide="right"
+    @fullWidth={{@fullWidth}}
+    @compressed={{@compressed}}
+    @readOnly={{@readOnly}}
+    @clear={{if
+      (and @select.selected isClearable)
+      (fn @select.actions.select (array))
+    }}
+    @disabled={{@select.disabled}}
+  >
+    <:field>
+      {{! template-lint-disable }}
+      <ul
+        id="ember-power-select-multiple-options-{{@select.uniqueId}}"
+        class={{class-names
+          "euiComboBox__inputWrap ember-power-select-multiple-options"
+          (if @compressed "euiComboBox__inputWrap--compressed")
+          (if @fullWidth "euiComboBox__inputWrap--fullWidth")
+          (if @singleSelection "euiComboBox__inputWrap--noWrap")
+          (if @isLoading "euiComboBox__inputWrap--isLoading")
+          (if isClearable "euiComboBox__inputWrap-isClearable")
+        }}
+        ...attributes
+        {{did-update this.openChanged @select.isOpen}}
+        {{on "touchstart" this.chooseOption}}
+        {{on "mousedown" this.chooseOption}}
+      >
+        {{! template-lint-enable }}
+        {{#if
+          (or
+            (and @singleSelection (not @select.searchText))
+            (not @singleSelection)
+          )
+        }}
+          {{#each @select.selected as |opt idx|}}
+            {{#if @selectedItemComponent}}
+              {{component
+                @selectedItemComponent
+                extra=@extra
+                option=opt
+                select=@select
               }}
-              @dataSelectedIconIndex={{idx}}
-              @color={{opt.color}}
-              @asPlainText={{@singleSelection.asPlainText}}
-            >
-              {{yield opt @select}}
-            </EuiComboBoxPill>
+            {{else}}
+              <EuiComboBoxPill
+                class="ember-power-select-multiple-option
+                  {{if
+                    opt.disabled
+                    "ember-power-select-multiple-option--disabled"
+                  }}"
+                @option={{opt}}
+                @onClose={{if
+                  (or @select.disabled @singleSelection)
+                  false
+                  (if @onClose (fn (optional @onClose) opt) true)
+                }}
+                @dataSelectedIconIndex={{idx}}
+                @color={{opt.color}}
+                @asPlainText={{@singleSelection.asPlainText}}
+              >
+                {{yield opt @select}}
+              </EuiComboBoxPill>
+            {{/if}}
+          {{else if (and @placeholder (not @searchEnabled))}}
+            <span class="ember-power-select-placeholder">
+              {{@placeholder}}
+            </span>
+          {{/each}}
+        {{/if}}
+        {{#if @searchEnabled}}
+          {{! template-lint-disable }}
+          {{#if (and this.maybePlaceholder (not @select.searchText))}}
+            <p class="euiComboBoxPlaceholder">
+              {{this.maybePlaceholder}}
+            </p>
           {{/if}}
-        {{else if (and @placeholder (not @searchEnabled))}}
-          <span class="ember-power-select-placeholder">
-            {{@placeholder}}
-          </span>
-        {{/each}}
-      {{/if}}
-      {{#if @searchEnabled}}
-        {{! template-lint-disable }}
-        {{#if (and this.maybePlaceholder (not @select.searchText))}}
-          <p class="euiComboBoxPlaceholder">
-            {{this.maybePlaceholder}}
-          </p>
+          <div
+            class="euiComboBox__input"
+            style="font-size: 14px; display: inline-block; position: relative;"
+          >
+            <input
+              tabindex="-1"
+              style="opacity: 0px; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important;"
+              class="fake-input-for-html-form-validity"
+              {{validatable-control @isInvalid}}
+            />
+            <input
+              class="ember-power-select-trigger-multiple-input euiComboBox__input"
+              autocomplete="off"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck={{false}}
+              id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
+              value={{@select.searchText}}
+              aria-controls={{@listboxId}}
+              style={{this.triggerMultipleInputStyle}}
+              disabled={{@select.disabled}}
+              tabindex={{@tabindex}}
+              form="power-select-fake-form"
+              {{on "focus" @onFocus}}
+              {{on "blur" @onBlur}}
+              {{on "input" this.handleInput}}
+              {{on "keydown" this.handleKeydown}}
+              {{did-insert this.storeInputStyles}}
+            />
+          </div>
+          {{! template-lint-enable }}
+        {{else}}
+          {{! template-lint-disable }}
+          <div
+            class="euiComboBox__input"
+            style="font-size: 14px; display: inline-block;"
+          ></div>
+          {{! template-lint-enable }}
         {{/if}}
-        <div
-          class="euiComboBox__input"
-          style="font-size: 14px; display: inline-block; position: relative;"
-        >
-          <input
-            tabindex="-1"
-            style="opacity: 0px; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important;"
-            class="fake-input-for-html-form-validity"
-            {{validatable-control @isInvalid}}
-          />
-          <input
-            class="ember-power-select-trigger-multiple-input euiComboBox__input"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck={{false}}
-            id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
-            value={{@select.searchText}}
-            aria-controls={{@listboxId}}
-            style={{this.triggerMultipleInputStyle}}
-            disabled={{@select.disabled}}
-            tabindex={{@tabindex}}
-            form="power-select-fake-form"
-            {{on "focus" @onFocus}}
-            {{on "blur" @onBlur}}
-            {{on "input" this.handleInput}}
-            {{on "keydown" this.handleKeydown}}
-            {{did-insert this.storeInputStyles}}
-          />
-        </div>
-        {{! template-lint-enable }}
-      {{else}}
-        {{! template-lint-disable }}
-        <div
-          class="euiComboBox__input"
-          style="font-size: 14px; display: inline-block;"
-        ></div>
-        {{! template-lint-enable }}
-      {{/if}}
-    </ul>
-  </:field>
-</EuiFormControlLayout>
+      </ul>
+    </:field>
+  </EuiFormControlLayout>
+{{/let}}