@yamada-ui/portal/dist/index.js

Yamada UI portal component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  ContainerPortal: () => ContainerPortal,
  DefaultPortal: () => DefaultPortal,
  Portal: () => Portal
});
module.exports = __toCommonJS(index_exports);

// src/container-portal.tsx
var import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");
var import_react_dom = require("react-dom");

// src/portal-provider.tsx
var import_utils = require("@yamada-ui/utils");
var [PortalProvider, usePortal] = (0, import_utils.createContext)({
  name: "PortalContext",
  strict: false
});

// src/container-portal.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var ContainerPortal = ({
  appendToParentPortal,
  children,
  containerRef
}) => {
  const parent = containerRef.current;
  const host = parent != null ? parent : typeof window !== "undefined" ? document.body : void 0;
  const portal = (0, import_react.useMemo)(() => {
    if (!parent) return;
    const { ownerDocument } = parent;
    const node = ownerDocument.createElement("div");
    node.className = "ui-portal";
    return node;
  }, [parent]);
  const [, forceUpdate] = (0, import_react.useState)({});
  (0, import_utils2.useSafeLayoutEffect)(() => forceUpdate({}), []);
  (0, import_utils2.useSafeLayoutEffect)(() => {
    if (!portal || !host) return;
    host.appendChild(portal);
    return () => {
      host.removeChild(portal);
    };
  }, [portal, host]);
  return host && portal ? (0, import_react_dom.createPortal)(
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { value: appendToParentPortal ? portal : null, children }),
    portal
  ) : null;
};

// src/default-portal.tsx
var import_utils3 = require("@yamada-ui/utils");
var import_react2 = require("react");
var import_react_dom2 = require("react-dom");
var import_jsx_runtime2 = require("react/jsx-runtime");
var DefaultPortal = ({ appendToParentPortal, children }) => {
  const [node, setNode] = (0, import_react2.useState)(null);
  const el = (0, import_react2.useRef)(null);
  const [, forceUpdate] = (0, import_react2.useState)({});
  (0, import_react2.useEffect)(() => forceUpdate({}), []);
  const parent = usePortal();
  (0, import_utils3.useSafeLayoutEffect)(() => {
    if (!node) return;
    const { ownerDocument } = node;
    const host = appendToParentPortal ? parent != null ? parent : ownerDocument.body : ownerDocument.body;
    el.current = ownerDocument.createElement("div");
    el.current.className = "ui-portal";
    host.appendChild(el.current);
    forceUpdate({});
    const portalNode = el.current;
    return () => {
      if (host.contains(portalNode)) host.removeChild(portalNode);
    };
  }, [node]);
  return el.current ? (0, import_react_dom2.createPortal)(
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PortalProvider, { value: el.current, children }),
    el.current
  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ref: (el2) => el2 ? setNode(el2) : void 0 });
};

// src/portal.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Portal = ({
  appendToParentPortal = true,
  children,
  containerRef,
  isDisabled,
  disabled = isDisabled
}) => {
  if (disabled) return children;
  return containerRef ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    ContainerPortal,
    {
      containerRef,
      ...{ appendToParentPortal, children }
    }
  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultPortal, { ...{ appendToParentPortal, children } });
};
Portal.displayName = "Portal";
Portal.__ui__ = "Portal";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ContainerPortal,
  DefaultPortal,
  Portal
});
//# sourceMappingURL=index.js.map