@ember-eui/core 4.2.0 → 4.2.4

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 ### Master
 
+### 4.2.4
+🐛 Bug / Fixes
+`@ember-eui/core`
+- `<EuiIcon />` Drop wrapping svg div, add futurist css override
+### 4.2.3
+🐛 Bug / Fixes
+`@ember-eui/core`
+- Cherry pick 1.6.x fix commit hash https://github.com/prysmex/ember-eui/commit/c4b8a4a259f6b86c2be516fd7427f5e48b28cecd
+- Use next for updating the attachTo for `<EuiToolTip />`
+
+### 4.2.2
+🐛 Bug / Fixes
+`@ember-eui/core`
+- fix typing issues
+
+### 4.2.1
+🐛 Bug / Fixes
+`@ember-eui/core`
+- fix markdown editor components
+
 ### 4.2.0
 🚀 Enhancements
 `@ember-eui/core`
@@ -109,6 +129,11 @@ bump @embroider 1.3.0 regenerating yarn.lock, this finally enables staticCompone
 💥 Breaking change
 `@ember-eui/core`
 - Deprecate `ember-svg-jar` `hbs` strategy for now, just use stock `ember-svg-jar`
+
+### 1.6.10
+🐛 Bug / Fixes
+`@ember-eui/core`
+- `<EuiComboBox />` fixes to `onCreateOption`
 ### 1.6.7
 🐛 Bug / Fixes
 `@ember-eui/core`

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

@@ -25,7 +25,7 @@
     singleSelection=@singleSelection
     onClose=@removeTag
     onCreateOption=(if
-      @onCreateOption (pipe this.onCreateOption @onCreateOption)
+      @onCreateOption this.onCreateOption
     )
   }}
   @matcher={{@matcher}}
@@ -75,7 +75,7 @@
     (component
       "eui-combo-box/create-option"
       customOptionText=@customOptionText
-      onCreateOption=(pipe this.onCreateOption @onCreateOption)
+      onCreateOption=this.onCreateOption
       select=this.select
     )
     (component "eui-combo-box/no-matches-message")

package/addon/components/eui-combo-box/index.ts

@@ -7,6 +7,7 @@ import { isEqual } from '@ember/utils';
 
 interface EuiComboBoxArgs {
   singleSelection: boolean;
+  onCreateOption?: (search: string) => boolean | undefined;
 }
 
 interface Select {
@@ -64,9 +65,19 @@ export default class EuiComboBoxComponent extends Component<EuiComboBoxArgs> {
 
   @action
   onCreateOption() {
-    let search = this.select.searchText;
+    let option;
+    if (
+      this.args.onCreateOption &&
+      typeof this.args.onCreateOption === 'function'
+    ) {
+      // The `onCreateOption` function can be used to sanitize the input or explicitly return `false` to reject the input
+      option = this.args.onCreateOption(this.select.searchText);
+      if (option === false) {
+        return;
+      }
+    }
+    let search = option || this.select.searchText;
     this.select.actions.search('');
-    this.select.actions.select(search);
     this.select.actions.close();
     return search;
   }

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

@@ -33,26 +33,20 @@
       ...attributes
     />
   {{else}}
-    <div
-      class={{class-names "euiIcon" (if this.isAppIcon "euiIcon--app")}}
-      ...attributes
-    >
-      {{svg-jar
-        this.icon
-        class=(class-names
-          this.optionalColorClass
-          (if this.isAppIcon "euiIcon--app")
-          componentName="EuiIcon"
-          addBase=false
-          size=this.size
-        )
-        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)
-        tabindex=this.tabIndex
-        style=this.optionalCustomStyles
-      }}
-    </div>
+    {{svg-jar
+      this.icon
+      class=(class-names
+        this.optionalColorClass
+        (if this.isAppIcon "euiIcon--app")
+        componentName="EuiIcon"
+        size=this.size
+      )
+      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)
+      tabindex=this.tabIndex
+      style=this.optionalCustomStyles
+    }}
   {{/if}}
 {{/if}}

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

@@ -0,0 +1,3 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownFormatMarkdownCode = typeof templateOnlyComponent;

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

@@ -0,0 +1,3 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownFormatMarkdownCodeBlock = typeof templateOnlyComponent;

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

@@ -0,0 +1,3 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownFormatMarkdownTooltip = typeof templateOnlyComponent;

package/addon/components/eui-tool-tip/index.ts

@@ -5,7 +5,7 @@ import { uniqueId } from '../../helpers/unique-id';
 import { tracked, cached } from '@glimmer/tracking';
 import { findPopoverPosition } from '../../utils/popover';
 import { keys } from '../../utils/keys';
-import { later, cancel, scheduleOnce } from '@ember/runloop';
+import { later, cancel, scheduleOnce, next } from '@ember/runloop';
 
 export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
 
@@ -113,9 +113,11 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
     }
 
     if (this.args.attachTo && this.args.attachTo !== this._attachTo) {
-      this.removeAttachToHandlers();
-      this._attachTo = this.args.attachTo;
-      this.setupAttachToHandlers();
+      next(() => {
+        this.removeAttachToHandlers();
+        this._attachTo = this.args.attachTo;
+        this.setupAttachToHandlers();
+      });
     }
   }
 
