@mittwald/flow-react-components 1.6.0-next.2 → 1.6.0-next.21

package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.mjs

@@ -3,7 +3,7 @@
 import { IconContextMenu } from "../../../../../../../Icon/components/icons/IconContextMenu.mjs";
 import { useLocalizedStringFormatter } from "../../../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import ButtonView from "../../../../../../../../views/ButtonView.mjs";
-import __locale_default from "../../../../../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../../../../../_virtual/_18.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../../../views/ContextMenuTriggerView.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx

package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs

@@ -7,9 +7,8 @@ import { useEffect, useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx
 var useGridItemProps = (props, list) => {
-	const { data, children: childrenFromProps } = props;
+	const { data, onAction, children: childrenFromProps } = props;
 	const itemView = list.itemView;
-	const onAction = list.onAction;
 	const [isExpanded, setIsExpanded] = useState(itemView?.defaultExpanded?.(data) ?? false);
 	const contentElementId = useId();
 	const itemRef = useRef(null);

package/dist/js/packages/components/src/components/List/components/Items/components/Item/hooks/useGridItemProps.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useGridItemProps.mjs","names":[],"sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n}\n\nexport const useGridItemProps = (props: P, list: List<never>) => {\n  const { data, children: childrenFromProps } = props;\n  const itemView = list.itemView;\n  const onAction = list.onAction;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,oBAAoB,OAAU,SAAsB;CAC/D,MAAM,EAAE,MAAM,UAAU,sBAAsB;CAC9C,MAAM,WAAW,KAAK;CACtB,MAAM,WAAW,KAAK;CAEtB,MAAM,CAAC,YAAY,iBAAiB,SAClC,UAAU,kBAAkB,IAAI,KAAK,KACvC;CACA,MAAM,mBAAmB,MAAM;CAC/B,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,KAAK;CACvB,MAAM,WAAW,qBAAqB,UAAU,OAAO,IAAI;CAE3D,gBAAgB;EACd,IAAI,WAAW;GACb,QAAQ,SAAS,aAAa,iBAAiB,OAAO,UAAU,CAAC;GACjE,QAAQ,SAAS,aAAa,iBAAiB,gBAAgB;EACjE;CACF,GAAG;EAAC;EAAY;EAAkB,QAAQ;EAAS;CAAS,CAAC;CAE7D,IAAI,CAAC,WACH,OAAO;EACL,eAAe,EACb,UAAU,iBACA;GACJ,WAAW,IAAI;EACjB,IACA,KAAA,EACN;EACA;CACF;CAGF,MAAM,wBAAwB;EAC5B,eAAe,YAAY,CAAC,OAAO;EACnC,WAAW,IAAI;CACjB;CAEA,MAAM,eAA6B,EACjC,SAAS;EACP,IAAI,SAAS,MAAO,EAAE,SAAS,WAAW,mBAAmB,KAAA,CAAU;EACvE,UAAU,SAAS,MACjB,EAAE,SAAS,WACT,oBAAC,iBAAD;GACoB;GAClB,QAAQ;GACI;EACb,CAAA,IACC,KAAA,CACN;CACF,EACF;CAEA,OAAO;EACL,eAAe;GACb,KAAK;GACL,UAAU;EACZ;EACA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,kBAAkB,UAAU;GAE1C;EACmB,CAAA;CAE1B;AACF"}
+{"version":3,"file":"useGridItemProps.mjs","names":[],"sources":["../../../../../../../../../../../../src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type List from \"@/components/List/model/List\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { AccordionButton } from \"@/components/List/components/Items/components/Item/components/AccordionButton\";\n\ninterface P extends PropsWithChildren {\n  data: never;\n  onAction?: (data: never) => void;\n}\n\nexport const useGridItemProps = (props: P, list: List<never>) => {\n  const { data, onAction, children: childrenFromProps } = props;\n  const itemView = list.itemView;\n\n  const [isExpanded, setIsExpanded] = useState(\n    itemView?.defaultExpanded?.(data) ?? false,\n  );\n  const contentElementId = useId();\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const accordion = list.accordion;\n  const children = childrenFromProps ?? itemView?.render(data);\n\n  useEffect(() => {\n    if (accordion) {\n      itemRef.current?.setAttribute(\"aria-expanded\", String(isExpanded));\n      itemRef.current?.setAttribute(\"aria-controls\", contentElementId);\n    }\n  }, [isExpanded, contentElementId, itemRef.current, accordion]);\n\n  if (!accordion) {\n    return {\n      gridItemProps: {\n        onAction: onAction\n          ? () => {\n              onAction?.(data);\n            }\n          : undefined,\n      },\n      children,\n    };\n  }\n\n  const toggleAccordion = () => {\n    setIsExpanded((current) => !current);\n    onAction?.(data);\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      id: dynamic((p) => (p.slot === \"bottom\" ? contentElementId : undefined)),\n      wrapWith: dynamic((p) =>\n        p.slot === \"bottom\" ? (\n          <AccordionButton\n            contentElementId={contentElementId}\n            toggle={toggleAccordion}\n            isExpanded={isExpanded}\n          />\n        ) : undefined,\n      ),\n    },\n  };\n\n  return {\n    gridItemProps: {\n      ref: itemRef,\n      onAction: toggleAccordion,\n    },\n    children: (\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[contentElementId, isExpanded]}\n      >\n        {children}\n      </PropsContextProvider>\n    ),\n  };\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,oBAAoB,OAAU,SAAsB;CAC/D,MAAM,EAAE,MAAM,UAAU,UAAU,sBAAsB;CACxD,MAAM,WAAW,KAAK;CAEtB,MAAM,CAAC,YAAY,iBAAiB,SAClC,UAAU,kBAAkB,IAAI,KAAK,KACvC;CACA,MAAM,mBAAmB,MAAM;CAC/B,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,KAAK;CACvB,MAAM,WAAW,qBAAqB,UAAU,OAAO,IAAI;CAE3D,gBAAgB;EACd,IAAI,WAAW;GACb,QAAQ,SAAS,aAAa,iBAAiB,OAAO,UAAU,CAAC;GACjE,QAAQ,SAAS,aAAa,iBAAiB,gBAAgB;EACjE;CACF,GAAG;EAAC;EAAY;EAAkB,QAAQ;EAAS;CAAS,CAAC;CAE7D,IAAI,CAAC,WACH,OAAO;EACL,eAAe,EACb,UAAU,iBACA;GACJ,WAAW,IAAI;EACjB,IACA,KAAA,EACN;EACA;CACF;CAGF,MAAM,wBAAwB;EAC5B,eAAe,YAAY,CAAC,OAAO;EACnC,WAAW,IAAI;CACjB;CAEA,MAAM,eAA6B,EACjC,SAAS;EACP,IAAI,SAAS,MAAO,EAAE,SAAS,WAAW,mBAAmB,KAAA,CAAU;EACvE,UAAU,SAAS,MACjB,EAAE,SAAS,WACT,oBAAC,iBAAD;GACoB;GAClB,QAAQ;GACI;EACb,CAAA,IACC,KAAA,CACN;CACF,EACF;CAEA,OAAO;EACL,eAAe;GACb,KAAK;GACL,UAAU;EACZ;EACA,UACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,kBAAkB,UAAU;GAE1C;EACmB,CAAA;CAE1B;AACF"}

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs

@@ -1,13 +1,16 @@
 "use client"
 /* */
+import { useLabelledBySectionHeading } from "../../../../../Section/context.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/List/components/Items/views/GridList/GridList.tsx
 /** @flr-generate all */
 var GridList = (props) => {
 	const { tileMaxWidth, emptyView, ...rest } = props;
+	const ariaLabelledBy = useLabelledBySectionHeading(rest);
 	return /* @__PURE__ */ jsx(Aria.GridList, {
 		...rest,
+		"aria-labelledby": ariaLabelledBy,
 		renderEmptyState: () => emptyView,
 		style: { gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))` }
 	});

package/dist/js/packages/components/src/components/List/components/Items/views/GridList/GridList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridList.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, ReactNode } from \"react\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n  emptyView?: ReactNode;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, emptyView, ...rest } = props;\n\n  return (\n    <Aria.GridList\n      {...rest}\n      renderEmptyState={() => emptyView}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"mappings":";;;;;;AASA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,cAAc,WAAW,GAAG,SAAS;CAE7C,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACJ,wBAAwB;EACxB,OAAO,EACL,qBAAqB,4BAA4B,aAAa,WAChE;CACD,CAAA;AAEL"}
+{"version":3,"file":"GridList.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridList/GridList.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, ReactNode } from \"react\";\nimport { useLabelledBySectionHeading } from \"@/components/Section/context\";\n\nexport type GridListProps = Aria.GridListProps<never> & {\n  tileMaxWidth: number;\n  emptyView?: ReactNode;\n};\n\n/** @flr-generate all */\nexport const GridList: FC<GridListProps> = (props) => {\n  const { tileMaxWidth, emptyView, ...rest } = props;\n  const ariaLabelledBy = useLabelledBySectionHeading(rest);\n\n  return (\n    <Aria.GridList\n      {...rest}\n      aria-labelledby={ariaLabelledBy}\n      renderEmptyState={() => emptyView}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${tileMaxWidth}px, 1fr))`,\n      }}\n    />\n  );\n};\n\nexport default GridList;\n"],"mappings":";;;;;;;AAUA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,cAAc,WAAW,GAAG,SAAS;CAC7C,MAAM,iBAAiB,4BAA4B,IAAI;CAEvD,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACJ,mBAAiB;EACjB,wBAAwB;EACxB,OAAO,EACL,qBAAqB,4BAA4B,aAAa,WAChE;CACD,CAAA;AAEL"}

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\";\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"}

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

