npm - @ongov/ontario-design-system-component-library - Versions diffs - 6.0.0-alpha.4 → 6.0.0-alpha.6 - Mend

@ongov/ontario-design-system-component-library 6.0.0-alpha.4 → 6.0.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1515) hide show

package/dist/collection/components/ontario-header/ontario-header.js CHANGED Viewed

@@ -1,14 +1,18 @@
 import { h } from '@stencil/core';
-import { Input } from '../../utils/common/input/input';
 import OntarioIconClose from '../ontario-icon/assets/ontario-icon-close-header.svg';
 import OntarioIconMenu from '../ontario-icon/assets/ontario-icon-menu-header.svg';
 import OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';
 import OntarioIconSearchWhite from '../ontario-icon/assets/ontario-icon-search-white.svg';
 import OntarioHeaderDefaultData from './ontario-header-default-data.json';
-import { getImageAssetSrcPath } from '../../utils/helper/assets';
-import { validateLanguage } from '../../utils/validation/validation-functions';
+import { DeviceTypes } from '../../utils/common/common.enum';
+import { isClientSideRendering } from '../../utils/common/environment';
+import { Input } from '../../utils/common/input/input';
+import { generateMenuItem } from '../../utils/components/header/header-menu-items';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { ConsoleType } from '../../utils/console-message/console-message.enum';
+import { getImageAssetSrcPath } from '../../utils/helper/assets';
+import { determineDeviceType } from '../../utils/helper/utils';
+import { validateLanguage } from '../../utils/validation/validation-functions';
 import translations from '../../translations/global.i18n.json';
 import config from '../../config.json';
 export class OntarioHeader {
@@ -56,14 +60,15 @@ export class OntarioHeader {
 		/**
 		 * Toggler for the menu and the search button
 		 */
-		this.menuToggle = false;
+		this.menuToggled = false;
 		this.searchToggle = false;
 		this.translations = translations;
 		/**
 		 * Logic to handle the menu toggling
 		 */
-		this.handleMenuToggle = () => {
-			this.menuToggle = !this.menuToggle;
+		this.handlemenuToggled = () => {
+			this.menuToggled = !this.menuToggled;
+			this.menuButtonToggled.emit(this.menuToggled);
 			this.searchToggle = undefined;
 		};
 		/**
@@ -80,22 +85,6 @@ export class OntarioHeader {
 			event.preventDefault();
 			location.href = `${this.translations.header.ontarioSearchURL[`${this.language}`]}${event.target[0].value}`;
 		};
-		/**
-		 * Logic to make the focus go back to the menu button when the list ends
-		 */
-		this.trapMenuFocus = (e) => {
-			var _a;
-			let dataType = (_a = e.target) === null || _a === void 0 ? void 0 : _a.dataset.type;
-			if (dataType === 'app-desktop') {
-				this.menuButtonDesktop.focus();
-			} else if (dataType === 'app-tablet') {
-				this.menuButtonTablet.focus();
-			} else if (dataType === 'app-mobile') {
-				this.menuButtonMobile.focus();
-			} else {
-				this.menuButton.focus();
-			}
-		};
 		/**
 		 * Hydration Guard Flag
 		 *
@@ -189,21 +178,38 @@ export class OntarioHeader {
 			}; // fallback on error
 		}
 	}
+	handleKeyDown(event) {
+		if (this.menuToggled && event.key === 'Escape') {
+			this.menuToggled = false;
+			this.menuButtonToggled.emit(this.menuToggled);
+			this.focusMenuButton();
+		}
+	}
 	/**
 	 * Logic to close the menu when anything outside the menu is clicked
 	 */
 	handleClick(event) {
 		// if the button is clicked, return
-		if (
-			event.composedPath().includes(this.menuButton) ||
-			event.composedPath().includes(this.menuButtonDesktop) ||
-			event.composedPath().includes(this.menuButtonTablet) ||
-			event.composedPath().includes(this.menuButtonMobile)
-		) {
+		if (event.composedPath().includes(this.menuButton)) {
 			return;
 		}
 		// If the click was outside the current component, do the following
-		if (this.menuToggle) this.menuToggle = !this.menuToggle;
+		if (this.menuToggled) this.menuToggled = !this.menuToggled;
+	}
+	/**
+	 * Logic to close the menu when the focus leaves the menu
+	 */
+	handleFocusOut(event) {
+		if (this.menuToggled && !this.el.contains(event.relatedTarget)) {
+			this.menuToggled = false;
+			this.menuButtonToggled.emit(this.menuToggled);
+		}
+	}
+	/**
+	 * Logic to set breakpointDeviceState to the appropriate device when the screen resizes
+	 */
+	handleResize() {
+		this.breakpointDeviceState = isClientSideRendering() ? determineDeviceType() : DeviceTypes.Desktop;
 	}
 	/**
 	 * This listens for the `setAppLanguage` event sent from the language toggle when it is is connected to the DOM.
@@ -220,6 +226,12 @@ export class OntarioHeader {
 	handleLanguageToggle(event) {
 		this.handleSetAppLanguage(event.detail.newLanguage);
 	}
+	/**
+	 * Logic to make the focus go back to the menu button when the list ends
+	 */
+	focusMenuButton() {
+		this.menuButton.focus();
+	}
 	/**
 	 * Call to Ontario Menu API to fetch linksets to populate header component
 	 */
@@ -260,35 +272,6 @@ export class OntarioHeader {
 	getImageAssetSrcPath(imageName) {
 		return getImageAssetSrcPath(imageName, this.assetBasePath);
 	}
-	/**
-	 * 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)
-	 */
-	generateMenuItem(href, title, linkIsActive, type, liClass, onClick, onBlur) {
-		return h(
-			'li',
-			{ class: liClass },
-			h(
-				'a',
-				{
-					'class': linkIsActive === true ? `ontario-link--active` : ``,
-					'href': href,
-					'onClick': onClick,
-					'onBlur': onBlur ? this.trapMenuFocus : undefined,
-					'data-type': type,
-				},
-				title,
-			),
-		);
-	}
 	/**
 	 * This function generates the menu dropdown button for the ontario header component.
 	 *
@@ -301,59 +284,24 @@ export class OntarioHeader {
 		return h(
 			'button',
 			{
-				'class':
-					viewportSize === 'desktop'
-						? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-large'
-						: viewportSize === 'tablet'
-							? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large'
-							: viewportSize === 'mobile'
-								? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-small-only'
-								: 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline',
+				'class': 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline',
 				'id': this.type === 'ontario' ? 'ontario-header-menu-toggler' : 'ontario-application-header-menu-toggler',
 				'aria-controls': 'ontario-navigation',
-				'aria-label': this.menuToggle
+				'aria-label': this.menuToggled
 					? this.translations.header.closeMenu[`${this.language}`]
 					: this.translations.header.openMenu[`${this.language}`],
-				'onClick': this.handleMenuToggle,
+				'aria-expanded': this.menuToggled ? 'true' : 'false',
+				'onClick': this.handlemenuToggled,
 				'type': 'button',
-				'ref':
-					viewportSize === 'desktop'
-						? (el) => (this.menuButtonDesktop = el)
-						: viewportSize === 'tablet'
-							? (el) => (this.menuButtonTablet = el)
-							: viewportSize === 'mobile'
-								? (el) => (this.menuButtonMobile = el)
-								: (el) => (this.menuButton = el),
+				'ref': (el) => (this.menuButton = el),
 			},
 			h('span', {
 				class: 'ontario-header__icon-container',
-				innerHTML: this.menuToggle ? OntarioIconClose : OntarioIconMenu,
+				innerHTML: this.menuToggled ? OntarioIconClose : OntarioIconMenu,
 			}),
 			h('span', null, 'Menu'),
 		);
 	}
-	/**
-	 * 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
-	 */
-	generateNavigationLinks(item, index, links, viewportSize) {
-		const lastLink =
-			index + 1 === (links ? this.menuItemState.length - links : this.menuItemState.length) ? true : false;
-		return this.generateMenuItem(
-			item.href,
-			item.title,
-			item.linkIsActive,
-			viewportSize,
-			'',
-			item.onClickHandler,
-			lastLink,
-		);
-	}
 	/**
 	 * The onEscapePressed function clears the searchbar form when Escape is pressed
 	 */
@@ -363,38 +311,36 @@ export class OntarioHeader {
 		}
 	}
 	isMenuVisible(viewportSize) {
-		var _a;
-		const { menuItemState, applicationHeaderInfoState } = this;
-		const { maxSubheaderMobileLinks, maxSubheaderTabletLinks, maxSubheaderDesktopLinks } =
-			applicationHeaderInfoState !== null && applicationHeaderInfoState !== void 0 ? applicationHeaderInfoState : {};
-		const numOfMenuItems =
-			(_a = menuItemState === null || menuItemState === void 0 ? void 0 : menuItemState.length) !== null &&
-			_a !== void 0
+		var _a, _b;
+		if (this.type !== 'ontario') {
+			const { menuItemState, applicationHeaderInfoState } = this;
+			const {
+				mobile = 0,
+				tablet = 0,
+				desktop = 0,
+			} = (_a =
+				applicationHeaderInfoState === null || applicationHeaderInfoState === void 0
+					? void 0
+					: applicationHeaderInfoState.maxSubheaderLinks) !== null && _a !== void 0
 				? _a
-				: 0;
-		if (numOfMenuItems <= 0) {
-			return false;
-		}
-		if (viewportSize === 'mobile') {
-			return (
-				numOfMenuItems -
-					(maxSubheaderMobileLinks !== null && maxSubheaderMobileLinks !== void 0 ? maxSubheaderMobileLinks : 0) >
-				0
-			);
-		}
-		if (viewportSize === 'tablet') {
-			return (
-				numOfMenuItems -
-					(maxSubheaderTabletLinks !== null && maxSubheaderTabletLinks !== void 0 ? maxSubheaderTabletLinks : 0) >
-				0
-			);
-		}
-		if (viewportSize === 'desktop') {
-			return (
-				numOfMenuItems -
-					(maxSubheaderDesktopLinks !== null && maxSubheaderDesktopLinks !== void 0 ? maxSubheaderDesktopLinks : 0) >
-				0
-			);
+				: {};
+			const numOfMenuItems =
+				(_b = menuItemState === null || menuItemState === void 0 ? void 0 : menuItemState.length) !== null &&
+				_b !== void 0
+					? _b
+					: 0;
+			if (numOfMenuItems <= 0) {
+				return false;
+			}
+			if (viewportSize === DeviceTypes.Mobile) {
+				return numOfMenuItems - mobile > 0;
+			}
+			if (viewportSize === DeviceTypes.Tablet) {
+				return numOfMenuItems - tablet > 0;
+			}
+			if (viewportSize === DeviceTypes.Desktop) {
+				return numOfMenuItems - desktop > 0;
+			}
 		}
 		return true;
 	}
@@ -410,22 +356,21 @@ export class OntarioHeader {
 		if (this.isHydrated && this.disableDynamicMenu === false && this.type === 'ontario') {
 			this.fetchOntarioMenu();
 		}
+		this.handleResize();
 	}
 	/**
-	 * Handles the focus when menu/toggle button is clicked.
+	 * Handles the search focus when the search 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() {
 		if (this.type == 'ontario') {
 			if (this.searchToggle === true) this.searchBar.focus();
 			if (this.searchToggle === false) this.searchButton.focus();
-			if (this.menuToggle === false) this.menuButton.blur();
 		}
 	}
 	render() {
-		var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+		var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
 		const isServiceOntarioType = this.type === 'serviceOntario';
 		if (this.type == 'ontario') {
 			return h(
@@ -564,50 +509,9 @@ export class OntarioHeader {
 							),
 						),
 					),
-					h(
-						'nav',
-						{
-							role: 'navigation',
-							class: this.menuToggle ? 'ontario-navigation ontario-navigation--open' : 'ontario-navigation',
-							id: 'ontario-navigation',
-						},
-						h(
-							'div',
-							{ class: 'ontario-navigation__container' },
-							h(
-								'ul',
-								null,
-								(_c = this.menuItemState) === null || _c === void 0
-									? void 0
-									: _c.map((item, index) => {
-											const lastLink = index + 1 === this.menuItemState.length;
-											const activeLinkRegex = item.title.replace(/\s+/g, '-').toLowerCase();
-											const linkIsActive = window.location.pathname.includes(activeLinkRegex);
-											return this.isDynamicMenu
-												? this.generateMenuItem(
-														item.href,
-														item.title,
-														linkIsActive,
-														'ontario-header',
-														'ontario-header-navigation__menu-item',
-														undefined,
-														lastLink,
-													)
-												: this.generateMenuItem(
-														item.href,
-														item.title,
-														item.linkIsActive,
-														'ontario-header',
-														'ontario-header-navigation__menu-item',
-														item.onClickHandler,
-														lastLink,
-													);
-										}),
-							),
-						),
-					),
+					h('ontario-header-overflow-menu', { menuItems: this.menuItemState }),
 				),
-				this.menuToggle && h('div', { class: 'ontario-hide-for-large ontario-overlay' }),
+				this.menuToggled && h('div', { class: 'ontario-hide-for-large ontario-overlay' }),
 			);
 		} else {
 			return h(
@@ -645,12 +549,12 @@ export class OntarioHeader {
 									size: 'small',
 									url:
 										this.language === 'en'
-											? (_d = this.languageState) === null || _d === void 0
+											? (_c = this.languageState) === null || _c === void 0
 												? void 0
-												: _d.frenchLink
-											: (_e = this.languageState) === null || _e === void 0
+												: _c.frenchLink
+											: (_d = this.languageState) === null || _d === void 0
 												? void 0
-												: _e.englishLink,
+												: _d.englishLink,
 									customLanguageToggle: this.customLanguageToggle,
 								}),
 							),
@@ -674,14 +578,14 @@ export class OntarioHeader {
 												{ class: 'ontario-application-subheader__heading' },
 												h(
 													'a',
-													{ href: (_f = this.applicationHeaderInfoState) === null || _f === void 0 ? void 0 : _f.href },
-													(_g = this.applicationHeaderInfoState) === null || _g === void 0 ? void 0 : _g.title,
+													{ href: (_e = this.applicationHeaderInfoState) === null || _e === void 0 ? void 0 : _e.href },
+													(_f = this.applicationHeaderInfoState) === null || _f === void 0 ? void 0 : _f.title,
 												),
 											)
 										: h(
 												'a',
 												{
-													href: (_h = this.applicationHeaderInfoState) === null || _h === void 0 ? void 0 : _h.href,
+													href: (_g = this.applicationHeaderInfoState) === null || _g === void 0 ? void 0 : _g.href,
 													class: 'ontario-service-subheader__link',
 												},
 												h(
@@ -695,204 +599,67 @@ export class OntarioHeader {
 													h(
 														'p',
 														{ class: 'ontario-service-subheader__description' },
-														(_j = this.applicationHeaderInfoState) === null || _j === void 0 ? void 0 : _j.title,
+														(_h = this.applicationHeaderInfoState) === null || _h === void 0 ? void 0 : _h.title,
 													),
 												),
 											),
 									h(
 										'div',
 										{ class: 'ontario-application-subheader__menu-container' },
-										!!((_k = this.applicationHeaderInfoState) === null || _k === void 0
+										!!((_k =
+											(_j = this.applicationHeaderInfoState) === null || _j === void 0
+												? void 0
+												: _j.maxSubheaderLinks) === null || _k === void 0
 											? void 0
-											: _k.maxSubheaderDesktopLinks) &&
+											: _k[this.breakpointDeviceState]) &&
 											h(
 												'ul',
-												{
-													class: `${
-														isServiceOntarioType
-															? 'ontario-service-subheader__menu'
-															: 'ontario-application-subheader__menu'
-													} ontario-show-for-large`,
-												},
+												{ class: 'ontario-application-subheader__menu' },
 												(_l = this.menuItemState) === null || _l === void 0
 													? void 0
 													: _l
 															.slice(
 																0,
-																(_m = this.applicationHeaderInfoState) === null || _m === void 0
+																(_o =
+																	(_m = this.applicationHeaderInfoState) === null || _m === void 0
+																		? void 0
+																		: _m.maxSubheaderLinks) === null || _o === void 0
 																	? void 0
-																	: _m.maxSubheaderDesktopLinks,
+																	: _o[this.breakpointDeviceState],
 															)
 															.map((item) =>
-																this.generateMenuItem(
-																	item.href,
-																	item.title,
-																	item.linkIsActive,
-																	'app-desktop',
-																	'',
-																	item.onClickHandler,
-																),
+																generateMenuItem(item.href, item.title, item.linkIsActive, '', item.onClickHandler),
 															),
 											),
-										!!((_o = this.applicationHeaderInfoState) === null || _o === void 0
-											? void 0
-											: _o.maxSubheaderTabletLinks) &&
-											h(
-												'ul',
-												{
-													class:
-														'ontario-application-subheader__menu ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large',
-												},
-												(_p = this.menuItemState) === null || _p === void 0
-													? void 0
-													: _p
-															.slice(
-																0,
-																(_q = this.applicationHeaderInfoState) === null || _q === void 0
-																	? void 0
-																	: _q.maxSubheaderTabletLinks,
-															)
-															.map((item) =>
-																this.generateMenuItem(
-																	item.href,
-																	item.title,
-																	item.linkIsActive,
-																	'app-tablet',
-																	'',
-																	item.onClickHandler,
-																),
-															),
-											),
-										!!((_r = this.applicationHeaderInfoState) === null || _r === void 0
-											? void 0
-											: _r.maxSubheaderMobileLinks) &&
-											h(
-												'ul',
-												{ class: 'ontario-application-subheader__menu ontario-show-for-small-only' },
-												(_s = this.menuItemState) === null || _s === void 0
-													? void 0
-													: _s
-															.slice(0, this.applicationHeaderInfoState.maxSubheaderMobileLinks)
-															.map((item) =>
-																this.generateMenuItem(
-																	item.href,
-																	item.title,
-																	item.linkIsActive,
-																	'app-mobile',
-																	'',
-																	item.onClickHandler,
-																),
-															),
-											),
-										this.menuItemState !== undefined &&
-											((_t = this.applicationHeaderInfoState) === null || _t === void 0
-												? void 0
-												: _t.maxSubheaderDesktopLinks) !== this.menuItemState.length &&
-											this.renderMenuButton('desktop'),
-										this.menuItemState !== undefined &&
-											((_u = this.applicationHeaderInfoState) === null || _u === void 0
-												? void 0
-												: _u.maxSubheaderTabletLinks) !== this.menuItemState.length &&
-											this.renderMenuButton('tablet'),
 										this.menuItemState !== undefined &&
-											((_v = this.applicationHeaderInfoState) === null || _v === void 0
+											((_q =
+												(_p = this.applicationHeaderInfoState) === null || _p === void 0
+													? void 0
+													: _p.maxSubheaderLinks) === null || _q === void 0
 												? void 0
-												: _v.maxSubheaderMobileLinks) !== this.menuItemState.length &&
-											this.renderMenuButton('mobile'),
+												: _q[this.breakpointDeviceState]) !== this.menuItemState.length &&
+											this.renderMenuButton(''),
 									),
 								),
 							),
 						),
-						h(
-							'nav',
-							{
-								role: 'navigation',
-								class:
-									this.menuToggle === true
-										? 'ontario-application-navigation ontario-navigation--open'
-										: 'ontario-application-navigation',
-								id: 'ontario-application-navigation',
-							},
-							h(
-								'div',
-								{ class: 'ontario-application-navigation__container' },
-								h(
-									'ul',
-									{ class: 'ontario-show-for-large' },
-									(_w = this.menuItemState) === null || _w === void 0
-										? void 0
-										: _w
-												.slice(
-													(_x = this.applicationHeaderInfoState) === null || _x === void 0
-														? void 0
-														: _x.maxSubheaderDesktopLinks,
-													this.menuItemState.length,
-												)
-												.map((item, index) => {
-													var _a;
-													return this.generateNavigationLinks(
-														item,
-														index,
-														(_a = this.applicationHeaderInfoState) === null || _a === void 0
-															? void 0
-															: _a.maxSubheaderDesktopLinks,
-														'app-desktop',
-													);
-												}),
-								),
-								h(
-									'ul',
-									{ class: 'ontario-show-for-medium ontario-hide-for-small ontario-hide-for-large' },
-									(_y = this.menuItemState) === null || _y === void 0
-										? void 0
-										: _y
-												.slice(
-													(_z = this.applicationHeaderInfoState) === null || _z === void 0
-														? void 0
-														: _z.maxSubheaderTabletLinks,
-													this.menuItemState.length,
-												)
-												.map((item, index) => {
-													var _a;
-													return this.generateNavigationLinks(
-														item,
-														index,
-														(_a = this.applicationHeaderInfoState) === null || _a === void 0
-															? void 0
-															: _a.maxSubheaderTabletLinks,
-														'app-tablet',
-													);
-												}),
-								),
-								h(
-									'ul',
-									{ class: 'ontario-show-for-small-only' },
-									(_0 = this.menuItemState) === null || _0 === void 0
-										? void 0
-										: _0
-												.slice(
-													(_1 = this.applicationHeaderInfoState) === null || _1 === void 0
-														? void 0
-														: _1.maxSubheaderMobileLinks,
-													this.menuItemState.length,
-												)
-												.map((item, index) => {
-													var _a;
-													return this.generateNavigationLinks(
-														item,
-														index,
-														(_a = this.applicationHeaderInfoState) === null || _a === void 0
-															? void 0
-															: _a.maxSubheaderMobileLinks,
-														'app-mobile',
-													);
-												}),
-								),
-							),
-						),
+						h('ontario-header-overflow-menu', {
+							menuItems:
+								(_r = this.menuItemState) === null || _r === void 0
+									? void 0
+									: _r.slice(
+											(_t =
+												(_s = this.applicationHeaderInfoState) === null || _s === void 0
+													? void 0
+													: _s.maxSubheaderLinks) === null || _t === void 0
+												? void 0
+												: _t[this.breakpointDeviceState],
+											this.menuItemState.length,
+										),
+						}),
 					),
 				),
-				this.menuToggle && h('div', { class: 'ontario-hide-for-large ontario-overlay' }),
+				this.menuToggled && h('div', { class: 'ontario-hide-for-large ontario-overlay' }),
 			);
 		}
 	}
@@ -964,7 +731,7 @@ export class OntarioHeader {
 					tags: [
 						{
 							name: 'example',
-							text: ' <ontario-header\n   type="application"\n   application-header-info=\'{\n     "title": "Application name",\n     "href": "/application-homepage",\n     "maxSubheaderDesktopLinks": "3",\n     "maxSubheaderTabletLinks": "2",\n     "maxSubheaderMobileLinks": "1"\n   }\'>\n </ontario-header>',
+							text: ' <ontario-header\n   type="application"\n   application-header-info=\'{\n     "title": "Application name",\n     "href": "/application-homepage",\n\t"maxSubheaderLinks": {\n\t\t"desktop": "3",\n\t\t"tablet": "2",\n\t\t"mobile": "1"\n\t}\n   }\'\n>\n </ontario-header>',
 						},
 					],
 					text: "Information pertaining to the application header. This is only necessary for the 'application' header type.\n\nThis includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.",
@@ -983,8 +750,8 @@ export class OntarioHeader {
 					references: {
 						MenuItem: {
 							location: 'import',
-							path: './ontario-header.interface',
-							id: 'src/components/ontario-header/ontario-header.interface.ts::MenuItem',
+							path: '../../utils/common/common.interface',
+							id: 'src/utils/common/common.interface.ts::MenuItem',
 						},
 					},
 				},
@@ -1129,11 +896,32 @@ export class OntarioHeader {
 			menuItemState: {},
 			isDynamicMenu: {},
 			languageState: {},
-			menuToggle: {},
+			menuToggled: {},
 			searchToggle: {},
 			translations: {},
+			breakpointDeviceState: {},
 		};
 	}
+	static get events() {
+		return [
+			{
+				method: 'menuButtonToggled',
+				name: 'menuButtonToggled',
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				docs: {
+					tags: [],
+					text: 'This event is toggled when the menu button is pressed.\nThe <ontario-header-overflow-menu> sub-component listens for this event\nTo trigger the showing and hiding of the overflow menu.',
+				},
+				complexType: {
+					original: 'boolean',
+					resolved: 'boolean',
+					references: {},
+				},
+			},
+		];
+	}
 	static get elementRef() {
 		return 'el';
 	}
@@ -1155,6 +943,13 @@ export class OntarioHeader {
 	}
 	static get listeners() {
 		return [
+			{
+				name: 'keydown',
+				method: 'handleKeyDown',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
 			{
 				name: 'click',
 				method: 'handleClick',
@@ -1162,6 +957,20 @@ export class OntarioHeader {
 				capture: true,
 				passive: false,
 			},
+			{
+				name: 'focusout',
+				method: 'handleFocusOut',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+			{
+				name: 'resize',
+				method: 'handleResize',
+				target: 'window',
+				capture: false,
+				passive: true,
+			},
 			{
 				name: 'setAppLanguage',
 				method: 'handleSetAppLanguage',
@@ -1176,6 +985,13 @@ export class OntarioHeader {
 				capture: false,
 				passive: false,
 			},
+			{
+				name: 'endOfMenuReached',
+				method: 'focusMenuButton',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
 		];
 	}
 }