@crowdstrike/glide-core 0.12.0 → 0.12.2

package/dist/dropdown.styles.js

@@ -1,4 +1,5 @@
-import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(".edit-button:focus-visible")}
     ${opacityAndScaleAnimation(".options:popover-open")}
     ${visuallyHidden(".selected-option-labels")}
   `,css`
@@ -67,27 +68,23 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
 
       &.quiet {
-        &:is(:hover, :has(.button:focus-visible, .input:focus-visible)):not(
-            &.error,
-            &.disabled,
-            &.multiple,
-            &.readonly
-          ) {
+        &:is(
+            :hover,
+            :has(.primary-button:focus-visible, .input:focus-visible)
+          ):not(&.error, &.disabled, &.multiple, &.readonly) {
           background-color: var(--glide-core-surface-hover);
           color: var(--glide-core-text-body-1);
         }
       }
 
-      &:is(:hover, :has(.button:focus-visible, .input:focus-visible)):not(
-          &.disabled,
-          &.error,
-          &.quiet,
-          &.readonly
-        ) {
+      &:is(
+          :hover,
+          :has(.primary-button:focus-visible, .input:focus-visible)
+        ):not(&.disabled, &.error, &.quiet, &.readonly) {
         border-color: var(--glide-core-border-focus);
       }
 
-      &:has(.button:focus-visible, .input:focus-visible) {
+      &:has(.primary-button:focus-visible, .input:focus-visible) {
         &.quiet {
           border-color: var(--glide-core-border-focus);
         }
@@ -172,8 +169,8 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
     }
 
-    .tag-overflow-text-and-button {
-      column-gap: var(--glide-core-spacing-md);
+    .tag-overflow-and-buttons {
+      align-items: center;
       display: flex;
       margin-inline-start: auto;
     }
@@ -181,6 +178,7 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
     .tag-overflow-text {
       align-content: center;
       color: var(--glide-core-text-link);
+      margin-inline-end: var(--glide-core-spacing-md);
     }
 
     .single-select-icon-slot {
@@ -205,7 +203,7 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       padding-block-start: 0.125rem;
     }
 
-    .button {
+    .primary-button {
       align-items: center;
       background: none;
       block-size: var(--button-and-input-height);
@@ -219,6 +217,11 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
     }
 
+    .edit-button {
+      display: flex;
+      margin-inline-end: var(--glide-core-spacing-xxs);
+    }
+
     .input {
       background-color: transparent;
       block-size: var(--button-and-input-height);

package/dist/dropdown.test.events.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import * as sinon from 'sinon';
 import { aTimeout, assert, 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';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
@@ -10,6 +11,72 @@ GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 // timeout, which would make for a slow test. Its timeout can likely be
 // configured. But waiting a turn of the event loop, when which the event
 // will have been dispatched, gets the job done as well.
+it('dispatches an "edit" event on click', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    setTimeout(() => {
+        const button = component
+            .querySelector('glide-core-dropdown-option')
+            ?.shadowRoot?.querySelector('[data-test="edit-button"]');
+        button?.dispatchEvent(new Event('mouseover'));
+        button?.click();
+    });
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    const event = await oneEvent(option, 'edit');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(event.target).to.equal(option);
+});
+it('dispatches an "edit" event on Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.dispatchEvent(new Event('mouseover'));
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    sendKeys({ press: 'Enter' });
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    const event = await oneEvent(option, 'edit');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(event.target).to.equal(option);
+});
+it('dispatches an "edit" event on Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component
+        .querySelector('glide-core-dropdown-option')
+        ?.shadowRoot?.querySelector('[data-test="edit-button"]')
+        ?.dispatchEvent(new Event('mouseover'));
+    component.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    sendKeys({ press: ' ' });
+    const option = component.querySelector('glide-core-dropdown-option');
+    assert(option);
+    const event = await oneEvent(option, 'edit');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(event.target).to.equal(option);
+});
 it('dispatches an "invalid" event 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>

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

@@ -82,6 +82,93 @@ it('dispatches one "change" event when an option is selected via Space', async (
     expect(event.bubbles).to.be.true;
     expect(spy.callCount).to.equal(1);
 });
+it('dispatches an "edit" event on click', async () => {
+    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>`);
+    setTimeout(() => {
+        component?.shadowRoot
+            ?.querySelector('[data-test="edit-button"]')
+            ?.click();
+    });
+    const event = await oneEvent(component, 'edit');
+    const option = component.querySelector('glide-core-dropdown-option');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(event.target).to.equal(option);
+});
+it('dispatches an "edit" event on Enter', async () => {
+    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>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    sendKeys({ press: 'Enter' });
+    const event = await oneEvent(component, 'edit');
+    const option = component.querySelector('glide-core-dropdown-option');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(event.target).to.equal(option);
+});
+it('dispatches an "edit" event on Space', async () => {
+    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>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    sendKeys({ press: ' ' });
+    const event = await oneEvent(component, 'edit');
+    const option = component.querySelector('glide-core-dropdown-option');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.target).to.equal(option);
+});
+it('does not dispatch an "edit" event when `disabled`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('edit', spy);
+    component?.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.click();
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch an "edit" event when `readonly`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
+      <glide-core-dropdown-option
+        label="Label"
+        editable
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('edit', spy);
+    component?.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.click();
+    expect(spy.callCount).to.equal(0);
+});
 it('dispatches one "input" event 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

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

@@ -109,12 +109,12 @@ it('retains focus on the the input when an option is selected via Enter', async
     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 () => {
+it('retains focus on the the input when the primary button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
       ${defaultSlot}
     </glide-core-dropdown>`);
     component.focus();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     assert(button);
     const { x, y } = button.getBoundingClientRect();
     // A simple `option.click()` won't do because we need a "mousedown" so that

package/dist/dropdown.test.focus.js

@@ -27,7 +27,7 @@ it('closes and reports validity when it loses focus', async () => {
     expect(component.open).to.be.false;
     component.open = true;
     component.focus();
-    // Move focus to the button.
+    // Move focus to the primary button.
     await sendKeys({ down: 'Shift' });
     await sendKeys({ press: 'Tab' });
     await sendKeys({ up: 'Shift' });
@@ -48,7 +48,7 @@ it('is focused when clicked', async () => {
     // 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.
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     button?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     expect(component.shadowRoot?.activeElement).to.equal(button);
 });

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

@@ -1,10 +1,10 @@
 import './dropdown.option.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+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 button when `focus()` is called', async () => {
+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"
@@ -17,9 +17,9 @@ it('focuses the button when `focus()` is called', async () => {
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.focus();
-    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="button"]'));
+    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="primary-button"]'));
 });
-it('focuses the button on submit when required and no options are selected', async () => {
+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"
@@ -40,10 +40,10 @@ it('focuses the button on submit when required and no options are selected', asy
         parentNode: form,
     });
     form.requestSubmit();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-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 () => {
+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"
@@ -62,10 +62,10 @@ it('focuses the button when `reportValidity` is called when required and no opti
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     component.reportValidity();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     expect(component.shadowRoot?.activeElement).to.equal(button);
 });
-it('does not focus the button when `checkValidity` is called', async () => {
+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"
@@ -116,6 +116,8 @@ it('focuses the second tag when the first one is removed', async () => {
     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 () => {
@@ -146,6 +148,8 @@ it('focuses the third tag when the second one is removed', async () => {
     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 last one removed', async () => {
@@ -176,5 +180,7 @@ it('focuses the second tag when the last one removed', async () => {
     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]);
 });

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

@@ -4,7 +4,7 @@ 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 () => {
+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"
@@ -12,7 +12,7 @@ it('focuses the button when `focus()` is called', async () => {
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.focus();
-    expect(component.shadowRoot?.activeElement).to.equal(component.shadowRoot?.querySelector('[data-test="button"]'));
+    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');
@@ -25,10 +25,10 @@ it('focuses the button on submit', async () => {
         parentNode: form,
     });
     form.requestSubmit();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-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 () => {
+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
@@ -37,10 +37,10 @@ it('focuses the button when `reportValidity` is called when required and no opti
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`, { parentNode: form });
     component.reportValidity();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     expect(component.shadowRoot?.activeElement).to.equal(button);
 });
-it('does not focus the button when `checkValidity` is called', async () => {
+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

package/dist/dropdown.test.form.js

@@ -50,3 +50,25 @@ it('does not submit its form on Enter when open', async () => {
     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.interactions.filterable.js

@@ -275,7 +275,7 @@ it('sets the first unfiltered option as active when the previously active option
     expect(option?.privateActive).to.be.true;
     expect(input?.getAttribute('aria-activedescendant')).to.equal(option?.id);
 });
-it('updates the `value` of its `<input>` when the `label` of a selected option is changed programmatically', async () => {
+it('updates the `value` of its `<input>` when `label` of a selected option is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -512,7 +512,7 @@ it('sets `aria-activedescendant` on open via click', async () => {
     // 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="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
     // Wait for it to open.
     await aTimeout(0);
@@ -597,7 +597,7 @@ it('sets `aria-activedescendant` when closed via click', async () => {
       ${defaultSlot}
     </glide-core-dropdown>`);
     component.shadowRoot
-        ?.querySelector('[data-test="button"]')
+        ?.querySelector('[data-test="primary-button"]')
         ?.click();
     await elementUpdated(component);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');