@@ -2,14 +2,14 @@
 /* */
 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 { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/List/components/Table/Table.tsx
@@ -21,19 +21,15 @@ var Table = () => {
 	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 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, {
 		...list.componentProps,

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 } 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 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\";\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  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  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  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;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;CAEA,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,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"}

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/useAriaAnnounceSearchState.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../_virtual/_18.locale.mjs";
 import { useList } from "./useList.mjs";
 import { useEffect } from "react";
 import { announce } from "@react-aria/live-announcer";

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/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/item/ItemView.mjs

@@ -1,8 +1,8 @@
 "use client"
 /* */
 import { createElement } from "react";
+import { isShallowEqual } from "remeda";
 //#region src/components/List/model/item/ItemView.ts
-var dependenciesAreEqual = (a, b) => a === b || !!a && !!b && a.length === b.length && a.every((dependency, index) => Object.is(dependency, b[index]));
 var ItemView = class ItemView {
 	list;
 	textValue;
@@ -13,10 +13,12 @@ var ItemView = class ItemView {
 	showTiles;
 	showList;
 	tileMaxWidth;
+	renderDependencies;
 	dependencies;
 	renderFn;
+	lastComparison;
 	constructor(list, shape = {}) {
-		const { fallback, loadingView = fallback, textValue, href, target, defaultExpanded, renderFn, showTiles, showList = true, tileMaxWidth = 230, dependencies } = shape;
+		const { fallback, loadingView = fallback, textValue, href, target, defaultExpanded, renderFn, showTiles, showList = true, tileMaxWidth = 230, renderDependencies, dependencies } = shape;
 		this.list = list;
 		this.textValue = textValue;
 		this.renderFn = renderFn;
@@ -27,16 +29,27 @@ var ItemView = class ItemView {
 		this.showTiles = showTiles;
 		this.showList = showList;
 		this.tileMaxWidth = tileMaxWidth;
+		this.renderDependencies = renderDependencies;
 		this.dependencies = dependencies;
 	}
 	static fallbackRenderItemFn = (item) => createElement("pre", void 0, JSON.stringify(item));
 	/**
-	* Whether `other` would render this item identically — i.e. all render
-	* functions taken from the consumer's `ListItem` element are still the same,
-	* and the dependencies it declared have not changed.
+	* Whether `other` would render the item holding `data` identically. The
+	* render function counts by its `renderDependencies` where given, otherwise
+	* by its identity and the deprecated `dependencies`. `textValue` and `href`
+	* count by what they return for `data`, so inline functions do not re-render
+	* the item. `defaultExpanded` is read on mount only, so it does not count at
+	* all.
 	*/
-	rendersSameAs(other) {
-		return !!other && dependenciesAreEqual(this.dependencies, other.dependencies) && this.renderFn === other.renderFn && this.textValue === other.textValue && this.href === other.href && this.target === other.target && this.defaultExpanded === other.defaultExpanded;
+	rendersSameFor(other, data) {
+		return !!other && this.rendersSameContentAs(other) && this.textValue?.(data) === other.textValue?.(data) && this.href?.(data) === other.href?.(data) && this.target === other.target;
+	}
+	rendersSameContentAs(other) {
+		if (this.lastComparison?.other !== other) this.lastComparison = {
+			other,
+			result: this.renderDependencies || other.renderDependencies ? isShallowEqual(this.renderDependencies, other.renderDependencies) : this.renderFn === other.renderFn && isShallowEqual(this.dependencies, other.dependencies)
+		};
+		return this.lastComparison.result;
 	}
 	render(data) {
 		return (this.renderFn ?? ItemView.fallbackRenderItemFn)(data, this.list);

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

@@ -1 +1 @@
-{"version":3,"file":"ItemView.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemView.ts"],"sourcesContent":["import type {\n  DependencyList,\n  HTMLAttributeAnchorTarget,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { createElement } from \"react\";\nimport type { RenderItemFn } from \"@/components/List/model/item/types\";\nimport type List from \"@/components/List/model/List\";\n\nexport interface ItemViewShape<T> {\n  textValue?: (data: T) => string;\n  href?: (data: T) => string;\n  target?: HTMLAttributeAnchorTarget;\n  defaultExpanded?: (data: T) => boolean;\n  renderFn?: RenderItemFn<T>;\n  /** @deprecated Use loadingView instead */\n  fallback?: ReactElement;\n  loadingView?: ReactElement;\n  showList?: boolean;\n  showTiles?: boolean;\n  tileMaxWidth?: number;\n  /**\n   * Values this item's content depends on besides its own data.\n   *\n   * An item re-renders when its data changes, or when one of the render\n   * functions on its `List.Item` changes identity — which a function written\n   * inline in JSX does on every render of its parent. A render function with a\n   * stable identity (hoisted out of the component, wrapped in `useCallback`, or\n   * reading from an external store) has to list what it reads here, or the item\n   * keeps the values it first saw.\n   */\n  dependencies?: DependencyList;\n}\n\nconst dependenciesAreEqual = (a?: DependencyList, b?: DependencyList) =>\n  a === b ||\n  (!!a &&\n    !!b &&\n    a.length === b.length &&\n    a.every((dependency, index) => Object.is(dependency, b[index])));\n\nexport class ItemView<T> {\n  public readonly list: List<T>;\n  public readonly textValue?: (data: T) => string;\n  public readonly href?: (data: T) => string;\n  public readonly target?: HTMLAttributeAnchorTarget;\n  public readonly defaultExpanded?: (data: T) => boolean;\n  public readonly loadingView?: ReactElement;\n  public readonly showTiles?: boolean;\n  public readonly showList?: boolean;\n  public readonly tileMaxWidth: number;\n  public readonly dependencies?: DependencyList;\n  private readonly renderFn?: RenderItemFn<T>;\n\n  public constructor(list: List<T>, shape: ItemViewShape<T> = {}) {\n    const {\n      fallback,\n      loadingView = fallback,\n      textValue,\n      href,\n      target,\n      defaultExpanded,\n      renderFn,\n      showTiles,\n      showList = true,\n      tileMaxWidth = 230,\n      dependencies,\n    } = shape;\n    this.list = list;\n    this.textValue = textValue;\n    this.renderFn = renderFn;\n    this.href = href;\n    this.target = target;\n    this.defaultExpanded = defaultExpanded;\n    this.loadingView = loadingView;\n    this.showTiles = showTiles;\n    this.showList = showList;\n    this.tileMaxWidth = tileMaxWidth;\n    this.dependencies = dependencies;\n  }\n\n  private static fallbackRenderItemFn: RenderItemFn<never> = (item) =>\n    createElement(\"pre\", undefined, JSON.stringify(item));\n\n  /**\n   * Whether `other` would render this item identically — i.e. all render\n   * functions taken from the consumer's `ListItem` element are still the same,\n   * and the dependencies it declared have not changed.\n   */\n  public rendersSameAs(other?: ItemView<T>): boolean {\n    return (\n      !!other &&\n      dependenciesAreEqual(this.dependencies, other.dependencies) &&\n      this.renderFn === other.renderFn &&\n      this.textValue === other.textValue &&\n      this.href === other.href &&\n      this.target === other.target &&\n      this.defaultExpanded === other.defaultExpanded\n    );\n  }\n\n  public render(data: T): ReactNode {\n    const renderFn = (this.renderFn ??\n      ItemView.fallbackRenderItemFn) as RenderItemFn<T>;\n    return renderFn(data as never, this.list);\n  }\n}\n"],"mappings":";;;;AAmCA,IAAM,wBAAwB,GAAoB,MAChD,MAAM,KACL,CAAC,CAAC,KACD,CAAC,CAAC,KACF,EAAE,WAAW,EAAE,UACf,EAAE,OAAO,YAAY,UAAU,OAAO,GAAG,YAAY,EAAE,MAAM,CAAC;AAElE,IAAa,WAAb,MAAa,SAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,MAAe,QAA0B,CAAC,GAAG;EAC9D,MAAM,EACJ,UACA,cAAc,UACd,WACA,MACA,QACA,iBACA,UACA,WACA,WAAW,MACX,eAAe,KACf,iBACE;EACJ,KAAK,OAAO;EACZ,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,kBAAkB;EACvB,KAAK,cAAc;EACnB,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,eAAe;EACpB,KAAK,eAAe;CACtB;CAEA,OAAe,wBAA6C,SAC1D,cAAc,OAAO,KAAA,GAAW,KAAK,UAAU,IAAI,CAAC;;;;;;CAOtD,cAAqB,OAA8B;EACjD,OACE,CAAC,CAAC,SACF,qBAAqB,KAAK,cAAc,MAAM,YAAY,KAC1D,KAAK,aAAa,MAAM,YACxB,KAAK,cAAc,MAAM,aACzB,KAAK,SAAS,MAAM,QACpB,KAAK,WAAW,MAAM,UACtB,KAAK,oBAAoB,MAAM;CAEnC;CAEA,OAAc,MAAoB;EAGhC,QAFkB,KAAK,YACrB,SAAS,qBAAA,CACK,MAAe,KAAK,IAAI;CAC1C;AACF"}
+{"version":3,"file":"ItemView.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemView.ts"],"sourcesContent":["import type {\n  DependencyList,\n  HTMLAttributeAnchorTarget,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { createElement } from \"react\";\nimport type { RenderItemFn } from \"@/components/List/model/item/types\";\nimport type List from \"@/components/List/model/List\";\nimport { isShallowEqual } from \"remeda\";\n\nexport interface ItemViewShape<T> {\n  /**\n   * Runs on every render of the list to tell whether the item changed, so it\n   * should be cheap and pure.\n   */\n  textValue?: (data: T) => string;\n  /**\n   * Runs on every render of the list to tell whether the item changed, so it\n   * should be cheap and pure.\n   */\n  href?: (data: T) => string;\n  target?: HTMLAttributeAnchorTarget;\n  defaultExpanded?: (data: T) => boolean;\n  renderFn?: RenderItemFn<T>;\n  /** @deprecated Use loadingView instead */\n  fallback?: ReactElement;\n  loadingView?: ReactElement;\n  showList?: boolean;\n  showTiles?: boolean;\n  tileMaxWidth?: number;\n  /**\n   * Everything the render function reads besides the item's data.\n   *\n   * With `renderDependencies`, an item re-renders only when its data or one of\n   * these values changes. The render function's identity no longer counts, so a\n   * function written inline in JSX keeps the item from re-rendering on every\n   * render of its parent. List every value it reads from outside the item,\n   * including state read through the `list` argument — one left out keeps the\n   * item on the value it last rendered.\n   *\n   * Without it, an item re-renders whenever its render function changes\n   * identity, which an inline function does on every render of its parent.\n   */\n  renderDependencies?: DependencyList;\n  /**\n   * @deprecated Use `renderDependencies` instead. `dependencies` only adds to\n   *   the render function's identity, so an inline render function still\n   *   re-renders the item on every render of its parent.\n   */\n  dependencies?: DependencyList;\n}\n\nexport class ItemView<T> {\n  public readonly list: List<T>;\n  public readonly textValue?: (data: T) => string;\n  public readonly href?: (data: T) => string;\n  public readonly target?: HTMLAttributeAnchorTarget;\n  public readonly defaultExpanded?: (data: T) => boolean;\n  public readonly loadingView?: ReactElement;\n  public readonly showTiles?: boolean;\n  public readonly showList?: boolean;\n  public readonly tileMaxWidth: number;\n  public readonly renderDependencies?: DependencyList;\n  public readonly dependencies?: DependencyList;\n  private readonly renderFn?: RenderItemFn<T>;\n  private lastComparison?: { other: ItemView<T>; result: boolean };\n\n  public constructor(list: List<T>, shape: ItemViewShape<T> = {}) {\n    const {\n      fallback,\n      loadingView = fallback,\n      textValue,\n      href,\n      target,\n      defaultExpanded,\n      renderFn,\n      showTiles,\n      showList = true,\n      tileMaxWidth = 230,\n      renderDependencies,\n      dependencies,\n    } = shape;\n    this.list = list;\n    this.textValue = textValue;\n    this.renderFn = renderFn;\n    this.href = href;\n    this.target = target;\n    this.defaultExpanded = defaultExpanded;\n    this.loadingView = loadingView;\n    this.showTiles = showTiles;\n    this.showList = showList;\n    this.tileMaxWidth = tileMaxWidth;\n    this.renderDependencies = renderDependencies;\n    this.dependencies = dependencies;\n  }\n\n  private static fallbackRenderItemFn: RenderItemFn<never> = (item) =>\n    createElement(\"pre\", undefined, JSON.stringify(item));\n\n  /**\n   * Whether `other` would render the item holding `data` identically. The\n   * render function counts by its `renderDependencies` where given, otherwise\n   * by its identity and the deprecated `dependencies`. `textValue` and `href`\n   * count by what they return for `data`, so inline functions do not re-render\n   * the item. `defaultExpanded` is read on mount only, so it does not count at\n   * all.\n   */\n  public rendersSameFor(other: ItemView<T> | undefined, data: T): boolean {\n    return (\n      !!other &&\n      this.rendersSameContentAs(other) &&\n      this.textValue?.(data) === other.textValue?.(data) &&\n      this.href?.(data) === other.href?.(data) &&\n      this.target === other.target\n    );\n  }\n\n  // Every item of a render shares one item view, so the result is cached for\n  // the last `other`.\n  private rendersSameContentAs(other: ItemView<T>): boolean {\n    if (this.lastComparison?.other !== other) {\n      this.lastComparison = {\n        other,\n        result:\n          this.renderDependencies || other.renderDependencies\n            ? isShallowEqual(this.renderDependencies, other.renderDependencies)\n            : this.renderFn === other.renderFn &&\n              isShallowEqual(this.dependencies, other.dependencies),\n      };\n    }\n    return this.lastComparison.result;\n  }\n\n  public render(data: T): ReactNode {\n    const renderFn = (this.renderFn ??\n      ItemView.fallbackRenderItemFn) as RenderItemFn<T>;\n    return renderFn(data as never, this.list);\n  }\n}\n"],"mappings":";;;;;AAqDA,IAAa,WAAb,MAAa,SAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,MAAe,QAA0B,CAAC,GAAG;EAC9D,MAAM,EACJ,UACA,cAAc,UACd,WACA,MACA,QACA,iBACA,UACA,WACA,WAAW,MACX,eAAe,KACf,oBACA,iBACE;EACJ,KAAK,OAAO;EACZ,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,kBAAkB;EACvB,KAAK,cAAc;EACnB,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,eAAe;EACpB,KAAK,qBAAqB;EAC1B,KAAK,eAAe;CACtB;CAEA,OAAe,wBAA6C,SAC1D,cAAc,OAAO,KAAA,GAAW,KAAK,UAAU,IAAI,CAAC;;;;;;;;;CAUtD,eAAsB,OAAgC,MAAkB;EACtE,OACE,CAAC,CAAC,SACF,KAAK,qBAAqB,KAAK,KAC/B,KAAK,YAAY,IAAI,MAAM,MAAM,YAAY,IAAI,KACjD,KAAK,OAAO,IAAI,MAAM,MAAM,OAAO,IAAI,KACvC,KAAK,WAAW,MAAM;CAE1B;CAIA,qBAA6B,OAA6B;EACxD,IAAI,KAAK,gBAAgB,UAAU,OACjC,KAAK,iBAAiB;GACpB;GACA,QACE,KAAK,sBAAsB,MAAM,qBAC7B,eAAe,KAAK,oBAAoB,MAAM,kBAAkB,IAChE,KAAK,aAAa,MAAM,YACxB,eAAe,KAAK,cAAc,MAAM,YAAY;EAC5D;EAEF,OAAO,KAAK,eAAe;CAC7B;CAEA,OAAc,MAAoB;EAGhC,QAFkB,KAAK,YACrB,SAAS,qBAAA,CACK,MAAe,KAAK,IAAI;CAC1C;AACF"}

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

@@ -7,7 +7,7 @@ var TableCell = class {
 	componentProps;
 	loadingView;
 	constructor(row, shape = {}) {
-		const { renderFn, loadingView, ...rest } = shape;
+		const { renderFn, loadingView, children: ignoredChildren, ...rest } = shape;
 		this.row = row;
 		this.renderFn = renderFn;
 		this.componentProps = rest;

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/table/TableCell.ts"],"sourcesContent":["import type {\n  TableCellShape,\n  TableCellSupportedComponentProps,\n} from \"@/components/List/model/table/types\";\nimport type { TableRow } from \"@/components/List/model/table/TableRow\";\nimport type { RenderItemFn } from \"@/components/List\";\nimport type { ReactElement } from \"react\";\n\nexport class TableCell<T> {\n  public readonly row: TableRow<T>;\n  public readonly renderFn?: RenderItemFn<T>;\n  public readonly componentProps: TableCellSupportedComponentProps;\n  loadingView?: ReactElement;\n\n  public constructor(row: TableRow<T>, shape: TableCellShape<T> = {}) {\n    const { renderFn, loadingView, ...rest } = shape;\n    this.row = row;\n    this.renderFn = renderFn;\n    this.componentProps = rest;\n    this.loadingView = loadingView;\n  }\n}\n"],"mappings":";;;AAQA,IAAa,YAAb,MAA0B;CACxB;CACA;CACA;CACA;CAEA,YAAmB,KAAkB,QAA2B,CAAC,GAAG;EAClE,MAAM,EAAE,UAAU,aAAa,GAAG,SAAS;EAC3C,KAAK,MAAM;EACX,KAAK,WAAW;EAChB,KAAK,iBAAiB;EACtB,KAAK,cAAc;CACrB;AACF"}
+{"version":3,"file":"TableCell.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/table/TableCell.ts"],"sourcesContent":["import type {\n  TableCellShape,\n  TableCellSupportedComponentProps,\n} from \"@/components/List/model/table/types\";\nimport type { TableRow } from \"@/components/List/model/table/TableRow\";\nimport type { RenderItemFn } from \"@/components/List\";\nimport type { ReactElement } from \"react\";\n\nexport class TableCell<T> {\n  public readonly row: TableRow<T>;\n  public readonly renderFn?: RenderItemFn<T>;\n  public readonly componentProps: TableCellSupportedComponentProps;\n  loadingView?: ReactElement;\n\n  public constructor(row: TableRow<T>, shape: TableCellShape<T> = {}) {\n    // `children` is the render function, which arrives as `renderFn`.\n    const {\n      renderFn,\n      loadingView,\n      children: ignoredChildren,\n      ...rest\n    } = shape as TableCellShape<T> & { children?: unknown };\n    this.row = row;\n    this.renderFn = renderFn;\n    this.componentProps = rest;\n    this.loadingView = loadingView;\n  }\n}\n"],"mappings":";;;AAQA,IAAa,YAAb,MAA0B;CACxB;CACA;CACA;CACA;CAEA,YAAmB,KAAkB,QAA2B,CAAC,GAAG;EAElE,MAAM,EACJ,UACA,aACA,UAAU,iBACV,GAAG,SACD;EACJ,KAAK,MAAM;EACX,KAAK,WAAW;EAChB,KAAK,iBAAiB;EACtB,KAAK,cAAc;CACrB;AACF"}

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

@@ -1,16 +1,43 @@
 "use client"
 /* */
 import { TableCell } from "./TableCell.mjs";
+import { isShallowEqual } from "remeda";
 //#region src/components/List/model/table/TableRow.ts
 var TableRow = class {
 	tableBody;
 	cells;
 	componentProps;
+	renderDependencies;
+	lastComparison;
 	constructor(tableBody, shape = {}) {
-		const { cells = [], ...rest } = shape;
+		const { cells = [], renderDependencies, children: ignoredChildren, ...rest } = shape;
 		this.tableBody = tableBody;
 		this.cells = cells.map((cellShape) => new TableCell(this, cellShape));
 		this.componentProps = rest;
+		this.renderDependencies = renderDependencies;
+	}
+	/**
+	* Whether `other` would render a row identically. Only rows that declare
+	* `renderDependencies` can tell, since the cells' render functions count by
+	* those instead of their identity. Rows without them always re-render. Row
+	* and cell props count by identity, one by one.
+	*
+	* Every row of a render shares one model, so the result is cached for the
+	* last `other`.
+	*/
+	rendersSameAs(other) {
+		if (!other) return false;
+		if (this.lastComparison?.other !== other) this.lastComparison = {
+			other,
+			result: this.compareWith(other)
+		};
+		return this.lastComparison.result;
+	}
+	compareWith(other) {
+		return !!this.renderDependencies && isShallowEqual(this.renderDependencies, other.renderDependencies) && isShallowEqual(this.componentProps, other.componentProps) && this.cells.length === other.cells.length && this.cells.every((cell, index) => {
+			const otherCell = other.cells[index];
+			return !!otherCell && isShallowEqual(cell.componentProps, otherCell.componentProps);
+		});
 	}
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/table/TableRow.ts"],"sourcesContent":["import type {\n  TableRowShape,\n  TableRowSupportedComponentProps,\n} from \"@/components/List/model/table/types\";\nimport { TableCell } from \"@/components/List/model/table/TableCell\";\nimport type { TableBody } from \"@/components/List/model/table/TableBody\";\n\nexport class TableRow<T> {\n  public readonly tableBody: TableBody<T>;\n  public readonly cells: TableCell<T>[];\n  public readonly componentProps: TableRowSupportedComponentProps;\n\n  public constructor(tableBody: TableBody<T>, shape: TableRowShape<T> = {}) {\n    const { cells = [], ...rest } = shape;\n    this.tableBody = tableBody;\n    this.cells = cells.map((cellShape) => new TableCell(this, cellShape));\n    this.componentProps = rest;\n  }\n}\n"],"mappings":";;;;AAOA,IAAa,WAAb,MAAyB;CACvB;CACA;CACA;CAEA,YAAmB,WAAyB,QAA0B,CAAC,GAAG;EACxE,MAAM,EAAE,QAAQ,CAAC,GAAG,GAAG,SAAS;EAChC,KAAK,YAAY;EACjB,KAAK,QAAQ,MAAM,KAAK,cAAc,IAAI,UAAU,MAAM,SAAS,CAAC;EACpE,KAAK,iBAAiB;CACxB;AACF"}
+{"version":3,"file":"TableRow.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/table/TableRow.ts"],"sourcesContent":["import type {\n  TableRowShape,\n  TableRowSupportedComponentProps,\n} from \"@/components/List/model/table/types\";\nimport { TableCell } from \"@/components/List/model/table/TableCell\";\nimport type { TableBody } from \"@/components/List/model/table/TableBody\";\nimport type { DependencyList } from \"react\";\nimport { isShallowEqual } from \"remeda\";\n\nexport class TableRow<T> {\n  public readonly tableBody: TableBody<T>;\n  public readonly cells: TableCell<T>[];\n  public readonly componentProps: TableRowSupportedComponentProps;\n  public readonly renderDependencies?: DependencyList;\n  private lastComparison?: { other: TableRow<T>; result: boolean };\n\n  public constructor(tableBody: TableBody<T>, shape: TableRowShape<T> = {}) {\n    // `children` holds the cell elements, which arrive as `cells`.\n    const {\n      cells = [],\n      renderDependencies,\n      children: ignoredChildren,\n      ...rest\n    } = shape;\n    this.tableBody = tableBody;\n    this.cells = cells.map((cellShape) => new TableCell(this, cellShape));\n    this.componentProps = rest;\n    this.renderDependencies = renderDependencies;\n  }\n\n  /**\n   * Whether `other` would render a row identically. Only rows that declare\n   * `renderDependencies` can tell, since the cells' render functions count by\n   * those instead of their identity. Rows without them always re-render. Row\n   * and cell props count by identity, one by one.\n   *\n   * Every row of a render shares one model, so the result is cached for the\n   * last `other`.\n   */\n  public rendersSameAs(other?: TableRow<T>): boolean {\n    if (!other) {\n      return false;\n    }\n    if (this.lastComparison?.other !== other) {\n      this.lastComparison = { other, result: this.compareWith(other) };\n    }\n    return this.lastComparison.result;\n  }\n\n  private compareWith(other: TableRow<T>): boolean {\n    return (\n      !!this.renderDependencies &&\n      isShallowEqual(this.renderDependencies, other.renderDependencies) &&\n      isShallowEqual(this.componentProps, other.componentProps) &&\n      this.cells.length === other.cells.length &&\n      this.cells.every((cell, index) => {\n        const otherCell = other.cells[index];\n        return (\n          !!otherCell &&\n          isShallowEqual(cell.componentProps, otherCell.componentProps)\n        );\n      })\n    );\n  }\n}\n"],"mappings":";;;;;AASA,IAAa,WAAb,MAAyB;CACvB;CACA;CACA;CACA;CACA;CAEA,YAAmB,WAAyB,QAA0B,CAAC,GAAG;EAExE,MAAM,EACJ,QAAQ,CAAC,GACT,oBACA,UAAU,iBACV,GAAG,SACD;EACJ,KAAK,YAAY;EACjB,KAAK,QAAQ,MAAM,KAAK,cAAc,IAAI,UAAU,MAAM,SAAS,CAAC;EACpE,KAAK,iBAAiB;EACtB,KAAK,qBAAqB;CAC5B;;;;;;;;;;CAWA,cAAqB,OAA8B;EACjD,IAAI,CAAC,OACH,OAAO;EAET,IAAI,KAAK,gBAAgB,UAAU,OACjC,KAAK,iBAAiB;GAAE;GAAO,QAAQ,KAAK,YAAY,KAAK;EAAE;EAEjE,OAAO,KAAK,eAAe;CAC7B;CAEA,YAAoB,OAA6B;EAC/C,OACE,CAAC,CAAC,KAAK,sBACP,eAAe,KAAK,oBAAoB,MAAM,kBAAkB,KAChE,eAAe,KAAK,gBAAgB,MAAM,cAAc,KACxD,KAAK,MAAM,WAAW,MAAM,MAAM,UAClC,KAAK,MAAM,OAAO,MAAM,UAAU;GAChC,MAAM,YAAY,MAAM,MAAM;GAC9B,OACE,CAAC,CAAC,aACF,eAAe,KAAK,gBAAgB,UAAU,cAAc;EAEhE,CAAC;CAEL;AACF"}

package/dist/js/packages/components/src/components/List/views/EmptyView/EmptyView.mjs

@@ -4,7 +4,7 @@ import { IconSearch } from "../../../Icon/components/icons/IconSearch.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Text } from "../../../Text/Text.mjs";
 import { Heading } from "../../../Heading/Heading.mjs";
-import __locale_default from "../../../../../../../_virtual/_17.locale.mjs";
+import __locale_default from "../../../../../../../_virtual/_18.locale.mjs";
 import { IllustratedMessage } from "../../../IllustratedMessage/IllustratedMessage.mjs";
 import Items_module_default from "../../components/Items/Items.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/components/Markdown/Markdown.mjs

@@ -10,9 +10,10 @@ import { Link } from "../Link/Link.mjs";
 import { InlineCode } from "../InlineCode/InlineCode.mjs";
 import Markdown_module_default from "./Markdown.module.mjs";
 import { getHeadingLevelWithOffset } from "./lib/getHeadingLevelWithOffset.mjs";
+import { isExternalHref } from "./lib/isExternalHref.mjs";
 import { SkeletonBlockText, SkeletonInlineContent } from "./components/SkeletonBlocks.mjs";
 import clsx from "clsx";
-import { Children, isValidElement } from "react";
+import { Children, isValidElement, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -24,9 +25,13 @@ import remarkGfm from "remark-gfm";
 var Markdown = (props) => {
 	const { children, color = "default", className, headingOffset = 0, components: customComponents, ref, allowElement, allowedElements, disallowedElements, rehypePlugins, remarkPlugins, remarkRehypeOptions, skipHtml, unwrapDisallowed, urlTransform, ...rest } = props;
 	const isSkeleton = useSkeletonMode();
+	const clobberPrefix = `user-content-${useId().replace(/[^\w-]/g, "")}-`;
 	const defaultComponents = {
 		a: (props) => /* @__PURE__ */ jsx(Link, {
-			target: "_blank",
+			id: props.id,
+			"aria-label": props["aria-label"],
+			"aria-describedby": props["aria-describedby"],
+			target: isExternalHref(props.href) ? "_blank" : void 0,
 			color,
 			href: props.href,
 			children: props.children
@@ -41,31 +46,37 @@ var Markdown = (props) => {
 			children: props.children
 		}),
 		h1: (props) => /* @__PURE__ */ jsx(Heading, {
+			id: props.id,
 			level: getHeadingLevelWithOffset(1, headingOffset),
 			color,
 			children: props.children
 		}),
 		h2: (props) => /* @__PURE__ */ jsx(Heading, {
+			id: props.id,
 			level: getHeadingLevelWithOffset(2, headingOffset),
 			color,
 			children: props.children
 		}),
 		h3: (props) => /* @__PURE__ */ jsx(Heading, {
+			id: props.id,
 			level: getHeadingLevelWithOffset(3, headingOffset),
 			color,
 			children: props.children
 		}),
 		h4: (props) => /* @__PURE__ */ jsx(Heading, {
+			id: props.id,
 			level: getHeadingLevelWithOffset(4, headingOffset),
 			color,
 			children: props.children
 		}),
 		h5: (props) => /* @__PURE__ */ jsx(Heading, {
+			id: props.id,
 			level: getHeadingLevelWithOffset(5, headingOffset),
 			color,
 			children: props.children
 		}),
 		h6: (props) => /* @__PURE__ */ jsx(Heading, {
+			id: props.id,
 			level: getHeadingLevelWithOffset(6, headingOffset),
 			color,
 			children: props.children
@@ -79,13 +90,13 @@ var Markdown = (props) => {
 				code: String(isValidElement(preElementContent) ? preElementContent.props.children : preElementContent).trim()
 			});
 		},
-		ul: (props) => /* @__PURE__ */ jsx(SkeletonBlockText, {
+		ul: ({ node: ignoredNode, ...props }) => /* @__PURE__ */ jsx(SkeletonBlockText, {
 			color,
-			children: /* @__PURE__ */ jsx("ul", { children: props.children })
+			children: /* @__PURE__ */ jsx("ul", { ...props })
 		}),
-		ol: (props) => /* @__PURE__ */ jsx(SkeletonBlockText, {
+		ol: ({ node: ignoredNode, ...props }) => /* @__PURE__ */ jsx(SkeletonBlockText, {
 			color,
-			children: /* @__PURE__ */ jsx("ol", { children: props.children })
+			children: /* @__PURE__ */ jsx("ol", { ...props })
 		}),
 		li: ({ node: ignoredNode, children, ...props }) => /* @__PURE__ */ jsx("li", {
 			...props,
@@ -120,7 +131,10 @@ var Markdown = (props) => {
 			disallowedElements,
 			rehypePlugins,
 			remarkPlugins: remarkPlugins ?? [remarkGfm],
-			remarkRehypeOptions,
+			remarkRehypeOptions: {
+				clobberPrefix,
+				...remarkRehypeOptions
+			},
 			skipHtml,
 			unwrapDisallowed,
 			urlTransform,