@petrarca/sonnet-ui 0.5.0 → 0.7.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/README.md +64 -65
- package/dist/index.d.ts +165 -2
- package/dist/index.js +1198 -510
- package/dist/index.js.map +1 -1
- package/dist/json-editor/index.d.ts +4 -2
- package/dist/json-editor/index.js +32 -17
- package/dist/json-editor/index.js.map +1 -1
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -693,7 +693,10 @@ var Input = React11.forwardRef(
|
|
|
693
693
|
{
|
|
694
694
|
type,
|
|
695
695
|
className: cn12(
|
|
696
|
-
|
|
696
|
+
// Focus: a quiet 1px halo plus a tinted border. Chrome matches
|
|
697
|
+
// :focus-visible on text fields even for mouse clicks, so a heavy
|
|
698
|
+
// ring would fire on every click into a field.
|
|
699
|
+
"flex h-10 w-full rounded-md border border-input bg-background transition-[color,box-shadow] px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
697
700
|
className
|
|
698
701
|
),
|
|
699
702
|
ref,
|
|
@@ -703,21 +706,681 @@ var Input = React11.forwardRef(
|
|
|
703
706
|
}
|
|
704
707
|
);
|
|
705
708
|
Input.displayName = "Input";
|
|
709
|
+
function InputError({
|
|
710
|
+
error
|
|
711
|
+
}) {
|
|
712
|
+
if (!error) return null;
|
|
713
|
+
return /* @__PURE__ */ jsx13("p", { className: "mt-1 text-sm text-destructive", children: error });
|
|
714
|
+
}
|
|
706
715
|
|
|
707
|
-
// src/
|
|
708
|
-
import
|
|
709
|
-
import {
|
|
716
|
+
// src/DateInput/DateInput.tsx
|
|
717
|
+
import * as React14 from "react";
|
|
718
|
+
import { Calendar as CalendarIcon } from "lucide-react";
|
|
719
|
+
import {
|
|
720
|
+
cn as cn15,
|
|
721
|
+
compileDateFormat,
|
|
722
|
+
parseDate,
|
|
723
|
+
formatDateInput,
|
|
724
|
+
formatIsoDate,
|
|
725
|
+
parseIsoDate,
|
|
726
|
+
getLocaleDateFormat
|
|
727
|
+
} from "@petrarca/sonnet-core";
|
|
728
|
+
import { useLocale as useLocale2 } from "@petrarca/sonnet-core/config";
|
|
710
729
|
|
|
711
|
-
// src/
|
|
730
|
+
// src/popover.tsx
|
|
712
731
|
import * as React12 from "react";
|
|
732
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
713
733
|
import { cn as cn13 } from "@petrarca/sonnet-core";
|
|
714
734
|
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
715
|
-
var
|
|
716
|
-
|
|
735
|
+
var Popover = PopoverPrimitive.Root;
|
|
736
|
+
var PopoverTrigger = PopoverPrimitive.Trigger;
|
|
737
|
+
var PopoverContent = React12.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx14(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx14(
|
|
738
|
+
PopoverPrimitive.Content,
|
|
739
|
+
{
|
|
740
|
+
ref,
|
|
741
|
+
align,
|
|
742
|
+
sideOffset,
|
|
743
|
+
className: cn13(
|
|
744
|
+
"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]",
|
|
745
|
+
className
|
|
746
|
+
),
|
|
747
|
+
...props
|
|
748
|
+
}
|
|
749
|
+
) }));
|
|
750
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
751
|
+
|
|
752
|
+
// src/DateInput/Calendar.tsx
|
|
753
|
+
import * as React13 from "react";
|
|
754
|
+
import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
|
|
755
|
+
import {
|
|
756
|
+
cn as cn14,
|
|
757
|
+
getWeekdayLabels,
|
|
758
|
+
getFirstDayOfWeek
|
|
759
|
+
} from "@petrarca/sonnet-core";
|
|
760
|
+
import { useLocale } from "@petrarca/sonnet-core/config";
|
|
761
|
+
import { Fragment, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
762
|
+
var TERMINAL_VIEW = {
|
|
763
|
+
year: "years",
|
|
764
|
+
month: "months",
|
|
765
|
+
day: "days"
|
|
766
|
+
};
|
|
767
|
+
function sameDay(a, b) {
|
|
768
|
+
return a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
|
|
769
|
+
}
|
|
770
|
+
function monthName(month, locale) {
|
|
771
|
+
return new Date(2e3, month, 1).toLocaleDateString(locale, { month: "long" });
|
|
772
|
+
}
|
|
773
|
+
function decadeStart(year) {
|
|
774
|
+
return Math.floor(year / 10) * 10;
|
|
775
|
+
}
|
|
776
|
+
function buildDayCells(viewDate, firstDay) {
|
|
777
|
+
const year = viewDate.getFullYear();
|
|
778
|
+
const month = viewDate.getMonth();
|
|
779
|
+
const weekday = new Date(year, month, 1).getDay();
|
|
780
|
+
const leadingBlanks = (weekday - firstDay + 7) % 7;
|
|
781
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
782
|
+
const cells = [];
|
|
783
|
+
for (let i = 0; i < leadingBlanks; i++) cells.push(null);
|
|
784
|
+
for (let day = 1; day <= daysInMonth; day++)
|
|
785
|
+
cells.push(new Date(year, month, day));
|
|
786
|
+
return cells;
|
|
787
|
+
}
|
|
788
|
+
function DaysView({
|
|
789
|
+
viewDate,
|
|
790
|
+
value,
|
|
791
|
+
onSelect,
|
|
792
|
+
locale
|
|
793
|
+
}) {
|
|
794
|
+
const firstDay = getFirstDayOfWeek(locale);
|
|
795
|
+
const cells = buildDayCells(viewDate, firstDay);
|
|
796
|
+
const weekdayLabels = getWeekdayLabels(locale);
|
|
797
|
+
const today = /* @__PURE__ */ new Date();
|
|
798
|
+
return /* @__PURE__ */ jsxs5(Fragment, { children: [
|
|
799
|
+
/* @__PURE__ */ jsx15("div", { className: "mb-1 grid grid-cols-7 gap-1", children: weekdayLabels.map((label) => /* @__PURE__ */ jsx15(
|
|
800
|
+
"div",
|
|
801
|
+
{
|
|
802
|
+
className: "text-center text-xs font-medium text-muted-foreground",
|
|
803
|
+
children: label
|
|
804
|
+
},
|
|
805
|
+
label
|
|
806
|
+
)) }),
|
|
807
|
+
/* @__PURE__ */ jsx15("div", { className: "grid grid-cols-7 gap-1", children: cells.map((date, index) => {
|
|
808
|
+
if (!date) return /* @__PURE__ */ jsx15("div", { className: "h-8 w-8" }, `blank-${index}`);
|
|
809
|
+
const isSelected = value ? sameDay(date, value) : false;
|
|
810
|
+
const isToday = sameDay(date, today);
|
|
811
|
+
return /* @__PURE__ */ jsx15(
|
|
812
|
+
"button",
|
|
813
|
+
{
|
|
814
|
+
type: "button",
|
|
815
|
+
onClick: () => onSelect(date),
|
|
816
|
+
className: cn14(
|
|
817
|
+
"h-8 w-8 rounded-full text-center text-sm",
|
|
818
|
+
isToday && !isSelected && "border border-primary",
|
|
819
|
+
isSelected ? "bg-primary text-primary-foreground" : "hover:bg-state-hover"
|
|
820
|
+
),
|
|
821
|
+
children: date.getDate()
|
|
822
|
+
},
|
|
823
|
+
date.toISOString()
|
|
824
|
+
);
|
|
825
|
+
}) })
|
|
826
|
+
] });
|
|
827
|
+
}
|
|
828
|
+
function MonthsView({
|
|
829
|
+
viewDate,
|
|
830
|
+
value,
|
|
831
|
+
onPick,
|
|
832
|
+
locale
|
|
833
|
+
}) {
|
|
834
|
+
const now = /* @__PURE__ */ new Date();
|
|
835
|
+
return /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 12 }, (_, month) => {
|
|
836
|
+
const isCurrent = month === now.getMonth() && viewDate.getFullYear() === now.getFullYear();
|
|
837
|
+
const isSelected = !!value && month === value.getMonth() && viewDate.getFullYear() === value.getFullYear();
|
|
838
|
+
return /* @__PURE__ */ jsx15(
|
|
839
|
+
"button",
|
|
840
|
+
{
|
|
841
|
+
type: "button",
|
|
842
|
+
onClick: () => onPick(month),
|
|
843
|
+
className: cn14(
|
|
844
|
+
"rounded py-2 text-center text-sm",
|
|
845
|
+
isCurrent && !isSelected && "border border-primary",
|
|
846
|
+
isSelected ? "bg-primary text-primary-foreground" : "hover:bg-state-hover"
|
|
847
|
+
),
|
|
848
|
+
children: monthName(month, locale)
|
|
849
|
+
},
|
|
850
|
+
month
|
|
851
|
+
);
|
|
852
|
+
}) });
|
|
853
|
+
}
|
|
854
|
+
function YearsView({
|
|
855
|
+
viewDate,
|
|
856
|
+
value,
|
|
857
|
+
onPick
|
|
858
|
+
}) {
|
|
859
|
+
const now = (/* @__PURE__ */ new Date()).getFullYear();
|
|
860
|
+
const start = decadeStart(viewDate.getFullYear());
|
|
861
|
+
return /* @__PURE__ */ jsx15("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 10 }, (_, i) => {
|
|
862
|
+
const year = start + i;
|
|
863
|
+
const isSelected = !!value && year === value.getFullYear();
|
|
864
|
+
return /* @__PURE__ */ jsx15(
|
|
865
|
+
"button",
|
|
866
|
+
{
|
|
867
|
+
type: "button",
|
|
868
|
+
onClick: () => onPick(year),
|
|
869
|
+
className: cn14(
|
|
870
|
+
"rounded py-2 text-center text-sm",
|
|
871
|
+
year === now && !isSelected && "border border-primary",
|
|
872
|
+
isSelected ? "bg-primary text-primary-foreground" : "hover:bg-state-hover"
|
|
873
|
+
),
|
|
874
|
+
children: year
|
|
875
|
+
},
|
|
876
|
+
year
|
|
877
|
+
);
|
|
878
|
+
}) });
|
|
879
|
+
}
|
|
880
|
+
function headerText(view, viewDate, locale) {
|
|
881
|
+
if (view === "months") return viewDate.getFullYear().toString();
|
|
882
|
+
if (view === "years") {
|
|
883
|
+
const start = decadeStart(viewDate.getFullYear());
|
|
884
|
+
return `${start} - ${start + 9}`;
|
|
885
|
+
}
|
|
886
|
+
return `${monthName(viewDate.getMonth(), locale)} ${viewDate.getFullYear()}`;
|
|
887
|
+
}
|
|
888
|
+
function shiftViewDate(view, viewDate, direction) {
|
|
889
|
+
if (view === "months") {
|
|
890
|
+
return new Date(viewDate.getFullYear() + direction, viewDate.getMonth(), 1);
|
|
891
|
+
}
|
|
892
|
+
if (view === "years") {
|
|
893
|
+
return new Date(decadeStart(viewDate.getFullYear()) + direction * 10, 0, 1);
|
|
894
|
+
}
|
|
895
|
+
return new Date(viewDate.getFullYear(), viewDate.getMonth() + direction, 1);
|
|
896
|
+
}
|
|
897
|
+
function Calendar({
|
|
898
|
+
value,
|
|
899
|
+
onSelect,
|
|
900
|
+
defaultViewDate,
|
|
901
|
+
precision = "day",
|
|
902
|
+
locale
|
|
903
|
+
}) {
|
|
904
|
+
const resolvedLocale = useLocale(locale);
|
|
905
|
+
const terminalView = TERMINAL_VIEW[precision];
|
|
906
|
+
const [view, setView] = React13.useState(terminalView);
|
|
907
|
+
const [viewDate, setViewDate] = React13.useState(
|
|
908
|
+
value ?? defaultViewDate ?? /* @__PURE__ */ new Date()
|
|
909
|
+
);
|
|
910
|
+
React13.useEffect(() => {
|
|
911
|
+
if (value) setViewDate(value);
|
|
912
|
+
}, [value]);
|
|
913
|
+
const handleMonthPick = (month) => {
|
|
914
|
+
const next = new Date(viewDate.getFullYear(), month, 1);
|
|
915
|
+
if (precision === "month") {
|
|
916
|
+
onSelect(next);
|
|
917
|
+
return;
|
|
918
|
+
}
|
|
919
|
+
setViewDate(next);
|
|
920
|
+
setView("days");
|
|
921
|
+
};
|
|
922
|
+
const handleYearPick = (year) => {
|
|
923
|
+
const next = new Date(year, viewDate.getMonth(), 1);
|
|
924
|
+
if (precision === "year") {
|
|
925
|
+
onSelect(next);
|
|
926
|
+
return;
|
|
927
|
+
}
|
|
928
|
+
setViewDate(next);
|
|
929
|
+
setView("months");
|
|
930
|
+
};
|
|
931
|
+
const canDrillUp = view !== "years";
|
|
932
|
+
const drillUp = () => setView(view === "days" ? "months" : "years");
|
|
933
|
+
return /* @__PURE__ */ jsxs5("div", { className: "w-64", children: [
|
|
934
|
+
/* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
935
|
+
/* @__PURE__ */ jsx15(
|
|
936
|
+
"button",
|
|
937
|
+
{
|
|
938
|
+
type: "button",
|
|
939
|
+
onClick: () => setViewDate(shiftViewDate(view, viewDate, -1)),
|
|
940
|
+
className: "rounded-full p-1 hover:bg-state-hover",
|
|
941
|
+
"aria-label": "Previous",
|
|
942
|
+
children: /* @__PURE__ */ jsx15(ChevronLeft, { size: 16 })
|
|
943
|
+
}
|
|
944
|
+
),
|
|
945
|
+
/* @__PURE__ */ jsx15(
|
|
946
|
+
"button",
|
|
947
|
+
{
|
|
948
|
+
type: "button",
|
|
949
|
+
onClick: canDrillUp ? drillUp : void 0,
|
|
950
|
+
disabled: !canDrillUp,
|
|
951
|
+
className: cn14(
|
|
952
|
+
"rounded px-2 py-1 font-medium",
|
|
953
|
+
canDrillUp && "hover:bg-state-hover"
|
|
954
|
+
),
|
|
955
|
+
children: headerText(view, viewDate, resolvedLocale)
|
|
956
|
+
}
|
|
957
|
+
),
|
|
958
|
+
/* @__PURE__ */ jsx15(
|
|
959
|
+
"button",
|
|
960
|
+
{
|
|
961
|
+
type: "button",
|
|
962
|
+
onClick: () => setViewDate(shiftViewDate(view, viewDate, 1)),
|
|
963
|
+
className: "rounded-full p-1 hover:bg-state-hover",
|
|
964
|
+
"aria-label": "Next",
|
|
965
|
+
children: /* @__PURE__ */ jsx15(ChevronRight2, { size: 16 })
|
|
966
|
+
}
|
|
967
|
+
)
|
|
968
|
+
] }),
|
|
969
|
+
view === "days" && /* @__PURE__ */ jsx15(
|
|
970
|
+
DaysView,
|
|
971
|
+
{
|
|
972
|
+
viewDate,
|
|
973
|
+
value,
|
|
974
|
+
onSelect,
|
|
975
|
+
locale: resolvedLocale
|
|
976
|
+
}
|
|
977
|
+
),
|
|
978
|
+
view === "months" && /* @__PURE__ */ jsx15(
|
|
979
|
+
MonthsView,
|
|
980
|
+
{
|
|
981
|
+
viewDate,
|
|
982
|
+
value,
|
|
983
|
+
onPick: handleMonthPick,
|
|
984
|
+
locale: resolvedLocale
|
|
985
|
+
}
|
|
986
|
+
),
|
|
987
|
+
view === "years" && /* @__PURE__ */ jsx15(YearsView, { viewDate, value, onPick: handleYearPick })
|
|
988
|
+
] });
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
// src/DateInput/DateInput.tsx
|
|
992
|
+
import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
993
|
+
function DateInput({
|
|
994
|
+
value,
|
|
995
|
+
onChange,
|
|
996
|
+
precision = "day",
|
|
997
|
+
locale,
|
|
998
|
+
id,
|
|
999
|
+
name,
|
|
1000
|
+
placeholder,
|
|
1001
|
+
required,
|
|
1002
|
+
disabled,
|
|
1003
|
+
error,
|
|
1004
|
+
className,
|
|
1005
|
+
onBlur
|
|
1006
|
+
}) {
|
|
1007
|
+
const resolvedLocale = useLocale2(locale);
|
|
1008
|
+
const [open, setOpen] = React14.useState(false);
|
|
1009
|
+
const [inputValue, setInputValue] = React14.useState("");
|
|
1010
|
+
const [parseError, setParseError] = React14.useState("");
|
|
1011
|
+
const fmt = React14.useMemo(
|
|
1012
|
+
() => compileDateFormat({
|
|
1013
|
+
format: getLocaleDateFormat(resolvedLocale, precision)
|
|
1014
|
+
}),
|
|
1015
|
+
[resolvedLocale, precision]
|
|
1016
|
+
);
|
|
1017
|
+
const selectedDate = React14.useMemo(() => parseIsoDate(value), [value]);
|
|
1018
|
+
React14.useEffect(() => {
|
|
1019
|
+
setInputValue(selectedDate ? formatDateInput(selectedDate, fmt) : "");
|
|
1020
|
+
setParseError("");
|
|
1021
|
+
}, [selectedDate, fmt]);
|
|
1022
|
+
const commit = (date) => {
|
|
1023
|
+
onChange(date ? formatIsoDate(date, precision) : "");
|
|
1024
|
+
};
|
|
1025
|
+
const handleBlur = () => {
|
|
1026
|
+
if (!inputValue.trim()) {
|
|
1027
|
+
setParseError("");
|
|
1028
|
+
commit(null);
|
|
1029
|
+
onBlur?.();
|
|
1030
|
+
return;
|
|
1031
|
+
}
|
|
1032
|
+
const result = parseDate(inputValue, fmt);
|
|
1033
|
+
if (result.date) {
|
|
1034
|
+
setInputValue(result.value);
|
|
1035
|
+
setParseError("");
|
|
1036
|
+
commit(result.date);
|
|
1037
|
+
} else {
|
|
1038
|
+
setParseError(result.error || "Invalid date");
|
|
1039
|
+
}
|
|
1040
|
+
onBlur?.();
|
|
1041
|
+
};
|
|
1042
|
+
const handleCalendarSelect = (date) => {
|
|
1043
|
+
setInputValue(formatDateInput(date, fmt));
|
|
1044
|
+
setParseError("");
|
|
1045
|
+
commit(date);
|
|
1046
|
+
setOpen(false);
|
|
1047
|
+
};
|
|
1048
|
+
const shownError = error || parseError;
|
|
1049
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn15("relative", className), children: [
|
|
1050
|
+
/* @__PURE__ */ jsxs6("div", { className: "relative", children: [
|
|
1051
|
+
/* @__PURE__ */ jsx16(
|
|
1052
|
+
Input,
|
|
1053
|
+
{
|
|
1054
|
+
id,
|
|
1055
|
+
name,
|
|
1056
|
+
type: "text",
|
|
1057
|
+
value: inputValue,
|
|
1058
|
+
onChange: (event) => {
|
|
1059
|
+
setInputValue(event.currentTarget.value);
|
|
1060
|
+
setParseError("");
|
|
1061
|
+
},
|
|
1062
|
+
onBlur: handleBlur,
|
|
1063
|
+
onKeyDown: (event) => {
|
|
1064
|
+
if (event.key === "Enter") {
|
|
1065
|
+
handleBlur();
|
|
1066
|
+
setOpen(false);
|
|
1067
|
+
} else if (event.key === "Escape") {
|
|
1068
|
+
setOpen(false);
|
|
1069
|
+
}
|
|
1070
|
+
},
|
|
1071
|
+
placeholder: placeholder ?? fmt.format,
|
|
1072
|
+
required,
|
|
1073
|
+
disabled,
|
|
1074
|
+
autoComplete: "off",
|
|
1075
|
+
"aria-invalid": shownError ? true : void 0,
|
|
1076
|
+
className: cn15("pr-10", shownError && "border-destructive")
|
|
1077
|
+
}
|
|
1078
|
+
),
|
|
1079
|
+
/* @__PURE__ */ jsxs6(Popover, { open, onOpenChange: setOpen, children: [
|
|
1080
|
+
/* @__PURE__ */ jsx16(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx16(
|
|
1081
|
+
"button",
|
|
1082
|
+
{
|
|
1083
|
+
type: "button",
|
|
1084
|
+
disabled,
|
|
1085
|
+
"aria-label": "Open calendar",
|
|
1086
|
+
className: "absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
|
1087
|
+
children: /* @__PURE__ */ jsx16(CalendarIcon, { size: 16 })
|
|
1088
|
+
}
|
|
1089
|
+
) }),
|
|
1090
|
+
/* @__PURE__ */ jsx16(PopoverContent, { align: "end", className: "w-auto p-2", children: /* @__PURE__ */ jsx16(
|
|
1091
|
+
Calendar,
|
|
1092
|
+
{
|
|
1093
|
+
value: selectedDate,
|
|
1094
|
+
onSelect: handleCalendarSelect,
|
|
1095
|
+
precision,
|
|
1096
|
+
locale: resolvedLocale
|
|
1097
|
+
}
|
|
1098
|
+
) })
|
|
1099
|
+
] })
|
|
1100
|
+
] }),
|
|
1101
|
+
/* @__PURE__ */ jsx16(InputError, { error: shownError })
|
|
1102
|
+
] });
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
// src/TimeInput/TimeInput.tsx
|
|
1106
|
+
import * as React15 from "react";
|
|
1107
|
+
import { Clock } from "lucide-react";
|
|
1108
|
+
import {
|
|
1109
|
+
cn as cn16,
|
|
1110
|
+
parseTime,
|
|
1111
|
+
normalizeTime
|
|
1112
|
+
} from "@petrarca/sonnet-core";
|
|
1113
|
+
import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1114
|
+
function TimeInput({
|
|
1115
|
+
value,
|
|
1116
|
+
onChange,
|
|
1117
|
+
granularity = "minute",
|
|
1118
|
+
id,
|
|
1119
|
+
name,
|
|
1120
|
+
placeholder,
|
|
1121
|
+
required,
|
|
1122
|
+
disabled,
|
|
1123
|
+
error,
|
|
1124
|
+
className,
|
|
1125
|
+
onBlur
|
|
1126
|
+
}) {
|
|
1127
|
+
const [inputValue, setInputValue] = React15.useState("");
|
|
1128
|
+
const [parseError, setParseError] = React15.useState("");
|
|
1129
|
+
const normalized = React15.useMemo(
|
|
1130
|
+
() => normalizeTime(value, granularity),
|
|
1131
|
+
[value, granularity]
|
|
1132
|
+
);
|
|
1133
|
+
React15.useEffect(() => {
|
|
1134
|
+
setInputValue(normalized);
|
|
1135
|
+
setParseError("");
|
|
1136
|
+
}, [normalized]);
|
|
1137
|
+
const handleBlur = () => {
|
|
1138
|
+
if (!inputValue.trim()) {
|
|
1139
|
+
setParseError("");
|
|
1140
|
+
onChange("");
|
|
1141
|
+
onBlur?.();
|
|
1142
|
+
return;
|
|
1143
|
+
}
|
|
1144
|
+
const result = parseTime(inputValue, granularity);
|
|
1145
|
+
if (result.value) {
|
|
1146
|
+
setInputValue(result.value);
|
|
1147
|
+
setParseError("");
|
|
1148
|
+
onChange(result.value);
|
|
1149
|
+
} else {
|
|
1150
|
+
setParseError(result.error || "Invalid time");
|
|
1151
|
+
}
|
|
1152
|
+
onBlur?.();
|
|
1153
|
+
};
|
|
1154
|
+
const shownError = error || parseError;
|
|
1155
|
+
const placeholderText = placeholder ?? (granularity === "second" ? "HH:MM:SS" : "HH:MM");
|
|
1156
|
+
return /* @__PURE__ */ jsxs7("div", { className: cn16("relative", className), children: [
|
|
1157
|
+
/* @__PURE__ */ jsxs7("div", { className: "relative", children: [
|
|
1158
|
+
/* @__PURE__ */ jsx17(
|
|
1159
|
+
Input,
|
|
1160
|
+
{
|
|
1161
|
+
id,
|
|
1162
|
+
name,
|
|
1163
|
+
type: "text",
|
|
1164
|
+
inputMode: "numeric",
|
|
1165
|
+
value: inputValue,
|
|
1166
|
+
onChange: (event) => {
|
|
1167
|
+
setInputValue(event.currentTarget.value);
|
|
1168
|
+
setParseError("");
|
|
1169
|
+
},
|
|
1170
|
+
onBlur: handleBlur,
|
|
1171
|
+
onKeyDown: (event) => {
|
|
1172
|
+
if (event.key === "Enter") handleBlur();
|
|
1173
|
+
},
|
|
1174
|
+
placeholder: placeholderText,
|
|
1175
|
+
required,
|
|
1176
|
+
disabled,
|
|
1177
|
+
autoComplete: "off",
|
|
1178
|
+
"aria-invalid": shownError ? true : void 0,
|
|
1179
|
+
className: cn16("pr-10", shownError && "border-destructive")
|
|
1180
|
+
}
|
|
1181
|
+
),
|
|
1182
|
+
/* @__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 }) })
|
|
1183
|
+
] }),
|
|
1184
|
+
/* @__PURE__ */ jsx17(InputError, { error: shownError })
|
|
1185
|
+
] });
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
// src/DateTimeInput/DateTimeInput.tsx
|
|
1189
|
+
import * as React16 from "react";
|
|
1190
|
+
import {
|
|
1191
|
+
cn as cn17,
|
|
1192
|
+
splitDateTime,
|
|
1193
|
+
joinDateTime,
|
|
1194
|
+
formatIsoDate as formatIsoDate2
|
|
1195
|
+
} from "@petrarca/sonnet-core";
|
|
1196
|
+
import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1197
|
+
function DateTimeInput({
|
|
1198
|
+
value,
|
|
1199
|
+
onChange,
|
|
1200
|
+
granularity = "minute",
|
|
1201
|
+
timeZone,
|
|
1202
|
+
locale,
|
|
1203
|
+
idPrefix,
|
|
1204
|
+
required,
|
|
1205
|
+
disabled,
|
|
1206
|
+
error,
|
|
1207
|
+
className,
|
|
1208
|
+
onBlur
|
|
1209
|
+
}) {
|
|
1210
|
+
const { date, time } = React16.useMemo(() => splitDateTime(value), [value]);
|
|
1211
|
+
const handleDateChange = (nextDate) => {
|
|
1212
|
+
onChange(joinDateTime(nextDate, time));
|
|
1213
|
+
};
|
|
1214
|
+
const handleTimeChange = (nextTime) => {
|
|
1215
|
+
if (!nextTime) {
|
|
1216
|
+
onChange(date ? joinDateTime(date, "") : "");
|
|
1217
|
+
return;
|
|
1218
|
+
}
|
|
1219
|
+
onChange(joinDateTime(date || formatIsoDate2(/* @__PURE__ */ new Date()), nextTime));
|
|
1220
|
+
};
|
|
1221
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn17("space-y-1", className), children: [
|
|
1222
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex gap-2", children: [
|
|
1223
|
+
/* @__PURE__ */ jsx18("div", { className: "flex-1", children: /* @__PURE__ */ jsx18(
|
|
1224
|
+
DateInput,
|
|
1225
|
+
{
|
|
1226
|
+
id: idPrefix ? `${idPrefix}-date` : void 0,
|
|
1227
|
+
value: date,
|
|
1228
|
+
onChange: handleDateChange,
|
|
1229
|
+
locale,
|
|
1230
|
+
error,
|
|
1231
|
+
required,
|
|
1232
|
+
disabled,
|
|
1233
|
+
onBlur
|
|
1234
|
+
}
|
|
1235
|
+
) }),
|
|
1236
|
+
/* @__PURE__ */ jsx18("div", { className: "w-32", children: /* @__PURE__ */ jsx18(
|
|
1237
|
+
TimeInput,
|
|
1238
|
+
{
|
|
1239
|
+
id: idPrefix ? `${idPrefix}-time` : void 0,
|
|
1240
|
+
value: time,
|
|
1241
|
+
onChange: handleTimeChange,
|
|
1242
|
+
granularity,
|
|
1243
|
+
disabled,
|
|
1244
|
+
onBlur
|
|
1245
|
+
}
|
|
1246
|
+
) })
|
|
1247
|
+
] }),
|
|
1248
|
+
timeZone && /* @__PURE__ */ jsxs8("p", { className: "text-xs text-tertiary-foreground", children: [
|
|
1249
|
+
"Times in ",
|
|
1250
|
+
timeZone
|
|
1251
|
+
] })
|
|
1252
|
+
] });
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
// src/select.tsx
|
|
1256
|
+
import * as React17 from "react";
|
|
1257
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
1258
|
+
import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
|
|
1259
|
+
import { cn as cn18 } from "@petrarca/sonnet-core";
|
|
1260
|
+
import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1261
|
+
var Select = SelectPrimitive.Root;
|
|
1262
|
+
var SelectGroup = SelectPrimitive.Group;
|
|
1263
|
+
var SelectValue = SelectPrimitive.Value;
|
|
1264
|
+
var SelectTrigger = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
|
|
1265
|
+
SelectPrimitive.Trigger,
|
|
1266
|
+
{
|
|
1267
|
+
ref,
|
|
1268
|
+
className: cn18(
|
|
1269
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background transition-[color,box-shadow] px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
|
|
1270
|
+
className
|
|
1271
|
+
),
|
|
1272
|
+
...props,
|
|
1273
|
+
children: [
|
|
1274
|
+
children,
|
|
1275
|
+
/* @__PURE__ */ jsx19(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx19(ChevronDown, { className: "h-4 w-4 opacity-60" }) })
|
|
1276
|
+
]
|
|
1277
|
+
}
|
|
1278
|
+
));
|
|
1279
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
1280
|
+
var SelectScrollUpButton = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1281
|
+
SelectPrimitive.ScrollUpButton,
|
|
1282
|
+
{
|
|
1283
|
+
ref,
|
|
1284
|
+
className: cn18(
|
|
1285
|
+
"flex cursor-default items-center justify-center py-1",
|
|
1286
|
+
className
|
|
1287
|
+
),
|
|
1288
|
+
...props,
|
|
1289
|
+
children: /* @__PURE__ */ jsx19(ChevronUp, { className: "h-4 w-4" })
|
|
1290
|
+
}
|
|
1291
|
+
));
|
|
1292
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
1293
|
+
var SelectScrollDownButton = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1294
|
+
SelectPrimitive.ScrollDownButton,
|
|
1295
|
+
{
|
|
1296
|
+
ref,
|
|
1297
|
+
className: cn18(
|
|
1298
|
+
"flex cursor-default items-center justify-center py-1",
|
|
1299
|
+
className
|
|
1300
|
+
),
|
|
1301
|
+
...props,
|
|
1302
|
+
children: /* @__PURE__ */ jsx19(ChevronDown, { className: "h-4 w-4" })
|
|
1303
|
+
}
|
|
1304
|
+
));
|
|
1305
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
1306
|
+
var SelectContent = React17.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx19(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
|
|
1307
|
+
SelectPrimitive.Content,
|
|
1308
|
+
{
|
|
1309
|
+
ref,
|
|
1310
|
+
className: cn18(
|
|
1311
|
+
"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]",
|
|
1312
|
+
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",
|
|
1313
|
+
className
|
|
1314
|
+
),
|
|
1315
|
+
position,
|
|
1316
|
+
...props,
|
|
1317
|
+
children: [
|
|
1318
|
+
/* @__PURE__ */ jsx19(SelectScrollUpButton, {}),
|
|
1319
|
+
/* @__PURE__ */ jsx19(
|
|
1320
|
+
SelectPrimitive.Viewport,
|
|
1321
|
+
{
|
|
1322
|
+
className: cn18(
|
|
1323
|
+
"p-1",
|
|
1324
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
1325
|
+
),
|
|
1326
|
+
children
|
|
1327
|
+
}
|
|
1328
|
+
),
|
|
1329
|
+
/* @__PURE__ */ jsx19(SelectScrollDownButton, {})
|
|
1330
|
+
]
|
|
1331
|
+
}
|
|
1332
|
+
) }));
|
|
1333
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
1334
|
+
var SelectLabel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1335
|
+
SelectPrimitive.Label,
|
|
1336
|
+
{
|
|
1337
|
+
ref,
|
|
1338
|
+
className: cn18("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
1339
|
+
...props
|
|
1340
|
+
}
|
|
1341
|
+
));
|
|
1342
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
1343
|
+
var SelectItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
|
|
1344
|
+
SelectPrimitive.Item,
|
|
1345
|
+
{
|
|
1346
|
+
ref,
|
|
1347
|
+
className: cn18(
|
|
1348
|
+
"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",
|
|
1349
|
+
className
|
|
1350
|
+
),
|
|
1351
|
+
...props,
|
|
1352
|
+
children: [
|
|
1353
|
+
/* @__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" }) }) }),
|
|
1354
|
+
/* @__PURE__ */ jsx19(SelectPrimitive.ItemText, { children })
|
|
1355
|
+
]
|
|
1356
|
+
}
|
|
1357
|
+
));
|
|
1358
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
1359
|
+
var SelectSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
1360
|
+
SelectPrimitive.Separator,
|
|
1361
|
+
{
|
|
1362
|
+
ref,
|
|
1363
|
+
className: cn18("-mx-1 my-1 h-px bg-muted", className),
|
|
1364
|
+
...props
|
|
1365
|
+
}
|
|
1366
|
+
));
|
|
1367
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
1368
|
+
|
|
1369
|
+
// src/input-group.tsx
|
|
1370
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
1371
|
+
import { cn as cn20 } from "@petrarca/sonnet-core";
|
|
1372
|
+
|
|
1373
|
+
// src/textarea.tsx
|
|
1374
|
+
import * as React18 from "react";
|
|
1375
|
+
import { cn as cn19 } from "@petrarca/sonnet-core";
|
|
1376
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1377
|
+
var Textarea = React18.forwardRef(({ className, ...props }, ref) => {
|
|
1378
|
+
return /* @__PURE__ */ jsx20(
|
|
717
1379
|
"textarea",
|
|
718
1380
|
{
|
|
719
|
-
className:
|
|
720
|
-
|
|
1381
|
+
className: cn19(
|
|
1382
|
+
// Focus treatment matches Input -- see the note there.
|
|
1383
|
+
"flex min-h-[80px] w-full rounded-md border border-input bg-background transition-[color,box-shadow] px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
721
1384
|
className
|
|
722
1385
|
),
|
|
723
1386
|
ref,
|
|
@@ -728,14 +1391,14 @@ var Textarea = React12.forwardRef(({ className, ...props }, ref) => {
|
|
|
728
1391
|
Textarea.displayName = "Textarea";
|
|
729
1392
|
|
|
730
1393
|
// src/input-group.tsx
|
|
731
|
-
import { jsx as
|
|
1394
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
732
1395
|
function InputGroup({ className, ...props }) {
|
|
733
|
-
return /* @__PURE__ */
|
|
1396
|
+
return /* @__PURE__ */ jsx21(
|
|
734
1397
|
"div",
|
|
735
1398
|
{
|
|
736
1399
|
"data-slot": "input-group",
|
|
737
1400
|
role: "group",
|
|
738
|
-
className:
|
|
1401
|
+
className: cn20(
|
|
739
1402
|
"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
1403
|
"h-9 has-[>textarea]:h-auto",
|
|
741
1404
|
// Variants based on alignment.
|
|
@@ -774,13 +1437,13 @@ function InputGroupAddon({
|
|
|
774
1437
|
align = "inline-start",
|
|
775
1438
|
...props
|
|
776
1439
|
}) {
|
|
777
|
-
return /* @__PURE__ */
|
|
1440
|
+
return /* @__PURE__ */ jsx21(
|
|
778
1441
|
"div",
|
|
779
1442
|
{
|
|
780
1443
|
role: "group",
|
|
781
1444
|
"data-slot": "input-group-addon",
|
|
782
1445
|
"data-align": align,
|
|
783
|
-
className:
|
|
1446
|
+
className: cn20(inputGroupAddonVariants({ align }), className),
|
|
784
1447
|
onClick: (e) => {
|
|
785
1448
|
if (e.target.closest("button")) {
|
|
786
1449
|
return;
|
|
@@ -814,22 +1477,22 @@ function InputGroupButton({
|
|
|
814
1477
|
size = "xs",
|
|
815
1478
|
...props
|
|
816
1479
|
}) {
|
|
817
|
-
return /* @__PURE__ */
|
|
1480
|
+
return /* @__PURE__ */ jsx21(
|
|
818
1481
|
Button,
|
|
819
1482
|
{
|
|
820
1483
|
type,
|
|
821
1484
|
"data-size": size,
|
|
822
1485
|
variant,
|
|
823
|
-
className:
|
|
1486
|
+
className: cn20(inputGroupButtonVariants({ size }), className),
|
|
824
1487
|
...props
|
|
825
1488
|
}
|
|
826
1489
|
);
|
|
827
1490
|
}
|
|
828
1491
|
function InputGroupText({ className, ...props }) {
|
|
829
|
-
return /* @__PURE__ */
|
|
1492
|
+
return /* @__PURE__ */ jsx21(
|
|
830
1493
|
"span",
|
|
831
1494
|
{
|
|
832
|
-
className:
|
|
1495
|
+
className: cn20(
|
|
833
1496
|
"text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
|
|
834
1497
|
className
|
|
835
1498
|
),
|
|
@@ -841,11 +1504,11 @@ function InputGroupInput({
|
|
|
841
1504
|
className,
|
|
842
1505
|
...props
|
|
843
1506
|
}) {
|
|
844
|
-
return /* @__PURE__ */
|
|
1507
|
+
return /* @__PURE__ */ jsx21(
|
|
845
1508
|
Input,
|
|
846
1509
|
{
|
|
847
1510
|
"data-slot": "input-group-control",
|
|
848
|
-
className:
|
|
1511
|
+
className: cn20(
|
|
849
1512
|
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
|
|
850
1513
|
className
|
|
851
1514
|
),
|
|
@@ -857,11 +1520,11 @@ function InputGroupTextarea({
|
|
|
857
1520
|
className,
|
|
858
1521
|
...props
|
|
859
1522
|
}) {
|
|
860
|
-
return /* @__PURE__ */
|
|
1523
|
+
return /* @__PURE__ */ jsx21(
|
|
861
1524
|
Textarea,
|
|
862
1525
|
{
|
|
863
1526
|
"data-slot": "input-group-control",
|
|
864
|
-
className:
|
|
1527
|
+
className: cn20(
|
|
865
1528
|
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
|
866
1529
|
className
|
|
867
1530
|
),
|
|
@@ -871,95 +1534,73 @@ function InputGroupTextarea({
|
|
|
871
1534
|
}
|
|
872
1535
|
|
|
873
1536
|
// src/label.tsx
|
|
874
|
-
import * as
|
|
1537
|
+
import * as React19 from "react";
|
|
875
1538
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
876
1539
|
import { cva as cva5 } from "class-variance-authority";
|
|
877
|
-
import { cn as
|
|
878
|
-
import { jsx as
|
|
1540
|
+
import { cn as cn21 } from "@petrarca/sonnet-core";
|
|
1541
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
879
1542
|
var labelVariants = cva5(
|
|
880
1543
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
881
1544
|
);
|
|
882
|
-
var
|
|
1545
|
+
var Label3 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
|
|
883
1546
|
LabelPrimitive.Root,
|
|
884
1547
|
{
|
|
885
1548
|
ref,
|
|
886
|
-
className:
|
|
1549
|
+
className: cn21(labelVariants(), className),
|
|
887
1550
|
...props
|
|
888
1551
|
}
|
|
889
1552
|
));
|
|
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;
|
|
1553
|
+
Label3.displayName = LabelPrimitive.Root.displayName;
|
|
913
1554
|
|
|
914
1555
|
// src/scroll-area.tsx
|
|
915
|
-
import * as
|
|
1556
|
+
import * as React20 from "react";
|
|
916
1557
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
917
|
-
import { cn as
|
|
918
|
-
import { jsx as
|
|
919
|
-
var ScrollArea =
|
|
1558
|
+
import { cn as cn22 } from "@petrarca/sonnet-core";
|
|
1559
|
+
import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1560
|
+
var ScrollArea = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
|
|
920
1561
|
ScrollAreaPrimitive.Root,
|
|
921
1562
|
{
|
|
922
1563
|
ref,
|
|
923
|
-
className:
|
|
1564
|
+
className: cn22("relative overflow-hidden", className),
|
|
924
1565
|
...props,
|
|
925
1566
|
children: [
|
|
926
|
-
/* @__PURE__ */
|
|
927
|
-
/* @__PURE__ */
|
|
928
|
-
/* @__PURE__ */
|
|
1567
|
+
/* @__PURE__ */ jsx23(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
|
|
1568
|
+
/* @__PURE__ */ jsx23(ScrollBar, {}),
|
|
1569
|
+
/* @__PURE__ */ jsx23(ScrollAreaPrimitive.Corner, {})
|
|
929
1570
|
]
|
|
930
1571
|
}
|
|
931
1572
|
));
|
|
932
1573
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
933
|
-
var ScrollBar =
|
|
1574
|
+
var ScrollBar = React20.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
934
1575
|
ScrollAreaPrimitive.ScrollAreaScrollbar,
|
|
935
1576
|
{
|
|
936
1577
|
ref,
|
|
937
1578
|
orientation,
|
|
938
|
-
className:
|
|
1579
|
+
className: cn22(
|
|
939
1580
|
"flex touch-none select-none transition-colors",
|
|
940
1581
|
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
|
|
941
1582
|
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
|
942
1583
|
className
|
|
943
1584
|
),
|
|
944
1585
|
...props,
|
|
945
|
-
children: /* @__PURE__ */
|
|
1586
|
+
children: /* @__PURE__ */ jsx23(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
|
|
946
1587
|
}
|
|
947
1588
|
));
|
|
948
1589
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
949
1590
|
|
|
950
1591
|
// src/separator.tsx
|
|
951
|
-
import * as
|
|
1592
|
+
import * as React21 from "react";
|
|
952
1593
|
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__ */
|
|
1594
|
+
import { cn as cn23 } from "@petrarca/sonnet-core";
|
|
1595
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1596
|
+
var Separator3 = React21.forwardRef(
|
|
1597
|
+
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx24(
|
|
957
1598
|
SeparatorPrimitive.Root,
|
|
958
1599
|
{
|
|
959
1600
|
ref,
|
|
960
1601
|
decorative,
|
|
961
1602
|
orientation,
|
|
962
|
-
className:
|
|
1603
|
+
className: cn23(
|
|
963
1604
|
"shrink-0 bg-border",
|
|
964
1605
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
965
1606
|
className
|
|
@@ -968,22 +1609,22 @@ var Separator2 = React16.forwardRef(
|
|
|
968
1609
|
}
|
|
969
1610
|
)
|
|
970
1611
|
);
|
|
971
|
-
|
|
1612
|
+
Separator3.displayName = SeparatorPrimitive.Root.displayName;
|
|
972
1613
|
|
|
973
1614
|
// src/resize-handle.tsx
|
|
974
|
-
import * as
|
|
975
|
-
import { cn as
|
|
976
|
-
import { jsx as
|
|
977
|
-
var ResizeHandle =
|
|
1615
|
+
import * as React22 from "react";
|
|
1616
|
+
import { cn as cn24 } from "@petrarca/sonnet-core";
|
|
1617
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1618
|
+
var ResizeHandle = React22.forwardRef(
|
|
978
1619
|
({ orientation = "vertical", gripLength = 48, className, style, ...props }, ref) => {
|
|
979
1620
|
const isVertical = orientation === "vertical";
|
|
980
|
-
return /* @__PURE__ */
|
|
1621
|
+
return /* @__PURE__ */ jsx25(
|
|
981
1622
|
"div",
|
|
982
1623
|
{
|
|
983
1624
|
ref,
|
|
984
1625
|
role: "separator",
|
|
985
1626
|
"aria-orientation": orientation,
|
|
986
|
-
className:
|
|
1627
|
+
className: cn24(
|
|
987
1628
|
"group relative flex shrink-0 select-none touch-none items-center justify-center rounded-sm",
|
|
988
1629
|
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
|
|
989
1630
|
isVertical ? "mx-1 w-2 cursor-col-resize" : "my-1 h-2 cursor-row-resize",
|
|
@@ -991,7 +1632,7 @@ var ResizeHandle = React17.forwardRef(
|
|
|
991
1632
|
),
|
|
992
1633
|
style,
|
|
993
1634
|
...props,
|
|
994
|
-
children: /* @__PURE__ */
|
|
1635
|
+
children: /* @__PURE__ */ jsx25(
|
|
995
1636
|
"div",
|
|
996
1637
|
{
|
|
997
1638
|
className: "pointer-events-none absolute rounded-full bg-border transition-colors group-hover:bg-border-strong",
|
|
@@ -1005,20 +1646,20 @@ var ResizeHandle = React17.forwardRef(
|
|
|
1005
1646
|
ResizeHandle.displayName = "ResizeHandle";
|
|
1006
1647
|
|
|
1007
1648
|
// src/sheet.tsx
|
|
1008
|
-
import * as
|
|
1649
|
+
import * as React23 from "react";
|
|
1009
1650
|
import * as DialogPrimitive2 from "@radix-ui/react-dialog";
|
|
1010
1651
|
import { X as X2 } from "lucide-react";
|
|
1011
|
-
import { cn as
|
|
1012
|
-
import { jsx as
|
|
1652
|
+
import { cn as cn25 } from "@petrarca/sonnet-core";
|
|
1653
|
+
import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1013
1654
|
var Sheet = DialogPrimitive2.Root;
|
|
1014
1655
|
var SheetTrigger = DialogPrimitive2.Trigger;
|
|
1015
1656
|
var SheetClose = DialogPrimitive2.Close;
|
|
1016
1657
|
var SheetPortal = DialogPrimitive2.Portal;
|
|
1017
|
-
var SheetOverlay =
|
|
1658
|
+
var SheetOverlay = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
|
|
1018
1659
|
DialogPrimitive2.Overlay,
|
|
1019
1660
|
{
|
|
1020
1661
|
ref,
|
|
1021
|
-
className:
|
|
1662
|
+
className: cn25(
|
|
1022
1663
|
"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
1664
|
className
|
|
1024
1665
|
),
|
|
@@ -1026,14 +1667,14 @@ var SheetOverlay = React18.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
1026
1667
|
}
|
|
1027
1668
|
));
|
|
1028
1669
|
SheetOverlay.displayName = "SheetOverlay";
|
|
1029
|
-
var SheetContent =
|
|
1030
|
-
({ className, children, side = "right", offsetTop = "0px", style, ...props }, ref) => /* @__PURE__ */
|
|
1031
|
-
/* @__PURE__ */
|
|
1032
|
-
/* @__PURE__ */
|
|
1670
|
+
var SheetContent = React23.forwardRef(
|
|
1671
|
+
({ className, children, side = "right", offsetTop = "0px", style, ...props }, ref) => /* @__PURE__ */ jsxs11(SheetPortal, { children: [
|
|
1672
|
+
/* @__PURE__ */ jsx26(SheetOverlay, {}),
|
|
1673
|
+
/* @__PURE__ */ jsxs11(
|
|
1033
1674
|
DialogPrimitive2.Content,
|
|
1034
1675
|
{
|
|
1035
1676
|
ref,
|
|
1036
|
-
className:
|
|
1677
|
+
className: cn25(
|
|
1037
1678
|
"fixed z-50 flex flex-col bg-background shadow-xl transition-transform duration-300 ease-in-out",
|
|
1038
1679
|
"bottom-0 w-[480px] max-w-[90vw] border-l",
|
|
1039
1680
|
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 +1685,9 @@ var SheetContent = React18.forwardRef(
|
|
|
1044
1685
|
...props,
|
|
1045
1686
|
children: [
|
|
1046
1687
|
children,
|
|
1047
|
-
/* @__PURE__ */
|
|
1048
|
-
/* @__PURE__ */
|
|
1049
|
-
/* @__PURE__ */
|
|
1688
|
+
/* @__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: [
|
|
1689
|
+
/* @__PURE__ */ jsx26(X2, { className: "h-4 w-4" }),
|
|
1690
|
+
/* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Close" })
|
|
1050
1691
|
] })
|
|
1051
1692
|
]
|
|
1052
1693
|
}
|
|
@@ -1057,21 +1698,21 @@ SheetContent.displayName = "SheetContent";
|
|
|
1057
1698
|
var SheetHeader = ({
|
|
1058
1699
|
className,
|
|
1059
1700
|
...props
|
|
1060
|
-
}) => /* @__PURE__ */
|
|
1061
|
-
var SheetTitle =
|
|
1701
|
+
}) => /* @__PURE__ */ jsx26("div", { className: cn25("shrink-0 border-b px-6 py-4", className), ...props });
|
|
1702
|
+
var SheetTitle = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
|
|
1062
1703
|
DialogPrimitive2.Title,
|
|
1063
1704
|
{
|
|
1064
1705
|
ref,
|
|
1065
|
-
className:
|
|
1706
|
+
className: cn25("text-lg font-semibold", className),
|
|
1066
1707
|
...props
|
|
1067
1708
|
}
|
|
1068
1709
|
));
|
|
1069
1710
|
SheetTitle.displayName = "SheetTitle";
|
|
1070
|
-
var SheetDescription =
|
|
1711
|
+
var SheetDescription = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
|
|
1071
1712
|
DialogPrimitive2.Description,
|
|
1072
1713
|
{
|
|
1073
1714
|
ref,
|
|
1074
|
-
className:
|
|
1715
|
+
className: cn25("text-sm text-muted-foreground mt-1", className),
|
|
1075
1716
|
...props
|
|
1076
1717
|
}
|
|
1077
1718
|
));
|
|
@@ -1079,20 +1720,20 @@ SheetDescription.displayName = "SheetDescription";
|
|
|
1079
1720
|
var SheetBody = ({
|
|
1080
1721
|
className,
|
|
1081
1722
|
...props
|
|
1082
|
-
}) => /* @__PURE__ */
|
|
1723
|
+
}) => /* @__PURE__ */ jsx26(
|
|
1083
1724
|
"div",
|
|
1084
1725
|
{
|
|
1085
|
-
className:
|
|
1726
|
+
className: cn25("flex-1 overflow-y-auto px-6 py-4", className),
|
|
1086
1727
|
...props
|
|
1087
1728
|
}
|
|
1088
1729
|
);
|
|
1089
1730
|
var SheetFooter = ({
|
|
1090
1731
|
className,
|
|
1091
1732
|
...props
|
|
1092
|
-
}) => /* @__PURE__ */
|
|
1733
|
+
}) => /* @__PURE__ */ jsx26(
|
|
1093
1734
|
"div",
|
|
1094
1735
|
{
|
|
1095
|
-
className:
|
|
1736
|
+
className: cn25(
|
|
1096
1737
|
"shrink-0 border-t px-6 py-4 flex justify-end gap-2",
|
|
1097
1738
|
className
|
|
1098
1739
|
),
|
|
@@ -1101,8 +1742,8 @@ var SheetFooter = ({
|
|
|
1101
1742
|
);
|
|
1102
1743
|
|
|
1103
1744
|
// src/simple-group.tsx
|
|
1104
|
-
import { cn as
|
|
1105
|
-
import { jsx as
|
|
1745
|
+
import { cn as cn26 } from "@petrarca/sonnet-core";
|
|
1746
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
1106
1747
|
var gapMap = {
|
|
1107
1748
|
0: "gap-0",
|
|
1108
1749
|
xs: "gap-1",
|
|
@@ -1164,10 +1805,10 @@ function SimpleGroup({
|
|
|
1164
1805
|
const wrapClass = wrap ? wrapMap[wrap] : void 0;
|
|
1165
1806
|
const growClass = grow ? "[&>*]:flex-1" : void 0;
|
|
1166
1807
|
const mtClass = mt ? mtMap[mt] : void 0;
|
|
1167
|
-
return /* @__PURE__ */
|
|
1808
|
+
return /* @__PURE__ */ jsx27(
|
|
1168
1809
|
"div",
|
|
1169
1810
|
{
|
|
1170
|
-
className:
|
|
1811
|
+
className: cn26(
|
|
1171
1812
|
"flex flex-row",
|
|
1172
1813
|
gapClass,
|
|
1173
1814
|
alignClass,
|
|
@@ -1185,8 +1826,8 @@ function SimpleGroup({
|
|
|
1185
1826
|
}
|
|
1186
1827
|
|
|
1187
1828
|
// src/simple-stack.tsx
|
|
1188
|
-
import { cn as
|
|
1189
|
-
import { jsx as
|
|
1829
|
+
import { cn as cn27 } from "@petrarca/sonnet-core";
|
|
1830
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
1190
1831
|
var gapMap2 = {
|
|
1191
1832
|
0: "gap-0",
|
|
1192
1833
|
xs: "gap-1",
|
|
@@ -1226,10 +1867,10 @@ function SimpleStack({
|
|
|
1226
1867
|
const alignClass = align ? alignMap2[align] : void 0;
|
|
1227
1868
|
const justifyClass = justify ? justifyMap2[justify] : void 0;
|
|
1228
1869
|
const heightStyle = h !== void 0 ? { height: typeof h === "number" ? `${h}px` : h } : void 0;
|
|
1229
|
-
return /* @__PURE__ */
|
|
1870
|
+
return /* @__PURE__ */ jsx28(
|
|
1230
1871
|
"div",
|
|
1231
1872
|
{
|
|
1232
|
-
className:
|
|
1873
|
+
className: cn27(
|
|
1233
1874
|
"flex flex-col",
|
|
1234
1875
|
gapClass,
|
|
1235
1876
|
alignClass,
|
|
@@ -1243,57 +1884,57 @@ function SimpleStack({
|
|
|
1243
1884
|
}
|
|
1244
1885
|
|
|
1245
1886
|
// src/skeleton.tsx
|
|
1246
|
-
import { cn as
|
|
1247
|
-
import { jsx as
|
|
1887
|
+
import { cn as cn28 } from "@petrarca/sonnet-core";
|
|
1888
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
1248
1889
|
function Skeleton({
|
|
1249
1890
|
className,
|
|
1250
1891
|
...props
|
|
1251
1892
|
}) {
|
|
1252
|
-
return /* @__PURE__ */
|
|
1893
|
+
return /* @__PURE__ */ jsx29(
|
|
1253
1894
|
"div",
|
|
1254
1895
|
{
|
|
1255
|
-
className:
|
|
1896
|
+
className: cn28("animate-pulse rounded-md bg-muted", className),
|
|
1256
1897
|
...props
|
|
1257
1898
|
}
|
|
1258
1899
|
);
|
|
1259
1900
|
}
|
|
1260
1901
|
|
|
1261
1902
|
// src/spinner.tsx
|
|
1262
|
-
import { cn as
|
|
1263
|
-
import { jsx as
|
|
1903
|
+
import { cn as cn29 } from "@petrarca/sonnet-core";
|
|
1904
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
1264
1905
|
var sizeClasses = {
|
|
1265
1906
|
sm: "h-4 w-4 border-2",
|
|
1266
1907
|
md: "h-8 w-8 border-2",
|
|
1267
1908
|
lg: "h-12 w-12 border-3"
|
|
1268
1909
|
};
|
|
1269
1910
|
function Spinner({ className, size = "md" }) {
|
|
1270
|
-
return /* @__PURE__ */
|
|
1911
|
+
return /* @__PURE__ */ jsx30(
|
|
1271
1912
|
"div",
|
|
1272
1913
|
{
|
|
1273
|
-
className:
|
|
1914
|
+
className: cn29(
|
|
1274
1915
|
"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
1916
|
sizeClasses[size],
|
|
1276
1917
|
className
|
|
1277
1918
|
),
|
|
1278
1919
|
role: "status",
|
|
1279
|
-
children: /* @__PURE__ */
|
|
1920
|
+
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
1921
|
}
|
|
1281
1922
|
);
|
|
1282
1923
|
}
|
|
1283
1924
|
|
|
1284
1925
|
// src/tabs.tsx
|
|
1285
|
-
import * as
|
|
1926
|
+
import * as React24 from "react";
|
|
1286
1927
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
1287
|
-
import { cn as
|
|
1288
|
-
import { jsx as
|
|
1928
|
+
import { cn as cn30 } from "@petrarca/sonnet-core";
|
|
1929
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
1289
1930
|
var Tabs = TabsPrimitive.Root;
|
|
1290
|
-
var TabsList =
|
|
1931
|
+
var TabsList = React24.forwardRef(({ className, align = "start", ...props }, ref) => {
|
|
1291
1932
|
const alignClass = align === "center" ? "justify-center" : align === "end" ? "justify-end" : "justify-start";
|
|
1292
|
-
return /* @__PURE__ */
|
|
1933
|
+
return /* @__PURE__ */ jsx31(
|
|
1293
1934
|
TabsPrimitive.List,
|
|
1294
1935
|
{
|
|
1295
1936
|
ref,
|
|
1296
|
-
className:
|
|
1937
|
+
className: cn30(
|
|
1297
1938
|
"inline-flex h-10 items-center rounded-md bg-muted p-1 text-muted-foreground",
|
|
1298
1939
|
alignClass,
|
|
1299
1940
|
className
|
|
@@ -1303,11 +1944,11 @@ var TabsList = React19.forwardRef(({ className, align = "start", ...props }, ref
|
|
|
1303
1944
|
);
|
|
1304
1945
|
});
|
|
1305
1946
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
1306
|
-
var TabsTrigger =
|
|
1947
|
+
var TabsTrigger = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
1307
1948
|
TabsPrimitive.Trigger,
|
|
1308
1949
|
{
|
|
1309
1950
|
ref,
|
|
1310
|
-
className:
|
|
1951
|
+
className: cn30(
|
|
1311
1952
|
"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
1953
|
className
|
|
1313
1954
|
),
|
|
@@ -1315,11 +1956,11 @@ var TabsTrigger = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
1315
1956
|
}
|
|
1316
1957
|
));
|
|
1317
1958
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
1318
|
-
var TabsContent =
|
|
1959
|
+
var TabsContent = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
1319
1960
|
TabsPrimitive.Content,
|
|
1320
1961
|
{
|
|
1321
1962
|
ref,
|
|
1322
|
-
className:
|
|
1963
|
+
className: cn30(
|
|
1323
1964
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
1324
1965
|
"data-[state=inactive]:hidden",
|
|
1325
1966
|
className
|
|
@@ -1328,13 +1969,13 @@ var TabsContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
1328
1969
|
}
|
|
1329
1970
|
));
|
|
1330
1971
|
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
1331
|
-
var TabsSeparator =
|
|
1972
|
+
var TabsSeparator = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
|
|
1332
1973
|
"div",
|
|
1333
1974
|
{
|
|
1334
1975
|
ref,
|
|
1335
1976
|
role: "separator",
|
|
1336
1977
|
"aria-orientation": "vertical",
|
|
1337
|
-
className:
|
|
1978
|
+
className: cn30(
|
|
1338
1979
|
"mx-2 h-6 w-0.5 shrink-0 rounded-full bg-muted-foreground/40",
|
|
1339
1980
|
className
|
|
1340
1981
|
),
|
|
@@ -1344,25 +1985,25 @@ var TabsSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__P
|
|
|
1344
1985
|
TabsSeparator.displayName = "TabsSeparator";
|
|
1345
1986
|
|
|
1346
1987
|
// src/stepper.tsx
|
|
1347
|
-
import { Check as
|
|
1988
|
+
import { Check as Check4 } from "lucide-react";
|
|
1348
1989
|
import {
|
|
1349
1990
|
Direction as DirectionPrimitive,
|
|
1350
1991
|
Slot as SlotPrimitive
|
|
1351
1992
|
} from "radix-ui";
|
|
1352
|
-
import * as
|
|
1993
|
+
import * as React28 from "react";
|
|
1353
1994
|
import { useComposedRefs } from "@petrarca/sonnet-core";
|
|
1354
|
-
import { cn as
|
|
1995
|
+
import { cn as cn31 } from "@petrarca/sonnet-core";
|
|
1355
1996
|
|
|
1356
1997
|
// src/radix/hooks/use-as-ref.ts
|
|
1357
|
-
import * as
|
|
1998
|
+
import * as React26 from "react";
|
|
1358
1999
|
|
|
1359
2000
|
// src/radix/hooks/use-isomorphic-layout-effect.ts
|
|
1360
|
-
import * as
|
|
1361
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
2001
|
+
import * as React25 from "react";
|
|
2002
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React25.useLayoutEffect : React25.useEffect;
|
|
1362
2003
|
|
|
1363
2004
|
// src/radix/hooks/use-as-ref.ts
|
|
1364
2005
|
function useAsRef(props) {
|
|
1365
|
-
const ref =
|
|
2006
|
+
const ref = React26.useRef(props);
|
|
1366
2007
|
useIsomorphicLayoutEffect(() => {
|
|
1367
2008
|
ref.current = props;
|
|
1368
2009
|
});
|
|
@@ -1370,9 +2011,9 @@ function useAsRef(props) {
|
|
|
1370
2011
|
}
|
|
1371
2012
|
|
|
1372
2013
|
// src/radix/hooks/use-lazy-ref.ts
|
|
1373
|
-
import * as
|
|
2014
|
+
import * as React27 from "react";
|
|
1374
2015
|
function useLazyRef(fn) {
|
|
1375
|
-
const ref =
|
|
2016
|
+
const ref = React27.useRef(null);
|
|
1376
2017
|
if (ref.current === null) {
|
|
1377
2018
|
ref.current = fn();
|
|
1378
2019
|
}
|
|
@@ -1380,7 +2021,7 @@ function useLazyRef(fn) {
|
|
|
1380
2021
|
}
|
|
1381
2022
|
|
|
1382
2023
|
// src/stepper.tsx
|
|
1383
|
-
import { jsx as
|
|
2024
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
1384
2025
|
var ROOT_NAME = "Stepper";
|
|
1385
2026
|
var LIST_NAME = "StepperList";
|
|
1386
2027
|
var ITEM_NAME = "StepperItem";
|
|
@@ -1499,9 +2140,9 @@ function getDataState(value, itemValue, stepState, steps, variant = "item") {
|
|
|
1499
2140
|
}
|
|
1500
2141
|
return "inactive";
|
|
1501
2142
|
}
|
|
1502
|
-
var StoreContext =
|
|
2143
|
+
var StoreContext = React28.createContext(null);
|
|
1503
2144
|
function useStoreContext(consumerName) {
|
|
1504
|
-
const context =
|
|
2145
|
+
const context = React28.useContext(StoreContext);
|
|
1505
2146
|
if (!context) {
|
|
1506
2147
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1507
2148
|
}
|
|
@@ -1509,15 +2150,15 @@ function useStoreContext(consumerName) {
|
|
|
1509
2150
|
}
|
|
1510
2151
|
function useStore(selector) {
|
|
1511
2152
|
const store = useStoreContext("useStore");
|
|
1512
|
-
const getSnapshot =
|
|
2153
|
+
const getSnapshot = React28.useCallback(
|
|
1513
2154
|
() => selector(store.getState()),
|
|
1514
2155
|
[store, selector]
|
|
1515
2156
|
);
|
|
1516
|
-
return
|
|
2157
|
+
return React28.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
1517
2158
|
}
|
|
1518
|
-
var StepperContext =
|
|
2159
|
+
var StepperContext = React28.createContext(null);
|
|
1519
2160
|
function useStepperContext(consumerName) {
|
|
1520
|
-
const context =
|
|
2161
|
+
const context = React28.useContext(StepperContext);
|
|
1521
2162
|
if (!context) {
|
|
1522
2163
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1523
2164
|
}
|
|
@@ -1555,7 +2196,7 @@ function Stepper(props) {
|
|
|
1555
2196
|
onValueRemove,
|
|
1556
2197
|
onValidate
|
|
1557
2198
|
});
|
|
1558
|
-
const store =
|
|
2199
|
+
const store = React28.useMemo(() => {
|
|
1559
2200
|
return {
|
|
1560
2201
|
subscribe: (cb) => {
|
|
1561
2202
|
listenersRef.current.add(cb);
|
|
@@ -1629,9 +2270,9 @@ function Stepper(props) {
|
|
|
1629
2270
|
}
|
|
1630
2271
|
}, [value]);
|
|
1631
2272
|
const dir = DirectionPrimitive.useDirection(dirProp);
|
|
1632
|
-
const instanceId =
|
|
2273
|
+
const instanceId = React28.useId();
|
|
1633
2274
|
const rootId = id ?? instanceId;
|
|
1634
|
-
const contextValue =
|
|
2275
|
+
const contextValue = React28.useMemo(
|
|
1635
2276
|
() => ({
|
|
1636
2277
|
rootId,
|
|
1637
2278
|
dir,
|
|
@@ -1644,7 +2285,7 @@ function Stepper(props) {
|
|
|
1644
2285
|
[rootId, dir, orientation, activationMode, disabled, nonInteractive, loop]
|
|
1645
2286
|
);
|
|
1646
2287
|
const RootPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1647
|
-
return /* @__PURE__ */
|
|
2288
|
+
return /* @__PURE__ */ jsx32(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx32(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx32(
|
|
1648
2289
|
RootPrimitive,
|
|
1649
2290
|
{
|
|
1650
2291
|
id: rootId,
|
|
@@ -1653,7 +2294,7 @@ function Stepper(props) {
|
|
|
1653
2294
|
"data-slot": "stepper",
|
|
1654
2295
|
dir,
|
|
1655
2296
|
...rootProps,
|
|
1656
|
-
className:
|
|
2297
|
+
className: cn31(
|
|
1657
2298
|
"flex gap-3",
|
|
1658
2299
|
orientation === "horizontal" ? "w-full flex-col" : "flex-row",
|
|
1659
2300
|
className
|
|
@@ -1661,9 +2302,9 @@ function Stepper(props) {
|
|
|
1661
2302
|
}
|
|
1662
2303
|
) }) });
|
|
1663
2304
|
}
|
|
1664
|
-
var FocusContext =
|
|
2305
|
+
var FocusContext = React28.createContext(null);
|
|
1665
2306
|
function useFocusContext(consumerName) {
|
|
1666
|
-
const context =
|
|
2307
|
+
const context = React28.useContext(FocusContext);
|
|
1667
2308
|
if (!context) {
|
|
1668
2309
|
throw new Error(
|
|
1669
2310
|
`\`${consumerName}\` must be used within \`FocusProvider\``
|
|
@@ -1690,32 +2331,32 @@ function StepperList(props) {
|
|
|
1690
2331
|
onFocus: onFocusProp,
|
|
1691
2332
|
onMouseDown: onMouseDownProp
|
|
1692
2333
|
});
|
|
1693
|
-
const [tabStopId, setTabStopId] =
|
|
1694
|
-
const [isTabbingBackOut, setIsTabbingBackOut] =
|
|
1695
|
-
const [focusableItemCount, setFocusableItemCount] =
|
|
1696
|
-
const isClickFocusRef =
|
|
1697
|
-
const itemsRef =
|
|
1698
|
-
const listRef =
|
|
2334
|
+
const [tabStopId, setTabStopId] = React28.useState(null);
|
|
2335
|
+
const [isTabbingBackOut, setIsTabbingBackOut] = React28.useState(false);
|
|
2336
|
+
const [focusableItemCount, setFocusableItemCount] = React28.useState(0);
|
|
2337
|
+
const isClickFocusRef = React28.useRef(false);
|
|
2338
|
+
const itemsRef = React28.useRef(/* @__PURE__ */ new Map());
|
|
2339
|
+
const listRef = React28.useRef(null);
|
|
1699
2340
|
const composedRef = useComposedRefs(ref, listRef);
|
|
1700
|
-
const onItemFocus =
|
|
2341
|
+
const onItemFocus = React28.useCallback((tabStopId2) => {
|
|
1701
2342
|
setTabStopId(tabStopId2);
|
|
1702
2343
|
}, []);
|
|
1703
|
-
const onItemShiftTab =
|
|
2344
|
+
const onItemShiftTab = React28.useCallback(() => {
|
|
1704
2345
|
setIsTabbingBackOut(true);
|
|
1705
2346
|
}, []);
|
|
1706
|
-
const onFocusableItemAdd =
|
|
2347
|
+
const onFocusableItemAdd = React28.useCallback(() => {
|
|
1707
2348
|
setFocusableItemCount((prevCount) => prevCount + 1);
|
|
1708
2349
|
}, []);
|
|
1709
|
-
const onFocusableItemRemove =
|
|
2350
|
+
const onFocusableItemRemove = React28.useCallback(() => {
|
|
1710
2351
|
setFocusableItemCount((prevCount) => prevCount - 1);
|
|
1711
2352
|
}, []);
|
|
1712
|
-
const onItemRegister =
|
|
2353
|
+
const onItemRegister = React28.useCallback((item) => {
|
|
1713
2354
|
itemsRef.current.set(item.id, item);
|
|
1714
2355
|
}, []);
|
|
1715
|
-
const onItemUnregister =
|
|
2356
|
+
const onItemUnregister = React28.useCallback((id) => {
|
|
1716
2357
|
itemsRef.current.delete(id);
|
|
1717
2358
|
}, []);
|
|
1718
|
-
const getItems =
|
|
2359
|
+
const getItems = React28.useCallback(() => {
|
|
1719
2360
|
return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
|
|
1720
2361
|
const elementA = a.ref.current;
|
|
1721
2362
|
const elementB = b.ref.current;
|
|
@@ -1730,7 +2371,7 @@ function StepperList(props) {
|
|
|
1730
2371
|
return 0;
|
|
1731
2372
|
});
|
|
1732
2373
|
}, []);
|
|
1733
|
-
const onBlur =
|
|
2374
|
+
const onBlur = React28.useCallback(
|
|
1734
2375
|
(event) => {
|
|
1735
2376
|
propsRef.current.onBlur?.(event);
|
|
1736
2377
|
if (event.defaultPrevented) return;
|
|
@@ -1738,7 +2379,7 @@ function StepperList(props) {
|
|
|
1738
2379
|
},
|
|
1739
2380
|
[propsRef]
|
|
1740
2381
|
);
|
|
1741
|
-
const onFocus =
|
|
2382
|
+
const onFocus = React28.useCallback(
|
|
1742
2383
|
(event) => {
|
|
1743
2384
|
propsRef.current.onFocus?.(event);
|
|
1744
2385
|
if (event.defaultPrevented) return;
|
|
@@ -1767,7 +2408,7 @@ function StepperList(props) {
|
|
|
1767
2408
|
},
|
|
1768
2409
|
[propsRef, isTabbingBackOut, currentValue, tabStopId]
|
|
1769
2410
|
);
|
|
1770
|
-
const onMouseDown =
|
|
2411
|
+
const onMouseDown = React28.useCallback(
|
|
1771
2412
|
(event) => {
|
|
1772
2413
|
propsRef.current.onMouseDown?.(event);
|
|
1773
2414
|
if (event.defaultPrevented) return;
|
|
@@ -1775,7 +2416,7 @@ function StepperList(props) {
|
|
|
1775
2416
|
},
|
|
1776
2417
|
[propsRef]
|
|
1777
2418
|
);
|
|
1778
|
-
const focusContextValue =
|
|
2419
|
+
const focusContextValue = React28.useMemo(
|
|
1779
2420
|
() => ({
|
|
1780
2421
|
tabStopId,
|
|
1781
2422
|
onItemFocus,
|
|
@@ -1798,7 +2439,7 @@ function StepperList(props) {
|
|
|
1798
2439
|
]
|
|
1799
2440
|
);
|
|
1800
2441
|
const ListPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1801
|
-
return /* @__PURE__ */
|
|
2442
|
+
return /* @__PURE__ */ jsx32(FocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx32(
|
|
1802
2443
|
ListPrimitive,
|
|
1803
2444
|
{
|
|
1804
2445
|
role: "tablist",
|
|
@@ -1809,7 +2450,7 @@ function StepperList(props) {
|
|
|
1809
2450
|
tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
|
|
1810
2451
|
...listProps,
|
|
1811
2452
|
ref: composedRef,
|
|
1812
|
-
className:
|
|
2453
|
+
className: cn31(
|
|
1813
2454
|
"flex outline-none",
|
|
1814
2455
|
orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start",
|
|
1815
2456
|
className
|
|
@@ -1821,11 +2462,11 @@ function StepperList(props) {
|
|
|
1821
2462
|
}
|
|
1822
2463
|
) });
|
|
1823
2464
|
}
|
|
1824
|
-
var StepperItemContext =
|
|
2465
|
+
var StepperItemContext = React28.createContext(
|
|
1825
2466
|
null
|
|
1826
2467
|
);
|
|
1827
2468
|
function useStepperItemContext(consumerName) {
|
|
1828
|
-
const context =
|
|
2469
|
+
const context = React28.useContext(StepperItemContext);
|
|
1829
2470
|
if (!context) {
|
|
1830
2471
|
throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
|
|
1831
2472
|
}
|
|
@@ -1858,7 +2499,7 @@ function StepperItem(props) {
|
|
|
1858
2499
|
const stepState = useStore((state) => state.steps.get(itemValue));
|
|
1859
2500
|
const steps = useStore((state) => state.steps);
|
|
1860
2501
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
1861
|
-
const itemContextValue =
|
|
2502
|
+
const itemContextValue = React28.useMemo(
|
|
1862
2503
|
() => ({
|
|
1863
2504
|
value: itemValue,
|
|
1864
2505
|
stepState
|
|
@@ -1866,7 +2507,7 @@ function StepperItem(props) {
|
|
|
1866
2507
|
[itemValue, stepState]
|
|
1867
2508
|
);
|
|
1868
2509
|
const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1869
|
-
return /* @__PURE__ */
|
|
2510
|
+
return /* @__PURE__ */ jsx32(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx32(
|
|
1870
2511
|
ItemPrimitive,
|
|
1871
2512
|
{
|
|
1872
2513
|
"data-disabled": stepState?.disabled ? "" : void 0,
|
|
@@ -1876,7 +2517,7 @@ function StepperItem(props) {
|
|
|
1876
2517
|
dir: context.dir,
|
|
1877
2518
|
...itemProps,
|
|
1878
2519
|
ref,
|
|
1879
|
-
className:
|
|
2520
|
+
className: cn31(
|
|
1880
2521
|
"relative flex not-last:flex-1 items-center",
|
|
1881
2522
|
orientation === "horizontal" ? "flex-row" : "flex-col",
|
|
1882
2523
|
className
|
|
@@ -1925,11 +2566,11 @@ function StepperTrigger(props) {
|
|
|
1925
2566
|
const isActive = value === itemValue;
|
|
1926
2567
|
const isTabStop = focusContext.tabStopId === triggerId;
|
|
1927
2568
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
1928
|
-
const triggerRef =
|
|
2569
|
+
const triggerRef = React28.useRef(null);
|
|
1929
2570
|
const composedRef = useComposedRefs(ref, triggerRef);
|
|
1930
|
-
const isArrowKeyPressedRef =
|
|
1931
|
-
const isMouseClickRef =
|
|
1932
|
-
|
|
2571
|
+
const isArrowKeyPressedRef = React28.useRef(false);
|
|
2572
|
+
const isMouseClickRef = React28.useRef(false);
|
|
2573
|
+
React28.useEffect(() => {
|
|
1933
2574
|
function onKeyDown2(event) {
|
|
1934
2575
|
if (ARROW_KEYS.includes(event.key)) {
|
|
1935
2576
|
isArrowKeyPressedRef.current = true;
|
|
@@ -1963,7 +2604,7 @@ function StepperTrigger(props) {
|
|
|
1963
2604
|
}
|
|
1964
2605
|
};
|
|
1965
2606
|
}, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
|
|
1966
|
-
const onClick =
|
|
2607
|
+
const onClick = React28.useCallback(
|
|
1967
2608
|
async (event) => {
|
|
1968
2609
|
propsRef.current.onClick?.(event);
|
|
1969
2610
|
if (event.defaultPrevented) return;
|
|
@@ -1984,7 +2625,7 @@ function StepperTrigger(props) {
|
|
|
1984
2625
|
propsRef
|
|
1985
2626
|
]
|
|
1986
2627
|
);
|
|
1987
|
-
const onFocus =
|
|
2628
|
+
const onFocus = React28.useCallback(
|
|
1988
2629
|
async (event) => {
|
|
1989
2630
|
propsRef.current.onFocus?.(event);
|
|
1990
2631
|
if (event.defaultPrevented) return;
|
|
@@ -2012,7 +2653,7 @@ function StepperTrigger(props) {
|
|
|
2012
2653
|
propsRef
|
|
2013
2654
|
]
|
|
2014
2655
|
);
|
|
2015
|
-
const onKeyDown =
|
|
2656
|
+
const onKeyDown = React28.useCallback(
|
|
2016
2657
|
async (event) => {
|
|
2017
2658
|
propsRef.current.onKeyDown?.(event);
|
|
2018
2659
|
if (event.defaultPrevented) return;
|
|
@@ -2067,7 +2708,7 @@ function StepperTrigger(props) {
|
|
|
2067
2708
|
steps
|
|
2068
2709
|
]
|
|
2069
2710
|
);
|
|
2070
|
-
const onMouseDown =
|
|
2711
|
+
const onMouseDown = React28.useCallback(
|
|
2071
2712
|
(event) => {
|
|
2072
2713
|
propsRef.current.onMouseDown?.(event);
|
|
2073
2714
|
if (event.defaultPrevented) return;
|
|
@@ -2081,7 +2722,7 @@ function StepperTrigger(props) {
|
|
|
2081
2722
|
[focusContext, triggerId, isDisabled, propsRef]
|
|
2082
2723
|
);
|
|
2083
2724
|
const TriggerPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2084
|
-
return /* @__PURE__ */
|
|
2725
|
+
return /* @__PURE__ */ jsx32(
|
|
2085
2726
|
TriggerPrimitive,
|
|
2086
2727
|
{
|
|
2087
2728
|
id: triggerId,
|
|
@@ -2100,7 +2741,7 @@ function StepperTrigger(props) {
|
|
|
2100
2741
|
tabIndex: isTabStop ? 0 : -1,
|
|
2101
2742
|
...triggerProps,
|
|
2102
2743
|
ref: composedRef,
|
|
2103
|
-
className:
|
|
2744
|
+
className: cn31(
|
|
2104
2745
|
"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
2746
|
"not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full",
|
|
2106
2747
|
className
|
|
@@ -2123,7 +2764,7 @@ function StepperIndicator(props) {
|
|
|
2123
2764
|
const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
|
|
2124
2765
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
2125
2766
|
const IndicatorPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
2126
|
-
return /* @__PURE__ */
|
|
2767
|
+
return /* @__PURE__ */ jsx32(
|
|
2127
2768
|
IndicatorPrimitive,
|
|
2128
2769
|
{
|
|
2129
2770
|
"data-state": dataState,
|
|
@@ -2131,11 +2772,11 @@ function StepperIndicator(props) {
|
|
|
2131
2772
|
dir: context.dir,
|
|
2132
2773
|
...indicatorProps,
|
|
2133
2774
|
ref,
|
|
2134
|
-
className:
|
|
2775
|
+
className: cn31(
|
|
2135
2776
|
"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
2777
|
className
|
|
2137
2778
|
),
|
|
2138
|
-
children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */
|
|
2779
|
+
children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */ jsx32(Check4, { className: "size-4" }) : stepPosition
|
|
2139
2780
|
}
|
|
2140
2781
|
);
|
|
2141
2782
|
}
|
|
@@ -2163,7 +2804,7 @@ function StepperSeparator(props) {
|
|
|
2163
2804
|
"separator"
|
|
2164
2805
|
);
|
|
2165
2806
|
const SeparatorPrimitive2 = asChild ? SlotPrimitive.Slot : "div";
|
|
2166
|
-
return /* @__PURE__ */
|
|
2807
|
+
return /* @__PURE__ */ jsx32(
|
|
2167
2808
|
SeparatorPrimitive2,
|
|
2168
2809
|
{
|
|
2169
2810
|
role: "separator",
|
|
@@ -2175,7 +2816,7 @@ function StepperSeparator(props) {
|
|
|
2175
2816
|
dir: context.dir,
|
|
2176
2817
|
...separatorProps,
|
|
2177
2818
|
ref,
|
|
2178
|
-
className:
|
|
2819
|
+
className: cn31(
|
|
2179
2820
|
"bg-border transition-colors data-[state=active]:bg-primary data-[state=completed]:bg-primary",
|
|
2180
2821
|
orientation === "horizontal" ? "h-px flex-1" : "h-10 w-px",
|
|
2181
2822
|
className
|
|
@@ -2189,7 +2830,7 @@ function StepperTitle(props) {
|
|
|
2189
2830
|
const itemContext = useStepperItemContext(TITLE_NAME);
|
|
2190
2831
|
const titleId = getId(context.rootId, "title", itemContext.value);
|
|
2191
2832
|
const TitlePrimitive = asChild ? SlotPrimitive.Slot : "span";
|
|
2192
|
-
return /* @__PURE__ */
|
|
2833
|
+
return /* @__PURE__ */ jsx32(
|
|
2193
2834
|
TitlePrimitive,
|
|
2194
2835
|
{
|
|
2195
2836
|
id: titleId,
|
|
@@ -2197,7 +2838,7 @@ function StepperTitle(props) {
|
|
|
2197
2838
|
dir: context.dir,
|
|
2198
2839
|
...titleProps,
|
|
2199
2840
|
ref,
|
|
2200
|
-
className:
|
|
2841
|
+
className: cn31("font-medium text-sm", className)
|
|
2201
2842
|
}
|
|
2202
2843
|
);
|
|
2203
2844
|
}
|
|
@@ -2207,7 +2848,7 @@ function StepperDescription(props) {
|
|
|
2207
2848
|
const itemContext = useStepperItemContext(DESCRIPTION_NAME);
|
|
2208
2849
|
const descriptionId = getId(context.rootId, "description", itemContext.value);
|
|
2209
2850
|
const DescriptionPrimitive = asChild ? SlotPrimitive.Slot : "span";
|
|
2210
|
-
return /* @__PURE__ */
|
|
2851
|
+
return /* @__PURE__ */ jsx32(
|
|
2211
2852
|
DescriptionPrimitive,
|
|
2212
2853
|
{
|
|
2213
2854
|
id: descriptionId,
|
|
@@ -2215,7 +2856,7 @@ function StepperDescription(props) {
|
|
|
2215
2856
|
dir: context.dir,
|
|
2216
2857
|
...descriptionProps,
|
|
2217
2858
|
ref,
|
|
2218
|
-
className:
|
|
2859
|
+
className: cn31("text-muted-foreground text-xs", className)
|
|
2219
2860
|
}
|
|
2220
2861
|
);
|
|
2221
2862
|
}
|
|
@@ -2234,7 +2875,7 @@ function StepperContent(props) {
|
|
|
2234
2875
|
const triggerId = getId(context.rootId, "trigger", valueProp);
|
|
2235
2876
|
if (valueProp !== value && !forceMount) return null;
|
|
2236
2877
|
const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
2237
|
-
return /* @__PURE__ */
|
|
2878
|
+
return /* @__PURE__ */ jsx32(
|
|
2238
2879
|
ContentPrimitive,
|
|
2239
2880
|
{
|
|
2240
2881
|
id: contentId,
|
|
@@ -2244,7 +2885,7 @@ function StepperContent(props) {
|
|
|
2244
2885
|
dir: context.dir,
|
|
2245
2886
|
...contentProps,
|
|
2246
2887
|
ref,
|
|
2247
|
-
className:
|
|
2888
|
+
className: cn31("flex-1 outline-none", className)
|
|
2248
2889
|
}
|
|
2249
2890
|
);
|
|
2250
2891
|
}
|
|
@@ -2259,7 +2900,7 @@ function StepperPrev(props) {
|
|
|
2259
2900
|
const stepKeys = Array.from(steps.keys());
|
|
2260
2901
|
const currentIndex = stepKeys.length > 0 ? stepKeys.indexOf(value ?? "") : -1;
|
|
2261
2902
|
const isDisabled = disabled || currentIndex <= 0;
|
|
2262
|
-
const onClick =
|
|
2903
|
+
const onClick = React28.useCallback(
|
|
2263
2904
|
async (event) => {
|
|
2264
2905
|
propsRef.current.onClick?.(event);
|
|
2265
2906
|
if (event.defaultPrevented || isDisabled) return;
|
|
@@ -2272,7 +2913,7 @@ function StepperPrev(props) {
|
|
|
2272
2913
|
[propsRef, isDisabled, currentIndex, stepKeys, store]
|
|
2273
2914
|
);
|
|
2274
2915
|
const PrevPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2275
|
-
return /* @__PURE__ */
|
|
2916
|
+
return /* @__PURE__ */ jsx32(
|
|
2276
2917
|
PrevPrimitive,
|
|
2277
2918
|
{
|
|
2278
2919
|
type: "button",
|
|
@@ -2294,7 +2935,7 @@ function StepperNext(props) {
|
|
|
2294
2935
|
const stepKeys = Array.from(steps.keys());
|
|
2295
2936
|
const currentIndex = stepKeys.length > 0 ? stepKeys.indexOf(value ?? "") : -1;
|
|
2296
2937
|
const isDisabled = disabled || stepKeys.length === 0 || currentIndex >= stepKeys.length - 1;
|
|
2297
|
-
const onClick =
|
|
2938
|
+
const onClick = React28.useCallback(
|
|
2298
2939
|
async (event) => {
|
|
2299
2940
|
propsRef.current.onClick?.(event);
|
|
2300
2941
|
if (event.defaultPrevented || isDisabled) return;
|
|
@@ -2307,7 +2948,7 @@ function StepperNext(props) {
|
|
|
2307
2948
|
[propsRef, isDisabled, currentIndex, stepKeys, store]
|
|
2308
2949
|
);
|
|
2309
2950
|
const NextPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2310
|
-
return /* @__PURE__ */
|
|
2951
|
+
return /* @__PURE__ */ jsx32(
|
|
2311
2952
|
NextPrimitive,
|
|
2312
2953
|
{
|
|
2313
2954
|
type: "button",
|
|
@@ -2322,18 +2963,18 @@ function StepperNext(props) {
|
|
|
2322
2963
|
// src/EntityTable/EntityTable.tsx
|
|
2323
2964
|
import {
|
|
2324
2965
|
useCallback as useCallback2,
|
|
2325
|
-
useEffect as
|
|
2326
|
-
useMemo as
|
|
2966
|
+
useEffect as useEffect6,
|
|
2967
|
+
useMemo as useMemo5,
|
|
2327
2968
|
useRef as useRef4,
|
|
2328
|
-
useState as
|
|
2969
|
+
useState as useState5
|
|
2329
2970
|
} from "react";
|
|
2330
2971
|
import {
|
|
2331
2972
|
flexRender,
|
|
2332
2973
|
getCoreRowModel,
|
|
2333
2974
|
useReactTable
|
|
2334
2975
|
} from "@tanstack/react-table";
|
|
2335
|
-
import { ChevronRight as
|
|
2336
|
-
import { cn as
|
|
2976
|
+
import { ChevronRight as ChevronRight3 } from "lucide-react";
|
|
2977
|
+
import { cn as cn32 } from "@petrarca/sonnet-core";
|
|
2337
2978
|
import { useComponentDefaults } from "@petrarca/sonnet-core/config";
|
|
2338
2979
|
|
|
2339
2980
|
// src/EntityTable/tableSchema/mergeUiSchema.ts
|
|
@@ -2364,12 +3005,12 @@ function mergeColumnConfig(key, property, uiSchema) {
|
|
|
2364
3005
|
}
|
|
2365
3006
|
|
|
2366
3007
|
// src/EntityTable/tableSchema/cellRegistry.ts
|
|
2367
|
-
import
|
|
3008
|
+
import React29 from "react";
|
|
2368
3009
|
import { warnLog } from "@petrarca/sonnet-core";
|
|
2369
3010
|
|
|
2370
3011
|
// src/EntityTable/tableSchema/cellRenderers.tsx
|
|
2371
3012
|
import { formatDate, formatDateTime } from "@petrarca/sonnet-core";
|
|
2372
|
-
import { Fragment, jsx as
|
|
3013
|
+
import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
2373
3014
|
function resolveValue(value, options) {
|
|
2374
3015
|
const key = options.valueKey;
|
|
2375
3016
|
if (key && value != null && typeof value === "object") {
|
|
@@ -2385,41 +3026,41 @@ function TextCell({
|
|
|
2385
3026
|
options
|
|
2386
3027
|
}) {
|
|
2387
3028
|
const text = resolveValue(value, options);
|
|
2388
|
-
return /* @__PURE__ */
|
|
3029
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("", options), children: text == null ? "\u2014" : String(text) });
|
|
2389
3030
|
}
|
|
2390
3031
|
function MutedCell({
|
|
2391
3032
|
value,
|
|
2392
3033
|
options
|
|
2393
3034
|
}) {
|
|
2394
3035
|
const text = resolveValue(value, options);
|
|
2395
|
-
return /* @__PURE__ */
|
|
3036
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("text-muted-foreground", options), children: text == null ? "\u2014" : String(text) });
|
|
2396
3037
|
}
|
|
2397
3038
|
function BoldCell({
|
|
2398
3039
|
value,
|
|
2399
3040
|
options
|
|
2400
3041
|
}) {
|
|
2401
3042
|
const text = resolveValue(value, options);
|
|
2402
|
-
return /* @__PURE__ */
|
|
3043
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("font-medium", options), children: text == null ? "\u2014" : String(text) });
|
|
2403
3044
|
}
|
|
2404
3045
|
function CodeCell({
|
|
2405
3046
|
value,
|
|
2406
3047
|
options
|
|
2407
3048
|
}) {
|
|
2408
3049
|
const text = resolveValue(value, options);
|
|
2409
|
-
return /* @__PURE__ */
|
|
3050
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("font-mono text-xs", options), children: text == null ? "\u2014" : String(text) });
|
|
2410
3051
|
}
|
|
2411
3052
|
function BadgeCell({
|
|
2412
3053
|
value,
|
|
2413
3054
|
options
|
|
2414
3055
|
}) {
|
|
2415
3056
|
if (value == null)
|
|
2416
|
-
return /* @__PURE__ */
|
|
3057
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2417
3058
|
const key = String(value);
|
|
2418
3059
|
const colors = options.colors;
|
|
2419
3060
|
const labels = options.labels;
|
|
2420
3061
|
const color = colors?.[key];
|
|
2421
3062
|
const label = labels?.[key] ?? key;
|
|
2422
|
-
return /* @__PURE__ */
|
|
3063
|
+
return /* @__PURE__ */ jsx33(Badge, { badgeColor: color, children: label });
|
|
2423
3064
|
}
|
|
2424
3065
|
function conditionHolds(value, when) {
|
|
2425
3066
|
const isEmpty = value == null || value === "";
|
|
@@ -2436,12 +3077,12 @@ function conditionHolds(value, when) {
|
|
|
2436
3077
|
}
|
|
2437
3078
|
function renderConditionalFallback(value, fallback) {
|
|
2438
3079
|
if (fallback === "dash" || value == null || value === "") {
|
|
2439
|
-
return /* @__PURE__ */
|
|
3080
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2440
3081
|
}
|
|
2441
3082
|
if (fallback === "muted-value") {
|
|
2442
|
-
return /* @__PURE__ */
|
|
3083
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: String(value) });
|
|
2443
3084
|
}
|
|
2444
|
-
return /* @__PURE__ */
|
|
3085
|
+
return /* @__PURE__ */ jsx33("span", { children: String(value) });
|
|
2445
3086
|
}
|
|
2446
3087
|
function ConditionalBadgeCell({
|
|
2447
3088
|
value,
|
|
@@ -2452,7 +3093,7 @@ function ConditionalBadgeCell({
|
|
|
2452
3093
|
const fallback = options.fallback ?? "dash";
|
|
2453
3094
|
if (conditionHolds(value, when)) {
|
|
2454
3095
|
const label = options.label != null ? String(options.label) : String(value ?? "");
|
|
2455
|
-
return /* @__PURE__ */
|
|
3096
|
+
return /* @__PURE__ */ jsx33(Badge, { variant, children: label });
|
|
2456
3097
|
}
|
|
2457
3098
|
return renderConditionalFallback(value, fallback);
|
|
2458
3099
|
}
|
|
@@ -2460,20 +3101,20 @@ function DateCell({
|
|
|
2460
3101
|
value,
|
|
2461
3102
|
options
|
|
2462
3103
|
}) {
|
|
2463
|
-
return /* @__PURE__ */
|
|
3104
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("text-muted-foreground", options), children: formatDate(value) });
|
|
2464
3105
|
}
|
|
2465
3106
|
function DateTimeCell({
|
|
2466
3107
|
value,
|
|
2467
3108
|
options
|
|
2468
3109
|
}) {
|
|
2469
|
-
return /* @__PURE__ */
|
|
3110
|
+
return /* @__PURE__ */ jsx33("span", { className: cx("text-muted-foreground", options), children: formatDateTime(value) });
|
|
2470
3111
|
}
|
|
2471
3112
|
function BooleanCell({ value }) {
|
|
2472
|
-
return /* @__PURE__ */
|
|
3113
|
+
return /* @__PURE__ */ jsx33("span", { className: value ? "text-green-600" : "text-muted-foreground", children: value ? "Yes" : "No" });
|
|
2473
3114
|
}
|
|
2474
3115
|
function NumberCell({ value }) {
|
|
2475
3116
|
const text = value == null ? "\u2014" : String(value);
|
|
2476
|
-
return /* @__PURE__ */
|
|
3117
|
+
return /* @__PURE__ */ jsx33("span", { className: "tabular-nums", children: text });
|
|
2477
3118
|
}
|
|
2478
3119
|
function TruncateCell({
|
|
2479
3120
|
value,
|
|
@@ -2481,7 +3122,7 @@ function TruncateCell({
|
|
|
2481
3122
|
}) {
|
|
2482
3123
|
const resolved = resolveValue(value, options);
|
|
2483
3124
|
const text = resolved == null ? "\u2014" : String(resolved);
|
|
2484
|
-
return /* @__PURE__ */
|
|
3125
|
+
return /* @__PURE__ */ jsx33("span", { className: "block truncate max-w-xs", title: text, children: text });
|
|
2485
3126
|
}
|
|
2486
3127
|
function OverflowListCell({
|
|
2487
3128
|
value,
|
|
@@ -2489,20 +3130,20 @@ function OverflowListCell({
|
|
|
2489
3130
|
}) {
|
|
2490
3131
|
const items = Array.isArray(value) ? value : [];
|
|
2491
3132
|
if (items.length === 0)
|
|
2492
|
-
return /* @__PURE__ */
|
|
3133
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2493
3134
|
const displayKey = options.displayKey;
|
|
2494
3135
|
const fallbackKey = options.fallbackKey;
|
|
2495
3136
|
const prefixKey = options.prefixKey;
|
|
2496
3137
|
const first = items[0];
|
|
2497
3138
|
const label = displayKey && first[displayKey] || fallbackKey && first[fallbackKey] || "";
|
|
2498
|
-
return /* @__PURE__ */
|
|
2499
|
-
prefixKey && /* @__PURE__ */
|
|
3139
|
+
return /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
3140
|
+
prefixKey && /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground", children: [
|
|
2500
3141
|
String(first[prefixKey]),
|
|
2501
3142
|
":",
|
|
2502
3143
|
" "
|
|
2503
3144
|
] }),
|
|
2504
3145
|
label,
|
|
2505
|
-
items.length > 1 && /* @__PURE__ */
|
|
3146
|
+
items.length > 1 && /* @__PURE__ */ jsxs12("span", { className: "text-muted-foreground ml-1", children: [
|
|
2506
3147
|
"+",
|
|
2507
3148
|
items.length - 1
|
|
2508
3149
|
] })
|
|
@@ -2514,8 +3155,8 @@ function JoinCell({
|
|
|
2514
3155
|
}) {
|
|
2515
3156
|
const sep = options.separator ?? ", ";
|
|
2516
3157
|
if (!Array.isArray(value) || value.length === 0)
|
|
2517
|
-
return /* @__PURE__ */
|
|
2518
|
-
return /* @__PURE__ */
|
|
3158
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
3159
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground", children: value.join(sep) });
|
|
2519
3160
|
}
|
|
2520
3161
|
|
|
2521
3162
|
// src/EntityTable/tableSchema/cellRegistry.ts
|
|
@@ -2547,7 +3188,7 @@ function resolveCellRenderer2(name, localRenderers) {
|
|
|
2547
3188
|
return localRenderers?.[name] ?? CELL_RENDERERS[name] ?? TextCell;
|
|
2548
3189
|
}
|
|
2549
3190
|
function createRenderer(render) {
|
|
2550
|
-
return ({ row, options }) =>
|
|
3191
|
+
return ({ row, options }) => React29.createElement(React29.Fragment, null, render(row, options));
|
|
2551
3192
|
}
|
|
2552
3193
|
function validateRendererNames(renderers) {
|
|
2553
3194
|
for (const name of Object.keys(renderers)) {
|
|
@@ -2588,7 +3229,7 @@ function keyToLabel(key) {
|
|
|
2588
3229
|
}
|
|
2589
3230
|
|
|
2590
3231
|
// src/EntityTable/EntityTable.tsx
|
|
2591
|
-
import { jsx as
|
|
3232
|
+
import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
2592
3233
|
var coreRowModel = getCoreRowModel();
|
|
2593
3234
|
function resolveTableDefaults(props) {
|
|
2594
3235
|
return {
|
|
@@ -2625,7 +3266,7 @@ function buildColumnDefs(resolved, localRenderers) {
|
|
|
2625
3266
|
cell: ({
|
|
2626
3267
|
getValue,
|
|
2627
3268
|
row
|
|
2628
|
-
}) => /* @__PURE__ */
|
|
3269
|
+
}) => /* @__PURE__ */ jsx34(
|
|
2629
3270
|
Renderer,
|
|
2630
3271
|
{
|
|
2631
3272
|
value: getValue(),
|
|
@@ -2635,7 +3276,10 @@ function buildColumnDefs(resolved, localRenderers) {
|
|
|
2635
3276
|
)
|
|
2636
3277
|
};
|
|
2637
3278
|
if (col.width !== void 0) colDef.size = col.width;
|
|
2638
|
-
if (col.minWidth !== void 0)
|
|
3279
|
+
if (col.minWidth !== void 0) {
|
|
3280
|
+
colDef.minSize = col.minWidth;
|
|
3281
|
+
colDef.meta = { ...colDef.meta, minWidth: col.minWidth };
|
|
3282
|
+
}
|
|
2639
3283
|
return colDef;
|
|
2640
3284
|
});
|
|
2641
3285
|
}
|
|
@@ -2643,7 +3287,7 @@ function buildSelectColumn() {
|
|
|
2643
3287
|
return {
|
|
2644
3288
|
id: "_select",
|
|
2645
3289
|
size: 40,
|
|
2646
|
-
header: ({ table: t }) => /* @__PURE__ */
|
|
3290
|
+
header: ({ table: t }) => /* @__PURE__ */ jsx34(
|
|
2647
3291
|
Checkbox,
|
|
2648
3292
|
{
|
|
2649
3293
|
checked: t.getIsAllPageRowsSelected() || (t.getIsSomePageRowsSelected() ? "indeterminate" : false),
|
|
@@ -2651,7 +3295,7 @@ function buildSelectColumn() {
|
|
|
2651
3295
|
"aria-label": "Select all"
|
|
2652
3296
|
}
|
|
2653
3297
|
),
|
|
2654
|
-
cell: ({ row }) => /* @__PURE__ */
|
|
3298
|
+
cell: ({ row }) => /* @__PURE__ */ jsx34(
|
|
2655
3299
|
Checkbox,
|
|
2656
3300
|
{
|
|
2657
3301
|
checked: row.getIsSelected(),
|
|
@@ -2670,12 +3314,13 @@ function buildTableOptions(opts) {
|
|
|
2670
3314
|
state: opts.tableState
|
|
2671
3315
|
};
|
|
2672
3316
|
const selectionOpts = opts.selectionMode ? { enableRowSelection: true, onRowSelectionChange: opts.setRowSelection } : {};
|
|
3317
|
+
const rowIdOpts = opts.getRowId ? { getRowId: (row) => opts.getRowId(row) } : {};
|
|
2673
3318
|
const paginationOpts = opts.isPaginated ? {
|
|
2674
3319
|
manualPagination: true,
|
|
2675
3320
|
rowCount: opts.data?.meta.total ?? 0,
|
|
2676
3321
|
onPaginationChange: opts.onPaginationChange
|
|
2677
3322
|
} : {};
|
|
2678
|
-
return { ...base, ...selectionOpts, ...paginationOpts };
|
|
3323
|
+
return { ...base, ...selectionOpts, ...paginationOpts, ...rowIdOpts };
|
|
2679
3324
|
}
|
|
2680
3325
|
function useEntityTableState(props, selectionMode) {
|
|
2681
3326
|
const {
|
|
@@ -2685,46 +3330,50 @@ function useEntityTableState(props, selectionMode) {
|
|
|
2685
3330
|
data,
|
|
2686
3331
|
pagination,
|
|
2687
3332
|
onPaginationChange,
|
|
2688
|
-
onSelectionChange
|
|
3333
|
+
onSelectionChange,
|
|
3334
|
+
getRowId
|
|
2689
3335
|
} = props;
|
|
2690
3336
|
const isPaginated = !!(pagination && onPaginationChange);
|
|
2691
|
-
const dataRows =
|
|
3337
|
+
const dataRows = useMemo5(() => data?.data ?? [], [data]);
|
|
2692
3338
|
const total = data?.meta.total;
|
|
2693
3339
|
const pageIndex = pagination?.pageIndex ?? 0;
|
|
2694
3340
|
const pageSize = pagination?.pageSize ?? 1;
|
|
2695
|
-
|
|
3341
|
+
useEffect6(() => {
|
|
2696
3342
|
if (!isPaginated || total == null || !onPaginationChange) return;
|
|
2697
3343
|
const maxPage = Math.max(0, Math.ceil(total / pageSize) - 1);
|
|
2698
3344
|
if (pageIndex > maxPage) {
|
|
2699
3345
|
onPaginationChange((prev) => ({ ...prev, pageIndex: maxPage }));
|
|
2700
3346
|
}
|
|
2701
3347
|
}, [total, isPaginated, pageIndex, pageSize, onPaginationChange]);
|
|
2702
|
-
const [rowSelection, setRowSelection] =
|
|
2703
|
-
|
|
3348
|
+
const [rowSelection, setRowSelection] = useState5({});
|
|
3349
|
+
const keyedById = !!getRowId;
|
|
3350
|
+
useEffect6(() => {
|
|
3351
|
+
if (keyedById) return;
|
|
2704
3352
|
setRowSelection({});
|
|
2705
|
-
}, [data]);
|
|
2706
|
-
const [activeRowIndex, setActiveRowIndex] =
|
|
3353
|
+
}, [data, keyedById]);
|
|
3354
|
+
const [activeRowIndex, setActiveRowIndex] = useState5(-1);
|
|
2707
3355
|
const containerRef = useRef4(null);
|
|
2708
|
-
const dataColumns =
|
|
3356
|
+
const dataColumns = useMemo5(() => {
|
|
2709
3357
|
if (renderers) validateRendererNames(renderers);
|
|
2710
3358
|
return buildColumnDefs(resolveColumns(schema, uiSchema), renderers);
|
|
2711
3359
|
}, [schema, uiSchema, renderers]);
|
|
2712
|
-
const selectColumn =
|
|
3360
|
+
const selectColumn = useMemo5(
|
|
2713
3361
|
() => selectionMode ? buildSelectColumn() : null,
|
|
2714
3362
|
[selectionMode]
|
|
2715
3363
|
);
|
|
2716
|
-
const columns =
|
|
3364
|
+
const columns = useMemo5(
|
|
2717
3365
|
() => selectColumn ? [selectColumn, ...dataColumns] : dataColumns,
|
|
2718
3366
|
[selectColumn, dataColumns]
|
|
2719
3367
|
);
|
|
2720
3368
|
const onSelectionChangeRef = useRef4(onSelectionChange);
|
|
2721
3369
|
onSelectionChangeRef.current = onSelectionChange;
|
|
2722
|
-
|
|
3370
|
+
useEffect6(() => {
|
|
2723
3371
|
if (!selectionMode || !onSelectionChangeRef.current) return;
|
|
2724
|
-
const
|
|
3372
|
+
const keys = Object.keys(rowSelection).filter((k) => rowSelection[k]);
|
|
3373
|
+
const selected = getRowId ? dataRows.filter((row) => keys.includes(getRowId(row))) : keys.map(Number).map((i) => dataRows[i]).filter((r) => r !== void 0);
|
|
2725
3374
|
onSelectionChangeRef.current(selected);
|
|
2726
|
-
}, [rowSelection, selectionMode, dataRows]);
|
|
2727
|
-
const tableState =
|
|
3375
|
+
}, [rowSelection, selectionMode, dataRows, getRowId]);
|
|
3376
|
+
const tableState = useMemo5(
|
|
2728
3377
|
() => ({
|
|
2729
3378
|
...isPaginated ? { pagination } : {},
|
|
2730
3379
|
...selectionMode ? { rowSelection } : {}
|
|
@@ -2739,10 +3388,11 @@ function useEntityTableState(props, selectionMode) {
|
|
|
2739
3388
|
setRowSelection,
|
|
2740
3389
|
isPaginated,
|
|
2741
3390
|
data,
|
|
2742
|
-
onPaginationChange
|
|
3391
|
+
onPaginationChange,
|
|
3392
|
+
getRowId
|
|
2743
3393
|
});
|
|
2744
3394
|
const table = useReactTable(tableOptions);
|
|
2745
|
-
|
|
3395
|
+
useEffect6(() => {
|
|
2746
3396
|
if (activeRowIndex < 0 || !containerRef.current) return;
|
|
2747
3397
|
const rows = containerRef.current.querySelectorAll("tbody tr");
|
|
2748
3398
|
rows[activeRowIndex]?.scrollIntoView({ block: "nearest" });
|
|
@@ -2772,7 +3422,7 @@ function useActiveRowEvent(args) {
|
|
|
2772
3422
|
const singleActiveMode = !selectionMode && rowActivation === "double-click" && !!onRowClick;
|
|
2773
3423
|
const onChangeRef = useRef4(onActiveRowChange);
|
|
2774
3424
|
onChangeRef.current = onActiveRowChange;
|
|
2775
|
-
|
|
3425
|
+
useEffect6(() => {
|
|
2776
3426
|
if (!singleActiveMode) return;
|
|
2777
3427
|
const row = activeRowIndex >= 0 ? dataRows[activeRowIndex] ?? null : null;
|
|
2778
3428
|
onChangeRef.current?.(row);
|
|
@@ -2817,6 +3467,15 @@ function useTableKeyboard(table, activeRowIndex, setActiveRowIndex, selectionMod
|
|
|
2817
3467
|
[activeRowIndex, onRowClick, selectionMode, table, setActiveRowIndex]
|
|
2818
3468
|
);
|
|
2819
3469
|
}
|
|
3470
|
+
function headerWidthStyle(columnDef) {
|
|
3471
|
+
const size = columnDef.size;
|
|
3472
|
+
const minWidth = columnDef.meta?.minWidth;
|
|
3473
|
+
if (size === void 0 && minWidth === void 0) return void 0;
|
|
3474
|
+
return {
|
|
3475
|
+
...size !== void 0 && { width: size },
|
|
3476
|
+
...minWidth !== void 0 && { minWidth }
|
|
3477
|
+
};
|
|
3478
|
+
}
|
|
2820
3479
|
function handleEnterKey(e, tableRows, selectionMode, activeRowIndex, onRowClick) {
|
|
2821
3480
|
e.preventDefault();
|
|
2822
3481
|
if (selectionMode || activeRowIndex < 0 || !onRowClick) return;
|
|
@@ -2828,6 +3487,9 @@ function handleSpaceKey(e, tableRows, selectionMode, activeRowIndex) {
|
|
|
2828
3487
|
e.preventDefault();
|
|
2829
3488
|
tableRows[activeRowIndex]?.toggleSelected();
|
|
2830
3489
|
}
|
|
3490
|
+
function isKeyboardOperable(selectionMode, onRowClick) {
|
|
3491
|
+
return selectionMode || !!onRowClick;
|
|
3492
|
+
}
|
|
2831
3493
|
function resolveTrailingCols(rowActions, onRowClick, selectionMode, showChevron) {
|
|
2832
3494
|
const hasRowActions = !!(rowActions && rowActions.length > 0);
|
|
2833
3495
|
const hasChevron = !!(onRowClick && showChevron && !selectionMode && !hasRowActions);
|
|
@@ -2848,7 +3510,7 @@ function StatusRows({
|
|
|
2848
3510
|
colCount
|
|
2849
3511
|
}) {
|
|
2850
3512
|
if (isLoading) {
|
|
2851
|
-
return /* @__PURE__ */
|
|
3513
|
+
return /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34(
|
|
2852
3514
|
"td",
|
|
2853
3515
|
{
|
|
2854
3516
|
colSpan: colCount,
|
|
@@ -2858,7 +3520,7 @@ function StatusRows({
|
|
|
2858
3520
|
) });
|
|
2859
3521
|
}
|
|
2860
3522
|
if (isError) {
|
|
2861
|
-
return /* @__PURE__ */
|
|
3523
|
+
return /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34(
|
|
2862
3524
|
"td",
|
|
2863
3525
|
{
|
|
2864
3526
|
colSpan: colCount,
|
|
@@ -2868,7 +3530,7 @@ function StatusRows({
|
|
|
2868
3530
|
) });
|
|
2869
3531
|
}
|
|
2870
3532
|
if (isEmpty) {
|
|
2871
|
-
return /* @__PURE__ */
|
|
3533
|
+
return /* @__PURE__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34(
|
|
2872
3534
|
"td",
|
|
2873
3535
|
{
|
|
2874
3536
|
colSpan: colCount,
|
|
@@ -2888,7 +3550,7 @@ function RowActionCell({
|
|
|
2888
3550
|
actions,
|
|
2889
3551
|
rowOriginal
|
|
2890
3552
|
}) {
|
|
2891
|
-
return /* @__PURE__ */
|
|
3553
|
+
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
3554
|
ActionButton,
|
|
2893
3555
|
{
|
|
2894
3556
|
action,
|
|
@@ -2904,8 +3566,8 @@ function ActionButton({
|
|
|
2904
3566
|
const isHidden = action.hidden?.(rowOriginal);
|
|
2905
3567
|
if (isHidden) return null;
|
|
2906
3568
|
const isDisabled = action.disabled?.(rowOriginal);
|
|
2907
|
-
const
|
|
2908
|
-
return /* @__PURE__ */
|
|
3569
|
+
const Icon2 = action.icon;
|
|
3570
|
+
return /* @__PURE__ */ jsx34(
|
|
2909
3571
|
"button",
|
|
2910
3572
|
{
|
|
2911
3573
|
title: action.label,
|
|
@@ -2914,12 +3576,12 @@ function ActionButton({
|
|
|
2914
3576
|
e.stopPropagation();
|
|
2915
3577
|
action.onClick(rowOriginal);
|
|
2916
3578
|
},
|
|
2917
|
-
className:
|
|
3579
|
+
className: cn32(
|
|
2918
3580
|
"inline-flex items-center justify-center h-7 w-7 rounded-md transition-colors",
|
|
2919
3581
|
action.variant === "destructive" ? "text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-accent",
|
|
2920
3582
|
isDisabled ? "opacity-30 cursor-not-allowed group-hover/row:opacity-30" : "opacity-0 group-hover/row:opacity-100 focus:opacity-100"
|
|
2921
3583
|
),
|
|
2922
|
-
children:
|
|
3584
|
+
children: Icon2 ? /* @__PURE__ */ jsx34(Icon2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx34("span", { className: "text-xs", children: action.label })
|
|
2923
3585
|
},
|
|
2924
3586
|
action.label
|
|
2925
3587
|
);
|
|
@@ -2930,7 +3592,7 @@ function ChevronCell({
|
|
|
2930
3592
|
onRowClick
|
|
2931
3593
|
}) {
|
|
2932
3594
|
const asButton = rowActivation === "double-click" && !!onRowClick;
|
|
2933
|
-
return /* @__PURE__ */
|
|
3595
|
+
return /* @__PURE__ */ jsx34("td", { className: "px-4 py-3 w-10", children: asButton ? /* @__PURE__ */ jsx34(
|
|
2934
3596
|
"button",
|
|
2935
3597
|
{
|
|
2936
3598
|
type: "button",
|
|
@@ -2940,12 +3602,12 @@ function ChevronCell({
|
|
|
2940
3602
|
onRowClick(rowOriginal);
|
|
2941
3603
|
},
|
|
2942
3604
|
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__ */
|
|
3605
|
+
children: /* @__PURE__ */ jsx34(ChevronRight3, { className: "h-4 w-4" })
|
|
2944
3606
|
}
|
|
2945
|
-
) : /* @__PURE__ */
|
|
3607
|
+
) : /* @__PURE__ */ jsx34(ChevronRight3, { className: "h-4 w-4 text-muted-foreground" }) });
|
|
2946
3608
|
}
|
|
2947
3609
|
function rowClassName(row, isActive, selectionMode, singleClickSelects, onRowClick) {
|
|
2948
|
-
return
|
|
3610
|
+
return cn32(
|
|
2949
3611
|
"border-b last:border-b-0 transition-colors group/row",
|
|
2950
3612
|
onRowClick && !selectionMode && "hover:bg-accent/50 cursor-pointer",
|
|
2951
3613
|
selectionMode && "cursor-default",
|
|
@@ -2970,7 +3632,7 @@ function DataRow({
|
|
|
2970
3632
|
}) {
|
|
2971
3633
|
const singleClickSelects = !selectionMode && rowActivation === "double-click" && !!onRowClick;
|
|
2972
3634
|
const isActive = index === activeRowIndex;
|
|
2973
|
-
return /* @__PURE__ */
|
|
3635
|
+
return /* @__PURE__ */ jsxs13(
|
|
2974
3636
|
"tr",
|
|
2975
3637
|
{
|
|
2976
3638
|
onClick: () => {
|
|
@@ -2996,9 +3658,9 @@ function DataRow({
|
|
|
2996
3658
|
onRowClick
|
|
2997
3659
|
),
|
|
2998
3660
|
children: [
|
|
2999
|
-
row.getVisibleCells().map((cell) => /* @__PURE__ */
|
|
3000
|
-
hasRowActions && /* @__PURE__ */
|
|
3001
|
-
hasChevron && /* @__PURE__ */
|
|
3661
|
+
row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx34("td", { className: "px-4 py-3", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)),
|
|
3662
|
+
hasRowActions && /* @__PURE__ */ jsx34(RowActionCell, { actions: rowActions, rowOriginal: row.original }),
|
|
3663
|
+
hasChevron && /* @__PURE__ */ jsx34(
|
|
3002
3664
|
ChevronCell,
|
|
3003
3665
|
{
|
|
3004
3666
|
rowOriginal: row.original,
|
|
@@ -3033,9 +3695,9 @@ function TableFooter({
|
|
|
3033
3695
|
}) {
|
|
3034
3696
|
if (!data?.meta) return null;
|
|
3035
3697
|
if (isPaginated) {
|
|
3036
|
-
return /* @__PURE__ */
|
|
3698
|
+
return /* @__PURE__ */ jsx34(PaginationFooter, { table, entityLabel });
|
|
3037
3699
|
}
|
|
3038
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ jsxs13("p", { className: "text-xs text-muted-foreground mt-3", children: [
|
|
3039
3701
|
"Showing ",
|
|
3040
3702
|
dataRows.length,
|
|
3041
3703
|
" of ",
|
|
@@ -3089,21 +3751,22 @@ function EntityTable(props) {
|
|
|
3089
3751
|
showChevron
|
|
3090
3752
|
);
|
|
3091
3753
|
const colCount = columns.length + (hasTrailingCol ? 1 : 0);
|
|
3092
|
-
|
|
3093
|
-
|
|
3754
|
+
const isInteractive = isKeyboardOperable(selectionMode, onRowClick);
|
|
3755
|
+
return /* @__PURE__ */ jsxs13("div", { children: [
|
|
3756
|
+
/* @__PURE__ */ jsx34(
|
|
3094
3757
|
"div",
|
|
3095
3758
|
{
|
|
3096
|
-
ref:
|
|
3097
|
-
tabIndex:
|
|
3098
|
-
onKeyDown:
|
|
3099
|
-
className:
|
|
3100
|
-
children: /* @__PURE__ */
|
|
3101
|
-
/* @__PURE__ */
|
|
3102
|
-
table.getFlatHeaders().map((header) => /* @__PURE__ */
|
|
3759
|
+
ref: isInteractive ? containerRef : void 0,
|
|
3760
|
+
tabIndex: isInteractive ? 0 : void 0,
|
|
3761
|
+
onKeyDown: isInteractive ? handleKeyDown : void 0,
|
|
3762
|
+
className: cn32("rounded-lg border", isInteractive && "outline-none"),
|
|
3763
|
+
children: /* @__PURE__ */ jsxs13("table", { className: "w-full text-sm", children: [
|
|
3764
|
+
/* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsxs13("tr", { className: "border-b bg-muted/40", children: [
|
|
3765
|
+
table.getFlatHeaders().map((header) => /* @__PURE__ */ jsx34(
|
|
3103
3766
|
"th",
|
|
3104
3767
|
{
|
|
3105
3768
|
className: "text-left text-xs font-medium text-muted-foreground px-4 py-2.5",
|
|
3106
|
-
style: header.column.columnDef
|
|
3769
|
+
style: headerWidthStyle(header.column.columnDef),
|
|
3107
3770
|
children: header.isPlaceholder ? null : flexRender(
|
|
3108
3771
|
header.column.columnDef.header,
|
|
3109
3772
|
header.getContext()
|
|
@@ -3111,7 +3774,7 @@ function EntityTable(props) {
|
|
|
3111
3774
|
},
|
|
3112
3775
|
header.id
|
|
3113
3776
|
)),
|
|
3114
|
-
hasRowActions && /* @__PURE__ */
|
|
3777
|
+
hasRowActions && /* @__PURE__ */ jsx34(
|
|
3115
3778
|
"th",
|
|
3116
3779
|
{
|
|
3117
3780
|
"aria-label": "Actions",
|
|
@@ -3119,10 +3782,10 @@ function EntityTable(props) {
|
|
|
3119
3782
|
className: "w-24 text-right text-xs font-medium text-muted-foreground px-4 py-2.5"
|
|
3120
3783
|
}
|
|
3121
3784
|
),
|
|
3122
|
-
hasChevron && /* @__PURE__ */
|
|
3785
|
+
hasChevron && /* @__PURE__ */ jsx34("th", { "aria-label": "Open", scope: "col", className: "w-10" })
|
|
3123
3786
|
] }) }),
|
|
3124
|
-
/* @__PURE__ */
|
|
3125
|
-
/* @__PURE__ */
|
|
3787
|
+
/* @__PURE__ */ jsxs13("tbody", { children: [
|
|
3788
|
+
/* @__PURE__ */ jsx34(
|
|
3126
3789
|
StatusRows,
|
|
3127
3790
|
{
|
|
3128
3791
|
isLoading,
|
|
@@ -3135,7 +3798,7 @@ function EntityTable(props) {
|
|
|
3135
3798
|
colCount
|
|
3136
3799
|
}
|
|
3137
3800
|
),
|
|
3138
|
-
table.getRowModel().rows.map((row, index) => /* @__PURE__ */
|
|
3801
|
+
table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx34(
|
|
3139
3802
|
DataRow,
|
|
3140
3803
|
{
|
|
3141
3804
|
row,
|
|
@@ -3157,7 +3820,7 @@ function EntityTable(props) {
|
|
|
3157
3820
|
] })
|
|
3158
3821
|
}
|
|
3159
3822
|
),
|
|
3160
|
-
/* @__PURE__ */
|
|
3823
|
+
/* @__PURE__ */ jsx34(
|
|
3161
3824
|
TableFooter,
|
|
3162
3825
|
{
|
|
3163
3826
|
isPaginated,
|
|
@@ -3178,10 +3841,10 @@ function PaginationFooter({
|
|
|
3178
3841
|
const pageCount = table.getPageCount();
|
|
3179
3842
|
const from = rowCount === 0 ? 0 : pageIndex * pageSize + 1;
|
|
3180
3843
|
const to = Math.min((pageIndex + 1) * pageSize, rowCount);
|
|
3181
|
-
return /* @__PURE__ */
|
|
3182
|
-
/* @__PURE__ */
|
|
3183
|
-
/* @__PURE__ */
|
|
3184
|
-
/* @__PURE__ */
|
|
3844
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mt-3", children: [
|
|
3845
|
+
/* @__PURE__ */ jsx34("p", { className: "text-xs text-muted-foreground", children: rowCount === 0 ? `No ${entityLabel}` : `Showing ${from}\u2013${to} of ${rowCount} ${entityLabel}` }),
|
|
3846
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", children: [
|
|
3847
|
+
/* @__PURE__ */ jsx34(
|
|
3185
3848
|
"button",
|
|
3186
3849
|
{
|
|
3187
3850
|
type: "button",
|
|
@@ -3191,8 +3854,8 @@ function PaginationFooter({
|
|
|
3191
3854
|
children: "Previous"
|
|
3192
3855
|
}
|
|
3193
3856
|
),
|
|
3194
|
-
/* @__PURE__ */
|
|
3195
|
-
/* @__PURE__ */
|
|
3857
|
+
/* @__PURE__ */ jsx34("span", { className: "text-xs text-muted-foreground px-2", children: pageCount > 0 ? `${pageIndex + 1} / ${pageCount}` : "--" }),
|
|
3858
|
+
/* @__PURE__ */ jsx34(
|
|
3196
3859
|
"button",
|
|
3197
3860
|
{
|
|
3198
3861
|
type: "button",
|
|
@@ -3207,13 +3870,13 @@ function PaginationFooter({
|
|
|
3207
3870
|
}
|
|
3208
3871
|
|
|
3209
3872
|
// src/PropertyList/PropertyList.tsx
|
|
3210
|
-
import
|
|
3873
|
+
import React32 from "react";
|
|
3211
3874
|
import { copyTextToClipboard } from "@petrarca/sonnet-core";
|
|
3212
3875
|
|
|
3213
3876
|
// src/PropertyList/PropertyValue.tsx
|
|
3214
|
-
import { useState as
|
|
3877
|
+
import { useState as useState6 } from "react";
|
|
3215
3878
|
import { JSONTree } from "react-json-tree";
|
|
3216
|
-
import { jsx as
|
|
3879
|
+
import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
3217
3880
|
var DEFAULT_CLAMP_CHARS = 180;
|
|
3218
3881
|
var tokenTheme = {
|
|
3219
3882
|
scheme: "sonnet",
|
|
@@ -3238,10 +3901,10 @@ function isObjectLike(v) {
|
|
|
3238
3901
|
return typeof v === "object" && v !== null;
|
|
3239
3902
|
}
|
|
3240
3903
|
function JsonValue({ value }) {
|
|
3241
|
-
const [open, setOpen] =
|
|
3904
|
+
const [open, setOpen] = useState6(false);
|
|
3242
3905
|
const summary = Array.isArray(value) ? `[${value.length} item${value.length === 1 ? "" : "s"}]` : `{${Object.keys(value).length} key${Object.keys(value).length === 1 ? "" : "s"}}`;
|
|
3243
3906
|
if (!open) {
|
|
3244
|
-
return /* @__PURE__ */
|
|
3907
|
+
return /* @__PURE__ */ jsxs14(
|
|
3245
3908
|
"button",
|
|
3246
3909
|
{
|
|
3247
3910
|
type: "button",
|
|
@@ -3253,13 +3916,13 @@ function JsonValue({ value }) {
|
|
|
3253
3916
|
children: [
|
|
3254
3917
|
summary,
|
|
3255
3918
|
" ",
|
|
3256
|
-
/* @__PURE__ */
|
|
3919
|
+
/* @__PURE__ */ jsx35("span", { className: "text-xs", children: "\u2014 show" })
|
|
3257
3920
|
]
|
|
3258
3921
|
}
|
|
3259
3922
|
);
|
|
3260
3923
|
}
|
|
3261
|
-
return /* @__PURE__ */
|
|
3262
|
-
/* @__PURE__ */
|
|
3924
|
+
return /* @__PURE__ */ jsxs14("div", { className: "text-xs font-mono", children: [
|
|
3925
|
+
/* @__PURE__ */ jsx35(
|
|
3263
3926
|
"button",
|
|
3264
3927
|
{
|
|
3265
3928
|
type: "button",
|
|
@@ -3271,7 +3934,7 @@ function JsonValue({ value }) {
|
|
|
3271
3934
|
children: "hide"
|
|
3272
3935
|
}
|
|
3273
3936
|
),
|
|
3274
|
-
/* @__PURE__ */
|
|
3937
|
+
/* @__PURE__ */ jsx35("div", { className: "max-h-64 overflow-auto rounded border border-border bg-muted/30 px-2 py-1", children: /* @__PURE__ */ jsx35(
|
|
3275
3938
|
JSONTree,
|
|
3276
3939
|
{
|
|
3277
3940
|
data: value,
|
|
@@ -3284,11 +3947,11 @@ function JsonValue({ value }) {
|
|
|
3284
3947
|
] });
|
|
3285
3948
|
}
|
|
3286
3949
|
function LongTextValue({ text }) {
|
|
3287
|
-
const [open, setOpen] =
|
|
3950
|
+
const [open, setOpen] = useState6(false);
|
|
3288
3951
|
if (!open) {
|
|
3289
|
-
return /* @__PURE__ */
|
|
3290
|
-
/* @__PURE__ */
|
|
3291
|
-
/* @__PURE__ */
|
|
3952
|
+
return /* @__PURE__ */ jsxs14("span", { className: "break-words", children: [
|
|
3953
|
+
/* @__PURE__ */ jsx35("span", { className: "line-clamp-3 align-bottom", children: text }),
|
|
3954
|
+
/* @__PURE__ */ jsx35(
|
|
3292
3955
|
"button",
|
|
3293
3956
|
{
|
|
3294
3957
|
type: "button",
|
|
@@ -3302,9 +3965,9 @@ function LongTextValue({ text }) {
|
|
|
3302
3965
|
)
|
|
3303
3966
|
] });
|
|
3304
3967
|
}
|
|
3305
|
-
return /* @__PURE__ */
|
|
3306
|
-
/* @__PURE__ */
|
|
3307
|
-
/* @__PURE__ */
|
|
3968
|
+
return /* @__PURE__ */ jsxs14("span", { className: "break-words", children: [
|
|
3969
|
+
/* @__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 }),
|
|
3970
|
+
/* @__PURE__ */ jsx35(
|
|
3308
3971
|
"button",
|
|
3309
3972
|
{
|
|
3310
3973
|
type: "button",
|
|
@@ -3322,12 +3985,12 @@ function renderFromSchema(value, schema, className) {
|
|
|
3322
3985
|
const cellName = schema["x-ui-cell"] ?? inferCellRenderer(schema.type, schema.format);
|
|
3323
3986
|
if (cellName === "json") {
|
|
3324
3987
|
const parsed = typeof value === "string" ? safeParse(value) : value;
|
|
3325
|
-
return isObjectLike(parsed) ? /* @__PURE__ */
|
|
3988
|
+
return isObjectLike(parsed) ? /* @__PURE__ */ jsx35(JsonValue, { value: parsed }) : null;
|
|
3326
3989
|
}
|
|
3327
3990
|
if (cellName && cellName !== "text") {
|
|
3328
3991
|
const Renderer = CELL_RENDERERS[cellName];
|
|
3329
3992
|
if (Renderer) {
|
|
3330
|
-
return /* @__PURE__ */
|
|
3993
|
+
return /* @__PURE__ */ jsx35("span", { className, children: /* @__PURE__ */ jsx35(
|
|
3331
3994
|
Renderer,
|
|
3332
3995
|
{
|
|
3333
3996
|
value,
|
|
@@ -3341,23 +4004,23 @@ function renderFromSchema(value, schema, className) {
|
|
|
3341
4004
|
}
|
|
3342
4005
|
function renderObjectLike(value, className) {
|
|
3343
4006
|
if (Array.isArray(value) && value.every((v) => !isObjectLike(v))) {
|
|
3344
|
-
return /* @__PURE__ */
|
|
4007
|
+
return /* @__PURE__ */ jsx35("span", { className: `break-words ${className ?? ""}`, children: value.map(String).join(", ") });
|
|
3345
4008
|
}
|
|
3346
|
-
return /* @__PURE__ */
|
|
4009
|
+
return /* @__PURE__ */ jsx35(JsonValue, { value });
|
|
3347
4010
|
}
|
|
3348
4011
|
function renderString(value, className, clampChars) {
|
|
3349
4012
|
if (typeof value === "boolean") {
|
|
3350
|
-
return /* @__PURE__ */
|
|
4013
|
+
return /* @__PURE__ */ jsx35("span", { className, children: value ? "true" : "false" });
|
|
3351
4014
|
}
|
|
3352
4015
|
const str = String(value);
|
|
3353
4016
|
if (str.length > clampChars || str.includes("\n")) {
|
|
3354
|
-
return /* @__PURE__ */
|
|
4017
|
+
return /* @__PURE__ */ jsx35("span", { className, children: /* @__PURE__ */ jsx35(LongTextValue, { text: str }) });
|
|
3355
4018
|
}
|
|
3356
|
-
return /* @__PURE__ */
|
|
4019
|
+
return /* @__PURE__ */ jsx35("span", { className: `break-words ${className ?? ""}`, children: str });
|
|
3357
4020
|
}
|
|
3358
4021
|
function renderFromValue(value, className, clampChars) {
|
|
3359
4022
|
if (value == null) {
|
|
3360
|
-
return /* @__PURE__ */
|
|
4023
|
+
return /* @__PURE__ */ jsx35("span", { className: `text-muted-foreground ${className ?? ""}`, children: "\u2014" });
|
|
3361
4024
|
}
|
|
3362
4025
|
if (isObjectLike(value)) return renderObjectLike(value, className);
|
|
3363
4026
|
return renderString(value, className, clampChars);
|
|
@@ -3380,7 +4043,7 @@ function safeParse(s) {
|
|
|
3380
4043
|
}
|
|
3381
4044
|
|
|
3382
4045
|
// src/PropertyList/PropertyList.tsx
|
|
3383
|
-
import { jsx as
|
|
4046
|
+
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
3384
4047
|
function PropertyList({
|
|
3385
4048
|
properties,
|
|
3386
4049
|
propertySchemas,
|
|
@@ -3392,28 +4055,28 @@ function PropertyList({
|
|
|
3392
4055
|
}) {
|
|
3393
4056
|
const entries = Object.entries(properties ?? {});
|
|
3394
4057
|
if (entries.length === 0) {
|
|
3395
|
-
return /* @__PURE__ */
|
|
4058
|
+
return /* @__PURE__ */ jsx36("p", { className: "text-sm text-muted-foreground italic", children: emptyLabel });
|
|
3396
4059
|
}
|
|
3397
|
-
const header = showHeader && /* @__PURE__ */
|
|
4060
|
+
const header = showHeader && /* @__PURE__ */ jsx36("p", { className: "text-[11px] text-muted-foreground mb-1.5", children: "Properties" });
|
|
3398
4061
|
const dtClass = `text-[11px] text-muted-foreground ${copyable ? "cursor-pointer hover:text-foreground" : ""}`;
|
|
3399
4062
|
const dtProps = (value) => copyable ? {
|
|
3400
4063
|
onClick: () => copyTextToClipboard(stringForCopy(value)),
|
|
3401
4064
|
title: "Click to copy value"
|
|
3402
4065
|
} : {};
|
|
3403
4066
|
if (layout === "stacked") {
|
|
3404
|
-
return /* @__PURE__ */
|
|
4067
|
+
return /* @__PURE__ */ jsxs15("div", { className, children: [
|
|
3405
4068
|
header,
|
|
3406
|
-
/* @__PURE__ */
|
|
3407
|
-
/* @__PURE__ */
|
|
3408
|
-
/* @__PURE__ */
|
|
4069
|
+
/* @__PURE__ */ jsx36("dl", { className: "space-y-1", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs15("div", { children: [
|
|
4070
|
+
/* @__PURE__ */ jsx36("dt", { className: dtClass, ...dtProps(value), children: key }),
|
|
4071
|
+
/* @__PURE__ */ jsx36("dd", { className: "text-sm text-foreground font-medium break-words", children: /* @__PURE__ */ jsx36(PropertyValue, { value, schema: propertySchemas?.[key] }) })
|
|
3409
4072
|
] }, key)) })
|
|
3410
4073
|
] });
|
|
3411
4074
|
}
|
|
3412
|
-
return /* @__PURE__ */
|
|
4075
|
+
return /* @__PURE__ */ jsxs15("div", { className, children: [
|
|
3413
4076
|
header,
|
|
3414
|
-
/* @__PURE__ */
|
|
3415
|
-
/* @__PURE__ */
|
|
3416
|
-
/* @__PURE__ */
|
|
4077
|
+
/* @__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: [
|
|
4078
|
+
/* @__PURE__ */ jsx36("dt", { className: `${dtClass} whitespace-nowrap`, ...dtProps(value), children: key }),
|
|
4079
|
+
/* @__PURE__ */ jsx36("dd", { className: "text-sm text-foreground min-w-0 break-words", children: /* @__PURE__ */ jsx36(PropertyValue, { value, schema: propertySchemas?.[key] }) })
|
|
3417
4080
|
] }, key)) })
|
|
3418
4081
|
] });
|
|
3419
4082
|
}
|
|
@@ -3424,13 +4087,13 @@ function stringForCopy(value) {
|
|
|
3424
4087
|
}
|
|
3425
4088
|
|
|
3426
4089
|
// src/EntitySelect/EntitySelect.tsx
|
|
3427
|
-
import * as
|
|
3428
|
-
import { Check as
|
|
3429
|
-
import { cn as
|
|
4090
|
+
import * as React33 from "react";
|
|
4091
|
+
import { Check as Check5, ChevronsUpDown, Loader2, X as X3 } from "lucide-react";
|
|
4092
|
+
import { cn as cn33 } from "@petrarca/sonnet-core";
|
|
3430
4093
|
import {
|
|
3431
4094
|
useEntityOptions
|
|
3432
4095
|
} from "@petrarca/sonnet-core/hooks";
|
|
3433
|
-
import { Fragment as
|
|
4096
|
+
import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
3434
4097
|
function emptyStateMessage({
|
|
3435
4098
|
mode,
|
|
3436
4099
|
search,
|
|
@@ -3448,8 +4111,8 @@ function emptyStateMessage({
|
|
|
3448
4111
|
return emptyMessage;
|
|
3449
4112
|
}
|
|
3450
4113
|
function useHasSearched(submit) {
|
|
3451
|
-
const [hasSearched, setHasSearched] =
|
|
3452
|
-
const wrappedSubmit =
|
|
4114
|
+
const [hasSearched, setHasSearched] = React33.useState(false);
|
|
4115
|
+
const wrappedSubmit = React33.useCallback(() => {
|
|
3453
4116
|
setHasSearched(true);
|
|
3454
4117
|
submit();
|
|
3455
4118
|
}, [submit]);
|
|
@@ -3472,19 +4135,19 @@ function EntitySelectLabel({
|
|
|
3472
4135
|
description
|
|
3473
4136
|
}) {
|
|
3474
4137
|
const hasLabel = label !== void 0 && label !== false;
|
|
3475
|
-
return /* @__PURE__ */
|
|
3476
|
-
hasLabel && /* @__PURE__ */
|
|
4138
|
+
return /* @__PURE__ */ jsxs16(Fragment3, { children: [
|
|
4139
|
+
hasLabel && /* @__PURE__ */ jsxs16(
|
|
3477
4140
|
"label",
|
|
3478
4141
|
{
|
|
3479
4142
|
htmlFor: id,
|
|
3480
4143
|
className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
3481
4144
|
children: [
|
|
3482
4145
|
label,
|
|
3483
|
-
required && /* @__PURE__ */
|
|
4146
|
+
required && /* @__PURE__ */ jsx37("span", { className: "ml-1 text-destructive", children: "*" })
|
|
3484
4147
|
]
|
|
3485
4148
|
}
|
|
3486
4149
|
),
|
|
3487
|
-
description && /* @__PURE__ */
|
|
4150
|
+
description && /* @__PURE__ */ jsx37("p", { className: "text-sm text-muted-foreground", children: description })
|
|
3488
4151
|
] });
|
|
3489
4152
|
}
|
|
3490
4153
|
function EntitySelectDropdown({
|
|
@@ -3501,8 +4164,8 @@ function EntitySelectDropdown({
|
|
|
3501
4164
|
value,
|
|
3502
4165
|
handleSelect
|
|
3503
4166
|
}) {
|
|
3504
|
-
return /* @__PURE__ */
|
|
3505
|
-
/* @__PURE__ */
|
|
4167
|
+
return /* @__PURE__ */ jsxs16(Command, { shouldFilter: false, children: [
|
|
4168
|
+
/* @__PURE__ */ jsx37(
|
|
3506
4169
|
CommandInput,
|
|
3507
4170
|
{
|
|
3508
4171
|
placeholder: searchPlaceholder,
|
|
@@ -3516,8 +4179,8 @@ function EntitySelectDropdown({
|
|
|
3516
4179
|
} : void 0
|
|
3517
4180
|
}
|
|
3518
4181
|
),
|
|
3519
|
-
/* @__PURE__ */
|
|
3520
|
-
/* @__PURE__ */
|
|
4182
|
+
/* @__PURE__ */ jsxs16(CommandList, { children: [
|
|
4183
|
+
/* @__PURE__ */ jsx37(CommandEmpty, { children: emptyStateMessage({
|
|
3521
4184
|
mode,
|
|
3522
4185
|
search,
|
|
3523
4186
|
minChars,
|
|
@@ -3525,16 +4188,16 @@ function EntitySelectDropdown({
|
|
|
3525
4188
|
hasSearched,
|
|
3526
4189
|
emptyMessage
|
|
3527
4190
|
}) }),
|
|
3528
|
-
/* @__PURE__ */
|
|
4191
|
+
/* @__PURE__ */ jsx37(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs16(
|
|
3529
4192
|
CommandItem,
|
|
3530
4193
|
{
|
|
3531
4194
|
value: option.value,
|
|
3532
4195
|
onSelect: handleSelect,
|
|
3533
4196
|
children: [
|
|
3534
|
-
/* @__PURE__ */
|
|
3535
|
-
|
|
4197
|
+
/* @__PURE__ */ jsx37(
|
|
4198
|
+
Check5,
|
|
3536
4199
|
{
|
|
3537
|
-
className:
|
|
4200
|
+
className: cn33(
|
|
3538
4201
|
"mr-2 h-4 w-4",
|
|
3539
4202
|
value === option.value ? "opacity-100" : "opacity-0"
|
|
3540
4203
|
)
|
|
@@ -3573,8 +4236,8 @@ function EntitySelect(props) {
|
|
|
3573
4236
|
emptyMessage,
|
|
3574
4237
|
disabled
|
|
3575
4238
|
} = resolveEntitySelectDefaults(props);
|
|
3576
|
-
const [open, setOpen] =
|
|
3577
|
-
const [selectedLabel, setSelectedLabel] =
|
|
4239
|
+
const [open, setOpen] = React33.useState(false);
|
|
4240
|
+
const [selectedLabel, setSelectedLabel] = React33.useState(null);
|
|
3578
4241
|
const {
|
|
3579
4242
|
options,
|
|
3580
4243
|
isLoading,
|
|
@@ -3583,7 +4246,7 @@ function EntitySelect(props) {
|
|
|
3583
4246
|
submit: rawSubmit
|
|
3584
4247
|
} = useEntityOptions({ fetcher, queryKey, mode, minChars });
|
|
3585
4248
|
const [hasSearched, submit] = useHasSearched(rawSubmit);
|
|
3586
|
-
|
|
4249
|
+
React33.useEffect(() => {
|
|
3587
4250
|
if (!value) {
|
|
3588
4251
|
setSelectedLabel(null);
|
|
3589
4252
|
return;
|
|
@@ -3595,7 +4258,7 @@ function EntitySelect(props) {
|
|
|
3595
4258
|
setSelectedLabel(selectedOption.label);
|
|
3596
4259
|
}
|
|
3597
4260
|
}, [value, options, selectedOption]);
|
|
3598
|
-
const handleClear =
|
|
4261
|
+
const handleClear = React33.useCallback(
|
|
3599
4262
|
(e) => {
|
|
3600
4263
|
e.preventDefault();
|
|
3601
4264
|
e.stopPropagation();
|
|
@@ -3606,7 +4269,7 @@ function EntitySelect(props) {
|
|
|
3606
4269
|
[onChange, onChangeOption]
|
|
3607
4270
|
);
|
|
3608
4271
|
const showClear = Boolean(clearable && value && !required && !disabled);
|
|
3609
|
-
const handleSelect =
|
|
4272
|
+
const handleSelect = React33.useCallback(
|
|
3610
4273
|
(selectedValue) => {
|
|
3611
4274
|
const opt = options.find((o) => o.value === selectedValue);
|
|
3612
4275
|
if (opt) setSelectedLabel(opt.label);
|
|
@@ -3619,7 +4282,7 @@ function EntitySelect(props) {
|
|
|
3619
4282
|
},
|
|
3620
4283
|
[options, value, onChange, onChangeOption, setSearch]
|
|
3621
4284
|
);
|
|
3622
|
-
const handleOpenChange =
|
|
4285
|
+
const handleOpenChange = React33.useCallback(
|
|
3623
4286
|
(newOpen) => {
|
|
3624
4287
|
setOpen(newOpen);
|
|
3625
4288
|
if (!newOpen) {
|
|
@@ -3629,8 +4292,8 @@ function EntitySelect(props) {
|
|
|
3629
4292
|
},
|
|
3630
4293
|
[onBlur, setSearch]
|
|
3631
4294
|
);
|
|
3632
|
-
return /* @__PURE__ */
|
|
3633
|
-
/* @__PURE__ */
|
|
4295
|
+
return /* @__PURE__ */ jsxs16("div", { className: cn33("space-y-2", className), children: [
|
|
4296
|
+
/* @__PURE__ */ jsx37(
|
|
3634
4297
|
EntitySelectLabel,
|
|
3635
4298
|
{
|
|
3636
4299
|
id,
|
|
@@ -3639,25 +4302,25 @@ function EntitySelect(props) {
|
|
|
3639
4302
|
description
|
|
3640
4303
|
}
|
|
3641
4304
|
),
|
|
3642
|
-
/* @__PURE__ */
|
|
3643
|
-
/* @__PURE__ */
|
|
4305
|
+
/* @__PURE__ */ jsxs16(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
4306
|
+
/* @__PURE__ */ jsx37(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
|
|
3644
4307
|
Button,
|
|
3645
4308
|
{
|
|
3646
4309
|
id,
|
|
3647
4310
|
variant: "outline",
|
|
3648
4311
|
role: "combobox",
|
|
3649
4312
|
"aria-expanded": open,
|
|
3650
|
-
className:
|
|
4313
|
+
className: cn33(
|
|
3651
4314
|
"w-full justify-between",
|
|
3652
4315
|
!selectedLabel && "text-muted-foreground",
|
|
3653
4316
|
error && "border-destructive"
|
|
3654
4317
|
),
|
|
3655
4318
|
disabled,
|
|
3656
4319
|
children: [
|
|
3657
|
-
/* @__PURE__ */
|
|
3658
|
-
/* @__PURE__ */
|
|
3659
|
-
isLoading && /* @__PURE__ */
|
|
3660
|
-
showClear && /* @__PURE__ */
|
|
4320
|
+
/* @__PURE__ */ jsx37("span", { className: "truncate", children: selectedLabel ?? placeholder }),
|
|
4321
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
|
|
4322
|
+
isLoading && /* @__PURE__ */ jsx37(Loader2, { className: "h-4 w-4 animate-spin opacity-50" }),
|
|
4323
|
+
showClear && /* @__PURE__ */ jsx37(
|
|
3661
4324
|
"span",
|
|
3662
4325
|
{
|
|
3663
4326
|
role: "button",
|
|
@@ -3665,20 +4328,20 @@ function EntitySelect(props) {
|
|
|
3665
4328
|
tabIndex: -1,
|
|
3666
4329
|
className: "rounded-sm opacity-50 hover:opacity-100",
|
|
3667
4330
|
onPointerDown: handleClear,
|
|
3668
|
-
children: /* @__PURE__ */
|
|
4331
|
+
children: /* @__PURE__ */ jsx37(X3, { className: "h-4 w-4 shrink-0" })
|
|
3669
4332
|
}
|
|
3670
4333
|
),
|
|
3671
|
-
/* @__PURE__ */
|
|
4334
|
+
/* @__PURE__ */ jsx37(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
|
|
3672
4335
|
] })
|
|
3673
4336
|
]
|
|
3674
4337
|
}
|
|
3675
4338
|
) }),
|
|
3676
|
-
/* @__PURE__ */
|
|
4339
|
+
/* @__PURE__ */ jsx37(
|
|
3677
4340
|
PopoverContent,
|
|
3678
4341
|
{
|
|
3679
4342
|
className: "w-[--radix-popover-trigger-width] p-0",
|
|
3680
4343
|
align: "start",
|
|
3681
|
-
children: /* @__PURE__ */
|
|
4344
|
+
children: /* @__PURE__ */ jsx37(
|
|
3682
4345
|
EntitySelectDropdown,
|
|
3683
4346
|
{
|
|
3684
4347
|
searchPlaceholder,
|
|
@@ -3698,34 +4361,34 @@ function EntitySelect(props) {
|
|
|
3698
4361
|
}
|
|
3699
4362
|
)
|
|
3700
4363
|
] }),
|
|
3701
|
-
error && /* @__PURE__ */
|
|
4364
|
+
error && /* @__PURE__ */ jsx37("p", { className: "text-sm font-medium text-destructive", children: error })
|
|
3702
4365
|
] });
|
|
3703
4366
|
}
|
|
3704
4367
|
|
|
3705
4368
|
// src/EntityTree/EntityTree.tsx
|
|
3706
4369
|
import {
|
|
3707
|
-
forwardRef as
|
|
4370
|
+
forwardRef as forwardRef22,
|
|
3708
4371
|
useImperativeHandle as useImperativeHandle2,
|
|
3709
|
-
useMemo as
|
|
4372
|
+
useMemo as useMemo7,
|
|
3710
4373
|
useRef as useRef6
|
|
3711
4374
|
} from "react";
|
|
3712
4375
|
import { Pencil } from "lucide-react";
|
|
3713
|
-
import { cn as
|
|
4376
|
+
import { cn as cn35 } from "@petrarca/sonnet-core";
|
|
3714
4377
|
|
|
3715
4378
|
// src/TreeView/TreeView.tsx
|
|
3716
4379
|
import {
|
|
3717
|
-
forwardRef as
|
|
4380
|
+
forwardRef as forwardRef21,
|
|
3718
4381
|
useCallback as useCallback4,
|
|
3719
|
-
useEffect as
|
|
4382
|
+
useEffect as useEffect8,
|
|
3720
4383
|
useId as useId2,
|
|
3721
4384
|
useImperativeHandle,
|
|
3722
|
-
useMemo as
|
|
4385
|
+
useMemo as useMemo6,
|
|
3723
4386
|
useRef as useRef5,
|
|
3724
|
-
useState as
|
|
4387
|
+
useState as useState8
|
|
3725
4388
|
} from "react";
|
|
3726
|
-
import { ChevronRight as
|
|
3727
|
-
import { cn as
|
|
3728
|
-
import { jsx as
|
|
4389
|
+
import { ChevronRight as ChevronRight4 } from "lucide-react";
|
|
4390
|
+
import { cn as cn34 } from "@petrarca/sonnet-core";
|
|
4391
|
+
import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
3729
4392
|
function flatten(nodes, expandedIds, depth = 0, parentId = null, result = []) {
|
|
3730
4393
|
for (const node of nodes) {
|
|
3731
4394
|
result.push({ node, depth, parentId });
|
|
@@ -3742,15 +4405,15 @@ function ToggleIcon({
|
|
|
3742
4405
|
isExpanded
|
|
3743
4406
|
}) {
|
|
3744
4407
|
if (!hasChildren) {
|
|
3745
|
-
return /* @__PURE__ */
|
|
4408
|
+
return /* @__PURE__ */ jsx38("span", { className: "block w-1.5 h-1.5 rounded-full bg-border mx-auto" });
|
|
3746
4409
|
}
|
|
3747
4410
|
if (isLoading) {
|
|
3748
|
-
return /* @__PURE__ */
|
|
4411
|
+
return /* @__PURE__ */ jsx38("span", { className: "block w-3 h-3 rounded-full border-2 border-muted-foreground/40 border-t-foreground animate-spin" });
|
|
3749
4412
|
}
|
|
3750
|
-
return /* @__PURE__ */
|
|
3751
|
-
|
|
4413
|
+
return /* @__PURE__ */ jsx38(
|
|
4414
|
+
ChevronRight4,
|
|
3752
4415
|
{
|
|
3753
|
-
className:
|
|
4416
|
+
className: cn34(
|
|
3754
4417
|
"h-3.5 w-3.5 text-muted-foreground transition-transform",
|
|
3755
4418
|
isExpanded && "rotate-90"
|
|
3756
4419
|
)
|
|
@@ -3796,7 +4459,7 @@ function NodeRow({
|
|
|
3796
4459
|
},
|
|
3797
4460
|
[node.id, onSelectionChange]
|
|
3798
4461
|
);
|
|
3799
|
-
return /* @__PURE__ */
|
|
4462
|
+
return /* @__PURE__ */ jsxs17(
|
|
3800
4463
|
"li",
|
|
3801
4464
|
{
|
|
3802
4465
|
id: `${treeId}-node-${node.id}`,
|
|
@@ -3805,7 +4468,7 @@ function NodeRow({
|
|
|
3805
4468
|
"aria-selected": onSelectionChange ? isSelected : void 0,
|
|
3806
4469
|
"aria-busy": node.isLoading,
|
|
3807
4470
|
tabIndex: isFocused ? 0 : -1,
|
|
3808
|
-
className:
|
|
4471
|
+
className: cn34(
|
|
3809
4472
|
"flex items-center gap-1 px-2 py-1.5 rounded-sm text-sm select-none",
|
|
3810
4473
|
"cursor-pointer transition-colors",
|
|
3811
4474
|
"hover:bg-accent/60",
|
|
@@ -3815,13 +4478,13 @@ function NodeRow({
|
|
|
3815
4478
|
style: { paddingLeft: depth * indentPx + 8 },
|
|
3816
4479
|
onClick: handleClick,
|
|
3817
4480
|
children: [
|
|
3818
|
-
/* @__PURE__ */
|
|
4481
|
+
/* @__PURE__ */ jsx38(
|
|
3819
4482
|
"span",
|
|
3820
4483
|
{
|
|
3821
4484
|
className: "shrink-0 flex items-center justify-center w-4 h-4",
|
|
3822
4485
|
onClick: handleToggle,
|
|
3823
4486
|
"aria-hidden": true,
|
|
3824
|
-
children: /* @__PURE__ */
|
|
4487
|
+
children: /* @__PURE__ */ jsx38(
|
|
3825
4488
|
ToggleIcon,
|
|
3826
4489
|
{
|
|
3827
4490
|
hasChildren: node.hasChildren,
|
|
@@ -3831,7 +4494,7 @@ function NodeRow({
|
|
|
3831
4494
|
)
|
|
3832
4495
|
}
|
|
3833
4496
|
),
|
|
3834
|
-
onSelectionChange && isSelectable && /* @__PURE__ */
|
|
4497
|
+
onSelectionChange && isSelectable && /* @__PURE__ */ jsx38(
|
|
3835
4498
|
"input",
|
|
3836
4499
|
{
|
|
3837
4500
|
type: "checkbox",
|
|
@@ -3843,8 +4506,8 @@ function NodeRow({
|
|
|
3843
4506
|
tabIndex: -1
|
|
3844
4507
|
}
|
|
3845
4508
|
),
|
|
3846
|
-
/* @__PURE__ */
|
|
3847
|
-
node.isError && /* @__PURE__ */
|
|
4509
|
+
/* @__PURE__ */ jsx38("span", { className: "flex-1 min-w-0", children: renderNode(node, depth) }),
|
|
4510
|
+
node.isError && /* @__PURE__ */ jsx38("span", { className: "shrink-0 text-xs text-destructive", "aria-live": "polite", children: "Failed to load" })
|
|
3848
4511
|
]
|
|
3849
4512
|
}
|
|
3850
4513
|
);
|
|
@@ -3864,11 +4527,11 @@ function TreeViewInner({
|
|
|
3864
4527
|
className
|
|
3865
4528
|
}, ref) {
|
|
3866
4529
|
const treeId = useId2();
|
|
3867
|
-
const [focusedId, setFocusedId] =
|
|
4530
|
+
const [focusedId, setFocusedId] = useState8(null);
|
|
3868
4531
|
const listRef = useRef5(null);
|
|
3869
|
-
const [constrainedParent, setConstrainedParent] =
|
|
4532
|
+
const [constrainedParent, setConstrainedParent] = useState8(UNCONSTRAINED);
|
|
3870
4533
|
const selectionSize = selectedIds?.size ?? 0;
|
|
3871
|
-
|
|
4534
|
+
useEffect8(() => {
|
|
3872
4535
|
if (selectionSize === 0) setConstrainedParent(UNCONSTRAINED);
|
|
3873
4536
|
}, [selectionSize]);
|
|
3874
4537
|
useImperativeHandle(
|
|
@@ -3885,16 +4548,16 @@ function TreeViewInner({
|
|
|
3885
4548
|
}),
|
|
3886
4549
|
[focusedId]
|
|
3887
4550
|
);
|
|
3888
|
-
const flatNodes =
|
|
4551
|
+
const flatNodes = useMemo6(
|
|
3889
4552
|
() => flatten(nodes, expandedIds),
|
|
3890
4553
|
[nodes, expandedIds]
|
|
3891
4554
|
);
|
|
3892
|
-
const parentById =
|
|
4555
|
+
const parentById = useMemo6(() => {
|
|
3893
4556
|
const map = /* @__PURE__ */ new Map();
|
|
3894
4557
|
for (const f of flatNodes) map.set(f.node.id, f.parentId);
|
|
3895
4558
|
return map;
|
|
3896
4559
|
}, [flatNodes]);
|
|
3897
|
-
const selectableSet =
|
|
4560
|
+
const selectableSet = useMemo6(() => {
|
|
3898
4561
|
if (!constrainSelectionToSiblings || constrainedParent === UNCONSTRAINED) {
|
|
3899
4562
|
return void 0;
|
|
3900
4563
|
}
|
|
@@ -4020,10 +4683,10 @@ function TreeViewInner({
|
|
|
4020
4683
|
]
|
|
4021
4684
|
);
|
|
4022
4685
|
if (nodes.length === 0) {
|
|
4023
|
-
return /* @__PURE__ */
|
|
4686
|
+
return /* @__PURE__ */ jsx38(
|
|
4024
4687
|
"div",
|
|
4025
4688
|
{
|
|
4026
|
-
className:
|
|
4689
|
+
className: cn34(
|
|
4027
4690
|
"py-8 text-center text-sm text-muted-foreground",
|
|
4028
4691
|
className
|
|
4029
4692
|
),
|
|
@@ -4031,15 +4694,15 @@ function TreeViewInner({
|
|
|
4031
4694
|
}
|
|
4032
4695
|
);
|
|
4033
4696
|
}
|
|
4034
|
-
return /* @__PURE__ */
|
|
4697
|
+
return /* @__PURE__ */ jsx38(
|
|
4035
4698
|
"ul",
|
|
4036
4699
|
{
|
|
4037
4700
|
ref: listRef,
|
|
4038
4701
|
role: "tree",
|
|
4039
4702
|
"aria-label": "Tree",
|
|
4040
|
-
className:
|
|
4703
|
+
className: cn34("outline-none", className),
|
|
4041
4704
|
onKeyDown: handleKeyDown,
|
|
4042
|
-
children: flatNodes.map((flat) => /* @__PURE__ */
|
|
4705
|
+
children: flatNodes.map((flat) => /* @__PURE__ */ jsx38(
|
|
4043
4706
|
NodeRow,
|
|
4044
4707
|
{
|
|
4045
4708
|
flat,
|
|
@@ -4061,26 +4724,26 @@ function TreeViewInner({
|
|
|
4061
4724
|
}
|
|
4062
4725
|
);
|
|
4063
4726
|
}
|
|
4064
|
-
var TreeView =
|
|
4727
|
+
var TreeView = forwardRef21(TreeViewInner);
|
|
4065
4728
|
|
|
4066
4729
|
// src/EntityTree/EntityTree.tsx
|
|
4067
|
-
import { jsx as
|
|
4730
|
+
import { jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
4068
4731
|
function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
4069
4732
|
return function renderCells(node) {
|
|
4070
4733
|
const isActive = node.id === activeNodeIdRef.current;
|
|
4071
|
-
return /* @__PURE__ */
|
|
4734
|
+
return /* @__PURE__ */ jsxs18("span", { className: "flex items-center gap-4 min-w-0 w-full group/row", children: [
|
|
4072
4735
|
resolved.map((col) => {
|
|
4073
4736
|
const Renderer = resolveCellRenderer2(
|
|
4074
4737
|
col.cellRenderer,
|
|
4075
4738
|
localRenderers
|
|
4076
4739
|
);
|
|
4077
4740
|
const value = node.data[col.key];
|
|
4078
|
-
return /* @__PURE__ */
|
|
4741
|
+
return /* @__PURE__ */ jsx39(
|
|
4079
4742
|
"span",
|
|
4080
4743
|
{
|
|
4081
4744
|
className: "shrink-0",
|
|
4082
4745
|
style: col.width !== void 0 ? { width: col.width } : void 0,
|
|
4083
|
-
children: /* @__PURE__ */
|
|
4746
|
+
children: /* @__PURE__ */ jsx39(
|
|
4084
4747
|
Renderer,
|
|
4085
4748
|
{
|
|
4086
4749
|
value,
|
|
@@ -4092,7 +4755,7 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
|
4092
4755
|
col.key
|
|
4093
4756
|
);
|
|
4094
4757
|
}),
|
|
4095
|
-
onNodeEdit && /* @__PURE__ */
|
|
4758
|
+
onNodeEdit && /* @__PURE__ */ jsx39("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx39(
|
|
4096
4759
|
"button",
|
|
4097
4760
|
{
|
|
4098
4761
|
type: "button",
|
|
@@ -4101,11 +4764,11 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
|
4101
4764
|
onNodeEdit(node);
|
|
4102
4765
|
},
|
|
4103
4766
|
"aria-label": "Edit",
|
|
4104
|
-
className:
|
|
4767
|
+
className: cn35(
|
|
4105
4768
|
"p-1 rounded hover:bg-background text-muted-foreground hover:text-foreground transition-colors",
|
|
4106
4769
|
isActive ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"
|
|
4107
4770
|
),
|
|
4108
|
-
children: /* @__PURE__ */
|
|
4771
|
+
children: /* @__PURE__ */ jsx39(Pencil, { className: "h-3.5 w-3.5" })
|
|
4109
4772
|
}
|
|
4110
4773
|
) })
|
|
4111
4774
|
] });
|
|
@@ -4128,10 +4791,10 @@ function renderTreeStatus({
|
|
|
4128
4791
|
className
|
|
4129
4792
|
}) {
|
|
4130
4793
|
if (isLoading && nodes.length === 0) {
|
|
4131
|
-
return /* @__PURE__ */
|
|
4794
|
+
return /* @__PURE__ */ jsx39(
|
|
4132
4795
|
"div",
|
|
4133
4796
|
{
|
|
4134
|
-
className:
|
|
4797
|
+
className: cn35(
|
|
4135
4798
|
"py-8 text-center text-sm text-muted-foreground",
|
|
4136
4799
|
className
|
|
4137
4800
|
),
|
|
@@ -4140,19 +4803,19 @@ function renderTreeStatus({
|
|
|
4140
4803
|
);
|
|
4141
4804
|
}
|
|
4142
4805
|
if (isError) {
|
|
4143
|
-
return /* @__PURE__ */
|
|
4806
|
+
return /* @__PURE__ */ jsx39(
|
|
4144
4807
|
"div",
|
|
4145
4808
|
{
|
|
4146
|
-
className:
|
|
4809
|
+
className: cn35("py-8 text-center text-sm text-destructive", className),
|
|
4147
4810
|
children: errorMessage ?? `Failed to load ${entityLabel}.`
|
|
4148
4811
|
}
|
|
4149
4812
|
);
|
|
4150
4813
|
}
|
|
4151
4814
|
if (!isLoading && nodes.length === 0) {
|
|
4152
|
-
return /* @__PURE__ */
|
|
4815
|
+
return /* @__PURE__ */ jsxs18(
|
|
4153
4816
|
"div",
|
|
4154
4817
|
{
|
|
4155
|
-
className:
|
|
4818
|
+
className: cn35(
|
|
4156
4819
|
"py-8 text-center text-sm text-muted-foreground",
|
|
4157
4820
|
className
|
|
4158
4821
|
),
|
|
@@ -4210,7 +4873,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4210
4873
|
treeRef.current?.focus();
|
|
4211
4874
|
}
|
|
4212
4875
|
}));
|
|
4213
|
-
const resolved =
|
|
4876
|
+
const resolved = useMemo7(() => {
|
|
4214
4877
|
if (renderers) validateRendererNames(renderers);
|
|
4215
4878
|
return resolveColumns(schema, uiSchema);
|
|
4216
4879
|
}, [schema, uiSchema, renderers]);
|
|
@@ -4222,7 +4885,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4222
4885
|
onSelectionChange,
|
|
4223
4886
|
constrainSelectionToSiblings
|
|
4224
4887
|
});
|
|
4225
|
-
const defaultRenderNode =
|
|
4888
|
+
const defaultRenderNode = useMemo7(
|
|
4226
4889
|
() => buildCellRow(
|
|
4227
4890
|
resolved,
|
|
4228
4891
|
activeNodeIdRef,
|
|
@@ -4231,7 +4894,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4231
4894
|
),
|
|
4232
4895
|
[resolved, selection.effectiveOnNodeEdit, renderers]
|
|
4233
4896
|
);
|
|
4234
|
-
const renderNode =
|
|
4897
|
+
const renderNode = useMemo7(
|
|
4235
4898
|
() => resolveRenderNode(renderNodeOverride, defaultRenderNode),
|
|
4236
4899
|
[renderNodeOverride, defaultRenderNode]
|
|
4237
4900
|
);
|
|
@@ -4244,7 +4907,7 @@ function EntityTreeInner(props, ref) {
|
|
|
4244
4907
|
className
|
|
4245
4908
|
});
|
|
4246
4909
|
if (statusView) return statusView;
|
|
4247
|
-
return /* @__PURE__ */
|
|
4910
|
+
return /* @__PURE__ */ jsx39("div", { className: cn35("rounded-lg border", className), children: /* @__PURE__ */ jsx39(
|
|
4248
4911
|
TreeView,
|
|
4249
4912
|
{
|
|
4250
4913
|
ref: treeRef,
|
|
@@ -4263,17 +4926,17 @@ function EntityTreeInner(props, ref) {
|
|
|
4263
4926
|
}
|
|
4264
4927
|
) });
|
|
4265
4928
|
}
|
|
4266
|
-
var EntityTree =
|
|
4929
|
+
var EntityTree = forwardRef22(EntityTreeInner);
|
|
4267
4930
|
|
|
4268
4931
|
// src/SearchInput/SearchInput.tsx
|
|
4269
|
-
import
|
|
4270
|
-
import { Search as Search2, X as X4, ChevronDown } from "lucide-react";
|
|
4271
|
-
import { cn as
|
|
4932
|
+
import React38, { useMemo as useMemo9, useRef as useRef9, useState as useState11, useEffect as useEffect12 } from "react";
|
|
4933
|
+
import { Search as Search2, X as X4, ChevronDown as ChevronDown2 } from "lucide-react";
|
|
4934
|
+
import { cn as cn37 } from "@petrarca/sonnet-core";
|
|
4272
4935
|
import { getFieldTitle as getFieldTitle2 } from "@petrarca/sonnet-core/schema";
|
|
4273
4936
|
import { isEmptyFilterExpr } from "@petrarca/sonnet-core/search";
|
|
4274
4937
|
|
|
4275
4938
|
// src/SearchInput/useSearchInput.ts
|
|
4276
|
-
import { useCallback as useCallback5, useEffect as
|
|
4939
|
+
import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef7, useState as useState9 } from "react";
|
|
4277
4940
|
import { collectTerms } from "@petrarca/sonnet-core/search";
|
|
4278
4941
|
|
|
4279
4942
|
// src/SearchInput/schemaAdapter.ts
|
|
@@ -4348,7 +5011,7 @@ function useSearchInput({
|
|
|
4348
5011
|
minChars = 0,
|
|
4349
5012
|
searchFields
|
|
4350
5013
|
}) {
|
|
4351
|
-
const allFacets =
|
|
5014
|
+
const allFacets = useMemo8(
|
|
4352
5015
|
() => schema ? buildFacetDescriptors(schema) : [],
|
|
4353
5016
|
[schema]
|
|
4354
5017
|
);
|
|
@@ -4357,23 +5020,23 @@ function useSearchInput({
|
|
|
4357
5020
|
const terms = collectTerms(value);
|
|
4358
5021
|
return terms.length === 1 && terms[0].key === "search" ? terms[0].value : "";
|
|
4359
5022
|
})() : "";
|
|
4360
|
-
const [inputValue, setInputValue] =
|
|
4361
|
-
const [pendingFacet, setPendingFacet] =
|
|
5023
|
+
const [inputValue, setInputValue] = useState9(initialInput);
|
|
5024
|
+
const [pendingFacet, setPendingFacet] = useState9(
|
|
4362
5025
|
null
|
|
4363
5026
|
);
|
|
4364
|
-
const [draftTerms, setDraftTerms] =
|
|
5027
|
+
const [draftTerms, setDraftTerms] = useState9(
|
|
4365
5028
|
() => isFaceted ? collectTerms(value) : []
|
|
4366
5029
|
);
|
|
4367
|
-
const valueTerms =
|
|
5030
|
+
const valueTerms = useMemo8(
|
|
4368
5031
|
() => !isFaceted ? collectTerms(value) : [],
|
|
4369
5032
|
[value, isFaceted]
|
|
4370
5033
|
);
|
|
4371
5034
|
const activeTerms = isFaceted ? draftTerms : valueTerms;
|
|
4372
|
-
const activeFieldKeys =
|
|
5035
|
+
const activeFieldKeys = useMemo8(
|
|
4373
5036
|
() => new Set(activeTerms.map((t) => t.key)),
|
|
4374
5037
|
[activeTerms]
|
|
4375
5038
|
);
|
|
4376
|
-
const filteredFacets =
|
|
5039
|
+
const filteredFacets = useMemo8(() => {
|
|
4377
5040
|
if (!isFaceted || pendingFacet || inputValue.endsWith(" ")) return [];
|
|
4378
5041
|
const available = allFacets.filter((f) => !activeFieldKeys.has(f.key));
|
|
4379
5042
|
if (!inputValue.trim()) return available;
|
|
@@ -4396,7 +5059,7 @@ function useSearchInput({
|
|
|
4396
5059
|
filteredFacetsRef.current = filteredFacets;
|
|
4397
5060
|
const minCharsRef = useRef7(minChars);
|
|
4398
5061
|
minCharsRef.current = minChars;
|
|
4399
|
-
|
|
5062
|
+
useEffect9(() => {
|
|
4400
5063
|
if (!isFaceted) return;
|
|
4401
5064
|
const terms = collectTerms(value);
|
|
4402
5065
|
if (terms.length === 0) {
|
|
@@ -4408,7 +5071,7 @@ function useSearchInput({
|
|
|
4408
5071
|
const searchFieldsRef = useRef7(searchFields);
|
|
4409
5072
|
searchFieldsRef.current = searchFields;
|
|
4410
5073
|
const isMountedRef = useRef7(false);
|
|
4411
|
-
|
|
5074
|
+
useEffect9(() => {
|
|
4412
5075
|
if (!isMountedRef.current) {
|
|
4413
5076
|
isMountedRef.current = true;
|
|
4414
5077
|
return;
|
|
@@ -4533,6 +5196,8 @@ function useSearchInput({
|
|
|
4533
5196
|
} else if (!pendingFacetRef.current) {
|
|
4534
5197
|
if (allRequiredSatisfied(draftTermsRef.current)) {
|
|
4535
5198
|
submitDraft(draftTermsRef.current);
|
|
5199
|
+
} else {
|
|
5200
|
+
return true;
|
|
4536
5201
|
}
|
|
4537
5202
|
}
|
|
4538
5203
|
} else if (inputValueRef.current.trim().length >= minCharsRef.current) {
|
|
@@ -4540,6 +5205,7 @@ function useSearchInput({
|
|
|
4540
5205
|
buildSimpleExpr(inputValueRef.current, searchFieldsRef.current)
|
|
4541
5206
|
);
|
|
4542
5207
|
}
|
|
5208
|
+
return false;
|
|
4543
5209
|
}, [addChip, submitDraft, allRequiredSatisfied]);
|
|
4544
5210
|
const handleRemoveTerm = useCallback5((index) => {
|
|
4545
5211
|
const next = draftTermsRef.current.filter((_, i) => i !== index);
|
|
@@ -4575,8 +5241,8 @@ function useSearchInput({
|
|
|
4575
5241
|
}
|
|
4576
5242
|
|
|
4577
5243
|
// src/SearchInput/widgets/TextSearchWidget.tsx
|
|
4578
|
-
import { useRef as useRef8, useEffect as
|
|
4579
|
-
import { jsx as
|
|
5244
|
+
import { useRef as useRef8, useEffect as useEffect10 } from "react";
|
|
5245
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
4580
5246
|
function TextSearchWidget({
|
|
4581
5247
|
value,
|
|
4582
5248
|
onChange,
|
|
@@ -4586,10 +5252,10 @@ function TextSearchWidget({
|
|
|
4586
5252
|
autoFocus
|
|
4587
5253
|
}) {
|
|
4588
5254
|
const inputRef = useRef8(null);
|
|
4589
|
-
|
|
5255
|
+
useEffect10(() => {
|
|
4590
5256
|
if (autoFocus) inputRef.current?.focus();
|
|
4591
5257
|
}, [autoFocus]);
|
|
4592
|
-
return /* @__PURE__ */
|
|
5258
|
+
return /* @__PURE__ */ jsx40(
|
|
4593
5259
|
Input,
|
|
4594
5260
|
{
|
|
4595
5261
|
ref: inputRef,
|
|
@@ -4615,9 +5281,9 @@ function TextSearchWidget({
|
|
|
4615
5281
|
}
|
|
4616
5282
|
|
|
4617
5283
|
// src/SearchInput/widgets/EnumSearchWidget.tsx
|
|
4618
|
-
import { useEffect as
|
|
4619
|
-
import { cn as
|
|
4620
|
-
import { jsx as
|
|
5284
|
+
import { useEffect as useEffect11, useState as useState10 } from "react";
|
|
5285
|
+
import { cn as cn36 } from "@petrarca/sonnet-core";
|
|
5286
|
+
import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4621
5287
|
function EnumSearchWidget({
|
|
4622
5288
|
property,
|
|
4623
5289
|
options: widgetOptions,
|
|
@@ -4626,9 +5292,9 @@ function EnumSearchWidget({
|
|
|
4626
5292
|
placeholder,
|
|
4627
5293
|
autoFocus
|
|
4628
5294
|
}) {
|
|
4629
|
-
const [open, setOpen] =
|
|
4630
|
-
const [search, setSearch] =
|
|
4631
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
5295
|
+
const [open, setOpen] = useState10(false);
|
|
5296
|
+
const [search, setSearch] = useState10("");
|
|
5297
|
+
const [highlightedIndex, setHighlightedIndex] = useState10(0);
|
|
4632
5298
|
const enumValues = property.enum ?? [];
|
|
4633
5299
|
const enumNames = widgetOptions.enumNames ?? {};
|
|
4634
5300
|
const items = enumValues.map((val) => ({
|
|
@@ -4638,10 +5304,10 @@ function EnumSearchWidget({
|
|
|
4638
5304
|
const filtered = search ? items.filter(
|
|
4639
5305
|
(item) => item.label.toLowerCase().includes(search.toLowerCase())
|
|
4640
5306
|
) : items;
|
|
4641
|
-
|
|
5307
|
+
useEffect11(() => {
|
|
4642
5308
|
setHighlightedIndex(0);
|
|
4643
5309
|
}, [filtered.length, search]);
|
|
4644
|
-
|
|
5310
|
+
useEffect11(() => {
|
|
4645
5311
|
if (autoFocus) {
|
|
4646
5312
|
requestAnimationFrame(() => setOpen(true));
|
|
4647
5313
|
}
|
|
@@ -4681,8 +5347,8 @@ function EnumSearchWidget({
|
|
|
4681
5347
|
return;
|
|
4682
5348
|
}
|
|
4683
5349
|
}
|
|
4684
|
-
return /* @__PURE__ */
|
|
4685
|
-
/* @__PURE__ */
|
|
5350
|
+
return /* @__PURE__ */ jsxs19(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
5351
|
+
/* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
|
|
4686
5352
|
"button",
|
|
4687
5353
|
{
|
|
4688
5354
|
type: "button",
|
|
@@ -4691,14 +5357,14 @@ function EnumSearchWidget({
|
|
|
4691
5357
|
children: placeholder ?? "Select..."
|
|
4692
5358
|
}
|
|
4693
5359
|
) }),
|
|
4694
|
-
/* @__PURE__ */
|
|
5360
|
+
/* @__PURE__ */ jsxs19(
|
|
4695
5361
|
PopoverContent,
|
|
4696
5362
|
{
|
|
4697
5363
|
className: "w-48 p-1",
|
|
4698
5364
|
align: "start",
|
|
4699
5365
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
4700
5366
|
children: [
|
|
4701
|
-
/* @__PURE__ */
|
|
5367
|
+
/* @__PURE__ */ jsx41(
|
|
4702
5368
|
"input",
|
|
4703
5369
|
{
|
|
4704
5370
|
autoFocus: true,
|
|
@@ -4709,13 +5375,13 @@ function EnumSearchWidget({
|
|
|
4709
5375
|
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
5376
|
}
|
|
4711
5377
|
),
|
|
4712
|
-
/* @__PURE__ */
|
|
4713
|
-
filtered.length === 0 && /* @__PURE__ */
|
|
4714
|
-
filtered.map((item, i) => /* @__PURE__ */
|
|
5378
|
+
/* @__PURE__ */ jsxs19("div", { children: [
|
|
5379
|
+
filtered.length === 0 && /* @__PURE__ */ jsx41("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No matches" }),
|
|
5380
|
+
filtered.map((item, i) => /* @__PURE__ */ jsx41(
|
|
4715
5381
|
"button",
|
|
4716
5382
|
{
|
|
4717
5383
|
type: "button",
|
|
4718
|
-
className:
|
|
5384
|
+
className: cn36(
|
|
4719
5385
|
"w-full text-left px-2 py-1.5 text-sm rounded transition-colors",
|
|
4720
5386
|
i === highlightedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
|
|
4721
5387
|
),
|
|
@@ -4754,7 +5420,7 @@ var DEFAULT_SEARCH_WIDGETS = {
|
|
|
4754
5420
|
};
|
|
4755
5421
|
|
|
4756
5422
|
// src/SearchInput/SearchInput.tsx
|
|
4757
|
-
import { Fragment as
|
|
5423
|
+
import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
4758
5424
|
function resolveSearchDefaults(props) {
|
|
4759
5425
|
return {
|
|
4760
5426
|
mode: props.mode ?? "explicit",
|
|
@@ -4774,8 +5440,8 @@ function FacetPicker({
|
|
|
4774
5440
|
acceptFacet,
|
|
4775
5441
|
inputRef
|
|
4776
5442
|
}) {
|
|
4777
|
-
return /* @__PURE__ */
|
|
4778
|
-
/* @__PURE__ */
|
|
5443
|
+
return /* @__PURE__ */ jsxs20(Popover, { open: pickerVisible, onOpenChange: setPickerOpen, modal: false, children: [
|
|
5444
|
+
/* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx42(
|
|
4779
5445
|
"button",
|
|
4780
5446
|
{
|
|
4781
5447
|
type: "button",
|
|
@@ -4786,21 +5452,21 @@ function FacetPicker({
|
|
|
4786
5452
|
setPickerOpen((o) => !o);
|
|
4787
5453
|
inputRef.current?.focus();
|
|
4788
5454
|
},
|
|
4789
|
-
children: /* @__PURE__ */
|
|
5455
|
+
children: /* @__PURE__ */ jsx42(ChevronDown2, { className: "h-3 w-3" })
|
|
4790
5456
|
}
|
|
4791
5457
|
) }),
|
|
4792
|
-
/* @__PURE__ */
|
|
5458
|
+
/* @__PURE__ */ jsx42(
|
|
4793
5459
|
PopoverContent,
|
|
4794
5460
|
{
|
|
4795
|
-
className:
|
|
5461
|
+
className: cn37("w-44 p-1", !hasFacetsToShow && "hidden"),
|
|
4796
5462
|
align: "start",
|
|
4797
5463
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
4798
5464
|
onFocusOutside: (e) => e.preventDefault(),
|
|
4799
|
-
children: filteredFacets.map((facet, i) => /* @__PURE__ */
|
|
5465
|
+
children: filteredFacets.map((facet, i) => /* @__PURE__ */ jsx42(
|
|
4800
5466
|
"button",
|
|
4801
5467
|
{
|
|
4802
5468
|
type: "button",
|
|
4803
|
-
className:
|
|
5469
|
+
className: cn37(
|
|
4804
5470
|
"w-full text-left px-2 py-1.5 text-sm rounded transition-colors",
|
|
4805
5471
|
i === highlightedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
|
|
4806
5472
|
),
|
|
@@ -4834,7 +5500,7 @@ function ValueEntry({
|
|
|
4834
5500
|
onInputFocus
|
|
4835
5501
|
}) {
|
|
4836
5502
|
if (pendingFacet && PendingWidget) {
|
|
4837
|
-
return /* @__PURE__ */
|
|
5503
|
+
return /* @__PURE__ */ jsx42(
|
|
4838
5504
|
PendingWidget,
|
|
4839
5505
|
{
|
|
4840
5506
|
property: pendingFacet.property,
|
|
@@ -4856,7 +5522,7 @@ function ValueEntry({
|
|
|
4856
5522
|
}
|
|
4857
5523
|
);
|
|
4858
5524
|
}
|
|
4859
|
-
return /* @__PURE__ */
|
|
5525
|
+
return /* @__PURE__ */ jsx42(
|
|
4860
5526
|
Input,
|
|
4861
5527
|
{
|
|
4862
5528
|
ref: inputRef,
|
|
@@ -4925,10 +5591,10 @@ function ActiveChips({
|
|
|
4925
5591
|
schema,
|
|
4926
5592
|
onRemove
|
|
4927
5593
|
}) {
|
|
4928
|
-
return /* @__PURE__ */
|
|
5594
|
+
return /* @__PURE__ */ jsx42(Fragment4, { children: terms.map((term, i) => {
|
|
4929
5595
|
const property = schema?.properties?.[term.key];
|
|
4930
5596
|
const label = property ? getFieldTitle2(term.key, property) : term.key;
|
|
4931
|
-
return /* @__PURE__ */
|
|
5597
|
+
return /* @__PURE__ */ jsx42(
|
|
4932
5598
|
FilterChip,
|
|
4933
5599
|
{
|
|
4934
5600
|
label: `${label}: ${term.value}`,
|
|
@@ -4952,8 +5618,8 @@ function SearchActions({
|
|
|
4952
5618
|
onClear,
|
|
4953
5619
|
onCommit
|
|
4954
5620
|
}) {
|
|
4955
|
-
return /* @__PURE__ */
|
|
4956
|
-
!isEmpty && /* @__PURE__ */
|
|
5621
|
+
return /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
5622
|
+
!isEmpty && /* @__PURE__ */ jsx42(
|
|
4957
5623
|
"button",
|
|
4958
5624
|
{
|
|
4959
5625
|
type: "button",
|
|
@@ -4963,10 +5629,10 @@ function SearchActions({
|
|
|
4963
5629
|
},
|
|
4964
5630
|
className: "text-muted-foreground hover:text-foreground transition-colors shrink-0",
|
|
4965
5631
|
"aria-label": "Clear search",
|
|
4966
|
-
children: /* @__PURE__ */
|
|
5632
|
+
children: /* @__PURE__ */ jsx42(X4, { className: "h-4 w-4" })
|
|
4967
5633
|
}
|
|
4968
5634
|
),
|
|
4969
|
-
showSearchButton && mode === "explicit" && /* @__PURE__ */
|
|
5635
|
+
showSearchButton && mode === "explicit" && /* @__PURE__ */ jsx42(
|
|
4970
5636
|
Button,
|
|
4971
5637
|
{
|
|
4972
5638
|
type: "button",
|
|
@@ -4998,10 +5664,10 @@ function SearchInput(props) {
|
|
|
4998
5664
|
const { mode, debounceMs, minChars, showSearchButton, disabled } = resolveSearchDefaults(props);
|
|
4999
5665
|
const inputRef = useRef9(null);
|
|
5000
5666
|
const containerRef = useRef9(null);
|
|
5001
|
-
const [pickerOpen, setPickerOpen] =
|
|
5002
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
5003
|
-
const [pickerNavigated, setPickerNavigated] =
|
|
5004
|
-
|
|
5667
|
+
const [pickerOpen, setPickerOpen] = useState11(false);
|
|
5668
|
+
const [highlightedIndex, setHighlightedIndex] = useState11(-1);
|
|
5669
|
+
const [pickerNavigated, setPickerNavigated] = useState11(false);
|
|
5670
|
+
useEffect12(() => {
|
|
5005
5671
|
if (!pickerOpen) return;
|
|
5006
5672
|
function handleMouseDown(e) {
|
|
5007
5673
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
@@ -5011,7 +5677,7 @@ function SearchInput(props) {
|
|
|
5011
5677
|
document.addEventListener("mousedown", handleMouseDown);
|
|
5012
5678
|
return () => document.removeEventListener("mousedown", handleMouseDown);
|
|
5013
5679
|
}, [pickerOpen]);
|
|
5014
|
-
const widgetRegistry =
|
|
5680
|
+
const widgetRegistry = useMemo9(
|
|
5015
5681
|
() => mergeWidgetRegistry(customWidgets),
|
|
5016
5682
|
[customWidgets]
|
|
5017
5683
|
);
|
|
@@ -5039,7 +5705,7 @@ function SearchInput(props) {
|
|
|
5039
5705
|
searchFields
|
|
5040
5706
|
});
|
|
5041
5707
|
const isEmpty = isEmptyFilterExpr(value) && inputValue === "";
|
|
5042
|
-
|
|
5708
|
+
useEffect12(() => {
|
|
5043
5709
|
setHighlightedIndex(-1);
|
|
5044
5710
|
}, [filteredFacets, pickerOpen]);
|
|
5045
5711
|
const resolvedPlaceholder = resolvePlaceholder(
|
|
@@ -5051,7 +5717,7 @@ function SearchInput(props) {
|
|
|
5051
5717
|
const showFacetControls = isFaceted && !pendingFacet;
|
|
5052
5718
|
const pickerVisible = showFacetControls && pickerOpen;
|
|
5053
5719
|
const hasFacetsToShow = pickerVisible && filteredFacets.length > 0;
|
|
5054
|
-
const acceptFacet =
|
|
5720
|
+
const acceptFacet = React38.useCallback(
|
|
5055
5721
|
(facet) => {
|
|
5056
5722
|
selectFacet(facet);
|
|
5057
5723
|
setPickerOpen(false);
|
|
@@ -5075,11 +5741,11 @@ function SearchInput(props) {
|
|
|
5075
5741
|
acceptFacet,
|
|
5076
5742
|
handleKeyDown
|
|
5077
5743
|
};
|
|
5078
|
-
return /* @__PURE__ */
|
|
5744
|
+
return /* @__PURE__ */ jsxs20(
|
|
5079
5745
|
"div",
|
|
5080
5746
|
{
|
|
5081
5747
|
ref: containerRef,
|
|
5082
|
-
className:
|
|
5748
|
+
className: cn37(
|
|
5083
5749
|
"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
5750
|
disabled ? "opacity-50 cursor-not-allowed" : "cursor-text",
|
|
5085
5751
|
className
|
|
@@ -5092,8 +5758,8 @@ function SearchInput(props) {
|
|
|
5092
5758
|
}
|
|
5093
5759
|
},
|
|
5094
5760
|
children: [
|
|
5095
|
-
/* @__PURE__ */
|
|
5096
|
-
isFaceted && /* @__PURE__ */
|
|
5761
|
+
/* @__PURE__ */ jsx42(Search2, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
|
|
5762
|
+
isFaceted && /* @__PURE__ */ jsx42(
|
|
5097
5763
|
ActiveChips,
|
|
5098
5764
|
{
|
|
5099
5765
|
terms: activeTerms,
|
|
@@ -5101,12 +5767,12 @@ function SearchInput(props) {
|
|
|
5101
5767
|
onRemove: handleRemoveTerm
|
|
5102
5768
|
}
|
|
5103
5769
|
),
|
|
5104
|
-
pendingFacet && /* @__PURE__ */
|
|
5770
|
+
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
5771
|
pendingFacet.label,
|
|
5106
5772
|
":"
|
|
5107
5773
|
] }),
|
|
5108
|
-
/* @__PURE__ */
|
|
5109
|
-
showFacetControls && /* @__PURE__ */
|
|
5774
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 flex-1 min-w-[120px]", children: [
|
|
5775
|
+
showFacetControls && /* @__PURE__ */ jsx42(
|
|
5110
5776
|
FacetPicker,
|
|
5111
5777
|
{
|
|
5112
5778
|
pickerVisible,
|
|
@@ -5119,7 +5785,7 @@ function SearchInput(props) {
|
|
|
5119
5785
|
inputRef
|
|
5120
5786
|
}
|
|
5121
5787
|
),
|
|
5122
|
-
/* @__PURE__ */
|
|
5788
|
+
/* @__PURE__ */ jsx42(
|
|
5123
5789
|
ValueEntry,
|
|
5124
5790
|
{
|
|
5125
5791
|
pendingFacet,
|
|
@@ -5143,14 +5809,20 @@ function SearchInput(props) {
|
|
|
5143
5809
|
}
|
|
5144
5810
|
)
|
|
5145
5811
|
] }),
|
|
5146
|
-
/* @__PURE__ */
|
|
5812
|
+
/* @__PURE__ */ jsx42(
|
|
5147
5813
|
SearchActions,
|
|
5148
5814
|
{
|
|
5149
5815
|
isEmpty,
|
|
5150
5816
|
showSearchButton,
|
|
5151
5817
|
mode,
|
|
5152
5818
|
onClear: handleClear,
|
|
5153
|
-
onCommit:
|
|
5819
|
+
onCommit: () => {
|
|
5820
|
+
if (handleCommit()) {
|
|
5821
|
+
setPickerNavigated(false);
|
|
5822
|
+
setPickerOpen(true);
|
|
5823
|
+
inputRef.current?.focus();
|
|
5824
|
+
}
|
|
5825
|
+
}
|
|
5154
5826
|
}
|
|
5155
5827
|
)
|
|
5156
5828
|
]
|
|
@@ -5158,14 +5830,14 @@ function SearchInput(props) {
|
|
|
5158
5830
|
);
|
|
5159
5831
|
}
|
|
5160
5832
|
function FilterChip({ label, onRemove }) {
|
|
5161
|
-
return /* @__PURE__ */
|
|
5833
|
+
return /* @__PURE__ */ jsxs20(
|
|
5162
5834
|
Badge,
|
|
5163
5835
|
{
|
|
5164
5836
|
variant: "secondary",
|
|
5165
5837
|
className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full",
|
|
5166
5838
|
children: [
|
|
5167
5839
|
label,
|
|
5168
|
-
/* @__PURE__ */
|
|
5840
|
+
/* @__PURE__ */ jsx42(
|
|
5169
5841
|
"button",
|
|
5170
5842
|
{
|
|
5171
5843
|
type: "button",
|
|
@@ -5175,7 +5847,7 @@ function FilterChip({ label, onRemove }) {
|
|
|
5175
5847
|
},
|
|
5176
5848
|
className: "ml-0.5 hover:text-destructive transition-colors",
|
|
5177
5849
|
"aria-label": `Remove filter ${label}`,
|
|
5178
|
-
children: /* @__PURE__ */
|
|
5850
|
+
children: /* @__PURE__ */ jsx42(X4, { className: "h-3 w-3" })
|
|
5179
5851
|
}
|
|
5180
5852
|
)
|
|
5181
5853
|
]
|
|
@@ -5185,9 +5857,9 @@ function FilterChip({ label, onRemove }) {
|
|
|
5185
5857
|
|
|
5186
5858
|
// src/Clipboard/ClipboardButton.tsx
|
|
5187
5859
|
import { Copy } from "lucide-react";
|
|
5188
|
-
import { jsx as
|
|
5860
|
+
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
5189
5861
|
function ClipboardButton({ hasItems, onClick }) {
|
|
5190
|
-
return /* @__PURE__ */
|
|
5862
|
+
return /* @__PURE__ */ jsx43(
|
|
5191
5863
|
Button,
|
|
5192
5864
|
{
|
|
5193
5865
|
variant: "ghost",
|
|
@@ -5198,7 +5870,7 @@ function ClipboardButton({ hasItems, onClick }) {
|
|
|
5198
5870
|
opacity: hasItems ? 1 : 0.4,
|
|
5199
5871
|
cursor: hasItems ? "pointer" : "not-allowed"
|
|
5200
5872
|
},
|
|
5201
|
-
children: /* @__PURE__ */
|
|
5873
|
+
children: /* @__PURE__ */ jsx43(Copy, { size: 16 })
|
|
5202
5874
|
}
|
|
5203
5875
|
);
|
|
5204
5876
|
}
|
|
@@ -5206,13 +5878,13 @@ var ClipboardButton_default = ClipboardButton;
|
|
|
5206
5878
|
|
|
5207
5879
|
// src/Clipboard/ClipboardItem.tsx
|
|
5208
5880
|
import { X as X5, Plus } from "lucide-react";
|
|
5209
|
-
import { jsx as
|
|
5881
|
+
import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
5210
5882
|
function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
5211
5883
|
const handleAddClick = (e) => {
|
|
5212
5884
|
const keepInClipboard = e.shiftKey;
|
|
5213
5885
|
onAddItem(item, keepInClipboard);
|
|
5214
5886
|
};
|
|
5215
|
-
return /* @__PURE__ */
|
|
5887
|
+
return /* @__PURE__ */ jsx44(
|
|
5216
5888
|
"div",
|
|
5217
5889
|
{
|
|
5218
5890
|
className: "p-3 rounded mb-2",
|
|
@@ -5220,17 +5892,17 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
|
5220
5892
|
borderLeft: `4px solid ${item.color}`,
|
|
5221
5893
|
backgroundColor: "#f8f9fa"
|
|
5222
5894
|
},
|
|
5223
|
-
children: /* @__PURE__ */
|
|
5224
|
-
/* @__PURE__ */
|
|
5225
|
-
/* @__PURE__ */
|
|
5226
|
-
/* @__PURE__ */
|
|
5227
|
-
/* @__PURE__ */
|
|
5895
|
+
children: /* @__PURE__ */ jsxs21(SimpleGroup, { justify: "space-between", wrap: "nowrap", align: "flex-start", children: [
|
|
5896
|
+
/* @__PURE__ */ jsxs21("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
|
|
5897
|
+
/* @__PURE__ */ jsx44("p", { className: "text-sm font-semibold truncate", children: item.label }),
|
|
5898
|
+
/* @__PURE__ */ jsx44("p", { className: "text-xs text-muted-foreground truncate", children: item.displayName }),
|
|
5899
|
+
/* @__PURE__ */ jsxs21("p", { className: "text-xs text-muted-foreground font-mono", children: [
|
|
5228
5900
|
"#",
|
|
5229
5901
|
item.entityId
|
|
5230
5902
|
] })
|
|
5231
5903
|
] }),
|
|
5232
|
-
/* @__PURE__ */
|
|
5233
|
-
/* @__PURE__ */
|
|
5904
|
+
/* @__PURE__ */ jsxs21(SimpleGroup, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
|
|
5905
|
+
/* @__PURE__ */ jsxs21(
|
|
5234
5906
|
Button,
|
|
5235
5907
|
{
|
|
5236
5908
|
size: "sm",
|
|
@@ -5238,19 +5910,19 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
|
5238
5910
|
onClick: handleAddClick,
|
|
5239
5911
|
title: "Click to add and remove from clipboard, Shift+Click to keep in clipboard",
|
|
5240
5912
|
children: [
|
|
5241
|
-
/* @__PURE__ */
|
|
5913
|
+
/* @__PURE__ */ jsx44(Plus, { size: 16 }),
|
|
5242
5914
|
"Add"
|
|
5243
5915
|
]
|
|
5244
5916
|
}
|
|
5245
5917
|
),
|
|
5246
|
-
/* @__PURE__ */
|
|
5918
|
+
/* @__PURE__ */ jsx44(
|
|
5247
5919
|
Button,
|
|
5248
5920
|
{
|
|
5249
5921
|
size: "sm",
|
|
5250
5922
|
variant: "ghost",
|
|
5251
5923
|
onClick: () => onRemove(item.id),
|
|
5252
5924
|
title: "Remove from clipboard",
|
|
5253
|
-
children: /* @__PURE__ */
|
|
5925
|
+
children: /* @__PURE__ */ jsx44(X5, { size: 16 })
|
|
5254
5926
|
}
|
|
5255
5927
|
)
|
|
5256
5928
|
] })
|
|
@@ -5348,16 +6020,16 @@ var useClipboard = create()(
|
|
|
5348
6020
|
var clipboardStore_default = useClipboard;
|
|
5349
6021
|
|
|
5350
6022
|
// src/Clipboard/ClipboardMenu.tsx
|
|
5351
|
-
import { jsx as
|
|
6023
|
+
import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
5352
6024
|
function ClipboardMenu({ onAddItem }) {
|
|
5353
6025
|
const { items, removeItem, clear } = clipboardStore_default();
|
|
5354
6026
|
if (items.length === 0) {
|
|
5355
|
-
return /* @__PURE__ */
|
|
5356
|
-
/* @__PURE__ */
|
|
5357
|
-
/* @__PURE__ */
|
|
6027
|
+
return /* @__PURE__ */ jsxs22("div", { style: { padding: "16px", textAlign: "center", width: "300px" }, children: [
|
|
6028
|
+
/* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground", children: "No items in clipboard" }),
|
|
6029
|
+
/* @__PURE__ */ jsx45("p", { className: "text-xs text-muted-foreground mt-1", children: 'Right-click a node and select "Copy"' })
|
|
5358
6030
|
] });
|
|
5359
6031
|
}
|
|
5360
|
-
return /* @__PURE__ */
|
|
6032
|
+
return /* @__PURE__ */ jsxs22(
|
|
5361
6033
|
"div",
|
|
5362
6034
|
{
|
|
5363
6035
|
style: {
|
|
@@ -5368,7 +6040,7 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
5368
6040
|
maxHeight: "500px"
|
|
5369
6041
|
},
|
|
5370
6042
|
children: [
|
|
5371
|
-
/* @__PURE__ */
|
|
6043
|
+
/* @__PURE__ */ jsx45(ScrollArea, { className: "flex-1 p-3 min-h-0", children: /* @__PURE__ */ jsx45(SimpleStack, { gap: 0, children: items.map((item) => /* @__PURE__ */ jsx45(
|
|
5372
6044
|
ClipboardItem_default,
|
|
5373
6045
|
{
|
|
5374
6046
|
item,
|
|
@@ -5377,8 +6049,8 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
5377
6049
|
},
|
|
5378
6050
|
item.id
|
|
5379
6051
|
)) }) }),
|
|
5380
|
-
/* @__PURE__ */
|
|
5381
|
-
/* @__PURE__ */
|
|
6052
|
+
/* @__PURE__ */ jsx45(Separator3, {}),
|
|
6053
|
+
/* @__PURE__ */ jsx45("div", { style: { padding: "8px 12px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs22(
|
|
5382
6054
|
Button,
|
|
5383
6055
|
{
|
|
5384
6056
|
className: "w-full",
|
|
@@ -5386,7 +6058,7 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
5386
6058
|
size: "sm",
|
|
5387
6059
|
onClick: clear,
|
|
5388
6060
|
children: [
|
|
5389
|
-
/* @__PURE__ */
|
|
6061
|
+
/* @__PURE__ */ jsx45(Trash2, { size: 16 }),
|
|
5390
6062
|
"Clear All (",
|
|
5391
6063
|
items.length,
|
|
5392
6064
|
")"
|
|
@@ -5408,6 +6080,7 @@ export {
|
|
|
5408
6080
|
Badge,
|
|
5409
6081
|
Button,
|
|
5410
6082
|
CELL_RENDERERS,
|
|
6083
|
+
Calendar,
|
|
5411
6084
|
Card,
|
|
5412
6085
|
CardContent,
|
|
5413
6086
|
CardDescription,
|
|
@@ -5430,6 +6103,9 @@ export {
|
|
|
5430
6103
|
CommandList,
|
|
5431
6104
|
CommandSeparator,
|
|
5432
6105
|
CommandShortcut,
|
|
6106
|
+
DEFAULT_SEARCH_WIDGETS,
|
|
6107
|
+
DateInput,
|
|
6108
|
+
DateTimeInput,
|
|
5433
6109
|
Dialog,
|
|
5434
6110
|
DialogClose,
|
|
5435
6111
|
DialogContent,
|
|
@@ -5460,13 +6136,14 @@ export {
|
|
|
5460
6136
|
EntityTree,
|
|
5461
6137
|
IconButton,
|
|
5462
6138
|
Input,
|
|
6139
|
+
InputError,
|
|
5463
6140
|
InputGroup,
|
|
5464
6141
|
InputGroupAddon,
|
|
5465
6142
|
InputGroupButton,
|
|
5466
6143
|
InputGroupInput,
|
|
5467
6144
|
InputGroupText,
|
|
5468
6145
|
InputGroupTextarea,
|
|
5469
|
-
|
|
6146
|
+
Label3 as Label,
|
|
5470
6147
|
Popover,
|
|
5471
6148
|
PopoverContent,
|
|
5472
6149
|
PopoverTrigger,
|
|
@@ -5476,7 +6153,17 @@ export {
|
|
|
5476
6153
|
ScrollArea,
|
|
5477
6154
|
ScrollBar,
|
|
5478
6155
|
SearchInput,
|
|
5479
|
-
|
|
6156
|
+
Select,
|
|
6157
|
+
SelectContent,
|
|
6158
|
+
SelectGroup,
|
|
6159
|
+
SelectItem,
|
|
6160
|
+
SelectLabel,
|
|
6161
|
+
SelectScrollDownButton,
|
|
6162
|
+
SelectScrollUpButton,
|
|
6163
|
+
SelectSeparator,
|
|
6164
|
+
SelectTrigger,
|
|
6165
|
+
SelectValue,
|
|
6166
|
+
Separator3 as Separator,
|
|
5480
6167
|
Sheet,
|
|
5481
6168
|
SheetBody,
|
|
5482
6169
|
SheetClose,
|
|
@@ -5509,6 +6196,7 @@ export {
|
|
|
5509
6196
|
TabsSeparator,
|
|
5510
6197
|
TabsTrigger,
|
|
5511
6198
|
Textarea,
|
|
6199
|
+
TimeInput,
|
|
5512
6200
|
Tooltip,
|
|
5513
6201
|
TooltipContent,
|
|
5514
6202
|
TooltipProvider,
|