@mittwald/flow-react-components 0.1.0-alpha.70 → 0.1.0-alpha.71

package/dist/ButtonGroup.js

@@ -1,26 +1,27 @@
 "use client"
 /* */
 import o from "react";
-import { C as u } from "./ClearPropsContext-CeCMjUK9.js";
-import { P as c } from "./PropsContextProvider-DZvwqHLP.js";
+import { C as c } from "./ClearPropsContext-CeCMjUK9.js";
+import { P as m } from "./PropsContextProvider-DZvwqHLP.js";
 import { u as l } from "./useProps-Dx3m8kCJ.js";
 import { d as i } from "./dynamic-ClpUSmEt.js";
 import d from "clsx";
 import { f } from "./flowComponent-BuF0s2uG.js";
-const y = "flow--button-group", C = "flow--button-group--secondary", t = {
-  buttonGroup: y,
-  secondary: C
-}, g = f("ButtonGroup", (r) => {
-  const { children: e, className: s, ...n } = l("ButtonGroup", r), a = d(t.buttonGroup, s), p = {
+const b = "flow--button-group--button-group-container", C = "flow--button-group", G = "flow--button-group--secondary", t = {
+  buttonGroupContainer: b,
+  buttonGroup: C,
+  secondary: G
+}, B = f("ButtonGroup", (r) => {
+  const { children: n, className: e, ...s } = l("ButtonGroup", r), a = d(t.buttonGroupContainer, e), u = {
     Button: {
       className: i(
-        (m) => m.variant === "secondary" ? t.secondary : void 0
+        (p) => p.variant === "secondary" ? t.secondary : void 0
       )
     }
   };
-  return /* @__PURE__ */ o.createElement(u, null, /* @__PURE__ */ o.createElement("div", { ...n, className: a, role: "group" }, /* @__PURE__ */ o.createElement(c, { props: p }, e)));
+  return /* @__PURE__ */ o.createElement(c, null, /* @__PURE__ */ o.createElement("div", { ...s, className: a }, /* @__PURE__ */ o.createElement("div", { className: t.buttonGroup, role: "group" }, /* @__PURE__ */ o.createElement(m, { props: u }, n))));
 });
 export {
-  g as ButtonGroup,
-  g as default
+  B as ButtonGroup,
+  B as default
 };

package/dist/{ContextMenu-BdvZvLg7.js → ContextMenu-DJ4VRDCG.js}

@@ -1,45 +1,47 @@
 "use client"
 /* */
 import e from "react";
-import * as f from "react-aria-components";
-import { f as u } from "./flowComponent-BuF0s2uG.js";
+import * as u from "react-aria-components";
+import { f as d } from "./flowComponent-BuF0s2uG.js";
 import { P as x } from "./Popover-MmxZkKu3.js";
 import { C } from "./ClearPropsContext-CeCMjUK9.js";
 import { P as M } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
-const d = "flow--context-menu", P = {
-  contextMenu: d
-}, K = u("ContextMenu", (o) => {
+const P = "flow--context-menu", g = {
+  contextMenu: P
+}, b = d("ContextMenu", (o) => {
   const {
     children: n,
     onAction: r,
     selectionMode: t,
     selectedKeys: s,
     defaultSelectedKeys: a,
-    onSelectionChange: i,
-    ref: c,
+    disabledKeys: i,
+    onSelectionChange: c,
+    ref: l,
     ...m
-  } = o, l = t === "navigation" ? "single" : t, p = {
+  } = o, p = t === "navigation" ? "single" : t, f = {
     MenuItem: {
       selectionVariant: t === "navigation" ? "navigation" : "control"
     }
   };
   return /* @__PURE__ */ e.createElement(C, null, /* @__PURE__ */ e.createElement(x, { ...m }, /* @__PURE__ */ e.createElement(
-    f.Menu,
+    u.Menu,
     {
-      className: P.contextMenu,
+      className: g.contextMenu,
       onAction: r,
-      selectionMode: l,
+      selectionMode: p,
       selectedKeys: s,
       defaultSelectedKeys: a,
-      onSelectionChange: i,
-      ref: c
+      disabledKeys: i,
+      onSelectionChange: c,
+      ref: l
     },
-    /* @__PURE__ */ e.createElement(M, { props: p }, n)
+    /* @__PURE__ */ e.createElement(M, { props: f }, n)
   )));
 });
 export {
-  K as C
+  b as C
 };

package/dist/ContextMenu.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as r } from "./ContextMenu-BdvZvLg7.js";
+import { C as r } from "./ContextMenu-DJ4VRDCG.js";
 import { M as n } from "./MenuItem-DbXZNJo6.js";
 import { MenuTrigger as m } from "react-aria-components";
 export {

package/dist/IllustratedMessage.js

@@ -1,42 +1,43 @@
 "use client"
 /* */
-import e from "react";
+import t from "react";
 import c from "clsx";
 import "./propsContext-CauylOgH.js";
 import { P as m } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
-const d = "flow--illustrated-message", g = "flow--illustrated-message--icon", u = "flow--illustrated-message--heading", p = "flow--illustrated-message--text", f = "flow--illustrated-message--button", x = "flow--illustrated-message--negative", t = {
-  illustratedMessage: d,
-  icon: g,
-  heading: u,
+const d = "flow--illustrated-message--illustrated-message-container", g = "flow--illustrated-message", u = "flow--illustrated-message--icon", f = "flow--illustrated-message--heading", p = "flow--illustrated-message--text", x = "flow--illustrated-message--button", v = "flow--illustrated-message--negative", e = {
+  illustratedMessageContainer: d,
+  illustratedMessage: g,
+  icon: u,
+  heading: f,
   text: p,
-  button: f,
-  negative: x
-}, C = (s) => {
-  const { className: a, children: o, variant: l = "info", ...n } = s, i = c(
-    t.illustratedMessage,
-    t[l],
+  button: x,
+  negative: v
+}, E = (s) => {
+  const { className: a, children: l, variant: o = "info", ...n } = s, i = c(
+    e.illustratedMessageContainer,
+    e[o],
     a
   ), r = {
     Icon: {
-      className: t.icon,
+      className: e.icon,
       size: "l"
     },
     Heading: {
-      className: t.heading
+      className: e.heading
     },
     Text: {
-      className: t.text
+      className: e.text
     },
     Button: {
-      className: t.button,
+      className: e.button,
       variant: "accent"
     }
   };
-  return /* @__PURE__ */ e.createElement("div", { ...n, className: i }, /* @__PURE__ */ e.createElement(m, { props: r }, o));
+  return /* @__PURE__ */ t.createElement("div", { ...n, className: i }, /* @__PURE__ */ t.createElement("div", { className: e.illustratedMessage }, /* @__PURE__ */ t.createElement(m, { props: r }, l)));
 };
 export {
-  C as IllustratedMessage,
-  C as default
+  E as IllustratedMessage,
+  E as default
 };

package/dist/List.js

@@ -4,7 +4,7 @@ var Q = Object.defineProperty;
 var X = (i, t, e) => t in i ? Q(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
 var o = (i, t, e) => (X(i, typeof t != "symbol" ? t + "" : t, e), e);
 import r, { createContext as Y, useContext as Z, createElement as _, useEffect as C, useState as tt, Suspense as et } from "react";
-import { C as x } from "./ContextMenu-BdvZvLg7.js";
+import { C as x } from "./ContextMenu-DJ4VRDCG.js";
 import { M as U, d as at } from "./MenuItem-DbXZNJo6.js";
 import * as O from "react-aria-components";
 import { MenuTrigger as st } from "react-aria-components";
@@ -23,14 +23,14 @@ import { useLocalObservable as dt } from "mobx-react-lite";
 import { autorun as ht, runInAction as gt, makeObservable as pt, observable as k, computed as D, action as y } from "mobx";
 import { getAsyncResource as P } from "@mittwald/react-use-promise";
 import { times as ft } from "remeda";
-import { u as R } from "./useSelector-DpU7_HMO.js";
+import { u as V } from "./useSelector-DpU7_HMO.js";
 import "./propsContext-CauylOgH.js";
 import { P as bt } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import { W as St } from "./Wrap-DGT1h1o3.js";
 import { L as yt } from "./Link-C26cRsUe.js";
 import { I as Ct } from "./IconContextMenu-bD7n5nvt.js";
-import { d as f, a as V } from "./deepFindOfType-6pG0fH7S.js";
+import { d as f, a as M } from "./deepFindOfType-6pG0fH7S.js";
 import { I as vt } from "./InlineCode-BV2i5uN0.js";
 import { ListLoaderAsyncResource as Ft } from "./List/ListLoaderAsyncResource.js";
 const J = Y({}), m = () => Z(J).list, Tt = (i) => /* @__PURE__ */ r.createElement(r.Fragment, null, i.children()), Et = () => m().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ r.createElement(Tt, { key: e }, () => {
@@ -50,7 +50,7 @@ const J = Y({}), m = () => Z(J).list, Tt = (i) => /* @__PURE__ */ r.createElemen
   },
   "en-EN": {
     options: "Options",
-    paginationInfo: "Showing {visibleRows} of {totalRows}",
+    paginationInfo: "Showing {visibleItemsCount} of {totalItemsCount}",
     paginationInfoFiltered: "Showing {visibleItemsCount} of {filteredItemsCount} (unfiltered total count {totalItemsCount})",
     resetAll: "Reset filters",
     setSorting: "Sorting: {property}",
@@ -98,10 +98,10 @@ const J = Y({}), m = () => Z(J).list, Tt = (i) => /* @__PURE__ */ r.createElemen
     },
     e
   ));
-}, Bt = "flow--list--header", At = "flow--list--header--picker-list", M = {
+}, Bt = "flow--list--header", At = "flow--list--header--picker-list", N = {
   header: Bt,
   pickerList: At
-}, kt = "flow--list--header--active-filters", Dt = "flow--list--header--clear-button", N = {
+}, kt = "flow--list--header--active-filters", Dt = "flow--list--header--clear-button", R = {
   activeFilters: kt,
   clearButton: Dt
 }, Pt = () => {
@@ -118,24 +118,24 @@ const J = Y({}), m = () => Z(J).list, Tt = (i) => /* @__PURE__ */ r.createElemen
       /* @__PURE__ */ r.createElement(rt, null)
     ))
   );
-  return t.length <= 0 ? null : /* @__PURE__ */ r.createElement("div", { className: N.activeFilters }, t, /* @__PURE__ */ r.createElement(
+  return t.length <= 0 ? null : /* @__PURE__ */ r.createElement("div", { className: R.activeFilters }, t, /* @__PURE__ */ r.createElement(
     h,
     {
-      className: N.clearButton,
+      className: R.clearButton,
       size: "s",
       style: "plain",
       onPress: () => i.clearFilters()
     },
     /* @__PURE__ */ r.createElement(v, { locales: g }, "resetAll")
   ));
-}, Rt = (i) => {
+}, Vt = (i) => {
   const { className: t } = i, a = m().filters.map((s) => /* @__PURE__ */ r.createElement(It, { key: s.property, filter: s }));
-  return /* @__PURE__ */ r.createElement("div", { className: K(t, M.header) }, /* @__PURE__ */ r.createElement("div", { className: M.pickerList }, /* @__PURE__ */ r.createElement(Lt, null), a), /* @__PURE__ */ r.createElement(Pt, null));
-}, Vt = "flow--list", Mt = {
-  list: Vt
+  return /* @__PURE__ */ r.createElement("div", { className: K(t, N.header) }, /* @__PURE__ */ r.createElement("div", { className: N.pickerList }, /* @__PURE__ */ r.createElement(Lt, null), a), /* @__PURE__ */ r.createElement(Pt, null));
+}, Mt = "flow--list", Nt = {
+  list: Mt
 };
 var u;
-let Nt = (u = class {
+let Rt = (u = class {
   constructor(t, e, a) {
     o(this, "id");
     o(this, "data");
@@ -158,7 +158,7 @@ class F {
     return new F(t);
   }
   get entries() {
-    return this.list.reactTable.table.getRowModel().rows.map((t) => Nt.fromRow(this, t));
+    return this.list.reactTable.table.getRowModel().rows.map((t) => Rt.fromRow(this, t));
   }
 }
 class zt {
@@ -428,13 +428,13 @@ class E {
     return (this.dataBatches.length === 0 ? this.prevDataBatches : this.dataBatches).flatMap((e) => e);
   }
   useMergedData() {
-    return R(() => this.mergedData);
+    return V(() => this.mergedData);
   }
   get isLoading() {
     return this.batchLoadingStates.some((t) => t === "loading");
   }
   useIsLoading() {
-    return R(() => this.isLoading);
+    return V(() => this.isLoading);
   }
 }
 const Ht = [];
@@ -680,8 +680,8 @@ function qe(i) {
     } : void 0
   }, S = (p) => /* @__PURE__ */ r.createElement(ee, { data: p }), G = qt.useNew({
     loader: d,
-    filters: V(t, re).map((p) => p.props),
-    sorting: V(t, ne).map((p) => p.props),
+    filters: M(t, re).map((p) => p.props),
+    sorting: M(t, ne).map((p) => p.props),
     render: ((A = f(t, ie)) == null ? void 0 : A.props.children) ?? S,
     ...a,
     batchesController: {
@@ -696,7 +696,7 @@ function qe(i) {
       }
     },
     /* @__PURE__ */ r.createElement(Et, null),
-    /* @__PURE__ */ r.createElement("div", { className: Mt.list }, /* @__PURE__ */ r.createElement(Rt, null), /* @__PURE__ */ r.createElement(ae, null), /* @__PURE__ */ r.createElement(de, null))
+    /* @__PURE__ */ r.createElement("div", { className: Nt.list }, /* @__PURE__ */ r.createElement(Vt, null), /* @__PURE__ */ r.createElement(ae, null), /* @__PURE__ */ r.createElement(de, null))
   );
 }
 export {

package/dist/Tabs.js

@@ -1,45 +1,131 @@
 "use client"
 /* */
-import t, { createContext as f, useContext as p, useId as x } from "react";
-import * as l from "react-aria-components";
-import c from "clsx";
-import { TunnelProvider as N, TunnelExit as m, TunnelEntry as T } from "@mittwald/react-tunnel";
-import { f as P } from "./flowComponent-BuF0s2uG.js";
-import { T as C } from "./Text-CBzyk1oM.js";
-const h = "flow--tabs", w = "flow--tabs--tab-list", b = {
-  tabs: h,
-  tabList: w
-}, W = P("Tabs", (e) => {
-  const { children: a, className: s, ...n } = e, o = c(b.tabs, s);
-  return /* @__PURE__ */ t.createElement(N, null, a, /* @__PURE__ */ t.createElement(l.Tabs, { className: o, ...n }, /* @__PURE__ */ t.createElement(l.TabList, { className: b.tabList }, /* @__PURE__ */ t.createElement(m, { id: "TabTitles" })), /* @__PURE__ */ t.createElement(m, { id: "TabPanels" })));
-}), v = "flow--tabs--tab-title", y = {
-  tabTitle: v
-}, d = f({}), L = () => p(d), F = d.Provider, j = (e) => {
-  const { children: a, className: s, ...n } = e, o = L(), r = c(y.tabTitle, s);
-  return /* @__PURE__ */ t.createElement(T, { id: "TabTitles" }, /* @__PURE__ */ t.createElement(l.Tab, { className: r, ...n, id: o.id }, /* @__PURE__ */ t.createElement(C, { emulateBoldWidth: !0 }, a)));
-}, I = "flow--tabs--tab--tab-panel", $ = {
-  tabPanel: I
-}, k = (e) => {
+import e, { useRef as M, useState as T, useEffect as N, useId as C, createContext as y, useContext as I } from "react";
+import * as f from "react-aria-components";
+import { MenuTrigger as O } from "react-aria-components";
+import m from "clsx";
+import { TunnelExit as u, TunnelProvider as P, TunnelEntry as b } from "@mittwald/react-tunnel";
+import { f as S } from "./flowComponent-BuF0s2uG.js";
+import { useCallbackRef as B } from "use-callback-ref";
+import { C as K } from "./ContextMenu-DJ4VRDCG.js";
+import { M as L } from "./MenuItem-DbXZNJo6.js";
+import { B as F } from "./Button-B2GKVrxY.js";
+import "@tabler/icons-react";
+import "./Icon-DdQwrIup.js";
+import { I as A } from "./IconContextMenu-bD7n5nvt.js";
+import { T as R } from "./Text-CBzyk1oM.js";
+const W = "flow--tabs", $ = "flow--tabs--list", k = {
+  tabs: W,
+  list: $
+}, j = "flow--tabs--tab-list", q = "flow--tabs--tab-list--context-menu-button", z = "flow--tabs--tab-list--titles", D = "flow--tabs--tab-list--collapsed", d = {
+  tabList: j,
+  contextMenuButton: q,
+  titles: z,
+  collapsed: D
+}, G = () => {
+  const s = M(), [n, r] = T(!1), o = B(null, (t) => {
+    a(), c(t);
+  }), l = ([
+    t
+  ]) => {
+    t && r(!t.isIntersecting);
+  }, c = (t = o.current) => {
+    if (t && t instanceof Element) {
+      const i = new IntersectionObserver(l, {
+        root: t.parentElement,
+        // 1 = invoke callback when the element is 100% visible within the parent element
+        threshold: 1
+      });
+      s.current = i, i.observe(t);
+    }
+  }, a = () => {
+    var t;
+    (t = s.current) == null || t.disconnect();
+  };
+  return N(() => (c(), a), [s.current]), {
+    ref: o,
+    isOverflowing: n
+  };
+}, H = "flow--tabs--tab-title", p = {
+  tabTitle: H
+}, J = (s) => {
+  const { className: n, ...r } = s, o = m(n, p.tabTitle);
+  return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(u, { id: "ActiveTitle" }));
+}, Q = (s) => {
+  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, l = C(), c = G(), a = c.isOverflowing, t = m(d.tabList, a && d.collapsed), i = (w) => {
+    const [E] = w;
+    E && o(E);
+  }, x = /* @__PURE__ */ e.createElement(f.TabList, { className: d.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(u, { id: "Titles" })), g = a && /* @__PURE__ */ e.createElement(J, { id: l }), h = a && /* @__PURE__ */ e.createElement(O, null, /* @__PURE__ */ e.createElement(
+    F,
+    {
+      style: "soft",
+      className: d.contextMenuButton,
+      variant: "secondary",
+      "aria-labelledby": l
+    },
+    /* @__PURE__ */ e.createElement(A, null)
+  ), /* @__PURE__ */ e.createElement(
+    K,
+    {
+      disabledKeys: r,
+      selectedKeys: n ? [n] : void 0,
+      selectionMode: "navigation",
+      onSelectionChange: i
+    },
+    /* @__PURE__ */ e.createElement(u, { id: "ContextMenuItems" })
+  ));
+  return /* @__PURE__ */ e.createElement("div", { className: t }, x, g, h);
+}, de = S("Tabs", (s) => {
+  const { children: n, className: r, defaultSelectedKey: o, disabledKeys: l, ...c } = s, a = m(k.tabs, r), [t, i] = T(
+    o
+  );
+  return /* @__PURE__ */ e.createElement(P, null, n, /* @__PURE__ */ e.createElement(
+    f.Tabs,
+    {
+      className: a,
+      ...c,
+      selectedKey: t,
+      onSelectionChange: i,
+      disabledKeys: l
+    },
+    /* @__PURE__ */ e.createElement(
+      Q,
+      {
+        selection: t,
+        onContextMenuSelectionChange: i,
+        disabledKeys: l
+      }
+    ),
+    /* @__PURE__ */ e.createElement(u, { id: "Panels" })
+  ));
+}), v = y({
+  id: "undefined"
+}), U = () => I(v), V = v.Provider, be = (s) => {
+  const { children: n, className: r, ...o } = s, { id: l } = U(), c = m(p.tabTitle, r);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(b, { id: "Titles" }, /* @__PURE__ */ e.createElement(f.Tab, { ...o, id: l, className: c }, (a) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, n), /* @__PURE__ */ e.createElement(b, { id: "ActiveTitle" }, a.isSelected && n)))), /* @__PURE__ */ e.createElement(b, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(L, { id: l }, n)));
+}, X = "flow--tabs--tab--tab-panel", Y = {
+  tabPanel: X
+}, ue = (s) => {
   const {
-    children: a,
-    className: s,
-    shouldForceMount: n = !0,
-    id: o,
-    ...r
-  } = e, u = c($.tabPanel, s), E = x(), i = o ?? E;
-  return /* @__PURE__ */ t.createElement(T, { id: "TabPanels" }, /* @__PURE__ */ t.createElement(F, { value: { id: i } }, /* @__PURE__ */ t.createElement(
-    l.TabPanel,
+    children: n,
+    className: r,
+    shouldForceMount: o = !0,
+    id: l,
+    ...c
+  } = s, a = m(Y.tabPanel, r), t = C(), i = l ?? t;
+  return /* @__PURE__ */ e.createElement(b, { id: "Panels" }, /* @__PURE__ */ e.createElement(
+    f.TabPanel,
     {
-      className: u,
-      shouldForceMount: n,
+      className: a,
+      shouldForceMount: o,
       id: i,
-      ...r
+      ...c
     },
-    a
-  )));
+    /* @__PURE__ */ e.createElement(V, { value: { id: i } }, n)
+  ));
 };
 export {
-  k as Tab,
-  j as TabTitle,
-  W as Tabs
+  ue as Tab,
+  be as TabTitle,
+  de as Tabs
 };