@mittwald/flow-react-components 0.1.0-alpha.124 → 0.1.0-alpha.126

package/dist/{Action-7EQNT1az.js → Action-BLnSsHE1.js}

@@ -1,23 +1,23 @@
 "use client"
 /* */
-var N = Object.defineProperty;
-var R = (t, e, n) => e in t ? N(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var l = (t, e, n) => (R(t, typeof e != "symbol" ? e + "" : e, n), n);
-import r, { useEffect as T } from "react";
-import { u as m, a as W, A as G } from "./context-CEG7VfKL.js";
+var $ = Object.defineProperty;
+var N = (t, e, n) => e in t ? $(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var l = (t, e, n) => (N(t, typeof e != "symbol" ? e + "" : e, n), n);
+import r, { useEffect as W } from "react";
+import { u as h, a as G, A as L } from "./context-D3hdrTHO.js";
 import "./propsContext-CauylOgH.js";
-import { P as v } from "./PropsContextProvider-ChpH8eF2.js";
+import { P as M } from "./PropsContextProvider-ChpH8eF2.js";
 import "@react-aria/utils";
 import "remeda";
-import { W as L } from "./Wrap-DGT1h1o3.js";
-const d = () => {
-}, U = (t, e = {}) => {
+import { W as U } from "./Wrap-DGT1h1o3.js";
+const u = () => {
+}, j = (t, e = {}) => {
   const {
-    onSync: n = d,
-    onAsync: o = d,
-    then: s = d,
-    catch: i = d,
-    finally: c = d
+    onSync: n = u,
+    onAsync: o = u,
+    then: s = u,
+    catch: i = u,
+    finally: c = u
   } = e;
   try {
     const a = t();
@@ -25,12 +25,12 @@ const d = () => {
   } catch (a) {
     n(), i(a), c();
   }
-}, P = (t) => new Promise((e) => setTimeout(e, t)), b = {
+}, P = (t) => new Promise((e) => setTimeout(e, t)), x = {
   pending: 1e3,
   succeeded: 1500,
   failed: 2e3
 };
-class j {
+class q {
   constructor(e, n, o = {}) {
     l(this, "options");
     l(this, "state");
@@ -41,12 +41,18 @@ class j {
       resetAfterDone: s = !0,
       onFeedbackDone: i = () => {
       },
-      showFeedback: c = !1
+      showFeedback: c = !1,
+      resetDelayMs: a = 0
     } = o;
-    this.state = e, this.args = n, this.options = { resetAfterDone: s, onFeedbackDone: i, showFeedback: c };
+    this.state = e, this.args = n, this.options = {
+      resetAfterDone: s,
+      onFeedbackDone: i,
+      showFeedback: c,
+      resetDelayMs: a
+    };
   }
   onAsyncStart() {
-    this.options.showFeedback = !0, this.state.updateState("isExecuting"), setTimeout(() => this.startPending(), b.pending);
+    this.options.showFeedback = !0, this.state.updateState("isExecuting"), setTimeout(() => this.startPending(), x.pending);
   }
   onSucceeded() {
     return this.onDone();
@@ -54,14 +60,19 @@ class j {
   async onFailed(e) {
     this.error = e ?? new Error("Unknown error"), console.error(e), await this.onDone();
   }
+  setResetDelay(e) {
+    this.options.resetDelayMs = e;
+  }
   async startFailedFeedback() {
-    this.state.updateState("isFailed"), await P(b.failed), this.resetAfterDone();
+    this.state.updateState("isFailed"), await P(x.failed), this.resetAfterDone();
   }
   async startSucceededFeedback() {
-    this.state.updateState("isSucceeded"), await P(b.succeeded), this.resetAfterDone();
+    this.state.updateState("isSucceeded"), await P(x.succeeded), this.resetAfterDone();
   }
   resetAfterDone() {
-    this.options.resetAfterDone && this.state.updateState("isIdle"), this.error || this.options.onFeedbackDone(...this.args);
+    setTimeout(() => {
+      this.options.resetAfterDone && this.state.updateState("isIdle"), this.error || this.options.onFeedbackDone(...this.args);
+    }, this.options.resetDelayMs);
   }
   async onDone() {
     this.isDone = !0, this.options.showFeedback ? this.error ? await this.startFailedFeedback() : await this.startSucceededFeedback() : this.resetAfterDone();
@@ -70,20 +81,20 @@ class j {
     this.isDone || this.state.updateState("isPending");
   }
 }
-const M = (t) => (...e) => {
+const v = (t) => (...e) => {
   const n = [...t], o = n.shift();
   if (o) {
-    const s = o(...e), i = () => n.length === 0 ? s : M(n)(...e);
+    const s = o(...e), i = () => n.length === 0 ? s : v(n)(...e);
     return s instanceof Promise ? s.then(i) : i();
   }
-}, q = () => {
-}, y = () => {
+}, z = () => {
+}, b = () => {
   var n;
-  const t = m(), e = t.actionProps.confirm || t.actionProps.abort ? ((n = t.parentContext) == null ? void 0 : n.state) ?? t.state : t.state;
+  const t = h(), e = t.actionProps.confirm || t.actionProps.abort ? ((n = t.parentContext) == null ? void 0 : n.state) ?? t.state : t.state;
   return {
     state: e,
     execute: async (...o) => {
-      var E;
+      var D;
       const {
         actionProps: s,
         confirmationModalController: i,
@@ -91,50 +102,55 @@ const M = (t) => (...e) => {
         parentContext: a
       } = t;
       if (s.abort) {
-        (E = a == null ? void 0 : a.confirmationModalController) == null || E.close();
+        (D = a == null ? void 0 : a.confirmationModalController) == null || D.close();
         return;
       }
       if (c && !i.isOpen) {
         i.open();
         return;
       }
-      const h = new j(e, o, s), A = [];
-      let u, p, f = t;
-      for (; f; ) {
+      const f = new q(e, o, s), A = [];
+      let d, p, m = t;
+      for (; m; ) {
         const {
           actionProps: C,
-          overlayController: O,
-          confirmationModalController: S,
-          needsConfirmation: B
-        } = f, {
-          action: g,
-          toggleOverlay: F,
-          openOverlay: D,
-          closeOverlay: k,
-          break: $
+          overlayController: B,
+          confirmationModalController: E,
+          needsConfirmation: R
+        } = m, {
+          action: S,
+          toggleOverlay: g,
+          openOverlay: F,
+          closeOverlay: w,
+          break: T
         } = C;
-        if ($)
+        if (T)
           break;
-        if (B)
-          if (u) {
-            p = S;
+        if (R)
+          if (d) {
+            p = E;
             break;
           } else
-            u = S;
-        const x = (w) => typeof w == "boolean" ? O : w;
+            d = E;
+        const y = (k) => typeof k == "boolean" ? B : k;
         A.push(
-          g || (F ? x(F).toggle : D ? x(D).open : k ? x(k).close : q)
-        ), f = f.parentContext;
+          S || (g ? y(g).toggle : F ? y(F).open : w ? y(w).close : z)
+        ), m = m.parentContext;
       }
-      await U(() => M(A)(o), {
-        onAsync: () => h.onAsyncStart(),
-        then: () => h.onSucceeded(),
-        catch: (C) => h.onFailed(C)
-      }), p && p.open(), u && u.close();
+      const O = v(A);
+      f.setResetDelay(
+        d ? 500 : 0
+      ), await j(() => O(o), {
+        onAsync: () => f.onAsyncStart(),
+        then: async () => {
+          await f.onSucceeded(), p && p.open(), d && d.close();
+        },
+        catch: (C) => f.onFailed(C)
+      });
     }
   };
 }, I = (t, e) => {
-  const { actionProps: n, needsConfirmation: o } = m(), s = y(), i = s.state.useState();
+  const { actionProps: n, needsConfirmation: o } = h(), s = b(), i = s.state.useState();
   return o ? /* @__PURE__ */ r.createElement(t, { ...e, onPress: s.execute }) : n.abort ? /* @__PURE__ */ r.createElement(
     t,
     {
@@ -153,8 +169,8 @@ const M = (t) => (...e) => {
       isFailed: i === "isFailed"
     }
   );
-}, z = (t, e) => {
-  const { needsConfirmation: n } = m(), o = y(), s = o.state.useState();
+}, H = (t, e) => {
+  const { needsConfirmation: n } = h(), o = b(), s = o.state.useState();
   return n ? /* @__PURE__ */ r.createElement(t, { ...e, onPress: o.execute }) : /* @__PURE__ */ r.createElement(
     t,
     {
@@ -163,17 +179,17 @@ const M = (t) => (...e) => {
       "aria-disabled": s !== "isIdle"
     }
   );
-}, H = (t, e) => {
+}, J = (t, e) => {
   const n = e.color === "secondary", o = e.color === "primary" || e.color === "danger" || e.color === "accent";
   if (!o && !n)
     return /* @__PURE__ */ r.createElement(t, { ...e });
   const s = { Button: { render: I } };
-  return /* @__PURE__ */ r.createElement(v, { props: s }, /* @__PURE__ */ r.createElement(K, { abort: n, confirm: o }, /* @__PURE__ */ r.createElement(t, { ...e })));
-}, J = (t, e) => {
+  return /* @__PURE__ */ r.createElement(M, { props: s }, /* @__PURE__ */ r.createElement(Q, { abort: n, confirm: o }, /* @__PURE__ */ r.createElement(t, { ...e })));
+}, K = (t, e) => {
   if (e.slot !== "actionConfirm")
     return /* @__PURE__ */ r.createElement(t, { ...e });
-  const n = m(), o = y().state.useState();
-  T(() => (n.needsConfirmation = !0, () => {
+  const n = h(), o = b().state.useState();
+  W(() => (n.needsConfirmation = !0, () => {
     n.needsConfirmation = !1;
   }), [n]);
   const s = o === "isIdle" ? e.isDismissable : !1;
@@ -185,13 +201,13 @@ const M = (t) => (...e) => {
       isDismissable: s
     }
   );
-}, K = (t) => {
-  const { children: e, ...n } = t, o = W(n), s = !!o.parentContext && !!o.parentContext.parentContext, i = {
+}, Q = (t) => {
+  const { children: e, ...n } = t, o = G(n), s = !!o.parentContext && !!o.parentContext.parentContext, i = {
     Modal: {
-      render: J,
+      render: K,
       ButtonGroup: {
         Button: {
-          render: H
+          render: J
         }
       }
     },
@@ -199,11 +215,11 @@ const M = (t) => (...e) => {
       render: I
     },
     Link: {
-      render: z
+      render: H
     }
   };
-  return /* @__PURE__ */ r.createElement(G, { value: o }, /* @__PURE__ */ r.createElement(L, { if: !s }, /* @__PURE__ */ r.createElement(
-    v,
+  return /* @__PURE__ */ r.createElement(L, { value: o }, /* @__PURE__ */ r.createElement(U, { if: !s }, /* @__PURE__ */ r.createElement(
+    M,
     {
       props: i,
       dependencies: [o],
@@ -213,5 +229,5 @@ const M = (t) => (...e) => {
   )));
 };
 export {
-  K as A
+  Q as A
 };

package/dist/Action.js

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

package/dist/CopyButton.js

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

package/dist/Header-uOS96l33.js

@@ -0,0 +1,11 @@
+"use client"
+/* */
+import a from "react";
+import { f as c } from "./flowComponent-Cv_SURLH.js";
+const s = c("Header", (e) => {
+  const { children: r, refProp: t, elementType: o = "header", ...n } = e, m = o;
+  return /* @__PURE__ */ a.createElement(m, { ...n, ref: t }, r);
+});
+export {
+  s as H
+};

package/dist/Header.js

@@ -1,12 +1,7 @@
 "use client"
 /* */
-import m from "react";
-import { f } from "./flowComponent-Cv_SURLH.js";
-const p = f("Header", (e) => {
-  const { children: r, refProp: t, elementType: o = "header", ...n } = e, a = o;
-  return /* @__PURE__ */ m.createElement(a, { ...n, ref: t }, r);
-});
+import { H as e } from "./Header-uOS96l33.js";
 export {
-  p as Header,
-  p as default
+  e as Header,
+  e as default
 };

package/dist/Modal.js

@@ -8,10 +8,10 @@ import "@react-aria/utils";
 import "remeda";
 import { TunnelProvider as p, TunnelExit as c } from "@mittwald/react-tunnel";
 import { f as u } from "./flowComponent-Cv_SURLH.js";
-import { O as w } from "./Overlay-CUZ1KZa8.js";
+import { O as w } from "./Overlay-BWA78Wvu.js";
 import "mobx";
-import "./index-BlZLqtIV.js";
-import "./context-CEG7VfKL.js";
+import "./useOverlayController-CGKumeGL.js";
+import "./context-D3hdrTHO.js";
 const v = "flow--modal", z = "flow--modal--button-group", C = "flow--modal--content", b = "flow--modal--off-canvas", t = {
   modal: v,
   "modal-zoom": "flow--modal--modal-zoom",

package/dist/OffCanvas.js

@@ -1,42 +1,47 @@
 "use client"
 /* */
-import o from "react";
+import e from "react";
 import c from "clsx";
 import { B as f } from "./Button-tEtjVHFC.js";
 import "@tabler/icons-react";
 import "./Icon-DXq5lwp4.js";
 import { I as m } from "./IconClose-BuJDcvk1.js";
-import { A as i } from "./Action-7EQNT1az.js";
-import { O as p } from "./Overlay-CUZ1KZa8.js";
+import { A as i } from "./Action-BLnSsHE1.js";
+import { O as p } from "./Overlay-BWA78Wvu.js";
 import "mobx";
-import "./index-BlZLqtIV.js";
+import "./useOverlayController-CGKumeGL.js";
 import "./propsContext-CauylOgH.js";
 import { P as v } from "./PropsContextProvider-ChpH8eF2.js";
 import "@react-aria/utils";
 import "remeda";
-const u = "flow--off-canvas", d = "flow--off-canvas--close-button", t = {
-  offCanvas: u,
+import { TunnelProvider as d, TunnelExit as u } from "@mittwald/react-tunnel";
+import { H as E } from "./Header-uOS96l33.js";
+const C = "flow--off-canvas", h = "flow--off-canvas--header", w = "flow--off-canvas--close-button", o = {
+  offCanvas: C,
   "off-canvas-slide-in": "flow--off-canvas--off-canvas-slide-in",
   "off-canvas-slide-out": "flow--off-canvas--off-canvas-slide-out",
-  closeButton: d
-}, z = (s) => {
-  const { controller: a, children: e, className: r } = s, n = c(t.offCanvas, r), l = {
+  header: h,
+  closeButton: w
+}, q = (t) => {
+  const { controller: a, children: r, className: n } = t, s = c(o.offCanvas, n), l = {
     Heading: {
-      slot: "title"
+      slot: "title",
+      tunnelId: "heading",
+      levelVisual: 4,
+      level: 2
     }
   };
-  return /* @__PURE__ */ o.createElement(p, { controller: a, className: n }, /* @__PURE__ */ o.createElement(i, { closeOverlay: !0 }, /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ e.createElement(p, { controller: a, className: s }, /* @__PURE__ */ e.createElement(v, { props: l }, /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(E, { className: o.header }, /* @__PURE__ */ e.createElement(u, { id: "heading" }), /* @__PURE__ */ e.createElement(i, { closeOverlay: !0 }, /* @__PURE__ */ e.createElement(
     f,
     {
       variant: "plain",
-      size: "s",
       color: "secondary",
-      className: t.closeButton
+      className: o.closeButton
     },
-    /* @__PURE__ */ o.createElement(m, null)
-  )), /* @__PURE__ */ o.createElement(v, { props: l }, e));
+    /* @__PURE__ */ e.createElement(m, null)
+  ))), r)));
 };
 export {
-  z as OffCanvas,
-  z as default
+  q as OffCanvas,
+  q as default
 };

package/dist/{Overlay-CUZ1KZa8.js → Overlay-BWA78Wvu.js}

@@ -3,7 +3,7 @@
 import * as r from "react-aria-components";
 import e from "react";
 import y from "clsx";
-import { u as p, a as u } from "./index-BlZLqtIV.js";
+import { u as p, a as u } from "./useOverlayController-CGKumeGL.js";
 import "mobx";
 const O = "flow--overlay", f = {
   overlay: O,

package/dist/OverlayTrigger.js

@@ -2,8 +2,8 @@
 /* */
 import r from "react";
 import "mobx";
-import { u as l, a as m } from "./index-BlZLqtIV.js";
-import { A as p } from "./Action-7EQNT1az.js";
+import { u as l, a as m } from "./useOverlayController-CGKumeGL.js";
+import { A as p } from "./Action-BLnSsHE1.js";
 import "./propsContext-CauylOgH.js";
 import { P as i } from "./PropsContextProvider-ChpH8eF2.js";
 import "@react-aria/utils";

package/dist/Table.js

@@ -0,0 +1,40 @@
+"use client"
+/* */
+import o from "react";
+import * as n from "react-aria-components";
+import r from "clsx";
+const m = "flow--table--table-container", b = "flow--table", d = "flow--table--header", N = "flow--table--body", i = "flow--table--cell", u = "flow--table--column", c = {
+  tableContainer: m,
+  table: b,
+  header: d,
+  body: N,
+  cell: i,
+  column: u
+}, h = (e) => {
+  const { children: a, className: t, ...l } = e, s = r(c.table, t);
+  return /* @__PURE__ */ o.createElement("div", { className: c.tableContainer }, /* @__PURE__ */ o.createElement(n.Table, { className: s, ...l }, a));
+}, w = (e) => {
+  const { children: a, className: t, ...l } = e, s = r(c.body, t);
+  return /* @__PURE__ */ o.createElement(n.TableBody, { className: s, ...l }, a);
+}, T = (e) => {
+  const { children: a, className: t, ...l } = e, s = r(c.cell, t);
+  return /* @__PURE__ */ o.createElement(n.Cell, { className: s, ...l }, a);
+}, y = (e) => {
+  const { children: a, className: t, ...l } = e, s = r(c.column, t);
+  return /* @__PURE__ */ o.createElement(n.Column, { isRowHeader: !0, className: s, ...l }, a);
+}, E = (e) => {
+  const { children: a, className: t, ...l } = e, s = r(c.header, t);
+  return /* @__PURE__ */ o.createElement(n.TableHeader, { className: s, ...l }, a);
+}, p = (e) => {
+  const { children: a, className: t, ...l } = e, s = r(c.row, t);
+  return /* @__PURE__ */ o.createElement(n.Row, { className: s, ...l }, a);
+};
+export {
+  h as Table,
+  w as TableBody,
+  T as TableCell,
+  y as TableColumn,
+  E as TableHeader,
+  p as TableRow,
+  h as default
+};

package/dist/{context-CEG7VfKL.js → context-D3hdrTHO.js}

@@ -4,7 +4,7 @@ var u = Object.defineProperty;
 var m = (e, t, o) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
 var a = (e, t, o) => (m(e, typeof t != "symbol" ? t + "" : t, o), o);
 import { useRef as C, createContext as f, useMemo as d, useContext as p } from "react";
-import { O as i, u as l } from "./index-BlZLqtIV.js";
+import { O as i, u as l } from "./useOverlayController-CGKumeGL.js";
 import { makeObservable as v, observable as x, action as w } from "mobx";
 import { u as b } from "./useSelector-DpU7_HMO.js";
 class r {

package/dist/controller.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { O as l, u as o } from "./index-BlZLqtIV.js";
+import { O as l, u as o } from "./useOverlayController-CGKumeGL.js";
 export {
   l as OverlayController,
   o as useOverlayController

package/dist/hooks.js

@@ -1,8 +1,15 @@
 "use client"
 /* */
 import "mobx";
-import "react";
-import { u as l } from "./index-BlZLqtIV.js";
+import { useRef as n, useEffect as s } from "react";
+import { u as i } from "./useOverlayController-CGKumeGL.js";
+const m = (r, e, t = []) => {
+  const o = n(r);
+  s(() => {
+    o.current !== r && e(), o.current = r;
+  }, [r, e, ...t]);
+};
 export {
-  l as useOverlayController
+  m as useOnChange,
+  i as useOverlayController
 };