@crowdstrike/glide-core 0.13.1 → 0.14.0

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

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

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

@@ -1,569 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { ArgumentError } from 'ow';
-import { aTimeout, assert, elementUpdated, expect, fixture, html, oneEvent, } 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('opens on click', 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>`);
-    // 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
-    // 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="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    // Wait for it to open.
-    await aTimeout(0);
-    const options = component.shadowRoot?.querySelector('[data-test="options"]');
-    expect(component.open).to.be.true;
-    expect(options?.checkVisibility()).to.be.true;
-});
-it('toggles open and closed when the primary button is clicked', async () => {
-    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>`);
-    // 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
-    // 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="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    await elementUpdated(component);
-    const options = component.shadowRoot?.querySelector('[data-test="options"]');
-    expect(component.open).to.be.false;
-    expect(options?.checkVisibility()).to.be.false;
-});
-it('does not toggle open and closed when the button overflow text is clicked', async () => {
-    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>`);
-    // 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
-    // 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="tag-overflow-text"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    // Wait for it to open.
-    await aTimeout(0);
-    const options = component.shadowRoot?.querySelector('[data-test="options"]');
-    expect(component.open).to.be.true;
-    expect(options?.checkVisibility()).to.be.true;
-});
-it('selects an option on click', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const option = component.querySelector('glide-core-dropdown-option');
-    option?.click();
-    await elementUpdated(component);
-    const labels = component.shadowRoot?.querySelectorAll('[data-test="selected-option-label"]');
-    expect(option?.selected).to.be.true;
-    expect(labels?.length).to.equal(1);
-    expect(labels?.[0]?.textContent?.trim()).to.equal('One,');
-});
-it('selects an option on 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>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const option = component.querySelector('glide-core-dropdown-option');
-    option?.focus();
-    await sendKeys({ press: ' ' });
-    expect(option?.selected).to.be.true;
-});
-it('selects an option when its icon is clicked', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option label="One" value="one">
-        <svg
-          slot="icon"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          style="height: 1rem; width: 1rem;"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
-          />
-        </svg>
-      </glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const option = component.querySelector('glide-core-dropdown-option');
-    option
-        ?.querySelector('[slot="icon"]')
-        ?.dispatchEvent(new Event('click', { bubbles: true }));
-    expect(option?.selected).to.be.true;
-});
-it('does not deselect options on Space', async () => {
-    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>`);
-    component?.focus();
-    await sendKeys({ press: ' ' });
-    const option = component.querySelector('glide-core-dropdown-option');
-    expect(option?.selected).to.be.true;
-});
-it('selects an option on Enter', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const option = component.querySelector('glide-core-dropdown-option');
-    option?.focus();
-    await sendKeys({ press: 'Enter' });
-    expect(option?.selected).to.be.true;
-});
-it('deactivates all other options on "mouseover"', async () => {
-    const component = await fixture(html `<glide-core-dropdown open>
-      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    expect(options[0]?.privateActive).to.be.false;
-    expect(options[1]?.privateActive).to.be.true;
-});
-it('closes 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="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    component.querySelector('glide-core-dropdown-option')?.click();
-    expect(component.open).to.be.false;
-});
-it('closes 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="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    component.focus();
-    await sendKeys({ press: ' ' });
-    expect(component.open).to.be.false;
-});
-it('closes 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="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    component.focus();
-    await sendKeys({ press: 'Enter' });
-    expect(component.open).to.be.false;
-});
-it('closes 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="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    component.querySelector('glide-core-dropdown-option')?.focus();
-    await sendKeys({ press: 'Enter' });
-    expect(component.open).to.be.false;
-});
-it('closes 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="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const option = component.querySelector('glide-core-dropdown-option');
-    option?.focus();
-    await sendKeys({ press: ' ' });
-    expect(component.open).to.be.false;
-});
-it('closes when an already selected option is clicked', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    component.querySelector('glide-core-dropdown-option')?.click();
-    expect(component.open).to.be.false;
-});
-it('closes on edit via click', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        editable
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    component.shadowRoot
-        ?.querySelector('[data-test="edit-button"]')
-        ?.click();
-    expect(component.open).to.be.false;
-});
-it('deselects all other options when one is newly selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="One"
-        selected
-      ></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>`);
-    component.shadowRoot
-        ?.querySelector('[data-test="primary-button"]')
-        ?.dispatchEvent(new Event('click'));
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1].click();
-    expect(options[0].selected).to.be.false;
-    expect(options[1].selected).to.be.true;
-    expect(options[2].selected).to.be.false;
-});
-it('updates its internal label when `label` of the selected option is changed programmatically', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="One"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const option = component.querySelector('glide-core-dropdown-option');
-    assert(option);
-    option.label = 'Two';
-    await elementUpdated(component);
-    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label?.textContent?.trim()).to.equal(option?.label);
-});
-it('shows an Edit button when `editable` of the selected option is changed programmatically', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="One"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const option = component.querySelector('glide-core-dropdown-option');
-    assert(option);
-    option.editable = true;
-    await elementUpdated(component);
-    const editButton = component.shadowRoot?.querySelector('[data-test="edit-button"]');
-    expect(editButton?.checkVisibility()).to.be.true;
-});
-it('selects and deselects options when `value` is changed programmatically', 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>`);
-    component.value = ['two'];
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    expect(options[0].selected).to.be.false;
-    expect(options[1].selected).to.be.true;
-});
-it('throws when `value` is changed programmatically to include more than one value', async () => {
-    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>`);
-    const spy = sinon.spy();
-    try {
-        component.value = ['one', 'two'];
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(1);
-});
-it('updates `value` when an option `value` is changed programmatically', 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>`);
-    const option = component.querySelector('glide-core-dropdown-option');
-    assert(option);
-    option.value = 'two';
-    expect(component.value).to.deep.equal(['two']);
-});
-it('updates `value` 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="Two"
-        value="two"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[1].click();
-    expect(component.value).to.deep.equal(['two']);
-    // Reopen it.
-    component.shadowRoot
-        ?.querySelector('[data-test="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { detail: 1 }));
-    // Wait for it to open.
-    await elementUpdated(component);
-    options[1].click();
-    expect(component.value).to.deep.equal(['two']);
-    // Reopen it.
-    component.shadowRoot
-        ?.querySelector('[data-test="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { detail: 1 }));
-    // Wait for it to open.
-    await elementUpdated(component);
-    options[2].click();
-    expect(component.value).to.deep.equal([]);
-});
-it('updates `value` when an option is selected via Enter', async () => {
-    const component = await fixture(html `<glide-core-dropdown open>
-      <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="Two"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0].focus();
-    await sendKeys({ press: 'Enter' });
-    expect(component.value).to.deep.equal(['one']);
-    // Reopen it.
-    component.shadowRoot
-        ?.querySelector('[data-test="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    // Wait for it to open.
-    await aTimeout(0);
-    options[1].focus();
-    await sendKeys({ press: 'Enter' });
-    expect(component.value).to.deep.equal(['two']);
-    // Reopen it.
-    component.shadowRoot
-        ?.querySelector('[data-test="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    // Wait for it to open.
-    await aTimeout(0);
-    options[2].focus();
-    await sendKeys({ press: 'Enter' });
-    expect(component.value).to.deep.equal([]);
-});
-it('updates `value` when an option is selected via Space', async () => {
-    const component = await fixture(html `<glide-core-dropdown open>
-      <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"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    options[0].focus();
-    await sendKeys({ press: ' ' });
-    expect(component.value).to.deep.equal(['one']);
-    // Reopen it.
-    component.shadowRoot
-        ?.querySelector('[data-test="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    // Wait for it to open.
-    await aTimeout(0);
-    options[1].focus();
-    await sendKeys({ press: ' ' });
-    expect(component.value).to.deep.equal(['two']);
-    // Reopen it.
-    component.shadowRoot
-        ?.querySelector('[data-test="primary-button"]')
-        ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
-    // Wait for it to open.
-    await aTimeout(0);
-    options[2].focus();
-    await sendKeys({ press: ' ' });
-    expect(component.value).to.deep.equal([]);
-});
-it('updates `value` when `multiple` is changed to `false` programmatically', async () => {
-    const component = await fixture(html `<glide-core-dropdown 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>`);
-    component.multiple = false;
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    const checkbox = options[1].shadowRoot?.querySelector('[data-test="checkbox"]');
-    expect(options[0].selected).to.be.false;
-    expect(options[1].selected).to.be.true;
-    expect(checkbox?.checked).to.be.true;
-    expect(component.value).to.deep.equal(['two']);
-});
-it('updates `value` when the `value` of the selected option is changed programmatically', async () => {
-    const component = await fixture(html `<glide-core-dropdown 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>`);
-    const option = component.querySelector('glide-core-dropdown-option');
-    assert(option);
-    option.value = 'three';
-    expect(component.value).to.deep.equal(['three']);
-});
-it('updates `value` when the `value` of the selected option is removed programmatically', async () => {
-    const component = await fixture(html `<glide-core-dropdown 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>`);
-    const option = component.querySelector('glide-core-dropdown-option');
-    assert(option);
-    option.value = '';
-    expect(component.value).to.deep.equal([]);
-});
-it('updates the its internal label when an option is newly selected', 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="Two"
-        value="two"
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const option = component.querySelector('glide-core-dropdown-option:last-of-type');
-    option?.click();
-    await elementUpdated(component);
-    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label?.textContent?.trim()).to.equal(option?.label);
-});
-it('hides Select All', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      select-all
-    >
-      <glide-core-dropdown-option
-        label="One"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
-    expect(selectAll?.checkVisibility()).to.not.be.ok;
-});
-it('cannot be tabbed to when `disabled`', async () => {
-    await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
-      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    await sendKeys({ down: 'Tab' });
-    expect(document.activeElement).to.equal(document.body);
-});
-it('clicks the primary button when `click()` 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>`);
-    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
-    assert(button);
-    setTimeout(() => {
-        component.click();
-    });
-    const event = await oneEvent(button, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-});
-it('unhides its options when made unfilterable', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      filterable
-    >
-      <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();
-    await sendKeys({ type: 'one' });
-    component.filterable = false;
-    const options = [
-        ...component.querySelectorAll('glide-core-dropdown-option'),
-    ].filter(({ hidden }) => !hidden);
-    expect(options.length).to.equal(2);
-});

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

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