@lion/ui 0.7.0 → 0.7.2

package/components/helpers/src/SbActionLogger.js

@@ -126,6 +126,7 @@ export class SbActionLogger extends LitElement {
 
   constructor() {
     super();
+    // eslint-disable-next-line wc/no-constructor-attributes
     this.title = 'Action Logger';
     this.simple = false;
     this.__logCounter = 0;

package/components/input-date/src/LionInputDate.js

@@ -21,7 +21,7 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
     /**
      * @param {string} value
      */
-    this.parser = value => (value === '' ? undefined : parseDate(value));
+    this.parser = value => (value === '' ? undefined : parseDate(value, this.formatOptions));
     this.formatter = formatDate;
     this.defaultValidators.push(new IsDate());
     // Just explicitly make clear we shouldn't use type 'date'

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

@@ -3,9 +3,10 @@ import { splitDate } from './utils/splitDate.js';
 
 /**
  * To compute the localized date format
+ * @param {string} [locale]
  * @returns {string}
  */
-export function getDateFormatBasedOnLocale() {
+export function getDateFormatBasedOnLocale(locale) {
   /**
    *
    * @param {ArrayLike.<string>} dateParts
@@ -35,9 +36,9 @@ export function getDateFormatBasedOnLocale() {
   date.setDate(20);
   date.setMonth(11);
   date.setFullYear(2012);
-
+  const options = locale ? { locale } : {};
   // Strange characters added by IE11 need to be taken into account here
-  const formattedDate = sanitizedDateTimeFormat(date);
+  const formattedDate = sanitizedDateTimeFormat(date, options);
 
   // For Dutch locale, dateParts would match: [ 1:'20', 2:'-', 3:'12', 4:'-', 5:'2012' ]
   const dateParts = splitDate(formattedDate);

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

@@ -2,6 +2,10 @@ import { getDateFormatBasedOnLocale } from './getDateFormatBasedOnLocale.js';
 import { getLocalizeManager } from '../getLocalizeManager.js';
 import { addLeadingZero } from './utils/addLeadingZero.js';
 
+/**
+ * @typedef {import('../../types/LocalizeMixinTypes.js').FormatDateOptions} FormatDateOptions
+ */
+
 /**
  * @param {function} fn
  */
@@ -26,15 +30,16 @@ const memoizedGetDateFormatBasedOnLocale = memoize(getDateFormatBasedOnLocale);
  * To parse a date into the right format
  *
  * @param {string} dateString
+ * @param {FormatDateOptions} [options] Intl options are available
  * @returns {Date | undefined}
  */
-export function parseDate(dateString) {
+export function parseDate(dateString, options) {
   const localizeManager = getLocalizeManager();
 
   const stringToParse = addLeadingZero(dateString);
   let parsedString;
 
-  switch (memoizedGetDateFormatBasedOnLocale(localizeManager.locale)) {
+  switch (memoizedGetDateFormatBasedOnLocale(options?.locale || localizeManager.locale)) {
     case 'day-month-year':
       parsedString = `${stringToParse.slice(6, 10)}/${stringToParse.slice(
         3,

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

@@ -5,9 +5,10 @@ import { clean } from './clean.js';
  * To sanitize a date from IE11 handling
  *
  * @param {Date} date
+ * @param {import('../../../types/LocalizeMixinTypes.js').FormatDateOptions} [options] Intl options are available
  * @returns {string}
  */
-export function sanitizedDateTimeFormat(date) {
-  const fDate = formatDate(date);
+export function sanitizedDateTimeFormat(date, options) {
+  const fDate = formatDate(date, options);
   return clean(fDate);
 }

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

@@ -7,15 +7,19 @@ import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
 
 describe('getDateFormatBasedOnLocale()', () => {
   const localizeManager = getLocalizeManager();
-
   beforeEach(() => {
     localizeTearDown();
   });
 
-  it('returns the positions of day, month and year', async () => {
+  it('returns the positions of day, month and year with locale set globally', async () => {
     localizeManager.locale = 'en-GB';
     expect(getDateFormatBasedOnLocale()).to.equal('day-month-year');
     localizeManager.locale = 'en-US';
     expect(getDateFormatBasedOnLocale()).to.equal('month-day-year');
   });
+
+  it('returns the positions of day, month and year with given locale', async () => {
+    expect(getDateFormatBasedOnLocale('en-GB')).to.equal('day-month-year');
+    expect(getDateFormatBasedOnLocale('en-US')).to.equal('month-day-year');
+  });
 });

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

@@ -51,13 +51,20 @@ describe('parseDate()', () => {
     expect(equalsDate(parseDate('14.12.1976 r.'), new Date('1976/12/14'))).to.equal(true);
   });
 
-  it('handles different locales', () => {
+  it('handles different locales globally set', () => {
     localizeManager.locale = 'en-GB';
     expect(equalsDate(parseDate('31-12-1976'), new Date('1976/12/31'))).to.equal(true);
     localizeManager.locale = 'en-US';
     expect(equalsDate(parseDate('12-31-1976'), new Date('1976/12/31'))).to.equal(true);
   });
 
+  it('handles different locales as option', () => {
+    const optionEnGb = { locale: 'en-GB' };
+    expect(equalsDate(parseDate('31-12-1976', optionEnGb), new Date('1976/12/31'))).to.equal(true);
+    const optionEnUs = { locale: 'en-US' };
+    expect(equalsDate(parseDate('12-31-1976', optionEnUs), new Date('1976/12/31'))).to.equal(true);
+  });
+
   it('handles timezones of the browser and parsed date correctly', () => {
     const referenceDate = new Date('2020/01/30');
     localizeManager.locale = 'nl-NL';

package/components/select-rich/src/LionSelectRich.js

@@ -485,6 +485,13 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       return;
     }
 
+    this._isHandlingUserInput = true;
+    setTimeout(() => {
+      // Since we can't control when subclasses are done handling keyboard input, we
+      // schedule a timeout to reset _isHandlingUserInput
+      this._isHandlingUserInput = false;
+    });
+
     const { key } = ev;
     switch (key) {
       case 'ArrowUp':
@@ -534,6 +541,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     switch (key) {
       case 'Tab':
         // Tab can only be caught in keydown
+        if (this._overlayCtrl.config.trapsKeyboardFocus === true) {
+          return;
+        }
         this.opened = false;
         break;
       case 'Escape':

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

@@ -106,9 +106,15 @@ describe('lion-select-rich interactions', () => {
         });
       }
 
+      let isTriggeredByUser;
       const el = /** @type {LionSelectRich} */ (
         await fixture(html`
-          <lion-select-rich interaction-mode="windows/linux">
+          <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>
@@ -125,10 +131,14 @@ describe('lion-select-rich interactions', () => {
       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' }));
       expect(el.checkedIndex).to.equal(0);
       expectOnlyGivenOneOptionToBeChecked(options, 0);
+      expect(isTriggeredByUser).to.be.true;
     });
 
     it('checkes a value with [character] keys while listbox unopened', async () => {

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

@@ -501,6 +501,18 @@ describe('lion-select-rich', () => {
       _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
       expect(el.opened).to.be.false;
     });
+
+    it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => {
+      const el = await fixture(
+        html`
+          <lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
+        `,
+      );
+      // tab can only be caught via keydown
+      const { _listboxNode } = getSelectRichMembers(el);
+      _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+      expect(el.opened).to.be.true;
+    });
   });
 
   describe('Mouse navigation', () => {