@myunisoft/design-system 1.3.0 → 1.3.1-rev157-3

package/dist/assets/I18n/locales/en.d.ts

@@ -35,6 +35,22 @@ declare const _default: {
         addColumn: string;
         restoreInitial: string;
     };
+    documentComposer: {
+        createSection: string;
+        deleteSection: {
+            title: string;
+            content: string;
+            cancel: string;
+            confirm: string;
+        };
+        unsavedChanges: {
+            title: string;
+            content: string;
+            saveAndQuit: string;
+            cancel: string;
+            quitWithoutSaving: string;
+        };
+    };
     dashboard: {
         ba: {
             linkTo: string;

package/dist/assets/I18n/locales/fr.d.ts

@@ -35,6 +35,22 @@ declare const _default: {
         addColumn: string;
         restoreInitial: string;
     };
+    documentComposer: {
+        createSection: string;
+        deleteSection: {
+            title: string;
+            content: string;
+            cancel: string;
+            confirm: string;
+        };
+        unsavedChanges: {
+            title: string;
+            content: string;
+            saveAndQuit: string;
+            cancel: string;
+            quitWithoutSaving: string;
+        };
+    };
     dashboard: {
         ba: {
             linkTo: string;

package/dist/components/DocumentComposer/Treeview/CustomTreeItem.d.ts

@@ -1,6 +1,6 @@
 import type { RichTreeViewProApiRef, TreeItemProps } from '@mui/x-tree-view-pro';
 import type { TreeviewProps } from './types';
-type TreeItemCallbacks<T extends Record<string, unknown>> = Pick<TreeviewProps<T>, 'isSectionItem' | 'isVisibleItem' | 'getIconItem' | 'hasItemMenu' | 'getMenuItems' | 'isSectionDraggable' | 'onItemVisibilityChange' | 'isTemporaryItem' | 'onTemporarySectionValidation' | 'onTemporarySectionCancel' | 'onItemLabelChange' | 'hiddenSectionTooltip' | 'visibleIconTooltip' | 'hiddenIconTooltip'> & {
+type TreeItemCallbacks<T extends Record<string, unknown>> = Pick<TreeviewProps<T>, 'isSectionItem' | 'isVisibleItem' | 'getIconItem' | 'hasItemMenu' | 'getMenuItems' | 'isSectionDraggable' | 'onItemVisibilityChange' | 'temporaryItem' | 'isTemporaryItem' | 'onTemporarySectionValidation' | 'onTemporarySectionCancel' | 'onItemLabelChange' | 'hiddenSectionTooltip' | 'visibleIconTooltip' | 'hiddenIconTooltip'> & {
     apiRef: RichTreeViewProApiRef;
     onEditingChange?: (itemId: string | null) => void;
 };

package/dist/components/DocumentComposer/Treeview/slots/LabelInputSlot.d.ts

@@ -3,7 +3,7 @@ import type { RichTreeViewProApiRef } from '@mui/x-tree-view-pro';
 export declare const LabelInputSlot: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     ownerState?: unknown;
     itemId?: string;
-    isTemporary?: boolean;
+    isEditing?: boolean;
     onTemporarySectionValidation?: (label: string) => void;
     onTemporarySectionCancel?: () => void;
     onItemLabelChange?: (itemId: string, newLabel: string) => void;

package/dist/components/DocumentComposer/Treeview/types.d.ts

@@ -40,7 +40,7 @@ export type TreeviewProps<T> = {
     onTemporarySectionCancel: () => void;
     defaultExpandedItems: string[];
     checkboxSelection?: boolean;
-    multiSelect?: boolean;
+    onItemSelect?: (itemId: string | null) => void;
 } & CustomTreeviewItemProps<T>;
 export type TreeviewItemProps<T> = {
     itemId: string;

package/dist/components/DocumentComposer/components/SectionEditorPanel.d.ts

@@ -0,0 +1,7 @@
+import type { SectionContent } from '../types';
+type SectionEditorPanelProps = {
+    content: SectionContent;
+    onChange: (content: SectionContent) => void;
+};
+export declare const SectionEditorPanel: ({ content, onChange }: SectionEditorPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DocumentComposer/components/index.d.ts

@@ -0,0 +1 @@
+export { SectionEditorPanel } from './SectionEditorPanel';

package/dist/components/DocumentComposer/hooks/useDeleteConfirmation.d.ts

@@ -0,0 +1,12 @@
+type UseDeleteConfirmationParams = {
+    onSectionDelete?: (sectionId: string) => void;
+    /** When true, delete immediately without showing confirmation */
+    skipConfirmation?: boolean;
+};
+export declare const useDeleteConfirmation: ({ onSectionDelete, skipConfirmation }: UseDeleteConfirmationParams) => {
+    deleteItemId: string | null;
+    requestDelete: (sectionId: string) => void;
+    confirmDelete: () => void;
+    cancelDelete: () => void;
+};
+export {};

package/dist/components/DocumentComposer/hooks/useDragVisualFeedback.d.ts

@@ -3,7 +3,7 @@ import type { DocumentSection } from '../types';
 type UseDragVisualFeedbackParams = {
     containerRef: RefObject<HTMLDivElement | null>;
     getSectionById: (sectionId: string) => DocumentSection | null;
-    isValidDropTarget?: (draggedSection: DocumentSection, targetSection: DocumentSection | null) => boolean;
+    isValidDropTarget?: (draggedSection: DocumentSection, targetSection: DocumentSection | null, newIndex: number) => boolean;
 };
 /**
  * Provides visual feedback during drag-and-drop by graying out invalid drop targets.

package/dist/components/DocumentComposer/hooks/useTemporarySection.d.ts

@@ -2,6 +2,8 @@ import type { RichTreeViewProApiRef } from '@mui/x-tree-view-pro';
 import type { DocumentSection } from '../types';
 export type TemporarySection = Pick<DocumentSection, 'id' | 'parentId'> & {
     parentVisible: boolean;
+    /** When undefined = editing mode (input), when defined = optimistic mode (waiting for server) */
+    title?: string;
 };
 type UseTemporarySectionParams = {
     apiRef: RichTreeViewProApiRef;
@@ -12,14 +14,17 @@ type UseTemporarySectionParams = {
 /**
  * Flow:
  * 1. User triggers `create(parentId)` from context menu
- * 2. A temporary section appears in the tree in edit mode
+ * 2. A temporary section appears in the tree in edit mode (title = undefined)
  * 3. User types a title and presses Enter → `validate()` is called
+ *    - The section transitions to optimistic mode (title = defined)
+ *    - Server creation is called in background
  * 4. User presses Escape or leaves empty → `cancel()` is called
+ * 5. Server responds → temporary section is cleared, real section replaces it
  */
 export declare const useTemporarySection: ({ apiRef, getSectionById, onSectionCreate, scrollToBottom }: UseTemporarySectionParams) => {
     temporarySection: TemporarySection | null;
     create: (parentId?: string | null) => void;
-    validate: (title: string) => Promise<void>;
+    validate: (title: string) => void;
     cancel: () => void;
     isTemporary: (sectionId: string) => boolean;
 };

package/dist/components/DocumentComposer/hooks/useUnsavedChangesGuard.d.ts

@@ -0,0 +1,19 @@
+type UseUnsavedChangesGuardParams = {
+    isDirty: boolean;
+    selectedSectionId?: string | null;
+    onSectionSelect?: (sectionId: string | null) => void;
+    onSave?: () => Promise<void>;
+    onDirtyReset?: () => void;
+    /** When true, navigate immediately without showing confirmation (discards changes) */
+    skipConfirmation?: boolean;
+};
+export declare const useUnsavedChangesGuard: ({ isDirty, selectedSectionId, onSectionSelect, onSave, onDirtyReset, skipConfirmation }: UseUnsavedChangesGuardParams) => {
+    pendingSectionId: string | null;
+    isModalOpen: boolean;
+    isSaving: boolean;
+    guardedSelect: (sectionId: string | null) => void;
+    saveAndQuit: () => Promise<void>;
+    quitWithoutSaving: () => void;
+    cancelNavigation: () => void;
+};
+export {};

package/dist/components/DocumentComposer/index.d.ts

@@ -2,5 +2,5 @@ import type { DocumentComposerCallbacks, DocumentComposerCustomProps, DocumentSe
 type DocumentComposerProps = {
     sections?: DocumentSection[];
 } & DocumentComposerCallbacks & DocumentComposerCustomProps;
-declare const DocumentComposer: ({ sections, onSectionOrderChange, onSectionTitleChange, onSectionDelete, onSectionVisibilityChange, onSectionCreate, noSectionsPlaceholder, isLoading, getSectionTitleChangePermission, getSectionDeletePermission, getSectionOrderChangePermission, getSectionCreatePermission, getSectionVisibilityChangePermission, hiddenSectionTooltip, visibleIconTooltip, hiddenIconTooltip, isValidDropTarget }: DocumentComposerProps) => import("react/jsx-runtime").JSX.Element;
+declare const DocumentComposer: ({ sections, isLoadingSections, onSectionOrderChange, onSectionTitleChange, onSectionDelete, onSectionVisibilityChange, onSectionCreate, onSectionSelect, onSectionContentSave, noSectionsPlaceholder, getSectionTitleChangePermission, getSectionDeletePermission, getSectionOrderChangePermission, getSectionCreatePermission, getSectionVisibilityChangePermission, hiddenSectionTooltip, visibleIconTooltip, hiddenIconTooltip, renderSectionIcon, isValidDropTarget, sectionContent, isLoadingSectionContent, selectedSectionId, renderDeleteConfirmation, renderUnsavedChangesConfirmation }: DocumentComposerProps) => import("react/jsx-runtime").JSX.Element;
 export default DocumentComposer;

package/dist/components/DocumentComposer/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './section';

package/dist/components/DocumentComposer/types/props.d.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+import type { ItemPositionParams } from '../Treeview/types';
+import type { DocumentSection, SectionContent } from './section';
+export type DeleteConfirmationRenderProps = {
+    isOpen: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+export type UnsavedChangesRenderProps = {
+    isOpen: boolean;
+    isSaving: boolean;
+    /** True if onSectionContentSave is provided */
+    canSave: boolean;
+    onSaveAndQuit: () => void;
+    onQuitWithoutSaving: () => void;
+    onCancel: () => void;
+};
+export type DocumentComposerLabels = {
+    createSection?: string;
+    rename?: string;
+    delete?: string;
+    createSubsection?: string;
+    hiddenItemTooltip?: string;
+};
+export type DocumentComposerCustomProps = {
+    noSectionsPlaceholder?: string | ReactNode;
+    isLoadingSections?: boolean;
+    /** Defaults to `() => true` */
+    getSectionTitleChangePermission?: (section: DocumentSection) => boolean;
+    /** Defaults to `() => true` */
+    getSectionDeletePermission?: (section: DocumentSection) => boolean;
+    /** Defaults to `() => true` */
+    getSectionOrderChangePermission?: (section: DocumentSection) => boolean;
+    /** Defaults to `() => true` */
+    getSectionCreatePermission?: (section: DocumentSection) => boolean;
+    /** Defaults to `() => true` */
+    getSectionVisibilityChangePermission?: (section: DocumentSection) => boolean;
+    hiddenSectionTooltip?: string;
+    visibleIconTooltip?: string;
+    hiddenIconTooltip?: string;
+    /** Return null for no icon */
+    renderSectionIcon?: (section: DocumentSection) => ReactNode;
+    /**
+     * Determines valid drop targets during drag. Invalid targets are greyed out.
+     * `targetSection` is `null` when dropping at root level.
+     * `newIndex` is the position where the item would be inserted in the target's children.
+     * Defaults to `() => true`.
+     */
+    isValidDropTarget?: (draggedSection: DocumentSection, targetSection: DocumentSection | null, newIndex: number) => boolean;
+    sectionContent?: SectionContent;
+    isLoadingSectionContent?: boolean;
+    selectedSectionId?: string | null;
+    /** If not provided, deletion proceeds without confirmation */
+    renderDeleteConfirmation?: (props: DeleteConfirmationRenderProps) => ReactNode;
+    /** If not provided, navigation proceeds without confirmation (discards changes) */
+    renderUnsavedChangesConfirmation?: (props: UnsavedChangesRenderProps) => ReactNode;
+};
+export type DocumentComposerCallbacks = {
+    onSectionOrderChange?: (params: ItemPositionParams) => void;
+    onSectionTitleChange?: (sectionId: string, newTitle: string) => void;
+    onSectionDelete?: (sectionId: string) => void;
+    onSectionVisibilityChange?: (sectionId: string, visible: boolean) => void;
+    onSectionCreate?: (parentId: string | null, title: string) => string | Promise<string>;
+    onSectionSelect?: (sectionId: string | null) => void;
+    /** Used by unsaved changes modal "Save and quit" action */
+    onSectionContentSave?: () => Promise<void>;
+};

package/dist/components/DocumentComposer/types/section.d.ts

@@ -0,0 +1,33 @@
+export declare const CellFormat: {
+    readonly TEXT: "text";
+    readonly AMOUNT: "amount";
+};
+export type CellFormat = (typeof CellFormat)[keyof typeof CellFormat];
+export type TableCell = {
+    value: string;
+    editable: boolean;
+    format: CellFormat;
+};
+export type TableRow = TableCell[];
+export type TableValue = {
+    id: string;
+    headers: TableRow[];
+    rows: TableRow[];
+    footers: TableRow[];
+};
+export type TableContentBlock = {
+    type: 'table';
+    value: TableValue;
+};
+/** Extend this union as new content block types are added */
+export type ContentBlock = TableContentBlock;
+export type SectionContent = ContentBlock[];
+export type DocumentSection = {
+    id: string;
+    title: string;
+    visible: boolean;
+    parentId: string | null;
+    type?: string;
+    hasTables?: boolean;
+    sections?: DocumentSection[] | null;
+};

package/dist/components/DocumentComposer/utils/sectionHelpers.d.ts

@@ -7,4 +7,3 @@ export declare const isSectionVisible: (section: DocumentSection) => boolean;
 export declare const getSectionChildren: (section: DocumentSection) => DocumentSection[] | undefined;
 export declare const getSectionId: (section: DocumentSection) => string;
 export declare const getSectionTitle: (section: DocumentSection) => string;
-export declare const getSectionIcon: (section: DocumentSection) => import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -7,6 +7,9 @@ export { default as BackgroundLoader } from './components/BackgroundLoader';
 export { default as BadgeAdd } from './components/BadgeAdd';
 export { default as Checkbox } from './components/basics/Checkbox';
 export { default as ExpandButton } from './components/basics/ExpandButton';
+export { default as DocumentComposer } from './components/DocumentComposer';
+export type { CellFormat, ContentBlock, DeleteConfirmationRenderProps, SectionContent, TableCell, TableContentBlock, TableRow, TableValue, UnsavedChangesRenderProps } from './components/DocumentComposer/types';
+export { CellFormat as CellFormatEnum } from './components/DocumentComposer/types';
 export * from './components/basics/Icon/';
 export * from './components/basics/Icon/Icons-material';
 export { default as Snackbar } from './components/basics/Snackbar';