diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js index fdb48310ed..8154adb3a7 100644 --- a/packages/ui/components/combobox/src/LionCombobox.js +++ b/packages/ui/components/combobox/src/LionCombobox.js @@ -1,5 +1,5 @@ import { browserDetection } from '@lion/ui/core.js'; -import { Unparseable, CustomChoiceMixin } from '@lion/ui/form-core.js'; +import { Unparseable, CustomChoiceGroupMixin } from '@lion/ui/form-core.js'; import { LionListbox } from '@lion/ui/listbox.js'; import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js'; import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js'; @@ -27,7 +27,7 @@ const matchA11ySpanReverseFns = new WeakMap(); * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion * FormControl */ -export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceMixin(LionListbox))) { +export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMixin(LionListbox))) { /** @type {any} */ static get properties() { return { @@ -364,24 +364,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceMixin(L return this._inputNode; } - /** - * @type {number | number[]} - */ - // @ts-ignore - get checkedIndex() { - return super.checkedIndex; - } - - /** - * @deprecated - * This setter exists for backwards compatibility of single choice groups. - * A setter api would be confusing for a multipleChoice group. Use `setCheckedIndex` instead. - * @param {number|number[]} index - */ - set checkedIndex(index) { - super.checkedIndex = index; - } - /** * @returns {boolean} */ @@ -488,16 +470,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceMixin(L } } - /** - * If an array is passed for multiple-choice, it will check the indexes in array, and uncheck the rest - * If a number is passed, the item with the passed index is checked without unchecking others - * For single choice, __onChildCheckedChanged we ensure that we uncheck siblings - * @param {number|number[]} index - */ - setCheckedIndex(index) { - super.setCheckedIndex(index); - } - /** * @param {string} [name] * @param {unknown} [oldValue] diff --git a/packages/ui/components/form-core/src/choice-group/CustomChoiceMixin.js b/packages/ui/components/form-core/src/choice-group/CustomChoiceGroupMixin.js similarity index 90% rename from packages/ui/components/form-core/src/choice-group/CustomChoiceMixin.js rename to packages/ui/components/form-core/src/choice-group/CustomChoiceGroupMixin.js index cb9f8fb0a0..13567ad55d 100644 --- a/packages/ui/components/form-core/src/choice-group/CustomChoiceMixin.js +++ b/packages/ui/components/form-core/src/choice-group/CustomChoiceGroupMixin.js @@ -2,8 +2,8 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin'; import { ChoiceGroupMixin } from './ChoiceGroupMixin.js'; /** - * @typedef {import('../../types/choice-group/CustomChoiceMixinTypes.js').CustomChoiceMixin} CustomChoiceMixin - * @typedef {import('../../types/choice-group/CustomChoiceMixinTypes.js').CustomChoiceHost} CustomChoiceHost + * @typedef {import('../../types/choice-group/CustomChoiceGroupMixinTypes.js').CustomChoiceGroupMixin} CustomChoiceGroupMixin + * @typedef {import('../../types/choice-group/CustomChoiceGroupMixinTypes.js').CustomChoiceGroupHost} CustomChoiceGroupHost */ /** @@ -17,12 +17,12 @@ function normalizeArray(value) { /** * Extends the ChoiceGroupMixin to add optional support for custom user choices without altering the initial choice list. * - * @type {CustomChoiceMixin} + * @type {CustomChoiceGroupMixin} * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ -const CustomChoiceMixinImplementation = superclass => +const CustomChoiceGroupMixinImplementation = superclass => // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 - class CustomChoiceMixin extends ChoiceGroupMixin(superclass) { + class CustomChoiceGroupMixin extends ChoiceGroupMixin(superclass) { static get properties() { return { allowCustomChoice: { @@ -179,4 +179,4 @@ const CustomChoiceMixinImplementation = superclass => } }; -export const CustomChoiceMixin = dedupeMixin(CustomChoiceMixinImplementation); +export const CustomChoiceGroupMixin = dedupeMixin(CustomChoiceGroupMixinImplementation); diff --git a/packages/ui/components/form-core/test-suites/choice-group/CustomChoiceMixin.suite.js b/packages/ui/components/form-core/test-suites/choice-group/CustomChoiceMixin.suite.js index ee3ea7c34d..d9380b8cde 100644 --- a/packages/ui/components/form-core/test-suites/choice-group/CustomChoiceMixin.suite.js +++ b/packages/ui/components/form-core/test-suites/choice-group/CustomChoiceMixin.suite.js @@ -4,7 +4,7 @@ import '@lion/ui/define/lion-checkbox.js'; import { LitElement } from 'lit'; import { ChoiceInputMixin, - CustomChoiceMixin, + CustomChoiceGroupMixin, FormGroupMixin, ChoiceGroupMixin, } from '@lion/ui/form-core.js'; @@ -12,7 +12,9 @@ import { LionInput } from '@lion/ui/input.js'; import { expect, fixture, fixtureSync, html, unsafeStatic } from '@open-wc/testing'; import sinon from 'sinon'; -class CustomChoiceGroup extends CustomChoiceMixin(ChoiceGroupMixin(FormGroupMixin(LitElement))) {} +class CustomChoiceGroup extends CustomChoiceGroupMixin( + ChoiceGroupMixin(FormGroupMixin(LitElement)), +) {} customElements.define('custom-choice-input-group', CustomChoiceGroup); class ChoiceInput extends ChoiceInputMixin(LionInput) {} @@ -21,7 +23,11 @@ customElements.define('custom-choice-input', ChoiceInput); /** * @param {{ parentTagString?:string, childTagString?: string, choiceType?: string}} config */ -export function runCustomChoiceMixinSuite({ parentTagString, childTagString, choiceType } = {}) { +export function runCustomChoiceGroupMixinSuite({ + parentTagString, + childTagString, + choiceType, +} = {}) { const cfg = { parentTagString: parentTagString || 'custom-choice-input-group', childTagString: childTagString || 'choice-input', diff --git a/packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.integrations.test.js b/packages/ui/components/form-core/test/choice-group/CustomChoiceGroupMixin.integrations.test.js similarity index 81% rename from packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.integrations.test.js rename to packages/ui/components/form-core/test/choice-group/CustomChoiceGroupMixin.integrations.test.js index dc31816a3e..732b23f27d 100644 --- a/packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.integrations.test.js +++ b/packages/ui/components/form-core/test/choice-group/CustomChoiceGroupMixin.integrations.test.js @@ -3,9 +3,9 @@ import { LitElement } from 'lit'; import '@lion/ui/define/lion-fieldset.js'; import '@lion/ui/define/lion-checkbox-group.js'; import '@lion/ui/define/lion-checkbox.js'; -import { FormGroupMixin, ChoiceGroupMixin, CustomChoiceMixin } from '@lion/ui/form-core.js'; +import { FormGroupMixin, ChoiceGroupMixin, CustomChoiceGroupMixin } from '@lion/ui/form-core.js'; -class CustomChoiceGroupAllowCustom extends CustomChoiceMixin( +class CustomChoiceGroupAllowCustom extends CustomChoiceGroupMixin( ChoiceGroupMixin(FormGroupMixin(LitElement)), ) { constructor() { @@ -15,7 +15,7 @@ class CustomChoiceGroupAllowCustom extends CustomChoiceMixin( } customElements.define('allow-custom-choice-input-group', CustomChoiceGroupAllowCustom); -class MultipleCustomChoiceGroup extends CustomChoiceMixin( +class MultipleCustomChoiceGroup extends CustomChoiceGroupMixin( ChoiceGroupMixin(FormGroupMixin(LitElement)), ) { constructor() { @@ -25,7 +25,7 @@ class MultipleCustomChoiceGroup extends CustomChoiceMixin( } customElements.define('multiple-custom-choice-input-group', MultipleCustomChoiceGroup); -class MultipleCustomChoiceGroupAllowCustom extends CustomChoiceMixin( +class MultipleCustomChoiceGroupAllowCustom extends CustomChoiceGroupMixin( ChoiceGroupMixin(FormGroupMixin(LitElement)), ) { constructor() { diff --git a/packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.test.js b/packages/ui/components/form-core/test/choice-group/CustomChoiceGroupMixin.test.js similarity index 53% rename from packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.test.js rename to packages/ui/components/form-core/test/choice-group/CustomChoiceGroupMixin.test.js index 09fa3b78c0..154f3ec9bf 100644 --- a/packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.test.js +++ b/packages/ui/components/form-core/test/choice-group/CustomChoiceGroupMixin.test.js @@ -1,6 +1,6 @@ -import { runCustomChoiceMixinSuite } from '@lion/ui/form-core-test-suites.js'; +import { runCustomChoiceGroupMixinSuite } from '@lion/ui/form-core-test-suites.js'; import '@lion/ui/define/lion-fieldset.js'; import '@lion/ui/define/lion-checkbox-group.js'; import '@lion/ui/define/lion-checkbox.js'; -runCustomChoiceMixinSuite(); +runCustomChoiceGroupMixinSuite(); diff --git a/packages/ui/components/form-core/types/choice-group/CustomChoiceMixinTypes.ts b/packages/ui/components/form-core/types/choice-group/CustomChoiceGroupMixinTypes.ts similarity index 64% rename from packages/ui/components/form-core/types/choice-group/CustomChoiceMixinTypes.ts rename to packages/ui/components/form-core/types/choice-group/CustomChoiceGroupMixinTypes.ts index 7cffb0b9f4..537fcb7a37 100644 --- a/packages/ui/components/form-core/types/choice-group/CustomChoiceMixinTypes.ts +++ b/packages/ui/components/form-core/types/choice-group/CustomChoiceGroupMixinTypes.ts @@ -3,7 +3,7 @@ import { LitElement } from 'lit'; import { ChoiceGroupHost } from './ChoiceGroupMixinTypes.js'; -export declare class CustomChoiceHost { +export declare class CustomChoiceGroupHost { allowCustomChoice: boolean; get modelValue(): any; set modelValue(value: any); @@ -15,13 +15,13 @@ export declare class CustomChoiceHost { protected _isEmpty(): boolean; } -export declare function CustomChoiceImplementation>( +export declare function CustomChoiceGroupImplementation>( superclass: T, ): T & - Constructor & - Pick & + Constructor & + Pick & Constructor & Pick & Pick; -export type CustomChoiceMixin = typeof CustomChoiceImplementation; +export type CustomChoiceGroupMixin = typeof CustomChoiceGroupImplementation; diff --git a/packages/ui/components/form-core/types/choice-group/index.ts b/packages/ui/components/form-core/types/choice-group/index.ts index 6fabb3f781..755d06e5aa 100644 --- a/packages/ui/components/form-core/types/choice-group/index.ts +++ b/packages/ui/components/form-core/types/choice-group/index.ts @@ -1,3 +1,3 @@ export * from './ChoiceInputMixinTypes.js'; export * from './ChoiceGroupMixinTypes.js'; -export * from './CustomChoiceMixinTypes.js'; +export * from './CustomChoiceGroupMixinTypes.js'; diff --git a/packages/ui/exports/form-core-test-suites.js b/packages/ui/exports/form-core-test-suites.js index b43abad26e..6888833c67 100644 --- a/packages/ui/exports/form-core-test-suites.js +++ b/packages/ui/exports/form-core-test-suites.js @@ -8,4 +8,4 @@ export { runInteractionStateMixinSuite } from '../components/form-core/test-suit export { runNativeTextFieldMixinSuite } from '../components/form-core/test-suites/NativeTextFieldMixin.suite.js'; export { runValidateMixinSuite } from '../components/form-core/test-suites/ValidateMixin.suite.js'; export { runValidateMixinFeedbackPart } from '../components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js'; -export { runCustomChoiceMixinSuite } from '../components/form-core/test-suites/choice-group/CustomChoiceMixin.suite.js'; +export { runCustomChoiceGroupMixinSuite } from '../components/form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js'; diff --git a/packages/ui/exports/form-core.js b/packages/ui/exports/form-core.js index 9222ab86a0..b4b4760ccd 100644 --- a/packages/ui/exports/form-core.js +++ b/packages/ui/exports/form-core.js @@ -49,6 +49,6 @@ export { LionValidationFeedback } from '../components/form-core/src/validate/Lio export { ChoiceGroupMixin } from '../components/form-core/src/choice-group/ChoiceGroupMixin.js'; export { ChoiceInputMixin } from '../components/form-core/src/choice-group/ChoiceInputMixin.js'; -export { CustomChoiceMixin } from '../components/form-core/src/choice-group/CustomChoiceMixin.js'; +export { CustomChoiceGroupMixin } from '../components/form-core/src/choice-group/CustomChoiceGroupMixin.js'; export { FormGroupMixin } from '../components/form-core/src/form-group/FormGroupMixin.js'; diff --git a/packages/ui/exports/types/form-core.ts b/packages/ui/exports/types/form-core.ts index 798a9457eb..a69634db22 100644 --- a/packages/ui/exports/types/form-core.ts +++ b/packages/ui/exports/types/form-core.ts @@ -1,6 +1,6 @@ export { ChoiceGroupHost } from '../../components/form-core/types/choice-group/ChoiceGroupMixinTypes.js'; export { ChoiceInputHost } from '../../components/form-core/types/choice-group/ChoiceInputMixinTypes.js'; -export { CustomChoiceHost } from '../../components/form-core/types/choice-group/CustomChoiceMixinTypes.js'; +export { CustomChoiceGroupHost } from '../../components/form-core/types/choice-group/CustomChoiceGroupMixinTypes.js'; export { FormControlHost } from '../../components/form-core/types/FormControlMixinTypes.js'; export { HTMLElementWithValue } from '../../components/form-core/types/FormControlMixinTypes.js'; export { FormGroupHost } from '../../components/form-core/types/form-group/FormGroupMixinTypes.js';