From 991f1f54f90719dba941f7ace411214bb00813ad Mon Sep 17 00:00:00 2001 From: Thijs Louisse Date: Fri, 9 Apr 2021 23:17:34 +0200 Subject: [PATCH] fix(combobox): types --- .changeset/slimy-items-wait.md | 6 +++++ packages/combobox/src/LionCombobox.js | 22 ++++++++++--------- packages/combobox/test/lion-combobox.test.js | 3 --- packages/form-core/src/FormControlMixin.js | 4 +++- .../types/FormControlMixinTypes.d.ts | 1 + .../choice-group/ChoiceGroupMixinTypes.d.ts | 1 + 6 files changed, 23 insertions(+), 14 deletions(-) create mode 100644 .changeset/slimy-items-wait.md diff --git a/.changeset/slimy-items-wait.md b/.changeset/slimy-items-wait.md new file mode 100644 index 000000000..09a5f7d0e --- /dev/null +++ b/.changeset/slimy-items-wait.md @@ -0,0 +1,6 @@ +--- +'@lion/combobox': patch +'@lion/form-core': patch +--- + +**combobox**: enabled and fixed types diff --git a/packages/combobox/src/LionCombobox.js b/packages/combobox/src/LionCombobox.js index 9f150c977..7923786c9 100644 --- a/packages/combobox/src/LionCombobox.js +++ b/packages/combobox/src/LionCombobox.js @@ -1,4 +1,3 @@ -// @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,6 +11,8 @@ 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('@lion/form-core/types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost + * @typedef {import('@lion/form-core/types/FormControlMixinTypes').FormControlHost} FormControlHost * @typedef {import('../types/SelectionDisplay').SelectionDisplay} SelectionDisplay */ @@ -19,6 +20,7 @@ import { LionListbox } from '@lion/listbox'; * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion * FormControl */ +// @ts-expect-error static properties are not compatible export class LionCombobox extends OverlayMixin(LionListbox) { static get properties() { return { @@ -180,7 +182,6 @@ export class LionCombobox extends OverlayMixin(LionListbox) { * @configure FormControlMixin * Will tell FormControlMixin that a11y wrt labels / descriptions / feedback * should be applied here. - * @protected */ get _inputNode() { if (this._ariaVersion === '1.1') { @@ -413,8 +414,9 @@ export class LionCombobox extends OverlayMixin(LionListbox) { * return options.currentValue.length > 4 && super._showOverlayCondition(options); * } * - * @param {{ currentValue: string, lastKey:string }} options + * @param {{ currentValue: string, lastKey:string|undefined }} options * @protected + * @returns {boolean} */ // eslint-disable-next-line class-methods-use-this _showOverlayCondition({ lastKey }) { @@ -423,7 +425,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) { } // when no keyboard action involved (on focused change), return current opened state if (!lastKey) { - return this.opened; + return /** @type {boolean} */ (this.opened); } const doNotShowOn = ['Tab', 'Esc', 'Enter']; return !doNotShowOn.includes(lastKey); @@ -505,8 +507,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) { * should indeed not repropagate as normally. If there is no elements checked, this will be the only * model-value-changed event that gets received, and we should repropagate it. * - * @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target - * @protected + * @param {FormControlHost} target */ _repropagationCondition(target) { return super._repropagationCondition(target) || this.formElements.every(el => !el.checked); @@ -800,6 +801,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) { * @overridable * @param {string|string[]} modelValue * @param {string|string[]} oldModelValue + * @param {{phase?:string}} config * @protected */ // eslint-disable-next-line no-unused-vars @@ -817,17 +819,17 @@ export class LionCombobox extends OverlayMixin(LionListbox) { * @protected */ _syncToTextboxMultiple(modelValue, oldModelValue = []) { - const diff = modelValue.filter(x => !oldModelValue.includes(x)); + const diff = modelValue.filter(x => !oldModelValue.includes(x)).toString(); this._setTextboxValue(diff); // or last selected value? } /** * @override FormControlMixin - add form-control to [slot=input] instead of _inputNode - * @protected */ _enhanceLightDomClasses() { - if (this.querySelector('[slot=input]')) { - this.querySelector('[slot=input]').classList.add('form-control'); + const formControl = /** @type {HTMLInputElement} */ (this.querySelector('[slot=input]')); + if (formControl) { + formControl.classList.add('form-control'); } } diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js index 49e39c5af..a78fc2af9 100644 --- a/packages/combobox/test/lion-combobox.test.js +++ b/packages/combobox/test/lion-combobox.test.js @@ -1534,15 +1534,12 @@ describe('lion-combobox', () => { it('synchronizes autocomplete option to textbox', async () => { let el; [el] = await fruitFixture({ autocomplete: 'both' }); - // @ts-expect-error expect(el._inputNode.getAttribute('aria-autocomplete')).to.equal('both'); [el] = await fruitFixture({ autocomplete: 'list' }); - // @ts-expect-error expect(el._inputNode.getAttribute('aria-autocomplete')).to.equal('list'); [el] = await fruitFixture({ autocomplete: 'none' }); - // @ts-expect-error expect(el._inputNode.getAttribute('aria-autocomplete')).to.equal('none'); }); diff --git a/packages/form-core/src/FormControlMixin.js b/packages/form-core/src/FormControlMixin.js index c9eafffdf..cb24df7ee 100644 --- a/packages/form-core/src/FormControlMixin.js +++ b/packages/form-core/src/FormControlMixin.js @@ -9,6 +9,7 @@ import { Unparseable } from './validate/Unparseable.js'; * @typedef {import('@lion/core').CSSResultArray} CSSResultArray * @typedef {import('@lion/core').nothing} nothing * @typedef {import('@lion/core/types/SlotMixinTypes').SlotsMap} SlotsMap + * @typedef {import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost * @typedef {import('../types/FormControlMixinTypes.js').FormControlMixin} FormControlMixin * @typedef {import('../types/FormControlMixinTypes.js').ModelValueEventDetails} ModelValueEventDetails */ @@ -883,8 +884,9 @@ const FormControlMixinImplementation = superclass => /** * TODO: Extend this in choice group so that target is always a choice input and multipleChoice exists. * This will fix the types and reduce the need for ignores/expect-errors - * @param {EventTarget & import('../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} target + * @param {EventTarget & ChoiceInputHost} target * @protected + * @overridable */ _repropagationCondition(target) { return !( diff --git a/packages/form-core/types/FormControlMixinTypes.d.ts b/packages/form-core/types/FormControlMixinTypes.d.ts index 639014fc8..a0b348112 100644 --- a/packages/form-core/types/FormControlMixinTypes.d.ts +++ b/packages/form-core/types/FormControlMixinTypes.d.ts @@ -182,6 +182,7 @@ export declare class FormControlHost { protected _onBeforeRepropagateChildrenValues(ev: CustomEvent): void; __repropagateChildrenValues(ev: CustomEvent): void; _parentFormGroup: FormControlHost; + _repropagationCondition(target: FormControlHost): boolean; } export declare function FormControlImplementation>( diff --git a/packages/form-core/types/choice-group/ChoiceGroupMixinTypes.d.ts b/packages/form-core/types/choice-group/ChoiceGroupMixinTypes.d.ts index 54c0c3ee1..be27e4ad8 100644 --- a/packages/form-core/types/choice-group/ChoiceGroupMixinTypes.d.ts +++ b/packages/form-core/types/choice-group/ChoiceGroupMixinTypes.d.ts @@ -49,6 +49,7 @@ export declare class ChoiceGroupHost { __delegateNameAttribute(child: FormControlHost): void; protected _onBeforeRepropagateChildrenValues(ev: Event): void; + __oldModelValue: any; } export declare function ChoiceGroupImplementation>(