@epam/ai-dial-react-file-manager 0.1.0-dev.13

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

@@ -0,0 +1,68 @@
+import { DialNotificationProps } from '@epam/ai-dial-ui-kit';
+import { DialFileManagerProps } from '../../FileManager';
+import { FC, ReactNode } from '../../../../../node_modules/react';
+export interface DestinationFolderPopupProps extends DialFileManagerProps {
+    onClose: () => void;
+    onConfirm?: () => void;
+    open: boolean;
+    setDestinationFolderPath?: (path?: string) => void;
+    destinationFolderPath?: string;
+    copyLabel?: string;
+    moveLabel?: string;
+    addFolderLabel?: string;
+    showHiddenFileSwitcher?: boolean;
+    showCreateFolderButton?: boolean;
+    hiddenFilesSwitcherLabel?: string;
+    mode?: 'copy' | 'move';
+    header?: ReactNode;
+    sourceFolder?: string;
+    disabledPathTooltip?: string;
+    collapsedFileTree?: boolean;
+    alertProps?: DialNotificationProps;
+    onFolderPopupPathChange?: (newPath?: string) => void;
+    processDestinationFolderPath?: (path: string) => string;
+}
+/**
+ * DestinationFolderPopup
+ * aliases: FolderSelector|PathChooser
+ *
+ * A popup dialog for selecting a destination folder when copying or moving files.
+ * Displays a File Manager interface with a footer containing action buttons and
+ * a toggle for showing hidden files.
+ *
+ * @example
+ * ```tsx
+ * <DestinationFolderPopup
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   onConfirm={handleConfirm}
+ *   mode="copy"
+ *   title="Copy 3 files"
+ *   items={files}
+ *   rootItem={rootFolder}
+ *   path={currentPath}
+ *   onPathChange={setCurrentPath}
+ * />
+ * ```
+ *
+ * @param open - Whether the popup is visible
+ * @param onClose - Callback fired when the popup is closed
+ * @param [onConfirm] - Callback fired when the confirm button is clicked
+ * @param [mode=DestinationFolderMode.Copy] - Operation mode: 'copy' or 'move'
+ * @param [copyLabel="Copy"] - Label for the copy button
+ * @param [moveLabel="Move"] - Label for the move button
+ * @param [addFolderLabel="Add folder"] - Label for the add folder button
+ * @param [hiddenFilesSwitcherLabel="Show hidden files"] - Label for the hidden files toggle
+ * @param [title] - Custom title for the popup header
+ * @param items - Array of files to display in the File Manager
+ * @param rootItem - Root folder item
+ * @param path - Current path in the File Manager
+ * @param onPathChange - Callback fired when the path changes
+ * @param [sourceFolder] - The source folder path for move operations
+ * @param [disabledPathTooltip="Unavailable for the original path. Please select another folder"] - Tooltip text when destination is disabled
+ * @param [collapsedFileTree=false] - Whether the file tree should be initially collapsed
+ * @param [processDestinationFolderPath] - Optional function to process the destination folder path before setting it
+ *
+ * @returns A React component for the destination folder selection popup
+ */
+export declare const DialDestinationFolderPopup: FC<DestinationFolderPopupProps>;

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

