@epam/ai-dial-ui-kit 0.14.0-dev.11 → 0.14.0-dev.12

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

@@ -0,0 +1,59 @@
+/** 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;
+    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/NoDataContent/NoDataContent.d.ts

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+export interface NoDataContentProps {
+    /** Headline of the empty state. */
+    title: ReactNode;
+    /** Optional secondary line under the title. */
+    description?: ReactNode;
+    /** Illustration above the title. Defaults to a struck-through clipboard. */
+    icon?: ReactNode;
+    /**
+     * Announces the empty state to assistive tech as it appears. Turn it on where
+     * the content replaces a list the user has just filtered or searched.
+     */
+    live?: boolean;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+}
+/**
+ * Message shown in place of a list, table or grid that has nothing to show.
+ * aliases: EmptyState|NoResults|ZeroState
+ * Design system 2.0
+ *
+ * Fills its container and centres an illustration, a headline and an optional
+ * secondary line. The icon is decorative, so it is hidden from assistive tech
+ * and the text carries the message on its own.
+ *
+ * @example
+ * ```tsx
+ * <NoDataContent
+ *   title="No results found"
+ *   description="Try a different search term."
+ * />
+ *
+ * <NoDataContent title="Nothing here yet" icon={<IconInbox size={60} />} live />
+ * ```
+ *
+ * @param title - Headline of the empty state.
+ * @param [description] - Optional secondary line under the title.
+ * @param [icon] - Illustration above the title. Defaults to a struck-through clipboard.
+ * @param [live=false] - Announce the empty state to assistive tech as it appears.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the title.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ */
+export declare const NoDataContent: FC<NoDataContentProps>;

package/dist/src/index.d.ts

@@ -244,3 +244,13 @@ export { ResizableContainer } from './components/New/ResizableContainer/Resizabl
 export type { ResizableContainerProps } from './components/New/ResizableContainer/ResizableContainer';
 export { ConditionalResizableContainer } from './components/New/ResizableContainer/ConditionalResizableContainer';
 export type { ConditionalResizableContainerProps } from './components/New/ResizableContainer/ConditionalResizableContainer';
+export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
+export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
+export { Grid, GRID_SELECTION_COLUMN_ID } from './components/New/Grid/Grid';
+export type { GridProps } from './components/New/Grid/Grid';
+export { DateCellRenderer } from './components/New/Grid/renderers/DateCellRenderer';
+export type { DateCellRendererProps, DateValue, } from './components/New/Grid/renderers/DateCellRenderer';
+export { DEFAULT_DATE_FORMAT_OPTIONS, DEFAULT_LOCALE as DEFAULT_DATE_LOCALE, } from './components/New/Grid/renderers/constants';
+export { GRID_ALIGN_RIGHT_CLASS, GRID_ROOT_CLASS, GRID_THEME_PARAMS, ROW_HEIGHT as GRID_ROW_HEIGHT, } from './components/New/Grid/constants';
+export { convertToDate } from './utils/grid-date';
+export { baseColumnComparator, checkColDefsChanges, } from './utils/grid-comparators';

package/dist/src/utils/grid-comparators.d.ts

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

package/dist/src/utils/grid-date.d.ts

@@ -0,0 +1,7 @@
+export type DateValue = string | number | Date;
+/**
+ * Normalises the value a date cell can receive into a `Date`, or `null` when it
+ * carries no usable date. A pure integer string is read as epoch milliseconds,
+ * so a serialised timestamp behaves like the number it came from.
+ */
+export declare const convertToDate: (input?: DateValue | null) => Date | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.14.0-dev.11",
+  "version": "0.14.0-dev.12",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",