@epam/ai-dial-ui-kit 0.15.0 → 0.15.2

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

@@ -2,6 +2,7 @@ import { ColDef, GridApi, GridOptions } from 'ag-grid-community';
 import { ReactNode } from 'react';
 import { DropdownItem } from '../../../models/dropdown';
 import { GridSelectionMode } from '../../../models/selection-mode';
+import { GridColorScheme } from '../../../types/grid';
 /** 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>> {
@@ -53,6 +54,12 @@ export interface GridProps<T extends object = Record<string, unknown>> {
     selectRowLabel?: (row: T) => string;
     /** Accessible name of the select-all control. Defaults to `'Select all rows'`. */
     selectAllLabel?: string;
+    /**
+     * AG Grid color scheme. `dark` selects the dark theme part and asks the
+     * browser to paint native controls — the date filter calendar, scrollbars —
+     * dark. Defaults to `light`, which leaves the current appearance unchanged.
+     */
+    colorScheme?: GridColorScheme;
 }
 /**
  * A data grid built on ag-Grid, wired to the 2.0 tokens and controls.
@@ -94,6 +101,9 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  *   selectRowLabel={(row) => `Select ${row.name}`}
  *   getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}
  * />
+ *
+ * // Dark native controls, including the date-filter calendar
+ * <Grid<Product> columnDefs={columns} rowData={products} colorScheme={GridColorScheme.Dark} />
  * ```
  *
  * @param [columnDefs] - Column definitions, in ag-Grid `ColDef` format.
@@ -120,5 +130,6 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @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.
+ * @param [colorScheme='light'] - AG Grid color scheme. `dark` paints native controls dark.
  */
-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;
+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, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,6 +10,13 @@ export declare const popupFooterClassName = "flex flex-row items-center gap-2 px
 export declare const popupFooterDividerClassName = "border-t border-tertiary";
 /** Groups the controls sitting on one side of the header or footer. */
 export declare const popupActionsGroupClassName = "flex shrink-0 flex-row items-center gap-2";
+/**
+ * Trailing footer group. Below the `mobile` breakpoint it spans the footer and
+ * every button in it takes an equal share, so a Cancel/Confirm pair splits 50/50.
+ */
+export declare const popupMainActionsGroupClassName = "ml-auto mobile:flex-1";
+/** Applied to each button in the trailing footer group. */
+export declare const popupMainActionButtonClassName = "mobile:flex-1";
 /**
  * Max widths per size. Full width below the `md` breakpoint, where the popup
  * fills the screen.

package/dist/src/index.d.ts

@@ -294,6 +294,7 @@ export { DEFAULT_TRANSFER_QUEUE_LABELS, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS, } fr
 export { TransferQueueItemStatus } from './types/transfer-queue';
 export { Grid, GRID_SELECTION_COLUMN_ID } from './components/New/Grid/Grid';
 export type { GridProps } from './components/New/Grid/Grid';
+export { GridColorScheme } from './types/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';

package/dist/src/subpaths/grid.d.ts

@@ -16,6 +16,7 @@ export { DEFAULT_DATE_FORMAT_OPTIONS as DEFAULT_GRID_DATE_FORMAT_OPTIONS, DEFAUL
 export { convertToDate as convertGridDateToDate } from '../components/Grid/renderers/utils';
 export { Grid, GRID_SELECTION_COLUMN_ID } from '../components/New/Grid/Grid';
 export type { GridProps } from '../components/New/Grid/Grid';
+export { GridColorScheme } from '../types/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';

package/dist/src/types/grid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Color scheme `Grid` passes to AG Grid. It selects the light or dark theme
+ * part and the browser `color-scheme` native controls inside the grid follow.
+ */
+export declare enum GridColorScheme {
+    Light = "light",
+    Dark = "dark"
+}

package/dist/types/grid.js

@@ -0,0 +1,4 @@
+var t = /* @__PURE__ */ ((r) => (r.Light = "light", r.Dark = "dark", r))(t || {});
+export {
+  t as GridColorScheme
+};