impact-nova 0.1.9 → 0.1.10
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.
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsxs as y, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { Filter as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { DatePicker as
|
|
6
|
-
import { Input as
|
|
7
|
-
import
|
|
8
|
-
import { Popover as
|
|
9
|
-
import { Cross as
|
|
10
|
-
import { useGridHeader as
|
|
11
|
-
import { getMultiFilterIndices as C, getDisplayStringFromFilterModel as P, parseInputPattern as
|
|
12
|
-
import { deserializeDate as M, serializeDate as
|
|
2
|
+
import { useRef as se, useState as I, useEffect as ae, useCallback as Ae } from "react";
|
|
3
|
+
import { Filter as Se } from "lucide-react";
|
|
4
|
+
import { cn as we } from "../../../../lib/utils.js";
|
|
5
|
+
import { DatePicker as ce } from "../../date-picker/date-picker.js";
|
|
6
|
+
import { Input as de } from "../../input.js";
|
|
7
|
+
import fe from "../../select/select.js";
|
|
8
|
+
import { Popover as Ie, PopoverTrigger as Pe, PopoverContent as qe, PopoverHeader as ze, PopoverTitle as Be, PopoverBody as Ee } from "../../popover.js";
|
|
9
|
+
import { Cross as ue } from "../../../../icons/index.js";
|
|
10
|
+
import { useGridHeader as He } from "./context/grid-header-context.js";
|
|
11
|
+
import { getMultiFilterIndices as C, getDisplayStringFromFilterModel as P, parseInputPattern as Re } from "./utils/filter-utils.js";
|
|
12
|
+
import { deserializeDate as M, serializeDate as he } from "./utils/date-utils.js";
|
|
13
13
|
const ke = {
|
|
14
14
|
contains: "contains",
|
|
15
15
|
notContains: "notContains",
|
|
@@ -24,7 +24,7 @@ const ke = {
|
|
|
24
24
|
inRange: "inRange",
|
|
25
25
|
empty: "blank",
|
|
26
26
|
notEmpty: "notBlank"
|
|
27
|
-
},
|
|
27
|
+
}, Ze = ({
|
|
28
28
|
column: D,
|
|
29
29
|
api: d,
|
|
30
30
|
onClose: W,
|
|
@@ -32,17 +32,17 @@ const ke = {
|
|
|
32
32
|
handleClearSearchInline: G,
|
|
33
33
|
onAdvanceSearchClick: L,
|
|
34
34
|
toggleAdvanceSearch: _,
|
|
35
|
-
advanceSearchEnabled:
|
|
35
|
+
advanceSearchEnabled: me = !1,
|
|
36
36
|
selectOptions: q,
|
|
37
37
|
isMultiSelect: v,
|
|
38
|
-
onSelectScrollToBottom:
|
|
39
|
-
onSelectSearchChange:
|
|
38
|
+
onSelectScrollToBottom: pe,
|
|
39
|
+
onSelectSearchChange: ge,
|
|
40
40
|
onSelectOpen: V,
|
|
41
41
|
isLoadingSelect: J,
|
|
42
|
-
enableSpaceSplitting:
|
|
43
|
-
enableBooleanParsing:
|
|
42
|
+
enableSpaceSplitting: xe = !1,
|
|
43
|
+
enableBooleanParsing: ye = !1
|
|
44
44
|
}) => {
|
|
45
|
-
const c = D.getColDef(), o = D.getColId(), z = c?.filter || "agTextColumnFilter", p = z === "agDateColumnFilter", B = z === "agSetColumnFilter" || q && q.length > 0 || c?.cellDataType === "boolean", K =
|
|
45
|
+
const c = D.getColDef(), o = D.getColId(), z = c?.filter || "agTextColumnFilter", p = z === "agDateColumnFilter", B = z === "agSetColumnFilter" || q && q.length > 0 || c?.cellDataType === "boolean", K = He(), E = se(null), Q = se(!1), [H, R] = I(() => {
|
|
46
46
|
const t = d.getFilterModel()[o];
|
|
47
47
|
if (!t) return "";
|
|
48
48
|
if (t.filterType === "multi" && t.filterModels) {
|
|
@@ -54,7 +54,11 @@ const ke = {
|
|
|
54
54
|
return "";
|
|
55
55
|
}
|
|
56
56
|
return p ? "" : P(o, t);
|
|
57
|
-
}), [
|
|
57
|
+
}), [U, u] = I(!1);
|
|
58
|
+
ae(() => {
|
|
59
|
+
Q.current = U;
|
|
60
|
+
}, [U]);
|
|
61
|
+
const [X, k] = I(() => {
|
|
58
62
|
const t = d.getFilterModel()[o];
|
|
59
63
|
if (t) {
|
|
60
64
|
if (t.filterType === "multi" && t.filterModels) {
|
|
@@ -74,7 +78,7 @@ const ke = {
|
|
|
74
78
|
}
|
|
75
79
|
return null;
|
|
76
80
|
});
|
|
77
|
-
|
|
81
|
+
ae(() => {
|
|
78
82
|
const e = () => {
|
|
79
83
|
const l = d.getFilterModel()[o];
|
|
80
84
|
let r = "";
|
|
@@ -86,7 +90,7 @@ const ke = {
|
|
|
86
90
|
r = f ? P(o, f) : "";
|
|
87
91
|
}
|
|
88
92
|
} else p || (r = P(o, l));
|
|
89
|
-
|
|
93
|
+
Q.current || R((n) => n !== r ? r : n);
|
|
90
94
|
let m = null;
|
|
91
95
|
if (l)
|
|
92
96
|
if (l.filterType === "multi" && l.filterModels) {
|
|
@@ -96,15 +100,15 @@ const ke = {
|
|
|
96
100
|
a && (m = a.dateFrom ? M(a.dateFrom) : a.filter ? M(a.filter) : null);
|
|
97
101
|
}
|
|
98
102
|
} else p && (m = l.dateFrom ? M(l.dateFrom) : l.filter ? M(l.filter) : null);
|
|
99
|
-
|
|
103
|
+
k((n) => n?.getTime() !== m?.getTime() ? m : n);
|
|
100
104
|
};
|
|
101
105
|
return d.addEventListener("filterChanged", e), () => {
|
|
102
106
|
d.removeEventListener("filterChanged", e);
|
|
103
107
|
};
|
|
104
108
|
}, [d, o, p]);
|
|
105
|
-
const
|
|
109
|
+
const Y = (e, t) => {
|
|
106
110
|
const r = { ...d.getFilterModel() }, m = (n, a) => {
|
|
107
|
-
const f =
|
|
111
|
+
const f = Re(n, xe, ye);
|
|
108
112
|
if (console.log("[HeaderSearchInput] Pattern Debug:", {
|
|
109
113
|
input: n,
|
|
110
114
|
filterType: a,
|
|
@@ -113,13 +117,13 @@ const ke = {
|
|
|
113
117
|
const b = (s) => {
|
|
114
118
|
let F = ke[s.operator] || "contains";
|
|
115
119
|
if (a === "number") {
|
|
116
|
-
const
|
|
120
|
+
const ie = parseFloat(s.value);
|
|
117
121
|
return ["contains", "notContains", "startsWith", "endsWith"].includes(F) && (F = F === "notContains" ? "notEqual" : "equals"), s.operator === "inRange" ? {
|
|
118
122
|
type: F,
|
|
119
123
|
filter: parseFloat(s.value) || 0,
|
|
120
124
|
filterTo: parseFloat(s.valueTo || "") || 0,
|
|
121
125
|
filterType: "number"
|
|
122
|
-
} : isNaN(
|
|
126
|
+
} : isNaN(ie) ? null : { type: F, filter: ie, filterType: "number" };
|
|
123
127
|
}
|
|
124
128
|
return {
|
|
125
129
|
type: F,
|
|
@@ -150,7 +154,7 @@ const ke = {
|
|
|
150
154
|
if (t === "set")
|
|
151
155
|
h = { values: Array.isArray(e) ? e : [String(e)], filterType: "set" };
|
|
152
156
|
else if (t === "date") {
|
|
153
|
-
const s = e instanceof Date ?
|
|
157
|
+
const s = e instanceof Date ? he(e) : null;
|
|
154
158
|
h = s ? { type: "equals", dateFrom: s, filterType: "date" } : null;
|
|
155
159
|
} else {
|
|
156
160
|
const s = n.text !== -1 ? "text" : "number";
|
|
@@ -160,7 +164,7 @@ const ke = {
|
|
|
160
164
|
} else if (e === null || e === "" || Array.isArray(e) && e.length === 0)
|
|
161
165
|
delete r[o];
|
|
162
166
|
else if (t === "date") {
|
|
163
|
-
const n = e instanceof Date ?
|
|
167
|
+
const n = e instanceof Date ? he(e) : null;
|
|
164
168
|
r[o] = n ? { type: "equals", dateFrom: n, filterType: "date" } : null;
|
|
165
169
|
} else if (t === "set")
|
|
166
170
|
r[o] = { filterType: "set", values: Array.isArray(e) ? e : [String(e)] };
|
|
@@ -177,17 +181,17 @@ const ke = {
|
|
|
177
181
|
j(Array.isArray(e) ? e.join(",") : e);
|
|
178
182
|
return;
|
|
179
183
|
}
|
|
180
|
-
|
|
181
|
-
},
|
|
184
|
+
Y(e, p ? "date" : "text");
|
|
185
|
+
}, Z = (e) => {
|
|
182
186
|
const t = e.target.value;
|
|
183
|
-
|
|
184
|
-
},
|
|
185
|
-
|
|
186
|
-
},
|
|
187
|
-
|
|
187
|
+
R(t), O(t);
|
|
188
|
+
}, $ = (e) => {
|
|
189
|
+
k(e), O(e);
|
|
190
|
+
}, Fe = () => {
|
|
191
|
+
R(""), k(null), O(""), G && G();
|
|
188
192
|
}, A = (e) => {
|
|
189
|
-
|
|
190
|
-
}, S = q || (c?.cellDataType === "boolean" ? [{ label: "True", value: "true" }, { label: "False", value: "false" }] : []),
|
|
193
|
+
Y(e, "set");
|
|
194
|
+
}, S = q || (c?.cellDataType === "boolean" ? [{ label: "True", value: "true" }, { label: "False", value: "false" }] : []), ee = Ae(() => {
|
|
191
195
|
const e = d.getFilterModel()[o];
|
|
192
196
|
if (!e) return [];
|
|
193
197
|
if ("filterType" in e && e.filterType === "multi" && e.filterModels) {
|
|
@@ -203,19 +207,19 @@ const ke = {
|
|
|
203
207
|
return [String(e.filter)];
|
|
204
208
|
}
|
|
205
209
|
return [];
|
|
206
|
-
}, [d, o, D]), [w, N] = I(null),
|
|
207
|
-
const e = w !== null ? w :
|
|
210
|
+
}, [d, o, D]), [w, N] = I(null), te = () => {
|
|
211
|
+
const e = w !== null ? w : ee();
|
|
208
212
|
return v ? S.filter((t) => e.includes(t.value)) : S.find((t) => e.includes(t.value)) || null;
|
|
209
|
-
},
|
|
213
|
+
}, le = (e) => {
|
|
210
214
|
let t = [];
|
|
211
215
|
if (Array.isArray(e) ? t = e.map((l) => l.value) : e && typeof e == "object" && "value" in e && (t = [e.value]), !v) {
|
|
212
216
|
A(t), e && W();
|
|
213
217
|
return;
|
|
214
218
|
}
|
|
215
219
|
N(t);
|
|
216
|
-
},
|
|
220
|
+
}, Me = () => {
|
|
217
221
|
A([]), N([]);
|
|
218
|
-
},
|
|
222
|
+
}, ve = (e) => {
|
|
219
223
|
if (v) {
|
|
220
224
|
if (e !== void 0) {
|
|
221
225
|
let t = [];
|
|
@@ -224,24 +228,24 @@ const ke = {
|
|
|
224
228
|
}
|
|
225
229
|
w !== null && (A(w), N(null));
|
|
226
230
|
}
|
|
227
|
-
},
|
|
228
|
-
N(
|
|
229
|
-
},
|
|
231
|
+
}, Ce = () => {
|
|
232
|
+
N(ee()), V && V();
|
|
233
|
+
}, Te = () => me ? /* @__PURE__ */ i("svg", { className: "cursor-pointer text-[#7a8294] hover:text-[#3649C6] shrink-0", fill: "currentColor", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "18", height: "18", onClick: (e) => {
|
|
230
234
|
e.stopPropagation(), E.current && E.current.blur(), L ? L(D) : _ ? _(o) : K && K.openAdvancedFilter(o);
|
|
231
|
-
}, children: /* @__PURE__ */ i("path", { d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" }) }) : null,
|
|
235
|
+
}, children: /* @__PURE__ */ i("path", { d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" }) }) : null, be = () => /* @__PURE__ */ i("button", { onClick: W, className: "cursor-pointer shrink-0 text-[#4259ee] hover:text-[#0f1c76]", children: /* @__PURE__ */ i(ue, { size: 12 }) }), T = c.filter === "agMultiColumnFilter", g = C(c);
|
|
232
236
|
let x = "text";
|
|
233
237
|
T ? x = g.set !== -1 ? "set" : g.date !== -1 ? "date" : "text" : B ? x = "set" : p && (x = "date");
|
|
234
|
-
const
|
|
238
|
+
const De = T ? g.text !== -1 || g.number !== -1 : !p && !B, re = T ? g.set !== -1 : B, ne = T ? g.date !== -1 : p, Ne = d.getFilterModel()[o], oe = T && Ne?.filterModels?.some((e, t) => {
|
|
235
239
|
const l = t === g.text || t === g.number ? "text" : t === g.set ? "set" : "date";
|
|
236
240
|
return e !== null && l !== x;
|
|
237
241
|
});
|
|
238
242
|
return /* @__PURE__ */ y("div", { className: "ag-header-cell-label flex items-center gap-1 w-full bg-[#eceefd] px-1 py-2 ag-header-cell-search-active h-full", children: [
|
|
239
|
-
x === "set" &&
|
|
240
|
-
|
|
243
|
+
x === "set" && re ? /* @__PURE__ */ i(
|
|
244
|
+
fe,
|
|
241
245
|
{
|
|
242
246
|
options: S,
|
|
243
|
-
value:
|
|
244
|
-
onChange:
|
|
247
|
+
value: te(),
|
|
248
|
+
onChange: le,
|
|
245
249
|
isMulti: v !== void 0 ? v : c?.cellDataType !== "boolean",
|
|
246
250
|
placeholder: "Select...",
|
|
247
251
|
className: "w-full bg-white",
|
|
@@ -249,20 +253,20 @@ const ke = {
|
|
|
249
253
|
menuWidth: "200px",
|
|
250
254
|
menuPortalTarget: document.body,
|
|
251
255
|
autoFocus: !0,
|
|
252
|
-
onMenuOpen:
|
|
253
|
-
onMenuClose:
|
|
254
|
-
onMenuScrollToBottom:
|
|
255
|
-
onInputChange:
|
|
256
|
-
onClearAll:
|
|
256
|
+
onMenuOpen: Ce,
|
|
257
|
+
onMenuClose: ve,
|
|
258
|
+
onMenuScrollToBottom: pe,
|
|
259
|
+
onInputChange: ge,
|
|
260
|
+
onClearAll: Me,
|
|
257
261
|
isLoading: J,
|
|
258
262
|
onFocus: () => u(!0),
|
|
259
263
|
onBlur: () => u(!1)
|
|
260
264
|
}
|
|
261
|
-
) : x === "date" &&
|
|
262
|
-
|
|
265
|
+
) : x === "date" && ne ? /* @__PURE__ */ i(
|
|
266
|
+
ce,
|
|
263
267
|
{
|
|
264
|
-
value:
|
|
265
|
-
onChange: (e) =>
|
|
268
|
+
value: X || void 0,
|
|
269
|
+
onChange: (e) => $(e || null),
|
|
266
270
|
placeholder: "Select Date",
|
|
267
271
|
format: "MM-dd-yyyy",
|
|
268
272
|
minDate: /* @__PURE__ */ new Date("2000-01-01"),
|
|
@@ -272,10 +276,10 @@ const ke = {
|
|
|
272
276
|
onBlur: () => u(!1)
|
|
273
277
|
}
|
|
274
278
|
) : /* @__PURE__ */ i(
|
|
275
|
-
|
|
279
|
+
de,
|
|
276
280
|
{
|
|
277
281
|
value: H,
|
|
278
|
-
onChange:
|
|
282
|
+
onChange: Z,
|
|
279
283
|
placeholder: "Search",
|
|
280
284
|
type: "text",
|
|
281
285
|
className: "flex-1 bg-white",
|
|
@@ -284,26 +288,26 @@ const ke = {
|
|
|
284
288
|
onFocus: () => u(!0),
|
|
285
289
|
onBlur: () => u(!1),
|
|
286
290
|
suffix: H && /* @__PURE__ */ i("button", { onClick: (e) => {
|
|
287
|
-
e.stopPropagation(),
|
|
288
|
-
}, className: "cursor-pointer text-[#7a8294] hover:text-[#3649C6]", children: /* @__PURE__ */ i(
|
|
291
|
+
e.stopPropagation(), Fe();
|
|
292
|
+
}, className: "cursor-pointer text-[#7a8294] hover:text-[#3649C6]", children: /* @__PURE__ */ i(ue, { size: 10 }) })
|
|
289
293
|
}
|
|
290
294
|
),
|
|
291
295
|
/* @__PURE__ */ y("div", { className: "flex items-center gap-1.5 shrink-0", children: [
|
|
292
|
-
T && /* @__PURE__ */ y(
|
|
293
|
-
/* @__PURE__ */ i(
|
|
294
|
-
/* @__PURE__ */ i(
|
|
295
|
-
|
|
296
|
+
T && /* @__PURE__ */ y(Ie, { children: [
|
|
297
|
+
/* @__PURE__ */ i(Pe, { asChild: !0, children: /* @__PURE__ */ y("div", { className: "relative group p-1 hover:bg-[#dbe0fb] rounded-md transition-colors cursor-pointer", children: [
|
|
298
|
+
/* @__PURE__ */ i(Se, { size: 16, className: we("text-[#60697D] group-hover:text-[#3649C6]", oe && "text-[#3649C6]") }),
|
|
299
|
+
oe && /* @__PURE__ */ i("span", { className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-[#4259ee] border border-white shadow-sm" })
|
|
296
300
|
] }) }),
|
|
297
|
-
/* @__PURE__ */ y(
|
|
298
|
-
/* @__PURE__ */ i(
|
|
299
|
-
/* @__PURE__ */ y(
|
|
300
|
-
x !== "text" &&
|
|
301
|
+
/* @__PURE__ */ y(qe, { align: "end", className: "w-[300px]", children: [
|
|
302
|
+
/* @__PURE__ */ i(ze, { children: /* @__PURE__ */ i(Be, { children: "Active Filters" }) }),
|
|
303
|
+
/* @__PURE__ */ y(Ee, { className: "flex flex-col gap-4", children: [
|
|
304
|
+
x !== "text" && De && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
|
|
301
305
|
/* @__PURE__ */ i("span", { className: "text-xs font-semibold text-[#60697D]", children: "Text Search" }),
|
|
302
306
|
/* @__PURE__ */ i(
|
|
303
|
-
|
|
307
|
+
de,
|
|
304
308
|
{
|
|
305
309
|
value: H,
|
|
306
|
-
onChange:
|
|
310
|
+
onChange: Z,
|
|
307
311
|
placeholder: "Search...",
|
|
308
312
|
className: "bg-white",
|
|
309
313
|
onFocus: () => u(!0),
|
|
@@ -311,14 +315,14 @@ const ke = {
|
|
|
311
315
|
}
|
|
312
316
|
)
|
|
313
317
|
] }),
|
|
314
|
-
x !== "set" &&
|
|
318
|
+
x !== "set" && re && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
|
|
315
319
|
/* @__PURE__ */ i("span", { className: "text-xs font-semibold text-[#60697D]", children: "Selection Filter" }),
|
|
316
320
|
/* @__PURE__ */ i(
|
|
317
|
-
|
|
321
|
+
fe,
|
|
318
322
|
{
|
|
319
323
|
options: S,
|
|
320
|
-
value:
|
|
321
|
-
onChange:
|
|
324
|
+
value: te(),
|
|
325
|
+
onChange: le,
|
|
322
326
|
isMulti: v !== void 0 ? v : c?.cellDataType !== "boolean",
|
|
323
327
|
placeholder: "Select...",
|
|
324
328
|
className: "w-full bg-white",
|
|
@@ -328,13 +332,13 @@ const ke = {
|
|
|
328
332
|
}
|
|
329
333
|
)
|
|
330
334
|
] }),
|
|
331
|
-
x !== "date" &&
|
|
335
|
+
x !== "date" && ne && /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
|
|
332
336
|
/* @__PURE__ */ i("span", { className: "text-xs font-semibold text-[#60697D]", children: "Date Filter" }),
|
|
333
337
|
/* @__PURE__ */ i(
|
|
334
|
-
|
|
338
|
+
ce,
|
|
335
339
|
{
|
|
336
|
-
value:
|
|
337
|
-
onChange: (e) =>
|
|
340
|
+
value: X || void 0,
|
|
341
|
+
onChange: (e) => $(e || null),
|
|
338
342
|
className: "w-full bg-white",
|
|
339
343
|
onFocus: () => u(!0),
|
|
340
344
|
onBlur: () => u(!1)
|
|
@@ -344,11 +348,11 @@ const ke = {
|
|
|
344
348
|
] })
|
|
345
349
|
] })
|
|
346
350
|
] }),
|
|
347
|
-
|
|
348
|
-
|
|
351
|
+
Te(),
|
|
352
|
+
be()
|
|
349
353
|
] })
|
|
350
354
|
] });
|
|
351
355
|
};
|
|
352
356
|
export {
|
|
353
|
-
|
|
357
|
+
Ze as HeaderSearchInput
|
|
354
358
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
{
|
|
3
3
|
"name": "impact-nova",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.10",
|
|
5
5
|
"description": "Enterprise-grade React design system built with React 19, Vite, Tailwind CSS, and Radix UI. Comprehensive UI component library for scalable, accessible, and performant applications.",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.js",
|