@economic/taco 2.16.0 → 2.17.0

package/dist/taco.cjs.development.js

@@ -36,8 +36,8 @@ var get = _interopDefault(require('lodash/get'));
 var compact = _interopDefault(require('lodash/compact'));
 var pullAt = _interopDefault(require('lodash/pullAt'));
 var reactTable$1 = require('@tanstack/react-table');
-var _ = _interopDefault(require('lodash'));
 var ReactDOM = _interopDefault(require('react-dom'));
+var _ = _interopDefault(require('lodash'));
 var reactVirtual = require('react-virtual');
 var core = require('@dnd-kit/core');
 var SortablePrimitive = require('@dnd-kit/sortable');
@@ -3627,14 +3627,14 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
-  return Component ? /*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
+  return Component ? ( /*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "icon",
     "data-icon-name": name,
     focusable: "false",
     ref: ref,
     role: "img"
-  })) : null;
+  }))) : null;
 });
 
 const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
@@ -4571,13 +4571,13 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
     className: className,
     "data-taco": "banner",
     ref: ref
-  }, getBannerIcon(state), children, onClose ? /*#__PURE__*/React.createElement(IconButton, {
+  }, getBannerIcon(state), children, onClose ? ( /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": texts.banner.close,
     className: "ml-auto -mr-2 self-start",
     icon: "close",
     appearance: "discrete",
     onClick: onClose
-  }) : null);
+  })) : null);
 });
 
 const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
@@ -4661,18 +4661,18 @@ const Navbar = /*#__PURE__*/React.memo(({
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map((month, i) => /*#__PURE__*/React.createElement("option", {
+  }, months.map((month, i) => ( /*#__PURE__*/React.createElement("option", {
     key: month,
     value: i
-  }, month))), /*#__PURE__*/React.createElement("select", {
+  }, month)))), /*#__PURE__*/React.createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(year => /*#__PURE__*/React.createElement("option", {
+  }, years.map(year => ( /*#__PURE__*/React.createElement("option", {
     key: year,
     value: year
-  }, String(year))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+  }, String(year)))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
     title: actions.previousMonth
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "discrete",
@@ -5278,17 +5278,17 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
   };
   return /*#__PURE__*/React.createElement("ul", Object.assign({}, list, {
     "data-taco": "scrollable-list"
-  }), loading ? /*#__PURE__*/React.createElement("li", {
+  }), loading ? ( /*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Spinner, {
     delay: 0
-  })), /*#__PURE__*/React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
+  })), /*#__PURE__*/React.createElement("span", null, texts.listbox.loading))) : options.length ? options.map(({
     children,
     icon,
     ...optionProps
-  }) => /*#__PURE__*/React.createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/React.createElement("span", {
+  }) => ( /*#__PURE__*/React.createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/React.createElement("span", {
     className: "flex-grow truncate text-left"
-  }, children), multiselect && /*#__PURE__*/React.createElement(Checkbox
+  }, children), multiselect && ( /*#__PURE__*/React.createElement(Checkbox
   // In multiselect variant, this checkbox only acts as visual representation of item being selected,
   // so need to be taken out of screen reader scope.
   , {
@@ -5297,9 +5297,9 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
     checked: optionProps['aria-selected'],
     onChange: () => null,
     className: "pointer-events-none ml-2 self-center p-px"
-  }))) : /*#__PURE__*/React.createElement("li", {
+  }))))) : ( /*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
-  }, /*#__PURE__*/React.createElement("span", null, texts.listbox.empty)));
+  }, /*#__PURE__*/React.createElement("span", null, texts.listbox.empty))));
 });
 
 // returns a custom event compatible with all browsers
@@ -5577,7 +5577,8 @@ const useCombobox = ({
       event.preventDefault();
       return;
     }
-    if (onChange && event.target.value !== value) {
+    // event.target.value is always a string so it is important to cast value to a string before checking the equality
+    if (onChange && event.target.value !== String(value)) {
       const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
@@ -5756,7 +5757,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.inline ? /*#__PURE__*/React.createElement(IconButton
+    button: props.inline ? ( /*#__PURE__*/React.createElement(IconButton
     // In case of inline combobox, this icon button acts only as visual chevron representation,
     // so should be taken out of screen reader scope.
     , {
@@ -5770,7 +5771,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
         (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
       },
       tabIndex: -1
-    }) : dialog ? /*#__PURE__*/React.createElement(IconButton, {
+    })) : dialog ? ( /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.combobox.tooltip,
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
@@ -5784,7 +5785,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
       ref: button.ref,
       tabIndex: -1,
       tooltip: texts.combobox.tooltip
-    }) : undefined
+    })) : undefined
   })))), /*#__PURE__*/React.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
     align: "start",
     onOpenAutoFocus: event => {
@@ -5854,7 +5855,6 @@ const parseFromCustomString = (date = '', mask = 'dd.mm.yy') => {
   Object.is(day, NaN) ? currentDate.getDate() : day, /* hours */12, /* minutes */0 // set to midday to avoid UTC offset causing dates to be mismatched server side
   );
 };
-
 const parseFromISOString = date => {
   const tempDate = new Date(date);
   return dateFns.isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;
@@ -6025,10 +6025,10 @@ const Content$3 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, r
     className: "text-white"
   })));
 });
-const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
+const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => ( /*#__PURE__*/React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
   ref: ref,
   asChild: true
-})));
+}))));
 const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
   const {
     anchor,
@@ -6086,20 +6086,20 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      popover: props => /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
+      popover: props => ( /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
         close
-      }) => /*#__PURE__*/React.createElement("div", {
+      }) => ( /*#__PURE__*/React.createElement("div", {
         className: "-m-3 flex"
       }, /*#__PURE__*/React.createElement(Calendar$1, Object.assign({}, calendar, {
         onChange: (date, event) => {
           calendar.onChange(date, event);
           close();
         }
-      })), shortcuts && /*#__PURE__*/React.createElement("div", {
+      })), shortcuts && ( /*#__PURE__*/React.createElement("div", {
         className: "border-grey-300 flex flex-col border-l"
       }, /*#__PURE__*/React.createElement("span", {
         className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
-      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/React.createElement("ul", null, shortcuts.map(shortcut => /*#__PURE__*/React.createElement("li", {
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/React.createElement("ul", null, shortcuts.map(shortcut => ( /*#__PURE__*/React.createElement("li", {
         key: shortcut.text
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
@@ -6109,7 +6109,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
           shortcut.onClick(event);
           close();
         }
-      }, shortcut.text)))), handleReset && /*#__PURE__*/React.createElement("button", {
+      }, shortcut.text))))), handleReset && ( /*#__PURE__*/React.createElement("button", {
         type: "button",
         className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
         onClick: event => {
@@ -6117,7 +6117,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
           handleReset(event);
           close();
         }
-      }, texts.datepicker.clear))))),
+      }, texts.datepicker.clear))))))))),
       tooltip: texts.datepicker.calendar
     })
   })));
@@ -6293,13 +6293,13 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   }), /*#__PURE__*/React.createElement("div", {
     className: containerClassName,
     "data-taco": "dialog"
-  }, output, dialog.draggable && /*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
+  }, output, dialog.draggable && ( /*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
     role: "button",
     draggable: true,
     "aria-grabbed": dragging,
     "aria-label": texts.dialog.drag,
     className: "yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center"
-  })), dialog.showCloseButton ? /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
+  }))), dialog.showCloseButton ? ( /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     onClick: dialog.onClose,
     asChild: true
   }, /*#__PURE__*/React.createElement(IconButton, {
@@ -6307,7 +6307,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     "aria-label": texts.dialog.close,
     className: "absolute top-0 right-0 mt-2 mr-2",
     icon: "close"
-  })) : null), dialog.elements.drawer, dialog.elements.extra))));
+  }))) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
@@ -6633,11 +6633,11 @@ const Portal = props => {
   }
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Portal, Object.assign({}, otherProps, {
     container: outlet !== null && outlet !== void 0 ? outlet : undefined
-  }), variant === 'overlay' ? /*#__PURE__*/React__default.createElement(DialogPrimitive.Overlay, {
+  }), variant === 'overlay' ? ( /*#__PURE__*/React__default.createElement(DialogPrimitive.Overlay, {
     forceMount: true
   }, /*#__PURE__*/React__default.createElement(Backdrop, {
     className: backdropClassNames
-  })) : null, children);
+  }))) : null, children);
 };
 const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(function EmbeddedDrawerContent(props, ref) {
   const {
@@ -6758,19 +6758,19 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
   }), dragging ? /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "resize-hit-area",
     className: "fixed bottom-0 left-0 right-0 top-0"
-  }) : null), showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  }) : null), showCloseButton ? ( /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     "aria-label": texts.drawer.close,
     className: "absolute right-0 top-0 mr-2 mt-4",
     icon: "close"
-  })) : null);
+  }))) : null);
   const styleProp = {
     ...style,
     ...{
       width: resizedWidth
     }
   };
-  return focusTrap ? /*#__PURE__*/React__default.createElement(DialogPrimitive.Content, Object.assign({
+  return focusTrap ? ( /*#__PURE__*/React__default.createElement(DialogPrimitive.Content, Object.assign({
     forceMount: true
   }, otherProps, {
     className: contentClassName,
@@ -6779,12 +6779,12 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     onCloseAutoFocus: handleCloseAutoFocus,
     ref: ref,
     style: styleProp
-  }), content) : /*#__PURE__*/React__default.createElement(UntrappedFocusDrawerContent, {
+  }), content)) : ( /*#__PURE__*/React__default.createElement(UntrappedFocusDrawerContent, {
     onEscape: handleEscapeKeyDown,
     className: contentClassName,
     style: styleProp,
     ref: ref
-  }, content);
+  }, content));
 });
 const Content$5 = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
   const {
@@ -6947,14 +6947,14 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     className: className,
     "data-taco": "label",
     ref: ref
-  }), children, message && /*#__PURE__*/React.createElement(Tooltip, {
+  }), children, message && ( /*#__PURE__*/React.createElement(Tooltip, {
     title: message,
     hide: !isMessageTrucated
   }, /*#__PURE__*/React.createElement("span", {
     className: messageClassName,
     ref: messageRef,
     role: invalid ? 'alert' : undefined
-  }, message)));
+  }, message))));
 });
 
 const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
@@ -7614,20 +7614,20 @@ const Shortcut = ({
   const texts = getShortcutText(keys);
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
     className: className
-  }), texts.map(key => /*#__PURE__*/React__default.createElement("kbd", {
+  }), texts.map(key => ( /*#__PURE__*/React__default.createElement("kbd", {
     key: key,
     className: "font-display text-grey-700 [[data-taco=tooltip]_&]:bg-grey-300/[0.25] rounded-sm bg-black/[0.09] px-1 text-center font-bold [[data-taco=tooltip]_&]:text-white"
-  }, key)));
+  }, key))));
 };
 
 const Icon$1 = ({
   name
-}) => /*#__PURE__*/React.createElement("span", {
+}) => ( /*#__PURE__*/React.createElement("span", {
   className: "absolute left-0 ml-1"
 }, /*#__PURE__*/React.createElement(Icon, {
   className: "-ml-px -mt-px !h-5 !w-5",
   name: name
-}));
+})));
 const useItemStyling = ({
   disabled,
   indented,
@@ -7699,12 +7699,12 @@ const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
     ref: ref
   }), icon ? /*#__PURE__*/React.createElement(Icon$1, {
     name: icon
-  }) : null, props.children, shortcut ? /*#__PURE__*/React.createElement("span", {
+  }) : null, props.children, shortcut ? ( /*#__PURE__*/React.createElement("span", {
     className: "ml-auto pl-5"
   }, /*#__PURE__*/React.createElement(Shortcut, {
     keys: shortcut,
     className: "text-grey-700"
-  })) : null);
+  }))) : null);
   if (typeof dialog === 'function') {
     button = dialog({
       trigger: button,
@@ -8085,12 +8085,12 @@ const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGr
   }, typeof title === 'function' ? title(expanded) : title), /*#__PURE__*/React__default.createElement("ul", {
     role: "group",
     className: listClassName
-  }, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => /*#__PURE__*/React__default.createElement("li", {
+  }, React__default.Children.toArray(children).filter(item => !!item).map((item, i) => ( /*#__PURE__*/React__default.createElement("li", {
     key: i,
     role: "none"
   }, /*#__PURE__*/React__default.cloneElement(item, {
     role: 'treeitem'
-  })))));
+  }))))));
 });
 const Treeview = /*#__PURE__*/React__default.forwardRef(function Treeview(props, ref) {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
@@ -8222,10 +8222,10 @@ const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref)
   return /*#__PURE__*/React__default.createElement(Treeview, Object.assign({}, props, {
     className: cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
-  }), scrollableAreas.map((area, i) => Array.isArray(area) ? /*#__PURE__*/React__default.createElement("div", {
+  }), scrollableAreas.map((area, i) => Array.isArray(area) ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
     key: i
-  }, area) : area));
+  }, area)) : area));
 });
 Menu$2.Group = MenuGroup;
 const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
@@ -8349,7 +8349,7 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(button, {
     className: cn('sticky right-0 order-[99]', button.props.className),
     'data-observer-ignore': true,
-    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem))),
+    menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
     ref: buttonRefCallback
   }) : null);
 });
@@ -8382,14 +8382,14 @@ const PageNumbers = ({
   const {
     texts
   } = useLocalization();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, range.map(pageNumber => /*#__PURE__*/React.createElement(Button$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, range.map(pageNumber => ( /*#__PURE__*/React.createElement(Button$1, {
     appearance: pageNumber === currentPageIndex + 1 ? 'primary' : 'default',
     "aria-current": pageNumber === currentPageIndex + 1 ? 'page' : undefined,
     key: pageNumber,
     onClick: () => handleClick(pageNumber - 1),
     "aria-label": texts.pagination.actions.pageX.replace('[X]', String(pageNumber)),
     tooltip: texts.pagination.actions.pageX.replace('[X]', String(pageNumber))
-  }, pageNumber)));
+  }, pageNumber))));
 };
 
 const useSelect = ({
@@ -8500,9 +8500,9 @@ const useSelect = ({
     } else {
       const item = findByValue(flattenedData, value);
       if (item) {
-        text = item.icon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(item.icon, {
+        text = item.icon ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(item.icon, {
           className: cn(item.icon.props.className, 'mr-1 -mt-px')
-        }), item.text) : item.text;
+        }), item.text)) : item.text;
       }
     }
   }
@@ -8748,7 +8748,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
     className: className,
     "data-taco": "pagination",
     ref: ref
-  }), showPageSize && /*#__PURE__*/React.createElement("span", {
+  }), showPageSize && ( /*#__PURE__*/React.createElement("span", {
     className: "mr-4"
   }, getShowingLabel(length, pageIndex, pageSize, texts), /*#__PURE__*/React.createElement(Select, {
     "aria-label": texts.pagination.pageSize,
@@ -8762,7 +8762,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
       setPageSize(Number(event.target.value));
     },
     value: pageSize
-  })), showPageControls && /*#__PURE__*/React.createElement(Group, {
+  }))), showPageControls && ( /*#__PURE__*/React.createElement(Group, {
     as: "nav",
     "aria-label": texts.pagination.label
   }, /*#__PURE__*/React.createElement(IconButton, {
@@ -8779,11 +8779,11 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
     onClick: () => setPageIndex(pageIndex - 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
-  }), showPageNumbers && pageCount > 0 && /*#__PURE__*/React.createElement(PageNumbers, {
+  }), showPageNumbers && pageCount > 0 && ( /*#__PURE__*/React.createElement(PageNumbers, {
     pageCount: pageCount,
     currentPageIndex: pageIndex,
     onClick: setPageIndex
-  }), /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-right",
@@ -8797,7 +8797,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
     onClick: () => setPageIndex(pageCount - 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
-  })));
+  }))));
 });
 
 const Progress = ({
@@ -9045,7 +9045,7 @@ const ToastProvider = ({
     role: "log"
   }, /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
     initial: false
-  }, toasts.map(toast => /*#__PURE__*/React.createElement(framerMotion.motion.div, {
+  }, toasts.map(toast => ( /*#__PURE__*/React.createElement(framerMotion.motion.div, {
     key: toast.id,
     transition: {
       type: 'spring',
@@ -9071,7 +9071,7 @@ const ToastProvider = ({
     }
   }, /*#__PURE__*/React.createElement(Toast, Object.assign({}, toast, {
     onClose: () => handleClose(toast.id)
-  })))))));
+  }))))))));
 };
 const useToast = () => React.useContext(ToastContext);
 
@@ -9128,7 +9128,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
     placeholder: texts.searchInput.placeholder
   }, props, {
     onKeyDown: handleKeyDown,
-    postfix: /*#__PURE__*/React.createElement(React.Fragment, null, props.disabled || props.readOnly || !props.value ? null : /*#__PURE__*/React.createElement(IconButton, {
+    postfix: /*#__PURE__*/React.createElement(React.Fragment, null, props.disabled || props.readOnly || !props.value ? null : ( /*#__PURE__*/React.createElement(IconButton, {
       "aria-hidden": true,
       "aria-label": texts.searchInput.clear,
       className: "group-peer-focus:visible group-peer-hover:visible !text-grey-700 invisible mr-0.5 !h-5 !min-h-[theme(spacing.4)] !w-5 !min-w-[theme(spacing.4)] text-xs hover:visible group-hover:visible",
@@ -9137,7 +9137,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
       rounded: true,
       tabIndex: -1,
       tooltip: texts.searchInput.clear
-    }), /*#__PURE__*/React.createElement(IconButton, {
+    })), /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.searchInput.button,
       icon: "search",
       className: "group-peer-focus:!border-transparent group-peer-focus:group-peer-active:!border-transparent -mr-2 !border-transparent !bg-transparent focus:!border-transparent",
@@ -9233,9 +9233,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
         icon: "close",
         onMouseDown: handleClear,
         tabIndex: -1,
-        tooltip: focused ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.searchInput.clear, " ", /*#__PURE__*/React__default.createElement(Shortcut, {
+        tooltip: focused ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.searchInput.clear, " ", /*#__PURE__*/React__default.createElement(Shortcut, {
           keys: "Escape"
-        })) : texts.searchInput.clear
+        }))) : texts.searchInput.clear
       });
     }
     if (hasFind && isActive) {
@@ -9243,28 +9243,28 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
         className: "text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2"
       }, loading ? /*#__PURE__*/React__default.createElement(Spinner, {
         className: "h-4 w-4"
-      }) : `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`), findCurrent ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+      }) : `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`), findCurrent ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
         "aria-label": texts.searchInput.findPrevious,
         className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
         icon: "chevron-up",
         onMouseDown: handleClickFindPrevious,
         tabIndex: -1,
