@mittwald/flow-react-components 0.1.0-alpha.347 → 0.1.0-alpha.348

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.348](https://github.com/mittwald/flow/compare/0.1.0-alpha.347...0.1.0-alpha.348) (2024-11-18)
+
+### Bug Fixes
+
+- **Field:** fix Select is not updating its value
+  ([#977](https://github.com/mittwald/flow/issues/977))
+  ([1adecf5](https://github.com/mittwald/flow/commit/1adecf539c9c0fe46537d6fcd87f82968860eed8))
+- **List:** fix initial loading also visible on reload
+  ([#978](https://github.com/mittwald/flow/issues/978))
+  ([e4307cd](https://github.com/mittwald/flow/commit/e4307cd9823ed9e1b3982a1edee81654a14e353b))
+
+# 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.347](https://github.com/mittwald/flow/compare/0.1.0-alpha.346...0.1.0-alpha.347) (2024-11-15)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/dist/js/List.js

@@ -16,7 +16,7 @@ import { I as ot } from "./IconContextMenu-CZgbKH5A.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";
+import { TunnelProvider as ye, TunnelExit as N } from "@mittwald/react-tunnel";
 import T from "clsx";
 import { g as lt } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
 import { f as we } from "./flowComponent-1wOIvUIq.js";
@@ -41,16 +41,16 @@ import { getAsyncResource as ge } from "@mittwald/react-use-promise";
 import { u as pe } from "./useSelector-DpU7_HMO.js";
 import { u as Pt } from "./SettingsProvider-D9oDS5r9.js";
 import * as X from "react-aria-components";
-import { S as N } from "./SkeletonText-B5ZghZhO.js";
+import { S as x } from "./SkeletonText-B5ZghZhO.js";
 import { I as Vt } from "./IllustratedMessage-DB1AH-Oq.js";
 import { I as kt } from "./IconSearch-BIWWMdCF.js";
 import { a as b, b as V, d as At } from "./deepHas-KHS5X1F_.js";
 import { ListLoaderAsyncResource as Mt, TypedListLoaderAsyncResource as Bt } from "./List/ListLoaderAsyncResource.js";
 import { S as Dt } from "./Skeleton-CKLaTmDR.js";
 import { a as Te, e as Ce, d as Ie, b as Le, T as Pe, c as Ve } from "./Table-BdpXhsOd.js";
-import { A as xt } from "./ActionGroup-D7pgHibo.js";
-const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view--title", $t = "flow--list--items--item--view--top-content", zt = "flow--list--items--item--view--content", Ut = "flow--list--items--item--view--action", Kt = "flow--list--items--item--view--avatar", Ot = "flow--list--items--item--view--text", Ht = "flow--list--items--item--view--heading", m = {
-  view: Nt,
+import { A as Nt } from "./ActionGroup-D7pgHibo.js";
+const xt = "flow--list--items--item--view", Rt = "flow--list--items--item--view--title", $t = "flow--list--items--item--view--top-content", zt = "flow--list--items--item--view--content", Ut = "flow--list--items--item--view--action", Kt = "flow--list--items--item--view--avatar", Ot = "flow--list--items--item--view--text", Ht = "flow--list--items--item--view--heading", m = {
+  view: xt,
   title: Rt,
   topContent: $t,
   content: zt,
@@ -141,7 +141,7 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
     t,
     m[lt(s)]
   );
-  return /* @__PURE__ */ i.createElement("div", { className: o }, /* @__PURE__ */ i.createElement(ve, { props: n }, /* @__PURE__ */ i.createElement(ye, null, e, /* @__PURE__ */ i.createElement("div", { className: m.title }, /* @__PURE__ */ i.createElement(x, { id: "title" })), /* @__PURE__ */ i.createElement(x, { id: "topContent" }))));
+  return /* @__PURE__ */ i.createElement("div", { className: o }, /* @__PURE__ */ i.createElement(ve, { props: n }, /* @__PURE__ */ i.createElement(ye, null, e, /* @__PURE__ */ i.createElement("div", { className: m.title }, /* @__PURE__ */ i.createElement(N, { id: "title" })), /* @__PURE__ */ i.createElement(N, { id: "topContent" }))));
 }, jt = "flow--list--list-summary", Wt = {
   listSummary: jt
 }, Qi = we("ListSummary", (a) => {
@@ -289,7 +289,7 @@ const Nt = "flow--list--items--item--view", Rt = "flow--list--items--item--view-
   if (s.filters.length === 0 && s.visibleSorting.length === 0 && !s.search && !s.table && !t)
     return null;
   const n = s.filters.map((o) => /* @__PURE__ */ i.createElement(Qt, { key: o.property, filter: o }));
-  return /* @__PURE__ */ i.createElement("div", { className: T(e, F.header) }, /* @__PURE__ */ i.createElement("div", { className: F.pickerListAndSearch }, /* @__PURE__ */ i.createElement("div", { className: F.pickerList }, /* @__PURE__ */ i.createElement(ds, null), /* @__PURE__ */ i.createElement(_t, null), n), /* @__PURE__ */ i.createElement("div", { className: F.searchAndActions }, s.search && /* @__PURE__ */ i.createElement(cs, { className: F.searchField, search: s.search }), /* @__PURE__ */ i.createElement(x, { id: "actions" }))), /* @__PURE__ */ i.createElement(os, null));
+  return /* @__PURE__ */ i.createElement("div", { className: T(e, F.header) }, /* @__PURE__ */ i.createElement("div", { className: F.pickerListAndSearch }, /* @__PURE__ */ i.createElement("div", { className: F.pickerList }, /* @__PURE__ */ i.createElement(ds, null), /* @__PURE__ */ i.createElement(_t, null), n), /* @__PURE__ */ i.createElement("div", { className: F.searchAndActions }, s.search && /* @__PURE__ */ i.createElement(cs, { className: F.searchField, search: s.search }), /* @__PURE__ */ i.createElement(N, { id: "actions" }))), /* @__PURE__ */ i.createElement(os, null));
 }, ms = "flow--list", hs = {
   list: ms
 };
@@ -674,6 +674,9 @@ class ee {
   useIsLoading() {
     return pe(() => this.isLoading);
   }
+  isBatchLoaded(e) {
+    return e in this.dataBatches;
+  }
 }
 const ws = [];
 class te {
@@ -717,12 +720,13 @@ class te {
     }), this.useObserveBatchData(t, e), this.useObserveBatchLoadingState(t, e);
   }
   useObserveBatchLoadingState(e, t) {
-    D(() => (this.loaderState.setBatchLoadingState(
-      t,
-      e.state.value
-    ), e.state.observe((s) => {
-      this.loaderState.setBatchLoadingState(t, s);
-    })), [e, t]);
+    const s = (n) => {
+      this.loaderState.setBatchLoadingState(
+        t,
+        this.loaderState.isBatchLoaded(t) ? "loaded" : n
+      );
+    };
+    D(() => (s(e.state.value), e.state.observe(s)), [e, t]);
   }
   useObserveBatchData(e, t) {
     const s = (n) => {
@@ -992,7 +996,7 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
   item: Ms,
   isSelected: Bs,
   hasAction: Ds
-}, Be = () => /* @__PURE__ */ i.createElement(ke, null, /* @__PURE__ */ i.createElement(Q, null, /* @__PURE__ */ i.createElement(N, { width: "200px" })), /* @__PURE__ */ i.createElement(E, null, /* @__PURE__ */ i.createElement(N, { width: "300px" }))), xs = (a) => {
+}, Be = () => /* @__PURE__ */ i.createElement(ke, null, /* @__PURE__ */ i.createElement(Q, null, /* @__PURE__ */ i.createElement(x, { width: "200px" })), /* @__PURE__ */ i.createElement(E, null, /* @__PURE__ */ i.createElement(x, { width: "300px" }))), Ns = (a) => {
   const { id: e, data: t, children: s } = a, o = g().itemView;
   if (!o)
     return null;
@@ -1012,18 +1016,18 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
     },
     /* @__PURE__ */ i.createElement(Ze, { fallback: /* @__PURE__ */ i.createElement(Be, null) }, s ?? o.render(t))
   );
-}, Ns = (a) => /* @__PURE__ */ i.createElement(X.GridListItem, { textValue: "-", className: B.item }, a.children), W = () => {
+}, xs = (a) => /* @__PURE__ */ i.createElement(X.GridListItem, { textValue: "-", className: B.item }, a.children), W = () => {
   const a = w(S);
   return /* @__PURE__ */ i.createElement(Vt, null, /* @__PURE__ */ i.createElement(kt, null), /* @__PURE__ */ i.createElement(Q, null, a.format("list.noResult.heading")), /* @__PURE__ */ i.createElement(E, null, a.format("list.noResult.text")));
 }, Rs = () => {
   var t;
   const e = ((t = g().itemView) == null ? void 0 : t.fallback) ?? /* @__PURE__ */ i.createElement(Be, null);
-  return Array.from(Array(5)).map((s, n) => /* @__PURE__ */ i.createElement(Ns, { key: n }, et(e)));
+  return Array.from(Array(5)).map((s, n) => /* @__PURE__ */ i.createElement(xs, { key: n }, et(e)));
 }, $s = () => {
   const a = g(), e = a.loader.useIsLoading(), t = a.loader.useIsInitiallyLoading();
   if (!a.itemView)
     return null;
-  const s = a.items.entries.map((o) => /* @__PURE__ */ i.createElement(xs, { key: o.id, data: o.data, id: o.id })), n = T(Se.items, e && Se.isLoading);
+  const s = a.items.entries.map((o) => /* @__PURE__ */ i.createElement(Ns, { key: o.id, data: o.data, id: o.id })), n = T(Se.items, e && Se.isLoading);
   return /* @__PURE__ */ i.createElement("div", { "aria-hidden": t, "aria-busy": e }, /* @__PURE__ */ i.createElement(
     X.GridList,
     {
@@ -1033,7 +1037,7 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
     },
     t ? /* @__PURE__ */ i.createElement(Rs, null) : s
   ));
-}, De = (a) => null, zs = () => De, xe = (a) => null, Us = () => xe, Ne = (a) => null, Ks = () => Ne, Re = (a) => null, Os = () => Re, $e = (a) => null, Hs = () => $e, qs = "flow--list--footer", Gs = {
+}, De = (a) => null, zs = () => De, Ne = (a) => null, Us = () => Ne, xe = (a) => null, Ks = () => xe, Re = (a) => null, Os = () => Re, $e = (a) => null, Hs = () => $e, qs = "flow--list--footer", Gs = {
   footer: qs
 }, js = (a) => {
   const e = w(S), t = g(), s = t.batches, n = t.loader.useIsInitiallyLoading(), o = t.useIsEmpty(), l = s.getTotalItemsCount(), d = s.getVisibleItemsCount();
@@ -1062,7 +1066,7 @@ const ks = "flow--list--items", As = "flow--list--items--is-loading", Se = {
 function ze(a) {
   return null;
 }
-const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s = (a) => /* @__PURE__ */ i.createElement(Te, { ...a }, /* @__PURE__ */ i.createElement(Ce, null, /* @__PURE__ */ i.createElement(Ie, null, /* @__PURE__ */ i.createElement(N, { width: "100%" }))), /* @__PURE__ */ i.createElement(Le, null, Array.from(Array(5)).map((e, t) => /* @__PURE__ */ i.createElement(Pe, { key: t }, /* @__PURE__ */ i.createElement(Ve, null, /* @__PURE__ */ i.createElement(N, { width: "100%" })))))), Qs = "flow--list--table", Xs = "flow--list--table--is-loading", Zs = "flow--list--table--row", ei = "flow--list--table--is-selected", ti = "flow--list--table--has-action", I = {
+const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s = (a) => /* @__PURE__ */ i.createElement(Te, { ...a }, /* @__PURE__ */ i.createElement(Ce, null, /* @__PURE__ */ i.createElement(Ie, null, /* @__PURE__ */ i.createElement(x, { width: "100%" }))), /* @__PURE__ */ i.createElement(Le, null, Array.from(Array(5)).map((e, t) => /* @__PURE__ */ i.createElement(Pe, { key: t }, /* @__PURE__ */ i.createElement(Ve, null, /* @__PURE__ */ i.createElement(x, { width: "100%" })))))), Qs = "flow--list--table", Xs = "flow--list--table--is-loading", Zs = "flow--list--table--row", ei = "flow--list--table--is-selected", ti = "flow--list--table--has-action", I = {
   table: Qs,
   isLoading: Xs,
   row: Zs,
@@ -1147,7 +1151,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
   ), K = (le = b(e, Ke)) == null ? void 0 : le.props, O = (ce = b(e, qe)) == null ? void 0 : ce.props, p = (de = b(e, Ge)) == null ? void 0 : de.props, P = Vs.useNew({
     onChange: s,
     loader: u,
-    filters: V(e, xe).map(
+    filters: V(e, Ne).map(
       (f) => ({
         ...f.props,
         renderItem: f.props.children
@@ -1158,7 +1162,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
       textFieldProps: h,
       defaultValue: h.defaultValue
     } : void 0,
-    sorting: V(e, Ne).map((f) => f.props),
+    sorting: V(e, xe).map((f) => f.props),
     itemView: C ? {
       ...C,
       renderFn: C.children
@@ -1190,7 +1194,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
     ListSummary: {
       tunnelId: "listSummary"
     }
-  }, We = At(e, xt);
+  }, We = At(e, Nt);
   return /* @__PURE__ */ i.createElement(ve, { props: je }, /* @__PURE__ */ i.createElement(ye, null, /* @__PURE__ */ i.createElement(
     Ae.Provider,
     {
@@ -1199,7 +1203,7 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
       }
     },
     /* @__PURE__ */ i.createElement(Jt, null),
-    /* @__PURE__ */ i.createElement("div", { className: hs.list, ref: n }, e, /* @__PURE__ */ i.createElement(us, { hasActionGroup: We }), /* @__PURE__ */ i.createElement("div", null, P.items.entries.length > 0 && /* @__PURE__ */ i.createElement(x, { id: "listSummary" }), P.viewMode === "list" && /* @__PURE__ */ i.createElement($s, null), P.viewMode === "table" && /* @__PURE__ */ i.createElement(si, null)), /* @__PURE__ */ i.createElement(Js, null))
+    /* @__PURE__ */ i.createElement("div", { className: hs.list, ref: n }, e, /* @__PURE__ */ i.createElement(us, { hasActionGroup: We }), /* @__PURE__ */ i.createElement("div", null, P.items.entries.length > 0 && /* @__PURE__ */ i.createElement(N, { id: "listSummary" }), P.viewMode === "list" && /* @__PURE__ */ i.createElement($s, null), P.viewMode === "table" && /* @__PURE__ */ i.createElement(si, null)), /* @__PURE__ */ i.createElement(Js, null))
   )));
 }), ai = () => ii, aa = () => ({
   List: ai(),
@@ -1220,11 +1224,11 @@ const Ys = () => ze, Ue = (a) => null, Ke = (a) => null, Oe = (a) => null, _s =
 });
 export {
   ii as List,
-  xe as ListFilter,
+  Ne as ListFilter,
   Re as ListItem,
   ke as ListItemView,
   De as ListLoaderAsync,
-  Ne as ListSorting,
+  xe as ListSorting,
   $e as ListStaticData,
   Qi as ListSummary,
   ai as TypedList,

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

@@ -43,7 +43,7 @@ function D(t) {
           TextField: e,
           Select: {
             ...e,
-            defaultSelectedKey: e.value
+            selectedKey: e.value
           },
           Slider: e,
           DatePicker: e,

package/dist/js/types/components/List/model/loading/IncrementalLoaderState.d.ts

@@ -16,5 +16,6 @@ export declare class IncrementalLoaderState<T> {
     useMergedData(): T[];
     get isLoading(): boolean;
     useIsLoading(): boolean;
+    isBatchLoaded(batchIndex: number): boolean;
 }
 export {};

package/dist/js/types/integrations/react-hook-form/components/Field/Field.test.d.ts

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

package/package.json

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