@lion/ui 0.1.1 → 0.1.2

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', () => {

package/custom-elements.json

@@ -4618,6 +4618,30 @@
             "name": "SlotHost",
             "module": "../../components/core/types/SlotMixinTypes.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "SlotsMap",
+          "declaration": {
+            "name": "SlotsMap",
+            "module": "../../components/core/types/SlotMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SlotFunctionResult",
+          "declaration": {
+            "name": "SlotFunctionResult",
+            "module": "../../components/core/types/SlotMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SlotRerenderObject",
+          "declaration": {
+            "name": "SlotRerenderObject",
+            "module": "../../components/core/types/SlotMixinTypes.js"
+          }
         }
       ]
     },
@@ -4626,6 +4650,22 @@
       "path": "exports/types/form-core.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ChoiceGroupHost",
+          "declaration": {
+            "name": "ChoiceGroupHost",
+            "module": "../../components/form-core/types/choice-group/ChoiceGroupMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ChoiceInputHost",
+          "declaration": {
+            "name": "ChoiceInputHost",
+            "module": "../../components/form-core/types/choice-group/ChoiceInputMixinTypes.js"
+          }
+        },
         {
           "kind": "js",
           "name": "FormControlHost",
@@ -4634,6 +4674,110 @@
             "module": "../../components/form-core/types/FormControlMixinTypes.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "HTMLElementWithValue",
+          "declaration": {
+            "name": "HTMLElementWithValue",
+            "module": "../../components/form-core/types/FormControlMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormGroupHost",
+          "declaration": {
+            "name": "FormGroupHost",
+            "module": "../../components/form-core/types/form-group/FormGroupMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormControl",
+          "declaration": {
+            "name": "FormControl",
+            "module": "../../components/form-core/types/form-group/FormGroupMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormatHost",
+          "declaration": {
+            "name": "FormatHost",
+            "module": "../../components/form-core/types/FormatMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormatOptions",
+          "declaration": {
+            "name": "FormatOptions",
+            "module": "../../components/form-core/types/FormatMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InteractionStateHost",
+          "declaration": {
+            "name": "InteractionStateHost",
+            "module": "../../components/form-core/types/InteractionStateMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InteractionStates",
+          "declaration": {
+            "name": "InteractionStates",
+            "module": "../../components/form-core/types/InteractionStateMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NativeTextFieldHost",
+          "declaration": {
+            "name": "NativeTextFieldHost",
+            "module": "../../components/form-core/types/NativeTextFieldMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormRegisteringHost",
+          "declaration": {
+            "name": "FormRegisteringHost",
+            "module": "../../components/form-core/types/registration/FormRegisteringMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormRegistrarHost",
+          "declaration": {
+            "name": "FormRegistrarHost",
+            "module": "../../components/form-core/types/registration/FormRegistrarMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ElementWithParentFormGroup",
+          "declaration": {
+            "name": "ElementWithParentFormGroup",
+            "module": "../../components/form-core/types/registration/FormRegistrarMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormRegistrarPortalHost",
+          "declaration": {
+            "name": "FormRegistrarPortalHost",
+            "module": "../../components/form-core/types/registration/FormRegistrarPortalMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SyncUpdatableHost",
+          "declaration": {
+            "name": "SyncUpdatableHost",
+            "module": "../../components/form-core/types/utils/SyncUpdatableMixinTypes.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ValidateHost",
@@ -4641,6 +4785,14 @@
             "name": "ValidateHost",
             "module": "../../components/form-core/types/validate/ValidateMixinTypes.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "ValidationType",
+          "declaration": {
+            "name": "ValidationType",
+            "module": "../../components/form-core/types/validate/ValidateMixinTypes.js"
+          }
         }
       ]
     },
@@ -4710,6 +4862,14 @@
             "name": "LocalizeMixinHost",
             "module": "../../components/localize/types/LocalizeMixinTypes.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "StringToFunctionMap",
+          "declaration": {
+            "name": "StringToFunctionMap",
+            "module": "../../components/localize/types/LocalizeMixinTypes.js"
+          }
         }
       ]
     },
@@ -4734,6 +4894,14 @@
             "module": "../../components/overlays/types/OverlayConfig.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ViewportPlacement",
+          "declaration": {
+            "name": "ViewportPlacement",
+            "module": "../../components/overlays/types/OverlayConfig.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DefineOverlayConfig",
@@ -27365,6 +27533,12 @@
               "privacy": "protected",
               "default": "showKeyAsFallback"
             },
+            {
+              "kind": "field",
+              "name": "__allowOverridesForExistingNamespaces",
+              "privacy": "private",
+              "default": "allowOverridesForExistingNamespaces"
+            },
             {
               "kind": "field",
               "name": "__storage",
@@ -34081,6 +34255,30 @@
             "name": "SlotHost",
             "module": "../../components/core/types/SlotMixinTypes.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "SlotsMap",
+          "declaration": {
+            "name": "SlotsMap",
+            "module": "../../components/core/types/SlotMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SlotFunctionResult",
+          "declaration": {
+            "name": "SlotFunctionResult",
+            "module": "../../components/core/types/SlotMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SlotRerenderObject",
+          "declaration": {
+            "name": "SlotRerenderObject",
+            "module": "../../components/core/types/SlotMixinTypes.js"
+          }
         }
       ]
     },
@@ -34089,6 +34287,22 @@
       "path": "dist-types/exports/types/form-core.d.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ChoiceGroupHost",
+          "declaration": {
+            "name": "ChoiceGroupHost",
+            "module": "../../components/form-core/types/choice-group/ChoiceGroupMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ChoiceInputHost",
+          "declaration": {
+            "name": "ChoiceInputHost",
+            "module": "../../components/form-core/types/choice-group/ChoiceInputMixinTypes.js"
+          }
+        },
         {
           "kind": "js",
           "name": "FormControlHost",
@@ -34097,6 +34311,110 @@
             "module": "../../components/form-core/types/FormControlMixinTypes.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "HTMLElementWithValue",
+          "declaration": {
+            "name": "HTMLElementWithValue",
+            "module": "../../components/form-core/types/FormControlMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormGroupHost",
+          "declaration": {
+            "name": "FormGroupHost",
+            "module": "../../components/form-core/types/form-group/FormGroupMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormControl",
+          "declaration": {
+            "name": "FormControl",
+            "module": "../../components/form-core/types/form-group/FormGroupMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormatHost",
+          "declaration": {
+            "name": "FormatHost",
+            "module": "../../components/form-core/types/FormatMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormatOptions",
+          "declaration": {
+            "name": "FormatOptions",
+            "module": "../../components/form-core/types/FormatMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InteractionStateHost",
+          "declaration": {
+            "name": "InteractionStateHost",
+            "module": "../../components/form-core/types/InteractionStateMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InteractionStates",
+          "declaration": {
+            "name": "InteractionStates",
+            "module": "../../components/form-core/types/InteractionStateMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NativeTextFieldHost",
+          "declaration": {
+            "name": "NativeTextFieldHost",
+            "module": "../../components/form-core/types/NativeTextFieldMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormRegisteringHost",
+          "declaration": {
+            "name": "FormRegisteringHost",
+            "module": "../../components/form-core/types/registration/FormRegisteringMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormRegistrarHost",
+          "declaration": {
+            "name": "FormRegistrarHost",
+            "module": "../../components/form-core/types/registration/FormRegistrarMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ElementWithParentFormGroup",
+          "declaration": {
+            "name": "ElementWithParentFormGroup",
+            "module": "../../components/form-core/types/registration/FormRegistrarMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormRegistrarPortalHost",
+          "declaration": {
+            "name": "FormRegistrarPortalHost",
+            "module": "../../components/form-core/types/registration/FormRegistrarPortalMixinTypes.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SyncUpdatableHost",
+          "declaration": {
+            "name": "SyncUpdatableHost",
+            "module": "../../components/form-core/types/utils/SyncUpdatableMixinTypes.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ValidateHost",
@@ -34104,6 +34422,14 @@
             "name": "ValidateHost",
             "module": "../../components/form-core/types/validate/ValidateMixinTypes.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "ValidationType",
+          "declaration": {
+            "name": "ValidationType",
+            "module": "../../components/form-core/types/validate/ValidateMixinTypes.js"
+          }
         }
       ]
     },
@@ -34173,6 +34499,14 @@
             "name": "LocalizeMixinHost",
             "module": "../../components/localize/types/LocalizeMixinTypes.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "StringToFunctionMap",
+          "declaration": {
+            "name": "StringToFunctionMap",
+            "module": "../../components/localize/types/LocalizeMixinTypes.js"
+          }
         }
       ]
     },
@@ -34197,6 +34531,14 @@
             "module": "../../components/overlays/types/OverlayConfig.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ViewportPlacement",
+          "declaration": {
+            "name": "ViewportPlacement",
+            "module": "../../components/overlays/types/OverlayConfig.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DefineOverlayConfig",
@@ -61607,6 +61949,11 @@
               },
               "privacy": "protected"
             },
+            {
+              "kind": "field",
+              "name": "__allowOverridesForExistingNamespaces",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "__storage",