@economic/taco 2.4.3 → 2.6.0

package/dist/taco.cjs.development.js

@@ -473,6 +473,79 @@ function IconCashReports(props, svgRef) {
 }
 var CashReports = /*#__PURE__*/React.forwardRef(IconCashReports);
 
+function IconChartArea(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.5 4.75a.75.75 0 00-1.5 0v14.5c0 .414.336.75.75.75h18.5a.75.75 0 000-1.5h-1.5V6a.75.75 0 00-1.14-.64l-6.88 4.188-3.045-2.682a.75.75 0 00-.921-.055L3.5 9.745V4.75zm0 6.816V18.5h14.75V7.335l-6.211 3.782a.75.75 0 01-.886-.078l-3.02-2.66L3.5 11.565z",
+    fill: "currentColor"
+  }));
+}
+var ChartArea = /*#__PURE__*/React.forwardRef(IconChartArea);
+
+function IconChartBar(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 17.75A1.75 1.75 0 009.25 16h-4.5A1.75 1.75 0 003 17.75v1.5c0 .966.784 1.75 1.75 1.75h4.5A1.75 1.75 0 0011 19.25v-1.5zm6-6.5a1.75 1.75 0 00-1.75-1.75H4.75A1.75 1.75 0 003 11.25v1.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0017 12.75v-1.5zm4-6.5A1.75 1.75 0 0019.25 3H4.75A1.75 1.75 0 003 4.75v1.5C3 7.216 3.784 8 4.75 8h14.5A1.75 1.75 0 0021 6.25v-1.5zm-11.5 13v1.5a.25.25 0 01-.193.243l-.057.007h-4.5a.25.25 0 01-.243-.193L4.5 19.25v-1.5a.25.25 0 01.193-.243l.057-.007h4.5a.25.25 0 01.243.193l.007.057zm6-6.5v1.5a.25.25 0 01-.193.243L15.25 13H4.75a.25.25 0 01-.243-.193L4.5 12.75v-1.5a.25.25 0 01.193-.243L4.75 11h10.5a.25.25 0 01.243.193l.007.057zm4-6.5v1.5a.25.25 0 01-.193.243l-.057.007H4.75a.25.25 0 01-.243-.193L4.5 6.25v-1.5a.25.25 0 01.193-.243L4.75 4.5h14.5a.25.25 0 01.243.193l.007.057z",
+    fill: "currentColor"
+  }));
+}
+var ChartBar = /*#__PURE__*/React.forwardRef(IconChartBar);
+
+function IconChartLine(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.5 4.75a.75.75 0 00-1.5 0v14.5c0 .414.336.75.75.75h18.5a.75.75 0 000-1.5H3.5V4.75zm18.06 2.53a.75.75 0 10-1.06-1.06l-5.97 5.97-3.47-3.47a.75.75 0 00-1.06 0l-4.47 4.47a.75.75 0 001.061 1.06l3.94-3.94L14 13.78a.75.75 0 001.06 0l6.5-6.5z",
+    fill: "currentColor"
+  }));
+}
+var ChartLine = /*#__PURE__*/React.forwardRef(IconChartLine);
+
+function IconChartPie(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10.25 4.25A.75.75 0 0111 5v8h8a.75.75 0 01.743.648l.007.102c0 4.97-4.03 8.5-9 8.5a9 9 0 01-9-9c0-4.97 3.53-9 8.5-9zM9.5 5.787l-.209.024c-3.69.47-6.041 3.622-6.041 7.439a7.5 7.5 0 007.5 7.5c3.817 0 6.968-2.352 7.44-6.041l.022-.209H10.25a.75.75 0 01-.743-.648L9.5 13.75V5.787zm3.75-4.037a9 9 0 019 9 .75.75 0 01-.75.75h-8.25a.75.75 0 01-.75-.75V2.5a.75.75 0 01.75-.75zM14 3.287V10h6.712l-.023-.209a7.504 7.504 0 00-6.48-6.48L14 3.287z",
+    fill: "currentColor"
+  }));
+}
+var ChartPie = /*#__PURE__*/React.forwardRef(IconChartPie);
+
+function IconChartTable(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.5 4.5h15v3.75h-15V4.5zM3 9.75V4.5A1.5 1.5 0 014.5 3h15A1.5 1.5 0 0121 4.5v15a1.5 1.5 0 01-1.5 1.5h-15A1.5 1.5 0 013 19.5V9.75zM4.5 14V9.75h4V14h-4zm0 1.5v4h4v-4h-4zm5.5 4h4v-4h-4v4zm5.5 0h4v-4h-4v4zm4-5.5V9.75h-4V14h4zM10 9.75h4V14h-4V9.75z",
+    fill: "currentColor"
+  }));
+}
+var ChartTable = /*#__PURE__*/React.forwardRef(IconChartTable);
+
 function IconChatSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3140,6 +3213,11 @@ const icons = {
   calendar: Calendar,
   'cash-account': CashAccount,
   'cash-reports': CashReports,
+  'chart-area': ChartArea,
+  'chart-bar': ChartBar,
+  'chart-line': ChartLine,
+  'chart-pie': ChartPie,
+  'chart-table': ChartTable,
   'chat-solid': ChatSolid,
   chat: Chat,
   'chevron-down-double': ChevronDownDouble,
@@ -7832,7 +7910,7 @@ const useDropTarget = onDrop => {
   }, []);
   const handleDragLeave = React__default.useCallback(event => {
     event.preventDefault();
-    if (event.target === event.currentTarget) {
+    if (event.target === event.currentTarget || event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) {
       setDraggedOver(false);
     }
   }, []);
@@ -12918,7 +12996,7 @@ const Cell = function Cell(props) {
       return (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.classList.remove('pb-4');
     };
   }, [isIndicatorVisible, isLastRow]);
