Merge pull request #79 from microcmsio/fix/react-strict-mode

Supported React Strict Mode

Author: dc7290

examples/src/index.tsx

@@ -65,4 +65,8 @@ const App = () => {
 };
 
 const root = createRoot(document.getElementById('root')!);
-root.render(<App />);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "body-scroll-lock": "^4.0.0-beta.0",
-    "focus-trap": "^7.2.0"
+    "focus-trap-react": "^10.0.2"
   },
   "devDependencies": {
     "@types/body-scroll-lock": "^3.1.0",

src/components/Modal.tsx

@@ -1,14 +1,15 @@
 import { Options as FocusTrapOptions } from 'focus-trap';
+import FocusTrap from 'focus-trap-react';
 import React, { useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { ModalProps, OverlayProps, WrapperProps } from '..';
 
 import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
-import { useFocusTrap } from '../hooks/useFocusTrap';
 
 interface ModalWrapperProps<T extends Record<string, unknown>> {
   children: React.ReactNode;
   isOpen: boolean;
+  open: () => void;
   close: () => void;
   elementId: 'root' | string;
   title?: React.ReactNode;
@@ -26,6 +27,7 @@ interface ModalWrapperProps<T extends Record<string, unknown>> {
 export const ModalWrapper = <T extends Record<string, unknown>>({
   children,
   isOpen,
+  open,
   close,
   elementId = 'root',
   title,
@@ -36,15 +38,24 @@ export const ModalWrapper = <T extends Record<string, unknown>>({
   additionalProps,
 }: ModalWrapperProps<T>): React.ReactElement | null => {
   const dialogRef = useRef<HTMLDivElement>(null);
-  const _focusTrapOptions = useMemo(
+  const _focusTrapOptions: FocusTrapOptions = useMemo(
     () => ({
-      onDeactivate: close,
-      clickOutsideDeactivates: true,
       ...focusTrapOptions,
+      onActivate: () => {
+        open();
+        focusTrapOptions.onActivate?.();
+      },
+      onDeactivate: () => {
+        close();
+        focusTrapOptions.onDeactivate?.();
+      },
+      clickOutsideDeactivates: focusTrapOptions.clickOutsideDeactivates ?? true,
+      fallbackFocus:
+        focusTrapOptions.fallbackFocus ?? dialogRef.current ?? undefined,
     }),
-    [close, focusTrapOptions]
+    [close, focusTrapOptions, open]
   );
-  useFocusTrap(dialogRef, isOpen, _focusTrapOptions);
+
   useBodyScrollLock(dialogRef, isOpen, preventScroll);
 
   if (isOpen === false) {
@@ -54,22 +65,24 @@ export const ModalWrapper = <T extends Record<string, unknown>>({
   return createPortal(
     <components.Wrapper>
       <components.Overlay />
-      <div
-        ref={dialogRef}
-        role="dialog"
-        aria-modal="true"
-        tabIndex={-1}
-        style={{ position: 'relative' }}
-      >
-        <components.Modal
-          title={title}
-          description={description}
-          close={close}
-          additionalProps={additionalProps}
+      <FocusTrap focusTrapOptions={_focusTrapOptions}>
+        <div
+          ref={dialogRef}
+          role="dialog"
+          aria-modal="true"
+          tabIndex={-1}
+          style={{ position: 'relative' }}
         >
-          {children}
-        </components.Modal>
-      </div>
+          <components.Modal
+            title={title}
+            description={description}
+            close={close}
+            additionalProps={additionalProps}
+          >
+            {children}
+          </components.Modal>
+        </div>
+      </FocusTrap>
     </components.Wrapper>,
     document.getElementById(elementId) as HTMLElement
   );

src/hooks/useFocusTrap.tsx

@@ -88,6 +88,7 @@ export const useModal = <T extends Record<string, unknown>>(
       return (
         <ModalWrapper
           isOpen={isOpen}
+          open={open}
           close={close}
           elementId={elementId}
           title={title}
@@ -113,6 +114,7 @@ export const useModal = <T extends Record<string, unknown>>(
       elementId,
       focusTrapOptions,
       isOpen,
+      open,
       preventScroll,
     ]
   );

src/index.tsx

@@ -3201,6 +3201,14 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+focus-trap-react@^10.0.2:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.0.2.tgz#eed4ce5b508bf3a0ce2ce63151c5c0f34a8f8529"
+  integrity sha512-MnN2cmdgpY7NY74ePOio4kbO5A3ILhrg1g5OGbgIQjcWEv1hhcbh6e98K0a+df88hNbE+4i9r8ji9aQnHou6GA==
+  dependencies:
+    focus-trap "^7.2.0"
+    tabbable "^6.0.1"
+
 focus-trap@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.2.0.tgz#25af61b5635d3c18cd2fd176087db7b60be72c6b"