@mittwald/flow-react-components 0.1.0-alpha.87 → 0.1.0-alpha.89

package/dist/Action-CC0yBUVp.js

@@ -0,0 +1,188 @@
+"use client"
+/* */
+var F = Object.defineProperty;
+var v = (t, e, n) => e in t ? F(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var f = (t, e, n) => (v(t, typeof e != "symbol" ? e + "" : e, n), n);
+import i, { createContext as D, useContext as g, useRef as M, useState as P, useEffect as w } from "react";
+import "./propsContext-CauylOgH.js";
+import { P as x } from "./PropsContextProvider-DZvwqHLP.js";
+import "@react-aria/utils";
+import "remeda";
+import { u as y, O as R } from "./index-D8fboLvc.js";
+import { TunnelProvider as B, TunnelExit as I } from "@mittwald/react-tunnel";
+import { makeObservable as O, observable as T, action as N } from "mobx";
+import { u as $ } from "./useSelector-DpU7_HMO.js";
+const b = D(void 0), G = () => g(b), H = b.Provider, C = (t) => (...e) => {
+  const n = [...t], s = n.shift();
+  if (s) {
+    const o = s(...e), r = () => n.length === 0 ? o : C(n)(...e);
+    return o instanceof Promise ? o.then(r) : r();
+  }
+}, S = "flowBreakActionMarker";
+function U(t) {
+  return !!t && t instanceof Error && t.message === S;
+}
+const j = () => {
+  throw new Error(S);
+}, p = {
+  pending: 1e3,
+  succeeded: 1500,
+  failed: 2e3
+};
+class q {
+  constructor(e, n, s = {}) {
+    f(this, "options");
+    f(this, "state");
+    f(this, "args");
+    f(this, "isDone", !1);
+    f(this, "error");
+    const {
+      resetAfterDone: o = !0,
+      onFeedbackDone: r = () => {
+      },
+      showFeedback: c = !1
+    } = s;
+    this.state = e, this.args = n, this.options = { resetAfterDone: o, onFeedbackDone: r, showFeedback: c };
+  }
+  onAsyncStart() {
+    this.options.showFeedback = !0, this.state.updateState("isExecuting"), setTimeout(() => this.startPending(), p.pending);
+  }
+  onSucceeded() {
+    this.onDone();
+  }
+  onFailed(e) {
+    this.error = e ?? new Error("Unknown error"), console.error(e), this.onDone();
+  }
+  startFailedFeedback() {
+    U(this.error) ? this.resetAfterDone() : (this.state.updateState("isFailed"), setTimeout(() => this.resetAfterDone(), p.failed));
+  }
+  startSucceededFeedback() {
+    this.state.updateState("isSucceeded"), setTimeout(() => this.resetAfterDone(), p.succeeded);
+  }
+  resetAfterDone() {
+    this.options.resetAfterDone && this.state.updateState("isIdle"), this.error || this.options.onFeedbackDone(...this.args);
+  }
+  onDone() {
+    this.isDone = !0, this.options.showFeedback ? this.error ? this.startFailedFeedback() : this.startSucceededFeedback() : this.resetAfterDone();
+  }
+  startPending() {
+    this.isDone || this.state.updateState("isPending");
+  }
+}
+class k {
+  constructor() {
+    f(this, "state", "isIdle");
+    O(this, {
+      state: T,
+      updateState: N
+    });
+  }
+  static useNew() {
+    return M(new k()).current;
+  }
+  updateState(e) {
+    this.state = e;
+  }
+  useState() {
+    return $(() => this.state, [this]);
+  }
+}
+const z = () => {
+}, J = (t) => {
+  const {
+    action: e,
+    toggleModal: n,
+    openModal: s,
+    closeModal: o,
+    break: r
+  } = t, c = y();
+  return e || (n ? c.toggle : s ? c.open : o ? c.close : r ? j : z);
+}, K = (t, e = {}) => {
+  const {
+    onSync: n = () => {
+    },
+    onAsync: s = () => {
+    },
+    then: o = () => {
+    },
+    catch: r = () => {
+    },
+    finally: c = () => {
+    }
+  } = e;
+  try {
+    const d = t();
+    return d instanceof Promise ? (s(), d.then(o).catch(r).finally(c)) : (n(), o(d), c(), d);
+  } catch (d) {
+    n(), r(d), c();
+  }
+}, L = (t) => {
+  const { isConfirmationAction: e, showFeedback: n } = t, s = J(t), o = G(), r = k.useNew(), c = !e, d = e ? void 0 : o, m = e ? o : void 0, u = C([s, d]);
+  return {
+    callAction: (...a) => {
+      const A = new q(r, a, {
+        onFeedbackDone: m,
+        resetAfterDone: c,
+        showFeedback: n
+      });
+      return K(u, {
+        onAsync: () => A.onAsyncStart(),
+        then: () => A.onSucceeded(),
+        catch: (E) => A.onFailed(E)
+      });
+    },
+    state: r
+  };
+}, h = (t) => {
+  const [e, n] = P(!1), s = R.useNew(), o = L(t), r = e ? s.open : o.callAction, m = {
+    Button: {
+      onPress: r,
+      render: (u, l) => {
+        const a = o.state.useState();
+        return /* @__PURE__ */ i.createElement(
+          u,
+          {
+            ...l,
+            isPending: a === "isPending" ? !0 : void 0,
+            "aria-disabled": a !== "isIdle" ? !0 : void 0,
+            isSucceeded: a === "isSucceeded" ? !0 : void 0,
+            isFailed: a === "isFailed" ? !0 : void 0
+          }
+        );
+      }
+    },
+    Modal: {
+      tunnelId: "outsideActionProvider",
+      render: (u, l) => {
+        const a = l.slot === "actionConfirm";
+        return w(() => {
+          if (a)
+            return n(!0), () => {
+              n(!1);
+            };
+        }, [a]), a ? /* @__PURE__ */ i.createElement(u, { controller: s, ...l }) : /* @__PURE__ */ i.createElement(u, { ...l });
+      },
+      ButtonGroup: {
+        Button: {
+          render: (u, l) => {
+            const { variant: a } = l;
+            return a === "secondary" ? /* @__PURE__ */ i.createElement(h, { break: !0 }, /* @__PURE__ */ i.createElement(h, { closeModal: !0 }, /* @__PURE__ */ i.createElement(u, { ...l }))) : /* @__PURE__ */ i.createElement(h, { closeModal: !0 }, /* @__PURE__ */ i.createElement(h, { ...t, isConfirmationAction: !0 }, /* @__PURE__ */ i.createElement(u, { ...l })));
+          }
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ i.createElement(B, null, /* @__PURE__ */ i.createElement(
+    x,
+    {
+      props: m,
+      dependencies: [e],
+      mergeInParentContext: !0
+    },
+    /* @__PURE__ */ i.createElement(H, { value: r }, t.children),
+    /* @__PURE__ */ i.createElement(I, { id: "outsideActionProvider" })
+  ));
+};
+export {
+  h as A
+};

package/dist/Action.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as t } from "./Action-Bu-hapYW.js";
+import { A as t } from "./Action-CC0yBUVp.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-C4FfRbD8.js";
-import { A as E } from "./Action-Bu-hapYW.js";
+import { A as E } from "./Action-CC0yBUVp.js";
 const B = {
   "de-DE": {
     "copyButton.copy": "Kopieren"

package/dist/Modal.js

@@ -1,82 +1,76 @@
 "use client"
 /* */
 import * as n from "react-aria-components";
-import { DialogTrigger as L } from "react-aria-components";
-import e, { useContext as w, useEffect as r } from "react";
-import O from "clsx";
+import o from "react";
+import g from "clsx";
 import "./propsContext-CauylOgH.js";
-import { P as y } from "./PropsContextProvider-DZvwqHLP.js";
+import { P as E } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
-import { TunnelProvider as x, TunnelExit as z } from "@mittwald/react-tunnel";
-import { u as E, a as b } from "./index-Cb88QILt.js";
-import { f as T } from "./flowComponent-C4FfRbD8.js";
-const N = "flow--modal--overlay", P = "flow--modal", M = "flow--modal--dialog", G = "flow--modal--button-group", I = "flow--modal--content", D = "flow--modal--off-canvas", t = {
-  overlay: N,
+import { TunnelProvider as y, TunnelExit as z } from "@mittwald/react-tunnel";
+import { u as r, a as s } from "./index-D8fboLvc.js";
+import { f as x } from "./flowComponent-C4FfRbD8.js";
+import { A as O } from "./Action-CC0yBUVp.js";
+import "mobx";
+const b = "flow--modal--overlay", M = "flow--modal", N = "flow--modal--dialog", P = "flow--modal--button-group", F = "flow--modal--content", G = "flow--modal--off-canvas", e = {
+  overlay: b,
   "modal-fade": "flow--modal--modal-fade",
-  modal: P,
+  modal: M,
   "modal-zoom": "flow--modal--modal-zoom",
-  dialog: M,
-  buttonGroup: G,
-  content: I,
+  dialog: N,
+  buttonGroup: P,
+  content: F,
   "size-s": "flow--modal--size-s",
   "size-m": "flow--modal--size-m",
   "size-l": "flow--modal--size-l",
-  offCanvas: D,
+  offCanvas: G,
   "modal-slide-in": "flow--modal--modal-slide-in",
   "modal-slide-up": "flow--modal--modal-slide-up"
-}, F = (l) => {
-  const o = w(n.OverlayTriggerStateContext), a = l.useIsOpen();
-  r(() => {
-    o && l.setOpen(o.isOpen);
-  }, [o == null ? void 0 : o.isOpen]), r(() => {
-    o && o.setOpen(a);
-  }, [a]);
-}, q = T("Modal", (l) => {
+}, q = x("Modal", (t) => {
   const {
-    size: o = "s",
-    offCanvas: a,
-    controller: m,
+    size: l = "s",
+    offCanvas: m,
+    controller: d,
     defaultOpen: i,
-    children: d,
-    reuseControllerFromContext: f = !1,
-    ...c
-  } = l, p = E({
-    reuseControllerFromContext: f,
+    children: c,
+    ...f
+  } = t, p = r({
+    reuseControllerFromContext: !0,
     defaultOpen: i
-  }), s = m ?? p, u = s.useIsOpen();
-  F(s);
-  const v = O(
-    t.modal,
-    t[`size-${o}`],
-    a && t.offCanvas
-  ), g = {
+  }), a = d ?? p, u = a.useIsOpen(), v = g(
+    e.modal,
+    e[`size-${l}`],
+    m && e.offCanvas
+  ), C = {
     Content: {
-      elementType: e.Fragment
+      elementType: o.Fragment
     },
     Heading: {
       level: 2,
       slot: "title"
     },
     ButtonGroup: {
-      className: t.buttonGroup,
+      className: e.buttonGroup,
       tunnelId: "buttons"
     }
   };
-  return /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ o.createElement(
     n.ModalOverlay,
     {
-      className: t.overlay,
-      ...c,
+      className: e.overlay,
+      ...f,
       isDismissable: !0,
       isOpen: u,
-      onOpenChange: (C) => s.setOpen(C)
+      onOpenChange: (w) => a.setOpen(w)
     },
-    /* @__PURE__ */ e.createElement(n.Modal, { className: v }, /* @__PURE__ */ e.createElement(n.Dialog, { className: t.dialog }, /* @__PURE__ */ e.createElement(b, { value: s }, /* @__PURE__ */ e.createElement(y, { props: g }, /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement("div", { className: t.content }, d), /* @__PURE__ */ e.createElement(z, { id: "buttons" }))))))
+    /* @__PURE__ */ o.createElement(n.Modal, { className: v }, /* @__PURE__ */ o.createElement(n.Dialog, { className: e.dialog }, /* @__PURE__ */ o.createElement(s, { value: a }, /* @__PURE__ */ o.createElement(E, { props: C }, /* @__PURE__ */ o.createElement(y, null, /* @__PURE__ */ o.createElement("div", { className: e.content }, c), /* @__PURE__ */ o.createElement(z, { id: "buttons" }))))))
   );
-});
+}), J = (t) => {
+  const l = r();
+  return /* @__PURE__ */ o.createElement(s, { value: l }, /* @__PURE__ */ o.createElement(O, { openModal: l }, t.children));
+};
 export {
   q as Modal,
-  L as ModalTrigger,
+  J as ModalTrigger,
   q as default
 };

package/dist/controller.js

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

package/dist/hooks.js

@@ -2,7 +2,7 @@
 /* */
 import "mobx";
 import "react";
-import { u as l } from "./index-Cb88QILt.js";
+import { u as l } from "./index-D8fboLvc.js";
 export {
   l as useOverlayController
 };

package/dist/{index-Cb88QILt.js → index-D8fboLvc.js}

@@ -4,8 +4,8 @@ var p = Object.defineProperty;
 var l = (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) => (l(t, typeof e != "symbol" ? e + "" : e, s), s);
 import { makeObservable as O, observable as c, action as o } from "mobx";
-import { useState as m, createContext as b, useContext as h } from "react";
-import { u as C } from "./useSelector-DpU7_HMO.js";
+import { useState as m, createContext as b, useContext as d } from "react";
+import { u as h } from "./useSelector-DpU7_HMO.js";
 class n {
   constructor(e = !1) {
     i(this, "isOpen");
@@ -33,17 +33,17 @@ class n {
     this.isOpen = e;
   }
   useIsOpen() {
-    return C(() => this.isOpen);
+    return h(() => this.isOpen);
   }
 }
 const a = b(
-  new n()
-), w = a.Provider, g = (t = {}) => {
-  const { reuseControllerFromContext: e = !0, defaultOpen: s } = t, u = n.useNew(s), r = h(a);
+  void 0
+), g = a.Provider, w = (t = {}) => {
+  const { reuseControllerFromContext: e = !0, defaultOpen: s } = t, u = n.useNew(s), r = d(a);
   return e && r ? r : u;
 };
 export {
   n as O,
-  w as a,
-  g as u
+  g as a,
+  w as u
 };

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

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+
+interface Props extends PropsWithChildren {
+}
+export declare const ModalTrigger: FC<Props>;
+export {};

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

@@ -1,5 +1,5 @@
 import { Modal } from './Modal';
 
 export { type ModalProps, Modal } from './Modal';
-export { DialogTrigger as ModalTrigger } from 'react-aria-components';
+export * from './components/ModalTrigger';
 export default Modal;

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

@@ -6,6 +6,6 @@ export default meta;
 type Story = StoryObj<typeof Modal>;
 export declare const Default: Story;
 export declare const WithController: Story;
-export declare const WithDialogTrigger: Story;
+export declare const WithTrigger: Story;
 export declare const Mobile: Story;
 export declare const OffCanvas: Story;

package/dist/types/lib/controller/overlay/context.d.ts

@@ -1,4 +1,4 @@
 import { OverlayController } from './OverlayController';
 
-export declare const overlayContext: import('react').Context<OverlayController>;
-export declare const OverlayContextProvider: import('react').Provider<OverlayController>;
+export declare const overlayContext: import('react').Context<OverlayController | undefined>;
+export declare const OverlayContextProvider: import('react').Provider<OverlayController | undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.87",
+  "version": "0.1.0-alpha.89",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -235,7 +235,7 @@
   },
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.87",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.89",
     "@mittwald/react-use-promise": "^2.3.13",
     "@react-aria/utils": "^3.23.2",
     "@react-types/shared": "^3.22.1",
@@ -259,7 +259,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.87",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.89",
     "@mittwald/react-use-promise": "^2.3.13",
     "@nx/storybook": "^18.3.4",
     "@storybook/addon-a11y": "^8.0.9",
@@ -334,5 +334,5 @@
       "optional": true
     }
   },
-  "gitHead": "2e459f372876383b7ca9d15861a40a2609c77f14"
+  "gitHead": "f9ca3988883c7f56ba9dea9641029b8c7d73667b"
 }

package/dist/Action-Bu-hapYW.js

@@ -1,176 +0,0 @@
-"use client"
-/* */
-var v = Object.defineProperty;
-var E = (t, e, n) => e in t ? v(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var d = (t, e, n) => (E(t, typeof e != "symbol" ? e + "" : e, n), n);
-import c, { createContext as D, useContext as g, useRef as M, useState as P, useEffect as w } from "react";
-import "./propsContext-CauylOgH.js";
-import { P as x } from "./PropsContextProvider-DZvwqHLP.js";
-import "@react-aria/utils";
-import "remeda";
-import { u as y, O as R } from "./index-Cb88QILt.js";
-import { TunnelProvider as B, TunnelExit as I } from "@mittwald/react-tunnel";
-import { makeObservable as O, observable as T, action as N } from "mobx";
-import { u as $ } from "./useSelector-DpU7_HMO.js";
-const b = D(void 0), G = () => g(b), H = b.Provider, S = (t) => (...e) => {
-  const n = [...t], i = n.shift();
-  if (i) {
-    const r = i(...e), s = () => n.length === 0 ? r : S(n)(...e);
-    return r instanceof Promise ? r.then(s) : s();
-  }
-}, C = "flowBreakActionMarker";
-function U(t) {
-  return !!t && t instanceof Error && t.message === C;
-}
-const j = () => {
-  throw new Error(C);
-}, A = {
-  pending: 1e3,
-  succeeded: 1500,
-  failed: 2e3
-};
-class q {
-  constructor(e, n, i = {}) {
-    d(this, "options");
-    d(this, "state");
-    d(this, "args");
-    d(this, "isDone", !1);
-    d(this, "error");
-    const {
-      resetAfterDone: r = !0,
-      onFeedbackDone: s = () => {
-      },
-      showFeedback: o = !1
-    } = i;
-    this.state = e, this.args = n, this.options = { resetAfterDone: r, onFeedbackDone: s, showFeedback: o };
-  }
-  onAsyncStart() {
-    this.options.showFeedback = !0, this.state.updateState("isExecuting"), setTimeout(() => this.startPending(), A.pending);
-  }
-  onSucceeded() {
-    this.onDone();
-  }
-  onFailed(e) {
-    this.error = e ?? new Error("Unknown error"), console.error(e), this.onDone();
-  }
-  startFailedFeedback() {
-    U(this.error) ? this.resetAfterDone() : (this.state.updateState("isFailed"), setTimeout(() => this.resetAfterDone(), A.failed));
-  }
-  startSucceededFeedback() {
-    this.state.updateState("isSucceeded"), setTimeout(() => this.resetAfterDone(), A.succeeded);
-  }
-  resetAfterDone() {
-    this.options.resetAfterDone && this.state.updateState("isIdle"), this.error || this.options.onFeedbackDone(...this.args);
-  }
-  onDone() {
-    this.isDone = !0, this.options.showFeedback ? this.error ? this.startFailedFeedback() : this.startSucceededFeedback() : this.resetAfterDone();
-  }
-  startPending() {
-    this.isDone || this.state.updateState("isPending");
-  }
-}
-class p {
-  constructor() {
-    d(this, "state", "isIdle");
-    O(this, {
-      state: T,
-      updateState: N
-    });
-  }
-  static useNew() {
-    return M(new p()).current;
-  }
-  updateState(e) {
-    this.state = e;
-  }
-  useState() {
-    return $(() => this.state, [this]);
-  }
-}
-const z = () => {
-}, J = (t) => {
-  const {
-    action: e,
-    toggleModal: n,
-    openModal: i,
-    closeModal: r,
-    break: s
-  } = t, o = y();
-  return e || (n ? o.toggle : i ? o.open : r ? o.close : s ? j : z);
-}, K = (t, e = {}) => {
-  const {
-    onSync: n = () => {
-    },
-    onAsync: i = () => {
-    },
-    then: r = () => {
-    },
-    catch: s = () => {
-    },
-    finally: o = () => {
-    }
-  } = e;
-  try {
-    const a = t();
-    return a instanceof Promise ? (i(), a.then(r).catch(s).finally(o)) : (n(), r(a), o(), a);
-  } catch (a) {
-    n(), s(a), o();
-  }
-}, L = (t) => {
-  const { isConfirmationAction: e, showFeedback: n } = t, i = J(t), r = G(), s = p.useNew(), o = !e, a = e ? void 0 : r, k = e ? r : void 0, m = S([i, a]);
-  return {
-    callAction: (...l) => {
-      const f = new q(s, l, {
-        onFeedbackDone: k,
-        resetAfterDone: o,
-        showFeedback: n
-      });
-      return K(m, {
-        onAsync: () => f.onAsyncStart(),
-        then: () => f.onSucceeded(),
-        catch: (F) => f.onFailed(F)
-      });
-    },
-    state: s
-  };
-}, h = (t) => {
-  const [e, n] = P(!1), i = R.useNew(), r = L(t), s = e ? i.open : r.callAction, o = r.state.useState(), m = {
-    Button: {
-      onPress: s,
-      isPending: o === "isPending" ? !0 : void 0,
-      "aria-disabled": o !== "isIdle" ? !0 : void 0,
-      isSucceeded: o === "isSucceeded" ? !0 : void 0,
-      isFailed: o === "isFailed" ? !0 : void 0
-    },
-    Modal: {
-      tunnelId: "outsideActionProvider",
-      render: (u, l) => (w(() => {
-        if (l.slot === "actionConfirm")
-          return n(!0), () => {
-            n(!1);
-          };
-      }, []), /* @__PURE__ */ c.createElement(u, { controller: i, ...l })),
-      ButtonGroup: {
-        Button: {
-          render: (u, l) => {
-            const { variant: f } = l;
-            return f === "secondary" ? /* @__PURE__ */ c.createElement(h, { break: !0 }, /* @__PURE__ */ c.createElement(h, { closeModal: !0 }, /* @__PURE__ */ c.createElement(u, { ...l }))) : /* @__PURE__ */ c.createElement(h, { closeModal: !0 }, /* @__PURE__ */ c.createElement(h, { ...t, isConfirmationAction: !0 }, /* @__PURE__ */ c.createElement(u, { ...l })));
-          }
-        }
-      }
-    }
-  };
-  return /* @__PURE__ */ c.createElement(B, null, /* @__PURE__ */ c.createElement(
-    x,
-    {
-      props: m,
-      dependencies: [e, o],
-      mergeInParentContext: !0
-    },
-    /* @__PURE__ */ c.createElement(H, { value: s }, t.children),
-    /* @__PURE__ */ c.createElement(I, { id: "outsideActionProvider" })
-  ));
-};
-export {
-  h as A
-};

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

@@ -1,3 +0,0 @@
-import { OverlayController } from '../../../lib/controller/overlay';
-
-export declare const useSyncTriggerState: (controller: OverlayController) => void;