@lion/ui 0.11.1 → 0.11.3

package/README.md

@@ -37,14 +37,14 @@
   <a href="https://lion.js.org/blog/">Blog</a>
 </p>
 
-**Lion is a set of highly performant, accessible and flexible Web Components.!**
+**Lion is a set of highly performant, accessible, and flexible Web Components.**
 
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
 
 - **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
 - **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
 - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
-- **Modern Code:** Lion is distributes as pure es modules.
+- **Modern Code:** Lion is distributed as pure es modules.
 - **Exposes functions/classes and Web Components:** Ships a functionality in its most appropriate form.
 
 > Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.

package/components/combobox/src/LionCombobox.js

@@ -1134,7 +1134,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
         }
         break;
       case 'Enter':
-        if (this.multipleChoice && this.opened) {
+        if (this.opened) {
           ev.preventDefault();
         }
 
@@ -1145,8 +1145,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
             this.formElements[this.activeIndex].hasAttribute('aria-hidden') ||
             !this.opened)
         ) {
-          ev.preventDefault();
-
           this.modelValue = this.parser([...this.modelValue, this._inputNode.value]);
           this._inputNode.value = '';
           this.opened = false;

package/components/combobox/test/lion-combobox.test.js

@@ -1,4 +1,4 @@
-import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
+import { defineCE, expect, fixture, html, unsafeStatic, waitUntil } from '@open-wc/testing';
 import { Required, Unparseable } from '@lion/ui/form-core.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { LionCombobox } from '@lion/ui/combobox.js';
@@ -48,6 +48,80 @@ async function fruitFixture({ autocomplete, matchMode } = {}) {
 }
 
 describe('lion-combobox', () => {
+  describe('Rendering on API change', () => {
+    it('renders when options changed', async () => {
+      const entries = [
+        {
+          id: '1',
+          label: 'Apple',
+        },
+        {
+          id: '2',
+          label: 'Artichoke',
+        },
+        {
+          id: '3',
+          label: 'Asparagus',
+        },
+        {
+          id: '4',
+          label: 'Banana',
+        },
+        {
+          id: '5',
+          label: 'Pineapple',
+        },
+      ];
+
+      class Wrapper extends LitElement {
+        static properties = {
+          ...super.properties,
+          entries: { type: Array },
+        };
+
+        constructor() {
+          super();
+          this.entries = entries;
+        }
+
+        render() {
+          return html`<lion-combobox name="foo">
+            ${this.entries.map(
+              entry => html`<lion-option .choiceValue="${entry.id}">${entry.label}</lion-option>`,
+            )}
+          </lion-combobox>`;
+        }
+      }
+
+      const tagString = defineCE(Wrapper);
+      const tag = unsafeStatic(tagString);
+      const wrapperElement = /** @type {Wrapper} */ (await fixture(html`<${tag}></${tag}>`));
+      await waitUntil(
+        () =>
+          wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option')
+            .length === entries.length,
+      );
+
+      wrapperElement.entries = [
+        {
+          id: '4',
+          label: 'Banana',
+        },
+      ];
+
+      await waitUntil(
+        () =>
+          wrapperElement?.shadowRoot?.querySelector('lion-options')?.querySelectorAll('lion-option')
+            .length === wrapperElement.entries.length,
+      );
+
+      const optionElements = wrapperElement.shadowRoot?.querySelectorAll('lion-option');
+      expect(optionElements?.length).to.equal(wrapperElement.entries.length);
+      const optionElement = optionElements?.item(0);
+      expect(optionElement?.textContent).to.equal('Banana');
+    });
+  });
+
   describe('Options visibility', () => {
     it('hides options when text in input node is cleared after typing something by default', async () => {
       const el = /** @type {LionCombobox} */ (
@@ -911,6 +985,57 @@ describe('lion-combobox', () => {
       await el.updateComplete;
       expect(el.modelValue).to.eql(['Art']);
     });
+
+    it('submits form on [Enter] when listbox is closed', async () => {
+      const submitSpy = sinon.spy(e => e.preventDefault());
+      const el = /** @type {HTMLFormElement}  */ (
+        await fixture(html`
+          <form @submit=${submitSpy}>
+            <lion-combobox name="foo">
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+            <button type="submit">submit</button>
+          </form>
+        `)
+      );
+      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+      const { _inputNode } = getComboboxMembers(combobox);
+      await combobox.updateComplete;
+      _inputNode.focus();
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(submitSpy.callCount).to.equal(1);
+    });
+
+    it('does not submit form on [Enter] when listbox is opened', async () => {
+      const submitSpy = sinon.spy(e => e.preventDefault());
+      const el = /** @type {HTMLFormElement}  */ (
+        await fixture(html`
+          <form @submit=${submitSpy}>
+            <lion-combobox name="foo">
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+            <button type="submit">submit</button>
+          </form>
+        `)
+      );
+      const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]'));
+      const { _inputNode } = getComboboxMembers(combobox);
+      combobox.opened = true;
+      await combobox.updateComplete;
+      _inputNode.focus();
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(submitSpy.callCount).to.equal(0);
+    });
   });
 
   describe('Overlay visibility', () => {

package/components/localize/src/date/parseDate.js

@@ -1,6 +1,7 @@
 import { getDateFormatBasedOnLocale } from './getDateFormatBasedOnLocale.js';
 import { getLocalizeManager } from '../getLocalizeManager.js';
 import { addLeadingZero } from './utils/addLeadingZero.js';
+import { isCorrectYearFormat } from './utils/checkYearFormat.js';
 
 /**
  * @typedef {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} FormatDateOptions
@@ -63,12 +64,16 @@ export function parseDate(dateString, options) {
   }
 
   const [year, month, day] = parsedString.split('/').map(Number);
+  const [yearString] = parsedString.split('/');
+  if (!isCorrectYearFormat(yearString)) {
+    return undefined;
+  }
   let correctedYear = year;
   if (year < 50) {
     correctedYear = 2000 + year;
   }
 
-  const parsedDate = new Date(new Date(correctedYear, month - 1, day));
+  const parsedDate = new Date(correctedYear, month - 1, day);
   // Check if parsedDate is not `Invalid Date` or that the date has changed (e.g. the not existing 31.02.2020)
   if (
     year > 0 &&

package/components/localize/src/date/utils/checkYearFormat.js

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param {string} year
+ * @returns {boolean}
+ */
+export function isCorrectYearFormat(year) {
+  return /^\d{2}(\d{2})?$/g.test(year);
+}

package/components/localize/test/date/parseDate.test.js

@@ -91,4 +91,10 @@ describe('parseDate()', () => {
     expect(parseDate('02.31.2020')).to.equal(undefined); // non existing date
     expect(parseDate('31.12.2020')).to.equal(undefined); // day & month switched places
   });
+
+  it('returns undefined for incorrect year format', () => {
+    // TODO: we need a `> 0` check for day and month, but maybe consider `>= 0` for year?
+    expect(parseDate('12-12-0000')).to.equal(undefined);
+    expect(parseDate('12-12-999')).to.equal(undefined);
+  });
 });

package/custom-elements.json

@@ -145835,6 +145835,39 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/localize/src/date/utils/checkYearFormat.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "isCorrectYearFormat",
+          "parameters": [
+            {
+              "name": "year",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "isCorrectYearFormat",
+          "declaration": {
+            "name": "isCorrectYearFormat",
+            "module": "components/localize/src/date/utils/checkYearFormat.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "../../node_modules/lit/directives/until.js",

package/dist-types/components/combobox/src/LionCombobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionCombobox.d.ts","sourceRoot":"","sources":["../../../../components/combobox/src/LionCombobox.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"LionCombobox.d.ts","sourceRoot":"","sources":["../../../../components/combobox/src/LionCombobox.js"],"names":[],"mappings":"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"}

package/dist-types/components/localize/src/date/parseDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parseDate.d.ts","sourceRoot":"","sources":["../../../../../components/localize/src/date/parseDate.js"],"names":[],"mappings":"AA4BA;;;;;;GAMG;AACH,sCAJW,MAAM,wFAEJ,IAAI,GAAG,SAAS,CAiD5B;gCA7EY,OAAO,mCAAmC,EAAE,iBAAiB"}
+{"version":3,"file":"parseDate.d.ts","sourceRoot":"","sources":["../../../../../components/localize/src/date/parseDate.js"],"names":[],"mappings":"AA6BA;;;;;;GAMG;AACH,sCAJW,MAAM,wFAEJ,IAAI,GAAG,SAAS,CAqD5B;gCAjFY,OAAO,mCAAmC,EAAE,iBAAiB"}

package/dist-types/components/localize/src/date/utils/checkYearFormat.d.ts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param {string} year
+ * @returns {boolean}
+ */
+export function isCorrectYearFormat(year: string): boolean;
+//# sourceMappingURL=checkYearFormat.d.ts.map

package/dist-types/components/localize/src/date/utils/checkYearFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkYearFormat.d.ts","sourceRoot":"","sources":["../../../../../../components/localize/src/date/utils/checkYearFormat.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,0CAHW,MAAM,GACJ,OAAO,CAInB"}