@petrarca/sonnet-ui 0.5.0 → 0.6.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.d.ts +141 -2
- package/dist/index.js +1148 -496
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -703,20 +703,679 @@ var Input = React11.forwardRef(
|
|
|
703
703
|
}
|
|
704
704
|
);
|
|
705
705
|
Input.displayName = "Input";
|
|
706
|
+
function InputError({
|
|
707
|
+
error
|
|
708
|
+
}) {
|
|
709
|
+
if (!error) return null;
|
|
710
|
+
return /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-destructive", children: error });
|
|
711
|
+
}
|
|
706
712
|
|
|
707
|
-
// src/
|
|
708
|
-
import
|
|
709
|
-
import {
|
|
713
|
+
// src/DateInput/DateInput.tsx
|
|
714
|
+
import * as React14 from "react";
|
|
715
|
+
import { Calendar as CalendarIcon } from "lucide-react";
|
|
716
|
+
import {
|
|
717
|
+
cn as cn15,
|
|
718
|
+
compileDateFormat,
|
|
719
|
+
parseDate,
|
|
720
|
+
formatDateInput,
|
|
721
|
+
formatIsoDate,
|
|
722
|
+
parseIsoDate,
|
|
723
|
+
getLocaleDateFormat
|
|
724
|
+
} from "@petrarca/sonnet-core";
|
|
725
|
+
import { useLocale as useLocale2 } from "@petrarca/sonnet-core/config";
|
|
710
726
|
|
|
711
|
-
// src/
|
|
727
|
+
// src/popover.tsx
|
|
712
728
|
import * as React12 from "react";
|
|
729
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
713
730
|
import { cn as cn13 } from "@petrarca/sonnet-core";
|
|
714
731
|
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
715
|
-
var
|
|
716
|
-
|
|
732
|
+
var Popover = PopoverPrimitive.Root;
|
|
733
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
734
|
+
var PopoverContent = React12.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx14(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx14(
|
|
735
|
+
PopoverPrimitive.Content,
|
|
736
|
+
{
|
|
737
|
+
ref,
|
|
738
|
+
align,
|
|
739
|
+
sideOffset,
|
|
740
|
+
className: cn13(
|
|
741
|
+
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
|
|
742
|
+
className
|
|
743
|
+
),
|
|
744
|
+
...props
|
|
745
|
+
}
|
|
746
|
+
) }));
|
|
747
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
748
|
+
|
|
749
|
+
// src/DateInput/Calendar.tsx
|
|
750
|
+
import * as React13 from "react";
|
|
751
|
+
import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
|
|
752
|
+
import {
|
|
753
|
+
cn as cn14,
|
|
754
|
+
getWeekdayLabels,
|
|
755
|
+
getFirstDayOfWeek
|
|
756
|
+
} from "@petrarca/sonnet-core";
|
|
757
|
+
import { useLocale } from "@petrarca/sonnet-core/config";
|
|
758
|
+
import { Fragment, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
759
|
+
var TERMINAL_VIEW = {
|
|
760
|
+
year: "years",
|
|
761
|
+
month: "months",
|
|
762
|
+
day: "days"
|
|
763
|
+
};
|
|
764
|
+
function sameDay(a, b) {
|
|
765
|
+
return a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
|
|
766
|
+
}
|
|
767
|
+
function monthName(month, locale) {
|
|
768
|
+
return new Date(2e3, month, 1).toLocaleDateString(locale, { month: "long" });
|
|
769
|
+
}
|
|
770
|
+
function decadeStart(year) {
|
|
771
|
+
return Math.floor(year / 10) * 10;
|
|
772
|
+
}
|
|
773
|
+
function buildDayCells(viewDate, firstDay) {
|
|
774
|
+
const year = viewDate.getFullYear();
|
|
775
|
+
const month = viewDate.getMonth();
|
|
776
|
+
const weekday = new Date(year, month, 1).getDay();
|
|
777
|
+
const leadingBlanks = (weekday - firstDay + 7) % 7;
|
|
778
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
779
|
+
const cells = [];
|
|
780
|
+
for (let i = 0; i < leadingBlanks; i++) cells.push(null);
|
|
781
|
+
for (let day = 1; day <= daysInMonth; day++)
|
|
782
|
+
cells.push(new Date(year, month, day));
|
|
783
|
+
return cells;
|
|
784
|
+
}
|
|
785
|
+
function DaysView({
|
|
786
|
+
viewDate,
|
|
787
|
+
value,
|
|
788
|
+
onSelect,
|
|
789
|
+
locale
|
|
790
|
+
}) {
|
|
791
|
+
const firstDay = getFirstDayOfWeek(locale);
|
|
792
|
+
const cells = buildDayCells(viewDate, firstDay);
|
|
793
|
+
const weekdayLabels = getWeekdayLabels(locale);
|
|
794
|
+
const today = /* @__PURE__ */ new Date();
|
|
795
|
+
return /* @__PURE__ */ jsxs5(Fragment, { children: [
|
|
796
|
+
/* @__PURE__ */ jsx15("div", { className: "mb-1 grid grid-cols-7 gap-1", children: weekdayLabels.map((label) => /* @__PURE__ */ jsx15(
|
|
797
|
+
"div",
|
|
798
|
+
{
|
|
799
|
+
className: "text-center text-xs font-medium text-muted-foreground",
|
|
800
|
+
children: label
|
|
801
|
+
},
|
|
802
|
+
label
|
|
803
|
+
)) }),
|
|
804
|
+
/* @__PURE__ */ jsx15("div", { className: "grid grid-cols-7 gap-1", children: cells.map((date, index) => {
|
|
805
|
+
if (!date) return /* @__PURE__ */ jsx15("div", { className: "h-8 w-8" }, `blank-${index}`);
|
|
806
|
+
const isSelected = value ? sameDay(date, value) : false;
|
|
807
|
+
const isToday = sameDay(date, today);
|
|
808
|
+
return /* @__PURE__ */ jsx15(
|
|
809
|
+
"button",
|
|
810
|
+
{
|
|
811
|
+
type: "button",
|
|
812
|
+
onClick: () => onSelect(date),
|
|
813
|
+
className: cn14(
|
|
814
|
+
"h-8 w-8 rounded-full text-center text-sm",
|
|
815
|
+
isToday && !isSelected && "border border-primary",
|
|
816
|
+
isSelected ? "bg-primary text-primary-foreground" : "hover:bg-state-hover"
|
|
817
|
+
),
|
|
818
|
+
children: date.getDate()
|
|
819
|
+
},
|
|
820
|
+
date.toISOString()
|
|
821
|
+
);
|
|
822
|
+
}) })
|
|
823
|
+
] });
|
|
824
|
+
}
|
|
825
|
+
function MonthsView({
|
|
826
|
+
viewDate,
|
|
827
|
+
value,
|
|
828
|
+
onPick,
|
|
829
|
+
locale
|
|
830
|
+
}) {
|
|
831
|
+
const now = /* @__PURE__ */ new Date();
|
|
832
|
+
return /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 12 }, (_, month) => {
|
|
833
|
+
const isCurrent = month === now.getMonth() && viewDate.getFullYear() === now.getFullYear();
|
|
834
|
+
const isSelected = !!value && month === value.getMonth() && viewDate.getFullYear() === value.getFullYear();
|
|
835
|
+
return /* @__PURE__ */ jsx15(
|
|
836
|
+
"button",
|
|
837
|
+
{
|
|
838
|
+
type: "button",
|
|
839
|
+
onClick: () => onPick(month),
|
|
840
|
+
className: cn14(
|
|
841
|
+
"rounded py-2 text-center text-sm",
|
|
842
|
+
isCurrent && !isSelected && "border border-primary",
|
|
843
|
+
isSelected ? "bg-primary text-primary-foreground" : "hover:bg-state-hover"
|
|
844
|
+
),
|
|
845
|
+
children: monthName(month, locale)
|
|
846
|
+
},
|
|
847
|
+
month
|
|
848
|
+
);
|
|
849
|
+
}) });
|
|
850
|
+
}
|
|
851
|
+
function YearsView({
|
|
852
|
+
viewDate,
|
|
853
|
+
value,
|
|
854
|
+
onPick
|
|
855
|
+
}) {
|
|
856
|
+
const now = (/* @__PURE__ */ new Date()).getFullYear();
|
|
857
|
+
const start = decadeStart(viewDate.getFullYear());
|
|
858
|
+
return /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 10 }, (_, i) => {
|
|
859
|
+
const year = start + i;
|
|
860
|
+
const isSelected = !!value && year === value.getFullYear();
|
|
861
|
+
return /* @__PURE__ */ jsx15(
|
|
862
|
+
"button",
|
|
863
|
+
{
|
|
864
|
+
type: "button",
|
|
865
|
+
onClick: () => onPick(year),
|
|
866
|
+
className: cn14(
|
|
867
|
+
"rounded py-2 text-center text-sm",
|
|
868
|
+
year === now && !isSelected && "border border-primary",
|
|
869
|
+
isSelected ? "bg-primary text-primary-foreground" : "hover:bg-state-hover"
|
|
870
|
+
),
|
|
871
|
+
children: year
|
|
872
|
+
},
|
|
873
|
+
year
|
|
874
|
+
);
|
|
875
|
+
}) });
|
|
876
|
+
}
|
|
877
|
+
function headerText(view, viewDate, locale) {
|
|
878
|
+
if (view === "months") return viewDate.getFullYear().toString();
|
|
879
|
+
if (view === "years") {
|
|
880
|
+
const start = decadeStart(viewDate.getFullYear());
|
|
881
|
+
return `${start} - ${start + 9}`;
|
|
882
|
+
}
|
|
883
|
+
return `${monthName(viewDate.getMonth(), locale)} ${viewDate.getFullYear()}`;
|
|
884
|
+
}
|
|
885
|
+
function shiftViewDate(view, viewDate, direction) {
|
|
886
|
+
if (view === "months") {
|
|
887
|
+
return new Date(viewDate.getFullYear() + direction, viewDate.getMonth(), 1);
|
|
888
|
+
}
|
|
889
|
+
if (view === "years") {
|
|
890
|
+
return new Date(decadeStart(viewDate.getFullYear()) + direction * 10, 0, 1);
|
|
891
|
+
}
|
|
892
|
+
return new Date(viewDate.getFullYear(), viewDate.getMonth() + direction, 1);
|
|
893
|
+
}
|
|
894
|
+
function Calendar({
|
|
895
|
+
value,
|
|
896
|
+
onSelect,
|
|
897
|
+
defaultViewDate,
|
|
898
|
+
precision = "day",
|
|
899
|
+
locale
|
|
900
|
+
}) {
|
|
901
|
+
const resolvedLocale = useLocale(locale);
|
|
902
|
+
const terminalView = TERMINAL_VIEW[precision];
|
|
903
|
+
const [view, setView] = React13.useState(terminalView);
|
|
904
|
+
const [viewDate, setViewDate] = React13.useState(
|
|
905
|
+
value ?? defaultViewDate ?? /* @__PURE__ */ new Date()
|
|
906
|
+
);
|
|
907
|
+
React13.useEffect(() => {
|
|
908
|
+
if (value) setViewDate(value);
|
|
909
|
+
}, [value]);
|
|
910
|
+
const handleMonthPick = (month) => {
|
|
911
|
+
const next = new Date(viewDate.getFullYear(), month, 1);
|
|
912
|
+
if (precision === "month") {
|
|
913
|
+
onSelect(next);
|
|
914
|
+
return;
|
|
915
|
+
}
|
|
916
|
+
setViewDate(next);
|
|
917
|
+
setView("days");
|
|
918
|
+
};
|
|
919
|
+
const handleYearPick = (year) => {
|
|
920
|
+
const next = new Date(year, viewDate.getMonth(), 1);
|
|
921
|
+
if (precision === "year") {
|
|
922
|
+
onSelect(next);
|
|
923
|
+
return;
|
|
924
|
+
}
|
|
925
|
+
setViewDate(next);
|
|
926
|
+
setView("months");
|
|
927
|
+
};
|
|
928
|
+
const canDrillUp = view !== "years";
|
|
929
|
+
const drillUp = () => setView(view === "days" ? "months" : "years");
|
|
930
|
+
return /* @__PURE__ */ jsxs5("div", { className: "w-64", children: [
|
|
931
|
+
/* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
932
|
+
/* @__PURE__ */ jsx15(
|
|
933
|
+
"button",
|
|
934
|
+
{
|
|
935
|
+
type: "button",
|
|
936
|
+
onClick: () => setViewDate(shiftViewDate(view, viewDate, -1)),
|
|
937
|
+
className: "rounded-full p-1 hover:bg-state-hover",
|
|
938
|
+
"aria-label": "Previous",
|
|
939
|
+
children: /* @__PURE__ */ jsx15(ChevronLeft, { size: 16 })
|
|
940
|
+
}
|
|
941
|
+
),
|
|
942
|
+
/* @__PURE__ */ jsx15(
|
|
943
|
+
"button",
|
|
944
|
+
{
|
|
945
|
+
type: "button",
|
|
946
|
+
onClick: canDrillUp ? drillUp : void 0,
|
|
947
|
+
disabled: !canDrillUp,
|
|
948
|
+
className: cn14(
|
|
949
|
+
"rounded px-2 py-1 font-medium",
|
|
950
|
+
canDrillUp && "hover:bg-state-hover"
|
|
951
|
+
),
|
|
952
|
+
children: headerText(view, viewDate, resolvedLocale)
|
|
953
|
+
}
|
|
954
|
+
),
|
|
955
|
+
/* @__PURE__ */ jsx15(
|
|
956
|
+
"button",
|
|
957
|
+
{
|
|
958
|
+
type: "button",
|
|
959
|
+
onClick: () => setViewDate(shiftViewDate(view, viewDate, 1)),
|
|
960
|
+
className: "rounded-full p-1 hover:bg-state-hover",
|
|
961
|
+
"aria-label": "Next",
|
|
962
|
+
children: /* @__PURE__ */ jsx15(ChevronRight2, { size: 16 })
|
|
963
|
+
}
|
|
964
|
+
)
|
|
965
|
+
] }),
|
|
966
|
+
view === "days" && /* @__PURE__ */ jsx15(
|
|
967
|
+
DaysView,
|
|
968
|
+
{
|
|
969
|
+
viewDate,
|
|
970
|
+
value,
|
|
971
|
+
onSelect,
|
|
972
|
+
locale: resolvedLocale
|
|
973
|
+
}
|
|
974
|
+
),
|
|
975
|
+
view === "months" && /* @__PURE__ */ jsx15(
|
|
976
|
+
MonthsView,
|
|
977
|
+
{
|
|
978
|
+
viewDate,
|
|
979
|
+
value,
|
|
980
|
+
onPick: handleMonthPick,
|
|
981
|
+
locale: resolvedLocale
|
|
982
|
+
}
|
|
983
|
+
),
|
|
984
|
+
view === "years" && /* @__PURE__ */ jsx15(YearsView, { viewDate, value, onPick: handleYearPick })
|
|
985
|
+
] });
|
|
986
|
+
}
|
|
987
|
+
|
|
988
|
+
// src/DateInput/DateInput.tsx
|
|
989
|
+
import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
990
|
+
function DateInput({
|
|
991
|
+
value,
|
|
992
|
+
onChange,
|
|
993
|
+
precision = "day",
|
|
994
|
+
locale,
|
|
995
|
+
id,
|
|
996
|
+
name,
|
|
997
|
+
placeholder,
|
|
998
|
+
required,
|
|
999
|
+
disabled,
|
|
1000
|
+
error,
|
|
1001
|
+
className,
|
|
1002
|
+
onBlur
|
|
1003
|
+
}) {
|
|
1004
|
+
const resolvedLocale = useLocale2(locale);
|
|
1005
|
+
const [open, setOpen] = React14.useState(false);
|
|
1006
|
+
const [inputValue, setInputValue] = React14.useState("");
|
|
1007
|
+
const [parseError, setParseError] = React14.useState("");
|
|
1008
|
+
const fmt = React14.useMemo(
|
|
1009
|
+
() => compileDateFormat({
|
|
1010
|
+
format: getLocaleDateFormat(resolvedLocale, precision)
|
|
1011
|
+
}),
|
|
1012
|
+
[resolvedLocale, precision]
|
|
1013
|
+
);
|
|
1014
|
+
const selectedDate = React14.useMemo(() => parseIsoDate(value), [value]);
|
|
1015
|
+
React14.useEffect(() => {
|
|
1016
|
+
setInputValue(selectedDate ? formatDateInput(selectedDate, fmt) : "");
|
|
1017
|
+
setParseError("");
|
|
1018
|
+
}, [selectedDate, fmt]);
|
|
1019
|
+
const commit = (date) => {
|
|
1020
|
+
onChange(date ? formatIsoDate(date, precision) : "");
|
|
1021
|
+
};
|
|
1022
|
+
const handleBlur = () => {
|
|
1023
|
+
if (!inputValue.trim()) {
|
|
1024
|
+
setParseError("");
|
|
1025
|
+
commit(null);
|
|
1026
|
+
onBlur?.();
|
|
1027
|
+
return;
|
|
1028
|
+
}
|
|
1029
|
+
const result = parseDate(inputValue, fmt);
|
|
1030
|
+
if (result.date) {
|
|
1031
|
+
setInputValue(result.value);
|
|
1032
|
+
setParseError("");
|
|
1033
|
+
commit(result.date);
|
|
1034
|
+
} else {
|
|
1035
|
+
setParseError(result.error || "Invalid date");
|
|
1036
|
+
}
|
|
1037
|
+
onBlur?.();
|
|
1038
|
+
};
|
|
1039
|
+
const handleCalendarSelect = (date) => {
|
|
1040
|
+
setInputValue(formatDateInput(date, fmt));
|
|
1041
|
+
setParseError("");
|
|
1042
|
+
commit(date);
|
|
1043
|
+
setOpen(false);
|
|
1044
|
+
};
|
|
1045
|
+
const shownError = error || parseError;
|
|
1046
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn15("relative", className), children: [
|
|
1047
|
+
/* @__PURE__ */ jsxs6("div", { className: "relative", children: [
|
|
1048
|
+
/* @__PURE__ */ jsx16(
|
|
1049
|
+
Input,
|
|
1050
|
+
{
|
|
1051
|
+
id,
|
|
1052
|
+
name,
|
|
1053
|
+
type: "text",
|
|
1054
|
+
value: inputValue,
|
|
1055
|
+
onChange: (event) => {
|
|
1056
|
+
setInputValue(event.currentTarget.value);
|
|
1057
|
+
setParseError("");
|
|
1058
|
+
},
|
|
1059
|
+
onBlur: handleBlur,
|
|
1060
|
+
onKeyDown: (event) => {
|
|
1061
|
+
if (event.key === "Enter") {
|
|
1062
|
+
handleBlur();
|
|
1063
|
+
setOpen(false);
|
|
1064
|
+
} else if (event.key === "Escape") {
|
|
1065
|
+
setOpen(false);
|
|
1066
|
+
}
|
|
1067
|
+
},
|
|
1068
|
+
placeholder: placeholder ?? fmt.format,
|
|
1069
|
+
required,
|
|
1070
|
+
disabled,
|
|
1071
|
+
autoComplete: "off",
|
|
1072
|
+
"aria-invalid": shownError ? true : void 0,
|
|
1073
|
+
className: cn15("pr-10", shownError && "border-destructive")
|
|
1074
|
+
}
|
|
1075
|
+
),
|
|
1076
|
+
/* @__PURE__ */ jsxs6(Popover, { open, onOpenChange: setOpen, children: [
|
|
1077
|
+
/* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
|
|
1078
|
+
"button",
|
|
1079
|
+
{
|
|
1080
|
+
type: "button",
|
|
1081
|
+
disabled,
|
|
1082
|
+
"aria-label": "Open calendar",
|
|
1083
|
+
className: "absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
|
1084
|
+
children: /* @__PURE__ */ jsx16(CalendarIcon, { size: 16 })
|
|
1085
|
+
}
|
|
1086
|
+
) }),
|
|
1087
|
+
/* @__PURE__ */ jsx16(PopoverContent, { align: "end", className: "w-auto p-2", children: /* @__PURE__ */ jsx16(
|
|
1088
|
+
Calendar,
|
|
1089
|
+
{
|
|
1090
|
+
value: selectedDate,
|
|
1091
|
+
onSelect: handleCalendarSelect,
|
|
1092
|
+
precision,
|
|
1093
|
+
locale: resolvedLocale
|
|
1094
|
+
}
|
|
1095
|
+
) })
|
|
1096
|
+
] })
|
|
1097
|
+
] }),
|
|
1098
|
+
/* @__PURE__ */ jsx16(InputError, { error: shownError })
|
|
1099
|
+
] });
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
// src/TimeInput/TimeInput.tsx
|
|
1103
|
+
import * as React15 from "react";
|
|
1104
|
+
import { Clock } from "lucide-react";
|
|
1105
|
+
import {
|
|
1106
|
+
cn as cn16,
|
|
1107
|
+
parseTime,
|
|
1108
|
+
normalizeTime
|
|
1109
|
+
} from "@petrarca/sonnet-core";
|
|
1110
|
+
import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1111
|
+
function TimeInput({
|
|
1112
|
+
value,
|
|
1113
|
+
onChange,
|
|
1114
|
+
granularity = "minute",
|
|
1115
|
+
id,
|
|
1116
|
+
name,
|
|
1117
|
+
placeholder,
|
|
1118
|
+
required,
|
|
1119
|
+
disabled,
|
|
1120
|
+
error,
|
|
1121
|
+
className,
|
|
1122
|
+
onBlur
|
|
1123
|
+
}) {
|
|
1124
|
+
const [inputValue, setInputValue] = React15.useState("");
|
|
1125
|
+
const [parseError, setParseError] = React15.useState("");
|
|
1126
|
+
const normalized = React15.useMemo(
|
|
1127
|
+
() => normalizeTime(value, granularity),
|
|
1128
|
+
[value, granularity]
|
|
1129
|
+
);
|
|
1130
|
+
React15.useEffect(() => {
|
|
1131
|
+
setInputValue(normalized);
|
|
1132
|
+
setParseError("");
|
|
1133
|
+
}, [normalized]);
|
|
1134
|
+
const handleBlur = () => {
|
|
1135
|
+
if (!inputValue.trim()) {
|
|
1136
|
+
setParseError("");
|
|
1137
|
+
onChange("");
|
|
1138
|
+
onBlur?.();
|
|
1139
|
+
return;
|
|
1140
|
+
}
|
|
1141
|
+
const result = parseTime(inputValue, granularity);
|
|
1142
|
+
if (result.value) {
|
|
1143
|
+
setInputValue(result.value);
|
|
1144
|
+
setParseError("");
|
|
1145
|
+
onChange(result.value);
|
|
1146
|
+
} else {
|
|
1147
|
+
setParseError(result.error || "Invalid time");
|
|
1148
|
+
}
|
|
1149
|
+
onBlur?.();
|
|
1150
|
+
};
|
|
1151
|
+
const shownError = error || parseError;
|
|
1152
|
+
const placeholderText = placeholder ?? (granularity === "second" ? "HH:MM:SS" : "HH:MM");
|
|
1153
|
+
return /* @__PURE__ */ jsxs7("div", { className: cn16("relative", className), children: [
|
|
1154
|
+
/* @__PURE__ */ jsxs7("div", { className: "relative", children: [
|
|
1155
|
+
/* @__PURE__ */ jsx17(
|
|
1156
|
+
Input,
|
|
1157
|
+
{
|
|
1158
|
+
id,
|
|
1159
|
+
name,
|
|
1160
|
+
type: "text",
|
|
1161
|
+
inputMode: "numeric",
|
|
1162
|
+
value: inputValue,
|
|
1163
|
+
onChange: (event) => {
|
|
1164
|
+
setInputValue(event.currentTarget.value);
|
|
1165
|
+
setParseError("");
|
|
1166
|
+
},
|
|
1167
|
+
onBlur: handleBlur,
|
|
1168
|
+
onKeyDown: (event) => {
|
|
1169
|
+
if (event.key === "Enter") handleBlur();
|
|
1170
|
+
},
|
|
1171
|
+
placeholder: placeholderText,
|
|
1172
|
+
required,
|
|
1173
|
+
disabled,
|
|
1174
|
+
autoComplete: "off",
|
|
1175
|
+
"aria-invalid": shownError ? true : void 0,
|
|
1176
|
+
className: cn16("pr-10", shownError && "border-destructive")
|
|
1177
|
+
}
|
|
1178
|
+
),
|
|
1179
|
+
/* @__PURE__ */ jsx17("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground", children: /* @__PURE__ */ jsx17(Clock, { size: 16 }) })
|
|
1180
|
+
] }),
|
|
1181
|
+
/* @__PURE__ */ jsx17(InputError, { error: shownError })
|
|
1182
|
+
] });
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
// src/DateTimeInput/DateTimeInput.tsx
|
|
1186
|
+
import * as React16 from "react";
|
|
1187
|
+
import {
|
|
1188
|
+
cn as cn17,
|
|
1189
|
+
splitDateTime,
|
|
1190
|
+
joinDateTime,
|
|
1191
|
+
formatIsoDate as formatIsoDate2
|
|
1192
|
+
} from "@petrarca/sonnet-core";
|
|
1193
|
+
import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1194
|
+
function DateTimeInput({
|
|
1195
|
+
value,
|
|
1196
|
+
onChange,
|
|
1197
|
+
granularity = "minute",
|
|
1198
|
+
timeZone,
|
|
1199
|
+
locale,
|
|
1200
|
+
idPrefix,
|
|
1201
|
+
required,
|
|
1202
|
+
disabled,
|
|
1203
|
+
error,
|
|
1204
|
+
className,
|
|
1205
|
+
onBlur
|
|
1206
|
+
}) {
|
|
1207
|
+
const { date, time } = React16.useMemo(() => splitDateTime(value), [value]);
|
|
1208
|
+
const handleDateChange = (nextDate) => {
|
|
1209
|
+
onChange(joinDateTime(nextDate, time));
|
|
1210
|
+
};
|
|
1211
|
+
const handleTimeChange = (nextTime) => {
|
|
1212
|
+
if (!nextTime) {
|
|
1213
|
+
onChange(date ? joinDateTime(date, "") : "");
|
|
1214
|
+
return;
|
|
1215
|
+
}
|
|
1216
|
+
onChange(joinDateTime(date || formatIsoDate2(/* @__PURE__ */ new Date()), nextTime));
|
|
1217
|
+
};
|
|
1218
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn17("space-y-1", className), children: [
|
|
1219
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex gap-2", children: [
|
|
1220
|
+
/* @__PURE__ */ jsx18("div", { className: "flex-1", children: /* @__PURE__ */ jsx18(
|
|
1221
|
+
DateInput,
|
|
1222
|
+
{
|
|
1223
|
+
id: idPrefix ? `${idPrefix}-date` : void 0,
|
|
1224
|
+
value: date,
|
|
1225
|
+
onChange: handleDateChange,
|
|
1226
|
+
locale,
|
|
1227
|
+
error,
|
|
1228
|
+
required,
|
|
1229
|
+
disabled,
|
|
1230
|
+
onBlur
|
|
1231
|
+
}
|
|
1232
|
+
) }),
|
|
1233
|
+
/* @__PURE__ */ jsx18("div", { className: "w-32", children: /* @__PURE__ */ jsx18(
|
|
1234
|
+
TimeInput,
|
|
1235
|
+
{
|
|
1236
|
+
id: idPrefix ? `${idPrefix}-time` : void 0,
|
|
1237
|
+
value: time,
|
|
1238
|
+
onChange: handleTimeChange,
|
|
1239
|
+
granularity,
|
|
1240
|
+
disabled,
|
|
1241
|
+
onBlur
|
|
1242
|
+
}
|
|
1243
|
+
) })
|
|
1244
|
+
] }),
|
|
1245
|
+
timeZone && /* @__PURE__ */ jsxs8("p", { className: "text-xs text-tertiary-foreground", children: [
|
|
1246
|
+
"Times in ",
|
|
1247
|
+
timeZone
|
|
1248
|
+
] })
|
|
1249
|
+
] });
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
// src/select.tsx
|
|
1253
|
+
import * as React17 from "react";
|
|
1254
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
1255
|
+
import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
|
|
1256
|
+
import { cn as cn18 } from "@petrarca/sonnet-core";
|
|
1257
|
+
import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1258
|
+
var Select = SelectPrimitive.Root;
|
|
1259
|
+
var SelectGroup = SelectPrimitive.Group;
|
|
1260
|
+
var SelectValue = SelectPrimitive.Value;
|
|
1261
|
+
var SelectTrigger = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
|
|
1262
|
+
SelectPrimitive.Trigger,
|
|
1263
|
+
{
|
|
1264
|
+
ref,
|
|
1265
|
+
className: cn18(
|
|
1266
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
|
|
1267
|
+
className
|
|
1268
|
+
),
|
|
1269
|
+
...props,
|
|
1270
|
+
children: [
|
|
1271
|
+
children,
|
|
1272
|
+
/* @__PURE__ */ jsx19(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx19(ChevronDown, { className: "h-4 w-4 opacity-60" }) })
|
|
1273
|
+
]
|
|
1274
|
+
}
|
|
1275
|
+
));
|
|
1276
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
1277
|
+
var SelectScrollUpButton = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1278
|
+
SelectPrimitive.ScrollUpButton,
|
|
1279
|
+
{
|
|
1280
|
+
ref,
|
|
1281
|
+
className: cn18(
|
|
1282
|
+
"flex cursor-default items-center justify-center py-1",
|
|
1283
|
+
className
|
|
1284
|
+
),
|
|
1285
|
+
...props,
|
|
1286
|
+
children: /* @__PURE__ */ jsx19(ChevronUp, { className: "h-4 w-4" })
|
|
1287
|
+
}
|
|
1288
|
+
));
|
|
1289
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
1290
|
+
var SelectScrollDownButton = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1291
|
+
SelectPrimitive.ScrollDownButton,
|
|
1292
|
+
{
|
|
1293
|
+
ref,
|
|
1294
|
+
className: cn18(
|
|
1295
|
+
"flex cursor-default items-center justify-center py-1",
|
|
1296
|
+
className
|
|
1297
|
+
),
|
|
1298
|
+
...props,
|
|
1299
|
+
children: /* @__PURE__ */ jsx19(ChevronDown, { className: "h-4 w-4" })
|
|
1300
|
+
}
|
|
1301
|
+
));
|
|
1302
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
1303
|
+
var SelectContent = React17.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx19(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
|
|
1304
|
+
SelectPrimitive.Content,
|
|
1305
|
+
{
|
|
1306
|
+
ref,
|
|
1307
|
+
className: cn18(
|
|
1308
|
+
"relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
|
1309
|
+
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
1310
|
+
className
|
|
1311
|
+
),
|
|
1312
|
+
position,
|
|
1313
|
+
...props,
|
|
1314
|
+
children: [
|
|
1315
|
+
/* @__PURE__ */ jsx19(SelectScrollUpButton, {}),
|
|
1316
|
+
/* @__PURE__ */ jsx19(
|
|
1317
|
+
SelectPrimitive.Viewport,
|
|
1318
|
+
{
|
|
1319
|
+
className: cn18(
|
|
1320
|
+
"p-1",
|
|
1321
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
1322
|
+
),
|
|
1323
|
+
children
|
|
1324
|
+
}
|
|
1325
|
+
),
|
|
1326
|
+
/* @__PURE__ */ jsx19(SelectScrollDownButton, {})
|
|
1327
|
+
]
|
|
1328
|
+
}
|
|
1329
|
+
) }));
|
|
1330
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
1331
|
+
var SelectLabel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1332
|
+
SelectPrimitive.Label,
|
|
1333
|
+
{
|
|
1334
|
+
ref,
|
|
1335
|
+
className: cn18("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
1336
|
+
...props
|
|
1337
|
+
}
|
|
1338
|
+
));
|
|
1339
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
1340
|
+
var SelectItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
|
|
1341
|
+
SelectPrimitive.Item,
|
|
1342
|
+
{
|
|
1343
|
+
ref,
|
|
1344
|
+
className: cn18(
|
|
1345
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
1346
|
+
className
|
|
1347
|
+
),
|
|
1348
|
+
...props,
|
|
1349
|
+
children: [
|
|
1350
|
+
/* @__PURE__ */ jsx19("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx19(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx19(Check3, { className: "h-4 w-4" }) }) }),
|
|
1351
|
+
/* @__PURE__ */ jsx19(SelectPrimitive.ItemText, { children })
|
|
1352
|
+
]
|
|
1353
|
+
}
|
|
1354
|
+
));
|
|
1355
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
1356
|
+
var SelectSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1357
|
+
SelectPrimitive.Separator,
|
|
1358
|
+
{
|
|
1359
|
+
ref,
|
|
1360
|
+
className: cn18("-mx-1 my-1 h-px bg-muted", className),
|
|
1361
|
+
...props
|
|
1362
|
+
}
|
|
1363
|
+
));
|
|
1364
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
1365
|
+
|
|
1366
|
+
// src/input-group.tsx
|
|
1367
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
1368
|
+
import { cn as cn20 } from "@petrarca/sonnet-core";
|
|
1369
|
+
|
|
1370
|
+
// src/textarea.tsx
|
|
1371
|
+
import * as React18 from "react";
|
|
1372
|
+
import { cn as cn19 } from "@petrarca/sonnet-core";
|
|
1373
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1374
|
+
var Textarea = React18.forwardRef(({ className, ...props }, ref) => {
|
|
1375
|
+
return /* @__PURE__ */ jsx20(
|
|
717
1376
|
"textarea",
|
|
718
1377
|
{
|
|
719
|
-
className:
|
|
1378
|
+
className: cn19(
|
|
720
1379
|
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
721
1380
|
className
|
|
722
1381
|
),
|
|
@@ -728,14 +1387,14 @@ var Textarea = React12.forwardRef(({ className, ...props }, ref) => {
|
|
|
728
1387
|
Textarea.displayName = "Textarea";
|
|
729
1388
|
|
|
730
1389
|
// src/input-group.tsx
|
|
731
|
-
import { jsx as
|
|
1390
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
732
1391
|
function InputGroup({ className, ...props }) {
|
|
733
|
-
return /* @__PURE__ */
|
|
1392
|
+
return /* @__PURE__ */ jsx21(
|
|
734
1393
|
"div",
|
|
735
1394
|
{
|
|
736
1395
|
"data-slot": "input-group",
|
|
737
1396
|
role: "group",
|
|
738
|
-
className:
|
|
1397
|
+
className: cn20(
|
|
739
1398
|
"group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
|
|
740
1399
|
"h-9 has-[>textarea]:h-auto",
|
|
741
1400
|
// Variants based on alignment.
|
|
@@ -774,13 +1433,13 @@ function InputGroupAddon({
|
|
|
774
1433
|
align = "inline-start",
|
|
775
1434
|
...props
|
|
776
1435
|
}) {
|
|
777
|
-
return /* @__PURE__ */
|
|
1436
|
+
return /* @__PURE__ */ jsx21(
|
|
778
1437
|
"div",
|
|
779
1438
|
{
|
|
780
1439
|
role: "group",
|
|
781
1440
|
"data-slot": "input-group-addon",
|
|
782
1441
|
"data-align": align,
|
|
783
|
-
className:
|
|
1442
|
+
className: cn20(inputGroupAddonVariants({ align }), className),
|
|
784
1443
|
onClick: (e) => {
|
|
785
1444
|
if (e.target.closest("button")) {
|
|
786
1445
|
return;
|
|
@@ -814,22 +1473,22 @@ function InputGroupButton({
|
|
|
814
1473
|
size = "xs",
|
|
815
1474
|
...props
|
|
816
1475
|
}) {
|
|
817
|
-
return /* @__PURE__ */
|
|
1476
|
+
return /* @__PURE__ */ jsx21(
|
|
818
1477
|
Button,
|
|
819
1478
|
{
|
|
820
1479
|
type,
|
|
821
1480
|
"data-size": size,
|
|
822
1481
|
variant,
|
|
823
|
-
className:
|
|
1482
|
+
className: cn20(inputGroupButtonVariants({ size }), className),
|
|
824
1483
|
...props
|
|
825
1484
|
}
|
|
826
1485
|
);
|
|
827
1486
|
}
|
|
828
1487
|
function InputGroupText({ className, ...props }) {
|
|
829
|
-
return /* @__PURE__ */
|
|
1488
|
+
return /* @__PURE__ */ jsx21(
|
|
830
1489
|
"span",
|
|
831
1490
|
{
|
|
832
|
-
className:
|
|
1491
|
+
className: cn20(
|
|
833
1492
|
"text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
|
|
834
1493
|
className
|
|
835
1494
|
),
|
|
@@ -841,11 +1500,11 @@ function InputGroupInput({
|
|
|
841
1500
|
className,
|
|
842
1501
|
...props
|
|
843
1502
|
}) {
|
|
844
|
-
return /* @__PURE__ */
|
|
1503
|
+
return /* @__PURE__ */ jsx21(
|
|
845
1504
|
Input,
|
|
846
1505
|
{
|
|
847
1506
|
"data-slot": "input-group-control",
|
|
848
|
-
className:
|
|
1507
|
+
className: cn20(
|
|
849
1508
|
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
|
|
850
1509
|
className
|
|
851
1510
|
),
|
|
@@ -857,11 +1516,11 @@ function InputGroupTextarea({
|
|
|
857
1516
|
className,
|
|
858
1517
|
...props
|
|
859
1518
|
}) {
|
|
860
|
-
return /* @__PURE__ */
|
|
1519
|
+
return /* @__PURE__ */ jsx21(
|
|
861
1520
|
Textarea,
|
|
862
1521
|
{
|
|
863
1522
|
"data-slot": "input-group-control",
|
|
864
|
-
className:
|
|
1523
|
+
className: cn20(
|
|
865
1524
|
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
|
866
1525
|
className
|
|
867
1526
|
),
|
|
@@ -871,95 +1530,73 @@ function InputGroupTextarea({
|
|
|
871
1530
|
}
|
|
872
1531
|
|
|
873
1532
|
// src/label.tsx
|
|
874
|
-
import * as
|
|
1533
|
+
import * as React19 from "react";
|
|
875
1534
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
876
1535
|
import { cva as cva5 } from "class-variance-authority";
|
|
877
|
-
import { cn as
|
|
878
|
-
import { jsx as
|
|
1536
|
+
import { cn as cn21 } from "@petrarca/sonnet-core";
|
|
1537
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
879
1538
|
var labelVariants = cva5(
|
|
880
1539
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
881
1540
|
);
|
|
882
|
-
var
|
|
1541
|
+
var Label3 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
883
1542
|
LabelPrimitive.Root,
|
|
884
1543
|
{
|
|
885
1544
|
ref,
|
|
886
|
-
className:
|
|
1545
|
+
className: cn21(labelVariants(), className),
|
|
887
1546
|
...props
|
|
888
1547
|
}
|
|
889
1548
|
));
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
// src/popover.tsx
|
|
893
|
-
import * as React14 from "react";
|
|
894
|
-
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
895
|
-
import { cn as cn16 } from "@petrarca/sonnet-core";
|
|
896
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
897
|
-
var Popover = PopoverPrimitive.Root;
|
|
898
|
-
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
899
|
-
var PopoverContent = React14.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
|
|
900
|
-
PopoverPrimitive.Content,
|
|
901
|
-
{
|
|
902
|
-
ref,
|
|
903
|
-
align,
|
|
904
|
-
sideOffset,
|
|
905
|
-
className: cn16(
|
|
906
|
-
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
|
|
907
|
-
className
|
|
908
|
-
),
|
|
909
|
-
...props
|
|
910
|
-
}
|
|
911
|
-
) }));
|
|
912
|
-
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
1549
|
+
Label3.displayName = LabelPrimitive.Root.displayName;
|
|
913
1550
|
|
|
914
1551
|
// src/scroll-area.tsx
|
|
915
|
-
import * as
|
|
1552
|
+
import * as React20 from "react";
|
|
916
1553
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
917
|
-
import { cn as
|
|
918
|
-
import { jsx as
|
|
919
|
-
var ScrollArea =
|
|
1554
|
+
import { cn as cn22 } from "@petrarca/sonnet-core";
|
|
1555
|
+
import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1556
|
+
var ScrollArea = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
|
|
920
1557
|
ScrollAreaPrimitive.Root,
|
|
921
1558
|
{
|
|
922
1559
|
ref,
|
|
923
|
-
className:
|
|
1560
|
+
className: cn22("relative overflow-hidden", className),
|
|
924
1561
|
...props,
|
|
925
1562
|
children: [
|
|
926
|
-
/* @__PURE__ */
|
|
927
|
-
/* @__PURE__ */
|
|
928
|
-
/* @__PURE__ */
|
|
1563
|
+
/* @__PURE__ */ jsx23(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
|
|
1564
|
+
/* @__PURE__ */ jsx23(ScrollBar, {}),
|
|
1565
|
+
/* @__PURE__ */ jsx23(ScrollAreaPrimitive.Corner, {})
|
|
929
1566
|
]
|
|
930
1567
|
}
|
|
931
1568
|
));
|
|
932
1569
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
933
|
-
var ScrollBar =
|
|
1570
|
+
var ScrollBar = React20.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
934
1571
|
ScrollAreaPrimitive.ScrollAreaScrollbar,
|
|
935
1572
|
{
|
|
936
1573
|
ref,
|
|
937
1574
|
orientation,
|
|
938
|
-
className:
|
|
1575
|
+
className: cn22(
|
|
939
1576
|
"flex touch-none select-none transition-colors",
|
|
940
1577
|
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
|
|
941
1578
|
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
|
942
1579
|
className
|
|
943
1580
|
),
|
|
944
1581
|
...props,
|
|
945
|
-
children: /* @__PURE__ */
|
|
1582
|
+
children: /* @__PURE__ */ jsx23(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
|
|
946
1583
|
}
|
|
947
1584
|
));
|
|
948
1585
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
949
1586
|
|
|
950
1587
|
// src/separator.tsx
|
|
951
|
-
import * as
|
|
1588
|
+
import * as React21 from "react";
|
|
952
1589
|
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
953
|
-
import { cn as
|
|
954
|
-
import { jsx as
|
|
955
|
-
var
|
|
956
|
-
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */
|
|
1590
|
+
import { cn as cn23 } from "@petrarca/sonnet-core";
|
|
1591
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1592
|
+
var Separator3 = React21.forwardRef(
|
|
1593
|
+
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx24(
|
|
957
1594
|
SeparatorPrimitive.Root,
|
|
958
1595
|
{
|
|
959
1596
|
ref,
|
|
960
1597
|
decorative,
|
|
961
1598
|
orientation,
|
|
962
|
-
className:
|
|
1599
|
+
className: cn23(
|
|
963
1600
|
"shrink-0 bg-border",
|
|
964
1601
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
965
1602
|
className
|
|
@@ -968,22 +1605,22 @@ var Separator2 = React16.forwardRef(
|
|
|
968
1605
|
}
|
|
969
1606
|
)
|
|
970
1607
|
);
|
|
971
|
-
|
|
1608
|
+
Separator3.displayName = SeparatorPrimitive.Root.displayName;
|
|
972
1609
|
|
|
973
1610
|
// src/resize-handle.tsx
|
|
974
|
-
import * as
|
|
975
|
-
import { cn as
|
|
976
|
-
import { jsx as
|
|
977
|
-
var ResizeHandle =
|
|
1611
|
+
import * as React22 from "react";
|
|
1612
|
+
import { cn as cn24 } from "@petrarca/sonnet-core";
|
|
1613
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1614
|
+
var ResizeHandle = React22.forwardRef(
|
|
978
1615
|
({ orientation = "vertical", gripLength = 48, className, style, ...props }, ref) => {
|
|
979
1616
|
const isVertical = orientation === "vertical";
|
|
980
|
-
return /* @__PURE__ */
|
|
1617
|
+
return /* @__PURE__ */ jsx25(
|
|
981
1618
|
"div",
|
|
982
1619
|
{
|
|
983
1620
|
ref,
|
|
984
1621
|
role: "separator",
|
|
985
1622
|
"aria-orientation": orientation,
|
|
986
|
-
className:
|
|
1623
|
+
className: cn24(
|
|
987
1624
|
"group relative flex shrink-0 select-none touch-none items-center justify-center rounded-sm",
|
|
988
1625
|
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
|
|
989
1626
|
isVertical ? "mx-1 w-2 cursor-col-resize" : "my-1 h-2 cursor-row-resize",
|
|
@@ -991,7 +1628,7 @@ var ResizeHandle = React17.forwardRef(
|
|
|
991
1628
|
),
|
|
992
1629
|
style,
|
|
993
1630
|
...props,
|
|
994
|
-
children: /* @__PURE__ */
|
|
1631
|
+
children: /* @__PURE__ */ jsx25(
|
|
995
1632
|
"div",
|
|
996
1633
|
{
|
|
997
1634
|
className: "pointer-events-none absolute rounded-full bg-border transition-colors group-hover:bg-border-strong",
|
|
@@ -1005,20 +1642,20 @@ var ResizeHandle = React17.forwardRef(
|
|
|
1005
1642
|
ResizeHandle.displayName = "ResizeHandle";
|
|
1006
1643
|
|
|
1007
1644
|
// src/sheet.tsx
|
|
1008
|
-
import * as
|
|
1645
|
+
import * as React23 from "react";
|
|
1009
1646
|
import * as DialogPrimitive2 from "@radix-ui/react-dialog";
|
|
1010
1647
|
import { X as X2 } from "lucide-react";
|
|
1011
|
-
import { cn as
|
|
1012
|
-
import { jsx as
|
|
1648
|
+
import { cn as cn25 } from "@petrarca/sonnet-core";
|
|
1649
|
+
import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1013
1650
|
var Sheet = DialogPrimitive2.Root;
|
|
1014
1651
|
var SheetTrigger = DialogPrimitive2.Trigger;
|
|
1015
1652
|
var SheetClose = DialogPrimitive2.Close;
|
|
1016
1653
|
var SheetPortal = DialogPrimitive2.Portal;
|
|
1017
|
-
var SheetOverlay =
|
|
1654
|
+
var SheetOverlay = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
|
|
1018
1655
|
DialogPrimitive2.Overlay,
|
|
1019
1656
|
{
|
|
1020
1657
|
ref,
|
|
1021
|
-
className:
|
|
1658
|
+
className: cn25(
|
|
1022
1659
|
"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
1023
1660
|
className
|
|
1024
1661
|
),
|
|
@@ -1026,14 +1663,14 @@ var SheetOverlay = React18.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
1026
1663
|
}
|
|
1027
1664
|
));
|
|
1028
1665
|
SheetOverlay.displayName = "SheetOverlay";
|
|
1029
|
-
var SheetContent =
|
|
1030
|
-
({ className, children, side = "right", offsetTop = "0px", style, ...props }, ref) => /* @__PURE__ */
|
|
1031
|
-
/* @__PURE__ */
|
|
1032
|
-
/* @__PURE__ */
|
|
1666
|
+
var SheetContent = React23.forwardRef(
|
|
1667
|
+
({ className, children, side = "right", offsetTop = "0px", style, ...props }, ref) => /* @__PURE__ */ jsxs11(SheetPortal, { children: [
|
|
1668
|
+
/* @__PURE__ */ jsx26(SheetOverlay, {}),
|
|
1669
|
+
/* @__PURE__ */ jsxs11(
|
|
1033
1670
|
DialogPrimitive2.Content,
|
|
1034
1671
|
{
|
|
1035
1672
|
ref,
|
|
1036
|
-
className:
|
|
1673
|
+
className: cn25(
|
|
1037
1674
|
"fixed z-50 flex flex-col bg-background shadow-xl transition-transform duration-300 ease-in-out",
|
|
1038
1675
|
"bottom-0 w-[480px] max-w-[90vw] border-l",
|
|
1039
1676
|
side === "right" && "right-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
|
|
@@ -1044,9 +1681,9 @@ var SheetContent = React18.forwardRef(
|
|
|
1044
1681
|
...props,
|
|
1045
1682
|
children: [
|
|
1046
1683
|
children,
|
|
1047
|
-
/* @__PURE__ */
|
|
1048
|
-
/* @__PURE__ */
|
|
1049
|
-
/* @__PURE__ */
|
|
1684
|
+
/* @__PURE__ */ jsxs11(DialogPrimitive2.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", children: [
|
|
1685
|
+
/* @__PURE__ */ jsx26(X2, { className: "h-4 w-4" }),
|
|
1686
|
+
/* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Close" })
|
|
1050
1687
|
] })
|
|
1051
1688
|
]
|
|
1052
1689
|
}
|
|
@@ -1057,21 +1694,21 @@ SheetContent.displayName = "SheetContent";
|
|
|
1057
1694
|
var SheetHeader = ({
|
|
1058
1695
|
className,
|
|
1059
1696
|
...props
|
|
1060
|
-
}) => /* @__PURE__ */
|
|
1061
|
-
var SheetTitle =
|
|
1697
|
+
}) => /* @__PURE__ */ jsx26("div", { className: cn25("shrink-0 border-b px-6 py-4", className), ...props });
|
|
1698
|
+
var SheetTitle = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
|
|
1062
1699
|
DialogPrimitive2.Title,
|
|
1063
1700
|
{
|
|
1064
1701
|
ref,
|
|
1065
|
-
className:
|
|
1702
|
+
className: cn25("text-lg font-semibold", className),
|
|
1066
1703
|
...props
|
|
1067
1704
|
}
|
|
1068
1705
|
));
|
|
1069
1706
|
SheetTitle.displayName = "SheetTitle";
|
|
1070
|
-
var SheetDescription =
|
|
1707
|
+
var SheetDescription = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
|
|
1071
1708
|
DialogPrimitive2.Description,
|
|
1072
1709
|
{
|
|
1073
1710
|
ref,
|
|
1074
|
-
className:
|
|
1711
|
+
className: cn25("text-sm text-muted-foreground mt-1", className),
|
|
1075
1712
|
...props
|
|
1076
1713
|
}
|
|
1077
1714
|
));
|
|
@@ -1079,20 +1716,20 @@ SheetDescription.displayName = "SheetDescription";
|
|
|
1079
1716
|
var SheetBody = ({
|
|
1080
1717
|
className,
|
|
1081
1718
|
...props
|
|
1082
|
-
}) => /* @__PURE__ */
|
|
1719
|
+
}) => /* @__PURE__ */ jsx26(
|
|
1083
1720
|
"div",
|
|
1084
1721
|
{
|
|
1085
|
-
className:
|
|
1722
|
+
className: cn25("flex-1 overflow-y-auto px-6 py-4", className),
|
|
1086
1723
|
...props
|
|
1087
1724
|
}
|
|
1088
1725
|
);
|
|
1089
1726
|
var SheetFooter = ({
|
|
1090
1727
|
className,
|
|
1091
1728
|
...props
|
|
1092
|
-
}) => /* @__PURE__ */
|
|
1729
|
+
}) => /* @__PURE__ */ jsx26(
|
|
1093
1730
|
"div",
|
|
1094
1731
|
{
|
|
1095
|
-
className:
|
|
1732
|
+
className: cn25(
|
|
1096
1733
|
"shrink-0 border-t px-6 py-4 flex justify-end gap-2",
|
|
1097
1734
|
className
|
|
1098
1735
|
),
|
|
@@ -1101,8 +1738,8 @@ var SheetFooter = ({
|
|
|
1101
1738
|
);
|
|
1102
1739
|
|
|
1103
1740
|
// src/simple-group.tsx
|
|
1104
|
-
import { cn as
|
|
1105
|
-
import { jsx as
|
|
1741
|
+
import { cn as cn26 } from "@petrarca/sonnet-core";
|
|
1742
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
1106
1743
|
var gapMap = {
|
|
1107
1744
|
0: "gap-0",
|
|
1108
1745
|
xs: "gap-1",
|
|
@@ -1164,10 +1801,10 @@ function SimpleGroup({
|
|
|
1164
1801
|
const wrapClass = wrap ? wrapMap[wrap] : void 0;
|
|
1165
1802
|
const growClass = grow ? "[&>*]:flex-1" : void 0;
|
|
1166
1803
|
const mtClass = mt ? mtMap[mt] : void 0;
|
|
1167
|
-
return /* @__PURE__ */
|
|
1804
|
+
return /* @__PURE__ */ jsx27(
|
|
1168
1805
|
"div",
|
|
1169
1806
|
{
|
|
1170
|
-
className:
|
|
1807
|
+
className: cn26(
|
|
1171
1808
|
"flex flex-row",
|
|
1172
1809
|
gapClass,
|
|
1173
1810
|
alignClass,
|
|
@@ -1185,8 +1822,8 @@ function SimpleGroup({
|
|
|
1185
1822
|
}
|
|
1186
1823
|
|
|
1187
1824
|
// src/simple-stack.tsx
|
|
1188
|
-
import { cn as
|
|
1189
|
-
import { jsx as
|
|
1825
|
+
import { cn as cn27 } from "@petrarca/sonnet-core";
|
|
1826
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
1190
1827
|
var gapMap2 = {
|
|
1191
1828
|
0: "gap-0",
|
|
1192
1829
|
xs: "gap-1",
|
|
@@ -1226,10 +1863,10 @@ function SimpleStack({
|
|
|
1226
1863
|
const alignClass = align ? alignMap2[align] : void 0;
|
|
1227
1864
|
const justifyClass = justify ? justifyMap2[justify] : void 0;
|
|
1228
1865
|
const heightStyle = h !== void 0 ? { height: typeof h === "number" ? `${h}px` : h } : void 0;
|
|
1229
|
-
return /* @__PURE__ */
|
|
1866
|
+
return /* @__PURE__ */ jsx28(
|
|
1230
1867
|
"div",
|
|
1231
1868
|
{
|
|
1232
|
-
className:
|
|
1869
|
+
className: cn27(
|
|
1233
1870
|
"flex flex-col",
|
|
1234
1871
|
gapClass,
|
|
1235
1872
|
alignClass,
|
|
@@ -1243,57 +1880,57 @@ function SimpleStack({
|
|
|
1243
1880
|
}
|
|
1244
1881
|
|
|
1245
1882
|
// src/skeleton.tsx
|
|
1246
|
-
import { cn as
|
|
1247
|
-
import { jsx as
|
|
1883
|
+
import { cn as cn28 } from "@petrarca/sonnet-core";
|
|
1884
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
1248
1885
|
function Skeleton({
|
|
1249
1886
|
className,
|
|
1250
1887
|
...props
|
|
1251
1888
|
}) {
|
|
1252
|
-
return /* @__PURE__ */
|
|
1889
|
+
return /* @__PURE__ */ jsx29(
|
|
1253
1890
|
"div",
|
|
1254
1891
|
{
|
|
1255
|
-
className:
|
|
1892
|
+
className: cn28("animate-pulse rounded-md bg-muted", className),
|
|
1256
1893
|
...props
|
|
1257
1894
|
}
|
|
1258
1895
|
);
|
|
1259
1896
|
}
|
|
1260
1897
|
|
|
1261
1898
|
// src/spinner.tsx
|
|
1262
|
-
import { cn as
|
|
1263
|
-
import { jsx as
|
|
1899
|
+
import { cn as cn29 } from "@petrarca/sonnet-core";
|
|
1900
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
1264
1901
|
var sizeClasses = {
|
|
1265
1902
|
sm: "h-4 w-4 border-2",
|
|
1266
1903
|
md: "h-8 w-8 border-2",
|
|
1267
1904
|
lg: "h-12 w-12 border-3"
|
|
1268
1905
|
};
|
|
1269
1906
|
function Spinner({ className, size = "md" }) {
|
|
1270
|
-
return /* @__PURE__ */
|
|
1907
|
+
return /* @__PURE__ */ jsx30(
|
|
1271
1908
|
"div",
|
|
1272
1909
|
{
|
|
1273
|
-
className:
|
|
1910
|
+
className: cn29(
|
|
1274
1911
|
"inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
|
|
1275
1912
|
sizeClasses[size],
|
|
1276
1913
|
className
|
|
1277
1914
|
),
|
|
1278
1915
|
role: "status",
|
|
1279
|
-
children: /* @__PURE__ */
|
|
1916
|
+
children: /* @__PURE__ */ jsx30("span", { className: "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]", children: "Loading..." })
|
|
1280
1917
|
}
|
|
1281
1918
|
);
|
|
1282
1919
|
}
|
|
1283
1920
|
|
|
1284
1921
|
// src/tabs.tsx
|
|
1285
|
-
import * as
|
|
1922
|
+
import * as React24 from "react";
|
|
1286
1923
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
1287
|
-
import { cn as
|
|
1288
|
-
import { jsx as
|
|
1924
|
+
import { cn as cn30 } from "@petrarca/sonnet-core";
|
|
1925
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
1289
1926
|
var Tabs = TabsPrimitive.Root;
|
|
1290
|
-
var TabsList =
|
|
1927
|
+
var TabsList = React24.forwardRef(({ className, align = "start", ...props }, ref) => {
|
|
1291
1928
|
const alignClass = align === "center" ? "justify-center" : align === "end" ? "justify-end" : "justify-start";
|
|
1292
|
-
return /* @__PURE__ */
|
|
1929
|
+
return /* @__PURE__ */ jsx31(
|
|
1293
1930
|
TabsPrimitive.List,
|
|
1294
1931
|
{
|
|
1295
1932
|
ref,
|
|
1296
|
-
className:
|
|
1933
|
+
className: cn30(
|
|
1297
1934
|
"inline-flex h-10 items-center rounded-md bg-muted p-1 text-muted-foreground",
|
|
1298
1935
|
alignClass,
|
|
1299
1936
|
className
|
|
@@ -1303,11 +1940,11 @@ var TabsList = React19.forwardRef(({ className, align = "start", ...props }, ref
|
|
|
1303
1940
|
);
|
|
1304
1941
|
});
|
|
1305
1942
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
1306
|
-
var TabsTrigger =
|
|
1943
|
+
var TabsTrigger = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
1307
1944
|
TabsPrimitive.Trigger,
|
|
1308
1945
|
{
|
|
1309
1946
|
ref,
|
|
1310
|
-
className:
|
|
1947
|
+
className: cn30(
|
|
1311
1948
|
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
|
1312
1949
|
className
|
|
1313
1950
|
),
|
|
@@ -1315,11 +1952,11 @@ var TabsTrigger = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
1315
1952
|
}
|
|
1316
1953
|
));
|
|
1317
1954
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
1318
|
-
var TabsContent =
|
|
1955
|
+
var TabsContent = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
1319
1956
|
TabsPrimitive.Content,
|
|
1320
1957
|
{
|
|
1321
1958
|
ref,
|
|
1322
|
-
className:
|
|
1959
|
+
className: cn30(
|
|
1323
1960
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
1324
1961
|
"data-[state=inactive]:hidden",
|
|
1325
1962
|
className
|
|
@@ -1328,13 +1965,13 @@ var TabsContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
1328
1965
|
}
|
|
1329
1966
|
));
|
|
1330
1967
|
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
1331
|
-
var TabsSeparator =
|
|
1968
|
+
var TabsSeparator = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
1332
1969
|
"div",
|
|
1333
1970
|
{
|
|
1334
1971
|
ref,
|
|
1335
1972
|
role: "separator",
|
|
1336
1973
|
"aria-orientation": "vertical",
|
|
1337
|
-
className:
|
|
1974
|
+
className: cn30(
|
|
1338
1975
|
"mx-2 h-6 w-0.5 shrink-0 rounded-full bg-muted-foreground/40",
|
|
1339
1976
|
className
|
|
1340
1977
|
),
|
|
@@ -1344,25 +1981,25 @@ var TabsSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
1344
1981
|
TabsSeparator.displayName = "TabsSeparator";
|
|
1345
1982
|
|
|
1346
1983
|
// src/stepper.tsx
|
|
1347
|
-
import { Check as
|
|
1984
|
+
import { Check as Check4 } from "lucide-react";
|
|
1348
1985
|
import {
|
|
1349
1986
|
Direction as DirectionPrimitive,
|
|
1350
1987
|
Slot as SlotPrimitive
|
|
1351
1988
|
} from "radix-ui";
|
|
1352
|
-
import * as
|
|
1989
|
+
import * as React28 from "react";
|
|
1353
1990
|
import { useComposedRefs } from "@petrarca/sonnet-core";
|
|
1354
|
-
import { cn as
|
|
1991
|
+
import { cn as cn31 } from "@petrarca/sonnet-core";
|
|
1355
1992
|
|
|
1356
1993
|
// src/radix/hooks/use-as-ref.ts
|
|
1357
|
-
import * as
|
|
1994
|
+
import * as React26 from "react";
|
|
1358
1995
|
|
|
1359
1996
|
// src/radix/hooks/use-isomorphic-layout-effect.ts
|
|
1360
|
-
import * as
|
|
1361
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1997
|
+
import * as React25 from "react";
|
|
1998
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React25.useLayoutEffect : React25.useEffect;
|
|
1362
1999
|
|
|
1363
2000
|
// src/radix/hooks/use-as-ref.ts
|
|
1364
2001
|
function useAsRef(props) {
|
|
1365
|
-
const ref =
|
|
2002
|
+
const ref = React26.useRef(props);
|
|
1366
2003
|
useIsomorphicLayoutEffect(() => {
|
|
1367
2004
|
ref.current = props;
|
|
1368
2005
|
});
|
|
@@ -1370,9 +2007,9 @@ function useAsRef(props) {
|
|
|
1370
2007
|
}
|
|
1371
2008
|
|
|
1372
2009
|
// src/radix/hooks/use-lazy-ref.ts
|
|
1373
|
-
import * as
|
|
2010
|
+
import * as React27 from "react";
|
|
1374
2011
|
function useLazyRef(fn) {
|
|
1375
|
-
const ref =
|
|
2012
|
+
const ref = React27.useRef(null);
|
|
1376
2013
|
if (ref.current === null) {
|
|
1377
2014
|
ref.current = fn();
|
|
1378
2015
|
}
|
|
@@ -1380,7 +2017,7 @@ function useLazyRef(fn) {
|
|
|
1380
2017
|
}
|
|
1381
2018
|
|
|
1382
2019
|
// src/stepper.tsx
|
|
1383
|
-
import { jsx as
|
|
2020
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
1384
2021
|
var ROOT_NAME = "Stepper";
|
|
1385
2022
|
var LIST_NAME = "StepperList";
|
|
1386
2023
|
var ITEM_NAME = "StepperItem";
|
|
@@ -1499,9 +2136,9 @@ function getDataState(value, itemValue, stepState, steps, variant = "item") {
|
|
|
1499
2136
|
}
|
|
1500
2137
|
return "inactive";
|
|
1501
2138
|
}
|
|
1502
|
-
var StoreContext =
|
|
2139
|
+
var StoreContext = React28.createContext(null);
|
|
1503
2140
|
function useStoreContext(consumerName) {
|
|
1504
|
-
const context =
|
|
2141
|
+
const context = React28.useContext(StoreContext);
|
|
1505
2142
|
if (!context) {
|
|
1506
2143
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1507
2144
|
}
|
|
@@ -1509,15 +2146,15 @@ function useStoreContext(consumerName) {
|
|
|
1509
2146
|
}
|
|
1510
2147
|
function useStore(selector) {
|
|
1511
2148
|
const store = useStoreContext("useStore");
|
|
1512
|
-
const getSnapshot =
|
|
2149
|
+
const getSnapshot = React28.useCallback(
|
|
1513
2150
|
() => selector(store.getState()),
|
|
1514
2151
|
[store, selector]
|
|
1515
2152
|
);
|
|
1516
|
-
return
|
|
2153
|
+
return React28.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
1517
2154
|
}
|
|
1518
|
-
var StepperContext =
|
|
2155
|
+
var StepperContext = React28.createContext(null);
|
|
1519
2156
|
function useStepperContext(consumerName) {
|
|
1520
|
-
const context =
|
|
2157
|
+
const context = React28.useContext(StepperContext);
|
|
1521
2158
|
if (!context) {
|
|
1522
2159
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1523
2160
|
}
|
|
@@ -1555,7 +2192,7 @@ function Stepper(props) {
|
|
|
1555
2192
|
onValueRemove,
|
|
1556
2193
|
onValidate
|
|
1557
2194
|
});
|
|
1558
|
-
const store =
|
|
2195
|
+
const store = React28.useMemo(() => {
|
|
1559
2196
|
return {
|
|
1560
2197
|
subscribe: (cb) => {
|
|
1561
2198
|
listenersRef.current.add(cb);
|
|
@@ -1629,9 +2266,9 @@ function Stepper(props) {
|
|
|
1629
2266
|
}
|
|
1630
2267
|
}, [value]);
|
|
1631
2268
|
const dir = DirectionPrimitive.useDirection(dirProp);
|
|
1632
|
-
const instanceId =
|
|
2269
|
+
const instanceId = React28.useId();
|
|
1633
2270
|
const rootId = id ?? instanceId;
|
|
1634
|
-
const contextValue =
|
|
2271
|
+
const contextValue = React28.useMemo(
|
|
1635
2272
|
() => ({
|
|
1636
2273
|
rootId,
|
|
1637
2274
|
dir,
|
|
@@ -1644,7 +2281,7 @@ function Stepper(props) {
|
|
|
1644
2281
|
[rootId, dir, orientation, activationMode, disabled, nonInteractive, loop]
|
|
1645
2282
|
);
|
|
1646
2283
|
const RootPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1647
|
-
return /* @__PURE__ */
|
|
2284
|
+
return /* @__PURE__ */ jsx32(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx32(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx32(
|
|
1648
2285
|
RootPrimitive,
|
|
1649
2286
|
{
|
|
1650
2287
|
id: rootId,
|
|
@@ -1653,7 +2290,7 @@ function Stepper(props) {
|
|
|
1653
2290
|
"data-slot": "stepper",
|
|
1654
2291
|
dir,
|
|
1655
2292
|
...rootProps,
|
|
1656
|
-
className:
|
|
2293
|
+
className: cn31(
|
|
1657
2294
|
"flex gap-3",
|
|
1658
2295
|
orientation === "horizontal" ? "w-full flex-col" : "flex-row",
|
|
1659
2296
|
className
|
|
@@ -1661,9 +2298,9 @@ function Stepper(props) {
|
|
|
1661
2298
|
}
|
|
1662
2299
|
) }) });
|
|
1663
2300
|
}
|
|
1664
|
-
var FocusContext =
|
|
2301
|
+
var FocusContext = React28.createContext(null);
|
|
1665
2302
|
function useFocusContext(consumerName) {
|
|
1666
|
-
const context =
|
|
2303
|
+
const context = React28.useContext(FocusContext);
|
|
1667
2304
|
if (!context) {
|
|
1668
2305
|
throw new Error(
|
|
1669
2306
|
`\`${consumerName}\` must be used within \`FocusProvider\``
|
|
@@ -1690,32 +2327,32 @@ function StepperList(props) {
|
|
|
1690
2327
|
onFocus: onFocusProp,
|
|
1691
2328
|
onMouseDown: onMouseDownProp
|
|
1692
2329
|
});
|
|
1693
|
-
const [tabStopId, setTabStopId] =
|
|
1694
|
-
const [isTabbingBackOut, setIsTabbingBackOut] =
|
|
1695
|
-
const [focusableItemCount, setFocusableItemCount] =
|
|
1696
|
-
const isClickFocusRef =
|
|
1697
|
-
const itemsRef =
|
|
1698
|
-
const listRef =
|
|
2330
|
+
const [tabStopId, setTabStopId] = React28.useState(null);
|
|
2331
|
+
const [isTabbingBackOut, setIsTabbingBackOut] = React28.useState(false);
|
|
2332
|
+
const [focusableItemCount, setFocusableItemCount] = React28.useState(0);
|
|
2333
|
+
const isClickFocusRef = React28.useRef(false);
|
|
2334
|
+
const itemsRef = React28.useRef(/* @__PURE__ */ new Map());
|
|
2335
|
+
const listRef = React28.useRef(null);
|
|
1699
2336
|
const composedRef = useComposedRefs(ref, listRef);
|
|
1700
|
-
const onItemFocus =
|
|
2337
|
+
const onItemFocus = React28.useCallback((tabStopId2) => {
|
|
1701
2338
|
setTabStopId(tabStopId2);
|
|
1702
2339
|
}, []);
|
|
1703
|
-
const onItemShiftTab =
|
|
2340
|
+
const onItemShiftTab = React28.useCallback(() => {
|
|
1704
2341
|
setIsTabbingBackOut(true);
|
|
1705
2342
|
}, []);
|
|
1706
|
-
const onFocusableItemAdd =
|
|
2343
|
+
const onFocusableItemAdd = React28.useCallback(() => {
|
|
1707
2344
|
setFocusableItemCount((prevCount) => prevCount + 1);
|
|
1708
2345
|
}, []);
|
|
1709
|
-
const onFocusableItemRemove =
|
|
2346
|
+
const onFocusableItemRemove = React28.useCallback(() => {
|
|
1710
2347
|
setFocusableItemCount((prevCount) => prevCount - 1);
|
|
1711
2348
|
}, []);
|
|
1712
|
-
const onItemRegister =
|
|
2349
|
+
const onItemRegister = React28.useCallback((item) => {
|
|
1713
2350
|
itemsRef.current.set(item.id, item);
|
|
1714
2351
|
}, []);
|
|
1715
|
-
const onItemUnregister =
|
|
2352
|
+
const onItemUnregister = React28.useCallback((id) => {
|
|
1716
2353
|
itemsRef.current.delete(id);
|
|
1717
2354
|
}, []);
|
|
1718
|
-
const getItems =
|
|
2355
|
+
const getItems = React28.useCallback(() => {
|
|
1719
2356
|
return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
|
|
1720
2357
|
const elementA = a.ref.current;
|
|
1721
2358
|
const elementB = b.ref.current;
|
|
@@ -1730,7 +2367,7 @@ function StepperList(props) {
|
|
|
1730
2367
|
return 0;
|
|
1731
2368
|
});
|
|
1732
2369
|
}, []);
|
|
1733
|
-
const onBlur =
|
|
2370
|
+
const onBlur = React28.useCallback(
|
|
1734
2371
|
(event) => {
|
|
1735
2372
|
propsRef.current.onBlur?.(event);
|
|
1736
2373
|
if (event.defaultPrevented) return;
|
|
@@ -1738,7 +2375,7 @@ function StepperList(props) {
|
|
|
1738
2375
|
},
|
|
1739
2376
|
[propsRef]
|
|
1740
2377
|
);
|
|
1741
|
-
const onFocus =
|
|
2378
|
+
const onFocus = React28.useCallback(
|
|
1742
2379
|
(event) => {
|
|
1743
2380
|
propsRef.current.onFocus?.(event);
|
|
1744
2381
|
if (event.defaultPrevented) return;
|
|
@@ -1767,7 +2404,7 @@ function StepperList(props) {
|
|
|
1767
2404
|
},
|
|
1768
2405
|
[propsRef, isTabbingBackOut, currentValue, tabStopId]
|
|
1769
2406
|
);
|
|
1770
|
-
const onMouseDown =
|
|
2407
|
+
const onMouseDown = React28.useCallback(
|
|
1771
2408
|
(event) => {
|
|
1772
2409
|
propsRef.current.onMouseDown?.(event);
|
|
1773
2410
|
if (event.defaultPrevented) return;
|
|
@@ -1775,7 +2412,7 @@ function StepperList(props) {
|
|
|
1775
2412
|
},
|
|
1776
2413
|
[propsRef]
|
|
1777
2414
|
);
|
|
1778
|
-
const focusContextValue =
|
|
2415
|
+
const focusContextValue = React28.useMemo(
|
|
1779
2416
|
() => ({
|
|
1780
2417
|
tabStopId,
|
|
1781
2418
|
onItemFocus,
|
|
@@ -1798,7 +2435,7 @@ function StepperList(props) {
|
|
|
1798
2435
|
]
|
|
1799
2436
|
);
|
|
1800
2437
|
const ListPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1801
|
-
return /* @__PURE__ */
|
|
2438
|
+
return /* @__PURE__ */ jsx32(FocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx32(
|
|
1802
2439
|
ListPrimitive,
|
|
1803
2440
|
{
|
|
1804
2441
|
role: "tablist",
|
|
@@ -1809,7 +2446,7 @@ function StepperList(props) {
|
|
|
1809
2446
|
tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
|
|
1810
2447
|
...listProps,
|
|
1811
2448
|
ref: composedRef,
|
|
1812
|
-
className:
|
|
2449
|
+
className: cn31(
|
|
1813
2450
|
"flex outline-none",
|
|
1814
2451
|
orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start",
|
|
1815
2452
|
className
|
|
@@ -1821,11 +2458,11 @@ function StepperList(props) {
|
|
|
1821
2458
|
}
|
|
1822
2459
|
) });
|
|
1823
2460
|
}
|
|
1824
|
-
var StepperItemContext =
|
|
2461
|
+
var StepperItemContext = React28.createContext(
|
|
1825
2462
|
null
|
|
1826
2463
|
);
|
|
1827
2464
|
function useStepperItemContext(consumerName) {
|
|
1828
|
-
const context =
|
|
2465
|
+
const context = React28.useContext(StepperItemContext);
|
|
1829
2466
|
if (!context) {
|
|
1830
2467
|
throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
|
|
1831
2468
|
}
|
|
@@ -1858,7 +2495,7 @@ function StepperItem(props) {
|
|
|
1858
2495
|
const stepState = useStore((state) => state.steps.get(itemValue));
|
|
1859
2496
|
const steps = useStore((state) => state.steps);
|
|
1860
2497
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
1861
|
-
const itemContextValue =
|
|
2498
|
+
const itemContextValue = React28.useMemo(
|
|
1862
2499
|
() => ({
|
|
1863
2500
|
value: itemValue,
|
|
1864
2501
|
stepState
|
|
@@ -1866,7 +2503,7 @@ function StepperItem(props) {
|
|
|
1866
2503
|
[itemValue, stepState]
|
|
1867
2504
|
);
|
|
1868
2505
|
const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1869
|
-
return /* @__PURE__ */
|
|
2506
|
+
return /* @__PURE__ */ jsx32(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx32(
|
|
1870
2507
|
ItemPrimitive,
|
|
1871
2508
|
{
|
|
1872
2509
|
"data-disabled": stepState?.disabled ? "" : void 0,
|
|
@@ -1876,7 +2513,7 @@ function StepperItem(props) {
|
|
|
1876
2513
|
dir: context.dir,
|
|
1877
2514
|
...itemProps,
|
|
1878
2515
|
ref,
|
|
1879
|
-
className:
|
|
2516
|
+
className: cn31(
|
|
1880
2517
|
"relative flex not-last:flex-1 items-center",
|
|
1881
2518
|
orientation === "horizontal" ? "flex-row" : "flex-col",
|
|
1882
2519
|
className
|
|
@@ -1925,11 +2562,11 @@ function StepperTrigger(props) {
|
|
|
1925
2562
|
const isActive = value === itemValue;
|
|
1926
2563
|
const isTabStop = focusContext.tabStopId === triggerId;
|
|
1927
2564
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
1928
|
-
const triggerRef =
|
|
2565
|
+
const triggerRef = React28.useRef(null);
|
|
1929
2566
|
const composedRef = useComposedRefs(ref, triggerRef);
|
|
1930
|
-
const isArrowKeyPressedRef =
|
|
1931
|
-
const isMouseClickRef =
|
|
1932
|
-
|
|
2567
|
+
const isArrowKeyPressedRef = React28.useRef(false);
|
|
2568
|
+
const isMouseClickRef = React28.useRef(false);
|
|
2569
|
+
React28.useEffect(() => {
|
|
1933
2570
|
function onKeyDown2(event) {
|
|
1934
2571
|
if (ARROW_KEYS.includes(event.key)) {
|
|
1935
2572
|
isArrowKeyPressedRef.current = true;
|
|
@@ -1963,7 +2600,7 @@ function StepperTrigger(props) {
|
|
|
1963
2600
|
}
|
|
1964
2601
|
};
|
|
1965
2602
|
}, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
|
|
1966
|
-
const onClick =
|
|
2603
|
+
const onClick = React28.useCallback(
|
|
1967
2604
|
async (event) => {
|
|
1968
2605
|
propsRef.current.onClick?.(event);
|
|
1969
2606
|
if (event.defaultPrevented) return;
|
|
@@ -1984,7 +2621,7 @@ function StepperTrigger(props) {
|
|
|
1984
2621
|
propsRef
|
|
1985
2622
|
]
|
|
1986
2623
|
);
|
|
1987
|
-
const onFocus =
|
|
2624
|
+
const onFocus = React28.useCallback(
|
|
1988
2625
|
async (event) => {
|
|
1989
2626
|
propsRef.current.onFocus?.(event);
|
|
1990
2627
|
if (event.defaultPrevented) return;
|
|
@@ -2012,7 +2649,7 @@ function StepperTrigger(props) {
|
|
|
2012
2649
|
propsRef
|
|
2013
2650
|
]
|
|
2014
2651
|
);
|
|
2015
|
-
const onKeyDown =
|
|
2652
|
+
const onKeyDown = React28.useCallback(
|
|
2016
2653
|
async (event) => {
|
|
2017
2654
|
propsRef.current.onKeyDown?.(event);
|
|
2018
2655
|
if (event.defaultPrevented) return;
|
|
@@ -2067,7 +2704,7 @@ function StepperTrigger(props) {
|
|
|
2067
2704
|
steps
|
|
2068
2705
|
]
|
|
2069
2706
|
);
|
|
2070
|
-
const onMouseDown =
|
|
2707
|
+
const onMouseDown = React28.useCallback(
|
|
2071
2708
|
(event) => {
|
|
2072
2709
|
propsRef.current.onMouseDown?.(event);
|
|
2073
2710
|
if (event.defaultPrevented) return;
|
|
@@ -2081,7 +2718,7 @@ function StepperTrigger(props) {
|
|
|
2081
2718
|
[focusContext, triggerId, isDisabled, propsRef]
|
|
2082
2719
|
);
|
|
2083
2720
|
const TriggerPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2084
|
-
return /* @__PURE__ */
|
|
2721
|
+
return /* @__PURE__ */ jsx32(
|
|
2085
2722
|
TriggerPrimitive,
|
|
2086
2723
|
{
|
|
2087
2724
|
id: triggerId,
|
|
@@ -2100,7 +2737,7 @@ function StepperTrigger(props) {
|
|
|
2100
2737
|
tabIndex: isTabStop ? 0 : -1,
|
|
2101
2738
|
...triggerProps,
|
|
2102
2739
|
ref: composedRef,
|
|
2103
|
-
className:
|
|
2740
|
+
className: cn31(
|
|
2104
2741
|
"inline-flex items-center justify-center gap-3 rounded-md text-left outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
2105
2742
|
"not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full",
|
|
2106
2743
|
className
|
|
@@ -2123,7 +2760,7 @@ function StepperIndicator(props) {
|
|
|
2123
2760
|
const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
|
|
2124
2761
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
2125
2762
|
const IndicatorPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
2126
|
-
return /* @__PURE__ */
|
|
2763
|
+
return /* @__PURE__ */ jsx32(
|
|
2127
2764
|
IndicatorPrimitive,
|
|
2128
2765
|
{
|
|
2129
2766
|
"data-state": dataState,
|
|
@@ -2131,11 +2768,11 @@ function StepperIndicator(props) {
|
|
|
2131
2768
|
dir: context.dir,
|
|
2132
2769
|
...indicatorProps,
|
|
2133
2770
|
ref,
|
|
2134
|
-
className:
|
|
2771
|
+
className: cn31(
|
|
2135
2772
|
"flex size-7 shrink-0 items-center justify-center rounded-full border-2 border-muted bg-background font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=completed]:border-primary data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground",
|
|
2136
2773
|
className
|
|
2137
2774
|
),
|
|
2138
|
-
children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */
|
|
2775
|
+
children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */ jsx32(Check4, { className: "size-4" }) : stepPosition
|
|
2139
2776
|
}
|
|
2140
2777
|
);
|
|
2141
2778
|
}
|
|
@@ -2163,7 +2800,7 @@ function StepperSeparator(props) {
|
|
|
2163
2800
|
"separator"
|
|
2164
2801
|
);
|
|
2165
2802
|
const SeparatorPrimitive2 = asChild ? SlotPrimitive.Slot : "div";
|
|
2166
|
-
return /* @__PURE__ */
|
|
2803
|
+
return /* @__PURE__ */ jsx32(
|
|
2167
2804
|
SeparatorPrimitive2,
|
|
2168
2805
|
{
|
|
2169
2806
|
role: "separator",
|
|
@@ -2175,7 +2812,7 @@ function StepperSeparator(props) {
|
|
|
2175
2812
|
dir: context.dir,
|
|
2176
2813
|
...separatorProps,
|
|
2177
2814
|
ref,
|
|
2178
|
-
className:
|
|
2815
|
+
className: cn31(
|
|
2179
2816
|
"bg-border transition-colors data-[state=active]:bg-primary data-[state=completed]:bg-primary",
|
|
2180
2817
|
orientation === "horizontal" ? "h-px flex-1" : "h-10 w-px",
|
|
2181
2818
|
className
|
|
@@ -2189,7 +2826,7 @@ function StepperTitle(props) {
|
|
|
2189
2826
|
const itemContext = useStepperItemContext(TITLE_NAME);
|
|
2190
2827
|
const titleId = getId(context.rootId, "title", itemContext.value);
|
|
2191
2828
|
const TitlePrimitive = asChild ? SlotPrimitive.Slot : "span";
|
|
2192
|
-
return /* @__PURE__ */
|
|
2829
|
+
return /* @__PURE__ */ jsx32(
|
|
2193
2830
|
TitlePrimitive,
|
|
2194
2831
|
{
|
|
2195
2832
|
id: titleId,
|
|
@@ -2197,7 +2834,7 @@ function StepperTitle(props) {
|
|
|
2197
2834
|
dir: context.dir,
|
|
2198
2835
|
...titleProps,
|
|
2199
2836
|
ref,
|
|
2200
|
-
className:
|
|
2837
|
+
className: cn31("font-medium text-sm", className)
|
|
2201
2838
|
}
|
|
2202
2839
|
);
|
|
2203
2840
|
}
|
|
@@ -2207,7 +2844,7 @@ function StepperDescription(props) {
|
|
|
2207
2844
|
const itemContext = useStepperItemContext(DESCRIPTION_NAME);
|
|
2208
2845
|
const descriptionId = getId(context.rootId, "description", itemContext.value);
|
|
2209
2846
|
const DescriptionPrimitive = asChild ? SlotPrimitive.Slot : "span";
|
|
2210
|
-
return /* @__PURE__ */
|
|
2847
|
+
return /* @__PURE__ */ jsx32(
|
|
2211
2848
|
DescriptionPrimitive,
|
|
2212
2849
|
{
|
|
2213
2850
|
id: descriptionId,
|
|
@@ -2215,7 +2852,7 @@ function StepperDescription(props) {
|
|
|
2215
2852
|
dir: context.dir,
|
|
2216
2853
|
...descriptionProps,
|
|
2217
2854
|
ref,
|
|
2218
|
-
className:
|
|
2855
|
+
className: cn31("text-muted-foreground text-xs", className)
|
|
2219
2856
|
}
|
|
2220
2857
|
);
|
|
2221
2858
|
}
|
|
@@ -2234,7 +2871,7 @@ function StepperContent(props) {
|
|
|
2234
2871
|
const triggerId = getId(context.rootId, "trigger", valueProp);
|
|
2235
2872
|
if (valueProp !== value && !forceMount) return null;
|
|
2236
2873
|
const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
2237
|
-
return /* @__PURE__ */
|
|
2874
|
+
return /* @__PURE__ */ jsx32(
|
|
2238
2875
|
ContentPrimitive,
|
|
2239
2876
|
{
|
|
2240
2877
|
id: contentId,
|
|
@@ -2244,7 +2881,7 @@ function StepperContent(props) {
|
|
|
2244
2881
|
dir: context.dir,
|
|
2245
2882
|
...contentProps,
|
|
2246
2883
|
ref,
|
|
2247
|
-
className:
|
|
2884
|
+
className: cn31("flex-1 outline-none", className)
|
|
2248
2885
|
}
|
|
2249
2886
|
);
|
|
2250
2887
|
}
|
|
@@ -2259,7 +2896,7 @@ function StepperPrev(props) {
|
|
|
2259
2896
|
const stepKeys = Array.from(steps.keys());
|
|
2260
2897
|
const currentIndex = stepKeys.length > 0 ? stepKeys.indexOf(value ?? "") : -1;
|
|
2261
2898
|
const isDisabled = disabled || currentIndex <= 0;
|
|
2262
|
-
const onClick =
|
|
2899
|
+
const onClick = React28.useCallback(
|
|
2263
2900
|
async (event) => {
|
|
2264
2901
|
propsRef.current.onClick?.(event);
|
|
2265
2902
|
if (event.defaultPrevented || isDisabled) return;
|
|
@@ -2272,7 +2909,7 @@ function StepperPrev(props) {
|
|
|
2272
2909
|
[propsRef, isDisabled, currentIndex, stepKeys, store]
|
|
2273
2910
|
);
|
|
2274
2911
|
const PrevPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2275
|
-
return /* @__PURE__ */
|
|
2912
|
+
return /* @__PURE__ */ jsx32(
|
|
2276
2913
|
PrevPrimitive,
|
|
2277
2914
|
{
|
|
2278
2915
|
type: "button",
|
|
@@ -2294,7 +2931,7 @@ function StepperNext(props) {
|
|
|
2294
2931
|
const stepKeys = Array.from(steps.keys());
|
|
2295
2932
|
const currentIndex = stepKeys.length > 0 ? stepKeys.indexOf(value ?? "") : -1;
|
|
2296
2933
|
const isDisabled = disabled || stepKeys.length === 0 || currentIndex >= stepKeys.length - 1;
|
|
2297
|
-
const onClick =
|
|
2934
|
+
const onClick = React28.useCallback(
|
|
2298
2935
|
async (event) => {
|
|
2299
2936
|
propsRef.current.onClick?.(event);
|
|
2300
2937
|
if (event.defaultPrevented || isDisabled) return;
|
|
@@ -2307,7 +2944,7 @@ function StepperNext(props) {
|
|
|
2307
2944
|
[propsRef, isDisabled, currentIndex, stepKeys, store]
|
|
2308
2945
|
);
|
|
2309
2946
|
const NextPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2310
|
-
return /* @__PURE__ */
|
|
2947
|
+
return /* @__PURE__ */ jsx32(
|
|
2311
2948
|
NextPrimitive,
|
|
2312
2949
|
{
|
|
2313
2950
|
type: "button",
|
|
@@ -2322,18 +2959,18 @@ function StepperNext(props) {
|
|
|
2322
2959
|
// src/EntityTable/EntityTable.tsx
|
|
2323
2960
|
import {
|
|
2324
2961
|
useCallback as useCallback2,
|
|
2325
|
-
useEffect as
|
|
2326
|
-
useMemo as
|
|
2962
|
+
useEffect as useEffect6,
|
|
2963
|
+
useMemo as useMemo5,
|
|
2327
2964
|
useRef as useRef4,
|
|
2328
|
-
useState as
|
|
2965
|
+
useState as useState5
|
|
2329
2966
|
} from "react";
|
|
2330
2967
|
import {
|
|
2331
2968
|
flexRender,
|
|
2332
2969
|
getCoreRowModel,
|
|
2333
2970
|
useReactTable
|
|
2334
2971
|
} from "@tanstack/react-table";
|
|
2335
|
-
import { ChevronRight as
|
|
2336
|
-
import { cn as
|
|
2972
|
+
import { ChevronRight as ChevronRight3 } from "lucide-react";
|
|
2973
|
+
import { cn as cn32 } from "@petrarca/sonnet-core";
|
|
2337
2974
|
import { useComponentDefaults } from "@petrarca/sonnet-core/config";
|
|
2338
2975
|
|
|
2339
2976
|
// src/EntityTable/tableSchema/mergeUiSchema.ts
|
|
@@ -2364,12 +3001,12 @@ function mergeColumnConfig(key, property, uiSchema) {
|
|
|
2364
3001
|
}
|
|
2365
3002
|
|
|
2366
3003
|
// src/EntityTable/tableSchema/cellRegistry.ts
|
|
2367
|
-
import
|
|
3004
|
+
import React29 from "react";
|
|
2368
3005
|
import { warnLog } from "@petrarca/sonnet-core";
|
|
2369
3006
|
|
|
2370
3007
|
// src/EntityTable/tableSchema/cellRenderers.tsx
|
|
2371
3008
|
import { formatDate, formatDateTime } from "@petrarca/sonnet-core";
|
|
2372
|
-
import { Fragment, jsx as
|
|
3009
|
+
import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
2373
3010
|
function resolveValue(value, options) {
|
|
2374
3011
|
const key = options.valueKey;
|
|
2375
3012
|
if (key && value != null && typeof value === "object") {
|
|
@@ -2385,41 +3022,41 @@ function TextCell({
|
|
|
2385
3022
|
options
|
|
2386
3023
|
}) {
|
|
2387
3024
|
const text = resolveValue(value, options);
|
|
2388
|
-
return /* @__PURE__ */
|
|
3025
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("", options), children: text == null ? "\u2014" : String(text) });
|
|
2389
3026
|
}
|
|
2390
3027
|
function MutedCell({
|
|
2391
3028
|
value,
|
|
2392
3029
|
options
|
|
2393
3030
|
}) {
|
|
2394
3031
|
const text = resolveValue(value, options);
|
|
2395
|
-
return /* @__PURE__ */
|
|
3032
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("text-muted-foreground", options), children: text == null ? "\u2014" : String(text) });
|
|
2396
3033
|
}
|
|
2397
3034
|
function BoldCell({
|
|
2398
3035
|
value,
|
|
2399
3036
|
options
|
|
2400
3037
|
}) {
|
|
2401
3038
|
const text = resolveValue(value, options);
|
|
2402
|
-
return /* @__PURE__ */
|
|
3039
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("font-medium", options), children: text == null ? "\u2014" : String(text) });
|
|
2403
3040
|
}
|
|
2404
3041
|
function CodeCell({
|
|
2405
3042
|
value,
|
|
2406
3043
|
options
|
|
2407
3044
|
}) {
|
|
2408
3045
|
const text = resolveValue(value, options);
|
|
2409
|
-
return /* @__PURE__ */
|
|
3046
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("font-mono text-xs", options), children: text == null ? "\u2014" : String(text) });
|
|
2410
3047
|
}
|
|
2411
3048
|
function BadgeCell({
|
|
2412
3049
|
value,
|
|
2413
3050
|
options
|
|
2414
3051
|
}) {
|
|
2415
3052
|
if (value == null)
|
|
2416
|
-
return /* @__PURE__ */
|
|
3053
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2417
3054
|
const key = String(value);
|
|
2418
3055
|
const colors = options.colors;
|
|
2419
3056
|
const labels = options.labels;
|
|
2420
3057
|
const color = colors?.[key];
|
|
2421
3058
|
const label = labels?.[key] ?? key;
|
|
2422
|
-
return /* @__PURE__ */
|
|
3059
|
+
return /* @__PURE__ */ jsx33(Badge, { badgeColor: color, children: label });
|
|
2423
3060
|
}
|
|
2424
3061
|
function conditionHolds(value, when) {
|
|
2425
3062
|
const isEmpty = value == null || value === "";
|
|
@@ -2436,12 +3073,12 @@ function conditionHolds(value, when) {
|
|
|
2436
3073
|
}
|
|
2437
3074
|
function renderConditionalFallback(value, fallback) {
|
|
2438
3075
|
if (fallback === "dash" || value == null || value === "") {
|
|
2439
|
-
return /* @__PURE__ */
|
|
3076
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2440
3077
|
}
|
|
2441
3078
|
if (fallback === "muted-value") {
|
|
2442
|
-
return /* @__PURE__ */
|
|
3079
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: String(value) });
|
|
2443
3080
|
}
|
|
2444
|
-
return /* @__PURE__ */
|
|
3081
|
+
return /* @__PURE__ */ jsx33("span", { children: String(value) });
|
|
2445
3082
|
}
|
|
2446
3083
|
function ConditionalBadgeCell({
|
|
2447
3084
|
value,
|
|
@@ -2452,7 +3089,7 @@ function ConditionalBadgeCell({
|
|
|
2452
3089
|
const fallback = options.fallback ?? "dash";
|
|
2453
3090
|
if (conditionHolds(value, when)) {
|
|
2454
3091
|
const label = options.label != null ? String(options.label) : String(value ?? "");
|
|
2455
|
-
return /* @__PURE__ */
|
|
3092
|
+
return /* @__PURE__ */ jsx33(Badge, { variant, children: label });
|
|
2456
3093
|
}
|
|
2457
3094
|
return renderConditionalFallback(value, fallback);
|
|
2458
3095
|
}
|
|
@@ -2460,20 +3097,20 @@ function DateCell({
|
|
|
2460
3097
|
value,
|
|
2461
3098
|
options
|
|
2462
3099
|
}) {
|
|
2463
|
-
return /* @__PURE__ */
|
|
3100
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("text-muted-foreground", options), children: formatDate(value) });
|
|
2464
3101
|
}
|
|
2465
3102
|
function DateTimeCell({
|
|
2466
3103
|
value,
|
|
2467
3104
|
options
|
|
2468
3105
|
}) {
|
|
2469
|
-
return /* @__PURE__ */
|
|
3106
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("text-muted-foreground", options), children: formatDateTime(value) });
|
|
2470
3107
|
}
|
|
2471
3108
|
function BooleanCell({ value }) {
|
|
2472
|
-
return /* @__PURE__ */
|
|
3109
|
+
return /* @__PURE__ */ jsx33("span", { className: value ? "text-green-600" : "text-muted-foreground", children: value ? "Yes" : "No" });
|
|
2473
3110
|
}
|
|
2474
3111
|
function NumberCell({ value }) {
|
|
2475
3112
|
const text = value == null ? "\u2014" : String(value);
|
|
2476
|
-
return /* @__PURE__ */
|
|
3113
|
+
return /* @__PURE__ */ jsx33("span", { className: "tabular-nums", children: text });
|
|
2477
3114
|
}
|
|
2478
3115
|
function TruncateCell({
|
|
2479
3116
|
value,
|
|
@@ -2481,7 +3118,7 @@ function TruncateCell({
|
|
|
2481
3118
|
}) {
|
|
2482
3119
|
const resolved = resolveValue(value, options);
|
|
2483
3120
|
const text = resolved == null ? "\u2014" : String(resolved);
|
|
2484
|
-
return /* @__PURE__ */
|
|
3121
|
+
return /* @__PURE__ */ jsx33("span", { className: "block truncate max-w-xs", title: text, children: text });
|
|
2485
3122
|
}
|
|
2486
3123
|
function OverflowListCell({
|
|
2487
3124
|
value,
|
|
@@ -2489,20 +3126,20 @@ function OverflowListCell({
|
|
|
2489
3126
|
}) {
|
|
2490
3127
|
const items = Array.isArray(value) ? value : [];
|
|
2491
3128
|
if (items.length === 0)
|
|
2492
|
-
return /* @__PURE__ */
|
|
3129
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2493
3130
|
const displayKey = options.displayKey;
|
|
2494
3131
|
const fallbackKey = options.fallbackKey;
|
|
2495
3132
|
const prefixKey = options.prefixKey;
|
|
2496
3133
|
const first = items[0];
|
|
2497
3134
|
const label = displayKey && first[displayKey] || fallbackKey && first[fallbackKey] || "";
|
|
2498
|
-
return /* @__PURE__ */
|
|
2499
|
-
prefixKey && /* @__PURE__ */
|
|
3135
|
+
return /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
3136
|
+
prefixKey && /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground", children: [
|
|
2500
3137
|
String(first[prefixKey]),
|
|
2501
3138
|
":",
|
|
2502
3139
|
" "
|
|
2503
3140
|
] }),
|
|
2504
3141
|
label,
|
|
2505
|
-
items.length > 1 && /* @__PURE__ */
|
|
3142
|
+
items.length > 1 && /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground ml-1", children: [
|
|
2506
3143
|
"+",
|
|
2507
3144
|
items.length - 1
|
|
2508
3145
|
] })
|
|
@@ -2514,8 +3151,8 @@ function JoinCell({
|
|
|
2514
3151
|
}) {
|
|
2515
3152
|
const sep = options.separator ?? ", ";
|
|
2516
3153
|
if (!Array.isArray(value) || value.length === 0)
|
|
2517
|
-
return /* @__PURE__ */
|
|
2518
|
-
return /* @__PURE__ */
|
|
3154
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
3155
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: value.join(sep) });
|
|
2519
3156
|
}
|
|
2520
3157
|
|
|
2521
3158
|
// src/EntityTable/tableSchema/cellRegistry.ts
|
|
@@ -2547,7 +3184,7 @@ function resolveCellRenderer2(name, localRenderers) {
|
|
|
2547
3184
|
return localRenderers?.[name] ?? CELL_RENDERERS[name] ?? TextCell;
|
|
2548
3185
|
}
|
|
2549
3186
|
function createRenderer(render) {
|
|
2550
|
-
return ({ row, options }) =>
|
|
3187
|
+
return ({ row, options }) => React29.createElement(React29.Fragment, null, render(row, options));
|
|
2551
3188
|
}
|
|
2552
3189
|
function validateRendererNames(renderers) {
|
|
2553
3190
|
for (const name of Object.keys(renderers)) {
|
|
@@ -2588,7 +3225,7 @@ function keyToLabel(key) {
|
|
|
2588
3225
|
}
|
|
2589
3226
|
|
|
2590
3227
|
// src/EntityTable/EntityTable.tsx
|
|
2591
|
-
import { jsx as
|
|
3228
|
+
import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2592
3229
|
var coreRowModel = getCoreRowModel();
|
|
2593
3230
|
function resolveTableDefaults(props) {
|
|
2594
3231
|
return {
|
|
@@ -2625,7 +3262,7 @@ function buildColumnDefs(resolved, localRenderers) {
|
|
|
2625
3262
|
cell: ({
|
|
2626
3263
|
getValue,
|
|
2627
3264
|
row
|
|
2628
|
-
}) => /* @__PURE__ */
|
|
3265
|
+
}) => /* @__PURE__ */ jsx34(
|
|
2629
3266
|
Renderer,
|
|
2630
3267
|
{
|
|
2631
3268
|
value: getValue(),
|
|
@@ -2643,7 +3280,7 @@ function buildSelectColumn() {
|
|
|
2643
3280
|
return {
|
|
2644
3281
|
id: "_select",
|
|
2645
3282
|
size: 40,
|
|
2646
|
-
header: ({ table: t }) => /* @__PURE__ */
|
|
3283
|
+
header: ({ table: t }) => /* @__PURE__ */ jsx34(
|
|
2647
3284
|
Checkbox,
|
|
2648
3285
|
{
|
|
2649
3286
|
checked: t.getIsAllPageRowsSelected() || (t.getIsSomePageRowsSelected() ? "indeterminate" : false),
|
|
@@ -2651,7 +3288,7 @@ function buildSelectColumn() {
|
|
|
2651
3288
|
"aria-label": "Select all"
|
|
2652
3289
|
}
|
|
2653
3290
|
),
|
|
2654
|
-
cell: ({ row }) => /* @__PURE__ */
|
|
3291
|
+
cell: ({ row }) => /* @__PURE__ */ jsx34(
|
|
2655
3292
|
Checkbox,
|
|
2656
3293
|
{
|
|
2657
3294
|
checked: row.getIsSelected(),
|
|
@@ -2688,43 +3325,43 @@ function useEntityTableState(props, selectionMode) {
|
|
|
2688
3325
|
onSelectionChange
|
|
2689
3326
|
} = props;
|
|
2690
3327
|
const isPaginated = !!(pagination && onPaginationChange);
|
|
2691
|
-
const dataRows =
|
|
3328
|
+
const dataRows = useMemo5(() => data?.data ?? [], [data]);
|
|
2692
3329
|
const total = data?.meta.total;
|
|
2693
3330
|
const pageIndex = pagination?.pageIndex ?? 0;
|
|
2694
3331
|
const pageSize = pagination?.pageSize ?? 1;
|
|
2695
|
-
|
|
3332
|
+
useEffect6(() => {
|
|
2696
3333
|
if (!isPaginated || total == null || !onPaginationChange) return;
|
|
2697
3334
|
const maxPage = Math.max(0, Math.ceil(total / pageSize) - 1);
|
|
2698
3335
|
if (pageIndex > maxPage) {
|
|
2699
3336
|
onPaginationChange((prev) => ({ ...prev, pageIndex: maxPage }));
|
|
2700
3337
|
}
|
|
2701
3338
|
}, [total, isPaginated, pageIndex, pageSize, onPaginationChange]);
|
|
2702
|
-
const [rowSelection, setRowSelection] =
|
|
2703
|
-
|
|
3339
|
+
const [rowSelection, setRowSelection] = useState5({});
|
|
3340
|
+
useEffect6(() => {
|
|
2704
3341
|
setRowSelection({});
|
|
2705
3342
|
}, [data]);
|
|
2706
|
-
const [activeRowIndex, setActiveRowIndex] =
|
|
3343
|
+
const [activeRowIndex, setActiveRowIndex] = useState5(-1);
|
|
2707
3344
|
const containerRef = useRef4(null);
|
|
2708
|
-
const dataColumns =
|
|
3345
|
+
const dataColumns = useMemo5(() => {
|
|
2709
3346
|
if (renderers) validateRendererNames(renderers);
|
|
2710
3347
|
return buildColumnDefs(resolveColumns(schema, uiSchema), renderers);
|
|
2711
3348
|
}, [schema, uiSchema, renderers]);
|
|
2712
|
-
const selectColumn =
|
|
3349
|
+
const selectColumn = useMemo5(
|
|
2713
3350
|
() => selectionMode ? buildSelectColumn() : null,
|
|
2714
3351
|
[selectionMode]
|
|
2715
3352
|
);
|
|
2716
|
-
const columns =
|
|
3353
|
+
const columns = useMemo5(
|
|
2717
3354
|
() => selectColumn ? [selectColumn, ...dataColumns] : dataColumns,
|
|
2718
3355
|
[selectColumn, dataColumns]
|
|
2719
3356
|
);
|
|
2720
3357
|
const onSelectionChangeRef = useRef4(onSelectionChange);
|
|
2721
3358
|
onSelectionChangeRef.current = onSelectionChange;
|
|
2722
|
-
|
|
3359
|
+
useEffect6(() => {
|
|
2723
3360
|
if (!selectionMode || !onSelectionChangeRef.current) return;
|
|
2724
3361
|
const selected = Object.keys(rowSelection).filter((k) => rowSelection[k]).map(Number).map((i) => dataRows[i]).filter((r) => r !== void 0);
|
|
2725
3362
|
onSelectionChangeRef.current(selected);
|
|
2726
3363
|
}, [rowSelection, selectionMode, dataRows]);
|
|
2727
|
-
const tableState =
|
|
3364
|
+
const tableState = useMemo5(
|
|
2728
3365
|
() => ({
|
|
2729
3366
|
...isPaginated ? { pagination } : {},
|
|
2730
3367
|
...selectionMode ? { rowSelection } : {}
|
|
@@ -2742,7 +3379,7 @@ function useEntityTableState(props, selectionMode) {
|
|
|
2742
3379
|
onPaginationChange
|
|
2743
3380
|
});
|
|
2744
3381
|
const table = useReactTable(tableOptions);
|
|
2745
|
-
|
|
3382
|
+
useEffect6(() => {
|
|
2746
3383
|
if (activeRowIndex < 0 || !containerRef.current) return;
|
|
2747
3384
|
const rows = containerRef.current.querySelectorAll("tbody tr");
|
|
2748
3385
|
rows[activeRowIndex]?.scrollIntoView({ block: "nearest" });
|
|
@@ -2772,7 +3409,7 @@ function useActiveRowEvent(args) {
|
|
|
2772
3409
|
const singleActiveMode = !selectionMode && rowActivation === "double-click" && !!onRowClick;
|
|
2773
3410
|
const onChangeRef = useRef4(onActiveRowChange);
|
|
2774
3411
|
onChangeRef.current = onActiveRowChange;
|
|
2775
|
-
|
|
3412
|
+
useEffect6(() => {
|
|
2776
3413
|
if (!singleActiveMode) return;
|
|
2777
3414
|
const row = activeRowIndex >= 0 ? dataRows[activeRowIndex] ?? null : null;
|
|
2778
3415
|
onChangeRef.current?.(row);
|
|
@@ -2848,7 +3485,7 @@ function StatusRows({
|
|
|
2848
3485
|
colCount
|
|
2849
3486
|
}) {
|
|
2850
3487
|
if (isLoading) {
|
|
2851
|
-
return /* @__PURE__ */
|
|
3488
|
+
return /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34(
|
|
2852
3489
|
"td",
|
|
2853
3490
|
{
|
|
2854
3491
|
colSpan: colCount,
|
|
@@ -2858,7 +3495,7 @@ function StatusRows({
|
|
|
2858
3495
|
) });
|
|
2859
3496
|
}
|
|
2860
3497
|
if (isError) {
|
|
2861
|
-
return /* @__PURE__ */
|
|
3498
|
+
return /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34(
|
|
2862
3499
|
"td",
|
|
2863
3500
|
{
|
|
2864
3501
|
colSpan: colCount,
|
|
@@ -2868,7 +3505,7 @@ function StatusRows({
|
|
|
2868
3505
|
) });
|
|
2869
3506
|
}
|
|
2870
3507
|
if (isEmpty) {
|
|
2871
|
-
return /* @__PURE__ */
|
|
3508
|
+
return /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34(
|
|
2872
3509
|
"td",
|
|
2873
3510
|
{
|
|
2874
3511
|
colSpan: colCount,
|
|
@@ -2888,7 +3525,7 @@ function RowActionCell({
|
|
|
2888
3525
|
actions,
|
|
2889
3526
|
rowOriginal
|
|
2890
3527
|
}) {
|
|
2891
|
-
return /* @__PURE__ */
|
|
3528
|
+
return /* @__PURE__ */ jsx34("td", { className: "px-4 py-3 w-24 text-right", children: /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-end gap-1", children: actions.map((action) => /* @__PURE__ */ jsx34(
|
|
2892
3529
|
ActionButton,
|
|
2893
3530
|
{
|
|
2894
3531
|
action,
|
|
@@ -2904,8 +3541,8 @@ function ActionButton({
|
|
|
2904
3541
|
const isHidden = action.hidden?.(rowOriginal);
|
|
2905
3542
|
if (isHidden) return null;
|
|
2906
3543
|
const isDisabled = action.disabled?.(rowOriginal);
|
|
2907
|
-
const
|
|
2908
|
-
return /* @__PURE__ */
|
|
3544
|
+
const Icon2 = action.icon;
|
|
3545
|
+
return /* @__PURE__ */ jsx34(
|
|
2909
3546
|
"button",
|
|
2910
3547
|
{
|
|
2911
3548
|
title: action.label,
|
|
@@ -2914,12 +3551,12 @@ function ActionButton({
|
|
|
2914
3551
|
e.stopPropagation();
|
|
2915
3552
|
action.onClick(rowOriginal);
|
|
2916
3553
|
},
|
|
2917
|
-
className:
|
|
3554
|
+
className: cn32(
|
|
2918
3555
|
"inline-flex items-center justify-center h-7 w-7 rounded-md transition-colors",
|
|
2919
3556
|
action.variant === "destructive" ? "text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-accent",
|
|
2920
3557
|
isDisabled ? "opacity-30 cursor-not-allowed group-hover/row:opacity-30" : "opacity-0 group-hover/row:opacity-100 focus:opacity-100"
|
|
2921
3558
|
),
|
|
2922
|
-
children:
|
|
3559
|
+
children: Icon2 ? /* @__PURE__ */ jsx34(Icon2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx34("span", { className: "text-xs", children: action.label })
|
|
2923
3560
|
},
|
|
2924
3561
|
action.label
|
|
2925
3562
|
);
|
|
@@ -2930,7 +3567,7 @@ function ChevronCell({
|
|
|
2930
3567
|
onRowClick
|
|
2931
3568
|
}) {
|
|
2932
3569
|
const asButton = rowActivation === "double-click" && !!onRowClick;
|
|
2933
|
-
return /* @__PURE__ */
|
|
3570
|
+
return /* @__PURE__ */ jsx34("td", { className: "px-4 py-3 w-10", children: asButton ? /* @__PURE__ */ jsx34(
|
|
2934
3571
|
"button",
|
|
2935
3572
|
{
|
|
2936
3573
|
type: "button",
|
|
@@ -2940,12 +3577,12 @@ function ChevronCell({
|
|
|
2940
3577
|
onRowClick(rowOriginal);
|
|
2941
3578
|
},
|
|
2942
3579
|
className: "inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
|
|
2943
|
-
children: /* @__PURE__ */
|
|
3580
|
+
children: /* @__PURE__ */ jsx34(ChevronRight3, { className: "h-4 w-4" })
|
|
2944
3581
|
}
|
|
2945
|
-
) : /* @__PURE__ */
|
|
3582
|
+
) : /* @__PURE__ */ jsx34(ChevronRight3, { className: "h-4 w-4 text-muted-foreground" }) });
|
|
2946
3583
|
}
|
|
2947
3584
|
function rowClassName(row, isActive, selectionMode, singleClickSelects, onRowClick) {
|
|
2948
|
-
return
|
|
3585
|
+
return cn32(
|
|
2949
3586
|
"border-b last:border-b-0 transition-colors group/row",
|
|
2950
3587
|
onRowClick && !selectionMode && "hover:bg-accent/50 cursor-pointer",
|
|
2951
3588
|
selectionMode && "cursor-default",
|
|
@@ -2970,7 +3607,7 @@ function DataRow({
|
|
|
2970
3607
|
}) {
|
|
2971
3608
|
const singleClickSelects = !selectionMode && rowActivation === "double-click" && !!onRowClick;
|
|
2972
3609
|
const isActive = index === activeRowIndex;
|
|
2973
|
-
return /* @__PURE__ */
|
|
3610
|
+
return /* @__PURE__ */ jsxs13(
|
|
2974
3611
|
"tr",
|
|
2975
3612
|
{
|
|
2976
3613
|
onClick: () => {
|
|
@@ -2996,9 +3633,9 @@ function DataRow({
|
|
|
2996
3633
|
onRowClick
|
|
2997
3634
|
),
|
|
2998
3635
|
children: [
|
|
2999
|
-
row.getVisibleCells().map((cell) => /* @__PURE__ */
|
|
3000
|
-
hasRowActions && /* @__PURE__ */
|
|
3001
|
-
hasChevron && /* @__PURE__ */
|
|
3636
|
+
row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx34("td", { className: "px-4 py-3", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)),
|
|
3637
|
+
hasRowActions && /* @__PURE__ */ jsx34(RowActionCell, { actions: rowActions, rowOriginal: row.original }),
|
|
3638
|
+
hasChevron && /* @__PURE__ */ jsx34(
|
|
3002
3639
|
ChevronCell,
|
|
3003
3640
|
{
|
|
3004
3641
|
rowOriginal: row.original,
|
|
@@ -3033,9 +3670,9 @@ function TableFooter({
|
|
|
3033
3670
|
}) {
|
|
3034
3671
|
if (!data?.meta) return null;
|
|
3035
3672
|
if (isPaginated) {
|
|
3036
|
-
return /* @__PURE__ */
|
|
3673
|
+
return /* @__PURE__ */ jsx34(PaginationFooter, { table, entityLabel });
|
|
3037
3674
|
}
|
|
3038
|
-
return /* @__PURE__ */
|
|
3675
|
+
return /* @__PURE__ */ jsxs13("p", { className: "text-xs text-muted-foreground mt-3", children: [
|
|
3039
3676
|
"Showing ",
|
|
3040
3677
|
dataRows.length,
|
|
3041
3678
|
" of ",
|
|
@@ -3089,17 +3726,17 @@ function EntityTable(props) {
|
|
|
3089
3726
|
showChevron
|
|
3090
3727
|
);
|
|
3091
3728
|
const colCount = columns.length + (hasTrailingCol ? 1 : 0);
|
|
3092
|
-
return /* @__PURE__ */
|
|
3093
|
-
/* @__PURE__ */
|
|
3729
|
+
return /* @__PURE__ */ jsxs13("div", { children: [
|
|
3730
|
+
/* @__PURE__ */ jsx34(
|
|
3094
3731
|
"div",
|
|
3095
3732
|
{
|
|
3096
3733
|
ref: selectionMode ? containerRef : void 0,
|
|
3097
3734
|
tabIndex: selectionMode ? 0 : void 0,
|
|
3098
3735
|
onKeyDown: selectionMode ? handleKeyDown : void 0,
|
|
3099
|
-
className:
|
|
3100
|
-
children: /* @__PURE__ */
|
|
3101
|
-
/* @__PURE__ */
|
|
3102
|
-
table.getFlatHeaders().map((header) => /* @__PURE__ */
|
|
3736
|
+
className: cn32("rounded-lg border", selectionMode && "outline-none"),
|
|
3737
|
+
children: /* @__PURE__ */ jsxs13("table", { className: "w-full text-sm", children: [
|
|
3738
|
+
/* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsxs13("tr", { className: "border-b bg-muted/40", children: [
|
|
3739
|
+
table.getFlatHeaders().map((header) => /* @__PURE__ */ jsx34(
|
|
3103
3740
|
"th",
|
|
3104
3741
|
{
|
|
3105
3742
|
className: "text-left text-xs font-medium text-muted-foreground px-4 py-2.5",
|
|
@@ -3111,7 +3748,7 @@ function EntityTable(props) {
|
|
|
3111
3748
|
},
|
|
3112
3749
|
header.id
|
|
3113
3750
|
)),
|
|
3114
|
-
hasRowActions && /* @__PURE__ */
|
|
3751
|
+
hasRowActions && /* @__PURE__ */ jsx34(
|
|
3115
3752
|
"th",
|
|
3116
3753
|
{
|
|
3117
3754
|
"aria-label": "Actions",
|
|
@@ -3119,10 +3756,10 @@ function EntityTable(props) {
|
|
|
3119
3756
|
className: "w-24 text-right text-xs font-medium text-muted-foreground px-4 py-2.5"
|
|
3120
3757
|
}
|
|
3121
3758
|
),
|
|
3122
|
-
hasChevron && /* @__PURE__ */
|
|
3759
|
+
hasChevron && /* @__PURE__ */ jsx34("th", { "aria-label": "Open", scope: "col", className: "w-10" })
|
|
3123
3760
|
] }) }),
|
|
3124
|
-
/* @__PURE__ */
|
|
3125
|
-
/* @__PURE__ */
|
|
3761
|
+
/* @__PURE__ */ jsxs13("tbody", { children: [
|
|
3762
|
+
/* @__PURE__ */ jsx34(
|
|
3126
3763
|
StatusRows,
|
|
3127
3764
|
{
|
|
3128
3765
|
isLoading,
|
|
@@ -3135,7 +3772,7 @@ function EntityTable(props) {
|
|
|
3135
3772
|
colCount
|
|
3136
3773
|
}
|
|
3137
3774
|
),
|
|
3138
|
-
table.getRowModel().rows.map((row, index) => /* @__PURE__ */
|
|
3775
|
+
table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx34(
|
|
3139
3776
|
DataRow,
|
|
3140
3777
|
{
|
|
3141
3778
|
row,
|
|
@@ -3157,7 +3794,7 @@ function EntityTable(props) {
|
|
|
3157
3794
|
] })
|
|
3158
3795
|
}
|
|
3159
3796
|
),
|
|
3160
|
-
/* @__PURE__ */
|
|
3797
|
+
/* @__PURE__ */ jsx34(
|
|
3161
3798
|
TableFooter,
|
|
3162
3799
|
{
|
|
3163
3800
|
isPaginated,
|
|
@@ -3178,10 +3815,10 @@ function PaginationFooter({
|
|
|
3178
3815
|
const pageCount = table.getPageCount();
|
|
3179
3816
|
const from = rowCount === 0 ? 0 : pageIndex * pageSize + 1;
|
|
3180
3817
|
const to = Math.min((pageIndex + 1) * pageSize, rowCount);
|
|
3181
|
-
return /* @__PURE__ */
|
|
3182
|
-
/* @__PURE__ */
|
|
3183
|
-
/* @__PURE__ */
|
|
3184
|
-
/* @__PURE__ */
|
|
3818
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mt-3", children: [
|
|
3819
|
+
/* @__PURE__ */ jsx34("p", { className: "text-xs text-muted-foreground", children: rowCount === 0 ? `No ${entityLabel}` : `Showing ${from}\u2013${to} of ${rowCount} ${entityLabel}` }),
|
|
3820
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
|
|
3821
|
+
/* @__PURE__ */ jsx34(
|
|
3185
3822
|
"button",
|
|
3186
3823
|
{
|
|
3187
3824
|
type: "button",
|
|
@@ -3191,8 +3828,8 @@ function PaginationFooter({
|
|
|
3191
3828
|
children: "Previous"
|
|
3192
3829
|
}
|
|
3193
3830
|
),
|
|
3194
|
-
/* @__PURE__ */
|
|
3195
|
-
/* @__PURE__ */
|
|
3831
|
+
/* @__PURE__ */ jsx34("span", { className: "text-xs text-muted-foreground px-2", children: pageCount > 0 ? `${pageIndex + 1} / ${pageCount}` : "--" }),
|
|
3832
|
+
/* @__PURE__ */ jsx34(
|
|
3196
3833
|
"button",
|
|
3197
3834
|
{
|
|
3198
3835
|
type: "button",
|
|
@@ -3207,13 +3844,13 @@ function PaginationFooter({
|
|
|
3207
3844
|
}
|
|
3208
3845
|
|
|
3209
3846
|
// src/PropertyList/PropertyList.tsx
|
|
3210
|
-
import
|
|
3847
|
+
import React32 from "react";
|
|
3211
3848
|
import { copyTextToClipboard } from "@petrarca/sonnet-core";
|
|
3212
3849
|
|
|
3213
3850
|
// src/PropertyList/PropertyValue.tsx
|
|
3214
|
-
import { useState as
|
|
3851
|
+
import { useState as useState6 } from "react";
|
|
3215
3852
|
import { JSONTree } from "react-json-tree";
|
|
3216
|
-
import { jsx as
|
|
3853
|
+
import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3217
3854
|
var DEFAULT_CLAMP_CHARS = 180;
|
|
3218
3855
|
var tokenTheme = {
|
|
3219
3856
|
scheme: "sonnet",
|
|
@@ -3238,10 +3875,10 @@ function isObjectLike(v) {
|
|
|
3238
3875
|
return typeof v === "object" && v !== null;
|
|
3239
3876
|
}
|
|
3240
3877
|
function JsonValue({ value }) {
|
|
3241
|
-
const [open, setOpen] =
|
|
3878
|
+
const [open, setOpen] = useState6(false);
|
|
3242
3879
|
const summary = Array.isArray(value) ? `[${value.length} item${value.length === 1 ? "" : "s"}]` : `{${Object.keys(value).length} key${Object.keys(value).length === 1 ? "" : "s"}}`;
|
|
3243
3880
|
if (!open) {
|
|
3244
|
-
return /* @__PURE__ */
|
|
3881
|
+
return /* @__PURE__ */ jsxs14(
|
|
3245
3882
|
"button",
|
|
3246
3883
|
{
|
|
3247
3884
|
type: "button",
|
|
@@ -3253,13 +3890,13 @@ function JsonValue({ value }) {
|
|
|
3253
3890
|
children: [
|
|
3254
3891
|
summary,
|
|
3255
3892
|
" ",
|
|
3256
|
-
/* @__PURE__ */
|
|
3893
|
+
/* @__PURE__ */ jsx35("span", { className: "text-xs", children: "\u2014 show" })
|
|
3257
3894
|
]
|
|
3258
3895
|
}
|
|
3259
3896
|
);
|
|
3260
3897
|
}
|
|
3261
|
-
return /* @__PURE__ */
|
|
3262
|
-
/* @__PURE__ */
|
|
3898
|
+
return /* @__PURE__ */ jsxs14("div", { className: "text-xs font-mono", children: [
|
|
3899
|
+
/* @__PURE__ */ jsx35(
|
|
3263
3900
|
"button",
|
|
3264
3901
|
{
|
|
3265
3902
|
type: "button",
|
|
@@ -3271,7 +3908,7 @@ function JsonValue({ value }) {
|
|
|
3271
3908
|
children: "hide"
|
|
3272
3909
|
}
|
|
3273
3910
|
),
|
|
3274
|
-
/* @__PURE__ */
|
|
3911
|
+
/* @__PURE__ */ jsx35("div", { className: "max-h-64 overflow-auto rounded border border-border bg-muted/30 px-2 py-1", children: /* @__PURE__ */ jsx35(
|
|
3275
3912
|
JSONTree,
|
|
3276
3913
|
{
|
|
3277
3914
|
data: value,
|
|
@@ -3284,11 +3921,11 @@ function JsonValue({ value }) {
|
|
|
3284
3921
|
] });
|
|
3285
3922
|
}
|
|
3286
3923
|
function LongTextValue({ text }) {
|
|
3287
|
-
const [open, setOpen] =
|
|
3924
|
+
const [open, setOpen] = useState6(false);
|
|
3288
3925
|
if (!open) {
|
|
3289
|
-
return /* @__PURE__ */
|
|
3290
|
-
/* @__PURE__ */
|
|
3291
|
-
/* @__PURE__ */
|
|
3926
|
+
return /* @__PURE__ */ jsxs14("span", { className: "break-words", children: [
|
|
3927
|
+
/* @__PURE__ */ jsx35("span", { className: "line-clamp-3 align-bottom", children: text }),
|
|
3928
|
+
/* @__PURE__ */ jsx35(
|
|
3292
3929
|
"button",
|
|
3293
3930
|
{
|
|
3294
3931
|
type: "button",
|
|
@@ -3302,9 +3939,9 @@ function LongTextValue({ text }) {
|
|
|
3302
3939
|
)
|
|
3303
3940
|
] });
|
|
3304
3941
|
}
|
|
3305
|
-
return /* @__PURE__ */
|
|
3306
|
-
/* @__PURE__ */
|
|
3307
|
-
/* @__PURE__ */
|
|
3942
|
+
return /* @__PURE__ */ jsxs14("span", { className: "break-words", children: [
|
|
3943
|
+
/* @__PURE__ */ jsx35("span", { className: "block max-h-64 overflow-auto whitespace-pre-wrap rounded border border-border bg-muted/30 px-2 py-1", children: text }),
|
|
3944
|
+
/* @__PURE__ */ jsx35(
|
|
3308
3945
|
"button",
|
|
3309
3946
|
{
|
|
3310
3947
|
type: "button",
|
|
@@ -3322,12 +3959,12 @@ function renderFromSchema(value, schema, className) {
|
|
|
3322
3959
|
const cellName = schema["x-ui-cell"] ?? inferCellRenderer(schema.type, schema.format);
|
|
3323
3960
|
if (cellName === "json") {
|
|
3324
3961
|
const parsed = typeof value === "string" ? safeParse(value) : value;
|
|
3325
|
-
return isObjectLike(parsed) ? /* @__PURE__ */
|
|
3962
|
+
return isObjectLike(parsed) ? /* @__PURE__ */ jsx35(JsonValue, { value: parsed }) : null;
|
|
3326
3963
|
}
|
|
3327
3964
|
if (cellName && cellName !== "text") {
|
|
3328
3965
|
const Renderer = CELL_RENDERERS[cellName];
|
|
3329
3966
|
if (Renderer) {
|
|
3330
|
-
return /* @__PURE__ */
|
|
3967
|
+
return /* @__PURE__ */ jsx35("span", { className, children: /* @__PURE__ */ jsx35(
|
|
3331
3968
|
Renderer,
|
|
3332
3969
|
{
|
|
3333
3970
|
value,
|
|
@@ -3341,23 +3978,23 @@ function renderFromSchema(value, schema, className) {
|
|
|
3341
3978
|
}
|
|
3342
3979
|
function renderObjectLike(value, className) {
|
|
3343
3980
|
if (Array.isArray(value) && value.every((v) => !isObjectLike(v))) {
|
|
3344
|
-
return /* @__PURE__ */
|
|
3981
|
+
return /* @__PURE__ */ jsx35("span", { className: `break-words ${className ?? ""}`, children: value.map(String).join(", ") });
|
|
3345
3982
|
}
|
|
3346
|
-
return /* @__PURE__ */
|
|
3983
|
+
return /* @__PURE__ */ jsx35(JsonValue, { value });
|
|
3347
3984
|
}
|
|
3348
3985
|
function renderString(value, className, clampChars) {
|
|
3349
3986
|
if (typeof value === "boolean") {
|
|
3350
|
-
return /* @__PURE__ */
|
|
3987
|
+
return /* @__PURE__ */ jsx35("span", { className, children: value ? "true" : "false" });
|
|
3351
3988
|
}
|
|
3352
3989
|
const str = String(value);
|
|
3353
3990
|
if (str.length > clampChars || str.includes("\n")) {
|
|
3354
|
-
return /* @__PURE__ */
|
|
3991
|
+
return /* @__PURE__ */ jsx35("span", { className, children: /* @__PURE__ */ jsx35(LongTextValue, { text: str }) });
|
|
3355
3992
|
}
|
|
3356
|
-
return /* @__PURE__ */
|
|
3993
|
+
return /* @__PURE__ */ jsx35("span", { className: `break-words ${className ?? ""}`, children: str });
|
|
3357
3994
|
}
|
|
3358
3995
|
function renderFromValue(value, className, clampChars) {
|
|
3359
3996
|
if (value == null) {
|
|
3360
|
-
return /* @__PURE__ */
|
|
3997
|
+
return /* @__PURE__ */ jsx35("span", { className: `text-muted-foreground ${className ?? ""}`, children: "\u2014" });
|
|
3361
3998
|
}
|
|
3362
3999
|
if (isObjectLike(value)) return renderObjectLike(value, className);
|
|
3363
4000
|
return renderString(value, className, clampChars);
|
|
@@ -3380,7 +4017,7 @@ function safeParse(s) {
|
|
|
3380
4017
|
}
|
|
3381
4018
|
|
|
3382
4019
|
// src/PropertyList/PropertyList.tsx
|
|
3383
|
-
import { jsx as
|
|
4020
|
+
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3384
4021
|
function PropertyList({
|
|
3385
4022
|
properties,
|
|
3386
4023
|
propertySchemas,
|
|
@@ -3392,28 +4029,28 @@ function PropertyList({
|
|
|
3392
4029
|
}) {
|
|
3393
4030
|
const entries = Object.entries(properties ?? {});
|
|
3394
4031
|
if (entries.length === 0) {
|
|
3395
|
-
return /* @__PURE__ */
|
|
4032
|
+
return /* @__PURE__ */ jsx36("p", { className: "text-sm text-muted-foreground italic", children: emptyLabel });
|
|
3396
4033
|
}
|
|
3397
|
-
const header = showHeader && /* @__PURE__ */
|
|
4034
|
+
const header = showHeader && /* @__PURE__ */ jsx36("p", { className: "text-[11px] text-muted-foreground mb-1.5", children: "Properties" });
|
|
3398
4035
|
const dtClass = `text-[11px] text-muted-foreground ${copyable ? "cursor-pointer hover:text-foreground" : ""}`;
|
|
3399
4036
|
const dtProps = (value) => copyable ? {
|
|
3400
4037
|
onClick: () => copyTextToClipboard(stringForCopy(value)),
|
|
3401
4038
|
title: "Click to copy value"
|
|
3402
4039
|
} : {};
|
|
3403
4040
|
if (layout === "stacked") {
|
|
3404
|
-
return /* @__PURE__ */
|
|
4041
|
+
return /* @__PURE__ */ jsxs15("div", { className, children: [
|
|
3405
4042
|
header,
|
|
3406
|
-
/* @__PURE__ */
|
|
3407
|
-
/* @__PURE__ */
|
|
3408
|
-
/* @__PURE__ */
|
|
4043
|
+
/* @__PURE__ */ jsx36("dl", { className: "space-y-1", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs15("div", { children: [
|
|
4044
|
+
/* @__PURE__ */ jsx36("dt", { className: dtClass, ...dtProps(value), children: key }),
|
|
4045
|
+
/* @__PURE__ */ jsx36("dd", { className: "text-sm text-foreground font-medium break-words", children: /* @__PURE__ */ jsx36(PropertyValue, { value, schema: propertySchemas?.[key] }) })
|
|
3409
4046
|
] }, key)) })
|
|
3410
4047
|
] });
|
|
3411
4048
|
}
|
|
3412
|
-
return /* @__PURE__ */
|
|
4049
|
+
return /* @__PURE__ */ jsxs15("div", { className, children: [
|
|
3413
4050
|
header,
|
|
3414
|
-
/* @__PURE__ */
|
|
3415
|
-
/* @__PURE__ */
|
|
3416
|
-
/* @__PURE__ */
|
|
4051
|
+
/* @__PURE__ */ jsx36("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 items-baseline", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs15(React32.Fragment, { children: [
|
|
4052
|
+
/* @__PURE__ */ jsx36("dt", { className: `${dtClass} whitespace-nowrap`, ...dtProps(value), children: key }),
|
|
4053
|
+
/* @__PURE__ */ jsx36("dd", { className: "text-sm text-foreground min-w-0 break-words", children: /* @__PURE__ */ jsx36(PropertyValue, { value, schema: propertySchemas?.[key] }) })
|
|
3417
4054
|
] }, key)) })
|
|
3418
4055
|
] });
|
|
3419
4056
|
}
|
|
@@ -3424,13 +4061,13 @@ function stringForCopy(value) {
|
|
|
3424
4061
|
}
|
|
3425
4062
|
|
|
3426
4063
|
// src/EntitySelect/EntitySelect.tsx
|
|
3427
|
-
import * as
|
|
3428
|
-
import { Check as
|
|
3429
|
-
import { cn as
|
|
4064
|
+
import * as React33 from "react";
|
|
4065
|
+
import { Check as Check5, ChevronsUpDown, Loader2, X as X3 } from "lucide-react";
|
|
4066
|
+
import { cn as cn33 } from "@petrarca/sonnet-core";
|
|
3430
4067
|
import {
|
|
3431
4068
|
useEntityOptions
|
|
3432
4069
|
} from "@petrarca/sonnet-core/hooks";
|
|
3433
|
-
import { Fragment as
|
|
4070
|
+
import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3434
4071
|
function emptyStateMessage({
|
|
3435
4072
|
mode,
|
|
3436
4073
|
search,
|
|
@@ -3448,8 +4085,8 @@ function emptyStateMessage({
|
|
|
3448
4085
|
return emptyMessage;
|
|
3449
4086
|
}
|
|
3450
4087
|
function useHasSearched(submit) {
|
|
3451
|
-
const [hasSearched, setHasSearched] =
|
|
3452
|
-
const wrappedSubmit =
|
|
4088
|
+
const [hasSearched, setHasSearched] = React33.useState(false);
|
|
4089
|
+
const wrappedSubmit = React33.useCallback(() => {
|
|
3453
4090
|
setHasSearched(true);
|
|
3454
4091
|
submit();
|
|
3455
4092
|
}, [submit]);
|
|
@@ -3472,19 +4109,19 @@ function EntitySelectLabel({
|
|
|
3472
4109
|
description
|
|
3473
4110
|
}) {
|
|
3474
4111
|
const hasLabel = label !== void 0 && label !== false;
|
|
3475
|
-
return /* @__PURE__ */
|
|
3476
|
-
hasLabel && /* @__PURE__ */
|
|
4112
|
+
return /* @__PURE__ */ jsxs16(Fragment3, { children: [
|
|
4113
|
+
hasLabel && /* @__PURE__ */ jsxs16(
|
|
3477
4114
|
"label",
|
|
3478
4115
|
{
|
|
3479
4116
|
htmlFor: id,
|
|
3480
4117
|
className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
3481
4118
|
children: [
|
|
3482
4119
|
label,
|
|
3483
|
-
required && /* @__PURE__ */
|
|
4120
|
+
required && /* @__PURE__ */ jsx37("span", { className: "ml-1 text-destructive", children: "*" })
|
|
3484
4121
|
]
|
|
3485
4122
|
}
|
|
3486
4123
|
),
|
|
3487
|
-
description && /* @__PURE__ */
|
|
4124
|
+
description && /* @__PURE__ */ jsx37("p", { className: "text-sm text-muted-foreground", children: description })
|
|
3488
4125
|
] });
|
|
3489
4126
|
}
|
|
3490
4127
|
function EntitySelectDropdown({
|
|
@@ -3501,8 +4138,8 @@ function EntitySelectDropdown({
|
|
|
3501
4138
|
value,
|
|
3502
4139
|
handleSelect
|
|
3503
4140
|
}) {
|
|
3504
|
-
return /* @__PURE__ */
|
|
3505
|
-
/* @__PURE__ */
|
|
4141
|
+
return /* @__PURE__ */ jsxs16(Command, { shouldFilter: false, children: [
|
|
4142
|
+
/* @__PURE__ */ jsx37(
|
|
3506
4143
|
CommandInput,
|
|
3507
4144
|
{
|
|
3508
4145
|
placeholder: searchPlaceholder,
|
|
@@ -3516,8 +4153,8 @@ function EntitySelectDropdown({
|
|
|
3516
4153
|
} : void 0
|
|
3517
4154
|
}
|
|
3518
4155
|
),
|
|
3519
|
-
/* @__PURE__ */
|
|
3520
|
-
/* @__PURE__ */
|
|
4156
|
+
/* @__PURE__ */ jsxs16(CommandList, { children: [
|
|
4157
|
+
/* @__PURE__ */ jsx37(CommandEmpty, { children: emptyStateMessage({
|
|
3521
4158
|
mode,
|
|
3522
4159
|
search,
|
|
3523
4160
|
minChars,
|
|
@@ -3525,16 +4162,16 @@ function EntitySelectDropdown({
|
|
|
3525
4162
|
hasSearched,
|
|
3526
4163
|
emptyMessage
|
|
3527
4164
|
}) }),
|
|
3528
|
-
/* @__PURE__ */
|
|
4165
|
+
/* @__PURE__ */ jsx37(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs16(
|
|
3529
4166
|
CommandItem,
|
|
3530
4167
|
{
|
|
3531
4168
|
value: option.value,
|
|
3532
4169
|
onSelect: handleSelect,
|
|
3533
4170
|
children: [
|
|
3534
|
-
/* @__PURE__ */
|
|
3535
|
-
|
|
4171
|
+
/* @__PURE__ */ jsx37(
|
|
4172
|
+
Check5,
|
|
3536
4173
|
{
|
|
3537
|
-
className:
|
|
4174
|
+
className: cn33(
|
|
3538
4175
|
"mr-2 h-4 w-4",
|
|
3539
4176
|
value === option.value ? "opacity-100" : "opacity-0"
|
|
3540
4177
|
)
|
|
@@ -3573,8 +4210,8 @@ function EntitySelect(props) {
|
|
|
3573
4210
|
emptyMessage,
|
|
3574
4211
|
disabled
|
|
3575
4212
|
} = resolveEntitySelectDefaults(props);
|
|
3576
|
-
const [open, setOpen] =
|
|
3577
|
-
const [selectedLabel, setSelectedLabel] =
|
|
4213
|
+
const [open, setOpen] = React33.useState(false);
|
|
4214
|
+
const [selectedLabel, setSelectedLabel] = React33.useState(null);
|
|
3578
4215
|
const {
|
|
3579
4216
|
options,
|
|
3580
4217
|
isLoading,
|
|
@@ -3583,7 +4220,7 @@ function EntitySelect(props) {
|
|
|
3583
4220
|
submit: rawSubmit
|
|
3584
4221
|
} = useEntityOptions({ fetcher, queryKey, mode, minChars });
|
|
3585
4222
|
const [hasSearched, submit] = useHasSearched(rawSubmit);
|
|
3586
|
-
|
|
4223
|
+
React33.useEffect(() => {
|
|
3587
4224
|
if (!value) {
|
|
3588
4225
|
setSelectedLabel(null);
|
|
3589
4226
|
return;
|
|
@@ -3595,7 +4232,7 @@ function EntitySelect(props) {
|
|
|
3595
4232
|
setSelectedLabel(selectedOption.label);
|
|
3596
4233
|
}
|
|
3597
4234
|
}, [value, options, selectedOption]);
|
|
3598
|
-
const handleClear =
|
|
4235
|
+
const handleClear = React33.useCallback(
|
|
3599
4236
|
(e) => {
|
|
3600
4237
|
e.preventDefault();
|
|
3601
4238
|
e.stopPropagation();
|
|
@@ -3606,7 +4243,7 @@ function EntitySelect(props) {
|
|
|
3606
4243
|
[onChange, onChangeOption]
|
|
3607
4244
|
);
|
|
3608
4245
|
const showClear = Boolean(clearable && value && !required && !disabled);
|
|
3609
|
-
const handleSelect =
|
|
4246
|
+
const handleSelect = React33.useCallback(
|
|
3610
4247
|
(selectedValue) => {
|
|
3611
4248
|
const opt = options.find((o) => o.value === selectedValue);
|
|
3612
4249
|
if (opt) setSelectedLabel(opt.label);
|
|
@@ -3619,7 +4256,7 @@ function EntitySelect(props) {
|
|
|
3619
4256
|
},
|
|
3620
4257
|
[options, value, onChange, onChangeOption, setSearch]
|
|
3621
4258
|
);
|
|
3622
|
-
const handleOpenChange =
|
|
4259
|
+
const handleOpenChange = React33.useCallback(
|
|
3623
4260
|
(newOpen) => {
|
|
3624
4261
|
setOpen(newOpen);
|
|
3625
4262
|
if (!newOpen) {
|
|
@@ -3629,8 +4266,8 @@ function EntitySelect(props) {
|
|
|
3629
4266
|
},
|
|
3630
4267
|
[onBlur, setSearch]
|
|
3631
4268
|
);
|
|
3632
|
-
return /* @__PURE__ */
|
|
3633
|
-
/* @__PURE__ */
|
|
4269
|
+
return /* @__PURE__ */ jsxs16("div", { className: cn33("space-y-2", className), children: [
|
|
4270
|
+
/* @__PURE__ */ jsx37(
|
|
3634
4271
|
EntitySelectLabel,
|
|
3635
4272
|
{
|
|
3636
4273
|
id,
|
|
@@ -3639,25 +4276,25 @@ function EntitySelect(props) {
|
|
|
3639
4276
|
description
|
|
3640
4277
|
}
|
|
3641
4278
|
),
|
|
3642
|
-
/* @__PURE__ */
|
|
3643
|
-
/* @__PURE__ */
|
|
4279
|
+
/* @__PURE__ */ jsxs16(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
4280
|
+
/* @__PURE__ */ jsx37(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
|
|
3644
4281
|
Button,
|
|
3645
4282
|
{
|
|
3646
4283
|
id,
|
|
3647
4284
|
variant: "outline",
|
|
3648
4285
|
role: "combobox",
|
|
3649
4286
|
"aria-expanded": open,
|
|
3650
|
-
className:
|
|
4287
|
+
className: cn33(
|
|
3651
4288
|
"w-full justify-between",
|
|
3652
4289
|
!selectedLabel && "text-muted-foreground",
|
|
3653
4290
|
error && "border-destructive"
|
|
3654
4291
|
),
|
|
3655
4292
|
disabled,
|
|
3656
4293
|
children: [
|
|
3657
|
-
/* @__PURE__ */
|
|
3658
|
-
/* @__PURE__ */
|
|
3659
|
-
isLoading && /* @__PURE__ */
|
|
3660
|
-
showClear && /* @__PURE__ */
|
|
4294
|
+
/* @__PURE__ */ jsx37("span", { className: "truncate", children: selectedLabel ?? placeholder }),
|
|
4295
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
|
|
4296
|
+
isLoading && /* @__PURE__ */ jsx37(Loader2, { className: "h-4 w-4 animate-spin opacity-50" }),
|
|
4297
|
+
showClear && /* @__PURE__ */ jsx37(
|
|
3661
4298
|
"span",
|
|
3662
4299
|
{
|
|
3663
4300
|
role: "button",
|
|
@@ -3665,20 +4302,20 @@ function EntitySelect(props) {
|
|
|
3665
4302
|
tabIndex: -1,
|
|
3666
4303
|
className: "rounded-sm opacity-50 hover:opacity-100",
|
|
3667
4304
|
onPointerDown: handleClear,
|
|
3668
|
-
children: /* @__PURE__ */
|
|
4305
|
+
children: /* @__PURE__ */ jsx37(X3, { className: "h-4 w-4 shrink-0" })
|
|
3669
4306
|
}
|
|
3670
4307
|
),
|
|
3671
|
-
/* @__PURE__ */
|
|
4308
|
+
/* @__PURE__ */ jsx37(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
|
|
3672
4309
|
] })
|
|
3673
4310
|
]
|
|
3674
4311
|
}
|
|
3675
4312
|
) }),
|
|
3676
|
-
/* @__PURE__ */
|
|
4313
|
+
/* @__PURE__ */ jsx37(
|
|
3677
4314
|
PopoverContent,
|
|
3678
4315
|
{
|
|
3679
4316
|
className: "w-[--radix-popover-trigger-width] p-0",
|
|
3680
4317
|
align: "start",
|
|
3681
|
-
children: /* @__PURE__ */
|
|
4318
|
+
children: /* @__PURE__ */ jsx37(
|
|
3682
4319
|
EntitySelectDropdown,
|
|
3683
4320
|
{
|
|
3684
4321
|
searchPlaceholder,
|
|
@@ -3698,34 +4335,34 @@ function EntitySelect(props) {
|
|
|
3698
4335
|
}
|
|
3699
4336
|
)
|
|
3700
4337
|
] }),
|
|
3701
|
-
error && /* @__PURE__ */
|
|
4338
|
+
error && /* @__PURE__ */ jsx37("p", { className: "text-sm font-medium text-destructive", children: error })
|
|
3702
4339
|
] });
|
|
3703
4340
|
}
|
|
3704
4341
|
|
|
3705
4342
|
// src/EntityTree/EntityTree.tsx
|
|
3706
4343
|
import {
|
|
3707
|
-
forwardRef as
|
|
4344
|
+
forwardRef as forwardRef22,
|
|
3708
4345
|
useImperativeHandle as useImperativeHandle2,
|
|
3709
|
-
useMemo as
|
|
4346
|
+
useMemo as useMemo7,
|
|
3710
4347
|
useRef as useRef6
|
|
3711
4348
|
} from "react";
|
|
3712
4349
|
import { Pencil } from "lucide-react";
|
|
3713
|
-
import { cn as
|
|
4350
|
+
import { cn as cn35 } from "@petrarca/sonnet-core";
|
|
3714
4351
|
|
|
3715
4352
|
// src/TreeView/TreeView.tsx
|
|
3716
4353
|
import {
|
|
3717
|
-
forwardRef as
|
|
4354
|
+
forwardRef as forwardRef21,
|
|
3718
4355
|
useCallback as useCallback4,
|
|
3719
|
-
useEffect as
|
|
4356
|
+
useEffect as useEffect8,
|
|
3720
4357
|
useId as useId2,
|
|
3721
4358
|
useImperativeHandle,
|
|
3722
|
-
useMemo as
|
|
4359
|
+
useMemo as useMemo6,
|
|
3723
4360
|
useRef as useRef5,
|
|
3724
|
-
useState as
|
|
4361
|
+
useState as useState8
|
|
3725
4362
|
} from "react";
|
|
3726
|
-
import { ChevronRight as
|
|
3727
|
-
import { cn as
|
|
3728
|
-
import { jsx as
|
|
4363
|
+
import { ChevronRight as ChevronRight4 } from "lucide-react";
|
|
4364
|
+
import { cn as cn34 } from "@petrarca/sonnet-core";
|
|
4365
|
+
import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3729
4366
|
function flatten(nodes, expandedIds, depth = 0, parentId = null, result = []) {
|
|
3730
4367
|
for (const node of nodes) {
|
|
3731
4368
|
result.push({ node, depth, parentId });
|
|
@@ -3742,15 +4379,15 @@ function ToggleIcon({
|
|
|
3742
4379
|
isExpanded
|
|
3743
4380
|
}) {
|
|
3744
4381
|
if (!hasChildren) {
|
|
3745
|
-
return /* @__PURE__ */
|
|
4382
|
+
return /* @__PURE__ */ jsx38("span", { className: "block w-1.5 h-1.5 rounded-full bg-border mx-auto" });
|
|
3746
4383
|
}
|
|
3747
4384
|
if (isLoading) {
|
|
3748
|
-
return /* @__PURE__ */
|
|
4385
|
+
return /* @__PURE__ */ jsx38("span", { className: "block w-3 h-3 rounded-full border-2 border-muted-foreground/40 border-t-foreground animate-spin" });
|
|
3749
4386
|
}
|
|
3750
|
-
return /* @__PURE__ */
|
|
3751
|
-
|
|
4387
|
+
return /* @__PURE__ */ jsx38(
|
|
4388
|
+
ChevronRight4,
|
|
3752
4389
|
{
|
|
3753
|
-
className:
|
|
4390
|
+
className: cn34(
|
|
3754
4391
|
"h-3.5 w-3.5 text-muted-foreground transition-transform",
|
|
3755
4392
|
isExpanded && "rotate-90"
|
|
3756
4393
|
)
|
|
@@ -3796,7 +4433,7 @@ function NodeRow({
|
|
|
3796
4433
|
},
|
|
3797
4434
|
[node.id, onSelectionChange]
|
|
3798
4435
|
);
|
|
3799
|
-
return /* @__PURE__ */
|
|
4436
|
+
return /* @__PURE__ */ jsxs17(
|
|
3800
4437
|
"li",
|
|
3801
4438
|
{
|
|
3802
4439
|
id: `${treeId}-node-${node.id}`,
|
|
@@ -3805,7 +4442,7 @@ function NodeRow({
|
|
|
3805
4442
|
"aria-selected": onSelectionChange ? isSelected : void 0,
|
|
3806
4443
|
"aria-busy": node.isLoading,
|
|
3807
4444
|
tabIndex: isFocused ? 0 : -1,
|
|
3808
|
-
className:
|
|
4445
|
+
className: cn34(
|
|
3809
4446
|
"flex items-center gap-1 px-2 py-1.5 rounded-sm text-sm select-none",
|
|
3810
4447
|
"cursor-pointer transition-colors",
|
|
3811
4448
|
"hover:bg-accent/60",
|
|
@@ -3815,13 +4452,13 @@ function NodeRow({
|
|
|
3815
4452
|
style: { paddingLeft: depth * indentPx + 8 },
|
|
3816
4453
|
onClick: handleClick,
|
|
3817
4454
|
children: [
|
|
3818
|
-
/* @__PURE__ */
|
|
4455
|
+
/* @__PURE__ */ jsx38(
|
|
3819
4456
|
"span",
|
|
3820
4457
|
{
|
|
3821
4458
|
className: "shrink-0 flex items-center justify-center w-4 h-4",
|
|
3822
4459
|
onClick: handleToggle,
|
|
3823
4460
|
"aria-hidden": true,
|
|
3824
|
-
children: /* @__PURE__ */
|
|
4461
|
+
children: /* @__PURE__ */ jsx38(
|
|
3825
4462
|
ToggleIcon,
|
|
3826
4463
|
{
|
|
3827
4464
|
hasChildren: node.hasChildren,
|
|
@@ -3831,7 +4468,7 @@ function NodeRow({
|
|
|
3831
4468
|
)
|
|
3832
4469
|
}
|
|
3833
4470
|
),
|
|
3834
|
-
onSelectionChange && isSelectable && /* @__PURE__ */
|
|
4471
|
+
onSelectionChange && isSelectable && /* @__PURE__ */ jsx38(
|
|
3835
4472
|
"input",
|
|
3836
4473
|
{
|
|
3837
4474
|
type: "checkbox",
|
|
@@ -3843,8 +4480,8 @@ function NodeRow({
|
|
|
3843
4480
|
tabIndex: -1
|
|
3844
4481
|
}
|
|
3845
4482
|
),
|
|
3846
|
-
/* @__PURE__ */
|
|
3847
|
-
node.isError && /* @__PURE__ */
|
|
4483
|
+
/* @__PURE__ */ jsx38("span", { className: "flex-1 min-w-0", children: renderNode(node, depth) }),
|
|
4484
|
+
node.isError && /* @__PURE__ */ jsx38("span", { className: "shrink-0 text-xs text-destructive", "aria-live": "polite", children: "Failed to load" })
|
|
3848
4485
|
]
|
|
3849
4486
|
}
|
|
3850
4487
|
);
|
|
@@ -3864,11 +4501,11 @@ function TreeViewInner({
|
|
|
3864
4501
|
className
|
|
3865
4502
|
}, ref) {
|
|
3866
4503
|
const treeId = useId2();
|
|
3867
|
-
const [focusedId, setFocusedId] =
|
|
4504
|
+
const [focusedId, setFocusedId] = useState8(null);
|
|
3868
4505
|
const listRef = useRef5(null);
|
|
3869
|
-
const [constrainedParent, setConstrainedParent] =
|
|
4506
|
+
const [constrainedParent, setConstrainedParent] = useState8(UNCONSTRAINED);
|
|
3870
4507
|
const selectionSize = selectedIds?.size ?? 0;
|
|
3871
|
-
|
|
4508
|
+
useEffect8(() => {
|
|
3872
4509
|
if (selectionSize === 0) setConstrainedParent(UNCONSTRAINED);
|
|
3873
4510
|
}, [selectionSize]);
|
|
3874
4511
|
useImperativeHandle(
|
|
@@ -3885,16 +4522,16 @@ function TreeViewInner({
|
|
|
3885
4522
|
}),
|
|
3886
4523
|
[focusedId]
|
|
3887
4524
|
);
|
|
3888
|
-
const flatNodes =
|
|
4525
|
+
const flatNodes = useMemo6(
|
|
3889
4526
|
() => flatten(nodes, expandedIds),
|
|
3890
4527
|
[nodes, expandedIds]
|
|
3891
4528
|
);
|
|
3892
|
-
const parentById =
|
|
4529
|
+
const parentById = useMemo6(() => {
|
|
3893
4530
|
const map = /* @__PURE__ */ new Map();
|
|
3894
4531
|
for (const f of flatNodes) map.set(f.node.id, f.parentId);
|
|
3895
4532
|
return map;
|
|
3896
4533
|
}, [flatNodes]);
|
|
3897
|
-
const selectableSet =
|
|
4534
|
+
const selectableSet = useMemo6(() => {
|
|
3898
4535
|
if (!constrainSelectionToSiblings || constrainedParent === UNCONSTRAINED) {
|
|
3899
4536
|
return void 0;
|
|
3900
4537
|
}
|
|
@@ -4020,10 +4657,10 @@ function TreeViewInner({
|
|
|
4020
4657
|
]
|
|
4021
4658
|
);
|
|
4022
4659
|
if (nodes.length === 0) {
|
|
4023
|
-
return /* @__PURE__ */
|
|
4660
|
+
return /* @__PURE__ */ jsx38(
|
|
4024
4661
|
"div",
|
|
4025
4662
|
{
|
|
4026
|
-
className:
|
|
4663
|
+
className: cn34(
|
|
4027
4664
|
"py-8 text-center text-sm text-muted-foreground",
|
|
4028
4665
|
className
|
|
4029
4666
|
),
|
|
@@ -4031,15 +4668,15 @@ function TreeViewInner({
|
|
|
4031
4668
|
}
|
|
4032
4669
|
);
|
|
4033
4670
|
}
|
|
4034
|
-
return /* @__PURE__ */
|
|
4671
|
+
return /* @__PURE__ */ jsx38(
|
|
4035
4672
|
"ul",
|
|
4036
4673
|
{
|
|
4037
4674
|
ref: listRef,
|
|
4038
4675
|
role: "tree",
|
|
4039
4676
|
"aria-label": "Tree",
|
|
4040
|
-
className:
|
|
4677
|
+
className: cn34("outline-none", className),
|
|
4041
4678
|
onKeyDown: handleKeyDown,
|
|
4042
|
-
children: flatNodes.map((flat) => /* @__PURE__ */
|
|
4679
|
+
children: flatNodes.map((flat) => /* @__PURE__ */ jsx38(
|
|
4043
4680
|
NodeRow,
|
|
4044
4681
|
{
|
|
4045
4682
|
flat,
|
|
@@ -4061,26 +4698,26 @@ function TreeViewInner({
|
|
|
4061
4698
|
}
|
|
4062
4699
|
);
|
|
4063
4700
|
}
|
|
4064
|
-
var TreeView =
|
|
4701
|
+
var TreeView = forwardRef21(TreeViewInner);
|
|
4065
4702
|
|
|
4066
4703
|
// src/EntityTree/EntityTree.tsx
|
|
4067
|
-
import { jsx as
|
|
4704
|
+
import { jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
4068
4705
|
function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
4069
4706
|
return function renderCells(node) {
|
|
4070
4707
|
const isActive = node.id === activeNodeIdRef.current;
|
|
4071
|
-
return /* @__PURE__ */
|
|
4708
|
+
return /* @__PURE__ */ jsxs18("span", { className: "flex items-center gap-4 min-w-0 w-full group/row", children: [
|
|
4072
4709
|
resolved.map((col) => {
|
|
4073
4710
|
const Renderer = resolveCellRenderer2(
|
|
4074
4711
|
col.cellRenderer,
|
|
4075
4712
|
localRenderers
|
|
4076
4713
|
);
|
|
4077
4714
|
const value = node.data[col.key];
|
|
4078
|
-
return /* @__PURE__ */
|
|
4715
|
+
return /* @__PURE__ */ jsx39(
|
|
4079
4716
|
"span",
|
|
4080
4717
|
{
|
|
4081
4718
|
className: "shrink-0",
|
|
4082
4719
|
style: col.width !== void 0 ? { width: col.width } : void 0,
|
|
4083
|
-
children: /* @__PURE__ */
|
|
4720
|
+
children: /* @__PURE__ */ jsx39(
|
|
4084
4721
|
Renderer,
|
|
4085
4722
|
{
|
|
4086
4723
|
value,
|
|
@@ -4092,7 +4729,7 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
|
4092
4729
|
col.key
|
|
4093
4730
|
);
|
|
4094
4731
|
}),
|
|
4095
|
-
onNodeEdit && /* @__PURE__ */
|
|
4732
|
+
onNodeEdit && /* @__PURE__ */ jsx39("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx39(
|
|
4096
4733
|
"button",
|
|
4097
4734
|
{
|
|
4098
4735
|
type: "button",
|
|
@@ -4101,11 +4738,11 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
|
4101
4738
|
onNodeEdit(node);
|
|
4102
4739
|
},
|
|
4103
4740
|
"aria-label": "Edit",
|
|
4104
|
-
className:
|
|
4741
|
+
className: cn35(
|
|
4105
4742
|
"p-1 rounded hover:bg-background text-muted-foreground hover:text-foreground transition-colors",
|
|
4106
4743
|
isActive ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"
|
|
4107
4744
|
),
|
|
4108
|
-
children: /* @__PURE__ */
|
|
4745
|
+
children: /* @__PURE__ */ jsx39(Pencil, { className: "h-3.5 w-3.5" })
|
|
4109
4746
|
}
|
|
4110
4747
|
) })
|
|
4111
4748
|
] });
|
|
@@ -4128,10 +4765,10 @@ function renderTreeStatus({
|
|
|
4128
4765
|
className
|
|
4129
4766
|
}) {
|
|
4130
4767
|
if (isLoading && nodes.length === 0) {
|
|
4131
|
-
return /* @__PURE__ */
|
|
4768
|
+
return /* @__PURE__ */ jsx39(
|
|
4132
4769
|
"div",
|
|
4133
4770
|
{
|
|
4134
|
-
className:
|
|
4771
|
+
className: cn35(
|
|
4135
4772
|
"py-8 text-center text-sm text-muted-foreground",
|
|
4136
4773
|
className
|
|
4137
4774
|
),
|
|
@@ -4140,19 +4777,19 @@ function renderTreeStatus({
|
|
|
4140
4777
|
);
|
|
4141
4778
|
}
|
|
4142
4779
|
if (isError) {
|
|
4143
|
-
return /* @__PURE__ */
|
|
4780
|
+
return /* @__PURE__ */ jsx39(
|
|
4144
4781
|
"div",
|
|
4145
4782
|
{
|
|
4146
|
-
className:
|
|
4783
|
+
className: cn35("py-8 text-center text-sm text-destructive", className),
|
|
4147
4784
|
children: errorMessage ?? `Failed to load ${entityLabel}.`
|
|
4148
4785
|
}
|
|
4149
4786
|
);
|
|
4150
4787
|
}
|
|
4151
4788
|
if (!isLoading && nodes.length === 0) {
|
|
4152
|
-
return /* @__PURE__ */
|
|
4789
|
+
return /* @__PURE__ */ jsxs18(
|
|
4153
4790
|
"div",
|
|
4154
4791
|
{
|
|
4155
|
-
className:
|
|
4792
|
+
className: cn35(
|
|
4156
4793
|
"py-8 text-center text-sm text-muted-foreground",
|
|
4157
4794
|
className
|
|
4158
4795
|
),
|
|
@@ -4210,7 +4847,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4210
4847
|
treeRef.current?.focus();
|
|
4211
4848
|
}
|
|
4212
4849
|
}));
|
|
4213
|
-
const resolved =
|
|
4850
|
+
const resolved = useMemo7(() => {
|
|
4214
4851
|
if (renderers) validateRendererNames(renderers);
|
|
4215
4852
|
return resolveColumns(schema, uiSchema);
|
|
4216
4853
|
}, [schema, uiSchema, renderers]);
|
|
@@ -4222,7 +4859,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4222
4859
|
onSelectionChange,
|
|
4223
4860
|
constrainSelectionToSiblings
|
|
4224
4861
|
});
|
|
4225
|
-
const defaultRenderNode =
|
|
4862
|
+
const defaultRenderNode = useMemo7(
|
|
4226
4863
|
() => buildCellRow(
|
|
4227
4864
|
resolved,
|
|
4228
4865
|
activeNodeIdRef,
|
|
@@ -4231,7 +4868,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4231
4868
|
),
|
|
4232
4869
|
[resolved, selection.effectiveOnNodeEdit, renderers]
|
|
4233
4870
|
);
|
|
4234
|
-
const renderNode =
|
|
4871
|
+
const renderNode = useMemo7(
|
|
4235
4872
|
() => resolveRenderNode(renderNodeOverride, defaultRenderNode),
|
|
4236
4873
|
[renderNodeOverride, defaultRenderNode]
|
|
4237
4874
|
);
|
|
@@ -4244,7 +4881,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4244
4881
|
className
|
|
4245
4882
|
});
|
|
4246
4883
|
if (statusView) return statusView;
|
|
4247
|
-
return /* @__PURE__ */
|
|
4884
|
+
return /* @__PURE__ */ jsx39("div", { className: cn35("rounded-lg border", className), children: /* @__PURE__ */ jsx39(
|
|
4248
4885
|
TreeView,
|
|
4249
4886
|
{
|
|
4250
4887
|
ref: treeRef,
|
|
@@ -4263,17 +4900,17 @@ function EntityTreeInner(props, ref) {
|
|
|
4263
4900
|
}
|
|
4264
4901
|
) });
|
|
4265
4902
|
}
|
|
4266
|
-
var EntityTree =
|
|
4903
|
+
var EntityTree = forwardRef22(EntityTreeInner);
|
|
4267
4904
|
|
|
4268
4905
|
// src/SearchInput/SearchInput.tsx
|
|
4269
|
-
import
|
|
4270
|
-
import { Search as Search2, X as X4, ChevronDown } from "lucide-react";
|
|
4271
|
-
import { cn as
|
|
4906
|
+
import React38, { useMemo as useMemo9, useRef as useRef9, useState as useState11, useEffect as useEffect12 } from "react";
|
|
4907
|
+
import { Search as Search2, X as X4, ChevronDown as ChevronDown2 } from "lucide-react";
|
|
4908
|
+
import { cn as cn37 } from "@petrarca/sonnet-core";
|
|
4272
4909
|
import { getFieldTitle as getFieldTitle2 } from "@petrarca/sonnet-core/schema";
|
|
4273
4910
|
import { isEmptyFilterExpr } from "@petrarca/sonnet-core/search";
|
|
4274
4911
|
|
|
4275
4912
|
// src/SearchInput/useSearchInput.ts
|
|
4276
|
-
import { useCallback as useCallback5, useEffect as
|
|
4913
|
+
import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef7, useState as useState9 } from "react";
|
|
4277
4914
|
import { collectTerms } from "@petrarca/sonnet-core/search";
|
|
4278
4915
|
|
|
4279
4916
|
// src/SearchInput/schemaAdapter.ts
|
|
@@ -4348,7 +4985,7 @@ function useSearchInput({
|
|
|
4348
4985
|
minChars = 0,
|
|
4349
4986
|
searchFields
|
|
4350
4987
|
}) {
|
|
4351
|
-
const allFacets =
|
|
4988
|
+
const allFacets = useMemo8(
|
|
4352
4989
|
() => schema ? buildFacetDescriptors(schema) : [],
|
|
4353
4990
|
[schema]
|
|
4354
4991
|
);
|
|
@@ -4357,23 +4994,23 @@ function useSearchInput({
|
|
|
4357
4994
|
const terms = collectTerms(value);
|
|
4358
4995
|
return terms.length === 1 && terms[0].key === "search" ? terms[0].value : "";
|
|
4359
4996
|
})() : "";
|
|
4360
|
-
const [inputValue, setInputValue] =
|
|
4361
|
-
const [pendingFacet, setPendingFacet] =
|
|
4997
|
+
const [inputValue, setInputValue] = useState9(initialInput);
|
|
4998
|
+
const [pendingFacet, setPendingFacet] = useState9(
|
|
4362
4999
|
null
|
|
4363
5000
|
);
|
|
4364
|
-
const [draftTerms, setDraftTerms] =
|
|
5001
|
+
const [draftTerms, setDraftTerms] = useState9(
|
|
4365
5002
|
() => isFaceted ? collectTerms(value) : []
|
|
4366
5003
|
);
|
|
4367
|
-
const valueTerms =
|
|
5004
|
+
const valueTerms = useMemo8(
|
|
4368
5005
|
() => !isFaceted ? collectTerms(value) : [],
|
|
4369
5006
|
[value, isFaceted]
|
|
4370
5007
|
);
|
|
4371
5008
|
const activeTerms = isFaceted ? draftTerms : valueTerms;
|
|
4372
|
-
const activeFieldKeys =
|
|
5009
|
+
const activeFieldKeys = useMemo8(
|
|
4373
5010
|
() => new Set(activeTerms.map((t) => t.key)),
|
|
4374
5011
|
[activeTerms]
|
|
4375
5012
|
);
|
|
4376
|
-
const filteredFacets =
|
|
5013
|
+
const filteredFacets = useMemo8(() => {
|
|
4377
5014
|
if (!isFaceted || pendingFacet || inputValue.endsWith(" ")) return [];
|
|
4378
5015
|
const available = allFacets.filter((f) => !activeFieldKeys.has(f.key));
|
|
4379
5016
|
if (!inputValue.trim()) return available;
|
|
@@ -4396,7 +5033,7 @@ function useSearchInput({
|
|
|
4396
5033
|
filteredFacetsRef.current = filteredFacets;
|
|
4397
5034
|
const minCharsRef = useRef7(minChars);
|
|
4398
5035
|
minCharsRef.current = minChars;
|
|
4399
|
-
|
|
5036
|
+
useEffect9(() => {
|
|
4400
5037
|
if (!isFaceted) return;
|
|
4401
5038
|
const terms = collectTerms(value);
|
|
4402
5039
|
if (terms.length === 0) {
|
|
@@ -4408,7 +5045,7 @@ function useSearchInput({
|
|
|
4408
5045
|
const searchFieldsRef = useRef7(searchFields);
|
|
4409
5046
|
searchFieldsRef.current = searchFields;
|
|
4410
5047
|
const isMountedRef = useRef7(false);
|
|
4411
|
-
|
|
5048
|
+
useEffect9(() => {
|
|
4412
5049
|
if (!isMountedRef.current) {
|
|
4413
5050
|
isMountedRef.current = true;
|
|
4414
5051
|
return;
|
|
@@ -4575,8 +5212,8 @@ function useSearchInput({
|
|
|
4575
5212
|
}
|
|
4576
5213
|
|
|
4577
5214
|
// src/SearchInput/widgets/TextSearchWidget.tsx
|
|
4578
|
-
import { useRef as useRef8, useEffect as
|
|
4579
|
-
import { jsx as
|
|
5215
|
+
import { useRef as useRef8, useEffect as useEffect10 } from "react";
|
|
5216
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
4580
5217
|
function TextSearchWidget({
|
|
4581
5218
|
value,
|
|
4582
5219
|
onChange,
|
|
@@ -4586,10 +5223,10 @@ function TextSearchWidget({
|
|
|
4586
5223
|
autoFocus
|
|
4587
5224
|
}) {
|
|
4588
5225
|
const inputRef = useRef8(null);
|
|
4589
|
-
|
|
5226
|
+
useEffect10(() => {
|
|
4590
5227
|
if (autoFocus) inputRef.current?.focus();
|
|
4591
5228
|
}, [autoFocus]);
|
|
4592
|
-
return /* @__PURE__ */
|
|
5229
|
+
return /* @__PURE__ */ jsx40(
|
|
4593
5230
|
Input,
|
|
4594
5231
|
{
|
|
4595
5232
|
ref: inputRef,
|
|
@@ -4615,9 +5252,9 @@ function TextSearchWidget({
|
|
|
4615
5252
|
}
|
|
4616
5253
|
|
|
4617
5254
|
// src/SearchInput/widgets/EnumSearchWidget.tsx
|
|
4618
|
-
import { useEffect as
|
|
4619
|
-
import { cn as
|
|
4620
|
-
import { jsx as
|
|
5255
|
+
import { useEffect as useEffect11, useState as useState10 } from "react";
|
|
5256
|
+
import { cn as cn36 } from "@petrarca/sonnet-core";
|
|
5257
|
+
import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4621
5258
|
function EnumSearchWidget({
|
|
4622
5259
|
property,
|
|
4623
5260
|
options: widgetOptions,
|
|
@@ -4626,9 +5263,9 @@ function EnumSearchWidget({
|
|
|
4626
5263
|
placeholder,
|
|
4627
5264
|
autoFocus
|
|
4628
5265
|
}) {
|
|
4629
|
-
const [open, setOpen] =
|
|
4630
|
-
const [search, setSearch] =
|
|
4631
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
5266
|
+
const [open, setOpen] = useState10(false);
|
|
5267
|
+
const [search, setSearch] = useState10("");
|
|
5268
|
+
const [highlightedIndex, setHighlightedIndex] = useState10(0);
|
|
4632
5269
|
const enumValues = property.enum ?? [];
|
|
4633
5270
|
const enumNames = widgetOptions.enumNames ?? {};
|
|
4634
5271
|
const items = enumValues.map((val) => ({
|
|
@@ -4638,10 +5275,10 @@ function EnumSearchWidget({
|
|
|
4638
5275
|
const filtered = search ? items.filter(
|
|
4639
5276
|
(item) => item.label.toLowerCase().includes(search.toLowerCase())
|
|
4640
5277
|
) : items;
|
|
4641
|
-
|
|
5278
|
+
useEffect11(() => {
|
|
4642
5279
|
setHighlightedIndex(0);
|
|
4643
5280
|
}, [filtered.length, search]);
|
|
4644
|
-
|
|
5281
|
+
useEffect11(() => {
|
|
4645
5282
|
if (autoFocus) {
|
|
4646
5283
|
requestAnimationFrame(() => setOpen(true));
|
|
4647
5284
|
}
|
|
@@ -4681,8 +5318,8 @@ function EnumSearchWidget({
|
|
|
4681
5318
|
return;
|
|
4682
5319
|
}
|
|
4683
5320
|
}
|
|
4684
|
-
return /* @__PURE__ */
|
|
4685
|
-
/* @__PURE__ */
|
|
5321
|
+
return /* @__PURE__ */ jsxs19(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
5322
|
+
/* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
|
|
4686
5323
|
"button",
|
|
4687
5324
|
{
|
|
4688
5325
|
type: "button",
|
|
@@ -4691,14 +5328,14 @@ function EnumSearchWidget({
|
|
|
4691
5328
|
children: placeholder ?? "Select..."
|
|
4692
5329
|
}
|
|
4693
5330
|
) }),
|
|
4694
|
-
/* @__PURE__ */
|
|
5331
|
+
/* @__PURE__ */ jsxs19(
|
|
4695
5332
|
PopoverContent,
|
|
4696
5333
|
{
|
|
4697
5334
|
className: "w-48 p-1",
|
|
4698
5335
|
align: "start",
|
|
4699
5336
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
4700
5337
|
children: [
|
|
4701
|
-
/* @__PURE__ */
|
|
5338
|
+
/* @__PURE__ */ jsx41(
|
|
4702
5339
|
"input",
|
|
4703
5340
|
{
|
|
4704
5341
|
autoFocus: true,
|
|
@@ -4709,13 +5346,13 @@ function EnumSearchWidget({
|
|
|
4709
5346
|
className: "w-full px-2 py-1.5 text-sm bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground"
|
|
4710
5347
|
}
|
|
4711
5348
|
),
|
|
4712
|
-
/* @__PURE__ */
|
|
4713
|
-
filtered.length === 0 && /* @__PURE__ */
|
|
4714
|
-
filtered.map((item, i) => /* @__PURE__ */
|
|
5349
|
+
/* @__PURE__ */ jsxs19("div", { children: [
|
|
5350
|
+
filtered.length === 0 && /* @__PURE__ */ jsx41("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No matches" }),
|
|
5351
|
+
filtered.map((item, i) => /* @__PURE__ */ jsx41(
|
|
4715
5352
|
"button",
|
|
4716
5353
|
{
|
|
4717
5354
|
type: "button",
|
|
4718
|
-
className:
|
|
5355
|
+
className: cn36(
|
|
4719
5356
|
"w-full text-left px-2 py-1.5 text-sm rounded transition-colors",
|
|
4720
5357
|
i === highlightedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
|
|
4721
5358
|
),
|
|
@@ -4754,7 +5391,7 @@ var DEFAULT_SEARCH_WIDGETS = {
|
|
|
4754
5391
|
};
|
|
4755
5392
|
|
|
4756
5393
|
// src/SearchInput/SearchInput.tsx
|
|
4757
|
-
import { Fragment as
|
|
5394
|
+
import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
4758
5395
|
function resolveSearchDefaults(props) {
|
|
4759
5396
|
return {
|
|
4760
5397
|
mode: props.mode ?? "explicit",
|
|
@@ -4774,8 +5411,8 @@ function FacetPicker({
|
|
|
4774
5411
|
acceptFacet,
|
|
4775
5412
|
inputRef
|
|
4776
5413
|
}) {
|
|
4777
|
-
return /* @__PURE__ */
|
|
4778
|
-
/* @__PURE__ */
|
|
5414
|
+
return /* @__PURE__ */ jsxs20(Popover, { open: pickerVisible, onOpenChange: setPickerOpen, modal: false, children: [
|
|
5415
|
+
/* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
|
|
4779
5416
|
"button",
|
|
4780
5417
|
{
|
|
4781
5418
|
type: "button",
|
|
@@ -4786,21 +5423,21 @@ function FacetPicker({
|
|
|
4786
5423
|
setPickerOpen((o) => !o);
|
|
4787
5424
|
inputRef.current?.focus();
|
|
4788
5425
|
},
|
|
4789
|
-
children: /* @__PURE__ */
|
|
5426
|
+
children: /* @__PURE__ */ jsx42(ChevronDown2, { className: "h-3 w-3" })
|
|
4790
5427
|
}
|
|
4791
5428
|
) }),
|
|
4792
|
-
/* @__PURE__ */
|
|
5429
|
+
/* @__PURE__ */ jsx42(
|
|
4793
5430
|
PopoverContent,
|
|
4794
5431
|
{
|
|
4795
|
-
className:
|
|
5432
|
+
className: cn37("w-44 p-1", !hasFacetsToShow && "hidden"),
|
|
4796
5433
|
align: "start",
|
|
4797
5434
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
4798
5435
|
onFocusOutside: (e) => e.preventDefault(),
|
|
4799
|
-
children: filteredFacets.map((facet, i) => /* @__PURE__ */
|
|
5436
|
+
children: filteredFacets.map((facet, i) => /* @__PURE__ */ jsx42(
|
|
4800
5437
|
"button",
|
|
4801
5438
|
{
|
|
4802
5439
|
type: "button",
|
|
4803
|
-
className:
|
|
5440
|
+
className: cn37(
|
|
4804
5441
|
"w-full text-left px-2 py-1.5 text-sm rounded transition-colors",
|
|
4805
5442
|
i === highlightedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
|
|
4806
5443
|
),
|
|
@@ -4834,7 +5471,7 @@ function ValueEntry({
|
|
|
4834
5471
|
onInputFocus
|
|
4835
5472
|
}) {
|
|
4836
5473
|
if (pendingFacet && PendingWidget) {
|
|
4837
|
-
return /* @__PURE__ */
|
|
5474
|
+
return /* @__PURE__ */ jsx42(
|
|
4838
5475
|
PendingWidget,
|
|
4839
5476
|
{
|
|
4840
5477
|
property: pendingFacet.property,
|
|
@@ -4856,7 +5493,7 @@ function ValueEntry({
|
|
|
4856
5493
|
}
|
|
4857
5494
|
);
|
|
4858
5495
|
}
|
|
4859
|
-
return /* @__PURE__ */
|
|
5496
|
+
return /* @__PURE__ */ jsx42(
|
|
4860
5497
|
Input,
|
|
4861
5498
|
{
|
|
4862
5499
|
ref: inputRef,
|
|
@@ -4925,10 +5562,10 @@ function ActiveChips({
|
|
|
4925
5562
|
schema,
|
|
4926
5563
|
onRemove
|
|
4927
5564
|
}) {
|
|
4928
|
-
return /* @__PURE__ */
|
|
5565
|
+
return /* @__PURE__ */ jsx42(Fragment4, { children: terms.map((term, i) => {
|
|
4929
5566
|
const property = schema?.properties?.[term.key];
|
|
4930
5567
|
const label = property ? getFieldTitle2(term.key, property) : term.key;
|
|
4931
|
-
return /* @__PURE__ */
|
|
5568
|
+
return /* @__PURE__ */ jsx42(
|
|
4932
5569
|
FilterChip,
|
|
4933
5570
|
{
|
|
4934
5571
|
label: `${label}: ${term.value}`,
|
|
@@ -4952,8 +5589,8 @@ function SearchActions({
|
|
|
4952
5589
|
onClear,
|
|
4953
5590
|
onCommit
|
|
4954
5591
|
}) {
|
|
4955
|
-
return /* @__PURE__ */
|
|
4956
|
-
!isEmpty && /* @__PURE__ */
|
|
5592
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
5593
|
+
!isEmpty && /* @__PURE__ */ jsx42(
|
|
4957
5594
|
"button",
|
|
4958
5595
|
{
|
|
4959
5596
|
type: "button",
|
|
@@ -4963,10 +5600,10 @@ function SearchActions({
|
|
|
4963
5600
|
},
|
|
4964
5601
|
className: "text-muted-foreground hover:text-foreground transition-colors shrink-0",
|
|
4965
5602
|
"aria-label": "Clear search",
|
|
4966
|
-
children: /* @__PURE__ */
|
|
5603
|
+
children: /* @__PURE__ */ jsx42(X4, { className: "h-4 w-4" })
|
|
4967
5604
|
}
|
|
4968
5605
|
),
|
|
4969
|
-
showSearchButton && mode === "explicit" && /* @__PURE__ */
|
|
5606
|
+
showSearchButton && mode === "explicit" && /* @__PURE__ */ jsx42(
|
|
4970
5607
|
Button,
|
|
4971
5608
|
{
|
|
4972
5609
|
type: "button",
|
|
@@ -4998,10 +5635,10 @@ function SearchInput(props) {
|
|
|
4998
5635
|
const { mode, debounceMs, minChars, showSearchButton, disabled } = resolveSearchDefaults(props);
|
|
4999
5636
|
const inputRef = useRef9(null);
|
|
5000
5637
|
const containerRef = useRef9(null);
|
|
5001
|
-
const [pickerOpen, setPickerOpen] =
|
|
5002
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
5003
|
-
const [pickerNavigated, setPickerNavigated] =
|
|
5004
|
-
|
|
5638
|
+
const [pickerOpen, setPickerOpen] = useState11(false);
|
|
5639
|
+
const [highlightedIndex, setHighlightedIndex] = useState11(-1);
|
|
5640
|
+
const [pickerNavigated, setPickerNavigated] = useState11(false);
|
|
5641
|
+
useEffect12(() => {
|
|
5005
5642
|
if (!pickerOpen) return;
|
|
5006
5643
|
function handleMouseDown(e) {
|
|
5007
5644
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
@@ -5011,7 +5648,7 @@ function SearchInput(props) {
|
|
|
5011
5648
|
document.addEventListener("mousedown", handleMouseDown);
|
|
5012
5649
|
return () => document.removeEventListener("mousedown", handleMouseDown);
|
|
5013
5650
|
}, [pickerOpen]);
|
|
5014
|
-
const widgetRegistry =
|
|
5651
|
+
const widgetRegistry = useMemo9(
|
|
5015
5652
|
() => mergeWidgetRegistry(customWidgets),
|
|
5016
5653
|
[customWidgets]
|
|
5017
5654
|
);
|
|
@@ -5039,7 +5676,7 @@ function SearchInput(props) {
|
|
|
5039
5676
|
searchFields
|
|
5040
5677
|
});
|
|
5041
5678
|
const isEmpty = isEmptyFilterExpr(value) && inputValue === "";
|
|
5042
|
-
|
|
5679
|
+
useEffect12(() => {
|
|
5043
5680
|
setHighlightedIndex(-1);
|
|
5044
5681
|
}, [filteredFacets, pickerOpen]);
|
|
5045
5682
|
const resolvedPlaceholder = resolvePlaceholder(
|
|
@@ -5051,7 +5688,7 @@ function SearchInput(props) {
|
|
|
5051
5688
|
const showFacetControls = isFaceted && !pendingFacet;
|
|
5052
5689
|
const pickerVisible = showFacetControls && pickerOpen;
|
|
5053
5690
|
const hasFacetsToShow = pickerVisible && filteredFacets.length > 0;
|
|
5054
|
-
const acceptFacet =
|
|
5691
|
+
const acceptFacet = React38.useCallback(
|
|
5055
5692
|
(facet) => {
|
|
5056
5693
|
selectFacet(facet);
|
|
5057
5694
|
setPickerOpen(false);
|
|
@@ -5075,11 +5712,11 @@ function SearchInput(props) {
|
|
|
5075
5712
|
acceptFacet,
|
|
5076
5713
|
handleKeyDown
|
|
5077
5714
|
};
|
|
5078
|
-
return /* @__PURE__ */
|
|
5715
|
+
return /* @__PURE__ */ jsxs20(
|
|
5079
5716
|
"div",
|
|
5080
5717
|
{
|
|
5081
5718
|
ref: containerRef,
|
|
5082
|
-
className:
|
|
5719
|
+
className: cn37(
|
|
5083
5720
|
"flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1.5 text-sm min-h-9",
|
|
5084
5721
|
disabled ? "opacity-50 cursor-not-allowed" : "cursor-text",
|
|
5085
5722
|
className
|
|
@@ -5092,8 +5729,8 @@ function SearchInput(props) {
|
|
|
5092
5729
|
}
|
|
5093
5730
|
},
|
|
5094
5731
|
children: [
|
|
5095
|
-
/* @__PURE__ */
|
|
5096
|
-
isFaceted && /* @__PURE__ */
|
|
5732
|
+
/* @__PURE__ */ jsx42(Search2, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
|
|
5733
|
+
isFaceted && /* @__PURE__ */ jsx42(
|
|
5097
5734
|
ActiveChips,
|
|
5098
5735
|
{
|
|
5099
5736
|
terms: activeTerms,
|
|
@@ -5101,12 +5738,12 @@ function SearchInput(props) {
|
|
|
5101
5738
|
onRemove: handleRemoveTerm
|
|
5102
5739
|
}
|
|
5103
5740
|
),
|
|
5104
|
-
pendingFacet && /* @__PURE__ */
|
|
5741
|
+
pendingFacet && /* @__PURE__ */ jsxs20("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground", children: [
|
|
5105
5742
|
pendingFacet.label,
|
|
5106
5743
|
":"
|
|
5107
5744
|
] }),
|
|
5108
|
-
/* @__PURE__ */
|
|
5109
|
-
showFacetControls && /* @__PURE__ */
|
|
5745
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 flex-1 min-w-[120px]", children: [
|
|
5746
|
+
showFacetControls && /* @__PURE__ */ jsx42(
|
|
5110
5747
|
FacetPicker,
|
|
5111
5748
|
{
|
|
5112
5749
|
pickerVisible,
|
|
@@ -5119,7 +5756,7 @@ function SearchInput(props) {
|
|
|
5119
5756
|
inputRef
|
|
5120
5757
|
}
|
|
5121
5758
|
),
|
|
5122
|
-
/* @__PURE__ */
|
|
5759
|
+
/* @__PURE__ */ jsx42(
|
|
5123
5760
|
ValueEntry,
|
|
5124
5761
|
{
|
|
5125
5762
|
pendingFacet,
|
|
@@ -5143,7 +5780,7 @@ function SearchInput(props) {
|
|
|
5143
5780
|
}
|
|
5144
5781
|
)
|
|
5145
5782
|
] }),
|
|
5146
|
-
/* @__PURE__ */
|
|
5783
|
+
/* @__PURE__ */ jsx42(
|
|
5147
5784
|
SearchActions,
|
|
5148
5785
|
{
|
|
5149
5786
|
isEmpty,
|
|
@@ -5158,14 +5795,14 @@ function SearchInput(props) {
|
|
|
5158
5795
|
);
|
|
5159
5796
|
}
|
|
5160
5797
|
function FilterChip({ label, onRemove }) {
|
|
5161
|
-
return /* @__PURE__ */
|
|
5798
|
+
return /* @__PURE__ */ jsxs20(
|
|
5162
5799
|
Badge,
|
|
5163
5800
|
{
|
|
5164
5801
|
variant: "secondary",
|
|
5165
5802
|
className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full",
|
|
5166
5803
|
children: [
|
|
5167
5804
|
label,
|
|
5168
|
-
/* @__PURE__ */
|
|
5805
|
+
/* @__PURE__ */ jsx42(
|
|
5169
5806
|
"button",
|
|
5170
5807
|
{
|
|
5171
5808
|
type: "button",
|
|
@@ -5175,7 +5812,7 @@ function FilterChip({ label, onRemove }) {
|
|
|
5175
5812
|
},
|
|
5176
5813
|
className: "ml-0.5 hover:text-destructive transition-colors",
|
|
5177
5814
|
"aria-label": `Remove filter ${label}`,
|
|
5178
|
-
children: /* @__PURE__ */
|
|
5815
|
+
children: /* @__PURE__ */ jsx42(X4, { className: "h-3 w-3" })
|
|
5179
5816
|
}
|
|
5180
5817
|
)
|
|
5181
5818
|
]
|
|
@@ -5185,9 +5822,9 @@ function FilterChip({ label, onRemove }) {
|
|
|
5185
5822
|
|
|
5186
5823
|
// src/Clipboard/ClipboardButton.tsx
|
|
5187
5824
|
import { Copy } from "lucide-react";
|
|
5188
|
-
import { jsx as
|
|
5825
|
+
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
5189
5826
|
function ClipboardButton({ hasItems, onClick }) {
|
|
5190
|
-
return /* @__PURE__ */
|
|
5827
|
+
return /* @__PURE__ */ jsx43(
|
|
5191
5828
|
Button,
|
|
5192
5829
|
{
|
|
5193
5830
|
variant: "ghost",
|
|
@@ -5198,7 +5835,7 @@ function ClipboardButton({ hasItems, onClick }) {
|
|
|
5198
5835
|
opacity: hasItems ? 1 : 0.4,
|
|
5199
5836
|
cursor: hasItems ? "pointer" : "not-allowed"
|
|
5200
5837
|
},
|
|
5201
|
-
children: /* @__PURE__ */
|
|
5838
|
+
children: /* @__PURE__ */ jsx43(Copy, { size: 16 })
|
|
5202
5839
|
}
|
|
5203
5840
|
);
|
|
5204
5841
|
}
|
|
@@ -5206,13 +5843,13 @@ var ClipboardButton_default = ClipboardButton;
|
|
|
5206
5843
|
|
|
5207
5844
|
// src/Clipboard/ClipboardItem.tsx
|
|
5208
5845
|
import { X as X5, Plus } from "lucide-react";
|
|
5209
|
-
import { jsx as
|
|
5846
|
+
import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
5210
5847
|
function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
5211
5848
|
const handleAddClick = (e) => {
|
|
5212
5849
|
const keepInClipboard = e.shiftKey;
|
|
5213
5850
|
onAddItem(item, keepInClipboard);
|
|
5214
5851
|
};
|
|
5215
|
-
return /* @__PURE__ */
|
|
5852
|
+
return /* @__PURE__ */ jsx44(
|
|
5216
5853
|
"div",
|
|
5217
5854
|
{
|
|
5218
5855
|
className: "p-3 rounded mb-2",
|
|
@@ -5220,17 +5857,17 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
|
5220
5857
|
borderLeft: `4px solid ${item.color}`,
|
|
5221
5858
|
backgroundColor: "#f8f9fa"
|
|
5222
5859
|
},
|
|
5223
|
-
children: /* @__PURE__ */
|
|
5224
|
-
/* @__PURE__ */
|
|
5225
|
-
/* @__PURE__ */
|
|
5226
|
-
/* @__PURE__ */
|
|
5227
|
-
/* @__PURE__ */
|
|
5860
|
+
children: /* @__PURE__ */ jsxs21(SimpleGroup, { justify: "space-between", wrap: "nowrap", align: "flex-start", children: [
|
|
5861
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
|
|
5862
|
+
/* @__PURE__ */ jsx44("p", { className: "text-sm font-semibold truncate", children: item.label }),
|
|
5863
|
+
/* @__PURE__ */ jsx44("p", { className: "text-xs text-muted-foreground truncate", children: item.displayName }),
|
|
5864
|
+
/* @__PURE__ */ jsxs21("p", { className: "text-xs text-muted-foreground font-mono", children: [
|
|
5228
5865
|
"#",
|
|
5229
5866
|
item.entityId
|
|
5230
5867
|
] })
|
|
5231
5868
|
] }),
|
|
5232
|
-
/* @__PURE__ */
|
|
5233
|
-
/* @__PURE__ */
|
|
5869
|
+
/* @__PURE__ */ jsxs21(SimpleGroup, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
|
|
5870
|
+
/* @__PURE__ */ jsxs21(
|
|
5234
5871
|
Button,
|
|
5235
5872
|
{
|
|
5236
5873
|
size: "sm",
|
|
@@ -5238,19 +5875,19 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
|
5238
5875
|
onClick: handleAddClick,
|
|
5239
5876
|
title: "Click to add and remove from clipboard, Shift+Click to keep in clipboard",
|
|
5240
5877
|
children: [
|
|
5241
|
-
/* @__PURE__ */
|
|
5878
|
+
/* @__PURE__ */ jsx44(Plus, { size: 16 }),
|
|
5242
5879
|
"Add"
|
|
5243
5880
|
]
|
|
5244
5881
|
}
|
|
5245
5882
|
),
|
|
5246
|
-
/* @__PURE__ */
|
|
5883
|
+
/* @__PURE__ */ jsx44(
|
|
5247
5884
|
Button,
|
|
5248
5885
|
{
|
|
5249
5886
|
size: "sm",
|
|
5250
5887
|
variant: "ghost",
|
|
5251
5888
|
onClick: () => onRemove(item.id),
|
|
5252
5889
|
title: "Remove from clipboard",
|
|
5253
|
-
children: /* @__PURE__ */
|
|
5890
|
+
children: /* @__PURE__ */ jsx44(X5, { size: 16 })
|
|
5254
5891
|
}
|
|
5255
5892
|
)
|
|
5256
5893
|
] })
|
|
@@ -5348,16 +5985,16 @@ var useClipboard = create()(
|
|
|
5348
5985
|
var clipboardStore_default = useClipboard;
|
|
5349
5986
|
|
|
5350
5987
|
// src/Clipboard/ClipboardMenu.tsx
|
|
5351
|
-
import { jsx as
|
|
5988
|
+
import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
5352
5989
|
function ClipboardMenu({ onAddItem }) {
|
|
5353
5990
|
const { items, removeItem, clear } = clipboardStore_default();
|
|
5354
5991
|
if (items.length === 0) {
|
|
5355
|
-
return /* @__PURE__ */
|
|
5356
|
-
/* @__PURE__ */
|
|
5357
|
-
/* @__PURE__ */
|
|
5992
|
+
return /* @__PURE__ */ jsxs22("div", { style: { padding: "16px", textAlign: "center", width: "300px" }, children: [
|
|
5993
|
+
/* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground", children: "No items in clipboard" }),
|
|
5994
|
+
/* @__PURE__ */ jsx45("p", { className: "text-xs text-muted-foreground mt-1", children: 'Right-click a node and select "Copy"' })
|
|
5358
5995
|
] });
|
|
5359
5996
|
}
|
|
5360
|
-
return /* @__PURE__ */
|
|
5997
|
+
return /* @__PURE__ */ jsxs22(
|
|
5361
5998
|
"div",
|
|
5362
5999
|
{
|
|
5363
6000
|
style: {
|
|
@@ -5368,7 +6005,7 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
5368
6005
|
maxHeight: "500px"
|
|
5369
6006
|
},
|
|
5370
6007
|
children: [
|
|
5371
|
-
/* @__PURE__ */
|
|
6008
|
+
/* @__PURE__ */ jsx45(ScrollArea, { className: "flex-1 p-3 min-h-0", children: /* @__PURE__ */ jsx45(SimpleStack, { gap: 0, children: items.map((item) => /* @__PURE__ */ jsx45(
|
|
5372
6009
|
ClipboardItem_default,
|
|
5373
6010
|
{
|
|
5374
6011
|
item,
|
|
@@ -5377,8 +6014,8 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
5377
6014
|
},
|
|
5378
6015
|
item.id
|
|
5379
6016
|
)) }) }),
|
|
5380
|
-
/* @__PURE__ */
|
|
5381
|
-
/* @__PURE__ */
|
|
6017
|
+
/* @__PURE__ */ jsx45(Separator3, {}),
|
|
6018
|
+
/* @__PURE__ */ jsx45("div", { style: { padding: "8px 12px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs22(
|
|
5382
6019
|
Button,
|
|
5383
6020
|
{
|
|
5384
6021
|
className: "w-full",
|
|
@@ -5386,7 +6023,7 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
5386
6023
|
size: "sm",
|
|
5387
6024
|
onClick: clear,
|
|
5388
6025
|
children: [
|
|
5389
|
-
/* @__PURE__ */
|
|
6026
|
+
/* @__PURE__ */ jsx45(Trash2, { size: 16 }),
|
|
5390
6027
|
"Clear All (",
|
|
5391
6028
|
items.length,
|
|
5392
6029
|
")"
|
|
@@ -5408,6 +6045,7 @@ export {
|
|
|
5408
6045
|
Badge,
|
|
5409
6046
|
Button,
|
|
5410
6047
|
CELL_RENDERERS,
|
|
6048
|
+
Calendar,
|
|
5411
6049
|
Card,
|
|
5412
6050
|
CardContent,
|
|
5413
6051
|
CardDescription,
|
|
@@ -5430,6 +6068,8 @@ export {
|
|
|
5430
6068
|
CommandList,
|
|
5431
6069
|
CommandSeparator,
|
|
5432
6070
|
CommandShortcut,
|
|
6071
|
+
DateInput,
|
|
6072
|
+
DateTimeInput,
|
|
5433
6073
|
Dialog,
|
|
5434
6074
|
DialogClose,
|
|
5435
6075
|
DialogContent,
|
|
@@ -5460,13 +6100,14 @@ export {
|
|
|
5460
6100
|
EntityTree,
|
|
5461
6101
|
IconButton,
|
|
5462
6102
|
Input,
|
|
6103
|
+
InputError,
|
|
5463
6104
|
InputGroup,
|
|
5464
6105
|
InputGroupAddon,
|
|
5465
6106
|
InputGroupButton,
|
|
5466
6107
|
InputGroupInput,
|
|
5467
6108
|
InputGroupText,
|
|
5468
6109
|
InputGroupTextarea,
|
|
5469
|
-
|
|
6110
|
+
Label3 as Label,
|
|
5470
6111
|
Popover,
|
|
5471
6112
|
PopoverContent,
|
|
5472
6113
|
PopoverTrigger,
|
|
@@ -5476,7 +6117,17 @@ export {
|
|
|
5476
6117
|
ScrollArea,
|
|
5477
6118
|
ScrollBar,
|
|
5478
6119
|
SearchInput,
|
|
5479
|
-
|
|
6120
|
+
Select,
|
|
6121
|
+
SelectContent,
|
|
6122
|
+
SelectGroup,
|
|
6123
|
+
SelectItem,
|
|
6124
|
+
SelectLabel,
|
|
6125
|
+
SelectScrollDownButton,
|
|
6126
|
+
SelectScrollUpButton,
|
|
6127
|
+
SelectSeparator,
|
|
6128
|
+
SelectTrigger,
|
|
6129
|
+
SelectValue,
|
|
6130
|
+
Separator3 as Separator,
|
|
5480
6131
|
Sheet,
|
|
5481
6132
|
SheetBody,
|
|
5482
6133
|
SheetClose,
|
|
@@ -5509,6 +6160,7 @@ export {
|
|
|
5509
6160
|
TabsSeparator,
|
|
5510
6161
|
TabsTrigger,
|
|
5511
6162
|
Textarea,
|
|
6163
|
+
TimeInput,
|
|
5512
6164
|
Tooltip,
|
|
5513
6165
|
TooltipContent,
|
|
5514
6166
|
TooltipProvider,
|