@economic/taco 2.33.1 → 2.34.1

package/dist/taco.cjs.development.js

@@ -1239,6 +1239,21 @@ function IconDocumentRejectedRequest(props, svgRef) {
 }
 var DocumentRejectedRequest = /*#__PURE__*/React.forwardRef(IconDocumentRejectedRequest);
 
+function IconDocumentSigned(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.293 2.293A1 1 0 0013.586 2H5.75A1.75 1.75 0 004 3.75v16.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0020 20.25V8.414a1 1 0 00-.293-.707l-5.414-5.414zM5.75 3.5H13v3.75l.006.144A1.75 1.75 0 0014.75 9h3.75v11.25l-.007.057a.25.25 0 01-.243.193H5.75l-.057-.007a.25.25 0 01-.193-.243V3.75l.007-.057A.25.25 0 015.75 3.5zm8.75 1.121V7.25a.25.25 0 00.193.243l.057.007h2.63L14.5 4.621zm-6.693 9.425C8.183 12.37 9.194 11 10.43 11c1.547 0 1.796 1.624 1 3.337a6.972 6.972 0 01-1.424 2.009l-.156.148.138-.007.17-.017c1.058-.13 1.702-.687 2.014-1.725l.044-.16.026-.08c.239-.613 1.208-.407 1.13.292a10.03 10.03 0 00-.074 1.205l.006.168.084-.093.202-.245c.451-.532.863-.748 1.332-.404.185.135.278.313.343.543l.019.072.033.156.064.387.087-.088.147-.16.172-.202.197-.242.22-.284.23-.312.057-.067a.59.59 0 01.898.758l-.133.182-.252.334-.127.162c-.665.834-1.147 1.225-1.605 1.266-.419.037-.725-.198-.889-.556a1.83 1.83 0 01-.128-.403l-.016-.081-.08.09-.093.096c-.583.591-1.13.773-1.585.251l-.068-.084-.054-.08a1.31 1.31 0 01-.128-.29l-.011-.04-.098.082-.152.112c-.568.398-1.28.616-2.126.645l-.2.003-.167-.005a1.862 1.862 0 01-.843-.253l-.016-.01-.077.046-.256.137a6.378 6.378 0 01-.8.342l-.222.072-.078.018a.59.59 0 01-.267-1.145 5.16 5.16 0 00.806-.324l.15-.08-.043-.116-.056-.188c-.133-.511-.144-1.121-.036-1.775l.031-.17.038-.181zm2.617-.347c.422-.975.323-1.52.004-1.52-.545 0-1.255 1.006-1.502 2.273-.09.462-.108.86-.061 1.178l.025.14.082-.07.197-.186a5.84 5.84 0 001.1-1.488l.091-.185.064-.142z",
+    fill: "currentColor"
+  }));
+}
+var DocumentSigned = /*#__PURE__*/React.forwardRef(IconDocumentSigned);
+
 function IconDocumentSplit(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1763,6 +1778,21 @@ function IconHeightTall(props, svgRef) {
 }
 var HeightTall = /*#__PURE__*/React.forwardRef(IconHeightTall);
 
+function IconHome2(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.116 2.823a1.25 1.25 0 011.768 0L17.25 7.19V6a.75.75 0 011.5 0v2.69l2.78 2.78a.75.75 0 01-1.06 1.06l-2.994-2.993-.013-.013L12 4.061l-8.47 8.47a.75.75 0 01-1.06-1.061l8.646-8.647zm1.768 3.25l7 7c.234.235.366.553.366.884v6.293c0 .69-.56 1.25-1.25 1.25h-4c-.69 0-1.25-.56-1.25-1.25V16.5h-3.5v3.75c0 .69-.56 1.25-1.25 1.25H5c-.69 0-1.25-.56-1.25-1.25v-6.293c0-.332.132-.65.366-.884l7-7a1.25 1.25 0 011.768 0zM12 7.311l-6.75 6.75V20h3.5v-3.75c0-.69.56-1.25 1.25-1.25h4c.69 0 1.25.56 1.25 1.25V20h3.5v-5.94L12 7.31z",
+    fill: "currentColor"
+  }));
+}
+var Home2 = /*#__PURE__*/React.forwardRef(IconHome2);
+
 function IconHome(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1776,6 +1806,21 @@ function IconHome(props, svgRef) {
 }
 var Home = /*#__PURE__*/React.forwardRef(IconHome);
 
+function IconId(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.25 5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0120.25 19H3.75A1.75 1.75 0 012 17.25V6.75C2 5.784 2.784 5 3.75 5h16.5zm0 1.5H3.75a.25.25 0 00-.243.193L3.5 6.75v10.5a.25.25 0 00.193.243l.057.007h16.5a.25.25 0 00.243-.193l.007-.057V6.75a.25.25 0 00-.193-.243L20.25 6.5zm-9.268 7.993c-.316-1.81-1.31-2.714-2.982-2.714-1.673 0-2.667.905-2.982 2.714a1.204 1.204 0 001.184 1.41h3.595a1.204 1.204 0 001.185-1.41zM8 8c.76 0 1.374.77 1.374 1.718 0 .949-.615 1.718-1.374 1.718-.759 0-1.374-.77-1.374-1.718C6.626 8.769 7.24 8 8 8zm11 .75a.75.75 0 00-.75-.75h-6a.75.75 0 000 1.5h6a.75.75 0 00.75-.75zM18.25 14a.75.75 0 010 1.5h-4.5a.75.75 0 010-1.5h4.5zm.75-2.25a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h4.5a.75.75 0 00.75-.75z",
+    fill: "currentColor"
+  }));
+}
+var Id = /*#__PURE__*/React.forwardRef(IconId);
+
 function IconImages(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2266,6 +2311,25 @@ function IconMarket(props, svgRef) {
 }
 var Market = /*#__PURE__*/React.forwardRef(IconMarket);
 
+function IconMastercardOs(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M14.698 7.314H9.286v9.66h5.412v-9.66z",
+    fill: "#FF5A00"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.646 12.144c0-1.963.929-3.704 2.354-4.83A6.178 6.178 0 008.185 6C4.766 6 2 8.748 2 12.144s2.766 6.143 6.185 6.143A6.178 6.178 0 0012 16.973a6.117 6.117 0 01-2.354-4.83z",
+    fill: "#EB001B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M22 12.144c0 3.396-2.766 6.143-6.185 6.143A6.178 6.178 0 0112 16.973a6.095 6.095 0 002.354-4.83A6.146 6.146 0 0012 7.315 6.168 6.168 0 0115.813 6C19.233 6 22 8.766 22 12.144z",
+    fill: "#F79E1B"
+  }));
+}
+var MastercardOs = /*#__PURE__*/React.forwardRef(IconMastercardOs);
+
 function IconMatchAmount(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2435,6 +2499,22 @@ function IconNote(props, svgRef) {
 }
 var Note = /*#__PURE__*/React.forwardRef(IconNote);
 
+function IconNovemberFirst(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M21.484 8.828C19.73 3.592 14.065.768 8.829 2.519 3.592 4.271.767 9.936 2.519 15.172c1.752 5.237 7.418 8.06 12.655 6.308a9.997 9.997 0 006.31-12.653z",
+    fill: "#0D2840"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.977 7.263v5.445l-4.14-5.445H7.264l.78 1.156v7.686h1.919v-5.619l4.28 5.62H15.9V7.262h-1.922z",
+    fill: "#2CD7B3"
+  }));
+}
+var NovemberFirst = /*#__PURE__*/React.forwardRef(IconNovemberFirst);
+
 function IconNumbers(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3486,6 +3566,7 @@ const icons = {
   'document-preview': DocumentPreview,
   'document-received': DocumentReceived,
   'document-rejected-request': DocumentRejectedRequest,
+  'document-signed': DocumentSigned,
   'document-split': DocumentSplit,
   'document-time': DocumentTime,
   document: Document,
@@ -3525,7 +3606,9 @@ const icons = {
   'height-medium': HeightMedium,
   'height-short': HeightShort,
   'height-tall': HeightTall,
+  home2: Home2,
   home: Home,
+  id: Id,
   images: Images,
   import: Import,
   'inbox-einvoicing': InboxEinvoicing,
@@ -3562,6 +3645,7 @@ const icons = {
   'log-out': LogOut,
   log: Log,
   market: Market,
+  'mastercard-os': MastercardOs,
   'match-amount': MatchAmount,
   'match-entries': MatchEntries,
   menu: Menu,
@@ -3575,6 +3659,7 @@ const icons = {
   'note-follow-up': NoteFollowUp,
   'note-read': NoteRead,
   note: Note,
+  'november-first': NovemberFirst,
   numbers: Numbers,
   'partner-api': PartnerApi,
   'payment-paid': PaymentPaid,
@@ -4122,6 +4207,9 @@ function isElementInteractive(element) {
   }
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
+function isElementInsideTable3OrReport(element) {
+  return !!(element !== null && element !== void 0 && element.closest('[data-taco^=table]'));
+}
 
 function isPressingMetaKey(event) {
   return isMacOs() ? event.metaKey : event.ctrlKey;
@@ -5214,6 +5302,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
         event.preventDefault();
         const position = event.key === 'End' ? event.currentTarget.value.length : 0;
         event.currentTarget.setSelectionRange(position, position);
+        // Necessary for ensuring the cursor is scrolled into view when using Home/End keys on Windows
+        if (internalRef.current) {
+          const scrollPosition = event.key === 'End' ? internalRef.current.scrollWidth : 0;
+          internalRef.current.scrollLeft = scrollPosition;
+        }
       }
     }
     if (typeof onKeyDown === 'function') {
@@ -5823,9 +5916,7 @@ const useCombobox = ({
     }
   };
   const handleInputKeyDown = event => {
-    var _inputRef$current;
     event.persist();
-    const insideTheTable = !!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.closest('table, [role="rowgroup"]'));
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -5847,7 +5938,7 @@ const useCombobox = ({
           }
         case 'Enter':
           {
-            if (insideTheTable) {
+            if (isElementInsideTable3OrReport(event.currentTarget)) {
               event.preventDefault();
               if (inline && !open) {
                 setOpen(true);
@@ -5865,7 +5956,7 @@ const useCombobox = ({
           if (open) {
             event.preventDefault();
           } else {
-            if (!inline && buttonRef.current && !insideTheTable) {
+            if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {
               buttonRef.current.click();
             }
           }
@@ -5885,7 +5976,7 @@ const useCombobox = ({
         listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
       }
       if (inline && !open) {
-        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
+        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !isElementInsideTable3OrReport(event.currentTarget)) {
           event.preventDefault();
           const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
           setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
@@ -8194,12 +8285,13 @@ const Link$1 = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
 const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();
   const internalRef = useMergedRef(ref);
-  const preventArrowDownShortcut = event => {
-    var _internalRef$current;
-    const isRenderedInTable = !!((_internalRef$current = internalRef.current) !== null && _internalRef$current !== void 0 && _internalRef$current.closest('tbody'));
-    if (isRenderedInTable && event.key === 'ArrowDown') {
-      var _internalRef$current2, _internalRef$current3;
-      internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : (_internalRef$current3 = _internalRef$current2.parentNode) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.dispatchEvent(createCustomKeyboardEvent(event));
+  const handleKeyDown = event => {
+    if (event.key === 'ArrowDown') {
+      if (isElementInsideTable3OrReport(event.currentTarget)) {
+        var _event$currentTarget$;
+        event.preventDefault();
+        (_event$currentTarget$ = event.currentTarget.parentNode) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.dispatchEvent(createCustomKeyboardEvent(event));
+      }
     }
   };
   React.useEffect(() => {
@@ -8210,7 +8302,7 @@ const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref)
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
     ref: internalRef,
-    onKeyDown: preventArrowDownShortcut
+    onKeyDown: handleKeyDown
   }));
 });
 
@@ -10437,11 +10529,11 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
   const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(undefined);
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
-  const move = (direction, length, scrollToIndex) => setRowActiveIndex(currentIndex => {
-    const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
-    setTimeout(() => scrollToIndex(nextIndex), 1);
-    return nextIndex;
-  });
+  const move = (direction, length, scrollToIndex) => {
+    const nextIndex = rowActiveIndex !== undefined ? getNextIndex(direction, rowActiveIndex, length) : 0;
+    scrollToIndex(nextIndex);
+    setTimeout(() => setRowActiveIndex(nextIndex), 50);
+  };
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
     if (!isEnabled || event.defaultPrevented) {
       return;
@@ -11663,7 +11755,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   } = useRowHeightVirtualisation(table);
   // row groups
   const rangeExtractor = useRowGroupVirtualisation(table);
-  // account for thead and tfoot in the scroll area
+  // account for thead and tfoot in the scroll area - both are always medium row height
   const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
   // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains
   // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment
@@ -12421,7 +12513,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   const handleClickCapture = React__default.useCallback(() => {
     // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable
     requestAnimationFrame(() => tableMeta.rowActive.setRowActiveIndex(index));
-  }, []);
+  }, [index]);
   // row active
   if (tableMeta.rowActive.isEnabled) {
     attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;
@@ -12434,7 +12526,6 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   }
   // row drag
   if (tableMeta.rowDrag.isEnabled) {
-    attributes.draggable = true;
     attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];
   }
   // row drop
@@ -13121,6 +13212,7 @@ function Body(props) {
     enableHorizontalArrowKeyNavigation = false,
     scrollToIndex,
     table,
+    tableElement,
     ...attributes
   } = props;
   const ref = React__default.useRef(null);
@@ -13138,12 +13230,30 @@ function Body(props) {
           return;
         }
         tableMeta.rowActive.setHoverStatePaused(true);
-        const focusedElement = event.shiftKey || event.key === 'ArrowLeft' ? focusManager.focusPrevious() : focusManager.focusNext();
+        const isMetaKeyPressed = isPressingMetaKey(event);
+        let focusedElement;
+        switch (event.key) {
+          case 'ArrowLeft':
+            focusedElement = isMetaKeyPressed ? focusManager.focusFirst() : focusManager.focusPrevious();
+            break;
+          case 'ArrowRight':
+            focusedElement = isMetaKeyPressed ? focusManager.focusLast() : focusManager.focusNext();
+            // Scrolls table all the way to the right
+            if (isMetaKeyPressed && tableElement) {
+              tableElement.scrollLeft = tableElement.scrollWidth;
+            }
+            break;
+          default:
+            focusedElement = event.shiftKey ? focusManager.focusPrevious() : focusManager.focusNext();
+            break;
+        }
         if (focusedElement) {
           // override default behaviour, since we're handling focus internally now
           event.preventDefault();
           return;
         }
+        // The code below only executes when focusedElement was undefined/null. This happens only when arrow-left/shift+tab
+        // is pressed on the first cell or arrow-right/tab is pressed on the last cell.
         if (event.shiftKey || event.key === 'ArrowLeft') {
           if (!isFirstRow) {
             // there are no previous elements to focus, go up a row or go outside the table
@@ -15223,6 +15333,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
+    } else if (isElementInsideTable3OrReport(event.currentTarget)) {
+      return;
     } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
     }
@@ -15639,6 +15751,46 @@ function sortByHeader(a, b) {
 function isEmptyFilter(filter) {
   return !filter.value.hasOwnProperty('value'); // eslint-disable-line no-prototype-builtins
 }
+function guessComparatorsBasedOnControl(column) {
+  var _column$columnDef$met;
+  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
+  if (Array.isArray(columnMeta.filters)) {
+    return columnMeta.filters;
+  }
+  if (typeof columnMeta.control === 'function') {
+    const renderedControl = columnMeta.control({
+      onBlur: () => undefined,
+      onFocus: () => undefined,
+      setValue: () => undefined,
+      value: undefined,
+      disabled: false,
+      readOnly: false,
+      ref: undefined
+    });
+    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
+      const {
+        props,
+        type
+      } = renderedControl;
+      if (type.displayName === 'Select2') {
+        if (props.multiple) {
+          return [exports.TableFilterComparator.HasAnyOf, exports.TableFilterComparator.HasAllOf, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.HasNoneOf, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+        }
+        return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+      }
+    }
+  }
+  if (columnMeta.dataType === 'number') {
+    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+  }
+  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
+    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
+  }
+  if (columnMeta.control === 'switch') {
+    return [exports.TableFilterComparator.IsEqualTo];
+  }
+  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
+}
 
 const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
@@ -15692,11 +15844,6 @@ function FilterComparator(props) {
     texts
   } = useLocalization();
   const validComparators = guessComparatorsBasedOnControl(column);
-  React__default.useEffect(() => {
-    if (value === undefined || !validComparators.includes(value)) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(validComparators[0]);
-    }
-  }, [validComparators]);
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     className: "!w-32 flex-shrink-0",
     disabled: !column,
@@ -15707,49 +15854,9 @@ function FilterComparator(props) {
     value: comparator
   }, getComparatorText(comparator, texts, column)))));
 }
-function guessComparatorsBasedOnControl(column) {
-  var _column$columnDef$met;
-  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
-  if (Array.isArray(columnMeta.filters)) {
-    return columnMeta.filters;
-  }
-  if (typeof columnMeta.control === 'function') {
-    const renderedControl = columnMeta.control({
-      onBlur: () => undefined,
-      onFocus: () => undefined,
-      setValue: () => undefined,
-      value: undefined,
-      disabled: false,
-      readOnly: false,
-      ref: undefined
-    });
-    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
-      const {
-        props,
-        type
-      } = renderedControl;
-      if (type.displayName === 'Select2') {
-        if (props.multiple) {
-          return [exports.TableFilterComparator.HasAnyOf, exports.TableFilterComparator.HasAllOf, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.HasNoneOf, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-        }
-        return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-      }
-    }
-  }
-  if (columnMeta.dataType === 'number') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-  }
-  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
-    return [exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsBetween, exports.TableFilterComparator.IsLessThan, exports.TableFilterComparator.IsGreaterThan, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty, exports.TableFilterComparator.IsLessThanOrEqualTo, exports.TableFilterComparator.IsGreaterThanOrEqualTo];
-  }
-  if (columnMeta.control === 'switch') {
-    return [exports.TableFilterComparator.IsEqualTo];
-  }
-  return [exports.TableFilterComparator.Contains, exports.TableFilterComparator.DoesNotContain, exports.TableFilterComparator.IsEqualTo, exports.TableFilterComparator.IsNotEqualTo, exports.TableFilterComparator.IsEmpty, exports.TableFilterComparator.IsNotEmpty];
-}
 function getComparatorText(comparator, texts, column) {
-  var _column$columnDef, _column$columnDef$met2;
-  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met2 = _column$columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) === 'datepicker';
+  var _column$columnDef, _column$columnDef$met;
+  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met = _column$columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control) === 'datepicker';
   switch (comparator) {
     case exports.TableFilterComparator.Contains:
       return texts.table.filters.comparators.contains;
@@ -15925,14 +16032,22 @@ function Filter$1(props) {
     }
   } = filter;
   const handleChangeColumn = columnId => {
-    var _previousColumn$colum, _nextColumn$columnDef;
+    var _previousColumn$colum, _previousColumn$colum2, _nextColumn$columnDef;
     const previousColumn = allColumns.find(column => column.id === id);
     const nextColumn = allColumns.find(column => column.id === columnId);
     // UX requirement: if old column data type is the same as next column data type,
     // then we applying the same filter value for the next column,
     // but when data types are different, we're reseting comparator ans value for the next column
-    const value = (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum = previousColumn.columnDef.meta) === null || _previousColumn$colum === void 0 ? void 0 : _previousColumn$colum.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType) ? filter.value : {
-      comparator: exports.TableFilterComparator.Contains,
+    if (previousColumn !== null && previousColumn !== void 0 && (_previousColumn$colum = previousColumn.columnDef.meta) !== null && _previousColumn$colum !== void 0 && _previousColumn$colum.dataType && (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum2 = previousColumn.columnDef.meta) === null || _previousColumn$colum2 === void 0 ? void 0 : _previousColumn$colum2.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType)) {
+      handleChange(position, {
+        id: columnId,
+        value: filter.value
+      });
+      return;
+    }
+    const validComparators = guessComparatorsBasedOnControl(nextColumn);
+    const value = {
+      comparator: validComparators[0],
       value: undefined
     };
     handleChange(position, {
@@ -16242,9 +16357,10 @@ function TableGrid(props) {
     key: props.id,
     header: props,
     scrollToIndex: table.renderer.scrollToIndex
-  }))))))), table.instance.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
+  }))))))), table.instance.getCoreRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
+    tableElement: table.ref.current,
     scrollToIndex: table.renderer.scrollToIndex,
     style: table.renderer.style
   }, table.renderer.rows), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
