@lion/ui 0.22.0 → 0.24.0

package/components/select-rich/test/lion-select-invoker.test.js

@@ -2,7 +2,6 @@ import { LionButton } from '@lion/ui/button.js';
 import { defineCE, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import { LionSelectInvoker } from '@lion/ui/select-rich.js';
-
 import '@lion/ui/define/lion-select-invoker.js';
 
 /**
@@ -14,16 +13,14 @@ describe('lion-select-invoker', () => {
     const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
     expect(el instanceof LionButton).to.be.true;
   });
-
   it('renders invoker info based on selectedElement child elements', async () => {
-    const el = /** @type {LionSelectInvoker} */ (
-      await fixture(html`<lion-select-invoker></lion-select-invoker>`)
-    );
-    el.selectedElement = /** @type {LionOption} */ (
-      await fixture(`<div class="option">Textnode<h2>I am</h2><p>2 lines</p></div>`)
-    );
+    const el =
+      /** @type {LionSelectInvoker} */
+      await fixture(html`<lion-select-invoker></lion-select-invoker>`);
+    el.selectedElement =
+      /** @type {LionOption} */
+      await fixture(`<div class="option">Textnode<h2>I am</h2><p>2 lines</p></div>`);
     await el.updateComplete;
-
     expect(el._contentWrapperNode).lightDom.to.equal(
       `
         Textnode
@@ -35,44 +32,36 @@ describe('lion-select-invoker', () => {
       },
     );
   });
-
   it('renders invoker info based on selectedElement textContent', async () => {
-    const el = /** @type {LionSelectInvoker} */ (
-      await fixture(html`<lion-select-invoker></lion-select-invoker>`)
-    );
-    el.selectedElement = /** @type {LionOption} */ (
-      await fixture(`<div class="option">just textContent</div>`)
-    );
+    const el =
+      /** @type {LionSelectInvoker} */
+      await fixture(html`<lion-select-invoker></lion-select-invoker>`);
+    el.selectedElement =
+      /** @type {LionOption} */
+      await fixture(`<div class="option">just textContent</div>`);
     await el.updateComplete;
-
     expect(el._contentWrapperNode).lightDom.to.equal('just textContent');
   });
-
   it('has tabindex="0"', async () => {
-    const el = /** @type {LionSelectInvoker} */ (
-      await fixture(html`<lion-select-invoker></lion-select-invoker>`)
-    );
+    const el =
+      /** @type {LionSelectInvoker} */
+      await fixture(html`<lion-select-invoker></lion-select-invoker>`);
     expect(el.tabIndex).to.equal(0);
     expect(el.getAttribute('tabindex')).to.equal('0');
   });
-
   it('should not render after slot when singleOption is true', async () => {
-    const el = /** @type {LionSelectInvoker} */ (
-      await fixture(html` <lion-select-invoker .singleOption="${true}"></lion-select-invoker> `)
-    );
-
-    expect(/** @type {ShadowRoot} */ (el.shadowRoot).querySelector('slot[name="after"]')).to.not
+    const el =
+      /** @type {LionSelectInvoker} */
+      await fixture(html` <lion-select-invoker .singleOption="${true}"></lion-select-invoker> `);
+    expect(/** @type {ShadowRoot} */ el.shadowRoot.querySelector('slot[name="after"]')).to.not
       .exist;
   });
-
   it('should render after slot when singleOption is not true', async () => {
-    const el = /** @type {LionSelectInvoker} */ (
-      await fixture(html`<lion-select-invoker></lion-select-invoker>`)
-    );
-
-    expect(/** @type {ShadowRoot} */ (el.shadowRoot).querySelector('slot[name="after"]')).to.exist;
+    const el =
+      /** @type {LionSelectInvoker} */
+      await fixture(html`<lion-select-invoker></lion-select-invoker>`);
+    expect(/** @type {ShadowRoot} */ el.shadowRoot.querySelector('slot[name="after"]')).to.exist;
   });
-
   describe('Subclassers', () => {
     it('supports a custom _contentTemplate', async () => {
       const myTag = defineCE(
@@ -85,17 +74,11 @@ describe('lion-select-invoker', () => {
           }
         },
       );
-      const el = /** @type {LionSelectInvoker} */ (await fixture(`<${myTag}></${myTag}>`));
-
-      el.selectedElement = /** @type {LionOption} */ (
-        await fixture(`<div class="option">cat</div>`)
-      );
+      const el = /** @type {LionSelectInvoker} */ await fixture(`<${myTag}></${myTag}>`);
+      el.selectedElement = /** @type {LionOption} */ await fixture(`<div class="option">cat</div>`);
       await el.updateComplete;
       expect(el._contentWrapperNode).lightDom.to.equal('cat selected');
-
-      el.selectedElement = /** @type {LionOption} */ (
-        await fixture(`<div class="option">dog</div>`)
-      );
+      el.selectedElement = /** @type {LionOption} */ await fixture(`<div class="option">dog</div>`);
       await el.updateComplete;
       expect(el._contentWrapperNode).lightDom.to.equal('no valid selection');
     });

package/components/select-rich/test/lion-select-listbox-suite-integration.test.js

@@ -1,7 +1,7 @@
 import { runListboxMixinSuite } from '@lion/ui/listbox-test-suites.js';
-
 import '@lion/ui/define/lion-select-rich.js';
-
 describe('<lion-select-rich> integration with ListboxMixin', () => {
-  runListboxMixinSuite({ tagString: 'lion-select-rich' });
+  runListboxMixinSuite({
+    tagString: 'lion-select-rich',
+  });
 });

package/components/select-rich/test/lion-select-rich-dialog-integration.test.js

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 import { OverlayMixin } from '@lion/ui/overlays.js';
 import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
-
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-select-rich.js';
 
@@ -22,13 +21,12 @@ const tagString = defineCE(
   },
 );
 const tag = unsafeStatic(tagString);
-
 describe('Select Rich Integration tests', () => {
   it('works inside a dialog', async () => {
     let properlyInstantiated = false;
-
     try {
-      const nestedEl = /** @type {LionSelectRich} */ (
+      const nestedEl =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich>
             <lion-options slot="input">
@@ -36,10 +34,8 @@ describe('Select Rich Integration tests', () => {
               <lion-option .choiceValue=${20}>Item 2</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
       await nestedEl.registrationComplete;
-
       await fixture(html`
         <${tag} id="main">
           <div slot="content" id="mainContent">
@@ -51,9 +47,8 @@ describe('Select Rich Integration tests', () => {
       `);
       properlyInstantiated = true;
     } catch (e) {
-      throw new Error(/** @type {Error} */ (e).message);
+      throw new Error(/** @type {Error} */ e.message);
     }
-
     expect(properlyInstantiated).to.be.true;
   });
 });

package/components/select-rich/test/lion-select-rich-interaction.test.js

@@ -2,9 +2,8 @@ import { expect, triggerBlurFor, triggerFocusFor, fixture } from '@open-wc/testi
 import { Required } from '@lion/ui/form-core.js';
 import { html } from 'lit/static-html.js';
 import { browserDetection } from '@lion/ui/core.js';
-
+import sinon from 'sinon';
 import '@lion/ui/define/lion-option.js';
-
 import '@lion/ui/define/lion-listbox.js';
 import '@lion/ui/define/lion-select-rich.js';
 import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
@@ -20,8 +19,18 @@ import { getSelectRichMembers } from '@lion/ui/select-rich-test-helpers.js';
  * @param {string} code
  */
 function mimicKeyPress(el, key, code = '') {
-  el.dispatchEvent(new KeyboardEvent('keydown', { key, code }));
-  el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
+  el.dispatchEvent(
+    new KeyboardEvent('keydown', {
+      key,
+      code,
+    }),
+  );
+  el.dispatchEvent(
+    new KeyboardEvent('keyup', {
+      key,
+      code,
+    }),
+  );
 }
 
 /**
@@ -41,72 +50,110 @@ function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
     }
   });
 }
-
 describe('lion-select-rich interactions', () => {
+  describe('Scrolling active options', () => {
+    afterEach(() => {
+      sinon.restore();
+    });
+    it('does not scroll while typing a selection from the closed invoker', async () => {
+      const el =
+        /** @type {LionSelectRich} */
+        await fixture(html`
+          <lion-select-rich interaction-mode="windows/linux">
+            <lion-option .choiceValue=${'red'}>Red</lion-option>
+            <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+          </lion-select-rich>
+        `);
+      const scrollSpy = sinon.spy(Element.prototype, 'scrollIntoView');
+      mimicKeyPress(el, 't', 'KeyT');
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+      expect(el.checkedIndex).to.equal(1);
+      expect(scrollSpy.callCount).to.equal(0);
+    });
+    it('scrolls the selected option on opening and the active option on keyboard navigation', async () => {
+      const el =
+        /** @type {LionSelectRich} */
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-option .choiceValue=${10}>Item 1</lion-option>
+            <lion-option .choiceValue=${20} checked>Item 2</lion-option>
+            <lion-option .choiceValue=${30}>Item 3</lion-option>
+          </lion-select-rich>
+        `);
+      const { _overlayCtrl, _listboxNode } = getSelectRichMembers(el);
+      const scrollSpy = sinon.spy(Element.prototype, 'scrollIntoView');
+      await _overlayCtrl.show();
+      await el.updateComplete;
+      expect(el.opened).to.be.true;
+      expect(scrollSpy.calledOn(el.formElements[1])).to.be.true;
+      scrollSpy.resetHistory();
+      mimicKeyPress(_listboxNode, 'ArrowDown');
+      await el.updateComplete;
+      expect(el.activeIndex).to.equal(2);
+      expect(scrollSpy.calledOn(el.formElements[2])).to.be.true;
+    });
+  });
   describe('Interaction mode', () => {
     it('autodetects interactionMode if not defined', async () => {
       const originalIsMac = browserDetection.isMac;
-
       browserDetection.isMac = true;
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich><lion-option .choiceValue=${10}>Item 1</lion-option></lion-select-rich>
-        `)
-      );
+        `);
       expect(el.interactionMode).to.equal('mac');
-      const el2 = /** @type {LionSelectRich} */ (
+      const el2 =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="windows/linux"
             ><lion-option .choiceValue=${10}>Item 1</lion-option></lion-select-rich
           >
-        `)
-      );
+        `);
       expect(el2.interactionMode).to.equal('windows/linux');
-
       browserDetection.isMac = false;
-      const el3 = /** @type {LionSelectRich} */ (
+      const el3 =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich><lion-option .choiceValue=${10}>Item 1</lion-option></lion-select-rich>
-        `)
-      );
+        `);
       expect(el3.interactionMode).to.equal('windows/linux');
-      const el4 = /** @type {LionSelectRich} */ (
+      const el4 =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="mac"
             ><lion-option .choiceValue=${10}>Item 1</lion-option></lion-select-rich
           >
-        `)
-      );
+        `);
       expect(el4.interactionMode).to.equal('mac');
       browserDetection.isMac = originalIsMac;
     });
-
     it('derives selectionFollowsFocus and navigateWithinInvoker from interactionMode', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="windows/linux"
             ><lion-option .choiceValue=${10}>Item 1</lion-option></lion-select-rich
           >
-        `)
-      );
+        `);
       expect(el.selectionFollowsFocus).to.be.true;
       expect(el.navigateWithinInvoker).to.be.true;
-
-      const el2 = /** @type {LionSelectRich} */ (
+      const el2 =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="mac"
             ><lion-option .choiceValue=${10}>Item 1</lion-option></lion-select-rich
           >
-        `)
-      );
+        `);
       expect(el2.selectionFollowsFocus).to.be.false;
       expect(el2.navigateWithinInvoker).to.be.false;
     });
   });
