@economic/taco 2.35.1 → 2.36.1

package/dist/taco.cjs.development.js

@@ -1239,6 +1239,19 @@ function IconDocumentRejectedRequest(props, svgRef) {
 }
 var DocumentRejectedRequest = /*#__PURE__*/React.forwardRef(IconDocumentRejectedRequest);
 
+function IconDocumentSignedSolid(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M13 2v5.25l.006.144a1.75 1.75 0 001.593 1.6L14.75 9H20v11.25A1.75 1.75 0 0118.25 22H5.75A1.75 1.75 0 014 20.25V3.75C4 2.784 4.784 2 5.75 2H13zm-3 7.75c-1.572 0-2.858 1.745-3.337 3.877l-.048.23-.039.217c-.138.832-.124 1.608.046 2.26l.07.238.055.148-.191.101c-.33.166-.672.305-1.025.413a.75.75 0 00.339 1.457l.1-.023.281-.092c.35-.122.691-.268 1.02-.435l.325-.174.098-.059.02.014c.302.18.66.293 1.074.32L9 18.25l.255-.004c1.076-.038 1.983-.315 2.706-.82l.193-.145.124-.104.014.052c.044.14.098.262.164.369l.069.102.086.107c.579.665 1.275.432 2.018-.32l.117-.122.102-.115.021.104c.043.2.09.356.163.512.209.456.598.755 1.132.708.582-.052 1.196-.55 2.042-1.612l.162-.206.32-.425.17-.23a.75.75 0 00-1.144-.965l-.071.085-.293.396-.28.362-.251.308-.22.256-.187.205-.11.112-.082-.493-.042-.199-.024-.09c-.083-.294-.201-.52-.436-.692-.598-.437-1.122-.163-1.695.514l-.258.312-.107.118-.007-.214a12.73 12.73 0 01.094-1.533c.1-.89-1.135-1.152-1.438-.372l-.033.103-.057.203c-.397 1.321-1.216 2.03-2.562 2.195l-.217.022-.176.009.199-.19a8.876 8.876 0 001.813-2.556c1.013-2.18.695-4.247-1.274-4.247zm0 1.5c.406 0 .531.695-.005 1.934l-.081.181-.116.237a7.434 7.434 0 01-1.401 1.893l-.25.236-.105.089-.032-.177c-.06-.406-.037-.911.077-1.5C8.402 12.53 9.306 11.25 10 11.25zm4.5-4V2L20 7.5h-5.25l-.057-.007a.25.25 0 01-.184-.175L14.5 7.25z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+}
+var DocumentSignedSolid = /*#__PURE__*/React.forwardRef(IconDocumentSignedSolid);
+
 function IconDocumentSigned(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -1331,19 +1344,6 @@ function IconECopedia(props, svgRef) {
 }
 var ECopedia = /*#__PURE__*/React.forwardRef(IconECopedia);
 
-function IconESignature(props, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    ref: svgRef
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M13 2v5.25l.006.144a1.75 1.75 0 001.593 1.6L14.75 9H20v11.25A1.75 1.75 0 0118.25 22H5.75A1.75 1.75 0 014 20.25V3.75C4 2.784 4.784 2 5.75 2H13zm-3 7.75c-1.572 0-2.858 1.745-3.337 3.877l-.048.23-.039.217c-.138.832-.124 1.608.046 2.26l.07.238.055.148-.191.101c-.33.166-.672.305-1.025.413a.75.75 0 00.339 1.457l.1-.023.281-.092c.35-.122.691-.268 1.02-.435l.325-.174.098-.059.02.014c.302.18.66.293 1.074.32L9 18.25l.255-.004c1.076-.038 1.983-.315 2.706-.82l.193-.145.124-.104.014.052c.044.14.098.262.164.369l.069.102.086.107c.579.665 1.275.432 2.018-.32l.117-.122.102-.115.021.104c.043.2.09.356.163.512.209.456.598.755 1.132.708.582-.052 1.196-.55 2.042-1.612l.162-.206.32-.425.17-.23a.75.75 0 00-1.144-.965l-.071.085-.293.396-.28.362-.251.308-.22.256-.187.205-.11.112-.082-.493-.042-.199-.024-.09c-.083-.294-.201-.52-.436-.692-.598-.437-1.122-.163-1.695.514l-.258.312-.107.118-.007-.214a12.73 12.73 0 01.094-1.533c.1-.89-1.135-1.152-1.438-.372l-.033.103-.057.203c-.397 1.321-1.216 2.03-2.562 2.195l-.217.022-.176.009.199-.19a8.876 8.876 0 001.813-2.556c1.013-2.18.695-4.247-1.274-4.247zm0 1.5c.406 0 .531.695-.005 1.934l-.081.181-.116.237a7.434 7.434 0 01-1.401 1.893l-.25.236-.105.089-.032-.177c-.06-.406-.037-.911.077-1.5C8.402 12.53 9.306 11.25 10 11.25zm4.5-4V2L20 7.5h-5.25l-.057-.007a.25.25 0 01-.184-.175L14.5 7.25z",
-    fill: "currentColor",
-    fillRule: "evenodd"
-  }));
-}
-var ESignature = /*#__PURE__*/React.forwardRef(IconESignature);
-
 function IconEditSimple(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -1778,33 +1778,33 @@ function IconHeightTall(props, svgRef) {
 }
 var HeightTall = /*#__PURE__*/React.forwardRef(IconHeightTall);
 
-function IconHome2(props, svgRef) {
+function IconHouseSolid(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"
+    d: "M12 6l8 8v7a1 1 0 01-1 1h-5v-5a1 1 0 00-.883-.993L13 16h-2a1 1 0 00-.993.883L10 17v5H5a1 1 0 01-1-1v-7l8-8zm.613-3.79l.094.083L17 6.585V4.75a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v3.835l2.707 2.708a1 1 0 01-1.32 1.497l-.094-.083L12 4.415l-8.293 8.292a1 1 0 01-1.32.083l-.094-.083a1 1 0 01-.083-1.32l.083-.094 9-9a1 1 0 011.32-.083z",
+    fill: "currentColor",
+    fillRule: "evenodd"
   }));
 }
