impact-nova 1.5.6 → 1.5.8
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/layout/dashboard-layout.d.ts +24 -39
- package/dist/components/ui/ag-grid-react/cell-renderers/date-display-renderer.js +39 -32
- package/dist/components/ui/ag-grid-react/cell-renderers/editors/date-cell-editor.js +47 -47
- package/dist/components/ui/ag-grid-react/cell-renderers/editors/percent-progress-cell-editor.d.ts +16 -0
- package/dist/components/ui/ag-grid-react/cell-renderers/editors/percent-progress-cell-editor.js +135 -0
- package/dist/components/ui/ag-grid-react/cell-renderers/editors/select-cell-editor.js +39 -36
- package/dist/components/ui/ag-grid-react/cell-renderers/index.d.ts +14 -1
- package/dist/components/ui/ag-grid-react/cell-renderers/index.js +41 -35
- package/dist/components/ui/ag-grid-react/cell-renderers/percent-progress-display-renderer.d.ts +31 -0
- package/dist/components/ui/ag-grid-react/cell-renderers/percent-progress-display-renderer.js +63 -0
- package/dist/components/ui/ag-grid-react/cell-renderers/select-display-renderer.js +18 -12
- package/dist/components/ui/badge.d.ts +2 -1
- package/dist/components/ui/badge.js +17 -12
- package/dist/components/ui/command-palette/command-palette-context.d.ts +4 -2
- package/dist/components/ui/command-palette/command-palette-context.js +76 -77
- package/dist/components/ui/command-palette/command-palette.d.ts +20 -4
- package/dist/components/ui/command-palette/command-palette.js +210 -180
- package/dist/components/ui/command-palette/index.d.ts +3 -3
- package/dist/components/ui/command-palette/index.js +43 -40
- package/dist/components/ui/command-palette/shortcut-registry.d.ts +15 -2
- package/dist/components/ui/command-palette/shortcut-registry.js +61 -35
- package/dist/components/ui/command-palette/shortcut-settings.d.ts +14 -3
- package/dist/components/ui/command-palette/shortcut-settings.js +97 -90
- package/dist/components/ui/command-palette/utils.d.ts +15 -0
- package/dist/components/ui/command-palette/utils.js +105 -70
- package/dist/components/ui/filter-strip/filter-strip.d.ts +1 -1
- package/dist/components/ui/filter-strip/filter-strip.js +24 -22
- package/dist/components/ui/filter-strip/filter-tag-list.js +4 -4
- package/dist/components/ui/select/select.js +41 -41
- package/dist/components/ui/tabs.js +46 -45
- package/dist/icons/assets/command-pallet.svg.js +5 -0
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +146 -143
- package/dist/impact-nova.css +1 -1
- package/dist/index.js +100 -97
- package/package.json +1 -1
|
@@ -1,54 +1,39 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
interface DashboardLayoutProps extends React.ComponentProps<"div"> {
|
|
3
3
|
/**
|
|
4
|
-
* The Sidebar component (e.g. <AppSidebar />).
|
|
5
|
-
*
|
|
4
|
+
* The Sidebar component (e.g. <AppSidebar /> wrapped in its own SidebarProvider).
|
|
5
|
+
* The sidebar should manage its own SidebarProvider internally.
|
|
6
6
|
*/
|
|
7
7
|
sidebar: React.ReactNode;
|
|
8
8
|
/**
|
|
9
9
|
* The Header component (e.g. <Header />).
|
|
10
|
-
* Rendered above the main content area
|
|
10
|
+
* Rendered above the main content area.
|
|
11
11
|
*/
|
|
12
12
|
header: React.ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Optional breadcrumb node rendered inside a sticky BreadcrumbHeader bar.
|
|
15
|
-
* When provided, the bar is sticky at the top of the scroll area.
|
|
16
|
-
*/
|
|
17
|
-
breadcrumb?: React.ReactNode;
|
|
18
|
-
/**
|
|
19
|
-
* Optional content rendered on the right side of the breadcrumb header bar
|
|
20
|
-
* (e.g. action buttons, view toggles, filter toggle button).
|
|
21
|
-
*/
|
|
22
|
-
breadcrumbRightContent?: React.ReactNode;
|
|
23
|
-
/**
|
|
24
|
-
* Optional FilterStrip or any content rendered below the BreadcrumbHeader bar
|
|
25
|
-
* with a smooth animated collapse/expand behaviour.
|
|
26
|
-
* Visibility is controlled by the built-in "Show/Hide Filters" toggle
|
|
27
|
-
* when `filterStrip` is provided.
|
|
28
|
-
*/
|
|
29
|
-
filterStrip?: React.ReactNode;
|
|
30
|
-
/**
|
|
31
|
-
* When true, the filter strip is shown by default. Defaults to `true`.
|
|
32
|
-
*/
|
|
33
|
-
defaultFiltersVisible?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
* Controlled sidebar open state. When provided, the sidebar becomes fully controlled.
|
|
36
|
-
* Use together with `onSidebarOpenChange` for two-way binding.
|
|
37
|
-
*/
|
|
38
|
-
sidebarOpen?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Callback fired when the sidebar open state changes.
|
|
41
|
-
* Use together with `sidebarOpen` for controlled mode, or standalone for listening.
|
|
42
|
-
*/
|
|
43
|
-
onSidebarOpenChange?: (open: boolean) => void;
|
|
44
|
-
/**
|
|
45
|
-
* Default open state for the sidebar (uncontrolled mode). Defaults to `false`.
|
|
46
|
-
*/
|
|
47
|
-
sidebarDefaultOpen?: boolean;
|
|
48
13
|
/**
|
|
49
14
|
* Main content (e.g. <Outlet /> or page-level content).
|
|
15
|
+
* Pages should handle their own breadcrumb and filter strip rendering.
|
|
50
16
|
*/
|
|
51
17
|
children: React.ReactNode;
|
|
52
18
|
}
|
|
53
|
-
|
|
19
|
+
/**
|
|
20
|
+
* A minimal dashboard layout that provides the basic structure:
|
|
21
|
+
* Sidebar | (Header + Main Content)
|
|
22
|
+
*
|
|
23
|
+
* This layout is intentionally simple. Breadcrumbs, filter strips, and other
|
|
24
|
+
* page-specific UI should be handled at the page level, not in the layout.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <DashboardLayout
|
|
29
|
+
* sidebar={<SidebarWrapper />}
|
|
30
|
+
* header={<HeaderWrapper />}
|
|
31
|
+
* >
|
|
32
|
+
* <Suspense fallback={<ModuleLoader />}>
|
|
33
|
+
* <Outlet />
|
|
34
|
+
* </Suspense>
|
|
35
|
+
* </DashboardLayout>
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export declare function DashboardLayout({ sidebar, header, children, className, ...props }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
54
39
|
export {};
|
|
@@ -1,53 +1,60 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as t, jsxs as f } from "react/jsx-runtime";
|
|
2
2
|
import "lucide-react";
|
|
3
|
-
const
|
|
4
|
-
if (
|
|
3
|
+
const w = (i, r) => {
|
|
4
|
+
if (i == null || i === "") return "";
|
|
5
5
|
try {
|
|
6
|
-
const
|
|
7
|
-
return isNaN(
|
|
6
|
+
const e = i instanceof Date ? i : new Date(String(i));
|
|
7
|
+
return isNaN(e.getTime()) ? String(i) : r === "time" ? e.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" }) : r === "datetime-local" ? e.toLocaleString(void 0, {
|
|
8
8
|
year: "numeric",
|
|
9
9
|
month: "short",
|
|
10
10
|
day: "numeric",
|
|
11
11
|
hour: "2-digit",
|
|
12
12
|
minute: "2-digit"
|
|
13
|
-
}) :
|
|
13
|
+
}) : e.toLocaleDateString(void 0, {
|
|
14
14
|
year: "numeric",
|
|
15
15
|
month: "short",
|
|
16
16
|
day: "numeric"
|
|
17
17
|
});
|
|
18
18
|
} catch {
|
|
19
|
-
return String(
|
|
19
|
+
return String(i);
|
|
20
20
|
}
|
|
21
|
-
},
|
|
21
|
+
}, y = (i) => {
|
|
22
22
|
const {
|
|
23
23
|
valueFormatted: r,
|
|
24
|
-
value:
|
|
25
|
-
dateType:
|
|
26
|
-
placeholder:
|
|
27
|
-
disabled:
|
|
28
|
-
colDef:
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
value: e,
|
|
25
|
+
dateType: p = "date",
|
|
26
|
+
placeholder: m = "Select date...",
|
|
27
|
+
disabled: o,
|
|
28
|
+
colDef: n,
|
|
29
|
+
data: l
|
|
30
|
+
} = i, d = e && typeof e == "object" && "cellMetadata" in e ? e.cellMetadata?._isDisabled : void 0, s = l && typeof l == "object" && "rowMetadata" in l ? l.rowMetadata?._isDisabled : void 0;
|
|
31
|
+
let a = !1;
|
|
32
|
+
if (!o) {
|
|
33
|
+
const b = n?._originalEditable;
|
|
34
|
+
n?.editable === !1 ? a = !1 : d === !1 ? a = !0 : d === !0 ? a = !1 : s === !1 ? a = !0 : s === !0 ? a = !1 : a = b === !0 || n?.editable === !0;
|
|
35
|
+
}
|
|
36
|
+
const c = e && typeof e == "object" && "value" in e, g = c ? e.value : e, h = (c ? null : r) ?? w(g, p), u = !h;
|
|
37
|
+
return /* @__PURE__ */ t(
|
|
31
38
|
"div",
|
|
32
39
|
{
|
|
33
|
-
className: `w-full h-full flex items-center ag-cell-inner-padding ${
|
|
34
|
-
children: /* @__PURE__ */
|
|
40
|
+
className: `w-full h-full flex items-center ag-cell-inner-padding ${o ? "opacity-60 cursor-not-allowed" : a ? "in-ag-editable-cell-highlight" : ""}`,
|
|
41
|
+
children: /* @__PURE__ */ f(
|
|
35
42
|
"div",
|
|
36
43
|
{
|
|
37
|
-
className:
|
|
44
|
+
className: `flex w-full items-center justify-between rounded-[8px] px-1.5 h-7 ${a ? "bg-white cursor-pointer" : "bg-inherit"}`,
|
|
38
45
|
children: [
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
/* @__PURE__ */
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ t("span", { className: `truncate text-sm font-medium text-[#1f2b4d] ${u ? "text-[#dfe2e7]" : ""}`, children: u ? m : h }),
|
|
47
|
+
a && /* @__PURE__ */ t("span", { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", children: /* @__PURE__ */ f("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
48
|
+
/* @__PURE__ */ t("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
|
|
49
|
+
/* @__PURE__ */ t("path", { d: "M16 2v4" }),
|
|
50
|
+
/* @__PURE__ */ t("path", { d: "M8 2v4" }),
|
|
51
|
+
/* @__PURE__ */ t("path", { d: "M3 10h18" }),
|
|
52
|
+
/* @__PURE__ */ t("path", { d: "M8 14h.01" }),
|
|
53
|
+
/* @__PURE__ */ t("path", { d: "M12 14h.01" }),
|
|
54
|
+
/* @__PURE__ */ t("path", { d: "M16 14h.01" }),
|
|
55
|
+
/* @__PURE__ */ t("path", { d: "M8 18h.01" }),
|
|
56
|
+
/* @__PURE__ */ t("path", { d: "M12 18h.01" }),
|
|
57
|
+
/* @__PURE__ */ t("path", { d: "M16 18h.01" })
|
|
51
58
|
] }) })
|
|
52
59
|
]
|
|
53
60
|
}
|
|
@@ -55,7 +62,7 @@ const u = (t, r) => {
|
|
|
55
62
|
}
|
|
56
63
|
);
|
|
57
64
|
};
|
|
58
|
-
|
|
65
|
+
y.displayName = "DateDisplayRenderer";
|
|
59
66
|
export {
|
|
60
|
-
|
|
67
|
+
y as DateDisplayRenderer
|
|
61
68
|
};
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { Calendar as
|
|
4
|
-
const
|
|
5
|
-
if (!(
|
|
1
|
+
import { jsx as C } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as N, useState as S, useImperativeHandle as P, useEffect as j, useCallback as u } from "react";
|
|
3
|
+
import { Calendar as I } from "../../../calendar.js";
|
|
4
|
+
const p = (o) => {
|
|
5
|
+
if (!(o == null || o === ""))
|
|
6
6
|
try {
|
|
7
|
-
const
|
|
8
|
-
return isNaN(
|
|
7
|
+
const r = o instanceof Date ? o : new Date(String(o));
|
|
8
|
+
return isNaN(r.getTime()) ? void 0 : r;
|
|
9
9
|
} catch {
|
|
10
10
|
return;
|
|
11
11
|
}
|
|
12
|
-
},
|
|
12
|
+
}, O = N((o, r) => {
|
|
13
13
|
const {
|
|
14
|
-
value:
|
|
15
|
-
min:
|
|
16
|
-
max:
|
|
17
|
-
node:
|
|
18
|
-
column:
|
|
19
|
-
stopEditing:
|
|
20
|
-
} =
|
|
21
|
-
|
|
14
|
+
value: a,
|
|
15
|
+
min: m,
|
|
16
|
+
max: f,
|
|
17
|
+
node: l,
|
|
18
|
+
column: g,
|
|
19
|
+
stopEditing: h
|
|
20
|
+
} = o, s = a && typeof a == "object" && "value" in a, d = s ? a.cellMetadata : void 0, D = s ? a.value : a, v = p(D), [w, b] = S(v), [M, E] = S(v || /* @__PURE__ */ new Date());
|
|
21
|
+
P(r, () => ({
|
|
22
22
|
getValue() {
|
|
23
|
-
return
|
|
23
|
+
return a;
|
|
24
24
|
},
|
|
25
25
|
isCancelBeforeStart() {
|
|
26
26
|
return !1;
|
|
@@ -31,45 +31,45 @@ const d = (t) => {
|
|
|
31
31
|
isPopup() {
|
|
32
32
|
return !0;
|
|
33
33
|
}
|
|
34
|
-
})),
|
|
35
|
-
const e = "ag-custom-component-popup",
|
|
36
|
-
|
|
37
|
-
},
|
|
38
|
-
for (const
|
|
39
|
-
|
|
34
|
+
})), j(() => {
|
|
35
|
+
const e = "ag-custom-component-popup", i = (t) => {
|
|
36
|
+
t instanceof HTMLElement && t.hasAttribute("data-radix-popper-content-wrapper") && t.classList.add(e);
|
|
37
|
+
}, n = new MutationObserver((t) => {
|
|
38
|
+
for (const V of t)
|
|
39
|
+
V.addedNodes.forEach(i);
|
|
40
40
|
});
|
|
41
|
-
return
|
|
42
|
-
|
|
43
|
-
}), () =>
|
|
41
|
+
return n.observe(document.body, { childList: !0, subtree: !0 }), document.querySelectorAll("[data-radix-popper-content-wrapper]").forEach((t) => {
|
|
42
|
+
t.classList.add(e);
|
|
43
|
+
}), () => n.disconnect();
|
|
44
44
|
}, []);
|
|
45
|
-
const
|
|
46
|
-
const
|
|
47
|
-
if (
|
|
48
|
-
const
|
|
49
|
-
|
|
45
|
+
const c = u((e) => {
|
|
46
|
+
const i = g?.getColId();
|
|
47
|
+
if (i && l) {
|
|
48
|
+
const n = e ? `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}` : null, t = s ? { value: n, ...d !== void 0 && { cellMetadata: d } } : n;
|
|
49
|
+
l.setDataValue(i, t);
|
|
50
50
|
}
|
|
51
|
-
|
|
52
|
-
}, [
|
|
53
|
-
|
|
54
|
-
}, [
|
|
55
|
-
|
|
56
|
-
}, [
|
|
57
|
-
return /* @__PURE__ */
|
|
58
|
-
|
|
51
|
+
h();
|
|
52
|
+
}, [g, l, h, s, d]), A = u((e) => {
|
|
53
|
+
b(e), c(e);
|
|
54
|
+
}, [c]), x = u(() => {
|
|
55
|
+
b(void 0), c(void 0);
|
|
56
|
+
}, [c]), y = m ? p(m) : void 0, L = f ? p(f) : void 0;
|
|
57
|
+
return /* @__PURE__ */ C("div", { className: "ag-custom-component-popup bg-white border border-input rounded-md shadow-lg", children: /* @__PURE__ */ C(
|
|
58
|
+
I,
|
|
59
59
|
{
|
|
60
60
|
mode: "single",
|
|
61
|
-
selected:
|
|
62
|
-
onSelect:
|
|
63
|
-
month:
|
|
64
|
-
onMonthChange:
|
|
65
|
-
disabled: { before:
|
|
61
|
+
selected: w,
|
|
62
|
+
onSelect: A,
|
|
63
|
+
month: M,
|
|
64
|
+
onMonthChange: E,
|
|
65
|
+
disabled: { before: y, after: L },
|
|
66
66
|
showFooter: !1,
|
|
67
|
-
onClear:
|
|
67
|
+
onClear: x,
|
|
68
68
|
captionLayout: "dropdown"
|
|
69
69
|
}
|
|
70
70
|
) });
|
|
71
71
|
});
|
|
72
|
-
|
|
72
|
+
O.displayName = "DateCellEditor";
|
|
73
73
|
export {
|
|
74
|
-
|
|
74
|
+
O as DateCellEditor
|
|
75
75
|
};
|
package/dist/components/ui/ag-grid-react/cell-renderers/editors/percent-progress-cell-editor.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ICellEditorParams } from 'ag-grid-community';
|
|
3
|
+
export interface PercentProgressCellEditorProps extends ICellEditorParams {
|
|
4
|
+
min?: number;
|
|
5
|
+
max?: number;
|
|
6
|
+
step?: number;
|
|
7
|
+
className?: string;
|
|
8
|
+
suppressAutoFocus?: boolean;
|
|
9
|
+
/** Injected when `reactiveCustomComponents` is on (default); required for commits to persist. */
|
|
10
|
+
onValueChange?: (value: unknown) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare const PercentProgressCellEditor: React.NamedExoticComponent<PercentProgressCellEditorProps & React.RefAttributes<{
|
|
13
|
+
getValue: () => unknown;
|
|
14
|
+
isCancelBeforeStart: () => boolean;
|
|
15
|
+
isCancelAfterEnd: () => boolean;
|
|
16
|
+
}>>;
|
package/dist/components/ui/ag-grid-react/cell-renderers/editors/percent-progress-cell-editor.js
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { jsx as c, jsxs as F } from "react/jsx-runtime";
|
|
2
|
+
import L, { forwardRef as I, useRef as w, useLayoutEffect as K, useState as T, useCallback as d, useImperativeHandle as U, useEffect as P } from "react";
|
|
3
|
+
import { Slider as H } from "../../../slider.js";
|
|
4
|
+
function A(t) {
|
|
5
|
+
return t && typeof t == "object" && "value" in t ? t.value : t;
|
|
6
|
+
}
|
|
7
|
+
function C(t) {
|
|
8
|
+
if (t == null || t === "") return null;
|
|
9
|
+
if (typeof t == "number") return isNaN(t) ? null : t;
|
|
10
|
+
const i = Number(String(t).replace(/%/g, "").trim());
|
|
11
|
+
return isNaN(i) ? null : i;
|
|
12
|
+
}
|
|
13
|
+
function N(t, i, a) {
|
|
14
|
+
return Math.min(a, Math.max(i, t));
|
|
15
|
+
}
|
|
16
|
+
const D = I((t, i) => {
|
|
17
|
+
const { value: a, colDef: f, className: k, onValueChange: m } = t, o = t.min ?? 0, l = t.max ?? 100, b = t.step ?? 1, p = a != null && typeof a == "object" && "value" in a, g = p ? a.cellMetadata : void 0, x = w(null), y = w(t.stopEditing), s = w(null);
|
|
18
|
+
K(() => {
|
|
19
|
+
y.current = t.stopEditing;
|
|
20
|
+
}, [t.stopEditing]);
|
|
21
|
+
const [v, h] = T(() => {
|
|
22
|
+
const e = A(a);
|
|
23
|
+
return C(e);
|
|
24
|
+
}), u = d(() => {
|
|
25
|
+
const e = s.current?.value;
|
|
26
|
+
let n;
|
|
27
|
+
if (!e || e === "" || e === "-")
|
|
28
|
+
n = null;
|
|
29
|
+
else {
|
|
30
|
+
const r = Number(e);
|
|
31
|
+
n = isNaN(r) ? null : N(r, o, l);
|
|
32
|
+
}
|
|
33
|
+
return p ? {
|
|
34
|
+
value: n,
|
|
35
|
+
...g !== void 0 && { cellMetadata: g }
|
|
36
|
+
} : n;
|
|
37
|
+
}, [o, l, p, g]);
|
|
38
|
+
U(
|
|
39
|
+
i,
|
|
40
|
+
() => ({
|
|
41
|
+
getValue() {
|
|
42
|
+
return u();
|
|
43
|
+
},
|
|
44
|
+
isCancelBeforeStart() {
|
|
45
|
+
return !1;
|
|
46
|
+
},
|
|
47
|
+
isCancelAfterEnd() {
|
|
48
|
+
return !1;
|
|
49
|
+
}
|
|
50
|
+
}),
|
|
51
|
+
[u]
|
|
52
|
+
), P(() => {
|
|
53
|
+
const e = s.current;
|
|
54
|
+
if (!e) return;
|
|
55
|
+
const n = A(a), r = C(n);
|
|
56
|
+
e.value = r != null ? String(r) : "", t.suppressAutoFocus || (e.focus(), e.select());
|
|
57
|
+
}, []), P(() => {
|
|
58
|
+
const e = x.current;
|
|
59
|
+
if (!e) return;
|
|
60
|
+
const n = (r) => {
|
|
61
|
+
const E = r.relatedTarget;
|
|
62
|
+
E && e.contains(E) || requestAnimationFrame(() => {
|
|
63
|
+
e.contains(document.activeElement) || y.current?.();
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
return e.addEventListener("focusout", n), () => e.removeEventListener("focusout", n);
|
|
67
|
+
}, []);
|
|
68
|
+
const R = v != null ? N(v, o, l) : o, V = d(
|
|
69
|
+
(e) => {
|
|
70
|
+
const n = e[0];
|
|
71
|
+
if (n === void 0) return;
|
|
72
|
+
const r = N(n, o, l);
|
|
73
|
+
h(r), s.current && (s.current.value = String(r)), m?.(u());
|
|
74
|
+
},
|
|
75
|
+
[o, l, m, u]
|
|
76
|
+
), S = d(() => {
|
|
77
|
+
const e = s.current?.value;
|
|
78
|
+
if (!e || e === "" || e === "-")
|
|
79
|
+
h(null);
|
|
80
|
+
else {
|
|
81
|
+
const n = Number(e);
|
|
82
|
+
h(isNaN(n) ? null : n);
|
|
83
|
+
}
|
|
84
|
+
m?.(u());
|
|
85
|
+
}, [m, u]), j = d((e) => {
|
|
86
|
+
["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(
|
|
87
|
+
e.key
|
|
88
|
+
) && e.stopPropagation();
|
|
89
|
+
}, []), M = d((e) => {
|
|
90
|
+
e.key === "Enter" || e.key === "Escape" || e.key === "Tab" || ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key) && e.stopPropagation();
|
|
91
|
+
}, []);
|
|
92
|
+
return /* @__PURE__ */ c(
|
|
93
|
+
"div",
|
|
94
|
+
{
|
|
95
|
+
ref: x,
|
|
96
|
+
className: `w-full h-full flex items-center ag-cell-inner-padding in-ag-editable-cell-highlight ${k ?? ""}`,
|
|
97
|
+
onPointerDown: (e) => e.stopPropagation(),
|
|
98
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
99
|
+
children: /* @__PURE__ */ F("div", { className: "flex w-full min-w-0 items-center gap-2", children: [
|
|
100
|
+
/* @__PURE__ */ c("div", { className: "min-w-0 flex-1 py-1", onKeyDown: j, children: /* @__PURE__ */ c(
|
|
101
|
+
H,
|
|
102
|
+
{
|
|
103
|
+
value: [R],
|
|
104
|
+
min: o,
|
|
105
|
+
max: l,
|
|
106
|
+
step: b,
|
|
107
|
+
onValueChange: V,
|
|
108
|
+
"aria-label": typeof f?.headerName == "string" ? `${f.headerName} — slide to adjust` : "Percent — slide to adjust"
|
|
109
|
+
}
|
|
110
|
+
) }),
|
|
111
|
+
/* @__PURE__ */ c("div", { className: "shrink-0 rounded-full bg-[#e8eaef] px-1.5 py-0.5", children: /* @__PURE__ */ c(
|
|
112
|
+
"input",
|
|
113
|
+
{
|
|
114
|
+
ref: s,
|
|
115
|
+
type: "number",
|
|
116
|
+
inputMode: "decimal",
|
|
117
|
+
min: o,
|
|
118
|
+
max: l,
|
|
119
|
+
step: b,
|
|
120
|
+
onInput: S,
|
|
121
|
+
onKeyDown: M,
|
|
122
|
+
className: "w-11 bg-transparent p-0 text-center text-xs font-medium tabular-nums text-[#4a5568] outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
|
|
123
|
+
"aria-label": typeof f?.headerName == "string" ? f.headerName : "Percent"
|
|
124
|
+
}
|
|
125
|
+
) }),
|
|
126
|
+
/* @__PURE__ */ c("span", { className: "shrink-0 text-xs font-medium text-[#4a5568] tabular-nums", children: "%" })
|
|
127
|
+
] })
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
});
|
|
131
|
+
D.displayName = "PercentProgressCellEditor";
|
|
132
|
+
const q = L.memo(D, () => !0);
|
|
133
|
+
export {
|
|
134
|
+
q as PercentProgressCellEditor
|
|
135
|
+
};
|
|
@@ -1,24 +1,27 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
1
|
+
import { jsx as g } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as x, useState as E, useRef as N, useImperativeHandle as O, useCallback as u } from "react";
|
|
3
|
+
import j from "../../../select/select.js";
|
|
4
|
+
const w = x((t, h) => {
|
|
5
5
|
const {
|
|
6
|
-
value:
|
|
7
|
-
options:
|
|
8
|
-
placeholder:
|
|
9
|
-
isSearchable:
|
|
10
|
-
isClearable:
|
|
11
|
-
stopEditing:
|
|
12
|
-
} = t, r =
|
|
6
|
+
value: l,
|
|
7
|
+
options: C = [],
|
|
8
|
+
placeholder: m = "Select...",
|
|
9
|
+
isSearchable: v = !0,
|
|
10
|
+
isClearable: b = !0,
|
|
11
|
+
stopEditing: o
|
|
12
|
+
} = t, n = l && typeof l == "object" && "value" in l, r = n ? l.cellMetadata : void 0, i = n ? l.value : l, c = C.map((e) => ({
|
|
13
13
|
value: e.value,
|
|
14
14
|
label: e.label,
|
|
15
15
|
isDisabled: e.isDisabled
|
|
16
|
-
})), [
|
|
17
|
-
|
|
18
|
-
),
|
|
19
|
-
|
|
16
|
+
})), [s, d] = E(
|
|
17
|
+
i != null ? String(i) : null
|
|
18
|
+
), f = N(!1);
|
|
19
|
+
O(h, () => ({
|
|
20
20
|
getValue() {
|
|
21
|
-
return
|
|
21
|
+
return n ? {
|
|
22
|
+
value: s,
|
|
23
|
+
...r !== void 0 && { cellMetadata: r }
|
|
24
|
+
} : s;
|
|
22
25
|
},
|
|
23
26
|
isCancelBeforeStart() {
|
|
24
27
|
return !1;
|
|
@@ -30,27 +33,27 @@ const N = v((t, f) => {
|
|
|
30
33
|
return !0;
|
|
31
34
|
}
|
|
32
35
|
}));
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
}, [
|
|
36
|
+
const S = c.find((e) => e.value === s) ?? null, a = u(() => {
|
|
37
|
+
f.current || (f.current = !0, o());
|
|
38
|
+
}, [o]), M = u(
|
|
36
39
|
(e) => {
|
|
37
|
-
const
|
|
38
|
-
|
|
40
|
+
const p = e ? e.value : null;
|
|
41
|
+
d(p), t.onValueChange?.(p), a();
|
|
39
42
|
},
|
|
40
|
-
[
|
|
41
|
-
),
|
|
42
|
-
|
|
43
|
-
}, [
|
|
44
|
-
return /* @__PURE__ */
|
|
45
|
-
|
|
43
|
+
[a, d, t.onValueChange]
|
|
44
|
+
), V = u(() => {
|
|
45
|
+
a();
|
|
46
|
+
}, [a]);
|
|
47
|
+
return /* @__PURE__ */ g("div", { className: "w-full h-full flex items-center ag-cell-inner-padding ag-editable-cell-highlight", children: /* @__PURE__ */ g(
|
|
48
|
+
j,
|
|
46
49
|
{
|
|
47
|
-
options:
|
|
48
|
-
value:
|
|
49
|
-
onChange:
|
|
50
|
-
onMenuClose:
|
|
51
|
-
placeholder:
|
|
52
|
-
isSearchable:
|
|
53
|
-
isClearable:
|
|
50
|
+
options: c,
|
|
51
|
+
value: S,
|
|
52
|
+
onChange: M,
|
|
53
|
+
onMenuClose: V,
|
|
54
|
+
placeholder: m,
|
|
55
|
+
isSearchable: v,
|
|
56
|
+
isClearable: b,
|
|
54
57
|
isMulti: !1,
|
|
55
58
|
defaultMenuIsOpen: !0,
|
|
56
59
|
className: "!border-none !shadow-none !ring-0 !h-7 !rounded-[8px] !px-1.5",
|
|
@@ -58,7 +61,7 @@ const N = v((t, f) => {
|
|
|
58
61
|
}
|
|
59
62
|
) });
|
|
60
63
|
});
|
|
61
|
-
|
|
64
|
+
w.displayName = "SelectCellEditor";
|
|
62
65
|
export {
|
|
63
|
-
|
|
66
|
+
w as SelectCellEditor
|
|
64
67
|
};
|
|
@@ -10,6 +10,8 @@ import { CheckboxDisplayRenderer } from './checkbox-display-renderer';
|
|
|
10
10
|
import { SwitchDisplayRenderer } from './switch-display-renderer';
|
|
11
11
|
import { TextAreaDisplayRenderer } from './textarea-display-renderer';
|
|
12
12
|
import { DateDisplayRenderer } from './date-display-renderer';
|
|
13
|
+
import { PercentProgressDisplayRenderer } from './percent-progress-display-renderer';
|
|
14
|
+
import { PercentProgressCellEditor } from './editors/percent-progress-cell-editor';
|
|
13
15
|
import { SelectCellEditor } from './editors/select-cell-editor';
|
|
14
16
|
import { TextAreaCellEditor } from './editors/textarea-cell-editor';
|
|
15
17
|
import { DateCellEditor } from './editors/date-cell-editor';
|
|
@@ -20,7 +22,7 @@ export declare const AG_CELL_NO_PADDING = "ag-cell-no-padding";
|
|
|
20
22
|
export declare const AG_CELL_FULL_CONTROL = "ag-cell-renderer-full-control";
|
|
21
23
|
/** Design-system inner padding (6px) for custom cell renderer wrappers */
|
|
22
24
|
export declare const AG_CELL_INNER_PADDING = "ag-cell-inner-padding";
|
|
23
|
-
export { EmptyCellRenderer, BadgeCellRenderer, StatusBadgeRenderer, ActionsCellRenderer, LinkCellRenderer, SplitCellRenderer, InputDisplayRenderer, SelectDisplayRenderer, CheckboxDisplayRenderer, SwitchDisplayRenderer, TextAreaDisplayRenderer, DateDisplayRenderer, SelectCellEditor, TextAreaCellEditor, DateCellEditor, SplitCellEditor, };
|
|
25
|
+
export { EmptyCellRenderer, BadgeCellRenderer, StatusBadgeRenderer, ActionsCellRenderer, LinkCellRenderer, SplitCellRenderer, InputDisplayRenderer, SelectDisplayRenderer, CheckboxDisplayRenderer, SwitchDisplayRenderer, TextAreaDisplayRenderer, DateDisplayRenderer, PercentProgressDisplayRenderer, SelectCellEditor, TextAreaCellEditor, DateCellEditor, SplitCellEditor, PercentProgressCellEditor, };
|
|
24
26
|
export type { BadgeCellRendererProps } from './badge-cell-renderer';
|
|
25
27
|
export type { StatusBadgeRendererProps } from './status-badge-renderer';
|
|
26
28
|
export type { ActionsCellRendererProps } from './actions-cell-renderer';
|
|
@@ -28,6 +30,8 @@ export type { InputDisplayRendererProps } from './input-display-renderer';
|
|
|
28
30
|
export type { SelectDisplayRendererProps } from './select-display-renderer';
|
|
29
31
|
export type { SplitCellRendererProps } from './split-cell-renderer';
|
|
30
32
|
export type { InputCellEditorProps } from './editors/input-cell-editor';
|
|
33
|
+
export type { PercentProgressDisplayRendererProps } from './percent-progress-display-renderer';
|
|
34
|
+
export type { PercentProgressCellEditorProps } from './editors/percent-progress-cell-editor';
|
|
31
35
|
export type { SelectCellEditorProps } from './editors/select-cell-editor';
|
|
32
36
|
export type { SplitCellEditorProps } from './editors/split-cell-editor';
|
|
33
37
|
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';
|
|
@@ -82,11 +86,20 @@ export declare const AG_GRID_CELL_COMPONENTS: {
|
|
|
82
86
|
(props: import('./date-display-renderer').DateDisplayRendererProps): import("react/jsx-runtime").JSX.Element;
|
|
83
87
|
displayName: string;
|
|
84
88
|
};
|
|
89
|
+
percentProgressDisplay: {
|
|
90
|
+
(props: import('./percent-progress-display-renderer').PercentProgressDisplayRendererProps): import("react/jsx-runtime").JSX.Element;
|
|
91
|
+
displayName: string;
|
|
92
|
+
};
|
|
85
93
|
inputEditor: import('react').NamedExoticComponent<import('.').InputCellEditorProps & import('react').RefAttributes<any>>;
|
|
86
94
|
selectEditor: import('react').ForwardRefExoticComponent<import('.').SelectCellEditorProps & import('react').RefAttributes<unknown>>;
|
|
87
95
|
textareaEditor: import('react').ForwardRefExoticComponent<import('./editors/textarea-cell-editor').TextAreaCellEditorProps & import('react').RefAttributes<unknown>>;
|
|
88
96
|
dateEditor: import('react').ForwardRefExoticComponent<import('./editors/date-cell-editor').DateCellEditorProps & import('react').RefAttributes<unknown>>;
|
|
89
97
|
splitEditor: import('react').ForwardRefExoticComponent<import('.').SplitCellEditorProps & import('react').RefAttributes<unknown>>;
|
|
98
|
+
percentProgressEditor: import('react').NamedExoticComponent<import('.').PercentProgressCellEditorProps & import('react').RefAttributes<{
|
|
99
|
+
getValue: () => unknown;
|
|
100
|
+
isCancelBeforeStart: () => boolean;
|
|
101
|
+
isCancelAfterEnd: () => boolean;
|
|
102
|
+
}>>;
|
|
90
103
|
};
|
|
91
104
|
/** String keys accepted by AG_GRID_CELL_COMPONENTS */
|
|
92
105
|
export type AgGridCellComponentKey = keyof typeof AG_GRID_CELL_COMPONENTS;
|