@lion/ui 0.1.0 → 0.1.2

package/components/localize/test/side-effect-free-entrypoint.test.js

@@ -0,0 +1,38 @@
+import { expect } from '@open-wc/testing';
+import sinon from 'sinon';
+// @ts-ignore
+import { singletonManager } from 'singleton-manager';
+
+/**
+ * @typedef {import('../types/LocalizeMixinTypes.js').LocalizeMixin} LocalizeMixinHost
+ */
+
+describe('Entrypoints localize', () => {
+  /** @type {import('sinon').SinonSpy} */
+  let singletonManagerSetSpy;
+  beforeEach(() => {
+    singletonManagerSetSpy = sinon.spy(singletonManager, 'set');
+  });
+  afterEach(() => {
+    singletonManagerSetSpy.restore();
+  });
+
+  it('"@lion/ui/localize-no-side-effects.js" has no side effects (c.q. does not register itself on singletonManager)', async () => {
+    await import('@lion/ui/localize-no-side-effects.js');
+
+    expect(singletonManagerSetSpy).to.not.have.been.called;
+  });
+
+  it('"@lion/ui/localize.js" has side effects (c.q. registers itself on singletonManager)', async () => {
+    await import('@lion/ui/localize.js');
+
+    expect(singletonManagerSetSpy).to.have.been.calledOnce;
+
+    const { getLocalizeManager } = await import('@lion/ui/localize-no-side-effects.js');
+
+    expect(singletonManagerSetSpy).to.have.been.calledWith(
+      '@lion/ui::localize::0.x',
+      getLocalizeManager(),
+    );
+  });
+});

package/components/localize/test-helpers/localizeTearDown.js

@@ -1,11 +1,12 @@
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 
 export const localizeTearDown = () => {
+  const localizeManager = getLocalizeManager();
   // makes sure that between tests the localization is reset to default state
   // @ts-ignore
-  localize._teardownHtmlLangAttributeObserver();
+  localizeManager._teardownHtmlLangAttributeObserver();
   document.documentElement.lang = 'en-GB';
   // @ts-ignore
-  localize._setupHtmlLangAttributeObserver();
-  localize.reset();
+  localizeManager._setupHtmlLangAttributeObserver();
+  localizeManager.reset();
 };

package/components/localize/types/LocalizeMixinTypes.ts

@@ -1,6 +1,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement } from 'lit';
 import { DirectiveResult } from 'lit/directive.js';
