@uipath/apollo-react 6.42.0 → 6.43.0

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.cjs

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -37,113 +28,39 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
-const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
-const external_react_focus_lock_namespaceObject = require("react-focus-lock");
-var external_react_focus_lock_default = /*#__PURE__*/ __webpack_require__.n(external_react_focus_lock_namespaceObject);
-function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
-    const titleId = (0, external_react_namespaceObject.useId)();
-    const expandButtonRef = (0, external_react_namespaceObject.useRef)(null);
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
     const previouslyFocusedElementRef = (0, external_react_namespaceObject.useRef)(null);
-    const [uncontrolledExpanded, setUncontrolledExpanded] = (0, external_react_namespaceObject.useState)(defaultExpanded);
-    const expanded = controlledExpanded ?? uncontrolledExpanded;
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!open) return;
         previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
-        const handleKeyDown = (event)=>{
-            if ('Escape' === event.key) onOpenChange?.(false);
-        };
-        document.addEventListener('keydown', handleKeyDown);
         return ()=>{
-            cancelAnimationFrame(animationFrame);
-            document.removeEventListener('keydown', handleKeyDown);
             previouslyFocusedElementRef.current?.focus();
             previouslyFocusedElementRef.current = null;
         };
     }, [
-        onOpenChange,
         open
     ]);
-    if (!open) return null;
-    const setExpanded = (nextExpanded)=>{
-        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
-        onExpandedChange?.(nextExpanded);
-    };
-    const handleBackdropClick = (event)=>{
-        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
-    };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, apollo_wind_namespaceObject.cn)('absolute inset-0 z-50 flex items-center justify-center bg-black/60', expanded ? 'p-0' : 'p-3'),
-        onMouseDown: handleBackdropClick,
-        "data-testid": "canvas-takeover-backdrop",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_focus_lock_default(), {
-            autoFocus: false,
-            className: "contents",
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("section", {
-                role: "dialog",
-                "aria-modal": "true",
-                "aria-labelledby": titleId,
-                "data-expanded": expanded,
-                className: (0, apollo_wind_namespaceObject.cn)('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
-                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                id: titleId,
-                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
-                                children: title
-                            }),
-                            headerActions,
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "-mr-1 flex shrink-0 items-center gap-1",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                        ref: expandButtonRef,
-                                        type: "button",
-                                        onClick: ()=>setExpanded(!expanded),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
-                                        title: expanded ? 'Collapse modal' : 'Expand modal',
-                                        children: expanded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Minimize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Maximize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                        type: "button",
-                                        onClick: ()=>onOpenChange?.(false),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": "Close modal",
-                                        title: "Close modal",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "flex min-h-0 flex-1",
-                        children: [
-                            null != sidebar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("aside", {
-                                className: (0, apollo_wind_namespaceObject.cn)('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
-                                children: sidebar
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
-                                className: "min-w-0 flex-1 overflow-auto",
-                                children: children
-                            })
-                        ]
-                    })
-                ]
-            })
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Modal, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ModalContent, {
+            variant: "takeover",
+            headerTitle: title,
+            headerActions: headerActions,
+            sidebar: sidebar,
+            expanded: expanded,
+            defaultExpanded: defaultExpanded,
+            onExpandedChange: onExpandedChange,
+            className: className,
+            sidebarClassName: sidebarClassName,
+            closeOnBackdropClick: closeOnBackdropClick,
+            overlayTestId: "canvas-takeover-backdrop",
+            onOpenAutoFocus: (event)=>{
+                event.preventDefault();
+                event.currentTarget.querySelector('[aria-label="Expand modal"], [aria-label="Collapse modal"]')?.focus();
+            },
+            children: children
         })
     });
 }

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.d.ts

@@ -13,5 +13,5 @@ export interface CanvasTakeoverModalProps {
     sidebarClassName?: string;
     closeOnBackdropClick?: boolean;
 }
-export declare function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick, }: CanvasTakeoverModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick, }: CanvasTakeoverModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CanvasTakeoverModal.d.ts.map

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasTakeoverModal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAG5F,MAAM,WAAW,wBAAwB;IAEvC,IAAI,EAAE,OAAO,CAAC;IAEd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,KAAK,EAAE,SAAS,CAAC;IAEjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,EAAE,kBAAkB,EAC5B,eAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,oBAA2B,GAC5B,EAAE,wBAAwB,kDA2G1B"}
+{"version":3,"file":"CanvasTakeoverModal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAGD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,oBAA2B,GAC5B,EAAE,wBAAwB,2CAwC1B"}

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.js

