@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/types/components/ontario-dropdown-list/ontario-dropdown-list.d.ts

@@ -0,0 +1,238 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DropdownOption } from './dropdown-option.interface';
+import { Dropdown } from './dropdown.interface';
+import { HintExpander } from '../ontario-hint-expander/hint-expander.interface';
+import { Hint } from '../../utils/common/common.interface';
+import { Caption } from '../../utils/common/input-caption/caption.interface';
+import { Language } from '../../utils/common/language-types';
+import { InputFocusBlurEvent, InputInteractionEvent } from '../../utils/events/event-handler.interface';
+export declare class OntarioDropdownList implements Dropdown {
+	element: HTMLElement;
+	internals: ElementInternals;
+	hintTextRef: HTMLOntarioHintTextElement | undefined;
+	/**
+	 * The text to display for the dropdown list label.
+	 *
+	 * @example
+	 * <ontario-dropdown-list
+	 *   name="ontario-dropdown-list"
+	 *   caption='{
+	 *     "captionText": "Label",
+	 *     "captionType": "heading",
+	 *   }'
+	 *   ...>
+	 * </ontario-dropdown-list>
+	 */
+	caption: Caption | string;
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
+	 */
+	language?: Language;
+	/**
+	 * The name for the dropdown list. The name value is used to reference form data after a form is submitted.
+	 */
+	name: string;
+	/**
+	 * The ID for the dropdown list.
+	 * If no ID is provided, one will be generated.
+	 */
+	elementId?: string;
+	/**
+	 * The options for dropdown list.
+	 *
+	 * Each option will be passed in through an object in the options array.
+	 * This can either be passed in as an object directly (if using react), or as a string in HTML.
+	 *
+	 * In the example below, the options are being passed in as a string and there are three dropdown options displayed.
+	 *
+	 * @example
+	 * <ontario-dropdown-list
+	 *   caption='{
+	 *     "captionText": "Label",
+	 *     "captionType": "heading",
+	 *   }'
+	 *   name="ontario-dropdown-list"
+	 *   options='[
+	 *     {
+	 *       "value": "dropdown-option-1",
+	 *       "label": "Option 1",
+	 *       "selected": "true"
+	 *     },
+	 *     {
+	 *       "value": "dropdown-option-2",
+	 *       "label": "Option 2"
+	 *     },
+	 *     {
+	 *       "value": "dropdown-option-3",
+	 *       "label": "Option 3"
+	 *     }
+	 *   ]'
+	 * >
+	 * </ontario-dropdown-list>
+	 */
+	options: string | DropdownOption[];
+	/**
+	 * This is used to determine whether the dropdown list is required or not.
+	 * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.
+	 * If no prop is set, it will default to false (optional).
+	 */
+	required?: boolean;
+	/**
+	 * This prop is used to determine whether or not the initial option displayed is empty.
+	 * If set to `true`, it will render the default “select” text.
+	 * If set to a string, it will render the string value.
+	 *
+	 * @example
+	 * <ontario-dropdown-list is-empty-start-option="true"></ontario-dropdown-list>
+	 *
+	 * or
+	 *
+	 * <ontario-dropdown-list is-empty-start-option="Please select"></ontario-dropdown-list>
+	 */
+	isEmptyStartOption?: boolean | string;
+	/**
+	 * Used to include the ontario-hint-text component for the dropdown list.
+	 * This is optional.
+	 */
+	hintText?: string | Hint;
+	/**
+	 * Used to include the ontario-hint-expander component for the dropdown list component.
+	 * This is passed in as an object with key-value pairs.
+	 *
+	 * This is optional.
+	 *
+	 * @example
+	 * <ontario-dropdown-list
+	 *   caption='{
+	 *     "caption": "What province do you live in?",
+	 *     "captionType": "heading",
+	 *   }
+	 *   name="ontario-dropdown-list"
+	 *   options='[
+	 *     {
+	 *       "value": "dropdown-option-1",
+	 *       "label": "Option 1",
+	 *       "selected": "true"
+	 *     },
+	 *     {
+	 *       "value": "dropdown-option-2",
+	 *       "label": "Option 2"
+	 *     },
+	 *     {
+	 *       "value": "dropdown-option-3",
+	 *       "label": "Option 3"
+	 *     }
+	 *   ]'
+	 *   hint-expander='{
+	 *    "hint": "Hint expander for the dropdown list",
+	 *    "content": "Example hint expander content for the dropdown list."
+	 *   }'
+	 * >
+	 * </ontario-dropdown-list>
+	 */
+	hintExpander?: HintExpander | string;
+	/**
+	 * Used to add a custom function to the dropdown onChange event.
+	 */
+	customOnChange?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the dropdown onBlur event.
+	 */
+	customOnBlur?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the dropdown onFocus event.
+	 */
+	customOnFocus?: (event: globalThis.Event) => void;
+	/**
+	 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
+	 */
+	hintTextId: string | null | undefined;
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	private captionState;
+	/**
+	 * The options are re-assigned to the internalOptions array.
+	 */
+	private internalOptions;
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	private internalHintText;
+	/**
+	 * The hint expander options are re-assigned to the internalHintExpander array.
+	 */
+	private internalHintExpander;
+	translations: any;
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed.
+	 */
+	dropdownOnChange: EventEmitter<InputInteractionEvent>;
+	/**
+	 * Emitted when a keyboard input event occurs when a dropdown list has lost focus.
+	 */
+	dropdownOnBlur: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * Emitted when a keyboard input event occurs when a dropdown list has gained focus.
+	 */
+	dropdownOnFocus: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 */
+	handleSetAppLanguage(event: CustomEvent<Language>): void;
+	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	validateName(newValue: string): void;
+	validateOptions(newValue: object): void;
+	/**
+	 * Watch for changes to the `options` prop.
+	 *
+	 * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.
+	 */
+	parseOptions(): void;
+	/**
+	 * Watch for changes to the `caption` prop.
+	 *
+	 * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.
+	 * @param newValue: Caption | string
+	 */
+	private updateCaptionState;
+	/**
+	 * Watch for changes to the `hintText` prop.
+	 *
+	 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.
+	 */
+	private parseHintText;
+	/**
+	 * Watch for changes to the `language` prop to render either the English or French translations
+	 */
+	updateLanguage(): void;
+	/**
+	 * Watch for changes to the `hintExpander` prop.
+	 *
+	 * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.
+	 */
+	private parseHintExpander;
+	/**
+	 * Function to handle dropdown list events and the information pertaining to the dropdown list to emit.
+	 */
+	private handleEvent;
+	getId(): string;
+	/**
+	 * This function will set a selected key to `false` for each dropdown if no selected value is passed.
+	 *
+	 * It will also pass a warning to the user if multiple `true` selected values are passed.
+	 *
+	 * @param options
+	 * @returns options
+	 */
+	private validateSelectedOption;
+	private getDropdownArrow;
+	private getClass;
+	/**
+	 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.
+	 */
+	componentDidLoad(): Promise<void>;
+	componentWillLoad(): void;
+	render(): any;
+}