@@ -246,13 +248,16 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
       }
     });
 
-    const windowWidth = document.documentElement.clientWidth || window.innerWidth;
+    const windowWidth =
+      document.documentElement.clientWidth || window.innerWidth;
     const useRightValue = windowWidth / 2 < left;
 
     const toolTipStyles: ToolTipStyles = {
       top: `${top}px`,
       left: useRightValue ? 'auto' : `${left}px`,
-      right: useRightValue ? `${windowWidth - left - this.popover.offsetWidth}px` : 'auto'
+      right: useRightValue
+        ? `${windowWidth - left - this.popover.offsetWidth}px`
+        : 'auto'
     };
 
     this.visible = true;
@@ -299,7 +304,8 @@ export default class EuiToolTip extends Component<EuiTooltipArgs> {
     // left the anchor for a non-child.
     if (
       this._anchor === event.relatedTarget ||
-      (this._anchor != null && !this._anchor.contains(event.relatedTarget as Node))
+      (this._anchor != null &&
+        !this._anchor.contains(event.relatedTarget as Node))
     ) {
       this.hideToolTip();
     }

package/addon/styles/ember-eui.css

@@ -1,3 +1,31 @@
-.euiIcon {
-  line-height: 1; /* added while we support back hbs svgs components */
-}
+/*
+  @override
+  .euiAvatar for future css
+*/
+.euiAvatar {
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background-size: cover;
+  text-align: center;
+  vertical-align: middle;
+  overflow-x: hidden;
+  font-weight: 500;
+}
+
+.euiMarkdownEditor--fullHeight {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+}
+
+.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
+  display: none;
+}

package/addon/utils/markdown/plugins/markdown-add-components.ts

@@ -1,4 +1,6 @@
 import { RehypeNode } from '../markdown-types';
+import EuiMarkdownFormatMarkdownCode from '../../../components/eui-markdown-format/markdown-code';
+import EuiMarkdownFormatMarkdownCodeBlock from '../../../components/eui-markdown-format/markdown-code-block';
 
 type Visitor = (node: RehypeNode) => RehypeNode;
 
@@ -48,12 +50,11 @@ export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
           /\r|\n/.exec(child.value)
         );
         if (hasBreaks) {
-          node.properties.componentName =
-            'eui-markdown-format/markdown-code-block';
+          node.properties.componentName = EuiMarkdownFormatMarkdownCodeBlock;
           node.properties.fontSize = 'm';
           node.properties.paddingSize = 's';
         } else {
-          node.properties.componentName = 'eui-markdown-format/markdown-code';
+          node.properties.componentName = EuiMarkdownFormatMarkdownCode;
           node.properties.inline = true;
         }
       }

package/addon/utils/markdown/plugins/markdown-checkbox.ts

@@ -19,10 +19,11 @@
 
 import { RemarkTokenizer } from '../markdown-types';
 import { Plugin } from 'unified';
+import EuiMarkdownFormatMarkdownCheckbox from '../../../components/eui-markdown-format/markdown-checkbox';
 
 interface CheckboxNodeDetails {
   type: 'component';
-  componentName: 'eui-markdown-format/markdown-checkbox';
+  componentName: any;
   lead: string;
   label: string;
   isChecked: boolean;
@@ -64,7 +65,7 @@ const CheckboxParser: Plugin = function CheckboxParser() {
 
     return add({
       type: 'component',
-      componentName: 'eui-markdown-format/markdown-checkbox',
+      componentName: EuiMarkdownFormatMarkdownCheckbox,
       lead,
       label: text,
       isChecked,

package/addon/utils/markdown/plugins/markdown-tooltip.ts

@@ -1,5 +1,6 @@
 import { RemarkTokenizer } from '../markdown-types';
 import { Plugin } from 'unified';
+import EuiMarkdownFormatMarkdownTooltip from '../../../components/eui-markdown-format/markdown-tooltip';
 
 interface TooltipNodeDetails {
   type: 'component';
@@ -95,7 +96,7 @@ const TooltipParser: Plugin = function TooltipParser() {
 
     return eat(`!{tooltip[${tooltipAnchor}](${tooltipText})}`)({
       type: 'component',
-      componentName: 'eui-markdown-format/markdown-tooltip',
+      componentName: EuiMarkdownFormatMarkdownTooltip,
       tooltipText: tooltipText,
       children
     } as TooltipNodeDetails);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "4.2.0",
+  "version": "4.2.4",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -176,5 +176,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "1d9ef2507067bb2f647f291004f8e72f5743df4a"
+  "gitHead": "129e8ad0a68528eddbb628ca3772c7297d48621c"
 }

package/addon/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.d.ts

@@ -1,4 +0,0 @@
-import templateOnlyComponent from '@ember/component/template-only';
-
-export type EuiMarkdownEditorToolbarIconsMarkdownCheckmark =
-  typeof templateOnlyComponent;