@@ -1,111 +1,38 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@uipath/apollo-wind";
-import { Maximize2, Minimize2, X } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
-import react_focus_lock from "react-focus-lock";
-function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
-    const titleId = useId();
-    const expandButtonRef = useRef(null);
+import { jsx } from "react/jsx-runtime";
+import { Modal, ModalContent } from "@uipath/apollo-wind";
+import { useEffect, useRef } from "react";
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
     const previouslyFocusedElementRef = useRef(null);
-    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
-    const expanded = controlledExpanded ?? uncontrolledExpanded;
     useEffect(()=>{
         if (!open) return;
         previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
-        const handleKeyDown = (event)=>{
-            if ('Escape' === event.key) onOpenChange?.(false);
-        };
-        document.addEventListener('keydown', handleKeyDown);
         return ()=>{
-            cancelAnimationFrame(animationFrame);
-            document.removeEventListener('keydown', handleKeyDown);
             previouslyFocusedElementRef.current?.focus();
             previouslyFocusedElementRef.current = null;
         };
     }, [
-        onOpenChange,
         open
     ]);
-    if (!open) return null;
-    const setExpanded = (nextExpanded)=>{
-        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
-        onExpandedChange?.(nextExpanded);
-    };
-    const handleBackdropClick = (event)=>{
-        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
-    };
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('absolute inset-0 z-50 flex items-center justify-center bg-black/60', expanded ? 'p-0' : 'p-3'),
-        onMouseDown: handleBackdropClick,
-        "data-testid": "canvas-takeover-backdrop",
-        children: /*#__PURE__*/ jsx(react_focus_lock, {
-            autoFocus: false,
-            className: "contents",
-            children: /*#__PURE__*/ jsxs("section", {
-                role: "dialog",
-                "aria-modal": "true",
-                "aria-labelledby": titleId,
-                "data-expanded": expanded,
-                className: cn('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
-                children: [
-                    /*#__PURE__*/ jsxs("header", {
-                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
-                        children: [
-                            /*#__PURE__*/ jsx("h2", {
-                                id: titleId,
-                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
-                                children: title
-                            }),
-                            headerActions,
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "-mr-1 flex shrink-0 items-center gap-1",
-                                children: [
-                                    /*#__PURE__*/ jsx("button", {
-                                        ref: expandButtonRef,
-                                        type: "button",
-                                        onClick: ()=>setExpanded(!expanded),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
-                                        title: expanded ? 'Collapse modal' : 'Expand modal',
-                                        children: expanded ? /*#__PURE__*/ jsx(Minimize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        }) : /*#__PURE__*/ jsx(Maximize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>onOpenChange?.(false),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": "Close modal",
-                                        title: "Close modal",
-                                        children: /*#__PURE__*/ jsx(X, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex min-h-0 flex-1",
-                        children: [
-                            null != sidebar && /*#__PURE__*/ jsx("aside", {
-                                className: cn('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
-                                children: sidebar
-                            }),
-                            /*#__PURE__*/ jsx("main", {
-                                className: "min-w-0 flex-1 overflow-auto",
-                                children: children
-                            })
-                        ]
-                    })
-                ]
-            })
+    return /*#__PURE__*/ jsx(Modal, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ jsx(ModalContent, {
+            variant: "takeover",
+            headerTitle: title,
+            headerActions: headerActions,
+            sidebar: sidebar,
+            expanded: expanded,
+            defaultExpanded: defaultExpanded,
+            onExpandedChange: onExpandedChange,
+            className: className,
+            sidebarClassName: sidebarClassName,
+            closeOnBackdropClick: closeOnBackdropClick,
+            overlayTestId: "canvas-takeover-backdrop",
+            onOpenAutoFocus: (event)=>{
+                event.preventDefault();
+                event.currentTarget.querySelector('[aria-label="Expand modal"], [aria-label="Collapse modal"]')?.focus();
+            },
+            children: children
         })
     });
 }