@crowdstrike/glide-core 0.13.1 → 0.14.0

package/dist/dropdown.option.test.interactions.multiple.js

@@ -1,42 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreDropdownOption from './dropdown.option.js';
-GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
-it('is selected when programmatically selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      value="value"
-      private-multiple
-    ></glide-core-dropdown-option>`);
-    component.selected = true;
-    await elementUpdated(component);
-    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
-    expect(component.ariaSelected).to.equal('true');
-    expect(checkbox?.checked).to.be.true;
-});
-it('is deselected when programmatically deselected', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      value="value"
-      private-multiple
-      selected
-    ></glide-core-dropdown-option>`);
-    component.selected = false;
-    await elementUpdated(component);
-    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
-    expect(component.selected).to.be.false;
-    expect(component.ariaSelected).to.equal('false');
-    expect(checkbox?.checked).to.be.false;
-});
-it('sets `privateIsEditActive`', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      editable
-      private-multiple
-    ></glide-core-dropdown-option>`);
-    const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
-    button?.dispatchEvent(new MouseEvent('mouseover'));
-    expect(component.privateIsEditActive).to.be.true;
-    button?.dispatchEvent(new MouseEvent('mouseout'));
-    expect(component.privateIsEditActive).to.be.false;
-});

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

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

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

@@ -1,76 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
-import GlideCoreDropdownOption from './dropdown.option.js';
-GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
-it('is selected when programmatically selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      value="value"
-    ></glide-core-dropdown-option>`);
-    component.selected = true;
-    await elementUpdated(component);
-    expect(component.ariaSelected).to.equal('true');
-});
-it('has a tooltip when active and with a long label', async () => {
-    // The period is arbitrary. 500 of them ensures we exceed the maximum
-    // width even if it's increased.
-    const component = await fixture(html `<glide-core-dropdown-option
-      label=${'.'.repeat(500)}
-      value="value"
-    ></glide-core-dropdown-option>`);
-    component.privateIsTooltipOpen = true;
-    // Wait for the tooltip.
-    await aTimeout(0);
-    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
-    expect(tooltip?.checkVisibility()).to.be.true;
-});
-it('has no tooltip when active and with a short label', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      value="value"
-    ></glide-core-dropdown-option>`);
-    component.privateActive = true;
-    // Wait for the tooltip.
-    await aTimeout(0);
-    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
-    expect(tooltip?.checkVisibility()).to.be.false;
-});
-it('has a tooltip when active and with a long label set programmatically', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      value="value"
-    ></glide-core-dropdown-option>`);
-    component.privateIsTooltipOpen = true;
-    // The period is arbitrary. 500 of them ensures we exceed the maximum
-    // width even if it's increased.
-    component.label = '.'.repeat(500);
-    // Wait for the tooltip.
-    await aTimeout(0);
-    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
-    expect(tooltip?.checkVisibility()).to.be.true;
-});
-it('has no tooltip when active and with a short label set programmatically', async () => {
-    // The period is arbitrary. 500 of them ensures we exceed the maximum
-    // width even if it's increased.
-    const component = await fixture(html `<glide-core-dropdown-option
-      label=${'.'.repeat(500)}
-      value="value"
-    ></glide-core-dropdown-option>`);
-    component.privateActive = true;
-    component.label = 'Label';
-    // Wait for the tooltip.
-    await aTimeout(0);
-    const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
-    expect(tooltip?.checkVisibility()).to.be.false;
-});
-it('sets `privateIsEditActive`', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      editable
-    ></glide-core-dropdown-option>`);
-    const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
-    button?.dispatchEvent(new MouseEvent('mouseover'));
-    expect(component.privateIsEditActive).to.be.true;
-    button?.dispatchEvent(new MouseEvent('mouseout'));
-    expect(component.privateIsEditActive).to.be.false;
-});

package/dist/dropdown.stories.d.ts

@@ -1,8 +0,0 @@
-import './dropdown.option.js';
-import './icons/storybook.js';
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-export declare const Dropdown: StoryObj;
-export declare const WithError: StoryObj;
-export declare const WithIcons: StoryObj;

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

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

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

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

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

@@ -1,108 +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';
-GlideCoreDropdown.shadowRootOptions.mode = 'open';
-const defaultSlot = html `
-  <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('is accessible', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
-      ${defaultSlot}
-    </glide-core-dropdown>`);
-    await expect(component).to.be.accessible({
-        ignoredRules: [
-            // Axe doesn't like that our item count element doesn't have a `role`. Yet
-            // it does label `<input>` and is announced correctly, at least by VoiceOver.
-            'aria-prohibited-attr',
-            // Axe doesn't search within slots when determining whether an element
-            // has an ID that matches `aria-activedescendant` exists.
-            'aria-valid-attr-value',
-        ],
-    });
-});
-it('is filterable', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
-      ${defaultSlot}
-    </glide-core-dropdown>`);
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.checkVisibility()).to.be.true;
-});
-it('uses `placeholder` as a placeholder when not `multiple` and no option is selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      ${defaultSlot}
-    </glide-core-dropdown>`);
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.placeholder).to.equal('Placeholder');
-});
-it('sets `value` of its `<input>` when an option is initially selected', 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="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>`);
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.value).to.equal('One');
-});

