@sustaina/shared-ui 1.67.0 → 1.68.0

package/dist/index.d.mts

@@ -39,6 +39,7 @@ type AuditFooterProps = {
     updatedBy?: string | null;
     onDelete?: () => void;
     canDelete?: boolean;
+    canDeleteBehavior?: "hidden" | "disabled";
     emptyValue?: React__default.ReactNode;
     labels?: {
         createdOn?: string;
@@ -404,6 +405,15 @@ type DataTableComponentProps<TData> = {
         column: Column$1<TData>;
         table: Table$1<TData>;
     }) => React__default.ComponentProps<typeof TableCell>);
+    tableFooterProps?: React__default.ComponentProps<typeof TableFooter>;
+    tableFooterRowProps?: React__default.ComponentProps<typeof TableRow> | ((info: {
+        footerGroup: HeaderGroup<TData>;
+        table: Table$1<TData>;
+    }) => React__default.ComponentProps<typeof TableRow>);
+    tableFooterCellProps?: React__default.ComponentProps<typeof TableHead> | ((info: {
+        footer: Header<TData, unknown>;
+        table: Table$1<TData>;
+    }) => React__default.ComponentProps<typeof TableHead>);
     columnResizerProps?: Omit<ColumnResizerProps, "header">;
     columnSeparatorProps?: DataTableColumnSeparatorProps;
 };
@@ -466,6 +476,7 @@ declare module "@tanstack/react-table" {
     headerProps?: React.ComponentProps<"th">;
     cellProps?: React.ComponentProps<"td">;
     filterCellProps?: React.ComponentProps<"td">;
+    footerProps?: React.ComponentProps<"th">;
     useColumnSizing?: boolean;
     columnSeparatorProps?: ColumnSeparatorProps;
     renderColumnFilter?: (props: DataTableColumnFilterProps<TData>) => ReactNode;

package/dist/index.d.ts

@@ -39,6 +39,7 @@ type AuditFooterProps = {
     updatedBy?: string | null;
     onDelete?: () => void;
     canDelete?: boolean;
+    canDeleteBehavior?: "hidden" | "disabled";
     emptyValue?: React__default.ReactNode;
     labels?: {
         createdOn?: string;
@@ -404,6 +405,15 @@ type DataTableComponentProps<TData> = {
         column: Column$1<TData>;
         table: Table$1<TData>;
     }) => React__default.ComponentProps<typeof TableCell>);
+    tableFooterProps?: React__default.ComponentProps<typeof TableFooter>;
+    tableFooterRowProps?: React__default.ComponentProps<typeof TableRow> | ((info: {
+        footerGroup: HeaderGroup<TData>;
+        table: Table$1<TData>;
+    }) => React__default.ComponentProps<typeof TableRow>);
+    tableFooterCellProps?: React__default.ComponentProps<typeof TableHead> | ((info: {
+        footer: Header<TData, unknown>;
+        table: Table$1<TData>;
+    }) => React__default.ComponentProps<typeof TableHead>);
     columnResizerProps?: Omit<ColumnResizerProps, "header">;
     columnSeparatorProps?: DataTableColumnSeparatorProps;
 };
