@epam/ai-dial-ui-kit 0.5.0-rc.8 → 0.5.0-rc.80

package/dist/src/components/Grid/hooks/use-grid-selection.d.ts

@@ -1,12 +1,15 @@
-export interface UseGridSelectionProps<T> {
+export interface UseGridSelectionProps<T extends object> {
     selectedRowIds?: Set<string>;
+    selectedRows?: Map<string, T>;
     onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    onSelectionChangeWithMap?: (selectedRows: Map<string, T>) => void;
     rowData?: T[];
     getRowId: (row: T) => string;
 }
-export declare const useGridSelection: <T extends object>({ selectedRowIds, onSelectionChange, rowData, getRowId, }: UseGridSelectionProps<T>) => {
+export declare const useGridSelection: <T extends object>({ selectedRowIds, selectedRows, onSelectionChange, onSelectionChangeWithMap, rowData, getRowId, }: UseGridSelectionProps<T>) => {
     currentSelectedIds: Set<string>;
-    handleSelectionToggle: (rowId: string, checked: boolean) => void;
+    currentSelectedRows: Map<string, T>;
+    handleSelectionToggle: (row: T, checked: boolean) => void;
     headerCheckboxState: string;
-    handleHeaderCheckboxChange: () => void;
+    handleHeaderCheckboxChange: (checked?: boolean) => void;
 };

package/dist/src/components/Grid/renderers/DateCellRenderer.d.ts

@@ -6,7 +6,7 @@ export interface DialDateCellRendererProps extends Partial<ICellRendererParams<R
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
     emptyPlaceholder?: string;
-    cssClass?: string;
+    className?: string;
 }
 /**
  * Minimal date cell renderer (ag-Grid compatible).
@@ -26,7 +26,7 @@ export interface DialDateCellRendererProps extends Partial<ICellRendererParams<R
  *
  * @param [locale='en-US'] - Locale fixed to U.S. English by default to enforce "Jul 20, 2025".
  * @param [options={ year: 'numeric', month: 'numeric', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'UTC' }] - Options for date formatting (e.g., timeZone).
- * @param [emptyPlaceholder='—'] - Placeholder when value is empty/invalid.
- * @param [cssClass] - Additional classes merged into the wrapper.
+ * @param [emptyPlaceholder] - Placeholder when value is empty/invalid.
+ * @param [className] - Additional classes merged into the wrapper.
  */
 export declare const DialDateCellRenderer: FC<DialDateCellRendererProps>;

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

@@ -1,3 +1,3 @@
 export declare const DEFAULT_LOCALE = "en-US";
 export declare const DEFAULT_DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions;
-export declare const dateCellBaseClasses = "text-primary";
+export declare const dateCellBaseClassName = "text-primary";

package/dist/src/components/Icon/Icon.d.ts

@@ -2,7 +2,6 @@ import { FC, ReactNode } from 'react';
 export interface DialIconProps {
     icon?: ReactNode;
     className?: string;
-    label?: string;
 }
 /**
  * A wrapper component for rendering icons with consistent styling

package/dist/src/components/Input/Input.d.ts

@@ -2,8 +2,8 @@ import { FC, FocusEvent, Ref } from 'react';
 import { InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
 export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseProps> {
     type?: string;
-    containerCssClass?: string;
-    cssClass?: string;
+    containerClassName?: string;
+    className?: string;
     hideBorder?: boolean;
     tooltipText?: string;
     tooltipTriggerClassName?: string;
@@ -31,8 +31,8 @@ export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseP
  * - {@link NumberInputBaseProps} - Number input properties (min, max) - partial
  *
  * @param type - The HTML input type (text, password, email, number, etc.)
- * @param containerCssClass - Additional CSS classes to apply to the container div
- * @param cssClass - Additional CSS classes to apply to the input element
+ * @param containerClassName - Additional CSS classes to apply to the container div
+ * @param className - Additional CSS classes to apply to the input element
  * @param hideBorder - Whether to hide the input border styling
  * @param tooltipText - The text to display inside the tooltip. If empty, the tooltip will display the value prop.
  * @param tooltipTriggerClassName - Additional CSS classes to apply to the tooltip

package/dist/src/components/InputField/InputField.d.ts

@@ -5,9 +5,9 @@ export interface DialInputFieldBaseProps extends FieldControlProps, DialFormItem
     value?: string | number;
     defaultEmptyText?: string;
     errorText?: string;
-    elementCssClass?: string;
-    elementContainerCssClass?: string;
-    containerCssClass?: string;
+    elementClassName?: string;
+    elementContainerClassName?: string;
+    containerClassName?: string;
 }
 export interface DialInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
     type: string;

package/dist/src/components/InputPopup/InputPopup.d.ts

@@ -5,8 +5,8 @@ export interface DialInputPopupProps {
     children: ReactNode;
     onOpen: () => void;
     disabled?: boolean;
-    valueCssClasses?: string;
-    inputCssClasses?: string;
+    valueClassName?: string;
+    inputClassName?: string;
     placeholder?: string;
     elementId?: string;
     errorText?: string;
@@ -26,8 +26,8 @@ export interface DialInputPopupProps {
  *   emptyValueText="No value selected"
  *   onOpen={() => setModalState(true)}
  *   disabled={false}
- *   valueCssClasses="custom-value-class"
- *   inputCssClasses="custom-input-class"
+ *   valueClassName="custom-value-class"
+ *   inputClassName="custom-input-class"
  *   elementId="input-modal"
  *   errorText="This field is required"
  * >
@@ -41,8 +41,8 @@ export interface DialInputPopupProps {
  * @param children - The content to render inside the modal when it is opened.
  * @param onOpen - A callback function triggered when the modal open button is clicked.
  * @param [disabled=false] - Whether the input is disabled, preventing user interaction.
- * @param [valueCssClasses] - Additional CSS classes applied to the displayed value.
- * @param [inputCssClasses] - Additional CSS classes applied to the input container.
+ * @param [valueClassName] - Additional CSS classes applied to the displayed value.
+ * @param [inputClassName] - Additional CSS classes applied to the input container.
  * @param [elementId] - A unique identifier for the input element, useful for accessibility and testing.
  * @param [errorText] - An optional error message displayed below the input when an error state is present.
  * @param [invalid] - Whether the input is in an invalid state, affecting styling. Applyed automatically if errorText is provided.

package/dist/src/components/Loader/Loader.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 export interface DialLoaderProps {
     size?: number;
-    cssClass?: string;
-    iconClass?: string;
+    className?: string;
+    iconClassName?: string;
     fullWidth?: boolean;
     ariaLabel?: string;
 }
@@ -20,12 +20,12 @@ export interface DialLoaderProps {
  * <DialLoader fullWidth={false} />
  *
  * // Custom size and classes
- * <DialLoader size={24} iconClass="text-accent-primary" />
+ * <DialLoader size={24} iconClassName="text-accent-primary" />
  * ```
  *
  * @param [size=18] - Icon size in px
- * @param [cssClass] - Additional classes for the container
- * @param [iconClass] - Additional classes for the SVG icon
+ * @param [className] - Additional classes for the container
+ * @param [iconClassName] - Additional classes for the SVG icon
  * @param [fullWidth=true] - Stretch to full width/height of container
  * @param [ariaLabel='Loading'] - Accessible label for screen readers
  */

package/dist/src/components/Loader/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const loaderBaseClasses = "flex items-center justify-center text-secondary";
-export declare const loaderIconBaseClasses = "shrink-0 grow-0 basis-auto animate-spin-steps";
+export declare const loaderBaseClassName = "flex items-center justify-center text-secondary";
+export declare const loaderIconBaseClassName = "shrink-0 grow-0 basis-auto animate-spin-steps";

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

@@ -3,9 +3,9 @@ export interface DialNoDataContentProps {
     icon?: ReactNode;
     title: string;
     description?: string;
-    containerCssClass?: string;
-    titleCssClass?: string;
-    descriptionCssClass?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
 }
 /**
  * A component for displaying a message and icon when there is no data to show.
@@ -21,5 +21,8 @@ export interface DialNoDataContentProps {
  * @param [icon] - Custom icon to display (defaults to clipboard icon)
  * @param title - The message to display when no data is present
  * @param [description] - The description to display when no data is present
+ * @param [containerClassName] - Additional CSS classes for the container
+ * @param [titleClassName] - Additional CSS classes for the title text
+ * @param [descriptionClassName] - Additional CSS classes for the description text
  */
 export declare const DialNoDataContent: FC<DialNoDataContentProps>;

package/dist/src/components/PasswordInput/PasswordInputField.d.ts

@@ -24,6 +24,6 @@ export interface DialPasswordInputFieldProps extends DialInputFieldBaseProps {
  * @param [onChange] - Callback function called when the input value changes
  * @param [errorText] - Error message to display below the input
  * @param [optional=false] - Whether the field is optional
- * @param [cssClass] - Custom CSS class for the input element
+ * @param [className] - Custom CSS class for the input element
  */
 export declare const DialPasswordInputField: FC<DialPasswordInputFieldProps>;

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

@@ -4,9 +4,9 @@ export interface DialPopupProps {
     open?: boolean;
     title?: string | ReactNode;
     portalId?: string;
-    cssClass?: string;
-    overlayClass?: string;
-    headingClass?: string;
+    className?: string;
+    overlayClassName?: string;
+    headingClassName?: string;
     dividers?: boolean;
     children?: ReactNode;
     footer?: ReactNode;
@@ -40,9 +40,9 @@ export interface DialPopupProps {
  * @param [open=false] - Controls visibility of the popup
  * @param [title] - Optional title rendered in the header
  * @param [portalId] - Optional portal container id
- * @param [cssClass] - Additional CSS classes applied to the popup container
- * @param [overlayClass] - Additional CSS classes applied to the overlay
- * @param [headingClass] - Additional CSS classes applied to the title element
+ * @param [className] - Additional CSS classes applied to the popup container
+ * @param [overlayClassName] - Additional CSS classes applied to the overlay
+ * @param [headingClassName] - Additional CSS classes applied to the title element
  * @param [dividers=true] - Whether to render separators between sections
  * @param [children] - Body content
  * @param [footer] - Footer area for actions

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

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../types/popup';
-export declare const overlayBaseClasses = "z-[52] flex items-center justify-center bg-blackout md:p-4";
-export declare const popupDividerClasses = "divide-tertiary divide-y";
-export declare const popupHeaderClasses = "flex flex-row justify-between py-4 px-6 items-center";
+export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
+export declare const popupDividerClassName = "divide-tertiary divide-y";
+export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;

package/dist/src/components/RadioButton/RadioButton.d.ts

@@ -6,11 +6,11 @@ export interface DialRadioButtonProps {
     description?: ReactNode;
     checked?: boolean;
     inputId: string;
-    cssClass?: string;
-    labelCssClass?: string;
+    className?: string;
+    labelClassName?: string;
     disabled?: boolean;
     onChange?: (value: string) => void;
-    descriptionCssClass?: string;
+    descriptionClassName?: string;
 }
 /**
  * A stylized, accessible radio input with optional description.
@@ -37,10 +37,10 @@ export interface DialRadioButtonProps {
  * @param [description] - Supporting text shown when checked
  * @param [checked=false] - Controlled checked state
  * @param inputId - ID associated with the label
- * @param [cssClass] - Additional classes applied to the input element
- * @param [labelCssClass] - Additional classes applied to the label element
+ * @param [className] - Additional classes applied to the input element
+ * @param [labelClassName] - Additional classes applied to the label element
  * @param [disabled] - Disabled state of the control
  * @param [onChange] - Callback fired with `value` when the radio is changed
- * @param [descriptionCssClass] - Additional classes applied to the description block
+ * @param [descriptionClassName] - Additional classes applied to the description block
  */
 export declare const DialRadioButton: FC<DialRadioButtonProps>;

package/dist/src/components/RadioGroup/RadioGroup.d.ts

@@ -9,16 +9,16 @@ export interface DialRadioGroupProps {
     activeRadioButton: string;
     orientation: RadioGroupOrientation;
     onChange: (radioId: string) => void;
-    radioCssClass?: string;
-    groupLabelCssClass?: string;
-    labelCssClass?: string;
-    containerCssClass?: string;
-    formItemChildrenCssClass?: string;
-    selectedItemCssClass?: string;
-    selectedLabelCssClass?: string;
-    radioGroupCssClass?: string;
-    inputContainerCssClass?: string;
-    selectedInputContainerCssClass?: string;
+    radioClassName?: string;
+    groupLabelClassName?: string;
+    labelClassName?: string;
+    containerClassName?: string;
+    formItemChildrenClassName?: string;
+    selectedItemClassName?: string;
+    selectedLabelClassName?: string;
+    radioGroupClassName?: string;
+    inputContainerClassName?: string;
+    selectedInputContainerClassName?: string;
 }
 /**
  * Groups multiple `DialRadio` options and renders custom content for the active option.
@@ -43,16 +43,16 @@ export interface DialRadioGroupProps {
  *
  * @param [fieldTitle] - Optional label rendered by `DialField`
  * @param elementId - Name for the underlying radio group; also used for input `name`
- * @param [radioCssClass] - Additional classes applied to each radio input
- * @param [inputContainerCssClass] - Additional classes applied to each radio input's container
- * @param [selectedInputContainerCssClass] - Additional classes applied to the selected radio input's container
- * @param [groupLabelCssClass] - Optional classes applied to the group label. If not provided, `labelCssClass` will be used.
- * @param [formItemChildrenCssClass] - Additional classes applied to the DialFormItem's children container
- * @param [labelCssClass] - Additional classes applied to each radio label
- * @param [containerCssClass] - Additional classes applied to the outer container
- * @param [selectedItemCssClass] - Additional classes applied to the selected option's content container
- * @param [selectedLabelCssClass] - Additional classes applied to the selected option's label
- * @param [radioGroupCssClass] - Additional classes applied to the radio group container
+ * @param [radioClassName] - Additional classes applied to each radio input
+ * @param [inputContainerClassName] - Additional classes applied to each radio input's container
+ * @param [selectedInputContainerClassName] - Additional classes applied to the selected radio input's container
+ * @param [groupLabelClassName] - Optional classes applied to the group label. If not provided, `labelClassName` will be used.
+ * @param [formItemChildrenClassName] - Additional classes applied to the DialFormItem's children container
+ * @param [labelClassName] - Additional classes applied to each radio label
+ * @param [containerClassName] - Additional classes applied to the outer container
+ * @param [selectedItemClassName] - Additional classes applied to the selected option's content container
+ * @param [selectedLabelClassName] - Additional classes applied to the selected option's label
+ * @param [radioGroupClassName] - Additional classes applied to the radio group container
  * @param [disabled] - Disables all child radios when set
  * @param radioButtons - Array of options with ids, labels, and optional content
  * @param activeRadioButton - The id of the currently selected radio

package/dist/src/components/RadioGroup/constants.d.ts

@@ -1,5 +1,5 @@
 import { RadioGroupOrientation } from '../../types/radio-group';
-export declare const groupBaseClasses = "flex flex-col gap-2";
-export declare const optionsWrapperBaseClasses = "flex";
-export declare const selectedContentClasses = "pb-1 mt-2";
+export declare const groupBaseClassName = "flex flex-col gap-2";
+export declare const optionsWrapperBaseClassName = "flex";
+export declare const selectedContentClassName = "pb-1 mt-2";
 export declare const orientationClassMap: Record<RadioGroupOrientation, string>;

package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts

@@ -51,8 +51,8 @@ export interface RadioGroupPopupFieldProps extends Pick<DialFieldLabelProps, 'fi
  * @param [selectedValue] - Current value id used to resolve the displayed option name
  * @param radioButtons - Collection of radio options (id/name)
  * @param [customInputValue] - Custom value text to display instead of a radio option name
- * @param [valueCssClasses] - Extra classes applied to the value text in the collapsed field
- * @param [inputCssClasses] - Extra classes applied to the collapsed input container
+ * @param [valueClassName] - Extra classes applied to the value text in the collapsed field
+ * @param [inputClassName] - Extra classes applied to the collapsed input container
  * @param emptyValueText - Placeholder text when no value is selected
  * @param [onClose] - Callback fired when the popup closes
  * @param title - Title text shown in the popup header

package/dist/src/components/RemoveButton/RemoveButton.d.ts

@@ -1,9 +1,7 @@
-import { FC, MouseEvent } from 'react';
-export interface DialRemoveButtonProps {
-    iconClass?: string;
-    cssClass?: string;
-    ariaLabel?: string;
-    onClick: (e: MouseEvent) => void;
+import { FC } from 'react';
+import { DialButtonProps } from '../Button/Button';
+export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore' | 'iconAfter'> {
+    iconClassName?: string;
 }
 /**
  * A specialized button component for removal or delete actions.
@@ -14,11 +12,11 @@ export interface DialRemoveButtonProps {
  * <DialRemoveButton
  *   label="Delete item"
  *   onClick={handleDelete}
- *   iconClass="text-error"
+ *   iconClassName="text-error"
  * />
  * @component
  * @param {DialRemoveButtonProps} props - The properties for the remove button component.
- * @param {string} [props.iconClass] - Optional CSS class applied to the trash icon for styling or sizing.
+ * @param {string} [props.iconClassName] - Optional CSS class applied to the trash icon for styling or sizing.
  * @returns {JSX.Element} The rendered remove button component.
  */
 export declare const DialRemoveButton: FC<DialRemoveButtonProps>;

package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { DialResizableContainerProps } from './ResizableContainer';
+export interface DialConditionalResizableContainerProps extends DialResizableContainerProps {
+    enabled?: boolean;
+}
+/**
+ * DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
+ *
+ * This component renders its children inside a resizable container only when `enabled` is true.
+ * When `enabled` is false, children are rendered directly without any resizable behavior.
+ *
+ * All other props are the same as `DialResizableContainer`. See the documentation for
+ * `DialResizableContainer` for full details on usage, controlled/uncontrolled modes, sides, and callbacks.
+ *
+ * @example
+ * ```tsx
+ * <DialConditionalResizableContainer
+ *   enabled={!isCollapsed}
+ *   defaultWidth={260}
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   onResize={(w) => console.log('Current width:', w)}
+ *   onResizeStop={(w) => setSidebarWidth(w)}
+ * >
+ *   <Sidebar />
+ * </DialConditionalResizableContainer>
+ * ```
+ *
+ * @param enabled - Whether resizing is enabled. When false, children are rendered directly.
+ * @param children - Content to render inside the container.
+ * @see DialResizableContainer
+ */
+export declare const DialConditionalResizableContainer: FC<DialConditionalResizableContainerProps>;

package/dist/src/components/ResizableContainer/ResizableContainer.d.ts

@@ -0,0 +1,69 @@
+import { ResizableContainerSide } from '../../types/resizable-container';
+import { FC, ReactNode } from 'react';
+export interface DialResizableContainerProps {
+    children: ReactNode;
+    minWidth: number;
+    maxWidth: number;
+    width?: number;
+    defaultWidth: number;
+    onResizeStop?: (width: number) => void;
+    onResize?: (width: number) => void;
+    side?: ResizableContainerSide;
+    resizeHandlerClassName?: string;
+    resizeHandler?: ReactNode;
+}
+/**
+ * DialResizableContainer — A reusable resizable container
+ * supporting both **controlled** and **uncontrolled** width modes.
+ *
+ * Controlled Mode
+ *
+ * Provide `width` and optionally `onResizeStop`:
+ * ```tsx
+ * <DialResizableContainer
+ *   width={sidebarWidth}
+ *   onResizeStop={(w) => setSidebarWidth(w)}
+ *   minWidth={180}
+ *   maxWidth={520}
+ * >
+ *   <Sidebar />
+ * </DialResizableContainer>
+ * ```
+ *
+ * Uncontrolled Mode
+ *
+ * Omit `width` entirely — the component manages its own width:
+ * ```tsx
+ * <DialResizableContainer
+ *   defaultWidth={260}
+ *   minWidth={180}
+ *   maxWidth={520}
+ * >
+ *   <Sidebar />
+ * </DialResizableContainer>
+ * ```
+ *
+ * Features:
+ * - Resize from left or right
+ * - Fully supports controlled & uncontrolled sizing
+ * - Custom resize handler (icon or any ReactNode)
+ * - Callback when resize stops (optional)
+ * - Smooth hover/drag visibility transitions
+ *
+ * @param [children] - Content placed inside the container.
+ * @param [minWidth] - Minimum allowed width (px).
+ * @param [maxWidth] - Maximum allowed width (px).
+ * @param [width] - Controlled width. If omitted → uncontrolled mode.
+ * @param [defaultWidth] - Initial width in uncontrolled mode.
+ * @param [onResizeStop] - Optional callback fired when resize ends.
+ * @param [onResize] - Optional callback fired continuously during resizing with current width.
+ * @param [side=ResizableContainerSide.Right] - Resize handle side.
+ * @param [resizeHandlerClassName] - Optional additional CSS classes.
+ * @param [resizeHandler] - Optional custom handler element.
+ *
+ * @remarks
+ * - In uncontrolled mode, width is stored internally.
+ * - `onResizeStop` is optional in both modes.
+ * - Controlled mode always uses the value from `width`.
+ */
+export declare const DialResizableContainer: FC<DialResizableContainerProps>;

package/dist/src/components/ResizableContainer/components/ResizeHandle.d.ts

@@ -0,0 +1,10 @@
+import { ResizableContainerSide } from '../../../types/resizable-container';
+import { FC, ReactNode } from 'react';
+interface ResizeHandleProps {
+    side: ResizableContainerSide;
+    isResizing: boolean;
+    customHandler?: ReactNode;
+    handlerClassName?: string;
+}
+export declare const ResizeHandle: FC<ResizeHandleProps>;
+export {};

package/dist/src/components/ResizableContainer/components/ResizeIcon.d.ts

@@ -0,0 +1,8 @@
+import { ResizableContainerSide } from '../../../types/resizable-container';
+import { FC } from 'react';
+interface ResizeIconProps {
+    side: ResizableContainerSide;
+    className: string;
+}
+export declare const ResizeIcon: FC<ResizeIconProps>;
+export {};

package/dist/src/components/Search/Search.d.ts

@@ -7,8 +7,8 @@ export interface DialSearchProps {
     disabled?: boolean;
     readonly?: boolean;
     invalid?: boolean;
-    cssClass?: string;
-    containerCssClass?: string;
+    className?: string;
+    containerClassName?: string;
     onChange?: (value: string) => void;
     size?: SearchSize;
     allowClear?: boolean;
@@ -35,8 +35,8 @@ export interface DialSearchProps {
  * @param [disabled=false] - Whether the input is disabled
  * @param [readonly=false] - Whether the input is read-only (non-editable)
  * @param [invalid=false] - Whether the input should be styled as invalid
- * @param [cssClass] - Additional CSS classes applied to the input element
- * @param [containerCssClass] - Additional CSS classes applied to the container
+ * @param [className] - Additional CSS classes applied to the input element
+ * @param [containerClassName] - Additional CSS classes applied to the container
  * @param [onChange] - Callback fired when the input value changes
  * @param [size=SearchSize.Base] - The size of the search input. Uses the {@link SearchSize} enum.
  * @param [allowClear=true] - Whether to show a clear button when there is a value

package/dist/src/components/Search/constants.d.ts

@@ -1,13 +1,13 @@
 export declare const SIZE_CONFIG: {
     small: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };
     base: {
-        textClass: string;
-        containerClass: string;
+        textClassName: string;
+        containerClassName: string;
         iconSize: number;
         iconStroke: number;
     };

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

@@ -1,12 +1,14 @@
-import { FC, ReactNode, MouseEvent } from 'react';
+import { FC, ReactNode, MouseEvent, Ref } from 'react';
 import { SelectOption } from '../../models/select';
 import { SelectSize, SelectVariant } from '../../types/select';
 export interface DialSelectProps {
     options: SelectOption[];
     multiple?: boolean;
+    elementId?: string;
     size?: SelectSize;
     variant?: SelectVariant;
     value?: string | string[];
+    customSelectedValue?: string;
     prefix?: string;
     defaultValue?: string | string[];
     placeholder?: string;
@@ -18,10 +20,11 @@ export interface DialSelectProps {
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
     disabled?: boolean;
-    cssClass?: string;
+    className?: string;
     closable?: boolean;
     header?: ReactNode | (() => ReactNode);
     footer?: ReactNode | (() => ReactNode);
+    dismissRef?: Ref<unknown>;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
     onChange?: (next: string | string[]) => void;
     inlineSearch?: boolean;
@@ -51,10 +54,12 @@ export interface DialSelectProps {
  * ```
  *
  * @param options - Array of options to select from.
+ * @param [elementId] - The id attribute for the select element.
  * @param [multiple] - Whether multiple selections are allowed.
  * @param [size=SelectSize.Md] - Size of the control.
  * @param [variant=SelectVariant.Primary] - Visual variant.
  * @param [value] - Controlled selected value(s).
+ * @param [customSelectedValue] - Custom string to render as the selected value in single mode.
  * @param [prefix] - Prefix for selected value(s).
  * @param [defaultValue] - Uncontrolled initial selected value(s).
  * @param [placeholder="Select..."] - Placeholder text when no selection is made.
@@ -66,7 +71,7 @@ export interface DialSelectProps {
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.
  * @param [disabled=false] - Disable the control.
- * @param [cssClass] - Additional CSS classes for the trigger.
+ * @param [className] - Additional CSS classes for the trigger.
  * @param [closable=false] - Show a close button in the dropdown header.
  * @param [header] - Custom node/function rendered above the options.
  * @param [footer] - Custom node/function rendered below the options.
@@ -74,5 +79,6 @@ export interface DialSelectProps {
  * @param [onChange] - Called when the selection changes.
  * @param [inlineSearch=false] - Render a plain input inside trigger (single mode only).
  * @param [onFooterClick] - Called when the footer element is clicked. When provided, automatically closes the dropdown.
+ * @param [dismissRef] - Ref object to expose a `dismiss` method to programmatically close the select.
  */
 export declare const DialSelect: FC<DialSelectProps>;

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

@@ -1,7 +1,8 @@
-export declare const selectTriggerBaseClasses = "dial-input flex w-full items-center justify-between gap-2 dial-small";
-export declare const selectOverlayBaseClasses = "w-full rounded";
-export declare const selectOptionBaseClasses = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
-export declare const selectOptionSelectedClasses = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClasses = "bg-accent-primary-alpha border-l border-accent-primary border-1";
-export declare const selectOptionDisabledClasses = "opacity-75";
+export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small";
+export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionDisabledClassName = "opacity-75";
+export declare const dropdownMenuMaxHeight = 352;
 export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/SelectField/SelectField.d.ts

@@ -2,9 +2,9 @@ import { FC } from 'react';
 import { DialFormItemProps } from '../FormItem/FormItem';
 import { DialSelectProps } from '../Select/Select';
 import { DialFieldLabelProps } from '../Field/Field';
-export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
-    selectCssClass?: string;
-    containerCssClass?: string;
+export interface DialSelectFieldProps extends Omit<DialSelectProps, 'className' | 'elementId'>, Omit<DialFieldLabelProps, 'htmlFor'>, Omit<DialFormItemProps, 'label' | 'children' | 'value'> {
+    selectClassName?: string;
+    containerClassName?: string;
 }
 /**
  * A Select field wrapper that composes `DialFormItem` and `DialSelect`.
@@ -26,12 +26,12 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>,
  * />
  *
  * @params - Component properties extending:
- * - {@link DialSelectProps} for select options and props, except for cssClass
+ * - {@link DialSelectProps} for select options and props, except for className
  * - {@link DialFormItemProps} for form item props, except for htmlFor
  * - {@link DialFieldLabelProps} for label props, except for label, children, value
  *
- * @param selectCssClass CSS class for the select element
- * @param containerCssClass CSS class for the form item container
+ * @param selectClassName CSS class for the select element
+ * @param containerClassName CSS class for the form item container
  * @param emptyStateTitle Title to show when there are no options
  * @param restSelectProps All other DialSelect props
  * @param restFormItemProps All other DialFormItem props