@mediaradar/design-components 0.14.0 → 0.16.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.
- package/dist/index.cjs +614 -488
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +141 -22
- package/dist/index.d.ts +141 -22
- package/dist/index.js +586 -461
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -35,6 +35,7 @@ __export(index_exports, {
|
|
|
35
35
|
DataScopeFilter: () => DataScopeFilter,
|
|
36
36
|
DateRangeFilter: () => DateRangeFilter,
|
|
37
37
|
DateRangePicker: () => DateRangePicker,
|
|
38
|
+
Delta: () => Delta,
|
|
38
39
|
FilterChipBar: () => FilterChipBar,
|
|
39
40
|
FilterDropdownFooter: () => FilterDropdownFooter,
|
|
40
41
|
Freshness: () => Freshness,
|
|
@@ -554,9 +555,33 @@ function Badge({ tone = "neutral", kind = "label", dot = false, children, classN
|
|
|
554
555
|
);
|
|
555
556
|
}
|
|
556
557
|
|
|
557
|
-
// src/
|
|
558
|
+
// src/Delta.tsx
|
|
558
559
|
var import_lucide_react4 = require("lucide-react");
|
|
559
560
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
561
|
+
function Delta({ value, suffix = "%", arrow = false, period, className }) {
|
|
562
|
+
const up = value >= 0;
|
|
563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
564
|
+
"span",
|
|
565
|
+
{
|
|
566
|
+
className: cn(
|
|
567
|
+
"inline-flex items-center gap-0.5 font-medium tabular-nums",
|
|
568
|
+
up ? "text-text-success" : "text-text-danger",
|
|
569
|
+
className
|
|
570
|
+
),
|
|
571
|
+
children: [
|
|
572
|
+
arrow && (up ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ArrowUpRight, { size: 13, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ArrowDownRight, { size: 13, "aria-hidden": "true" })),
|
|
573
|
+
up ? "+" : "\u2212",
|
|
574
|
+
Math.abs(value).toFixed(1),
|
|
575
|
+
suffix,
|
|
576
|
+
period && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-0.5", children: period })
|
|
577
|
+
]
|
|
578
|
+
}
|
|
579
|
+
);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
// src/CheckBox.tsx
|
|
583
|
+
var import_lucide_react5 = require("lucide-react");
|
|
584
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
560
585
|
function boxClass(on, disabled) {
|
|
561
586
|
return cn(
|
|
562
587
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
@@ -565,8 +590,8 @@ function boxClass(on, disabled) {
|
|
|
565
590
|
);
|
|
566
591
|
}
|
|
567
592
|
function Glyph({ checked, indeterminate }) {
|
|
568
|
-
if (indeterminate) return /* @__PURE__ */ (0,
|
|
569
|
-
return checked ? /* @__PURE__ */ (0,
|
|
593
|
+
if (indeterminate) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Minus, { size: 13, strokeWidth: 3 });
|
|
594
|
+
return checked ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Check, { size: 13, strokeWidth: 3 }) : null;
|
|
570
595
|
}
|
|
571
596
|
function CheckBox({
|
|
572
597
|
checked,
|
|
@@ -580,7 +605,7 @@ function CheckBox({
|
|
|
580
605
|
className
|
|
581
606
|
}) {
|
|
582
607
|
const on = checked || !!indeterminate;
|
|
583
|
-
return /* @__PURE__ */ (0,
|
|
608
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
584
609
|
"button",
|
|
585
610
|
{
|
|
586
611
|
type: "button",
|
|
@@ -604,18 +629,18 @@ function CheckBox({
|
|
|
604
629
|
disabled && "hover:border-border-interactive",
|
|
605
630
|
className
|
|
606
631
|
),
|
|
607
|
-
children: /* @__PURE__ */ (0,
|
|
632
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Glyph, { checked, indeterminate })
|
|
608
633
|
}
|
|
609
634
|
);
|
|
610
635
|
}
|
|
611
636
|
function CheckBoxBox({ checked, indeterminate, disabled, className }) {
|
|
612
|
-
return /* @__PURE__ */ (0,
|
|
637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Glyph, { checked, indeterminate }) });
|
|
613
638
|
}
|
|
614
639
|
|
|
615
640
|
// src/DateRangeFilter.tsx
|
|
616
641
|
var import_react3 = require("react");
|
|
617
|
-
var
|
|
618
|
-
var
|
|
642
|
+
var import_lucide_react6 = require("lucide-react");
|
|
643
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
619
644
|
var DEFAULT_SHORTCUTS = [
|
|
620
645
|
"Year to date",
|
|
621
646
|
"Rolling 3 months",
|
|
@@ -821,8 +846,8 @@ function DateRangeFilter({
|
|
|
821
846
|
onRangeChange?.(s, e);
|
|
822
847
|
setOpen(false);
|
|
823
848
|
};
|
|
824
|
-
return /* @__PURE__ */ (0,
|
|
825
|
-
/* @__PURE__ */ (0,
|
|
849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", ref, children: [
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
826
851
|
"button",
|
|
827
852
|
{
|
|
828
853
|
type: "button",
|
|
@@ -831,16 +856,16 @@ function DateRangeFilter({
|
|
|
831
856
|
"aria-expanded": open,
|
|
832
857
|
className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
833
858
|
children: [
|
|
834
|
-
icon && /* @__PURE__ */ (0,
|
|
835
|
-
/* @__PURE__ */ (0,
|
|
836
|
-
/* @__PURE__ */ (0,
|
|
837
|
-
/* @__PURE__ */ (0,
|
|
859
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
860
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
861
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
|
|
862
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
|
|
838
863
|
] }),
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
864
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronDown, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
|
|
840
865
|
]
|
|
841
866
|
}
|
|
842
867
|
),
|
|
843
|
-
open && /* @__PURE__ */ (0,
|
|
868
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
844
869
|
"div",
|
|
845
870
|
{
|
|
846
871
|
"data-testid": testIdPrefix && `${testIdPrefix}-popover`,
|
|
@@ -848,7 +873,7 @@ function DateRangeFilter({
|
|
|
848
873
|
role: "dialog",
|
|
849
874
|
"aria-label": "Select date range",
|
|
850
875
|
children: [
|
|
851
|
-
/* @__PURE__ */ (0,
|
|
876
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-44 shrink-0 flex-col gap-0.5 border-r border-border-default p-2", children: SHORTCUTS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
852
877
|
"button",
|
|
853
878
|
{
|
|
854
879
|
type: "button",
|
|
@@ -859,28 +884,28 @@ function DateRangeFilter({
|
|
|
859
884
|
},
|
|
860
885
|
s
|
|
861
886
|
)) }),
|
|
862
|
-
/* @__PURE__ */ (0,
|
|
863
|
-
/* @__PURE__ */ (0,
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
865
|
-
/* @__PURE__ */ (0,
|
|
866
|
-
/* @__PURE__ */ (0,
|
|
887
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-4", children: [
|
|
888
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-end gap-3", children: [
|
|
889
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { label: "Start Date", value: start ? fmt(start) : "\u2014" }),
|
|
890
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pb-2.5 text-text-tertiary", children: "\u2014" }),
|
|
891
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { label: "End Date", value: end ? fmt(end) : start ? fmt(start) : "\u2014" })
|
|
867
892
|
] }),
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
869
|
-
/* @__PURE__ */ (0,
|
|
893
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "my-4 border-t border-border-default" }),
|
|
894
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-8", children: [0, 1].map((offset) => {
|
|
870
895
|
const m = addMonths(leftMonth, offset);
|
|
871
896
|
const grid = monthGrid(m.getFullYear(), m.getMonth());
|
|
872
|
-
return /* @__PURE__ */ (0,
|
|
873
|
-
/* @__PURE__ */ (0,
|
|
874
|
-
offset === 0 ? /* @__PURE__ */ (0,
|
|
875
|
-
/* @__PURE__ */ (0,
|
|
897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-[252px]", children: [
|
|
898
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
899
|
+
offset === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronLeft, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-7 w-7" }),
|
|
900
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-[15px] font-semibold text-text-primary", children: [
|
|
876
901
|
MONTHS[m.getMonth()],
|
|
877
902
|
" ",
|
|
878
903
|
m.getFullYear()
|
|
879
904
|
] }),
|
|
880
|
-
offset === 1 ? /* @__PURE__ */ (0,
|
|
905
|
+
offset === 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, 1)), "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronRight, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-7 w-7" })
|
|
881
906
|
] }),
|
|
882
|
-
/* @__PURE__ */ (0,
|
|
883
|
-
WEEKDAYS.map((w) => /* @__PURE__ */ (0,
|
|
907
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-cols-7", children: [
|
|
908
|
+
WEEKDAYS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-8 items-center justify-center text-[12px] font-semibold text-text-secondary", children: w }, w)),
|
|
884
909
|
grid.map((d, i) => {
|
|
885
910
|
const inMonth = d.getMonth() === m.getMonth();
|
|
886
911
|
const hasRange = !!(start && end);
|
|
@@ -895,9 +920,9 @@ function DateRangeFilter({
|
|
|
895
920
|
else if (end && isEnd) band = "left-0 right-1/2";
|
|
896
921
|
else band = "left-0 right-0";
|
|
897
922
|
}
|
|
898
|
-
return /* @__PURE__ */ (0,
|
|
899
|
-
band && /* @__PURE__ */ (0,
|
|
900
|
-
/* @__PURE__ */ (0,
|
|
923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick: () => pickDay(d), className: "relative flex h-9 items-center justify-center", children: [
|
|
924
|
+
band && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `absolute inset-y-[3px] bg-ai-tint ${band}`, "aria-hidden": "true" }),
|
|
925
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
901
926
|
"span",
|
|
902
927
|
{
|
|
903
928
|
className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
|
|
@@ -909,9 +934,9 @@ function DateRangeFilter({
|
|
|
909
934
|
] })
|
|
910
935
|
] }, offset);
|
|
911
936
|
}) }),
|
|
912
|
-
/* @__PURE__ */ (0,
|
|
913
|
-
/* @__PURE__ */ (0,
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-4 flex justify-end gap-2", children: [
|
|
938
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
|
|
939
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
|
|
915
940
|
] })
|
|
916
941
|
] })
|
|
917
942
|
]
|
|
@@ -920,19 +945,19 @@ function DateRangeFilter({
|
|
|
920
945
|
] });
|
|
921
946
|
}
|
|
922
947
|
function Field({ label, value }) {
|
|
923
|
-
return /* @__PURE__ */ (0,
|
|
924
|
-
/* @__PURE__ */ (0,
|
|
925
|
-
/* @__PURE__ */ (0,
|
|
948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
|
|
949
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
|
|
950
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-default bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
|
|
926
951
|
] });
|
|
927
952
|
}
|
|
928
953
|
function NavBtn({ children, onClick, ...rest }) {
|
|
929
|
-
return /* @__PURE__ */ (0,
|
|
954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick, className: "flex h-7 w-7 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary", ...rest, children });
|
|
930
955
|
}
|
|
931
956
|
|
|
932
957
|
// src/SearchBar.tsx
|
|
933
958
|
var import_react4 = require("react");
|
|
934
|
-
var
|
|
935
|
-
var
|
|
959
|
+
var import_lucide_react7 = require("lucide-react");
|
|
960
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
936
961
|
var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
|
|
937
962
|
var MODE_LABEL = {
|
|
938
963
|
anyWord: "Any Word",
|
|
@@ -969,7 +994,7 @@ function SearchBar({
|
|
|
969
994
|
};
|
|
970
995
|
}, [open]);
|
|
971
996
|
const showMatch = variant === "filterable" && matchValue;
|
|
972
|
-
return /* @__PURE__ */ (0,
|
|
997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
973
998
|
"div",
|
|
974
999
|
{
|
|
975
1000
|
className: cx2(
|
|
@@ -977,9 +1002,9 @@ function SearchBar({
|
|
|
977
1002
|
className
|
|
978
1003
|
),
|
|
979
1004
|
children: [
|
|
980
|
-
/* @__PURE__ */ (0,
|
|
981
|
-
/* @__PURE__ */ (0,
|
|
982
|
-
/* @__PURE__ */ (0,
|
|
1005
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex min-w-0 flex-1 items-center gap-2 px-2.5", children: [
|
|
1006
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.Search, { size: 15, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
1007
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
983
1008
|
"input",
|
|
984
1009
|
{
|
|
985
1010
|
type: "text",
|
|
@@ -1003,8 +1028,8 @@ function SearchBar({
|
|
|
1003
1028
|
// token package (insights-studio-prototype's own src/index.css;
|
|
1004
1029
|
// mr-clientapps' own tailwind.config.ts `colors.border.DEFAULT`) --
|
|
1005
1030
|
// an alias this shared component can't rely on existing.
|
|
1006
|
-
/* @__PURE__ */ (0,
|
|
1007
|
-
/* @__PURE__ */ (0,
|
|
1031
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative shrink-0 border-l border-border-default", ref, children: [
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1008
1033
|
"button",
|
|
1009
1034
|
{
|
|
1010
1035
|
type: "button",
|
|
@@ -1015,8 +1040,8 @@ function SearchBar({
|
|
|
1015
1040
|
className: "flex h-full items-center gap-1 px-2.5 text-[13px] font-medium text-text-primary transition-colors hover:bg-subtle",
|
|
1016
1041
|
children: [
|
|
1017
1042
|
matchValue.mode === "anyWord" ? `${MODE_LABEL.anyWord} (${matchValue.wordJoin})` : MODE_LABEL[matchValue.mode],
|
|
1018
|
-
/* @__PURE__ */ (0,
|
|
1019
|
-
|
|
1043
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1044
|
+
import_lucide_react7.ChevronDown,
|
|
1020
1045
|
{
|
|
1021
1046
|
size: 14,
|
|
1022
1047
|
"aria-hidden": "true",
|
|
@@ -1026,25 +1051,25 @@ function SearchBar({
|
|
|
1026
1051
|
]
|
|
1027
1052
|
}
|
|
1028
1053
|
),
|
|
1029
|
-
open && /* @__PURE__ */ (0,
|
|
1054
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1030
1055
|
"div",
|
|
1031
1056
|
{
|
|
1032
1057
|
role: "dialog",
|
|
1033
1058
|
"aria-label": "Search match type",
|
|
1034
1059
|
"data-testid": testIdPrefix && `${testIdPrefix}-mode-popover`,
|
|
1035
1060
|
className: "absolute right-0 top-[calc(100%+8px)] z-50 w-[400px] rounded-card border border-border-default bg-surface p-3 shadow-overlay",
|
|
1036
|
-
children: /* @__PURE__ */ (0,
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1061
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "radiogroup", "aria-label": "Search match type", className: "flex flex-col", children: [
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1038
1063
|
ModeRow,
|
|
1039
1064
|
{
|
|
1040
1065
|
title: "Any Word Text Search",
|
|
1041
1066
|
selected: matchValue.mode === "anyWord",
|
|
1042
1067
|
onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: matchValue.wordJoin }),
|
|
1043
1068
|
testId: testIdPrefix && `${testIdPrefix}-mode-anyWord`,
|
|
1044
|
-
description: /* @__PURE__ */ (0,
|
|
1069
|
+
description: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: "Find creatives that contain your keyword(s) using an \u201COr\u201D (match any) or \u201CAnd\u201D (match all) conditional in any order." }),
|
|
1045
1070
|
infoText: "The Or/And choice applies only when Any Word is the active search mode.",
|
|
1046
|
-
extra: /* @__PURE__ */ (0,
|
|
1047
|
-
/* @__PURE__ */ (0,
|
|
1071
|
+
extra: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-3", children: [
|
|
1072
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1048
1073
|
RadioOption,
|
|
1049
1074
|
{
|
|
1050
1075
|
label: "Or",
|
|
@@ -1053,7 +1078,7 @@ function SearchBar({
|
|
|
1053
1078
|
testId: testIdPrefix && `${testIdPrefix}-word-join-or`
|
|
1054
1079
|
}
|
|
1055
1080
|
),
|
|
1056
|
-
/* @__PURE__ */ (0,
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1057
1082
|
RadioOption,
|
|
1058
1083
|
{
|
|
1059
1084
|
label: "And",
|
|
@@ -1065,8 +1090,8 @@ function SearchBar({
|
|
|
1065
1090
|
] })
|
|
1066
1091
|
}
|
|
1067
1092
|
),
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1093
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, {}),
|
|
1094
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1070
1095
|
ModeRow,
|
|
1071
1096
|
{
|
|
1072
1097
|
title: "Exact Match Text Search",
|
|
@@ -1077,8 +1102,8 @@ function SearchBar({
|
|
|
1077
1102
|
infoText: "Keywords are matched as a single contiguous phrase, in the order you typed them."
|
|
1078
1103
|
}
|
|
1079
1104
|
),
|
|
1080
|
-
/* @__PURE__ */ (0,
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1105
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, {}),
|
|
1106
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1082
1107
|
ModeRow,
|
|
1083
1108
|
{
|
|
1084
1109
|
title: "Contextual Search",
|
|
@@ -1090,8 +1115,8 @@ function SearchBar({
|
|
|
1090
1115
|
infoText: "Uses semantic matching, so results can include related terms even when the exact keyword isn't present."
|
|
1091
1116
|
}
|
|
1092
1117
|
),
|
|
1093
|
-
/* @__PURE__ */ (0,
|
|
1094
|
-
/* @__PURE__ */ (0,
|
|
1118
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, {}),
|
|
1119
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1095
1120
|
ModeRow,
|
|
1096
1121
|
{
|
|
1097
1122
|
title: "Ad Code Search",
|
|
@@ -1111,7 +1136,7 @@ function SearchBar({
|
|
|
1111
1136
|
);
|
|
1112
1137
|
}
|
|
1113
1138
|
function Divider() {
|
|
1114
|
-
return /* @__PURE__ */ (0,
|
|
1139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "my-2.5 border-t border-border-default", "aria-hidden": "true" });
|
|
1115
1140
|
}
|
|
1116
1141
|
function ModeRow({
|
|
1117
1142
|
title,
|
|
@@ -1123,7 +1148,7 @@ function ModeRow({
|
|
|
1123
1148
|
onSelect,
|
|
1124
1149
|
testId
|
|
1125
1150
|
}) {
|
|
1126
|
-
return /* @__PURE__ */ (0,
|
|
1151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1127
1152
|
"div",
|
|
1128
1153
|
{
|
|
1129
1154
|
role: "radio",
|
|
@@ -1139,18 +1164,18 @@ function ModeRow({
|
|
|
1139
1164
|
},
|
|
1140
1165
|
className: "flex cursor-pointer flex-col items-stretch gap-1 rounded-control p-1.5 text-left transition-colors hover:bg-subtle focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
1141
1166
|
children: [
|
|
1142
|
-
/* @__PURE__ */ (0,
|
|
1143
|
-
/* @__PURE__ */ (0,
|
|
1144
|
-
/* @__PURE__ */ (0,
|
|
1145
|
-
/* @__PURE__ */ (0,
|
|
1146
|
-
/* @__PURE__ */ (0,
|
|
1167
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
1168
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
1169
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-1", children: [
|
|
1170
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
|
|
1171
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RowInfoTip, { text: infoText })
|
|
1147
1172
|
] }),
|
|
1148
|
-
badge && /* @__PURE__ */ (0,
|
|
1173
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
|
|
1149
1174
|
extra
|
|
1150
1175
|
] }),
|
|
1151
|
-
selected && /* @__PURE__ */ (0,
|
|
1176
|
+
selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
|
|
1152
1177
|
] }),
|
|
1153
|
-
/* @__PURE__ */ (0,
|
|
1178
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "block text-[12.5px] leading-snug text-text-secondary", children: description })
|
|
1154
1179
|
]
|
|
1155
1180
|
}
|
|
1156
1181
|
);
|
|
@@ -1161,7 +1186,7 @@ function RadioOption({
|
|
|
1161
1186
|
onSelect,
|
|
1162
1187
|
testId
|
|
1163
1188
|
}) {
|
|
1164
|
-
return /* @__PURE__ */ (0,
|
|
1189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1165
1190
|
"button",
|
|
1166
1191
|
{
|
|
1167
1192
|
type: "button",
|
|
@@ -1174,14 +1199,14 @@ function RadioOption({
|
|
|
1174
1199
|
"aria-checked": checked,
|
|
1175
1200
|
className: "flex items-center gap-1.5 text-[13px] font-medium text-text-primary",
|
|
1176
1201
|
children: [
|
|
1177
|
-
/* @__PURE__ */ (0,
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1178
1203
|
"span",
|
|
1179
1204
|
{
|
|
1180
1205
|
className: cx2(
|
|
1181
1206
|
"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
|
|
1182
1207
|
checked ? "border-brand-primaryAction" : "border-border-interactive"
|
|
1183
1208
|
),
|
|
1184
|
-
children: checked && /* @__PURE__ */ (0,
|
|
1209
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-2 w-2 rounded-full bg-brand-primaryAction" })
|
|
1185
1210
|
}
|
|
1186
1211
|
),
|
|
1187
1212
|
label
|
|
@@ -1200,8 +1225,8 @@ function RowInfoTip({ text }) {
|
|
|
1200
1225
|
window.addEventListener("mousedown", onDown);
|
|
1201
1226
|
return () => window.removeEventListener("mousedown", onDown);
|
|
1202
1227
|
}, [open]);
|
|
1203
|
-
return /* @__PURE__ */ (0,
|
|
1204
|
-
/* @__PURE__ */ (0,
|
|
1228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "relative inline-flex shrink-0 items-center", ref, children: [
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1205
1230
|
"button",
|
|
1206
1231
|
{
|
|
1207
1232
|
type: "button",
|
|
@@ -1212,10 +1237,10 @@ function RowInfoTip({ text }) {
|
|
|
1212
1237
|
"aria-label": "More information",
|
|
1213
1238
|
"aria-expanded": open,
|
|
1214
1239
|
className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
|
|
1215
|
-
children: /* @__PURE__ */ (0,
|
|
1240
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.AlertCircle, { size: 13, "aria-hidden": "true" })
|
|
1216
1241
|
}
|
|
1217
1242
|
),
|
|
1218
|
-
open && /* @__PURE__ */ (0,
|
|
1243
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1219
1244
|
"span",
|
|
1220
1245
|
{
|
|
1221
1246
|
role: "tooltip",
|
|
@@ -1228,8 +1253,8 @@ function RowInfoTip({ text }) {
|
|
|
1228
1253
|
|
|
1229
1254
|
// src/SectionRail.tsx
|
|
1230
1255
|
var import_react5 = require("react");
|
|
1231
|
-
var
|
|
1232
|
-
var
|
|
1256
|
+
var import_lucide_react8 = require("lucide-react");
|
|
1257
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1233
1258
|
function SectionRail({
|
|
1234
1259
|
title,
|
|
1235
1260
|
titleSerif,
|
|
@@ -1242,20 +1267,20 @@ function SectionRail({
|
|
|
1242
1267
|
const scroll = (direction) => {
|
|
1243
1268
|
scrollRef.current?.scrollBy({ left: direction * 320, behavior: "smooth" });
|
|
1244
1269
|
};
|
|
1245
|
-
return /* @__PURE__ */ (0,
|
|
1246
|
-
/* @__PURE__ */ (0,
|
|
1247
|
-
/* @__PURE__ */ (0,
|
|
1248
|
-
/* @__PURE__ */ (0,
|
|
1270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "flex flex-col gap-4", children: [
|
|
1271
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
|
|
1272
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1249
1274
|
"h2",
|
|
1250
1275
|
{
|
|
1251
1276
|
className: titleSerif ? "font-serif text-2xl font-normal tracking-tight text-text-primary sm:text-[28px]" : "text-xl font-medium tracking-tight text-text-primary sm:text-2xl",
|
|
1252
1277
|
children: title
|
|
1253
1278
|
}
|
|
1254
1279
|
),
|
|
1255
|
-
/* @__PURE__ */ (0,
|
|
1280
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-sm text-text-secondary", children: subtitle })
|
|
1256
1281
|
] }),
|
|
1257
|
-
/* @__PURE__ */ (0,
|
|
1258
|
-
viewAllLabel && viewAllHref && /* @__PURE__ */ (0,
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1283
|
+
viewAllLabel && viewAllHref && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1259
1284
|
"a",
|
|
1260
1285
|
{
|
|
1261
1286
|
href: viewAllHref,
|
|
@@ -1266,29 +1291,29 @@ function SectionRail({
|
|
|
1266
1291
|
]
|
|
1267
1292
|
}
|
|
1268
1293
|
),
|
|
1269
|
-
/* @__PURE__ */ (0,
|
|
1294
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1270
1295
|
"button",
|
|
1271
1296
|
{
|
|
1272
1297
|
type: "button",
|
|
1273
1298
|
onClick: () => scroll(-1),
|
|
1274
1299
|
"aria-label": "Previous",
|
|
1275
1300
|
className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
|
|
1276
|
-
children: /* @__PURE__ */ (0,
|
|
1301
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react8.ChevronLeft, { size: 16 })
|
|
1277
1302
|
}
|
|
1278
1303
|
),
|
|
1279
|
-
/* @__PURE__ */ (0,
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1280
1305
|
"button",
|
|
1281
1306
|
{
|
|
1282
1307
|
type: "button",
|
|
1283
1308
|
onClick: () => scroll(1),
|
|
1284
1309
|
"aria-label": "Next",
|
|
1285
1310
|
className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
|
|
1286
|
-
children: /* @__PURE__ */ (0,
|
|
1311
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react8.ChevronRight, { size: 16 })
|
|
1287
1312
|
}
|
|
1288
1313
|
)
|
|
1289
1314
|
] })
|
|
1290
1315
|
] }),
|
|
1291
|
-
/* @__PURE__ */ (0,
|
|
1316
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1292
1317
|
"div",
|
|
1293
1318
|
{
|
|
1294
1319
|
ref: scrollRef,
|
|
@@ -1301,8 +1326,8 @@ function SectionRail({
|
|
|
1301
1326
|
|
|
1302
1327
|
// src/DataScopeFilter.tsx
|
|
1303
1328
|
var import_react6 = require("react");
|
|
1304
|
-
var
|
|
1305
|
-
var
|
|
1329
|
+
var import_lucide_react9 = require("lucide-react");
|
|
1330
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1306
1331
|
var FINAL_ONLY_TEXT = "Trims time periods to data that has finalized across the selected media formats. Some formats (e.g. Network TV and Cinema) finalize later, so the most recent periods may still change. Turn on for stable, report-ready numbers.";
|
|
1307
1332
|
function cx3(...classes) {
|
|
1308
1333
|
return classes.filter(Boolean).join(" ");
|
|
@@ -1328,8 +1353,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1328
1353
|
onChange(v);
|
|
1329
1354
|
setOpen(false);
|
|
1330
1355
|
};
|
|
1331
|
-
return /* @__PURE__ */ (0,
|
|
1332
|
-
/* @__PURE__ */ (0,
|
|
1356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative", ref, children: [
|
|
1357
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1333
1358
|
"button",
|
|
1334
1359
|
{
|
|
1335
1360
|
type: "button",
|
|
@@ -1338,12 +1363,12 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1338
1363
|
"aria-haspopup": "listbox",
|
|
1339
1364
|
className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
1340
1365
|
children: [
|
|
1341
|
-
/* @__PURE__ */ (0,
|
|
1342
|
-
/* @__PURE__ */ (0,
|
|
1343
|
-
/* @__PURE__ */ (0,
|
|
1366
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1367
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: display })
|
|
1344
1369
|
] }),
|
|
1345
|
-
/* @__PURE__ */ (0,
|
|
1346
|
-
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1371
|
+
import_lucide_react9.ChevronDown,
|
|
1347
1372
|
{
|
|
1348
1373
|
size: 14,
|
|
1349
1374
|
"aria-hidden": "true",
|
|
@@ -1353,7 +1378,7 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1353
1378
|
]
|
|
1354
1379
|
}
|
|
1355
1380
|
),
|
|
1356
|
-
open && /* @__PURE__ */ (0,
|
|
1381
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1357
1382
|
"div",
|
|
1358
1383
|
{
|
|
1359
1384
|
role: "listbox",
|
|
@@ -1363,8 +1388,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1363
1388
|
align === "right" ? "right-0" : "left-0"
|
|
1364
1389
|
),
|
|
1365
1390
|
children: [
|
|
1366
|
-
/* @__PURE__ */ (0,
|
|
1367
|
-
/* @__PURE__ */ (0,
|
|
1391
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Option, { label: "All", selected: !value, onClick: () => choose(false) }),
|
|
1392
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Option, { label: "Final only", selected: value, onClick: () => choose(true), hint: FINAL_ONLY_TEXT })
|
|
1368
1393
|
]
|
|
1369
1394
|
}
|
|
1370
1395
|
)
|
|
@@ -1376,7 +1401,7 @@ function Option({
|
|
|
1376
1401
|
onClick,
|
|
1377
1402
|
hint
|
|
1378
1403
|
}) {
|
|
1379
|
-
const option = /* @__PURE__ */ (0,
|
|
1404
|
+
const option = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1380
1405
|
"button",
|
|
1381
1406
|
{
|
|
1382
1407
|
type: "button",
|
|
@@ -1389,23 +1414,23 @@ function Option({
|
|
|
1389
1414
|
selected ? "font-semibold text-text-primary" : "text-text-secondary"
|
|
1390
1415
|
),
|
|
1391
1416
|
children: [
|
|
1392
|
-
/* @__PURE__ */ (0,
|
|
1417
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react9.Check, { size: 14, "aria-hidden": "true", className: cx3("shrink-0 text-brand-primaryAction", !selected && "invisible") }),
|
|
1393
1418
|
label
|
|
1394
1419
|
]
|
|
1395
1420
|
}
|
|
1396
1421
|
);
|
|
1397
1422
|
if (!hint) return option;
|
|
1398
|
-
return /* @__PURE__ */ (0,
|
|
1423
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center pr-2.5", children: [
|
|
1399
1424
|
option,
|
|
1400
|
-
/* @__PURE__ */ (0,
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoTip, { text: hint, trigger: "hover", label: `About ${label}` })
|
|
1401
1426
|
] });
|
|
1402
1427
|
}
|
|
1403
1428
|
|
|
1404
1429
|
// src/SelectFilter.tsx
|
|
1405
1430
|
var import_react7 = require("react");
|
|
1406
1431
|
var import_react_dom2 = require("react-dom");
|
|
1407
|
-
var
|
|
1408
|
-
var
|
|
1432
|
+
var import_lucide_react10 = require("lucide-react");
|
|
1433
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1409
1434
|
function cx4(...classes) {
|
|
1410
1435
|
return classes.filter(Boolean).join(" ");
|
|
1411
1436
|
}
|
|
@@ -1455,8 +1480,8 @@ function SelectFilter({
|
|
|
1455
1480
|
window.removeEventListener("scroll", reposition, true);
|
|
1456
1481
|
};
|
|
1457
1482
|
}, [open, close, reposition]);
|
|
1458
|
-
return /* @__PURE__ */ (0,
|
|
1459
|
-
/* @__PURE__ */ (0,
|
|
1483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx4("relative", fullWidth && "w-full"), ref, children: [
|
|
1484
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1460
1485
|
"button",
|
|
1461
1486
|
{
|
|
1462
1487
|
type: "button",
|
|
@@ -1470,12 +1495,12 @@ function SelectFilter({
|
|
|
1470
1495
|
className
|
|
1471
1496
|
),
|
|
1472
1497
|
children: [
|
|
1473
|
-
/* @__PURE__ */ (0,
|
|
1474
|
-
/* @__PURE__ */ (0,
|
|
1475
|
-
/* @__PURE__ */ (0,
|
|
1498
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1499
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
1476
1501
|
] }),
|
|
1477
|
-
/* @__PURE__ */ (0,
|
|
1478
|
-
|
|
1502
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1503
|
+
import_lucide_react10.ChevronDown,
|
|
1479
1504
|
{
|
|
1480
1505
|
size: 14,
|
|
1481
1506
|
"aria-hidden": "true",
|
|
@@ -1486,7 +1511,7 @@ function SelectFilter({
|
|
|
1486
1511
|
}
|
|
1487
1512
|
),
|
|
1488
1513
|
open && pos && (0, import_react_dom2.createPortal)(
|
|
1489
|
-
/* @__PURE__ */ (0,
|
|
1514
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1490
1515
|
"div",
|
|
1491
1516
|
{
|
|
1492
1517
|
ref: popoverRef,
|
|
@@ -1498,9 +1523,9 @@ function SelectFilter({
|
|
|
1498
1523
|
),
|
|
1499
1524
|
role: "listbox",
|
|
1500
1525
|
"aria-label": caption,
|
|
1501
|
-
children: /* @__PURE__ */ (0,
|
|
1526
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: options.map((o) => {
|
|
1502
1527
|
const selected = o === value;
|
|
1503
|
-
return /* @__PURE__ */ (0,
|
|
1528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1504
1529
|
"button",
|
|
1505
1530
|
{
|
|
1506
1531
|
type: "button",
|
|
@@ -1513,8 +1538,8 @@ function SelectFilter({
|
|
|
1513
1538
|
},
|
|
1514
1539
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
1515
1540
|
children: [
|
|
1516
|
-
/* @__PURE__ */ (0,
|
|
1517
|
-
/* @__PURE__ */ (0,
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-brand-primaryAction", children: selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react10.Check, { size: 15, strokeWidth: 3 }) }),
|
|
1542
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1518
1543
|
"span",
|
|
1519
1544
|
{
|
|
1520
1545
|
className: cx4("flex-1 text-[14px]", selected ? "font-semibold text-text-primary" : "text-text-primary"),
|
|
@@ -1535,9 +1560,9 @@ function SelectFilter({
|
|
|
1535
1560
|
|
|
1536
1561
|
// src/Card.tsx
|
|
1537
1562
|
var import_react8 = require("react");
|
|
1538
|
-
var
|
|
1563
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1539
1564
|
var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
|
|
1540
|
-
return /* @__PURE__ */ (0,
|
|
1565
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1541
1566
|
"article",
|
|
1542
1567
|
{
|
|
1543
1568
|
ref,
|
|
@@ -1548,23 +1573,23 @@ var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, sub
|
|
|
1548
1573
|
className
|
|
1549
1574
|
].filter(Boolean).join(" "),
|
|
1550
1575
|
...rest,
|
|
1551
|
-
children: title ? /* @__PURE__ */ (0,
|
|
1552
|
-
/* @__PURE__ */ (0,
|
|
1553
|
-
/* @__PURE__ */ (0,
|
|
1554
|
-
/* @__PURE__ */ (0,
|
|
1555
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1576
|
+
children: title ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 flex-col p-card-padding", children: [
|
|
1577
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
|
|
1578
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
1579
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
|
|
1580
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
|
|
1556
1581
|
] }),
|
|
1557
|
-
action && /* @__PURE__ */ (0,
|
|
1582
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0 text-text-tertiary", children: action })
|
|
1558
1583
|
] }),
|
|
1559
|
-
/* @__PURE__ */ (0,
|
|
1584
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-4 flex flex-1 flex-col", children })
|
|
1560
1585
|
] }) : children
|
|
1561
1586
|
}
|
|
1562
1587
|
);
|
|
1563
1588
|
});
|
|
1564
1589
|
|
|
1565
1590
|
// src/NoResultsEmptyState.tsx
|
|
1566
|
-
var
|
|
1567
|
-
var
|
|
1591
|
+
var import_lucide_react11 = require("lucide-react");
|
|
1592
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1568
1593
|
var NO_RESULTS_TITLE = "No results match your filters";
|
|
1569
1594
|
var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other, or have no activity in this period.";
|
|
1570
1595
|
function noResultsBody(workspaceName) {
|
|
@@ -1586,12 +1611,12 @@ function NoResultsEmptyState({
|
|
|
1586
1611
|
const showClear = hasFilters !== false && Boolean(onClearFilters);
|
|
1587
1612
|
const showEdit = Boolean(onEditFilters);
|
|
1588
1613
|
const hasActions = showClear || showEdit || Boolean(actions && actions.length > 0);
|
|
1589
|
-
return /* @__PURE__ */ (0,
|
|
1590
|
-
/* @__PURE__ */ (0,
|
|
1591
|
-
/* @__PURE__ */ (0,
|
|
1592
|
-
/* @__PURE__ */ (0,
|
|
1593
|
-
hasActions && /* @__PURE__ */ (0,
|
|
1594
|
-
showClear && /* @__PURE__ */ (0,
|
|
1614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-center justify-center gap-3 text-center", "data-testid": testIdPrefix, children: [
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react11.FilterX, { size: 20, "aria-hidden": "true" }) }),
|
|
1616
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-base font-semibold text-text-primary", children: title }),
|
|
1617
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "max-w-[420px] text-[13px] leading-relaxed text-text-secondary", children: bodyText }),
|
|
1618
|
+
hasActions && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-1 flex flex-col items-center gap-3", children: [
|
|
1619
|
+
showClear && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1595
1620
|
"button",
|
|
1596
1621
|
{
|
|
1597
1622
|
type: "button",
|
|
@@ -1601,7 +1626,7 @@ function NoResultsEmptyState({
|
|
|
1601
1626
|
children: "Clear all filters"
|
|
1602
1627
|
}
|
|
1603
1628
|
),
|
|
1604
|
-
showEdit && /* @__PURE__ */ (0,
|
|
1629
|
+
showEdit && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1605
1630
|
"button",
|
|
1606
1631
|
{
|
|
1607
1632
|
type: "button",
|
|
@@ -1611,7 +1636,7 @@ function NoResultsEmptyState({
|
|
|
1611
1636
|
children: "Edit filters"
|
|
1612
1637
|
}
|
|
1613
1638
|
),
|
|
1614
|
-
actions?.map((action, i) => /* @__PURE__ */ (0,
|
|
1639
|
+
actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1615
1640
|
"button",
|
|
1616
1641
|
{
|
|
1617
1642
|
type: "button",
|
|
@@ -1627,13 +1652,13 @@ function NoResultsEmptyState({
|
|
|
1627
1652
|
|
|
1628
1653
|
// src/WorkspaceSelectedCard.tsx
|
|
1629
1654
|
var import_react9 = require("react");
|
|
1630
|
-
var
|
|
1631
|
-
var
|
|
1655
|
+
var import_lucide_react12 = require("lucide-react");
|
|
1656
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1632
1657
|
function cx5(...parts) {
|
|
1633
1658
|
return parts.filter(Boolean).join(" ");
|
|
1634
1659
|
}
|
|
1635
1660
|
function WorkspaceSelectedCard({ groups, testIdPrefix }) {
|
|
1636
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("aside", { className: "sticky top-4 flex min-w-0 flex-col gap-4 self-start rounded-card border border-border-default bg-surface px-5 pb-5 pt-4 shadow-raised sm:px-6 sm:pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col divide-y divide-border-default", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
|
|
1637
1662
|
}
|
|
1638
1663
|
function SummaryGroupItem({
|
|
1639
1664
|
group,
|
|
@@ -1650,8 +1675,8 @@ function SummaryGroupItem({
|
|
|
1650
1675
|
else if (expandCount === 0) setOpen(false);
|
|
1651
1676
|
wasEmpty.current = expandCount === 0;
|
|
1652
1677
|
}, [expandCount]);
|
|
1653
|
-
return /* @__PURE__ */ (0,
|
|
1654
|
-
/* @__PURE__ */ (0,
|
|
1678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: nested ? "" : "py-3 first:pt-0 last:pb-0", children: [
|
|
1679
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1655
1680
|
"button",
|
|
1656
1681
|
{
|
|
1657
1682
|
type: "button",
|
|
@@ -1660,45 +1685,45 @@ function SummaryGroupItem({
|
|
|
1660
1685
|
"data-testid": testIdPrefix && `${testIdPrefix}-group-${group.id}`,
|
|
1661
1686
|
className: "flex w-full min-w-0 items-center gap-2 text-left",
|
|
1662
1687
|
children: [
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1664
|
-
|
|
1688
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1689
|
+
import_lucide_react12.ChevronDown,
|
|
1665
1690
|
{
|
|
1666
1691
|
size: 14,
|
|
1667
1692
|
"aria-hidden": "true",
|
|
1668
1693
|
className: cx5("shrink-0 text-text-secondary transition-transform", !open && "-rotate-90")
|
|
1669
1694
|
}
|
|
1670
1695
|
),
|
|
1671
|
-
/* @__PURE__ */ (0,
|
|
1672
|
-
/* @__PURE__ */ (0,
|
|
1696
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx5("truncate font-semibold text-text-primary", nested ? "text-[12px]" : "text-[13px]"), children: group.label }),
|
|
1697
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "shrink-0 rounded-full bg-subtle px-1.5 py-0.5 text-[11px] font-semibold text-text-secondary", children: ownCount })
|
|
1673
1698
|
]
|
|
1674
1699
|
}
|
|
1675
1700
|
),
|
|
1676
|
-
open && /* @__PURE__ */ (0,
|
|
1677
|
-
ownCount > 0 && /* @__PURE__ */ (0,
|
|
1678
|
-
group.items.map((item) => /* @__PURE__ */ (0,
|
|
1701
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pt-2.5", children: ownCount === 0 && subCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-[12px] text-text-secondary", children: "Nothing selected." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
|
|
1702
|
+
ownCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
|
|
1703
|
+
group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1679
1704
|
"div",
|
|
1680
1705
|
{
|
|
1681
1706
|
className: "flex items-center justify-between gap-2 rounded-control border border-border-default bg-canvas px-2 py-1",
|
|
1682
1707
|
children: [
|
|
1683
|
-
/* @__PURE__ */ (0,
|
|
1684
|
-
/* @__PURE__ */ (0,
|
|
1685
|
-
item.meta && /* @__PURE__ */ (0,
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0 flex-1", children: [
|
|
1709
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),
|
|
1710
|
+
item.meta && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-[11px] text-text-secondary", children: item.meta })
|
|
1686
1711
|
] }),
|
|
1687
|
-
/* @__PURE__ */ (0,
|
|
1712
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1688
1713
|
"button",
|
|
1689
1714
|
{
|
|
1690
1715
|
type: "button",
|
|
1691
1716
|
"aria-label": `Remove ${item.name}`,
|
|
1692
1717
|
onClick: () => group.onRemove(item.id),
|
|
1693
1718
|
className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
1694
|
-
children: /* @__PURE__ */ (0,
|
|
1719
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react12.X, { size: 12, "aria-hidden": "true" })
|
|
1695
1720
|
}
|
|
1696
1721
|
)
|
|
1697
1722
|
]
|
|
1698
1723
|
},
|
|
1699
1724
|
item.id
|
|
1700
1725
|
)),
|
|
1701
|
-
/* @__PURE__ */ (0,
|
|
1726
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1702
1727
|
"button",
|
|
1703
1728
|
{
|
|
1704
1729
|
type: "button",
|
|
@@ -1709,13 +1734,13 @@ function SummaryGroupItem({
|
|
|
1709
1734
|
}
|
|
1710
1735
|
)
|
|
1711
1736
|
] }),
|
|
1712
|
-
group.subGroups?.map((sg) => /* @__PURE__ */ (0,
|
|
1737
|
+
group.subGroups?.map((sg) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SummaryGroupItem, { group: sg, nested: true, testIdPrefix }, sg.id))
|
|
1713
1738
|
] }) })
|
|
1714
1739
|
] });
|
|
1715
1740
|
}
|
|
1716
1741
|
|
|
1717
1742
|
// src/chart-placeholder-shared.tsx
|
|
1718
|
-
var
|
|
1743
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1719
1744
|
var GRID_ROWS = [0, 25, 50, 75, 100];
|
|
1720
1745
|
var Y_TICK_WIDTHS = [26, 30, 30, 26, 20];
|
|
1721
1746
|
var Y_AXIS_W = 48;
|
|
@@ -1727,9 +1752,9 @@ function AxisFrame({
|
|
|
1727
1752
|
children
|
|
1728
1753
|
}) {
|
|
1729
1754
|
const gutter = xTicks > 0 ? X_AXIS_H : 0;
|
|
1730
|
-
return /* @__PURE__ */ (0,
|
|
1731
|
-
/* @__PURE__ */ (0,
|
|
1732
|
-
GRID_ROWS.map((pct) => /* @__PURE__ */ (0,
|
|
1755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full", style: { height }, role: "presentation", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative h-full w-full", children: [
|
|
1756
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "absolute inset-y-0 right-0", style: { left: Y_AXIS_W, bottom: gutter }, children: [
|
|
1757
|
+
GRID_ROWS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1733
1758
|
"div",
|
|
1734
1759
|
{
|
|
1735
1760
|
className: "absolute inset-x-0 border-t border-dashed",
|
|
@@ -1737,9 +1762,9 @@ function AxisFrame({
|
|
|
1737
1762
|
},
|
|
1738
1763
|
pct
|
|
1739
1764
|
)),
|
|
1740
|
-
/* @__PURE__ */ (0,
|
|
1765
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute inset-0", children })
|
|
1741
1766
|
] }),
|
|
1742
|
-
/* @__PURE__ */ (0,
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute left-0 top-0", style: { width: Y_AXIS_W, bottom: gutter }, children: GRID_ROWS.map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1743
1768
|
"div",
|
|
1744
1769
|
{
|
|
1745
1770
|
className: "absolute right-2 h-2 -translate-y-1/2 rounded-xs bg-subtle",
|
|
@@ -1747,27 +1772,27 @@ function AxisFrame({
|
|
|
1747
1772
|
},
|
|
1748
1773
|
pct
|
|
1749
1774
|
)) }),
|
|
1750
|
-
xTicks > 0 && /* @__PURE__ */ (0,
|
|
1775
|
+
xTicks > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1751
1776
|
"div",
|
|
1752
1777
|
{
|
|
1753
1778
|
className: "absolute bottom-0 right-0 flex items-center",
|
|
1754
1779
|
style: { left: Y_AXIS_W, height: X_AXIS_H },
|
|
1755
|
-
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ (0,
|
|
1780
|
+
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-2 w-full max-w-[26px] rounded-xs bg-subtle" }) }, i))
|
|
1756
1781
|
}
|
|
1757
1782
|
)
|
|
1758
1783
|
] }) });
|
|
1759
1784
|
}
|
|
1760
1785
|
function BlankLegend({ rows, reverse = false }) {
|
|
1761
|
-
return /* @__PURE__ */ (0,
|
|
1786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1762
1787
|
"ul",
|
|
1763
1788
|
{
|
|
1764
1789
|
className: `flex flex-1 justify-center gap-1.5 ${reverse ? "flex-col-reverse" : "flex-col"}`,
|
|
1765
1790
|
role: "presentation",
|
|
1766
1791
|
"aria-hidden": "true",
|
|
1767
|
-
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0,
|
|
1768
|
-
/* @__PURE__ */ (0,
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1770
|
-
/* @__PURE__ */ (0,
|
|
1792
|
+
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "flex items-center justify-between gap-2", children: [
|
|
1793
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex items-center gap-1.5", children: [
|
|
1794
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "h-2.5 w-2.5 rounded-xs bg-subtle" }),
|
|
1795
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1771
1796
|
"span",
|
|
1772
1797
|
{
|
|
1773
1798
|
className: "h-2 rounded-xs bg-subtle",
|
|
@@ -1775,21 +1800,21 @@ function BlankLegend({ rows, reverse = false }) {
|
|
|
1775
1800
|
}
|
|
1776
1801
|
)
|
|
1777
1802
|
] }),
|
|
1778
|
-
/* @__PURE__ */ (0,
|
|
1803
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "h-2 w-6 rounded-xs bg-subtle" })
|
|
1779
1804
|
] }, i))
|
|
1780
1805
|
}
|
|
1781
1806
|
);
|
|
1782
1807
|
}
|
|
1783
1808
|
|
|
1784
1809
|
// src/BarChartPlaceholder.tsx
|
|
1785
|
-
var
|
|
1810
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1786
1811
|
var BAR_PROFILE = [92, 86, 76, 65, 57, 40, 30, 24, 18, 13];
|
|
1787
1812
|
function BarChartPlaceholder({ height = 220 }) {
|
|
1788
|
-
return /* @__PURE__ */ (0,
|
|
1813
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AxisFrame, { height, xTicks: BAR_PROFILE.length, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex h-full w-full items-end gap-2", children: BAR_PROFILE.map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 rounded-t-[3px] bg-subtle", style: { height: `${pct}%` } }, i)) }) });
|
|
1789
1814
|
}
|
|
1790
1815
|
|
|
1791
1816
|
// src/LineChartPlaceholder.tsx
|
|
1792
|
-
var
|
|
1817
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1793
1818
|
var LINE_SERIES = [
|
|
1794
1819
|
[58, 52, 55, 41, 45, 33, 36, 25, 28, 17],
|
|
1795
1820
|
[74, 71, 66, 68, 59, 61, 54, 56, 48, 45],
|
|
@@ -1799,9 +1824,9 @@ var LINE_SERIES = [
|
|
|
1799
1824
|
var LINE_FORECAST_FROM = 7;
|
|
1800
1825
|
function LineChartPlaceholder({ height = 280 }) {
|
|
1801
1826
|
const toPath = (pts, from, to) => pts.slice(from, to).map((y, i) => `${(i + from) / (pts.length - 1) * 100},${y}`).join(" ");
|
|
1802
|
-
return /* @__PURE__ */ (0,
|
|
1803
|
-
/* @__PURE__ */ (0,
|
|
1804
|
-
/* @__PURE__ */ (0,
|
|
1827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(AxisFrame, { height, xTicks: LINE_SERIES[0].length, children: [
|
|
1828
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 h-full w-full", children: LINE_SERIES.map((pts, s) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { children: [
|
|
1829
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1805
1830
|
"polyline",
|
|
1806
1831
|
{
|
|
1807
1832
|
points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
|
|
@@ -1813,7 +1838,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1813
1838
|
strokeLinejoin: "round"
|
|
1814
1839
|
}
|
|
1815
1840
|
),
|
|
1816
|
-
/* @__PURE__ */ (0,
|
|
1841
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1817
1842
|
"polyline",
|
|
1818
1843
|
{
|
|
1819
1844
|
points: toPath(pts, LINE_FORECAST_FROM, pts.length),
|
|
@@ -1828,7 +1853,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1828
1853
|
)
|
|
1829
1854
|
] }, s)) }),
|
|
1830
1855
|
LINE_SERIES.map(
|
|
1831
|
-
(pts, s) => pts.map((y, i) => /* @__PURE__ */ (0,
|
|
1856
|
+
(pts, s) => pts.map((y, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1832
1857
|
"div",
|
|
1833
1858
|
{
|
|
1834
1859
|
className: "absolute h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
|
|
@@ -1845,16 +1870,16 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1845
1870
|
}
|
|
1846
1871
|
|
|
1847
1872
|
// src/PieChartPlaceholder.tsx
|
|
1848
|
-
var
|
|
1873
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1849
1874
|
var PIE_SEAMS = [0, 115, 180, 230, 262, 288, 310, 332];
|
|
1850
1875
|
function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
1851
1876
|
const r = 45;
|
|
1852
|
-
return /* @__PURE__ */ (0,
|
|
1853
|
-
/* @__PURE__ */ (0,
|
|
1854
|
-
/* @__PURE__ */ (0,
|
|
1877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
|
|
1879
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "50", cy: "50", r, fill: "var(--mr-color-subtle)" }),
|
|
1855
1880
|
PIE_SEAMS.map((deg) => {
|
|
1856
1881
|
const rad = (deg - 90) * Math.PI / 180;
|
|
1857
|
-
return /* @__PURE__ */ (0,
|
|
1882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1858
1883
|
"line",
|
|
1859
1884
|
{
|
|
1860
1885
|
x1: "50",
|
|
@@ -1868,12 +1893,12 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
|
1868
1893
|
);
|
|
1869
1894
|
})
|
|
1870
1895
|
] }) }),
|
|
1871
|
-
/* @__PURE__ */ (0,
|
|
1896
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlankLegend, { rows: legendRows })
|
|
1872
1897
|
] });
|
|
1873
1898
|
}
|
|
1874
1899
|
|
|
1875
1900
|
// src/StackedColumnPlaceholder.tsx
|
|
1876
|
-
var
|
|
1901
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1877
1902
|
var COLUMN_WEIGHTS = [20, 30, 15, 35, 24, 12, 28, 18];
|
|
1878
1903
|
function columnBands(count) {
|
|
1879
1904
|
const weights = Array.from({ length: count }, (_, i) => COLUMN_WEIGHTS[i % COLUMN_WEIGHTS.length]);
|
|
@@ -1886,7 +1911,7 @@ function StackedColumnPlaceholder({
|
|
|
1886
1911
|
legendRows = 4,
|
|
1887
1912
|
axis = false
|
|
1888
1913
|
}) {
|
|
1889
|
-
const column = /* @__PURE__ */ (0,
|
|
1914
|
+
const column = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex h-full flex-col overflow-hidden rounded-control bg-subtle", style: { width }, children: columnBands(legendRows).map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1890
1915
|
"div",
|
|
1891
1916
|
{
|
|
1892
1917
|
style: {
|
|
@@ -1898,19 +1923,32 @@ function StackedColumnPlaceholder({
|
|
|
1898
1923
|
},
|
|
1899
1924
|
i
|
|
1900
1925
|
)) });
|
|
1901
|
-
return /* @__PURE__ */ (0,
|
|
1902
|
-
axis ? /* @__PURE__ */ (0,
|
|
1903
|
-
/* @__PURE__ */ (0,
|
|
1926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full gap-4", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1927
|
+
axis ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { width: "55%" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AxisFrame, { height, xTicks: 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex h-full items-stretch justify-center", children: column }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-stretch py-1", children: column }),
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BlankLegend, { rows: legendRows, reverse: !axis })
|
|
1904
1929
|
] });
|
|
1905
1930
|
}
|
|
1906
1931
|
|
|
1907
1932
|
// src/Tooltip.tsx
|
|
1908
1933
|
var import_react10 = require("react");
|
|
1909
1934
|
var import_react_dom3 = require("react-dom");
|
|
1910
|
-
var
|
|
1935
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1911
1936
|
function cx6(...parts) {
|
|
1912
1937
|
return parts.filter(Boolean).join(" ");
|
|
1913
1938
|
}
|
|
1939
|
+
function exitDurationMs(el) {
|
|
1940
|
+
if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return 0;
|
|
1941
|
+
const cs = window.getComputedStyle(el);
|
|
1942
|
+
if (cs.transitionProperty === "none") return 0;
|
|
1943
|
+
const toMs = (v) => {
|
|
1944
|
+
const n = parseFloat(v);
|
|
1945
|
+
if (!Number.isFinite(n)) return 0;
|
|
1946
|
+
return v.trim().endsWith("ms") ? n : n * 1e3;
|
|
1947
|
+
};
|
|
1948
|
+
const durations = cs.transitionDuration.split(",").map(toMs);
|
|
1949
|
+
const delays = cs.transitionDelay.split(",").map(toMs);
|
|
1950
|
+
return Math.max(0, ...durations.map((d, i) => d + (delays[i] ?? delays[0] ?? 0)));
|
|
1951
|
+
}
|
|
1914
1952
|
function Tooltip({
|
|
1915
1953
|
label,
|
|
1916
1954
|
children,
|
|
@@ -1930,6 +1968,10 @@ function Tooltip({
|
|
|
1930
1968
|
const boxRef = (0, import_react10.useRef)(null);
|
|
1931
1969
|
const hideTimer = (0, import_react10.useRef)(null);
|
|
1932
1970
|
const showTimer = (0, import_react10.useRef)(null);
|
|
1971
|
+
const exitTimer = (0, import_react10.useRef)(null);
|
|
1972
|
+
const [shown, setShown] = (0, import_react10.useState)(false);
|
|
1973
|
+
const openRef = (0, import_react10.useRef)(false);
|
|
1974
|
+
const mountedRef = (0, import_react10.useRef)(false);
|
|
1933
1975
|
const id = (0, import_react10.useId)();
|
|
1934
1976
|
const clearHideTimer = () => {
|
|
1935
1977
|
if (hideTimer.current) {
|
|
@@ -1943,10 +1985,17 @@ function Tooltip({
|
|
|
1943
1985
|
showTimer.current = null;
|
|
1944
1986
|
}
|
|
1945
1987
|
};
|
|
1988
|
+
const clearExitTimer = () => {
|
|
1989
|
+
if (exitTimer.current) {
|
|
1990
|
+
clearTimeout(exitTimer.current);
|
|
1991
|
+
exitTimer.current = null;
|
|
1992
|
+
}
|
|
1993
|
+
};
|
|
1946
1994
|
(0, import_react10.useEffect)(
|
|
1947
1995
|
() => () => {
|
|
1948
1996
|
clearHideTimer();
|
|
1949
1997
|
clearShowTimer();
|
|
1998
|
+
clearExitTimer();
|
|
1950
1999
|
},
|
|
1951
2000
|
[]
|
|
1952
2001
|
);
|
|
@@ -1954,26 +2003,56 @@ function Tooltip({
|
|
|
1954
2003
|
const el = anchorRef ? anchorRef.current : ref.current;
|
|
1955
2004
|
if (!el) return;
|
|
1956
2005
|
if (whenTruncated && el.scrollWidth <= el.clientWidth) return;
|
|
2006
|
+
clearExitTimer();
|
|
2007
|
+
openRef.current = true;
|
|
1957
2008
|
const r = el.getBoundingClientRect();
|
|
1958
|
-
setBoxWidth(null);
|
|
2009
|
+
if (!mountedRef.current) setBoxWidth(null);
|
|
2010
|
+
mountedRef.current = true;
|
|
1959
2011
|
setAnchor({ top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom, right: r.right });
|
|
1960
2012
|
if (anchorRef) el.setAttribute("aria-describedby", id);
|
|
1961
2013
|
};
|
|
1962
2014
|
const show = () => {
|
|
1963
2015
|
clearHideTimer();
|
|
1964
|
-
|
|
2016
|
+
clearShowTimer();
|
|
2017
|
+
if (delay > 0 && !mountedRef.current) {
|
|
1965
2018
|
showTimer.current = setTimeout(reveal, delay);
|
|
1966
2019
|
} else {
|
|
1967
2020
|
reveal();
|
|
1968
2021
|
}
|
|
1969
2022
|
};
|
|
1970
|
-
const
|
|
1971
|
-
|
|
1972
|
-
|
|
2023
|
+
const unmount = () => {
|
|
2024
|
+
clearExitTimer();
|
|
2025
|
+
if (openRef.current || !mountedRef.current) return;
|
|
2026
|
+
mountedRef.current = false;
|
|
1973
2027
|
setAnchor(null);
|
|
1974
2028
|
setBoxWidth(null);
|
|
1975
2029
|
if (anchorRef?.current) anchorRef.current.removeAttribute("aria-describedby");
|
|
1976
2030
|
};
|
|
2031
|
+
const hideNow = () => {
|
|
2032
|
+
clearShowTimer();
|
|
2033
|
+
clearHideTimer();
|
|
2034
|
+
openRef.current = false;
|
|
2035
|
+
if (!mountedRef.current) return;
|
|
2036
|
+
setShown(false);
|
|
2037
|
+
clearExitTimer();
|
|
2038
|
+
const ms = boxRef.current ? exitDurationMs(boxRef.current) : 0;
|
|
2039
|
+
if (ms === 0) {
|
|
2040
|
+
unmount();
|
|
2041
|
+
return;
|
|
2042
|
+
}
|
|
2043
|
+
exitTimer.current = setTimeout(unmount, ms + 50);
|
|
2044
|
+
};
|
|
2045
|
+
const keepOpen = () => {
|
|
2046
|
+
clearHideTimer();
|
|
2047
|
+
if (openRef.current || !mountedRef.current) return;
|
|
2048
|
+
clearExitTimer();
|
|
2049
|
+
openRef.current = true;
|
|
2050
|
+
setShown(true);
|
|
2051
|
+
};
|
|
2052
|
+
const onBoxTransitionEnd = (e) => {
|
|
2053
|
+
if (e.target !== e.currentTarget || e.propertyName !== "opacity") return;
|
|
2054
|
+
if (!openRef.current) unmount();
|
|
2055
|
+
};
|
|
1977
2056
|
const hide = () => {
|
|
1978
2057
|
clearShowTimer();
|
|
1979
2058
|
if (!interactive) {
|
|
@@ -2003,6 +2082,7 @@ function Tooltip({
|
|
|
2003
2082
|
const el = boxRef.current;
|
|
2004
2083
|
if (!el) return;
|
|
2005
2084
|
setBoxWidth(el.getBoundingClientRect().width);
|
|
2085
|
+
if (openRef.current) setShown(true);
|
|
2006
2086
|
}, [anchor, label]);
|
|
2007
2087
|
const margin = 8;
|
|
2008
2088
|
let style = { top: 0, left: 0 };
|
|
@@ -2022,7 +2102,7 @@ function Tooltip({
|
|
|
2022
2102
|
}
|
|
2023
2103
|
}
|
|
2024
2104
|
const floating = anchor != null && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(
|
|
2025
|
-
/* @__PURE__ */ (0,
|
|
2105
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2026
2106
|
"span",
|
|
2027
2107
|
{
|
|
2028
2108
|
ref: boxRef,
|
|
@@ -2030,10 +2110,19 @@ function Tooltip({
|
|
|
2030
2110
|
id,
|
|
2031
2111
|
"data-testid": testIdPrefix && `${testIdPrefix}-tooltip`,
|
|
2032
2112
|
style: { top: style.top, left: style.left, right: style.right, visibility: boxWidth == null ? "hidden" : "visible" },
|
|
2033
|
-
onMouseEnter: interactive ?
|
|
2113
|
+
onMouseEnter: interactive ? keepOpen : void 0,
|
|
2034
2114
|
onMouseLeave: interactive ? hide : void 0,
|
|
2115
|
+
onTransitionEnd: onBoxTransitionEnd,
|
|
2035
2116
|
className: cx6(
|
|
2036
2117
|
"fixed z-[90] w-max max-w-xs whitespace-normal break-words px-2.5 py-1.5 text-xs leading-snug",
|
|
2118
|
+
// Fade in/out. The sys duration token rather than a ref one:
|
|
2119
|
+
// it is what Button's hover/press transition uses, and a
|
|
2120
|
+
// tooltip's fade is the same kind of interactive feedback.
|
|
2121
|
+
// design-tokens has no in-out curve (ease-interactive is the
|
|
2122
|
+
// decelerating "standard" curve), so ease-in-out is Tailwind's.
|
|
2123
|
+
"transition-opacity duration-(--mr-motion-duration-interactive) ease-in-out motion-reduce:transition-none",
|
|
2124
|
+
shown ? "opacity-100" : "opacity-0",
|
|
2125
|
+
// Non-interactive: never a pointer target, fade-out included.
|
|
2037
2126
|
interactive ? "pointer-events-auto" : "pointer-events-none",
|
|
2038
2127
|
variant === "inverted" ? "rounded-control bg-text-primary text-surface" : "rounded-control border border-border-default bg-surface text-text-primary shadow-overlay",
|
|
2039
2128
|
translate
|
|
@@ -2044,7 +2133,7 @@ function Tooltip({
|
|
|
2044
2133
|
document.body
|
|
2045
2134
|
) : null;
|
|
2046
2135
|
if (anchorRef) return floating;
|
|
2047
|
-
return /* @__PURE__ */ (0,
|
|
2136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2048
2137
|
"span",
|
|
2049
2138
|
{
|
|
2050
2139
|
ref,
|
|
@@ -2063,26 +2152,26 @@ function Tooltip({
|
|
|
2063
2152
|
}
|
|
2064
2153
|
|
|
2065
2154
|
// src/AdvertiserNoResults.tsx
|
|
2066
|
-
var
|
|
2155
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2067
2156
|
function AdvertiserNoResults({
|
|
2068
2157
|
query,
|
|
2069
2158
|
hint = "Try checking your spelling or searching for a broader brand name."
|
|
2070
2159
|
}) {
|
|
2071
|
-
return /* @__PURE__ */ (0,
|
|
2072
|
-
/* @__PURE__ */ (0,
|
|
2160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
|
|
2161
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-[13px] font-medium text-text-primary", children: [
|
|
2073
2162
|
"No results found for \u201C",
|
|
2074
2163
|
query,
|
|
2075
2164
|
"\u201D"
|
|
2076
2165
|
] }),
|
|
2077
|
-
/* @__PURE__ */ (0,
|
|
2166
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[12px] leading-snug text-text-tertiary", children: hint })
|
|
2078
2167
|
] });
|
|
2079
2168
|
}
|
|
2080
2169
|
|
|
2081
2170
|
// src/SelectAllVisible.tsx
|
|
2082
|
-
var
|
|
2083
|
-
var
|
|
2171
|
+
var import_lucide_react13 = require("lucide-react");
|
|
2172
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2084
2173
|
function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
2085
|
-
return /* @__PURE__ */ (0,
|
|
2174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2086
2175
|
"button",
|
|
2087
2176
|
{
|
|
2088
2177
|
type: "button",
|
|
@@ -2090,7 +2179,7 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2090
2179
|
onClick: onToggle,
|
|
2091
2180
|
className: "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-[12px] font-semibold text-text-link transition-colors hover:bg-subtle",
|
|
2092
2181
|
children: [
|
|
2093
|
-
/* @__PURE__ */ (0,
|
|
2182
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react13.ListChecks, { size: 14, "aria-hidden": "true" }),
|
|
2094
2183
|
allSelected ? `Deselect ${count} visible` : `Select all ${count} visible`
|
|
2095
2184
|
]
|
|
2096
2185
|
}
|
|
@@ -2098,15 +2187,15 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2098
2187
|
}
|
|
2099
2188
|
|
|
2100
2189
|
// src/SelectedSection.tsx
|
|
2101
|
-
var
|
|
2102
|
-
var
|
|
2190
|
+
var import_lucide_react14 = require("lucide-react");
|
|
2191
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2103
2192
|
function cx7(...parts) {
|
|
2104
2193
|
return parts.filter(Boolean).join(" ");
|
|
2105
2194
|
}
|
|
2106
2195
|
function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
2107
2196
|
if (count === 0) return null;
|
|
2108
|
-
return /* @__PURE__ */ (0,
|
|
2109
|
-
/* @__PURE__ */ (0,
|
|
2197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col", children: [
|
|
2198
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2110
2199
|
"button",
|
|
2111
2200
|
{
|
|
2112
2201
|
type: "button",
|
|
@@ -2115,22 +2204,22 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
2115
2204
|
"aria-expanded": open,
|
|
2116
2205
|
className: "flex w-full items-center gap-1.5 rounded-control px-2 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-text-tertiary transition-colors hover:text-text-primary",
|
|
2117
2206
|
children: [
|
|
2118
|
-
/* @__PURE__ */ (0,
|
|
2207
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.ChevronDown, { size: 13, "aria-hidden": "true", className: cx7("transition-transform", !open && "-rotate-90") }),
|
|
2119
2208
|
"Selected (",
|
|
2120
2209
|
count,
|
|
2121
2210
|
")"
|
|
2122
2211
|
]
|
|
2123
2212
|
}
|
|
2124
2213
|
),
|
|
2125
|
-
open && /* @__PURE__ */ (0,
|
|
2214
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col gap-0.5", children })
|
|
2126
2215
|
] });
|
|
2127
2216
|
}
|
|
2128
2217
|
|
|
2129
2218
|
// src/SelectionPicker.tsx
|
|
2130
2219
|
var import_react11 = require("react");
|
|
2131
2220
|
var import_react_dom4 = require("react-dom");
|
|
2132
|
-
var
|
|
2133
|
-
var
|
|
2221
|
+
var import_lucide_react15 = require("lucide-react");
|
|
2222
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2134
2223
|
function cx8(...parts) {
|
|
2135
2224
|
return parts.filter(Boolean).join(" ");
|
|
2136
2225
|
}
|
|
@@ -2225,17 +2314,17 @@ function SelectionPicker({
|
|
|
2225
2314
|
}
|
|
2226
2315
|
};
|
|
2227
2316
|
const rowGridCols = showInfoColumn ? "grid-cols-[36px_1fr_44px]" : "grid-cols-[36px_1fr]";
|
|
2228
|
-
return /* @__PURE__ */ (0,
|
|
2229
|
-
helper && /* @__PURE__ */ (0,
|
|
2230
|
-
/* @__PURE__ */ (0,
|
|
2231
|
-
/* @__PURE__ */ (0,
|
|
2317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-4", children: [
|
|
2318
|
+
helper && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
2319
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-secondary", children: helper }),
|
|
2320
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("hr", { className: "-mx-5 -mt-2 border-border-default sm:-mx-6" })
|
|
2232
2321
|
] }),
|
|
2233
|
-
hasAccountLists && /* @__PURE__ */ (0,
|
|
2234
|
-
{ id: "search", label: "Search", icon:
|
|
2235
|
-
{ id: "lists", label: "Account lists", icon:
|
|
2322
|
+
hasAccountLists && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "inline-flex gap-0.5 self-start rounded-control border border-border-default bg-canvas p-0.5", children: [
|
|
2323
|
+
{ id: "search", label: "Search", icon: import_lucide_react15.Search },
|
|
2324
|
+
{ id: "lists", label: "Account lists", icon: import_lucide_react15.List }
|
|
2236
2325
|
].map((t) => {
|
|
2237
2326
|
const on = source === t.id;
|
|
2238
|
-
return /* @__PURE__ */ (0,
|
|
2327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2239
2328
|
"button",
|
|
2240
2329
|
{
|
|
2241
2330
|
type: "button",
|
|
@@ -2246,18 +2335,18 @@ function SelectionPicker({
|
|
|
2246
2335
|
on ? "bg-surface text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
|
|
2247
2336
|
),
|
|
2248
2337
|
children: [
|
|
2249
|
-
/* @__PURE__ */ (0,
|
|
2338
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(t.icon, { size: 14, "aria-hidden": "true" }),
|
|
2250
2339
|
t.label
|
|
2251
2340
|
]
|
|
2252
2341
|
},
|
|
2253
2342
|
t.id
|
|
2254
2343
|
);
|
|
2255
2344
|
}) }),
|
|
2256
|
-
source === "search" && /* @__PURE__ */ (0,
|
|
2257
|
-
/* @__PURE__ */ (0,
|
|
2258
|
-
/* @__PURE__ */ (0,
|
|
2259
|
-
/* @__PURE__ */ (0,
|
|
2260
|
-
/* @__PURE__ */ (0,
|
|
2345
|
+
source === "search" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2346
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
2347
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-default bg-input px-3", children: [
|
|
2348
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
2349
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2261
2350
|
"input",
|
|
2262
2351
|
{
|
|
2263
2352
|
value: query,
|
|
@@ -2273,7 +2362,7 @@ function SelectionPicker({
|
|
|
2273
2362
|
}
|
|
2274
2363
|
)
|
|
2275
2364
|
] }),
|
|
2276
|
-
filters.map((f) => /* @__PURE__ */ (0,
|
|
2365
|
+
filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2277
2366
|
FilterDropdown,
|
|
2278
2367
|
{
|
|
2279
2368
|
filter: f,
|
|
@@ -2285,14 +2374,14 @@ function SelectionPicker({
|
|
|
2285
2374
|
)),
|
|
2286
2375
|
toolbarExtra
|
|
2287
2376
|
] }),
|
|
2288
|
-
!hasSearched ? /* @__PURE__ */ (0,
|
|
2289
|
-
/* @__PURE__ */ (0,
|
|
2290
|
-
/* @__PURE__ */ (0,
|
|
2291
|
-
/* @__PURE__ */ (0,
|
|
2292
|
-
/* @__PURE__ */ (0,
|
|
2377
|
+
!hasSearched ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2378
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2379
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2380
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "Search to get started" }),
|
|
2381
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Use the search or filters above to find and add options." })
|
|
2293
2382
|
] })
|
|
2294
|
-
] }) : /* @__PURE__ */ (0,
|
|
2295
|
-
/* @__PURE__ */ (0,
|
|
2383
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "overflow-hidden rounded-control border border-border-default", children: [
|
|
2384
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2296
2385
|
"div",
|
|
2297
2386
|
{
|
|
2298
2387
|
className: cx8(
|
|
@@ -2300,7 +2389,7 @@ function SelectionPicker({
|
|
|
2300
2389
|
rowGridCols
|
|
2301
2390
|
),
|
|
2302
2391
|
children: [
|
|
2303
|
-
/* @__PURE__ */ (0,
|
|
2392
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2304
2393
|
CheckBox,
|
|
2305
2394
|
{
|
|
2306
2395
|
checked: allSelected,
|
|
@@ -2311,18 +2400,18 @@ function SelectionPicker({
|
|
|
2311
2400
|
testId: testIdPrefix && `${testIdPrefix}-select-all`
|
|
2312
2401
|
}
|
|
2313
2402
|
),
|
|
2314
|
-
/* @__PURE__ */ (0,
|
|
2315
|
-
showInfoColumn && /* @__PURE__ */ (0,
|
|
2403
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx8("grid gap-2", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: c.className, children: c.header }, c.key)) }),
|
|
2404
|
+
showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-right", children: "Info" })
|
|
2316
2405
|
]
|
|
2317
2406
|
}
|
|
2318
2407
|
),
|
|
2319
|
-
/* @__PURE__ */ (0,
|
|
2408
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-h-[360px] overflow-y-auto", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center py-6", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Loader2, { size: 18, className: "animate-spin text-text-tertiary", "aria-hidden": "true" }) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: errorMessage }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: "No matches. Try a different search or filter." }) : rows.map((row) => {
|
|
2320
2409
|
const isSel = selectedIds.has(row.id);
|
|
2321
2410
|
const isLocked = lockedIds?.has(row.id) ?? false;
|
|
2322
2411
|
const kids = getChildren?.(row);
|
|
2323
2412
|
const isOpen = expanded.has(row.id);
|
|
2324
|
-
return /* @__PURE__ */ (0,
|
|
2325
|
-
/* @__PURE__ */ (0,
|
|
2413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "border-t border-border-default/60 first:border-t-0", children: [
|
|
2414
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2326
2415
|
"div",
|
|
2327
2416
|
{
|
|
2328
2417
|
onClick: isLocked ? void 0 : () => toggleRow(row),
|
|
@@ -2334,7 +2423,7 @@ function SelectionPicker({
|
|
|
2334
2423
|
!isLocked && isSel && "opacity-60"
|
|
2335
2424
|
),
|
|
2336
2425
|
children: [
|
|
2337
|
-
isLocked ? /* @__PURE__ */ (0,
|
|
2426
|
+
isLocked ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2338
2427
|
CheckBox,
|
|
2339
2428
|
{
|
|
2340
2429
|
checked: isSel,
|
|
@@ -2343,8 +2432,8 @@ function SelectionPicker({
|
|
|
2343
2432
|
testId: testIdPrefix && `${testIdPrefix}-row-${slug4(row.id)}`
|
|
2344
2433
|
}
|
|
2345
2434
|
),
|
|
2346
|
-
/* @__PURE__ */ (0,
|
|
2347
|
-
showInfoColumn && /* @__PURE__ */ (0,
|
|
2435
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx8("grid gap-2 text-[13px] text-text-primary", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cx8("truncate", c.className), children: c.render(row) }, c.key)) }),
|
|
2436
|
+
showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-end", children: kids && kids.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2348
2437
|
"button",
|
|
2349
2438
|
{
|
|
2350
2439
|
type: "button",
|
|
@@ -2358,28 +2447,28 @@ function SelectionPicker({
|
|
|
2358
2447
|
});
|
|
2359
2448
|
},
|
|
2360
2449
|
className: "flex h-7 w-7 items-center justify-center rounded-control text-text-secondary hover:bg-canvas hover:text-text-primary",
|
|
2361
|
-
children: /* @__PURE__ */ (0,
|
|
2450
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronRight, { size: 15, className: cx8("transition-transform", isOpen && "rotate-90") })
|
|
2362
2451
|
}
|
|
2363
|
-
) : /* @__PURE__ */ (0,
|
|
2452
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2364
2453
|
"span",
|
|
2365
2454
|
{
|
|
2366
2455
|
className: "flex h-7 w-7 items-center justify-center text-text-tertiary",
|
|
2367
2456
|
title: "No additional details",
|
|
2368
|
-
children: /* @__PURE__ */ (0,
|
|
2457
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Info, { size: 14 })
|
|
2369
2458
|
}
|
|
2370
2459
|
) })
|
|
2371
2460
|
]
|
|
2372
2461
|
}
|
|
2373
2462
|
),
|
|
2374
|
-
isOpen && kids && /* @__PURE__ */ (0,
|
|
2463
|
+
isOpen && kids && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-canvas/60 pb-1.5 pl-10 pr-3", children: kids.map((kid) => {
|
|
2375
2464
|
const kidSel = selectedIds.has(kid.id);
|
|
2376
|
-
return /* @__PURE__ */ (0,
|
|
2465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2377
2466
|
"div",
|
|
2378
2467
|
{
|
|
2379
2468
|
className: "flex items-center justify-between gap-2 border-t border-border-default/40 py-2 first:border-t-0",
|
|
2380
2469
|
children: [
|
|
2381
|
-
/* @__PURE__ */ (0,
|
|
2382
|
-
/* @__PURE__ */ (0,
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-[13px] text-text-secondary", children: kid.name }),
|
|
2471
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2383
2472
|
"button",
|
|
2384
2473
|
{
|
|
2385
2474
|
type: "button",
|
|
@@ -2390,7 +2479,7 @@ function SelectionPicker({
|
|
|
2390
2479
|
kidSel ? "text-text-tertiary" : "text-text-link hover:bg-subtle"
|
|
2391
2480
|
),
|
|
2392
2481
|
children: [
|
|
2393
|
-
kidSel ? /* @__PURE__ */ (0,
|
|
2482
|
+
kidSel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Check, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Plus, { size: 13 }),
|
|
2394
2483
|
kidSel ? "Added" : "Add"
|
|
2395
2484
|
]
|
|
2396
2485
|
}
|
|
@@ -2402,7 +2491,7 @@ function SelectionPicker({
|
|
|
2402
2491
|
}) })
|
|
2403
2492
|
] }, row.id);
|
|
2404
2493
|
}) }),
|
|
2405
|
-
!loading && !error && hasMore && /* @__PURE__ */ (0,
|
|
2494
|
+
!loading && !error && hasMore && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2406
2495
|
"button",
|
|
2407
2496
|
{
|
|
2408
2497
|
type: "button",
|
|
@@ -2411,19 +2500,19 @@ function SelectionPicker({
|
|
|
2411
2500
|
"data-testid": testIdPrefix && `${testIdPrefix}-load-more`,
|
|
2412
2501
|
className: "flex w-full items-center justify-center gap-2 border-t border-border-default px-2 py-1.5 text-[13px] text-brand-primaryAction transition-colors hover:bg-subtle disabled:opacity-50",
|
|
2413
2502
|
children: [
|
|
2414
|
-
loadingMore ? /* @__PURE__ */ (0,
|
|
2503
|
+
loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Loader2, { size: 13, className: "animate-spin", "aria-hidden": "true" }) : null,
|
|
2415
2504
|
loadingMore ? "Loading\u2026" : "Load more"
|
|
2416
2505
|
]
|
|
2417
2506
|
}
|
|
2418
2507
|
)
|
|
2419
2508
|
] })
|
|
2420
2509
|
] }),
|
|
2421
|
-
source === "lists" && /* @__PURE__ */ (0,
|
|
2422
|
-
/* @__PURE__ */ (0,
|
|
2423
|
-
accountLists && accountLists.length > 0 ? /* @__PURE__ */ (0,
|
|
2424
|
-
/* @__PURE__ */ (0,
|
|
2510
|
+
source === "lists" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2511
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-secondary", children: "Select an account list to add all of its accounts at once. Your workspace stays in sync as the list is updated." }),
|
|
2512
|
+
accountLists && accountLists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
2513
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScrollFade, { className: "flex max-h-[396px] flex-col gap-2 overflow-y-auto pr-0.5", children: accountLists.map((list) => {
|
|
2425
2514
|
const on = (selectedListIds ?? []).includes(list.id);
|
|
2426
|
-
return /* @__PURE__ */ (0,
|
|
2515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2427
2516
|
"button",
|
|
2428
2517
|
{
|
|
2429
2518
|
type: "button",
|
|
@@ -2435,19 +2524,19 @@ function SelectionPicker({
|
|
|
2435
2524
|
on ? "border-brand-primaryAction bg-brand-primarySoft" : "border-border-default bg-surface hover:bg-subtle"
|
|
2436
2525
|
),
|
|
2437
2526
|
children: [
|
|
2438
|
-
/* @__PURE__ */ (0,
|
|
2527
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2439
2528
|
"span",
|
|
2440
2529
|
{
|
|
2441
2530
|
className: cx8(
|
|
2442
2531
|
"flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
|
|
2443
2532
|
on ? "text-brand-primaryAction" : "text-text-secondary"
|
|
2444
2533
|
),
|
|
2445
|
-
children: on ? /* @__PURE__ */ (0,
|
|
2534
|
+
children: on ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Plus, { size: 16 })
|
|
2446
2535
|
}
|
|
2447
2536
|
),
|
|
2448
|
-
/* @__PURE__ */ (0,
|
|
2449
|
-
/* @__PURE__ */ (0,
|
|
2450
|
-
/* @__PURE__ */ (0,
|
|
2537
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "min-w-0 flex-1", children: [
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-[14px] font-medium text-text-primary", children: list.name }) }),
|
|
2539
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "block truncate text-[12px] text-text-secondary", children: [
|
|
2451
2540
|
list.count,
|
|
2452
2541
|
" accounts \xB7 ",
|
|
2453
2542
|
list.entityTypes.join(", "),
|
|
@@ -2455,13 +2544,13 @@ function SelectionPicker({
|
|
|
2455
2544
|
formatListDate(list.updatedAt)
|
|
2456
2545
|
] })
|
|
2457
2546
|
] }),
|
|
2458
|
-
/* @__PURE__ */ (0,
|
|
2547
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cx8("shrink-0 text-[12px] font-medium", on ? "text-brand-primaryAction" : "text-text-secondary"), children: on ? "Added" : "Add" })
|
|
2459
2548
|
]
|
|
2460
2549
|
},
|
|
2461
2550
|
list.id
|
|
2462
2551
|
);
|
|
2463
2552
|
}) }),
|
|
2464
|
-
/* @__PURE__ */ (0,
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2465
2554
|
"p",
|
|
2466
2555
|
{
|
|
2467
2556
|
className: "border-t border-border-default pt-2 text-right text-[12px] font-medium text-text-tertiary",
|
|
@@ -2473,11 +2562,11 @@ function SelectionPicker({
|
|
|
2473
2562
|
]
|
|
2474
2563
|
}
|
|
2475
2564
|
)
|
|
2476
|
-
] }) : /* @__PURE__ */ (0,
|
|
2477
|
-
/* @__PURE__ */ (0,
|
|
2478
|
-
/* @__PURE__ */ (0,
|
|
2479
|
-
/* @__PURE__ */ (0,
|
|
2480
|
-
/* @__PURE__ */ (0,
|
|
2565
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2566
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.List, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2567
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2568
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "No account lists yet" }),
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Account lists set up for you will appear here." })
|
|
2481
2570
|
] })
|
|
2482
2571
|
] })
|
|
2483
2572
|
] })
|
|
@@ -2509,7 +2598,7 @@ function ScrollFade({ className, children }) {
|
|
|
2509
2598
|
[sync]
|
|
2510
2599
|
);
|
|
2511
2600
|
const mask = edges.top || edges.bottom ? `linear-gradient(to bottom, transparent 0, #000 ${edges.top ? EDGE_FADE : 0}px, #000 calc(100% - ${edges.bottom ? EDGE_FADE : 0}px), transparent 100%)` : void 0;
|
|
2512
|
-
return /* @__PURE__ */ (0,
|
|
2601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: attach, onScroll: sync, className, style: { maskImage: mask, WebkitMaskImage: mask }, children });
|
|
2513
2602
|
}
|
|
2514
2603
|
function formatListDate(iso) {
|
|
2515
2604
|
try {
|
|
@@ -2559,8 +2648,8 @@ function FilterDropdown({
|
|
|
2559
2648
|
const count = active.size;
|
|
2560
2649
|
const label = count === 0 ? filter.label : count === 1 ? [...active][0] : "Multiple";
|
|
2561
2650
|
const filterSlug = slug4(filter.label);
|
|
2562
|
-
return /* @__PURE__ */ (0,
|
|
2563
|
-
/* @__PURE__ */ (0,
|
|
2651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
|
|
2652
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2564
2653
|
"button",
|
|
2565
2654
|
{
|
|
2566
2655
|
ref: btnRef,
|
|
@@ -2572,12 +2661,12 @@ function FilterDropdown({
|
|
|
2572
2661
|
className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
|
|
2573
2662
|
children: [
|
|
2574
2663
|
label,
|
|
2575
|
-
/* @__PURE__ */ (0,
|
|
2664
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronDown, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
|
|
2576
2665
|
]
|
|
2577
2666
|
}
|
|
2578
2667
|
),
|
|
2579
2668
|
open && pos && (0, import_react_dom4.createPortal)(
|
|
2580
|
-
/* @__PURE__ */ (0,
|
|
2669
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2581
2670
|
"div",
|
|
2582
2671
|
{
|
|
2583
2672
|
ref: menuRef,
|
|
@@ -2586,9 +2675,9 @@ function FilterDropdown({
|
|
|
2586
2675
|
style: { top: pos.top, left: pos.left },
|
|
2587
2676
|
className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
|
|
2588
2677
|
children: [
|
|
2589
|
-
searchable && /* @__PURE__ */ (0,
|
|
2590
|
-
/* @__PURE__ */ (0,
|
|
2591
|
-
/* @__PURE__ */ (0,
|
|
2678
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
2679
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
|
|
2680
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2592
2681
|
"input",
|
|
2593
2682
|
{
|
|
2594
2683
|
autoFocus: true,
|
|
@@ -2599,14 +2688,14 @@ function FilterDropdown({
|
|
|
2599
2688
|
}
|
|
2600
2689
|
)
|
|
2601
2690
|
] }),
|
|
2602
|
-
/* @__PURE__ */ (0,
|
|
2691
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx8("flex flex-col gap-0.5", searchable && "max-h-[240px] overflow-y-auto"), children: shownOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "px-2 py-3 text-center text-[12px] text-text-secondary", children: "No matches." }) : shownOptions.map((opt) => {
|
|
2603
2692
|
const on = active.has(opt);
|
|
2604
|
-
return /* @__PURE__ */ (0,
|
|
2693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2605
2694
|
"label",
|
|
2606
2695
|
{
|
|
2607
2696
|
className: "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] text-text-primary hover:bg-subtle",
|
|
2608
2697
|
children: [
|
|
2609
|
-
/* @__PURE__ */ (0,
|
|
2698
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2610
2699
|
CheckBox,
|
|
2611
2700
|
{
|
|
2612
2701
|
checked: on,
|
|
@@ -2637,7 +2726,7 @@ function gridForColumns(columns) {
|
|
|
2637
2726
|
|
|
2638
2727
|
// src/PublisherBreakdownList.tsx
|
|
2639
2728
|
var import_react12 = require("react");
|
|
2640
|
-
var
|
|
2729
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2641
2730
|
function cx9(...parts) {
|
|
2642
2731
|
return parts.filter(Boolean).join(" ");
|
|
2643
2732
|
}
|
|
@@ -2652,7 +2741,7 @@ function initials(name) {
|
|
|
2652
2741
|
return name.replace(/[^a-zA-Z0-9]/g, "").slice(0, 2).toUpperCase();
|
|
2653
2742
|
}
|
|
2654
2743
|
function Monogram({ name, size = 28 }) {
|
|
2655
|
-
return /* @__PURE__ */ (0,
|
|
2744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2656
2745
|
"span",
|
|
2657
2746
|
{
|
|
2658
2747
|
"aria-hidden": "true",
|
|
@@ -2663,12 +2752,12 @@ function Monogram({ name, size = 28 }) {
|
|
|
2663
2752
|
);
|
|
2664
2753
|
}
|
|
2665
2754
|
function BreakdownTag({ children }) {
|
|
2666
|
-
return /* @__PURE__ */ (0,
|
|
2755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-[11px] font-medium text-text-secondary", children });
|
|
2667
2756
|
}
|
|
2668
2757
|
function DelayedTip({ label, children }) {
|
|
2669
|
-
return /* @__PURE__ */ (0,
|
|
2758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "group/dt relative inline-flex", tabIndex: 0, "aria-label": label, children: [
|
|
2670
2759
|
children,
|
|
2671
|
-
/* @__PURE__ */ (0,
|
|
2760
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2672
2761
|
"span",
|
|
2673
2762
|
{
|
|
2674
2763
|
role: "tooltip",
|
|
@@ -2682,22 +2771,22 @@ var COL_CURRENT = 76;
|
|
|
2682
2771
|
var COL_PREVIOUS = 76;
|
|
2683
2772
|
var COL_YOY = 44;
|
|
2684
2773
|
function MetricListHeader({ className }) {
|
|
2685
|
-
return /* @__PURE__ */ (0,
|
|
2686
|
-
/* @__PURE__ */ (0,
|
|
2687
|
-
/* @__PURE__ */ (0,
|
|
2688
|
-
/* @__PURE__ */ (0,
|
|
2689
|
-
/* @__PURE__ */ (0,
|
|
2690
|
-
/* @__PURE__ */ (0,
|
|
2774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx9("flex items-baseline gap-2 pb-2", className), children: [
|
|
2775
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex-1" }),
|
|
2776
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2777
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_CURRENT }, children: "Current" }),
|
|
2778
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DelayedTip, { label: "Spend during the same time period one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_PREVIOUS }, children: "Previous" }) }),
|
|
2779
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DelayedTip, { label: "Percent change from this time period vs. the same time one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_YOY }, children: "YoY" }) })
|
|
2691
2780
|
] })
|
|
2692
2781
|
] });
|
|
2693
2782
|
}
|
|
2694
2783
|
function MetricCells({ spendN, yoy }) {
|
|
2695
2784
|
const prior = priorYearAmt(spendN, yoy);
|
|
2696
2785
|
const up = yoy !== "NEW" && yoy >= 0;
|
|
2697
|
-
return /* @__PURE__ */ (0,
|
|
2698
|
-
/* @__PURE__ */ (0,
|
|
2699
|
-
/* @__PURE__ */ (0,
|
|
2700
|
-
/* @__PURE__ */ (0,
|
|
2786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2787
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
|
|
2788
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
|
|
2789
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
|
|
2701
2790
|
up ? "+" : "\u2212",
|
|
2702
2791
|
Math.abs(yoy),
|
|
2703
2792
|
"%"
|
|
@@ -2708,35 +2797,35 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2708
2797
|
const [showAll, setShowAll] = (0, import_react12.useState)(false);
|
|
2709
2798
|
const visible = showAll ? rows : rows.slice(0, defaultVisibleCount);
|
|
2710
2799
|
const rowPad = padded ? "px-5" : "";
|
|
2711
|
-
return /* @__PURE__ */ (0,
|
|
2712
|
-
/* @__PURE__ */ (0,
|
|
2713
|
-
/* @__PURE__ */ (0,
|
|
2714
|
-
visible.map((p) => /* @__PURE__ */ (0,
|
|
2715
|
-
/* @__PURE__ */ (0,
|
|
2716
|
-
renderLogo ? renderLogo(p) : /* @__PURE__ */ (0,
|
|
2717
|
-
/* @__PURE__ */ (0,
|
|
2718
|
-
/* @__PURE__ */ (0,
|
|
2719
|
-
/* @__PURE__ */ (0,
|
|
2720
|
-
p.tags.map((t) => /* @__PURE__ */ (0,
|
|
2800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col", children: [
|
|
2801
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col", children: [
|
|
2802
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MetricListHeader, { className: rowPad }),
|
|
2803
|
+
visible.map((p) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx9("flex items-center justify-between gap-3 border-t border-border-default/60 py-2.5 first:border-t-0", rowPad), children: [
|
|
2804
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
|
|
2805
|
+
renderLogo ? renderLogo(p) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Monogram, { name: p.brand, size: 28 }),
|
|
2806
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-0", children: [
|
|
2807
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
|
|
2808
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: p.brand }),
|
|
2809
|
+
p.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BreakdownTag, { children: t }, t))
|
|
2721
2810
|
] }),
|
|
2722
|
-
/* @__PURE__ */ (0,
|
|
2811
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate text-[11.5px] text-text-tertiary", children: p.owner })
|
|
2723
2812
|
] })
|
|
2724
2813
|
] }),
|
|
2725
|
-
/* @__PURE__ */ (0,
|
|
2814
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MetricCells, { spendN: p.spendN, yoy: p.yoy })
|
|
2726
2815
|
] }, p.brand))
|
|
2727
2816
|
] }),
|
|
2728
|
-
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ (0,
|
|
2729
|
-
/* @__PURE__ */ (0,
|
|
2817
|
+
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cx9("border-t border-border-default py-3", rowPad), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: viewAllHref, className: "text-[12px] font-semibold text-text-link hover:underline", children: "See all publishers" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx9("flex items-center gap-2 border-t border-border-default py-3 text-[12px] text-text-tertiary", rowPad), children: [
|
|
2818
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
|
|
2730
2819
|
"Showing ",
|
|
2731
2820
|
visible.length,
|
|
2732
2821
|
" of ",
|
|
2733
2822
|
rows.length
|
|
2734
2823
|
] }),
|
|
2735
|
-
!showAll ? /* @__PURE__ */ (0,
|
|
2824
|
+
!showAll ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("button", { type: "button", onClick: () => setShowAll(true), className: "font-semibold text-text-link hover:underline", children: [
|
|
2736
2825
|
"See all (",
|
|
2737
2826
|
rows.length - defaultVisibleCount,
|
|
2738
2827
|
" more)"
|
|
2739
|
-
] }) : /* @__PURE__ */ (0,
|
|
2828
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", onClick: () => setShowAll(false), className: "font-semibold text-text-link hover:underline", children: "Show less" })
|
|
2740
2829
|
] }))
|
|
2741
2830
|
] });
|
|
2742
2831
|
}
|
|
@@ -2745,62 +2834,92 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2745
2834
|
var import_react13 = require("react");
|
|
2746
2835
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
2747
2836
|
var import_class_variance_authority = require("class-variance-authority");
|
|
2748
|
-
var
|
|
2749
|
-
var
|
|
2837
|
+
var import_lucide_react16 = require("lucide-react");
|
|
2838
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2750
2839
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
2751
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control
|
|
2840
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
|
|
2752
2841
|
{
|
|
2753
2842
|
variants: {
|
|
2754
2843
|
variant: {
|
|
2755
2844
|
primary: "bg-brand-primaryAction text-brand-onprimary hover:brightness-110",
|
|
2756
|
-
|
|
2845
|
+
// border-strong, not border-interactive. The interactive token is #6b6358
|
|
2846
|
+
// -- 5.9:1 against the surface, nearly as dark as body text -- which is
|
|
2847
|
+
// right for an input the eye must find in a form, and far too heavy for
|
|
2848
|
+
// a button sitting beside other buttons. It reads heaviest on icon-only,
|
|
2849
|
+
// where there is least fill inside the line to balance it.
|
|
2850
|
+
secondary: "bg-surface text-text-primary border border-border-strong hover:bg-subtle hover:border-border-interactive",
|
|
2757
2851
|
ghost: "text-text-primary hover:bg-subtle",
|
|
2758
2852
|
danger: "bg-status-danger text-status-onstatus hover:brightness-110",
|
|
2853
|
+
// Quiet destructive: neutral at rest, red only on hover. This is what
|
|
2854
|
+
// the product actually reaches for -- nearly every hand-rolled
|
|
2855
|
+
// destructive control is an icon that reddens on hover, while filled
|
|
2856
|
+
// `danger` is right only for the confirm button in a dialog the user
|
|
2857
|
+
// already opened.
|
|
2858
|
+
dangerGhost: "text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
2759
2859
|
link: "text-text-link underline-offset-4 hover:underline px-0"
|
|
2760
2860
|
},
|
|
2861
|
+
// Type scales with the box. One size across all three left xs cramped --
|
|
2862
|
+
// 14px inside a 24px box leaves five pixels above and below, so the label
|
|
2863
|
+
// fills the button instead of sitting in it.
|
|
2761
2864
|
size: {
|
|
2865
|
+
xs: "h-6 px-2 text-xs",
|
|
2762
2866
|
sm: "h-8 px-3 text-sm",
|
|
2763
|
-
md: "h-10 px-4 text-sm"
|
|
2764
|
-
|
|
2765
|
-
|
|
2867
|
+
md: "h-10 px-4 text-sm"
|
|
2868
|
+
},
|
|
2869
|
+
// Shape is orthogonal to size. As a fourth SIZE, `icon` could only ever
|
|
2870
|
+
// be one dimension, so an icon button never lined up with the labelled
|
|
2871
|
+
// buttons beside it in a toolbar. As a shape it squares the box at
|
|
2872
|
+
// whichever height you picked.
|
|
2873
|
+
iconOnly: {
|
|
2874
|
+
true: "p-0",
|
|
2875
|
+
false: ""
|
|
2766
2876
|
}
|
|
2767
2877
|
},
|
|
2878
|
+
compoundVariants: [
|
|
2879
|
+
{ size: "xs", iconOnly: true, class: "w-6" },
|
|
2880
|
+
{ size: "sm", iconOnly: true, class: "w-8" },
|
|
2881
|
+
{ size: "md", iconOnly: true, class: "w-10" },
|
|
2882
|
+
// A boxed button is a target you aim at, so its label carries the weight
|
|
2883
|
+
// of one. `link` sits inline in a sentence, where semibold reads as
|
|
2884
|
+
// emphasis on the words rather than as a control.
|
|
2885
|
+
{ variant: ["primary", "secondary", "ghost", "danger", "dangerGhost"], class: "font-semibold" },
|
|
2886
|
+
{ variant: "link", class: "font-medium h-auto p-0" }
|
|
2887
|
+
],
|
|
2768
2888
|
defaultVariants: {
|
|
2769
2889
|
variant: "primary",
|
|
2770
|
-
size: "md"
|
|
2890
|
+
size: "md",
|
|
2891
|
+
iconOnly: false
|
|
2771
2892
|
}
|
|
2772
2893
|
}
|
|
2773
2894
|
);
|
|
2774
2895
|
var Button = (0, import_react13.forwardRef)(
|
|
2775
|
-
({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
|
|
2776
|
-
const
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
}
|
|
2790
|
-
);
|
|
2896
|
+
({ className, variant, size, iconOnly, asChild = false, loading = false, disabled, children, ...props }, ref) => {
|
|
2897
|
+
const shared = {
|
|
2898
|
+
className: cn(buttonVariants({ variant, size, iconOnly, className })),
|
|
2899
|
+
disabled: disabled || loading,
|
|
2900
|
+
"aria-busy": loading || void 0,
|
|
2901
|
+
...props
|
|
2902
|
+
};
|
|
2903
|
+
if (asChild) {
|
|
2904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_slot.Slot, { ref, ...shared, children });
|
|
2905
|
+
}
|
|
2906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("button", { ref, ...shared, children: [
|
|
2907
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react16.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
|
|
2908
|
+
children
|
|
2909
|
+
] });
|
|
2791
2910
|
}
|
|
2792
2911
|
);
|
|
2793
2912
|
Button.displayName = "Button";
|
|
2794
2913
|
|
|
2795
2914
|
// src/FilterDropdownFooter.tsx
|
|
2796
|
-
var
|
|
2915
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2797
2916
|
function FilterDropdownFooter({
|
|
2798
2917
|
onClear,
|
|
2799
2918
|
onApply,
|
|
2800
2919
|
clearLabel = "Clear all",
|
|
2801
2920
|
applyLabel = "Apply"
|
|
2802
2921
|
}) {
|
|
2803
|
-
return /* @__PURE__ */ (0,
|
|
2922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2804
2923
|
"div",
|
|
2805
2924
|
{
|
|
2806
2925
|
className: cn(
|
|
@@ -2808,8 +2927,8 @@ function FilterDropdownFooter({
|
|
|
2808
2927
|
onClear ? "justify-between" : "justify-end"
|
|
2809
2928
|
),
|
|
2810
2929
|
children: [
|
|
2811
|
-
onClear && /* @__PURE__ */ (0,
|
|
2812
|
-
/* @__PURE__ */ (0,
|
|
2930
|
+
onClear && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }),
|
|
2931
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: applyLabel })
|
|
2813
2932
|
]
|
|
2814
2933
|
}
|
|
2815
2934
|
);
|
|
@@ -2818,7 +2937,7 @@ function FilterDropdownFooter({
|
|
|
2818
2937
|
// src/NameListModal.tsx
|
|
2819
2938
|
var import_react14 = require("react");
|
|
2820
2939
|
var import_react_dom5 = require("react-dom");
|
|
2821
|
-
var
|
|
2940
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2822
2941
|
function NameListModal({
|
|
2823
2942
|
title,
|
|
2824
2943
|
initialName,
|
|
@@ -2843,12 +2962,12 @@ function NameListModal({
|
|
|
2843
2962
|
// bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
|
|
2844
2963
|
// No in-data-[theme=dark] override needed any more -- the token redefines
|
|
2845
2964
|
// itself under that attribute in dark.css, so one class covers both themes.
|
|
2846
|
-
/* @__PURE__ */ (0,
|
|
2965
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2847
2966
|
"div",
|
|
2848
2967
|
{
|
|
2849
2968
|
className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
|
|
2850
2969
|
onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
|
|
2851
|
-
children: /* @__PURE__ */ (0,
|
|
2970
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2852
2971
|
"div",
|
|
2853
2972
|
{
|
|
2854
2973
|
role: "dialog",
|
|
@@ -2856,10 +2975,10 @@ function NameListModal({
|
|
|
2856
2975
|
"aria-label": title,
|
|
2857
2976
|
className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
|
|
2858
2977
|
children: [
|
|
2859
|
-
/* @__PURE__ */ (0,
|
|
2860
|
-
/* @__PURE__ */ (0,
|
|
2861
|
-
/* @__PURE__ */ (0,
|
|
2862
|
-
/* @__PURE__ */ (0,
|
|
2978
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
|
|
2979
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
|
|
2980
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
|
|
2981
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2863
2982
|
"input",
|
|
2864
2983
|
{
|
|
2865
2984
|
id: "account-list-name",
|
|
@@ -2871,13 +2990,13 @@ function NameListModal({
|
|
|
2871
2990
|
}
|
|
2872
2991
|
)
|
|
2873
2992
|
] }),
|
|
2874
|
-
options && options.length > 0 && /* @__PURE__ */ (0,
|
|
2875
|
-
/* @__PURE__ */ (0,
|
|
2993
|
+
options && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-4 flex flex-col gap-2.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "flex cursor-pointer items-center gap-2.5 text-[13px] text-text-primary", children: [
|
|
2994
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckBox, { checked: !!checked[o.key], onChange: () => toggle(o.key), ariaLabel: o.label }),
|
|
2876
2995
|
o.label
|
|
2877
2996
|
] }, o.key)) }),
|
|
2878
|
-
/* @__PURE__ */ (0,
|
|
2879
|
-
/* @__PURE__ */ (0,
|
|
2880
|
-
/* @__PURE__ */ (0,
|
|
2997
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
|
|
2998
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
|
|
2999
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim(), checked), children: submitLabel })
|
|
2881
3000
|
] })
|
|
2882
3001
|
]
|
|
2883
3002
|
}
|
|
@@ -2889,7 +3008,7 @@ function NameListModal({
|
|
|
2889
3008
|
}
|
|
2890
3009
|
|
|
2891
3010
|
// src/ChipTrigger.tsx
|
|
2892
|
-
var
|
|
3011
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2893
3012
|
function chipTriggerClass(variant = "box") {
|
|
2894
3013
|
return cn(
|
|
2895
3014
|
"flex h-11 items-center gap-2 rounded-control border bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
@@ -2900,13 +3019,13 @@ function chipTriggerClass(variant = "box") {
|
|
|
2900
3019
|
);
|
|
2901
3020
|
}
|
|
2902
3021
|
function ChipContent({ caption, value, icon }) {
|
|
2903
|
-
const stack = /* @__PURE__ */ (0,
|
|
2904
|
-
/* @__PURE__ */ (0,
|
|
2905
|
-
/* @__PURE__ */ (0,
|
|
3022
|
+
const stack = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3023
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
3024
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
2906
3025
|
] });
|
|
2907
3026
|
if (icon) {
|
|
2908
|
-
return /* @__PURE__ */ (0,
|
|
2909
|
-
/* @__PURE__ */ (0,
|
|
3027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
3028
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
2910
3029
|
stack
|
|
2911
3030
|
] });
|
|
2912
3031
|
}
|
|
@@ -2914,12 +3033,12 @@ function ChipContent({ caption, value, icon }) {
|
|
|
2914
3033
|
}
|
|
2915
3034
|
|
|
2916
3035
|
// src/FilterChipBar.tsx
|
|
2917
|
-
var
|
|
2918
|
-
var
|
|
3036
|
+
var import_lucide_react17 = require("lucide-react");
|
|
3037
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2919
3038
|
function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
2920
3039
|
if (chips.length === 0) return null;
|
|
2921
|
-
return /* @__PURE__ */ (0,
|
|
2922
|
-
chips.map((c) => /* @__PURE__ */ (0,
|
|
3040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5 border-t border-border-default pt-2.5", children: [
|
|
3041
|
+
chips.map((c) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2923
3042
|
Chip,
|
|
2924
3043
|
{
|
|
2925
3044
|
label: c.label,
|
|
@@ -2929,7 +3048,7 @@ function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
|
2929
3048
|
},
|
|
2930
3049
|
c.key
|
|
2931
3050
|
)),
|
|
2932
|
-
/* @__PURE__ */ (0,
|
|
3051
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", onClick: onClearAll, className: "ml-1 text-[12px] font-medium text-text-link hover:underline", children: "Clear all" })
|
|
2933
3052
|
] });
|
|
2934
3053
|
}
|
|
2935
3054
|
function Chip({
|
|
@@ -2938,8 +3057,8 @@ function Chip({
|
|
|
2938
3057
|
parked,
|
|
2939
3058
|
onRemove
|
|
2940
3059
|
}) {
|
|
2941
|
-
return /* @__PURE__ */ (0,
|
|
2942
|
-
/* @__PURE__ */ (0,
|
|
3060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "group relative inline-flex", children: [
|
|
3061
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2943
3062
|
"span",
|
|
2944
3063
|
{
|
|
2945
3064
|
className: cn(
|
|
@@ -2951,22 +3070,22 @@ function Chip({
|
|
|
2951
3070
|
) : "bg-subtle text-text-secondary ring-transparent group-hover:bg-border-default group-hover:text-text-primary group-hover:ring-border-interactive"
|
|
2952
3071
|
),
|
|
2953
3072
|
children: [
|
|
2954
|
-
parked && /* @__PURE__ */ (0,
|
|
3073
|
+
parked && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react17.CircleSlash, { size: 11, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
2955
3074
|
label,
|
|
2956
|
-
/* @__PURE__ */ (0,
|
|
3075
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2957
3076
|
"button",
|
|
2958
3077
|
{
|
|
2959
3078
|
type: "button",
|
|
2960
3079
|
onClick: onRemove,
|
|
2961
3080
|
"aria-label": `Remove ${groupLabel}: ${label}`,
|
|
2962
3081
|
className: "text-text-tertiary transition-colors hover:text-text-primary",
|
|
2963
|
-
children: /* @__PURE__ */ (0,
|
|
3082
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react17.X, { size: 12 })
|
|
2964
3083
|
}
|
|
2965
3084
|
)
|
|
2966
3085
|
]
|
|
2967
3086
|
}
|
|
2968
3087
|
),
|
|
2969
|
-
/* @__PURE__ */ (0,
|
|
3088
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2970
3089
|
"span",
|
|
2971
3090
|
{
|
|
2972
3091
|
role: "tooltip",
|
|
@@ -2978,11 +3097,11 @@ function Chip({
|
|
|
2978
3097
|
}
|
|
2979
3098
|
|
|
2980
3099
|
// src/SortButton.tsx
|
|
2981
|
-
var
|
|
2982
|
-
var
|
|
3100
|
+
var import_lucide_react18 = require("lucide-react");
|
|
3101
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2983
3102
|
function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
2984
3103
|
const active = !disabled && sort.key === sortKey;
|
|
2985
|
-
return /* @__PURE__ */ (0,
|
|
3104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2986
3105
|
"button",
|
|
2987
3106
|
{
|
|
2988
3107
|
type: "button",
|
|
@@ -3010,8 +3129,8 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
|
3010
3129
|
),
|
|
3011
3130
|
children: [
|
|
3012
3131
|
label,
|
|
3013
|
-
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0,
|
|
3014
|
-
|
|
3132
|
+
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3133
|
+
import_lucide_react18.ArrowUpDown,
|
|
3015
3134
|
{
|
|
3016
3135
|
size: 12,
|
|
3017
3136
|
className: "shrink-0 text-text-tertiary opacity-50 transition-opacity group-hover:opacity-100"
|
|
@@ -3033,8 +3152,8 @@ function sortProp(sort) {
|
|
|
3033
3152
|
}
|
|
3034
3153
|
|
|
3035
3154
|
// src/Pager.tsx
|
|
3036
|
-
var
|
|
3037
|
-
var
|
|
3155
|
+
var import_lucide_react19 = require("lucide-react");
|
|
3156
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3038
3157
|
function pageWindow(current, total) {
|
|
3039
3158
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
3040
3159
|
const keep = /* @__PURE__ */ new Set([1, total, current, current - 1, current + 1]);
|
|
@@ -3050,8 +3169,8 @@ function pageWindow(current, total) {
|
|
|
3050
3169
|
}
|
|
3051
3170
|
function Pager({ page, totalPages, onPage }) {
|
|
3052
3171
|
const btn = "flex h-8 min-w-8 items-center justify-center rounded-control px-2 text-[13px] transition-colors";
|
|
3053
|
-
return /* @__PURE__ */ (0,
|
|
3054
|
-
/* @__PURE__ */ (0,
|
|
3172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3173
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3055
3174
|
"button",
|
|
3056
3175
|
{
|
|
3057
3176
|
type: "button",
|
|
@@ -3059,11 +3178,11 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3059
3178
|
disabled: page === 1,
|
|
3060
3179
|
"aria-label": "Previous page",
|
|
3061
3180
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
3062
|
-
children: /* @__PURE__ */ (0,
|
|
3181
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ChevronLeft, { size: 16 })
|
|
3063
3182
|
}
|
|
3064
3183
|
),
|
|
3065
3184
|
pageWindow(page, totalPages).map(
|
|
3066
|
-
(p) => typeof p === "string" ? /* @__PURE__ */ (0,
|
|
3185
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3067
3186
|
"button",
|
|
3068
3187
|
{
|
|
3069
3188
|
type: "button",
|
|
@@ -3078,7 +3197,7 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3078
3197
|
p
|
|
3079
3198
|
)
|
|
3080
3199
|
),
|
|
3081
|
-
/* @__PURE__ */ (0,
|
|
3200
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3082
3201
|
"button",
|
|
3083
3202
|
{
|
|
3084
3203
|
type: "button",
|
|
@@ -3086,14 +3205,14 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3086
3205
|
disabled: page === totalPages,
|
|
3087
3206
|
"aria-label": "Next page",
|
|
3088
3207
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
3089
|
-
children: /* @__PURE__ */ (0,
|
|
3208
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ChevronRight, { size: 16 })
|
|
3090
3209
|
}
|
|
3091
3210
|
)
|
|
3092
3211
|
] });
|
|
3093
3212
|
}
|
|
3094
3213
|
|
|
3095
3214
|
// src/WorkspaceAvatar.tsx
|
|
3096
|
-
var
|
|
3215
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3097
3216
|
function workspaceInitials(name) {
|
|
3098
3217
|
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
3099
3218
|
if (words.length === 0) return "\xB7";
|
|
@@ -3109,7 +3228,7 @@ var SIZES = {
|
|
|
3109
3228
|
lg: "h-11 w-11 text-[15px]"
|
|
3110
3229
|
};
|
|
3111
3230
|
function WorkspaceAvatar({ name, size = "md" }) {
|
|
3112
|
-
return /* @__PURE__ */ (0,
|
|
3231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3113
3232
|
"span",
|
|
3114
3233
|
{
|
|
3115
3234
|
"aria-hidden": "true",
|
|
@@ -3123,13 +3242,19 @@ function WorkspaceAvatar({ name, size = "md" }) {
|
|
|
3123
3242
|
}
|
|
3124
3243
|
|
|
3125
3244
|
// src/Tag.tsx
|
|
3126
|
-
var
|
|
3245
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3127
3246
|
function Tag({ children, className }) {
|
|
3128
|
-
return /* @__PURE__ */ (0,
|
|
3247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3129
3248
|
"span",
|
|
3130
3249
|
{
|
|
3131
3250
|
className: cn(
|
|
3132
|
-
|
|
3251
|
+
// text-micro and tertiary ink. The component used to sit at 11px in
|
|
3252
|
+
// secondary -- a step darker than the ten hand-rolled copies the audit
|
|
3253
|
+
// found, which had independently drifted to tertiary. Ten people
|
|
3254
|
+
// reaching for "quieter" is worth more than the component's original
|
|
3255
|
+
// guess: a tag names what a row IS, which is background to the row
|
|
3256
|
+
// itself rather than part of it.
|
|
3257
|
+
"inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-micro font-medium text-text-tertiary",
|
|
3133
3258
|
className
|
|
3134
3259
|
),
|
|
3135
3260
|
children
|
|
@@ -3138,8 +3263,8 @@ function Tag({ children, className }) {
|
|
|
3138
3263
|
}
|
|
3139
3264
|
|
|
3140
3265
|
// src/TablePagination.tsx
|
|
3141
|
-
var
|
|
3142
|
-
var
|
|
3266
|
+
var import_lucide_react20 = require("lucide-react");
|
|
3267
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3143
3268
|
function TablePagination({
|
|
3144
3269
|
page,
|
|
3145
3270
|
perPage,
|
|
@@ -3159,21 +3284,21 @@ function TablePagination({
|
|
|
3159
3284
|
btn,
|
|
3160
3285
|
"text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
|
|
3161
3286
|
);
|
|
3162
|
-
return /* @__PURE__ */ (0,
|
|
3163
|
-
/* @__PURE__ */ (0,
|
|
3164
|
-
/* @__PURE__ */ (0,
|
|
3165
|
-
/* @__PURE__ */ (0,
|
|
3287
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
|
|
3288
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
|
|
3289
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "relative", children: [
|
|
3290
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3166
3291
|
"select",
|
|
3167
3292
|
{
|
|
3168
3293
|
value: perPage,
|
|
3169
3294
|
onChange: (e) => onPerPageChange(Number(e.target.value)),
|
|
3170
3295
|
"aria-label": "Items per page",
|
|
3171
3296
|
className: "appearance-none rounded-control border border-border-default bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
|
|
3172
|
-
children: perPageOptions.map((n) => /* @__PURE__ */ (0,
|
|
3297
|
+
children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: n, children: n }, n))
|
|
3173
3298
|
}
|
|
3174
3299
|
),
|
|
3175
|
-
/* @__PURE__ */ (0,
|
|
3176
|
-
|
|
3300
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3301
|
+
import_lucide_react20.ChevronDown,
|
|
3177
3302
|
{
|
|
3178
3303
|
size: 13,
|
|
3179
3304
|
"aria-hidden": "true",
|
|
@@ -3183,8 +3308,8 @@ function TablePagination({
|
|
|
3183
3308
|
] }),
|
|
3184
3309
|
"items per page"
|
|
3185
3310
|
] }),
|
|
3186
|
-
/* @__PURE__ */ (0,
|
|
3187
|
-
/* @__PURE__ */ (0,
|
|
3311
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
|
|
3312
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3188
3313
|
"button",
|
|
3189
3314
|
{
|
|
3190
3315
|
type: "button",
|
|
@@ -3192,10 +3317,10 @@ function TablePagination({
|
|
|
3192
3317
|
disabled: current === 1,
|
|
3193
3318
|
"aria-label": "First page",
|
|
3194
3319
|
className: stepBtn,
|
|
3195
|
-
children: /* @__PURE__ */ (0,
|
|
3320
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronFirst, { size: 16, "aria-hidden": "true" })
|
|
3196
3321
|
}
|
|
3197
3322
|
),
|
|
3198
|
-
/* @__PURE__ */ (0,
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3199
3324
|
"button",
|
|
3200
3325
|
{
|
|
3201
3326
|
type: "button",
|
|
@@ -3203,11 +3328,11 @@ function TablePagination({
|
|
|
3203
3328
|
disabled: current === 1,
|
|
3204
3329
|
"aria-label": "Previous page",
|
|
3205
3330
|
className: stepBtn,
|
|
3206
|
-
children: /* @__PURE__ */ (0,
|
|
3331
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLeft, { size: 16, "aria-hidden": "true" })
|
|
3207
3332
|
}
|
|
3208
3333
|
),
|
|
3209
3334
|
pageWindow(current, totalPages).map(
|
|
3210
|
-
(p) => typeof p === "string" ? /* @__PURE__ */ (0,
|
|
3335
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3211
3336
|
"button",
|
|
3212
3337
|
{
|
|
3213
3338
|
type: "button",
|
|
@@ -3222,7 +3347,7 @@ function TablePagination({
|
|
|
3222
3347
|
p
|
|
3223
3348
|
)
|
|
3224
3349
|
),
|
|
3225
|
-
/* @__PURE__ */ (0,
|
|
3350
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3226
3351
|
"button",
|
|
3227
3352
|
{
|
|
3228
3353
|
type: "button",
|
|
@@ -3230,10 +3355,10 @@ function TablePagination({
|
|
|
3230
3355
|
disabled: current === totalPages,
|
|
3231
3356
|
"aria-label": "Next page",
|
|
3232
3357
|
className: stepBtn,
|
|
3233
|
-
children: /* @__PURE__ */ (0,
|
|
3358
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronRight, { size: 16, "aria-hidden": "true" })
|
|
3234
3359
|
}
|
|
3235
3360
|
),
|
|
3236
|
-
/* @__PURE__ */ (0,
|
|
3361
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3237
3362
|
"button",
|
|
3238
3363
|
{
|
|
3239
3364
|
type: "button",
|
|
@@ -3241,11 +3366,11 @@ function TablePagination({
|
|
|
3241
3366
|
disabled: current === totalPages,
|
|
3242
3367
|
"aria-label": "Last page",
|
|
3243
3368
|
className: stepBtn,
|
|
3244
|
-
children: /* @__PURE__ */ (0,
|
|
3369
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLast, { size: 16, "aria-hidden": "true" })
|
|
3245
3370
|
}
|
|
3246
3371
|
)
|
|
3247
3372
|
] }),
|
|
3248
|
-
/* @__PURE__ */ (0,
|
|
3373
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
|
|
3249
3374
|
rangeStart.toLocaleString(),
|
|
3250
3375
|
" \u2013 ",
|
|
3251
3376
|
rangeEnd.toLocaleString(),
|
|
@@ -3259,8 +3384,8 @@ function TablePagination({
|
|
|
3259
3384
|
|
|
3260
3385
|
// src/DateRangePicker.tsx
|
|
3261
3386
|
var import_react15 = require("react");
|
|
3262
|
-
var
|
|
3263
|
-
var
|
|
3387
|
+
var import_lucide_react21 = require("lucide-react");
|
|
3388
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3264
3389
|
var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3265
3390
|
var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
|
|
3266
3391
|
var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
|
|
@@ -3296,7 +3421,7 @@ function spanLabel(label, today) {
|
|
|
3296
3421
|
return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
|
|
3297
3422
|
}
|
|
3298
3423
|
function MiniSelect({ value, onChange, options }) {
|
|
3299
|
-
return /* @__PURE__ */ (0,
|
|
3424
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3300
3425
|
"select",
|
|
3301
3426
|
{
|
|
3302
3427
|
value: String(value),
|
|
@@ -3305,7 +3430,7 @@ function MiniSelect({ value, onChange, options }) {
|
|
|
3305
3430
|
if (opt) onChange(opt.value);
|
|
3306
3431
|
},
|
|
3307
3432
|
className: "rounded-control border border-border-default bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
|
|
3308
|
-
children: options.map((o) => /* @__PURE__ */ (0,
|
|
3433
|
+
children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
|
|
3309
3434
|
}
|
|
3310
3435
|
);
|
|
3311
3436
|
}
|
|
@@ -3366,8 +3491,8 @@ function DateRangePicker({
|
|
|
3366
3491
|
if (showFooter) setDraft(label);
|
|
3367
3492
|
else commit(label);
|
|
3368
3493
|
};
|
|
3369
|
-
return /* @__PURE__ */ (0,
|
|
3370
|
-
/* @__PURE__ */ (0,
|
|
3494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", ref, children: [
|
|
3495
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3371
3496
|
"button",
|
|
3372
3497
|
{
|
|
3373
3498
|
type: "button",
|
|
@@ -3376,16 +3501,16 @@ function DateRangePicker({
|
|
|
3376
3501
|
"aria-haspopup": "listbox",
|
|
3377
3502
|
className: chipTriggerClass(),
|
|
3378
3503
|
children: [
|
|
3379
|
-
/* @__PURE__ */ (0,
|
|
3380
|
-
/* @__PURE__ */ (0,
|
|
3381
|
-
/* @__PURE__ */ (0,
|
|
3504
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3505
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
|
|
3506
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
3382
3507
|
] }),
|
|
3383
|
-
/* @__PURE__ */ (0,
|
|
3508
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
|
|
3384
3509
|
]
|
|
3385
3510
|
}
|
|
3386
3511
|
),
|
|
3387
|
-
open && /* @__PURE__ */ (0,
|
|
3388
|
-
presets.map((p) => /* @__PURE__ */ (0,
|
|
3512
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
|
|
3513
|
+
presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3389
3514
|
"button",
|
|
3390
3515
|
{
|
|
3391
3516
|
type: "button",
|
|
@@ -3395,26 +3520,26 @@ function DateRangePicker({
|
|
|
3395
3520
|
},
|
|
3396
3521
|
p
|
|
3397
3522
|
)),
|
|
3398
|
-
/* @__PURE__ */ (0,
|
|
3399
|
-
/* @__PURE__ */ (0,
|
|
3400
|
-
/* @__PURE__ */ (0,
|
|
3401
|
-
/* @__PURE__ */ (0,
|
|
3523
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
|
|
3524
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
|
|
3525
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
|
|
3526
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3402
3527
|
"From",
|
|
3403
|
-
/* @__PURE__ */ (0,
|
|
3404
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3405
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3406
|
-
/* @__PURE__ */ (0,
|
|
3528
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex gap-1", children: [
|
|
3529
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3530
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3531
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3407
3532
|
] })
|
|
3408
3533
|
] }),
|
|
3409
|
-
/* @__PURE__ */ (0,
|
|
3534
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3410
3535
|
"To",
|
|
3411
|
-
/* @__PURE__ */ (0,
|
|
3412
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3413
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3414
|
-
/* @__PURE__ */ (0,
|
|
3536
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex gap-1", children: [
|
|
3537
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3538
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3539
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3415
3540
|
] })
|
|
3416
3541
|
] }),
|
|
3417
|
-
/* @__PURE__ */ (0,
|
|
3542
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3418
3543
|
"button",
|
|
3419
3544
|
{
|
|
3420
3545
|
type: "button",
|
|
@@ -3426,15 +3551,15 @@ function DateRangePicker({
|
|
|
3426
3551
|
)
|
|
3427
3552
|
] })
|
|
3428
3553
|
] }),
|
|
3429
|
-
showFooter && /* @__PURE__ */ (0,
|
|
3554
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
|
|
3430
3555
|
] })
|
|
3431
3556
|
] });
|
|
3432
3557
|
}
|
|
3433
3558
|
|
|
3434
3559
|
// src/MultiSelectFilter.tsx
|
|
3435
3560
|
var import_react16 = require("react");
|
|
3436
|
-
var
|
|
3437
|
-
var
|
|
3561
|
+
var import_lucide_react22 = require("lucide-react");
|
|
3562
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3438
3563
|
function MultiSelectFilter({
|
|
3439
3564
|
caption,
|
|
3440
3565
|
options = [],
|
|
@@ -3525,8 +3650,8 @@ function MultiSelectFilter({
|
|
|
3525
3650
|
const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
|
|
3526
3651
|
return kids.length ? { ...g, children: kids } : null;
|
|
3527
3652
|
}).filter((g) => g !== null) : [];
|
|
3528
|
-
return /* @__PURE__ */ (0,
|
|
3529
|
-
/* @__PURE__ */ (0,
|
|
3653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
|
|
3654
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3530
3655
|
"button",
|
|
3531
3656
|
{
|
|
3532
3657
|
type: "button",
|
|
@@ -3534,9 +3659,9 @@ function MultiSelectFilter({
|
|
|
3534
3659
|
"aria-expanded": open,
|
|
3535
3660
|
className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
|
|
3536
3661
|
children: [
|
|
3537
|
-
/* @__PURE__ */ (0,
|
|
3538
|
-
/* @__PURE__ */ (0,
|
|
3539
|
-
|
|
3662
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChipContent, { caption, value, icon }),
|
|
3663
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3664
|
+
import_lucide_react22.ChevronDown,
|
|
3540
3665
|
{
|
|
3541
3666
|
size: 14,
|
|
3542
3667
|
"aria-hidden": "true",
|
|
@@ -3546,7 +3671,7 @@ function MultiSelectFilter({
|
|
|
3546
3671
|
]
|
|
3547
3672
|
}
|
|
3548
3673
|
),
|
|
3549
|
-
open && /* @__PURE__ */ (0,
|
|
3674
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3550
3675
|
"div",
|
|
3551
3676
|
{
|
|
3552
3677
|
className: cn(
|
|
@@ -3557,9 +3682,9 @@ function MultiSelectFilter({
|
|
|
3557
3682
|
role: "dialog",
|
|
3558
3683
|
"aria-label": caption,
|
|
3559
3684
|
children: [
|
|
3560
|
-
searchable && /* @__PURE__ */ (0,
|
|
3561
|
-
/* @__PURE__ */ (0,
|
|
3562
|
-
/* @__PURE__ */ (0,
|
|
3685
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
3686
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
3687
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3563
3688
|
"input",
|
|
3564
3689
|
{
|
|
3565
3690
|
type: "text",
|
|
@@ -3569,37 +3694,37 @@ function MultiSelectFilter({
|
|
|
3569
3694
|
className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
|
|
3570
3695
|
}
|
|
3571
3696
|
),
|
|
3572
|
-
q && /* @__PURE__ */ (0,
|
|
3697
|
+
q && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.X, { size: 13 }) })
|
|
3573
3698
|
] }) }),
|
|
3574
|
-
/* @__PURE__ */ (0,
|
|
3699
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
|
|
3575
3700
|
groups ? visibleGroups.map((g) => {
|
|
3576
3701
|
const state = groupState(g);
|
|
3577
|
-
return /* @__PURE__ */ (0,
|
|
3578
|
-
/* @__PURE__ */ (0,
|
|
3702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
|
|
3703
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3579
3704
|
"button",
|
|
3580
3705
|
{
|
|
3581
3706
|
type: "button",
|
|
3582
3707
|
onClick: () => toggleGroup(g),
|
|
3583
3708
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3584
3709
|
children: [
|
|
3585
|
-
/* @__PURE__ */ (0,
|
|
3586
|
-
/* @__PURE__ */ (0,
|
|
3587
|
-
counts && /* @__PURE__ */ (0,
|
|
3710
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TriCheck, { state }),
|
|
3711
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
|
|
3712
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(g.id) })
|
|
3588
3713
|
]
|
|
3589
3714
|
}
|
|
3590
3715
|
),
|
|
3591
3716
|
g.children.map((c) => {
|
|
3592
3717
|
const checked = draft.includes(c.id);
|
|
3593
|
-
return /* @__PURE__ */ (0,
|
|
3718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3594
3719
|
"button",
|
|
3595
3720
|
{
|
|
3596
3721
|
type: "button",
|
|
3597
3722
|
onClick: () => toggle(c.id),
|
|
3598
3723
|
className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
|
|
3599
3724
|
children: [
|
|
3600
|
-
/* @__PURE__ */ (0,
|
|
3601
|
-
/* @__PURE__ */ (0,
|
|
3602
|
-
counts && /* @__PURE__ */ (0,
|
|
3725
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TriCheck, { state: checked ? "all" : "none" }),
|
|
3726
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
|
|
3727
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(c.id) })
|
|
3603
3728
|
]
|
|
3604
3729
|
},
|
|
3605
3730
|
c.id
|
|
@@ -3608,33 +3733,33 @@ function MultiSelectFilter({
|
|
|
3608
3733
|
] }, g.id);
|
|
3609
3734
|
}) : items.map((o) => {
|
|
3610
3735
|
const checked = draft.includes(o.id);
|
|
3611
|
-
return /* @__PURE__ */ (0,
|
|
3736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3612
3737
|
"button",
|
|
3613
3738
|
{
|
|
3614
3739
|
type: "button",
|
|
3615
3740
|
onClick: () => toggle(o.id),
|
|
3616
3741
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3617
3742
|
children: [
|
|
3618
|
-
/* @__PURE__ */ (0,
|
|
3743
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3619
3744
|
"span",
|
|
3620
3745
|
{
|
|
3621
3746
|
className: cn(
|
|
3622
3747
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
3623
3748
|
checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3624
3749
|
),
|
|
3625
|
-
children: checked && /* @__PURE__ */ (0,
|
|
3750
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Check, { size: 13, strokeWidth: 3 })
|
|
3626
3751
|
}
|
|
3627
3752
|
),
|
|
3628
|
-
/* @__PURE__ */ (0,
|
|
3629
|
-
counts && /* @__PURE__ */ (0,
|
|
3753
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
|
|
3754
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(o.id) })
|
|
3630
3755
|
]
|
|
3631
3756
|
},
|
|
3632
3757
|
o.id
|
|
3633
3758
|
);
|
|
3634
3759
|
}),
|
|
3635
|
-
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0,
|
|
3760
|
+
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
|
|
3636
3761
|
] }),
|
|
3637
|
-
showFooter ? /* @__PURE__ */ (0,
|
|
3762
|
+
showFooter ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3638
3763
|
"button",
|
|
3639
3764
|
{
|
|
3640
3765
|
type: "button",
|
|
@@ -3653,7 +3778,7 @@ function MultiSelectFilter({
|
|
|
3653
3778
|
}
|
|
3654
3779
|
function TriCheck({ state }) {
|
|
3655
3780
|
const filled = state !== "none";
|
|
3656
|
-
return /* @__PURE__ */ (0,
|
|
3781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3657
3782
|
"span",
|
|
3658
3783
|
{
|
|
3659
3784
|
className: cn(
|
|
@@ -3661,14 +3786,14 @@ function TriCheck({ state }) {
|
|
|
3661
3786
|
filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3662
3787
|
),
|
|
3663
3788
|
children: [
|
|
3664
|
-
state === "all" && /* @__PURE__ */ (0,
|
|
3665
|
-
state === "some" && /* @__PURE__ */ (0,
|
|
3789
|
+
state === "all" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Check, { size: 13, strokeWidth: 3 }),
|
|
3790
|
+
state === "some" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Minus, { size: 13, strokeWidth: 3 })
|
|
3666
3791
|
]
|
|
3667
3792
|
}
|
|
3668
3793
|
);
|
|
3669
3794
|
}
|
|
3670
3795
|
function OptionCount({ n }) {
|
|
3671
|
-
return /* @__PURE__ */ (0,
|
|
3796
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
|
|
3672
3797
|
"(",
|
|
3673
3798
|
n.toLocaleString(),
|
|
3674
3799
|
")"
|
|
@@ -3676,14 +3801,14 @@ function OptionCount({ n }) {
|
|
|
3676
3801
|
}
|
|
3677
3802
|
|
|
3678
3803
|
// src/Toggle.tsx
|
|
3679
|
-
var
|
|
3804
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3680
3805
|
var SIZES2 = {
|
|
3681
3806
|
sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
|
|
3682
3807
|
md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
|
|
3683
3808
|
};
|
|
3684
3809
|
function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
|
|
3685
3810
|
const s = SIZES2[size];
|
|
3686
|
-
return /* @__PURE__ */ (0,
|
|
3811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3687
3812
|
"button",
|
|
3688
3813
|
{
|
|
3689
3814
|
type: "button",
|
|
@@ -3699,7 +3824,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3699
3824
|
disabled && "cursor-not-allowed opacity-50",
|
|
3700
3825
|
className
|
|
3701
3826
|
),
|
|
3702
|
-
children: /* @__PURE__ */ (0,
|
|
3827
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3703
3828
|
"span",
|
|
3704
3829
|
{
|
|
3705
3830
|
className: cn(
|
|
@@ -3715,21 +3840,21 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3715
3840
|
|
|
3716
3841
|
// src/AISpark.tsx
|
|
3717
3842
|
var import_react17 = require("react");
|
|
3718
|
-
var
|
|
3719
|
-
var
|
|
3843
|
+
var import_lucide_react23 = require("lucide-react");
|
|
3844
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3720
3845
|
function AISpark({ size = 16, className }) {
|
|
3721
3846
|
const id = (0, import_react17.useId)();
|
|
3722
|
-
return /* @__PURE__ */ (0,
|
|
3723
|
-
/* @__PURE__ */ (0,
|
|
3724
|
-
/* @__PURE__ */ (0,
|
|
3725
|
-
/* @__PURE__ */ (0,
|
|
3847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
3848
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
3849
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
|
|
3850
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
|
|
3726
3851
|
] }) }) }),
|
|
3727
|
-
/* @__PURE__ */ (0,
|
|
3852
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react23.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
|
|
3728
3853
|
] });
|
|
3729
3854
|
}
|
|
3730
3855
|
|
|
3731
3856
|
// src/Freshness.tsx
|
|
3732
|
-
var
|
|
3857
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3733
3858
|
var dotColor = {
|
|
3734
3859
|
fresh: "bg-status-success",
|
|
3735
3860
|
recent: "bg-status-warning",
|
|
@@ -3741,7 +3866,7 @@ var srLabel = {
|
|
|
3741
3866
|
stale: "Older than a day"
|
|
3742
3867
|
};
|
|
3743
3868
|
function Freshness({ level }) {
|
|
3744
|
-
return /* @__PURE__ */ (0,
|
|
3869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3745
3870
|
"span",
|
|
3746
3871
|
{
|
|
3747
3872
|
className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
|
|
@@ -3767,6 +3892,7 @@ function Freshness({ level }) {
|
|
|
3767
3892
|
DataScopeFilter,
|
|
3768
3893
|
DateRangeFilter,
|
|
3769
3894
|
DateRangePicker,
|
|
3895
|
+
Delta,
|
|
3770
3896
|
FilterChipBar,
|
|
3771
3897
|
FilterDropdownFooter,
|
|
3772
3898
|
Freshness,
|