infinity-ui-elements 1.8.44 → 1.8.45

package/dist/components/SidePanel/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidePanel/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACzD;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,SAAS,uFAuOd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidePanel/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACzD;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,SAAS,uFA2Pd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/index.esm.js

@@ -3803,6 +3803,8 @@ SearchableDropdown.displayName = "SearchableDropdown";
 const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, description, footer, children, position = "right", width = "medium", showCloseButton = true, headerActions, closeOnOverlayClick = true, closeOnEscape = true, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
     const panelRef = React.useRef(null);
     const contentRef = ref || panelRef;
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [shouldRender, setShouldRender] = React.useState(false);
     // Width configurations
     const widthConfig = {
         small: "w-80",
@@ -3810,15 +3812,33 @@ const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, descrip
         large: "w-[32rem]",
         xlarge: "w-[40rem]",
     };
+    // Handle mounting and unmounting with animation
+    React.useEffect(() => {
+        if (isOpen) {
+            setShouldRender(true);
+            // Small delay to trigger animation
+            requestAnimationFrame(() => {
+                setIsVisible(true);
+            });
+        }
+        else {
+            setIsVisible(false);
+            // Wait for animation to complete before unmounting
+            const timer = setTimeout(() => {
+                setShouldRender(false);
+            }, 300); // Match animation duration
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
     // Position-based classes
     const positionClasses = {
         left: {
             container: "justify-start",
-            panel: isOpen ? "animate-slide-in-left" : "animate-slide-out-left",
+            panel: isVisible ? "animate-slide-in-left" : "animate-slide-out-left",
         },
         right: {
             container: "justify-end",
-            panel: isOpen ? "animate-slide-in-right" : "animate-slide-out-right",
+            panel: isVisible ? "animate-slide-in-right" : "animate-slide-out-right",
         },
     };
     // Handle escape key
@@ -3851,14 +3871,14 @@ const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, descrip
             onClose();
         }
     };
-    // Don't render if not open
-    if (!isOpen)
+    // Don't render if not open and animation is complete
+    if (!shouldRender)
         return null;
     const hasHeader = title || description;
     const widthClass = width in widthConfig
         ? widthConfig[width]
         : width;
-    return (jsxs("div", { className: cn("fixed inset-0 z-10000 flex items-stretch", positionClasses[position].container, className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isOpen ? "opacity-100" : "opacity-0", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative bg-white shadow-2xl transition-transform duration-300 ease-out", "flex flex-col h-full max-w-full", widthClass, positionClasses[position].panel, contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-center justify-between gap-4 px-7 py-5 shrink-0 border-b border-surface-outline-neutral-subtle", headerClassName), children: [jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [titleIcon && (jsx("div", { className: "flex items-center justify-center shrink-0", children: typeof titleIcon === "string" ? (jsx(Icon, { name: titleIcon, size: 20 })) : (titleIcon) })), jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", className: "truncate", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-0.5", children: description }))] })] }), jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [headerActions, showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }))] })] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: "absolute top-4 right-4 z-10", children: jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto px-6", hasHeader ? "py-6" : "pt-6 pb-4", !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col shrink-0", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsx("div", { className: cn("flex items-center justify-end gap-3 px-6 py-4", footerClassName), children: footer })] }))] })] }));
+    return (jsxs("div", { className: cn("fixed inset-0 z-10000 flex p-4", positionClasses[position].container, className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isVisible ? "opacity-100" : "opacity-0", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative bg-white shadow-2xl transition-transform duration-300 ease-out rounded-large", "flex flex-col max-w-full h-full overflow-hidden", widthClass, positionClasses[position].panel, contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-center justify-between gap-4 px-7 py-5 shrink-0 border-b border-surface-outline-neutral-subtle", headerClassName), children: [jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [titleIcon && (jsx("div", { className: "flex items-center justify-center shrink-0", children: typeof titleIcon === "string" ? (jsx(Icon, { name: titleIcon, size: 20 })) : (titleIcon) })), jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", className: "truncate", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-0.5", children: description }))] })] }), jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [headerActions, showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }))] })] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: "absolute top-4 right-4 z-10", children: jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto px-6", hasHeader ? "py-6" : "pt-6 pb-4", !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col shrink-0", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsx("div", { className: cn("flex items-center justify-end gap-3 px-6 py-4", footerClassName), children: footer })] }))] })] }));
 });
 SidePanel.displayName = "SidePanel";