infinity-ui-elements 1.8.42 → 1.8.44

package/dist/index.esm.js

@@ -3800,6 +3800,68 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
 });
 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;
+    // Width configurations
+    const widthConfig = {
+        small: "w-80",
+        medium: "w-96",
+        large: "w-[32rem]",
+        xlarge: "w-[40rem]",
+    };
+    // Position-based classes
+    const positionClasses = {
+        left: {
+            container: "justify-start",
+            panel: isOpen ? "animate-slide-in-left" : "animate-slide-out-left",
+        },
+        right: {
+            container: "justify-end",
+            panel: isOpen ? "animate-slide-in-right" : "animate-slide-out-right",
+        },
+    };
+    // Handle escape key
+    React.useEffect(() => {
+        if (!isOpen || !closeOnEscape || !onClose)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, closeOnEscape, onClose]);
+    // Prevent body scroll when side panel is open
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    // Handle overlay click
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget && onClose) {
+            onClose();
+        }
+    };
+    // Don't render if not open
+    if (!isOpen)
+        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 })] }))] })] }));
+});
+SidePanel.displayName = "SidePanel";
+
 const variantDefaults = {
     rect: { height: 16, className: "w-full rounded-large" },
     text: { height: 12, className: "w-full rounded-large" },
@@ -4299,8 +4361,8 @@ function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cell
                     "bg-surface-fill-neutral-moderate", onRowClick && "cursor-pointer", isRowHovered &&
                     showRowHover &&
                     "bg-surface-fill-neutral-moderate", getRowClassName(row.original)), onClick: handleClick, onMouseEnter: () => setHoveredRow(row.id), onMouseLeave: () => setHoveredRow(null), children: [enableRowSelection && (jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), style: {
-                            paddingTop: "20px",
-                            paddingBottom: "20px",
+                            paddingTop: "16px",
+                            paddingBottom: "16px",
                         }, children: jsx(Checkbox, { checked: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell, cellIndex) => {
                         const isCellFocused = focusedCell?.rowId === row.id &&
                             focusedCell?.cellId === cell.id;
@@ -4314,10 +4376,10 @@ function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cell
                                     minWidth: cell.column.columnDef.minSize,
                                     maxWidth: cell.column.columnDef.maxSize,
                                 }),
-                                paddingTop: "20px",
-                                paddingBottom: "20px",
+                                paddingTop: "16px",
+                                paddingBottom: "16px",
                                 ...(isFirstCell && { paddingLeft: "24px" }),
-                                ...(isLastCell && { paddingRight: "24px" }),
+                                ...(isLastCell && { paddingRight: "16px" }),
                             }, tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                     })] }, row.id));
         }) }));
@@ -5007,5 +5069,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
 //# sourceMappingURL=index.esm.js.map