@sustaina/shared-ui 1.67.0 → 1.68.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, memo, isValidElement, useMemo, useRef, useEffect, useCallback, useLayoutEffect, useState, createElement } from 'react';
+import React__default, { forwardRef, memo, createElement, isValidElement, useMemo, useRef, useEffect, useCallback, useLayoutEffect, useState } from 'react';
 import { useRouter } from '@tanstack/react-router';
 import { create } from 'zustand';
 import clsx2, { clsx } from 'clsx';
@@ -23,7 +23,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
+import { flexRender, reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
 import { initReactI18next, useTranslation, I18nextProvider } from 'react-i18next';
 import i18n from 'i18next';
 import StarterKit from '@tiptap/starter-kit';
@@ -3429,6 +3429,7 @@ var AuditFooter = ({
   updatedBy,
   onDelete,
   canDelete = true,
+  canDeleteBehavior,
   emptyValue = "-",
   labels,
   classNames,
@@ -3449,6 +3450,9 @@ var AuditFooter = ({
   const timeFormatter = formatters?.time ?? ((value) => formatISODate(value, "H:i:s"));
   const userFormatter = formatters?.user ?? ((value) => value ?? emptyValue);
   const resolvedDeleteIcon = deleteIcon ?? /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex w-full h-14 mt-12 justify-between items-end px-3", classNames?.root), children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -3473,10 +3477,10 @@ var AuditFooter = ({
         ]
       }
     ),
-    onDelete && /* @__PURE__ */ jsx(
+    shouldShowDelete && /* @__PURE__ */ 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",
@@ -9192,7 +9196,11 @@ var modelOptions = [
   "getVisibleLeafColumns",
   "getLeftVisibleLeafColumns",
   "getRightVisibleLeafColumns",
-  "getCenterVisibleLeafColumns"
+  "getCenterVisibleLeafColumns",
+  "getFooterGroups",
+  "getLeftFooterGroups",
+  "getRightFooterGroups",
+  "getCenterFooterGroups"
 ];
 var DataTableDevTool = ({ table }) => {
   const [open, setOpen] = useState(false);
@@ -9622,7 +9630,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__ */ jsxs(
         TableHead,
         {
@@ -9637,7 +9645,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,
@@ -9688,7 +9696,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,
@@ -9772,7 +9780,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,
@@ -9795,6 +9803,67 @@ var TableDataRows = ({
     ) })
   ] });
 };
+var MemoizedTableDataRows = React__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__ */ jsx(Fragment, { children: table.getFooterGroups().map((footerGroup) => {
+    const tableFooterRowProps = typeof components?.tableFooterRowProps === "function" ? components.tableFooterRowProps({ footerGroup, table }) : components?.tableFooterRowProps;
+    return /* @__PURE__ */ 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__ */ 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 : flexRender(footer.column.columnDef.footer, footer.getContext()),
+            /* @__PURE__ */ 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__ */ jsx(ColumnResizer_default, { header: footer, ...components?.columnResizerProps })
+          ]
+        },
+        footer.id
+      );
+    }) }, footerGroup.id);
+  }) });
+};
 var DataTable = ({
   tableRef,
   virtualizerRef,
@@ -9851,6 +9920,19 @@ var DataTable = ({
     activeStatusContent
   });
   const fetchMoreOnScrollReached = useScrollFetch({ scrollFetch, containerRef: tableContainerRef });
+  const columnResizingEnabled = columnResizing?.enabled;
+  const { columnSizing, columnSizingInfo } = table.getState();
+  const columnSizeVars = 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__ */ jsxs(
@@ -9893,7 +9975,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__ */ jsxs(
                   TableHeader,
@@ -9924,7 +10010,23 @@ var DataTable = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(TableBody, { ...components?.tableBodyProps, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(TableBody, { ...components?.tableBodyProps, children: isResizing ? /* @__PURE__ */ jsx(
+                  MemoizedTableDataRows,
+                  {
+                    table,
+                    rowModel,
+                    virtualEnabled,
+                    virtualItems,
+                    virtualizer,
+                    paddingTop,
+                    paddingBottom,
+                    visibleColumnCount,
+                    columnResizing,
+                    virtual,
+                    onRowClick,
+                    components
+                  }
+                ) : /* @__PURE__ */ jsx(
                   TableDataRows,
                   {
                     table,
@@ -9940,7 +10042,23 @@ var DataTable = ({
                     onRowClick,
                     components
                   }
-                ) })
+                ) }),
+                /* @__PURE__ */ jsx(
+                  TableFooter,
+                  {
+                    ...components?.tableFooterProps,
+                    className: cn("sticky bottom-0 z-10 bg-white", components?.tableFooterProps?.className),
+                    children: /* @__PURE__ */ jsx(
+                      TableFooterRows,
+                      {
+                        table,
+                        columnResizing,
+                        virtual,
+                        components
+                      }
+                    )
+                  }
+                )
               ]
             }
           ),