@epam/ai-dial-ui-kit 0.14.0-dev.5 → 0.14.0-dev.51

package/dist/src/components/Analytics/BarGroup/BarGroup.d.ts

@@ -51,7 +51,14 @@ export interface DialAnalyticsBarGroupProps {
     barTitleClassName?: string;
     /** Additional CSS classes for each bar's value label. */
     barValueClassName?: string;
-    /** Additional CSS classes for each bar's outer container (e.g. for custom hover effects). */
+    /**
+     * Additional CSS classes for each bar's outer container (e.g. for custom hover
+     * effects). In compare mode these classes apply to the shared container around
+     * both bars (one continuous block), and the entry wrapper is a Tailwind
+     * `group` — use `group-hover:` (not `hover:`) for pair hover. When `onBarClick`
+     * is set, that container also gets a default accent fill on group hover and
+     * `:focus-visible`.
+     */
     barClassName?: string;
     /** Map of bar key to tooltip content. When provided, hovering each bar shows its description. */
     barDescriptions?: Record<string, ReactNode>;
@@ -89,7 +96,7 @@ export interface DialAnalyticsBarGroupProps {
  * @param [inline] - Renders every bar on a single row (50% title, 50% bar + value).
  * @param [barTitleClassName] - Additional CSS classes for each bar's title label.
  * @param [barValueClassName] - Additional CSS classes for each bar's value label.
- * @param [barClassName] - Additional CSS classes for each bar's outer container.
+ * @param [barClassName] - Additional CSS classes for each bar's outer container. In compare mode they apply to the shared pair container (one continuous block); the entry is a Tailwind `group` — use `group-hover:` for pair hover; when `onBarClick` is set that container also gets a default accent fill on hover and `:focus-visible`.
  * @param [barDescriptions] - Map of bar key to tooltip content. Hovering each bar shows its description.
  * @param [className] - Additional CSS classes for the accordion container.
  */

package/dist/src/components/FileManager/FileManager.d.ts

@@ -17,7 +17,7 @@ import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/Dia
 import { DialFoldersTreeProps } from './components/FoldersTree/FoldersTree';
 type GridRow = FileManagerGridRow;
 export type DialFileManagerConflictResolutionPopupOptions = Omit<ConflictResolutionPopupProps, 'open' | 'onClose' | 'onReplace' | 'onDuplicate' | 'conflictingFiles'>;
-export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'header' | 'onCreateFolder' | 'onCreateFolderValidate' | 'folderCreationValidationMessages' | 'disabledPathTooltip' | 'emptyStateTitle' | 'emptyStateDescription'> & {
+export type DialFileManagerDestinationFolderPopupOptions = Pick<DestinationFolderPopupProps, 'setDestinationFolderPath' | 'destinationFolderPath' | 'addFolderLabel' | 'copyLabel' | 'moveLabel' | 'hiddenFilesSwitcherLabel' | 'header' | 'onCreateFolder' | 'onCreateFolderValidate' | 'folderCreationValidationMessages' | 'disabledPathTooltip' | 'emptyStateTitle' | 'emptyStateDescription' | 'excludedPaths'> & {
     getCopyHeader?: (itemsCount: number, itemName?: string) => string;
     getMoveHeader?: (itemsCount: number, itemName?: string) => string;
     processDestinationFolderPath?: (path: string) => string;
@@ -270,6 +270,7 @@ export interface DialFileManagerProps {
  * @param [gridOptions] - Options forwarded to `DialGrid`; supports `columnDefs` override and `filterable` flag and date locale/options
  * @param [bulkActionsToolbarOptions] - Options for the bulk actions toolbar shown when items are selected
  * @param [deleteConfirmationOptions] - Options for the delete confirmation popup
+ * @param [destinationFolderPopupOptions.excludedPaths] - Paths to hide from the Copy/Move destination popup only (e.g. a root folder that shouldn't be a valid destination); the main tree/grid are unaffected
  *
  * @param [compactViewWidthBreakpoint=DEFAULT_COMPACT_VIEW_WIDTH_BREAKPOINT] - Width (px) below which the component switches to compact view.
  *

package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts

@@ -21,6 +21,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
     alertProps?: DialNotificationProps;
     onFolderPopupPathChange?: (newPath?: string) => void;
     processDestinationFolderPath?: (path: string) => string;
+    excludedPaths?: string[];
 }
 /**
  * DestinationFolderPopup
@@ -65,6 +66,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
  * @param [disabledPathTooltip="Unavailable for the original path. Please select another folder"] - Tooltip text when destination is disabled
  * @param [collapsedFileTree=false] - Whether the file tree should be initially collapsed
  * @param [processDestinationFolderPath] - Optional function to process the destination folder path before setting it
+ * @param [excludedPaths] - Paths to hide from this popup's tree and grid (e.g. a root folder that shouldn't be a valid destination). Matching items and their subtree are excluded.
  *
  * @returns A React component for the destination folder selection popup
  */

package/dist/src/components/FileManager/hooks/use-file-upload.d.ts

@@ -1,4 +1,4 @@
-import { DragEvent } from 'react';
+import { ChangeEvent, DragEvent } from 'react';
 import { DialFile } from '../../../models/file';
 import { DialFileAcceptType, DialUploadFileItem } from '../../../models/file-manager';
 import { FileConflictDecision } from '../components/ConflictResolutionPopup/ConflictResolutionPopup';
@@ -47,9 +47,11 @@ export declare const useFileUpload: ({ onUploadFiles, onValidateUpload, maxFileS
     handleDrop: (e: DragEvent, destinationFolder: string, existingFiles: DialFile[]) => Promise<void>;
     clearError: () => void;
     handleUpload: (files: DialUploadFileItem[], destinationFolder: string, existingFiles: DialFile[]) => Promise<boolean>;
-    openFileDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
+    openFileDialog: (destinationFolder: string, existingFiles: DialFile[]) => boolean;
     openArchiveDialog: (destinationFolder: string, existingFiles: DialFile[]) => void;
     fileInputRef: import('react').RefObject<HTMLInputElement | null>;
+    fileInputAccept: string | undefined;
+    handleFileInputChange: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
     uploadConflictingFiles: DialFile[];
     uploadConflictResolutionOpen: boolean;
     hasActiveUploadConflictRef: import('react').RefObject<boolean>;

package/dist/src/components/FileManager/utils.d.ts

@@ -7,6 +7,17 @@ export declare const findFolderForPath: (root: DialFile[] | undefined, path?: st
 export declare const normalizeToLowerCase: (input?: string) => string;
 export declare const normalizeExtensionWithoutDot: (input?: string) => string;
 export declare const collectAllDescendants: (folder?: DialFile) => DialFile[];
+/**
+ * Removes items (and their entire subtree) whose path matches one of the
+ * excluded paths, at any nesting depth. Used to hide specific folders (e.g.
+ * a root folder) from the Move/Copy destination popup without affecting the
+ * main file manager view.
+ *
+ * @param nodes - Hierarchical items to filter
+ * @param excludedPaths - Paths to exclude; pass `undefined`/empty to no-op
+ * @returns A new array with matching nodes (and their descendants) removed
+ */
+export declare const excludePathsFromTree: (nodes: DialFile[] | undefined, excludedPaths?: string[]) => DialFile[];
 export declare const isHiddenDotFile: (node: DialFile) => boolean;
 /**
  * Formats bytes into a short, human-readable string.

package/dist/src/components/Grid/comparators/base-column-comparator.d.ts

@@ -1,4 +1 @@
-import { ColDef, IRowNode } from 'ag-grid-community';
-export declare const baseColumnComparator: (a: string | number | undefined, b: string | number | undefined, _nodeA?: IRowNode, _nodeB?: IRowNode, isInverted?: boolean) => number;
-export declare const omitUndefined: <T extends object>(value: T | undefined) => T;
-export declare const checkColDefsChanges: (cols: ColDef[], initialCols: ColDef[]) => boolean;
+export { baseColumnComparator, checkColDefsChanges, omitUndefined, } from '../../../utils/grid-comparators';

package/dist/src/components/Grid/renderers/utils.d.ts

@@ -1,2 +1 @@
-import { DateValue } from './DateCellRenderer';
-export declare function convertToDate(input?: DateValue | null): Date | null;
+export { convertToDate } from '../../../utils/grid-date';

package/dist/src/components/JsonEditor/lazy.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared leaf module for the JSON editor's lazy loader. Both `src/index.ts`
+ * (root) and `src/subpaths/editors.ts` (`./editors`) re-export this same
+ * binding instead of each declaring their own copy of the loader function -
+ * see `src/index.ts`'s comment above its own re-export for why the previous
+ * per-entry duplication existed, and why it was replaced by this shared
+ * module (an emitted-topology defect, not just source-level duplication:
+ * a loader function's body containing its own `import()` call, when
+ * duplicated verbatim into more than one entry's own emitted chunk, can pull
+ * an unrelated dynamically-imported feature into the initial graph in some
+ * Vite/Rolldown versions - see `openspec/changes/isolate-heavy-feature-modules`
+ * Section 9's `diagnosis-baseline.txt` for the measured reproduction).
+ */
+export declare const LazyDialJsonEditor: () => Promise<typeof import("./JsonEditor")>;

package/dist/src/components/MarkdownEditor/lazy.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared leaf module for the 1.0 Markdown editor's lazy loader. Both
+ * `src/index.ts` (root) and `src/subpaths/editors.ts` (`./editors`)
+ * re-export this same binding instead of each declaring their own copy -
+ * see `src/components/JsonEditor/lazy.ts`'s comment for why.
+ */
+export declare const LazyDialMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;

package/dist/src/components/New/CollapsibleSidebar/CollapsibleSidebar.d.ts

@@ -0,0 +1,82 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+export interface CollapsibleSidebarProps {
+    /** Content shown while the sidebar is expanded. */
+    children: ReactNode;
+    /** Name of the panel, rendered as vertical text while collapsed. */
+    title: ReactNode;
+    /** Width in px while expanded. Defaults to `280`. */
+    width?: number;
+    /** Width in px while collapsed. Defaults to `48`. */
+    collapsedWidth?: number;
+    /** Controlled open state. When provided, the component becomes controlled. */
+    isOpened?: boolean;
+    /** Initial open state when uncontrolled. Defaults to `true`. */
+    defaultOpened?: boolean;
+    /** Fired when the toggle is clicked. Receives the next open state. */
+    onToggle?: (nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void;
+    /** Extra controls rendered in the footer next to the toggle, expanded only. */
+    additionalButtons?: ReactNode;
+    /** Accessible name of the sidebar region. Defaults to `'Sidebar'`. */
+    ariaLabel?: string;
+    /** Name and tooltip of the toggle while expanded. Defaults to `'Collapse sidebar'`. */
+    collapseLabel?: string;
+    /** Name and tooltip of the toggle while collapsed. Defaults to `'Expand sidebar'`. */
+    expandLabel?: string;
+    /** Additional CSS classes for the outer container. */
+    className?: string;
+    /** Additional CSS classes for the vertical title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the content region. */
+    contentClassName?: string;
+    /** Additional CSS classes for the footer holding the toggle. */
+    footerClassName?: string;
+}
+/**
+ * A side panel that collapses to a narrow rail carrying its title vertically.
+ * aliases: ToggleSidebar|CollapsiblePanel|SidePanel
+ * Design system 2.0
+ *
+ * Works as a controlled component when `isOpened` is provided, otherwise it keeps
+ * its own state from `defaultOpened`. The width is derived from the open state, so
+ * changing `width` on an open sidebar takes effect immediately.
+ *
+ * The panel is an `aside` named by `ariaLabel`, and the toggle is a real
+ * `aria-expanded` control pointing at the content region. Content stays mounted
+ * while collapsed — hidden with `display: none` — so scroll position and any
+ * form state inside it survive a collapse.
+ *
+ * The container paints no background and no radius: it is meant to sit on the
+ * surface it belongs to. Pass `className` for either.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleSidebar title="Filters" width={320}>
+ *   <FilterForm />
+ * </CollapsibleSidebar>
+ *
+ * <CollapsibleSidebar
+ *   title="Filters"
+ *   isOpened={opened}
+ *   onToggle={setOpened}
+ * >
+ *   <FilterForm />
+ * </CollapsibleSidebar>
+ * ```
+ *
+ * @param children - Content shown while the sidebar is expanded.
+ * @param title - Name of the panel, rendered as vertical text while collapsed.
+ * @param [width=280] - Width in px while expanded.
+ * @param [collapsedWidth=48] - Width in px while collapsed.
+ * @param [isOpened] - Controlled open state.
+ * @param [defaultOpened=true] - Initial open state when uncontrolled.
+ * @param [onToggle] - Fired when the toggle is clicked. Receives the next open state.
+ * @param [additionalButtons] - Extra footer controls, rendered while expanded.
+ * @param [ariaLabel='Sidebar'] - Accessible name of the sidebar region.
+ * @param [collapseLabel='Collapse sidebar'] - Name and tooltip of the toggle while expanded.
+ * @param [expandLabel='Expand sidebar'] - Name and tooltip of the toggle while collapsed.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [titleClassName] - Additional CSS classes for the vertical title.
+ * @param [contentClassName] - Additional CSS classes for the content region.
+ * @param [footerClassName] - Additional CSS classes for the footer.
+ */
+export declare const CollapsibleSidebar: FC<CollapsibleSidebarProps>;

package/dist/src/components/New/Dropdown/Dropdown.d.ts

@@ -30,6 +30,15 @@ export interface DropdownProps {
     anchorToMouse?: boolean;
     matchReferenceWidth?: boolean;
     maxDropdownHeight?: number | null;
+    /**
+     * Initial focus inside the overlay on open, forwarded to
+     * `FloatingFocusManager`'s `initialFocus`. `0` focuses the first tabbable
+     * element (menu behavior); `-1` leaves focus where it is (typeahead
+     * behavior, e.g. a `/`-command menu opened from a textarea). When omitted,
+     * defaults to menu behavior for click/context opens and to `-1` for hover
+     * opens, matching the pre-existing behavior.
+     */
+    initialFocus?: 0 | -1 | RefObject<HTMLElement | null>;
 }
 /**
  *
@@ -37,10 +46,20 @@ export interface DropdownProps {
  * aliases: ContextMenu|PopupMenu
  * Design system 2.0
  *
+ * A menu of **actions or navigation options**, opened from a trigger. It is not
+ * the control for picking a value out of a list — a country, a sort order, a
+ * filter — which is what {@link Select} is for.
+ *
  * Supports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional
  * close button inside the overlay. Placement is taken directly from Floating UI; when
  * `placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.
  *
+ * A chosen row is marked through the item's `mark`: the design draws a menu's
+ * single-select and multiselect the same way, with a check at the trailing edge
+ * (`MenuItemMark.Check`). Pair it with `selectable` for a multiselect row, which
+ * keeps the menu open across toggles. `MenuItemMark.Highlight` is the current
+ * item of a navigation menu.
+ *
  * @example
  * ```tsx
  * // Simple items menu
@@ -83,5 +102,6 @@ export interface DropdownProps {
  * @param [anchorToMouse=false] - Whether to anchor the dropdown to the mouse position
  * @param [matchReferenceWidth=true] - Whether to match the reference element's width
  * @param [maxDropdownHeight] - Maximum height of the dropdown menu; when omitted, no limit is applied
+ * @param [initialFocus] - Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior
  */
 export declare const Dropdown: FC<DropdownProps>;

package/dist/src/components/New/Dropdown/constants.d.ts

@@ -1,11 +1,12 @@
 export declare const dropdownBaseClassName: string;
 export declare const dropdownListBaseClassName: string;
 export declare const dropdownSubMenuClassName: string;
+/**
+ * The row's own styling lives in {@link MenuItem}, which renders every item of
+ * the menu. This alias is what a fully custom overlay row can lean on to match
+ * them.
+ */
 export declare const dropdownItemBaseClassName: string;
-/** Tint marking a checked multiselect row. */
-export declare const dropdownItemSelectedClassName = "bg-control-accent-alpha";
-export declare const dropdownItemDisabledClassName: string;
-export declare const dropdownItemDangerClassName = "text-error";
 export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
 export declare const dropdownGap = 4;
 export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/Dropdown/item-mark.d.ts

@@ -0,0 +1,15 @@
+import { DropdownItem } from '../../../models/dropdown';
+import { MenuItemMark } from '../../../types/menu-item';
+/**
+ * How a chosen row is marked. `mark` wins when it is given; otherwise the
+ * legacy `selectable` flag still means the multiselect checkbox row.
+ */
+export declare const resolveItemMark: (item: DropdownItem) => MenuItemMark;
+/**
+ * Role the row announces. A `selectable` row toggles and so is a checkbox item
+ * whatever it is marked with — the design draws a menu's multiselect exactly
+ * like its single-select, with a check. A row that only *marks* a single choice
+ * is a radio item; an unmarked row and the navigation highlight are plain
+ * items, the highlight carrying `aria-current` instead.
+ */
+export declare const getItemRole: (item: DropdownItem) => string;

package/dist/src/components/New/EllipsisTooltip/EllipsisTooltip.d.ts

@@ -22,7 +22,7 @@ export interface EllipsisTooltipProps extends TooltipContainerOptions {
  *
  * a11y: while truncated, the full string is exposed as the element's
  * `aria-label`, so a screen reader reads the whole label even though the
- * tooltip itself renders nothing on mobile screens.
+ * tooltip itself renders nothing on a touch-only device.
  *
  * @example
  * ```tsx

package/dist/src/components/New/EllipsisTooltip/use-truncation.d.ts

@@ -8,6 +8,11 @@ import { ReactNode } from 'react';
  * window resize, and — since a parent can resize without the window doing so —
  * whenever the element's own box changes size.
  *
+ * All of that goes through the shared observer in
+ * `@/utils/element-size-observer`, so a screen full of truncating labels costs
+ * one `ResizeObserver`, one resize listener and one animation frame in total
+ * rather than a set per label.
+ *
  * @param text - The rendered content; a change to it re-measures
  * @returns `ref` to attach to the truncating element, whether it `isTruncated`,
  * its `textContent` (the full string even when `text` is a node), and

package/dist/src/components/New/Grid/Grid.d.ts

@@ -0,0 +1,124 @@
+import { ColDef, GridApi, GridOptions } from 'ag-grid-community';
+import { ReactNode } from 'react';
+import { DropdownItem } from '../../../models/dropdown';
+import { GridSelectionMode } from '../../../models/selection-mode';
+/** Column id of the selection column this component prepends itself. */
+export declare const GRID_SELECTION_COLUMN_ID = "dial-kit-grid-selection";
+export interface GridProps<T extends object = Record<string, unknown>> {
+    /** Column definitions, in ag-Grid `ColDef` format. */
+    columnDefs?: ColDef<T>[];
+    /** Rows to display. */
+    rowData?: T[];
+    /** Extra ag-Grid options, merged over the defaults. */
+    additionalGridOptions?: GridOptions<T>;
+    /** Items of the row context menu. Omit it to render no context menu at all. */
+    getContextMenuItems?: (row: T) => DropdownItem[];
+    /** Additional CSS classes for the grid container. */
+    className?: string;
+    /** Accessible name of the grid region. Defaults to `'Data grid'`. */
+    ariaLabel?: string;
+    /** Whether custom cell renderers are wrapped with context-menu support. */
+    wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
+    /** Rows that cannot be selected. Ids must match what `getRowId` returns. */
+    disabledRowIds?: Set<string>;
+    /** Controlled selection: ids of the selected rows. */
+    selectedRowIds?: Set<string>;
+    /** Fired when the grid API becomes available. */
+    onGridApiChange?: (api: GridApi<T>) => void;
+    /** Fired when the selection changes, with the selected ids and rows. */
+    onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    /** Extracts the unique id of a row. Defaults to its `id` field. */
+    getRowId?: (row: T) => string;
+    /** Tints odd rows. Defaults to `false`. */
+    alternateOddRowColors?: boolean;
+    /** Placeholder of the column filter inputs. */
+    filterPlaceholder?: string;
+    /** Illustration of the empty state. */
+    emptyStateIcon?: ReactNode;
+    /** Headline of the empty state. */
+    emptyStateTitle?: string;
+    /** Secondary line of the empty state. */
+    emptyStateDescription?: string;
+    /** Shows the loading overlay. Defaults to `false`. */
+    loading?: boolean;
+    /** Draws a border around the grid. Defaults to `true`. */
+    wrapperBorder?: boolean;
+    /** Hides the vertical borders between header cells. Defaults to `false`. */
+    withoutHeaderBorders?: boolean;
+    /** Renders a selection column of checkboxes or radios. */
+    selectionMode?: GridSelectionMode;
+    /** Keeps the context menu on a row that cannot be selected. */
+    allowDisabledContextMenu?: boolean;
+    /** Accessible name of a row's selection control. Defaults to `'Select row'`. */
+    selectRowLabel?: (row: T) => string;
+    /** Accessible name of the select-all control. Defaults to `'Select all rows'`. */
+    selectAllLabel?: string;
+}
+/**
+ * A data grid built on ag-Grid, wired to the 2.0 tokens and controls.
+ * aliases: DataTable|TableGrid|DataGrid
+ * Design system 2.0
+ *
+ * Comes preconfigured with case-insensitive sorting, floating column filters,
+ * columns sized to the available width, a row context menu, truncation
+ * tooltips, and an empty state.
+ *
+ * The selection column renders the 2.0 `Checkbox` and `Radio` instead of
+ * ag-Grid's own inputs, so selection looks and behaves like every other control
+ * in the kit and the select-all reaches the `mixed` state when the selection is
+ * partial. The column stays faded out until the row is hovered, something is
+ * selected, or the keyboard reaches it.
+ *
+ * Selection works controlled or uncontrolled: pass `selectedRowIds` to own it,
+ * or read `onSelectionChange` and let the grid keep its own. A `sort` declared
+ * on a column is honoured — 1.0 stripped it on startup.
+ *
+ * @example
+ * ```tsx
+ * interface Product { id: string; name: string; price: number }
+ *
+ * const columns: ColDef<Product>[] = [
+ *   { field: 'name', headerName: 'Product', flex: 1 },
+ *   { field: 'price', headerName: 'Price', width: 120 },
+ * ];
+ *
+ * <Grid<Product> columnDefs={columns} rowData={products} />
+ *
+ * // With selection and a context menu
+ * <Grid<Product>
+ *   columnDefs={columns}
+ *   rowData={products}
+ *   selectionMode={GridSelectionMode.MULTIPLE}
+ *   selectedRowIds={selectedIds}
+ *   onSelectionChange={(ids) => setSelectedIds(ids)}
+ *   selectRowLabel={(row) => `Select ${row.name}`}
+ *   getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}
+ * />
+ * ```
+ *
+ * @param [columnDefs] - Column definitions, in ag-Grid `ColDef` format.
+ * @param [rowData] - Rows to display.
+ * @param [additionalGridOptions] - Extra ag-Grid options, merged over the defaults.
+ * @param [getContextMenuItems] - Items of the row context menu. Omit for no menu.
+ * @param [className] - Additional CSS classes for the grid container.
+ * @param [ariaLabel='Data grid'] - Accessible name of the grid region.
+ * @param [wrapCustomCellRenderers=true] - Whether custom renderers get context-menu support.
+ * @param [disabledRowIds] - Rows that cannot be selected.
+ * @param [selectedRowIds] - Controlled selection: ids of the selected rows.
+ * @param [onGridApiChange] - Fired when the grid API becomes available.
+ * @param [onSelectionChange] - Fired when the selection changes.
+ * @param [getRowId] - Extracts the unique id of a row. Defaults to its `id` field.
+ * @param [alternateOddRowColors=false] - Tints odd rows.
+ * @param [filterPlaceholder='Enter value'] - Placeholder of the column filter inputs.
+ * @param [emptyStateIcon] - Illustration of the empty state.
+ * @param [emptyStateTitle='No results found'] - Headline of the empty state.
+ * @param [emptyStateDescription] - Secondary line of the empty state.
+ * @param [loading=false] - Shows the loading overlay.
+ * @param [wrapperBorder=true] - Draws a border around the grid.
+ * @param [withoutHeaderBorders=false] - Hides the vertical borders between header cells.
+ * @param [selectionMode] - Renders a selection column of checkboxes or radios.
+ * @param [allowDisabledContextMenu=false] - Keeps the context menu on a non-selectable row.
+ * @param [selectRowLabel] - Accessible name of a row's selection control.
+ * @param [selectAllLabel='Select all rows'] - Accessible name of the select-all control.
+ */
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/Grid/components/SelectionCell.d.ts

@@ -0,0 +1,21 @@
+import { ICellRendererParams } from 'ag-grid-community';
+import { GridSelectionMode } from '../../../../models/selection-mode';
+export interface SelectionCellProps<T> {
+    params: ICellRendererParams<T>;
+    mode: GridSelectionMode;
+    /** Accessible name of the control; a row-specific name is far more useful. */
+    label: string;
+    /** Shared radio group name, so single mode behaves as one group. */
+    radioName: string;
+    rowId: string;
+    disabled?: boolean;
+}
+/**
+ * The 2.0 {@link Checkbox} or {@link Radio} rendered in the selection column,
+ * in place of ag-Grid's own checkbox.
+ *
+ * The row node is the source of truth: the control subscribes to its
+ * `rowSelected` event, so a selection made anywhere — another cell, the header,
+ * or the `selectedRowIds` prop — is reflected here without refreshing the cell.
+ */
+export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/Grid/components/SelectionHeader.d.ts

@@ -0,0 +1,14 @@
+import { IHeaderParams } from 'ag-grid-community';
+export interface SelectionHeaderProps<T> extends IHeaderParams<T> {
+    /** Accessible name of the select-all control. */
+    label: string;
+}
+/**
+ * Select-all {@link Checkbox} for the selection column, in place of ag-Grid's
+ * own header checkbox.
+ *
+ * It derives its state from the grid rather than from a prop: partly selected
+ * rows put it in the `mixed` state, and disabled rows are excluded from the
+ * count so a grid whose selectable rows are all selected still reads as full.
+ */
+export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/Grid/constants.d.ts

@@ -0,0 +1,61 @@
+/** Root class of the 2.0 grid; every rule in `styles/grid.scss` sits under it. */
+export declare const GRID_ROOT_CLASS = "dial-kit-grid";
+/** Present only while a selection column is rendered. Drives its reveal. */
+export declare const GRID_WITH_SELECTION_CLASS = "dial-kit-grid-with-selection";
+export declare const GRID_WITHOUT_HEADER_BORDERS_CLASS = "dial-kit-grid-without-header-borders";
+/** Cell of the selection column: faded out until the row is hovered. */
+export declare const GRID_ROW_SELECT_CLASS = "dial-kit-grid-row-select";
+/** Header of the selection column: faded out until the header is hovered. */
+export declare const GRID_HEADER_SELECT_CLASS = "dial-kit-grid-header-select";
+/**
+ * Pins the whole selection column visible — on touch, or once something is
+ * selected. It sits on the container rather than on the column definition:
+ * ag-Grid rebuilds every cell when a column definition changes, which would
+ * pull the DOM out from under the click that caused the selection.
+ */
+export declare const GRID_SELECTION_VISIBLE_CLASS = "dial-kit-grid-selection-visible";
+/** Right-aligns a column. Applied by the consumer through `cellClass`. */
+export declare const GRID_ALIGN_RIGHT_CLASS = "dial-kit-grid-align-right";
+/** Height of both a body row and the header row. */
+export declare const ROW_HEIGHT = 40;
+/**
+ * ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same
+ * literal fallbacks the Tailwind config carries, so a consumer that defines no
+ * CSS variables still gets the intended palette.
+ *
+ * Hover sits one step up the accent-alpha ramp from the selected tint, so a
+ * hovered selected row still reads as hovered — the same relationship the 2.0
+ * dropdown and select rows use.
+ */
+export declare const GRID_THEME_PARAMS: {
+    accentColor: string;
+    backgroundColor: string;
+    oddRowBackgroundColor: string;
+    selectedRowBackgroundColor: string;
+    rowHoverColor: string;
+    borderColor: string;
+    rowBorder: string;
+    headerRowBorder: string;
+    headerColumnBorder: string;
+    chromeBackgroundColor: string;
+    foregroundColor: string;
+    headerTextColor: string;
+    browserColorScheme: string;
+    headerFontSize: number;
+    headerFontWeight: number;
+    fontSize: number;
+    fontFamily: string;
+    spacing: number;
+    borderRadius: number;
+    wrapperBorderRadius: number;
+};
+/**
+ * Sources reported with a selection change. `checkboxSelected` marks the ones
+ * the user made in the selection column, the other two mark selections the
+ * component applied itself while syncing to `selectedRowIds` or new row data.
+ */
+export declare enum SelectionEventSourceType {
+    API = "api",
+    ROW_DATA_CHANGED = "rowDataChanged",
+    CHECKBOX_SELECTED = "checkboxSelected"
+}

package/dist/src/components/New/Grid/renderers/DateCellRenderer.d.ts

@@ -0,0 +1,48 @@
+import { ICellRendererParams } from 'ag-grid-community';
+import { FC } from 'react';
+import { DateValue } from '../../../../utils/grid-date';
+export type { DateValue };
+export interface DateCellRendererProps extends Partial<ICellRendererParams<Record<string, unknown>, DateValue>> {
+    /** The date to render. A pure integer string is read as epoch milliseconds. */
+    value?: DateValue | null;
+    /** Locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** `Intl.DateTimeFormat` options. */
+    options?: Intl.DateTimeFormatOptions;
+    /** Rendered when the value carries no usable date. */
+    emptyPlaceholder?: string;
+    /** Additional CSS classes for the cell. */
+    className?: string;
+    /** Suppresses the truncation tooltip. */
+    hideTooltip?: boolean;
+}
+/**
+ * Date cell for the 2.0 {@link Grid}, usable as an ag-Grid `cellRenderer`.
+ * aliases: DateCell|TimestampCell
+ * Design system 2.0
+ *
+ * Formats the value with `Intl.DateTimeFormat` and wraps it in a
+ * {@link EllipsisTooltip}, so the full string is only offered when the column is
+ * too narrow to show it. A valid date is rendered inside a `<time datetime>`,
+ * which gives assistive tech and crawlers the machine-readable value next to
+ * the localised one.
+ *
+ * @example
+ * ```tsx
+ * // As a column renderer
+ * { field: 'createdAt', cellRenderer: DateCellRenderer,
+ *   cellRendererParams: { options: { timeZone: 'UTC' } } }
+ *
+ * // Directly
+ * <DateCellRenderer value="2025-07-20T00:00:00Z" options={{ timeZone: 'UTC' }} />
+ * <DateCellRenderer value={1752969600000} /> // epoch milliseconds
+ * ```
+ *
+ * @param [value] - The date to render.
+ * @param [locale='en-US'] - Locale used for formatting.
+ * @param [options] - `Intl.DateTimeFormat` options, e.g. `timeZone`.
+ * @param [emptyPlaceholder] - Rendered when the value carries no usable date.
+ * @param [className] - Additional CSS classes for the cell.
+ * @param [hideTooltip=false] - Suppresses the truncation tooltip.
+ */
+export declare const DateCellRenderer: FC<DateCellRendererProps>;

package/dist/src/components/New/Grid/renderers/constants.d.ts

@@ -0,0 +1,5 @@
+import { ColDef } from 'ag-grid-community';
+export declare const DEFAULT_LOCALE = "en-US";
+export declare const DEFAULT_DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions;
+/** Fixed, unsortable and unfilterable: the column holds a control, not data. */
+export declare const SELECTION_COL_DEF: ColDef;