-        tooltip: focused ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.searchInput.findPrevious, " ", /*#__PURE__*/React__default.createElement(Shortcut, {
+        tooltip: focused ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.searchInput.findPrevious, " ", /*#__PURE__*/React__default.createElement(Shortcut, {
           keys: {
             shift: true,
             key: 'Enter'
           }
-        })) : texts.searchInput.findPrevious
+        }))) : texts.searchInput.findPrevious
       }), /*#__PURE__*/React__default.createElement(IconButton, {
         "aria-label": texts.searchInput.findNext,
         className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
         icon: "chevron-down",
         onMouseDown: handleClickFindNext,
         tabIndex: -1,
-        tooltip: focused ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.searchInput.findNext, " ", /*#__PURE__*/React__default.createElement(Shortcut, {
+        tooltip: focused ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.searchInput.findNext, " ", /*#__PURE__*/React__default.createElement(Shortcut, {
           keys: "Enter"
-        })) : texts.searchInput.findNext
-      })) : null, postfix);
+        }))) : texts.searchInput.findNext
+      }))) : null, postfix);
     }
   } else if (shortcut && !focused && !value) {
     postfix = /*#__PURE__*/React__default.createElement(Shortcut, {
@@ -9670,16 +9670,16 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "truncate px-2",
     ref: textRef
-  }, icon ? typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, icon ? typeof icon === 'string' ? ( /*#__PURE__*/React__default.createElement(Icon, {
     name: icon,
     className: "mr-1 -ml-1 -mt-0.5 !h-5 !w-5"
-  }) : /*#__PURE__*/React__default.cloneElement(icon, {
+  })) : ( /*#__PURE__*/React__default.cloneElement(icon, {
     className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
-  }) : null, children), onDelete ? /*#__PURE__*/React__default.createElement(Icon, {
+  })) : null, children), onDelete ? ( /*#__PURE__*/React__default.createElement(Icon, {
     name: "close",
     onClick: onDelete,
     className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
-  }) : null);
+  })) : null);
 });
 
 const createOptionClassName = (shouldPauseHoverState = false) => cn('group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none', {
@@ -9838,9 +9838,9 @@ const EditPopover = props => {
     className: "focus:!shadow-none"
   }, ({
     close
-  }) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }) => ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-32 flex-col space-y-2"
-  }, onEdit ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+  }, onEdit ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
     className: cn('!min-h-fit', {
       '!pb-0': !validationError
     }),
@@ -9852,23 +9852,23 @@ const EditPopover = props => {
     onKeyDown: handleInputKeyDown(close),
     ref: ref,
     value: name
-  })), initialColor ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("h5", null, "Colours"), /*#__PURE__*/React__default.createElement(Colours, {
+  })), initialColor ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("h5", null, "Colours"), /*#__PURE__*/React__default.createElement(Colours, {
     color: color,
     onChangeColor: setColor,
     onKeyDown: preventKeyDownPropagation
-  })) : null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Button$1, {
+  }))) : null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Button$1, {
     onClick: close
   }, texts.select2.cancel), /*#__PURE__*/React__default.createElement(Button$1, {
     appearance: "primary",
     onClick: handleSave(close)
-  }, texts.select2.save))) : null, onEdit && onDelete ? /*#__PURE__*/React__default.createElement("hr", null) : null, onDelete ? /*#__PURE__*/React__default.createElement("button", {
+  }, texts.select2.save)))) : null, onEdit && onDelete ? /*#__PURE__*/React__default.createElement("hr", null) : null, onDelete ? ( /*#__PURE__*/React__default.createElement("button", {
     className: "hover:text-grey-700 flex items-center justify-start gap-1",
     onClick: handleDelete(close),
     onKeyDown: preventKeyDownPropagation
   }, /*#__PURE__*/React__default.createElement(Icon, {
     className: "!h-5 !w-5",
     name: "delete-permanently"
-  }), " ", texts.select2.delete) : null))));
+  }), " ", texts.select2.delete)) : null)))));
 };
 const Colours = props => {
   const {
@@ -9887,7 +9887,7 @@ const Colours = props => {
     onKeyDown: onKeyDown,
     onValueChange: color => onChangeColor(color),
     value: color
-  }, AVAILABLE_COLORS.map(availableColor => /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Item, {
+  }, AVAILABLE_COLORS.map(availableColor => ( /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Item, {
     "aria-label": color,
     className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', getSubtleColorShadeClasses(availableColor)),
     key: availableColor,
@@ -9898,7 +9898,7 @@ const Colours = props => {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "tick",
     className: "!h-5 !w-5"
-  })))));
+  }))))));
 };
 
 const mobiles = /iPhone|iPad|iPod|Android/i;
@@ -9959,14 +9959,14 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     ref: ref
-  }), hasValue ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), hasValue ? ( /*#__PURE__*/React__default.createElement(Icon, {
     name: "tick",
     className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible"
-  }) : null, isTag ? /*#__PURE__*/React__default.createElement(Tag$1, {
+  })) : null, isTag ? ( /*#__PURE__*/React__default.createElement(Tag$1, {
     className: "pointer-events-none my-1",
     color: color,
     icon: prefix
-  }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, children)) : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, prefix ? typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     name: prefix
   }) : prefix : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex w-full justify-between"
@@ -9978,7 +9978,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     className: "flex flex-col self-center"
   }, postfix ? typeof postfix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     name: postfix
-  }) : postfix : null))), popover ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }) : postfix : null)))), popover ? ( /*#__PURE__*/React__default.createElement(IconButton, {
     icon: "ellipsis-vertical",
     appearance: "discrete",
     className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
@@ -9991,7 +9991,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     },
     popover: popover,
     tabIndex: -1
-  }) : null);
+  })) : null);
 });
 
 const Group$2 = /*#__PURE__*/React__default.forwardRef(function Select2Group(props, ref) {
@@ -10090,7 +10090,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     disabled: disabled,
     onClick: handleClick,
     ref: ref,
-    role: "combobox",
+    role: "button",
     tabIndex: disabled || readOnly ? -1 : tabIndex,
     type: "button"
   }), children, /*#__PURE__*/React__default.createElement(Icon, {
@@ -10131,10 +10131,10 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
         readOnly: readOnly
       }, currentValue.props.children);
     } else {
-      output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+      output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? ( /*#__PURE__*/React__default.createElement(Icon, {
         name: currentValue.props.prefix,
         className: "mr-1 !h-5 !w-5"
-      }) : currentValue.props.prefix : null, currentValue.props.children);
+      })) : currentValue.props.prefix : null, currentValue.props.children);
     }
   }
   return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
@@ -10171,12 +10171,12 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
-    }, valuesAsChildren.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+    }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement("div", {
       className: cn({
         'text-grey-700': disabled,
         'text-grey-500': !disabled
       })
-    }, placeholder) : valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag$1, {
+    }, placeholder)) : valuesAsChildren.map(child => ( /*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
@@ -10190,7 +10190,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
         }
       },
       readOnly: readOnly
-    }, child.props.children))));
+    }, child.props.children)))));
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
       key: String(open),
@@ -10235,12 +10235,12 @@ const MultipleValue = ({
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-1 truncate",
     ref: el => setContentRef(el)
-  }, valuesAsChildren.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+  }, valuesAsChildren.length === 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: cn({
       'text-grey-700': disabled,
       'text-grey-500': !disabled
     })
-  }, placeholder) : valuesAsChildren.map((child, index) => {
+  }, placeholder)) : valuesAsChildren.map((child, index) => {
     const tag = /*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
       className: cn('cursor-pointer', {
@@ -10260,11 +10260,11 @@ const MultipleValue = ({
       }, tag);
     }
     return tag;
-  })), boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? /*#__PURE__*/React__default.createElement(Tooltip, {
+  })), boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? ( /*#__PURE__*/React__default.createElement(Tooltip, {
     title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(child.props.children) : '').join(', ')
   }, /*#__PURE__*/React__default.createElement(Badge, {
     className: "flex-shrink-0"
-  }, "+", valuesAsChildren.length - (boundaryIndex + 1))) : null);
+  }, "+", valuesAsChildren.length - (boundaryIndex + 1)))) : null);
 };
 const matchesValue = value => child => {
   if (Array.isArray(value)) {
@@ -10750,13 +10750,13 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, flattenedChildren.length > 0 || onCreate ? /*#__PURE__*/React__default.createElement(Search$1, {
+  }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(Search$1, {
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef
-  }) : null, flattenedChildren.length <= 0 ? /*#__PURE__*/React__default.createElement("div", {
+  })) : null, flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
-  }, "No results found...") : /*#__PURE__*/React__default.createElement(Root$1, {
+  }, "No results found...")) : ( /*#__PURE__*/React__default.createElement(Root$1, {
     className: "flex flex-col gap-0.5",
     customSelector: ":scope > button",
     disabled: disabled,
@@ -10767,10 +10767,10 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     setValue: setValue,
     tabIndex: -1,
     value: value
-  }, searchQuery === '' ? /*#__PURE__*/React__default.createElement(Collection$1, null, initialChildren) : /*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
+  }, searchQuery === '' ? ( /*#__PURE__*/React__default.createElement(Collection$1, null, initialChildren)) : ( /*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren)), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
     onCreate: onCreate,
     options: flattenedChildren
-  }) : null))))));
+  }) : null)))))));
 });
 Select2.Option = Option$1;
 Select2.Group = Group$2;
@@ -10803,10 +10803,10 @@ const ControlledHiddenField = props => {
       value: bubbleValue
     }, emptyValue !== undefined ? /*#__PURE__*/React__default.createElement("option", {
       value: emptyValue
-    }) : null, options.map(option => /*#__PURE__*/React__default.createElement("option", {
+    }) : null, options.map(option => ( /*#__PURE__*/React__default.createElement("option", {
       key: String(option),
       value: String(option)
-    })));
+    }))));
   }
   return null;
 };
@@ -11213,7 +11213,7 @@ const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRen
           }
           const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);
           const [primaryActions, secondaryActions] = getActions(actions, sanitizedRow);
-          const output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, handlers.onRowCreate && /*#__PURE__*/React__default.createElement(IconButton, {
+          const output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, handlers.onRowCreate && ( /*#__PURE__*/React__default.createElement(IconButton, {
             appearance: "discrete",
             icon: "circle-plus",
             "aria-label": texts.table.newSubRow,
@@ -11228,7 +11228,7 @@ const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRen
               }
               handlers.onRowCreate(sanitizedRow, event);
             }
-          }), (inlineEditing || handlers.onRowEdit) && /*#__PURE__*/React__default.createElement(IconButton, {
+          })), (inlineEditing || handlers.onRowEdit) && ( /*#__PURE__*/React__default.createElement(IconButton, {
             appearance: "discrete",
             icon: "edit",
             "aria-label": texts.table.edit,
@@ -11244,7 +11244,7 @@ const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRen
                 handlers.onRowEdit(sanitizedRow, event);
               }
             }
-          }), handlers.onRowCopy && /*#__PURE__*/React__default.createElement(IconButton, {
+          })), handlers.onRowCopy && ( /*#__PURE__*/React__default.createElement(IconButton, {
             appearance: "discrete",
             icon: "copy",
             "aria-label": texts.table.copy,
@@ -11256,7 +11256,7 @@ const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRen
               row.setActive();
               handlers.onRowCopy(sanitizedRow, event);
             }
-          }), handlers.onRowDelete && /*#__PURE__*/React__default.createElement(IconButton, {
+          })), handlers.onRowDelete && ( /*#__PURE__*/React__default.createElement(IconButton, {
             appearance: "discrete",
             icon: "delete",
             "aria-label": texts.table.del,
@@ -11268,12 +11268,12 @@ const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRen
               row.setActive();
               handlers.onRowDelete(sanitizedRow, event);
             }
-          }), primaryActions.map((action, index) => /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, getActionProps(action, sanitizedRow), {
+          })), primaryActions.map((action, index) => ( /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, getActionProps(action, sanitizedRow), {
             key: index,
             appearance: "discrete",
             icon: typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon,
             tooltip: typeof action.tooltip === 'function' ? action.tooltip(sanitizedRow) : action.tooltip
-          }))), secondaryActions.length ? /*#__PURE__*/React__default.createElement(Menu$1, null, /*#__PURE__*/React__default.createElement(Menu$1.Trigger, null, /*#__PURE__*/React__default.createElement(IconButton, {
+          })))), secondaryActions.length ? ( /*#__PURE__*/React__default.createElement(Menu$1, null, /*#__PURE__*/React__default.createElement(Menu$1.Trigger, null, /*#__PURE__*/React__default.createElement(IconButton, {
             appearance: "discrete",
             icon: "ellipsis-vertical",
             "aria-label": texts.table.actions,
@@ -11283,10 +11283,10 @@ const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRen
               event.stopPropagation();
               row.setActive();
             }
-          })), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, secondaryActions.map((action, index) => /*#__PURE__*/React__default.createElement(Menu$1.Item, Object.assign({
+          })), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, secondaryActions.map((action, index) => ( /*#__PURE__*/React__default.createElement(Menu$1.Item, Object.assign({
             key: index,
             icon: typeof action.icon === 'function' ? action.icon(sanitizedRow) : action.icon
-          }, getActionProps(action, sanitizedRow)), typeof action.text === 'function' ? action.text(sanitizedRow) : action.text)))) : null);
+          }, getActionProps(action, sanitizedRow)), typeof action.text === 'function' ? action.text(sanitizedRow) : action.text)))))) : null);
           if (windowed) {
             return /*#__PURE__*/React__default.createElement("div", {
               className: actionGroupClassName
@@ -11297,10 +11297,10 @@ const useRowActions = (inlineEditingUniqueId, handlers, actions, rowExpansionRen
           }, ({
             inView,
             ref
-          }) => /*#__PURE__*/React__default.createElement("div", {
+          }) => ( /*#__PURE__*/React__default.createElement("div", {
             className: actionGroupClassName,
             ref: ref
-          }, inView ? output : null));
+          }, inView ? output : null)));
         }
       }]);
     }
@@ -11934,10 +11934,10 @@ const Column = ({
     "data-taco": "table-column"
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "truncate"
-  }, cell.render('Header')), cell.isSorted ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, cell.render('Header')), cell.isSorted ? ( /*#__PURE__*/React__default.createElement(Icon, {
     name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid',
     className: "-mt-0.5"
-  }) : null);
+  })) : null);
 };
 
 const DefaultEmptyState = () => null;
@@ -11966,15 +11966,15 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
     role: "rowgroup",
     className: "yt-table__head",
     ref: headerRef
-  }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => /*#__PURE__*/React__default.createElement("div", {
+  }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => ( /*#__PURE__*/React__default.createElement("div", {
     key: index,
     role: "row",
     className: "border-grey-300 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
-  }, headerGroup.headers.map((cell, index) => /*#__PURE__*/React__default.createElement(Column, {
+  }, headerGroup.headers.map((cell, index) => ( /*#__PURE__*/React__default.createElement(Column, {
     key: index,
     index: index,
     cell: cell
-  }))))), /*#__PURE__*/React__default.createElement("div", {
+  }))))))), /*#__PURE__*/React__default.createElement("div", {
     role: "rowgroup",
     className: "yt-table__body",
     ref: bodyRef
@@ -12172,14 +12172,14 @@ const WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTa
       }, ({
         onItemsRendered,
         ref
-      }) => /*#__PURE__*/React__default.createElement(reactWindow.VariableSizeList, Object.assign({}, listProps, {
+      }) => ( /*#__PURE__*/React__default.createElement(reactWindow.VariableSizeList, Object.assign({}, listProps, {
         itemCount: length,
         onItemsRendered: onItemsRendered,
         ref: list => {
           ref(list);
           setRowsRef(list);
         }
-      }), VariableRow));
+      }), VariableRow)));
     } else {
       list = /*#__PURE__*/React__default.createElement(reactWindow.VariableSizeList, Object.assign({}, listProps, {
         itemCount: rows.length,
@@ -12346,6 +12346,57 @@ function GotoPopover(props) {
   })));
 }
 
