infinity-ui-elements 1.7.10 → 1.7.12

package/dist/index.js

@@ -1454,11 +1454,14 @@ const Link = React__namespace.forwardRef(({ className, type = "anchor", color =
 });
 Link.displayName = "Link";
 
-const DropdownMenu = React__namespace.forwardRef(({ items = [], sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
+const DropdownMenu = React__namespace.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
     const renderContent = () => {
         if (isLoading) {
             return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsxRuntime.jsx(lucideReact.Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
         }
+        if (customContent) {
+            return (jsxRuntime.jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsxRuntime.jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsxRuntime.jsx("div", { className: "px-1", children: customContent })] }));
+        }
         if (isEmpty || items.length === 0) {
             return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsxRuntime.jsx(lucideReact.Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsxRuntime.jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsxRuntime.jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
         }
@@ -1468,10 +1471,11 @@ const DropdownMenu = React__namespace.forwardRef(({ items = [], sectionHeading,
                         }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.id))) })] }));
     };
     const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
+    const footerVisible = showFooter ?? !disableFooter;
     return (jsxRuntime.jsxs("div", { ref: ref, className: cn("bg-white  rounded-large overflow-hidden", widthClass, className), style: {
             boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
             ...(width !== "full" && width !== "auto" ? { width } : {}),
-        }, children: [renderContent(), !disableFooter && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" }), jsxRuntime.jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
+        }, children: [renderContent(), footerVisible && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" }), jsxRuntime.jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
                             ? "flex-col"
                             : "items-center flex-row"), children: [jsxRuntime.jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText }), jsxRuntime.jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText })] })] }))] }));
 });
@@ -1489,7 +1493,7 @@ const dropdownVariants = classVarianceAuthority.cva("bg-surface-fill-primary-nor
         size: "medium",
     },
 });
-const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [], sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, ...props }, ref) => {
+const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...props }, ref) => {
     const [uncontrolledOpen, setUncontrolledOpen] = React__namespace.useState(defaultOpen);
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React__namespace.useRef(null);
@@ -1536,7 +1540,7 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
         medium: "w-80",
         large: "w-96",
     };
-    return (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsxRuntime.jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsxRuntime.jsx(DropdownMenu, { ref: ref, items: items, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
+    return (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsxRuntime.jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsxRuntime.jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
 });
 Dropdown.displayName = "Dropdown";
 
@@ -2932,7 +2936,7 @@ function renderDefaultEmptyState({ colSpan }) {
 }
 
 // ==================== Component ====================
-function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
+function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
     // ==================== State ====================
     const [internalSelectedRowId, setInternalSelectedRowId] = React__namespace.useState(null);
     const selectedRowIdRef = React__namespace.useRef(null);
@@ -2995,6 +2999,43 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
         };
     }, [maxHeight]);
+    const resolvedLoading = typeof loading === "boolean" ? loading : Boolean(isLoading);
+    const skeletonRowCount = loadingSkeletonRows ?? 5;
+    const sizeKey = size || "medium";
+    const skeletonHeightMap = {
+        small: 16,
+        medium: 20,
+        large: 24,
+    };
+    const skeletonCellHeight = normalizeSizeValue(loadingSkeletonHeight ?? skeletonHeightMap[sizeKey]);
+    const selectionSkeletonSize = sizeKey === "small" ? 14 : sizeKey === "large" ? 20 : 16;
+    const renderSkeletonRows = React__namespace.useCallback(() => {
+        const visibleColumns = table.getVisibleLeafColumns();
+        if (visibleColumns.length === 0) {
+            return renderDefaultLoadingState({
+                colSpan: table.getAllColumns().length || 1,
+            });
+        }
+        return Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (jsxRuntime.jsxs("tr", { children: [enableRowSelection && (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), "w-10", cellClassName), children: jsxRuntime.jsx(Skeleton, { variant: "circle", width: selectionSkeletonSize, height: selectionSkeletonSize }) })), visibleColumns.map((column) => (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), column.columnDef.meta?.cellClassName, cellClassName), style: getColumnStyle(column.id, {
+                        width: column.getSize(),
+                        minWidth: column.columnDef.minSize,
+                        maxWidth: column.columnDef.maxSize,
+                    }), children: jsxRuntime.jsx(Skeleton, { className: "w-full", height: skeletonCellHeight, rounded: "medium" }) }, `${column.id}-${rowIndex}`)))] }, `skeleton-row-${rowIndex}`)));
+    }, [
+        cellClassName,
+        enableRowSelection,
+        getColumnStyle,
+        selectionSkeletonSize,
+        sizeKey,
+        skeletonCellHeight,
+        skeletonRowCount,
+        table,
+    ]);
+    const renderLoadingContent = React__namespace.useCallback(() => {
+        if (loadingComponent)
+            return loadingComponent;
+        return renderSkeletonRows();
+    }, [loadingComponent, renderSkeletonRows]);
     // ==================== Callbacks ====================
     const getRowClassName = React__namespace.useCallback((row) => {
         if (typeof rowClassName === "function") {
@@ -3031,19 +3072,13 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
             onRowSelectionChange(null);
         }
     };
-    // ==================== Render Helpers ====================
-    const renderLoadingState = () => {
-        if (loadingComponent)
-            return loadingComponent;
-        return renderDefaultLoadingState({ colSpan: table.getAllColumns().length });
-    };
     const renderEmptyState = () => {
         if (emptyComponent)
             return emptyComponent;
         return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
     // ==================== Render ====================
-    return (jsxRuntime.jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxRuntime.jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxRuntime.jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsxRuntime.jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), isLoading ? (jsxRuntime.jsx("tbody", { children: renderLoadingState() })) : !hasData ? (jsxRuntime.jsx("tbody", { children: renderEmptyState() })) : (jsxRuntime.jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsxRuntime.jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
+    return (jsxRuntime.jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxRuntime.jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxRuntime.jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsxRuntime.jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsxRuntime.jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsxRuntime.jsx("tbody", { children: renderEmptyState() })) : (jsxRuntime.jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsxRuntime.jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
 }
 // ==================== Export ====================
 const Table = React__namespace.forwardRef(TableComponent);