@epam/ai-dial-ui-kit 0.4.0-rc.5 → 0.4.0-rc.50

package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts

@@ -0,0 +1,20 @@
+import { DialFile } from '../../../models/file';
+import { DialCopiedItem } from '../../../types/file-manager';
+export interface UseFileClipboardOptions {
+    getDestination: () => string;
+    getDestinationFiles: () => DialFile[];
+    getSourceFiles: () => DialFile[];
+    onCopyFiles?: (items: DialCopiedItem[]) => void;
+    onMoveToFiles?: (items: DialCopiedItem[]) => void;
+}
+export declare const useFileClipboard: ({ getDestination, getDestinationFiles, getSourceFiles, onCopyFiles, onMoveToFiles, }: UseFileClipboardOptions) => {
+    state: {
+        copied: Set<string>;
+        cut: Set<string>;
+        hasItems: boolean;
+    };
+    copy: (files: string[]) => void;
+    cut: (files: string[]) => void;
+    paste: (overwrite?: boolean) => void;
+    clear: () => void;
+};

package/dist/src/components/FileManager/hooks/use-file-manager-context.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to read the File Manager context.
+ * Throws if used outside of the provider.
+ */
+export declare const useFileManagerContext: () => import('../FileManagerContext').FileManagerContextValue;

package/dist/src/components/FileManager/hooks/use-show-hidden-files.d.ts

@@ -0,0 +1,5 @@
+export declare const useShowHiddenFiles: (initialState?: boolean) => {
+    areHiddenFilesVisible: boolean;
+    toggleHiddenFilesVisibility: () => void;
+    setAreHiddenFilesVisible: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+};

package/dist/src/components/FileManager/utils.d.ts

@@ -3,3 +3,4 @@ export declare const findFolderForPath: (root: DialFile[] | undefined, path?: st
 export declare const normalizeToLowerCase: (input?: string) => string;
 export declare const normalizeExtensionWithoutDot: (input?: string) => string;
 export declare const collectAllDescendants: (folder?: DialFile) => DialFile[];
+export declare const isHiddenDotFile: (node: DialFile) => boolean;

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

@@ -1,4 +1,5 @@
 import { ColDef, GridOptions } from 'ag-grid-community';
+import { ReactNode } from 'react';
 import { DropdownItem } from '../../models/dropdown';
 export interface DialGridProps<T extends object = Record<string, unknown>> {
     columnDefs?: ColDef<T>[];
@@ -14,6 +15,9 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
     getRowId?: (row: T) => string;
     alternateOddRowColors?: boolean;
     filterPlaceholder?: string;
+    emptyStateIcon?: ReactNode;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
 }
 /**
  * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
@@ -86,5 +90,9 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
  * @param [getRowId] - Function to extract unique ID from a row object (defaults to 'id' field)
  * @param [alternateOddRowColors=false] - Whether to alternate background colors for odd/even rows
  * @param [filterPlaceholder='Enter value'] - Placeholder text for column filter inputs
+ * @param [emptyStateIcon] - Optional icon for empty state
+ * @param [emptyStateTitle] - Optional title text displayed when the grid has no rows to show.
+ * @param [emptyStateDescription] - Optional description text displayed below the empty state title,
+ *   providing additional context or instructions (e.g., “No data found” or “Try adjusting your filters”).
  */
-export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, onSelectionChange, getRowId, alternateOddRowColors, filterPlaceholder, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialGrid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, cssClass, ariaLabel, withSelectionColumn, wrapCustomCellRenderers, selectedRowIds, onSelectionChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, }: DialGridProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Grid/comparators/base-column-comparator.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -18,7 +18,6 @@ export declare const GRID_THEME_COLORS: {
     fontFamily: {
         googleFont: string;
     };
-    headerColumnBorderHeight: string;
     cellStyle: {
         textAlign: string;
     };

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

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { ICellRendererParams } from 'ag-grid-community';
+export type DateValue = string | number | Date;
+export interface DialDateCellRendererProps extends Partial<ICellRendererParams<Record<string, unknown>, DateValue>> {
+    value?: DateValue | null;
+    locale?: string;
+    options?: Intl.DateTimeFormatOptions;
+    emptyPlaceholder?: string;
+    cssClass?: string;
+}
+/**
+ * Minimal date cell renderer (ag-Grid compatible).
+ *
+ * Renders the value in the **"MMM dd, yyyy"** format (e.g., "Jul 20, 2025"),
+ * wrapped in `DialEllipsisTooltip` (tooltip only appears if truncated).
+ *
+ * @example
+ * ```tsx
+ * // ag-Grid colDef
+ * { field: 'createdAt', cellRenderer: DateCellRenderer, cellRendererParams: { options: { timeZone: 'UTC' } } }
+ *
+ * // Direct usage
+ * <DateCellRenderer value="2025-07-20T00:00:00Z" options={{ timeZone: 'UTC' }} />
+ * <DateCellRenderer value={1752969600000} options={{ timeZone: 'UTC' }} /> // milliseconds
+ * ```
+ *
+ * @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.
+ */
+export declare const DialDateCellRenderer: FC<DialDateCellRendererProps>;

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

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

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

@@ -0,0 +1,2 @@
+import { DateValue } from './DateCellRenderer';
+export declare function convertToDate(input?: DateValue | null): Date | null;

package/dist/src/components/Grid/renderers/utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -7,6 +7,7 @@ export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseP
     hideBorder?: boolean;
     tooltipText?: string;
     tooltipTriggerClassName?: string;
+    hideTooltip?: boolean;
     onChange?: (value?: string) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
 }
