@crowdstrike/glide-core 0.12.2 → 0.12.3

package/dist/dropdown.test.events.single.js

@@ -7,14 +7,10 @@ import GlideCoreDropdown from './dropdown.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('dispatches one "change" event when an option is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -30,14 +26,10 @@ it('dispatches one "change" event when an option is selected via click', async (
 });
 it('dispatches one "change" event when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -57,14 +49,10 @@ it('dispatches one "change" event when an option is selected via Enter', async (
 });
 it('dispatches one "change" event when an option is selected via Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -171,14 +159,10 @@ it('does not dispatch an "edit" event when `readonly`', async () => {
 });
 it('dispatches one "input" event when an option is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -194,14 +178,10 @@ it('dispatches one "input" event when an option is selected via click', async ()
 });
 it('dispatches one "input" event when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -221,14 +201,10 @@ it('dispatches one "input" event when an option is selected via Enter', async ()
 });
 it('dispatches one "input" event when an option is selected via Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -267,14 +243,10 @@ it('does not dispatch a "change" event when an already selected option is clicke
 });
 it('does not dispatch a "change" event when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -288,14 +260,10 @@ it('does not dispatch a "change" event when `value` is changed programmatically'
 });
 it('continues to dispatch "change" events upon selection after `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -308,14 +276,10 @@ it('continues to dispatch "change" events upon selection after `value` is change
 });
 it('does not dispatch an "input" event when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -331,14 +295,10 @@ it('does not dispatch a "change" event when an already selected option is select
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const spy = sinon.spy();
     component.addEventListener('change', spy);
@@ -352,14 +312,10 @@ it('does not dispatch an "input" event when an already selected option is select
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const spy = sinon.spy();
     component.addEventListener('input', spy);
@@ -371,14 +327,10 @@ it('does not dispatch an "input" event when an already selected option is select
 });
 it('continues to dispatch "input" events upon selection after `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);

package/dist/dropdown.test.focus.filterable.js

@@ -7,60 +7,17 @@ import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 const defaultSlot = html `
-  <glide-core-dropdown-option
-    label="One"
-    value="one"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Two"
-    value="two"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Three"
-    value="three"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Four"
-    value="four"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Five"
-    value="five"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Six"
-    value="six"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Seven"
-    value="seven"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Eight"
-    value="eight"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Nine"
-    value="nine"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Ten"
-    value="ten"
-  ></glide-core-dropdown-option>
-
-  <glide-core-dropdown-option
-    label="Eleven"
-    value="eleven"
-  ></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Four"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Five"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Six"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Seven"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eight"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Nine"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Ten"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eleven"></glide-core-dropdown-option>
 `;
 it('focuses the input when `focus()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -130,10 +87,6 @@ it('focuses the input on submit when required and no option is selected', async
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
       ${defaultSlot}
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
     </glide-core-dropdown>`, {
         parentNode: form,
     });

package/dist/dropdown.test.focus.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
@@ -14,10 +14,7 @@ it('closes and reports validity when it loses focus', async () => {
       open
       required
     >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: div });
     const button = document.createElement('button');
     div.prepend(button);
@@ -39,10 +36,7 @@ it('closes and reports validity when it loses focus', async () => {
 });
 it('is focused when clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
     // which puts us in a guard in the event handler. `Event` has no `detail` property
@@ -52,3 +46,62 @@ it('is focused when clicked', async () => {
     button?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     expect(component.shadowRoot?.activeElement).to.equal(button);
 });
+it('focuses the Add button on ArrowDown', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' }); // Two
+    await sendKeys({ press: 'ArrowDown' }); // Add button
+    const addButton = component.shadowRoot?.querySelector('[data-test="add-button"]');
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[1]?.privateActive).to.be.false;
+    expect(options[1]?.privateIsEditActive).to.be.false;
+    expect(options[1]?.privateIsOpenTooltip).to.be.false;
+    expect(component.shadowRoot?.activeElement).to.equal(addButton);
+});
+it('returns focus to itself on Escape when the Add button has focus', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'Tab' });
+    await sendKeys({ press: 'Escape' });
+    expect(document.activeElement).to.equal(component);
+});
+it('returns focus to itself when an option is activated and the Add button has focus', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      add-button-label="Add"
+      label="Label"
+      placeholder="Placeholder"
+      open
+    >
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.focus();
+    await sendKeys({ press: 'Tab' });
+    component
+        .querySelector('glide-core-dropdown-option')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    expect(document.activeElement).to.equal(component);
+});

package/dist/dropdown.test.focus.multiple.js

@@ -6,15 +6,8 @@ GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('focuses the primary button when `focus()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.focus();
     expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="primary-button"]'));
@@ -27,15 +20,9 @@ it('focuses the primary button on submit when required and no options are select
       multiple
       required
     >
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`, {
         parentNode: form,
     });
@@ -51,15 +38,8 @@ it('focuses the primary button when `reportValidity` is called when required and
       multiple
       required
     >
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     component.reportValidity();
     const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
@@ -75,13 +55,11 @@ it('does not focus the primary button when `checkValidity` is called', async ()
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
@@ -97,19 +75,16 @@ it('focuses the second tag when the first one is removed', async () => {
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Three"
-        value="three"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -129,19 +104,16 @@ it('focuses the third tag when the second one is removed', async () => {
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Three"
-        value="three"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -152,7 +124,7 @@ it('focuses the third tag when the second one is removed', async () => {
     await aTimeout(0);
     expect(component.shadowRoot?.activeElement).to.equal(tags?.[2]);
 });
-it('focuses the second tag when the last one removed', async () => {
+it('focuses the second tag when the third tag removed', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -161,19 +133,16 @@ it('focuses the second tag when the last one removed', async () => {
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Two"
-        value="two"
         selected
       ></glide-core-dropdown-option>
 
       <glide-core-dropdown-option
         label="Three"
-        value="three"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -184,3 +153,18 @@ it('focuses the second tag when the last one removed', async () => {
     await aTimeout(0);
     expect(component.shadowRoot?.activeElement).to.equal(tags?.[1]);
 });
+it('focuses itself when the last tag is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="tag"]')
+        ?.click();
+    await elementUpdated(component);
+    // Wait for the timeout in `#onTagRemove`.
+    await aTimeout(0);
+    expect(document.activeElement).to.equal(component);
+});

package/dist/dropdown.test.focus.single.js

@@ -1,15 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('focuses the primary button when `focus()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.focus();
     expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="primary-button"]'));
@@ -17,10 +15,7 @@ it('focuses the primary button when `focus()` is called', async () => {
 it('focuses the button on submit', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, {
         parentNode: form,
     });
@@ -31,10 +26,7 @@ it('focuses the button on submit', async () => {
 it('focuses the primary button when `reportValidity` is called when required and no option is selected', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     component.reportValidity();
     const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
@@ -43,11 +35,24 @@ it('focuses the primary button when `reportValidity` is called when required and
 it('does not focus the primary button when `checkValidity` is called', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     component.checkValidity();
     expect(component.shadowRoot?.activeElement).to.equal(null);
 });
+it('has a tooltip on focus when its internal label is overflowing', async () => {
+    // The period is arbitrary. 500 of them ensures we overflow.
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label=${'.'.repeat(500)}
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.focus();
+    await elementUpdated(component);
+    // Wait for the Resize Observer to do its thing.
+    await aTimeout(0);
+    const tooltip = component.shadowRoot?.querySelector('[data-test="internal-label-tooltip"]');
+    expect(tooltip?.open).to.be.true;
+    expect(tooltip?.disabled).to.be.false;
+});