@crowdstrike/glide-core 0.12.1 → 0.12.3

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

@@ -1,25 +1,18 @@
 import './dropdown.option.js';
-import { elementUpdated, 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 button when `focus()` is called', async () => {
+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="button"]'));
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="primary-button"]'));
 });
-it('focuses the button on submit when required and no options are selected', async () => {
+it('focuses the primary button on submit when required and no options are selected', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -27,23 +20,17 @@ it('focuses the button on submit when required and no options are selected', asy
       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,
     });
     form.requestSubmit();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     expect(component.shadowRoot?.activeElement).to.be.equal(button);
 });
-it('focuses the button when `reportValidity` is called when required and no options are selected', async () => {
+it('focuses the primary button when `reportValidity` is called when required and no options are selected', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -51,21 +38,14 @@ it('focuses the button when `reportValidity` is called when required and no opti
       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="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     expect(component.shadowRoot?.activeElement).to.equal(button);
 });
-it('does not focus the button when `checkValidity` is called', async () => {
+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"
@@ -75,13 +55,11 @@ it('does not focus the 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,25 +75,24 @@ 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>`);
     const tags = component.shadowRoot?.querySelectorAll('[data-test="tag"]');
     tags?.[0].click();
     await elementUpdated(component);
+    // Wait for the timeout in `#onTagRemove`.
+    await aTimeout(0);
     expect(component.shadowRoot?.activeElement).to.equal(tags?.[1]);
 });
 it('focuses the third tag when the second one is removed', async () => {
@@ -127,28 +104,27 @@ 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>`);
     const tags = component.shadowRoot?.querySelectorAll('[data-test="tag"]');
     tags?.[1].click();
     await elementUpdated(component);
+    // Wait for the timeout in `#onTagRemove`.
+    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"
@@ -157,24 +133,38 @@ 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>`);
     const tags = component.shadowRoot?.querySelectorAll('[data-test="tag"]');
     tags?.[2].click();
     await elementUpdated(component);
+    // Wait for the timeout in `#onTagRemove`.
+    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,53 +1,58 @@
+/* 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 button when `focus()` is called', async () => {
+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="button"]'));
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="primary-button"]'));
 });
 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,
     });
     form.requestSubmit();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     expect(component.shadowRoot?.activeElement).to.be.equal(button);
 });
-it('focuses the button when `reportValidity` is called when required and no option is selected', 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="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     expect(component.shadowRoot?.activeElement).to.equal(button);
 });
-it('does not focus the button when `checkValidity` is called', async () => {
+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;
+});

package/dist/dropdown.test.form.js

@@ -50,3 +50,25 @@ it('does not submit its form on Enter when open', async () => {
     await sendKeys({ press: 'Enter' });
     expect(spy.callCount).to.equal(0);
 });
+it('does not submit its form when Enter is pressed on the Edit button', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, {
+        parentNode: form,
+    });
+    const spy = sinon.spy();
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        spy();
+    });
+    component.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    await sendKeys({ press: 'Enter' });
+    expect(spy.callCount).to.equal(0);
+});

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

@@ -6,60 +6,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('opens on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -218,6 +175,56 @@ it('hides its magnifying glass icon when multiselect and not filtering', async (
     const icon = component?.shadowRoot?.querySelector('[data-test="magnifying-glass-icon"]');
     expect(icon?.checkVisibility()).to.be.not.ok;
 });
+it('does not clear its filter when a tag is removed via Backspace', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+      multiple
+    >
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></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 input = component.shadowRoot?.querySelector('[data-test="input"]');
+    input?.select();
+    input?.focus();
+    await sendKeys({ type: 'o' });
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Backspace' });
+    expect(input?.value).to.equal('o');
+});
+it('does not clear its filter when every tag is removed via Meta + Backspace', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      filterable
+      multiple
+    >
+      <glide-core-dropdown-option
+        label="One"
+        selected
+      ></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 input = component.shadowRoot?.querySelector('[data-test="input"]');
+    input?.select();
+    input?.focus();
+    await sendKeys({ type: 'o' });
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ down: 'Meta' });
+    await sendKeys({ press: 'Backspace' });
+    await sendKeys({ up: 'Meta' });
+    expect(input?.value).to.equal('o');
+});
 it('does not filter on only whitespace', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       ${defaultSlot}
@@ -275,7 +282,7 @@ it('sets the first unfiltered option as active when the previously active option
     expect(option?.privateActive).to.be.true;
     expect(input?.getAttribute('aria-activedescendant')).to.equal(option?.id);
 });
-it('updates the `value` of its `<input>` when the `label` of a selected option is changed programmatically', async () => {
+it('updates the `value` of its `<input>` when `label` of a selected option is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -308,14 +315,10 @@ it('sets the `value` of its `<input>` when made filterable', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <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>`);
     component.filterable = true;
     await elementUpdated(component);
@@ -350,7 +353,6 @@ it('deselects the last selected option on Backspace', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="input"]')
         ?.setSelectionRange(0, 0);
-    await aTimeout(0);
     await sendKeys({ press: 'Backspace' });
     expect(options[1].selected).to.be.false;
     expect(options[0].selected).to.be.true;
@@ -395,6 +397,22 @@ it('clears the `value` of its `<input>` when multiselect and an option is select
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.value).to.be.empty.string;
 });
+it('does not clear its filter when a tag is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    option.selected = true;
+    component.focus();
+    await sendKeys({ type: 'one' });
+    component.shadowRoot
+        ?.querySelector('[data-test="tag"]')
+        ?.click();
+    await elementUpdated(component);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.value).to.equal('one');
+});
 it('uses `placeholder` as a placeholder when multiselect and no option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
       ${defaultSlot}
@@ -512,7 +530,7 @@ it('sets `aria-activedescendant` on open via click', async () => {
     // and would work. `CustomEvent` is used for completeness and to get us as close as
     // possible to a real click. See the comment in the handler for more information.
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -597,11 +615,11 @@ it('sets `aria-activedescendant` when closed via click', async () => {
       ${defaultSlot}
     </glide-core-dropdown>`);
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.click();
     await elementUpdated(component);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('sets `aria-activedescendant` when closed because it lost focus', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -610,7 +628,7 @@ it('sets `aria-activedescendant` when closed because it lost focus', async () =>
     component.focus();
     await sendKeys({ press: 'Tab' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('sets `aria-activedescendant` when closed because something outside of it was clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -619,7 +637,7 @@ it('sets `aria-activedescendant` when closed because something outside of it was
     document.body.click();
     await elementUpdated(component);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('sets `aria-activedescendant` when closed via Escape', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
@@ -628,7 +646,7 @@ it('sets `aria-activedescendant` when closed via Escape', async () => {
     component.focus();
     await sendKeys({ press: 'Escape' });
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.getAttribute('aria-activedescendant')).to.equal('');
+    expect(input?.getAttribute('aria-activedescendant')).to.be.empty.string;
 });
 it('cannot be tabbed to when `disabled`', async () => {
     await fixture(html `<glide-core-dropdown
@@ -691,14 +709,10 @@ it('has no icon when filtering and an option is selected', async () => {
 
       <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>`);
     component.focus();
     await sendKeys({ type: 'one' });