fix(dashboard): Cell behaviour in DataGrid (#8183)

packages/admin-next/dashboard/src/components/modals/route-focus-modal/route-focus-modal.tsx

@@ -2,6 +2,7 @@ import { FocusModal, clx } from "@medusajs/ui"
 import { PropsWithChildren, useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { RouteModalForm } from "../route-modal-form"
+import { useRouteModal } from "../route-modal-provider"
 import { RouteModalProvider } from "../route-modal-provider/route-provider"
 import { StackedModalProvider } from "../stacked-modal-provider"
 
@@ -41,19 +42,40 @@ const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
     <FocusModal open={open} onOpenChange={handleOpenChange}>
       <RouteModalProvider prev={prev}>
         <StackedModalProvider onOpenChange={onStackedModalOpen}>
-          <FocusModal.Content
-            className={clx({
-              "!bg-ui-bg-disabled !inset-x-5 !inset-y-3": stackedModalOpen,
-            })}
-          >
-            {children}
-          </FocusModal.Content>
+          <Content stackedModalOpen={stackedModalOpen}>{children}</Content>
         </StackedModalProvider>
       </RouteModalProvider>
     </FocusModal>
   )
 }
 
+type ContentProps = PropsWithChildren<{
+  stackedModalOpen: boolean
+}>
+
+const Content = ({ stackedModalOpen, children }: ContentProps) => {
+  const { __internal } = useRouteModal()
+
+  const shouldPreventClose = !__internal.closeOnEscape
+
+  return (
+    <FocusModal.Content
+      onEscapeKeyDown={
+        shouldPreventClose
+          ? (e) => {
+              e.preventDefault()
+            }
+          : undefined
+      }
+      className={clx({
+        "!bg-ui-bg-disabled !inset-x-5 !inset-y-3": stackedModalOpen,
+      })}
+    >
+      {children}
+    </FocusModal.Content>
+  )
+}
+
 const Header = FocusModal.Header
 const Title = FocusModal.Title
 const Description = FocusModal.Description

packages/admin-next/dashboard/src/components/modals/route-modal-provider/route-modal-context.tsx

@@ -2,6 +2,10 @@ import { createContext } from "react"
 
 type RouteModalProviderState = {
   handleSuccess: (path?: string) => void
+  setCloseOnEscape: (value: boolean) => void
+  __internal: {
+    closeOnEscape: boolean
+  }
 }
 
 export const RouteModalProviderContext =

packages/admin-next/dashboard/src/components/modals/route-modal-provider/route-provider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useCallback, useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { RouteModalProviderContext } from "./route-modal-context"
 
@@ -12,13 +12,27 @@ export const RouteModalProvider = ({
 }: RouteModalProviderProps) => {
   const navigate = useNavigate()
 
-  const handleSuccess = (path?: string) => {
-    const to = path || prev
-    navigate(to, { replace: true, state: { isSubmitSuccessful: true } })
-  }
+  const [closeOnEscape, setCloseOnEscape] = useState(true)
+
+  const handleSuccess = useCallback(
+    (path?: string) => {
+      const to = path || prev
+      navigate(to, { replace: true, state: { isSubmitSuccessful: true } })
+    },
+    [navigate, prev]
+  )
+
+  const value = useMemo(
+    () => ({
+      handleSuccess,
+      setCloseOnEscape,
+      __internal: { closeOnEscape },
+    }),
+    [handleSuccess, setCloseOnEscape, closeOnEscape]
+  )
 
   return (
-    <RouteModalProviderContext.Provider value={{ handleSuccess }}>
+    <RouteModalProviderContext.Provider value={value}>
       {children}
     </RouteModalProviderContext.Provider>
   )