@economic/taco 2.29.3 → 2.30.1

package/dist/taco.cjs.development.js

@@ -4122,6 +4122,9 @@ function isElementInteractive(element) {
   }
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
+function isElementInsideTable3OrReport(element) {
+  return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
+}
 
 function isPressingMetaKey(event) {
   return isMacOs() ? event.metaKey : event.ctrlKey;
@@ -5823,9 +5826,7 @@ const useCombobox = ({
     }
   };
   const handleInputKeyDown = event => {
-    var _inputRef$current;
     event.persist();
-    const insideTheTable = !!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.closest('table, [role="rowgroup"]'));
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -5847,7 +5848,7 @@ const useCombobox = ({
           }
         case 'Enter':
           {
-            if (insideTheTable) {
+            if (isElementInsideTable3OrReport(event.currentTarget)) {
               event.preventDefault();
               if (inline && !open) {
                 setOpen(true);
@@ -5865,7 +5866,7 @@ const useCombobox = ({
           if (open) {
             event.preventDefault();
           } else {
-            if (!inline && buttonRef.current && !insideTheTable) {
+            if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {
               buttonRef.current.click();
             }
           }
@@ -5885,7 +5886,7 @@ const useCombobox = ({
         listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
       }
       if (inline && !open) {
-        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
+        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !isElementInsideTable3OrReport(event.currentTarget)) {
           event.preventDefault();
           const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
           setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
@@ -8194,12 +8195,13 @@ const Link$1 = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
 const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();
   const internalRef = useMergedRef(ref);
-  const preventArrowDownShortcut = event => {
-    var _internalRef$current;
-    const isRenderedInTable = !!((_internalRef$current = internalRef.current) !== null && _internalRef$current !== void 0 && _internalRef$current.closest('tbody'));
-    if (isRenderedInTable && event.key === 'ArrowDown') {
-      var _internalRef$current2, _internalRef$current3;
-      internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : (_internalRef$current3 = _internalRef$current2.parentNode) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.dispatchEvent(createCustomKeyboardEvent(event));
+  const handleKeyDown = event => {
+    if (event.key === 'ArrowDown') {
+      if (isElementInsideTable3OrReport(event.currentTarget)) {
+        var _event$currentTarget$;
+        event.preventDefault();
+        (_event$currentTarget$ = event.currentTarget.parentNode) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.dispatchEvent(createCustomKeyboardEvent(event));
+      }
     }
   };
   React.useEffect(() => {
@@ -8210,7 +8212,7 @@ const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref)
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
     ref: internalRef,
-    onKeyDown: preventArrowDownShortcut
+    onKeyDown: handleKeyDown
   }));
 });
 
@@ -9924,6 +9926,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       id,
       accessorKey,
       // To avoid errors caused by undefined row data values, we pass accessorFn as a preventive measure
+      // accessorKey can be dot notated strings, so we use lodash.get to access deeply nested children
       accessorFn: row => get(row, accessorKey),
       header: header,
       // features
@@ -9951,10 +9954,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       column.cell = info => renderer(info.getValue(), info.row.original);
     }
     if (typeof footer === 'function') {
-      column.footer = info => footer(info.table.getRowModel().rows.flatMap(row => {
-        var _row$original;
-        return ((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[id]) !== undefined ? [row.original[id]] : [];
-      }));
+      column.footer = info => footer(info.table.getRowModel().rows.flatMap(row => row.original !== undefined ? row.original : []));
     }
     // config - filtering
     if (enableColumnFilter) {
@@ -10420,11 +10420,11 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
   const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(undefined);
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
-  const move = (direction, length, scrollToIndex) => setRowActiveIndex(currentIndex => {
-    const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
-    setTimeout(() => scrollToIndex(nextIndex), 1);
-    return nextIndex;
-  });
+  const move = (direction, length, scrollToIndex) => {
+    const nextIndex = rowActiveIndex !== undefined ? getNextIndex(direction, rowActiveIndex, length) : 0;
+    scrollToIndex(nextIndex);
+    setTimeout(() => setRowActiveIndex(nextIndex), 50);
+  };
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
     if (!isEnabled || event.defaultPrevented) {
       return;
@@ -10436,8 +10436,8 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
       event.preventDefault();
       if (event.ctrlKey || event.metaKey) {
         const newIndex = 0;
-        setRowActiveIndex(newIndex);
         scrollToIndex(newIndex);
+        setRowActiveIndex(newIndex);
       } else {
         move(-1, length, scrollToIndex);
       }
@@ -10446,14 +10446,14 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
       event.preventDefault();
       if (event.ctrlKey || event.metaKey) {
         const newIndex = length - 1;
-        setRowActiveIndex(newIndex);
         scrollToIndex(newIndex);
+        setRowActiveIndex(newIndex);
       } else {
         move(+1, length, scrollToIndex);
       }
       return;
     }
-  }, [isEnabled]);
+  }, [isEnabled, rowActiveIndex]);
   const onFocus = React__default.useCallback((event, length, scrollToIndex) => {
     if (!isEnabled || event.isDefaultPrevented()) {
       return;
@@ -10640,7 +10640,7 @@ function _finallyRethrows(body, finalizer) {
 }
 
 const DEFAULT_PAGE_SIZE = 100;
-function useTableDataLoader(fetch, fetchAll, options = {
+function useTableDataLoader(fetchPage, fetchAll, options = {
   pageSize: DEFAULT_PAGE_SIZE
 }) {
   const {
@@ -10656,11 +10656,11 @@ function useTableDataLoader(fetch, fetchAll, options = {
   const _lastUsedFilters = React__default.useRef([]);
   const _lastUsedSearch = React__default.useRef();
   const _forceReset = React__default.useRef(false);
-  const loadPage = function (pageIndex, sorting, filters, search) {
+  const loadPage = function (pageIndex, sorting, filters) {
     try {
       let reset = false;
       // sorting or filters changed, reset everything
-      if (_forceReset.current || search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+      if (_forceReset.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
         _pendingPageRequests.current = {};
         // nuke the dataset so that we "start again" after sorting
         reset = true;
@@ -10676,11 +10676,9 @@ function useTableDataLoader(fetch, fetchAll, options = {
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
       _lastUsedFilters.current = filters;
-      // set the search so we can track if it changed between loads
-      _lastUsedSearch.current = search;
       const _temp = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(fetch(pageIndex, pageSize, sorting, filters, search)).then(function (response) {
+          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters)).then(function (response) {
             // update state, here we do some "magic" to support "load in place"
             setData(currentData => {
               let nextData;
@@ -10709,10 +10707,14 @@ function useTableDataLoader(fetch, fetchAll, options = {
       return Promise.reject(e);
     }
   };
-  const loadAll = function (sorting, filters, search) {
+  const loadAll = function (sorting, filters) {
     try {
+      // set the sorting so we can track if it changed between loads
+      _lastUsedSorting.current = sorting;
+      // set the filters so we can track if it changed between loads
+      _lastUsedFilters.current = filters;
       const _temp2 = _catch(function () {
-        return Promise.resolve(fetchAll(sorting, filters, search)).then(function (response) {
+        return Promise.resolve(fetchAll(sorting, filters)).then(function (response) {
           length.current = response.length;
           setData(() => {
             let nextData;
@@ -10734,22 +10736,52 @@ function useTableDataLoader(fetch, fetchAll, options = {
   const invalidate = function () {
     try {
       _forceReset.current = true;
-      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current);
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  // we reset the page to 0 whenever sorting, filtering or search changes
+  // search works client side - it fetches all then works client side - so these handlers are a little "weird"
+  // if a search is currently "active", we need to re load all because
   const handleSort = function (sorting) {
     try {
-      return loadPage(0, sorting, _lastUsedFilters.current, _lastUsedSearch.current);
+      // set the sorting so we can track if it changed between loads
+      _lastUsedSorting.current = sorting;
+      if (_lastUsedSearch.current) {
+        // we're searching, which means we need to refetch all with the correct sorting applied
+        loadAll(sorting, _lastUsedFilters.current);
+      } else {
+        // reset the page to 0 whenever sorting
+        loadPage(0, sorting, _lastUsedFilters.current);
+      }
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
   };
   const handleFilter = function (filters) {
     try {
-      return loadPage(0, _lastUsedSorting.current, filters, _lastUsedSearch.current);
+      // set the filters so we can track if it changed between loads
+      _lastUsedFilters.current = filters;
+      if (_lastUsedSearch.current) {
+        // we're searching, which means we need to refetch all with the correct sorting applied
+        loadAll(_lastUsedSorting.current, filters);
+      } else {
+        // reset the page to 0 whenever sorting
+        loadPage(0, _lastUsedSorting.current, filters);
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleSearch = function (search) {
+    try {
+      // set the search so we can track if it changed between loads
+      _lastUsedSearch.current = search || undefined;
+      // search works client side, and focusing the search field triggers a load of all so we don't actually
+      // want to load anything when search gets changed, we just store the value for other handlers
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -10760,6 +10792,7 @@ function useTableDataLoader(fetch, fetchAll, options = {
     loadAll,
     loadPage,
     onChangeFilter: handleFilter,
+    onChangeSearch: handleSearch,
     onChangeSort: handleSort,
     pageSize
   }, invalidate];
@@ -11050,14 +11083,18 @@ function resetHighlightedColumnIndexes(value, table) {
   return firstRowIndex;
 }
 
-function useTableSearchListener(table) {
+function useTableSearchListener(table, onChangeSearch) {
   const meta = table.options.meta;
   // recalculates highlighted indexes whenever something important changes
   React__default.useEffect(() => {
     if (meta.search.isEnabled) {
-      resetHighlightedColumnIndexes(table.getState().globalFilter, table);
+      const query = table.getState().globalFilter;
+      resetHighlightedColumnIndexes(query, table);
+      if (typeof onChangeSearch === 'function') {
+        onChangeSearch(query);
+      }
     }
-  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
+  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), onChangeSearch]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -11143,11 +11180,10 @@ function useTableSortingListener(table, onSort) {
 function useTableServerLoadingListener(table, loadPage) {
   const sorting = table.getState().sorting;
   const columnFilters = table.getState().columnFilters;
-  const search = table.getState().globalFilter;
   // trigger load of the first page on mount
   React__default.useEffect(() => {
     if (loadPage) {
-      loadPage(0, sorting, columnFilters, search);
+      loadPage(0, sorting, columnFilters);
     }
   }, []);
 }
@@ -11248,7 +11284,7 @@ function useTableManager(props, meta, internalColumns) {
   useTableFontSizeListener(instance);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
-  useTableSearchListener(instance);
+  useTableSearchListener(instance, props.onChangeSearch);
   useTableServerLoadingListener(instance, server.loadPage);
   useTableSettingsListener(instance, setSettings);
   useTableShortcutsListener(instance, props.shortcuts);
@@ -11509,7 +11545,6 @@ const ROW_HEIGHT_ESTIMATES = {
   tall: 49,
   'extra-tall': 57
 };
-const HEADER_FOOTER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border
 
 function SkeletonRow(props) {
   const {
@@ -11547,7 +11582,7 @@ function RowWithServerLoading(props) {
   React__default.useEffect(() => {
     if (inView) {
       var _tableMeta$server$loa, _tableMeta$server;
-      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters, table.getState().globalFilter);
+      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters);
     }
   }, [inView]);
   const groupedCellCount = (_table$getState$group = (_table$getState = table.getState()) === null || _table$getState === void 0 ? void 0 : _table$getState.grouping.length) !== null && _table$getState$group !== void 0 ? _table$getState$group : 0;
@@ -11599,15 +11634,11 @@ function Row(props) {
   })));
 }
 
-const TABLE_SCROLL_PADDING_BOTTOM = 36;
-const TABLE_PADDING_BOTTOM = 0;
 function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   var _table$getState$group, _ref, _virtualItems$padding, _virtualItems$padding2, _ref2, _virtualItems;
   const tableMeta = table.options.meta;
   const rows = table.getRowModel().rows;
-  const HEADER_OFFSET_TOTAL = HEADER_FOOTER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
-  const isTableGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
-  const FOOTER_OFFSET_TOTAL = tableMeta.footer.isEnabled ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : 0;
+  const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   // expanded rows
   const {
     createRowMeasurer,
@@ -11615,16 +11646,25 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   } = useRowHeightVirtualisation(table);
   // row groups
   const rangeExtractor = useRowGroupVirtualisation(table);
+  // account for thead and tfoot in the scroll area - both are always medium row height
+  const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
+  // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains
+  // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment
+  const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);
+  const scrollMargin = isTableRowGrouped ? 0 : scrollPaddingStart;
   const virtualiser = reactVirtual.useVirtualizer({
     count: rows.length,
     estimateSize,
     getScrollElement: () => tableRef.current,
     overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
     rangeExtractor,
-    scrollPaddingStart: isTableGrouped ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : undefined,
-    scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,
-    paddingEnd: TABLE_PADDING_BOTTOM
+    // correctly sets top and bottom spacing for the scroll container - very sensitive, don't change
+    scrollMargin,
+    // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
+    scrollPaddingStart,
+    scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd
   });
+  const totalSize = virtualiser.getTotalSize();
   const virtualItems = virtualiser.getVirtualItems();
   const scrollToIndex = React__default.useCallback((index, options = {
     align: 'auto',
@@ -11637,29 +11677,18 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
     if (tableRef.current) {
       if (index === 0) {
         virtualiser.scrollToOffset(0, notSmooth);
-      } else if (index >= virtualItems.length - 1) {
-        // scrolling to the last row isn't easy when rows have dynamic height
-        // because you don't know all the heights until they render...
-        // so when you skip to the last you don't know if "the end" is actually the end
-        virtualiser.scrollToIndex(index, notSmooth);
-        // https://github.com/TanStack/virtual/issues/216
-        setTimeout(() => {
-          virtualiser.scrollToIndex(index, notSmooth);
-          setTimeout(() => {
-            virtualiser.scrollToIndex(index, notSmooth);
-          }, 150);
-        }, 150);
+      } else if (index === rows.length - 1) {
+        // sometimes the last row doesn't fully show, so we just force scroll to the bottom
+        tableRef.current.scrollTop = tableRef.current.scrollHeight;
       } else {
         virtualiser.scrollToIndex(index, options);
       }
     }
-  }, [virtualItems.length, tableRef.current]);
+  }, [virtualItems.length, tableRef.current, totalSize, rows.length]);
   // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
-  const paddingStartIndex = isTableGrouped && rows.length > 1 ? 1 : 0;
+  const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;
   // styling for offsetting rows - this "is" the virtualisation
-  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
-  // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
-  Math.max(0, (_ref = ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - virtualiser.options.scrollMargin - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size)) !== null && _ref !== void 0 ? _ref : 0), Math.max(0, (_ref2 = virtualiser.getTotalSize() - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0];
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, (_ref = ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) - scrollMargin) !== null && _ref !== void 0 ? _ref : 0), Math.max(0, (_ref2 = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
     if (defaultRowActiveIndex) {
@@ -11674,7 +11703,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   let content = null;
   if (rows.length) {
     style = {
-      height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL + FOOTER_OFFSET_TOTAL}px`,
+      height: `${totalSize - scrollMargin}px`,
       paddingBottom,
       paddingTop
     };
@@ -12024,7 +12053,7 @@ function Header$4(context) {
         const _temp = function () {
           if (tableMeta.server.loadAllIfNeeded) {
             // don't pass the search query because we need all data - not filtered data
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
           }
         }();
         // load all data if that is possible
@@ -12098,7 +12127,7 @@ function Cell$3(context) {
                 const _temp3 = function () {
                   if (tableMeta.server.loadAllIfNeeded && selectedRows.some(row => row.original === undefined)) {
                     // don't pass the search query because we need all data - not filtered data
-                    return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+                    return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
                   }
                 }();
                 return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
@@ -13074,6 +13103,7 @@ function useAugmentedFocusManager() {
 function Body(props) {
   const {
     enableHorizontalArrowKeyNavigation = false,
+    scrollToIndex,
     table,
     ...attributes
   } = props;
@@ -13103,16 +13133,24 @@ function Body(props) {
             // there are no previous elements to focus, go up a row or go outside the table
             // but only if there are actually any focusable elements in the row
             event.preventDefault();
-            tableMeta.rowActive.setRowActiveIndex(tableMeta.rowActive.rowActiveIndex - 1);
-            requestAnimationFrame(() => focusManager.focusLast());
+            const prevIndex = tableMeta.rowActive.rowActiveIndex - 1;
+            tableMeta.rowActive.setRowActiveIndex(prevIndex);
+            requestAnimationFrame(() => {
+              focusManager.focusLast();
+              scrollToIndex(prevIndex);
+            });
           }
         } else {
           if (!isLastRow) {
             // there are no next elements to focus, go down a row or go outside the table
             // but only if there are actually any focusable elements in the row
             event.preventDefault();
-            tableMeta.rowActive.setRowActiveIndex(tableMeta.rowActive.rowActiveIndex + 1);
-            requestAnimationFrame(() => focusManager.focusFirst());
+            const nextIndex = tableMeta.rowActive.rowActiveIndex + 1;
+            tableMeta.rowActive.setRowActiveIndex(nextIndex);
+            requestAnimationFrame(() => {
+              focusManager.focusFirst();
+              scrollToIndex(nextIndex);
+            });
           }
         }
       }
@@ -13440,7 +13478,7 @@ function Search$1(props) {
       const _temp = function () {
         if (tableMeta.server.loadAllIfNeeded) {
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -15148,6 +15186,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
+    } else if (isElementInsideTable3OrReport(event.currentTarget)) {
+      return;
     } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
     }
@@ -15488,7 +15528,7 @@ function Print$1(props) {
       const _temp2 = function () {
         if (tableMeta.server.isEnabled && tableMeta.server.loadAllIfNeeded) {
           const _temp = _catch(function () {
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
           }, function (error) {
             const errorMessage = `${texts.table.print.error}: ${error}`;
             console.error(errorMessage);
@@ -16170,6 +16210,7 @@ function TableGrid(props) {
   }))))))), table.instance.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
+    scrollToIndex: table.renderer.scrollToIndex,
     style: table.renderer.style
   }, table.renderer.rows), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance