@crowdstrike/glide-core 0.5.1 → 0.6.0

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

@@ -0,0 +1,130 @@
+import * as sinon from 'sinon';
+import { aTimeout, 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('dispatches one "change" event when Select All is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    setTimeout(() => {
+        component.shadowRoot
+            ?.querySelector('[data-test="select-all"]')
+            ?.click();
+    });
+    await aTimeout(0);
+    expect(spy.calledOnce).to.be.true;
+});
+it('dispatches one "input" event when Select All is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    setTimeout(() => {
+        component.shadowRoot
+            ?.querySelector('[data-test="select-all"]')
+            ?.click();
+    });
+    await aTimeout(0);
+    expect(spy.calledOnce).to.be.true;
+});
+it('dispatches a "change" event when an option is selected after Select All is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    setTimeout(() => {
+        component.shadowRoot
+            ?.querySelector('[data-test="select-all"]')
+            ?.click();
+    });
+    await aTimeout(0);
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    setTimeout(() => {
+        component.querySelector('glide-core-dropdown-option')?.click();
+    });
+    await aTimeout(0);
+    expect(spy.called).to.be.true;
+});
+it('dispatches an "input" event when an option is selected after Select All is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    setTimeout(() => {
+        component.shadowRoot
+            ?.querySelector('[data-test="select-all"]')
+            ?.click();
+    });
+    await aTimeout(0);
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    setTimeout(() => {
+        component.querySelector('glide-core-dropdown-option')?.click();
+    });
+    await aTimeout(0);
+    expect(spy.called).to.be.true;
+});

package/dist/dropdown.test.focus.d.ts

@@ -0,0 +1 @@
+import './dropdown.option.js';

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

@@ -0,0 +1,154 @@
+import './dropdown.option.js';
+import { assert, expect, fixture, html } from '@open-wc/testing';
+import { sendMouse } from '@web/test-runner-commands';
+import GlideCoreDropdown from './dropdown.js';
+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>
+`;
+it('focuses the input when `focus` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+it('retains focus on the input when an option is selected via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+    >
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    const { x, y } = option.getBoundingClientRect();
+    // A simple `option.click()` won't do because we need a "mousedown" so that
+    // `#onOptionsMousedown` gets covered.
+    await sendMouse({
+        type: 'click',
+        position: [Math.ceil(x), Math.ceil(y)],
+    });
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+it('retains focus on the the input when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="component"]')
+        ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+it('retains focus on the the input when the button is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    component.focus();
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    assert(button);
+    const { x, y } = button.getBoundingClientRect();
+    // A simple `option.click()` won't do because we need a "mousedown" so that
+    // `#onDropdownMousedown` gets covered.
+    await sendMouse({
+        type: 'click',
+        position: [Math.ceil(x), Math.ceil(y)],
+    });
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+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,
+    });
+    form.requestSubmit();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.be.equal(input);
+});
+it('focuses the input 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>
+      ${defaultSlot}
+    </glide-core-dropdown>`, { parentNode: form });
+    component.reportValidity();
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(component.shadowRoot?.activeElement).to.equal(input);
+});
+it('does not focus the input when `checkValidity` is called', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
+      ${defaultSlot}
+    </glide-core-dropdown>`, { parentNode: form });
+    component.checkValidity();
+    expect(component.shadowRoot?.activeElement).to.equal(null);
+});

package/dist/dropdown.test.focus.js

@@ -0,0 +1,28 @@
+import './dropdown.option.js';
+import { 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';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('closes when it loses focus', async () => {
+    const div = document.createElement('div');
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, { parentNode: div });
+    const button = document.createElement('button');
+    div.prepend(button);
+    component.focus();
+    // Move focus to the body.
+    await sendKeys({ press: 'Tab' });
+    expect(component.open).to.be.false;
+    component.open = true;
+    component.focus();
+    // Move focus to the button.
+    await sendKeys({ down: 'Shift' });
+    await sendKeys({ press: 'Tab' });
+    expect(component.open).to.be.false;
+});

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

