@thebuoyant-tsdev/mui-ts-library 1.3.2 → 1.4.0

package/README.de.md

@@ -14,7 +14,7 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 | [`GanttChart`](#ganttchart) | Projekt-Timeline mit hierarchischen Aufgaben, Meilensteinen, Drag & Drop, Zoom und integrierten CRUD-Dialogen | [Vollständiges Manual →](user-manuals/GanttChart.de.md) |
 | [`TagSelection`](#tagselection) | Multi-Tag-Auswahlfeld mit Autocomplete, freier Tag-Erstellung, Overflow-Chips und MUI-Theme-Farben | [Vollständiges Manual →](user-manuals/TagSelection.de.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Passwort-Eingabe mit animiertem Stärke-Meter und Anforderungsliste | [Vollständiges Manual →](user-manuals/PasswordStrengthMeter.de.md) |
-| [`RichTextEditor`](#richtexteditor) | WYSIWYG-Editor (TipTap v3) mit Toolbar, Link-Dialog, Textfarbe, Hervorhebung und Markdown-Einfügen | [Vollständiges Manual →](user-manuals/RichTextEditor.de.md) |
+| [`RichTextEditor`](#richtexteditor) | WYSIWYG-Editor (TipTap v3) mit Toolbar, Link-Dialog, Textfarbe, Hervorhebung, Wörter-Zähler, Vollbild-Modus und Markdown-Einfügen | [Vollständiges Manual →](user-manuals/RichTextEditor.de.md) |
 | [`SqlEditor`](#sqleditor) | SQL-Code-Editor (CodeMirror 6) mit Syntax-Highlighting, Multi-Dialekt, Autocomplete und Linting | [Vollständiges Manual →](user-manuals/SqlEditor.de.md) |
 | [`JsonEditor`](#jsoneditor) | JSON-Code-Editor (CodeMirror 6) mit Echtzeit-Validierung, Format- und Komprimieren-Schaltfläche | [Vollständiges Manual →](user-manuals/JsonEditor.de.md) |
 

package/README.md

@@ -14,7 +14,7 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 | [`GanttChart`](#ganttchart) | Project timeline with hierarchical tasks, milestones, drag & drop, zoom, and built-in CRUD dialogs | [Full Manual →](user-manuals/GanttChart.md) |
 | [`TagSelection`](#tagselection) | Multi-tag selector with autocomplete, free tag creation, overflow chips, and MUI theme colors | [Full Manual →](user-manuals/TagSelection.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Password input with animated strength meter and requirements checklist | [Full Manual →](user-manuals/PasswordStrengthMeter.md) |
-| [`RichTextEditor`](#richtexteditor) | WYSIWYG editor (TipTap v3) with toolbar, link dialog, text color, highlight, and Markdown paste | [Full Manual →](user-manuals/RichTextEditor.md) |
+| [`RichTextEditor`](#richtexteditor) | WYSIWYG editor (TipTap v3) with toolbar, link dialog, text color, highlight, word count, fullscreen mode, and Markdown paste | [Full Manual →](user-manuals/RichTextEditor.md) |
 | [`SqlEditor`](#sqleditor) | SQL code editor (CodeMirror 6) with syntax highlighting, multi-dialect, autocomplete, and linting | [Full Manual →](user-manuals/SqlEditor.md) |
 | [`JsonEditor`](#jsoneditor) | JSON code editor (CodeMirror 6) with real-time validation, Format, and Compact buttons | [Full Manual →](user-manuals/JsonEditor.md) |
 

package/dist/components/confirm-dialog/ConfirmDialog.types.d.ts

@@ -6,14 +6,14 @@ export type ConfirmDialogTranslation = {
 };
 export declare const DEFAULT_CONFIRM_DIALOG_TRANSLATION: ConfirmDialogTranslation;
 export type ConfirmDialogOptions = {
-    title?: string;
-    description?: string | React.ReactNode;
-    confirmLabel?: string;
     cancelLabel?: string;
-    severity?: ConfirmDialogSeverity;
+    confirmLabel?: string;
+    description?: string | React.ReactNode;
     hideCancelButton?: boolean;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+    severity?: ConfirmDialogSeverity;
     showIcon?: boolean;
+    title?: string;
 };
 export type ConfirmDialogProviderProps = {
     children: React.ReactNode;

package/dist/components/gantt-chart/GanttChart.types.d.ts

@@ -79,41 +79,41 @@ export type GanttToolbarConfig = {
     showResetView?: boolean;
 };
 export type GanttChartProps = {
-    tasks: GanttTask[];
-    timeScale?: GanttTimeScale;
+    cascadeDependencies?: boolean;
+    defaultRangeEnd?: Date;
+    defaultRangeStart?: Date;
+    draggable?: boolean;
+    enableBuiltinDialogs?: boolean;
+    ganttTheme?: GanttTheme;
     /** Höhe des Charts. "auto" = 100 % des Eltern-Containers. Standard: 400. */
     height?: number | string;
-    /** Breite des Charts. "auto" = 100 % des Eltern-Containers. Standard: "100%". */
-    width?: number | string;
     initialExpandAll?: boolean;
-    showToolbar?: boolean;
-    toolbarConfig?: GanttToolbarConfig;
-    defaultRangeStart?: Date;
-    defaultRangeEnd?: Date;
-    translations?: Partial<GanttTranslations>;
-    minPanelWidth?: number;
+    inlineEdit?: boolean;
     maxPanelWidth?: number;
-    enableBuiltinDialogs?: boolean;
-    zoomable?: boolean;
-    draggable?: boolean;
+    minPanelWidth?: number;
+    progressDraggable?: boolean;
     resizable?: boolean;
-    cascadeDependencies?: boolean;
     showCriticalPath?: boolean;
-    inlineEdit?: boolean;
-    progressDraggable?: boolean;
-    virtualizeRows?: boolean;
+    showToolbar?: boolean;
     statusColors?: GanttStatusColors;
-    ganttTheme?: GanttTheme;
-    onTaskClick?: (task: GanttTask) => void;
-    onMilestoneClick?: (task: GanttTask) => void;
+    tasks: GanttTask[];
+    timeScale?: GanttTimeScale;
+    toolbarConfig?: GanttToolbarConfig;
+    translations?: Partial<GanttTranslations>;
+    virtualizeRows?: boolean;
+    /** Breite des Charts. "auto" = 100 % des Eltern-Containers. Standard: "100%". */
+    width?: number | string;
+    zoomable?: boolean;
     onAddTask?: (parentTask?: GanttTask) => void;
-    onEditTask?: (task: GanttTask) => void;
     onDeleteTask?: (task: GanttTask) => void;
+    onEditTask?: (task: GanttTask) => void;
+    onMilestoneClick?: (task: GanttTask) => void;
     onStatusChange?: (task: GanttTask, status: GanttTaskStatus) => void;
+    onTaskClick?: (task: GanttTask) => void;
+    onTaskCreated?: (task: GanttTask) => void;
+    onTaskDeleted?: (taskId: string) => void;
     onTaskMoved?: (task: GanttTask, newStart: Date, newEnd: Date) => void;
     onTaskResized?: (task: GanttTask, newEnd: Date) => void;
     onTasksChange?: (tasks: GanttTask[]) => void;
-    onTaskCreated?: (task: GanttTask) => void;
     onTaskUpdated?: (task: GanttTask) => void;
-    onTaskDeleted?: (taskId: string) => void;
 };

package/dist/components/json-editor/JsonEditor.types.d.ts

@@ -32,29 +32,29 @@ export type JsonEditorHighlightColors = {
     null?: string;
 };
 export type JsonEditorProps = {
-    value?: string;
-    onChange?: (json: string) => void;
-    onValidChange?: (isValid: boolean) => void;
-    placeholder?: string;
-    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
-    height?: number | string;
-    /** Width. Numbers → px. Default → 100%. */
-    width?: number | string;
     disabled?: boolean;
-    readonly?: boolean;
     error?: boolean;
+    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
+    height?: number | string;
     helperText?: string;
-    /** Name for native form submission via hidden input. */
-    name?: string;
+    highlightColors?: JsonEditorHighlightColors;
     /** Indentation spaces used by the Format button. Default: 2. */
     indent?: number;
-    showLineNumbers?: boolean;
+    /** Name for native form submission via hidden input. */
+    name?: string;
+    placeholder?: string;
+    readonly?: boolean;
     showLineColumn?: boolean;
+    showLineNumbers?: boolean;
     /** Shows a Valid / Invalid JSON indicator in the footer. */
     showValidation?: boolean;
     toolbarConfig?: JsonEditorToolbarConfig;
     translation?: Partial<JsonEditorTranslation>;
-    highlightColors?: JsonEditorHighlightColors;
+    value?: string;
+    /** Width. Numbers → px. Default → 100%. */
+    width?: number | string;
     onBlur?: () => void;
+    onChange?: (json: string) => void;
     onFocus?: () => void;
+    onValidChange?: (isValid: boolean) => void;
 };

package/dist/components/password-strength-meter/PasswordStrengthMeter.types.d.ts

@@ -37,20 +37,20 @@ export declare const DEFAULT_PASSWORD_TRANSLATIONS: PasswordStrengthMeterTransla
 export declare const DEFAULT_METER_COLORS: MeterColors;
 export declare const DEFAULT_CHECK_COLORS: CheckColors;
 export type PasswordStrengthMeterProps = {
-    value?: string;
-    name?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
+    autoComplete?: string;
+    checkColors?: CheckColors;
     disabled?: boolean;
     error?: boolean;
     helperText?: string;
-    autoComplete?: string;
-    showPasswordAdornment?: boolean;
-    showMeter?: boolean;
-    showSummary?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
     inputSize?: "small" | "medium";
-    translation?: Partial<PasswordStrengthMeterTranslation>;
     meterColors?: Partial<MeterColors>;
+    name?: string;
     passwordMinLength?: number;
-    checkColors?: CheckColors;
+    showMeter?: boolean;
+    showPasswordAdornment?: boolean;
+    showSummary?: boolean;
+    translation?: Partial<PasswordStrengthMeterTranslation>;
+    value?: string;
     onPasswordChange?: (password: string, strengthResult: StrengthResult) => void;
 };

package/dist/components/rich-text-editor/RichTextEditor.d.ts

@@ -1,2 +1,2 @@
 import { type RichTextEditorProps } from "./RichTextEditor.types";
-export declare function RichTextEditor({ value, onChange, placeholder, outputFormat, height, width, showCharacterCount, maxCharacters, toolbarConfig, disabled, readonly, name, error, helperText, translation, onBlur, onFocus, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditor({ disabled, error, height, helperText, maxCharacters, name, placeholder, readonly, showCharacterCount, showToolbar, showWordCount, toolbarConfig, translation, value, width, onBlur, onChange, onFocus, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text-editor/RichTextEditor.types.d.ts

@@ -1,4 +1,3 @@
-export type RichTextEditorOutputFormat = "html" | "json";
 export type RichTextEditorToolbarConfig = {
     showBold?: boolean;
     showItalic?: boolean;
@@ -17,6 +16,8 @@ export type RichTextEditorToolbarConfig = {
     showHighlight?: boolean;
     showUndoRedo?: boolean;
     showClearFormat?: boolean;
+    /** Fullscreen-Button in der Toolbar — standardmäßig deaktiviert (opt-in) */
+    showFullscreenButton?: boolean;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG: Required<RichTextEditorToolbarConfig>;
 export type RichTextEditorTranslation = {
@@ -47,26 +48,35 @@ export type RichTextEditorTranslation = {
     linkDialogRemove: string;
     characterCount: string;
     characterCountMax: string;
+    /** Wörter-Zähler im Footer, z.B. "{count} words" */
+    wordCount: string;
+    /** Tooltip für den Fullscreen-Button */
+    fullscreen: string;
+    /** Tooltip für den Exit-Fullscreen-Button */
+    exitFullscreen: string;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TRANSLATION: RichTextEditorTranslation;
 export type RichTextEditorProps = {
-    value?: string;
-    onChange?: (value: string) => void;
-    placeholder?: string;
-    outputFormat?: RichTextEditorOutputFormat;
+    disabled?: boolean;
+    error?: boolean;
     /** Gesamthöhe des Editors (Toolbar + Inhalt). Zahlen → px. "auto" → füllt den umgebenden Flex-Container. */
     height?: number | string;
-    /** Breite des Editors. Zahlen → px. "auto" oder leer → 100% des Elternelements. */
-    width?: number | string;
-    showCharacterCount?: boolean;
+    helperText?: string;
     maxCharacters?: number;
-    toolbarConfig?: RichTextEditorToolbarConfig;
-    disabled?: boolean;
-    readonly?: boolean;
     name?: string;
-    error?: boolean;
-    helperText?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    showCharacterCount?: boolean;
+    /** Blendet die Toolbar aus ohne den Editor in den readonly-Modus zu versetzen */
+    showToolbar?: boolean;
+    /** Zeigt einen Wörter-Zähler im Footer an */
+    showWordCount?: boolean;
+    toolbarConfig?: RichTextEditorToolbarConfig;
     translation?: Partial<RichTextEditorTranslation>;
+    value?: string;
+    /** Breite des Editors. Zahlen → px. "auto" oder leer → 100% des Elternelements. */
+    width?: number | string;
     onBlur?: () => void;
+    onChange?: (value: string) => void;
     onFocus?: () => void;
 };

package/dist/components/rich-text-editor/RichTextEditorFooter.d.ts

@@ -5,7 +5,9 @@ type RichTextEditorFooterProps = {
     showCharacterCount?: boolean;
     charCount: number;
     maxCharacters?: number;
+    showWordCount?: boolean;
+    wordCount: number;
     translation: RichTextEditorTranslation;
 };
-export declare function RichTextEditorFooter({ helperText, error, showCharacterCount, charCount, maxCharacters, translation: t, }: RichTextEditorFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditorFooter({ helperText, error, showCharacterCount, charCount, maxCharacters, showWordCount, wordCount, translation: t, }: RichTextEditorFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/rich-text-editor/RichTextEditorToolbar.d.ts

@@ -5,6 +5,8 @@ type RichTextEditorToolbarProps = {
     toolbarConfig: Required<RichTextEditorToolbarConfig>;
     translation: RichTextEditorTranslation;
     disabled?: boolean;
+    isFullscreen: boolean;
+    onToggleFullscreen: () => void;
 };
-export declare function RichTextEditorToolbar({ editor, toolbarConfig: tc, translation: t, disabled, }: RichTextEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditorToolbar({ editor, toolbarConfig: tc, translation: t, disabled, isFullscreen, onToggleFullscreen, }: RichTextEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/sql-editor/SqlEditor.types.d.ts

@@ -45,29 +45,29 @@ export type SqlEditorHighlightColors = {
     identifier?: string;
 };
 export type SqlEditorProps = {
-    value?: string;
-    onChange?: (sql: string) => void;
-    placeholder?: string;
-    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
-    height?: number | string;
-    /** Width. Numbers → px. Default → 100%. */
-    width?: number | string;
+    dialect?: SqlEditorDialect;
     disabled?: boolean;
-    readonly?: boolean;
     error?: boolean;
+    /** Total height (toolbar + content). Numbers → px. "auto" → fills surrounding flex container. */
+    height?: number | string;
     helperText?: string;
+    highlightColors?: SqlEditorHighlightColors;
     /** Name for native form submission via hidden input. */
     name?: string;
-    dialect?: SqlEditorDialect;
-    showLineNumbers?: boolean;
-    showLineColumn?: boolean;
+    placeholder?: string;
+    readonly?: boolean;
+    schema?: SqlSchema;
     showErrorCount?: boolean;
+    showLineColumn?: boolean;
+    showLineNumbers?: boolean;
     toolbarConfig?: SqlEditorToolbarConfig;
     translation?: Partial<SqlEditorTranslation>;
-    highlightColors?: SqlEditorHighlightColors;
-    schema?: SqlSchema;
-    onExecute?: (sql: string) => void;
-    onLint?: (sql: string) => Promise<SqlLintError[]> | SqlLintError[];
+    value?: string;
+    /** Width. Numbers → px. Default → 100%. */
+    width?: number | string;
     onBlur?: () => void;
+    onChange?: (sql: string) => void;
+    onExecute?: (sql: string) => void;
     onFocus?: () => void;
+    onLint?: (sql: string) => Promise<SqlLintError[]> | SqlLintError[];
 };

package/dist/components/tag-selection/TagSelection.types.d.ts

@@ -19,23 +19,23 @@ export type TagSelectionTranslation = {
 };
 export declare const DEFAULT_TAG_SELECTION_TRANSLATION: TagSelectionTranslation;
 export type TagSelectionProps = {
-    tags: TagSelectionItem[];
-    showSelectedTags?: boolean;
-    showSelectedTagsLabel?: boolean;
-    showAutoComplete?: boolean;
-    translation?: Partial<TagSelectionTranslation>;
-    inputSize?: "small" | "medium";
+    allowCreate?: boolean;
     chipSize?: "small" | "medium";
     disabled?: boolean;
+    inputSize?: "small" | "medium";
+    listboxMaxHeight?: number;
     loading?: boolean;
     maxTags?: number;
-    allowCreate?: boolean;
     maxVisibleChips?: number;
     popoverPlacement?: "top" | "bottom";
-    listboxMaxHeight?: number;
-    onTagSelect?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
-    onTagDelete?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
-    onTagsChange?: (selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
+    showAutoComplete?: boolean;
+    showSelectedTags?: boolean;
+    showSelectedTagsLabel?: boolean;
+    tags: TagSelectionItem[];
+    translation?: Partial<TagSelectionTranslation>;
     onSearchChange?: (searchValue: string) => void;
     onTagCreate?: (label: string, color: TagColor) => void;
+    onTagDelete?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
+    onTagSelect?: (tag: TagSelectionItem, selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
+    onTagsChange?: (selectedTags: TagSelectionItem[], allTags: TagSelectionItem[]) => void;
 };