@@ -30,34 +30,35 @@ type Props =
3030 , footer :: JSX
3131 , isOpen ∷ Boolean
3232 , onDismiss ∷ Effect Unit
33− , target ∷ String
33+ , containerId ∷ String
34+ , clickAwayId :: String
3435 | ()
3536 }
3637
3738component ∷ ReactComponent Props
3839component =
3940 unsafePerformEffect
40− $ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, target } -> React.do
41− renderInPortal <- useRenderInPortal target
41+ $ reactComponent "Sheet Wrapper" \{ header, content, footer, isOpen, onDismiss, containerId, clickAwayId } -> React.do
42+ renderInPortal <- useRenderInPortal containerId
4243 useKeyDown case _ of
4344 KeyCode.Escape -> onDismiss
4445 _ -> mempty
45− clickAwayRef <- React.useRef Nullable.null
4646 let
4747 toRender ∷ JSX
4848 toRender =
4949 R.div' </ {}
5050 />
51− [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { theRef: clickAwayRef, onDismiss } ]
51+ [ Motion.animatePresence </ {} /> [ guard isOpen $ element clickaway { containerId: clickAwayId, onDismiss } ]
5252 , element window { onDismiss, header, content, footer, isOpen }
5353 ]
5454 pure (renderInPortal toRender)
5555
56−clickaway ∷ ReactComponent { theRef ∷ Ref (Nullable Node), onDismiss ∷ Effect Unit }
56+clickaway ∷ ReactComponent { containerId ∷ String, onDismiss ∷ Effect Unit }
5757clickaway =
5858 unsafePerformEffect
59− $ reactComponent "Sheet Clickaway" \{ theRef, onDismiss } -> React.do
60− pure $ Emotion.elementKeyed Motion.div
59+ $ reactComponent "Sheet Clickaway" \{ containerId, onDismiss } -> React.do
60+ renderInPortal <- useRenderInPortal containerId
61+ pure $ renderInPortal $ Emotion.elementKeyed Motion.div
6162 $
6263 { key: "ry-modal-clickaway"
6364 , onClick: handler_ onDismiss
@@ -66,7 +67,6 @@ clickaway =
6667 , initial: Motion.prop $ css { opacity: 0.0 }
6768 , animate: Motion.prop $ css { opacity: 1.0 }
6869 , exit: Motion.prop $ css { opacity: 0.0 }
69− , ref: theRef
7070 }
7171
7272type WindowProps =