ember-attacher 1.3.0 → 2.0.1

package/addon/components/attach-tooltip.js

@@ -1,50 +1,32 @@
-import classic from 'ember-classic-decorator';
-import { observes } from '@ember-decorators/object';
-import { computed } from '@ember/object';
 import AttachPopover from './attach-popover';
 import DEFAULTS from '../defaults';
+import layout from '../templates/components/attach-popover';
+import { setComponentTemplate } from '@ember/component';
 
-@classic
-export default class AttachTooltip extends AttachPopover {
+class AttachTooltip extends AttachPopover {
   configKey = 'tooltip';
-  ariaRole = 'tooltip';
 
-  @computed('_config.tooltipClass')
-  get class() {
-    return this._config.tooltipClass || DEFAULTS.tooltipClass;
+  get ariaRole() {
+    return this.args.ariaRole || 'tooltip';
   }
 
-  set class(value) {
-    const tooltipClass = this._config.tooltipClass || DEFAULTS.tooltipClass;
-
-    // eslint-disable-next-line no-setter-return
-    return `${tooltipClass} ${value}`;
+  get _class() {
+    return `${super._class} ${this._config.tooltipClass || DEFAULTS.tooltipClass}`
   }
 
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-
-    if (!this._currentTarget) {
-      return;
-    }
+  _initializeAttacher() {
+    super._initializeAttacher();
 
-    this._currentTarget.setAttribute('aria-describedby', this.id);
-  }
+    if (this._currentTarget?.getAttribute('aria-describedby') != this.id) {
+      const oldTarget = document.querySelector(`[aria-describedby="${this.id}"]`);
 
-  @observes('popperTarget')
-  popperTargetChanged() {
-    const oldTarget = this._currentTarget;
-    if (oldTarget) {
-      oldTarget.removeAttribute('aria-describedby');
+      oldTarget?.removeAttribute('aria-describedby')
+      this._currentTarget?.setAttribute('aria-describedby', this.id);
     }
-
-    super.popperTargetChanged;
-
-    this.popperTarget.setAttribute('aria-describedby', this.id);
   }
 
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
+  willDestroy() {
+    super.willDestroy(...arguments);
 
     const target = this._currentTarget;
     if (target) {
@@ -52,3 +34,5 @@ export default class AttachTooltip extends AttachPopover {
     }
   }
 }
+
+export default setComponentTemplate(layout, AttachTooltip);

package/addon/defaults.js

@@ -1,6 +1,7 @@
 export default {
   animation: 'fill',
   arrow: false,
+  autoUpdate: false,
   flip: null,
   hideDelay: 0,
   hideDuration: 300,
@@ -9,15 +10,15 @@ export default {
   isOffset: false,
   isShown: false,
   lazyRender: false,
-  modifiers: null,
+  middleware: null,
   placement: 'top',
-  popperContainer: '.ember-application',
-  popperOptions: null,
+  floatingElementContainer: '.ember-application',
+  floatingUiOptions: null,
   renderInPlace: false,
   showDelay: 0,
   showDuration: 300,
   showOn: 'mouseenter focus',
   style: null,
-  tooltipClass: 'ember-attacher-popper ember-attacher-tooltip',
+  tooltipClass: 'ember-attacher-floating ember-attacher-tooltip',
   useCapture: false
 };

package/addon/styles/_mixins.scss

@@ -1,19 +1,17 @@
-@use "sass:math";
-
 @mixin arrow($position, $width) {
   @if ($position == 'top') {
     transform: rotate(-45deg);
-    bottom: math.div(-$width, 2);
+    bottom: -$width * .5;
   } @else if ($position == 'bottom') {
     transform: rotate(135deg);
-    top: math.div(-$width, 2);
+    top: -$width * .5;
   } @else if ($position == 'left') {
     transform: rotate(225deg);
-    right: math.div(-$width, 2);
+    right: -$width * .5;
     top: 50%;
   } @else if ($position == 'right') {
     transform: rotate(45deg);
-    left: math.div(-$width, 2);
+    left: -$width * .5;
     top: 50%;
   }
 }

package/addon/styles/ember-attacher.scss

@@ -1,4 +1,9 @@
 .ember-attacher {
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
   perspective: 800px;
   transition-timing-function: cubic-bezier(.165, .84, .44, 1);
   z-index: 9999;

package/addon/templates/components/attach-popover.hbs

@@ -1,25 +1,29 @@
-{{unbound this._parentFinder}}
+{{~#unless this.renderFloatingElement}}
+  <meta hidden {{did-insert this.onParentFinderInsert}} {{did-update this.onIsShownChange this.isShown}}/>
+{{~/unless~}}
 
-{{~#if (and this._currentTarget (or (not this.lazyRender) this._mustRender))}}
-  {{~#ember-popper ariaRole=this.ariaRole
-                  class="ember-attacher"
-                  eventsEnabled=false
-                  id=this.id
-                  modifiers=this._modifiers
-                  placement=this.placement
-                  popperContainer=this.popperContainer
-                  popperTarget=this._currentTarget
-                  registerAPI=(action '_registerAPI')
-                  renderInPlace=this.renderInPlace as |emberPopper|~}}
-    <div class="{{this._class}}" style="{{this._style}}">
-      {{yield (hash emberPopper=emberPopper hide=(action 'hide'))}}
-
-      {{#if this.arrow}}
-        <div x-arrow></div>
-      {{/if}}
-      {{#if (eq this.animation 'fill')}}
-        <div x-circle style="{{this._circleTransitionDuration}}"></div>
-      {{/if}}
+{{~#if this.renderFloatingElement}}
+  {{~#maybe-in-element destinationElement=this._floatingElementContainer renderInPlace=@renderInPlace}}
+    <div
+      class="ember-attacher"
+      id={{this.id}}
+      role={{this.ariaRole}}
+      {{did-insert this.didInsertFloatingElement}}
+      {{did-update this.onIsShownChange this.isShown}}
+      {{did-update this.onTargetOrTriggerChange this.hideOn this.showOn @explicitTarget}}
+      {{did-update this.onOptionsChange this.autoUpdate this.animation this.arrow this.useCapture this.placement this._renderInPlace this._currentTarget this._middleware}}
+      {{will-destroy this.willDestroyFloatingElement}}
+      ...attributes
+    >
+      <div class={{this._class}} style={{this._style}}>
+        {{yield (hash hide=(action 'hide'))}}
+        {{#if this.arrow}}
+          <div x-arrow {{did-insert this.didInsertArrow}}></div>
+        {{/if}}
+        {{#if this.isFillAnimation}}
+          <div x-circle style="{{this._circleTransitionDuration}}"></div>
+        {{/if}}
+      </div>
     </div>
-  {{~/ember-popper}}
+  {{~/maybe-in-element}}
 {{~/if~}}

package/addon-test-support/is-visible.js

@@ -1,7 +1,7 @@
 export function isVisible(selector, contextEl) {
   const attachment = typeof(selector) === 'string' ? getAttachment(selector, contextEl) : selector;
 
-  return attachment.style.display !== 'none';
+  return getComputedStyle(attachment).display !== 'none';
 }
 
 function getAttachment(selectorOrElement = '', contextEl) {

package/docs/upgrade-guide-2.0.md

@@ -0,0 +1,43 @@
+# ember-attacher 2.0
+
+## Quick Summary
+
+- ember-popper was replaced by the [Floating UI](https://github.com/floating-ui/floating-ui)
+- ember edition was changed to "octane"
+- ember-test-waiters are used now to wait until positioning inside `requestAnimationFrame` happen in tests
+- we dropped support for node < 12 and ember-source < 3.16
+
+## Details
+
+### API Changes
+
+- instead of popper [modifiers](https://popper.js.org/docs/v2/modifiers/) you should use Floating UI [middleware](https://floating-ui.com/docs/middleware).
+  You can import the default ones (like [offset](https://floating-ui.com/docs/offset) or [flip](https://floating-ui.com/docs/flip)) directly from `@floating-ui/dom`
+
+  For example
+  ```js
+  const modifiers = { offset: { offset: 10 } };
+  ```
+  will become
+  ```js
+  import { offset } from '@floating-ui/dom';
+  ...
+  const middleware = [offset(10)]
+  ```
+- `popperContainer` is `floatingElementContainer` now 
+- `popperOptions` is `floatingUiOptions` now. The object is passed to Floating UI [computePosition](https://floating-ui.com/docs/computePosition) function.
+- `popperTarget` is `explicitTarget` now.
+- Instead of `registerAPI` used to update your tooltip or popover manually, you should use `autoUpdate` [option](https://github.com/tylerturdenpants/ember-attacher#options).
+  It  adds listeners that will automatically call an update function when necessary (if the user scrolls or resizes the screen, etc.).
+- For more details see Floating UI [migration guide](https://floating-ui.com/docs/migration). Pay attention that `ember-attacher` v1 used Popper v1.
+
+### IDs and CSS classes changes
+
+- The prefix for the default floating element's `id` is now "-floating" instead of "-popper".
+- The default `ember-attacher-popper` class is now `ember-attacher-floating`
+
+### Compatibility
+
+For Ember.js below the v3.20 you may need to install [@ember/render-modifiers](https://github.com/emberjs/ember-render-modifiers) (`ember install @ember/render-modifiers`).
+
+The addon may work with the ember-source < 3.16, yet the support is not guaranteed.

package/index.js

@@ -3,7 +3,6 @@
 
 const FilterImports = require('babel-plugin-filter-imports');
 const Funnel = require('broccoli-funnel');
-const StripClassCallCheck = require('babel6-plugin-strip-class-callcheck');
 
 module.exports = {
   name: require('./package').name,
@@ -42,7 +41,6 @@ module.exports = {
         }
       };
       babelOptions.plugins.push([FilterImports, strippedImports]);
-      babelOptions.postTransformPlugins.push(StripClassCallCheck);
     }
 
     this._hasSetupBabelOptions = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-attacher",
-  "version": "1.3.0",
+  "version": "2.0.1",
   "description": "Tooltips and popovers for Ember.js apps",
   "keywords": [
     "ember-addon",
@@ -29,69 +29,77 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
+    "@floating-ui/dom": "~1.2.8",
     "babel-plugin-filter-imports": "^4.0.0",
-    "babel6-plugin-strip-class-callcheck": "^6.0.0",
-    "broccoli-funnel": "^3.0.5",
-    "ember-classic-decorator": "^2.0.0",
-    "ember-cli-babel": "^7.26.6",
-    "ember-cli-htmlbars": "^5.7.1",
-    "ember-cli-sass": "^10.0.1",
-    "ember-decorators": "^6.1.1",
-    "ember-popper": "^0.11.3",
-    "ember-truth-helpers": "^3.0.0",
-    "sass": "^1.35.2"
+    "broccoli-funnel": "~3.0.8",
+    "ember-auto-import": "~2.6.3",
+    "ember-cli-babel": "^7.26.10",
+    "ember-cli-htmlbars": "~6.2.0",
+    "ember-cli-sass": "~11.0.1",
+    "ember-in-element-polyfill": "~1.0.1",
+    "sass": "^1.62.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/eslint-parser": "^7.21.8",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "~2.2.8",
+    "@ember/render-modifiers": "^2.0.5",
+    "@ember/string": "^3.0.1",
+    "@ember/test-helpers": "~2.9.3",
+    "@ember/test-waiters": "^3.0.2",
+    "@glimmer/component": "^1.0.0",
+    "@glimmer/tracking": "^1.0.0",
     "@html-next/flexi-default-styles": "^2.2.0",
-    "babel-eslint": "^10.1.0",
+    "@release-it-plugins/lerna-changelog": "^5.0.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli": "~3.28.5",
+    "ember-cli-dependency-checker": "~3.3.1",
     "ember-cli-github-pages": "^0.2.2",
     "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-uglify": "^3.0.0",
-    "ember-cli": "~3.26.1",
+    "ember-cli-terser": "^4.0.2",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-power-select": "^4.1.5",
-    "ember-qunit": "~5.1.3",
-    "ember-raf-test-waiter": "^0.1.0",
-    "ember-resolver": "^8.0.2",
+    "ember-maybe-import-regenerator": "^1.0.0",
+    "ember-maybe-in-element": "^2.1.0",
+    "ember-qunit": "^6.2.0",
+    "ember-resolver": "~10.0.0",
+    "ember-source": "~3.28.11",
     "ember-source-channel-url": "^3.0.0",
-    "ember-source": "~3.27.5",
-    "ember-svg-jar": "^2.3.3",
-    "ember-try": "^1.4.0",
-    "eslint-plugin-ember": "^9.6.0",
+    "ember-svg-jar": "~2.4.2",
+    "ember-truth-helpers": "^3.1.1",
+    "ember-try": "~3.0.0-beta.1",
+    "eslint": "~8.40.0",
+    "eslint-plugin-decorator-position": "^5.0.2",
+    "eslint-plugin-ember": "~11.5.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint": "^7.26.0",
     "flexi": "^2.1.0",
     "loader.js": "^4.7.0",
-    "qunit": "~2.16.0",
-    "qunit-dom": "^1.6.0",
-    "release-it-lerna-changelog": "^3.1.0",
-    "release-it": "^14.10.0"
+    "qunit": "~2.19.4",
+    "qunit-dom": "~2.0.0",
+    "release-it": "~15.10.1",
+    "webpack": "~5.82.1"
   },
   "resolutions": {
-    "@embroider/util": "^0.40.0",
     "ember-in-element-polyfill": "^1.0.1"
   },
   "engines": {
-    "node": "10.* || >= 12.*"
+    "node": ">= 12.*"
+  },
+  "ember": {
+    "edition": "octane"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",
-    "demoURL": "https://kybishop.github.io/ember-attacher/"
+    "demoURL": "https://tylerturdenpants.github.io/ember-attacher/"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "release-it": {
     "plugins": {
-      "release-it-lerna-changelog": {
+      "@release-it-plugins/lerna-changelog": {
         "infile": "CHANGELOG.md"
       }
     },

package/app/styles/app.scss

@@ -1 +0,0 @@
-@import "ember-power-select";