@@ -17752,7 +17868,7 @@ const useTableRowCreation = (data, tableRef) => {
   };
 };
 
-function useTableEditingListener(table) {
+function useTableEditingListener(table, tableRef) {
   const tableMeta = table.options.meta;
   const saveChanges = () => {
     requestAnimationFrame(() => {
@@ -17794,6 +17910,20 @@ function useTableEditingListener(table) {
       window.removeEventListener('beforeunload', showUnsavedChangesWarning);
     };
   }, [tableMeta.editing.isEditing, hasChanges]);
+  React__default.useEffect(() => {
+    const onClickOutside = event => {
+      if (tableMeta.editing.isEditing) {
+        var _event$target$getAttr, _event$target;
+        const element = (_event$target$getAttr = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getAttribute('data-taco')) !== null && _event$target$getAttr !== void 0 ? _event$target$getAttr : '';
+        const insideTable = isElementInsideOrTriggeredFromContainer(event.target, tableRef.current) || element === 'backdrop';
+        if (!insideTable) {
+          saveChanges();
+        }
+      }
+    };
+    document.addEventListener('click', onClickOutside);
+    return () => document.removeEventListener('click', onClickOutside);
+  }, [saveChanges, tableMeta.editing.isEditing]);
 }
 
 function willRowMove(cell, change, rowIndex) {
@@ -17872,15 +18002,6 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
   // changes are saved as soon as the active row changes, so in most cases this will only contain the active row's changes
   // but not always - if validation or server requests fail when saving, those rows remain until the failure is resolved
   const pendingChangesFns = usePendingChanges(isEnabled, handleSave, validator);
-  // if focus leaves the table in any way, trigger a save
-  const handleBlur = React__default.useCallback(event => {
-    // custom event from datepicker, and it doesn't have the relatedTarget property set.
-    const isClosingDatepicker = dateFns.isDate(event.detail);
-    if (event.relatedTarget !== event.currentTarget && !isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget) && !isClosingDatepicker) {
-      pendingChangesFns.saveChanges();
-    }
-  }, [pendingChangesFns.saveChanges]);
-  // TODO: using useGlobalKeyDown prevents trigger when focused on inputs, but it's more "proper"
   useGlobalKeyDown(isEnabled && isEditing ? {
     key: 's',
     meta: true,
@@ -17897,8 +18018,7 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
     toggleEditing: isEnabled ? toggleEditing : () => undefined,
     lastFocusedCellIndex,
     setLastFocusedCellIndex,
-    ...pendingChangesFns,
-    handleBlur: isEnabled && isEditing ? handleBlur : () => undefined
+    ...pendingChangesFns
   };
 }
 function usePendingChanges(isEnabled, handleSave, validator) {
@@ -18222,7 +18342,7 @@ function RowMoveIndicator(props) {
     if (cellRef.current) {
       if (isActiveRow && !!moveReason) {
         var _cellRef$current$pare;
-        const firstChild = (_cellRef$current$pare = cellRef.current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector('td');
+        const firstChild = (_cellRef$current$pare = cellRef.current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector(`td[data-taco="cell-control"]`);
         if (cellRef.current === firstChild) {
           var _cellRef$current$pare2;
           setShow(true);
@@ -18477,6 +18597,7 @@ function EditingControlCell(props) {
   const cellAttributes = {
     ...getCellAttributes(cell, index, isHighlighted),
     'data-cell-editing-invalid': error ? true : undefined,
+    'data-taco': 'cell-control',
     onFocus: handleFocus,
     ref: cellRef,
     tabIndex: -1
@@ -18575,7 +18696,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       return;
     }
     // toggle into detailed mode when actually inputting something
-    if (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace') {
+    if (!isPressingMetaKey(event) && (/^[a-z0-9]$/i.test(event.key) || event.key === 'Backspace')) {
       toggleDetailedMode(true);
     }
   };
@@ -18674,16 +18795,24 @@ function EditingActionMenu(props) {
     hasErrors,
     onClear: handleClear,
     onExit: handleExit,
-    onSave: handleSave
+    onSave: handleSave,
+    isLastRow
   } = props;
   const {
     texts
   } = useLocalization();
+  const handleKeyDown = event => {
+    // normally we handle this on change of active row, but when tabbing out of the last row the active row state stays on the last one.
+    if (isLastRow && hasChanges && event.key === 'Tab') {
+      handleSave();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "transparent",
     "aria-label": texts.table3.editing.actions.tooltip,
     className: "group-[[data-row-editing-status]]/row:hidden",
     icon: "more",
+    onKeyDown: handleKeyDown,
     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 || hasErrors,
@@ -18783,7 +18912,7 @@ function Row$2(props) {
     if (tableMeta.editing.isEditing && isActiveRow) {
       var _event$target$closest, _event$target$closest2;
       const cellIndex = Number((_event$target$closest = (_event$target$closest2 = event.target.closest('td')) === null || _event$target$closest2 === void 0 ? void 0 : _event$target$closest2.getAttribute('data-cell-index')) !== null && _event$target$closest !== void 0 ? _event$target$closest : undefined);
-      if (!isNaN(cellIndex) && tableMeta.editing.lastFocusedCellIndex !== cellIndex) {
+      if (!isNaN(cellIndex)) {
         tableMeta.editing.setLastFocusedCellIndex(Number(cellIndex));
       }
     }
@@ -18813,7 +18942,8 @@ function useTable3(props, ref) {
       hasErrors: editing.hasRowErrors(rowId),
       onClear: () => editing.resetChanges(rowId),
       onSave: () => editing.saveChanges(rowId),
-      onExit: () => editing.toggleEditing(false)
+      onExit: () => editing.toggleEditing(false),
+      isLastRow: table.meta.rowActive.rowActiveIndex === table.meta.length - 1
     }))] : props.rowActions
   };
   const meta = {
@@ -18821,7 +18951,7 @@ function useTable3(props, ref) {
   };
   const table = useTable(extendedProps, ref, RENDERERS$1, meta);
   // listeners
-  useTableEditingListener(table.instance);
+  useTableEditingListener(table.instance, table.ref);
   React__default.useEffect(() => {
     if (table.ref.current) {
       table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing);
@@ -19010,15 +19140,9 @@ Group$5.displayName = 'Table3Group';
 const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref) {
   var _table3$meta$editing, _table3$meta$editing2;
   const table3 = useTable3(props, ref);
-  const handleBlur = event => {
-    if (table3.meta.editing.isEditing) {
-      table3.meta.editing.handleBlur(event);
-    }
-  };
   const gridAttributes = {
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
-    enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,
-    onBlur: handleBlur
+    enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
   const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {