@mittwald/flow-react-components 0.1.0-alpha.345 → 0.1.0-alpha.346

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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.346](https://github.com/mittwald/flow/compare/0.1.0-alpha.345...0.1.0-alpha.346) (2024-11-14)
+
+### Bug Fixes
+
+- **OverlayController:** fix overlayController handler management
+  ([cfd55bf](https://github.com/mittwald/flow/commit/cfd55bf9075a445f2bd6c48d36a0274d0bc32f2f))
+
+# 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.345](https://github.com/mittwald/flow/compare/0.1.0-alpha.344...0.1.0-alpha.345) (2024-11-14)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/dist/js/{Action-DsQVttvF.js → Action-isbDYaAK.js}

@@ -4,7 +4,7 @@ var k = Object.defineProperty;
 var M = (n, t, e) => t in n ? k(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var r = (n, t, e) => M(n, typeof t != "symbol" ? t + "" : t, e);
 import g, { createContext as O, useRef as I, useContext as w } from "react";
-import { u as E, O as D } from "./context-Cf7tqFtF.js";
+import { u as E, O as D } from "./context-BaYmTa0I.js";
 import T from "invariant";
 import { makeObservable as N, observable as R, action as V, computed as $ } from "mobx";
 import { u as b } from "./useSelector-DpU7_HMO.js";

package/dist/js/Action.js

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

package/dist/js/CodeBlock.js

@@ -3,7 +3,7 @@
 import t from "react";
 import d from "react-syntax-highlighter";
 import m from "clsx";
-import { C as f } from "./CopyButton-e2EjDU95.js";
+import { C as f } from "./CopyButton-D6eXnqw1.js";
 const i = "flow--code-block", k = "flow--code-block--copy-button", u = "flow--code-block--light", p = "flow--code-block--dark", e = {
   codeBlock: i,
   copyButton: k,

package/dist/js/ContextMenu.js

@@ -1,7 +1,7 @@
 "use client"
 /* */
-import { C as t } from "./ContextMenuTrigger-BbYyy0an.js";
-import { a } from "./ContextMenuTrigger-BbYyy0an.js";
+import { C as t } from "./ContextMenuTrigger-C_0tJ4zR.js";
+import { a } from "./ContextMenuTrigger-C_0tJ4zR.js";
 import { M as n } from "./MenuItem-GX6Zh70q.js";
 export {
   t as ContextMenu,

package/dist/js/{ContextMenuTrigger-BbYyy0an.js → ContextMenuTrigger-C_0tJ4zR.js}

@@ -4,16 +4,16 @@ import e from "react";
 import * as i from "react-aria-components";
 import { s } from "./ContextMenu.module-BZingr2B.js";
 import { f as c } from "./flowComponent-1wOIvUIq.js";
-import { P } from "./Popover-BoLYvpo2.js";
+import { P } from "./Popover-D-DgHnsV.js";
 import { C as E } from "./ClearPropsContext-CUvsbMn8.js";
 import { PropsContextProvider as O } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "./propsContext-DzAKlmhS.js";
 import "remeda";
 import "mobx";
-import { u as T } from "./useOverlayController-D8pgx8nV.js";
-import { O as S, a as A } from "./OverlayTrigger-BmB63e4e.js";
-import { A as h } from "./Action-DsQVttvF.js";
+import { u as T } from "./useOverlayController-BwSJj4Ly.js";
+import { O as S, a as A } from "./OverlayTrigger-j2zD8W4S.js";
+import { A as h } from "./Action-isbDYaAK.js";
 const B = c("ContextMenu", (t) => {
   const {
     children: r,

package/dist/js/ContextualHelp.js

@@ -1,16 +1,16 @@
 "use client"
 /* */
 import t from "react";
-import { P as c } from "./Popover-BoLYvpo2.js";
+import { P as c } from "./Popover-D-DgHnsV.js";
 import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as l } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
 import { f as a } from "./flowComponent-1wOIvUIq.js";
 import "mobx";
-import { u } from "./useOverlayController-D8pgx8nV.js";
+import { u } from "./useOverlayController-BwSJj4Ly.js";
 import * as f from "react-aria-components";
-import { a as x } from "./OverlayTrigger-BmB63e4e.js";
+import { a as x } from "./OverlayTrigger-j2zD8W4S.js";
 import { useLocalizedStringFormatter as g } from "react-aria";
 import "@tabler/icons-react";
 import "./Icon-DGqvukLZ.js";

package/dist/js/{CopyButton-e2EjDU95.js → CopyButton-D6eXnqw1.js}

@@ -15,7 +15,7 @@ import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
 import { f as E } from "./flowComponent-1wOIvUIq.js";
-import { A as B } from "./Action-DsQVttvF.js";
+import { A as B } from "./Action-isbDYaAK.js";
 const g = { "de-DE": {
   "copyButton.copy": "Kopieren"
 }, "en-EN": {

package/dist/js/CopyButton.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as t } from "./CopyButton-e2EjDU95.js";
+import { C as t } from "./CopyButton-D6eXnqw1.js";
 export {
   t as CopyButton,
   t as default

package/dist/js/DatePicker.js

@@ -13,9 +13,9 @@ import "./Icon-DGqvukLZ.js";
 import { a as C } from "./IconCalendar-BjcM88rZ.js";
 import { F as D } from "./FieldError-BvH18haz.js";
 import { f as a } from "./FormField.module-CqWpTQKP.js";
-import { P as N } from "./Popover-BoLYvpo2.js";
+import { P as N } from "./Popover-D-DgHnsV.js";
 import "mobx";
-import { u as P } from "./useOverlayController-D8pgx8nV.js";
+import { u as P } from "./useOverlayController-BwSJj4Ly.js";
 import { f as y } from "./flowComponent-1wOIvUIq.js";
 import { s as F, C as b } from "./CalendarHeader-CdTPgq-8.js";
 const g = "flow--date-picker--date-input", v = {

package/dist/js/DateRangePicker.js

@@ -8,7 +8,7 @@ import { PropsContextProvider as f } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
 import * as t from "react-aria-components";
-import { P as g } from "./Popover-BoLYvpo2.js";
+import { P as g } from "./Popover-D-DgHnsV.js";
 import { s as i, C } from "./CalendarHeader-CdTPgq-8.js";
 import { B as D } from "./Button-tKo9ydZL.js";
 import "@tabler/icons-react";
@@ -16,7 +16,7 @@ import "./Icon-DGqvukLZ.js";
 import { a as R } from "./IconCalendar-BjcM88rZ.js";
 import { F as N } from "./FieldError-BvH18haz.js";
 import "mobx";
-import { u as P } from "./useOverlayController-D8pgx8nV.js";
+import { u as P } from "./useOverlayController-BwSJj4Ly.js";
 import { f as v } from "./flowComponent-1wOIvUIq.js";
 const F = () => /* @__PURE__ */ e.createElement(t.RangeCalendar, { className: c(i.calendar, i.range) }, /* @__PURE__ */ e.createElement(C, null), /* @__PURE__ */ e.createElement(t.CalendarGrid, null, (r) => /* @__PURE__ */ e.createElement(t.CalendarCell, { date: r }))), I = "flow--date-range-picker--date-range-input", b = {
   dateRangeInput: I

package/dist/js/List.js

@@ -13,7 +13,7 @@ import { B as y } from "./Button-tKo9ydZL.js";
 import { IconArrowBackUp as rt } from "@tabler/icons-react";
 import { I as ue } from "./Icon-DGqvukLZ.js";
 import { I as ot } from "./IconContextMenu-CZgbKH5A.js";
-import { a as $, C as Y } from "./ContextMenuTrigger-BbYyy0an.js";
+import { a as $, C as Y } from "./ContextMenuTrigger-C_0tJ4zR.js";
 import { M as _ } from "./MenuItem-GX6Zh70q.js";
 import { useLocalizedStringFormatter as w } from "react-aria";
 import { TunnelProvider as ye, TunnelExit as x } from "@mittwald/react-tunnel";
@@ -27,7 +27,7 @@ import { observer as pt } from "mobx-react-lite";
 import { a as H, T as q } from "./Tooltip-DmYZavnZ.js";
 import { B as ft } from "./Badge-C3CBqh8m.js";
 import { makeObservable as St, observable as me, computed as he, action as G } from "mobx";
-import "./context-Cf7tqFtF.js";
+import "./context-BaYmTa0I.js";
 import { u as bt } from "./useOnChange-C1Quwyuz.js";
 import { S as vt } from "./SearchField-62cVb6e-.js";
 import { H as Q } from "./Heading-Be_nT-nd.js";

package/dist/js/Modal.js

@@ -10,10 +10,10 @@ import { TunnelProvider as g, TunnelExit as y } from "@mittwald/react-tunnel";
 import { f as C } from "./flowComponent-1wOIvUIq.js";
 import * as n from "react-aria-components";
 import "mobx";
-import { u as w } from "./useOverlayController-D8pgx8nV.js";
-import { O as E, a as h } from "./OverlayTrigger-BmB63e4e.js";
+import { u as w } from "./useOverlayController-BwSJj4Ly.js";
+import { O as E, a as h } from "./OverlayTrigger-j2zD8W4S.js";
 import { H as O } from "./Header-lMGDqbwd.js";
-import { A as M } from "./Action-DsQVttvF.js";
+import { A as M } from "./Action-isbDYaAK.js";
 import { B as N } from "./Button-tKo9ydZL.js";
 import "@tabler/icons-react";
 import "./Icon-DGqvukLZ.js";

package/dist/js/{OverlayTrigger-BmB63e4e.js → OverlayTrigger-j2zD8W4S.js}

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import e from "react";
-import { u as m, o as v, O as y } from "./context-Cf7tqFtF.js";
+import { u as m, o as v, O as y } from "./context-BaYmTa0I.js";
 import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as O } from "./PropsContextProvider.js";
 import "@react-aria/utils";

package/dist/js/{Popover-BoLYvpo2.js → Popover-D-DgHnsV.js}

@@ -2,11 +2,11 @@
 /* */
 import * as o from "react-aria-components";
 import e from "react";
-import { a as y, O as E } from "./OverlayTrigger-BmB63e4e.js";
+import { a as y, O as E } from "./OverlayTrigger-j2zD8W4S.js";
 import { f as a } from "./flowComponent-1wOIvUIq.js";
 import l from "clsx";
 import "mobx";
-import { u as x } from "./useOverlayController-D8pgx8nV.js";
+import { u as x } from "./useOverlayController-BwSJj4Ly.js";
 const R = a("PopoverTrigger", (r) => {
   const { children: t, ...n } = r;
   return /* @__PURE__ */ e.createElement(

package/dist/js/Popover.js

@@ -1,7 +1,7 @@
 "use client"
 /* */
-import { P as r } from "./Popover-BoLYvpo2.js";
-import { a as p } from "./Popover-BoLYvpo2.js";
+import { P as r } from "./Popover-D-DgHnsV.js";
+import { a as p } from "./Popover-D-DgHnsV.js";
 export {
   r as Popover,
   p as PopoverTrigger,

package/dist/js/Select.js

@@ -13,11 +13,11 @@ import "@tabler/icons-react";
 import "./Icon-DGqvukLZ.js";
 import { I as F } from "./IconChevronDown-BtCeHe7W.js";
 import { f as E } from "./flowComponent-1wOIvUIq.js";
-import { P } from "./Popover-BoLYvpo2.js";
+import { P } from "./Popover-D-DgHnsV.js";
 import "mobx";
-import { u as C } from "./useOverlayController-D8pgx8nV.js";
+import { u as C } from "./useOverlayController-BwSJj4Ly.js";
 import { TunnelProvider as y, TunnelExit as I } from "@mittwald/react-tunnel";
-import { O as B } from "./OverlayTrigger-BmB63e4e.js";
+import { O as B } from "./OverlayTrigger-j2zD8W4S.js";
 const D = "flow--select", L = "flow--select--toggle", u = {
   select: D,
   toggle: L

package/dist/js/Tabs.js

@@ -6,7 +6,7 @@ import u from "clsx";
 import { TunnelExit as E, TunnelProvider as P, TunnelEntry as f } from "@mittwald/react-tunnel";
 import { f as O } from "./flowComponent-1wOIvUIq.js";
 import { useCallbackRef as S } from "use-callback-ref";
-import { a as A, C as B } from "./ContextMenuTrigger-BbYyy0an.js";
+import { a as A, C as B } from "./ContextMenuTrigger-C_0tJ4zR.js";
 import { M as K } from "./MenuItem-GX6Zh70q.js";
 import { B as L } from "./Button-tKo9ydZL.js";
 import "@tabler/icons-react";

package/dist/js/context-BaYmTa0I.js

@@ -0,0 +1,62 @@
+"use client"
+/* */
+var r = Object.defineProperty;
+var a = (s, e, n) => e in s ? r(s, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : s[e] = n;
+var t = (s, e, n) => a(s, typeof e != "symbol" ? e + "" : e, n);
+import { makeObservable as u, observable as i, action as O } from "mobx";
+import { u as d } from "./useSelector-DpU7_HMO.js";
+import { useRef as o, createContext as h, useContext as c } from "react";
+class l {
+  constructor(e) {
+    t(this, "isOpen");
+    t(this, "onOpenHandlers", /* @__PURE__ */ new Set());
+    t(this, "onCloseHandlers", /* @__PURE__ */ new Set());
+    u(this, {
+      isOpen: i,
+      open: O.bound,
+      close: O.bound,
+      toggle: O.bound,
+      setOpen: O.bound
+    }), this.isOpen = (e == null ? void 0 : e.isDefaultOpen) ?? !1, e != null && e.onOpen && this.onOpenHandlers.add(e.onOpen), e != null && e.onClose && this.onCloseHandlers.add(e.onClose);
+  }
+  static useNew(e) {
+    return o(new l(e)).current;
+  }
+  addOnOpen(e) {
+    return this.onOpenHandlers.add(e), () => {
+      this.onOpenHandlers.delete(e);
+    };
+  }
+  addOnClose(e) {
+    return this.onCloseHandlers.add(e), () => {
+      this.onCloseHandlers.delete(e);
+    };
+  }
+  executeOnClose() {
+    this.onCloseHandlers.forEach((e) => e());
+  }
+  executeOnOpen() {
+    this.onOpenHandlers.forEach((e) => e());
+  }
+  open() {
+    this.isOpen = !0, this.executeOnOpen();
+  }
+  close() {
+    this.isOpen = !1, this.executeOnClose();
+  }
+  toggle() {
+    this.isOpen = !this.isOpen, this.isOpen ? this.executeOnOpen() : this.executeOnClose();
+  }
+  setOpen(e) {
+    this.isOpen = e, e ? this.executeOnOpen() : this.executeOnClose();
+  }
+  useIsOpen() {
+    return d(() => this.isOpen);
+  }
+}
+const p = h({}), b = () => c(p);
+export {
+  l as O,
+  p as o,
+  b as u
+};

package/dist/js/controller.js

@@ -1,7 +1,7 @@
 "use client"
 /* */
-import { O as e } from "./context-Cf7tqFtF.js";
-import { u as a } from "./useOverlayController-D8pgx8nV.js";
+import { O as e } from "./context-BaYmTa0I.js";
+import { u as a } from "./useOverlayController-BwSJj4Ly.js";
 export {
   e as OverlayController,
   a as useOverlayController

package/dist/js/hooks.js

@@ -2,7 +2,7 @@
 /* */
 import "mobx";
 import { useState as o, useEffect as r } from "react";
-import { u as m } from "./useOverlayController-D8pgx8nV.js";
+import { u as m } from "./useOverlayController-BwSJj4Ly.js";
 import { u as l } from "./useOnChange-C1Quwyuz.js";
 const n = () => {
   const [e, t] = o(!1);

package/dist/js/react-hook-form.js

@@ -8,7 +8,7 @@ import "@react-aria/utils";
 import "remeda";
 import { d as F } from "./dynamic-ClpUSmEt.js";
 import { F as A } from "./FieldError-BvH18haz.js";
-import { a as P, A as y } from "./Action-DsQVttvF.js";
+import { a as P, A as y } from "./Action-isbDYaAK.js";
 const C = x({}), V = C.Provider, f = () => v(C);
 function D(t) {
   var i;

package/dist/js/types/lib/controller/overlay/OverlayController.d.ts

@@ -1,17 +1,24 @@
+type OpenStateHandler = () => void;
+type DisposerFn = () => void;
 export interface OverlayControllerOptions {
     isDefaultOpen?: boolean;
-    onOpen?: () => void;
-    onClose?: () => void;
+    onOpen?: OpenStateHandler;
+    onClose?: OpenStateHandler;
 }
 export declare class OverlayController {
     isOpen: boolean;
-    onOpen?: () => void;
-    onClose?: () => void;
+    private onOpenHandlers;
+    private onCloseHandlers;
     constructor(options?: OverlayControllerOptions);
     static useNew(options?: OverlayControllerOptions): OverlayController;
+    addOnOpen(handler: OpenStateHandler): DisposerFn;
+    addOnClose(handler: OpenStateHandler): DisposerFn;
+    private executeOnClose;
+    private executeOnOpen;
     open(): void;
     close(): void;
     toggle(): void;
     setOpen(to: boolean): void;
     useIsOpen(): boolean;
 }
+export {};

package/dist/js/types/lib/controller/overlay/useOverlayController.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/js/useOverlayController-BwSJj4Ly.js

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { O as C, u as O } from "./context-BaYmTa0I.js";
+import { useEffect as f } from "react";
+const d = (s, l = {}) => {
+  const {
+    reuseControllerFromContext: u = !0,
+    isDefaultOpen: a,
+    onOpen: o,
+    onClose: e
+  } = l, c = C.useNew({
+    isDefaultOpen: a,
+    onOpen: o,
+    onClose: e
+  }), n = O()[s], r = u && n ? n : c;
+  return f(() => {
+    const t = [];
+    return o && t.push(r.addOnOpen(o)), e && t.push(r.addOnClose(e)), () => {
+      t.forEach((p) => p());
+    };
+  }, [o, e]), r;
+};
+export {
+  d as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.345",
+  "version": "0.1.0-alpha.346",
   "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.345",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.346",
     "@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.345",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.346",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^20.0.0",
     "@storybook/addon-a11y": "^8.3.5",
@@ -530,5 +530,5 @@
       }
     }
   },
-  "gitHead": "65ea60ca3d52a9f721c98b455e4c44e5d005ea03"
+  "gitHead": "b59a2ccadda366c19f4e397b36bb0fbd3cd26c2a"
 }

package/dist/js/context-Cf7tqFtF.js

@@ -1,50 +0,0 @@
-"use client"
-/* */
-var l = Object.defineProperty;
-var o = (n, e, s) => e in n ? l(n, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[e] = s;
-var t = (n, e, s) => o(n, typeof e != "symbol" ? e + "" : e, s);
-import { makeObservable as u, observable as h, action as O } from "mobx";
-import { u as a } from "./useSelector-DpU7_HMO.js";
-import { useRef as c, createContext as p, useContext as C } from "react";
-class i {
-  constructor(e) {
-    t(this, "isOpen");
-    t(this, "onOpen");
-    t(this, "onClose");
-    u(this, {
-      isOpen: h,
-      open: O.bound,
-      close: O.bound,
-      toggle: O.bound,
-      setOpen: O.bound
-    }), this.isOpen = (e == null ? void 0 : e.isDefaultOpen) ?? !1, this.onOpen = e == null ? void 0 : e.onOpen, this.onClose = e == null ? void 0 : e.onClose;
-  }
-  static useNew(e) {
-    return c(new i(e)).current;
-  }
-  open() {
-    var e;
-    this.isOpen = !0, (e = this.onOpen) == null || e.call(this);
-  }
-  close() {
-    var e;
-    this.isOpen = !1, (e = this.onClose) == null || e.call(this);
-  }
-  toggle() {
-    var e, s;
-    this.isOpen = !this.isOpen, this.isOpen ? (e = this.onOpen) == null || e.call(this) : (s = this.onClose) == null || s.call(this);
-  }
-  setOpen(e) {
-    var s, r;
-    this.isOpen = e, e ? (s = this.onOpen) == null || s.call(this) : (r = this.onClose) == null || r.call(this);
-  }
-  useIsOpen() {
-    return a(() => this.isOpen);
-  }
-}
-const f = p({}), g = () => C(f);
-export {
-  i as O,
-  f as o,
-  g as u
-};

package/dist/js/useOverlayController-D8pgx8nV.js

@@ -1,19 +0,0 @@
-"use client"
-/* */
-import { O as C, u as a } from "./context-Cf7tqFtF.js";
-const c = (o, r = {}) => {
-  const {
-    reuseControllerFromContext: t = !0,
-    isDefaultOpen: n,
-    onOpen: l,
-    onClose: s
-  } = r, u = C.useNew({
-    isDefaultOpen: n,
-    onOpen: l,
-    onClose: s
-  }), e = a()[o];
-  return t && e ? e : u;
-};
-export {
-  c as u
-};