@mittwald/flow-react-components 0.1.0-alpha.71 → 0.1.0-alpha.73

package/dist/Action-DFbRza4T.js

@@ -0,0 +1,150 @@
+"use client"
+/* */
+var S = Object.defineProperty;
+var b = (e, t, o) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var r = (e, t, o) => (b(e, typeof t != "symbol" ? t + "" : t, o), o);
+import A, { useRef as M } from "react";
+import "./propsContext-CauylOgH.js";
+import { P } from "./PropsContextProvider-DZvwqHLP.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { u as C } from "./useProps-Dx3m8kCJ.js";
+import { u as F } from "./index-ViVxK7d1.js";
+import { makeObservable as k, observable as y, runInAction as x } from "mobx";
+import { u as I } from "./useSelector-DpU7_HMO.js";
+const v = () => {
+}, w = (e) => {
+  const t = F();
+  return (e == null ? void 0 : e.type) === "function" ? e.fn : (e == null ? void 0 : e.type) === "toggleModal" ? t.toggle : (e == null ? void 0 : e.type) === "openModal" ? t.open : (e == null ? void 0 : e.type) === "closeModal" ? t.close : v;
+}, m = (e, t) => {
+  const o = [...t];
+  let s;
+  for (; o.length > 0; )
+    if (s = o.shift(), s) {
+      const i = s(...e);
+      if (i instanceof Promise)
+        return i.then(() => m(e, o));
+    }
+}, p = {
+  pending: 1e3,
+  succeeded: 1500,
+  failed: 2e3
+};
+class h {
+  constructor(t = {}) {
+    r(this, "feedback");
+    r(this, "executionCount", 0);
+    r(this, "state", "isIdle");
+    const { feedback: o = !1 } = t;
+    this.feedback = o, k(this, {
+      state: y
+    });
+  }
+  static useNew(t) {
+    return M(new h(t)).current;
+  }
+  onStart() {
+    const t = ++this.executionCount;
+    this.updateState("isExecuting"), setTimeout(() => this.startPending(t), p.pending);
+  }
+  onSucceeded() {
+    this.onDone(!0);
+  }
+  onFailed() {
+    this.onDone(!1);
+  }
+  updateState(t) {
+    x(() => {
+      this.state = t;
+    });
+  }
+  startFailedFeedback() {
+    this.feedback && (this.updateState("isFailed"), setTimeout(() => this.updateState("isIdle"), p.failed));
+  }
+  startSucceededFeedback() {
+    this.feedback && (this.updateState("isSucceeded"), setTimeout(() => this.updateState("isIdle"), p.succeeded));
+  }
+  onDone(t) {
+    t ? this.startSucceededFeedback() : this.startFailedFeedback();
+  }
+  startPending(t) {
+    this.state !== "isIdle" && t === this.executionCount && this.updateState("isPending");
+  }
+  useState() {
+    return I(() => this.state, [this]);
+  }
+}
+const W = (e, t) => {
+  const { action: o } = C("Action", {}), s = w(e), i = (...c) => m(c, [s, o]), n = h.useNew(t);
+  return {
+    callAction: i,
+    callActionWithStateHandling: (...c) => {
+      try {
+        n.onStart();
+        const a = i(...c);
+        if (a instanceof Promise)
+          return a.then(() => n.onSucceeded()).catch(() => n.onFailed());
+        n.onSucceeded();
+      } catch {
+        n.onFailed();
+      }
+    },
+    state: n
+  };
+};
+function f(e) {
+  return typeof e == "boolean" ? void 0 : e;
+}
+const d = {
+  fn: (e) => ({
+    type: "function",
+    fn: e
+  }),
+  openModal: (e) => ({
+    type: "openModal",
+    controller: f(e)
+  }),
+  closeModal: (e) => ({
+    type: "closeModal",
+    controller: f(e)
+  }),
+  toggleModal: (e) => ({
+    type: "toggleModal",
+    controller: f(e)
+  })
+}, G = (e) => {
+  const {
+    children: t,
+    feedback: o,
+    action: s,
+    toggleModal: i,
+    openModal: n,
+    closeModal: u
+  } = e, c = s ? d.fn(s) : i ? d.toggleModal(i) : n ? d.openModal(n) : u ? d.closeModal(u) : void 0, a = W(c, {
+    feedback: o
+  }), l = a.state.useState(), g = {
+    Button: {
+      onPress: a.callActionWithStateHandling,
+      isPending: l === "isPending",
+      "aria-disabled": l !== "isIdle",
+      isSucceeded: l === "isSucceeded",
+      isFailed: l === "isFailed"
+    },
+    Action: {
+      action: a.callAction
+    }
+  };
+  return /* @__PURE__ */ A.createElement(
+    P,
+    {
+      mergeInParentContext: !0,
+      props: g,
+      dependencies: [l]
+    },
+    t
+  );
+};
+export {
+  G as A
+};

package/dist/Action.js

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

package/dist/Button-BPCYuj3x.js

