Refactor: Renamed mixin, cleanup

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]

packages/ui/components/form-core/src/choice-group/CustomChoiceMixin.js → 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<import('lit').LitElement>} 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);

packages/ui/components/form-core/test-suites/choice-group/CustomChoiceMixin.suite.js

@@ -4,15 +4,17 @@ import '@lion/ui/define/lion-checkbox.js';
 import { LitElement } from 'lit';
 import {
   ChoiceInputMixin,
-  CustomChoiceMixin,
+  CustomChoiceGroupMixin,
   FormGroupMixin,
   ChoiceGroupMixin,
 } from '@lion/ui/form-core.js';
 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',

packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.integrations.test.js → 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() {

packages/ui/components/form-core/test/choice-group/CustomChoiceMixin.test.js → 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();

packages/ui/components/form-core/types/choice-group/CustomChoiceMixinTypes.ts → 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<T extends Constructor<LitElement>>(
+export declare function CustomChoiceGroupImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T &
-  Constructor<CustomChoiceHost> &
-  Pick<typeof CustomChoiceHost, keyof typeof CustomChoiceHost> &
+  Constructor<CustomChoiceGroupHost> &
+  Pick<typeof CustomChoiceGroupHost, keyof typeof CustomChoiceGroupHost> &
   Constructor<ChoiceGroupHost> &
   Pick<typeof ChoiceGroupHost, keyof typeof ChoiceGroupHost> &
   Pick<typeof LitElement, keyof typeof LitElement>;
 
-export type CustomChoiceMixin = typeof CustomChoiceImplementation;
+export type CustomChoiceGroupMixin = typeof CustomChoiceGroupImplementation;

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';

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';

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';

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';