How to use the @dojo/framework/core/mixins/Focus.FocusMixin function in @dojo/framework

valid?: { valid?: boolean; message?: string } | boolean;
	/** Value to set on the input */
	value?: string;
	/** Optional id string for the combobox, set on the text input */
	widgetId?: string;
}

// Enum used when traversing items using arrow keys
export enum Operation {
	increase = 1,
	decrease = -1
}

@theme(css)
@diffProperty('results', reference)
export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase))) {
	private _activeIndex = 0;
	private _ignoreBlur: boolean | undefined;
	private _idBase = uuid();
	private _menuHasVisualFocus = false;
	private _open: boolean | undefined;
	private _wasOpen: boolean | undefined;

	private _closeMenu() {
		this._open = false;
		this.invalidate();
	}

	private _getMenuId() {
		return `${this._idBase}-menu`;
	}

/** Sets the input as required to complete the form */
	required?: boolean;
	/** Number of rows, controls the height of the textarea */
	rows?: number;
	/** If the field is valid and optionally display a message */
	valid?: { valid?: boolean; message?: string } | boolean;
	/** The current value */
	value?: string;
	/** The id used for the form input element */
	widgetId?: string;
	/** Controls text wrapping. Can be "hard", "soft", or "off" */
	wrapText?: 'hard' | 'soft' | 'off';
}

@theme(css)
export class TextArea extends ThemedMixin(FocusMixin(WidgetBase)) {
	private _dirty = false;

	private _onInput(event: Event) {
		event.stopPropagation();
		this.properties.onValue &&
			this.properties.onValue((event.target as HTMLInputElement).value);
	}

	private _onKeyDown(event: KeyboardEvent) {
		event.stopPropagation();
		this.properties.onKeyDown &&
			this.properties.onKeyDown(event.which, () => {
				event.preventDefault();
			});
	}

onKeyDown?(event: KeyboardEvent): void;
	/** Called with the option data of the new requested selected item */
	onOptionSelect?(option: any, index: number): void;
	/** Array of data for listbox options */
	optionData?: any[];
	/** Listbox is in the focus order by default, but setting tabIndex: -1 will remove it */
	tabIndex?: number;
	/** When controlling Listbox through an outside widget, e.g. in ComboBox, visualFocus mimics visual focus styling when true */
	visualFocus?: boolean;
	/** Optional custom id for the root node of the listbox */
	widgetId?: string;
}

@theme(css)
@diffProperty('optionData', reference)
export class Listbox extends ThemedMixin(FocusMixin(WidgetBase)) {
	private _boundRenderOption = this.renderOption.bind(this);
	private _idBase = uuid();

	private _getOptionDisabled(option: any, index: number) {
		const { getOptionDisabled } = this.properties;
		return getOptionDisabled ? getOptionDisabled(option, index) : false;
	}

	private _getOptionId(index: number): string {
		const { optionData = [], getOptionId } = this.properties;
		return getOptionId ? getOptionId(optionData[index], index) : `${this._idBase}-${index}`;
	}

