@mittwald/flow-react-components 0.1.0-alpha.276 → 0.1.0-alpha.277

package/dist/Modal.js

@@ -1,75 +1,81 @@
 "use client"
 /* */
 import o from "react";
-import p from "clsx";
+import v from "clsx";
 import "./propsContext-DzAKlmhS.js";
-import { P as v } from "./PropsContextProvider-C6Z4XGp6.js";
+import { P as y } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-import { TunnelProvider as g, TunnelExit as y } from "@mittwald/react-tunnel";
-import { f as C } from "./flowComponent-Cnrr91a8.js";
-import * as n from "react-aria-components";
+import { TunnelProvider as C, TunnelExit as E } from "@mittwald/react-tunnel";
+import { f as w } from "./flowComponent-Cnrr91a8.js";
+import { createHtmlPortalNode as h, InPortal as N, OutPortal as O } from "react-reverse-portal";
+import * as c from "react-aria-components";
 import "mobx";
-import { u as w } from "./useOverlayController-D8pgx8nV.js";
-import { O as E, a as h } from "./OverlayTrigger-bD8_mPel.js";
-import { H as O } from "./Header-Dyx52LYx.js";
-import { A as M } from "./Action-BkFTzx0k.js";
-import { B as N } from "./Button-DtpO7pbw.js";
+import { u as M } from "./useOverlayController-D8pgx8nV.js";
+import { O as P, a as x } from "./OverlayTrigger-bD8_mPel.js";
+import { A as z } from "./Activity-CmfZpgOM.js";
+import { H as A } from "./Header-Dyx52LYx.js";
+import { A as T } from "./Action-BkFTzx0k.js";
+import { B } from "./Button-DtpO7pbw.js";
 import "@tabler/icons-react";
 import "./Icon-9pbeBcg1.js";
-import { I as x } from "./IconClose-Cv0NnMI0.js";
-const z = "flow--modal", P = "flow--modal--off-canvas", T = "flow--modal--header", B = "flow--modal--content", A = "flow--modal--action-group", G = "flow--modal--left", I = "flow--modal--close-button", e = {
-  modal: z,
-  offCanvas: P,
-  header: T,
-  content: B,
-  actionGroup: A,
+import { I } from "./IconClose-Cv0NnMI0.js";
+const F = "flow--modal", G = "flow--modal--off-canvas", H = "flow--modal--header", D = "flow--modal--content", b = "flow--modal--action-group", R = "flow--modal--left", $ = "flow--modal--close-button", e = {
+  modal: F,
+  offCanvas: G,
+  header: H,
+  content: D,
+  actionGroup: b,
   "size-s": "flow--modal--size-s",
   "size-m": "flow--modal--size-m",
   "modal-zoom": "flow--modal--modal-zoom",
   "modal-slide-in-from-right": "flow--modal--modal-slide-in-from-right",
-  left: G,
+  left: R,
   "modal-slide-in-from-left": "flow--modal--modal-slide-in-from-left",
   "modal-slide-up": "flow--modal--modal-slide-up",
-  closeButton: I
-}, D = "flow--modal-overlay--overlay", F = {
-  overlay: D,
+  closeButton: $
+}, U = "flow--modal-overlay--overlay", _ = {
+  overlay: U,
   "overlay-fade": "flow--modal-overlay--overlay-fade"
-}, H = (t) => {
+}, j = (l) => {
   const {
-    controller: a,
-    children: l,
-    isDismissable: s = !0,
-    className: m
-  } = t, f = w("Modal", {
+    controller: r,
+    children: t,
+    isDismissable: i = !0,
+    className: d,
+    _experimentalNoUnmountContent: u = !1
+  } = l, f = M("Modal", {
     reuseControllerFromContext: !0
-  }), r = a ?? f, c = r.useIsOpen(), i = p(F.overlay, m);
-  return /* @__PURE__ */ o.createElement(
-    n.ModalOverlay,
+  }), a = r ?? f, n = a.useIsOpen(), p = v(_.overlay, d), s = /* @__PURE__ */ o.createElement(c.Dialog, null, /* @__PURE__ */ o.createElement(P, { type: "Modal", controller: a }, t)), m = o.useMemo(
+    () => u ? h() : null,
+    []
+  );
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, m && /* @__PURE__ */ o.createElement(N, { node: m }, /* @__PURE__ */ o.createElement(z, { isActive: n }, s)), /* @__PURE__ */ o.createElement(
+    c.ModalOverlay,
     {
-      className: i,
-      isDismissable: s,
-      isOpen: c,
-      onOpenChange: (d) => r.setOpen(d)
+      className: p,
+      isDismissable: i,
+      isOpen: n,
+      onOpenChange: (g) => a.setOpen(g)
     },
-    /* @__PURE__ */ o.createElement(n.Modal, null, /* @__PURE__ */ o.createElement(n.Dialog, null, /* @__PURE__ */ o.createElement(E, { type: "Modal", controller: r }, l)))
-  );
-}, _ = C("Modal", (t) => {
+    /* @__PURE__ */ o.createElement(c.Modal, null, m ? /* @__PURE__ */ o.createElement(O, { node: m }) : s)
+  ));
+}, so = w("Modal", (l) => {
   const {
-    size: a = "s",
-    offCanvas: l,
-    controller: s,
-    children: m,
-    refProp: f,
-    className: r,
-    offCanvasOrientation: c = "right",
-    ...i
-  } = t, d = p(
-    l ? e.offCanvas : e.modal,
-    e[`size-${a}`],
-    e[c],
-    r
-  ), u = {
+    size: r = "s",
+    offCanvas: t,
+    controller: i,
+    children: d,
+    refProp: u,
+    className: f,
+    offCanvasOrientation: a = "right",
+    ...n
+  } = l, p = v(
+    t ? e.offCanvas : e.modal,
+    e[`size-${r}`],
+    e[a],
+    f
+  ), s = {
     Content: {
       className: e.content
     },
@@ -83,29 +89,29 @@ const z = "flow--modal", P = "flow--modal--off-canvas", T = "flow--modal--header
       spacing: "m"
     }
   };
-  return /* @__PURE__ */ o.createElement(H, { className: d, controller: s, ...i }, /* @__PURE__ */ o.createElement(v, { props: u }, /* @__PURE__ */ o.createElement(g, null, /* @__PURE__ */ o.createElement(O, { className: e.header }, /* @__PURE__ */ o.createElement(y, { id: "heading" }), l && /* @__PURE__ */ o.createElement(M, { closeOverlay: "Modal" }, /* @__PURE__ */ o.createElement(
-    N,
+  return /* @__PURE__ */ o.createElement(j, { className: p, controller: i, ...n }, /* @__PURE__ */ o.createElement(y, { props: s }, /* @__PURE__ */ o.createElement(C, null, /* @__PURE__ */ o.createElement(A, { className: e.header }, /* @__PURE__ */ o.createElement(E, { id: "heading" }), t && /* @__PURE__ */ o.createElement(T, { closeOverlay: "Modal" }, /* @__PURE__ */ o.createElement(
+    B,
     {
       variant: "plain",
       color: "secondary",
       className: e.closeButton
     },
-    /* @__PURE__ */ o.createElement(x, null)
-  ))), m)));
-}), oo = (t) => {
-  const { children: a, ...l } = t;
+    /* @__PURE__ */ o.createElement(I, null)
+  ))), d)));
+}), mo = (l) => {
+  const { children: r, ...t } = l;
   return /* @__PURE__ */ o.createElement(
-    h,
+    x,
     {
       overlayType: "Modal",
-      ...l,
-      component: n.DialogTrigger
+      ...t,
+      component: c.DialogTrigger
     },
-    a
+    r
   );
 };
 export {
-  _ as Modal,
-  oo as ModalTrigger,
-  _ as default
+  so as Modal,
+  mo as ModalTrigger,
+  so as default
 };