package/dist/dropdown.test.basics.js

@@ -1,181 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { ArgumentError } from 'ow';
-import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
-import { repeat } from 'lit/directives/repeat.js';
-import GlideCoreDropdown from './dropdown.js';
-import GlideCoreDropdownOption from './dropdown.option.js';
-import expectArgumentError from './library/expect-argument-error.js';
-import sinon from 'sinon';
-// You'll notice quite a few duplicated tests among the "*.single.ts", "*.multiple.ts",
-// and "*.filterable.ts" test suites. The thinking is that a test warrants
-// duplication whenever Dropdown's internal logic isn't shared among all three
-// of those states or if one state goes down a significantly different code path.
-//
-// There are still gaps. And there are exceptions to avoid excessive duplication
-// for the sake of organization. Many of the tests in `dropdown.test.interactions.ts`,
-// for example, don't apply to the filterable case and so aren't common among all
-// three states. They nonetheless reside there because moving them out and
-// duplicating them in both `dropdown.test.interactions.single.ts` and
-// `dropdown.test.interactions.multiple.ts` would add a ton of test weight.
-GlideCoreDropdown.shadowRootOptions.mode = 'open';
-GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-dropdown')).to.equal(GlideCoreDropdown);
-});
-it('has defaults', async () => {
-    // Required attributes are supplied here and thus left unasserted below. The
-    // idea is that this test shouldn't fail to typecheck if these templates are
-    // eventually typechecked, which means supplying all required attributes and slots.
-    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>`);
-    expect(component.disabled).to.be.false;
-    expect(component.filterable).to.be.false;
-    expect(component.name).to.be.empty.string;
-    expect(component.required).to.be.false;
-    expect(component.size).to.equal('large');
-    // Not reflected, so no attribute assertion is necessary.
-    expect(component.value).to.deep.equal([]);
-});
-it('can be open', 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);
-    const options = component.shadowRoot?.querySelector('[data-test="options"]');
-    expect(component.open).to.be.true;
-    expect(component.hasAttribute('open')).to.be.true;
-    expect(options?.checkVisibility()).to.be.true;
-});
-it('cannot be open when disabled', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      open
-      disabled
-    >
-      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const options = component?.shadowRoot?.querySelector('[data-test="options"]');
-    expect(options?.checkVisibility()).to.be.false;
-});
-it('can be filterable', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      filterable
-    >
-      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const input = component.shadowRoot?.querySelector('[data-test="input"]');
-    expect(input?.checkVisibility()).to.be.true;
-});
-it('activates the first option when no options are initially selected', 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');
-    expect(options[0]?.privateActive).to.be.true;
-    expect(options[1]?.privateActive).to.be.false;
-});
-it('activates the last selected option when options are initially selected', 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"
-        selected
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Three"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const options = component.querySelectorAll('glide-core-dropdown-option');
-    expect(options[0]?.privateActive).to.be.false;
-    expect(options[1]?.privateActive).to.be.false;
-    expect(options[2]?.privateActive).to.be.true;
-});
-it('is scrollable', 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-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>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const options = component.shadowRoot?.querySelector('[data-test="options"]');
-    assert(options);
-    expect(options.scrollHeight).to.be.greaterThan(options.clientHeight);
-});
-it('is not scrollable', 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-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>`);
-    // Wait for it to open.
-    await aTimeout(0);
-    const options = component.shadowRoot?.querySelector('[data-test="options"]');
-    assert(options);
-    expect(options.scrollHeight).to.equal(options.clientHeight);
-});
-it('throws if the default slot is the incorrect type', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-        <button>Button</button>
-      </glide-core-dropdown>`);
-    });
-});
-it('does not throw if the default slot only contains whitespace', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-        ${repeat([], () => html `<glide-core-dropdown-option
-              label="Option"
-            ></glide-core-dropdown-option>`)}
-      </glide-core-dropdown>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(0);
-});
-it('hides the tooltip of the active option when open', async () => {
-    // The period is arbitrary. 500 of them ensures we exceed the maximum
-    // width even if it's increased.
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label=${'.'.repeat(500)}
-      ></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 tooltip = component
-        .querySelector('glide-core-dropdown-option')
-        ?.shadowRoot?.querySelector('[data-test="tooltip"]');
-    expect(tooltip?.checkVisibility()).to.be.false;
-});

package/dist/dropdown.test.basics.multiple.d.ts

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