impact-nova 2.5.5 → 2.5.6
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/dist/form-engine/field-dependency-graph.d.ts +1 -4
- package/dist/form-engine/field-dependency-graph.js +53 -57
- package/dist/form-engine/field-groups.d.ts +15 -0
- package/dist/form-engine/field-groups.js +60 -0
- package/dist/form-engine/index.d.ts +3 -2
- package/dist/form-engine/index.js +17 -14
- package/dist/form-engine/types.d.ts +17 -0
- package/dist/form-react/Fields/RichTextField.d.ts +3 -0
- package/dist/form-react/Fields/RichTextField.js +214 -0
- package/dist/form-react/Fields/SelectField.js +27 -28
- package/dist/form-react/Fields/SliderRangeField.d.ts +3 -0
- package/dist/form-react/Fields/SliderRangeField.js +69 -0
- package/dist/form-react/ReactHooksForm.js +149 -87
- package/dist/form-react/fields.d.ts +2 -0
- package/dist/form-react/fields.js +22 -18
- package/dist/form-react/hooks/useCascadingForm.d.ts +1 -2
- package/dist/form-react/hooks/useCascadingForm.js +59 -67
- package/dist/form-react/hooks/useFieldVisibility.d.ts +1 -2
- package/dist/form-react/hooks/useFieldVisibility.js +36 -43
- package/dist/form-react/hooks/useFormSteps.d.ts +29 -0
- package/dist/form-react/hooks/useFormSteps.js +96 -0
- package/dist/form-react/hooks/useReactHookForm.js +17 -18
- package/dist/form-react/hooks/useSelectOptions.d.ts +1 -1
- package/dist/form-react/hooks/useSelectOptions.js +80 -83
- package/dist/form-react/index.d.ts +5 -3
- package/dist/form-react/index.js +93 -88
- package/dist/form-react/registry/defaultFieldRegistrations.d.ts +1 -1
- package/dist/form-react/registry/defaultFieldRegistrations.js +11 -9
- package/dist/form-react/types/fields.types.d.ts +31 -12
- package/dist/form-react/types/fieldsOutput.types.d.ts +5 -1
- package/dist/form-react/types/reactHookForm.types.d.ts +31 -2
- package/dist/form-react/utils/fieldDefaults.utils.js +28 -13
- package/dist/impact-nova.css +1 -1
- package/package.json +17 -2
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { FieldDependency, FieldVisibilityBase, FormValuesSnapshot } from './types';
|
|
2
2
|
export declare function collectFieldDependencyIds(field: FieldVisibilityBase): string[];
|
|
3
3
|
export declare function computeIsFieldVisible(field: FieldVisibilityBase, formValues: FormValuesSnapshot): boolean;
|
|
4
|
-
export declare function computeIsFieldDisabled(field: FieldVisibilityBase, formValues: FormValuesSnapshot
|
|
5
|
-
isCascadingDisabled?: (field: FieldVisibilityBase) => boolean;
|
|
6
|
-
}): boolean;
|
|
7
|
-
export declare function computeIsCascadingDisabled(field: FieldVisibilityBase, formValues: FormValuesSnapshot, isCascadingEnabled: boolean): boolean;
|
|
4
|
+
export declare function computeIsFieldDisabled(field: FieldVisibilityBase, formValues: FormValuesSnapshot): boolean;
|
|
8
5
|
export declare function getDependentFieldIds(allFields: FieldVisibilityBase[], changedFieldName: string): string[];
|
|
9
6
|
export declare function buildCascadeParentFormState(cascadingDependency: FieldDependency[] | undefined, formValues: FormValuesSnapshot): Record<string, unknown> | null;
|
|
10
7
|
export declare function collectFormWatchFieldIds(fields: FieldVisibilityBase[]): string[];
|
|
@@ -1,90 +1,86 @@
|
|
|
1
1
|
import { isEmptyValue as l } from "./is-empty-value.js";
|
|
2
|
-
function
|
|
2
|
+
function u(n) {
|
|
3
3
|
const t = /* @__PURE__ */ new Set();
|
|
4
|
-
return
|
|
5
|
-
t.add(
|
|
6
|
-
}),
|
|
7
|
-
t.add(
|
|
8
|
-
}),
|
|
9
|
-
t.add(
|
|
4
|
+
return n.visibilityDependency?.forEach((e) => {
|
|
5
|
+
t.add(e.fieldId);
|
|
6
|
+
}), n.disableDependency?.forEach((e) => {
|
|
7
|
+
t.add(e.fieldId);
|
|
8
|
+
}), n.cascadingDependency?.forEach((e) => {
|
|
9
|
+
t.add(e.fieldId);
|
|
10
10
|
}), Array.from(t);
|
|
11
11
|
}
|
|
12
|
-
function d(
|
|
13
|
-
return !
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return e.value === null ? !l(n) : e.value === "__empty__" ? l(n) : typeof n == "boolean" ? n === (e.value === "true") : Array.isArray(n) ? n.some((r) => typeof r == "object" && r?.value === e.value ? !0 : typeof r == "string" && r === e.value) : typeof n == "object" && n !== null && "value" in n ? n.value === e.value : n === e.value;
|
|
12
|
+
function d(n, t) {
|
|
13
|
+
return !n.visibilityDependency || n.visibilityDependency.length === 0 ? !0 : n.visibilityDependency.every((e) => {
|
|
14
|
+
const r = t[e.fieldId];
|
|
15
|
+
return e.value === "__empty__" ? l(r) : r === e.value;
|
|
16
|
+
});
|
|
18
17
|
}
|
|
19
|
-
function
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
) : e.disableDependency.some(
|
|
23
|
-
(i) => u(i, t)
|
|
24
|
-
)) || n?.isCascadingDisabled?.(e));
|
|
18
|
+
function o(n, t) {
|
|
19
|
+
const e = t[n.fieldId];
|
|
20
|
+
return n.value === null ? !l(e) : n.value === "__empty__" ? l(e) : typeof e == "boolean" ? e === (n.value === "true") : Array.isArray(e) ? e.some((r) => typeof r == "object" && r?.value === n.value ? !0 : typeof r == "string" && r === n.value) : typeof e == "object" && e !== null && "value" in e ? e.value === n.value : e === n.value;
|
|
25
21
|
}
|
|
26
|
-
function
|
|
27
|
-
return !n ||
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
function s(n, t) {
|
|
23
|
+
return !!(!d(n, t) || n.isDisabled || n.disableDependency && n.disableDependency.length > 0 && (n.disableDependencyMode === "every" ? n.disableDependency.every(
|
|
24
|
+
(r) => o(r, t)
|
|
25
|
+
) : n.disableDependency.some(
|
|
26
|
+
(r) => o(r, t)
|
|
27
|
+
)));
|
|
31
28
|
}
|
|
32
|
-
function
|
|
33
|
-
return
|
|
34
|
-
(
|
|
29
|
+
function f(n, t) {
|
|
30
|
+
return n.filter(
|
|
31
|
+
(e) => e.cascadingDependency?.some(
|
|
35
32
|
(r) => r.fieldId === t
|
|
36
33
|
)
|
|
37
|
-
).map((
|
|
34
|
+
).map((e) => e.id);
|
|
38
35
|
}
|
|
39
|
-
function
|
|
40
|
-
if (!
|
|
36
|
+
function y(n, t) {
|
|
37
|
+
if (!n || n.length === 0)
|
|
41
38
|
return null;
|
|
42
|
-
const
|
|
43
|
-
for (const r of
|
|
39
|
+
const e = {};
|
|
40
|
+
for (const r of n) {
|
|
44
41
|
const i = t[r.fieldId];
|
|
45
|
-
i == null || i === "" || Array.isArray(i) && i.length === 0 || (
|
|
42
|
+
i == null || i === "" || Array.isArray(i) && i.length === 0 || (e[r.fieldId] = i);
|
|
46
43
|
}
|
|
47
|
-
return Object.keys(
|
|
44
|
+
return Object.keys(e).length > 0 ? e : null;
|
|
48
45
|
}
|
|
49
|
-
function
|
|
46
|
+
function c(n) {
|
|
50
47
|
const t = /* @__PURE__ */ new Set();
|
|
51
|
-
for (const
|
|
52
|
-
|
|
53
|
-
for (const r of
|
|
48
|
+
for (const e of n) {
|
|
49
|
+
e.doNotIncludeInSubmit || t.add(e.id);
|
|
50
|
+
for (const r of u(e))
|
|
54
51
|
t.add(r);
|
|
55
52
|
}
|
|
56
53
|
return Array.from(t);
|
|
57
54
|
}
|
|
58
|
-
function b(
|
|
59
|
-
return
|
|
55
|
+
function b(n) {
|
|
56
|
+
return c(n);
|
|
60
57
|
}
|
|
61
|
-
function
|
|
58
|
+
function p(n) {
|
|
62
59
|
const t = /* @__PURE__ */ new Set();
|
|
63
|
-
for (const
|
|
64
|
-
t.add(
|
|
65
|
-
for (const r of
|
|
60
|
+
for (const e of n) {
|
|
61
|
+
t.add(e.id);
|
|
62
|
+
for (const r of u(e))
|
|
66
63
|
t.add(r);
|
|
67
64
|
}
|
|
68
65
|
return Array.from(t);
|
|
69
66
|
}
|
|
70
|
-
function
|
|
71
|
-
return
|
|
72
|
-
(r) => !!t[r.id] && d(r,
|
|
67
|
+
function I(n, t, e) {
|
|
68
|
+
return n.some(
|
|
69
|
+
(r) => !!t[r.id] && d(r, e)
|
|
73
70
|
);
|
|
74
71
|
}
|
|
75
|
-
function
|
|
76
|
-
return
|
|
72
|
+
function v(n, t) {
|
|
73
|
+
return n.filter((e) => d(e, t)).map((e) => e.id);
|
|
77
74
|
}
|
|
78
75
|
export {
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
y as buildCascadeParentFormState,
|
|
77
|
+
u as collectFieldDependencyIds,
|
|
81
78
|
b as collectFilterSidebarWatchFieldIds,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
f as computeIsCascadingDisabled,
|
|
79
|
+
c as collectFormWatchFieldIds,
|
|
80
|
+
p as collectSectionWatchFieldIds,
|
|
81
|
+
v as collectVisibleFieldIds,
|
|
86
82
|
s as computeIsFieldDisabled,
|
|
87
83
|
d as computeIsFieldVisible,
|
|
88
|
-
|
|
89
|
-
|
|
84
|
+
f as getDependentFieldIds,
|
|
85
|
+
I as hasVisibleFieldErrors
|
|
90
86
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FieldGroup, FieldVisibilityBase, FormStepConfig, FormValuesSnapshot } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Group fields by `fieldGroup`, preserving declaration order.
|
|
4
|
+
* Fields without `fieldGroup` are collected into a `'_default'` group.
|
|
5
|
+
* When `stepConfigs` is provided, groups are ordered to match and enriched with title/description.
|
|
6
|
+
*/
|
|
7
|
+
export declare function buildFieldGroups(fields: FieldVisibilityBase[], stepConfigs?: FormStepConfig[]): FieldGroup[];
|
|
8
|
+
/**
|
|
9
|
+
* Check if all visible required fields in a step have non-empty values and no errors.
|
|
10
|
+
*/
|
|
11
|
+
export declare function isStepComplete(stepFieldIds: string[], fields: FieldVisibilityBase[], formValues: FormValuesSnapshot, fieldErrors: Record<string, unknown>): boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Return the index of the first incomplete step, or -1 if all steps are complete.
|
|
14
|
+
*/
|
|
15
|
+
export declare function getFirstIncompleteStep(groups: FieldGroup[], fields: FieldVisibilityBase[], formValues: FormValuesSnapshot, fieldErrors: Record<string, unknown>): number;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { isEmptyValue as s } from "./is-empty-value.js";
|
|
2
|
+
import { computeIsFieldVisible as u } from "./field-dependency-graph.js";
|
|
3
|
+
const l = "_default";
|
|
4
|
+
function g(d, r) {
|
|
5
|
+
const i = /* @__PURE__ */ new Map(), n = [];
|
|
6
|
+
for (const t of d) {
|
|
7
|
+
const o = t.fieldGroup || l;
|
|
8
|
+
i.has(o) || (i.set(o, []), n.push(o)), i.get(o).push(t.id);
|
|
9
|
+
}
|
|
10
|
+
if (r && r.length > 0) {
|
|
11
|
+
const t = new Map(r.map((e) => [e.groupId, e])), o = [];
|
|
12
|
+
for (const e of r) {
|
|
13
|
+
const f = i.get(e.groupId);
|
|
14
|
+
f && (o.push({
|
|
15
|
+
groupId: e.groupId,
|
|
16
|
+
title: e.title,
|
|
17
|
+
description: e.description,
|
|
18
|
+
fieldIds: f,
|
|
19
|
+
validateBeforeNext: e.validateBeforeNext ?? !0
|
|
20
|
+
}), i.delete(e.groupId));
|
|
21
|
+
}
|
|
22
|
+
for (const e of n) {
|
|
23
|
+
if (!i.has(e)) continue;
|
|
24
|
+
const f = t.get(e);
|
|
25
|
+
o.push({
|
|
26
|
+
groupId: e,
|
|
27
|
+
title: f?.title,
|
|
28
|
+
description: f?.description,
|
|
29
|
+
fieldIds: i.get(e),
|
|
30
|
+
validateBeforeNext: f?.validateBeforeNext ?? !0
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
return o;
|
|
34
|
+
}
|
|
35
|
+
return n.map((t) => ({
|
|
36
|
+
groupId: t,
|
|
37
|
+
title: void 0,
|
|
38
|
+
description: void 0,
|
|
39
|
+
fieldIds: i.get(t),
|
|
40
|
+
validateBeforeNext: !0
|
|
41
|
+
}));
|
|
42
|
+
}
|
|
43
|
+
function p(d, r, i, n) {
|
|
44
|
+
const t = new Set(d), o = r.filter((e) => t.has(e.id));
|
|
45
|
+
for (const e of o)
|
|
46
|
+
if (u(e, i) && (n[e.id] || e.isRequired && s(i[e.id])))
|
|
47
|
+
return !1;
|
|
48
|
+
return !0;
|
|
49
|
+
}
|
|
50
|
+
function I(d, r, i, n) {
|
|
51
|
+
for (let t = 0; t < d.length; t++)
|
|
52
|
+
if (!p(d[t].fieldIds, r, i, n))
|
|
53
|
+
return t;
|
|
54
|
+
return -1;
|
|
55
|
+
}
|
|
56
|
+
export {
|
|
57
|
+
g as buildFieldGroups,
|
|
58
|
+
I as getFirstIncompleteStep,
|
|
59
|
+
p as isStepComplete
|
|
60
|
+
};
|
|
@@ -5,5 +5,6 @@
|
|
|
5
5
|
* @packageDocumentation
|
|
6
6
|
*/
|
|
7
7
|
export { isEmptyValue } from './is-empty-value';
|
|
8
|
-
export type { FieldDependency, FieldVisibilityBase, FormValuesSnapshot, } from './types';
|
|
9
|
-
export { buildCascadeParentFormState, collectFieldDependencyIds, collectFormWatchFieldIds, collectFilterSidebarWatchFieldIds, collectSectionWatchFieldIds, collectVisibleFieldIds,
|
|
8
|
+
export type { FieldDependency, FieldGroup, FieldVisibilityBase, FormStepConfig, FormValuesSnapshot, } from './types';
|
|
9
|
+
export { buildCascadeParentFormState, collectFieldDependencyIds, collectFormWatchFieldIds, collectFilterSidebarWatchFieldIds, collectSectionWatchFieldIds, collectVisibleFieldIds, computeIsFieldDisabled, computeIsFieldVisible, getDependentFieldIds, hasVisibleFieldErrors, } from './field-dependency-graph';
|
|
10
|
+
export { buildFieldGroups, isStepComplete, getFirstIncompleteStep, } from './field-groups';
|
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
import { isEmptyValue as
|
|
2
|
-
import { buildCascadeParentFormState as
|
|
1
|
+
import { isEmptyValue as t } from "./is-empty-value.js";
|
|
2
|
+
import { buildCascadeParentFormState as d, collectFieldDependencyIds as o, collectFilterSidebarWatchFieldIds as c, collectFormWatchFieldIds as s, collectSectionWatchFieldIds as r, collectVisibleFieldIds as F, computeIsFieldDisabled as p, computeIsFieldVisible as a, getDependentFieldIds as m, hasVisibleFieldErrors as I } from "./field-dependency-graph.js";
|
|
3
|
+
import { buildFieldGroups as n, getFirstIncompleteStep as u, isStepComplete as S } from "./field-groups.js";
|
|
3
4
|
export {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
r as
|
|
10
|
-
F as
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
5
|
+
d as buildCascadeParentFormState,
|
|
6
|
+
n as buildFieldGroups,
|
|
7
|
+
o as collectFieldDependencyIds,
|
|
8
|
+
c as collectFilterSidebarWatchFieldIds,
|
|
9
|
+
s as collectFormWatchFieldIds,
|
|
10
|
+
r as collectSectionWatchFieldIds,
|
|
11
|
+
F as collectVisibleFieldIds,
|
|
12
|
+
p as computeIsFieldDisabled,
|
|
13
|
+
a as computeIsFieldVisible,
|
|
14
|
+
m as getDependentFieldIds,
|
|
15
|
+
u as getFirstIncompleteStep,
|
|
16
|
+
I as hasVisibleFieldErrors,
|
|
17
|
+
t as isEmptyValue,
|
|
18
|
+
S as isStepComplete
|
|
16
19
|
};
|
|
@@ -14,4 +14,21 @@ export type FieldVisibilityBase = {
|
|
|
14
14
|
cascadingDependency?: FieldDependency[];
|
|
15
15
|
isDisabled?: boolean;
|
|
16
16
|
doNotIncludeInSubmit?: boolean;
|
|
17
|
+
fieldGroup?: string;
|
|
18
|
+
};
|
|
19
|
+
/** Step/group metadata provided via `IFormConfig.steps`. */
|
|
20
|
+
export type FormStepConfig = {
|
|
21
|
+
groupId: string;
|
|
22
|
+
title?: string;
|
|
23
|
+
description?: string;
|
|
24
|
+
/** When true, all required fields in this step must be valid before proceeding. Default: true. */
|
|
25
|
+
validateBeforeNext?: boolean;
|
|
26
|
+
};
|
|
27
|
+
/** Resolved field group produced by `buildFieldGroups`. */
|
|
28
|
+
export type FieldGroup = {
|
|
29
|
+
groupId: string;
|
|
30
|
+
title?: string;
|
|
31
|
+
description?: string;
|
|
32
|
+
fieldIds: string[];
|
|
33
|
+
validateBeforeNext: boolean;
|
|
17
34
|
};
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import { jsx as n, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as b, useCallback as T, useRef as v, useEffect as D } from "react";
|
|
3
|
+
import { Controller as L } from "react-hook-form";
|
|
4
|
+
import { LexicalComposer as O } from "@lexical/react/LexicalComposer";
|
|
5
|
+
import { RichTextPlugin as M } from "@lexical/react/LexicalRichTextPlugin";
|
|
6
|
+
import { ContentEditable as k } from "@lexical/react/LexicalContentEditable";
|
|
7
|
+
import { HistoryPlugin as _ } from "@lexical/react/LexicalHistoryPlugin";
|
|
8
|
+
import { OnChangePlugin as S } from "@lexical/react/LexicalOnChangePlugin";
|
|
9
|
+
import { ListPlugin as y } from "@lexical/react/LexicalListPlugin";
|
|
10
|
+
import { LinkPlugin as $ } from "@lexical/react/LexicalLinkPlugin";
|
|
11
|
+
import { LexicalErrorBoundary as H } from "@lexical/react/LexicalErrorBoundary";
|
|
12
|
+
import { useLexicalComposerContext as N } from "@lexical/react/LexicalComposerContext";
|
|
13
|
+
import { $generateHtmlFromNodes as I, $generateNodesFromDOM as w } from "@lexical/html";
|
|
14
|
+
import { ListNode as A, ListItemNode as B, INSERT_UNORDERED_LIST_COMMAND as P, INSERT_ORDERED_LIST_COMMAND as q } from "@lexical/list";
|
|
15
|
+
import { LinkNode as U, $toggleLink as F } from "@lexical/link";
|
|
16
|
+
import { HeadingNode as j, QuoteNode as Q, $createHeadingNode as z, $createQuoteNode as X } from "@lexical/rich-text";
|
|
17
|
+
import { $getRoot as G, UNDO_COMMAND as J, REDO_COMMAND as K, FORMAT_TEXT_COMMAND as m, $getSelection as g, $isRangeSelection as f } from "lexical";
|
|
18
|
+
import { $setBlocksType as x } from "@lexical/selection";
|
|
19
|
+
const V = {
|
|
20
|
+
paragraph: "rt-paragraph",
|
|
21
|
+
heading: { h2: "rt-h2", h3: "rt-h3" },
|
|
22
|
+
text: {
|
|
23
|
+
bold: "rt-bold",
|
|
24
|
+
italic: "rt-italic",
|
|
25
|
+
underline: "rt-underline"
|
|
26
|
+
},
|
|
27
|
+
list: {
|
|
28
|
+
ul: "rt-ul",
|
|
29
|
+
ol: "rt-ol",
|
|
30
|
+
listitem: "rt-li"
|
|
31
|
+
},
|
|
32
|
+
link: "rt-link",
|
|
33
|
+
quote: "rt-quote"
|
|
34
|
+
}, W = [
|
|
35
|
+
"undo",
|
|
36
|
+
"redo",
|
|
37
|
+
"bold",
|
|
38
|
+
"italic",
|
|
39
|
+
"underline",
|
|
40
|
+
"strikethrough",
|
|
41
|
+
"heading",
|
|
42
|
+
"quote",
|
|
43
|
+
"link",
|
|
44
|
+
"bulletedList",
|
|
45
|
+
"numberedList"
|
|
46
|
+
], Y = [j, Q, A, B, U];
|
|
47
|
+
function Z({ items: o }) {
|
|
48
|
+
const [e] = N(), i = b(() => new Set(o), [o]), r = (t, l, s, a) => i.has(l) ? /* @__PURE__ */ n(
|
|
49
|
+
"button",
|
|
50
|
+
{
|
|
51
|
+
type: "button",
|
|
52
|
+
className: "inline-flex h-7 w-7 items-center justify-center rounded text-xs hover:bg-muted",
|
|
53
|
+
title: a ?? t,
|
|
54
|
+
onMouseDown: (d) => {
|
|
55
|
+
d.preventDefault(), s();
|
|
56
|
+
},
|
|
57
|
+
children: t
|
|
58
|
+
},
|
|
59
|
+
l
|
|
60
|
+
) : null;
|
|
61
|
+
return /* @__PURE__ */ u("div", { className: "flex flex-wrap items-center gap-0.5 border-b px-1 py-0.5", children: [
|
|
62
|
+
r("↩", "undo", () => e.dispatchCommand(J, void 0), "Undo"),
|
|
63
|
+
r("↪", "redo", () => e.dispatchCommand(K, void 0), "Redo"),
|
|
64
|
+
(i.has("undo") || i.has("redo")) && i.size > 2 && /* @__PURE__ */ n("span", { className: "mx-0.5 h-4 w-px bg-border" }),
|
|
65
|
+
r("B", "bold", () => e.dispatchCommand(m, "bold"), "Bold"),
|
|
66
|
+
r("I", "italic", () => e.dispatchCommand(m, "italic"), "Italic"),
|
|
67
|
+
r("U", "underline", () => e.dispatchCommand(m, "underline"), "Underline"),
|
|
68
|
+
r("S", "strikethrough", () => e.dispatchCommand(m, "strikethrough"), "Strikethrough"),
|
|
69
|
+
r("H", "heading", () => {
|
|
70
|
+
e.update(() => {
|
|
71
|
+
const t = g();
|
|
72
|
+
f(t) && x(t, () => z("h2"));
|
|
73
|
+
});
|
|
74
|
+
}, "Heading"),
|
|
75
|
+
r("❝", "quote", () => {
|
|
76
|
+
e.update(() => {
|
|
77
|
+
const t = g();
|
|
78
|
+
f(t) && x(t, () => X());
|
|
79
|
+
});
|
|
80
|
+
}, "Block quote"),
|
|
81
|
+
r("🔗", "link", () => {
|
|
82
|
+
const t = prompt("URL:");
|
|
83
|
+
t && e.update(() => {
|
|
84
|
+
F(t);
|
|
85
|
+
});
|
|
86
|
+
}, "Insert link"),
|
|
87
|
+
r("•", "bulletedList", () => e.dispatchCommand(P, void 0), "Bulleted list"),
|
|
88
|
+
r("1.", "numberedList", () => e.dispatchCommand(q, void 0), "Numbered list")
|
|
89
|
+
] });
|
|
90
|
+
}
|
|
91
|
+
function ee({ html: o }) {
|
|
92
|
+
const [e] = N(), i = v(!1);
|
|
93
|
+
return D(() => {
|
|
94
|
+
i.current || !o || (i.current = !0, e.update(() => {
|
|
95
|
+
const t = new DOMParser().parseFromString(o, "text/html"), l = w(e, t), s = G();
|
|
96
|
+
s.clear(), s.append(...l);
|
|
97
|
+
}));
|
|
98
|
+
}, [e, o]), null;
|
|
99
|
+
}
|
|
100
|
+
const Ce = ({
|
|
101
|
+
field: o,
|
|
102
|
+
validationRules: e,
|
|
103
|
+
isDisabled: i,
|
|
104
|
+
formHelpers: r
|
|
105
|
+
}) => {
|
|
106
|
+
const t = o.fieldType === "rich_text" ? o : null;
|
|
107
|
+
if (!t) return null;
|
|
108
|
+
const l = t.toolbar ?? W, s = t.minHeight ?? 150;
|
|
109
|
+
return /* @__PURE__ */ n(
|
|
110
|
+
L,
|
|
111
|
+
{
|
|
112
|
+
name: o.id,
|
|
113
|
+
control: r.form.control,
|
|
114
|
+
rules: e,
|
|
115
|
+
render: ({ field: a, fieldState: d }) => {
|
|
116
|
+
const c = !!d.error;
|
|
117
|
+
return /* @__PURE__ */ n(
|
|
118
|
+
te,
|
|
119
|
+
{
|
|
120
|
+
initialHtml: a.value ?? "",
|
|
121
|
+
onChange: a.onChange,
|
|
122
|
+
disabled: i,
|
|
123
|
+
toolbar: l,
|
|
124
|
+
minHeight: s,
|
|
125
|
+
label: o.label,
|
|
126
|
+
isRequired: o.isRequired,
|
|
127
|
+
helpText: o.helpText,
|
|
128
|
+
error: c ? d.error?.message : void 0,
|
|
129
|
+
fieldId: o.id
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
|
+
function te({
|
|
137
|
+
initialHtml: o,
|
|
138
|
+
onChange: e,
|
|
139
|
+
disabled: i,
|
|
140
|
+
toolbar: r,
|
|
141
|
+
minHeight: t,
|
|
142
|
+
label: l,
|
|
143
|
+
isRequired: s,
|
|
144
|
+
helpText: a,
|
|
145
|
+
error: d,
|
|
146
|
+
fieldId: c
|
|
147
|
+
}) {
|
|
148
|
+
const C = b(
|
|
149
|
+
() => ({
|
|
150
|
+
namespace: `rich-text-${c}`,
|
|
151
|
+
nodes: Y,
|
|
152
|
+
theme: V,
|
|
153
|
+
editable: !i,
|
|
154
|
+
onError: (p) => console.error("[RichTextField]", p)
|
|
155
|
+
}),
|
|
156
|
+
// ponytail: intentionally only fieldId — LexicalComposer reads initialConfig once
|
|
157
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
158
|
+
[c]
|
|
159
|
+
), E = T(
|
|
160
|
+
(p, h) => {
|
|
161
|
+
h.read(() => {
|
|
162
|
+
const R = I(h);
|
|
163
|
+
e(R);
|
|
164
|
+
});
|
|
165
|
+
},
|
|
166
|
+
[e]
|
|
167
|
+
);
|
|
168
|
+
return /* @__PURE__ */ u("div", { children: [
|
|
169
|
+
l && /* @__PURE__ */ u("label", { className: "mb-2 block text-xs font-medium text-content-muted", children: [
|
|
170
|
+
l,
|
|
171
|
+
s && /* @__PURE__ */ n("span", { className: "ml-1 text-destructive", children: "*" })
|
|
172
|
+
] }),
|
|
173
|
+
/* @__PURE__ */ n(
|
|
174
|
+
"div",
|
|
175
|
+
{
|
|
176
|
+
className: "overflow-hidden rounded-md border",
|
|
177
|
+
style: i ? { opacity: 0.5, pointerEvents: "none" } : void 0,
|
|
178
|
+
children: /* @__PURE__ */ u(O, { initialConfig: C, children: [
|
|
179
|
+
/* @__PURE__ */ n(Z, { items: r }),
|
|
180
|
+
/* @__PURE__ */ n(
|
|
181
|
+
M,
|
|
182
|
+
{
|
|
183
|
+
contentEditable: /* @__PURE__ */ n(
|
|
184
|
+
k,
|
|
185
|
+
{
|
|
186
|
+
className: "outline-none px-3 py-2",
|
|
187
|
+
style: { minHeight: t },
|
|
188
|
+
"aria-placeholder": l ?? c,
|
|
189
|
+
placeholder: /* @__PURE__ */ n("div", { className: "pointer-events-none absolute left-3 top-2 text-xs text-content-muted", children: "Start typing…" })
|
|
190
|
+
}
|
|
191
|
+
),
|
|
192
|
+
ErrorBoundary: H
|
|
193
|
+
}
|
|
194
|
+
),
|
|
195
|
+
/* @__PURE__ */ n(_, {}),
|
|
196
|
+
/* @__PURE__ */ n(y, {}),
|
|
197
|
+
/* @__PURE__ */ n($, {}),
|
|
198
|
+
/* @__PURE__ */ n(S, { onChange: E }),
|
|
199
|
+
o && /* @__PURE__ */ n(ee, { html: o })
|
|
200
|
+
] })
|
|
201
|
+
}
|
|
202
|
+
),
|
|
203
|
+
(d || a) && /* @__PURE__ */ n(
|
|
204
|
+
"p",
|
|
205
|
+
{
|
|
206
|
+
className: `mt-1 text-xs ${d ? "text-destructive" : "text-content-muted"}`,
|
|
207
|
+
children: d ?? a
|
|
208
|
+
}
|
|
209
|
+
)
|
|
210
|
+
] });
|
|
211
|
+
}
|
|
212
|
+
export {
|
|
213
|
+
Ce as RichTextField
|
|
214
|
+
};
|
|
@@ -1,38 +1,37 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Controller as
|
|
4
|
-
import { Select as
|
|
5
|
-
import { useSelectOptions as
|
|
6
|
-
import { getFieldTestId as
|
|
7
|
-
import { isEmptyValue as
|
|
8
|
-
const
|
|
2
|
+
import { useState as A } from "react";
|
|
3
|
+
import { Controller as M } from "react-hook-form";
|
|
4
|
+
import { Select as f } from "../../components/forms/select/select.js";
|
|
5
|
+
import { useSelectOptions as x } from "../hooks/useSelectOptions.js";
|
|
6
|
+
import { getFieldTestId as E } from "../utils/fieldTestIds.js";
|
|
7
|
+
import { isEmptyValue as R } from "../../form-engine/is-empty-value.js";
|
|
8
|
+
const $ = ({
|
|
9
9
|
field: e,
|
|
10
10
|
validationRules: p,
|
|
11
11
|
isDisabled: m,
|
|
12
|
-
formHelpers:
|
|
13
|
-
|
|
14
|
-
supportedValues: d
|
|
12
|
+
formHelpers: s,
|
|
13
|
+
supportedValues: u
|
|
15
14
|
}) => {
|
|
16
|
-
const t = e.fieldType === "select" ? e : null, [
|
|
15
|
+
const t = e.fieldType === "select" ? e : null, [d, n] = A(!1), S = s.form.control, h = u?.[e.id], { options: g, isLoading: b, error: y, refetch: O } = x({
|
|
17
16
|
apiConfig: t?.apiConfig,
|
|
18
|
-
formHelpers:
|
|
19
|
-
formConfig: u,
|
|
17
|
+
formHelpers: s,
|
|
20
18
|
initialOptions: t?.options,
|
|
21
19
|
id: e.id,
|
|
22
|
-
isEnabled:
|
|
20
|
+
isEnabled: d,
|
|
23
21
|
getSelectOptionsName: t?.getSelectOptionsName,
|
|
24
|
-
fieldSupportedValues:
|
|
22
|
+
fieldSupportedValues: h,
|
|
23
|
+
cascadingDependency: e.cascadingDependency
|
|
25
24
|
});
|
|
26
25
|
return t ? /* @__PURE__ */ c(
|
|
27
|
-
|
|
26
|
+
M,
|
|
28
27
|
{
|
|
29
28
|
name: e.id,
|
|
30
|
-
control:
|
|
29
|
+
control: S,
|
|
31
30
|
rules: p,
|
|
32
|
-
render: ({ field: o, fieldState:
|
|
33
|
-
const a = !!
|
|
31
|
+
render: ({ field: o, fieldState: l }) => {
|
|
32
|
+
const a = !!l.error, i = o.value, C = t?.isMultiSelect ? e.id : `${e.id}-${R(i) ? "empty" : "has-value"}`;
|
|
34
33
|
return /* @__PURE__ */ c(
|
|
35
|
-
|
|
34
|
+
f,
|
|
36
35
|
{
|
|
37
36
|
id: e.id,
|
|
38
37
|
label: e.label,
|
|
@@ -56,21 +55,21 @@ const F = ({
|
|
|
56
55
|
isSelectAllEnabled: !t?.disableSelectAll,
|
|
57
56
|
labelOrientation: t?.labelOrientation || "top",
|
|
58
57
|
error: a,
|
|
59
|
-
helperText: a ?
|
|
58
|
+
helperText: a ? l.error?.message : e.helpText,
|
|
60
59
|
ignoreAccents: !0,
|
|
61
|
-
isLoading:
|
|
60
|
+
isLoading: b,
|
|
62
61
|
fetchError: y,
|
|
63
|
-
onRefetch:
|
|
64
|
-
onMenuOpen: () =>
|
|
65
|
-
onMenuClose: () =>
|
|
66
|
-
"data-testid":
|
|
62
|
+
onRefetch: O,
|
|
63
|
+
onMenuOpen: () => n(!0),
|
|
64
|
+
onMenuClose: () => n(!1),
|
|
65
|
+
"data-testid": E(e.id)
|
|
67
66
|
},
|
|
68
|
-
|
|
67
|
+
C
|
|
69
68
|
);
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
) : null;
|
|
73
72
|
};
|
|
74
73
|
export {
|
|
75
|
-
|
|
74
|
+
$ as SelectField
|
|
76
75
|
};
|