@dnb/eufemia/cjs/components/portal-root/PortalRoot.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PortalRootProvider = PortalRootProvider;
exports.default = void 0;
exports.getOrCreatePortalElement = getOrCreatePortalElement;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _clsx = _interopRequireDefault(require("clsx"));
var _IsolatedStyleScope = _interopRequireWildcard(require("../../shared/IsolatedStyleScope.js"));
var _useIsomorphicLayoutEffect = require("../../shared/helpers/useIsomorphicLayoutEffect.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const PortalRootContext = _react.default.createContext(null);
function PortalRootProvider(props) {
  const {
    id,
    insideSelector,
    beforeSelector,
    children
  } = props;
  const value = (0, _react.useMemo)(() => ({
    id,
    insideSelector,
    beforeSelector
  }), [id, insideSelector, beforeSelector]);
  return (0, _jsxRuntime.jsx)(PortalRootContext, {
    value: value,
    children: children
  });
}
function PortalRootInstance(props = {}) {
  var _ref;
  const {
    id: idProp,
    insideSelector: insideSelectorProp,
    beforeSelector: beforeSelectorProp,
    ref: refProp,
    className,
    style,
    children,
    ...rest
  } = props;
  const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
  const {
    style: scopeStyle
  } = (0, _react.useContext)(_IsolatedStyleScope.IsolatedStyleScopeContext) || {};
  const selectorContext = (0, _react.useContext)(PortalRootContext);
  const hasPropOverride = typeof insideSelectorProp !== 'undefined' || typeof beforeSelectorProp !== 'undefined';
  const insideSelector = hasPropOverride ? insideSelectorProp : selectorContext === null || selectorContext === void 0 ? void 0 : selectorContext.insideSelector;
  const beforeSelector = hasPropOverride ? beforeSelectorProp : selectorContext === null || selectorContext === void 0 ? void 0 : selectorContext.beforeSelector;
  const effectiveId = (_ref = idProp !== null && idProp !== void 0 ? idProp : selectorContext === null || selectorContext === void 0 ? void 0 : selectorContext.id) !== null && _ref !== void 0 ? _ref : 'eufemia-portal-root';
  const initialElement = (0, _react.useMemo)(() => {
    if (idProp && typeof document !== 'undefined') {
      return document.getElementById(idProp);
    }
    return getOrCreatePortalElement({
      id: effectiveId,
      insideSelector,
      beforeSelector
    });
  }, [effectiveId, idProp, insideSelector, beforeSelector]);
  const localRef = (0, _react.useRef)(initialElement);
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    if (idProp || insideSelector || beforeSelector) {
      const elem = getOrCreatePortalElement({
        id: effectiveId,
        insideSelector,
        beforeSelector
      });
      if (localRef.current !== elem) {
        localRef.current = elem;
        forceUpdate();
      }
    }
    if (refProp && localRef.current) {
      if (typeof refProp === 'function') {
        refProp(localRef.current);
      } else {
        const ref = refProp;
        ref.current = localRef.current;
      }
    }
  }, [effectiveId, idProp, refProp, insideSelector, beforeSelector]);
  const portalElement = localRef.current || initialElement;
  if (!portalElement) {
    return null;
  }
  return (0, _reactDom.createPortal)((0, _jsxRuntime.jsx)(_IsolatedStyleScope.default, {
    scopeHash: "auto",
    disableCoreStyleWrapper: true,
    uniqueKey: false,
    children: (0, _jsxRuntime.jsx)("div", {
      className: (0, _clsx.default)("dnb-core-style eufemia-portal-root", className),
      style: {
        ...scopeStyle,
        ...style
      },
      ...rest,
      children: children
    })
  }), portalElement);
}
function getOrCreatePortalElement({
  id,
  insideSelector,
  beforeSelector
}) {
  if (typeof document === 'undefined') {
    return null;
  }
  let elem = document.getElementById(id);
  if (!elem) {
    let parent = document.body;
    let referenceNode = document.body.firstChild;
    if (beforeSelector) {
      const target = document.querySelector(beforeSelector);
      if (target && target.parentElement) {
        parent = target.parentElement;
        referenceNode = target;
      }
    } else if (insideSelector) {
      const target = document.querySelector(insideSelector);
      if (target) {
        parent = target;
        referenceNode = target.firstChild;
      }
    }
    elem = document.createElement('div');
    elem.setAttribute('id', id);
    parent.insertBefore(elem, referenceNode);
  }
  if (!elem.hasAttribute('role')) {
    elem.setAttribute('role', 'presentation');
  }
  return elem;
}
function PortalRoot(props) {
  return (0, _jsxRuntime.jsx)(PortalRootInstance, {
    ...props
  });
}
PortalRoot.Provider = PortalRootProvider;
var _default = exports.default = PortalRoot;
//# sourceMappingURL=PortalRoot.js.map