@gouvfr-lasuite/ui-kit 0.14.0 → 0.16.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from '@openfun/cunningham-react';
 import { Context } from 'react';
 import { CunninghamProvider as CunninghamProvider_2 } from '@openfun/cunningham-react';
 import { CursorProps } from 'react-arborist';
@@ -10,10 +11,12 @@ import { NodeApi } from 'react-arborist';
 import { NodeRendererProps } from 'react-arborist';
 import { Option as Option_2 } from '@openfun/cunningham-react';
 import { PropsWithChildren } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { SelectProps } from 'react-aria-components';
 import { SetStateAction } from 'react';
 import { TreeApi } from 'react-arborist';
+import { TreeNode } from '@react-stately/data';
 
 declare type AbstractSeparatorProps = {
     withPadding?: boolean;
@@ -416,6 +419,11 @@ export declare const CunninghamProvider: (props: Parameters<typeof CunninghamPro
 
 export declare const CustomTabs: ({ tabs, defaultSelectedTab, fullWidth, }: TabsProps) => JSX.Element | null;
 
+/**
+ * Type for custom translations - maps translation keys to their string values
+ */
+export declare type CustomTranslations = Partial<Record<TranslationKey, string>>;
+
 export declare const DropdownMenu: ({ options, isOpen, onOpenChange, children, selectedValues, onSelectValue, topMessage, shouldCloseOnInteractOutside, }: PropsWithChildren<DropdownMenuProps>) => JSX.Element;
 
 export declare type DropdownMenuOption = {
@@ -440,6 +448,12 @@ export declare type DropdownMenuProps = {
     shouldCloseOnInteractOutside?: (element: Element) => boolean;
 };
 
+/**
+ * Utility type that combines TranslationKeys with proper constraint checking.
+ * Use this as the main export for generating translation key types.
+ */
+declare type ExtractTranslationKeys<T extends TranslationObject> = TranslationKeys<T>;
+
 export declare const Filter: (props: FilterProps) => JSX.Element;
 
 export declare type FilterOption = Option_2 & {
@@ -452,17 +466,27 @@ export declare type FilterProps = {
     options: FilterOption[];
 } & SelectProps;
 
-export declare const Footer: () => JSX.Element;
+export declare const Footer: ({ externalLinks, legalLinks, license, logo, }: FooterProps) => JSX.Element;
+
+export declare type FooterProps = {
+    externalLinks?: readonly Link[];
+    legalLinks?: readonly Link[];
+    license?: {
+        label: string;
+        link: Link;
+    };
+    logo?: {
+        src: string;
+        width?: string;
+        height?: string;
+        alt: string;
+    };
+};
 
 export declare const getContainerSize: (iconSize: IconSize) => number;
 
 export declare const getIconSize: (iconSize: IconSize) => number;
 
-export declare function getLocales(): {
-    "en-US": any;
-    "fr-FR": any;
-};
-
 /**
  * Get a consistent avatar's color according to a hash of the name
  */
@@ -566,10 +590,23 @@ export declare const Label: ({ children, text, ...props }: LabelHTMLAttributes<H
 
 export declare const LaGaufre: () => JSX.Element;
 
-export declare const LanguagePicker: ({ languages }: LanguagePickerProps) => JSX.Element;
+/**
+ * A DropdownMenu specific to languages.
+ *
+ * **Props:**
+ * - `languages`: The languages options (use `isChecked` attribute to set the default selected language).
+ * - `onChange`: A callback called when a language is selected.
+ * - `size`: The size of the CTA.
+ * - `color`: The color of the CTA.
+ */
+export declare const LanguagePicker: ({ languages, onChange, size, color, fullWidth }: LanguagePickerProps) => JSX.Element;
 
 export declare type LanguagePickerProps = {
     languages: DropdownMenuOption[];
+    onChange?: (language: string) => void;
+    color?: ButtonProps["color"];
+    size?: ButtonProps["size"];
+    fullWidth?: ButtonProps["fullWidth"];
 };
 
 export declare const LeftPanel: ({ children, isOpen, }: PropsWithChildren<LeftPanelProps>) => JSX.Element;
@@ -578,6 +615,316 @@ export declare type LeftPanelProps = {
     isOpen?: boolean;
 };
 
+declare type Link = {
+    label: string;
+    href: string;
+};
+
+export declare const locales: {
+    "en-US": {
+        components: {
+            "alert": {
+                "close_aria_label": "Delete alert";
+                "expand_aria_label": "Expand alert";
+                "shrink_aria_label": "Shrink alert";
+            };
+            "pagination": {
+                "goto_label": "Go to page";
+                "goto_label_aria": "Go to any page";
+                "next_aria": "Go to next page";
+                "previous_aria": "Go to previous page";
+                "goto_page_aria": "Go to page {page}";
+                "current_page_aria": "You are currently on page {page}";
+            };
+            "datagrid": {
+                "empty": "This table is empty";
+                "empty_alt": "Illustration of an empty table";
+                "loader_aria": "Loading data";
+                "rows_selection_aria": "All rows selection";
+                "row_selection_aria": "Row selection";
+            };
+            "provider": {
+                "test": "This is a test: {name}";
+            };
+            "forms": {
+                "input": {
+                    "password": {
+                        "show_password": "Show password";
+                        "hide_password": "Hide password";
+                    };
+                };
+                "select": {
+                    "toggle_button_aria_label": "Toggle dropdown";
+                    "clear_button_aria_label": "Clear selection";
+                    "clear_all_button_aria_label": "Clear all selections";
+                    "menu_empty_placeholder": "No options available";
+                };
+                "file_uploader": {
+                    "delete_file_name": "Delete file {name}";
+                    "delete_file": "Delete file";
+                    "uploading": "Uploading...";
+                    "caption": "Drag and drop or ";
+                    "browse_files": "Browse files";
+                };
+                "date_picker": {
+                    "toggle_button_aria_label_open": "Open calendar";
+                    "toggle_button_aria_label_close": "Close calendar";
+                    "clear_button_aria_label": "Clear date";
+                    "next_month_button_aria_label": "Next month";
+                    "next_year_button_aria_label": "Next year";
+                    "previous_month_button_aria_label": "Previous month";
+                    "previous_year_button_aria_label": "Previous year";
+                    "year_select_button_aria_label": "Select a year";
+                    "month_select_button_aria_label": "Select a month";
+                };
+            };
+            "modals": {
+                "helpers": {
+                    "delete_confirmation": {
+                        "title": "Are you sure?";
+                        "children": "Are you sure to delete this item?";
+                        "cancel": "Cancel";
+                        "delete": "Delete";
+                    };
+                    "confirmation": {
+                        "title": "Are you sure?";
+                        "children": "Are you sure you want to do that?";
+                        "cancel": "Cancel";
+                        "yes": "Yes";
+                    };
+                    "disclaimer": {
+                        "title": "Disclaimer";
+                        "children": "This is a disclaimer";
+                        "ok": "Ok";
+                    };
+                };
+            };
+        };
+    } & {
+        components: {
+            share: {
+                copyLink: string;
+                ok: string;
+                shareButton: string;
+                modalTitle: string;
+                access: {
+                    delete: string;
+                };
+                cannot_view: {
+                    message: string;
+                };
+                invitations: {
+                    title: string;
+                };
+                members: {
+                    title_plural: string;
+                    title_singular: string;
+                    load_more: string;
+                };
+                item: {
+                    add: string;
+                };
+                search: {
+                    placeholder: string;
+                    group_name: string;
+                };
+                user: {
+                    no_result: string;
+                    placeholder: string;
+                };
+                linkSettings: {
+                    title: string;
+                    reach: {
+                        choices: {
+                            public: {
+                                title: string;
+                                description: string;
+                            };
+                            restricted: {
+                                title: string;
+                                description: string;
+                            };
+                        };
+                    };
+                    role: {
+                        choices: {
+                            reader: {
+                                title: string;
+                            };
+                            editor: {
+                                title: string;
+                            };
+                        };
+                    };
+                };
+            };
+            userMenu: {
+                open: string;
+                close: string;
+                accountSettings: string;
+                logout: string;
+                dialogTitle: string;
+            };
+            footer: {
+                logo: {
+                    alt: string;
+                };
+            };
+        };
+    };
+    "fr-FR": {
+        components: {
+            "alert": {
+                "close_aria_label": "Supprimer l'alerte";
+                "expand_aria_label": "Ouvrir l'alerte";
+                "shrink_aria_label": "Fermer l'alerte";
+            };
+            "pagination": {
+                "goto_label": "Aller \u00E0";
+                "goto_label_aria": "Aller \u00E0 la page";
+                "next_aria": "Aller \u00E0 la page suivante";
+                "previous_aria": "Aller \u00E0 la page pr\u00E9c\u00E9dente";
+                "goto_page_aria": "Aller \u00E0 la page {page}";
+                "current_page_aria": "Vous \u00EAtes actuellement sur la page {page}";
+            };
+            "datagrid": {
+                "empty": "Ce tableau est vide";
+                "empty_alt": "Illustration d'un tableau vide";
+                "loader_aria": "Chargement des donn\u00E9es";
+                "rows_selection_aria": "Toutes les lignes s\u00E9lectionn\u00E9es";
+                "row_selection_aria": "Ligne s\u00E9lectionn\u00E9e";
+            };
+            "provider": {
+                "test": "Ceci est un test : {name}";
+            };
+            "forms": {
+                "input": {
+                    "password": {
+                        "show_password": "Afficher le mot de passe";
+                        "hide_password": "Masquer le mot de passe";
+                    };
+                };
+                "select": {
+                    "toggle_button_aria_label": "Ouvrir le menu";
+                    "clear_button_aria_label": "Effacer la s\u00E9lection";
+                    "clear_all_button_aria_label": "Effacer toutes les s\u00E9lections";
+                    "menu_empty_placeholder": "Aucun choix disponible";
+                };
+                "file_uploader": {
+                    "delete_file_name": "Supprimer le fichier {name}";
+                    "delete_file": "Supprimer le fichier";
+                    "uploading": "Upload en cours ...";
+                    "caption": "Glisser-d\u00E9poser ou ";
+                    "browse_files": "Parcourir";
+                };
+                "date_picker": {
+                    "toggle_button_aria_label_open": "Ouvrir le calendrier";
+                    "toggle_button_aria_label_close": "Fermer le calendrier";
+                    "clear_button_aria_label": "Effacer la date";
+                    "next_month_button_aria_label": "Mois suivant";
+                    "next_year_button_aria_label": "Ann\u00E9e suivante";
+                    "previous_month_button_aria_label": "Mois pr\u00E9c\u00E9dent";
+                    "previous_year_button_aria_label": "Ann\u00E9e pr\u00E9c\u00E9dente";
+                    "year_select_button_aria_label": "S\u00E9lectionner une ann\u00E9e";
+                    "month_select_button_aria_label": "S\u00E9lectionner un mois";
+                };
+            };
+            "modals": {
+                "helpers": {
+                    "delete_confirmation": {
+                        "title": "\u00CAtes-vous s\u00FBr ?";
+                        "children": "\u00CAtes-vous s\u00FBr de vouloir supprimer cet \u00E9l\u00E9ment ?";
+                        "cancel": "Annuler";
+                        "delete": "Supprimer";
+                    };
+                    "confirmation": {
+                        "title": "\u00CAtes-vous s\u00FBr ?";
+                        "children": "\u00CAtes-vous s\u00FBr de vouloir faire cela ?";
+                        "cancel": "Annuler";
+                        "yes": "Oui";
+                    };
+                    "disclaimer": {
+                        "title": "Avertissement";
+                        "children": "Ceci est un avertissement";
+                        "ok": "Ok";
+                    };
+                };
+            };
+        };
+    } & {
+        components: {
+            share: {
+                copyLink: string;
+                ok: string;
+                modalTitle: string;
+                shareButton: string;
+                access: {
+                    delete: string;
+                };
+                cannot_view: {
+                    message: string;
+                };
+                invitations: {
+                    title: string;
+                };
+                members: {
+                    title_plural: string;
+                    title_singular: string;
+                    load_more: string;
+                };
+                item: {
+                    add: string;
+                };
+                search: {
+                    placeholder: string;
+                    group_name: string;
+                };
+                user: {
+                    no_result: string;
+                    placeholder: string;
+                };
+                linkSettings: {
+                    title: string;
+                    reach: {
+                        choices: {
+                            public: {
+                                title: string;
+                                description: string;
+                            };
+                            restricted: {
+                                title: string;
+                                description: string;
+                            };
+                        };
+                    };
+                    role: {
+                        choices: {
+                            reader: {
+                                title: string;
+                            };
+                            editor: {
+                                title: string;
+                            };
+                        };
+                    };
+                };
+            };
+            userMenu: {
+                open: string;
+                close: string;
+                accountSettings: string;
+                logout: string;
+                dialogTitle: string;
+            };
+            footer: {
+                logo: {
+                    alt: string;
+                };
+            };
+        };
+    };
+};
+
 export declare const MainLayout: ({ icon, children, hideLeftPanelOnDesktop, leftPanelContent, rightPanelContent, rightHeaderContent, languages, enableResize, rightPanelIsOpen, ...props }: PropsWithChildren<MainLayoutProps>) => JSX.Element;
 
 export declare type MainLayoutProps = {
@@ -700,7 +1047,7 @@ export declare type ShareMemberItemProps<UserType, AccessType> = {
     roleTopMessage?: string;
 };
 
-export declare const ShareModal: <UserType, InvitationType, AccessType>({ searchUsersResult, children, outsideSearchContent, accesses: members, invitations, hasNextMembers, canUpdate, canView, hasNextInvitations, hideInvitations, hideMembers, cannotViewChildren, ...props }: PropsWithChildren<ShareModalProps<UserType, InvitationType, AccessType>>) => JSX.Element;
+export declare const ShareModal: <UserType, InvitationType, AccessType>({ searchUsersResult, children, outsideSearchContent, accesses: members, invitations, hasNextMembers, canUpdate, canView, hasNextInvitations, hideInvitations, hideMembers, cannotViewChildren, customTranslations, ...props }: PropsWithChildren<ShareModalProps<UserType, InvitationType, AccessType>>) => JSX.Element;
 
 declare type ShareModalAccessProps<UserType, AccessType> = {
     accesses?: AccessData<UserType, AccessType>[];
@@ -756,6 +1103,7 @@ export declare type ShareModalProps<UserType, InvitationType, AccessType> = {
     outsideSearchContent?: ReactNode;
     hideInvitations?: boolean;
     hideMembers?: boolean;
+    customTranslations?: CustomTranslations;
 } & ShareModalInvitationProps<UserType, InvitationType> & ShareModalAccessProps<UserType, AccessType> & ShareModalSearchProps<UserType> & ShareModalLinkSettingsProps;
 
 declare type ShareModalSearchProps<UserType> = {
@@ -790,6 +1138,58 @@ export declare type TabsProps = {
     fullWidth?: boolean;
 };
 
+/**
+ * All available translation keys extracted from the English translation file.
+ * This type represents all possible keys that can be used with the translation system.
+ *
+ * Keys are in dot-notation format, e.g.:
+ * - "components.share.copyLink"
+ * - "components.share.access.delete"
+ * - "components.footer.links.legal"
+ */
+declare type TranslationKey = ExtractTranslationKeys<typeof locales["en-US"] | typeof locales["fr-FR"]>;
+
+/**
+ * Utility types for extracting all nested keys from translation objects
+ * and converting them to dot-notation string literals.
+ */
+/**
+ * Recursively extracts all nested keys from an object type and converts them
+ * to dot-notation string literals.
+ *
+ * @example
+ * ```typescript
+ * type Example = {
+ *   components: {
+ *     create: string;
+ *     alert: {
+ *       close_aria_label: string;
+ *       expand_aria_label: string;
+ *     }
+ *   }
+ * }
+ *
+ * type Keys = TranslationKeys<Example>;
+ * // Result: "components.create" | "components.alert.close_aria_label" | "components.alert.expand_aria_label"
+ * ```
+ */
+declare type TranslationKeys<T> = T extends Record<string, unknown> ? {
+    [K in keyof T]: T[K] extends Record<string, unknown> ? `${K & string}.${TranslationKeys<T[K]>}` : K;
+}[keyof T] : never;
+
+/**
+ * Type constraint for objects that can have translation keys extracted.
+ */
+declare type TranslationObject = Record<string, TranslationValue>;
+
+/**
+ * Helper type to define the structure of a translation object.
+ * This avoids circular reference by using a more specific definition.
+ */
+declare type TranslationValue = string | {
+    [key: string]: TranslationValue;
+};
+
 export { TreeApi }
 
 export declare const TreeContext: Context<TreeContextType<any> | null>;
@@ -874,6 +1274,22 @@ export declare type TreeViewProps<T> = {
 
 export declare const TreeViewSeparator: ({ top, left }: CursorProps) => JSX.Element;
 
+/**
+ * Hook for using custom translations with type safety.
+ *
+ * This hook provides a translation function that first checks custom translations,
+ * then falls back to the default Cunningham translations.
+ *
+ * Note: This is not a bullet proof solution, it doesn't handle variables replacement
+ * as Cunningham does for now.
+ *
+ * @param customTranslations - Optional object mapping translation keys to custom values
+ * @returns Object containing the translation function
+ */
+export declare const useCustomTranslations: (customTranslations?: CustomTranslations) => {
+    t: (key: TranslationKey) => string;
+};
+
 export declare const useDropdownMenu: () => {
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
@@ -893,6 +1309,31 @@ export declare const useResponsive: () => {
     isDesktop: boolean;
 };
 
+/**
+ * User menu component.
+ *
+ * **Props**
+ * - `user`: An object containing the user information.
+ * - `settingsCTA`: A string or a function to call when the settings button is clicked.
+ * - `logout`: A function to call when the logout button is clicked.
+ * - `isInitialOpen`: Whether the menu should be open by default.
+ * - `shouldCloseOnInteractOutside`: A function to call when the menu should be closed.
+ * - `footerAction`: The child to render inside the footer.
+ */
+export declare const UserMenu: ({ user, settingsCTA, logout, isInitialOpen, shouldCloseOnInteractOutside, footerAction, }: UserMenuProps) => JSX.Element | null;
+
+export declare type UserMenuProps = {
+    user?: {
+        full_name?: string;
+        email: string;
+    } | null;
+    settingsCTA?: string | (() => void);
+    logout?: () => void;
+    isInitialOpen?: boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    footerAction?: ReactElement;
+};
+
 declare type UserProps = {
     fullName?: string;
     email?: string;
@@ -904,7 +1345,7 @@ export declare const UserRow: ({ fullName: full_name, email, showEmail, }: UserP
 export declare const useTree: <T>(initialItems: TreeViewDataType<T>[], refreshCallback?: (id: string) => Promise<Partial<TreeViewDataType<T>>>, loadChildrenCallback?: (id: string) => Promise<TreeViewDataType<T>[]>) => {
     nodes: TreeDataItem<TreeViewDataType<T>>[];
     addChild: (parentId: string | null, newNode: TreeViewDataType<T>, index?: number) => void;
-    updateNode: (nodeId: string, updatedData: Partial<TreeViewDataType<T>>) => void;
+    updateNode: (nodeId: string, updatedData: Partial<TreeViewDataType<T>>) => TreeViewDataType<T> | undefined;
     deleteNode: (nodeId: string) => void;
     deleteNodes: (nodeIds: string[]) => void;
     addRootNode: (newNode: TreeViewDataType<T>, index?: number) => void;
@@ -912,7 +1353,7 @@ export declare const useTree: <T>(initialItems: TreeViewDataType<T>[], refreshCa
     selectedNode: T | undefined;
     setSelectedNode: Dispatch<SetStateAction<T | undefined>>;
     refreshNode: (nodeId: string) => Promise<void>;
-    setChildren: (parentId: string, newChildren: TreeViewDataType<T>[]) => void;
+    setChildren: (parentId: string, newChildren: TreeViewDataType<T>[]) => TreeViewDataType<T> | undefined;
     insertBeforeNode: (nodeId: string, newNode: TreeViewDataType<T>) => void;
     insertAfterNode: (nodeId: string, newNode: TreeViewDataType<T>) => void;
     handleMove: (result: TreeViewMoveResult) => void;
@@ -921,6 +1362,7 @@ export declare const useTree: <T>(initialItems: TreeViewDataType<T>[], refreshCa
     appendToNode: (nodeId: string, newNode: TreeViewDataType<T>) => void;
     move: (key: Key, toParentKey: Key | null, index: number) => void;
     resetTree: (newItems?: TreeViewDataType<T>[]) => void;
+    getItem: (key: Key) => TreeNode<TreeViewDataType<T>> | undefined;
     handleLoadChildren: (nodeId: string) => Promise<TreeViewDataType<T>[]>;
     selectNodeById: (nodeId: string) => void;
     getParent: (nodeId: string) => TreeViewDataType<T> | null;