@agent-native/toolkit 0.222.2 → 0.222.3-nightly-20261029212408
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +2 -1
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/modal-layer.d.ts +3 -0
- package/dist/ui/modal-layer.d.ts.map +1 -0
- package/dist/ui/modal-layer.js +13 -0
- package/dist/ui/modal-layer.js.map +1 -0
- package/dist/ui/popover.d.ts +1 -1
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/popover.js +6 -1
- package/dist/ui/popover.js.map +1 -1
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +6 -1
- package/dist/ui/sheet.js.map +1 -1
- package/package.json +4 -4
- package/src/ui/dialog.tsx +2 -1
- package/src/ui/modal-layer.spec.tsx +103 -0
- package/src/ui/modal-layer.ts +15 -0
- package/src/ui/popover.tsx +9 -1
- package/src/ui/sheet.tsx +28 -17
package/dist/ui/dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1C,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CACjE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,2FAgBjB,CAAC;AAGH,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CACjE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,wBAAwB,CACxC,OAAO,eAAe,CAAC,MAAM,CAC9B,CAAC,WAAW,CAAC,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED,QAAA,MAAM,aAAa,2FA4ClB,CAAC;8BAGoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;;;8BAWjB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;;;AAWvC,QAAA,MAAM,WAAW,oKAYf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
|
package/dist/ui/dialog.js
CHANGED
|
@@ -3,6 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
|
3
3
|
import { IconX } from "@tabler/icons-react";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { cn } from "../utils.js";
|
|
6
|
+
import { ModalLayerProvider } from "./modal-layer.js";
|
|
6
7
|
const Dialog = DialogPrimitive.Root;
|
|
7
8
|
const DialogTrigger = DialogPrimitive.Trigger;
|
|
8
9
|
const DialogPortal = DialogPrimitive.Portal;
|
|
@@ -12,7 +13,7 @@ const DialogOverlay = React.forwardRef(({ className, motion = "default", ...prop
|
|
|
12
13
|
"transition-[backdrop-filter] duration-[1000ms] ease-[var(--ease-out-strong)] starting:[backdrop-filter:blur(0px)] motion-reduce:transition-none", className), ...props })));
|
|
13
14
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
14
15
|
const DialogContent = React.forwardRef(({ className, children, hideClose, motion = "default", container, closeLabel = "Close", overlayClassName, overlayStyle, ...props }, ref) => (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { motion: motion, className: overlayClassName, style: overlayStyle }), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-1/2 top-1/2 z-[280] grid max-h-[min(760px,calc(100vh-32px))] w-[calc(100vw-24px)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-background p-6 text-foreground shadow-lg outline-none", motion === "default" &&
|
|
15
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", className), ...props, children: [children, !hideClose && (_jsxs(DialogPrimitive.Close, { className: "absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: [_jsx(IconX, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] })));
|
|
16
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", className), ...props, children: [_jsx(ModalLayerProvider, { value: true, children: children }), !hideClose && (_jsxs(DialogPrimitive.Close, { className: "absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: [_jsx(IconX, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] })));
|
|
16
17
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
17
18
|
const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-start", className), ...props }));
|
|
18
19
|
DialogHeader.displayName = "DialogHeader";
|
package/dist/ui/dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-layer.d.ts","sourceRoot":"","sources":["../../src/ui/modal-layer.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB,mCAA6B,CAAC;AAE7D,wBAAgB,eAAe,IAAI,OAAO,CAEzC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* True inside a dialog or sheet. Radix scroll-locks the page while one is open
|
|
4
|
+
* and lets the wheel through only to the layers it knows about, so a
|
|
5
|
+
* non-modal popover portalled to the body inside one cannot scroll, and a sheet
|
|
6
|
+
* opened from one would sit under it.
|
|
7
|
+
*/
|
|
8
|
+
const ModalLayerContext = createContext(false);
|
|
9
|
+
export const ModalLayerProvider = ModalLayerContext.Provider;
|
|
10
|
+
export function useInModalLayer() {
|
|
11
|
+
return useContext(ModalLayerContext);
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=modal-layer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal-layer.js","sourceRoot":"","sources":["../../src/ui/modal-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,QAAQ,CAAC;AAE7D,MAAM,UAAU,eAAe;IAC7B,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACvC,CAAC"}
|
package/dist/ui/popover.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
declare
|
|
3
|
+
declare function Popover({ modal, ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
|
|
4
4
|
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
5
5
|
declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
6
|
declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
package/dist/ui/popover.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAGpD;AAED,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,QAAA,MAAM,aAAa,4GAA0B,CAAC;AAE9C,QAAA,MAAM,cAAc;gBAGJ,OAAO;gBACP,KAAK,CAAC,wBAAwB,CACxC,OAAO,gBAAgB,CAAC,MAAM,CAC/B,CAAC,WAAW,CAAC;wCAmCjB,CAAC;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC"}
|
package/dist/ui/popover.js
CHANGED
|
@@ -2,7 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cn } from "../utils.js";
|
|
5
|
-
|
|
5
|
+
import { useInModalLayer } from "./modal-layer.js";
|
|
6
|
+
// Modal inside a dialog or sheet: its content joins the scroll lock's allowed layers, so the wheel scrolls it.
|
|
7
|
+
function Popover({ modal, ...props }) {
|
|
8
|
+
const inModalLayer = useInModalLayer();
|
|
9
|
+
return _jsx(PopoverPrimitive.Root, { modal: modal ?? inModalLayer, ...props });
|
|
10
|
+
}
|
|
6
11
|
const PopoverTrigger = PopoverPrimitive.Trigger;
|
|
7
12
|
const PopoverAnchor = PopoverPrimitive.Anchor;
|
|
8
13
|
const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, portalled = true, container, ...props }, ref) => {
|
package/dist/ui/popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/ui/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,+GAA+G;AAC/G,SAAS,OAAO,CAAC,EACf,KAAK,EACL,GAAG,KAAK,EAC2C;IACnD,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,OAAO,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,IAAI,YAAY,KAAM,KAAK,GAAI,CAAC;AAC5E,CAAC;AAED,MAAM,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAEhD,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAE9C,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CASrC,CACE,EACE,SAAS,EACT,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,CAAC,EACd,SAAS,GAAG,IAAI,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,CACd,KAAC,gBAAgB,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CACX,qxBAAqxB,EACrxB,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;IAEF,IAAI,CAAC,SAAS;QAAE,OAAO,OAAO,CAAC;IAE/B,OAAO,CACL,KAAC,gBAAgB,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,YAC1C,OAAO,GACgB,CAC3B,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC"}
|
package/dist/ui/sheet.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,KAAK,sCAAsB,CAAC;AAElC,QAAA,MAAM,YAAY,6GAAyB,CAAC;AAE5C,QAAA,MAAM,UAAU,2GAAuB,CAAC;AAExC,QAAA,MAAM,WAAW,4CAAwB,CAAC;AAE1C,QAAA,MAAM,YAAY,6JAYhB,CAAC;AAGH,QAAA,MAAM,aAAa;;8EAiBlB,CAAC;AAEF,UAAU,iBACR,SACE,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EAC7D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,0FA2CjB,CAAC;6BAGmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;;;6BAWlB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;;;AAWvC,QAAA,MAAM,UAAU,mKASd,CAAC;AAGH,QAAA,MAAM,gBAAgB,6KASpB,CAAC;AAGH,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}
|
package/dist/ui/sheet.js
CHANGED
|
@@ -4,6 +4,7 @@ import { IconX } from "@tabler/icons-react";
|
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import { cn } from "../utils.js";
|
|
7
|
+
import { ModalLayerProvider, useInModalLayer } from "./modal-layer.js";
|
|
7
8
|
const Sheet = SheetPrimitive.Root;
|
|
8
9
|
const SheetTrigger = SheetPrimitive.Trigger;
|
|
9
10
|
const SheetClose = SheetPrimitive.Close;
|
|
@@ -23,7 +24,11 @@ const sheetVariants = cva("fixed z-[230] gap-4 border-border bg-background p-6 t
|
|
|
23
24
|
side: "right",
|
|
24
25
|
},
|
|
25
26
|
});
|
|
26
|
-
const SheetContent = React.forwardRef(({ side = "right", className, children, showClose = true, showOverlay = true, overlayClassName, ...props }, ref) =>
|
|
27
|
+
const SheetContent = React.forwardRef(({ side = "right", className, children, showClose = true, showOverlay = true, overlayClassName, ...props }, ref) => {
|
|
28
|
+
// A sheet opened from a dialog rises above it, and stays under the popovers at z-[290].
|
|
29
|
+
const nested = useInModalLayer();
|
|
30
|
+
return (_jsxs(SheetPortal, { children: [showOverlay ? (_jsx(SheetOverlay, { className: cn(nested && "z-[284]", overlayClassName) })) : null, _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), nested && "z-[285]", className), ...props, children: [_jsx(ModalLayerProvider, { value: true, children: children }), showClose ? (_jsxs(SheetPrimitive.Close, { className: "absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: [_jsx(IconX, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
|
|
31
|
+
});
|
|
27
32
|
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
28
33
|
const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-start", className), ...props }));
|
|
29
34
|
SheetHeader.displayName = "SheetHeader";
|
package/dist/ui/sheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agent-native/toolkit",
|
|
3
|
-
"version": "0.222.
|
|
3
|
+
"version": "0.222.3-nightly-20261029212408",
|
|
4
4
|
"description": "Reusable app-building UI and helpers for Agent-Native apps.",
|
|
5
5
|
"homepage": "https://github.com/BuilderIO/agent-native#readme",
|
|
6
6
|
"bugs": {
|
|
@@ -709,7 +709,7 @@
|
|
|
709
709
|
"y-protocols": "^1.0.7",
|
|
710
710
|
"yjs": "^13.6.33",
|
|
711
711
|
"zod": "^4.3.6",
|
|
712
|
-
"@agent-native/agentkit": "^0.222.
|
|
712
|
+
"@agent-native/agentkit": "^0.222.3-nightly-20261029212408"
|
|
713
713
|
},
|
|
714
714
|
"devDependencies": {
|
|
715
715
|
"@excalidraw/excalidraw": "0.18.1",
|
|
@@ -733,10 +733,10 @@
|
|
|
733
733
|
"typescript-7": "npm:typescript@^7.0.2",
|
|
734
734
|
"vite": "8.1.0",
|
|
735
735
|
"vitest": "^4.1.5",
|
|
736
|
-
"@agent-native/core": "^0.222.
|
|
736
|
+
"@agent-native/core": "^0.222.3-nightly-20261029212408"
|
|
737
737
|
},
|
|
738
738
|
"peerDependencies": {
|
|
739
|
-
"@agent-native/core": "
|
|
739
|
+
"@agent-native/core": "0.222.3-nightly-20261029212408",
|
|
740
740
|
"@excalidraw/excalidraw": ">=0.18",
|
|
741
741
|
"@excalidraw/mermaid-to-excalidraw": ">=2",
|
|
742
742
|
"@tanstack/react-query": "^5.99.2",
|
package/src/ui/dialog.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import { IconX } from "@tabler/icons-react";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
|
|
5
5
|
import { cn } from "../utils.js";
|
|
6
|
+
import { ModalLayerProvider } from "./modal-layer.js";
|
|
6
7
|
|
|
7
8
|
const Dialog = DialogPrimitive.Root;
|
|
8
9
|
|
|
@@ -86,7 +87,7 @@ const DialogContent = React.forwardRef<
|
|
|
86
87
|
)}
|
|
87
88
|
{...props}
|
|
88
89
|
>
|
|
89
|
-
{children}
|
|
90
|
+
<ModalLayerProvider value>{children}</ModalLayerProvider>
|
|
90
91
|
{!hideClose && (
|
|
91
92
|
<DialogPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
|
92
93
|
<IconX className="h-4 w-4" />
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
// @vitest-environment jsdom
|
|
2
|
+
|
|
3
|
+
import { cleanup, render, screen } from "@testing-library/react";
|
|
4
|
+
import { afterEach, describe, expect, it } from "vitest";
|
|
5
|
+
|
|
6
|
+
import { Dialog, DialogContent, DialogTitle } from "./dialog.js";
|
|
7
|
+
import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
|
|
8
|
+
import { Sheet, SheetContent, SheetTitle } from "./sheet.js";
|
|
9
|
+
|
|
10
|
+
afterEach(cleanup);
|
|
11
|
+
|
|
12
|
+
function layer(element: HTMLElement): string {
|
|
13
|
+
return (element.className.match(/z-\[\d+\]/g) ?? []).join(" ");
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function sheetIn(wrapper: (sheet: React.ReactNode) => React.ReactNode) {
|
|
17
|
+
const sheet = (
|
|
18
|
+
<Sheet open>
|
|
19
|
+
<SheetContent aria-describedby={undefined} data-testid="sheet">
|
|
20
|
+
<SheetTitle>Journey</SheetTitle>
|
|
21
|
+
</SheetContent>
|
|
22
|
+
</Sheet>
|
|
23
|
+
);
|
|
24
|
+
render(<>{wrapper(sheet)}</>);
|
|
25
|
+
return screen.getByTestId("sheet");
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
describe("sheet layering", () => {
|
|
29
|
+
it("keeps a standalone sheet on its own layer", () => {
|
|
30
|
+
expect(layer(sheetIn((sheet) => sheet))).toBe("z-[230]");
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
it("opens a sheet from a dialog above the dialog and below popovers", () => {
|
|
34
|
+
const content = sheetIn((sheet) => (
|
|
35
|
+
<Dialog open>
|
|
36
|
+
<DialogContent aria-describedby={undefined} data-testid="dialog">
|
|
37
|
+
<DialogTitle>Details</DialogTitle>
|
|
38
|
+
{sheet}
|
|
39
|
+
</DialogContent>
|
|
40
|
+
</Dialog>
|
|
41
|
+
));
|
|
42
|
+
const dialogZ = Number(
|
|
43
|
+
/z-\[(\d+)\]/.exec(layer(screen.getByTestId("dialog")))?.[1],
|
|
44
|
+
);
|
|
45
|
+
const sheetZ = Number(/z-\[(\d+)\]/.exec(layer(content))?.[1]);
|
|
46
|
+
expect(sheetZ).toBeGreaterThan(dialogZ);
|
|
47
|
+
expect(sheetZ).toBeLessThan(290);
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
describe("popover inside a modal layer", () => {
|
|
52
|
+
function PopoverUnderTest({ modal }: { modal?: boolean }) {
|
|
53
|
+
return (
|
|
54
|
+
<>
|
|
55
|
+
<button type="button">outside</button>
|
|
56
|
+
<Popover open modal={modal}>
|
|
57
|
+
<PopoverTrigger>trigger</PopoverTrigger>
|
|
58
|
+
<PopoverContent>list</PopoverContent>
|
|
59
|
+
</Popover>
|
|
60
|
+
</>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// A modal popover hides everything outside it from assistive tech, which is
|
|
65
|
+
// also what lets Radix's scroll lock treat its content as a layer.
|
|
66
|
+
const outsideHidden = () =>
|
|
67
|
+
screen.getByText("outside").closest("[aria-hidden=true]") !== null;
|
|
68
|
+
|
|
69
|
+
it("stays non-modal on the page", () => {
|
|
70
|
+
render(<PopoverUnderTest />);
|
|
71
|
+
expect(outsideHidden()).toBe(false);
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
it("becomes modal inside a dialog so the wheel can scroll it", () => {
|
|
75
|
+
render(
|
|
76
|
+
<Dialog open>
|
|
77
|
+
<DialogContent aria-describedby={undefined}>
|
|
78
|
+
<DialogTitle>Details</DialogTitle>
|
|
79
|
+
<PopoverUnderTest />
|
|
80
|
+
</DialogContent>
|
|
81
|
+
</Dialog>,
|
|
82
|
+
);
|
|
83
|
+
expect(screen.getByText("list")).toBeTruthy();
|
|
84
|
+
expect(screen.getByText("list").closest("[aria-hidden=true]")).toBeNull();
|
|
85
|
+
expect(
|
|
86
|
+
screen.getByText("trigger").closest("[aria-hidden=true]"),
|
|
87
|
+
).not.toBeNull();
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
it("lets a caller keep it non-modal", () => {
|
|
91
|
+
render(
|
|
92
|
+
<Dialog open>
|
|
93
|
+
<DialogContent aria-describedby={undefined}>
|
|
94
|
+
<DialogTitle>Details</DialogTitle>
|
|
95
|
+
<PopoverUnderTest modal={false} />
|
|
96
|
+
</DialogContent>
|
|
97
|
+
</Dialog>,
|
|
98
|
+
);
|
|
99
|
+
expect(
|
|
100
|
+
screen.getByText("trigger").closest("[aria-hidden=true]"),
|
|
101
|
+
).toBeNull();
|
|
102
|
+
});
|
|
103
|
+
});
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* True inside a dialog or sheet. Radix scroll-locks the page while one is open
|
|
5
|
+
* and lets the wheel through only to the layers it knows about, so a
|
|
6
|
+
* non-modal popover portalled to the body inside one cannot scroll, and a sheet
|
|
7
|
+
* opened from one would sit under it.
|
|
8
|
+
*/
|
|
9
|
+
const ModalLayerContext = createContext(false);
|
|
10
|
+
|
|
11
|
+
export const ModalLayerProvider = ModalLayerContext.Provider;
|
|
12
|
+
|
|
13
|
+
export function useInModalLayer(): boolean {
|
|
14
|
+
return useContext(ModalLayerContext);
|
|
15
|
+
}
|
package/src/ui/popover.tsx
CHANGED
|
@@ -2,8 +2,16 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
|
|
4
4
|
import { cn } from "../utils.js";
|
|
5
|
+
import { useInModalLayer } from "./modal-layer.js";
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
// Modal inside a dialog or sheet: its content joins the scroll lock's allowed layers, so the wheel scrolls it.
|
|
8
|
+
function Popover({
|
|
9
|
+
modal,
|
|
10
|
+
...props
|
|
11
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
|
12
|
+
const inModalLayer = useInModalLayer();
|
|
13
|
+
return <PopoverPrimitive.Root modal={modal ?? inModalLayer} {...props} />;
|
|
14
|
+
}
|
|
7
15
|
|
|
8
16
|
const PopoverTrigger = PopoverPrimitive.Trigger;
|
|
9
17
|
|
package/src/ui/sheet.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
|
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
|
|
6
6
|
import { cn } from "../utils.js";
|
|
7
|
+
import { ModalLayerProvider, useInModalLayer } from "./modal-layer.js";
|
|
7
8
|
|
|
8
9
|
const Sheet = SheetPrimitive.Root;
|
|
9
10
|
|
|
@@ -71,24 +72,34 @@ const SheetContent = React.forwardRef<
|
|
|
71
72
|
...props
|
|
72
73
|
},
|
|
73
74
|
ref,
|
|
74
|
-
) =>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
>
|
|
82
|
-
{children}
|
|
83
|
-
{showClose ? (
|
|
84
|
-
<SheetPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
|
85
|
-
<IconX className="h-4 w-4" />
|
|
86
|
-
<span className="sr-only">Close</span>
|
|
87
|
-
</SheetPrimitive.Close>
|
|
75
|
+
) => {
|
|
76
|
+
// A sheet opened from a dialog rises above it, and stays under the popovers at z-[290].
|
|
77
|
+
const nested = useInModalLayer();
|
|
78
|
+
return (
|
|
79
|
+
<SheetPortal>
|
|
80
|
+
{showOverlay ? (
|
|
81
|
+
<SheetOverlay className={cn(nested && "z-[284]", overlayClassName)} />
|
|
88
82
|
) : null}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
83
|
+
<SheetPrimitive.Content
|
|
84
|
+
ref={ref}
|
|
85
|
+
className={cn(
|
|
86
|
+
sheetVariants({ side }),
|
|
87
|
+
nested && "z-[285]",
|
|
88
|
+
className,
|
|
89
|
+
)}
|
|
90
|
+
{...props}
|
|
91
|
+
>
|
|
92
|
+
<ModalLayerProvider value>{children}</ModalLayerProvider>
|
|
93
|
+
{showClose ? (
|
|
94
|
+
<SheetPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
|
95
|
+
<IconX className="h-4 w-4" />
|
|
96
|
+
<span className="sr-only">Close</span>
|
|
97
|
+
</SheetPrimitive.Close>
|
|
98
|
+
) : null}
|
|
99
|
+
</SheetPrimitive.Content>
|
|
100
|
+
</SheetPortal>
|
|
101
|
+
);
|
|
102
|
+
},
|
|
92
103
|
);
|
|
93
104
|
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
94
105
|
|