-
   describe('Invoker Keyboard navigation Mac', () => {
     it('opens dropdown with [ArrowDown] [ArrowUp] keys or navigates through the listbox options', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="mac">
             <lion-options slot="input">
@@ -115,29 +162,31 @@ describe('lion-select-rich interactions', () => {
               <lion-option .choiceValue=${30}>Item 3</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
-
+        `);
       const options = el.formElements;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
-
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowDown',
+        }),
+      );
       expect(el.opened).to.be.true;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
-
       el.opened = false;
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowUp',
+        }),
+      );
       expect(el.opened).to.be.true;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
     });
-
     it('does not open dropdown with [ArrowLeft] [ArrowRight] keys or navigates through the listbox options', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="mac">
             <lion-options slot="input">
@@ -146,27 +195,30 @@ describe('lion-select-rich interactions', () => {
               <lion-option .choiceValue=${30}>Item 3</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
-
+        `);
       const options = el.formElements;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
-
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowLeft',
+        }),
+      );
       expect(el.opened).to.be.false;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowRight',
+        }),
+      );
       expect(el.opened).to.be.false;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
     });
-
     it('checks a value with [character] keys while listbox unopened', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="mac">
             <lion-options slot="input">
@@ -175,22 +227,20 @@ describe('lion-select-rich interactions', () => {
               <lion-option .choiceValue=${'turquoise'}>Turquoise</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
 
       // @ts-ignore [allow-private] in test
       mimicKeyPress(el, 't', 'KeyT');
       expect(el.checkedIndex).to.equal(1);
-
       mimicKeyPress(el, 'u', 'KeyU');
       expect(el.checkedIndex).to.equal(2);
     });
   });
