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

package/dist/types/components/List/model/item/ItemView.d.ts

@@ -2,7 +2,15 @@ import { DependencyList, HTMLAttributeAnchorTarget, ReactElement, ReactNode } fr
 import { RenderItemFn } from './types';
 import { default as List } from '../List';
 export interface ItemViewShape<T> {
+    /**
+     * Runs on every render of the list to tell whether the item changed, so it
+     * should be cheap and pure.
+     */
     textValue?: (data: T) => string;
+    /**
+     * Runs on every render of the list to tell whether the item changed, so it
+     * should be cheap and pure.
+     */
     href?: (data: T) => string;
     target?: HTMLAttributeAnchorTarget;
     defaultExpanded?: (data: T) => boolean;
@@ -14,14 +22,23 @@ export interface ItemViewShape<T> {
     showTiles?: boolean;
     tileMaxWidth?: number;
     /**
-     * Values this item's content depends on besides its own data.
+     * Everything the render function reads besides the item's data.
      *
-     * An item re-renders when its data changes, or when one of the render
-     * functions on its `List.Item` changes identity — which a function written
-     * inline in JSX does on every render of its parent. A render function with a
-     * stable identity (hoisted out of the component, wrapped in `useCallback`, or
-     * reading from an external store) has to list what it reads here, or the item
-     * keeps the values it first saw.
+     * With `renderDependencies`, an item re-renders only when its data or one of
+     * these values changes. The render function's identity no longer counts, so a
+     * function written inline in JSX keeps the item from re-rendering on every
+     * render of its parent. List every value it reads from outside the item,
+     * including state read through the `list` argument — one left out keeps the
+     * item on the value it last rendered.
+     *
+     * Without it, an item re-renders whenever its render function changes
+     * identity, which an inline function does on every render of its parent.
+     */
+    renderDependencies?: DependencyList;
+    /**
+     * @deprecated Use `renderDependencies` instead. `dependencies` only adds to
+     *   the render function's identity, so an inline render function still
+     *   re-renders the item on every render of its parent.
      */
     dependencies?: DependencyList;
 }
@@ -35,15 +52,21 @@ export declare class ItemView<T> {
     readonly showTiles?: boolean;
     readonly showList?: boolean;
     readonly tileMaxWidth: number;
+    readonly renderDependencies?: DependencyList;
     readonly dependencies?: DependencyList;
     private readonly renderFn?;
+    private lastComparison?;
     constructor(list: List<T>, shape?: ItemViewShape<T>);
     private static fallbackRenderItemFn;
     /**
-     * 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?: ItemView<T>): boolean;
+    rendersSameFor(other: ItemView<T> | undefined, data: T): boolean;
+    private rendersSameContentAs;
     render(data: T): ReactNode;
 }

package/dist/types/components/List/model/table/TableRow.d.ts

@@ -1,9 +1,23 @@
 import { TableRowShape, TableRowSupportedComponentProps } from './types';
 import { TableCell } from './TableCell';
 import { TableBody } from './TableBody';
+import { DependencyList } from 'react';
 export declare class TableRow<T> {
     readonly tableBody: TableBody<T>;
     readonly cells: TableCell<T>[];
     readonly componentProps: TableRowSupportedComponentProps;
+    readonly renderDependencies?: DependencyList;
+    private lastComparison?;
     constructor(tableBody: TableBody<T>, shape?: TableRowShape<T>);
+    /**
+     * 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?: TableRow<T>): boolean;
+    private compareWith;
 }

package/dist/types/components/List/model/table/types.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactElement } from 'react';
+import { DependencyList, PropsWithChildren, ReactElement } from 'react';
 import { TableBodyProps, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TableRowProps } from '../../../Table';
 import { RenderItemFn } from '../..';
 /** Cell */
@@ -13,6 +13,22 @@ export type TableRowSupportedComponentProps = Omit<TableRowProps, "onAction" | "
 };
 export interface TableRowShape<T> extends TableRowSupportedComponentProps, PropsWithChildren {
     cells?: TableCellShape<T>[];
+    /**
+     * Everything the cells' render functions read besides the row's data.
+     *
+     * With `renderDependencies`, a row re-renders only when its data, one of
+     * these values, or a cell's props change. The render functions' identity does
+     * not count, so functions written inline in JSX keep the row from
+     * re-rendering on every render of its parent. List every value they read from
+     * outside the row, including state read through the `list` argument — one
+     * left out keeps the row on the value it last rendered.
+     *
+     * Row and cell props count by identity, so an inline `style` object or
+     * callback on `List.TableRow` or `List.TableCell` re-renders every row.
+     *
+     * Without it, every row re-renders whenever the list does.
+     */
+    renderDependencies?: DependencyList;
 }
 /** Column */
 export type TableColumnSupportedComponentProps = TableColumnProps;

package/dist/types/components/List/typedList.d.ts

@@ -127,6 +127,7 @@ export declare const typedList: <T, TMeta = unknown>() => {
         columns?: Iterable<never> | undefined;
         disabledBehavior?: import('react-stately').DisabledBehavior | undefined;
         hasChildItems?: boolean | undefined;
+        renderDependencies?: import('react').DependencyList | undefined;
     }) => null;
     TableCell: (ignoredProps: Omit<import('./model/table/types').TableCellShape<T>, "renderFn"> & {
         children: import('.').RenderItemFn<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.6.0-next.20",
+  "version": "1.6.0-next.21",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.6.0-next.20",
+    "@mittwald/flow-icons": "^1.6.0-next.21",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.6.0-next.20",
+    "@mittwald/react-tunnel": "^1.6.0-next.21",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-components-base": "1.6.0-next.20",
-    "@mittwald/flow-core": "1.6.0-next.20",
-    "@mittwald/flow-design-tokens": "1.6.0-next.20",
-    "@mittwald/flow-icons-base": "1.6.0-next.20",
+    "@mittwald/flow-components-base": "1.6.0-next.21",
+    "@mittwald/flow-core": "1.6.0-next.21",
+    "@mittwald/flow-design-tokens": "1.6.0-next.21",
+    "@mittwald/flow-icons-base": "1.6.0-next.21",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.6.0-next.20",
+    "@mittwald/typescript-config": "1.6.0-next.21",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.6.0-next.20",
+    "@mittwald/flow-icons-pro": "1.6.0-next.21",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -223,5 +223,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "151ddc103234bdf6b7832702e594639431c27fbd"
+  "gitHead": "c75ca489f4a68d285b3a7513fab391ef31978680"
 }