@@ -0,0 +1,63 @@
+import { FC, ReactNode } from '../../../../../node_modules/react';
+import { DialFileNodeType } from '../../../../models/file';
+interface DialFileManagerItemSummaryCellProps {
+    id: string;
+    name: string;
+    nodeType: DialFileNodeType;
+    size?: number;
+    updatedAt?: string;
+    shared?: boolean;
+    dateLocale?: Intl.LocalesArgument;
+    dateOptions?: Intl.DateTimeFormatOptions;
+    sharedIndicatorClassName?: string;
+    hideTooltip?: boolean;
+    forbiddenSymbolsRegExp?: RegExp;
+    forbiddenSymbolsTooltip?: ReactNode;
+}
+/**
+ * Renders file or folder details inside the File Manager list/grid item.
+ *
+ * Displays the item name with an icon (via `DialFileManagerItemName`),
+ * followed by a small details row:
+ *
+ * - File size (e.g., `"15 KB"`)
+ * - A separator dot
+ * - Formatted update date (via `DialDateCellRenderer`)
+ *
+ * The component automatically determines whether to show a **file** or **folder**
+ * icon based on `nodeType`.
+ *
+ * ### Example
+ * ```tsx
+ * <DialFileManagerItemSummaryCell
+ *   id="42"
+ *   name="Report.pdf"
+ *   nodeType={DialFileNodeType.ITEM}
+ *   size={225280}
+ *   updatedAt="2025-07-20T00:00:00Z"
+ *   dateLocale="en-US"
+ *   dateOptions={{ timeZone: 'UTC' }}
+ * />
+ *
+ * <DialFileManagerItemSummaryCell
+ *   id="folder-1"
+ *   name="Projects"
+ *   nodeType={DialFileNodeType.FOLDER}
+ *   updatedAt={undefined}
+ * />
+ * ```
+ *
+ * @param id - Unique identifier passed to `DialFileManagerItemName` as `elementId`.
+ * @param name - File or folder display name.
+ * @param nodeType - Determines whether the item renders as a **File** or **Folder**.
+ * @param size - File size in bytes; formatted with {@link formatBytes}. Omit for folders.
+ * @param updatedAt - Date or timestamp passed to `DialDateCellRenderer`. If invalid or missing, renders `"—"`.
+ * @param dateLocale - Optional locale override for date formatting (e.g., `"fr-FR"`).
+ * @param dateOptions - Optional `Intl.DateTimeFormat` configuration (e.g., `{ timeZone: 'UTC' }`).
+ * @params sharedIndicatorClassName - Optional CSS classes for the shared indicator.
+ * @param hideTooltip - If `true`, disables tooltips on the name and date, even if truncated.
+ * @param forbiddenSymbolsRegExp - Optional RegExp to validate the name for forbidden symbols.
+ * @param forbiddenSymbolsTooltip - Custom tooltip content when the name contains forbidden symbols; defaults to a standard message.
+ */
+export declare const DialFileManagerItemSummaryCell: FC<DialFileManagerItemSummaryCellProps>;
+export {};

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

@@ -0,0 +1,56 @@
+import { FC } from '../../../../../node_modules/react';
+import { DropdownItem } from '@epam/ai-dial-ui-kit';
+export interface DialActionDropdownItem extends DropdownItem {
+    title: string;
+    tooltip?: string;
+}
+export interface DialFileManagerBulkActionsToolbarProps {
+    getSelectionLabel: (selectedCount: number) => string;
+    onClearSelection: () => void;
+    actions: DialActionDropdownItem[];
+    selectedCount: number;
+}
+/**
+ * A responsive toolbar component displayed when files or items are selected
+ * in the file manager. It shows a label with the number or name of selected
+ * items and provides contextual action buttons.
+ *
+ * On smaller screens or when there’s not enough horizontal space,
+ * some action buttons are automatically moved into a dropdown menu.
+ *
+ * **Key Features:**
+ * - Dynamically measures available container width to determine how many actions
+ *   can fit inline.
+ * - Uses a hidden measurement container to precisely calculate button widths.
+ * - Automatically moves overflow actions into a "More" dropdown (`IconDotsVertical`).
+ * - Responsive design with support for mobile layout via `useIsMobileScreen`.
+ *
+ * **Layout logic:**
+ * - `measureRef`: hidden element used to measure the width of each button.
+ * - `containerRef`: visible container where the toolbar is rendered.
+ * - `leftSectionRef`: left section containing the "selected items" button.
+ * - `visibleCount`: dynamically updated number of visible actions.
+ * - Uses `ResizeObserver` + `requestAnimationFrame` to update layout on resize.
+ *
+ * @example
+ * ```tsx
+ * <DialFileManagerSelectionToolbar
+ *   getSelectionLabel={(count) => `${count} files selected`}
+ *   onClearSelection={() => console.log('Cleared')}
+ *   actions={[
+ *     { key: 'download', title: 'Download', icon: <IconDownload />, onClick: () => {} },
+ *     { key: 'delete', title: 'Delete', icon: <IconTrash />, onClick: () => {} },
+ *   ]}
+ * />
+ * ```
+ *
+ * @param {object} props
+ * @param {() => string} props.getSelectionLabel - Function to get the label showing current selection status (e.g., "3 files selected").
+ * @param {() => void} props.onClearSelection - Callback invoked when the clear selection button is clicked.
+ * @param {DialActionDropdownItem[]} props.actions - List of available toolbar actions.
+ *   Each action defines a title, icon, key, and optional click handler.
+ * @param {number} [props.selectedCount] - Count of currently selected items.
+ *
+ * @returns {JSX.Element} A responsive toolbar that adjusts visible actions based on available width.
+ */
+export declare const DialFileManagerBulkActionsToolbar: FC<DialFileManagerBulkActionsToolbarProps>;

