diff --git a/.changeset/sour-bottles-bake.md b/.changeset/sour-bottles-bake.md
new file mode 100644
index 000000000..203c118a2
--- /dev/null
+++ b/.changeset/sour-bottles-bake.md
@@ -0,0 +1,6 @@
+---
+'@lion/button': patch
+'@lion/combobox': patch
+---
+
+Types button and combobox
diff --git a/packages/button/docs/assets/icon.svg.js b/packages/button/docs/assets/icon.svg.js
index 769a42f2d..fa20ca7d3 100644
--- a/packages/button/docs/assets/icon.svg.js
+++ b/packages/button/docs/assets/icon.svg.js
@@ -1,2 +1,5 @@
+/**
+ * @param {Function} tag
+ */
export default tag =>
tag``;
diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index 87188dbdc..79d2ae0c9 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -6,12 +6,20 @@ import {
LitElement,
SlotMixin,
} from '@lion/core';
+import '@lion/core/src/differentKeyEventNamesShimIE.js';
-const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) =>
- e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */
-const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) =>
- // @ts-expect-error
- e.keyCode === 32 || e.key === 32; /* space */
+// TODO: several improvements:
+// [1] remove click-area
+// [2] remove the native _button slot. We can detect and submit parent form without the slot.
+// [3] reduce css so that extending styles makes sense. Merge .btn with host
+// [4] reduce the template and remove the if else construction inside the template (an extra
+// div by default to support IE is fine) =>
+// should be all needed
+// [5] do we need the before and after templates? Could be added by subclasser
+// [6] extract all functionality (except for form submission) into LionButtonMixin
+
+const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter';
+const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ';
export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) {
static get properties() {
@@ -145,6 +153,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
return this._nativeButtonNode.form;
}
+ // @ts-ignore
get slots() {
return {
...super.slots,
@@ -165,8 +174,8 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
this.active = false;
this.__setupDelegationInConstructor();
+ this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
if (browserDetection.isIE11) {
- this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
this.updateComplete.then(() => this.setAttribute('aria-labelledby', this._buttonId));
}
}
diff --git a/packages/button/test/demos.screenshots-test.js b/packages/button/test/demos.screenshots-test.js
index a903eca51..fa484b996 100644
--- a/packages/button/test/demos.screenshots-test.js
+++ b/packages/button/test/demos.screenshots-test.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
/* globals capture getStoryPage */
const selector = 'lion-button';
diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js
index 5c144b8bc..b05b9029c 100644
--- a/packages/button/test/lion-button.test.js
+++ b/packages/button/test/lion-button.test.js
@@ -1,22 +1,13 @@
import { browserDetection } from '@lion/core';
import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
import sinon from 'sinon';
+import '@lion/core/src/differentKeyEventNamesShimIE.js';
import '../lion-button.js';
/**
* @typedef {import('@lion/button/src/LionButton').LionButton} LionButton
*/
-/**
- * @param {HTMLElement} el
- */
-function getClickArea(el) {
- if (el.shadowRoot) {
- return el.shadowRoot.querySelector('.click-area');
- }
- return undefined;
-}
-
describe('lion-button', () => {
it('behaves like native `button` in terms of a11y', async () => {
const el = /** @type {LionButton} */ (await fixture(`foo`));
@@ -103,12 +94,12 @@ describe('lion-button', () => {
it('updates "active" attribute on host when space keydown/keyup on button', async () => {
const el = /** @type {LionButton} */ (await fixture(`foo`));
- el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 }));
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
expect(el.active).to.be.true;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.true;
- el.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 }));
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
expect(el.active).to.be.false;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.false;
@@ -117,12 +108,12 @@ describe('lion-button', () => {
it('updates "active" attribute on host when space keydown on button and space keyup anywhere else', async () => {
const el = /** @type {LionButton} */ (await fixture(`foo`));
- el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 }));
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
expect(el.active).to.be.true;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.true;
- el.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 }));
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
expect(el.active).to.be.false;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.false;
@@ -131,12 +122,12 @@ describe('lion-button', () => {
it('updates "active" attribute on host when enter keydown/keyup on button', async () => {
const el = /** @type {LionButton} */ (await fixture(`foo`));
- el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 }));
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
expect(el.active).to.be.true;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.true;
- el.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 }));
+ el.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
expect(el.active).to.be.false;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.false;
@@ -145,12 +136,12 @@ describe('lion-button', () => {
it('updates "active" attribute on host when enter keydown on button and space keyup anywhere else', async () => {
const el = /** @type {LionButton} */ (await fixture(`foo`));
- el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 }));
+ el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
expect(el.active).to.be.true;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.true;
- document.body.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 }));
+ document.body.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
expect(el.active).to.be.false;
await el.updateComplete;
expect(el.hasAttribute('active')).to.be.false;
@@ -213,8 +204,8 @@ describe('lion-button', () => {
const el = /** @type {LionButton} */ (await fixture(`foo`));
expect(el.hasAttribute('aria-labelledby')).to.be.true;
const wrapperId = el.getAttribute('aria-labelledby');
- expect(el.shadowRoot.querySelector(`#${wrapperId}`)).to.exist;
- expect(el.shadowRoot.querySelector(`#${wrapperId}`)).dom.to.equal(
+ expect(/** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`#${wrapperId}`)).to.exist;
+ expect(/** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`#${wrapperId}`)).dom.to.equal(
`
`,
);
browserDetectionStub.restore();
@@ -248,11 +239,11 @@ describe('lion-button', () => {
foo
`);
-
- const button = form.querySelector('lion-button');
- getClickArea(button).click();
-
- expect(formSubmitSpy.callCount).to.equal(1);
+ const button = /** @type {LionButton} */ (
+ /** @type {LionButton} */ (form.querySelector('lion-button'))
+ );
+ button.click();
+ expect(formSubmitSpy).to.have.been.calledOnce;
});
it('behaves like native `button` when interacted with keyboard space', async () => {
@@ -262,13 +253,13 @@ describe('lion-button', () => {
foo
`);
-
- form
- .querySelector('lion-button')
- .dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 }));
- await aTimeout();
- await aTimeout();
- expect(formSubmitSpy.callCount).to.equal(1);
+ const button = /** @type {LionButton} */ (
+ /** @type {LionButton} */ (form.querySelector('lion-button'))
+ );
+ button.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
+ await aTimeout(0);
+ await aTimeout(0);
+ expect(formSubmitSpy).to.have.been.calledOnce;
});
it('behaves like native `button` when interacted with keyboard enter', async () => {
@@ -279,13 +270,12 @@ describe('lion-button', () => {
`);
- form
- .querySelector('lion-button')
- .dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 }));
- await aTimeout();
- await aTimeout();
+ const button = /** @type {LionButton} */ (form.querySelector('lion-button'));
+ button.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+ await aTimeout(0);
+ await aTimeout(0);
- expect(formSubmitSpy.callCount).to.equal(1);
+ expect(formSubmitSpy).to.have.been.calledOnce;
});
it('supports resetting form inputs in a native form', async () => {
@@ -296,9 +286,15 @@ describe('lion-button', () => {
reset
`);
- const btn = form.querySelector('lion-button');
- const firstName = form.querySelector('input[name=firstName]');
- const lastName = form.querySelector('input[name=lastName]');
+ const btn = /** @type {LionButton} */ (
+ /** @type {LionButton} */ (form.querySelector('lion-button'))
+ );
+ const firstName = /** @type {HTMLInputElement} */ (form.querySelector(
+ 'input[name=firstName]',
+ ));
+ const lastName = /** @type {HTMLInputElement} */ (form.querySelector(
+ 'input[name=lastName]',
+ ));
firstName.value = 'Foo';
lastName.value = 'Bar';
@@ -322,13 +318,12 @@ describe('lion-button', () => {
`);
- form
- .querySelector('input[name="foo2"]')
- .dispatchEvent(new KeyboardEvent('keyup', { key: 13 }));
- await aTimeout();
- await aTimeout();
+ const input2 = /** @type {HTMLInputElement} */ (form.querySelector('input[name="foo2"]'));
+ input2.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+ await aTimeout(0);
+ await aTimeout(0);
- expect(formSubmitSpy.callCount).to.equal(1);
+ expect(formSubmitSpy).to.have.been.calledOnce;
});
});
@@ -336,69 +331,67 @@ describe('lion-button', () => {
it('behaves like native `button` when clicked', async () => {
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
const form = await fixture(html`
-
`);
- const button = form.querySelector('lion-button');
- getClickArea(button).click();
+ const button = /** @type {LionButton} */ (form.querySelector('lion-button'));
+ button.click();
- expect(formButtonClickedSpy.callCount).to.equal(1);
+ expect(formButtonClickedSpy).to.have.been.calledOnce;
});
it('behaves like native `button` when interacted with keyboard space', async () => {
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
const form = await fixture(html`
-
`);
- form
- .querySelector('lion-button')
- .dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 }));
- await aTimeout();
- await aTimeout();
+ /** @type {LionButton} */ (form.querySelector('lion-button')).dispatchEvent(
+ new KeyboardEvent('keyup', { key: ' ' }),
+ );
+ await aTimeout(0);
+ await aTimeout(0);
- expect(formButtonClickedSpy.callCount).to.equal(1);
+ expect(formButtonClickedSpy).to.have.been.calledOnce;
});
it('behaves like native `button` when interacted with keyboard enter', async () => {
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
const form = await fixture(html`
-
`);
- form
- .querySelector('lion-button')
- .dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 }));
- await aTimeout();
- await aTimeout();
+ const button = /** @type {LionButton} */ (form.querySelector('lion-button'));
+ button.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+ await aTimeout(0);
+ await aTimeout(0);
- expect(formButtonClickedSpy.callCount).to.equal(1);
+ expect(formButtonClickedSpy).to.have.been.calledOnce;
});
// input "enter" keypress mock doesn't seem to work right now, but should be tested in the future (maybe with Selenium)
it.skip('works with implicit form submission on-enter inside an input', async () => {
const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
const form = await fixture(html`
-
`);
- form
- .querySelector('input[name="foo2"]')
- .dispatchEvent(new KeyboardEvent('keyup', { key: 13 }));
- await aTimeout();
- await aTimeout();
+ const input2 = /** @type {HTMLInputElement} */ (form.querySelector('input[name="foo2"]'));
+ input2.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+ await aTimeout(0);
+ await aTimeout(0);
- expect(formButtonClickedSpy.callCount).to.equal(1);
+ expect(formButtonClickedSpy).to.have.been.calledOnce;
});
});
});
@@ -410,28 +403,28 @@ describe('lion-button', () => {
html`foo`,
));
- getClickArea(el).click();
+ el.click();
// trying to wait for other possible redispatched events
- await aTimeout();
- await aTimeout();
+ await aTimeout(0);
+ await aTimeout(0);
- expect(clickSpy.callCount).to.equal(1);
+ expect(clickSpy).to.have.been.calledOnce;
});
describe('native button behavior', async () => {
+ /**
+ * @param {HTMLButtonElement | LionButton} el
+ */
async function prepareClickEvent(el) {
setTimeout(() => {
- if (getClickArea(el)) {
- getClickArea(el).click();
- } else {
- el.click();
- }
+ el.click();
});
return oneEvent(el, 'click');
}
-
+ /** @type {Event} */
let nativeButtonEvent;
+ /** @type {Event} */
let lionButtonEvent;
before(async () => {
diff --git a/packages/combobox/docs/gh-combobox/gh-button.js b/packages/combobox/docs/gh-combobox/gh-button.js
index c90190b61..4892bc1fe 100644
--- a/packages/combobox/docs/gh-combobox/gh-button.js
+++ b/packages/combobox/docs/gh-combobox/gh-button.js
@@ -1,6 +1,7 @@
import { css, html } from '@lion/core';
import { LionButton } from '@lion/button';
+// @ts-expect-error
export class GhButton extends LionButton {
static get properties() {
return {
@@ -65,5 +66,10 @@ export class GhButton extends LionButton {
`;
}
+
+ constructor() {
+ super();
+ this.value = '';
+ }
}
customElements.define('gh-button', GhButton);
diff --git a/packages/combobox/docs/gh-combobox/gh-combobox.js b/packages/combobox/docs/gh-combobox/gh-combobox.js
index 9e8f291f8..233a8485f 100644
--- a/packages/combobox/docs/gh-combobox/gh-combobox.js
+++ b/packages/combobox/docs/gh-combobox/gh-combobox.js
@@ -5,6 +5,7 @@ import { renderLitAsNode } from '@lion/helpers';
import { LionCombobox } from '../../src/LionCombobox.js';
import './gh-button.js';
+// @ts-expect-error
export class GhOption extends LionOption {
static get properties() {
return {
diff --git a/packages/combobox/src/LionCombobox.js b/packages/combobox/src/LionCombobox.js
index a8ce56086..248fd967e 100644
--- a/packages/combobox/src/LionCombobox.js
+++ b/packages/combobox/src/LionCombobox.js
@@ -1,4 +1,4 @@
-// eslint-disable-next-line max-classes-per-file
+// @ts-nocheck there's an error in cli that cannot be reproduced locally
import { html, css, browserDetection } from '@lion/core';
import { OverlayMixin, withDropdownConfig } from '@lion/overlays';
import { LionListbox } from '@lion/listbox';
@@ -12,12 +12,14 @@ import { LionListbox } from '@lion/listbox';
* @typedef {import('@lion/listbox').LionOptions} LionOptions
* @typedef {import('@lion/overlays/types/OverlayConfig').OverlayConfig} OverlayConfig
* @typedef {import('@lion/core/types/SlotMixinTypes').SlotsMap} SlotsMap
+ * @typedef {import('../types/SelectionDisplay').SelectionDisplay} SelectionDisplay
*/
/**
* LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion
* FormControl
*/
+// @ts-ignore
export class LionCombobox extends OverlayMixin(LionListbox) {
static get properties() {
return {
@@ -73,6 +75,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
*/
// eslint-disable-next-line class-methods-use-this
_inputGroupInputTemplate() {
+ // @ts-ignore
return html`
@@ -101,6 +104,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
/**
* @type {SlotsMap}
*/
+ // @ts-ignore
get slots() {
return {
...super.slots,
@@ -158,7 +162,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
}
/**
- * @type {HTMLElement | null}
+ * @type {SelectionDisplay | null}
*/
get _selectionDisplayNode() {
return this.querySelector('[slot="selection-display"]');
@@ -187,7 +191,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
* @configure OverlayMixin
*/
get _overlayReferenceNode() {
- return this.shadowRoot.querySelector('.input-group__container');
+ return /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('.input-group__container');
}
/**
@@ -358,7 +362,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
}
/**
- * @param {Event} ev
+ * @param {KeyboardEvent} ev
*/
_textboxOnKeydown(ev) {
if (ev.key === 'Tab') {
@@ -379,6 +383,9 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
this._inputNode.focus();
}
+ /**
+ * @param {string} v
+ */
_setTextboxValue(v) {
this._inputNode.value = v;
}
@@ -439,6 +446,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
/**
* Computes whether a user intends to autofill (inline autocomplete textbox)
* @overridable
+ * @param {{ prevValue:string, curValue:string }} config
*/
_computeUserIntendsAutoFill({ prevValue, curValue }) {
const userIsAddingChars = prevValue.length < curValue.length;
@@ -474,6 +482,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
let hasAutoFilled = false;
const userIntendsAutoFill = this._computeUserIntendsAutoFill({ prevValue, curValue });
const isCandidate = this.autocomplete === 'both' || this.autocomplete === 'inline';
+ // @ts-ignore this.autocomplete === 'none' needs to be there if statement above is removed
const noFilter = this.autocomplete === 'inline' || this.autocomplete === 'none';
/** @typedef {LionOption & { onFilterUnmatch?:function, onFilterMatch?:function }} OptionWithFilterFn */
diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js
index fd487f1c9..ca065073e 100644
--- a/packages/combobox/test/lion-combobox.test.js
+++ b/packages/combobox/test/lion-combobox.test.js
@@ -7,6 +7,7 @@ import { browserDetection, LitElement } from '@lion/core';
/**
* @typedef {import('../src/LionCombobox.js').LionCombobox} LionCombobox
+ * @typedef {import('../types/SelectionDisplay').SelectionDisplay} SelectionDisplay
*/
/**
@@ -23,10 +24,10 @@ function mimicUserTyping(el, value) {
/**
* @param {LionCombobox} el
- * @param {string[]} value
+ * @param {string[]} values
*/
async function mimicUserTypingAdvanced(el, values) {
- const inputNode = el._inputNode;
+ const inputNode = /** @type {HTMLInputElement & {selectionStart:number, selectionEnd:number}} */ (el._inputNode);
inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
let hasSelection = inputNode.selectionStart !== inputNode.selectionEnd;
@@ -439,8 +440,15 @@ describe('lion-combobox', () => {
describe('Selection display', () => {
class MySelectionDisplay extends LitElement {
+ /**
+ * @param {import('lit-element').PropertyValues } changedProperties
+ */
onComboboxElementUpdated(changedProperties) {
- if (changedProperties.has('modelValue') && this.comboboxElement.multipleChoice) {
+ if (
+ changedProperties.has('modelValue') &&
+ // @ts-ignore
+ this.comboboxElement.multipleChoice
+ ) {
// do smth..
}
}
@@ -464,6 +472,7 @@ describe('lion-combobox', () => {
Item 1
`));
+ // @ts-ignore allow protected members
expect(el._selectionDisplayNode.comboboxElement).to.equal(el);
});
@@ -474,6 +483,7 @@ describe('lion-combobox', () => {
Item 1
`));
+ // @ts-expect-error sinon not typed correctly?
const spy = sinon.spy(el._selectionDisplayNode, 'onComboboxElementUpdated');
el.requestUpdate('modelValue');
await el.updateComplete;
@@ -974,14 +984,14 @@ describe('lion-combobox', () => {
});
it('updates aria-activedescendant on textbox node', async () => {
- let el = await fixture(html`
+ let el = /** @type {LionCombobox} */ (await fixture(html`
Artichoke
Chard
Chicory
Victoria Plum
- `);
+ `));
expect(el._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(null);
expect(el.formElements[1].active).to.equal(false);
@@ -995,14 +1005,14 @@ describe('lion-combobox', () => {
);
expect(el.formElements[1].active).to.equal(false);
- el = await fixture(html`
+ el = /** @type {LionCombobox} */ (await fixture(html`
Artichoke
Chard
Chicory
Victoria Plum
- `);
+ `));
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el.updateComplete;
expect(el._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
diff --git a/packages/combobox/types/SelectionDisplay.d.ts b/packages/combobox/types/SelectionDisplay.d.ts
new file mode 100644
index 000000000..be9db4ab6
--- /dev/null
+++ b/packages/combobox/types/SelectionDisplay.d.ts
@@ -0,0 +1,6 @@
+import { LionCombobox } from '../src/LionCombobox.js';
+
+export interface SelectionDisplay extends HTMLElement {
+ comboboxElement: LionCombobox;
+ onComboboxElementUpdated: Function;
+}
diff --git a/packages/listbox/types/ListboxMixinTypes.d.ts b/packages/listbox/types/ListboxMixinTypes.d.ts
index 0fdc4f741..de71c152d 100644
--- a/packages/listbox/types/ListboxMixinTypes.d.ts
+++ b/packages/listbox/types/ListboxMixinTypes.d.ts
@@ -44,9 +44,9 @@ export declare class ListboxHost {
/** Reset interaction states and modelValue */
public reset(): void;
- protected _scrollTargetNode: LionOptions;
+ protected get _scrollTargetNode(): LionOptions;
- protected _listboxNode: LionOptions;
+ protected get _listboxNode(): LionOptions;
protected _listboxReceivesNoFocus: boolean;
@@ -72,7 +72,7 @@ export declare class ListboxHost {
protected _onChildActiveChanged(ev: Event): void;
- protected _activeDescendantOwnerNode: HTMLElement;
+ protected get _activeDescendantOwnerNode(): HTMLElement;
}
export declare function ListboxImplementation>(
diff --git a/packages/select-rich/test/demos.screenshots-test.js b/packages/select-rich/test/demos.screenshots-test.js
index df3d06e9a..6ef5ecb99 100644
--- a/packages/select-rich/test/demos.screenshots-test.js
+++ b/packages/select-rich/test/demos.screenshots-test.js
@@ -1,3 +1,4 @@
+// @ts-nocheck
/* globals capture getStoryPage */
const selector = 'lion-select-rich';
@@ -5,21 +6,16 @@ const selector = 'lion-select-rich';
describe('forms-select-rich', () => {
it('main', async () => {
const id = `forms-select-rich--main`;
- // @ts-expect-error
const page = await getStoryPage(id);
- // @ts-expect-error
await capture({ selector, id, page });
});
it('main-opened', async () => {
const id = `forms-select-rich--main`;
- // @ts-expect-error
const page = await getStoryPage(id);
await page.evaluate(() => {
const el = document.querySelector('lion-select-rich');
- // @ts-expect-error
el.opened = true;
});
- // @ts-expect-error
await capture({
selector,
id: `${id}-opened`,
@@ -29,21 +25,16 @@ describe('forms-select-rich', () => {
});
it('options-with-html', async () => {
const id = `forms-select-rich--options-with-html`;
- // @ts-expect-error
const page = await getStoryPage(id);
- // @ts-expect-error
await capture({ selector, id, page });
});
it('options-with-html-opened', async () => {
const id = `forms-select-rich--options-with-html`;
- // @ts-expect-error
const page = await getStoryPage(id);
await page.evaluate(() => {
const el = document.querySelector('lion-select-rich');
- // @ts-expect-error
el.opened = true;
});
- // @ts-expect-error
await capture({
selector,
id: `${id}-opened`,
@@ -53,14 +44,11 @@ describe('forms-select-rich', () => {
});
it('many-options-with-scrolling-opened', async () => {
const id = `forms-select-rich--many-options-with-scrolling`;
- // @ts-expect-error
const page = await getStoryPage(id);
await page.evaluate(() => {
const el = document.querySelector('lion-select-rich');
- // @ts-expect-error
el.opened = true;
});
- // @ts-expect-error
await capture({
selector,
id: `${id}-opened`,
@@ -70,28 +58,21 @@ describe('forms-select-rich', () => {
});
it('read-only-prefilled', async () => {
const id = `forms-select-rich--read-only-prefilled`;
- // @ts-expect-error
const page = await getStoryPage(id);
- // @ts-expect-error
await capture({ selector, id, page });
});
it('disabled-select', async () => {
const id = `forms-select-rich--disabled-select`;
- // @ts-expect-error
const page = await getStoryPage(id);
- // @ts-expect-error
await capture({ selector, id, page });
});
it('disabled-option-opened', async () => {
const id = `forms-select-rich--disabled-option`;
- // @ts-expect-error
const page = await getStoryPage(id);
await page.evaluate(() => {
const el = document.querySelector('lion-select-rich');
- // @ts-expect-error
el.opened = true;
});
- // @ts-expect-error
await capture({
selector,
id: `${id}-opened`,
@@ -101,35 +82,26 @@ describe('forms-select-rich', () => {
});
it('validation', async () => {
const id = `forms-select-rich--validation`;
- // @ts-expect-error
const page = await getStoryPage(id);
await page.evaluate(() => {
const el = document.querySelector('lion-select-rich');
- // @ts-expect-error
el.updateComplete.then(() => {
- // @ts-expect-error
el.touched = true;
- // @ts-expect-error
el.dirty = true;
});
});
- // @ts-expect-error
await capture({ selector, id, page });
});
it('render-options', async () => {
const id = `forms-select-rich--render-options`;
- // @ts-expect-error
const page = await getStoryPage(id);
- // @ts-expect-error
await capture({ selector, id, page });
});
it('interaction-mode-mac', async () => {
const id = `forms-select-rich--interaction-mode`;
- // @ts-expect-error
const page = await getStoryPage(id);
await page.click('lion-select-rich');
await page.keyboard.press('ArrowDown');
- // @ts-expect-error
await capture({
selector,
id: `${id}-mac`,
@@ -138,11 +110,9 @@ describe('forms-select-rich', () => {
});
it('interaction-mode-windows-linux', async () => {
const id = `forms-select-rich--interaction-mode`;
- // @ts-expect-error
const page = await getStoryPage(id);
await page.click('lion-select-rich:last-of-type');
await page.keyboard.press('ArrowDown');
- // @ts-expect-error
await capture({
selector: 'lion-select-rich:last-of-type',
id: `${id}-windows-linux`,
@@ -151,16 +121,12 @@ describe('forms-select-rich', () => {
});
it('no-default-selection', async () => {
const id = `forms-select-rich--no-default-selection`;
- // @ts-expect-error
const page = await getStoryPage(id);
- // @ts-expect-error
await capture({ selector, id, page });
});
it('single-option', async () => {
const id = `forms-select-rich--single-option`;
- // @ts-expect-error
const page = await getStoryPage(id);
- // @ts-expect-error
await capture({ selector, id, page });
});
});
diff --git a/tsconfig.json b/tsconfig.json
index bf5b2ebb7..4a49ea3ca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,12 +16,13 @@
},
"include": [
"packages/accordion/**/*.js",
- "packages/button/src/**/*.js",
+ "packages/button/**/*.js",
"packages/calendar/**/*.js",
- "packages/button/index.js",
"packages/checkbox-group/**/*.js",
"packages/collapsible/**/*.js",
"packages/core/**/*.js",
+ "packages/combobox/(test|src)/**/*.js",
+ "packages/combobox/*.js",
"packages/dialog/**/*.js",
"packages/fieldset/**/*.js",
"packages/form/**/*.js",