@blockstack/ui/dist/portal/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { useState, useCallback, createElement, Fragment } from 'react';
import { isBrowser, __DEV__, createContext } from '../utils/index.esm.js';
import '../hooks/use-controllable.esm.js';
import '../hooks/use-previous.esm.js';
import '../hooks/use-disclosure.esm.js';
import '../hooks/use-latest-ref.esm.js';
import '../hooks/use-event-listener.esm.js';
import '../hooks/use-force-update.esm.js';
import '../hooks/use-id.esm.js';
import '../hooks/use-merge-refs.esm.js';
import { useSafeLayoutEffect } from '../hooks/use-safe-layout-effect.esm.js';
import '../hooks/use-timeout.esm.js';
import '../hooks/use-theme.esm.js';
import '../hooks/use-color-mode.esm.js';
import { createPortal } from 'react-dom';
import { usePortalManager } from './manager.esm.js';

var _createContext = /*#__PURE__*/createContext({
  strict: false
}),
    PortalCtxProvider = _createContext[0],
    usePortalContext = _createContext[1];

function Portal(props) {
  var onMount = props.onMount,
      onUnmount = props.onUnmount,
      children = props.children,
      containerProp = props.container;

  var _React$useState = useState(function () {
    if (isBrowser) {
      var div = document.createElement('div');
      div.className = 'portal';
      return div;
    }

    return null;
  }),
      portal = _React$useState[0];

  var parentPortal = usePortalContext();
  var manager = usePortalManager();
  var append = useCallback(function (container) {
    if (!portal || !container) return;
    container.appendChild(portal);
  }, [portal]);
  useSafeLayoutEffect(function () {
    var _ref, _ref2;

    var mountNode = containerProp === null || containerProp === void 0 ? void 0 : containerProp();
    var container = (_ref = (_ref2 = mountNode !== null && mountNode !== void 0 ? mountNode : parentPortal) !== null && _ref2 !== void 0 ? _ref2 : manager === null || manager === void 0 ? void 0 : manager.node) !== null && _ref !== void 0 ? _ref : document.body;
    append(container);
    onMount === null || onMount === void 0 ? void 0 : onMount();
    return function () {
      onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
      if (!portal) return;

      if (container === null || container === void 0 ? void 0 : container.contains(portal)) {
        container === null || container === void 0 ? void 0 : container.removeChild(portal);
      }
    };
  }, [containerProp, portal, parentPortal, onMount, onUnmount, manager && manager.node, append]);
  var finalChildren = (manager === null || manager === void 0 ? void 0 : manager.zIndex) ? createElement("div", {
    className: "portal-zIndex",
    style: {
      zIndex: manager.zIndex
    }
  }, children) : children;

  if (!portal) {
    return createElement(Fragment, null, finalChildren);
  }

  return createPortal(createElement(PortalCtxProvider, {
    value: portal
  }, finalChildren), portal);
}

if (__DEV__) {
  Portal.displayName = 'Portal';
}

export { Portal };
//# sourceMappingURL=index.esm.js.map