package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ACTIONS_GAP = 12;
+export declare const MORE_BUTTON_WIDTH = 18;
+export declare const CONTAINER_PADDING = 8;

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

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from '../../../../../node_modules/react';
+import { DialFile } from '../../../../models/file';
+export interface FileManagerDeleteConfirmationPopupProps {
+    open: boolean;
+    itemsToDelete: DialFile[];
+    onClose: () => void;
+    onConfirm: () => void;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    titleRenderer?: (fileNames: string[]) => ReactNode;
+    contentRenderer?: (fileNames: string[]) => ReactNode;
+}
+/**
+ * Confirmation popup for deleting files in FileManager.
+ * Shows a list of files to be deleted with customizable title and content.
+ *
+ * @param open - Controls visibility of the popup
+ * @param itemsToDelete - Array of files to be deleted
+ * @param onClose - Callback when popup is closed
+ * @param onConfirm - Callback when delete is confirmed
+ * @param [cancelLabel='Cancel'] - Label for cancel button
+ * @param [confirmLabel='Delete'] - Label for confirm button
+ * @param [titleRenderer] - Custom title renderer function
+ * @param [contentRenderer] - Custom content renderer function
+ */
+export declare const FileManagerDeleteConfirmationPopup: FC<FileManagerDeleteConfirmationPopupProps>;

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

@@ -0,0 +1,50 @@
+import { FC, ReactNode } from '../../../../../node_modules/react';
+import { DialItemType, DialFileIconProps } from '@epam/ai-dial-ui-kit';
+export interface DialFileManagerItemIconProps extends Omit<DialFileIconProps, 'extension'> {
+    type: DialItemType;
+    name: string;
+    shared?: boolean;
+    loading?: boolean;
+    sharedIndicatorClassName?: string;
+    sharedIndicatorTooltip?: ReactNode;
+    fileExtension?: string;
+}
+/**
+ * Renders an icon representing either a file or folder entity in the Dial system.
+ *
+ * Displays:
+ * - A file icon based on its extension (via `DialFileIcon`)
+ * - A folder icon (via `IconFolder`)
+ * - A loading spinner if `loading` is true
+ * - A shared indicator if the entity is marked as shared
+ *
+ * @example
+ * ```tsx
+ * <DialFileManagerItemIcon
+ *   name="document.pdf"
+ *   type={DialItemType.File}
+ *   shared
+ * />
+ *
+ * <DialFileManagerItemIcon
+ *   name="My Folder"
+ *   type={DialItemType.Folder}
+ *   loading
+ * />
+ * ```
+ *
+ * @param {Object} props
+ * @param {string} props.name - The name of the file or folder (used to determine extension for files).
+ * @param {DialItemType} props.type - The type of the item (`file` or `folder`).
+ * @param {boolean} [props.shared=false] - Whether the item is shared.
+ * @param {boolean} [props.loading=false] - Whether to display the loading state.
+ * @param {number} [props.size] - Optional icon size override.
+ * @param {number} [props.stroke] - Optional icon stroke width override.
+ * @param {string} [props.className] - Optional CSS class for styling.
+ * @param {boolean} [props.decorative] - Whether the icon is decorative (for accessibility).
+ * @param {string} [props.label] - Accessible label for screen readers.
+ * @param {ReactNode} [props.indicator] - Optional indicator to display over the icon.
+ * @param {string} [props.sharedIndicatorClassName] - Optional CSS class for the shared indicator.
+ * @param  [sharedIndicatorTooltip] - Custom tooltip content for the shared indicator; defaults to "Shared"
+ */
+export declare const DialFileManagerItemIcon: FC<DialFileManagerItemIconProps>;

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

