@lion/ui 0.10.1 → 0.11.1

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

@@ -24,6 +24,24 @@ function mimicKeyPress(el, key, code = '') {
   el.dispatchEvent(new KeyboardEvent('keyup', { key, code }));
 }
 
+/**
+ * @param {LionOption[]} options
+ * @param {number} selectedIndex
+ */
+function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
+  /**
+   * @param {{ checked: any; }} option
+   * @param {any} i
+   */
+  options.forEach((option, i) => {
+    if (i === selectedIndex) {
+      expect(option.checked).to.be.true;
+    } else {
+      expect(option.checked).to.be.false;
+    }
+  });
+}
+
 describe('lion-select-rich interactions', () => {
   describe('Interaction mode', () => {
     it('autodetects interactionMode if not defined', async () => {
@@ -86,26 +104,91 @@ describe('lion-select-rich interactions', () => {
     });
   });
 
-  describe('Invoker Keyboard navigation Windows', () => {
-    it('navigates through list with [ArrowDown] [ArrowUp] keys checks the option while listbox unopened', async () => {
-      /**
-       * @param {LionOption[]} options
-       * @param {number} selectedIndex
-       */
-      function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
-        /**
-         * @param {{ checked: any; }} option
-         * @param {any} i
-         */
-        options.forEach((option, i) => {
-          if (i === selectedIndex) {
-            expect(option.checked).to.be.true;
-          } else {
-            expect(option.checked).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} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-options slot="input">
+              <lion-option .choiceValue=${10}>Item 1</lion-option>
+              <lion-option .choiceValue=${20}>Item 2</lion-option>
+              <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' }));
+
+      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' }));
+      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} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-options slot="input">
+              <lion-option .choiceValue=${10}>Item 1</lion-option>
+              <lion-option .choiceValue=${20}>Item 2</lion-option>
+              <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' }));
+
+      expect(el.opened).to.be.false;
+      expect(el.checkedIndex).to.equal(0);
+      expectOnlyGivenOneOptionToBeChecked(options, 0);
+
+      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} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-options slot="input">
+              <lion-option .choiceValue=${'red'}>Red</lion-option>
+              <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+              <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} */ (
         await fixture(html`
@@ -141,7 +224,43 @@ describe('lion-select-rich interactions', () => {
       expect(isTriggeredByUser).to.be.true;
     });
 
-    it('checkes a value with [character] keys while listbox unopened', async () => {
+    it('navigation through list with [ArrowLeft] [ArrowRight] keys checks the option while listbox unopened', async () => {
+      let isTriggeredByUser;
+      const el = /** @type {LionSelectRich} */ (
+        await fixture(html`
+          <lion-select-rich
+            interaction-mode="windows/linux"
+            @model-value-changed="${(/** @type {CustomEvent} */ event) => {
+              isTriggeredByUser = event.detail.isTriggeredByUser;
+            }}"
+          >
+            <lion-options slot="input">
+              <lion-option .choiceValue=${10}>Item 1</lion-option>
+              <lion-option .choiceValue=${20}>Item 2</lion-option>
+              <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' }));
+      expect(el.checkedIndex).to.equal(1);
+      expectOnlyGivenOneOptionToBeChecked(options, 1);
+      expect(isTriggeredByUser).to.be.true;
+
+      isTriggeredByUser = false;
+
+      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} */ (
         await fixture(html`
           <lion-select-rich interaction-mode="windows/linux">

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

@@ -342,7 +342,7 @@ describe('lion-select-rich', () => {
       expect(elSingleoption.opened).to.be.false;
     });
 
-    it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode', async () => {
+    it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode or has a single option', async () => {
       const elReadOnly = await fixture(html`
         <lion-select-rich readonly>
           <lion-option .choiceValue=${10}>Item 1</lion-option>
@@ -350,11 +350,23 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
 
+      const elSingleOption = await fixture(html`
+        <lion-select-rich>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+        </lion-select-rich>
+      `);
+
       elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
       expect(elReadOnly.opened).to.be.false;
 
       elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
       expect(elReadOnly.opened).to.be.false;
+
+      elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
+      expect(elSingleOption.opened).to.be.false;
+
+      elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
+      expect(elSingleOption.opened).to.be.false;
     });
 
     it('sets inheritsReferenceWidth to min by default', async () => {

package/components/validate-messages/translations/pl.js

@@ -10,8 +10,8 @@ export default {
       'Proszę podać prawidłową wartość {fieldName} (od {params.min} do {params.max} znaków).',
     Pattern: 'Wprowadź prawidłową wartość w polu {fieldName}.',
     IsNumber: 'Wprowadź prawidłową wartość w polu {fieldName}.',
-    MinNumber: 'Proszę podać wartość {fieldName} większą niż {params}.',
-    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż {params}.',
+    MinNumber: 'Proszę podać wartość {fieldName} większą niż lub równą {params}.',
+    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż lub równą {params}.',
     MinMaxNumber: 'Proszę podać wartość {fieldName} o długości od {params.min} do {params.max}.',
     IsDate: 'Wprowadź datę (DD MM RRRR).',
     MinDate: 'Proszę podać wartość {fieldName} przypadającą po {params, date, YYYYMMDD}.',
@@ -32,8 +32,8 @@ export default {
     MinMaxLength:
       'Proszę podać prawidłową wartość {fieldName} (od {params.min} do {params.max} znaków).',
     IsNumber: 'Wprowadź prawidłową wartość w polu {fieldName}.',
-    MinNumber: 'Proszę podać wartość {fieldName} większą niż {params}.',
-    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż {params}.',
+    MinNumber: 'Proszę podać wartość {fieldName} większą niż lub równą {params}.',
+    MaxNumber: 'Proszę podać wartość {fieldName} mniejszą niż lub równą {params}.',
     MinMaxNumber: 'Proszę podać wartość {fieldName} o długości od {params.min} do {params.max}.',
     IsDate: 'Wprowadź datę (DD MM RRRR).',
     MinDate: 'Proszę podać wartość {fieldName} przypadającą po {params, date, YYYYMMDD}.',