@economic/taco 2.35.0 → 2.36.0

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();
@@ -10210,6 +10218,13 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
 function configureReactTableOptions(options, props) {
   var _options$enableFilter, _options$enableColumn, _options$enableRowExp, _options$enableColumn2, _options$enableColumn3, _options$enableSortin;
   const enableRowSelection = options.enableRowSelection || options.enableRowSelectionSingle;
+  const getRowIdentityColumnAccessor = () => {
+    if (!props.rowIdentityColumnAccessor) {
+      return undefined;
+    }
+    const rowIdentityColumnAccessors = [props.rowIdentityColumnAccessor].flat();
+    return originalRow => rowIdentityColumnAccessors.map(identityColumnAccessor => String(originalRow[identityColumnAccessor])).join('_');
+  };
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10234,6 +10249,8 @@ function configureReactTableOptions(options, props) {
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getGroupedRowModel: reactTable.getGroupedRowModel(),
+    // Use row indentity column values as id for each row
+    getRowId: getRowIdentityColumnAccessor(),
     groupedColumnMode: false
   };
   if (tableOptions.enableColumnResizing) {
@@ -10438,7 +10455,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 +10677,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 +10799,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 +11085,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);
     }
@@ -11405,6 +11592,7 @@ function useTableManager(props, meta, internalColumns) {
   // ensure data is always valid
   const data = (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : [];
   const length = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : data.length;
+  const rowIdentityColumnAccessor = props.rowIdentityColumnAccessor !== undefined ? [props.rowIdentityColumnAccessor].flat() : [];
   // create a react-table instance
   const instance = reactTable.useReactTable({
     data,
@@ -11432,7 +11620,7 @@ function useTableManager(props, meta, internalColumns) {
       rowDrag,
       rowDrop: rowDrop,
       rowExpansion: rowExpansion,
-      rowIdentityColumnId: props.rowIdentityColumnId,
+      rowIdentityColumnAccessor,
       rowGoto,
       rowGroups: rowGroups,
       rowHeight,
@@ -11865,7 +12053,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   let content = null;
   if (rows.length) {
     style = {
-      height: `${totalSize}px`,
+      height: totalSize,
       paddingBottom,
       paddingTop
     };
@@ -12565,8 +12753,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 +12762,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 +13059,7 @@ function HeaderMenu(props) {
     canHide,
     canPin,
     canSort,
+    columnId,
     customMenu,
     index,
     isFiltered,
@@ -12975,10 +13163,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 +13425,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 +15279,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 +15297,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 +15311,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,
@@ -15310,9 +15486,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     name,
     onChange,
     onCreate,
-    dialogTriggerTitle,
-    dialogTriggerDisabled,
-    dialog,
     onDelete,
     onEdit,
     placeholder,
@@ -15349,7 +15522,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
@@ -15382,9 +15554,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     listboxRef,
     multiple,
     onCreate,
-    dialogTriggerTitle,
-    dialogTriggerDisabled,
-    dialog,
     onDelete,
     onEdit,
     open,
@@ -15438,20 +15607,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) || [];
@@ -15486,27 +15648,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const handleCreateInDialog = function (name, color) {
-    try {
-      const _temp2 = function () {
-        if (onCreate && dialog) {
-          const _temp = _catch(function () {
-            return Promise.resolve(onCreate(name, color)).then(function (option) {
-              setValue(option.value);
-              // To avoid memory leak we should bind onClose of dialog with setOpen(false)
-              setOpen(false);
-            });
-          }, function (err) {
-            console.log(err);
-          });
-          if (_temp && _temp.then) return _temp.then(function () {});
-        }
-      }();
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none"', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
@@ -15527,10 +15668,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", {
@@ -15540,8 +15681,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",
@@ -15574,16 +15714,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }, 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)), dialog && dialogTriggerTitle && ( /*#__PURE__*/React__default.createElement("span", {
-    className: "border-grey-300 h-9 border-t p-1.5"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    appearance: "discrete",
-    disabled: dialogTriggerDisabled,
-    dialog: dialog(handleCreateInDialog)
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    className: "text-xs",
-    name: "circle-plus"
-  }), " ", dialogTriggerTitle)))))), /*#__PURE__*/React__default.createElement(ControlledHiddenField, {
+  }) : null))))), /*#__PURE__*/React__default.createElement(ControlledHiddenField, {
     emptyValue: emptyValue,
     multiple: multiple || tags,
     name: name,
@@ -15901,7 +16032,8 @@ const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     allColumns,
     filters,
     onChange: handleChange,
-    value = null
+    value = null,
+    ...attributes
   } = props;
   const {
     texts
@@ -15914,13 +16046,13 @@ const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     message: warning ? texts.table.filters.hiddenColumn : undefined,
     warning: warning,
     className: "min-h-[theme(spacing.8)]"
-  }, /*#__PURE__*/React__default.createElement(Select2, {
+  }, /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     ref: ref,
     className: "focus:yt-focus !w-32 flex-shrink-0 ",
     emptyValue: null,
     onChange: handleChange,
     value: value
-  }, allColumns.map(column => {
+  }), allColumns.map(column => {
     var _column$columnDef$met, _column$parent, _column$parent$column;
     return /*#__PURE__*/React__default.createElement(Select2.Option, {
       key: column.id,
@@ -15940,18 +16072,19 @@ function FilterComparator(props) {
   const {
     column,
     onChange: handleChange,
-    value
+    value,
+    ...attributes
   } = props;
   const {
     texts
   } = useLocalization();
   const validComparators = guessComparatorsBasedOnControl(column);
-  return /*#__PURE__*/React__default.createElement(Select2, {
+  return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     className: "!w-32 flex-shrink-0",
     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)))));
@@ -16071,10 +16204,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,
@@ -16276,7 +16410,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;
     });
@@ -16321,12 +16456,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) {
@@ -16464,8 +16599,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
@@ -18092,6 +18230,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
@@ -18126,6 +18283,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();
@@ -18137,13 +18295,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
@@ -18151,6 +18308,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
@@ -18197,13 +18358,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);
     }