@@ -0,0 +1,57 @@
+import { FC, ReactNode } from '../../../../../node_modules/react';
+import { DialFileManagerItemNameInputProps } from '../FileManagerItemNameInput/FileManagerItemNameInput';
+import { DialItemType } from '@epam/ai-dial-ui-kit';
+export interface DialFileManagerItemNameProps extends DialFileManagerItemNameInputProps {
+    name: string;
+    type: DialItemType;
+    elementId: string;
+    editing?: boolean;
+    loading?: boolean;
+    creating?: boolean;
+    shared?: boolean;
+    details?: ReactNode;
+    sharedIndicatorTooltip?: ReactNode;
+    fileExtension?: string;
+    validate?: (value: string) => string | null;
+    onSave?: (value: string) => void;
+    onCancel?: () => void;
+    onCreateFolderSave?: (value: string) => void;
+    onCreateFolderCancel?: () => void;
+    hideTooltip?: boolean;
+    forbiddenSymbolsRegExp?: RegExp;
+    forbiddenSymbolsTooltip?: ReactNode;
+}
+/**
+ * A component that renders a file or folder name with optional edit mode.
+ *
+ * When `editing` is `false`, it displays a read-only name via:
+ * - `DialFolderName` for folders
+ * - `DialFileName` for files
+ *
+ * When `editing` is `true`, it renders an editable input using `DialItemNameInput`,
+ * driven by validation and change logic from the `useEditableItem` hook.
+ *
+ * @example
+ * ```tsx
+ * import { DialFileManagerItemName } from '@epam/ai-dial-react-file-manager';
+ * import { DialItemType } from '@epam/ai-dial-ui-kit';
+ *
+ * function Example() {
+ *   return (
+ *     <DialFileManagerItemName
+ *       name="Project"
+ *       type={DialItemType.Folder}
+ *       elementId="folder-123"
+ *       editing={true}
+ *       validate={(value) => (value.trim() ? null : 'Name cannot be empty')}
+ *       onSave={(newName) => console.log('Saved:', newName)}
+ *       onCancel={() => console.log('Canceled')}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Component props.
+ * @returns Rendered file or folder name element (editable or static).
+ */
+export declare const DialFileManagerItemName: FC<DialFileManagerItemNameProps>;

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

