add custom root element support for botomSheet

coingaming · Oct 10, 2023 · f88fcf3 · f88fcf3
1 parent 190b5f5
commit f88fcf3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/workspaces/core/src/backdrop/Backdrop.tsx b/workspaces/core/src/backdrop/Backdrop.tsx
@@ -2,7 +2,13 @@ import React from 'react';
 import { Transition } from '@headlessui/react';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
-const Backdrop = ({ className }: { className?: string }) => (
+const Backdrop = ({
+  className,
+  onClose,
+}: {
+  className?: string;
+  onClose?: () => void;
+}) => (
   <Transition.Child
     as={React.Fragment}
     enter="ease-out duration-300 transition-opacity"
@@ -15,6 +21,7 @@ const Backdrop = ({ className }: { className?: string }) => (
     <div
       className={mergeClassnames('fixed -z-1 inset-0 bg-zeno', className)}
       aria-hidden="true"
+      onClick={onClose}
     />
   </Transition.Child>
 );

diff --git a/workspaces/core/src/bottomSheet/BottomSheet.tsx b/workspaces/core/src/bottomSheet/BottomSheet.tsx
@@ -18,6 +18,8 @@ const BottomSheetRoot = ({
   hasShadow, // deprecated
   size, // deprecated
   children,
+  className,
+  rootId,
 }: BottomSheetRootProps) => {
   const [state, dispatch] = useReducer(stateReducer, {
     bottomSheetChildren: [],
@@ -26,12 +28,32 @@ const BottomSheetRoot = ({
     dispatch?.({ type: 'RegisterChild', children: child });
     return () => dispatch?.({ type: 'UnregisterChild', children: child });
   }, []);
+
+  const onCloseHandler = () => {
+    if (!onClose) return;
+    onClose();
+  };
+
+  useEffect(() => {
+    if (!rootId) return;
+    if (open) {
+      setTimeout(() => {
+        const rootNode = document.getElementById(rootId);
+        if (rootNode) rootNode.inert = false;
+      }, 100);
+    }
+  }, [open]);
+
   return (
     <BottomSheetContext.Provider
       value={{ ...state, size, registerChild, dispatch }}
     >
       <Transition appear show={open} as={React.Fragment}>
-        <Dialog as="div" className="fixed inset-0 z-50" onClose={onClose}>
+        <Dialog
+          as="div"
+          className={mergeClassnames('fixed inset-0 z-50', className)}
+          onClose={onCloseHandler}
+        >
           {React.Children.map<ReactNode, ReactNode>(children, (child) => {
             if (React.isValidElement(child)) {
               let extraProps = {};

diff --git a/workspaces/core/src/bottomSheet/private/types/BottomSheetRootProps.ts b/workspaces/core/src/bottomSheet/private/types/BottomSheetRootProps.ts
@@ -6,6 +6,8 @@ type BottomSheetRootProps = {
   hasShadow?: boolean;
   size?: Size;
   children?: React.ReactNode;
+  className?: string;
+  rootId?: string;
 };
 
 export default BottomSheetRootProps;