package/dist/types/components/ontario-fieldset/ontario-fieldset.d.ts

@@ -0,0 +1,25 @@
+import { Fieldset } from './ontario-fieldset.interface';
+import { CaptionType } from '../../utils/common/input-caption/input-caption.types';
+export declare class OntarioFieldset implements Fieldset {
+	/**
+	 * The text value used for the legend of the fieldset.
+	 */
+	legend: string;
+	/**
+	 * The size of the fieldset legend. If no prop is passed, it will be `default`.
+	 */
+	legendSize: CaptionType;
+	/**
+	 * Watch for changes to the legendSize prop.
+	 * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.
+	 */
+	validateLegendSize(): 'default' | 'large' | 'heading';
+	validateLegend(): void;
+	/**
+	 * Print the legend warning message
+	 */
+	validateLegendText(newValue: string): void;
+	componentWillLoad(): void;
+	private getClass;
+	render(): any;
+}

package/dist/types/components/ontario-fieldset/ontario-fieldset.interface.d.ts

@@ -0,0 +1,11 @@
+import { CaptionType } from '../../utils/common/input-caption/input-caption.types';
+export interface Fieldset {
+	/**
+	 * The text value used for the legend of the fieldset.
+	 */
+	legend: string;
+	/**
+	 * The size of the fieldset legend. If no prop is passed, it will be to `default`.
+	 */
+	legendSize: CaptionType;
+}

package/dist/types/components/ontario-footer/components/expanded-footer-wrapper.d.ts

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+import { SimpleFooterLinks } from '../ontario-footer-interface';
+export type ExpandedFooterWrapperProps = {
+	footerLinks: SimpleFooterLinks;
+	topMargin: boolean;
+	backgroundImagePath: string;
+};
+export declare const ExpandedFooterWrapper: FunctionalComponent<ExpandedFooterWrapperProps>;

