@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.50

package/dist/js/packages/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs

@@ -9,34 +9,34 @@ import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx
 var getStyleForContentSlot = (slot) => slot === "bottom" ? clsx(ListItemView_module_default.bottomContent, Item_module_default.bottomContent) : ListItemView_module_default.topContent;
+var contentProps = { bottom: {
+	onMouseDown: (e) => e.stopPropagation(),
+	onPointerDown: (e) => e.stopPropagation()
+} };
+var propsContext = {
+	ContextMenu: { placement: "bottom end" },
+	Button: { className: ListItemView_module_default.action },
+	ActionGroup: { className: ListItemView_module_default.action },
+	Content: {
+		className: dynamic((p) => getStyleForContentSlot(p.slot)),
+		onMouseDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onMouseDown),
+		onPointerDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onPointerDown)
+	},
+	Avatar: { className: ListItemView_module_default.avatar },
+	Heading: {
+		className: ListItemView_module_default.heading,
+		level: 5,
+		size: "xs",
+		elementType: "span",
+		Badge: { className: ListItemView_module_default.badge },
+		AlertBadge: { className: ListItemView_module_default.badge }
+	},
+	Text: { className: ListItemView_module_default.text },
+	Link: { unstyled: true }
+};
 /** @flr-generate all */
 var ListItemViewContent = (props) => {
 	const { children, avatar, title, subTitle, button, bottom, checkbox, viewMode, s, m, l } = props;
-	const contentProps = { bottom: {
-		onMouseDown: (e) => e.stopPropagation(),
-		onPointerDown: (e) => e.stopPropagation()
-	} };
-	const propsContext = {
-		ContextMenu: { placement: "bottom end" },
-		Button: { className: ListItemView_module_default.action },
-		ActionGroup: { className: ListItemView_module_default.action },
-		Content: {
-			className: dynamic((p) => getStyleForContentSlot(p.slot)),
-			onMouseDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onMouseDown),
-			onPointerDown: dynamic((p) => contentProps[p.slot ?? "top"]?.onPointerDown)
-		},
-		Avatar: { className: ListItemView_module_default.avatar },
-		Heading: {
-			className: ListItemView_module_default.heading,
-			level: 5,
-			size: "xs",
-			elementType: "span",
-			Badge: { className: ListItemView_module_default.badge },
-			AlertBadge: { className: ListItemView_module_default.badge }
-		},
-		Text: { className: ListItemView_module_default.text },
-		Link: { unstyled: true }
-	};
 	const className = clsx(ListItemView_module_default.view, viewMode === "tiles" ? ListItemView_module_default.tileView : ListItemView_module_default.listView);
 	const header = /* @__PURE__ */ jsxs("div", {
 		className: ListItemView_module_default.header,

package/dist/js/packages/components/src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemViewContent.mjs","names":["styles","itemStyles","_Fragment"],"sources":["../../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport itemStyles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n  ColumnLayout,\n  type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n    title?: ReactNode;\n    subTitle?: ReactNode;\n    avatar?: ReactNode;\n    button?: ReactNode;\n    bottom?: ReactNode;\n    checkbox?: ReactNode;\n    viewMode?: ListViewMode;\n  };\n\n/*\n * The bottom content also carries Item's own `bottomContent` class.\n * Item.module.scss uses it to exclude this area from the item's hover and\n * pressed background — it has its own interactive elements.\n */\nconst getStyleForContentSlot = (slot?: string) =>\n  slot === \"bottom\"\n    ? clsx(styles.bottomContent, itemStyles.bottomContent)\n    : styles.topContent;\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n  const {\n    children,\n    avatar,\n    title,\n    subTitle,\n    button,\n    bottom,\n    checkbox,\n    viewMode,\n    s,\n    m,\n    l,\n  } = props;\n\n  const contentProps: Record<string, ComponentProps<\"div\">> = {\n    bottom: {\n      onMouseDown: (e) => e.stopPropagation(),\n      onPointerDown: (e) => e.stopPropagation(),\n    },\n  };\n\n  const propsContext: PropsContext = {\n    ContextMenu: {\n      placement: \"bottom end\",\n    },\n    Button: {\n      className: styles.action,\n    },\n    ActionGroup: {\n      className: styles.action,\n    },\n    Content: {\n      className: dynamic((p) => getStyleForContentSlot(p.slot)),\n      onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n      onPointerDown: dynamic(\n        (p) => contentProps[p.slot ?? \"top\"]?.onPointerDown,\n      ),\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    Heading: {\n      className: styles.heading,\n      level: 5,\n      size: \"xs\",\n      elementType: \"span\",\n      Badge: { className: styles.badge },\n      AlertBadge: { className: styles.badge },\n    },\n    Text: {\n      className: styles.text,\n    },\n    Link: {\n      unstyled: true,\n    },\n  };\n\n  const className = clsx(\n    styles.view,\n    viewMode === \"tiles\" ? styles.tileView : styles.listView,\n  );\n\n  const header = (\n    <div className={styles.header}>\n      <div className={styles.checkboxContainer}>{checkbox}</div>\n      {avatar}\n      <div className={styles.title}>\n        {title}\n        <div className={styles.subTitle}>{subTitle}</div>\n      </div>\n    </div>\n  );\n\n  const innerListContent = (\n    <>\n      {header}\n      {children}\n    </>\n  );\n\n  const listColumnsContentView = (\n    <ColumnLayout\n      s={s}\n      m={m}\n      l={l}\n      className={clsx(styles.content, styles.columnLayout)}\n    >\n      {innerListContent}\n    </ColumnLayout>\n  );\n\n  const listDefaultContentView = (\n    <div className={styles.content}>{innerListContent}</div>\n  );\n\n  const listView = (\n    <>\n      <div className={styles.contentWrapper}>\n        {s || m || l ? listColumnsContentView : listDefaultContentView}\n        {button}\n      </div>\n      {bottom}\n    </>\n  );\n\n  const tilesViews = (\n    <>\n      <div className={styles.avatarContainer}>{avatar}</div>\n      <div className={styles.content}>\n        <div className={styles.header}>\n          <div className={styles.checkboxContainer}>{checkbox}</div>\n          <div className={styles.title}>\n            {title}\n            <div className={styles.subTitle}>{subTitle}</div>\n          </div>\n          {button}\n        </div>\n        {children}\n        {bottom}\n      </div>\n    </>\n  );\n\n  return (\n    <div className={className}>\n      <PropsContextProvider props={propsContext}>\n        {viewMode === \"list\" && listView}\n        {viewMode === \"tiles\" && tilesViews}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default ListItemViewContent;\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,0BAA0B,SAC9B,SAAS,WACL,KAAKA,4BAAO,eAAeC,oBAAW,aAAa,IACnDD,4BAAO;;AAGb,IAAa,uBAAuB,UAAoC;CACtE,MAAM,EACJ,UACA,QACA,OACA,UACA,QACA,QACA,UACA,UACA,GACA,GACA,MACE;CAEJ,MAAM,eAAsD,EAC1D,QAAQ;EACN,cAAc,MAAM,EAAE,gBAAgB;EACtC,gBAAgB,MAAM,EAAE,gBAAgB;CAC1C,EACF;CAEA,MAAM,eAA6B;EACjC,aAAa,EACX,WAAW,aACb;EACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;EACA,aAAa,EACX,WAAWA,4BAAO,OACpB;EACA,SAAS;GACP,WAAW,SAAS,MAAM,uBAAuB,EAAE,IAAI,CAAC;GACxD,aAAa,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,WAAW;GACtE,eAAe,SACZ,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,aACxC;EACF;EACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;EACA,SAAS;GACP,WAAWA,4BAAO;GAClB,OAAO;GACP,MAAM;GACN,aAAa;GACb,OAAO,EAAE,WAAWA,4BAAO,MAAM;GACjC,YAAY,EAAE,WAAWA,4BAAO,MAAM;EACxC;EACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;EACA,MAAM,EACJ,UAAU,KACZ;CACF;CAEA,MAAM,YAAY,KAChBA,4BAAO,MACP,aAAa,UAAUA,4BAAO,WAAWA,4BAAO,QAClD;CAEA,MAAM,SACJ,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAoB,UAAA;GAAc,CAAA;GACxD;GACD,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA,CACG,OACD,oBAAC,OAAD;KAAK,WAAWA,4BAAO;KAAW,UAAA;IAAc,CAAA,CAC7C;;EACF;;CAGP,MAAM,mBACJ,qBAAAE,UAAA,EAAA,UAAA,CACG,QACA,QACD,EAAA,CAAA;CAGJ,MAAM,yBACJ,oBAAC,cAAD;EACK;EACA;EACA;EACH,WAAW,KAAKF,4BAAO,SAASA,4BAAO,YAAY;EAElD,UAAA;CACW,CAAA;CAGhB,MAAM,yBACJ,oBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAU,UAAA;CAAsB,CAAA;CAGzD,MAAM,WACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAvB,UAAA,CACG,KAAK,KAAK,IAAI,yBAAyB,wBACvC,MACE;CACJ,CAAA,GAAA,MACD,EAAA,CAAA;CAGJ,MAAM,aACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAkB,UAAA;CAAY,CAAA,GACrD,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAoB,UAAA;KAAc,CAAA;KACzD,qBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAvB,UAAA,CACG,OACD,oBAAC,OAAD;OAAK,WAAWA,4BAAO;OAAW,UAAA;MAAc,CAAA,CAC7C;;KACJ;IACE;;GACJ;GACA;EACE;CACL,CAAA,CAAA,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EAAgB;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,aAAa,UAAU,UACvB,aAAa,WAAW,UACL;;CACnB,CAAA;AAET"}
+{"version":3,"file":"ListItemViewContent.mjs","names":["styles","itemStyles","_Fragment"],"sources":["../../../../../../../../../../../src/components/List/components/ListItemView/components/ListItemViewContent/ListItemViewContent.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport styles from \"../../ListItemView.module.scss\";\nimport itemStyles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { ListViewMode } from \"@/components/List/model/types\";\nimport clsx from \"clsx\";\nimport {\n  ColumnLayout,\n  type ColumnLayoutProps,\n} from \"@/components/ColumnLayout\";\n\nexport type ListItemViewContentProps = PropsWithChildren &\n  Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> & {\n    title?: ReactNode;\n    subTitle?: ReactNode;\n    avatar?: ReactNode;\n    button?: ReactNode;\n    bottom?: ReactNode;\n    checkbox?: ReactNode;\n    viewMode?: ListViewMode;\n  };\n\n/*\n * The bottom content also carries Item's own `bottomContent` class.\n * Item.module.scss uses it to exclude this area from the item's hover and\n * pressed background — it has its own interactive elements.\n */\nconst getStyleForContentSlot = (slot?: string) =>\n  slot === \"bottom\"\n    ? clsx(styles.bottomContent, itemStyles.bottomContent)\n    : styles.topContent;\n\nconst contentProps: Record<string, ComponentProps<\"div\">> = {\n  bottom: {\n    onMouseDown: (e) => e.stopPropagation(),\n    onPointerDown: (e) => e.stopPropagation(),\n  },\n};\n\nconst propsContext: PropsContext = {\n  ContextMenu: {\n    placement: \"bottom end\",\n  },\n  Button: {\n    className: styles.action,\n  },\n  ActionGroup: {\n    className: styles.action,\n  },\n  Content: {\n    className: dynamic((p) => getStyleForContentSlot(p.slot)),\n    onMouseDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onMouseDown),\n    onPointerDown: dynamic((p) => contentProps[p.slot ?? \"top\"]?.onPointerDown),\n  },\n  Avatar: {\n    className: styles.avatar,\n  },\n  Heading: {\n    className: styles.heading,\n    level: 5,\n    size: \"xs\",\n    elementType: \"span\",\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n  },\n  Text: {\n    className: styles.text,\n  },\n  Link: {\n    unstyled: true,\n  },\n};\n\n/** @flr-generate all */\nexport const ListItemViewContent = (props: ListItemViewContentProps) => {\n  const {\n    children,\n    avatar,\n    title,\n    subTitle,\n    button,\n    bottom,\n    checkbox,\n    viewMode,\n    s,\n    m,\n    l,\n  } = props;\n\n  const className = clsx(\n    styles.view,\n    viewMode === \"tiles\" ? styles.tileView : styles.listView,\n  );\n\n  const header = (\n    <div className={styles.header}>\n      <div className={styles.checkboxContainer}>{checkbox}</div>\n      {avatar}\n      <div className={styles.title}>\n        {title}\n        <div className={styles.subTitle}>{subTitle}</div>\n      </div>\n    </div>\n  );\n\n  const innerListContent = (\n    <>\n      {header}\n      {children}\n    </>\n  );\n\n  const listColumnsContentView = (\n    <ColumnLayout\n      s={s}\n      m={m}\n      l={l}\n      className={clsx(styles.content, styles.columnLayout)}\n    >\n      {innerListContent}\n    </ColumnLayout>\n  );\n\n  const listDefaultContentView = (\n    <div className={styles.content}>{innerListContent}</div>\n  );\n\n  const listView = (\n    <>\n      <div className={styles.contentWrapper}>\n        {s || m || l ? listColumnsContentView : listDefaultContentView}\n        {button}\n      </div>\n      {bottom}\n    </>\n  );\n\n  const tilesViews = (\n    <>\n      <div className={styles.avatarContainer}>{avatar}</div>\n      <div className={styles.content}>\n        <div className={styles.header}>\n          <div className={styles.checkboxContainer}>{checkbox}</div>\n          <div className={styles.title}>\n            {title}\n            <div className={styles.subTitle}>{subTitle}</div>\n          </div>\n          {button}\n        </div>\n        {children}\n        {bottom}\n      </div>\n    </>\n  );\n\n  return (\n    <div className={className}>\n      <PropsContextProvider props={propsContext}>\n        {viewMode === \"list\" && listView}\n        {viewMode === \"tiles\" && tilesViews}\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default ListItemViewContent;\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,0BAA0B,SAC9B,SAAS,WACL,KAAKA,4BAAO,eAAeC,oBAAW,aAAa,IACnDD,4BAAO;AAEb,IAAM,eAAsD,EAC1D,QAAQ;CACN,cAAc,MAAM,EAAE,gBAAgB;CACtC,gBAAgB,MAAM,EAAE,gBAAgB;AAC1C,EACF;AAEA,IAAM,eAA6B;CACjC,aAAa,EACX,WAAW,aACb;CACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;CACA,aAAa,EACX,WAAWA,4BAAO,OACpB;CACA,SAAS;EACP,WAAW,SAAS,MAAM,uBAAuB,EAAE,IAAI,CAAC;EACxD,aAAa,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,WAAW;EACtE,eAAe,SAAS,MAAM,aAAa,EAAE,QAAQ,MAAM,EAAE,aAAa;CAC5E;CACA,QAAQ,EACN,WAAWA,4BAAO,OACpB;CACA,SAAS;EACP,WAAWA,4BAAO;EAClB,OAAO;EACP,MAAM;EACN,aAAa;EACb,OAAO,EAAE,WAAWA,4BAAO,MAAM;EACjC,YAAY,EAAE,WAAWA,4BAAO,MAAM;CACxC;CACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;CACA,MAAM,EACJ,UAAU,KACZ;AACF;;AAGA,IAAa,uBAAuB,UAAoC;CACtE,MAAM,EACJ,UACA,QACA,OACA,UACA,QACA,QACA,UACA,UACA,GACA,GACA,MACE;CAEJ,MAAM,YAAY,KAChBA,4BAAO,MACP,aAAa,UAAUA,4BAAO,WAAWA,4BAAO,QAClD;CAEA,MAAM,SACJ,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAoB,UAAA;GAAc,CAAA;GACxD;GACD,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA,CACG,OACD,oBAAC,OAAD;KAAK,WAAWA,4BAAO;KAAW,UAAA;IAAc,CAAA,CAC7C;;EACF;;CAGP,MAAM,mBACJ,qBAAAE,UAAA,EAAA,UAAA,CACG,QACA,QACD,EAAA,CAAA;CAGJ,MAAM,yBACJ,oBAAC,cAAD;EACK;EACA;EACA;EACH,WAAW,KAAKF,4BAAO,SAASA,4BAAO,YAAY;EAElD,UAAA;CACW,CAAA;CAGhB,MAAM,yBACJ,oBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAU,UAAA;CAAsB,CAAA;CAGzD,MAAM,WACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAvB,UAAA,CACG,KAAK,KAAK,IAAI,yBAAyB,wBACvC,MACE;CACJ,CAAA,GAAA,MACD,EAAA,CAAA;CAGJ,MAAM,aACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAWF,4BAAO;EAAkB,UAAA;CAAY,CAAA,GACrD,qBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAvB,UAAA;GACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAoB,UAAA;KAAc,CAAA;KACzD,qBAAC,OAAD;MAAK,WAAWA,4BAAO;MAAvB,UAAA,CACG,OACD,oBAAC,OAAD;OAAK,WAAWA,4BAAO;OAAW,UAAA;MAAc,CAAA,CAC7C;;KACJ;IACE;;GACJ;GACA;EACE;CACL,CAAA,CAAA,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EAAgB;EACd,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,aAAa,UAAU,UACvB,aAAa,WAAW,UACL;;CACnB,CAAA;AAET"}

package/dist/js/packages/components/src/components/List/components/ListSummary/ListSummary.mjs

@@ -7,18 +7,14 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/ListSummary/ListSummary.tsx
 /** @flr-generate all */
 var ListSummary = flowComponent("ListSummary", (props) => {
-	const { children, position = "top", ref } = props;
+	const { position = "top", className, ...rest } = props;
 	if (position === "bottom") return /* @__PURE__ */ jsx("footer", {
-		ref,
-		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.bottom),
-		...props,
-		children
+		...rest,
+		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.bottom, className)
 	});
 	return /* @__PURE__ */ jsx("header", {
-		ref,
-		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.top),
-		...props,
-		children
+		...rest,
+		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.top, className)
 	});
 });
 //#endregion

