@acronis-platform/ui-react 0.56.1 → 0.57.1

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/components/ui/bar-chart/bar-chart.d.ts

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import { ChartConfig } from '../chart';
+import * as React from 'react';
+declare const barChartVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    layout?: "grouped" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof barChartVariants> {
+    /** Row-per-category data. Each object holds the category key + one numeric field per series. */
+    data: ReadonlyArray<Record<string, string | number>>;
+    /**
+     * Per-series map of `label` / `color` (imported from the shared `Chart`
+     * primitives). Series colors are caller-supplied — reference an existing
+     * semantic `--ui-*` token; there is no chart palette tier yet.
+     */
+    config: ChartConfig;
+    /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */
+    dataKeys: string[];
+    /** Category axis key (the shared dimension across rows, e.g. `"month"`). */
+    xKey: string;
+    /** Corner radius applied to the growing end of each bar. */
+    barRadius?: number;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+}
+declare const BarChart: React.ForwardRefExoticComponent<Omit<BarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { BarChart, barChartVariants };

package/dist/src/components/ui/bar-chart/index.d.ts

@@ -0,0 +1 @@
+export { BarChart, barChartVariants, type BarChartProps } from './bar-chart';

package/dist/src/components/ui/data-table/data-table.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { ColumnDef, ColumnSizingState, OnChangeFn, Row, RowData, VisibilityState } from '@tanstack/react-table';
+import { CSSProperties, ReactNode } from 'react';
+import { Cell, Column, ColumnDef, ColumnSizingState, OnChangeFn, Row, RowData, SortingState, Table as TanstackTable, VisibilityState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Pin the column to a table edge (sticky while the grid scrolls horizontally). */
@@ -11,6 +11,9 @@ declare module '@tanstack/react-table' {
         wrap?: boolean;
     }
 }