@@ -34,6 +35,7 @@ export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseP
  * @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
+ * @param hideTooltip - Whether to hide the tooltip
  * @param onChange - Callback function called when the input value changes
  * @param onBlur - Callback function called when the input blurs
  */

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

@@ -7,9 +7,11 @@ export interface DialInputPopupProps {
     disabled?: boolean;
     valueCssClasses?: string;
     inputCssClasses?: string;
+    placeholder?: string;
     elementId?: string;
     errorText?: string;
-    emptyValueText: string;
+    invalid?: boolean;
+    emptyValueText?: string;
 }
 /**
  * An input field that opens a popup when clicked, displaying a selected value or a list of values.
@@ -35,6 +37,7 @@ export interface DialInputPopupProps {
  *
  * @param [open] - The current state of the modal, indicating whether it is opened or closed.
  * @param [selectedValue] - The currently selected value(s). Can be a string for a single value or an array of strings for multiple values.
+ * @param [placeholder] - Placeholder text displayed when no value is selected.
  * @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.
@@ -42,6 +45,7 @@ export interface DialInputPopupProps {
  * @param [inputCssClasses] - 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 emptyValueText - The text displayed when no value is selected.
+ * @param [invalid] - Whether the input is in an invalid state, affecting styling. Applyed automatically if errorText is provided.
+ * @param [emptyValueText] - The text displayed when no value is selected and placeholder is not provided.
  */
 export declare const DialInputPopup: FC<DialInputPopupProps>;

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

@@ -3,6 +3,9 @@ export interface DialNoDataContentProps {
     icon?: ReactNode;
     title: string;
     description?: string;
+    containerCssClass?: string;
+    titleCssClass?: string;
+    descriptionCssClass?: string;
 }
 /**
  * A component for displaying a message and icon when there is no data to show.

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

@@ -11,6 +11,7 @@ export interface DialSearchProps {
     containerCssClass?: string;
     onChange?: (value: string) => void;
     size?: SearchSize;
+    allowClear?: boolean;
 }
 /**
  * A search input component with a customizable placeholder, icons, flexible props, and the ability
@@ -38,5 +39,6 @@ export interface DialSearchProps {
  * @param [containerCssClass] - 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
  */
 export declare const DialSearch: FC<DialSearchProps>;

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

@@ -1,8 +1,8 @@
 import { SelectOption } from '../../models/select';
-import { MouseEvent } from 'react';
+import { FC, MouseEvent } from 'react';
 export interface DialMultiSelectTagsProps {
     options: SelectOption[];
     selectedValues: string[];
     handleRemoveTag?: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
 }
-export declare const DialMultiSelectTags: React.FC<DialMultiSelectTagsProps>;
+export declare const DialMultiSelectTags: FC<DialMultiSelectTagsProps>;

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

@@ -1,9 +1,13 @@
 import { FC, ReactNode, MouseEvent } from 'react';
 import { SelectOption } from '../../models/select';
+import { SelectSize, SelectVariant } from '../../types/select';
 export interface DialSelectProps {
     options: SelectOption[];
     multiple?: boolean;
+    size?: SelectSize;
+    variant?: SelectVariant;
     value?: string | string[];
+    prefix?: string;
     defaultValue?: string | string[];
     placeholder?: string;
     searchable?: boolean;
@@ -16,6 +20,8 @@ export interface DialSelectProps {
     disabled?: boolean;
     cssClass?: string;
     closable?: boolean;
+    header?: ReactNode | (() => ReactNode);
+    footer?: ReactNode | (() => ReactNode);
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
     onChange?: (next: string | string[]) => void;
 }
@@ -43,6 +49,7 @@ export interface DialSelectProps {
  * @param options - Array of options to select from.
  * @param [multiple] - Whether multiple selections are allowed.
  * @param [value] - Controlled selected value(s).
+ * @param [prefix] - Prefix for selected value(s).
  * @param [defaultValue] - Uncontrolled initial selected value(s).
  * @param [placeholder] - Placeholder text when no selection is made.
  * @param [searchable] - Whether to show a search input to filter options.

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

@@ -1,4 +1,4 @@
-export declare const selectTriggerBaseClasses = "dial-input flex px-3 py-2 w-full items-center justify-between gap-2 dial-small min-h-[38px]";
+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";

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

@@ -25,6 +25,11 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>,
  *   onChange={(v) => setTransport(v as string)}
  * />
  *
+ * @params - Component properties extending:
+ * - {@link DialSelectProps} for select options and props, except for cssClass
+ * - {@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 emptyStateTitle Title to show when there are no options

package/dist/src/components/Steps/tests/utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -3,7 +3,6 @@ import { FC } from 'react';
 export interface DialTabProps {
     tab: TabModel;
     active: boolean;
-    disabled?: boolean;
     invalid?: boolean;
     horizontal?: boolean;
     cssClass?: string;
@@ -24,10 +23,8 @@ export interface DialTabProps {
  * />
  * ```
  *
- * @param tab - The tab model containing its `id` and `name`.
+ * @param tab - The tab model containing its `id`, `name`, [`disabled`], [`invalid`].
  * @param active - Whether the tab is currently active.
- * @param [disabled=false] - Whether the tab is disabled and non-interactive.
- * @param [invalid=false] - Whether the tab is marked as invalid, displaying an error icon.
  * @param [horizontal=false] - Whether the tab is displayed in horizontal orientation.
  * @param [cssClass] - Additional CSS classes applied to the tab element.
  * @param onClick - Callback fired when the tab is clicked. Receives the tab’s `id`.

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

@@ -1,22 +1,29 @@
 import { FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { TabOrientation } from '../../types/tab';
+import { SmallScreenThreshold, TabOrientation } from '../../types/tab';
 export interface DialTabsProps {
     tabs: TabModel[];
     activeTab: string;
     onClick: (id: string) => void;
     orientation?: TabOrientation;
+    smallScreenThreshold?: SmallScreenThreshold;
+    smallScreenContainerCssClass?: string;
+    smallScreenDropdownItemCssClass?: string;
 }
 /**
- * A responsive and overflow-aware tabs component that adapts between horizontal and dropdown (mobile) layouts
- * based on screen size and available space. When there are too many tabs to fit in one line,
- * the component automatically adds a dropdown button for accessing hidden tabs and enables smooth horizontal scrolling.
+ * A responsive and overflow-aware tabs component that automatically adapts its layout
+ * between a scrollable tab bar and a dropdown menu on smaller screens.
  *
- * Supports both horizontal and vertical orientations and can integrate with JSON editor states to toggle
- * visibility when needed. Automatically keeps the active tab in view when navigating through scrollable tabs.
+ * When there are too many tabs to fit in a single line, it introduces a dropdown button
+ * for accessing hidden tabs and ensures smooth horizontal scrolling. The component also
+ * automatically keeps the active tab in view.
  *
- * On larger screens, tabs are displayed horizontally or vertically according to the {@link TabOrientation} prop.
- * On smaller screens, tabs collapse into a dropdown menu for better usability.
+ * Supports both horizontal and vertical orientations and dynamically adjusts layout
+ * based on screen size and available space.
+ *
+ * On larger screens, tabs are displayed according to the `orientation` prop
+ * (horizontal or vertical). On smaller screens (mobile or tablet), the tabs collapse
+ * into a dropdown menu for better usability.
  *
  * @example
  * ```tsx
@@ -32,15 +39,21 @@ export interface DialTabsProps {
  * />
  * ```
  *
- * @param tabs - Array of tab models to render. Each tab should include an `id` and `label`.
+ * @param tabs - Array of tab models to render. Each tab must include an `id` and a display `name`.
  * @param activeTab - The identifier of the currently active tab.
  * @param onClick - Callback fired when a tab is selected. Receives the tab's `id` as an argument.
- * @param [orientation=TabOrientation.Horizontal] - The layout direction of the tabs. Uses the {@link TabOrientation} enum.
+ * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tabs. Uses the {@link TabOrientation} enum.
+ * @param [smallScreenThreshold=SmallScreenThreshold.Tablet] - Defines the screen size threshold
+ *   below which tabs collapse into a dropdown. Uses the {@link SmallScreenThreshold} enum.
+ *   When set to `Tablet`, both mobile and tablet screens will trigger dropdown mode.
+ * @param [smallScreenContainerCssClass] - Optional CSS class applied to the dropdown container
+ *   in small-screen (collapsed) mode.
+ * @param [smallScreenDropdownItemCssClass] - Optional CSS class applied to individual dropdown
+ *   items in small-screen mode.
  *
  * @remarks
- * - Automatically detects overflow using a `ResizeObserver` and toggles a dropdown button when tabs exceed
- *   available width.
- * - Smoothly scrolls the tab row to keep the active tab visible.
- * - Switches to a dedicated dropdown interface on mobile and tablet screens via the `useIsTabletScreen` hook.
+ * - Automatically detects horizontal overflow via `ResizeObserver` and shows a dropdown when needed.
+ * - Smoothly scrolls to keep the active tab visible when navigating.
+ * - Switches layout responsively based on `smallScreenThreshold`.
  */
 export declare const DialTabs: FC<DialTabsProps>;

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

@@ -1,9 +1,9 @@
 import { TagVariant } from '../../types/tag';
-import { FC, ReactNode } from 'react';
+import { FC, MouseEvent, ReactNode } from 'react';
 export interface DialTagProps {
     tag: string;
     cssClass?: string;
-    remove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    remove?: (event: MouseEvent<HTMLButtonElement>) => void;
     variant?: TagVariant;
     iconBefore?: ReactNode;
     bordered?: boolean;

package/dist/src/components/Tooltip/TooltipContent.d.ts

@@ -1,8 +1,11 @@
-import { HTMLProps } from 'react';
+import { CSSProperties, FC, HTMLProps } from 'react';
+export interface Props extends HTMLProps<HTMLDivElement> {
+    style?: CSSProperties;
+}
 /**
  * The content area of a tooltip that displays the tooltip information
  *
  * @param children - The content to display inside the tooltip
  * @param [style] - Additional inline styles for the tooltip content
  */
-export declare const DialTooltipContent: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DialTooltipContent: FC<Props>;

package/dist/src/components/Tooltip/TooltipTrigger.d.ts

@@ -1,10 +1,12 @@
-import { HTMLProps } from 'react';
+import { FC, HTMLProps } from 'react';
+interface TooltipTriggerProps extends HTMLProps<HTMLElement> {
+    asChild?: boolean;
+}
 /**
  * The trigger element for a tooltip that can be clicked or hovered
  *
  * @param children - The element that will trigger the tooltip
  * @param [asChild=false] - Whether to render as a child element instead of wrapping in a span
  */
-export declare const DialTooltipTrigger: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & {
-    asChild?: boolean;
-}, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export declare const DialTooltipTrigger: FC<TooltipTriggerProps>;
+export {};

package/dist/src/hooks/use-flexible-actions.d.ts

@@ -0,0 +1,86 @@
+import { FlexibleActionsDirection } from '../types/flexible-actions';
+interface UseFlexibleActionsOptions<T> {
+    actions: T[];
+    direction?: FlexibleActionsDirection;
+    moreButtonWidth?: number;
+    actionsGap?: number;
+    containerPadding?: number;
+    dependencies?: unknown[];
+}
+/**
+ * A responsive layout hook that automatically determines how many action buttons
+ * can fit within a container and moves overflowing ones into a hidden list (e.g. a dropdown).
+ *
+ * It measures each action's width and dynamically recalculates visible and hidden actions
+ * whenever the container resizes or dependencies change.
+ *
+ * This hook is reusable for toolbars or action strips that can have:
+ * - a **left fixed section** (e.g., selection info),
+ * - a **right fixed section** (e.g., metadata or pagination),
+ * - and a **flexible central section** where actions may overflow.
+ *
+ * @template T - Type of the action item. Each action must have a unique `key` property.
+ *
+ * @param {Object} options - Hook configuration options.
+ * @param {T[]} options.actions - Array of all available actions.
+ * @param {FlexibleActionsDirection} [options.direction=FlexibleActionsDirection.Normal] -
+ * Defines the fill direction:
+ * - `Normal`: Fills actions from left to right.
+ * - `Reverse`: Fills actions from right to left (useful when the "More" button is on the right).
+ * @param {number} [options.moreButtonWidth=BASE_ICON_SIZE] - Reserved width for the “more” or overflow button.
+ * @param {number} [options.actionsGap=8] - Horizontal gap (in pixels) between action buttons.
+ * @param {number} [options.containerPadding=8] - Horizontal padding (in pixels) inside the container.
+ * @param {unknown[]} [options.dependencies=[]] - Dependency array to trigger recalculation when external layout-affecting
+ *   values (like screen size or visibility) change.
+ *
+ * @returns Result object containing the calculated visible and hidden actions and all relevant refs.
+ *
+ * @property {T[]} visibleActions - Actions that currently fit into the available width.
+ * @property {T[]} hiddenActions - Actions that do not fit and should be rendered inside a dropdown.
+ *
+ * @property {Object} refs - A set of refs used for layout measurement.
+ * @property {RefObject<HTMLDivElement>} refs.containerRef - Ref for the outer container. Must wrap the entire toolbar area.
+ * @property {RefObject<HTMLDivElement>} refs.measureRef - Ref for a hidden measurement container (used to measure action widths).
+ * @property {RefObject<HTMLDivElement>} refs.leftSectionRef - Ref for the left fixed section (optional).
+ * @property {RefObject<HTMLDivElement>} refs.rightSectionRef - Ref for the right fixed section (optional).
+ *
+ * @example
+ * // Example usage inside a toolbar component:
+ * const { visibleActions, hiddenActions, refs } = useFlexibleActions({
+ *   actions,
+ *   direction: FlexibleActionsDirection.Reverse,
+ *   dependencies: [isMobile],
+ * });
+ *
+ * return (
+ *   <>
+ *     <div ref={refs.measureRef} className="invisible absolute top-0 left-0 flex gap-2">
+ *       {actions.map(a => <ActionButton key={a.key} {...a} />)}
+ *     </div>
+ *
+ *     <div ref={refs.containerRef} className="flex justify-between items-center">
+ *       <div ref={refs.leftSectionRef}>Left section</div>
+ *
+ *       <div className="flex gap-2 items-center">
+ *         {hiddenActions.length > 0 && <MoreMenu items={hiddenActions} />}
+ *         {visibleActions.map(a => <ActionButton key={a.key} {...a} />)}
+ *       </div>
+ *
+ *       <div ref={refs.rightSectionRef}>Right section</div>
+ *     </div>
+ *   </>
+ * );
+ */
+export declare function useFlexibleActions<T extends {
+    key: string;
+}>({ actions, direction, moreButtonWidth, actionsGap, containerPadding, dependencies, }: UseFlexibleActionsOptions<T>): {
+    visibleActions: T[];
+    hiddenActions: T[];
+    refs: {
+        containerRef: import('react').RefObject<HTMLDivElement | null>;
+        measureRef: import('react').RefObject<HTMLDivElement | null>;
+        leftSectionRef: import('react').RefObject<HTMLDivElement | null>;
+        rightSectionRef: import('react').RefObject<HTMLDivElement | null>;
+    };
+};
+export {};

package/dist/src/hooks/use-is-mobile-screen.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A React hook that determines whether the current window size matches a mobile screen width.
+ *
+ * It initializes based on the current screen size using `isSmallScreen()` and updates its value
+ * whenever the window is resized.
+ *
+ * @returns {boolean} `true` if the viewport width matches the mobile breakpoint, otherwise `false`.
+ *
+ * @example
+ * const isMobile = useIsMobileScreen();
+ * if (isMobile) {
+ *   console.log('Mobile layout active');
+ * }
+ */
+export declare const useIsMobileScreen: () => boolean;

package/dist/src/hooks/use-screen-type.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A React hook that determines the current screen type based on the viewport width.
+ *
+ * It uses `getScreenType()` to categorize the screen as `Desktop`, `Tablet`, or `Mobile`,
+ * and automatically updates the value when the window is resized.
+ *
+ * This hook is useful for implementing responsive layouts that adapt
+ * their UI or behavior depending on screen type.
+ *
+ * @returns {ScreenType} The current screen type (`Desktop`, `Tablet`, `Mobile`, or `Undefined` for SSR).
+ *
+ * @example
+ * const screenType = useScreenType();
+ *
+ * if (screenType === ScreenType.Desktop) {
+ *   console.log('Desktop layout active');
+ * }
+ */
+export declare const useScreenType: () => import('../types/screen').ScreenType;

package/dist/src/index.d.ts

@@ -18,8 +18,8 @@ export { DialFormItem } from './components/FormItem/FormItem';
 export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
 export { DialFileName } from './components/FileName/FileName';
 export { DialFolderName } from './components/FolderName/FolderName';
+export { DialDateCellRenderer } from './components/Grid/renderers/DateCellRenderer';
 export { DialTabs } from './components/Tabs/Tabs';
-export { DialTab } from './components/Tab/Tab';
 export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
 export { DialButton } from './components/Button/Button';
@@ -56,14 +56,18 @@ export { ButtonVariant } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
 export { PopupSize } from './types/popup';
 export { ConfirmationPopupVariant } from './types/confirmation-popup';
-export { DropdownType } from './types/dropdown';
+export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
 export { SearchSize } from './types/search';
 export { TagVariant } from './types/tag';
 export { TabOrientation } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
-export { DialFileManagerTabs } from './types/file-manager';
+export { SelectSize, SelectVariant } from './types/select';
+export { DialFileManagerTabs, DialFileManagerActions, type DialCopiedItem, } from './types/file-manager';
+export { FlexibleActionsDirection } from './types/flexible-actions';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
+export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
+export { useFileManagerContext } from './components/FileManager/hooks/use-file-manager-context';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
@@ -72,5 +76,5 @@ export type { TabModel } from './models/tab';
 export type { DropdownItem } from './models/dropdown';
 export type { DialModifiedEntity } from './models/base-entity';
 export type { DialFile } from './models/file';
-export type { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
+export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
 export { mergeClasses } from './utils/merge-classes';

package/dist/src/models/dropdown.d.ts

@@ -1,5 +1,5 @@
 import { DropdownItemType } from '../types/dropdown';
-import { ReactNode } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 export interface DropdownItem {
     key: string;
     label?: ReactNode;
@@ -9,6 +9,6 @@ export interface DropdownItem {
     type?: DropdownItemType;
     onClick?: (info: {
         key: string;
-        domEvent: React.MouseEvent<Element, MouseEvent>;
+        domEvent: MouseEvent<Element, MouseEvent>;
     }) => void;
 }

package/dist/src/models/select.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export interface SelectOption {
     value: string;
     label: string;
+    description?: string;
     disabled?: boolean;
     icon?: ReactNode;
 }

package/dist/src/models/tab.d.ts

@@ -2,4 +2,5 @@ export interface TabModel {
     id: string;
     name: string;
     invalid?: boolean;
+    disabled?: boolean;
 }

package/dist/src/types/file-manager.d.ts

@@ -1,5 +1,18 @@
+import { DialFileNodeType } from '../models/file';
 export declare enum DialFileManagerTabs {
     MyFiles = "my_files",
     Shared = "shared",
     Organization = "organization"
 }
+export declare enum DialFileManagerActions {
+    Copy = "copy",
+    Cut = "cut",
+    Paste = "paste",
+    Rename = "rename"
+}
+export interface DialCopiedItem {
+    sourceUrl: string;
+    destinationUrl: string;
+    overwrite?: boolean;
+    nodeType: DialFileNodeType;
+}

package/dist/src/types/flexible-actions.d.ts

@@ -0,0 +1,4 @@
+export declare enum FlexibleActionsDirection {
+    Normal = "normal",
+    Reverse = "reverse"
+}

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

@@ -0,0 +1,6 @@
+export declare enum ScreenType {
+    Undefined = "undefined",
+    Mobile = "mobile",
+    Tablet = "tablet",
+    Desktop = "desktop"
+}