prime-ui-kit 0.12.0 → 0.13.1

package/dist/components/chat-list/ChatList.d.ts

@@ -0,0 +1,191 @@
+import * as React from "react";
+import { type DropdownContentProps } from "../dropdown/Dropdown";
+import { type ListItemProps } from "../list/List";
+import type { MessageStatus } from "../message/Message";
+import { type ControlSize } from "../../internal/states";
+export { formatChatTime } from "./formatChatTime";
+/** What the last message of a dialog is when it is not text: the word the preview shows. */
+export type ChatListMediaKind = "photo" | "video" | "voice" | "videoNote" | "file" | "location" | "contact";
+export type ChatListLabels = {
+    /** `aria-label` of the list. */
+    list: string;
+    /** `aria-label` of the search field. */
+    search: string;
+    /** Placeholder of the search field. */
+    searchPlaceholder: string;
+    /** Announced while `loading`. */
+    loading: string;
+    /** The empty state without a search. */
+    empty: string;
+    /** The empty state of a search; announced. */
+    noResults: string;
+    /** Announced after a search changes the list; `{count}` — the dialogs found. */
+    results: string;
+    /** The preview while the other side types (`typing`). */
+    typing: string;
+    /** The preview while someone in a group types (`typing="Анна"`); `{name}` — who. */
+    typingName: string;
+    /** Before an unsent draft in the preview. */
+    draft: string;
+    /** Spoken for the unread count; `{count}` — the number. */
+    unread: string;
+    /** Spoken for the «@» mark (`mention`). */
+    mention: string;
+    /** Name of the muted glyph (`muted`). */
+    muted: string;
+    /** Name of the pin glyph (`pinned`). */
+    pinned: string;
+    /** Delivery of the reader's last message, as `Message` says it. */
+    sending: string;
+    sent: string;
+    read: string;
+    failed: string;
+    /** Media words of the preview (`ChatList.ItemDescription kind`). */
+    photo: string;
+    video: string;
+    voice: string;
+    videoNote: string;
+    file: string;
+    location: string;
+    contact: string;
+    /** `aria-label` of the point the row menu opens from. */
+    menu: string;
+};
+export type ChatListItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Before the name: an `Avatar.Root` (sized by the row). After it: a small `Icon`. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * The avatar of the dialog before `ChatList.ItemText`; after it, a glyph beside the name (a
+ * verified mark, a bot). Drawn by `ChatList.Item`.
+ */
+declare function ChatListItemIcon(_props: ChatListItemIconProps): React.ReactNode;
+declare namespace ChatListItemIcon {
+    var displayName: string;
+}
+export type ChatListItemTextProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The name of the dialog: one line, truncated; the search query is marked in it. */
+declare function ChatListItemText(_props: ChatListItemTextProps): React.ReactNode;
+declare namespace ChatListItemText {
+    var displayName: string;
+}
+export type ChatListItemDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** Who wrote the last message: «Вы», a member of a group. Shown as «{author}: » before it. */
+    author?: string;
+    /** The last message is not text: its word («Фото», «Голосовое сообщение») leads the preview. */
+    kind?: ChatListMediaKind;
+    /** Length of a voice or video message, seconds: «Голосовое сообщение 0:42». */
+    duration?: number;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * The preview of the last message, one line: the author, the media word and the text (a caption,
+ * a file name). The search query is marked in the text. Drawn by `ChatList.Item`.
+ */
+declare function ChatListItemDescription(_props: ChatListItemDescriptionProps): React.ReactNode;
+declare namespace ChatListItemDescription {
+    var displayName: string;
+}
+export type ChatListItemMenuProps = Omit<DropdownContentProps, "side" | "align" | "matchTriggerWidth">;
+/**
+ * The menu of a dialog: your `Dropdown.Item`s (Закрепить, Без звука, Отметить прочитанным,
+ * Удалить — the last one `tone="danger"`). Opens where the pointer is on right click, on a long
+ * press, and from the keyboard (Shift+F10, the menu key).
+ */
+declare function ChatListItemMenu({ children, ...rest }: ChatListItemMenuProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatListItemMenu {
+    var displayName: string;
+}
+type ChatListItemOwnProps = {
+    /** When the last message was sent: a `Date` (shown with the root's `formatTime`) or the text to show. */
+    time?: Date | string;
+    /** Delivery of the reader's own last message: ✓ sent, ✓✓ read, the clock, or failed. */
+    status?: MessageStatus;
+    /** Unread messages: the count at the end of the row. Default 0. */
+    unread?: number;
+    /** The reader is mentioned among the unread: an «@» beside the count. */
+    mention?: boolean;
+    /** Notifications are off: a muted glyph beside the name and a gray count. */
+    muted?: boolean;
+    /** Pinned by the reader: a pin at the end of the row while nothing is unread. */
+    pinned?: boolean;
+    /**
+     * The other side types: the preview turns into «печатает…» in the accent, and back. A name
+     * («Анна») for a group: «Анна печатает…».
+     */
+    typing?: boolean | string;
+    /** The reader's unsent text: the preview shows «Черновик:» and the text. */
+    draft?: string;
+    /**
+     * `ChatList.ItemIcon` (the avatar; after the name — a glyph), `ChatList.ItemText`,
+     * `ChatList.ItemDescription`, `ChatList.ItemMenu`.
+     */
+    children?: React.ReactNode;
+};
+export type ChatListItemProps = ChatListItemOwnProps & Omit<ListItemProps, keyof ChatListItemOwnProps | "value" | "current" | "asChild" | "disabled">;
+/**
+ * A dialog: a `List.Item` row (a button, or a link with `href`) with the avatar, the name and the
+ * time on the first line, the preview and the counts on the second. Its key and `current` come
+ * from `ChatList.Root`.
+ */
+declare function ChatListItem({ time, status, unread, mention, muted, pinned, typing, draft, className, children, onClick, onKeyDown, onFocus, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ref, ...rest }: ChatListItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatListItem {
+    var displayName: string;
+}
+export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "children"> & {
+    /** Dialogs as application data, in the order to show (pinned first, then by the last message). */
+    items: readonly T[];
+    /** A stable key of a dialog: the `value` of its row. */
+    getKey: (item: T) => string;
+    /** Renders a dialog: a `ChatList.Item` with its parts. */
+    renderItem: (item: T) => React.ReactElement;
+    /** The open dialog (controlled); `null` — none. */
+    value?: string | null;
+    /** The dialog open at first (uncontrolled). Default `null`. */
+    defaultValue?: string | null;
+    /** The reader opened a dialog: a click, a tap, Enter or Space on its row. */
+    onValueChange?: (value: string) => void;
+    /** The search query (controlled). Any of the triad shows the search field. */
+    search?: string;
+    /** The initial query (uncontrolled). */
+    defaultSearch?: string;
+    /** The query changed: filter `items` by it (the list marks the matches). */
+    onSearchChange?: (search: string) => void;
+    /** The first load: placeholder rows in the rows' geometry, then a cross-fade into the dialogs. */
+    loading?: boolean;
+    /** More dialogs exist: a placeholder row ends the list and `onLoadMore` runs near the end. */
+    hasMore?: boolean;
+    /** The reader scrolled near the end while `hasMore`: load the next dialogs and append them. */
+    onLoadMore?: () => void | Promise<void>;
+    /** The empty state without a search. Default: «Нет диалогов». */
+    empty?: React.ReactNode;
+    /** Row tier: height, text, avatar, the search field. Default `m`. */
+    size?: ControlSize;
+    /** «Now» for the times. Default: the moment of the render. */
+    now?: Date;
+    /** Display of a `Date` time. Default `formatChatTime`: «14:32», «пн», «12 мар». */
+    formatTime?: (date: Date, now: Date) => string;
+    labels?: Partial<ChatListLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The conversation list of a messenger: the dialogs as data, each drawn by `renderItem` as a
+ * `ChatList.Item`, the open one `value`. An optional search field on top, rows that glide to their
+ * new places when the order changes, a long list rendered only around the view, placeholder rows
+ * while loading and more dialogs loaded near the end. Draws no surface: put it in a pane.
+ */
+declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size, now: nowProp, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ChatListRoot {
+    var displayName: string;
+}
+export declare const ChatList: {
+    Root: typeof ChatListRoot;
+    Item: typeof ChatListItem;
+    ItemIcon: typeof ChatListItemIcon;
+    ItemText: typeof ChatListItemText;
+    ItemDescription: typeof ChatListItemDescription;
+    ItemMenu: typeof ChatListItemMenu;
+};

package/dist/components/chat-list/formatChatTime.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The time of a dialog's last message, as a messenger shows it: today «14:32», within the last
+ * six days the weekday «пн», earlier this year «12 мар», another year «12.03.2025». The default
+ * `ChatList.Root formatTime`.
+ */
+export declare function formatChatTime(date: Date, now: Date): string;

package/dist/components/command-menu/CommandMenu.d.ts

@@ -119,11 +119,16 @@ export type CommandMenuItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonEle
     keywords?: string;
     /** Unavailable right now: shown muted with `aria-disabled`, skipped by the arrows, not runnable. */
     disabled?: boolean;
+    /**
+     * Shown whatever the query and never counted as a match (the match count, `CommandMenu.Empty`);
+     * the arrows reach it after the matches. For one «create from the query» item at the end.
+     */
+    persistent?: boolean;
     /** Runs the command: a click, or Enter while the item is active. */
     onSelect?: () => void;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function CommandMenuItem({ className, value, keywords, disabled, onSelect, onClick, onPointerMove, ref, children, ...rest }: CommandMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function CommandMenuItem({ className, value, keywords, disabled, persistent, onSelect, onClick, onPointerMove, ref, children, ...rest }: CommandMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CommandMenuItem {
     var displayName: string;
 }
@@ -154,15 +159,15 @@ declare function CommandMenuItemShortcut({ className, ...rest }: CommandMenuItem
 declare namespace CommandMenuItemShortcut {
     var displayName: string;
 }
-export type CommandMenuEmptyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & {
+export type CommandMenuEmptyProps = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "children"> & {
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
  * Shown only while nothing matches the query and nothing loads: `labels.empty` and
- * `labels.emptyHint`; `children` is an action under them — a button, or a `CommandMenu.Item`
- * («Создать «…»») that the arrows and Enter reach and that never counts as a match.
+ * `labels.emptyHint`, text only. An action for the query («Создать «…»») is a `persistent`
+ * `CommandMenu.Item` at the end of the list, never a child of `Empty`.
  */
-declare function CommandMenuEmpty({ children, ...rest }: CommandMenuEmptyProps): import("react/jsx-runtime").JSX.Element | null;
+declare function CommandMenuEmpty(props: CommandMenuEmptyProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace CommandMenuEmpty {
     var displayName: string;
 }

package/dist/components/composer/Composer.d.ts

@@ -2,10 +2,11 @@ import * as React from "react";
 import type { UploadItem, UploadQueue } from "../../hooks/useUploadQueue";
 import { type MediaKind } from "../../internal/mediaKind";
 import { type ControlSize } from "../../internal/states";
+import { type TextFormattingLabels } from "../../internal/textFormatting";
 import { type ComposerRecording, type ComposerRecordMode } from "./useRecorder";
-export type { ComposerFormat } from "./format";
 export type { ComposerRecording, ComposerRecordMode } from "./useRecorder";
-export type ComposerLabels = {
+/** Every built-in string; the formatting toolbar's names are shared with Textarea. */
+export type ComposerLabels = TextFormattingLabels & {
     /** Accessible name of the composer `<form>`. */
     region: string;
     /** Placeholder and accessible name of the message field. */
@@ -60,14 +61,6 @@ export type ComposerLabels = {
     attachments: string;
     /** The option that sends the attached photos and videos as files, uncompressed. */
     sendAsFiles: string;
-    /** Accessible name of the formatting toolbar. */
-    formatting: string;
-    bold: string;
-    italic: string;
-    strikethrough: string;
-    code: string;
-    link: string;
-    quote: string;
     /** Name of the close button of a reply bar. */
     cancelReply: string;
     /** Name of the close button of an edit bar. */

package/dist/components/data-table/DataTable.d.ts

@@ -4,7 +4,7 @@ import { DataTableColumnsMenu } from "./ColumnsMenu";
 import type { DataTableColumn, DataTableGroup, DataTableRowClickEvent, DataTableSortState } from "./types";
 export type { DataTableColumnsMenuProps } from "./ColumnsMenu";
 export type { DataTableColumn, DataTableGroup, DataTableOrder, DataTableRowClickEvent, DataTableSortState, } from "./types";
-/** System strings; `{from}`, `{to}`, `{total}`, `{label}`, `{count}` are replaced. */
+/** System strings; `{from}`, `{to}`, `{total}`, `{label}`, `{count}`, `{group}` are replaced. */
 export type DataTableLabels = {
     /** Screen-reader announcement while skeleton rows are shown. */
     loading: string;
@@ -34,6 +34,10 @@ export type DataTableLabels = {
     reorderRow: string;
     /** Tooltip of the handles while the table is sorted by a column (reordering is off). */
     reorderSorted: string;
+    /** `aria-label` of the toggle of a collapsed group; `{group}` is the group key. */
+    expandGroup: string;
+    /** `aria-label` of the toggle of an expanded group; `{group}` is the group key. */
+    collapseGroup: string;
 };
 export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /** The outer card-fill `<div>`. */
@@ -166,8 +170,18 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
     renderGroupHeader?: (group: DataTableGroup<Row>) => React.ReactNode;
     /** Group header rows stick under the head while their rows scroll. */
     stickyGroupHeaders?: boolean;
+    /**
+     * Keys of the collapsed groups, controlled. Passing any of `collapsedGroups`,
+     * `defaultCollapsedGroups`, `onCollapsedGroupsChange` makes groups fold: each group header gets
+     * a disclosure toggle and its rows fold away and back.
+     */
+    collapsedGroups?: (string | number)[];
+    /** Initially collapsed group keys, uncontrolled (`[]` — every group open, but foldable). */
+    defaultCollapsedGroups?: (string | number)[];
+    /** The collapsed group keys changed (a group header toggle). */
+    onCollapsedGroupsChange?: (collapsedGroups: (string | number)[]) => void;
 };
-export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, rows, source, rowCount, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, error, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, rows, source, rowCount, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, error, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DataTable {
     var ColumnsMenu: typeof DataTableColumnsMenu;
 }

package/dist/components/data-table/Row.d.ts

@@ -47,8 +47,10 @@ type DataTableRowProps<Row> = {
     expandable: boolean;
     expanded: boolean;
     animate: boolean;
-    /** A sub-row of a row that is collapsing: it folds away before it unmounts. */
+    /** A row of a collapsing parent or group: it folds away before it unmounts. */
     folding?: boolean;
+    /** The row folds open and shut: a sub-row, or a row of a collapsible group. */
+    foldable?: boolean;
     /** The detail panel opened by the latest expand: it drops in. */
     detailAnimate: boolean;
     selected: boolean;
@@ -59,28 +61,42 @@ type DataTableRowProps<Row> = {
     /** A virtualized body: the row's position among all rows of the table, head included. */
     ariaRowIndex?: number | undefined;
 };
-declare function DataTableRowImpl<Row>({ shared, row, rowKey, rowLabel, opens, href, index, depth, expandable, expanded, animate, folding, detailAnimate, selected, childControls, measureRef, ariaRowIndex, }: DataTableRowProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableRowImpl<Row>({ shared, row, rowKey, rowLabel, opens, href, index, depth, expandable, expanded, animate, folding, foldable, detailAnimate, selected, childControls, measureRef, ariaRowIndex, }: DataTableRowProps<Row>): import("react/jsx-runtime").JSX.Element;
 /** A body row (plus its detail panel); re-renders only when its own props change. */
 export declare const DataTableRow: typeof DataTableRowImpl;
+/** The disclosure toggle of a collapsible group (`collapsedGroups`). */
+export type GroupToggle = {
+    collapsed: boolean;
+    /** `labels.expandGroup` / `labels.collapseGroup` with `{group}` filled in. */
+    label: string;
+    /** Ids of the group's rows on screen (while expanded). */
+    controls: string | undefined;
+    onToggle: () => void;
+};
 type GroupRowProps = {
     totalColumns: number;
     sticky: boolean;
+    size: ControlSize;
+    toggle?: GroupToggle | undefined;
     children: React.ReactNode;
 };
 /**
  * The header row of a group (`getRowGroup`): a `<th scope="rowgroup">` across every column at the
- * head of its own `<tbody>`. Its content stays in the visible width while the table scrolls sideways.
+ * head of its own `<tbody>`, led by a disclosure toggle when groups fold. Its content stays in the
+ * visible width while the table scrolls sideways.
  */
-export declare function GroupRow({ totalColumns, sticky, children }: GroupRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function GroupRow({ totalColumns, sticky, size, toggle, children }: GroupRowProps): import("react/jsx-runtime").JSX.Element;
 type MeasureBodyProps<Row> = {
     rows: MeasureRow<Row>[];
     columns: DataTableColumn<Row>[];
     selectable: boolean;
     expandEnabled: boolean;
+    /** A leading column of row handles (`onReorder`). */
+    reorderable: boolean;
 };
 /**
- * Sub-rows of collapsed rows, laid out invisibly so the columns are already as wide as they will
- * be once a row opens; never shown or reachable.
+ * Sub-rows of collapsed rows and rows of collapsed groups, laid out invisibly so the columns are
+ * already as wide as they will be once a row or group opens; never shown or reachable.
  */
-export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, reorderable, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/StateRows.d.ts

@@ -15,6 +15,10 @@ type StateRowsProps<Row> = {
     emptyLabel: string;
     skeletonRows: number;
 };
-/** The body of the loading (skeleton rows), empty and error states. */
+/**
+ * The body of the loading (skeleton rows), empty and error states. The empty and error content sits
+ * in a sticky box of the visible width, so a wide table centres it in the viewport, not across
+ * every column.
+ */
 export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable, error, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
 export {};

package/dist/components/data-table/reorder.d.ts

@@ -77,10 +77,12 @@ type HandleCellProps = {
     rowKey: React.Key;
     rowLabel: string | undefined;
     className?: string | undefined;
+    /** Wraps the content like the row's other cells (the fold of a collapsible group's row). */
+    wrap?: (node: React.ReactNode) => React.ReactNode;
 };
 /**
  * The leading cell of a reorderable row: the grip (Alt + ↑ / ↓ from the keyboard), a spinner while
  * the owner saves this row's move, and, while the table is sorted, a disabled grip that says why.
  */
-export declare function ReorderHandleCell({ reorder, rowKey, rowLabel, className }: HandleCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReorderHandleCell({ reorder, rowKey, rowLabel, className, wrap }: HandleCellProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/rows.d.ts

@@ -28,16 +28,22 @@ export type FlatRow<Row> = {
     expanded: boolean;
     /** Mounted by the latest expand, or newly added to `rows`: plays the enter animation. */
     animate: boolean;
-    /** A sub-row of a row that is collapsing: still drawn while it folds away. */
+    /** A row of a collapsing parent or group: still drawn while it folds away. */
     folding: boolean;
-    /** Top-level row that opens a group on screen (`groupOf`): the group's key. */
-    groupStart?: string | number;
+    /** The row folds open and shut: a sub-row, or a row of a collapsible group. */
+    foldable: boolean;
 };
 export type MeasureRow<Row> = {
     row: Row;
     key: React.Key;
     depth: number;
 };
+/** A run of rows of one group on screen: its key and the range of its rows in `rows`. */
+export type GroupRun = {
+    key: string | number;
+    start: number;
+    end: number;
+};
 export type FlattenOptions<Row> = {
     /** Top-level rows in `[start, end)` are rendered; the rest only contribute keys. */
     start: number;
@@ -59,8 +65,16 @@ export type FlattenOptions<Row> = {
     lastExpandedKey: React.Key | null;
     /** Collect every key of the data (all pages, all depths) for «select all». */
     collectKeys: boolean;
-    /** Group key of a top-level row: the first rendered row of each group run opens it. */
+    /** Group key of a top-level row: consecutive rows of one group on screen make a run. */
     groupOf?: (row: Row) => string | number;
+    /** Groups fold (`collapsedGroups`): their rows fold open and shut. */
+    foldGroups?: boolean;
+    /** Collapsed groups: their rows are not drawn (only measured for the column widths). */
+    collapsedGroups?: ReadonlySet<string | number>;
+    /** Groups collapsed a moment ago: their rows stay drawn (folding) until the fold ends. */
+    closingGroups?: ReadonlySet<string | number>;
+    /** Group whose latest expand mounted its rows: they fold open. */
+    openedGroup?: string | number | null;
 };
 export type Flattened<Row> = {
     /** Rendered rows in order: the page rows plus the sub-rows of expanded rows. */
@@ -72,6 +86,8 @@ export type Flattened<Row> = {
     measure: MeasureRow<Row>[];
     /** Every row id in the data: the scope of «select all» (empty without `collectKeys`). */
     keys: React.Key[];
+    /** Group runs on screen in order (`groupOf`); a collapsed group's run holds no rows. */
+    runs: GroupRun[];
 };
 /**
  * One walk over the sorted data. Sub-rows are sorted like the top level and keyed the same way in

package/dist/components/file-upload/FileUpload.d.ts

@@ -29,6 +29,11 @@ export type FileUploadFile = {
     src?: string;
     /** What the picture shows: spoken in place of the name, never drawn. */
     alt?: string;
+    /**
+     * The file's address on the server: the row's name or the whole tile becomes a link that opens it
+     * in a new tab (the server's `Content-Disposition` decides open or download).
+     */
+    href?: string;
 };
 export type FileUploadLabels = {
     /** Title of the built-in drop zone body. */
@@ -67,6 +72,8 @@ export type FileUploadLabels = {
     retry: string;
     /** Name of the remove button of a file: `{name}`. */
     remove: string;
+    /** Name of a tile's link to the file (`href`): `{name}`. */
+    open: string;
     /** Live region: a file was removed: `{name}`. */
     removed: string;
     /** Live region: a reorder put another file first, the new cover: `{name}`. */

package/dist/components/gantt/Gantt.d.ts

@@ -3,6 +3,8 @@ import * as React from "react";
 import type { ControlSize } from "../../internal/states";
 import { type GanttBar, type GanttDates, type GanttScale } from "./ganttModel";
 export type { GanttBar, GanttDates, GanttScale } from "./ganttModel";
+/** What opened a row: a click on its header, or Enter / Space on the focused header. */
+export type GanttRowClickEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
 /** System strings; `{label}`, `{start}`, `{end}`, `{date}`, `{progress}` are replaced. */
 export type GanttLabels = {
     /** Heading of the first column. */
@@ -55,6 +57,22 @@ export type GanttProps<Row, Bar extends GanttBar = GanttBar> = Omit<React.HTMLAt
     renderRow?: (row: Row) => React.ReactNode;
     /** A picture before the row content (an `Avatar`); on a narrow chart the column keeps only it. */
     renderRowAvatar?: (row: Row) => React.ReactNode;
+    /**
+     * The row header is a link: a real `<a>` fills the first column and is the row's stop in the
+     * grid, so a click, ⌘/Ctrl-click, a middle click and «open in new tab» work on it.
+     */
+    getRowHref?: (row: Row) => string;
+    /**
+     * Opens a row in place: a click on its header (never on a control inside it, never from a
+     * portal) or Enter / Space on the focused header. With `getRowHref` it gets the plain clicks
+     * only — call `event.preventDefault()` there to route in the app instead of loading the page.
+     */
+    onRowClick?: (row: Row, event: GanttRowClickEvent) => void;
+    /**
+     * Extra content of a bar's tooltip, under its title and the dates line (which always stay: the
+     * dates are what the bar means on the axis). A client, hours, an owner.
+     */
+    renderBarTooltip?: (bar: Bar, row: Row) => React.ReactNode;
     /** Zoom, controlled. */
     scale?: GanttScale;
     /** Initial zoom, uncontrolled. */
@@ -99,4 +117,4 @@ export type GanttProps<Row, Bar extends GanttBar = GanttBar> = Omit<React.HTMLAt
  * keyboard through an async `onBarChange`, and are drawn on empty space through `onBarCreate`.
  * Rows and the time axis are virtualized: thousands of rows over years stay fast.
  */
-export declare function Gantt<Row, Bar extends GanttBar = GanttBar>({ rows, getRowKey, getRowLabel, getRowBars, renderRow, renderRowAvatar, scale: scaleProp, defaultScale, onScaleChange, range: rangeProp, today: todayProp, locale, size, readOnly, loading, empty, toolbar, scrollHeight, onSelect, onBarChange, onBarCreate, labels: labelsProp, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: GanttProps<Row, Bar>): import("react/jsx-runtime").JSX.Element;
+export declare function Gantt<Row, Bar extends GanttBar = GanttBar>({ rows, getRowKey, getRowLabel, getRowBars, renderRow, renderRowAvatar, getRowHref, onRowClick, renderBarTooltip, scale: scaleProp, defaultScale, onScaleChange, range: rangeProp, today: todayProp, locale, size, readOnly, loading, empty, toolbar, scrollHeight, onSelect, onBarChange, onBarCreate, labels: labelsProp, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: GanttProps<Row, Bar>): import("react/jsx-runtime").JSX.Element;

package/dist/components/gantt/GanttBar.d.ts

@@ -1,4 +1,5 @@
 import type { Locale } from "date-fns";
+import * as React from "react";
 import { type GanttBar, type GanttDates, type GanttScale } from "./ganttModel";
 export type GanttBarViewProps = {
     bar: GanttBar;
@@ -13,6 +14,8 @@ export type GanttBarViewProps = {
     nameFor: (dates: GanttDates) => string;
     /** «14 дн.» — the duration in the tooltip. */
     formatDuration: (days: number) => string;
+    /** `renderBarTooltip`: extra tooltip content under the dates line. */
+    renderTip?: () => React.ReactNode;
     editable: boolean;
     pending: boolean;
     /** The roving tab stop of the chart. */
@@ -48,4 +51,4 @@ export type GanttBarViewProps = {
  * edge at the week and month zoom, and the tooltip shows the new dates. Release commits through
  * `onCommit`; Escape or a cancelled pointer drops it. On touch a long press picks the bar up.
  */
-export declare function GanttBarView({ bar, dates, x, lane, scale, locale, nameFor, formatDuration, editable, pending, active, hintId, dayPx, direction, scrollLeft, autoScroll, onActivate, onFocusBar, onTipChange, canShowTip, onCommit, onDragChange, barRef, }: GanttBarViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function GanttBarView({ bar, dates, x, lane, scale, locale, nameFor, formatDuration, renderTip, editable, pending, active, hintId, dayPx, direction, scrollLeft, autoScroll, onActivate, onFocusBar, onTipChange, canShowTip, onCommit, onDragChange, barRef, }: GanttBarViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/gantt/GanttRow.d.ts

@@ -16,6 +16,8 @@ export type GanttRowContext = {
     register: (id: string) => (node: HTMLElement | null) => void;
     focus: (id: string) => void;
     select: (barId: string, rowIndex: number) => void;
+    /** `onRowClick` of the row at `rowIndex`. */
+    openRow: (rowIndex: number, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     commit: (barId: string, rowIndex: number, dates: GanttDates) => void;
     nameFor: (bar: GanttBar, dates: GanttDates) => string;
     formatDuration: (days: number) => string;
@@ -47,6 +49,11 @@ export type GanttRowProps = {
     row: unknown;
     renderRow?: (row: unknown) => React.ReactNode;
     renderRowAvatar?: (row: unknown) => React.ReactNode;
+    renderBarTooltip?: (bar: GanttBar, row: unknown) => React.ReactNode;
+    /** `getRowHref(row)`: the header is a link. */
+    href: string | undefined;
+    /** `onRowClick` is set: the header opens the row. */
+    clickable: boolean;
     ghost: GanttGhost | undefined;
     ghostLane: number;
     hover: {
@@ -69,7 +76,7 @@ export type GanttRowProps = {
     hintId: string;
     createHintId: string;
 };
-declare function GanttRowView({ ctx, index, navId, label, bars, lanes, laneCount, top, measureRef, row, renderRow, renderRowAvatar, ghost, ghostLane, hover, tabStop, pending, dragging, windowFrom, windowTo, scale, rangeStart, locale, newBarLabel, editableAtAll, creatable, hintId, createHintId, }: GanttRowProps): import("react/jsx-runtime").JSX.Element;
+declare function GanttRowView({ ctx, index, navId, label, bars, lanes, laneCount, top, measureRef, row, renderRow, renderRowAvatar, renderBarTooltip, href, clickable, ghost, ghostLane, hover, tabStop, pending, dragging, windowFrom, windowTo, scale, rangeStart, locale, newBarLabel, editableAtAll, creatable, hintId, createHintId, }: GanttRowProps): import("react/jsx-runtime").JSX.Element;
 /** One row of the chart: memoized, so scrolling renders only the rows that come into view. */
 export declare const GanttRow: React.MemoExoticComponent<typeof GanttRowView>;
 export {};