@@ -0,0 +1,181 @@
+import './dropdown.option.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdown from './dropdown.js';
+import GlideCoreDropdownOption from './dropdown.option.js';
+import GlideCoreTag from './tag.js';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('focuses the 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>`);
+    component.focus();
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="button"]'));
+});
+it('focuses the 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"
+      placeholder="Placeholder"
+      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>`, {
+        parentNode: form,
+    });
+    form.requestSubmit();
+    const button = component.shadowRoot?.querySelector('[data-test="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 () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      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>`, { parentNode: form });
+    component.reportValidity();
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    expect(component.shadowRoot?.activeElement).to.equal(button);
+});
+it('does not focus the button when `checkValidity` is called', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      required
+    >
+      <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 });
+    component.checkValidity();
+    expect(component.shadowRoot?.activeElement).to.equal(null);
+});
+it('focuses the second tag when the first one is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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);
+    expect(component.shadowRoot?.activeElement).to.equal(tags?.[1]);
+});
+it('focuses the third tag when the second one is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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);
+    expect(component.shadowRoot?.activeElement).to.equal(tags?.[2]);
+});
+it('focuses the second tag when the last one removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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);
+    expect(component.shadowRoot?.activeElement).to.equal(tags?.[1]);
+});

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

@@ -0,0 +1,53 @@
+import './dropdown.option.js';
+import { 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 () => {
+    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>`);
+    component.focus();
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="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>`, {
+        parentNode: form,
+    });
+    form.requestSubmit();
+    const button = component.shadowRoot?.querySelector('[data-test="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 () => {
+    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>`, { parentNode: form });
+    component.reportValidity();
+    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    expect(component.shadowRoot?.activeElement).to.equal(button);
+});
+it('does not focus the 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>`, { parentNode: form });
+    component.checkValidity();
+    expect(component.shadowRoot?.activeElement).to.equal(null);
+});

package/dist/dropdown.test.form.js

@@ -0,0 +1,140 @@
+import './dropdown.option.js';
+import { 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('exposes standard form control properties and methods', async () => {
+    const form = document.createElement('form');
+    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>`, { parentNode: form });
+    expect(component.form).to.equal(form);
+    expect(component.validity instanceof ValidityState).to.be.true;
+    expect(component.willValidate).to.be.true;
+    expect(component.checkValidity).to.be.a('function');
+    expect(component.reportValidity).to.be.a('function');
+});
+it('can be reset', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <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>`, {
+        parentNode: form,
+    });
+    component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="component"]')
+        ?.dispatchEvent(new Event('click'));
+    form.reset();
+    await elementUpdated(component);
+    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
+    expect(label?.textContent?.trim()).to.equal('Placeholder');
+    expect(component.value).to.deep.equal([]);
+});
+it('can be reset to the initially selected option', async () => {
+    const form = document.createElement('form');
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, {
+        parentNode: form,
+    });
+    component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="component"]')
+        ?.dispatchEvent(new Event('click'));
+    form.reset();
+    expect(component.value).to.deep.equal(['two']);
+});
+it('has `formData` value when an option is selected', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-dropdown
+        label="Label"
+        placeholder="Placeholder"
+        name="name"
+      >
+        <glide-core-dropdown-option
+          label="Label"
+          value="value"
+          selected
+        ></glide-core-dropdown-option>
+      </glide-core-dropdown>
+      >`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.equal('["value"]');
+});
+it('has no `formData` value when no option is selected', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      name="name"
+    >
+      <glide-core-dropdown-option
+        label=""
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when disabled and an option is selected', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      name="name"
+      disabled
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});
+it('has no `formData` value when an option is selected that has no `value`', async () => {
+    const form = document.createElement('form');
+    await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      name="name"
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, {
+        parentNode: form,
+    });
+    const formData = new FormData(form);
+    expect(formData.get('name')).to.be.null;
+});