+// Determines the scroll distance required to display a specific cell in the table.
+// Returns the scroll distance if scrolling is necessary; otherwise, returns null.
+function getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing = false) {
+  var _Array$from;
+  const row = cell === null || cell === void 0 ? void 0 : cell.closest('[role="row"]');
+  // When editing is enabled, the action column overlays other columns.
+  // To account for it, incorporate a 'rightOffset' during table scrolling towards the right.
+  // 60px is the width of the action column and 10px is added to account for the shadow that it has.
+  const rightOffset = isEditing ? 70 : 0;
+  if (!row) {
+    return null;
+  }
+  const rowChildren = (_Array$from = Array.from(row.children)) !== null && _Array$from !== void 0 ? _Array$from : [];
+  const cellIndex = rowChildren.indexOf(cell);
+  if (cellIndex === -1) {
+    return null;
+  }
+  let scrollDistance = 0;
+  const EXTRA_SPACING = 0;
+  const tableRect = tableElement.getBoundingClientRect();
+  const cellRect = cell.getBoundingClientRect();
+  const tableShouldScrollRight = cellRect.right > tableRect.right - rightOffset;
+  const tableShouldScrollLeft = cellRect.left < tableRect.left;
+  // If column header is behind the frozen columns then scroll the parentHeader into view
+  if (frozenColumnIndex !== -1 && cellIndex > frozenColumnIndex) {
+    var _rowChildren$frozenCo;
+    const lastFrozenColumnRect = (_rowChildren$frozenCo = rowChildren[frozenColumnIndex]) === null || _rowChildren$frozenCo === void 0 ? void 0 : _rowChildren$frozenCo.getBoundingClientRect();
+    const isColumnBehindFrozenColumn = lastFrozenColumnRect.right > cellRect.left;
+    if (isColumnBehindFrozenColumn) {
+      scrollDistance = tableElement.scrollLeft - (lastFrozenColumnRect.right - cellRect.left);
+      return scrollDistance;
+    } else if (tableShouldScrollRight) {
+      scrollDistance = tableElement.scrollLeft + (cellRect.right - tableRect.right + EXTRA_SPACING) + rightOffset;
+      return scrollDistance;
+    }
+    // If column is not behind frozen columns and table doesn't have to be scrolled right to show
+    // the column then that means that the column is visible on the screen
+  } else {
+    if (tableShouldScrollLeft) {
+      scrollDistance = tableElement.scrollLeft - (tableRect.left - cellRect.left);
+      return scrollDistance;
+    } else if (tableShouldScrollRight) {
+      scrollDistance = tableElement.scrollLeft + (cellRect.right - tableRect.right + EXTRA_SPACING) + rightOffset;
+      return scrollDistance;
+    }
+    // If table doesn't have to be scrolled right or left to show the column then that means that
+    // the column is visible on the screen
+  }
+  return null;
+}
+
 function isGotoAvailable(table, header) {
   if (isInternalColumn(header.id)) {
     return false;
@@ -12381,6 +12432,34 @@ function Menu$3(props) {
   } = useLocalization();
   const [popover, setPopover] = React__default.useState(undefined);
   const [sortDirectionState, setSortDirectionState] = React__default.useState(sortDirection);
+  const ref = React__default.useRef(null);
+  const gotoShortcut = 'g';
+  React__default.useEffect(() => {
+    const {
+      frozenColumnIndex: externalFrozenColumnIndex = -1,
+      frozenInternalColumnCount = 0
+    } = tableMeta.columnFreezing;
+    const handler = createShortcutKeyDownHandler(gotoShortcut, () => {
+      // Only execute the below code if the header menu has goto menu item
+      if (handleGoto) {
+        var _ref$current;
+        const tableElement = tableMeta.tableRef.current;
+        const frozenColumnIndex = externalFrozenColumnIndex > -1 ? externalFrozenColumnIndex + frozenInternalColumnCount : frozenInternalColumnCount - 1;
+        const parentHeader = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.closest('[role="columnheader"]');
+        if (!tableElement || !parentHeader) {
+          return;
+        }
+        const leftScrollDistance = getTableLeftScrollDistance(tableElement, parentHeader, frozenColumnIndex);
+        if (leftScrollDistance !== null) {
+          tableElement.scrollLeft = leftScrollDistance;
+        }
+      }
+    },
+    // Prevents the stopping of event propagation
+    false);
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [tableMeta.columnFreezing.frozenColumnIndex, handleGoto]);
   const handleSortMenuRadioGroupChange = newSortDirection => {
     setSortDirectionState(newSortDirection);
     handleSortToggle(newSortDirection);
@@ -12397,7 +12476,7 @@ function Menu$3(props) {
                 const _temp = _finallyRethrows(function () {
                   return _catch(function () {
                     return Promise.resolve(handleGoto(query)).then(function (index) {
-                      tableMeta.currentRow.setCurrentRowIndex(index);
+                      tableMeta.rowActive.setRowActiveIndex(index);
                       scrollToIndex(index + 2, {
                         align: 'center'
                       });
@@ -12440,7 +12519,7 @@ function Menu$3(props) {
     if (canSort) {
       menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "sort-by",
-        subMenu: () => /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
+        subMenu: () => ( /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
           onChange: handleSortMenuRadioGroupChange,
           value: sortDirectionState
         }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
@@ -12449,14 +12528,14 @@ function Menu$3(props) {
           value: SORT_DIRECTION.DESC
         }, texts.table3.columns.menu.sortingOrder.descending), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
           value: false
-        }, texts.table3.columns.menu.sortingOrder.unsorted)))
+        }, texts.table3.columns.menu.sortingOrder.unsorted))))
       }, texts.table3.columns.menu.sorting));
     }
     if (handleGoto) {
       menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "move",
         onClick: () => setPopover('goto'),
-        shortcut: "g"
+        shortcut: gotoShortcut
       }, texts.table3.columns.menu.gotoRow, "..."));
     }
     if (canFreeze) {
@@ -12495,9 +12574,10 @@ function Menu$3(props) {
   return /*#__PURE__*/React__default.createElement(IconButton, {
     className: className,
     icon: "more",
-    menu: popoverElement ? undefined : menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, memoedMenuItems)),
+    menu: popoverElement ? undefined : menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, memoedMenuItems))),
     popover: popoverElement,
-    onClickCapture: event => event.preventDefault()
+    onClickCapture: event => event.preventDefault(),
+    ref: ref
   });
 }
 
@@ -12607,7 +12687,7 @@ function Header$1(props) {
     }
     return undefined;
   }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);
-  const memoedProps = {
+  const headerContentProps = {
     align: columnMeta.align,
     canFreeze: tableMeta.columnFreezing.isEnabled,
     canHide: column.getCanHide(),
@@ -12621,7 +12701,7 @@ function Header$1(props) {
     index: header.index,
     isFrozen: isFrozenColumn(header, table),
     isPlaceholder: header.isPlaceholder,
-    isPrinting: tableMeta.isPrinting,
+    isPrinting: tableMeta.printing.isPrinting,
     isResizing: column.getIsResizing(),
     length: table.getRowModel().rows.length,
     meta: columnMeta,
@@ -12634,9 +12714,9 @@ function Header$1(props) {
     sortDirection: column.getIsSorted(),
     table
   };
-  return /*#__PURE__*/React__default.createElement(MemoedHeader, Object.assign({}, memoedProps));
+  return /*#__PURE__*/React__default.createElement(HeaderContent, Object.assign({}, headerContentProps));
 }
-const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(props) {
+function HeaderContent(props) {
   var _meta$tooltip;
   const {
     align,
@@ -12703,16 +12783,16 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-column-index": index,
     role: "columnheader",
     ref: setInternalRef
-  }), isPlaceholder ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isInternalColumn(id) ? children : /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), isPlaceholder ? null : ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isInternalColumn(id) ? children : ( /*#__PURE__*/React__default.createElement(Tooltip, {
     title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: cn({
       truncate: !isPrinting
     })
-  }, children)), canSort ? /*#__PURE__*/React__default.createElement(SortIndicator, {
+  }, children))), canSort ? /*#__PURE__*/React__default.createElement(SortIndicator, {
     direction: sortDirection
-  }) : null, hasMenu ? /*#__PURE__*/React__default.createElement(Menu$3, {
+  }) : null, hasMenu ? ( /*#__PURE__*/React__default.createElement(Menu$3, {
     canFreeze: canFreeze,
     canHide: canHide,
     canSort: canSort,
@@ -12728,11 +12808,11 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     scrollToIndex: scrollToIndex,
     sortDirection: sortDirection,
     table: table
-  }) : null), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null, !isPlaceholder && canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
+  })) : null)), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null, !isPlaceholder && canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
     isResizing: isResizing,
     onResize: handleResize
   }) : null);
-});
+}
 function HeaderSeparator() {
   return /*#__PURE__*/React__default.createElement("div", {
     "data-taco": "header-separator",
@@ -12853,13 +12933,13 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
     role: "cell",
     // cells must be focusable (but not included in tabbing - hence -1)
     tabIndex: -1
-  }, highlighted ? /*#__PURE__*/React__default.createElement(Highlight, {
+  }, highlighted ? ( /*#__PURE__*/React__default.createElement(Highlight, {
     className: layoutClassName,
     current: highlightedAsCurrent,
     frozenColumnIndex: frozenColumnIndex,
     index: index,
     tableRef: tableRef
-  }, content) : content);
+  }, content)) : content);
 });
 
 function Footer$3(props) {
@@ -12901,9 +12981,9 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
     "data-align": align,
     "data-column-index": index,
     role: "columnheader"
-  }, typeof meta.footer === 'function' ? /*#__PURE__*/React__default.createElement("span", {
+  }, typeof meta.footer === 'function' ? ( /*#__PURE__*/React__default.createElement("span", {
     className: "flex-grow truncate"
-  }, meta.footer(table.getRowModel().rows.map(row => row.original[id]))) : null);
+  }, meta.footer(table.getRowModel().rows.map(row => row.original[id])))) : null);
 });
 
 const FONT_SIZE = {
@@ -12936,7 +13016,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     actions,
     actionsLength,
     fontSize,
-    isCurrentRow,
+    isActiveRow,
     isEditing,
     isResizingColumn,
     isHoverStatePaused,
@@ -12966,7 +13046,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   let content;
   // We don't want to show actions in edit mode, since we have editing actions,
   // which is shown in edit mode instead.
-  if (actions !== null && actions !== void 0 && actions.length && !isEditing && (isCurrentRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
+  if (actions !== null && actions !== void 0 && actions.length && !isEditing && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
     const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
     const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
@@ -12984,23 +13064,23 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
       return /*#__PURE__*/React__default.cloneElement(button, {
         appearance: 'transparent',
         key: index,
-        tabIndex: isCurrentRow ? 0 : -1,
-        tooltip: button.props.shortcut ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+        tabIndex: isActiveRow ? 0 : -1,
+        tooltip: button.props.shortcut ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
           className: "ml-2",
           keys: button.props.shortcut
-        })) : tooltip
+        }))) : tooltip
       });
-    }), actionsInMenu.length ? /*#__PURE__*/React__default.createElement(IconButton, {
+    }), actionsInMenu.length ? ( /*#__PURE__*/React__default.createElement(IconButton, {
       appearance: "transparent",
       "aria-label": texts.table3.columns.actions.tooltip,
       icon: "more",
-      tabIndex: isCurrentRow ? 0 : -1,
-      menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, actionsInMenu.map((action, i) => /*#__PURE__*/React__default.createElement(Menu$1.Item, Object.assign({
+      tabIndex: isActiveRow ? 0 : -1,
+      menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, actionsInMenu.map((action, i) => ( /*#__PURE__*/React__default.createElement(Menu$1.Item, Object.assign({
         key: i
       }, action.props, {
         shortcut: action.props.shortcut
-      }), action.props['aria-label']))))
-    }) : null);
+      }), action.props['aria-label']))))))
+    })) : null);
   }
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props), content);
 });
