@lion/ui 0.12.0 → 0.13.1

package/components/overlays/src/configurations/withDropdownConfig.js

@@ -9,7 +9,6 @@ export const withDropdownConfig = () =>
     placementMode: 'local',
     inheritsReferenceWidth: 'min',
     hidesOnOutsideClick: true,
-    hidesOnOutsideEsc: true,
     hidesOnEsc: true,
     popperConfig: {
       placement: 'bottom-start',

package/components/overlays/src/configurations/withTooltipConfig.js

@@ -18,7 +18,6 @@ export const withTooltipConfig = ({
     placementMode: 'local',
     elementToFocusAfterHide: undefined,
     hidesOnEsc: true,
-    hidesOnOutsideEsc: true,
     handlesAccessibility: true,
     isTooltip: true,
     invokerRelation,

package/components/overlays/test/OverlayController.test.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-new */
 import { OverlayController, overlays } from '@lion/ui/overlays.js';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import {
   unsafeStatic,
@@ -28,12 +29,22 @@ const wrappingDialogNodeStyle = 'display: none; z-index: 9999; padding: 0px;';
 /**
  * A small wrapper function that closely mimics an escape press from a user
  * (prevents common mistakes like no bubbling or keydown)
- * @param {Element|Document} element
+ * @param {HTMLElement|Document} element
  */
 async function mimicEscapePress(element) {
-  element.dispatchEvent(
-    new KeyboardEvent('keyup', { key: 'Escape', bubbles: true, composed: true }),
-  );
+  // Make sure that the element inside the dialog is focusable (and cleanup after)
+  if (element instanceof HTMLElement) {
+    const { tabIndex: tabIndexBefore } = element;
+    // eslint-disable-next-line no-param-reassign
+    element.tabIndex = -1;
+    element.focus();
+    // eslint-disable-next-line no-param-reassign
+    element.tabIndex = tabIndexBefore; // make sure element is focusable
+  }
+
+  // Send the event
+  await sendKeys({ press: 'Escape' });
+  // Wait for at least a microtask, so that possible property effects are performed
   await aTimeout(0);
 }
 
@@ -726,6 +737,7 @@ describe('OverlayController', () => {
           )
         );
         const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
+
         await mimicEscapePress(childOverlay.contentNode);
 
         expect(parentOverlay.isShown).to.be.true;

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -1,5 +1,6 @@
 import {
   unsafeStatic,
+  fixtureSync,
   nextFrame,
   aTimeout,
   defineCE,
@@ -8,6 +9,7 @@ import {
   html,
 } from '@open-wc/testing';
 import { overlays as overlaysManager, OverlayController } from '@lion/ui/overlays.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { browserDetection } from '@lion/ui/core.js';
 import { cache } from 'lit/directives/cache.js';
 import '@lion/ui/define/lion-dialog.js';
@@ -30,6 +32,28 @@ function resetOverlaysManager() {
   overlaysManager.list.forEach(overlayCtrl => overlaysManager.remove(overlayCtrl));
 }
 
+/**
+ * A small wrapper function that closely mimics an escape press from a user
+ * (prevents common mistakes like no bubbling or keydown)
+ * @param {HTMLElement|Document} element
+ */
+async function mimicEscapePress(element) {
+  // Make sure that the element inside the dialog is focusable (and cleanup after)
+  if (element instanceof HTMLElement) {
+    const { tabIndex: tabIndexBefore } = element;
+    // eslint-disable-next-line no-param-reassign
+    element.tabIndex = -1;
+    element.focus();
+    // eslint-disable-next-line no-param-reassign
+    element.tabIndex = tabIndexBefore; // make sure element is focusable
+  }
+
+  // Send the event
+  await sendKeys({ press: 'Escape' });
+  // Wait for at least a microtask, so that possible property effects are performed
+  await aTimeout(0);
+}
+
 /**
  * @param {{tagString:string, tag: object, suffix?:string}} config
  */
@@ -315,6 +339,33 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(getComputedStyle(el._overlayCtrl.contentWrapperNode).display).not.to.equal('none');
     });
 
+    it('does not run setup when disconnected', async () => {
+      const el = /** @type {OverlayEl} */ (
+        fixtureSync(html`
+        <${tag}>
+          <div slot="content">content</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `)
+      );
+
+      const parentOfEl = /** @type {HTMLDivElement} */ (el.parentElement);
+
+      // @ts-expect-error [allow-protected-in-tests]
+      const setupSpy = sinon.spy(el, '_setupOverlayCtrl');
+      // In some client apps, this sync disconnect happens...
+      parentOfEl.removeChild(el);
+      await el.updateComplete;
+      expect(setupSpy.callCount).to.equal(0);
+
+      // Now add el again...
+      parentOfEl.appendChild(el);
+      await el.updateComplete;
+      expect(setupSpy.callCount).to.equal(1);
+
+      setupSpy.restore();
+    });
+
     /** Prevent unnecessary reset side effects, such as show animation. See: https://github.com/ing-bank/lion/issues/1075 */
     it('does not call updateConfig on equivalent config change', async () => {
       const el = /** @type {OverlayEl} */ (
@@ -339,6 +390,26 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       stub.restore();
     });
 
+    it('should not visually hide when hidesOnEsc / hidesOnOutsideEsc is not configured', async () => {
+      const el = /** @type {OverlayEl} */ (
+        await fixture(html`
+        <${tag} .config="${{ hidesOnEsc: false, hidesOnOutsideEsc: false }}" opened>
+          <div slot="content">content of the overlay</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `)
+      );
+
+      const dialogEl = /** @type {HTMLDialogElement} */ (el._overlayCtrl.__wrappingDialogNode);
+
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(dialogEl.checkVisibility()).to.be.true;
+      // @ts-expect-error [allow-protected-in-tests]
+      await mimicEscapePress(el._overlayContentNode);
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(dialogEl.checkVisibility()).to.be.true;
+    });
+
     describe('Teardown', () => {
       it('does not teardown when moving dom nodes', async () => {
         const el = /** @type {OverlayEl} */ (

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

@@ -5,6 +5,10 @@ import { getLocalizeManager, LocalizeMixin } from '@lion/ui/localize-no-side-eff
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
+
+/**
+ * @customElement lion-progress-indicator
+ */
 export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   static get properties() {
     return {

package/components/radio-group/src/LionRadioGroup.js

@@ -2,7 +2,9 @@ import { LitElement } from 'lit';
 import { ChoiceGroupMixin, FormGroupMixin } from '@lion/ui/form-core.js';
 
 /**
- * A wrapper around multiple radios.
+ * LionRadioGroup: A wrapper around multiple radios.
+ *
+ * @customElement lion-radio-group
  */
 export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
   connectedCallback() {

package/components/select/src/LionSelect.js

@@ -4,6 +4,10 @@ import { LionField } from '@lion/ui/form-core.js';
 /**
  * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
  */
+
+/**
+ * @customElement lion-field-with-select
+ */
 class LionFieldWithSelect extends LionField {
   /** @type {any} */
   static get properties() {

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

@@ -11,6 +11,8 @@ import { SlotMixin } from '@lion/ui/core.js';
 
 /**
  * LionSelectInvoker: invoker button consuming a selected element
+ *
+ * @customElement lion-select-invoker
  */
 export class LionSelectInvoker extends SlotMixin(LionButton) {
   static get styles() {

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

@@ -22,6 +22,8 @@ function detectInteractionMode() {
 
 /**
  * LionSelectRich: wraps the <lion-listbox> element
+ *
+ * @customElement lion-field-with-select
  */
 export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(LionListbox))) {
   static get scopedElements() {

package/components/steps/src/LionStep.js

@@ -8,7 +8,6 @@ import { css, html, LitElement } from 'lit';
  * `LionStep` is one of many in a LionSteps Controller
  *
  * @customElement lion-step
- * @extends {LitElement}
  */
 export class LionStep extends LitElement {
   static get properties() {

package/components/steps/src/LionSteps.js

@@ -8,7 +8,6 @@ import { css, html, LitElement } from 'lit';
  * `LionSteps` is a controller for a multi step system.
  *
  * @customElement lion-steps
- * @extends {LitElement}
  */
 export class LionSteps extends LitElement {
   static get styles() {

package/components/switch/src/LionSwitch.js

@@ -3,6 +3,9 @@ import { ChoiceInputMixin, LionField } from '@lion/ui/form-core.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionSwitchButton } from './LionSwitchButton.js';
 
+/**
+ * @customElement lion-switch
+ */
 export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
   static get styles() {
     return [

package/components/switch/src/LionSwitchButton.js

@@ -1,6 +1,11 @@
 import { html, css, LitElement } from 'lit';
 import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
 
+/**
+ * `LionSwitchButton` is a custom switch button component. It's a private component used within LionSwitch
+ *
+ * @customElement lion-switch-button
+ */
 export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
     return {

package/components/tabs/src/LionTabs.js

@@ -109,6 +109,14 @@ function handleButtonKeydown(ev) {
   }
 }
 
+/**
+ * LionTabs: A tabbed interface component
+ *
+ * @slot tab - The tab elements for the tabs
+ * @slot panel - The panel elements for the tabs
+ *
+ * @customElement lion-tabs
+ */
 export class LionTabs extends LitElement {
   static get properties() {
     return {