@mittwald/flow-react-components 0.1.0-alpha.157 → 0.1.0-alpha.159

package/dist/NotificationProvider.js

@@ -3,7 +3,7 @@
 var w = Object.defineProperty;
 var A = (o, t, e) => t in o ? w(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
 var i = (o, t, e) => A(o, typeof t != "symbol" ? t + "" : t, e);
-import s, { useRef as v, cloneElement as D, createContext as C, useContext as N } from "react";
+import s, { useRef as v, cloneElement as C, createContext as D, useContext as N } from "react";
 import { u as E } from "./useSelector-DpU7_HMO.js";
 import { makeObservable as g, observable as x, action as c } from "mobx";
 import { Duration as u, DateTime as m } from "luxon";
@@ -88,12 +88,12 @@ class a {
     this.notificationsData.delete(t);
   }
 }
-const S = "flow--notification-provider--notification-container", O = "flow--notification-provider--notification", d = {
+const S = "flow--notification-provider--notification-container", B = "flow--notification-provider--notification", d = {
   notificationContainer: S,
-  notification: O
-}, z = (o) => {
+  notification: B
+}, O = (o) => {
   const { notification: t, controller: e } = o;
-  return D(t.element, {
+  return C(t.element, {
     onMouseEnter: () => {
       t.meta.autoCloseTimer.pause();
     },
@@ -102,10 +102,16 @@ const S = "flow--notification-provider--notification-container", O = "flow--noti
     },
     onClose: () => {
       e.remove(t.meta.id);
+    },
+    onFocus: () => {
+      t.meta.autoCloseTimer.pause();
+    },
+    onBlur: () => {
+      t.meta.autoCloseTimer.resume();
     }
   });
-}, B = (o) => {
-  const { className: t, ...e } = o, n = j(), f = n.useNotifications(), h = L(), p = b(d.notificationContainer, t), T = /* @__PURE__ */ s.createElement(I, { features: M }, /* @__PURE__ */ s.createElement("div", { className: p, ...e }, /* @__PURE__ */ s.createElement(P, null, f.map((r) => /* @__PURE__ */ s.createElement(
+}, z = (o) => {
+  const { className: t, ...e } = o, n = F(), f = n.useNotifications(), h = L(), p = b(d.notificationContainer, t), T = /* @__PURE__ */ s.createElement(I, { features: M }, /* @__PURE__ */ s.createElement("div", { className: p, ...e }, /* @__PURE__ */ s.createElement(P, null, f.map((r) => /* @__PURE__ */ s.createElement(
     k.div,
     {
       className: d.notification,
@@ -118,7 +124,7 @@ const S = "flow--notification-provider--notification-container", O = "flow--noti
       }
     },
     /* @__PURE__ */ s.createElement(
-      z,
+      O,
       {
         notification: r,
         controller: n
@@ -126,14 +132,14 @@ const S = "flow--notification-provider--notification-container", O = "flow--noti
     )
   )))));
   return h ? null : y.createPortal(T, document.body);
-}, l = C(
+}, l = D(
   new a()
-), j = () => N(l), W = (o) => {
+), F = () => N(l), W = (o) => {
   const { children: t, ...e } = o, n = a.useNew();
-  return /* @__PURE__ */ s.createElement(l.Provider, { value: n }, /* @__PURE__ */ s.createElement(B, { ...e }), t);
+  return /* @__PURE__ */ s.createElement(l.Provider, { value: n }, /* @__PURE__ */ s.createElement(z, { ...e }), t);
 };
 export {
   W as NotificationProvider,
   W as default,
-  j as useNotificationController
+  F as useNotificationController
 };

package/dist/RadioGroup.js

@@ -1,37 +1,43 @@
 "use client"
 /* */
 import e from "react";
-import * as R from "react-aria-components";
+import * as k from "react-aria-components";
 import E from "clsx";
 import "./propsContext-DzAKlmhS.js";
-import { P as C, m as I } from "./PropsContextProvider-C6Z4XGp6.js";
+import { P as C, m as z } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-import { d as P } from "./dynamic-ClpUSmEt.js";
-import { F as b } from "./FieldError-Dab589IV.js";
-import { C as k } from "./ColumnLayout-FMONjI17.js";
-import { TunnelProvider as y, TunnelExit as m } from "@mittwald/react-tunnel";
-import { s as c } from "./FormField.module-DHK6nIcD.js";
-import { d as F } from "./deepFindOfType-6pG0fH7S.js";
-import { C as w } from "./ClearPropsContext-CUvsbMn8.js";
+import { d as h } from "./dynamic-ClpUSmEt.js";
+import { F as B } from "./FieldError-Dab589IV.js";
+import { C as I } from "./ColumnLayout-FMONjI17.js";
+import { TunnelProvider as P, TunnelExit as c } from "@mittwald/react-tunnel";
+import { s as m } from "./FormField.module-DHK6nIcD.js";
+import { d as y } from "./deepFindOfType-6pG0fH7S.js";
+import { C as b } from "./ClearPropsContext-CUvsbMn8.js";
 import "@tabler/icons-react";
 import "./Icon-BcUUAuaS.js";
-import { I as B, a as v } from "./IconRadioOn-D56UzZk_.js";
+import { I as F, a as v } from "./IconRadioOn-D56UzZk_.js";
 import { f as N } from "./flowComponent-DDs2bWU2.js";
 import "dot-prop";
 import { I as D } from "./IconCheck-DCcrnlQY.js";
-const T = "flow--radio-group", O = "flow--radio-group--segmented-group", $ = "flow--radio-group--segments", L = "flow--radio-group--segment", A = "flow--radio-group--checkmark", a = {
+const T = "flow--radio-group", $ = "flow--radio-group--segmented-group", O = "flow--radio-group--segments", L = "flow--radio-group--segment", S = "flow--radio-group--checkmark", A = "flow--radio-group--radio-group-container", r = {
   radioGroup: T,
-  segmentedGroup: O,
-  segments: $,
+  segmentedGroup: $,
+  segments: O,
   segment: L,
-  checkmark: A
-}, j = "flow--radio-group--radio-button", q = "flow--radio-group--radio-button--content", z = "flow--radio-group--radio-button--label", f = {
+  checkmark: S,
+  radioGroupContainer: A,
+  "container-breakpoint-size-xs": "flow--radio-group--container-breakpoint-size-xs",
+  "container-breakpoint-size-s": "flow--radio-group--container-breakpoint-size-s",
+  "container-breakpoint-size-m": "flow--radio-group--container-breakpoint-size-m",
+  "container-breakpoint-size-l": "flow--radio-group--container-breakpoint-size-l",
+  "container-breakpoint-size-xl": "flow--radio-group--container-breakpoint-size-xl"
+}, j = "flow--radio-group--radio-button", q = "flow--radio-group--radio-button--content", H = "flow--radio-group--radio-button--label", f = {
   radioButton: j,
   content: q,
-  label: z
-}, H = N("RadioButton", (n) => {
-  const { children: t, className: r, refProp: o, ...s } = n, l = E(f.radioButton, r), i = {
+  label: H
+}, J = N("RadioButton", (t) => {
+  const { children: a, className: n, refProp: o, ...i } = t, s = E(f.radioButton, n), l = {
     Text: {
       className: f.label
     },
@@ -39,28 +45,34 @@ const T = "flow--radio-group", O = "flow--radio-group--segmented-group", $ = "fl
       className: f.content
     }
   };
-  return /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement(M, { ...s, className: l, ref: o }, /* @__PURE__ */ e.createElement(C, { props: i }, t)));
-}), ce = N("RadioGroup", (n) => {
+  return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(U, { ...i, className: s, ref: o }, /* @__PURE__ */ e.createElement(C, { props: l }, a)));
+}), K = (t) => `container-breakpoint-size-${t}`, ue = N("RadioGroup", (t) => {
   const {
-    children: t,
-    className: r,
+    children: a,
+    className: n,
     variant: o = "default",
-    s,
-    m: l,
-    l: i,
-    refProp: d,
-    ...h
-  } = n, G = E(c.formField, r);
+    s: i,
+    m: s,
+    l,
+    containerBreakpointSize: d = "m",
+    refProp: w,
+    ...R
+  } = t, x = E(
+    m.formField,
+    r.radioGroupContainer,
+    n,
+    r[K(d)]
+  );
   let p = {
     Label: {
-      className: c.label
+      className: m.label
     },
     FieldDescription: {
-      className: c.fieldDescription,
+      className: m.fieldDescription,
       tunnelId: "fieldDescription"
     },
     FieldError: {
-      className: c.customFieldError,
+      className: m.customFieldError,
       tunnelId: "fieldError"
     },
     RadioButton: {
@@ -70,46 +82,46 @@ const T = "flow--radio-group", O = "flow--radio-group--segmented-group", $ = "fl
       tunnelId: "radios"
     }
   };
-  o === "segmented" && (p = I(p, {
+  o === "segmented" && (p = z(p, {
     Radio: {
-      className: a.segment,
+      className: r.segment,
       unstyled: !0,
-      children: P((x) => /* @__PURE__ */ e.createElement(e.Fragment, null, x.children, /* @__PURE__ */ e.createElement(D, { className: a.checkmark })))
+      children: h((G) => /* @__PURE__ */ e.createElement(e.Fragment, null, G.children, /* @__PURE__ */ e.createElement(D, { className: r.checkmark })))
     }
   }));
-  const u = !!F(t, H);
+  const u = !!y(a, J);
   return o === "segmented" && u && console.warn(
     "<RadioButton/> is not supported in 'segmented' variant of <RadioGroup />"
-  ), /* @__PURE__ */ e.createElement(R.RadioGroup, { ...h, className: G, ref: d }, /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement(k.RadioGroup, { ...R, className: x, ref: w }, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(
     C,
     {
       props: p,
       dependencies: [o],
       mergeInParentContext: !0
     },
-    t,
-    o === "segmented" && /* @__PURE__ */ e.createElement("div", { className: a.segmentedGroup }, /* @__PURE__ */ e.createElement("div", { className: a.segments }, /* @__PURE__ */ e.createElement(m, { id: "radios" }))),
-    o === "default" && u && /* @__PURE__ */ e.createElement(k, { s, m: l, l: i, className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
-    o === "default" && !u && /* @__PURE__ */ e.createElement("div", { className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
-    /* @__PURE__ */ e.createElement(m, { id: "fieldDescription" }),
-    /* @__PURE__ */ e.createElement(m, { id: "fieldError" })
-  )), /* @__PURE__ */ e.createElement(b, { className: c.fieldError }));
-}), J = "flow--radio-group--radio", K = "flow--radio-group--radio--icon", g = {
-  radio: J,
-  icon: K
-}, M = N("Radio", (n) => {
+    a,
+    o === "segmented" && /* @__PURE__ */ e.createElement("div", { className: r.segmentedGroup }, /* @__PURE__ */ e.createElement("div", { className: r.segments }, /* @__PURE__ */ e.createElement(c, { id: "radios" }))),
+    o === "default" && u && /* @__PURE__ */ e.createElement(I, { s: i, m: s, l, className: r.radioGroup }, /* @__PURE__ */ e.createElement(c, { id: "radios" })),
+    o === "default" && !u && /* @__PURE__ */ e.createElement("div", { className: r.radioGroup }, /* @__PURE__ */ e.createElement(c, { id: "radios" })),
+    /* @__PURE__ */ e.createElement(c, { id: "fieldDescription" }),
+    /* @__PURE__ */ e.createElement(c, { id: "fieldError" })
+  )), /* @__PURE__ */ e.createElement(B, { className: m.fieldError }));
+}), M = "flow--radio-group--radio", Q = "flow--radio-group--radio--icon", g = {
+  radio: M,
+  icon: Q
+}, U = N("Radio", (t) => {
   const {
-    children: t,
-    className: r,
+    children: a,
+    className: n,
     unstyled: o = !1,
-    refProp: s,
-    ...l
-  } = n, i = o ? r : E(g.radio, r);
-  return /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement(R.Radio, { ...l, className: i, ref: s }, ({ isSelected: d }) => /* @__PURE__ */ e.createElement(e.Fragment, null, d ? !o && /* @__PURE__ */ e.createElement(B, { className: g.icon }) : !o && /* @__PURE__ */ e.createElement(v, { className: g.icon }), t)));
+    refProp: i,
+    ...s
+  } = t, l = o ? n : E(g.radio, n);
+  return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(k.Radio, { ...s, className: l, ref: i }, ({ isSelected: d }) => /* @__PURE__ */ e.createElement(e.Fragment, null, d ? !o && /* @__PURE__ */ e.createElement(F, { className: g.icon }) : !o && /* @__PURE__ */ e.createElement(v, { className: g.icon }), a)));
 });
 export {
-  M as Radio,
-  H as RadioButton,
-  ce as RadioGroup,
-  ce as default
+  U as Radio,
+  J as RadioButton,
+  ue as RadioGroup,
+  ue as default
 };