fix(Dialog): used closedby prop to align with upcoming browser standards (#3281)

* fix(Dialog): used closedby prop to align with upcoming browser standards

* Create cool-dancers-prove.md

* docs: update closedby story content

* chore: lint and format

* Update .changeset/cool-dancers-prove.md

Co-authored-by: Tobias Barsnes <[email protected]>

* fix missed story rename

---------

Co-authored-by: Tobias Barsnes <[email protected]>
Co-authored-by: Michael Marszalek <[email protected]>

Author: 3 people

.changeset/cool-dancers-prove.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**Dialog**: Remove `backdropClose`, and replace with `closedby="none | closerequest | any"` to align with [upcoming browser standard](https://chromestatus.com/feature/5097714453577728)

apps/_components/src/ColorModal/ColorModal.tsx

@@ -45,10 +45,10 @@ export const ColorModal = ({
   return (
     <Dialog
       ref={colorModalRef}
+      closedby='any'
       style={{
         maxWidth: '1100px',
       }}
-      backdropClose
     >
       <Dialog.Block>
         <Heading data-size='xs'>

apps/theme/components/TokenModal/TokenModal.tsx

@@ -65,7 +65,7 @@ export const TokenModal = () => {
         className={classes.modal}
         style={{ maxWidth: 1000 }}
         ref={modalRef}
-        backdropClose={true}
+        closedby='any'
       >
         <Dialog.Block>
           <Heading className={classes.modalHeader} data-size='2xs'>

packages/react/src/components/Dialog/Dialog.mdx

@@ -59,10 +59,10 @@ const dialogRef = useRef<HTMLDialogElement>(null);
 
 ### Close on backdrop click
 
-Vi bruker `backdropClose={true}` proppen for å lukke dialogen når brukeren klikker utenfor.
-Dette funker kun dersom du har `modal={true}`, fordi en non-modla har ikke et backdrop.
+Vi bruker `closedby="any"` proppen for å lukke dialogen når brukeren klikker utenfor.
+Dette funker kun dersom du har `modal={true}`, fordi en non-modal har ikke et backdrop.
 
-<Canvas of={DialogStories.BackdropClose} />
+<Canvas of={DialogStories.BackdropClosedbyAny} />
 
 ### Med `Block`
 

packages/react/src/components/Dialog/Dialog.stories.tsx

@@ -127,14 +127,16 @@ export const DialogWithOpenProp: StoryFn<typeof Dialog> = (args) => {
   );
 };
 
-export const BackdropClose: StoryFn<typeof Dialog> = () => {
+export const BackdropClosedbyAny: StoryFn<typeof Dialog> = () => {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
   return (
     <Dialog.TriggerContext>
       <Dialog.Trigger>Open Dialog</Dialog.Trigger>
-      <Dialog ref={dialogRef} backdropClose>
-        <Heading>Dialog med backdropClose og en veldig lang tittel</Heading>
+      <Dialog ref={dialogRef} closedby='any'>
+        <Heading>
+          Dialog med <code>closedby="any"</code> og en veldig lang tittel
+        </Heading>
         <Paragraph>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
           doloremque obcaecati assumenda odio ducimus sunt et.
@@ -189,7 +191,7 @@ export const DialogWithForm: StoryFn<typeof Dialog> = () => {
   return (
     <Dialog.TriggerContext>
       <Dialog.Trigger>Open Dialog</Dialog.Trigger>
-      <Dialog ref={dialogRef} onClose={() => setInput('')} backdropClose>
+      <Dialog ref={dialogRef} onClose={() => setInput('')} closedby='any'>
         <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
           Dialog med skjema
         </Heading>

packages/react/src/components/Dialog/Dialog.tsx

@@ -18,12 +18,11 @@ export type DialogProps = MergeRight<
      */
     closeButton?: string | false;
     /**
-     * Close on backdrop click.
-     * Only works when `modal` is true.
+     * Light dismiss behavior, allowing to close on backdrop click  by setting `closedby="any"`.
      *
-     * @default false
+     * @default 'closerequest'
      */
-    backdropClose?: boolean;
+    closedby?: 'none' | 'closerequest' | 'any';
     /**
      * Toogle modal and non-modal dialog.
      *
@@ -78,10 +77,10 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
       children,
       className,
       closeButton = 'Lukk dialogvindu',
+      closedby = 'closerequest',
       modal = true,
-      open,
       onClose,
-      backdropClose = false,
+      open,
       ...rest
     },
     ref,
@@ -96,13 +95,16 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
 
     useEffect(() => {
       const dialog = dialogRef.current;
-      const handleBackdropClick = ({
-        clientY: y,
-        clientX: x,
-        target,
-      }: MouseEvent) => {
+      const handleClosedby = (event: Event) => {
+        const { clientY: y, clientX: x, target } = event as MouseEvent;
+        if (event instanceof KeyboardEvent)
+          return (
+            closedby === 'none' &&
+            event.key === 'Escape' &&
+            event.preventDefault()
+          ); // Skip ESC-key if closedby="none"
         if (window.getSelection()?.toString()) return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
-        if (dialog && target === dialog && backdropClose) {
+        if (dialog && target === dialog && closedby === 'any') {
           const { top, left, right, bottom } = dialog.getBoundingClientRect();
           const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
 
@@ -116,12 +118,14 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
       };
 
       dialog?.addEventListener('animationend', handleAutoFocus);
-      dialog?.addEventListener('click', handleBackdropClick);
+      dialog?.addEventListener('click', handleClosedby);
+      dialog?.addEventListener('keydown', handleClosedby);
       return () => {
         dialog?.removeEventListener('animationend', handleAutoFocus);
-        dialog?.removeEventListener('click', handleBackdropClick);
+        dialog?.removeEventListener('click', handleClosedby);
+        dialog?.removeEventListener('keydown', handleClosedby);
       };
-    }, [backdropClose]);
+    }, [closedby]);
 
     /* handle closing */
     useEffect(() => {