@epam/ai-dial-ui-kit 0.16.0-dev.68 → 0.16.0-dev.69

package/dist/grid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-DMq0adkA.cjs");exports.DEFAULT_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_DATE_LOCALE=e.DEFAULT_LOCALE;exports.DateCellRenderer=e.DateCellRenderer;exports.GRID_ALIGN_RIGHT_CLASS=e.GRID_ALIGN_RIGHT_CLASS;exports.GRID_ROOT_CLASS=e.GRID_ROOT_CLASS;exports.GRID_ROW_HEIGHT=e.ROW_HEIGHT;exports.GRID_SELECTION_COLUMN_ID=e.GRID_SELECTION_COLUMN_ID;exports.GRID_THEME_PARAMS=e.GRID_THEME_PARAMS;exports.Grid=e.Grid;exports.GridAppearance=e.GridAppearance;exports.GridColorScheme=e.GridColorScheme;exports.GridSelectionMode=e.GridSelectionMode;exports.baseColumnComparator=e.baseColumnComparator;exports.checkColDefsChanges=e.checkColDefsChanges;exports.convertToDate=e.convertToDate;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-VFKHZI-J.cjs");exports.DEFAULT_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_DATE_LOCALE=e.DEFAULT_LOCALE;exports.DateCellRenderer=e.DateCellRenderer;exports.GRID_ALIGN_RIGHT_CLASS=e.GRID_ALIGN_RIGHT_CLASS;exports.GRID_ROOT_CLASS=e.GRID_ROOT_CLASS;exports.GRID_ROW_HEIGHT=e.ROW_HEIGHT;exports.GRID_SELECTION_COLUMN_ID=e.GRID_SELECTION_COLUMN_ID;exports.GRID_THEME_PARAMS=e.GRID_THEME_PARAMS;exports.Grid=e.Grid;exports.GridAppearance=e.GridAppearance;exports.GridColorScheme=e.GridColorScheme;exports.GridSelectionMode=e.GridSelectionMode;exports.baseColumnComparator=e.baseColumnComparator;exports.checkColDefsChanges=e.checkColDefsChanges;exports.convertToDate=e.convertToDate;

package/dist/migration-guides/0.16.0/grid-empty-state-pattern.md

