fix: use Pick generic types and inherit lit static props/methods

.changeset/soft-penguins-report.md

@@ -0,0 +1,17 @@
+---
+'@lion/calendar': patch
+'@lion/checkbox-group': patch
+'@lion/collapsible': patch
+'@lion/combobox': patch
+'@lion/core': patch
+'@lion/dialog': patch
+'@lion/form-core': patch
+'@lion/input-datepicker': patch
+'@lion/listbox': patch
+'@lion/localize': patch
+'@lion/overlays': patch
+'@lion/select-rich': patch
+'@lion/tooltip': patch
+---
+
+Fix types of mixins to include LitElement static props and methods, and use Pick generic type instead of fake constructors.

packages/core/types/DelegateMixinTypes.d.ts

@@ -10,7 +10,6 @@ export type Delegations = {
 };
 
 export declare class DelegateHost {
-  constructor(...args: any[]);
   delegations: Delegations;
 
   protected _connectDelegateMixin(): void;
@@ -51,6 +50,9 @@ export declare class DelegateHost {
  */
 declare function DelegateMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<DelegateHost>;
+): T &
+  Constructor<DelegateHost> &
+  Pick<typeof DelegateHost, keyof typeof DelegateHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type DelegateMixin = typeof DelegateMixinImplementation;

packages/core/types/DisabledMixinTypes.d.ts

@@ -2,7 +2,6 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement } from '../index.js';
 
 export declare class DisabledHost {
-  constructor(...args: any[]);
   disabled: boolean;
 
   /**
@@ -21,6 +20,6 @@ export declare class DisabledHost {
 
 export declare function DisabledMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<DisabledHost> & typeof DisabledHost;
+): T & Constructor<DisabledHost> & Pick<typeof DisabledHost, keyof typeof DisabledHost>;
 
 export type DisabledMixin = typeof DisabledMixinImplementation;

packages/core/types/DisabledWithTabIndexMixinTypes.d.ts

@@ -2,7 +2,6 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 import { DisabledHost } from './DisabledMixinTypes';
 import { LitElement } from '../index.js';
 export declare class DisabledWithTabIndexHost {
-  constructor(...args: any[]);
   tabIndex: number;
   /**
    * Makes request to make the element disabled and set the tabindex
@@ -21,6 +20,11 @@ export declare class DisabledWithTabIndexHost {
 
 export declare function DisabledWithTabIndexMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<DisabledWithTabIndexHost> & Constructor<DisabledHost>;
+): T &
+  Constructor<DisabledWithTabIndexHost> &
+  Pick<typeof DisabledWithTabIndexHost, keyof typeof DisabledWithTabIndexHost> &
+  Constructor<DisabledHost> &
+  Pick<typeof DisabledHost, keyof typeof DisabledHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type DisabledWithTabIndexMixin = typeof DisabledWithTabIndexMixinImplementation;

packages/core/types/SlotMixinTypes.d.ts

@@ -7,7 +7,6 @@ export type SlotsMap = {
 };
 
 export declare class SlotHost {
-  constructor(...args: any[]);
   /**
    * Obtains all the slots to create
    */
@@ -51,6 +50,9 @@ export declare class SlotHost {
  */
 export declare function SlotMixinImplementation<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<SlotHost> & typeof SlotHost;
+): T &
+  Constructor<SlotHost> &
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
+  Pick<typeof HTMLElement, keyof typeof HTMLElement>;
 
 export type SlotMixin = typeof SlotMixinImplementation;

packages/core/types/UpdateStylesMixinTypes.d.ts

@@ -21,7 +21,6 @@ export declare class UpdateStylesHost {
    *
    * @param {StylesMap} updateStyles
    */
-  constructor(...args: any[]);
   public updateStyles(updateStyles: StylesMap): void;
 }
 
@@ -30,6 +29,9 @@ export declare class UpdateStylesHost {
  */
 declare function UpdateStylesMixinImplementation<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<UpdateStylesHost>;
+): T &
+  Constructor<UpdateStylesHost> &
+  Pick<typeof UpdateStylesHost, keyof typeof UpdateStylesHost> &
+  Pick<typeof HTMLElement, keyof typeof HTMLElement>;
 
 export type UpdateStylesMixin = typeof UpdateStylesMixinImplementation;

packages/form-core/src/FormControlMixin.js

@@ -32,6 +32,7 @@ function uuid(prefix) {
 const FormControlMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow, no-unused-vars
   class FormControlMixin extends FormRegisteringMixin(DisabledMixin(SlotMixin(superclass))) {
+    /** @type {any} */
     static get properties() {
       return {
         /**

packages/form-core/types/FocusMixinTypes.d.ts

@@ -3,7 +3,6 @@ import { LitElement } from '@lion/core';
 import { FormControlHost } from './FormControlMixinTypes';
 
 export declare class FocusHost {
-  constructor(...args: any[]);
   focused: boolean;
 
   connectedCallback(): void;
@@ -19,6 +18,11 @@ export declare class FocusHost {
 
 export declare function FocusImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<FocusHost> & FocusHost & Constructor<FormControlHost> & typeof FormControlHost;
+): T &
+  Constructor<FocusHost> &
+  Pick<typeof FocusHost, keyof typeof FocusHost> &
+  Constructor<FormControlHost> &
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type FocusMixin = typeof FocusImplementation;

packages/form-core/types/FormControlMixinTypes.d.ts

@@ -36,7 +36,6 @@ declare interface HTMLElementWithValue extends HTMLElement {
 }
 
 export declare class FormControlHost {
-  constructor(...args: any[]);
   static get styles(): CSSResultArray;
   static get properties(): {
     name: {
@@ -176,12 +175,13 @@ export declare function FormControlImplementation<T extends Constructor<LitEleme
   superclass: T,
 ): T &
   Constructor<FormControlHost> &
-  typeof FormControlHost &
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
   Constructor<FormRegisteringHost> &
-  typeof FormRegisteringHost &
+  Pick<typeof FormRegisteringHost, keyof typeof FormRegisteringHost> &
   Constructor<DisabledHost> &
-  typeof DisabledHost &
+  Pick<typeof DisabledHost, keyof typeof DisabledHost> &
   Constructor<SlotHost> &
-  typeof SlotHost;
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type FormControlMixin = typeof FormControlImplementation;

packages/form-core/types/FormatMixinTypes.d.ts

@@ -5,7 +5,6 @@ import { ValidateHost } from './validate/ValidateMixinTypes';
 import { FormControlHost } from './FormControlMixinTypes';
 
 export declare class FormatHost {
-  constructor(...args: any[]);
   formattedValue: string;
   serializedValue: string;
   formatOn: string;
@@ -41,10 +40,11 @@ export declare function FormatImplementation<T extends Constructor<LitElement>>(
   superclass: T,
 ): T &
   Constructor<FormatHost> &
-  FormatHost &
+  Pick<typeof FormatHost, keyof typeof FormatHost> &
   Constructor<ValidateHost> &
-  typeof ValidateHost &
+  Pick<typeof ValidateHost, keyof typeof ValidateHost> &
   Constructor<FormControlHost> &
-  typeof FormControlHost;
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type FormatMixin = typeof FormatImplementation;

packages/form-core/types/InteractionStateMixinTypes.d.ts

@@ -3,7 +3,6 @@ import { LitElement } from '@lion/core';
 import { FormControlHost } from './FormControlMixinTypes';
 
 export declare class InteractionStateHost {
-  constructor(...args: any[]);
   prefilled: boolean;
   filled: boolean;
   touched: boolean;
@@ -27,8 +26,9 @@ export declare function InteractionStateImplementation<T extends Constructor<Lit
   superclass: T,
 ): T &
   Constructor<InteractionStateHost> &
-  typeof InteractionStateHost &
+  Pick<typeof InteractionStateHost, keyof typeof InteractionStateHost> &
   Constructor<FormControlHost> &
-  typeof FormControlHost;
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type InteractionStateMixin = typeof InteractionStateImplementation;

packages/form-core/types/NativeTextFieldMixinTypes.d.ts

@@ -6,7 +6,6 @@ export declare class NativeTextField extends LionField {
 }
 
 export declare class NativeTextFieldHost {
-  constructor(...args: any[]);
   get selectionStart(): number;
   set selectionStart(value: number);
   get selectionEnd(): number;
@@ -15,6 +14,9 @@ export declare class NativeTextFieldHost {
 
 export declare function NativeTextFieldImplementation<T extends Constructor<NativeTextField>>(
   superclass: T,
-): T & Constructor<NativeTextFieldHost> & NativeTextFieldHost & typeof NativeTextField;
+): T &
+  Constructor<NativeTextFieldHost> &
+  Pick<typeof NativeTextFieldHost, keyof typeof NativeTextFieldHost> &
+  Pick<typeof NativeTextField, keyof typeof NativeTextField>;
 
 export type NativeTextFieldMixin = typeof NativeTextFieldImplementation;

packages/form-core/types/choice-group/ChoiceGroupMixinTypes.d.ts

@@ -5,7 +5,6 @@ import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes';
 import { InteractionStateHost } from '../InteractionStateMixinTypes';
 
 export declare class ChoiceGroupHost {
-  constructor(...args: any[]);
   multipleChoice: boolean;
 
   connectedCallback(): void;
@@ -54,10 +53,11 @@ export declare function ChoiceGroupImplementation<T extends Constructor<LitEleme
   superclass: T,
 ): T &
   Constructor<ChoiceGroupHost> &
-  ChoiceGroupHost &
+  Pick<typeof ChoiceGroupHost, keyof typeof ChoiceGroupHost> &
   Constructor<FormRegistrarHost> &
-  typeof FormRegistrarHost &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
   Constructor<InteractionStateHost> &
-  typeof InteractionStateHost;
+  Pick<typeof InteractionStateHost, keyof typeof InteractionStateHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type ChoiceGroupMixin = typeof ChoiceGroupImplementation;

packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts

@@ -15,7 +15,6 @@ export interface ChoiceInputSerializedValue {
 }
 
 export declare class ChoiceInputHost {
-  constructor(...args: any[]);
   modelValue: ChoiceInputModelValue;
   serializedValue: ChoiceInputSerializedValue;
 
@@ -79,9 +78,9 @@ export declare function ChoiceInputImplementation<T extends Constructor<LitEleme
   superclass: T,
 ): T &
   Constructor<ChoiceInputHost> &
-  ChoiceInputHost &
+  Pick<typeof ChoiceInputHost, keyof typeof ChoiceInputHost> &
   Constructor<FormatHost> &
-  FormatHost &
-  HTMLElement;
+  Pick<typeof FormatHost, keyof typeof FormatHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type ChoiceInputMixin = typeof ChoiceInputImplementation;

packages/form-core/types/form-group/FormGroupMixinTypes.d.ts

@@ -7,7 +7,6 @@ import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes';
 import { ValidateHost } from '../validate/ValidateMixinTypes';
 
 export declare class FormGroupHost {
-  constructor(...args: any[]);
   protected static _addDescriptionElementIdsToField(): void;
   _inputNode: HTMLElement;
   submitGroup(): void;
@@ -30,16 +29,17 @@ export declare function FormGroupImplementation<T extends Constructor<LitElement
   superclass: T,
 ): T &
   Constructor<FormGroupHost> &
-  typeof FormGroupHost &
+  Pick<typeof FormGroupHost, keyof typeof FormGroupHost> &
   Constructor<FormRegistrarHost> &
-  typeof FormRegistrarHost &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
   Constructor<FormControlHost> &
-  typeof FormControlHost &
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
   Constructor<ValidateHost> &
-  typeof ValidateHost &
+  Pick<typeof ValidateHost, keyof typeof ValidateHost> &
   Constructor<DisabledHost> &
-  typeof DisabledHost &
+  Pick<typeof DisabledHost, keyof typeof DisabledHost> &
   Constructor<SlotHost> &
-  typeof SlotHost;
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type FormGroupMixin = typeof FormGroupImplementation;

packages/form-core/types/registration/FormRegisteringMixinTypes.d.ts

@@ -3,7 +3,6 @@ import { FormRegistrarHost } from './FormRegistrarMixinTypes';
 import { LitElement } from '@lion/core';
 
 export declare class FormRegisteringHost {
-  constructor(...args: any[]);
   connectedCallback(): void;
   disconnectedCallback(): void;
   _parentFormGroup?: FormRegistrarHost;
@@ -11,6 +10,9 @@ export declare class FormRegisteringHost {
 
 export declare function FormRegisteringImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<FormRegisteringHost> & typeof FormRegisteringHost;
+): T &
+  Constructor<FormRegisteringHost> &
+  Pick<typeof FormRegisteringHost, keyof typeof FormRegisteringHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type FormRegisteringMixin = typeof FormRegisteringImplementation;

packages/form-core/types/registration/FormRegistrarMixinTypes.d.ts

@@ -9,7 +9,6 @@ export declare class ElementWithParentFormGroup {
 }
 
 export declare class FormRegistrarHost {
-  constructor(...args: any[]);
   _isFormOrFieldset: boolean;
   formElements: FormControlsCollection & { [x: string]: any };
   addFormElement(
@@ -29,8 +28,9 @@ export declare function FormRegistrarImplementation<T extends Constructor<LitEle
   superclass: T,
 ): T &
   Constructor<FormRegistrarHost> &
-  typeof FormRegistrarHost &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
   Constructor<FormRegisteringHost> &
-  typeof FormRegisteringHost;
+  Pick<typeof FormRegisteringHost, keyof typeof FormRegisteringHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type FormRegistrarMixin = typeof FormRegistrarImplementation;

packages/form-core/types/registration/FormRegistrarPortalMixinTypes.d.ts

@@ -2,13 +2,15 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 import { LitElement } from '@lion/core';
 
 export declare class FormRegistrarPortalHost {
-  constructor(...args: any[]);
   registrationTarget: HTMLElement;
   __redispatchEventForFormRegistrarPortalMixin(ev: CustomEvent): void;
 }
 
 export declare function FormRegistrarPortalImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<FormRegistrarPortalHost> & FormRegistrarPortalHost;
+): T &
+  Constructor<FormRegistrarPortalHost> &
+  Pick<typeof FormRegistrarPortalHost, keyof typeof FormRegistrarPortalHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type FormRegistrarPortalMixin = typeof FormRegistrarPortalImplementation;

packages/form-core/types/utils/SyncUpdatableMixinTypes.d.ts

@@ -10,7 +10,6 @@ export declare interface SyncUpdatableNamespace {
 }
 
 export declare class SyncUpdatableHost {
-  constructor(...args: any[]);
   static __syncUpdatableHasChanged(name: string, newValue: any, oldValue: any): boolean;
   updateSync(name: string, oldValue: any): void;
   __syncUpdatableInitialize(): void;
@@ -24,6 +23,9 @@ export type SyncUpdatableHostType = typeof SyncUpdatableHost;
 
 export declare function SyncUpdatableImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<SyncUpdatableHost> & typeof SyncUpdatableHost;
+): T &
+  Constructor<SyncUpdatableHost> &
+  Pick<typeof SyncUpdatableHost, keyof typeof SyncUpdatableHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type SyncUpdatableMixin = typeof SyncUpdatableImplementation;

packages/form-core/types/validate/ValidateMixinTypes.d.ts

@@ -19,7 +19,6 @@ type FeedbackMessage = {
 };
 
 export declare class ValidateHost {
-  constructor(...args: any[]);
   validators: Validator[];
   hasFeedbackFor: string[];
   shouldShowFeedbackFor: string[];
@@ -76,16 +75,17 @@ export declare function ValidateImplementation<T extends Constructor<LitElement>
   superclass: T,
 ): T &
   Constructor<ValidateHost> &
-  typeof ValidateHost &
+  Pick<typeof ValidateHost, keyof typeof ValidateHost> &
   Constructor<FormControlHost> &
-  typeof FormControlHost &
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
   Constructor<SyncUpdatableHost> &
-  typeof SyncUpdatableHost &
+  Pick<typeof SyncUpdatableHost, keyof typeof SyncUpdatableHost> &
   Constructor<DisabledHost> &
-  typeof DisabledHost &
+  Pick<typeof DisabledHost, keyof typeof DisabledHost> &
   Constructor<SlotHost> &
-  typeof SlotHost &
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
   Constructor<ScopedElementsHost> &
-  typeof ScopedElementsHost;
+  Pick<typeof ScopedElementsHost, keyof typeof ScopedElementsHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type ValidateMixin = typeof ValidateImplementation;

packages/listbox/types/ListboxMixinTypes.d.ts

@@ -9,7 +9,6 @@ import { LionOptions } from '../src/LionOptions.js';
 import { LionOption } from '../src/LionOption.js';
 
 export declare class ListboxHost {
-  constructor(...args: any[]);
   /**
    * When true, will synchronize activedescendant and selected element on
    * arrow key navigation.
@@ -80,14 +79,15 @@ export declare function ListboxImplementation<T extends Constructor<LitElement>>
   superclass: T,
 ): T &
   Constructor<ListboxHost> &
-  typeof ListboxHost &
+  Pick<typeof ListboxHost, keyof typeof ListboxHost> &
   Constructor<ChoiceGroupHost> &
-  typeof ChoiceGroupHost &
+  Pick<typeof ChoiceGroupHost, keyof typeof ChoiceGroupHost> &
   Constructor<SlotHost> &
-  typeof SlotHost &
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
   Constructor<FormRegistrarHost> &
-  typeof FormRegistrarHost &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
   Constructor<FormControlHost> &
-  typeof FormControlHost;
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type ListboxMixin = typeof ListboxImplementation;

packages/localize/types/LocalizeMixinTypes.d.ts

@@ -56,7 +56,6 @@ interface msgOptions {
 }
 
 declare class LocalizeMixinHost {
-  constructor(...args: any[]);
   static get localizeNamespaces(): StringToFunctionMap[];
 
   static get waitForLocalizeNamespaces(): boolean;
@@ -83,6 +82,9 @@ declare class LocalizeMixinHost {
 
 declare function LocalizeMixinImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<LocalizeMixinHost> & typeof LocalizeMixinHost;
+): T &
+  Constructor<LocalizeMixinHost> &
+  Pick<typeof LocalizeMixinHost, keyof typeof LocalizeMixinHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type LocalizeMixin = typeof LocalizeMixinImplementation;

packages/overlays/types/ArrowMixinTypes.d.ts

@@ -5,7 +5,6 @@ import { Options as PopperOptions, State } from '@popperjs/core/lib/popper';
 import { OverlayConfig } from '../types/OverlayConfig';
 
 export declare class ArrowHost {
-  constructor(...args: any[]);
   static get properties(): {
     hasArrow: {
       type: BooleanConstructor;
@@ -30,6 +29,9 @@ export declare class ArrowHost {
 
 export declare function ArrowImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<ArrowHost> & ArrowHost;
+): T &
+  Constructor<ArrowHost> &
+  Pick<typeof ArrowHost, keyof typeof ArrowHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type ArrowMixin = typeof ArrowImplementation;

packages/overlays/types/OverlayMixinTypes.d.ts

@@ -17,7 +17,6 @@ export interface DefineOverlayConfig {
 }
 
 export declare class OverlayHost {
-  constructor(...args: any[]);
   public opened: Boolean;
 
   public get config(): OverlayConfig;
@@ -67,6 +66,9 @@ export declare class OverlayHost {
 
 export declare function OverlayImplementation<T extends Constructor<LitElement>>(
   superclass: T,
-): T & Constructor<OverlayHost> & typeof OverlayHost;
+): T &
+  Constructor<OverlayHost> &
+  Pick<typeof OverlayHost, keyof typeof OverlayHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
 
 export type OverlayMixin = typeof OverlayImplementation;

packages/tooltip/src/LionTooltip.js

@@ -11,6 +11,7 @@ import { ArrowMixin, OverlayMixin } from '@lion/overlays';
  * @customElement lion-tooltip
  */
 export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
+  /** @type {any} */
   static get properties() {
     return {
       invokerRelation: {