@dhis2-ui/portal 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/portal",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Portal",
     "repository": {
         "type": "git",
@@ -37,7 +37,8 @@
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "react": "^18.3.1",

package/src/index.js

@@ -0,0 +1 @@
+export { Portal } from './portal.js'

package/src/portal.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+
+/*
+ * #dhis2-portal-root is provided by the App Platform and will be used by
+ * default.
+ *
+ * For non-platform apps, the mount node can be added manually to the HTML
+ * template.
+ *
+ * As a fallback, portals will be attached to the document body.
+ *
+ * This needs to be a function so that it works in tests as well.
+ */
+const getDefaultNode = () =>
+    document.getElementById('dhis2-portal-root') || document.body
+
+export const Portal = ({ children, node, disable }) => {
+    const [mountNode, setMountNode] = useState(null)
+
+    useEffect(() => {
+        setMountNode(node || getDefaultNode())
+    }, [node])
+
+    if (disable) {
+        return children
+    }
+
+    return mountNode ? createPortal(children, mountNode) : mountNode
+}
+
+Portal.propTypes = {
+    children: PropTypes.node,
+    disable: PropTypes.bool,
+    node: PropTypes.node,
+}