@crowdstrike/glide-core 0.12.2 → 0.13.0

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

@@ -25,11 +25,7 @@ let GlideCoreDropdownInAnotherComponent = class GlideCoreDropdownInAnotherCompon
       multiple
       open
     >
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
+      <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>`;
@@ -44,15 +40,8 @@ GlideCoreDropdownInAnotherComponent.shadowRootOptions.mode = 'open';
 GlideCoreTag.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {
     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-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></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
@@ -74,15 +63,8 @@ it('toggles open and closed when the button is clicked', async () => {
       open
       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-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></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
@@ -103,15 +85,8 @@ it('does not toggle open and closed when the button overflow text is clicked', a
       open
       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-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></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
@@ -133,15 +108,8 @@ it('selects options on click', async () => {
       open
       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-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]?.click();
@@ -160,15 +128,8 @@ it('selects options on Space', async () => {
       multiple
       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="One"></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);
@@ -192,15 +153,8 @@ it('selects options on Enter', async () => {
       multiple
       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="One"></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);
@@ -218,15 +172,8 @@ it('selects options on Enter', async () => {
 });
 it('activates Select All by default', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple select-all>
-      <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="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');
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
@@ -236,15 +183,8 @@ it('activates Select All by default', async () => {
 });
 it('deactivates all other options on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple select-all>
-      <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="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'),
@@ -281,14 +221,10 @@ it('remains open when an option is selected via Enter', async () => {
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.querySelector('glide-core-dropdown-option')?.focus();
     await sendKeys({ press: 'Enter' });
@@ -303,14 +239,10 @@ it('remains open when an option is selected via Space', async () => {
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
@@ -319,15 +251,9 @@ it('remains open when an option is selected via Space', async () => {
 });
 it('activates Select All on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown open multiple select-all>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="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>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -345,15 +271,13 @@ it('does not activate the next option on ArrowDown when a tag is focused', async
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     component.shadowRoot
         ?.querySelector('[data-test="tag"]')
@@ -575,29 +499,41 @@ it('updates `value` when the `value` of a selected option is emptied programmati
     option.value = '';
     expect(component.value).to.deep.equal(['two']);
 });
-it('has no internal label when an option is newly selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      open
-      multiple
-    >
+it('updates `value` a tag is removed', 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.shadowRoot
+        ?.querySelector('[data-test="tag"]')
+        ?.click();
+    expect(component.value).to.deep.equal(['two']);
+});
+it('has no internal label when an option is newly selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      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
         .querySelector('glide-core-dropdown-option:last-of-type')
         ?.click();
     await elementUpdated(component);
     const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
-    expect(label).to.not.exist;
+    expect(label?.checkVisibility()).to.not.be.ok;
 });
 it('hides tags to prevent overflow', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -606,25 +542,10 @@ it('hides tags to prevent overflow', async () => {
       multiple
       style="display: block; max-width: 20rem;"
     >
-      <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="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>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].selected = true;
@@ -645,25 +566,10 @@ it('has overflow text when its tags are overflowing', async () => {
       multiple
       style="display: block; max-width: 20rem;"
     >
-      <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="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>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].selected = true;
@@ -684,14 +590,10 @@ it('deselects the option when its tag is removed', async () => {
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.shadowRoot
         ?.querySelector('[data-test="tag"]')
@@ -703,13 +605,11 @@ it('deselects all but the last selected option when `multiple` is changed to `fa
     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>`);
@@ -725,15 +625,8 @@ it('selects all options when none are selected and Select All is selected via cl
       multiple
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -751,14 +644,10 @@ it('selects all options when some are selected and Select All is selected via cl
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -776,13 +665,11 @@ it('deselects all options when all are selected and Select All is selected via c
     >
       <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>`);
@@ -801,15 +688,8 @@ it('selects all options when none are selected and Select All is selected via Sp
       open
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -830,14 +710,10 @@ it('selects all options when some are selected and Select All is selected via Sp
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -858,13 +734,11 @@ it('deselects all options when all are selected and Select All is selected via S
     >
       <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>`);
@@ -885,15 +759,8 @@ it('selects all options when none are selected and Select All is selected via En
       open
       select-all
     >
-      <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="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -914,14 +781,10 @@ it('selects all options when some are selected and Select All is selected via En
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component?.shadowRoot
         ?.querySelector('[data-test="select-all"]')
@@ -942,13 +805,11 @@ it('deselects all options when all are selected and Select All is selected via E
     >
       <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>`);
@@ -970,14 +831,10 @@ it('shows Select All', async () => {
     >
       <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="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -993,15 +850,8 @@ it('sets Select All as selected when all options are selected', async () => {
       multiple
       select-all
     >
-      <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="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].click();
@@ -1016,15 +866,8 @@ it('sets Select All as deselected when no options are selected', async () => {
       multiple
       select-all
     >
-      <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="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].click();
@@ -1041,15 +884,8 @@ it('sets Select All as indeterminate when not all options are selected', async (
       multiple
       select-all
     >
-      <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="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].click();
@@ -1064,15 +900,8 @@ it('does not set Select All as indeterminate when no options are selected', asyn
       multiple
       select-all
     >
-      <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="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].click();
@@ -1087,15 +916,8 @@ it('does not set Select All as indeterminate when all options are selected', asy
       multiple
       select-all
     >
-      <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="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].click();
@@ -1107,14 +929,10 @@ it('closes when a tag is clicked', 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"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
     assert(tag);
@@ -1187,30 +1005,16 @@ it('cannot be tabbed to when `disabled`', async () => {
       disabled
       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-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     await sendKeys({ press: '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" 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-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     assert(button);