-var Home2 = /*#__PURE__*/React.forwardRef(IconHome2);
+var HouseSolid = /*#__PURE__*/React.forwardRef(IconHouseSolid);
 
-function IconHome(props, svgRef) {
+function IconHouse(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: "M12 6l8 8v7a1 1 0 01-1 1h-5v-5a1 1 0 00-.883-.993L13 16h-2a1 1 0 00-.993.883L10 17v5H5a1 1 0 01-1-1v-7l8-8zm.613-3.79l.094.083L17 6.585V4.75a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v3.835l2.707 2.708a1 1 0 01-1.32 1.497l-.094-.083L12 4.415l-8.293 8.292a1 1 0 01-1.32.083l-.094-.083a1 1 0 01-.083-1.32l.083-.094 9-9a1 1 0 011.32-.083z",
-    fill: "currentColor",
-    fillRule: "evenodd"
+    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 Home = /*#__PURE__*/React.forwardRef(IconHome);
+var House = /*#__PURE__*/React.forwardRef(IconHouse);
 
 function IconId(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -3566,6 +3566,7 @@ const icons = {
   'document-preview': DocumentPreview,
   'document-received': DocumentReceived,
   'document-rejected-request': DocumentRejectedRequest,
+  'document-signed-solid': DocumentSignedSolid,
   'document-signed': DocumentSigned,
   'document-split': DocumentSplit,
   'document-time': DocumentTime,
@@ -3573,7 +3574,6 @@ const icons = {
   download: Download,
   drag: Drag,
   'e-copedia': ECopedia,
-  'e-signature': ESignature,
   'edit-simple': EditSimple,
   edit: Edit,
   'ellipsis-horizontal': EllipsisHorizontal,
@@ -3606,8 +3606,8 @@ const icons = {
   'height-medium': HeightMedium,
   'height-short': HeightShort,
   'height-tall': HeightTall,
-  home2: Home2,
-  home: Home,
+  'house-solid': HouseSolid,
+  house: House,
   id: Id,
   images: Images,
   import: Import,
@@ -4156,7 +4156,7 @@ const getIndexOfFirstChildOverflowingParent = (element, overscan = 0) => {
   }
   return boundaryChildIndex;
 };
-const getNextFocussableElement = currentElement => {
+const getNextFocussableElement = (currentElement, direction = 1) => {
   if (!currentElement) {
     return null;
   }
@@ -4166,7 +4166,7 @@ const getNextFocussableElement = currentElement => {
   if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {
     return null;
   }
-  return focussableElements[currentElementIndex + 1];
+  return focussableElements[currentElementIndex + direction];
 };
 const getOverlaySelector = element => {
   switch (element === null || element === void 0 ? void 0 : element.getAttribute('role')) {
@@ -4563,7 +4563,10 @@ const defaultLocalisationTexts = {
       button: 'Filters',
       buttons: {
         addFilter: 'Add new filter',
-        clearFilters: 'Clear all filters'
+        clearFilters: 'Clear all filters',
+        cancel: 'Cancel',
+        clear: 'Clear',
+        apply: 'Apply'
       },
       comparators: {
         contains: 'Contains',
@@ -4673,6 +4676,9 @@ const defaultLocalisationTexts = {
       buttons: {
         edit: {
           tooltip: 'Edit table'
+        },
+        create: {
+          label: 'New'
         }
       },
       clearChangesConfirmationDialog: {
@@ -5939,8 +5945,8 @@ const useCombobox = ({
           }
         case 'Enter':
           {
+            event.preventDefault();
             if (isElementInsideTable3OrReport(event.currentTarget)) {
-              event.preventDefault();
               if (inline && !open) {
                 setOpen(true);
               } else if (buttonRef.current && !open) {
@@ -8536,11 +8542,13 @@ const RadioGroup$1 = /*#__PURE__*/React.forwardRef(function MenuRadioItem(props,
 });
 RadioGroup$1.Item = RadioItem;
 
-const Separator = () => {
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, {
+const Separator = /*#__PURE__*/React.forwardRef(function Separator(props, ref) {
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, Object.assign({
     className: "bg-grey-300 my-1 h-px"
-  });
-};
+  }, props, {
+    ref: ref
+  }));
+});
 
 const Header = /*#__PURE__*/React.forwardRef(function MenuHeader(props, ref) {
   const menu = useCurrentMenu();
@@ -10438,7 +10446,9 @@ function getTableFeaturePreset(props) {
     enablePrinting: (_props$enablePrinting = props.enablePrinting) !== null && _props$enablePrinting !== void 0 ? _props$enablePrinting : presetOptions.enablePrinting,
     enableRowActive: (_props$enableRowActiv = props.enableRowActive) !== null && _props$enableRowActiv !== void 0 ? _props$enableRowActiv : presetOptions.enableRowActive,
     enableRowActions: enableRowActions && !!((_props$rowActions = props.rowActions) !== null && _props$rowActions !== void 0 && _props$rowActions.length),
-    enableRowClick: enableRowClick && !!props.onRowClick,
+    // enableRowClick can be either function or boolean, that is why we need to pass exactly enableRowClick,
+    // and not just result of the condition
+    enableRowClick: enableRowClick && !!props.onRowClick ? enableRowClick : false,
     enableRowDrag: enableRowDrag && !!props.onRowDrag,
     enableRowDrop: enableRowDrop && !!props.onRowDrop,
     enableRowGoto: enableRowGoto && !!props.onRowGoto,
@@ -10658,26 +10668,29 @@ function getNextIndex(direction, currentIndex, length) {
 }
 
 function useTableRowClick(isEnabled = false, onRowClick) {
-  const handleKeyDown = React__default.useCallback(function (event, data) {
-    if (!isEnabled || typeof onRowClick !== 'function' || event.defaultPrevented) {
+  const isRowClickEnabled = React__default.useCallback(row => {
+    return typeof isEnabled === 'boolean' ? isEnabled : isEnabled(row);
+  }, [isEnabled]);
+  const handleKeyDown = React__default.useCallback(function (event, rowData) {
+    if (!isRowClickEnabled(rowData) || typeof onRowClick !== 'function' || event.defaultPrevented) {
       return;
     }
-    if (data && event.key === 'Enter') {
+    if (rowData && event.key === 'Enter') {
       event.preventDefault();
-      onRowClick(data);
+      onRowClick(rowData);
       return;
     }
   }, [isEnabled, onRowClick]);
-  const handleClick = React__default.useCallback(function (event, data) {
-    if (!isEnabled || typeof onRowClick !== 'function' || event.defaultPrevented) {
+  const handleClick = React__default.useCallback(function (event, rowData) {
+    if (!isRowClickEnabled(rowData) || typeof onRowClick !== 'function' || event.defaultPrevented) {
       return;
     }
     event.preventDefault();
-    onRowClick(data);
+    onRowClick(rowData);
     return;
   }, [isEnabled, onRowClick]);
   return {
-    isEnabled,
+    isEnabled: isRowClickEnabled,
     handleClick,
     handleKeyDown
   };
@@ -10777,7 +10790,167 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
 }
 
 // A type of promise-like that resolves synchronously and supports only one observer
+const _Pact = /*#__PURE__*/function () {
+  function _Pact() {}
+  _Pact.prototype.then = function (onFulfilled, onRejected) {
+    const result = new _Pact();
+    const state = this.s;
+    if (state) {
+      const callback = state & 1 ? onFulfilled : onRejected;
+      if (callback) {
+        try {
+          _settle(result, 1, callback(this.v));
+        } catch (e) {
+          _settle(result, 2, e);
+        }
+        return result;
+      } else {
+        return this;
+      }
+    }
+    this.o = function (_this) {
+      try {
+        const value = _this.v;
+        if (_this.s & 1) {
+          _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
+        } else if (onRejected) {
+          _settle(result, 1, onRejected(value));
+        } else {
+          _settle(result, 2, value);
+        }
+      } catch (e) {
+        _settle(result, 2, e);
+      }
+    };
+    return result;
+  };
+  return _Pact;
+}();
+
+// Settles a pact synchronously
+function _settle(pact, state, value) {
+  if (!pact.s) {
+    if (value instanceof _Pact) {
+      if (value.s) {
+        if (state & 1) {
+          state = value.s;
+        }
+        value = value.v;
+      } else {
+        value.o = _settle.bind(null, pact, state);
+        return;
+      }
+    }
+    if (value && value.then) {
+      value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
+      return;
+    }
+    pact.s = state;
+    pact.v = value;
+    const observer = pact.o;
+    if (observer) {
+      observer(pact);
+    }
+  }
+}
+function _isSettledPact(thenable) {
+  return thenable instanceof _Pact && thenable.s & 1;
+}
+
+// Asynchronously iterate through an object that has a length property, passing the index as the first argument to the callback (even as the length property changes)
+function _forTo(array, body, check) {
+  var i = -1,
+    pact,
+    reject;
+  function _cycle(result) {
+    try {
+      while (++i < array.length && (!check || !check())) {
+        result = body(i);
+        if (result && result.then) {
+          if (_isSettledPact(result)) {
+            result = result.v;
+          } else {
+            result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
+            return;
+          }
+        }
+      }
+      if (pact) {
+        _settle(pact, 1, result);
+      } else {
+        pact = result;
+      }
+    } catch (e) {
+      _settle(pact || (pact = new _Pact()), 2, e);
+    }
+  }
+  _cycle();
+  return pact;
+}
 const _iteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.iterator || (Symbol.iterator = /*#__PURE__*/Symbol("Symbol.iterator")) : "@@iterator";
+
+// Asynchronously iterate through an object's values
+// Uses for...of if the runtime supports it, otherwise iterates until length on a copy
+function _forOf(target, body, check) {
+  if (typeof target[_iteratorSymbol] === "function") {
+    var iterator = target[_iteratorSymbol](),
+      step,
+      pact,
+      reject;
+    function _cycle(result) {
+      try {
+        while (!(step = iterator.next()).done && (!check || !check())) {
+          result = body(step.value);
+          if (result && result.then) {
+            if (_isSettledPact(result)) {
+              result = result.v;
+            } else {
+              result.then(_cycle, reject || (reject = _settle.bind(null, pact = new _Pact(), 2)));
+              return;
+            }
+          }
+        }
+        if (pact) {
+          _settle(pact, 1, result);
+        } else {
+          pact = result;
+        }
+      } catch (e) {
+        _settle(pact || (pact = new _Pact()), 2, e);
+      }
+    }
+    _cycle();
+    if (iterator.return) {
+      var _fixup = function (value) {
+        try {
+          if (!step.done) {
+            iterator.return();
+          }
+        } catch (e) {}
+        return value;
+      };
+      if (pact && pact.then) {
+        return pact.then(_fixup, function (e) {
+          throw _fixup(e);
+        });
+      }
+      _fixup();
+    }
+    return pact;
+  }
+  // No support for Symbol.iterator
+  if (!("length" in target)) {
+    throw new TypeError("Object is not iterable");
+  }
+  // Handle live collections properly
+  var values = [];
+  for (var i = 0; i < target.length; i++) {
+    values.push(target[i]);
+  }
+  return _forTo(values, function (i) {
+    return body(values[i]);
+  }, check);
+}
 const _asyncIteratorSymbol = /*#__PURE__*/typeof Symbol !== "undefined" ? Symbol.asyncIterator || (Symbol.asyncIterator = /*#__PURE__*/Symbol("Symbol.asyncIterator")) : "@@asyncIterator";
 
 // Asynchronously call a function and send errors to recovery continuation
@@ -10903,7 +11076,12 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   const invalidate = function () {
     try {
       _forceReset.current = true;
-      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current);
+      if (_lastUsedSearch.current) {
+        // we're searching, which means we need to refetch all with the correct sorting applied
+        return loadAll(_lastUsedSorting.current, _lastUsedFilters.current);
+      } else {
+        return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current);
+      }
     } catch (e) {
       return Promise.reject(e);
     }
@@ -11865,7 +12043,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   let content = null;
   if (rows.length) {
     style = {
-      height: `${totalSize}px`,
+      height: totalSize,
       paddingBottom,
       paddingTop
     };
@@ -12565,8 +12743,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
     tableMeta.rowClick.handleClick(event, row.original);
   }, [row.original]);
   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));
+    tableMeta.rowActive.setRowActiveIndex(index);
   }, [index]);
   // row active
   if (tableMeta.rowActive.isEnabled) {
@@ -12575,7 +12752,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
     attributes.onClickCapture = handleClickCapture;
   }
   // row click
-  if (tableMeta.rowClick.isEnabled) {
+  if (tableMeta.rowClick.isEnabled(row.original)) {
     attributes.onClick = handleClick;
   }
   // row drag
@@ -12872,6 +13049,7 @@ function HeaderMenu(props) {
     canHide,
     canPin,
     canSort,
+    columnId,
     customMenu,
     index,
     isFiltered,
@@ -12975,10 +13153,7 @@ function HeaderMenu(props) {
       }, isFiltered ? texts.table.columns.menu.editFilter : texts.table.columns.menu.filter));
     }
     if (customMenu) {
-      const menu = customMenu({
-        trigger: undefined
-      });
-      const customItems = React__default.Children.toArray(menu.props.children.props.children);
+      const customItems = customMenu.map(menuItem => menuItem(columnId)).filter(action => !!action);
       if (customItems.length) {
         if (menuItems.length) {
           menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Separator, null));
@@ -13240,7 +13415,8 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     onSortToggle: handleSortToggle,
     scrollToIndex: scrollToIndex,
     setRowActiveIndex: setRowActiveIndex,
-    sortDirection: sortDirection
+    sortDirection: sortDirection,
+    columnId: id
   })) : null, canResize ? ( /*#__PURE__*/React__default.createElement(Resizer, {
     headerRef: ref,
     id: id,
@@ -15093,17 +15269,12 @@ const BubbleSelect = props => {
 };
 
 const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(props, ref) {
-  const {
-    onTabKeyPress,
-    ...otherProps
-  } = props;
   const {
     listboxRef,
     searchQuery,
     setSearchQuery,
     setValidationError,
-    validationError,
-    setOpen
+    validationError
   } = useSelect2Context();
   const handleChange = event => {
     if (validationError) {
@@ -15116,11 +15287,6 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     if (event.key === ' ') {
       return;
     }
-    // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
-    if (event.key === 'Tab') {
-      setOpen(false);
-      onTabKeyPress();
-    }
     if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _listboxRef$current;
       event.preventDefault();
@@ -15135,7 +15301,7 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     }),
     invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
-  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, props, {
     "aria-hidden": true,
     autoFocus: true,
     invalid: !!validationError,
@@ -15346,7 +15512,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   // align the listbox min width with the width of the input - it should never be smaller
   const dimensions = useBoundingClientRectListener(internalRef);
   // state
-  const [tabTriggeredClose, setTabTriggeredClose] = React__default.useState(false);
   const [open, setOpen] = React__default.useState(false);
   const [value, _setValue] = reactUseControllableState.useControllableState({
     // uncontrolled
@@ -15432,20 +15597,13 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setShouldPauseHoverState(true);
     }
   };
-  const handleCloseAutoFocus = event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (tabTriggeredClose) {
-      const nextFocussableElement = getNextFocussableElement(internalRef.current);
+  const handleTab = event => {
+    if (event.key === 'Tab') {
+      const nextFocussableElement = getNextFocussableElement(internalRef.current, event.shiftKey ? -1 : +1);
       if (nextFocussableElement) {
         // UX requirement: move focus to the next focussable element when tab key is pressed to select the value
         nextFocussableElement.focus();
-        // Reset the tabTriggeredClose state
-        setTabTriggeredClose(false);
       }
-    } else {
-      var _internalRef$current;
-      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     }
   };
   const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
@@ -15500,10 +15658,10 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     asChild: true,
     align: "start",
     onOpenAutoFocus: () => {
-      var _internalRef$current2;
-      (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.focus();
+      var _internalRef$current;
+      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     },
-    onCloseAutoFocus: handleCloseAutoFocus,
+    onKeyDown: handleTab,
     sideOffset: 4,
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15513,8 +15671,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     }
   }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
-    ref: searchRef,
-    onTabKeyPress: () => setTabTriggeredClose(true)
+    ref: searchRef
   }), multiple && selectOptions.length > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
     className: "!justify-start",
     appearance: "discrete",
@@ -16037,10 +16194,11 @@ function Control(props) {
   const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
   React.useEffect(() => {
-    if (controlRenderer === 'switch') {
+    // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
+    if (controlRenderer === 'switch' && value === undefined) {
       onChange(false);
     }
-  }, []);
+  }, [controlRenderer]);
   if (typeof controlRenderer === 'function') {
     return /*#__PURE__*/React__default.cloneElement(controlRenderer({
       ...attributes,
@@ -16242,7 +16400,8 @@ function ManageFiltersPopover(props) {
         if (f.value.comparator === exports.TableFilterComparator.IsEmpty || f.value.comparator === exports.TableFilterComparator.IsNotEmpty || controlRenderer === 'switch') {
           return true;
         }
-        return !!f.value.value;
+        const value = f.value.value;
+        return value !== undefined && value !== null && value !== '';
       });
       return newFilters;
     });
@@ -16287,12 +16446,12 @@ function ManageFiltersPopover(props) {
     onClick: handleCreate
   }, "+ ", texts.table.filters.buttons.addFilter))), /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto"
-  }, /*#__PURE__*/React__default.createElement(Popover.Close, null, /*#__PURE__*/React__default.createElement(Button$1, null, "Cancel")), /*#__PURE__*/React__default.createElement(Button$1, {
+  }, /*#__PURE__*/React__default.createElement(Popover.Close, null, /*#__PURE__*/React__default.createElement(Button$1, null, texts.table.filters.buttons.cancel)), /*#__PURE__*/React__default.createElement(Button$1, {
     onClick: handleClear
-  }, "Clear"), /*#__PURE__*/React__default.createElement(Button$1, {
+  }, texts.table.filters.buttons.clear), /*#__PURE__*/React__default.createElement(Button$1, {
     appearance: "primary",
     onClick: handleApply
-  }, "Apply")))));
+  }, texts.table.filters.buttons.apply)))));
 }
 
 function Filters(props) {
@@ -16430,8 +16589,11 @@ function TableGrid(props) {
     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, {
+    style: props.children ? {
+      ...table.renderer.style,
+      height: table.renderer.style.height + 41
+    } : table.renderer.style
+  }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
   }) : null)) : ( /*#__PURE__*/React__default.createElement(EmptyStateBody, {
     emptyState: table.props.emptyState
@@ -18058,6 +18220,25 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   }
   return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
 }
+function animateCreateRow(id) {
+  const templateRow = document.querySelector(`[data-row-id="${id}"]`);
+  if (templateRow) {
+    var _templateRow$querySel;
+    (_templateRow$querySel = templateRow.querySelector(':first-child')) === null || _templateRow$querySel === void 0 ? void 0 : _templateRow$querySel.focus();
+    templateRow.scrollIntoView();
+    const keyframes = [{
+      background: '#b2c7ef'
+    }, {
+      background: '#ebebeb'
+    }];
+    for (const child of templateRow.children) {
+      child.animate(keyframes, {
+        duration: 1000,
+        easing: 'ease-out'
+      });
+    }
+  }
+}
 
 function useTableEditing(isEnabled = false, handleSave, validator) {
   // used to switch the table into editing mode
@@ -18092,6 +18273,7 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
 function usePendingChanges(isEnabled, handleSave, validator) {
   const saveChanges = function (rowId = undefined) {
     try {
+      let _exit = false;
       if (!handleSave) {
         console.warn('Tried to save, but Table has no onSave handler');
         return Promise.resolve();
@@ -18103,13 +18285,12 @@ function usePendingChanges(isEnabled, handleSave, validator) {
         ...pendingChanges
       };
       const changes = Object.keys(changesToSave);
-      if (changes.length) {
-        changes.map(function (rowId) {
-          try {
-            let _exit = false;
+      return Promise.resolve(function () {
+        if (changes.length) {
+          return _forOf(changes, function (rowId) {
             const pendingChange = changesToSave[rowId];
             const changeSet = getChangesetFromChanges(pendingChange);
-            return Promise.resolve(_catch(function () {
+            return _catch(function () {
               function _temp3(_result) {
                 return _exit ? _result : Promise.resolve(handleSave(changeSet)).then(function () {
                   // cleanup changes, we don't need them after saving
@@ -18117,6 +18298,10 @@ function usePendingChanges(isEnabled, handleSave, validator) {
                   setRowSaveStatus(rowId, 'complete');
                 });
               }
+              if (getRowSaveStatus(rowId) === 'pending') {
+                _exit = true;
+                return;
+              }
               // set saving = true
               setRowSaveStatus(rowId, 'pending');
               // re-run validation, maybe a cell is already invalid but has never been blurred
@@ -18163,13 +18348,12 @@ function usePendingChanges(isEnabled, handleSave, validator) {
                 });
               }
               setRowSaveStatus(rowId, undefined);
-            }));
-          } catch (e) {
-            return Promise.reject(e);
-          }
-        });
-      }
-      return Promise.resolve();
+            });
+          }, function () {
+            return _exit;
+          });
+        }
+      }());
     } catch (e) {
       return Promise.reject(e);
     }
@@ -18206,6 +18390,40 @@ function usePendingChanges(isEnabled, handleSave, validator) {
       return Promise.reject(e);
     }
   };
+  const addCreatedRowChangeset = function (row) {
+    try {
+      const cells = row.getAllCells();
+      setPendingChanges(currentChanges => {
+        return cells.reduce((changes, cell) => {
+          if (cell.getValue()) {
+            var _currentChanges$cell$4, _currentChanges$cell$5, _currentChanges$cell$6;
+            return {
+              ...changes,
+              [cell.row.id]: {
+                ...changes[cell.row.id],
+                [cell.column.id]: cell.getValue(),
+                _meta: {
+                  ...((_currentChanges$cell$4 = currentChanges[cell.row.id]) === null || _currentChanges$cell$4 === void 0 ? void 0 : _currentChanges$cell$4._meta),
+                  original: cell.row.original,
+                  moveReason: {
+                    ...((_currentChanges$cell$5 = currentChanges[cell.row.id]) === null || _currentChanges$cell$5 === void 0 ? void 0 : _currentChanges$cell$5._meta.moveReason)
+                  },
+                  errors: {
+                    ...((_currentChanges$cell$6 = currentChanges[cell.row.id]) === null || _currentChanges$cell$6 === void 0 ? void 0 : _currentChanges$cell$6._meta.errors)
+                  }
+                }
+              }
+            };
+          } else {
+            return changes;
+          }
+        }, currentChanges);
+      });
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   const [pendingChanges, setPendingChanges] = React__default.useState({});
   // we maintain save status as separate state because 'complete' needs to briefly show after pendingChanges are deleted
   const [saveStates, setSaveState] = React__default.useState({});
@@ -18332,8 +18550,8 @@ function usePendingChanges(isEnabled, handleSave, validator) {
     return Object.keys(getErrors().filter(error => {
       var _activeRow;
       if ((_activeRow = activeRow) !== null && _activeRow !== void 0 && _activeRow.id && focusIsInsideTable) {
-        var _activeRow2;
-        return error.rowId === ((_activeRow2 = activeRow) === null || _activeRow2 === void 0 ? void 0 : _activeRow2.id) ? error.pendingChange._meta.errors.hasShownErrorAlert : true;
+        var _activeRow2, _error$pendingChange$;
+        return error.rowId === ((_activeRow2 = activeRow) === null || _activeRow2 === void 0 ? void 0 : _activeRow2.id) ? (_error$pendingChange$ = error.pendingChange._meta.errors) === null || _error$pendingChange$ === void 0 ? void 0 : _error$pendingChange$.hasShownErrorAlert : true;
       }
       return true;
     })).length;
@@ -18358,6 +18576,7 @@ function usePendingChanges(isEnabled, handleSave, validator) {
     getCellError,
     setCellValue,
     validateCell,
+    addCreatedRowChangeset,
     hasChanges,
     hasErrors,
     getErrors,
@@ -18583,10 +18802,11 @@ function useEditingCellAutofocus(props) {
   // focus the cell so that we trigger it's handle focus
   React__default.useEffect(() => {
     if (props.cellRef.current) {
-      var _props$cellRef$curren, _document$activeEleme;
+      var _props$cellRef$curren, _document$activeEleme, _document$activeEleme2;
       const isFocusedElementInCurrentRow = (_props$cellRef$curren = props.cellRef.current.closest('tr')) === null || _props$cellRef$curren === void 0 ? void 0 : _props$cellRef$curren.contains(document.activeElement);
       const isFocusedElementSearch = ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('name')) === 'table-search';
-      if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch) {
+      const isFocusedElementMenu = ((_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.getAttribute('role')) === 'menu';
+      if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch && !isFocusedElementMenu) {
         var _props$cellRef$curren2;
         (_props$cellRef$curren2 = props.cellRef.current) === null || _props$cellRef$curren2 === void 0 ? void 0 : _props$cellRef$curren2.focus();
       }
@@ -19002,6 +19222,7 @@ const RENDERERS$1 = {
 };
 function useTable3(props, ref) {
   const editing = useTableEditing(props.enableEditing, props.onSave, props.validator);
+  const creationEnabled = editing.isEnabled && !!props.enableCreation;
   const extendedProps = {
     ...props,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
@@ -19011,7 +19232,7 @@ function useTable3(props, ref) {
       onClear: () => editing.resetChanges(rowId),
       onSave: () => editing.saveChanges(rowId),
       onExit: () => editing.toggleEditing(false),
-      isLastRow: table.meta.rowActive.rowActiveIndex === table.meta.length - 1
+      isLastRow: !creationEnabled && table.meta.rowActive.rowActiveIndex === table.meta.length - 1
     }))] : props.rowActions
   };
   const meta = {
@@ -19157,6 +19378,89 @@ function FilterResetDialog(props) {
   }, texts.table3.editing.validation.resetFiltersDialog.confirm)))));
 }
 
+function CreateNewRowButton(props) {
+  const {
+    onCreate,
+    scrollToIndex,
+    table,
+    tableMeta
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const rows = table.getCoreRowModel().rows;
+  const [rowCreated, setRowCreated] = React__default.useState({
+    rowFinder: undefined
+  });
+  const handleKeyDown = event => {
+    if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {
+      !tableMeta.editing.saveChanges();
+    }
+  };
+  const handleCreate = function () {
+    try {
+      if (!onCreate) {
+        return Promise.resolve();
+      }
+      const createdRow = rows.find(row => {
+        var _rowCreated$rowFinder;
+        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder = rowCreated.rowFinder) === null || _rowCreated$rowFinder === void 0 ? void 0 : _rowCreated$rowFinder.call(rowCreated, row.original);
+      });
+      const _temp = function () {
+        if (createdRow) {
+          return Promise.resolve(tableMeta.editing.saveChanges()).then(function () {
+            if (!tableMeta.editing.hasRowErrors(createdRow.id)) {
+              const rowFinder = onCreate();
+              setRowCreated({
+                rowFinder
+              });
+            }
+          });
+        } else {
+          const rowFinder = onCreate();
+          setRowCreated({
+            rowFinder
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React__default.useEffect(() => {
+    if (typeof (rowCreated === null || rowCreated === void 0 ? void 0 : rowCreated.rowFinder) === 'function') {
+      const createdRow = rows.find(row => {
+        var _rowCreated$rowFinder2;
+        return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder2 = rowCreated.rowFinder) === null || _rowCreated$rowFinder2 === void 0 ? void 0 : _rowCreated$rowFinder2.call(rowCreated, row.original);
+      });
+      if (createdRow) {
+        const rowInTable = table.getRowModel().rows.find(row => {
+          var _rowCreated$rowFinder3;
+          return rowCreated === null || rowCreated === void 0 ? void 0 : (_rowCreated$rowFinder3 = rowCreated.rowFinder) === null || _rowCreated$rowFinder3 === void 0 ? void 0 : _rowCreated$rowFinder3.call(rowCreated, row.original);
+        });
+        if (rowInTable) {
+          tableMeta.editing.toggleEditing(true);
+          tableMeta.rowActive.setRowActiveIndex(createdRow.index);
+          scrollToIndex(createdRow.index);
+          requestAnimationFrame(() => animateCreateRow(createdRow.id));
+        }
+        requestAnimationFrame(() => tableMeta.editing.addCreatedRowChangeset(createdRow));
+      }
+    }
+  }, [rowCreated]);
+  return /*#__PURE__*/React__default.createElement("tr", {
+    onClick: handleCreate,
+    className: "border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t"
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: "!border-t-0 !bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    onKeyDown: handleKeyDown,
+    className: "group-hover:bg-grey-200 sticky left-0",
+    appearance: "transparent"
+  }, "+ ", texts.table3.editing.buttons.create.label)));
+}
+
 function Editing(props) {
   const {
     scrollToIndex,
@@ -19213,6 +19517,7 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
   const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);
+  const showCreateRowButton = table3.meta.editing.isEnabled && props.enableCreation && props.onCreate;
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? ( /*#__PURE__*/React__default.createElement(Editing, {
@@ -19226,7 +19531,12 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
     table: table3
-  })));
+  }), showCreateRowButton && ( /*#__PURE__*/React__default.createElement(CreateNewRowButton, {
+    table: table3.instance,
+    tableMeta: table3.meta,
+    onCreate: props.onCreate,
+    scrollToIndex: table3.renderer.scrollToIndex
+  }))));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);