@crowdstrike/glide-core 0.13.0 → 0.14.0

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

@@ -1,170 +0,0 @@
-import './dropdown.option.js';
-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" multiple>
-      <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"]'));
-});
-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"
-      placeholder="Placeholder"
-      multiple
-      required
-    >
-      <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,
-    });
-    form.requestSubmit();
-    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
-    expect(component.shadowRoot?.activeElement).to.be.equal(button);
-});
-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"
-      placeholder="Placeholder"
-      multiple
-      required
-    >
-      <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"]');
-    expect(component.shadowRoot?.activeElement).to.equal(button);
-});
-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"
-      multiple
-      required
-    >
-      <glide-core-dropdown-option
-        label="One"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="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"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="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 () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      open
-      multiple
-    >
-      <glide-core-dropdown-option
-        label="One"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="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 third tag removed', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      open
-      multiple
-    >
-      <glide-core-dropdown-option
-        label="One"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="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.d.ts

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

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

@@ -1,42 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-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 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"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    component.focus();
-    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"></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
-    });
-    form.requestSubmit();
-    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
-    expect(component.shadowRoot?.activeElement).to.be.equal(button);
-});
-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"></glide-core-dropdown-option>
-    </glide-core-dropdown>`, { parentNode: form });
-    component.reportValidity();
-    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
-    expect(component.shadowRoot?.activeElement).to.equal(button);
-});
-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"></glide-core-dropdown-option>
-    </glide-core-dropdown>`, { parentNode: form });
-    component.checkValidity();
-    expect(component.shadowRoot?.activeElement).to.equal(null);
-});

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

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

package/dist/dropdown.test.form.js

@@ -1,74 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-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';
-import sinon from 'sinon';
-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"></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('submits its form on Enter when closed', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    form.addEventListener('submit', (event) => {
-        event.preventDefault();
-        spy();
-    });
-    component.focus();
-    await sendKeys({ press: 'Enter' });
-    expect(spy.callCount).to.equal(1);
-});
-it('does not submit its form on Enter when open', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`, {
-        parentNode: form,
-    });
-    const spy = sinon.spy();
-    form.addEventListener('submit', (event) => {
-        event.preventDefault();
-        spy();
-    });
-    component.focus();
-    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.form.multiple.d.ts

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

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

@@ -1,151 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-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('can be reset', async () => {
-    const form = document.createElement('form');
-    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>`, {
-        parentNode: form,
-    });
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.shadowRoot
-        ?.querySelector('[data-test="component"]')
-        ?.dispatchEvent(new Event('click'));
-    options[1]?.shadowRoot
-        ?.querySelector('[data-test="component"]')
-        ?.dispatchEvent(new Event('click'));
-    form.reset();
-    await elementUpdated(component);
-    expect(component.value).to.deep.equal([]);
-    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label?.textContent?.trim()).to.equal('Placeholder');
-});
-it('can be reset to the initially selected options', async () => {
-    const form = document.createElement('form');
-    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"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Three"
-        value="three"
-        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();
-    const tags = component.shadowRoot?.querySelectorAll('[data-test="tag"]');
-    expect(tags?.length).to.equal(2);
-    expect(tags?.[0].label).to.equal('Two');
-    expect(tags?.[1].label).to.equal('Three');
-    expect(component.value).to.deep.equal(['two', 'three']);
-});
-it('has `formData` value when options are selected', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-dropdown
-        label="Label"
-        placeholder="Placeholder"
-        name="name"
-        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>
-      >`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.equal('["one","two"]');
-});
-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"
-      multiple
-    >
-      <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
-      multiple
-    >
-      <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"
-      multiple
-    >
-      <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;
-});

package/dist/dropdown.test.form.single.d.ts

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

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

@@ -1,129 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-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('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();
-    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label?.textContent?.trim()).to.equal('Two');
-    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;
-});

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

@@ -1 +0,0 @@
-export {};

package/dist/dropdown.test.interactions.filterable.d.ts

@@ -1 +0,0 @@
-export {};