package/dist/types/components/ontario-footer/components/footer-column-content.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+import { FooterColumnContent } from '../ontario-footer-interface';
+export type FooterColumnContentProps = {
+	content: FooterColumnContent;
+};
+export declare const ColumnContent: FunctionalComponent<FooterColumnContentProps>;

package/dist/types/components/ontario-footer/components/footer-column.d.ts

@@ -0,0 +1,10 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+import { FooterColumnData } from '../ontario-footer-interface';
+import { FooterSocialLinksProps } from './footer-social-links';
+export type FooterColumnProps = {
+	data: FooterColumnData;
+	socialLinks?: FooterSocialLinksProps;
+	isThreeColLayout?: boolean;
+	isFullWidthInMediumLayout?: boolean;
+};
+export declare const FooterColumn: FunctionalComponent<FooterColumnProps>;

package/dist/types/components/ontario-footer/components/footer-social-links.d.ts

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+export type FooterSocialLinksProps = {
+	facebook?: string;
+	twitter?: string;
+	instagram?: string;
+	youtube?: string;
+};
+export declare const FooterSocialLinks: FunctionalComponent<FooterSocialLinksProps>;

package/dist/types/components/ontario-footer/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './footer-social-links';
+export * from './simple-footer';
+export * from './footer-column';
+export * from './expanded-footer-wrapper';

package/dist/types/components/ontario-footer/components/simple-footer.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent } from '../../../stencil-public-runtime';
+import { SimpleFooterLinks } from '../ontario-footer-interface';
+type SimpleFooterProps = SimpleFooterLinks & {
+	className?: string;
+};
+export declare const SimpleFooter: FunctionalComponent<SimpleFooterProps>;
+export {};

package/dist/types/components/ontario-footer/ontario-footer-interface.d.ts

@@ -0,0 +1,43 @@
+export type OntarioFooterType = 'default' | 'twoColumn' | 'threeColumn';
+export interface FooterLink {
+	text?: string;
+	href: string;
+}
+export interface FooterLinks {
+	accessibilityLink?: Partial<FooterLink>;
+	privacyLink?: Partial<FooterLink>;
+	contactLink?: FooterLink;
+	printerLink?: Partial<FooterLink>;
+}
+export interface SimpleFooterLinks {
+	accessibilityLink: Required<FooterLink>;
+	privacyLink: Required<FooterLink>;
+	printerLink: Required<FooterLink>;
+	contactLink?: Required<FooterLink>;
+}
+export type FooterContentType = 'text' | 'list' | 'html';
+export type HeadingLevelType = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface FooterColumnContent {
+	heading?: string;
+	headingLevel?: HeadingLevelType;
+	type: FooterContentType;
+	text?: string;
+	html?: string | HTMLElement;
+	list?: string[];
+}
+export interface FooterColumnData {
+	title: string;
+	headingLevel?: HeadingLevelType;
+	content: Array<FooterColumnContent>;
+	button?: {
+		text: string;
+		link: string;
+	};
+}
+export interface TwoColumnOptions {
+	column1: FooterColumnData;
+	column2: FooterColumnData;
+}
+export interface ThreeColumnOptions extends TwoColumnOptions {
+	column3: FooterColumnData;
+}

package/dist/types/components/ontario-footer/ontario-footer.d.ts