package/dist/types/components/Modal/Modal.d.ts

@@ -10,6 +10,7 @@ export interface ModalProps extends PropsWithChildren, FlowComponentProps, Props
     controller?: OverlayController;
     slot?: string;
     isDismissable?: boolean;
+    _experimentalNoUnmountContent?: boolean;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<never>>;
 export default Modal;

package/dist/types/components/ModalOverlay/ModalOverlay.d.ts

@@ -4,6 +4,7 @@ export interface ModalOverlayProps extends PropsWithChildren {
     controller?: OverlayController;
     isDismissable?: boolean;
     className?: string;
+    _experimentalNoUnmountContent?: boolean;
 }
 export declare const ModalOverlay: FC<ModalOverlayProps>;
 export default ModalOverlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.276",
+  "version": "0.1.0-alpha.277",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -313,7 +313,7 @@
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/date": "^3.5.6",
     "@internationalized/string-compiler": "^3.2.5",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.276",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.277",
     "@mittwald/react-use-promise": "^2.5.0",
     "@react-aria/utils": "^3.25.3",
     "@react-types/shared": "^3.25.0",
@@ -333,6 +333,7 @@
     "react-aria": "^3.35.0",
     "react-aria-components": "^1.4.0",
     "react-children-utilities": "^2.10.0",
+    "react-reverse-portal": "^2.1.2",
     "react-stately": "^3.33.0",
     "remeda": "^2.15.0",
     "use-callback-ref": "^1.3.2",
@@ -340,7 +341,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.3",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.276",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.277",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^20.0.0",
     "@storybook/addon-a11y": "^8.3.5",
@@ -417,5 +418,5 @@
       "optional": true
     }
   },
-  "gitHead": "9d75f275ef19a886f696af21cb19b59e7006a87b"
+  "gitHead": "a0c7af734768c4d7d241c61de37de45d39d53199"
 }