@@ -0,0 +1,71 @@
+import { FC, ReactNode, Ref } from '../../../../../node_modules/react';
+import { DialItemType } from '@epam/ai-dial-ui-kit';
+export interface DialFileManagerItemNameInputProps {
+    type: DialItemType;
+    name: string;
+    shared?: boolean;
+    loading?: boolean;
+    elementId: string;
+    iconSize?: number;
+    iconStroke?: number;
+    iconClassName?: string;
+    iconLabel?: string;
+    iconIndicator?: ReactNode;
+    inputInvalid?: boolean;
+    inputInvalidMessage?: string;
+    inputContainerClassName?: string;
+    inputIconAfter?: ReactNode;
+    inputRef?: Ref<HTMLInputElement>;
+    onChange?: (value?: string) => void;
+    sharedIndicatorClassName?: string;
+    sharedIndicatorTooltip?: ReactNode;
+    fileExtension?: string;
+}
+/**
+ * Combines a file/folder icon with an editable text input.
+ *
+ * Used for renaming or labeling file/folder entities within the File Manager.
+ * Displays:
+ * - The item icon (with optional loading/shared state)
+ * - An inline text input
+ * - A validation tooltip when `inputInvalid` is `true`
+ *
+ * @example
+ * ```tsx
+ * <DialFileManagerItemNameInput
+ *   type={DialItemType.File}
+ *   name="report.pdf"
+ *   elementId="file-input-1"
+ *   shared
+ *   onChange={(value) => console.log('New name:', value)}
+ * />
+ *
+ * <DialFileManagerItemNameInput
+ *   type={DialItemType.Folder}
+ *   name="Project A"
+ *   elementId="folder-input-2"
+ *   inputInvalid
+ *   inputInvalidMessage="Invalid name"
+ * />
+ * ```
+ *
+ * @param {Object} props
+ * @param {DialItemType} props.type - The type of item (file or folder).
+ * @param {string} props.name - Current name of the entity.
+ * @param {string} props.elementId - Unique ID for the input element.
+ * @param {boolean} [props.shared=false] - Whether the entity is shared.
+ * @param {boolean} [props.loading=false] - Whether the icon is loading.
+ * @param {number} [props.iconSize] - Optional size override for the icon.
+ * @param {number} [props.iconStroke] - Optional stroke width override for the icon.
+ * @param {string} [props.iconClassName] - Optional CSS class for the icon.
+ * @param {string} [props.iconLabel] - Optional accessible label for the icon.
+ * @param {ReactNode} [props.iconIndicator] - Optional indicator to render over the icon.
+ * @param {boolean} [props.inputInvalid=false] - Marks the input as invalid.
+ * @param {string} [props.inputInvalidMessage] - Tooltip message shown when invalid.
+ * @param {ReactNode} [props.inputIconAfter] - Optional icon shown after the input (defaults to an error icon).
+ * @param {string} [props.inputContainerClassName] - Additional CSS classes applied to the input container.
+ * @param {Ref<HTMLInputElement>} [props.inputRef] - Ref to access the underlying input element.
+ * @param {(value: string) => void} [props.onChange] - Callback fired when input value changes.
+ * @param {string} [props.sharedIndicatorClassName] - Additional CSS classes for the shared indicator.
+ */
+export declare const DialFileManagerItemNameInput: FC<DialFileManagerItemNameInputProps>;

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

@@ -0,0 +1,63 @@
+import { FC } from '../../../../../node_modules/react';
+import { DialBreadcrumbProps, DialSearchProps } from '@epam/ai-dial-ui-kit';
+export interface DialFileManagerNavigationPanelProps extends Omit<DialBreadcrumbProps, 'pathItems' | 'children' | 'className' | 'separator'>, Omit<DialSearchProps, 'onChange' | 'elementId' | 'value' | 'className' | 'containerClassName' | 'placeholder' | 'size'> {
+    path?: string;
+    makeHref?: (segments: string[], index: number) => string | undefined;
+    className?: string;
+    breadcrumbClassName?: string;
+    onItemClick?: (href?: string) => void;
+    rootItemPath?: string;
+    rootItemLabel?: string;
+    breadcrumbsHiddenPathPart?: string;
+    searchable?: boolean;
+    value?: string | number | null;
+    elementId?: string;
+    onSearchChange?: (value: string) => void;
+    searchClassName?: string;
+    searchContainerClassName?: string;
+    isCompactView?: boolean;
+}
+/**
+ * FileManagerNavigationPanel
+ *
+ * A navigation header for the File Manager that displays a breadcrumb trail on the left
+ * and an optional, controlled Search on the right.
+ *
+ * Uses the shared {@link DialBreadcrumb} for navigation and the shared {@link DialSearch}
+ * for the controlled search input.
+ *
+ * @example
+ * ```tsx
+ * <FileManagerNavigationPanel
+ *   path="Organization/Folder 4"
+ *   searchable
+ *   elementId="file-manager-search"
+ *   value={query}
+ *   onSearchChange={(val) => setQuery(val)}
+ * />
+ *
+ * // With clickable parents
+ * <FileManagerNavigationPanel
+ *   path="Org/Design/Assets"
+ *   makeHref={(segments, i) => '#' + segments.slice(0, i + 1).join('/')}
+ * />
+ * ```
+ *
+ * @param [ariaLabel="Breadcrumb"] - Aria label for the breadcrumb `<nav>`
+ * @param [labelClassName] - Extra classes for breadcrumb titles
+ * @param [path] - A full path string that will be split into breadcrumb items
+ * @param [makeHref] - Factory to create hrefs for segments
+ * @param [onItemClick] - Callback fired when a breadcrumb item is clicked
+ * @param [className] - Additional classes for the panel container
+ * @param [breadcrumbClassName] - ClassName forwarded to inner `DialBreadcrumb`
+ * @param [breadcrumbsHiddenPathPart] - A slash-separated path fragment whose segments will be omitted from the rendered breadcrumb trail.
+ * @param [searchable=true] - Whether to render the search control
+ * @param [value] - Controlled value for the search input (parent-managed)
+ * @param [elementId="file-manager-search"] - DOM id for the internal DialSearch input
+ * @param [size=ElementSize.Standard] - Size of the search input (from DialSearchProps)
+ * @param [onSearchChange] - Callback fired when the search value changes
+ * @param [searchClassName] - Extra classes for the search input element
+ * @param [searchContainerClassName] - Extra classes for the search container
+ * @param [isCompactView=false] - Whether the component should render in compact mode
+ */
+export declare const DialFileManagerNavigationPanel: FC<DialFileManagerNavigationPanelProps>;

