@gouvfr-lasuite/ui-kit 0.20.1 → 0.21.0

package/dist/index.d.ts

@@ -504,6 +504,19 @@ export declare const ArrowUpLeft: (props: IconSvgProps) => JSX.Element;
 
 export declare const ArrowUpRight: (props: IconSvgProps) => JSX.Element;
 
+export declare const AudioPlayer: default_2.FC<AudioPlayerProps>;
+
+declare interface AudioPlayerProps {
+    src: string;
+    title?: string;
+    className?: string;
+    autoPlay?: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number) => void;
+}
+
 export declare const AVATAR_COLORS: string[];
 
 export declare type AvatarProps = {
@@ -584,6 +597,8 @@ export declare const BulletedList: (props: IconSvgProps) => JSX.Element;
 
 export declare const Burger: (props: IconSvgProps) => JSX.Element;
 
+export declare const CALC_EXTENSIONS: string[];
+
 export declare const Calendar: (props: IconSvgProps) => JSX.Element;
 
 export declare const Calendar2: (props: IconSvgProps) => JSX.Element;
@@ -707,6 +722,8 @@ export declare type CustomTranslations = Partial<Record<TranslationKey, string>>
 
 export declare const Datagouv: (props: IconSvgProps) => JSX.Element;
 
+export declare const DEFAULT_PDF_WORKER_SRC = "/pdf.worker.mjs";
+
 export declare const Divergence: (props: IconSvgProps) => JSX.Element;
 
 export declare const Divider: (props: IconSvgProps) => JSX.Element;
@@ -1157,8 +1174,23 @@ export declare const dsfrGlobals: {
     };
 };
 
+export declare const DurationBar: ({ duration, currentTime, handleSeek, }: DurationBarProps) => JSX.Element;
+
+declare type DurationBarProps = {
+    duration: number;
+    currentTime: number;
+    handleSeek: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
 export declare const Edit: (props: IconSvgProps) => JSX.Element;
 
+export declare const ErrorPreview: ({ file, onDownload }: ErrorPreviewProps) => JSX.Element;
+
+declare interface ErrorPreviewProps {
+    file: FilePreviewType;
+    onDownload?: (file: FilePreviewType) => void;
+}
+
 export declare const EuroFilled: (props: IconSvgProps) => JSX.Element;
 
 /**
@@ -1233,8 +1265,56 @@ export declare const FileError: (props: IconSvgProps) => JSX.Element;
 
 export declare const FileFilled: (props: IconSvgProps) => JSX.Element;
 
+/**
+ * Used by the FilePreview component to display the file icon.
+ * Mirrors the variant in drive that operates on a FilePreviewType
+ * rather than the drive-specific Item.
+ */
+export declare const FileIcon: ({ file, size, type, }: FileIconProps) => JSX.Element;
+
+export declare const FileIconContent: ({ icon, size, }: {
+    icon: string;
+    size: IconSize | number;
+}) => JSX.Element;
+
+declare type FileIconProps = {
+    file: Partial<FilePreviewType> & Pick<FilePreviewType, "mimetype" | "title">;
+    size?: IconSize | number;
+    type?: "mini" | "normal";
+};
+
 export declare const FileImport: (props: IconSvgProps) => JSX.Element;
 
+export declare const FilePreview: ({ isOpen, onClose, title, files, initialIndexFile, openedFileId, sidebarContent, headerRightContent, onChangeFile, onFileOpen, handleDownloadFile, hideCloseButton, pdfWorkerSrc, onOpenInEditor, }: FilePreviewProps) => JSX.Element | null;
+
+declare interface FilePreviewProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    title?: string;
+    files?: FilePreviewType[];
+    initialIndexFile?: number;
+    openedFileId?: string;
+    headerRightContent?: default_2.ReactNode;
+    sidebarContent?: default_2.ReactNode;
+    onChangeFile?: (file?: FilePreviewType) => void;
+    onFileOpen?: (file: FilePreviewType) => void;
+    handleDownloadFile?: (file?: FilePreviewType) => void;
+    hideCloseButton?: boolean;
+    pdfWorkerSrc?: string;
+    onOpenInEditor?: (file: FilePreviewType) => void;
+}
+
+export declare type FilePreviewType = {
+    id: string;
+    size: number;
+    title: string;
+    mimetype: string;
+    is_wopi_supported?: boolean;
+    url_preview: string;
+    url: string;
+    isSuspicious?: boolean;
+};
+
 export declare const FileShare: (props: IconSvgProps) => JSX.Element;
 
 export declare const Filter: (props: FilterProps) => JSX.Element;
