@thebuoyant-tsdev/mui-ts-library 3.22.0 → 3.25.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.
Files changed (33) hide show
  1. package/README.de.md +30 -0
  2. package/README.md +30 -0
  3. package/dist/components/color-picker/ColorPicker.d.ts +1 -1
  4. package/dist/components/color-picker/ColorPicker.js +282 -266
  5. package/dist/components/color-picker/ColorPicker.types.d.ts +3 -1
  6. package/dist/components/color-picker/colorPickerClasses.d.ts +35 -0
  7. package/dist/components/color-picker/colorPickerClasses.js +15 -0
  8. package/dist/components/gantt-chart/GanttTaskPanel.js +187 -160
  9. package/dist/components/json-editor/JsonEditor.d.ts +1 -1
  10. package/dist/components/json-editor/JsonEditor.js +32 -31
  11. package/dist/components/json-editor/JsonEditor.types.d.ts +5 -0
  12. package/dist/components/json-editor/JsonEditor.types.js +3 -0
  13. package/dist/components/json-editor/JsonEditorToolbar.d.ts +2 -1
  14. package/dist/components/json-editor/JsonEditorToolbar.js +78 -61
  15. package/dist/components/password-strength-meter/PasswordStrengthBar.d.ts +2 -1
  16. package/dist/components/password-strength-meter/PasswordStrengthBar.js +3 -1
  17. package/dist/components/password-strength-meter/PasswordStrengthMeter.js +258 -237
  18. package/dist/components/password-strength-meter/passwordStrengthMeterClasses.d.ts +40 -0
  19. package/dist/components/password-strength-meter/passwordStrengthMeterClasses.js +16 -0
  20. package/dist/components/rich-text-editor/RichTextEditorToolbar.js +115 -111
  21. package/dist/components/tag-selection/TagSelection.js +82 -79
  22. package/dist/components/tag-selection/TagSelectionAutocomplete.js +102 -98
  23. package/dist/components/tag-selection/TagSelectionChip.js +24 -21
  24. package/dist/components/tag-selection/TagSelectionSelectedTags.js +44 -38
  25. package/dist/components/tag-selection/tagSelectionClasses.d.ts +34 -0
  26. package/dist/components/tag-selection/tagSelectionClasses.js +15 -0
  27. package/dist/index.cjs +2 -2
  28. package/dist/index.d.cts +4 -0
  29. package/dist/index.d.ts +4 -0
  30. package/dist/index.js +31 -27
  31. package/dist/utils/muiTsClasses.d.ts +7 -0
  32. package/dist/utils/muiTsClasses.js +9 -0
  33. package/package.json +2 -1
@@ -15,31 +15,31 @@ function h(e) {
15
15
  return !1;
16
16
  }
17
17
  }
18
- function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b, width: x, disabled: S = !1, readonly: C = !1, error: w = !1, helperText: T, name: E, indent: D = 2, schema: O, showLineNumbers: k = !0, showLineColumn: A = !0, showMinimap: j = !1, showFolding: M = !0, showValidation: N = !1, enablePathFinder: P = !0, toolbarConfig: F, translation: I, highlightColors: L, onBlur: R, onFocus: ee, onPathCopy: z }) {
19
- let B = {
18
+ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b, width: x, disabled: S = !1, readonly: C = !1, error: w = !1, helperText: T, name: E, indent: D = 2, schema: O, showLineNumbers: k = !0, showLineColumn: A = !0, showMinimap: j = !1, showFolding: M = !0, showValidation: N = !1, enablePathFinder: P = !0, downloadFilename: F = "file.json", toolbarConfig: I, translation: L, highlightColors: R, onBlur: ee, onFocus: z, onPathCopy: B }) {
19
+ let V = {
20
20
  ...t,
21
- ...I
22
- }, V = {
21
+ ...L
22
+ }, H = {
23
23
  ...e,
24
- ...F
25
- }, H = a(b), U = a(x), W = H === "auto", G = W ? void 0 : H ?? 300, K = s(null), [q, J] = c(null), [Y, X] = c({
24
+ ...I
25
+ }, U = a(b), W = a(x), G = U === "auto", K = G ? void 0 : U ?? 300, q = s(null), [J, Y] = c(null), [X, Z] = c({
26
26
  line: 1,
27
27
  col: 1
28
- }), [Z, Q] = c(() => h(g ?? "")), $ = o((e) => {
29
- K.current = e, J(e);
30
- }, []), te = o((e, t) => {
31
- X({
28
+ }), [Q, $] = c(() => h(g ?? "")), te = o((e) => {
29
+ q.current = e, Y(e);
30
+ }, []), ne = o((e, t) => {
31
+ Z({
32
32
  line: e,
33
33
  col: t
34
34
  });
35
- }, []), ne = o((e) => {
35
+ }, []), re = o((e) => {
36
36
  let t = h(e);
37
- Q(t), v?.(t), _?.(e);
38
- }, [_, v]), re = A || N || !!T;
37
+ $(t), v?.(t), _?.(e);
38
+ }, [_, v]), ie = A || N || !!T;
39
39
  return /* @__PURE__ */ m(l, {
40
40
  sx: {
41
- width: U ?? "100%",
42
- ...W ? {
41
+ width: W ?? "100%",
42
+ ...G ? {
43
43
  display: "flex",
44
44
  flexDirection: "column",
45
45
  flex: 1
@@ -52,7 +52,7 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
52
52
  display: "flex",
53
53
  flexDirection: "column",
54
54
  overflow: "hidden",
55
- ...W ? { flex: 1 } : { height: G },
55
+ ...G ? { flex: 1 } : { height: K },
56
56
  borderColor: w ? "error.main" : void 0,
57
57
  "&:focus-within": {
58
58
  borderColor: w ? "error.main" : "primary.main",
@@ -60,14 +60,15 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
60
60
  }
61
61
  },
62
62
  children: [!C && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(r, {
63
- editorView: q,
64
- toolbarConfig: V,
65
- translation: B,
63
+ editorView: J,
64
+ toolbarConfig: H,
65
+ translation: V,
66
66
  indent: D,
67
+ downloadFilename: F,
67
68
  disabled: S
68
69
  }), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(n, {
69
70
  value: g,
70
- onChange: ne,
71
+ onChange: re,
71
72
  placeholder: y,
72
73
  disabled: S,
73
74
  readonly: C,
@@ -76,23 +77,23 @@ function g({ value: g, onChange: _, onValidChange: v, placeholder: y, height: b,
76
77
  showMinimap: j,
77
78
  showFolding: M,
78
79
  enablePathFinder: P,
79
- highlightColors: L,
80
- onViewReady: $,
81
- onCursorChange: te,
82
- onBlur: R,
83
- onFocus: ee,
84
- onPathCopy: z
80
+ highlightColors: R,
81
+ onViewReady: te,
82
+ onCursorChange: ne,
83
+ onBlur: ee,
84
+ onFocus: z,
85
+ onPathCopy: B
85
86
  })]
86
87
  }),
87
- re && /* @__PURE__ */ p(i, {
88
+ ie && /* @__PURE__ */ p(i, {
88
89
  helperText: T,
89
90
  error: w,
90
91
  showLineColumn: A,
91
92
  showValidation: N,
92
- isValid: Z,
93
- cursorLine: Y.line,
94
- cursorCol: Y.col,
95
- translation: B
93
+ isValid: Q,
94
+ cursorLine: X.line,
95
+ cursorCol: X.col,
96
+ translation: V
96
97
  }),
97
98
  E && /* @__PURE__ */ p("input", {
98
99
  type: "hidden",
@@ -2,6 +2,7 @@ export type JsonEditorToolbarConfig = {
2
2
  showFormat?: boolean;
3
3
  showCompact?: boolean;
4
4
  showCopy?: boolean;
5
+ showDownload?: boolean;
5
6
  showClear?: boolean;
6
7
  showUndoRedo?: boolean;
7
8
  };
@@ -11,6 +12,8 @@ export type JsonEditorTranslation = {
11
12
  compact: string;
12
13
  copy: string;
13
14
  copySuccess: string;
15
+ download: string;
16
+ downloadSuccess: string;
14
17
  clear: string;
15
18
  undo: string;
16
19
  redo: string;
@@ -72,6 +75,8 @@ export type JsonEditorProps = {
72
75
  showFolding?: boolean;
73
76
  /** Shows a Valid / Invalid JSON indicator in the footer. */
74
77
  showValidation?: boolean;
78
+ /** Filename for the Download button export. Default: "file.json". */
79
+ downloadFilename?: string;
75
80
  toolbarConfig?: JsonEditorToolbarConfig;
76
81
  translation?: Partial<JsonEditorTranslation>;
77
82
  value?: string;
@@ -3,6 +3,7 @@ var e = {
3
3
  showFormat: !0,
4
4
  showCompact: !0,
5
5
  showCopy: !0,
6
+ showDownload: !0,
6
7
  showClear: !0,
7
8
  showUndoRedo: !0
8
9
  }, t = {
@@ -10,6 +11,8 @@ var e = {
10
11
  compact: "Compact JSON",
11
12
  copy: "Copy",
12
13
  copySuccess: "Copied!",
14
+ download: "Download",
15
+ downloadSuccess: "Downloaded!",
13
16
  clear: "Clear",
14
17
  undo: "Undo",
15
18
  redo: "Redo",
@@ -5,7 +5,8 @@ type JsonEditorToolbarProps = {
5
5
  toolbarConfig: Required<JsonEditorToolbarConfig>;
6
6
  translation: JsonEditorTranslation;
7
7
  indent: number;
8
+ downloadFilename: string;
8
9
  disabled?: boolean;
9
10
  };
10
- export declare function JsonEditorToolbar({ editorView, toolbarConfig: tc, translation: t, indent, disabled, }: JsonEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function JsonEditorToolbar({ editorView, toolbarConfig: tc, translation: t, indent, downloadFilename, disabled, }: JsonEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
11
12
  export {};
@@ -4,21 +4,22 @@ import { Box as n, Divider as r } from "@mui/material";
4
4
  import { redo as i, undo as a } from "@codemirror/commands";
5
5
  import { jsx as o, jsxs as s } from "react/jsx-runtime";
6
6
  import c from "@mui/icons-material/ContentCopy";
7
- import l from "@mui/icons-material/Check";
8
- import u from "@mui/icons-material/Delete";
9
- import d from "@mui/icons-material/Undo";
10
- import f from "@mui/icons-material/Redo";
11
- import p from "@mui/icons-material/AutoFixHigh";
12
- import m from "@mui/icons-material/Compress";
7
+ import l from "@mui/icons-material/Download";
8
+ import u from "@mui/icons-material/Check";
9
+ import d from "@mui/icons-material/Delete";
10
+ import f from "@mui/icons-material/Undo";
11
+ import p from "@mui/icons-material/Redo";
12
+ import m from "@mui/icons-material/AutoFixHigh";
13
+ import h from "@mui/icons-material/Compress";
13
14
  //#region src/components/json-editor/JsonEditorToolbar.tsx
14
- function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disabled: y }) {
15
- let [b, x] = t(), S = y || !h;
16
- function C() {
17
- let e = h;
15
+ function g({ editorView: g, toolbarConfig: _, translation: v, indent: y, downloadFilename: b, disabled: x }) {
16
+ let [S, C] = t(), [w, T] = t(), E = x || !g;
17
+ function D() {
18
+ let e = g;
18
19
  if (!e) return;
19
20
  let t = e.state.doc.toString();
20
21
  try {
21
- let n = JSON.stringify(JSON.parse(t), null, v);
22
+ let n = JSON.stringify(JSON.parse(t), null, y);
22
23
  e.dispatch({ changes: {
23
24
  from: 0,
24
25
  to: e.state.doc.length,
@@ -27,8 +28,8 @@ function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disable
27
28
  } catch {}
28
29
  e.focus();
29
30
  }
30
- function w() {
31
- let e = h;
31
+ function O() {
32
+ let e = g;
32
33
  if (!e) return;
33
34
  let t = e.state.doc.toString();
34
35
  try {
@@ -41,29 +42,33 @@ function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disable
41
42
  } catch {}
42
43
  e.focus();
43
44
  }
44
- function T() {
45
- let e = h?.state.doc.toString() ?? "";
45
+ function k() {
46
+ let e = g?.state.doc.toString() ?? "";
46
47
  navigator.clipboard.writeText(e).then(() => {
47
- x();
48
+ C();
48
49
  });
49
50
  }
50
- function E() {
51
- let e = h;
51
+ function A() {
52
+ let e = g?.state.doc.toString() ?? "", t = new Blob([e], { type: "application/json" }), n = URL.createObjectURL(t), r = document.createElement("a");
53
+ r.href = n, r.download = b, r.click(), URL.revokeObjectURL(n), T();
54
+ }
55
+ function j() {
56
+ let e = g;
52
57
  e && (e.dispatch({ changes: {
53
58
  from: 0,
54
59
  to: e.state.doc.length,
55
60
  insert: ""
56
61
  } }), e.focus());
57
62
  }
58
- function D() {
59
- let e = h;
63
+ function M() {
64
+ let e = g;
60
65
  e && (a(e), e.focus());
61
66
  }
62
- function O() {
63
- let e = h;
67
+ function N() {
68
+ let e = g;
64
69
  e && (i(e), e.focus());
65
70
  }
66
- let k = g.showFormat || g.showCompact, A = g.showCopy || g.showClear, j = g.showUndoRedo;
71
+ let P = _.showFormat || _.showCompact, F = _.showCopy || _.showDownload || _.showClear, I = _.showUndoRedo;
67
72
  return /* @__PURE__ */ s(n, {
68
73
  sx: {
69
74
  display: "flex",
@@ -76,73 +81,85 @@ function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disable
76
81
  role: "toolbar",
77
82
  "aria-label": "JSON editor actions",
78
83
  children: [
79
- k && /* @__PURE__ */ s(n, {
84
+ P && /* @__PURE__ */ s(n, {
80
85
  sx: {
81
86
  display: "flex",
82
87
  gap: .25
83
88
  },
84
- children: [g.showFormat && /* @__PURE__ */ o(e, {
85
- label: _.format,
86
- icon: /* @__PURE__ */ o(p, { fontSize: "small" }),
87
- onClick: C,
88
- disabled: S
89
- }), g.showCompact && /* @__PURE__ */ o(e, {
90
- label: _.compact,
89
+ children: [_.showFormat && /* @__PURE__ */ o(e, {
90
+ label: v.format,
91
91
  icon: /* @__PURE__ */ o(m, { fontSize: "small" }),
92
- onClick: w,
93
- disabled: S
92
+ onClick: D,
93
+ disabled: E
94
+ }), _.showCompact && /* @__PURE__ */ o(e, {
95
+ label: v.compact,
96
+ icon: /* @__PURE__ */ o(h, { fontSize: "small" }),
97
+ onClick: O,
98
+ disabled: E
94
99
  })]
95
100
  }),
96
- k && (A || j) && /* @__PURE__ */ o(r, {
101
+ P && (F || I) && /* @__PURE__ */ o(r, {
97
102
  orientation: "vertical",
98
103
  flexItem: !0,
99
104
  sx: { mx: .5 }
100
105
  }),
101
- A && /* @__PURE__ */ s(n, {
106
+ F && /* @__PURE__ */ s(n, {
102
107
  sx: {
103
108
  display: "flex",
104
109
  gap: .25
105
110
  },
106
- children: [g.showCopy && /* @__PURE__ */ o(e, {
107
- label: b ? _.copySuccess : _.copy,
108
- icon: b ? /* @__PURE__ */ o(l, {
109
- fontSize: "small",
110
- color: "success"
111
- }) : /* @__PURE__ */ o(c, { fontSize: "small" }),
112
- onClick: T,
113
- disabled: S
114
- }), g.showClear && /* @__PURE__ */ o(e, {
115
- label: _.clear,
116
- icon: /* @__PURE__ */ o(u, { fontSize: "small" }),
117
- onClick: E,
118
- disabled: S
119
- })]
111
+ children: [
112
+ _.showCopy && /* @__PURE__ */ o(e, {
113
+ label: S ? v.copySuccess : v.copy,
114
+ icon: S ? /* @__PURE__ */ o(u, {
115
+ fontSize: "small",
116
+ color: "success"
117
+ }) : /* @__PURE__ */ o(c, { fontSize: "small" }),
118
+ onClick: k,
119
+ disabled: E
120
+ }),
121
+ _.showDownload && /* @__PURE__ */ o(e, {
122
+ label: w ? v.downloadSuccess : v.download,
123
+ icon: w ? /* @__PURE__ */ o(u, {
124
+ fontSize: "small",
125
+ color: "success"
126
+ }) : /* @__PURE__ */ o(l, { fontSize: "small" }),
127
+ onClick: A,
128
+ disabled: E
129
+ }),
130
+ _.showClear && /* @__PURE__ */ o(e, {
131
+ label: v.clear,
132
+ icon: /* @__PURE__ */ o(d, { fontSize: "small" }),
133
+ onClick: j,
134
+ disabled: E
135
+ })
136
+ ]
120
137
  }),
121
- A && j && /* @__PURE__ */ o(r, {
138
+ F && I && /* @__PURE__ */ o(r, {
122
139
  orientation: "vertical",
123
140
  flexItem: !0,
124
141
  sx: { mx: .5 }
125
142
  }),
126
- j && /* @__PURE__ */ s(n, {
143
+ I && /* @__PURE__ */ s(n, {
127
144
  sx: {
128
145
  display: "flex",
129
146
  gap: .25
130
147
  },
131
148
  children: [/* @__PURE__ */ o(e, {
132
- label: _.undo,
133
- icon: /* @__PURE__ */ o(d, { fontSize: "small" }),
134
- onClick: D,
135
- disabled: S
136
- }), /* @__PURE__ */ o(e, {
137
- label: _.redo,
149
+ label: v.undo,
138
150
  icon: /* @__PURE__ */ o(f, { fontSize: "small" }),
139
- onClick: O,
140
- disabled: S
151
+ onClick: M,
152
+ disabled: E
153
+ }), /* @__PURE__ */ o(e, {
154
+ label: v.redo,
155
+ icon: /* @__PURE__ */ o(p, { fontSize: "small" }),
156
+ onClick: N,
157
+ disabled: E
141
158
  })]
142
159
  }),
143
- !k && !A && !j && /* @__PURE__ */ o(n, { sx: { height: 32 } })
160
+ !P && !F && !I && /* @__PURE__ */ o(n, { sx: { height: 32 } })
144
161
  ]
145
162
  });
146
163
  }
147
164
  //#endregion
148
- export { h as JsonEditorToolbar };
165
+ export { g as JsonEditorToolbar };
@@ -4,11 +4,12 @@ type PasswordStrengthBarProps = {
4
4
  ariaLabel: string;
5
5
  /** When true, renders 4 separate animated segments instead of a single bar. */
6
6
  segments?: boolean;
7
+ className?: string;
7
8
  };
8
9
  /**
9
10
  * Visuelle Fortschrittsleiste für die Passwortstärke.
10
11
  * role="progressbar" macht die Anzeige für Screenreader zugänglich —
11
12
  * ohne aria-Attribute wäre sie für assistive Technologien unsichtbar.
12
13
  */
13
- export declare function PasswordStrengthBar({ percent, color, ariaLabel, segments }: PasswordStrengthBarProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function PasswordStrengthBar({ percent, color, ariaLabel, segments, className }: PasswordStrengthBarProps): import("react/jsx-runtime").JSX.Element;
14
15
  export {};
@@ -1,7 +1,7 @@
1
1
  import { Box as e } from "@mui/material";
2
2
  import { jsx as t } from "react/jsx-runtime";
3
3
  //#region src/components/password-strength-meter/PasswordStrengthBar.tsx
4
- function n({ percent: n, color: r, ariaLabel: i, segments: a = !1 }) {
4
+ function n({ percent: n, color: r, ariaLabel: i, segments: a = !1, className: o }) {
5
5
  if (a) {
6
6
  let a = Math.round(n / 25);
7
7
  return /* @__PURE__ */ t(e, {
@@ -10,6 +10,7 @@ function n({ percent: n, color: r, ariaLabel: i, segments: a = !1 }) {
10
10
  "aria-valuenow": n,
11
11
  "aria-valuemin": 0,
12
12
  "aria-valuemax": 100,
13
+ className: o,
13
14
  sx: {
14
15
  width: "100%",
15
16
  display: "flex",
@@ -41,6 +42,7 @@ function n({ percent: n, color: r, ariaLabel: i, segments: a = !1 }) {
41
42
  "aria-valuenow": n,
42
43
  "aria-valuemin": 0,
43
44
  "aria-valuemax": 100,
45
+ className: o,
44
46
  sx: {
45
47
  width: "100%",
46
48
  height: "8px",