@thebuoyant-tsdev/mui-ts-library 3.8.0 → 3.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.de.md +94 -1
- package/README.md +94 -1
- package/dist/components/gantt-chart/GanttChart.d.ts +1 -1
- package/dist/components/gantt-chart/GanttChart.types.d.ts +7 -6
- package/dist/components/horizontal-tree-chart/HorizontalTreeChart.d.ts +1 -1
- package/dist/components/horizontal-tree-chart/HorizontalTreeChart.js +308 -252
- package/dist/components/horizontal-tree-chart/HorizontalTreeChart.types.d.ts +2 -0
- package/dist/components/password-strength-meter/PasswordStrengthMeter.d.ts +1 -1
- package/dist/components/password-strength-meter/PasswordStrengthMeter.js +156 -134
- package/dist/components/password-strength-meter/PasswordStrengthMeter.types.d.ts +7 -1
- package/dist/components/password-strength-meter/PasswordStrengthMeter.types.js +3 -1
- package/dist/components/radial-tree-chart/RadialTreeChart.d.ts +1 -1
- package/dist/components/radial-tree-chart/RadialTreeChart.js +210 -160
- package/dist/components/radial-tree-chart/RadialTreeChart.types.d.ts +2 -0
- package/dist/components/sunburst-chart/SunburstChart.d.ts +1 -1
- package/dist/components/sunburst-chart/SunburstChart.js +160 -128
- package/dist/components/sunburst-chart/SunburstChart.types.d.ts +2 -0
- package/dist/index.cjs +1 -1
- package/package.json +1 -1
package/README.de.md
CHANGED
|
@@ -284,6 +284,71 @@ const data: RadialTreeChartData = {
|
|
|
284
284
|
|
|
285
285
|
---
|
|
286
286
|
|
|
287
|
+
### CirclePackingChart
|
|
288
|
+
|
|
289
|
+
Hierarchische Daten als verschachtelte Kreise, proportional zum Wert skaliert. Ideal für Speicherplatz-Auswertungen, Budget-Übersichten oder jede Hierarchie, bei der relative Größe auf einen Blick zählt. `Ctrl / Cmd ⌘+Click` (oder Doppelklick) auf einen Kreis mit Kindern zoomt mit sanfter animierter Transition hinein; Klick auf den Hintergrund oder `Escape` zoomt zurück.
|
|
290
|
+
|
|
291
|
+
```tsx
|
|
292
|
+
import { CirclePackingChart } from '@thebuoyant-tsdev/mui-ts-library';
|
|
293
|
+
import type { CirclePackingData } from '@thebuoyant-tsdev/mui-ts-library';
|
|
294
|
+
|
|
295
|
+
const data: CirclePackingData = {
|
|
296
|
+
id: 'disk', name: 'Festplatte',
|
|
297
|
+
children: [
|
|
298
|
+
{ id: 'photos', name: 'Fotos', value: 120 },
|
|
299
|
+
{ id: 'videos', name: 'Videos', value: 340 },
|
|
300
|
+
{ id: 'apps', name: 'Apps',
|
|
301
|
+
children: [
|
|
302
|
+
{ id: 'xcode', name: 'Xcode', value: 48 },
|
|
303
|
+
{ id: 'docker', name: 'Docker', value: 12 },
|
|
304
|
+
]},
|
|
305
|
+
],
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
<CirclePackingChart
|
|
309
|
+
data={data}
|
|
310
|
+
size={500}
|
|
311
|
+
onCircleClick={(info) => console.log(info.name, info.value)}
|
|
312
|
+
/>
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
→ [Vollständige Dokumentation](user-manuals/CirclePackingChart.de.md)
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
### HorizontalTreeChart
|
|
320
|
+
|
|
321
|
+
Hierarchische Daten als links-nach-rechts (oder eine der 4 Ausrichtungen) Entscheidungsbaum mit geschwungenen Links. Ideal für Entscheidungslogik, Eskalationspfade oder Org-Charts, die natürlicher von oben nach unten oder seitlich gelesen werden als radial. `Ctrl / Cmd ⌘+Click` bohrt in Teilbäume, `Ctrl / Cmd ⌘+Scroll` zoomt.
|
|
322
|
+
|
|
323
|
+
```tsx
|
|
324
|
+
import { HorizontalTreeChart } from '@thebuoyant-tsdev/mui-ts-library';
|
|
325
|
+
import type { HorizontalTreeData } from '@thebuoyant-tsdev/mui-ts-library';
|
|
326
|
+
|
|
327
|
+
const data: HorizontalTreeData = {
|
|
328
|
+
id: 'ticket', name: 'Neues Ticket',
|
|
329
|
+
children: [
|
|
330
|
+
{ id: 'bug', name: 'Bug', specialValueA: 'P1 — 4h SLA',
|
|
331
|
+
children: [
|
|
332
|
+
{ id: 'bug-fe', name: 'Frontend-Team' },
|
|
333
|
+
{ id: 'bug-be', name: 'Backend-Team' },
|
|
334
|
+
]},
|
|
335
|
+
{ id: 'feature', name: 'Feature-Anfrage', specialValueA: 'P3 — Backlog' },
|
|
336
|
+
],
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
<HorizontalTreeChart
|
|
340
|
+
data={data}
|
|
341
|
+
orientation="LR"
|
|
342
|
+
width={700}
|
|
343
|
+
drillable
|
|
344
|
+
onNodeClick={(info) => console.log(info.name, info.depth)}
|
|
345
|
+
/>
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
→ [Vollständige Dokumentation](user-manuals/HorizontalTreeChart.de.md)
|
|
349
|
+
|
|
350
|
+
---
|
|
351
|
+
|
|
287
352
|
## TypeScript
|
|
288
353
|
|
|
289
354
|
Alle Typen und Defaults werden direkt exportiert — kein separates `@types/...`-Paket nötig.
|
|
@@ -337,12 +402,40 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis b
|
|
|
337
402
|
|
|
338
403
|
**Bisher nur ein Breaking Release:** [`3.0.0`](#300--2026-06-15--breaking-changes) hat `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` entfernt und die Signatur von `TagSelection`s `onTagCreate` geändert. Jedes Release seitdem war additiv.
|
|
339
404
|
|
|
340
|
-
**TypeScript-Hinweis:** Translation-Typen (z.B. `TagSelectionTranslation`, `SqlEditorTranslation`) bekommen mit der Zeit neue optionale Felder, wenn Features hinzukommen — ein `Partial<...>`-Objekt direkt an die `translation`-Prop zu übergeben (das in dieser README durchgängig verwendete Muster) ist immer vorwärtskompatibel. Eine eigenständige Variable, die gegen den vollen benannten Typ deklariert wird, bleibt nur kompatibel, solange neue Felder optional sind —
|
|
405
|
+
**TypeScript-Hinweis:** Translation-Typen (z.B. `TagSelectionTranslation`, `SqlEditorTranslation`, `GanttTranslations`) bekommen mit der Zeit neue optionale Felder, wenn Features hinzukommen — ein `Partial<...>`-Objekt direkt an die `translation`/`translations`-Prop zu übergeben (das in dieser README durchgängig verwendete Muster) ist immer vorwärtskompatibel. Eine eigenständige Variable, die gegen den vollen benannten Typ deklariert wird, bleibt nur kompatibel, solange neue Felder optional sind. Ein Audit über alle Komponenten fand eine Lücke — `GanttTranslations` hatte 3 nach Release ergänzte required Felder — behoben in `3.9.1` (siehe [Changelog](#391--2026-06-25)). Seit dieser Version ist jeder Translation-Typ optional-sicher.
|
|
341
406
|
|
|
342
407
|
---
|
|
343
408
|
|
|
344
409
|
## Changelog
|
|
345
410
|
|
|
411
|
+
### [3.11.0] — 2026-06-25
|
|
412
|
+
|
|
413
|
+
**RadialTreeChart & HorizontalTreeChart**
|
|
414
|
+
- `duration`: Rein-/Rauszoomen und Escape-Resets crossfaden jetzt statt abrupt zu wechseln (Standard 750ms, `0` deaktiviert).
|
|
415
|
+
|
|
416
|
+
---
|
|
417
|
+
|
|
418
|
+
### [3.10.0] — 2026-06-25
|
|
419
|
+
|
|
420
|
+
**SunburstChart**
|
|
421
|
+
- `duration`: Rein-/Rauszoomen animiert jetzt sanft zwischen Fokus-Ebenen (Standard 750ms, `0` deaktiviert).
|
|
422
|
+
|
|
423
|
+
---
|
|
424
|
+
|
|
425
|
+
### [3.9.1] — 2026-06-25
|
|
426
|
+
|
|
427
|
+
**Behoben**
|
|
428
|
+
- GanttChart: `GanttTranslations` hatte 3 required Keys, die nach Release ergänzt wurden (`todayLabel`, `columnAssignee`, `exportCsvTooltip`) — jetzt optional, konsistent mit jedem anderen Translation-Typ. Siehe [Versionierung & Abwärtskompatibilität](#versionierung--abwärtskompatibilität).
|
|
429
|
+
|
|
430
|
+
---
|
|
431
|
+
|
|
432
|
+
### [3.9.0] — 2026-06-24
|
|
433
|
+
|
|
434
|
+
**PasswordStrengthMeter**
|
|
435
|
+
- `showCopyButton`: Kopier-Icon neben dem Passwortfeld, passt zu `showPasswordGenerator`.
|
|
436
|
+
|
|
437
|
+
---
|
|
438
|
+
|
|
346
439
|
### [3.8.0] — 2026-06-23
|
|
347
440
|
|
|
348
441
|
**RichTextEditor**
|
package/README.md
CHANGED
|
@@ -284,6 +284,71 @@ const data: RadialTreeChartData = {
|
|
|
284
284
|
|
|
285
285
|
---
|
|
286
286
|
|
|
287
|
+
### CirclePackingChart
|
|
288
|
+
|
|
289
|
+
Hierarchical data as nested circles, sized proportionally to value. Use `CirclePackingChart` for disk usage, org budgets, or any hierarchy where relative size matters at a glance. `Ctrl / Cmd ⌘+Click` (or double-click) a circle with children to zoom in with a smooth animated transition; click the background or `Escape` to zoom back out.
|
|
290
|
+
|
|
291
|
+
```tsx
|
|
292
|
+
import { CirclePackingChart } from '@thebuoyant-tsdev/mui-ts-library';
|
|
293
|
+
import type { CirclePackingData } from '@thebuoyant-tsdev/mui-ts-library';
|
|
294
|
+
|
|
295
|
+
const data: CirclePackingData = {
|
|
296
|
+
id: 'disk', name: 'Disk',
|
|
297
|
+
children: [
|
|
298
|
+
{ id: 'photos', name: 'Photos', value: 120 },
|
|
299
|
+
{ id: 'videos', name: 'Videos', value: 340 },
|
|
300
|
+
{ id: 'apps', name: 'Apps',
|
|
301
|
+
children: [
|
|
302
|
+
{ id: 'xcode', name: 'Xcode', value: 48 },
|
|
303
|
+
{ id: 'docker', name: 'Docker', value: 12 },
|
|
304
|
+
]},
|
|
305
|
+
],
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
<CirclePackingChart
|
|
309
|
+
data={data}
|
|
310
|
+
size={500}
|
|
311
|
+
onCircleClick={(info) => console.log(info.name, info.value)}
|
|
312
|
+
/>
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
→ [Full documentation](user-manuals/CirclePackingChart.md)
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
### HorizontalTreeChart
|
|
320
|
+
|
|
321
|
+
Hierarchical data as a left-to-right (or any of 4 orientations) decision tree with curved links. Use `HorizontalTreeChart` for decision logic, escalation paths, or org charts that read more naturally top-to-bottom or side-to-side than radially. `Ctrl / Cmd ⌘+Click` drills into subtrees, `Ctrl / Cmd ⌘+Scroll` zooms.
|
|
322
|
+
|
|
323
|
+
```tsx
|
|
324
|
+
import { HorizontalTreeChart } from '@thebuoyant-tsdev/mui-ts-library';
|
|
325
|
+
import type { HorizontalTreeData } from '@thebuoyant-tsdev/mui-ts-library';
|
|
326
|
+
|
|
327
|
+
const data: HorizontalTreeData = {
|
|
328
|
+
id: 'ticket', name: 'New Ticket',
|
|
329
|
+
children: [
|
|
330
|
+
{ id: 'bug', name: 'Bug', specialValueA: 'P1 — 4h SLA',
|
|
331
|
+
children: [
|
|
332
|
+
{ id: 'bug-fe', name: 'Frontend Team' },
|
|
333
|
+
{ id: 'bug-be', name: 'Backend Team' },
|
|
334
|
+
]},
|
|
335
|
+
{ id: 'feature', name: 'Feature Request', specialValueA: 'P3 — Backlog' },
|
|
336
|
+
],
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
<HorizontalTreeChart
|
|
340
|
+
data={data}
|
|
341
|
+
orientation="LR"
|
|
342
|
+
width={700}
|
|
343
|
+
drillable
|
|
344
|
+
onNodeClick={(info) => console.log(info.name, info.depth)}
|
|
345
|
+
/>
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
→ [Full documentation](user-manuals/HorizontalTreeChart.md)
|
|
349
|
+
|
|
350
|
+
---
|
|
351
|
+
|
|
287
352
|
## TypeScript
|
|
288
353
|
|
|
289
354
|
All types and defaults are exported directly — no separate `@types/...` package needed.
|
|
@@ -337,12 +402,40 @@ This project follows [Semantic Versioning](https://semver.org/). In practice:
|
|
|
337
402
|
|
|
338
403
|
**Only one breaking release to date:** [`3.0.0`](#300--2026-06-15--breaking-changes) removed `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` and changed `TagSelection`'s `onTagCreate` signature. Every other release since has been additive.
|
|
339
404
|
|
|
340
|
-
**TypeScript note:** translation types (e.g. `TagSelectionTranslation`, `SqlEditorTranslation`) gain new optional fields over time as features are added — passing a `Partial<...>` object straight to the `translation` prop (the pattern used throughout this README) is always forward-compatible. Declaring a standalone variable typed against the full named type only stays compatible if new fields are optional
|
|
405
|
+
**TypeScript note:** translation types (e.g. `TagSelectionTranslation`, `SqlEditorTranslation`, `GanttTranslations`) gain new optional fields over time as features are added — passing a `Partial<...>` object straight to the `translation`/`translations` prop (the pattern used throughout this README) is always forward-compatible. Declaring a standalone variable typed against the full named type only stays compatible if new fields are optional. An audit across all components turned up one gap — `GanttTranslations` had 3 required fields added after release — fixed in `3.9.1` (see [Changelog](#391--2026-06-25)). Every translation type is optional-safe as of that version.
|
|
341
406
|
|
|
342
407
|
---
|
|
343
408
|
|
|
344
409
|
## Changelog
|
|
345
410
|
|
|
411
|
+
### [3.11.0] — 2026-06-25
|
|
412
|
+
|
|
413
|
+
**RadialTreeChart & HorizontalTreeChart**
|
|
414
|
+
- `duration`: drill in/out and Escape resets now crossfade instead of jump-cutting (default 750ms, `0` disables).
|
|
415
|
+
|
|
416
|
+
---
|
|
417
|
+
|
|
418
|
+
### [3.10.0] — 2026-06-25
|
|
419
|
+
|
|
420
|
+
**SunburstChart**
|
|
421
|
+
- `duration`: drill-in/out now animates smoothly between focus levels (default 750ms, `0` disables).
|
|
422
|
+
|
|
423
|
+
---
|
|
424
|
+
|
|
425
|
+
### [3.9.1] — 2026-06-25
|
|
426
|
+
|
|
427
|
+
**Fixed**
|
|
428
|
+
- GanttChart: `GanttTranslations` had 3 required keys added after release (`todayLabel`, `columnAssignee`, `exportCsvTooltip`) — now optional, matching every other translation type. See [Versioning & Compatibility](#versioning--compatibility).
|
|
429
|
+
|
|
430
|
+
---
|
|
431
|
+
|
|
432
|
+
### [3.9.0] — 2026-06-24
|
|
433
|
+
|
|
434
|
+
**PasswordStrengthMeter**
|
|
435
|
+
- `showCopyButton`: copy-to-clipboard icon next to the password field, pairs with `showPasswordGenerator`.
|
|
436
|
+
|
|
437
|
+
---
|
|
438
|
+
|
|
346
439
|
### [3.8.0] — 2026-06-23
|
|
347
440
|
|
|
348
441
|
**RichTextEditor**
|
|
@@ -2,6 +2,6 @@ import { type GanttChartStore } from "./GanttChart.store";
|
|
|
2
2
|
import type { GanttChartProps, GanttTheme, GanttTranslations } from "./GanttChart.types";
|
|
3
3
|
export declare function useGanttChartStore<T>(selector: (state: ReturnType<GanttChartStore["getState"]>) => T): T;
|
|
4
4
|
export declare function useRawGanttChartStore(): GanttChartStore;
|
|
5
|
-
export declare function useGanttTranslations(): GanttTranslations
|
|
5
|
+
export declare function useGanttTranslations(): Required<GanttTranslations>;
|
|
6
6
|
export declare function useGanttTheme(): GanttTheme;
|
|
7
7
|
export declare function GanttChart({ tasks, timeScale, initialExpandAll, showToolbar, defaultRangeStart, defaultRangeEnd, translations, enableBuiltinDialogs, toolbarConfig, zoomable, draggable, resizable, inlineEdit, progressDraggable, showCriticalPath, virtualizeRows, showAssigneeColumn, cascadeDependencies, statusColors, ganttTheme, onExportCSV, onTaskClick, onMilestoneClick, onAddTask, onEditTask, onDeleteTask, onStatusChange, onTasksChange, onTaskMoved, onTaskResized, onTaskCreated, onTaskUpdated, onTaskDeleted, height, width, minPanelWidth, maxPanelWidth, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -33,7 +33,8 @@ export type GanttTranslations = {
|
|
|
33
33
|
statusDone: string;
|
|
34
34
|
statusBlocked: string;
|
|
35
35
|
weekColumnPrefix: string;
|
|
36
|
-
|
|
36
|
+
/** @since 2.0.0 */
|
|
37
|
+
todayLabel?: string;
|
|
37
38
|
dateLocale: string;
|
|
38
39
|
dialogAddTitle: string;
|
|
39
40
|
dialogEditTitle: string;
|
|
@@ -52,8 +53,8 @@ export type GanttTranslations = {
|
|
|
52
53
|
dialogFieldDependencies: string;
|
|
53
54
|
dialogFieldDependenciesNone: string;
|
|
54
55
|
columnActions: string;
|
|
55
|
-
/** Header label for the Assignee column — shown when showAssigneeColumn=true */
|
|
56
|
-
columnAssignee
|
|
56
|
+
/** Header label for the Assignee column — shown when showAssigneeColumn=true @since 2.7.0 */
|
|
57
|
+
columnAssignee?: string;
|
|
57
58
|
addTaskTooltip: string;
|
|
58
59
|
editTaskTooltip: string;
|
|
59
60
|
deleteTaskTooltip: string;
|
|
@@ -61,10 +62,10 @@ export type GanttTranslations = {
|
|
|
61
62
|
expandAllTooltip: string;
|
|
62
63
|
collapseAllTooltip: string;
|
|
63
64
|
resetViewTooltip: string;
|
|
64
|
-
/** Toolbar tooltip for the CSV export button */
|
|
65
|
-
exportCsvTooltip
|
|
65
|
+
/** Toolbar tooltip for the CSV export button @since 2.7.0 */
|
|
66
|
+
exportCsvTooltip?: string;
|
|
66
67
|
};
|
|
67
|
-
export declare const DEFAULT_GANTT_TRANSLATIONS: GanttTranslations
|
|
68
|
+
export declare const DEFAULT_GANTT_TRANSLATIONS: Required<GanttTranslations>;
|
|
68
69
|
export type GanttStatusColors = Partial<Record<GanttTaskStatus, string>>;
|
|
69
70
|
export type GanttTheme = {
|
|
70
71
|
statusColors?: GanttStatusColors;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type HorizontalTreeChartProps } from "./HorizontalTreeChart.types";
|
|
2
|
-
export declare function HorizontalTreeChart({ data, orientation, width, height, levelSpacing, nodeRadius, sortBy, showLabels, labelFontSize, labelColor, showIcons, chartColors, linkStrokeOpacity, linkStrokeWidth, linkColor, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, disabled, translation, }: HorizontalTreeChartProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function HorizontalTreeChart({ data, orientation, width, height, levelSpacing, nodeRadius, sortBy, showLabels, labelFontSize, labelColor, showIcons, chartColors, linkStrokeOpacity, linkStrokeWidth, linkColor, zoomable, drillable, onFocusChange, showNodePopover, renderNodePopoverContent, onNodeClick, duration, disabled, translation, }: HorizontalTreeChartProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare namespace HorizontalTreeChart {
|
|
4
4
|
var displayName: string;
|
|
5
5
|
}
|