diff --git a/mon-entreprise/package.json b/mon-entreprise/package.json
index 3348369ad..06a6326bf 100644
--- a/mon-entreprise/package.json
+++ b/mon-entreprise/package.json
@@ -50,6 +50,7 @@
"react-spring": "=8.0.27",
"react-syntax-highlighter": "^10.1.1",
"react-transition-group": "^2.2.1",
+ "react-useportal": "^1.0.13",
"recharts": "^1.8.5",
"reduce-reducers": "^1.0.4",
"redux": "^4.0.4",
diff --git a/mon-entreprise/source/components/conversation/Explicable.tsx b/mon-entreprise/source/components/conversation/Explicable.tsx
index 0a267ef0d..ba7ecad0b 100644
--- a/mon-entreprise/source/components/conversation/Explicable.tsx
+++ b/mon-entreprise/source/components/conversation/Explicable.tsx
@@ -1,18 +1,18 @@
import { explainVariable } from 'Actions/actions'
-import React, { useContext } from 'react'
+import Overlay from 'Components/Overlay'
+import { EngineContext } from 'Components/utils/EngineContext'
+import React, { useContext, useState } from 'react'
import emoji from 'react-easy-emoji'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from 'Reducers/rootReducer'
+import { useDispatch } from 'react-redux'
import { DottedName } from 'Rules'
import { TrackerContext } from '../utils/withTracker'
import './Explicable.css'
-import { EngineContext } from 'Components/utils/EngineContext'
+import usePortal from 'react-useportal'
-export default function Explicable({ dottedName }: { dottedName: DottedName }) {
+export function ExplicableRule({ dottedName }: { dottedName: DottedName }) {
const rules = useContext(EngineContext).getParsedRules()
const tracker = useContext(TrackerContext)
const dispatch = useDispatch()
- const explained = useSelector((state: RootState) => state.explainedVariable)
// Rien à expliquer ici, ce n'est pas une règle
if (dottedName == null) return null
@@ -42,3 +42,28 @@ export default function Explicable({ dottedName }: { dottedName: DottedName }) {
)
}
+
+export function Explicable({ children }: { children: React.ReactNode }) {
+ const { Portal } = usePortal()
+ const [isOpen, setIsOpen] = useState(false)
+ return (
+ <>
+ {isOpen && (
+
+ setIsOpen(false)}>{children}
+
+ )}
+
+ >
+ )
+}
diff --git a/mon-entreprise/source/components/conversation/FormDecorator.tsx b/mon-entreprise/source/components/conversation/FormDecorator.tsx
index d7deb35b3..eb8057fe7 100644
--- a/mon-entreprise/source/components/conversation/FormDecorator.tsx
+++ b/mon-entreprise/source/components/conversation/FormDecorator.tsx
@@ -1,5 +1,5 @@
import { updateSituation, goToQuestion } from 'Actions/actions'
-import Explicable from 'Components/conversation/Explicable'
+import { ExplicableRule } from 'Components/conversation/Explicable'
import React, { useContext } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { situationSelector } from 'Selectors/simulationSelectors'
@@ -34,7 +34,8 @@ export default function FormDecorator(RenderField) {
return (
- {rules[dottedName].question}
+ {rules[dottedName].question}{' '}
+