@epam/ai-dial-ui-kit 0.14.0-dev.4 → 0.14.0-dev.41

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

@@ -1,8 +1,8 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
-import { DialTooltipProps } from '../../Tooltip/Tooltip';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
 import { ElementSize } from '../../../types/size';
-type TooltipProps = Omit<DialTooltipProps, 'children'>;
+import { TooltipProps } from '../Tooltip/Tooltip';
+type ButtonTooltipProps = Omit<TooltipProps, 'children'>;
 export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ElementSize;
@@ -11,7 +11,7 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
     label?: ReactNode;
     iconBefore?: ReactNode;
     iconAfter?: ReactNode;
-    tooltipProps?: TooltipProps;
+    tooltipProps?: ButtonTooltipProps;
     href?: string;
     target?: HTMLAttributeAnchorTarget;
     rel?: string;
@@ -58,6 +58,7 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
  * `<button>`, so the control keeps the link role, middle-click, and
  * "open in new tab". Pair it with `ButtonAppearance.Link` (or `LinkButton`)
  * unless a button-shaped link is intended.
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
  * @param [target] - Anchor target, only meaningful alongside `href`
  * @param [rel] - Anchor `rel`. Defaults to `noopener noreferrer` when
  * `target="_blank"`.

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

@@ -9,6 +9,7 @@ export interface CheckboxProps extends NativeInputProps {
     disabled?: boolean;
     onChange?: (value: boolean) => void;
     caption?: string;
+    boxClassName?: string;
 }
 /**
  * A checkbox from the 2.0 design system.
@@ -41,6 +42,9 @@ export interface CheckboxProps extends NativeInputProps {
  * @param [disabled=false] - Whether the checkbox is disabled
  * @param [onChange] - Callback fired with the new value when toggled
  * @param [caption] - Caption text rendered below the label, and described by the checkbox
+ * @param [boxClassName] - Additional classes for the box itself. Use it to drop
+ * the box's own focus ring where the container already draws one, as a
+ * multiselect row does.
  */
 export declare const Checkbox: FC<CheckboxProps>;
 export {};

package/dist/src/components/New/Checkbox/CheckboxBox.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+export interface CheckboxBoxProps {
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    htmlFor?: string;
+    className?: string;
+}
+/**
+ * The 20px box a checkbox draws — the square, its border, its fill and the
+ * check or dash inside.
+ * Design system 2.0
+ *
+ * Two things render it: {@link Checkbox}, where it is the `<label for>` that
+ * toggles the input next to it, and rows that only *look* like a checkbox —
+ * a `menuitemcheckbox` in a dropdown, whose state lives on `aria-checked` and
+ * whose whole row is the control. Passing `htmlFor` picks the first: the box
+ * becomes a label with a pointer target of its own. Without it the box is a
+ * decorative `<span>`, hidden from assistive technology, and the row around it
+ * carries both the state and the pointer target.
+ *
+ * @param [isSelected=false] - Whether the box is filled with a check
+ * @param [isIndeterminate=false] - Whether the box is filled with a dash; takes precedence over `isSelected`
+ * @param [invalid=false] - Paints the box with the error colour
+ * @param [disabled=false] - Greys the box out
+ * @param [htmlFor] - Id of the input this box labels; omit for a decorative box
+ * @param [className] - Additional classes for the box
+ */
+export declare const CheckboxBox: FC<CheckboxBoxProps>;

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

@@ -37,10 +37,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

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

@@ -1,9 +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;
-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;

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

@@ -1,14 +1,14 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
-import { DialTooltipProps } from '../../Tooltip/Tooltip';
 import { ElementSize } from '../../../types/size';
-type TooltipProps = Omit<DialTooltipProps, 'children'>;
+import { TooltipProps } from '../Tooltip/Tooltip';
+type IconButtonTooltipProps = Omit<TooltipProps, 'children'>;
 export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ElementSize;
     appearance?: ButtonAppearance;
     icon: ReactNode;
-    tooltipProps?: TooltipProps;
+    tooltipProps?: IconButtonTooltipProps;
 }
 /**
  * A Icon Button component with flexible icon and text positioning
@@ -41,7 +41,7 @@ export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<
  * @param [variant] - Defines the visual style of the button
  * @param [appearance=ButtonAppearance.Solid] - Defines the type of the button
  * @param [size=ElementSize.Standard] - Defines the size of the button
- * @param [tooltip] - The content of the icon button tooltip
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
  * @param icon - Icon display
  */
 export declare const IconButton: FC<IconButtonProps>;