@@ -1316,8 +1396,12 @@ export declare const GearRoundedNotif: (props: IconSvgProps) => JSX.Element;
 
 export declare const getContainerSize: (iconSize: IconSize) => number;
 
+export declare const getExtensionFromName: (str: string) => string | null;
+
 export declare const getIconSize: (iconSize: IconSize) => number;
 
+export declare const getMimeCategory: (mimetype: string, extension?: string | null) => MimeCategory;
+
 /**
  * Returns the appropriate icon for the step based on active state.
  * Extracted to avoid duplication between desktop and mobile views.
@@ -1496,6 +1580,37 @@ export declare type IconProps = {
 
 export declare const IconRightPanel: (props: IconSvgProps) => JSX.Element;
 
+export declare const ICONS: {
+    mini: {
+        calc: string;
+        doc: string;
+        image: string;
+        other: string;
+        pdf: string;
+        powerpoint: string;
+        audio: string;
+        video: string;
+        archive: string;
+        suspicious: string;
+        sqlite: string;
+        grist: string;
+    };
+    normal: {
+        calc: string;
+        doc: string;
+        image: string;
+        other: string;
+        pdf: string;
+        powerpoint: string;
+        audio: string;
+        video: string;
+        archive: string;
+        suspicious: string;
+        sqlite: string;
+        grist: string;
+    };
+};
+
 export declare enum IconSize {
     X_SMALL = "xsmall",
     SMALL = "small",
@@ -1517,6 +1632,18 @@ export declare enum IconType {
 
 export declare const Identity: (props: IconSvgProps) => JSX.Element;
 
+export declare const ImageViewer: default_2.FC<ImageViewerProps>;
+
+declare interface ImageViewerProps {
+    src: string;
+    alt?: string;
+    className?: string;
+    initialZoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    zoomStep?: number;
+}
+
 export declare const Info: (props: IconSvgProps) => JSX.Element;
 
 export declare const Info2: (props: IconSvgProps) => JSX.Element;
@@ -1552,6 +1679,8 @@ export declare const KeyboardHide: (props: IconSvgProps) => JSX.Element;
 
 export declare const KeyFilled: (props: IconSvgProps) => JSX.Element;
 
+export declare const KNOWN_EXTENSIONS: Set<string>;
+
 export declare const Label: ({ children, text, ...props }: LabelHTMLAttributes<HTMLLabelElement> & {
     text?: string;
 }) => JSX.Element;
@@ -1623,6 +1752,8 @@ export declare type LeftPanelProps = {
     footer?: default_2.ReactNode;
 };
 
+export declare const LeftSidebarIcon: (props: IconSvgProps) => JSX.Element;
+
 export declare const Link: (props: IconSvgProps) => JSX.Element;
 
 declare type Link_2 = {
@@ -1830,6 +1961,47 @@ export declare const locales: {
                 category: string;
                 closeAriaLabel: string;
             };
+            filePreview: {
+                title: string;
+                unsupported: {
+                    title: string;
+                    disclaimer: string;
+                    description: string;
+                    download: string;
+                    heicTitle: string;
+                };
+                suspicious: {
+                    title: string;
+                    description: string;
+                    download: string;
+                };
+                error: {
+                    title: string;
+                    description: string;
+                };
+                wopi: {
+                    loading: string;
+                    error: string;
+                    openInEditor: string;
+                    openInEditorDescription: string;
+                };
+                image: {
+                    loading: string;
+                };
+                externalLink: {
+                    title: string;
+                    description: string;
+                    confirmQuestion: string;
+                };
+                outdatedBrowser: {
+                    title: string;
+                    description: string;
+                };
+                actions: {
+                    download: string;
+                    print: string;
+                };
+            };
         };
     };
     "fr-FR": {
@@ -2031,8 +2203,50 @@ export declare const locales: {
                 category: string;
                 closeAriaLabel: string;
             };
+            filePreview: {
+                title: string;
+                unsupported: {
+                    title: string;
+                    disclaimer: string;
+                    description: string;
+                    download: string;
+                    heicTitle: string;
+                };
+                suspicious: {
+                    title: string;
+                    description: string;
+                    download: string;
+                };
+                error: {
+                    title: string;
+                    description: string;
+                };
+                wopi: {
+                    loading: string;
+                    error: string;
+                    openInEditor: string;
+                    openInEditorDescription: string;
+                };
+                image: {
+                    loading: string;
+                };
+                externalLink: {
+                    title: string;
+                    description: string;
+                    confirmQuestion: string;
+                };
+                outdatedBrowser: {
+                    title: string;
+                    description: string;
+                };
+                actions: {
+                    download: string;
+                    print: string;
+                };
+            };
         };
     };
+    "nl-NL": any;
 };
 
 declare const Lock_2: (props: IconSvgProps) => JSX.Element;
@@ -2096,6 +2310,32 @@ export declare type MenuItemSeparator = {
 
 export declare const MicOffAlert: (props: IconSvgProps) => JSX.Element;
 
+export declare const MIME_MAP: {
+    calc: string[];
+    pdf: string[];
+    doc: string[];
+    powerpoint: string[];
+    archive: string[];
+    sqlite: string[];
+};
+
+export declare const MIME_TO_CATEGORY: Record<string, MimeCategory>;
+
+export declare enum MimeCategory {
+    CALC = "calc",
+    DOC = "doc",
+    IMAGE = "image",
+    OTHER = "other",
+    PDF = "pdf",
+    POWERPOINT = "powerpoint",
+    AUDIO = "audio",
+    VIDEO = "video",
+    ARCHIVE = "archive",
+    SUSPICIOUS = "suspicious",
+    SQLITE = "sqlite",
+    GRIST = "grist"
+}
+
 export declare const Minus: (props: IconSvgProps) => JSX.Element;
 
 export { ModalSize }
@@ -2108,6 +2348,14 @@ export declare const Mute: (props: IconSvgProps) => JSX.Element;
 
 export { NodeRendererProps }
 
+export declare const NotSupportedPreview: ({ file, onDownload, title, }: NotSupportedPreviewProps) => JSX.Element;
+
+declare interface NotSupportedPreviewProps {
+    file: FilePreviewType;
+    onDownload?: (file: FilePreviewType) => void;
+    title?: string;
+}
+
 export declare const NumberedList: (props: IconSvgProps) => JSX.Element;
 
 export declare const OnboardingModal: ({ isOpen, size, appName, mainTitle, steps, initialStep, footerLink, hideContent, onSkip, onComplete, onClose, labels, }: OnboardingModalProps) => JSX.Element | null;
@@ -2160,7 +2408,7 @@ export declare interface OnboardingStep {
     /** Step title */
     title: string;
     /** Step description, visible only when the step is active */
