pnpm 8, address some compatibility issues

.changeset/twelve-gifts-camp.md

@@ -0,0 +1,61 @@
+---
+'@crowdstrike/ember-toucan-core': patch
+'@crowdstrike/ember-toucan-form': patch
+---
+
+Added a `Combobox` component to both core and form packages.
+
+If you're using `toucan-core`, the control and field components are exposed:
+
+```hbs
+<Form::Controls::Combobox
+  @onChange={{this.onChange}}
+  @options={{this.options}}
+  @contentClass='z-10'
+  @selected={{this.selected}}
+  @optionKey='label'
+  @noResultsText='No results'
+  placeholder='Colors'
+  as |combobox|
+>
+  <combobox.Option>
+    {{combobox.option.label}}
+  </combobox.Option>
+</Form::Controls::Combobox>
+
+<Form::Fields::Combobox
+  @contentClass='z-10'
+  @error={{this.errorMessage}}
+  @hint='Type "blue" into the field'
+  @label='Label'
+  @noResultsText='No results'
+  @onChange={{this.onChange}}
+  @optionKey='label'
+  @options={{this.options}}
+  @selected={{this.selected}}
+  placeholder='Colors'
+  as |combobox|
+>
+  <combobox.Option>
+    {{combobox.option.label}}
+  </combobox.Option>
+</Form::Fields::Combobox>
+```
+
+If you're using `toucan-form`, the component is exposed via:
+
+```hbs
+<ToucanForm as |form|>
+  <form.Combobox
+    @label='Combobox'
+    @name='combobox'
+    @options={{options}}
+    data-combobox
+    as |combobox|
+  >
+    <combobox.Option data-option>{{combobox.option}}</combobox.Option>
+  </form.Combobox>
+</ToucanForm>
+```
+
+For more information on using these components, view [the docs](https://ember-toucan-core.pages.dev/docs/components/combobox).

.github/workflows/ci.yml

@@ -22,25 +22,19 @@ jobs:
     name: Install
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v2
+      - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: ./.github/actions/pnpm
 
   lint:
     name: Lint
     runs-on: ubuntu-latest
     needs:
       - install_dependencies
     steps:
-      - uses: actions/checkout@v3
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v2
+      - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: ./.github/actions/pnpm
       - name: Lint + Format + Glint
         run: pnpm lint
 
@@ -60,12 +54,9 @@ jobs:
           - typescript@5.0
           - typescript@5.1
     steps:
-      - uses: actions/checkout@v3
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v2
+      - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: ./.github/actions/pnpm
       - name: 'Change TS to ${{ matrix.typescript-scenario }}'
         run: 'pnpm add --save-dev ${{ matrix.typescript-scenario}}'
         working-directory: ./test-app
@@ -79,12 +70,9 @@ jobs:
     needs:
       - install_dependencies
     steps:
-      - uses: actions/checkout@v3
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v2
+      - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: ./.github/actions/pnpm
       - run: pnpm test
 
   floating_tests:
@@ -94,12 +82,9 @@ jobs:
     needs:
       - install_dependencies
     steps:
-      - uses: actions/checkout@v3
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v2
+      - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: ./.github/actions/pnpm
       - name: Install Dependencies (without lockfile)
         run: rm pnpm-lock.yaml && pnpm install
       - run: pnpm test
@@ -118,16 +103,11 @@ jobs:
           - ember-release
           - ember-beta
           - ember-canary
-          - "'ember-release + embroider-optimized'"
-          - "'ember-lts-4.8 + embroider-optimized'"
 
     steps:
-      - uses: actions/checkout@v3
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v2
+      - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: ./.github/actions/pnpm
       - name: Run Tests
         working-directory: ./test-app
         run: node_modules/.bin/ember try:one ${{matrix.try-scenario}} --skip-cleanup --- pnpm turbo test
@@ -145,14 +125,9 @@ jobs:
       - try_scenarios
 
     steps:
-      - uses: actions/checkout@v3
-        with:
-          persist-credentials: false
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v2
+      - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: ./.github/actions/pnpm
       - run: pnpm build
       - name: Create Release Pull Request or Publish to npm
         id: changesets
@@ -175,10 +150,9 @@ jobs:
       deployments: write
       pull-requests: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: wyvox/action@v1
         with:
-          persist-credentials: false
-      - uses: ./.github/actions/pnpm
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
       - run: pnpm build:docs
       - name: Publish to Cloudflare Pages
         id: publishStep

docs-app/package.json

@@ -28,16 +28,16 @@
   "devDependencies": {
     "@babel/core": "^7.19.6",
     "@babel/eslint-parser": "^7.19.1",
-    "@crowdstrike/ember-toucan-styles": "^2.0.1",
-    "@crowdstrike/tailwind-toucan-base": "^3.5.0",
+    "@crowdstrike/ember-toucan-styles": "^2.0.2",
+    "@crowdstrike/tailwind-toucan-base": "^3.5.1",
     "@docfy/core": "^0.6.0",
     "@docfy/ember": "^0.6.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/string": "^3.0.1",
+    "@ember/string": "^3.1.1",
     "@ember/test-helpers": "^3.1.0",
-    "@embroider/compat": "^2.0.0",
-    "@embroider/core": "^2.0.0",
-    "@embroider/webpack": "^2.0.0",
+    "@embroider/compat": "^3.1.4",
+    "@embroider/core": "^3.1.2",
+    "@embroider/webpack": "^3.1.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@glint/core": "^1.0.2",
@@ -106,6 +106,7 @@
     "eslint-plugin-qunit": "^7.3.1",
     "fractal-page-object": "^0.4.0",
     "loader.js": "^4.7.0",
+    "pnpm-sync-dependencies-meta-injected": "^0.0.8",
     "postcss": "^8.4.17",
     "postcss-import": "^15.0.0",
     "postcss-loader": "^7.0.1",
@@ -126,11 +127,11 @@
     "edition": "octane"
   },
   "dependencies": {
-    "@crowdstrike/ember-oss-docs": "^1.1.3",
+    "@crowdstrike/ember-oss-docs": "^1.1.6",
     "@crowdstrike/ember-toucan-core": "workspace:*",
     "@crowdstrike/ember-toucan-form": "workspace:*",
     "@ember/test-waiters": "^3.0.2",
-    "@embroider/router": "^2.0.0",
+    "@embroider/router": "^2.1.2",
     "dompurify": "^3.0.0",
     "ember-browser-services": "^4.0.4",
     "ember-modifier": "^4.1.0",

package.json

@@ -9,14 +9,11 @@
   },
   "engines": {
     "node": ">=16",
-    "pnpm": ">=7.24.2 <7.33.0"
-  },
-  "engines:comment": {
-    "pnpm": "Our lock file version is 6. PNPM 7.24.2 is the first PNPM version to support version 6 lock files. PNPM 7.33.0 adds support for version 6.1 lock files, so using it results in a `pnpm-lock.yaml` diff."
+    "pnpm": ">= 8"
   },
   "volta": {
     "node": "18.16.1",
-    "pnpm": "7.32.5"
+    "pnpm": "8.6.6"
   },
   "license": "MIT",
   "author": "CrowdStrike UX Team",
@@ -47,7 +44,10 @@
   },
   "pnpm": {
     "overrides": {
-      "@types/eslint": "^8.0.0"
+      "@types/eslint": "^8.0.0",
+      "@embroider/compat": "~3.0.0",
+      "@embroider/core": "~3.0.0",
+      "@embroider/webpack": "~3.0.0"
     },
     "peerDependencyRules": {
       "ignoreMissing": [

packages/ember-toucan-core/package.json

@@ -43,7 +43,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.7",
-    "@embroider/addon-shim": "^1.0.0",
+    "@embroider/addon-shim": "^1.8.5",
+    "@embroider/compat": "^3.1.4",
     "@floating-ui/dom": "^1.4.2",
     "ember-velcro": "^2.1.0"
   },
@@ -55,9 +56,9 @@
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-syntax-decorators": "^7.17.0",
     "@babel/preset-typescript": "^7.18.6",
-    "@crowdstrike/ember-toucan-styles": "^2.0.1",
+    "@crowdstrike/ember-toucan-styles": "^2.0.2",
     "@ember/test-helpers": "^3.1.0",
-    "@embroider/addon-dev": "^3.0.0",
+    "@embroider/addon-dev": "^3.1.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@glint/core": "^1.0.2",

packages/ember-toucan-core/src/-private/components/form/controls/combobox/option.ts

@@ -5,14 +5,51 @@ import Check from '../../../../../-private/icons/check';
 
 interface ToucanFormComboboxOptionControlComponentSignature {
   Args: {
+    /**
+     * When true, means that the option is currently hovered over with a mouse
+     * or "focused" with a keyboard.
+     */
     isActive?: boolean;
+
+    /**
+     * Sets the underlying, hidden input element to disabled.
+     */
     isDisabled?: boolean;
+
+    /**
+     * Sets the underlying, hidden input element to readonly.
+     */
     isReadOnly?: boolean;
+
+    /**
+     * When set to true, the list item will have `aria-selected` set to true
+     * and have selected styling.
+     */
     isSelected?: boolean;
+
+    /**
+     * The index number of the list item when in a list.
+     */
     index: number;
+
+    /**
+     * The event called when the item is clicked.
+     */
     onClick: () => void;
+
+    /**
+     * The event called when the mouse rolls over the item.
+     */
     onMouseover: () => void;
+
+    /**
+     * The `id` attribute of the popover this option is associated with.
+     */
     popoverId: string;
+
+    /**
+     * Sets the underlying, hidden input element `value` attribute.
+     */
     value?: string;
   };
   Blocks: {
@@ -35,7 +72,7 @@ export default class ToucanFormComboboxOptionControlComponent extends Component<
     }
 
     if (this.args.isSelected) {
-      return 'bg-selected text-titles-and-attributes';
+      return 'text-titles-and-attributes';
     }
 
     return 'text-body-and-labels';