package/dist/src/components/FileManager/components/FileManagerNavigationPanel/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const panelBaseClassName = "w-full flex items-center justify-between gap-4";
+export declare const breadcrumbContainerClassName = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded";
+export declare const searchContainerWrapperClassName = "w-[260px]";

package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts

@@ -0,0 +1,74 @@
+import { ButtonVariant, DropdownItem, TabModel } from '@epam/ai-dial-ui-kit';
+import { DialFileManagerTabs } from '../../../../types/file-manager';
+import { FC } from '../../../../../node_modules/react';
+export interface DialFileManagerToolbarProps {
+    tabs?: TabModel[];
+    activeTab?: string;
+    areHiddenFilesVisible: boolean;
+    hiddenFilesSwitcherLabel?: string;
+    showHiddenFilesLabel?: string;
+    hideHiddenFilesLabel?: string;
+    isNewButtonVisible?: boolean;
+    isNewButtonDisabled?: boolean;
+    newButtonVariant?: ButtonVariant;
+    newButtonDropdownItems?: DropdownItem[];
+    newButtonLabel?: string;
+    showHiddenFilesToggle?: boolean;
+    onTabChange?: (id: DialFileManagerTabs) => void;
+    onToggleHiddenFiles?: (value: boolean) => void;
+    disabledNewButtonTooltip?: string;
+}
+/**
+ * DialFileManagerToolbar — A configurable, responsive toolbar component for file management views.
+ *
+ * Provides a flexible toolbar interface for file managers or similar UIs, supporting:
+ * - Tab navigation for switching between file sections or views
+ * - A toggle for showing or hiding hidden files
+ * - A refresh button for reloading content
+ * - An optional "New" button or dropdown for creating new files or folders
+ *
+ * @example
+ * ```tsx
+ * const tabs: TabModel[] = [
+ *   { id: 'all', name: 'All Files' },
+ *   { id: 'favorites', name: 'Favorites' },
+ * ];
+ *
+ * <DialFileManagerToolbar
+ *   tabs={tabs}
+ *   activeTab="all"
+ *   areHiddenFilesVisible={false}
+ *   onTabChange={(id) => console.log('Switched to tab:', id)}
+ *   onToggleHiddenFiles={(visible) => console.log('Hidden files visible:', visible)}
+ *   onRefresh={() => console.log('Refreshed')}
+ *   isNewButtonVisible
+ *   newButtonDropdownItems={[
+ *     { key: 'folder', label: 'New Folder' },
+ *     { key: 'file', label: 'Upload File' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @param [tabs] - List of tab definitions to display, each represented by a `TabModel` containing `id` and `name`.
+ * @param [activeTab] - The ID of the currently active tab.
+ * @param areHiddenFilesVisible - Whether hidden files are currently visible.
+ * @param [hiddenFilesSwitcherLabel='Hidden files'] - Label for the hidden files toggle control.
+ * @param [showHiddenFilesLabel='Show hidden'] - Label shown when hidden files are not visible.
+ * @param [hideHiddenFilesLabel='Hide hidden'] - Label shown when hidden files are visible.
+ * @param [onTabChange] - Callback fired when the user switches between tabs. Receives the selected tab ID.
+ * @param [onToggleHiddenFiles] - Callback fired when the hidden files visibility is toggled. Receives the new visibility state.
+ * @param [isNewButtonVisible] - Whether the "New" button or dropdown should be displayed.
+ * @param [isNewButtonDisabled] - Whether the "New" button is disabled.
+ * @param [newButtonVariant=ButtonVariant.Primary] - Visual style variant for the new button.
+ * @param [newButtonDropdownItems=[]] - Dropdown items available under the new button. If empty, a single new button is shown instead.
+ * @param [newButtonLabel='New'] - Label text for the new button.
+ * @param [disabledNewButtonTooltip] - Tooltip text to show when the new button is disabled.
+ *
+ * @remarks
+ * - Tabs are rendered via `DialTabs`.
+ * - The hidden files toggle uses `DialSwitch`.
+ * - The refresh and new actions use `DialButton` or dropdown variants for consistency.
+ * - The toolbar automatically adapts its layout for different screen sizes.
+ * - When `newButtonDropdownItems` is provided, the new button becomes a dropdown menu.
+ */
+export declare const DialFileManagerToolbar: FC<DialFileManagerToolbarProps>;

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