package/dist/js/packages/components/src/components/List/components/ListSummary/ListSummary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\n\nexport interface ListSummaryProps\n  extends FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default: \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { children, position = \"top\", ref } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        ref={ref}\n        className={clsx(styles.listSummary, styles.bottom)}\n        {...props}\n      >\n        {children}\n      </footer>\n    );\n  }\n\n  return (\n    <header\n      ref={ref}\n      className={clsx(styles.listSummary, styles.top)}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ;CAE5C,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,MAAM;EACjD,GAAI;EAEH;CACK,CAAA;CAIZ,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,GAAG;EAC9C,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface ListSummaryProps\n  extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { position = \"top\", className, ...rest } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        {...rest}\n        className={clsx(styles.listSummary, styles.bottom, className)}\n      />\n    );\n  }\n\n  return (\n    <header\n      {...rest}\n      className={clsx(styles.listSummary, styles.top, className)}\n    />\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAcA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,WAAW,OAAO,WAAW,GAAG,SAAS;CAEjD,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,QAAQ,SAAS;CAC7D,CAAA;CAIL,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,KAAK,SAAS;CAC1D,CAAA;AAEL,CAAC"}

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs

@@ -2,40 +2,50 @@
 /* */
 import { useList } from "../../hooks/useList.mjs";
 import { useInfiniteScrollTrigger } from "../../hooks/useInfiniteScrollTrigger.mjs";