-    description?: string;
+    description?: ReactNode;
     /** Content displayed in the preview zone (image, video, component, etc.) */
     content?: ReactNode;
 }
@@ -2225,6 +2473,8 @@ export declare const Play: (props: IconSvgProps) => JSX.Element;
 
 export declare const Play2: (props: IconSvgProps) => JSX.Element;
 
+export declare const PlayerPreviewControls: ({ togglePlay, isPlaying, rewind10Seconds, forward10Seconds, volume, isMuted, toggleMute, handleVolumeChange, toggleFullscreen, isFullscreen, showFullscreenBtn, }: PreviewControlsProps) => JSX.Element;
+
 export declare const Plus: (props: IconSvgProps) => JSX.Element;
 
 export declare const PlusDashed: (props: IconSvgProps) => JSX.Element;
@@ -2233,6 +2483,41 @@ export declare const PlusDashedEdit: (props: IconSvgProps) => JSX.Element;
 
 export declare const Present: (props: IconSvgProps) => JSX.Element;
 
+export declare type PreviewControlsProps = {
+    togglePlay: () => void;
+    isPlaying: boolean;
+    rewind10Seconds: () => void;
+    forward10Seconds: () => void;
+    volume: number;
+    isMuted: boolean;
+    toggleMute: () => void;
+    handleVolumeChange: (newVolume: number) => void;
+    toggleFullscreen: () => void;
+    isFullscreen: boolean;
+    showFullscreenBtn?: boolean;
+};
+
+export declare const PreviewMessage: ({ icon, title, description, action, variant, closeOnBackdrop, }: PreviewMessageProps) => JSX.Element;
+
+declare interface PreviewMessageProps {
+    icon: default_2.ReactNode;
+    title: default_2.ReactNode;
+    description?: default_2.ReactNode;
+    action?: default_2.ReactNode;
+    variant?: "neutral" | "error";
+    closeOnBackdrop?: boolean;
+}
+
+/**
+ * Open the browser print dialog for an image without navigating away.
+ *
+ * The image is loaded inside a hidden same-origin iframe built with `srcdoc`
+ * (not `src`) so we can call `contentWindow.print()` from the parent without
+ * running into the cross-origin restriction that would apply if the iframe's
+ * document came from the image URL's origin.
+ */
+export declare const printImage: (imageUrl: string) => void;
+
 export declare const ProConnectButton: ({ disabled, onClick, }: ProConnectButtonProps) => JSX.Element;
 
 export declare type ProConnectButtonProps = {
@@ -2335,6 +2620,12 @@ export declare interface ReleaseNoteStep {
     description?: string;
 }
 
+/**
+ * Removes the file extension from a filename.
+ * Only removes extensions present in KNOWN_EXTENSIONS.
+ */
+export declare const removeFileExtension: (filename: string) => string;
+
 export declare const Reply: (props: IconSvgProps) => JSX.Element;
 
 declare type ResponsiveStates = {
@@ -2530,6 +2821,12 @@ export declare const Strikethrough: (props: IconSvgProps) => JSX.Element;
 
 export declare const Sun: (props: IconSvgProps) => JSX.Element;
 
+export declare const SuspiciousPreview: ({ handleDownload, }: SuspiciousPreviewProps) => JSX.Element;
+
+declare interface SuspiciousPreviewProps {
+    handleDownload?: () => void;
+}
+
 export declare type TabData = {
     id: string;
     label: string;
@@ -2855,8 +3152,35 @@ export declare const useTreeContext: <T>() => TreeContextType<T> | null;
 
 export declare const VerticalSeparator: (props: Props_4) => JSX.Element;
 
+export declare const VideoPlayer: default_2.FC<VideoPlayerProps>;
+
+declare interface VideoPlayerProps {
+    src: string;
+    poster?: string;
+    className?: string;
+    autoPlay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    width?: string | number;
+    height?: string | number;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onTimeUpdate?: (currentTime: number) => void;
+}
+
 export declare const Volume2: (props: IconSvgProps) => JSX.Element;
 
+export declare const VolumeBar: ({ volume, isMuted, toggleMute, handleVolumeChange, }: VolumeBarProps) => JSX.Element;
+
+export declare type VolumeBarProps = {
+    volume: number;
+    isMuted: boolean;
+    toggleMute: () => void;
+    handleVolumeChange: (newVolume: number) => void;
+};
+
 export declare const VolumeX: (props: IconSvgProps) => JSX.Element;
 
 export declare const WandAndStars: (props: IconSvgProps) => JSX.Element;
@@ -3274,12 +3598,27 @@ export declare type WithLabelProps = {
     labelSide?: "left" | "right";
 };
 
+export declare const WopiOpenInEditor: ({ file, onOpenInEditor, }: WopiOpenInEditorProps) => JSX.Element;
+
+declare interface WopiOpenInEditorProps {
+    file: FilePreviewType;
+    onOpenInEditor: (file: FilePreviewType) => void;
+}
+
 export declare const XMark: (props: IconSvgProps) => JSX.Element;
 
 export declare const Zoom: (props: IconSvgProps) => JSX.Element;
 
 export declare const Zoom1: (props: IconSvgProps) => JSX.Element;
 
+export declare const ZoomControls: ({ zoomOut, zoomIn, resetView, }: ZoomControlsProps) => JSX.Element;
+
+declare interface ZoomControlsProps {
+    zoomOut: () => void;
+    zoomIn: () => void;
+    resetView: () => void;
+}
+
 export declare const ZoomMinus: (props: IconSvgProps) => JSX.Element;
 
 export declare const ZoomPlus: (props: IconSvgProps) => JSX.Element;