@@ -13013,10 +13093,10 @@ function Cell(context) {
     actions: tableMeta.rowActions.actionsForRow,
     actionsLength: tableMeta.rowActions.actionsForRowLength,
     fontSize: tableMeta.fontSize.size,
-    isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
     isEditing: tableMeta.editing.isEditing,
     isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
-    isHoverStatePaused: !!tableMeta.hoverState.isPaused
+    isHoverStatePaused: !!tableMeta.rowActive.isHoverStatePaused
   }));
 }
 function createRowActionsColumn() {
@@ -13091,6 +13171,64 @@ function getCellValueAsString(value, dataType) {
   return String(value);
 }
 
+// settings
+var TableFontSizes;
+(function (TableFontSizes) {
+  TableFontSizes["small"] = "small";
+  TableFontSizes["medium"] = "medium";
+  TableFontSizes["large"] = "large";
+})(TableFontSizes || (TableFontSizes = {}));
+
+// column widths
+const getCellMinWidth = (fontSize = 'medium') => {
+  switch (fontSize) {
+    case TableFontSizes.small:
+      return 57;
+    case TableFontSizes.large:
+      return 83;
+    default:
+    case TableFontSizes.medium:
+      return 72;
+  }
+};
+// ordering
+function ensureOrdering(columns, internalColumnsPinnedToTheRight, settingsOrder) {
+  // internal columns come with a defined order
+  const internalColumns = columns.filter(column => {
+    var _column$id;
+    return ((_column$id = column.id) === null || _column$id === void 0 ? void 0 : _column$id.startsWith('__')) && !internalColumnsPinnedToTheRight.includes(column.id);
+  }).map(column => column.id);
+  // columns with ordering disabled should be moved to the front
+  const orderingDisabled = [];
+  const orderingEnabled = [];
+  let orderedColumns = columns;
+  // if settings is defined, make sure the columns that are actual children are sorted by it
+  if (Array.isArray(settingsOrder)) {
+    orderedColumns = columns.slice().sort(
+    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
+    (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
+  }
+  orderedColumns.forEach(column => {
+    var _column$id2, _column$meta;
+    if ((_column$id2 = column.id) !== null && _column$id2 !== void 0 && _column$id2.startsWith('__')) {
+      return;
+    }
+    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
+      orderingEnabled.push(column.id);
+    } else {
+      orderingDisabled.push(column.id);
+    }
+  });
+  const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
+  // actions should always be last, enforce that
+  internalColumnsPinnedToTheRight.forEach(id => {
+    if (columns.findIndex(column => column.id === id) > -1) {
+      order.push(id);
+    }
+  });
+  return order;
+}
+
 const PRINT_MIN_COLUMN_SIZE = 20; // while printing, it accounts for minimum width each column can take
 const getCellAlignmentClasses = (alignment = 'left') => {
   return cn({
@@ -13099,18 +13237,7 @@ const getCellAlignmentClasses = (alignment = 'left') => {
     'justify-center text-center': alignment === 'center'
   });
 };
-const getFontBasedMinColumnSize = fontSize => {
-  // The minimum column size are based on the minimum usuable width of Datepicker
-  switch (fontSize) {
-    case FONT_SIZE.small:
-      return 57;
-    case FONT_SIZE.large:
-      return 83;
-    default:
-    case FONT_SIZE.medium:
-      return 72;
-  }
-};
+const getFontBasedMinColumnSize = getCellMinWidth;
 // Hiding input number spin buttons
 const getInputAppearanceClassnames = () => {
   return cn('[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none');
@@ -13175,62 +13302,65 @@ const useCssGrid = (table, isPrintTable = false, actionsForRowLength = 0, fontSi
   };
 };
 
-function useCurrentRow(defaultCurrentRowIndex) {
-  const [currentRowIndex, setCurrentRowIndex] = React__default.useState(defaultCurrentRowIndex);
-  const move = (direction, length, scrollToIndex) => setCurrentRowIndex(currentIndex => {
+function focusFirstElementInActiveRow(tableRef) {
+  const selector = '[data-taco="table2-body"] [role="row"] [role="cell"]:first-child';
+  setTimeout(() => {
+    var _tableRef$current, _tableRef$current$que;
+    (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : (_tableRef$current$que = _tableRef$current.querySelector(selector)) === null || _tableRef$current$que === void 0 ? void 0 : _tableRef$current$que.focus();
+  }, 1);
+}
+function useTableRowActive$1(isEnabled = false, initialRowActiveIndex) {
+  const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
+  const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
+  const move = (direction, length, scrollToIndex) => setRowActiveIndex(currentIndex => {
     const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
     scrollToIndex(direction === -1 ? nextIndex : nextIndex + 3);
     return nextIndex;
   });
-  const moveUp = (length, callback) => move(-1, length, callback);
-  const moveDown = (length, callback) => move(1, length, callback);
-  const focusFirstElementInCurrentRow = tableRef => {
-    setTimeout(() => {
-      var _tableRef$current, _tableRef$current$que;
-      (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : (_tableRef$current$que = _tableRef$current.querySelector('[data-taco="table2-body"] [role="row"] [role="cell"]:first-child')) === null || _tableRef$current$que === void 0 ? void 0 : _tableRef$current$que.focus();
-    }, 1);
-  };
-  const onKeyDown = React__default.useCallback((event, length, scrollToIndex, isEditing, tableRef) => {
-    if (event.defaultPrevented) {
+  const onKeyDown = React__default.useCallback((event, length, scrollToIndex, tableRef) => {
+    if (!isEnabled || event.defaultPrevented) {
       return;
     }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      setHoverStatePaused(true);
+    }
     if (event.key === 'ArrowUp') {
       event.preventDefault();
       if (event.ctrlKey || event.metaKey) {
         const newIndex = 0;
-        setCurrentRowIndex(newIndex);
+        setRowActiveIndex(newIndex);
         scrollToIndex(newIndex);
       } else {
-        moveUp(length, scrollToIndex);
+        move(-1, length, scrollToIndex);
       }
-      if (!isEditing) {
-        focusFirstElementInCurrentRow(tableRef);
+      if (tableRef) {
+        focusFirstElementInActiveRow(tableRef);
       }
       return;
     } else if (event.key === 'ArrowDown') {
       event.preventDefault();
       if (event.ctrlKey || event.metaKey) {
         const newIndex = length - 1;
-        setCurrentRowIndex(newIndex);
+        setRowActiveIndex(newIndex);
         scrollToIndex(newIndex);
       } else {
-        moveDown(length, scrollToIndex);
+        move(+1, length, scrollToIndex);
       }
-      if (!isEditing) {
-        focusFirstElementInCurrentRow(tableRef);
+      if (tableRef) {
+        focusFirstElementInActiveRow(tableRef);
       }
       return;
     }
-  }, []);
+  }, [isEnabled]);
   const onFocus = React__default.useCallback((event, length, scrollToIndex) => {
-    if (event.isDefaultPrevented()) {
+    if (!isEnabled || event.isDefaultPrevented()) {
       return;
     }
-    if (currentRowIndex === undefined && length > 0) {
+    if (rowActiveIndex === undefined && length > 0) {
       // do it in the next tick, otherwise it prevents internal focus from working
       // meaning you have to tab twice to get to the first focusable element
       setTimeout(() => {
-        setCurrentRowIndex(index => {
+        setRowActiveIndex(index => {
           if (index === undefined) {
             scrollToIndex(0);
             return 0;
@@ -13239,46 +13369,32 @@ function useCurrentRow(defaultCurrentRowIndex) {
         });
       }, 1);
     }
-  }, [currentRowIndex, length]);
+  }, [rowActiveIndex, length, isEnabled]);
   const onMouseCapture = React__default.useCallback((event, length) => {
-    if (event.isDefaultPrevented()) {
+    if (!isEnabled || event.isDefaultPrevented()) {
       return;
     }
-    if (currentRowIndex === undefined && length > 0) {
+    if (rowActiveIndex === undefined && length > 0) {
       event.preventDefault();
       event.stopPropagation();
     }
-  }, [currentRowIndex, length]);
+  }, [rowActiveIndex, length, isEnabled]);
   return {
-    currentRowIndex,
-    setCurrentRowIndex,
-    handleFocus: onFocus,
-    handleKeyDown: onKeyDown,
-    handleMouseCapture: onMouseCapture
+    isEnabled,
+    rowActiveIndex,
+    setRowActiveIndex: isEnabled ? setRowActiveIndex : () => undefined,
+    isHoverStatePaused,
+    setHoverStatePaused: isEnabled ? setHoverStatePaused : () => undefined,
+    handleFocus: isEnabled ? onFocus : () => undefined,
+    handleKeyDown: isEnabled ? onKeyDown : () => undefined,
+    handleMouseCapture: isEnabled ? onMouseCapture : () => undefined
   };
 }
-const getNextIndex = (direction, currentIndex, length) => {
+function getNextIndex(direction, currentIndex, length) {
   if (direction === -1) {
     return currentIndex - 1 > 0 ? currentIndex - 1 : 0;
   }
   return currentIndex + 1 < length ? currentIndex + 1 : currentIndex;
-};
-
-function usePauseHoverState() {
-  const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
-  const onKeyDown = React__default.useCallback(event => {
-    if (event.defaultPrevented) {
-      return;
-    }
-    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-      setHoverStatePaused(true);
-    }
-  }, []);
-  return {
-    isPaused: isHoverStatePaused,
-    pause: setHoverStatePaused,
-    handleKeyDown: onKeyDown
-  };
 }
 
 const DEFAULT_ALL_DISABLED = {
@@ -13379,22 +13495,8 @@ function useTablePreset(props) {
   };
 }
 
-function convertDeprecatedRowDensityToRowHeight(rowHeight) {
-  switch (rowHeight) {
-    case 'compact':
-      return 'short';
-    case 'normal':
-      return 'medium';
-    case 'comfortable':
-      return 'tall';
-    case 'spacious':
-      return 'extra-tall';
-    default:
-      return rowHeight;
-  }
-}
-function useRowHeight(isEnabled, defaultRowHeight = 'medium') {
-  const [height, setHeight] = React__default.useState(convertDeprecatedRowDensityToRowHeight(defaultRowHeight));
+function useTableRowHeight(isEnabled = false, defaultRowHeight = 'medium') {
+  const [height, setHeight] = React__default.useState(defaultRowHeight);
   return {
     isEnabled,
     height,
@@ -13402,7 +13504,7 @@ function useRowHeight(isEnabled, defaultRowHeight = 'medium') {
   };
 }
 
-function useFontSize(isEnabled, defaultFontSize = 'medium') {
+function useTableFontSize(isEnabled = false, defaultFontSize = 'medium') {
   const [size, setSize] = React__default.useState(defaultFontSize);
   return {
     isEnabled,
@@ -13423,11 +13525,10 @@ function useLazyEffect(effect, deps) {
   }, deps);
 }
 
-function useRowSelectionListener(table, onRowSelect) {
-  const rowSelection = table.getState().rowSelection;
+function useTableRowSelectionListener(table, onRowSelect) {
+  const selectedRows = table.getSelectedRowModel().rows;
   useLazyEffect(() => {
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
-      const selectedRows = table.getSelectedRowModel().rows;
       if (table.options.enableMultiRowSelection) {
         onRowSelect(selectedRows.map(row => row.original));
       } else {
@@ -13435,7 +13536,7 @@ function useRowSelectionListener(table, onRowSelect) {
         onRowSelect((_ref = [(_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$.original]) !== null && _ref !== void 0 ? _ref : []);
       }
     }
-  }, [table.options.enableRowSelection, rowSelection]);
+  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, selectedRows]);
 }
 
 function useRowDrag(isEnabled) {
@@ -13450,52 +13551,6 @@ function useRowDrag(isEnabled) {
 function useSettingsStateListener(table, onChangeSettings) {
   const meta = table.options.meta;
   const state = table.getState();
-  const prevFontSize = React__default.useRef(meta.fontSize.size);
-  React__default.useEffect(() => {
-    const newFontSize = meta.fontSize.size;
-    const oldFontSize = prevFontSize.current;
-    const {
-      small,
-      medium,
-      large
-    } = FONT_SIZE;
-    let columnSizeChange = 0;
-    switch (`${oldFontSize}-${newFontSize}`) {
-      case `${small}-${medium}`:
-        columnSizeChange = 8;
-        break;
-      case `${small}-${large}`:
-        columnSizeChange = 16;
-        break;
-      case `${medium}-${small}`:
-        columnSizeChange = -8;
-        break;
-      case `${medium}-${large}`:
-        columnSizeChange = 8;
-        break;
-      case `${large}-${small}`:
-        columnSizeChange = -16;
-        break;
-      case `${large}-${medium}`:
-        columnSizeChange = -8;
-        break;
-      default:
-        columnSizeChange = 0;
-        break;
-    }
-    prevFontSize.current = newFontSize;
-    if (columnSizeChange === 0) {
-      return;
-    }
-    table.setColumnSizing(sizes => {
-      const minColumnSize = getFontBasedMinColumnSize(newFontSize);
-      return Object.fromEntries(Object.entries(sizes).map(([columnName, prevColumnSize]) => {
-        // Prevents width value in the setting to go below the minColumnSize
-        const newSize = Math.max(minColumnSize, prevColumnSize + columnSizeChange);
-        return [columnName, newSize];
-      }));
-    });
-  }, [meta.fontSize.size]);
   React__default.useEffect(() => {
     let handler;
     if (typeof onChangeSettings === 'function') {
@@ -13504,7 +13559,7 @@ function useSettingsStateListener(table, onChangeSettings) {
       }, 250);
     }
     return () => clearTimeout(handler);
-  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
+  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.isWarningVisibleForLargeDatasets, state.sorting]);
 }
 
 var Table3FilterComparator;
@@ -13642,12 +13697,14 @@ function columnFilterFn(value, filter) {
 // we use a listener, and not the internal "controlled" change handlers because we don't actually want consumers
 // to control the state outside the table. this listener is really here to let the consumer make a server request
 // and provide the server with the sorting state, so that it can sort server side
-function useSortingStateListener(table, onSort) {
+function useTableSortingListener$1(table, onSort) {
   const sorting = table.getState().sorting;
   useLazyEffect(() => {
-    table.resetRowSelection();
     if (table.options.enableSorting && typeof onSort === 'function') {
       onSort(sorting);
+      if (table.options.enableRowSelection) {
+        table.resetRowSelection();
+      }
     }
   }, [table.options.enableSorting, sorting]);
 }
@@ -13655,7 +13712,7 @@ function useSortingStateListener(table, onSort) {
 // we use a listener, and not the internal "controlled" change handlers because we don't actually want consumers
 // to control the state outside the table. this listener is really here to let the consumer make a server request
 // and provide the server with the filtering state, so that it can filter server side
-function useFilteringStateListener(table, onFilter) {
+function useTableFilterListener(table, onFilter) {
   const columnFilters = table.getState().columnFilters;
   useLazyEffect(() => {
     if (table.options.enableColumnFilters && typeof onFilter === 'function') {
@@ -13667,13 +13724,13 @@ function useFilteringStateListener(table, onFilter) {
   }, [table.options.enableColumnFilters, columnFilters]);
 }
 
-function useCurrentRowListener(table) {
+function useTableDataListener(table) {
   const meta = table.options.meta;
   const rows = table.getRowModel().rows;
-  React__default.useEffect(() => {
-    const currentRowIndex = meta.currentRow.currentRowIndex;
-    if (currentRowIndex !== undefined && currentRowIndex > rows.length) {
-      meta.currentRow.setCurrentRowIndex(0);
+  useLazyEffect(() => {
+    const rowActiveIndex = meta.rowActive.rowActiveIndex;
+    if (rowActiveIndex !== undefined && rowActiveIndex > rows.length) {
+      meta.rowActive.setRowActiveIndex(0);
     }
   }, [rows.length]);
 }
@@ -13774,20 +13831,20 @@ function useColumnFreezingStyle(tableId, table) {
   return style;
 }
 
-function useRowSelection() {
+function useTableRowSelection(isEnabled = false) {
   const lastSelectedRowIndex = React__default.useRef();
   const onKeyDown = React__default.useCallback((event, table) => {
-    if (!table.options.enableRowSelection || event.defaultPrevented) {
+    if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {
       return;
     }
     const rows = table.getRowModel().rows;
     const tableMeta = table.options.meta;
     if (event.key === ' ') {
       event.preventDefault();
-      const currentRowIndex = tableMeta.currentRow.currentRowIndex;
-      if (currentRowIndex !== undefined) {
-        var _rows$currentRowIndex;
-        (_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.toggleSelected();
+      const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;
+      if (rowActiveIndex !== undefined) {
+        var _rows$rowActiveIndex;
+        (_rows$rowActiveIndex = rows[rowActiveIndex]) === null || _rows$rowActiveIndex === void 0 ? void 0 : _rows$rowActiveIndex.toggleSelected();
       }
       return;
     } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
@@ -13795,34 +13852,127 @@ function useRowSelection() {
       table.toggleAllRowsSelected();
       return;
     }
-  }, []);
+  }, [isEnabled]);
   return {
-    handleKeyDown: onKeyDown,
+    handleKeyDown: isEnabled ? onKeyDown : () => undefined,
     lastSelectedRowIndex
   };
 }
 
-function useRowClick(onRowClick) {
-  const onKeyDown = React__default.useCallback((event, table) => {
-    if (typeof onRowClick !== 'function' || event.defaultPrevented) {
+function useTableServerLoading(loadPage, loadAll) {
+  const isEnabled = !!loadPage && !!loadAll;
+  return {
+    isEnabled,
+    loadPage,
+    loadAll
+  };
+}
+
+function useTableRowClick(isEnabled = false, onRowClick) {
+  const handleKeyDown = React__default.useCallback(function (event, data) {
+    if (!isEnabled || typeof onRowClick !== 'function' || event.defaultPrevented) {
       return;
     }
-    const rows = table.getRowModel().rows;
-    const tableMeta = table.options.meta;
-    if (event.key === 'Enter') {
+    if (data && event.key === 'Enter') {
       event.preventDefault();
-      if (onRowClick && tableMeta.currentRow.currentRowIndex !== undefined) {
-        onRowClick(rows[tableMeta.currentRow.currentRowIndex].original);
-      }
+      onRowClick(data);
+      return;
+    }
+  }, [isEnabled, onRowClick]);
+  const handleClick = React__default.useCallback(function (event, data) {
+    if (!isEnabled || typeof onRowClick !== 'function' || event.defaultPrevented) {
       return;
     }
-  }, [onRowClick]);
+    event.preventDefault();
+    onRowClick(data);
+    return;
+  }, [isEnabled, onRowClick]);
+  return {
+    isEnabled,
+    handleClick,
+    handleKeyDown
+  };
+}
+
+function useTableColumnOrdering(isEnabled = true) {
+  return {
+    isEnabled
+  };
+}
+
+function useRowDrop(isEnabled, handler) {
   return {
-    handleKeyDown: onKeyDown,
-    handleClick: onRowClick
+    isEnabled,
+    handleDrop: isEnabled && handler ? handler : () => undefined
   };
 }
 
+var IndicatorReason;
+(function (IndicatorReason) {
+  IndicatorReason["SEARCH"] = "SEARCH";
+  IndicatorReason["SORTING"] = "SORTING";
+  IndicatorReason["FILTER"] = "FILTER";
+})(IndicatorReason || (IndicatorReason = {}));
+const useIndicatorText = reason => {
+  let title = '';
+  let description = '';
+  const {
+    texts
+  } = useLocalization();
+  switch (reason) {
+    case IndicatorReason.FILTER:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
+      break;
+    case IndicatorReason.SEARCH:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
+      break;
+    case IndicatorReason.SORTING:
+      title = texts.table3.editing.rowIndicator.rowWillMove;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
+      break;
+  }
+  return {
+    title,
+    description
+  };
+};
+const Indicator = ({
+  reason,
+  columnName,
+  mountNode,
+  validationErrors
+}) => {
+  const container = React__default.useMemo(() => {
+    const element = document.createElement('div');
+    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    return element;
+  }, []);
+  const indicatorText = useIndicatorText(reason);
+  const hasValidationErrorsInRow = !!validationErrors;
+  React__default.useEffect(() => {
+    // mountNode could be null when rows are filtered
+    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
+    return () => {
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
+    };
+  }, [hasValidationErrorsInRow, mountNode]);
+  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
+  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: indicatorText.description.replace('[COLUMN]', columnName)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex gap-1 hover:cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "info",
+    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
+  }), indicatorText.title)), container);
+};
+
 const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
 const focusableSelector = /*#__PURE__*/focussableNodeNames.join(', ');
 const hasChanged = (value, newValue) => {
@@ -13888,7 +14038,7 @@ function Row$1(props) {
   var _tableMeta$validation, _tableMeta$validation2;
   const focusManager = focus.useFocusManager();
   const tableMeta = props.table.options.meta;
-  const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;
+  const isActiveRow = tableMeta.rowActive.rowActiveIndex === props.index;
   const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];
   const isFirstRow = props.index === 0;
   // we use non-css hovered state to determine whether to render actions or not, for performance
@@ -13899,7 +14049,7 @@ function Row$1(props) {
       return;
     }
     if (event.key === 'Tab') {
-      tableMeta.hoverState.pause(true);
+      tableMeta.rowActive.setHoverStatePaused(true);
       let focusedElement;
       if (event.shiftKey) {
         // looping backwards
@@ -13911,7 +14061,7 @@ function Row$1(props) {
           // there are no previous elements to focus, go up a row or go outside the table
           if (!isFirstRow) {
             event.preventDefault();
-            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
+            tableMeta.rowActive.setRowActiveIndex(props.index - 1);
             setTimeout(() => focusManager.focusLast(FOCUS_MANAGER_OPTIONS), 1);
           }
         }
@@ -13925,7 +14075,7 @@ function Row$1(props) {
           // there are no next elements to focus, go down a row or go outside the table
           if (!props.isLastRow) {
             event.preventDefault();
-            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
+            tableMeta.rowActive.setRowActiveIndex(props.index + 1);
             setTimeout(() => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS), 1);
           }
         }
@@ -13936,22 +14086,24 @@ function Row$1(props) {
   // rows are heavily memoized because performance in our table is critical
   // be careful and selective about props that you pass to the row
   const memoedProps = {
+    data: props.row.original,
     // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is
     'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,
-    'data-current': isCurrentRow,
+    'data-current': isActiveRow,
     'data-selected': props.row.getIsSelected(),
     'data-invalid': hasError,
     draggable: tableMeta.rowDrag.isEnabled,
     index: props.index,
     onClick: tableMeta.rowClick.handleClick,
-    onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,
-    onKeyDown: handleKeyDown
+    onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined
   };
-  let output = /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, props, memoedProps));
-  if (tableMeta.editing.isEditing && (isCurrentRow || isHovered && !tableMeta.hoverState.isPaused)) {
+  let output = /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, props, memoedProps, {
+    onKeyDown: handleKeyDown
+  }));
+  if (tableMeta.editing.isEditing && (isActiveRow || isHovered && !tableMeta.rowActive.isHoverStatePaused)) {
     output = /*#__PURE__*/React__default.createElement(EditingRow, Object.assign({}, props, memoedProps, {
       isFirstRow: isFirstRow,
-      setCurrentRowIndex: tableMeta.currentRow.setCurrentRowIndex
+      setActiveRowIndex: tableMeta.rowActive.setRowActiveIndex
     }));
   }
   // we store the row index in context because in a virtualised table the row index and the
@@ -13987,7 +14139,7 @@ function EditingRow(props) {
     isFirstRow,
     isLastRow,
     onKeyDown,
-    setCurrentRowIndex,
+    setActiveRowIndex,
     virtualiser,
     ...attributes
   } = props;
@@ -13996,14 +14148,14 @@ function EditingRow(props) {
   const handleClickCapture = event => {
     lastCellIndex.value = getColumnIndex(event.target);
   };
-  const handleArrowLeftKey = event => {
+  const handleNavigationBackwards = event => {
     let focusedElement;
-    if (event.key === 'ArrowLeft') {
+    if (event.key === 'ArrowLeft' || event.key === 'Tab' && event.shiftKey) {
       // We need to perform special behaviour when focus reaches the end of the row,
       // so we don't need default browser behaviour.
       event.stopPropagation();
       event.preventDefault();
-      tableMeta.hoverState.pause(true);
+      tableMeta.rowActive.setHoverStatePaused(true);
       // "CTRL + ArrowLeft" or "META + ArrowLeft" should focus first focusable element of the row
       if (event.ctrlKey || event.metaKey) {
         event.target.blur();
@@ -14018,8 +14170,8 @@ function EditingRow(props) {
           // there are no previous elements to focus, go up a row (if there are rows above)
           if (!isFirstRow || !event.currentTarget.contains(focusedElement)) {
             event.preventDefault();
-            tableMeta.hoverState.pause(true);
-            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
+            tableMeta.rowActive.setHoverStatePaused(true);
+            tableMeta.rowActive.setRowActiveIndex(props.index - 1);
             setTimeout(() => {
               focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
               // Need to update lastIndex when row got changed and last element got selected.
@@ -14030,14 +14182,14 @@ function EditingRow(props) {
       }
     }
   };
-  const handleArrowRightKey = event => {
+  const handleNavigationForward = event => {
     let focusedElement;
-    if (event.key === 'ArrowRight') {
+    if (event.key === 'ArrowRight' || event.key === 'Tab' && !event.shiftKey) {
       // We need to perform special behaviour when focus reaches the end of the row,
       // so we don't need default browser behaviour.
       event.stopPropagation();
       event.preventDefault();
-      tableMeta.hoverState.pause(true);
+      tableMeta.rowActive.setHoverStatePaused(true);
       // "CTRL + ArrowRight" or "META + ArrowRight" should focus last focusable element of the row
       if (event.ctrlKey || event.metaKey) {
         event.target.blur();
@@ -14052,8 +14204,8 @@ function EditingRow(props) {
           // there are no next elements to focus, go down a row or go outside the table
           if (!props.isLastRow && !event.currentTarget.contains(focusedElement)) {
             event.preventDefault();
-            tableMeta.hoverState.pause(true);
-            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
+            tableMeta.rowActive.setHoverStatePaused(true);
+            tableMeta.rowActive.setRowActiveIndex(props.index + 1);
             setTimeout(() => {
               focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
               // Need to update lastIndex when row got changed and last element got selected.
@@ -14066,22 +14218,21 @@ function EditingRow(props) {
   };
   React__default.useEffect(() => {
     // if some row stuck in hovered state, we heed to unhover it when hover state is paused
-    if (tableMeta.hoverState.isPaused) {
+    if (tableMeta.rowActive.isHoverStatePaused) {
       unhoverPreviousRow(props.tableRef);
     }
-  }, [tableMeta.hoverState.isPaused]);
+  }, [tableMeta.rowActive.isHoverStatePaused]);
   const handleKeyDown = event => {
     if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing || tableMeta.shortcutsState.isPaused) {
       return;
     }
-    onKeyDown(event); // handles tab behaviour
-    handleArrowLeftKey(event);
-    handleArrowRightKey(event);
+    handleNavigationBackwards(event);
+    handleNavigationForward(event);
   };
   // this ensures we focus either on a field or on the same column when keyboard navigating up/down
   React__default.useEffect(() => {
     // When table in searching state, whe should prevent editing control to be focused, because it will cause search field to loose focus.
-    if (tableMeta.currentRow.currentRowIndex === props.index && !tableMeta.search.isSearching) {
+    if (tableMeta.rowActive.rowActiveIndex === props.index && !tableMeta.search.isSearching) {
       if (lastCellIndex.value !== null) {
         var _props$tableRef$curre;
         const lastCellElement = (_props$tableRef$curre = props.tableRef.current) === null || _props$tableRef$curre === void 0 ? void 0 : _props$tableRef$curre.querySelector(`[role="row"][data-current="true"] [data-column-index="${lastCellIndex.value}"]`);
@@ -14101,7 +14252,7 @@ function EditingRow(props) {
     // Need to subscribe to current row index and check is it a current row,
     // for a situation where hovered row is the next row after current row...
     // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.
-  }, [tableMeta.currentRow.currentRowIndex, tableMeta.search.isSearching]);
+  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.search.isSearching]);
   return /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, attributes, {
     onClickCapture: handleClickCapture,
     onKeyDown: handleKeyDown
@@ -14110,6 +14261,7 @@ function EditingRow(props) {
 const clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];
 const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
   const {
+    data,
     index,
     isLastRow: _1,
     measureRef,
@@ -14140,7 +14292,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
       onClickCapture(event);
     }
     // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable
-    requestAnimationFrame(() => tableMeta.currentRow.setCurrentRowIndex(index));
+    requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));
   };
   const handleClick = event => {
     if (typeof onClick === 'function') {
@@ -14149,7 +14301,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
       if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(event.target)) || clickableElements.includes(clickedElement.tagName.toLowerCase()) || clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))) {
         return;
       }
-      onClick(row.original);
+      onClick(event, data);
     }
   };
   const handleMouseEnter = () => {
@@ -14476,7 +14628,7 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
   var _column$columnDef$met;
   const {
     hasChanges,
-    isCurrentRow,
+    isActiveRow,
     row,
     editing,
     rowIdentifier,
@@ -14525,13 +14677,13 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
       }));
     }
   }
-  if (editing.isEditing && isCurrentRow) {
+  if (editing.isEditing && isActiveRow) {
     content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
       ref: edititngActionsRef,
       appearance: "transparent",
       "aria-label": texts.table3.editing.actions.tooltip,
       icon: "more",
-      menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "tick",
         disabled: !hasChanges,
         onClick: () => editing.saveChangesIfNeeded()
@@ -14542,8 +14694,8 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
       }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "undo",
         onClick: () => editing.toggleEditing(false)
-      }, texts.table3.editing.actions.exit))),
-      tabIndex: isCurrentRow ? 0 : -1
+      }, texts.table3.editing.actions.exit)))),
+      tabIndex: isActiveRow ? 0 : -1
     }), /*#__PURE__*/React__default.createElement(Dialog, {
       size: "xs",
       open: clearConfirmationOpen,
@@ -14569,7 +14721,7 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
     }, texts.table3.editing.clearChangesConfirmationDialog.confirm)))))));
   }
   const contentClassName = cn('flex items-center justify-end text-right', {
-    '-mb-2 -mt-2': isCurrentRow
+    '-mb-2 -mt-2': isActiveRow
   });
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, {
     className: cn({
@@ -14587,7 +14739,7 @@ function Cell$1(props) {
   const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
   return /*#__PURE__*/React__default.createElement(MemoedCell$1, Object.assign({}, props, {
     hasChanges: changeset.indexOf(props.row.id) >= 0,
-    isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
     editing: tableMeta.editing
   }));
 }
@@ -14616,119 +14768,6 @@ function createRowEditingActionsColumn(rowIdentifier) {
   };
 }
 
-function useColumnOrdering(options) {
-  return {
-    isEnabled: options.enableColumnOrdering
-  };
-}
-function ensureOrdering(columns, settingsOrder) {
-  // internal column come with a defined order
-  const internalColumns = columns.filter(column => {
-    var _column$id;
-    return ((_column$id = column.id) === null || _column$id === void 0 ? void 0 : _column$id.startsWith('__')) && column.id !== COLUMN_ID && column.id !== COLUMN_ID$1;
-  }).map(column => column.id);
-  // columns with ordering disabled should be moved to the front
-  const orderingDisabled = [];
-  const orderingEnabled = [];
-  let orderedColumns = columns;
-  // if settings is defined, make sure the columns that are actual children are sorted by it
-  if (Array.isArray(settingsOrder)) {
-    orderedColumns = columns.slice().sort(
-    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
-    (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
-  }
-  orderedColumns.forEach(column => {
-    var _column$id2, _column$meta;
-    if ((_column$id2 = column.id) !== null && _column$id2 !== void 0 && _column$id2.startsWith('__')) {
-      return;
-    }
-    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
-      orderingEnabled.push(column.id);
-    } else {
-      orderingDisabled.push(column.id);
-    }
-  });
-  const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
-  // actions should always be last, enforce that
-  if (columns.findIndex(column => column.id === COLUMN_ID || column.id === COLUMN_ID$1) > -1) {
-    order.push(COLUMN_ID);
-  }
-  return order;
-}
-
-function useRowDrop(isEnabled, handler) {
-  return {
-    isEnabled,
-    handleDrop: isEnabled && handler ? handler : () => undefined
-  };
-}
-
-var IndicatorReason;
-(function (IndicatorReason) {
-  IndicatorReason["SEARCH"] = "SEARCH";
-  IndicatorReason["SORTING"] = "SORTING";
-  IndicatorReason["FILTER"] = "FILTER";
-})(IndicatorReason || (IndicatorReason = {}));
-const useIndicatorText = reason => {
-  let title = '';
-  let description = '';
-  const {
-    texts
-  } = useLocalization();
-  switch (reason) {
-    case IndicatorReason.FILTER:
-      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
-      break;
-    case IndicatorReason.SEARCH:
-      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
-      break;
-    case IndicatorReason.SORTING:
-      title = texts.table3.editing.rowIndicator.rowWillMove;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
-      break;
-  }
-  return {
-    title,
-    description
-  };
-};
-const Indicator = ({
-  reason,
-  columnName,
-  mountNode,
-  validationErrors
-}) => {
-  const container = React__default.useMemo(() => {
-    const element = document.createElement('div');
-    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
-    return element;
-  }, []);
-  const indicatorText = useIndicatorText(reason);
-  const hasValidationErrorsInRow = !!validationErrors;
-  React__default.useEffect(() => {
-    // mountNode could be null when rows are filtered
-    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
-    return () => {
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
-    };
-  }, [hasValidationErrorsInRow, mountNode]);
-  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
-  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: indicatorText.description.replace('[COLUMN]', columnName)
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "flex gap-1 hover:cursor-pointer"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: "info",
-    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
-  }), indicatorText.title)), container);
-};
-
 const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   const {
     defaultValue: _,
@@ -14788,7 +14827,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     column,
     isCellInDetailMode,
     align,
-    isCurrentRow,
+    isActiveRow,
     value,
     fontSize,
     ...attributes
@@ -14882,7 +14921,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       '!yt-focus-dark': isCellInDetailMode,
       [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
       // Only allow resizing when focused and truncation enabled
-      'focus:resize-y': isCurrentRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
+      'focus:resize-y': isActiveRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
     }),
     ref: ref,
     value: String(value !== null && value !== void 0 ? value : '')
@@ -14902,7 +14941,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     value,
     cell,
     error,
-    isCurrentRow,
+    isActiveRow,
     ...attributes
   } = props;
   const tableMeta = table.options.meta;
@@ -14980,11 +15019,30 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       tableMeta.editing.setDetailModeEditing(true);
     }
   };
+  const handleFocus = event => {
+    var _event$target;
+    const {
+      frozenColumnIndex: externalFrozenColumnIndex = -1,
+      frozenInternalColumnCount = 0
+    } = tableMeta.columnFreezing;
+    const tableElement = tableMeta.tableRef.current;
+    const frozenColumnIndex = externalFrozenColumnIndex > -1 ? externalFrozenColumnIndex + frozenInternalColumnCount : frozenInternalColumnCount - 1;
+    const cell = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[role="cell"]');
+    if (!tableElement || !cell) {
+      return;
+    }
+    const isEditing = true;
+    const leftScrollDistance = getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing);
+    if (leftScrollDistance !== null) {
+      tableElement.scrollLeft = leftScrollDistance;
+    }
+  };
   if (typeof controlRenderer === 'function') {
     return controlRenderer({
       ...attributes,
-      ref: refCallback,
       invalid: !!error,
+      onFocus: handleFocus,
+      ref: refCallback,
       setValue: nextValue => {
         if (nextValue !== value) {
           handleChange(nextValue);
@@ -15008,6 +15066,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
         '[&_input]:!yt-focus-dark': isCellInDetailMode
       }),
       onChange: handleDatepickerChange,
+      onFocus: handleFocus,
       onKeyDown: handleInputKeyDown,
       ref: refCallback,
       value: value
@@ -15016,12 +15075,14 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
       checked: Boolean(value),
       onChange: handleChange,
+      onFocus: handleFocus,
       ref: refCallback
     }));
   } else if (controlRenderer === 'textarea') {
     return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
       invalid: !!error,
       isCellInDetailMode: isCellInDetailMode,
+      onFocus: handleFocus,
       onKeyDown: handleInputKeyDown,
       ref: refCallback,
       fontSize: tableMeta.fontSize.size
@@ -15035,6 +15096,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     onChange: event => {
       handleChange(event.target.value);
     },
+    onFocus: handleFocus,
     onKeyDown: handleInputKeyDown,
     ref: refCallback,
     type: isNumber ? 'number' : undefined,
@@ -15060,7 +15122,7 @@ function EditingCell(props) {
   }));
 }
 const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$currentRowIndex, _column$columnDef$met;
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$rowAc, _column$columnDef$met;
   const {
     cell,
     column,
@@ -15118,22 +15180,21 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   // row move indicator
   const moveReason = ((_tableMeta$editing$ro = tableMeta.editing.rowMoveReason) === null || _tableMeta$editing$ro === void 0 ? void 0 : _tableMeta$editing$ro[cell.column.id]) || null;
   const rows = table.getRowModel().rows;
-  const currentRowIndex = tableMeta.currentRow.currentRowIndex;
-  const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
+  const isActiveRow = tableMeta.rowActive.rowActiveIndex !== undefined && ((_rows$tableMeta$rowAc = rows[tableMeta.rowActive.rowActiveIndex]) === null || _rows$tableMeta$rowAc === void 0 ? void 0 : _rows$tableMeta$rowAc.id) === row.id;
   const mountNode = React__default.useMemo(() => {
-    if (moveReason !== null && isCurrentRow && !error) {
+    if (moveReason !== null && isActiveRow && !error) {
       var _cellRef$current2, _cellRef$current2$par;
       return (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.firstChild;
     }
     return null;
-  }, [moveReason, isCurrentRow, error, cellRef]);
+  }, [moveReason, isActiveRow, error, cellRef]);
   const removeMoveReason = () => {
     tableMeta.editing.removeRowMoveReason();
   };
   React__default.useEffect(() => {
     // To avoid reseting move reason on another row hover,
     // we need to check for changes only if value got changed in the current row.
-    if (!isCurrentRow || error) {
+    if (!isActiveRow || error) {
       if (tableMeta.editing.rowMoveReason) {
         removeMoveReason();
       }
@@ -15148,7 +15209,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       removeMoveReason();
     }
     return removeMoveReason;
-  }, [value, tableMeta.currentRow.currentRowIndex, tableMeta.search.excludeUnmatchedResults, error]);
+  }, [value, tableMeta.rowActive.rowActiveIndex, tableMeta.search.excludeUnmatchedResults, error]);
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   const className = cn('py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]', {
     // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative
@@ -15175,15 +15236,15 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     value: value,
     cell: cell,
     error: error,
-    tabIndex: isCurrentRow ? 0 : -1,
-    isCurrentRow: isCurrentRow
+    tabIndex: isActiveRow ? 0 : -1,
+    isActiveRow: isActiveRow
   }));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && !error ? /*#__PURE__*/React__default.createElement(Indicator, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && !error ? ( /*#__PURE__*/React__default.createElement(Indicator, {
     reason: moveReason,
     columnName: String(cell.column.columnDef.header),
     mountNode: mountNode,
     validationErrors: []
-  }) : null, /*#__PURE__*/React__default.createElement("div", {
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
     className: !highlighted ? className : undefined,
     "data-align": columnMeta.align,
     "data-column-index": index,
@@ -15192,13 +15253,13 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     ref: cellRef,
     "data-invalid": !!error,
     "data-highlighted": highlighted
-  }, highlighted ? /*#__PURE__*/React__default.createElement(Highlight, {
+  }, highlighted ? ( /*#__PURE__*/React__default.createElement(Highlight, {
     current: highlightedAsCurrent,
     className: className,
     frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,
     index: index,
     tableRef: tableRef
-  }, content) : content));
+  }, content)) : content));
 });
 function getRowMoveReason(table, rowIndex, rowValues, cell, newValue, excludeUnmatchedResults) {
   var _table$getState$sorti;
@@ -15225,7 +15286,7 @@ function getRowMoveReason(table, rowIndex, rowValues, cell, newValue, excludeUnm
 }
 
 function Cell$2(props) {
-  var _rows$currentRowIndex;
+  var _rows$rowActiveIndex;
   const {
     column,
     row,
@@ -15243,8 +15304,8 @@ function Cell$2(props) {
   const columnMeta = column.columnDef.meta;
   const rowErrors = tableMeta.validation.errors ? tableMeta.validation.errors[row.id] : null;
   const isColumnError = hasError && rowErrors && !!rowErrors[column.id];
-  const currentRowIndex = tableMeta.currentRow.currentRowIndex;
-  const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
+  const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;
+  const isActiveRow = rowActiveIndex !== undefined && ((_rows$rowActiveIndex = rows[rowActiveIndex]) === null || _rows$rowActiveIndex === void 0 ? void 0 : _rows$rowActiveIndex.id) === row.id;
   let value = getValue();
   // When row has changes we always need to show the editing state value, end revert it to original value only when row got saved successfully.
   // Otherwise it might confuse user because it will look like display value is getting reverted everytime user leaves the row.
@@ -15269,8 +15330,8 @@ function Cell$2(props) {
     if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
       return false;
     }
-    const [currentRowIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
-    if (currentRowIndex === rowIndex && currentColumnIndex === index) {
+    const [rowActiveIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
+    if (rowActiveIndex === rowIndex && currentColumnIndex === index) {
       return true;
     }
     return false;
@@ -15279,7 +15340,7 @@ function Cell$2(props) {
     highlighted: memoedHighlight,
     highlightedAsCurrent: memoedHighlightCurrent
   };
-  if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused ||
+  if (tableMeta.editing.isEditing && columnMeta.control && (isActiveRow || isHoveredRow && !tableMeta.rowActive.isHoverStatePaused ||
   // When cell has error, we renderimg it in edit mode (UX reqirement)
   isColumnError)) {
     return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props, highlightProps));
@@ -15326,7 +15387,7 @@ const Cell$3 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
     rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = context.table.options.meta;
-  const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;
+  const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const isSelected = context.row.getIsSelected();
   const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;
   if (context.table.options.enableMultiRowSelection) {
@@ -15353,7 +15414,7 @@ const Cell$3 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       onClick: handleClick,
       // this is necessary to remove console spam from eslint
       onChange: () => false,
-      tabIndex: isCurrentRow ? 0 : -1
+      tabIndex: isActiveRow ? 0 : -1
     })));
   } else {
     const className = cn('!mt-0', getRadioClassnames());
@@ -15379,7 +15440,7 @@ const Cell$3 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   // we memo because we don't want the row re-rendering and removing focus from the checkbox
   // we can't default to the standard comparison because we need currentRow off the table meta
   // and we don't really care about re-rendering in any other scenario
-  return newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex && newProps.row.getIsSelected() !== oldProps.row.getIsSelected();
+  return newTableMeta.rowActive.rowActiveIndex === oldTableMeta.rowActive.rowActiveIndex && newProps.row.getIsSelected() !== oldProps.row.getIsSelected();
 });
 function createRowSelectionColumn(hasDrag, hasExpansion) {
   const size = hasDrag && hasExpansion ? 22 : 40;
@@ -15434,7 +15495,7 @@ function Header$3(context) {
 const MemoedCell$2 = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
     expandedRowRenderer,
-    isCurrentRow,
+    isActiveRow,
     isExpanded,
     row,
     table
@@ -15451,7 +15512,7 @@ const MemoedCell$2 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
       row.toggleExpanded();
     };
     const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;
-    const tabIndex = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;
+    const tabIndex = isActiveRow && !tableMeta.editing.isEditing ? 0 : -1;
     content = /*#__PURE__*/React__default.createElement(Tooltip, {
       title: title
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15476,7 +15537,7 @@ function Cell$4(props) {
   const tableMeta = context.table.options.meta;
   return /*#__PURE__*/React__default.createElement(MemoedCell$2, Object.assign({}, context, {
     expandedRowRenderer: expandedRowRenderer,
-    isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
     isExpanded: context.row.getIsExpanded()
   }));
 }
@@ -15559,10 +15620,10 @@ function createRowDragColumn(onRowDrag) {
   return {
     id: COLUMN_ID$4,
     header: Header$1,
-    cell: context => /*#__PURE__*/React__default.createElement(Cell$5, Object.assign({}, context, {
+    cell: context => ( /*#__PURE__*/React__default.createElement(Cell$5, Object.assign({}, context, {
       isSelected: context.row.getIsSelected(),
       onRowDrag: onRowDrag
-    })),
+    }))),
     footer: Footer$3,
     meta: {
       align: 'center',
@@ -15597,7 +15658,7 @@ function Group$3(props) {
     hasSeparator,
     id: header.id,
     index: header.index,
-    isPrinting: tableMeta.isPrinting,
+    isPrinting: tableMeta.printing.isPrinting,
     length: table.getRowModel().rows.length,
     meta: columnMeta,
     table
@@ -15747,7 +15808,6 @@ function useConvertChildrenToColumns(props, options, editing) {
       // compiler cannot get filtering out undefined items, so using the type casting here
       .filter(child => !!child); // need to remove undefined array items after processing the children
     }
-
     const columns = processChildren(props.children);
     if (options.enableRowExpansion && props.expandedRowRenderer) {
       columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));
@@ -15773,25 +15833,25 @@ function useConvertChildrenToColumns(props, options, editing) {
   }, [editing.isEditing]);
 }
 
-function usePrinting(isEnabled, loadAll, showWarningWhenPrintingLargeDataset = true) {
-  const [printWarningDialogVisibility, setPrintWarningDialogVisibility] = React__default.useState(showWarningWhenPrintingLargeDataset);
+function useTablePrinting(isEnabled = false, defaultIsWarningVisible = true, id) {
+  const [isWarningVisibleForLargeDatasets, setIsWarningVisibleForLargeDatasets] = React__default.useState(defaultIsWarningVisible);
   return {
     isEnabled,
-    loadAll,
-    printWarningDialogVisibility,
-    setPrintWarningDialogVisibility: isEnabled ? setPrintWarningDialogVisibility : () => undefined
+    isPrinting: id.endsWith('_print'),
+    isWarningVisibleForLargeDatasets,
+    setIsWarningVisibleForLargeDatasets: isEnabled ? setIsWarningVisibleForLargeDatasets : () => undefined
   };
 }
 
-function useShortcutsListener(table, shortcuts) {
+function useTableShortcutsListener(table, shortcuts) {
   const meta = table.options.meta;
   const rows = table.getRowModel().rows;
   React__default.useEffect(() => {
     const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
     const globalHandlers = [];
     // convert the shortcut into the correct format to register it
-    if (shortcuts && shortcutKeys.length && meta.currentRow.currentRowIndex !== undefined) {
-      const currentRow = rows[meta.currentRow.currentRowIndex];
+    if (shortcuts && shortcutKeys.length && meta.rowActive.rowActiveIndex !== undefined) {
+      const rowActive = rows[meta.rowActive.rowActiveIndex];
       shortcutKeys.forEach(key => {
         const handler = shortcuts[key];
         let keyDownHandler;
@@ -15812,7 +15872,7 @@ function useShortcutsListener(table, shortcuts) {
         }
         globalHandlers.push(createShortcutKeyDownHandler(keyDownHandlerOptions, event => {
           event.preventDefault();
-          keyDownHandler(currentRow === null || currentRow === void 0 ? void 0 : currentRow.original);
+          keyDownHandler(rowActive === null || rowActive === void 0 ? void 0 : rowActive.original);
         }));
       });
     }
@@ -15824,17 +15884,17 @@ function useShortcutsListener(table, shortcuts) {
         document.removeEventListener('keydown', handler);
       });
     };
-  }, [shortcuts, meta.currentRow.currentRowIndex, rows.length]);
+  }, [shortcuts, meta.rowActive.rowActiveIndex, rows.length]);
 }
 
-function useRowGoto(isEnabled, handler) {
+function useTableRowGoto(isEnabled = false, handler) {
   return {
     isEnabled,
     handleGoto: isEnabled && handler ? handler : () => undefined
   };
 }
 
-function useServerLoadingListener(table, loadPage) {
+function useTableServerLoadingListener(table, loadPage) {
   const sorting = table.getState().sorting;
   const columnFilters = table.getState().columnFilters;
   const search = table.getState().globalFilter;
@@ -15855,7 +15915,7 @@ function useEditingStateListener(table) {
         meta.editing.saveChangesIfNeeded();
       });
     }
-  }, [meta.currentRow.currentRowIndex]);
+  }, [meta.rowActive.rowActiveIndex]);
   // save if editing gets toggled off
   React__default.useEffect(() => {
     if (meta.editing.isEnabled) {
@@ -15863,14 +15923,14 @@ function useEditingStateListener(table) {
         requestAnimationFrame(() => {
           meta.editing.saveChangesIfNeeded();
         });
-      } else if (meta.currentRow.currentRowIndex === undefined) {
-        meta.currentRow.setCurrentRowIndex(0);
+      } else if (meta.rowActive.rowActiveIndex === undefined) {
+        meta.rowActive.setRowActiveIndex(0);
       }
     }
   }, [meta.editing.isEditing]);
 }
 
-function useSearch(isEnabled, excludeUnmatchedResultsInSearch = false, loadAll) {
+function useSearch(isEnabled, excludeUnmatchedResultsInSearch = false) {
   const [isSearching, setIsSearching] = React__default.useState(false);
   const [query, setQuery] = React__default.useState();
   const [enableHighlighting, setEnableHighlighting] = React__default.useState(true);
@@ -15890,7 +15950,6 @@ function useSearch(isEnabled, excludeUnmatchedResultsInSearch = false, loadAll)
     setHighlightedColumnIndexes,
     currentHighlightColumnIndex,
     setCurrentHighlightColumnIndex,
-    loadAll,
     isSearching,
     setIsSearching
   };
@@ -16147,91 +16206,72 @@ function usePauseShortcuts() {
   };
 }
 
-function useTable$1(props) {
-  var _ref, _defaultSettings$colu, _defaultSettings$rowH, _props$length;
-  // options
-  const options = useTablePreset(props);
-  const tableOptions = {
-    enableColumnFilters: options.enableFiltering,
-    enableColumnResizing: options.enableColumnResizing,
-    enableExpanding: options.enableRowExpansion,
-    enableGlobalFilter: options.enableSearch,
-    enableHiding: options.enableColumnHiding,
-    enableRowSelection: options.enableRowSelection,
-    enableMultiRowSelection: !options.enableRowSelectionSingle,
-    enableSorting: options.enableSorting
-  };
-  // resizing
-  if (tableOptions.enableColumnResizing) {
-    tableOptions.columnResizeMode = 'onChange';
-  }
-  // filtering
-  if (tableOptions.enableColumnFilters) {
-    if (!props.onFilter) {
-      tableOptions.filterFns = {
-        tacoFilter: (row, columnId, filter) => columnFilterFn(row.getValue(columnId), filter)
-      };
-      tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
-    }
-    // we don't tableOptions.manualFiltering = true; because it breaks global filtering, server filtering still works :shrug:
-  }
-  // search
-  if (tableOptions.enableGlobalFilter) {
-    // search is always client side, since we call loadAll when searching
-    tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
-      try {
-        if (row.original) {
-          const cell = row.getAllCells().find(cell => cell.column.id === columnId);
-          const columnMeta = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta;
-          if (cell && cell.column.getIsVisible() && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableSearch) {
-            const cellValue = getCellValueAsString(row.original[columnId], columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType);
-            if (cellValue !== undefined) {
-              return globalFilterFn(cellValue, searchQuery);
-            }
-          }
-          return false;
-        }
-      } catch {
-        //
-      }
-      return false;
-    };
-    tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
-    tableOptions.getColumnCanGlobalFilter = column => {
-      var _column$columnDef$met;
-      return (_column$columnDef$met = column.columnDef.meta.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
-    };
-  }
-  // sorting
-  if (options.enableSorting) {
-    if (props.onSort) {
-      tableOptions.manualSorting = true;
-      // onSort is called as a listener to let the consumer update their data, so we don't use onSortingChange
-    } else {
-      tableOptions.getSortedRowModel = reactTable$1.getSortedRowModel();
-    }
+function useTableFontSizeListener(table) {
+  const meta = table.options.meta;
+  const previousFontSizeRef = React__default.useRef(meta.fontSize.size);
+  useLazyEffect(() => {
+    const cellWidthDifference = getCellWidthDifference(`${previousFontSizeRef.current}-${meta.fontSize.size}`);
+    table.setColumnSizing(sizes => {
+      const minColumnSize = getCellMinWidth(meta.fontSize.size);
+      return Object.fromEntries(Object.entries(sizes).map(([columnName, prevColumnSize]) => {
+        // Prevents width value in the setting to go below the minColumnSize
+        const newSize = Math.max(minColumnSize, prevColumnSize + cellWidthDifference);
+        return [columnName, newSize];
+      }));
+    });
+    previousFontSizeRef.current = meta.fontSize.size;
+  }, [meta.fontSize.size]);
+}
+function getCellWidthDifference(fontSizeKey) {
+  switch (fontSizeKey) {
+    case `${TableFontSizes.small}-${TableFontSizes.medium}`:
+    case `${TableFontSizes.medium}-${TableFontSizes.large}`:
+      return 8;
+    case `${TableFontSizes.medium}-${TableFontSizes.small}`:
+    case `${TableFontSizes.large}-${TableFontSizes.medium}`:
+      return -8;
+    case `${TableFontSizes.small}-${TableFontSizes.large}`:
+      return 16;
+    case `${TableFontSizes.large}-${TableFontSizes.small}`:
+      return -16;
+    default:
+      return 0;
   }
-  const [defaultSettings, setSettings] = useSettings(props.id, props.defaultSettings, props.onChangeSettings);
-  // custom features
-  const columnFreezing = useColumnFreezing( // temporarily see if deprecated frozenColumnCount is there
-  (_ref = (_defaultSettings$colu = defaultSettings.columnFreezingIndex) !== null && _defaultSettings$colu !== void 0 ? _defaultSettings$colu : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.frozenColumnCount) !== null && _ref !== void 0 ? _ref : props.defaultColumnFreezingIndex, options);
-  const columnOrdering = useColumnOrdering(options);
-  const currentRow = useCurrentRow(props.defaultCurrentRowIndex);
+}
+
+function useTable$1(props, ref) {
+  var _settings$columnFreez, _props$length;
+  // load any persisted table settings and merge them with any defaults
+  const [settings, setSettings] = useSettings(props.id, props.defaultSettings, props.onChangeSettings);
+  // configure table3 options
+  const options = useTablePreset(props);
+  // configure react-table built-in features
+  const tableOptions = configureReactTableOptions(props, options);
+  // configure custom features
+  const columnFreezing = useColumnFreezing((_settings$columnFreez = settings.columnFreezingIndex) !== null && _settings$columnFreez !== void 0 ? _settings$columnFreez : props.defaultColumnFreezingIndex, options);
+  // can't change due to rename to "active row"
   const validation = useValidation(props.onCellValidate, props.onRowValidate);
+  // not relevant to common table
   const editing = useEditing(options.enableEditing, validation, props.onSave);
-  const fontSize = useFontSize(options.enableFontSize, defaultSettings.fontSize);
-  const hoverState = usePauseHoverState();
-  const printing = usePrinting(options.enablePrinting, props.loadAll, defaultSettings.showWarningWhenPrintingLargeDataset);
+  // needs to be moved
   const rowActions = useRowActions$1(props.actionsForRow, props.actionsForRowLength);
-  const rowClick = useRowClick(props.onRowClick);
+  // not relevant to common table
   const rowDrag = useRowDrag(options.enableRowDrag);
+  // not relevant to common table
   const rowDrop = useRowDrop(options.enableRowDrop, props.onRowDrop);
-  const rowGoto = useRowGoto(options.enableRowGoto, props.onRowGoto);
-  const rowHeight = useRowHeight(options.enableRowHeight, // temporarily see if deprecated rowDensity is there
-  (_defaultSettings$rowH = defaultSettings.rowHeight) !== null && _defaultSettings$rowH !== void 0 ? _defaultSettings$rowH : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.rowDensity);
-  const rowSelection = useRowSelection();
-  const search = useSearch(options.enableSearch, defaultSettings.excludeUnmatchedRecordsInSearch, props.loadAll);
+  // haven't migrated load all/server loading yet
+  const search = useSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
   const shortcutsState = usePauseShortcuts();
+  // custom features - shared/migrated
+  const columnOrdering = useTableColumnOrdering(options.enableColumnOrdering);
+  const fontSize = useTableFontSize(options.enableFontSize, settings.fontSize);
+  const printing = useTablePrinting(options.enablePrinting, settings.showWarningWhenPrintingLargeDataset, props.id);
+  const rowActive = useTableRowActive$1(true, props.defaultCurrentRowIndex);
+  const rowClick = useTableRowClick(true, props.onRowClick);
+  const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
+  const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
+  const rowSelection = useTableRowSelection(options.enableRowSelection);
+  const server = useTableServerLoading(props.loadPage, props.loadAll);
   // columns
   const {
     columns,
@@ -16241,13 +16281,13 @@ function useTable$1(props) {
   } = useConvertChildrenToColumns(props, options, editing);
   // built-in features
   const initialState = React__default.useMemo(() => {
-    var _defaultSettings$colu2, _defaultSettings$colu3, _props$defaultSetting, _props$defaultSetting3;
+    var _settings$columnSizin, _settings$columnVisib, _props$defaultSetting, _props$defaultSetting3;
     const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
     const state = {
-      columnOrder: ensureOrdering(columns, defaultSettings.columnOrder),
-      columnSizing: (_defaultSettings$colu2 = defaultSettings.columnSizing) !== null && _defaultSettings$colu2 !== void 0 ? _defaultSettings$colu2 : defaultColumnSizing,
-      columnVisibility: (_defaultSettings$colu3 = defaultSettings.columnVisibility) !== null && _defaultSettings$colu3 !== void 0 ? _defaultSettings$colu3 : defaultColumnVisibility,
-      sorting: defaultSettings.sorting ? defaultSettings.sorting.filter(sanitizeSortedColumns) : defaultSorting
+      columnOrder: ensureOrdering(columns, [COLUMN_ID, COLUMN_ID$1], settings.columnOrder),
+      columnSizing: (_settings$columnSizin = settings.columnSizing) !== null && _settings$columnSizin !== void 0 ? _settings$columnSizin : defaultColumnSizing,
+      columnVisibility: (_settings$columnVisib = settings.columnVisibility) !== null && _settings$columnVisib !== void 0 ? _settings$columnVisib : defaultColumnVisibility,
+      sorting: settings.sorting ? settings.sorting.filter(sanitizeSortedColumns) : defaultSorting
     };
     // we don't save these outside the table, but they need to be here for print to inherit them - see PrintButton.tsx
     if ((_props$defaultSetting = props.defaultSettings) !== null && _props$defaultSetting !== void 0 && _props$defaultSetting.columnFilters) {
@@ -16270,7 +16310,7 @@ function useTable$1(props) {
       excludeUnmatchedRecordsInSearch: search.excludeUnmatchedResults,
       fontSize: fontSize.isEnabled ? fontSize.size : undefined,
       rowHeight: rowHeight.isEnabled ? rowHeight.height : undefined,
-      showWarningWhenPrintingLargeDataset: printing.printWarningDialogVisibility,
+      showWarningWhenPrintingLargeDataset: printing.isWarningVisibleForLargeDatasets,
       sorting: state.sorting
     };
   };
@@ -16284,16 +16324,15 @@ function useTable$1(props) {
     meta: {
       columnFreezing,
       columnOrdering,
-      currentRow,
       editing,
       enableFooter: options.enableFooter,
       fontSize,
       getSettings,
-      hoverState,
       isPrinting: props.id.endsWith('_print'),
       isUsingServer: !!props.loadPage,
       printing,
       rowActions: rowActions,
+      rowActive,
       rowClick: rowClick,
       rowDrag,
       rowDrop,
@@ -16301,24 +16340,91 @@ function useTable$1(props) {
       rowHeight,
       rowSelection,
       search,
+      server,
       shortcutsState,
+      tableRef: ref,
       validation
     }
   });
   // listeners
-  useCurrentRowListener(table);
   useEditingStateListener(table);
-  useFilteringStateListener(table, props.onFilter);
-  useRowSelectionListener(table, props.onRowSelect);
   useSettingsStateListener(table, setSettings);
-  useShortcutsListener(table, props.shortcuts);
-  useServerLoadingListener(table, props.loadPage);
-  useSortingStateListener(table, props.onSort);
+  // listeners - shared/migrated
+  useTableDataListener(table);
+  useTableFilterListener(table, props.onFilter);
+  useTableFontSizeListener(table);
+  useTableRowSelectionListener(table, props.onRowSelect);
+  useTableServerLoadingListener(table, props.loadPage);
+  useTableShortcutsListener(table, props.shortcuts);
+  useTableSortingListener$1(table, props.onSort);
   return {
     table,
     length: (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : props.data.length
   };
 }
+function configureReactTableOptions(props, options) {
+  const tableOptions = {
+    enableColumnFilters: options.enableFiltering,
+    enableColumnResizing: options.enableColumnResizing,
+    enableExpanding: options.enableRowExpansion,
+    enableGlobalFilter: options.enableSearch,
+    enableHiding: options.enableColumnHiding,
+    enableRowSelection: options.enableRowSelection,
+    enableMultiRowSelection: !options.enableRowSelectionSingle,
+    enableSorting: options.enableSorting
+  };
+  // resizing
+  if (tableOptions.enableColumnResizing) {
+    tableOptions.columnResizeMode = 'onChange';
+  }
+  // filtering
+  if (tableOptions.enableColumnFilters) {
+    if (!props.onFilter) {
+      tableOptions.filterFns = {
+        tacoFilter: (row, columnId, filter) => columnFilterFn(row.getValue(columnId), filter)
+      };
+      tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
+    }
+    // we don't tableOptions.manualFiltering = true; because it breaks global filtering, server filtering still works :shrug:
+  }
+  // search
+  if (tableOptions.enableGlobalFilter) {
+    // search is always client side, since we call loadAll when searching
+    tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
+      try {
+        if (row.original) {
+          const cell = row.getAllCells().find(cell => cell.column.id === columnId);
+          const columnMeta = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta;
+          if (cell && cell.column.getIsVisible() && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableSearch) {
+            const cellValue = getCellValueAsString(row.original[columnId], columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType);
+            if (cellValue !== undefined) {
+              return globalFilterFn(cellValue, searchQuery);
+            }
+          }
+          return false;
+        }
+      } catch {
+        //
+      }
+      return false;
+    };
+    tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
+    tableOptions.getColumnCanGlobalFilter = column => {
+      var _column$columnDef$met;
+      return (_column$columnDef$met = column.columnDef.meta.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
+    };
+  }
+  // sorting
+  if (options.enableSorting) {
+    if (props.onSort) {
+      tableOptions.manualSorting = true;
+      // onSort is called as a listener to let the consumer update their data, so we don't use onSortingChange
+    } else {
+      tableOptions.getSortedRowModel = reactTable$1.getSortedRowModel();
+    }
+  }
+  return tableOptions;
+}
 
 const ExpandedRow = /*#__PURE__*/React__default.memo(function ExpandedRow(props) {
   var _renderer;
@@ -16383,9 +16489,9 @@ function SkeletonRow(props) {
   } = props;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "contents"
-  }, columns.map(column => /*#__PURE__*/React__default.createElement(SkeletonCell, Object.assign({
+  }, columns.map(column => ( /*#__PURE__*/React__default.createElement(SkeletonCell, Object.assign({
     key: column.id
-  }, otherProps))));
+  }, otherProps)))));
 }
 
 // Note - latest react-virtual requires an inner container, and that doesn't work with css grid,
@@ -16434,17 +16540,17 @@ function createBodyRenderer(props, rows, table, tableRef, virtualiser, setExpand
           row: row,
           table: table,
           tableRef: tableRef
-        }, row.getVisibleCells().map((cell, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        }, row.getVisibleCells().map((cell, index) => ( /*#__PURE__*/React__default.createElement(React__default.Fragment, {
           key: cell.id
         }, reactTable$1.flexRender(cell.column.columnDef.cell, {
           ...cell.getContext(),
           index,
           tableRef
-        })))), row.getIsExpanded() ? /*#__PURE__*/React__default.createElement(ExpandedRow, {
+        }))))), row.getIsExpanded() ? ( /*#__PURE__*/React__default.createElement(ExpandedRow, {
           data: row.original,
           renderer: props.expandedRowRenderer,
           registerSize: createSetSizeHandler(virtualRow.index)
-        }) : null);
+        })) : null);
       }), paddingBottom ? /*#__PURE__*/React__default.createElement("div", {
         style: {
           height: paddingBottom
@@ -16563,10 +16669,10 @@ function Search$2(props) {
       tableMeta.search.setIsSearching(true);
       // load all data if that is possible
       const _temp = function () {
-        if (tableMeta.search.loadAll && loading === LoadingState.Incomplete) {
+        if (tableMeta.server.loadAll && loading === LoadingState.Incomplete) {
           setLoading(LoadingState.Loading);
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {
+          return Promise.resolve(tableMeta.server.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {
             setLoading(LoadingState.Completed);
           });
         }
@@ -16584,14 +16690,16 @@ function Search$2(props) {
     setQuery(String(query !== null && query !== void 0 ? query : ''));
   };
   const handleClear = () => {
-    var _rows$rowIndex;
-    const [rowIndex, cellIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex || 0];
+    const [rowIndex = null, cellIndex = null] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex || 0];
     const rows = table.getRowModel().rows;
-    const rowId = ((_rows$rowIndex = rows[rowIndex]) === null || _rows$rowIndex === void 0 ? void 0 : _rows$rowIndex.id) || null;
     tableMeta.search.setQuery('');
     // Need to save row id and cell index, to be able to find the row in the table with updated indexes, after global filter will be reset.
     lastCellIndex.value = String(cellIndex);
-    setRowIdToNavigate(rowId);
+    if (rowIndex !== null) {
+      var _rows$rowIndex;
+      const rowId = ((_rows$rowIndex = rows[rowIndex]) === null || _rows$rowIndex === void 0 ? void 0 : _rows$rowIndex.id) || null;
+      setRowIdToNavigate(rowId);
+    }
   };
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
@@ -16608,7 +16716,7 @@ function Search$2(props) {
       const rows = table.getRowModel().rows;
       const rowIndex = rows.findIndex(row => row.id === rowIdToNavigate);
       tableMeta.search.setIsSearching(false);
-      tableMeta.currentRow.setCurrentRowIndex(rowIndex);
+      tableMeta.rowActive.setRowActiveIndex(rowIndex);
       scrollTo(rowIndex);
       setRowIdToNavigate(null);
     }
@@ -16710,7 +16818,7 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
     tableMeta.search.setCurrentHighlightColumnIndex(undefined);
   }
   if (firstRowIndex !== undefined) {
-    tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);
+    tableMeta.rowActive.setRowActiveIndex(firstRowIndex);
   }
   return firstRowIndex;
 }
@@ -16744,12 +16852,12 @@ function FilterColumn(props) {
     return /*#__PURE__*/React__default.createElement(Select2.Option, {
       key: column.id,
       value: column.id,
-      postfix: !column.getIsVisible() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+      postfix: !column.getIsVisible() ? ( /*#__PURE__*/React__default.createElement(Tooltip, {
         title: texts.table3.filters.hiddenColumn
       }, /*#__PURE__*/React__default.createElement(Icon, {
         name: "eye-off",
         className: "text-grey-500 !h-5 !w-5"
-      })) : undefined,
+      }))) : undefined,
       disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
     }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
   }))));
