@mittwald/flow-react-components 0.1.0-alpha.119 → 0.1.0-alpha.120

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,191 @@
1
+ "use client"
2
+ /* */
3
+ var C = Object.defineProperty;
4
+ var E = (t, e, n) => e in t ? C(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
5
+ var f = (t, e, n) => (E(t, typeof e != "symbol" ? e + "" : e, n), n);
6
+ import c, { useRef as D, useMemo as g, useState as w, useEffect as P } from "react";
7
+ import "./propsContext-CauylOgH.js";
8
+ import { P as x } from "./PropsContextProvider-DZvwqHLP.js";
9
+ import "@react-aria/utils";
10
+ import { values as M, omit as O } from "remeda";
11
+ import { u as R, O as B } from "./index-0qLHBjoi.js";
12
+ import { u as I, A as T } from "./context-DJetA3qV.js";
13
+ import { TunnelProvider as N, TunnelExit as $ } from "@mittwald/react-tunnel";
14
+ import { makeObservable as G, observable as H, action as L } from "mobx";
15
+ import { u as U } from "./useSelector-DpU7_HMO.js";
16
+ const b = (t) => (...e) => {
17
+ const n = [...t], s = n.shift();
18
+ if (s) {
19
+ const o = s(...e), r = () => n.length === 0 ? o : b(n)(...e);
20
+ return o instanceof Promise ? o.then(r) : r();
21
+ }
22
+ }, F = "flowBreakActionMarker";
23
+ function j(t) {
24
+ return !!t && t instanceof Error && t.message === F;
25
+ }
26
+ const q = () => {
27
+ throw new Error(F);
28
+ }, v = {
29
+ pending: 1e3,
30
+ succeeded: 1500,
31
+ failed: 2e3
32
+ };
33
+ class z {
34
+ constructor(e, n, s = {}) {
35
+ f(this, "options");
36
+ f(this, "state");
37
+ f(this, "args");
38
+ f(this, "isDone", !1);
39
+ f(this, "error");
40
+ const {
41
+ resetAfterDone: o = !0,
42
+ onFeedbackDone: r = () => {
43
+ },
44
+ showFeedback: d = !1
45
+ } = s;
46
+ this.state = e, this.args = n, this.options = { resetAfterDone: o, onFeedbackDone: r, showFeedback: d };
47
+ }
48
+ onAsyncStart() {
49
+ this.options.showFeedback = !0, this.state.updateState("isExecuting"), setTimeout(() => this.startPending(), v.pending);
50
+ }
51
+ onSucceeded() {
52
+ this.onDone();
53
+ }
54
+ onFailed(e) {
55
+ this.error = e ?? new Error("Unknown error"), console.error(e), this.onDone();
56
+ }
57
+ startFailedFeedback() {
58
+ j(this.error) ? this.resetAfterDone() : (this.state.updateState("isFailed"), setTimeout(() => this.resetAfterDone(), v.failed));
59
+ }
60
+ startSucceededFeedback() {
61
+ this.state.updateState("isSucceeded"), setTimeout(() => this.resetAfterDone(), v.succeeded);
62
+ }
63
+ resetAfterDone() {
64
+ this.options.resetAfterDone && this.state.updateState("isIdle"), this.error || this.options.onFeedbackDone(...this.args);
65
+ }
66
+ onDone() {
67
+ this.isDone = !0, this.options.showFeedback ? this.error ? this.startFailedFeedback() : this.startSucceededFeedback() : this.resetAfterDone();
68
+ }
69
+ startPending() {
70
+ this.isDone || this.state.updateState("isPending");
71
+ }
72
+ }
73
+ class k {
74
+ constructor() {
75
+ f(this, "state", "isIdle");
76
+ G(this, {
77
+ state: H,
78
+ updateState: L
79
+ });
80
+ }
81
+ static useNew() {
82
+ return D(new k()).current;
83
+ }
84
+ updateState(e) {
85
+ this.state = e;
86
+ }
87
+ useState() {
88
+ return U(() => this.state, [this]);
89
+ }
90
+ }
91
+ const J = () => {
92
+ }, K = (t) => {
93
+ const {
94
+ action: e,
95
+ toggleOverlay: n,
96
+ openOverlay: s,
97
+ closeOverlay: o,
98
+ break: r
99
+ } = t, d = R(), i = (m) => typeof m == "boolean" ? d : m;
100
+ return e || (n ? i(n).toggle : s ? i(s).open : o ? i(o).close : r ? q : J);
101
+ }, h = () => {
102
+ }, Q = (t, e = {}) => {
103
+ const {
104
+ onSync: n = h,
105
+ onAsync: s = h,
106
+ then: o = h,
107
+ catch: r = h,
108
+ finally: d = h
109
+ } = e;
110
+ try {
111
+ const i = t();
112
+ return i instanceof Promise ? (s(), i.then(o).catch(r).finally(d)) : (n(), o(i), d(), i);
113
+ } catch (i) {
114
+ n(), r(i), d();
115
+ }
116
+ }, V = (t) => {
117
+ const { isConfirmationAction: e, showFeedback: n } = t, s = K(t), o = I(), r = k.useNew(), d = !e, i = e ? void 0 : o, m = e ? o : void 0, u = b([s, i]), l = (...y) => {
118
+ const p = new z(r, y, {
119
+ onFeedbackDone: m,
120
+ resetAfterDone: d,
121
+ showFeedback: n
122
+ });
123
+ return Q(u, {
124
+ onAsync: () => p.onAsyncStart(),
125
+ then: () => p.onSucceeded(),
126
+ catch: (S) => p.onFailed(S)
127
+ });
128
+ }, a = M(O(t, ["children"]));
129
+ return g(
130
+ () => ({
131
+ callAction: l,
132
+ state: r
133
+ }),
134
+ a
135
+ );
136
+ }, A = (t) => {
137
+ const [e, n] = w(!1), s = B.useNew(), o = V(t), r = e ? s.open : o.callAction, m = {
138
+ Link: {
139
+ onPress: r
140
+ },
141
+ Button: {
142
+ onPress: r,
143
+ render: (u, l) => {
144
+ const a = o.state.useState();
145
+ return /* @__PURE__ */ c.createElement(
146
+ u,
147
+ {
148
+ ...l,
149
+ isPending: a === "isPending" ? !0 : void 0,
150
+ "aria-disabled": a !== "isIdle" ? !0 : void 0,
151
+ isSucceeded: a === "isSucceeded" ? !0 : void 0,
152
+ isFailed: a === "isFailed" ? !0 : void 0
153
+ }
154
+ );
155
+ }
156
+ },
157
+ Modal: {
158
+ tunnelId: "outsideActionProvider",
159
+ render: (u, l) => {
160
+ const a = l.slot === "actionConfirm";
161
+ return P(() => {
162
+ if (a)
163
+ return n(!0), () => {
164
+ n(!1);
165
+ };
166
+ }, [a]), a ? /* @__PURE__ */ c.createElement(u, { controller: s, ...l }) : /* @__PURE__ */ c.createElement(u, { ...l });
167
+ },
168
+ ButtonGroup: {
169
+ Button: {
170
+ render: (u, l) => {
171
+ const { color: a } = l;
172
+ return a === "secondary" ? /* @__PURE__ */ c.createElement(A, { break: !0 }, /* @__PURE__ */ c.createElement(A, { closeOverlay: !0 }, /* @__PURE__ */ c.createElement(u, { ...l }))) : /* @__PURE__ */ c.createElement(A, { closeOverlay: !0 }, /* @__PURE__ */ c.createElement(A, { ...t, isConfirmationAction: !0 }, /* @__PURE__ */ c.createElement(u, { ...l })));
173
+ }
174
+ }
175
+ }
176
+ }
177
+ };
178
+ return /* @__PURE__ */ c.createElement(N, null, /* @__PURE__ */ c.createElement(
179
+ x,
180
+ {
181
+ props: m,
182
+ dependencies: [e, o],
183
+ mergeInParentContext: !0
184
+ },
185
+ /* @__PURE__ */ c.createElement(T, { value: r }, t.children),
186
+ /* @__PURE__ */ c.createElement($, { id: "outsideActionProvider" })
187
+ ));
188
+ };
189
+ export {
190
+ A
191
+ };
package/dist/Action.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client"
2
2
  /* */
3
- import { A as t } from "./Action-BZHZj-BD.js";
3
+ import { A as t } from "./Action-5b_DWWiS.js";
4
4
  export {
5
5
  t as Action,
6
6
  t as default
@@ -15,7 +15,7 @@ import "@react-aria/utils";
15
15
  import "remeda";
16
16
  import "dot-prop";
17
17
  import { f as C } from "./flowComponent-DZ4pwhof.js";
18
- import { A as E } from "./Action-BZHZj-BD.js";
18
+ import { A as E } from "./Action-5b_DWWiS.js";
19
19
  const B = {
20
20
  "de-DE": {
21
21
  "copyButton.copy": "Kopieren"
package/dist/OffCanvas.js CHANGED
@@ -6,7 +6,7 @@ import { B as f } from "./Button-BCQWyOr4.js";
6
6
  import "@tabler/icons-react";
7
7
  import "./Icon-BI5DQvoY.js";
8
8
  import { I as m } from "./IconClose-BCVIZgsO.js";
9
- import { A as i } from "./Action-BZHZj-BD.js";
9
+ import { A as i } from "./Action-5b_DWWiS.js";
10
10
  import { O as p } from "./Overlay-ofdfFqqi.js";
11
11
  import "mobx";
12
12
  import "./index-0qLHBjoi.js";
@@ -3,7 +3,7 @@
3
3
  import r from "react";
4
4
  import "mobx";
5
5
  import { u as l, a as m } from "./index-0qLHBjoi.js";
6
- import { A as p } from "./Action-BZHZj-BD.js";
6
+ import { A as p } from "./Action-5b_DWWiS.js";
7
7
  import "./propsContext-CauylOgH.js";
8
8
  import { P as i } from "./PropsContextProvider-DZvwqHLP.js";
9
9
  import "@react-aria/utils";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "0.1.0-alpha.119",
3
+ "version": "0.1.0-alpha.120",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -255,7 +255,7 @@
255
255
  },
256
256
  "dependencies": {
257
257
  "@chakra-ui/live-region": "^2.1.0",
258
- "@mittwald/react-tunnel": "^0.1.0-alpha.119",
258
+ "@mittwald/react-tunnel": "^0.1.0-alpha.120",
259
259
  "@mittwald/react-use-promise": "^2.3.13",
260
260
  "@react-aria/utils": "^3.24.0",
261
261
  "@react-types/shared": "^3.23.0",
@@ -279,7 +279,7 @@
279
279
  },
280
280
  "devDependencies": {
281
281
  "@faker-js/faker": "^8.4.1",
282
- "@mittwald/flow-design-tokens": "^0.1.0-alpha.119",
282
+ "@mittwald/flow-design-tokens": "^0.1.0-alpha.120",
283
283
  "@mittwald/react-use-promise": "^2.3.13",
284
284
  "@nx/storybook": "^19.0.3",
285
285
  "@storybook/addon-a11y": "^8.1.0",
@@ -355,5 +355,5 @@
355
355
  "optional": true
356
356
  }
357
357
  },
358
- "gitHead": "2599f572b709064a2fe2c456db63fe8181aa23f7"
358
+ "gitHead": "4a6678733feef0cb041a9ef90a19ad7dc81aba69"
359
359
  }
@@ -1,188 +0,0 @@
1
- "use client"
2
- /* */
3
- var S = Object.defineProperty;
4
- var C = (t, e, n) => e in t ? S(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
5
- var f = (t, e, n) => (C(t, typeof e != "symbol" ? e + "" : e, n), n);
6
- import a, { useRef as E, useState as D, useEffect as g } from "react";
7
- import "./propsContext-CauylOgH.js";
8
- import { P } from "./PropsContextProvider-DZvwqHLP.js";
9
- import "@react-aria/utils";
10
- import "remeda";
11
- import { u as w, O as x } from "./index-0qLHBjoi.js";
12
- import { u as O, A as M } from "./context-DJetA3qV.js";
13
- import { TunnelProvider as R, TunnelExit as B } from "@mittwald/react-tunnel";
14
- import { makeObservable as I, observable as T, action as N } from "mobx";
15
- import { u as $ } from "./useSelector-DpU7_HMO.js";
16
- const b = (t) => (...e) => {
17
- const n = [...t], s = n.shift();
18
- if (s) {
19
- const o = s(...e), r = () => n.length === 0 ? o : b(n)(...e);
20
- return o instanceof Promise ? o.then(r) : r();
21
- }
22
- }, F = "flowBreakActionMarker";
23
- function G(t) {
24
- return !!t && t instanceof Error && t.message === F;
25
- }
26
- const H = () => {
27
- throw new Error(F);
28
- }, k = {
29
- pending: 1e3,
30
- succeeded: 1500,
31
- failed: 2e3
32
- };
33
- class L {
34
- constructor(e, n, s = {}) {
35
- f(this, "options");
36
- f(this, "state");
37
- f(this, "args");
38
- f(this, "isDone", !1);
39
- f(this, "error");
40
- const {
41
- resetAfterDone: o = !0,
42
- onFeedbackDone: r = () => {
43
- },
44
- showFeedback: l = !1
45
- } = s;
46
- this.state = e, this.args = n, this.options = { resetAfterDone: o, onFeedbackDone: r, showFeedback: l };
47
- }
48
- onAsyncStart() {
49
- this.options.showFeedback = !0, this.state.updateState("isExecuting"), setTimeout(() => this.startPending(), k.pending);
50
- }
51
- onSucceeded() {
52
- this.onDone();
53
- }
54
- onFailed(e) {
55
- this.error = e ?? new Error("Unknown error"), console.error(e), this.onDone();
56
- }
57
- startFailedFeedback() {
58
- G(this.error) ? this.resetAfterDone() : (this.state.updateState("isFailed"), setTimeout(() => this.resetAfterDone(), k.failed));
59
- }
60
- startSucceededFeedback() {
61
- this.state.updateState("isSucceeded"), setTimeout(() => this.resetAfterDone(), k.succeeded);
62
- }
63
- resetAfterDone() {
64
- this.options.resetAfterDone && this.state.updateState("isIdle"), this.error || this.options.onFeedbackDone(...this.args);
65
- }
66
- onDone() {
67
- this.isDone = !0, this.options.showFeedback ? this.error ? this.startFailedFeedback() : this.startSucceededFeedback() : this.resetAfterDone();
68
- }
69
- startPending() {
70
- this.isDone || this.state.updateState("isPending");
71
- }
72
- }
73
- class v {
74
- constructor() {
75
- f(this, "state", "isIdle");
76
- I(this, {
77
- state: T,
78
- updateState: N
79
- });
80
- }
81
- static useNew() {
82
- return E(new v()).current;
83
- }
84
- updateState(e) {
85
- this.state = e;
86
- }
87
- useState() {
88
- return $(() => this.state, [this]);
89
- }
90
- }
91
- const U = () => {
92
- }, j = (t) => {
93
- const {
94
- action: e,
95
- toggleOverlay: n,
96
- openOverlay: s,
97
- closeOverlay: o,
98
- break: r
99
- } = t, l = w(), i = (h) => typeof h == "boolean" ? l : h;
100
- return e || (n ? i(n).toggle : s ? i(s).open : o ? i(o).close : r ? H : U);
101
- }, m = () => {
102
- }, q = (t, e = {}) => {
103
- const {
104
- onSync: n = m,
105
- onAsync: s = m,
106
- then: o = m,
107
- catch: r = m,
108
- finally: l = m
109
- } = e;
110
- try {
111
- const i = t();
112
- return i instanceof Promise ? (s(), i.then(o).catch(r).finally(l)) : (n(), o(i), l(), i);
113
- } catch (i) {
114
- n(), r(i), l();
115
- }
116
- }, z = (t) => {
117
- const { isConfirmationAction: e, showFeedback: n } = t, s = j(t), o = O(), r = v.useNew(), l = !e, i = e ? void 0 : o, h = e ? o : void 0, u = b([s, i]);
118
- return {
119
- callAction: (...c) => {
120
- const p = new L(r, c, {
121
- onFeedbackDone: h,
122
- resetAfterDone: l,
123
- showFeedback: n
124
- });
125
- return q(u, {
126
- onAsync: () => p.onAsyncStart(),
127
- then: () => p.onSucceeded(),
128
- catch: (y) => p.onFailed(y)
129
- });
130
- },
131
- state: r
132
- };
133
- }, A = (t) => {
134
- const [e, n] = D(!1), s = x.useNew(), o = z(t), r = e ? s.open : o.callAction, h = {
135
- Link: {
136
- onPress: r
137
- },
138
- Button: {
139
- onPress: r,
140
- render: (u, d) => {
141
- const c = o.state.useState();
142
- return /* @__PURE__ */ a.createElement(
143
- u,
144
- {
145
- ...d,
146
- isPending: c === "isPending" ? !0 : void 0,
147
- "aria-disabled": c !== "isIdle" ? !0 : void 0,
148
- isSucceeded: c === "isSucceeded" ? !0 : void 0,
149
- isFailed: c === "isFailed" ? !0 : void 0
150
- }
151
- );
152
- }
153
- },
154
- Modal: {
155
- tunnelId: "outsideActionProvider",
156
- render: (u, d) => {
157
- const c = d.slot === "actionConfirm";
158
- return g(() => {
159
- if (c)
160
- return n(!0), () => {
161
- n(!1);
162
- };
163
- }, [c]), c ? /* @__PURE__ */ a.createElement(u, { controller: s, ...d }) : /* @__PURE__ */ a.createElement(u, { ...d });
164
- },
165
- ButtonGroup: {
166
- Button: {
167
- render: (u, d) => {
168
- const { color: c } = d;
169
- return c === "secondary" ? /* @__PURE__ */ a.createElement(A, { break: !0 }, /* @__PURE__ */ a.createElement(A, { closeOverlay: !0 }, /* @__PURE__ */ a.createElement(u, { ...d }))) : /* @__PURE__ */ a.createElement(A, { closeOverlay: !0 }, /* @__PURE__ */ a.createElement(A, { ...t, isConfirmationAction: !0 }, /* @__PURE__ */ a.createElement(u, { ...d })));
170
- }
171
- }
172
- }
173
- }
174
- };
175
- return /* @__PURE__ */ a.createElement(R, null, /* @__PURE__ */ a.createElement(
176
- P,
177
- {
178
- props: h,
179
- dependencies: [e],
180
- mergeInParentContext: !0
181
- },
182
- /* @__PURE__ */ a.createElement(M, { value: r }, t.children),
183
- /* @__PURE__ */ a.createElement(B, { id: "outsideActionProvider" })
184
- ));
185
- };
186
- export {
187
- A
188
- };