	private _onKeyDown(event: KeyboardEvent) {
		event.stopPropagation();
		const {

/** If false the pane will not collapse in response to clicking the title */
	closeable?: boolean;
	/** 'aria-level' for the title's DOM node */
	headingLevel?: number;
	/** Called when the title of an open pane is clicked */
	onRequestClose?(key: string | number | undefined): void;
	/** Called when the title of a closed pane is clicked */
	onRequestOpen?(key: string | number | undefined): void;
	/** If true the pane is opened and content is visible */
	open?: boolean;
	/** Title to display above the content */
	title: DNode;
}

@theme(css)
export class TitlePane extends ThemedMixin(FocusMixin(WidgetBase)) {
	private _id = uuid();
	private _open: boolean | undefined;

	private _onWindowResize = () => {
		this.invalidate();
	};

	private _onTitleClick(event: MouseEvent) {
		event.stopPropagation();
		this._toggle();
	}

	private _toggle() {
		const {
			closeable = true,
			key,

function patternDiffer(
	previousProperty: string | undefined,
	newProperty: string | RegExp | undefined
): PropertyChangeRecord {
	const value = newProperty instanceof RegExp ? newProperty.source : newProperty;
	return {
		changed: previousProperty !== value,
		value
	};
}

@theme(css)
@diffProperty('pattern', patternDiffer)
@diffProperty('leading', reference)
@diffProperty('trailing', reference)
export class TextInput extends ThemedMixin(FocusMixin(WidgetBase)) {
	private _onInput(event: Event) {
		event.stopPropagation();
		this.properties.onValue &&
			this.properties.onValue((event.target as HTMLInputElement).value);
	}

	private _onKeyDown(event: KeyboardEvent) {
		event.stopPropagation();
		this.properties.onKeyDown &&
			this.properties.onKeyDown(event.which, () => {
				event.preventDefault();
			});
	}

	private _onKeyUp(event: KeyboardEvent) {
		event.stopPropagation();

/** Handler for events triggered by "on over" */
	onOver?(): void;
	/** Handler for events triggered by "on up" */
	onUp?(): void;
	/** Indicates status of a toggle button */
	pressed?: boolean;
	/** Button type can be "submit", "reset", "button", or "menu" */
	type?: 'submit' | 'reset' | 'button' | 'menu';
	/**  Defines a value for the button submitted with form data */
	value?: string;
	/** `id` set on the root button DOM node */
	widgetId?: string;
}

@theme(css)
export class Button extends ThemedMixin(FocusMixin(WidgetBase)) {
	private _onClick(event: MouseEvent) {
		event.stopPropagation();
		this.properties.onClick && this.properties.onClick();
	}

	protected getModifierClasses(): (string | null)[] {
		const { disabled, pressed } = this.properties;

		return [disabled ? css.disabled : null, pressed ? css.pressed : null];
	}

	render(): DNode {
		let {
			aria = {},
			disabled,
			widgetId,

/** Handler for when the value of the widget changes */
	onValue?(checked: boolean): void;
	/** Makes the radio readonly (it may be focused but not changed) */
	readOnly?: boolean;
	/** Sets the radio input as required to complete the form */
	required?: boolean;
	/** Toggles the invalid/valid states of the Radio affecting how it is displayed */
	valid?: boolean;
	/** The current value */
	value?: string;
	/** The id used for the form input element */
	widgetId?: string;
}

@theme(css)
export class Radio extends ThemedMixin(FocusMixin(WidgetBase)) {
	private _uuid = uuid();

	private _onChange(event: Event) {
		event.stopPropagation();
		const radio = event.target as HTMLInputElement;
		this.properties.onValue && this.properties.onValue(radio.checked);
	}

	protected getRootClasses(): (string | null)[] {
		const { checked = false, disabled, valid, readOnly, required } = this.properties;
		const focus = this.meta(Focus).get('root');

		return [
			css.root,
			checked ? css.checked : null,
			disabled ? css.disabled : null,

onCloseClick?: (index: number) => void;
	/** Called when the down arrow button is pressed */
	onDownArrowPress?: () => void;
	/** Called when the end button is pressed */
	onEndPress?: () => void;
	/** Called when the home button is pressed */
	onHomePress?: () => void;
	/** Called when the left arrow button is pressed */
	onLeftArrowPress?: () => void;
	/** Called when the right arrow button is pressed */
	onRightArrowPress?: () => void;
	/** Called when the up arrow button is pressed */
	onUpArrowPress?: () => void;
}

export const ThemedBase = I18nMixin(ThemedMixin(FocusMixin(WidgetBase)));

@theme(css)
export class TabButtonBase<p> extends ThemedBase&lt;
	P
&gt; {
	private _onClick(event: MouseEvent) {
		event.stopPropagation();
		const { disabled, index, onClick } = this.properties;

		!disabled &amp;&amp; onClick &amp;&amp; onClick(index);
	}

	private _onCloseClick(event: MouseEvent) {
		event.stopPropagation();
		const { index, onCloseClick } = this.properties;
</p>