@gouvfr-lasuite/ui-kit 0.18.6 → 0.19.0

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import { JSX } from 'react/jsx-runtime';
 import { Key } from 'react-stately';
 import { LabelHTMLAttributes } from 'react';
 import { MemoExoticComponent } from 'react';
+import { ModalSize } from '@gouvfr-lasuite/cunningham-react';
 import { NodeApi } from 'react-arborist';
 import { NodeRendererProps } from 'react-arborist';
 import { Option as Option_2 } from '@gouvfr-lasuite/cunningham-react';
@@ -42,7 +43,7 @@ declare type AccessRoleDropdownProps = {
     canUpdate?: boolean;
     isOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
-    roleTopMessage?: string;
+    roleTopMessage?: DropdownMenuProps["topMessage"];
 };
 
 export declare type AddShareUserListProps<UserType> = {
@@ -502,6 +503,49 @@ export declare type BaseTreeViewData<T> = {
 
 export declare const containerSizeMap: Record<IconSize, number>;
 
+export declare const ContextMenu: <T>({ children, options, context, disabled, asChild, onFocus, onBlur, }: ContextMenuProps<T>) => JSX.Element;
+
+declare type ContextMenuContextValue = {
+    open: (config: {
+        position: {
+            x: number;
+            y: number;
+        };
+        items: MenuItem[];
+        onBlur?: () => void;
+    }) => void;
+    close: () => void;
+};
+
+/**
+ * @deprecated Use MenuItem instead
+ */
+export declare type ContextMenuItem = MenuItem;
+
+/**
+ * @deprecated Use MenuItemAction instead
+ */
+export declare type ContextMenuItemAction = MenuItemAction;
+
+/**
+ * @deprecated Use MenuItemSeparator instead
+ */
+export declare type ContextMenuItemSeparator = MenuItemSeparator;
+
+export declare type ContextMenuProps<T = unknown> = {
+    children: ReactNode;
+    options: MenuItem[] | ((context: T) => MenuItem[]);
+    context?: T;
+    disabled?: boolean;
+    asChild?: boolean;
+    /** Called when the menu opens on this trigger */
+    onFocus?: () => void;
+    /** Called when the menu closes (if it was open on this trigger) */
+    onBlur?: () => void;
+};
+
+export declare const ContextMenuProvider: ({ children }: PropsWithChildren) => JSX.Element;
+
 export declare const cunninghamConfig: {
     themes: {
         default: any;
@@ -520,25 +564,30 @@ 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 = {
-    label: string;
-    icon?: ReactNode;
-    callback?: () => void | Promise<unknown>;
-    isDisabled?: boolean;
-    showSeparator?: boolean;
-    isHidden?: boolean;
+/**
+ * Union type for DropdownMenu items (supports separators)
+ */
+export declare type DropdownMenuItem = DropdownMenuOption | MenuItemSeparator;
+
+/**
+ * DropdownMenu option extending the shared MenuItemAction
+ * Adds selection-specific props: isChecked, value
+ * @deprecated showSeparator - use MenuItemSeparator instead
+ */
+export declare type DropdownMenuOption = MenuItemAction & {
     isChecked?: boolean;
-    testId?: string;
     value?: string;
+    /** @deprecated Use MenuItem with { type: "separator" } instead */
+    showSeparator?: boolean;
 };
 
 export declare type DropdownMenuProps = {
-    options: DropdownMenuOption[];
+    options: DropdownMenuItem[];
     onOpenChange?: (isOpen: boolean) => void;
     selectedValues?: string[];
     onSelectValue?: (value: string) => void;
     isOpen?: boolean;
-    topMessage?: string;
+    topMessage?: string | ReactNode;
     shouldCloseOnInteractOutside?: (element: Element) => boolean;
 };
 
@@ -978,6 +1027,12 @@ export declare const getContainerSize: (iconSize: IconSize) => number;
 
 export declare const getIconSize: (iconSize: IconSize) => number;
 
+/**
+ * Returns the appropriate icon for the step based on active state.
+ * Extracted to avoid duplication between desktop and mobile views.
+ */
+export declare const getStepIcon: (step: OnboardingStep, isActive: boolean) => ReactNode;
+
 export declare const getUIKitThemesFromGlobals: (globals: Parameters<typeof getThemesFromGlobals>[0], options?: Parameters<typeof getThemesFromGlobals>[1]) => Record<string, any>;
 
 /**
@@ -1229,6 +1284,7 @@ export declare const locales: {
                 ok: string;
                 shareButton: string;
                 modalTitle: string;
+                modalAriaLabel: string;
                 access: {
                     delete: string;
                 };
@@ -1262,6 +1318,10 @@ export declare const locales: {
                                 title: string;
                                 description: string;
                             };
+                            authenticated: {
+                                title: string;
+                                description: string;
+                            };
                             restricted: {
                                 title: string;
                                 description: string;
@@ -1306,6 +1366,15 @@ export declare const locales: {
                     alt: string;
                 };
             };
+            onboarding: {
+                skip: string;
+                next: string;
+                previous: string;
+                complete: string;
+                stepLabel: string;
+                currentStepSuffix: string;
+                contentRegionLabel: string;
+            };
         };
     };
     "fr-FR": {
@@ -1393,6 +1462,7 @@ export declare const locales: {
                 copyLink: string;
                 ok: string;
                 modalTitle: string;
+                modalAriaLabel: string;
                 shareButton: string;
                 access: {
                     delete: string;
@@ -1431,6 +1501,10 @@ export declare const locales: {
                                 title: string;
                                 description: string;
                             };
+                            authenticated: {
+                                title: string;
+                                description: string;
+                            };
                         };
                     };
                     role: {
@@ -1471,6 +1545,15 @@ export declare const locales: {
                     alt: string;
                 };
             };
+            onboarding: {
+                skip: string;
+                next: string;
+                previous: string;
+                complete: string;
+                stepLabel: string;
+                currentStepSuffix: string;
+                contentRegionLabel: string;
+            };
         };
     };
 };
@@ -1491,8 +1574,105 @@ export declare type MainLayoutProps = {
     setIsLeftPanelOpen?: (isLeftPanelOpen: boolean) => void;
 };
 
+/**
+ * Union type for all menu items
+ */
+export declare type MenuItem = MenuItemAction | MenuItemSeparator;
+
+/**
+ * Base action item for menus (shared between ContextMenu and DropdownMenu)
+ */
+export declare type MenuItemAction = {
+    id?: string;
+    label: string;
+    subText?: string;
+    icon?: ReactNode;
+    callback?: () => void | Promise<unknown>;
+    isDisabled?: boolean;
+    isHidden?: boolean;
+    variant?: "default" | "danger";
+    testId?: string;
+};
+
+/**
+ * Separator item for menus
+ */
+export declare type MenuItemSeparator = {
+    type: "separator";
+};
+
+export { ModalSize }
+
 export { NodeRendererProps }
 
+export declare const OnboardingModal: ({ isOpen, size, appName, mainTitle, steps, initialStep, footerLink, onSkip, onComplete, onClose, labels, }: OnboardingModalProps) => JSX.Element | null;
+
+export declare interface OnboardingModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Size of the modal on desktop (default: ModalSize.LARGE). On mobile, always ModalSize.FULL */
+    size?: ModalSize;
+    /** Name of the application or module (e.g., "Discover Docs", "Welcome to Messaging") */
+    appName?: string;
+    /** Main heading of the onboarding modal (e.g., "Learn the core principles") */
+    mainTitle: string;
+    /** Array of onboarding steps */
+    steps: OnboardingStep[];
+    /** Initial step index (default: 0) */
+    initialStep?: number;
+    /** Optional footer link - requires either href or onClick */
+    footerLink?: {
+        label: string;
+    } & ({
+        href: string;
+        onClick?: () => void;
+    } | {
+        onClick: () => void;
+        href?: string;
+    });
+    /** Callback when user clicks Skip */
+    onSkip?: () => void;
+    /** Callback when user clicks Understood (last step) */
+    onComplete: () => void;
+    /** Callback when user clicks the close button */
+    onClose: () => void;
+    /** Custom labels for i18n */
+    labels?: {
+        skip?: string;
+        next?: string;
+        previous?: string;
+        complete?: string;
+    };
+}
+
+export declare interface OnboardingStep {
+    /** Icon displayed next to the step title */
+    icon: ReactNode;
+    /** Icon displayed when the step is active (optional, defaults to icon with brand color) */
+    activeIcon?: ReactNode;
+    /** Step title */
+    title: string;
+    /** Step description, visible only when the step is active */
+    description?: string;
+    /** Content displayed in the preview zone (image, video, component, etc.) */
+    content: ReactNode;
+}
+
+export declare interface OnboardingStepItemProps {
+    /** Step data */
+    step: OnboardingStep;
+    /** Whether this step is active */
+    isActive: boolean;
+    /** Click handler */
+    onClick: () => void;
+    /** Step index (0-based) for accessibility */
+    index: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Accessible label for the step */
+    ariaLabel: string;
+}
+
 export declare type OpenMap = {
     [id: string]: boolean;
 };
@@ -1561,12 +1741,13 @@ export declare const QuickSearchInput: ({ loading, inputValue, onFilter, placeho
 
 export declare const QuickSearchItem: ({ children, onSelect, id, }: PropsWithChildren<Props>) => JSX.Element;
 
-export declare const QuickSearchItemTemplate: ({ alwaysShowRight, left, right, }: QuickSearchItemTemplateProps) => JSX.Element;
+export declare const QuickSearchItemTemplate: ({ alwaysShowRight, left, right, testId, }: QuickSearchItemTemplateProps) => JSX.Element;
 
 export declare type QuickSearchItemTemplateProps = {
     alwaysShowRight?: boolean;
     left: ReactNode;
     right?: ReactNode;
+    testId?: string;
 };
 
 export declare type QuickSearchProps = {
@@ -1617,7 +1798,7 @@ export declare type ShareInvitationItemProps<UserType, InvitationType> = {
     showMoreActionsButton?: boolean;
 };
 
-export declare const ShareMemberItem: <UserType, AccessType>({ accessData, roles, updateRole, deleteAccess, canUpdate, roleTopMessage, }: ShareMemberItemProps<UserType, AccessType>) => JSX.Element;
+export declare const ShareMemberItem: <UserType, AccessType>({ accessData, accessRoleKey, roles, updateRole, deleteAccess, canUpdate, roleTopMessage, }: ShareMemberItemProps<UserType, AccessType>) => JSX.Element;
 
 export declare type ShareMemberItemProps<UserType, AccessType> = {
     accessData: AccessData<UserType, AccessType>;
@@ -1625,18 +1806,20 @@ export declare type ShareMemberItemProps<UserType, AccessType> = {
     updateRole?: (access: AccessData<UserType, AccessType>, role: string) => void;
     deleteAccess?: (access: AccessData<UserType, AccessType>) => void;
     canUpdate?: boolean;
-    roleTopMessage?: string;
+    roleTopMessage?: DropdownMenuProps["topMessage"];
+    accessRoleKey?: keyof AccessData<UserType, AccessType>;
 };
 
 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>[];
+    accessRoleKey?: keyof AccessData<UserType, AccessType>;
     hasNextMembers?: boolean;
     onLoadNextMembers?: () => void;
     onDeleteAccess?: (access: AccessData<UserType, AccessType>) => void;
     onUpdateAccess?: (access: AccessData<UserType, AccessType>, role: string) => void;
-    accessRoleTopMessage?: (access: AccessData<UserType, AccessType>) => string | undefined;
+    accessRoleTopMessage?: (access: AccessData<UserType, AccessType>) => string | ReactNode | undefined;
 };
 
 export declare const ShareModalCopyLinkFooter: ({ onCopyLink, onOk, }: ShareModalCopyLinkFooterProps) => JSX.Element;
@@ -1664,6 +1847,8 @@ declare type ShareModalLinkSettingsProps = {
     linkRole?: "reader" | "editor";
     showLinkRole?: boolean;
     onUpdateLinkRole?: (value: string) => void;
+    topLinkReachMessage?: DropdownMenuProps["topMessage"];
+    topLinkRoleMessage?: DropdownMenuProps["topMessage"];
 };
 
 /**
@@ -1805,11 +1990,11 @@ export declare type TreeProviderProps<T> = {
     onLoadChildren?: (id: string, page: number) => Promise<PaginatedChildrenResult<T>>;
 };
 
-export declare const TreeView: <T>({ initialOpenState, dndRootElement, selectedNodeId, rootNodeId, renderNode, canDrop, canDrag, afterMove, beforeMove, rowProps, }: TreeViewProps<T>) => JSX.Element | undefined;
+export declare const TreeView: <T>({ initialOpenState, dndRootElement, selectedNodeId, rootNodeId, renderNode, canDrop, canDrag, afterMove, beforeMove, paddingTop, paddingBottom, rowProps, }: TreeViewProps<T>) => JSX.Element | undefined;
 
 export declare type TreeViewDataType<T> = BaseTreeViewData<T>;
 
-export declare const TreeViewItem: <T>({ children, itemProps, onClick, onKeyDown, node, dragHandle, style, forceLoading, }: PropsWithChildren<TreeViewNodeProps<T>>) => JSX.Element;
+export declare const TreeViewItem: <T>({ children, itemProps, testId, onClick, onKeyDown, node, dragHandle, style, forceLoading, }: PropsWithChildren<TreeViewNodeProps<T>>) => JSX.Element;
 
 export declare enum TreeViewMoveModeEnum {
     FIRST_CHILD = "first-child",
@@ -1832,6 +2017,7 @@ export declare type TreeViewNodeProps<T> = NodeRendererProps<TreeDataItem<T>> &
     onClick?: () => void;
     onKeyDown?: (e: default_2.KeyboardEvent) => void;
     forceLoading?: boolean;
+    testId?: string;
 };
 
 export declare enum TreeViewNodeTypeEnum {
@@ -1856,6 +2042,8 @@ export declare type TreeViewProps<T> = {
     beforeMove?: (result: TreeViewMoveResult, moveCallback: () => void) => void;
     afterMove?: (result: TreeViewMoveResult) => void;
     renderNode: (props: NodeRendererProps<TreeDataItem<T>>) => React.ReactNode;
+    paddingTop?: number;
+    paddingBottom?: number;
     rowProps?: React.HTMLAttributes<HTMLDivElement>;
 };
 
@@ -1882,6 +2070,8 @@ export declare const TreeViewSeparator: ({ top, left }: CursorProps) => JSX.Elem
  */
 export declare function useArrowRoving(container: HTMLElement | null): void;
 
+export declare const useContextMenuContext: () => ContextMenuContextValue;
+
 /**
  * Hook for using custom translations with type safety.
  *