@aarhus-university/au-designsystem-delphinus 0.26.6 → 0.26.7

package/CHANGELOG.md

@@ -1,7 +1,15 @@
+## 0.26.7 (June 21, 2022)
+
+### Core Delphinus Updates
+* Return types on navigational functions for useEffect in React 18.
+### Delphinus Projects Updates
+None
 ## 0.26.6 (June 21, 2022)
 
 ### Core Delphinus Updates
 * Removal of event listeners (before re-adding) in scripts in preparation for StrictMode in React 18.
+### Delphinus Projects Updates
+None
 
 ## 0.26.5 (June 20, 2022)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aarhus-university/au-designsystem-delphinus",
   "sideEffects": false,
-  "version": "0.26.6",
+  "version": "0.26.7",
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",

package/source/js/components/nav.ts

@@ -27,7 +27,7 @@ const closeResponsiveNav = (navElements: NodeListOf<Element>, keepOpen: HTMLElem
   });
 };
 
-const setResponsiveToggle = (navElements: NodeListOf<Element>): void => {
+const setResponsiveToggle = (navElements: NodeListOf<Element>): CleanUpPair[] => {
   const toggleMenu = (button: HTMLElement) => {
     const parent = findNav(button);
 
@@ -49,6 +49,8 @@ const setResponsiveToggle = (navElements: NodeListOf<Element>): void => {
     return parent;
   };
 
+  const cleanUp: CleanUpPair[] = [];
+
   const toggle = document.querySelectorAll('.nav__toggle');
   toggle.forEach((button) => {
     const clickEvent = () => {
@@ -57,12 +59,22 @@ const setResponsiveToggle = (navElements: NodeListOf<Element>): void => {
       button.setAttribute('aria-expanded', ariaExpanded === 'false' ? 'true' : 'false');
       closeResponsiveNav(navElements, nav);
     };
-    button.removeEventListener('click', clickEvent);
+
+    cleanUp.push({
+      element: button,
+      clickEvent,
+    });
+
     button.addEventListener('click', clickEvent);
   });
+
+  return cleanUp;
 };
 
-const setResponsiveNav = (navElements: NodeListOf<Element>, navElement: Element): void => {
+const setResponsiveNav = (
+  navElements: NodeListOf<Element>,
+  navElement: Element,
+): SetResponsiveNavCleanUp => {
   const navToggledClass = 'nav--toggled';
   const navItemsClass = 'nav__items';
   // gitlab #117
@@ -99,17 +111,19 @@ const setResponsiveNav = (navElements: NodeListOf<Element>, navElement: Element)
   }
 
   // gitlab #115
-  const bodyClickEvent = (e: MouseEvent): void => {
+  const bodyClickEvent = (e: MouseEvent) => {
     if (!(e.target as HTMLElement).classList.contains('nav__toggle')
       && !isElementWithClassNameInEventPath(e, navItemsClass)) {
       closeResponsiveNav(navElements);
     }
   };
-  const body = document.querySelector('body');
-  if (body) {
-    body.removeEventListener('click', bodyClickEvent);
-    body.addEventListener('click', bodyClickEvent);
-  }
+
+  document.querySelector('body')?.addEventListener('click', bodyClickEvent);
+
+  return {
+    element: document.querySelector('body'),
+    clickEvent: bodyClickEvent,
+  };
 };
 
 const closeSubNav = (buttons: NodeListOf<Element>, keepOpen: Element | null = null) => {
@@ -125,9 +139,9 @@ const closeSubNav = (buttons: NodeListOf<Element>, keepOpen: Element | null = nu
   });
 };
 
-const setSubNavToggle = (buttons: NodeListOf<Element>, button: Element): void => {
+const setSubNavToggle = (buttons: NodeListOf<Element>, button: Element): SetSubNavToggleCleanUp => {
   const subNavClass = 'sub-nav--toggled';
-  const clickEvent = () => {
+  const buttonClickEvent = () => {
     button?.parentElement?.classList.toggle(subNavClass);
     if (button?.parentElement?.classList.contains(subNavClass)) {
       button.setAttribute('aria-expanded', 'true');
@@ -136,8 +150,8 @@ const setSubNavToggle = (buttons: NodeListOf<Element>, button: Element): void =>
     }
     closeSubNav(buttons, button);
   };
-  button.removeEventListener('click', clickEvent);
-  button.addEventListener('click', clickEvent);
+
+  button.addEventListener('click', buttonClickEvent);
 
   // gitlab #115
   const bodyClickEvent = (e: MouseEvent) => {
@@ -145,11 +159,13 @@ const setSubNavToggle = (buttons: NodeListOf<Element>, button: Element): void =>
       closeSubNav(buttons);
     }
   };
-  const body = document.querySelector('body');
-  if (body) {
-    body.removeEventListener('click', bodyClickEvent);
-    body.addEventListener('click', bodyClickEvent);
-  }
+
+  document.querySelector('body')?.addEventListener('click', bodyClickEvent);
+  return {
+    buttonClickEvent,
+    element: document.querySelector('body'),
+    bodyClickEvent,
+  };
 };
 
 const setCopyToClipboard = (lang = 'da'): void => {

package/source/js/components/selection-list.ts

@@ -10,7 +10,8 @@ const removeOverlay = (containers: NodeListOf<Element>): void => {
   });
 };
 
-const setSelectionListOverlays = (): void => {
+const setSelectionListOverlays = (): setSelectionListOverlaysCleanUp => {
+  const cleanUp: CleanUpPair[] = [];
   const containers = document.querySelectorAll('.selection-list-overlay-container');
   containers.forEach((container) => {
     const btn = container.querySelector('button') as HTMLElement; // Assumes only one button pr container
@@ -21,7 +22,11 @@ const setSelectionListOverlays = (): void => {
         sibling.classList.add('selection-list--toggled');
       }
     };
-    btn.removeEventListener('click', clickEvent);
+    cleanUp.push({
+      element: btn,
+      clickEvent,
+    });
+
     btn.addEventListener('click', clickEvent);
   });
 
@@ -32,6 +37,12 @@ const setSelectionListOverlays = (): void => {
     }
   };
   document.querySelector('body')?.addEventListener('click', bodyClickEvent);
+
+  return {
+    pairs: cleanUp,
+    element: document.querySelector('body'),
+    clickEvent: bodyClickEvent,
+  };
 };
 
 export {

package/source/js/components/toolbar.ts

@@ -40,7 +40,8 @@ const setToolbars = (): void => {
   });
 };
 
-const setToolbarToggle = (): void => {
+const setToolbarToggle = (): CleanUpPair[] => {
+  const cleanUp: CleanUpPair[] = [];
   const buttons = document.querySelectorAll('.toolbar .toolbar__toggle');
   buttons.forEach((button) => {
     const clickEvent = () => {
@@ -55,9 +56,13 @@ const setToolbarToggle = (): void => {
       button.setAttribute('aria-expanded', ariaExpanded === 'false' ? 'true' : 'false');
     };
 
-    button.removeEventListener('click', clickEvent);
+    cleanUp.push({
+      element: button,
+      clickEvent,
+    });
     button.addEventListener('click', clickEvent);
   });
+  return cleanUp;
 };
 
 export {

package/types/common/main.d.ts

@@ -1,2 +1,3 @@
 /* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path="./interfaces.d.ts" />
+/// <reference path="./payloads.d.ts" />

package/types/common/payloads.d.ts

@@ -0,0 +1,21 @@
+interface CleanUpPair {
+  element: Element,
+  clickEvent: () => void,
+}
+
+interface SetResponsiveNavCleanUp {
+  element: Element | null,
+  clickEvent: (event: MouseEvent) => void,
+}
+
+interface SetSubNavToggleCleanUp {
+  buttonClickEvent: () => void,
+  element: Element | null,
+  bodyClickEvent: (e: MouseEvent) => void,
+}
+
+interface setSelectionListOverlaysCleanUp {
+  pairs: CleanUpPair[],
+  element: Element | null,
+  clickEvent: (event: MouseEvent) => void,
+}