@@ -0,0 +1,100 @@
+# Migrating the `Grid` empty state to the Patterns 2.0 empty-state behaviour — v0.15 → v0.16.0
+
+## Why this changed
+
+The Patterns 2.0 empty-state spec has two cases: a list with nothing in it
+yet ("No [entities] yet", optionally with an action) and a list that a
+search or filter emptied ("No [entities] found", announced). The `Grid` drew
+neither correctly:
+
+- it showed a 100px `IconZoomCancel` instead of the shared placeholder-list
+  card every other empty list uses;
+- its default copy ("No results found" / "Sorry, we couldn't find any results
+  for your search.") talked about a search even when the grid simply had no
+  rows;
+- it announced the no-rows message as a `role="status"` region every time,
+  including on first load;
+- when the column filters left no rows, ag-Grid's own unstyled
+  no-matching-rows overlay appeared, because only the no-rows overlay was
+  replaced;
+- there was no way to put an action under the message.
+
+## What changed
+
+| Before                                                           | After                                                                                              |
+| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| Default illustration `IconZoomCancel`                            | The shared `NoDataContent` card; `emptyStateIcon` still overrides it                               |
+| `emptyStateTitle` default `'No results found'`                   | `'No items yet'`                                                                                   |
+| `emptyStateDescription` default `"Sorry, we couldn't find any…"` | `'Items will appear here once they are added.'`                                                    |
+| No-rows message always announced (`role="status"`)               | Announced only with `emptyStateLive`                                                               |
+| Column filters leaving no rows show ag-Grid's default overlay    | `filteredEmptyStateTitle` (`'No items found'`) / `filteredEmptyStateDescription`, always announced |
+| No action                                                        | `emptyStateAction`, shown when there are no rows                                                   |
+| `noRowsOverlayComponent` set by the grid                         | `overlayComponentSelector` + `overlayComponentParams` set by the grid                              |
+
+## Step-by-step migration
+
+### 1. Find all usages
+
+```bash
+grep -rnE "<Grid\b" src/
+grep -rnE "emptyState(Title|Description|Icon)" src/
+```
+
+### 2. Name your entities in the copy
+
+The defaults are generic. Pass the entity in both cases:
+
+```tsx
+<Grid
+  columnDefs={columns}
+  rowData={files}
+  emptyStateTitle="No files yet"
+  emptyStateDescription="Files will appear here once you upload one."
+  emptyStateAction={<OutlinedButton label="Upload" onClick={upload} />}
+  filteredEmptyStateTitle="No files found"
+/>
+```
+
+### 3. A host that filters `rowData` itself
+
+If your search box lives outside the grid and you pass the filtered rows in,
+the grid sees no rows at all, not a filter. Switch the copy on the query and
+turn on the announcement:
+
+**Before:**
+
+```tsx
+<Grid rowData={visibleFiles} emptyStateTitle="No files found" />
+```
+
+**After:**
+
+```tsx
+<Grid
+  rowData={visibleFiles}
+  emptyStateTitle={query ? 'No files found' : 'No files yet'}
+  emptyStateDescription={
+    query
+      ? 'Try a different search term.'
+      : 'Files will appear here once you upload one.'
+  }
+  emptyStateLive={!!query}
+/>
+```
+
+### 4. Drop a custom illustration
+
+Remove `emptyStateIcon` unless the grid is not a list of things the user owns
+— every empty list should show the same card.
+
+### 5. Tests
+
+A test that found the empty grid with `getByRole('status')` now needs
+`emptyStateLive`, a column filter that leaves no rows, or a text query.
+
+### 6. Overriding the overlay yourself
+
+If you passed `additionalGridOptions.noRowsOverlayComponent`, the grid's
+`overlayComponentSelector` now takes precedence for the no-rows and
+no-matching-rows overlays. Pass your own `overlayComponentSelector` in
+`additionalGridOptions` instead.

package/dist/migration-guides/README.md

@@ -34,6 +34,7 @@ migration-guides/
 | 0.16.0 | [legacy-file-manager-removal](0.16.0/legacy-file-manager-removal.md) | Legacy `DialFileManager`, its helpers and the `./file-manager` subpath removed; import them from `@epam/ai-dial-react-file-manager` |
 | 0.16.0 | [caption-text-no-alert-role](0.16.0/caption-text-no-alert-role.md) | `CaptionText` / `ErrorText` drop `role="alert"`; 2.0 fields link their error and caption through `aria-describedby` |
 | 0.16.0 | [legacy-analytics-and-steps-removal](0.16.0/legacy-analytics-and-steps-removal.md) | Legacy `DialAnalytics*` components and 1.0 `DialSteps` removed; use the 2.0 `Analytics*` components and `Steps` |
+| 0.16.0 | [grid-empty-state-pattern](0.16.0/grid-empty-state-pattern.md) | `Grid` empty state: shared illustration, "yet"/"found" copy with new `filteredEmptyState*`, `emptyStateAction` and `emptyStateLive`; no-rows message no longer announced by default |
 | 0.16.0 | [unused-legacy-components-removal](0.16.0/unused-legacy-components-removal.md) | 34 unused 1.0 components (`DialSelect`, `DialPopup`, `DialGrid`, `LazyDialJsonEditor` …) and `DialSchemaRenderer` removed in favour of their 2.0 counterparts; Monaco is no longer a peer |
 
 ---

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

@@ -34,12 +34,26 @@ export interface GridProps<T extends object = Record<string, unknown>> {
     alternateOddRowColors?: boolean;
     /** Placeholder of the column filter inputs. */
     filterPlaceholder?: string;
-    /** Illustration of the empty state. */
+    /**
+     * Illustration of both empty states. Defaults to the shared placeholder-list
+     * card of `NoDataContent`; leave it unset so every empty list looks the same.
+     */
     emptyStateIcon?: ReactNode;
-    /** Headline of the empty state. */
+    /** Headline when there are no rows, as "No [entities] yet". */
     emptyStateTitle?: string;
-    /** Secondary line of the empty state. */
+    /** Secondary line when there are no rows, as "[Entities] will appear here once [condition]." */
     emptyStateDescription?: string;
+    /** Way forward when there are no rows, such as a create button. */
+    emptyStateAction?: ReactNode;
+    /**
+     * Announces the no-rows message. Turn it on when the host filters `rowData`
+     * itself, so the grid is empty because of a search. Defaults to `false`.
+     */
+    emptyStateLive?: boolean;
+    /** Headline when the column filters leave no rows, as "No [entities] found". */
+    filteredEmptyStateTitle?: string;
+    /** Secondary line when the column filters leave no rows. */
+    filteredEmptyStateDescription?: string;
     /** Shows the loading overlay. Defaults to `false`. */
     loading?: boolean;
     /** Draws a border around the grid. Defaults to `true`. */
@@ -75,6 +89,13 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * columns sized to the available width, a row context menu, truncation
  * tooltips, and an empty state.
  *
+ * The empty state follows the Patterns 2.0 empty-state behaviour and has two
+ * forms. A grid with no rows says "No [entities] yet" and can offer an action;
+ * a grid whose column filters leave nothing says "No [entities] found" and is
+ * announced, since the user has just changed a filter. A host that filters
+ * `rowData` itself passes the "found" copy as `emptyStateTitle` and sets
+ * `emptyStateLive`.
+ *
  * 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
@@ -107,6 +128,16 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  *   getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}
  * />
  *
+ * // An empty grid with a way forward
+ * <Grid<Product>
+ *   columnDefs={columns}
+ *   rowData={[]}
+ *   emptyStateTitle="No products yet"
+ *   emptyStateDescription="Products will appear here once you add one."
+ *   emptyStateAction={<OutlinedButton label="Add product" onClick={addProduct} />}
+ *   filteredEmptyStateTitle="No products found"
+ * />
+ *
  * // Dark native controls, including the date-filter calendar
  * <Grid<Product> columnDefs={columns} rowData={products} colorScheme={GridColorScheme.Dark} />
  * ```
@@ -125,9 +156,13 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @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 [emptyStateIcon] - Illustration of both empty states. Defaults to the shared placeholder-list card.
+ * @param [emptyStateTitle='No items yet'] - Headline when there are no rows.
+ * @param [emptyStateDescription='Items will appear here once they are added.'] - Secondary line when there are no rows.
+ * @param [emptyStateAction] - Way forward when there are no rows.
+ * @param [emptyStateLive=false] - Announce the no-rows message; for a host that filters `rowData` itself.
+ * @param [filteredEmptyStateTitle='No items found'] - Headline when the column filters leave no rows.
+ * @param [filteredEmptyStateDescription='Try a different search term or check your filters.'] - Secondary line when the column filters leave no rows.
  * @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.
@@ -138,4 +173,4 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [colorScheme='light'] - AG Grid color scheme. `dark` paints native controls dark.
  * @param [appearance='default'] - Visual treatment; `chat` draws the borderless "Chat table".
  */
-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, colorScheme, appearance, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, emptyStateAction, emptyStateLive, filteredEmptyStateTitle, filteredEmptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, appearance, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;

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

@@ -0,0 +1,21 @@
+import { IOverlayParams, OverlaySelectorFunc } from 'ag-grid-community';
+import { NoDataContentProps } from '../../NoDataContent/NoDataContent';
+/** What the grid shows for each of its two empty states. */
+export interface GridEmptyStateParams {
+    /** The grid has no rows at all. */
+    empty: NoDataContentProps;
+    /** The grid has rows, but its column filters leave none of them. */
+    filtered: NoDataContentProps;
+}
+export type GridEmptyStateProps = IOverlayParams & GridEmptyStateParams;
+/**
+ * The grid's no-rows and no-matching-rows overlays, both drawn with
+ * {@link NoDataContent} so an empty grid looks like every other empty list.
+ */
+export declare const GridEmptyState: ({ overlayType, empty, filtered, }: GridEmptyStateProps) => import('react/jsx-runtime').JSX.Element;
+/**
+ * Hands the two empty overlays to {@link GridEmptyState} and leaves the rest —
+ * loading, exporting — to ag-Grid. The selector is read once, so what the
+ * overlay shows travels in `overlayComponentParams`, which ag-Grid refreshes.
+ */
+export declare const selectGridEmptyStateOverlay: OverlaySelectorFunc;

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

@@ -29,6 +29,14 @@ export interface NoDataContentProps {
  * secondary line and an optional action. The icon is decorative, so it is
  * hidden from assistive tech and the text carries the message on its own.
  *
+ * Copy follows the Patterns 2.0 empty-state behaviour:
+ * - default: "No [entities] yet" / "[Entities] will appear here once [condition]."
+ * - Shared with me: "No [entities] yet" / "[Entities] other people share with you will show up here."
+ * - after a search or filter: "No [entities] found" / "Try a different search
+ *   term or check your filters." — drop the part the list does not have — with `live`.
+ *
+ * Leave `icon` unset in a list, so every empty list shows the same card.
+ *
  * @example
  * ```tsx
  * <NoDataContent

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

@@ -41,6 +41,10 @@ export interface SelectProps {
     emptyStateTitle?: string;
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
+    /** Title when the search leaves no options, as "No [entities] found". Falls back to `emptyStateTitle`. */
+    filteredEmptyStateTitle?: string;
+    /** Description when the search leaves no options. Falls back to `emptyStateDescription`. */
+    filteredEmptyStateDescription?: string;
     disabled?: boolean;
     className?: string;
     fieldClassName?: string;
@@ -113,6 +117,8 @@ export interface SelectProps {
  * @param [emptyStateTitle="No options available"] - Title text when there are no options.
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.
+ * @param [filteredEmptyStateTitle] - Title when the search leaves no options, as "No [entities] found". Falls back to `emptyStateTitle`; the message is announced.
+ * @param [filteredEmptyStateDescription] - Description when the search leaves no options, as "Try a different search term". Falls back to `emptyStateDescription`.
  * @param [invalid] - Whether the select is in an invalid state, affecting styling.
  * @param [disabled=false] - Disable the control.
  * @param [className] - Additional CSS classes for the outer container.

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

@@ -13,8 +13,8 @@
  * icon, a menu item, a segmented-control segment — can match the ones the
  * components draw themselves.
  *
- * Two deliberate departures inside the library: the empty-state illustrations
- * (`NoDataContent`, the grid's no-rows overlay) use a much lighter stroke,
+ * Two deliberate departures inside the library: an icon passed as an
+ * empty-state illustration (`NoDataContent`'s `icon`) uses a much lighter stroke,
  * since a 1.5px line reads as a drawing at 16px and as a fence at 100px; and
  * the checkbox glyph uses a heavier one, because it is a control mark sized to
  * a 14px box rather than an icon from the set.

package/package.json

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