@crowdstrike/glide-core 0.7.0 → 0.9.0

package/dist/dropdown.option.styles.js

@@ -1,7 +1,10 @@
 import{css}from"lit";export default[css`
     .component {
       align-items: center;
+      block-size: var(--private-option-height);
       border-radius: var(--glide-core-spacing-sm);
+      max-inline-size: 21.875rem;
+      user-select: none;
 
       &.active {
         background-color: var(--glide-core-surface-hover);
@@ -61,4 +64,14 @@ import{css}from"lit";export default[css`
     .indeterminate-icon {
       display: none;
     }
+
+    .tooltip {
+      overflow: hidden;
+    }
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   `];

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
@@ -15,18 +16,21 @@ it('has defaults', async () => {
     expect(component.getAttribute('private-multiple')).to.equal(null);
     expect(component.privateSize).to.equal('large');
     expect(component.getAttribute('private-size')).to.equal('large');
+    expect(component.selected).to.equal(false);
+    expect(component.hasAttribute('selected')).to.be.false;
+    expect(component.value).to.equal('');
+    expect(component.getAttribute('value')).to.equal('');
     // None are reflected, so no attribute assertions are necessary.
     expect(component.privateActive).to.equal(false);
     expect(component.privateIndeterminate).to.equal(false);
-    expect(component.selected).to.equal(false);
-    expect(component.value).to.equal('');
 });
 it('can have a label', async () => {
     const component = await fixture(html `<glide-core-dropdown-option
       label="Label"
       value="value"
     ></glide-core-dropdown-option>`);
-    expect(component.shadowRoot?.textContent?.trim()).to.equal('Label');
+    const label = component.shadowRoot?.querySelector('[data-test="label"]');
+    expect(label?.textContent?.trim()).to.equal('Label');
 });
 it('can have an icon', async () => {
     const component = await fixture(html `<glide-core-dropdown-option label="Label" value="value">

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
@@ -7,7 +8,7 @@ it('dispatches a "private-selected-change" event', async () => {
       value="value"
     ></glide-core-dropdown-option>`);
     setTimeout(() => {
-        component.click();
+        component.selected = true;
     });
     const event = await oneEvent(component, 'private-selected-change');
     expect(event instanceof Event).to.be.true;

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

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
-it('focuses itself when `focus` is called', async () => {
+it('focuses itself when `focus()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown-option
       label="Label"
       value="value"

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

@@ -1,58 +1,7 @@
-import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
-import GlideCoreCheckbox from './checkbox.js';
+/* 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 on click', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      private-multiple
-    ></glide-core-dropdown-option>`);
-    component.click();
-    await elementUpdated(component);
-    expect(component.selected).to.be.true;
-    expect(component.ariaSelected).to.equal('true');
-});
-it('is deselected on click', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      private-multiple
-      selected
-    ></glide-core-dropdown-option>`);
-    component.click();
-    await elementUpdated(component);
-    expect(component.selected).to.be.false;
-    expect(component.ariaSelected).to.equal('false');
-});
-it('is selected on click when the checkbox itself is clicked', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      private-multiple
-    ></glide-core-dropdown-option>`);
-    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
-    checkbox?.click();
-    await elementUpdated(component);
-    expect(component.selected).to.be.true;
-    expect(component.ariaSelected).to.equal('true');
-    expect(checkbox?.checked).to.be.true;
-});
-it('is deselected on click when the checkbox itself is clicked', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      private-multiple
-      selected
-    ></glide-core-dropdown-option>`);
-    // Checkbox has its own lifecycle. Wait until it's ready.
-    await waitUntil(() => {
-        return (component.shadowRoot?.querySelector('[data-test="checkbox"]') instanceof
-            GlideCoreCheckbox);
-    });
-    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
-    checkbox?.click();
-    await elementUpdated(component);
-    expect(component.selected).to.be.false;
-    expect(component.ariaSelected).to.equal('false');
-    expect(checkbox?.checked).to.be.false;
-});
 it('is selected when programmatically selected', async () => {
     const component = await fixture(html `<glide-core-dropdown-option
       label="Label"
@@ -62,7 +11,6 @@ it('is selected when programmatically selected', async () => {
     component.selected = true;
     await elementUpdated(component);
     const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
-    expect(component.selected).to.be.true;
     expect(component.ariaSelected).to.equal('true');
     expect(checkbox?.checked).to.be.true;
 });

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

@@ -1,22 +1,65 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+/* 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 on click', async () => {
+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.click();
+    component.selected = true;
     await elementUpdated(component);
-    expect(component.selected).to.be.true;
     expect(component.ariaSelected).to.equal('true');
 });
-it('is selected when programmatically selected', async () => {
+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.privateActive = 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.selected = true;
-    await elementUpdated(component);
-    expect(component.selected).to.be.true;
-    expect(component.ariaSelected).to.equal('true');
+    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.privateActive = 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;
 });

package/dist/dropdown.styles.js

@@ -31,7 +31,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       font-style: var(--glide-core-body-sm-font-style);
       font-weight: var(--glide-core-body-sm-font-weight);
       gap: var(--glide-core-spacing-xs);
-      justify-content: space-between;
       min-inline-size: var(--min-inline-size);
       padding-inline: var(--glide-core-spacing-sm);
       text-align: start;
@@ -79,29 +78,25 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .options {
+      --border-width: 1px;
+      --padding: var(--glide-core-spacing-xxxs);
+      --private-option-height: 1.75rem;
+
       background-color: var(--glide-core-surface-modal);
-      border: 1px solid var(--glide-core-surface-modal);
+      border: var(--border-width) solid var(--glide-core-surface-modal);
       border-radius: var(--glide-core-spacing-xs);
       box-shadow: var(--glide-core-shadow-lg);
       box-sizing: border-box;
-      inset-block-start: 100%;
-      inset-inline-start: 0;
-      margin-block: var(--glide-core-spacing-xxs) 0;
+      inset: unset;
+      max-block-size: calc(
+        var(--private-option-height) * 9 + var(--padding) * 2 +
+          var(--border-width) * 2
+      );
       min-inline-size: var(--min-inline-size);
-      padding: var(--glide-core-spacing-xxxs);
+      overflow: auto;
+      padding: var(--padding);
       position: absolute;
-      visibility: hidden;
-
-      /*
-        ".dropdown-and-options" is relative and many Dropdowns may be stacked in a column.
-        This ensures the ".options" of Dropdowns earlier in the column aren't obscured by
-        the ".dropdown-and-options" that come later.
-      */
-      z-index: 1;
-
-      &.visible {
-        visibility: visible;
-      }
+      scroll-behavior: smooth;
     }
 
     .select-all {
@@ -134,9 +129,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
+    .tag-overflow-text-and-button {
+      column-gap: var(--glide-core-spacing-md);
+      display: flex;
+      margin-inline-start: auto;
+    }
+
     .tag-overflow-text {
       color: var(--glide-core-text-link);
-      margin-inline-end: var(--glide-core-spacing-md);
     }
 
     .button {
@@ -158,6 +158,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       block-size: var(--button-and-input-height);
       border: none;
       cursor: inherit;
+      flex-grow: 1;
       font-size: inherit;
       min-inline-size: var(--min-inline-size);
       padding: 0;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';

package/dist/dropdown.test.basics.js

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
 import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
 import { repeat } from 'lit/directives/repeat.js';
 import GlideCoreDropdown from './dropdown.js';
 import expectArgumentError from './library/expect-argument-error.js';
@@ -41,6 +42,36 @@ it('has defaults', async () => {
     // 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"
+        value="value"
+        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"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component?.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.false;
+});
 it('can have a label', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -207,6 +238,117 @@ it('activates the last selected option when options are initially selected', asy
     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"
+        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>`);
+    // 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"
+        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>`);
+    // 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">
@@ -229,5 +371,5 @@ it('does not throw if the default slot only contains whitespace', async () => {
             spy();
         }
     }
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

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

@@ -1,7 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
-import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('is accessible', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
@@ -112,6 +112,7 @@ it('shows Select All', async () => {
       placeholder="Placeholder"
       multiple
       select-all
+      open
     >
       <glide-core-dropdown-option
         label="One"
@@ -124,8 +125,10 @@ it('shows Select All', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
-    expect(selectAll?.checkVisibility()).to.be.ok;
+    expect(selectAll?.checkVisibility()).to.be.true;
 });
 it('sets Select All as selected when all options are initially selected', async () => {
     const component = await fixture(html `<glide-core-dropdown

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

@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
-import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('is accessible ', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">

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

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import * as sinon from 'sinon';
+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';
+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('does not dispatch "input" events on input', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    component.focus();
+    await sendKeys({ type: ' one ' });
+    expect(spy.callCount).to.equal(0);
+});