@petrarca/sonnet-ui 0.3.0 → 0.4.1
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 +82 -16
- package/dist/index.d.ts +91 -1
- package/dist/index.js +583 -332
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/styles.css +6 -6
package/dist/index.js
CHANGED
|
@@ -889,21 +889,55 @@ var Separator2 = React14.forwardRef(
|
|
|
889
889
|
);
|
|
890
890
|
Separator2.displayName = SeparatorPrimitive.Root.displayName;
|
|
891
891
|
|
|
892
|
-
// src/
|
|
892
|
+
// src/resize-handle.tsx
|
|
893
893
|
import * as React15 from "react";
|
|
894
|
+
import { cn as cn17 } from "@petrarca/sonnet-core";
|
|
895
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
|
896
|
+
var ResizeHandle = React15.forwardRef(
|
|
897
|
+
({ orientation = "vertical", gripLength = 48, className, style, ...props }, ref) => {
|
|
898
|
+
const isVertical = orientation === "vertical";
|
|
899
|
+
return /* @__PURE__ */ jsx17(
|
|
900
|
+
"div",
|
|
901
|
+
{
|
|
902
|
+
ref,
|
|
903
|
+
role: "separator",
|
|
904
|
+
"aria-orientation": orientation,
|
|
905
|
+
className: cn17(
|
|
906
|
+
"group relative flex shrink-0 select-none touch-none items-center justify-center rounded-sm",
|
|
907
|
+
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
|
|
908
|
+
isVertical ? "mx-1 w-2 cursor-col-resize" : "my-1 h-2 cursor-row-resize",
|
|
909
|
+
className
|
|
910
|
+
),
|
|
911
|
+
style,
|
|
912
|
+
...props,
|
|
913
|
+
children: /* @__PURE__ */ jsx17(
|
|
914
|
+
"div",
|
|
915
|
+
{
|
|
916
|
+
className: "pointer-events-none absolute rounded-full bg-border transition-colors group-hover:bg-border-strong",
|
|
917
|
+
style: isVertical ? { width: 4, height: gripLength } : { height: 4, width: gripLength }
|
|
918
|
+
}
|
|
919
|
+
)
|
|
920
|
+
}
|
|
921
|
+
);
|
|
922
|
+
}
|
|
923
|
+
);
|
|
924
|
+
ResizeHandle.displayName = "ResizeHandle";
|
|
925
|
+
|
|
926
|
+
// src/sheet.tsx
|
|
927
|
+
import * as React16 from "react";
|
|
894
928
|
import * as DialogPrimitive2 from "@radix-ui/react-dialog";
|
|
895
929
|
import { X as X2 } from "lucide-react";
|
|
896
|
-
import { cn as
|
|
897
|
-
import { jsx as
|
|
930
|
+
import { cn as cn18 } from "@petrarca/sonnet-core";
|
|
931
|
+
import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
898
932
|
var Sheet = DialogPrimitive2.Root;
|
|
899
933
|
var SheetTrigger = DialogPrimitive2.Trigger;
|
|
900
934
|
var SheetClose = DialogPrimitive2.Close;
|
|
901
935
|
var SheetPortal = DialogPrimitive2.Portal;
|
|
902
|
-
var SheetOverlay =
|
|
936
|
+
var SheetOverlay = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
|
|
903
937
|
DialogPrimitive2.Overlay,
|
|
904
938
|
{
|
|
905
939
|
ref,
|
|
906
|
-
className:
|
|
940
|
+
className: cn18(
|
|
907
941
|
"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",
|
|
908
942
|
className
|
|
909
943
|
),
|
|
@@ -911,27 +945,27 @@ var SheetOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
911
945
|
}
|
|
912
946
|
));
|
|
913
947
|
SheetOverlay.displayName = "SheetOverlay";
|
|
914
|
-
var SheetContent =
|
|
915
|
-
({ className, children, side = "right", offsetTop = "0px", ...props }, ref) => /* @__PURE__ */ jsxs5(SheetPortal, { children: [
|
|
916
|
-
/* @__PURE__ */
|
|
948
|
+
var SheetContent = React16.forwardRef(
|
|
949
|
+
({ className, children, side = "right", offsetTop = "0px", style, ...props }, ref) => /* @__PURE__ */ jsxs5(SheetPortal, { children: [
|
|
950
|
+
/* @__PURE__ */ jsx18(SheetOverlay, {}),
|
|
917
951
|
/* @__PURE__ */ jsxs5(
|
|
918
952
|
DialogPrimitive2.Content,
|
|
919
953
|
{
|
|
920
954
|
ref,
|
|
921
|
-
className:
|
|
955
|
+
className: cn18(
|
|
922
956
|
"fixed z-50 flex flex-col bg-background shadow-xl transition-transform duration-300 ease-in-out",
|
|
923
957
|
"bottom-0 w-[480px] max-w-[90vw] border-l",
|
|
924
958
|
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",
|
|
925
959
|
side === "left" && "left-0 border-l-0 border-r data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
926
960
|
className
|
|
927
961
|
),
|
|
928
|
-
style: { top: offsetTop },
|
|
962
|
+
style: { top: offsetTop, ...style },
|
|
929
963
|
...props,
|
|
930
964
|
children: [
|
|
931
965
|
children,
|
|
932
966
|
/* @__PURE__ */ jsxs5(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: [
|
|
933
|
-
/* @__PURE__ */
|
|
934
|
-
/* @__PURE__ */
|
|
967
|
+
/* @__PURE__ */ jsx18(X2, { className: "h-4 w-4" }),
|
|
968
|
+
/* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
|
|
935
969
|
] })
|
|
936
970
|
]
|
|
937
971
|
}
|
|
@@ -942,21 +976,21 @@ SheetContent.displayName = "SheetContent";
|
|
|
942
976
|
var SheetHeader = ({
|
|
943
977
|
className,
|
|
944
978
|
...props
|
|
945
|
-
}) => /* @__PURE__ */
|
|
946
|
-
var SheetTitle =
|
|
979
|
+
}) => /* @__PURE__ */ jsx18("div", { className: cn18("shrink-0 border-b px-6 py-4", className), ...props });
|
|
980
|
+
var SheetTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
|
|
947
981
|
DialogPrimitive2.Title,
|
|
948
982
|
{
|
|
949
983
|
ref,
|
|
950
|
-
className:
|
|
984
|
+
className: cn18("text-lg font-semibold", className),
|
|
951
985
|
...props
|
|
952
986
|
}
|
|
953
987
|
));
|
|
954
988
|
SheetTitle.displayName = "SheetTitle";
|
|
955
|
-
var SheetDescription =
|
|
989
|
+
var SheetDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
|
|
956
990
|
DialogPrimitive2.Description,
|
|
957
991
|
{
|
|
958
992
|
ref,
|
|
959
|
-
className:
|
|
993
|
+
className: cn18("text-sm text-muted-foreground mt-1", className),
|
|
960
994
|
...props
|
|
961
995
|
}
|
|
962
996
|
));
|
|
@@ -964,20 +998,20 @@ SheetDescription.displayName = "SheetDescription";
|
|
|
964
998
|
var SheetBody = ({
|
|
965
999
|
className,
|
|
966
1000
|
...props
|
|
967
|
-
}) => /* @__PURE__ */
|
|
1001
|
+
}) => /* @__PURE__ */ jsx18(
|
|
968
1002
|
"div",
|
|
969
1003
|
{
|
|
970
|
-
className:
|
|
1004
|
+
className: cn18("flex-1 overflow-y-auto px-6 py-4", className),
|
|
971
1005
|
...props
|
|
972
1006
|
}
|
|
973
1007
|
);
|
|
974
1008
|
var SheetFooter = ({
|
|
975
1009
|
className,
|
|
976
1010
|
...props
|
|
977
|
-
}) => /* @__PURE__ */
|
|
1011
|
+
}) => /* @__PURE__ */ jsx18(
|
|
978
1012
|
"div",
|
|
979
1013
|
{
|
|
980
|
-
className:
|
|
1014
|
+
className: cn18(
|
|
981
1015
|
"shrink-0 border-t px-6 py-4 flex justify-end gap-2",
|
|
982
1016
|
className
|
|
983
1017
|
),
|
|
@@ -986,8 +1020,8 @@ var SheetFooter = ({
|
|
|
986
1020
|
);
|
|
987
1021
|
|
|
988
1022
|
// src/simple-group.tsx
|
|
989
|
-
import { cn as
|
|
990
|
-
import { jsx as
|
|
1023
|
+
import { cn as cn19 } from "@petrarca/sonnet-core";
|
|
1024
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
991
1025
|
var gapMap = {
|
|
992
1026
|
0: "gap-0",
|
|
993
1027
|
xs: "gap-1",
|
|
@@ -1049,10 +1083,10 @@ function SimpleGroup({
|
|
|
1049
1083
|
const wrapClass = wrap ? wrapMap[wrap] : void 0;
|
|
1050
1084
|
const growClass = grow ? "[&>*]:flex-1" : void 0;
|
|
1051
1085
|
const mtClass = mt ? mtMap[mt] : void 0;
|
|
1052
|
-
return /* @__PURE__ */
|
|
1086
|
+
return /* @__PURE__ */ jsx19(
|
|
1053
1087
|
"div",
|
|
1054
1088
|
{
|
|
1055
|
-
className:
|
|
1089
|
+
className: cn19(
|
|
1056
1090
|
"flex flex-row",
|
|
1057
1091
|
gapClass,
|
|
1058
1092
|
alignClass,
|
|
@@ -1070,8 +1104,8 @@ function SimpleGroup({
|
|
|
1070
1104
|
}
|
|
1071
1105
|
|
|
1072
1106
|
// src/simple-stack.tsx
|
|
1073
|
-
import { cn as
|
|
1074
|
-
import { jsx as
|
|
1107
|
+
import { cn as cn20 } from "@petrarca/sonnet-core";
|
|
1108
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
1075
1109
|
var gapMap2 = {
|
|
1076
1110
|
0: "gap-0",
|
|
1077
1111
|
xs: "gap-1",
|
|
@@ -1111,10 +1145,10 @@ function SimpleStack({
|
|
|
1111
1145
|
const alignClass = align ? alignMap2[align] : void 0;
|
|
1112
1146
|
const justifyClass = justify ? justifyMap2[justify] : void 0;
|
|
1113
1147
|
const heightStyle = h !== void 0 ? { height: typeof h === "number" ? `${h}px` : h } : void 0;
|
|
1114
|
-
return /* @__PURE__ */
|
|
1148
|
+
return /* @__PURE__ */ jsx20(
|
|
1115
1149
|
"div",
|
|
1116
1150
|
{
|
|
1117
|
-
className:
|
|
1151
|
+
className: cn20(
|
|
1118
1152
|
"flex flex-col",
|
|
1119
1153
|
gapClass,
|
|
1120
1154
|
alignClass,
|
|
@@ -1128,19 +1162,19 @@ function SimpleStack({
|
|
|
1128
1162
|
}
|
|
1129
1163
|
|
|
1130
1164
|
// src/tooltip.tsx
|
|
1131
|
-
import * as
|
|
1165
|
+
import * as React17 from "react";
|
|
1132
1166
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
1133
|
-
import { cn as
|
|
1134
|
-
import { jsx as
|
|
1167
|
+
import { cn as cn21 } from "@petrarca/sonnet-core";
|
|
1168
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1135
1169
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
1136
1170
|
var Tooltip = TooltipPrimitive.Root;
|
|
1137
1171
|
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
1138
|
-
var TooltipContent =
|
|
1172
|
+
var TooltipContent = React17.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
1139
1173
|
TooltipPrimitive.Content,
|
|
1140
1174
|
{
|
|
1141
1175
|
ref,
|
|
1142
1176
|
sideOffset,
|
|
1143
|
-
className:
|
|
1177
|
+
className: cn21(
|
|
1144
1178
|
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-tooltip-content-transform-origin]",
|
|
1145
1179
|
className
|
|
1146
1180
|
),
|
|
@@ -1150,7 +1184,7 @@ var TooltipContent = React16.forwardRef(({ className, sideOffset = 4, ...props }
|
|
|
1150
1184
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
1151
1185
|
|
|
1152
1186
|
// src/simple-tooltip.tsx
|
|
1153
|
-
import { jsx as
|
|
1187
|
+
import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1154
1188
|
function SimpleTooltip({
|
|
1155
1189
|
label,
|
|
1156
1190
|
children,
|
|
@@ -1159,64 +1193,64 @@ function SimpleTooltip({
|
|
|
1159
1193
|
delayDuration = 700,
|
|
1160
1194
|
sideOffset
|
|
1161
1195
|
}) {
|
|
1162
|
-
return /* @__PURE__ */
|
|
1163
|
-
/* @__PURE__ */
|
|
1164
|
-
/* @__PURE__ */
|
|
1196
|
+
return /* @__PURE__ */ jsx22(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
|
|
1197
|
+
/* @__PURE__ */ jsx22(TooltipTrigger, { asChild: true, children }),
|
|
1198
|
+
/* @__PURE__ */ jsx22(TooltipContent, { side, align, sideOffset, children: label })
|
|
1165
1199
|
] }) });
|
|
1166
1200
|
}
|
|
1167
1201
|
|
|
1168
1202
|
// src/skeleton.tsx
|
|
1169
|
-
import { cn as
|
|
1170
|
-
import { jsx as
|
|
1203
|
+
import { cn as cn22 } from "@petrarca/sonnet-core";
|
|
1204
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1171
1205
|
function Skeleton({
|
|
1172
1206
|
className,
|
|
1173
1207
|
...props
|
|
1174
1208
|
}) {
|
|
1175
|
-
return /* @__PURE__ */
|
|
1209
|
+
return /* @__PURE__ */ jsx23(
|
|
1176
1210
|
"div",
|
|
1177
1211
|
{
|
|
1178
|
-
className:
|
|
1212
|
+
className: cn22("animate-pulse rounded-md bg-muted", className),
|
|
1179
1213
|
...props
|
|
1180
1214
|
}
|
|
1181
1215
|
);
|
|
1182
1216
|
}
|
|
1183
1217
|
|
|
1184
1218
|
// src/spinner.tsx
|
|
1185
|
-
import { cn as
|
|
1186
|
-
import { jsx as
|
|
1219
|
+
import { cn as cn23 } from "@petrarca/sonnet-core";
|
|
1220
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1187
1221
|
var sizeClasses = {
|
|
1188
1222
|
sm: "h-4 w-4 border-2",
|
|
1189
1223
|
md: "h-8 w-8 border-2",
|
|
1190
1224
|
lg: "h-12 w-12 border-3"
|
|
1191
1225
|
};
|
|
1192
1226
|
function Spinner({ className, size = "md" }) {
|
|
1193
|
-
return /* @__PURE__ */
|
|
1227
|
+
return /* @__PURE__ */ jsx24(
|
|
1194
1228
|
"div",
|
|
1195
1229
|
{
|
|
1196
|
-
className:
|
|
1230
|
+
className: cn23(
|
|
1197
1231
|
"inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
|
|
1198
1232
|
sizeClasses[size],
|
|
1199
1233
|
className
|
|
1200
1234
|
),
|
|
1201
1235
|
role: "status",
|
|
1202
|
-
children: /* @__PURE__ */
|
|
1236
|
+
children: /* @__PURE__ */ jsx24("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..." })
|
|
1203
1237
|
}
|
|
1204
1238
|
);
|
|
1205
1239
|
}
|
|
1206
1240
|
|
|
1207
1241
|
// src/tabs.tsx
|
|
1208
|
-
import * as
|
|
1242
|
+
import * as React18 from "react";
|
|
1209
1243
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
1210
|
-
import { cn as
|
|
1211
|
-
import { jsx as
|
|
1244
|
+
import { cn as cn24 } from "@petrarca/sonnet-core";
|
|
1245
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1212
1246
|
var Tabs = TabsPrimitive.Root;
|
|
1213
|
-
var TabsList =
|
|
1247
|
+
var TabsList = React18.forwardRef(({ className, align = "start", ...props }, ref) => {
|
|
1214
1248
|
const alignClass = align === "center" ? "justify-center" : align === "end" ? "justify-end" : "justify-start";
|
|
1215
|
-
return /* @__PURE__ */
|
|
1249
|
+
return /* @__PURE__ */ jsx25(
|
|
1216
1250
|
TabsPrimitive.List,
|
|
1217
1251
|
{
|
|
1218
1252
|
ref,
|
|
1219
|
-
className:
|
|
1253
|
+
className: cn24(
|
|
1220
1254
|
"inline-flex h-10 items-center rounded-md bg-muted p-1 text-muted-foreground",
|
|
1221
1255
|
alignClass,
|
|
1222
1256
|
className
|
|
@@ -1226,11 +1260,11 @@ var TabsList = React17.forwardRef(({ className, align = "start", ...props }, ref
|
|
|
1226
1260
|
);
|
|
1227
1261
|
});
|
|
1228
1262
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
1229
|
-
var TabsTrigger =
|
|
1263
|
+
var TabsTrigger = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
1230
1264
|
TabsPrimitive.Trigger,
|
|
1231
1265
|
{
|
|
1232
1266
|
ref,
|
|
1233
|
-
className:
|
|
1267
|
+
className: cn24(
|
|
1234
1268
|
"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",
|
|
1235
1269
|
className
|
|
1236
1270
|
),
|
|
@@ -1238,11 +1272,11 @@ var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
1238
1272
|
}
|
|
1239
1273
|
));
|
|
1240
1274
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
1241
|
-
var TabsContent =
|
|
1275
|
+
var TabsContent = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
|
|
1242
1276
|
TabsPrimitive.Content,
|
|
1243
1277
|
{
|
|
1244
1278
|
ref,
|
|
1245
|
-
className:
|
|
1279
|
+
className: cn24(
|
|
1246
1280
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
1247
1281
|
"data-[state=inactive]:hidden",
|
|
1248
1282
|
className
|
|
@@ -1258,20 +1292,20 @@ import {
|
|
|
1258
1292
|
Direction as DirectionPrimitive,
|
|
1259
1293
|
Slot as SlotPrimitive
|
|
1260
1294
|
} from "radix-ui";
|
|
1261
|
-
import * as
|
|
1295
|
+
import * as React22 from "react";
|
|
1262
1296
|
import { useComposedRefs } from "@petrarca/sonnet-core";
|
|
1263
|
-
import { cn as
|
|
1297
|
+
import { cn as cn25 } from "@petrarca/sonnet-core";
|
|
1264
1298
|
|
|
1265
1299
|
// src/radix/hooks/use-as-ref.ts
|
|
1266
|
-
import * as
|
|
1300
|
+
import * as React20 from "react";
|
|
1267
1301
|
|
|
1268
1302
|
// src/radix/hooks/use-isomorphic-layout-effect.ts
|
|
1269
|
-
import * as
|
|
1270
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
1303
|
+
import * as React19 from "react";
|
|
1304
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React19.useLayoutEffect : React19.useEffect;
|
|
1271
1305
|
|
|
1272
1306
|
// src/radix/hooks/use-as-ref.ts
|
|
1273
1307
|
function useAsRef(props) {
|
|
1274
|
-
const ref =
|
|
1308
|
+
const ref = React20.useRef(props);
|
|
1275
1309
|
useIsomorphicLayoutEffect(() => {
|
|
1276
1310
|
ref.current = props;
|
|
1277
1311
|
});
|
|
@@ -1279,9 +1313,9 @@ function useAsRef(props) {
|
|
|
1279
1313
|
}
|
|
1280
1314
|
|
|
1281
1315
|
// src/radix/hooks/use-lazy-ref.ts
|
|
1282
|
-
import * as
|
|
1316
|
+
import * as React21 from "react";
|
|
1283
1317
|
function useLazyRef(fn) {
|
|
1284
|
-
const ref =
|
|
1318
|
+
const ref = React21.useRef(null);
|
|
1285
1319
|
if (ref.current === null) {
|
|
1286
1320
|
ref.current = fn();
|
|
1287
1321
|
}
|
|
@@ -1289,7 +1323,7 @@ function useLazyRef(fn) {
|
|
|
1289
1323
|
}
|
|
1290
1324
|
|
|
1291
1325
|
// src/stepper.tsx
|
|
1292
|
-
import { jsx as
|
|
1326
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
1293
1327
|
var ROOT_NAME = "Stepper";
|
|
1294
1328
|
var LIST_NAME = "StepperList";
|
|
1295
1329
|
var ITEM_NAME = "StepperItem";
|
|
@@ -1408,9 +1442,9 @@ function getDataState(value, itemValue, stepState, steps, variant = "item") {
|
|
|
1408
1442
|
}
|
|
1409
1443
|
return "inactive";
|
|
1410
1444
|
}
|
|
1411
|
-
var StoreContext =
|
|
1445
|
+
var StoreContext = React22.createContext(null);
|
|
1412
1446
|
function useStoreContext(consumerName) {
|
|
1413
|
-
const context =
|
|
1447
|
+
const context = React22.useContext(StoreContext);
|
|
1414
1448
|
if (!context) {
|
|
1415
1449
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1416
1450
|
}
|
|
@@ -1418,15 +1452,15 @@ function useStoreContext(consumerName) {
|
|
|
1418
1452
|
}
|
|
1419
1453
|
function useStore(selector) {
|
|
1420
1454
|
const store = useStoreContext("useStore");
|
|
1421
|
-
const getSnapshot =
|
|
1455
|
+
const getSnapshot = React22.useCallback(
|
|
1422
1456
|
() => selector(store.getState()),
|
|
1423
1457
|
[store, selector]
|
|
1424
1458
|
);
|
|
1425
|
-
return
|
|
1459
|
+
return React22.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
|
|
1426
1460
|
}
|
|
1427
|
-
var StepperContext =
|
|
1461
|
+
var StepperContext = React22.createContext(null);
|
|
1428
1462
|
function useStepperContext(consumerName) {
|
|
1429
|
-
const context =
|
|
1463
|
+
const context = React22.useContext(StepperContext);
|
|
1430
1464
|
if (!context) {
|
|
1431
1465
|
throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
|
|
1432
1466
|
}
|
|
@@ -1464,7 +1498,7 @@ function Stepper(props) {
|
|
|
1464
1498
|
onValueRemove,
|
|
1465
1499
|
onValidate
|
|
1466
1500
|
});
|
|
1467
|
-
const store =
|
|
1501
|
+
const store = React22.useMemo(() => {
|
|
1468
1502
|
return {
|
|
1469
1503
|
subscribe: (cb) => {
|
|
1470
1504
|
listenersRef.current.add(cb);
|
|
@@ -1499,12 +1533,16 @@ function Stepper(props) {
|
|
|
1499
1533
|
hasValidation: () => !!propsRef.current.onValidate,
|
|
1500
1534
|
addStep: (value2, completed, disabled2) => {
|
|
1501
1535
|
const newStep = { value: value2, completed, disabled: disabled2 };
|
|
1502
|
-
stateRef.current.steps
|
|
1536
|
+
const next = new Map(stateRef.current.steps);
|
|
1537
|
+
next.set(value2, newStep);
|
|
1538
|
+
stateRef.current.steps = next;
|
|
1503
1539
|
propsRef.current.onValueAdd?.(value2);
|
|
1504
1540
|
store.notify();
|
|
1505
1541
|
},
|
|
1506
1542
|
removeStep: (value2) => {
|
|
1507
|
-
stateRef.current.steps
|
|
1543
|
+
const next = new Map(stateRef.current.steps);
|
|
1544
|
+
next.delete(value2);
|
|
1545
|
+
stateRef.current.steps = next;
|
|
1508
1546
|
propsRef.current.onValueRemove?.(value2);
|
|
1509
1547
|
store.notify();
|
|
1510
1548
|
},
|
|
@@ -1512,7 +1550,9 @@ function Stepper(props) {
|
|
|
1512
1550
|
const step = stateRef.current.steps.get(value2);
|
|
1513
1551
|
if (step) {
|
|
1514
1552
|
const updatedStep = { ...step, completed, disabled: disabled2 };
|
|
1515
|
-
stateRef.current.steps
|
|
1553
|
+
const next = new Map(stateRef.current.steps);
|
|
1554
|
+
next.set(value2, updatedStep);
|
|
1555
|
+
stateRef.current.steps = next;
|
|
1516
1556
|
if (completed !== step.completed) {
|
|
1517
1557
|
propsRef.current.onValueComplete?.(value2, completed);
|
|
1518
1558
|
}
|
|
@@ -1532,9 +1572,9 @@ function Stepper(props) {
|
|
|
1532
1572
|
}
|
|
1533
1573
|
}, [value]);
|
|
1534
1574
|
const dir = DirectionPrimitive.useDirection(dirProp);
|
|
1535
|
-
const instanceId =
|
|
1575
|
+
const instanceId = React22.useId();
|
|
1536
1576
|
const rootId = id ?? instanceId;
|
|
1537
|
-
const contextValue =
|
|
1577
|
+
const contextValue = React22.useMemo(
|
|
1538
1578
|
() => ({
|
|
1539
1579
|
rootId,
|
|
1540
1580
|
dir,
|
|
@@ -1547,7 +1587,7 @@ function Stepper(props) {
|
|
|
1547
1587
|
[rootId, dir, orientation, activationMode, disabled, nonInteractive, loop]
|
|
1548
1588
|
);
|
|
1549
1589
|
const RootPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1550
|
-
return /* @__PURE__ */
|
|
1590
|
+
return /* @__PURE__ */ jsx26(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx26(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx26(
|
|
1551
1591
|
RootPrimitive,
|
|
1552
1592
|
{
|
|
1553
1593
|
id: rootId,
|
|
@@ -1556,7 +1596,7 @@ function Stepper(props) {
|
|
|
1556
1596
|
"data-slot": "stepper",
|
|
1557
1597
|
dir,
|
|
1558
1598
|
...rootProps,
|
|
1559
|
-
className:
|
|
1599
|
+
className: cn25(
|
|
1560
1600
|
"flex gap-3",
|
|
1561
1601
|
orientation === "horizontal" ? "w-full flex-col" : "flex-row",
|
|
1562
1602
|
className
|
|
@@ -1564,9 +1604,9 @@ function Stepper(props) {
|
|
|
1564
1604
|
}
|
|
1565
1605
|
) }) });
|
|
1566
1606
|
}
|
|
1567
|
-
var FocusContext =
|
|
1607
|
+
var FocusContext = React22.createContext(null);
|
|
1568
1608
|
function useFocusContext(consumerName) {
|
|
1569
|
-
const context =
|
|
1609
|
+
const context = React22.useContext(FocusContext);
|
|
1570
1610
|
if (!context) {
|
|
1571
1611
|
throw new Error(
|
|
1572
1612
|
`\`${consumerName}\` must be used within \`FocusProvider\``
|
|
@@ -1593,32 +1633,32 @@ function StepperList(props) {
|
|
|
1593
1633
|
onFocus: onFocusProp,
|
|
1594
1634
|
onMouseDown: onMouseDownProp
|
|
1595
1635
|
});
|
|
1596
|
-
const [tabStopId, setTabStopId] =
|
|
1597
|
-
const [isTabbingBackOut, setIsTabbingBackOut] =
|
|
1598
|
-
const [focusableItemCount, setFocusableItemCount] =
|
|
1599
|
-
const isClickFocusRef =
|
|
1600
|
-
const itemsRef =
|
|
1601
|
-
const listRef =
|
|
1636
|
+
const [tabStopId, setTabStopId] = React22.useState(null);
|
|
1637
|
+
const [isTabbingBackOut, setIsTabbingBackOut] = React22.useState(false);
|
|
1638
|
+
const [focusableItemCount, setFocusableItemCount] = React22.useState(0);
|
|
1639
|
+
const isClickFocusRef = React22.useRef(false);
|
|
1640
|
+
const itemsRef = React22.useRef(/* @__PURE__ */ new Map());
|
|
1641
|
+
const listRef = React22.useRef(null);
|
|
1602
1642
|
const composedRef = useComposedRefs(ref, listRef);
|
|
1603
|
-
const onItemFocus =
|
|
1643
|
+
const onItemFocus = React22.useCallback((tabStopId2) => {
|
|
1604
1644
|
setTabStopId(tabStopId2);
|
|
1605
1645
|
}, []);
|
|
1606
|
-
const onItemShiftTab =
|
|
1646
|
+
const onItemShiftTab = React22.useCallback(() => {
|
|
1607
1647
|
setIsTabbingBackOut(true);
|
|
1608
1648
|
}, []);
|
|
1609
|
-
const onFocusableItemAdd =
|
|
1649
|
+
const onFocusableItemAdd = React22.useCallback(() => {
|
|
1610
1650
|
setFocusableItemCount((prevCount) => prevCount + 1);
|
|
1611
1651
|
}, []);
|
|
1612
|
-
const onFocusableItemRemove =
|
|
1652
|
+
const onFocusableItemRemove = React22.useCallback(() => {
|
|
1613
1653
|
setFocusableItemCount((prevCount) => prevCount - 1);
|
|
1614
1654
|
}, []);
|
|
1615
|
-
const onItemRegister =
|
|
1655
|
+
const onItemRegister = React22.useCallback((item) => {
|
|
1616
1656
|
itemsRef.current.set(item.id, item);
|
|
1617
1657
|
}, []);
|
|
1618
|
-
const onItemUnregister =
|
|
1658
|
+
const onItemUnregister = React22.useCallback((id) => {
|
|
1619
1659
|
itemsRef.current.delete(id);
|
|
1620
1660
|
}, []);
|
|
1621
|
-
const getItems =
|
|
1661
|
+
const getItems = React22.useCallback(() => {
|
|
1622
1662
|
return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
|
|
1623
1663
|
const elementA = a.ref.current;
|
|
1624
1664
|
const elementB = b.ref.current;
|
|
@@ -1633,7 +1673,7 @@ function StepperList(props) {
|
|
|
1633
1673
|
return 0;
|
|
1634
1674
|
});
|
|
1635
1675
|
}, []);
|
|
1636
|
-
const onBlur =
|
|
1676
|
+
const onBlur = React22.useCallback(
|
|
1637
1677
|
(event) => {
|
|
1638
1678
|
propsRef.current.onBlur?.(event);
|
|
1639
1679
|
if (event.defaultPrevented) return;
|
|
@@ -1641,7 +1681,7 @@ function StepperList(props) {
|
|
|
1641
1681
|
},
|
|
1642
1682
|
[propsRef]
|
|
1643
1683
|
);
|
|
1644
|
-
const onFocus =
|
|
1684
|
+
const onFocus = React22.useCallback(
|
|
1645
1685
|
(event) => {
|
|
1646
1686
|
propsRef.current.onFocus?.(event);
|
|
1647
1687
|
if (event.defaultPrevented) return;
|
|
@@ -1670,7 +1710,7 @@ function StepperList(props) {
|
|
|
1670
1710
|
},
|
|
1671
1711
|
[propsRef, isTabbingBackOut, currentValue, tabStopId]
|
|
1672
1712
|
);
|
|
1673
|
-
const onMouseDown =
|
|
1713
|
+
const onMouseDown = React22.useCallback(
|
|
1674
1714
|
(event) => {
|
|
1675
1715
|
propsRef.current.onMouseDown?.(event);
|
|
1676
1716
|
if (event.defaultPrevented) return;
|
|
@@ -1678,7 +1718,7 @@ function StepperList(props) {
|
|
|
1678
1718
|
},
|
|
1679
1719
|
[propsRef]
|
|
1680
1720
|
);
|
|
1681
|
-
const focusContextValue =
|
|
1721
|
+
const focusContextValue = React22.useMemo(
|
|
1682
1722
|
() => ({
|
|
1683
1723
|
tabStopId,
|
|
1684
1724
|
onItemFocus,
|
|
@@ -1701,7 +1741,7 @@ function StepperList(props) {
|
|
|
1701
1741
|
]
|
|
1702
1742
|
);
|
|
1703
1743
|
const ListPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1704
|
-
return /* @__PURE__ */
|
|
1744
|
+
return /* @__PURE__ */ jsx26(FocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx26(
|
|
1705
1745
|
ListPrimitive,
|
|
1706
1746
|
{
|
|
1707
1747
|
role: "tablist",
|
|
@@ -1712,7 +1752,7 @@ function StepperList(props) {
|
|
|
1712
1752
|
tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
|
|
1713
1753
|
...listProps,
|
|
1714
1754
|
ref: composedRef,
|
|
1715
|
-
className:
|
|
1755
|
+
className: cn25(
|
|
1716
1756
|
"flex outline-none",
|
|
1717
1757
|
orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start",
|
|
1718
1758
|
className
|
|
@@ -1724,11 +1764,11 @@ function StepperList(props) {
|
|
|
1724
1764
|
}
|
|
1725
1765
|
) });
|
|
1726
1766
|
}
|
|
1727
|
-
var StepperItemContext =
|
|
1767
|
+
var StepperItemContext = React22.createContext(
|
|
1728
1768
|
null
|
|
1729
1769
|
);
|
|
1730
1770
|
function useStepperItemContext(consumerName) {
|
|
1731
|
-
const context =
|
|
1771
|
+
const context = React22.useContext(StepperItemContext);
|
|
1732
1772
|
if (!context) {
|
|
1733
1773
|
throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
|
|
1734
1774
|
}
|
|
@@ -1761,7 +1801,7 @@ function StepperItem(props) {
|
|
|
1761
1801
|
const stepState = useStore((state) => state.steps.get(itemValue));
|
|
1762
1802
|
const steps = useStore((state) => state.steps);
|
|
1763
1803
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
1764
|
-
const itemContextValue =
|
|
1804
|
+
const itemContextValue = React22.useMemo(
|
|
1765
1805
|
() => ({
|
|
1766
1806
|
value: itemValue,
|
|
1767
1807
|
stepState
|
|
@@ -1769,7 +1809,7 @@ function StepperItem(props) {
|
|
|
1769
1809
|
[itemValue, stepState]
|
|
1770
1810
|
);
|
|
1771
1811
|
const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
1772
|
-
return /* @__PURE__ */
|
|
1812
|
+
return /* @__PURE__ */ jsx26(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx26(
|
|
1773
1813
|
ItemPrimitive,
|
|
1774
1814
|
{
|
|
1775
1815
|
"data-disabled": stepState?.disabled ? "" : void 0,
|
|
@@ -1779,7 +1819,7 @@ function StepperItem(props) {
|
|
|
1779
1819
|
dir: context.dir,
|
|
1780
1820
|
...itemProps,
|
|
1781
1821
|
ref,
|
|
1782
|
-
className:
|
|
1822
|
+
className: cn25(
|
|
1783
1823
|
"relative flex not-last:flex-1 items-center",
|
|
1784
1824
|
orientation === "horizontal" ? "flex-row" : "flex-col",
|
|
1785
1825
|
className
|
|
@@ -1828,11 +1868,11 @@ function StepperTrigger(props) {
|
|
|
1828
1868
|
const isActive = value === itemValue;
|
|
1829
1869
|
const isTabStop = focusContext.tabStopId === triggerId;
|
|
1830
1870
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
1831
|
-
const triggerRef =
|
|
1871
|
+
const triggerRef = React22.useRef(null);
|
|
1832
1872
|
const composedRef = useComposedRefs(ref, triggerRef);
|
|
1833
|
-
const isArrowKeyPressedRef =
|
|
1834
|
-
const isMouseClickRef =
|
|
1835
|
-
|
|
1873
|
+
const isArrowKeyPressedRef = React22.useRef(false);
|
|
1874
|
+
const isMouseClickRef = React22.useRef(false);
|
|
1875
|
+
React22.useEffect(() => {
|
|
1836
1876
|
function onKeyDown2(event) {
|
|
1837
1877
|
if (ARROW_KEYS.includes(event.key)) {
|
|
1838
1878
|
isArrowKeyPressedRef.current = true;
|
|
@@ -1866,7 +1906,7 @@ function StepperTrigger(props) {
|
|
|
1866
1906
|
}
|
|
1867
1907
|
};
|
|
1868
1908
|
}, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
|
|
1869
|
-
const onClick =
|
|
1909
|
+
const onClick = React22.useCallback(
|
|
1870
1910
|
async (event) => {
|
|
1871
1911
|
propsRef.current.onClick?.(event);
|
|
1872
1912
|
if (event.defaultPrevented) return;
|
|
@@ -1887,7 +1927,7 @@ function StepperTrigger(props) {
|
|
|
1887
1927
|
propsRef
|
|
1888
1928
|
]
|
|
1889
1929
|
);
|
|
1890
|
-
const onFocus =
|
|
1930
|
+
const onFocus = React22.useCallback(
|
|
1891
1931
|
async (event) => {
|
|
1892
1932
|
propsRef.current.onFocus?.(event);
|
|
1893
1933
|
if (event.defaultPrevented) return;
|
|
@@ -1915,7 +1955,7 @@ function StepperTrigger(props) {
|
|
|
1915
1955
|
propsRef
|
|
1916
1956
|
]
|
|
1917
1957
|
);
|
|
1918
|
-
const onKeyDown =
|
|
1958
|
+
const onKeyDown = React22.useCallback(
|
|
1919
1959
|
async (event) => {
|
|
1920
1960
|
propsRef.current.onKeyDown?.(event);
|
|
1921
1961
|
if (event.defaultPrevented) return;
|
|
@@ -1970,7 +2010,7 @@ function StepperTrigger(props) {
|
|
|
1970
2010
|
steps
|
|
1971
2011
|
]
|
|
1972
2012
|
);
|
|
1973
|
-
const onMouseDown =
|
|
2013
|
+
const onMouseDown = React22.useCallback(
|
|
1974
2014
|
(event) => {
|
|
1975
2015
|
propsRef.current.onMouseDown?.(event);
|
|
1976
2016
|
if (event.defaultPrevented) return;
|
|
@@ -1984,7 +2024,7 @@ function StepperTrigger(props) {
|
|
|
1984
2024
|
[focusContext, triggerId, isDisabled, propsRef]
|
|
1985
2025
|
);
|
|
1986
2026
|
const TriggerPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
1987
|
-
return /* @__PURE__ */
|
|
2027
|
+
return /* @__PURE__ */ jsx26(
|
|
1988
2028
|
TriggerPrimitive,
|
|
1989
2029
|
{
|
|
1990
2030
|
id: triggerId,
|
|
@@ -2003,7 +2043,7 @@ function StepperTrigger(props) {
|
|
|
2003
2043
|
tabIndex: isTabStop ? 0 : -1,
|
|
2004
2044
|
...triggerProps,
|
|
2005
2045
|
ref: composedRef,
|
|
2006
|
-
className:
|
|
2046
|
+
className: cn25(
|
|
2007
2047
|
"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",
|
|
2008
2048
|
"not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full",
|
|
2009
2049
|
className
|
|
@@ -2026,7 +2066,7 @@ function StepperIndicator(props) {
|
|
|
2026
2066
|
const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
|
|
2027
2067
|
const dataState = getDataState(value, itemValue, stepState, steps);
|
|
2028
2068
|
const IndicatorPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
2029
|
-
return /* @__PURE__ */
|
|
2069
|
+
return /* @__PURE__ */ jsx26(
|
|
2030
2070
|
IndicatorPrimitive,
|
|
2031
2071
|
{
|
|
2032
2072
|
"data-state": dataState,
|
|
@@ -2034,11 +2074,11 @@ function StepperIndicator(props) {
|
|
|
2034
2074
|
dir: context.dir,
|
|
2035
2075
|
...indicatorProps,
|
|
2036
2076
|
ref,
|
|
2037
|
-
className:
|
|
2077
|
+
className: cn25(
|
|
2038
2078
|
"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",
|
|
2039
2079
|
className
|
|
2040
2080
|
),
|
|
2041
|
-
children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */
|
|
2081
|
+
children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */ jsx26(Check3, { className: "size-4" }) : stepPosition
|
|
2042
2082
|
}
|
|
2043
2083
|
);
|
|
2044
2084
|
}
|
|
@@ -2066,7 +2106,7 @@ function StepperSeparator(props) {
|
|
|
2066
2106
|
"separator"
|
|
2067
2107
|
);
|
|
2068
2108
|
const SeparatorPrimitive2 = asChild ? SlotPrimitive.Slot : "div";
|
|
2069
|
-
return /* @__PURE__ */
|
|
2109
|
+
return /* @__PURE__ */ jsx26(
|
|
2070
2110
|
SeparatorPrimitive2,
|
|
2071
2111
|
{
|
|
2072
2112
|
role: "separator",
|
|
@@ -2078,7 +2118,7 @@ function StepperSeparator(props) {
|
|
|
2078
2118
|
dir: context.dir,
|
|
2079
2119
|
...separatorProps,
|
|
2080
2120
|
ref,
|
|
2081
|
-
className:
|
|
2121
|
+
className: cn25(
|
|
2082
2122
|
"bg-border transition-colors data-[state=active]:bg-primary data-[state=completed]:bg-primary",
|
|
2083
2123
|
orientation === "horizontal" ? "h-px flex-1" : "h-10 w-px",
|
|
2084
2124
|
className
|
|
@@ -2092,7 +2132,7 @@ function StepperTitle(props) {
|
|
|
2092
2132
|
const itemContext = useStepperItemContext(TITLE_NAME);
|
|
2093
2133
|
const titleId = getId(context.rootId, "title", itemContext.value);
|
|
2094
2134
|
const TitlePrimitive = asChild ? SlotPrimitive.Slot : "span";
|
|
2095
|
-
return /* @__PURE__ */
|
|
2135
|
+
return /* @__PURE__ */ jsx26(
|
|
2096
2136
|
TitlePrimitive,
|
|
2097
2137
|
{
|
|
2098
2138
|
id: titleId,
|
|
@@ -2100,7 +2140,7 @@ function StepperTitle(props) {
|
|
|
2100
2140
|
dir: context.dir,
|
|
2101
2141
|
...titleProps,
|
|
2102
2142
|
ref,
|
|
2103
|
-
className:
|
|
2143
|
+
className: cn25("font-medium text-sm", className)
|
|
2104
2144
|
}
|
|
2105
2145
|
);
|
|
2106
2146
|
}
|
|
@@ -2110,7 +2150,7 @@ function StepperDescription(props) {
|
|
|
2110
2150
|
const itemContext = useStepperItemContext(DESCRIPTION_NAME);
|
|
2111
2151
|
const descriptionId = getId(context.rootId, "description", itemContext.value);
|
|
2112
2152
|
const DescriptionPrimitive = asChild ? SlotPrimitive.Slot : "span";
|
|
2113
|
-
return /* @__PURE__ */
|
|
2153
|
+
return /* @__PURE__ */ jsx26(
|
|
2114
2154
|
DescriptionPrimitive,
|
|
2115
2155
|
{
|
|
2116
2156
|
id: descriptionId,
|
|
@@ -2118,7 +2158,7 @@ function StepperDescription(props) {
|
|
|
2118
2158
|
dir: context.dir,
|
|
2119
2159
|
...descriptionProps,
|
|
2120
2160
|
ref,
|
|
2121
|
-
className:
|
|
2161
|
+
className: cn25("text-muted-foreground text-xs", className)
|
|
2122
2162
|
}
|
|
2123
2163
|
);
|
|
2124
2164
|
}
|
|
@@ -2137,7 +2177,7 @@ function StepperContent(props) {
|
|
|
2137
2177
|
const triggerId = getId(context.rootId, "trigger", valueProp);
|
|
2138
2178
|
if (valueProp !== value && !forceMount) return null;
|
|
2139
2179
|
const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
|
|
2140
|
-
return /* @__PURE__ */
|
|
2180
|
+
return /* @__PURE__ */ jsx26(
|
|
2141
2181
|
ContentPrimitive,
|
|
2142
2182
|
{
|
|
2143
2183
|
id: contentId,
|
|
@@ -2147,7 +2187,7 @@ function StepperContent(props) {
|
|
|
2147
2187
|
dir: context.dir,
|
|
2148
2188
|
...contentProps,
|
|
2149
2189
|
ref,
|
|
2150
|
-
className:
|
|
2190
|
+
className: cn25("flex-1 outline-none", className)
|
|
2151
2191
|
}
|
|
2152
2192
|
);
|
|
2153
2193
|
}
|
|
@@ -2160,9 +2200,9 @@ function StepperPrev(props) {
|
|
|
2160
2200
|
onClick: onClickProp
|
|
2161
2201
|
});
|
|
2162
2202
|
const stepKeys = Array.from(steps.keys());
|
|
2163
|
-
const currentIndex =
|
|
2203
|
+
const currentIndex = stepKeys.length > 0 ? stepKeys.indexOf(value ?? "") : -1;
|
|
2164
2204
|
const isDisabled = disabled || currentIndex <= 0;
|
|
2165
|
-
const onClick =
|
|
2205
|
+
const onClick = React22.useCallback(
|
|
2166
2206
|
async (event) => {
|
|
2167
2207
|
propsRef.current.onClick?.(event);
|
|
2168
2208
|
if (event.defaultPrevented || isDisabled) return;
|
|
@@ -2175,7 +2215,7 @@ function StepperPrev(props) {
|
|
|
2175
2215
|
[propsRef, isDisabled, currentIndex, stepKeys, store]
|
|
2176
2216
|
);
|
|
2177
2217
|
const PrevPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2178
|
-
return /* @__PURE__ */
|
|
2218
|
+
return /* @__PURE__ */ jsx26(
|
|
2179
2219
|
PrevPrimitive,
|
|
2180
2220
|
{
|
|
2181
2221
|
type: "button",
|
|
@@ -2195,9 +2235,9 @@ function StepperNext(props) {
|
|
|
2195
2235
|
onClick: onClickProp
|
|
2196
2236
|
});
|
|
2197
2237
|
const stepKeys = Array.from(steps.keys());
|
|
2198
|
-
const currentIndex =
|
|
2199
|
-
const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
|
|
2200
|
-
const onClick =
|
|
2238
|
+
const currentIndex = stepKeys.length > 0 ? stepKeys.indexOf(value ?? "") : -1;
|
|
2239
|
+
const isDisabled = disabled || stepKeys.length === 0 || currentIndex >= stepKeys.length - 1;
|
|
2240
|
+
const onClick = React22.useCallback(
|
|
2201
2241
|
async (event) => {
|
|
2202
2242
|
propsRef.current.onClick?.(event);
|
|
2203
2243
|
if (event.defaultPrevented || isDisabled) return;
|
|
@@ -2210,7 +2250,7 @@ function StepperNext(props) {
|
|
|
2210
2250
|
[propsRef, isDisabled, currentIndex, stepKeys, store]
|
|
2211
2251
|
);
|
|
2212
2252
|
const NextPrimitive = asChild ? SlotPrimitive.Slot : "button";
|
|
2213
|
-
return /* @__PURE__ */
|
|
2253
|
+
return /* @__PURE__ */ jsx26(
|
|
2214
2254
|
NextPrimitive,
|
|
2215
2255
|
{
|
|
2216
2256
|
type: "button",
|
|
@@ -2236,7 +2276,7 @@ import {
|
|
|
2236
2276
|
useReactTable
|
|
2237
2277
|
} from "@tanstack/react-table";
|
|
2238
2278
|
import { ChevronRight as ChevronRight2 } from "lucide-react";
|
|
2239
|
-
import { cn as
|
|
2279
|
+
import { cn as cn26 } from "@petrarca/sonnet-core";
|
|
2240
2280
|
|
|
2241
2281
|
// src/EntityTable/tableSchema/mergeUiSchema.ts
|
|
2242
2282
|
function resolveCellRenderer(property, uiEntry) {
|
|
@@ -2266,12 +2306,12 @@ function mergeColumnConfig(key, property, uiSchema) {
|
|
|
2266
2306
|
}
|
|
2267
2307
|
|
|
2268
2308
|
// src/EntityTable/tableSchema/cellRegistry.ts
|
|
2269
|
-
import
|
|
2309
|
+
import React23 from "react";
|
|
2270
2310
|
import { warnLog } from "@petrarca/sonnet-core";
|
|
2271
2311
|
|
|
2272
2312
|
// src/EntityTable/tableSchema/cellRenderers.tsx
|
|
2273
2313
|
import { formatDate, formatDateTime } from "@petrarca/sonnet-core";
|
|
2274
|
-
import { Fragment, jsx as
|
|
2314
|
+
import { Fragment, jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2275
2315
|
function resolveValue(value, options) {
|
|
2276
2316
|
const key = options.valueKey;
|
|
2277
2317
|
if (key && value != null && typeof value === "object") {
|
|
@@ -2287,60 +2327,60 @@ function TextCell({
|
|
|
2287
2327
|
options
|
|
2288
2328
|
}) {
|
|
2289
2329
|
const text = resolveValue(value, options);
|
|
2290
|
-
return /* @__PURE__ */
|
|
2330
|
+
return /* @__PURE__ */ jsx27("span", { className: cx("", options), children: text == null ? "\u2014" : String(text) });
|
|
2291
2331
|
}
|
|
2292
2332
|
function MutedCell({
|
|
2293
2333
|
value,
|
|
2294
2334
|
options
|
|
2295
2335
|
}) {
|
|
2296
2336
|
const text = resolveValue(value, options);
|
|
2297
|
-
return /* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ jsx27("span", { className: cx("text-muted-foreground", options), children: text == null ? "\u2014" : String(text) });
|
|
2298
2338
|
}
|
|
2299
2339
|
function BoldCell({
|
|
2300
2340
|
value,
|
|
2301
2341
|
options
|
|
2302
2342
|
}) {
|
|
2303
2343
|
const text = resolveValue(value, options);
|
|
2304
|
-
return /* @__PURE__ */
|
|
2344
|
+
return /* @__PURE__ */ jsx27("span", { className: cx("font-medium", options), children: text == null ? "\u2014" : String(text) });
|
|
2305
2345
|
}
|
|
2306
2346
|
function CodeCell({
|
|
2307
2347
|
value,
|
|
2308
2348
|
options
|
|
2309
2349
|
}) {
|
|
2310
2350
|
const text = resolveValue(value, options);
|
|
2311
|
-
return /* @__PURE__ */
|
|
2351
|
+
return /* @__PURE__ */ jsx27("span", { className: cx("font-mono text-xs", options), children: text == null ? "\u2014" : String(text) });
|
|
2312
2352
|
}
|
|
2313
2353
|
function BadgeCell({
|
|
2314
2354
|
value,
|
|
2315
2355
|
options
|
|
2316
2356
|
}) {
|
|
2317
2357
|
if (value == null)
|
|
2318
|
-
return /* @__PURE__ */
|
|
2358
|
+
return /* @__PURE__ */ jsx27("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2319
2359
|
const key = String(value);
|
|
2320
2360
|
const colors = options.colors;
|
|
2321
2361
|
const labels = options.labels;
|
|
2322
2362
|
const color = colors?.[key];
|
|
2323
2363
|
const label = labels?.[key] ?? key;
|
|
2324
|
-
return /* @__PURE__ */
|
|
2364
|
+
return /* @__PURE__ */ jsx27(Badge, { badgeColor: color, children: label });
|
|
2325
2365
|
}
|
|
2326
2366
|
function DateCell({
|
|
2327
2367
|
value,
|
|
2328
2368
|
options
|
|
2329
2369
|
}) {
|
|
2330
|
-
return /* @__PURE__ */
|
|
2370
|
+
return /* @__PURE__ */ jsx27("span", { className: cx("text-muted-foreground", options), children: formatDate(value) });
|
|
2331
2371
|
}
|
|
2332
2372
|
function DateTimeCell({
|
|
2333
2373
|
value,
|
|
2334
2374
|
options
|
|
2335
2375
|
}) {
|
|
2336
|
-
return /* @__PURE__ */
|
|
2376
|
+
return /* @__PURE__ */ jsx27("span", { className: cx("text-muted-foreground", options), children: formatDateTime(value) });
|
|
2337
2377
|
}
|
|
2338
2378
|
function BooleanCell({ value }) {
|
|
2339
|
-
return /* @__PURE__ */
|
|
2379
|
+
return /* @__PURE__ */ jsx27("span", { className: value ? "text-green-600" : "text-muted-foreground", children: value ? "Yes" : "No" });
|
|
2340
2380
|
}
|
|
2341
2381
|
function NumberCell({ value }) {
|
|
2342
2382
|
const text = value == null ? "\u2014" : String(value);
|
|
2343
|
-
return /* @__PURE__ */
|
|
2383
|
+
return /* @__PURE__ */ jsx27("span", { className: "tabular-nums", children: text });
|
|
2344
2384
|
}
|
|
2345
2385
|
function TruncateCell({
|
|
2346
2386
|
value,
|
|
@@ -2348,7 +2388,7 @@ function TruncateCell({
|
|
|
2348
2388
|
}) {
|
|
2349
2389
|
const resolved = resolveValue(value, options);
|
|
2350
2390
|
const text = resolved == null ? "\u2014" : String(resolved);
|
|
2351
|
-
return /* @__PURE__ */
|
|
2391
|
+
return /* @__PURE__ */ jsx27("span", { className: "block truncate max-w-xs", title: text, children: text });
|
|
2352
2392
|
}
|
|
2353
2393
|
function OverflowListCell({
|
|
2354
2394
|
value,
|
|
@@ -2356,7 +2396,7 @@ function OverflowListCell({
|
|
|
2356
2396
|
}) {
|
|
2357
2397
|
const items = Array.isArray(value) ? value : [];
|
|
2358
2398
|
if (items.length === 0)
|
|
2359
|
-
return /* @__PURE__ */
|
|
2399
|
+
return /* @__PURE__ */ jsx27("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2360
2400
|
const displayKey = options.displayKey;
|
|
2361
2401
|
const fallbackKey = options.fallbackKey;
|
|
2362
2402
|
const prefixKey = options.prefixKey;
|
|
@@ -2381,8 +2421,8 @@ function JoinCell({
|
|
|
2381
2421
|
}) {
|
|
2382
2422
|
const sep = options.separator ?? ", ";
|
|
2383
2423
|
if (!Array.isArray(value) || value.length === 0)
|
|
2384
|
-
return /* @__PURE__ */
|
|
2385
|
-
return /* @__PURE__ */
|
|
2424
|
+
return /* @__PURE__ */ jsx27("span", { className: "text-muted-foreground", children: "\u2014" });
|
|
2425
|
+
return /* @__PURE__ */ jsx27("span", { className: "text-muted-foreground", children: value.join(sep) });
|
|
2386
2426
|
}
|
|
2387
2427
|
|
|
2388
2428
|
// src/EntityTable/tableSchema/cellRegistry.ts
|
|
@@ -2413,7 +2453,7 @@ function resolveCellRenderer2(name, localRenderers) {
|
|
|
2413
2453
|
return localRenderers?.[name] ?? CELL_RENDERERS[name] ?? TextCell;
|
|
2414
2454
|
}
|
|
2415
2455
|
function createRenderer(render) {
|
|
2416
|
-
return ({ row, options }) =>
|
|
2456
|
+
return ({ row, options }) => React23.createElement(React23.Fragment, null, render(row, options));
|
|
2417
2457
|
}
|
|
2418
2458
|
function validateRendererNames(renderers) {
|
|
2419
2459
|
for (const name of Object.keys(renderers)) {
|
|
@@ -2454,7 +2494,7 @@ function keyToLabel(key) {
|
|
|
2454
2494
|
}
|
|
2455
2495
|
|
|
2456
2496
|
// src/EntityTable/EntityTable.tsx
|
|
2457
|
-
import { jsx as
|
|
2497
|
+
import { jsx as jsx28, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2458
2498
|
var coreRowModel = getCoreRowModel();
|
|
2459
2499
|
function resolveTableDefaults(props) {
|
|
2460
2500
|
return {
|
|
@@ -2473,7 +2513,7 @@ function buildColumnDefs(resolved, localRenderers) {
|
|
|
2473
2513
|
cell: ({
|
|
2474
2514
|
getValue,
|
|
2475
2515
|
row
|
|
2476
|
-
}) => /* @__PURE__ */
|
|
2516
|
+
}) => /* @__PURE__ */ jsx28(
|
|
2477
2517
|
Renderer,
|
|
2478
2518
|
{
|
|
2479
2519
|
value: getValue(),
|
|
@@ -2491,7 +2531,7 @@ function buildSelectColumn() {
|
|
|
2491
2531
|
return {
|
|
2492
2532
|
id: "_select",
|
|
2493
2533
|
size: 40,
|
|
2494
|
-
header: ({ table: t }) => /* @__PURE__ */
|
|
2534
|
+
header: ({ table: t }) => /* @__PURE__ */ jsx28(
|
|
2495
2535
|
Checkbox,
|
|
2496
2536
|
{
|
|
2497
2537
|
checked: t.getIsAllPageRowsSelected() || (t.getIsSomePageRowsSelected() ? "indeterminate" : false),
|
|
@@ -2499,7 +2539,7 @@ function buildSelectColumn() {
|
|
|
2499
2539
|
"aria-label": "Select all"
|
|
2500
2540
|
}
|
|
2501
2541
|
),
|
|
2502
|
-
cell: ({ row }) => /* @__PURE__ */
|
|
2542
|
+
cell: ({ row }) => /* @__PURE__ */ jsx28(
|
|
2503
2543
|
Checkbox,
|
|
2504
2544
|
{
|
|
2505
2545
|
checked: row.getIsSelected(),
|
|
@@ -2673,7 +2713,7 @@ function StatusRows({
|
|
|
2673
2713
|
colCount
|
|
2674
2714
|
}) {
|
|
2675
2715
|
if (isLoading) {
|
|
2676
|
-
return /* @__PURE__ */
|
|
2716
|
+
return /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28(
|
|
2677
2717
|
"td",
|
|
2678
2718
|
{
|
|
2679
2719
|
colSpan: colCount,
|
|
@@ -2683,7 +2723,7 @@ function StatusRows({
|
|
|
2683
2723
|
) });
|
|
2684
2724
|
}
|
|
2685
2725
|
if (isError) {
|
|
2686
|
-
return /* @__PURE__ */
|
|
2726
|
+
return /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28(
|
|
2687
2727
|
"td",
|
|
2688
2728
|
{
|
|
2689
2729
|
colSpan: colCount,
|
|
@@ -2693,7 +2733,7 @@ function StatusRows({
|
|
|
2693
2733
|
) });
|
|
2694
2734
|
}
|
|
2695
2735
|
if (isEmpty) {
|
|
2696
|
-
return /* @__PURE__ */
|
|
2736
|
+
return /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28(
|
|
2697
2737
|
"td",
|
|
2698
2738
|
{
|
|
2699
2739
|
colSpan: colCount,
|
|
@@ -2713,7 +2753,7 @@ function RowActionCell({
|
|
|
2713
2753
|
actions,
|
|
2714
2754
|
rowOriginal
|
|
2715
2755
|
}) {
|
|
2716
|
-
return /* @__PURE__ */
|
|
2756
|
+
return /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 w-24 text-right", children: /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-end gap-1", children: actions.map((action) => /* @__PURE__ */ jsx28(
|
|
2717
2757
|
ActionButton,
|
|
2718
2758
|
{
|
|
2719
2759
|
action,
|
|
@@ -2730,7 +2770,7 @@ function ActionButton({
|
|
|
2730
2770
|
if (isHidden) return null;
|
|
2731
2771
|
const isDisabled = action.disabled?.(rowOriginal);
|
|
2732
2772
|
const Icon = action.icon;
|
|
2733
|
-
return /* @__PURE__ */
|
|
2773
|
+
return /* @__PURE__ */ jsx28(
|
|
2734
2774
|
"button",
|
|
2735
2775
|
{
|
|
2736
2776
|
title: action.label,
|
|
@@ -2739,12 +2779,12 @@ function ActionButton({
|
|
|
2739
2779
|
e.stopPropagation();
|
|
2740
2780
|
action.onClick(rowOriginal);
|
|
2741
2781
|
},
|
|
2742
|
-
className:
|
|
2782
|
+
className: cn26(
|
|
2743
2783
|
"inline-flex items-center justify-center h-7 w-7 rounded-md transition-colors",
|
|
2744
2784
|
action.variant === "destructive" ? "text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-accent",
|
|
2745
2785
|
isDisabled ? "opacity-30 cursor-not-allowed group-hover/row:opacity-30" : "opacity-0 group-hover/row:opacity-100 focus:opacity-100"
|
|
2746
2786
|
),
|
|
2747
|
-
children: Icon ? /* @__PURE__ */
|
|
2787
|
+
children: Icon ? /* @__PURE__ */ jsx28(Icon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx28("span", { className: "text-xs", children: action.label })
|
|
2748
2788
|
},
|
|
2749
2789
|
action.label
|
|
2750
2790
|
);
|
|
@@ -2774,7 +2814,7 @@ function DataRow({
|
|
|
2774
2814
|
containerRef
|
|
2775
2815
|
);
|
|
2776
2816
|
},
|
|
2777
|
-
className:
|
|
2817
|
+
className: cn26(
|
|
2778
2818
|
"border-b last:border-b-0 transition-colors group/row",
|
|
2779
2819
|
onRowClick && !selectionMode && "hover:bg-accent/50 cursor-pointer",
|
|
2780
2820
|
selectionMode && "cursor-default",
|
|
@@ -2782,9 +2822,9 @@ function DataRow({
|
|
|
2782
2822
|
index === activeRowIndex && selectionMode && "bg-accent"
|
|
2783
2823
|
),
|
|
2784
2824
|
children: [
|
|
2785
|
-
row.getVisibleCells().map((cell) => /* @__PURE__ */
|
|
2786
|
-
hasRowActions && /* @__PURE__ */
|
|
2787
|
-
hasChevron && /* @__PURE__ */
|
|
2825
|
+
row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx28("td", { className: "px-4 py-3", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)),
|
|
2826
|
+
hasRowActions && /* @__PURE__ */ jsx28(RowActionCell, { actions: rowActions, rowOriginal: row.original }),
|
|
2827
|
+
hasChevron && /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 w-10", children: /* @__PURE__ */ jsx28(ChevronRight2, { className: "h-4 w-4 text-muted-foreground" }) })
|
|
2788
2828
|
]
|
|
2789
2829
|
},
|
|
2790
2830
|
row.id
|
|
@@ -2808,7 +2848,7 @@ function TableFooter({
|
|
|
2808
2848
|
}) {
|
|
2809
2849
|
if (!data?.meta) return null;
|
|
2810
2850
|
if (isPaginated) {
|
|
2811
|
-
return /* @__PURE__ */
|
|
2851
|
+
return /* @__PURE__ */ jsx28(PaginationFooter, { table, entityLabel });
|
|
2812
2852
|
}
|
|
2813
2853
|
return /* @__PURE__ */ jsxs8("p", { className: "text-xs text-muted-foreground mt-3", children: [
|
|
2814
2854
|
"Showing ",
|
|
@@ -2853,16 +2893,16 @@ function EntityTable(props) {
|
|
|
2853
2893
|
);
|
|
2854
2894
|
const colCount = columns.length + (hasTrailingCol ? 1 : 0);
|
|
2855
2895
|
return /* @__PURE__ */ jsxs8("div", { children: [
|
|
2856
|
-
/* @__PURE__ */
|
|
2896
|
+
/* @__PURE__ */ jsx28(
|
|
2857
2897
|
"div",
|
|
2858
2898
|
{
|
|
2859
2899
|
ref: selectionMode ? containerRef : void 0,
|
|
2860
2900
|
tabIndex: selectionMode ? 0 : void 0,
|
|
2861
2901
|
onKeyDown: selectionMode ? handleKeyDown : void 0,
|
|
2862
|
-
className:
|
|
2902
|
+
className: cn26("rounded-lg border", selectionMode && "outline-none"),
|
|
2863
2903
|
children: /* @__PURE__ */ jsxs8("table", { className: "w-full text-sm", children: [
|
|
2864
|
-
/* @__PURE__ */
|
|
2865
|
-
table.getFlatHeaders().map((header) => /* @__PURE__ */
|
|
2904
|
+
/* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs8("tr", { className: "border-b bg-muted/40", children: [
|
|
2905
|
+
table.getFlatHeaders().map((header) => /* @__PURE__ */ jsx28(
|
|
2866
2906
|
"th",
|
|
2867
2907
|
{
|
|
2868
2908
|
className: "text-left text-xs font-medium text-muted-foreground px-4 py-2.5",
|
|
@@ -2874,7 +2914,7 @@ function EntityTable(props) {
|
|
|
2874
2914
|
},
|
|
2875
2915
|
header.id
|
|
2876
2916
|
)),
|
|
2877
|
-
hasRowActions && /* @__PURE__ */
|
|
2917
|
+
hasRowActions && /* @__PURE__ */ jsx28(
|
|
2878
2918
|
"th",
|
|
2879
2919
|
{
|
|
2880
2920
|
"aria-label": "Actions",
|
|
@@ -2882,10 +2922,10 @@ function EntityTable(props) {
|
|
|
2882
2922
|
className: "w-24 text-right text-xs font-medium text-muted-foreground px-4 py-2.5"
|
|
2883
2923
|
}
|
|
2884
2924
|
),
|
|
2885
|
-
hasChevron && /* @__PURE__ */
|
|
2925
|
+
hasChevron && /* @__PURE__ */ jsx28("th", { "aria-label": "Open", scope: "col", className: "w-10" })
|
|
2886
2926
|
] }) }),
|
|
2887
2927
|
/* @__PURE__ */ jsxs8("tbody", { children: [
|
|
2888
|
-
/* @__PURE__ */
|
|
2928
|
+
/* @__PURE__ */ jsx28(
|
|
2889
2929
|
StatusRows,
|
|
2890
2930
|
{
|
|
2891
2931
|
isLoading,
|
|
@@ -2898,7 +2938,7 @@ function EntityTable(props) {
|
|
|
2898
2938
|
colCount
|
|
2899
2939
|
}
|
|
2900
2940
|
),
|
|
2901
|
-
table.getRowModel().rows.map((row, index) => /* @__PURE__ */
|
|
2941
|
+
table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx28(
|
|
2902
2942
|
DataRow,
|
|
2903
2943
|
{
|
|
2904
2944
|
row,
|
|
@@ -2918,7 +2958,7 @@ function EntityTable(props) {
|
|
|
2918
2958
|
] })
|
|
2919
2959
|
}
|
|
2920
2960
|
),
|
|
2921
|
-
/* @__PURE__ */
|
|
2961
|
+
/* @__PURE__ */ jsx28(
|
|
2922
2962
|
TableFooter,
|
|
2923
2963
|
{
|
|
2924
2964
|
isPaginated,
|
|
@@ -2940,9 +2980,9 @@ function PaginationFooter({
|
|
|
2940
2980
|
const from = rowCount === 0 ? 0 : pageIndex * pageSize + 1;
|
|
2941
2981
|
const to = Math.min((pageIndex + 1) * pageSize, rowCount);
|
|
2942
2982
|
return /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mt-3", children: [
|
|
2943
|
-
/* @__PURE__ */
|
|
2983
|
+
/* @__PURE__ */ jsx28("p", { className: "text-xs text-muted-foreground", children: rowCount === 0 ? `No ${entityLabel}` : `Showing ${from}\u2013${to} of ${rowCount} ${entityLabel}` }),
|
|
2944
2984
|
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1", children: [
|
|
2945
|
-
/* @__PURE__ */
|
|
2985
|
+
/* @__PURE__ */ jsx28(
|
|
2946
2986
|
"button",
|
|
2947
2987
|
{
|
|
2948
2988
|
type: "button",
|
|
@@ -2952,8 +2992,8 @@ function PaginationFooter({
|
|
|
2952
2992
|
children: "Previous"
|
|
2953
2993
|
}
|
|
2954
2994
|
),
|
|
2955
|
-
/* @__PURE__ */
|
|
2956
|
-
/* @__PURE__ */
|
|
2995
|
+
/* @__PURE__ */ jsx28("span", { className: "text-xs text-muted-foreground px-2", children: pageCount > 0 ? `${pageIndex + 1} / ${pageCount}` : "--" }),
|
|
2996
|
+
/* @__PURE__ */ jsx28(
|
|
2957
2997
|
"button",
|
|
2958
2998
|
{
|
|
2959
2999
|
type: "button",
|
|
@@ -2967,14 +3007,222 @@ function PaginationFooter({
|
|
|
2967
3007
|
] });
|
|
2968
3008
|
}
|
|
2969
3009
|
|
|
3010
|
+
// src/PropertyList/PropertyList.tsx
|
|
3011
|
+
import { copyTextToClipboard } from "@petrarca/sonnet-core";
|
|
3012
|
+
|
|
3013
|
+
// src/PropertyList/PropertyValue.tsx
|
|
3014
|
+
import { useState as useState3 } from "react";
|
|
3015
|
+
import { JSONTree } from "react-json-tree";
|
|
3016
|
+
import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
3017
|
+
var DEFAULT_CLAMP_CHARS = 180;
|
|
3018
|
+
var tokenTheme = {
|
|
3019
|
+
scheme: "sonnet",
|
|
3020
|
+
base00: "transparent",
|
|
3021
|
+
base01: "hsl(var(--muted))",
|
|
3022
|
+
base02: "hsl(var(--border))",
|
|
3023
|
+
base03: "hsl(var(--muted-foreground))",
|
|
3024
|
+
base04: "hsl(var(--muted-foreground))",
|
|
3025
|
+
base05: "hsl(var(--foreground))",
|
|
3026
|
+
base06: "hsl(var(--foreground))",
|
|
3027
|
+
base07: "hsl(var(--foreground))",
|
|
3028
|
+
base08: "hsl(var(--destructive))",
|
|
3029
|
+
base09: "hsl(var(--primary))",
|
|
3030
|
+
base0A: "hsl(var(--primary))",
|
|
3031
|
+
base0B: "hsl(var(--primary))",
|
|
3032
|
+
base0C: "hsl(var(--primary))",
|
|
3033
|
+
base0D: "hsl(var(--primary))",
|
|
3034
|
+
base0E: "hsl(var(--primary))",
|
|
3035
|
+
base0F: "hsl(var(--muted-foreground))"
|
|
3036
|
+
};
|
|
3037
|
+
function isObjectLike(v) {
|
|
3038
|
+
return typeof v === "object" && v !== null;
|
|
3039
|
+
}
|
|
3040
|
+
function JsonValue({ value }) {
|
|
3041
|
+
const [open, setOpen] = useState3(false);
|
|
3042
|
+
const summary = Array.isArray(value) ? `[${value.length} item${value.length === 1 ? "" : "s"}]` : `{${Object.keys(value).length} key${Object.keys(value).length === 1 ? "" : "s"}}`;
|
|
3043
|
+
if (!open) {
|
|
3044
|
+
return /* @__PURE__ */ jsxs9(
|
|
3045
|
+
"button",
|
|
3046
|
+
{
|
|
3047
|
+
type: "button",
|
|
3048
|
+
onClick: (e) => {
|
|
3049
|
+
e.stopPropagation();
|
|
3050
|
+
setOpen(true);
|
|
3051
|
+
},
|
|
3052
|
+
className: "text-sm font-mono text-muted-foreground hover:text-foreground",
|
|
3053
|
+
children: [
|
|
3054
|
+
summary,
|
|
3055
|
+
" ",
|
|
3056
|
+
/* @__PURE__ */ jsx29("span", { className: "text-xs", children: "\u2014 show" })
|
|
3057
|
+
]
|
|
3058
|
+
}
|
|
3059
|
+
);
|
|
3060
|
+
}
|
|
3061
|
+
return /* @__PURE__ */ jsxs9("div", { className: "text-xs font-mono", children: [
|
|
3062
|
+
/* @__PURE__ */ jsx29(
|
|
3063
|
+
"button",
|
|
3064
|
+
{
|
|
3065
|
+
type: "button",
|
|
3066
|
+
onClick: (e) => {
|
|
3067
|
+
e.stopPropagation();
|
|
3068
|
+
setOpen(false);
|
|
3069
|
+
},
|
|
3070
|
+
className: "mb-1 text-xs text-muted-foreground hover:text-foreground",
|
|
3071
|
+
children: "hide"
|
|
3072
|
+
}
|
|
3073
|
+
),
|
|
3074
|
+
/* @__PURE__ */ jsx29("div", { className: "max-h-64 overflow-auto rounded border border-border bg-muted/30 px-2 py-1", children: /* @__PURE__ */ jsx29(
|
|
3075
|
+
JSONTree,
|
|
3076
|
+
{
|
|
3077
|
+
data: value,
|
|
3078
|
+
theme: tokenTheme,
|
|
3079
|
+
invertTheme: false,
|
|
3080
|
+
shouldExpandNodeInitially: () => true,
|
|
3081
|
+
hideRoot: true
|
|
3082
|
+
}
|
|
3083
|
+
) })
|
|
3084
|
+
] });
|
|
3085
|
+
}
|
|
3086
|
+
function LongTextValue({ text }) {
|
|
3087
|
+
const [open, setOpen] = useState3(false);
|
|
3088
|
+
if (!open) {
|
|
3089
|
+
return /* @__PURE__ */ jsxs9("span", { className: "break-words", children: [
|
|
3090
|
+
/* @__PURE__ */ jsx29("span", { className: "line-clamp-3 align-bottom", children: text }),
|
|
3091
|
+
/* @__PURE__ */ jsx29(
|
|
3092
|
+
"button",
|
|
3093
|
+
{
|
|
3094
|
+
type: "button",
|
|
3095
|
+
onClick: (e) => {
|
|
3096
|
+
e.stopPropagation();
|
|
3097
|
+
setOpen(true);
|
|
3098
|
+
},
|
|
3099
|
+
className: "text-xs text-muted-foreground hover:text-foreground",
|
|
3100
|
+
children: "Show more"
|
|
3101
|
+
}
|
|
3102
|
+
)
|
|
3103
|
+
] });
|
|
3104
|
+
}
|
|
3105
|
+
return /* @__PURE__ */ jsxs9("span", { className: "break-words", children: [
|
|
3106
|
+
/* @__PURE__ */ jsx29("span", { className: "block max-h-64 overflow-auto whitespace-pre-wrap rounded border border-border bg-muted/30 px-2 py-1", children: text }),
|
|
3107
|
+
/* @__PURE__ */ jsx29(
|
|
3108
|
+
"button",
|
|
3109
|
+
{
|
|
3110
|
+
type: "button",
|
|
3111
|
+
onClick: (e) => {
|
|
3112
|
+
e.stopPropagation();
|
|
3113
|
+
setOpen(false);
|
|
3114
|
+
},
|
|
3115
|
+
className: "text-xs text-muted-foreground hover:text-foreground",
|
|
3116
|
+
children: "Show less"
|
|
3117
|
+
}
|
|
3118
|
+
)
|
|
3119
|
+
] });
|
|
3120
|
+
}
|
|
3121
|
+
function renderFromSchema(value, schema, className) {
|
|
3122
|
+
const cellName = schema["x-ui-cell"] ?? inferCellRenderer(schema.type, schema.format);
|
|
3123
|
+
if (cellName === "json") {
|
|
3124
|
+
const parsed = typeof value === "string" ? safeParse(value) : value;
|
|
3125
|
+
return isObjectLike(parsed) ? /* @__PURE__ */ jsx29(JsonValue, { value: parsed }) : null;
|
|
3126
|
+
}
|
|
3127
|
+
if (cellName && cellName !== "text") {
|
|
3128
|
+
const Renderer = CELL_RENDERERS[cellName];
|
|
3129
|
+
if (Renderer) {
|
|
3130
|
+
return /* @__PURE__ */ jsx29("span", { className, children: /* @__PURE__ */ jsx29(
|
|
3131
|
+
Renderer,
|
|
3132
|
+
{
|
|
3133
|
+
value,
|
|
3134
|
+
row: {},
|
|
3135
|
+
options: schema["x-ui-cell-options"] ?? {}
|
|
3136
|
+
}
|
|
3137
|
+
) });
|
|
3138
|
+
}
|
|
3139
|
+
}
|
|
3140
|
+
return null;
|
|
3141
|
+
}
|
|
3142
|
+
function renderObjectLike(value, className) {
|
|
3143
|
+
if (Array.isArray(value) && value.every((v) => !isObjectLike(v))) {
|
|
3144
|
+
return /* @__PURE__ */ jsx29("span", { className: `break-words ${className ?? ""}`, children: value.map(String).join(", ") });
|
|
3145
|
+
}
|
|
3146
|
+
return /* @__PURE__ */ jsx29(JsonValue, { value });
|
|
3147
|
+
}
|
|
3148
|
+
function renderString(value, className, clampChars) {
|
|
3149
|
+
if (typeof value === "boolean") {
|
|
3150
|
+
return /* @__PURE__ */ jsx29("span", { className, children: value ? "true" : "false" });
|
|
3151
|
+
}
|
|
3152
|
+
const str = String(value);
|
|
3153
|
+
if (str.length > clampChars || str.includes("\n")) {
|
|
3154
|
+
return /* @__PURE__ */ jsx29("span", { className, children: /* @__PURE__ */ jsx29(LongTextValue, { text: str }) });
|
|
3155
|
+
}
|
|
3156
|
+
return /* @__PURE__ */ jsx29("span", { className: `break-words ${className ?? ""}`, children: str });
|
|
3157
|
+
}
|
|
3158
|
+
function renderFromValue(value, className, clampChars) {
|
|
3159
|
+
if (value == null) {
|
|
3160
|
+
return /* @__PURE__ */ jsx29("span", { className: `text-muted-foreground ${className ?? ""}`, children: "\u2014" });
|
|
3161
|
+
}
|
|
3162
|
+
if (isObjectLike(value)) return renderObjectLike(value, className);
|
|
3163
|
+
return renderString(value, className, clampChars);
|
|
3164
|
+
}
|
|
3165
|
+
function PropertyValue({
|
|
3166
|
+
value,
|
|
3167
|
+
schema,
|
|
3168
|
+
className,
|
|
3169
|
+
clampChars = DEFAULT_CLAMP_CHARS
|
|
3170
|
+
}) {
|
|
3171
|
+
const fromSchema = schema ? renderFromSchema(value, schema, className) : null;
|
|
3172
|
+
return fromSchema ?? renderFromValue(value, className, clampChars);
|
|
3173
|
+
}
|
|
3174
|
+
function safeParse(s) {
|
|
3175
|
+
try {
|
|
3176
|
+
return JSON.parse(s);
|
|
3177
|
+
} catch {
|
|
3178
|
+
return void 0;
|
|
3179
|
+
}
|
|
3180
|
+
}
|
|
3181
|
+
|
|
3182
|
+
// src/PropertyList/PropertyList.tsx
|
|
3183
|
+
import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3184
|
+
function PropertyList({
|
|
3185
|
+
properties,
|
|
3186
|
+
propertySchemas,
|
|
3187
|
+
showHeader = false,
|
|
3188
|
+
copyable = true,
|
|
3189
|
+
emptyLabel = "No properties",
|
|
3190
|
+
className
|
|
3191
|
+
}) {
|
|
3192
|
+
const entries = Object.entries(properties ?? {});
|
|
3193
|
+
if (entries.length === 0) {
|
|
3194
|
+
return /* @__PURE__ */ jsx30("p", { className: "text-sm text-muted-foreground italic", children: emptyLabel });
|
|
3195
|
+
}
|
|
3196
|
+
return /* @__PURE__ */ jsxs10("ul", { className: `list-none ${className ?? ""}`, children: [
|
|
3197
|
+
showHeader && /* @__PURE__ */ jsx30("li", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1", children: "Properties" }),
|
|
3198
|
+
entries.map(([key, value]) => /* @__PURE__ */ jsxs10("li", { className: "mb-2 leading-tight", children: [
|
|
3199
|
+
/* @__PURE__ */ jsx30(
|
|
3200
|
+
"p",
|
|
3201
|
+
{
|
|
3202
|
+
className: `text-xs text-muted-foreground uppercase tracking-wide ${copyable ? "cursor-pointer hover:text-foreground" : ""}`,
|
|
3203
|
+
onClick: copyable ? () => copyTextToClipboard(stringForCopy(value)) : void 0,
|
|
3204
|
+
title: copyable ? "Click to copy value" : void 0,
|
|
3205
|
+
children: key
|
|
3206
|
+
}
|
|
3207
|
+
),
|
|
3208
|
+
/* @__PURE__ */ jsx30("div", { className: "text-sm text-foreground", children: /* @__PURE__ */ jsx30(PropertyValue, { value, schema: propertySchemas?.[key] }) })
|
|
3209
|
+
] }, key))
|
|
3210
|
+
] });
|
|
3211
|
+
}
|
|
3212
|
+
function stringForCopy(value) {
|
|
3213
|
+
if (value == null) return "";
|
|
3214
|
+
if (typeof value === "object") return JSON.stringify(value);
|
|
3215
|
+
return String(value);
|
|
3216
|
+
}
|
|
3217
|
+
|
|
2970
3218
|
// src/EntitySelect/EntitySelect.tsx
|
|
2971
|
-
import * as
|
|
3219
|
+
import * as React26 from "react";
|
|
2972
3220
|
import { Check as Check4, ChevronsUpDown, Loader2 } from "lucide-react";
|
|
2973
|
-
import { cn as
|
|
3221
|
+
import { cn as cn27 } from "@petrarca/sonnet-core";
|
|
2974
3222
|
import {
|
|
2975
3223
|
useEntityOptions
|
|
2976
3224
|
} from "@petrarca/sonnet-core/hooks";
|
|
2977
|
-
import { Fragment as Fragment2, jsx as
|
|
3225
|
+
import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
2978
3226
|
function emptyStateMessage({
|
|
2979
3227
|
mode,
|
|
2980
3228
|
search,
|
|
@@ -2992,8 +3240,8 @@ function emptyStateMessage({
|
|
|
2992
3240
|
return emptyMessage;
|
|
2993
3241
|
}
|
|
2994
3242
|
function useHasSearched(submit) {
|
|
2995
|
-
const [hasSearched, setHasSearched] =
|
|
2996
|
-
const wrappedSubmit =
|
|
3243
|
+
const [hasSearched, setHasSearched] = React26.useState(false);
|
|
3244
|
+
const wrappedSubmit = React26.useCallback(() => {
|
|
2997
3245
|
setHasSearched(true);
|
|
2998
3246
|
submit();
|
|
2999
3247
|
}, [submit]);
|
|
@@ -3016,19 +3264,19 @@ function EntitySelectLabel({
|
|
|
3016
3264
|
description
|
|
3017
3265
|
}) {
|
|
3018
3266
|
const hasLabel = label !== void 0 && label !== false;
|
|
3019
|
-
return /* @__PURE__ */
|
|
3020
|
-
hasLabel && /* @__PURE__ */
|
|
3267
|
+
return /* @__PURE__ */ jsxs11(Fragment2, { children: [
|
|
3268
|
+
hasLabel && /* @__PURE__ */ jsxs11(
|
|
3021
3269
|
"label",
|
|
3022
3270
|
{
|
|
3023
3271
|
htmlFor: id,
|
|
3024
3272
|
className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
3025
3273
|
children: [
|
|
3026
3274
|
label,
|
|
3027
|
-
required && /* @__PURE__ */
|
|
3275
|
+
required && /* @__PURE__ */ jsx31("span", { className: "ml-1 text-destructive", children: "*" })
|
|
3028
3276
|
]
|
|
3029
3277
|
}
|
|
3030
3278
|
),
|
|
3031
|
-
description && /* @__PURE__ */
|
|
3279
|
+
description && /* @__PURE__ */ jsx31("p", { className: "text-sm text-muted-foreground", children: description })
|
|
3032
3280
|
] });
|
|
3033
3281
|
}
|
|
3034
3282
|
function EntitySelectDropdown({
|
|
@@ -3045,8 +3293,8 @@ function EntitySelectDropdown({
|
|
|
3045
3293
|
value,
|
|
3046
3294
|
handleSelect
|
|
3047
3295
|
}) {
|
|
3048
|
-
return /* @__PURE__ */
|
|
3049
|
-
/* @__PURE__ */
|
|
3296
|
+
return /* @__PURE__ */ jsxs11(Command, { shouldFilter: false, children: [
|
|
3297
|
+
/* @__PURE__ */ jsx31(
|
|
3050
3298
|
CommandInput,
|
|
3051
3299
|
{
|
|
3052
3300
|
placeholder: searchPlaceholder,
|
|
@@ -3060,8 +3308,8 @@ function EntitySelectDropdown({
|
|
|
3060
3308
|
} : void 0
|
|
3061
3309
|
}
|
|
3062
3310
|
),
|
|
3063
|
-
/* @__PURE__ */
|
|
3064
|
-
/* @__PURE__ */
|
|
3311
|
+
/* @__PURE__ */ jsxs11(CommandList, { children: [
|
|
3312
|
+
/* @__PURE__ */ jsx31(CommandEmpty, { children: emptyStateMessage({
|
|
3065
3313
|
mode,
|
|
3066
3314
|
search,
|
|
3067
3315
|
minChars,
|
|
@@ -3069,16 +3317,16 @@ function EntitySelectDropdown({
|
|
|
3069
3317
|
hasSearched,
|
|
3070
3318
|
emptyMessage
|
|
3071
3319
|
}) }),
|
|
3072
|
-
/* @__PURE__ */
|
|
3320
|
+
/* @__PURE__ */ jsx31(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs11(
|
|
3073
3321
|
CommandItem,
|
|
3074
3322
|
{
|
|
3075
3323
|
value: option.value,
|
|
3076
3324
|
onSelect: handleSelect,
|
|
3077
3325
|
children: [
|
|
3078
|
-
/* @__PURE__ */
|
|
3326
|
+
/* @__PURE__ */ jsx31(
|
|
3079
3327
|
Check4,
|
|
3080
3328
|
{
|
|
3081
|
-
className:
|
|
3329
|
+
className: cn27(
|
|
3082
3330
|
"mr-2 h-4 w-4",
|
|
3083
3331
|
value === option.value ? "opacity-100" : "opacity-0"
|
|
3084
3332
|
)
|
|
@@ -3115,8 +3363,8 @@ function EntitySelect(props) {
|
|
|
3115
3363
|
emptyMessage,
|
|
3116
3364
|
disabled
|
|
3117
3365
|
} = resolveEntitySelectDefaults(props);
|
|
3118
|
-
const [open, setOpen] =
|
|
3119
|
-
const [selectedLabel, setSelectedLabel] =
|
|
3366
|
+
const [open, setOpen] = React26.useState(false);
|
|
3367
|
+
const [selectedLabel, setSelectedLabel] = React26.useState(null);
|
|
3120
3368
|
const {
|
|
3121
3369
|
options,
|
|
3122
3370
|
isLoading,
|
|
@@ -3125,7 +3373,7 @@ function EntitySelect(props) {
|
|
|
3125
3373
|
submit: rawSubmit
|
|
3126
3374
|
} = useEntityOptions({ fetcher, queryKey, mode, minChars });
|
|
3127
3375
|
const [hasSearched, submit] = useHasSearched(rawSubmit);
|
|
3128
|
-
|
|
3376
|
+
React26.useEffect(() => {
|
|
3129
3377
|
if (!value) {
|
|
3130
3378
|
setSelectedLabel(null);
|
|
3131
3379
|
return;
|
|
@@ -3135,7 +3383,7 @@ function EntitySelect(props) {
|
|
|
3135
3383
|
setSelectedLabel(found.label);
|
|
3136
3384
|
}
|
|
3137
3385
|
}, [value, options]);
|
|
3138
|
-
const handleSelect =
|
|
3386
|
+
const handleSelect = React26.useCallback(
|
|
3139
3387
|
(selectedValue) => {
|
|
3140
3388
|
const opt = options.find((o) => o.value === selectedValue);
|
|
3141
3389
|
if (opt) setSelectedLabel(opt.label);
|
|
@@ -3148,7 +3396,7 @@ function EntitySelect(props) {
|
|
|
3148
3396
|
},
|
|
3149
3397
|
[options, value, onChange, onChangeOption, setSearch]
|
|
3150
3398
|
);
|
|
3151
|
-
const handleOpenChange =
|
|
3399
|
+
const handleOpenChange = React26.useCallback(
|
|
3152
3400
|
(newOpen) => {
|
|
3153
3401
|
setOpen(newOpen);
|
|
3154
3402
|
if (!newOpen) {
|
|
@@ -3158,8 +3406,8 @@ function EntitySelect(props) {
|
|
|
3158
3406
|
},
|
|
3159
3407
|
[onBlur, setSearch]
|
|
3160
3408
|
);
|
|
3161
|
-
return /* @__PURE__ */
|
|
3162
|
-
/* @__PURE__ */
|
|
3409
|
+
return /* @__PURE__ */ jsxs11("div", { className: cn27("space-y-2", className), children: [
|
|
3410
|
+
/* @__PURE__ */ jsx31(
|
|
3163
3411
|
EntitySelectLabel,
|
|
3164
3412
|
{
|
|
3165
3413
|
id,
|
|
@@ -3168,35 +3416,35 @@ function EntitySelect(props) {
|
|
|
3168
3416
|
description
|
|
3169
3417
|
}
|
|
3170
3418
|
),
|
|
3171
|
-
/* @__PURE__ */
|
|
3172
|
-
/* @__PURE__ */
|
|
3419
|
+
/* @__PURE__ */ jsxs11(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
3420
|
+
/* @__PURE__ */ jsx31(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11(
|
|
3173
3421
|
Button,
|
|
3174
3422
|
{
|
|
3175
3423
|
id,
|
|
3176
3424
|
variant: "outline",
|
|
3177
3425
|
role: "combobox",
|
|
3178
3426
|
"aria-expanded": open,
|
|
3179
|
-
className:
|
|
3427
|
+
className: cn27(
|
|
3180
3428
|
"w-full justify-between",
|
|
3181
3429
|
!selectedLabel && "text-muted-foreground",
|
|
3182
3430
|
error && "border-destructive"
|
|
3183
3431
|
),
|
|
3184
3432
|
disabled,
|
|
3185
3433
|
children: [
|
|
3186
|
-
/* @__PURE__ */
|
|
3187
|
-
/* @__PURE__ */
|
|
3188
|
-
isLoading && /* @__PURE__ */
|
|
3189
|
-
/* @__PURE__ */
|
|
3434
|
+
/* @__PURE__ */ jsx31("span", { className: "truncate", children: selectedLabel ?? placeholder }),
|
|
3435
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
|
|
3436
|
+
isLoading && /* @__PURE__ */ jsx31(Loader2, { className: "h-4 w-4 animate-spin opacity-50" }),
|
|
3437
|
+
/* @__PURE__ */ jsx31(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
|
|
3190
3438
|
] })
|
|
3191
3439
|
]
|
|
3192
3440
|
}
|
|
3193
3441
|
) }),
|
|
3194
|
-
/* @__PURE__ */
|
|
3442
|
+
/* @__PURE__ */ jsx31(
|
|
3195
3443
|
PopoverContent,
|
|
3196
3444
|
{
|
|
3197
3445
|
className: "w-[--radix-popover-trigger-width] p-0",
|
|
3198
3446
|
align: "start",
|
|
3199
|
-
children: /* @__PURE__ */
|
|
3447
|
+
children: /* @__PURE__ */ jsx31(
|
|
3200
3448
|
EntitySelectDropdown,
|
|
3201
3449
|
{
|
|
3202
3450
|
searchPlaceholder,
|
|
@@ -3216,34 +3464,34 @@ function EntitySelect(props) {
|
|
|
3216
3464
|
}
|
|
3217
3465
|
)
|
|
3218
3466
|
] }),
|
|
3219
|
-
error && /* @__PURE__ */
|
|
3467
|
+
error && /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium text-destructive", children: error })
|
|
3220
3468
|
] });
|
|
3221
3469
|
}
|
|
3222
3470
|
|
|
3223
3471
|
// src/EntityTree/EntityTree.tsx
|
|
3224
3472
|
import {
|
|
3225
|
-
forwardRef as
|
|
3473
|
+
forwardRef as forwardRef20,
|
|
3226
3474
|
useImperativeHandle as useImperativeHandle2,
|
|
3227
3475
|
useMemo as useMemo4,
|
|
3228
3476
|
useRef as useRef6
|
|
3229
3477
|
} from "react";
|
|
3230
3478
|
import { Pencil } from "lucide-react";
|
|
3231
|
-
import { cn as
|
|
3479
|
+
import { cn as cn29 } from "@petrarca/sonnet-core";
|
|
3232
3480
|
|
|
3233
3481
|
// src/TreeView/TreeView.tsx
|
|
3234
3482
|
import {
|
|
3235
|
-
forwardRef as
|
|
3483
|
+
forwardRef as forwardRef19,
|
|
3236
3484
|
useCallback as useCallback4,
|
|
3237
3485
|
useEffect as useEffect5,
|
|
3238
3486
|
useId as useId2,
|
|
3239
3487
|
useImperativeHandle,
|
|
3240
3488
|
useMemo as useMemo3,
|
|
3241
3489
|
useRef as useRef5,
|
|
3242
|
-
useState as
|
|
3490
|
+
useState as useState5
|
|
3243
3491
|
} from "react";
|
|
3244
3492
|
import { ChevronRight as ChevronRight3 } from "lucide-react";
|
|
3245
|
-
import { cn as
|
|
3246
|
-
import { jsx as
|
|
3493
|
+
import { cn as cn28 } from "@petrarca/sonnet-core";
|
|
3494
|
+
import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3247
3495
|
function flatten(nodes, expandedIds, depth = 0, parentId = null, result = []) {
|
|
3248
3496
|
for (const node of nodes) {
|
|
3249
3497
|
result.push({ node, depth, parentId });
|
|
@@ -3260,15 +3508,15 @@ function ToggleIcon({
|
|
|
3260
3508
|
isExpanded
|
|
3261
3509
|
}) {
|
|
3262
3510
|
if (!hasChildren) {
|
|
3263
|
-
return /* @__PURE__ */
|
|
3511
|
+
return /* @__PURE__ */ jsx32("span", { className: "block w-1.5 h-1.5 rounded-full bg-border mx-auto" });
|
|
3264
3512
|
}
|
|
3265
3513
|
if (isLoading) {
|
|
3266
|
-
return /* @__PURE__ */
|
|
3514
|
+
return /* @__PURE__ */ jsx32("span", { className: "block w-3 h-3 rounded-full border-2 border-muted-foreground/40 border-t-foreground animate-spin" });
|
|
3267
3515
|
}
|
|
3268
|
-
return /* @__PURE__ */
|
|
3516
|
+
return /* @__PURE__ */ jsx32(
|
|
3269
3517
|
ChevronRight3,
|
|
3270
3518
|
{
|
|
3271
|
-
className:
|
|
3519
|
+
className: cn28(
|
|
3272
3520
|
"h-3.5 w-3.5 text-muted-foreground transition-transform",
|
|
3273
3521
|
isExpanded && "rotate-90"
|
|
3274
3522
|
)
|
|
@@ -3314,7 +3562,7 @@ function NodeRow({
|
|
|
3314
3562
|
},
|
|
3315
3563
|
[node.id, onSelectionChange]
|
|
3316
3564
|
);
|
|
3317
|
-
return /* @__PURE__ */
|
|
3565
|
+
return /* @__PURE__ */ jsxs12(
|
|
3318
3566
|
"li",
|
|
3319
3567
|
{
|
|
3320
3568
|
id: `${treeId}-node-${node.id}`,
|
|
@@ -3323,7 +3571,7 @@ function NodeRow({
|
|
|
3323
3571
|
"aria-selected": onSelectionChange ? isSelected : void 0,
|
|
3324
3572
|
"aria-busy": node.isLoading,
|
|
3325
3573
|
tabIndex: isFocused ? 0 : -1,
|
|
3326
|
-
className:
|
|
3574
|
+
className: cn28(
|
|
3327
3575
|
"flex items-center gap-1 px-2 py-1.5 rounded-sm text-sm select-none",
|
|
3328
3576
|
"cursor-pointer transition-colors",
|
|
3329
3577
|
"hover:bg-accent/60",
|
|
@@ -3333,13 +3581,13 @@ function NodeRow({
|
|
|
3333
3581
|
style: { paddingLeft: depth * indentPx + 8 },
|
|
3334
3582
|
onClick: handleClick,
|
|
3335
3583
|
children: [
|
|
3336
|
-
/* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsx32(
|
|
3337
3585
|
"span",
|
|
3338
3586
|
{
|
|
3339
3587
|
className: "shrink-0 flex items-center justify-center w-4 h-4",
|
|
3340
3588
|
onClick: handleToggle,
|
|
3341
3589
|
"aria-hidden": true,
|
|
3342
|
-
children: /* @__PURE__ */
|
|
3590
|
+
children: /* @__PURE__ */ jsx32(
|
|
3343
3591
|
ToggleIcon,
|
|
3344
3592
|
{
|
|
3345
3593
|
hasChildren: node.hasChildren,
|
|
@@ -3349,7 +3597,7 @@ function NodeRow({
|
|
|
3349
3597
|
)
|
|
3350
3598
|
}
|
|
3351
3599
|
),
|
|
3352
|
-
onSelectionChange && isSelectable && /* @__PURE__ */
|
|
3600
|
+
onSelectionChange && isSelectable && /* @__PURE__ */ jsx32(
|
|
3353
3601
|
"input",
|
|
3354
3602
|
{
|
|
3355
3603
|
type: "checkbox",
|
|
@@ -3361,8 +3609,8 @@ function NodeRow({
|
|
|
3361
3609
|
tabIndex: -1
|
|
3362
3610
|
}
|
|
3363
3611
|
),
|
|
3364
|
-
/* @__PURE__ */
|
|
3365
|
-
node.isError && /* @__PURE__ */
|
|
3612
|
+
/* @__PURE__ */ jsx32("span", { className: "flex-1 min-w-0", children: renderNode(node, depth) }),
|
|
3613
|
+
node.isError && /* @__PURE__ */ jsx32("span", { className: "shrink-0 text-xs text-destructive", "aria-live": "polite", children: "Failed to load" })
|
|
3366
3614
|
]
|
|
3367
3615
|
}
|
|
3368
3616
|
);
|
|
@@ -3382,9 +3630,9 @@ function TreeViewInner({
|
|
|
3382
3630
|
className
|
|
3383
3631
|
}, ref) {
|
|
3384
3632
|
const treeId = useId2();
|
|
3385
|
-
const [focusedId, setFocusedId] =
|
|
3633
|
+
const [focusedId, setFocusedId] = useState5(null);
|
|
3386
3634
|
const listRef = useRef5(null);
|
|
3387
|
-
const [constrainedParent, setConstrainedParent] =
|
|
3635
|
+
const [constrainedParent, setConstrainedParent] = useState5(UNCONSTRAINED);
|
|
3388
3636
|
const selectionSize = selectedIds?.size ?? 0;
|
|
3389
3637
|
useEffect5(() => {
|
|
3390
3638
|
if (selectionSize === 0) setConstrainedParent(UNCONSTRAINED);
|
|
@@ -3538,10 +3786,10 @@ function TreeViewInner({
|
|
|
3538
3786
|
]
|
|
3539
3787
|
);
|
|
3540
3788
|
if (nodes.length === 0) {
|
|
3541
|
-
return /* @__PURE__ */
|
|
3789
|
+
return /* @__PURE__ */ jsx32(
|
|
3542
3790
|
"div",
|
|
3543
3791
|
{
|
|
3544
|
-
className:
|
|
3792
|
+
className: cn28(
|
|
3545
3793
|
"py-8 text-center text-sm text-muted-foreground",
|
|
3546
3794
|
className
|
|
3547
3795
|
),
|
|
@@ -3549,15 +3797,15 @@ function TreeViewInner({
|
|
|
3549
3797
|
}
|
|
3550
3798
|
);
|
|
3551
3799
|
}
|
|
3552
|
-
return /* @__PURE__ */
|
|
3800
|
+
return /* @__PURE__ */ jsx32(
|
|
3553
3801
|
"ul",
|
|
3554
3802
|
{
|
|
3555
3803
|
ref: listRef,
|
|
3556
3804
|
role: "tree",
|
|
3557
3805
|
"aria-label": "Tree",
|
|
3558
|
-
className:
|
|
3806
|
+
className: cn28("outline-none", className),
|
|
3559
3807
|
onKeyDown: handleKeyDown,
|
|
3560
|
-
children: flatNodes.map((flat) => /* @__PURE__ */
|
|
3808
|
+
children: flatNodes.map((flat) => /* @__PURE__ */ jsx32(
|
|
3561
3809
|
NodeRow,
|
|
3562
3810
|
{
|
|
3563
3811
|
flat,
|
|
@@ -3579,26 +3827,26 @@ function TreeViewInner({
|
|
|
3579
3827
|
}
|
|
3580
3828
|
);
|
|
3581
3829
|
}
|
|
3582
|
-
var TreeView =
|
|
3830
|
+
var TreeView = forwardRef19(TreeViewInner);
|
|
3583
3831
|
|
|
3584
3832
|
// src/EntityTree/EntityTree.tsx
|
|
3585
|
-
import { jsx as
|
|
3833
|
+
import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
3586
3834
|
function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
3587
3835
|
return function renderCells(node) {
|
|
3588
3836
|
const isActive = node.id === activeNodeIdRef.current;
|
|
3589
|
-
return /* @__PURE__ */
|
|
3837
|
+
return /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-4 min-w-0 w-full group/row", children: [
|
|
3590
3838
|
resolved.map((col) => {
|
|
3591
3839
|
const Renderer = resolveCellRenderer2(
|
|
3592
3840
|
col.cellRenderer,
|
|
3593
3841
|
localRenderers
|
|
3594
3842
|
);
|
|
3595
3843
|
const value = node.data[col.key];
|
|
3596
|
-
return /* @__PURE__ */
|
|
3844
|
+
return /* @__PURE__ */ jsx33(
|
|
3597
3845
|
"span",
|
|
3598
3846
|
{
|
|
3599
3847
|
className: "shrink-0",
|
|
3600
3848
|
style: col.width !== void 0 ? { width: col.width } : void 0,
|
|
3601
|
-
children: /* @__PURE__ */
|
|
3849
|
+
children: /* @__PURE__ */ jsx33(
|
|
3602
3850
|
Renderer,
|
|
3603
3851
|
{
|
|
3604
3852
|
value,
|
|
@@ -3610,7 +3858,7 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
|
3610
3858
|
col.key
|
|
3611
3859
|
);
|
|
3612
3860
|
}),
|
|
3613
|
-
onNodeEdit && /* @__PURE__ */
|
|
3861
|
+
onNodeEdit && /* @__PURE__ */ jsx33("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx33(
|
|
3614
3862
|
"button",
|
|
3615
3863
|
{
|
|
3616
3864
|
type: "button",
|
|
@@ -3619,11 +3867,11 @@ function buildCellRow(resolved, activeNodeIdRef, onNodeEdit, localRenderers) {
|
|
|
3619
3867
|
onNodeEdit(node);
|
|
3620
3868
|
},
|
|
3621
3869
|
"aria-label": "Edit",
|
|
3622
|
-
className:
|
|
3870
|
+
className: cn29(
|
|
3623
3871
|
"p-1 rounded hover:bg-background text-muted-foreground hover:text-foreground transition-colors",
|
|
3624
3872
|
isActive ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"
|
|
3625
3873
|
),
|
|
3626
|
-
children: /* @__PURE__ */
|
|
3874
|
+
children: /* @__PURE__ */ jsx33(Pencil, { className: "h-3.5 w-3.5" })
|
|
3627
3875
|
}
|
|
3628
3876
|
) })
|
|
3629
3877
|
] });
|
|
@@ -3646,10 +3894,10 @@ function renderTreeStatus({
|
|
|
3646
3894
|
className
|
|
3647
3895
|
}) {
|
|
3648
3896
|
if (isLoading && nodes.length === 0) {
|
|
3649
|
-
return /* @__PURE__ */
|
|
3897
|
+
return /* @__PURE__ */ jsx33(
|
|
3650
3898
|
"div",
|
|
3651
3899
|
{
|
|
3652
|
-
className:
|
|
3900
|
+
className: cn29(
|
|
3653
3901
|
"py-8 text-center text-sm text-muted-foreground",
|
|
3654
3902
|
className
|
|
3655
3903
|
),
|
|
@@ -3658,19 +3906,19 @@ function renderTreeStatus({
|
|
|
3658
3906
|
);
|
|
3659
3907
|
}
|
|
3660
3908
|
if (isError) {
|
|
3661
|
-
return /* @__PURE__ */
|
|
3909
|
+
return /* @__PURE__ */ jsx33(
|
|
3662
3910
|
"div",
|
|
3663
3911
|
{
|
|
3664
|
-
className:
|
|
3912
|
+
className: cn29("py-8 text-center text-sm text-destructive", className),
|
|
3665
3913
|
children: errorMessage ?? `Failed to load ${entityLabel}.`
|
|
3666
3914
|
}
|
|
3667
3915
|
);
|
|
3668
3916
|
}
|
|
3669
3917
|
if (!isLoading && nodes.length === 0) {
|
|
3670
|
-
return /* @__PURE__ */
|
|
3918
|
+
return /* @__PURE__ */ jsxs13(
|
|
3671
3919
|
"div",
|
|
3672
3920
|
{
|
|
3673
|
-
className:
|
|
3921
|
+
className: cn29(
|
|
3674
3922
|
"py-8 text-center text-sm text-muted-foreground",
|
|
3675
3923
|
className
|
|
3676
3924
|
),
|
|
@@ -3762,7 +4010,7 @@ function EntityTreeInner(props, ref) {
|
|
|
3762
4010
|
className
|
|
3763
4011
|
});
|
|
3764
4012
|
if (statusView) return statusView;
|
|
3765
|
-
return /* @__PURE__ */
|
|
4013
|
+
return /* @__PURE__ */ jsx33("div", { className: cn29("rounded-lg border", className), children: /* @__PURE__ */ jsx33(
|
|
3766
4014
|
TreeView,
|
|
3767
4015
|
{
|
|
3768
4016
|
ref: treeRef,
|
|
@@ -3781,17 +4029,17 @@ function EntityTreeInner(props, ref) {
|
|
|
3781
4029
|
}
|
|
3782
4030
|
) });
|
|
3783
4031
|
}
|
|
3784
|
-
var EntityTree =
|
|
4032
|
+
var EntityTree = forwardRef20(EntityTreeInner);
|
|
3785
4033
|
|
|
3786
4034
|
// src/SearchInput/SearchInput.tsx
|
|
3787
|
-
import
|
|
4035
|
+
import React31, { useMemo as useMemo6, useRef as useRef9, useState as useState8, useEffect as useEffect9 } from "react";
|
|
3788
4036
|
import { Search as Search2, X as X3, ChevronDown } from "lucide-react";
|
|
3789
|
-
import { cn as
|
|
4037
|
+
import { cn as cn31 } from "@petrarca/sonnet-core";
|
|
3790
4038
|
import { getFieldTitle as getFieldTitle2 } from "@petrarca/sonnet-core/schema";
|
|
3791
4039
|
import { isEmptyFilterExpr } from "@petrarca/sonnet-core/search";
|
|
3792
4040
|
|
|
3793
4041
|
// src/SearchInput/useSearchInput.ts
|
|
3794
|
-
import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef7, useState as
|
|
4042
|
+
import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
|
|
3795
4043
|
import { collectTerms } from "@petrarca/sonnet-core/search";
|
|
3796
4044
|
|
|
3797
4045
|
// src/SearchInput/schemaAdapter.ts
|
|
@@ -3875,11 +4123,11 @@ function useSearchInput({
|
|
|
3875
4123
|
const terms = collectTerms(value);
|
|
3876
4124
|
return terms.length === 1 && terms[0].key === "search" ? terms[0].value : "";
|
|
3877
4125
|
})() : "";
|
|
3878
|
-
const [inputValue, setInputValue] =
|
|
3879
|
-
const [pendingFacet, setPendingFacet] =
|
|
4126
|
+
const [inputValue, setInputValue] = useState6(initialInput);
|
|
4127
|
+
const [pendingFacet, setPendingFacet] = useState6(
|
|
3880
4128
|
null
|
|
3881
4129
|
);
|
|
3882
|
-
const [draftTerms, setDraftTerms] =
|
|
4130
|
+
const [draftTerms, setDraftTerms] = useState6(
|
|
3883
4131
|
() => isFaceted ? collectTerms(value) : []
|
|
3884
4132
|
);
|
|
3885
4133
|
const valueTerms = useMemo5(
|
|
@@ -4094,7 +4342,7 @@ function useSearchInput({
|
|
|
4094
4342
|
|
|
4095
4343
|
// src/SearchInput/widgets/TextSearchWidget.tsx
|
|
4096
4344
|
import { useRef as useRef8, useEffect as useEffect7 } from "react";
|
|
4097
|
-
import { jsx as
|
|
4345
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
4098
4346
|
function TextSearchWidget({
|
|
4099
4347
|
value,
|
|
4100
4348
|
onChange,
|
|
@@ -4107,7 +4355,7 @@ function TextSearchWidget({
|
|
|
4107
4355
|
useEffect7(() => {
|
|
4108
4356
|
if (autoFocus) inputRef.current?.focus();
|
|
4109
4357
|
}, [autoFocus]);
|
|
4110
|
-
return /* @__PURE__ */
|
|
4358
|
+
return /* @__PURE__ */ jsx34(
|
|
4111
4359
|
Input,
|
|
4112
4360
|
{
|
|
4113
4361
|
ref: inputRef,
|
|
@@ -4133,9 +4381,9 @@ function TextSearchWidget({
|
|
|
4133
4381
|
}
|
|
4134
4382
|
|
|
4135
4383
|
// src/SearchInput/widgets/EnumSearchWidget.tsx
|
|
4136
|
-
import { useEffect as useEffect8, useState as
|
|
4137
|
-
import { cn as
|
|
4138
|
-
import { jsx as
|
|
4384
|
+
import { useEffect as useEffect8, useState as useState7 } from "react";
|
|
4385
|
+
import { cn as cn30 } from "@petrarca/sonnet-core";
|
|
4386
|
+
import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
4139
4387
|
function EnumSearchWidget({
|
|
4140
4388
|
property,
|
|
4141
4389
|
options: widgetOptions,
|
|
@@ -4144,9 +4392,9 @@ function EnumSearchWidget({
|
|
|
4144
4392
|
placeholder,
|
|
4145
4393
|
autoFocus
|
|
4146
4394
|
}) {
|
|
4147
|
-
const [open, setOpen] =
|
|
4148
|
-
const [search, setSearch] =
|
|
4149
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
4395
|
+
const [open, setOpen] = useState7(false);
|
|
4396
|
+
const [search, setSearch] = useState7("");
|
|
4397
|
+
const [highlightedIndex, setHighlightedIndex] = useState7(0);
|
|
4150
4398
|
const enumValues = property.enum ?? [];
|
|
4151
4399
|
const enumNames = widgetOptions.enumNames ?? {};
|
|
4152
4400
|
const items = enumValues.map((val) => ({
|
|
@@ -4199,8 +4447,8 @@ function EnumSearchWidget({
|
|
|
4199
4447
|
return;
|
|
4200
4448
|
}
|
|
4201
4449
|
}
|
|
4202
|
-
return /* @__PURE__ */
|
|
4203
|
-
/* @__PURE__ */
|
|
4450
|
+
return /* @__PURE__ */ jsxs14(Popover, { open, onOpenChange: handleOpenChange, children: [
|
|
4451
|
+
/* @__PURE__ */ jsx35(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
|
|
4204
4452
|
"button",
|
|
4205
4453
|
{
|
|
4206
4454
|
type: "button",
|
|
@@ -4209,14 +4457,14 @@ function EnumSearchWidget({
|
|
|
4209
4457
|
children: placeholder ?? "Select..."
|
|
4210
4458
|
}
|
|
4211
4459
|
) }),
|
|
4212
|
-
/* @__PURE__ */
|
|
4460
|
+
/* @__PURE__ */ jsxs14(
|
|
4213
4461
|
PopoverContent,
|
|
4214
4462
|
{
|
|
4215
4463
|
className: "w-48 p-1",
|
|
4216
4464
|
align: "start",
|
|
4217
4465
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
4218
4466
|
children: [
|
|
4219
|
-
/* @__PURE__ */
|
|
4467
|
+
/* @__PURE__ */ jsx35(
|
|
4220
4468
|
"input",
|
|
4221
4469
|
{
|
|
4222
4470
|
autoFocus: true,
|
|
@@ -4227,13 +4475,13 @@ function EnumSearchWidget({
|
|
|
4227
4475
|
className: "w-full px-2 py-1.5 text-sm bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground"
|
|
4228
4476
|
}
|
|
4229
4477
|
),
|
|
4230
|
-
/* @__PURE__ */
|
|
4231
|
-
filtered.length === 0 && /* @__PURE__ */
|
|
4232
|
-
filtered.map((item, i) => /* @__PURE__ */
|
|
4478
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
4479
|
+
filtered.length === 0 && /* @__PURE__ */ jsx35("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No matches" }),
|
|
4480
|
+
filtered.map((item, i) => /* @__PURE__ */ jsx35(
|
|
4233
4481
|
"button",
|
|
4234
4482
|
{
|
|
4235
4483
|
type: "button",
|
|
4236
|
-
className:
|
|
4484
|
+
className: cn30(
|
|
4237
4485
|
"w-full text-left px-2 py-1.5 text-sm rounded transition-colors",
|
|
4238
4486
|
i === highlightedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
|
|
4239
4487
|
),
|
|
@@ -4272,7 +4520,7 @@ var DEFAULT_SEARCH_WIDGETS = {
|
|
|
4272
4520
|
};
|
|
4273
4521
|
|
|
4274
4522
|
// src/SearchInput/SearchInput.tsx
|
|
4275
|
-
import { Fragment as Fragment3, jsx as
|
|
4523
|
+
import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4276
4524
|
function resolveSearchDefaults(props) {
|
|
4277
4525
|
return {
|
|
4278
4526
|
mode: props.mode ?? "explicit",
|
|
@@ -4292,8 +4540,8 @@ function FacetPicker({
|
|
|
4292
4540
|
acceptFacet,
|
|
4293
4541
|
inputRef
|
|
4294
4542
|
}) {
|
|
4295
|
-
return /* @__PURE__ */
|
|
4296
|
-
/* @__PURE__ */
|
|
4543
|
+
return /* @__PURE__ */ jsxs15(Popover, { open: pickerVisible, onOpenChange: setPickerOpen, modal: false, children: [
|
|
4544
|
+
/* @__PURE__ */ jsx36(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx36(
|
|
4297
4545
|
"button",
|
|
4298
4546
|
{
|
|
4299
4547
|
type: "button",
|
|
@@ -4304,21 +4552,21 @@ function FacetPicker({
|
|
|
4304
4552
|
setPickerOpen((o) => !o);
|
|
4305
4553
|
inputRef.current?.focus();
|
|
4306
4554
|
},
|
|
4307
|
-
children: /* @__PURE__ */
|
|
4555
|
+
children: /* @__PURE__ */ jsx36(ChevronDown, { className: "h-3 w-3" })
|
|
4308
4556
|
}
|
|
4309
4557
|
) }),
|
|
4310
|
-
/* @__PURE__ */
|
|
4558
|
+
/* @__PURE__ */ jsx36(
|
|
4311
4559
|
PopoverContent,
|
|
4312
4560
|
{
|
|
4313
|
-
className:
|
|
4561
|
+
className: cn31("w-44 p-1", !hasFacetsToShow && "hidden"),
|
|
4314
4562
|
align: "start",
|
|
4315
4563
|
onOpenAutoFocus: (e) => e.preventDefault(),
|
|
4316
4564
|
onFocusOutside: (e) => e.preventDefault(),
|
|
4317
|
-
children: filteredFacets.map((facet, i) => /* @__PURE__ */
|
|
4565
|
+
children: filteredFacets.map((facet, i) => /* @__PURE__ */ jsx36(
|
|
4318
4566
|
"button",
|
|
4319
4567
|
{
|
|
4320
4568
|
type: "button",
|
|
4321
|
-
className:
|
|
4569
|
+
className: cn31(
|
|
4322
4570
|
"w-full text-left px-2 py-1.5 text-sm rounded transition-colors",
|
|
4323
4571
|
i === highlightedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
|
|
4324
4572
|
),
|
|
@@ -4352,7 +4600,7 @@ function ValueEntry({
|
|
|
4352
4600
|
onInputFocus
|
|
4353
4601
|
}) {
|
|
4354
4602
|
if (pendingFacet && PendingWidget) {
|
|
4355
|
-
return /* @__PURE__ */
|
|
4603
|
+
return /* @__PURE__ */ jsx36(
|
|
4356
4604
|
PendingWidget,
|
|
4357
4605
|
{
|
|
4358
4606
|
property: pendingFacet.property,
|
|
@@ -4374,7 +4622,7 @@ function ValueEntry({
|
|
|
4374
4622
|
}
|
|
4375
4623
|
);
|
|
4376
4624
|
}
|
|
4377
|
-
return /* @__PURE__ */
|
|
4625
|
+
return /* @__PURE__ */ jsx36(
|
|
4378
4626
|
Input,
|
|
4379
4627
|
{
|
|
4380
4628
|
ref: inputRef,
|
|
@@ -4443,10 +4691,10 @@ function ActiveChips({
|
|
|
4443
4691
|
schema,
|
|
4444
4692
|
onRemove
|
|
4445
4693
|
}) {
|
|
4446
|
-
return /* @__PURE__ */
|
|
4694
|
+
return /* @__PURE__ */ jsx36(Fragment3, { children: terms.map((term, i) => {
|
|
4447
4695
|
const property = schema?.properties?.[term.key];
|
|
4448
4696
|
const label = property ? getFieldTitle2(term.key, property) : term.key;
|
|
4449
|
-
return /* @__PURE__ */
|
|
4697
|
+
return /* @__PURE__ */ jsx36(
|
|
4450
4698
|
FilterChip,
|
|
4451
4699
|
{
|
|
4452
4700
|
label: `${label}: ${term.value}`,
|
|
@@ -4470,8 +4718,8 @@ function SearchActions({
|
|
|
4470
4718
|
onClear,
|
|
4471
4719
|
onCommit
|
|
4472
4720
|
}) {
|
|
4473
|
-
return /* @__PURE__ */
|
|
4474
|
-
!isEmpty && /* @__PURE__ */
|
|
4721
|
+
return /* @__PURE__ */ jsxs15(Fragment3, { children: [
|
|
4722
|
+
!isEmpty && /* @__PURE__ */ jsx36(
|
|
4475
4723
|
"button",
|
|
4476
4724
|
{
|
|
4477
4725
|
type: "button",
|
|
@@ -4481,10 +4729,10 @@ function SearchActions({
|
|
|
4481
4729
|
},
|
|
4482
4730
|
className: "text-muted-foreground hover:text-foreground transition-colors shrink-0",
|
|
4483
4731
|
"aria-label": "Clear search",
|
|
4484
|
-
children: /* @__PURE__ */
|
|
4732
|
+
children: /* @__PURE__ */ jsx36(X3, { className: "h-4 w-4" })
|
|
4485
4733
|
}
|
|
4486
4734
|
),
|
|
4487
|
-
showSearchButton && mode === "explicit" && /* @__PURE__ */
|
|
4735
|
+
showSearchButton && mode === "explicit" && /* @__PURE__ */ jsx36(
|
|
4488
4736
|
Button,
|
|
4489
4737
|
{
|
|
4490
4738
|
type: "button",
|
|
@@ -4516,9 +4764,9 @@ function SearchInput(props) {
|
|
|
4516
4764
|
const { mode, debounceMs, minChars, showSearchButton, disabled } = resolveSearchDefaults(props);
|
|
4517
4765
|
const inputRef = useRef9(null);
|
|
4518
4766
|
const containerRef = useRef9(null);
|
|
4519
|
-
const [pickerOpen, setPickerOpen] =
|
|
4520
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
4521
|
-
const [pickerNavigated, setPickerNavigated] =
|
|
4767
|
+
const [pickerOpen, setPickerOpen] = useState8(false);
|
|
4768
|
+
const [highlightedIndex, setHighlightedIndex] = useState8(-1);
|
|
4769
|
+
const [pickerNavigated, setPickerNavigated] = useState8(false);
|
|
4522
4770
|
useEffect9(() => {
|
|
4523
4771
|
if (!pickerOpen) return;
|
|
4524
4772
|
function handleMouseDown(e) {
|
|
@@ -4569,7 +4817,7 @@ function SearchInput(props) {
|
|
|
4569
4817
|
const showFacetControls = isFaceted && !pendingFacet;
|
|
4570
4818
|
const pickerVisible = showFacetControls && pickerOpen;
|
|
4571
4819
|
const hasFacetsToShow = pickerVisible && filteredFacets.length > 0;
|
|
4572
|
-
const acceptFacet =
|
|
4820
|
+
const acceptFacet = React31.useCallback(
|
|
4573
4821
|
(facet) => {
|
|
4574
4822
|
selectFacet(facet);
|
|
4575
4823
|
setPickerOpen(false);
|
|
@@ -4593,11 +4841,11 @@ function SearchInput(props) {
|
|
|
4593
4841
|
acceptFacet,
|
|
4594
4842
|
handleKeyDown
|
|
4595
4843
|
};
|
|
4596
|
-
return /* @__PURE__ */
|
|
4844
|
+
return /* @__PURE__ */ jsxs15(
|
|
4597
4845
|
"div",
|
|
4598
4846
|
{
|
|
4599
4847
|
ref: containerRef,
|
|
4600
|
-
className:
|
|
4848
|
+
className: cn31(
|
|
4601
4849
|
"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",
|
|
4602
4850
|
disabled ? "opacity-50 cursor-not-allowed" : "cursor-text",
|
|
4603
4851
|
className
|
|
@@ -4610,8 +4858,8 @@ function SearchInput(props) {
|
|
|
4610
4858
|
}
|
|
4611
4859
|
},
|
|
4612
4860
|
children: [
|
|
4613
|
-
/* @__PURE__ */
|
|
4614
|
-
isFaceted && /* @__PURE__ */
|
|
4861
|
+
/* @__PURE__ */ jsx36(Search2, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
|
|
4862
|
+
isFaceted && /* @__PURE__ */ jsx36(
|
|
4615
4863
|
ActiveChips,
|
|
4616
4864
|
{
|
|
4617
4865
|
terms: activeTerms,
|
|
@@ -4619,12 +4867,12 @@ function SearchInput(props) {
|
|
|
4619
4867
|
onRemove: handleRemoveTerm
|
|
4620
4868
|
}
|
|
4621
4869
|
),
|
|
4622
|
-
pendingFacet && /* @__PURE__ */
|
|
4870
|
+
pendingFacet && /* @__PURE__ */ jsxs15("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: [
|
|
4623
4871
|
pendingFacet.label,
|
|
4624
4872
|
":"
|
|
4625
4873
|
] }),
|
|
4626
|
-
/* @__PURE__ */
|
|
4627
|
-
showFacetControls && /* @__PURE__ */
|
|
4874
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1 flex-1 min-w-[120px]", children: [
|
|
4875
|
+
showFacetControls && /* @__PURE__ */ jsx36(
|
|
4628
4876
|
FacetPicker,
|
|
4629
4877
|
{
|
|
4630
4878
|
pickerVisible,
|
|
@@ -4637,7 +4885,7 @@ function SearchInput(props) {
|
|
|
4637
4885
|
inputRef
|
|
4638
4886
|
}
|
|
4639
4887
|
),
|
|
4640
|
-
/* @__PURE__ */
|
|
4888
|
+
/* @__PURE__ */ jsx36(
|
|
4641
4889
|
ValueEntry,
|
|
4642
4890
|
{
|
|
4643
4891
|
pendingFacet,
|
|
@@ -4661,7 +4909,7 @@ function SearchInput(props) {
|
|
|
4661
4909
|
}
|
|
4662
4910
|
)
|
|
4663
4911
|
] }),
|
|
4664
|
-
/* @__PURE__ */
|
|
4912
|
+
/* @__PURE__ */ jsx36(
|
|
4665
4913
|
SearchActions,
|
|
4666
4914
|
{
|
|
4667
4915
|
isEmpty,
|
|
@@ -4676,14 +4924,14 @@ function SearchInput(props) {
|
|
|
4676
4924
|
);
|
|
4677
4925
|
}
|
|
4678
4926
|
function FilterChip({ label, onRemove }) {
|
|
4679
|
-
return /* @__PURE__ */
|
|
4927
|
+
return /* @__PURE__ */ jsxs15(
|
|
4680
4928
|
Badge,
|
|
4681
4929
|
{
|
|
4682
4930
|
variant: "secondary",
|
|
4683
4931
|
className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full",
|
|
4684
4932
|
children: [
|
|
4685
4933
|
label,
|
|
4686
|
-
/* @__PURE__ */
|
|
4934
|
+
/* @__PURE__ */ jsx36(
|
|
4687
4935
|
"button",
|
|
4688
4936
|
{
|
|
4689
4937
|
type: "button",
|
|
@@ -4693,7 +4941,7 @@ function FilterChip({ label, onRemove }) {
|
|
|
4693
4941
|
},
|
|
4694
4942
|
className: "ml-0.5 hover:text-destructive transition-colors",
|
|
4695
4943
|
"aria-label": `Remove filter ${label}`,
|
|
4696
|
-
children: /* @__PURE__ */
|
|
4944
|
+
children: /* @__PURE__ */ jsx36(X3, { className: "h-3 w-3" })
|
|
4697
4945
|
}
|
|
4698
4946
|
)
|
|
4699
4947
|
]
|
|
@@ -4703,9 +4951,9 @@ function FilterChip({ label, onRemove }) {
|
|
|
4703
4951
|
|
|
4704
4952
|
// src/Clipboard/ClipboardButton.tsx
|
|
4705
4953
|
import { Copy } from "lucide-react";
|
|
4706
|
-
import { jsx as
|
|
4954
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
4707
4955
|
function ClipboardButton({ hasItems, onClick }) {
|
|
4708
|
-
return /* @__PURE__ */
|
|
4956
|
+
return /* @__PURE__ */ jsx37(
|
|
4709
4957
|
Button,
|
|
4710
4958
|
{
|
|
4711
4959
|
variant: "ghost",
|
|
@@ -4716,7 +4964,7 @@ function ClipboardButton({ hasItems, onClick }) {
|
|
|
4716
4964
|
opacity: hasItems ? 1 : 0.4,
|
|
4717
4965
|
cursor: hasItems ? "pointer" : "not-allowed"
|
|
4718
4966
|
},
|
|
4719
|
-
children: /* @__PURE__ */
|
|
4967
|
+
children: /* @__PURE__ */ jsx37(Copy, { size: 16 })
|
|
4720
4968
|
}
|
|
4721
4969
|
);
|
|
4722
4970
|
}
|
|
@@ -4724,13 +4972,13 @@ var ClipboardButton_default = ClipboardButton;
|
|
|
4724
4972
|
|
|
4725
4973
|
// src/Clipboard/ClipboardItem.tsx
|
|
4726
4974
|
import { X as X4, Plus } from "lucide-react";
|
|
4727
|
-
import { jsx as
|
|
4975
|
+
import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
4728
4976
|
function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
4729
4977
|
const handleAddClick = (e) => {
|
|
4730
4978
|
const keepInClipboard = e.shiftKey;
|
|
4731
4979
|
onAddItem(item, keepInClipboard);
|
|
4732
4980
|
};
|
|
4733
|
-
return /* @__PURE__ */
|
|
4981
|
+
return /* @__PURE__ */ jsx38(
|
|
4734
4982
|
"div",
|
|
4735
4983
|
{
|
|
4736
4984
|
className: "p-3 rounded mb-2",
|
|
@@ -4738,17 +4986,17 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
|
4738
4986
|
borderLeft: `4px solid ${item.color}`,
|
|
4739
4987
|
backgroundColor: "#f8f9fa"
|
|
4740
4988
|
},
|
|
4741
|
-
children: /* @__PURE__ */
|
|
4742
|
-
/* @__PURE__ */
|
|
4743
|
-
/* @__PURE__ */
|
|
4744
|
-
/* @__PURE__ */
|
|
4745
|
-
/* @__PURE__ */
|
|
4989
|
+
children: /* @__PURE__ */ jsxs16(SimpleGroup, { justify: "space-between", wrap: "nowrap", align: "flex-start", children: [
|
|
4990
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
|
|
4991
|
+
/* @__PURE__ */ jsx38("p", { className: "text-sm font-semibold truncate", children: item.label }),
|
|
4992
|
+
/* @__PURE__ */ jsx38("p", { className: "text-xs text-muted-foreground truncate", children: item.displayName }),
|
|
4993
|
+
/* @__PURE__ */ jsxs16("p", { className: "text-xs text-muted-foreground font-mono", children: [
|
|
4746
4994
|
"#",
|
|
4747
4995
|
item.entityId
|
|
4748
4996
|
] })
|
|
4749
4997
|
] }),
|
|
4750
|
-
/* @__PURE__ */
|
|
4751
|
-
/* @__PURE__ */
|
|
4998
|
+
/* @__PURE__ */ jsxs16(SimpleGroup, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [
|
|
4999
|
+
/* @__PURE__ */ jsxs16(
|
|
4752
5000
|
Button,
|
|
4753
5001
|
{
|
|
4754
5002
|
size: "sm",
|
|
@@ -4756,19 +5004,19 @@ function ClipboardItemComponent({ item, onAddItem, onRemove }) {
|
|
|
4756
5004
|
onClick: handleAddClick,
|
|
4757
5005
|
title: "Click to add and remove from clipboard, Shift+Click to keep in clipboard",
|
|
4758
5006
|
children: [
|
|
4759
|
-
/* @__PURE__ */
|
|
5007
|
+
/* @__PURE__ */ jsx38(Plus, { size: 16 }),
|
|
4760
5008
|
"Add"
|
|
4761
5009
|
]
|
|
4762
5010
|
}
|
|
4763
5011
|
),
|
|
4764
|
-
/* @__PURE__ */
|
|
5012
|
+
/* @__PURE__ */ jsx38(
|
|
4765
5013
|
Button,
|
|
4766
5014
|
{
|
|
4767
5015
|
size: "sm",
|
|
4768
5016
|
variant: "ghost",
|
|
4769
5017
|
onClick: () => onRemove(item.id),
|
|
4770
5018
|
title: "Remove from clipboard",
|
|
4771
|
-
children: /* @__PURE__ */
|
|
5019
|
+
children: /* @__PURE__ */ jsx38(X4, { size: 16 })
|
|
4772
5020
|
}
|
|
4773
5021
|
)
|
|
4774
5022
|
] })
|
|
@@ -4866,16 +5114,16 @@ var useClipboard = create()(
|
|
|
4866
5114
|
var clipboardStore_default = useClipboard;
|
|
4867
5115
|
|
|
4868
5116
|
// src/Clipboard/ClipboardMenu.tsx
|
|
4869
|
-
import { jsx as
|
|
5117
|
+
import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
4870
5118
|
function ClipboardMenu({ onAddItem }) {
|
|
4871
5119
|
const { items, removeItem, clear } = clipboardStore_default();
|
|
4872
5120
|
if (items.length === 0) {
|
|
4873
|
-
return /* @__PURE__ */
|
|
4874
|
-
/* @__PURE__ */
|
|
4875
|
-
/* @__PURE__ */
|
|
5121
|
+
return /* @__PURE__ */ jsxs17("div", { style: { padding: "16px", textAlign: "center", width: "300px" }, children: [
|
|
5122
|
+
/* @__PURE__ */ jsx39("p", { className: "text-sm text-muted-foreground", children: "No items in clipboard" }),
|
|
5123
|
+
/* @__PURE__ */ jsx39("p", { className: "text-xs text-muted-foreground mt-1", children: 'Right-click a node and select "Copy"' })
|
|
4876
5124
|
] });
|
|
4877
5125
|
}
|
|
4878
|
-
return /* @__PURE__ */
|
|
5126
|
+
return /* @__PURE__ */ jsxs17(
|
|
4879
5127
|
"div",
|
|
4880
5128
|
{
|
|
4881
5129
|
style: {
|
|
@@ -4886,7 +5134,7 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
4886
5134
|
maxHeight: "500px"
|
|
4887
5135
|
},
|
|
4888
5136
|
children: [
|
|
4889
|
-
/* @__PURE__ */
|
|
5137
|
+
/* @__PURE__ */ jsx39(ScrollArea, { className: "flex-1 p-3 min-h-0", children: /* @__PURE__ */ jsx39(SimpleStack, { gap: 0, children: items.map((item) => /* @__PURE__ */ jsx39(
|
|
4890
5138
|
ClipboardItem_default,
|
|
4891
5139
|
{
|
|
4892
5140
|
item,
|
|
@@ -4895,8 +5143,8 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
4895
5143
|
},
|
|
4896
5144
|
item.id
|
|
4897
5145
|
)) }) }),
|
|
4898
|
-
/* @__PURE__ */
|
|
4899
|
-
/* @__PURE__ */
|
|
5146
|
+
/* @__PURE__ */ jsx39(Separator2, {}),
|
|
5147
|
+
/* @__PURE__ */ jsx39("div", { style: { padding: "8px 12px", flexShrink: 0 }, children: /* @__PURE__ */ jsxs17(
|
|
4900
5148
|
Button,
|
|
4901
5149
|
{
|
|
4902
5150
|
className: "w-full",
|
|
@@ -4904,7 +5152,7 @@ function ClipboardMenu({ onAddItem }) {
|
|
|
4904
5152
|
size: "sm",
|
|
4905
5153
|
onClick: clear,
|
|
4906
5154
|
children: [
|
|
4907
|
-
/* @__PURE__ */
|
|
5155
|
+
/* @__PURE__ */ jsx39(Trash2, { size: 16 }),
|
|
4908
5156
|
"Clear All (",
|
|
4909
5157
|
items.length,
|
|
4910
5158
|
")"
|
|
@@ -4987,6 +5235,9 @@ export {
|
|
|
4987
5235
|
Popover,
|
|
4988
5236
|
PopoverContent,
|
|
4989
5237
|
PopoverTrigger,
|
|
5238
|
+
PropertyList,
|
|
5239
|
+
PropertyValue,
|
|
5240
|
+
ResizeHandle,
|
|
4990
5241
|
ScrollArea,
|
|
4991
5242
|
ScrollBar,
|
|
4992
5243
|
SearchInput,
|