@@ -0,0 +1,113 @@
+"use client"
+/* */
+import o, { useEffect as p } from "react";
+import * as S from "react-aria-components";
+import x from "clsx";
+import { C as F } from "./ClearPropsContext-CeCMjUK9.js";
+import { P as y } from "./PropsContextProvider-DZvwqHLP.js";
+import "@react-aria/utils";
+import "./propsContext-CauylOgH.js";
+import "remeda";
+import "@tabler/icons-react";
+import "./Icon-DdQwrIup.js";
+import { I as E, a as C } from "./IconSucceeded-BM7cipIv.js";
+import { W as I } from "./Wrap-DGT1h1o3.js";
+import { T as N } from "./Text-CBzyk1oM.js";
+import { f as h } from "./flowComponent-BuF0s2uG.js";
+import { L as A } from "./LoadingSpinner-DqsZ7IDL.js";
+import { useLocalizedStringFormatter as D } from "react-aria";
+import { useLiveRegion as T } from "@chakra-ui/live-region";
+const z = "flow--button", B = "flow--button--avatar", L = "flow--button--icon", k = "flow--button--text", R = "flow--button--content", K = "flow--button--state-icon", U = "flow--button--is-succeeded", W = "flow--button--is-failed", $ = "flow--button--is-pending", j = "flow--button--plain", q = "flow--button--primary", G = "flow--button--solid", H = "flow--button--aria-disabled", J = "flow--button--accent", M = "flow--button--danger", O = "flow--button--secondary", Q = "flow--button--soft", t = {
+  button: z,
+  avatar: B,
+  icon: L,
+  text: k,
+  content: R,
+  stateIcon: K,
+  "size-s": "flow--button--size-s",
+  isSucceeded: U,
+  isFailed: W,
+  isPending: $,
+  plain: j,
+  primary: q,
+  solid: G,
+  ariaDisabled: H,
+  accent: J,
+  danger: M,
+  secondary: O,
+  soft: Q
+}, V = {
+  "de-DE": {
+    "action.isFailed": "Fehlgeschlagen",
+    "action.isPending": "Ausstehend...",
+    "action.isSucceeded": "Erfolgreich"
+  },
+  "en-EN": {
+    "action.isFailed": "Failed",
+    "action.isPending": "Pending...",
+    "action.isSucceeded": "Succeeded"
+  }
+}, X = (e, c = {}) => {
+  const i = D(V), {
+    isPendingText: a = i.format("action.isPending"),
+    isSucceededText: d = i.format("action.isSucceeded"),
+    isFailedText: s = i.format("action.isFailed")
+  } = c, n = T({
+    "aria-live": "polite",
+    "aria-atomic": !1,
+    "aria-relevant": "text additions",
+    role: "status"
+  });
+  p(() => {
+    e === "isPending" ? n.speak(a) : e === "isSucceeded" ? n.speak(d) : e === "isFailed" && n.speak(s);
+  }, [e]);
+}, Y = (e) => ((e.isPending || e.isSucceeded || e.isFailed || e["aria-disabled"]) && (e = { ...e }, e.onPress = void 0, e.onPressStart = void 0, e.onPressEnd = void 0, e.onPressChange = void 0, e.onPressUp = void 0, e.onKeyDown = void 0, e.onKeyUp = void 0), e), be = h("Button", (e) => {
+  e = Y(e);
+  const {
+    variant: c = "primary",
+    style: i = "solid",
+    children: a,
+    className: d,
+    size: s = "m",
+    isPending: n,
+    isSucceeded: r,
+    isFailed: l,
+    "aria-disabled": f,
+    ref: u,
+    ...b
+  } = e, g = x(
+    t.button,
+    n && t.isPending,
+    r && t.isSucceeded,
+    l && t.isFailed,
+    t[`size-${s}`],
+    t[c],
+    t[i],
+    d,
+    /**
+     * Workaround warning: The Aria.Button does not support "aria-disabled" by
+     * now, so this Button will be visually disabled via CSS.
+     */
+    f && t.ariaDisabled
+  );
+  X(
+    n ? "isPending" : r ? "isSucceeded" : l ? "isFailed" : "isIdle"
+  );
+  const P = {
+    Icon: {
+      className: t.icon,
+      "aria-hidden": !0,
+      size: s
+    },
+    Text: {
+      className: t.text
+    },
+    Avatar: {
+      className: t.avatar
+    }
+  }, m = r ? E : l ? C : n ? A : void 0, w = m && /* @__PURE__ */ o.createElement(m, { size: s, className: t.stateIcon }), v = typeof a == "string";
+  return /* @__PURE__ */ o.createElement(F, null, /* @__PURE__ */ o.createElement(S.Button, { className: g, ref: u, ...b }, /* @__PURE__ */ o.createElement(y, { props: P }, /* @__PURE__ */ o.createElement("span", { className: t.content }, /* @__PURE__ */ o.createElement(I, { if: v }, /* @__PURE__ */ o.createElement(N, null, a)))), w));
+});
+export {
+  be as B
+};

