@lion/ui 0.1.1 → 0.1.3

package/components/form-integrations/test/form-group-methods.test.js

@@ -45,7 +45,7 @@ import '@lion/ui/define/lion-validation-feedback.js';
  */
 
 const fullyPrefilledSerializedValue = {
-  full_name: { first_name: 'Lorem', last_name: 'Ipsum' },
+  fullName: { firstName: 'Lorem', lastName: 'Ipsum' },
   date: '2000-12-12',
   datepicker: '2020-12-12',
   bio: 'Lorem',
@@ -69,7 +69,7 @@ const fullyPrefilledSerializedValue = {
 };
 
 const fullyChangedSerializedValue = {
-  full_name: { first_name: 'LoremChanged', last_name: 'IpsumChanged' },
+  fullName: { firstName: 'LoremChanged', lastName: 'IpsumChanged' },
   date: '1999-12-12',
   datepicker: '1986-12-12',
   bio: 'LoremChanged',
@@ -177,7 +177,7 @@ describe(`Submitting/Resetting/Clearing Form`, async () => {
     await elementUpdated(formEl);
     await formEl.updateComplete;
     expect(formEl.serializedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '',
       datepicker: '',
       bio: '',

package/components/form-integrations/test/form-integrations.test.js

@@ -29,7 +29,7 @@ describe('Form Integrations', () => {
     const formEl = el._lionFormNode;
 
     expect(formEl.serializedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '2000-12-12',
       datepicker: '2020-12-12',
       bio: '',
@@ -62,7 +62,7 @@ describe('Form Integrations', () => {
     await inputTelDropdownEl?.updateComplete;
 
     expect(formEl.formattedValue).to.eql({
-      full_name: { first_name: '', last_name: '' },
+      fullName: { firstName: '', lastName: '' },
       date: '12/12/2000',
       datepicker: '12/12/2020',
       bio: '',
@@ -91,7 +91,7 @@ describe('Form Integrations', () => {
         await fixture(
           html`<umbrella-form
             .serializedValue="${{
-              full_name: { first_name: '', last_name: '' },
+              fullName: { firstName: '', lastName: '' },
               date: '2000-12-12',
               datepicker: '2020-12-12',
               bio: '',

package/components/form-integrations/test/helpers/umbrella-form.js

@@ -50,14 +50,14 @@ export class UmbrellaForm extends LitElement {
     return html`
       <lion-form .serializedValue="${this.__serializedValue}">
         <form>
-          <lion-fieldset name="full_name">
+          <lion-fieldset name="fullName">
             <lion-input
-              name="first_name"
+              name="firstName"
               label="First Name"
               .validators="${[new Required()]}"
             ></lion-input>
             <lion-input
-              name="last_name"
+              name="lastName"
               label="Last Name"
               .validators="${[new Required()]}"
             ></lion-input>

package/components/localize/src/LocalizeManager.js

@@ -18,6 +18,7 @@ export class LocalizeManager {
     autoLoadOnLocaleChange = false,
     fallbackLocale = '',
     showKeyAsFallback = false,
+    allowOverridesForExistingNamespaces = false,
   } = {}) {
     /** @private */
     this.__delegationTarget = document.createDocumentFragment();
@@ -28,6 +29,9 @@ export class LocalizeManager {
     /** @protected */
     this._showKeyAsFallback = showKeyAsFallback;
 
+    /** @private */
+    this.__allowOverridesForExistingNamespaces = allowOverridesForExistingNamespaces;
+
     /**
      * @type {Object.<string, Object.<string, Object>>}
      * @private
@@ -199,17 +203,29 @@ export class LocalizeManager {
    * @param {string} locale
    * @param {string} namespace
    * @param {object} data
-   * @throws {Error} Namespace can be added only once, for a given locale
+   * @throws {Error} Namespace can be added only once, for a given locale unless allowOverridesForExistingNamespaces
+   * is set to `true`
    */
   addData(locale, namespace, data) {
-    if (this._isNamespaceInCache(locale, namespace)) {
+    if (
+      !this.__allowOverridesForExistingNamespaces &&
+      this._isNamespaceInCache(locale, namespace)
+    ) {
       throw new Error(
         `Namespace "${namespace}" has been already added for the locale "${locale}".`,
       );
     }
 
     this.__storage[locale] = this.__storage[locale] || {};
-    this.__storage[locale][namespace] = data;
+
+    if (this.__allowOverridesForExistingNamespaces) {
+      this.__storage[locale][namespace] = {
+        ...this.__storage[locale][namespace],
+        ...data,
+      };
+    } else {
+      this.__storage[locale][namespace] = data;
+    }
   }
 
   /**

package/components/localize/test/LocalizeManager.test.js

@@ -155,7 +155,7 @@ describe('LocalizeManager', () => {
       });
     });
 
-    it('prevents mutating existing data for the same locale & namespace', () => {
+    it('prevents mutating existing data for the same locale & namespace when "allowOverridesForExistingNamespaces" option is not given in constructor', () => {
       manager = new LocalizeManager();
       const { storage } = getProtectedMembers(manager);
 
@@ -169,6 +169,23 @@ describe('LocalizeManager', () => {
         'en-GB': { 'lion-hello': { greeting: 'Hi!' } },
       });
     });
+
+    it('allows mutating existing data for the same locale & namespace when "allowOverridesForExistingNamespaces" option is set to "true" in constructor', () => {
+      manager = new LocalizeManager({ allowOverridesForExistingNamespaces: true });
+      const { storage } = getProtectedMembers(manager);
+
+      manager.addData('en-GB', 'lion-hello', { greeting: 'Hi!' });
+
+      expect(storage).to.deep.equal({
+        'en-GB': { 'lion-hello': { greeting: 'Hi!' } },
+      });
+
+      manager.addData('en-GB', 'lion-hello', { greeting: 'Hi!', alternative: 'Hello!' });
+
+      expect(storage).to.deep.equal({
+        'en-GB': { 'lion-hello': { greeting: 'Hi!', alternative: 'Hello!' } },
+      });
+    });
   });
 
   describe('loading via dynamic imports', () => {

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

@@ -369,6 +369,11 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     if (this.hasNoDefaultSelected) {
       this._noDefaultSelectedInheritsWidth();
     }
+
+    // When `trapsKeyboardFocus:true` is configured in our overlay, we need to make sure
+    // that our element with [role=listbox] gets focus. The `containFocus` util will look
+    // for an element with [autofocus] (otherwise it sets focus to `contentNode` (the 'root' of the overlay))
+    this._listboxNode.setAttribute('autofocus', '');
   }
 
   /** @private */
@@ -382,6 +387,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   /** @private */
   __overlayOnHide() {
     this._invokerNode.focus();
+    this._listboxNode.removeAttribute('autofocus');
   }
 
   /**

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

@@ -424,6 +424,39 @@ describe('lion-select-rich', () => {
       expect(el.singleOption).to.be.false;
       expect(_invokerNode.singleOption).to.be.false;
     });
+
+    it('adds/removes the autofocus attribute to/from _listboxNode', async () => {
+      const el = await fixture(html` <lion-select-rich></lion-select-rich> `);
+      const { _listboxNode } = getSelectRichMembers(el);
+
+      expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
+
+      el.opened = true;
+      await el.updateComplete;
+      expect(_listboxNode.hasAttribute('autofocus')).to.be.true;
+
+      el.opened = false;
+      await el.updateComplete;
+      await el.updateComplete; // safari takes a little longer
+      expect(_listboxNode.hasAttribute('autofocus')).to.be.false;
+    });
+
+    it('adds focus to element with [role=listbox] when trapsKeyboardFocus is true', async () => {
+      const el = await fixture(
+        html` <lion-select-rich .config=${{ trapsKeyboardFocus: true }}></lion-select-rich> `,
+      );
+      const { _listboxNode } = getSelectRichMembers(el);
+      expect(document.activeElement).to.not.equal(_listboxNode);
+
+      el.opened = true;
+      await el.updateComplete;
+      expect(document.activeElement).to.equal(_listboxNode);
+
+      el.opened = false;
+      await el.updateComplete;
+      await el.updateComplete; // safari takes a little longer
+      expect(document.activeElement).to.not.equal(_listboxNode);
+    });
   });
 
   describe('interaction-mode', () => {