@@ -0,0 +1,77 @@
+import { FooterLinks, OntarioFooterType, ThreeColumnOptions, TwoColumnOptions } from './ontario-footer-interface';
+import { FooterSocialLinksProps } from './components';
+import { Language } from '../../utils/common/language-types';
+export declare class OntarioFooter {
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
+	 */
+	language: Language;
+	/**
+	 * The type of footer to be rendered. If no prop is provided, it will default to the 'default' type.
+	 */
+	type: OntarioFooterType;
+	/**
+	 * A prop that stores the required links for all footers.
+	 * Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'
+	 */
+	footerLinks: FooterLinks | string;
+	/**
+	 * Social media links to render in the footer.
+	 * Available options are 'facebook', 'twitter', 'instagram' and 'youtube'
+	 */
+	socialLinks: FooterSocialLinksProps | string;
+	/**
+	 * Stores the titles and content for the expanded two column footer.
+	 */
+	twoColumnOptions?: TwoColumnOptions | string;
+	/**
+	 * Stores the titles and content for the expanded three column footer.
+	 */
+	threeColumnOptions?: ThreeColumnOptions | string;
+	/**
+	 * Top margin for the footer. By default, this prop is set to `true`, which adds a margin top value of `5rem`.
+	 * If set to `false`, the top margin value will be set to zero.
+	 */
+	topMargin: boolean;
+	/**
+	 * The base path to an assets folder containing the Design System assets
+	 */
+	assetBasePath: string;
+	translations: any;
+	private footerLinksState;
+	private socialLinksState;
+	private twoColumnState;
+	private threeColumnState;
+	/**
+	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is
+	 * connected to the DOM. It is used for the initial language when the input component loads.
+	 */
+	handleSetAppLanguage(event: CustomEvent<Language>): void;
+	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	private processFooterLinks;
+	private processSocialLinks;
+	private processTwoColumnOptions;
+	private processThreeColumnOptions;
+	private isTwoColumnLayout;
+	private isThreeColumnLayout;
+	private isExpandedLayout;
+	private verifyTwoColumnOptions;
+	private verifyThreeColumnOptions;
+	private parseOptions;
+	/**
+	 * Generate a link to the given image based on the base asset path.
+	 * @param imageName Name of the image to build the path to
+	 * @returns Path to image with asset path
+	 */
+	private getImageAssetSrcPath;
+	/**
+	 * Generate CSS url to the background image
+	 * @returns path to the background image
+	 */
+	private getBackgroundImagePath;
+	private getFooterClasses;
+	private getFooterLinks;
+	componentWillLoad(): void;
+	render(): any;
+}

package/dist/types/components/ontario-footer/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './ontario-footer-options-validation';

package/dist/types/components/ontario-footer/utils/ontario-footer-options-validation.d.ts

@@ -0,0 +1,3 @@
+import { TwoColumnOptions, ThreeColumnOptions } from '../ontario-footer-interface';
+export declare const isInvalidTwoColumnOptions: (options: TwoColumnOptions) => boolean;
+export declare const isInvalidThreeColumnOptions: (options: ThreeColumnOptions) => boolean;

package/dist/types/components/ontario-header/ontario-header.d.ts

