@mittwald/flow-react-components 0.1.0-alpha.135 → 0.1.0-alpha.137

package/dist/{Action-Dp9FyJCZ.js → Action-BGsLXvb9.js}

@@ -2,19 +2,19 @@
 /* */
 var S = Object.defineProperty;
 var B = (o, t, e) => t in o ? S(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var c = (o, t, e) => (B(o, typeof t != "symbol" ? t + "" : t, e), e);
-import y, { createContext as F, useRef as k, useContext as A } from "react";
-import { makeObservable as O, observable as I, action as M, computed as E } from "mobx";
+var a = (o, t, e) => (B(o, typeof t != "symbol" ? t + "" : t, e), e);
+import A, { createContext as F, useRef as k, useContext as y } from "react";
+import { makeObservable as O, observable as M, action as I, computed as E } from "mobx";
 import { u as w } from "./useOverlayController-CGKumeGL.js";
 import D from "invariant";
 import { u as b } from "./useSelector-DpU7_HMO.js";
-import { a as T, g as N, u as R } from "./getActionGroupSlot-izllH4ID.js";
+import { a as T, g as N, u as R } from "./getActionGroupSlot-Do-bk4GU.js";
 import "./propsContext-DzAKlmhS.js";
-import { P as $ } from "./PropsContextProvider-C6Z4XGp6.js";
+import { P as V } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
 import { d as u } from "./dynamic-ClpUSmEt.js";
-import { u as V } from "./slotContext-DoCFkzCA.js";
+import { u as $ } from "./slotContext-DoCFkzCA.js";
 const m = F(void 0), G = m.Provider, g = (o) => new Promise((t) => setTimeout(t, o)), f = {
   pending: 1e3,
   succeeded: 1500,
@@ -22,14 +22,14 @@ const m = F(void 0), G = m.Provider, g = (o) => new Promise((t) => setTimeout(t,
 };
 class C {
   constructor() {
-    c(this, "showFeedback");
-    c(this, "state", "isIdle");
-    c(this, "setPendingTimeout");
-    c(this, "error");
-    c(this, "isAsync", !1);
+    a(this, "showFeedback");
+    a(this, "state", "isIdle");
+    a(this, "setPendingTimeout");
+    a(this, "error");
+    a(this, "isAsync", !1);
     O(this, {
-      state: I,
-      updateState: M,
+      state: M,
+      updateState: I,
       isBusy: E
     });
   }
@@ -46,7 +46,7 @@ class C {
     return b(() => this.isBusy, [this]);
   }
   get isBusy() {
-    return this.state === "isExecuting" || this.state === "isPending";
+    return this.state !== "isIdle";
   }
   onAsyncStart() {
     this.isAsync = !0, this.updateState("isExecuting"), this.setPendingTimeout = window.setTimeout(
@@ -79,26 +79,26 @@ class C {
     this.updateState("isPending");
   }
 }
-const x = (o) => (...t) => {
-  const e = [...o], s = e.shift();
-  if (s) {
-    const i = s(...t), n = () => e.length === 0 ? i : x(e)(...t);
-    return i instanceof Promise ? i.then(n) : n();
+const P = (o) => (...t) => {
+  const e = [...o], n = e.shift();
+  if (n) {
+    const s = n(...t), i = () => e.length === 0 ? s : P(e)(...t);
+    return s instanceof Promise ? s.then(i) : i();
   }
 }, d = () => {
 }, L = (o, t = {}) => {
   const {
     onSync: e = d,
-    onAsync: s = d,
-    then: i = d,
-    catch: n = d,
-    finally: r = d
+    onAsync: n = d,
+    then: s = d,
+    catch: i = d,
+    finally: c = d
   } = t;
   try {
-    const a = o();
-    return a instanceof Promise ? (s(), a.then(i).catch(n).finally(r)) : (e(), i(a), r(), a);
-  } catch (a) {
-    e(), n(a), r();
+    const r = o();
+    return r instanceof Promise ? (n(), r.then(s).catch(i).finally(c)) : (e(), s(r), c(), r);
+  } catch (r) {
+    e(), i(r), c();
   }
 }, U = () => {
 };
@@ -107,16 +107,16 @@ function j(o) {
     return o.confirmationModalController.open;
   const t = o.getOverlayController(), {
     action: e,
-    toggleOverlay: s,
-    closeOverlay: i,
-    openOverlay: n
+    toggleOverlay: n,
+    closeOverlay: s,
+    openOverlay: i
   } = o.actionProps;
-  return e || (n && t ? t.open : i && t || s && t ? t.close : U);
+  return e || (i && t ? t.open : s && t || n && t ? t.close : U);
 }
 class v {
   constructor(t) {
-    c(this, "actions", []);
-    c(this, "baseAction");
+    a(this, "actions", []);
+    a(this, "baseAction");
     this.baseAction = t;
   }
   addAction(t) {
@@ -125,94 +125,94 @@ class v {
   async executeBatch(t) {
     if (this.actions.length === 0)
       return;
-    const e = this.actions[this.actions.length - 1].actionProps.showFeedback, s = this.baseAction.state.withFeedback(
+    const e = this.actions[this.actions.length - 1].actionProps.showFeedback, n = this.baseAction.state.withFeedback(
       this.baseAction.needsConfirmation ? !1 : e
-    ), i = this.actions.map((a) => j(a)), n = x(i);
-    let r;
-    if (await L(() => n(...t), {
-      onAsync: () => s.onAsyncStart(),
-      then: () => s.onSucceeded(),
-      catch: (a) => {
-        s.onFailed(a), r = a;
+    ), s = this.actions.map((r) => j(r)), i = P(s);
+    let c;
+    if (await L(() => i(...t), {
+      onAsync: () => n.onAsyncStart(),
+      then: () => n.onSucceeded(),
+      catch: (r) => {
+        n.onFailed(r), c = r;
       }
-    }), r)
-      throw r;
+    }), c)
+      throw c;
   }
 }
 class q {
   constructor(t) {
-    c(this, "action");
-    c(this, "execute", (...t) => {
+    a(this, "action");
+    a(this, "execute", (...t) => {
       const e = this.getBatchedActions();
       (async () => {
-        for (const i of e)
-          await i.executeBatch(t);
-      })().catch((i) => console.error(i));
+        for (const s of e)
+          await s.executeBatch(t);
+      })().catch((s) => console.error(s));
     });
-    c(this, "getBatchedActions", () => {
+    a(this, "getBatchedActions", () => {
       let t = this.action;
       const e = [];
-      let s = new v(
+      let n = new v(
         this.action
-      ), i = 0;
+      ), s = 0;
       for (; t; ) {
-        const { action: n, break: r, skip: a } = t.actionProps;
+        const { action: i, break: c, skip: r } = t.actionProps;
         if (t.needsConfirmation) {
-          s.addAction(t);
+          n.addAction(t);
           break;
         }
-        if (a) {
-          i = a === !0 ? 1 : a, t = t.parentAction;
+        if (r) {
+          s = r === !0 ? 1 : r, t = t.parentAction;
           continue;
         }
-        if (i > 0) {
-          t = t.parentAction, i--;
+        if (s > 0) {
+          t = t.parentAction, s--;
           continue;
         }
-        if (r)
+        if (c)
           break;
-        n || (e.push(s), s = new v(this.action)), s.addAction(t), t = t.parentAction;
+        i || (e.push(n), n = new v(this.action)), n.addAction(t), t = t.parentAction;
       }
-      return e.push(s), e;
+      return e.push(n), e;
     });
     this.action = t;
   }
 }
 class l {
   constructor(t) {
-    c(this, "state");
-    c(this, "needsConfirmation");
-    c(this, "actionProps");
-    c(this, "parentAction");
-    c(this, "confirmationModalController");
-    c(this, "overlayController");
-    c(this, "execute", (...t) => {
+    a(this, "state");
+    a(this, "needsConfirmation");
+    a(this, "actionProps");
+    a(this, "parentAction");
+    a(this, "confirmationModalController");
+    a(this, "overlayController");
+    a(this, "execute", (...t) => {
       new q(this).execute(...t);
     });
     const {
       actionProps: e,
-      needsConfirmation: s,
-      parentAction: i,
-      overlayController: n,
-      confirmationModalController: r,
-      state: a
+      needsConfirmation: n,
+      parentAction: s,
+      overlayController: i,
+      confirmationModalController: c,
+      state: r
     } = t;
-    this.actionProps = e, this.parentAction = i, this.confirmationModalController = r, this.needsConfirmation = s, this.overlayController = n, this.state = a;
+    this.actionProps = e, this.parentAction = s, this.confirmationModalController = c, this.needsConfirmation = n, this.overlayController = i, this.state = r;
   }
   static useNew(t, e = {}) {
-    const s = A(m), i = w(), n = w(), r = C.useNew();
+    const n = y(m), s = w(), i = w(), c = C.useNew();
     return new l({
-      parentAction: s,
-      overlayController: i,
-      confirmationModalController: n,
+      parentAction: n,
+      overlayController: s,
+      confirmationModalController: i,
       needsConfirmation: !1,
       actionProps: t,
-      state: r,
+      state: c,
       ...e
     });
   }
   static use() {
-    const t = A(m);
+    const t = y(m);
     return D(!!t, "Action context is not defined"), T.useRegisterState(t.state), t;
   }
   static useConfirmationAction() {
@@ -238,45 +238,49 @@ class l {
     return t(this.actionProps.openOverlay) ?? t(this.actionProps.closeOverlay) ?? t(this.actionProps.toggleOverlay);
   }
 }
-const z = (o) => V()[o], p = (o) => z("Modal") === "actionConfirm" ? N(o) : void 0, h = (o) => {
-  const t = l.use(), e = t.state.useValue(), s = p(o) === "primary", i = t.confirmationModalController.useIsOpen();
-  return t.needsConfirmation && i && !s ? "isIdle" : e;
-}, it = (o) => {
-  const { children: t, ...e } = o, s = l.useNew(e), i = {
-    Button: {
-      onPress: u((n) => {
-        const r = l.use(), a = l.useConfirmationAction(), P = p(n) === "primary";
-        return p(n) === "abort" ? r.confirmationModalController.close : P ? a.execute : r.execute;
-      }),
-      isPending: u(
-        (n) => h(n) === "isPending"
-      ),
-      isSucceeded: u(
-        (n) => h(n) === "isSucceeded"
-      ),
-      isFailed: u((n) => h(n) === "isFailed"),
-      "aria-disabled": u(() => {
-        const n = h(o), r = R().useIsBusy();
-        return n === "isExecuting" || r;
-      })
-    },
+const z = (o) => $()[o], p = (o) => z("Modal") === "actionConfirm" ? N(o) : void 0, h = (o) => {
+  const t = l.use(), e = t.state.useValue(), n = p(o) === "primary", s = t.confirmationModalController.useIsOpen();
+  return t.needsConfirmation && s && !n ? "isIdle" : e;
+}, x = {
+  onPress: u((o) => {
+    const t = l.use(), e = l.useConfirmationAction(), n = p(o) === "primary";
+    return p(o) === "abort" ? t.confirmationModalController.close : n ? e.execute : t.execute;
+  }),
+  isPending: u((o) => h(o) === "isPending"),
+  isSucceeded: u(
+    (o) => h(o) === "isSucceeded"
+  ),
+  isFailed: u((o) => h(o) === "isFailed"),
+  "aria-disabled": u((o) => {
+    const t = h(o), e = R().useIsBusy();
+    return t === "isExecuting" || e;
+  })
+}, st = (o) => {
+  const { children: t, ...e } = o, n = l.useNew(e), s = {
+    Button: x,
     Link: {
       onPress: u(() => l.use().execute)
     },
     Modal: {
-      slot: u((n) => {
-        const { slot: r } = n, a = l.use();
-        return a.needsConfirmation = r === "actionConfirm", r;
+      slot: u((i) => {
+        const { slot: c } = i, r = l.use();
+        return r.needsConfirmation = c === "actionConfirm", c;
+      }),
+      isDismissable: u((i) => {
+        const r = l.use().state.useValue();
+        return r === "isExecuting" || r === "isPending" ? !1 : i.isDismissable;
       }),
-      isDismissable: u((n) => l.use().state.useIsBusy() ? !1 : n.isDismissable),
       controller: u(() => {
-        const n = l.use();
-        return n.needsConfirmation ? n.confirmationModalController : n.getOverlayController();
-      })
+        const i = l.use();
+        return i.needsConfirmation ? i.confirmationModalController : i.getOverlayController();
+      }),
+      ActionGroup: {
+        Button: x
+      }
     }
   };
-  return /* @__PURE__ */ y.createElement(G, { value: s }, /* @__PURE__ */ y.createElement($, { props: i, mergeInParentContext: !0 }, t));
+  return /* @__PURE__ */ A.createElement(G, { value: n }, /* @__PURE__ */ A.createElement(V, { props: s, mergeInParentContext: !0 }, t));
 };
 export {
-  it as A
+  st as A
 };

package/dist/Action.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as t } from "./Action-Dp9FyJCZ.js";
+import { A as t } from "./Action-BGsLXvb9.js";
 export {
   t as Action,
   t as default

package/dist/ActionGroup.js

@@ -9,7 +9,7 @@ import { d as e } from "./dynamic-ClpUSmEt.js";
 import i from "clsx";
 import { f as g } from "./flowComponent-CPKCCJEg.js";
 import { TunnelProvider as E, TunnelExit as n } from "@mittwald/react-tunnel";
-import { A as C, g as a } from "./getActionGroupSlot-izllH4ID.js";
+import { A as C, g as a } from "./getActionGroupSlot-Do-bk4GU.js";
 const G = "flow--action-group--action-group-container", v = "flow--action-group", x = "flow--action-group--primary", N = "flow--action-group--secondary", P = "flow--action-group--abort", r = {
   actionGroupContainer: G,
   actionGroup: v,

package/dist/CopyButton.js

@@ -15,7 +15,7 @@ import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
 import { f as C } from "./flowComponent-CPKCCJEg.js";
-import { A as E } from "./Action-Dp9FyJCZ.js";
+import { A as E } from "./Action-BGsLXvb9.js";
 const B = {
   "de-DE": {
     "copyButton.copy": "Kopieren"

package/dist/{Link-TcBL3IVI.js → Link-CcYCy_KC.js}

@@ -7,8 +7,8 @@ import { P as L } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "./propsContext-DzAKlmhS.js";
 import "remeda";
-import g from "clsx";
-import { f as h } from "./flowComponent-CPKCCJEg.js";
+import h from "clsx";
+import { f as g } from "./flowComponent-CPKCCJEg.js";
 import { l as y } from "./context-BlNV7smK.js";
 const N = "flow--link", E = "flow--link--inline", F = "flow--link--icon", v = "flow--link--dark", z = "flow--link--light", n = {
   link: N,
@@ -16,34 +16,34 @@ const N = "flow--link", E = "flow--link--inline", F = "flow--link--icon", v = "f
   icon: F,
   dark: v,
   light: z
-}, G = h("Link", (r) => {
+}, G = g("Link", (t) => {
   const {
-    children: i,
-    className: t,
-    inline: e,
-    linkComponent: l,
-    color: s = "primary",
-    unstyled: m = !1,
-    "aria-current": a,
-    refProp: c,
-    ...p
-  } = r, { linkComponent: k } = d(y), f = l ?? k ?? P.Link, C = m ? t : g(n.link, e && n.inline, n[s], t), u = {
+    children: l,
+    className: r,
+    inline: s,
+    linkComponent: i,
+    color: m = "primary",
+    unstyled: a = !1,
+    "aria-current": c,
+    refProp: p,
+    ...k
+  } = t, { linkComponent: e } = d(y), f = i || (t.href && e ? e : P.Link), C = a ? r : h(n.link, s && n.inline, n[m], r), u = {
     Icon: {
       className: n.icon,
       size: "s"
     }
   }, x = {
-    "aria-current": a
+    "aria-current": c
   };
   return /* @__PURE__ */ o.createElement(w, null, /* @__PURE__ */ o.createElement(
     f,
     {
-      ...p,
+      ...k,
       ...x,
       className: C,
-      ref: c
+      ref: p
     },
-    /* @__PURE__ */ o.createElement(L, { props: u }, i)
+    /* @__PURE__ */ o.createElement(L, { props: u }, l)
   ));
 });
 export {

package/dist/Link.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { L as o } from "./Link-TcBL3IVI.js";
+import { L as o } from "./Link-CcYCy_KC.js";
 export {
   o as Link,
   o as default

package/dist/List.js

@@ -35,7 +35,7 @@ import { P as Tt } from "./PropsContextProvider-C6Z4XGp6.js";
 import { d as Lt } from "./dynamic-ClpUSmEt.js";
 import { I as wt } from "./IconContextMenu-Bmk1_j_0.js";
 import { TunnelProvider as Bt, TunnelExit as z } from "@mittwald/react-tunnel";
-import { L as At } from "./Link-TcBL3IVI.js";
+import { L as At } from "./Link-CcYCy_KC.js";
 import { d as E, a as O } from "./deepFindOfType-6pG0fH7S.js";
 import { ListLoaderAsyncResource as kt } from "./List/ListLoaderAsyncResource.js";
 import { I as Dt } from "./InlineCode-BT-PKxVv.js";

package/dist/Modal.js

@@ -11,7 +11,7 @@ import { f as u } from "./flowComponent-CPKCCJEg.js";
 import { M as g } from "./ModalOverlay-BSu4UEnW.js";
 import * as v from "react-aria-components";
 import { O as w } from "./OverlayTrigger-DbjMkqKf.js";
-const z = "flow--modal", C = "flow--modal--action-group", E = "flow--modal--content", x = "flow--modal--off-canvas", e = {
+const z = "flow--modal", C = "flow--modal--action-group", E = "flow--modal--content", T = "flow--modal--off-canvas", e = {
   modal: z,
   "modal-zoom": "flow--modal--modal-zoom",
   actionGroup: C,
@@ -19,20 +19,20 @@ const z = "flow--modal", C = "flow--modal--action-group", E = "flow--modal--cont
   "size-s": "flow--modal--size-s",
   "size-m": "flow--modal--size-m",
   "size-l": "flow--modal--size-l",
-  offCanvas: x,
+  offCanvas: T,
   "modal-slide-in": "flow--modal--modal-slide-in",
   "modal-slide-up": "flow--modal--modal-slide-up"
-}, R = u("Modal", (t) => {
+}, D = u("Modal", (l) => {
   const {
-    size: l = "s",
+    size: t = "s",
     offCanvas: a,
     controller: n,
     children: r,
-    refProp: P,
+    refProp: x,
     ...m
-  } = t, s = d(
+  } = l, s = d(
     e.modal,
-    e[`size-${l}`],
+    e[`size-${t}`],
     a && e.offCanvas
   ), i = {
     Content: {
@@ -47,10 +47,10 @@ const z = "flow--modal", C = "flow--modal--action-group", E = "flow--modal--cont
       tunnelId: "buttons"
     }
   };
-  return /* @__PURE__ */ o.createElement(g, { className: s, controller: n, ...m }, /* @__PURE__ */ o.createElement(c, { props: i, mergeInParentContext: !0 }, /* @__PURE__ */ o.createElement(f, null, /* @__PURE__ */ o.createElement("div", { className: e.content }, r), /* @__PURE__ */ o.createElement(p, { id: "buttons" }))));
-}), D = (t) => /* @__PURE__ */ o.createElement(w, null, /* @__PURE__ */ o.createElement(v.DialogTrigger, null, t.children));
+  return /* @__PURE__ */ o.createElement(g, { className: s, controller: n, ...m }, /* @__PURE__ */ o.createElement(c, { props: i }, /* @__PURE__ */ o.createElement(f, null, /* @__PURE__ */ o.createElement("div", { className: e.content }, r), /* @__PURE__ */ o.createElement(p, { id: "buttons" }))));
+}), F = (l) => /* @__PURE__ */ o.createElement(w, null, /* @__PURE__ */ o.createElement(v.DialogTrigger, null, l.children));
 export {
-  R as Modal,
-  D as ModalTrigger,
-  R as default
+  D as Modal,
+  F as ModalTrigger,
+  D as default
 };

package/dist/Notification.js

@@ -0,0 +1,67 @@
+"use client"
+/* */
+import t from "react";
+import d from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as w } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { S as g } from "./StatusIcon-Dj5p-iL1.js";
+import { L as h } from "./Link-CcYCy_KC.js";
+import { B as k } from "./Button-BPAhEOTg.js";
+import "@tabler/icons-react";
+import "./Icon-D4bkU_pz.js";
+import { I as x } from "./IconClose-FTrJdf_N.js";
+const N = "flow--notification", C = "flow--notification--link", E = "flow--notification--status-icon", I = "flow--notification--heading", L = "flow--notification--text", P = "flow--notification--close", v = "flow--notification--info", y = "flow--notification--has-link", B = "flow--notification--warning", S = "flow--notification--danger", z = "flow--notification--success", o = {
+  notification: N,
+  link: C,
+  statusIcon: E,
+  heading: I,
+  text: L,
+  close: P,
+  info: v,
+  hasLink: y,
+  warning: B,
+  danger: S,
+  success: z
+}, O = (a) => {
+  const {
+    children: c,
+    className: l,
+    status: i = "info",
+    role: r = "alert",
+    href: s,
+    onClick: e,
+    onClose: n,
+    autoClose: A,
+    ...f
+  } = a, m = d(
+    o.notification,
+    o[i],
+    (e || n || s) && o.hasLink,
+    l
+  ), p = {
+    Heading: {
+      className: o.heading,
+      level: 4
+    },
+    Text: {
+      className: o.text
+    }
+  }, u = n && /* @__PURE__ */ t.createElement(
+    k,
+    {
+      size: "s",
+      className: o.close,
+      variant: "plain",
+      color: "secondary",
+      onPress: n
+    },
+    /* @__PURE__ */ t.createElement(x, null)
+  );
+  return /* @__PURE__ */ t.createElement("div", { ...f, className: m, role: r }, /* @__PURE__ */ t.createElement(h, { unstyled: !0, href: s, className: o.link, onPress: e }, /* @__PURE__ */ t.createElement(g, { className: o.statusIcon, status: i }), /* @__PURE__ */ t.createElement(w, { props: p }, c)), u);
+};
+export {
+  O as Notification,
+  O as default
+};