ui: Update ember-{basic-dropdown,power-select} (#1088)

This bypasses one part of the migration: the use of the
BasicDropdownWormhole component.

Author: backspace

package.json

@@ -32,13 +32,14 @@
       "@types/eventsource@1.1.11": "patches/@types__eventsource@1.1.11.patch",
       "style-loader@2.0.0": "patches/style-loader@2.0.0.patch",
       "ember-css-url@1.0.0": "patches/ember-css-url@1.0.0.patch",
-      "matrix-js-sdk@31.0.0": "patches/matrix-js-sdk@31.0.0.patch"
+      "matrix-js-sdk@31.0.0": "patches/matrix-js-sdk@31.0.0.patch",
+      "ember-basic-dropdown@8.0.4": "patches/ember-basic-dropdown@8.0.4.patch"
     }
   },
   "devDependencies": {
     "@actions/core": "^1.2.6",
     "@actions/github": "^4.0.0",
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.24.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.0.4",
     "@glint/core": "^1.2.1",

packages/base/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.24.0",
     "@cardstack/boxel-ui": "workspace:*",
     "@cardstack/runtime-common": "workspace:*",
     "@glimmer/component": "^1.1.2",

packages/boxel-motion/addon/package.json

@@ -51,7 +51,7 @@
     "typescript": "~5.1.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-decorators": "^7.22.10",
     "@babel/plugin-transform-class-properties": "^7.22.5",
     "@babel/plugin-transform-class-static-block": "^7.22.11",

packages/boxel-motion/test-app/package.json

@@ -24,7 +24,7 @@
     "test:ember": "ember test"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.24.0",
     "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-decorators": "^7.21.0",
     "@cardstack/boxel-motion": "workspace:*",
@@ -53,7 +53,7 @@
     "ember-a11y-testing": "^5.2.1",
     "ember-auto-import": "^2.6.3",
     "ember-cli": "^4.12.1",
-    "ember-cli-babel": "^7.26.11",
+    "ember-cli-babel": "^8.2.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-inject-live-reload": "^2.1.0",

packages/boxel-ui/addon/babel.config.json

@@ -1,5 +1,6 @@
 {
   "plugins": [
+    "ember-concurrency/async-arrow-task-transform",
     [
       "@babel/plugin-transform-typescript",
       {

packages/boxel-ui/addon/package.json

@@ -40,15 +40,15 @@
     "@glint/template": "^1.2.1",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
-    "ember-basic-dropdown": "^7.3.0",
+    "ember-basic-dropdown": "^8.0.0",
     "ember-composable-helpers": "^5.0.0",
     "ember-css-url": "^1.0.0",
     "ember-focus-trap": "^1.0.1",
     "ember-freestyle": "^0.20.0",
     "ember-link": "^2.1.0",
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "^4.1.0",
-    "ember-power-select": "^6.0.1",
+    "ember-power-select": "^8.0.0",
     "ember-ref-bucket": "5.0.5",
     "ember-resize-modifier": "^0.6.0",
     "ember-set-body-class": "^1.0.2",
@@ -60,7 +60,7 @@
     "typescript": "~5.1.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-decorators": "^7.22.10",
     "@babel/plugin-transform-class-properties": "^7.22.5",
     "@babel/plugin-transform-class-static-block": "^7.22.11",
@@ -75,6 +75,7 @@
     "@typescript-eslint/parser": "^5.48.1",
     "babel-plugin-ember-template-compilation": "^2.2.1",
     "concurrently": "^8.0.1",
+    "ember-concurrency": "^4.0.1",
     "ember-template-imports": "^3.1.2",
     "ember-template-lint": "^5.11.2",
     "ember-template-lint-plugin-prettier": "^5.0.0",

packages/boxel-ui/addon/src/components/input-group/accessories/index.gts

@@ -124,7 +124,7 @@ interface SelectAccessorySignature<ItemT = any> {
   Blocks: {
     default: [ItemT, string];
   };
-  Element: HTMLDivElement;
+  Element: HTMLElement;
 }
 
 // eslint-disable-next-line prettier/prettier

packages/boxel-ui/addon/src/components/input-group/index.gts

@@ -48,7 +48,7 @@ export interface Signature {
     before: [AccessoriesBlockArg, InputGroupBlockArg];
     default: [ControlsBlockArg, AccessoriesBlockArg, InputGroupBlockArg];
   };
-  Element: HTMLDivElement;
+  Element: HTMLElement;
 }
 
 export default class InputGroup extends Component<Signature> {

packages/boxel-ui/addon/src/components/input-group/usage.gts

@@ -330,6 +330,7 @@ export default class BoxelInputGroupUsage extends Component {
               @onChange={{this.selectExampleOnSelectItem}}
               @options={{this.selectExampleItems}}
               @dropdownClass='boxel-select-usage-dropdown'
+              aria-label='Select an item'
               as |item itemCssClass|
             >
               <div class={{itemCssClass}}>{{item}}</div>

packages/boxel-ui/addon/src/components/select/index.gts

@@ -1,34 +1,12 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import PowerSelect, {
-  type PatchedPowerSelectArgs,
-  BeforeOptions,
+  type PowerSelectArgs,
 } from 'ember-power-select/components/power-select';
+import BeforeOptions from 'ember-power-select/components/power-select/before-options';
 
 import cn from '../../helpers/cn.ts';
 
-type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-
-type BasePowerSelectArgs = PartialBy<
-  Pick<
-    PatchedPowerSelectArgs,
-    | 'searchField'
-    | 'searchEnabled'
-    | 'selected'
-    | 'disabled'
-    | 'placeholder'
-    | 'onChange'
-    | 'onBlur'
-    | 'renderInPlace'
-    | 'verticalPosition'
-    | 'dropdownClass'
-    | 'beforeOptionsComponent'
-    | 'selectedItemComponent'
-    | 'triggerComponent'
-  >,
-  'disabled' | 'renderInPlace'
->;
-
-export interface BoxelSelectArgs<ItemT> extends BasePowerSelectArgs {
+export interface BoxelSelectArgs<ItemT> extends PowerSelectArgs {
   options: ItemT[];
 }
 
@@ -37,7 +15,7 @@ interface Signature<ItemT = any> {
   Blocks: {
     default: [ItemT, string];
   };
-  Element: HTMLDivElement;
+  Element: HTMLElement;
 }
 
 const BoxelSelect: TemplateOnlyComponent<Signature> = <template>

packages/boxel-ui/addon/src/components/select/usage.gts

@@ -62,6 +62,7 @@ export default class BoxelSelectUsage extends Component {
           @renderInPlace={{this.renderInPlace}}
           @disabled={{this.disabled}}
           @dropdownClass='boxel-select-usage-dropdown'
+          aria-label='Select an item'
           as |item itemCssClass|
         >
           <div class={{itemCssClass}}>{{item}}</div>