@@ -0,0 +1,230 @@
+import { MenuItem, ApplicationHeaderInfo, LanguageToggleOptions, OntarioHeaderType } from './ontario-header.interface';
+import { Language } from '../../utils/common/language-types';
+export declare class OntarioHeader {
+	el: HTMLElement;
+	/**
+	 * The type of header.
+	 */
+	type?: OntarioHeaderType;
+	/**
+	 * Information pertaining to the application header. This is only necessary for the 'application' header type.
+	 *
+	 * This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
+	 *
+	 * @example
+	 *  <ontario-header
+	 *    type="application"
+	 *    application-header-info='{
+	 *      "title": "Application name",
+	 *      "href": "/application-homepage",
+	 *      "maxSubheaderDesktopLinks": "3",
+	 *      "maxSubheaderTabletLinks": "2",
+	 *      "maxSubheaderMobileLinks": "1"
+	 *    }'>
+	 *  </ontario-header>
+	 */
+	applicationHeaderInfo: ApplicationHeaderInfo | string;
+	/**
+	 * The items that will go inside the menu.
+	 */
+	menuItems: MenuItem[] | string;
+	/**
+	 * Option to disable fetching of the dynamic menu from the Ontario Header API
+	 *
+	 * @example
+	 * 	<ontario-header
+	 * 			type="ontario"
+	 * 			disable-dynamic-menu="false"
+	 *			menu-items='[{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			}]'>
+	 *	</ontario-header>
+	 */
+	disableDynamicMenu: boolean;
+	/**
+	 * Information pertaining to the language toggle links.
+	 *
+	 * @example
+	 * <ontario-header
+	 * 	language-toggle-options='{
+	 *    "englishLink": "/en",
+	 *    "frenchLink": "/fr"
+	 *  }'
+	 *  ...
+	 * >
+	 * </ontario-header>
+	 */
+	languageToggleOptions?: LanguageToggleOptions | string;
+	/**
+	 * A custom function to pass to the language toggle button.
+	 */
+	customLanguageToggle?: (event: globalThis.Event) => void;
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none is passed, it will default to English.
+	 */
+	language?: Language;
+	/**
+	 * The base path to an assets folder containing the Design System assets
+	 */
+	assetBasePath: string;
+	/**
+	 * The application header information is reassigned to applicationHeaderInfoState for parsing
+	 */
+	private applicationHeaderInfoState;
+	/**
+	 * The menuItems is reassigned to itemState for parsing
+	 *
+	 * @example
+	 * 	<ontario-header
+	 * 			type="ontario"
+	 * 			disable-dynamic-menu="true"
+	 *			menu-items='[{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			}]'>
+	 *	</ontario-header>
+	 */
+	private menuItemState;
+	/**
+	 * Check to see if menu is dynamic or static
+	 */
+	private isDynamicMenu;
+	/**
+	 * The languageToggleOptions is reassigned to languageState for parsing
+	 *
+	 * @example
+	 * 	<ontario-header
+	 *		language-toggle-options='{
+	 *			"englishLink":"/en",
+	 *			"frenchLink": "/fr"
+	 *		}'
+	 *	</ontario-header>
+	 */
+	private languageState;
+	/**
+	 * Toggler for the menu and the search button
+	 */
+	menuToggle: boolean;
+	searchToggle?: boolean;
+	/**
+	 * Assigning values to elements to use them as ref
+	 */
+	header: HTMLElement;
+	menuButton: HTMLElement;
+	menuButtonDesktop: HTMLElement;
+	menuButtonTablet: HTMLElement;
+	menuButtonMobile: HTMLElement;
+	searchBar: HTMLInputElement;
+	searchButton: HTMLInputElement;
+	translations: any;
+	private parseApplicationHeaderInfo;
+	parseMenuItems(): void;
+	private parseLanguage;
+	/**
+	 * Logic to close the menu when anything outside the menu is clicked
+	 */
+	handleClick(event: any): void;
+	/**
+	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 */
+	handleSetAppLanguage(event: CustomEvent<Language>): void;
+	/**
+	 * Logic to handle the menu toggling
+	 */
+	handleMenuToggle: () => void;
+	/**
+	 * Logic to handle the search toggling
+	 */
+	handleSearchToggle: () => void;
+	/**
+	 * event.preventDefault(): https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+	 * location.href: https://developer.mozilla.org/en-US/docs/Web/API/Location/href
+	 */
+	handleSubmit: (event: any) => void;
+	/**
+	 * Logic to make the focus go back to the menu button when the list ends
+	 */
+	trapMenuFocus: (e: any) => void;
+	/**
+	 * Call to Ontario Menu API to fetch linksets to populate header component
+	 */
+	fetchOntarioMenu(): Promise<void>;
+	/**
+	 * Generate a link to the given image based on the base asset path.
+	 * @param imageName Name of the image to build the path to
+	 * @returns Path to image with asset path
+	 */
+	private getImageAssetSrcPath;
+	/**
+	 * This function generates the menu items in a <li>, accordingly, to the given parameters.
+	 *
+	 * href and title are necessary, but rest are not.
+	 *
+	 * @param href - the href of the menu item
+	 * @param title - the title of the menu item
+	 * @param linkIsActive - when set to true, this will add the classes necessary to style the link in a way that indicates to the user what the active page/link is
+	 * @param liClass - if there is a class that is related to the <a> portion of the menu item, put it here
+	 * @param onClick - for any custom onClick event a user might want to add to their menu links
+	 * @param onBlur - when set to true, it will call the function trapMenuFocus(), otherwise nothing is done (used in lastLink)
+	 */
+	private generateMenuItem;
+	/**
+	 * This function generates the menu dropdown button for the ontario header component.
+	 *
+	 * @param viewportSize - the size of the screen where the function is being called. It can either be set to `desktop`, `tablet` or `mobile`. This dictates the classes used on the menu button, as well as the ref to keep the focus trapped when the menu is open.
+	 */
+	private renderMenuButton;
+	/**
+	 * A helper function to generate navigation dropdown links with onBlur functionality. This is used for the application header.
+	 *
+	 * @param item - the menu item to be looped over (contains the title and href)
+	 * @param index
+	 * @param links - the number of links associated with the maxSubheader[size]Links in the application header info prop. This will determine how many links should be displayed in the dropdown.
+	 * @param viewportSize - the size of the viewport. It can be set to `desktop`, `tablet` or `mobile`.
+	 * @returns
+	 */
+	private generateNavigationLinks;
+	/**
+	 * The onEscapePressed function clears the searchbar form when Escape is pressed
+	 */
+	private onEscapePressed;
+	private isMenuVisible;
+	componentWillLoad(): void;
+	componentDidRender(): void;
+	/**
+	 * Handles the focus when menu/toggle button is clicked.
+	 * When search button is clicked, the search bar is in focus,
+	 * when the closed button is clicked, the search button is back into focus.
+	 * When the menu is closed, the menu button should be out of focus.
+	 */
+	componentDidUpdate(): void;
+	render(): any;
+}