impact-nova 1.7.33 → 1.7.36
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/components/ui/ag-grid-react/cell-renderers/editors/input-cell-editor.d.ts +23 -0
- package/dist/components/ui/ag-grid-react/cell-renderers/editors/input-cell-editor.js +234 -73
- package/dist/components/ui/ag-grid-react/cell-renderers/index.d.ts +1 -0
- package/dist/components/ui/calendar.d.ts +2 -1
- package/dist/components/ui/calendar.js +463 -408
- package/dist/components/ui/combobox.d.ts +66 -0
- package/dist/components/ui/combobox.js +340 -0
- package/dist/components/ui/create-item-flow/create-item-flow.d.ts +2 -16
- package/dist/components/ui/create-item-flow/create-item-flow.js +119 -155
- package/dist/components/ui/create-item-flow/index.d.ts +1 -1
- package/dist/components/ui/create-item-flow/index.js +10 -10
- package/dist/components/ui/data-table/data-table-saved-views.js +176 -162
- package/dist/components/ui/filter-strip/filter-summary.js +173 -133
- package/dist/components/ui/select/components/Submenu.js +7 -7
- package/dist/components/ui/select/select.js +310 -284
- package/dist/components/ui/sheet.js +1 -1
- package/dist/impact-nova.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +415 -413
- package/package.json +1 -1
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { ICellEditorParams } from 'ag-grid-community';
|
|
3
|
+
/**
|
|
4
|
+
* Rule that describes how to generate the set of allowed autocomplete values.
|
|
5
|
+
* When provided via cellEditorParams.autocompleteRule (or cell metadata),
|
|
6
|
+
* the InputCellEditor switches to autocomplete mode: a dropdown of filtered
|
|
7
|
+
* suggestions appears below the input, and only dropdown values can be committed.
|
|
8
|
+
*
|
|
9
|
+
* Two variants:
|
|
10
|
+
* - Numeric range: `{ min, max, step }` → generates e.g. 0, 5, 10, …, 100
|
|
11
|
+
* - Static list: `{ options }` → uses the string array as-is
|
|
12
|
+
*/
|
|
13
|
+
export type AutocompleteRule = {
|
|
14
|
+
min: number;
|
|
15
|
+
max: number;
|
|
16
|
+
step: number;
|
|
17
|
+
options?: never;
|
|
18
|
+
} | {
|
|
19
|
+
options: string[];
|
|
20
|
+
min?: never;
|
|
21
|
+
max?: never;
|
|
22
|
+
step?: never;
|
|
23
|
+
};
|
|
3
24
|
export interface InputCellEditorProps extends ICellEditorParams {
|
|
4
25
|
/** Placeholder text */
|
|
5
26
|
placeholder?: string;
|
|
@@ -17,6 +38,8 @@ export interface InputCellEditorProps extends ICellEditorParams {
|
|
|
17
38
|
onValueChange?: (value: string | undefined) => void;
|
|
18
39
|
/** Whether to suppress auto-focus on mount */
|
|
19
40
|
suppressAutoFocus?: boolean;
|
|
41
|
+
/** When provided, enables autocomplete mode with a filtered dropdown of allowed values */
|
|
42
|
+
autocompleteRule?: AutocompleteRule;
|
|
20
43
|
className?: string;
|
|
21
44
|
}
|
|
22
45
|
export declare const InputCellEditor: React.NamedExoticComponent<InputCellEditorProps & React.RefAttributes<any>>;
|
|
@@ -1,34 +1,68 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import { jsxs as Z, jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import ee, { forwardRef as te, useRef as f, useMemo as $, useState as P, useImperativeHandle as ne, useEffect as N, useCallback as V } from "react";
|
|
3
|
+
import { createPortal as re } from "react-dom";
|
|
4
|
+
function oe(o) {
|
|
5
|
+
if ("options" in o && o.options) return o.options;
|
|
6
|
+
const d = [];
|
|
7
|
+
if (!o || o.step <= 0 || o.min > o.max) return d;
|
|
8
|
+
for (let n = o.min; n <= o.max; n += o.step) {
|
|
9
|
+
const v = Math.round(n * 1e10) / 1e10;
|
|
10
|
+
d.push(String(v));
|
|
11
|
+
}
|
|
12
|
+
return d;
|
|
13
|
+
}
|
|
14
|
+
function ae(o, d) {
|
|
15
|
+
if (!d) return o;
|
|
16
|
+
const n = d.toLowerCase();
|
|
17
|
+
return o.filter((v) => v.toLowerCase().includes(n));
|
|
18
|
+
}
|
|
19
|
+
const O = te((o, d) => {
|
|
4
20
|
const {
|
|
5
|
-
value:
|
|
21
|
+
value: n,
|
|
6
22
|
placeholder: v,
|
|
7
|
-
min:
|
|
8
|
-
max:
|
|
9
|
-
step:
|
|
10
|
-
maxLength:
|
|
11
|
-
onValueChange:
|
|
12
|
-
colDef:
|
|
13
|
-
className:
|
|
14
|
-
|
|
15
|
-
|
|
23
|
+
min: K,
|
|
24
|
+
max: U,
|
|
25
|
+
step: q,
|
|
26
|
+
maxLength: D,
|
|
27
|
+
onValueChange: p,
|
|
28
|
+
colDef: z,
|
|
29
|
+
className: F,
|
|
30
|
+
autocompleteRule: b
|
|
31
|
+
} = o, s = z?.cellDataType === "number", G = b ? "text" : s ? "number" : "text", u = f(null), a = !!b, S = $(
|
|
32
|
+
() => b ? oe(b) : [],
|
|
33
|
+
[b]
|
|
34
|
+
), [c, J] = P(""), [w, x] = P(-1), M = f(-1);
|
|
35
|
+
M.current = w;
|
|
36
|
+
const g = f("keyboard"), H = f(null), C = f(null), L = f(null), E = f(!1), [A, Q] = P(null), i = $(() => ae(S, c), [S, c]), _ = f(i);
|
|
37
|
+
_.current = i;
|
|
38
|
+
const I = n && typeof n == "object" && "value" in n, R = I ? n.cellMetadata : void 0, W = I ? n.value : n;
|
|
39
|
+
ne(d, () => ({
|
|
16
40
|
getValue() {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
41
|
+
if (a) {
|
|
42
|
+
const l = H.current;
|
|
43
|
+
if (l == null)
|
|
44
|
+
return n;
|
|
45
|
+
const h = Number(l), T = s && !isNaN(h) ? h : l;
|
|
46
|
+
return I ? {
|
|
47
|
+
value: T,
|
|
48
|
+
...R !== void 0 && { cellMetadata: R }
|
|
49
|
+
} : T;
|
|
50
|
+
}
|
|
51
|
+
const t = u.current?.value;
|
|
52
|
+
let r;
|
|
53
|
+
if (s)
|
|
20
54
|
if (!t || t === "" || t === "-")
|
|
21
|
-
|
|
55
|
+
r = null;
|
|
22
56
|
else {
|
|
23
|
-
const
|
|
24
|
-
|
|
57
|
+
const l = Number(t);
|
|
58
|
+
r = isNaN(l) ? null : l;
|
|
25
59
|
}
|
|
26
60
|
else
|
|
27
|
-
|
|
28
|
-
return
|
|
29
|
-
value:
|
|
30
|
-
...
|
|
31
|
-
} :
|
|
61
|
+
r = t === "" ? null : t;
|
|
62
|
+
return I ? {
|
|
63
|
+
value: r,
|
|
64
|
+
...R !== void 0 && { cellMetadata: R }
|
|
65
|
+
} : r;
|
|
32
66
|
},
|
|
33
67
|
isCancelBeforeStart() {
|
|
34
68
|
return !1;
|
|
@@ -36,74 +70,201 @@ const g = A((o, h) => {
|
|
|
36
70
|
isCancelAfterEnd() {
|
|
37
71
|
return !1;
|
|
38
72
|
}
|
|
39
|
-
}), []),
|
|
40
|
-
if (
|
|
41
|
-
const
|
|
42
|
-
if (
|
|
43
|
-
const t =
|
|
73
|
+
}), []), N(() => {
|
|
74
|
+
if (u.current) {
|
|
75
|
+
const e = n && typeof n == "object" && "value" in n ? n.value : n;
|
|
76
|
+
if (u.current.value = e != null ? String(e) : "", s) {
|
|
77
|
+
const t = u.current, r = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
|
|
44
78
|
Object.defineProperty(t, "value", {
|
|
45
79
|
get() {
|
|
46
|
-
const
|
|
47
|
-
return isNaN(
|
|
80
|
+
const l = this.valueAsNumber;
|
|
81
|
+
return isNaN(l) ? r.get.call(this) : l;
|
|
48
82
|
},
|
|
49
|
-
set(
|
|
50
|
-
|
|
83
|
+
set(l) {
|
|
84
|
+
r.set.call(this, l);
|
|
51
85
|
},
|
|
52
86
|
configurable: !0
|
|
53
87
|
});
|
|
54
88
|
}
|
|
55
|
-
o.suppressAutoFocus || (
|
|
89
|
+
o.suppressAutoFocus || (u.current.focus(), u.current.select());
|
|
56
90
|
}
|
|
57
91
|
return () => {
|
|
58
92
|
};
|
|
59
93
|
}, []);
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
94
|
+
const j = V(() => {
|
|
95
|
+
E.current || (E.current = !0, o.stopEditing?.());
|
|
96
|
+
}, [o]), y = V((e) => {
|
|
97
|
+
if (H.current = e, p) {
|
|
98
|
+
const t = Number(e), r = s && !isNaN(t) ? t : e;
|
|
99
|
+
p(r);
|
|
100
|
+
}
|
|
101
|
+
E.current = !0, o.stopEditing?.();
|
|
102
|
+
}, [s, p, o]), k = f(y);
|
|
103
|
+
k.current = y, N(() => {
|
|
104
|
+
if (a && L.current) {
|
|
105
|
+
const e = L.current.getBoundingClientRect();
|
|
106
|
+
Q({ top: e.bottom, left: e.left, width: e.width });
|
|
107
|
+
}
|
|
108
|
+
}, [a]), N(() => {
|
|
109
|
+
if (!a) return;
|
|
110
|
+
const e = k, t = (r) => {
|
|
111
|
+
const l = r.target.closest?.("[data-autocomplete-value]");
|
|
112
|
+
if (l && C.current?.contains(l)) {
|
|
113
|
+
const h = l.getAttribute("data-autocomplete-value");
|
|
114
|
+
h != null && (r.stopImmediatePropagation(), r.preventDefault(), e.current(h));
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
return document.addEventListener("mousedown", t, !0), () => document.removeEventListener("mousedown", t, !0);
|
|
118
|
+
}, [a]), N(() => {
|
|
119
|
+
a && w >= 0 && C.current && C.current.querySelectorAll("[data-autocomplete-item]")[w]?.scrollIntoView({ block: "nearest" });
|
|
120
|
+
}, [w, a]), N(() => {
|
|
121
|
+
if (!a || !c) {
|
|
122
|
+
x(-1);
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
const e = i.findIndex((t) => t.toLowerCase() === c.toLowerCase());
|
|
126
|
+
g.current = "mouse", x(e >= 0 ? e : -1);
|
|
127
|
+
}, [a, c, i]);
|
|
128
|
+
const X = V((e) => {
|
|
129
|
+
const t = u.current?.value;
|
|
130
|
+
if (a) {
|
|
131
|
+
J(t ?? "");
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
if (!(D && t && t.length > D)) {
|
|
135
|
+
if (s && u.current) {
|
|
136
|
+
const r = u.current.valueAsNumber;
|
|
137
|
+
isNaN(r) || u.current.setAttribute("data-value", String(r));
|
|
138
|
+
}
|
|
139
|
+
p?.(t);
|
|
140
|
+
}
|
|
141
|
+
}, [D, p, s, a]), B = V((e) => {
|
|
142
|
+
if (a) {
|
|
143
|
+
if (e.key === "Escape") {
|
|
144
|
+
e.stopPropagation(), j();
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
if (e.key === "ArrowDown") {
|
|
148
|
+
e.preventDefault(), e.stopPropagation(), g.current = "keyboard", x((t) => t < i.length - 1 ? t + 1 : 0);
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
if (e.key === "ArrowUp") {
|
|
152
|
+
e.preventDefault(), e.stopPropagation(), g.current = "keyboard", x((t) => t > 0 ? t - 1 : i.length - 1);
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
if (e.key === "Enter" || e.key === "Tab") {
|
|
156
|
+
e.preventDefault(), e.stopPropagation(), e.nativeEvent.stopImmediatePropagation();
|
|
157
|
+
const t = M.current, r = _.current;
|
|
158
|
+
if (t >= 0 && t < r.length)
|
|
159
|
+
k.current(r[t]);
|
|
160
|
+
else {
|
|
161
|
+
const l = r.find((h) => h.toLowerCase() === c.toLowerCase());
|
|
162
|
+
l ? k.current(l) : j();
|
|
163
|
+
}
|
|
164
|
+
return;
|
|
66
165
|
}
|
|
67
|
-
|
|
166
|
+
return;
|
|
68
167
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
l.current.value = n != null ? String(n) : "";
|
|
168
|
+
if (e.key === "Escape") {
|
|
169
|
+
if (e.stopPropagation(), u.current) {
|
|
170
|
+
const r = n && typeof n == "object" && "value" in n ? n.value : n;
|
|
171
|
+
u.current.value = r != null ? String(r) : "";
|
|
74
172
|
}
|
|
75
|
-
const t =
|
|
76
|
-
|
|
173
|
+
const t = n && typeof n == "object" && "value" in n ? n.value : n;
|
|
174
|
+
p?.(t != null ? String(t) : void 0), o.stopEditing?.();
|
|
77
175
|
return;
|
|
78
176
|
}
|
|
79
|
-
|
|
80
|
-
}, [
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
177
|
+
e.key === "Enter" || e.key === "Tab" || ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key) && e.stopPropagation();
|
|
178
|
+
}, [n, p, o, a, j, i, c]), Y = V(() => {
|
|
179
|
+
if (!E.current) {
|
|
180
|
+
if (a) {
|
|
181
|
+
const e = i.find((t) => t.toLowerCase() === c.toLowerCase());
|
|
182
|
+
e ? y(e) : i.length === 1 ? y(i[0]) : o.stopEditing?.(!0);
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
o.stopEditing?.();
|
|
186
|
+
}
|
|
187
|
+
}, [o, a, i, c, y]);
|
|
188
|
+
return /* @__PURE__ */ Z(
|
|
84
189
|
"div",
|
|
85
190
|
{
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
191
|
+
ref: L,
|
|
192
|
+
className: `w-full h-full flex items-center ag-cell-inner-padding in-ag-editable-cell-highlight ${F ?? ""}`,
|
|
193
|
+
onKeyDownCapture: a ? B : void 0,
|
|
194
|
+
children: [
|
|
195
|
+
/* @__PURE__ */ m(
|
|
196
|
+
"div",
|
|
197
|
+
{
|
|
198
|
+
className: `flex w-full items-center rounded-[8px] bg-canvas-elevated px-1.5 h-7 ${s ? "justify-end text-right" : ""}`,
|
|
199
|
+
children: /* @__PURE__ */ m(
|
|
200
|
+
"input",
|
|
201
|
+
{
|
|
202
|
+
ref: u,
|
|
203
|
+
type: G,
|
|
204
|
+
onChange: X,
|
|
205
|
+
onKeyDown: a ? void 0 : B,
|
|
206
|
+
onBlur: Y,
|
|
207
|
+
placeholder: v,
|
|
208
|
+
className: `flex h-full w-full bg-transparent p-0 text-sm font-medium text-content outline-none placeholder:font-medium placeholder:text-content-empty ${s ? "text-right" : ""}`,
|
|
209
|
+
min: a ? void 0 : K,
|
|
210
|
+
max: a ? void 0 : U,
|
|
211
|
+
step: a ? void 0 : q
|
|
212
|
+
}
|
|
213
|
+
)
|
|
214
|
+
}
|
|
215
|
+
),
|
|
216
|
+
a && A && re(
|
|
217
|
+
/* @__PURE__ */ m(
|
|
218
|
+
"div",
|
|
219
|
+
{
|
|
220
|
+
ref: C,
|
|
221
|
+
className: "fixed z-[9999] overflow-hidden rounded-[12px] bg-white text-base shadow-[0px_1px_6px_0px_rgba(26,39,124,0.14)] focus:outline-none sm:text-sm flex flex-col border-none",
|
|
222
|
+
style: { top: A.top, left: A.left, width: A.width, maxHeight: 250 },
|
|
223
|
+
children: /* @__PURE__ */ m(
|
|
224
|
+
"div",
|
|
225
|
+
{
|
|
226
|
+
className: "flex-1 overflow-auto py-1 px-[6px]",
|
|
227
|
+
style: { maxHeight: 240, overscrollBehavior: "contain" },
|
|
228
|
+
role: "listbox",
|
|
229
|
+
onMouseLeave: () => {
|
|
230
|
+
g.current = "mouse", x(-1);
|
|
231
|
+
},
|
|
232
|
+
children: i.length === 0 ? /* @__PURE__ */ m("div", { className: "flex items-center justify-center py-6 text-sm text-gray-500", children: "No options found" }) : i.map((e, t) => {
|
|
233
|
+
const r = t === w, l = e === String(W ?? "");
|
|
234
|
+
return /* @__PURE__ */ m(
|
|
235
|
+
"div",
|
|
236
|
+
{
|
|
237
|
+
className: "w-full pb-[2px]",
|
|
238
|
+
children: /* @__PURE__ */ m(
|
|
239
|
+
"div",
|
|
240
|
+
{
|
|
241
|
+
"data-autocomplete-item": !0,
|
|
242
|
+
role: "option",
|
|
243
|
+
"aria-selected": r,
|
|
244
|
+
className: `cursor-default select-none py-[6px] px-3 flex items-center ${s ? "justify-end text-right" : "justify-between"} transition-colors rounded-md ${r && g.current === "keyboard" ? "ring-2 ring-inset ring-primary bg-[#edf0ff] text-[#1f2b4d]" : r && g.current === "mouse" ? "bg-gray-100 text-[#1f2b4d]" : l ? "bg-[#edf0ff] text-[#1f2b4d]" : "text-[#1f2b4d] hover:bg-gray-100 cursor-pointer"}`,
|
|
245
|
+
"data-autocomplete-value": e,
|
|
246
|
+
onMouseEnter: () => {
|
|
247
|
+
g.current = "mouse", x(t);
|
|
248
|
+
},
|
|
249
|
+
children: /* @__PURE__ */ m("span", { className: "text-sm", children: e })
|
|
250
|
+
}
|
|
251
|
+
)
|
|
252
|
+
},
|
|
253
|
+
e
|
|
254
|
+
);
|
|
255
|
+
})
|
|
256
|
+
}
|
|
257
|
+
)
|
|
258
|
+
}
|
|
259
|
+
),
|
|
260
|
+
document.body
|
|
261
|
+
)
|
|
262
|
+
]
|
|
102
263
|
}
|
|
103
|
-
)
|
|
264
|
+
);
|
|
104
265
|
});
|
|
105
|
-
|
|
106
|
-
const
|
|
266
|
+
O.displayName = "InputCellEditor";
|
|
267
|
+
const se = ee.memo(O, () => !0);
|
|
107
268
|
export {
|
|
108
|
-
|
|
269
|
+
se as InputCellEditor
|
|
109
270
|
};
|
|
@@ -34,6 +34,7 @@ export type { PercentProgressDisplayRendererProps } from './percent-progress-dis
|
|
|
34
34
|
export type { PercentProgressCellEditorProps } from './editors/percent-progress-cell-editor';
|
|
35
35
|
export type { SelectCellEditorProps } from './editors/select-cell-editor';
|
|
36
36
|
export type { SplitCellEditorProps } from './editors/split-cell-editor';
|
|
37
|
+
export type { AutocompleteRule } from './editors/input-cell-editor';
|
|
37
38
|
export { type BadgeVariant, type BadgeColor, type SelectOption, type ActionButton, type RightSideIcon, type RightSideBadge, type RightSideContentItem, type RightSideContent, type SplitConfig, type CellMetadata, type RowMetadata, type ValueFormatter, } from './types';
|
|
38
39
|
export { mapBadgeVariant, mapBadgeColor, getFieldValue, resolveValueFormatter, applyValueFormatter, resolveCellEditable, evaluateValidationRules, } from './cell-renderer-utils';
|
|
39
40
|
export { addRowDataEditableCheck } from '../editable-utils';
|
|
@@ -24,6 +24,7 @@ export interface MonthRange {
|
|
|
24
24
|
export interface CalendarProps extends Omit<React.ComponentProps<typeof DayPicker>, 'mode' | 'selected' | 'onSelect'> {
|
|
25
25
|
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
|
26
26
|
showFooter?: boolean;
|
|
27
|
+
disableApply?: boolean;
|
|
27
28
|
onApply?: (date: Date | Date[] | DateRange | undefined) => void;
|
|
28
29
|
onCancel?: () => void;
|
|
29
30
|
onClear?: () => void;
|
|
@@ -51,7 +52,7 @@ export interface CalendarProps extends Omit<React.ComponentProps<typeof DayPicke
|
|
|
51
52
|
selectedMonths?: MonthSelection | MonthSelection[] | MonthRange;
|
|
52
53
|
onMonthSelect?: (months: MonthSelection | MonthSelection[] | MonthRange | undefined) => void;
|
|
53
54
|
}
|
|
54
|
-
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, showFooter, onApply, onCancel, onClear, mode, selected, onSelect, pickerType, weekMode, selectedWeeks, onWeekSelect, calendarType, fiscalMode, selectionMode, fiscalMonthPattern, fiscalYearStartMonth, weekStartsOn, // Default Monday
|
|
55
|
+
declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, showFooter, disableApply, onApply, onCancel, onClear, mode, selected, onSelect, pickerType, weekMode, selectedWeeks, onWeekSelect, calendarType, fiscalMode, selectionMode, fiscalMonthPattern, fiscalYearStartMonth, weekStartsOn, // Default Monday
|
|
55
56
|
monthMode, selectedMonths, onMonthSelect, month, defaultMonth, onMonthChange, startMonth, endMonth, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
56
57
|
declare function CalendarDayButton({ className, day, modifiers, pickerType, ...props }: React.ComponentProps<typeof DayButton> & {
|
|
57
58
|
pickerType?: "date" | "week" | "month";
|