@@ -466,6 +476,7 @@ declare module "@tanstack/react-table" {
     headerProps?: React.ComponentProps<"th">;
     cellProps?: React.ComponentProps<"td">;
     filterCellProps?: React.ComponentProps<"td">;
+    footerProps?: React.ComponentProps<"th">;
     useColumnSizing?: boolean;
     columnSeparatorProps?: ColumnSeparatorProps;
     renderColumnFilter?: (props: DataTableColumnFilterProps<TData>) => ReactNode;

package/dist/index.js

@@ -3472,6 +3472,7 @@ var AuditFooter = ({
   updatedBy,
   onDelete,
   canDelete = true,
+  canDeleteBehavior,
   emptyValue = "-",
   labels,
   classNames,
@@ -3492,6 +3493,9 @@ var AuditFooter = ({
   const timeFormatter = formatters?.time ?? ((value) => formatISODate(value, "H:i:s"));
   const userFormatter = formatters?.user ?? ((value) => value ?? emptyValue);
   const resolvedDeleteIcon = deleteIcon ?? /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, { className: "w-5 h-5" });
+  const resolvedCanDeleteBehavior = canDeleteBehavior ?? "hidden";
+  const shouldShowDelete = canDelete || resolvedCanDeleteBehavior === "disabled";
+  const deleteButtonClassName = canDelete ? cn("w-5 h-5 cursor-pointer text-red-500", classNames?.deleteButton) : cn("w-5 h-5 text-gray-300 cursor-not-allowed", classNames?.deleteButtonDisabled);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full h-14 mt-12 justify-between items-end px-3", classNames?.root), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -3516,10 +3520,10 @@ var AuditFooter = ({
         ]
       }
     ),
-    onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+    shouldShowDelete && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: canDelete ? cn("w-5 h-5 cursor-pointer text-red-500", classNames?.deleteButton) : cn("w-5 h-5 text-gray-300 cursor-not-allowed", classNames?.deleteButtonDisabled),
+        className: deleteButtonClassName,
         onClick: canDelete ? onDelete : void 0,
         "aria-label": deleteAriaLabel,
         role: "button",
@@ -9235,7 +9239,11 @@ var modelOptions = [
   "getVisibleLeafColumns",
   "getLeftVisibleLeafColumns",
   "getRightVisibleLeafColumns",
-  "getCenterVisibleLeafColumns"
+  "getCenterVisibleLeafColumns",
+  "getFooterGroups",
+  "getLeftFooterGroups",
+  "getRightFooterGroups",
+  "getCenterFooterGroups"
 ];
 var DataTableDevTool = ({ table }) => {
   const [open, setOpen] = React.useState(false);
@@ -9665,7 +9673,7 @@ var TableHeaderRows = ({
       const { isLastLeftPinnedColumn } = getColumnPinningInfo(header.column);
       const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextHeader.column);
       const headerGroupLength = header.headerGroup.headers.length;
-      const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn;
+      const showSeparator = header.index !== headerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn && (!header.isPlaceholder || !nextHeader.isPlaceholder);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         TableHead,
         {
@@ -9680,7 +9688,7 @@ var TableHeaderRows = ({
           ),
           style: {
             ...style,
-            width: useColumnSizing ? header.column.getSize() : void 0,
+            width: useColumnSizing ? `calc(var(--header-${header.id}-size, ${header.getSize()}) * 1px)` : void 0,
             minWidth: useColumnSizing ? header.column.columnDef.minSize : void 0,
             maxWidth: useColumnSizing ? header.column.columnDef.maxSize : void 0,
             ...tableHeadCellProps?.style,
@@ -9731,7 +9739,7 @@ var TableFilterRow = ({
         ),
         style: {
           ...style,
-          width: useColumnSizing ? column.getSize() : void 0,
+          width: useColumnSizing ? `calc(var(--col-${column.id}-size, ${column.getSize()}) * 1px)` : void 0,
           minWidth: useColumnSizing ? column.columnDef.minSize : void 0,
           maxWidth: useColumnSizing ? column.columnDef.maxSize : void 0,
           ...tableFilterCellProps?.style,
@@ -9815,7 +9823,7 @@ var TableDataRows = ({
               ),
               style: {
                 ...style,
-                width: useColumnSizing ? cell.column.getSize() : void 0,
+                width: useColumnSizing ? `calc(var(--col-${cell.column.id}-size, ${cell.column.getSize()}) * 1px)` : void 0,
                 minWidth: useColumnSizing ? cell.column.columnDef.minSize : void 0,
                 maxWidth: useColumnSizing ? cell.column.columnDef.maxSize : void 0,
                 ...tableDataCellProps?.style,
@@ -9838,6 +9846,67 @@ var TableDataRows = ({
     ) })
   ] });
 };
+var MemoizedTableDataRows = React__namespace.default.memo(
+  TableDataRows,
+  (prev, next) => prev.table.options.data === next.table.options.data
+);
+var TableFooterRows = ({
+  table,
+  columnResizing,
+  components,
+  virtual
+}) => {
+  const hasAnyFooter = table.getAllColumns().some((col) => col.columnDef.footer != null);
+  if (!hasAnyFooter) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getFooterGroups().map((footerGroup) => {
+    const tableFooterRowProps = typeof components?.tableFooterRowProps === "function" ? components.tableFooterRowProps({ footerGroup, table }) : components?.tableFooterRowProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { ...tableFooterRowProps, children: footerGroup.headers.map((footer) => {
+      const { classes, style } = getColumnPinningStyles(footer.column);
+      const useColumnSizing = footer.column.columnDef?.meta?.useColumnSizing ?? columnResizing?.enabled ?? virtual?.enabled ?? false;
+      const tableFooterCellProps = typeof components?.tableFooterCellProps === "function" ? components.tableFooterCellProps({ footer, table }) : components?.tableFooterCellProps;
+      const nextFooter = footerGroup.headers[footer.index + 1] ?? footer;
+      const { isLastLeftPinnedColumn } = getColumnPinningInfo(footer.column);
+      const { isFirstRightPinnedColumn } = getColumnPinningInfo(nextFooter.column);
+      const footerGroupLength = footer.headerGroup.headers.length;
+      const showSeparator = footer.index !== footerGroupLength - 1 && !isLastLeftPinnedColumn && !isFirstRightPinnedColumn && (!footer.isPlaceholder || !nextFooter.isPlaceholder);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        TableHead,
+        {
+          "data-testid": `footer-cell-${footer.id}`,
+          colSpan: footer.colSpan,
+          ...tableFooterCellProps,
+          ...footer.column.columnDef?.meta?.footerProps,
+          className: cn(
+            classes,
+            tableFooterCellProps?.className,
+            footer.column.columnDef?.meta?.footerProps?.className
+          ),
+          style: {
+            ...style,
+            width: useColumnSizing ? `calc(var(--col-${footer.column.id}-size, ${footer.column.getSize()}) * 1px)` : void 0,
+            minWidth: useColumnSizing ? footer.column.columnDef.minSize : void 0,
+            maxWidth: useColumnSizing ? footer.column.columnDef.maxSize : void 0,
+            ...tableFooterCellProps?.style,
+            ...footer.column.columnDef?.meta?.footerProps?.style
+          },
+          children: [
+            footer.isPlaceholder ? null : reactTable.flexRender(footer.column.columnDef.footer, footer.getContext()),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ColumnSeparator_default,
+              {
+                ...components?.columnSeparatorProps?.headerCell,
+                ...footer.column.columnDef?.meta?.columnSeparatorProps,
+                show: footer.column.columnDef?.meta?.columnSeparatorProps?.show ?? components?.columnSeparatorProps?.headerCell?.show ?? showSeparator
+              }
+            ),
+            !footer.isPlaceholder && /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer_default, { header: footer, ...components?.columnResizerProps })
+          ]
+        },
+        footer.id
+      );
+    }) }, footerGroup.id);
+  }) });
+};
 var DataTable = ({
   tableRef,
   virtualizerRef,
@@ -9894,6 +9963,19 @@ var DataTable = ({
     activeStatusContent
   });
   const fetchMoreOnScrollReached = useScrollFetch({ scrollFetch, containerRef: tableContainerRef });
+  const columnResizingEnabled = columnResizing?.enabled;
+  const { columnSizing, columnSizingInfo } = table.getState();
+  const columnSizeVars = React.useMemo(() => {
+    if (!columnResizingEnabled && !virtualEnabled) return {};
+    const headers = table.getFlatHeaders();
+    const colSizes = {};
+    for (const header of headers) {
+      colSizes[`--header-${header.id}-size`] = header.getSize();
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+    }
+    return colSizes;
+  }, [columnSizing, columnSizingInfo, columnResizingEnabled, virtualEnabled]);
+  const isResizing = columnResizingEnabled && !!columnSizingInfo.isResizingColumn;
   useBindRef_default({ ref: tableRef, value: table });
   useBindRef_default({ ref: virtualizerRef, value: virtualizer });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9936,7 +10018,11 @@ var DataTable = ({
             Table,
             {
               ...components?.tableProps,
-              style: { tableLayout: virtualEnabled ? "fixed" : "auto", ...components?.tableProps?.style },
+              style: {
+                tableLayout: virtualEnabled ? "fixed" : "auto",
+                ...components?.tableProps?.style,
+                ...columnSizeVars
+              },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   TableHeader,
@@ -9967,7 +10053,23 @@ var DataTable = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: isResizing ? /* @__PURE__ */ jsxRuntime.jsx(
+                  MemoizedTableDataRows,
+                  {
+                    table,
+                    rowModel,
+                    virtualEnabled,
+                    virtualItems,
+                    virtualizer,
+                    paddingTop,
+                    paddingBottom,
+                    visibleColumnCount,
+                    columnResizing,
+                    virtual,
+                    onRowClick,
+                    components
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
                   TableDataRows,
                   {
                     table,
@@ -9983,7 +10085,23 @@ var DataTable = ({
                     onRowClick,
                     components
                   }
-                ) })
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TableFooter,
+                  {
+                    ...components?.tableFooterProps,
+                    className: cn("sticky bottom-0 z-10 bg-white", components?.tableFooterProps?.className),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      TableFooterRows,
+                      {
+                        table,
+                        columnResizing,
+                        virtual,
+                        components
+                      }
+                    )
+                  }
+                )
               ]
             }
           ),