feat(ui): use Drawer from nl ds package

packages/ui/package.json

@@ -41,6 +41,7 @@
     "@rollup/plugin-json": "6.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.6",
+    "@types/lodash.kebabcase": "4.1.9",
     "@types/react-dom": "18.2.19",
     "@utrecht/component-library-react": "3.0.1-alpha.19",
     "@utrecht/web-component-library-react": "1.0.3-alpha.19",
@@ -53,13 +54,11 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-scss": "4.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-typescript2": "0.35.0",
-    "@types/lodash.kebabcase": "4.1.9"
+    "rollup-plugin-typescript2": "0.35.0"
   },
   "dependencies": {
-    "focus-trap-react": "10.2.3",
+    "lodash.kebabcase": "4.1.1",
     "react-markdown": "9.0.1",
-    "rehype-raw": "7.0.0",
-    "lodash.kebabcase": "4.1.1"
+    "rehype-raw": "7.0.0"
   }
 }

packages/ui/src/components/Navigation/NavigationList/index.module.scss

@@ -23,10 +23,6 @@
 
   background-color: var(--utrecht-navigation-list-mobile-background-color, var(--utrecht-color-white));
   block-size: 100%;
-
-  @media (width >= 550px) {
-    --utrecht-navigation-list-mobile-inline-size: 50%;
-  }
 }
 
 .utrecht-navigation__list--side-nav {

packages/ui/src/components/Navigation/index.module.scss

@@ -1,3 +1,5 @@
+@import "../Grid/index.module";
+
 .utrecht-navigation {
   border-block-end-color: var(--utrecht-navigation-border-block-end-color);
   border-block-end-style: solid;
@@ -22,3 +24,17 @@
   inline-size: 100%;
   justify-content: var(--utrecht-navigation-mobile-justify-content, flex-start);
 }
+
+.utrecht-drawer--nav {
+  --utrecht-drawer-min-inline-size: 100%;
+}
+
+.utrecht-drawer--nav::backdrop {
+  --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
+}
+
+@include breakpoint("sm") {
+  .utrecht-drawer--nav {
+    --utrecht-drawer-min-inline-size: 50%;
+  }
+}

packages/ui/src/components/Navigation/index.tsx

@@ -1,11 +1,19 @@
+import { Drawer } from '@utrecht/component-library-react';
 import classnames from 'classnames/bind';
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import {
+  createRef,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { NavigationList } from './NavigationList';
 import { NavToggleButton } from './NavigationToggleButton';
 import styles from './index.module.scss';
-import { useClickOutside, useKeyboardEvent, useScreenSize } from '../../hooks';
-import { Drawer } from '../Drawer';
-import { Portal } from '../Portal';
+import { useClickOutside, useScreenSize } from '../../hooks';
 const css = classnames.bind(styles);
 
 export type NavigationListType = {
@@ -32,17 +40,31 @@ export const Navigation = forwardRef(
     const screenSize = useScreenSize();
     const [visible, setVisible] = useState<boolean>(false);
     const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
-    const navigationListRef = useRef<HTMLUListElement>(null);
-    useKeyboardEvent('Escape', () => setDrawerVisible(false));
-    useClickOutside(navigationListRef, () => setDrawerVisible(false));
+    const navigationListRef = createRef<HTMLUListElement>();
+    const drawerRef = useRef<HTMLDialogElement>(null);
+    const hamburgerButtonRef = useRef<HTMLButtonElement>(null);
 
-    useEffect(() => {
+    useClickOutside(drawerRef, hamburgerButtonRef);
+
+    const showModal = () => {
+      if (drawerRef.current) {
+        if (drawerRef.current.open) {
+          drawerRef.current.close();
+          setDrawerVisible(false);
+        } else {
+          setDrawerVisible(true);
+          drawerRef.current.showModal();
+        }
+      }
+    };
+
+    useLayoutEffect(() => {
       if (mobileBreakpoint && screenSize) {
         setVisible(screenSize < mobileBreakpoint);
       }
     }, [screenSize, mobileBreakpoint]);
 
-    useEffect(() => {
+    useLayoutEffect(() => {
       // TODO improve the scroll body lock when the menu is open
       // this is one of the packages that maybe fix the issue https://github.com/willmcpo/body-scroll-lock#readme
       if (drawerVisible && visible) {
@@ -65,6 +87,13 @@ export const Navigation = forwardRef(
       };
     }, [visible, drawerVisible]);
 
+    useLayoutEffect(() => {
+      if (!visible && drawerRef.current) {
+        setDrawerVisible(false);
+        drawerRef.current.close();
+      }
+    }, [visible, drawerRef.current]);
+
     return (
       <>
         <nav
@@ -81,38 +110,36 @@ export const Navigation = forwardRef(
         >
           {!visible ? (
             <NavigationList list={list} mobile={visible} />
-          ) : !drawerVisible ? (
+          ) : (
             <NavToggleButton
               text={toggleButton?.openText}
               icon="hamburger"
+              ref={hamburgerButtonRef}
               aria-expanded={drawerVisible}
-              onClick={() => setDrawerVisible(!drawerVisible)}
+              onClick={showModal}
             />
-          ) : null}
+          )}
         </nav>
-        {visible && drawerVisible && (
-          <Portal>
-            <Drawer onDrawerClose={() => setDrawerVisible(!drawerVisible)} open={drawerVisible}>
-              <nav
-                className={css('utrecht-navigation', {
-                  'utrecht-navigation--mobile': visible,
-                })}
-                id="menu"
-                ref={ref}
-                {...restProps}
-              >
-                <NavigationList list={list} mobile={visible} ref={navigationListRef}>
-                  <NavToggleButton
-                    text={toggleButton?.closeText}
-                    icon="close"
-                    aria-expanded={drawerVisible}
-                    onClick={() => setDrawerVisible(!drawerVisible)}
-                  />
-                </NavigationList>
-              </nav>
-            </Drawer>
-          </Portal>
-        )}
+        <Drawer align="inline-end" className={css('utrecht-drawer--nav')} ref={drawerRef}>
+          <nav
+            className={css('utrecht-navigation', {
+              'utrecht-navigation--mobile': visible,
+            })}
+            id="menu"
+            ref={ref}
+            {...restProps}
+          >
+            <NavigationList list={list} mobile={visible} ref={navigationListRef}>
+              <NavToggleButton
+                text={toggleButton?.closeText}
+                id="nav-toggle-button-close"
+                icon="close"
+                aria-expanded={drawerVisible}
+                onClick={showModal}
+              />
+            </NavigationList>
+          </nav>
+        </Drawer>
       </>
     );
   },

packages/ui/src/hooks/index.tsx

@@ -1,3 +1,2 @@
 export * from './useClickOutside';
-export * from './useKeyboardEvent';
 export * from './useScreenSize';

packages/ui/src/hooks/useClickOutside.ts

@@ -1,9 +1,18 @@
 import { RefObject, useEffect } from 'react';
 
-export const useClickOutside = (ref: RefObject<HTMLElement>, callback: () => void) => {
-  const handleClickOutside = (event: Event) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      callback();
+export const useClickOutside = (
+  ref: RefObject<HTMLDialogElement>,
+  prevFocusableElement?: RefObject<HTMLButtonElement>,
+) => {
+  const handleClickOutside = (event: any) => {
+    event.preventDefault();
+    if (ref.current && ref.current === event.target) {
+      ref.current.close();
+      if (prevFocusableElement) {
+        prevFocusableElement.current?.focus();
+      } else {
+        (document.activeElement as HTMLElement).focus();
+      }
     }
   };
 

yarn.lock

@@ -11167,21 +11167,6 @@ fn.name@1.x.x:
   resolved "https://registry.yarnpkg.com/fn.name/-/fn.name-1.1.0.tgz#26cad8017967aea8731bc42961d04a3d5988accc"
   integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==
 
-focus-trap-react@10.2.3:
-  version "10.2.3"
-  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.2.3.tgz#a5a2ea7fbb042ffa4337fde72758325ed0fb793a"
-  integrity sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==
-  dependencies:
-    focus-trap "^7.5.4"
-    tabbable "^6.2.0"
-
-focus-trap@^7.5.4:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.4.tgz#6c4e342fe1dae6add9c2aa332a6e7a0bbd495ba2"
-  integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==
-  dependencies:
-    tabbable "^6.2.0"
-
 follow-redirects@^1.0.0, follow-redirects@^1.15.0, follow-redirects@^1.15.4:
   version "1.15.5"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
@@ -21538,7 +21523,7 @@ synckit@^0.8.5:
     "@pkgr/core" "^0.1.0"
     tslib "^2.6.2"
 
-tabbable@^6.0.1, tabbable@^6.2.0:
+tabbable@^6.0.1:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==