@mittwald/flow-react-components 0.1.0-alpha.339 → 0.1.0-alpha.340

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.340](https://github.com/mittwald/flow/compare/0.1.0-alpha.339...0.1.0-alpha.340) (2024-11-11)
+
+### Bug Fixes
+
+- **Notification:** Also call onClose handler from notification component props
+  if notification comes from an NotificationProvider
+  ([29bc5f0](https://github.com/mittwald/flow/commit/29bc5f01f151a7889912e24e889ecb2efe3c210a))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [0.1.0-alpha.339](https://github.com/mittwald/flow/compare/0.1.0-alpha.338...0.1.0-alpha.339) (2024-11-11)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/dist/js/NotificationProvider.js

@@ -2,34 +2,34 @@
 /* */
 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);
+var n = (o, t, e) => A(o, typeof t != "symbol" ? t + "" : t, e);
 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";
+import { makeObservable as g, observable as x, action as u } from "mobx";
+import { Duration as m, DateTime as l } from "luxon";
 import y from "react-dom";
 import b from "clsx";
 import { LazyMotion as I, domAnimation as M, AnimatePresence as P, m as k } from "framer-motion";
 import { useIsSSR as L } from "react-aria";
 class R {
   constructor() {
-    i(this, "duration", u.fromDurationLike(0));
-    i(this, "onDone");
-    i(this, "startedAt");
-    i(this, "pausedAt");
-    i(this, "runningTimeoutId");
+    n(this, "duration", m.fromDurationLike(0));
+    n(this, "onDone");
+    n(this, "startedAt");
+    n(this, "pausedAt");
+    n(this, "runningTimeoutId");
   }
   start(t, e) {
     if (this.startedAt)
       throw new Error("Timer already started");
-    this.duration = u.fromDurationLike(t), this.onDone = e, this.startTimeout(this.duration);
+    this.duration = m.fromDurationLike(t), this.onDone = e, this.startTimeout(this.duration);
   }
   restart() {
     this.stop(), this.startTimeout(this.duration);
   }
   pause() {
     this.clearTimeout();
-    const t = m.now();
+    const t = l.now();
     this.pausedAt = t, this.startedAt || (this.startedAt = t);
   }
   resume() {
@@ -50,37 +50,37 @@ class R {
     this.runningTimeoutId && window.clearTimeout(this.runningTimeoutId), this.runningTimeoutId = void 0;
   }
   startTimeout(t) {
-    this.startedAt = m.now(), this.pausedAt = void 0, this.runningTimeoutId = window.setTimeout(() => {
+    this.startedAt = l.now(), this.pausedAt = void 0, this.runningTimeoutId = window.setTimeout(() => {
       this.stop(), this.onDone && this.onDone();
     }, t.toMillis());
   }
 }
-class a {
+class r {
   constructor() {
-    i(this, "notificationsData", /* @__PURE__ */ new Map());
-    i(this, "id", 0);
+    n(this, "notificationsData", /* @__PURE__ */ new Map());
+    n(this, "id", 0);
     g(this, {
       notificationsData: x.shallow,
-      add: c.bound,
-      remove: c.bound
+      add: u.bound,
+      remove: u.bound
     });
   }
   static useNew() {
-    return v(new a()).current;
+    return v(new r()).current;
   }
   useNotifications() {
     return E(() => Array.from(this.notificationsData.values()));
   }
   add(t) {
-    const e = this.id++, n = {
+    const e = this.id++, i = {
       id: e,
       createdAt: Date.now(),
       autoCloseTimer: new R()
     };
     this.notificationsData.set(e, {
       element: t,
-      meta: n
-    }), t.props.autoClose && n.autoCloseTimer.start({ seconds: 10 }, () => {
+      meta: i
+    }), t.props.autoClose && i.autoCloseTimer.start({ seconds: 10 }, () => {
       this.remove(e);
     });
   }
@@ -101,7 +101,8 @@ const S = "flow--notification-provider--notification-container", B = "flow--noti
       t.meta.autoCloseTimer.resume();
     },
     onClose: () => {
-      e.remove(t.meta.id);
+      var i, a;
+      e.remove(t.meta.id), (a = (i = t.element.props).onClose) == null || a.call(i);
     },
     onFocus: () => {
       t.meta.autoCloseTimer.pause();
@@ -111,11 +112,11 @@ const S = "flow--notification-provider--notification-container", B = "flow--noti
     }
   });
 }, 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(
+  const { className: t, ...e } = o, i = F(), a = i.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, a.map((c) => /* @__PURE__ */ s.createElement(
     k.div,
     {
       className: d.notification,
-      key: r.meta.id,
+      key: c.meta.id,
       initial: { opacity: 0, x: 200 },
       animate: { opacity: 1, x: 0 },
       exit: { opacity: 0, x: 200, height: 0, paddingBottom: 0 },
@@ -126,17 +127,17 @@ const S = "flow--notification-provider--notification-container", B = "flow--noti
     /* @__PURE__ */ s.createElement(
       O,
       {
-        notification: r,
-        controller: n
+        notification: c,
+        controller: i
       }
     )
   )))));
   return h ? null : y.createPortal(T, document.body);
-}, l = D(
-  new a()
-), F = () => N(l), W = (o) => {
-  const { children: t, ...e } = o, n = a.useNew();
-  return /* @__PURE__ */ s.createElement(l.Provider, { value: n }, /* @__PURE__ */ s.createElement(z, { ...e }), t);
+}, f = D(
+  new r()
+), F = () => N(f), W = (o) => {
+  const { children: t, ...e } = o, i = r.useNew();
+  return /* @__PURE__ */ s.createElement(f.Provider, { value: i }, /* @__PURE__ */ s.createElement(z, { ...e }), t);
 };
 export {
   W as NotificationProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.339",
+  "version": "0.1.0-alpha.340",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -405,7 +405,7 @@
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/date": "^3.5.6",
     "@internationalized/string-compiler": "^3.2.5",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.339",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.340",
     "@mittwald/react-use-promise": "^2.5.0",
     "@react-aria/form": "^3.0.10",
     "@react-aria/utils": "^3.25.3",
@@ -435,7 +435,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.3",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.339",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.340",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^20.0.0",
     "@storybook/addon-a11y": "^8.3.5",
@@ -530,5 +530,5 @@
       }
     }
   },
-  "gitHead": "173e00583645fbfe53f110ddcadef58a7dffa0b8"
+  "gitHead": "d0bfb757872d63bc641954e7321c54c41aa4655e"
 }