+export declare function getPinnedStyle<TData>(column: Column<TData, unknown>): CSSProperties | undefined;
+export declare function getColumnWidth<TData>(column: Column<TData, unknown>, enableColumnResizing: boolean): number | undefined;
+export declare function getCellStyle<TData>(cell: Cell<TData, unknown>, enableColumnResizing: boolean): CSSProperties | undefined;
 /**
  * Computes the next column width for an Arrow-key resize step (Shift = larger
  * step), clamped to `[min, max]` regardless of which bound `currentSize`
@@ -22,9 +25,34 @@ export declare function getResizeKeyboardStep(key: string, currentSize: number,
     min: number;
     max: number;
 }): number | undefined;
-export interface DataTableProps<TData, TValue> {
+type DataTableDataSourceProps<TData, TValue> = {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    /**
+     * Also drive an externally-built TanStack `table` instance (e.g. a
+     * composed toolbar/pagination) from the same state as this DataTable.
+     */
+    table?: TanstackTable<TData>;
+} | {
+    columns?: ColumnDef<TData, TValue>[];
+    data?: TData[];
+    /**
+     * Render from an externally-built TanStack `table` instance instead of
+     * DataTable's own — DataTable then owns no state and renders the caller's
+     * instance as-is (sorting, filtering, pagination, row models, etc. are all
+     * configured on that instance). Makes `columns`/`data` unnecessary (they're
+     * only used to build DataTable's own instance) and the following props
+     * no-ops (configure the equivalent directly on the external instance
+     * instead): `columnVisibility`, `onColumnVisibilityChange`,
+     * `onColumnSizingChange`, `enableColumnResizing`, `getRowCanExpand`,
+     * `manualSorting`, `sorting`, `onSortingChange`, `paginationMode`,
+     * `onLoadMore`, `loadMoreRootMargin`, `hasNextPage`, `isLoadingMore`.
+     * `meta.pin`-driven column pinning is also skipped — pin/unpin the
+     * caller's own instance via TanStack's `column.pin()` directly.
+     */
+    table: TanstackTable<TData>;
+};
+interface DataTableOwnProps<TData> {
     /** Enables row expansion for rows that return true. Pair with `renderExpandedRow`. */
     getRowCanExpand?: (row: Row<TData>) => boolean;
     /**
@@ -58,5 +86,80 @@ export interface DataTableProps<TData, TValue> {
     columnVisibility?: VisibilityState;
     /** Passthrough for the `columnVisibility` state; pairs with `columnVisibility`. */
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    /**
+     * Opt out of client-side sorting — pass already-sorted `data` and drive
+     * sorting via `sorting`/`onSortingChange` (e.g. mapped to a server query by
+     * the caller). Mapping sort state to a query and refetching stays the
+     * caller's job; DataTable only skips its own comparator.
+     */
+    manualSorting?: boolean;
+    /**
+     * Controlled sorting state — pass this (with `onSortingChange`) to drive
+     * sorting externally. Uncontrolled (internal state) when omitted.
+     */
+    sorting?: SortingState;
+    /** Passthrough for the `sorting` state; pairs with `sorting`. */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /**
+     * Renders a full row, bypassing DataTable's default per-cell `flexRender`
+     * path entirely (no `<TableRow>`/cell-styling/pinning of DataTable's own).
+     * Use to swap in a custom, independently memoizable row component. The
+     * caller owns the row's markup and equality semantics — reuse the exported
+     * `getCellStyle`/`getPinnedStyle`/`getColumnWidth` helpers to match
+     * DataTable's default cell styling if desired.
+     *
+     * Also bypasses DataTable's `renderExpandedRow` handling — a row rendered
+     * via `renderRow` never gets an expanded-content row appended, even when
+     * `getRowCanExpand` returns true for it. Read `row.getIsExpanded()` and
+     * render the expanded content yourself if you need both.
+     */
+    renderRow?: (row: Row<TData>, rowIndex: number) => ReactNode;
+    /**
+     * Renders a custom empty state instead of the default "No results." row.
+     * Receives `hasFilters` (whether any column filter is currently applied) so
+     * the caller can distinguish "no data at all" from "no matches" — the
+     * actual copy/wording/localization stays the caller's job.
+     */
+    renderEmptyState?: (context: {
+        hasFilters: boolean;
+    }) => ReactNode;
+    /**
+     * `'page'` (default) keeps today's client-paginated behavior. `'infinite'`
+     * omits the paginated row model — `data` is assumed to be the full
+     * accumulated array the caller appends to on each `onLoadMore` — and
+     * renders a sentinel row that calls `onLoadMore` once it scrolls into view.
+     * Does not compose with virtualization; for a large accumulated list, use
+     * the `VirtualScrolling` recipe over the raw `Table` primitives instead.
+     */
+    paginationMode?: 'page' | 'infinite';
+    /**
+     * Called when the infinite-scroll sentinel intersects the viewport.
+     * `paginationMode="infinite"` only. The fetch-more call, cursor/offset
+     * tracking, dedup, and accumulating `data` stay the caller's job. Requires
+     * at least one row already rendered — an empty table with `data={[]}`
+     * cannot use the sentinel to drive its very first fetch; seed the first
+     * page yourself (e.g. on mount) and use `onLoadMore` for subsequent pages.
+     */
+    onLoadMore?: () => void;
+    /**
+     * Expands the sentinel's `IntersectionObserver` root margin (native CSS
+     * margin syntax, e.g. `'400px'`) so `onLoadMore` fires before the sentinel
+     * is literally visible — the closer the caller's fetch is to finishing by
+     * the time the user actually scrolls there, the less often the trailing
+     * loading row is seen. `paginationMode="infinite"` only; no-op when `table`
+     * is passed. How far this actually prefetches also depends on page size —
+     * a large margin with small pages can trigger several `onLoadMore` calls
+     * back-to-back as the user scrolls normally, which is expected.
+     */
+    loadMoreRootMargin?: string;
+    /** Whether more rows are available to load. `paginationMode="infinite"` only. */
+    hasNextPage?: boolean;
+    /**
+     * Whether a load is in flight — suppresses further `onLoadMore` calls and
+     * renders a trailing loading row. `paginationMode="infinite"` only.
+     */
+    isLoadingMore?: boolean;
 }