@@ -18240,6 +18400,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({});
@@ -18366,8 +18560,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;
@@ -18392,6 +18586,7 @@ function usePendingChanges(isEnabled, handleSave, validator) {
     getCellError,
     setCellValue,
     validateCell,
+    addCreatedRowChangeset,
     hasChanges,
     hasErrors,
     getErrors,
@@ -18617,10 +18812,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();
       }
@@ -19036,6 +19232,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,
@@ -19045,7 +19242,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 = {
@@ -19076,6 +19273,22 @@ function Alert$1(props) {
   const tableMeta = table.options.meta;
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
   const pendingChangesWithErrors = tableMeta.editing.getErrors();
+  const resetPendingChanges = tableMeta.editing.resetChanges;
+  const allRows = table.getPreFilteredRowModel().rows;
+  // This effect deletes error in the alert if the row that has the error is deleted.
+  React__default.useEffect(() => {
+    pendingChangesWithErrors.forEach(errorRow => {
+      const errorRowId = errorRow.rowId;
+      try {
+        // getRow throws error if it fails to find the row
+        if (!table.getRow(errorRowId)) {
+          resetPendingChanges(errorRowId);
+        }
+      } catch {
+        resetPendingChanges(errorRowId);
+      }
+    });
+  }, [allRows.length]);
   const activeRow = React__default.useMemo(() => tableMeta.rowActive.rowActiveIndex ? table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex] : undefined, [tableMeta.rowActive.rowActiveIndex]);
   // mark errors being rendered as seen
   React__default.useEffect(() => {
@@ -19104,18 +19317,23 @@ function Alert$1(props) {
   const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
   // generate links to each invalid row, to go into the error message
   const links = [];
-  const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
+  const rowIdentityColumn = tableMeta.rowIdentityColumnAccessor ?
+  // Since rowIdentityColumnAccessor can have multiple ids, we use the first id to refer to the row in Alert
+  table.getColumn(String(tableMeta.rowIdentityColumnAccessor[0])) : undefined;
   pendingChangesWithErrors.forEach((error, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       // Add space before and after `messageAnd` text
       links.push(` ${validationTexts.alert.messageAnd} `);
     }
-    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
+    const rowIndex = table.getFilteredRowModel().rows.findIndex(row => row.id === error.rowId);
     const handleClick = () => {
+      // if row is visible
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
-      } else {
+      }
+      // if row is filtered out
+      else {
         setShowFilterResetDialog(error.rowId);
       }
     };
@@ -19191,6 +19409,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,
@@ -19247,6 +19548,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, {
@@ -19260,7 +19562,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);