-
   describe('Invoker Keyboard navigation Windows/Linux', () => {
     it('navigation through list with [ArrowDown] [ArrowUp] keys checks the option while listbox unopened', async () => {
       let isTriggeredByUser;
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich
             interaction-mode="windows/linux"
@@ -204,29 +254,32 @@ describe('lion-select-rich interactions', () => {
               <lion-option .choiceValue=${30}>Item 3</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
-
+        `);
       const options = el.formElements;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowDown',
+        }),
+      );
       expect(el.checkedIndex).to.equal(1);
       expectOnlyGivenOneOptionToBeChecked(options, 1);
       expect(isTriggeredByUser).to.be.true;
-
       isTriggeredByUser = false;
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowUp',
+        }),
+      );
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
       expect(isTriggeredByUser).to.be.true;
     });
-
     it('navigation through list with [ArrowLeft] [ArrowRight] keys checks the option while listbox unopened', async () => {
       let isTriggeredByUser;
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich
             interaction-mode="windows/linux"
@@ -240,28 +293,31 @@ describe('lion-select-rich interactions', () => {
               <lion-option .choiceValue=${30}>Item 3</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
-
+        `);
       const options = el.formElements;
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowRight',
+        }),
+      );
       expect(el.checkedIndex).to.equal(1);
       expectOnlyGivenOneOptionToBeChecked(options, 1);
       expect(isTriggeredByUser).to.be.true;
-
       isTriggeredByUser = false;
-
-      el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }));
+      el.dispatchEvent(
+        new KeyboardEvent('keyup', {
+          key: 'ArrowLeft',
+        }),
+      );
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
       expect(isTriggeredByUser).to.be.true;
     });
