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

package/dist/types/components/CartesianChart/hooks/useTickLabelWidth.d.ts

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

package/dist/types/components/CodeBlock/CodeBlock.d.ts

@@ -8,7 +8,7 @@ export interface CodeBlockProps extends PropsWithClassName, PropsWithChildren, P
      * Controls truncation of long code blocks. `false` disables it, `true`
      * truncates after 8 lines, and a number sets the maximum line count.
      *
-     * @default: false
+     * @default false
      */
     truncateLines?: boolean | number;
 }

package/dist/types/components/DonutChart/DonutChart.d.ts

@@ -15,10 +15,7 @@ export interface DonutChartProps extends Omit<Aria.ProgressBarProps, "children"
     size?: "m" | "l";
     /** Divides the fill of the donut chart into segments */
     segments?: DonutChartSegment[];
-    /**
-     * Whether the legend component is shown when segments are used. @default:
-     * true
-     */
+    /** Whether the legend component is shown when segments are used. @default true */
     showLegend?: boolean;
     /** The position of the legend. @default "right" */
     legendPosition?: "top" | "left" | "bottom" | "right";

package/dist/types/components/List/components/Items/components/Item/Item.d.ts

@@ -7,6 +7,8 @@ interface Props extends PropsWithChildren {
     triggerRef?: Ref<HTMLDivElement>;
     list: ListModel<never>;
     isTile: boolean;
+    /** Stable invoker of the list's latest `onAction` */
+    onAction?: (data: never) => void;
 }
 export declare const Item: import('react').MemoExoticComponent<(props: Props) => import('react').JSX.Element | null>;
 interface ItemContainerProps extends PropsWithChildren {

package/dist/types/components/List/components/Items/components/Item/hooks/useGridItemProps.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 import { default as List } from '../../../../../model/List';
 interface P extends PropsWithChildren {
     data: never;
+    onAction?: (data: never) => void;
 }
 export declare const useGridItemProps: (props: P, list: List<never>) => {
     gridItemProps: {

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

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { FlowComponentProps } from '../../../../lib/componentFactory/flowComponent';
 export interface ListSummaryProps extends FlowComponentProps, PropsWithChildren {
-    /** Whether the summary is placed above or underneath the list @default: "top" */
+    /** Whether the summary is placed above or underneath the list @default "top" */
     position?: "top" | "bottom";
 }
 /** @flr-generate all */

package/dist/types/components/List/components/Table/components/Row.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'react';
+import { Key } from 'react-aria-components';
+import { default as ListModel } from '../../../model/List';
+interface Props {
+    id: Key;
+    data: never;
+    list: ListModel<never>;
+    /** Stable invoker of the list's latest `onAction` */
+    onAction?: (data: never) => void;
+    triggerRef?: Ref<HTMLTableRowElement>;
+}
+export declare const Row: import('react').MemoExoticComponent<(props: Props) => import('react').JSX.Element | null>;
+export default Row;

package/dist/types/components/List/hooks/useLatestOnAction.d.ts

@@ -0,0 +1,7 @@
+import { default as List } from '../model/List';
+/**
+ * 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`.
+ */
+export declare const useLatestOnAction: (list: List<never>) => ((data: never) => void | undefined) | undefined;

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/dist/types/components/Markdown/lib/isExternalHref.d.ts

@@ -0,0 +1 @@
+export declare const isExternalHref: (href: string | undefined) => boolean;

package/dist/types/components/ProgressBar/ProgressBar.d.ts

@@ -17,10 +17,7 @@ export interface ProgressBarProps extends PropsWithChildren<Omit<Aria.ProgressBa
         color?: CategoricalWithCustomColor;
         valueText?: string;
     }[];
-    /**
-     * Whether the legend component is shown when segments are used. @default:
-     * true
-     */
+    /** Whether the legend component is shown when segments are used. @default true */
     showLegend?: boolean;
 }
 /** @flr-generate all */

package/dist/types/components/Rating/Rating.d.ts

@@ -4,28 +4,28 @@ import * as Aria from "react-aria-components";
 export interface RatingProps extends FlowComponentProps, PropsWithChildren, Omit<Aria.RadioGroupProps, "children" | "value" | "defaultValue"> {
     /**
      * The value sets the amount of filled stars. Decimals are rounded to the
-     * nearest whole star. @default: 0
+     * nearest whole star. @default 0
      */
     value?: number;
     /**
      * The defaultValue sets the amount of default filled stars. Decimals are
-     * rounded to the nearest whole star. @default: 0
+     * rounded to the nearest whole star. @default 0
      */
     defaultValue?: number;
-    /** The size of the component. @default: "m" */
+    /** The size of the component. @default "m" */
     size?: "s" | "m";
     /**
      * The number of segments the rating consists of. Ignored when the rating has
      * `RatingSegment` children — those define the number of segments themselves.
      *
-     * @default: 5
+     * @default 5
      */
     maxValue?: number;
     /**
      * How the segments are filled. `cumulative` fills every segment up to the
      * value, `single` fills only the selected segment.
      *
-     * @default: cumulative
+     * @default "cumulative"
      */
     fill?: "cumulative" | "single";
     /** An alternative icon for the empty state */

package/dist/types/components/Section/context.d.ts

@@ -0,0 +1,28 @@
+import { FC, PropsWithChildren } from 'react';
+interface SectionHeading {
+    /** The id the surrounding `Section` gives its heading. */
+    id: string;
+    /** Whether a heading currently renders with that id. */
+    isRendered: boolean;
+    /** Called by a heading that renders with the id; returns the cleanup. */
+    register: () => () => void;
+}
+/** The heading state a `Section` provides for the given heading id. */
+export declare const useSectionHeading: (id: string) => SectionHeading;
+export declare const SectionHeadingProvider: import('react').Provider<SectionHeading | undefined>;
+/**
+ * Ends the surrounding `Section`'s heading scope, for content that has a
+ * heading of its own (`Accordion`, `Alert`, an overlay, …).
+ */
+export declare const SectionHeadingReset: FC<PropsWithChildren>;
+/** Marks the section heading as rendered while a heading carries its id. */
+export declare const useRegisterSectionHeading: (id: string | undefined) => void;
+/**
+ * The `aria-labelledby` of a grid or table: its own label, else the heading of
+ * the surrounding `Section` once that heading renders.
+ */
+export declare const useLabelledBySectionHeading: (props: {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}) => string | undefined;
+export {};

package/dist/types/lib/theming/hooks/useDesignTokens.d.ts

@@ -6715,6 +6715,12 @@ export declare const useDesignTokens: () => {
             path: string[];
         };
     };
+    texture: {
+        grain: {
+            value: string;
+            path: string[];
+        };
+    };
     "file-card": {
         "padding-x": {
             value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.6.0-next.2",
+  "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.2",
+    "@mittwald/flow-icons": "^1.6.0-next.21",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.6.0-next.2",
+    "@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.2",
-    "@mittwald/flow-core": "1.6.0-next.2",
-    "@mittwald/flow-design-tokens": "1.6.0-next.2",
-    "@mittwald/flow-icons-base": "1.6.0-next.2",
+    "@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.2",
+    "@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",
@@ -155,7 +155,7 @@
     "@storybook/react-vite": "^10.5.10",
     "@tabler/icons-react": "^3.46.0",
     "@teispace/next-themes": "^2.0.4",
-    "@types/node": "25.9.8",
+    "@types/node": "25.9.9",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "5.2.0",
     "@vitest/browser": "^4.1.11",
@@ -170,7 +170,7 @@
     "happy-dom": "^20.11.6",
     "next": "^16.3.2",
     "nx": "^22.7.5",
-    "postcss": "8.5.28",
+    "postcss": "8.5.29",
     "postcss-nested-import": "^1.3.0",
     "postcss-nesting": "^14.0.1",
     "postcss-scss": "^4.0.9",
@@ -199,7 +199,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.6.0-next.2",
+    "@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": "7176262a022447c9bdee94a504c96eb7bfdad930"
+  "gitHead": "c75ca489f4a68d285b3a7513fab391ef31978680"
 }