chore: support Ember 7.4 (upgrade ember-cli-htmlbars & addon deps)

.github/workflows/ci.yml

@@ -124,7 +124,6 @@ jobs:
       fail-fast: true
       matrix:
         ember-try-scenario:
-          - ember-lts-4.4
           - ember-lts-4.8
           - ember-release
           - ember-beta

ember-headlessui/README.md

@@ -16,6 +16,14 @@ A set of completely unstyled, fully accessible UI components for Ember.js, desig
 ember install ember-headlessui
 ```
 
+## Compatibility
+
+| ember-headlessui | Ember (`ember-source`) | Node  |
+| ---------------- | ---------------------- | ----- |
+| 0.18.x           | 4.8 – 7.x              | >= 20 |
+| 0.17.x           | 4.4 – 6.x              | >= 12 |
+| <= 0.16.2        | 3.28 – 6.x             | >= 12 |
+
 ## Usage
 
 See the [component examples](test-app/app/templates) for usage samples.

ember-headlessui/addon/components/listbox.js

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { debounce, scheduleOnce } from '@ember/runloop';
 
-import { TrackedSet } from 'tracked-maps-and-sets';
+import { TrackedSet } from 'tracked-built-ins';
 
 const ACTIVATE_NONE = 0;
 const ACTIVATE_FIRST = 1;

ember-headlessui/addon/components/menu.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 
-import { restartableTask, timeout } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
 
 export default class Menu extends Component {
   guid = `${guidFor(this)}-tailwindui-menu`;
@@ -83,8 +83,7 @@ export default class Menu extends Component {
     this._setActiveItem(item);
   }
 
-  @restartableTask
-  *searchTask(nextCharacter) {
+  searchTask = task({ restartable: true }, async (nextCharacter) => {
     this.searchTerm += nextCharacter.toLowerCase();
 
     const searchResult = this.items.find((item) => {
@@ -97,10 +96,10 @@ export default class Menu extends Component {
       this._setActiveItem(searchResult);
     }
 
-    yield timeout(350);
+    await timeout(350);
 
     this.searchTerm = '';
-  }
+  });
 
   @action
   async registerItem(item) {

ember-headlessui/addon/helpers/transition/applied-class-names.js

@@ -1,6 +1,6 @@
 import Helper from '@ember/component/helper';
 
-import { dropTask, timeout } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
 
 import {
   ClassNameSet,
@@ -65,56 +65,56 @@ export class AppliedClassNamesManager extends Helper {
     return splitClassNames(this.transition.args.leaveTo);
   }
 
-  @dropTask
-  *setTransitionClassesTask(base, from, to, entered) {
-    this.appliedClassNames.delete(...entered);
-    this.appliedClassNames.add(...base, ...from);
+  setTransitionClassesTask = task(
+    { drop: true },
+    async (base, from, to, entered) => {
+      this.appliedClassNames.delete(...entered);
+      this.appliedClassNames.add(...base, ...from);
 
-    this.recompute();
+      this.recompute();
 
-    // Wait for the next tick
-    yield timeout(0);
+      // Wait for the next tick
+      await timeout(0);
 
-    this.appliedClassNames.delete(...from);
-    this.appliedClassNames.add(...to);
+      this.appliedClassNames.delete(...from);
+      this.appliedClassNames.add(...to);
 
-    this.recompute();
+      this.recompute();
 
-    yield waitForTransition(this.transition.ownDomNode);
+      await waitForTransition(this.transition.ownDomNode);
 
-    this.appliedClassNames.delete(...to, ...base);
-    this.appliedClassNames.add(...entered);
+      this.appliedClassNames.delete(...to, ...base);
+      this.appliedClassNames.add(...entered);
 
-    this.recompute();
-  }
+      this.recompute();
+    }
+  );
 
-  @dropTask
-  *transitionToShow() {
+  transitionToShow = task({ drop: true }, async () => {
     this.transition.args.beforeEnter?.();
 
-    yield this.setTransitionClassesTask.perform(
+    await this.setTransitionClassesTask.perform(
       this.enterClasses,
       this.enterFromClasses,
       this.enterToClasses,
       this.enteredClasses
     );
 
     this.transition.args.afterEnter?.();
-  }
+  });
 
-  @dropTask
-  *transitionToHide() {
+  transitionToHide = task({ drop: true }, async () => {
     this.transition.args.beforeLeave?.();
 
-    yield this.setTransitionClassesTask.perform(
+    await this.setTransitionClassesTask.perform(
       this.leaveClasses,
       this.leaveFromClasses,
       this.leaveToClasses,
       this.enteredClasses
     );
 
     this.transition.args.afterLeave?.();
-  }
+  });
 
   shouldTransition() {
     return this.show !== this.previousShowValue;

ember-headlessui/addon/helpers/transition/transition-visibility.js

@@ -1,6 +1,6 @@
 import Helper from '@ember/component/helper';
 
-import { all, restartableTask, timeout } from 'ember-concurrency';
+import { all, task, timeout } from 'ember-concurrency';
 
 import { waitForTransition } from '../../utils/transition';
 
@@ -70,18 +70,17 @@ export class TransitionVisibilityManager extends Helper {
     return this.value;
   }
 
-  @restartableTask
-  *unmountAfterTransitionTask() {
+  unmountAfterTransitionTask = task({ restartable: true }, async () => {
     // Wait for the next tick, to ensure that the class name string has time to re-build
-    yield timeout(0);
+    await timeout(0);
 
     // Wait for all Transition DOM elements to finish transitioning (parent and children)
-    yield all(
+    await all(
       Array.from(this.domNodes).map((domNode) => waitForTransition(domNode))
     );
 
     this.value = false;
 
     this.recompute();
-  }
+  });
 }

ember-headlessui/addon/utils/transition.js

@@ -1,5 +1,5 @@
 import { timeout } from 'ember-concurrency';
-import { TrackedSet } from 'tracked-maps-and-sets';
+import { TrackedSet } from 'tracked-built-ins';
 
 /**
  * Create a promise that resolves after the transition timeout for a node

ember-headlessui/index.js

@@ -3,5 +3,14 @@
 module.exports = {
   name: require('./package').name,
 
+  options: {
+    babel: {
+      plugins: [
+        // Compiles ember-concurrency's `task(async () => {})` syntax
+        require.resolve('ember-concurrency/async-arrow-task-transform'),
+      ],
+    },
+  },
+
   isDevelopingAddon: () => true,
 };

ember-headlessui/package.json

@@ -33,29 +33,29 @@
     "postpack": "ember ts:clean"
   },
   "dependencies": {
-    "ember-auto-import": "^2.2.0",
-    "ember-cli-babel": "^7.26.3",
-    "ember-cli-htmlbars": "^6.0.1",
+    "@babel/core": "^7.29.13",
+    "@embroider/macros": "^1.19.0",
+    "ember-auto-import": "^2.10.0",
+    "ember-cli-babel": "^8.3.2",
+    "ember-cli-htmlbars": "^7.0.1",
     "ember-cli-typescript": "^5.1.0",
-    "ember-concurrency": "^2.1.2",
-    "ember-element-helper": "^0.6.0",
-    "ember-modifier": "^4.0.0-beta.1",
-    "ember-set-helper": "^2.0.1",
-    "ember-truth-helpers": "^3.0.0",
+    "ember-concurrency": "^5.3.0",
+    "ember-element-helper": "^0.8.8",
+    "ember-modifier": "^4.3.0",
+    "ember-set-helper": "^3.1.0",
+    "ember-truth-helpers": "^5.0.0",
     "focus-trap": "^6.7.1",
-    "tracked-maps-and-sets": "^3.0.1"
+    "tracked-built-ins": "^4.1.2"
   },
   "peerDependencies": {
-    "ember-source": ">= 4.4.0"
+    "ember-source": ">= 4.8.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "@nullvoxpopuli/eslint-configs": "^1.5.1",
     "@types/ember": "^4.0.0",
-    "@types/ember-qunit": "^5.0.0",
-    "@types/ember-resolver": "^5.0.11",
     "@types/ember__application": "^4.0.0",
     "@types/ember__array": "^4.0.1",
     "@types/ember__component": "^4.0.8",
@@ -65,6 +65,7 @@
     "@types/ember__engine": "^4.0.0",
     "@types/ember__error": "^4.0.0",
     "@types/ember__object": "^4.0.2",
+    "@types/ember__owner": "^4.0.9",
     "@types/ember__polyfills": "^4.0.0",
     "@types/ember__routing": "^4.0.7",
     "@types/ember__runloop": "^4.0.1",
@@ -73,6 +74,8 @@
     "@types/ember__template": "^4.0.0",
     "@types/ember__test": "^4.0.0",
     "@types/ember__utils": "^4.0.0",
+    "@types/ember-qunit": "^5.0.0",
+    "@types/ember-resolver": "^5.0.11",
     "@types/htmlbars-inline-precompile": "^3.0.0",
     "@types/qunit": "^2.19.0",
     "@types/rsvp": "^4.0.4",
@@ -81,7 +84,7 @@
     "dotenv-cli": "^4.0.0",
     "ember-cli": "~4.4.0",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-source": "~4.4.0",
+    "ember-source": "~4.8.0",
     "ember-template-lint": "^3.5.1",
     "ember-template-lint-plugin-prettier": "^2.0.1",
     "eslint": "^7.32.0",
@@ -97,11 +100,11 @@
     "qunit-dom": "^1.6.0",
     "release-it": "^14.14.3",
     "release-it-lerna-changelog": "^3.1.0",
-    "typescript": "^4.7.3",
+    "typescript": "^5.9.3",
     "webpack": "^5.64.1"
   },
   "engines": {
-    "node": "10.* || >= 12"
+    "node": ">= 20"
   },
   "ember": {
     "edition": "octane"
@@ -114,6 +117,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "volta": {
-    "node": "16.15.0"
+    "node": "22.22.2"
   }
 }

package.json

@@ -44,7 +44,7 @@
     }
   },
   "volta": {
-    "node": "18.17.0",
+    "node": "22.22.2",
     "pnpm": "7.33.5"
   },
   "changelog": {