-
     it('checks a value with [character] keys while listbox unopened', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich interaction-mode="windows/linux">
             <lion-options slot="input">
@@ -270,53 +326,48 @@ describe('lion-select-rich interactions', () => {
               <lion-option .choiceValue=${'turquoise'}>Turquoise</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
 
       // @ts-ignore [allow-private] in test
       mimicKeyPress(el, 't', 'KeyT');
       expect(el.checkedIndex).to.equal(1);
-
       mimicKeyPress(el, 'u', 'KeyU');
       expect(el.checkedIndex).to.equal(2);
     });
   });
-
   describe('Disabled', () => {
     it('invoker cannot be focused if disabled', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich disabled>
             <lion-options slot="input"></lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
       const { _invokerNode } = getSelectRichMembers(el);
       expect(_invokerNode.tabIndex).to.equal(-1);
     });
-
     it('cannot be opened via click if disabled', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich disabled>
             <lion-options slot="input"></lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
       const { _invokerNode, _overlayCtrl } = getSelectRichMembers(el);
       _invokerNode.click();
       await _overlayCtrl._showComplete;
       expect(el.opened).to.be.false;
     });
-
     it('reflects disabled attribute to invoker', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich disabled>
             <lion-options slot="input"></lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
       const { _invokerNode } = getSelectRichMembers(el);
       expect(_invokerNode.hasAttribute('disabled')).to.be.true;
       el.removeAttribute('disabled');
@@ -324,10 +375,10 @@ describe('lion-select-rich interactions', () => {
       expect(_invokerNode.hasAttribute('disabled')).to.be.false;
     });
   });
-
   describe('Interaction states', () => {
     it('becomes touched if blurred once', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich>
             <lion-options slot="input">
@@ -335,8 +386,7 @@ describe('lion-select-rich interactions', () => {
               <lion-option .choiceValue=${20}>Item 2</lion-option>
             </lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
       const { _invokerNode } = getSelectRichMembers(el);
       expect(el.touched).to.be.false;
       await triggerFocusFor(_invokerNode);
@@ -344,30 +394,33 @@ describe('lion-select-rich interactions', () => {
       expect(el.touched).to.be.true;
     });
   });
-
   describe('Accessibility', () => {
     it('sets [aria-invalid="true"] to "._invokerNode" when there is an error', async () => {
-      const el = /** @type {LionSelectRich} */ (
+      const el =
+        /** @type {LionSelectRich} */
         await fixture(html`
           <lion-select-rich .validators=${[new Required()]}>
             <lion-options slot="input">
               <lion-option .choiceValue=${null}>Please select a value</lion-option>
-              <lion-option .modelValue=${{ value: 10, checked: true }}>Item 1</lion-option>
+              <lion-option
+                .modelValue=${{
+                  value: 10,
+                  checked: true,
+                }}
+                >Item 1</lion-option
+              >
             </lion-options>
           </lion-select-rich>
-        `)
-      );
+        `);
       const { _invokerNode } = getSelectRichMembers(el);
       const options = el.formElements;
       await el.feedbackComplete;
       await el.updateComplete;
       expect(_invokerNode.getAttribute('aria-invalid')).to.equal('false');
-
       options[0].checked = true;
       await el.feedbackComplete;
       await el.updateComplete;
       expect(_invokerNode.getAttribute('aria-invalid')).to.equal('true');
-
       options[1].checked = true;
       await el.feedbackComplete;
       await el.updateComplete;