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

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

@@ -3,9 +3,10 @@ import { BreadcrumbsSize } from '../../../types/breadcrumbs';
 /**
  * The `<nav>`. It clips rather than wraps: a breadcrumb that reflows onto a
  * second line moves the content below it, so the trail truncates its segments
- * instead (see `segmentWidthClassName`).
+ * instead (see `segmentWidthClassName`). The tiny trail does not clip at all,
+ * so a segment's focus ring stays whole; its segments truncate on their own.
  */
-export declare const navClassName = "w-full overflow-hidden";
+export declare const navClassName: Record<BreadcrumbsSize, string>;
 /** The `<ol>` holding the segments and their separators. */
 export declare const listClassName = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap";
 /** One `<li>`: the segment and the separator that follows it. */
@@ -21,20 +22,25 @@ export declare const sizeClassName: Record<BreadcrumbsSize, string>;
  * variant that does not exist.
  */
 export declare const currentSizeClassName: Record<BreadcrumbsSize, string>;
+type SegmentPosition = 'first' | 'middle' | 'last';
 /**
- * How each segment gives up width when the trail does not fit. The root keeps
- * its full label — it is the anchor the user navigates back to — the middle
- * segments truncate first, and the current page keeps the largest share of
- * what is left, since it names where the user actually is.
+ * The tiny trail caps nothing, so a trail that fits is never truncated. Its
+ * middle segments shrink a thousand times faster than the current page, down
+ * to a letter and their chevron; only then does the current page give way.
  */
-export declare const segmentWidthClassName: Record<'first' | 'middle' | 'last', string>;
+export declare const segmentWidthClassName: Record<BreadcrumbsSize, Record<SegmentPosition, string>>;
+/**
+ * The focus ring's shape, shared by the segments and the ellipsis button. The
+ * tiny trail draws the design's 1px offset around a 4px radius.
+ */
+export declare const focusRingClassName: Record<BreadcrumbsSize, string>;
 /** The box that draws a segment, around its icon and its label. */
-export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors";
+export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 transition-colors";
 /**
  * A segment the user can follow. Secondary until hovered, then accent — the
  * same pairing the kit's other inline links use.
  */
-export declare const linkSegmentClassName = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+export declare const linkSegmentClassName = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-focus";
 /**
  * The last segment: where the user is. Semibold and primary, and never a
  * link — a control that navigates to the page it is on has nothing to do.
@@ -49,7 +55,7 @@ export declare const separatorClassName = "inline-flex flex-none items-center le
  * glyph to the 24×24 of WCAG 2.5.8; the enhanced 44×44 target would overhang
  * the segments on either side of it (see the README exception table).
  */
-export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-focus";
 /**
  * Smallest trail the collapse can produce: the root, the ellipsis and the
  * current page. Below that there is nothing left to hide behind the ellipsis.
@@ -58,3 +64,4 @@ export declare const MIN_VISIBLE_ITEMS = 3;
 /** Segments shown before the trail collapses. */
 export declare const DEFAULT_MAX_VISIBLE_ITEMS = 4;
 export declare const defaultSeparator: ReactNode;
+export {};

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/dist/src/types/breadcrumbs.d.ts

@@ -1,6 +1,12 @@
 export declare enum BreadcrumbsSize {
     /** 14px `dial-small-text`, with a `dial-small-semi-text` current page. */
     Small = "small",
+    /**
+     * 12px `dial-tiny-text`, with a `dial-tiny-semi-text` current page: a 16px
+     * trail for a dense header. It never clips, so a focus ring stays whole, and
+     * nothing is capped: the middle truncates first, the current page last.
+     */
+    Tiny = "tiny",
     /**
      * 18px `dial-h2-text`, for a trail that doubles as the page heading. The
      * token is semibold, so every segment is — including the current page.

package/dist/types/breadcrumbs.js

@@ -1,4 +1,4 @@
-var l = /* @__PURE__ */ ((a) => (a.Small = "small", a.Heading = "heading", a))(l || {});
+var l = /* @__PURE__ */ ((n) => (n.Small = "small", n.Tiny = "tiny", n.Heading = "heading", n))(l || {});
 export {
   l as BreadcrumbsSize
 };

package/package.json

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