+import { LocalizeManager } from '../src/LocalizeManager.js';
 
 export interface FormatNumberPart {
   type: string;
@@ -76,7 +77,13 @@ export declare class LocalizeMixinHost {
   public onLocaleUpdated(): void;
   public connectedCallback(): void;
   public disconnectedCallback(): void;
-  public msgLit(keys: string | string[], variables?: msgVariables, options?: msgOptions): string | DirectiveResult;
+  public msgLit(
+    keys: string | string[],
+    variables?: msgVariables,
+    options?: msgOptions,
+  ): string | DirectiveResult;
+
+  protected _localizeManager: LocalizeManager;
 
   private __boundLocalizeOnLocaleChanged(...args: Object[]): void;
   private __boundLocalizeOnLocaleChanging(...args: Object[]): void;

package/components/pagination/src/LionPagination.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html, css } from 'lit';
-import { LocalizeMixin } from '@lion/ui/localize.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, nothing } from 'lit';
-import { localize, LocalizeMixin } from '@lion/ui/localize.js';
+import { getLocalizeManager, LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
@@ -195,10 +195,11 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   }
 
   _setDefaultLabel() {
+    const localizeManager = getLocalizeManager();
     if (this._ariaLabelledby) {
       this.removeAttribute('aria-label');
     } else if (!this._ariaLabel) {
-      this.setAttribute('aria-label', localize.msg('lion-progress-indicator:loading'));
+      this.setAttribute('aria-label', localizeManager.msg('lion-progress-indicator:loading'));
       this.__hasDefaultLabelSet = true;
     }
   }

package/components/select/src/LionSelect.js

@@ -60,6 +60,20 @@ export class LionSelect extends LionFieldWithSelect {
   connectedCallback() {
     super.connectedCallback();
     this._inputNode.addEventListener('change', this._proxyChangeEvent);
+
+    this.__selectObserver = new MutationObserver(() => {
+      this._syncValueUpwards();
+      // We need to force computation of other values in case model didn't change
+      // This can happen when options are loaded asynchronously so the modelValue doesn't change
+      // The MutationObserver detects this and makes sure the modelValue is updated
+      this._calculateValues({ source: 'model' });
+    });
+
+    this.__selectObserver.observe(this._inputNode, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
   }
 
   /** @param {import('lit').PropertyValues } changedProperties */
@@ -82,6 +96,7 @@ export class LionSelect extends LionFieldWithSelect {
   disconnectedCallback() {
     super.disconnectedCallback();
     this._inputNode.removeEventListener('change', this._proxyChangeEvent);
+    this.__selectObserver?.disconnect();
   }
 
   /**

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

@@ -44,6 +44,31 @@ describe('lion-select', () => {
     expect(lionSelect.formattedValue).to.equal('');
   });
 
+  it('updates the formattedValue correctly when the value for the selected option is updated', async () => {
+    const lionSelect = /** @type {LionSelect} */ (
+      await fixture(html`
+        <lion-select label="Foo item" .modelValue="${'nr2'}">
+          <select slot="input">
+            <option value="nr1">Item 1</option>
+            <option value="nr2"></option>
+            <option value="nr3"></option>
+          </select>
+        </lion-select>
+      `)
+    );
+    expect(lionSelect.serializedValue).to.equal('nr2');
+    expect(lionSelect.formattedValue).to.equal('');
+
+    const select = /** @type {HTMLSlotElement} */ (
+      lionSelect.shadowRoot?.querySelector('slot[name=input]')
+    ).assignedElements()[0];
+    const options = select.querySelectorAll('option');
+    options[1].textContent = 'Item 2';
+
+    await aTimeout;
+    expect(lionSelect.formattedValue).to.equal('Item 2');
+  });
+
   it('is accessible', async () => {
     const lionSelect = await fixture(html`
       <lion-select .modelValue="${'nr2'}">

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/components/validate-messages/src/loadDefaultFeedbackMessages.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { loadDefaultFeedbackMessagesNoSideEffects } from './loadDefaultFeedbackMessagesNoSideEffects.js';
 
 /**
@@ -7,5 +7,5 @@ import { loadDefaultFeedbackMessagesNoSideEffects } from './loadDefaultFeedbackM
  */
 
 export function loadDefaultFeedbackMessages() {
-  return loadDefaultFeedbackMessagesNoSideEffects({ localize });
+  return loadDefaultFeedbackMessagesNoSideEffects({ localize: getLocalizeManager() });
 }

package/components/validate-messages/test/loadDefaultFeedbackMessagesNoSideEffects.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars, no-param-reassign */
 import { expect } from '@open-wc/testing';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { Required } from '@lion/ui/form-core.js';
 import { loadDefaultFeedbackMessagesNoSideEffects } from '@lion/ui/validate-messages-no-side-effects.js';
 
@@ -20,6 +20,8 @@ function getProtectedMembers(validatorEl) {
 }
 
 describe('loadDefaultFeedbackMessagesNoSideEffects', () => {
+  const localizeManager = getLocalizeManager();
+
   it('will set default feedback message for Required', async () => {
     const el = new Required();
     const { getMessage } = getProtectedMembers(el);
@@ -27,18 +29,18 @@ describe('loadDefaultFeedbackMessagesNoSideEffects', () => {
       'Please configure an error message for "Required" by overriding "static async getMessage()"',
     );
 
-    loadDefaultFeedbackMessagesNoSideEffects({ localize });
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
     expect(await getMessage({ fieldName: 'password' })).to.equal('Please enter a(n) password.');
   });
 
   it('will await loading of translations when switching locale', async () => {
     const el = new Required();
     const { getMessage } = getProtectedMembers(el);
-    loadDefaultFeedbackMessagesNoSideEffects({ localize });
+    loadDefaultFeedbackMessagesNoSideEffects({ localize: localizeManager });
     expect(await getMessage({ fieldName: 'password' })).to.equal('Please enter a(n) password.');
     expect(await getMessage({ fieldName: 'user name' })).to.equal('Please enter a(n) user name.');
 
-    localize.locale = 'de-DE';
+    localizeManager.locale = 'de-DE';
     expect(await getMessage({ fieldName: 'Password' })).to.equal(
       'Password muss ausgefüllt werden.',
     );