@@ -16776,10 +16884,10 @@ function FilterComparator(props) {
     disabled: !column,
     onChange: handleChange,
     value: value
-  }), validComparators.map(comparator => /*#__PURE__*/React__default.createElement(Select2.Option, {
+  }), validComparators.map(comparator => ( /*#__PURE__*/React__default.createElement(Select2.Option, {
     key: comparator,
     value: comparator
-  }, getComparatorText(comparator, texts, column))));
+  }, getComparatorText(comparator, texts, column)))));
 }
 function guessComparatorsBasedOnControl(column) {
   var _column$columnDef$met;
@@ -17174,6 +17282,12 @@ function FiltersButton(props) {
     setFilters([]);
     setPlaceholderCount(1);
   };
+  const handleClose = React__default.useCallback(open => {
+    if (!open) {
+      setFilters(appliedFilters);
+      setPlaceholderCount(appliedFilters.length === 0 ? 1 : 0);
+    }
+  }, [appliedFilters]);
   // Because filters can be reset from outside
   React__default.useEffect(() => {
     if (appliedFilters.length === 0) {
@@ -17186,7 +17300,9 @@ function FiltersButton(props) {
     className: cn({
       '!wcag-blue-100': appliedFilters.length
     }),
-    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+    popover: popoverProps => ( /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+      onChange: handleClose
+    }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-[40rem] flex-col gap-4"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex h-8"
@@ -17198,7 +17314,7 @@ function FiltersButton(props) {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
     }, texts.table3.filters.total.replace('[CURRENT]', new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', new Intl.NumberFormat(locale).format(total))))), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
-    }, filters.map((filter, index) => /*#__PURE__*/React__default.createElement(Filter$1, {
+    }, filters.map((filter, index) => ( /*#__PURE__*/React__default.createElement(Filter$1, {
       key: `filter_${index}`,
       allColumns: allColumns,
       filter: filter,
@@ -17206,14 +17322,14 @@ function FiltersButton(props) {
       position: index,
       onChange: handleChangeFilter,
       onRemove: handleRemoveFilter
-    })), [...Array(placeholderCount)].map((_, index) => /*#__PURE__*/React__default.createElement(Placeholder, {
+    }))), [...Array(placeholderCount)].map((_, index) => ( /*#__PURE__*/React__default.createElement(Placeholder, {
       key: `placeholder_${index}`,
       allColumns: allColumns,
       filters: filters,
       position: filters.length + index,
       onCreate: handleCreateFilterFromPlaceholder,
       onRemove: placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined
-    })), /*#__PURE__*/React__default.createElement("div", {
+    }))), /*#__PURE__*/React__default.createElement("div", {
       className: "justify-start"
     }, /*#__PURE__*/React__default.createElement(Button$1, {
       appearance: "discrete",
@@ -17225,16 +17341,16 @@ function FiltersButton(props) {
     }, "Clear"), /*#__PURE__*/React__default.createElement(Button$1, {
       appearance: "primary",
       onClick: handleApply
-    }, "Apply"))))),
+    }, "Apply")))))),
     ref,
