@mittwald/flow-react-components 1.6.0-next.3 → 1.6.0-next.30

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/components/Wrap/Wrap.d.ts

@@ -1,6 +1,11 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
 export interface WrapProps {
+    /**
+     * Whether the child element is rendered. Any truthy value keeps it, a falsy
+     * one renders only its children.
+     */
     if: unknown;
+    /** The element that wraps the content, with the content as its children. */
     children: ReactElement<PropsWithChildren>;
 }
 export declare const Wrap: FC<WrapProps>;

package/dist/types/index/flr-universal.d.ts

@@ -1,5 +1,5 @@
 export * from '../components/Icon/components/icons';
-export { Action, ActionBatch, type ActionFn, type ActionProps, BrowserOnly, type BrowserOnlyProps, ComponentDefaultsProvider, type ComponentDefaultsProviderProps, CountryOptions, type CountryOptionsProps, DeprecationWarningProvider, type DeprecationWarningHandler, type DeprecationWarningProviderProps, IntlProvider, LightBox, type LightBoxProps, LightBoxTrigger, type LightBoxTriggerProps, List, type ListProps, ListItemView, type ListItemViewProps, Modal, type ModalProps, ModalTrigger, type ModalTriggerProps, Popover, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, SettingsProvider, typedList, NotificationProvider, type NotificationProviderProps, Wrap, type WrapProps, } from '../components/public';
+export { Action, ActionBatch, type ActionFn, type ActionProps, BrowserOnly, type BrowserOnlyProps, ComponentDefaultsProvider, type ComponentDefaultsProviderProps, CountryOptions, type CountryOptionsProps, DeprecationWarningProvider, type DeprecationWarningHandler, type DeprecationWarningProviderProps, IntlProvider, LightBox, type LightBoxProps, LightBoxTrigger, type LightBoxTriggerProps, List, type ListProps, ListItemView, type ListItemViewProps, Modal, type ModalProps, ModalTrigger, type ModalTriggerProps, Popover, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, resolveDateRangeFilterValue, type DateRangeFilterValue, SettingsProvider, typedList, NotificationProvider, type NotificationProviderProps, Wrap, type WrapProps, } from '../components/public';
 export * from '../lib/controller/public';
 export * from '../lib/hooks/public';
 export { useControlledRemoteValueProps } from '../lib/remote/useControlledRemoteValueProps';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.6.0-next.3",
+  "version": "1.6.0-next.30",
   "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.3",
+    "@mittwald/flow-icons": "^1.6.0-next.30",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.6.0-next.3",
+    "@mittwald/react-tunnel": "^1.6.0-next.30",
     "@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.3",
-    "@mittwald/flow-core": "1.6.0-next.3",
-    "@mittwald/flow-design-tokens": "1.6.0-next.3",
-    "@mittwald/flow-icons-base": "1.6.0-next.3",
+    "@mittwald/flow-components-base": "1.6.0-next.30",
+    "@mittwald/flow-core": "1.6.0-next.30",
+    "@mittwald/flow-design-tokens": "1.6.0-next.30",
+    "@mittwald/flow-icons-base": "1.6.0-next.30",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.6.0-next.3",
+    "@mittwald/typescript-config": "1.6.0-next.30",
     "@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.3",
+    "@mittwald/flow-icons-pro": "1.6.0-next.30",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -223,5 +223,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "d89945117ece0dc0a3ba3aca063be43231b9138a"
+  "gitHead": "e508cff063cd3184b66a56fbd8ac92e611c9ac38"
 }

package/dist/js/packages/components/src/lib/date/transformDateValueToFormattedDate.mjs

@@ -1,10 +0,0 @@
-"use client"
-/* */
-//#region src/lib/date/transformDateValueToFormattedDate.tsx
-var transformDateValueToFormattedDate = (date) => {
-	return new Date(date.year, date.month - 1, date.day).toLocaleDateString();
-};
-//#endregion
-export { transformDateValueToFormattedDate };
-
-//# sourceMappingURL=transformDateValueToFormattedDate.mjs.map

package/dist/js/packages/components/src/lib/date/transformDateValueToFormattedDate.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"transformDateValueToFormattedDate.mjs","names":[],"sources":["../../../../../../../src/lib/date/transformDateValueToFormattedDate.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\n\nexport const transformDateValueToFormattedDate = (date: DateValue) => {\n  return new Date(date.year, date.month - 1, date.day).toLocaleDateString();\n};\n"],"mappings":";;;AAEA,IAAa,qCAAqC,SAAoB;CACpE,OAAO,IAAI,KAAK,KAAK,MAAM,KAAK,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC,mBAAmB;AAC1E"}

package/dist/types/lib/date/transformDateValueToDateTime.d.ts

@@ -1,3 +0,0 @@
-import { DateValue } from '@internationalized/date';
-import { DateTime } from 'luxon';
-export declare const transformDateValueToDateTime: (date: DateValue) => DateTime<true> | DateTime<false>;

package/dist/types/lib/date/transformDateValueToFormattedDate.d.ts

@@ -1,2 +0,0 @@
-import { DateValue } from '@internationalized/date';
-export declare const transformDateValueToFormattedDate: (date: DateValue) => string;