package/dist/Button.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { B as o } from "./Button-B2GKVrxY.js";
+import { B as o } from "./Button-BPCYuj3x.js";
 export {
   o as Button,
   o as default

package/dist/CopyButton.js

@@ -2,7 +2,7 @@
 /* */
 import o from "react";
 import a from "copy-to-clipboard";
-import { B as i } from "./Button-B2GKVrxY.js";
+import { B as i } from "./Button-BPCYuj3x.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as c } from "./IconCopy-D40P_nc1.js";
@@ -15,7 +15,7 @@ import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
 import { f as C } from "./flowComponent-BuF0s2uG.js";
-import { A as E } from "./Action-B9PIFbjG.js";
+import { A as E } from "./Action-DFbRza4T.js";
 const B = {
   "de-DE": {
     "copyButton.copy": "Kopieren"

package/dist/List.js

@@ -12,7 +12,7 @@ import { T as b } from "./Text-CBzyk1oM.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as $ } from "./IconChevronDown-a_vSoTxH.js";
-import { B as h } from "./Button-B2GKVrxY.js";
+import { B as h } from "./Button-BPCYuj3x.js";
 import { useMessageFormatter as H, useLocalizedStringFormatter as q } from "react-aria";
 import K from "clsx";
 import { I as rt } from "./IconClose-BcM-VKmn.js";

package/dist/Modal.js

@@ -9,7 +9,7 @@ import { P as C } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
 import { TunnelProvider as y, TunnelExit as x } from "@mittwald/react-tunnel";
-import { u as z, a as E } from "./useOverlayState-BnPe_CrX.js";
+import { u as z, a as E } from "./index-ViVxK7d1.js";
 const b = "flow--modal", T = "flow--modal--dialog", N = "flow--modal--overlay", P = "flow--modal--button-group", G = "flow--modal--content", I = "flow--modal--off-canvas", t = {
   modal: b,
   "modal-zoom": "flow--modal--modal-zoom",

package/dist/NumberField.js

@@ -10,7 +10,7 @@ import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
 import { F as I } from "./FieldError-De8_olcs.js";
-import { B as a } from "./Button-B2GKVrxY.js";
+import { B as a } from "./Button-BPCYuj3x.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as C } from "./IconChevronDown-a_vSoTxH.js";

package/dist/Tabs.js

@@ -9,7 +9,7 @@ import { f as S } from "./flowComponent-BuF0s2uG.js";
 import { useCallbackRef as B } from "use-callback-ref";
 import { C as K } from "./ContextMenu-DJ4VRDCG.js";
 import { M as L } from "./MenuItem-DbXZNJo6.js";
-import { B as F } from "./Button-B2GKVrxY.js";
+import { B as F } from "./Button-BPCYuj3x.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as A } from "./IconContextMenu-bD7n5nvt.js";

package/dist/controller.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { O as t, u as r } from "./useOverlayState-BnPe_CrX.js";
+import { O as t, u as r } from "./index-ViVxK7d1.js";
 export {
   t as OverlayState,
   r as useOverlayState

package/dist/hooks.js

@@ -0,0 +1,8 @@
+"use client"
+/* */
+import "mobx";
+import "react";
+import { u as a } from "./index-ViVxK7d1.js";
+export {
+  a as useOverlayState
+};

package/dist/{useOverlayState-BnPe_CrX.js → index-ViVxK7d1.js}

@@ -3,14 +3,14 @@
 var p = Object.defineProperty;
 var O = (t, e, s) => e in t ? p(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
 var i = (t, e, s) => (O(t, typeof e != "symbol" ? e + "" : e, s), s);
-import { useState as l, createContext as c, useContext as m } from "react";
-import { makeObservable as b, observable as h, action as o } from "mobx";
+import { makeObservable as l, observable as c, action as o } from "mobx";
+import { useState as m, createContext as b, useContext as h } from "react";
 import { u as d } from "./useSelector-DpU7_HMO.js";
 class n {
   constructor(e = !1) {
     i(this, "isOpen");
-    b(this, {
-      isOpen: h,
+    l(this, {
+      isOpen: c,
       open: o.bound,
       close: o.bound,
       toggle: o.bound,
@@ -18,7 +18,7 @@ class n {
     }), this.isOpen = e;
   }
   static useNew(e) {
-    return l(new n(e))[0];
+    return m(new n(e))[0];
   }
   open() {
     this.isOpen = !0;
@@ -36,8 +36,8 @@ class n {
     return d(() => this.isOpen);
   }
 }
-const a = c(new n()), w = a.Provider, g = (t = {}) => {
-  const { reuseControllerFromContext: e = !0, defaultOpen: s } = t, u = n.useNew(s), r = m(a);
+const a = b(new n()), w = a.Provider, g = (t = {}) => {
+  const { reuseControllerFromContext: e = !0, defaultOpen: s } = t, u = n.useNew(s), r = h(a);
   return e && r ? r : u;
 };
 export {