feat: integrate select with internal dropdown - part of #45

AlaskaAirlines · Nov 29, 2024 · a18d9fb · a18d9fb
1 parent a5a0417
commit a18d9fb
Show file tree

Hide file tree

Showing 6 changed files with 5,002 additions and 4,183 deletions.
diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js
diff --git a/components/select/demo/index.min.js b/components/select/demo/index.min.js
diff --git a/components/select/src/auro-select.js b/components/select/src/auro-select.js
@@ -14,8 +14,8 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 
-import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js';
-import dropdownVersion from '../../../src/dropdownVersion.js';
+import { AuroDropdown } from '../../dropdown/src/auro-dropdown.js';
+import dropdownVersion from '../../../src/internal/dropdownVersion.js';
 
 import styleCss from "./style-css.js";
 import colorCss from "./color-css.js";
@@ -176,6 +176,7 @@ export class AuroSelect extends LitElement {
    */
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
+    this.menuWrapper = this.dropdown.querySelector('.menuWrapper');
 
     if (this.customBibWidth) {
       this.dropdown.dropdownWidth = this.customBibWidth;
@@ -309,6 +310,9 @@ export class AuroSelect extends LitElement {
    * @returns {void}
    */
   configureSelect() {
+    // inject menu into menuWrapper
+    this.menuWrapper.append(this.menu);
+
     this.addEventListener('keydown', (evt) => {
       if (evt.key === 'ArrowUp') {
         evt.preventDefault();
@@ -578,7 +582,6 @@ export class AuroSelect extends LitElement {
             ${this.value ? this.displayValue : html`<span class="placeholder">${this.placeholder}</span>`}
           </span>
           <div class="menuWrapper">
-            <slot></slot>
           </div>
           <slot name="label" slot="label"></slot>
           <span slot="helpText">

diff --git a/components/select/src/scripts/version.mjs b/components/select/src/scripts/version.mjs
@@ -1,3 +1,4 @@
 import { writeDepVersionFile } from '../../../../scripts/formVersionWriter.js'
+import path from 'node:path';
 
-writeDepVersionFile('@aurodesignsystem/auro-dropdown');
+writeDepVersionFile('@/components/dropdown');
diff --git a/components/select/test/auro-select.test.js b/components/select/test/auro-select.test.js
@@ -54,14 +54,13 @@ describe('auro-select', () => {
 
     trigger.click();
     await expect(dropdown.isPopoverVisible).to.be.true;
-
-    const menu = el.querySelector('auro-menu');
-    const menuOptions = menu.querySelectorAll('auro-menuoption');
-
     el.dispatchEvent(new KeyboardEvent('keydown', {
       'key': 'ArrowDown'
     }));
 
+    const menu = dropdown.bibContent.querySelector('auro-menu');
+    const menuOptions = menu.querySelectorAll('auro-menuoption');
+
     await expect(menuOptions[0].classList.contains('active')).to.be.true;
     await expect(menuOptions[1].classList.contains('active')).to.be.false;
 
@@ -84,7 +83,8 @@ describe('auro-select', () => {
   it('makes a selection programatically', async () => {
     const el = await defaultFixture();
 
-    const menu = el.querySelector('auro-menu')
+    const dropdown = el.shadowRoot.querySelector('[auro-dropdown]');
+    const menu = dropdown.bibContent.querySelector('auro-menu')
     const menuOptions = menu.querySelectorAll('auro-menuoption');
     let selectedOptions = [];
 
@@ -134,14 +134,16 @@ describe('auro-select', () => {
   it('default to checkmark on selected option', async () => {
     const el = await defaultFixture();
 
-    const menu = el.querySelector('auro-menu');
+    const dropdown = el.shadowRoot.querySelector('[auro-dropdown]');
+    const menu = dropdown.bibContent.querySelector('auro-menu');
     await expect(menu.hasAttribute('nocheckmark')).to.be.false;
   });
 
   it('selected options have nocheckmark when nocheckmark attribute is present', async () => {
     const el = await noCheckmarkFixture();
 
-    const menu = el.querySelector('auro-menu');
+    const dropdown = el.shadowRoot.querySelector('[auro-dropdown]');
+    const menu = dropdown.bibContent.querySelector('auro-menu');
     await expect(menu.hasAttribute('nocheckmark')).to.be.true;
   });
 

diff --git a/src/internal/dropdownVersion.js b/src/internal/dropdownVersion.js
@@ -0,0 +1 @@
+export default '3.0.0'