-export declare function DataTable<TData, TValue>({ columns, data, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export type DataTableProps<TData, TValue = unknown> = DataTableOwnProps<TData> & DataTableDataSourceProps<TData, TValue>;
+export declare function DataTable<TData, TValue = unknown>({ columns, data, table: externalTable, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, manualSorting, sorting: controlledSorting, onSortingChange, renderRow, renderEmptyState, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, isLoadingMore, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/data-table/data-table.docs.d.ts

@@ -1,10 +1,25 @@
 import { ReactNode } from 'react';
 /** Props for `DataTable`. */
 export interface DataTableProps {
-    /** TanStack column definitions — header/cell renderers and accessors. */
-    columns: unknown[];
-    /** The row data. */
-    data: unknown[];
+    /**
+     * TanStack column definitions — header/cell renderers and accessors. Required
+     * unless `table` (an externally-built instance) is passed.
+     */
+    columns?: unknown[];
+    /** The row data. Required unless `table` is passed. */
+    data?: unknown[];
+    /**
+     * Render from an externally-built TanStack `table` instance instead of
+     * DataTable's own — DataTable then owns no state and renders the caller's
+     * instance as-is. Makes `columns`/`data` unnecessary and the following props
+     * no-ops (configure the equivalent on the external instance instead):
+     * `columnVisibility`, `onColumnVisibilityChange`, `onColumnSizingChange`,
+     * `enableColumnResizing`, `getRowCanExpand`, `manualSorting`, `sorting`,
+     * `onSortingChange`, `paginationMode`, `onLoadMore`, `loadMoreRootMargin`,
+     * `hasNextPage`, `isLoadingMore`. `meta.pin`-driven column pinning is also
+     * skipped — pin/unpin the caller's own instance via TanStack's `column.pin()`.
+     */
+    table?: unknown;
     /** Enables row expansion for rows that return true; pair with `renderExpandedRow`. */
     getRowCanExpand?: (row: unknown) => boolean;
     /** Renders the detail content for an expanded row. */
@@ -19,4 +34,73 @@ export interface DataTableProps {
     skeleton?: boolean;
     /** Number of skeleton rows to render when `skeleton` is set (default 5). */
     skeletonRows?: number;
+    /**
+     * Opt in to interactive column resizing — renders a drag handle at the
+     * trailing edge of each resizable header (TanStack's native `columnResizing`).
+     */
+    enableColumnResizing?: boolean;
+    /** Passthrough for the `columnSizing` state so a consumer can persist widths. */
+    onColumnSizingChange?: (updater: unknown) => void;
+    /**
+     * Controlled column-visibility state — pass this (with
+     * `onColumnVisibilityChange`) to share one visibility state with an external
+     * `useReactTable` instance. Uncontrolled (internal state) when omitted.
+     */
+    columnVisibility?: unknown;
+    /** Passthrough for the `columnVisibility` state; pairs with `columnVisibility`. */
+    onColumnVisibilityChange?: (updater: unknown) => void;
+    /**
+     * Opt out of client-side sorting — pass already-sorted `data` and drive
+     * sorting via `sorting`/`onSortingChange` (e.g. mapped to a server query by
+     * the caller).
+     */
+    manualSorting?: boolean;
+    /**
+     * Controlled sorting state — pass this (with `onSortingChange`) to drive
+     * sorting externally. Uncontrolled (internal state) when omitted.
+     */
+    sorting?: unknown;
+    /** Passthrough for the `sorting` state; pairs with `sorting`. */
+    onSortingChange?: (updater: unknown) => void;
+    /**
+     * Renders a full row, bypassing DataTable's default per-cell `flexRender`
+     * path entirely. Use to swap in a custom, independently memoizable row
+     * component — the caller owns the row's markup and equality semantics. Reuse
+     * the exported `getCellStyle`/`getPinnedStyle`/`getColumnWidth` helpers to
+     * match DataTable's default cell styling if desired. Also bypasses
+     * `renderExpandedRow` — a row rendered via `renderRow` never gets an
+     * expanded-content row appended.
+     */
+    renderRow?: (row: unknown, rowIndex: number) => ReactNode;
+    /**
+     * Renders a custom empty state instead of the default "No results." row.
+     * Receives `hasFilters` (whether any column filter is currently applied).
+     */
+    renderEmptyState?: (context: {
+        hasFilters: boolean;
+    }) => ReactNode;
+    /**
+     * `'page'` (default) keeps today's client-paginated behavior. `'infinite'`
+     * omits the paginated row model — `data` is the full accumulated array the
+     * caller appends to on each `onLoadMore` — and renders a sentinel row that
+     * calls `onLoadMore` once it scrolls into view.
+     */
+    paginationMode?: 'page' | 'infinite';
+    /**
+     * Called when the infinite-scroll sentinel intersects the viewport.
+     * `paginationMode="infinite"` only.
+     */
+    onLoadMore?: () => void;
+    /**
+     * Expands the sentinel's `IntersectionObserver` root margin (native CSS
+     * margin syntax, e.g. `'400px'`). `paginationMode="infinite"` only.
+     */
+    loadMoreRootMargin?: string;
+    /** Whether more rows are available to load. `paginationMode="infinite"` only. */
+    hasNextPage?: boolean;
+    /**
+     * Whether a load is in flight — suppresses further `onLoadMore` calls and
+     * renders a trailing loading row. `paginationMode="infinite"` only.
+     */
+    isLoadingMore?: boolean;
 }

package/dist/src/components/ui/data-table/index.d.ts

@@ -1,4 +1,4 @@
-export { DataTable, type DataTableProps } from './data-table';
+export { DataTable, type DataTableProps, getCellStyle, getPinnedStyle, getColumnWidth, } from './data-table';
 export { DataTableColumnHeader } from './data-table-column-header';
 export { DataTableExpandTrigger } from './data-table-expand-trigger';
 export { DataTablePagination } from './data-table-pagination';

package/dist/src/components/ui/page-header/index.d.ts

@@ -1 +1 @@
-export { PageHeader, PageHeaderBreadcrumb, PageHeaderRow, PageHeaderTitle, PageHeaderDescription, PageHeaderActions, } from './page-header';
+export { PageHeader, PageHeaderRow, PageHeaderTitle, PageHeaderTags, PageHeaderActions, PageHeaderDescriptionRow, PageHeaderDescription, } from './page-header';

package/dist/src/components/ui/page-header/page-header.d.ts

@@ -1,8 +1,14 @@
 import * as React from 'react';
+declare function useRowOverflow(): {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    measureRef: React.RefObject<HTMLDivElement | null>;
+    collapsed: boolean;
+};
 declare const PageHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const PageHeaderBreadcrumb: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 declare const PageHeaderRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const PageHeaderTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-declare const PageHeaderDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const PageHeaderTags: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const PageHeaderActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumb, PageHeaderRow, PageHeaderTitle, PageHeaderDescription, PageHeaderActions, };
+declare const PageHeaderDescriptionRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const PageHeaderDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { PageHeader, PageHeaderRow, PageHeaderTitle, PageHeaderTags, PageHeaderActions, PageHeaderDescriptionRow, PageHeaderDescription, useRowOverflow, };

package/dist/src/components/ui/toolbar/index.d.ts

@@ -0,0 +1 @@
+export { Toolbar, ToolbarActions, ToolbarActionList, type ToolbarProps, type ToolbarActionsProps, type ToolbarActionListProps, type ToolbarActionListItem, } from './toolbar';

package/dist/src/components/ui/toolbar/toolbar.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export type ToolbarProps = React.ComponentPropsWithoutRef<'fieldset'>;
+declare const Toolbar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export type ToolbarActionsProps = React.ComponentPropsWithoutRef<'div'>;
+declare const ToolbarActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function computeVisibleActionCount(itemWidths: number[], moreWidth: number, gap: number, availableWidth: number): number;
+export declare function measureNaturalWidth(el: Element): number;
+export interface ToolbarActionListItem {
+    /** Stable identity — used as the React key in both the row and the overflow menu. */
+    key: string;
+    /** Rendered as the visible ghost Button's label, and the overflow menu item's label. */
+    label: React.ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+}
+export interface ToolbarActionListProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Ordered list of actions; trailing ones collapse into "More actions" first. */
+    actions: ToolbarActionListItem[];
+    /** Label for the overflow trigger. */
+    moreActionsLabel?: React.ReactNode;
+}
+declare const ToolbarActionList: React.ForwardRefExoticComponent<ToolbarActionListProps & React.RefAttributes<HTMLDivElement>>;
+export { Toolbar, ToolbarActions, ToolbarActionList };

package/dist/src/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useSortState, type SortDirection, type SortState, type SortComparator, type UseSortStateOptions, type UseSortStateResult, } from './use-sort-state';
+export { useIntersectionObserver, type UseIntersectionObserverOptions, } from './use-intersection-observer';
 export { useTableUrlState, parseTableUrlState, serializeTableUrlState, DEFAULT_TABLE_URL_PARAM_KEYS, type TableUrlState, type TablePaginationState, type TableSortingState, type TableColumnFilterState, type TableUrlParamKeys, type TableUrlUpdater, type UseTableUrlStateOptions, type UseTableUrlStateResult, } from './use-table-url-state';

package/dist/src/hooks/use-intersection-observer.d.ts

@@ -0,0 +1,26 @@
+export interface UseIntersectionObserverOptions extends IntersectionObserverInit {
+    /** Called each time the observed element intersects its root. */
+    onIntersect: () => void;
+    /**
+     * Skip observing — e.g. there's nothing left to load, or a load is already
+     * in flight. Disconnects any existing observer.
+     */
+    disabled?: boolean;
+}
+/**
+ * Wires a single `IntersectionObserver` on the returned ref callback's element
+ * and calls `onIntersect` each time it intersects. Re-creates the observer when
+ * the element, `disabled`, or any `IntersectionObserverInit` option changes;
+ * disconnects on cleanup. `onIntersect` itself doesn't need to be memoized by
+ * the caller — the latest version is always used (via a ref) without
+ * reconnecting the observer.
+ *
+ * Takes a ref *callback* (not a `RefObject`) rather than accepting one from the
+ * caller — attaching to `element.current` inside a `useEffect` keyed on a
+ * `RefObject` misses conditionally-mounted elements: the `ref` object's
+ * identity never changes when its `.current` is populated, so an effect keyed
+ * on it (rather than on the element itself) never re-runs once the element
+ * actually mounts. Routing the DOM node through `useState` instead makes the
+ * mount itself a dependency.
+ */
+export declare function useIntersectionObserver<T extends Element>({ onIntersect, disabled, root, rootMargin, threshold, }: UseIntersectionObserverOptions): (node: T | null) => void;

package/dist/src/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/ui/app-shell';
 export * from './components/ui/app-shell-chat';
 export * from './components/ui/auth-layout';
 export * from './components/ui/avatar';
+export * from './components/ui/bar-chart';
 export * from './components/ui/breadcrumb';
 export * from './components/ui/button';
 export * from './components/ui/button-menu';
@@ -66,6 +67,7 @@ export * from './components/ui/table';
 export * from './components/ui/tabs';
 export * from './components/ui/toast';
 export * from './components/ui/toggle-group';
+export * from './components/ui/toolbar';
 export * from './components/ui/tooltip';
 export * from './components/ui/tag';
 export { Tag as Badge, type TagProps as BadgeProps, } from './components/ui/tag';