@mittwald/flow-react-components 0.1.0-alpha.99 → 0.2.0-alpha.5

package/dist/js/List-CMZ39yA9.js

@@ -0,0 +1,310 @@
+"use client"
+/* */
+import t, { useState as T, useEffect as M, Children as F, Suspense as P } from "react";
+import { B as f } from "./Button-BVX7ZUc-.js";
+import { T as v } from "./Text-BhUDxFAa.js";
+import { a as L, C as z } from "./ContextMenuTrigger-Dvg67ZaR.js";
+import * as k from "react-aria-components";
+import w from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { IconArrowBackUp as $ } from "@tabler/icons-react";
+import "html-react-parser";
+import { TunnelExit as g, TunnelProvider as R } from "@mittwald/react-tunnel";
+import "./flowComponent-C9QB9J-7.js";
+import "react-children-utilities";
+import { I as H, a as V, b as D } from "./IconSave-Dn5nIQti.js";
+import "object-code";
+import { useLocalizedStringFormatter as h } from "react-aria";
+import "mobx";
+import "./context-BaYmTa0I.js";
+import "invariant";
+import "./Action-DEIpraQq.js";
+import "./getActionGroupSlot-CpYrpObV.js";
+import { M as O } from "./MenuItem-D0jf0LCm.js";
+import { u as G } from "./useOnChange-C1Quwyuz.js";
+import { S as K } from "./SearchField-6FORWdLV.js";
+import { B as U } from "./Badge-DbfZzhI4.js";
+import { I as C } from "./Icon-Dt5-H3Rz.js";
+import { a as S, T as b } from "./Tooltip-D5QM-BbC.js";
+import { S as W } from "./Skeleton-CKLaTmDR.js";
+import { H as j } from "./Heading-DaTyq1e0.js";
+import { PropsContextProvider as q } from "./PropsContextProvider.js";
+import { d as Y } from "./dynamic-ClpUSmEt.js";
+import { I as J } from "./IconContextMenu-CYVciJIG.js";
+import { S as N } from "./SkeletonText-B5ZghZhO.js";
+const ce = (s) => {
+  const { buttonText: e, children: n, ...i } = s;
+  return /* @__PURE__ */ t.createElement(L, null, /* @__PURE__ */ t.createElement(f, { variant: "outline", color: "secondary" }, /* @__PURE__ */ t.createElement(v, null, e), /* @__PURE__ */ t.createElement(H, null)), /* @__PURE__ */ t.createElement(z, { ...i }, n));
+}, me = (s) => {
+  const { id: e, onAction: n, children: i } = s;
+  return /* @__PURE__ */ t.createElement(O, { id: e, onAction: n, key: e }, i);
+}, Q = "flow--list--header", X = "flow--list--picker-list-and-search", Z = "flow--list--picker-list", _ = "flow--list--search-and-actions", tt = "flow--list--search-field", p = {
+  header: Q,
+  pickerListAndSearch: X,
+  pickerList: Z,
+  searchAndActions: _,
+  searchField: tt
+}, et = 800, st = (s) => {
+  const { onChange: e, value: n, autoSubmit: i, className: l, ...o } = s, [a, c] = T(n ?? ""), m = () => {
+    a.trim() === "" ? e == null || e(void 0) : e == null || e(a);
+  };
+  M(() => {
+    if (n) {
+      const d = setTimeout(() => m(), et);
+      return () => clearTimeout(d);
+    }
+  }, [a, i]), G(n, () => {
+    c(n ?? "");
+  }, [a]);
+  const E = () => {
+    e == null || e(void 0), c("");
+  }, A = (d) => {
+    d.key === "Enter" ? m() : d.key === "Escape" && E();
+  }, B = w(l, p.searchField);
+  return /* @__PURE__ */ t.createElement(
+    K,
+    {
+      className: B,
+      value: a,
+      onKeyUp: A,
+      onChange: (d) => c(d),
+      onClear: E,
+      ...o
+    }
+  );
+}, ue = (s) => {
+  const {
+    showSearch: e,
+    onSearchChanged: n,
+    autoSubmitSearch: i,
+    searchValue: l,
+    filterPickerList: o,
+    activeFilterList: a
+  } = s;
+  return /* @__PURE__ */ t.createElement("div", { className: p.header }, /* @__PURE__ */ t.createElement("div", { className: p.pickerListAndSearch }, /* @__PURE__ */ t.createElement("div", { className: p.pickerList }, o), /* @__PURE__ */ t.createElement("div", { className: p.searchAndActions }, e && /* @__PURE__ */ t.createElement(
+    st,
+    {
+      value: l,
+      onChange: n,
+      autoSubmit: i
+    }
+  ), /* @__PURE__ */ t.createElement(g, { id: "actions" }))), a);
+}, de = (s) => {
+  const { children: e, onRemove: n } = s;
+  return /* @__PURE__ */ t.createElement(U, { onClose: n }, /* @__PURE__ */ t.createElement(v, null, e));
+}, nt = "flow--list--active-filters", it = "flow--list--clear-button", lt = {
+  activeFilters: nt,
+  clearButton: it
+}, u = { "de-DE": {
+  "list.filters.clear": "Filter entfernen",
+  "list.filters.reset": "Filter zurücksetzen",
+  "list.filters.store": "Filter speichern",
+  "list.noResult.heading": "Keine Suchergebnisse gefunden",
+  "list.noResult.text": "Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.",
+  "list.options": "Optionen",
+  "list.paginationInfo": (s) => `${s.visibleItemsCount} von insgesamt ${s.totalItemsCount} angezeigt`,
+  "list.settings": "Einstellungen",
+  "list.settings.viewMode": "Ansicht",
+  "list.settings.viewMode.list": "Liste",
+  "list.settings.viewMode.table": "Tabelle",
+  "list.showMore": "Mehr anzeigen",
+  "list.sorting": "Sortierung",
+  "list.toggleExpandButton.collapse": "Weniger anzeigen",
+  "list.toggleExpandButton.expand": "Mehr anzeigen"
+}, "en-EN": {
+  "list.filters.clear": "Clear filters",
+  "list.filters.reset": "Reset filters",
+  "list.filters.store": "Store filters",
+  "list.noResult.heading": "No search results found",
+  "list.noResult.text": "Your search did not return any results. Please adjust the search query or your filters.",
+  "list.options": "Options",
+  "list.paginationInfo": (s) => `Showing ${s.visibleItemsCount} of ${s.totalItemsCount}`,
+  "list.settings": "Settings",
+  "list.settings.viewMode": "View",
+  "list.settings.viewMode.list": "List",
+  "list.settings.viewMode.table": "Table",
+  "list.showMore": "Show more",
+  "list.sorting": "Sorting",
+  "list.toggleExpandButton.collapse": "Show less",
+  "list.toggleExpandButton.expand": "Show more"
+} }, I = (s) => {
+  const { children: e, locales: n, variables: i } = s;
+  return h(n).format(e, i);
+}, fe = (s) => {
+  const {
+    onResetFilters: e,
+    onClearFilters: n,
+    onStoreFilterDefaultSettings: i,
+    someFiltersChanged: l,
+    children: o
+  } = s, a = h(u), c = i && l && /* @__PURE__ */ t.createElement(S, null, /* @__PURE__ */ t.createElement(b, null, /* @__PURE__ */ t.createElement(I, { locales: u }, "list.filters.store")), /* @__PURE__ */ t.createElement(
+    f,
+    {
+      size: "s",
+      variant: "plain",
+      color: "secondary",
+      onPress: i,
+      "aria-label": a.format("list.filters.store")
+    },
+    /* @__PURE__ */ t.createElement(V, null)
+  )), m = l ? /* @__PURE__ */ t.createElement(S, null, /* @__PURE__ */ t.createElement(b, null, /* @__PURE__ */ t.createElement(I, { locales: u }, "list.filters.reset")), /* @__PURE__ */ t.createElement(
+    f,
+    {
+      size: "s",
+      variant: "plain",
+      color: "secondary",
+      onPress: e,
+      "aria-label": a.format("list.filters.reset")
+    },
+    /* @__PURE__ */ t.createElement(C, null, /* @__PURE__ */ t.createElement($, null))
+  )) : void 0, E = F.count(o) > 0 ? /* @__PURE__ */ t.createElement(S, null, /* @__PURE__ */ t.createElement(b, null, /* @__PURE__ */ t.createElement(I, { locales: u }, "list.filters.clear")), /* @__PURE__ */ t.createElement(
+    f,
+    {
+      size: "s",
+      variant: "plain",
+      color: "secondary",
+      onPress: n
+    },
+    /* @__PURE__ */ t.createElement(C, null, /* @__PURE__ */ t.createElement(D, null))
+  )) : void 0;
+  return F.count(o) === 0 && !c && !m ? null : /* @__PURE__ */ t.createElement("div", { className: lt.activeFilters }, o, c, m, E);
+}, pe = (s) => {
+  const { totalItemsCount: e, visibleItemsCount: n, isInitiallyLoading: i } = s, l = h(u), o = i ? /* @__PURE__ */ t.createElement(W, { width: "200px" }) : l.format("list.paginationInfo", {
+    visibleItemsCount: n,
+    totalItemsCount: e
+  });
+  return /* @__PURE__ */ t.createElement(v, null, o);
+}, he = (s) => {
+  const e = h(u);
+  return /* @__PURE__ */ t.createElement(f, { ...s, variant: "plain", size: "s" }, e.format("list.showMore"));
+}, ot = "flow--list--footer", rt = {
+  footer: ot
+}, Ee = (s) => {
+  const { children: e } = s;
+  return /* @__PURE__ */ t.createElement("div", { className: rt.footer }, e);
+}, at = "flow--list--item", ct = "flow--list--is-selected", mt = "flow--list--has-action", x = {
+  item: at,
+  isSelected: ct,
+  hasAction: mt
+}, ut = "flow--list--items--item--list-item-view--view", dt = "flow--list--items--item--list-item-view--content", ft = "flow--list--items--item--list-item-view--title", pt = "flow--list--items--item--list-item-view--avatar", ht = "flow--list--items--item--list-item-view--sub-title", Et = "flow--list--items--item--list-item-view--heading", gt = "flow--list--items--item--list-item-view--text", vt = "flow--list--items--item--list-item-view--top-content", wt = "flow--list--items--item--list-item-view--action", St = "flow--list--items--item--list-item-view--bottom-content", r = {
+  view: ut,
+  content: dt,
+  title: ft,
+  avatar: pt,
+  subTitle: ht,
+  heading: Et,
+  text: gt,
+  topContent: vt,
+  action: wt,
+  bottomContent: St
+}, bt = (s) => {
+  const { className: e, children: n } = s, i = h(u);
+  return /* @__PURE__ */ t.createElement(L, null, /* @__PURE__ */ t.createElement(
+    f,
+    {
+      variant: "plain",
+      color: "secondary",
+      className: e,
+      "aria-label": i.format("list.options"),
+      tunnelId: null
+    },
+    /* @__PURE__ */ t.createElement(J, null)
+  ), n);
+}, It = (s) => s === "top" ? r.topContent : s === "bottom" ? r.bottomContent : r.topContent, xt = (s) => {
+  const { children: e, className: n } = s, i = {
+    ContextMenu: {
+      wrapWith: /* @__PURE__ */ t.createElement(bt, { className: r.action }),
+      placement: "bottom end",
+      tunnelId: "button"
+    },
+    Button: {
+      className: r.action,
+      tunnelId: "button"
+    },
+    ActionGroup: {
+      className: r.action,
+      ignoreBreakpoint: !0,
+      tunnelId: "button",
+      Button: {
+        tunnelId: null
+      }
+    },
+    Content: {
+      className: Y((o) => It(o.slot))
+    },
+    Avatar: {
+      className: r.avatar,
+      tunnelId: "title"
+    },
+    Heading: {
+      className: r.heading,
+      level: 5,
+      tunnelId: "title"
+    },
+    Text: {
+      className: r.text,
+      tunnelId: "text"
+    },
+    Link: {
+      unstyled: !0
+    }
+  }, l = w(r.view, n);
+  return /* @__PURE__ */ t.createElement("div", { className: l }, /* @__PURE__ */ t.createElement(q, { props: i, mergeInParentContext: !0 }, /* @__PURE__ */ t.createElement(R, null, /* @__PURE__ */ t.createElement("div", { className: r.content }, e, /* @__PURE__ */ t.createElement("div", { className: r.title }, /* @__PURE__ */ t.createElement(g, { id: "title" }), /* @__PURE__ */ t.createElement("div", { className: r.subTitle }, /* @__PURE__ */ t.createElement(g, { id: "text" })))), /* @__PURE__ */ t.createElement(g, { id: "button" }))));
+}, Ft = () => /* @__PURE__ */ t.createElement(xt, null, /* @__PURE__ */ t.createElement(j, null, /* @__PURE__ */ t.createElement(N, { width: "200px" })), /* @__PURE__ */ t.createElement(v, null, /* @__PURE__ */ t.createElement(N, { width: "300px" }))), ge = (s) => {
+  const { id: e, textValue: n, href: i, onAction: l, children: o, ...a } = s, c = !!l || !!i;
+  return /* @__PURE__ */ t.createElement(
+    k.GridListItem,
+    {
+      id: e,
+      className: (m) => w(
+        x.item,
+        c && x.hasAction,
+        m.isSelected && x.isSelected
+      ),
+      textValue: n,
+      href: i,
+      onAction: l,
+      ...a
+    },
+    /* @__PURE__ */ t.createElement(P, { fallback: /* @__PURE__ */ t.createElement(Ft, null) }, o)
+  );
+}, Ct = "flow--list--items", Nt = "flow--list--is-loading", y = {
+  items: Ct,
+  isLoading: Nt
+}, ve = (s) => {
+  const { isInitiallyLoading: e, isLoading: n, children: i, ...l } = s, o = w(y.items, n && y.isLoading);
+  return /* @__PURE__ */ t.createElement("div", { "aria-hidden": e, "aria-busy": n }, /* @__PURE__ */ t.createElement(
+    k.GridList,
+    {
+      className: o,
+      ...l,
+      renderEmptyState: () => null
+    },
+    e ? null : i
+  ));
+}, yt = "flow--list", Lt = {
+  list: yt
+}, we = (s) => {
+  const { children: e, ref: n } = s;
+  return /* @__PURE__ */ t.createElement("div", { className: Lt.list, ref: n }, e);
+};
+export {
+  de as A,
+  ce as F,
+  ue as H,
+  ve as I,
+  he as L,
+  pe as P,
+  st as S,
+  fe as a,
+  me as b,
+  ge as c,
+  Ee as d,
+  we as e,
+  xt as f,
+  p as h,
+  u as l
+};