+import { useLatestOnAction } from "../../hooks/useLatestOnAction.mjs";
 import Table_module_default from "./Table.module.mjs";
 import TableView from "../../../../views/TableView.mjs";
 import TableHeaderView from "../../../../views/TableHeaderView.mjs";
 import TableBodyView from "../../../../views/TableBodyView.mjs";
-import TableRowView from "../../../../views/TableRowView.mjs";
-import TableCellView from "../../../../views/TableCellView.mjs";
 import TableColumnView from "../../../../views/TableColumnView.mjs";
 import { TableBodyLoadingView } from "./components/TableBodyLoadingView.mjs";
+import { Row } from "./components/Row.mjs";
 import clsx from "clsx";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { isShallowEqual } from "remeda";
 //#region src/components/List/components/Table/Table.tsx
 var Table = () => {
 	const list = useList();
+	const lastRender = useRef(null);
 	const table = list.table;
 	const listIsEmpty = list.useIsEmpty();
 	const isLoading = list.loader.useIsLoading();
 	const isInitiallyLoading = list.loader.useIsInitiallyLoading();
 	const isLoadingMore = list.loader.useIsLoadingMore();
 	const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();
+	const onAction = useLatestOnAction(list);
 	if (!table || listIsEmpty) return null;
-	const rowAction = table.list.onAction;
 	const tableClassName = clsx(Table_module_default.table, isLoading && !(list.infiniteScroll && isLoadingMore) && Table_module_default.isLoading, table.componentProps.className);
-	const rows = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(TableRowView, {
-		className: clsx(Table_module_default.row, rowAction && Table_module_default.hasAction, table.body.row.componentProps.className),
+	const inputs = [
+		tableClassName,
+		isInitiallyLoading,
+		isLoading,
+		onAction,
+		triggerIndex,
+		triggerRef,
+		...list.items.entries.flatMap((item) => [item.id, item.data])
+	];
+	const last = lastRender.current;
+	if (last && isShallowEqual(last.inputs, inputs) && table.rendersSameAs(last.table)) return last.element;
+	const rows = list.items.entries.map((item, index) => /* @__PURE__ */ jsx(Row, {
 		id: item.id,
-		onAction: rowAction ? () => rowAction(item.data) : void 0,
-		...table.body.row.componentProps,
-		...index === triggerIndex ? { ref: triggerRef } : {},
-		children: table.body.row?.cells.map((cell, i) => /* @__PURE__ */ jsx(TableCellView, {
-			...cell.componentProps,
-			children: cell.renderFn ? cell.renderFn(item.data, list) : void 0
-		}, i))
+		data: item.data,
+		list,
+		onAction,
+		triggerRef: index === triggerIndex ? triggerRef : void 0
 	}, item.id));
-	return /* @__PURE__ */ jsxs(TableView, {
+	const element = /* @__PURE__ */ jsxs(TableView, {
 		...list.componentProps,
 		...table.componentProps,
 		className: tableClassName,
@@ -49,6 +59,12 @@ var Table = () => {
 			children: isInitiallyLoading ? /* @__PURE__ */ jsx(TableBodyLoadingView, {}) : rows
 		})]
 	});
+	lastRender.current = {
+		inputs,
+		table,
+		element
+	};
+	return element;
 };
 //#endregion
 export { Table };

package/dist/js/packages/components/src/components/List/components/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\n\nexport const Table: FC = () => {\n  const list = useList();\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n\n  if (!table || listIsEmpty) {\n    return null;\n  }\n\n  const rowAction = table.list.onAction;\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  const rows = list.items.entries.map((item, index) => (\n    <TableRowView\n      className={clsx(\n        styles.row,\n        rowAction && styles.hasAction,\n        table.body.row.componentProps.className,\n      )}\n      key={item.id}\n      id={item.id}\n      onAction={rowAction ? () => rowAction(item.data) : undefined}\n      {...table.body.row.componentProps}\n      {...(index === triggerIndex ? { ref: triggerRef } : {})}\n    >\n      {table.body.row?.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(item.data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  ));\n\n  return (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAE9D,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,YAAY,MAAM,KAAK;CAE7B,MAAM,iBAAiB,KACrBA,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkBA,qBAAO,WAC/D,MAAM,eAAe,SACvB;CAEA,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,UACzC,oBAAC,cAAD;EACE,WAAW,KACTA,qBAAO,KACP,aAAaA,qBAAO,WACpB,MAAM,KAAK,IAAI,eAAe,SAChC;EAEA,IAAI,KAAK;EACT,UAAU,kBAAkB,UAAU,KAAK,IAAI,IAAI,KAAA;EACnD,GAAI,MAAM,KAAK,IAAI;EACnB,GAAK,UAAU,eAAe,EAAE,KAAK,WAAW,IAAI,CAAC;EAEpD,UAAA,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,MAChC,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,KAAK,MAAM,IAAI,IAAI,KAAA;EACrC,GAFK,CAEL,CAChB;CACW,GAXP,KAAK,EAWE,CACf;CAED,OACE,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;AAEf"}
+{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/Table/Table.tsx"],"sourcesContent":["import type { FC, ReactElement } from \"react\";\nimport { useRef } from \"react\";\nimport { isShallowEqual } from \"remeda\";\nimport { useList } from \"@/components/List\";\nimport styles from \"./Table.module.scss\";\nimport clsx from \"clsx\";\nimport TableView from \"@/views/TableView\";\nimport TableHeaderView from \"@/views/TableHeaderView\";\nimport TableBodyView from \"@/views/TableBodyView\";\nimport TableColumnView from \"@/views/TableColumnView\";\nimport { TableBodyLoadingView } from \"@/components/List/components/Table/components/TableBodyLoadingView\";\nimport { useInfiniteScrollTrigger } from \"@/components/List/hooks/useInfiniteScrollTrigger\";\nimport { useLatestOnAction } from \"@/components/List/hooks/useLatestOnAction\";\nimport { Row } from \"@/components/List/components/Table/components/Row\";\nimport type { Table as TableModel } from \"@/components/List/model/table/Table\";\n\ninterface LastRender {\n  inputs: unknown[];\n  table: TableModel<never>;\n  element: ReactElement;\n}\n\nexport const Table: FC = () => {\n  const list = useList();\n  const lastRender = useRef<LastRender | null>(null);\n  const table = list.table;\n  const listIsEmpty = list.useIsEmpty();\n\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n  const isLoadingMore = list.loader.useIsLoadingMore();\n\n  const { triggerRef, triggerIndex } = useInfiniteScrollTrigger();\n  const onAction = useLatestOnAction(list);\n\n  if (!table || listIsEmpty) {\n    return null;\n  }\n\n  const tableClassName = clsx(\n    styles.table,\n    isLoading && !(list.infiniteScroll && isLoadingMore) && styles.isLoading,\n    table.componentProps.className,\n  );\n\n  /*\n   * react-aria re-renders every row and cell whenever its table renders, its\n   * row memo or not (adobe/react-spectrum#10759). While nothing the table\n   * shows has changed, it gets the element of the last render, so it does not\n   * render at all.\n   */\n  const inputs = [\n    tableClassName,\n    isInitiallyLoading,\n    isLoading,\n    onAction,\n    triggerIndex,\n    triggerRef,\n    ...list.items.entries.flatMap((item) => [item.id, item.data]),\n  ];\n  const last = lastRender.current;\n  if (\n    last &&\n    isShallowEqual(last.inputs, inputs) &&\n    table.rendersSameAs(last.table)\n  ) {\n    return last.element;\n  }\n\n  const rows = list.items.entries.map((item, index) => (\n    <Row\n      key={item.id}\n      id={item.id}\n      data={item.data}\n      list={list}\n      onAction={onAction}\n      triggerRef={index === triggerIndex ? triggerRef : undefined}\n    />\n  ));\n\n  const element = (\n    <TableView\n      {...list.componentProps}\n      {...table.componentProps}\n      className={tableClassName}\n      aria-hidden={isInitiallyLoading}\n      aria-busy={isLoading}\n    >\n      <TableHeaderView {...table.header.componentProps}>\n        {table.header.columns.map((col, i) => (\n          <TableColumnView key={i} {...col.componentProps} />\n        ))}\n      </TableHeaderView>\n      <TableBodyView {...table.body.componentProps}>\n        {isInitiallyLoading ? <TableBodyLoadingView /> : rows}\n      </TableBodyView>\n    </TableView>\n  );\n  lastRender.current = { inputs, table, element };\n  return element;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAa,cAAkB;CAC7B,MAAM,OAAO,QAAQ;CACrB,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,KAAK,WAAW;CAEpC,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,qBAAqB,KAAK,OAAO,sBAAsB;CAC7D,MAAM,gBAAgB,KAAK,OAAO,iBAAiB;CAEnD,MAAM,EAAE,YAAY,iBAAiB,yBAAyB;CAC9D,MAAM,WAAW,kBAAkB,IAAI;CAEvC,IAAI,CAAC,SAAS,aACZ,OAAO;CAGT,MAAM,iBAAiB,KACrBA,qBAAO,OACP,aAAa,EAAE,KAAK,kBAAkB,kBAAkBA,qBAAO,WAC/D,MAAM,eAAe,SACvB;CAQA,MAAM,SAAS;EACb;EACA;EACA;EACA;EACA;EACA;EACA,GAAG,KAAK,MAAM,QAAQ,SAAS,SAAS,CAAC,KAAK,IAAI,KAAK,IAAI,CAAC;CAC9D;CACA,MAAM,OAAO,WAAW;CACxB,IACE,QACA,eAAe,KAAK,QAAQ,MAAM,KAClC,MAAM,cAAc,KAAK,KAAK,GAE9B,OAAO,KAAK;CAGd,MAAM,OAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,UACzC,oBAAC,KAAD;EAEE,IAAI,KAAK;EACT,MAAM,KAAK;EACL;EACI;EACV,YAAY,UAAU,eAAe,aAAa,KAAA;CACnD,GANM,KAAK,EAMX,CACF;CAED,MAAM,UACJ,qBAAC,WAAD;EACE,GAAI,KAAK;EACT,GAAI,MAAM;EACV,WAAW;EACX,eAAa;EACb,aAAW;EALb,UAAA,CAOE,oBAAC,iBAAD;GAAiB,GAAI,MAAM,OAAO;GAC/B,UAAA,MAAM,OAAO,QAAQ,KAAK,KAAK,MAC9B,oBAAC,iBAAD,EAAyB,GAAI,IAAI,eAAiB,GAA5B,CAA4B,CACnD;EACc,CAAA,GACjB,oBAAC,eAAD;GAAe,GAAI,MAAM,KAAK;GAC3B,UAAA,qBAAqB,oBAAC,sBAAD,CAAuB,CAAA,IAAI;EACpC,CAAA,CACN;;CAEb,WAAW,UAAU;EAAE;EAAQ;EAAO;CAAQ;CAC9C,OAAO;AACT"}

package/dist/js/packages/components/src/components/List/components/Table/components/Row.mjs

@@ -0,0 +1,31 @@
+"use client"
+/* */
+import Table_module_default from "../Table.module.mjs";
+import TableRowView from "../../../../../views/TableRowView.mjs";
+import TableCellView from "../../../../../views/TableCellView.mjs";
+import clsx from "clsx";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/List/components/Table/components/Row.tsx
+var RowImpl = (props) => {
+	const { id, data, list, onAction, triggerRef } = props;
+	const row = list.table?.body.row;
+	if (!row) return null;
+	return /* @__PURE__ */ jsx(TableRowView, {
+		...row.componentProps,
+		className: clsx(Table_module_default.row, onAction && Table_module_default.hasAction, row.componentProps.className),
+		id,
+		onAction: onAction ? () => onAction(data) : void 0,
+		...triggerRef ? { ref: triggerRef } : {},
+		children: row.cells.map((cell, i) => /* @__PURE__ */ jsx(TableCellView, {
+			...cell.componentProps,
+			children: cell.renderFn ? cell.renderFn(data, list) : void 0
+		}, i))
+	});
+};
+var Row = memo(RowImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && !!prev.onAction === !!next.onAction && !!prev.list.table?.body.row.rendersSameAs(next.list.table?.body.row));
+Row.displayName = "Row";
+//#endregion
+export { Row, Row as default };
+
+//# sourceMappingURL=Row.mjs.map

package/dist/js/packages/components/src/components/List/components/Table/components/Row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.mjs","names":["styles"],"sources":["../../../../../../../../../../src/components/List/components/Table/components/Row.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { memo } from \"react\";\nimport clsx from \"clsx\";\nimport type { Key } from \"react-aria-components\";\nimport type ListModel from \"@/components/List/model/List\";\nimport TableRowView from \"@/views/TableRowView\";\nimport TableCellView from \"@/views/TableCellView\";\nimport styles from \"../Table.module.scss\";\n\ninterface Props {\n  id: Key;\n  data: never;\n  list: ListModel<never>;\n  /** Stable invoker of the list's latest `onAction` */\n  onAction?: (data: never) => void;\n  triggerRef?: Ref<HTMLTableRowElement>;\n}\n\nconst RowImpl = (props: Props) => {\n  const { id, data, list, onAction, triggerRef } = props;\n  const row = list.table?.body.row;\n\n  if (!row) {\n    return null;\n  }\n\n  return (\n    <TableRowView\n      {...row.componentProps}\n      className={clsx(\n        styles.row,\n        onAction && styles.hasAction,\n        row.componentProps.className,\n      )}\n      id={id}\n      onAction={onAction ? () => onAction(data) : undefined}\n      {...(triggerRef ? { ref: triggerRef } : {})}\n    >\n      {row.cells.map((cell, i) => (\n        <TableCellView key={i} {...cell.componentProps}>\n          {cell.renderFn ? cell.renderFn(data, list) : undefined}\n        </TableCellView>\n      ))}\n    </TableRowView>\n  );\n};\n\n// The list model is rebuilt on every render, so it cannot be compared by\n// identity. A row that declares `renderDependencies` re-renders only when its data,\n// those dependencies or a cell's props change — the cells' render functions\n// count by the dependencies. Without them, rows re-render with the list.\nexport const Row = memo(\n  RowImpl,\n  (prev, next) =>\n    prev.id === next.id &&\n    prev.data === next.data &&\n    prev.triggerRef === next.triggerRef &&\n    !!prev.onAction === !!next.onAction &&\n    !!prev.list.table?.body.row.rendersSameAs(next.list.table?.body.row),\n);\nRow.displayName = \"Row\";\n\nexport default Row;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,WAAW,UAAiB;CAChC,MAAM,EAAE,IAAI,MAAM,MAAM,UAAU,eAAe;CACjD,MAAM,MAAM,KAAK,OAAO,KAAK;CAE7B,IAAI,CAAC,KACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,GAAI,IAAI;EACR,WAAW,KACTA,qBAAO,KACP,YAAYA,qBAAO,WACnB,IAAI,eAAe,SACrB;EACI;EACJ,UAAU,iBAAiB,SAAS,IAAI,IAAI,KAAA;EAC5C,GAAK,aAAa,EAAE,KAAK,WAAW,IAAI,CAAC;EAExC,UAAA,IAAI,MAAM,KAAK,MAAM,MACpB,oBAAC,eAAD;GAAuB,GAAI,KAAK;GAC7B,UAAA,KAAK,WAAW,KAAK,SAAS,MAAM,IAAI,IAAI,KAAA;EAChC,GAFK,CAEL,CAChB;CACW,CAAA;AAElB;AAMA,IAAa,MAAM,KACjB,UACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,KAAK,YAC3B,CAAC,CAAC,KAAK,KAAK,OAAO,KAAK,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,GAAG,CACvE;AACA,IAAI,cAAc"}

package/dist/js/packages/components/src/components/List/hooks/useLatestOnAction.mjs

@@ -0,0 +1,21 @@
+"use client"
+/* */
+import { useCallback, useLayoutEffect, useRef } from "react";
+//#region src/components/List/hooks/useLatestOnAction.ts
+/**
+* A stable invoker of the list's latest `onAction`, or `undefined` without one.
+* An event handler only ever needs to be the latest one, so items and rows do
+* not re-render for an inline `onAction`.
+*/
+var useLatestOnAction = (list) => {
+	const onActionRef = useRef(list.onAction);
+	useLayoutEffect(() => {
+		onActionRef.current = list.onAction;
+	});
+	const invokeOnAction = useCallback((data) => onActionRef.current?.(data), []);
+	return list.onAction ? invokeOnAction : void 0;
+};
+//#endregion
+export { useLatestOnAction };
+
+//# sourceMappingURL=useLatestOnAction.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useLatestOnAction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLatestOnAction.mjs","names":[],"sources":["../../../../../../../../src/components/List/hooks/useLatestOnAction.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef } from \"react\";\nimport type List from \"@/components/List/model/List\";\n\n/**\n * A stable invoker of the list's latest `onAction`, or `undefined` without one.\n * An event handler only ever needs to be the latest one, so items and rows do\n * not re-render for an inline `onAction`.\n */\nexport const useLatestOnAction = (list: List<never>) => {\n  const onActionRef = useRef(list.onAction);\n  useLayoutEffect(() => {\n    onActionRef.current = list.onAction;\n  });\n  const invokeOnAction = useCallback(\n    (data: never) => onActionRef.current?.(data),\n    [],\n  );\n  return list.onAction ? invokeOnAction : undefined;\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,qBAAqB,SAAsB;CACtD,MAAM,cAAc,OAAO,KAAK,QAAQ;CACxC,sBAAsB;EACpB,YAAY,UAAU,KAAK;CAC7B,CAAC;CACD,MAAM,iBAAiB,aACpB,SAAgB,YAAY,UAAU,IAAI,GAC3C,CAAC,CACH;CACA,OAAO,KAAK,WAAW,iBAAiB,KAAA;AAC1C"}

package/dist/js/packages/components/src/components/List/hooks/useListSelector.mjs

@@ -0,0 +1,18 @@
+"use client"
+/* */
+import { listStoreContext } from "../listContext.mjs";
+import { useContext, useSyncExternalStore } from "react";
+//#region src/components/List/hooks/useListSelector.ts
+/**
+* A value read from the list model, re-rendering only when it changes. The
+* selector has to return a primitive or a value that keeps its identity.
+*/
+var useListSelector = (selector) => {
+	const store = useContext(listStoreContext);
+	const getValue = () => selector(store.getList());
+	return useSyncExternalStore(store.subscribe, getValue, getValue);
+};
+//#endregion
+export { useListSelector };
+
+//# sourceMappingURL=useListSelector.mjs.map

package/dist/js/packages/components/src/components/List/hooks/useListSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListSelector.mjs","names":[],"sources":["../../../../../../../../src/components/List/hooks/useListSelector.ts"],"sourcesContent":["import { useContext, useSyncExternalStore } from \"react\";\nimport { listStoreContext } from \"@/components/List/listContext\";\nimport type List from \"@/components/List/model/List\";\n\n/**\n * A value read from the list model, re-rendering only when it changes. The\n * selector has to return a primitive or a value that keeps its identity.\n */\nexport const useListSelector = <R, T = never>(\n  selector: (list: List<T>) => R,\n): R => {\n  const store = useContext(listStoreContext);\n  const getValue = () => selector(store.getList() as unknown as List<T>);\n  return useSyncExternalStore(store.subscribe, getValue, getValue);\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,mBACX,aACM;CACN,MAAM,QAAQ,WAAW,gBAAgB;CACzC,MAAM,iBAAiB,SAAS,MAAM,QAAQ,CAAuB;CACrE,OAAO,qBAAqB,MAAM,WAAW,UAAU,QAAQ;AACjE"}

package/dist/js/packages/components/src/components/List/listContext.mjs

@@ -1,9 +1,39 @@
 "use client"
 /* */
-import { createContext } from "react";
+import { createContext, useLayoutEffect, useState } from "react";
 //#region src/components/List/listContext.ts
 var listContext = createContext({});
+/**
+* Hands the committed list model to `useListSelector` without changing the
+* context value. The model is rebuilt on every render of `List`; read from
+* `listContext`, it re-renders every consumer, including the ones inside items
+* that skip their own render. A selector re-renders only when the value it
+* reads changes.
+*/
+var ListContextStore = class ListContextStore {
+	list;
+	listeners = /* @__PURE__ */ new Set();
+	constructor(list) {
+		this.list = list;
+	}
+	static useNew(list) {
+		const store = useState(() => new ListContextStore(list))[0];
+		useLayoutEffect(() => {
+			store.list = list;
+			store.listeners.forEach((listener) => listener());
+		});
+		return store;
+	}
+	getList = () => this.list;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+};
+var listStoreContext = createContext(new ListContextStore(void 0));
 //#endregion
-export { listContext };
+export { ListContextStore, listContext, listStoreContext };
 
 //# sourceMappingURL=listContext.mjs.map

package/dist/js/packages/components/src/components/List/listContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"listContext.mjs","names":[],"sources":["../../../../../../../src/components/List/listContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type List from \"@/components/List/model/List\";\n\ninterface ListContext {\n  list: List<never>;\n}\n\nexport const listContext = createContext<ListContext>({} as ListContext);\n"],"mappings":";;;;AAOA,IAAa,cAAc,cAA2B,CAAC,CAAgB"}
+{"version":3,"file":"listContext.mjs","names":[],"sources":["../../../../../../../src/components/List/listContext.ts"],"sourcesContent":["import { createContext, useLayoutEffect, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\n\ninterface ListContext {\n  list: List<never>;\n}\n\nexport const listContext = createContext<ListContext>({} as ListContext);\n\n/**\n * Hands the committed list model to `useListSelector` without changing the\n * context value. The model is rebuilt on every render of `List`; read from\n * `listContext`, it re-renders every consumer, including the ones inside items\n * that skip their own render. A selector re-renders only when the value it\n * reads changes.\n */\nexport class ListContextStore {\n  private list: List<never>;\n  private readonly listeners = new Set<() => void>();\n\n  public constructor(list: List<never>) {\n    this.list = list;\n  }\n\n  public static useNew(list: List<never>): ListContextStore {\n    const store = useState(() => new ListContextStore(list))[0];\n    useLayoutEffect(() => {\n      store.list = list;\n      store.listeners.forEach((listener) => listener());\n    });\n    return store;\n  }\n\n  public readonly getList = (): List<never> => this.list;\n\n  public readonly subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n}\n\nexport const listStoreContext = createContext(\n  new ListContextStore(undefined as unknown as List<never>),\n);\n"],"mappings":";;;;AAOA,IAAa,cAAc,cAA2B,CAAC,CAAgB;;;;;;;;AASvE,IAAa,mBAAb,MAAa,iBAAiB;CAC5B;CACA,4BAA6B,IAAI,IAAgB;CAEjD,YAAmB,MAAmB;EACpC,KAAK,OAAO;CACd;CAEA,OAAc,OAAO,MAAqC;EACxD,MAAM,QAAQ,eAAe,IAAI,iBAAiB,IAAI,CAAC,CAAC,CAAC;EACzD,sBAAsB;GACpB,MAAM,OAAO;GACb,MAAM,UAAU,SAAS,aAAa,SAAS,CAAC;EAClD,CAAC;EACD,OAAO;CACT;CAEA,gBAA6C,KAAK;CAElD,aAA6B,aAAuC;EAClE,KAAK,UAAU,IAAI,QAAQ;EAC3B,aAAa;GACX,KAAK,UAAU,OAAO,QAAQ;EAChC;CACF;AACF;AAEA,IAAa,mBAAmB,cAC9B,IAAI,iBAAiB,KAAA,CAAmC,CAC1D"}

package/dist/js/packages/components/src/components/List/model/List.mjs

@@ -43,6 +43,7 @@ var List = class List {
 		const { settingStorageKey, itemView, table, filters = [], sorting = [], batchesController, onChange, loader, search, onAction, getItemId, defaultViewMode, accordion = false, infiniteScroll = false, loadingItemsCount = 5, settingsStorageDefaults, emptyView, emptySearchResultView, ...componentProps } = shape;
 		const warnDeprecation = useWarnDeprecation();
 		if (itemView?.fallback !== void 0) warnDeprecation("The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.");
+		if (itemView?.dependencies !== void 0) warnDeprecation("The 'dependencies' prop of 'List.Item' is deprecated and will be removed in a future release. Use 'renderDependencies' instead.");
 		this.settingsStorageDefaults = settingsStorageDefaults;
 		const generalSettingsStore = useSettings();
 		this.settingsStorage = settingStorageKey && generalSettingsStore ? new ListSettingsStore(this, generalSettingsStore, { storageKey: settingStorageKey }) : void 0;

package/dist/js/packages/components/src/components/List/model/List.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","names":["BatchesController"],"sources":["../../../../../../../../src/components/List/model/List.ts"],"sourcesContent":["import { ItemCollection } from \"@/components/List/model/item/ItemCollection\";\nimport { BatchesController } from \"@/components/List/model/pagination/BatchesController\";\nimport { Filter } from \"./filter/Filter\";\nimport { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport ReactTable from \"@/components/List/model/ReactTable\";\nimport type {\n  EmptyViewType,\n  GetItemId,\n  ItemActionFn,\n  ListSettingsStorageDefaults,\n  ListShape,\n  ListSupportedComponentProps,\n} from \"@/components/List/model/types\";\nimport { IncrementalLoader } from \"@/components/List/model/loading/IncrementalLoader\";\nimport invariant from \"invariant\";\nimport { Search } from \"@/components/List/model/search/Search\";\nimport { ItemView } from \"@/components/List/model/item/ItemView\";\nimport { Table } from \"@/components/List/model/table/Table\";\nimport { useEffect, type ReactNode } from \"react\";\nimport { ListSettingsStore } from \"./ListSettingsStore\";\nimport { ListViewMode } from \"./ListViewMode\";\nimport { useSettings } from \"@/components/SettingsProvider/SettingsProvider\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport type {\n  ListModelContext,\n  ListSettingsPort,\n} from \"@mittwald/flow-components-base\";\nimport type { Table as ReactTableInstance } from \"@tanstack/table-core\";\n\nexport class List<T = unknown, TMeta = unknown> implements ListModelContext<T> {\n  public readonly filters: (\n    Filter<T, never, never> | DateRangeFilter<T, never>\n  )[];\n  public readonly itemView?: ItemView<T>;\n  public readonly table?: Table<T>;\n  public readonly search?: Search<T>;\n  public readonly sorting: Sorting<T>[];\n  public readonly items: ItemCollection<T>;\n  public readonly reactTable: ReactTable<T>;\n  public readonly batches: BatchesController<T>;\n  public readonly loader: IncrementalLoader<T>;\n  public readonly onAction?: ItemActionFn<T>;\n  public readonly accordion: boolean;\n  public readonly infiniteScroll: boolean;\n  public readonly getItemId?: GetItemId<T>;\n  public readonly componentProps: ListSupportedComponentProps;\n  public metadata?: TMeta;\n  public readonly settingsStorage?: ListSettingsStore<T>;\n  public readonly loadingItemsCount;\n  public readonly viewMode: ListViewMode<T>;\n  public readonly emptyView?: ReactNode;\n  public readonly emptySearchResultView?: ReactNode;\n  public readonly settingsStorageDefaults?: ListSettingsStorageDefaults;\n\n  public constructor(shape: ListShape<T, TMeta>) {\n    const {\n      settingStorageKey,\n      itemView,\n      table,\n      filters = [],\n      sorting = [],\n      batchesController,\n      onChange,\n      loader,\n      search,\n      onAction,\n      getItemId,\n      defaultViewMode,\n      accordion = false,\n      infiniteScroll = false,\n      loadingItemsCount = 5,\n      settingsStorageDefaults,\n      emptyView,\n      emptySearchResultView,\n      ...componentProps\n    } = shape;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (itemView?.fallback !== undefined) {\n      warnDeprecation(\n        \"The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.\",\n      );\n    }\n\n    this.settingsStorageDefaults = settingsStorageDefaults;\n    const generalSettingsStore = useSettings();\n\n    this.settingsStorage =\n      settingStorageKey && generalSettingsStore\n        ? new ListSettingsStore(this, generalSettingsStore, {\n            storageKey: settingStorageKey,\n          })\n        : undefined;\n\n    this.items = new ItemCollection(this);\n    this.filters = filters.map((shape) =>\n      shape.mode === \"dateRange\"\n        ? new DateRangeFilter(this, shape)\n        : new Filter(this, shape),\n    );\n    this.sorting = sorting.map((shape) => new Sorting<T>(this, shape));\n    this.search = search ? new Search(this, search) : undefined;\n    this.itemView = itemView ? new ItemView(this, itemView) : undefined;\n    this.accordion = accordion;\n    this.infiniteScroll = infiniteScroll;\n    this.table = table ? new Table(this, table) : undefined;\n    this.batches = new BatchesController(this, batchesController);\n\n    /*\n     * The controller no longer subscribes itself: the filters and the search\n     * are this list's, and handing a list of concrete filters to a shared\n     * model is the `Table<never>` variance trap. `IncrementalLoader` still\n     * subscribes in its own constructor, which runs right after this, so the\n     * order of the two resets is unchanged.\n     */\n    this.filters.forEach((f) => f.onFilterUpdated(() => this.batches.reset()));\n    this.search?.onUpdated(() => this.batches.reset());\n    this.componentProps = componentProps;\n    /*\n     * Before the loader: its state takes `getItemId` over in its constructor,\n     * and a loader built first would never deduplicate.\n     */\n    this.getItemId = getItemId;\n    this.loader = IncrementalLoader.useNew<T>(this, loader);\n    this.onAction = onAction;\n    this.loadingItemsCount = loadingItemsCount;\n    this.reactTable = ReactTable.useNew(this, onChange, {\n      manualFiltering: this.loader.manualFiltering,\n      manualPagination: this.loader.manualPagination,\n      manualSorting: this.loader.manualSorting,\n    });\n    this.viewMode = ListViewMode.useNew(this, { defaultViewMode });\n    this.emptyView = emptyView;\n    this.emptySearchResultView = emptySearchResultView;\n\n    useEffect(() => {\n      this.filters.forEach((f) => f.deleteUnknownFilterValues());\n    }, [this.filters]);\n  }\n\n  /*\n   * `ListModelContext` — what the shared model in\n   * `@mittwald/flow-components-base` reaches for, so `Sorting` and `Search` can\n   * keep being handed the list itself. Getters, because the model is built\n   * before the table is.\n   */\n  public get dataTable(): ReactTableInstance<T> {\n    return this.reactTable.table;\n  }\n\n  public get settings(): ListSettingsPort | undefined {\n    return this.settingsStorage;\n  }\n\n  public get settingsDefaults(): ListSettingsStorageDefaults | undefined {\n    return this.settingsStorageDefaults;\n  }\n\n  public getEmptyViewType(): EmptyViewType {\n    return this.hasActiveFilters || this.search?.isSet ? \"search\" : \"list\";\n  }\n\n  public get hasActiveFilters(): boolean {\n    return this.filters.some((f) => f.isActive());\n  }\n\n  public get visibleSorting() {\n    return this.sorting.filter((s) => s.initialEnabled !== \"hidden\");\n  }\n\n  public static useNew<T, TMeta = unknown>(\n    shape: ListShape<T, TMeta>,\n  ): List<T, TMeta> {\n    return new List<T, TMeta>(shape);\n  }\n\n  public getSorting(id: string): Sorting<T> {\n    const sorting = this.sorting.find((s) => s.id === id);\n    invariant(!!sorting, `Could not get Sorting (ID: ${id})`);\n    return sorting;\n  }\n\n  public clearSorting(): void {\n    return this.sorting.forEach((s) => s.clear());\n  }\n\n  public resetFilters(): void {\n    return this.filters.forEach((f) => f.resetValues());\n  }\n\n  public clearFilters(): void {\n    return this.filters.forEach((f) => f.clear());\n  }\n\n  public useIsEmpty(): boolean {\n    return !this.loader.useIsLoading() && this.items.entries.length === 0;\n  }\n}\n\nexport default List;\n"],"mappings":"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"}
+{"version":3,"file":"List.mjs","names":["BatchesController"],"sources":["../../../../../../../../src/components/List/model/List.ts"],"sourcesContent":["import { ItemCollection } from \"@/components/List/model/item/ItemCollection\";\nimport { BatchesController } from \"@/components/List/model/pagination/BatchesController\";\nimport { Filter } from \"./filter/Filter\";\nimport { Sorting } from \"@/components/List/model/sorting/Sorting\";\nimport ReactTable from \"@/components/List/model/ReactTable\";\nimport type {\n  EmptyViewType,\n  GetItemId,\n  ItemActionFn,\n  ListSettingsStorageDefaults,\n  ListShape,\n  ListSupportedComponentProps,\n} from \"@/components/List/model/types\";\nimport { IncrementalLoader } from \"@/components/List/model/loading/IncrementalLoader\";\nimport invariant from \"invariant\";\nimport { Search } from \"@/components/List/model/search/Search\";\nimport { ItemView } from \"@/components/List/model/item/ItemView\";\nimport { Table } from \"@/components/List/model/table/Table\";\nimport { useEffect, type ReactNode } from \"react\";\nimport { ListSettingsStore } from \"./ListSettingsStore\";\nimport { ListViewMode } from \"./ListViewMode\";\nimport { useSettings } from \"@/components/SettingsProvider/SettingsProvider\";\nimport { DateRangeFilter } from \"@/components/List/model/filter/DateRangeFilter\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport type {\n  ListModelContext,\n  ListSettingsPort,\n} from \"@mittwald/flow-components-base\";\nimport type { Table as ReactTableInstance } from \"@tanstack/table-core\";\n\nexport class List<T = unknown, TMeta = unknown> implements ListModelContext<T> {\n  public readonly filters: (\n    Filter<T, never, never> | DateRangeFilter<T, never>\n  )[];\n  public readonly itemView?: ItemView<T>;\n  public readonly table?: Table<T>;\n  public readonly search?: Search<T>;\n  public readonly sorting: Sorting<T>[];\n  public readonly items: ItemCollection<T>;\n  public readonly reactTable: ReactTable<T>;\n  public readonly batches: BatchesController<T>;\n  public readonly loader: IncrementalLoader<T>;\n  public readonly onAction?: ItemActionFn<T>;\n  public readonly accordion: boolean;\n  public readonly infiniteScroll: boolean;\n  public readonly getItemId?: GetItemId<T>;\n  public readonly componentProps: ListSupportedComponentProps;\n  public metadata?: TMeta;\n  public readonly settingsStorage?: ListSettingsStore<T>;\n  public readonly loadingItemsCount;\n  public readonly viewMode: ListViewMode<T>;\n  public readonly emptyView?: ReactNode;\n  public readonly emptySearchResultView?: ReactNode;\n  public readonly settingsStorageDefaults?: ListSettingsStorageDefaults;\n\n  public constructor(shape: ListShape<T, TMeta>) {\n    const {\n      settingStorageKey,\n      itemView,\n      table,\n      filters = [],\n      sorting = [],\n      batchesController,\n      onChange,\n      loader,\n      search,\n      onAction,\n      getItemId,\n      defaultViewMode,\n      accordion = false,\n      infiniteScroll = false,\n      loadingItemsCount = 5,\n      settingsStorageDefaults,\n      emptyView,\n      emptySearchResultView,\n      ...componentProps\n    } = shape;\n\n    const warnDeprecation = useWarnDeprecation();\n    if (itemView?.fallback !== undefined) {\n      warnDeprecation(\n        \"The 'fallback' prop is deprecated and will be removed in a future release. Use 'loadingView' instead.\",\n      );\n    }\n    if (itemView?.dependencies !== undefined) {\n      warnDeprecation(\n        \"The 'dependencies' prop of 'List.Item' is deprecated and will be removed in a future release. Use 'renderDependencies' instead.\",\n      );\n    }\n\n    this.settingsStorageDefaults = settingsStorageDefaults;\n    const generalSettingsStore = useSettings();\n\n    this.settingsStorage =\n      settingStorageKey && generalSettingsStore\n        ? new ListSettingsStore(this, generalSettingsStore, {\n            storageKey: settingStorageKey,\n          })\n        : undefined;\n\n    this.items = new ItemCollection(this);\n    this.filters = filters.map((shape) =>\n      shape.mode === \"dateRange\"\n        ? new DateRangeFilter(this, shape)\n        : new Filter(this, shape),\n    );\n    this.sorting = sorting.map((shape) => new Sorting<T>(this, shape));\n    this.search = search ? new Search(this, search) : undefined;\n    this.itemView = itemView ? new ItemView(this, itemView) : undefined;\n    this.accordion = accordion;\n    this.infiniteScroll = infiniteScroll;\n    this.table = table ? new Table(this, table) : undefined;\n    this.batches = new BatchesController(this, batchesController);\n\n    /*\n     * The controller no longer subscribes itself: the filters and the search\n     * are this list's, and handing a list of concrete filters to a shared\n     * model is the `Table<never>` variance trap. `IncrementalLoader` still\n     * subscribes in its own constructor, which runs right after this, so the\n     * order of the two resets is unchanged.\n     */\n    this.filters.forEach((f) => f.onFilterUpdated(() => this.batches.reset()));\n    this.search?.onUpdated(() => this.batches.reset());\n    this.componentProps = componentProps;\n    /*\n     * Before the loader: its state takes `getItemId` over in its constructor,\n     * and a loader built first would never deduplicate.\n     */\n    this.getItemId = getItemId;\n    this.loader = IncrementalLoader.useNew<T>(this, loader);\n    this.onAction = onAction;\n    this.loadingItemsCount = loadingItemsCount;\n    this.reactTable = ReactTable.useNew(this, onChange, {\n      manualFiltering: this.loader.manualFiltering,\n      manualPagination: this.loader.manualPagination,\n      manualSorting: this.loader.manualSorting,\n    });\n    this.viewMode = ListViewMode.useNew(this, { defaultViewMode });\n    this.emptyView = emptyView;\n    this.emptySearchResultView = emptySearchResultView;\n\n    useEffect(() => {\n      this.filters.forEach((f) => f.deleteUnknownFilterValues());\n    }, [this.filters]);\n  }\n\n  /*\n   * `ListModelContext` — what the shared model in\n   * `@mittwald/flow-components-base` reaches for, so `Sorting` and `Search` can\n   * keep being handed the list itself. Getters, because the model is built\n   * before the table is.\n   */\n  public get dataTable(): ReactTableInstance<T> {\n    return this.reactTable.table;\n  }\n\n  public get settings(): ListSettingsPort | undefined {\n    return this.settingsStorage;\n  }\n\n  public get settingsDefaults(): ListSettingsStorageDefaults | undefined {\n    return this.settingsStorageDefaults;\n  }\n\n  public getEmptyViewType(): EmptyViewType {\n    return this.hasActiveFilters || this.search?.isSet ? \"search\" : \"list\";\n  }\n\n  public get hasActiveFilters(): boolean {\n    return this.filters.some((f) => f.isActive());\n  }\n\n  public get visibleSorting() {\n    return this.sorting.filter((s) => s.initialEnabled !== \"hidden\");\n  }\n\n  public static useNew<T, TMeta = unknown>(\n    shape: ListShape<T, TMeta>,\n  ): List<T, TMeta> {\n    return new List<T, TMeta>(shape);\n  }\n\n  public getSorting(id: string): Sorting<T> {\n    const sorting = this.sorting.find((s) => s.id === id);\n    invariant(!!sorting, `Could not get Sorting (ID: ${id})`);\n    return sorting;\n  }\n\n  public clearSorting(): void {\n    return this.sorting.forEach((s) => s.clear());\n  }\n\n  public resetFilters(): void {\n    return this.filters.forEach((f) => f.resetValues());\n  }\n\n  public clearFilters(): void {\n    return this.filters.forEach((f) => f.clear());\n  }\n\n  public useIsEmpty(): boolean {\n    return !this.loader.useIsLoading() && this.items.entries.length === 0;\n  }\n}\n\nexport default List;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/List/model/ListViewMode.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
-import useSelector from "../../../lib/mobx/useSelector.mjs";
-import { useStatic } from "../../../lib/hooks/useStatic.mjs";
 import { ListViewMode as ListViewMode$1 } from "../../../../../components-base/src/list/viewMode/ListViewMode.mjs";
 import "../../../../../components-base/src/index.mjs";
+import useSelector from "../../../lib/mobx/useSelector.mjs";
+import { useStatic } from "../../../lib/hooks/useStatic.mjs";
 //#region src/components/List/model/ListViewMode.ts
 /**
 * React's view of the list's layout mode.

package/dist/js/packages/components/src/components/List/model/ReactTable.mjs

@@ -1,11 +1,11 @@
 "use client"
 /* */
-import useSelector from "../../../lib/mobx/useSelector.mjs";
-import { useStatic } from "../../../lib/hooks/useStatic.mjs";
 import { getListColumn } from "../../../../../components-base/src/list/ListModelContext.mjs";
 import { mergeHiddenSorting } from "../../../../../components-base/src/list/sorting/ListSorting.mjs";
 import { ListTable } from "../../../../../components-base/src/list/table/ListTable.mjs";
 import "../../../../../components-base/src/index.mjs";
+import useSelector from "../../../lib/mobx/useSelector.mjs";
+import { useStatic } from "../../../lib/hooks/useStatic.mjs";
 import { Filter } from "./filter/Filter.mjs";
 import { useEffect, useEffectEvent, useState } from "react";
 import { getCoreRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";

package/dist/js/packages/components/src/components/List/model/filter/DateRangeFilter.mjs

@@ -2,14 +2,16 @@
 /* */
 import { ListDateRangeFilter } from "../../../../../../components-base/src/list/filter/ListDateRangeFilter.mjs";
 import "../../../../../../components-base/src/index.mjs";
+import { omit } from "remeda";
 //#region src/components/List/model/filter/DateRangeFilter.tsx
 /**
 * React's date-range filter.
 *
 * The column, the comparison and the stored value are `ListDateRangeFilter` in
 * `@mittwald/flow-components-base`, so the Vue binding filters the same dates
-* the same way. What is left here is the calendar's own options, which are
-* Flow's `RangeCalendar` props.
+* the same way. What is left here are the options of the fields that pick the
+* range: Flow's `RangeCalendar` props, or with `granularity: "minute"` those of
+* the date and time fields.
 */
 var DateRangeFilter = class extends ListDateRangeFilter {
 	dateRangeOptions;
@@ -17,6 +19,17 @@ var DateRangeFilter = class extends ListDateRangeFilter {
 		super(context, shape);
 		this.dateRangeOptions = shape.dateRangeOptions;
 	}
+	get granularity() {
+		return this.dateRangeOptions?.granularity ?? "day";
+	}
+	get rangeCalendarProps() {
+		const options = this.dateRangeOptions ?? {};
+		return options.granularity === "minute" ? {} : omit(options, ["granularity"]);
+	}
+	get dateTimeRangeOptions() {
+		const options = this.dateRangeOptions;
+		return options?.granularity === "minute" ? options : void 0;
+	}
 	getValue() {
 		return super.getValue();
 	}

package/dist/js/packages/components/src/components/List/model/filter/DateRangeFilter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/DateRangeFilter.tsx"],"sourcesContent":["import { ListDateRangeFilter } from \"@mittwald/flow-components-base\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport type { FilterShape } from \"@/components/List/model/filter/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport type { RangeCalendarProps } from \"@/components/Calendar\";\nimport type { DateValue } from \"@internationalized/date\";\nimport type { DateRange, RangeValue } from \"react-aria-components\";\nimport type { ReactNode } from \"react\";\nimport type { List } from \"@/components/List/model/List\";\nimport type { FilterValue } from \"@/components/List/model/filter/FilterValue\";\n\n/**\n * React's date-range filter.\n *\n * The column, the comparison and the stored value are `ListDateRangeFilter` in\n * `@mittwald/flow-components-base`, so the Vue binding filters the same dates\n * the same way. What is left here is the calendar's own options, which are\n * Flow's `RangeCalendar` props.\n */\nexport class DateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n> extends ListDateRangeFilter<T, TProp, ReactNode> {\n  public readonly dateRangeOptions?: RangeCalendarProps;\n\n  public constructor(\n    context: ListModelContext<T>,\n    shape: FilterShape<T, TProp, never>,\n  ) {\n    super(context, shape as never);\n    this.dateRangeOptions = shape.dateRangeOptions;\n  }\n\n  /*\n   * Narrowed back to react-aria's own types, because that is what the calendar\n   * takes and what this filter's consumers already have. The shared class is\n   * typed on the three numbers a date is made of, which every date library\n   * agrees on and nothing else does.\n   */\n  public override getValue(): DateRange | null {\n    return super.getValue() as DateRange | null;\n  }\n\n  public override setValue(range: RangeValue<DateValue> | null): void {\n    super.setValue(range as never);\n  }\n\n  /** The list this filter belongs to — `context`, typed as React's `List`. */\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n\n  /* As in `Filter`: created by this filter, so each one's `filter` is React's. */\n  public override get values(): FilterValue[] {\n    return super.values as FilterValue[];\n  }\n\n  public override getArrayValue(): FilterValue[] {\n    return super.getArrayValue() as FilterValue[];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,kBAAb,cAGU,oBAAyC;CACjD;CAEA,YACE,SACA,OACA;EACA,MAAM,SAAS,KAAc;EAC7B,KAAK,mBAAmB,MAAM;CAChC;CAQA,WAA6C;EAC3C,OAAO,MAAM,SAAS;CACxB;CAEA,SAAyB,OAA2C;EAClE,MAAM,SAAS,KAAc;CAC/B;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAGA,IAAoB,SAAwB;EAC1C,OAAO,MAAM;CACf;CAEA,gBAA+C;EAC7C,OAAO,MAAM,cAAc;CAC7B;AACF"}
+{"version":3,"file":"DateRangeFilter.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/DateRangeFilter.tsx"],"sourcesContent":["import { ListDateRangeFilter } from \"@mittwald/flow-components-base\";\nimport type { ListModelContext } from \"@mittwald/flow-components-base\";\nimport type {\n  DateRangeFilterOptions,\n  DateRangeFilterValue,\n  FilterShape,\n} from \"@/components/List/model/filter/types\";\nimport type { PropertyName } from \"@/components/List/model/types\";\nimport type { RangeCalendarProps } from \"@/components/Calendar\";\nimport type { ReactNode } from \"react\";\nimport { omit } from \"remeda\";\nimport type { List } from \"@/components/List/model/List\";\nimport type { FilterValue } from \"@/components/List/model/filter/FilterValue\";\n\n/**\n * React's date-range filter.\n *\n * The column, the comparison and the stored value are `ListDateRangeFilter` in\n * `@mittwald/flow-components-base`, so the Vue binding filters the same dates\n * the same way. What is left here are the options of the fields that pick the\n * range: Flow's `RangeCalendar` props, or with `granularity: \"minute\"` those of\n * the date and time fields.\n */\nexport class DateRangeFilter<\n  T = never,\n  TProp extends PropertyName<T> = never,\n> extends ListDateRangeFilter<T, TProp, ReactNode> {\n  public readonly dateRangeOptions?: DateRangeFilterOptions;\n\n  public constructor(\n    context: ListModelContext<T>,\n    shape: FilterShape<T, TProp, never>,\n  ) {\n    super(context, shape as never);\n    this.dateRangeOptions = shape.dateRangeOptions;\n  }\n\n  public get granularity(): \"day\" | \"minute\" {\n    return this.dateRangeOptions?.granularity ?? \"day\";\n  }\n\n  public get rangeCalendarProps(): RangeCalendarProps {\n    const options = this.dateRangeOptions ?? {};\n    return options.granularity === \"minute\"\n      ? {}\n      : omit(options, [\"granularity\"]);\n  }\n\n  public get dateTimeRangeOptions() {\n    const options = this.dateRangeOptions;\n    return options?.granularity === \"minute\" ? options : undefined;\n  }\n\n  /*\n   * Narrowed back to `@internationalized/date`'s types, because that is what\n   * the calendar and the date fields take. The shared class is typed on the\n   * numbers a date is made of, which every date library agrees on and nothing\n   * else does.\n   */\n  public override getValue(): DateRangeFilterValue | null {\n    return super.getValue() as DateRangeFilterValue | null;\n  }\n\n  public override setValue(range: DateRangeFilterValue | null): void {\n    super.setValue(range);\n  }\n\n  /** The list this filter belongs to — `context`, typed as React's `List`. */\n  public get list(): List<T> {\n    return this.context as List<T>;\n  }\n\n  /* As in `Filter`: created by this filter, so each one's `filter` is React's. */\n  public override get values(): FilterValue[] {\n    return super.values as FilterValue[];\n  }\n\n  public override getArrayValue(): FilterValue[] {\n    return super.getArrayValue() as FilterValue[];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAa,kBAAb,cAGU,oBAAyC;CACjD;CAEA,YACE,SACA,OACA;EACA,MAAM,SAAS,KAAc;EAC7B,KAAK,mBAAmB,MAAM;CAChC;CAEA,IAAW,cAAgC;EACzC,OAAO,KAAK,kBAAkB,eAAe;CAC/C;CAEA,IAAW,qBAAyC;EAClD,MAAM,UAAU,KAAK,oBAAoB,CAAC;EAC1C,OAAO,QAAQ,gBAAgB,WAC3B,CAAC,IACD,KAAK,SAAS,CAAC,aAAa,CAAC;CACnC;CAEA,IAAW,uBAAuB;EAChC,MAAM,UAAU,KAAK;EACrB,OAAO,SAAS,gBAAgB,WAAW,UAAU,KAAA;CACvD;CAQA,WAAwD;EACtD,OAAO,MAAM,SAAS;CACxB;CAEA,SAAyB,OAA0C;EACjE,MAAM,SAAS,KAAK;CACtB;;CAGA,IAAW,OAAgB;EACzB,OAAO,KAAK;CACd;CAGA,IAAoB,SAAwB;EAC1C,OAAO,MAAM;CACf;CAEA,gBAA+C;EAC7C,OAAO,MAAM,cAAc;CAC7B;AACF"}

package/dist/js/packages/components/src/components/List/model/filter/resolveDateRangeFilterValue.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { resolveListDateRange } from "../../../../../../components-base/src/list/filter/dateRange.mjs";
+import "../../../../../../components-base/src/index.mjs";
+//#region src/components/List/model/filter/resolveDateRangeFilterValue.ts
+/**
+* Resolves the value of a date range filter to the instants it spans, for
+* filtering on the server side. Both bounds are inclusive: a date covers its
+* whole day and a date with time its whole minute, in the user's local time
+* zone. A missing side has no bound.
+*/
+var resolveDateRangeFilterValue = (range) => resolveListDateRange(range);
+//#endregion
+export { resolveDateRangeFilterValue };
+
+//# sourceMappingURL=resolveDateRangeFilterValue.mjs.map

package/dist/js/packages/components/src/components/List/model/filter/resolveDateRangeFilterValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveDateRangeFilterValue.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/filter/resolveDateRangeFilterValue.ts"],"sourcesContent":["import { resolveListDateRange } from \"@mittwald/flow-components-base\";\nimport type { DateRangeFilterValue } from \"@/components/List/model/filter/types\";\n\n/**\n * Resolves the value of a date range filter to the instants it spans, for\n * filtering on the server side. Both bounds are inclusive: a date covers its\n * whole day and a date with time its whole minute, in the user's local time\n * zone. A missing side has no bound.\n */\nexport const resolveDateRangeFilterValue = (\n  range: DateRangeFilterValue,\n): { start?: Date; end?: Date } => resolveListDateRange(range);\n"],"mappings":";;;;;;;;;;;AASA,IAAa,+BACX,UACiC,qBAAqB,KAAK"}