@ember-eui/core 7.0.11 → 7.0.13-7.0.13-alpha.1.0

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

@@ -49,7 +49,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     if (this.args.rootClasses) {
       let rootClasses = isArray(this.args.rootClasses)
         ? this.args.rootClasses
-        : (this.args.rootClasses as string)?.trim()?.split(' ') || [];
+        : (this.args.rootClasses as string)?.split(' ') || [];
 
       baseClasses = baseClasses.concat(rootClasses);
     }

package/addon/modifiers/outside-click-detector.ts

@@ -1,6 +1,7 @@
 import Modifier from 'ember-modifier';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
+import { registerDestructor } from '@ember/destroyable';
 
 interface OutsideClickDetectorModifierArgs {
   positional: [];
@@ -22,9 +23,13 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
   id!: string;
   capturedDownIds: string[] = [];
 
+  element!: Element;
+  named!: OutsideClickDetectorModifierArgs['named'];
+  positional!: OutsideClickDetectorModifierArgs['positional'];
+
   @action
   onClickOutside(e: Event): void {
-    const { isDisabled, onOutsideClick } = this.args.named;
+    const { isDisabled, onOutsideClick } = this.named;
 
     if (isDisabled) {
       this.capturedDownIds = [];
@@ -45,13 +50,32 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
     return onOutsideClick(event);
   }
 
-  didInstall(): void {
+  //@ts-expect-error dont know how to type this
+  modify(
+    element: Element,
+    positional: OutsideClickDetector['positional'],
+    named: OutsideClickDetector['named']
+  ): void {
+    this.element = element;
+    this.named = named;
+    this.positional = positional;
+    this._setup();
+    registerDestructor(this, () => this._teardown());
+  }
+
+  _setup(): void {
     this.id = guidFor({});
     document.addEventListener('mouseup', this.onClickOutside);
     document.addEventListener('touchend', this.onClickOutside);
     this.addElementEvents();
   }
 
+  _teardown(): void {
+    document.removeEventListener('mouseup', this.onClickOutside);
+    document.removeEventListener('touchend', this.onClickOutside);
+    this.removeElementEvents();
+  }
+
   addElementEvents(): void {
     this.element.addEventListener('mousedown', this.onChildMouseDown);
     this.element.addEventListener('touchstart', this.onChildMouseDown);
@@ -66,12 +90,6 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
     this.element.removeEventListener('touchend', this.onChildMouseUp);
   }
 
-  willRemove(): void {
-    document.removeEventListener('mouseup', this.onClickOutside);
-    document.removeEventListener('touchend', this.onClickOutside);
-    this.removeElementEvents();
-  }
-
   @action
   onChildClick(event: MouseEvent, cb: (event: MouseEvent) => void): void {
     // to support nested click detectors, build an array
@@ -90,16 +108,16 @@ export default class OutsideClickDetector extends Modifier<OutsideClickDetectorM
     this.onChildClick(event, (e) => {
       const nativeEvent = e as unknown as EuiEvent;
       this.capturedDownIds = nativeEvent.euiGeneratedBy;
-      if (this.args.named.onMouseDown) this.args.named.onMouseDown(e);
-      if (this.args.named.onTouchStart) this.args.named.onTouchStart(e);
+      this.named?.onMouseDown?.(e);
+      this.named?.onTouchStart?.(e);
     });
   }
 
   @action
   onChildMouseUp(event: MouseEvent): void {
     this.onChildClick(event, (e) => {
-      if (this.args.named.onMouseUp) this.args.named.onMouseUp(e);
-      if (this.args.named.onTouchEnd) this.args.named.onTouchEnd(e);
+      this.named?.onMouseUp?.(e);
+      this.named?.onTouchEnd?.(e);
     });
   }
 }

package/addon/modifiers/resize-observer.ts

@@ -1,5 +1,6 @@
 import Modifier from 'ember-modifier';
 import { action } from '@ember/object';
+import { registerDestructor } from '@ember/destroyable';
 
 // IE11 and Safari don't support the `ResizeObserver` API at the time of writing
 const hasResizeObserver =
@@ -60,9 +61,13 @@ export default class ResizeObserver extends Modifier<ResizeObserverArgs> {
   width: number = 0;
   observer: Observer | null = null;
 
+  element!: Element;
+  named!: ResizeObserverArgs['named'];
+  positional!: ResizeObserverArgs['positional'];
+
   @action
   setSize({ width, height }: { width: number; height: number }) {
-    let [dimension] = this.args.positional;
+    let [dimension] = this.positional;
     const doesWidthMatter = dimension !== 'height';
     const doesHeightMatter = dimension !== 'width';
     if (
@@ -71,11 +76,24 @@ export default class ResizeObserver extends Modifier<ResizeObserverArgs> {
     ) {
       this.width = width;
       this.height = height;
-      this.args.named?.onResize({ width, height });
+      this.named?.onResize({ width, height });
     }
   }
 
-  didInstall() {
+  //@ts-expect-error dont know how to type this
+  modify(
+    element: Element,
+    positional: ['width' | 'height'],
+    named: { onResize: (dimensions: { height: number; width: number }) => void }
+  ) {
+    this.element = element;
+    this.named = named;
+    this.positional = positional;
+    this._setup();
+    registerDestructor(this, () => this._teardown());
+  }
+
+  _setup() {
     let { setSize, element } = this;
     if (element != null) {
       // ResizeObserver's first call to the observation callback is scheduled in the future
@@ -101,7 +119,7 @@ export default class ResizeObserver extends Modifier<ResizeObserverArgs> {
     }
   }
 
-  willRemove() {
+  _teardown() {
     this.observer?.disconnect();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "7.0.11",
+  "version": "7.0.13-7.0.13-alpha.1.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -66,14 +66,14 @@
     "ember-cli-string-helpers": "^6.1.0",
     "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
-    "ember-element-helper": "^0.6.0",
+    "ember-element-helper": "^0.8.5",
     "ember-event-helpers": "^0.1.1",
     "ember-in-element-polyfill": "^1.0.0",
     "ember-keyboard": "^7.0.1",
     "ember-math-helpers": "^2.15.0",
-    "ember-modifier": "^3.1.0",
+    "ember-modifier": "^4.1.0",
     "ember-named-blocks-polyfill": "^0.2.3",
-    "ember-power-select": "7.0.0",
+    "ember-power-select": "7.1.2",
     "ember-set-body-class": "^1.0.2",
     "ember-set-helper": "^2.0.1",
     "ember-style-modifier": "^0.7.0",
@@ -186,5 +186,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "43e92f974430c62511e62bfa0b12fe2b50900b36"
+  "gitHead": "e6ea2cbd75f5490039cbd98a298e7f07df2d675f"
 }

package/tsconfig.json

@@ -14,6 +14,7 @@
       "core/*": ["addon/*"],
       "core/test-support": ["addon-test-support"],
       "core/test-support/*": ["addon-test-support/*"],
+      "@ember/destroyable": ["../../node_modules/ember-destroyable-polyfill"],
       "*": ["types/*"]
     }
   },