-  const className = cn('[&>[data-taco="tag"]]:-my-0.5', {
+  const className = cn('[&>[data-taco="tag"]]:-my-0.5', '[[data-dragged-over="true"]_&]:bg-grey-100', {
     'border-b': !isLastRow,
     'sticky z-[1]': isFrozen,
     // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
@@ -12992,9 +13070,14 @@ const Cell = function Cell(props) {
   };
   if (meta.editMode.onSave && hasCellControl && (canEditThisCell || isHoveringThisRowWhileEditing && isDataColumn)) {
     attributes.onMouseDown = event => {
-      handleMouseDown(event);
       const target = event.target;
       const isTargetInput = target !== null && target.nodeName === 'INPUT';
+      // In Edit mode, If mouse click is happening outside of cell (in case of any dropdowns like date picker or select),
+      // then it should not be processed as a click on a cell.
+      if (!event.currentTarget.contains(target)) {
+        return;
+      }
+      handleMouseDown(event);
       // event.target?.select is only truthy for input elements
       // if event.target is active element, then that means we should select the text
       if (isTargetInput && target !== document.activeElement) {
@@ -14656,13 +14739,14 @@ const InternalRow = ({
   const meta = table.options.meta;
   const isActiveRow = meta.activeRowIndex === rowIndex;
   const isDragging = meta.dragging[row.id];
-  const [, dropTargetProps] = useDropTarget(event => onRowDrop(event, row.original));
+  const [isDraggedOver, dropTargetProps] = useDropTarget(event => onRowDrop(event, row.original));
   const attributes = {
     ...props,
     ...(typeof onRowDrop === 'function' ? dropTargetProps : undefined),
     'aria-current': isActiveRow ? true : undefined,
     'aria-grabbed': isDragging ? true : undefined,
     'data-row-index': rowIndex,
+    'data-dragged-over': isDraggedOver,
     draggable: meta.enableRowDragging ? true : undefined,
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
@@ -16386,7 +16470,9 @@ const getInputAppearanceClassnames = () => {
 const useCssGrid = table => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
-  const length = table.getRowModel().rows.length;
+  const rowsLength = table.getRowModel().rows.length;
+  const expandedRowsLength = Object.keys(table.getState().expanded).length;
+  const length = rowsLength + expandedRowsLength;
   const gridTemplateColumns = React__default.useMemo(() => {
     return allVisibleColumns.reduce((accum, column, index) => {
       let size;
@@ -16398,6 +16484,8 @@ const useCssGrid = table => {
         if (column.id === COLUMN_ID) {
           size = 'minmax(max-content, auto)';
         } else {
+          // getSize method is used instead of columnSizing state because columnSizing state doesn't have
+          // sizes of internal columns.
           size = `${column.getSize()}px`;
         }
       } else if (width !== undefined) {
@@ -16419,6 +16507,8 @@ const useCssGrid = table => {
     }, '');
   }, [allVisibleColumns, columnSizing]);
   const gridTemplateRows = React__default.useMemo(() => {
+    // 1fr makes sure that there is always a free space between the rows and footer when table height exceeds the
+    // cumulative height of all rows
     return `min-content repeat(${length}, min-content) 1fr min-content`;
   }, [length]);
   const style = {
@@ -16501,6 +16591,7 @@ const DEFAULT_ALL_DISABLED = {
   enableColumnOrdering: false,
   enableColumnResizing: false,
   enableFontSize: false,
+  enableFooter: false,
   enablePrinting: false,
   enableRowDrag: false,
   enableRowDrop: false,
@@ -16521,6 +16612,7 @@ const presets = {
     enableColumnOrdering: true,
     enableColumnResizing: true,
     enableFontSize: true,
+    enableFooter: true,
     enablePrinting: false,
     enableRowDrag: true,
     enableRowDrop: true,
@@ -16540,6 +16632,7 @@ const presets = {
     enableColumnOrdering: true,
     enableColumnResizing: true,
     enableFontSize: true,
+    enableFooter: true,
     enablePrinting: false,
     enableRowDrag: true,
     enableRowDrop: true,
@@ -16555,7 +16648,7 @@ const presets = {
   }
 };
 function useTablePreset(props) {
-  var _props$enableRowExpan, _props$enableRowSelec, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnOr, _props$enableColumnRe, _props$enableFontSize, _props$enablePrinting, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowHeigh, _props$enableRowSelec2, _props$enableEditing, _props$enableFilterin, _props$enableSearch, _props$enableSorting;
+  var _props$enableRowExpan, _props$enableRowSelec, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnOr, _props$enableColumnRe, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowHeigh, _props$enableRowSelec2, _props$enableEditing, _props$enableFilterin, _props$enableSearch, _props$enableSorting;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_ALL_DISABLED;
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
@@ -16574,6 +16667,7 @@ function useTablePreset(props) {
     enableColumnOrdering: (_props$enableColumnOr = props.enableColumnOrdering) !== null && _props$enableColumnOr !== void 0 ? _props$enableColumnOr : presetOptions.enableColumnOrdering,
     enableColumnResizing: (_props$enableColumnRe = props.enableColumnResizing) !== null && _props$enableColumnRe !== void 0 ? _props$enableColumnRe : presetOptions.enableColumnResizing,
     enableFontSize: (_props$enableFontSize = props.enableFontSize) !== null && _props$enableFontSize !== void 0 ? _props$enableFontSize : presetOptions.enableFontSize,
+    enableFooter: (_props$enableFooter = props.enableFooter) !== null && _props$enableFooter !== void 0 ? _props$enableFooter : presetOptions.enableFooter,
     enablePrinting: (_props$enablePrinting = props.enablePrinting) !== null && _props$enablePrinting !== void 0 ? _props$enablePrinting : presetOptions.enablePrinting,
     enableRowDrag: ((_props$enableRowDrag = props.enableRowDrag) !== null && _props$enableRowDrag !== void 0 ? _props$enableRowDrag : presetOptions.enableRowDrag) && !!props.onRowDrag,
     enableRowDrop: ((_props$enableRowDrop = props.enableRowDrop) !== null && _props$enableRowDrop !== void 0 ? _props$enableRowDrop : presetOptions.enableRowDrop) && !!props.onRowDrop,
@@ -16900,17 +16994,26 @@ function useColumnFreezingStyle(tableId, table) {
     columnVisibility
   } = table.getState();
   const tableMeta = table.options.meta;
-  const frozenColumnIndex = ((_tableMeta$columnFree = tableMeta.columnFreezing.frozenColumnIndex) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : -1) + tableMeta.columnFreezing.frozenInternalColumnCount;
+  const frozenColumnIndex =
+  // If column freezing is not enabled then only internal frozen column should be frozen.
+  (tableMeta.columnFreezing.isEnabled ? (_tableMeta$columnFree = tableMeta.columnFreezing.frozenColumnIndex) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : -1 : -1) + tableMeta.columnFreezing.frozenInternalColumnCount;
   const style = React__default.useMemo(() => {
     if (tableMeta.columnFreezing.frozenInternalColumnCount > 0 || tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined) {
-      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1).map(column => column.id);
+      var _visibleFrozenColumns;
+      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1);
       // if all frozen columns haven't had their size set yet, then abort
-      if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {
+      if (visibleFrozenColumns.every(column => columnSizing[column.id] === undefined)) {
         return undefined;
       }
       const offsets = {};
-      visibleFrozenColumns.reduce((offset, columnId) => {
+      visibleFrozenColumns.reduce((offset, column) => {
+        const columnId = column.id;
         offsets[columnId] = offset;
+        if (isInternalColumn$1(columnId)) {
+          // getSize method is used instead of columnSizing state because columnSizing state doesn't have
+          // sizes of internal columns.
+          return offset + column.getSize();
+        }
         return offset + columnSizing[columnId];
       }, 0);
       const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${frozenColumnIndex + 2})) {
@@ -16919,7 +17022,7 @@ function useColumnFreezingStyle(tableId, table) {
                 }`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
                     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%), 1px 0px 0px #DDDDDD;
                 }`];
-      const columnId = visibleFrozenColumns[frozenColumnIndex];
+      const columnId = (_visibleFrozenColumns = visibleFrozenColumns[frozenColumnIndex]) === null || _visibleFrozenColumns === void 0 ? void 0 : _visibleFrozenColumns.id;
       // frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId
       // exists before checking if it is internal.
       //
@@ -17807,7 +17910,7 @@ const Cell$4 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   return newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex && newProps.row.getIsSelected() !== oldProps.row.getIsSelected();
 });
 function createRowSelectionColumn$1(hasDrag, hasExpansion) {
-  const size = hasDrag ? 22 : 40;
+  const size = hasDrag && hasExpansion ? 22 : 40;
   return {
     id: COLUMN_ID$2,
     header: Header$3,
@@ -17817,7 +17920,7 @@ function createRowSelectionColumn$1(hasDrag, hasExpansion) {
       align: 'center',
       className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {
         '!pr-0.5': hasExpansion,
-        '!pr-2.5': !hasExpansion
+        '!pr-3': !hasExpansion
       }),
       enableOrdering: false,
       enableSearch: false,
@@ -17825,7 +17928,7 @@ function createRowSelectionColumn$1(hasDrag, hasExpansion) {
       header: '',
       headerClassName: cn('items-center !justify-end !p-0', {
         '!pr-0.5': hasExpansion,
-        '!pr-2.5': !hasExpansion
+        '!pr-3': !hasExpansion
       })
     },
     // options
@@ -18000,8 +18103,8 @@ function createRowDragColumn(onRowDrag) {
     },
     // options
     enableResizing: false,
-    size: 15,
-    minSize: 15
+    size: 20,
+    minSize: 20
   };
 }
 
@@ -18021,88 +18124,92 @@ function getSortingFn$1(dataType, customFnOrBuiltIn) {
   return 'auto';
 }
 function useConvertChildrenToColumns(props, options, editing) {
-  var _props$actionsForRow;
-  const columnHelper = reactTable$1.createColumnHelper();
-  const columns = [];
-  const defaultColumnSizing = {};
-  const defaultColumnVisibility = {};
-  const defaultSorting = [];
-  React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
-  .forEach(child => {
-    if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
-      var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enableSe, _child$props$enableTr;
-      if (child.props.defaultWidth) {
-        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
-      }
-      if (child.props.defaultHidden && options.enableColumnHiding) {
-        defaultColumnVisibility[child.props.accessor] = false;
-      }
-      if (child.props.sort !== undefined) {
-        defaultSorting.push({
+  // It's important to memoise column definitions, because it prevents columns like "Drag column" to re-render on every state change,
+  // and break dragging at the moment it happens.
+  return React__default.useMemo(() => {
+    var _props$actionsForRow;
+    const columnHelper = reactTable$1.createColumnHelper();
+    const columns = [];
+    const defaultColumnSizing = {};
+    const defaultColumnVisibility = {};
+    const defaultSorting = [];
+    React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
+    .forEach(child => {
+      if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
+        var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enableSe, _child$props$enableTr;
+        if (child.props.defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+        }
+        if (child.props.defaultHidden && options.enableColumnHiding) {
+          defaultColumnVisibility[child.props.accessor] = false;
+        }
+        if (child.props.sort !== undefined) {
+          defaultSorting.push({
+            id: child.props.accessor,
+            desc: child.props.sort === 'desc'
+          });
+        }
+        columns.push({
+          accessorKey: child.props.accessor,
           id: child.props.accessor,
-          desc: child.props.sort === 'desc'
+          header: Header$2,
+          cell: Cell$3,
+          footer: Footer$4,
+          // sizing
+          minSize: MIN_COLUMN_SIZE$1,
+          enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
+          // filtering
+          enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
+          filterFn: 'tacoFilter',
+          // sorting
+          enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
+          sortingFn: getSortingFn$1(child.props.dataType, child.props.sortFn),
+          sortDescFirst: false,
+          sortUndefined: 1,
+          // visibility
+          enableHiding: (_child$props$enableHi = child.props.enableHiding) !== null && _child$props$enableHi !== void 0 ? _child$props$enableHi : true,
+          // custom options
+          meta: {
+            align: child.props.align,
+            className: child.props.className,
+            control: child.props.control,
+            dataType: child.props.dataType,
+            enableOrdering: (_child$props$enableOr = child.props.enableOrdering) !== null && _child$props$enableOr !== void 0 ? _child$props$enableOr : true,
+            enableSearch: (_child$props$enableSe = child.props.enableSearch) !== null && _child$props$enableSe !== void 0 ? _child$props$enableSe : true,
+            enableTruncate: (_child$props$enableTr = child.props.enableTruncate) !== null && _child$props$enableTr !== void 0 ? _child$props$enableTr : false,
+            filters: child.props.filters,
+            footer: child.props.footer,
+            header: child.props.header,
+            headerClassName: child.props.headerClassName,
+            menu: child.props.menu,
+            renderer: child.props.renderer,
+            tooltip: child.props.tooltip
+          }
         });
       }
-      columns.push({
-        accessorKey: child.props.accessor,
-        id: child.props.accessor,
-        header: Header$2,
-        cell: Cell$3,
-        footer: Footer$4,
-        // sizing
-        minSize: MIN_COLUMN_SIZE$1,
-        enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
-        // filtering
-        enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
-        filterFn: 'tacoFilter',
-        // sorting
-        enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
-        sortingFn: getSortingFn$1(child.props.dataType, child.props.sortFn),
-        sortDescFirst: false,
-        sortUndefined: 1,
-        // visibility
-        enableHiding: (_child$props$enableHi = child.props.enableHiding) !== null && _child$props$enableHi !== void 0 ? _child$props$enableHi : true,
-        // custom options
-        meta: {
-          align: child.props.align,
-          className: child.props.className,
-          control: child.props.control,
-          dataType: child.props.dataType,
-          enableOrdering: (_child$props$enableOr = child.props.enableOrdering) !== null && _child$props$enableOr !== void 0 ? _child$props$enableOr : true,
-          enableSearch: (_child$props$enableSe = child.props.enableSearch) !== null && _child$props$enableSe !== void 0 ? _child$props$enableSe : true,
-          enableTruncate: (_child$props$enableTr = child.props.enableTruncate) !== null && _child$props$enableTr !== void 0 ? _child$props$enableTr : false,
-          filters: child.props.filters,
-          footer: child.props.footer,
-          header: child.props.header,
-          headerClassName: child.props.headerClassName,
-          menu: child.props.menu,
-          renderer: child.props.renderer,
-          tooltip: child.props.tooltip
-        }
-      });
+    });
+    if (options.enableRowExpansion && props.expandedRowRenderer) {
+      columns.unshift(columnHelper.display(createRowExpansionColumn$1(props.expandedRowRenderer)));
     }
-  });
-  if (options.enableRowExpansion && props.expandedRowRenderer) {
-    columns.unshift(columnHelper.display(createRowExpansionColumn$1(props.expandedRowRenderer)));
-  }
-  if (options.enableRowSelection) {
-    columns.unshift(columnHelper.display(createRowSelectionColumn$1(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)));
-  }
-  if (options.enableRowDrag && props.onRowDrag) {
-    columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
-  }
-  if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
-    columns.push(columnHelper.display(createRowActionsColumn$1()));
-  }
-  if (editing.isEnabled && editing.isEditing) {
-    columns.push(columnHelper.display(createRowEditingActionsColumn()));
-  }
-  return {
-    columns,
-    defaultColumnSizing,
-    defaultColumnVisibility,
-    defaultSorting
-  };
+    if (options.enableRowSelection) {
+      columns.unshift(columnHelper.display(createRowSelectionColumn$1(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)));
+    }
+    if (options.enableRowDrag && props.onRowDrag) {
+      columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
+    }
+    if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
+      columns.push(columnHelper.display(createRowActionsColumn$1()));
+    }
+    if (editing.isEnabled && editing.isEditing) {
+      columns.push(columnHelper.display(createRowEditingActionsColumn()));
+    }
+    return {
+      columns,
+      defaultColumnSizing,
+      defaultColumnVisibility,
+      defaultSorting
+    };
+  }, [props.children]);
 }
 
 function usePrinting(isEnabled, loadAll, showWarningWhenPrintingLargeDataset = true) {
@@ -18231,6 +18338,9 @@ function useRowActions$1(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LEN
 
 const useLocalStorage = (key, initialValue) => {
   const [state, setState] = React__default.useState(() => {
+    if (!key) {
+      return initialValue;
+    }
     try {
       const localStorageValue = localStorage.getItem(key);
       if (typeof localStorageValue !== 'string') {
@@ -18247,6 +18357,9 @@ const useLocalStorage = (key, initialValue) => {
     }
   });
   React__default.useEffect(() => {
+    if (!key) {
+      return;
+    }
     try {
       const serializedState = JSON.stringify(state);
       localStorage.setItem(key, serializedState);
@@ -18255,7 +18368,11 @@ const useLocalStorage = (key, initialValue) => {
       // localStorage can throw. Also JSON.stringify can throw.
     }
   }, [key, state]);
-  const clear = () => localStorage.removeItem(key);
+  const clear = () => {
+    if (key) {
+      localStorage.removeItem(key);
+    }
+  };
   return [state, setState, clear];
 };
 
@@ -18263,10 +18380,16 @@ function useTacoSettings() {
   return React__default.useContext(TacoContext);
 }
 
-function useSettings(id, defaultSettings = {}, onChangeSettings) {
+function useUniqueTableId(tableId) {
   const tacoSettings = useTacoSettings();
-  const uniqueId = `taco.${tacoSettings.uniqueUserIdentifier}.table3.${id}.settings`;
-  const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, defaultSettings);
+  return `taco.${tacoSettings.uniqueUserIdentifier}.table3.${tableId}.settings`;
+}
+function useSettings(id, defaultSettings = {}, onChangeSettings) {
+  const uniqueId = useUniqueTableId(id);
+  // If the onChangeSettings prop is provided, we intend to handle settings changes externally rather than saving them
+  // to local storage.
+  const key = !onChangeSettings ? uniqueId : undefined;
+  const [persistedSettings, setPersistedSettings] = useLocalStorage(key, defaultSettings);
   return React__default.useMemo(() => {
     if (onChangeSettings) {
       return [defaultSettings, onChangeSettings];
@@ -18393,6 +18516,7 @@ function useTable$2(props) {
       columnOrdering,
       currentRow,
       editing,
+      enableFooter: options.enableFooter,
       fontSize,
       hoverState,
       isUsingServer: !!props.loadPage,
@@ -18659,7 +18783,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
     }
     setIsHovered(false);
   };
-  const [, dropTargetProps] = useDropTarget(event => onDrop === null || onDrop === void 0 ? void 0 : onDrop(event, row.original));
+  const [isDraggedOver, dropTargetProps] = useDropTarget(event => onDrop === null || onDrop === void 0 ? void 0 : onDrop(event, row.original));
   const className = cn('group/row contents',
   // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state
   // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing
@@ -18669,6 +18793,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, onDrop ? dropTargetProps : undefined, {
     className: className,
     "data-row-index": index,
+    "data-dragged-over": isDraggedOver,
     onClick: handleClick,
     onClickCapture: handleClickCapture,
     onMouseEnter: handleMouseEnter,
@@ -19853,7 +19978,9 @@ function PrintIFrame({
     enableRowDrag: false,
     enableRowDrop: false,
     enableRowSelectionSingle: false,
-    preset: undefined
+    preset: undefined,
+    // The presence of the onChangeSettings prop ensures that settings won't be stored in local storage.
+    onChangeSettings: () => undefined
   };
   // -top-60 -left-60 styles make sure that iframe is added outside of the viewport
   return /*#__PURE__*/React__default.createElement("iframe", {
@@ -19929,6 +20056,7 @@ function PrintButton(props) {
   const {
     printWarningDialogVisibility
   } = tableMeta.printing;
+  const printTableId = `${tableProps.id}_print`;
   const defaultSettings = React__default.useMemo(() => ({
     columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex,
     columnOrder: state.columnOrder,
@@ -19945,7 +20073,7 @@ function PrintButton(props) {
   const iframeTableProps = {
     ...tableProps,
     defaultSettings,
-    id: `${tableProps.id}_print`
+    id: printTableId
   };
   useGlobalKeyDown({
     key: 'p',
@@ -20478,6 +20606,8 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-taco": "table2-body",
     role: "rowgroup"
   }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
+    className: "border-grey-300 col-span-full -mt-px border-t"
+  }), tableMeta.enableFooter ? /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
     role: "rowgroup"
@@ -20490,7 +20620,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }, reactTable$1.flexRender(footer.column.columnDef.footer, footer.getContext()))))), length ? /*#__PURE__*/React__default.createElement(Summary$1, {
     length: length,
     table: table
-  }) : null)) : /*#__PURE__*/React__default.createElement("div", {
+  }) : null) : null) : /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-full min-h-[theme(spacing.8)]"
   }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null)));
 });