-    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+    tooltip: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
       keys: {
         key: 'f',
         meta: true,
         shift: true
       }
-    }))
+    })))
   };
   if (!isLargeScreen && !appliedFilters.length) {
     return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, buttonProps, {
@@ -17561,14 +17677,14 @@ function PrintButton(props) {
     texts
   } = useLocalization();
   const toast = useToast();
-  const [isPrinting, setIsPrinting] = React__default.useState(false);
+  const [isCurrentlyPrinting, setIsCurrentlyPrinting] = React__default.useState(false);
   const [showWarningDialog, setShowWarningDialog] = React__default.useState(false);
   const loadingToastRef = React__default.useRef(null);
   const buttonRef = React__default.useRef(null);
   const tableMeta = table.options.meta;
   const state = table.getState();
   const {
-    printWarningDialogVisibility
+    isWarningVisibleForLargeDatasets
   } = tableMeta.printing;
   // When changing printTableId, update packages/taco/src/components/Table3/Table3.tsx file and other usages where
   // printTableId is used to figure out whether the table is a print table or not.
@@ -17621,8 +17737,8 @@ function PrintButton(props) {
   const restoreTableDataWithoutSearch = function () {
     try {
       const _temp = _catch(function () {
-        var _tableMeta$printing$l, _tableMeta$printing;
-        return Promise.resolve((_tableMeta$printing$l = (_tableMeta$printing = tableMeta.printing).loadAll) === null || _tableMeta$printing$l === void 0 ? void 0 : _tableMeta$printing$l.call(_tableMeta$printing, table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+        var _tableMeta$server$loa, _tableMeta$server;
+        return Promise.resolve((_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadAll) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
       }, function (error) {
         handleLoadingError(error);
       });
@@ -17635,11 +17751,11 @@ function PrintButton(props) {
     try {
       function _temp3() {
         var _loadingToastRef$curr2;
-        setIsPrinting(false);
+        setIsCurrentlyPrinting(false);
         (_loadingToastRef$curr2 = loadingToastRef.current) === null || _loadingToastRef$curr2 === void 0 ? void 0 : _loadingToastRef$curr2.close();
       }
       const _temp2 = function () {
-        if (tableMeta.printing.loadAll && excludeUnmatchedResults) {
+        if (tableMeta.server.loadAll && excludeUnmatchedResults) {
           return Promise.resolve(restoreTableDataWithoutSearch()).then(function () {});
         }
       }();
@@ -17657,11 +17773,11 @@ function PrintButton(props) {
       let _exit = false;
       function _temp6(_result3) {
         if (_exit) return _result3;
-        if (hasNonSafeCellCount && printWarningDialogVisibility) {
+        if (hasNonSafeCellCount && isWarningVisibleForLargeDatasets) {
           setShowWarningDialog(true);
         } else {
           // only set printing (mount the iframe) when the data has loaded, it prevents repaint performance slow downs
-          setIsPrinting(true);
+          setIsCurrentlyPrinting(true);
         }
       }
       loadingToastRef.current = toast.loading(texts.table3.print.loading);
@@ -17670,7 +17786,7 @@ function PrintButton(props) {
       // if loadAll is not defined, just print with what we've got
       // don't compare length to data.length because the api might be choosing not to return all for performance
       const _temp5 = function () {
-        if (!tableMeta.printing.loadAll) {
+        if (!tableMeta.server.loadAll) {
           const {
             data
           } = tableProps;
@@ -17678,7 +17794,7 @@ function PrintButton(props) {
           hasNonSafeCellCount = cellCount > SAFE_PRINT_CELL_COUNT;
         } else {
           const _temp4 = _catch(function () {
-            return Promise.resolve(tableMeta.printing.loadAll(table.getState().sorting, table.getState().columnFilters,
+            return Promise.resolve(tableMeta.server.loadAll(table.getState().sorting, table.getState().columnFilters,
             // We need to pass search query to the server when printing, to be able to render correct data set in iFrame,
             // But in "display" table, search is performed only on client side, so we'll need to request data again without search query,
             // when printing will be finished.
@@ -17705,12 +17821,12 @@ function PrintButton(props) {
     }
   };
   const handleWarningDialogAccept = () => {
-    setIsPrinting(true);
+    setIsCurrentlyPrinting(true);
   };
   const handleWarningDialogCancel = function () {
     try {
       const _temp7 = function () {
-        if (tableMeta.printing.loadAll && excludeUnmatchedResults) {
+        if (tableMeta.server.loadAll && excludeUnmatchedResults) {
           return Promise.resolve(restoreTableDataWithoutSearch()).then(function () {});
         }
       }();
@@ -17725,22 +17841,22 @@ function PrintButton(props) {
     setShowWarningDialog(false);
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
-    disabled: isPrinting,
+    disabled: isCurrentlyPrinting,
     icon: "print",
     onClick: handlePrint,
     "aria-label": texts.table3.print.tooltip,
     tooltip: texts.table3.print.tooltip,
     ref: buttonRef
-  }), isPrinting && iframeTableProps.data !== null && /*#__PURE__*/React__default.createElement(PrintIFrame, {
+  }), isCurrentlyPrinting && iframeTableProps.data !== null && ( /*#__PURE__*/React__default.createElement(PrintIFrame, {
     onAfterPrint: handleAfterPrint,
     onBeforePrint: handleBeforePrint,
     tableProps: iframeTableProps
-  }), /*#__PURE__*/React__default.createElement(WarningDialog, {
+  })), /*#__PURE__*/React__default.createElement(WarningDialog, {
     open: showWarningDialog,
     onAccept: handleWarningDialogAccept,
     onClose: handleWarningDialogClose,
     onCancel: handleWarningDialogCancel,
-    onVisibilityChange: tableMeta.printing.setPrintWarningDialogVisibility
+    onVisibilityChange: tableMeta.printing.setIsWarningVisibleForLargeDatasets
   }));
 }
 
@@ -17948,17 +18064,17 @@ function ColumnSettingsPopover(props) {
     })) {
       return;
     }
-    table.setColumnOrder(currentOrder => ensureOrdering(allColumns, SortablePrimitive.arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
+    table.setColumnOrder(currentOrder => ensureOrdering(allColumns, [COLUMN_ID, COLUMN_ID$1], SortablePrimitive.arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
   };
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     anchor: trigger
   }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
     className: "flex max-w-sm flex-col gap-2"
-  }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
+  }, table.options.enableHiding ? ( /*#__PURE__*/React__default.createElement(Input, {
     onChange: event => setQuery(event.target.value),
     placeholder: texts.table3.columnSettings.search,
     value: query
-  }) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? /*#__PURE__*/React__default.createElement(Container, {
+  })) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? ( /*#__PURE__*/React__default.createElement(Container, {
     reorder: handleReorder
   }, /*#__PURE__*/React__default.createElement(List$1, {
     id: "columns",
@@ -17974,12 +18090,12 @@ function ColumnSettingsPopover(props) {
       column: column,
       draggable: (_column$columnDef$met5 = column.columnDef.meta) === null || _column$columnDef$met5 === void 0 ? void 0 : _column$columnDef$met5.enableOrdering
     }));
-  }))) : /*#__PURE__*/React__default.createElement("div", {
+  })))) : ( /*#__PURE__*/React__default.createElement("div", {
     className: listClassName
   }, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column$1, {
     column: column,
     key: column.id
-  })) : texts.table3.columnSettings.noResults))));
+  })) : texts.table3.columnSettings.noResults)))));
 }
 
 function SettingsButton(props) {
@@ -18000,11 +18116,11 @@ function SettingsButton(props) {
       case 'columnSettings':
         {
           if (hasColumnSettings) {
-            popoverElement = props => /*#__PURE__*/React__default.createElement(ColumnSettingsPopover, Object.assign({}, props, {
+            popoverElement = props => ( /*#__PURE__*/React__default.createElement(ColumnSettingsPopover, Object.assign({}, props, {
               open: true,
               onChange: handleClosePopover,
               table: table
-            }));
+            })));
           }
         }
     }
@@ -18012,25 +18128,25 @@ function SettingsButton(props) {
   return /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": texts.table3.otherOptions.tooltip,
     icon: "sliders",
-    menu: popoverElement ? undefined : menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
+    menu: popoverElement ? undefined : menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
       align: "end"
-    }, table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    }, table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? ( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "columns",
       onClick: () => setPopover('columnSettings')
-    }, texts.table3.columnSettings.button) : null, tableMeta.rowHeight.isEnabled || tableMeta.fontSize.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Separator, null) : null, tableMeta.rowHeight.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    }, texts.table3.columnSettings.button)) : null, tableMeta.rowHeight.isEnabled || tableMeta.fontSize.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Separator, null) : null, tableMeta.rowHeight.isEnabled ? ( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: `height-${tableMeta.rowHeight.height}`,
       subMenu: () => /*#__PURE__*/React__default.createElement(RowHeight, {
         table: table
       })
-    }, texts.table3.rowHeight.tooltip) : null, tableMeta.fontSize.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    }, texts.table3.rowHeight.tooltip)) : null, tableMeta.fontSize.isEnabled ? ( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "font-size",
       subMenu: () => /*#__PURE__*/React__default.createElement(FontSize$1, {
         table: table
       })
-    }, texts.table3.fontSize.tooltip) : null, customSettings ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Menu$1.Separator, null), customSettings.map(customSetting => {
+    }, texts.table3.fontSize.tooltip)) : null, customSettings ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Menu$1.Separator, null), customSettings.map(customSetting => {
       const props = tableMeta.getSettings();
       return customSetting(props);
-    })) : null)),
+    }))) : null))),
     popover: popoverElement,
     onClickCapture: event => event.preventDefault(),
     tooltip: texts.table3.otherOptions.tooltip