@@ -0,0 +1,50 @@
+import { FC, ReactNode } from '../../../../../node_modules/react';
+import { DialFile } from '../../../../models/file';
+export interface FileMetadataPopupProps {
+    open: boolean;
+    onClose: () => void;
+    fileMetadata?: DialFile;
+    loading?: boolean;
+    header?: ReactNode;
+    nameLabel?: string;
+    pathLabel?: string;
+    modifiedDateLabel?: string;
+    sizeLabel?: string;
+    authorLabel?: string;
+    dateLocale?: Intl.LocalesArgument;
+    dateOptions?: Intl.DateTimeFormatOptions;
+}
+/**
+ * FileMetadataPopup
+ *
+ * A popup dialog for displaying file metadata information.
+ * Shows file details like name, path, modified date, size, and author.
+ * Displays a loading skeleton while metadata is being fetched.
+ *
+ * @example
+ * ```tsx
+ * <FileMetadataPopup
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   fileMetadata={file}
+ *   loading={isLoading}
+ *   title="Information"
+ *   dateLocale="en-US"
+ *   dateOptions={{ year: 'numeric', month: 'short', day: '2-digit' }}
+ * />
+ * ```
+ *
+ * @param open - Whether the popup is visible
+ * @param onClose - Callback fired when the popup is closed
+ * @param [fileMetadata] - File metadata to display
+ * @param [loading] - Whether metadata is being loaded
+ * @param [title="Information"] - Title of the popup
+ * @param [nameLabel="Name:"] - Label for the name field
+ * @param [pathLabel="Path:"] - Label for the path field
+ * @param [modifiedDateLabel="Modified Date:"] - Label for the modified date field
+ * @param [sizeLabel="Size:"] - Label for the size field
+ * @param [authorLabel="Author:"] - Label for the author field
+ * @param [dateLocale="en-US"] - Locale for date formatting
+ * @param [dateOptions] - Options for date formatting
+ */
+export declare const FileMetadataPopup: FC<FileMetadataPopupProps>;

package/dist/src/components/FileManager/components/FileMetadataPopup/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const LABEL_COLUMN_WIDTH = 100;
+export declare const SKELETON_HEIGHT = 16;
+export declare const LABEL_CLASS = "text-secondary";
+export declare const VALUE_CLASS = "text-primary min-w-0";
+export declare const PATH_CLASS = "text-primary break-words min-w-0";
+export declare const SKELETON_CLASS = "bg-layer-2";