@@ -18155,7 +18271,6 @@ const getCellHeightPadding = (height, fontSize) => {
           // py-1.5
         }
       }
-
     case 'tall':
       {
         switch (fontSize) {
@@ -18202,7 +18317,6 @@ const getCellWidthPadding = fontSize => {
     // py-1.5
   }
 };
-
 const useCssVars = (height, fontSize) => {
   const style = {
     '--table3-cell-padding-x': getCellWidthPadding(fontSize),
@@ -18268,7 +18382,7 @@ function ErrorAlert(props) {
   };
   // Navigate to row and focus first invalid cell
   const navigateToRow = rowIndex => {
-    tableMeta.currentRow.setCurrentRowIndex(rowIndex);
+    tableMeta.rowActive.setRowActiveIndex(rowIndex);
     scrollToIndex(rowIndex, {
       align: 'center'
     });
@@ -18319,7 +18433,7 @@ function ErrorAlert(props) {
   const getCoreRow = React__default.useCallback(rowId => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4"
-  }, errorsRowIds.length ? /*#__PURE__*/React__default.createElement(Alert, {
+  }, errorsRowIds.length ? ( /*#__PURE__*/React__default.createElement(Alert, {
     state: "error",
     className: "mb-1"
   }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("b", null, errorsRowIds.length, " ", texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)), ' '), rowIdentifierHeader || texts.table3.validation.index, ' ', errorsRowIds.map((rowId, index) => {
@@ -18334,7 +18448,7 @@ function ErrorAlert(props) {
     }, rowIdentifier ? coreRow === null || coreRow === void 0 ? void 0 : coreRow.original[rowIdentifier] : coreRow === null || coreRow === void 0 ? void 0 : coreRow.index), /*#__PURE__*/React__default.createElement("span", {
       key: `${rowId}_comma`
     }, index < errorsRowIds.length - 1 ? ',' : ''));
-  }), texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)) : null, /*#__PURE__*/React__default.createElement(FilterResetDialog, {
+  }), texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length))) : null, /*#__PURE__*/React__default.createElement(FilterResetDialog, {
     open: resetFiltersConfirmationOpen,
     onClose: () => {
       setResetFiltersConfirmationOpen(false);
@@ -18376,6 +18490,8 @@ function FilterResetDialog(props) {
   }, texts.table3.validation.resetFiltersDialog.confirm)))));
 }
 
+const fixedForwardRef = React__default.forwardRef;
+
 function useTable3DataLoader(fetch, fetchAll, options = {
   pageSize: 100
 }) {
@@ -18509,21 +18625,19 @@ function Group$4(_) {
   return null;
 }
 Group$4.displayName = 'Table3Group';
-// Cast the old forwardRef to the new one
-const fixedForwardRef = React__default.forwardRef;
 const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const {
     emptyState: EmptyState,
     customSettings,
     toolbarLeft,
     toolbarRight,
-    defaultCurrentRowIndex
+    defaultCurrentRowIndex: defaultRowActiveIndex
   } = props;
   const internalRef = useMergedRef(ref);
   const {
     table,
     length
-  } = useTable$1(props);
+  } = useTable$1(props, internalRef);
   useTableRefInstanceSetup(table, internalRef);
   React__default.useEffect(() => {
     if (props.autoFocus) {
@@ -18542,8 +18656,8 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     // On a very first render, the tanstack table rendered without any rows,
     // so we delaying default row scrolling logic with using of requestAnimation frame
     const animationFrameId = requestAnimationFrame(() => {
-      if (defaultCurrentRowIndex) {
-        scrollToIndex(defaultCurrentRowIndex, {
+      if (defaultRowActiveIndex) {
+        scrollToIndex(defaultRowActiveIndex, {
           align: 'center'
         });
       }
@@ -18562,9 +18676,12 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
       if (eventOriginatedFromCombobox || dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current)) || tableMeta.shortcutsState.isPaused) {
         return;
       }
-      tableMeta.hoverState.handleKeyDown(event);
-      tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex, tableMeta.editing.isEditing, internalRef);
-      tableMeta.rowClick.handleKeyDown(event, table);
+      const rows = table.getRowModel().rows;
+      tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex, tableMeta.editing.isEditing ? undefined : internalRef);
+      if (tableMeta.rowActive.rowActiveIndex !== undefined) {
+        var _rows$tableMeta$rowAc;
+        tableMeta.rowClick.handleKeyDown(event, (_rows$tableMeta$rowAc = rows[tableMeta.rowActive.rowActiveIndex]) === null || _rows$tableMeta$rowAc === void 0 ? void 0 : _rows$tableMeta$rowAc.original);
+      }
       tableMeta.rowSelection.handleKeyDown(event, table);
       tableMeta.editing.handleKeyDown(event);
     };
@@ -18576,16 +18693,16 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143
   // scrollToIndex function changes when row count changes, so it is important to update handlers with new
   // scrollToIndex function.
-  [scrollToIndex, tableMeta.editing.isEditing, internalRef.current]);
+  [scrollToIndex, tableMeta.editing.isEditing, internalRef.current, tableMeta.rowActive.rowActiveIndex]);
   const handleBlur = tableMeta.editing.isEnabled ? event => {
     tableMeta.editing.handleBlur(event);
   } : undefined;
-  const handleFocus = tableMeta.currentRow.currentRowIndex === undefined ? event => {
-    tableMeta.currentRow.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);
+  const handleFocus = tableMeta.rowActive.rowActiveIndex === undefined ? event => {
+    tableMeta.rowActive.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);
   } : undefined;
   // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row
-  const handleMouseCapture = tableMeta.currentRow.currentRowIndex === undefined ? event => {
-    tableMeta.currentRow.handleMouseCapture(event, table.getRowModel().rows.length);
+  const handleMouseCapture = tableMeta.rowActive.rowActiveIndex === undefined ? event => {
+    tableMeta.rowActive.handleMouseCapture(event, table.getRowModel().rows.length);
   } : undefined;
   const handleScroll = function (event) {
     try {
@@ -18604,7 +18721,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // if the table is a print table or not.
   const {
     style: cssGridStyle
-  } = useCssGrid(table, tableMeta.isPrinting, tableMeta.rowActions.actionsForRowLength, tableMeta.fontSize.size);
+  } = useCssGrid(table, tableMeta.printing.isPrinting, tableMeta.rowActions.actionsForRowLength, tableMeta.fontSize.size);
   const {
     style: cssVars
   } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);
@@ -18618,12 +18735,11 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const columnFreezingStyle = useColumnFreezingStyle(props.id, table);
   const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);
   const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;
-  const isPrinting = tableMeta.isPrinting;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFreezingStyle ? /*#__PURE__*/React__default.createElement("style", {
     "data-taco": "table3-column-freezing-styles"
-  }, columnFreezingStyle) : null, headerOffsetStyle && !isPrinting ? /*#__PURE__*/React__default.createElement("style", {
+  }, columnFreezingStyle) : null, headerOffsetStyle && !tableMeta.printing.isPrinting ? ( /*#__PURE__*/React__default.createElement("style", {
     "data-taco": "table3-column-header-offset-styles"
-  }, headerOffsetStyle) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
+  }, headerOffsetStyle)) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
     table: table,
     tableProps: props,
     total: length,
@@ -18642,7 +18758,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-font-size": tableMeta.fontSize.size,
     "data-editing": tableMeta.editing.isEditing,
     "data-horizontally-scrolled": tableMeta.columnFreezing.horizontallyScrolled,
-    "data-pause-hover": tableMeta === null || tableMeta === void 0 ? void 0 : tableMeta.hoverState.isPaused,
+    "data-pause-hover": tableMeta === null || tableMeta === void 0 ? void 0 : tableMeta.rowActive.isHoverStatePaused,
     "data-resizing": !!state.columnSizingInfo.isResizingColumn,
     "data-taco": "table2",
     onBlur: handleBlur,
@@ -18652,11 +18768,11 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     role: "table",
     style: style,
     tabIndex: -1
-  }, isServerLoadingAndNotReady ? null : /*#__PURE__*/React__default.createElement("div", {
+  }, isServerLoadingAndNotReady ? null : ( /*#__PURE__*/React__default.createElement("div", {
     className: "group/header contents",
     "data-taco": "table2-header",
     role: "rowgroup"
-  }, table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React__default.createElement("div", {
+  }, table.getHeaderGroups().map(headerGroup => ( /*#__PURE__*/React__default.createElement("div", {
     className: "contents",
     key: headerGroup.id,
     role: "row"
@@ -18672,7 +18788,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
       scrollToIndex,
       hasSeparator
     }));
-  })))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, {
+  })))))), table.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, {
     autoFocus: tableMeta.editing.isEditing
   }, /*#__PURE__*/React__default.createElement("div", {
     onMouseDownCapture: handleMouseCapture,
@@ -18682,25 +18798,25 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     ref: bodyRef
   }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
     className: "border-grey-300 col-span-full translate-y-px border-t"
-  }), tableMeta.enableFooter ? /*#__PURE__*/React__default.createElement("div", {
+  }), tableMeta.enableFooter ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
     role: "rowgroup"
   },
   // Render the footer cell only for individual columns, excluding column groups.
-  table.getFooterGroups().slice(0, 1).map(footerGroup => /*#__PURE__*/React__default.createElement("div", {
+  table.getFooterGroups().slice(0, 1).map(footerGroup => ( /*#__PURE__*/React__default.createElement("div", {
     className: "contents",
     key: footerGroup.id,
     role: "row"
-  }, footerGroup.headers.map(footer => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+  }, footerGroup.headers.map(footer => ( /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: footer.id
-  }, reactTable$1.flexRender(footer.column.columnDef.footer, footer.getContext()))))), length ? /*#__PURE__*/React__default.createElement(Summary, {
+  }, reactTable$1.flexRender(footer.column.columnDef.footer, footer.getContext()))))))), length ? ( /*#__PURE__*/React__default.createElement(Summary, {
     currentLength: table.getRowModel().rows.length,
     length: length,
     table: table
-  }) : null) : 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)));
+  }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null))));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);
@@ -18837,9 +18953,9 @@ const Tooltip$1 = ({
     className: "absolute top-0 right-0 mt-1 mr-1"
   })), step.title && /*#__PURE__*/React.createElement("h5", null, step.title), step.content, /*#__PURE__*/React.createElement(Group, {
     className: "mt-4 justify-end"
-  }, index > 0 && /*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
+  }, index > 0 && ( /*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
     appearance: "discrete"
-  }), locale.back), /*#__PURE__*/React.createElement(Button$1, Object.assign({}, primaryProps, {
+  }), locale.back)), /*#__PURE__*/React.createElement(Button$1, Object.assign({}, primaryProps, {
     appearance: "primary"
   }), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
 };
@@ -18902,10 +19018,10 @@ const Tour = props => {
     floaterProps: {
       disableAnimation: true
     },
-    tooltipComponent: tooltipProps => /*#__PURE__*/React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
+    tooltipComponent: tooltipProps => ( /*#__PURE__*/React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
       locale: tour,
       disableTourSkipOnEsc: disableTourSkipOnEsc
-    })),
+    }))),
     locale: tour,
     spotlightPadding: 8,
     spotlightClicks: spotlightClicks,
@@ -18959,11 +19075,11 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
     tabIndex: 0
   }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
     name: icon
-  }) : null, children, isNew ? /*#__PURE__*/React__default.createElement(Badge, {
+  }) : null, children, isNew ? ( /*#__PURE__*/React__default.createElement(Badge, {
     color: "blue",
     small: true,
     className: "absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
-  }, texts.header.new) : null);
+  }, texts.header.new)) : null);
   if (tooltip) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       title: tooltip
@@ -19159,10 +19275,10 @@ const AgreementItem = props => {
     title: agreement.name
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "truncate"
-  }, agreement.name), ' ', agreement.secure ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, agreement.name), ' ', agreement.secure ? ( /*#__PURE__*/React__default.createElement(Icon, {
     name: "secure-tick",
     className: "ml-1 mt-0.5 mb-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0"
-  }) : null), /*#__PURE__*/React__default.createElement("span", {
+  })) : null), /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-100 whitespace-nowrap text-xs"
   }, agreement.number, " ", agreement.userId, " ", /*#__PURE__*/React__default.createElement(AgreementBadge, {
     agreement: agreement
@@ -19248,10 +19364,10 @@ function AgreementSelector(props) {
   }, /*#__PURE__*/React__default.createElement(AgreementDisplay, {
     currentAgreement: currentAgreement,
     fallbackImageSrc: fallbackImageSrc
-  }, agreements ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, agreements ? ( /*#__PURE__*/React__default.createElement(Icon, {
     className: "ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex",
     name: open ? 'chevron-up' : 'chevron-down'
-  }) : null)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
+  })) : null)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
     className: "z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900"
   }, /*#__PURE__*/React__default.createElement(SearchInput, {
     autoFocus: true,
@@ -19273,10 +19389,10 @@ function AgreementSelector(props) {
       }, filterBySearchValue(search)(agreement) ? button : null, agreement.clients.filter(agreement => filterClientAgreement(agreement, search, filterBySearchValue(search))).map(clientAgreement => createAgreementButton(clientAgreement, fallbackImageSrc, handleChangeAgreement, isCurrentAgreement(clientAgreement, currentAgreement))));
     }
     return button;
-  })), handleAddAgreement ? /*#__PURE__*/React__default.createElement(Button$1, {
+  })), handleAddAgreement ? ( /*#__PURE__*/React__default.createElement(Button$1, {
     className: "focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
     onClick: handleAddAgreement
-  }, texts.header.addAgreement) : null, /*#__PURE__*/React__default.createElement("hr", {
+  }, texts.header.addAgreement)) : null, /*#__PURE__*/React__default.createElement("hr", {
     className: "my-0 h-px w-full bg-white/[0.08]"
   }), /*#__PURE__*/React__default.createElement("a", {
     className: "focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none",
@@ -19420,7 +19536,7 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     "aria-hidden": !isVisible,
     className: className,
     ref: ref
-  }), content), /*#__PURE__*/React__default.createElement(framerMotion.AnimatePresence, null, showBackdrop && /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
+  }), content), /*#__PURE__*/React__default.createElement(framerMotion.AnimatePresence, null, showBackdrop && ( /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
     initial: {
       opacity: 0
     },
@@ -19432,7 +19548,7 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     },
     className: "z-[1]",
     onClick: () => setSidebarOpen(false)
-  })));
+  }))));
 });
 
 const Top = props => {
@@ -19560,7 +19676,7 @@ const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
     name: icon
   }) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-grow items-center truncate"
-  }, children), menu ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }, children), menu ? ( /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     icon: "more",
     "aria-label": "More",
@@ -19573,12 +19689,12 @@ const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
       event.preventDefault();
       event.stopPropagation();
     }
-  }) : null, total !== undefined ? /*#__PURE__*/React__default.createElement(Badge, {
+  })) : null, total !== undefined ? ( /*#__PURE__*/React__default.createElement(Badge, {
     className: cn('flex-shrink-0 flex-grow-0 !font-normal', {
       'group-hover:hidden [[aria-expanded="true"]+&]:hidden ': menu
     }),
     color: "transparent"
-  }, total) : null));
+  }, total)) : null));
 });
 
 const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
@@ -19593,9 +19709,9 @@ const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(prop
     "data-taco": "navigation2-section",
     ref: ref,
     role: "none"
-  }), heading ? /*#__PURE__*/React__default.createElement("span", {
+  }), heading ? ( /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-500 mb-px truncate pl-5 text-xs font-bold uppercase leading-8 lg:hidden"
-  }, heading) : null, /*#__PURE__*/React__default.createElement("ul", {
+  }, heading)) : null, /*#__PURE__*/React__default.createElement("ul", {
     className: "mb-0 flex flex-col gap-y-px"
   }, children));
 });